/* PubliCode · portada 0.5.2 — entrada "de bolsillo" y recuadro de video.
   Se carga DESPUÉS de sitio.css. Todo el contenido es visible sin JavaScript
   y sin animación (prefers-reduced-motion lo apaga con la regla global de sitio.css). */

:root{--salida:cubic-bezier(.16,1,.3,1)}

/* ── 1. Encabezado: la C se cierra alrededor del código ───────────────── */
.cabecera{animation:pc-baja .5s var(--salida) both}
.marca svg path{transform-box:fill-box;transform-origin:50% 50%;animation:pc-c .8s var(--salida) .1s both}
.marca svg rect{transform-box:fill-box;transform-origin:50% 50%;animation:pc-codigo .55s var(--salida) .45s both}
.menu > *{animation:pc-aparece .4s ease-out both}
.menu > :nth-child(1){animation-delay:.15s}.menu > :nth-child(2){animation-delay:.19s}
.menu > :nth-child(3){animation-delay:.23s}.menu > :nth-child(4){animation-delay:.27s}
.menu > :nth-child(5){animation-delay:.31s}.menu > :nth-child(6){animation-delay:.35s}

@keyframes pc-baja{from{opacity:0;transform:translateY(-.75rem)}}
@keyframes pc-c{from{opacity:0;transform:rotate(-140deg) scale(.9)}}
@keyframes pc-codigo{from{opacity:0;transform:translateX(160%) scale(.92)}}
@keyframes pc-aparece{from{opacity:0;transform:translateY(-.25rem)}}

/* ── 2. Portada: el titular se revela, el texto llega en cascada ──────── */
.portada .etiqueta{animation:pc-sube .6s var(--salida) .2s both}
.portada .etiqueta::before{transform-origin:left;animation:pc-linea .7s var(--salida) .25s both}
.portada .titular{animation:pc-titular .9s var(--salida) .3s both}
.portada .entrada{animation:pc-sube .7s var(--salida) .5s both}
.portada .acciones{animation:pc-sube .7s var(--salida) .58s both}
.portada .desde{animation:pc-sube .7s var(--salida) .66s both}
.portada .aviso-beta{animation:pc-sube .7s var(--salida) .74s both}
.portada::before{animation:pc-luz 1.6s ease-out .3s both}

@keyframes pc-sube{from{opacity:0;transform:translateY(1rem)}}
@keyframes pc-linea{from{transform:scaleX(0)}}
@keyframes pc-titular{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(.35em);filter:blur(6px)}to{clip-path:inset(-15% -5% -25% -5%)}}
@keyframes pc-luz{from{opacity:0}}

/* ── 3. Teléfonos: salen del bolsillo y se abren en abanico ───────────── */
.escena .t1{animation:pc-sale .9s var(--salida) .45s both,flotar 7s ease-in-out 1.6s infinite}
.escena .t2{animation:pc-abanico-izq .8s var(--salida) .8s both}
.escena .t3{animation:pc-abanico-der .8s var(--salida) .86s both}
.qr-prueba{animation:pc-qr .5s var(--salida) 1.15s both}

@keyframes pc-sale{from{opacity:0;transform:translateY(3.5rem) scale(.95)}}
@keyframes pc-abanico-izq{from{opacity:0;transform:translateX(35%) rotate(0deg) scale(.82)}}
@keyframes pc-abanico-der{from{opacity:0;transform:translateX(-35%) rotate(0deg) scale(.8)}}
@keyframes pc-qr{from{opacity:0;transform:translateY(.75rem) scale(.94)}}

/* En móvil los teléfonos quedan debajo del pliegue: la secuencia espera a
   que se vean (portada.js añade .en-vista). Sin JavaScript se reproduce normal. */
html:not(.sin-js) .escena:not(.en-vista) .telefono,
html:not(.sin-js) .escena:not(.en-vista) .qr-prueba{animation-play-state:paused}

/* La animación infinita no corre cuando la portada no está en pantalla */
.escena.fuera .t1{animation-play-state:running,paused}

/* ── 4. Recuadro de video ─────────────────────────────────────────────── */
.video-seccion .envoltura{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.video-marco{position:relative;justify-self:center;width:min(100%,21rem);aspect-ratio:9/16;border-radius:1.75rem;padding:.5rem;background:var(--noche);box-shadow:0 0 0 1px var(--linea-osc),0 2rem 4rem rgba(14,26,33,.28),0 0 3.5rem rgba(232,185,49,.16)}
.video-marco video{display:block;width:100%;height:100%;object-fit:cover;border-radius:1.3rem;background:#05090C}
.video-play{position:absolute;inset:.5rem;display:grid;place-items:center;align-content:center;gap:.9rem;border:0;border-radius:1.3rem;cursor:pointer;color:var(--papel);font:600 .9375rem/1.2 var(--sans);background:linear-gradient(to top,rgba(5,9,12,.82),rgba(5,9,12,.1) 55%);transition:opacity .2s ease}
.video-play span:first-child{display:grid;place-items:center;width:4.5rem;height:4.5rem;border-radius:50%;background:var(--maiz);color:var(--noche);box-shadow:0 0 0 .5rem rgba(232,185,49,.22);transition:transform .2s var(--salida),box-shadow .2s}
.video-play svg{width:1.6rem;height:1.6rem;margin-left:.2rem}
.video-play:hover span:first-child{transform:scale(1.06);box-shadow:0 0 0 .7rem rgba(232,185,49,.28)}
.video-play:active span:first-child{transform:scale(.96)}
.video-play small{font:500 .75rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#B9C5CB}
.video-play[hidden]{display:none}
.video-marco.reproduciendo .video-play{opacity:0;pointer-events:none}
.video-texto .acciones{margin-top:2rem}
.video-puntos{margin-top:1.5rem;display:grid;gap:.6rem}
.video-puntos li{display:flex;gap:.7rem;align-items:baseline;color:var(--suave)}
.video-puntos li::before{content:"";flex:none;width:.45rem;height:.45rem;border-radius:50%;background:var(--maiz);transform:translateY(-.1rem)}
@media (max-width:52rem){
  .video-seccion .envoltura{grid-template-columns:1fr}
  .video-marco{width:min(100%,19rem)}
}

/* ── 5. Portada en el teléfono: el producto se ve desde el primer pantallazo ──
   Orden: titular → texto → botones → teléfonos → precio y aviso de beta. */
@media (max-width:56rem){
  .portada{padding-top:2.25rem;padding-bottom:3rem}
  .portada .envoltura{row-gap:0}
  .portada .envoltura > div:first-child{display:contents}
  .portada .etiqueta{order:1}
  .portada .titular{order:2}
  .portada .entrada{order:3}
  .portada .acciones{order:4;margin-top:1.5rem}
  .portada .escena{order:5;margin-top:1.75rem}
  .portada .desde{order:6;margin-top:1.5rem}
  .portada .aviso-beta{order:7;margin-top:1rem}
  .portada .titular,.portada .entrada,.portada .acciones,.portada .desde,.portada .aviso-beta{justify-self:stretch}
}
@media (max-width:30rem){
  .portada .etiqueta{font-size:.6875rem;letter-spacing:.1em;gap:.5rem}
  .portada .etiqueta::before{width:1.25rem}
  .portada .entrada{margin-top:1rem;font-size:1rem}
  .portada .acciones{display:grid;grid-template-columns:1fr;gap:.6rem}
  .portada .acciones .boton{width:100%}
  .portada .escena{height:26.5rem}
  .portada .telefono{width:11.25rem}
  .portada .escena .t1{margin-left:-5.625rem}
  .portada .desde{font-size:.875rem;line-height:1.5}
  .portada .aviso-beta{font-size:.8125rem;padding:.75rem .9rem}
}

/* ── 6. Áreas táctiles de al menos 44 px en los enlaces sueltos ───────── */
@media (max-width:48rem){
  .pie a{padding:.65rem 0}
  .desde a{padding:.75rem 0}
}

/* ── 7. Ajustes 0.5.1 ─────────────────────────────────────────────────── */
/* Los enlaces internos (#video, #precios…) ya no quedan bajo el encabezado fijo */
main [id]{scroll-margin-top:4.75rem}

/* Portada del video: centro más oscuro y etiquetas sobre fondo propio */
.video-play{background:radial-gradient(circle at 50% 50%,rgba(5,9,12,.82) 0,rgba(5,9,12,.58) 42%,rgba(5,9,12,.22) 78%)}
.video-play span:nth-child(2),.video-play small{padding:.35rem .8rem;border-radius:99px;background:rgba(5,9,12,.74)}
.video-play span:nth-child(2){font-size:1rem}
.video-play small{color:#D7E0E4}

/* Subtítulos del video */
.video-marco video::cue{background:rgba(5,9,12,.8);color:#F6F3EA;font-family:Figtree,system-ui,sans-serif;font-size:.95rem;line-height:1.35}

/* Aviso de precio de introducción con fecha límite */
.desde .promo-chip{display:inline-block;margin-right:.5rem;padding:.25rem .55rem;border:1px solid var(--maiz);border-radius:99px;font:500 .6875rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--maiz);vertical-align:.1em}
.desde [data-promo-dias]:not(:empty){color:var(--maiz);font-weight:600}
[data-promo-despues][hidden]{display:none!important}

/* ── 8. Ajustes 0.5.2 ─────────────────────────────────────────────────── */
/* Encabezado en el teléfono: botón y logotipo con 44 px de área táctil */
@media (max-width:52rem){
  .menu .boton{min-height:2.75rem}
  .marca{min-height:2.75rem}
}