/* Pitavox · página pública. Paleta de la marca: fondo #080F24, turquesa #00D4C8, azul #278BFF, violeta #7958F5 */
:root { --fondo: #080F24; --fondo2: #0D1733; --borde: rgba(255,255,255,.09); --texto: #E9EEF8; --suave: #A3AFC7; --turq: #00D4C8; --azul: #278BFF; --viol: #7958F5; --radio: 18px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: radial-gradient(1200px 600px at 80% -10%, rgba(121,88,245,.22), transparent 60%), radial-gradient(900px 500px at -10% 20%, rgba(0,212,200,.12), transparent 60%), var(--fondo); color: var(--texto); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--turq); } img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; } h1 { font-size: clamp(2.2rem, 5vw, 3.7rem); font-weight: 800; } h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; } h3 { font-size: 1.2rem; }
.grad { background: linear-gradient(90deg, var(--turq), var(--azul) 50%, var(--viol)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cab { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 20px; padding: 12px clamp(16px, 4vw, 48px); background: rgba(8,15,36,.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--borde); }
.marca { display: flex; align-items: center; gap: 10px; color: var(--texto); text-decoration: none; } .marca img { border-radius: 9px; } .marca span { display: flex; flex-direction: column; line-height: 1.1; } .marca b { letter-spacing: .08em; } .marca small { color: var(--suave); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.cab nav { display: flex; gap: 22px; margin-left: auto; } .cab nav a { color: var(--suave); text-decoration: none; font-weight: 500; } .cab nav a:hover { color: var(--texto); }
.acc { display: flex; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 12px; border: 0; cursor: pointer; font: 600 .95rem/1 inherit; color: #04101f; text-decoration: none; background: linear-gradient(90deg, var(--turq), var(--azul)); box-shadow: 0 8px 24px rgba(39,139,255,.25); transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(39,139,255,.35); } .btn:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--turq); outline-offset: 3px; }
.btn.fantasma { background: transparent; color: var(--texto); border: 1px solid var(--borde); box-shadow: none; } .btn.fantasma:hover { border-color: var(--turq); }
.btn.grande { padding: 15px 24px; font-size: 1.05rem; } .btn.chico { padding: 8px 14px; font-size: .88rem; }
.fila { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.heroe { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: clamp(40px, 8vw, 96px) clamp(16px, 4vw, 48px) 40px; max-width: 1200px; margin: 0 auto; }
.chip { display: inline-block; padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(0,212,200,.4); color: var(--turq); font-size: .85rem; font-weight: 600; margin-bottom: 18px; }
.lead { font-size: 1.15rem; color: var(--suave); max-width: 60ch; }
.sellos { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--suave); font-size: .92rem; }
.heroe-vis { display: grid; place-items: center; }
.orbita { position: relative; width: min(380px, 80vw); aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(255,255,255,.12); display: grid; place-items: center; }
.orbita::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; border: 1px solid rgba(0,212,200,.18); }
.orbita img { width: 42%; border-radius: 28%; box-shadow: 0 0 80px rgba(39,139,255,.45); animation: late 4s ease-in-out infinite; }
.orbita span { position: absolute; padding: 6px 12px; border-radius: 99px; background: var(--fondo2); border: 1px solid var(--borde); font-size: .85rem; font-weight: 600; animation: flota 6s ease-in-out infinite; }
.o1 { top: 4%; left: 40%; } .o2 { top: 30%; right: -4%; animation-delay: -1s !important; } .o3 { bottom: 12%; right: 6%; animation-delay: -2s !important; } .o4 { bottom: 8%; left: 8%; animation-delay: -3s !important; } .o5 { top: 30%; left: -4%; animation-delay: -4s !important; }
@keyframes late { 50% { transform: scale(1.04); } } @keyframes flota { 50% { transform: translateY(-8px); } }
.franja { border-block: 1px solid var(--borde); background: rgba(13,23,51,.6); padding: 22px clamp(16px, 4vw, 48px); text-align: center; } .franja p { margin: 0 auto; max-width: 900px; color: var(--suave); }
.bloque { max-width: 1200px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 48px) 0; }
.sub { color: var(--suave); max-width: 72ch; margin: 0 0 28px; }
.pasos { display: grid; grid-template-columns: 300px 1fr; gap: 24px; }
.pasos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pasos-lista button { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--suave); font: 500 .95rem inherit; cursor: pointer; }
.pasos-lista button span { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--fondo2); border: 1px solid var(--borde); font-weight: 700; font-size: .82rem; }
.pasos-lista button.hecho span { background: rgba(0,212,200,.15); border-color: rgba(0,212,200,.4); color: var(--turq); }
.pasos-lista button[aria-selected="true"] { background: var(--fondo2); border-color: rgba(39,139,255,.5); color: var(--texto); } .pasos-lista button[aria-selected="true"] span { background: linear-gradient(135deg, var(--turq), var(--azul)); color: #04101f; border: 0; }
.paso-detalle { position: relative; padding: 32px; border-radius: var(--radio); background: linear-gradient(160deg, rgba(39,139,255,.12), rgba(121,88,245,.08)), var(--fondo2); border: 1px solid var(--borde); min-height: 340px; }
.paso-detalle.entra { animation: entra .45s ease; } @keyframes entra { from { opacity: 0; transform: translateY(10px); } }
.paso-num { font-size: 4.5rem; font-weight: 800; line-height: 1; margin-bottom: 8px; background: linear-gradient(180deg, var(--turq), var(--viol)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.paso-detalle h3 { font-size: 1.7rem; } .paso-detalle p { color: var(--suave); font-size: 1.05rem; max-width: 62ch; }
.paso-detalle ul { padding-left: 1.1em; margin: 14px 0 0; } .paso-detalle li { margin: 4px 0; } .paso-detalle li::marker { color: var(--turq); }
.barra { height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); margin-top: 22px; overflow: hidden; } .barra span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--turq), var(--azul)); }
.canales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.canal { display: block; padding: 24px; border-radius: var(--radio); background: var(--fondo2); border: 1px solid var(--borde); color: var(--texto); text-decoration: none; transition: border-color .2s, transform .2s; }
.canal:hover { border-color: rgba(0,212,200,.5); transform: translateY(-2px); } .canal img { width: 72px; height: 72px; border-radius: 50%; margin-bottom: 14px; }
.nicho { color: var(--suave); margin: -4px 0 16px; font-size: .92rem; }
.canal dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 14px; } .canal dt { color: var(--suave); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; } .canal dd { margin: 0; font-size: 1.45rem; font-weight: 800; }
.exito { font-size: .88rem; color: var(--suave); margin: 0; border-top: 1px solid var(--borde); padding-top: 12px; }
.titulo-sec { margin-top: 44px; font-size: 1.4rem; }
.videos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.video { color: var(--texto); text-decoration: none; display: flex; flex-direction: column; gap: 6px; } .video img { border-radius: 12px; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--borde); transition: transform .2s; } .video:hover img { transform: scale(1.03); }
.video span { font-weight: 600; font-size: .92rem; line-height: 1.3; } .video small { color: var(--suave); }
.tarjetas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tarjeta { padding: 22px; border-radius: var(--radio); background: var(--fondo2); border: 1px solid var(--borde); } .tarjeta p { color: var(--suave); font-size: .93rem; margin: 8px 0 0; }
.anticipado { text-align: center; } .anticipado .sub { margin-inline: auto; }
.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: var(--radio); background: var(--fondo2); border: 1px solid var(--borde); }
.plan.destacado { border-color: rgba(39,139,255,.6); box-shadow: 0 20px 60px rgba(39,139,255,.18); }
.cinta { position: absolute; top: -12px; left: 24px; padding: 4px 12px; border-radius: 99px; background: linear-gradient(90deg, var(--turq), var(--azul)); color: #04101f; font-size: .78rem; font-weight: 700; }
.precio { font-size: 1.6rem; font-weight: 800; margin: 0 0 14px; } .plan ul { padding-left: 1.1em; color: var(--suave); flex: 1; } .plan li::marker { color: var(--turq); }
#preguntas details { border: 1px solid var(--borde); border-radius: 14px; padding: 4px 18px; margin: 0 0 10px; background: var(--fondo2); }
#preguntas summary { cursor: pointer; font-weight: 600; padding: 12px 0; } #preguntas details p { color: var(--suave); margin: 0 0 14px; }
.cierre { text-align: center; padding-bottom: 40px; }
.pie { margin-top: 80px; border-top: 1px solid var(--borde); padding: 32px clamp(16px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; color: var(--suave); font-size: .88rem; }
.pie nav { display: flex; flex-wrap: wrap; gap: 18px; } .pie a { color: var(--suave); } .pie p { width: 100%; margin: 0; }
.legal { max-width: 820px; margin: 0 auto; padding: 48px clamp(16px, 4vw, 48px); } .legal h1 { font-size: 2.2rem; } .legal h2 { font-size: 1.3rem; margin-top: 32px; } .legal p, .legal li { color: #cdd6e6; } .legal .fecha { color: var(--suave); }
@media (max-width: 980px) { .heroe { grid-template-columns: 1fr; } .heroe-vis { order: -1; } .orbita { width: min(280px, 70vw); } .pasos { grid-template-columns: 1fr; } .pasos-lista { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 6px; } .canales, .planes { grid-template-columns: 1fr; } .tarjetas { grid-template-columns: 1fr 1fr; } .videos { grid-template-columns: repeat(2, 1fr); } .cab nav { display: none; } }
@media (max-width: 560px) { .tarjetas { grid-template-columns: 1fr; } .acc .fantasma { display: none; } .paso-detalle { padding: 22px; } }

/* ---------- versión con imágenes y más color ---------- */
.heroe { max-width: 1280px; }
.marco { position: relative; border-radius: 26px; padding: 2px; background: linear-gradient(135deg, var(--turq), var(--azul) 45%, var(--viol)); box-shadow: 0 30px 90px rgba(39,139,255,.35), 0 0 0 1px rgba(255,255,255,.04); transform: perspective(1200px) rotateY(-6deg) rotateX(2deg); transition: transform .6s; }
.marco:hover { transform: perspective(1200px) rotateY(0) rotateX(0); }
.marco img { border-radius: 24px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.ficha { position: absolute; padding: 8px 14px; border-radius: 12px; background: rgba(8,15,36,.86); border: 1px solid rgba(0,212,200,.35); backdrop-filter: blur(8px); font-size: .86rem; font-weight: 600; white-space: nowrap; box-shadow: 0 10px 30px rgba(0,0,0,.35); animation: flota 6s ease-in-out infinite; }
.f1 { top: -16px; left: 8%; } .f2 { top: 26%; right: -22px; animation-delay: -1.5s; } .f3 { bottom: 22%; left: -24px; animation-delay: -3s; } .f4 { bottom: -16px; right: 12%; animation-delay: -4.5s; }
.cifras { max-width: 1200px; margin: 24px auto 0; padding: 0 clamp(16px, 4vw, 48px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cifras div { padding: 22px; border-radius: var(--radio); background: linear-gradient(160deg, rgba(0,212,200,.10), rgba(121,88,245,.10)), var(--fondo2); border: 1px solid var(--borde); text-align: center; }
.cifras b { display: block; font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; background: linear-gradient(90deg, var(--turq), var(--azul)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cifras span { color: var(--suave); font-size: .9rem; }
.franja { margin-top: 48px; background: linear-gradient(90deg, rgba(0,212,200,.10), rgba(39,139,255,.10), rgba(121,88,245,.12)); }
#pasos h2, #canales h2, #planes h2, #preguntas h2, .confianza h2 { position: relative; padding-top: 18px; }
#pasos h2::before, #canales h2::before, #planes h2::before, #preguntas h2::before, .confianza h2::before { content: ''; position: absolute; top: 0; left: 0; width: 56px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--turq), var(--viol)); }
.paso-detalle { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; overflow: hidden; }
.paso-detalle > :not(.paso-img) { padding-inline: 32px; } .paso-detalle > .fila { padding-bottom: 28px; }
.paso-img { position: relative; height: 260px; overflow: hidden; margin-bottom: -46px; }
.paso-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, var(--fondo2)); }
.paso-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 6s ease; } .paso-detalle.entra .paso-img img { animation: acerca 6s ease forwards; }
@keyframes acerca { from { transform: scale(1.08); } to { transform: scale(1); } }
.paso-num { position: relative; z-index: 1; }
.canal { position: relative; overflow: hidden; }
.canal::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 92px; background: linear-gradient(120deg, rgba(0,212,200,.28), rgba(39,139,255,.22), rgba(121,88,245,.28)); }
.canal > * { position: relative; } .canal img { width: 88px; height: 88px; border: 3px solid var(--fondo); box-shadow: 0 8px 24px rgba(0,0,0,.4); margin-top: 26px; }
.canal:nth-child(2)::before { background: linear-gradient(120deg, rgba(252,180,36,.35), rgba(181,83,10,.30)); } .canal:nth-child(1)::before { background: linear-gradient(120deg, rgba(156,204,101,.35), rgba(36,84,36,.40)); } .canal:nth-child(3)::before { background: linear-gradient(120deg, rgba(111,168,220,.35), rgba(60,36,12,.40)); }
.video img { box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.conf-cab { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: center; margin-bottom: 24px; } .conf-cab img { border-radius: var(--radio); aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--borde); box-shadow: 0 20px 60px rgba(0,212,200,.15); }
.tarjeta { position: relative; transition: transform .2s, border-color .2s; } .tarjeta:hover { transform: translateY(-3px); border-color: rgba(0,212,200,.45); }
.tarjeta b { font-size: 1.05rem; }
.anticipado { margin-top: 70px; padding: 56px clamp(16px, 4vw, 48px); max-width: 1100px; border-radius: 28px; background: radial-gradient(600px 220px at 50% 0, rgba(0,212,200,.25), transparent 70%), linear-gradient(135deg, rgba(39,139,255,.18), rgba(121,88,245,.22)); border: 1px solid rgba(0,212,200,.3); }
.plan { transition: transform .2s; } .plan:hover { transform: translateY(-4px); } .plan.destacado { background: linear-gradient(180deg, rgba(39,139,255,.16), transparent 60%), var(--fondo2); }
.cierre { margin-top: 40px; padding: 72px 24px; border-radius: 28px; max-width: 1100px; background: linear-gradient(120deg, rgba(0,212,200,.2), rgba(39,139,255,.2), rgba(121,88,245,.25)); }
.aparece { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; } .aparece.visto { opacity: 1; transform: none; }
@media (max-width: 980px) { .marco { transform: none; } .cifras { grid-template-columns: 1fr 1fr; } .conf-cab { grid-template-columns: 1fr; } .ficha { font-size: .78rem; } .f2 { right: 4px; } .f3 { left: 4px; } .paso-img { height: 200px; } }

/* ---------- cine: documentales hechos con Pitavox ---------- */
.cine { --c1: #245424; --c2: #9ccc65; position: relative; padding: 22px; border-radius: 28px; background: radial-gradient(800px 300px at 20% 0, color-mix(in srgb, var(--c2) 22%, transparent), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--c1) 45%, var(--fondo2)), var(--fondo2) 70%); border: 1px solid color-mix(in srgb, var(--c2) 35%, transparent); transition: background .8s, border-color .8s; }
.pantalla { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 2px color-mix(in srgb, var(--c2) 60%, transparent); }
.pantalla iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.portada-video { all: unset; cursor: pointer; position: absolute; inset: 0; display: block; }
.portada-video img { width: 100%; height: 100%; object-fit: cover; } .portada-video img.entra { animation: aparecer .8s ease, acerca 7s ease forwards; } @keyframes aparecer { from { opacity: 0; } }
.portada-video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.55)); }
.play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: linear-gradient(135deg, var(--c2), var(--c1)); box-shadow: 0 0 0 10px color-mix(in srgb, var(--c2) 25%, transparent), 0 20px 50px rgba(0,0,0,.5); transition: transform .2s; animation: latido 2.4s ease-in-out infinite; }
.play::before { content: ''; position: absolute; left: 38px; top: 28px; border-left: 30px solid #fff; border-top: 20px solid transparent; border-bottom: 20px solid transparent; }
.portada-video:hover .play, .portada-video:focus-visible .play { transform: scale(1.08); } .portada-video:focus-visible { outline: 3px solid var(--turq); outline-offset: -3px; }
@keyframes latido { 50% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--c2) 12%, transparent), 0 20px 50px rgba(0,0,0,.5); } }
.cine-info { display: flex; align-items: center; gap: 14px; margin: 16px 4px 18px; } .cine-info img { border-radius: 50%; border: 2px solid var(--c2); }
.cine-info div { display: flex; flex-direction: column; flex: 1; min-width: 0; } .cine-info b { font-size: 1.25rem; } .cine-info span { color: var(--c2); font-weight: 600; font-size: .92rem; }
.cinta-videos { position: relative; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 10px; scrollbar-width: thin; }
.tira { all: unset; box-sizing: border-box; cursor: pointer; flex: 0 0 clamp(220px, 26%, 300px); scroll-snap-align: center; position: relative; border-radius: 16px; overflow: hidden; background: var(--fondo); border: 2px solid transparent; transition: transform .3s, border-color .3s, opacity .3s; opacity: .7; }
.tira:hover { opacity: 1; transform: translateY(-3px); } .tira.activa { opacity: 1; border-color: var(--c2); box-shadow: 0 12px 30px color-mix(in srgb, var(--c1) 50%, transparent); } .tira:focus-visible { outline: 3px solid var(--turq); }
.tira > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tira-txt { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 55%, var(--fondo2)), var(--fondo2)); }
.tira-txt b { font-size: .92rem; line-height: 1.3; color: var(--texto); } .tira-txt small { display: flex; align-items: center; gap: 6px; color: var(--c2); font-weight: 600; font-size: .8rem; } .tira-txt small img { border-radius: 50%; }
.avance { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--f, 0) * 100%); background: var(--c2); }
@media (max-width: 640px) { .cine { padding: 12px; border-radius: 20px; } .play { width: 72px; height: 72px; margin: -36px 0 0 -36px; } .play::before { left: 29px; top: 21px; border-left-width: 22px; border-top-width: 15px; border-bottom-width: 15px; } .tira { flex-basis: 70%; } }
/* pantalla grande: más ancha que el resto del bloque para que YouTube elija 720p o 1080p */
.cine { width: min(1280px, calc(100vw - 32px)); margin-left: 50%; transform: translateX(-50%); }

/* ---------- formulario de acceso anticipado ---------- */
.modal { width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid rgba(0,212,200,.35); border-radius: 24px; background: radial-gradient(500px 200px at 50% 0, rgba(0,212,200,.18), transparent 70%), linear-gradient(160deg, #0f1c3d, var(--fondo)); color: var(--texto); box-shadow: 0 40px 120px rgba(0,0,0,.6); }
.modal::backdrop { background: rgba(4,8,20,.72); backdrop-filter: blur(6px); }
.modal[open] { animation: entra .35s ease; }
.modal form { position: relative; padding: 30px clamp(18px, 4vw, 34px); }
.modal h2 { font-size: 1.8rem; } .modal .sub { margin-bottom: 18px; }
.cerrar { position: absolute; top: 12px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--borde); background: transparent; color: var(--texto); font-size: 1.4rem; cursor: pointer; }
.modal label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .9rem; margin-bottom: 14px; }
.modal input:not([type=radio]):not([type=checkbox]), .modal textarea { font: inherit; font-weight: 400; color: var(--texto); background: rgba(8,15,36,.7); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 12px 14px; }
.modal input:focus, .modal textarea:focus { outline: none; border-color: var(--turq); box-shadow: 0 0 0 3px rgba(0,212,200,.2); }
.modal .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 560px) { .modal .dos { grid-template-columns: 1fr; } }
.modal fieldset { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 10px; } .modal legend { font-weight: 600; font-size: .9rem; margin-bottom: 8px; width: 100%; }
.modal .opcion { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; padding: 10px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; cursor: pointer; margin: 0; }
.modal .opcion:has(input:checked) { border-color: var(--turq); background: rgba(0,212,200,.10); }
.modal .acepto { border: 0; padding: 0; align-items: flex-start; font-size: .85rem; color: var(--suave); margin: 4px 0 14px; } .modal .acepto input { margin-top: 3px; }
.modal input[type=radio], .modal input[type=checkbox] { accent-color: var(--turq); width: 18px; height: 18px; flex: 0 0 auto; }
.modal .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.modal .err { color: #ffb4a2; background: rgba(240,120,90,.12); border: 1px solid rgba(240,120,90,.3); padding: 10px 14px; border-radius: 12px; margin: 0 0 14px; }
.modal .btn.grande { width: 100%; } .modal #accListo { text-align: center; } .modal #accListo .btn { margin-top: 12px; }
.ok-icono { width: 76px; height: 76px; margin: 6px auto 16px; border-radius: 50%; display: grid; place-items: center; font-size: 2.4rem; font-weight: 800; color: #04101f; background: linear-gradient(135deg, var(--turq), var(--azul)); box-shadow: 0 0 0 10px rgba(0,212,200,.15); }
.btn.whatsapp { background: linear-gradient(90deg, #25D366, #1ebe5b); color: #062612; box-shadow: 0 10px 30px rgba(37,211,102,.3); }

/* ---------- bonus: curso de YouTube ---------- */
.curso-caja { display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: 28px; background: radial-gradient(500px 260px at 90% 10%, rgba(252,180,36,.18), transparent 70%), linear-gradient(135deg, rgba(121,88,245,.22), rgba(39,139,255,.12)); border: 1px solid rgba(252,180,36,.35); }
.curso .chip { border-color: rgba(252,180,36,.55); color: #fcb424; }
.curso-lista { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; } .curso-lista li { padding-left: 30px; position: relative; } .curso-lista li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; color: #04101f; background: #fcb424; }
.curso .nota { font-size: .78rem; color: var(--suave); margin: 14px 0 0; max-width: 60ch; }
.curso-vis { position: relative; } .curso-vis img { border-radius: 22px; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.sello { position: absolute; top: -12px; right: -8px; width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center; text-align: center; line-height: 1.1; font-size: .68rem; color: #241400; background: radial-gradient(circle at 30% 30%, #ffd77a, #fcb424 60%, #d98d00); box-shadow: 0 10px 28px rgba(252,180,36,.4); transform: rotate(10deg); animation: flota 5s ease-in-out infinite; } .sello b { font-size: .9rem; }
@media (max-width: 980px) { .curso-caja { grid-template-columns: 1fr; } .curso-vis { order: -1; } .sello { right: 8px; } }
@media (max-width: 600px) { .sello { width: 74px; height: 74px; top: -12px; right: 6px; font-size: .62rem; box-shadow: 0 8px 22px rgba(252,180,36,.4); } .sello b { font-size: .82rem; } }
.modal [hidden] { display: none !important; }
/* páginas legales: resumen destacado y preguntas desplegables */
.legal .resumen { padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, rgba(0,212,200,.10), rgba(121,88,245,.10)); border: 1px solid rgba(0,212,200,.25); color: var(--texto); }
.legal details { border: 1px solid var(--borde); border-radius: 14px; padding: 4px 18px; margin: 0 0 10px; background: var(--fondo2); } .legal summary { cursor: pointer; font-weight: 600; padding: 12px 0; } .legal details p { margin: 0 0 14px; }
.legal ul li, .legal ol li { margin: 6px 0; }

/* ---------- dos planes con selector de videos al mes ---------- */
.dos-planes { grid-template-columns: repeat(2, 1fr); max-width: 940px; margin: 0 auto; }
.plan-que { color: var(--suave); margin: -4px 0 14px; }
.selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 5px; border-radius: 14px; background: rgba(8,15,36,.7); border: 1px solid var(--borde); margin-bottom: 14px; }
.selector button { all: unset; cursor: pointer; text-align: center; padding: 9px 6px; border-radius: 10px; font-weight: 600; font-size: .9rem; color: var(--suave); transition: background .2s, color .2s; }
.selector button[aria-checked="true"] { background: linear-gradient(90deg, var(--turq), var(--azul)); color: #04101f; } .selector button:focus-visible { outline: 2px solid var(--turq); }
.precio small { font-size: .95rem; color: var(--suave); font-weight: 600; } .plan .precio { font-size: 2.4rem; margin-bottom: 2px; }
.por-video { color: var(--turq); font-weight: 600; font-size: .9rem; margin: 0 0 14px; }
.nota-plan { font-size: .78rem; color: var(--suave); margin: 12px 0 0; }
@media (max-width: 980px) { .dos-planes { grid-template-columns: 1fr; } }