/* ============================================================================
   Datassa · sitio público · /css/sitio.css
   El sistema de diseño entero, una sola hoja para todas las páginas. DISENO.md manda.
   Lo que DISENO.md no fijaba se decidió así (para el integrador):
   - Contextos claro/oscuro por variables: ningún componente sabe sobre qué fondo está. Los fondos oscuros
     (.oscuro .entrada .barra .pie .hero .seccion--oscura .hoja .franja .tarjeta--oscura) y las islas claras
     (.claro .quien .seccion--blanca .tarjeta .formulario .puerta-chica .mundos …) pisan --texto-2, --texto-3,
     --filete, --borde-boton, --velo-toque, --fondo-tarjeta, --acento-icono, --m-texto y --foco.
   - --foco-claro / --foco-oscuro y --m-texto-claro son indirecciones para que el grep de la sección 9 quede limpio.
   - Los rgba sueltos del DISENO pasaron a tokens (--telon, --halo-foco, --halo-error, --velo-hero…).
   - .barra--entrada va absoluta sobre .mapa-vivo, que compensa con padding-top: así el primer pantallazo mide 100svh.
   - La mirilla queda abajo a la derecha también en el celular (arriba pisaba el título y la línea): el picaporte
     está a su izquierda y nunca se tapa; .puerta-adentro le deja lugar.
   - .mapa-vivo.con-mapa apaga el patrón SVG (entrada.js pone con-mapa en la sección cuando el canvas gana .lista).
   - body es una columna flex y .pie lleva margin-top:auto: en páginas cortas el pie queda abajo.
   - En la barra interna, bajo 400 px solo se ve el iso (sin wordmark) y bajo 480 «Menú» es solo el ícono.
   - .hoja se abre con la clase .hoja--abierta (el JS saca hidden un cuadro antes). El formulario lleva
     .formulario--enviando mientras manda y .gracias.dibujada dibuja el tilde.
   - [data-revelar] admite variantes: "izquierda", "derecha", "escala", "quieto" (solo opacidad).
   - Los tres hex que el DISENO escribía dentro de .mundo-* (cortinas y tinte lila) pasaron a tokens de :root
     (--cortina-pyme, --cortina-extensiones, --lila-tinte): el grep de la sección 9 no encuentra ningún color fuera de :root.
   - .puerta y .hoja-mundo llevan su propia clase de mundo sobre fondo oscuro: vuelven a tomar --m-texto de --m-linea
     (la clase .mundo-* sola lo dejaría en el tono para fondo claro).
   - .seccion--sin-arriba (padding-top: 0) para la sección «¿También sembrás?» de Consultoría (7.2, fila 9).
   - Al imprimir (legales): sin barra, hoja, flotante ni índice; la prosa a todo el ancho.
   - El barrido de luz de .puerta.encendida::after corre solo con (hover: none): es el «se enciende al llegar» táctil (6.1 #7);
     en escritorio el hover ya hace bastante.
   - Entre 1024 y 1279 la barra va más apretada (gap 16, enlaces con 8 px) para que marca + selector + cuatro secciones +
     botón entren en 1009 px útiles; y lleva overflow-x: clip para no darle nunca scroll horizontal a la página.
   - La página de referencia con un ejemplo de cada componente es /_plantilla.html (no se publica).
   ============================================================================ */

/* ---- 1. Tokens (único lugar con colores escritos) ---- */
:root {
  --carbon-950: #141618; --carbon-900: #1B1E21; --carbon-800: #24282B; --carbon-700: #3A3A3A;
  --gris-500: #5B6166; --gris-400: #8B9196; --gris-300: #B9BFC5; --gris-200: #D5DADE; --gris-100: #E7EAEC;
  --papel: #F4F6F7; --blanco: #FFFFFF;

  --cyan: #00A8D3; --cyan-claro: #5FD0EE; --cyan-texto: #086B8A; --cyan-titulo: #007A9C; --cyan-tinte: #E4F5FA;
  --cyan-luz: rgba(95, 208, 238, .18); --cyan-sombra: rgba(95, 208, 238, .45);

  --verde: #46702F; --verde-texto: #3A5F26; --verde-claro: #8FC46A; --verde-tinte: #EEF3E8;
  --verde-luz: rgba(143, 196, 106, .18); --verde-sombra: rgba(143, 196, 106, .45);
  --trigo: #D8A531; --trigo-texto: #8A6410; --trigo-claro: #F0C85C; --rastrojo: #FAF6EE;

  --lila: #B59CFF; --lila-texto: #5B3FB8; --lila-luz: rgba(181, 156, 255, .18); --lila-sombra: rgba(181, 156, 255, .45);
  --lila-tinte: #F1ECFF; --cortina-pyme: #0F3B4A; --cortina-extensiones: #2E2550;

  --ok: #1F7A3E; --ok-fondo: #E6F4EA; --error: #B3261E; --error-fondo: #FCECEA; --aviso: #8A6410; --aviso-fondo: #FBF3DF;
  --ok-claro: #7DD99A; --error-claro: #FF8A7A; --whatsapp: #25D366;

  --primario: var(--cyan); --primario-hover: #1FB6E0; --primario-texto: var(--carbon-900);
  --borde-sutil: rgba(255, 255, 255, .12); --borde-fuerte: rgba(255, 255, 255, .28);
  --velo-puerta: rgba(20, 22, 24, .72); --velo-barra: rgba(20, 22, 24, .86);

  /* agregados por el constructor del sistema (siguen siendo tokens) */
  --foco-claro: var(--cyan-texto); --foco-oscuro: var(--cyan-claro);
  --velo-toque-claro: rgba(20, 22, 24, .06); --velo-toque-oscuro: rgba(255, 255, 255, .08);
  --telon: rgba(20, 22, 24, .6); --brillo-borde: rgba(255, 255, 255, .06);
  --halo-foco: rgba(0, 168, 211, .25); --halo-error: rgba(179, 38, 30, .15); --borde-ok: rgba(31, 122, 62, .25);
  --halo-pantalla: rgba(0, 168, 211, .12); --sombra-flotante: 0 6px 20px rgba(0, 0, 0, .25);
  --velo-hero: linear-gradient(95deg, rgba(20,22,24,.95) 0%, rgba(20,22,24,.88) 38%, rgba(20,22,24,.72) 70%, rgba(20,22,24,.55) 100%);

  /* el mundo pisa estas (por defecto PyME) */
  --m-acento: var(--cyan); --m-texto-claro: var(--cyan-texto); --m-texto: var(--m-texto-claro); --m-linea: var(--cyan-claro);
  --m-luz: var(--cyan-luz); --m-sombra: var(--cyan-sombra); --m-tinte: var(--cyan-tinte); --m-cortina: var(--cortina-pyme);
  --m-chevron-claro: var(--cyan-claro);

  /* contexto claro (lo oscuro lo pisa más abajo) */
  --foco: var(--foco-claro); --texto-2: var(--gris-500); --texto-3: var(--gris-500); --filete: var(--gris-100);
  --borde-boton: var(--gris-200); --borde-boton-hover: var(--carbon-700); --velo-toque: var(--velo-toque-claro);
  --fondo-tarjeta: var(--blanco); --borde-tarjeta: var(--gris-100); --acento-icono: var(--m-acento); --borde-chip: var(--gris-200);

  /* movimiento */
  --suave: cubic-bezier(.2, .7, .2, 1); --resorte: cubic-bezier(.34, 1.3, .4, 1); --tela: cubic-bezier(.7, 0, .2, 1);
  --d-toque: 120ms; --d-corto: 240ms; --d-medio: 420ms; --d-largo: 700ms;

  /* letra */
  --f-titulo: "Bricolage Grotesque", "Bricolage respaldo", Arial, sans-serif;
  --f-cuerpo: "Atkinson Hyperlegible Next", "Atkinson respaldo", "Segoe UI", Arial, sans-serif;
  --t-h1: clamp(2.25rem, 1.6rem + 3.2vw, 4.5rem);
  --t-h1-entrada: clamp(1.875rem, 1.1rem + 3.2vw, 4.5rem);
  --t-puerta: clamp(2rem, 1rem + 3.2vw, 3.75rem);
  --t-h2: clamp(1.75rem, 1.3rem + 2vw, 3rem);
  --t-h3: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  --t-lead: clamp(1.125rem, 1.05rem + .6vw, 1.375rem);
  --t-cuerpo: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --t-nota: clamp(.9375rem, .9rem + .2vw, 1rem);
  --t-ojal: .875rem;
  --t-cifra: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --t-boton: 1.0625rem;

  /* espacios, radios, sombras, anchos */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px;
  --seccion: clamp(4rem, 8vw, 7.5rem); --canal: 20px; --contenedor: 1200px; --prosa: 72ch; --medida: 60ch;
  --r-boton: 12px; --r-campo: 12px; --r-tarjeta: 16px; --r-puerta: 24px; --r-pildora: 999px;
  --sombra-1: 0 1px 2px rgba(20,22,24,.06), 0 4px 12px rgba(20,22,24,.06);
  --sombra-2: 0 12px 32px -8px rgba(20,22,24,.18);
  --sombra-puerta: 0 30px 80px -30px var(--m-sombra);
  --sombra-pantalla: 0 24px 60px rgba(0,0,0,.5);
  --barra-alto: 72px; --barra-alto-pegada: 60px; --barra-alto-celular: 56px;
}
@media (min-width: 768px) { :root { --canal: 32px; } }
.puertas[data-n="3"], .puertas[data-n="4"] { --t-puerta: clamp(2rem, 1rem + 2.4vw, 2.75rem); }

/* Mundos: cada uno pisa las mismas 9 variables; ningún componente conoce el verde */
.mundo-agro, html[data-mundo="agro"] {
  --m-acento: var(--verde); --m-texto-claro: var(--verde-texto); --m-texto: var(--m-texto-claro); --m-linea: var(--verde-claro);
  --m-luz: var(--verde-luz); --m-sombra: var(--verde-sombra); --m-tinte: var(--verde-tinte); --m-cortina: var(--verde);
  --m-chevron-claro: var(--trigo-claro);
}
.mundo-pyme, html[data-mundo="pyme"] {
  --m-acento: var(--cyan); --m-texto-claro: var(--cyan-texto); --m-texto: var(--m-texto-claro); --m-linea: var(--cyan-claro);
  --m-luz: var(--cyan-luz); --m-sombra: var(--cyan-sombra); --m-tinte: var(--cyan-tinte); --m-cortina: var(--cortina-pyme);
  --m-chevron-claro: var(--cyan-claro);
}
.mundo-extensiones { /* reservado para la tercera puerta */
  --m-acento: var(--lila); --m-texto-claro: var(--lila-texto); --m-texto: var(--m-texto-claro); --m-linea: var(--lila);
  --m-luz: var(--lila-luz); --m-sombra: var(--lila-sombra); --m-tinte: var(--lila-tinte); --m-cortina: var(--cortina-extensiones); --m-chevron-claro: var(--lila);
}

/* Sobre oscuro cambian los tokens, no los colores a mano */
.oscuro, .entrada, .barra, .pie, .hero, .seccion--oscura, .hoja, .franja, .tarjeta--oscura {
  --foco: var(--foco-oscuro); --m-texto: var(--m-linea); --texto-2: var(--gris-300); --texto-3: var(--gris-400);
  --filete: var(--borde-sutil); --borde-boton: var(--borde-fuerte); --borde-boton-hover: var(--blanco);
  --velo-toque: var(--velo-toque-oscuro); --fondo-tarjeta: var(--carbon-800); --borde-tarjeta: var(--borde-sutil);
  --acento-icono: var(--m-linea); --borde-chip: var(--borde-fuerte);
  color: var(--blanco);
}
/* Islas claras adentro de lo oscuro (y lo claro en general) vuelven a los tokens claros */
.claro, .quien, .seccion:not(.seccion--oscura), .tarjeta:not(.tarjeta--oscura), .formulario, .gracias, .puerta-chica,
.cierre--tarjeta, .mundos, .calcu, .aviso-caja, .puente, .marco-pantalla:not(.marco-pantalla--oscuro) {
  --foco: var(--foco-claro); --m-texto: var(--m-texto-claro); --texto-2: var(--gris-500); --texto-3: var(--gris-500);
  --filete: var(--gris-100); --borde-boton: var(--gris-200); --borde-boton-hover: var(--carbon-700);
  --velo-toque: var(--velo-toque-claro); --fondo-tarjeta: var(--blanco); --borde-tarjeta: var(--gris-100);
  --acento-icono: var(--m-acento); --borde-chip: var(--gris-200);
  color: var(--carbon-900);
}
/* Componentes oscuros que llevan su propia clase de mundo: el acento de texto vuelve a ser el de línea */
.puerta, .hoja-mundo { --m-texto: var(--m-linea); }

/* ---- 2. Letra: respaldos ajustados para que nada salte ---- */
@font-face { font-family: "Bricolage respaldo"; src: local("Arial Bold"), local("Arial"); size-adjust: 105%; }
@font-face { font-family: "Atkinson respaldo"; src: local("Segoe UI"), local("Arial"); size-adjust: 102%; }

/* ---- 3. Reset y base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--f-cuerpo); font-optical-sizing: auto; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  font-size: var(--t-cuerpo); line-height: 1.6; color: var(--carbon-900); background: var(--papel);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, .puerta-titulo, .cifra, .numeral { font-family: var(--f-titulo); font-synthesis: none; text-wrap: balance; hyphens: none; overflow-wrap: normal; }
h1 { font-size: var(--t-h1); line-height: 1.05; letter-spacing: -.02em; font-weight: 800; }
h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.02em; font-weight: 700; }
h3 { font-size: var(--t-h3); line-height: 1.2; font-weight: 600; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
a:not([class]) { color: var(--m-texto); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:not([class]):hover { text-decoration-thickness: 2px; }
button, input, textarea, select { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 88px; }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--texto-2); }
.nota { font-size: var(--t-nota); line-height: 1.5; color: var(--texto-3); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.contenedor { width: 100%; max-width: var(--contenedor); margin-inline: auto; padding-inline: var(--canal); }
main { min-width: 0; }

/* Saltar al contenido: oculto hasta el foco, botón primario arriba a la izquierda */
.saltar {
  position: absolute; left: 16px; top: 16px; z-index: 200; display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px;
  border-radius: var(--r-boton); background: var(--primario); color: var(--primario-texto); font-weight: 700; font-size: var(--t-boton);
  transform: translateY(-300%); transition: transform var(--d-toque);
}
.saltar:focus-visible { transform: none; outline-color: var(--foco-oscuro); }

/* ---- 4. El chevrón de la D y los íconos ---- */
.chevron { flex-shrink: 0; color: var(--acento-icono); }
.icono, .flecha, .tilde { flex-shrink: 0; }
.flecha { transition: transform 200ms var(--resorte); }
.boton:hover .flecha, .senda:hover .flecha, .puerta-chica:hover .flecha, .puerta:hover .flecha, .puerta.viva .flecha,
.puerta:focus-visible .flecha, .boton:focus-visible .flecha { transform: translateX(3px); }

/* ---- 5. Ojal, cabeza de sección, secciones ---- */
.ojal {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font: 700 var(--t-ojal)/1.25 var(--f-cuerpo); text-transform: uppercase; letter-spacing: .12em; color: var(--m-texto);
}
.ojal--trigo { color: var(--trigo-texto); }
.ojal--trigo .chevron { color: var(--trigo); }
.ojal--verde { color: var(--verde-texto); }
.ojal--verde .chevron { color: var(--verde); }
.oscuro .ojal--trigo, .hero .ojal--trigo, .seccion--oscura .ojal--trigo, .pie .ojal--trigo, .entrada .ojal--trigo, .franja .ojal--trigo { color: var(--trigo-claro); }
.oscuro .ojal--trigo .chevron, .hero .ojal--trigo .chevron, .seccion--oscura .ojal--trigo .chevron, .entrada .ojal--trigo .chevron { color: var(--trigo-claro); }
.oscuro .ojal--verde, .hero .ojal--verde, .seccion--oscura .ojal--verde, .entrada .ojal--verde { color: var(--verde-claro); }
.oscuro .ojal--verde .chevron, .hero .ojal--verde .chevron, .seccion--oscura .ojal--verde .chevron { color: var(--verde-claro); }

.cabeza { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; margin-bottom: 48px; }
.cabeza h2 { max-width: 24ch; }
.cabeza .lead { max-width: var(--medida); }
.cabeza .acciones { margin-top: 8px; }

.seccion { padding-block: var(--seccion); }
.seccion--blanca { background: var(--blanco); border-top: 1px solid var(--gris-100); border-bottom: 1px solid var(--gris-100); }
.seccion--blanca + .seccion--blanca { border-top: 0; }
.seccion--rastrojo { background: var(--rastrojo); }
.seccion--oscura { background: var(--carbon-900); }
.seccion--sin-arriba { padding-top: 0; }

/* texto + imagen, o texto + formulario */
.partido { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) {
  .partido { grid-template-columns: 1fr 1fr; gap: 64px; }
  .partido--pegado { align-items: start; }
  .partido--pegado > :first-child { position: sticky; top: 96px; }
}
.foto { border-radius: var(--r-tarjeta); overflow: hidden; background: var(--carbon-800); aspect-ratio: 4 / 3; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto--retrato { aspect-ratio: 920 / 1080; width: 160px; }
@media (min-width: 768px) { .foto--retrato { width: 220px; } }

.acciones { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-top: 24px; }
.acciones .boton--fantasma { align-self: flex-start; }
@media (min-width: 640px) { .acciones { flex-direction: row; flex-wrap: wrap; align-items: center; } }

/* ---- 6. Botones ---- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border: 1.5px solid transparent; border-radius: var(--r-boton); background: none; color: inherit; text-align: center;
  font: 700 var(--t-boton)/1.2 var(--f-cuerpo); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms, border-color 160ms, color 160ms, transform var(--d-toque);
}
.boton:active { transform: scale(.98); }
.boton[disabled] { cursor: progress; opacity: .8; }
.boton--primario { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); }
.boton--primario:hover { background: var(--primario-hover); border-color: var(--primario-hover); }
.boton--secundario { border-color: var(--borde-boton); color: currentColor; }
.boton--secundario:hover { background: var(--velo-toque); border-color: var(--borde-boton-hover); }
.boton--fantasma {
  padding: 0 4px; border: 0; border-radius: 6px; color: var(--m-texto);
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px;
  transition: text-decoration-color 160ms, color 160ms, transform var(--d-toque);
}
.boton--fantasma:hover { text-decoration-color: currentColor; }
.boton--grande { min-height: 56px; padding: 0 28px; }
.boton--chico { min-height: 40px; padding: 0 16px; font-size: 1rem; }
.boton--bloque { width: 100%; }
@media (min-width: 640px) { .boton--bloque { width: auto; } }
.formulario .boton--bloque, .hoja .boton--bloque { width: 100%; }

/* ---- 7. Barra de arriba ---- */
.barra { position: sticky; top: 0; z-index: 50; background: var(--carbon-950); }
.barra-fila { display: flex; align-items: center; gap: 12px; height: var(--barra-alto-celular); transition: height var(--d-corto) var(--suave); }
.barra.pegada { border-bottom: 1px solid var(--borde-sutil); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .barra.pegada { background: var(--velo-barra); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
.barra-centinela { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; visibility: hidden; }
.barra--entrada { position: absolute; top: 0; left: 0; right: 0; z-index: 5; background: transparent; animation: aparecer 400ms ease-out backwards; }
.barra--entrada .barra-fila { justify-content: space-between; }
@keyframes aparecer { from { opacity: 0; } }

.marca { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; border-radius: 6px; }
.marca-iso { height: 26px; width: auto; }
.marca-palabra { height: 10px; width: auto; }
.barra[data-barra] .marca-palabra { display: none; }
@media (min-width: 400px) { .barra[data-barra] .marca-palabra { display: block; } }
@media (min-width: 768px) {
  .barra-fila { height: var(--barra-alto); gap: 24px; }
  .barra.pegada .barra-fila { height: var(--barra-alto-pegada); }
  .marca-iso { height: 28px; }
  .marca-palabra { height: 11px; }
}

/* «Hablar con Mateo» (entrada): solo el ícono bajo 768 */
.hablar { min-height: 44px; min-width: 44px; padding: 0 8px; }
.hablar-texto { display: none; }
@media (min-width: 768px) { .hablar { padding: 0 6px; } .hablar-texto { display: inline; } }

/* Selector de mundos: píldora blanca, el activo teñido con su mundo */
.mundos { display: inline-flex; gap: 2px; padding: 2px; background: var(--blanco); border-radius: var(--r-pildora); }
.mundos-segmento {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-pildora);
  font-weight: 500; font-size: var(--t-nota); color: var(--gris-500); white-space: nowrap;
  transition: background-color 160ms, color 160ms;
}
.mundos-segmento:hover { color: var(--carbon-900); background: var(--velo-toque-claro); }
.mundos-segmento[aria-current="page"] { background: var(--m-tinte); color: var(--m-texto-claro); }
.mundos-segmento:focus-visible { outline-color: var(--m-texto-claro); outline-offset: 1px; }
.mundos-segmento:not([aria-current="page"]) { display: none; }
@media (min-width: 480px) { .mundos-segmento:not([aria-current="page"]) { display: inline-flex; } }

/* Enlaces de sección y acción: solo desde 1024; antes viven en la hoja */
.barra-secciones { display: none; margin-left: auto; gap: 4px; }
.barra-secciones a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 8px;
  font-weight: 500; font-size: var(--t-nota); color: var(--gris-300);
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px;
  transition: color 160ms, text-decoration-color 160ms;
}
.barra-secciones a:hover, .barra-secciones a[aria-current="true"] { color: var(--blanco); text-decoration-color: var(--m-linea); }
.barra-accion { display: none; flex-shrink: 0; }
/* Sin secciones en la barra (legales, extensiones): la acción va al fondo a la derecha igual. */
.mundos + .barra-accion { margin-left: auto; }
/* El selector sin mundo activo (páginas del sitio, no de un mundo) no tiene nada que mostrar en el celular. */
@media (max-width: 479px) { .mundos--sin-actual { display: none; } }
.barra-menu {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 44px; min-width: 44px; padding: 0 10px;
  border-radius: var(--r-boton); color: var(--blanco); font-weight: 700; font-size: var(--t-nota); flex-shrink: 0;
}
.barra-menu span { display: none; }
@media (min-width: 480px) { .barra-menu span { display: inline; } }
@media (min-width: 1024px) {
  .barra-secciones { display: flex; }
  .barra-accion { display: inline-flex; }
  .barra-menu { display: none; }
  .barra { overflow-x: clip; } /* la barra nunca le da scroll horizontal a la página */
}
/* Entre 1024 y 1279 todo entra más apretado: marca + selector + cuatro secciones + botón en 1009 px útiles */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .barra-fila { gap: 16px; }
  .barra-secciones { gap: 0; }
  .barra-secciones a { padding: 0 8px; }
}

/* ---- 8. Hoja del menú (celular y tablet) ---- */
.hoja { position: fixed; inset: 0; z-index: 60; }
.hoja::before { content: ""; position: absolute; inset: 0; background: var(--telon); opacity: 0; transition: opacity var(--d-corto); }
.hoja-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 100%; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 4px; padding: 72px var(--canal) 32px;
  background: var(--carbon-950); color: var(--blanco); transform: translateX(100%); transition: transform 320ms var(--suave);
}
@media (min-width: 480px) { .hoja-panel { width: 360px; } }
.hoja--abierta::before { opacity: 1; }
.hoja--abierta .hoja-panel { transform: none; }
.hoja-cerrar { position: absolute; top: 8px; right: 12px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--blanco); }
.hoja-cerrar:hover { background: var(--velo-toque-oscuro); }
.hoja-rotulo { font: 700 var(--t-ojal)/1.25 var(--f-cuerpo); text-transform: uppercase; letter-spacing: .12em; color: var(--gris-400); margin-bottom: 8px; }
.hoja-mundo {
  display: grid; grid-template-columns: 18px 1fr; gap: 14px; align-items: center; min-height: 72px; padding: 8px 12px; margin-inline: -12px;
  border-radius: var(--r-tarjeta); color: var(--blanco); transition: background-color 160ms;
}
.hoja-mundo:hover { background: var(--velo-toque-oscuro); }
.hoja-mundo[aria-current="page"] { background: var(--m-luz); }
.hoja-mundo .chevron { color: var(--m-linea); }
.hoja-mundo > span { font: 600 var(--t-h3)/1.2 var(--f-titulo); }
.hoja-mundo small { display: block; margin-bottom: 2px; font: 500 var(--t-nota)/1.4 var(--f-cuerpo); color: var(--gris-300); }
.hoja-secciones { display: flex; flex-direction: column; margin-top: 16px; border-top: 1px solid var(--borde-sutil); }
.hoja-secciones a { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--borde-sutil); font-weight: 500; color: var(--blanco); }
.hoja-secciones a:hover { color: var(--m-linea); }
.hoja .boton--bloque { margin-top: 24px; }
.hoja-contacto { margin-top: 16px; font-size: var(--t-nota); color: var(--gris-300); }
.hoja-contacto a { color: var(--blanco); text-decoration: underline; text-underline-offset: 3px; }
body.sin-scroll { overflow: hidden; }
body.sin-scroll .wa-flotante { visibility: hidden; }

/* ---- 9. Pie ---- */
.pie { margin-top: auto; background: var(--carbon-900); color: var(--gris-300); }
.pie-horizonte, .horizonte { height: 2px; background: linear-gradient(90deg, var(--trigo-claro), var(--cyan)); }
.pie-surcos { height: 48px; overflow: hidden; color: var(--m-linea); opacity: .10; }
.pie-surcos svg { width: 100%; height: 48px; }
.pie-cuerpo { display: grid; gap: 32px; padding-block: 48px 32px; }
@media (min-width: 768px) { .pie-cuerpo { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.pie-marca { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.pie-lema { font-size: var(--t-cuerpo); color: var(--blanco); max-width: 32ch; }
.pie-nota { font-size: var(--t-nota); color: var(--gris-400); }
.pie-col { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pie-rotulo { font: 700 var(--t-ojal)/1.25 var(--f-cuerpo); text-transform: uppercase; letter-spacing: .12em; color: var(--gris-400); margin-bottom: 6px; }
.pie-col a, .pie-pie a {
  padding: 4px 0; font-size: var(--t-nota); font-weight: 500; color: var(--gris-300);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color 160ms, text-decoration-color 160ms;
}
.pie-col a:hover, .pie-pie a:hover { color: var(--blanco); text-decoration-color: currentColor; }
.pie-pie { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-block: 24px 32px; border-top: 1px solid var(--borde-sutil); font-size: var(--t-nota); color: var(--gris-400); }

/* ---- 10. Tarjetas ---- */
.tarjetas { display: grid; gap: 20px; }
@media (min-width: 640px) { .tarjetas--2, .tarjetas--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tarjetas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tarjeta {
  position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 24px;
  background: var(--fondo-tarjeta); border: 1px solid var(--borde-tarjeta); border-radius: var(--r-tarjeta);
  transition: transform var(--d-corto) var(--suave), box-shadow var(--d-corto);
}
@media (min-width: 768px) { .tarjeta { padding: 28px; } }
.tarjeta h3 { font-size: var(--t-h3); }
.tarjeta p { color: var(--texto-2); font-size: var(--t-cuerpo); }
.tarjeta .cifra, .cifra { color: inherit; }
.tarjeta-chevron { color: var(--acento-icono); }
.tarjeta-icono { display: inline-flex; color: var(--m-texto); margin-bottom: 4px; }
.tarjeta-nota { margin-top: auto; font-size: var(--t-nota); font-weight: 700; color: var(--m-texto); }
.etiqueta { display: inline-flex; align-items: center; align-self: flex-start; padding: 4px 12px; border-radius: var(--r-pildora); background: var(--m-tinte); color: var(--carbon-900); font-size: var(--t-nota); font-weight: 700; line-height: 1.4; }
.tarjeta--oscura { background: var(--carbon-800); border-color: var(--borde-sutil); }
.tarjeta--destacada { border-top: 3px solid var(--m-acento); }
.mundo-agro .tarjeta--destacada { border-top-color: var(--trigo); }
.caso-rubro { font: 700 var(--t-ojal)/1.4 var(--f-cuerpo); text-transform: uppercase; letter-spacing: .12em; color: var(--texto-3); }
.cifra { font: 600 var(--t-cifra)/1.15 var(--f-titulo); letter-spacing: -.02em; }
@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover, .puerta-chica:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
}

/* Capturas de la app como una pantalla prendida */
.marco-pantalla { position: relative; display: block; overflow: hidden; border: 1px solid var(--gris-200); border-radius: 12px; background: var(--carbon-800); box-shadow: var(--sombra-2); }
.marco-pantalla img { width: 100%; height: 100%; object-fit: cover; object-position: left top; border-radius: inherit; }
.marco-pantalla--recorte { height: 200px; }
.marco-pantalla--oscuro { overflow: visible; border-color: var(--borde-fuerte); box-shadow: var(--sombra-pantalla); }
.marco-pantalla--oscuro::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -24px; height: 48px; background: radial-gradient(50% 100% at 50% 100%, var(--halo-pantalla), transparent); pointer-events: none; }

/* ---- 11. Filas con filete (lo que es lista) y el acordeón de Preguntas ---- */
.filas { list-style: none; margin: 0; padding: 0; }
.fila { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 24px 0; border-top: 1px solid var(--filete); }
@media (min-width: 768px) { .fila { grid-template-columns: 96px 1fr; gap: 32px; padding: 28px 0; } }
.filas > :last-child { border-bottom: 1px solid var(--filete); }
.numeral { font: 600 var(--t-h3)/1 var(--f-titulo); color: var(--m-texto); padding-top: 4px; }
.fila-cuerpo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fila-cuerpo h3 { font-size: var(--t-h3); }
.fila-cuerpo p { color: var(--texto-2); }
details.fila { display: block; padding: 0; }
details.fila > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; }
details.fila > summary::-webkit-details-marker { display: none; }
details.fila > summary h3 { font-size: var(--t-h3); margin: 0; }
details.fila > summary::after {
  content: ""; flex-shrink: 0; width: 14px; height: 14px; color: var(--m-texto);
  background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  transition: transform 200ms var(--suave);
}
details.fila[open] > summary::after { transform: rotate(45deg); }
details.fila > :not(summary) { padding: 0 0 24px; color: var(--texto-2); max-width: var(--prosa); }
details.fila > summary:focus-visible { outline-offset: 0; border-radius: 6px; }

/* ---- 12. Lista con tilde, chips, franja, cita, senda, resplandor, flotante ---- */
.tildes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tildes li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-cuerpo); }
.tilde { color: var(--m-texto); margin-top: 3px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.chips > * { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--borde-chip); border-radius: var(--r-pildora); font-weight: 500; font-size: var(--t-nota); }

.franja { background: var(--carbon-900); color: var(--gris-300); padding: 18px 0; }
.franja .contenedor { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 768px) { .franja .contenedor { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; } }
.franja-rotulo { font: 700 var(--t-ojal)/1.25 var(--f-cuerpo); text-transform: uppercase; letter-spacing: .12em; color: var(--gris-400); flex-shrink: 0; }
.franja ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-weight: 500; font-size: var(--t-nota); }
.franja-cita { font: 600 var(--t-h3)/1.3 var(--f-titulo); color: var(--blanco); max-width: var(--prosa); }

.cita { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; max-width: 60ch; padding-left: 24px; border-left: 3px solid var(--m-acento); }
.cita blockquote, .cita-texto { font: 600 var(--t-h2)/1.2 var(--f-titulo); letter-spacing: -.02em; text-wrap: balance; }
.cita .nota { max-width: var(--medida); }

.senda {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 12px 0;
  border-top: 1px solid var(--filete); border-bottom: 1px solid var(--filete); font-weight: 500; font-size: var(--t-cuerpo); transition: color 160ms;
}
.senda:hover { color: var(--m-texto); }

.resplandor {
  display: none; position: absolute; left: 55%; top: 10%; width: 600px; height: 420px; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, var(--m-luz), transparent); animation: respirar 18s ease-in-out infinite alternate;
}
@media (min-width: 768px) { .resplandor { display: block; } }
@keyframes respirar { from { transform: translate(0, 0); opacity: .7; } to { transform: translate(4%, 4%); opacity: 1; } }

.wa-flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--whatsapp); color: var(--blanco); box-shadow: var(--sombra-flotante); transition: transform 160ms var(--suave);
}
.wa-flotante:hover { transform: translateY(-2px); }
.entrada .wa-flotante { display: none; }

/* ---- 13. Formulario y sus estados ---- */
.formulario { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 28px; background: var(--papel); border: 1px solid var(--gris-100); border-radius: var(--r-tarjeta); }
.formulario-fila { display: grid; gap: 18px; }
@media (min-width: 640px) { .formulario { padding: 36px; } .formulario-fila { grid-template-columns: 1fr 1fr; } }
.campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.campo label { font: 700 var(--t-nota)/1.4 var(--f-cuerpo); }
.campo-opcional { font-weight: 400; color: var(--gris-500); }
.campo input, .campo textarea, .calcu input {
  width: 100%; min-height: 52px; padding: 14px 16px; border: 1px solid var(--gris-200); border-radius: var(--r-campo);
  background: var(--blanco); color: var(--carbon-900); font: 400 var(--t-cuerpo)/1.4 var(--f-cuerpo); transition: border-color 160ms, box-shadow 160ms;
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo ::placeholder { color: var(--gris-500); opacity: 1; }
.campo input:focus, .campo textarea:focus, .calcu input:focus { outline: none; border-color: var(--foco-claro); box-shadow: 0 0 0 4px var(--halo-foco); }
.campo--error input, .campo--error textarea { border-color: var(--error); box-shadow: 0 0 0 4px var(--halo-error); }
.campo-error { display: flex; gap: 6px; align-items: flex-start; color: var(--error); font-size: var(--t-nota); line-height: 1.4; }
.campo-error::before { content: "!"; flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: var(--error); color: var(--blanco); font-size: .75rem; font-weight: 700; line-height: 16px; text-align: center; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario .giro { display: none; }
.formulario--enviando .flecha { display: none; }
.formulario--enviando .giro { display: block; animation: girar 800ms linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.formulario-estado { font-size: var(--t-nota); color: var(--gris-500); }
.formulario-estado:empty { display: none; }
.formulario-estado--error { color: var(--error); font-weight: 700; }
.formulario-nota { font-size: var(--t-nota); color: var(--gris-500); }
.gracias { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 32px; background: var(--ok-fondo); border: 1px solid var(--borde-ok); border-radius: var(--r-tarjeta); outline-offset: 4px; }
.gracias-tilde { color: var(--ok); }
.gracias-tilde path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 400ms var(--suave) 120ms; }
.gracias.dibujada .gracias-tilde path { stroke-dashoffset: 0; }

/* ---- 14. Héroes ---- */
.hero { position: relative; overflow: hidden; background: var(--carbon-950); }
.hero > .contenedor { position: relative; z-index: 2; }
.hero-cuerpo { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; max-width: 680px; }
.hero-cuerpo > .acciones { align-self: stretch; }
.hero .lead { color: var(--gris-300); max-width: var(--medida); }
.hero-nota { display: flex; align-items: center; gap: 10px; margin-top: 8px; font: 700 var(--t-ojal)/1.4 var(--f-cuerpo); text-transform: uppercase; letter-spacing: .12em; color: var(--texto-3); }
.hero-nota::before { content: ""; flex-shrink: 0; width: 24px; height: 2px; background: currentColor; }
.mundo-agro .hero-nota { color: var(--trigo-claro); }
.hero--pyme > .contenedor { padding-block: clamp(64px, 12vh, 140px); }
.hero--foto { display: flex; align-items: center; min-height: 480px; }
.hero--foto > .contenedor { padding-block: 72px 84px; }
@media (min-width: 768px) { .hero--foto { min-height: 560px; } }
.hero-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.hero-velo { position: absolute; inset: 0; z-index: 1; background: var(--velo-hero); }
.hero--compacto { min-height: 200px; padding: 48px 0 56px; background: var(--carbon-900); }
.hero--compacto > .contenedor { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.hero--compacto .nota { color: var(--gris-400); }
.hero .patron { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; color: var(--gris-400); pointer-events: none; }
.patron--tenue { opacity: .22; } /* × el stroke-opacity .28 del patrón = 6 % */
/* La D del iso que enciende el cursor (solo escritorio) */
.hero-d { display: none; position: absolute; right: 4%; top: 50%; z-index: 1; width: clamp(200px, 26vw, 400px); transform: translateY(-50%); pointer-events: none; }
@media (min-width: 1024px) { .hero-d { display: block; } }
.hero-d img { width: 100%; height: auto; opacity: .10; }
.hero-d-luz { position: absolute; inset: 0; display: none; }
.hero-d-luz img { opacity: .30; }
@supports ((mask-image: radial-gradient(red, blue)) or (-webkit-mask-image: radial-gradient(red, blue))) {
  .hero-d-luz { display: block; -webkit-mask-image: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--blanco), transparent 70%); mask-image: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--blanco), transparent 70%); }
}
/* Llegada: el velo del color de la cortina se desvanece debajo del texto */
html[data-llegada] .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--m-cortina); pointer-events: none; animation: desvanecer 300ms ease-out 80ms forwards; }
@keyframes desvanecer { to { opacity: 0; } }

/* ---- 15. Cáscara de página de texto (legales, extensiones) ---- */
.texto-con-indice { display: grid; gap: 48px; padding-block: 48px var(--seccion); }
.indice { display: none; }
@media (min-width: 1024px) {
  .texto-con-indice { grid-template-columns: 240px minmax(0, var(--prosa)); gap: 64px; }
  .indice:not([hidden]) { display: block; position: sticky; top: calc(var(--barra-alto-pegada) + 24px); align-self: start; }
}
.indice-rotulo { font: 700 var(--t-ojal)/1.25 var(--f-cuerpo); text-transform: uppercase; letter-spacing: .12em; color: var(--gris-500); margin-bottom: 12px; }
.indice ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--gris-100); }
.indice a { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: var(--t-nota); line-height: 1.4; color: var(--gris-500); transition: color 160ms, border-color 160ms; }
.indice a .chevron { width: 10px; height: 10px; margin-top: .35em; opacity: 0; transition: opacity 160ms; }
.indice a:hover, .indice a[aria-current="true"] { color: var(--m-texto); border-left-color: var(--m-acento); }
.indice a[aria-current="true"] .chevron { opacity: 1; }
.prosa { max-width: var(--prosa); min-width: 0; }
.prosa h2 { font-size: var(--t-h2); margin: 48px 0 16px; }
.prosa > h2:first-child { margin-top: 0; }
.prosa h3 { font-size: var(--t-h3); margin: 28px 0 8px; }
.prosa p, .prosa li { font-size: var(--t-cuerpo); line-height: 1.7; color: var(--carbon-700); }
.prosa p { margin: 0 0 16px; }
.prosa ul, .prosa ol { list-style: revert; padding-left: 22px; margin: 0 0 16px; }
.prosa li { margin-bottom: 8px; }
.prosa li ul, .prosa li ol { margin: 8px 0 0; }
.prosa a { color: var(--m-texto); text-decoration: underline; text-underline-offset: 3px; }
.prosa strong { color: var(--carbon-900); }
.prosa code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; background: var(--m-tinte); padding: 2px 6px; border-radius: 4px; }
.tabla-scroll { overflow-x: auto; margin: 0 0 24px; -webkit-overflow-scrolling: touch; }
.tabla-scroll table, .prosa table { border-collapse: collapse; width: 100%; font-size: var(--t-nota); background: var(--blanco); border: 1px solid var(--gris-100); }
.tabla-scroll th, .tabla-scroll td, .prosa th, .prosa td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--gris-100); }
.tabla-scroll th, .prosa th { font-weight: 700; background: var(--m-tinte); }
.aviso-caja { padding: 24px; margin: 0 0 32px; border: 1px solid var(--m-acento); background: var(--m-tinte); border-radius: var(--r-tarjeta); }
.aviso-caja > :first-child { margin-top: 0; }
.aviso-caja > :last-child { margin-bottom: 0; }

/* ---- 16. Piezas de Agro (la cáscara nueva para el contenido que no se toca) ---- */
.calcu { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 20px; padding: 24px; background: var(--blanco); border: 1px solid var(--gris-100); border-radius: var(--r-tarjeta); }
.calcu label { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 700; font-size: var(--t-lead); }
.calcu input { width: 140px; text-align: right; font-weight: 700; }
.calcu output { font: 600 var(--t-h3)/1.2 var(--f-titulo); }
.calcu-resultado { font-size: var(--t-lead); }
.calcu .precio-nota { flex-basis: 100%; }
.precio-nota { font-size: var(--t-nota); color: var(--texto-2); }
/* Dentro de una tarjeta, `.tarjeta p` no les gana a la cifra ni a la nota. */
.tarjeta .cifra { font-size: var(--t-cifra); }
.tarjeta .precio-nota { font-size: var(--t-nota); }
.tarjeta > .boton--fantasma { align-self: flex-start; margin-top: auto; }
.precio-pie { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; max-width: 760px; color: var(--gris-500); }
.precio-pie h3 { margin-top: 10px; color: var(--carbon-900); }
.puente { display: grid; overflow: hidden; background: var(--blanco); border: 1px solid var(--gris-100); border-left: 4px solid var(--m-acento); border-radius: var(--r-tarjeta); }
.mundo-agro .puente { border-left-color: var(--trigo); }
@media (min-width: 1024px) { .puente { grid-template-columns: 1fr 1fr; } }
.puente-texto { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: 28px; }
@media (min-width: 768px) { .puente-texto { padding: 48px; } }
.puente p { color: var(--gris-500); }
.puente .foto { border-radius: 0; aspect-ratio: auto; min-height: 260px; height: 100%; }
.cierre { display: flex; flex-direction: column; gap: 24px; }
.cierre p { margin-top: 10px; color: var(--texto-2); max-width: var(--medida); }
.cierre-acciones { display: flex; flex-direction: column; gap: 14px; flex-shrink: 0; }
@media (min-width: 640px) { .cierre-acciones { flex-direction: row; flex-wrap: wrap; } }
@media (min-width: 768px) { .cierre { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; } }
.cierre--tarjeta { padding: 28px 22px; background: var(--blanco); border: 1px solid var(--gris-100); border-radius: var(--r-tarjeta); }
@media (min-width: 768px) { .cierre--tarjeta { padding: 44px 48px; } }

/* ---- 17. La puerta (la entrada y el 404; el JS vive en /js/entrada.js) ---- */
.puertas {
  position: relative; z-index: 1; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  margin-top: clamp(24px, 4vh, 48px); padding-bottom: 24px; list-style: none;
}
.puerta {
  position: relative; display: grid; grid-template-rows: auto auto auto auto 1fr auto; align-content: start; gap: 8px;
  min-height: clamp(232px, 32vh, 320px); min-height: clamp(232px, 32svh, 320px); padding: 20px;
  border: 1px solid var(--borde-sutil); border-radius: var(--r-puerta); background: var(--velo-puerta); box-shadow: inset 0 1px 0 var(--brillo-borde);
  color: var(--blanco); text-decoration: none; overflow: hidden; -webkit-tap-highlight-color: transparent;
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)) scale(var(--s, 1));
  transition: transform 500ms var(--suave), border-color 320ms, box-shadow 320ms, opacity 320ms;
}
.puerta > * { z-index: 1; }
.puerta > span { position: relative; }
.puerta.viva { will-change: transform; }
.puerta-chevron { position: absolute; top: 20px; right: 20px; color: var(--m-linea); transition: transform 320ms var(--resorte); }
.puerta-ojal { display: inline-flex; align-items: center; gap: 8px; font: 700 var(--t-ojal)/1.25 var(--f-cuerpo); text-transform: uppercase; letter-spacing: .12em; color: var(--m-linea); }
.puerta-titulo { font: 800 var(--t-puerta)/1.05 var(--f-titulo); letter-spacing: -.02em; }
.puerta-linea { font-size: var(--t-cuerpo); line-height: 1.5; color: var(--gris-300); max-width: 30ch; }
.puerta-adentro { font: 500 var(--t-nota)/1.5 var(--f-cuerpo); color: var(--gris-300); opacity: .85; max-width: calc(100% - 140px); }
.picaporte {
  align-self: end; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 8px; padding: 0 20px;
  border: 1.5px solid var(--m-linea); border-radius: var(--r-pildora); font: 700 var(--t-boton)/1.2 var(--f-cuerpo); color: var(--blanco);
  transition: background-color 200ms, color 200ms, border-color 200ms;
}
.mirilla { position: absolute; right: 20px; bottom: 20px; width: 120px; height: 80px; color: var(--m-linea); pointer-events: none; }
@media (min-width: 768px) {
  .puertas { gap: 24px; }
  .puerta { min-height: clamp(420px, 56vh, 620px); min-height: clamp(420px, 56svh, 620px); padding: 28px; }
  .puertas[data-n="3"] .puerta { min-height: clamp(380px, 48vh, 560px); min-height: clamp(380px, 48svh, 560px); }
  .puertas[data-n="4"] .puerta { min-height: clamp(300px, 36vh, 420px); min-height: clamp(300px, 36svh, 420px); }
  .puerta-chevron { top: 24px; right: 24px; }
  .puerta-linea { max-width: 34ch; }
  .puerta-adentro { max-width: none; }
  .mirilla { right: 28px; bottom: 28px; width: 180px; height: 120px; }
}
@media (min-width: 768px) and (max-width: 1023.98px) { .puertas .puerta:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .puerta { padding: 36px; } }
/* La mirilla se dibuja: sin JS ya está dibujada; con JS la enciende .encendida (hover/foco o 60 % visible) */
.traza { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 700ms var(--suave); }
.traza:nth-child(2) { transition-delay: 60ms; }
.traza:nth-child(3) { transition-delay: 120ms; }
.traza:nth-child(4) { transition-delay: 180ms; }
.traza:nth-child(5) { transition-delay: 240ms; }
.traza:nth-child(6) { transition-delay: 300ms; }
.traza--llena { fill: var(--m-linea); fill-opacity: .2; transition: stroke-dashoffset 700ms var(--suave) 60ms, fill-opacity 400ms 500ms; }
html.con-js .puerta:not(.encendida) .traza { stroke-dashoffset: 1; }
html.con-js .puerta:not(.encendida) .traza--llena { fill-opacity: 0; }
/* Luz bajo el dedo (::before) y barrido al llegar (::after) */
.puerta::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; background: radial-gradient(160px circle at var(--dx, 50%) var(--dy, 50%), var(--m-luz), transparent 70%); transition: opacity 160ms; }
.puerta.apretada::before { opacity: 1; }
.puerta::after { content: ""; position: absolute; top: 0; left: -40%; z-index: 0; width: 40%; height: 2px; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent, var(--m-linea), transparent); }
@media (hover: none) { .puerta.encendida::after { animation: barrido 900ms linear 1; } }
@keyframes barrido { from { transform: translateX(0); opacity: 1; } to { transform: translateX(350%); opacity: 1; } }
/* Estados: puntero fino */
@media (hover: hover) and (pointer: fine) {
  .puerta:hover, .puerta.viva { --ty: -6px; --s: 1.01; border-color: var(--m-linea); box-shadow: var(--sombra-puerta); }
  .puerta:hover .puerta-chevron, .puerta.viva .puerta-chevron { transform: translate(3px, -3px); }
  .puerta:hover .picaporte, .puerta.viva .picaporte { background: var(--m-acento); border-color: var(--m-acento); color: var(--carbon-900); }
  .puerta.apagada { opacity: .72; --s: .99; }
}
/* Teclado: lo mismo sin inclinación, más el anillo */
.puerta:focus-visible { --ty: -6px; --s: 1.01; border-color: var(--m-linea); box-shadow: var(--sombra-puerta); outline: 3px solid var(--foco); outline-offset: 4px; }
.puerta:focus-visible .puerta-chevron { transform: translate(3px, -3px); }
.puerta:focus-visible .picaporte { background: var(--m-acento); border-color: var(--m-acento); color: var(--carbon-900); }
/* Táctil */
.puerta:active { --s: .985; border-color: var(--m-linea); transition: transform var(--d-toque), border-color var(--d-toque); }
/* 404: las dos puertas a mitad de tamaño, sin mirilla */
.puertas--chicas .puerta { --t-puerta: 2.25rem; min-height: 200px; }
.puertas--chicas .mirilla { display: none; }
@media (min-width: 768px) { .puertas--chicas .puerta { min-height: 260px; } }

/* Puerta chica: fila-enlace (Consultoría → Agro, «también hay») */
.puerta-chica {
  display: grid; grid-template-columns: 18px 1fr; gap: 12px 16px; align-items: center; min-height: 96px; padding: 20px;
  background: var(--blanco); border: 1px solid var(--gris-100); border-radius: var(--r-tarjeta); transition: transform var(--d-corto) var(--suave), box-shadow var(--d-corto);
}
.puerta-chica .chevron { align-self: start; margin-top: 6px; color: var(--m-acento); }
.puerta-chica-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.puerta-chica-texto strong { font: 600 var(--t-h3)/1.2 var(--f-titulo); }
.puerta-chica-texto > span:not(.ojal) { color: var(--gris-500); }
.puerta-chica .picaporte { grid-column: 2; align-self: center; margin-top: 4px; border-color: var(--m-acento); color: var(--carbon-900); }
.puerta-chica:hover .picaporte, .puerta-chica:focus-visible .picaporte { background: var(--m-acento); color: var(--carbon-900); }
@media (min-width: 768px) {
  .puerta-chica { grid-template-columns: 18px 1fr auto; gap: 20px; padding: 24px 28px; }
  .puerta-chica .picaporte { grid-column: auto; margin-top: 0; }
}

/* La cortina de entrada (la crea entrada.js con la clase del mundo) */
.cortina { position: fixed; inset: 0; z-index: 100; background: var(--m-cortina); pointer-events: none; transition: clip-path var(--d-medio) var(--tela); }
.cortina--abierta { clip-path: inset(0 round 0); }

/* ---- 18. La entrada (/ y /404.html) ---- */
.entrada { background: var(--carbon-950); }
.mapa-vivo { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding-top: var(--barra-alto-celular); overflow: hidden; background: var(--carbon-950); }
@media (min-width: 768px) { .mapa-vivo { padding-top: var(--barra-alto); } }
.mapa-vivo > .patron, .mapa-vivo > .mapa {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, var(--blanco) 55%, transparent 100%); mask-image: radial-gradient(120% 90% at 50% 40%, var(--blanco) 55%, transparent 100%);
}
.mapa-vivo > .patron { color: var(--gris-400); transition: opacity 400ms; }
.mapa-vivo > .mapa { opacity: 0; transition: opacity 400ms; }
.mapa-vivo > .mapa.lista { opacity: 1; }
.mapa-vivo.con-mapa > .patron { opacity: 0; }
.mapa-vivo-texto { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding-top: clamp(16px, 4vh, 48px); }
.titulo-entrada { font: 800 var(--t-h1-entrada)/1.05 var(--f-titulo); letter-spacing: -.02em; max-width: 14ch; }
.mapa-vivo-texto .lead { color: var(--gris-300); max-width: 58ch; }
.solo-ancho { display: none; }
@media (min-width: 768px) { .solo-ancho { display: inline; } }
.senda-vieja { position: relative; z-index: 1; padding: 16px var(--canal); font-size: var(--t-nota); color: var(--gris-300); }
.senda-vieja a { color: var(--m-linea); text-decoration: underline; text-underline-offset: 3px; }
.quien { background: var(--papel); padding-block: var(--seccion); }
.quien .partido { gap: 32px; }
@media (min-width: 768px) { .quien .partido { grid-template-columns: 220px 1fr; gap: 48px; align-items: center; } }
.quien .cabeza { margin-bottom: 0; }
/* Coreografía de llegada (CSS puro): cada pieza sube desde una ranura, escalonada por --i */
.ranura { overflow: hidden; padding-block: .15em; margin-block: -.15em; }
.ranura-texto { display: inline-block; animation: subir-ranura 700ms var(--suave) backwards; animation-delay: calc(var(--i, 1) * 80ms - 20ms); }
@keyframes subir-ranura { from { transform: translateY(110%); opacity: 0; } }
.sube { animation: subir 700ms var(--suave) backwards; animation-delay: calc(var(--i, 1) * 80ms - 20ms); }
@keyframes subir { from { transform: translateY(18px); opacity: 0; } }

/* ---- 19. Movimiento común: revelado al bajar ---- */
html.con-js [data-revelar] { opacity: 0; transform: translateY(16px); transition: opacity 560ms var(--suave), transform 560ms var(--suave); transition-delay: calc(min(var(--i, 0), 5) * 70ms); }
html.con-js [data-revelar="izquierda"] { transform: translateX(-16px); }
html.con-js [data-revelar="derecha"] { transform: translateX(16px); }
html.con-js [data-revelar="escala"] { transform: scale(.98); }
html.con-js [data-revelar="quieto"] { transform: none; }
html.con-js [data-revelar].visto { opacity: 1; transform: none; }

/* ---- 20. Sin movimiento: todo quieto y terminado ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
  html.con-js [data-revelar] { opacity: 1; transform: none; }
  .traza, html.con-js .puerta:not(.encendida) .traza { stroke-dashoffset: 0; }
  .traza--llena, html.con-js .puerta:not(.encendida) .traza--llena { fill-opacity: .2; }
  .gracias-tilde path { stroke-dashoffset: 0; }
  .ranura-texto, .sube, .resplandor, .barra--entrada { animation: none; }
  .puerta.encendida::after { animation: none; }
  .puerta, .puerta:hover, .puerta.viva, .puerta:focus-visible, .puerta:active { --ty: 0px; --s: 1; --rx: 0deg; --ry: 0deg; box-shadow: inset 0 1px 0 var(--brillo-borde); }
  .puerta.apagada { opacity: 1; }
  .hero-d-luz { display: none; }
  .tarjeta:hover, .puerta-chica:hover, .wa-flotante:hover { transform: none; }
}

/* ---- 21. Impreso (las legales): solo el texto ---- */
@media print {
  .barra, .hoja, .wa-flotante, .indice, .saltar, .pie-surcos, .resplandor, .patron { display: none !important; }
  body { background: var(--blanco); color: var(--carbon-900); }
  .hero--compacto { background: none; color: var(--carbon-900); padding: 0 0 24px; }
  .hero--compacto .lead, .hero--compacto .nota { color: var(--gris-500); }
  .texto-con-indice { display: block; padding: 0; }
  .prosa { max-width: none; }
  .prosa a { color: inherit; }
  html.con-js [data-revelar] { opacity: 1; transform: none; }
}