/* Landing de Encantia. Paleta calida sobre papel: tinta, crema, ambar y el
   verde de WhatsApp solo donde aporta. Independiente del panel. */

:root{
  --papel:#faf7f2;
  --papel2:#f3ede4;
  --crema:#efe7db;
  --tinta:#1b1a17;
  --tinta2:#4a463f;
  --tinta3:#878175;
  --linea:#e2d9cb;
  --linea2:#cfc3b0;
  --ambar:#c2410c;
  --ambar2:#ea580c;
  --oro:#b45309;
  --verde:#128c7e;
  --verde2:#25d366;
  --vino:#7c2d12;
  --ancho:1200px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  background:var(--papel);
  color:var(--tinta);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}

/* Textura de papel: puntitos muy tenues, no un degradado de neon */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(27,26,23,.055) 1px,transparent 0);
  background-size:22px 22px;
}
main,.cabecera,.pie{position:relative;z-index:1}

/* ── Cabecera ── */
.cabecera{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:28px;
  padding:18px 34px;transition:padding .3s,background .3s,box-shadow .3s;
  border-bottom:1px solid transparent;
}
.cabecera.pegada{
  background:rgba(250,247,242,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--linea);padding:12px 34px;
}
.marca{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px;letter-spacing:-.5px}
.logo{
  width:36px;height:36px;border-radius:11px;background:var(--tinta);
  display:grid;place-items:center;color:var(--papel);font-size:18px;font-weight:900;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.marca:hover .logo{transform:rotate(-9deg) scale(1.06)}
.nav{display:flex;gap:30px;margin-left:auto;font-size:15px;color:var(--tinta2);font-weight:520}
.nav a{position:relative;padding:4px 0}
.nav a::after{
  content:'';position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--ambar);
  transition:width .3s cubic-bezier(.4,0,.2,1);
}
.nav a:hover{color:var(--tinta)}
.nav a:hover::after{width:100%}
.cab-btns{display:flex;align-items:center;gap:8px}

/* ── Botones ── */
.btn-primario,.btn-borde,.btn-fantasma,.btn-grande{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:620;font-size:15px;padding:11px 21px;cursor:pointer;
  border:1.5px solid transparent;border-radius:10px;font-family:inherit;
  transition:transform .2s,box-shadow .25s,background .22s,border-color .22s,color .22s;
  white-space:nowrap;
}
.btn-primario{background:var(--tinta);color:var(--papel);box-shadow:0 2px 0 rgba(27,26,23,.2)}
.btn-primario:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(27,26,23,.24)}
.btn-borde{background:transparent;border-color:var(--linea2);color:var(--tinta)}
.btn-borde:hover{border-color:var(--tinta);background:rgba(27,26,23,.04);transform:translateY(-2px)}
.btn-fantasma{color:var(--tinta2);padding:11px 12px}
.btn-fantasma:hover{color:var(--ambar)}
.btn-grande{
  padding:16px 30px;font-size:16.5px;border-radius:11px;
  background:var(--ambar);color:#fff;box-shadow:0 3px 0 var(--vino);
  position:relative;overflow:hidden;
}
.btn-grande span,.btn-grande svg{position:relative;z-index:1}
.btn-grande::before{
  content:'';position:absolute;inset:0;background:var(--ambar2);
  transform:translateY(101%);transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.btn-grande:hover::before{transform:translateY(0)}
.btn-grande:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--vino),0 12px 26px rgba(194,65,12,.3)}
.btn-grande:active{transform:translateY(1px);box-shadow:0 1px 0 var(--vino)}
.btn-grande svg{transition:transform .3s}
.btn-grande:hover svg{transform:translateX(4px)}
.ancho{width:100%}

.hamburguesa{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.hamburguesa span{display:block;width:22px;height:2px;background:var(--tinta);border-radius:2px;transition:.28s}
.hamburguesa.abierta span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburguesa.abierta span:nth-child(2){opacity:0}
.hamburguesa.abierta span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-movil{
  display:none;position:fixed;top:62px;left:0;right:0;z-index:55;
  background:var(--papel);border-bottom:1px solid var(--linea);
  padding:14px 24px 20px;flex-direction:column;
}
.menu-movil.visible{display:flex;animation:bajaMenu .3s ease}
@keyframes bajaMenu{from{opacity:0;transform:translateY(-14px)}}
.menu-movil a{padding:13px 4px;border-bottom:1px solid var(--linea);color:var(--tinta2)}
.menu-movil a:last-child{border:0;margin-top:12px;color:#fff;justify-content:center}

/* ── Héroe ── */
.heroe{
  max-width:var(--ancho);margin:0 auto;padding:56px 34px 80px;
  display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center;
}
.pastilla{
  display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;
  color:var(--verde);background:rgba(18,140,126,.08);
  border:1px solid rgba(18,140,126,.22);padding:7px 15px;border-radius:999px;margin-bottom:26px;
}
.punto-vivo{
  width:7px;height:7px;border-radius:50%;background:var(--verde2);
  box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:latido 2.2s infinite;
}
@keyframes latido{70%{box-shadow:0 0 0 8px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

h1{
  font-size:clamp(40px,5.6vw,68px);line-height:1.02;font-weight:800;
  letter-spacing:-2.6px;margin-bottom:24px;
}
/* Subrayado dibujado a mano, no un degradado de moda */
.trazo{position:relative;display:inline-block;color:var(--ambar);white-space:nowrap}
.trazo svg{
  position:absolute;left:-2%;bottom:-14px;width:104%;height:16px;overflow:visible;
}
.trazo path{
  stroke:var(--ambar);stroke-width:4;fill:none;stroke-linecap:round;
  stroke-dasharray:340;stroke-dashoffset:340;
  animation:dibuja 1.1s cubic-bezier(.4,0,.2,1) .7s forwards;
}
@keyframes dibuja{to{stroke-dashoffset:0}}

.entrada{font-size:18px;color:var(--tinta2);max-width:500px;margin-bottom:34px}
.entrada b{color:var(--tinta);font-weight:650}
.heroe-btns{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:38px}
.heroe-btns.centro{justify-content:center;margin-bottom:0}

.prueba{display:flex;align-items:center;gap:14px}
.caras{display:flex}
.caras img{
  width:40px;height:40px;border-radius:50%;object-fit:cover;
  border:2.5px solid var(--papel);margin-left:-12px;
  transition:transform .28s;
}
.caras img:first-child{margin-left:0}
.caras img:hover{transform:translateY(-4px) scale(1.08);z-index:2}
.prueba-txt{font-size:13.5px;color:var(--tinta2);line-height:1.4}
.prueba-txt b{display:block;color:var(--tinta);font-size:14px}
.estrellas{color:#eab308;font-size:13px;letter-spacing:1px}

/* Composición del héroe: foto real + chat encima */
.heroe-arte{position:relative}
.foto-heroe{
  border-radius:20px;overflow:hidden;border:1px solid var(--linea);
  box-shadow:0 24px 60px rgba(27,26,23,.16);
  transform:rotate(1.4deg);transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.foto-heroe:hover{transform:rotate(0)}
.foto-heroe img{width:100%;height:430px;object-fit:cover}

.chat-flota{
  position:absolute;bottom:-34px;left:-38px;width:290px;
  background:#fff;border:1px solid var(--linea);border-radius:16px;
  box-shadow:0 20px 46px rgba(27,26,23,.18);padding:14px;
  animation:flotaChat 7s ease-in-out infinite;
}
@keyframes flotaChat{50%{transform:translateY(-12px)}}
.chat-cab{
  display:flex;align-items:center;gap:9px;padding-bottom:11px;
  border-bottom:1px solid var(--linea);margin-bottom:11px;
}
.chat-avatar{
  width:32px;height:32px;border-radius:50%;background:var(--verde);
  display:grid;place-items:center;color:#fff;font-weight:750;font-size:14px;
}
.chat-nom{font-size:13.5px;font-weight:680}
.chat-est{font-size:11px;color:var(--verde);display:flex;align-items:center;gap:4px}
.chat-cuerpo{height:186px;display:flex;flex-direction:column;gap:7px;justify-content:flex-end;overflow:hidden}
.burbuja{
  max-width:88%;padding:8px 12px;border-radius:13px;font-size:12.8px;line-height:1.45;
  animation:entraBurbuja .45s cubic-bezier(.2,.9,.3,1.3) both;
}
@keyframes entraBurbuja{from{opacity:0;transform:translateY(12px) scale(.94)}}
.burbuja.cli{align-self:flex-start;background:var(--papel2);border-bottom-left-radius:4px}
.burbuja.bot{align-self:flex-end;background:#d9fdd3;border-bottom-right-radius:4px}
.burbuja .hora{display:block;font-size:9.5px;color:var(--tinta3);margin-top:2px;text-align:right}
.escribiendo{
  align-self:flex-end;display:flex;gap:4px;padding:11px 14px;
  background:#d9fdd3;border-radius:13px;border-bottom-right-radius:4px;
}
.escribiendo i{width:5.5px;height:5.5px;border-radius:50%;background:var(--verde);animation:punto 1.3s infinite}
.escribiendo i:nth-child(2){animation-delay:.18s}
.escribiendo i:nth-child(3){animation-delay:.36s}
@keyframes punto{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.nota{
  position:absolute;display:flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--linea);border-radius:11px;
  padding:10px 14px;font-size:13px;font-weight:620;
  box-shadow:0 10px 26px rgba(27,26,23,.12);
}
.nota-1{top:26px;right:-26px;color:var(--verde);animation:flotaA 5.5s ease-in-out infinite}
.nota-2{bottom:82px;right:-32px;color:var(--ambar);animation:flotaB 6.8s ease-in-out infinite}
@keyframes flotaA{50%{transform:translateY(-14px) rotate(-1.5deg)}}
@keyframes flotaB{50%{transform:translateY(12px) rotate(1.5deg)}}

/* ── Franja de métricas: rompe el blanco al salir del héroe ── */
.franja{background:var(--crema);border-top:1px solid var(--linea)}
.franja-in{
  max-width:var(--ancho);margin:0 auto;padding:34px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.fm{text-align:center;position:relative}
.fm:not(:last-child)::after{
  content:'';position:absolute;right:-11px;top:12%;height:76%;
  width:1px;background:var(--linea2);
}
.fm b{
  display:block;font-size:34px;font-weight:840;letter-spacing:-1.6px;
  color:var(--tinta);line-height:1.1;
}
.fm span{font-size:13.5px;color:var(--tinta3)}

/* ── Cinta que corre ── */
.cinta{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);background:var(--papel2);overflow:hidden;padding:16px 0}
.cinta-pista{display:flex;gap:44px;width:max-content;animation:corre 34s linear infinite}
.cinta:hover .cinta-pista{animation-play-state:paused}
@keyframes corre{to{transform:translateX(-50%)}}
.cinta-it{
  display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;
  color:var(--tinta2);white-space:nowrap;
}
.cinta-it svg{color:var(--ambar);flex-shrink:0}

/* ── Secciones ── */
.seccion{max-width:var(--ancho);margin:0 auto;padding:96px 34px}
.titulo-sec{max-width:640px;margin-bottom:56px}
.titulo-sec.centro{margin-left:auto;margin-right:auto;text-align:center}
.etiqueta{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--ambar);margin-bottom:16px;
}
.etiqueta::before{content:'';width:26px;height:1.5px;background:var(--ambar)}
.titulo-sec.centro .etiqueta::before{display:none}
h2{font-size:clamp(30px,4.1vw,46px);line-height:1.08;font-weight:800;letter-spacing:-1.8px;margin-bottom:18px}
.titulo-sec p{color:var(--tinta2);font-size:17px}

/* ══════════ CAPACIDADES: bloque oscuro que corta el blanco ══════════ */
.seccion-osc{
  background:var(--tinta);color:var(--papel);position:relative;overflow:hidden;
}
.seccion-osc .seccion{padding-top:104px;padding-bottom:104px}
.seccion-osc::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(250,247,242,.05) 1px,transparent 0);
  background-size:24px 24px;
}
/* Resplandor calido difuso. Se define sobre TODA la caja con una elipse
   explicita: si se limita a un lado, la orilla del degradado se recorta contra
   el borde y deja una linea recta visible. */
.seccion-osc::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 70% at 82% 18%,rgba(251,191,36,.10),transparent 70%),
    radial-gradient(ellipse 50% 60% at 12% 92%,rgba(194,65,12,.09),transparent 72%);
}
.seccion-osc .seccion{position:relative;z-index:1}
.seccion-osc h2{color:var(--papel)}
.seccion-osc .titulo-sec p{color:rgba(250,247,242,.66)}
.etiqueta.clara{color:#fbbf24}
.etiqueta.clara::before{background:#fbbf24}

/* Mosaico: tamaños distintos, no una rejilla plana */
.mosaico{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cap{
  background:rgba(250,247,242,.045);border:1px solid rgba(250,247,242,.1);
  border-radius:18px;padding:28px 26px;
  transition:transform .35s,background .35s,border-color .35s;
  position:relative;overflow:hidden;
}
.cap:hover{transform:translateY(-5px);background:rgba(250,247,242,.075);border-color:rgba(250,247,242,.2)}
.cap.grande{grid-column:span 2;display:grid;grid-template-columns:1fr .82fr;gap:30px;align-items:center}
.cap.ancha{grid-column:span 2;display:grid;grid-template-columns:1fr .78fr;gap:30px;align-items:center}
.cap-icono{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(251,191,36,.13);color:#fbbf24;margin-bottom:16px;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.cap:hover .cap-icono{transform:scale(1.1) rotate(-6deg)}
.cap h3{font-size:18.5px;font-weight:730;letter-spacing:-.5px;margin-bottom:9px;color:var(--papel)}
.cap p{color:rgba(250,247,242,.68);font-size:14.8px}
.cap p b{color:var(--papel);font-weight:640}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.chip{
  font-size:12px;font-weight:600;padding:5px 11px;border-radius:7px;
  background:rgba(250,247,242,.08);border:1px solid rgba(250,247,242,.14);
  color:rgba(250,247,242,.82);
}

/* Mini chat de la tarjeta grande */
.mini-chat{
  background:rgba(0,0,0,.28);border:1px solid rgba(250,247,242,.1);border-radius:14px;
  padding:14px;min-height:172px;display:flex;flex-direction:column;gap:7px;
  justify-content:flex-end;overflow:hidden;
}
.mini-chat .burbuja{font-size:12.4px;max-width:90%}
.mini-chat .burbuja.cli{background:rgba(250,247,242,.1);color:var(--papel)}
.mini-chat .burbuja.bot{background:#0b5c50;color:#eafff7}
.mini-chat .burbuja .hora{color:rgba(250,247,242,.42)}
.mini-chat .escribiendo{background:#0b5c50}
.mini-chat .escribiendo i{background:#6ee7c3}
.mini-audio{
  align-self:flex-start;display:flex;align-items:center;gap:9px;
  background:rgba(250,247,242,.1);border-radius:13px;border-bottom-left-radius:4px;
  padding:9px 13px;animation:entraBurbuja .45s cubic-bezier(.2,.9,.3,1.3) both;
}
.mini-audio svg{color:#fbbf24;flex-shrink:0}
.onda{display:flex;align-items:center;gap:2.5px;height:16px}
.onda i{width:2.5px;border-radius:2px;background:rgba(250,247,242,.55);animation:onda 1.1s ease-in-out infinite}
.onda i:nth-child(1){height:6px;animation-delay:0s}
.onda i:nth-child(2){height:12px;animation-delay:.1s}
.onda i:nth-child(3){height:16px;animation-delay:.2s}
.onda i:nth-child(4){height:9px;animation-delay:.3s}
.onda i:nth-child(5){height:13px;animation-delay:.4s}
.onda i:nth-child(6){height:7px;animation-delay:.5s}
@keyframes onda{50%{transform:scaleY(.45)}}

/* Mapa de flujo en miniatura */
.mapa-mini{
  display:flex;align-items:center;gap:0;margin-top:20px;padding:16px 12px;
  background:rgba(0,0,0,.26);border:1px solid rgba(250,247,242,.09);border-radius:12px;
  overflow:hidden;
}
.nodo{
  font-size:10.5px;font-weight:620;padding:7px 9px;border-radius:7px;white-space:nowrap;
  background:rgba(250,247,242,.1);border:1px solid rgba(250,247,242,.16);
  color:rgba(250,247,242,.88);flex-shrink:0;
}
.nodo{animation:naceNodo .5s cubic-bezier(.2,.9,.3,1.4) backwards}
.nodo.n1{animation-delay:.15s}
.nodo.n2{animation-delay:.75s}
.nodo.n3{animation-delay:1.35s}
.nodo.acento{background:rgba(251,191,36,.18);border-color:rgba(251,191,36,.4);color:#fde68a}
@keyframes naceNodo{from{opacity:0;transform:scale(.6)}}
.hilo{flex:1;height:10px;min-width:14px}
.hilo path{
  stroke:rgba(251,191,36,.55);stroke-width:1.5;fill:none;stroke-dasharray:60;
}
.hilo path{animation:tiendeHilo .45s ease backwards}
.hilo.h1 path{animation-delay:.55s}
.hilo.h2 path{animation-delay:1.15s}
@keyframes tiendeHilo{to{stroke-dashoffset:0}}

/* Kanban en miniatura */
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}
.kcol{background:rgba(0,0,0,.26);border-radius:10px;padding:10px 8px}
.ktit{
  display:flex;justify-content:space-between;font-size:10px;font-weight:620;
  color:rgba(250,247,242,.6);margin-bottom:9px;
}
.ktit b{color:#fbbf24}
.ktit.verde b{color:#6ee7c3}
.ktar{
  display:block;height:20px;border-radius:5px;margin-bottom:6px;
  background:rgba(250,247,242,.11);animation:respiraTar 3s ease-in-out infinite;
}
.ktar.corta{width:70%}
.ktar.v{background:rgba(110,231,195,.17)}
.ktar:nth-child(3){animation-delay:.4s}
.ktar:nth-child(4){animation-delay:.8s}
@keyframes respiraTar{50%{background:rgba(250,247,242,.2)}}

/* Barras de anuncios */
.barras{display:flex;align-items:flex-end;gap:8px;height:96px;margin-top:22px}
.barra{
  flex:1;background:rgba(250,247,242,.13);border-radius:5px 5px 0 0;position:relative;
  height:var(--h);transform-origin:bottom;
}
.barra{animation:creceBarra .8s cubic-bezier(.2,.8,.3,1) backwards}
.barra:nth-child(2){animation-delay:.08s}
.barra:nth-child(3){animation-delay:.16s}
.barra:nth-child(4){animation-delay:.24s}
.barra:nth-child(5){animation-delay:.32s}
.barra:nth-child(6){animation-delay:.4s}
.barra.alta{background:linear-gradient(180deg,#fbbf24,rgba(251,191,36,.4))}
.barra span{
  position:absolute;bottom:-19px;left:0;right:0;text-align:center;
  font-size:9.5px;color:rgba(250,247,242,.45);
}
@keyframes creceBarra{from{transform:scaleY(0)}}

/* Seguimientos */
.reloj-fila{display:flex;align-items:center;gap:12px;margin-top:24px}
.rf{
  background:rgba(0,0,0,.26);border:1px solid rgba(250,247,242,.1);
  border-radius:10px;padding:12px 14px;flex:1;
}
.rf b{display:block;font-size:19px;font-weight:780;color:#fbbf24;letter-spacing:-.6px}
.rf span{font-size:11px;color:rgba(250,247,242,.55)}
.rf-linea{
  height:1.5px;width:26px;flex-shrink:0;
  background:linear-gradient(90deg,rgba(251,191,36,.7),rgba(251,191,36,.15));
}

/* Ventana del navegador (marca blanca) */
.ventana{
  background:rgba(0,0,0,.3);border:1px solid rgba(250,247,242,.12);
  border-radius:12px;overflow:hidden;
}
.v-top{
  display:flex;align-items:center;gap:5px;padding:9px 12px;
  background:rgba(250,247,242,.05);border-bottom:1px solid rgba(250,247,242,.09);
}
.v-top .sem{width:8px;height:8px;border-radius:50%;background:rgba(250,247,242,.22)}
.v-url{
  margin-left:9px;font-size:10.5px;color:rgba(250,247,242,.5);
  background:rgba(0,0,0,.3);padding:3px 10px;border-radius:5px;
}
.v-cuerpo{display:flex;align-items:center;gap:16px;padding:22px 18px}
.v-logo{
  width:60px;height:60px;border-radius:12px;flex-shrink:0;
  border:1.5px dashed rgba(251,191,36,.5);color:#fbbf24;
  display:grid;place-items:center;font-size:10px;font-weight:800;
  text-align:center;line-height:1.2;letter-spacing:.5px;
}
.v-lineas{flex:1;display:flex;flex-direction:column;gap:8px}
.v-lineas i{display:block;height:9px;border-radius:4px;background:rgba(250,247,242,.13)}
.v-lineas i.corta{width:58%}

/* ── Cómo funciona: pasos alternados con foto ── */
.paso-fila{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  padding:44px 0;border-bottom:1px solid var(--linea);
}
.paso-fila:last-child{border-bottom:0}
.paso-fila.girada .paso-txt{order:2}
.paso-num-g{
  font-size:60px;font-weight:850;line-height:1;letter-spacing:-3px;
  color:transparent;-webkit-text-stroke:1.5px var(--linea2);margin-bottom:14px;
  transition:-webkit-text-stroke-color .4s,color .4s;
}
.paso-fila:hover .paso-num-g{-webkit-text-stroke-color:var(--ambar);color:rgba(194,65,12,.07)}
.paso-txt h3{font-size:25px;font-weight:750;letter-spacing:-.9px;margin-bottom:12px}
.paso-txt p{color:var(--tinta2);font-size:16px;max-width:420px}
code{
  background:var(--crema);padding:2px 8px;border-radius:5px;font-size:14px;
  color:var(--vino);font-family:ui-monospace,'SF Mono',Menlo,monospace;
}
.paso-foto{border-radius:16px;overflow:hidden;border:1px solid var(--linea);box-shadow:0 14px 36px rgba(27,26,23,.1)}
.paso-foto img{width:100%;height:260px;object-fit:cover;transition:transform .7s cubic-bezier(.4,0,.2,1)}
.paso-foto:hover img{transform:scale(1.05)}

/* ── Nosotros ── */
.nosotros{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.nosotros-txt p{color:var(--tinta2);font-size:16.5px;margin-bottom:16px}
.nos-datos{display:flex;gap:16px;margin-top:30px;flex-wrap:wrap}
.nd{
  background:var(--crema);border:1px solid var(--linea);border-radius:12px;
  padding:14px 18px;flex:1;min-width:190px;
}
.nd b{display:block;font-size:16px;font-weight:750;letter-spacing:-.4px;color:var(--ambar);margin-bottom:2px}
.nd span{font-size:13px;color:var(--tinta3);line-height:1.4}
.nosotros-arte{position:relative}
.nosotros-arte img{
  width:100%;height:440px;object-fit:cover;border-radius:20px;
  border:1px solid var(--linea);box-shadow:0 24px 56px rgba(27,26,23,.16);
}
.sello{
  position:absolute;bottom:-26px;left:-26px;background:var(--tinta);color:var(--papel);
  border-radius:16px;padding:20px 24px;box-shadow:0 16px 36px rgba(27,26,23,.28);
  max-width:220px;
}
.sello b{display:block;font-size:26px;font-weight:800;letter-spacing:-1px;color:#fbbf24}
.sello span{font-size:13px;opacity:.82;line-height:1.4;display:block;margin-top:4px}

/* ── Testimonios ── */
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.testi{
  background:#fff;border:1px solid var(--linea);border-radius:16px;padding:26px 24px;
  display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s;
}
.testi:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(27,26,23,.11)}
.testi .comillas{font-size:44px;line-height:.7;color:var(--linea2);font-family:Georgia,serif;margin-bottom:12px}
.testi p{color:var(--tinta2);font-size:15px;flex:1;margin-bottom:20px}
.testi-pie{display:flex;align-items:center;gap:12px}
.testi-pie img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.testi-pie b{display:block;font-size:14.5px;font-weight:680}
.testi-pie span{font-size:12.5px;color:var(--tinta3)}

/* ── Planes ── */
.planes{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:900px;margin:0 auto}
.plan{
  background:#fff;border:1.5px solid var(--linea);border-radius:18px;padding:34px 30px;
  display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s;
  position:relative;
}
.plan:hover{transform:translateY(-5px);box-shadow:0 20px 46px rgba(27,26,23,.11)}
.plan.destacado{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.plan.destacado .plan-nota,.plan.destacado li{color:rgba(250,247,242,.72)}
.plan.destacado li b{color:#fff}
.plan.destacado .moneda{color:rgba(250,247,242,.6)}
.plan.destacado li::before{background:rgba(37,211,102,.2)}
.cinta-plan{
  position:absolute;top:-11px;right:24px;background:#fbbf24;color:var(--tinta);
  font-size:11.5px;font-weight:750;letter-spacing:.6px;text-transform:uppercase;
  padding:5px 14px;border-radius:7px;
}
.plan h3{font-size:19px;font-weight:730;margin-bottom:16px;letter-spacing:-.5px}
.precio{font-size:46px;font-weight:850;letter-spacing:-2.4px;line-height:1}
.moneda{font-size:17px;font-weight:600;color:var(--tinta3);vertical-align:super;margin-right:4px}
.plan-nota{font-size:13.5px;color:var(--tinta3);margin:8px 0 24px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:28px;flex:1}
.plan li{position:relative;padding-left:28px;font-size:15px;color:var(--tinta2)}
.plan li b{color:var(--tinta);font-weight:650}
.plan li::before{
  content:'';position:absolute;left:0;top:5px;width:18px;height:18px;
  border-radius:50%;background:rgba(18,140,126,.11);
}
.plan li::after{
  content:'';position:absolute;left:5px;top:10px;width:8px;height:4px;
  border-left:2px solid var(--verde);border-bottom:2px solid var(--verde);transform:rotate(-45deg);
}
.plan.destacado .btn-borde{border-color:rgba(250,247,242,.32);color:var(--papel)}
.plan.destacado .btn-borde:hover{background:rgba(250,247,242,.1);border-color:var(--papel)}

/* ── FAQ ── */
.faq{max-width:760px;margin:0 auto;border-top:1px solid var(--linea)}
details{border-bottom:1px solid var(--linea)}
summary{
  list-style:none;cursor:pointer;padding:22px 4px;font-weight:640;font-size:17px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  transition:color .22s;
}
summary:hover{color:var(--ambar)}
summary::-webkit-details-marker{display:none}
.mas{position:relative;width:15px;height:15px;flex-shrink:0}
.mas::before,.mas::after{content:'';position:absolute;background:var(--ambar);border-radius:2px;transition:transform .3s,opacity .3s}
.mas::before{top:6.5px;left:0;width:15px;height:2px}
.mas::after{left:6.5px;top:0;width:2px;height:15px}
details[open] .mas::after{transform:rotate(90deg);opacity:0}
details p{padding:0 4px 24px;color:var(--tinta2);font-size:15.5px;max-width:640px;animation:abre .35s ease}
@keyframes abre{from{opacity:0;transform:translateY(-8px)}}

/* ── Cierre ── */
.cierre{max-width:var(--ancho);margin:0 auto;padding:20px 34px 100px}
.cierre-caja{
  background:var(--tinta);color:var(--papel);border-radius:24px;
  padding:70px 44px;text-align:center;position:relative;overflow:hidden;
}
.cierre-caja::after{
  content:'';position:absolute;top:-50%;right:-14%;width:52%;height:200%;
  background:radial-gradient(circle,rgba(251,191,36,.14),transparent 62%);
}
.cierre-caja > *{position:relative;z-index:1}
.cierre-caja h2{color:var(--papel)}
.cierre-caja .trazo{color:#fbbf24}
.cierre-caja .trazo path{stroke:#fbbf24}
.cierre-caja p{color:rgba(250,247,242,.76);font-size:17.5px;margin-bottom:34px}
.cierre-caja .btn-borde{border-color:rgba(250,247,242,.34);color:var(--papel)}
.cierre-caja .btn-borde:hover{background:rgba(250,247,242,.1);border-color:var(--papel)}

/* ── Pie ── */
.pie{background:var(--papel2);border-top:1px solid var(--linea)}
.pie-arriba{
  max-width:var(--ancho);margin:0 auto;padding:52px 34px 36px;
  display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;
}
.pie-desc{color:var(--tinta3);font-size:14.5px;margin-top:14px;max-width:290px}
.pie-links{display:flex;flex-wrap:wrap;gap:14px 34px;font-size:15px;color:var(--tinta2);align-content:start}
.pie-links a:hover{color:var(--ambar)}
.pie-abajo{
  max-width:var(--ancho);margin:0 auto;padding:20px 34px 34px;
  border-top:1px solid var(--linea);font-size:13.5px;color:var(--tinta3);
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
}
.pie-legal{display:flex;gap:18px;flex-wrap:wrap}
.pie-legal a{
  color:var(--tinta3);text-decoration:none;transition:color .18s;
}
.pie-legal a:hover{color:var(--ambar)}

/* ══════════ Modal de inicio de sesion ══════════ */
.capa-login{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;
  background:rgba(27,26,23,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:apareceCapa .28s ease both;
}
.capa-login[hidden]{display:none}
@keyframes apareceCapa{from{opacity:0}}
.caja-login{
  background:var(--papel);border:1px solid var(--linea);border-radius:20px;
  padding:38px 34px 30px;width:100%;max-width:404px;position:relative;
  box-shadow:0 30px 70px rgba(27,26,23,.32);
  animation:subeCaja .4s cubic-bezier(.2,.8,.3,1.1) both;
}
@keyframes subeCaja{from{opacity:0;transform:translateY(22px) scale(.97)}}
.cerrar-login{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:9px;
  background:transparent;border:0;color:var(--tinta3);cursor:pointer;
  display:grid;place-items:center;transition:background .2s,color .2s;
}
.cerrar-login:hover{background:var(--papel2);color:var(--tinta)}
.login-marca{display:flex;justify-content:center;margin-bottom:18px}
.login-marca .logo{width:46px;height:46px;border-radius:13px;font-size:22px}
.caja-login h2{
  font-size:24px;font-weight:790;letter-spacing:-.9px;text-align:center;margin-bottom:7px;
}
.login-sub{font-size:14.5px;color:var(--tinta2);text-align:center;margin-bottom:26px}

.campo-login{margin-bottom:16px}
.campo-login label{display:block;font-size:13.5px;font-weight:650;margin-bottom:7px}
.campo-login input{
  width:100%;background:#fff;border:1.5px solid var(--linea);border-radius:10px;
  padding:13px 15px;font-size:15.5px;color:var(--tinta);font-family:inherit;outline:none;
  transition:border-color .22s,box-shadow .22s;
}
.campo-login input::placeholder{color:#b3aa9b}
.campo-login input:focus{border-color:var(--ambar);box-shadow:0 0 0 3.5px rgba(194,65,12,.11)}
.clave-caja{position:relative;display:flex;align-items:center}
.clave-caja input{padding-right:46px}
.ver-clave{
  position:absolute;right:6px;width:34px;height:34px;border-radius:8px;
  background:transparent;border:0;color:var(--tinta3);cursor:pointer;
  display:grid;place-items:center;transition:color .2s,background .2s;
}
.ver-clave:hover{color:var(--tinta);background:var(--papel2)}
.ver-clave.activo{color:var(--ambar)}

.login-error{
  background:rgba(220,38,38,.07);border:1px solid rgba(220,38,38,.24);
  color:#b91c1c;font-size:13.5px;border-radius:9px;padding:10px 13px;margin-bottom:14px;
  animation:tiemblaLogin .34s ease;
}
.login-error[hidden]{display:none}
@keyframes tiemblaLogin{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

#btnLogin{margin-top:6px}
#btnLogin[disabled]{opacity:.74;cursor:wait;transform:none!important}
.rueda-login{
  display:none;width:17px;height:17px;border-radius:50%;position:relative;z-index:1;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:gira .7s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}
#btnLogin.cargando .rueda-login{display:block}
#btnLogin.cargando .txt-btn{display:none}

.login-pie{
  font-size:13.5px;color:var(--tinta3);text-align:center;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--linea);
}
.login-pie a{color:var(--ambar);font-weight:620}
.login-pie a:hover{text-decoration:underline}

@media(max-width:480px){
  .caja-login{padding:32px 22px 26px;border-radius:16px}
}

/* ── Entradas ── */
.sube{animation:sube .85s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d,0ms)}
@keyframes sube{from{opacity:0;transform:translateY(26px)}}
.revelar{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--d,0ms);
}
.revelar.visto{opacity:1;transform:none}

@media(max-width:980px){
  .heroe{grid-template-columns:1fr;gap:70px;padding-top:34px}
  .chat-flota{left:auto;right:6px;bottom:-30px;width:255px}
  .nota-1{right:6px}.nota-2{display:none}
  .mosaico{grid-template-columns:repeat(2,1fr)}
  .cap.grande,.cap.ancha{grid-column:span 2;grid-template-columns:1fr}
  .paso-fila{grid-template-columns:1fr;gap:26px}
  .paso-fila.girada .paso-txt{order:0}
  .nosotros{grid-template-columns:1fr;gap:48px}
  .sello{left:auto;right:16px;bottom:-20px}
  .testis{grid-template-columns:1fr}
  .franja-in{grid-template-columns:repeat(2,1fr);gap:26px 22px}
  .fm:nth-child(2)::after{display:none}
}
@media(max-width:760px){
  .nav,.cab-btns{display:none}
  .hamburguesa{display:flex;margin-left:auto}
  .cabecera{padding:14px 20px}
  .seccion{padding:64px 20px}
  .mosaico{grid-template-columns:1fr}
  .cap.grande,.cap.ancha{grid-column:span 1}
  .planes{grid-template-columns:1fr}
  .heroe{padding:26px 20px 64px}
  .heroe-btns{flex-direction:column}
  .btn-grande,.heroe-btns .btn-borde{width:100%}
  .foto-heroe img{height:330px}
  .cierre-caja{padding:48px 24px}
  .chat-flota{position:relative;right:auto;bottom:auto;width:100%;margin-top:20px;animation:none}
  .nota{display:none}
  .franja-in{padding:26px 20px}
  .fm b{font-size:27px}
  .cap.grande .mini-chat{height:170px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .revelar{opacity:1;transform:none}
  .trazo path{stroke-dashoffset:0}
}

/* ═══════════ Héroe oscuro ═══════════
   Índigo profundo con halos y rejilla, en el espíritu de las referencias que
   pasó Henry. Va solo en el héroe: el resto de la página sigue en papel, y ese
   contraste es justo lo que hace que el inicio pese. */
.heroe-osc{
  position:relative;isolation:isolate;overflow:hidden;
  background:#221a52;color:#fff;
  padding-left:34px;padding-right:34px;padding-bottom:0;
  border-radius:0 0 30px 30px;
}
.heroe-fondo{position:absolute;inset:0;z-index:-1;pointer-events:none}
/* La rejilla: dos degradados repetidos, sin imagen que descargar */
.heroe-fondo::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0,#000 35%,transparent 78%);
  mask-image:radial-gradient(120% 80% at 50% 0,#000 35%,transparent 78%);
}
.halo{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55}
.halo-a{width:620px;height:620px;left:-160px;top:-220px;background:#5b3df0}
.halo-b{width:540px;height:540px;right:-140px;top:120px;background:#7c3aed}

.heroe-osc .pastilla{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#e6e2ff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.heroe-osc h1{color:#fff;letter-spacing:-.03em;line-height:1.04;margin-bottom:26px}
.h1-suave{color:#b9aef8}

.heroe-bullets{list-style:none;display:flex;flex-direction:column;gap:13px;margin:0 0 34px;padding:0}
.heroe-bullets li{
  display:flex;align-items:center;gap:13px;
  font-size:16.5px;color:#ddd8f5;line-height:1.35;
}
.hb-ico{
  width:38px;height:38px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#c3b8ff;
}
.hb-ico svg{width:19px;height:19px}

/* Botón blanco con halo, como el de LucidBot */
.btn-luz{
  display:inline-flex;align-items:center;gap:10px;background:#fff;color:#221a52;
  font-weight:750;font-size:16px;padding:15px 28px;border-radius:14px;
  box-shadow:0 0 0 4px rgba(124,58,237,.28),0 14px 34px rgba(91,61,240,.4);
  transition:transform .25s,box-shadow .25s;
}
.btn-luz:hover{transform:translateY(-2px);box-shadow:0 0 0 6px rgba(124,58,237,.34),0 18px 42px rgba(91,61,240,.5)}
.btn-luz svg{transition:transform .3s}
.btn-luz:hover svg{transform:translateX(4px)}
.btn-fantasma-osc{
  display:inline-flex;align-items:center;padding:15px 24px;border-radius:14px;font-weight:650;font-size:15.5px;
  color:#e6e2ff;border:1px solid rgba(255,255,255,.22);transition:background .25s,border-color .25s;
}
.btn-fantasma-osc:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.38)}

/* Marquesina de testimonios */
.tm-franja{grid-column:1/-1;margin-top:30px;padding-bottom:30px}
.tm-titulo{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin:0 0 16px;
}
/* Se difumina en los bordes para que las tarjetas no aparezcan cortadas de golpe */
.tm-pista{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.tm-tren{display:flex;gap:14px;width:max-content;animation:tmCorre 42s linear infinite}
.tm-pista:hover .tm-tren{animation-play-state:paused}
@keyframes tmCorre{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tm-card{
  width:290px;flex-shrink:0;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);border-radius:15px;padding:15px 16px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.tm-quien{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.tm-quien img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.tm-quien b{display:block;font-size:13px;color:#fff;line-height:1.2}
.tm-quien span{font-size:11px;color:rgba(255,255,255,.55)}
.tm-card p{font-size:13px;line-height:1.5;color:#d8d3f0;margin:0}

/* La cabecera, mientras está sobre el héroe oscuro */
.cabecera:not(.pegada){color:#fff}
.cabecera:not(.pegada) .nav a{color:rgba(255,255,255,.8)}
.cabecera:not(.pegada) .nav a:hover{color:#fff}
.cabecera:not(.pegada) .logo{background:#fff;color:#221a52}
.cabecera:not(.pegada) .btn-fantasma{color:#fff;border-color:rgba(255,255,255,.3)}
.cabecera:not(.pegada) .hamburguesa span{background:#fff}

@media (max-width:900px){
  .heroe-osc{border-radius:0 0 22px 22px;padding-left:20px;padding-right:20px}
  .heroe-bullets li{font-size:15px}
  .tm-franja{margin-top:40px}
}
/* Quien pide menos movimiento no ve la marquesina correr */
@media (prefers-reduced-motion:reduce){ .tm-tren{animation:none} }

/* El héroe rompe el ancho de 1200 y se va de borde a borde, pero su contenido
   sigue alineado con el resto de la página gracias al padding calculado.
   Además sube por detrás de la cabecera, que arriba es transparente. */
.heroe-osc{
  --cab:85px;
  max-width:none;
  margin-top:calc(-1 * var(--cab));
  padding:calc(var(--cab) + 46px) max(34px,calc((100% - var(--ancho))/2)) 0;
}
.heroe-osc > .heroe-txt,.heroe-osc > .heroe-arte{min-width:0}
/* El cuerpo del chat necesita alto propio: si queda en cero, el observador que
   arranca la animación nunca lo da por visible y el chat se queda mudo. */
.heroe-osc .chat-cuerpo{min-height:210px}
@media (max-width:900px){
  .heroe-osc{--cab:66px;padding-top:calc(var(--cab) + 30px)}
}