/* ================================================================
   styles.css — Landing "Redes Sociales en Monclova" (The Social Box)
   ----------------------------------------------------------------
   Concepto "El feed": la página se comporta como una app de redes en
   modo oscuro (hero, marcas, feed, DM), con secciones en
   crema para leer (calendario, FAQ).

   Orden: 1 reset · 2 tokens · 3 base · 4 layout · 5 componentes
   (por sección, en el orden de la página) · 6 utilidades · 7 motion.
   ================================================================ */


/* ================================================================
   1. RESET MODERNO
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100svh; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, picture, video, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; }
fieldset { border: 0; padding: 0; min-width: 0; }


/* ================================================================
   2. VARIABLES — Design Tokens
   ================================================================ */
:root {
    /* ── Colores: identidad de The Social Box ──────── */
    --color-ink:          #040404;   /* fondo de la app (modo oscuro) */
    --color-ink-deep:     #000000;   /* secciones de "pantalla completa" (contacto, CTA final) */
    --color-ink-soft:     #121212;   /* superficies: tarjetas, ventana del DM */
    --color-ink-raised:   #1C1C1C;   /* superficies sobre superficies: burbujas, chips */
    --color-cream:        #F7F6F2;   /* secciones de lectura */
    --color-white:        #FFFFFF;
    --color-brand:        #FF0000;   /* rojo de marca: CTAs y acentos */
    --color-brand-hover:  #C40000;
    --color-brand-soft:   rgba(255, 0, 0, 0.14);
    --color-flame:        #FF7A1A;   /* segundo tono del aro de historia */
    --color-text:         #D1D1D1;   /* texto sobre oscuro */
    --color-text-strong:  #FFFFFF;
    --color-text-muted:   #9A9A9A;
    --color-text-dark:    #0E0E0E;   /* texto fuerte sobre crema */
    --color-text-on-light:#4A4A4A;   /* párrafos sobre crema */
    --color-border:       rgba(255, 255, 255, 0.12);
    --color-border-light: #E2DFD6;
    --color-whatsapp:     #25D366;
    --color-whatsapp-hover: #20BD5A;
    --color-scrim:        rgba(4, 4, 4, 0.78);

    /* Aro de "historia": rojo de marca con un leve brillo, sin naranja. */
    --story-ring: linear-gradient(45deg, var(--color-brand-hover) 0%, var(--color-brand) 55%, #FF4D4D 100%);

    /* ── Tipografía ─────────────────────────────────
       Plus Jakarta Sans para todo; Archivo Black para fechas, números
       de paso y el carácter de "app". */
    --font-body:   "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
    --font-accent: "Archivo Black", "Plus Jakarta Sans", sans-serif;

    --text-xs:   clamp(0.75rem,  0.7rem  + 0.15vw, 0.8125rem);
    --text-sm:   clamp(0.875rem, 0.82rem + 0.2vw,  0.9375rem);
    --text-base: clamp(1rem,     0.94rem + 0.25vw, 1.0625rem);
    --text-lg:   clamp(1.125rem, 1rem    + 0.5vw,  1.375rem);
    --text-xl:   clamp(1.375rem, 1.15rem + 0.9vw,  1.875rem);
    --text-2xl:  clamp(1.875rem, 1.4rem  + 2vw,    3.25rem);
    --text-hero: clamp(2.75rem,  1.9rem  + 4vw,    5.75rem);

    /* ── Espaciado ─────────────────────────────────── */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* ── Radios: todo redondeado, como una app ──────── */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   18px;
    --radius-xl:   28px;
    --radius-full: 9999px;

    /* ── Sombras: profundidad en oscuro + brillo rojo ── */
    --shadow-card:  0 18px 50px rgba(0, 0, 0, 0.45);
    --shadow-phone: 0 40px 90px rgba(0, 0, 0, 0.7), 0 0 80px rgba(255, 0, 0, 0.18);
    --shadow-light: 0 14px 40px rgba(30, 24, 10, 0.12);

    /* ── Transiciones ─────────────────────────────── */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --transition-fast: 150ms ease-out;
    --transition-base: 250ms ease-out;
    --transition-slow: 400ms var(--ease-out);

    /* ── Layout ───────────────────────────────────── */
    --container: 1240px;
    --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
    --header-h: 104px;
    --mobile-cta-bar-height: 72px;
    --phone-radius: 40px;
}


/* ================================================================
   3. BASE
   ================================================================ */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("assets/fonts/plus-jakarta-sans-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: "Archivo Black";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/archivo-black-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 {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    background-color: var(--color-ink);
}

h1, h2, h3 { color: var(--color-text-strong); line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; }

/* Parte del título en el rojo de marca (mismo recurso que el hero). */
.accent { color: var(--color-brand); }

::selection { background-color: var(--color-brand); color: var(--color-white); }

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

svg { width: 1em; height: 1em; flex-shrink: 0; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }


/* ================================================================
   4. LAYOUT
   ================================================================ */
.section { padding-block: var(--space-3xl); scroll-margin-top: var(--header-h); }
.section--dark  { background-color: var(--color-ink); }
.section--deep  { background-color: var(--color-ink-deep); }
.section--light { background-color: var(--color-cream); color: var(--color-text-on-light); }
.section--light h2, .section--light h3 { color: var(--color-text-dark); }

.section__container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
}

.section__head { max-width: 46rem; margin-bottom: var(--space-2xl); }
.section__title { font-size: var(--text-2xl); }
.section__lead { margin-top: var(--space-md); font-size: var(--text-lg); line-height: 1.5; color: var(--color-text-muted); }
.section--light .section__lead { color: var(--color-text-on-light); }

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


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

/* ---------- Botones ---------- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: 52px;
    padding: 0 var(--space-xl);
    font-size: var(--text-base);
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.button svg { font-size: 1.25em; }
.button--primary { color: var(--color-white); background-color: var(--color-brand); box-shadow: 0 10px 30px rgba(255, 0, 0, 0.3); }
.button--primary:hover { background-color: var(--color-brand-hover); }
/* Ghost: contorno; al hover se invierte a blanco sólido. */
.button--ghost { color: var(--color-white); background-color: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35); }
.button--ghost:hover { color: var(--color-ink); background-color: var(--color-white); box-shadow: inset 0 0 0 1.5px var(--color-white); }

/* WhatsApp: el contorno se rellena de verde de abajo hacia arriba. */
.button--whatsapp { position: relative; isolation: isolate; overflow: hidden; }
.button--whatsapp svg { color: var(--color-whatsapp); transition: color var(--transition-fast); }
.button--whatsapp::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--color-whatsapp);
    transform: translateY(101%);
    transition: transform 300ms var(--ease-out);
}
.button--whatsapp:hover { color: var(--color-white); background-color: transparent; box-shadow: inset 0 0 0 1.5px var(--color-whatsapp), 0 12px 30px -8px rgba(37, 211, 102, 0.6); }
.button--whatsapp:hover svg { color: var(--color-white); }
.button--whatsapp:hover::before { transform: none; }
.button:active { transform: scale(0.97); }
.button:disabled { cursor: not-allowed; opacity: 0.5; }

/* ---------- Header ---------- */
.site-header {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid transparent;
    transition: background-color var(--transition-base), border-color var(--transition-base);
}
.site-header.is-scrolled {
    background-color: rgba(4, 4, 4, 0.82);
    border-bottom-color: var(--color-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.site-header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    width: min(100% - 2 * var(--gutter), var(--container));
    height: var(--header-h);
    margin-inline: auto;
}
.site-header__logo img { width: auto; height: 64px; }
.site-nav { display: none; }
.site-nav__list { display: flex; gap: var(--space-2xl); }
.site-nav__link { position: relative; padding-block: var(--space-sm); font-size: 1.125rem; font-weight: 700; text-decoration: none; color: var(--color-white); transition: color var(--transition-fast); }
.site-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background-color: var(--color-brand); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-base); }
.site-nav__link:hover { color: var(--color-white); }
.site-nav__link:hover::after { transform: scaleX(1); }
.site-header__cta {
    display: none;
    align-items: center;
    gap: var(--space-sm);
    min-height: 56px;
    padding: 0 var(--space-xl);
    font-size: 1.125rem;
    font-weight: 800;
    text-decoration: none;
    color: var(--color-white);
    border-radius: var(--radius-full);
    background-color: rgba(37, 211, 102, 0.14);
    box-shadow: inset 0 0 0 1px rgba(37, 211, 102, 0.4);
    transition: background-color var(--transition-fast);
}
.site-header__cta svg { font-size: 1.4rem; color: var(--color-whatsapp); }
.site-header__cta:hover { background-color: rgba(37, 211, 102, 0.24); }

@media (min-width: 768px) {
    .site-header__cta { display: inline-flex; }
    .site-header__logo img { height: 82px; }
}
@media (min-width: 1024px) {
    .site-nav { display: block; }
}

/* ---------- Celular (hero) ---------- */
.phone {
    position: relative;
    aspect-ratio: 9 / 19.5;
    padding: 9px;
    border-radius: var(--phone-radius);
    background: linear-gradient(160deg, #2A2A2A, #0A0A0A 60%);
    box-shadow: var(--shadow-phone), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.phone__screen {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: calc(var(--phone-radius) - 9px);
    background-color: var(--color-ink-soft);
    /* overflow + border-radius no recorta el <video> dentro de un padre
       girado en Chrome (queda una esquina recta); clip-path sí. */
    clip-path: inset(0 round calc(var(--phone-radius) - 9px));
}
.phone__screen video { width: 100%; height: 100%; object-fit: cover; }
.phone__rail {
    position: absolute;
    right: 0.6rem;
    bottom: 5.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    color: var(--color-white);
}
.phone__action { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.6875rem; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.phone__action svg { font-size: 1.6rem; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--header-h) + var(--space-lg));
    padding-bottom: var(--space-3xl);
    background:
        radial-gradient(60% 50% at 78% 45%, rgba(255, 0, 0, 0.16), transparent 70%),
        var(--color-ink);
}
.hero__container {
    display: grid;
    gap: var(--space-2xl);
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
}

/* En móvil y tablet, el texto lleva la foto del equipo (patrón de la serie). */
.hero__copy {
    padding: var(--space-2xl) var(--space-lg);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(180deg, rgba(4, 4, 4, 0.55) 0%, rgba(4, 4, 4, 0.92) 70%),
        url("assets/images/equipo-the-social-box-agencia-de-marketing-monclova.webp") center 30% / cover;
}
.hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}
.hero__kicker::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background-color: var(--color-brand); box-shadow: 0 0 0 4px var(--color-brand-soft); }
.hero__title { margin-top: var(--space-md); font-size: var(--text-hero); line-height: 0.98; letter-spacing: -0.04em; }
.hero__line { display: block; }
.hero__city { color: var(--color-brand); }
.hero__lead { max-width: 34rem; margin-top: var(--space-lg); font-size: var(--text-lg); line-height: 1.5; color: var(--color-text); }
.hero__actions { display: none; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }
.hero__networks { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.hero__network {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem 0.5rem 0.7rem;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-white);
    border-radius: var(--radius-full);
    background-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
/* Hover: cada red se rellena con su propio color de marca, de abajo
   hacia arriba (::before), con un resplandor del mismo tono. */
.hero__network {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.hero__network::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--net-fill);
    transform: translateY(101%);
    transition: transform 300ms var(--ease-out);
}
.hero__network svg { font-size: 1rem; }
.hero__network:hover,
.hero__network:focus-visible { box-shadow: 0 10px 28px -6px var(--net-glow); transform: translateY(-2px); }
.hero__network:hover::before,
.hero__network:focus-visible::before { transform: none; }
.hero__network:active { transform: translateY(0); }
.hero__network--facebook  { --net-fill: #1877F2; --net-glow: rgba(24, 119, 242, 0.6); }
.hero__network--instagram { --net-fill: linear-gradient(45deg, #FEDA75, #FA7E1E 25%, #D62976 55%, #962FBF 80%, #4F5BD5); --net-glow: rgba(214, 41, 118, 0.6); }
.hero__network--tiktok    { --net-fill: #000000; --net-glow: rgba(37, 244, 238, 0.45); }
.hero__network--tiktok:hover svg,
.hero__network--tiktok:focus-visible svg { filter: drop-shadow(-1.5px -1px 0 #25F4EE) drop-shadow(1.5px 1px 0 #FE2C55); }
.hero__network--tiktok:hover,
.hero__network--tiktok:focus-visible { box-shadow: inset 0 0 0 1.5px #FE2C55, -4px 2px 20px -6px rgba(37, 244, 238, 0.8), 4px 2px 20px -6px rgba(254, 44, 85, 0.8); }
.hero__network--linkedin  { --net-fill: #0A66C2; --net-glow: rgba(10, 102, 194, 0.6); }

.hero__stage { display: grid; place-items: center; }
/* Un poco menos alto que un celular real (9:19.5) para que el hero respire. */
.hero__phone { width: min(78vw, 320px); aspect-ratio: 9 / 17; transform: rotate(3deg); }

.hero__comments {
    position: absolute;
    left: var(--space-sm);
    right: 3.6rem;
    bottom: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.hero__comment {
    width: fit-content;
    max-width: 100%;
    padding: 0.4rem 0.7rem;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--color-white);
    border-radius: 14px 14px 14px 4px;
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.hero__comment b { margin-right: 0.25rem; font-weight: 700; }
.hero__heart { display: block; color: var(--color-white); transition: color var(--transition-fast); }
.hero__likes { font-variant-numeric: tabular-nums; }

/* El JS arma el estado inicial (comentarios ocultos); sin JS se ven todos. */
.hero.is-live .hero__comment { opacity: 0; transform: translateY(12px) scale(0.96); transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out); }
.hero.is-live .hero__comment.is-in { opacity: 1; transform: none; }
.hero__heart.is-beating { color: var(--color-brand); animation: heart-beat 600ms var(--ease-out); }

@keyframes heart-beat {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

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

@media (min-width: 1024px) {
    .hero { min-height: 100svh; display: grid; align-items: center; padding-bottom: var(--space-2xl); }
    .hero__container { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
    .hero__copy { padding: 0; background: none; border-radius: 0; }
    .hero__phone { width: min(30vw, 340px); }
}

/* ---------- Destacadas (marcas) ---------- */
.highlights {
    --ring: 104px;
    padding-block: var(--space-xl);
    border-block: 1px solid var(--color-border);
    background-color: var(--color-ink);
}
.highlights__title {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin: 0 auto var(--space-lg);
    font-size: var(--text-xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-white);
}
.highlights__title-accent { color: var(--color-brand); }
.highlights__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.highlights__track { display: flex; gap: var(--space-xl); width: max-content; padding: var(--space-xs) var(--space-lg) var(--space-md); }
.highlights.is-looping .highlights__track { animation: highlights-scroll 60s linear infinite; }
.highlights__viewport:hover .highlights__track,
.highlights__viewport:focus-within .highlights__track { animation-play-state: paused; }

.highlight { display: flex; justify-content: center; width: calc(var(--ring) + 8px); }
.highlight__ring {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: var(--ring);
    height: var(--ring);
    padding: 4px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--story-ring);
    box-shadow: 0 10px 30px -10px rgba(255, 0, 0, 0.5);
    transition: transform 250ms var(--ease-out);
}
.highlight:hover .highlight__ring { transform: scale(1.06); }
.highlight__logo,
.highlight__photo,
.highlight__initials {
    width: calc(var(--ring) - 8px);
    height: calc(var(--ring) - 8px);
    border-radius: 50%;
    border: 4px solid var(--color-ink);
}
.highlight__logo { padding: 8px; object-fit: contain; background-color: var(--color-white); }
.highlight__photo { object-fit: cover; object-position: center 25%; }
.highlight__initials { display: grid; place-items: center; font-family: var(--font-accent); font-size: 1.5rem; color: var(--color-white); background-color: var(--color-ink-raised); }

@media (min-width: 1024px) {
    .highlights { --ring: 136px; }
    .highlights__track { gap: var(--space-2xl); }
}

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

/* ---------- Qué incluye ----------
   Celular: carrusel horizontal (una tarjeta y la siguiente asomándose)
   para que la sección no mida cuatro pantallas. Escritorio: cuadrícula
   pareja de 3 × 2 que cabe en una pantalla. */
.bento {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: var(--space-md);
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) var(--space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
}
.bento::-webkit-scrollbar { display: none; }
.bento > .service-card { scroll-snap-align: start; }
.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-xl);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-ink-soft);
    box-shadow: inset 0 0 0 1px var(--color-border);
}
.service-card__title { font-size: var(--text-lg); }
.service-card__text { font-size: var(--text-sm); color: var(--color-text-muted); }

.service-card--strategy {
    background:
        radial-gradient(80% 90% at 100% 0%, rgba(255, 0, 0, 0.2), transparent 60%),
        var(--color-ink-soft);
}

.service-card--photo { min-height: 360px; padding: 0; justify-content: flex-end; }
.service-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.service-card--photo:hover .service-card__image { transform: scale(1.04); }
.service-card__overlay {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-xl);
    background: linear-gradient(transparent, rgba(4, 4, 4, 0.92) 45%);
}
.service-card__overlay .service-card__text { color: var(--color-text); }

/* Vistas previas dentro de las tarjetas (decorativas): muestran el
   servicio con material real en lugar de dejar la tarjeta en texto. */

/* Estrategia: mini calendario (eco de la sección "Así se ve tu mes"). */
.mini-cal { margin-bottom: var(--space-xl); padding: var(--space-md); border-radius: var(--radius-lg); background-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-border); }
.mini-cal__bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--space-md); margin-bottom: var(--space-md); }
.mini-cal__title { font-family: var(--font-accent); font-size: var(--text-lg); white-space: nowrap; color: var(--color-white); }
.mini-cal__count { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); }
.mini-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.mini-cal__day { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 7px; background-color: var(--color-ink-raised); }
.mini-cal__day img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mini-cal__day--on { box-shadow: inset 0 0 0 2px var(--color-brand); }
.mini-cal__day--on::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--color-brand); }
.mini-cal__num { position: absolute; top: 3px; left: 5px; z-index: 1; font-family: var(--font-accent); font-size: 0.6875rem; color: var(--color-text-muted); }
.mini-cal__day--on .mini-cal__num { color: var(--color-white); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.mini-cal__net { position: absolute; left: 4px; bottom: 4px; z-index: 1; font-size: 0.8rem; color: var(--color-white); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); }
.mini-cal__check { position: absolute; top: 3px; right: 3px; z-index: 1; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background-color: var(--color-brand); }
/* En celular las celdas son chicas: solo miniatura y red. */
@media (max-width: 767px) {
    .mini-cal__day--on .mini-cal__num, .mini-cal__check { display: none; }
}
.mini-cal__check::before { content: ""; width: 7px; height: 4px; margin-top: -2px; border-left: 1.5px solid var(--color-white); border-bottom: 1.5px solid var(--color-white); transform: rotate(-45deg); }

/* Reels y stories: mini línea de edición (video, texto, audio). */
.reel-edit { position: relative; display: grid; gap: 5px; margin-bottom: var(--space-lg); padding: var(--space-sm); border-radius: var(--radius-md); background-color: var(--color-ink); }
.reel-edit__track { display: flex; gap: 3px; height: 26px; }
.reel-edit__track--video { height: 46px; }
.reel-edit__track--video img { flex: 1; min-width: 0; height: 100%; object-fit: cover; border-radius: 4px; }
.reel-edit__track--text span {
    flex: 1;
    display: grid;
    place-items: center;
    font-size: 0.625rem;
    font-weight: 800;
    color: var(--color-white);
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.12);
}
.reel-edit__track--text span:nth-child(2) { background-color: rgba(255, 0, 0, 0.3); }
.reel-edit__track--audio {
    border-radius: 4px;
    background:
        repeating-linear-gradient(90deg, transparent 0 2px, rgba(209, 209, 209, 0.55) 2px 4px) center / 100% 60% no-repeat,
        rgba(255, 255, 255, 0.05);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.5) 20%, #000 40%, rgba(0, 0, 0, 0.6) 65%, #000 100%);
            mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.5) 20%, #000 40%, rgba(0, 0, 0, 0.6) 65%, #000 100%);
}
.reel-edit__head { position: absolute; top: 2px; bottom: 2px; left: 66.6%; width: 2px; background-color: var(--color-brand); box-shadow: 0 0 10px var(--color-brand); }
.reel-edit__head::before { content: ""; position: absolute; top: 0; left: -5px; width: 12px; height: 8px; border-radius: 2px 2px 6px 6px; background-color: var(--color-brand); }
@media (prefers-reduced-motion: no-preference) {
    .service-card--reels:hover .reel-edit__head { animation: playhead 2.4s linear infinite; }
}
@keyframes playhead { from { left: 4%; } to { left: 96%; } }

/* Diseño de posts: abanico de tres piezas. */
.fan { position: relative; height: 150px; margin-bottom: var(--space-lg); }
.fan__card {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 96px;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    transform-origin: bottom center;
    transition: transform 350ms var(--ease-out);
}
.fan__card:nth-child(1) { transform: translateX(-50%) translateX(-58px) rotate(-12deg); }
.fan__card:nth-child(2) { z-index: 2; transform: translateX(-50%) translateY(-8px); }
.fan__card:nth-child(3) { transform: translateX(-50%) translateX(58px) rotate(12deg); }
.service-card--design:hover .fan__card:nth-child(1) { transform: translateX(-50%) translateX(-74px) rotate(-16deg); }
.service-card--design:hover .fan__card:nth-child(3) { transform: translateX(-50%) translateX(74px) rotate(16deg); }

/* Community management: un comentario y su respuesta. */
.mini-chat { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.mini-chat__msg {
    align-self: flex-start;
    max-width: 92%;
    padding: 0.55rem 0.85rem;
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--color-white);
    border-radius: 16px 16px 16px 4px;
    background-color: var(--color-ink-raised);
}
.mini-chat__msg b { display: block; font-size: 0.6875rem; color: var(--color-text-muted); }
.mini-chat__msg--reply { align-self: flex-end; border-radius: 16px 16px 4px 16px; background-color: var(--color-brand); }
.mini-chat__msg--reply b { color: rgba(255, 255, 255, 0.75); }

/* Reporte mensual: mini tablero ilustrativo (sin cifras inventadas). */
.mini-report { margin-bottom: var(--space-lg); padding: var(--space-md); border-radius: var(--radius-md); background-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-border); }
.mini-report__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.mini-report__title { font-size: var(--text-sm); font-weight: 800; white-space: nowrap; color: var(--color-white); }
.mini-report__best { flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; font-size: 0.6875rem; font-weight: 700; color: var(--color-white); border-radius: var(--radius-full); background-color: var(--color-ink-raised); }
.mini-report__best img { width: 22px; height: 22px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px var(--color-brand); }
.mini-report__chart { width: 100%; height: auto; margin-block: var(--space-sm); overflow: visible; }
.mini-report__grid { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.mini-report__line { fill: none; stroke: var(--color-brand); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 4px 8px rgba(255, 0, 0, 0.5)); }
.mini-report__dot { fill: var(--color-white); stroke: var(--color-brand); stroke-width: 3; vector-effect: non-scaling-stroke; }
.mini-report__kpis { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-report__kpis li {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 4px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-text);
    border-radius: var(--radius-sm);
    background-color: var(--color-ink-raised);
}
.mini-report__kpis svg { font-size: 0.9rem; color: #2BD46F; }

@media (min-width: 768px) {
    .bento {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-inline: 0;
        padding: 0;
        overflow: visible;
    }
    /* La vista previa arriba y el texto abajo, alineados entre tarjetas. */
    .service-card > :first-child:not(.service-card__image) { margin-bottom: auto; }
}
@media (min-width: 1024px) {
    .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
    .service-card { padding: 20px var(--space-lg); }
    .service-card--photo { min-height: 0; padding: 0; }
    .service-card__overlay { padding: var(--space-lg); }
    #incluye .section__head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-2xl); align-items: end; max-width: none; margin-bottom: var(--space-lg); }
    #incluye .section__lead { margin-top: 0; }
    .mini-cal { padding: var(--space-sm) var(--space-md) var(--space-md); }
    .mini-cal__bar { margin-bottom: var(--space-sm); }
    .mini-cal__day { aspect-ratio: 1; }
    .fan { height: 130px; }
    .fan__card { width: 88px; }
}

/* ---------- Calendario editorial ---------- */
.calendar-layout { display: grid; gap: var(--space-2xl); }
.calendar-layout__head { margin-bottom: 0; }
.calendar__legend { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); }
.calendar__legend-item { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); font-weight: 700; color: var(--color-text-dark); }
.calendar__legend-item::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background-color: var(--type-color); }
.calendar__legend-item--post,  .calendar__day[data-type="post"]  { --type-color: var(--color-brand); }
.calendar__legend-item--reel,  .calendar__day[data-type="reel"]  { --type-color: var(--color-ink); }
.calendar__legend-item--story, .calendar__day[data-type="story"] { --type-color: var(--color-flame); }
.plan-steps { display: grid; gap: var(--space-md); margin-top: var(--space-xl); counter-reset: plan; }
.plan-steps__item {
    position: relative;
    padding-left: 3.25rem;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text-on-light);
    counter-increment: plan;
}
.plan-steps__item::before {
    content: counter(plan);
    position: absolute;
    top: -2px;
    left: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    color: var(--color-white);
    border-radius: 50%;
    background-color: var(--color-brand);
}
.plan-steps__item strong { display: block; color: var(--color-text-dark); }
.calendar__note { margin-top: var(--space-md); font-size: var(--text-xs); color: var(--color-text-on-light); }

.calendar {
    padding: var(--space-md);
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    box-shadow: var(--shadow-light);
}
.calendar__bar { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) var(--space-sm) var(--space-md); }
.calendar__month { font-family: var(--font-accent); font-size: var(--text-xl); color: var(--color-text-dark); }
.calendar__count { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-on-light); }
.calendar__count-num { font-family: var(--font-accent); color: var(--color-brand); }
.calendar__weekdays,
.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar__weekdays li { padding-bottom: var(--space-xs); font-size: var(--text-xs); font-weight: 700; text-align: center; color: var(--color-text-on-light); }

.calendar__day {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 8px;
    background-color: #F1EFE8;
}
.calendar__day--empty { background: none; }
.calendar__date {
    position: absolute;
    top: 4px;
    left: 6px;
    z-index: 2;
    font-family: var(--font-accent);
    font-size: 0.75rem;
    color: var(--color-text-on-light);
}
.calendar__day[data-type] .calendar__date { color: var(--color-white); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.calendar__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.calendar__day[data-type]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 3px var(--type-color);
    pointer-events: none;
}
.calendar__tag {
    position: absolute;
    left: 4px;
    bottom: 4px;
    z-index: 2;
    display: none;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--color-white);
    border-radius: var(--radius-full);
    background-color: var(--type-color);
}
.calendar__net { font-size: 0.7rem; }
.calendar__stamp {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    overflow: hidden;
    font-size: 0;
    color: transparent;
    border-radius: 50%;
    background-color: var(--color-brand);
    box-shadow: 0 2px 6px rgba(255, 0, 0, 0.45);
}
.calendar__stamp::before { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid var(--color-white); border-bottom: 2px solid var(--color-white); transform: rotate(-45deg); }

/* Estado "programado" (lo arma el JS): miniatura atenuada y sin sello. */
.calendar.is-armed .calendar__day[data-type] .calendar__thumb { opacity: 0.25; filter: grayscale(1); transform: scale(1.06); transition: opacity 500ms var(--ease-out), filter 500ms var(--ease-out), transform 500ms var(--ease-out); }
.calendar.is-armed .calendar__day[data-type] .calendar__stamp { opacity: 0; transform: scale(0.4); transition: opacity 300ms var(--ease-out) 200ms, transform 300ms cubic-bezier(0.3, 1.6, 0.5, 1) 200ms; }
.calendar.is-armed .calendar__day.is-published .calendar__thumb { opacity: 1; filter: none; transform: none; }
.calendar.is-armed .calendar__day.is-published .calendar__stamp { opacity: 1; transform: none; }

@media (min-width: 768px) {
    .calendar { padding: var(--space-lg); }
    .calendar__weekdays, .calendar__grid { gap: 8px; }
    .calendar__day { border-radius: 12px; }
    .calendar__date { top: 6px; left: 8px; font-size: 0.9rem; }
    .calendar__tag { display: inline-flex; left: 6px; bottom: 6px; }
    .calendar__stamp {
        top: auto;
        right: 6px;
        bottom: 6px;
        width: auto;
        height: auto;
        padding: 2px 7px;
        font-size: 0.625rem;
        font-weight: 800;
        letter-spacing: 0.02em;
        color: var(--color-white);
        border-radius: var(--radius-full);
    }
    .calendar__stamp::before { display: none; }
    .calendar__day[data-type] .calendar__tag { bottom: 30px; }
}

@media (min-width: 1024px) {
    .calendar-layout { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-3xl); }
    .calendar__day { aspect-ratio: 5 / 6; }
}

/* ---------- Feed: muro de trabajos en movimiento ----------
   Dos filas que se desplazan en sentidos opuestos. initFeedWall()
   duplica cada fila (clon oculto a lectores de pantalla) para que el
   loop no dé saltos. Se pausa al pasar el cursor o enfocar una pieza.
   Con movimiento reducido las filas se desplazan a mano. */
.feed { padding-bottom: var(--space-3xl); }
.feed__head { margin-bottom: var(--space-2xl); }
.feed__head .section__lead { font-size: var(--text-base); }
/* Escritorio: título y apoyo, cada uno en un solo renglón. */
@media (min-width: 1024px) {
    .feed__head { max-width: none; }
    .feed__head .section__title, .feed__head .section__lead { white-space: nowrap; }
    .feed__head .section__lead { margin-top: var(--space-md); }
}

.wall { --tile: 150px; display: grid; gap: 10px; }
.wall__row {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.wall__track { display: flex; gap: 10px; width: max-content; }
.wall.is-moving .wall__track { animation: wall-scroll var(--wall-speed, 70s) linear infinite; }
.wall.is-moving .wall__row--reverse .wall__track { animation-direction: reverse; }
.wall__row:hover .wall__track,
.wall__row:focus-within .wall__track { animation-play-state: paused; }

.wall .feed__item { flex-shrink: 0; width: var(--tile); }
.feed__open {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--color-ink-soft);
}
.feed__open img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.feed__open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--transition-fast); }
.feed__open:hover img { transform: scale(1.06); }
.feed__open:hover::after { box-shadow: inset 0 0 0 2px var(--color-brand); }
.feed__badge { position: absolute; top: 8px; right: 8px; font-size: 1.2rem; color: var(--color-white); filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6)); }

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

@media (min-width: 768px) {
    .wall { --tile: 200px; gap: 14px; }
    .wall__track { gap: 14px; }
}
@media (min-width: 1440px) {
    .wall { --tile: 220px; }
}
@media (prefers-reduced-motion: reduce) {
    .wall__row { overflow-x: auto; }
}

/* Visor (dialog nativo) */
.feed-viewer {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0;
    border: 0;
    color: var(--color-white);
    background: transparent;
}
.feed-viewer::backdrop { background-color: rgba(4, 4, 4, 0.96); backdrop-filter: blur(6px); }
.feed-viewer__frame { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: var(--space-3xl) var(--space-md) var(--space-xl); }
.feed-viewer__figure { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); max-height: 100%; }
.feed-viewer__media img,
.feed-viewer__media video {
    width: auto;
    max-width: min(92vw, 560px);
    max-height: calc(100svh - 10rem);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.feed-viewer__caption { max-width: 34rem; font-size: var(--text-sm); text-align: center; color: var(--color-text); }
.feed-viewer__btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
    color: var(--color-white);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    transition: background-color var(--transition-fast);
}
.feed-viewer__btn:hover { background-color: rgba(255, 255, 255, 0.2); }
.feed-viewer__btn--close { top: var(--space-md); right: var(--space-md); }
.feed-viewer__btn--prev  { left: var(--space-md); top: 50%; transform: translateY(-50%); }
.feed-viewer__btn--next  { right: var(--space-md); top: 50%; transform: translateY(-50%); }
.feed-viewer__btn--sound { top: var(--space-md); left: var(--space-md); }
.feed-viewer__btn[hidden] { display: none; }

@media (max-width: 767px) {
    .feed-viewer__btn--prev, .feed-viewer__btn--next { top: auto; bottom: var(--space-md); transform: none; }
}

/* ---------- FAQ ---------- */
.faq { display: grid; gap: var(--space-xl); }
.faq__head { margin-bottom: 0; }
.faq__list { display: grid; gap: var(--space-sm); }
.faq-item { border-radius: var(--radius-md); background-color: var(--color-white); box-shadow: 0 0 0 1px var(--color-border-light); }
.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg);
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text-dark);
    cursor: pointer;
    list-style: none;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::after { content: "+"; flex-shrink: 0; font-size: 1.5rem; font-weight: 500; line-height: 1; color: var(--color-brand); transition: transform var(--transition-base); }
.faq-item[open] .faq-item__question::after { transform: rotate(45deg); }
.faq-item__answer { padding: 0 var(--space-lg) var(--space-lg); color: var(--color-text-on-light); }

.faq__head { max-width: 62rem; margin-inline: auto; text-align: center; text-wrap: balance; }
.faq__list { width: 100%; max-width: 52rem; margin-inline: auto; }
@media (min-width: 1024px) {
    .faq { gap: var(--space-2xl); }
}

/* ---------- Contacto: DM ---------- */
.contact__layout { display: grid; gap: var(--space-2xl); }
.contact__head { margin-bottom: 0; }

.dm__shortcuts { display: grid; gap: var(--space-sm); margin-top: var(--space-xl); }
.dm__shortcut {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm);
    text-decoration: none;
    color: var(--color-text);
    border-radius: var(--radius-lg);
    transition: background-color var(--transition-fast);
}
.dm__shortcut:hover { background-color: var(--color-ink-soft); }
.dm__shortcut-ring {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 52px;
    height: 52px;
    font-size: 1.3rem;
    color: var(--color-white);
    border-radius: 50%;
    background: var(--color-ink-raised);
    box-shadow: 0 0 0 3px var(--color-ink-deep), 0 0 0 5px var(--color-brand);
    transition: transform var(--transition-fast);
}
.dm__shortcut--whatsapp .dm__shortcut-ring { background-color: var(--color-whatsapp); box-shadow: 0 0 0 3px var(--color-ink-deep), 0 0 0 5px var(--color-whatsapp); }
.dm__shortcut:hover .dm__shortcut-ring { transform: scale(1.06); }
.dm__shortcut-text { display: flex; flex-direction: column; min-width: 0; }
.dm__shortcut-label { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); }
.dm__shortcut-value { font-size: var(--text-base); font-weight: 700; line-height: 1.35; color: var(--color-white); overflow-wrap: anywhere; }

.dm__window {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-color: var(--color-ink-soft);
    box-shadow: var(--shadow-card), inset 0 0 0 1px var(--color-border);
}
.dm__top { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-border); }
.dm__avatar { display: grid; place-items: center; width: 44px; height: 44px; padding: 3px; border-radius: 50%; background-color: var(--color-ink); box-shadow: 0 0 0 2px var(--color-brand); }
.dm__avatar img { width: 100%; height: auto; }
.dm__who { display: flex; flex-direction: column; font-weight: 800; line-height: 1.2; color: var(--color-white); }
.dm__who small { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.dm__who small::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-whatsapp); }

.dm__form { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-lg); }
.dm__thread { display: none; }
.dm__step { display: flex; flex-direction: column; gap: var(--space-sm); }
.dm__question { margin-bottom: var(--space-xs); font-weight: 700; color: var(--color-white); }
.dm__composer { display: flex; align-items: center; gap: var(--space-sm); }
.dm__input {
    flex: 1;
    width: 100%;
    min-height: 50px;
    padding: 0.7rem 1.1rem;
    font-size: 16px; /* evita el zoom de iOS al enfocar */
    color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background-color: var(--color-ink);
    transition: border-color var(--transition-fast);
}
.dm__input::placeholder { color: var(--color-text-muted); }
.dm__input:focus { border-color: var(--color-brand); outline: none; }
.dm__textarea { min-height: 70px; border-radius: var(--radius-lg); resize: vertical; }
.dm__next {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    font-size: 1.25rem;
    color: var(--color-white);
    border-radius: 50%;
    background-color: var(--color-brand);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.dm__next:hover { background-color: var(--color-brand-hover); }
.dm__next:active { transform: scale(0.94); }
.dm__chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.dm__chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.6rem 1rem;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
    border-radius: var(--radius-full);
    background-color: var(--color-ink-raised);
    box-shadow: inset 0 0 0 1px var(--color-border);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.dm__chip input { position: absolute; opacity: 0; pointer-events: none; }
.dm__chip:has(input:checked) { color: var(--color-white); background-color: var(--color-brand-soft); box-shadow: inset 0 0 0 2px var(--color-brand); }
.dm__chip:has(input:focus-visible) { outline: 2px solid var(--color-brand); outline-offset: 3px; }
.dm__send { align-self: flex-start; margin-top: var(--space-sm); }
.dm__send.is-sending { opacity: 0.6; pointer-events: none; }

/* Modo chat (lo activa initDmChat): un paso a la vez como conversación. */
.dm--chat .dm__form { gap: 0; padding: 0; }
.dm--chat .dm__thread {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    height: min(440px, 52svh);
    padding: var(--space-lg);
    overflow-y: auto;
    scroll-behavior: smooth;
}
.dm--chat .dm__step { display: none; padding: var(--space-md) var(--space-lg) var(--space-lg); border-top: 1px solid var(--color-border); }
.dm--chat .dm__step.is-current { display: flex; }
.dm--chat .dm__step .dm__question { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dm--chat .dm__send { align-self: stretch; }

.dm__bubble {
    max-width: 82%;
    padding: 0.65rem 1rem;
    font-size: var(--text-sm);
    line-height: 1.45;
    border-radius: 20px;
    animation: bubble-in 300ms var(--ease-out);
}
.dm__bubble--in { align-self: flex-start; color: var(--color-white); border-bottom-left-radius: 6px; background-color: var(--color-ink-raised); }
.dm__bubble--out { align-self: flex-end; display: flex; align-items: center; gap: var(--space-sm); color: var(--color-white); border-bottom-right-radius: 6px; background-color: var(--color-brand); }
.dm__edit { display: grid; place-items: center; width: 26px; height: 26px; font-size: 0.85rem; color: var(--color-white); border-radius: 50%; background-color: rgba(0, 0, 0, 0.2); }
.dm__edit:hover { background-color: rgba(0, 0, 0, 0.35); }
.dm__typing { display: inline-flex; gap: 4px; padding: 0.85rem 1rem; }
.dm__typing span { width: 7px; height: 7px; border-radius: 50%; background-color: var(--color-text-muted); animation: typing 1s infinite ease-in-out; }
.dm__typing span:nth-child(2) { animation-delay: 0.15s; }
.dm__typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes bubble-in {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}
@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

@media (min-width: 1024px) {
    .contact__layout { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-4xl); align-items: center; }
}

/* ---------- CTA final hacia el sitio principal ---------- */
.agency-cta { padding: var(--space-3xl) 0; background-color: var(--color-ink-deep); }
.agency-cta__container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.agency-cta__banner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
    padding: var(--space-2xl) var(--space-xl);
    overflow: hidden;
    border-radius: var(--radius-xl);
}
.agency-cta__image { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.agency-cta__banner::before { content: ""; position: absolute; inset: 0; z-index: 1; background-color: var(--color-scrim); }
.agency-cta__content, .agency-cta__banner .button { position: relative; z-index: 2; }
.agency-cta__title { font-size: var(--text-xl); }
.agency-cta__title-accent { color: var(--color-brand); }
.agency-cta__text { margin-top: var(--space-sm); color: var(--color-text); }

@media (min-width: 768px) {
    .agency-cta__banner { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--space-2xl) var(--space-3xl); }
    .agency-cta__content { max-width: 36rem; }
}

/* ---------- Footer ----------
   Réplica del footer de las landings "Agencia de marketing en <ciudad>"
   (~/Projects/landing tsb/styles.css), con los glifos oficiales. */
.site-footer {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-sm);
    background-color: var(--color-ink);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer__container {
    display: grid;
    gap: var(--space-xl);
    max-width: 1280px;
    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-white); }
.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;
    color: var(--color-brand);
    border: 1px solid var(--color-brand);
    border-radius: var(--radius-full);
    background-color: transparent;
    transition: transform var(--transition-fast);
}
.site-footer__social-link svg { width: 15px; height: 15px; }
.site-footer__social-link:hover { transform: translateY(-2px); }
.site-footer__nav { display: flex; flex-direction: column; gap: var(--space-md); padding-top: var(--space-md); }
.site-footer__contact { padding-top: var(--space-md); }
.site-footer__heading {
    margin-bottom: var(--space-sm);
    font-size: var(--text-base);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-white);
}
.site-footer__heading--social { margin-top: var(--space-md); }
.site-footer__list { display: flex; flex-direction: column; gap: var(--space-sm); margin: 0; padding: 0; }
.site-footer__list li { display: flex; align-items: center; 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-white); }
.site-footer__contact { display: flex; flex-direction: column; gap: var(--space-md); }
.site-footer__contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-white);
    transition: color var(--transition-fast);
}
.site-footer__contact-item--address { align-items: flex-start; }
a.site-footer__contact-item:hover { color: var(--color-brand); }
.site-footer__contact-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--color-brand);
    border: 1px solid var(--color-brand);
    border-radius: var(--radius-full);
    background-color: transparent;
}
.site-footer__contact-item--address .site-footer__contact-icon { margin-top: 2px; }
.site-footer__contact-icon svg { width: 16px; height: 16px; }
.site-footer__bottom {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-top: var(--space-lg);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
@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 { text-decoration: none; color: var(--color-text-muted); }
.site-footer__legal a:hover { color: var(--color-brand); }

/* ---------- Barra fija de contacto (solo móvil) ---------- */
.mobile-cta-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    height: var(--mobile-cta-bar-height);
    padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom));
    gap: var(--space-sm);
    background-color: rgba(4, 4, 4, 0.9);
    border-top: 1px solid var(--color-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.mobile-cta-bar__primary {
    display: grid;
    flex: 1;
    place-items: center;
    font-weight: 800;
    text-decoration: none;
    color: var(--color-white);
    border-radius: var(--radius-full);
    background-color: var(--color-brand);
}
.mobile-cta-bar__primary:active { background-color: var(--color-brand-hover); }
.mobile-cta-bar__whatsapp {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    font-size: 1.6rem;
    color: var(--color-white);
    border-radius: 50%;
    background-color: var(--color-whatsapp);
}
.mobile-cta-bar__whatsapp:active { background-color: var(--color-whatsapp-hover); }

body { padding-bottom: var(--mobile-cta-bar-height); }

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


/* ---------- Páginas secundarias: 404, gracias, aviso ---------- */
.status-body { padding-bottom: 0; }
.status-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    min-height: 100svh;
    padding: var(--space-2xl) var(--gutter);
    text-align: center;
    background: radial-gradient(50% 45% at 50% 40%, rgba(255, 0, 0, 0.16), transparent 70%), var(--color-ink);
}
.status-page__code { font-family: var(--font-accent); font-size: clamp(5rem, 3rem + 10vw, 9rem); line-height: 1; color: var(--color-brand); }
.status-page__check {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--story-ring);
}
.status-page__check::before { content: ""; width: 30px; height: 16px; margin-top: -8px; border-left: 4px solid var(--color-white); border-bottom: 4px solid var(--color-white); transform: rotate(-45deg); }
.status-page__title { font-size: var(--text-2xl); }
.status-page__text { max-width: 32rem; font-size: var(--text-lg); color: var(--color-text); }
.status-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }

.legal { width: min(100% - 2 * var(--gutter), 46rem); margin-inline: auto; padding: calc(var(--header-h) + var(--space-2xl)) 0 var(--space-3xl); }
.legal h1 { font-size: var(--text-2xl); }
.legal h2 { margin-top: var(--space-xl); font-size: var(--text-lg); }
.legal p { margin-top: var(--space-md); }
.legal a:not(.button) { color: var(--color-brand); }
.legal .button { margin-top: var(--space-lg); }


/* ================================================================
   6. UTILIDADES
   ================================================================ */
.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;
}
.sr-only--focusable:focus {
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: 200;
    width: auto;
    height: auto;
    padding: var(--space-sm) var(--space-md);
    margin: 0;
    clip: auto;
    color: var(--color-white);
    border-radius: var(--radius-sm);
    background-color: var(--color-brand);
}
.botcheck { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* Reveal al entrar en pantalla (initReveal); sin JS todo visible. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }


/* ================================================================
   7. MOVIMIENTO REDUCIDO
   ================================================================ */
@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;
    }
    .highlights__viewport { overflow-x: auto; }
    .hero__phone { transform: none; }
}