/* ============================================================
   LINWAFRANCA · Base compartida de sitio
   Portado desde el proyecto LINWAFRANCA de Claude Design.

   ⚠️ ESTE ARCHIVO ESTÁ DUPLICADO EN home/ Y EN landing/.
   Los dos proyectos de Vercel usan Root Directory distinto, así que no
   pueden compartir un archivo del repo. Si tocas un token acá, tócalo
   también en el otro, o la marca se parte.

   Tipografías: Schibsted Grotesk (display) + Newsreader (texto) +
   IBM Plex Mono (rótulos), y Instrument Sans solo para el logotipo.
   Decisión D2 del 04-09-2026, revisada el 22-09-2026: Instrument Sans
   dejó los titulares por una grotesca con más autoridad de titular, y
   se quedó en la marca para no separarla del banner ni de Claude Design.
   Antes de D2 eran Figtree/Lora/JetBrains Mono, que leían como diseño
   generado por IA.
   ============================================================ */

/* — Fuentes · servidas desde el propio sitio (25-09-2026) —
   Hasta esa fecha venían de Google Fonts: una hoja de estilos de otro dominio
   que frenaba el primer pintado, dos conexiones más y la IP de cada visita
   enviada a Google. Son los mismos archivos que entregaba Google, en su
   subconjunto latino, que cubre todo el español y el portugués.

   Declararlas acá no descarga nada: el navegador baja cada archivo recién
   cuando una página usa esa fuente con ese peso. Por eso Newsreader va en
   archivos por peso y no en su versión variable, que pesa el doble.
   Schibsted Grotesk sí es variable: un archivo cubre del 400 al 700.

   Un peso nuevo = su archivo en assets/fonts/ de los DOS sitios + su línea
   acá, en los dos CSS. Si se reemplaza un archivo, se le cambia el nombre:
   assets/ queda 30 días en caché. */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/schibsted-grotesk.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/newsreader-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/newsreader-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/newsreader-italic-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:500;font-display:swap;src:url(/assets/fonts/newsreader-italic-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/instrument-sans-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* — Color — */
  --green:#042616;        /* Verde Medianoche · principal */
  --green-2:#0B4227;      /* Verde Follaje · enlaces, hover */
  --green-3:#14603A;
  --champagne:#C5A059;    /* Acento único */
  --champagne-lt:#E0C48C; /* Acento sobre verde */
  --champagne-dp:#9E7C3C; /* Acento sobre lino · énfasis grande y logotipo */
  --champagne-tx:#86682F; /* Rótulos chicos sobre lino: 4,5:1, lo que pide AA
                             bajo 18px. El dp da 3,4:1 y a 10px no se lee bien */
  --beige:#F4EFE4;        /* Fondo base */
  --beige-lt:#FBF7EF;
  --beige-dp:#EAE2D2;
  --ink:#16241C;          /* Texto titular */
  --body:#4A5A50;         /* Texto de lectura */
  --mute:#5F6E65;          /* 4,7:1 sobre lino. Era #7E8C83 (3,1:1) hasta el
                             25-09-2026: etiquetas y rótulos no llegaban a AA */
  --line:#DCD3C2;
  --danger:#9B5B46;        /* 4,6:1. Era #B0674F (3,7:1) */

  /* — Tipografía — */
  --display:"Schibsted Grotesk","Segoe UI",system-ui,sans-serif;
  /* Solo el logotipo: la palabra LinwaFranca (.wm) y el monograma LF (.lf__g).
     Es identidad, no titular: no sigue a --display. */
  --brand:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --text:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  /* — Ritmo — */
  --pad:clamp(20px,5vw,64px);
  --maxw:1240px;
  --arch:220px;           /* curvatura de arcos y paneles */

  /* — Movimiento — (25-09-2026)
     Tres duraciones y una curva para todo el sitio. Solo se animan transform y
     opacity; color, borde y fondo cambian en --dur-1 lineal. Sin rebotes, sin
     escalas, sin bucles: la marca vende autoridad, no entretenimiento. */
  --dur-1:120ms;          /* color, borde: respuesta inmediata */
  --dur-2:220ms;          /* microinteracciones: flecha, subrayado */
  --dur-3:560ms;          /* entrada de secciones al hacer scroll */
  --ease-out:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--beige);color:var(--ink);font-family:var(--display);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}

a{color:var(--green-2);text-decoration:none}
a:hover{color:var(--champagne-dp)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* — Marca — */
.wm{font-family:var(--brand);font-weight:700;letter-spacing:-.03em;color:var(--green);line-height:1}
.wm em{font-family:var(--text);font-style:italic;font-weight:500;color:var(--champagne-dp)}
.on-green .wm,.wm--lt{color:var(--beige-lt)}
.on-green .wm em,.wm--lt em{color:var(--champagne-lt)}
/* Monograma LF · la L y la F siempre contenidas dentro del disco. */
.lf{display:grid;place-items:center;background:var(--green);color:var(--beige-lt);border-radius:999px;flex:none;overflow:hidden;line-height:1}
.lf__g{display:inline-flex;align-items:baseline;font-family:var(--brand);font-weight:700;letter-spacing:-.03em;line-height:1;transform:translateY(3%)}
.lf__g i{font-family:var(--text);font-style:italic;font-weight:500;color:var(--champagne-lt);margin-left:-.09em}
.lf--gold{background:var(--champagne);color:var(--green)}
.lf--gold .lf__g i{color:var(--green-2)}
.lf em{font-family:var(--text);font-style:italic;font-weight:500;color:var(--champagne-lt)}
.lf--stack{width:var(--d,55px);height:var(--d,55px)}
.lf__g--stack{flex-direction:row;align-items:baseline;font-size:calc(var(--d,55px)/2.05);line-height:1;transform:translateY(2%)}
.lf__g--stack i{margin-left:-.13em;font-size:1em;line-height:1}

/* — Átomos de texto — */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne-tx)}
.on-green .eyebrow{color:var(--champagne-lt)}
.lead{font-family:var(--text);font-size:clamp(17px,1.35vw,19px);line-height:1.65;color:var(--body)}
.on-green .lead{color:#B9C6BD}
.tiny{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.on-green{background:var(--green);color:var(--beige-lt)}
.on-green h1,.on-green h2,.on-green h3{color:var(--beige-lt)}

/* Titulares sin palabras sueltas al final; párrafos sin la última línea de una
   sola palabra. Si el navegador no lo soporta, no pasa nada. */
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}

/* Justificado con partición silábica, pedido por Leo el 22-09-2026. Solo desde
   760px y solo en prosa de medida larga: en columnas angostas el justificado
   abre ríos de espacio entre palabras, con o sin partición. lang="es-CL" en
   el <html> es lo que le dice al navegador cómo partir. */
@media (min-width:760px){
  .just{text-align:justify;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3}
}

/* — Botones — */
.btn{white-space:nowrap;font-family:var(--display);font-weight:600;font-size:15px;padding:16px 26px;border:0;border-radius:2px;display:inline-flex;align-items:center;gap:12px;cursor:pointer;transition:background-color var(--dur-1) linear,color var(--dur-1) linear,border-color var(--dur-1) linear,transform var(--dur-1) linear}
.btn > span:last-child{transition:transform var(--dur-2) var(--ease-out)}
.btn:hover > span:last-child{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn--pri{background:var(--champagne);color:var(--green)}
.btn--pri:hover{background:var(--champagne-lt);color:var(--green)}
.btn--dark{background:var(--green);color:var(--beige-lt)}
.btn--dark:hover{background:var(--green-2);color:var(--beige-lt)}
/* El borde --line daba 1,4:1 sobre lino y el botón se perdía; al 45 % del verde
   llega a 3:1, el mínimo para el contorno de un control. */
.btn--gho{background:transparent;border:1px solid var(--line);border-color:color-mix(in srgb,var(--green) 45%,transparent);color:var(--green)}
.btn--gho:hover{border-color:var(--green);color:var(--green)}
.on-green .btn--gho{border-color:rgba(255,255,255,.28);color:var(--beige-lt)}
.on-green .btn--gho:hover{border-color:var(--champagne-lt);color:var(--champagne-lt)}
.btn--pill{border-radius:999px}
/* El subrayado champagne queda siempre; al pasar el mouse, uno verde lo cubre
   de izquierda a derecha. Dos fondos en vez de un borde, para poder animarlo. */
.link-u{font-family:var(--display);font-weight:600;font-size:15px;color:var(--green-2);padding-bottom:3px;
  background:linear-gradient(var(--green-2),var(--green-2)) 0 100%/0 1px no-repeat,
             linear-gradient(var(--champagne),var(--champagne)) 0 100%/100% 1px no-repeat;
  transition:background-size var(--dur-2) var(--ease-out),color var(--dur-1) linear}
.link-u:hover{color:var(--green-2);background-size:100% 1px,100% 1px}

.pill{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:7px 13px;border-radius:999px;display:inline-block}
.pill--o{border:1px solid var(--line);color:var(--champagne-tx)}
.pill--g{background:var(--champagne);color:var(--green)}
.pill--d{background:var(--green);color:var(--champagne-lt)}

/* — Reglas y texturas orgánicas — */
.rule{height:1px;background:var(--line);border:0}
.rule--dash{height:1px;border:0;background:repeating-linear-gradient(90deg,var(--line) 0 7px,transparent 7px 14px)}
.on-green .rule{background:rgba(255,255,255,.16)}
.paper{background-image:radial-gradient(circle at 12% 8%,rgba(197,160,89,.07),transparent 42%),radial-gradient(circle at 88% 82%,rgba(11,66,39,.05),transparent 46%)}

/* — Retrato: marco de arco — */
.portrait{position:relative}
.portrait__slot{overflow:hidden;background:var(--beige-dp);width:100%;height:100%}
.portrait--arch .portrait__slot{border-radius:var(--arch) var(--arch) 6px 6px}
.portrait--dome .portrait__slot{border-radius:999px}
.portrait--blob .portrait__slot{border-radius:58% 42% 47% 53% / 46% 52% 48% 54%}
.portrait__frame{position:absolute;inset:0;border:1px solid var(--champagne);pointer-events:none}
.portrait--arch .portrait__frame{border-radius:var(--arch) var(--arch) 6px 6px}
.portrait--dome .portrait__frame{border-radius:999px}
.portrait--blob .portrait__frame{border-radius:58% 42% 47% 53% / 46% 52% 48% 54%}
.portrait__cap{position:absolute;background:var(--beige-lt);border:1px solid var(--line);border-radius:3px;padding:14px 18px;display:flex;flex-direction:column;gap:3px}
.portrait__cap b{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.015em;color:var(--green)}
.portrait__cap i{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}

/* — Credenciales (sin cifras inventadas) — */
.creds{display:grid;gap:2px}
.cred{display:flex;flex-direction:column;gap:6px;padding:20px 22px}
.cred__v{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.9vw,23px);letter-spacing:-.02em;color:var(--green);line-height:1.15}
/* En las credenciales el énfasis es SOLO de color: misma tipografía, sin itálica. */
.on-green .cred__v{color:var(--beige-lt)}
.cred__k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);line-height:1.5}
.on-green .cred__k{color:#9FB0A6}

/* — Footer — */
.foot{border-top:1px solid var(--line);padding:28px 0}
.foot__in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.on-green .foot{border-color:rgba(255,255,255,.16)}
.on-green .foot__in{color:#9FB0A6}

/* — Entrada de secciones — (25-09-2026)
   Solo bajo el pliegue y una sola vez: sube 12px y aparece. La clase .js la pone
   el mismo script que observa, así que si el JS falla todo queda visible. Nunca
   en el hero, el formulario ni /diagnostico, que es la página que cobra. */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(12px);
    transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);
    transition-delay:calc(var(--i,0) * 60ms)}
  .js [data-reveal].is-in{opacity:1;transform:none}
}

/* — Accesibilidad — */
/* El anillo champagne daba 2,1:1 sobre lino; el verde follaje da 10:1. Sobre
   verde se queda en champagne claro. */
:focus-visible{outline:2px solid var(--green-2);outline-offset:3px}
.on-green :focus-visible{outline-color:var(--champagne-lt)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}