/* =========================================================================
   ScreamingLAB - estilos propios
   Sistema visual "Cinematic Adventure": negro cálido + acento dorado/ámbar,
   tipografía condensada en mayúsculas (Oswald), fotografía real a pantalla
   completa, esquinas rectas (sin bordes redondeados salvo avatares/puntos),
   y secciones claras ("papel") alternadas con secciones oscuras.
   Inspirado en la dirección de arte de larian.com, adaptado a la marca e
   identidad de ScreamingLAB.
   ========================================================================= */

html {
    scroll-behavior: smooth;
}
body {
    background-color: #100e0b;
    color: #f5f1e8;
    /* OJO: NO poner overflow-x:hidden acá — rompe position:sticky en
       descendientes (usado por la galería pinneada de "Selected Work").
       Cada sección que necesita recortar contenido ancho ya tiene su
       propio overflow-hidden local (hero, facts, capabilities, contact). */
}
section[id] {
    scroll-margin-top: 84px;
}

/* --------------------------------------------------------------------
   Panel base oscuro: fondo casi sólido, borde de 1px, esquinas rectas.
   Se mantiene el nombre .glass-card por compatibilidad con el resto del
   código, pero el tratamiento visual ya no es "vidrio esmerilado".
   -------------------------------------------------------------------- */
.glass-card {
    position: relative;
    background: #17140f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.35s ease, transform 0.35s cubic-bezier(.16,1,.3,1);
}
.glass-card:hover {
    border-color: rgba(242, 183, 5, 0.35);
}

/* Vidrio real, reservado para overlays flotantes (nav, modal) donde el
   desenfoque sí cumple una función (separar del contenido que se mueve detrás). */
.glass-blur {
    background: rgba(12, 10, 8, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* --------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------- */
.btn-primary-glow {
    background-color: #f2b705;
    color: #1a1206;
    font-weight: 700;
    transition: background-color 0.3s ease, transform 0.3s cubic-bezier(.16,1,.3,1);
}
.btn-primary-glow:hover {
    background-color: #ffcc33;
    transform: translateY(-2px);
}
.btn-primary-glow:active {
    transform: translateY(0);
}
.btn-primary-glow:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-outline-gold {
    background: transparent;
    color: #f2b705;
    border: 2px solid #f2b705;
    font-weight: 700;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-outline-gold:hover {
    background: #f2b705;
    color: #1a1206;
}

/* Botón compuesto: rectángulo oscuro + pestaña dorada a la izquierda
   (referencia directa a los botones "OPEN APPLICATION" de larian.com). */
.btn-compound {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: #17140f;
    color: #f5f1e8;
    font-weight: 700;
    padding-left: 28px;
    border: 1px solid rgba(255,255,255,0.12);
    transition: background-color 0.3s ease;
}
.btn-compound::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 10px;
    background: #f2b705;
}
.btn-compound:hover {
    background: #221d16;
}

.luminous-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 80vh;
    background: radial-gradient(circle, rgba(242, 183, 5, 0.12) 0%, rgba(0,0,0,0) 70%);
    z-index: -1;
    pointer-events: none;
}

.snap-x-mandatory { scroll-snap-type: x mandatory; }
.snap-center { scroll-snap-align: center; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* --------------------------------------------------------------------
   Carrusel: arrastrar con mouse (drag-to-scroll)
   -------------------------------------------------------------------- */
.carousel-track {
    cursor: grab;
    scroll-behavior: smooth;
}
.carousel-track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
}

/* --------------------------------------------------------------------
   Flechas de carrusel: cuadradas y doradas (esquina inferior derecha de
   la sección), como los controles de paginación de larian.com.
   -------------------------------------------------------------------- */
.carousel-arrow {
    width: 48px;
    height: 48px;
    background: #f2b705;
    color: #1a1206;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s ease;
}
.carousel-arrow:hover {
    background: #ffcc33;
}
.carousel-arrow:disabled {
    background: #3a332c;
    color: #8d8474;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------
   Revelado suave al hacer scroll (Intersection Observer)
   -------------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1);
    will-change: opacity, transform;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }

/* --------------------------------------------------------------------
   Cambio de idioma sin recarga: crossfade suave del texto
   -------------------------------------------------------------------- */
[data-en] {
    transition: opacity 0.18s ease;
}
[data-en].i18n-hidden {
    opacity: 0;
}

/* --------------------------------------------------------------------
   Modal de video
   -------------------------------------------------------------------- */
.video-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(.16,1,.3,1);
}
.video-modal-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}
.video-modal-panel {
    width: 100%;
    max-width: 1100px;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 0 60px rgba(0,0,0,0.6);
    transform: scale(0.94) translateY(12px);
    transition: transform 0.4s cubic-bezier(.16,1,.3,1);
}
.video-modal-backdrop.is-open .video-modal-panel {
    transform: scale(1) translateY(0);
}
.video-modal-panel iframe,
.video-modal-panel video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* --------------------------------------------------------------------
   Toast (confirmación del formulario de contacto)
   -------------------------------------------------------------------- */
.toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translate(-50%, 16px);
    z-index: 200;
    padding: 14px 22px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(.16,1,.3,1), transform 0.35s cubic-bezier(.16,1,.3,1);
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
.toast.toast-success { background: #0f3d24; color: #7cf5b0; border: 1px solid rgba(124,245,176,0.3); }
.toast.toast-error { background: #3d0f14; color: #ffb4ab; border: 1px solid rgba(255,180,171,0.3); }

/* --------------------------------------------------------------------
   Selector de idioma
   -------------------------------------------------------------------- */
.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 3px;
}
.lang-toggle button {
    padding: 5px 12px;
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(245,241,232,0.55);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.lang-toggle button.is-active {
    background: #f2b705;
    color: #1a1206;
}

/* --------------------------------------------------------------------
   BARRA DE PROGRESO DE SCROLL (bajo el nav)
   -------------------------------------------------------------------- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #f2b705;
    z-index: 60;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.1s linear;
}

/* --------------------------------------------------------------------
   KICKER: etiqueta corta en mayúsculas, tipografía condensada dorada
   (ej. "BOARD GAME" / "OUR GAMES" en larian.com). Se combina con una
   barra vertical dorada (ver .accent-rule en las plantillas) para
   introducir un título grande.
   -------------------------------------------------------------------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #f2b705;
}

/* Resaltado tipo "marcador" — fondo dorado sólido detrás de texto oscuro
   en mayúsculas, para tags/etiquetas cortas (referencia a los filtros
   "FULL-TIME" de larian.com/careers). */
.highlight-mark {
    display: inline-block;
    background: #f2b705;
    color: #1a1206;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 9px;
}

/* --------------------------------------------------------------------
   MARQUEE / CINTA DE TEXTO EN MOVIMIENTO — mayúsculas condensadas,
   separador en punto dorado.
   -------------------------------------------------------------------- */
.marquee-strip {
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.12);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    background: #0c0a08;
    padding: 16px 0;
}
.marquee-strip__track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 32s linear infinite;
}
.marquee-strip:hover .marquee-strip__track {
    animation-play-state: paused;
}
.marquee-strip__item {
    display: flex;
    align-items: center;
    gap: 18px;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(245, 241, 232, 0.6);
    white-space: nowrap;
    padding: 0 22px;
}
.marquee-strip__item span.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f2b705;
    display: inline-block;
    flex-shrink: 0;
}
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------
   ESTADÍSTICAS ("by the numbers")
   -------------------------------------------------------------------- */
.stat-tile__value {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
}

/* --------------------------------------------------------------------
   Video cards: portadas a todo color (como las cajas de juegos de
   larian.com), con un leve realce de brillo/contraste al pasar el mouse.
   -------------------------------------------------------------------- */
.video-card__thumb {
    filter: brightness(0.88) contrast(1.05);
    transition: filter 0.5s cubic-bezier(.16,1,.3,1), transform 0.6s cubic-bezier(.16,1,.3,1);
}
.video-card:hover .video-card__thumb {
    filter: brightness(1) contrast(1.08);
    transform: scale(1.035);
}
.video-card__tag {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------
   FONDO FOTOGRÁFICO A PANTALLA COMPLETA (hero y otras secciones oscuras)
   Se le pasa la imagen vía background-image inline; esta clase solo
   define el recorte y el degradado de legibilidad encima.
   -------------------------------------------------------------------- */
.photo-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.photo-bg__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(16,14,11,0.55) 0%, rgba(16,14,11,0.25) 38%, rgba(16,14,11,0.95) 100%),
        linear-gradient(90deg, rgba(16,14,11,0.85) 0%, rgba(16,14,11,0.1) 55%);
    z-index: 1;
}

/* --------------------------------------------------------------------
   COLLAGE en blanco y negro (fondo de la sección de Capacidades) —
   varias fotos subidas por el admin, desaturadas, con un velo oscuro
   encima para que las tarjetas de contenido se sigan leyendo bien.
   -------------------------------------------------------------------- */
.collage {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #0c0a08;
}
.collage__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 2px;
    width: 100%;
    height: 100%;
}
.collage__grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.1) brightness(0.45);
    display: block;
}
.collage__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12,10,8,0.82) 0%, rgba(12,10,8,0.94) 100%);
    z-index: 1;
}

/* =========================================================================
   SISTEMA "MASTHEAD EDITORIAL" (rediseño estructural completo)
   Riel de navegación lateral + "lomo" decorativo, Hero partido con
   tipografía que sangra fuera de pantalla, galería de trabajo pinneada
   con scroll horizontal, momento tipográfico de cifras, índice de
   capacidades, y cierre tipo colofón. Reutiliza la paleta de colores
   existente (dorado/negro/naranja/bronce) — no se agregan colores nuevos.
   ========================================================================= */

/* --------------------------------------------------------------------
   RIEL DE NAVEGACIÓN (reemplaza la barra superior tradicional)
   -------------------------------------------------------------------- */
.rail {
    position: fixed;
    inset: 0 auto 0 0;
    width: 84px;
    display: none;
    flex-direction: column;
    align-items: center;
    background: #0c0a08;
    border-right: 1px solid rgba(255,255,255,0.08);
    z-index: 50;
}
@media (min-width: 768px) {
    .rail { display: flex; }
}
.rail__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    width: 100%;
}
.rail__logo img { height: 26px; width: auto; }
.rail__logo span {
    display: block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.14em;
    color: #f5f1e8;
}
.rail__index {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
    padding: 24px 0;
}
.rail__index-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #6b6558;
    transition: color 0.3s ease;
    cursor: pointer;
}
.rail__index-item:hover { color: #a39c8c; }
.rail__index-item .num {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 13px;
}
.rail__index-item .tick {
    width: 3px;
    height: 14px;
    background: currentColor;
    transition: background-color 0.3s ease, height 0.3s ease;
}
.rail__index-item.is-active { color: #f2b705; }
.rail__index-item.is-active .tick { height: 26px; background: #f2b705; }
.rail__foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 22px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    width: 100%;
}
.rail__lang {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rail__lang button {
    width: 30px;
    height: 24px;
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: rgba(245,241,232,0.5);
    border: 1px solid rgba(255,255,255,0.12);
    transition: background-color 0.25s ease, color 0.25s ease;
}
.rail__lang button.is-active { background: #f2b705; color: #1a1206; border-color: #f2b705; }
.rail__cta {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2b705;
    color: #1a1206;
    transition: background-color 0.25s ease, transform 0.25s ease;
}
.rail__cta:hover { background: #ffcc33; transform: translateY(-2px); }

/* "Lomo" decorativo: línea vertical con marcas, corre pegada al riel en
   toda la altura de la página — referencia a encuadernación/timeline. */
.spine {
    position: fixed;
    left: 84px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: repeating-linear-gradient(
        to bottom,
        rgba(242,183,5,0.35) 0px, rgba(242,183,5,0.35) 5px,
        transparent 5px, transparent 26px
    );
    z-index: 40;
    pointer-events: none;
    display: none;
}
@media (min-width: 768px) {
    .spine { display: block; }
}

/* Barra superior compacta (solo mobile): logo + botón de menú */
.mobile-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(12,10,8,0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (min-width: 768px) {
    .mobile-topbar { display: none; }
}

/* Overlay de índice a pantalla completa (menú mobile) */
.index-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: #0c0a08;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity 0.4s cubic-bezier(.16,1,.3,1), transform 0.4s cubic-bezier(.16,1,.3,1);
}
.index-overlay.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.index-overlay__item {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
}
.index-overlay__item .num { color: #f2b705; font-size: 15px; font-weight: 600; }
.index-overlay__item .label { font-size: 34px; font-weight: 700; color: #f5f1e8; }

/* --------------------------------------------------------------------
   HERO: composición partida, sin título centrado ni botón debajo
   -------------------------------------------------------------------- */
.masthead-meta {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #a39c8c;
    display: flex;
    align-items: center;
    gap: 10px;
}
.masthead-meta .sep { width: 4px; height: 4px; background: #f2b705; flex-shrink: 0; }

.hero-credits {
    display: flex;
    flex-direction: column;
}
.hero-credits__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-family: 'Inter', sans-serif;
}
.hero-credits__row:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }
.hero-credits__row .k {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b6558;
}
.hero-credits__row .v { font-size: 15px; color: #f5f1e8; text-align: right; }
.hero-credits__row.is-link .v { color: #f2b705; }
.hero-credits__row.is-link {
    cursor: pointer;
    transition: padding-left 0.3s ease;
}
.hero-credits__row.is-link:hover { padding-left: 8px; }

/* Placa fotográfica asimétrica (no es un fondo a pantalla completa) */
.hero-plate {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(242,183,5,0.25);
    background: #17140f;
}
.hero-plate .photo-bg { position: absolute; inset: 0; }
.hero-plate .luminous-core { width: 140%; height: 140%; z-index: 0; }

/* Etiqueta tipo "ficha técnica" anclada a la esquina superior de la placa,
   para que el recuadro se lea como una imagen/figura compuesta a propósito
   (incluso antes de subir una foto real desde /admin/media.php) y no como
   un rectángulo vacío sin identidad. */
.hero-plate__tag {
    position: absolute;
    z-index: 2;
    top: 16px;
    left: 16px;
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f2b705;
    background: rgba(16,14,11,0.55);
    padding: 5px 10px;
    border: 1px solid rgba(242,183,5,0.3);
}

/* El CTA se ancla JUSTO DEBAJO de la placa (no encima), con un leve
   solape de borde (hairline) para que se lea como una etiqueta que
   "cuelga" del recuadro sin taparle el contenido — en vez de flotar
   sobre la mitad inferior de la foto/glow. */
.hero-cta-stamp {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: -1px;
    max-width: 200px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f2b705;
    color: #1a1206;
    padding: 14px 18px;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.25;
    letter-spacing: 0.01em;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.hero-cta-stamp:hover { background: #ffcc33; transform: translate(-3px, -3px); }

/* --------------------------------------------------------------------
   SELECTED WORK: carrusel horizontal simple (2D) — scroll nativo con
   snap + arrastre con mouse, y flechas para paginar. No se mueve ni se
   "engancha" con el scroll de la página; solo reacciona a interacción
   directa del usuario sobre la galería.
   -------------------------------------------------------------------- */
.work-stage__pin {
    display: flex;
    flex-direction: column;
}
.work-stage__track {
    display: flex;
    gap: 32px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    cursor: grab;
    scroll-behavior: smooth;
    /* El padding-right normal de un contenedor con scroll no siempre se
       respeta al llegar al final del scroll (varía según navegador). Con
       "scroll-padding" en cambio, el margen SÍ se respeta de forma
       confiable al alinear la primera/última tarjeta (scroll-snap-align:
       start/end en .work-stage__item--first/--last) — deja el mismo
       margen que el resto del sitio en vez de pegarse al borde. */
    scroll-padding-left: 20px;
    scroll-padding-right: 20px;
}
@media (min-width: 768px) {
    .work-stage__track {
        scroll-padding-left: 64px;
        scroll-padding-right: 64px;
    }
}
.work-stage__track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
}
/* Con pocas tarjetas (entran todas sin scroll) se centran en la sección
   en vez de quedar pegadas a la izquierda; JS decide cuándo aplica esto
   (measureCentering en main.js) comparando el ancho del contenido contra
   el del carrusel, así que a medida que se agregan más videos y ya no
   entran todos, vuelve solo al scroll normal desde el borde izquierdo. */
.work-stage__track.is-centered {
    justify-content: center;
}
.work-stage__item {
    flex-shrink: 0;
    width: min(72vw, 760px);
    scroll-snap-align: center;
}
/* "scroll-snap-align: center" centra cada tarjeta en todo el ancho del
   carrusel (que ocupa casi todo el viewport). Para las tarjetas del medio
   eso se ve bien porque siempre hay una vecina asomando de cada lado, pero
   en la primera y la última no hay vecina de un solo lado, y el navegador
   igual reserva espacio de sobra para poder centrarlas — eso deja un hueco
   enorme flotando en medio de la sección. Alineándolas al borde del
   carrusel en vez de centrarlas, quedan pegadas al margen del contenido
   (igual que en el reposo inicial) sin espacio vacío de sobra. */
.work-stage__item--first {
    scroll-snap-align: start;
}
.work-stage__item--last {
    scroll-snap-align: end;
}
.work-stage__item--spacer {
    /* La utilidad "w-[1px]" de Tailwind pierde contra el "width" de
       .work-stage__item de arriba (misma especificidad, pero este archivo
       se carga después de tailwind.css) — sin este override, el separador
       terminaba midiendo 760px como una tarjeta más en vez de 1px, e
       inflaba el scroll disponible después de la última tarjeta real. */
    width: 1px !important;
    scroll-snap-align: none;
}

/* --------------------------------------------------------------------
   CREATORS: carrusel horizontal simple (2D) de las personas con las que
   se trabajó — misma mecánica que Selected Work (flechas + arrastre con
   mouse + scroll/swipe nativo), con autoplay suave que se pausa con
   cualquier interacción. El nombre del creador y el nombre del evento
   aparecen al pasar el mouse sobre la tarjeta (o al enfocarla con
   teclado); en touch, donde no hay hover, quedan siempre visibles.
   -------------------------------------------------------------------- */
.creator-carousel__track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 16px;
    cursor: grab;
    scroll-behavior: smooth;
    /* Mismo criterio que .work-stage__track: usa scroll-padding (no solo
       padding) para que el margen se respete de forma confiable al
       alinear la primera/última tarjeta al borde. */
    scroll-padding-left: 4px;
    scroll-padding-right: 4px;
}
.creator-carousel__track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
}
/* Con pocos creadores (entran todos sin scroll) se centran en la
   sección; a medida que se agregan más desde el admin y ya no entran
   todos, JS saca esta clase y vuelve al scroll normal desde la
   izquierda (mismo criterio que .work-stage__track.is-centered). */
.creator-carousel__track.is-centered {
    justify-content: center;
}
.creator-carousel__item {
    flex-shrink: 0;
    width: 220px;
    scroll-snap-align: center;
}
/* Mismo criterio que .work-stage__item--first/--last: evita el hueco vacío
   al llegar a la primera o la última tarjeta del carrusel. */
.creator-carousel__item--first {
    scroll-snap-align: start;
}
.creator-carousel__item--last {
    scroll-snap-align: end;
}
.creator-carousel__card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #17140f;
    border: 1px solid rgba(21,19,15,0.12);
    box-shadow: 0 16px 32px -18px rgba(21,19,15,0.3);
    transition: border-color 0.3s ease;
}
.creator-carousel__card:hover { border-color: rgba(242,183,5,0.55); }
.creator-carousel__photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(1) contrast(1.05);
    transition: filter 0.4s ease, transform 0.4s ease;
}
.creator-carousel__card:hover .creator-carousel__photo,
.creator-carousel__card:focus-visible .creator-carousel__photo {
    filter: grayscale(0);
    transform: scale(1.05);
}
.creator-carousel__overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 18px 16px 16px;
    background: linear-gradient(to top, rgba(10,8,6,0.92) 0%, rgba(10,8,6,0.55) 55%, transparent 100%);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.creator-carousel__card:hover .creator-carousel__overlay,
.creator-carousel__card:focus-visible .creator-carousel__overlay {
    opacity: 1;
    transform: translateY(0);
}
.creator-carousel__name {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
.creator-carousel__event {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #f2b705;
}
/* Touch: no hay hover, así que la info queda siempre visible y la foto
   siempre a color (mismo criterio que el resto del sitio). */
@media (hover: none) {
    .creator-carousel__overlay { opacity: 1; transform: none; }
    .creator-carousel__photo { filter: grayscale(0); }
}

/* --------------------------------------------------------------------
   NUMERAL FANTASMA de fondo (identidad gráfica recurrente)
   -------------------------------------------------------------------- */
.watermark-num {
    position: absolute;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: rgba(245,241,232,0.04);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    white-space: nowrap;
}
.bg-paper .watermark-num { color: rgba(21,19,15,0.05); }

/* --------------------------------------------------------------------
   CAPABILITIES: índice de filas (no grilla de tarjetas)
   -------------------------------------------------------------------- */
.cap-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 32px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    transition: padding-left 0.4s cubic-bezier(.16,1,.3,1);
}
.cap-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }
.cap-row:hover { padding-left: 20px; }
.cap-row:hover .cap-row__panel { opacity: 1; transform: translateX(0) scale(1); }
.cap-row:hover .cap-row__title { color: #f2b705; }
.cap-row__title { transition: color 0.3s ease; }
.cap-row__panel {
    position: absolute;
    right: 0;
    top: 50%;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2b705;
    color: #1a1206;
    opacity: 0;
    transform: translate(24px, -50%) scale(0.85);
    transition: opacity 0.35s cubic-bezier(.16,1,.3,1), transform 0.35s cubic-bezier(.16,1,.3,1);
    pointer-events: none;
    z-index: 2;
}

/* --------------------------------------------------------------------
   COLOFÓN (pie de página tipo índice editorial)
   -------------------------------------------------------------------- */
.colophon-list a {
    display: block;
    padding: 9px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    transition: padding-left 0.3s ease, color 0.3s ease;
}
.colophon-list a:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.colophon-list a:hover { padding-left: 8px; color: #f2b705; }

/* --------------------------------------------------------------------
   Variantes de revelado por coreografía (además de [data-reveal] base)
   -------------------------------------------------------------------- */
[data-reveal-mask] {
    overflow-x: visible;
    overflow-y: hidden;
}
[data-reveal-mask] > * {
    transform: translateY(110%);
    transition: transform 0.9s cubic-bezier(.16,1,.3,1);
}
[data-reveal-mask].is-visible > * {
    transform: translateY(0);
}

/* --------------------------------------------------------------------
   Accesibilidad: respetar "reducir movimiento"
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
    [data-reveal-mask] > * {
        transform: none !important;
    }
}

/* --------------------------------------------------------------------
   Nav rail: ajustar la barra de progreso de scroll para que empiece
   después del riel (ya no hay barra superior tradicional que la aloje).
   -------------------------------------------------------------------- */
@media (min-width: 768px) {
    .scroll-progress { left: 84px; }
}

/* --------------------------------------------------------------------
   CAREERS (careers.php + teaser en Home): banner con foto de fondo,
   pestañas (Open Positions / Open Applications / Internships), filtros
   de Ubicación/Equipo/Tipo de jornada, y listado de puestos con botón
   "APPLY" — referencia visual: larian.com/careers.
   -------------------------------------------------------------------- */

/* Banner grande de careers.php (mismo tratamiento que .hero-plate/.photo-bg,
   pero a pantalla completa como el hero de Home). */
.careers-hero {
    position: relative;
    overflow: hidden;
    min-height: 52vh;
    display: flex;
    align-items: flex-end;
}

/* Pestañas */
.careers-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.careers-tab {
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(245,241,232,0.55);
    padding: 14px 4px;
    margin-right: 28px;
    border-bottom: 2px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
}
.careers-tab:hover { color: #f5f1e8; }
.careers-tab.is-active {
    color: #f2b705;
    border-bottom-color: #f2b705;
}
.careers-tab .count {
    color: rgba(245,241,232,0.4);
    font-weight: 400;
    margin-left: 4px;
}

/* Filtros */
.careers-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.careers-filter {
    position: relative;
    min-width: 180px;
    flex: 1 1 180px;
}
.careers-filter select {
    width: 100%;
    appearance: none;
    background: #17140f;
    border: 1px solid rgba(255,255,255,0.14);
    color: #f5f1e8;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    padding: 11px 34px 11px 14px;
    cursor: pointer;
    transition: border-color 0.25s ease;
}
.careers-filter select:focus {
    outline: none;
    border-color: #f2b705;
}
.careers-filter::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid rgba(245,241,232,0.5);
    border-bottom: 1.5px solid rgba(245,241,232,0.5);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

/* Listado de puestos */
.careers-list { border-top: 1px solid rgba(255,255,255,0.1); }
.careers-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 20px;
    align-items: center;
    padding: 22px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transition: background-color 0.25s ease;
}
.careers-row:hover { background: rgba(255,255,255,0.03); }
.careers-row__title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    color: #f5f1e8;
}
.careers-row__location {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(245,241,232,0.5);
    margin-top: 2px;
}
.careers-row__team,
.careers-row__type {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(245,241,232,0.65);
    white-space: nowrap;
}
.careers-empty {
    border: 1px solid rgba(255,255,255,0.1);
    padding: 48px 24px;
    text-align: center;
    color: rgba(245,241,232,0.55);
}

@media (max-width: 767px) {
    .careers-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .careers-row__apply { justify-self: start; }
}

/* Modal de postulación (misma anatomía que .video-modal-*) */
.apply-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(.16,1,.3,1);
    overflow-y: auto;
}
.apply-modal-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}
.apply-modal-panel {
    width: 100%;
    max-width: 560px;
    background: #17140f;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 0 60px rgba(0,0,0,0.6);
    padding: 40px 32px;
    position: relative;
    transform: scale(0.94) translateY(12px);
    transition: transform 0.4s cubic-bezier(.16,1,.3,1);
    margin: auto;
}
.apply-modal-backdrop.is-open .apply-modal-panel {
    transform: scale(1) translateY(0);
}