/* ═══════════════════════════════════════════════════════════════
   El Ninja Fluorescente — sitio público
   Estética: zen editorial · papel washi · tinta sumi-e · sakura
   Rosa fluo solo como 3% acento (subrayados, hover, micro-detalles)
   ═══════════════════════════════════════════════════════════════ */

/* Tipografías especiales (para títulos y frases concretas) */
@font-face {
    font-family: 'Hoshiko Satsuki';
    src: url('/assets/fonts/hoshiko-satsuki.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Zenzai Itacha';
    src: url('/assets/fonts/zenzai-itacha.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Khiara Script';
    src: url('/assets/fonts/khiara-script.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JSA Love Chinese';
    src: url('/assets/fonts/jsa_lovechinese.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Oriental Chicken';
    src: url('/assets/fonts/oriental-chicken.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* Clase utilitaria: añádela a cualquier título o frase para usar la fuente especial */
.hoshiko { font-family: var(--font-hoshiko); }
/* (Oriental Chicken tiene mayúsculas, minúsculas y acentos completos —
   ya no hace falta el text-transform: lowercase que pedía JSA Love Chinese.) */

:root {
    /* ── Paleta (manual de diseño) ── */
    --paper:         #F7F0E6;
    --paper-deep:    #E9DFD1;
    --paper-soft:    #FAF6EF;
    --ink:           #111111;
    --ink-soft:      #2A2A2A;
    --charcoal:      #3A3A3A;
    --mist:          #B8B2AA;
    --line:          rgba(17, 17, 17, 0.10);
    --line-strong:   rgba(17, 17, 17, 0.18);

    /* Acento rosa fluorescente — proporción objetivo: 3% del diseño */
    --fluo:          #FF47C8;
    --fluo-deep:     #E91E8C;
    --sakura:        #EFA2A0;
    --sakura-light:  #F6C8C2;
    --seal-red:      #D95C55;

    /* Tipografía */
    --font-display:  'Cormorant Garamond', Georgia, serif;
    --font-body:     'Cormorant Garamond', Georgia, serif;   /* (prueba: todo en Cormorant; antes Inter) */
    --font-kanji:    'Noto Serif JP', serif;
    --font-hoshiko:  'Oriental Chicken', var(--font-display);   /* fuente especial de títulos (Oriental Chicken; antes JSA / Khiara / Zenzai / Hoshiko) */

    /* Espaciado base */
    --space-xs:  8px;
    --space-sm:  16px;
    --space-md:  32px;
    --space-lg:  64px;
    --space-xl:  96px;
    --space-xxl: 140px;

    /* Otros */
    --maxw:      1280px;
    --ease:      cubic-bezier(0.22, 1, 0.36, 1);
    --tr-fast:   180ms ease;
    --tr-base:   320ms ease;
    --tr-slow:   700ms ease;
}

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

html {
    scroll-behavior: smooth;

    /* Tamaño base de TODA la web. Casi todos los tamaños del CSS están en `rem`,
       que se mide desde aquí (no desde el body), así que este número los mueve
       todos a la vez y las proporciones del diseño se mantienen.

       Se sube de los 16px de fábrica a 18px porque la Cormorant Garamond tiene
       la minúscula muy baja: a 16px se leía como un Arial a 12px. Con 18px se
       lee como un Arial a 13,4px, que ya es tamaño de lectura.

       Va en porcentaje y no en px a propósito: así, quien tenga el navegador
       configurado con la letra más grande por accesibilidad, sigue mandando.
       112.5% de 16px = 18px. */
    font-size: 112.5%;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;          /* sigue a la raíz, ver la nota de arriba */
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;

    /* Nada de arrastrar la página de lado. En iOS el `overflow-x: hidden` del
       body no basta: Safari deja rebotar en horizontal y asoma una franja en
       blanco. `overscroll-behavior-x: none` corta ese rebote, y `clip` recorta
       igual que `hidden` PERO sin crear un contenedor de scroll, así que el
       `position: sticky` del hero sigue funcionando. Se declaran los dos: el
       navegador que no entienda `clip` se queda con `hidden`. */
    overflow-x: hidden;
    overflow-x: clip;
    overscroll-behavior-x: none;
}

html {
    overscroll-behavior-x: none;
}

::selection { background: var(--fluo); color: var(--ink); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
em { font-style: normal; }

/* Cursor custom y textura de grano — desactivados en zen editorial */
.cursor, .grain { display: none; }

/* ── Tipografía base ── */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
}

/* Heredado del estilo anterior: el rosa solo subraya, sin glow */
.neon { color: var(--fluo-deep); font-style: normal; }

.eyebrow {
    font-family: var(--font-body);
    font-size: 0.87rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 500;
}

.dim { color: var(--ink-soft); }

/* ── Botones ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1.05rem;
    padding: 14px 28px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--tr-base), color var(--tr-base), border-color var(--tr-base);
}
/* btn-neon: nombre heredado, ahora es el primario sólido oscuro.
   Se le da más presencia: algo más grande, con un halo rosa que aparece al
   pasar por encima y un empujón hacia arriba. La llamada a la acción es lo que
   tiene que destacar de la página. */
.btn-neon {
    background: var(--ink);
    color: var(--paper);
    padding: 16px 34px;
    font-size: 1.06rem;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 14px rgba(17, 17, 17, 0.14);
    transform: translateY(0);
    transition: background var(--tr-base), color var(--tr-base),
                box-shadow var(--tr-base), transform var(--tr-base);
}
.btn-neon:hover {
    background: var(--fluo);
    color: var(--ink);
    box-shadow: 0 8px 26px rgba(255, 71, 200, 0.42);
    transform: translateY(-2px);
}
.btn-neon:active { transform: translateY(0); }

/* Quien no puede con animaciones no debería recibir saltos */
@media (prefers-reduced-motion: reduce) {
    .btn-neon, .btn-neon:hover, .btn-neon:active { transform: none; }
}
.btn-ghost {
    border-color: var(--ink);
    color: var(--ink);
    background: transparent;
}
.btn-ghost:hover {
    background: var(--ink);
    color: var(--paper);
}
.btn-grande { padding: 16px 32px; font-size: 1.06rem; }
.btn-block { width: 100%; justify-content: center; }

/* ── Cabecera: píldora "cristal" flotante (global, rediseño 10-jun) ── */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    width: min(94vw, 1060px);
    margin: 14px auto 0;               /* centrada sin transform (no choca con el auto-hide) */
    padding: 10px clamp(16px, 3vw, 32px);
    background: rgba(247, 240, 230, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transition: background var(--tr-base), backdrop-filter var(--tr-base), padding var(--tr-base),
                opacity 1.2s ease, transform 1.2s ease;
}

/* Páginas con hero de solo vídeo: el header empieza oculto y aparece con el primer
   gesto de scroll del usuario (controlado por JS — ver site.js). Sin JS o si tarda,
   el header se ve igualmente. */
html.hero-video-page.js .site-header {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
}
html.hero-video-page.js .site-header.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Auto-hide al hacer scroll hacia abajo / reaparecer al subir — gana sobre todo lo demás */
.site-header.is-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-100%) !important;
}

/* Bloqueo del primer scroll en la home con vídeo:
   el primer gesto solo revela el menú, no avanza la página.
   Combinamos overflow:hidden + position:fixed para bloquear scroll
   en todos los navegadores (incluido trackpad de macOS). */
html.lock-scroll {
    overflow: hidden;
    height: 100%;
}
html.lock-scroll body {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.site-header .logo { justify-self: start; }
.site-header .nav { justify-self: center; }
.site-header .nav-toggle { justify-self: end; }
/* Al hacer scroll, la píldora se compacta un poco. */
.site-header.scrolled {
    padding-top: 8px;
    padding-bottom: 8px;
}
/* Variante para páginas oscuras (body.tema-oscuro): cristal oscuro,
   los textos del menú ya van en claro por sus propias reglas. */
.tema-oscuro .site-header {
    background: rgba(20, 17, 15, 0.45);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.logo { display: flex; align-items: center; gap: 12px; }
/* La bombilla-ninja de marca, en el fluo fijo (#FF47C8): no cambia con el tema
   como hacía el kanji, porque el rosa contrasta igual sobre papel y sobre negro.
   Alto en rem para que acompañe al bloque de texto de dos líneas; el ancho lo
   pone la proporción del propio archivo. */
.logo-marca {
    height: 2rem;
    width: auto;
    display: block;
    flex: none;
}
.logo-text {
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--ink);
}
.logo-flu {
    color: var(--fluo-deep);
    font-style: normal;
}

.nav { display: flex; gap: clamp(20px, 3vw, 36px); }
.nav a {
    font-size: 1.06rem;
    font-weight: 400;
    color: var(--ink-soft);
    position: relative;
    padding: 4px 0;
    transition: color var(--tr-fast);
}
.nav a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -4px;
    width: 0; height: 2px;
    background: var(--fluo);
    border-radius: 999px;
    transition: width var(--tr-base);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { width: 100%; }

.nav-cta { padding: 10px 22px; font-size: 0.99rem; }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 1px solid var(--ink);
    border-radius: 50%;
    cursor: pointer;
    width: 52px; height: 52px;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.nav-toggle span {
    width: 22px; height: 1.5px;
    background: var(--ink);
    transition: var(--tr-fast);
}

/* ── Secciones genéricas ── */
main { display: block; }
section { position: relative; }

.seccion-head {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
    margin-bottom: 64px;
}
.seccion-head h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 500; }
.seccion-sub { color: var(--ink-soft); font-size: 1.15rem; margin-top: 16px; max-width: 42ch; }

.seccion-num {
    font-family: var(--font-kanji);
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--mist);
    line-height: 1;
    margin-bottom: 12px;
    font-weight: 400;
    opacity: 0.7;
}

/* ═══════════ HERO ═══════════ */
.hero {
    min-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 140px clamp(20px, 4vw, 48px) 80px;
    position: relative;
    overflow: hidden;
    background: var(--paper);
}
/* Blobs / bloom de gradiente — eliminados (zen editorial) */
.hero-bg, .blob, .hero-bloom { display: none; }

/* Wrapper que CONTIENE hero + manifiesto. El sticky del hero solo aplica
   dentro de este wrapper. Cuando se acaba, el hero se libera y sale por arriba. */
.hero-sticky-wrapper {
    position: relative;
}

/* Hero solo con vídeo — ocupa el viewport completo, sin recortes.
   STICKY (efecto luna tipo nokeon): se queda pegado al top mientras la
   sección 1 sube por encima cubriéndolo. NO QUITAR ESTE STICKY. */
.hero-video-only {
    min-height: 100vh;
    height: 100vh;
    padding: 0;
    background: var(--ink);
    align-items: stretch;
    justify-content: stretch;
    position: sticky;
    top: 0;
    z-index: 1;
}
.hero-video-only .hero-kanji,
.hero-video-only .hero-inner,
.hero-video-only .hero-scroll { display: none; }
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    display: block;
}

/* ── Texto vertical en el lateral izquierdo del hero ──
   "影から光へ" / "De la sombra a la luz" — se alternan cada 3s vía JS.
   Usa grid para que ambos textos ocupen la misma celda y hagan crossfade
   sin saltos de layout. */
.hero-vertical {
    position: absolute;
    top: 50%;
    left: clamp(120px, 11vw, 240px);
    transform: translateY(-58%); /* "ligeramente hacia arriba" */
    z-index: 5;
    display: grid;
    pointer-events: none;
    user-select: none;
}
.hero-vertical__txt {
    grid-area: 1 / 1;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
    color: var(--fluo-deep); /* rosa ninja #E91E8C */
    text-shadow: 0 1px 8px rgba(247, 240, 230, 0.55);
    opacity: 0;
    transition: opacity 0.9s ease;
    will-change: opacity;
}
.hero-vertical__txt.is-visible { opacity: 1; }

.hero-vertical__txt--jp {
    font-family: var(--font-kanji);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 500;
    letter-spacing: 0.4em;
}
.hero-vertical__txt--es {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 500;
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    letter-spacing: 0.22em;
}

@media (max-width: 520px) {
    .hero-vertical { left: 40px; transform: translateY(-55%); }
    .hero-vertical__txt--jp { font-size: 1.01rem; letter-spacing: 0.35em; }
    .hero-vertical__txt--es { font-size: 0.95rem; letter-spacing: 0.18em; }
}

/* Kanji decorativo enorme detrás del hero — muy sutil */
.hero-kanji {
    position: absolute;
    top: 50%; right: -5%;
    transform: translateY(-50%);
    font-family: var(--font-kanji);
    font-size: clamp(14rem, 36vw, 28rem);
    color: rgba(17, 17, 17, 0.04);
    z-index: 0;
    pointer-events: none;
    user-select: none;
    font-weight: 400;
}
.hero-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
}
.hero-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.6rem, 6.5vw, 5.6rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
    margin: 20px 0 28px;
    color: var(--ink);
}

/* Swap chino/español: en zen mostramos solo el español, sin lupa */
.hero-swap { position: relative; display: inline-block; }
.hero-swap__es { display: block; }
.hero-swap__zh { display: none; }

.hero-claim {
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    color: var(--ink-soft);
    max-width: 52ch;
    margin: 0 auto 36px;
    line-height: 1.65;
}
.hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.hero-scroll {
    position: absolute;
    bottom: 32px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.hero-scroll span {
    display: block;
    width: 1px; height: 56px;
    background: linear-gradient(var(--ink), transparent);
    animation: scrolldown 2.4s ease-in-out infinite;
    opacity: 0.4;
}
@keyframes scrolldown {
    0%, 100% { opacity: 0.1; transform: scaleY(0.6); transform-origin: top; }
    50%      { opacity: 0.6; transform: scaleY(1);   transform-origin: top; }
}

/* Sub-wrapper de [manifesto + dolores]: acota el sticky del manifesto a
   este tramo. Cuando termina (al acabar dolores), el manifesto se suelta y
   sube junto a dolores — así NO asoma por debajo de la sección 2. */
.manifiesto-sticky-wrapper {
    position: relative;
}

/* Contenedor de fondo washi continuo (home_25) para manifesto + dolores.
   Sube sobre el hero (efecto de scroll): el vídeo queda fijo detrás y este
   bloque asciende sobre él. El borde rasgado del papel asoma arriba. */
.manifiesto-dolores-fondo {
    position: relative;
    z-index: 10;
    margin-top: -250px;                 /* sube sobre el hero */
    background-image: url('/assets/img/ilustraciones/home_25.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top center;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.06));
}

/* ═══════════ MANIFIESTO — texto sobre el papel continuo ═══════════ */
.manifiesto-frase-block {
    /* Fondo washi rasgado propio (fondo-acuarela-roto). Sube sobre el hero:
       MISMO efecto de scroll de antes (margin-top negativo + z-index). NO TOCAR el efecto. */
    position: relative;
    z-index: 10;                /* por encima del hero (1) y de los dolores (5) */
    margin-top: -60px;          /* solapa con el hero arriba (se ve el vídeo por arriba) */
    min-height: 100vh;
    box-sizing: border-box;
    padding: clamp(80px, 12vh, 160px) clamp(24px, 6vw, 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;   /* centrado vertical */
    align-items: center;       /* centrado horizontal */
    text-align: center;
    /* SIN fondo opaco: el papel es transparente. Arriba se ve el hero; abajo
       (donde los dolores suben por detrás) se ven los dolores. */
    background-image: url('/assets/img/home/fondo-acuarela-roto.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top center;
}
.manifiesto-frase-block .seccion-num {
    margin: 0 auto 12px;
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    color: var(--fluo);
    opacity: 0.7;
}
.manifiesto-frase {
    font-family: var(--font-hoshiko);
    font-size: clamp(1.5rem, 3.4vw, 2.6rem);
    line-height: 1.2;
    margin: 0 auto;
    max-width: none;        /* cada frase ocupa su propia línea, sin partirse */
    color: var(--ink);
    font-weight: 500;
    text-align: center;
}

/* Estado inicial — tachado sin línea, palabras del "pero…" ocultas.
   Cuando el bloque entra en viewport, JS añade .is-animated y se dispara la secuencia. */
.manifiesto-tachado {
    color: var(--ink);                         /* color sólido inicial — se lee bien */
    text-decoration: line-through;
    text-decoration-color: transparent;       /* la línea de tachado empieza invisible */
    text-decoration-thickness: 4px;
    opacity: 0;
    white-space: nowrap;                       /* "Podríamos ser como los demás" en una sola línea */
}
.manifiesto-pero {
    white-space: nowrap;                       /* "pero queremos que nos recuerdes." en una sola línea */
}

/* En pantallas estrechas se permite el salto natural para que no se desborde */
@media (max-width: 600px) {
    .manifiesto-tachado,
    .manifiesto-pero { white-space: normal; }
}
.manifiesto-pero .word {
    display: inline-block;
    opacity: 0;
    transform: translateX(-14px);
    will-change: opacity, transform;
}

/* Animaciones */
@keyframes manifiesto-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes manifiesto-strike {
    from { text-decoration-color: transparent; }
    to   { text-decoration-color: var(--fluo); }
}
/* Mientras se taca, el color del texto se va aclarando hacia gris washi. */
@keyframes manifiesto-fade-color {
    from { color: var(--ink); }
    to   { color: var(--mist); }
}
@keyframes word-slide-in {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Secuencia cuando .is-animated:
   0   → 0.8s : fade-in del texto tachado (sin la línea)
   1.0 → 3.6s : tachado se va "pintando" (2.6s, lento)
   2.0 → 3.6s : palabras del "pero queremos que nos recuerdes" aparecen
                en cascada lateral (delay 0.25s entre cada una). */
.manifiesto-frase-block.is-animated .manifiesto-tachado {
    animation:
        manifiesto-fade-in    0.8s ease forwards,
        manifiesto-strike     2.6s cubic-bezier(0.5, 0.05, 0.4, 0.95) 1s forwards,
        manifiesto-fade-color 2.6s ease 1s forwards;        /* paralelo al tachado */
}

.manifiesto-frase-block.is-animated .manifiesto-pero .word {
    animation: word-slide-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.manifiesto-frase-block.is-animated .manifiesto-pero .word:nth-child(1) { animation-delay: 2.0s; }
.manifiesto-frase-block.is-animated .manifiesto-pero .word:nth-child(2) { animation-delay: 2.25s; }
.manifiesto-frase-block.is-animated .manifiesto-pero .word:nth-child(3) { animation-delay: 2.5s; }
.manifiesto-frase-block.is-animated .manifiesto-pero .word:nth-child(4) { animation-delay: 2.75s; }
.manifiesto-frase-block.is-animated .manifiesto-pero .word:nth-child(5) { animation-delay: 3.0s; }
.manifiesto-frase-block.is-animated .manifiesto-pero .word:nth-child(6) { animation-delay: 3.2s; }

/* Accesibilidad: con reduced-motion, todo aparece de golpe, sin animación. */
@media (prefers-reduced-motion: reduce) {
    .manifiesto-tachado {
        opacity: 1;
        color: var(--mist);
        text-decoration-color: var(--fluo);
    }
    .manifiesto-pero .word {
        opacity: 1;
        transform: none;
    }
}

/* ─── (sin uso ahora) Mancha de tinta entre secciones ───
   Capa full-width superpuesta: sube sobre el final de la sección 1 y baja
   sobre el inicio de la sección 2, tapando el borde. Z-index 30 → por
   encima del manifesto (10) y de la sección 2. SOLO la imagen (PNG/WebP
   con transparencia), sin background-color. */
.tinta-transicion {
    position: relative;
    z-index: 30;
    width: 100%;
    aspect-ratio: 2858 / 724;
    margin-top: -12%;        /* sube sobre la sección 1 */
    margin-bottom: -12%;     /* la sección 2 sube por debajo — no añade hueco */
    background-image: url('/assets/img/ilustraciones/tinta.webp');
    /* 118% de ancho centrado: los extremos finos de la mancha quedan fuera
       del encuadre y la parte densa cubre los bordes izquierdo y derecho */
    background-size: 118% 100%;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

/* ─── Bloque dolores — sección 2 (continúa sobre el papel washi de .manifiesto-dolores-fondo) ─── */
.dolores-block {
    position: relative;
    margin: 0;
    max-width: none;
    padding: clamp(60px, 9vw, 130px) clamp(40px, 8vw, 120px) clamp(90px, 13vw, 170px);
    background: #FBF6EE;   /* crema claro, sin imagen superpuesta */
}
.dolores-grid {
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
}

/* ── Columna izquierda: titular + texto + cápsula ── */
.dolores-left { position: relative; }
.dolores-titular {
    font-family: var(--font-display);   /* Cormorant (no la fuente especial) */
    font-size: clamp(1.3rem, 2.4vw, 2.1rem);
    line-height: 1.18;
    font-weight: 500;
    color: var(--ink);
    max-width: 13ch;
}
.dolores-titular .neon { color: var(--fluo-deep); font-style: normal; }
.dolores-rayita {
    display: block;
    width: 56px;
    height: 2px;
    background: var(--sakura);
    border-radius: 999px;
    margin: clamp(20px, 3vw, 28px) 0;
}
.dolores-sub {
    color: var(--ink-soft);
    font-size: clamp(1.04rem, 1.3vw, 1.16rem);
    line-height: 1.7;
    max-width: 34ch;
    margin-bottom: clamp(20px, 3vw, 30px);
}
.dolores-pildora {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-style: normal;
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    color: var(--fluo-deep);
    border: 1px solid var(--fluo);
    border-radius: 999px;
    padding: 8px 20px;
}
.dolores-pildora-flor { color: var(--sakura); font-style: normal; }

/* ── Columna derecha: sello + separador + timeline ── */
.dolores-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(18px, 2.4vw, 30px);
}
.dolores-kanji-deco {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    opacity: 0.7;
}
.kanji-grande {
    font-family: var(--font-kanji);
    font-size: clamp(1.8rem, 3vw, 2.3rem);
    color: var(--ink);
    letter-spacing: 0.12em;
    font-weight: 500;
    line-height: 1;
}
.sello-rojo {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: var(--seal-red);
    color: var(--paper);
    font-family: var(--font-kanji);
    font-size: 18px;
    font-weight: 700;
    transform: rotate(-4deg);
    box-shadow: 0 1px 4px rgba(217, 92, 85, 0.2);
}

/* Separador horizontal con florecita sakura en el centro */
.dolores-divider {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
}
.dolores-divider::before,
.dolores-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line-strong);
}
.dolores-divider span {
    color: var(--sakura);
    font-size: 1.06rem;
    line-height: 1;
}

/* ── Timeline de 3 dolores con iconos enso y línea vertical con flor ── */
.dolores-timeline {
    list-style: none;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(26px, 3.5vw, 44px);
    padding-left: clamp(18px, 3vw, 38px);
    margin-top: 8px;
}
/* línea vertical fina a la izquierda de los iconos */
.dolores-timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background: var(--line-strong);
}
/* florecita sakura en el medio de la línea */
.dolores-timeline::after {
    content: '❀';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--sakura);
    font-size: 0.95rem;
    line-height: 1;
}
.dolores-item {
    display: grid;
    grid-template-columns: clamp(60px, 6.5vw, 84px) 1fr;
    gap: clamp(16px, 2vw, 26px);
    align-items: center;
}
/* círculo enso (anillo de tinta) */
.dolor-enso {
    width: clamp(60px, 6.5vw, 84px);
    height: clamp(60px, 6.5vw, 84px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 2px solid var(--ink-soft);
    flex-shrink: 0;
}
.dolor-enso--flor { color: var(--sakura); font-size: 1.4rem; line-height: 1; }
.dolor-enso--ai {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: 0.02em;
}
/* círculo con paisaje de montañas (recorte de una imagen sumi-e) */
.dolor-enso--montana {
    border: 0;
    background-image: url('/assets/img/ilustraciones/seccion2_nueva.webp');
    background-size: 320%;
    background-position: 13% 60%;
    background-repeat: no-repeat;
    -webkit-mask-image: radial-gradient(circle, #000 62%, transparent 100%);
            mask-image: radial-gradient(circle, #000 62%, transparent 100%);
}
.dolores-item p {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.55vw, 1.32rem);
    line-height: 1.4;
    color: var(--ink);
    margin: 0;
}
.dolores-item .key { color: var(--fluo-deep); font-style: normal; }

/* ── Difuminado negro suave al fondo de la sección 2 ──
   Vela oscura que se desvanece arriba y abajo (no marca corte con el hero
   ni con la siguiente sección). El texto pasa a claro para leerse encima. */
.dolores-block::before { display: none; }   /* sin velo: fondo crema plano */
.dolores-grid { position: relative; z-index: 1; }

/* Responsive: una columna en móvil */
@media (max-width: 860px) {
    .dolores-block {
        padding: clamp(80px, 14vw, 140px) clamp(24px, 6vw, 60px);
    }
    .dolores-grid {
        grid-template-columns: 1fr;
        gap: clamp(36px, 7vw, 64px);
    }
}

/* ═══════════ SERVICIOS — "El arsenal ninja" ═══════════ */
/* ═══════════ DOLORES — PIN con secuencia (fondo bloqueado, pantalla completa) ═══════════ */
/* z-index 5: por DEBAJO del manifiesto (10) pero por ENCIMA del hero (1).
   margin-top negativo: la sección sube por detrás de la parte transparente
   de abajo del manifiesto, así por ahí se ven los dolores (no el vídeo). */
.dolores-pin { position: relative; z-index: 5; margin-top: -38vh; height: 520vh; }
.dolores-pin-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: #14110f url('/assets/img/home/seccion2.3.webp') center / cover no-repeat;
}
/* seccion2.3 es oscura → texto e iconos de los dolores en claro */
.dolores-pin .dpin-titular { color: var(--paper); }
.dolores-pin .dpin-titular .neon { color: var(--fluo); }
.dolores-pin .dpin-sub { color: var(--paper-soft); }
.dolores-pin .dpin-sub strong { color: var(--paper); }
.dolores-pin .dpin-pildora { color: #fff; border: none; padding: 0; background: none; display: inline-flex; align-items: center; gap: 10px; }
.dolores-pin .dpin-pildora .dolores-pildora-flor { color: var(--paper); display: inline-block; }   /* flor en crema */

/* Puntos suspensivos animados en ola (solo se mueven los puntos, no la frase) */
.pildora-dots { display: inline-flex; gap: 5px; margin-left: 4px; }
.pildora-dots i {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    display: inline-block;
    animation: pildora-ola 1.3s ease-in-out infinite;
}
.pildora-dots i:nth-child(2) { animation-delay: 0.18s; }
.pildora-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes pildora-ola {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
    30%           { transform: translateY(-7px); opacity: 1; }
}

/* Flor: al aparecer la píldora "carga" girando un par de vueltas y se coloca junto a la frase */
.dolores-pin.pildora-in .dolores-pildora-flor {
    animation: flor-carga 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes flor-carga {
    0%   { transform: translateX(-26px) rotate(0deg) scale(0.6); opacity: 0; }
    25%  { opacity: 1; }
    100% { transform: translateX(0) rotate(720deg) scale(1); opacity: 1; }
}
.dolores-pin .dpin-dolor p { color: var(--paper-soft); }
.dolores-pin .dpin-dolor .key { color: var(--fluo); }
/* Números romanos en caligrafía (sustituyen a los iconos enso) */
.dolor-num {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 500;
    font-size: clamp(3rem, 5vw, 4.6rem);
    line-height: 1;
    color: #fff;
    letter-spacing: 0.02em;
    animation: num-flota 3.6s ease-in-out infinite;
}
@keyframes num-flota {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-11px); }
}
@media (prefers-reduced-motion: reduce) {
    .dolor-num { animation: none; }
    .pildora-dots i { animation: none; }
}
.dolores-pin-stage {
    position: relative;
    height: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 80px);
}
/* Elementos centrados y ocultos por defecto */
.dpin {
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    margin: 0;
    will-change: opacity, transform;
    transition: opacity .6s ease, transform .7s cubic-bezier(0.22, 1, 0.36, 1);
}
.dpin-titular {
    transform: translate(-50%, -50%) translateY(36px);
    width: min(92%, 22ch);
    max-width: none;
    text-align: center;
}
.dpin-sub {
    transform: translate(-50%, -50%) translateY(36px);
    width: min(92%, 34ch);
    max-width: none;
    text-align: center;
    font-size: clamp(1.2rem, 2vw, 1.7rem);   /* un poco más grande */
    line-height: 1.5;
}
.dpin-pildora {
    transform: translate(-50%, -50%) scale(0.5);
    transition: opacity .5s ease, transform .6s cubic-bezier(0.34, 1.56, 0.64, 1), top .6s ease;
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);  /* más grande cuando está centrada */
    padding: 12px 28px;
}
/* Los 3 dolores en fila horizontal */
/* Zona fija donde los dolores aparecen UNO A UNO (superpuestos, no en fila) */
.dpin-dolores {
    position: absolute;
    left: 50%;
    top: 56%;
    transform: translate(-50%, -50%);
    width: min(92%, 640px);
    height: clamp(200px, 30vh, 300px);
    list-style: none;
    margin: 0;
    padding: 0;
}
.dpin-dolor {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    opacity: 0;
    transform: translate(80px, -50%) scale(0.96);   /* oculto, esperando a la derecha (entra lateral) */
    transition: opacity .5s ease, transform .65s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dpin-dolor p { color: var(--ink-soft); font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.5; margin: 0; }
.dpin-dolor .key { color: var(--fluo-deep); font-style: normal; }

/* ── Estados (data-stage lo pone el JS) ── */
.dolores-pin[data-stage="1"] .dpin-titular { opacity: 1; transform: translate(-50%, -50%); }

.dolores-pin[data-stage="2"] .dpin-titular { opacity: 0; transform: translate(-50%, -50%) translateY(-46px); }
.dolores-pin[data-stage="2"] .dpin-sub { opacity: 1; transform: translate(-50%, -50%); }

.dolores-pin[data-stage="3"] .dpin-sub { opacity: 0; transform: translate(-50%, -50%) translateY(-46px); }
.dolores-pin[data-stage="3"] .dpin-pildora { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Estados 4-6: píldora anclada arriba + dolores apareciendo en fila */
.dolores-pin[data-stage="4"] .dpin-pildora,
.dolores-pin[data-stage="5"] .dpin-pildora,
.dolores-pin[data-stage="6"] .dpin-pildora { opacity: 1; top: 15%; transform: translate(-50%, -50%) scale(0.72); }   /* anclada arriba → más pequeña */

/* Dolores uno a uno: cada uno entra centrado; el anterior se va por arriba. */
.dolores-pin[data-stage="4"] .dpin-dolor:nth-child(1),
.dolores-pin[data-stage="5"] .dpin-dolor:nth-child(2),
.dolores-pin[data-stage="6"] .dpin-dolor:nth-child(3) {
    opacity: 1;
    transform: translate(0, -50%) scale(1);          /* centrado */
}
.dolores-pin[data-stage="5"] .dpin-dolor:nth-child(1),
.dolores-pin[data-stage="6"] .dpin-dolor:nth-child(2) {
    opacity: 0;
    transform: translate(-80px, -50%) scale(0.96);   /* el anterior sale por la izquierda */
}

/* Accesibilidad / sin movimiento: todo visible y apilado */
@media (prefers-reduced-motion: reduce) {
    .dolores-pin { height: auto; }
    .dolores-pin-sticky { position: static; height: auto; min-height: 100vh; padding: 60px 0; }
    .dpin { position: static; transform: none !important; opacity: 1 !important; margin: 18px auto; }
    .dpin-dolores { position: static; transform: none; height: auto; margin-top: 28px; }
    .dpin-dolor { position: static; opacity: 1 !important; transform: none !important; margin: 16px auto; }
}

/* El arsenal ninja — PIN: fondo crema fijo; el título (con pincelada negra detrás)
   aparece y se va por arriba con el scroll. */
.servicios {
    position: relative;
    z-index: 6;              /* por ENCIMA de los dolores (z5): la punta de la ilustración se monta sobre ellos */
    overflow: visible;       /* la ilustración SÍ se sale: se superpone con las secciones de arriba y abajo (continuidad) */
    padding: clamp(28px, 4vw, 60px) 0 0;   /* un poco de aire SOLO arriba; abajo sigue "bajita" */
    background: #FCF5EB;
}
.arsenal-centro { will-change: transform; }   /* parallax suave (lo mueve el JS) */

/* Título "El arsenal ninja" arriba-izquierda, dentro de la sección */
.arsenal-head {
    position: absolute;
    top: clamp(20px, 4vw, 70px);
    left: clamp(12px, 6vw, 110px);
    z-index: 3;
    pointer-events: none;            /* decorativo: no bloquear los enlaces */
    text-align: center;
    width: min(36vw, 420px);
    padding: clamp(34px, 5vw, 72px) clamp(18px, 3.2vw, 40px);
    background-image: url('/assets/img/home/pincelada-negro.webp');
    background-size: clamp(230px, 30vw, 390px) auto;
    background-position: center;
    background-repeat: no-repeat;
}
.arsenal-head h2 { font-family: var(--font-hoshiko); font-size: clamp(1.9rem, 3.8vw, 2.9rem); font-weight: 400; color: #fff; }

/* Dos columnas de texto a los lados; la ilustración va en el centro,
   absoluta, grande y solapando por detrás (y asomando por abajo). */
.arsenal-grid {
    position: relative;
    z-index: 2;              /* el texto va por delante de la imagen */
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px) clamp(16px, 2vw, 40px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(340px, 44vw, 640px);       /* hueco central muy grande: columna derecha mucho más a la derecha */
    align-items: start;
    width: 100%;
    min-height: clamp(400px, 46vh, 620px);   /* más bajita: la ilustración desborda arriba y abajo */
}
/* Ilustración central grande: se desborda de la sección y se superpone con las de
   arriba y abajo (continuidad). z-index 1: detrás del texto pero por delante de las secciones contiguas. */
.arsenal-centro {
    position: absolute;
    left: 50%;
    bottom: clamp(-140px, -9vw, -70px);  /* el pie (ninja) sobresale SIEMPRE sobre la sección de abajo */
    transform: translateX(-50%);
    width: clamp(440px, 54vw, 780px);    /* grande (como antes); el resto desborda por arriba sobre los dolores */
    height: auto;
    z-index: 1;
    pointer-events: none;
}
.arsenal-centro img { width: 100%; height: auto; display: block; }

/* Separar las columnas de la ilustración central: IA un poco más a la
   izquierda, Visibilidad+Producto un poco más a la derecha. z-index alto
   para que los enlaces queden siempre por encima y sean clicables.
   Las alturas siguen el boceto del usuario: Visibilidad arranca arriba,
   IA a media altura (bajo el título), Producto más abajo a la derecha. */
.arsenal-col--izq {
    position: relative;
    left: clamp(-56px, -3vw, -16px);
    margin-top: clamp(150px, 19vw, 360px);   /* IA a media altura, despejando el título */
    z-index: 3;
}
.arsenal-col--der {
    position: relative;
    left: clamp(16px, 3vw, 56px);
    margin-top: clamp(60px, 8vw, 160px);     /* Visibilidad más alta que IA */
    z-index: 3;
}
/* Hueco entre Visibilidad y Producto y diseño */
.arsenal-col--der .arsenal-grupo:first-child {
    margin-bottom: clamp(56px, 8vw, 140px);
}

/* Cada caja-categoría — más separación entre bloques (hueco para abrir subservicios)
   + efecto de flotación suave (bob continuo, con desfase entre bloques). */
.arsenal-grupo {
    margin-bottom: clamp(28px, 4vw, 64px);
    /* (el padding-bottom hoverable de la mecánica antigua ya no hace falta:
       las listas están siempre visibles) */
    animation: arsenal-float 5.5s ease-in-out infinite;
}
.arsenal-col--izq .arsenal-grupo:nth-child(1) { animation-delay: 0s; }
.arsenal-col--izq .arsenal-grupo:nth-child(2) { animation-delay: -2s; }
.arsenal-col--der .arsenal-grupo:nth-child(1) { animation-delay: -3.6s; }
@keyframes arsenal-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
    .arsenal-grupo { animation: none; }
}
.arsenal-grupo:last-child { margin-bottom: 0; }
.arsenal-kanji {
    font-family: var(--font-kanji);
    font-size: clamp(2.1rem, 3.4vw, 3rem);
    color: var(--fluo);        /* rosa ninja */
    line-height: 1;
    display: block;
}
.arsenal-titulo {
    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
    margin: 8px 0 16px;
    font-weight: 500;
    color: var(--ink);
    transition: color .3s ease;
}
.arsenal-grupo:hover .arsenal-titulo,
.arsenal-grupo:focus-within .arsenal-titulo {
    color: var(--fluo-deep);
}
/* Subcategorías SIEMPRE visibles (decisión del usuario: más intuitivo). */
.arsenal-lista {
    list-style: none;
}
.arsenal-lista li { border-top: 1px solid var(--line); }
.arsenal-lista li:last-child { border-bottom: 1px solid var(--line); }
.arsenal-lista a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    color: var(--ink-soft);
    font-size: clamp(1.05rem, 1.35vw, 1.3rem);
    line-height: 1.4;
    transition: color var(--tr-fast), padding-left var(--tr-base);
}
.arsenal-lista a:hover { color: var(--fluo-deep); padding-left: 6px; }
.arsenal-arrow {
    color: var(--mist);
    flex-shrink: 0;
    transition: transform var(--tr-base), color var(--tr-base);
}
.arsenal-lista a:hover .arsenal-arrow { color: var(--fluo-deep); transform: translateX(4px); }

/* Accesibilidad: sin movimiento, las subcategorías se ven siempre */
@media (prefers-reduced-motion: reduce) {
    .arsenal-lista { max-height: none; opacity: 1; transform: none; }
}

/* Responsive: la ilustración vuelve al flujo (arriba) y las columnas se apilan */
@media (max-width: 980px) {
    .servicios { padding-bottom: clamp(48px, 8vw, 80px); }
    .arsenal-grid {
        grid-template-columns: 1fr 1fr;
        gap: clamp(24px, 5vw, 48px);
        min-height: auto;        /* en móvil la ilustración va en flujo, sin altura forzada */
    }
    .arsenal-centro {
        position: static;
        transform: none;
        order: -1;
        grid-column: 1 / -1;
        justify-self: center;
        width: clamp(200px, 42vw, 300px);
        margin-bottom: 16px;
    }
    .arsenal-col--izq,
    .arsenal-col--der { left: 0; margin-top: 0; }    /* sin desplazamientos cuando se apilan */
    .arsenal-head {
        position: static;            /* el título vuelve al flujo, centrado arriba */
        width: auto;
        margin: 0 auto clamp(24px, 6vw, 48px);
        pointer-events: none;
    }
}
@media (max-width: 600px) {
    .arsenal-grid { grid-template-columns: 1fr; }
}

/* ═══════════ POR QUÉ NINJA / FLUORESCENTE — sección 4 ═══════════
   Fondo full-width con dos manchas de acuarela. Cada bloque de texto
   se sitúa sobre su mancha — el de la izquierda (clara) lleva texto
   oscuro, el de la derecha (oscura) lleva texto claro. SOLO la imagen,
   sin background-color. */
.porque {
    position: relative;
    aspect-ratio: 1672 / 941;
    min-height: 540px;
    display: flex;
    align-items: center;
    background-image: url('/assets/img/ilustraciones/seccion4.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.porque-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    width: 100%;
    padding: 0 clamp(20px, 4vw, 48px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 7vw, 96px);
}
.porque-bloque {
    max-width: 36ch;
    margin: 0 auto;
}
.porque-bloque h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin: 12px 0 16px; font-weight: 500; }
.porque-bloque p { font-size: 1.12rem; line-height: 1.7; }

/* Bloque sobre la mancha CLARA (izquierda) — texto oscuro */
.porque-bloque--claro h2 { color: var(--ink); }
.porque-bloque--claro p  { color: var(--ink-soft); }
.porque-bloque--claro .seccion-num { color: var(--mist); }

/* Bloque sobre la mancha OSCURA (derecha) — texto claro */
.porque-bloque--oscuro h2 { color: var(--paper); }
.porque-bloque--oscuro p  { color: var(--paper-soft); }
.porque-bloque--oscuro .seccion-num { color: var(--sakura); }
.porque-bloque--oscuro .neon { color: var(--fluo); }
/* Aparición escalonada (porque "confiar"): título izq → texto izq → título der → texto der */
html.js .reveal-d1 { transition-delay: 0.25s; }
html.js .reveal-d2 { transition-delay: 0.50s; }
html.js .reveal-d3 { transition-delay: 0.75s; }

/* Responsive: en móvil la imagen ya no preserva su ratio panorámico,
   y los bloques se apilan en una sola columna */
@media (max-width: 860px) {
    .porque {
        aspect-ratio: auto;
        padding: clamp(80px, 14vw, 140px) 0;
    }
    .porque-inner {
        grid-template-columns: 1fr;
        gap: clamp(48px, 8vw, 80px);
    }
}

/* ═══════════ MARCAS — banner carrusel con desvanecido a los lados ═══════════ */
.marcas {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 4vw, 56px) 0 clamp(56px, 8vw, 110px);
    background: none;                /* fondo: el sumi-e compartido de .resenas-marcas-bg */
    text-align: center;
}
.marcas-label {
    position: relative;
    z-index: 1;
    font-family: var(--font-hoshiko);              /* fuente especial (Oriental Chicken) */
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    letter-spacing: normal;
    color: #F4EEE2;                  /* claro sobre el fondo oscuro */
    text-align: left;
    padding: 0 clamp(20px, 4vw, 48px);
    margin-bottom: clamp(20px, 3vw, 32px);
}
.marcas-carrusel {
    position: relative;
    z-index: 1;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marcas-track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: clamp(40px, 6vw, 90px);
    animation: marcas-scroll 28s linear infinite;
}
.marcas-carrusel:hover .marcas-track { animation-play-state: paused; }
.marca-item {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.4vw, 2rem);
    color: var(--ink-soft);
    white-space: nowrap;
    opacity: 0.72;
}
/* Logos de clientes en el carrusel de marcas.
   Normalizados a un canvas uniforme 600x240 con tinta monocroma y fondo
   transparente → todos ocupan la misma caja, sin mix-blend ni filtros. */
.marca-logo {
    height: clamp(60px, 8vw, 92px);
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.85;
    transition: opacity .3s ease;
}
.marca-logo:hover { opacity: 1; }
@keyframes marcas-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .marcas-track { animation: none; flex-wrap: wrap; justify-content: center; }
}


/* ═══════════ RESEÑAS + MARCAS (home) — fondo sumi-e compartido ═══════════ */
.resenas-marcas-bg {
    background: url('../img/home/resenas.webp') center / cover no-repeat;
}
.resenas-home {
    max-width: none;
    margin: 0;
    padding: clamp(64px, 10vw, 130px) clamp(20px, 4vw, 48px) clamp(40px, 6vw, 80px);
    text-align: center;
    color: #F4EEE2;
}
.resenas-home .seccion-num { color: var(--fluo); margin-bottom: 10px; text-align: right; }
.resenas-home h2 { font-family: var(--font-hoshiko); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 500; color: #F4EEE2; text-align: right; }
.resenas-home-nota { color: var(--ink-soft); margin-top: 12px; font-style: normal; }

/* Tarjetas de reseñas en la home (placeholders) */
/* ── Carrusel de reseñas de la home ──
   Antes era una rejilla y con cinco reseñas las de abajo no se veían. Ahora es
   una fila que se mueve sola. Se usa scroll nativo con `scroll-snap`: así el
   arrastre con el dedo y el teclado funcionan sin JS, y el JS solo se encarga
   de que avance solo. */
.resenas-carrusel {
    position: relative;
    max-width: var(--maxw);
    margin: clamp(36px, 5vw, 64px) auto 0;
    padding: 0 clamp(20px, 4vw, 48px);
}
.resenas-track {
    display: flex;
    gap: clamp(20px, 2.4vw, 32px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Hueco para que la sombra al pasar el ratón no se recorte contra el borde. */
    padding: 14px 0 20px;
    text-align: left;
    scrollbar-width: none;
}
.resenas-track::-webkit-scrollbar { display: none; }
.resenas-track:focus-visible { outline: 2px solid var(--fluo); outline-offset: 4px; border-radius: 8px; }
.resenas-track > .resena-card {
    flex: 0 0 auto;
    /* Tres a la vez en pantalla ancha, descontando los dos huecos. */
    width: clamp(280px, calc((100% - 2 * clamp(20px, 2.4vw, 32px)) / 3), 420px);
    scroll-snap-align: start;
}
@media (max-width: 900px) {
    .resenas-track > .resena-card { width: clamp(260px, calc((100% - clamp(20px, 2.4vw, 32px)) / 2), 380px); }
}
@media (max-width: 620px) {
    .resenas-track > .resena-card { width: min(85%, 340px); }
}

/* Flechas: fuera del track para no taparlo. Se esconden si no hay a dónde ir. */
.resenas-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    font: inherit; font-size: 1.15rem; line-height: 1;
    cursor: pointer;
    border: 1px solid var(--line-strong, rgba(0,0,0,.18));
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.resenas-flecha:hover { background: var(--ink); color: var(--paper); }
.resenas-flecha:focus-visible { outline: 2px solid var(--fluo); outline-offset: 2px; }
.resenas-flecha[hidden] { display: none; }
.resenas-flecha--antes   { left: max(0px, clamp(20px, 4vw, 48px) - 22px); }
.resenas-flecha--despues { right: max(0px, clamp(20px, 4vw, 48px) - 22px); }
@media (max-width: 760px) { .resenas-flecha { display: none; } }

/* Puntos: además de indicar, sirven para saltar a una reseña. */
.resenas-puntos { display: flex; justify-content: center; gap: 9px; margin-top: 6px; }
.resenas-punto {
    width: 9px; height: 9px; padding: 0;
    border: 0; border-radius: 50%; cursor: pointer;
    background: var(--ink);
    opacity: .22;
    transition: opacity .25s ease, transform .25s ease;
}
.resenas-punto:hover { opacity: .5; }
.resenas-punto.es-activo { opacity: 1; background: var(--fluo-deep, #E91E8C); transform: scale(1.25); }
.resenas-punto:focus-visible { outline: 2px solid var(--fluo); outline-offset: 3px; }

.resena-card {
    background: var(--paper-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: clamp(24px, 3vw, 38px);
    transition: box-shadow .3s ease, transform .3s ease;
}
.resena-card:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06); transform: translateY(-4px); }
.resena-stars { color: var(--seal-red); letter-spacing: 0.15em; margin-bottom: 14px; font-size: 1rem; }
.resena-card blockquote {
    font-family: var(--font-display);
    font-size: 1.12rem;
    line-height: 1.55;
    color: var(--ink);
    margin: 0 0 18px;
    padding: 0;
    border: none;
}
.resena-meta { display: flex; flex-direction: column; gap: 2px; }
.resena-autor { color: var(--ink); font-weight: 500; }
.resena-empresa { color: var(--ink-soft); font-size: 1.03rem; }

/* ═══════════ PROYECTOS ═══════════ */
.proyectos {
    padding: clamp(80px, 12vw, 140px) 0;
    background: var(--paper-soft);
    border-top: 1px solid var(--line);
}
.proyectos-grid {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 32px;
}
.proyecto {
    background: transparent;
    overflow: hidden;
    transition: opacity var(--tr-base);
}
.proyecto:hover { opacity: 0.88; }
.proyecto-media {
    aspect-ratio: 4 / 3;
    background: var(--paper-deep);
    overflow: hidden;
    margin-bottom: 16px;
}
.proyecto-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tr-slow); }
.proyecto:hover .proyecto-media img { transform: scale(1.03); }
.proyecto-info { padding: 0 4px; }
.proyecto-cliente { font-size: 0.86rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.proyecto-info h3 { font-size: 1.4rem; margin: 8px 0; font-weight: 500; }
.proyecto-sector { font-size: 1.03rem; color: var(--charcoal); }

/* ═══════════ RESEÑAS ═══════════ */
.resenas {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(96px, 14vw, 160px) clamp(20px, 4vw, 48px);
}
.resenas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
}
.resena {
    padding: 32px 24px;
    border-top: 1px solid var(--line-strong);
    background: transparent;
}
.resena-estrellas { color: var(--seal-red); letter-spacing: 0.15em; margin-bottom: 16px; font-size: 1.06rem; }
.resena p { font-family: var(--font-display); font-size: 1.3rem; font-style: normal; line-height: 1.5; color: var(--ink); font-weight: 500; }
.resena cite { display: block; margin-top: 20px; font-style: normal; color: var(--ink-soft); font-size: 1.01rem; }

/* ═══════════ CTA FINAL ═══════════ */
.cta-final {
    text-align: center;
    padding: clamp(96px, 14vw, 160px) clamp(20px, 4vw, 48px);
    border-top: 1px solid var(--line);
    background: var(--paper-deep);
}
.cta-bloom { display: none; }
.cta-final h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 500; }
.cta-final-home h2 { font-family: var(--font-hoshiko); }   /* "¿Hablamos de tu negocio?" en la fuente especial */
.cta-final > p { color: var(--ink-soft); max-width: 48ch; margin: 16px auto 36px; font-size: 1.12rem; line-height: 1.65; }

/* CTA en páginas de tema oscuro (sobre nosotros): fondo negro y texto claro */
.tema-oscuro .cta-final { background: #020202; border-top: none; }
.tema-oscuro .cta-final h2 { color: var(--paper); }
.tema-oscuro .cta-final > p { color: var(--mist); }

/* CTA de la home con imagen sumi-e de fondo (1672×941). Texto centrado encima. */
.cta-final-home {
    border-top: none;
    aspect-ratio: 1672 / 941;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 48px);
    background: url('/assets/img/home/cta_home.webp') center / cover no-repeat;
}

/* CTA de la página de Servicios con imagen sumi-e panorámica de fondo.
   Mismo ratio que la imagen (2172×724) → se ve entera; texto centrado encima. */
.cta-final-servicios {
    border-top: none;
    aspect-ratio: 2172 / 724;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 48px);
    background: url('/assets/img/servicios/cta-servicios.webp') center / cover no-repeat;
}

/* CTA de la home con PIN: fondo bloqueado a pantalla completa; las líneas
   (titular → texto → botones) aparecen subiendo conforme se hace scroll. */
.cta-pin {
    aspect-ratio: auto;
    min-height: 0;
    height: 360vh;             /* más recorrido = apariciones más lentas y notables */
    display: block;
    padding: 0;
    background: none;
}
.cta-pin-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 48px);
    background: url('/assets/img/home/cta_home.webp') center / cover no-repeat;
}
.cta-pin-inner { position: relative; z-index: 1; max-width: 640px; }
.cta-pin-inner p.cta-line-2 {
    color: var(--ink-soft);
    max-width: 48ch;
    margin: 16px auto 36px;
    font-size: 1.12rem;
    line-height: 1.65;
}
html.js .cta-line { opacity: 0; transform: translateY(40px); transition: opacity .6s ease, transform .6s ease; }
html.js .cta-pin.r1 .cta-line-1 { opacity: 1; transform: none; }
html.js .cta-pin.r2 .cta-line-2 { opacity: 1; transform: none; }
html.js .cta-pin.r3 .cta-line-3 { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html.js .cta-line { opacity: 1; transform: none; }
    .cta-pin { height: auto; }
    .cta-pin-sticky { position: static; height: auto; min-height: 80vh; }
}

/* ═══════════ FOOTER ═══════════ */
.site-footer {
    background: var(--ink);
    color: var(--paper);
    position: relative;
}
.footer-glow { display: none; }
.footer-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(64px, 9vw, 96px) clamp(20px, 4vw, 48px) 48px;
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: clamp(32px, 6vw, 80px);
}
.footer-claim { color: var(--paper); }
.footer-kanji {
    font-family: var(--font-kanji);
    font-size: 1.4rem;
    color: var(--sakura);
    display: block;
    margin-bottom: 16px;
    font-weight: 400;
}
.footer-tachado {
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1.4;
    color: var(--paper);
    font-weight: 400;
}
.footer-tachado s { color: var(--mist); text-decoration-color: var(--fluo); text-decoration-thickness: 2px; }
/* 4 columnas desde que el pie lleva el alta en la newsletter; la del alta
   necesita más sitio que las de enlaces. */
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer-col h3 {
    font-family: var(--font-body);
    font-size: 0.87rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sakura);
    margin-bottom: 16px;
    font-weight: 500;
}
.footer-col a, .footer-col p {
    display: block;
    color: var(--mist);
    font-size: 1.06rem;
    margin-bottom: 10px;
    transition: color var(--tr-fast);
}
.footer-col a:hover { color: var(--paper); }
.footer-legal {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 24px clamp(20px, 4vw, 48px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.92rem;
    color: var(--mist);
}

/* ═══════════ PÁGINAS INTERIORES ═══════════ */
.page-head {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(140px, 18vw, 192px) clamp(20px, 4vw, 48px) 48px;
    position: relative;
}
.page-kanji {
    position: absolute;
    top: 35%; right: clamp(16px, 5vw, 64px);
    font-family: var(--font-kanji);
    font-size: clamp(6rem, 16vw, 12rem);
    color: rgba(17, 17, 17, 0.04);
    pointer-events: none;
    font-weight: 400;
}
.page-head h1 { font-size: clamp(2.6rem, 7vw, 5rem); margin: 12px 0; font-weight: 500; }
.page-sub { color: var(--ink-soft); font-size: 1.15rem; max-width: 50ch; line-height: 1.65; }

/* ── Header de Servicios con imagen sumi-e de fondo ──
   Full-width; el texto va a la izquierda, sobre la zona clara de la imagen. */
.page-head-servicios {
    max-width: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    /* La imagen de fondo la pone .servicios-fondo (continua). El header solo
       reserva la zona clara superior de esa imagen. */
    min-height: clamp(520px, 72vh, 880px);
    background: none;
}

/* ── Fondo continuo de la página de servicios ──
   Una sola imagen (clara arriba → negra abajo) que cubre el header y las
   3 cajas. Se estira para que la zona clara caiga en el header y la negra
   en las cajas. La sección CTA queda fuera (tiene su propia imagen). */
.servicios-fondo {
    background-image: url('/assets/img/servicios/servicios.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}
/* Neblina negra sobre la zona de las 3 cajas (solo aquí, no el header):
   atenúa el fondo para que el texto resalte. Fade suave en la parte de
   arriba para que la transición desde el header no marque una línea dura. */
.serv-grupos-wrap { position: relative; }
.serv-grupos-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0)    0%,
        rgba(0, 0, 0, 0.48) 14%,
        rgba(0, 0, 0, 0.55) 100%);
}
.serv-grupos-wrap > .serv-grupo { position: relative; z-index: 1; }

/* Las 3 cajas caen sobre la zona oscura → texto e iconos en claro */
.servicios-fondo .serv-grupo-kanji { color: var(--fluo-deep); }
.servicios-fondo .serv-grupo-head h2 { color: var(--paper); }
.servicios-fondo .serv-grupo-head p { color: var(--mist); }
.servicios-fondo .serv-card { border-top-color: rgba(247, 240, 230, 0.22); }
.servicios-fondo .serv-card h3 { color: var(--paper); }
.servicios-fondo .serv-card-num { color: var(--sakura); }
.servicios-fondo .serv-card-go { color: var(--mist); }
.servicios-fondo .serv-card:hover { opacity: 1; }
.servicios-fondo .serv-card:hover h3 { color: var(--fluo); }
.servicios-fondo .serv-card:hover .serv-card-num { color: var(--fluo); }
.page-head-servicios .page-head-inner {
    max-width: var(--maxw);
    width: 100%;
    margin: 0 auto;
    /* padding-top extra para que el texto no quede bajo el header fijo */
    padding: clamp(100px, 12vw, 140px) clamp(20px, 4vw, 48px) clamp(40px, 6vw, 64px);
    /* desplazamiento ligero: a la derecha, bajado un poco */
    transform: translate(48px, 16px);
}
.page-head-servicios h1 { font-size: clamp(2.6rem, 7vw, 5rem); margin: 0 0 12px; font-weight: 500; }
.page-head-servicios .page-sub { max-width: 42ch; }

/* ════════════ SERVICIOS (nuevo) — header con vídeo ════════════ */
.serv-hero {
    position: relative;
    aspect-ratio: 1620 / 1080;   /* mismo ratio que el vídeo → se ve entero, sin recortar */
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--paper);    /* fallback mientras carga el vídeo */
}
.serv-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.serv-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
}
.serv-hero-inner h1 {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 7vw, 5rem);
    color: var(--ink);
    font-weight: 500;
    margin: 0 0 14px;
    line-height: 1.05;
    text-shadow: 0 1px 18px rgba(247, 240, 230, 0.6);
}
.serv-hero-inner .page-sub { color: var(--ink-soft); max-width: 42ch; text-shadow: 0 1px 14px rgba(247, 240, 230, 0.6); }

/* ════════════ SERVICIOS — fondo bloqueado + scroll lateral ════════════
   .serv-pin es alto (var(--panels) × 100vh); su hijo sticky bloquea el fondo
   y el track se desplaza en horizontal (lo mueve el JS según el scroll). */
.serv-pin {
    position: relative;
    height: calc(var(--panels, 3) * 200vh);   /* alto = velocidad del scroll lateral */
}
.serv-pin-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: url('../img/servicios/fondo-servicios2.webp') center/cover no-repeat;
}
.serv-pin-track {
    position: relative;
    height: 100%;
    width: 100%;
}
/* Cada bloque vive en la mitad derecha: entra desde la derecha y se desvanece
   hacia el centro (el JS ajusta transform y opacity según el scroll). */
.serv-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: clamp(380px, 46vw, 720px);
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 clamp(32px, 5vw, 80px);
    will-change: transform, opacity;
}
.serv-panel-inner { width: 100%; max-width: 480px; }
.serv-panel .serv-grupo-kanji { color: var(--fluo-deep); font-size: clamp(1.4rem, 2.6vw, 2rem); }
.serv-panel h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: var(--ink);
    font-weight: 500;
    margin: 6px 0 4px;
}
.serv-panel-sub { color: var(--ink-soft); font-size: 1.06rem; margin-bottom: 18px; }
.serv-panel-lista { list-style: none; margin: 0; padding: 0; }
.serv-panel-lista li { border-top: 1px solid var(--line-strong); }
.serv-panel-lista a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    color: var(--ink);
    font-size: 1.06rem;
    transition: color var(--tr-base), padding-left var(--tr-base);
}
.serv-panel-lista a:hover { color: var(--fluo-deep); padding-left: 6px; }
.serv-panel-num { font-family: var(--font-kanji); color: var(--ink-soft); font-size: 1.06rem; }
.serv-panel-nombre { flex: 1; }
.serv-panel-arrow { opacity: 0; transition: opacity var(--tr-base); }
.serv-panel-lista a:hover .serv-panel-arrow { opacity: 1; }

/* Bloques apilados en vertical: sin movimiento reducido... y en móvil y tablet.
   El scroll lateral necesita una pantalla ancha; por debajo de 1024px los
   paneles se quedaban FUERA de la pantalla y la página salía en blanco. */
@media (prefers-reduced-motion: reduce), (max-width: 1024px) {
    .serv-pin { height: auto; }
    .serv-pin-sticky { position: static; height: auto; overflow: visible; }
    .serv-pin-track { height: auto; }
    .serv-panel {
        position: relative;
        width: auto;
        height: auto;
        opacity: 1 !important;
        transform: none !important;
        padding: clamp(36px, 8vw, 64px) clamp(20px, 5vw, 40px);
    }
    .serv-panel-inner { max-width: none; }
    .serv-panel + .serv-panel { border-top: 1px solid var(--line-strong); }
    /* El primero arranca pegado arriba y se lo comía la cabecera flotante */
    .serv-panel:first-child { padding-top: clamp(110px, 22vw, 150px); }
    /* Sin hover en táctil: la flecha se ve siempre */
    .serv-panel-arrow { opacity: 0.5; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 1024px) {
    .serv-panel { min-height: 0; }
}

/* ── Blog listado ── */
.blog-list {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 32px clamp(20px, 4vw, 48px) clamp(80px, 11vw, 128px);
}
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 32px;
}
.blog-card {
    background: transparent;
    transition: opacity var(--tr-base);
}
.blog-card:hover { opacity: 0.88; }
.blog-card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-deep); margin-bottom: 16px; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tr-slow); }
.blog-card:hover .blog-card-media img { transform: scale(1.03); }
.blog-card-body { padding: 0 4px; }
.blog-card-cat { font-size: 0.86rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.blog-card-body h2 { font-size: 1.5rem; margin: 8px 0 12px; font-weight: 500; }
.blog-card-body p { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
.blog-card-meta { display: flex; gap: 16px; margin-top: 16px; font-size: 0.92rem; color: var(--charcoal); }
.vacio { text-align: center; color: var(--ink-soft); padding: 64px 16px; font-size: 1.05rem; }

/* ── Artículo ── */
.post {
    /* 900px por petición suya: con 720 y con 800 le seguía pareciendo una tira
       estrecha en una pantalla ancha.
       ⚠️ Ensanchar a secas empeora la lectura: la línea se hace larga y el ojo
       se pierde al volver al principio. Por eso VA JUNTO con subir la letra del
       cuerpo (ver `.post-body p`): al crecer el texto, la línea sigue teniendo
       un número de caracteres razonable aunque la caja sea más ancha.
       Si algún día se toca este ancho, tocar también ese tamaño. */
    max-width: 900px;
    margin: 0 auto;
    /* El hueco de arriba era de hasta 176px: media pantalla en blanco antes de
       empezar el titular. Con 112 sigue despejando la cabecera flotante. */
    padding: clamp(104px, 11vw, 124px) clamp(20px, 4vw, 32px) 64px;
}
.post-volver { color: var(--ink-soft); font-size: 1.01rem; font-weight: 500; transition: color var(--tr-fast); }
.post-volver:hover { color: var(--ink); }
.post-cat { display: inline-block; margin: 24px 0 8px; font-size: 0.86rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.post-head h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); margin: 8px 0 24px; font-weight: 500; }
.post-meta { display: flex; gap: 20px; flex-wrap: wrap; color: var(--charcoal); font-size: 1.03rem; }
.post-hero-img { margin: 40px 0; }
.post-hero-img img { width: 100%; }

.post-tldr {
    margin: 40px 0;
    padding: 28px 32px;
    background: var(--paper-deep);
    border-left: 2px solid var(--fluo);
}
.post-tldr h2 {
    font-family: var(--font-body);
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 14px;
    font-weight: 500;
}
.post-tldr ul { list-style: none; }
.post-tldr li { padding: 6px 0 6px 24px; position: relative; color: var(--ink); }
.post-tldr li::before {
    content: '';
    position: absolute;
    left: 0; top: 14px;
    width: 14px; height: 1px;
    background: var(--fluo-deep);
}

.post-body { margin-top: 40px; }
.post-body h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: 48px 0 16px; font-weight: 500; color: var(--ink); }
.post-body h3 { font-size: 1.35rem; margin: 32px 0 12px; font-weight: 500; color: var(--ink); }
.post-body h4 { font-size: 1.1rem; margin: 24px 0 8px; font-weight: 500; }
.post-body p { margin-bottom: 22px; color: var(--ink-soft); font-size: 1.16rem; line-height: 1.75; }
.post-body ul, .post-body ol { margin: 0 0 20px 24px; }
.post-body li { margin-bottom: 9px; color: var(--ink-soft); font-size: 1.16rem; line-height: 1.7; }
.post-body a { color: var(--fluo-deep); text-decoration: underline; text-underline-offset: 3px; }
.post-body code { background: var(--paper-deep); padding: 2px 7px; border-radius: 3px; font-size: 1.01em; }
.post-body blockquote {
    border-left: 2px solid var(--ink);
    padding: 8px 0 8px 24px;
    margin: 28px 0;
    font-family: var(--font-display);
    font-style: normal;
    font-size: 1.3rem;
    color: var(--ink);
}
.tabla-wrap { overflow-x: auto; margin: 28px 0; }
.post-body table { width: 100%; border-collapse: collapse; font-size: 1.06rem; }
.post-body th, .post-body td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.post-body th { font-family: var(--font-body); font-size: 0.87rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); font-weight: 600; }

.post-faq { margin: 56px 0; }
.post-faq h2 { font-size: 1.8rem; margin-bottom: 20px; font-weight: 500; }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item summary {
    cursor: pointer;
    padding: 20px 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    list-style: none;
    position: relative;
    padding-right: 32px;
    color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 0; top: 16px;
    color: var(--ink-soft);
    font-size: 1.4rem;
    font-family: var(--font-body);
    font-weight: 300;
    transition: transform var(--tr-base);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item > div { padding-bottom: 20px; color: var(--ink-soft); }

.post-foot {
    margin-top: 64px;
    padding: 56px 32px;
    text-align: center;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
}
.post-foot h2 { font-size: 2rem; font-weight: 500; }
.post-foot p { color: var(--ink-soft); margin: 12px 0 28px; font-size: 1.05rem; }

/* ── 404 ── */
.error-page {
    min-height: 75vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 140px 24px 64px;
    position: relative;
    overflow: hidden;
}
.error-kanji {
    font-family: var(--font-kanji);
    font-size: clamp(10rem, 26vw, 22rem);
    color: rgba(17, 17, 17, 0.04);
    position: absolute;
    z-index: 0;
    font-weight: 400;
}
.error-page h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin: 12px 0; position: relative; font-weight: 500; }
.error-page > p { color: var(--ink-soft); margin-bottom: 32px; position: relative; }
.error-page .hero-cta { position: relative; }

/* ═══════════ SOBRE NOSOTROS — bloques oscuros ═══════════ */
.sobre-oscuro {
    background-color: #020202;
    color: var(--paper);
}

/* ── Menú en blanco (solo en páginas con body.tema-oscuro) ── */
.tema-oscuro .site-header .logo-text { color: var(--paper); }
.tema-oscuro .site-header .nav a { color: rgba(247, 240, 230, 0.82); }
.tema-oscuro .site-header .nav a:hover { color: var(--paper); }
.tema-oscuro .site-header .nav-toggle { border-color: rgba(247, 240, 230, 0.7); }
.tema-oscuro .site-header .nav-toggle span { background: var(--paper); }

/* ── Menú adaptativo: blanco cuando el header está sobre una sección marcada
   con [data-header-theme="dark"]. Lo aplica el JS añadiendo .theme-dark. ── */
.site-header .logo-text,
.site-header .nav a,
.site-header .nav-toggle,
.site-header .nav-toggle span {
    transition: color .3s ease, background-color .3s ease, border-color .3s ease,
                text-shadow .3s ease;
}
.site-header.theme-dark .logo-text {
    color: var(--paper);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
/* Mismo despegue del fondo que el texto, pero en imagen no vale text-shadow. */
.site-header.theme-dark .logo-marca,
.tema-oscuro .site-header .logo-marca {
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.35));
}
.site-header.theme-dark .nav a {
    color: rgba(247, 240, 230, 0.92);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.site-header.theme-dark .nav a:hover { color: var(--paper); }
.site-header.theme-dark .nav-toggle { border-color: rgba(247, 240, 230, 0.7); }
.site-header.theme-dark .nav-toggle span { background: var(--paper); }

/* ──────── Mega-menú de Servicios (global, versión "cristal") ────────
   Aparece al hacer hover sobre "Servicios" del nav en cualquier página.
   Dos columnas: categorías (izq) y lista (der). Panel translúcido con blur. */
.nav-item-mega { position: relative; display: inline-block; }
.nav-item-mega > a { display: inline-block; }
.nav-item-mega .mega {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    display: flex;
    background: rgba(252, 248, 242, 0.66);     /* se intuye el fondo, difuminado */
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 14px;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.14);
    padding: 8px 0;
    min-width: 540px;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.nav-item-mega .mega::before {
    /* "puente" invisible entre el link Servicios y el dropdown para que el
       hover no se pierda al mover el ratón a través del gap */
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}
.nav-item-mega:hover .mega,
.nav-item-mega:focus-within .mega {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
/* Mientras el header está auto-oculto, el mega no debe quedarse colgando */
.site-header.is-hidden .mega { opacity: 0 !important; pointer-events: none !important; }

.mega-cats {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    border-right: 1px solid rgba(17, 17, 17, 0.08);
    min-width: 210px;
}
.mega-cat {
    padding: 10px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--ink);
    font-size: 17.5px;
    cursor: default;
    transition: background-color .15s, color .15s;
}
.mega-cat:hover,
.mega-cat.is-active {
    background: rgba(255, 255, 255, 0.45);
    color: var(--fluo-deep);
}
.mega-cat .mega-arrow { color: var(--ink-soft); font-size: 18px; line-height: 1; }
.mega-cat.is-active .mega-arrow { color: var(--fluo); }

.mega-servs { padding: 8px 0; flex: 1; }
.mega-servs ul { list-style: none; margin: 0; padding: 0; display: none; }
.mega-servs ul.is-active { display: block; }
.mega-servs li a {
    display: block;
    padding: 8px 18px;
    color: var(--ink);
    font-size: 17.5px;
    text-decoration: none;
    transition: color .15s, background-color .15s;
}
.mega-servs li a:hover { color: var(--fluo-deep); background: rgba(255, 255, 255, 0.45); }
.mega-servs li a.is-visited { color: var(--fluo-deep); }

/* Override duro: si el header está en theme-dark (banner oscuro detrás), el
   mega-menú sigue siendo fondo blanco con texto oscuro — no debe heredar el
   blanco del nav. También sin text-shadow para que se lea limpio. */
.site-header.theme-dark .mega-cat,
.site-header.theme-dark .mega-cat span,
.site-header.theme-dark .mega-servs li a {
    color: var(--ink);
    text-shadow: none;
}
.site-header.theme-dark .mega-cat.is-active,
.site-header.theme-dark .mega-cat:hover,
.site-header.theme-dark .mega-servs li a:hover,
.site-header.theme-dark .mega-servs li a.is-visited {
    color: var(--fluo-deep);
}

/* ──────── Servicios visitados en el hub /servicios (color rosa) ──────── */
.serv-panel-lista a.is-visited { color: var(--fluo-deep); }
.serv-panel-lista a.is-visited .serv-panel-num { color: var(--fluo); }
.serv-panel-lista a.is-visited .serv-panel-arrow { opacity: 1; }

/* Hero — "pin": el vídeo de fondo queda bloqueado a pantalla completa mientras
   se hace scroll. Primero "Quiénes somos" + "La sabiduría del ninja"; al avanzar
   suben y desaparecen juntas y aparece la subfrase. */
.sobre-hero {
    position: relative;
    min-height: 180vh;          /* pista de scroll para el pin (~80vh de recorrido) */
}
.sobre-hero-sticky {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-image: url('/assets/img/sobre-nosotros/1sobrenosotros.webp');  /* fallback si el vídeo no carga */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.sobre-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.sobre-hero-inner { position: relative; z-index: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; text-align: left; padding: 0 clamp(20px, 4vw, 48px); }
.sobre-hero-inner .sobre-hero-sub { max-width: 44ch; margin-left: 0; }

/* Intro (eyebrow + h1): visibles al cargar; al revelar la subfrase suben y desaparecen juntas */
html.js .sobre-hero-intro {
    transition: opacity .6s ease, transform .6s ease;
}
html.js .sobre-hero.sub-visible .sobre-hero-intro {
    opacity: 0;
    transform: translateY(-48px);
    pointer-events: none;
}

/* La subfrase del hero aparece al hacer scroll (la controla el JS con .sub-visible) */
html.js .sobre-hero .sobre-hero-sub {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease, transform .7s ease;
}
html.js .sobre-hero.sub-visible .sobre-hero-sub { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html.js .sobre-hero .sobre-hero-sub { opacity: 1; transform: none; }
}

/* ── Por qué ninja + fluorescente: fondo 2.1 FIJO (sticky); las cajas scrollean ── */
.sobre-pin { position: relative; }
.sobre-pin-bg {
    position: sticky;
    top: 0;
    height: 100vh;
    background-color: #020202;
    background-image: url('/assets/img/sobre-nosotros/2.1sobrenosotros.webp');
    background-size: 100% auto;        /* ancho completo, altura natural — no amplía */
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}
.sobre-pin-content {
    position: relative;
    z-index: 1;
    margin-top: -100vh;          /* el texto arranca sobre el fondo fijo */
}
.sobre-pin-caja {
    min-height: 100vh;           /* cada caja ocupa una pantalla */
    display: flex;
    align-items: center;
    justify-content: flex-end;   /* texto a la derecha (posición de "por qué ninja") */
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
}
.sobre-pin-caja .sobre-texto { max-width: 42ch; }

/* Equipo: mismo efecto pin que "por qué ninja", con fondo 2.2 y una caja por persona.
   Las cajas van centradas en la página (no a la derecha como "por qué ninja"). */
.sobre-pin--equipo .sobre-pin-bg {
    background-image: url('/assets/img/sobre-nosotros/2.2sobrenosotros.webp');
}
.sobre-pin--equipo .sobre-pin-caja {
    justify-content: center;
    max-width: none;        /* a lo ancho del viewport para colocar la foto sobre las ramas */
    position: relative;
}

/* Foto-ficha de cada persona: flota descolocada sobre las ramas de la izquierda.
   Va dentro de la caja (scrollea con ella), así cambia al pasar de una persona a otra. */
.ficha-foto {
    position: absolute;
    top: 50%;
    width: clamp(190px, 19vw, 300px);
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 18px 42px rgba(0, 0, 0, 0.55));
}
/* Cada ficha en una posición e inclinación distinta → efecto "volando" al scrollear */
.sobre-pin--equipo .sobre-pin-caja:nth-child(1) .ficha-foto { left: 4vw;  transform: translateY(-62%) rotate(-7deg); }
.sobre-pin--equipo .sobre-pin-caja:nth-child(2) .ficha-foto { left: 11vw; transform: translateY(-36%) rotate(6deg); }
.sobre-pin--equipo .sobre-pin-caja:nth-child(3) .ficha-foto { left: 3vw;  transform: translateY(-50%) rotate(-10deg); }
.sobre-pin--equipo .sobre-pin-caja:nth-child(4) .ficha-foto { left: 12vw; transform: translateY(-66%) rotate(8deg); }

@media (max-width: 980px) {
    .ficha-foto { display: none; }   /* en pantallas estrechas se solaparía con el texto */
}

/* Intro "Conoce al equipo": centrado, aparece al entrar y se va hacia arriba
   (mismo tipo de efecto que el hero). Va entre "por qué ninja" y las personas. */
.sobre-equipo-intro { position: relative; min-height: 250vh; }
.sobre-equipo-intro-inner {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    padding: 0 clamp(20px, 4vw, 48px);
}
.sobre-equipo-intro-kanji {
    font-family: var(--font-kanji);
    color: var(--fluo);
    font-size: 1.6rem;
}
.sobre-equipo-intro-inner h2 {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6vw, 4.4rem);
    color: var(--paper);
    font-weight: 500;
}
html.js .sobre-equipo-intro-inner {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s ease, transform .7s ease;
}
html.js .sobre-equipo-intro.intro-in .sobre-equipo-intro-inner { opacity: 1; transform: none; }
html.js .sobre-equipo-intro.intro-out .sobre-equipo-intro-inner { opacity: 0; transform: translateY(-48px); }
@media (prefers-reduced-motion: reduce) {
    html.js .sobre-equipo-intro-inner { opacity: 1; transform: none; }
}
.sobre-pin-caja .equipo-rol {
    color: var(--fluo);
    font-size: 1.06rem;
    letter-spacing: 0.03em;
    margin-bottom: 16px;
}

/* Cómo trabajamos: fondo 2.2, scroll normal (aquí se libera el fondo fijo) */
.sobre-trabajo {
    background-color: #020202;
    background-image: url('/assets/img/sobre-nosotros/2.2sobrenosotros.webp');
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    padding: clamp(80px, 14vw, 200px) clamp(20px, 4vw, 48px);
}
.sobre-trabajo .sobre-texto {
    max-width: 42ch;
    margin-left: auto;     /* empuja la caja al extremo derecho de la sección */
    margin-right: 0;
    text-align: right;
}

.sobre-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.87rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fluo);          /* rosa fluo #FF47C8 */
    font-weight: 500;
}
.sobre-eyebrow-kanji { font-family: var(--font-kanji); font-size: 1.1rem; }
.sobre-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 7vw, 5rem);
    color: var(--paper);
    font-weight: 500;
    margin: 12px 0;
    line-height: 1.05;
}
.sobre-hero-sub {
    color: var(--mist);
    font-size: 1.15rem;
    line-height: 1.65;
    max-width: 44ch;
}

.sobre-texto h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: var(--paper);
    font-weight: 500;
    margin-bottom: 16px;
}
.sobre-texto h2 .neon { color: var(--fluo); font-style: normal; }
.sobre-texto p { color: var(--mist); font-size: 1.12rem; line-height: 1.7; margin-bottom: 14px; }

/* Claim final */
.sobre-claim {
    text-align: center;
    padding: clamp(40px, 7vw, 90px) 20px clamp(8px, 2vw, 24px);
}
.sobre-claim-kanji {
    font-family: var(--font-kanji);
    color: var(--sakura);
    font-size: 1.4rem;
    display: block;
    margin-bottom: 14px;
}
.sobre-claim p {
    color: var(--mist);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 0.92rem;
}

@media (max-width: 760px) {
    .sobre-pin-caja { justify-content: center; }
    .sobre-pin-caja .sobre-texto,
    .sobre-trabajo .sobre-texto { max-width: 100%; text-align: left; }
}

/* ═══════════ SOBRE NOSOTROS ═══════════ */
.prosa {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px clamp(20px, 4vw, 32px) clamp(64px, 9vw, 112px);
}
.prosa-grande {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4.5vw, 3.2rem);
    line-height: 1.25;
    margin: 32px 0 48px;
    color: var(--ink);
    font-weight: 500;
}
.prosa-grande s { color: var(--mist); text-decoration-color: var(--fluo); text-decoration-thickness: 2px; }
.prosa-bloque { margin-bottom: 40px; }
.prosa-bloque h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: 16px; font-weight: 500; }
.prosa-bloque p { color: var(--ink-soft); font-size: 1.15rem; margin-bottom: 16px; line-height: 1.7; }
.prosa-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.prosa-cierre {
    font-family: var(--font-kanji);
    font-size: 1.5rem;
    color: var(--ink);
    text-align: center;
    margin-top: 56px;
    padding-top: 48px;
    border-top: 1px solid var(--line);
    font-weight: 400;
}
.prosa-cierre span {
    display: block;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-style: normal;
    color: var(--ink-soft);
    margin-top: 12px;
    font-weight: 400;
}

/* ── Bloque "pin": fondo fijo mientras el texto sube (pin largo) ──
   El fondo queda pegado (sticky) durante todo el tramo; el contenido
   se superpone con margin-top negativo y sube al hacer scroll.
   Para una imagen fija: dale background-image a .nosotros-pin-bg. */
.nosotros-pin { position: relative; }
.nosotros-pin-bg {
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 0;
    /* DE MOMENTO papel; sustituir por background-image cuando haya imagen */
    background: var(--paper-deep);
}
.nosotros-pin-content {
    position: relative;
    z-index: 1;
    margin-top: -100vh;     /* el texto arranca sobre el fondo fijo */
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 clamp(20px, 4vw, 32px);
}
.nosotros-pin-card {
    min-height: 88vh;       /* pin largo: cada bloque ocupa casi una pantalla */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.nosotros-pin-card h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 16px; font-weight: 500; }
.nosotros-pin-card p { color: var(--ink-soft); font-size: 1.15rem; line-height: 1.7; margin-bottom: 16px; }
.nosotros-pin-cierre { text-align: center; }
.nosotros-pin-cierre .prosa-cierre { border: 0; padding: 0; margin: 0; }

/* En móvil aligeramos el pin para no obligar a un scroll eterno */
@media (max-width: 720px) {
    .nosotros-pin-card { min-height: 70vh; }
}

/* ── Equipo dentro de "Sobre nosotros" (bios largas, sin fotos) ── */
.nosotros-equipo-head {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 48px) clamp(24px, 4vw, 40px);
    text-align: center;
}
.nosotros-equipo-head .seccion-num {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    margin: 0 auto 8px;
}
.nosotros-equipo-head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 500; }
.nosotros-equipo-head p {
    color: var(--ink-soft);
    font-size: 1.12rem;
    line-height: 1.7;
    max-width: 60ch;
    margin: 16px auto 0;
}
.nosotros-equipo {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 16px clamp(20px, 4vw, 48px) clamp(64px, 9vw, 112px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 56px);
}
.nosotros-miembro {
    border-top: 1px solid var(--line-strong);
    padding-top: 24px;
}
.nosotros-miembro-inicial {
    display: block;
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 500;
    color: var(--mist);
    line-height: 1;
    margin-bottom: 12px;
}
.nosotros-miembro h3 { font-size: 1.5rem; font-weight: 500; color: var(--ink); }
.nosotros-miembro-rol {
    font-size: 0.87rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fluo-deep);
    margin: 6px 0 14px;
}
.nosotros-miembro-bio { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.65; }

@media (max-width: 720px) {
    .nosotros-equipo { grid-template-columns: 1fr; }
}

/* ═══════════ SERVICIOS — HUB ═══════════ */
.serv-grupo {
    max-width: var(--maxw);
    margin: 0 auto;
    /* más aire entre secciones (la imagen nueva es más larga y deja más negro) */
    padding: clamp(44px, 7vw, 96px) clamp(20px, 4vw, 48px);
}
.serv-grupo-head { margin-bottom: 32px; text-align: right; }
/* Visibilidad: cabecera a la izquierda (IA y Producto quedan a la derecha) */
.serv-grupo--visibilidad .serv-grupo-head { text-align: left; }
.serv-grupo-kanji {
    font-family: var(--font-kanji);
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    color: var(--mist);
    display: block;
    font-weight: 400;
}
.serv-grupo-head h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 8px 0 8px; font-weight: 500; }
.serv-grupo-head p { color: var(--ink-soft); }
.serv-grupo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 32px;
}
.serv-card {
    background: transparent;
    padding: 28px 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--line-strong);
    transition: opacity var(--tr-base);
}
.serv-card:hover { opacity: 0.7; }
.serv-card-num {
    font-family: var(--font-kanji);
    font-size: 1.6rem;
    color: var(--mist);
    font-weight: 400;
}
.serv-card:hover .serv-card-num { color: var(--fluo-deep); }
.serv-card h3 { font-size: 1.35rem; flex: 1; font-weight: 500; margin-top: 8px; }
.serv-card-go { font-size: 0.99rem; color: var(--ink-soft); margin-top: 16px; }

/* ── Carrusel de servicios: una sola fila que se desplaza sola, en bucle ── */
.serv-carrusel {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
    overflow: hidden;
    /* difuminado en los bordes para que las tarjetas entren/salgan suaves */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.serv-carrusel-track {
    display: flex;
    width: max-content;
    animation: serv-scroll 38s linear infinite;
}
.serv-carrusel:hover .serv-carrusel-track { animation-play-state: paused; }
.serv-carrusel .serv-card {
    width: clamp(230px, 22vw, 290px);
    flex-shrink: 0;
    margin-right: clamp(20px, 3vw, 40px);
}
@keyframes serv-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }   /* un set completo (hay 2 idénticos) */
}
@media (prefers-reduced-motion: reduce) {
    .serv-carrusel-track { animation: none; flex-wrap: wrap; }
}

/* ═══════════ SERVICIO — DETALLE ═══════════ */
.servicio-hero {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(140px, 17vw, 176px) clamp(20px, 4vw, 48px) 32px;
    text-align: center;
    position: relative;
}
.servicio-hero .post-volver { display: inline-block; margin-bottom: 24px; }
.servicio-estrella-tag {
    display: inline-block;
    font-size: 0.87rem;
    letter-spacing: 0.06em;
    color: var(--fluo-deep);
    border: 1px solid var(--fluo);
    border-radius: 999px;
    padding: 5px 16px;
    margin-bottom: 20px;
    background: var(--paper);
}
.servicio-hero h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 500; }
.servicio-hero-claim {
    font-family: var(--font-display);
    font-style: normal;
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    color: var(--ink-soft);
    max-width: 38ch;
    margin: 20px auto 32px;
    line-height: 1.4;
}
.es-estrella .servicio-hero h1::after {
    content: '';
    display: block;
    width: 48px;
    height: 2px;
    background: var(--fluo);
    margin: 16px auto 0;
    border-radius: 999px;
}

/* ── Banner de cabecera del servicio: imagen 2:1 con texto centrado encima ──
   Velo crema (color papel) ~45% para suavizar la imagen y que el texto en
   tinta se lea sobre cualquier foto. Ajusta el alpha de --servicio-veil
   para subir o bajar la intensidad. */
:root { --servicio-veil: rgba(247, 240, 230, 0.45); }

.servicio-hero-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;
    overflow: hidden;
}
.servicio-hero-banner > .servicio-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    aspect-ratio: auto; /* anula la regla global si la hubiera */
}
.servicio-hero-veil {
    position: absolute;
    inset: 0;
    background: var(--servicio-veil);
    pointer-events: none;
    z-index: 1;
}
.servicio-hero-banner > .servicio-hero-inner {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 48px);
    color: var(--ink);
}
.servicio-hero-banner .post-volver {
    color: var(--ink-soft);
    margin-bottom: 18px;
    text-shadow: 0 1px 8px rgba(247, 240, 230, 0.6);
}
.servicio-hero-banner .post-volver:hover { color: var(--ink); }
.servicio-hero-banner h1 {
    color: var(--ink);
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    font-weight: 500;
    margin: 0;
    text-shadow: 0 1px 14px rgba(247, 240, 230, 0.7);
}
.servicio-hero-banner .servicio-hero-claim {
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    max-width: 38ch;
    margin: 18px auto 28px;
    line-height: 1.45;
    text-shadow: 0 1px 10px rgba(247, 240, 230, 0.65);
}
.servicio-hero-banner .hero-cta { margin-top: 4px; }
/* Cascada del header banner: H1 → claim → CTA */
.servicio-hero-banner h1.reveal              { transition-delay: 0.15s; }
.servicio-hero-banner .servicio-hero-claim.reveal { transition-delay: 0.45s; }
.servicio-hero-banner .hero-cta.reveal       { transition-delay: 0.75s; }
.servicio-hero-banner .servicio-estrella-tag {
    background: rgba(247, 240, 230, 0.92);
    color: var(--fluo-deep);
    border-color: var(--fluo);
    margin-bottom: 18px;
}

.servicio-seccion {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(40px, 6vw, 64px) clamp(20px, 4vw, 48px);
    border-bottom: 1px solid var(--line);
}
/* Limitar el ancho de bloques de texto largo dentro de servicio-seccion para que sigan legibles */
.servicio-seccion .servicio-parrafo,
.servicio-seccion .servicio-beneficios,
.servicio-seccion > .reveal:not(.proceso-grid):not(.caso-kpis):not(.servicio-rel):not(.proceso-bg),
.servicio-seccion .faq-item {
    max-width: 78ch;
}
.servicio-seccion:last-of-type { border-bottom: none; }

/* ──────── Bloque combinado: ¿Qué es? + compañera con bg pinned + crossfade ────────
   La imagen sumi-e queda fija como fondo (cover, llena ancho completo con
   recorte mínimo). Los párrafos hacen CROSSFADE en la misma posición: cuando
   aparece el 2º, el 1º desaparece. Scroll corto, sin recorridos largos. */
.servicio-doble-bg {
    background-image: url('../img/servicios/paginas/que_es-que_tellevas.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--paper);
    padding: clamp(70px, 9vw, 130px) clamp(20px, 4vw, 60px);
    border-bottom: 1px solid var(--line);
}
.servicio-doble-bg-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: clamp(40px, 6vw, 100px);
    row-gap: clamp(40px, 7vw, 110px);
}
.servicio-doble-uno {
    grid-column: 1;
    grid-row: 1;
    max-width: 42ch;
}
.servicio-doble-dos {
    grid-column: 2;
    grid-row: 2;
    max-width: 42ch;
    justify-self: start;
}
.servicio-doble-uno h2,
.servicio-doble-dos h2 { margin: 0 0 1.4rem; }
.servicio-doble-bg h2 {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 500;
    color: var(--ink);
    margin: 0;
}
.servicio-doble-bg h2::after {
    content: '';
    display: block;
    width: 46px;
    height: 2px;
    background: var(--fluo);
    margin-top: 12px;
    border-radius: 999px;
}
.servicio-doble-bg .servicio-parrafo {
    font-size: 1rem;
    color: var(--ink-soft);
    line-height: 1.65;
    margin: 18px 0 0;
}
/* Bullets con punto rosa (estilo de la referencia visual) */
.servicio-doble-bg .servicio-beneficios { margin-top: 18px; }
.servicio-doble-bg .servicio-beneficios li {
    padding: 10px 0 10px 22px;
    border-bottom: none;
    font-size: 1rem;
    color: var(--ink-soft);
    line-height: 1.5;
}
.servicio-doble-bg .servicio-beneficios li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fluo-deep);
}
/* En móvil las dos subsecciones se apilan en una columna. */
@media (max-width: 760px) {
    .servicio-doble-bg-inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        row-gap: clamp(36px, 8vw, 60px);
    }
    .servicio-doble-uno,
    .servicio-doble-dos {
        grid-column: 1;
        grid-row: auto;
        max-width: 100%;
        justify-self: stretch;
    }
}

/* ──────── Cómo trabajamos con fondo (cuadrados numerados de la imagen) ──────── */
/* Sección padre con `--full` rompe el max-width para que el bg ocupe todo el ancho */
.servicio-seccion--full {
    max-width: none;
    padding: 0;
    border-bottom: none;
}

.proceso-bg {
    position: relative;
    width: 100%;
    aspect-ratio: 1672 / 619;          /* coincide con la imagen para no recortar */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--paper);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* Título + kanji dentro del fondo, arriba a la izquierda donde la imagen está
   vacía (la pagoda y los pétalos quedan en la zona inferior derecha). */
.proceso-bg-head {
    flex-shrink: 0;
    padding: clamp(28px, 4vw, 60px) clamp(20px, 4vw, 60px) 0;
    color: var(--paper);
    text-align: center;
}
.proceso-bg-head .seccion-num {
    color: rgba(247, 240, 230, 0.35);
    font-size: clamp(2rem, 4vw, 3.6rem);
    margin: 0;
    line-height: 1;
}
.proceso-bg-head h2 {
    color: var(--paper);
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.6vw, 2.8rem);
    font-weight: 500;
    margin: 6px 0 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}
.proceso-bg-list {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0 clamp(40px, 5vw, 90px) clamp(28px, 4vw, 60px);
    display: grid;
    grid-template-columns: repeat(var(--pasos, 4), 1fr);
    column-gap: clamp(20px, 3vw, 50px);
    align-content: center;       /* centra los pasos verticalmente */
    align-items: start;
}
.proceso-bg-paso {
    color: var(--paper);
    text-align: center;            /* contenido centrado bajo cada cuadrado */
    display: flex;
    flex-direction: column;
    align-items: center;
}
.proceso-bg-num {
    width: clamp(82px, 9vw, 135px);  /* más grande, antes 56-92 */
    height: auto;
    display: block;
    margin-bottom: 20px;
    background: transparent;
}
.proceso-bg-paso h3 {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.5vw, 1.45rem);
    font-weight: 500;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.25;
}
.proceso-bg-paso p {
    font-size: clamp(0.95rem, 1.1vw, 1.12rem);
    color: rgba(247, 240, 230, 0.92);   /* más visible */
    line-height: 1.5;
    margin: 0 auto;
    max-width: 28ch;
}

/* Cascada: cada paso aparece 0.15s después del anterior */
.proceso-bg-paso.reveal           { transition-delay: 0s; }
.proceso-bg-paso.reveal:nth-child(2) { transition-delay: 0.15s; }
.proceso-bg-paso.reveal:nth-child(3) { transition-delay: 0.30s; }
.proceso-bg-paso.reveal:nth-child(4) { transition-delay: 0.45s; }
.proceso-bg-paso.reveal:nth-child(5) { transition-delay: 0.60s; }

/* En móvil, la imagen de fondo no se muestra (queda pequeña y los textos
   serían ilegibles). Caemos a layout en columna sobre fondo papel. */
@media (max-width: 760px) {
    .servicio-seccion--full { padding: clamp(40px, 6vw, 64px) clamp(20px, 4vw, 48px); }
    .proceso-bg {
        aspect-ratio: auto;
        background-image: none !important;
        overflow: visible;
    }
    .proceso-bg-head { position: static; color: var(--ink); margin-bottom: 22px; }
    .proceso-bg-head .seccion-num { color: var(--fluo); font-size: 2rem; }
    .proceso-bg-head h2 { color: var(--ink); text-shadow: none; font-size: 1.6rem; }
    .proceso-bg-list {
        position: static;
        padding: 0;
        grid-template-columns: 1fr;
        row-gap: 28px;
    }
    .proceso-bg-paso { color: var(--ink); max-width: none; }
    .proceso-bg-num  { width: 60px; }
    .proceso-bg-paso h3 { color: var(--ink); font-size: 1.1rem; }
    .proceso-bg-paso p  { color: var(--ink-soft); font-size: 1.06rem; max-width: none; }
}
.servicio-seccion h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin-bottom: 16px; font-weight: 500; }
.servicio-parrafo { font-size: 1.15rem; color: var(--ink-soft); line-height: 1.7; }
.servicio-beneficios { list-style: none; }
.servicio-beneficios li {
    padding: 14px 0 14px 32px;
    border-bottom: 1px solid var(--line);
    position: relative;
    color: var(--ink-soft);
    font-size: 1.08rem;
    line-height: 1.55;
}
.servicio-beneficios li:last-child { border-bottom: none; }
.servicio-beneficios li::before {
    content: '';
    position: absolute; left: 0; top: 22px;
    width: 16px; height: 1px;
    background: var(--fluo-deep);
}
.proceso-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}
.proceso-paso {
    padding: 24px 4px;
    border-top: 1px solid var(--line-strong);
}
.proceso-num {
    font-family: var(--font-display);
    font-size: 2.4rem;
    color: var(--ink);
    display: block;
    line-height: 1;
    margin-bottom: 12px;
    font-weight: 500;
    font-style: normal;
}
.proceso-paso h3 { font-size: 1.2rem; margin-bottom: 8px; font-weight: 500; }
.proceso-paso p { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.55; }
.servicio-rel { display: flex; flex-wrap: wrap; gap: 12px; }
.servicio-rel a {
    border: 1px solid var(--line-strong);
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 1.03rem;
    color: var(--ink);
    transition: background var(--tr-base), color var(--tr-base), border-color var(--tr-base);
}
.servicio-rel a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ═══════════ EQUIPO ═══════════ */
.equipo-grid {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 16px clamp(20px, 4vw, 48px) clamp(64px, 9vw, 112px);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 32px;
}
.equipo-card {
    padding: 32px 0;
    text-align: center;
    border-top: 1px solid var(--line-strong);
}
.equipo-foto {
    width: 96px; height: 96px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--paper-deep);
    border: 1px solid var(--line-strong);
    display: grid;
    place-items: center;
}
.equipo-foto img { width: 100%; height: 100%; object-fit: cover; }
.equipo-inicial { font-family: var(--font-display); font-size: 2.4rem; color: var(--ink); font-weight: 500; }
.equipo-card h2 { font-size: 1.4rem; font-weight: 500; }
.equipo-rol { color: var(--ink-soft); font-size: 0.95rem; letter-spacing: 0.04em; margin: 8px 0 16px; }
.equipo-bio { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.6; }
.equipo-link { display: inline-block; margin-top: 16px; color: var(--fluo-deep); font-size: 0.99rem; font-weight: 500; }
.equipo-link:hover { color: var(--ink); }

/* ═══════════ CONTACTO ═══════════ */
.contacto {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 16px clamp(20px, 4vw, 48px) clamp(64px, 9vw, 112px);
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}
.contacto-form { padding: clamp(28px, 4vw, 40px) 0; border-top: 1px solid var(--line-strong); }
.contacto-form h2 { font-size: 1.7rem; margin-bottom: 24px; font-weight: 500; }
.form { display: grid; gap: 18px; }
.form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form label { display: grid; gap: 6px; font-size: 0.99rem; font-weight: 500; color: var(--ink); }
.form input, .form select, .form textarea {
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 14px 16px;
    background: var(--paper-soft);
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    color: var(--ink);
    width: 100%;
    transition: border-color var(--tr-fast), background var(--tr-fast);
}
.form input:focus, .form select:focus, .form textarea:focus {
    outline: none;
    border-color: var(--ink);
    background: var(--paper);
}
.form textarea { resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-nota { font-size: 0.92rem; color: var(--ink-soft); }
.form-error {
    background: rgba(217, 92, 85, 0.10);
    border: 1px solid var(--seal-red);
    color: var(--seal-red);
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 1.03rem;
    margin-bottom: 4px;
}
.contacto-ok { text-align: center; padding: 32px 0; }
.contacto-ok-kanji { font-family: var(--font-kanji); font-size: 4rem; color: var(--ink); display: block; font-weight: 400; }
.contacto-ok h2 { margin: 16px 0 8px; font-weight: 500; }
.contacto-ok p { color: var(--ink-soft); margin-bottom: 24px; }
.contacto-info { padding: clamp(28px, 4vw, 36px) 0; border-top: 1px solid var(--line-strong); }
.contacto-info h3 {
    font-family: var(--font-body);
    font-size: 0.92rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 20px;
    font-weight: 500;
}
.contacto-dato { margin-bottom: 18px; font-size: 1.06rem; color: var(--ink); }
.contacto-dato span { display: block; font-size: 0.86rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; }
.contacto-dato a { color: var(--fluo-deep); }
.contacto-dato a:hover { color: var(--ink); }

/* ═══════════ CASOS DE ÉXITO — mosaico 3×5 ═══════════ */
.casos-mosaico {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    width: 100%;
    margin: 0;
}
.caso-tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--paper-deep);
    transition: transform .45s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}
/* Sombra/gradiente solo en la parte inferior del tile, donde van los
   textos. Hace legibles título y subtítulo sin oscurecer la imagen. */
.caso-tile::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.55) 25%,
        rgba(0, 0, 0, 0.25) 60%,
        rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1;
    opacity: 1;
    transition: opacity .35s ease;
}
.caso-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
    transition: filter .5s ease;
}
.caso-tile:hover {
    transform: scale(1.05);
    z-index: 2;
}
.caso-tile:hover img {
    filter: grayscale(0);
}
.caso-tile--vacio {
    background: var(--paper-deep);
    cursor: default;
    pointer-events: none;
}
.caso-tile--vacio::after { display: none; }
/* Overlay título + subtítulo, anclado abajo-centro dentro del cuadrado.
   En reposo solo se ve el título. En hover el subtítulo aparece debajo
   y empuja ligeramente el título hacia arriba para hacerle hueco. */
.caso-tile-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 18px 22px;
    text-align: center;
    pointer-events: none;
    z-index: 2;
}
.caso-tile-title {
    color: #fff;
    font-family: var(--font-display, serif);
    font-size: clamp(1.25rem, 1.7vw, 1.6rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
    transform: translateY(0);
    transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.caso-tile-sub {
    color: rgba(255, 255, 255, 0.95);
    font-family: var(--font-display, serif);
    font-size: clamp(1.03rem, 1.2vw, 1.18rem);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.4;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65);
    max-width: 92%;
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    transform: translateY(6px);
    overflow: hidden;
    transition: opacity .4s ease, transform .4s ease,
                max-height .45s cubic-bezier(.2,.7,.2,1),
                margin-top .45s cubic-bezier(.2,.7,.2,1);
}
.caso-tile:hover .caso-tile-title { transform: translateY(-4px); }
.caso-tile:hover .caso-tile-sub {
    max-height: 80px;
    margin-top: 4px;
    opacity: 1;
    transform: translateY(0);
}

.caso { max-width: 820px; margin: 0 auto; padding-bottom: 64px; }
.caso-hero {
    padding: clamp(140px, 17vw, 176px) clamp(20px, 4vw, 32px) 32px;
    text-align: center;
    position: relative;
}
.caso-hero .post-volver { display: inline-block; margin-bottom: 24px; }
.caso-hero-cliente { display: block; font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.caso-hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); margin: 8px 0; font-weight: 500; }
.caso-hero-resumen { color: var(--ink-soft); font-size: 1.2rem; max-width: 44ch; margin: 16px auto 0; line-height: 1.55; }
.caso-img { margin: 32px clamp(20px, 4vw, 32px); }
.caso-img img { width: 100%; }
.caso-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 32px;
    margin: 40px clamp(20px, 4vw, 32px);
}
.caso-kpi { padding: 24px 16px; text-align: center; border-top: 2px solid var(--fluo); }
.caso-kpi-valor {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 500;
    color: var(--ink);
}
.caso-kpi-unidad { font-size: 0.86em; color: var(--ink-soft); }
.caso-kpi-label { display: block; font-size: 1.01rem; color: var(--ink-soft); margin-top: 6px; }
.caso-kpi-antes { display: block; font-size: 0.87rem; color: var(--charcoal); margin-top: 4px; }
.caso-cuerpo { padding: 16px clamp(20px, 4vw, 32px); }
.caso-seccion { margin: 40px 0; }
.caso-seccion h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin-bottom: 16px; font-weight: 500; }
.caso-seccion p { color: var(--ink-soft); margin-bottom: 16px; line-height: 1.7; }
.caso-testimonio {
    margin: 40px clamp(20px, 4vw, 32px);
    padding: 32px;
    border-left: 2px solid var(--ink);
}
.caso-testimonio p { font-family: var(--font-display); font-size: 1.4rem; font-style: normal; line-height: 1.5; color: var(--ink); }
.caso-testimonio cite { display: flex; align-items: center; gap: 14px; margin-top: 24px; font-style: normal; }
.caso-testimonio footer { margin-top: 20px; font-size: 1.06rem; color: var(--ink-soft); }
.caso-testimonio footer strong { color: var(--ink); font-weight: 500; }
.caso-testimonio footer span { color: var(--ink-soft); }
.caso-hero-claim {
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    max-width: 52ch;
    margin: 18px auto 0;
    line-height: 1.55;
}
.caso-tags {
    margin-top: 20px;
    font-size: 0.94rem;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
}
.caso-foto {
    margin: 32px clamp(20px, 4vw, 48px) 8px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.caso-foto img { width: 100%; height: auto; display: block; border-radius: 4px; }
.caso-testimonio cite img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.caso-testimonio cite strong { display: block; font-weight: 500; color: var(--ink); }
.caso-testimonio cite small { color: var(--ink-soft); }

/* ═══════════ GLOSARIO ═══════════ */
.glosario-list {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 16px clamp(20px, 4vw, 48px) clamp(64px, 9vw, 112px);
}
.glosario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}
.glosario-card {
    padding: 28px 4px;
    border-top: 1px solid var(--line-strong);
    transition: opacity var(--tr-base);
}
.glosario-card:hover { opacity: 0.7; }
.glosario-card h2 { font-size: 1.3rem; color: var(--ink); font-weight: 500; }
.glosario-card p { color: var(--ink-soft); font-size: 1.06rem; margin: 8px 0 14px; line-height: 1.55; }
.glosario-go { font-size: 0.96rem; color: var(--ink-soft); }

.termino { max-width: 720px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 32px) 64px; }
.termino-head { padding: clamp(140px, 17vw, 176px) 0 32px; }
.termino-head .post-volver { display: inline-block; margin-bottom: 20px; }
.termino-head h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); margin: 8px 0 16px; font-weight: 500; }
.termino-corta { font-size: 1.3rem; color: var(--ink); font-family: var(--font-display); font-style: normal; line-height: 1.45; }
.termino-cuerpo { margin: 32px 0; }
.termino-rel, .termino-otros { margin: 40px 0; padding-top: 32px; border-top: 1px solid var(--line); }
.termino-rel h2, .termino-otros h2 { font-size: 1.2rem; margin-bottom: 16px; font-weight: 500; }
.termino-otros-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.termino-otros-grid a {
    border: 1px solid var(--line-strong);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 1.01rem;
    color: var(--ink);
    transition: background var(--tr-base), color var(--tr-base), border-color var(--tr-base);
}
.termino-otros-grid a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.link-inline { color: var(--fluo-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ═══════════ ANIMACIONES DE SCROLL ═══════════ */
/* El estado oculto solo se aplica si JS está activo (html.js).
   Sin JS, el contenido se ve igualmente. */
html.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--tr-slow), transform var(--tr-slow);
}
html.js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; }
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 860px) {
    .nav, .nav-cta { display: none; }
    .nav-toggle { display: flex; }

    /* Menú móvil: panel colgando de la píldora, NO a pantalla completa.
       Ojo: la cabecera lleva `backdrop-filter`, y eso convierte al header en
       el marco de referencia de sus hijos `position: fixed`. Con `inset: 0`
       el panel se anclaba a la píldora y los enlaces salían encima del logo. */
    .site-header.menu-open .nav {
        display: flex;
        position: absolute;
        /* La cabecera es un grid: sin esto, el panel se mide contra su celda
           central (264px) en vez de contra el ancho entero de la píldora. */
        grid-column: 1 / -1;
        justify-self: stretch;
        top: calc(100% + 12px);
        left: 0;
        right: 0;
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 6px clamp(20px, 6vw, 30px) 14px;
        background: rgba(247, 240, 230, 0.97);
        -webkit-backdrop-filter: blur(14px);
                backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.55);
        border-radius: 26px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
        z-index: 90;
    }
    .site-header.menu-open .nav > a,
    .site-header.menu-open .nav-item-mega > a {
        display: block;
        padding: 15px 0;
        border-bottom: 1px solid var(--line);
        font-family: var(--font-display);
        font-size: 1.15rem;
        color: var(--ink);
    }
    .site-header.menu-open .nav > a::after { display: none; }
    .site-header.menu-open .nav > a:last-child { border-bottom: 0; }

    /* El mega-menú de servicios NO se despliega en el panel móvil: son 15
       servicios y empujaban fuera de la pantalla los enlaces principales.
       Se toca "Servicios" y se llega a la página, que ya funciona en móvil. */
    .site-header.menu-open .nav-item-mega { display: block; }
    .site-header.menu-open .mega { display: none; }

    .site-header.menu-open .nav a { color: var(--ink); font-family: var(--font-display); }
    .site-header.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .site-header.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
    .site-header.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .nav-toggle { z-index: 95; }

    .manifiesto-grid,
    .footer-inner,
    .prosa-doble,
    .contacto { grid-template-columns: 1fr; }
    .footer-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
    body { font-size: 16px; }
    .footer-cols { grid-template-columns: 1fr; }
    .hero-cta { flex-direction: column; width: 100%; }
    .hero-cta .btn { justify-content: center; }
    .form-fila { grid-template-columns: 1fr; }
    .caso-ficha { gap: 16px; }
    .servicio-card { flex-wrap: wrap; }
}

/* ═══════════ HOME 2 — borrador de rediseño (prefijo .h2-, no toca la home 1) ═══════════ */
/* Marcas: muy bajita, sin título, fondo claro (cta_home), sube sobre el vídeo sticky */
.h2-marcas {
    position: relative;
    z-index: 10;                       /* por encima del hero (vídeo pinned) */
    background: url('../img/home/cta_home.webp') center / cover no-repeat;
    padding: clamp(16px, 2.2vw, 32px) 0;
}
.h2-marcas .marca-logo { height: clamp(36px, 4.2vw, 56px); }

/* Dolores en home2: viene tras las marcas (bajitas) — sin el solape de -38vh */
.dolores-pin.h2-dolores { margin-top: 0; }

/* Banda de confianza: franja fina NEGRA con contadores, continua con el
   oscuro de los dolores. z7 = por delante de la ilustración del arsenal. */
.h2-banda {
    position: relative;
    z-index: 7;
    background: #14110f;             /* mismo tono que el fondo de los dolores */
    padding: clamp(20px, 2.8vw, 38px) clamp(20px, 4vw, 48px);
}
.h2-banda-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: clamp(32px, 8vw, 140px);
    flex-wrap: wrap;
}
/* Cada dato dentro de una "pastilla" de cristal sobre el negro */
.h2-stat {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: clamp(10px, 1.4vw, 16px) clamp(18px, 2.6vw, 32px);
    background: rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.h2-stat-num {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);    /* más grande */
    font-weight: 500;
    color: #F4EEE2;                  /* claro sobre la banda negra */
}
.h2-stat-num [data-count] { font-variant-numeric: tabular-nums; }
.h2-mas { color: var(--fluo); }
.h2-stat-label {
    font-size: clamp(0.99rem, 1.3vw, 1.18rem);  /* más grande */
    color: var(--mist);
    letter-spacing: 0.04em;
}

/* Arsenal en home2: bastante aire arriba (la ilustración, anclada por abajo,
   queda así separada de la banda de contadores) y tipografía más contenida */
.servicios.h2-arsenal { padding-top: clamp(130px, 17vw, 280px); }
.h2-arsenal .arsenal-titulo { font-size: clamp(1.15rem, 1.9vw, 1.55rem); }
.h2-arsenal .arsenal-lista a { font-size: clamp(1.01rem, 1.2vw, 1.21rem); padding: 11px 0; }

/* (El header "cristal" y el mega-menú translúcido son ahora GLOBALES —
   ver el bloque de cabecera al principio del archivo.) */

/* ── Frase del hero (izquierda-centro) con morfosis ES ↔ JP ── */
.h2-hero-frase {
    position: absolute;
    left: clamp(70px, 16vw, 300px);    /* un poco más a la derecha */
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.h2-hero-linea {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.5vw, 2.2rem);   /* un punto más pequeño */
    color: var(--ink);
    line-height: 1.3;
    text-shadow: 0 1px 14px rgba(247, 240, 230, 0.7);
    min-height: 1.3em;                 /* no salta al cambiar nº de caracteres */
}
.h2-hero-linea--b { color: var(--fluo-deep); }

/* ── Dolores en home2: imagen reflejada (el ninja pasa a la derecha) ── */
.h2-dolores .dolores-pin-sticky {
    background-image: url('/assets/img/home/seccion2.3-flip.webp');
}

/* ── Reseñas en home2: fondo sumi-e propio + cajas "cristal" ── */
.h2-resenas { background: url('../img/home/resenas.webp') center / cover no-repeat; }
.h2-resenas .seccion-num,
.h2-resenas h2 { padding-right: clamp(48px, 14vw, 260px); }   /* el título entra desde el borde */
.h2-resenas-sub {
    text-align: right;
    padding-right: clamp(48px, 14vw, 260px);
    color: var(--mist);
    font-size: clamp(1.04rem, 1.3vw, 1.21rem);
    margin-top: 8px;
}
.h2-resenas .resena-card {
    background: rgba(250, 246, 239, 0.10);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
}
.h2-resenas .resena-card:hover {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
    background: rgba(250, 246, 239, 0.16);
}
.h2-resenas .resena-card blockquote { color: #F4EEE2; }
.h2-resenas .resena-autor { color: #fff; }
.h2-resenas .resena-empresa { color: var(--mist); }
/* Aparición más marcada de las tarjetas (suben y escalan al entrar) */
html.js .h2-resenas .resena-card {
    opacity: 0;
    transform: translateY(44px) scale(0.97);
    transition: opacity .7s ease, transform .8s cubic-bezier(0.22, 1, 0.36, 1);
}
html.js .h2-resenas .resena-card.is-visible {
    opacity: 1;
    transform: none;
}
/* Dentro del carrusel NO se anima tarjeta a tarjeta. Esa animación la dispara
   el observador de `.reveal` cuando el elemento entra en pantalla, y en una
   fila que se desplaza en horizontal las tarjetas de la derecha no llegan a
   entrar nunca: se quedarían invisibles para siempre. Aparece el bloque entero
   (la clase `reveal` va en `.resenas-carrusel`) y las tarjetas van visibles. */
html.js .h2-resenas .resenas-track .resena-card {
    opacity: 1;
    transform: none;
}

/* ── Casos de éxito (puente a /casos-de-exito) — fondo washi del antiguo CTA ── */
.h2-casos {
    background: url('../img/home/cta_home.webp') center / cover no-repeat;
    padding: clamp(64px, 9vw, 120px) 0;
}
.h2-casos-inner { max-width: none; margin: 0 auto; }
.h2-casos-head { text-align: center; margin-bottom: clamp(32px, 5vw, 56px); padding: 0 clamp(20px, 4vw, 48px); }
.h2-casos-head .seccion-num { color: var(--fluo); margin-bottom: 10px; }
.h2-casos-head h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 500;
    color: var(--ink);
}
.h2-casos-sub { color: var(--ink-soft); margin-top: 8px; font-size: clamp(1.04rem, 1.3vw, 1.21rem); }

/* Carrusel auto-loop de cajas (cristal + sombra), pausa al hover */
.h2-casos-carrusel {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.h2-casos-track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: clamp(18px, 2.5vw, 32px);
    padding: 18px 0;                       /* hueco para que la sombra no se recorte */
    animation: marcas-scroll 36s linear infinite;
}
.h2-casos-carrusel:hover .h2-casos-track { animation-play-state: paused; }
.h2-caso-tile {
    flex-shrink: 0;
    display: block;
    width: clamp(190px, 22vw, 280px);      /* cajas más pequeñas */
    padding: clamp(10px, 1.2vw, 14px);     /* marco de cristal alrededor de la foto */
    background: rgba(255, 255, 255, 0.38);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 14px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.14);
    transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
}
.h2-caso-tile img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    filter: grayscale(100%);
    transition: filter .5s ease;
}
.h2-caso-tile:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.2); }
.h2-caso-tile:hover img { filter: grayscale(0); }
.h2-casos-cta { text-align: center; margin-top: clamp(28px, 4vw, 44px); }

/* ── CTA final en negro (solo home2): textos adaptados ── */
.h2-cta .cta-pin-sticky { background: #0E0C0B; }
.h2-cta .cta-pin-inner h2 { color: #F4EEE2; }
.h2-cta .cta-pin-inner p.cta-line-2 { color: var(--mist); }
.h2-cta .seccion-num { color: var(--sakura); }
.h2-cta .btn-ghost {
    color: #F4EEE2;
    border-color: rgba(247, 240, 230, 0.45);
}
.h2-cta .btn-ghost:hover {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
}
/* Footer integrado con el CTA: mismo negro (solo home2) */
body.home2 .site-footer { background: #0E0C0B; }

@media (max-width: 760px) {
    .h2-hero-frase { left: clamp(20px, 8vw, 60px); }
    .h2-resenas .seccion-num,
    .h2-resenas h2,
    .h2-resenas-sub { padding-right: clamp(16px, 5vw, 40px); }
}

/* ═══════════ SERVICIOS · Tecnologías: banda en movimiento ═══════════
   Sustituye a la antigua lista de píldoras. Va pegada encima del bloque
   negro de FAQs: fondo claro a ancho completo y las herramientas pasando
   en bucle, sin título ni texto de apoyo. */
.tech-banda {
    background: var(--paper-soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: clamp(16px, 2.2vw, 24px) 0;
    overflow: hidden;
}
.tech-banda-carrusel {
    overflow: hidden;
    /* Difumina los extremos para que las palabras no aparezcan cortadas de golpe */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tech-banda-track {
    display: flex;
    width: max-content;
    animation: tech-banda-scroll 44s linear infinite;
}
.tech-banda-carrusel:hover .tech-banda-track { animation-play-state: paused; }
.tech-banda-lista {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tech-banda-lista li {
    position: relative;
    white-space: nowrap;
    padding: 0 clamp(20px, 2.8vw, 40px);
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    line-height: 1.2;
    color: var(--ink-soft);
}
/* Punto separador entre herramientas (el de la última enlaza con la copia siguiente) */
.tech-banda-lista li::after {
    content: '·';
    position: absolute;
    right: -0.25em;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mist);
}
@keyframes tech-banda-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .tech-banda-track { animation: none; }
    .tech-banda-lista[aria-hidden="true"] { display: none; }
    .tech-banda-carrusel { overflow-x: auto; }
}

/* ═══════════ SERVICIOS · FAQs en bloque negro ═══════════
   Bloque a ancho completo con esquinas redondeadas: corta la página en
   dos y da respiro antes del cierre. Dos columnas independientes. */
.faq-oscura {
    background: #0E0C0B;
    color: #F4EEE2;
    border-radius: clamp(28px, 4vw, 56px);
    padding: clamp(48px, 6.5vw, 96px) clamp(20px, 4vw, 48px);
}
.faq-oscura-inner {
    max-width: var(--maxw);
    margin: 0 auto;
}
.faq-oscura .seccion-num {
    color: rgba(244, 238, 226, 0.38);
    opacity: 1;
}
.faq-oscura h2 {
    font-size: clamp(1.8rem, 3.6vw, 2.8rem);
    font-weight: 500;
    color: #F4EEE2;
    margin-bottom: clamp(28px, 4vw, 48px);
}
.faq-oscura-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 5vw, 80px);
    align-items: start;
}
.faq-item--oscuro { border-bottom: 1px solid rgba(244, 238, 226, 0.16); }
.faq-item--oscuro summary {
    color: #F4EEE2;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    padding: 22px 40px 22px 0;
}
.faq-item--oscuro summary:hover { color: #fff; }
.faq-item--oscuro summary::after {
    color: rgba(244, 238, 226, 0.7);
    top: 50%;
    margin-top: -0.7em;
}
.faq-item--oscuro > div {
    padding-bottom: 22px;
    color: rgba(244, 238, 226, 0.72);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 60ch;
}
@media (max-width: 760px) {
    .faq-oscura-cols { grid-template-columns: 1fr; }
}


/* ═══════════ SERVICIOS · Relacionados ("un servicio rara vez viene solo") ═══════════
   Titular grande a la izquierda + frase de apoyo a la derecha, y debajo las
   columnas separadas por filetes verticales. Fondo del propio papel de la web. */
.serv-cross {
    background: var(--paper);
    border-top: 1px solid var(--line);
    padding: clamp(56px, 8vw, 120px) clamp(20px, 4vw, 48px);
}
.serv-cross-inner {
    max-width: var(--maxw);
    margin: 0 auto;
}
.serv-cross-head {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(24px, 5vw, 80px);
    align-items: start;
    margin-bottom: clamp(44px, 6vw, 88px);
}
.serv-cross-head h2 {
    font-size: clamp(1.9rem, 4vw, 3.1rem);
    line-height: 1.12;
    font-weight: 500;
    color: var(--ink);
    margin: 0;
}
.serv-cross-intro {
    margin: 0;
    align-self: end;
    max-width: 56ch;
    color: var(--ink-soft);
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    line-height: 1.65;
}
.serv-cross-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}
.serv-cross-item { padding: 0 clamp(18px, 2.4vw, 34px); }
/* Filete separador entre columnas (la primera no lo lleva) */
.serv-cross-item + .serv-cross-item { border-left: 1px solid var(--line-strong); }
.serv-cross-item:first-child { padding-left: 0; }
.serv-cross-item a {
    display: block;
    text-decoration: none;
    color: inherit;
}
.serv-cross-item h3 {
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    font-weight: 500;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 12px;
    transition: color var(--tr-base);
}
.serv-cross-item p {
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.6;
    color: var(--ink-soft);
}
/* La flecha solo aparece al pasar por encima: el listado se lee limpio.
   Sin contenido por defecto — si se reservara el hueco, un título justo de
   ancho rompería a dos líneas y descuadraría el texto de esa columna. */
.serv-cross-item h3::after { content: ''; }
.serv-cross-item a:hover h3,
.serv-cross-item a:focus-visible h3 { color: var(--fluo-deep); }
.serv-cross-item a:hover h3::after,
.serv-cross-item a:focus-visible h3::after { content: ' →'; }

/* Reserva de dos líneas para el título: así todos los párrafos arrancan a la
   misma altura aunque un servicio tenga el nombre largo. */
@media (min-width: 861px) {
    .serv-cross-item h3 { min-height: 2.5em; }
}

@media (max-width: 860px) {
    .serv-cross-head { grid-template-columns: 1fr; }
    .serv-cross-grid { grid-template-columns: 1fr; }
    .serv-cross-item { padding: 22px 0; }
    /* En columna, el filete pasa a ser horizontal */
    .serv-cross-item + .serv-cross-item {
        border-left: none;
        border-top: 1px solid var(--line-strong);
    }
}


/* ═══════════ Pie · tarjeta de CTA (solo páginas de servicio) ═══════════
   El "¿Lo hablamos?" deja de ser la última sección del artículo y entra en el
   pie como tarjeta clara sobre el fondo oscuro. El resto del pie no cambia.
   El ancho se calcula igual que `.footer-inner` (mismo margen lateral) para
   que la tarjeta quede alineada con el contenido de abajo. */
.footer-cta {
    width: calc(min(var(--maxw), 100%) - 2 * clamp(20px, 4vw, 48px));
    margin: clamp(48px, 6vw, 72px) auto 0;
    padding: clamp(26px, 3.4vw, 44px) clamp(24px, 3.4vw, 48px);
    /* Negro un punto más profundo que el pie + filete: se integra pero sigue
       leyéndose como tarjeta. El botón se invierte para no desaparecer. */
    background: #0E0C0B;
    color: var(--paper);
    border: 1px solid rgba(247, 240, 230, 0.14);
    border-radius: clamp(20px, 2.4vw, 32px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 3vw, 40px);
}
.footer-cta-texto { min-width: 0; }
.footer-cta-titulo {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--paper);
}
.footer-cta-sub {
    margin: 8px 0 0;
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    line-height: 1.5;
    color: rgba(247, 240, 230, 0.66);
    max-width: 60ch;
}
/* Botón invertido (claro sobre la tarjeta oscura); al pasar, el rosa de siempre */
.footer-cta-btn {
    flex-shrink: 0;
    background: var(--paper);
    color: var(--ink);
}
.footer-cta-btn:hover {
    background: var(--fluo);
    color: var(--ink);
}
/* Con tarjeta, el pie respira menos por arriba: el hueco ya lo pone ella */
.site-footer--cta .footer-inner { padding-top: clamp(44px, 5vw, 64px); }

@media (max-width: 620px) {
    .footer-cta { flex-direction: column; align-items: flex-start; }
    .footer-cta-btn { width: 100%; justify-content: center; }
}


/* ═══════════ SERVICIOS · Casos reales (titular + cifras desplegables) ═══════════
   Estructura de la referencia del usuario: columna izquierda con el titular y la
   entradilla, columna derecha con las cifras en filas desplegables. El KPI es el
   título de la fila — la cifra, que es lo que vende, nunca queda escondida. */
.serv-casos {
    background: var(--paper);
    padding: clamp(48px, 7vw, 96px) clamp(20px, 4vw, 48px);
}
.serv-casos-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 88px);
    align-items: start;
}
.serv-casos-head h2 {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 500;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 18px;
}
.serv-casos-intro {
    margin: 0;
    max-width: 46ch;
    color: var(--ink-soft);
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    line-height: 1.65;
}
.serv-casos-lista { border-top: 1px solid var(--line-strong); }
.serv-caso { border-bottom: 1px solid var(--line-strong); }
.serv-caso summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    cursor: pointer;
    list-style: none;
    padding: clamp(18px, 2.4vw, 26px) 0;
}
.serv-caso summary::-webkit-details-marker { display: none; }
.serv-caso-kpi {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 2.05rem);
    font-weight: 500;
    line-height: 1.15;
    color: var(--ink);
}
/* Indicador +/− a la derecha, como en las FAQs */
.serv-caso summary::after {
    content: '+';
    flex-shrink: 0;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    color: var(--ink-soft);
    transition: transform var(--tr-base);
}
.serv-caso[open] summary::after { transform: rotate(45deg); }
.serv-caso-cuerpo { padding: 0 0 clamp(20px, 2.4vw, 28px); }
.serv-caso-cuerpo p {
    margin: 0 0 16px;
    max-width: 62ch;
    color: var(--ink-soft);
    font-size: 1.02rem;
    line-height: 1.7;
}
/* Etiqueta con el tipo de cliente (sector/ciudad), como los chips de la referencia */
.serv-caso-tag {
    display: inline-block;
    padding: 7px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

@media (max-width: 860px) {
    .serv-casos-inner { grid-template-columns: 1fr; }
}


/* ═══════════ CASOS DE ÉXITO · página de detalle ═══════════
   Estructura tipo portfolio (referencia del usuario: somoscrater.es) manteniendo
   nuestras secciones de datos: cabecera grande + ficha, portada a ancho completo,
   bloque reto a dos columnas, mosaico de fotos y otros casos al cierre. */
/* Título, foto y ficha agrupados para poder reordenarlos en el móvil: ahí
   el DOM ya va en el orden bueno (título → foto → ficha), así que basta con
   NO tocar nada. En escritorio hace falta volver a poner la ficha antes de
   la foto, y eso se hace con flexbox + order (ver el override de abajo, en
   el mismo breakpoint donde el bloque "reto" también se apila). */
.caso-cabecera-grupo { display: flex; flex-direction: column; }
.caso-cabecera-grupo .caso-foto-ancha { order: 1; }
.caso-portada {
    padding: clamp(130px, 16vw, 190px) clamp(20px, 4vw, 48px) 0;
}
.caso-portada-inner {
    max-width: var(--maxw);
    margin: 0 auto;
}
.caso-portada .post-volver { display: inline-block; margin-bottom: clamp(28px, 5vw, 56px); }
.caso-titular {
    font-size: clamp(2.8rem, 9vw, 7rem);
    line-height: 0.98;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink);
}
.caso-portada .caso-hero-claim {
    margin: clamp(16px, 2vw, 24px) 0 0;
    max-width: 60ch;
    text-align: left;
}
/* Fila de datos bajo un filete: pares dato/valor y, a la derecha, las etiquetas.
   Ya no vive dentro de `.caso-portada-inner` (ver caso-cabecera-grupo arriba),
   así que se centra y se acolcha por su cuenta, igual que las demás secciones
   sueltas de la página (.caso-reto, .servicio-seccion...). */
.caso-ficha {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(20px, 3vw, 40px);
    max-width: var(--maxw);
    margin: clamp(36px, 5vw, 64px) auto 0;
    padding: clamp(20px, 2.6vw, 30px) clamp(20px, 4vw, 48px) clamp(28px, 4vw, 48px);
    border-top: 1px solid var(--line-strong);
    border-bottom: none;
    text-align: left;
}
.caso-ficha-datos {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(24px, 5vw, 72px);
    margin: 0;
}
.caso-ficha-datos > div { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.caso-ficha-datos dt {
    font-size: 0.86rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fluo-deep);
}
.caso-ficha-datos dd { margin: 0; font-size: 1.02rem; color: var(--ink); }
.caso-ficha-datos dd a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.caso-ficha-datos dd a:hover { color: var(--fluo-deep); }
.caso-ficha-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.caso-ficha-tags li {
    padding: 8px 18px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 1.03rem;
    color: var(--ink-soft);
}

/* Portada a ancho completo, sin márgenes. Proporción fija para que todos los
   casos tengan la misma cabecera, suba el usuario la foto que suba. */
.caso-foto-ancha { margin: 0; }
.caso-foto-ancha picture { display: block; }
.caso-foto-ancha img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 80vh;
    object-fit: cover;
}
@media (max-width: 620px) {
    /* Sin foto propia para el móvil: se sigue recortando la principal, un
       poco menos agresivo que el 16:9 de escritorio. */
    .caso-foto-ancha img { aspect-ratio: 4 / 3; }
    /* Con foto propia (pensada para vertical): se le da más alto de verdad,
       en vez de forzarla a la misma proporción que una foto horizontal. */
    .caso-foto-ancha--movil-propia img { aspect-ratio: 3 / 4; }
}

/* Bloque a dos columnas: trabajos hechos · el reto */
.caso-reto {
    padding: clamp(56px, 8vw, 110px) clamp(20px, 4vw, 48px);
}
.caso-reto-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 6vw, 90px);
    align-items: start;
}
.caso-trabajos-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}
.caso-trabajos-lista li {
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    line-height: 1.5;
    color: var(--ink);
}
.caso-trabajos-nota {
    margin: 18px 0 0;
    font-size: 1.06rem;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 40ch;
}
.caso-reto-texto h2 {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 500;
    color: var(--fluo-deep);
    margin: 0 0 14px;
}
.caso-reto-texto h2 + p + h2 { margin-top: clamp(28px, 3.5vw, 44px); }
.caso-reto-texto p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 1.08rem;
    line-height: 1.75;
    max-width: 64ch;
}

/* Mosaico de imágenes: una a ancho completo, el resto de dos en dos */
/* Galería de la ficha: dos cuadradas y una rectangular debajo. Forma fija, no
   un mosaico que crece: cada foto se sube a su hueco desde el panel.
   Va dentro de --maxw, no casi a sangre como antes: a pantalla completa las
   fotos salían enormes y se comían la lectura. */
.caso-galeria {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.4vw, 18px);
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px) clamp(20px, 3vw, 40px);
}
.caso-galeria figure { margin: 0; overflow: hidden; border-radius: clamp(8px, 1vw, 16px); background: var(--paper-deep); }
.caso-galeria img { display: block; width: 100%; height: 100%; object-fit: cover; }
.caso-galeria-par {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 1.4vw, 18px);
}
.caso-galeria-par img   { aspect-ratio: 1 / 1; }
/* 16/7 y no 16/9: a 16/9 el rectángulo salía MÁS ALTO que la fila de antes
   (666px contra 616px), justo lo contrario de achicarlo. */
.caso-galeria-ancha img { aspect-ratio: 16 / 7; }

/* Texto enriquecido de los recuadros de un caso (El cliente, El reto,
   La solución, Cómo lo hicimos). Se escriben desde el panel y pueden traer
   negritas, listas y enlaces, así que necesitan estilos propios: sin esto,
   el `* { margin:0 }` del principio deja los párrafos pegados. */
.caso-rico > :first-child { margin-top: 0; }
.caso-rico > :last-child  { margin-bottom: 0; }
.caso-rico p { margin: 0 0 1.1em; }
.caso-rico strong { font-weight: 600; }
.caso-rico h3 {
    font-family: var(--font-display);
    font-size: 1.15em;
    font-weight: 500;
    margin: 1.6em 0 .5em;
}
.caso-rico ul, .caso-rico ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.caso-rico li { margin: 0 0 .4em; }
.caso-rico li::marker { color: var(--fluo-deep, #E91E8C); }
.caso-rico a { color: var(--fluo-deep, #E91E8C); text-decoration: underline; text-underline-offset: 3px; }
.caso-rico a:hover { color: var(--ink); }
.caso-rico blockquote {
    margin: 0 0 1.1em;
    padding-left: 1em;
    border-left: 2px solid var(--fluo-deep, #E91E8C);
    font-style: italic;
}

/* Imagen 1: cuadrada, en la columna izquierda de "El cliente / El reto", que
   antes se quedaba vacía mientras el texto de la derecha seguía bajando. */
.caso-reto-foto {
    margin: clamp(24px, 3vw, 40px) 0 0;
    overflow: hidden;
    border-radius: clamp(8px, 1vw, 16px);
    background: var(--paper-deep);
}
.caso-reto-foto img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
/* La imagen 1 está DUPLICADA en el HTML (ver caso.php): una copia aquí, en
   la columna izquierda, y otra entre "El cliente" y "El reto" para cuando
   el móvil apila todo en una sola columna. En escritorio se oculta la de
   en medio; el override de abajo (mismo breakpoint que el resto del bloque
   "reto") cambia cuál de las dos se ve. */
.caso-reto-texto .caso-reto-foto { display: none; }

/* Otros casos */
.caso-otros {
    padding: clamp(56px, 8vw, 110px) clamp(20px, 4vw, 48px) 0;
}
.caso-otros-inner { max-width: var(--maxw); margin: 0 auto; }
.caso-otros h2 {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 500;
    margin: 0 0 clamp(28px, 4vw, 44px);
}
.caso-otros-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(20px, 3vw, 40px);
    list-style: none;
    margin: 0;
    padding: 0;
}
.caso-otros-grid a { display: block; text-decoration: none; color: inherit; }
.caso-otros-img {
    display: block;
    overflow: hidden;
    border-radius: clamp(8px, 1vw, 16px);
    background: var(--paper-deep);
    margin-bottom: 16px;
}
.caso-otros-img img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    filter: grayscale(1);
    transition: filter var(--tr-base), transform 0.6s ease;
}
.caso-otros-grid a:hover .caso-otros-img img { filter: grayscale(0); transform: scale(1.04); }
.caso-otros-grid h3 { font-size: 1.15rem; font-weight: 500; margin: 0 0 6px; }
.caso-otros-grid a:hover h3 { color: var(--fluo-deep); }
.caso-otros-grid p { margin: 0; font-size: 1.01rem; color: var(--ink-soft); }

@media (max-width: 860px) {
    /* El grupo título+foto+ficha vuelve a su orden natural del HTML (título,
       foto, ficha): sin flexbox ya no hace falta el `order` que en escritorio
       ponía la ficha antes que la foto. */
    .caso-cabecera-grupo { display: block; }

    .caso-reto-inner { grid-template-columns: 1fr; }
    .caso-ficha { flex-direction: column; align-items: flex-start; }
    /* Apilado, la columna izquierda pasa a ancho completo: sin tope, la
       imagen 1 se comería una pantalla entera antes de llegar al texto.
       (Nada de `display:contents` para reordenar: se lleva por delante el
       `reveal` del bloque.) */
    .caso-reto-foto { max-width: 420px; }

    /* Las etiquetas de servicio ya salieron en la ficha, justo debajo de la
       foto: no hace falta repetirlas aquí también. */
    .caso-trabajos-lista { display: none; }
    /* Y de las dos copias de la imagen 1, en el móvil se ve la de en medio
       (entre "El cliente" y "El reto"), no la de la columna izquierda. */
    .caso-reto-trabajos .caso-reto-foto { display: none; }
    .caso-reto-texto .caso-reto-foto { display: block; }
}
@media (max-width: 620px) {
    /* Dos cuadradas de 150px no se ven: en móvil van una debajo de otra. */
    .caso-galeria-par { grid-template-columns: 1fr; }
    /* Y el rectángulo se endereza: a 16/7 en un móvil son 147px de alto,
       una tira que no se lee como foto. */
    .caso-galeria-ancha img { aspect-ratio: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) {
    .caso-otros-img img { transition: none; }
    .caso-otros-grid a:hover .caso-otros-img img { transform: none; }
}


/* ═══════════ CONTACTO · formulario conversacional ═══════════
   Una pregunta cada vez (lo pilota site.js). Sin JS no se aplica `is-charla`
   y los pasos se ven en vertical como un formulario normal: sigue enviando. */
.charla {
    padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 48px) clamp(40px, 6vw, 72px);
}
.charla-caja {
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 56px);
    background: var(--paper-soft);
    border: 1px solid var(--line);
    border-radius: clamp(18px, 2.4vw, 28px);
}
/* Barra de progreso finita arriba de la caja */
.charla-barra {
    height: 3px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
    margin-bottom: clamp(28px, 4vw, 44px);
}
.charla-barra span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--fluo);
    transition: width var(--tr-base);
}
.charla-form:not(.is-charla) .charla-barra { display: none; }

/* Modo conversación: solo el paso actual */
.charla-form.is-charla .charla-paso { display: none; }
.charla-form.is-charla .charla-paso.is-actual {
    display: block;
    animation: charla-entra 0.45s ease both;
    min-height: 280px;
}
@keyframes charla-entra {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
/* Sin JS: los pasos se apilan separados por un filete */
.charla-form:not(.is-charla) .charla-paso + .charla-paso {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
}

.charla-num {
    margin: 0 0 10px;
    font-size: 0.87rem;
    letter-spacing: 0.16em;
    color: var(--fluo-deep);
}
.charla-pregunta {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.2vw, 2.3rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: 10px;
}
.charla-ayuda {
    margin: 0 0 22px;
    color: var(--ink-soft);
    font-size: 1.06rem;
}
.charla-extra {
    display: block;
    margin: 24px 0 6px;
    font-size: 1.06rem;
    color: var(--ink-soft);
}
.charla-extra small { color: var(--mist); }

/* Campos grandes, sin caja: solo un filete que se enciende al escribir */
.charla-paso input[type="text"],
.charla-paso input[type="email"],
.charla-paso input[type="tel"],
.charla-paso textarea {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    border-radius: 0;
    background: transparent;
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    color: var(--ink);
    transition: border-color var(--tr-base);
}
.charla-paso textarea { resize: vertical; line-height: 1.6; }
.charla-paso input:focus,
.charla-paso textarea:focus { outline: none; border-bottom-color: var(--fluo); }
.charla-paso ::placeholder { color: var(--mist); }

/* Opciones: pastillas que se marcan solas y avanzan */
.charla-opciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    margin: 22px 0 4px;
}
.charla-opcion {
    position: relative;
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    cursor: pointer;
    font-size: 1.06rem;
    color: var(--ink-soft);
    transition: border-color var(--tr-base), background var(--tr-base), color var(--tr-base);
}
.charla-opcion:hover { border-color: var(--ink); color: var(--ink); }
.charla-opcion input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.charla-opcion:has(input:checked) {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}
.charla-opcion:focus-within { border-color: var(--fluo); }

/* En las preguntas de varias respuestas se marca con un "✓": así se entiende
   de un vistazo que no es elegir una, sino todas las que hagan falta. */
[data-multiple] .charla-opcion:has(input:checked)::after {
    content: "✓";
    margin-left: 8px;
    font-size: 0.95rem;
    color: var(--fluo);
    line-height: 1;
}
[data-multiple] .charla-opcion { justify-content: space-between; }

.charla-paso .btn { margin-top: 28px; }
.charla-atras {
    display: inline-block;
    margin: 16px 0 0 18px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 1.01rem;
    color: var(--ink-soft);
}
.charla-atras:hover { color: var(--fluo-deep); }
.charla-aviso {
    margin: 14px 0 0;
    font-size: 1.03rem;
    color: var(--seal-red);
}
.charla-form .form-nota { margin-top: 18px; }

/* ── Casilla de consentimiento (RGPD) ── */
.charla-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 26px;
    max-width: 560px;
    font-size: 1.03rem;
    line-height: 1.55;
    color: var(--ink-soft);
    cursor: pointer;
}
.charla-consent input {
    /* Se deja la casilla nativa: se entiende sola y es accesible de serie */
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: var(--fluo-deep);
    cursor: pointer;
}
.charla-consent a { color: var(--ink); text-decoration: underline; }
.charla-consent a:hover { color: var(--fluo-deep); }

/* ── Otras vías (debajo del formulario) ── */
.contacto-vias {
    padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 48px) clamp(56px, 8vw, 96px);
    border-top: 1px solid var(--line);
}
.contacto-vias-inner { max-width: var(--maxw); margin: 0 auto; }
.contacto-vias h2 {
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 500;
    margin: 0 0 8px;
}
.contacto-vias-intro { margin: 0 0 clamp(28px, 4vw, 44px); color: var(--ink-soft); }
.contacto-vias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: clamp(20px, 3vw, 44px);
}
/* Sin línea propia: la única raya de la sección es la de encima del título. */
.contacto-via { padding-top: 4px; }
.contacto-via-icono {
    font-style: normal;
    margin-right: 6px;
    font-size: 1.05em;
    /* Los emoticonos no siguen el interletrado del texto en mayúsculas */
    letter-spacing: 0;
}
.contacto-via span {
    display: block;
    margin-bottom: 6px;
    font-size: 0.86rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.contacto-via a, .contacto-via p {
    margin: 0;
    font-size: 1.05rem;
    color: var(--ink);
    text-decoration: none;
}
.contacto-via a:hover { color: var(--fluo-deep); }

/* ── Mapa de Google al pie de "Otras vías" ── */
.contacto-mapa { margin-top: clamp(32px, 4vw, 52px); }
.contacto-mapa iframe {
    display: block;
    width: 100%;
    height: clamp(260px, 34vw, 400px);
    border: 1px solid var(--line-strong);
    /* El mapa de Google llega en colores saturados y desentona con el papel:
       se baja un poco para que se integre, y al pasar por encima vuelve. */
    filter: grayscale(0.35) contrast(0.95);
    transition: filter var(--tr-base);
}
.contacto-mapa iframe:hover { filter: none; }
.contacto-mapa p { margin: 10px 0 0; font-size: 1.03rem; }
.contacto-mapa a { color: var(--ink-soft); text-decoration: none; }
.contacto-mapa a:hover { color: var(--fluo-deep); }

@media (prefers-reduced-motion: reduce) {
    .charla-form.is-charla .charla-paso.is-actual { animation: none; }
}


/* ═══════════ Páginas legales ═══════════ */
.legal {
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(130px, 15vw, 180px) clamp(20px, 4vw, 48px) clamp(56px, 8vw, 96px);
}
.legal-head { margin-bottom: clamp(28px, 4vw, 48px); }
.legal-head h1 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
}
.legal-fecha { margin: 12px 0 0; font-size: 1.01rem; color: var(--ink-soft); }
.legal-cuerpo { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.8; }
.legal-cuerpo p { margin: 0 0 1.1em; }
.legal-cuerpo h2, .legal-cuerpo h3 {
    margin: 2em 0 0.6em;
    color: var(--ink);
    font-weight: 500;
    font-size: clamp(1.2rem, 2.2vw, 1.5rem);
}
.legal-cuerpo strong { color: var(--ink); font-weight: 600; }
.legal-cuerpo ul, .legal-cuerpo ol { margin: 0 0 1.2em 1.2em; padding: 0; }
.legal-cuerpo li { margin-bottom: 0.5em; }
.legal-cuerpo a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-cuerpo a:hover { color: var(--fluo-deep); }
.legal-otras {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
    margin-top: clamp(40px, 6vw, 72px);
    padding-top: 24px;
    border-top: 1px solid var(--line-strong);
    font-size: 1.06rem;
}
.legal-otras a { color: var(--ink-soft); text-decoration: none; }
.legal-otras a:hover { color: var(--fluo-deep); }

/* Enlaces legales del pie */
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-legal-links a { color: var(--mist); text-decoration: none; }
.footer-legal-links a:hover { color: var(--paper); }


/* ═══════════ Popup de salida (despedida + alta en la newsletter) ═══════════ */
.salida {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 40px);
}
.salida[hidden] { display: none; }
.salida-fondo {
    position: absolute;
    inset: 0;
    background: rgba(14, 12, 11, 0.72);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
    animation: salida-fade 0.35s ease both;
}
.salida-caja {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    width: min(980px, 100%);
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: var(--paper-soft);
    border-radius: clamp(16px, 2vw, 26px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    animation: salida-sube 0.45s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes salida-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes salida-sube { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }

.salida-izq {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(28px, 4vw, 48px);
    background: #0E0C0B;
    color: var(--paper);
}
.salida-kanji {
    font-family: var(--font-kanji);
    font-size: clamp(2.6rem, 6vw, 4.2rem);
    line-height: 1;
    color: var(--fluo);
    opacity: 0.9;
    margin-bottom: 18px;
}
.salida-claim {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    line-height: 1.1;
    color: var(--paper);
}
.salida-sub { margin: 0; font-size: 1.02rem; line-height: 1.6; color: rgba(247, 240, 230, 0.7); }

.salida-der { padding: clamp(28px, 4vw, 44px); }
.salida-eyebrow {
    display: inline-block;
    margin: 0 0 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--fluo);
    color: var(--ink);
    font-size: 0.86rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.salida-titulo {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--ink);
}
.salida-texto { margin: 0 0 22px; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }

.salida-form input[type="text"],
.salida-form input[type="email"],
.salida-form input[type="url"] {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 14px 18px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
}
.salida-form input:focus { outline: none; border-color: var(--fluo); }
.salida-check {
    display: flex;
    gap: 10px;
    margin: 14px 0 18px;
    font-size: 0.96rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.salida-check input { margin-top: 3px; flex-shrink: 0; }
.salida-check a { color: var(--fluo-deep); }
.salida-nota { margin: 12px 0 0; font-size: 0.92rem; color: var(--mist); text-align: center; }
.salida-aviso, .footer-news-aviso {
    margin: 12px 0 0;
    font-size: 1.01rem;
    line-height: 1.5;
    color: var(--fluo-deep);
}
.salida-aviso.es-error, .footer-news-aviso.es-error { color: var(--seal-red); }
.salida-aviso[hidden], .footer-news-aviso[hidden] { display: none; }

.salida-x {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 17, 17, 0.08);
    color: var(--ink);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.salida-x:hover { background: var(--ink); color: var(--paper); }

@media (max-width: 760px) {
    .salida-caja { grid-template-columns: 1fr; }
    .salida-izq { padding-bottom: 22px; }
    .salida-kanji { font-size: 2.2rem; margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .salida-fondo, .salida-caja { animation: none; }
}

/* ── Alta en la newsletter: banda horizontal del pie ── */
.footer-news {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 48px);
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: clamp(20px, 4vw, 56px);
    align-items: center;
}
.footer-news-txt h3 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.4vw, 1.9rem);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--paper);
}
.footer-news-txt p { margin: 0; font-size: 1.06rem; line-height: 1.6; color: var(--mist); max-width: 46ch; }

.footer-news-campos { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-news-campos input {
    flex: 1 1 190px;
    min-width: 0;
    padding: 13px 16px;
    border: 1px solid rgba(247, 240, 230, 0.22);
    border-radius: 999px;
    background: rgba(247, 240, 230, 0.06);
    font-family: var(--font-body);
    font-size: 1.06rem;
    color: var(--paper);
}
.footer-news-campos input::placeholder { color: rgba(247, 240, 230, 0.4); }
.footer-news-campos input:focus { outline: none; border-color: var(--fluo); }
.footer-news-campos .btn { flex: 0 0 auto; background: var(--paper); color: var(--ink); }
.footer-news-campos .btn:hover { background: var(--fluo); color: var(--ink); }
.footer-news-check {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    font-size: 0.87rem;
    line-height: 1.45;
    color: var(--mist);
}
.footer-news-check input { margin-top: 2px; flex-shrink: 0; }
.footer-news-check a { color: var(--paper); text-decoration: underline; }
.footer-news-aviso { margin: 10px 0 0; font-size: 0.99rem; color: var(--fluo); }
.footer-news-aviso.es-error { color: var(--sakura); }
.footer-news-aviso[hidden] { display: none; }

@media (max-width: 860px) {
    .footer-news { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    /* Con dos campos y el botón en la misma fila no cabe nada: se apila */
    .footer-news-campos { flex-direction: column; }
    .footer-news-campos input,
    .footer-news-campos .btn { width: 100%; flex: 1 1 auto; justify-content: center; }
}

/* ── Popup: estado "listo" tras apuntarse ── */
.salida-ok { text-align: center; padding: clamp(20px, 4vw, 40px) 0; }
.salida-ok-marca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--fluo);
    color: var(--ink);
    font-size: 30px;
    line-height: 1;
}
.salida-ok h3 {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 500;
    color: var(--ink);
}
.salida-ok p { margin: 0 auto 8px; max-width: 42ch; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.salida-ok .salida-ok-tiempo { font-size: 0.99rem; color: var(--mist); }
.salida-ok .btn { margin-top: 22px; }

/* ═══════════ Casos · huecos de foto pendientes (modo maqueta) ═══════════
   Solo se ven con ?maqueta=1 (o en el mosaico, cuando falta la portada):
   sirven para que el equipo sepa qué imágenes hay que subir a cada caso. */
.caso-tile--sinfoto {
    background: var(--paper-deep);
    display: flex;
    align-items: center;
    justify-content: center;
}
.caso-tile--sinfoto .caso-tile-title { color: var(--ink); }
.caso-tile-hueco {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mist);
    border: 1px dashed var(--line-strong);
}
.caso-hueco {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border: 1px dashed var(--line-strong);
    border-radius: clamp(8px, 1vw, 16px);
    background: var(--paper-deep);
    color: var(--ink-soft);
    font-size: 1.01rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.caso-galeria-ancha.caso-hueco { min-height: clamp(200px, 26vw, 340px); }
.caso-galeria-par .caso-hueco { aspect-ratio: 1 / 1; }
.caso-reto-foto.caso-hueco { aspect-ratio: 1 / 1; margin-top: clamp(24px, 3vw, 40px); }
.caso-hueco--portada { min-height: clamp(260px, 40vw, 560px); border-radius: 0; }
.caso-galeria--maqueta { padding-top: clamp(20px, 3vw, 40px); }

/* ═══════════ Adaptación a móvil y tablet (revisión 18-ago) ═══════════ */

/* Mosaico de casos: 3 columnas en un móvil son recuadros de 125px con el
   título encima. Ilegible. Dos columnas en tablet, una en móvil. */
@media (max-width: 860px) {
    .casos-mosaico { grid-template-columns: repeat(2, 1fr); }
    .caso-tile-title { font-size: 1.05rem; }
    .caso-tile-sub { font-size: 0.9rem; }
}
@media (max-width: 560px) {
    .casos-mosaico { grid-template-columns: 1fr; }
    .caso-tile { aspect-ratio: 4 / 3; }
    .caso-tile-title { font-size: 1.3rem; }
    .caso-tile-sub { font-size: 0.99rem; }
    /* En táctil no hay hover: el subtítulo se ve siempre */
    .caso-tile-sub { max-height: none; opacity: 1; transform: none; margin-top: 4px; }
}

/* Nada de tipografía por debajo de 12px en pantallas pequeñas */
@media (max-width: 560px) {
    .salida-eyebrow { font-size: 0.86rem; }
    .caso-ficha-datos dt,
    .contacto-via span,
    .charla-num { font-size: 0.86rem; }
}

/* Bloques a dos columnas que aún no bajaban a una en tablet */
@media (max-width: 900px) {
    .serv-casos-inner { grid-template-columns: 1fr; }
    .faq-oscura-cols { grid-template-columns: 1fr; }
    .serv-cross-head { grid-template-columns: 1fr; }
}

/* Tablet (760-1024): lo que en móvil ya se apila, pero que en tablet seguía
   en 4-5 columnas de 120px o en dos columnas demasiado estrechas. */
@media (min-width: 761px) and (max-width: 1024px) {
    /* Los pasos de "cómo trabajamos": 5 columnas de 119px no se leen */
    .proceso-bg-list { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
    .proceso-bg { aspect-ratio: auto; padding-bottom: 20px; }
    .proceso-bg-list .proceso-bg-paso { max-width: none; }
}
@media (max-width: 900px) {
    /* El bloque "¿qué es? + compañera" en dos columnas de 330px queda apretado */
    .servicio-doble-bg-inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        row-gap: clamp(36px, 8vw, 60px);
    }
    .servicio-doble-uno,
    .servicio-doble-dos { grid-column: 1; grid-row: auto; max-width: 100%; justify-self: stretch; }
}

/* ═══════════ Ajustes de móvil pedidos el 18-ago ═══════════ */

/* 1. El botón del menú, a la derecha. Al ocultarse el `.nav`, el grid de la
   cabecera se quedaba en dos columnas y el botón caía al centro. */
@media (max-width: 860px) {
    .site-header { grid-template-columns: 1fr auto; }
    .site-header .nav-toggle { justify-self: end; }
}

/* 2. La X del popup de salida no se veía: quedaba encima del panel negro.
   En móvil se pinta clara sobre oscuro y un poco más grande. */
@media (max-width: 760px) {
    .salida-x {
        top: 10px;
        right: 10px;
        width: 42px;
        height: 42px;
        background: rgba(247, 240, 230, 0.92);
        color: var(--ink);
        font-size: 24px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
        z-index: 2;
    }
    .salida-x:hover { background: #fff; color: var(--ink); }
    /* Hueco arriba para que la X no se coma el kanji */
    .salida-izq { padding-top: 58px; }
}

/* 3. "Cómo trabajamos" mantiene su fondo oscuro en móvil.
   La imagen es muy apaisada y en vertical no funciona: se sustituye por el
   negro de la casa, conservando el texto en claro. */
@media (max-width: 760px) {
    .proceso-bg {
        background-color: #0E0C0B;
        border-radius: clamp(18px, 4vw, 28px);
        padding: clamp(28px, 7vw, 40px) clamp(20px, 5vw, 28px) clamp(24px, 6vw, 36px);
    }
    .proceso-bg-head { color: var(--paper); }
    .proceso-bg-head .seccion-num { color: rgba(255, 71, 200, 0.85); }
    .proceso-bg-head h2 { color: var(--paper); }
    .proceso-bg-paso { color: var(--paper); }
    .proceso-bg-paso h3 { color: var(--paper); }
    .proceso-bg-paso p { color: rgba(247, 240, 230, 0.72); }
}

/* Pie de la sección de reseñas: enlace a la ficha de Google */
.resenas-home-pie {
    margin: clamp(24px, 3vw, 36px) 0 0;
    text-align: center;
    font-size: 1.06rem;
}
.resenas-home-pie a { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; }
.resenas-home-pie a:hover { color: var(--fluo); }
.resena-stars { letter-spacing: 2px; }

/* Sección de reseñas cuando solo tenemos la nota de Google (sin textos) */
.resenas-nota {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vw, 24px);
    margin-top: clamp(20px, 3vw, 32px);
    padding: 0 clamp(20px, 4vw, 48px);
    text-align: center;
}
.resenas-nota-cifra {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 5rem);
    line-height: 1;
    color: var(--paper);
}
.resenas-nota-estrellas { font-size: clamp(1.2rem, 2.4vw, 1.8rem); color: var(--fluo); letter-spacing: 3px; }
.resenas-nota-texto { font-size: clamp(1rem, 1.6vw, 1.2rem); color: rgba(247, 240, 230, 0.78); }
.resenas-nota-texto strong { color: var(--paper); font-weight: 500; }
.resenas-nota .btn {
    border-color: rgba(247, 240, 230, 0.5);
    color: var(--paper);
}
.resenas-nota .btn:hover { background: var(--paper); color: var(--ink); }
@media (max-width: 620px) {
    .resenas-nota { flex-direction: column; gap: 10px; }
}

/* Reseñas reales: vienen de 100 y de 700 caracteres, así que las tarjetas
   quedaban desiguales. Se recortan VISUALMENTE a 9 líneas (el texto completo
   sigue en el HTML: ni se toca ni se pierde, que son condiciones de Google)
   y todas las tarjetas quedan a la misma altura. */
.resenas-track { align-items: stretch; }
.resenas-track .resena-card {
    display: flex;
    flex-direction: column;
}
.resenas-track .resena-card blockquote {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* line-height fijo + min-height de 5 líneas: el recorte solo iguala por
       arriba, así que sin el mínimo las reseñas cortas dejaban la tarjeta más
       baja que las demás. Con las dos cosas, todas miden exactamente igual. */
    line-height: 1.62;
    min-height: calc(1.62em * 5);
}
.resenas-track .resena-meta { margin-top: auto; }
.resena-mas {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.96rem;
    color: var(--fluo-deep);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.resena-mas:hover { border-bottom-color: currentColor; }
.h2-resenas .resena-mas { color: var(--fluo); }

@media (max-width: 860px) {
    /* En móvil una reseña larga ocupaba la pantalla entera: se recorta más. */
    .resenas-track .resena-card blockquote {
        -webkit-line-clamp: 4;
        min-height: calc(1.62em * 4);
    }
}

/* =============================================================
   Ajustes de móvil pedidos el 20-ago
   ============================================================= */
@media (max-width: 720px) {
    /* 1 · El arsenal ninja: fuera la ilustración central. En una columna
       estrecha partía la lista de servicios en dos y estorbaba más que sumaba. */
    .arsenal-centro { display: none; }

    /* 2 · Hero: el vídeo es apaisado y en vertical se recorta por el centro, así
       que el ninja quedaba fuera de cuadro. Se corre el encuadre a la derecha
       para que asome por ese lado sin taparse con el texto. */
    .hero-video { object-position: 62% center; }
}

/* =============================================================
   Redes sociales del pie (iconos)
   ============================================================= */
.footer-redes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 18px;
    align-items: center;
}
.footer-redes a {
    display: inline-flex;
    padding: 4px;
}
/* El icono se pinta con máscara: el PNG solo aporta la silueta, así que el
   color lo decide el tema y se puede teñir de rosa al pasar por encima. */
.footer-red-icono {
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    transition: background-color var(--tr-base), transform var(--tr-base);
}
.footer-redes a:hover .footer-red-icono {
    background-color: var(--fluo);
    transform: translateY(-2px);
}
.footer-red-icono--instagram { -webkit-mask-image: url('/assets/img/iconos/rrss-instagram.png'); mask-image: url('/assets/img/iconos/rrss-instagram.png'); }
.footer-red-icono--facebook  { -webkit-mask-image: url('/assets/img/iconos/rrss-facebook.png');  mask-image: url('/assets/img/iconos/rrss-facebook.png'); }
.footer-red-icono--linkedin  { -webkit-mask-image: url('/assets/img/iconos/rrss-linkedin.png');  mask-image: url('/assets/img/iconos/rrss-linkedin.png'); }
.footer-red-icono--tiktok    { -webkit-mask-image: url('/assets/img/iconos/rrss-tiktok.png');    mask-image: url('/assets/img/iconos/rrss-tiktok.png'); }

/* La newsletter del pie, sobre papel: destaca del fondo oscuro del footer */
.footer-news {
    background: var(--paper);
    border-radius: 18px;
    border-top: 0;
    margin-bottom: clamp(24px, 3vw, 36px);
}
.footer-news-txt h3, .footer-news-txt p { color: var(--ink); }
.footer-news-check span { color: var(--ink-soft); }
.footer-news-check a { color: var(--ink); }

/* =============================================================
   Pie en móvil: menos cosas y letra más grande (20-ago)
   ============================================================= */
@media (max-width: 720px) {
    /* La newsletter sube por encima del claim, que es lo que pidió la usuaria */
    .site-footer { display: flex; flex-direction: column; }
    .footer-cta   { order: 0; }
    .footer-news  { order: 1; margin: clamp(18px, 4vw, 28px) 16px clamp(24px, 5vw, 36px); }
    .footer-inner { order: 2; }
    .footer-legal { order: 3; }

    /* Efecto secundario de poner el pie en columna flexible: los bloques que
       llevaban `margin: 0 auto` dejaron de ocupar el ancho. En flexbox, un
       margen automático en el eje transversal CENTRA el elemento a su ancho de
       contenido en lugar de estirarlo — por eso el contacto salía desplazado
       al centro. Se anulan esos márgenes y se fuerza el ancho completo. */
    .footer-inner,
    .footer-legal,
    .footer-cta {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* El pie seguía a dos columnas: la primera la ocupaba el claim, así que el
       contacto arrancaba desplazado. A una columna y a la izquierda. */
    .footer-inner {
        grid-template-columns: 1fr;
        padding-top: clamp(28px, 6vw, 44px);
        padding-bottom: 32px;
        gap: 22px;
    }
    .footer-cols, .footer-col, .footer-claim { text-align: left; }
    .footer-redes { justify-content: flex-start; }

    /* Fuera la columna "Navega": el menú ya está arriba, en la cabecera */
    .footer-col--navega { display: none; }

    /* Fuera la dirección y el claim tachado: en una pantalla estrecha
       alargaban el pie sin aportar */
    .footer-col--contacto p { display: none; }
    .footer-tachado { display: none; }

    /* Letra más grande en el contacto del pie */
    .footer-cols { gap: 26px; }
    .footer-col a { font-size: 1.06rem; }
    .footer-col h3 { font-size: 0.92rem; }

    /* Iconos algo mayores: en el móvil se pulsan con el dedo */
    .footer-red-icono { width: 28px; height: 28px; }
    .footer-redes { gap: 22px; }

    /* La sección de botones venía con una raya y muchísimo aire encima del pie */
    .cta-final { border-top: 0; padding-top: clamp(56px, 12vw, 80px); padding-bottom: clamp(40px, 9vw, 60px); }
}

/* =============================================================
   Newsletter del pie sobre papel: los campos estaban pensados para el
   fondo oscuro (texto crema) y al cambiar el fondo quedaron invisibles.
   ============================================================= */
.footer-news-campos input {
    background: #FFFFFF;
    color: var(--ink);
    border-color: rgba(17, 17, 17, 0.22);
}
.footer-news-campos input::placeholder { color: rgba(17, 17, 17, 0.45); }
.footer-news-campos input:focus {
    border-color: var(--fluo-deep);
    outline: none;
}
.footer-news-check input { accent-color: var(--fluo-deep); }
.footer-news-aviso { color: var(--ink); }

/* =============================================================
   Reservar llamada: calendario, huecos y formulario
   ============================================================= */
.reserva {
    padding: clamp(130px, 15vw, 180px) clamp(20px, 4vw, 48px) clamp(60px, 8vw, 100px);
}
.reserva-inner { max-width: 760px; margin: 0 auto; }
.reserva-eyebrow {
    margin: 0 0 10px;
    font-size: 0.86rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fluo-deep);
}
.reserva h1 {
    margin: 0 0 14px;
    font-size: clamp(2.1rem, 5vw, 3.2rem);
    font-weight: 500;
}
.reserva-intro { color: var(--ink-soft); font-size: 1.08rem; max-width: 54ch; margin: 0 0 34px; }

.reserva-errores {
    background: #FBE3E2;
    border-radius: var(--radius-sm, 10px);
    padding: 14px 18px;
    margin-bottom: 24px;
}
.reserva-errores p { margin: 0 0 4px; color: #A11C18; font-size: 1.06rem; }

/* Migas de pan de los tres pasos */
.reserva-pasos {
    list-style: none;
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0 0 28px;
    font-size: 0.92rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mist);
    flex-wrap: wrap;
}
.reserva-pasos li { display: flex; align-items: center; gap: 10px; }
.reserva-pasos li + li::before { content: "·"; color: var(--mist); }
.reserva-pasos .is-actual { color: var(--ink); }
.reserva-pasos .is-hecho  { color: var(--fluo-deep); }

/* ── Calendario ── */
.reserva-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.reserva-cal-head h2 { margin: 0; font-size: 1.3rem; font-weight: 500; }
.reserva-cal-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--ink);
    text-decoration: none;
    font-size: 1.1rem;
}
.reserva-cal-nav:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.reserva-cal-nav.is-off { opacity: 0.25; }

.reserva-cal-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; }
.reserva-cal-tabla th {
    padding: 8px 0;
    font-size: 0.86rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 500;
}
.reserva-cal-tabla td { padding: 3px; text-align: center; }
.reserva-dia {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 50%;
    font-size: 1.06rem;
    color: var(--ink);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background var(--tr-base), color var(--tr-base), border-color var(--tr-base);
}
a.reserva-dia { border-color: var(--line-strong); }
a.reserva-dia:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* El día de hoy se marca aunque no esté elegido */
a.reserva-dia.is-hoy { border-color: var(--fluo); font-weight: 600; }
.reserva-dia.is-off { color: var(--mist); }
.reserva-dia.is-vacio { visibility: hidden; }
.reserva-cal-pie { margin-top: 16px; font-size: 1.01rem; color: var(--ink-soft); }

/* ── Huecos de media hora ── */
.reserva-volver {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 1.03rem;
    color: var(--ink-soft);
    text-decoration: none;
}
.reserva-volver:hover { color: var(--fluo-deep); }
.reserva-horas h2 { margin: 0 0 6px; font-size: 1.4rem; font-weight: 500; text-transform: capitalize; }
.reserva-sub { margin: 0 0 22px; color: var(--ink-soft); }
.reserva-huecos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}
.reserva-hueco {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 8px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    text-decoration: none;
    color: var(--ink);
    font-size: 1rem;
    transition: background var(--tr-base), color var(--tr-base), border-color var(--tr-base);
}
a.reserva-hueco:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.reserva-hueco.is-off {
    color: var(--mist);
    border-style: dashed;
    text-decoration: line-through;
}

/* ── Formulario final ── */
.reserva-elegido {
    background: var(--paper-deep);
    border-radius: var(--radius-sm, 10px);
    padding: 14px 18px;
    margin: 0 0 26px;
    font-size: 1.05rem;
}
.reserva-form label {
    display: block;
    margin: 18px 0 6px;
    font-size: 1.05rem;
    color: var(--ink-soft);
}
.reserva-form input[type="text"],
.reserva-form input[type="tel"],
.reserva-form input[type="email"],
.reserva-form select,
.reserva-form textarea {
    width: 100%;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    background: transparent;
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--ink);
}
.reserva-form select { padding: 12px 0; }
.reserva-form :focus { outline: none; border-bottom-color: var(--fluo); }
.reserva-consent {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    margin-top: 26px;
    font-size: 1.03rem;
    line-height: 1.55;
}
.reserva-consent input {
    flex: none;
    width: 18px; height: 18px;
    margin-top: 3px;
    accent-color: var(--fluo-deep);
}
.reserva-consent a { color: var(--ink); }
.reserva-form .btn { margin-top: 28px; }

/* ── Confirmación ── */
.reserva-ok {
    background: var(--paper-deep);
    border-radius: var(--radius-sm, 10px);
    padding: clamp(24px, 4vw, 36px);
}
.reserva-ok-cuando {
    margin: 0 0 10px;
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    color: var(--ink);
    text-transform: capitalize;
}
.reserva-ok p { color: var(--ink-soft); }
.reserva-ok .btn { margin-top: 18px; }

@media (max-width: 520px) {
    .reserva-huecos { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
    .reserva-hueco { padding: 12px 6px; font-size: 1.05rem; }
    .reserva-dia { font-size: 1.01rem; }
}

/* =============================================================
   Botón principal sobre fondo oscuro
   El .btn-neon es tinta (#111) sobre papel, y en las secciones oscuras
   (#0E0C0B el CTA de la home, negro el pie y las páginas de tema oscuro)
   quedaba tinta sobre tinta: se leía el texto pero el botón no se veía.
   Sobre oscuro pasa a fluo, que además es lo que más llama.
   ============================================================= */
.h2-cta .btn-neon,
.tema-oscuro .cta-final .btn-neon,
.site-footer .btn-neon,
.footer-cta-btn {
    background: var(--fluo);
    color: var(--ink);
    box-shadow: 0 4px 18px rgba(255, 71, 200, 0.30);
}
.h2-cta .btn-neon:hover,
.tema-oscuro .cta-final .btn-neon:hover,
.site-footer .btn-neon:hover,
.footer-cta-btn:hover {
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 8px 26px rgba(247, 240, 230, 0.28);
}

/* El secundario sobre oscuro también necesita borde claro para verse */
.h2-cta .btn-ghost,
.tema-oscuro .cta-final .btn-ghost,
.site-footer .btn-ghost {
    border-color: rgba(247, 240, 230, 0.55);
    color: var(--paper);
}
.h2-cta .btn-ghost:hover,
.tema-oscuro .cta-final .btn-ghost:hover,
.site-footer .btn-ghost:hover {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
}

/* Excepción: la newsletter del pie está sobre PAPEL, no sobre el negro del
   footer, así que el botón vuelve al oscuro de siempre — el fluo sobre crema
   se quedaba en un contraste de 2,66 y no destacaba. */
.footer-news .btn-neon {
    background: var(--ink);
    color: var(--paper);
    box-shadow: 0 4px 14px rgba(17, 17, 17, 0.16);
}
.footer-news .btn-neon:hover {
    background: var(--fluo);
    color: var(--ink);
    box-shadow: 0 8px 26px rgba(255, 71, 200, 0.42);
}

/* Portada repetida a media altura del artículo, para partir el texto */
.post-img-media {
    margin: 40px 0;
    overflow: hidden;
    border-radius: clamp(8px, 1vw, 14px);
    background: var(--paper-deep);
}
.post-img-media img { display: block; width: 100%; height: auto; }

/* =============================================================
   Banner de cookies
   Barra inferior, no modal: la ley pide consentimiento previo, no
   secuestrar la página. Se puede seguir leyendo mientras se decide,
   pero el banner no se va solo — sin elección no hay consentimiento,
   y seguir navegando no cuenta como aceptar.
   ============================================================= */
.cookies {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    padding: var(--space-sm);
    background: var(--paper-soft);
    border-top: 1px solid var(--line-strong);
    box-shadow: 0 -10px 40px rgba(17, 17, 17, 0.10);
    /* Estado de partida del deslizamiento: el JS añade .is-visible */
    transform: translateY(100%);
    transition: transform var(--tr-base) var(--ease);
}
.cookies.is-visible { transform: translateY(0); }

.cookies-caja {
    max-width: var(--maxw);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-sm) var(--space-md);
}

.cookies-intro { flex: 1 1 380px; }

.cookies-titulo {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--ink);
}

.cookies-texto {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.45;
    margin: 0;
    color: var(--ink-soft);
    max-width: 68ch;
}
.cookies-texto a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cookies-texto a:hover { color: var(--fluo-deep); }

/* --- Panel de preferencias (plegado por defecto) --- */
.cookies-panel {
    flex: 1 1 100%;
    order: 3;
    display: grid;
    gap: var(--space-xs);
    padding-top: var(--space-sm);
    margin-top: 4px;
    border-top: 1px solid var(--line);
}

/* `display: grid` del panel y de las filas gana al `display: none` que el
   navegador aplica por el atributo [hidden]. Sin esto, el panel de
   preferencias aparece siempre desplegado. */
.cookies-panel[hidden],
.cookies [hidden] { display: none; }

.cookies-fila {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--ink-soft);
    cursor: pointer;
}
.cookies-fila--fija { cursor: default; opacity: 0.75; }

.cookies-fila input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--fluo-deep);
}

.cookies-fila strong {
    display: block;
    font-weight: 600;
    color: var(--ink);
}

/* --- Botonera --- */
.cookies-botones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    flex: 0 0 auto;
}

.cookies-btn {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1;
    padding: 13px 22px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background var(--tr-fast), color var(--tr-fast), box-shadow var(--tr-fast);
}
.cookies-btn:hover { background: var(--ink); color: var(--paper); }

.cookies-btn--fluo {
    background: var(--ink);
    color: var(--paper);
}
.cookies-btn--fluo:hover {
    background: var(--fluo);
    color: var(--ink);
    box-shadow: 0 8px 26px rgba(255, 71, 200, 0.38);
}

/* «Preferencias» es secundario, pero sigue siendo un botón visible: no puede
   esconderse detrás de un enlace diminuto. */
.cookies-btn--texto {
    border-color: transparent;
    padding-left: 12px;
    padding-right: 12px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cookies-btn--texto:hover {
    background: transparent;
    color: var(--fluo-deep);
}

.cookies-btn:focus-visible {
    outline: 2px solid var(--fluo-deep);
    outline-offset: 3px;
}

/* En móvil los botones ocupan el ancho y se apilan: dedos, no ratones.
   «Rechazar» y «Aceptar» comparten fila para que ninguno quede escondido
   bajo el pliegue. */
@media (max-width: 640px) {
    .cookies-caja { align-items: stretch; }
    .cookies-botones {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .cookies-btn--texto { grid-column: 1 / -1; order: 3; }
    .cookies-btn { padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .cookies { transition: none; }
}