/* Lodestar v2 · sistema de diseño.
   Todo cuelga de #lp (compatible con GHL). Concepto: una estrella que llega de noche
   y da luz y calor. Lo frío (azul apagado) es el problema; lo cálido (oro) es el sistema. */

#lp {
  --noche: #05060a;
  --noche-2: #090b11;
  --panel: #0d0f16;
  --panel-2: #12151e;
  --filo: rgba(255, 240, 215, .09);
  --filo-2: rgba(255, 240, 215, .17);
  --txt: #f1ebe1;
  --txt-2: #b9b1a5;
  --txt-3: #8d867b;
  --oro: #e8b464;
  --oro-2: #f7d9a2;
  --oro-3: #c08a52;
  --brasa: #ff9f5a;
  --frio: #7d93ad;
  --frio-2: #4d5d72;
  --verde: #8fd6a8;
  --oro-suave: rgba(232, 180, 100, .12);
  --f-titulo: "Unbounded", "Sora", system-ui, sans-serif;
  --f-texto: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif: "Instrument Serif", Georgia, serif;
  --f-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;
  --ancho: 1180px;
  --gutter: 16px;
  --radio: 16px;
  --radio-s: 10px;
  --nav-alto: 64px;
  --sec-pad: clamp(88px, 12vw, 168px);
  --ease: cubic-bezier(.16, 1, .3, 1);

  background: var(--noche);
  color: var(--txt);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  position: relative;
  isolation: isolate; /* el cielo fijo (z-index -1) queda encima del fondo de #lp y debajo de todo lo demás */
}
#lp .cielo { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none }
@media (min-width: 760px) { #lp { --gutter: 32px; font-size: 17px } }

#lp *, #lp *::before, #lp *::after { box-sizing: border-box }
#lp img, #lp video, #lp canvas, #lp svg { display: block; max-width: 100% }
#lp a { color: inherit; text-decoration: none }
#lp p { margin: 0 0 1em }
#lp h1, #lp h2, #lp h3, #lp h4 { margin: 0; font-weight: 400 }
#lp ul { margin: 0; padding: 0; list-style: none }
#lp button { font: inherit; color: inherit; cursor: pointer }
#lp :focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 6px }
#lp .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
#lp .saltar { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--oro); color: var(--noche); padding: 10px 16px; border-radius: 999px; font-weight: 500 }
#lp .saltar:focus { top: 12px }

/* ---------- Contenedores y secciones ---------- */
#lp .cont { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter) }
#lp .sec { position: relative; padding: var(--sec-pad) 0; scroll-margin-top: var(--nav-alto) }
#lp .sec + .sec { border-top: 1px solid var(--filo) }
#lp .cab { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px) }
#lp .cab.centro { margin-left: auto; margin-right: auto; text-align: center }

/* ---------- Tipografía ---------- */
#lp .kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 400; letter-spacing: .02em; color: var(--oro);
  margin-bottom: 22px;
}
#lp .kicker .num { font-family: var(--f-mono); font-size: 13px; color: var(--txt-3) }
#lp .kicker::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .7 }
#lp .cab.centro .kicker::before { display: none }

#lp h1, #lp h2 {
  font-family: var(--f-titulo); font-weight: 300; letter-spacing: -.025em; line-height: 1.08;
  text-wrap: balance;
}
#lp h2 { font-size: clamp(1.85rem, 4.4vw, 3.3rem) }
#lp h2 em, #lp h1 em {
  font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.005em;
  color: var(--oro-2); font-size: 1.12em; line-height: 1;
}
#lp h3 { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(1.1rem, 1.6vw, 1.3rem); letter-spacing: -.01em; line-height: 1.25 }
#lp .entrada { font-size: clamp(1.02rem, 1.35vw, 1.16rem); color: var(--txt-2); max-width: 640px; margin-top: 22px }
#lp .entrada strong, #lp p strong { color: var(--txt); font-weight: 500 }
#lp .nota { font-size: 14px; color: var(--txt-3) }

/* ---------- Botones ---------- */
#lp .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 26px; border-radius: 999px;
  font-family: var(--f-texto); font-size: 15px; font-weight: 500; letter-spacing: .01em;
  border: 1px solid var(--filo-2); background: transparent; color: var(--txt);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  white-space: nowrap;
}
#lp .btn:hover { border-color: var(--oro); color: var(--oro-2) }
#lp .btn-prin {
  background: var(--oro); color: #1a1206; border-color: var(--oro);
  box-shadow: 0 0 0 0 rgba(232, 180, 100, 0), 0 10px 40px -12px rgba(232, 180, 100, .55);
}
#lp .btn-prin:hover { background: var(--oro-2); border-color: var(--oro-2); color: #1a1206; transform: translateY(-1px) }
#lp .btn .flecha { width: 16px; height: 16px; transition: transform .35s var(--ease) }
#lp .btn:hover .flecha { transform: translateX(3px) }
#lp .acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center }

/* ---------- Navegación ---------- */
#lp .nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
#lp .nav.solida { background: rgba(5, 6, 10, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--filo) }
#lp .nav-fila { display: flex; align-items: center; justify-content: space-between; height: var(--nav-alto); gap: 16px }
#lp .marca { display: inline-flex; align-items: center; gap: 8px; min-height: 44px }
#lp .marca img { width: auto }
#lp .marca-ojo { height: 30px; transition: filter .8s var(--ease) }
#lp .marca-palabra { height: 18px }
#lp .marca.encendida .marca-ojo { filter: drop-shadow(0 0 6px rgba(247, 217, 162, .55)) }
#lp .marca-pie, #lp .pie .marca-pie { display: inline-grid; justify-items: center; gap: 4px }
#lp .marca-pie .marca-simbolo { height: 112px }
#lp .marca-pie .marca-palabra { height: 22px }
#lp .nav-enlaces { display: none; gap: 4px }
#lp .nav-enlaces a { font-size: 14px; color: var(--txt-2); padding: 10px 12px; border-radius: 999px; transition: color .3s }
#lp .nav-enlaces a:hover, #lp .nav-enlaces a.activo { color: var(--txt) }
#lp .nav-enlaces a.activo { background: rgba(255, 240, 215, .05) }
#lp .nav .btn { min-height: 42px; padding: 0 18px; font-size: 14px }
/* Movil: tira deslizable bajo el logo, sin hamburguesa */
#lp .nav-tira { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--gutter) 8px; margin-top: -6px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent) ; mask-image: linear-gradient(90deg, #000 85%, transparent) }
#lp .nav-tira::-webkit-scrollbar { display: none }
#lp .nav-tira a { flex: none; font-size: 14px; color: var(--txt-2); padding: 10px 12px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px }
#lp .nav-tira a.activo { color: var(--txt); background: rgba(255, 240, 215, .06) }
@media (min-width: 1000px) {
  #lp .nav-enlaces { display: flex }
  #lp .nav-tira { display: none }
}
/* Con la tira de secciones, la barra mide ~112 px: los anclajes dejan ese hueco */
@media (max-width: 999px) { #lp .sec, #lp #demos { scroll-margin-top: 112px } }
/* En móvil el botón de la barra sobra: arriba está el del hero y después el CTA fijo de abajo */
@media (max-width: 639px) { #lp .nav-fila > .btn { display: none } }

/* ---------- Hero ---------- */
#lp .hero { position: relative; min-height: 100svh }
@media (min-width: 900px) { #lp .hero { height: 165svh } }
#lp .hero-escena { position: relative; height: 100svh; min-height: 620px; overflow: hidden }
@media (min-width: 900px) { #lp .hero-escena { position: sticky; top: 0 } }
#lp .hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none }
#lp .hero-cielo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 50% 26%, rgba(247, 217, 162, .20), transparent 70%),
    radial-gradient(ellipse 120% 70% at 50% 110%, rgba(232, 180, 100, .10), transparent 60%),
    var(--noche);
}
#lp .hero-cielo::after { /* estrella estatica: sin JS o sin WebGL */
  content: ""; position: absolute; left: 50%; top: 26%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #fff8ea; box-shadow: 0 0 18px 6px rgba(255, 236, 200, .9), 0 0 80px 30px rgba(232, 180, 100, .35), 0 0 220px 90px rgba(232, 180, 100, .12);
}
#lp.gl .hero-cielo { opacity: 0 }
@media (min-width: 900px) { #lp .hero-cielo::after { top: 30% } }
/* El cielo del hero se funde por abajo con el cielo fijo de toda la página (cielo.js), sin franja */
#lp .hero-cielo, #lp #estrella-gl {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 20vh), transparent);
  mask-image: linear-gradient(#000 calc(100% - 20vh), transparent);
}
#lp .hero-texto {
  position: absolute; left: 0; right: 0; bottom: max(8svh, 56px); z-index: 2;
  text-align: center; padding: 0 var(--gutter);
}
#lp .hero .kicker { color: var(--oro-2) }
#lp .hero .kicker::before { display: none }
#lp .hero h1 { font-size: clamp(2.15rem, 6.6vw, 5.2rem); max-width: 14ch; margin: 0 auto }
#lp .hero .entrada { margin: 22px auto 0; max-width: 620px }
#lp .hero .acciones { justify-content: center; margin-top: 30px }
#lp .hero-frentes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 28px; font-size: 14px; color: var(--txt-3) }
#lp .hero-frentes a { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; transition: color .3s }
#lp .hero-frentes a:hover { color: var(--oro-2) }
#lp .hero-frentes a::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--oro); opacity: .8 }
/* Calor: el JS de la estrella mueve --calor de 0 a 1 cuando llega. Sin JS queda en 1. */
#lp .hero-texto { --calor: 1 }
#lp.gl .hero-texto { --calor: 0 }
#lp.gl .hero-texto > * {
  opacity: calc(.18 + var(--calor) * .82);
  transform: translateY(calc((1 - var(--calor)) * 14px));
  filter: blur(calc((1 - var(--calor)) * 4px));
}
#lp.gl .hero-texto > *:nth-child(2) { transition-delay: .05s }
#lp .hero-desliza { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 1px; height: 36px; background: linear-gradient(var(--oro), transparent); opacity: .6; z-index: 2 }
@media (max-width: 899px) { #lp .hero-desliza { display: none } }
@media (max-width: 899px) {
  #lp .hero-texto { bottom: 40px }
  #lp .hero .entrada { font-size: 1rem }
}

/* ---------- Cuatro frentes (la luz llega a cuatro puntos) ---------- */
#lp .frentes { position: relative }
#lp .frentes-mapa { position: relative; display: grid; gap: 14px }
#lp .frentes-mapa svg.rayos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible }
#lp .rayo { fill: none; stroke: url(#grad-rayo); stroke-width: 1; stroke-dasharray: var(--largo, 600); stroke-dashoffset: calc(var(--largo, 600) * (1 - var(--p, 1))) }
#lp .frente {
  position: relative; display: grid; gap: 10px; padding: 26px 24px 24px; border: 1px solid var(--filo); border-radius: var(--radio);
  background: linear-gradient(180deg, rgba(255, 240, 215, .025), transparent 70%), var(--noche-2);
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
#lp .frente:hover { border-color: rgba(232, 180, 100, .4) }
#lp .frente .n { font-family: var(--f-mono); font-size: 13px; color: var(--oro) }
#lp .frente h3 { font-size: 1.22rem }
#lp .frente p { margin: 0; color: var(--txt-2); font-size: 15px }
#lp .frente .ir { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; color: var(--oro-2); min-height: 44px }
#lp .frentes-nucleo { display: none }
@media (min-width: 900px) {
  #lp .frentes-mapa { grid-template-columns: 1fr 200px 1fr; grid-template-rows: auto auto; gap: 28px 0; align-items: center }
  #lp .frente:nth-of-type(1) { grid-column: 1; grid-row: 1 }
  #lp .frente:nth-of-type(2) { grid-column: 3; grid-row: 1 }
  #lp .frente:nth-of-type(3) { grid-column: 1; grid-row: 2 }
  #lp .frente:nth-of-type(4) { grid-column: 3; grid-row: 2 }
  #lp .frentes-nucleo { display: block; grid-column: 2; grid-row: 1 / span 2; justify-self: center; position: relative; width: 14px; height: 14px; border-radius: 50%; background: #fff6e4;
    box-shadow: 0 0 14px 4px rgba(255, 236, 200, .85), 0 0 70px 26px rgba(232, 180, 100, .28) }
}
@media (max-width: 899px) {
  #lp .frentes-mapa { padding-left: 22px }
  #lp .frentes-mapa::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(var(--oro), rgba(232, 180, 100, .1)); transform-origin: top; transform: scaleY(var(--p, 1)) }
  #lp .frente::before { content: ""; position: absolute; left: -22px; top: 32px; width: 9px; height: 9px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 12px rgba(232, 180, 100, .8); transform: translateX(-0px) }
}

/* ---------- Problema: el embudo que se rompe (escena en escena-patron.*) ---------- */
#lp .cita {
  margin: clamp(48px, 7vw, 80px) auto 0; max-width: 860px; text-align: center;
  font-family: var(--f-serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.25; color: var(--txt);
}
#lp .cita span { color: var(--oro-2) }

/* ---------- Bloques de servicio ---------- */
#lp .servicio { display: grid; gap: clamp(40px, 6vw, 72px); align-items: start }
@media (min-width: 1000px) {
  #lp .servicio { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) }
  #lp .servicio.reves { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) }
  #lp .servicio.reves .servicio-texto { order: 2 }
  #lp .servicio-texto { position: sticky; top: calc(var(--nav-alto) + 40px) }
}
#lp .servicio-texto h2 { font-size: clamp(1.85rem, 3.3vw, 2.65rem) }
#lp .lista-check { display: grid; gap: 12px; margin-top: 28px }
#lp .lista-check li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 15px; color: var(--txt-2); line-height: 1.5 }
#lp .lista-check li::before {
  content: ""; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(232, 180, 100, .45);
  background: radial-gradient(circle, var(--oro) 0 2.5px, transparent 3px); margin-top: 1px;
}
#lp .servicio .acciones { margin-top: 32px }
#lp .escena {
  position: relative; border: 1px solid var(--filo); border-radius: calc(var(--radio) + 4px);
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232, 180, 100, .06), transparent 70%), var(--noche-2);
  overflow: hidden; min-height: 420px;
}
#lp .escena-sinjs { padding: 28px; color: var(--txt-2); font-size: 15px }
#lp .escena-pie { margin-top: 14px; font-size: 14px; color: var(--txt-3) }

/* ---------- Piezas de demo (vídeos) ---------- */
#lp .piezas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 72%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--filo-2) transparent }
@media (min-width: 760px) { #lp .piezas { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible } }
@media (min-width: 1100px) { #lp .piezas { grid-template-columns: repeat(5, 1fr) } }
#lp .usos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px }
#lp .usos li { padding: 7px 14px; border: 1px solid var(--filo-2); border-radius: 999px; font-size: 14px; color: var(--txt-2); background: rgba(9, 11, 17, .6) }
#lp .usos li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 9px 2px 0; border-radius: 50%; background: var(--oro); vertical-align: middle }
#lp .pieza { scroll-snap-align: start; display: grid; gap: 10px }
#lp .pieza-marco { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--filo); background: var(--panel) }
#lp .pieza-marco video, #lp .pieza-marco img { width: 100%; height: 100%; object-fit: cover }
#lp .pieza h3 { font-size: 15px; font-family: var(--f-texto); font-weight: 500; letter-spacing: 0 }
#lp .pieza p { margin: 0; font-size: 14px; color: var(--txt-3) }

/* ---------- Casos (cargando) ---------- */
#lp .casos { display: grid; gap: 14px }
@media (min-width: 900px) { #lp .casos { grid-template-columns: repeat(3, 1fr) } }
#lp .caso { border: 1px solid var(--filo); border-radius: var(--radio); padding: 22px; background: var(--noche-2); display: grid; gap: 14px }
#lp .esq { height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(255, 240, 215, .05) 0%, rgba(255, 240, 215, .11) 40%, rgba(255, 240, 215, .05) 80%); background-size: 260% 100%; animation: lp-brillo 1.8s linear infinite }
#lp .esq.img { height: auto; aspect-ratio: 16 / 10; border-radius: var(--radio-s) }
#lp .esq.cifra { height: 34px; width: 46% }
#lp .esq.c70 { width: 70% } #lp .esq.c50 { width: 50% } #lp .esq.c85 { width: 85% }
@keyframes lp-brillo { from { background-position: 130% 0 } to { background-position: -130% 0 } }
#lp .cargando { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-size: 14px; color: var(--txt-3); justify-content: center }
#lp .cargando-barra { width: 160px; height: 2px; background: var(--filo); border-radius: 2px; overflow: hidden; position: relative }
#lp .cargando-barra::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--oro); animation: lp-carga 2.4s var(--ease) infinite }
@keyframes lp-carga { 0% { transform: translateX(-100%) } 100% { transform: translateX(260%) } }

/* ---------- Método: constelación ---------- */
#lp .ruta { position: relative; display: grid; gap: 18px; padding-left: 34px }
#lp .ruta::before { content: ""; position: absolute; left: 9px; top: 14px; bottom: 14px; width: 1px; background: var(--filo) }
#lp .ruta-linea { position: absolute; left: 9px; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(var(--oro-2), var(--oro)); transform-origin: top; transform: scaleY(var(--p, 1)) }
#lp .fase { position: relative; padding: 24px 24px 22px; border: 1px solid var(--filo); border-radius: var(--radio); background: var(--noche-2) }
#lp .fase-estrella { position: absolute; left: -31px; top: 28px; width: 13px; height: 13px; border-radius: 50%; background: var(--noche); border: 1px solid var(--oro); transition: background .5s, box-shadow .5s }
#lp .fase.viva .fase-estrella { background: #fff4de; box-shadow: 0 0 12px 3px rgba(247, 217, 162, .75), 0 0 40px 10px rgba(232, 180, 100, .25) }
#lp .fase .n { font-family: var(--f-mono); font-size: 13px; color: var(--oro) }
#lp .fase h3 { margin: 8px 0 10px }
#lp .fase p { margin: 0 0 12px; color: var(--txt-2); font-size: 15px }
#lp .fase .logro { margin: 0; font-size: 14px; color: var(--oro-2); padding-top: 12px; border-top: 1px solid var(--filo) }
@media (min-width: 1000px) {
  #lp .ruta { grid-template-columns: repeat(4, 1fr); padding-left: 0; padding-top: 40px; gap: 14px }
  #lp .ruta::before, #lp .ruta-linea { left: 12px; right: 12px; top: 6px; bottom: auto; width: auto; height: 1px }
  #lp .ruta-linea { transform-origin: left; transform: scaleX(var(--p, 1)); background: linear-gradient(90deg, var(--oro-2), var(--oro)) }
  #lp .fase-estrella { left: 22px; top: -40px }
}

/* ---------- Diferencias (por qué) ---------- */
#lp .porque { display: grid; gap: 14px }
@media (min-width: 900px) { #lp .porque { grid-template-columns: repeat(2, 1fr) } }
#lp .porque .card { padding: 28px 26px; border: 1px solid var(--filo); border-radius: var(--radio); background: var(--noche-2); overflow: hidden }
#lp .porque .card .sub { font-size: 14px; color: var(--oro); margin-bottom: 8px }
#lp .porque .card p { margin: 10px 0 0; color: var(--txt-2); font-size: 15px }

/* ---------- Equipo ---------- */
#lp .equipo { display: grid; gap: 14px }
@media (min-width: 900px) { #lp .equipo { grid-template-columns: 1fr 1fr 1.3fr } }
#lp .persona { border: 1px solid var(--filo); border-radius: var(--radio); overflow: hidden; background: var(--noche-2); display: grid; grid-template-rows: auto 1fr }
/* height:auto obligatorio: sin él manda el height="720" del HTML y la foto mide 720 px de alto */
#lp .persona img { width: 100%; height: auto; object-fit: cover; object-position: 50% 30%; filter: saturate(.92) }
#lp .persona.ancha img { aspect-ratio: 2 / 1; object-position: 50% 42% }
#lp .persona-txt { padding: 22px 22px 24px }
#lp .persona .rol { font-size: 14px; color: var(--oro); margin: 6px 0 10px }
#lp .persona p { margin: 0; color: var(--txt-2); font-size: 15px }
/* Móvil: los tres en un solo panel, una fila por persona con filo de 1 px entre filas (Luis 27/10: fotos pequeñas y
   compactas). Retrato pequeño junto al nombre y el rol; la bio, debajo a todo el ancho. */
@media (max-width: 899px) {
  #lp .equipo { gap: 0; max-width: 560px; margin-inline: auto; border: 1px solid var(--filo); border-radius: var(--radio); background: var(--noche-2); overflow: hidden }
  #lp .persona { border: 0; border-radius: 0; background: none; overflow: visible; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 16px; align-items: center; padding: 20px 20px 22px }
  #lp .persona + .persona { border-top: 1px solid var(--filo) }
  #lp.mov .equipo .persona { transform: none; opacity: 1 }   /* dentro de un panel, filas quietas: la entrada girada abría huecos entre ellas */
  #lp .persona img, #lp .persona.ancha img { grid-row: 1 / span 2; width: 72px; height: 72px; aspect-ratio: 1; border-radius: var(--radio-s) }
  #lp .persona img { object-position: 50% 24% }
  #lp .persona.ancha img { object-position: 52% 40% }
  #lp .persona .persona-txt { display: contents }
  #lp .persona h3 { align-self: end }
  #lp .persona .rol { align-self: start; margin: 4px 0 0 }
  #lp .persona p:not(.rol) { grid-column: 1 / -1; margin-top: 14px }
}
/* Escritorio: las tres fotos a la misma altura */
@media (min-width: 900px) { #lp .persona img, #lp .persona.ancha img { aspect-ratio: auto; height: 220px } }

/* ---------- Encaja ---------- */
#lp .encaja { display: grid; gap: 14px }
@media (min-width: 900px) { #lp .encaja { grid-template-columns: 1fr 1fr } }
#lp .encaja > div { border: 1px solid var(--filo); border-radius: var(--radio); padding: 28px 26px; background: var(--noche-2) }
#lp .encaja h3 { margin-bottom: 18px }
#lp .encaja li { position: relative; padding-left: 26px; margin-bottom: 12px; color: var(--txt-2); font-size: 15px }
#lp .encaja .si li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 10px rgba(232, 180, 100, .7) }
#lp .encaja .no li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--frio) }
#lp .encaja .no h3 { color: var(--txt-2) }

/* ---------- Dudas ---------- */
#lp .dudas { display: grid; gap: clamp(32px, 5vw, 64px) }
@media (min-width: 1000px) { #lp .dudas { grid-template-columns: 4fr 7fr } #lp .dudas .cab { position: sticky; top: calc(var(--nav-alto) + 40px); align-self: start } }
#lp details { border-top: 1px solid var(--filo) }
#lp details:last-child { border-bottom: 1px solid var(--filo) }
#lp summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; min-height: 44px; font-size: 1.05rem; font-weight: 400; cursor: pointer }
#lp summary::-webkit-details-marker { display: none }
#lp summary .mas { flex: none; width: 28px; height: 28px; border: 1px solid var(--filo-2); border-radius: 50%; position: relative; transition: transform .4s var(--ease), border-color .3s }
#lp summary .mas::before, #lp summary .mas::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1px; background: var(--oro); transform: translate(-50%, -50%) }
#lp summary .mas::after { transform: translate(-50%, -50%) rotate(90deg) }
#lp details[open] summary .mas { transform: rotate(45deg); border-color: var(--oro) }
#lp details .resp { padding: 0 0 24px; color: var(--txt-2); font-size: 15px; max-width: 680px }

/* ---------- Agenda ---------- */
#lp .agenda-sec { background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(232, 180, 100, .09), transparent 70%) }
#lp .agenda-grid { display: grid; gap: clamp(32px, 5vw, 64px) }
@media (min-width: 1000px) { #lp .agenda-grid { grid-template-columns: 5fr 7fr; align-items: start } }
#lp .agenda-pasos { display: grid; gap: 14px; margin-top: 30px; counter-reset: p }
#lp .agenda-pasos li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: baseline; color: var(--txt-2); font-size: 15px }
#lp .agenda-pasos li::before { counter-increment: p; content: counter(p); font-family: var(--f-mono); font-size: 13px; color: var(--oro); width: 32px; height: 32px; border: 1px solid var(--filo-2); border-radius: 50%; display: grid; place-items: center }
#lp .agenda-app { min-height: 520px }

/* ---------- Pie ---------- */
#lp .pie { padding: 56px 0 120px; border-top: 1px solid var(--filo); font-size: 14px; color: var(--txt-3) }
@media (min-width: 640px) { #lp .pie { padding-bottom: 56px } }
#lp .pie-fila { display: flex; flex-wrap: wrap; gap: 18px 32px; justify-content: space-between; align-items: center }
#lp .pie a { color: var(--txt-2); min-height: 44px; display: inline-flex; align-items: center }
#lp .pie a:hover { color: var(--oro-2) }
#lp .pie-enlaces { display: flex; flex-wrap: wrap; gap: 4px 22px }

/* ---------- CTA fijo en móvil ---------- */
#lp .fijo {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 80;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 18px; border-radius: 999px; border: 1px solid var(--filo-2);
  background: rgba(9, 11, 17, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transform: translateY(140%); transition: transform .5s var(--ease);
  font-size: 14px; color: var(--txt-2);
}
#lp .fijo.visible { transform: none }
#lp .fijo .btn { min-height: 44px; padding: 0 18px; font-size: 14px }
@media (min-width: 640px) { #lp .fijo { display: none } }

/* ---------- Entradas sin scroll-link (red de seguridad general) ---------- */
#lp.js [data-aparece] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease) }
#lp.js [data-aparece].visto { opacity: 1; transform: none }