/* ==========================================================================
   VIA — hoja de estilos de las páginas legales
   privacidad.html, terminos.html y eliminar-datos.html.

   Es el diseño de la portada llevado a texto largo: fondo crema, titulares
   en Instrument Serif, cuerpo en Figtree, el navy de marca y el teal. Va en
   un archivo aparte y no embebida porque la usan tres páginas; el
   netlify.toml ya permite style-src 'self'. La portada no la carga: sigue
   con su propia hoja, así que tocar esto no puede romper el inicio.

   Las tipografías van autoalojadas por lo mismo que en la portada:
   font-src 'self' bloquearía Google Fonts.
   ========================================================================== */

@font-face{
  font-family:'Instrument Serif';
  src:url('/fonts/instrument-serif.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Instrument Serif';
  src:url('/fonts/instrument-serif-italic.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Figtree';
  src:url('/fonts/figtree-var.woff2') format('woff2-variations');
  font-weight:400 700; font-style:normal; font-display:swap;
}

/* Los mismos valores que la portada. Si cambia uno allá, cambia acá. */
:root{
  --crema:#FDFBEF;
  --crema-2:#F6F2E2;
  --tinta:#0A1420;
  --texto:#16212E;
  --gris:#5A6B7C;
  --gris-suave:#627386;       /* el gris más claro que pasa 4,5 sobre el crema */
  --sobre-oscuro:#E4EDF3;
  --gris-oscuro:#93A7B6;
  --via:#0FA3A3;
  --via-hondo:#0B7F80;
  --via-claro:#39D3CE;
  --ambar:#E8A33D;
  --ambar-texto:#8A5F0E;      /* 5,4 de contraste sobre el crema */
  --rojo:#B8472F;

  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ancho:1180px;
  --lectura:720px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--crema);
  color:var(--texto);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 28px}
.lectura{max-width:var(--lectura);margin:0 auto}

a{color:var(--via-hondo);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--tinta)}
:focus-visible{outline:2.5px solid var(--via);outline-offset:3px;border-radius:6px}
strong{color:var(--tinta);font-weight:600}

/* ---------- navegación ----------
   La de la portada, con los enlaces entre las páginas legales en vez de las
   secciones del inicio. */
.nav{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--crema) 94%,transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(22,33,46,.09);
}
.nav-fila{display:flex;align-items:center;gap:32px;height:70px}
.marca{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;font-size:1.16rem;letter-spacing:-.02em;color:var(--tinta)}
.marca:hover{color:var(--tinta)}
.marca svg{width:26px;height:26px;flex:none}
.nav-enlaces{display:flex;gap:28px;margin-left:auto;align-items:center}
.nav-enlaces a{font-size:.95rem;font-weight:500;color:var(--gris);text-decoration:none;transition:color .18s ease}
.nav-enlaces a:hover,.nav-enlaces a[aria-current="page"]{color:var(--tinta)}
.nav-enlaces a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--via);text-decoration-thickness:2px;text-underline-offset:.5em}
@media (max-width:860px){.nav-enlaces a:not(.boton){display:none}}

.boton{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:1rem;font-weight:600;
  padding:15px 30px;border-radius:100px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .18s ease,background .18s ease;
}
.boton-principal,.nav-enlaces a.boton-principal{background:var(--tinta);color:var(--crema)}
.boton-principal:hover,.nav-enlaces a.boton-principal:hover{background:var(--via-hondo);color:var(--crema)}
.nav .boton{padding:11px 22px;font-size:.93rem}
@media (hover:hover) and (pointer:fine){.boton:hover{transform:translateY(-2px)}}
.boton:active{transform:scale(.97);transition-duration:.08s}
@media (prefers-reduced-motion:reduce){.boton:hover,.boton:active{transform:none}}

/* ---------- cabeza de la página ----------
   Como el hero de la portada: vacío a propósito, solo tipografía. */
.cabeza{padding:clamp(56px,9vw,104px) 0 clamp(34px,5vw,52px)}
.etiqueta{
  font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--via-hondo);margin:0 0 20px;
}
.cabeza h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(3rem,8vw,5.2rem);
  line-height:.95;letter-spacing:-.03em;
  color:var(--tinta);margin:0;text-wrap:balance;
}
.cabeza h1 .cursiva{font-style:italic;color:var(--via-hondo)}
.cabeza .meta{margin:24px 0 0;font-size:.95rem;color:var(--gris)}
.cabeza .bajada{margin:26px 0 0;font-size:1.16rem;line-height:1.65;color:var(--gris);max-width:60ch}

/* El borrador: se ve, a propósito. */
.aviso{
  display:flex;gap:14px;align-items:flex-start;
  margin:32px 0 0;padding:20px 24px;
  border:1.5px dashed var(--ambar);border-radius:24px;
  background:rgba(232,163,61,.09);
  font-size:.95rem;line-height:1.6;color:var(--ambar-texto);
}
.aviso svg{flex:none;margin-top:3px;color:var(--ambar)}
.aviso p{margin:0}
.aviso strong{color:var(--ambar-texto)}

.pendiente{
  display:inline;
  font-size:.8em;font-weight:600;letter-spacing:.02em;
  color:var(--ambar-texto);background:rgba(232,163,61,.16);
  border:1px solid rgba(232,163,61,.45);border-radius:6px;padding:1px 7px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* ---------- cuerpo ---------- */
.cuerpo{padding:0 0 clamp(80px,10vw,120px)}
.cuerpo p{margin:0 0 1.1rem}
.cuerpo ul,.cuerpo ol{margin:0 0 1.2rem;padding-left:1.3rem}
.cuerpo li{margin-bottom:.6rem;padding-left:.2rem}
.cuerpo li::marker{color:var(--via)}
.cuerpo ol > li::marker{font-weight:600}
.cuerpo li ul{margin:.6rem 0 0}

.cuerpo h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,4.4vw,2.7rem);
  line-height:1.02;letter-spacing:-.025em;
  color:var(--tinta);
  margin:clamp(56px,7vw,76px) 0 20px;
  text-wrap:balance;
}
.cuerpo h3{
  font-size:1.12rem;font-weight:600;letter-spacing:-.01em;line-height:1.35;
  color:var(--tinta);margin:34px 0 10px;
}

/* El índice es el panel oscuro de la portada, en chico. */
.indice{
  background:var(--tinta);color:var(--sobre-oscuro);
  border-radius:40px;padding:34px 40px;margin:0 0 12px;
}
.indice h2{
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--via-claro);margin:0 0 16px;line-height:1.4;
}
.indice ol{margin:0;padding-left:1.4rem;columns:2;column-gap:40px}
.indice.corto ol{columns:1}
.indice li{margin-bottom:.45rem;font-size:.97rem;break-inside:avoid}
.indice li::marker{color:var(--gris-oscuro);font-weight:500}
.indice a{color:var(--sobre-oscuro);text-decoration:none}
.indice a:hover{color:var(--via-claro);text-decoration:underline}
.indice a:focus-visible{outline-color:var(--via-claro)}

.destacado{
  border-left:3px solid var(--via);
  background:rgba(15,163,163,.07);
  border-radius:0 24px 24px 0;
  padding:22px 26px;margin:26px 0;
}
.destacado p:last-child{margin-bottom:0}
.destacado.critico{border-left-color:var(--rojo);background:rgba(184,71,47,.07)}

/* ---------- formulario (eliminar-datos.html) ----------
   El de la portada vive sobre navy; este va sobre el crema. Lo recibe
   Netlify Forms y avisa por correo. */
.formulario{
  display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;
  margin:28px 0 0;padding:34px;
  background:var(--crema-2);border:1px solid rgba(22,33,46,.1);border-radius:32px;
}
.formulario .campo{display:flex;flex-direction:column;gap:7px;min-width:0}
.formulario .ancho{grid-column:1 / -1}
.formulario label,.formulario legend{font-size:.95rem;font-weight:600;color:var(--tinta)}
.formulario .opcional{font-weight:400;color:var(--gris-suave)}
.formulario .ayuda{font-size:.88rem;color:var(--gris);line-height:1.5;margin:0}
.formulario fieldset{border:0;margin:0;padding:0;min-width:0}
.formulario legend{padding:0;margin-bottom:10px}
.formulario .opcion{
  display:flex;gap:12px;align-items:flex-start;
  font-size:.98rem;font-weight:400;color:var(--texto);line-height:1.45;
  padding:14px 16px;margin-bottom:10px;border-radius:16px;cursor:pointer;
  background:var(--crema);border:1.5px solid rgba(22,33,46,.14);
}
.formulario .opcion:has(input:checked){border-color:var(--via-hondo);background:rgba(15,163,163,.06)}
.formulario .opcion input{width:19px;height:19px;margin:1px 0 0;flex:none;accent-color:var(--via-hondo)}
.formulario input[type=text],.formulario input[type=tel],.formulario input[type=email],.formulario textarea{
  font-family:var(--sans);font-size:1rem;color:var(--texto);width:100%;
  background:var(--crema);border:1.5px solid rgba(22,33,46,.18);
  border-radius:16px;padding:13px 16px;min-height:52px;
  transition:border-color .18s ease;
}
.formulario textarea{min-height:104px;resize:vertical;line-height:1.5}
.formulario input::placeholder,.formulario textarea::placeholder{color:var(--gris-suave);opacity:.8}
.formulario input:focus-visible,.formulario textarea:focus-visible{outline:none;border-color:var(--via-hondo)}
.formulario .opcion input:focus-visible{outline:2.5px solid var(--via);outline-offset:2px}
.formulario .enviar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.formulario .enviar p{margin:0;flex:1 1 240px;font-size:.9rem;color:var(--gris);line-height:1.5}
.formulario .boton{border:0}
.trampa{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media (max-width:640px){
  .formulario{grid-template-columns:1fr;padding:24px 20px;border-radius:24px}
  .formulario .boton{width:100%;justify-content:center}
}

/* ---------- pie ----------
   El de la portada, igual. */
.pie{padding:76px 0 44px;border-top:1px solid rgba(22,33,46,.1)}
.pie-rejilla{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;padding-bottom:44px;border-bottom:1px solid rgba(22,33,46,.12)}
.pie h2{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-suave);margin:0 0 16px;line-height:1.4}
.pie ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.pie a{font-size:.96rem;color:var(--gris);text-decoration:none;transition:color .18s ease}
.pie a:hover{color:var(--via-hondo)}
.pie a[aria-current="page"]{color:var(--tinta)}
.pie .marca{font-size:1.16rem;color:var(--tinta)}
.pie-marca p{font-size:.96rem;color:var(--gris);max-width:38ch;margin:14px 0 0;line-height:1.6}
.pie-fondo{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-size:.88rem;color:var(--gris-suave)}

/* ---------- teléfono ---------- */
@media (max-width:760px){.pie-rejilla{grid-template-columns:1fr 1fr;gap:32px}.pie-marca{grid-column:1/-1}}
@media (max-width:640px){
  body{font-size:16px}
  .contenedor{padding:0 20px}
  .indice{padding:28px 26px;border-radius:28px}
  .indice ol{columns:1}
  .aviso{padding:18px 18px;border-radius:20px}
  .destacado{padding:18px 20px}
}

@media print{
  .nav,.indice,.pie,.formulario{display:none}
  body{background:#fff;font-size:11pt}
  .cabeza{padding:0 0 16pt}
}