/* ============================================================
   DEMO 2 — Asesor de venta de autos (Francisco)
   Sistema visual PROPIO. No carga marca.css, ni se parece al
   demo de tratamiento de agua. Cada cliente, su propia cara.

   ⚠️ NADA de Toyota aquí: ni rojo corporativo, ni logo, ni
   fotos. La normativa de marca de Toyota prohíbe usar su
   material sin permiso escrito y prohíbe insinuar respaldo.
   La marca solo se NOMBRA en texto, para decir dónde trabaja.
   Esta página es de Francisco. En venta de autos la relación
   es con el asesor, no con el fabricante.

   El verde no es decoración: es el color de "listo", "aprobado",
   "sigue". La página entera va de quitarle el miedo a un
   trámite, así que el color tenía que decir eso.

   El ámbar está RESERVADO para los huecos por confirmar. Por
   eso la marca de Francisco no puede ser ámbar ni dorada.

   CONTRASTES (calculados, no estimados):
     tinta  #14181C sobre hueso #F4F5F3 ..... 16.3 : 1
     gris   #58626B sobre hueso ............   5.7 : 1
     verde-tx #0F6B41 sobre hueso .........    6.1 : 1
     blanco sobre verde-tx ................    6.7 : 1
     bruma  #9AA7B2 sobre grafito #14181C ..   7.2 : 1
     bruma  sobre grafito-2 #1E242A .......    6.4 : 1
     verde-claro #4FD394 sobre grafito ....    9.4 : 1
     falta-tx #7A4E00 sobre #FFE9BE .......    6.1 : 1
     #F5C078 sobre chip ámbar en carbón ...    5.9 : 1
   ============================================================ */

@import url("../fonts/fuentes.css");

:root{
  /* Grafito */
  --grafito:#14181C;
  --grafito-2:#1E242A;
  --carbon:#2A323A;
  --carbon-linea:#3A444E;

  /* Verde — "sigue", "listo" */
  --verde:#2FA86A;        /* SOLO decorativo: filetes, barras, fondos sin texto */
  --verde-texto:#0F6B41;  /* para TEXTO y botones sobre claro */
  --verde-claro:#4FD394;  /* acento sobre fondo oscuro */
  --verde-suave:#E6F5EC;  /* fondo de realce en claro */

  /* Claros */
  --hueso:#F4F5F3;
  --papel:#FFFFFF;
  --tinta:#14181C;
  --gris:#58626B;
  --linea:#E2E5E2;
  --linea-fuerte:#CBD1CD;

  /* Sobre oscuro */
  --hueso-texto:#EDEFEC;
  --bruma:#9AA7B2;

  /* Lo que falta */
  --ambar:#F5C078;
  --falta-fondo:#FFE9BE;
  --falta-texto:#7A4E00;
  --falta-borde:#C98A2A;

  --body:'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ancho:1060px;
  --r:20px;      /* radio exagerado, a la 2026 */
  --r-chico:12px;
}

*{box-sizing:border-box; margin:0; padding:0;}

/* Sin esto, cualquier `display` declarado más abajo le gana al
   atributo `hidden` y el elemento se ve igual. Pasó de verdad: el
   botón "Empezar de nuevo" salía en el paso 1, y sin JavaScript
   aparecían los botones de navegación, que ahí no hacen nada. */
[hidden]{display:none !important;}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:70px;}

body{
  font-family:var(--body);
  background:var(--hueso);
  color:var(--tinta);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:inherit;}
svg{display:block;}

.envoltura{max-width:var(--ancho); margin:0 auto; padding:0 20px;}
.estrecho{max-width:780px;}

.saltar{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:#FFB238; color:#12152B; font-weight:700;
  padding:12px 18px; border-radius:0 0 10px 0;
}
.saltar:focus{left:0;}

:focus-visible{outline:3px solid var(--verde-claro); outline-offset:2px; border-radius:5px;}


/* ============================================================
   1. Barra de On The Map — el marco de Angel
   ============================================================ */

.otm{
  position:sticky; top:0; z-index:100;
  background:#12152B; border-bottom:1px solid #2C3157; color:#F7F5F0;
}
.otm .envoltura{
  display:flex; align-items:center; gap:10px 14px;
  flex-wrap:wrap; padding-top:9px; padding-bottom:9px;
}
.otm-marca{
  display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
  font-weight:700; font-size:.95rem; letter-spacing:-.01em;
}
.otm-marca .punto{
  width:10px; height:10px; border-radius:50%; background:#FFB238;
  box-shadow:0 0 0 4px rgba(255,178,56,.2); flex-shrink:0;
}
.otm-nota{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:#FFB238; flex:1 1 190px; min-width:0;
}
.otm-acciones{display:flex; align-items:center; gap:9px; margin-left:auto; flex-shrink:0;}

.idioma{
  display:flex; border:1px solid #454B79; border-radius:100px; overflow:hidden;
  font-family:var(--mono); font-size:.68rem; font-weight:700; flex-shrink:0;
}
.idioma button{
  background:transparent; border:0; color:#B9BDD8; cursor:pointer;
  padding:6px 12px; font:inherit; letter-spacing:.06em; line-height:1.3;
}
.idioma button[aria-pressed="true"]{background:#FFB238; color:#12152B;}

.otm-wa{
  display:inline-flex; align-items:center; gap:6px;
  background:#25D366; color:#0B2E19; text-decoration:none;
  font-weight:700; font-size:.78rem; padding:7px 14px; border-radius:100px;
  white-space:nowrap;
}
.otm-wa:hover{background:#1FBE5B;}


/* ============================================================
   2. Cabecera de Francisco
   El teléfono va AQUÍ, visible en móvil y en escritorio. No un
   botón que diga "Contacto": el número. En negocios de servicio
   la gente llama.
   ============================================================ */

.cabecera{background:var(--grafito); color:var(--hueso-texto);}
.cabecera .envoltura{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding-top:14px; padding-bottom:14px; flex-wrap:wrap;
}
.persona{display:flex; align-items:center; gap:12px; min-width:0;}
.inicial{
  flex-shrink:0; width:42px; height:42px; border-radius:14px;
  background:var(--verde-texto); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.15rem;
}
.persona-nombre{font-weight:700; font-size:1.02rem; line-height:1.25;}
.persona-rol{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--verde-claro); margin-top:3px;
}
.tel-cabecera{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--verde-claro); color:#052617; text-decoration:none;
  font-weight:700; font-size:.92rem; padding:11px 18px; border-radius:100px;
  white-space:nowrap;
}
.tel-cabecera:hover{background:#74E0AC;}
/* El hueco va DENTRO del botón verde claro, así que aquí no sirve la
   variante ámbar-sobre-oscuro: sobre este verde no contrasta. Se usa
   tinta verde oscura sobre el propio botón — 7.2:1. */
.cabecera .tel-cabecera .falta{
  background:rgba(5,38,23,.10); color:#052617; border-color:#0F6B41;
}


/* ============================================================
   3. Portada
   Las señales de confianza van PEGADAS al botón — es el
   hallazgo más fuerte de la investigación (hasta +42 %).
   ============================================================ */

.portada{
  background:
    radial-gradient(110% 70% at 88% 0%, rgba(47,168,106,.26) 0%, rgba(47,168,106,0) 60%),
    linear-gradient(180deg, var(--grafito) 0%, var(--grafito-2) 100%);
  color:var(--hueso-texto);
  padding:54px 0 60px;
}

.rotulo{
  font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--verde-claro);
  display:inline-block;
}
.rotulo.oscuro{color:var(--verde-texto);}

.portada h1{
  font-weight:700; font-size:clamp(2rem, 6vw, 3.5rem); line-height:1.04;
  letter-spacing:-.03em; margin-top:14px; max-width:15ch; color:#FFFFFF;
}
.portada .entrada{margin-top:18px; max-width:50ch; font-size:1.04rem; color:var(--bruma);}

.botonera{display:flex; flex-wrap:wrap; gap:11px; margin-top:26px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--body); font-weight:700; font-size:.97rem; line-height:1.3;
  padding:15px 26px; border-radius:100px; text-decoration:none;
  border:2px solid transparent; cursor:pointer; text-align:center;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active{transform:translateY(1px);}
.btn-verde{background:var(--verde-claro); color:#052617;}
.btn-verde:hover{background:#74E0AC;}
.btn-linea{border-color:#46525C; color:var(--hueso-texto);}
.btn-linea:hover{border-color:var(--verde-claro); background:rgba(79,211,148,.1);}
.btn-solido{background:var(--verde-texto); color:#FFFFFF;}
.btn-solido:hover{background:#0B5333;}
.btn-wa{background:#25D366; color:#0B2E19;}
.btn-wa:hover{background:#1FBE5B;}
.btn-grande{width:100%; padding:17px 26px; font-size:1.02rem;}

/* ---------- Retrato: la silueta -----------------------------
   NO es la foto de nadie. Es el hueco con forma de persona, para
   que Francisco vea dónde va la suya y qué tamaño ocupa. En venta
   de autos la cara del asesor pesa más que cualquier logo.
   ---------------------------------------------------------- */

.portada .envoltura.con-retrato{
  display:grid; gap:30px; align-items:center;
}
@media (min-width:900px){
  .portada .envoltura.con-retrato{grid-template-columns:1fr 300px;}
}

.retrato{
  position:relative; margin:0 auto; width:100%; max-width:280px;
  border-radius:26px; overflow:hidden;
  background:linear-gradient(160deg, #223038 0%, #182026 100%);
  border:2px dashed #4A5A63;
  display:flex; flex-direction:column; align-items:center;
  padding:26px 20px 20px;
}
.retrato .silueta{width:132px; height:auto; color:#38474F;}
.retrato .nota{
  margin-top:14px; text-align:center; font-size:.8rem; line-height:1.5;
  color:var(--bruma);
}
.retrato .nota b{display:block; color:var(--hueso-texto); font-weight:700; margin-bottom:3px;}

/* Versión chica, para la cabecera y el pie */
.avatar{
  flex-shrink:0; width:44px; height:44px; border-radius:14px; overflow:hidden;
  background:#223038; border:1.5px dashed #4A5A63;
  display:flex; align-items:flex-end; justify-content:center;
}
.avatar svg{width:34px; height:34px; color:#4C5D66;}

/* Señales de confianza — justo debajo del botón, no en el pie */
.confianza{
  display:flex; flex-wrap:wrap; gap:9px; margin-top:18px;
  align-items:center;
}
.senal{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.06); border:1px solid #333D46;
  border-radius:100px; padding:7px 14px 7px 11px;
  font-size:.83rem; color:var(--hueso-texto);
}
.senal .tic{flex-shrink:0; width:15px; height:15px; color:var(--verde-claro);}


/* ============================================================
   4. Marca de dato que falta
   ============================================================ */

.falta{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--falta-fondo); color:var(--falta-texto);
  border:1px dashed var(--falta-borde); border-radius:8px;
  font-family:var(--mono); font-size:.76em; font-weight:700;
  letter-spacing:.02em; padding:3px 9px; line-height:1.45;
}
.falta::before{content:"?"; font-weight:700; opacity:.75;}

.oscuro .falta, .portada .falta, .cabecera .falta,
.contacto .falta, .pie .falta, .senal .falta, .noquita .falta{
  background:rgba(245,192,120,.15); color:var(--ambar); border-color:#8A6B33;
}

/* ---------- Interruptor de datos de muestra ------------------
   La página se ve LLENA por defecto, para que el cliente juzgue
   cómo quedaría viva. Un toque cambia a los huecos y enseña qué
   está inventado.

   Sin JavaScript se queda en modo lleno — y por eso el aviso de
   "contenido de ejemplo" va escrito en el HTML, no lo pone el
   interruptor. La honestidad no puede depender de un script.
   ---------------------------------------------------------- */

.hueco{display:none !important;}
body.ver-huecos .muestra{display:none;}
body.ver-huecos .hueco{display:inline-flex !important;}

.otm-cambio{
  display:inline-flex; align-items:center; gap:7px;
  background:transparent; border:1px solid #454B79; border-radius:100px;
  color:#B9BDD8; cursor:pointer; white-space:nowrap;
  font:700 .68rem/1.3 var(--mono); letter-spacing:.06em;
  padding:7px 13px;
}
.otm-cambio:hover{border-color:#FFB238; color:#F7F5F0;}
.otm-cambio .foco{
  width:9px; height:9px; border-radius:50%; background:#4B5178; flex-shrink:0;
}
body.ver-huecos .otm-cambio{background:#FFB238; color:#12152B; border-color:#FFB238;}
body.ver-huecos .otm-cambio .foco{background:#12152B;}

.leyenda{
  display:flex; align-items:flex-start; gap:13px;
  background:var(--falta-fondo); border:1px solid var(--falta-borde);
  border-radius:var(--r); padding:16px 18px;
  color:var(--falta-texto); font-size:.9rem; line-height:1.6;
}
.leyenda .icono{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background:var(--falta-texto); color:var(--falta-fondo);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:.85rem;
}


/* ============================================================
   5. Secciones
   ============================================================ */

section{padding:58px 0;}
section.oscuro{background:var(--grafito); color:var(--hueso-texto);}
section.oscuro h2{color:#FFFFFF;}
section.oscuro .entrada{color:var(--bruma);}

h2{
  font-weight:700; font-size:clamp(1.5rem, 4vw, 2.15rem);
  line-height:1.14; letter-spacing:-.025em; margin-top:9px;
}
h3{font-weight:700; font-size:1.08rem; line-height:1.3; letter-spacing:-.01em;}

.entrada{font-size:1rem; color:var(--gris); max-width:58ch; margin-top:13px;}
.cabecera-seccion{margin-bottom:30px;}


/* ============================================================
   6. La vista previa de 3 pasos — el corazón del demo

   Sin JavaScript los tres pasos salen apilados: se ve entero
   lo que hay que hacer, que es justo el mensaje. Con
   JavaScript se convierte en un paso a paso con barra.

   La barra arranca en 22 %, no en 0 %: un formulario que
   empieza "vacío" se abandona entre 6 y 9 % más.
   ============================================================ */

.simulador{
  background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--r); overflow:hidden; margin-top:28px;
  box-shadow:0 18px 44px rgba(20,24,28,.07);
}

.sim-tapa{padding:20px 22px 0;}
.sim-tapa .titulo{font-weight:700; font-size:1.02rem;}
.sim-tapa .sub{font-size:.85rem; color:var(--gris); margin-top:3px;}

/* Barra de progreso — solo aparece cuando hay JavaScript */
.barra{margin-top:16px;}
.barra .riel{
  height:9px; background:var(--linea); border-radius:100px; overflow:hidden;
}
.barra .lleno{
  height:100%; width:22%; background:var(--verde); border-radius:100px;
  transition:width .38s cubic-bezier(.22,.61,.36,1);
}
.barra .rotulos{
  display:flex; justify-content:space-between; gap:8px; margin-top:9px;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gris);
}
.barra .rotulos span[aria-current="step"]{color:var(--verde-texto); font-weight:700;}

.pasos{list-style:none; padding:0; margin:0;}
.paso{padding:22px; border-top:1px solid var(--linea);}
.paso:focus{outline:none;}

/* Esconder pasos SOLO cuando el JavaScript ya montó el paso a paso.
   La clase `paso-a-paso` y la clase `activa` del primero se ponen en
   la misma operación, así que la caja nunca se queda vacía. Sin
   JavaScript ninguna de las dos clases existe y se ven los tres. */
.simulador.paso-a-paso .paso{display:none;}
.simulador.paso-a-paso .paso.activa{display:block;}

.paso-num{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--verde-texto);
}
.paso-num .globo{
  width:24px; height:24px; border-radius:50%;
  background:var(--verde-suave); color:var(--verde-texto);
  display:flex; align-items:center; justify-content:center; font-size:.75rem;
}
.paso h3{margin-top:11px;}
.paso .dice{font-size:.92rem; color:var(--gris); margin-top:7px;}

/* Campos de ejemplo. Sirven para que Francisco vaya tocando
   delante del cliente. NO se envían a ningún lado y aquí NO
   hay ni un campo sensible: ni SSN, ni ingresos, ni licencia. */
.campos{display:grid; gap:12px; margin-top:16px;}
@media (min-width:560px){ .campos.dos{grid-template-columns:1fr 1fr;} }
.campo label{
  display:block; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gris);
  margin-bottom:5px;
}
.campo input, .campo select{
  width:100%; font:inherit; font-size:1rem;
  background:var(--hueso); border:1.5px solid var(--linea-fuerte);
  border-radius:var(--r-chico); padding:13px 14px; color:var(--tinta);
}
.campo input:focus, .campo select:focus{
  outline:none; border-color:var(--verde); background:#fff;
  box-shadow:0 0 0 3px rgba(47,168,106,.16);
}

.sim-pie{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:18px 22px; background:var(--hueso); border-top:1px solid var(--linea);
}
.sim-pie .aviso{
  flex:1 1 200px; font-size:.76rem; color:var(--gris); line-height:1.5;
}
.sim-nav{display:flex; gap:9px; flex-shrink:0;}
.sim-nav .btn{padding:12px 20px; font-size:.9rem;}

/* Pantalla final */
.listo{text-align:center; padding:30px 22px;}
.listo .marca-ok{
  width:56px; height:56px; margin:0 auto 14px; border-radius:50%;
  background:var(--verde-suave); color:var(--verde-texto);
  display:flex; align-items:center; justify-content:center;
}
.listo .marca-ok svg{width:28px; height:28px;}


/* ============================================================
   7. Lo que NO se pide online — el desarmador
   ============================================================ */

.noquita{
  background:var(--carbon); border:1px solid var(--carbon-linea);
  border-radius:var(--r); padding:24px; margin-top:26px;
}
.noquita h3{color:#FFFFFF;}
.noquita ul{list-style:none; margin-top:16px; display:grid; gap:10px;}
@media (min-width:640px){ .noquita ul{grid-template-columns:1fr 1fr;} }
.noquita li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:.92rem; color:var(--bruma);
}
.noquita li .cruz{flex-shrink:0; width:18px; height:18px; color:#E88B8B; margin-top:2px;}
.noquita .cierre{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--carbon-linea);
  font-size:.92rem; color:var(--hueso-texto);
}


/* ============================================================
   8. Bento — lo que la gente pregunta antes de registrarse
   Cada celda es UNA idea cerrada. Rejilla de CSS puro.
   ============================================================ */

.bento{display:grid; gap:14px; grid-template-columns:1fr; margin-top:28px;}
@media (min-width:820px){
  .bento{grid-template-columns:repeat(4,1fr);}
  .bento .gran{grid-column:span 2; grid-row:span 2;}
  .bento .ancha{grid-column:span 2;}
}

.celda{
  background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--r); padding:24px;
  display:flex; flex-direction:column;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.celda:hover{
  border-color:var(--linea-fuerte); transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(20,24,28,.07);
}
.celda .pregunta{
  font-weight:700; font-size:1.06rem; line-height:1.32; letter-spacing:-.01em;
}
.celda p{font-size:.92rem; color:var(--gris); margin-top:10px;}
.celda .falta{align-self:flex-start; margin-top:14px;}

.celda.gran{background:var(--verde-suave); border-color:#BFE3CE;}
.celda.gran .pregunta{font-size:clamp(1.15rem,2.6vw,1.5rem);}

/* Comparación soft pull / hard pull */
.tabla-credito{margin-top:18px; display:grid; gap:10px;}
.fila-credito{
  background:rgba(255,255,255,.72); border:1px solid #BFE3CE;
  border-radius:var(--r-chico); padding:14px 16px;
}
.fila-credito .tipo{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--verde-texto); font-weight:700;
}
.fila-credito .efecto{font-weight:700; font-size:.98rem; margin-top:5px; line-height:1.35;}
.fila-credito .nota{font-size:.82rem; color:var(--gris); margin-top:4px;}

.fuente{
  margin-top:14px; font-size:.75rem; color:var(--gris); line-height:1.55;
}
.fuente a{color:var(--verde-texto); font-weight:600;}


/* ============================================================
   8b. Cifras — las credenciales, en números
   Un número concreto convence más que un adjetivo. Van arriba,
   no escondidas: son lo primero que revisa quien va a confiarle
   un trámite de dinero a alguien.
   ============================================================ */

.cifras{
  display:grid; gap:1px; margin-top:26px;
  background:var(--linea); border:1px solid var(--linea);
  border-radius:var(--r); overflow:hidden;
}
@media (min-width:640px){ .cifras{grid-template-columns:repeat(2,1fr);} }
@media (min-width:900px){ .cifras{grid-template-columns:repeat(4,1fr);} }
.cifra{background:var(--papel); padding:22px 20px;}
.cifra .numero{
  font-weight:700; font-size:clamp(1.6rem,4vw,2.1rem); letter-spacing:-.03em;
  line-height:1.05; color:var(--verde-texto);
}
.cifra .numero .hueco{font-size:.6rem;}
.cifra .que{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gris); margin-top:9px;
}
.cifra .detalle{font-size:.83rem; color:var(--gris); margin-top:7px; line-height:1.5;}


/* ============================================================
   8c. Consejos del asesor — preguntas y respuestas
   <details> nativo: se abre y se cierra sin una línea de
   JavaScript, y sin él sale todo abierto y legible.
   ============================================================ */

.consejos{display:grid; gap:11px; margin-top:26px;}

.consejo{
  background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--r-chico); overflow:hidden;
  transition:border-color .18s ease;
}
.consejo[open]{border-color:var(--verde); box-shadow:0 6px 20px rgba(20,24,28,.06);}

.consejo summary{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  padding:18px 20px; font-weight:700; font-size:1rem; line-height:1.4;
  list-style:none; letter-spacing:-.01em;
}
.consejo summary::-webkit-details-marker{display:none;}
.consejo summary::after{
  content:"+"; margin-left:auto; flex-shrink:0;
  width:26px; height:26px; border-radius:50%;
  background:var(--verde-suave); color:var(--verde-texto);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:1rem; line-height:1;
}
.consejo[open] summary::after{content:"–";}
.consejo summary:hover{background:var(--hueso);}

.consejo .cuerpo{padding:0 20px 20px; font-size:.94rem; color:var(--gris); line-height:1.65;}
.consejo .cuerpo p + p{margin-top:11px;}
.consejo .cuerpo strong{color:var(--tinta); font-weight:600;}

.firma{
  display:flex; align-items:center; gap:11px; margin-top:24px;
  padding:16px 18px; background:var(--verde-suave);
  border:1px solid #BFE3CE; border-radius:var(--r-chico);
  font-size:.9rem; color:#0B4F30;
}
.firma .avatar{width:38px; height:38px; border-radius:11px; background:#CDE8D9; border-color:#8FC7A8;}
.firma .avatar svg{width:29px; height:29px; color:#5E9779;}


/* ============================================================
   9. Contacto
   ============================================================ */

.contacto{background:var(--grafito); color:var(--hueso-texto);}
.contacto h2{color:#FFFFFF;}

.contacto-caja{
  margin-top:26px; background:var(--grafito-2);
  border:1px solid var(--carbon-linea); border-radius:var(--r);
  padding:30px 26px; text-align:center;
}
.telefono{
  font-weight:700; font-size:clamp(1.6rem,5.5vw,2.5rem);
  letter-spacing:-.03em; color:#FFFFFF; margin-top:8px; line-height:1.2;
}
.telefono .falta{font-size:.58em; vertical-align:middle;}
.contacto-caja .entrada{color:var(--bruma); margin:14px auto 0;}
.contacto-caja .botonera{justify-content:center;}

/* Ranura: el sitio donde va a ir un botón que todavía no existe.
   Antes esto era un botón verde de verdad con el hueco ámbar
   dentro — quedaba en 1.15:1 y, peor, parecía un botón que no
   llevaba a ningún lado. Una ranura marcada dice la verdad. */
.ranura{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; max-width:420px; margin:22px auto 0;
  padding:16px 22px; border-radius:100px;
  border:2px dashed #8A6B33; background:rgba(245,192,120,.10);
}

.datos-fila{
  display:grid; gap:1px; margin-top:24px;
  background:var(--carbon-linea); border:1px solid var(--carbon-linea);
  border-radius:var(--r); overflow:hidden;
}
@media (min-width:640px){ .datos-fila{grid-template-columns:repeat(3,1fr);} }
.datos-fila .celdita{background:var(--grafito-2); padding:18px 20px;}
.datos-fila .clave{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bruma);
}
.datos-fila .valor{margin-top:7px; font-weight:600; color:#FFFFFF; font-size:.95rem;}


/* ============================================================
   10. Pie + franja de On The Map
   ============================================================ */

footer.pie{background:#0D1013; color:var(--bruma); padding:32px 0 0;}
footer.pie .persona-nombre{color:var(--hueso-texto);}
footer.pie .lema{font-size:.88rem; margin-top:12px; max-width:46ch;}
footer.pie .legal{
  margin-top:18px; font-size:.75rem; color:#78838D; line-height:1.6; max-width:60ch;
}

.otm-franja{margin-top:30px; border-top:1px solid #232A30; background:#12152B; color:#B9BDD8;}
.otm-franja .envoltura{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  padding-top:20px; padding-bottom:22px;
}
.otm-franja .texto{flex:1 1 260px; min-width:0; font-size:.86rem; line-height:1.6;}
.otm-franja .aviso{
  flex-basis:100%; font-size:.72rem; color:#7C82A8;
  border-top:1px solid #2C3157; padding-top:14px; margin-top:2px; line-height:1.6;
}


/* ============================================================
   11. Movimiento

   Camino moderno: animation-timeline: view(), sin JavaScript
   (~84 % de soporte a mediados de 2026, y corre en el hilo del
   compositor). Donde no hay soporte, se ve sin animar. El
   estado de reposo SIEMPRE es visible: nada se esconde
   esperando a que algo lo revele.
   ============================================================ */

@keyframes sube{
  from{opacity:0; transform:translateY(18px);}
  to  {opacity:1; transform:none;}
}

@supports (animation-timeline: view()){
  .sube{
    animation:sube linear both;
    animation-timeline:view();
    /* Termina cuando el elemento ha entrado tres cuartas partes, no
       más tarde. Con un rango que acabe muy adelante, un elemento
       que caiga en la última pantalla puede quedarse a medio animar
       para siempre, porque ya no hay scroll que lo empuje. */
    animation-range:entry 0% entry 75%;
  }
}
@supports not (animation-timeline: view()){
  .sube{opacity:1; transform:none;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .sube{animation:none; opacity:1; transform:none;}
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

@media print{
  .otm, .otm-franja, .sim-pie{background:#fff; color:#000;}
  section{padding:20px 0; break-inside:avoid;}
  .js .paso{display:block !important;}
}