/* ==============================================
   PORTAFOLIO SEPU — style.css
   F1 (oct 2026): sistema visual base. F2: hero y servicios. F3: carrusel y lightbox.
   - Tokens en :root (color, tipografía, espaciado, movimiento).
   - 2 familias autoalojadas: Bricolage Grotesque (titulares y texto,
     eje de tamaño óptico automático) y Silkscreen (solo etiquetas pixel).
   - Fondo: cuadrícula 16:9 hecha solo con gradientes CSS.
   Convención: BEM (.bloque__elemento--modificador).
   ============================================== */


/* ==============================================
   0. FUENTES (licencia OFL 1.1, ver assets/fonts/)
   ============================================== */
@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('../assets/fonts/bricolage-grotesque-latin-var.woff2') format('woff2-variations'),
         url('../assets/fonts/bricolage-grotesque-latin-var.woff2') format('woff2');
    font-weight: 200 800;
    font-stretch: 75% 100%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Silkscreen';
    src: url('../assets/fonts/silkscreen-latin-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ==============================================
   1. TOKENS
   ============================================== */
:root {
    color-scheme: dark;

    /* Color — amarillo como acento (≤10 % de la superficie) */
    --color-bg: #000000;
    --color-surface: #111111;
    --color-surface-raised: #1a1a1a;
    --color-text: #f5f5f5;
    --color-text-muted: #a3a3a3;          /* 8,4:1 sobre negro */
    --color-accent: #ffd700;
    --color-accent-soft: rgba(255, 215, 0, 0.15);
    --color-on-accent: #000000;
    --color-line: rgba(255, 255, 255, 0.08);
    --color-line-strong: rgba(255, 255, 255, 0.16);
    --color-grid: rgba(255, 215, 0, 0.07); /* líneas de la cuadrícula */
    --color-focus: var(--color-accent);

    /* Tipografía — máx. 2 familias */
    --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-body: var(--font-display);
    --font-pixel: 'Silkscreen', ui-monospace, monospace; /* solo etiquetas pequeñas */

    --fs-label: 0.75rem;                                   /* 12 px */
    --fs-small: 0.9375rem;                                 /* 15 px */
    --fs-body: 1.0625rem;                                  /* 17 px */
    --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); /* 18 → 21 px */
    --fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);       /* 22 → 28 px */
    --fs-h2: clamp(2rem, 1.55rem + 2vw, 3.25rem);            /* 32 → 52 px */
    --fs-h1: clamp(2.5rem, 1.75rem + 3.4vw, 4.5rem);         /* 40 → 72 px */

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-heavy: 800;

    --lh-tight: 1.05;
    --lh-snug: 1.2;
    --lh-body: 1.6;
    --ls-tight: -0.02em;
    --ls-pixel: 0.06em;
    --measure: 65ch;

    /* Espaciado — escala base 4 px */
    --space-1: 0.25rem;   /*  4 */
    --space-2: 0.5rem;    /*  8 */
    --space-3: 0.75rem;   /* 12 */
    --space-4: 1rem;      /* 16 */
    --space-5: 1.5rem;    /* 24 */
    --space-6: 2rem;      /* 32 */
    --space-7: 3rem;      /* 48 */
    --space-8: 4rem;      /* 64 */
    --space-9: 6rem;      /* 96 */
    --gutter: clamp(1rem, 4vw, 2rem);
    --section-pad-y: clamp(3.5rem, 8vw, 6rem);
    --container-max: 1200px;
    --header-h: 4rem;

    /* Bordes */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* Movimiento */
    --dur-fast: 150ms;
    --dur-base: 250ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    /* Cuadrícula de fondo: celdas 16:9, como un cuadro de video */
    --grid-cell-w: 80px;
    --grid-cell-h: 45px;

    /* Resplandor: solo en botones, suave */
    --glow-text: none;
    --glow-box: 0 0 16px rgba(255, 215, 0, 0.18);
    --glow-box-hover: 0 0 22px rgba(255, 215, 0, 0.3);
}


/* ==============================================
   2. RESET Y BASE
   ============================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background-color: var(--color-bg);
    scroll-padding-top: calc(var(--header-h) + var(--space-4));
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    isolation: isolate; /* la cuadrícula (z-index -1) queda sobre el fondo y bajo el contenido */
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    background-color: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Cuadrícula arcade: solo gradientes, sin imágenes. Fija y desvanecida hacia los bordes. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--color-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--color-grid) 1px, transparent 1px);
    background-size: var(--grid-cell-w) var(--grid-cell-h);
    background-position: center top;
    -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, #000 25%, transparent 100%);
    mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, #000 25%, transparent 100%);
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    text-wrap: balance;
}

img,
video {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

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

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}

ul,
ol {
    list-style: none;
}

button {
    font: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

/* Enlace para saltar el menú con teclado */
.skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--gutter);
    z-index: 1100;
    padding: var(--space-2) var(--space-4);
    font-weight: var(--fw-semibold);
    color: var(--color-on-accent);
    background-color: var(--color-accent);
    border-radius: var(--radius-sm);
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}


/* ==============================================
   3. HEADER
   Bloque: .header
   Elementos: __container, __brand, __where, __nav, __list,
              __item, __link, __cta, __toggle, __toggle-bar
   Estado: aria-current="true" marca la sección visible.
   ============================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-h);
    background-color: rgba(0, 0, 0, 0.72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: background-color var(--dur-base) ease, border-color var(--dur-base) ease;
}

.header--scrolled,
.header--menu-open {
    background-color: rgba(0, 0, 0, 0.92);
    border-bottom-color: var(--color-line);
}

.header__container {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    height: 100%;
    max-width: calc(var(--container-max) + 2 * var(--gutter)); /* alinea con el contenido */
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.header__brand {
    flex-shrink: 0;
    padding: var(--space-2) 0;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: var(--fw-heavy);
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--color-accent);
}

/* Etiqueta pixel con la sección actual (solo móvil; es decorativa, aria-hidden) */
.header__where {
    display: none;
    padding-left: var(--space-3);
    border-left: 1px solid var(--color-line-strong);
    font-family: var(--font-pixel);
    font-size: var(--fs-label);
    line-height: 1;
    letter-spacing: var(--ls-pixel);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.header__where:empty {
    display: none !important;
}

.header__nav {
    margin-left: auto;
}

.header__list {
    display: flex;
    gap: var(--space-1);
}

.header__link {
    position: relative;
    display: block;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    transition: color var(--dur-fast) ease;
}

.header__link::after {
    content: '';
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: 0;
    height: 2px;
    background-color: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-base) var(--ease-out);
}

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

.header__link[aria-current="true"] {
    color: var(--color-text);
}

.header__link[aria-current="true"]::after {
    transform: scaleX(1);
}

.header__cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0 var(--space-4);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    line-height: 1;
    color: var(--color-on-accent);
    background-color: var(--color-accent);
    border-radius: var(--radius-sm);
    transition: box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.header__cta:hover {
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.2);
}

/* Ya estás en Contacto: el botón pasa a contorno */
.header__cta[aria-current="true"] {
    color: var(--color-accent);
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

.header__toggle {
    display: none;
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin-right: -10px; /* alinea las barras con el margen lateral */
    border-radius: var(--radius-sm);
}

.header__toggle-bar {
    position: absolute;
    left: 11px;
    right: 11px;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background-color: var(--color-text);
    border-radius: 1px;
    transition: transform var(--dur-base) var(--ease-out);
}

.header__toggle-bar:nth-child(1) {
    transform: translateY(-4px);
}

.header__toggle-bar:nth-child(2) {
    transform: translateY(4px);
}

.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(1) {
    transform: rotate(45deg);
}

.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(2) {
    transform: rotate(-45deg);
}

/* Header en móvil: menú desplegable bajo la barra */
@media (max-width: 767.98px) {
    .header__container {
        gap: var(--space-3);
    }

    .header__where {
        display: inline-block;
    }

    .header__cta {
        margin-left: auto;
        padding: 0 var(--space-3);
    }

    .header__toggle {
        display: inline-block;
    }

    .header__nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin: 0;
        padding: var(--space-2) var(--gutter) var(--space-6);
        background-color: var(--color-bg);
        border-bottom: 1px solid var(--color-line);
        /* oscurece la página bajo el panel, sin tapar la barra */
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6);
        clip-path: inset(0 0 -100vmax 0);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
    }

    .header__nav.is-open {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition-delay: 0s;
    }

    .header__list {
        flex-direction: column;
        gap: 0;
    }

    .header__link {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-4) 0;
        font-family: var(--font-display);
        font-size: 1.5rem;
        font-weight: var(--fw-semibold);
        color: var(--color-text);
        border-bottom: 1px solid var(--color-line);
        border-radius: 0;
    }

    /* cuadrado tipo pixel junto a la sección actual */
    .header__link::after {
        position: static;
        width: 8px;
        height: 8px;
        transform: none;
        opacity: 0;
        transition: opacity var(--dur-fast) ease;
    }

    .header__link[aria-current="true"]::after {
        transform: none;
        opacity: 1;
    }
}

/* Pantallas angostas (≤374 px): se aprietan los espacios para que quepa la etiqueta */
@media (max-width: 374.98px) {
    .header__container {
        gap: var(--space-2);
    }

    .header__where {
        padding-left: var(--space-2);
    }
}

/* Menos de 330 px: la etiqueta ya no cabe junto al botón */
@media (max-width: 329.98px) {
    .header__where {
        display: none;
    }
}


/* ==============================================
   4. HERO (F2)
   Bloque: .hero
   Texto a la izquierda y collage a la derecha (≥960 px);
   en pantallas menores el collage pasa bajo el texto.
   La miniatura principal lleva un recuadro de selección con
   tiradores, como en un editor (único guiño "arcade" del hero).
   ============================================== */
.hero {
    padding: calc(var(--header-h) + clamp(2.5rem, 7vw, 5rem)) var(--gutter) clamp(3rem, 7vw, 5rem);
}

.hero__container {
    display: grid;
    gap: clamp(3rem, 7vw, 4rem);
    align-items: center;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
}

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.hero__title {
    font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem);   /* 40 → 64 px */
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

/* Palabra resaltada: fondo amarillo y texto negro (contraste ≈15:1) */
.hero__highlight {
    padding: 0 0.14em;
    color: var(--color-on-accent);
    background-color: var(--color-accent);
    border-radius: 4px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.hero__lead {
    max-width: 36ch;
    margin-top: var(--space-5);
    font-size: var(--fs-lead);
    line-height: 1.5;
    color: var(--color-text-muted);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0 var(--space-5);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: 1;
    border-radius: var(--radius-sm);
    transition: box-shadow var(--dur-fast) ease, color var(--dur-fast) ease;
}

.hero__btn--primary {
    color: var(--color-on-accent);
    background-color: var(--color-accent);
}

.hero__btn--primary:hover {
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.2);
}

.hero__btn--secondary {
    color: var(--color-text);
    box-shadow: inset 0 0 0 1px var(--color-line-strong);
}

.hero__btn--secondary:hover {
    color: var(--color-accent);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

.hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin-top: var(--space-6);
    font-size: var(--fs-small);
    color: var(--color-text-muted);
}

.hero__fact {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Viñeta: cuadro de 6 px, como un pixel */
.hero__fact::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    background-color: var(--color-accent);
}

/* Collage: 3 miniaturas apiladas. La principal va primero en el HTML */
.hero__collage {
    position: relative;
    width: 100%;
    max-width: 34rem;
    aspect-ratio: 5 / 4;
    margin: 0 auto;
}

.hero__frame {
    position: absolute;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.9);
}

.hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.hero__frame--main {
    z-index: 3;
    top: 30%;
    left: 6%;
    width: 76%;
    border-radius: 6px;
}

.hero__frame--back-a {
    z-index: 1;
    top: 0;
    left: 0;
    width: 52%;
    transform: rotate(-4deg);
}

.hero__frame--back-b {
    z-index: 2;
    right: 0;
    bottom: 0;
    width: 56%;
    transform: rotate(3deg);
}

.hero__frame--back-a .hero__img,
.hero__frame--back-b .hero__img {
    filter: brightness(0.7);
}

/* Recuadro de selección y tiradores */
.hero__frame--main::before {
    content: '';
    position: absolute;
    inset: -6px;
    border: 1.5px solid var(--color-accent);
    border-radius: 2px;
    pointer-events: none;
}

.hero__handle {
    position: absolute;
    width: 9px;
    height: 9px;
    background-color: var(--color-bg);
    border: 1.5px solid var(--color-accent);
}

.hero__handle--tl { top: -10px; left: -10px; }
.hero__handle--tr { top: -10px; right: -10px; }
.hero__handle--bl { bottom: -10px; left: -10px; }
.hero__handle--br { bottom: -10px; right: -10px; }

/* Medida de la miniatura, como la etiqueta de un programa de diseño */
.hero__size {
    position: absolute;
    left: 50%;
    bottom: -2.25rem;
    padding: 4px 6px;
    font-family: var(--font-pixel);
    font-size: var(--fs-label);
    line-height: 1;
    letter-spacing: var(--ls-pixel);
    white-space: nowrap;
    color: var(--color-on-accent);
    background-color: var(--color-accent);
    border-radius: 2px;
    transform: translateX(-50%);
}

@media (min-width: 960px) {
    .hero {
        display: flex;
        align-items: center;
        min-height: 100vh;
        min-height: min(100svh, 56rem);
    }

    .hero__container {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }

    .hero__collage {
        max-width: none;
    }
}


/* ==============================================
   5. SERVICIOS (F2)
   Bloque: .services — bento: 1 columna; desde 960 px, 12 columnas
   (01 ocupa 7 y 02 ocupa 5).
   Demos decorativos: .editor-demo (mini editor) y .thumb-demo
   (la misma miniatura a 100 %, 50 % y 25 %).
   ============================================== */
.services {
    padding: var(--section-pad-y) var(--gutter);
}

.services__container {
    max-width: var(--container-max);
    margin: 0 auto;
}

.services__header {
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.services__title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--color-accent);
}

.services__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

.services__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2rem);
    background-color: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
}

.services__num {
    margin-bottom: var(--space-3);
    font-family: var(--font-pixel);
    font-size: var(--fs-small);
    line-height: 1;
    letter-spacing: var(--ls-pixel);
    color: var(--color-accent);
}

.services__card-title {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    color: var(--color-text);
}

.services__card-text {
    max-width: 44ch;
    margin-top: var(--space-2);
    color: var(--color-text-muted);
}

.services__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
    margin-bottom: var(--space-6);
}

.services__tag {
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    line-height: 1.5;
    color: var(--color-text-muted);
    border: 1px solid var(--color-line-strong);
    border-radius: 999px;
}

.services__demo {
    width: 100%;
    margin-top: auto; /* el demo queda abajo aunque el texto sea más corto */
}

@media (min-width: 960px) {
    .services__grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: var(--space-5);
    }

    .services__card--video {
        grid-column: span 7;
    }

    .services__card--thumbs {
        grid-column: span 5;
    }
}

/* --- Demo 01: mini editor (visor + línea de tiempo) --- */
.editor-demo {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    background-color: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
}

.editor-demo__viewer {
    width: min(78%, 28rem);
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 4px;
    background-color: var(--color-surface);
}

.editor-demo__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.editor-demo__timeline {
    --label-w: 1.75rem;
    position: relative;
    display: grid;
    gap: 6px;
    overflow: hidden; /* recorta el cabezal al llegar al final */
}

.editor-demo__ruler {
    display: flex;
    justify-content: space-between;
    height: 1rem;
    margin-left: var(--label-w);
    font-family: var(--font-pixel);
    font-size: 0.625rem;
    line-height: 1;
    color: var(--color-text-muted);
    background-image: repeating-linear-gradient(to right, var(--color-line-strong) 0 1px, transparent 1px 5%);
    background-size: 100% 4px;
    background-position: left bottom;
    background-repeat: no-repeat;
}

.editor-demo__track {
    display: grid;
    grid-template-columns: var(--label-w) minmax(0, 1fr);
    align-items: center;
}

.editor-demo__label {
    font-family: var(--font-pixel);
    font-size: 0.625rem;
    line-height: 1;
    color: var(--color-text-muted);
}

.editor-demo__lane {
    position: relative;
    height: 1.375rem;
    background-color: var(--color-surface);
    border-radius: 3px;
}

.editor-demo__clip {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: calc(var(--x) + 1px);
    width: calc(var(--w) - 2px);
    background-color: #333333;
    border-radius: 2px;
}

.editor-demo__clip:nth-child(even) {
    background-color: #404040;
}

.editor-demo__clip--text,
.editor-demo__clip--text:nth-child(even) {
    background-color: var(--color-accent-soft);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

.editor-demo__wave {
    display: block;
    width: 100%;
    height: 100%;
    fill: var(--color-text-muted);
    opacity: 0.6;
}

/* Cabezal: la capa ocupa el ancho de las pistas y se desplaza entera
   (solo transform, sin recalcular el diseño) */
.editor-demo__scrub {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--label-w);
    right: 0;
    pointer-events: none;
    animation: editor-demo-play 9s linear infinite paused;
}

.editor-demo.is-playing .editor-demo__scrub {
    animation-play-state: running;
}

.editor-demo__playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    width: 2px;
    background-color: var(--color-accent);
}

.editor-demo__playhead::before {
    content: '';
    position: absolute;
    top: 0;
    left: -4px;
    width: 10px;
    height: 9px;
    background-color: var(--color-accent);
    clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
}

@keyframes editor-demo-play {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

/* --- Demo 02: la misma miniatura a 100 %, 50 % y 25 % --- */
.thumb-demo {
    display: grid;
    gap: var(--space-4);
}

.thumb-demo__main,
.thumb-demo__size {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.thumb-demo__frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.thumb-demo__img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 4px;
}

.thumb-demo__frame .thumb-demo__img {
    border-radius: 0;
}

/* Grilla de tercios: tenue siempre, nítida al pasar el mouse */
.thumb-demo__grid-line {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.7);
    opacity: 0.45;
    transition: opacity var(--dur-base) ease;
}

.thumb-demo__grid-line--v1,
.thumb-demo__grid-line--v2 {
    top: 0;
    bottom: 0;
    width: 1px;
}

.thumb-demo__grid-line--h1,
.thumb-demo__grid-line--h2 {
    left: 0;
    right: 0;
    height: 1px;
}

.thumb-demo__grid-line--v1 { left: 33.333%; }
.thumb-demo__grid-line--v2 { left: 66.666%; }
.thumb-demo__grid-line--h1 { top: 33.333%; }
.thumb-demo__grid-line--h2 { top: 66.666%; }

@media (hover: hover) {
    .services__card--thumbs:hover .thumb-demo__grid-line {
        opacity: 1;
    }
}

.thumb-demo__sizes {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
}

.thumb-demo__size--50 { width: calc(50% - var(--space-2)); }
.thumb-demo__size--25 { width: calc(25% - var(--space-2)); }

.thumb-demo__label {
    font-family: var(--font-pixel);
    font-size: 0.625rem;
    line-height: 1;
    letter-spacing: var(--ls-pixel);
    color: var(--color-text-muted);
}

/* Tarjeta a ancho completo (600–959 px): las copias chicas pasan a la derecha.
   Se mantiene la proporción 100 : 50 : 25 (60 % · 30 % · 15 % del ancho). */
@media (min-width: 600px) and (max-width: 959.98px) {
    .thumb-demo {
        display: flex;
        align-items: flex-end;
        gap: var(--space-4);
    }

    .thumb-demo__main {
        width: 60%;
    }

    .thumb-demo__sizes {
        flex-direction: column;
        align-items: flex-start;
        width: 30%;
    }

    .thumb-demo__size--50 { width: 100%; }
    .thumb-demo__size--25 { width: 50%; }
}


/* ==============================================
   6. MINIATURAS (F3)
   Sección que usa el componente .carousel (6b) y el .lightbox (6c).
   Alto medido antes de F3 y mantenido: 359 px (360), 593 px (768), 650 px (1280).
   ============================================== */
.thumbnails {
    padding: var(--section-pad-y) var(--gutter);
}

.thumbnails__header {
    max-width: var(--container-max);
    margin: 0 auto 2rem;
}

.thumbnails__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    font-weight: var(--fw-bold);
    color: var(--color-accent);
}

/* Botón que envuelve cada miniatura y abre el lightbox */
.thumbnails__open {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    cursor: zoom-in;
}

.thumbnails__open:focus-visible {
    outline-offset: 4px;
}

.thumbnails__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ícono "ampliar": solo en la activa, más visible al pasar el cursor o con foco */
.thumbnails__zoom {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-3);
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    background-color: rgba(0, 0, 0, 0.7);
    color: var(--color-text);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out), color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.carousel__slide.is-active .thumbnails__zoom {
    opacity: 0.85;
}

.thumbnails__open:hover .thumbnails__zoom,
.thumbnails__open:focus-visible .thumbnails__zoom {
    opacity: 1;
    color: var(--color-accent);
    border-color: rgba(255, 215, 0, 0.5);
}


/* ==============================================
   6b. COMPONENTE CARRUSEL (F3, reutilizable en F4)
   Bloque BEM: .carousel · __track (contenedor con scroll) · __slide ·
               __btn (--prev / --next). JS: js/carousel.js.
   Variables (se pueden cambiar por modificador, p. ej. 9:16 en F4):
     --carousel-slide-w  ancho de cada diapositiva (cqi = ancho del carrusel)
     --carousel-gap      separación
     --carousel-pad-y    aire arriba y abajo (foco, sombra)
   ============================================== */
.carousel {
    --carousel-gap: var(--space-3);
    /* Escritorio: la mitad del ancho que dejaban las flechas laterales (igual que antes de F3) */
    --carousel-slide-w: calc((100cqi - 8rem) / 2);
    /* Alto idéntico al de antes de F3 en todos los anchos (ver nota en sección 6) */
    --carousel-pad-y: min(2rem, 5.625cqi - 0.25rem);

    container-type: inline-size;
    position: relative;
    max-width: var(--container-max);
    margin: 0 auto;
}

.carousel__track {
    display: flex;
    gap: var(--carousel-gap);
    padding-block: var(--carousel-pad-y);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Bordes que se desvanecen: la vecina "asoma" */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.carousel__track::-webkit-scrollbar {
    display: none;
}

/* Espaciadores: permiten centrar la primera y la última diapositiva */
.carousel__track::before,
.carousel__track::after {
    content: '';
    flex: 0 0 calc((100cqi - var(--carousel-slide-w)) / 2 - var(--carousel-gap));
}

.carousel__slide {
    flex: 0 0 var(--carousel-slide-w);
    scroll-snap-align: center;
    transition: filter 0.5s var(--ease-out), opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

/* Con JS: las vecinas se atenúan (sin JS todas se ven normales) */
.carousel.is-ready .carousel__slide:not(.is-active) {
    filter: brightness(0.4);
    opacity: 0.5;
    transform: scale(0.92);
}

.carousel__btn {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--color-accent);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.72);
    transform: translateY(-50%);
    transition: background-color var(--dur-base) ease, box-shadow var(--dur-base) ease, opacity var(--dur-base) ease;
}

.carousel__btn--prev { left: 0; }
.carousel__btn--next { right: 0; }

.carousel__btn:hover,
.carousel__btn:focus-visible {
    background-color: rgba(30, 26, 0, 0.9);
    box-shadow: var(--glow-box);
}

.carousel__btn[aria-disabled="true"] {
    opacity: 0.35;
    box-shadow: none;
    cursor: default;
}

/* Sin JS las flechas no sirven: se ocultan */
.carousel:not(.is-ready) .carousel__btn {
    display: none;
}

/* Modo start (F4, videos): varias visibles, alineadas a la izquierda, sin atenuar.
   Las flechas quedan en el margen lateral (padding de 4rem). */
.carousel[data-carousel-align="start"] .carousel__track {
    padding-inline: 4rem;
    scroll-padding-inline: 4rem;
    /* La que asoma por los lados se desvanece bajo las flechas */
    -webkit-mask-image: linear-gradient(90deg, transparent 1rem, #000 4rem, #000 calc(100% - 4rem), transparent calc(100% - 1rem));
    mask-image: linear-gradient(90deg, transparent 1rem, #000 4rem, #000 calc(100% - 4rem), transparent calc(100% - 1rem));
}

.carousel[data-carousel-align="start"] .carousel__track::before,
.carousel[data-carousel-align="start"] .carousel__track::after {
    display: none;
}

.carousel[data-carousel-align="start"] .carousel__slide {
    scroll-snap-align: start;
}

.carousel[data-carousel-align="start"].is-ready .carousel__slide:not(.is-active) {
    filter: none;
    opacity: 1;
    transform: none;
}

/* Si todo cabe, las flechas sobran */
.carousel.is-static .carousel__btn {
    display: none;
}

/* Móvil y tablet: una diapositiva por vista; la siguiente asoma (≥ 80 % del ancho) */
@media (max-width: 768px) {
    .carousel {
        --carousel-slide-w: max(80cqi, 100cqi - 8rem);
    }
}

/* Modo start en pantallas chicas: sin margen lateral; las flechas se ocultan porque
   taparían los controles del video (se desliza con el dedo y Tab recorre todas) */
@media (max-width: 768px) {
    .carousel[data-carousel-align="start"] .carousel__track {
        padding-inline: 0;
        scroll-padding-inline: 0;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .carousel[data-carousel-align="start"] .carousel__btn {
        display: none;
    }
}

/* Navegadores sin unidades de contenedor (cqi): versión simple */
@supports not (width: 1cqi) {
    .carousel {
        --carousel-slide-w: 80%;
        --carousel-pad-y: 1rem;
    }

    .carousel__track::before,
    .carousel__track::after {
        flex-basis: 10%;
    }
}


/* ==============================================
   6c. LIGHTBOX (F3) — <dialog> nativo, js/lightbox.js
   Bloque BEM: .lightbox · __figure · __img · __count · __btn (--prev / --next) · __close
   ============================================== */
.lightbox {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--color-text);
    background-color: rgba(0, 0, 0, 0.97);
    touch-action: pan-y pinch-zoom; /* el deslizamiento horizontal lo maneja lightbox.js */
}

.lightbox[open] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    place-items: center;
}

.lightbox::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
}

.lightbox__figure {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: calc(var(--space-8) + var(--space-2)) var(--space-9) var(--space-2);
    container-type: size; /* la imagen calza en este recuadro sin deformarse */
}

.lightbox__img {
    width: 100%;
    width: min(100cqw, 100cqh * 16 / 9); /* "contain" exacto, sin saltos al cambiar de versión */
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    cursor: default;
}

.lightbox__count {
    padding: var(--space-3) 0 var(--space-5);
    font-family: var(--font-pixel);
    font-size: 0.875rem;
    letter-spacing: var(--ls-pixel);
    color: var(--color-text-muted);
}

.lightbox__close,
.lightbox__btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--color-accent);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.72);
    transition: background-color var(--dur-base) ease, box-shadow var(--dur-base) ease, opacity var(--dur-base) ease;
}

.lightbox__close {
    top: var(--space-4);
    right: var(--space-4);
    color: var(--color-text);
    border-color: var(--color-line-strong);
}

.lightbox__btn {
    top: 50%;
    transform: translateY(-50%);
}

.lightbox__btn--prev { left: var(--space-5); }
.lightbox__btn--next { right: var(--space-5); }

.lightbox__close:hover,
.lightbox__close:focus-visible,
.lightbox__btn:hover,
.lightbox__btn:focus-visible {
    background-color: rgba(30, 26, 0, 0.9);
    box-shadow: var(--glow-box);
}

.lightbox__btn[aria-disabled="true"] {
    opacity: 0.35;
    box-shadow: none;
    cursor: default;
}

/* Móvil: imagen a todo el ancho y flechas abajo, junto al contador */
@media (max-width: 768px) {
    .lightbox__figure {
        padding: calc(var(--space-8) + var(--space-2)) var(--space-4) var(--space-2);
    }

    .lightbox__count {
        padding-bottom: calc(var(--space-6) + 48px);
    }

    .lightbox__btn {
        top: auto;
        bottom: var(--space-5);
        transform: none;
    }

    .lightbox__btn--prev { left: calc(50% - 48px - var(--space-8)); }
    .lightbox__btn--next { right: calc(50% - 48px - var(--space-8)); }
}

/* Página quieta mientras el lightbox está abierto */
html.is-scroll-locked {
    overflow: hidden;
    padding-right: var(--scrollbar-w, 0px);
}


/* ==============================================
   7. VIDEOS (F4) — listas de YouTube en el carrusel de F3
   Bloque BEM: .video-feed (--vertical / --horizontal) · __header · __title ·
               __carousel · __fallback (respaldo del HTML; visible solo sin JS)
               .video-card (--vertical / --horizontal) · __media · __img · __play ·
               __icon · __frame · __external · __caption · __title · __channel
   JS: js/youtube-feed.js. Carrusel en modo data-carousel-align="start" (6b).
   Visibles: vertical 3 / horizontal 2 desde 769 px; menos en pantallas chicas.
   ============================================== */
.video-feed {
    padding: var(--section-pad-y) var(--gutter);
}

.video-feed__header {
    max-width: var(--container-max);
    margin: 0 auto 2rem;
}

.video-feed__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    font-weight: var(--fw-bold);
    color: var(--color-accent);
}

/* Vertical: tarjetas de máx. 300 px, el carrusel se centra */
.video-feed--vertical .video-feed__carousel {
    --carousel-slide-w: calc((100cqi - 8rem - 2 * var(--carousel-gap)) / 3);
    max-width: calc(3 * 300px + 2 * var(--space-3) + 8rem);
}

.video-feed--horizontal .video-feed__carousel {
    --carousel-slide-w: calc((100cqi - 8rem - var(--carousel-gap)) / 2);
}

/* Respaldo sin JS: lista simple de links */
.video-feed__fallback {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: 1.25rem;
    list-style: square;
    color: var(--color-text-muted);
}

.video-feed__fallback a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Tarjeta de video ---------- */
.video-card__media {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
}

.video-card--vertical .video-card__media { aspect-ratio: 9 / 16; }
.video-card--horizontal .video-card__media { aspect-ratio: 16 / 9; }

.video-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.85);
    opacity: 0;
    transition: opacity var(--dur-base) ease, filter var(--dur-base) ease, transform 0.5s var(--ease-out);
}

.video-card__media.has-thumb .video-card__img { opacity: 1; }

/* Sin miniatura en YouTube: fondo neutro con una cuadrícula sutil (no el placeholder) */
.video-card__media.is-no-thumb {
    background-image:
        linear-gradient(var(--color-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Botón de reproducir: cubre toda la miniatura */
.video-card__play {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 100%;
    border-radius: inherit;
    cursor: pointer;
}

.video-card__play:focus-visible {
    outline-offset: -4px;
}

.video-card__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    padding-left: 3px;
    color: var(--color-text);
    border: 2px solid rgba(255, 215, 0, 0.5);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    transition: background-color var(--dur-base) ease, color var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
}

.video-card__play:hover .video-card__icon,
.video-card__play:focus-visible .video-card__icon {
    color: var(--color-on-accent);
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    transform: scale(1.08);
}

.video-card__media:hover .video-card__img,
.video-card__play:focus-visible ~ .video-card__img {
    filter: brightness(1);
}

.video-card__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background-color: #000;
}

/* No se puede reproducir aquí: miniatura + "Ver en YouTube" */
.video-card__media.is-unavailable .video-card__img {
    filter: brightness(0.45) grayscale(0.4);
}

.video-card__external {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    white-space: nowrap;
    font-size: var(--fs-small);
    font-weight: var(--fw-bold, 700);
    color: var(--color-text);
    border: 1px solid rgba(255, 215, 0, 0.45);
    border-radius: var(--radius-sm);
    background-color: rgba(0, 0, 0, 0.78);
    transform: translate(-50%, -50%);
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.video-card__external::after {
    content: '↗';
    color: var(--color-accent);
}

.video-card__external:hover,
.video-card__external:focus-visible {
    color: var(--color-on-accent);
    background-color: var(--color-accent);
}

.video-card__external:hover::after,
.video-card__external:focus-visible::after {
    color: inherit;
}

.video-card__caption {
    padding: var(--space-3) var(--space-1) 0;
}

.video-card__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: var(--fs-small);
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text);
}

.video-card__channel {
    margin-top: var(--space-1);
    font-size: var(--fs-label);
    color: var(--color-text-muted);
}

/* Cargando: rectángulo que respira (sin imagen) */
.video-card.is-skeleton {
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    animation: video-card-pulse 1.4s ease-in-out infinite;
}

.video-card--vertical.is-skeleton { aspect-ratio: 9 / 16; }
.video-card--horizontal.is-skeleton { aspect-ratio: 16 / 9; }

@keyframes video-card-pulse {
    50% { background-color: var(--color-surface-raised); }
}

/* Pantallas chicas: menos visibles y la siguiente asoma */
@media (max-width: 768px) {
    .video-feed--vertical .video-feed__carousel {
        --carousel-slide-w: 40cqi;   /* ~2,4 visibles */
        max-width: none;
    }

    .video-feed--horizontal .video-feed__carousel {
        --carousel-slide-w: 80cqi;   /* 1 + la siguiente asoma */
    }
}

@media (max-width: 560px) {
    .video-feed--vertical .video-feed__carousel {
        --carousel-slide-w: 62cqi;   /* ~1,6 visibles */
    }

    .video-feed--horizontal .video-feed__carousel {
        --carousel-slide-w: 86cqi;
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-card.is-skeleton { animation: none; }
    .video-card__img,
    .video-card__icon { transition: none; }
}


/* ==============================================
   8. CLIENTES (F5)
   Bloque: .clients
   Elementos: __header, __title, __toggle, __list, __chip, __logo,
              __marquee, __row (--left / --right), __track
   Datos: la <ul class="clients__list"> del HTML (una línea por cliente).
   Sin JS o con movimiento reducido: chips quietos en varias filas.
   Con JS: main.js arma dos filas en sentido contrario (aria-hidden) y la
   lista original queda solo para lectores de pantalla (.clients--animated).
   ============================================== */
.clients {
    padding: var(--section-pad-y) 0;
}

.clients__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    max-width: var(--container-max);
    margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
    padding: 0 var(--gutter);
}

.clients__title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--color-accent);
}

/* Pausar / Reanudar (WCAG 2.2.2). Solo existe mientras hay movimiento. */
.clients__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    padding: 0 var(--space-4);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px var(--color-line-strong);
    cursor: pointer;
    transition: color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.clients__toggle:hover {
    color: var(--color-accent);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

.clients__toggle[hidden] {
    display: none;
}

.clients__toggle svg {
    flex-shrink: 0;
}

/* Lista estática (sin JS o movimiento reducido) */
.clients__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.clients__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
    min-height: 3rem;
    padding: var(--space-2) var(--space-5);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    white-space: nowrap;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
}

/* Viñeta pixel (se oculta si el cliente tiene logo o foto) */
.clients__chip::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    background-color: var(--color-accent);
}

.clients__chip--has-logo::before {
    display: none;
}

.clients__logo {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    object-fit: cover;
    border-radius: 50%;
}

/* Con movimiento: la lista pasa a ser solo para lectores de pantalla */
.clients--animated .clients__list {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.clients__marquee {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    /* bordes que se desvanecen */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.clients__row {
    overflow: hidden;
}

/* La pista lleva el grupo dos veces; al llegar a -50 % vuelve sin salto.
   --clients-duration lo calcula main.js según el ancho (velocidad pareja). */
.clients__track {
    display: flex;
    gap: var(--space-3);
    width: max-content;
    animation: clients-left var(--clients-duration, 40s) linear infinite;
}

.clients__row--right .clients__track {
    animation-name: clients-right;
}

.clients__group {
    display: flex;
    gap: var(--space-3);
}

@keyframes clients-left {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - var(--space-3) / 2)); }
}

@keyframes clients-right {
    from { transform: translateX(calc(-50% - var(--space-3) / 2)); }
    to   { transform: translateX(0); }
}

/* Pausa: botón, mouse encima o sección fuera de pantalla */
.clients.is-paused .clients__track,
.clients.is-offscreen .clients__track {
    animation-play-state: paused;
}

@media (hover: hover) {
    .clients__marquee:hover .clients__track {
        animation-play-state: paused;
    }
}

@media (max-width: 767.98px) {
    .clients__chip {
        min-height: 2.75rem;
        padding: var(--space-2) var(--space-4);
    }
}

/* Movimiento reducido: sin filas animadas; se ve la lista quieta */
@media (prefers-reduced-motion: reduce) {
    .clients__marquee,
    .clients__toggle {
        display: none !important;
    }

    .clients--animated .clients__list {
        position: static;
        width: auto;
        height: auto;
        margin: 0 auto;
        padding: 0 var(--gutter);
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
}


/* ==============================================
   9. CONTACTO (F5)
   Bloque: .contact
   Elementos: __container, __header, __title, __response, __grid,
              __steps, __step, __step-num, __step-title, __step-text,
              __card, __profile, __avatar, __name, __role,
              __channels, __channel (--primary), __channel-icon,
              __channel-label, __channel-value
   ============================================== */
.contact {
    padding: var(--section-pad-y) var(--gutter);
}

.contact__container {
    max-width: var(--container-max);
    margin: 0 auto;
}

.contact__header {
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.contact__title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--color-accent);
}

.contact__response {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-size: var(--fs-lead);
    color: var(--color-text-muted);
}

.contact__response::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    background-color: var(--color-accent);
}

.contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

/* Proceso en 3 pasos */
.contact__steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
}

.contact__step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-4);
    align-items: baseline;
    padding: clamp(1rem, 2.5vw, 1.5rem);
    background-color: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
}

.contact__step-num {
    grid-row: span 2;
    min-width: 1.75rem;
    font-family: var(--font-pixel);
    font-size: var(--fs-small);
    line-height: 1;
    letter-spacing: var(--ls-pixel);
    color: var(--color-accent);
}

.contact__step-title {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    color: var(--color-text);
}

.contact__step-text {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
}

/* Tarjeta con perfil y canales */
.contact__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2rem);
    background-color: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
}

.contact__profile {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* Avatar provisional: círculo neutro con silueta */
.contact__avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 4.5rem;
    height: 4.5rem;
    overflow: hidden;
    color: var(--color-text-muted);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-line-strong);
    border-radius: 50%;
}

.contact__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact__name {
    font-size: var(--fs-h3);
    font-weight: var(--fw-heavy);
    line-height: 1.1;
    color: var(--color-text);
}

.contact__role {
    margin-top: var(--space-1);
    font-size: var(--fs-small);
    color: var(--color-text-muted);
}

.contact__channels {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.contact__channel {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 3.5rem;
    padding: var(--space-3) var(--space-4);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px var(--color-line-strong);
    transition: box-shadow var(--dur-fast) ease, color var(--dur-fast) ease;
}

.contact__channel:hover {
    color: var(--color-accent);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

.contact__channel--primary {
    color: var(--color-on-accent);
    background-color: var(--color-accent);
    box-shadow: none;
}

.contact__channel--primary:hover {
    color: var(--color-on-accent);
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.2);
}

.contact__channel-icon {
    flex-shrink: 0;
    display: block;
}

.contact__channel-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.contact__channel-label {
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    line-height: 1.2;
}

.contact__channel-value {
    font-size: var(--fs-small);
    line-height: 1.3;
    overflow-wrap: anywhere;
    opacity: 0.85;
}

@media (min-width: 960px) {
    .contact__grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--space-5);
        align-items: start;
    }
}


/* ==============================================
   9b. BARRA DE CONTACTO FIJA (F5, solo < 768 px)
   Bloque: .contact-bar — __btn (--primary)
   main.js la oculta (.is-hidden) con el hero, Contacto o el footer en
   pantalla, o con el menú abierto. Sin JS se ve siempre, y el footer
   reserva su alto al final (no tapa nada).
   ============================================== */
.contact-bar {
    display: none;
}

@media (max-width: 767.98px) {
    :root {
        --contact-bar-h: 4.5rem;
    }

    html {
        scroll-padding-bottom: calc(var(--contact-bar-h) + var(--space-3));
    }

    .contact-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900; /* bajo el header (1000) y el lightbox */
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
        padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
        background-color: rgba(0, 0, 0, 0.88);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--color-line-strong);
        transition: transform var(--dur-base) var(--ease-out), visibility 0s linear 0s;
    }

    .contact-bar.is-hidden {
        transform: translateY(110%);
        visibility: hidden;
        transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
    }

    .contact-bar__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-height: 3rem;
        font-size: var(--fs-body);
        font-weight: var(--fw-semibold);
        line-height: 1;
        color: var(--color-text);
        border-radius: var(--radius-sm);
        box-shadow: inset 0 0 0 1px var(--color-line-strong);
    }

    .contact-bar__btn--primary {
        color: var(--color-on-accent);
        background-color: var(--color-accent);
        box-shadow: none;
    }
    /* (el espacio que reserva el footer está en la sección 12) */
}


/* ==============================================
   10. FOOTER
   Bloque: .footer
   Elementos: __container, __about, __brand, __tagline, __col,
              __heading (pixel), __list, __link, __bottom,
              __copyright, __top
   ============================================== */
.footer {
    padding: var(--space-8) var(--gutter) var(--space-6);
    border-top: 1px solid var(--color-line);
    background-color: rgba(0, 0, 0, 0.6);
}

.footer__container {
    display: grid;
    grid-template-columns: 2fr 1fr 1.3fr;
    gap: var(--space-7);
    max-width: var(--container-max);
    margin: 0 auto;
}

.footer__brand {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: var(--fw-heavy);
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--color-accent);
}

.footer__tagline {
    max-width: 32ch;
    margin-top: var(--space-3);
    color: var(--color-text-muted);
}

.footer__heading {
    margin-bottom: var(--space-3);
    font-family: var(--font-pixel);
    font-size: var(--fs-label);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: var(--ls-pixel);
    color: var(--color-text-muted);
}

.footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.footer__link {
    display: inline-block;
    padding: var(--space-1) 0;
    font-size: var(--fs-small);
    color: var(--color-text);
    overflow-wrap: anywhere;
    transition: color var(--dur-fast) ease;
}

.footer__link:hover {
    color: var(--color-accent);
}

.footer__link-detail {
    color: var(--color-text-muted);
}

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    max-width: var(--container-max);
    margin: var(--space-8) auto 0;
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-line);
}

.footer__copyright,
.footer__top {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.footer__top {
    padding: var(--space-1) 0;
    transition: color var(--dur-fast) ease;
}

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

@media (max-width: 959.98px) {
    .footer__container {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6) var(--space-5);
    }

    .footer__about {
        grid-column: 1 / -1;
    }
}

@media (max-width: 559.98px) {
    .footer__container {
        grid-template-columns: 1fr;
    }
}


/* ==============================================
   11. UTILIDADES JS (Scroll Reveal)
   ============================================== */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ==============================================
   12. RESPONSIVE BREAKPOINTS (secciones)
   ============================================== */

/* F5: el footer reserva el alto de la barra de contacto fija (9b), así
   "Volver arriba" nunca queda debajo de ella, aunque falle el JS.
   Va aquí, después de la sección 10, para que gane a .footer { padding }. */
@media (max-width: 767.98px) {
    .footer {
        padding-bottom: calc(var(--space-6) + var(--contact-bar-h) + env(safe-area-inset-bottom, 0px));
    }
}


/* ==============================================
   13. MOVIMIENTO REDUCIDO
   ============================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }

    .fade-in {
        opacity: 1;
        transform: none;
    }

    /* F2: el cabezal del mini editor queda quieto */
    .editor-demo__scrub {
        animation: none !important;
        transform: translateX(38%);
    }

    /* el menú aparece sin transición (así el foco puede entrar de inmediato) */
    .header__nav {
        transition: none !important;
    }
}