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

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

   Esta plantilla NO tiene identidad visual definida.
   Personalizar los valores marcados con /* ← COMPLETAR */ */
/* ================================================================ */


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

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

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

body {
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

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
   ----------------------------------------------------------------
   Completar los valores comentados al iniciar un proyecto real.
   Cambiar el tema entero debe requerir modificar solo este bloque.
   ================================================================ */

:root {
    /* ── Colores ────────────────────────────────────
       Identidad real de The Social Box (marca ya establecida en
       thesocialbox.marketing — esta landing extiende el mismo sitio,
       no define una identidad nueva).
    */
    --color-primary:        #FF0000;  /* rojo de marca — CTAs, acentos */
    --color-primary-hover:  #C40000;  /* rojo oscuro — hover de CTAs */
    --color-secondary:      #D1D1D1;  /* gris claro — headings sobre fondo oscuro */
    --color-accent:         #FF0000;  /* acento = mismo rojo, sin segundo color que compita */

    --color-bg:             #040404;  /* negro — fondo principal */
    --color-bg-alt:         #0E0E0E;  /* negro-carbón — franjas/secciones alternas */
    --color-bg-elevated:    #121212;  /* superficie de tarjetas, negro apagado (no gris) */

    --color-text:           #D1D1D1;  /* texto principal sobre fondo oscuro */
    --color-text-muted:     #9A9A9A;  /* texto secundario, algo más apagado que D1D1D1 */
    --color-text-inverse:   #0E0E0E;  /* texto sobre fondos claros/rojo sólido */

    --color-border:         rgba(255, 255, 255, 0.12);
    --color-border-subtle:  rgba(255, 255, 255, 0.08);

    /* Blanco puro para texto sobre foto (hero con media de fondo) —
       necesita máximo contraste sin importar la paleta del tema. */
    --color-on-media:       #FFFFFF;

    /* Verde de WhatsApp — color funcional de la plataforma, no de marca.
       Se usa en .mobile-cta-bar (ver SKILL.md sección 1). */
    --color-whatsapp:       #25D366;
    --color-whatsapp-hover: #20bd5a;

    /* ── Tipografía ─────────────────────────────────
       Misma pareja tipográfica del sitio principal: Plus Jakarta Sans
       para todo el texto, Roboto Slab reservada para cifras destacadas
       (años de experiencia, número de clientes).
    */
    --font-display: "Plus Jakarta Sans", sans-serif;
    --font-body:    "Plus Jakarta Sans", sans-serif;
    --font-accent:  "Roboto Slab", serif;
    --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

    /* Escala tipográfica fluida con clamp() */
    --text-xs:   clamp(0.75rem,  0.7rem  + 0.15vw, 0.875rem);
    --text-sm:   clamp(0.875rem, 0.8rem  + 0.2vw,  1rem);
    --text-base: clamp(1rem,     0.9rem  + 0.3vw,  1.125rem);
    --text-lg:   clamp(1.25rem,  1rem    + 0.5vw,  1.5rem);
    --text-xl:   clamp(1.5rem,   1.2rem  + 0.8vw,  2rem);
    --text-2xl:  clamp(2rem,     1.5rem  + 1.5vw,  3rem);
    --text-hero: clamp(2.5rem,   2rem    + 2vw,    4.5rem);

    /* ── Espaciado ──────────────────────────────────
       Escala consistente. No inventar valores fuera de esta escala.
    */
    --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:  6rem;     /* 96px */

    /* ── Radios ─────────────────────────────────────
       ← Definir un estilo (redondeado o recto) y mantenerlo.
    */
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:    12px;
    --radius-xl:    16px;
    --radius-2xl:   24px;
    --radius-full:  9999px;

    /* ── Sombras ────────────────────────────────────
       ← COMPLETAR — sombras coherentes con la atmósfera del proyecto.
    */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.16);

    /* ── Transiciones ───────────────────────────────
       Duraciones según tipo de interacción (ver SKILL.md sección 5).
    */
    --transition-fast: 150ms ease-out;
    --transition-base: 250ms ease-out;
    --transition-slow: 400ms ease-out;

    /* ── Layout — Contenedores ──────────────────── */
    --container-sm:  640px;
    --container-md:  768px;
    --container-lg:  1024px;
    --container-xl:  1280px;
    --container-2xl: 1440px;

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


/* ── Dark mode ─────────────────────────────────────
   El tema de The Social Box ya es oscuro por defecto (no depende de
   prefers-color-scheme) — es la identidad de marca, no un modo alterno.
   No hay overrides que aplicar aquí.
*/


/* ── Prefers reduced motion — accesibilidad ─────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


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

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    transition: background-color var(--transition-base), color var(--transition-base);
}

/* Solo landing page (quitar si el proyecto es sitio completo, ver
   SKILL.md sección 1): reserva espacio para que .mobile-cta-bar no
   tape el final de la página. */
@media (max-width: 767px) {
    body {
        padding-bottom: calc(var(--mobile-cta-bar-height) + env(safe-area-inset-bottom));
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
}

h1 { font-size: var(--text-hero); line-height: 1.1; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  line-height: 1.3; }

p {
    color: var(--color-text);
}

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

/* Selección de texto */
::selection {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
}


/* ================================================================
   4. LAYOUT — Contenedores y grids de página
   ================================================================ */

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

@media (min-width: 768px) {
    .container {
        padding-inline: var(--space-xl);
    }
}


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

/* ──────────────────────────────────────────────────
   HEADER
   Fondo sólido siempre — ya no hay foto de fondo detrás (el hero ahora
   es contenido + video, no una imagen a pantalla completa), así que no
   necesita el truco de transparencia/scroll ni depende de qué tan clara
   sea una imagen para mantener contraste.
   ────────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border-subtle);
}

.site-header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    max-width: var(--container-xl);
    margin-inline: auto;
    padding: var(--space-sm) var(--space-md);
}

@media (min-width: 768px) {
    .site-header__container {
        padding: var(--space-md) var(--space-xl);
    }
}

.site-header__logo {
    display: flex;
    transition: opacity var(--transition-fast);
}

.site-header__logo:hover {
    opacity: 0.7;
}

.site-header__logo img {
    width: 135px;
    height: auto;
}

@media (min-width: 1024px) {
    .site-header__logo img {
        width: 165px;
    }
}

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

.site-header__phone {
    display: none;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-secondary);
    white-space: nowrap;
    padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-sm);
    border-radius: var(--radius-full);
    border: 1px solid rgba(196, 0, 0, 0.55);
    box-shadow: 0 0 12px 0px rgba(196, 0, 0, 0.18);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.site-header__phone:hover {
    border-color: rgba(196, 0, 0, 0.85);
    box-shadow: 0 0 16px 1px rgba(196, 0, 0, 0.3);
}

.site-header__phone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
    color: var(--color-on-media);
    flex-shrink: 0;
}

.site-header__phone-icon svg {
    width: 18px;
    height: 18px;
}

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


/* ──────────────────────────────────────────────────
   NAVIGATION
   ────────────────────────────────────────────────── */
.site-nav {
    display: none;
}

/* Solo aplica en sitios completos (multi-página): el toggle del header
   agrega esta clase para abrir el panel mobile. En landing pages no se
   usa — el nav permanece oculto siempre en mobile (ver SKILL.md sección 1). */
.site-nav--open {
    display: block;
}

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

    .site-nav__list {
        display: flex;
        gap: var(--space-2xl);
    }
}

.site-nav__link {
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--color-secondary);
    transition: color var(--transition-fast);
}

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


/* ──────────────────────────────────────────────────
   HERO — contenido a la izquierda, video vertical del CEO a la
   derecha. En mobile el video va primero (arriba), el contenido
   debajo; en desktop (1024px+) se invierte a dos columnas lado a lado.
   ────────────────────────────────────────────────── */
.hero {
    background-color: var(--color-bg);
    padding-top: var(--space-md);
    padding-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
    .hero {
        padding-bottom: var(--space-3xl);
    }
}

/* El padding-top chico se queda hasta 1024px (todo el rango donde
   aplica la foto de fondo de abajo) — recién en desktop, sin foto,
   vuelve a necesitar el respiro completo de arriba. */
@media (min-width: 1024px) {
    .hero {
        padding-top: var(--space-3xl);
    }
}

.hero__container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    align-items: center;
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

/* PRUEBA: foto de fondo detrás del bloque de texto, solo por debajo de
   1024px (donde el layout sigue siendo una sola columna y el video
   queda muy abajo, dejando el primer tramo vacío). Se apaga por
   completo en desktop, donde ya existe el video al lado. Overlay
   oscuro obligatorio, mismo criterio que cualquier hero con foto de
   fondo (ver SKILL.md sección 1): sin él el contraste del texto
   depende de qué tan clara salga la foto ese día. */
@media (max-width: 1023px) {
    .hero__content {
        margin-inline: calc(var(--space-md) * -1);
        padding: var(--space-sm) var(--space-lg) var(--space-xl);
        border-radius: var(--radius-2xl);
        background-image: linear-gradient(180deg, rgba(4, 4, 4, 0.55) 0%, rgba(4, 4, 4, 0.85) 65%, rgba(4, 4, 4, 0.96) 100%),
            url("assets/images/hero/equipo-the-social-box-agencia-de-marketing-monclova.webp");
        background-size: cover;
        background-position: center 30%;
    }

    .hero__title {
        color: var(--color-on-media);
    }
}

@media (min-width: 768px) {
    .hero__container {
        padding-inline: var(--space-xl);
    }

    .hero__content {
        margin-inline: calc(var(--space-xl) * -1);
    }
}

@media (min-width: 1024px) {
    .hero__container {
        grid-template-columns: 1fr 0.8fr;
        gap: var(--space-3xl);
    }

    .hero__content {
        order: 0;
    }

    .hero__image {
        order: 1;
    }
}

.hero__title {
    margin-bottom: var(--space-lg);
    font-size: clamp(3rem, 2.2rem + 3.5vw, 6rem);
    font-weight: 800;
}

.hero__title-accent {
    color: var(--color-primary);
}

.hero__subtitle {
    max-width: 55ch;
    margin-bottom: var(--space-xl);
    font-size: var(--text-base);
    color: var(--color-secondary);
}

.hero__actions {
    display: none;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

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

.hero__proof {
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-secondary);
}

.hero__image {
    position: relative;
    margin-inline: auto;
    max-width: 360px;
}

.hero__video {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    max-height: 620px;
    object-fit: cover;
    border-radius: var(--radius-xl);
    background-color: var(--color-bg-elevated);
    box-shadow: var(--shadow-lg);
}

.hero__video-toggle {
    position: absolute;
    right: var(--space-md);
    bottom: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--color-on-media);
    background-color: rgba(4, 4, 4, 0.55);
    backdrop-filter: blur(4px);
    border-radius: var(--radius-full);
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

@media (hover: hover) {
    .hero__video-toggle:hover {
        background-color: rgba(4, 4, 4, 0.8);
        transform: translateY(-2px);
    }
}

.hero__video-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.hero__video-icon {
    width: 20px;
    height: 20px;
}

.hero__video-icon--unmuted {
    display: none;
}

.hero__video-toggle[aria-pressed="true"] .hero__video-icon--muted {
    display: none;
}

.hero__video-toggle[aria-pressed="true"] .hero__video-icon--unmuted {
    display: block;
}


/* ──────────────────────────────────────────────────
   BUTTON
   ────────────────────────────────────────────────── */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md) var(--space-xl);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: transform var(--transition-fast), opacity var(--transition-fast), background-color var(--transition-fast);
}

.button:hover {
    transform: translateY(-2px);
}

.button:active {
    transform: translateY(0);
}

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

.button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
}

.button--primary {
    background-color: var(--color-primary);
    color: var(--color-on-media);
}

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

.button--secondary {
    background-color: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.button--secondary:hover {
    background-color: var(--color-bg-alt);
}

/* Borde rojo con glow, igual al de .site-header__phone. */
.button--outline {
    border-color: rgba(196, 0, 0, 0.55);
    box-shadow: 0 0 12px 0px rgba(196, 0, 0, 0.18);
}

.button--outline:hover {
    border-color: rgba(196, 0, 0, 0.85);
    box-shadow: 0 0 16px 1px rgba(196, 0, 0, 0.3);
}


/* ──────────────────────────────────────────────────
   TICKER DE SERVICIOS — cinta roja infinita justo debajo del hero.
   Mismo mecanismo de loop sin salto que un logo-marquee: el track se
   duplica en el HTML y la animación se mueve -50%.
   ────────────────────────────────────────────────── */
.service-ticker {
    overflow: hidden;
    background-color: var(--color-primary);
    border-block: 1px solid var(--color-primary-hover);
}

.service-ticker__track {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    width: max-content;
    padding-block: var(--space-md);
    animation: service-ticker-scroll 28s linear infinite;
}

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

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

.service-ticker__item {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-on-media);
}

.service-ticker__dot {
    flex-shrink: 0;
    font-size: var(--text-xs);
    color: var(--color-text-inverse);
    opacity: 0.6;
}


/* ──────────────────────────────────────────────────
   CONTENT / SECTION
   ────────────────────────────────────────────────── */
.content {
    padding-block: var(--space-3xl);
    background-color: var(--color-bg);
}

.content--alt {
    background-color: var(--color-bg-alt);
}

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

.content__container {
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

.content__header {
    max-width: var(--container-md);
    margin-inline: auto;
    margin-bottom: var(--space-3xl);
    text-align: center;
}

.content__eyebrow {
    margin-bottom: var(--space-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
}

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

.content__lead {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
}

.content__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
}


/* ──────────────────────────────────────────────────
   CARD
   ────────────────────────────────────────────────── */
.card {
    padding: var(--space-xl);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

.card__title {
    margin-bottom: var(--space-md);
    font-size: var(--text-lg);
}

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


/* ──────────────────────────────────────────────────
   SERVICE GRID — tarjetas de servicio con ícono, enlazan a la página
   de detalle correspondiente en thesocialbox.marketing.
   ────────────────────────────────────────────────── */
.service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

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

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

.service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-lg);
    background-color: var(--color-bg-elevated);
    border: 1px solid rgba(255, 0, 0, 0.3);
    border-radius: var(--radius-lg);
    transition: transform var(--transition-base), border-color var(--transition-base);
}

.service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 0, 0, 0.55);
}

.service-card__icon {
    width: 96px;
    height: 96px;
    margin-bottom: var(--space-sm);
}

.service-card__title {
    margin-bottom: var(--space-sm);
    font-size: var(--text-lg);
}

.service-card__text {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.service-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: auto;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
    transition: gap var(--transition-fast);
}

.service-card__link svg {
    width: 16px;
    height: 16px;
}

.service-card__link:hover {
    gap: var(--space-sm);
}


/* ──────────────────────────────────────────────────
   HIGHLIGHT GRID — "por qué elegirnos"
   ────────────────────────────────────────────────── */
.highlight-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

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

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

.highlight-card {
    overflow: hidden;
    background-color: var(--color-bg-elevated);
    border: 1px solid rgba(255, 0, 0, 0.3);
    border-radius: var(--radius-lg);
    transition: transform var(--transition-base), border-color var(--transition-base);
}

.highlight-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 0, 0, 0.55);
}

.highlight-card__media {
    background-color: var(--color-bg-alt);
}

.highlight-card__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.highlight-card__media--top img {
    object-position: center 35%;
}

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

.highlight-card__title {
    margin-bottom: var(--space-sm);
    font-size: var(--text-lg);
}

.highlight-card__text {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}


/* ──────────────────────────────────────────────────
   TEAM TEASER — resumen de "Sobre nosotros", enlaza al equipo
   completo en thesocialbox.marketing/nosotros/.
   ────────────────────────────────────────────────── */
.team-teaser {
    display: grid;
    gap: var(--space-xl);
    align-items: stretch;
}

@media (min-width: 768px) {
    .team-teaser {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
    }
}

.team-teaser__media {
    position: relative;
}

.team-teaser__image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
    /* A partir de aquí las dos columnas van lado a lado: la imagen
       llena el alto real del contenido (que ahora es más largo por la
       cita) en vez de quedar más chica y centrada — así las dos
       columnas se sienten del mismo peso visual. */
    .team-teaser__media {
        height: 100%;
    }

    .team-teaser__image {
        height: 100%;
        aspect-ratio: auto;
    }
}

/* Misma píldora que .site-header__phone (círculo + texto), ya
   aprobada ahí — la reutilizamos en vez de inventar un cuarto
   lenguaje visual distinto para la misma idea. */
.team-teaser__badge {
    position: absolute;
    left: var(--space-lg);
    bottom: var(--space-lg);
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-secondary);
    white-space: nowrap;
    padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-sm);
    background-color: rgba(14, 14, 14, 0.9);
    backdrop-filter: blur(6px);
    border-radius: var(--radius-full);
    border: 1px solid rgba(196, 0, 0, 0.55);
    box-shadow: 0 0 12px 0px rgba(196, 0, 0, 0.18);
}

.team-teaser__badge-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-family: var(--font-accent);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-on-media);
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
}

.team-teaser__content {
    max-width: 52ch;
}

.team-teaser__quote {
    position: relative;
    margin-top: var(--space-xl);
    padding-left: var(--space-lg);
    border-left: 2px solid var(--color-primary);
}

.team-teaser__quote p {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text);
}

.team-teaser__quote cite {
    display: block;
    margin-top: var(--space-sm);
    font-style: normal;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.cta-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-md);
    font-weight: 600;
    color: var(--color-primary);
    transition: gap var(--transition-fast);
}

.cta-link svg {
    width: 16px;
    height: 16px;
}

.cta-link:hover {
    gap: var(--space-sm);
}


/* ──────────────────────────────────────────────────
   FAQ — <details>/<summary> nativo, sin JS (ver SKILL.md sección 8:
   el JS es mejora, no requisito).
   ────────────────────────────────────────────────── */
.faq-list {
    max-width: var(--container-md);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* punto medio entre --space-md (1rem) y --space-sm (0.5rem) */
}

.faq-item {
    padding: 1.25rem var(--space-lg); /* vertical a medio camino entre --space-lg y --space-md */
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
}

.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    font-family: var(--font-display);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.faq-item__question::-webkit-details-marker {
    display: none;
}

.faq-item__question::after {
    content: "+";
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: var(--text-lg);
    line-height: 1;
    color: var(--color-primary);
    transition: transform var(--transition-fast);
}

.faq-item[open] .faq-item__question::after {
    transform: rotate(45deg);
}

.faq-item__answer {
    margin-top: 0.75rem; /* punto medio entre --space-md y --space-sm */
    color: var(--color-text-muted);
}


/* ──────────────────────────────────────────────────
   CONTACTO — formulario + tarjeta NAP + mapa.
   ────────────────────────────────────────────────── */
.contact-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem; /* medio entre --space-xl (2rem) y --space-2xl (3rem) */
    /* Columnas a la misma altura otra vez. La vez pasada esto dejaba un
       hueco feo debajo del botón cuando el panel del formulario era más
       corto — ahora ese espacio de más se absorbe empujando el botón
       hacia abajo (ver .contact-form__submit margin-top: auto), no
       dejando un hueco suelto. */
    align-items: stretch;
}

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

/* Panel con borde/glow rojo que envuelve el formulario — mismo
   tratamiento que .contact-panel--form en thesocialbox.marketing. */
.contact-panel {
    background-color: var(--color-bg);
    border: 1px solid #1F1F1F;
    border-radius: var(--radius-2xl);
    padding: 1.75rem; /* punto medio entre --space-lg (1.5rem) y --space-xl (2rem) */
}

.contact-panel--form {
    display: flex;
    flex-direction: column;
    border-color: rgba(255, 0, 0, 0.35);
    box-shadow: 0 0 40px rgba(255, 0, 0, 0.08);
}

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

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

@media (min-width: 560px) {
    .contact-form__row {
        /* "1fr 1fr" a secas no se encoge por debajo del min-content del
           input (ancho intrínseco del navegador, ignora width:100%) —
           por eso el segundo campo se salía del recuadro. minmax(0, 1fr)
           sí permite encoger hasta el espacio real disponible. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.contact-form__input,
.contact-form__textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background-color: var(--color-bg);
    border: 1px solid #1F1F1F;
    border-radius: var(--radius-full);
    padding: 1.25rem 1.5rem; /* medio entre 1rem/1.5rem y 1.5rem/1.5rem */
    font-family: var(--font-body);
    font-size: 0.9375rem; /* medio entre --text-sm y --text-base */
    color: var(--color-text);
    transition: border-color var(--transition-fast);
}

.contact-form__textarea {
    flex: 1;
    border-radius: var(--radius-lg);
    min-height: 100px; /* medio entre 90px y 110px */
    resize: vertical;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
    color: #666;
}

.contact-form__input:focus-visible,
.contact-form__textarea:focus-visible {
    border-color: var(--color-primary);
    outline: none;
}

/* Quita la flecha nativa del <select> (mal alineada contra nuestro
   padding y fondo oscuro custom) y la reemplaza por una propia,
   consistente en cualquier navegador. */
.contact-form__select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23D1D1D1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-lg) center;
    background-size: 14px;
    padding-right: var(--space-2xl);
}

/* Ancho completo en vez de encogerse al contenido: así queda integrado
   con los campos de arriba (todos ocupan el mismo ancho) en lugar de
   verse como una píldora chica flotando aparte. */
.contact-form__submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    width: 100%;
    margin-top: auto;
    padding: var(--space-sm);
    padding-left: 2.5rem; /* medio entre --space-xl (2rem) y --space-2xl (3rem) */
    background-color: var(--color-bg);
    border: 1px solid rgba(255, 0, 0, 0.35);
    border-radius: var(--radius-full);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.15);
    font-family: var(--font-display);
    font-size: 1.125rem; /* medio entre --text-base y --text-lg */
    font-weight: 700;
    color: var(--color-text);
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.contact-form__submit:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 0, 0, 0.6);
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.3);
}

.contact-form__submit-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 51px; /* medio entre 48px y 54px */
    height: 51px;
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
    color: var(--color-on-media);
}

.contact-form__submit-icon svg {
    width: 17px; /* medio entre 16px y 18px */
    height: 17px;
}

/* Chips de contacto — icono en cuadro con borde/glow rojo (outline,
   no relleno sólido), mismo tratamiento que .contact-chip en
   thesocialbox.marketing. */
.contact-chips--column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* medio entre --space-sm (0.5rem) y --space-md (1rem) */
}

/* Bug de la ronda anterior: .contact-chip tenía flex:1 dentro de una
   columna forzada a height:100%, así que las 4 tarjetas se repartían
   TODA la altura del formulario entre ellas — de ahí el espacio en
   blanco gigante en cada una. Sin flex:1, cada chip mide lo que su
   contenido necesita. */
.contact-chip {
    display: flex;
    align-items: center;
    gap: 1.375rem;
    padding: 1.375rem;
    background-color: var(--color-bg);
    border: 1px solid #1F1F1F;
    border-radius: var(--radius-lg);
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

a.contact-chip:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 0, 0, 0.35);
    box-shadow: 0 0 25px rgba(255, 0, 0, 0.12);
}

.contact-chip__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    background-color: transparent;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-full);
    color: var(--color-primary);
}

.contact-chip__icon svg {
    width: 32px;
    height: 32px;
}

.contact-chip__body {
    min-width: 0;
}

.contact-chip__label {
    display: block;
    margin-bottom: 2px;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

.contact-chip__value {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-secondary);
    overflow-wrap: anywhere;
}

.contact-chip__social {
    display: flex;
    gap: 0.375rem; /* medio entre --space-xs (0.25rem) y --space-sm (0.5rem) */
    margin-top: var(--space-xs);
}

.contact-chip__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px; /* medio entre 28px y 34px */
    height: 31px;
    background-color: transparent;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-full);
    color: var(--color-primary);
    transition: transform var(--transition-fast);
}

.contact-chip__social a:hover {
    transform: translateY(-2px);
}

.contact-chip__social svg {
    width: 22px;
    height: 22px;
}

.contact-panel--map-wide {
    padding: 0;
    margin-top: var(--space-xl);
    border-color: #1F1F1F;
}

.contact-map {
    width: 100%;
    height: 260px; /* medio entre 240px y 280px */
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

@media (min-width: 900px) {
    .contact-map {
        height: 330px; /* medio entre 300px y 360px */
    }
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    filter: invert(92%) hue-rotate(180deg) brightness(0.95) contrast(0.9) saturate(0.6);
}


/* ──────────────────────────────────────────────────
   FOOTER
   ────────────────────────────────────────────────── */
.site-footer {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-sm);
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-border-subtle);
}

.site-footer__container {
    display: grid;
    gap: var(--space-xl);
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

@media (min-width: 768px) {
    .site-footer__container {
        grid-template-columns: 1.2fr 1fr 1fr;
        align-items: start;
    }
}

.site-footer__brand img {
    width: 180px;
    height: auto;
    margin-bottom: var(--space-md);
}

.site-footer__tagline {
    max-width: 24ch;
    margin-bottom: var(--space-md);
    color: var(--color-on-media);
}

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

.site-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    transition: transform var(--transition-fast);
}

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

.site-footer__social-link:hover {
    transform: translateY(-2px);
}

/* La columna de Información de Contacto es flex con gap: var(--space-md)
   entre su título y contenido, además del margin-bottom del propio
   título — 24px en total. Esta columna era un bloque simple, sin ese
   gap (solo los 8px del margin), por eso se sentía más apretada.
   Mismo flex + gap para que las dos midan igual. */
.site-footer__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.site-footer__heading {
    margin-bottom: var(--space-sm);
    font-size: var(--text-base);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-on-media);
}

.site-footer__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    padding-inline-start: 0;
    list-style-position: outside;
    gap: var(--space-sm);
}

.site-footer__list li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: var(--space-sm);
}

.site-footer__list-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.site-footer__link {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

/* Columna de Servicios: blanco puro en vez del gris muted, mismo pedido
   que ya aplicamos al teléfono/correo/dirección de la columna de al lado. */
.site-footer__list .site-footer__link {
    color: var(--color-on-media);
}

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

.site-footer__contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.site-footer__contact-item {
    display: flex;
    /* "center" para los ítems de una sola línea (teléfono, correo): el
       ícono queda centrado contra el texto visible en vez de pegado
       arriba del line-box (que trae de sobra por el line-height: 1.6
       heredado). La dirección, que sí ocupa 2 líneas, lo sobreescribe
       a flex-start más abajo para alinear con su primer renglón. */
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-on-media);
    transition: color var(--transition-fast);
}

.site-footer__contact-item--address {
    align-items: flex-start;
}

a.site-footer__contact-item:hover {
    color: var(--color-primary);
}

.site-footer__contact-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: transparent;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-full);
    color: var(--color-primary);
}

.site-footer__contact-item--address .site-footer__contact-icon {
    margin-top: 2px;
}

.site-footer__contact-icon svg {
    width: 16px;
    height: 16px;
}

.site-footer__heading--social {
    margin-top: var(--space-md);
}

/* Réplica exacta de .site-footer__bottom / .site-footer__legal de
   thesocialbox.marketing: texto legal a la izquierda, links a la
   derecha en desktop, apilado en mobile. */
.site-footer__bottom {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border-subtle);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
}

@media (min-width: 768px) {
    .site-footer__bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

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

.site-footer__legal a:hover {
    color: var(--color-primary);
}


/* ──────────────────────────────────────────────────
   BARRA FIJA DE CONTACTO — solo landing page (<768px)
   Obligatoria en toda landing (ver SKILL.md sección 1). El header no
   lleva CTA en mobile — este es el punto de conversión que siempre
   está a mano. Elemento estático, nunca se abre ni se cierra; el body
   ya reserva su espacio (ver sección BASE).
   Quitar del HTML si el proyecto es "sitio completo" en vez de landing.
   ────────────────────────────────────────────────── */
.mobile-cta-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    height: var(--mobile-cta-bar-height);
    padding: var(--space-sm) var(--space-md);
    padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
    background-color: var(--color-bg);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.10);
}

.mobile-cta-bar__primary {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 48px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-on-media);
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-fast);
}

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

/* Botón redondo de contacto directo — WhatsApp por defecto. Cambiar el
   ícono/color o quitarlo si el proyecto usa otro canal. */
.mobile-cta-bar__whatsapp {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--color-on-media);
    background-color: var(--color-whatsapp);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

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

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

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


/* ──────────────────────────────────────────────────
   PÁGINA DE ESTADO — 404 y /gracias/ comparten este patrón
   (mensaje corto + acción). Ver SKILL.md secciones 1 y 11.
   ────────────────────────────────────────────────── */
.status-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-xl);
    text-align: center;
}

.status-page__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    max-width: var(--container-sm);
}

.status-page__code {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-primary);
}

.status-page__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
}

.status-page__text {
    color: var(--color-text-muted);
}

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


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

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

.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }
.text-center  { text-align: center; }

/* Palabra o frase en rojo dentro de un heading, mismo tratamiento que
   .hero__title-accent — usar en un heading por sección como mucho, no
   en todos, para que siga leyéndose como énfasis y no como decoración. */
.text-accent { color: var(--color-primary); }

/* Contenido de formato largo (aviso de privacidad, blog, términos).
   Se aplica junto a .content__container: la cascada de utilities va al
   final del archivo, así que este max-width angosto gana sobre el
   --container-xl de .content__container. */
.prose {
    max-width: var(--container-md);
    line-height: 1.7;
}

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

.prose > h2 {
    margin-top: var(--space-2xl);
}

/* Despeja el header fijo en páginas sin hero (aviso de privacidad). */
.content--page-top {
    padding-top: calc(var(--space-3xl) + 72px);
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Honeypot anti-spam de formularios (ver lanzamiento/SKILL.md sección 7).
   A diferencia de .sr-only, este campo debe quedar invisible también para
   lectores de pantalla — por eso además lleva aria-hidden y tabindex="-1"
   en el HTML, no solo esta clase. */
.botcheck {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}