/* ================================================================
   SYTEZ — styles.css
   ----------------------------------------------------------------
   Arquitectura siguiendo Sytez Standards
   (ver .claude/skills/sytez-standards/SKILL.md)

   Orden:
     1. Reset
     2. Variables (design tokens)
     3. Base
     4. Layout
     5. Componentes
     6. Utilities

   Mobile first: los estilos base son para pantallas pequeñas y se
   escala con min-width (480px, 768px, 1024px).
   ================================================================ */


/* ================================================================
   1. RESET MODERNO
   ================================================================ */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

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

ul,
ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    text-wrap: balance;
}

p {
    overflow-wrap: break-word;
    text-wrap: pretty;
}


/* ================================================================
   2. VARIABLES — Design Tokens
   Cambiar el tema entero debe requerir modificar solo este bloque.
   ================================================================ */

:root {
    /* ── Colores ──────────────────────────────────── */
    --color-primary:        #CE84B4;  /* rosa Sytez: CTAs y acentos */
    --color-primary-deep:   #A8638F;  /* hover y acentos de texto sobre claro */
    --color-primary-soft:   #F5E2EE;
    --color-primary-tint:   #F9EBF3;  /* fondo de tarjeta en hover */

    --color-bg:             #F6F2EE;  /* crema: fondo principal */
    --color-bg-alt:         #FFFFFF;  /* superficies blancas */
    --color-bg-dark:        #1A1A1A;  /* contacto y footer */
    --color-bg-darkest:     #0A0A0A;  /* banda del marquee */

    --color-text:           #0A0A0A;
    --color-text-soft:      #1A1A1A;
    --color-text-muted:     #6B6B6B;
    --color-text-inverse:   #F6F2EE;
    --color-text-inverse-muted: rgba(255, 255, 255, 0.6);

    --color-border:         rgba(10, 10, 10, 0.1);
    --color-border-inverse: rgba(255, 255, 255, 0.12);
    --color-border-inverse-strong: rgba(255, 255, 255, 0.4);  /* etiquetas sobre fotos */

    /* Texto secundario sobre el velo oscuro del portafolio: blanco cálido
       opaco (una opacidad baja se pierde sobre imágenes claras) */
    --color-text-inverse-soft: #E2DED9;

    /* Superficies translúcidas: header y píldoras sobre el hero */
    --color-surface-glass:        rgba(255, 255, 255, 0.72);
    --color-surface-glass-strong: rgba(255, 255, 255, 0.92);
    /* Superficies sobre fondo oscuro (campos, íconos sociales) */
    --color-surface-inverse:       rgba(255, 255, 255, 0.05);
    --color-surface-inverse-hover: rgba(255, 255, 255, 0.08);

    --color-status-live:    #16A34A;  /* punto de "disponibles" */

    /* Verde de WhatsApp — color funcional de la plataforma, no de marca */
    --color-whatsapp:       #25D366;
    --color-whatsapp-hover: #20BD5A;
    --color-whatsapp-icon:  #FFFFFF;

    /* ── Tipografía ───────────────────────────────── */
    --font-body:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-accent: 'Instrument Serif', Georgia, serif;

    --text-3xs:  0.6875rem;  /* 11px — badges */
    --text-2xs:  0.75rem;    /* 12px — etiquetas en mayúsculas */
    --text-xs:   0.8125rem;  /* 13px */
    --text-sm:   0.875rem;   /* 14px — botones, nav */
    --text-base: 1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.75rem;    /* 28px — títulos de tarjeta */
    --text-2xl:  2rem;       /* 32px */

    /* Escala fluida para titulares y cifras */
    --text-display-sm: clamp(1.4rem, 2.4vw, 2rem);
    --text-display-md: clamp(2rem, 4.5vw, 3.4rem);
    --text-display-lg: clamp(2.2rem, 5.5vw, 4.4rem);
    --text-hero:       clamp(1.8rem, 3.6vw, 4rem);

    --tracking-tightest: -0.04em;
    --tracking-tighter:  -0.035em;
    --tracking-tight:    -0.02em;
    --tracking-wide:     0.05em;
    --tracking-wider:    0.1em;
    --tracking-widest:   0.15em;

    /* ── Espaciado ────────────────────────────────── */
    --space-xs:  0.25rem;  /*   4px */
    --space-sm:  0.5rem;   /*   8px */
    --space-md:  1rem;     /*  16px */
    --space-lg:  1.5rem;   /*  24px */
    --space-xl:  2rem;     /*  32px */
    --space-2xl: 3rem;     /*  48px */
    --space-3xl: 4rem;     /*  64px */
    --space-4xl: 5rem;     /*  80px */
    --space-5xl: 7.5rem;   /* 120px */

    /* Margen lateral del contenedor (sube en desktop, ver LAYOUT) */
    --gutter: var(--space-lg);

    /* ── Radios ───────────────────────────────────── */
    --radius-md:   14px;   /* campos de formulario */
    --radius-lg:   16px;   /* imágenes dentro de tarjetas */
    --radius-xl:   20px;   /* imágenes del hero */
    --radius-2xl:  24px;   /* tarjetas */
    --radius-full: 9999px;

    /* ── Sombras ──────────────────────────────────── */
    --shadow-sm:  0 2px 20px rgba(0, 0, 0, 0.07);
    --shadow-lg:  0 20px 44px rgba(10, 10, 10, 0.16);
    --shadow-bar: 0 -8px 24px rgba(0, 0, 0, 0.1);
    --shadow-primary-sm: 0 10px 24px color-mix(in srgb, var(--color-primary) 40%, transparent);
    --shadow-primary-lg: 0 28px 60px color-mix(in srgb, var(--color-primary) 20%, transparent),
                         0 8px 20px rgba(0, 0, 0, 0.06);

    /* ── Tamaños de componentes repetidos ─────────── */
    --size-arrow: 2rem;     /* círculo de flecha en botones */
    --size-flag-width:  1.3125rem;  /* 21px — banderas del selector de idioma */
    --size-flag-height: 0.875rem;   /* 14px */
    --radius-flag: 3px;
    --size-client-tile-width:  11.25rem;  /* 180px — tarjeta de logo en Clientes */
    --size-client-tile-height: 5.75rem;   /*  92px */

    /* ── Transiciones ─────────────────────────────── */
    --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
    --transition-fast: 150ms ease-out;
    --transition-base: 300ms var(--ease-out-expo);
    --transition-slow: 500ms var(--ease-out-expo);
    --duration-entrance: 800ms;  /* entrada protagonista (titular del hero) */

    /* ── Layout ───────────────────────────────────── */
    --container-md: 768px;
    --container-xl: 1280px;

    /* Alto del header fijo: el hero y las anclas lo compensan */
    --header-height: 80px;

    /* Barra fija de contacto (solo mobile, ver SKILL.md sección 1) */
    --mobile-cta-bar-height: 76px;

    /* Textura de ruido del hero */
    --noise: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

@media (min-width: 768px) {
    :root {
        --gutter: var(--space-xl);
        --size-client-tile-width:  15rem;   /* 240px */
        --size-client-tile-height: 7.5rem;  /* 120px */
    }
}

/* ── Prefers reduced motion — accesibilidad ─────────
   iteration-count: 1 evita que las animaciones infinitas (marquee,
   sticker) giren a toda velocidad con la duración reducida. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ================================================================
   3. BASE — Estilos globales del documento
   ================================================================ */

/* ── Fuentes auto-alojadas ──────────────────────────
   En assets/fonts/ en vez de Google Fonts: evita conectarse a dos
   servidores externos antes del primer pintado (Lighthouse). Solo el
   subconjunto latin, que cubre el español. Inter es variable: un
   archivo para todos los pesos. La crítica se precarga en el <head>. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('assets/fonts/inter-latin-variable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    overflow-x: hidden;
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* Reserva espacio para que .mobile-cta-bar no tape el final */
@media (max-width: 767px) {
    body {
        padding-bottom: calc(var(--mobile-cta-bar-height) + env(safe-area-inset-bottom));
    }
}

/* Las anclas del nav no quedan tapadas por el header fijo */
[id] {
    scroll-margin-top: var(--header-height);
}

/* Focus visible — accesibilidad para navegación con teclado */
:focus-visible {
    outline: 2px solid var(--color-primary-deep);
    outline-offset: 3px;
}

/* ── Superficies del navegador (SKILL.md sección 6) ── */
::selection {
    color: var(--color-text);
    background-color: var(--color-primary);
}

input,
textarea {
    caret-color: var(--color-primary);
}

::placeholder {
    opacity: 1; /* Firefox le baja la opacidad por defecto */
}

input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
    accent-color: var(--color-primary);
}

a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
}

html {
    scrollbar-color: var(--color-primary) var(--color-bg);
}


/* ================================================================
   4. LAYOUT — Contenedores y secciones
   ================================================================ */

.container {
    width: 100%;
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section {
    position: relative;
    padding-block: var(--space-4xl);
}

@media (min-width: 768px) {
    .section {
        padding-block: var(--space-5xl);
    }
}


/* ================================================================
   5. COMPONENTES
   ================================================================ */

/* ──────────────────────────────────────────────────
   BUTTON — Variantes compartidas
   ────────────────────────────────────────────────── */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-sm) var(--space-md) var(--space-lg);
    font-size: var(--text-sm);
    font-weight: 500;
    border-radius: var(--radius-full);
    transition: background-color var(--transition-base), color var(--transition-base),
                transform var(--transition-fast);
}

.button:active {
    transform: scale(0.97);
}

.button__arrow {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--size-arrow);
    height: var(--size-arrow);
    border-radius: 50%;
    transition: transform var(--transition-base), background-color var(--transition-base),
                color var(--transition-base);
}

/* Rosa — CTA principal */
.button--primary {
    color: var(--color-text);
    background-color: var(--color-primary);
}

.button--primary .button__arrow {
    color: var(--color-primary);
    background-color: var(--color-text);
}

.button--primary:hover {
    color: var(--color-text-inverse);
    background-color: var(--color-primary-deep);
}

.button--primary:hover .button__arrow {
    color: var(--color-primary-deep);
    background-color: var(--color-text-inverse);
    transform: rotate(-45deg);
}

/* Contorno */
.button--ghost {
    padding: var(--space-md) var(--space-lg);
    color: var(--color-text);
    background-color: transparent;
    border: 1.5px solid var(--color-text);
}

.button--ghost:hover {
    color: var(--color-text-inverse);
    background-color: var(--color-text);
}

/* Oscuro — CTA del header */
.button--dark {
    padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-lg);
    font-weight: 600;
    color: var(--color-text-inverse);
    background-color: var(--color-text);
}

.button--dark .button__arrow {
    color: var(--color-text);
    background-color: var(--color-primary);
}

.button--dark:hover {
    background-color: var(--color-primary-deep);
}

.button--dark:hover .button__arrow {
    transform: rotate(-45deg);
}



/* ──────────────────────────────────────────────────
   HEADER — Fijo, con vidrio (superficie que flota sobre el contenido)
   ────────────────────────────────────────────────── */
.site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    padding-block: var(--space-md);
    background-color: var(--color-surface-glass);
    border-bottom: 1px solid var(--color-border);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

.site-header.is-scrolled {
    background-color: var(--color-surface-glass-strong);
    box-shadow: var(--shadow-sm);
}

.site-header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-header__logo {
    display: flex;
    align-items: center;
}

.site-header__logo-img {
    width: auto;
    max-width: 220px;
    height: 40px;
}

/* En mobile el CTA vive en .mobile-cta-bar (SKILL.md sección 1) */
.site-header__cta {
    display: none;
}

@media (min-width: 768px) {
    .site-header__cta {
        display: inline-flex;
    }
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}


/* ──────────────────────────────────────────────────
   LANG SWITCH — Selector de idioma (ES / EN)
   Visible también en mobile: es lo único junto al logo.
   ────────────────────────────────────────────────── */
.lang-switch {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs);
    background-color: color-mix(in srgb, var(--color-bg-alt) 60%, transparent);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
}

.lang-switch__link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.lang-switch__link:hover {
    color: var(--color-text);
    background-color: var(--color-primary-tint);
}

.lang-switch__link:focus-visible {
    outline: 2px solid var(--color-primary-deep);
    outline-offset: 2px;
}

.lang-switch__link:active {
    transform: scale(0.96);
}

.lang-switch__link[aria-current="page"] {
    color: var(--color-text);
    background-color: var(--color-bg-alt);
    box-shadow: var(--shadow-sm);
}

.lang-switch__flag {
    flex: none;
    width: var(--size-flag-width);
    height: var(--size-flag-height);
    border-radius: var(--radius-flag);
    overflow: hidden;
    /* Filo sutil: separa la franja blanca de la bandera del fondo claro */
    box-shadow: 0 0 0 1px var(--color-border);
}


/* ──────────────────────────────────────────────────
   NAVIGATION — Solo desktop: una landing no lleva menú en mobile
   ────────────────────────────────────────────────── */
.site-nav {
    display: none;
}

@media (min-width: 768px) {
    .site-nav {
        display: block;
    }
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs);
    background-color: color-mix(in srgb, var(--color-bg-alt) 60%, transparent);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
}

.site-nav__link {
    display: block;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-soft);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.site-nav__link:hover {
    color: var(--color-text-inverse);
    background-color: var(--color-text);
}


/* ──────────────────────────────────────────────────
   HERO — Sección principal
   ────────────────────────────────────────────────── */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: calc(var(--header-height) + var(--space-2xl));
    padding-bottom: var(--space-2xl);
    overflow: hidden;
}

@media (min-width: 768px) {
    .hero {
        padding-bottom: 0;
    }
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--noise);
    opacity: 0.5;
    pointer-events: none;
}

.hero__container {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
}

/* Blobs decorativos: gradiente radial de fondo, no relleno de tarjeta */
.hero__blob {
    position: absolute;
    z-index: 0;
    width: 560px;
    height: 560px;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--color-primary) 55%, transparent) 0%,
        color-mix(in srgb, var(--color-primary) 5%, transparent) 60%,
        transparent 80%
    );
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none;
}

.hero__blob--top {
    top: -160px;
    right: -180px;
}

.hero__blob--bottom {
    bottom: -220px;
    left: -200px;
    width: 480px;
    height: 480px;
    opacity: 0.6;
}

.hero__layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    align-items: stretch;
}

@media (min-width: 1024px) {
    .hero__layout {
        grid-template-columns: 1.1fr 1fr;
        margin-top: var(--space-2xl);
    }
}

.hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero__tag-row {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.hero__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    background-color: color-mix(in srgb, var(--color-bg-alt) 70%, transparent);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
}

.hero__tag-dot {
    flex: none;
    width: 6px;
    height: 6px;
    background-color: var(--color-status-live);
    border-radius: 50%;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-status-live) 20%, transparent);
    animation: pulse 1.6s ease-in-out infinite;
}

.hero__title {
    position: relative;
    z-index: 2;
    margin-bottom: var(--space-lg);
    font-size: var(--text-hero);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--tracking-tightest);
}

.hero__subtitle {
    max-width: 560px;
    font-size: var(--text-lg);
    line-height: 1.55;
    color: var(--color-text-soft);
}

.hero__subtitle strong {
    font-weight: 600;
}

/* En mobile se ocultan: .mobile-cta-bar ya ofrece el CTA siempre a la vista */
.hero__actions {
    display: none;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

@media (min-width: 768px) {
    .hero__actions {
        display: flex;
    }
}

/* Imágenes flotantes */
.hero__visuals {
    position: relative;
    align-self: stretch;
    max-width: 540px;
    min-height: 360px;
}

@media (min-width: 1024px) {
    .hero__visuals {
        max-width: none;
        min-height: 420px;
    }
}

.hero__image {
    position: absolute;
    overflow: hidden;
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

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

.hero__image--main {
    top: 0;
    right: 0;
    z-index: 2;
    width: 82%;
    height: 72%;
    animation: float-a 7s ease-in-out infinite;
}

.hero__image--secondary {
    bottom: 0;
    left: 0;
    z-index: 3;
    width: 58%;
    height: 50%;
    border: 5px solid var(--color-bg);
    animation: float-b 8s ease-in-out infinite;
}

/* Sticker giratorio */
.hero__sticker {
    position: absolute;
    right: -10px;
    bottom: 32%;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 80px;
    height: 80px;
    font-family: var(--font-accent);
    font-size: var(--text-2xs);
    font-style: italic;
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-text);
    text-align: center;
    background-color: var(--color-primary);
    border-radius: 50%;
    box-shadow: var(--shadow-primary-sm);
    animation: spin 18s linear infinite;
}

@media (min-width: 480px) {
    .hero__sticker {
        width: 90px;
        height: 90px;
        font-size: var(--text-xs);
    }
}

.hero__sticker::after {
    content: '';
    position: absolute;
    inset: var(--space-sm);
    border: 1px dashed var(--color-text);
    border-radius: 50%;
    opacity: 0.4;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.4); }
}

@keyframes float-a {
    0%, 100% { transform: translateY(0) rotate(2deg); }
    50%      { transform: translateY(-14px) rotate(2deg); }
}

@keyframes float-b {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(12px) rotate(-3deg); }
}

@keyframes spin {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}


/* ──────────────────────────────────────────────────
   METRICS — Franja de cifras al pie del hero
   ────────────────────────────────────────────────── */
.metrics {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: var(--space-2xl);
    padding-block: var(--space-lg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

@media (min-width: 768px) {
    .metrics {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) {
    .metrics {
        margin-top: 0;
    }
}

.metrics__item {
    padding: var(--space-lg);
}

.metrics__item:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.metrics__item:nth-child(-n+2) {
    border-bottom: 1px solid var(--color-border);
}

@media (min-width: 768px) {
    .metrics__item {
        padding: 0 var(--space-xl);
        border-right: 1px solid var(--color-border);
    }

    .metrics__item:nth-child(-n+2) {
        border-bottom: none;
    }

    .metrics__item:last-child {
        border-right: none;
    }
}

.metrics__number {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    font-size: var(--text-display-md);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--tracking-tighter);
}

.metrics__suffix {
    font-family: var(--font-accent);
    font-size: 0.7em;
    font-style: italic;
    font-weight: 400;
    color: var(--color-primary);
}

.metrics__label {
    margin-top: var(--space-sm);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
    text-transform: uppercase;
}


/* ──────────────────────────────────────────────────
   MARQUEE — Banda de servicios animada
   ────────────────────────────────────────────────── */
.marquee {
    margin-top: var(--space-3xl);
    padding-block: var(--space-lg);
    overflow: hidden;
    color: var(--color-text-inverse);
    background-color: var(--color-bg-darkest);
}

.marquee__track {
    display: flex;
    gap: var(--space-2xl);
    width: max-content;
    white-space: nowrap;
    animation: scroll 28s linear infinite;
}

.marquee__group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xl);
    font-size: var(--text-display-md);
    font-weight: 600;
    letter-spacing: var(--tracking-tighter);
}

.marquee__star {
    display: inline-block;
    color: var(--color-primary);
    animation: spin 4s linear infinite;
}

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


/* ──────────────────────────────────────────────────
   SECTION HEAD — Encabezado compartido de sección
   ────────────────────────────────────────────────── */
.section-head {
    max-width: 1000px;
    margin-bottom: var(--space-3xl);
}

.section-head__eyebrow {
    display: inline-block;
    margin-bottom: var(--space-lg);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    color: var(--color-text-soft);
    text-transform: uppercase;
}

.section-head__title {
    max-width: 900px;
    font-size: var(--text-display-lg);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: var(--tracking-tighter);
}

.section-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-xl);
    margin-top: var(--space-lg);
}

.section-head__lead {
    max-width: 480px;
    color: var(--color-text-soft);
}

/* Variante sobre fondo oscuro (Contacto) */
.section-head--inverse .section-head__eyebrow,
.section-head--inverse .section-head__title {
    color: var(--color-text-inverse);
}

.section-head--inverse .section-head__lead {
    color: var(--color-text-inverse-muted);
}


/* ──────────────────────────────────────────────────
   SERVICES — Tres tarjetas de servicio
   ────────────────────────────────────────────────── */
.services {
    background-color: var(--color-bg);
}

.services__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .services__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 480px;
    padding: var(--space-xl);
    overflow: hidden;
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    transition: transform var(--transition-slow), background-color var(--transition-slow),
                box-shadow var(--transition-slow), border-color var(--transition-slow);
}

.service-card:hover {
    background-color: var(--color-primary-tint);
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
    box-shadow: var(--shadow-primary-lg);
    transform: translateY(-10px);
}

.service-card__media {
    position: relative;
    width: 100%;
    margin-bottom: var(--space-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
}

.service-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.service-card:hover .service-card__img {
    transform: scale(1.06);
}

.service-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-primary) 50%, transparent) 0%,
        color-mix(in srgb, var(--color-primary) 10%, transparent) 100%
    );
    mix-blend-mode: multiply;
    transition: opacity var(--transition-slow);
}

.service-card:hover .service-card__overlay {
    opacity: 0.3;
}

.service-card__title {
    margin-bottom: var(--space-md);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
}

.service-card__text {
    flex: 1;
    font-size: var(--text-sm);
    line-height: 1.6;
}

.service-card__cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    color: var(--color-primary-deep);
    text-transform: uppercase;
}

.service-card__cta .button__arrow {
    width: 30px;
    height: 30px;
    color: var(--color-text);
    background-color: var(--color-primary);
}

.service-card:hover .service-card__cta .button__arrow {
    color: var(--color-text-inverse);
    background-color: var(--color-primary-deep);
    transform: rotate(-45deg);
}


/* ──────────────────────────────────────────────────
   PORTFOLIO — Slider de proyectos
   script.js mueve el track con --portfolio-offset y la barra con
   --portfolio-progress (custom properties, no estilos directos).
   ────────────────────────────────────────────────── */
.portfolio {
    background-color: var(--color-bg-alt);
}

.portfolio__viewport {
    position: relative;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow: hidden;
}

.portfolio__track {
    --portfolio-gap: var(--space-lg);
    display: flex;
    gap: var(--portfolio-gap);
    transform: translateX(var(--portfolio-offset, 0px));
    transition: transform var(--transition-slow);
}

.portfolio-card {
    position: relative;
    display: block;
    flex: 0 0 100%;
    overflow: hidden;
    color: inherit;
    background-color: var(--color-bg);
    border-radius: var(--radius-2xl);
    transition: transform var(--transition-slow);
}

@media (min-width: 768px) {
    .portfolio-card {
        flex-basis: calc((100% - var(--portfolio-gap)) / 2);
    }
}

@media (min-width: 1024px) {
    .portfolio-card {
        flex-basis: calc((100% - var(--portfolio-gap) * 2) / 3);
    }
}

.portfolio-card:hover {
    transform: translateY(-6px);
}

.portfolio-card:focus-visible {
    outline-offset: -3px;
}

.portfolio-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

.portfolio-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.portfolio-card:hover .portfolio-card__img {
    transform: scale(1.06);
}

/* El velo vive en el bloque de texto, no en la imagen: arranca siempre
   --space-2xl arriba de la etiqueta, sin importar cuánto alto ocupe el
   texto (en mobile ocupa más). Las imágenes del portafolio tienen fondo
   claro abajo, así que el velo llega casi sólido antes del texto. */
.portfolio-card__overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: calc(var(--space-xl) + var(--space-2xl)) var(--space-xl) var(--space-xl);
    color: var(--color-text-inverse);
    background: linear-gradient(180deg,
        transparent 0,
        color-mix(in srgb, var(--color-text) 48%, transparent) calc(var(--space-2xl) * 0.6),
        color-mix(in srgb, var(--color-text) 76%, transparent) var(--space-2xl),
        color-mix(in srgb, var(--color-text) 84%, transparent) 100%);
}

.portfolio-card__tag {
    display: inline-block;
    margin-bottom: var(--space-md);
    padding: 6px var(--space-md);
    font-size: var(--text-3xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    background-color: var(--color-surface-inverse-hover);
    border: 1px solid var(--color-border-inverse-strong);
    border-radius: var(--radius-full);
}

.portfolio-card__title {
    margin-bottom: var(--space-sm);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
}

.portfolio-card__text {
    max-width: 90%;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-text-inverse-soft);
}

.portfolio-card__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-3xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text);
    text-transform: uppercase;
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
}

.portfolio-card__visit {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--color-text);
    background-color: var(--color-primary);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.portfolio-card:hover .portfolio-card__visit,
.portfolio-card:focus-visible .portfolio-card__visit {
    opacity: 1;
    transform: scale(1);
}

.portfolio__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}

.portfolio__progress {
    flex: 1;
    max-width: 300px;
    height: 2px;
    background-color: var(--color-border);
}

.portfolio__progress-fill {
    height: 100%;
    background-color: var(--color-text);
    transform: scaleX(var(--portfolio-progress, 0.33));
    transform-origin: left;
    transition: transform var(--transition-slow);
}

.portfolio__buttons {
    display: flex;
    gap: var(--space-md);
}

.portfolio__button {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    color: var(--color-text);
    background-color: transparent;
    border: 1.5px solid var(--color-text);
    border-radius: 50%;
    transition: background-color var(--transition-base), color var(--transition-base),
                transform var(--transition-fast);
}

.portfolio__button svg {
    width: 18px;
    height: 18px;
}

.portfolio__button:hover:not(:disabled) {
    color: var(--color-primary);
    background-color: var(--color-text);
    transform: scale(1.05);
}

.portfolio__button:active:not(:disabled) {
    transform: scale(0.97);
}

.portfolio__button:disabled {
    cursor: not-allowed;
    opacity: 0.3;
}

.portfolio__foot {
    margin-top: var(--space-3xl);
    font-size: var(--text-display-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    text-align: center;
}

.portfolio__foot-link {
    padding-bottom: 2px;
    color: var(--color-primary-deep);
    border-bottom: 2px solid var(--color-primary);
    transition: opacity var(--transition-fast);
}

.portfolio__foot-link:hover {
    opacity: 0.7;
}


/* ──────────────────────────────────────────────────
   CLIENTS — Ticker infinito de logos
   ────────────────────────────────────────────────── */
.clients {
    padding-block: var(--space-4xl);
    background-color: var(--color-bg);
}

.clients__marquee {
    margin-top: var(--space-3xl);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.clients__track {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: max-content;
    /* Aire arriba y abajo para que la elevación del hover no se corte */
    padding-block: var(--space-sm);
    animation: scroll 40s linear infinite;
}

.clients__marquee:hover .clients__track {
    animation-play-state: paused;
}

/* Tarjeta blanca por logo: los logos van a color (cada marca con su
   paleta) y la tarjeta les da un fondo neutro parejo */
.clients__item {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: var(--size-client-tile-width);
    height: var(--size-client-tile-height);
    padding: var(--space-sm) var(--space-lg);
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.clients__item:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-4px);
}

/* Los archivos traen su propio margen (lienzo 400x160, ver
   tools/logos-clientes.py), así todos pesan igual dentro de la tarjeta */
.clients__logo {
    width: 100%;
    height: auto;
}


/* ──────────────────────────────────────────────────
   INSTAGRAM — Bento grid
   ────────────────────────────────────────────────── */
.instagram {
    background-color: var(--color-bg-alt);
}

.instagram__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 180px);
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .instagram__grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 200px);
    }
}

@media (min-width: 1024px) {
    .instagram__grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 240px);
    }
}

.instagram__tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-lg);
    transition: transform var(--transition-slow);
}

.instagram__tile--featured {
    grid-row: span 2;
    grid-column: span 2;
}

.instagram__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.instagram__tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, color-mix(in srgb, var(--color-text) 50%, transparent) 100%);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.instagram__tile:hover {
    transform: scale(0.985);
}

.instagram__tile:hover .instagram__img {
    transform: scale(1.08);
}

.instagram__tile:hover::after,
.instagram__tile:focus-visible::after {
    opacity: 1;
}

.instagram__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    color: var(--color-text);
    background-color: var(--color-surface-glass-strong);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.instagram__tile:hover .instagram__icon,
.instagram__tile:focus-visible .instagram__icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.instagram__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}

.instagram__cta-text {
    max-width: 520px;
    font-size: var(--text-lg);
    line-height: 1.55;
}

.instagram__cta-text strong {
    font-weight: 600;
}


/* ──────────────────────────────────────────────────
   CONTACT — Datos de contacto y formulario (Web3Forms)
   ────────────────────────────────────────────────── */
.contact {
    overflow: hidden;
    color: var(--color-text-inverse);
    background-color: var(--color-bg-dark);
}

.contact::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 40%, transparent) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
}

.contact :focus-visible {
    outline-color: var(--color-primary);
}

.contact__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

@media (min-width: 1024px) {
    .contact__grid {
        grid-template-columns: 1.2fr 1fr;
    }
}

.contact__info {
    display: flex;
    flex-direction: column;
}

.contact__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    align-items: center;
    padding-block: var(--space-lg);
    border-bottom: 1px solid var(--color-border-inverse);
}

.contact__row:first-child {
    border-top: 1px solid var(--color-border-inverse);
}

@media (min-width: 768px) {
    .contact__row {
        grid-template-columns: 130px 1fr;
        gap: var(--space-lg);
        padding-block: var(--space-xl);
    }
}

.contact__label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-2xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-inverse-muted);
    text-transform: uppercase;
}

.contact__icon {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--color-primary);
}

.contact__value {
    font-size: var(--text-display-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-inverse);
}

.contact__link {
    transition: color var(--transition-fast);
}

.contact__link:hover {
    color: var(--color-primary);
}

/* Formulario */
.contact-form {
    padding: var(--space-xl);
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border-inverse);
    border-radius: var(--radius-2xl);
}

@media (min-width: 480px) {
    .contact-form {
        padding: var(--space-2xl);
    }
}

.contact-form__title {
    margin-bottom: var(--space-sm);
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
}

.contact-form__subtitle {
    margin-bottom: var(--space-xl);
    font-size: var(--text-sm);
    color: var(--color-text-inverse-muted);
}

.contact-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .contact-form__row {
        grid-template-columns: 1fr 1fr;
    }
}

.contact-form__field {
    margin-bottom: var(--space-md);
}

.contact-form__input {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-base);
    color: var(--color-text-inverse);
    background-color: var(--color-surface-inverse);
    border: 1px solid var(--color-border-inverse);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.contact-form__input::placeholder {
    color: var(--color-text-inverse-muted);
}

.contact-form__input:focus {
    outline: none;
    background-color: var(--color-surface-inverse-hover);
    border-color: var(--color-primary);
}

.contact-form__input--select {
    padding-right: var(--space-2xl);
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 18px center;
    -webkit-appearance: none;
    appearance: none;
}

/* Opción vacía ("Servicio que buscas") con el color del placeholder */
.contact-form__input--select:invalid {
    color: var(--color-text-inverse-muted);
}

.contact-form__input--select option {
    color: var(--color-text-inverse);
    background-color: var(--color-bg-dark);
}

.contact-form__input--textarea {
    min-height: 130px;
    resize: vertical;
}

.contact-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    width: 100%;
    margin-top: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text);
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-base), transform var(--transition-fast);
}

.contact-form__submit .button__arrow {
    color: var(--color-primary);
    background-color: var(--color-text);
}

.contact-form__submit:hover {
    background-color: var(--color-text-inverse);
    transform: translateY(-2px);
}

.contact-form__submit:hover .button__arrow {
    transform: rotate(-45deg);
}

.contact-form__submit:active {
    transform: scale(0.98);
}

.contact-form__submit:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.contact-form__legal {
    margin-top: var(--space-md);
    font-size: var(--text-xs);
    color: var(--color-text-inverse-muted);
    text-align: center;
}

.contact-form__legal a {
    text-decoration: underline;
}

.contact-form__legal a:hover {
    color: var(--color-primary);
}


/* ──────────────────────────────────────────────────
   FOOTER
   ────────────────────────────────────────────────── */
.site-footer {
    position: relative;
    padding: var(--space-3xl) 0 var(--space-xl);
    overflow: hidden;
    color: var(--color-text-inverse);
    background-color: var(--color-bg-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer :focus-visible {
    outline-color: var(--color-primary);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
    .site-footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .site-footer__grid {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
    }
}

.site-footer__logo {
    display: inline-flex;
    margin-bottom: var(--space-md);
}

.site-footer__logo-img {
    width: auto;
    height: 56px;
}

.site-footer__tagline {
    max-width: 320px;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text-inverse-muted);
}

.site-footer__heading {
    margin-bottom: var(--space-lg);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    color: var(--color-text-inverse);
    text-transform: uppercase;
}

.site-footer__list li + li {
    margin-top: var(--space-md);
}

.site-footer__link {
    display: inline-block;
    font-size: var(--text-base);
    color: var(--color-text-inverse-muted);
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.site-footer__link:hover {
    color: var(--color-primary);
    transform: translateX(6px);
}

.site-footer__social {
    display: flex;
    gap: var(--space-sm);
}

.site-footer__social-link {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--color-text-inverse);
    background-color: var(--color-surface-inverse);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    transition: background-color var(--transition-base), color var(--transition-base),
                border-color var(--transition-base), transform var(--transition-base);
}

.site-footer__social-link svg {
    width: 18px;
    height: 18px;
}

.site-footer__social-link:hover {
    color: var(--color-text);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-3px);
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-top: var(--space-lg);
    font-size: var(--text-xs);
    color: var(--color-text-inverse-muted);
    border-top: 1px solid var(--color-border-inverse);
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.site-footer__bottom a {
    color: var(--color-primary);
    transition: opacity var(--transition-fast);
}

.site-footer__bottom a:hover {
    opacity: 0.75;
}


/* ──────────────────────────────────────────────────
   BARRA FIJA DE CONTACTO — solo mobile (<768px)
   Reemplaza al menú hamburguesa: en una landing el único camino en
   mobile es el CTA (SKILL.md sección 1). Estática, nunca se abre.
   ────────────────────────────────────────────────── */
.mobile-cta-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    height: calc(var(--mobile-cta-bar-height) + env(safe-area-inset-bottom));
    padding: var(--space-sm) var(--space-md);
    padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
    background-color: var(--color-bg-alt);
    box-shadow: var(--shadow-bar);
}

@media (min-width: 768px) {
    .mobile-cta-bar {
        display: none;
    }
}

.mobile-cta-bar__primary {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    height: 48px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.mobile-cta-bar__whatsapp {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--color-whatsapp-icon);
    background-color: var(--color-whatsapp);
    border-radius: var(--radius-full);
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.mobile-cta-bar__primary:active,
.mobile-cta-bar__whatsapp:active {
    transform: scale(0.97);
}

@media (hover: hover) {
    .mobile-cta-bar__primary:hover {
        background-color: var(--color-primary-deep);
    }

    .mobile-cta-bar__whatsapp:hover {
        background-color: var(--color-whatsapp-hover);
    }
}


/* ──────────────────────────────────────────────────
   PÁGINA DE ESTADO — 404 y /gracias/ comparten este patrón
   ────────────────────────────────────────────────── */
.status-page {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-xl) var(--gutter);
    overflow: hidden;
    text-align: center;
}

.status-page__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    max-width: 640px;
}

.status-page__logo-img {
    width: auto;
    height: 40px;
    margin-bottom: var(--space-xl);
}

.status-page__code {
    font-size: var(--text-display-lg);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--tracking-tighter);
    color: var(--color-primary-deep);
}

.status-page__title {
    font-size: var(--text-display-sm);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
}

.status-page__text {
    max-width: 480px;
    color: var(--color-text-soft);
}

.status-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
}


/* ──────────────────────────────────────────────────
   CONTENT — Páginas de texto (aviso de privacidad)
   ────────────────────────────────────────────────── */
.content--page-start {
    padding-top: calc(var(--header-height) + var(--space-3xl));
}


/* ================================================================
   6. UTILITIES
   ================================================================ */

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

/* Reveal al hacer scroll (script.js → initRevealOnScroll).
   Solo se esconde con la clase .js en <html>: si el JavaScript no
   carga, el contenido se ve normal, sin animación. */
.js .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--duration-entrance) var(--ease-out-expo),
                transform var(--duration-entrance) var(--ease-out-expo);
}

.js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Reveal por líneas: la entrada protagonista del titular del hero */
/* padding + margin negativo: deja espacio a los descendentes (g, p)
   sin que overflow: hidden los recorte, y sin cambiar el interlineado */
.reveal-line {
    display: block;
    margin-bottom: -0.1em;
    padding-bottom: 0.1em;
    overflow: hidden;
}

.reveal-line__inner {
    display: inline-block;
}

.js .reveal-line .reveal-line__inner {
    transform: translateY(105%);
    transition: transform var(--duration-entrance) var(--ease-out-expo);
}

.js .reveal-line.is-visible .reveal-line__inner {
    transform: translateY(0);
}

.js .reveal-line.is-visible .reveal-line__inner--delay-1 { transition-delay: 0.12s; }
.js .reveal-line.is-visible .reveal-line__inner--delay-2 { transition-delay: 0.24s; }

/* Contenido de formato largo (aviso de privacidad) */
.prose {
    max-width: var(--container-md);
    line-height: 1.7;
}

.prose > * + * {
    margin-top: var(--space-md);
}

.prose > h1 {
    font-size: var(--text-display-lg);
    line-height: 1.05;
    letter-spacing: var(--tracking-tighter);
}

.prose > h2 {
    margin-top: var(--space-2xl);
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-tight);
}

.prose a {
    color: var(--color-primary-deep);
    text-decoration: underline;
}

/* Honeypot anti-spam del formulario (ver lanzamiento/SKILL.md sección 8).
   Invisible también para lectores de pantalla: en el HTML lleva además
   aria-hidden y tabindex="-1". */
.botcheck {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}