/* ============================================================
   SHOWLY · Landing pública
   Se pinta dentro de la pantalla de acceso, así que hereda la paleta y las
   fuentes de styles.css. Aquí solo va lo propio de la página de venta.
   ============================================================ */

.landing{max-width:1040px;margin:0 auto;overflow-x:hidden}
.landing .grid-2{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.landing .grid-3{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.lp-sec{margin:64px 0}
.lp-h{font-family:'Anton';font-size:clamp(26px,4.2vw,40px);text-transform:uppercase;letter-spacing:.01em;line-height:1.05;margin-bottom:10px}
.lp-sub{color:var(--gris);font-size:16px;max-width:62ch;margin-bottom:22px;line-height:1.6}
.lp-nota{color:var(--gris);margin-top:16px;line-height:1.6}

/* ---------- hero ---------- */
.lp-hero{text-align:center;padding:34px 0 8px;position:relative;isolation:isolate}
/* el anillo de partículas va detrás de todo y no roba el ratón: los botones
   siguen siendo botones */
/* Máscara en corona: el centro se vacía para que las partículas no crucen por
   detrás del logo (su PNG lleva fondo negro y las tapaba) ni ensucien la
   lectura del claim. Solo se ven rodeando el bloque. */
.lp-fondo{position:absolute;inset:-70px -20px -30px;z-index:-1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:radial-gradient(closest-side circle at 50% 46%,transparent 34%,#000 62%,#000 82%,transparent 100%);
  mask-image:radial-gradient(closest-side circle at 50% 46%,transparent 34%,#000 62%,#000 82%,transparent 100%)}
.ag-canvas{display:block;width:100%;height:100%}
.lp-hero > *:not(.lp-fondo){position:relative}
/* el logo actual lleva el fondo negro dentro del PNG; screen lo funde con la
   página hasta que haya una versión con transparencia */
.lp-logo{width:min(280px,72vw);margin:0 auto 18px;display:block;mix-blend-mode:screen}
.lp-claim{font-family:'Anton';font-size:clamp(30px,6vw,58px);text-transform:uppercase;line-height:1;letter-spacing:.01em;
  background:linear-gradient(180deg,var(--blanco),var(--lima));-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-lead{color:var(--gris);font-size:clamp(15px,2vw,18px);line-height:1.65;max-width:60ch;margin:16px auto 0}
.lp-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.lp-cta .btn{padding:14px 22px;font-size:15px}
.lp-nota-cta{color:var(--gris);margin-top:12px}

/* ---------- dolores ---------- */
.lp-dolor-card{border-left:3px solid var(--lima)}
.lp-frase{font-family:'Oswald';font-size:19px;color:var(--blanco);margin-bottom:6px;line-height:1.3}

/* ---------- escenario ---------- */
.lp-escena{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#000;box-shadow:var(--shadow)}
.lp-video,.lp-escena img{display:block;width:100%;height:auto}
.lp-tres{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));color:var(--gris);font-size:14px}
.lp-tres b{color:var(--lima);font-family:'Oswald';text-transform:uppercase;font-size:13px;letter-spacing:.04em}

/* ---------- pasos ---------- */
.lp-paso{position:relative;padding-top:26px}
.lp-num{position:absolute;top:-14px;left:18px;width:34px;height:34px;border-radius:50%;background:var(--lima);color:#111;
  font-family:'Anton';font-size:18px;display:flex;align-items:center;justify-content:center}

/* ---------- carrusel de pantallas ---------- */
.lp-carrusel{position:relative}
/* scroll nativo + snap: en el teléfono se pasa con el dedo sin código */
.car-pista{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding:2px;border-radius:var(--r)}
.car-pista::-webkit-scrollbar{display:none}
.car-pista:focus-visible{outline:2px solid var(--lima);outline-offset:4px}
.car-lamina{flex:0 0 100%;scroll-snap-align:start;margin:0;display:grid;gap:20px;align-items:center;
  grid-template-columns:minmax(0,320px) minmax(0,1fr)}
.car-lamina figcaption h3{font-family:'Anton';font-size:clamp(20px,2.6vw,28px);text-transform:uppercase;
  letter-spacing:.01em;margin-bottom:8px}
.car-lamina figcaption p{font-size:15px;line-height:1.65;max-width:46ch}
/* los controles van debajo, no flotando sobre la captura: encima tapaban justo
   los totales del setlist */
.car-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px}
.car-flecha{width:40px;height:40px;border-radius:50%;background:var(--panel);border:1px solid var(--line);
  color:var(--blanco);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.car-flecha:hover{border-color:var(--lima);color:var(--lima)}
.car-puntos{display:flex;gap:8px;justify-content:center}
.car-punto{width:8px;height:8px;padding:0;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer}
.car-punto.on{background:var(--lima);border-color:var(--lima);transform:scale(1.25)}
@media (max-width:760px){ .car-lamina{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .car-pista{scroll-behavior:auto} }

/* ---------- pantallas ---------- */
/* dos columnas en pantalla grande: con cuatro capturas, tres columnas dejan una
   suelta y un hueco enorme al lado */
/* min() es imprescindible: un mínimo de 420px suelto desborda la página entera
   en un móvil de 412 y corta TODAS las secciones por la derecha */
/* align-items:start, si no las dos figuras se estiran a la misma altura y la
   más corta queda con un rectángulo negro debajo de la captura */
.lp-pantallas{display:grid;gap:26px;align-items:start;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.lp-pantalla{margin:0}
/* Las capturas se muestran ENTERAS. Recortarlas aquí con object-fit dejaba una
   fila o un botón partido por la mitad; el encuadre se decide al generarlas
   (scratchpad/capturas.js), donde se puede cortar entre filas. */
.lp-marco{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#0b0b0b;box-shadow:var(--shadow)}
.lp-marco img{display:block;width:100%;height:auto}
.lp-pantalla figcaption{padding:14px 2px 0}
.lp-pantalla h3{font-family:'Oswald';text-transform:uppercase;font-size:16px;letter-spacing:.03em;margin-bottom:4px}

/* ---------- precios ---------- */
.lp-plan{position:relative;display:flex;flex-direction:column;gap:8px}
.lp-plan-top{border-color:var(--lima);box-shadow:0 0 0 1px var(--lima-dim),var(--shadow)}
.lp-plan .plan-lista{margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}

/* ---------- origen y faq ---------- */
.lp-origen .card{border-left:3px solid var(--lima)}
.lp-origen p{color:var(--gris);line-height:1.7;margin-top:10px;max-width:70ch}
.lp-origen b{color:var(--blanco)}
.lp-faq summary{font-family:'Oswald';font-size:16px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px;align-items:center}
.lp-faq summary::after{content:"+";color:var(--lima);font-family:'Anton';font-size:26px;line-height:1;flex:none}
.lp-faq details[open] summary::after{content:"–"}
.lp-faq p{margin-top:10px;line-height:1.6}

/* ---------- manual (dentro de la app) ---------- */
.man-indice{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 18px}
.man-indice a{font-family:'Oswald';text-transform:uppercase;font-size:12px;letter-spacing:.05em;color:var(--gris);
  border:1px solid var(--line);border-radius:20px;padding:6px 13px}
.man-indice a:hover{border-color:var(--lima);color:var(--blanco)}
.man-tema{margin-bottom:14px;scroll-margin-top:80px}
.man-con-img{display:grid;gap:18px;grid-template-columns:minmax(0,1fr) minmax(0,300px);align-items:start}
.man-shot{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0b0b0b}
.man-shot img{display:block;width:100%;height:auto}
@media (max-width:760px){ .man-con-img{grid-template-columns:1fr} }
.man-tema h3{font-family:'Oswald';text-transform:uppercase;font-size:17px;letter-spacing:.03em;color:var(--lima);margin-bottom:10px}
.man-tema p{color:var(--gris);line-height:1.7;margin-bottom:8px;max-width:76ch}
.man-tema b{color:var(--blanco)}
.man-tip{border-left:2px solid var(--lima);padding-left:12px;margin-top:12px;color:var(--blanco)!important;font-size:14px}
.man-ayuda{margin-top:22px;text-align:center}
.man-ayuda .btn{margin-top:12px}

/* ---------- cierre ---------- */
.lp-final{text-align:center;border-top:1px solid var(--line);padding-top:44px}
.lp-final .lp-sub{margin-left:auto;margin-right:auto}
.lp-mail{color:var(--lima)}

@media (max-width:640px){
  .lp-sec{margin:46px 0}
  .lp-marco{max-height:360px}
}
.man-extra{border-left:2px solid var(--line);padding-left:12px;margin-top:8px;font-size:13.5px}