/* =========================================================================
   THE LAST — estilos.css
   Hoja de estilos compartida por TODAS las subpáginas del sitio.
   Un solo archivo, un solo lugar donde tocar colores, tipografía, header,
   footer y el sistema de tema Medz (oscuro) / Dez (claro).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&family=Russo+One&display=swap');

/* ---------- 1. TOKENS ---------------------------------------------------- */

:root {
    /* Medz — tema oscuro (por defecto) */
    --bg: #030303;
    --text: #f4f2ec;
    --text-muted: #9a9890;
    --surface: #0c0c0b;
    --surface-2: #141412;
    --line: rgba(244, 242, 236, 0.14);
    --card-shadow: 0 22px 45px rgba(0, 0, 0, 0.55);
    --accent: #f4f2ec;      /* el "brillo" — se usa con moderación */
    --accent-ink: #030303;  /* texto sobre el acento */

    /* --font es el de TODO el texto normal — párrafos, botones, nav, tarjetas.
       --font-display es SOLO para los títulos grandes tipo "THE LAST" y el
       wordmark del logo — ese look grueso y geométrico se queda igual, nada
       más ya no se usa para el resto del sitio. */
    --font: 'Manrope', sans-serif;
    --font-display: 'Space Grotesk', sans-serif;
    --header-h: 76px;
    --max-w: 1240px;
}

html[data-theme="light"] {
    /* Dez — tema claro */
    --bg: #e3dcc8;
    --text: #1b1912;
    --text-muted: #6b6552;
    --surface: #dcd4bc;
    --surface-2: #d3caac;
    --line: rgba(27, 25, 18, 0.14);
    --card-shadow: 0 16px 34px rgba(27, 25, 18, 0.20);
    --accent: #5a6a4e;      /* verde musgo apagado */
    --accent-ink: #f4f2ec;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    transition: background 0.3s ease, color 0.3s ease;
    overflow-x: clip;
}

img {
    max-width: 100%;
    display: block;
}

/* Dificulta guardar/arrastrar imágenes y video: quita el menú de
   "mantener pulsado" en móvil y el arrastre en escritorio. */
img,
video {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
}

::selection {
    background: var(--accent);
    color: var(--accent-ink);
}

.wrap {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 56px);
}

/* Foco visible — accesibilidad, no se quita nunca */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ===== ¿POR QUÉ NO SE MUEVE NADA EN MI COMPUTADORA? =====
   Si tu sistema tiene activado "reducir movimiento" / "reducir animaciones",
   el navegador se lo avisa a la página y aquí se congela TODO el movimiento
   (viaje de cámara, tarjetas flotando, transiciones). Es una función de
   accesibilidad: hay gente a la que el movimiento le provoca mareo.

   Dónde revisarlo:
     Windows  → Configuración › Accesibilidad › Efectos visuales › Efectos de animación
     macOS    → Ajustes › Accesibilidad › Pantalla › Reducir movimiento
     Android  → Accesibilidad › Quitar animaciones
     iOS      → Accesibilidad › Movimiento › Reducir movimiento

   Si prefieres que las animaciones se vean SIEMPRE, aunque el visitante
   tenga esa opción activada, borra este bloque completo y los otros dos
   marcados con "prefers-reduced-motion: reduce" más abajo. */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- 2. TIPOGRAFÍA ------------------------------------------------- */

h1, h2, h3 {
    font-family: var(--font);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 0.95;
}

.display-1 {
    /* wordmark de hero — gigante, ocupa el ancho */
    font-family: var(--font-display);
    font-size: clamp(4.5rem, 16vw, 13rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.85;
}

.display-2 {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.label-sm {
    /* etiquetas pequeñas tipo "ficha técnica" — info real, no relleno */
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.body-lead {
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    color: var(--text-muted);
    max-width: 62ch;
    line-height: 1.65;
}

p {
    max-width: 68ch;
}

/* ---------- 3. HEADER ------------------------------------------------------ */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.site-header.scrolled {
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

.site-header .wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wordmark {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.wordmark span {
    color: var(--text-muted);
    font-weight: 400;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
}

.main-nav a {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    position: relative;
    padding-bottom: 4px;
}

.main-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--text);
    transition: width 0.25s ease;
}

.main-nav a:hover,
.main-nav a.current {
    color: var(--text);
}

.main-nav a.current::after,
.main-nav a:hover::after {
    width: 100%;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Acceso al cuarto desde la barra de arriba. En computadora se esconde:
   ahí ya está el botón grande del hero. Solo aparece en celular.
   Va con el selector del contenedor para tener más peso que cualquier otra
   regla suelta que pudiera pisarlo. */
.header-actions .cuarto-btn {
    display: none;
    align-items: center;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    white-space: nowrap;
    transition: border-color 0.2s ease;
}

.header-actions .cuarto-btn:hover { border-color: var(--text); }

.theme-btn {
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease;
}

.theme-btn:hover {
    border-color: var(--text);
}

.theme-btn img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.menu-btn {
    display: none;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.menu-btn span {
    width: 16px;
    height: 1px;
    background: var(--text);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-btn.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn.open span:nth-child(2) { opacity: 0; }
.menu-btn.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
    .main-nav {
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    .main-nav.open {
        max-height: 400px;
    }
    .main-nav a {
        width: 100%;
        padding: 16px clamp(20px, 5vw, 56px);
        border-top: 1px solid var(--line);
    }
    .menu-btn {
        display: inline-flex;
    }
}

/* ---------- 4. HERO --------------------------------------------------------- */

.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding-top: var(--header-h);
}

.hero-figure {
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: clamp(0px, 6vw, 120px);
    height: 92%;
    width: auto;
    max-width: 60%;
    object-fit: contain;
    object-position: bottom;
}

/* Marca de agua detrás del hero. Solo en PC: en celular no hay espacio y
   estorbaría al título. */
.hero-kanji {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    font-family: 'Noto Sans JP', var(--font);
    font-weight: 700;
    font-size: clamp(7rem, 17vw, 19rem);
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: var(--text);
    opacity: 0.045;
    pointer-events: none;
    user-select: none;
}

/* En claro el texto es oscuro sobre fondo hueso, así que necesita algo más
   de cuerpo para leerse igual de sutil que en oscuro. */
[data-theme="light"] .hero-kanji { opacity: 0.075; }

@media (max-width: 900px) {
    .hero-kanji { display: none; }

    /* Aquí sí aparece el acceso al cuarto, junto al botón de tema. */
    .header-actions .cuarto-btn { display: inline-flex; }
}

.hero-tag {
    position: absolute;
    z-index: 2;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.hero-tag.top-left { top: calc(var(--header-h) + 24px); left: clamp(20px, 5vw, 56px); }
.hero-tag.top-right { top: calc(var(--header-h) + 24px); right: clamp(20px, 5vw, 56px); text-align: right; }

.hero-body {
    position: relative;
    z-index: 2;
    padding: 0 clamp(20px, 5vw, 56px) clamp(48px, 8vw, 96px);
}

.hero-title {
    max-width: 90%;
}

.hero-sub {
    margin-top: 20px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    border-top: 1px solid var(--line);
    padding-top: 20px;
}

@media (max-width: 700px) {
    .hero {
        min-height: 100svh;
        justify-content: flex-end;
        padding-top: var(--header-h);
        padding-bottom: 28px;
        overflow: hidden;
    }
    /* Absoluta y anclada a la derecha. El tamaño final se fuerza con
       transform: scale(), que amplía sí o sí sin depender de las
       proporciones internas del PNG (que era lo que la mantenía chica).
       El origen arriba-derecha la mantiene pegada a esa esquina al crecer. */
    .hero-figure {
        position: absolute !important;
        top: calc(var(--header-h) + 10px) !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;
        height: 46svh !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
    }

    /* Se sobreescriben AMBOS estados (normal y revelado) porque la sección 15
       usa selectores con ID y ganaría por especificidad. */
    #heroSection .hero-figure,
    #heroSection.revealed .hero-figure {
        transform: scale(1.45) !important;
        transform-origin: 100% 0 !important;
    }
    .hero-body {
        margin-top: auto;
    }
    .hero-title {
        max-width: 100%;
    }
}

/* ---------- 5. BOTONES ------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border: 1px solid var(--text);
    background: var(--text);
    color: var(--bg);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.btn:hover {
    background: transparent;
    color: var(--text);
}

.btn-ghost {
    background: transparent;
    color: var(--text);
}

.btn-ghost:hover {
    background: var(--text);
    color: var(--bg);
}

/* ---------- 6. SECCIONES / FICHAS ------------------------------------------- */

section {
    padding: clamp(64px, 10vw, 120px) 0;
    border-top: 1px solid var(--line);
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: clamp(32px, 5vw, 56px);
}

.section-head .label-sm {
    border: 1px solid var(--line);
    padding: 5px 10px;
}

.card-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.card {
    background: var(--bg);
    padding: 32px 28px;
    transition: background 0.2s ease;
}

.card:hover {
    background: var(--surface);
}

.card h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.card p {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.coming-soon {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.coming-soon .label-sm {
    border: 1px solid var(--line);
    display: inline-block;
    padding: 6px 12px;
    width: fit-content;
}

/* ---------- 7. FOOTER -------------------------------------------------------- */

.site-footer {
    border-top: 1px solid var(--line);
    padding: 40px 0;
}

.site-footer .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-social {
    display: flex;
    gap: 18px;
}

.footer-social img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: 0.8;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-social a:hover img {
    opacity: 1;
    transform: translateY(-2px);
}

.footer-copy {
    font-size: 0.78rem;
    color: var(--text-muted);
}

@media (max-width: 600px) {
    .site-footer .wrap {
        flex-direction: column-reverse;
        text-align: center;
    }
}

/* ---------- 8. CONTENIDO — TVMEDZ ---------------------------------------------
   La página es un televisor con su propio sistema: una pantalla de inicio con
   el último video de fondo, filas de videos y de apps, un explorador y un
   buscador. Es la única parte del sitio con esquinas redondeadas — aquí el
   redondeo tiene sentido porque imita una interfaz de televisión.
   ------------------------------------------------------------------------------ */

.tv-stage {
    perspective: 1500px;
    perspective-origin: 50% 45%;
}

.tv {
    transform-style: preserve-3d;
    transition: transform 0.85s cubic-bezier(0.7, 0, 0.2, 1);
    border-radius: 18px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    overflow: hidden;
}

/* Al ver un video la cámara se acerca al aparato. */
.tv.watching { transform: translateZ(110px); }

.tv-screen {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #070707;
    overflow: hidden;
    color: #f4f2ec;
}

/* --- Fondo: la miniatura del video elegido, o el arte de la app --- */
.tv-backdrop {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.7s ease, transform 1.4s ease;
}

.tv-backdrop.on { opacity: 1; transform: scale(1); }

/* Degradado para que el texto se lea encima de cualquier miniatura. */
.tv-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(3,3,3,0.96) 0%, rgba(3,3,3,0.72) 34%, rgba(3,3,3,0.12) 66%, rgba(3,3,3,0.45) 100%),
        linear-gradient(to right, rgba(3,3,3,0.8) 0%, rgba(3,3,3,0.1) 55%);
}

.tv-layer {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}

/* --- Barra de arriba --- */
.tv-top {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    flex: 0 0 auto;
}

.tv-tab {
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: rgba(244, 242, 236, 0.62);
    background: none;
    border: none;
    border-radius: 999px;
    padding: 7px 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease;
}

.tv-tab:hover { color: #f4f2ec; background: rgba(244, 242, 236, 0.1); }
.tv-tab.on { background: #f4f2ec; color: #0a0a0a; }

.tv-iconbtn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 999px;
    border: none;
    background: rgba(244, 242, 236, 0.1);
    color: #f4f2ec;
    cursor: pointer;
    transition: background 0.25s ease;
}

.tv-iconbtn:hover { background: rgba(244, 242, 236, 0.24); }
.tv-iconbtn.on { background: #f4f2ec; color: #0a0a0a; }
.tv-iconbtn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.9; }

.tv-clock {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: rgba(244, 242, 236, 0.5);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- Cuerpo de la pantalla --- */
.tv-body {
    position: relative;
    z-index: 3;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 0;
    overflow: hidden;
}

/* --- Bloque del video destacado --- */
.tv-hero { padding: 0 20px 14px; max-width: 62%; }

.tv-hero-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    background: var(--accent);
    color: var(--accent-ink);
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 10px;
}

/* Sin esto, el "display: inline-block" de arriba le gana al [hidden] del
   navegador y la insignia se queda visible aunque el JS ya la haya
   ocultado — que era justo el bug: se apagaba en el código, pero seguía
   pintada en pantalla. */
.tv-hero-badge[hidden] {
    display: none;
}

.tv-hero h3 {
    font-size: clamp(1.15rem, 2.4vw, 2.05rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.025em;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tv-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    color: #0a0a0a;
    background: #f4f2ec;
    border: none;
    border-radius: 999px;
    padding: 10px 20px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.tv-btn:hover { transform: translateY(-1px); background: #fff; }
.tv-btn::before {
    content: '';
    border-left: 10px solid currentColor;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.tv-btn.ghost {
    background: rgba(244, 242, 236, 0.14);
    color: #f4f2ec;
}

.tv-btn.ghost::before { display: none; }
.tv-btn.ghost:hover { background: rgba(244, 242, 236, 0.26); }

/* --- Filas deslizables --- */
.tv-rail { padding: 0 0 14px 20px; flex: 0 0 auto; }

.tv-rail-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 9px;
    padding-right: 20px;
}

.tv-rail-head h4 {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: rgba(244, 242, 236, 0.9);
}

.tv-rail-head span {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(244, 242, 236, 0.4);
}

.tv-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-right: 20px;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.tv-strip::-webkit-scrollbar { display: none; }

/* Tarjeta de video */
.tv-card {
    flex: 0 0 auto;
    width: 176px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    text-align: left;
    color: inherit;
}

.tv-card-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #131313;
    border: 1px solid rgba(244, 242, 236, 0.14);
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.tv-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tv-card:hover .tv-card-thumb,
.tv-card:focus-visible .tv-card-thumb {
    border-color: #f4f2ec;
    transform: translateY(-3px);
}

.tv-card.on .tv-card-thumb { border-color: var(--accent); }

.tv-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 7px;
    font-size: 0.72rem;
    line-height: 1.35;
    color: rgba(244, 242, 236, 0.62);
}

.tv-card:hover .tv-card-title { color: #f4f2ec; }

/* Mosaico de app */
.tv-app-tile {
    flex: 0 0 auto;
    width: 82px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}

.tv-tile-art {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: #17171a;
    border: 1px solid rgba(244, 242, 236, 0.14);
    display: grid;
    place-items: center;
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.tv-tile-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Si todavía no existe la imagen, se dibuja el nombre. Nunca se ve rota. */
.tv-tile-fallback {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: rgba(244, 242, 236, 0.86);
    text-align: center;
    padding: 4px;
    line-height: 1.2;
}

.tv-app-tile:hover .tv-tile-art,
.tv-app-tile:focus-visible .tv-tile-art {
    border-color: #f4f2ec;
    transform: translateY(-3px);
}

.tv-app-tile.on .tv-tile-art { border-color: var(--accent); }

/* --- Flechas de las filas --- */
.tv-rail { position: relative; }

.tv-rail-arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 30px;
    height: 46px;
    border: none;
    border-radius: 8px;
    background: rgba(10, 10, 10, 0.82);
    color: #f4f2ec;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, background 0.2s ease;
}

.tv-rail-arrow.show { opacity: 0.9; pointer-events: auto; }
.tv-rail-arrow:hover { background: #f4f2ec; color: #0a0a0a; }
.tv-rail-arrow.prev { left: 4px; }
.tv-rail-arrow.next { right: 6px; }

/* --- Cajón de apps: la barra diagonal que sube desde abajo --- */
.tv-appsbtn {
    position: absolute;
    right: 16px;
    bottom: 14px;
    z-index: 7;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #f4f2ec;
    background: rgba(10, 10, 10, 0.72);
    border: 1px solid rgba(244, 242, 236, 0.28);
    border-radius: 999px;
    padding: 9px 18px;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, bottom 0.42s cubic-bezier(0.7, 0, 0.2, 1);
}

.tv-appsbtn:hover { background: #f4f2ec; color: #0a0a0a; }
.tv.launcher-open .tv-appsbtn { bottom: 158px; background: #f4f2ec; color: #0a0a0a; }

.tv-launcher {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    gap: 5px;
    padding: 0 18px 12px;
    overflow-x: auto;
    scrollbar-width: none;
    transform: translateY(104%);
    transition: transform 0.42s cubic-bezier(0.7, 0, 0.2, 1);
    background: linear-gradient(to top, rgba(3, 3, 3, 0.94) 55%, transparent);
}

.tv-launcher::-webkit-scrollbar { display: none; }
.tv.launcher-open .tv-launcher { transform: translateY(0); }

/* El corte diagonal lo hace el CSS: tú subes una imagen vertical normal. */
.tv-launcher-item {
    position: relative;
    flex: 0 0 auto;
    width: 92px;
    height: 128px;
    padding: 0;
    border: 1px solid rgba(244, 242, 236, 0.16);
    background: #17171a;
    overflow: hidden;
    cursor: pointer;
    font-family: inherit;
    transform: skewX(-11deg);
    transition: border-color 0.2s ease, transform 0.25s ease;
}

.tv-launcher-item:hover,
.tv-launcher-item:focus-visible {
    border-color: #f4f2ec;
    transform: skewX(-11deg) translateY(-6px);
}

.tv-launcher-item.on { border-color: var(--accent); }

.tv-launcher-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: skewX(11deg) scale(1.28);
}

.tv-launcher-item .tv-tile-fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    transform: skewX(11deg);
}

/* --- Explorar: todas las apps ordenadas --- */
.tv-explore {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 20px 20px;
    scrollbar-width: none;
}

.tv-explore::-webkit-scrollbar { display: none; }

.tv-explore-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.tv-ex-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: #17171a;
    border: 1px solid rgba(244, 242, 236, 0.14);
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    color: inherit;
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.tv-ex-cell.wide { grid-column: span 2; aspect-ratio: 16 / 9; }
.tv-ex-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-ex-cell:hover, .tv-ex-cell:focus-visible { border-color: #f4f2ec; transform: translateY(-3px); }

.tv-ex-name {
    position: absolute;
    left: 10px;
    bottom: 8px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #f4f2ec;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

/* --- Buscador --- */
.tv-search { flex: 1 1 auto; display: flex; flex-direction: column; padding: 4px 20px 16px; min-height: 0; }

.tv-search input {
    width: 100%;
    font-family: inherit;
    font-size: 0.94rem;
    color: #f4f2ec;
    background: rgba(244, 242, 236, 0.1);
    border: 1px solid rgba(244, 242, 236, 0.2);
    border-radius: 999px;
    padding: 11px 18px;
    margin-bottom: 14px;
}

.tv-search input::placeholder { color: rgba(244, 242, 236, 0.45); }
.tv-search input:focus { outline: none; border-color: #f4f2ec; }

.tv-results {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    overflow-y: auto;
    scrollbar-width: none;
    min-height: 0;
}

.tv-results::-webkit-scrollbar { display: none; }
.tv-results .tv-card { width: auto; }

.tv-empty { font-size: 0.84rem; color: rgba(244, 242, 236, 0.55); padding: 12px 0; }

/* --- Vista de app: mitad presentación, mitad contenido real --- */
.tv-appview {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 0;
}

.tv-appinfo {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px;
    min-width: 0;
}

.tv-appinfo h3 {
    font-size: clamp(1.3rem, 2.6vw, 2.1rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.05;
}

.tv-appinfo p {
    font-size: 0.84rem;
    line-height: 1.6;
    color: rgba(244, 242, 236, 0.66);
    max-width: 34ch;
}

.tv-appinfo .tv-btn { align-self: flex-start; }

.tv-appfeed {
    position: relative;
    overflow: hidden;
    background: #0a0a0a;
    border-left: 1px solid rgba(244, 242, 236, 0.12);
    display: flex;
    justify-content: center;
}

.tv-appfeed > * {
    width: 100%;
    height: 100%;
    max-width: min(360px, 100%);
    border: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.tv-appfeed iframe { display: block; }

/* Los reproductores de directo ocupan la pantalla entera */
.tv-appview.full { grid-template-columns: 1fr; }
.tv-appview.full .tv-appinfo { display: none; }
.tv-appview.full .tv-appfeed { border-left: none; }
.tv-appview.full .tv-appfeed > * { max-width: none; }

/* --- Reproductor --- */
.tv-watch { position: absolute; inset: 0; z-index: 6; background: #000; }
.tv-watch iframe { width: 100%; height: 100%; border: none; display: block; }

.tv-close {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0a0a0a;
    background: #f4f2ec;
    border: none;
    border-radius: 999px;
    padding: 9px 16px;
    cursor: pointer;
}

.tv-close:hover { background: #fff; }

/* --- Ruido y número de canal --- */
.tv-static {
    position: absolute;
    inset: 0;
    z-index: 8;
    opacity: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.11) 0px, rgba(255,255,255,0.11) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 5px);
    background-color: #0b0b0b;
}

.tv-static.on { animation: tvNoise 0.34s steps(4) 1; }

@keyframes tvNoise {
    0%   { opacity: 0.95; background-position: 0 0, 0 0; }
    25%  { opacity: 1;    background-position: 0 -14px, 9px 0; }
    50%  { opacity: 0.9;  background-position: 0 11px, -7px 0; }
    75%  { opacity: 1;    background-position: 0 -6px, 13px 0; }
    100% { opacity: 0;    background-position: 0 0, 0 0; }
}

.tv-osd {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 9;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f4f2ec;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 14px rgba(0, 0, 0, 0.9);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
}

.tv-osd.on { opacity: 0.92; transition: opacity 0.1s ease; }

/* --- Pie del aparato --- */
.tv-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    font-size: 0.68rem;
    text-transform: uppercase;
}

.tv-foot-brand {
    letter-spacing: 0.22em;
    color: var(--text);
    font-weight: 700;
}

.tv-appsbtn[hidden] { display: none; }

/* --- Celular: la pantalla crece a lo alto para que quepa todo --- */
@media (max-width: 760px) {
    .tv-stage { perspective: 900px; }
    .tv.watching { transform: translateZ(50px); }

    .tv-screen {
        aspect-ratio: auto;
        min-height: 74svh;
    }

    .tv.watching .tv-screen { aspect-ratio: 16 / 9; min-height: 0; }

    .tv-top { padding: 12px 14px; gap: 6px; }
    .tv-tab { font-size: 0.78rem; padding: 6px 12px; }
    .tv-clock { display: none; }

    .tv-hero { max-width: 100%; padding: 0 14px 12px; }
    .tv-hero h3 { font-size: 1.1rem; }

    .tv-rail { padding: 0 0 12px 14px; }
    .tv-rail-head { padding-right: 14px; }
    .tv-strip { padding-right: 14px; }
    .tv-card { width: 148px; }
    .tv-app-tile { width: 68px; }
    .tv-rail-arrow { display: none; }

    .tv-launcher { padding: 0 12px 10px; }
    .tv-launcher-item { width: 74px; height: 104px; }
    .tv-appsbtn { right: 12px; bottom: 12px; font-size: 0.68rem; padding: 8px 14px; }
    .tv.launcher-open .tv-appsbtn { bottom: 130px; }

    .tv-explore, .tv-search { padding-left: 14px; padding-right: 14px; }
    .tv-explore-grid, .tv-results { grid-template-columns: repeat(2, 1fr); }
    .tv-ex-cell.wide { grid-column: span 2; }

    /* Cada app necesita una altura distinta en celular. Los directos son
       video (16:9); los perfiles son verticales y piden pantalla alta.
       Antes todos heredaban la misma caja y salían estirados. */
    .tv.app-directo .tv-screen { aspect-ratio: 16 / 9; min-height: 0; }
    .tv.app-vertical .tv-screen { min-height: 88svh; }

    /* La app se apila: presentación arriba, contenido abajo */
    .tv-appview { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .tv-appinfo { padding: 12px 14px; gap: 6px; justify-content: flex-start; }
    .tv-appinfo p { display: none; }
    .tv-appinfo h3 { font-size: 1.15rem; }
    .tv-appinfo .tv-btn { font-size: 0.76rem; padding: 8px 15px; }
    .tv-appfeed { border-left: none; border-top: 1px solid rgba(244, 242, 236, 0.12); }

    /* En los directos la presentación estorba: el reproductor se queda solo. */
    .tv.app-directo .tv-appview { grid-template-rows: 1fr; }
    .tv.app-directo .tv-appinfo { display: none; }
    .tv.app-directo .tv-appfeed { border-top: none; }
    .tv.app-directo .tv-appfeed > * { max-width: none; }

    /* El botón de Apps se sube para no taparse con el reproductor. */
    .tv.app-directo .tv-appsbtn { bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .tv, .tv-backdrop, .tv-card-thumb, .tv-tile-art, .tv-ex-cell { transition: none; }
    .tv-static.on { animation: none; }
    .tv.watching { transform: none; }
}

/* ---------- 9. PORTFOLIO ----------------------------------------------------- */

.mode-toggle {
    display: inline-flex;
    border: 1px solid var(--line);
    margin-bottom: clamp(32px, 5vw, 48px);
}

.mode-toggle button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 10px 18px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.mode-toggle button + button {
    border-left: 1px solid var(--line);
}

.mode-toggle button.active {
    background: var(--text);
    color: var(--bg);
}

.video-grid {
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-bottom: clamp(48px, 8vw, 88px);
}

.video-grid.grid-2 { grid-template-columns: repeat(2, 1fr); }
.video-grid.grid-4 { grid-template-columns: repeat(4, 1fr); }

.video-tile {
    background: var(--bg);
}

.video-tile video {
    width: 100%;
    display: block;
    background: #000;
}

.video-tile.horizontal video { aspect-ratio: 16 / 9; object-fit: cover; }
.video-tile.vertical video { aspect-ratio: 9 / 16; object-fit: cover; }

.video-tile-info {
    padding: 14px 16px;
}

.video-tile-info h4 {
    font-size: 0.92rem;
    font-weight: 600;
    margin-bottom: 3px;
}

.video-tile-info p {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.portfolio-cta {
    border: 1px solid var(--line);
    padding: clamp(32px, 6vw, 56px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
}

.portfolio-cta h3 {
    font-size: 1.6rem;
}

@media (max-width: 900px) {
    .video-grid.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .video-grid.grid-2, .video-grid.grid-4 { grid-template-columns: 1fr; }
}

/* ---------- 10. COTIZACIONES -------------------------------------------------- */

.quote-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.tab-toggle {
    display: inline-flex;
    border: 1px solid var(--line);
    flex-wrap: wrap;
}

.tab-toggle button {
    background: transparent;
    border: none;
    border-right: 1px solid var(--line);
    color: var(--text-muted);
    padding: 10px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.tab-toggle button:last-child { border-right: none; }

.tab-toggle button.active {
    background: var(--text);
    color: var(--bg);
}


.mode-explain {
    border: 1px solid var(--line);
    padding: 12px 16px;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 24px;
    max-width: 60ch;
}

.duration-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    border: 1px solid var(--line);
    padding: 14px 18px;
    margin-bottom: 24px;
    font-size: 0.82rem;
    color: var(--accent);
}

.ref-note {
    display: none;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-bottom: clamp(48px, 8vw, 80px);
}

.price-card {
    background: var(--bg);
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.price-card.vip {
    background: var(--surface);
}

.price-card h3 {
    font-size: 1.15rem;
    margin-bottom: 4px;
}

.price-card .price-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.price-card .price-amount {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 14px;
}

.price-card .price-unit {
    font-size: 0.72rem;
    color: var(--accent);
    font-weight: 600;
    margin-top: -10px;
    margin-bottom: 14px;
}

.price-features {
    list-style: none;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.price-features li {
    padding: 4px 0;
    border-top: 1px solid var(--line);
}

.price-features li:first-child { border-top: none; }

.vip-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 3px 8px;
    margin-bottom: 12px;
    width: fit-content;
}

.toggle-block-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    padding: 12px 22px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 16px;
}

.toggle-block-btn:hover { border-color: var(--text); }

.custom-order-panel {
    display: none;
    border: 1px solid var(--line);
    padding: clamp(24px, 4vw, 40px);
    margin-bottom: 24px;
}

.counter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-bottom: 20px;
}

.counter-item {
    background: var(--bg);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.counter-item-label {
    font-size: 0.82rem;
    font-weight: 600;
}

.counter-item-price {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.stepper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stepper button {
    width: 26px;
    height: 26px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    font-size: 1rem;
    cursor: pointer;
}

.stepper button:hover { border-color: var(--text); }

.stepper span {
    min-width: 16px;
    text-align: center;
    font-weight: 700;
}

/* La cantidad editable: se ve exactamente como el número de antes (sin
   borde, sin fondo, sin la rayita de abajo que traen los <input> por
   defecto) hasta que le das clic. Ahí sí aparece el borde, para que quede
   claro que estás escribiendo dentro de un campo. */
.qty-input {
    width: 30px;
    text-align: center;
    font-weight: 700;
    font-family: inherit;
    font-size: inherit;
    color: var(--text);
    background: transparent;
    border: 1px solid transparent;
    outline: none;
    padding: 2px 0;
    border-radius: 4px;
    -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-input:hover,
.qty-input:focus {
    border-color: var(--line);
}

.months-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--line);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.order-breakdown {
    border: 1px solid var(--line);
    padding: 16px 18px;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 18px;
}

.order-breakdown strong { color: var(--text); }

.order-vip-banner {
    display: none;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 12px 16px;
    margin-bottom: 18px;
}

.order-total {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid var(--line);
    padding-top: 18px;
}

.order-anchor {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: line-through;
}

.order-final {
    font-size: 1.9rem;
    font-weight: 700;
}

.order-savings {
    display: block;
    font-size: 0.82rem;
    color: var(--accent);
    font-weight: 600;
}

.vip-panel {
    display: none;
    border: 1px solid var(--line);
    padding: clamp(24px, 4vw, 40px);
}

.vip-panel h3 { font-size: 1.3rem; margin-bottom: 8px; }
.vip-panel p { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 20px; }

.vip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.vip-grid div {
    background: var(--surface);
    padding: 14px;
}

.vip-grid strong { display: block; font-size: 0.85rem; margin-bottom: 4px; }
.vip-grid span { font-size: 0.78rem; color: var(--text-muted); }

/* Dropdown de moneda en el header (solo visible en Cotizaciones) */
.header-currency {
    position: relative;
    display: none;
}
.header-currency-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}
.header-currency-btn:hover { border-color: var(--text); }
.header-currency-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--bg);
    border: 1px solid var(--line);
    min-width: 90px;
    z-index: 200;
}
.header-currency-menu.open { display: block; }
.header-currency-menu button {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: var(--text);
    font-size: 0.8rem;
    text-align: left;
    padding: 8px 12px;
    cursor: pointer;
}
.header-currency-menu button:hover { background: var(--surface); }

@media (max-width: 700px) {
    .order-total { flex-direction: column; align-items: flex-start; }
}

/* ---------- 11. MODAL DE TÉRMINOS -------------------------------------------- */

.terms-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.terms-card {
    background: var(--bg);
    border: 1px solid var(--line);
    max-width: 560px;
    width: 100%;
    padding: 28px;
}

.terms-card h3 { font-size: 1.2rem; margin-bottom: 6px; }
.terms-card > p { color: var(--text-muted); font-size: 0.82rem; margin-bottom: 14px; }

.prueba-modal-msg {
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.6;
}

.terms-card > p.prueba-modal-msg {
    color: var(--text);
    font-size: 0.92rem;
}

.terms-scroll {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--line);
    padding: 16px 18px;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: 14px;
}

.terms-scroll li { margin-bottom: 10px; }

.terms-hint {
    font-size: 0.78rem;
    color: var(--accent);
    text-align: center;
    margin-bottom: 12px;
}

.terms-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.terms-actions button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---------- 12. WIDGET FLOTANTE DE CONTACTO (solo Portfolio) ---------------- */

.contact-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 400;
    width: 300px;
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 22px;
}

.contact-widget h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.contact-widget p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.contact-widget .btn,
.contact-widget .btn-ghost {
    width: 100%;
    justify-content: center;
    margin-bottom: 8px;
    padding: 12px 16px;
    font-size: 0.8rem;
}

.contact-widget-close {
    display: none;
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
}

.contact-mini-btn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 400;
    background: var(--text);
    color: var(--bg);
    border: none;
    padding: 12px 18px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 760px) {
    .contact-widget { left: 16px; right: 16px; width: auto; bottom: 16px; display: none; }
    .contact-widget.expanded { display: block; }
    .contact-widget-close { display: block; }
    .contact-mini-btn { display: inline-flex; }
    /* Con la tarjeta abierta, el botón chico se esconde (antes se veían los dos) */
    body.widget-open .contact-mini-btn { display: none; }
}

/* ---------- 13. PRECIOS: nota de aproximado ---------------------------------- */

.price-approx-note {
    font-size: 0.72rem;
    color: var(--text-muted);
    opacity: 0.8;
    margin: -8px 0 28px;
    max-width: 62ch;
}

/* ---------- 14. TOGGLE DE TEMA ------------------------------------------------ */

.theme-btn {
    position: relative;
}

.theme-btn img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.theme-btn .icon-incoming {
    display: none;
}

/* ---------- 15. HERO: revelado sincronizado + intro de video ----------------
   OJO: esto solo debe afectar el hero de Inicio (#heroSection), que es el
   único que trae el script para quitar el opacity:0. Si se deja genérico
   en .hero-figure/.hero-body, el texto de las páginas "próximamente"
   (que reusan esas mismas clases) se queda invisible para siempre. */

#heroSection .hero-figure,
#heroSection .hero-body {
    opacity: 0;
}

#heroSection .hero-figure {
    transform: translateX(60px);
}

#heroSection .hero-body {
    transform: translateY(16px);
}

#heroSection.revealed .hero-figure {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

#heroSection.revealed .hero-body {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.9s ease 0.15s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

/* Entrada escalonada: cada pieza entra un poco después de la anterior,
   en vez de que todo aparezca de golpe. */
#heroSection .hero-tag,
#heroSection .hero-credit,
#heroSection .hero-title,
#heroSection .hero-sub {
    opacity: 0;
    transform: translateY(14px);
}

#heroSection.revealed .hero-tag,
#heroSection.revealed .hero-credit,
#heroSection.revealed .hero-title,
#heroSection.revealed .hero-sub {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

#heroSection.revealed .hero-tag { transition-delay: 0.10s; }
#heroSection.revealed .hero-credit { transition-delay: 0.28s; }
#heroSection.revealed .hero-title { transition-delay: 0.38s; }
#heroSection.revealed .hero-sub { transition-delay: 0.52s; }

/* Crédito pequeño arriba del título, tipo "© by ..." */
.hero-credit {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text);
    margin-bottom: 10px;
}

html[data-theme="light"] .hero-credit {
    color: var(--accent);
}

.intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #000;
    transition: transform 0.7s cubic-bezier(0.7, 0, 0.3, 1);
}

.intro-overlay.slide-up {
    transform: translateY(-100%);
}

.intro-overlay video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- 16. INICIO: REEL Y SOBRE MÍ -------------------------------------- */

.reel-block video {
    width: 100%;
    display: block;
    border: 1px solid var(--line);
    background: #000;
}

@media (max-width: 700px) {
    .reel-block {
        max-width: 300px !important;
        margin: 0 auto !important;
    }
    .reel-block video {
        width: 100% !important;
        height: auto !important;
        max-height: 180px !important;
        aspect-ratio: 16 / 9;
        object-fit: contain;
    }
}

.about-block {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}

.about-photo {
    border: 1px solid var(--line);
    aspect-ratio: 3 / 4;
    object-fit: cover;
    width: 100%;
}

.about-text h2 {
    text-align: left;
    margin-bottom: 16px;
}

.about-text p {
    color: var(--text-muted);
    line-height: 1.75;
}

@media (max-width: 760px) {
    /* En celular la foto va flotada a la izquierda: el texto arranca a su
       derecha y, cuando se acaba el espacio, sigue por debajo de la imagen
       (eso es lo que hace float, a diferencia de grid). */
    .about-block {
        display: block;
    }
    .about-block::after {
        content: '';
        display: block;
        clear: both;
    }
    .about-photo {
        float: left;
        width: 42%;
        max-width: 150px;
        margin: 0 16px 12px 0;
    }
    .about-text p {
        font-size: 0.92rem;
        line-height: 1.7;
    }
}

/* ---------- 17. SCROLL IMÁN (solo Inicio: Hero <-> Bienvenida) --------------
   Nota: esto solo funciona si <body> NO tiene overflow-x: hidden — por eso
   arriba se usa overflow-x: clip, que recorta igual pero no crea un
   contenedor de scroll que compita con el snap del <html>. */

html.snap-home {
    scroll-snap-type: y mandatory;
}

html.snap-home .snap-section {
    scroll-snap-align: start;
}

.scroll-chevron {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    width: 26px;
    height: 26px;
    color: var(--text);
    opacity: 0.75;
    pointer-events: none;
}

.scroll-chevron.down { bottom: 20px; }
.scroll-chevron.up { top: 20px; }

.scroll-chevron svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (prefers-reduced-motion: no-preference) {
    .scroll-chevron.down { animation: chevronNudgeDown 1.9s ease-in-out infinite; }
    .scroll-chevron.up { animation: chevronNudgeUp 1.9s ease-in-out infinite; }
}

@keyframes chevronNudgeDown {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 5px); }
}

@keyframes chevronNudgeUp {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -5px); }
}

/* ---------- 18. PESTAÑAS DE "SOBRE MÍ" -------------------------------------
   En PC quedan fijas y centradas (clic cómodo). En celular se desplazan
   solas en bucle, que es como se ve mejor en pantalla angosta.
   Los separadores son <span> reales, NO pseudo-elementos: así el subrayado
   de la pestaña activa nunca puede alcanzarlos. */

.marquee {
    margin-top: clamp(28px, 4vw, 44px);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 14px 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.marquee-track {
    display: flex;
    align-items: center;
    gap: clamp(18px, 4vw, 44px);
    white-space: nowrap;
}

.marquee-group {
    display: flex;
    align-items: center;
    gap: clamp(18px, 4vw, 44px);
    flex-shrink: 0;
}

/* En PC solo se muestra un juego de pestañas, centrado y quieto.
   El segundo juego existe solo para el bucle de celular. */
.marquee-group + .marquee-group {
    display: none;
}

.marquee-group:first-child .tab-sep:last-child {
    display: none;
}

.marquee-item {
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.25s ease;
    white-space: nowrap;
}

.marquee-item:hover {
    color: var(--text);
}

.marquee-item.active {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
}

.tab-sep {
    color: var(--text-muted);
    opacity: 0.4;
    flex-shrink: 0;
    user-select: none;
}

/* --- Celular: bucle en movimiento --- */
@media (max-width: 700px) {
    .marquee {
        justify-content: flex-start;
    }
    .marquee-group + .marquee-group {
        display: flex;
    }
    .marquee-group:first-child .tab-sep:last-child {
        display: inline;
    }
    .marquee-track {
        animation: marqueeScroll 20s linear infinite;
        will-change: transform;
    }
}

/* Sin pausa por :hover a propósito. En pantallas táctiles ese estado se
   queda "pegado" tras tocar y dejaba la marquesina detenida hasta tocar
   fuera; y en PC no hace falta, porque ahí las pestañas ni se mueven. */

@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - (clamp(18px, 4vw, 44px) / 2))); }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
}

/* El texto se desvanece al cambiar de pestaña */
.about-text p {
    transition: opacity 0.18s ease;
}

/* ---------- 19. MANIFIESTO (japonés) ---------------------------------------- */

.manifesto {
    text-align: center;
}

.manifesto-mark {
    font-size: 1.6rem;
    color: var(--accent);
    letter-spacing: 0.3em;
    margin-bottom: 24px;
}

.manifesto-text {
    font-family: 'Noto Sans JP', 'Space Grotesk', sans-serif;
    font-size: clamp(1.5rem, 3.6vw, 3rem);
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0.01em;
    max-width: 20ch;
    margin: 0 auto;
}

.manifesto-text em {
    font-style: normal;
    color: var(--accent);
}

html[data-theme="dark"] .manifesto-text em {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
}

.manifesto-note {
    font-family: 'Noto Sans JP', 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 28px auto 0;
    max-width: 46ch;
    line-height: 1.8;
}

@media (max-width: 700px) {
    .manifesto-text { max-width: 100%; }
}

/* ---------- 20. PORTFOLIO 3D — collage de tarjetas en profundidad --------- */

/* =========================================================================
   DESCUENTO DE LANZAMIENTO
   ========================================================================= */
.promo-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--accent);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
}

.promo-banner[hidden] { display: none; }

.promo-tag {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-ink);
    background: var(--accent);
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
}

.promo-banner p {
    font-size: 0.86rem;
    color: var(--text-muted);
}

/* Precio de lista, tachado, debajo del precio con descuento */
.price-was {
    font-size: 0.84rem;
    color: var(--text-muted);
    text-decoration: line-through;
    opacity: 0.7;
    margin-top: -6px;
    margin-bottom: 10px;
}

/* =========================================================================
   FORMULARIO DE PEDIDO (/cotizar)
   ========================================================================= */
.order-form {
    max-width: 660px;
    margin-top: 8px;
}

.order-summary {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    padding: 18px 20px;
}

.order-summary-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.order-summary-code {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    word-break: break-all;
}

.order-summary-price {
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
}

.order-summary-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.order-note {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin: 26px 0 30px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 22px;
}

.field label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* El "(opcional...)" dentro de la etiqueta no debe gritar como el resto:
   la etiqueta va en mayúsculas por diseño, pero esta parte necesita
   leerse tranquila, no como una advertencia. */
.field-optional {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    opacity: 0.75;
}

.field input,
.field textarea {
    width: 100%;
    font-family: inherit;
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 14px;
    transition: border-color 0.2s ease;
}

.field input { min-height: 46px; }
.field textarea { resize: vertical; min-height: 150px; }

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--text-muted);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--text-muted); opacity: 0.5; }

.field-hint {
    font-size: 0.76rem;
    color: var(--text-muted);
    opacity: 0.8;
}

.field-error {
    font-size: 0.78rem;
    color: #e06c5a;
    min-height: 0;
}

.field-error:empty { display: none; }

/* Campo trampa para bots: fuera de la pantalla, no oculto con display:none
   (algunos bots ignoran los que están ocultos y llenan el resto). */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 30px;
}

.order-actions .btn { min-width: 190px; }

.form-status {
    margin-top: 16px;
    font-size: 0.86rem;
    color: var(--text-muted);
    min-height: 1.2em;
}

.form-status.is-error { color: #e06c5a; }
.form-status.is-ok { color: var(--accent); }

@media (max-width: 620px) {
    .order-summary-head { flex-direction: column; gap: 4px; }
    .order-actions { flex-direction: column-reverse; align-items: stretch; }
    .order-actions .btn { width: 100%; }
}


/* =========================================================================
   PORTFOLIO — ESCENARIO 3D
   ========================================================================= */
.stage {
    position: relative;
    height: 76svh;
    min-height: 480px;
    perspective: 1600px;
    perspective-origin: 50% 50%;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
}

.camera {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 1.05s cubic-bezier(0.7, 0, 0.2, 1);
}

.layer {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

.layer.is-active {
    opacity: 1;
}

.layer.is-behind {
    opacity: 0.3;
}

/* Contenedor de las tarjetas: en PC no hace nada (las tarjetas se colocan
   solas por coordenadas); en celular se convierte en rejilla. */
.layer-cards {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.layer-title {
    position: absolute;
    top: 22px;
    left: 28px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    z-index: 6;
}

/* --- Tarjeta de video --- */
.card3d {
    --z: 0px;
    --rot: 0deg;
    position: absolute;
    border-radius: 10px;
    overflow: hidden;
    background: #0a0a0a;
    border: 1px solid var(--line);
    box-shadow: var(--card-shadow);
    cursor: pointer;
    filter: brightness(0.72);
    transition: filter 0.35s ease, box-shadow 0.35s ease;
    transform: translateZ(var(--z)) rotate(var(--rot));
    animation: floatCard 6s ease-in-out infinite;
}

.card3d:hover {
    filter: brightness(1);
}

/* --- Volteo al cambiar de página ---
   La tarjeta gira una vuelta completa sobre su eje vertical (0 -> 180 -> 360),
   como enseñando su reverso. El video de adentro se cambia justo al llegar a
   180°, que es cuando la tarjeta está de canto y no se alcanza a ver — así
   el cambio de contenido nunca se nota a medio giro. Termina en 360°, que es
   visualmente lo mismo que 0°, así que no hay ningún salto al terminar.
   Se suma AL transform de siempre (translateZ + rotate del collage), no lo
   reemplaza, para que la tarjeta no se salga de su sitio mientras gira. */
.card3d.flip-anim {
    animation: flipVideoCard 0.3s ease-in-out;
    backface-visibility: hidden;
}

@keyframes flipVideoCard {
    0%   { transform: translateZ(var(--z)) rotate(var(--rot)) rotateY(0deg); }
    50%  { transform: translateZ(var(--z)) rotate(var(--rot)) rotateY(180deg); }
    100% { transform: translateZ(var(--z)) rotate(var(--rot)) rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .card3d.flip-anim { animation: none; }
}

/* --- Contador de páginas de video, junto al selector de capas --- */
/* El contador de páginas: SOLO texto, sin forma de botón — nada de borde,
   fondo ni caja. Centrado en medio del recuadro del video, no junto a los
   botones de tipo. Sin flecha: solo dice en qué página estás y cuántas hay. */
/* El contador de páginas: solo texto, centrado en medio del recuadro del
   video. Sin forma de botón (nada de borde ni fondo en cada número), pero
   los números SÍ reciben clic para cambiar de página. */
/* El contador de páginas: solo texto, centrado horizontalmente, ABAJO —
   a la misma altura que los botones de tipo (bottom:18px, igual que
   .stage-nav), no en medio vertical del recuadro. Antes tenía top:50% por
   error, y por eso quedaba flotando a la mitad de la pantalla. */
.stage-pager {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    padding: 6px 14px;
}

.pager-label {
    margin-right: 4px;
    color: var(--text-muted);
}

.pager-num {
    cursor: pointer;
    padding: 2px 3px;
    color: var(--text-muted);
    transition: color 0.15s ease;
}

.pager-num:hover { color: var(--text); }

.pager-num.is-current {
    color: var(--text);
    font-weight: 700;
    cursor: default;
}

@media (max-width: 900px) {
    .stage-pager { font-size: 0.72rem; bottom: 12px; }
}

/* ===== Dos paredes =====
   Las tarjetas de Avanzada viven en la pared de enfrente; las de Simple, en
   una pared a la derecha que no se ve. Cambiar de modo NO mueve las tarjetas:
   gira la cámara, como si voltearas la cabeza. Las de Avanzada se quedan a tu
   izquierda porque siguen donde estaban.

   El radio es la distancia de la cámara a cada pared. Como se resta y se
   vuelve a sumar, la pared de enfrente queda exactamente donde estaba. */
.paredes {
    --radio: 760px;
    --giro: 0deg;
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: translateZ(calc(var(--radio) * -1)) rotateY(var(--giro));
    transition: transform 2.4s cubic-bezier(0.55, 0, 0.15, 1);
}

/* ===== Quién recibe los clics en el escenario =====
   En un contexto 3D (preserve-3d) el div de un contenedor NO está "encima"
   de sus hijos: es un plano más dentro de la escena. Un contenedor que cubre
   toda el área y está en z=0 se pone DELANTE de cualquier tarjeta con --z
   negativo y se queda con su clic. Por eso se veían pero no respondían.

   Solución: ningún contenedor recibe clics. Solo las tarjetas y los botones.
   Y las tarjetas de las capas que no están al frente quedan desactivadas,
   para no poder darle a un horizontal desde la capa de verticales. */
.stage,
.camera,
.layer,
.layer-cards,
.paredes,
.pared {
    pointer-events: none;
}

.card3d,
.card-fs,
.stage-nav,
.stage-nav-btn,
.pager-num,
.coverflow-arrow {
    pointer-events: auto;
}

.layer:not(.is-active) .card3d { pointer-events: none; }

.pared {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* La pared que no estás viendo queda fuera del alcance del cursor. */
.stage:not(.modo-dirigido) .pared-dirigido .card3d,
.stage.modo-dirigido .pared-avanzada .card3d {
    pointer-events: none;
}

.pared-avanzada { transform: rotateY(0deg) translateZ(var(--radio)); }
.pared-dirigido   { transform: rotateY(90deg) translateZ(var(--radio)); }

/* Girada a la derecha se ve la pared de Simple. */
.stage.modo-dirigido .paredes { --giro: -90deg; }

/* Las capas de más atrás tardan un poco más en llegar: están más lejos, así
   que se mueven menos aprisa. Es poco a propósito — están cerca entre sí. */
.layer[data-layer="1"] .paredes { transition-duration: 2.75s; }
.layer[data-layer="2"] .paredes { transition-duration: 3.1s; }

@media (prefers-reduced-motion: reduce) {
    .paredes { transition-duration: 0.01ms; }
}

.card3d video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #0a0a0a;
}

/* En pantalla completa el 'cover' de arriba es el problema: recorta el
   video para llenar todo el rectángulo de la pantalla, así que un reel
   vertical (9:16) se estira a lo ancho y pierde arriba y abajo. Aquí se
   cambia a 'contain' SOLO mientras está en pantalla completa, para que
   respete su forma real y deje franjas negras a los lados en vez de
   recortarlo. */
.card3d video:fullscreen,
.card3d video:-webkit-full-screen {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.card3d.h { aspect-ratio: 16 / 9; }
.card3d.v { aspect-ratio: 9 / 16; }

/* Videos de YouTube dentro de una tarjeta: mismo tamaño que un <video>. */
.card-yt {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: #000;
}

/* Botón de pantalla completa (el único control a la vista) */
.card-fs {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 3;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.card3d:hover .card-fs {
    opacity: 1;
}

/* --- Marcos vacíos: el tono cambia según la profundidad --- */
.deco {
    --z: 0px;
    --rot: 0deg;
    position: absolute;
    transform: translateZ(var(--z)) rotate(var(--rot));
    animation: floatCard 6s ease-in-out infinite;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
    padding: 6px;
}

.deco.d1 { opacity: 0.8; }
.deco.d2 { opacity: 0.55; }
.deco.d3 { opacity: 0.32; }

/* Recuadros con frase en japonés: se les quita el tratamiento de etiqueta
   (mayúsculas y separación de letras) porque no aplica al japonés y lo
   único que hace es romper el ritmo de los caracteres. */
.deco.jp {
    font-family: 'Noto Sans JP', var(--font);
    font-weight: 500;
    font-size: 0.74rem;
    line-height: 1.65;
    letter-spacing: 0.02em;
    text-transform: none;
}

/* Recuadros con figura. La imagen cambia según el tema mediante los
   atributos data-dark / data-light, igual que el resto del sitio. */
.deco.fig {
    padding: 14%;
    background: var(--surface-2);
}

.deco.fig img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* --- Capa 3: proceso --- */
.process-card {
    --z: 0px;
    --rot: 0deg;
    position: absolute;
    transform: translateZ(var(--z)) rotate(var(--rot));
    animation: floatCard 6s ease-in-out infinite;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 20px 18px;
    box-shadow: var(--card-shadow);
}

.process-step {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.process-card h4 { font-size: 1.05rem; margin-bottom: 10px; }

.process-card ul {
    list-style: none;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.8;
}

.process-card li::before { content: '·'; margin-right: 8px; opacity: 0.6; }

/* Flotación: mismo ritmo para todas, pero cada una arranca en un punto
   distinto del ciclo (animation-delay), así no se mueven en bloque. */
@keyframes floatCard {
    0%   { transform: translateZ(var(--z)) translateY(0)      rotate(var(--rot)); }
    50%  { transform: translateZ(var(--z)) translateY(-9px)   rotate(calc(var(--rot) + 1.1deg)); }
    100% { transform: translateZ(var(--z)) translateY(0)      rotate(var(--rot)); }
}

/* --- Navegación ---
   Los tres botones están siempre ahí, del mismo tamaño (flex:1, no
   min-width fijo — así un texto corto como "Proceso" y uno largo como
   "Verticales" ocupan el mismo ancho). El de la capa activa se pone
   invisible con opacity, no con display:none, para que su espacio se
   quede reservado y los otros dos no se muevan. */
.stage-nav {
    position: absolute;
    left: 22px;
    bottom: 18px;
    z-index: 20;
    display: flex;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.stage-nav-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    background: var(--surface-2);
    border: none;
    border-left: 1px solid var(--line);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.stage-nav-btn:first-child { border-left: none; }

.stage-nav-btn:hover {
    color: var(--text);
    background: var(--surface);
}

.stage-nav-btn:active { transform: translateY(1px); }

/* La capa activa: el recuadro entero desaparece, no solo su contenido —
   nunca hay más de 2 botones a la vista. Con flex:1 en los que quedan, esos
   dos se reparten el ancho completo solos. */
.stage-nav-btn.is-current {
    display: none;
}

/* --- Celular: se conserva el viaje de cámara entre capas, pero dentro de
       cada capa las tarjetas se acomodan en rejilla (el collage disperso no
       cabe en pantalla angosta). --- */
@media (max-width: 860px) {
    /* En celular se tira el armado en 3D, pero la escena SÍ conserva su
       caja de alto fijo: así todas las capas miden igual y el menú no
       crece al cambiar a Verticales. Lo que no cabe se recorre dentro. */
    .stage {
        /* Crece con su contenido: nada de scroll interno ni recortes. */
        height: auto !important;
        min-height: 0 !important;
        perspective: none;
        overflow: hidden;
    }

    .camera { transform: none !important; }

    .layer {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        transform-style: flat;
    }

    .camera { position: static !important; inset: auto !important; }

    /* Sin el 3D, las capas que no están activas ya no se van al fondo: se
       quedaban encima y por eso todo se veía traslúcido y apilado. */
    .layer:not(.is-active) { display: none !important; }
    .layer.is-active { opacity: 1 !important; pointer-events: auto; }

    /* Las paredes dejan de ser cajas: sus tarjetas entran directo a la lista. */
    .paredes,
    .pared { display: contents; }

    .stage:not(.modo-dirigido) .pared-dirigido > .card3d,
    .stage.modo-dirigido .pared-avanzada > .card3d { display: none; }

    /* La lista ocupa la caja y se recorre por dentro. */
    .layer-cards {
        position: static;
        display: grid;
        align-content: start;
        gap: 10px;
        padding: 40px 14px 96px;   /* abajo: lugar para páginas y menú */
    }

    /* Los horizontales van a lo ancho: dentro de un recuadro chico, los
       botones de YouTube se comen el video y no se puede ni darle play. */
    .layer[data-layer="0"] .layer-cards { grid-template-columns: 1fr; }
    /* Filas del alto exacto de cada tarjeta: sin esto, con rejillas que
       reparten el alto sobrante, las tarjetas se montaban. */
    .layer-cards { grid-auto-rows: max-content; }
    /* Verticales en 3 columnas: con 2 quedaban altísimas y solo cabía una
       fila. Miniaturas se quedan en 2, que son 16:9 y se ven bien. */
    .layer[data-layer="1"] .layer-cards { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    /* Miniaturas: igual que los horizontales, una por fila y del mismo
       tamaño. Son 16:9, así que se ven como los videos. */
    .layer[data-layer="2"] .layer-cards { grid-template-columns: 1fr; }
    .layer[data-layer="3"] .layer-cards { grid-template-columns: 1fr; }

    /* Cada tarjeta en su lugar de la rejilla: sin posición suelta, sin giro
       y sin animación. Eso era lo que las encimaba. */
    .card3d,
    .process-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        transform: none !important;
        animation: none !important;
        --z: 0px;
        --rot: 0deg;
    }

    .card3d:hover { transform: none !important; }

    /* El alto de cada tarjeta sale de su proporción, siempre. */
    .card3d.h { aspect-ratio: 16 / 9 !important; }
    .card3d.v { aspect-ratio: 9 / 16 !important; }

    /* El reproductor de YouTube llena la tarjeta desde dentro, sin flotar
       sobre ella: así no se desborda ni se encima con la de abajo. */
    .card-yt {
        position: static !important;
        width: 100%;
        height: 100%;
    }

    .deco { display: none; }

    /* Las páginas, encima del menú y siempre visibles. */
    .stage-pager {
        bottom: 60px;
        font-size: 0.74rem;
        background: color-mix(in srgb, var(--surface) 92%, transparent);
        z-index: 30;
    }

    .layer-title { top: 14px; left: 16px; font-size: 0.64rem; }
    .stage-nav { left: 12px; right: 12px; bottom: 12px; z-index: 30; }
    .stage-nav-btn { font-size: 0.66rem; padding: 0 10px; min-height: 42px; }
    .card-fs { opacity: 1; }

    .process-card { padding: 12px 14px; }
    .process-card h4 { font-size: 0.9rem; margin-bottom: 6px; }
    .process-card ul { font-size: 0.72rem; line-height: 1.6; }
}

@media (prefers-reduced-motion: reduce) {
    .camera { transition: none; }
    .card3d, .deco, .process-card { animation: none; }
}

/* ---------- 12. MEDZROOM — el cuarto en 3D -----------------------------------
   Página aparte, a pantalla completa. Solo en computadora.
   ------------------------------------------------------------------------------ */

.cuarto-body {
    overflow: hidden;
    background: #05060c;
    height: 100svh;
}

.lienzo {
    position: fixed;
    inset: 0;
    z-index: 1;
}

/* El lienzo se dibuja a un tercio de la resolución y se estira sin suavizar:
   de ahí sale el escalonado de PS1. */
.lienzo canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* --- Pantalla de carga --- */
.carga {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: #05060c;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.carga[hidden] { display: none; }

.carga.fuera {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Monoespaciada y delgada: se lee como el rótulo de un aparato, no como el
   logo del sitio. La tipografía del sitio aquí se veía demasiado redonda. */
.carga-marca {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.52em;
    text-indent: 0.52em;
    color: rgba(244, 242, 236, 0.82);
}

.carga-riel {
    width: min(280px, 60vw);
    height: 2px;
    background: rgba(244, 242, 236, 0.16);
    overflow: hidden;
}

.carga-barra {
    width: 0%;
    height: 100%;
    background: #f4f2ec;
    /* La duración la pone el JS en cada tramo, para que los saltos sean
       de distinta velocidad y la carga nunca se vea pareja. */
    transition-property: width;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
}

.carga-error {
    font-size: 0.86rem;
    color: rgba(244, 242, 236, 0.7);
}

.carga-error a { color: #f4f2ec; text-decoration: underline; }

/* --- Controles encima del cuarto --- */
.cuarto-ui {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

.cuarto-ui[hidden] { display: none; }

.cuarto-pista {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244, 242, 236, 0.42);
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

.enfocado .cuarto-pista { opacity: 0; }

/* La frase que dice al voltear el cuarto entre Medz y Dez. Aparece en medio
   de la pantalla, coincidiendo con el momento en que los ojos están
   cerrados, y se desvanece sola. */
.cuarto-voltea {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 26;
    font-size: 0.86rem;
    font-style: italic;
    color: rgba(244, 242, 236, 0.8);
    text-align: center;
    max-width: 60%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.cuarto-voltea.visible { opacity: 1; }

/* El cursor cambia cuando hay algo con lo que se puede interactuar. */
.senalando .lienzo { cursor: pointer; }

.cuarto-etiqueta {
    position: absolute;
    bottom: 62px;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #f4f2ec;
    background: rgba(5, 6, 12, 0.7);
    border: 1px solid rgba(244, 242, 236, 0.22);
    border-radius: 999px;
    padding: 8px 18px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.cuarto-etiqueta.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.enfocado .cuarto-etiqueta { opacity: 0 !important; }

/* Los botones de cuando estás frente a un objeto */
.foco-barra {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(14px);
    display: flex;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.enfocado .foco-barra {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.foco-btn {
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f4f2ec;
    background: rgba(5, 6, 12, 0.72);
    border: 1px solid rgba(244, 242, 236, 0.26);
    border-radius: 999px;
    padding: 11px 20px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.foco-btn:hover { background: rgba(244, 242, 236, 0.16); }

.foco-btn.principal {
    background: #f4f2ec;
    color: #05060c;
    border-color: #f4f2ec;
}

.foco-btn.principal:hover { background: #fff; }

/* --- En celular no se carga nada --- */
.cuarto-movil {
    position: relative;
    z-index: 40;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 0 24px;
    color: #f4f2ec;
}

.cuarto-movil[hidden] { display: none; }
.cuarto-movil .body-lead { color: rgba(244, 242, 236, 0.66); max-width: 34ch; }

/* --- Transición de entrada desde la portada: la página se acerca ---
   Mientras dura, la página se congela: si no, al escalar el body crecen las
   barras de desplazamiento y el navegador mueve el scroll por su cuenta. */
html.bloqueado,
html.bloqueado body {
    overflow: hidden !important;
    height: 100%;
    scroll-snap-type: none !important;
}

/* El negro sale del <html>, que queda debajo del body mientras este se
   desvanece. Antes se oscurecía con filter: brightness, y ese filtro obliga
   al navegador a redibujar la página entera en cada cuadro — de ahí venían
   los tironcitos. Escala y opacidad sí las mueve la tarjeta gráfica sola. */
html.bloqueado { background: #05060c; }

/* Se escala SOLO el hero, no la página entera. Escalar el <body> obliga al
   navegador a rasterizar todo el documento a un tamaño enorme, y de ahí
   venían los tirones. El hero es lo único que se ve, así que da igual. */
html.entrando .hero {
    animation: acercarse 2.4s cubic-bezier(0.42, 0, 0.75, 1) forwards;
    transform-origin: 50% 42%;
    will-change: transform;
}

/* El negro lo pone un velo fijo, que no se escala con nada. */
.velo {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: #05060c;
    opacity: 0;
    pointer-events: none;
}

html.entrando .velo {
    opacity: 1;
    transition: opacity 2.1s cubic-bezier(0.7, 0, 0.9, 1);
}

/* Arranca casi quieta y se va acelerando: se siente que te absorbe, no que
   la página se hace grande de golpe. */
@keyframes acercarse {
    0%   { transform: scale(1.00); }
    30%  { transform: scale(1.18); }
    62%  { transform: scale(1.70); }
    85%  { transform: scale(2.35); }
    100% { transform: scale(3.00); }
}

/* --- Salida de MEDZROOM: la cámara se aleja y te escupe de vuelta --- */
.saliendo .lienzo {
    animation: alejarse 1.15s cubic-bezier(0.5, 0, 0.3, 1) forwards;
    transform-origin: 50% 45%;
    will-change: transform, opacity;
}

.saliendo .cuarto-ui {
    opacity: 0;
    transition: opacity 0.3s ease;
}

@keyframes alejarse {
    0%   { transform: scale(1);    opacity: 1; }
    100% { transform: scale(0.18); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .entrando { animation: none; opacity: 0; transition: opacity 0.3s ease; }
    .saliendo .lienzo { animation: none; opacity: 0; transition: opacity 0.3s ease; }
}

/* El acceso al cuarto va en el centro del hero, justo sobre la marca de agua:
   es el hueco que quedaba vacío y es lo primero que ve la vista. Discreto a
   propósito — no compite con el título. */
.entrar-cuarto {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 13px 26px;
    background: transparent;
    transition: color 0.3s ease, border-color 0.3s ease, letter-spacing 0.3s ease;
}

.entrar-cuarto:hover {
    color: var(--text);
    border-color: var(--text);
    letter-spacing: 0.24em;
}

@media (max-width: 900px), (pointer: coarse) {
    .entrar-cuarto { display: none; }
}

/* ---------- 13. TRANSICIONES ENTRE PÁGINAS ----------------------------------
   Al llegar, el contenido sube un poco y aparece. Al salir, se desvanece.
   Movimientos cortos y sin rebote: se nota que hay transición, no que hay
   una animación.
   ------------------------------------------------------------------------------ */

@keyframes entraPagina {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

@keyframes entraHeader {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
}

/* El header entra desde arriba, el contenido desde abajo y un pelo después. */
body > .site-header {
    animation: entraHeader 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

body > section {
    animation: entraPagina 0.72s cubic-bezier(0.2, 0.7, 0.2, 1) 0.06s both;
}

body > .site-footer {
    animation: entraPagina 0.72s cubic-bezier(0.2, 0.7, 0.2, 1) 0.14s both;
}

/* La portada no: ahí el hero ya tiene sus propias entradas y encimarlas
   se siente pesado. */
body > section.hero {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    body > .site-header,
    body > section,
    body > .site-footer { animation: none; }
}


/* ---------- 14. EL HUECO DEL INICIO ------------------------------------------
   Franja entre el hero y Bienvenida por la que solo se pasa. No tiene punto
   de anclaje, así que el imán nunca te deja parado aquí: te manda arriba o
   abajo según hacia dónde ibas.
   ------------------------------------------------------------------------------ */

.hueco {
    position: relative;
    height: 78svh;
    overflow: hidden;
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* Aquí va la imagen de la deidad cuando la tengas:
   background-image: url('deidad.png'); background-size: cover; */

.hueco-tag {
    --rot: 0deg;
    position: absolute;
    transform: rotate(var(--rot));
    animation: flotarTag 7.5s ease-in-out infinite;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.34;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 14px;
    white-space: nowrap;
    pointer-events: none;
}

/* Suben y bajan a la deriva, como si estuvieran flotando en el espacio. */
@keyframes flotarTag {
    0%   { transform: rotate(var(--rot)) translateY(0); }
    50%  { transform: rotate(calc(var(--rot) + 1.6deg)) translateY(-14px); }
    100% { transform: rotate(var(--rot)) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hueco-tag { animation: none; }
}

@media (max-width: 900px) {
    .hueco { height: 52svh; }
    .hueco-tag { font-size: 0.62rem; padding: 8px 11px; }
    .hueco-tag:nth-child(n+4) { display: none; }
}

/* --- Panel de lo que dice cada objeto --- */
.panel {
    position: absolute;
    left: 50%;
    bottom: 92px;
    transform: translateX(-50%) translateY(10px);
    width: min(420px, 82vw);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px;
    background: rgba(5, 6, 12, 0.88);
    border: 1px solid rgba(244, 242, 236, 0.2);
    border-radius: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.panel.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.panel-titulo {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(244, 242, 236, 0.55);
}

.panel-texto {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #f4f2ec;
}

.panel-cerrar {
    align-self: flex-start;
    margin-top: 4px;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(244, 242, 236, 0.7);
    background: none;
    border: 1px solid rgba(244, 242, 236, 0.24);
    border-radius: 999px;
    padding: 7px 15px;
    cursor: pointer;
}

.panel-cerrar:hover { color: #f4f2ec; border-color: #f4f2ec; }

/* --- Botones de "¿seguro que quieres entrar?" --- */
.panel-confirmar {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.panel-confirmar[hidden] { display: none; }

.panel-btn {
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 8px 16px;
    cursor: pointer;
    background: #f4f2ec;
    color: #05060c;
    border: 1px solid #f4f2ec;
}

.panel-btn.ghost {
    background: none;
    color: rgba(244, 242, 236, 0.7);
    border-color: rgba(244, 242, 236, 0.24);
}

.panel-btn.ghost:hover { color: #f4f2ec; border-color: #f4f2ec; }

/* Cuando el panel está preguntando, el botón de Cerrar estorba. */
.panel.preguntando .panel-cerrar { display: none; }

/* --- El parpadeo del espejo: dos párpados que se cierran y se abren --- */
.parpadeo {
    position: fixed;
    inset: 0;
    z-index: 25;
    pointer-events: none;
}

.parpado {
    position: absolute;
    left: 0;
    right: 0;
    height: 52%;
    background: #05060c;
    transform: scaleY(0);
    transform-origin: top;
}

.parpado.abajo { bottom: 0; top: auto; transform-origin: bottom; }
.parpado.arriba { top: 0; }

.parpadeo.cerrando .parpado {
    animation: cerrarOjo 0.5s cubic-bezier(0.5, 0, 0.3, 1) forwards;
}

.parpadeo.abriendo .parpado {
    animation: abrirOjo 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes cerrarOjo {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

@keyframes abrirOjo {
    from { transform: scaleY(1); }
    to   { transform: scaleY(0); }
}

/* Los objetos que se explican solos no necesitan botón de acción: al llegar
   ya hicieron lo suyo, y solo queda volver. */
.solo-atras .foco-btn.principal { display: none; }

/* --- Llegada al cuarto: remate del zoom de la portada ---
   La portada se acerca hasta apagarse; aquí el cuarto aparece muy cerca y se
   aleja hasta su sitio, así las dos animaciones se sienten una sola. */
.llegando .lienzo {
    animation: llegarAlCuarto 1.5s cubic-bezier(0.18, 0.75, 0.2, 1) both;
    transform-origin: 50% 48%;
}

@keyframes llegarAlCuarto {
    from { transform: scale(1.9); opacity: 0.45; }
    to   { transform: scale(1);   opacity: 1; }
}

.entrada-cuarto { display: none; }

@media (prefers-reduced-motion: reduce) {
    .llegando .lienzo { animation: none; }
}

/* Con una insignia en la mano, el botón principal se esconde y el de Atrás
   pasa a ser el de soltarla. */
.en-mano .foco-btn.principal { display: none; }
.en-mano .cuarto-etiqueta { opacity: 0 !important; }

/* Aviso cuando el WhatsApp está bloqueado, dentro del widget de contacto */
.wa-bloqueado-aviso {
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-muted);
    background: var(--surface-2, rgba(255,255,255,0.04));
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 4px;
}

.wa-bloqueado-aviso[hidden] { display: none; }
/* Aquí SÍ hace falta !important: .contact-widget .btn tiene display:inline-flex
   con más especificidad que [hidden], así que sin esto el botón se seguía
   viendo y funcionando aunque tuviera el atributo puesto. */
a[hidden].btn { display: none !important; }
.wa-bloqueado-aviso a { color: var(--text); text-decoration: underline; }

/* --- Girar el teléfono para MEDZROOM ---
   El cuarto se ve mucho mejor en horizontal: hay más que mirar a los lados
   que arriba y abajo. En vertical se tapa todo con este aviso, que se quita
   solo al girar el aparato. */
.gira-telefono {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: #05060c;
    text-align: center;
    padding: 24px;
}

.gira-icono {
    font-size: 3rem;
    color: rgba(244, 242, 236, 0.75);
    animation: giraAviso 2s ease-in-out infinite;
}

.gira-texto {
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.9;
    color: rgba(244, 242, 236, 0.6);
}

@keyframes giraAviso {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(90deg); }
}

@media (pointer: coarse) and (orientation: portrait) {
    .gira-telefono { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
    .gira-icono { animation: none; }
}

/* --- Aviso de volumen insuficiente, en Personaliza tu Orden ---
   Banner flotante sobre la pantalla, no un texto metido entre los
   controles: no empuja nada de contenido, aparece encima. */
/* --- Aviso de volumen insuficiente, en Personaliza tu Orden ---
   Banner flotante sobre la pantalla. Sin colores nuevos: negro en el tema
   claro, blanco en el oscuro — usa las mismas variables que ya cambian
   solas con el tema. Esquinas rectas, no una píldora redonda. */
.aviso-volumen {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 80;
    transform: translate(-50%, 12px);
    max-width: min(90vw, 420px);
    padding: 14px 20px;
    background: var(--surface);
    border: 1px solid var(--text);
    border-radius: 4px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    font-size: 0.82rem;
    color: var(--text);
    text-align: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.aviso-volumen.visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

@media (max-width: 640px) {
    .aviso-volumen { bottom: 16px; }
}

/* --- /prueba: el video de muestra para un cliente potencial ---
   Una sola cosa importa aquí: el video. Todo lo demás se queda callado
   alrededor para no competir con él. */
.prueba-hero {
    display: flex;
    align-items: center;
    justify-content: center;
}

.prueba-wrap {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 56px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.prueba-wrap .hero-credit { margin-bottom: 0; }
.prueba-wrap .label-sm { margin-bottom: 6px; }

.prueba-video-wrap {
    width: 100%;
    max-width: 1040px;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line);
    background: #000;
    margin-bottom: 22px;
    overflow: hidden;
}

.prueba-video {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.prueba-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* --- El grid de /prueba: video principal a la izquierda, panel
   "Mi Trabajo" a la derecha. El video sigue siendo lo que más pesa —
   el panel es más angosto y sus videos son más chicos a propósito. --- */
.prueba-hero-grid {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 56px);
    display: grid;
    grid-template-columns: 2fr 0.8fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.prueba-hero-grid .prueba-wrap {
    padding: 0;
    max-width: none;
}

.prueba-side {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2vw, 20px);
    max-width: 320px;
    margin: 0 auto;
}

.prueba-side-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.prueba-side-video {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line);
    background: var(--surface-2);
}

/* Las flechas de celular: en PC no hacen falta, el panel ya está siempre
   a la vista. */
.prueba-side-arrow {
    display: none;
}

@media (max-width: 900px) {
    /* En celular no caben las dos columnas: se apilan y el panel arranca
       escondido. La clase "mostrando-sobre-mi" (puesta por JS) es la que
       decide cuál de las dos se ve. */
    .prueba-hero-grid {
        display: block;
    }

    .prueba-side {
        display: none;
    }

    .prueba-hero-grid.mostrando-sobre-mi .prueba-wrap {
        display: none;
    }

    .prueba-hero-grid.mostrando-sobre-mi .prueba-side {
        display: flex;
    }

    .prueba-side-arrow {
        display: flex;
        align-items: center;
        gap: 6px;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 10px 16px;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text);
        cursor: pointer;
        white-space: nowrap;
    }

    .prueba-side-arrow-right {
        margin-top: 4px;
    }

    .prueba-side-arrow-left {
        margin-bottom: 4px;
        align-self: flex-start;
    }
}

/* Un solo momento de entrada, no varios efectos sueltos: el bloque entero
   aparece con un ligero ascenso, igual que el hero del inicio. */
#pruebaHero .prueba-wrap > * {
    opacity: 0;
    transform: translateY(14px);
}

#pruebaHero.revealed .prueba-wrap > * {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

#pruebaHero.revealed .prueba-wrap > *:nth-child(1) { transition-delay: 0.05s; }
#pruebaHero.revealed .prueba-wrap > *:nth-child(2) { transition-delay: 0.15s; }
#pruebaHero.revealed .prueba-wrap > *:nth-child(3) { transition-delay: 0.28s; }
#pruebaHero.revealed .prueba-wrap > *:nth-child(4) { transition-delay: 0.42s; }

@media (prefers-reduced-motion: reduce) {
    #pruebaHero .prueba-wrap > * { opacity: 1; transform: none; }
}

/* --- Carrusel de creadores, en /prueba ---
   Solo se mueve si de verdad no caben en pantalla. Con pocos logos se
   queda quieto y centrado — nada de un bucle infinito con 2 imágenes
   dando vueltas sin sentido. La detección de qué archivos existen y la
   decisión de mover o no la toma el JS; aquí solo el aspecto. */
.creators-section {
    border-top: 1px solid var(--line);
    padding: 32px 0 clamp(48px, 8vw, 80px);
    margin-top: 8px;
}

.creators-label {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.creators-marquee {
    display: flex;
    justify-content: center;
    /* Solo se recorta a los lados. Antes también arriba y abajo, y por eso
       los logos se veían cortados al crecer con el mouse. */
    overflow-x: hidden;
    overflow-y: visible;
    padding: 14px clamp(20px, 5vw, 56px);
}

.creators-track {
    display: flex;
    align-items: center;
    gap: clamp(28px, 5vw, 56px);
    flex-shrink: 0;
}

.creators-track.is-scrolling {
    justify-content: flex-start;
    animation: creatorsScroll 26s linear infinite;
    will-change: transform;
}

.creators-logo {
    height: clamp(67px, 9.6vw, 96px);
    width: auto;
    flex-shrink: 0;
    opacity: 1;               /* siempre a color */
    transition: transform 0.2s ease, filter 0.2s ease;
}

.creators-logo:hover {
    transform: scale(1.12);   /* se nota más que antes */
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}

/* Cuando el logo va envuelto en un link, el link es el que responde al
   clic y al foco — no el <img> suelto. */
.creators-track a {
    display: flex;
    flex-shrink: 0;
}

/* Las miniaturas de video son 16:9, no el logo cuadrado-ish de un creador
   — se dimensionan por ancho, no por alto, para que se vean como una
   miniatura de video y no como un logo estirado. */
.prueba-anterior-thumb {
    height: auto;
    width: clamp(160px, 20vw, 220px);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid var(--line);
}

@keyframes creatorsScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .creators-track.is-scrolling { animation: none; }
}


/* =========================================================================
   MODO EVENTO — TEMPORAL (hoy: DEDsafio)

   Todo lo de aquí para abajo es del evento. Se activa poniendo la clase
   "modo-evento" en <html> (lo hace evento.js). Cambia la página COMPLETA:
   fondo, header, letras, botones, tarjetas, footer.

   Para el próximo evento no hay que tocar nada de aquí: solo evento.js y
   las imágenes. Para quitarlo: borrar desde este comentario hasta el final.
   ========================================================================= */

:root {
    --evento-arcoiris: linear-gradient(90deg, #3ee02f, #28d7ff, #7a5cff, #ff3fd0, #ff3b3b, #ff9d1c, #ffe23b, #3ee02f);
    --evento-oro: linear-gradient(180deg, #fff3a6 0%, #ffd23f 38%, #ff9a1f 72%, #f2531c 100%);
    --evento-vidrio: rgba(14, 8, 30, 0.58);
    --evento-vidrio-2: rgba(24, 14, 46, 0.72);
    --font-evento: 'Russo One', 'Manrope', sans-serif;
}

/* ---------- Tokens: toda la página se vuelve "vidrio sobre la montaña",
   igual en tema oscuro que en claro (lo único que cambia es la imagen). */
html.modo-evento {
    --bg: var(--evento-vidrio);
    --surface: var(--evento-vidrio-2);
    --surface-2: rgba(34, 20, 60, 0.78);
    --text: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.74);
    --line: rgba(255, 255, 255, 0.16);
    --accent: #ffd23f;
    --accent-ink: #2a0e00;
    --font-display: var(--font-evento);
    background: #120a24;
}
html.modo-evento body {
    background: transparent;
}
html.modo-evento h1,
html.modo-evento h2,
html.modo-evento h3,
html.modo-evento .display-1,
html.modo-evento .display-2,
html.modo-evento .wordmark,
html.modo-evento .main-nav a {
    font-family: var(--font-evento);
    letter-spacing: 0.01em;
}

/* ---------- Header: vidrio con la línea arcoíris abajo ---------- */
html.modo-evento .site-header,
html.modo-evento .site-header.scrolled {
    background: rgba(12, 6, 26, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: none;
}
html.modo-evento .site-header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--evento-arcoiris);
    background-size: 200% 100%;
    animation: evento-arcoiris-corre 8s linear infinite;
}
@keyframes evento-arcoiris-corre {
    from { background-position: 0% 0; }
    to { background-position: 200% 0; }
}

/* ---------- Botones: dorados como el logo, con "canto" abajo tipo bloque ---------- */
html.modo-evento .btn {
    background: var(--evento-oro);
    color: #2a0e00;
    border: 2px solid #fff2b0;
    border-radius: 10px;
    font-family: var(--font-evento);
    letter-spacing: 0.02em;
    box-shadow: 0 4px 0 #8a2e05, 0 10px 22px rgba(255, 150, 30, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
html.modo-evento .btn:hover {
    background: var(--evento-oro);
    color: #2a0e00;
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 6px 0 #8a2e05, 0 14px 28px rgba(255, 150, 30, 0.35);
}
html.modo-evento .btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #8a2e05;
}
html.modo-evento .btn-ghost,
html.modo-evento .toggle-block-btn {
    background:
        linear-gradient(var(--evento-vidrio-2), var(--evento-vidrio-2)) padding-box,
        var(--evento-arcoiris) border-box;
    border: 2px solid transparent;
    border-radius: 10px;
    color: #fff;
    box-shadow: none;
}
html.modo-evento .btn-ghost:hover,
html.modo-evento .toggle-block-btn:hover {
    background:
        linear-gradient(rgba(44, 26, 80, 0.85), rgba(44, 26, 80, 0.85)) padding-box,
        var(--evento-arcoiris) border-box;
    color: #fff;
}

/* ---------- Pestañas ---------- */
html.modo-evento .tab-toggle {
    border: none;
    gap: 6px;
    background: rgba(12, 6, 26, 0.5);
    padding: 6px;
    border-radius: 12px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
html.modo-evento .tab-toggle button {
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.75);
}
html.modo-evento .tab-toggle button.active {
    background: var(--evento-oro);
    color: #2a0e00;
    font-family: var(--font-evento);
}

/* El botón de la pestaña del evento, visto DESDE las otras pestañas:
   letra del evento y texto arcoíris en movimiento, para que llame. */
.tab-toggle button.tab-dedsafio {
    font-family: var(--font-evento);
    letter-spacing: 0.02em;
    background-image: var(--evento-arcoiris);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: evento-arcoiris-corre 6s linear infinite;
}
.tab-toggle button.tab-dedsafio.active {
    background: var(--evento-oro);
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #2a0e00;
    animation: none;
}
.evento-inline-icon {
    height: 1.1em;
    width: auto;
    vertical-align: -0.2em;
    margin-right: 6px;
}

/* ---------- Tarjetas: vidrio con borde arcoíris ---------- */
html.modo-evento .price-card,
html.modo-evento .custom-order-panel,
html.modo-evento .vip-panel {
    background:
        linear-gradient(var(--evento-vidrio-2), var(--evento-vidrio-2)) padding-box,
        var(--evento-arcoiris) border-box;
    border: 2px solid transparent;
    border-radius: 16px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
html.modo-evento .price-amount {
    background: var(--evento-oro);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: var(--font-evento);
}

/* ---------- El fondo de toda la página ---------- */
.evento-fondo { display: none; }
html.modo-evento .evento-fondo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
/* Cielo de respaldo (se ve si todavía no hay imagen). Noche morada en
   oscuro, cielo azul de día en claro — como los pósters del evento. */
.evento-cielo-css {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #140827 0%, #3b1450 48%, #7a2a4a 100%);
}
html[data-theme="light"] .evento-cielo-css {
    background: linear-gradient(180deg, #2f7fd6 0%, #7cc4ff 55%, #d6f1ff 100%);
}
/* Montaña de respaldo, hecha de escalones como si fuera de bloques. */
.evento-montana-css {
    position: absolute;
    left: 50%;
    bottom: -4vh;
    width: 110vw;
    height: 78vh;
    margin-left: -55vw;
    background: linear-gradient(180deg, #3a2352 0%, #24143a 55%, #150b24 100%);
    clip-path: polygon(0% 100%, 6% 92%, 6% 86%, 12% 86%, 12% 78%, 18% 78%, 18% 68%, 24% 68%, 24% 58%, 30% 58%, 30% 46%, 36% 46%, 36% 34%, 42% 34%, 42% 22%, 48% 22%, 48% 12%, 54% 12%, 54% 6%, 60% 6%, 60% 14%, 66% 14%, 66% 26%, 72% 26%, 72% 40%, 78% 40%, 78% 54%, 84% 54%, 84% 68%, 90% 68%, 90% 82%, 96% 82%, 96% 92%, 100% 92%, 100% 100%);
}
html[data-theme="light"] .evento-montana-css {
    background: linear-gradient(180deg, #5f9a3c 0%, #6b5a36 45%, #4a3a26 100%);
}
.evento-fondo-img {
    position: absolute;
    left: 0;
    top: -16vh;           /* sobra arriba para poder bajar al hacer scroll */
    width: 100%;
    height: calc(100% + 16vh);
    object-fit: cover;
}
.evento-fondo-img.falta { display: none; }
html:not([data-theme="light"]) .evento-fondo-claro,
html[data-theme="light"] .evento-fondo-oscuro { display: none; }
/* Oscurece un poco el fondo para que el texto siempre se lea. */
html.modo-evento .evento-fondo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 4, 18, 0.35) 0%, rgba(8, 4, 18, 0.15) 40%, rgba(8, 4, 18, 0.55) 100%);
}
/* La ruleta grande, detrás, que baja más lento que la página. Si todavía
   no hay imagen, se dibuja con CSS. */
/* La ruleta grande del fondo. Son DOS capas a propósito:
     - .evento-ruleta-envoltura: la posición, el flote y el parallax.
     - .evento-ruleta-fondo (adentro): SOLO el giro, sobre su propio centro.
   Si las dos cosas van en el mismo elemento, el parallax se aplica ya
   girado y la ruleta se sale de su lugar después de cada vuelta.

   --r es su tamaño. Queda abajo a la derecha, un poco cortada por la orilla
   de la pantalla, con el centro a la vista. */
.evento-ruleta-envoltura {
    --r: min(42vw, 820px);
    position: absolute;
    width: var(--r);
    aspect-ratio: 1;
    right: calc(var(--r) * -0.4);
    bottom: calc(var(--r) * -0.2);
    animation: evento-flotar-ruleta 7s ease-in-out infinite;
}
@keyframes evento-flotar-ruleta {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -22px; }
}
.evento-ruleta-fondo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.32;
    transform-origin: 50% 50%;
}
.evento-ruleta-fondo.falta {
    border-radius: 50%;
    background: conic-gradient(#3ee02f, #28d7ff, #7a5cff, #ff3fd0, #ff3b3b, #ff9d1c, #ffe23b, #3ee02f);
    opacity: 0.22;
}
@media (max-width: 700px) {
    .evento-ruleta-envoltura { --r: 75vw; }
}
@keyframes evento-girar {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}
/* Cuadritos flotando. */
.evento-particulas span {
    position: absolute;
    opacity: 0.7;
    box-shadow: 0 0 10px currentColor;
    animation: evento-particula 12s ease-in-out infinite;
}
@keyframes evento-particula {
    0%, 100% { translate: 0 0; opacity: 0.15; }
    50% { translate: 0 -40px; opacity: 0.8; }
}
.evento-aviso-fondo {
    display: none;
}
html.modo-evento .evento-aviso-fondo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 450;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.72);
    border: 1px dashed rgba(255, 255, 255, 0.5);
    color: #fff;
    font-size: 0.7rem;
    pointer-events: none;
}

/* ---------- Placeholders: el recuadro que dice qué imagen va ---------- */
.evento-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    padding: 12px;
    border: 2px dashed rgba(255, 255, 255, 0.55);
    border-radius: 12px;
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 12px, transparent 12px 24px),
        rgba(12, 6, 26, 0.55);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 0.74rem;
    line-height: 1.35;
    overflow: hidden;
}
.evento-ph strong { font-size: 0.8rem; word-break: break-all; }
.evento-ph span { opacity: 0.85; }
.evento-ph em { opacity: 0.7; font-style: normal; font-size: 0.68rem; }

/* ---------- Cosas flotando (nutrias, Reviil...) ---------- */
.evento-flotar {
    animation: evento-flotar 5s ease-in-out infinite;
}
@keyframes evento-flotar {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}
@media (prefers-reduced-motion: reduce) {
    .evento-flotar,
    .evento-particulas span,
    .evento-ruleta-envoltura,
    html.modo-evento .site-header::after,
    .tab-toggle button.tab-dedsafio { animation: none; }
}

/* ---------- Pestaña de planes en /cotizaciones ----------
   Orden: logo → planes con nutrias → historia + video (con personaje)
   → info → créditos. */

/* 1) Logo centrado hasta arriba */
.evento-logo-centro {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(28px, 5vw, 48px);
}
.evento-logo-centro a {
    display: block;
    width: min(460px, 80%);
    transition: transform 0.25s ease, filter 0.25s ease;
}
.evento-logo-centro a:hover {
    transform: scale(1.04);
    filter: drop-shadow(0 0 22px rgba(255, 210, 63, 0.35));
}
.evento-logo {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
}

/* 2) Planes: las nutrias se meten un poco SOBRE las tarjetas. Para que no
   tapen texto, esas tarjetas llevan más aire del lado de la nutria. */
.evento-planes {
    display: grid;
    grid-template-columns: minmax(130px, 220px) 1fr minmax(130px, 220px);
    align-items: end;
    margin-bottom: clamp(56px, 9vw, 96px);
}
.evento-planes-cards {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(16px, 2.5vw, 28px);
}
.evento-planes-cards .price-card { height: 100%; }
.evento-planes-cards .price-card:first-child { padding-left: 56px; }
.evento-planes-cards .price-card:last-child { padding-right: 56px; }
.evento-nutria-lado {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    align-self: end;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.45));
}
/* Se mueven con left (no con margen): con margen negativo, el grid solo
   respetaba el de la derecha y quedaban a distancias distintas. */
.evento-nutria-izq { left: 60px; }
.evento-nutria-der { left: -60px; }
@media (max-width: 900px) {
    /* En celular las dos nutrias quedan arriba, asomándose sobre los planes. */
    .evento-planes {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "izq der" "cards cards";
    }
    .evento-nutria-izq { grid-area: izq; left: 0; margin: 0 0 -36px; justify-self: center; }
    .evento-nutria-der { grid-area: der; left: 0; margin: 0 0 -36px; justify-self: center; }
    .evento-planes-cards { grid-area: cards; }
    .evento-nutria-lado { max-width: 150px; }
    .evento-planes-cards .price-card:first-child,
    .evento-planes-cards .price-card:last-child { padding-left: 22px; padding-right: 22px; }
}

/* 3) El video casi a pantalla completa. La escena ocupa el 96% del ancho
   de la PANTALLA (se sale del contenedor a propósito). El video usa el 76%
   de la escena, y el personaje va a la derecha con el MISMO alto que el
   video, encimado sobre su orilla. */
.evento-historia-cabeza {
    text-align: center;
    margin-bottom: 18px;
}
.evento-historia-titulo {
    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    margin: 8px 0 0;
}
.evento-escena {
    position: relative;
    width: 96vw;
    margin-left: calc(50% - 48vw);
    margin-bottom: clamp(40px, 6vw, 64px);
}
.evento-escena-video {
    position: relative;
    z-index: 1;
    width: 76%;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    background:
        linear-gradient(#000, #000) padding-box,
        var(--evento-arcoiris) border-box;
    border: 3px solid transparent;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.evento-escena-video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}
.evento-personaje {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    height: 100%;
    width: auto;
    aspect-ratio: 5 / 7;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.5));
}

/* 3b) La historia: línea del tiempo, cada capítulo se abre con un click. */
.evento-lore {
    max-width: 860px;
    margin: 0 auto clamp(56px, 9vw, 96px);
}
.evento-desc {
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.95rem;
    text-align: center;
    margin: 0 auto 20px;
    max-width: 60ch;
}
.evento-lore-lista {
    list-style: none;
    margin: 0;
    padding: 0 0 0 26px;
    position: relative;
    display: grid;
    gap: 10px;
}
.evento-lore-lista::before {
    /* la línea del tiempo */
    content: '';
    position: absolute;
    left: 8px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: var(--evento-arcoiris);
}
.evento-lore-item {
    position: relative;
    border-radius: 12px;
    background: rgba(12, 6, 26, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.evento-lore-item::before {
    /* el punto de cada capítulo sobre la línea */
    content: '';
    position: absolute;
    left: -24px;
    top: 17px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd23f;
    box-shadow: 0 0 0 3px rgba(12, 6, 26, 0.9), 0 0 12px rgba(255, 210, 63, 0.6);
}
.evento-lore-item.abierto {
    background: rgba(34, 18, 62, 0.8);
    border-color: rgba(255, 210, 63, 0.45);
}
.evento-lore-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.evento-lore-nombre {
    font-family: var(--font-evento);
    font-size: 1rem;
    flex: 1;
}
.evento-lore-anio {
    font-family: var(--font-evento);
    font-size: 0.72rem;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--evento-oro);
    color: #2a0e00;
}
.evento-lore-flecha {
    width: 9px;
    height: 9px;
    border-right: 2px solid rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid rgba(255, 255, 255, 0.8);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin: 0 2px 4px 4px;
}
.evento-lore-btn[aria-expanded="true"] .evento-lore-flecha {
    transform: rotate(-135deg);
    margin-bottom: -2px;
}
.evento-lore-texto {
    padding: 0 16px 14px;
}
.evento-lore-texto p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}
.evento-fechas {
    display: inline-block;
    font-family: var(--font-evento);
    font-size: 0.82rem;
    padding: 6px 12px;
    border-radius: 999px;
    background:
        linear-gradient(rgba(12, 6, 26, 0.7), rgba(12, 6, 26, 0.7)) padding-box,
        var(--evento-arcoiris) border-box;
    border: 2px solid transparent;
}

/* 4) Info y créditos, hasta abajo */
.evento-info {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    border-radius: 16px;
    background:
        linear-gradient(var(--evento-vidrio-2), var(--evento-vidrio-2)) padding-box,
        var(--evento-arcoiris) border-box;
    border: 2px solid transparent;
}
.evento-nutria-info {
    flex: 0 0 auto;
    width: 110px;
    aspect-ratio: 1;
    object-fit: contain;
}
.evento-info p { margin: 0; }
.evento-info strong {
    font-family: var(--font-evento);
    background: var(--evento-oro);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* Créditos: una línea discreta, centrada, sin recuadro. */
.evento-creditos {
    max-width: 760px;
    margin: 22px auto 0;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    text-align: center;
    font-size: 0.72rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
}
.evento-creditos a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.evento-creditos a:hover { color: #ffd23f; }
@media (max-width: 900px) {
    .evento-info { flex-direction: column; text-align: center; }
}

/* ---------- Círculo flotante (index, portfolio, cotizaciones) ----------
   Se ve SIEMPRE, aunque no haya imágenes: la ruleta y el número se
   dibujan con CSS, y en cuanto subes las imágenes se ponen encima. */
.evento-fab {
    position: fixed;
    left: 22px;
    bottom: 22px;
    z-index: 450;
    width: 84px;
    height: 84px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 50%;
}
.evento-fab::before {
    /* anillo que "respira" para que nadie lo pase de largo */
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: var(--evento-arcoiris);
    filter: blur(8px);
    opacity: 0.55;
    animation: evento-respira 2.4s ease-in-out infinite;
}
@keyframes evento-respira {
    0%, 100% { transform: scale(0.94); opacity: 0.35; }
    50% { transform: scale(1.06); opacity: 0.7; }
}
.evento-fab-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
}
.evento-fab:hover .evento-fab-inner,
.evento-fab:focus-visible .evento-fab-inner { transform: scale(1.14); }

.evento-fab-rueda,
.evento-fab-rueda-css,
.evento-fab-num,
.evento-fab-num-css {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none;
}
.evento-fab-rueda { object-fit: contain; }
.evento-fab-rueda-css {
    background:
        radial-gradient(circle, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.35) 53%, rgba(0, 0, 0, 0) 56%),
        conic-gradient(#3ee02f, #28d7ff, #7a5cff, #ff3fd0, #ff3b3b, #ff9d1c, #ffe23b, #3ee02f);
    border: 3px solid #ffd23f;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.5);
}
.evento-fab-num { object-fit: contain; transition: transform 0.3s ease; }
.evento-fab-num-css {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-evento);
    font-size: 2.1rem;
    background: var(--evento-oro);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 0 #7a2604) drop-shadow(0 0 6px rgba(0, 0, 0, 0.6));
    transition: transform 0.3s ease;
}
/* En hover gira SOLO la ruleta; el número se queda quieto y crece un poco más. */
.evento-fab:hover .evento-fab-rueda,
.evento-fab:hover .evento-fab-rueda-css {
    animation: evento-girar-fab 1.6s linear infinite;
}
.evento-fab:hover .evento-fab-num,
.evento-fab:hover .evento-fab-num-css { transform: scale(1.18); }
@keyframes evento-girar-fab {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* La etiqueta que sale al pasar el mouse, para que se sepa qué es. */
.evento-fab-texto {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translate(-6px, -50%);
    white-space: nowrap;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(12, 6, 26, 0.9);
    color: #fff;
    font-family: var(--font-evento);
    font-size: 0.78rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.evento-fab:hover .evento-fab-texto,
.evento-fab:focus-visible .evento-fab-texto {
    opacity: 1;
    transform: translate(0, -50%);
}
@media (max-width: 640px) {
    .evento-fab { width: 68px; height: 68px; left: 14px; bottom: 14px; }
    .evento-fab-num-css { font-size: 1.7rem; }
    .evento-fab-texto { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .evento-fab::before,
    .evento-fab:hover .evento-fab-rueda,
    .evento-fab:hover .evento-fab-rueda-css { animation: none; }
}

/* ---------- Banner tipo Kick en el hero del index ---------- */
.evento-kick {
    position: absolute;
    top: calc(var(--header-h) + 40px);
    left: 50%;
    transform: translateX(-50%);
    width: min(94%, 1060px);
    z-index: 7;
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    align-items: stretch;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background:
        linear-gradient(#17112a, #17112a) padding-box,
        var(--evento-arcoiris) border-box;
    border: 2px solid transparent;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.evento-kick:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
}
.evento-kick-texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 16px 20px;
}
.evento-kick-tag {
    align-self: flex-start;
    font-family: var(--font-evento);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--evento-oro);
    color: #2a0e00;
}
.evento-kick-nombre {
    font-family: var(--font-evento);
    font-size: 1.25rem;
}
.evento-kick-desc {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
}
.evento-kick-fechas {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
}
.evento-kick-arte {
    position: relative;
    min-height: 130px;
}
.evento-kick-arte img,
.evento-kick-arte .evento-ph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    border-width: 0 0 0 2px;
}
.evento-kick-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    font-family: var(--font-evento);
    font-size: 0.75rem;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--evento-oro);
    color: #2a0e00;
    box-shadow: 0 3px 0 #8a2e05;
}
@media (max-width: 760px) {
    .evento-kick {
        grid-template-columns: 1fr;
        top: calc(var(--header-h) + 14px);
    }
    .evento-kick-arte { min-height: 90px; }
    .evento-kick-desc { display: none; }
}

/* ---------- Página personal /prueba/nombre ---------- */
.evento-persona {
    min-height: 100svh;
    padding: calc(var(--header-h) + 40px) clamp(20px, 5vw, 56px) 60px;
    border-top: none;
}
.evento-persona-grid {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(20px, 4vw, 56px);
    /* Arriba, no al centro: la skin es muy alta y, centrado, empujaba el
       logo y el nombre hasta la mitad de la página. */
    align-items: start;
}
.evento-skin {
    display: block;
    width: 100%;
    max-width: 460px;
    max-height: 70vh;   /* que no se coma toda la pantalla */
    aspect-ratio: 5 / 7;
    object-fit: contain;
    margin: 0 auto;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
}
.evento-participante {
    display: block;
    font-family: var(--font-evento);
    letter-spacing: 0.4em;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 6px;
}
.evento-nombre {
    font-family: var(--font-evento);
    font-size: clamp(3rem, 9vw, 6.5rem);
    line-height: 0.95;
    color: #fff;
    margin: 0 0 16px;
    /* contorno arcoíris como en los pósters, con sombras de colores */
    text-shadow:
        -3px -3px 0 #7a5cff,
         3px -3px 0 #ff3fd0,
         3px  3px 0 #ff9d1c,
        -3px  3px 0 #28d7ff,
         0 10px 26px rgba(0, 0, 0, 0.55);
}
/* La barra toma el color de cada streamer (--color-streamer lo pone
   evento-dedsafio.php). Los colores son los de la ruleta del evento. */
.evento-barra {
    height: 10px;
    border-radius: 3px;
    background: var(--color-streamer, #ffd23f);
    box-shadow: 0 0 18px var(--color-streamer, #ffd23f);
    margin: 18px 0;
}
.evento-persona-video {
    max-width: 1000px;
    margin: clamp(32px, 6vw, 64px) auto 0;
}
.evento-persona-video .marco {
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background:
        linear-gradient(#000, #000) padding-box,
        var(--evento-arcoiris) border-box;
    border: 3px solid transparent;
}
.evento-persona-video iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}
.evento-persona-video .evento-ph {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
}
.evento-persona-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}
.evento-nutria-persona {
    position: absolute;
    width: clamp(90px, 12vw, 150px);
    aspect-ratio: 1;
    object-fit: contain;
}
@media (max-width: 820px) {
    .evento-persona-grid { grid-template-columns: 1fr; text-align: center; }
    .evento-skin { max-width: 300px; }
}

/* En la página personal el logo va más chico, arriba del nombre. El link
   mide EXACTO lo mismo que la imagen, para que al pasar el mouse crezca
   desde su centro (antes crecía hacia la izquierda). */
/* El área que se puede picar tiene que medir EXACTO lo mismo que el logo.
   Antes la imagen iba en una caja 16:9 con "contain": si el logo no es
   exactamente 16:9, sobraba caja invisible a los lados y se podía picar
   fuera del dibujo. Ahora la imagen usa su proporción real y el link se
   ajusta a ella. */
.evento-persona .evento-logo-link {
    display: block;
    width: 360px;
    max-width: 100%;
    font-size: 0;      /* sin hueco debajo de la imagen */
    line-height: 0;
    margin-bottom: 10px;
    transform-origin: 50% 50%;
}
.evento-persona .evento-logo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
}
/* Si todavía no hay logo, el recuadro sí necesita una proporción. */
.evento-persona .evento-ph.evento-logo { aspect-ratio: 16 / 9; }
.evento-logo-link {
    display: inline-block;
    transition: transform 0.25s ease, filter 0.25s ease;
}
.evento-logo-link:hover {
    transform: scale(1.04);
    filter: drop-shadow(0 0 22px rgba(255, 210, 63, 0.35));
}

/* En la página personal la descripción va alineada a la izquierda. */
.evento-persona .evento-desc {
    text-align: left;
    margin: 0 0 16px;
}
@media (max-width: 820px) {
    .evento-persona .evento-desc { text-align: center; margin: 0 auto 16px; }
    .evento-persona .evento-logo-link { margin-left: auto; margin-right: auto; }
}


/* La ruleta del círculo gira rápido mientras suena la risa, y la página
   cambia hasta que termina. */
.evento-fab.sonando .evento-fab-inner { transform: scale(1.18); }
.evento-fab.sonando .evento-fab-rueda,
.evento-fab.sonando .evento-fab-rueda-css {
    animation: evento-girar-fab 0.7s linear infinite;
}

/* Dentro de la historia: la nota de créditos y los links. */
.evento-lore-texto em {
    font-style: normal;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
}
.evento-lore-texto a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.evento-lore-texto a:hover { color: #ffd23f; }

/* Página personal: el mensaje extra y el botón de cotizar su video. */
.evento-extra {
    max-width: 1000px;
    margin: clamp(28px, 5vw, 48px) auto 0;
    padding: 18px 22px;
    border-radius: 16px;
    background:
        linear-gradient(var(--evento-vidrio-2), var(--evento-vidrio-2)) padding-box,
        linear-gradient(90deg, var(--color-streamer, #ffd23f), transparent) border-box;
    border: 2px solid transparent;
}
.evento-extra h2 {
    font-family: var(--font-evento);
    font-size: 1.1rem;
    margin: 0 0 8px;
    color: var(--color-streamer, #ffd23f);
}
.evento-extra p {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.6;
}
.evento-precio-video {
    display: block;
    width: 100%;
    text-align: center;
    margin: 14px 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

/* La skin de cada streamer lleva a su X. */
.evento-skin-link {
    display: block;
    width: 100%;
    max-width: 460px;   /* mismo tamaño que la skin, para no picar de más */
    margin: 0 auto;
    cursor: pointer;
    transition: transform 0.25s ease;
}
.evento-skin-link:hover { transform: scale(1.03); }
@media (max-width: 820px) {
    .evento-skin-link { max-width: 300px; }
}