/* =======================================================================
   POM Method · base común de la web.
   Sistema tomado tal cual del Manual de marca v1 (21 sept 2026):
   cuatro colores · tres tipografías · dos cuerpos · escala de 4.
   Sin sombras y sin degradados en ninguna parte.
   ======================================================================= */
:root{
  color-scheme: light;
  --hueso:#F2EFE6;      /* fondo */
  --papel:#FCFAF4;      /* superficie elevada */
  --bosque:#1B5745;     /* marca */
  --noche:#16241E;      /* texto */
  --teja:#C6412F;       /* acento: acción principal, punto de no leído, pastilla BETA */
  --filete:#DFD9C9;
  --suave:#5F6E66;
  --claro:#54A387;      /* el bosque, sobre fondo oscuro */
  --marca:'Outfit',system-ui,sans-serif;
  --ui:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --cita:'Newsreader',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--hueso); color:var(--noche);
  font-family:var(--ui); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
img,svg{display:block; max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--teja); outline-offset:2px}


/* --- rejilla: 1120, canal 24, medida de lectura 66 caracteres ---------- */
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
@media (min-width:840px){ .wrap{padding:0 40px} }
.medida{max-width:66ch}


/* --- los cuerpos: 16 para Instrument, 20 para Newsreader --------------- */
p{margin:0 0 16px}
p:last-child{margin-bottom:0}
.meta{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--suave); margin:0 0 24px; display:flex; align-items:center; gap:20px}
.meta::after{content:''; flex:1; height:1px; background:var(--filete)}
.oscuro .meta::after{background:#2B3934}
.verde .meta::after{background:rgba(242,239,230,.22)}
h1{font-family:var(--marca); font-weight:700; font-size:34px; line-height:1.1;
  letter-spacing:-.02em; margin:0 0 20px}
.display{font-family:var(--marca); font-weight:700; font-size:30px; line-height:1.15;
  letter-spacing:-.015em; margin:0 0 20px}
h2{font-family:var(--marca); font-weight:700; font-size:22px; line-height:1.25;
  letter-spacing:-.01em; margin:0 0 16px}
h3{font-family:var(--marca); font-weight:600; font-size:22px; line-height:1.25; margin:0 0 8px}
.pregunta{font-family:var(--cita); font-size:26px; line-height:1.35; margin:0}
.suave{color:var(--suave)}
.cita{font-family:var(--cita); font-style:italic; font-size:20px; line-height:1.45;
  border-left:3px solid var(--bosque); padding-left:20px; margin:0}
.nota{border-left:3px solid var(--bosque); padding-left:20px; margin:24px 0 0; color:var(--suave)}


/* --- secciones y bandas ----------------------------------------------- */
section{padding:64px 0; position:relative}
@media (min-width:840px){ section{padding:96px 0} }
.papel{background:var(--papel); border-top:1px solid var(--filete); border-bottom:1px solid var(--filete)}
.oscuro{background:var(--noche); color:var(--hueso)}
.oscuro .meta{color:var(--claro)}
.oscuro .suave{color:#8FA096}
.oscuro .cita,.oscuro .nota{border-left-color:var(--claro)}
.verde{background:var(--bosque); color:var(--hueso)}
.verde .meta{color:#A8CFC0}
.verde .suave{color:#C3DCD2}


/* --- botones: radio 10, altura 48. Uno principal por pantalla --------- */
.btn{display:inline-flex; align-items:center; justify-content:center; height:48px;
  padding:0 24px; border-radius:10px; border:0; background:var(--teja); color:#FFFFFF;
  font-family:var(--ui); font-size:16px; font-weight:600; text-decoration:none; cursor:pointer;
  transition:background .15s}
.btn:hover{background:#B03A2A}
.btn[disabled]{background:var(--suave); cursor:default}
.btn2{display:inline-flex; align-items:center; justify-content:center; height:48px;
  padding:0 24px; border-radius:10px; background:transparent; color:inherit;
  border:1px solid var(--filete); font-size:16px; font-weight:500; text-decoration:none; cursor:pointer}
.oscuro .btn2,.verde .btn2{border-color:rgba(242,239,230,.35)}
.btn2:hover{border-color:currentColor}
.enlace{display:inline-block; color:var(--bosque); font-weight:600; text-decoration:none;
  border-bottom:1px solid var(--filete); padding-bottom:2px}
.enlace:hover{border-bottom-color:var(--bosque)}
.oscuro .enlace,.verde .enlace{color:var(--hueso); border-bottom-color:rgba(242,239,230,.4)}


/* --- la trama: la marca teselada (7 % conversación / 14 % portadas) ---- */
.trama{position:absolute; inset:0; overflow:hidden; pointer-events:none; color:var(--bosque)}
.trama svg{width:100%; height:100%}
.verde .trama{color:var(--hueso)}
.sobre{position:relative}


/* --- cabecera --------------------------------------------------------- */
header{position:sticky; top:0; z-index:50; background:var(--hueso);
  border-bottom:1px solid transparent; transition:border-color .2s}
header.pegado{border-bottom-color:var(--filete)}
header .barra{display:flex; align-items:center; justify-content:space-between; gap:24px; height:72px}
.lockup{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--noche)}
.lockup .mk{width:32px; height:32px; flex:0 0 auto}
.lockup .txt{display:block; line-height:1}
.lockup .pom{font-family:var(--marca); font-weight:700; font-size:25px; letter-spacing:.02em;
  display:block; margin-right:-.02em}
.lockup .met{font-family:var(--marca); font-weight:600; font-size:9.5px; display:block;
  letter-spacing:.355em; margin-top:3px; margin-right:-.355em}
header nav{display:flex; align-items:center; gap:24px}
header nav a.simple{font-size:16px; color:var(--suave); text-decoration:none}
header nav a.simple:hover{color:var(--noche)}
header nav .btn2{height:40px; padding:0 16px}
/* 27-sept · encendido: cuando no hay otro botón teja a la vista (js/landing.js). */
header nav .btn2.encendido{background:var(--teja); border-color:var(--teja); color:#FFFFFF; font-weight:600; transition:background .2s, color .2s}
header nav .btn2.encendido:hover{background:#B03A2A}
@media (max-width:719px){ header nav a.simple{display:none} header .barra{height:64px} }


/* --- filas con filete (en vez de tarjetas) ---------------------------- */
.filas{border-top:1px solid var(--filete); margin:32px 0 0}
.fila{border-bottom:1px solid var(--filete); padding:20px 0}
.oscuro .filas,.oscuro .fila{border-color:#2B3934}
.verde .filas,.verde .fila{border-color:rgba(242,239,230,.22)}
.escena{font-family:var(--cita); font-style:italic; font-size:20px; line-height:1.45}


/* --- formularios ------------------------------------------------------ */
form .et{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; margin:0 0 8px}
.campos{display:flex; flex-wrap:wrap; gap:12px}
input[type=email]{flex:1 1 240px; height:48px; padding:0 16px; font-family:var(--ui); font-size:16px;
  color:var(--noche); background:var(--papel); border:1px solid var(--filete); border-radius:10px}
input[type=email]::placeholder{color:var(--suave)}
.aviso{margin:12px 0 0; min-height:24px}
.aviso.mal{color:var(--teja)}
.verde .aviso.mal{color:#F0B8AE}
.verde input[type=email]{background:#17493B; border-color:rgba(242,239,230,.28); color:var(--hueso)}
.verde input[type=email]::placeholder{color:#8FB5A7}


/* --- pie -------------------------------------------------------------- */
footer{background:var(--noche); color:var(--hueso); padding:56px 0 40px}
footer .lockup{color:var(--hueso)}
footer .lockup .mk{width:26px; height:26px}
footer .lockup .pom{font-size:20px}
footer .lockup .met{font-size:7.6px; letter-spacing:.355em}
.pie-sup{display:grid; gap:32px; padding-bottom:32px; border-bottom:1px solid #2B3934}
@media (min-width:720px){ .pie-sup{grid-template-columns:1fr auto; align-items:start} }
.pie-nav{display:flex; flex-wrap:wrap; gap:24px}
.pie-nav a{color:#8FA096; text-decoration:none; font-size:16px}
.pie-nav a:hover{color:var(--hueso)}
.pie-inf{padding-top:32px; color:#8FA096}
.pie-inf p{max-width:74ch}
.pie-inf .legal{font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; margin-top:24px}

@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }


/* --- la caja de captación: el mismo sitio, dos brazos (js/brazo.js) ---- */
html[data-brazo="quiz"] .solo-correo{display:none !important}
html:not([data-brazo="quiz"]) .solo-quiz{display:none !important}
.caja{max-width:540px; margin:28px 0 0}
.caja .aviso{margin:10px 0 0; min-height:0}
.caja .aviso:empty{display:none}
.letra-caja{font-family:var(--mono); font-size:12px; letter-spacing:.04em; line-height:1.6; color:var(--suave); margin:12px 0 0}
.caja.oscura .letra-caja{color:#C9D8D1}
.caja.oscura input[type=email]{background:rgba(22,36,30,.55); border-color:rgba(242,239,230,.4); color:var(--hueso)}
.caja.oscura input[type=email]::placeholder{color:#A9BDB4}
.caja.oscura .aviso.mal{color:#F4C2B8}
.caja.oscura .et{color:var(--hueso)}
@media (max-width:479px){ .caja .campos .btn{width:100%} }

/* 26-sept · sugerencias de dominio bajo los campos de correo (js/correo.js). */
.correo-sug{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 0}
.correo-sug[hidden]{display:none}
.correo-sug-b{font:inherit; font-size:14px; padding:6px 12px; border-radius:99px; cursor:pointer;
  background:transparent; color:inherit; border:1px solid currentColor; opacity:.85}
.correo-sug-b:hover,.correo-sug-b:focus-visible{opacity:1}