/* Páginas interiores de ghostcreativa.com (servicios, plataforma, academia).
   Mismo lenguaje que el viaje de la portada (prueba-scroll): Geist, azul noche, ámbar en las palabras clave,
   botones de borde rojo con brillo, cabecera en isla de cristal y tarjetas de cristal sobre las nubes. */
:root { --rojo: #D11B26; --ambar: #ffcf8a; --gris: #9aa3b5; --noche: #070a14; --tinta: #0c1120; --borde: rgba(255,214,160,.22); --ancho: 72rem; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; background: var(--noche); color: #fff; font-family: "Geist", system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--noche); line-height: 1.5; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: rgba(209,27,38,.5); }

/* ── Cabecera en isla (la misma de la portada) ── */
/* anti-slop-ok: el cliente pidió la cabecera «estilo isla con bordes redondeados y liquid glass» (2026-10-06) */
.cab { position: fixed; top: 14px; left: 0; right: 0; z-index: 20; display: flex; justify-content: center; padding: 0 1rem; pointer-events: none; }
.isla { pointer-events: auto; display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.4rem); padding: .55rem .6rem .55rem 1.2rem; border-radius: 999px;
        background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
        border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.35); }
.marca { color: #fff; display: block; line-height: 0; } .logo { height: 22px; width: auto; }
.isla nav { display: flex; gap: 1.6rem; font-size: .9rem; } .isla nav a { color: #e6e9f2; text-decoration: none; } .isla nav a:hover, .isla nav a[aria-current] { color: var(--ambar); }
.pill { background: var(--rojo); color: #fff; text-decoration: none; padding: .5rem 1.05rem; border-radius: 999px; font-size: .85rem; box-shadow: 0 0 18px rgba(209,27,38,.45); white-space: nowrap; }

/* ── Botones ── */
.boton { display: inline-flex; align-items: center; gap: .55rem; width: max-content; padding: .72rem 1.4rem; border: 1px solid var(--rojo); border-radius: 999px; text-decoration: none;
         font-weight: 500; color: var(--ambar); background: rgba(8,10,20,.3); box-shadow: 0 0 22px rgba(209,27,38,.45); transition: background .25s, box-shadow .25s; }
.boton:hover { background: rgba(209,27,38,.18); box-shadow: 0 0 30px rgba(209,27,38,.6); }
.boton--lleno { background: var(--rojo); color: #fff; } .boton--lleno:hover { background: #e2232f; }
.boton svg { width: 18px; height: 18px; }

/* ── Portada de cada página: el mismo bucle del viaje, de fondo ── */
.portada { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.portada video, .portada > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.portada::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--noche) 0%, rgba(7,10,20,.82) 22%, rgba(7,10,20,.25) 55%, rgba(7,10,20,.35) 100%); }
.portada__texto { width: min(var(--ancho), 100%); margin: 0 auto; padding: 0 clamp(16px, 5vw, 3rem) clamp(3rem, 9svh, 6rem); display: grid; gap: 1.1rem; justify-items: start; }
.ceja { margin: 0; font: 500 .75rem "Geist Mono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--ambar); }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: .98; letter-spacing: -.04em; max-width: 14ch; text-shadow: 0 2px 30px rgba(0,0,0,.5); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1; letter-spacing: -.035em; }
h3 { font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.2; }
em { font-style: normal; color: var(--ambar); }
.bajada { margin: 0; max-width: 36rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: #d8dce6; }
.datos { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 .4rem; padding: 0; list-style: none; }
.datos li { padding: .35rem .85rem; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; font-size: .88rem; background: rgba(8,10,20,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* ── Estaciones: como en la portada, una idea por pantalla sobre una imagen del mismo mundo ── */
.estacion { position: relative; min-height: 72svh; display: grid; align-content: center; justify-items: center; gap: clamp(1.6rem, 4vw, 2.6rem); padding: clamp(5rem, 12svh, 8rem) clamp(16px, 5vw, 3rem); text-align: center; overflow: hidden; isolation: isolate; }
.estacion > .fondo { position: absolute; inset: 0; z-index: -2; background: center / cover no-repeat; }
.estacion::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--noche) 0%, rgba(7,10,20,.55) 18%, rgba(7,10,20,.45) 70%, var(--noche) 100%); }
.estacion h2 { max-width: 18ch; }
.estacion .bajada { margin: 0 auto; }
.estacion--lisa::after { background: none; }
/* la línea de tiempo de la portada: clips con su código de tiempo y un cabezal */
.pista { position: relative; width: min(60rem, 100%); display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; padding-top: 1.9rem; text-align: left; }
.pista::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; opacity: .5; background: repeating-linear-gradient(90deg, rgba(255,255,255,.45) 0 1px, transparent 1px 14px); }
.clip { position: relative; padding: 1rem 1.1rem 1.15rem; border-radius: 14px; background: rgba(12,14,24,.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--borde); display: grid; gap: .35rem; align-content: start; }
.clip i { position: absolute; top: -1.75rem; left: 0; font: normal .68rem "Geist Mono", monospace; color: var(--gris); }
.clip b { font-weight: 600; font-size: 1.05rem; }
.clip span { color: #c9cfdb; font-size: .92rem; }
.clip.on { border-color: rgba(209,27,38,.8); box-shadow: 0 0 24px rgba(209,27,38,.3); }
@media (max-width: 760px) { .pista { grid-template-columns: 1fr; gap: 2.2rem; padding-top: 0; } .pista::before { display: none; } .clip i { position: static; } }

/* ── Secciones ── */
.seccion { width: min(var(--ancho), 100%); margin: 0 auto; padding: clamp(4rem, 10vw, 7.5rem) clamp(16px, 5vw, 3rem) 0; }
.seccion__cab { display: grid; gap: .9rem; margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 44rem; }
.seccion__cab p:not(.etiqueta) { margin: 0; color: var(--gris); font-size: 1.05rem; }
.vidrio { border-radius: 22px; background: rgba(12,14,24,.6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--borde); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.lista { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.lista li { position: relative; padding-left: 1.2rem; color: #d8dce6; font-size: .95rem; }
.lista li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 8px rgba(255,207,138,.7); }
.mono { font-family: "Geist Mono", ui-monospace, monospace; }
.aviso { margin: 1.4rem 0 0; color: var(--gris); font-size: .9rem; max-width: 46rem; }

/* ── Cierre: el cielo de «Hablemos» con el botón de WhatsApp ── */
.cierre { position: relative; margin-top: clamp(5rem, 12vw, 9rem); padding: clamp(5rem, 14vw, 9rem) clamp(16px, 5vw, 3rem) 2rem; text-align: center; overflow: hidden; isolation: isolate;
          background: linear-gradient(180deg, var(--noche) 0%, transparent 30%), url(../tramo7/cielo.webp) center top / cover no-repeat; }
.cierre::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(7,10,20,.9), rgba(7,10,20,.35) 60%, transparent); }
.cierre h2 { margin: 0 auto; max-width: 16ch; }
.cierre p { margin: 1rem auto 1.6rem; max-width: 30rem; color: #d8dce6; }
.cierre .boton { margin: 0 auto; }
/* ── Prerregistro de Narra y Crea, en el cierre de /academia: una tarjeta de cristal sobre el cielo ── */
.registro, .registro__listo { width: min(34rem, 100%); margin: 0 auto; padding: clamp(1.4rem, 4vw, 2.2rem); border-radius: 28px; text-align: left;
  background: linear-gradient(160deg, rgba(27,20,32,.88), rgba(13,16,32,.88)); border: 1px solid rgba(255,214,160,.3); box-shadow: 0 40px 60px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.registro { display: grid; gap: 1.1rem; }
.registro[hidden], .registro__listo[hidden], .registro__fallo[hidden] { display: none; }
.campo { display: grid; gap: .35rem; }
.campo label, .opciones legend { font: 500 .72rem "Geist Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.campo input { width: 100%; font: 400 1rem "Geist", system-ui, sans-serif; color: #fff; padding: .8rem 1rem; border-radius: 14px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14); transition: border-color .2s, box-shadow .2s; }
.campo input::placeholder { color: rgba(201,207,219,.45); }
.campo input:focus { outline: none; border-color: var(--ambar); box-shadow: 0 0 0 3px rgba(255,207,138,.18); }
.opciones { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.opciones legend { padding: 0; margin-bottom: .45rem; }
.opciones label { position: relative; cursor: pointer; }
.opciones input { position: absolute; opacity: 0; }
.opciones span { display: grid; gap: .1rem; height: 100%; padding: .75rem .9rem; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14);
  font-size: .82rem; color: var(--gris); transition: border-color .2s, background .2s; }
.opciones span b { font-weight: 500; font-size: 1rem; color: #fff; }
.opciones input:checked + span { border-color: var(--ambar); background: rgba(255,207,138,.09); }
.opciones input:checked + span b { color: var(--ambar); }
.opciones input:focus-visible + span { box-shadow: 0 0 0 3px rgba(255,207,138,.25); }
.opciones .error { grid-column: 1 / -1; }
.error { min-height: 0; color: #ff9d94; font-size: .85rem; }
.error:empty { display: none; }
.mal input, .mal span { border-color: rgba(255,120,110,.7); }
.registro .boton { width: 100%; justify-content: center; margin: .3rem 0 0; font-size: 1.05rem; padding: .9rem 1.4rem; cursor: pointer; font-family: inherit; }
.registro .boton:disabled { opacity: .7; cursor: wait; }
.registro__nota, .registro__fallo { margin: 0 !important; font-size: .82rem; color: var(--gris) !important; max-width: none !important; }
.registro__fallo { color: #ff9d94 !important; }
.registro a:not(.boton) { color: var(--ambar); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.registro__listo { text-align: center; display: grid; gap: .4rem; justify-items: center; }
.registro__listo h3 { margin: 0; font-size: clamp(1.6rem, 4vw, 2rem); letter-spacing: -.02em; }
.registro__listo em { font-style: normal; color: var(--ambar); }
.registro__listo p { margin: .4rem auto 1.2rem !important; }
.pie { display: flex; justify-content: center; align-items: center; gap: 1.2rem; margin-top: clamp(4rem, 10vw, 6rem); font-size: .8rem; color: var(--gris); }
.pie a { display: inline-flex; color: var(--gris); } .pie a:hover { color: #fff; } .pie svg { width: 18px; height: 18px; }

@media (max-width: 760px) {
  .isla nav { display: none; }
  .portada__texto { justify-items: center; text-align: center; }
  .portada__texto .bajada { margin: 0 auto; }
  .datos { justify-content: center; }
  .cap-movil-centro { text-align: center; }
}



/* ════ Sistema de las páginas interiores, ronda 3 (dueño, 2026-10-08: «mucho mejor diagramado, usar recursos como imágenes,
   no poner a competir CTA… fondos, todo»). Cada sección con su composición y su fondo; un solo botón principal por pantalla. ════ */

/* fondos: cielo de estrellas (CSS, sin imagen), halo cálido detrás de una ilustración, banda de nubes */
.cielo { position: relative; isolation: isolate; }
.cielo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 72%, #ffe3b8 50%, transparent 51%), radial-gradient(1.4px 1.4px at 46% 34%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 63% 82%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 78% 26%, #ffd9a0 50%, transparent 51%), radial-gradient(1px 1px at 91% 64%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 7% 88%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 55% 8%, #fff 50%, transparent 51%);
  background-size: 520px 520px; }
.halo { position: relative; isolation: isolate; }
.halo::after { content: ""; position: absolute; inset: -12% -8%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(255,170,90,.32), rgba(209,27,38,.10) 55%, transparent 75%); filter: blur(10px); }
.banda { position: relative; isolation: isolate; overflow: hidden; }
.banda > .fondo { position: absolute; inset: 0; z-index: -2; background: center / cover no-repeat; }
.banda::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--noche) 0%, rgba(7,10,20,.35) 22%, rgba(7,10,20,.35) 78%, var(--noche) 100%); }

/* titular de sección centrado, con su línea de apoyo */
.titulo-sec { display: grid; gap: .9rem; justify-items: center; text-align: center; max-width: 46rem; margin: 0 auto clamp(2.5rem, 6vw, 4.5rem); }
.titulo-sec p { margin: 0; color: #c9cfdb; font-size: 1.08rem; }
.contenedor { width: min(var(--ancho), 100%); margin: 0 auto; padding-inline: clamp(16px, 5vw, 3rem); }
.tramo { padding-block: clamp(4rem, 9vw, 7rem); }

/* ilustración enmarcada: esquinas grandes, borde ámbar fino, sombra y halo */
.ilus { margin: 0; position: relative; border-radius: 28px; overflow: hidden; border: 1px solid rgba(255,214,160,.28); box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03); background: var(--tinta); }
.ilus img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/2; }
.ilus figcaption, .ilus .sello { position: absolute; left: 1rem; bottom: 1rem; padding: .45rem .8rem; border-radius: 999px; background: rgba(7,10,20,.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.14); font: 500 .78rem "Geist Mono", monospace; color: var(--ambar); }

/* filas de servicio: ilustración grande y texto, alternando lados */
.servicio { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.servicio + .servicio { margin-top: clamp(5rem, 12vw, 8rem); }
.servicio:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } .servicio:nth-of-type(even) .halo { order: 2; }
.servicio__texto { display: grid; gap: 1.1rem; justify-items: start; }
.servicio__texto > p { margin: 0; color: #d8dce6; font-size: 1.08rem; }
.servicio__num { font: 500 .8rem "Geist Mono", monospace; color: var(--gris); display: flex; align-items: center; gap: .7rem; }
.servicio__num::after { content: ""; width: 3rem; height: 1px; background: var(--borde); }
.incluye { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: .3rem 0 0; padding: 0; list-style: none; width: 100%; }
.incluye li { padding: .8rem .9rem; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); font-size: .9rem; color: #d8dce6; line-height: 1.35; }
.incluye li b { display: block; color: #fff; font-weight: 500; margin-bottom: .15rem; }
.ritmo { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem .9rem; border-radius: 999px; border: 1px solid rgba(209,27,38,.55); background: rgba(209,27,38,.08); font-size: .88rem; color: #f3d9c0; }
.ritmo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 10px var(--rojo); animation: rec 1.6s ease-in-out infinite; }
@keyframes rec { 50% { opacity: .35; } }

/* proceso ilustrado: tres pasos con su imagen, unidos por la línea de tiempo */
.proceso { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); position: relative; }
.proceso::before { content: ""; position: absolute; left: 8%; right: 8%; top: calc(min(19vw, 15rem) / 2); height: 1px; z-index: -1; background: repeating-linear-gradient(90deg, rgba(255,214,160,.5) 0 6px, transparent 6px 14px); }
.paso-i { display: grid; gap: 1rem; justify-items: center; text-align: center; }
.paso-i .ilus { width: 100%; border-radius: 22px; }
.paso-i .ilus img { aspect-ratio: 4/3; }
.paso-i .n { font: 500 .78rem "Geist Mono", monospace; color: var(--ambar); padding: .3rem .7rem; border: 1px solid var(--borde); border-radius: 999px; background: var(--noche); }
.paso-i h3 { font-size: 1.25rem; } .paso-i p { margin: 0; color: #c9cfdb; max-width: 20rem; }

/* tabla de precios: un solo panel, filas finas, y UN botón al final */
.tarifa { width: min(52rem, 100%); margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.6rem); border-radius: 28px; background: linear-gradient(180deg, rgba(20,22,36,.82), rgba(10,12,22,.88)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,214,160,.3); box-shadow: 0 40px 100px rgba(0,0,0,.5), 0 0 60px rgba(255,170,90,.08); }
.tarifa__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 2rem; align-items: baseline; padding: 1.25rem 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.tarifa__fila:first-child { padding-top: 0; }
.tarifa__fila h3 { font-size: 1.15rem; } .tarifa__fila p { grid-column: 1; margin: 0; color: var(--gris); font-size: .92rem; }
.tarifa__fila .cifra { grid-row: 1 / span 2; grid-column: 2; text-align: right; font: 600 clamp(1.6rem, 4vw, 2.2rem) "Geist", sans-serif; letter-spacing: -.03em; white-space: nowrap; }
.tarifa__fila .cifra small { display: block; font: 400 .78rem "Geist Mono", monospace; letter-spacing: 0; color: var(--gris); }
.tarifa__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.6rem; }
.tarifa__pie p { margin: 0; color: #d8dce6; font-size: .95rem; max-width: 28rem; }

/* preguntas: ilustración fija a un lado y las preguntas al otro */
.preguntas { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.preguntas__lado { position: sticky; top: 100px; display: grid; gap: 1.4rem; }
.faq { display: grid; gap: .6rem; }
.faq details { border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); transition: background .25s, border-color .25s; }
.faq details[open] { background: rgba(255,207,138,.05); border-color: rgba(255,214,160,.28); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.05rem 1.2rem; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--borde); color: var(--ambar); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 1.2rem 1.15rem; color: #c9cfdb; }

/* aparición suave al bajar */
.aparece { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.aparece.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .aparece { opacity: 1; transform: none; } .ritmo::before { animation: none; } }

@media (max-width: 860px) {
  .servicio, .preguntas { grid-template-columns: 1fr; }
  .servicio:nth-of-type(even) { grid-template-columns: 1fr; } .servicio:nth-of-type(even) .halo { order: 0; }
  .preguntas__lado { position: static; }
  .proceso { grid-template-columns: 1fr; gap: 2.6rem; } .proceso::before { display: none; }
  .incluye { grid-template-columns: 1fr; }
  .tarifa__pie { justify-content: center; text-align: center; }
}

/* ── Plataforma: selector de agentes (lista a la izquierda, ficha grande a la derecha) ── */
.selector { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.selector__lista { display: grid; gap: .5rem; }
.selector__lista button { --acento: var(--ambar); display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; align-items: center; text-align: left; padding: .9rem 1rem; border-radius: 16px; cursor: pointer; font: inherit; color: #fff;
  background: rgba(7,10,20,.6); border: 1px solid rgba(255,255,255,.16); transition: background .25s, border-color .25s, transform .25s; }
.selector__lista button i { grid-row: 1 / span 2; width: 10px; height: 10px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 10px var(--acento); }
.selector__lista button small { font: 500 .68rem "Geist Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--acento) 55%, #fff); }
.selector__lista button b { font-weight: 500; }
.selector__lista button:hover { background: rgba(255,255,255,.06); }
.selector__lista button[aria-selected="true"] { background: rgba(255,207,138,.07); border-color: var(--acento); transform: translateX(6px); }
.selector__ficha { --acento: var(--ambar); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); border-radius: 28px; overflow: hidden; border: 1px solid rgba(255,214,160,.28); background: rgba(12,14,24,.75); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 40px 90px rgba(0,0,0,.5); }
.selector__ficha img { width: 100%; height: 100%; object-fit: cover; min-height: 22rem; }
.selector__datos { padding: clamp(1.4rem, 3vw, 2.2rem); display: grid; gap: 1rem; align-content: center; }
.selector__datos small { font: 500 .72rem "Geist Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); }
.selector__datos h3 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.03em; }
.selector__datos p { margin: 0; color: #d8dce6; }
.intercambio { display: grid; gap: .6rem; margin-top: .3rem; }
.intercambio div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .8rem; padding: .7rem .9rem; border-radius: 12px; background: rgba(255,255,255,.04); font-size: .92rem; }
.intercambio span { font: 500 .66rem "Geist Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); padding-top: .2rem; }
.selector__ficha.cambia img, .selector__ficha.cambia .selector__datos { animation: cambia .45s ease; }
@keyframes cambia { from { opacity: 0; transform: translateY(8px); } }

/* app con notas flotantes que señalan sus partes */
.vitrina { position: relative; width: min(1100px, 100%); margin: 0 auto; }
.leyenda { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.4rem; margin-top: 1.6rem; }
.leyenda span { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: #d8dce6; } .leyenda span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 10px var(--ambar); }
.vitrina .nota-f { position: absolute; z-index: 2; display: flex; align-items: center; gap: .55rem; padding: .55rem .9rem; border-radius: 999px; background: rgba(7,10,20,.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--borde); font-size: .85rem; box-shadow: 0 12px 30px rgba(0,0,0,.4); white-space: nowrap; }
.vitrina .nota-f::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 10px var(--ambar); }

/* un solo plan protagonista, y la versión privada como línea aparte (sin segundo botón que compita) */
.plan { width: min(60rem, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); border-radius: 30px; overflow: hidden; border: 1px solid rgba(209,27,38,.6); background: linear-gradient(160deg, rgba(30,18,26,.92), rgba(10,12,22,.94)); box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 60px rgba(209,27,38,.18); }
.plan__precio { padding: clamp(1.6rem, 4vw, 2.8rem); display: grid; gap: 1rem; align-content: center; border-right: 1px solid rgba(255,255,255,.08); }
.plan__precio .cifra { font: 600 clamp(2.8rem, 6vw, 4.2rem) "Geist", sans-serif; letter-spacing: -.05em; line-height: 1; }
.plan__precio .cifra small { display: block; margin-top: .5rem; font: 400 .9rem "Geist", sans-serif; letter-spacing: 0; color: var(--gris); }
.plan__precio p { margin: 0; color: #d8dce6; }
.plan__precio .cuota { font-size: .9rem; color: var(--gris); padding: .8rem 1rem; border-radius: 14px; background: rgba(255,207,138,.06); border: 1px solid rgba(255,207,138,.16); } .plan__precio .cuota b { color: var(--ambar); font-weight: 500; }
.plan__incluye { padding: clamp(1.6rem, 4vw, 2.8rem); display: grid; gap: .9rem; align-content: center; }
.plan__incluye h3 { font-size: 1rem; color: var(--gris); font-weight: 500; }
.check { margin: 0; padding: 0; list-style: none; display: grid; gap: .8rem; }
.check li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .6rem; color: #e6e9f2; }
.check li::before { content: "✓"; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(76,195,138,.14); color: #6fe0a6; font-size: .8rem; }
.privado { width: min(60rem, 100%); margin: 1.4rem auto 0; display: grid; grid-template-columns: 9rem 1fr; gap: 1.4rem; align-items: center; padding: 1rem; border-radius: 22px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.privado img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; }
.privado p { margin: 0; color: #c9cfdb; } .privado b { color: #fff; font-weight: 500; }
.enlace { color: var(--ambar); text-decoration: none; border-bottom: 1px solid rgba(255,207,138,.4); white-space: nowrap; } .enlace:hover { border-color: var(--ambar); }

/* ── Academia: la entrada del evento ── */
.ticket { width: min(64rem, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); border-radius: 28px; position: relative; filter: drop-shadow(0 40px 60px rgba(0,0,0,.5)); }
.ticket > div { background: linear-gradient(160deg, #1b1420, #0d1020); border: 1px solid rgba(255,214,160,.3); }
.ticket__fecha { border-radius: 28px 0 0 28px; border-right: 0 !important; padding: clamp(1.6rem, 4vw, 2.6rem); display: grid; align-content: center; gap: .6rem; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 0% 100%, rgba(209,27,38,.35), transparent 60%), linear-gradient(160deg, #22141c, #0d1020) !important; }
.ticket__fecha .mes { font: 500 .8rem "Geist Mono", monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--ambar); }
.ticket__fecha .dias { display: flex; align-items: baseline; gap: .6rem; font: 600 clamp(3.6rem, 9vw, 6rem) "Geist", sans-serif; letter-spacing: -.06em; line-height: .9; }
.ticket__fecha .dias span { font-size: .35em; letter-spacing: 0; color: var(--gris); font-weight: 400; }
.ticket__fecha p { margin: 0; color: #d8dce6; }
.ticket__fecha .rec { display: inline-flex; align-items: center; gap: .5rem; width: max-content; padding: .35rem .75rem; border-radius: 999px; background: rgba(209,27,38,.15); border: 1px solid rgba(209,27,38,.5); font: 500 .72rem "Geist Mono", monospace; color: #ffb3a8; }
.ticket__fecha .rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rojo); animation: rec 1.6s infinite; }
.ticket__datos { border-radius: 0 28px 28px 0; border-left: 2px dashed rgba(255,214,160,.35) !important; padding: clamp(1.4rem, 3.5vw, 2.4rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem 1.6rem; align-content: center; }
.ticket__datos div { display: grid; gap: .25rem; }
.ticket__datos small { font: 500 .66rem "Geist Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.ticket__datos b { font-weight: 500; font-size: 1.05rem; }
.ticket__datos .grande { font-size: 1.6rem; letter-spacing: -.03em; color: var(--ambar); }
.ticket__datos .todo { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.08); }
.ticket__datos .todo p { margin: 0; color: var(--gris); font-size: .9rem; }

/* los dos sábados, uno junto al otro */
.dias2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2rem); }
.dia { border-radius: 28px; overflow: hidden; border: 1px solid rgba(255,214,160,.24); background: rgba(12,14,24,.7); display: grid; grid-template-rows: auto 1fr; }
.dia > img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.dia__cuerpo { padding: clamp(1.3rem, 3vw, 2rem); display: grid; gap: 1.2rem; align-content: start; }
.dia__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.dia__cab small { font: 500 .72rem "Geist Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ambar); }
.dia__cab h3 { font-size: 1.6rem; letter-spacing: -.03em; }
.modulo2 { display: grid; gap: .5rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.08); }
.modulo2 h4 { margin: 0; font-size: 1.05rem; font-weight: 600; } .modulo2 h4 span { font: 500 .72rem "Geist Mono", monospace; color: var(--gris); margin-right: .5rem; }
.modulo2 ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; } .modulo2 li { color: #c9cfdb; font-size: .92rem; padding-left: 1rem; position: relative; } .modulo2 li::before { content: "·"; position: absolute; left: .2rem; color: var(--ambar); }
.modulo2 .practica { margin: .2rem 0 0; font-size: .9rem; color: #f3d9c0; } .modulo2 .practica::before { content: "▶ "; color: var(--rojo); font-size: .7rem; }

/* perfiles: tres retratos */
.perfiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 1.6rem); }
.perfil { border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: rgba(12,14,24,.7); }
.perfil img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); } .perfil:hover img { transform: scale(1.04); }
.perfil div { padding: 1.1rem 1.2rem 1.3rem; display: grid; gap: .35rem; } .perfil h3 { font-size: 1.15rem; } .perfil p { margin: 0; color: #c9cfdb; font-size: .93rem; }

@media (max-width: 960px) {
  .selector, .selector__ficha, .plan, .ticket, .dias2 { grid-template-columns: 1fr; }
  /* teléfono y tableta: los cinco a la vista, como fichas compactas que se tocan */
  .selector__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
  .selector__lista button { grid-template-columns: auto auto; padding: .6rem .9rem; border-radius: 999px; } .selector__lista button b { display: none; } .selector__lista button i { grid-row: auto; }
  .selector__lista button[aria-selected="true"] { transform: none; }
  .selector__ficha img { min-height: 0; aspect-ratio: 4/3; }
  .plan__precio { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .ticket__fecha { border-radius: 28px 28px 0 0; border-right: 1px solid rgba(255,214,160,.3) !important; border-bottom: 0 !important; }
  .ticket__datos { border-radius: 0 0 28px 28px; border-left: 1px solid rgba(255,214,160,.3) !important; border-top: 2px dashed rgba(255,214,160,.35) !important; }
  .vitrina .nota-f { display: none; }
}
@media (max-width: 600px) { .tarifa__fila { grid-template-columns: 1fr; } .tarifa__fila .cifra { grid-row: auto; grid-column: 1; text-align: left; } }
@media (max-width: 760px) { .perfiles { grid-template-columns: 1fr; } .privado { grid-template-columns: 1fr; } .ticket__datos { grid-template-columns: 1fr 1fr; } }
/* teléfono: ninguna etiqueta por debajo de 11 px (medido en 320, 360 y 390 px, 2026-10-08) */
@media (max-width: 760px) {
  .ticket__datos small, .intercambio span, .caso small, .selector__lista button small, .dia__cab small, .modulo2 h4 span, .ilus figcaption, .paso-i .n, .servicio__num, .ticket__fecha .rec, .ticket__fecha .mes { font-size: 11.5px; }
}

/* ── Videos de YouTube «ligeros»: miniatura propia y botón; el reproductor solo se carga al tocar (2026-10-08) ── */
.yt { position: relative; display: block; width: 100%; aspect-ratio: 16/9; border-radius: 22px; overflow: hidden; cursor: pointer; border: 1px solid rgba(255,214,160,.28); background: var(--tinta) center / cover no-repeat; box-shadow: 0 30px 70px rgba(0,0,0,.45); padding: 0; font: inherit; color: #fff; text-align: left; }
.yt::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,10,20,.85), rgba(7,10,20,.1) 55%); transition: background .3s; }
.yt:hover::before { background: linear-gradient(0deg, rgba(7,10,20,.75), rgba(7,10,20,0) 60%); }
.yt .play { position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 40px rgba(209,27,38,.6); display: grid; place-items: center; transition: transform .3s; }
.yt .play::after { content: ""; margin-left: 5px; border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.yt:hover .play { transform: scale(1.08); }
.yt .pie-yt { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1rem; display: grid; gap: .15rem; }
.yt .pie-yt small { font: 500 .72rem "Geist Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--ambar); }
.yt .pie-yt b { font-weight: 600; font-size: 1.05rem; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt.grande .play { width: 96px; height: 96px; margin: -48px 0 0 -48px; } .yt.grande .pie-yt b { font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.largos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.largos .yt .play { width: 56px; height: 56px; margin: -28px 0 0 -28px; } .largos .yt .play::after { border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; }
.subtit { margin: clamp(3.5rem, 7vw, 5rem) 0 1.4rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.subtit h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -.03em; } .subtit p { margin: 0; color: var(--gris); }
/* portafolio vertical: fila que se desliza */
.portafolio { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .6rem; margin-inline: calc(-1 * clamp(16px, 5vw, 3rem)); padding-inline: clamp(16px, 5vw, 3rem); }
.portafolio::-webkit-scrollbar { display: none; }
.portafolio .caso { flex: 0 0 clamp(12rem, 22vw, 15rem); scroll-snap-align: start; }
.portafolio .caso:nth-child(2) { transform: none; } .portafolio .caso:hover { transform: translateY(-.4rem); }
@media (max-width: 860px) { .largos { grid-template-columns: 1fr; } }
/* los dos fines de semana, cada uno en su tarjeta, sobre la entrada del evento (dueño, 2026-10-08: «antes se veía mejor… todo muy apretado») */
.findes2 { width: min(64rem, 100%); margin: 0 auto 1.4rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.finde { padding: clamp(1.4rem, 3.5vw, 2.2rem); border-radius: 26px; display: grid; gap: .8rem; align-content: start; border: 1px solid rgba(255,214,160,.28);
  background: radial-gradient(110% 80% at 100% 0%, rgba(255,170,90,.16), transparent 60%), linear-gradient(160deg, #191420, #0d1020); box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.finde > small { font: 500 .74rem "Geist Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ambar); }
.finde__fecha { display: flex; align-items: baseline; gap: .35rem; }
.finde__fecha b { font: 600 clamp(3.2rem, 7vw, 4.6rem) "Geist", sans-serif; letter-spacing: -.05em; line-height: .9; }
.finde__fecha span { font: 500 .8rem "Geist Mono", monospace; text-transform: uppercase; color: var(--gris); margin-right: .2rem; }
.finde__fecha i { font-style: normal; font-size: 2rem; color: var(--rojo); margin: 0 .3rem; }
.finde__mes { margin: -.3rem 0 .2rem; color: #d8dce6; }
.turnos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.turnos li { display: grid; gap: .15rem; padding: .75rem .9rem; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.turnos b { font-weight: 500; } .turnos span { font-size: .85rem; color: var(--gris); }
@media (max-width: 760px) { .findes2 { grid-template-columns: 1fr; } .finde > small, .finde__fecha span { font-size: 11.5px; } }
/* preguntas frecuentes: título centrado encima y la lista en una columna centrada (dueño, 2026-10-08: nada de título
   lateral fijo que deje espacio vacío debajo) */
.faq--centro { width: min(48rem, 100%); margin: 0 auto; }
/* Academia: módulos con los temas en etiquetas cortas; las dos tarjetas del mismo alto y la práctica anclada abajo */
.dias2 { align-items: stretch; }
.dia__cuerpo { display: flex; flex-direction: column; gap: 1.2rem; }   /* todo arranca arriba, a la misma altura en las dos tarjetas; la nota se ancla al pie */
.modulo3 { display: grid; gap: .8rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.08); }
.modulo3 h4 { margin: 0; display: flex; align-items: center; gap: .7rem; font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; }
.modulo3 h4 span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(209,27,38,.16); border: 1px solid rgba(209,27,38,.55); font: 500 .75rem "Geist Mono", monospace; color: #ffb3a8; }
.temas { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; }
.temas li { padding: .4rem .75rem; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); font-size: .88rem; color: #e6e9f2; }
.modulo3 .practica { margin: 0; display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: 14px; background: rgba(255,207,138,.07); border: 1px solid rgba(255,207,138,.2); font-size: .92rem; color: #f3d9c0; }
.modulo3 .practica::before { content: "▶"; color: var(--rojo); font-size: .7rem; }
.dia__nota { margin: 0; color: var(--gris); font-size: .92rem; }
.te-llevas { margin-top: auto; display: grid; gap: .7rem; padding: 1.1rem 1.2rem; border-radius: 18px; background: linear-gradient(140deg, rgba(209,27,38,.16), rgba(255,170,90,.08)); border: 1px solid rgba(255,170,90,.3); }
.te-llevas small { font: 500 .72rem "Geist Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ambar); }
.te-llevas div { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; } .te-llevas span { display: inline-flex; align-items: center; gap: .55rem; font-weight: 500; }
.te-llevas b { color: var(--rojo); font-size: .8rem; }
@media (max-width: 760px) { .te-llevas small { font-size: 11.5px; } }
/* galería que se mueve sola (dueño, 2026-10-08): desvanecida en los bordes, sin corte seco; sin «snap» para que el avance sea continuo */
.portafolio { scroll-snap-type: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
@media (max-width: 760px) {
  .casos { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
}