/* PIDEME (21 oct 2026, ALIADO-WEB-2 A; formularios y páginas estáticas en ALIADO-WEB-4): páginas legales (layouts/landing/legal.blade.php,
   public/privacidad.html y public/eliminar-cuenta.html). Colores y letras de la portada
   (pideme-portada/app/globals.css); contraste WCAG AA o más en todos los textos: tinta 18,2:1 sobre blanco, enlaces #a8420a
   6,1:1, café sobre naranja 6,3:1, pie 14,2:1. Letras locales (licencia OFL en ../fonts). */
@font-face { font-family: "Gabarito"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/gabarito-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Onest"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/onest-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Onest"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/onest-latin-700-normal.woff2") format("woff2"); }

:root {
  --naranja: #ff6b1a;
  --cafe: #2a0e04;
  --tinta: #1b1410;
  --tinta-suave: #4a3f38;
  --linea: #e8e1dc;
  --crema: #fff8f2;
  --durazno: #ffe9d9;
  --enlace: #a8420a;
  --pie-texto: #e9e2dc;
  --titulo: "Gabarito", ui-sans-serif, system-ui, sans-serif;
  --texto: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lado: 16px;
}
@media (min-width: 640px) { :root { --lado: 24px; } }
@media (min-width: 1024px) { :root { --lado: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--crema); color: var(--tinta); font-family: var(--texto); font-size: 17px; line-height: 1.65; }
.contenedor { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 var(--lado); }
a { color: var(--enlace); text-underline-offset: 2px; }
a:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; border-radius: 4px; }

.saltar { position: absolute; left: 8px; top: -60px; z-index: 10; background: var(--tinta); color: #fff; padding: 8px 16px; border-radius: 999px; font-weight: 700; }
.saltar:focus { top: 8px; }

.cabecera { background: var(--naranja); color: var(--cafe); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.marca { display: inline-flex; align-items: center; border-radius: 8px; }
.marca img { display: block; width: 90px; height: 30px; }
.volver { color: var(--cafe); font-weight: 700; font-size: 15px; text-decoration: none; padding: 6px 14px; border: 2px solid var(--cafe); border-radius: 999px; white-space: nowrap; }
.volver:hover { background: var(--cafe); color: var(--naranja); }
.cabecera a:focus-visible { outline-color: var(--cafe); }
@media (min-width: 1024px) { .cabecera-fila { min-height: 68px; } }

main { padding-top: 24px; padding-bottom: 48px; }
.hoja { background: #fff; border: 1px solid var(--linea); border-radius: 22px; padding: 24px 20px; }
@media (min-width: 640px) { main { padding-top: 40px; padding-bottom: 64px; } .hoja { padding: 40px 48px; } }

.hoja h1, .legal-cuerpo h1, .legal-cuerpo h2, .legal-cuerpo h3 { font-family: var(--titulo); font-weight: 800; color: var(--tinta); line-height: 1.2; }
.hoja h1, .legal-cuerpo h1 { font-size: 28px; margin: 0 0 16px; letter-spacing: -0.01em; }
.legal-cuerpo h2 { font-size: 21px; margin: 32px 0 10px; }
.legal-cuerpo h3 { font-size: 18px; margin: 24px 0 8px; }
@media (min-width: 640px) { .hoja h1, .legal-cuerpo h1 { font-size: 36px; } .legal-cuerpo h2 { font-size: 24px; } }
.legal-cuerpo > :first-child { margin-top: 0; }
.legal-cuerpo p, .legal-cuerpo ul, .legal-cuerpo ol { margin: 0 0 14px; }
.legal-cuerpo ul, .legal-cuerpo ol { padding-left: 1.3em; }
.legal-cuerpo li { margin-bottom: 6px; }
.legal-cuerpo strong, .legal-cuerpo b { font-weight: 700; }
.legal-cuerpo, .legal-cuerpo a { overflow-wrap: anywhere; }
.legal-cuerpo img { max-width: 100%; height: auto; }
.legal-cuerpo hr { border: 0; border-top: 1px solid var(--linea); margin: 28px 0; }
/* Tablas del texto legal: con borde y, si no caben en el celular, se desplazan dentro de su caja (la página no se desborda). */
.legal-cuerpo table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; line-height: 1.5; }
.legal-cuerpo th, .legal-cuerpo td { border: 1px solid var(--linea); padding: 8px 10px; text-align: left; vertical-align: top; min-width: 120px; }
.legal-cuerpo th { background: var(--durazno); font-weight: 700; }

.pie { background: var(--tinta); color: var(--pie-texto); padding: 32px 0; font-size: 15px; }
.pie a { color: #fff; }
.pie a:focus-visible { outline-color: #fff; }
.pie-enlaces { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.pie-derechos { margin: 0; border-top: 1px solid var(--tinta-suave); padding-top: 16px; }

/* ---------- PIDEME (21 oct 2026, ALIADO-WEB-4): subtítulo, avisos y formularios (PQR, consulta de PQR) ----------
   Mismas letras y colores. Campos de 48 px (mínimo táctil 44), etiquetas visibles, errores en texto con role="alert".
   Botón principal #c2410c con letra blanca (5,2:1; al pasar #9a3412, 7,3:1). Bordes de campo #8a7b72 sobre blanco (3,9:1). */
.hoja-subtitulo { color: var(--tinta-suave); margin: -6px 0 18px; font-size: 16px; }
.aviso { border-radius: 14px; padding: 14px 18px; margin: 0 0 22px; border: 1px solid var(--linea); background: var(--crema); }
.aviso p { margin: 0 0 8px; } .aviso p:last-child { margin-bottom: 0; }
.aviso ul { margin: 0; padding-left: 1.2em; }
.aviso-ok { background: #eefaf0; border-color: #9fd3ad; }
.aviso-ok .rad { font-size: 22px; font-weight: 700; letter-spacing: .3px; }
.aviso-error { background: #fdeeee; border-color: #e7a1a1; color: #7a1414; }
.aviso-error strong { color: #7a1414; }
.formulario { margin: 8px 0 18px; }
.formulario label { display: block; font-weight: 700; margin: 18px 0 6px; font-size: 16px; }
.formulario .opc { font-weight: 400; color: var(--tinta-suave); }
.formulario input, .formulario select, .formulario textarea {
  display: block; width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #8a7b72; border-radius: 12px;
  background: #fff; color: var(--tinta); font: inherit; font-size: 16px; line-height: 1.4;
}
.formulario textarea { min-height: 150px; resize: vertical; }
.formulario input[type=file] { padding: 10px; }
.formulario input:focus-visible, .formulario select:focus-visible, .formulario textarea:focus-visible { outline: 3px solid var(--tinta); outline-offset: 1px; }
.formulario .ayuda { font-size: 14px; color: var(--tinta-suave); margin-top: 6px; }
.formulario .captcha { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.formulario .captcha img { border: 1px solid var(--linea); border-radius: 10px; background: #fff; }
.formulario .captcha input { flex: 1 1 180px; width: auto; }
.boton { display: block; width: 100%; min-height: 52px; margin-top: 24px; padding: 12px 22px; border: 0; border-radius: 999px;
  background: #c2410c; color: #fff; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.boton:hover { background: #9a3412; }
.boton:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
@media (min-width: 640px) { .boton { width: auto; min-width: 240px; } }
.pie-datos { margin: 0 0 16px; font-size: 14px; color: var(--pie-texto); }

@media print {
  .cabecera, .pie, .saltar { display: none; }
  body { background: #fff; }
  .hoja { border: 0; padding: 0; }
}