/* ============================================================
   EDGAR ROMERO — Expansión de consciencia
   Sistema visual web · Derivado del brief técnico de marca
   Colores planos, una sola familia tipográfica, sin degradados
   ni sombras de color. El color entra por bloques, no por efectos.
   ============================================================ */

/* --- 1. Tokens ------------------------------------------- */
:root{
  --grafito:      #23262B;
  --grafito-900:  #16181B;
  --grafito-700:  #3A3E45;

  --azul:         #6FA8DC;  /* azul de marca */
  --azul-fuerte:  #4B87BE;  /* mismo azul, un paso más denso */
  --azul-texto:   #35688F;  /* solo texto pequeño: contraste AA sobre blanco */
  --azul-suave:   #E8F1FA;  /* banda de sección */
  --azul-borde:   #C9DDF1;

  --gris:         #767A82;
  --gris-linea:   #E4E7EB;
  --gris-numero:  #E9ECF0;
  --fondo-suave:  #F7F8FA;
  --blanco:       #FFFFFF;

  --contenedor:   1200px;
  --lectura:      720px;

  --e1: 8px;  --e2: 16px; --e3: 24px; --e4: 32px;
  --e5: 48px; --e6: 64px; --e7: 96px; --e8: 128px;

  --tipo: "Jost", "Futura PT", "Century Gothic", "Montserrat", Helvetica, Arial, sans-serif;
  --curva: cubic-bezier(.22,.61,.36,1);
  --cabecera: 84px;
  --sombra: 0 1px 2px rgba(35,38,43,.06);
}

/* --- 2. Base --------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:110px}
body{
  margin:0;
  background:var(--blanco);
  color:var(--grafito);
  font-family:var(--tipo);
  font-size:18px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--azul);color:var(--grafito)}

:focus-visible{outline:2px solid var(--azul-fuerte);outline-offset:3px;border-radius:2px}

h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.14;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(38px,5.2vw,66px);font-weight:700;line-height:1.04;letter-spacing:-.028em}
h2{font-size:clamp(29px,3.6vw,44px);font-weight:700;letter-spacing:-.022em}
h3{font-size:clamp(20px,2vw,25px)}
p{margin:0 0 var(--e3)}
p:last-child{margin-bottom:0}

.saltar{
  position:absolute;left:-9999px;top:0;background:var(--grafito);color:#fff;
  padding:12px 20px;z-index:200;
}
.saltar:focus{left:var(--e2);top:var(--e2)}

/* --- 3. Estructura --------------------------------------- */
.contenedor{width:100%;max-width:var(--contenedor);margin:0 auto;padding:0 var(--e4)}
.lectura{max-width:var(--lectura)}
.seccion{padding:var(--e7) 0}
.seccion--amplia{padding:var(--e8) 0}
.seccion--corta{padding:var(--e6) 0}
.seccion--suave{background:var(--fondo-suave)}
.seccion--azul{background:var(--azul-suave)}
.seccion--oscura{background:var(--grafito);color:var(--blanco)}
.seccion--oscura h2,.seccion--oscura h3{color:var(--blanco)}
.seccion--linea{border-top:1px solid var(--gris-linea)}

.rejilla,[class*="rejilla--"]{display:grid;gap:var(--e5)}
.rejilla--2{grid-template-columns:repeat(2,1fr)}
.rejilla--3{grid-template-columns:repeat(3,1fr)}
.rejilla--4{grid-template-columns:repeat(4,1fr);gap:var(--e4)}
.rejilla--asim{grid-template-columns:5fr 7fr;gap:var(--e6);align-items:start}
.rejilla--asim-inv{grid-template-columns:7fr 5fr;gap:var(--e6);align-items:start}
.rejilla--apretada{gap:var(--e4)}

/* --- 4. Tipografía de apoyo ------------------------------ */
.antetitulo{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  color:var(--azul-texto);margin:0 0 var(--e3);
}
.antetitulo::before{content:"";width:22px;height:2px;background:var(--azul);flex:none}
.seccion--oscura .antetitulo{color:var(--azul)}
.seccion--oscura .antetitulo::before{background:var(--azul)}
.antetitulo--regla{display:flex;width:100%}
.antetitulo--regla::after{content:"";flex:1;height:1px;background:var(--gris-linea);margin-left:var(--e2)}
.seccion--oscura .antetitulo--regla::after{background:var(--grafito-700)}

.entrada{font-size:clamp(18px,2vw,21px);color:var(--gris);line-height:1.65;max-width:62ch}
.seccion--oscura .entrada{color:#BFC4CB}
.secundario{color:var(--gris);font-size:16px}
.seccion--oscura .secundario{color:#BFC4CB}
.destacado{color:var(--grafito);font-weight:500}

.cita{
  font-size:clamp(21px,2.6vw,29px);font-weight:500;line-height:1.35;letter-spacing:-.018em;
  margin:0;padding:var(--e3) 0 var(--e3) var(--e4);border-left:3px solid var(--azul);
}
.cita cite{display:block;margin-top:var(--e2);font-size:13px;font-style:normal;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--azul-texto)}

.banda-cita{position:relative;background:var(--grafito);color:var(--blanco);padding:var(--e8) 0;overflow:hidden}
.banda-cita__comilla{
  position:absolute;left:50%;top:4px;transform:translateX(-50%);
  font-size:210px;line-height:1;font-weight:600;color:#2C3038;user-select:none;pointer-events:none;
}
.banda-cita p{
  position:relative;font-size:clamp(26px,4vw,46px);font-weight:600;line-height:1.2;
  letter-spacing:-.028em;text-align:center;max-width:20ch;margin:0 auto;
}
.banda-cita__firma{
  position:relative;display:block;margin-top:var(--e4);text-align:center;
  font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--azul);
}

/* --- 5. Marca -------------------------------------------- */
.marca{display:inline-block;line-height:1}
.marca__nombre{
  display:block;font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:19px;color:var(--grafito);
}
.marca__tag{
  display:block;margin-top:6px;font-size:9.5px;font-weight:400;
  text-transform:uppercase;letter-spacing:.4em;color:var(--gris);
}
.marca--claro .marca__nombre{color:var(--blanco)}
.marca--claro .marca__tag{color:#9EA3AB}
.marca--grande .marca__nombre{font-size:28px}
.marca--grande .marca__tag{font-size:11px;margin-top:9px}

/* --- 6. Cabecera ----------------------------------------- */
.cabecera{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:var(--blanco);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--curva);
}
.cabecera.esta-fija{border-bottom-color:var(--gris-linea)}
.cabecera__fila{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--cabecera);gap:var(--e4);
}
.nav{display:flex;align-items:center;gap:var(--e4)}
.nav__lista{display:flex;align-items:center;gap:var(--e4);list-style:none;margin:0;padding:0}
.nav__enlace{
  position:relative;font-size:16px;font-weight:500;color:var(--grafito);
  padding:6px 0;transition:color .25s var(--curva);
}
.nav__enlace::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--azul);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--curva);
}
.nav__enlace:hover::after,.nav__enlace[aria-current="page"]::after{transform:scaleX(1)}
.nav__enlace[aria-current="page"]{font-weight:600}

.hamburguesa{
  display:none;width:44px;height:44px;background:none;border:0;padding:0;
  cursor:pointer;position:relative;
}
.hamburguesa span{
  position:absolute;left:11px;width:22px;height:2px;background:var(--grafito);
  transition:transform .3s var(--curva),opacity .2s linear;
}
.hamburguesa span:nth-child(1){top:16px}
.hamburguesa span:nth-child(2){top:22px}
.hamburguesa span:nth-child(3){top:28px}
.menu-abierto .hamburguesa span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-abierto .hamburguesa span:nth-child(2){opacity:0}
.menu-abierto .hamburguesa span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

main{padding-top:var(--cabecera)}

/* --- 7. Botones ------------------------------------------ */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 32px;border-radius:4px;border:1px solid var(--grafito);
  background:var(--grafito);color:var(--blanco);
  font-size:16px;font-weight:600;letter-spacing:.01em;cursor:pointer;
  transition:background-color .28s var(--curva),color .28s var(--curva),
             border-color .28s var(--curva),transform .28s var(--curva);
}
.boton:hover{background:var(--azul);border-color:var(--azul);color:var(--grafito);transform:translateY(-2px)}
.boton--secundario{background:transparent;color:var(--grafito);border-color:var(--grafito)}
.boton--secundario:hover{background:var(--grafito);color:var(--blanco);border-color:var(--grafito)}
.boton--azul{background:var(--azul);border-color:var(--azul);color:var(--grafito)}
.boton--azul:hover{background:var(--grafito);border-color:var(--grafito);color:var(--blanco)}
.boton--claro{background:var(--blanco);color:var(--grafito);border-color:var(--blanco)}
.boton--claro:hover{background:var(--azul);border-color:var(--azul);color:var(--grafito)}
.boton--contorno-claro{background:transparent;color:var(--blanco);border-color:#4A4F57}
.boton--contorno-claro:hover{background:var(--blanco);color:var(--grafito);border-color:var(--blanco)}
.boton--ancho{width:100%}
.boton[disabled],.boton[aria-disabled="true"]{
  cursor:not-allowed;background:var(--gris-linea);border-color:var(--gris-linea);
  color:var(--gris);transform:none;
}
.boton__flecha{transition:transform .28s var(--curva)}
.boton:hover .boton__flecha{transform:translateX(4px)}

.acciones{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:center}
.enlace-texto{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;
  color:var(--grafito);border-bottom:2px solid var(--azul);padding-bottom:3px;
  transition:color .25s var(--curva),border-color .25s var(--curva);
}
.enlace-texto:hover{color:var(--azul-texto);border-color:var(--azul-texto)}
.enlace-texto svg{transition:transform .28s var(--curva)}
.enlace-texto:hover svg{transform:translateX(4px)}
.seccion--oscura .enlace-texto{color:var(--blanco)}
.seccion--oscura .enlace-texto:hover{color:var(--azul);border-color:var(--azul)}
.enlace-inline{color:inherit;border-bottom:2px solid var(--azul);padding-bottom:1px;
  transition:color .25s var(--curva)}
.enlace-inline:hover{color:var(--azul-texto)}

/* --- 8. Hero --------------------------------------------- */
.hero{padding:var(--e8) 0 var(--e7);position:relative}
.hero__rejilla{display:grid;grid-template-columns:7fr 5fr;gap:var(--e6);align-items:center}
.hero h1{margin-bottom:var(--e3)}
.hero h1 em{font-style:normal;color:var(--azul-fuerte)}
.hero__sub{font-size:clamp(18px,1.9vw,21px);color:var(--gris);max-width:52ch;margin-bottom:var(--e5)}
.hero__apoyo{margin-top:var(--e3);font-size:15px;color:var(--gris);display:flex;align-items:center;gap:10px}
.hero__apoyo::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--azul);flex:none}
.hero--corto{padding:var(--e7) 0 var(--e5)}
.hero__datos{
  display:flex;flex-wrap:wrap;gap:10px var(--e2);list-style:none;margin:var(--e4) 0 0;padding:0;
}
.hero__datos li{
  display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;
  letter-spacing:.04em;color:var(--grafito);
  background:var(--azul-suave);border:1px solid var(--azul-borde);border-radius:3px;
  padding:7px 14px;
}
.hero__datos li::before{content:"";width:5px;height:5px;background:var(--azul-fuerte);flex:none}

.cifras{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--azul-borde);border-bottom:1px solid var(--azul-borde);
}
.cifras__item{padding:var(--e4) var(--e3);border-right:1px solid var(--azul-borde)}
.cifras__item:last-child{border-right:0}
.cifras__num{
  display:block;font-size:clamp(34px,4.4vw,52px);font-weight:600;line-height:1;
  letter-spacing:-.04em;color:var(--azul-fuerte);
}
.cifras__txt{
  display:block;margin-top:10px;font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--grafito);
}

/* --- 9. Marco de imagen / marcador ------------------------ */
.marco{position:relative;border:1px solid var(--azul-borde);background:var(--azul-suave);overflow:hidden;border-radius:4px}
.marco--retrato{aspect-ratio:4/5}
.marco--panoramica{aspect-ratio:16/10}
.marco--cuadrada{aspect-ratio:1/1}
.marco img{width:100%;height:100%;object-fit:cover;display:block}
.marco--foto{background:var(--grafito-800,#2A2E34)}
.foto-circulo{max-width:460px;margin:0 auto}
.foto-circulo img{width:100%;height:auto;display:block;border-radius:50%}
.foto-fase{max-width:360px}
@media (max-width:1024px){.foto-fase{max-width:420px}}
.marco::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--azul)}
.marcador{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--e2);text-align:center;padding:var(--e4);
}
.marcador__monograma{
  font-size:48px;font-weight:600;letter-spacing:.14em;color:#A9C8E6;line-height:1;
}
.marcador__texto{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:#7FA3C4;
}
.marco--oscuro{background:#2A2E34;border-color:var(--grafito-700)}
.marco--oscuro .marcador__monograma{color:#4C525A}
.marco--oscuro .marcador__texto{color:#5D646D}

/* --- 10. Listas y tarjetas de reconocimiento ------------- */
.lista-marcada{list-style:none;margin:0;padding:0;display:grid;gap:var(--e3)}
.lista-marcada li{position:relative;padding-left:var(--e4);line-height:1.6}
.lista-marcada li::before{content:"";position:absolute;left:0;top:.58em;width:16px;height:2px;background:var(--azul)}
.lista-marcada--2{grid-template-columns:repeat(2,1fr);gap:var(--e3) var(--e6)}

.reconocimiento{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--azul-borde);
  border:1px solid var(--azul-borde);border-radius:4px;overflow:hidden;
}
.reconocimiento__item{
  background:var(--blanco);padding:var(--e4);display:flex;flex-direction:column;gap:var(--e2);
  transition:background-color .3s var(--curva);
}
.reconocimiento__item:hover{background:var(--azul-suave)}
.reconocimiento__num{font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--azul-fuerte)}
.reconocimiento__item p{margin:0;font-size:17px;line-height:1.55}

/* --- 11. Fases (recurso gráfico principal) --------------- */
.fases{display:grid;gap:var(--e3)}
.fase{
  display:grid;grid-template-columns:auto 1fr;gap:var(--e5);align-items:start;
  padding:var(--e5);border:1px solid var(--gris-linea);border-radius:4px;background:var(--blanco);
  transition:border-color .35s var(--curva),transform .35s var(--curva);
}
.fase:hover{border-color:var(--azul);transform:translateY(-3px);box-shadow:var(--sombra)}
.fase__numero{
  font-size:clamp(52px,6.5vw,80px);font-weight:600;line-height:.82;letter-spacing:-.05em;
  color:var(--azul);transition:color .35s var(--curva);min-width:2ch;
}
.fase:hover .fase__numero{color:var(--azul-fuerte)}
.fase__cuerpo{max-width:62ch}
.fase__titulo{
  font-size:clamp(19px,2vw,23px);font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;margin:0 0 10px;line-height:1.25;
}
.fase__sub{font-size:15px;color:var(--azul-texto);font-weight:600;margin:0 0 var(--e2)}

.fase-cabecera{display:flex;align-items:baseline;gap:var(--e3);flex-wrap:wrap}
.fase-cabecera__num{
  font-size:clamp(48px,6vw,78px);font-weight:600;line-height:.85;letter-spacing:-.05em;color:var(--azul);
}

/* --- 12. Tarjetas ---------------------------------------- */
.tarjeta{
  background:var(--blanco);border:1px solid var(--gris-linea);border-radius:4px;
  padding:var(--e4);transition:border-color .3s var(--curva),transform .3s var(--curva);
}
.tarjeta:hover{border-color:var(--azul);transform:translateY(-3px);box-shadow:var(--sombra)}
.tarjeta h3{margin-bottom:var(--e1);font-size:20px}
.tarjeta p{font-size:16px;color:var(--gris);margin:0}
.tarjeta__icono{
  display:grid;place-items:center;width:52px;height:52px;border-radius:4px;
  background:var(--azul-suave);color:var(--azul-fuerte);margin-bottom:var(--e3);
  transition:background-color .3s var(--curva),color .3s var(--curva);
}
.tarjeta:hover .tarjeta__icono{background:var(--azul);color:var(--grafito)}
.tarjeta__etiqueta{
  display:inline-block;margin-bottom:var(--e2);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--azul-texto);
  background:var(--azul-suave);border-radius:3px;padding:5px 10px;
}
.tarjeta--plana:hover{transform:none;border-color:var(--gris-linea);box-shadow:none}
.tarjeta--azul{background:var(--azul-suave);border-color:var(--azul-borde)}
.tarjeta--barra{border-top:4px solid var(--azul)}

.columnas-enfrentadas{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--gris-linea);border-radius:4px;overflow:hidden}
.columna-si,.columna-no{padding:var(--e5)}
.columna-si{border-right:1px solid var(--gris-linea);background:var(--azul-suave)}
.columna-no{background:var(--fondo-suave)}
.columna-si h3,.columna-no h3{font-size:20px;margin-bottom:var(--e3)}
.columna-si ul,.columna-no ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--e2)}
.columna-si li,.columna-no li{position:relative;padding-left:var(--e4);font-size:16px;line-height:1.55}
.columna-si li::before{content:"";position:absolute;left:0;top:.55em;width:16px;height:2px;background:var(--azul-fuerte)}
.columna-no li{color:var(--gris)}
.columna-no li::before{content:"";position:absolute;left:0;top:.55em;width:16px;height:2px;background:#C6CBD2}

/* --- 13. Pasos y semana ---------------------------------- */
.pasos{list-style:none;margin:0;padding:0;counter-reset:paso;display:grid;gap:var(--e4)}
.pasos li{counter-increment:paso;position:relative;padding-left:60px;font-size:17px;line-height:1.6}
.pasos li::before{
  content:counter(paso,decimal-leading-zero);
  position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--azul-suave);color:var(--azul-texto);
  font-size:13px;font-weight:600;letter-spacing:.04em;
}
.pasos li::after{content:"";position:absolute;left:17px;top:40px;bottom:-26px;width:2px;background:var(--azul-borde)}
.pasos li:last-child::after{display:none}
.seccion--oscura .pasos li::before{background:var(--grafito-700);color:var(--azul)}
.seccion--oscura .pasos li::after{background:var(--grafito-700)}

.semana{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--e3)}
.semana__paso{
  position:relative;padding:var(--e4) var(--e3);background:var(--blanco);
  border:1px solid var(--gris-linea);border-radius:4px;border-top:4px solid var(--azul);
  transition:transform .3s var(--curva);
}
.semana__paso:hover{transform:translateY(-4px)}
.semana__num{
  display:block;font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--azul-texto);margin-bottom:10px;
}
.semana__paso p{margin:0;font-size:16px;line-height:1.5}

/* --- 14. Acordeón ---------------------------------------- */
.acordeon{border-top:1px solid var(--gris-linea)}
.acordeon__item{border-bottom:1px solid var(--gris-linea);transition:background-color .3s var(--curva)}
.acordeon__boton{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e3);
  background:none;border:0;padding:var(--e3);text-align:left;cursor:pointer;
  font-size:18px;font-weight:600;color:var(--grafito);letter-spacing:-.01em;line-height:1.4;
  transition:color .25s var(--curva);
}
.acordeon__boton:hover{color:var(--azul-texto)}
.acordeon__boton[aria-expanded="true"]{background:var(--azul-suave)}
.acordeon__signo{
  position:relative;flex:none;width:26px;height:26px;margin-top:2px;
  border-radius:50%;background:var(--azul-suave);transition:background-color .25s var(--curva);
}
.acordeon__boton[aria-expanded="true"] .acordeon__signo{background:var(--azul)}
.acordeon__signo::before,.acordeon__signo::after{
  content:"";position:absolute;background:var(--azul-texto);transition:transform .2s var(--curva);
}
.acordeon__signo::before{left:7px;top:12px;width:12px;height:2px}
.acordeon__signo::after{left:12px;top:7px;width:2px;height:12px}
.acordeon__boton[aria-expanded="true"] .acordeon__signo::before,
.acordeon__boton[aria-expanded="true"] .acordeon__signo::after{background:var(--grafito)}
.acordeon__boton[aria-expanded="true"] .acordeon__signo::after{transform:scaleY(0)}
.acordeon__panel{overflow:hidden;height:0;transition:height .24s var(--curva);background:var(--azul-suave)}
.acordeon__panel > div{padding:0 var(--e3) var(--e3);max-width:70ch;color:var(--gris);font-size:17px}

/* --- 15. Formularios ------------------------------------- */
.formulario{display:grid;gap:var(--e3)}
.campo{display:grid;gap:8px}
.campo label{font-size:14px;font-weight:600;letter-spacing:.04em}
.campo input,.campo textarea,.campo select{
  width:100%;padding:14px 16px;border:1px solid var(--gris-linea);border-radius:4px;
  background:var(--blanco);color:var(--grafito);font:inherit;font-size:16px;
  transition:border-color .25s var(--curva),background-color .25s var(--curva);
}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none;border-color:var(--azul-fuerte);background:var(--azul-suave);
}
.campo textarea{min-height:150px;resize:vertical}
.campo--fila{display:grid;grid-template-columns:1fr 1fr;gap:var(--e3)}
.consentimiento{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--gris);line-height:1.5}
.consentimiento input{margin-top:4px;width:17px;height:17px;flex:none;accent-color:var(--azul-fuerte)}
.consentimiento a{border-bottom:2px solid var(--azul)}
.aviso-formulario{font-size:14px;color:var(--gris);line-height:1.55}
.aviso-formulario--ok{
  color:var(--grafito);background:var(--azul-suave);border:1px solid var(--azul-borde);
  border-radius:4px;padding:14px 16px;font-size:15px;
}
.aviso-formulario--error{
  color:var(--grafito);background:#FBECEC;border:1px solid #EFC9C9;
  border-radius:4px;padding:14px 16px;font-size:15px;
}
.seccion--oscura .campo label{color:var(--blanco)}
.seccion--oscura .campo input{background:#2C3037;border-color:var(--grafito-700);color:var(--blanco)}
.seccion--oscura .campo input:focus{background:#33373F;border-color:var(--azul)}
.seccion--oscura .campo input::placeholder{color:#7C838C}
.seccion--oscura .consentimiento{color:#AEB3BB}
.seccion--oscura .consentimiento a{color:var(--blanco)}
.honeypot{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* --- 16. Bloque de inversión / pago ----------------------- */
.inversion{
  border:1px solid var(--azul-borde);border-top:4px solid var(--azul);border-radius:4px;
  padding:var(--e5);background:var(--blanco);
}
.inversion__precio{
  font-size:clamp(34px,4vw,48px);font-weight:600;letter-spacing:-.03em;line-height:1;margin:0 0 var(--e1);
}
.inversion__nota{font-size:15px;color:var(--gris);margin:0 0 var(--e4)}
.inversion__lista{list-style:none;margin:0 0 var(--e4);padding:0;display:grid;gap:12px;font-size:16px}
.inversion__lista li{position:relative;padding-left:var(--e4)}
.inversion__lista li::before{content:"";position:absolute;left:0;top:.58em;width:16px;height:2px;background:var(--azul)}
.pendiente{
  display:inline-block;padding:5px 12px;border:1px solid var(--azul-borde);border-radius:3px;
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--azul-texto);
  background:var(--azul-suave);
}
.nota-pago{margin-top:var(--e2);font-size:14px;color:var(--gris)}

/* --- 17. Pie --------------------------------------------- */
.pie{background:var(--grafito);color:#B9BDC4;padding:var(--e7) 0 var(--e4);font-size:16px}
.pie a{color:#B9BDC4;transition:color .25s var(--curva)}
.pie a:hover{color:var(--azul)}
.pie__rejilla{display:grid;grid-template-columns:2.2fr 1fr 1.2fr 1.2fr;gap:var(--e5)}
.pie__titulo{
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  color:var(--azul);margin:0 0 var(--e3);
}
.pie__lista{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:15px}
.pie__frase{margin:var(--e3) 0 0;font-size:15px;max-width:34ch;color:#9EA3AB}
.pie__legal{
  margin-top:var(--e6);padding-top:var(--e3);border-top:1px solid var(--grafito-700);
  display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4);justify-content:space-between;
  font-size:13px;color:#8A9099;line-height:1.6;
}
.pie__descargo{max-width:78ch;margin-top:var(--e3);font-size:13px;color:#8A9099;line-height:1.6}
.redes{display:flex;gap:var(--e2);margin-top:var(--e3)}
.redes a{
  width:42px;height:42px;border:1px solid var(--grafito-700);border-radius:4px;
  display:grid;place-items:center;
  transition:border-color .25s var(--curva),background-color .25s var(--curva),color .25s var(--curva);
}
.redes a:hover{border-color:var(--azul);background:var(--azul);color:var(--grafito)}

/* --- 18. Flotantes --------------------------------------- */
.whatsapp{
  position:fixed;right:24px;bottom:24px;z-index:90;
  width:56px;height:56px;border-radius:50%;background:var(--grafito);color:var(--blanco);
  display:grid;place-items:center;
  transition:background-color .28s var(--curva),transform .28s var(--curva),color .28s var(--curva);
}
.whatsapp:hover{background:var(--azul);color:var(--grafito);transform:translateY(-3px)}
.barra-movil{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;
  padding:12px 16px;background:var(--blanco);border-top:1px solid var(--gris-linea);
  transform:translateY(110%);transition:transform .35s var(--curva);
}
.barra-movil.visible{transform:translateY(0)}

/* --- 19. Cookies ----------------------------------------- */
.cookies{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:120;
  max-width:560px;background:var(--blanco);border:1px solid var(--grafito);
  border-top:4px solid var(--azul);border-radius:4px;
  padding:var(--e3);display:none;
}
.cookies.visible{display:block}
.cookies p{font-size:15px;color:var(--gris);margin-bottom:var(--e3);line-height:1.55}
.cookies__acciones{display:flex;flex-wrap:wrap;gap:10px}
.cookies__acciones .boton{padding:11px 20px;font-size:14px;flex:1 1 auto}

/* --- 20. Movimiento -------------------------------------- */
.revelar{opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--curva),transform .5s var(--curva);
  transition-delay:calc(var(--i,0) * 80ms);
}
.revelar.visible{opacity:1;transform:none}

/* --- 21. Utilidades -------------------------------------- */
.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.centro{text-align:center}
.centro .entrada{margin-left:auto;margin-right:auto}
.centro .antetitulo{justify-content:center}
.mt-2{margin-top:var(--e2)}
.mt-3{margin-top:var(--e3)}
.mt-4{margin-top:var(--e4)}
.mt-5{margin-top:var(--e5)}
.mt-6{margin-top:var(--e6)}
.mb-4{margin-bottom:var(--e4)}
.mb-5{margin-bottom:var(--e5)}
.medida{max-width:var(--lectura)}
.texto-legal a,.aviso-formulario a{border-bottom:2px solid var(--azul);transition:color .25s var(--curva)}
.texto-legal a:hover,.aviso-formulario a:hover{color:var(--azul-texto)}
.texto-legal h2{font-size:24px;margin:var(--e6) 0 var(--e3);padding-top:var(--e3);border-top:1px solid var(--gris-linea)}
.texto-legal h3{font-size:19px;margin:var(--e4) 0 var(--e2)}
.texto-legal li{margin-bottom:10px}
.texto-legal ul{padding-left:var(--e3)}

/* --- 22. Responsive -------------------------------------- */
@media (max-width:1024px){
  .hero__rejilla,.rejilla--asim,.rejilla--asim-inv{grid-template-columns:1fr;gap:var(--e5)}
  .rejilla--3,.rejilla--4{grid-template-columns:repeat(2,1fr)}
  .reconocimiento{grid-template-columns:repeat(2,1fr)}
  .semana{grid-template-columns:repeat(2,1fr)}
  .cifras{grid-template-columns:repeat(2,1fr)}
  .cifras__item:nth-child(2n){border-right:0}
  .cifras__item:nth-child(-n+2){border-bottom:1px solid var(--azul-borde)}
  .pie__rejilla{grid-template-columns:1fr 1fr;gap:var(--e5)}
}
@media (max-width:860px){
  :root{--cabecera:72px}
  .nav{
    position:fixed;inset:var(--cabecera) 0 0 0;background:var(--blanco);
    flex-direction:column;justify-content:flex-start;align-items:stretch;
    padding:var(--e5) var(--e4) var(--e6);gap:var(--e4);
    transform:translateX(100%);transition:transform .35s var(--curva);
    overflow-y:auto;
  }
  .menu-abierto .nav{transform:translateX(0)}
  .nav__lista{flex-direction:column;align-items:stretch;gap:0}
  .nav__lista li{border-bottom:1px solid var(--gris-linea)}
  .nav__enlace{display:block;padding:var(--e2) 0;font-size:20px;font-weight:500}
  .nav__enlace::after{display:none}
  .nav .boton{width:100%;margin-top:var(--e2)}
  .hamburguesa{display:block}
  .barra-movil{display:block}
  .menu-abierto{overflow:hidden}
  .whatsapp{bottom:88px;right:16px;width:52px;height:52px}
  .cookies{bottom:92px}
  .banda-cita{padding:var(--e7) 0}
  .banda-cita__comilla{font-size:150px}
}
@media (max-width:720px){
  body{font-size:17px}
  .contenedor{padding:0 var(--e3)}
  .seccion,.seccion--amplia{padding:var(--e6) 0}
  .hero{padding:var(--e6) 0 var(--e5)}
  .rejilla--2,.rejilla--3,.rejilla--4,.lista-marcada--2,.campo--fila,
  .reconocimiento,.semana{grid-template-columns:1fr}
  .cifras{grid-template-columns:1fr}
  .cifras__item{border-right:0;border-bottom:1px solid var(--azul-borde);padding:var(--e3)}
  .cifras__item:last-child{border-bottom:0}
  .columnas-enfrentadas{grid-template-columns:1fr}
  .columna-si{border-right:0;border-bottom:1px solid var(--gris-linea)}
  .columna-si,.columna-no{padding:var(--e4)}
  .fase{grid-template-columns:1fr;gap:var(--e2);padding:var(--e4)}
  .fase__numero{font-size:44px}
  .pie__rejilla{grid-template-columns:1fr;gap:var(--e5)}
  .pie__legal{flex-direction:column}
  .inversion{padding:var(--e4)}
  .acciones .boton{width:100%}
  .acordeon__boton{padding:var(--e3) var(--e2)}
  .acordeon__panel > div{padding:0 var(--e2) var(--e3)}
}

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

@media print{
  .cabecera,.whatsapp,.barra-movil,.cookies{display:none}
  main{padding-top:0}
}

/* Bloque «Por qué importa» de cada fase (el-proceso) */
.importancia{margin-top:var(--e5);padding-top:var(--e4);border-top:1px solid var(--azul-borde)}
.importancia__intro{margin-top:var(--e3);line-height:1.75;color:var(--grafito)}
.importancia__titulo{margin-top:var(--e4);font-size:16px;font-weight:600;letter-spacing:.01em}
.importancia__lista{margin-top:var(--e3)}
.importancia__cierre{margin-top:var(--e4);padding:var(--e3) var(--e4);background:var(--azul-suave);
  border-left:3px solid var(--azul);border-radius:3px;font-weight:500;color:var(--grafito)}
.seccion--azul .importancia__cierre{background:#fff}