/* ==========================================================================
   SORTEOWEB · Estilos de la VISTA PRINCIPAL (view/vista.php)
   Requiere assets/css/style.css (variables, botones, etc.), cárgalo antes.
   [1] Hero + fondo animado   [2] Slider de premios   [3] Tarjeta cuenta regresiva
   [4] Cómo participar        [5] Animaciones         [6] Responsive
   ========================================================================== */

/* [1] HERO + FONDO ANIMADO ================================================ */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 4rem);
    min-height: calc(100vh - var(--header-h));
    display: flex;
    align-items: center;
    background: radial-gradient(120% 90% at 50% 0%, var(--hero-glow, #0c2c7a) 0%, var(--bg) 62%);
}
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* Fondo de una plantilla PERSONALIZADA en imagen/gif/video (admin/view/plantilla_editar.php,
   config/Plantillas.php::fondoPersonalizado()). Ausente para las 10 plantillas fijas y para
   una personalizada con fondo_tipo="color" (esas usan --hero-glow arriba, nada más). Va
   detrás de .confetti/.hero__bg (z-index -3) para no taparlos. */
.hero__custom-bg { position: absolute; inset: 0; z-index: -3; pointer-events: none; overflow: hidden; }
.hero__custom-bg-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__custom-bg-media--img { background-size: cover; background-position: center; background-repeat: no-repeat; }
/* Capa de color encima del fondo (editor visual: "Overlay"); la activa el CSS de la plantilla */
.hero__custom-bg-overlay { position: absolute; inset: 0; display: none; }
/* Video con "Mostrar controles": los controles tienen que poder recibir clics */
.hero__custom-bg[data-controles] { pointer-events: auto; }
.hero__unmute {
    position: absolute; right: 1rem; bottom: 1rem; z-index: 1; pointer-events: auto;
    padding: .5rem 1rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(3, 11, 36, .55); color: #fff; font-weight: 600; font-size: .85rem; cursor: pointer;
    backdrop-filter: blur(6px);
}
.hero__unmute[aria-pressed="true"] { opacity: .7; }

.hero__bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.orb--1 { width: 420px; height: 420px; left: -120px; top: -80px; background: var(--blue-bright); animation: float-orb 14s ease-in-out infinite; }
.orb--2 { width: 480px; height: 480px; right: -140px; top: 10%; background: var(--blue); animation: float-orb 17s ease-in-out infinite reverse; }
.orb--3 { width: 360px; height: 360px; left: 35%; bottom: -160px; background: var(--sky); opacity: .35; animation: float-orb 20s ease-in-out infinite; }

.grid-floor {
    position: absolute;
    left: -25%;
    right: -25%;
    bottom: -8%;
    height: 48%;
    background-image:
        linear-gradient(var(--grid-line-1, rgba(var(--sky-rgb), .32)) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line-2, rgba(var(--blue-rgb), .38)) 1px, transparent 1px);
    background-size: 56px 56px;
    transform: perspective(520px) rotateX(62deg);
    transform-origin: bottom;
    -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%);
    mask-image: linear-gradient(to top, #000 10%, transparent 90%);
    animation: grid-move 3.5s linear infinite;
}

.hero__inner { display: grid; gap: 1.75rem; width: min(1180px, 100% - 2rem); }

/* [1b] ELEMENTOS PROPIOS DEL EDITOR VISUAL DE PLANTILLAS ====================
   Solo aparecen si una plantilla personalizada los define (admin/view/plantilla_editar.php);
   con las 10 plantillas fijas siempre quedan ocultos. Su estilo fino (tamaño, color, fuente,
   posición...) lo agrega el CSS de la plantilla (PlantillaAdminModel::generarCss()). */
.tpl-anuncio {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2; margin: 0;
    padding: .55rem 1rem; text-align: center; font-size: .9rem; font-weight: 700; letter-spacing: .04em;
    color: #fff; background: var(--grad-btn); box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}
.hero:has(> .tpl-anuncio:not([hidden])) { padding-top: calc(clamp(2rem, 5vw, 4rem) + 2.4rem); }
.tpl-intro { display: grid; justify-items: center; gap: .55rem; text-align: center; }
.tpl-logo { height: 90px; width: auto; max-width: 80%; object-fit: contain; }
.tpl-titulo { margin: 0; font-size: clamp(1.6rem, 4vw, 2.8rem); font-weight: 800; line-height: 1.1; color: var(--text); text-wrap: balance; }
.tpl-sep { display: none; margin: .15rem 0; border-radius: 999px; }
.tpl-subtitulo { margin: 0; max-width: 60ch; font-size: clamp(1rem, 1.8vw, 1.2rem); color: var(--muted); }
.tpl-info { margin: 0; font-size: .95rem; font-weight: 600; color: var(--sky); }
.tpl-secundario { margin: 0; text-align: center; font-size: .9rem; color: var(--muted); white-space: pre-line; }
.tpl-intro[hidden], .tpl-intro [hidden], .tpl-anuncio[hidden], .tpl-info[hidden], .tpl-secundario[hidden] { display: none !important; }

/* [2] SLIDER DE PREMIOS =================================================== */
.slider { position: relative; }
.slides { display: grid; }

.slide {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: clamp(1rem, 4vw, 3rem);
    min-height: 400px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(40px) scale(.98);
    transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .7s;
}
.slide.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.slide.is-leaving { transform: translateX(-40px) scale(.98); }

/* Distribuciones de una plantilla PERSONALIZADA (config/PlantillaLayouts.php).
   "imagen_derecha" es la de siempre: nada que agregar aquí, es este .slide tal
   cual. Las 10 plantillas fijas nunca emiten data-layout -> cero cambio para ellas. */
body[data-layout="imagen_izquierda"] .slide { direction: rtl; }
body[data-layout="imagen_izquierda"] .slide > * { direction: ltr; }
body[data-layout="texto_arriba"] .slide,
body[data-layout="imagen_arriba"] .slide { grid-template-columns: 1fr; justify-items: center; text-align: center; }
body[data-layout="imagen_arriba"] .slide__art { order: -1; }

.slide__text { display: grid; gap: 1rem; justify-items: start; }

.tag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 1rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sky);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    box-shadow: 0 0 18px rgba(255, 255, 255, .2);
}
.slide__title { font-size: clamp(2rem, 5.2vw, 3.8rem); line-height: 1.08; font-weight: 800; text-wrap: balance; }
.slide__desc { color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 52ch; }
.slide__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .4rem; }

.slide__art { display: grid; place-items: center; }

.prize-orb {
    position: relative;
    width: min(340px, 72vw);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .18), rgba(255, 255, 255, .03) 60%);
    border: 1px solid var(--border);
    box-shadow: 0 0 60px rgba(var(--blue-rgb), .45), inset 0 0 40px rgba(var(--blue-bright-rgb), .15);
}
.prize-orb::before {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(var(--blue-bright), var(--blue), var(--sky), var(--white), var(--blue-bright));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: spin 8s linear infinite;
    filter: drop-shadow(0 0 10px rgba(var(--blue-bright-rgb), .7));
}
.prize-orb::after {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, .25);
    animation: spin 26s linear infinite reverse;
}
.prize-orb svg { width: 56%; height: 56%; filter: drop-shadow(0 0 16px rgba(var(--sky-rgb), .55)); animation: bob 4s ease-in-out infinite; z-index: 1; }
.prize-orb--img img {
    width: 82%;
    height: 82%;
    object-fit: cover;
    border-radius: 50%;
    animation: bob 4s ease-in-out infinite;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .18);
}
.prize-orb__num {
    position: absolute;
    right: 4%;
    bottom: 8%;
    z-index: 2;
    font-family: var(--font-num);
    font-weight: 800;
    font-size: .95rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    color: #03102e;
    background: var(--grad-white);
    box-shadow: 0 0 20px rgba(255, 255, 255, .6);
}

.slider__controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
.slider__controls[hidden] { display: none; }
.slider__btn {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    line-height: 1;
    padding: 0 0 4px;
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 50%;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.slider__btn:hover { background: rgba(255, 255, 255, .14); transform: scale(1.08); box-shadow: 0 0 18px rgba(var(--sky-rgb), .35); }

.slider__dots { display: flex; gap: .55rem; }
.dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
    transition: width .3s ease, background .3s ease, box-shadow .3s ease;
}
.dot.is-active { width: 34px; background: var(--grad); box-shadow: 0 0 14px rgba(var(--blue-bright-rgb), .7); }

.slider__progress { height: 3px; margin: 1rem auto 0; width: min(340px, 70%); background: rgba(255, 255, 255, .1); border-radius: 3px; overflow: hidden; }
.slider__progress span { display: block; height: 100%; width: 100%; background: var(--grad); transform-origin: left; transform: scaleX(0); }

/* Skeleton (mientras carga la API) */
.sk { display: block; border-radius: 12px; background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.05) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.sk--pill { width: 140px; height: 30px; border-radius: 999px; }
.sk--title { width: min(480px, 90%); height: 64px; }
.sk--line { width: min(420px, 85%); height: 16px; }
.sk--line.short { width: min(260px, 60%); }
.sk--circle { width: min(340px, 72vw); aspect-ratio: 1; border-radius: 50%; }

/* [3] TARJETA CUENTA REGRESIVA ============================================ */
.draw-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "head head" "count side";
    align-items: center;
    gap: 1.1rem 2rem;
    padding: 1.4rem 1.6rem;
    background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .4), 0 0 0 1px rgba(var(--blue-rgb), .15);
}
.draw-card__head { grid-area: head; display: flex; flex-direction: column; gap: .35rem; }
.draw-card__head-row { display: flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: .04em; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 0 0 rgba(255, 59, 92, .7); animation: ping 1.6s ease-out infinite; }
.draw-card__promo { margin: 0; max-width: 52ch; font-size: .85rem; font-weight: 400; line-height: 1.4; color: var(--muted); white-space: pre-line; }

.countdown { grid-area: count; display: flex; gap: .75rem; }
.unit {
    min-width: 78px;
    padding: .7rem .5rem .55rem;
    text-align: center;
    background: rgba(3, 11, 36, .6);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: inset 0 0 20px rgba(var(--blue-rgb), .15);
}
.unit b {
    display: block;
    font-family: var(--font-num);
    font-size: clamp(1.6rem, 3.6vw, 2.3rem);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 0 14px rgba(var(--sky-rgb), .8);
}
.unit b.tick { animation: tick .35s ease; }
.unit small { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }

.draw-card__side { grid-area: side; display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.tickets-progress { flex: 1 1 220px; min-width: 200px; }
.tickets-progress__row { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; color: var(--muted); margin-bottom: .4rem; }
.tickets-progress__row strong { color: var(--text); font-family: var(--font-num); font-size: .95rem; }
.bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--grad);
    box-shadow: 0 0 14px rgba(var(--blue-bright-rgb), .8);
    transition: width 1.4s cubic-bezier(.2, .8, .2, 1);
}

/* [4] CÓMO PARTICIPAR ===================================================== */
.steps { padding: clamp(3rem, 7vw, 5.5rem) 0; background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
.steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.5rem; }
.step {
    position: relative;
    padding: 2rem 1.6rem 1.7rem;
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.step:hover { transform: translateY(-8px); border-color: rgba(var(--sky-rgb), .5); box-shadow: 0 16px 40px rgba(var(--sky-rgb), .15); }
.step__num {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1rem;
    font-family: var(--font-num);
    font-weight: 800;
    font-size: 1.3rem;
    border-radius: 16px;
    background: var(--grad-btn);
    box-shadow: 0 0 22px rgba(var(--blue-bright-rgb), .5);
}
.step h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.step p { color: var(--muted); font-size: .96rem; }

/* [5] ANIMACIONES DE LA VISTA ============================================= */
@keyframes float-orb { 50% { transform: translate(40px, 30px) scale(1.12); } }
@keyframes grid-move { to { background-position: 0 56px, 56px 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes ping { 70%, 100% { box-shadow: 0 0 0 12px rgba(255, 59, 92, 0); } }
@keyframes tick { 0% { transform: scale(1.25); color: var(--white); } 100% { transform: scale(1); } }

/* [6] RESPONSIVE DE LA VISTA ============================================== */
@media (max-width: 900px) {
    .slide { grid-template-columns: 1fr; text-align: center; min-height: 0; gap: 1.5rem; }
    .slide__art { order: -1; }
    .slide__text { justify-items: center; }
    .slide__cta { justify-content: center; }
    .prize-orb { width: min(250px, 62vw); }

    .draw-card { grid-template-columns: 1fr; grid-template-areas: "head" "count" "side"; justify-items: center; text-align: center; }
    .countdown { justify-content: center; }
    .draw-card__side { justify-content: center; width: 100%; }
    .steps__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .unit { min-width: 66px; }
    .countdown { gap: .5rem; }
    .draw-card { padding: 1.1rem; }
    .draw-card__side .btn { width: 100%; }
}

/* [7] PORTADA SEGÚN EL ESTADO DE LOS SORTEOS =================================
   view/vista.php: modo programado / finalizado / preparando (VistaModel::portada()).
   En esos modos no hay slider, contador ni botón de compra. */
.draw-card__fin { margin: .2rem 0 0; font-size: .9rem; font-weight: 600; color: var(--sky); }
.draw-card.is-finalizado .countdown { opacity: .45; filter: grayscale(.6); }
.draw-card.is-finalizado .draw-card__fin { color: #ffcf5c; }
.draw-card.is-finalizado .live-dot { animation: none; background: #ffcf5c; }
#btnBuy:disabled, [data-buy]:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.4); animation: none; }

.portada-estado {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    padding: clamp(1.4rem, 3vw, 2.4rem);
    background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 6px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .4), 0 0 0 1px rgba(var(--blue-rgb), .15);
}
.portada-estado__arte { display: grid; place-items: center; min-width: 0; }
.portada-estado__texto { display: grid; gap: .9rem; justify-items: start; min-width: 0; }
.portada-estado__texto p { margin: 0; color: var(--muted); font-size: clamp(.98rem, 1.5vw, 1.08rem); max-width: 54ch; }
.portada-estado__texto p strong { color: var(--text); }
.portada-estado__titulo { font-size: clamp(1.8rem, 4.4vw, 3.1rem); line-height: 1.1; font-weight: 800; text-wrap: balance; }
.portada-estado__lead { font-size: clamp(1.05rem, 1.8vw, 1.2rem) !important; color: var(--text) !important; }
.portada-estado__nombre { font-family: var(--font-num); font-size: 1.05rem !important; letter-spacing: .04em; color: var(--sky) !important; }
.portada-estado__promo { padding: .7rem .9rem; border-left: 3px solid var(--blue-bright); background: rgba(var(--blue-bright-rgb), .08); border-radius: 0 12px 12px 0; white-space: pre-line; }
.portada-estado__nota { font-size: .92rem !important; }
.portada-estado__acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .2rem; }

/* Datos del próximo sorteo */
.portada-proximo { display: grid; gap: .55rem; width: 100%; max-width: 480px; margin: .2rem 0; padding: 1rem 1.1rem; background: rgba(3, 11, 36, .55); border: 1px solid var(--border); border-radius: 16px; }
.portada-proximo div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .8rem; align-items: baseline; }
.portada-proximo dt { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.portada-proximo dd { margin: 0; font-weight: 700; color: var(--text); }
.portada-fin-mini { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .7rem .9rem; font-size: .9rem; color: var(--muted); border: 1px dashed var(--border); border-radius: 14px; }

/* Trofeo (sorteo finalizado) */
.trofeo-orb { position: relative; display: grid; place-items: center; width: min(300px, 64vw); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, rgba(255, 207, 92, .25), rgba(255, 255, 255, .03) 62%);
    border: 1px solid rgba(255, 207, 92, .35); box-shadow: 0 0 70px rgba(255, 190, 60, .3), inset 0 0 40px rgba(255, 207, 92, .15); }
.trofeo-orb span { font-size: clamp(5rem, 14vw, 8rem); filter: drop-shadow(0 0 24px rgba(255, 200, 70, .6)); animation: il-flotar 5s ease-in-out infinite; }

/* Ilustración (view/partials/ilustracion-preparando.php): toma los colores de la plantilla */
.ilus { width: 100%; max-width: 520px; height: auto; overflow: visible; }
.il-piso { fill: rgba(var(--blue-bright-rgb), .22); filter: blur(2px); }
.il-circuito path { fill: none; stroke: rgba(var(--sky-rgb), .45); stroke-width: 2; stroke-dasharray: 5 7; animation: il-flujo 2.4s linear infinite; }
.il-circuito circle { fill: var(--sky); }
.il-holo { fill: rgba(var(--sky-rgb), .08); stroke: rgba(var(--sky-rgb), .65); stroke-width: 1.5; }
.il-holo-barra { fill: rgba(var(--blue-bright-rgb), .45); }
.il-holo-celdas rect { fill: rgba(var(--sky-rgb), .28); }
.il-holo-marca { fill: var(--sky); filter: drop-shadow(0 0 6px rgba(var(--sky-rgb), .9)); animation: il-parpadeo 2s ease-in-out infinite; }
.il-holo-linea { fill: rgba(var(--sky-rgb), .55); }
.il-holo-pista { fill: rgba(255, 255, 255, .12); }
.il-holo-avance { fill: var(--blue-bright); transform-box: fill-box; transform-origin: left; animation: il-carga 3.2s ease-in-out infinite; }
.il-cohete-cuerpo { fill: #eaf4ff; }
.il-cohete-ventana { fill: var(--blue-bright); stroke: #fff; stroke-width: 2; }
.il-cohete-ala { fill: var(--blue-bright); }
.il-cohete-fuego { fill: #ffb547; transform-box: fill-box; transform-origin: top; animation: il-fuego .35s ease-in-out infinite alternate; }
.il-mueble { fill: rgba(255, 255, 255, .2); }
.il-mueble--pata { fill: rgba(255, 255, 255, .12); }
.il-monitor { fill: #0b1530; stroke: rgba(var(--sky-rgb), .6); stroke-width: 2; filter: drop-shadow(0 0 18px rgba(var(--blue-bright-rgb), .55)); }
.il-codigo rect { fill: rgba(255, 255, 255, .78); }
.il-codigo .il-cursor { fill: var(--sky); animation: il-parpadeo 1s steps(2) infinite; }
.il-teclado { fill: rgba(255, 255, 255, .35); }
.il-taza { fill: rgba(var(--sky-rgb), .55); }
.il-taza-asa { fill: none; stroke: rgba(var(--sky-rgb), .55); stroke-width: 3; }
.il-silla { fill: rgba(255, 255, 255, .16); }
.il-pierna { fill: none; stroke: #1c2748; stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; }
.il-zapato { fill: #f2f6ff; }
.il-brazo { fill: none; stroke: var(--blue); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.il-piel { fill: #e7b38f; }
.il-pelo { fill: #1d2240; }
.il-ojo { fill: #1d2240; }
.il-sonrisa { fill: none; stroke: #9a5a3c; stroke-width: 2; stroke-linecap: round; }
.il-audifono { fill: none; stroke: #f2f6ff; stroke-width: 5; stroke-linecap: round; }
.il-audifono-copa { fill: var(--sky); }
.il-destellos path, .il-destellos circle { fill: #fff; opacity: .8; animation: il-parpadeo 2.6s ease-in-out infinite; }
.il-destellos path:nth-child(2) { animation-delay: .8s; }
.il-destellos path:nth-child(3) { animation-delay: 1.5s; }
.il-flota { animation: il-flotar 6s ease-in-out infinite; }
.il-flota--2 { animation-delay: -2s; }
.il-flota--3 { animation-delay: -4s; }
.il-persona .il-brazo { animation: il-teclear 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 0 0; }

@keyframes il-flotar { 50% { transform: translateY(-9px); } }
@keyframes il-flujo { to { stroke-dashoffset: -24; } }
@keyframes il-parpadeo { 50% { opacity: .25; } }
@keyframes il-carga { 0% { transform: scaleX(.15); } 70%, 100% { transform: scaleX(1.48); } }
@keyframes il-fuego { to { transform: scaleY(1.35); } }
@keyframes il-teclear { 50% { transform: translateY(1.5px); } }
@media (prefers-reduced-motion: reduce) {
    .il-flota, .il-circuito path, .il-holo-marca, .il-holo-avance, .il-cohete-fuego, .il-codigo .il-cursor,
    .il-destellos path, .il-destellos circle, .il-persona .il-brazo, .trofeo-orb span { animation: none; }
}
@media (max-width: 900px) {
    .portada-estado { grid-template-columns: 1fr; text-align: center; }
    .portada-estado__texto { justify-items: center; }
    .portada-estado__acciones, .portada-fin-mini { justify-content: center; }
    .portada-proximo { text-align: left; }
    .ilus { max-width: 400px; }
}
@media (max-width: 480px) {
    .portada-estado { padding: 1.1rem; }
    .portada-proximo div { grid-template-columns: 1fr; gap: .1rem; }
}