/* ==========================================================================
   Tema "court" — VerticeB Hub (entrenadores deportivos)
   Colores y tipografías llegan como variables desde los ajustes del panel
   (ver layout.php): --c-accent, --c-dark, --c-light, --f-heading, --f-body,
   --f-brand. Todo lo demás se deriva de ellas con color-mix().
   ========================================================================== */

:root {
    --c-accent-soft: color-mix(in srgb, var(--c-accent) 18%, transparent);
    --c-accent-2: color-mix(in srgb, var(--c-accent) 70%, white);
    --c-dark-2: color-mix(in srgb, var(--c-dark) 72%, black);
    --c-dark-3: color-mix(in srgb, var(--c-dark) 82%, var(--c-accent));
    --c-ink: color-mix(in srgb, var(--c-dark) 88%, black);
    --c-muted: color-mix(in srgb, var(--c-ink) 62%, var(--c-light));
    --c-line: color-mix(in srgb, var(--c-dark) 16%, transparent);
    --c-gold: #f5c542;
    --radius: 1rem;
    --wrap: 76rem;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
    margin: 0;
    font-family: var(--f-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--c-ink);
    background: var(--c-light);
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }

.vb-icon { width: 1.25em; height: 1.25em; flex-shrink: 0; }

.c-wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

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

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

/* ---------- Tipografía ---------- */

.c-eyebrow {
    font-family: var(--f-heading);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--c-dark-3);
}

.is-dark .c-eyebrow { color: var(--c-accent); }

.c-title {
    margin: 0.85rem 0 0;
    font-family: var(--f-heading);
    font-weight: 700;
    font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-wrap: balance;
}

.c-tagline {
    margin-top: 1rem;
    font-family: var(--f-heading);
    font-size: clamp(0.8rem, 0.7rem + 0.4vw, 0.95rem);
    font-weight: 500;
    letter-spacing: 0.42em;
    text-transform: uppercase;
}

.c-body {
    margin-top: 1.1rem;
    max-width: 34rem;
    font-size: 1.02rem;
    color: var(--c-muted);
}

.is-dark .c-body { color: color-mix(in srgb, white 82%, transparent); }

/* ---------- Botones ---------- */

.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 3rem;
    padding: 0.8rem 1.7rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-family: var(--f-heading);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.c-btn .vb-icon { width: 1.05em; height: 1.05em; transition: transform 0.35s var(--ease); }
.c-btn:hover { transform: translateY(-2px); }
.c-btn:hover .vb-icon:last-child { transform: translateX(3px); }

/* Principal: acento sobre fondo oscuro */
.c-btn--accent {
    background: linear-gradient(135deg, var(--c-accent-2), var(--c-accent));
    color: var(--c-dark-2);
    box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--c-accent) 70%, transparent);
}

.c-btn--accent:hover { box-shadow: 0 16px 40px -10px color-mix(in srgb, var(--c-accent) 85%, transparent); }

/* Principal sobre fondo claro: oscuro de marca */
.c-btn--solid {
    background: linear-gradient(135deg, var(--c-dark-3), var(--c-dark));
    color: white;
    box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--c-dark) 80%, transparent);
}

.c-btn--outline {
    border-color: color-mix(in srgb, white 80%, transparent);
    color: white;
    background: color-mix(in srgb, white 4%, transparent);
}

.c-btn--outline:hover { background: white; color: var(--c-dark-2); border-color: white; }

.c-btn--ghost-accent {
    border-color: var(--c-accent);
    color: white;
    background: color-mix(in srgb, var(--c-dark) 55%, transparent);
}

.c-btn--ghost-accent:hover { background: var(--c-accent); color: var(--c-dark-2); }

.c-btn--sm { min-height: 2.5rem; padding: 0.6rem 1.25rem; font-size: 0.68rem; }

.c-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }

/* ---------- Secciones ---------- */

.c-section {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.c-section.is-light {
    background:
        radial-gradient(ellipse 60% 70% at 15% 20%, color-mix(in srgb, white 70%, transparent), transparent 70%),
        linear-gradient(180deg, var(--c-light), color-mix(in srgb, var(--c-light) 88%, var(--c-dark)));
    color: var(--c-ink);
}

.c-section.is-dark {
    background:
        radial-gradient(ellipse 55% 80% at 0% 0%, color-mix(in srgb, var(--c-accent) 14%, transparent), transparent 65%),
        linear-gradient(135deg, var(--c-dark-2), var(--c-dark) 60%, var(--c-dark-3));
    color: white;
}

/* Marca de agua de pista (líneas) en las secciones oscuras */
.c-section.is-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent calc(50% - 0.5px), color-mix(in srgb, white 5%, transparent) 50%, transparent calc(50% + 0.5px)),
        linear-gradient(0deg, transparent calc(30% - 0.5px), color-mix(in srgb, white 4%, transparent) 30%, transparent calc(30% + 0.5px));
    mask-image: radial-gradient(ellipse 70% 80% at 30% 50%, black, transparent 75%);
    pointer-events: none;
}

.c-section > .c-wrap { position: relative; z-index: 1; }

/* Imagen ausente: degradado de marca con líneas de pista, nunca un hueco roto */
.c-placeholder {
    background:
        linear-gradient(90deg, transparent calc(50% - 1px), color-mix(in srgb, white 22%, transparent) 50%, transparent calc(50% + 1px)),
        linear-gradient(0deg, transparent calc(35% - 1px), color-mix(in srgb, white 18%, transparent) 35%, transparent calc(35% + 1px)),
        linear-gradient(0deg, transparent calc(65% - 1px), color-mix(in srgb, white 18%, transparent) 65%, transparent calc(65% + 1px)),
        radial-gradient(ellipse at 70% 30%, color-mix(in srgb, var(--c-accent) 55%, transparent), transparent 60%),
        linear-gradient(160deg, var(--c-dark-3), var(--c-dark-2));
}

/* ---------- Cabecera ---------- */

.c-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    color: white;
    transition: background-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}

.c-header.is-scrolled {
    background: color-mix(in srgb, var(--c-dark-2) 86%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.7);
}

/* Color de fondo fijo elegido en Ajustes: siempre visible, también al bajar.
   Sobre un color claro, textos e iconos pasan a oscuro (.is-light). */
.c-header.has-solid-bg,
.c-header.has-solid-bg.is-scrolled {
    background: var(--c-header-bg);
}

.c-header.is-light { color: var(--c-dark); }
.c-header.is-light .c-menu-toggle { color: var(--c-dark); border-color: color-mix(in srgb, var(--c-dark) 30%, transparent); }
.c-header.is-light .c-btn--ghost-accent:not(:hover) { color: var(--c-dark); background: transparent; }

.c-header-inner {
    display: flex;
    align-items: center;
    gap: 2rem;
    min-height: 5rem;
}

.c-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    margin-right: auto;
}

.c-brand-mark {
    display: grid;
    place-items: center;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 999px;
    overflow: hidden;
    background: radial-gradient(circle at 35% 30%, var(--c-accent-2), var(--c-accent) 55%, var(--c-dark-3));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-accent) 35%, transparent), 0 8px 24px -8px color-mix(in srgb, var(--c-accent) 70%, transparent);
    font-family: var(--f-brand);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--c-dark-2);
}

.c-brand-mark img { width: 100%; height: 100%; object-fit: cover; }

/* Tamaño del logo (Ajustes → Cabecera): el círculo usa --c-mark y el logo
   "tal cual" --c-logo-h / --c-logo-w; en el móvil, algo más pequeños */
.c-brand { --c-mark: 3.1rem; --c-logo-h: 2.75rem; --c-logo-w: 11rem; }
.c-brand.logo-sm { --c-mark: 2.6rem; --c-logo-h: 2.1rem; --c-logo-w: 8.5rem; }
.c-brand.logo-lg { --c-mark: 3.7rem; --c-logo-h: 3.5rem; --c-logo-w: 14rem; }

@media (max-width: 600px) {
    .c-brand { --c-mark: 2.7rem; --c-logo-h: 2.3rem; --c-logo-w: 9rem; }
    .c-brand.logo-sm { --c-mark: 2.4rem; --c-logo-h: 1.9rem; --c-logo-w: 7.5rem; }
    .c-brand.logo-lg { --c-mark: 3.1rem; --c-logo-h: 2.8rem; --c-logo-w: 10.5rem; }
}

.c-brand .c-brand-mark { width: var(--c-mark); height: var(--c-mark); }

/* Logo "tal cual" (Ajustes → Estilo del logo): sin círculo ni brillo, con
   su forma y proporción reales. El alto va en la propia imagen: con
   height: 100% dentro de la caja en rejilla, la imagen salía a su tamaño
   original (el fallo de "logo demasiado grande"). */
.c-brand.is-plain .c-brand-mark {
    display: block;
    width: auto;
    height: auto;
    border-radius: 0;
    overflow: visible;
    background: none;
    box-shadow: none;
}

.c-brand.is-plain .c-brand-mark img {
    display: block;
    width: auto;
    height: var(--c-logo-h);
    max-width: var(--c-logo-w);
    object-fit: contain;
}

/* Altura compacta de la cabecera */
.c-header.is-compact .c-header-inner { min-height: 4rem; }

/* Menú en el centro (solo escritorio: en el móvil es un panel aparte) */
@media (min-width: 961px) {
    /* Tres columnas: marca | menú | botón (aunque no haya botón, el menú queda centrado) */
    .c-header.nav-center .c-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
    .c-header.nav-center .c-brand { margin-right: 0; justify-self: start; }
    .c-header.nav-center .c-header-inner > .c-header-cta { justify-self: end; }
}

/* Texto del menú en mayúsculas */
.c-header.nav-upper .c-nav a:not(.c-btn) { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.74rem; }

/* Página actual resaltada en píldora en vez de subrayada */
.c-header.nav-pill .c-nav a:not(.c-btn)::after { display: none; }
.c-header.nav-pill .c-nav a:not(.c-btn) { padding: 0.45rem 0.95rem; border-radius: 999px; transition: background-color 0.2s ease, opacity 0.2s ease; }
.c-header.nav-pill .c-nav a:not(.c-btn):hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.c-header.nav-pill .c-nav a.is-active { background: color-mix(in srgb, var(--c-accent) 22%, transparent); }
.c-header.nav-pill .c-nav { gap: 0.5rem; }

.c-brand-name {
    display: block;
    font-family: var(--f-brand);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.c-brand-tagline {
    display: block;
    margin-top: 0.2rem;
    font-family: var(--f-heading);
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0.75;
}

.c-nav { display: flex; align-items: center; gap: 2rem; }

.c-nav a {
    position: relative;
    padding: 0.4rem 0;
    font-family: var(--f-heading);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.c-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.15rem;
    height: 2px;
    border-radius: 2px;
    background: var(--c-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease);
}

.c-nav a:hover,
.c-nav a.is-active { opacity: 1; }
.c-nav a:hover::after,
.c-nav a.is-active::after { transform: scaleX(1); }

/* El botón de la cabecera va duplicado dentro del menú solo para el móvil */
.c-nav .c-header-cta { display: none; }

.c-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid color-mix(in srgb, white 30%, transparent);
    border-radius: 999px;
    background: transparent;
    color: white;
    cursor: pointer;
}

@media (max-width: 960px) {
    .c-menu-toggle { display: inline-flex; }
    .c-header-cta { display: none; }

    .c-nav {
        position: fixed;
        inset: 0;
        flex-direction: column;
        justify-content: center;
        gap: 1.75rem;
        background: color-mix(in srgb, var(--c-dark-2) 96%, transparent);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s;
    }

    .c-nav a { font-size: 1.4rem; }
    .c-nav .c-header-cta { display: inline-flex; margin-top: 1rem; }

    .c-header.has-solid-bg .c-nav { background: var(--c-header-bg); }
    .c-header.is-open .c-nav { opacity: 1; visibility: visible; }
    .c-header.is-open .c-menu-toggle { position: relative; z-index: 2; }
}

/* ---------- Hero ---------- */

.c-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(36rem, 92svh, 56rem);
    padding-block: 7rem 4rem;
    overflow: hidden;
    color: white;
    background: var(--c-dark-2);
}

.c-hero-media {
    position: absolute;
    inset: 0;
}

.c-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
}

.c-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--c-dark-2) 92%, transparent) 0%, color-mix(in srgb, var(--c-dark-2) 70%, transparent) 32%, transparent 62%),
        linear-gradient(0deg, color-mix(in srgb, var(--c-dark-2) 80%, transparent), transparent 30%),
        linear-gradient(180deg, color-mix(in srgb, var(--c-dark-2) 55%, transparent), transparent 22%);
}

.c-hero .c-wrap { position: relative; z-index: 1; }
.c-hero-content { max-width: 36rem; }

.c-hero .c-eyebrow { color: var(--c-accent); letter-spacing: 0.42em; }

.c-hero-title {
    margin: 1rem 0 0;
    font-family: var(--f-heading);
    font-weight: 700;
    font-size: clamp(2.6rem, 1.4rem + 4.6vw, 4.6rem);
    line-height: 0.98;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    text-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
}

.c-hero-title span { display: block; }

.c-hero-title .is-accent {
    background: linear-gradient(90deg, var(--c-accent-2), var(--c-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.c-hero .c-tagline { margin-top: 1.4rem; }
.c-hero .c-body { color: color-mix(in srgb, white 86%, transparent); }

.c-hero-locations {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
    margin-top: 2.6rem;
    font-family: var(--f-heading);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.c-hero-locations .vb-icon { color: var(--c-accent-2); }
.c-hero-locations .c-sep { width: 1px; height: 0.9rem; background: color-mix(in srgb, white 45%, transparent); }

.c-hero-locations::after {
    content: '';
    width: 3.5rem;
    height: 1px;
    margin-left: 0.6rem;
    background: color-mix(in srgb, white 50%, transparent);
}

.c-hero-video {
    position: absolute;
    right: var(--gutter);
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0;
    border: 0;
    background: none;
    color: white;
    font-family: var(--f-heading);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.5;
    text-align: left;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.c-hero-video-ring {
    display: grid;
    place-items: center;
    width: 3.3rem;
    height: 3.3rem;
    border: 1.5px solid color-mix(in srgb, white 85%, transparent);
    border-radius: 999px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.35s var(--ease);
}

.c-hero-video:hover .c-hero-video-ring { background: white; color: var(--c-dark-2); transform: scale(1.06); }
.c-hero-video-label { max-width: 9rem; }

@media (max-width: 900px) {
    .c-hero-media img { object-position: 65% center; }
    .c-hero-media::after {
        background:
            linear-gradient(0deg, color-mix(in srgb, var(--c-dark-2) 95%, transparent) 15%, color-mix(in srgb, var(--c-dark-2) 55%, transparent) 60%, color-mix(in srgb, var(--c-dark-2) 40%, transparent));
    }
    .c-hero { align-items: flex-end; }
    .c-hero-video { position: static; margin-top: 2rem; }
}

/* ---------- Sección con características ---------- */

.c-split {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
}

.c-split.is-image-left { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); }
.c-split.is-image-left .c-split-media { order: -1; }

.c-split-media {
    position: relative;
    overflow: hidden;
    min-height: 22rem;
    border-radius: var(--radius);
    box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--c-dark) 75%, transparent), 0 0 0 1px color-mix(in srgb, white 50%, transparent);
}

.c-split-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-split-media.c-placeholder { min-height: 26rem; }

.c-signature {
    position: absolute;
    right: 1.4rem;
    bottom: 1rem;
    font-family: 'Allura', cursive;
    font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem);
    color: white;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    transform: rotate(-4deg);
}

/* Variante "bleed": la imagen ocupa la mitad de la sección y se funde con el fondo */
.c-section.has-bleed .c-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.c-bleed {
    position: absolute;
    inset: 0 0 0 42%;
    z-index: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 32%);
    mask-image: linear-gradient(90deg, transparent, black 32%);
}

.c-bleed.is-left {
    inset: 0 42% 0 0;
    -webkit-mask-image: linear-gradient(270deg, transparent, black 32%);
    mask-image: linear-gradient(270deg, transparent, black 32%);
}

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

.c-bleed.c-placeholder { opacity: 0.6; }

/* Características: rejilla (icono encima) o en línea (icono al lado) */
.c-features {
    display: grid;
    /* --n = nº de características (lo pone la plantilla); --cols lo fuerzan las media queries */
    grid-template-columns: repeat(var(--cols, var(--n, 4)), minmax(0, 1fr));
    gap: 1.6rem 1.25rem;
    margin: 2.4rem 0 0;
    padding: 0;
    list-style: none;
}

.c-feature-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-accent) 22%, white);
    color: var(--c-dark-3);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent) 40%, transparent);
}

.c-feature-icon .vb-icon { width: 1.35rem; height: 1.35rem; }

.c-feature-title {
    margin-top: 1rem;
    font-family: var(--f-heading);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.c-feature-text { margin-top: 0.4rem; font-size: 0.8rem; line-height: 1.45; color: var(--c-muted); }

.c-features.is-inline { gap: 1rem 1.5rem; }
.c-features.is-inline li { display: flex; align-items: center; gap: 0.75rem; }
.c-features.is-inline .c-feature-title { margin: 0; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; }
.c-features.is-inline .c-feature-icon { flex-shrink: 0; width: 2.6rem; height: 2.6rem; }

.is-dark .c-feature-icon {
    background: color-mix(in srgb, white 6%, transparent);
    color: white;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, white 55%, transparent);
}

.is-dark .c-feature-text { color: color-mix(in srgb, white 70%, transparent); }

@media (max-width: 1000px) {
    .c-split,
    .c-split.is-image-left,
    .c-section.has-bleed .c-split { grid-template-columns: minmax(0, 1fr); }
    .c-split.is-image-left .c-split-media { order: 0; }
    .c-features { --cols: 2; }
    .c-features.is-inline { --cols: 2; }
    .c-bleed,
    .c-bleed.is-left { inset: auto 0 0 0; height: 45%; -webkit-mask-image: linear-gradient(0deg, black 40%, transparent); mask-image: linear-gradient(0deg, black 40%, transparent); opacity: 0.55; }
}

@media (max-width: 480px) {
    .c-features { --cols: 1; }
    .c-features:not(.is-inline) li { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; }
    .c-features:not(.is-inline) .c-feature-icon { grid-row: span 2; }
    .c-features:not(.is-inline) .c-feature-title { margin-top: 0.15rem; }
}

/* ---------- Sobre mí con cifras ---------- */

.c-about {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr) minmax(0, 0.6fr);
    align-items: center;
    gap: clamp(1.5rem, 3.5vw, 3rem);
}

.c-about-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9.5;
    border-radius: calc(var(--radius) * 0.6);
    box-shadow: 0 26px 50px -28px color-mix(in srgb, var(--c-dark) 80%, transparent);
}

.c-about-media img { width: 100%; height: 100%; object-fit: cover; }

.c-stats {
    margin: 0;
    padding: 0 0 0 clamp(1.25rem, 3vw, 2.5rem);
    list-style: none;
    border-left: 1px solid var(--c-line);
}

.c-stat {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding-block: 1.1rem;
}

.c-stat + .c-stat { border-top: 1px solid var(--c-line); }

.c-stat-value {
    min-width: 4.5rem;
    font-family: var(--f-heading);
    font-size: clamp(1.8rem, 1.4rem + 1vw, 2.3rem);
    font-weight: 700;
    line-height: 1;
}

.c-stat-label {
    font-family: var(--f-heading);
    font-size: 0.66rem;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-muted);
}

.c-stat.has-icon .c-stat-label { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.03em; color: inherit; }
.c-stat-sublabel { display: block; margin-top: 0.15rem; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.12em; color: var(--c-muted); }

.c-stat-icon {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 999px;
    border: 1.5px solid currentColor;
    opacity: 0.85;
}

.is-dark .c-stats { border-color: color-mix(in srgb, white 18%, transparent); }
.is-dark .c-stat + .c-stat { border-color: color-mix(in srgb, white 14%, transparent); }
.is-dark .c-stat-label,
.is-dark .c-stat-sublabel { color: color-mix(in srgb, white 70%, transparent); }

@media (max-width: 1000px) {
    .c-about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .c-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0 1.5rem; padding: 1rem 0 0; border-left: 0; border-top: 1px solid var(--c-line); }
    .c-stat + .c-stat { border-top: 0; }
}

@media (max-width: 680px) {
    .c-about { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Testimonios ---------- */

.c-testimonials {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

.c-quotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
}

.c-testimonials .c-title { font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.5rem); }

.c-quote {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0;
    padding: 1.5rem 1.4rem 1.3rem;
    border-radius: calc(var(--radius) * 0.75);
    border: 1px solid color-mix(in srgb, var(--c-accent) 26%, transparent);
    background: linear-gradient(160deg, color-mix(in srgb, white 7%, transparent), color-mix(in srgb, white 2%, transparent));
    box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
    transition: transform 0.4s var(--ease), border-color 0.3s ease;
}

.c-quote:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c-accent) 55%, transparent); }

.c-quote .c-quote-mark { width: 1.6rem; height: 1.6rem; color: var(--c-accent); fill: color-mix(in srgb, var(--c-accent) 35%, transparent); }

.c-quote blockquote { margin: 0; font-size: 0.9rem; line-height: 1.55; }

.c-quote figcaption {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
}

.c-avatar {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--c-accent), var(--c-dark-3));
    font-family: var(--f-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: white;
    box-shadow: 0 0 0 2px color-mix(in srgb, white 25%, transparent);
}

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

.c-quote-name { display: block; font-family: var(--f-heading); font-size: 0.78rem; font-weight: 700; }
.c-quote-place { display: block; font-size: 0.7rem; opacity: 0.7; }
.c-stars { display: inline-flex; gap: 0.1rem; margin-left: auto; color: var(--c-gold); }
.c-stars .vb-icon { width: 0.85rem; height: 0.85rem; fill: currentColor; }

.is-light .c-quote { background: white; border-color: var(--c-line); box-shadow: 0 24px 50px -32px color-mix(in srgb, var(--c-dark) 60%, transparent); }

@media (max-width: 900px) {
    .c-testimonials { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Banda promocional ---------- */

.c-section.c-promo { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); }

.c-promo-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.55fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
}

.c-promo .c-title { margin-top: 0.4rem; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); }
.c-promo .c-body { margin-top: 0.4rem; font-size: 0.92rem; }
.c-promo-media img { max-height: 11rem; margin-inline: auto; object-fit: contain; filter: drop-shadow(0 18px 24px color-mix(in srgb, var(--c-dark) 40%, transparent)); }

.c-promo-side {
    padding-left: 1.5rem;
    border-left: 1px solid var(--c-line);
    font-family: var(--f-heading);
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-muted);
}

.c-promo-side::after {
    content: '';
    display: block;
    width: 3rem;
    height: 2px;
    margin-top: 0.9rem;
    border-radius: 2px;
    background: var(--c-accent);
}

.is-dark .c-promo-side { border-color: color-mix(in srgb, white 18%, transparent); color: color-mix(in srgb, white 75%, transparent); }

@media (max-width: 800px) {
    .c-promo-inner { grid-template-columns: minmax(0, 1fr); text-align: left; }
    .c-promo-media img { margin-inline: 0; }
}

/* ---------- Llamada a la acción final ---------- */

.c-cta-bg {
    position: absolute;
    inset: 0 auto 0 0;
    width: 32%;
    -webkit-mask-image: linear-gradient(90deg, black 10%, transparent);
    mask-image: linear-gradient(90deg, black 10%, transparent);
    opacity: 0.55;
}

.c-cta-bg img { width: 100%; height: 100%; object-fit: cover; }

.c-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

.c-cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.c-cta-actions .c-btn { flex: 1 1 14rem; min-height: 3.4rem; }

.c-btn--whatsapp {
    border-color: color-mix(in srgb, var(--c-accent) 60%, transparent);
    background: linear-gradient(135deg, var(--c-dark-3), color-mix(in srgb, var(--c-accent) 45%, var(--c-dark)));
    color: white;
    box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--c-accent) 70%, transparent);
}

.c-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.75rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.74rem;
    color: color-mix(in srgb, white 80%, transparent);
}

.c-info li { display: inline-flex; align-items: center; gap: 0.5rem; }
.c-info .vb-icon { color: var(--c-accent); }

.is-light .c-info { color: var(--c-muted); }
.is-light .c-info .vb-icon { color: var(--c-dark-3); }

@media (max-width: 900px) {
    .c-cta { grid-template-columns: minmax(0, 1fr); }
    .c-cta-bg { width: 60%; opacity: 0.3; }
}

/* ---------- Contacto ---------- */

.c-contact {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

.c-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: var(--radius);
    background: white;
    box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--c-dark) 70%, transparent);
}

.is-dark .c-form { background: color-mix(in srgb, white 6%, transparent); border: 1px solid color-mix(in srgb, white 12%, transparent); }

.c-form label { display: grid; gap: 0.4rem; font-family: var(--f-heading); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.c-form .is-wide { grid-column: 1 / -1; }

.c-form input,
.c-form textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--c-line);
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--c-light) 60%, white);
    font: inherit;
    font-size: 0.95rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--c-ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.c-form input:focus,
.c-form textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }

.is-dark .c-form input,
.is-dark .c-form textarea { background: color-mix(in srgb, black 25%, transparent); border-color: color-mix(in srgb, white 16%, transparent); color: white; }

.c-form .c-btn { justify-self: start; }

.c-notice {
    grid-column: 1 / -1;
    padding: 0.85rem 1rem;
    border-radius: 0.7rem;
    background: var(--c-accent-soft);
    border: 1px solid color-mix(in srgb, var(--c-accent) 45%, transparent);
    font-size: 0.9rem;
}

@media (max-width: 800px) {
    .c-contact { grid-template-columns: minmax(0, 1fr); }
    .c-form { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Galería, eventos, texto libre, redes ---------- */

.c-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.9rem;
    margin-top: 2rem;
}

.c-gallery > * { overflow: hidden; aspect-ratio: 4 / 3; border-radius: calc(var(--radius) * 0.6); }
.c-gallery img,
.c-gallery video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.c-gallery > *:hover img { transform: scale(1.05); }

.c-events { display: grid; gap: 0.75rem; margin: 2rem 0 0; padding: 0; list-style: none; }

.c-event {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1.25rem;
    padding: 1.1rem 1.25rem;
    border-radius: calc(var(--radius) * 0.75);
    background: white;
    box-shadow: 0 20px 40px -32px color-mix(in srgb, var(--c-dark) 70%, transparent);
}

.is-dark .c-event { background: color-mix(in srgb, white 6%, transparent); border: 1px solid color-mix(in srgb, white 10%, transparent); }

.c-event-date {
    display: grid;
    place-items: center;
    width: 4rem;
    padding: 0.5rem 0;
    border-radius: 0.7rem;
    background: linear-gradient(160deg, var(--c-dark-3), var(--c-dark));
    color: white;
    font-family: var(--f-heading);
    line-height: 1.1;
}

.c-event-day { font-size: 1.5rem; font-weight: 700; }
.c-event-month { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-accent-2); }
.c-event-title { font-family: var(--f-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.c-event-meta { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.2rem; font-size: 0.82rem; color: var(--c-muted); }
.is-dark .c-event-meta { color: color-mix(in srgb, white 70%, transparent); }

.c-prose { max-width: 46rem; }
.c-prose .c-body { max-width: none; white-space: pre-line; }

.c-social { display: flex; justify-content: center; gap: 0.9rem; }

.c-social a {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    border: 1.5px solid var(--c-line);
    color: var(--c-dark-3);
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.35s var(--ease);
}

.c-social a:hover { background: var(--c-dark-3); color: white; transform: translateY(-2px); }

/* ---------- Pie ---------- */

.c-footer {
    padding-block: 1.6rem;
    background: var(--c-dark-2);
    color: color-mix(in srgb, white 65%, transparent);
    font-size: 0.78rem;
}

.c-footer .c-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; }
.c-footer a { text-decoration: none; }
.c-footer a:hover { color: var(--c-accent); }

/* ---------- Vídeo (diálogo) ---------- */

.c-dialog {
    width: min(64rem, 92vw);
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: black;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
}

.c-dialog::backdrop { background: color-mix(in srgb, var(--c-dark-2) 85%, transparent); backdrop-filter: blur(6px); }
.c-dialog video { display: block; width: 100%; max-height: 80vh; }

.c-dialog-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    cursor: pointer;
}

/* ---------- Aparición al hacer scroll ---------- */

.js .c-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--d, 0s); }
.js .c-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .c-reveal { opacity: 1; transform: none; transition: none; }
    .c-btn,
    .c-btn .vb-icon,
    .c-quote,
    .c-gallery img,
    .c-hero-video-ring,
    .c-social a { transition: none; }
    .c-btn:hover,
    .c-quote:hover { transform: none; }
}

/* ==========================================================================
   Componentes de páginas interiores (About, Coaching, Camps, Contact)
   ========================================================================== */

/* ---------- Titulares: última línea en acento, variante grande ---------- */

.c-title .is-accent { color: color-mix(in srgb, var(--c-accent) 62%, var(--c-dark)); }

.is-dark .c-title .is-accent {
    background: linear-gradient(90deg, var(--c-accent-2), var(--c-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.c-title--xl { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 3.7rem); }

.c-prose-body .c-body + .c-body { margin-top: 0.9rem; }

.c-textlink {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1.5px solid currentColor;
    font-family: var(--f-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--c-dark-3);
    white-space: nowrap;
}

.is-dark .c-textlink { color: var(--c-accent); }
.c-textlink .vb-icon { transition: transform 0.35s var(--ease); }
.c-textlink:hover .vb-icon { transform: translateX(3px); }

/* ---------- Hero: datos destacados y firma ---------- */

.c-hero-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 0;
    margin: 2.6rem 0 0;
    padding: 0;
    list-style: none;
}

.c-hero-highlights li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-right: 1.4rem;
    margin-right: 1.4rem;
    border-right: 1px solid color-mix(in srgb, white 30%, transparent);
}

.c-hero-highlights li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.c-hero-highlights .vb-icon { width: 1.6rem; height: 1.6rem; color: white; }

.c-hero-highlight-title {
    display: block;
    font-family: var(--f-heading);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.c-hero-highlight-text { display: block; font-size: 0.72rem; opacity: 0.75; }

.c-hero-signature { right: var(--gutter); bottom: 2rem; z-index: 2; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem); }

.c-signature.is-inline {
    position: static;
    display: inline-block;
    margin-top: 1.4rem;
    color: var(--c-ink);
    text-shadow: none;
}

.is-dark .c-signature.is-inline { color: white; }

@media (max-width: 900px) {
    .c-hero-signature { display: none; }
}

/* ---------- Características: tarjetas y círculos ---------- */

.c-features.is-cards li {
    padding: 1.2rem 1.1rem 1.25rem;
    border: 1px solid var(--c-line);
    border-radius: calc(var(--radius) * 0.6);
    background: color-mix(in srgb, white 55%, transparent);
    box-shadow: 0 18px 36px -30px color-mix(in srgb, var(--c-dark) 60%, transparent);
    transition: transform 0.4s var(--ease), border-color 0.3s ease;
}

.c-features.is-cards li:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c-accent) 60%, transparent); }

.c-features.is-cards .c-feature-icon { width: auto; height: auto; background: none; box-shadow: none; justify-content: start; color: var(--c-dark-3); }
.c-features.is-cards .c-feature-icon .vb-icon { width: 1.7rem; height: 1.7rem; }
.c-features.is-cards .c-feature-title { margin-top: 0.8rem; }
.is-dark .c-features.is-cards li { background: color-mix(in srgb, white 5%, transparent); border-color: color-mix(in srgb, white 14%, transparent); }
.is-dark .c-features.is-cards .c-feature-icon { color: var(--c-accent); }

.c-features.is-circles { gap: 1.8rem 2rem; }
.c-features.is-circles li { display: flex; align-items: flex-start; gap: 1.1rem; }
.c-features.is-circles .c-feature-icon { flex-shrink: 0; width: 3.4rem; height: 3.4rem; }
.c-features.is-circles .c-feature-title { margin-top: 0.3rem; }

/* Sin imagen: el texto a un lado y las características al otro */
.c-split.is-no-image { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.c-features.is-aside { margin-top: 0; --n: 2; }

@media (max-width: 480px) {
    .c-features.is-circles,
    .c-features.is-aside { --cols: 1; }
}

/* ---------- Cifras en banda ---------- */

.c-statsband { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }
.c-statsband .c-bleed { inset: 0 0 0 52%; }
.c-statsband-content { max-width: 40rem; }

.c-statrow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.c-statrow li { padding: 0.2rem 1.2rem; border-left: 1px solid var(--c-line); }
.c-statrow li:first-child { padding-left: 0; border-left: 0; }
.is-dark .c-statrow li { border-color: color-mix(in srgb, white 16%, transparent); }

.c-statrow-icon { display: block; color: var(--c-dark-3); }
.c-statrow-icon .vb-icon { width: 1.7rem; height: 1.7rem; }
.is-dark .c-statrow-icon { color: var(--c-accent); }

.c-statrow-value {
    display: block;
    margin-top: 0.7rem;
    font-family: var(--f-heading);
    font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.9rem);
    font-weight: 700;
    line-height: 1;
}

.c-statrow-label {
    display: block;
    margin-top: 0.4rem;
    font-family: var(--f-heading);
    font-size: 0.62rem;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-muted);
}

.c-statrow-label.is-strong { margin-top: 0.9rem; font-weight: 700; color: inherit; }

@media (max-width: 1000px) {
    .c-statsband .c-bleed { inset: auto 0 0 0; }
    .c-statrow li { padding-block: 0.8rem; }
}

@media (max-width: 560px) {
    .c-statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .c-statrow li:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* ---------- Pasos / línea de tiempo ---------- */

.c-steps-media { inset: 0 0 0 58%; opacity: 0.55; }
.c-steps-section.is-light .c-steps-media { opacity: 0.35; }

.c-steps-head {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: end;
    gap: 1rem clamp(1.5rem, 4vw, 3rem);
    max-width: 52rem;
}

.c-steps-head .c-body { margin-top: 0; max-width: 28rem; }

.c-steps {
    display: grid;
    grid-template-columns: repeat(var(--cols, var(--n, 4)), minmax(0, 1fr));
    gap: 2rem 1.5rem;
    margin: 3rem 0 0;
    padding: 0;
    list-style: none;
}

.c-step { position: relative; }

.c-step-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--c-dark-3) 55%, transparent);
    background: var(--c-light);
    color: var(--c-dark-3);
    font-family: var(--f-heading);
    font-size: 0.85rem;
    font-weight: 700;
}

.c-step-icon .vb-icon { width: 1.35rem; height: 1.35rem; }

.is-dark .c-step-icon {
    border-color: color-mix(in srgb, white 70%, transparent);
    background: var(--c-dark-2);
    color: white;
}

.c-step-title {
    margin-top: 1.1rem;
    font-family: var(--f-heading);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.c-step-text { margin-top: 0.5rem; font-size: 0.8rem; line-height: 1.5; color: var(--c-muted); }
.is-dark .c-step-text { color: color-mix(in srgb, white 72%, transparent); }

/* Línea de tiempo: una línea une los iconos, con un chevrón entre pasos */
.c-steps.is-timeline .c-step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 1.55rem;
    left: 3.1rem;
    right: -1.5rem;
    height: 1.5px;
    background: linear-gradient(90deg, var(--c-accent), color-mix(in srgb, var(--c-accent) 35%, transparent));
}

.c-step-chevron { position: absolute; top: 5.2rem; right: -0.6rem; color: var(--c-accent); }

/* Fila con separadores: icono al lado del título */
.c-steps.is-divided { gap: 1.5rem 0; }
.c-steps.is-divided .c-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; align-items: start; padding-inline: 1.1rem; border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.c-steps.is-divided .c-step:first-child { padding-left: 0; border-left: 0; }
.c-steps.is-divided .c-step-icon { width: 2.9rem; height: 2.9rem; border-color: var(--c-accent); }
.is-dark .c-steps.is-divided .c-step-icon { color: var(--c-accent); }
.c-steps.is-divided .c-step-title { margin-top: 0.35rem; font-size: 0.72rem; }
.c-steps.is-divided .c-step-text { margin-top: 0.3rem; font-size: 0.74rem; }

/* Numerados: círculo con el número y flecha hacia el siguiente */
.c-steps.is-numbered .c-step-icon { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-dark-3); }
.is-dark .c-steps.is-numbered .c-step-icon { color: var(--c-accent); }

.c-steps.is-numbered .c-step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 1.55rem;
    left: 4rem;
    right: 0.4rem;
    height: 1px;
    background: currentColor;
    opacity: 0.35;
}

.c-steps.is-numbered .c-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(1.55rem - 3.5px);
    right: 0.4rem;
    width: 7px;
    height: 7px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.45;
}

/* Titular a la izquierda de los pasos */
.c-steps-wrap.is-side { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.c-steps-wrap.is-side .c-steps-head { grid-template-columns: minmax(0, 1fr); }
.c-steps-wrap.is-side .c-steps-head .c-body { margin-top: 0.4rem; }
.c-steps-wrap.is-side .c-steps { margin-top: 0; }

@media (max-width: 1000px) {
    .c-steps-head,
    .c-steps-wrap.is-side { grid-template-columns: minmax(0, 1fr); }
    .c-steps { --cols: 2; }
    .c-steps .c-step::before,
    .c-steps .c-step::after,
    .c-step-chevron { display: none; }
    .c-steps.is-divided .c-step { padding-left: 0; border-left: 0; }
    .c-steps-media { inset: auto 0 0 0; height: 40%; }
}

@media (max-width: 520px) {
    .c-steps { --cols: 1; }
}

/* ---------- Cita con fotos ---------- */

.c-section.c-qgallery { padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem); }

.c-qgallery-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

.c-qgallery-quote { margin: 0; }
.c-qgallery-quote blockquote { position: relative; margin: 1rem 0 0; padding-left: 2.2rem; }
.c-qgallery-quote blockquote p { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); line-height: 1.5; }
.c-qgallery-mark { position: absolute; left: 0; top: 0.1rem; width: 1.6rem; height: 1.6rem; color: var(--c-accent); fill: color-mix(in srgb, var(--c-accent) 35%, transparent); }
.c-qgallery-quote .c-signature { margin-left: 2.2rem; }

.c-qgallery-images { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0.9rem; }

.c-qgallery-img {
    overflow: hidden;
    aspect-ratio: 5 / 4.2;
    border-radius: calc(var(--radius) * 0.6);
    box-shadow: 0 22px 44px -30px color-mix(in srgb, var(--c-dark) 75%, transparent);
}

.c-qgallery-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.c-qgallery-img:hover img { transform: scale(1.05); }

@media (max-width: 900px) {
    .c-qgallery-inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
    .c-qgallery-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Tarjetas ---------- */

.c-cards-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
}

.c-cards {
    display: grid;
    grid-template-columns: repeat(var(--cols, var(--n, 3)), minmax(0, 1fr));
    gap: 1.25rem;
    margin: 2.4rem 0 0;
    padding: 0;
    list-style: none;
}

.c-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: calc(var(--radius) * 0.75);
    background: white;
    box-shadow: 0 26px 50px -34px color-mix(in srgb, var(--c-dark) 70%, transparent);
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.c-card:hover { transform: translateY(-5px); box-shadow: 0 34px 60px -32px color-mix(in srgb, var(--c-dark) 75%, transparent); }

.is-dark .c-card {
    background: color-mix(in srgb, white 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-accent) 26%, transparent);
}

.c-card-media { position: relative; aspect-ratio: 16 / 9.5; overflow: hidden; }
.c-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.c-card:hover .c-card-media img { transform: scale(1.05); }

.c-card-badge {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-dark-3) 92%, transparent);
    color: white;
    font-family: var(--f-heading);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.c-card-body { display: flex; flex: 1; flex-direction: column; padding: 1.2rem 1.3rem 1.25rem; }

.c-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--f-heading);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.c-card-title .vb-icon { color: var(--c-dark-3); }
.is-dark .c-card-title .vb-icon { color: var(--c-accent); }
.c-card-title a { text-decoration: none; }
.c-card-title a::after { content: ''; position: absolute; inset: 0; }

.c-card-subtitle {
    margin-top: 0.3rem;
    font-family: var(--f-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--c-accent) 60%, var(--c-dark));
}

.is-dark .c-card-subtitle { color: var(--c-accent); }

.c-card-text { margin-top: 0.6rem; font-size: 0.85rem; line-height: 1.5; color: var(--c-muted); }
.is-dark .c-card-text { color: color-mix(in srgb, white 72%, transparent); }

.c-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: auto;
    padding-top: 1.1rem;
}

.c-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--f-heading);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-muted);
}

.c-card-meta + .c-card-meta { padding-left: 1rem; border-left: 1px solid var(--c-line); }
.c-card-meta .vb-icon { color: var(--c-dark-3); }
.is-dark .c-card-meta { color: color-mix(in srgb, white 70%, transparent); }
.is-dark .c-card-meta .vb-icon { color: var(--c-accent); }

.c-card-go {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-left: auto;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--c-dark-3), var(--c-dark));
    color: white;
    transition: transform 0.35s var(--ease);
}

.c-card:hover .c-card-go { transform: translateX(3px); }

/* Titular a la izquierda: tarjetas compactas (p. ej. ubicaciones) */
.c-cards-wrap.is-side { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.c-cards-wrap.is-side .c-cards { margin-top: 0; gap: 0.9rem; }
.c-cards-wrap.is-side .c-card-body { padding: 0.95rem 1rem 1.05rem; }
.c-cards-wrap.is-side .c-card-title { font-size: 0.8rem; letter-spacing: 0.06em; }
.c-cards-wrap.is-side .c-card-text { margin-top: 0.3rem; font-size: 0.76rem; }

@media (max-width: 1000px) {
    .c-cards-wrap.is-side { grid-template-columns: minmax(0, 1fr); }
    .c-cards { --cols: 2; }
}

@media (max-width: 600px) {
    .c-cards { --cols: 1; }
}

/* ---------- Horario con fotos ---------- */

.c-section.c-schedule-section { padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem); }

.c-schedule-wrap {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.c-schedule-wrap.is-single { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); }
.c-schedule-wrap > div:first-child { padding-right: clamp(0.5rem, 2vw, 1.5rem); align-self: center; }

.c-schedule { margin: 1.6rem 0 0; padding: 0; list-style: none; }

.c-schedule li {
    position: relative;
    display: grid;
    grid-template-columns: 3.4rem 1rem minmax(0, 1fr);
    align-items: center;
    padding-block: 0.38rem;
    font-size: 0.85rem;
}

.c-schedule li::before {
    content: '';
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.c-schedule li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: calc(3.4rem + 0.5rem - 0.5px);
    top: 50%;
    height: 100%;
    width: 1px;
    background: color-mix(in srgb, var(--c-accent) 40%, transparent);
}

.c-schedule time { grid-column: 1; grid-row: 1; font-family: var(--f-heading); font-size: 0.78rem; font-weight: 700; }
.c-schedule span { grid-column: 3; grid-row: 1; padding-left: 0.6rem; color: var(--c-muted); }
.is-dark .c-schedule span { color: color-mix(in srgb, white 75%, transparent); }

.c-mosaic-main,
.c-mosaic-tile {
    position: relative;
    overflow: hidden;
    min-height: 15rem;
    border-radius: calc(var(--radius) * 0.6);
    box-shadow: 0 24px 50px -32px color-mix(in srgb, var(--c-dark) 75%, transparent);
}

.c-mosaic-main { min-height: 22rem; }
.c-mosaic-main img,
.c-mosaic-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.c-mosaic-script {
    position: absolute;
    left: 1.5rem;
    bottom: 1.4rem;
    font-family: 'Allura', cursive;
    font-size: clamp(2rem, 1.4rem + 1.8vw, 3.1rem);
    line-height: 1;
    color: white;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.5);
    transform: rotate(-6deg);
    transform-origin: left bottom;
}

.c-mosaic-side { display: grid; gap: 1rem; }
.c-mosaic-tile { min-height: 10.5rem; }
.c-mosaic-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--c-dark-2) 75%, transparent), transparent 60%); }

.c-mosaic-caption {
    position: absolute;
    left: 1.1rem;
    bottom: 1rem;
    z-index: 1;
    font-family: var(--f-heading);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: white;
}

@media (max-width: 1000px) {
    .c-schedule-wrap,
    .c-schedule-wrap.is-single { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .c-schedule-wrap > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .c-schedule-wrap,
    .c-schedule-wrap.is-single { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Oferta destacada ---------- */

.c-section.c-highlight-section { padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem); }

.c-highlight {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
}

.c-highlight-media {
    position: relative;
    align-self: stretch;
    overflow: hidden;
    min-height: 16rem;
    border-radius: calc(var(--radius) * 0.6);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
}

.c-highlight-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.c-highlight-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.c-highlight-list li { display: flex; align-items: center; gap: 0.9rem; }
.c-highlight-list .c-feature-icon { flex-shrink: 0; width: 2.7rem; height: 2.7rem; }
.c-highlight-list .c-feature-title { display: block; margin: 0; font-size: 0.7rem; }
.c-highlight-list .c-feature-text { display: block; margin-top: 0.15rem; font-size: 0.74rem; }
.c-highlight .c-actions { margin-top: 1.4rem; }
.c-highlight .c-actions .c-btn { width: 100%; }

@media (max-width: 1000px) {
    .c-highlight { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .c-highlight-media { grid-column: 1 / -1; grid-row: 2; -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 600px) {
    .c-highlight { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Contacto completo ---------- */

.c-cpanel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

.c-methods { display: grid; gap: 0.4rem; margin: 2rem 0 0; padding: 0; list-style: none; max-width: 26rem; }

.c-method {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 0.7rem 0.6rem 0.7rem 0;
    border-radius: 0.8rem;
    text-decoration: none;
    transition: background-color 0.25s ease, padding 0.35s var(--ease);
}

a.c-method:hover { background: color-mix(in srgb, var(--c-accent) 10%, transparent); padding-left: 0.6rem; }

.c-method-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--c-dark-3), var(--c-dark));
    color: white;
    box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--c-dark) 80%, transparent);
}

.c-method-icon .vb-icon { width: 1.35rem; height: 1.35rem; }
.c-method-icon.is-whatsapp { background: linear-gradient(135deg, #1f9d55, #136c3a); }
.c-method-icon.is-mail { background: linear-gradient(135deg, #1f3f6e, #142a4c); }
.c-method-icon.is-instagram { background: linear-gradient(135deg, #1d6b4f, #0f4634); }

.c-method-body { flex: 1; }
.c-method-title { display: block; font-family: var(--f-heading); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.c-method-text { display: block; margin-top: 0.1rem; font-size: 0.86rem; color: var(--c-muted); }
.is-dark .c-method-text { color: color-mix(in srgb, white 70%, transparent); }
.c-method-go { opacity: 0.55; transition: transform 0.35s var(--ease); }
a.c-method:hover .c-method-go { transform: translateX(3px); opacity: 1; }

/* Formulario: siempre tarjeta oscura, también sobre fondo claro */
.c-cform {
    padding: clamp(1.5rem, 3vw, 2.4rem);
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse 70% 60% at 0% 0%, color-mix(in srgb, var(--c-accent) 14%, transparent), transparent 70%),
        linear-gradient(160deg, var(--c-dark-3), var(--c-dark-2));
    color: white;
    box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--c-dark) 90%, transparent);
}

.c-cform .c-eyebrow { color: var(--c-accent); }

.c-cform-title {
    margin: 0.6rem 0 0;
    font-family: var(--f-heading);
    font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
}

.c-cform-text { margin-top: 0.7rem; font-size: 0.9rem; color: color-mix(in srgb, white 78%, transparent); }
.c-cform .c-notice { margin-top: 1.2rem; }

.c-cform-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; margin-top: 1.6rem; }
.c-float { position: relative; display: block; }
.c-float.is-wide { grid-column: 1 / -1; }

.c-float input,
.c-float select,
.c-float textarea {
    width: 100%;
    padding: 1.35rem 1rem 0.55rem;
    border: 1px solid color-mix(in srgb, white 22%, transparent);
    border-radius: 0.7rem;
    background: color-mix(in srgb, black 18%, transparent);
    color: white;
    font: inherit;
    font-size: 0.92rem;
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.c-float textarea { min-height: 7.5rem; resize: vertical; }
.c-float select option { color: var(--c-ink); }

.c-float.is-select::after {
    content: '';
    position: absolute;
    right: 1.1rem;
    top: 1.35rem;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    pointer-events: none;
}

.c-float input:focus,
.c-float select:focus,
.c-float textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }

.c-float > span {
    position: absolute;
    left: 1rem;
    top: 1rem;
    font-size: 0.85rem;
    color: color-mix(in srgb, white 70%, transparent);
    pointer-events: none;
    transition: transform 0.2s ease, font-size 0.2s ease, color 0.2s ease;
    transform-origin: left top;
}

.c-float input:focus + span,
.c-float input:not(:placeholder-shown) + span,
.c-float textarea:focus + span,
.c-float textarea:not(:placeholder-shown) + span,
.c-float select:focus + span,
.c-float select:valid + span {
    transform: translateY(-0.6rem);
    font-size: 0.66rem;
    color: var(--c-accent);
}

.c-float-icon { position: absolute; right: 1rem; top: 1.05rem; opacity: 0.6; pointer-events: none; }
.c-counter { position: absolute; right: 0.9rem; bottom: 0.6rem; font-size: 0.66rem; opacity: 0.55; }

.c-cform-submit { width: 100%; margin-top: 1.1rem; }

.c-cform-privacy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.72rem;
    color: color-mix(in srgb, white 70%, transparent);
    text-align: center;
}

@media (max-width: 900px) {
    .c-cpanel { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
    .c-cform-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Zona de trabajo con mapa ---------- */

.c-area-section { min-height: 24rem; }

.c-area-map {
    position: absolute;
    inset: 0 0 0 38%;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 25%);
    mask-image: linear-gradient(90deg, transparent, black 25%);
}

.c-area-map > img { width: 100%; height: 100%; object-fit: cover; }

.c-pin {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    transform: translate(-50%, -100%);
}

.c-pin-label {
    padding: 0.35rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--c-accent) 55%, transparent);
    border-radius: 0.4rem;
    background: color-mix(in srgb, var(--c-dark-2) 88%, transparent);
    color: white;
    font-family: var(--f-heading);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.c-pin-icon { width: 1.9rem; height: 1.9rem; color: var(--c-accent); fill: color-mix(in srgb, var(--c-accent) 35%, transparent); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)); }

.c-area {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr) minmax(0, 0.6fr);
    align-items: center;
    gap: 1.5rem;
}

.c-area-text { grid-column: 1; }

.c-area-list {
    grid-column: 3;
    padding: 1.3rem 1.4rem;
    border: 1px solid color-mix(in srgb, var(--c-accent) 30%, transparent);
    border-radius: calc(var(--radius) * 0.75);
    background: color-mix(in srgb, var(--c-dark-2) 82%, transparent);
    backdrop-filter: blur(8px);
    color: white;
}

.c-area-list .c-eyebrow { color: var(--c-accent); font-size: 0.62rem; }
.c-area-list ul { display: grid; gap: 0.75rem; margin: 1rem 0 0; padding: 0; list-style: none; font-size: 0.82rem; }
.c-area-list li { display: flex; align-items: center; gap: 0.55rem; }
.c-area-list .vb-icon { width: 1rem; height: 1rem; color: var(--c-accent); }

@media (max-width: 1000px) {
    .c-area-section { display: flex; flex-direction: column; padding-bottom: 0; }
    .c-area { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
    .c-area-list { grid-column: 2; }
    .c-area-map { position: relative; inset: auto; order: 2; height: 20rem; margin-top: 2rem; -webkit-mask-image: linear-gradient(0deg, black 80%, transparent); mask-image: linear-gradient(0deg, black 80%, transparent); }
}

@media (max-width: 640px) {
    .c-area { grid-template-columns: minmax(0, 1fr); }
    .c-area-list { grid-column: 1; }
}

/* ---------- Preguntas frecuentes ---------- */

.c-faq {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

.c-faq-list { display: grid; gap: 0.55rem; }

.c-faq-item {
    border: 1px solid var(--c-line);
    border-radius: 0.6rem;
    background: color-mix(in srgb, var(--c-dark) 5%, white);
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.c-faq-item[open] { border-color: color-mix(in srgb, var(--c-accent) 55%, transparent); background: white; }
.is-dark .c-faq-item { border-color: color-mix(in srgb, white 14%, transparent); background: color-mix(in srgb, white 5%, transparent); }

.c-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    font-family: var(--f-heading);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.c-faq-item summary::-webkit-details-marker { display: none; }
.c-faq-icon { transition: transform 0.3s var(--ease); }
.c-faq-item[open] .c-faq-icon { transform: rotate(45deg); color: var(--c-dark-3); }
.c-faq-answer { padding: 0 1rem 1rem; }
.c-faq-text { font-size: 0.88rem; color: var(--c-muted); }
.c-faq-text + .c-faq-text { margin-top: 0.6rem; }
.is-dark .c-faq-text { color: color-mix(in srgb, white 75%, transparent); }

@media (max-width: 900px) {
    .c-faq { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Llamada final solo con titular y foto ---------- */

.c-section.has-cta-image.is-cta-solo { padding-block: clamp(4.5rem, 3rem + 6vw, 8rem); }

.is-cta-solo .c-cta-bg {
    inset: 0 0 0 auto;
    width: 62%;
    opacity: 1;
    -webkit-mask-image: linear-gradient(270deg, black 45%, transparent);
    mask-image: linear-gradient(270deg, black 45%, transparent);
}

.is-cta-solo .c-cta { grid-template-columns: minmax(0, 1fr); }
.is-cta-solo .c-title { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem); }

@media (max-width: 900px) {
    .is-cta-solo .c-cta-bg { width: 100%; opacity: 0.35; }
}

/* ---------- Pie con menú, 404 ---------- */

.c-footer-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.c-section.c-notfound { padding-block: 10rem 6rem; }

@media (prefers-reduced-motion: reduce) {
    .c-card,
    .c-card-media img,
    .c-card-go,
    .c-qgallery-img img,
    .c-features.is-cards li,
    .c-method,
    .c-faq-icon { transition: none; }
    .c-card:hover,
    .c-features.is-cards li:hover { transform: none; }
}

/* ---------- Ajustes de composición ---------- */

.c-btn { white-space: nowrap; }

/* Los datos destacados del hero pueden ser más anchos que el texto */
@media (min-width: 900px) {
    .c-hero-highlights { flex-wrap: nowrap; width: max-content; max-width: calc(100vw - 2 * var(--gutter)); }
}

.c-testimonials { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2.4fr); }
.c-testimonials .c-title { font-size: clamp(1.6rem, 1rem + 1.6vw, 2.3rem); overflow-wrap: break-word; }
.c-highlight .c-title { font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.3rem); }

@media (max-width: 1000px) {
    .c-split.is-no-image { grid-template-columns: minmax(0, 1fr); }
}

/* Formulario de contacto: aviso de error y campo trampa anti-bots */
.c-notice.is-error { background: color-mix(in srgb, #e5484d 14%, transparent); border-color: color-mix(in srgb, #e5484d 55%, transparent); }
.c-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }