/* =========================================================================
   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 Dez (oscuro) / Medz (claro).
   ========================================================================= */

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

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

:root {
    /* Dez — 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: 'Space Grotesk', sans-serif;
    --header-h: 76px;
    --max-w: 1240px;
}

html[data-theme="light"] {
    /* Medz — 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-size: clamp(4.5rem, 16vw, 13rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.85;
}

.display-2 {
    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-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-simple) .pared-simple .card3d,
.stage.modo-simple .pared-avanzada .card3d {
    pointer-events: none;
}

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

/* Girada a la derecha se ve la pared de Simple. */
.stage.modo-simple .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; }

/* 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) {
    .stage {
        height: 68svh;
        min-height: 420px;
        perspective: 1200px;
    }

    /* Las dos paredes desaparecen como cajas: sus tarjetas pasan a ser hijas
       directas de la rejilla. En celular no hay giro de cámara ni profundidad,
       así que solo se muestran las del modo activo. */
    .paredes,
    .pared {
        display: contents;
    }

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

    .layer-cards {
        position: absolute;
        inset: 0;
        display: grid;
        align-content: center;
        justify-content: center;
        gap: 10px;
        padding: 46px 16px 52px;
    }

    .layer[data-layer="0"] .layer-cards { grid-template-columns: repeat(2, 1fr); }
    .layer[data-layer="1"] .layer-cards { grid-template-columns: repeat(3, 1fr); }
    .layer[data-layer="2"] .layer-cards { grid-template-columns: 1fr; align-content: start; overflow-y: auto; }

    .card3d,
    .process-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        --z: 0px;
        filter: brightness(0.9);
    }

    .card3d { margin: 4px 2px; }

    .deco { display: none; }

    .layer-title { top: 14px; left: 16px; font-size: 0.64rem; }
    /* En pantallas angostas, los botones de tipo ocupan todo el ancho
       disponible. El contador de páginas ya no vive aquí — está centrado
       en medio del recuadro del video, no en esta fila. */
    .stage-nav { left: 12px; right: 12px; bottom: 12px; }
    .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: 900px;
    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;
}

/* 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;
    overflow: hidden;
    padding: 0 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: 0.8;
    filter: grayscale(1);
    transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

.creators-logo:hover {
    opacity: 1;
    filter: grayscale(0);
    transform: scale(1.04);
}

/* 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; }
}

/* --- Caso real, en /prueba: video a la izquierda, historia a la derecha --- */
.prueba-historia {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(32px, 6vw, 64px) clamp(20px, 5vw, 56px);
    border-top: 1px solid var(--line);
}

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

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

.prueba-historia-texto .prueba-historia-stat {
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}

.prueba-historia-texto p:not(.prueba-historia-stat) {
    color: var(--text-muted);
    line-height: 1.65;
    max-width: 42ch;
}

@media (max-width: 780px) {
    .prueba-historia {
        grid-template-columns: 1fr;
    }
}