/* ==========================================
   VARIABLES DE MARCA
   Extraídas directamente del logo real (degradado
   magenta -> violeta -> azul), no inventadas.
   ========================================== */
:root {
    --color-pink: #e0217e;
    --color-purple: #60338b;
    --color-blue: #2e4999;
    --color-ink: #1e1b2e;
    --color-muted: #6b6580;
    --color-surface: #f7f6fb;
    --color-surface-2: #efecf7;

    --gradient-brand: linear-gradient(135deg, var(--color-pink) 0%, var(--color-purple) 55%, var(--color-blue) 100%);

    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: "Poppins", var(--font-body);

    --shadow-sm: 0 2px 10px rgba(30, 27, 46, 0.06);
    --shadow-md: 0 14px 34px rgba(30, 27, 46, 0.10);
    --shadow-lg: 0 26px 60px rgba(30, 27, 46, 0.16);

    /* Reskin de variables nativas de Bootstrap 5.3 (sin recompilar Sass) */
    --bs-primary: var(--color-purple);
    --bs-primary-rgb: 96, 51, 139;
    --bs-link-color: var(--color-purple);
    --bs-link-color-rgb: 96, 51, 139;
    --bs-link-hover-color: var(--color-pink);
    --bs-link-hover-color-rgb: 224, 33, 126;
    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--color-ink);
    --bs-border-radius: 0.6rem;
    --bs-border-radius-lg: 0.9rem;
    --bs-border-radius-xl: 1.25rem;
}

html {
    scroll-behavior: smooth;
}

body {
    padding-top: 72px; /* offset por navbar fixed-top */
}

h1, h2, h3, h4, h5, h6,
.font-display {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
}

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

/* ==========================================
   JERARQUÍA DE SECCIÓN (eyebrow + título + bajada)
   Un solo sistema de espaciado reutilizado en toda
   la página en vez de márgenes sueltos por sección.
   ========================================== */
.section-header {
    max-width: 640px;
    margin: 0 auto 3.25rem;
    text-align: center;
}
.section-header .badge-soft {
    margin-bottom: 1.1rem;
}
.section-header h2 {
    font-size: clamp(1.55rem, 1vw + 1.3rem, 2.15rem);
    line-height: 1.3;
    margin-bottom: 0.85rem;
}
.section-header p {
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 0;
}

/* ==========================================
   NAVBAR
   ========================================== */
.brand-word {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--color-ink);
}

#mainNav .nav-link {
    position: relative;
    font-weight: 500;
    color: var(--color-ink);
    padding: 0.5rem 0.9rem;
    border-radius: 50px;
    transition: color 0.2s ease, background 0.2s ease;
}
/* ::before (no ::after) a propósito: .dropdown-toggle usa su propio
   ::after nativo de Bootstrap para la flechita — si lo pisamos acá,
   la flechita se rompe (esto pasó y se corrigió). */
#mainNav .nav-link::before {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0.15rem;
    height: 2px;
    background: var(--gradient-brand);
    border-radius: 2px;
    transition: left 0.25s ease, right 0.25s ease;
}
#mainNav .nav-link:hover,
#mainNav .nav-link:focus-visible {
    color: var(--color-purple);
}
#mainNav .nav-link:hover::before,
#mainNav .nav-link:focus-visible::before {
    left: 0;
    right: 0;
}
#mainNav .nav-link.active {
    color: var(--color-purple);
    font-weight: 600;
    background: var(--color-surface);
}
#mainNav .nav-link.active::before {
    display: none;
}
#mainNav .dropdown-toggle::after {
    vertical-align: 0.1em;
    margin-left: 0.4rem;
    transition: transform 0.2s ease;
}
#mainNav .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}
#mainNav .nav-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(96, 51, 139, 0.18);
}
#mainNav .navbar-toggler {
    border: none;
    padding: 0.35rem;
}
#mainNav .navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(96, 51, 139, 0.18);
}

/* ==========================================
   DROPDOWN "SERVICIOS" (desktop)
   ========================================== */
#mainNav .dropdown-menu {
    border: none;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: 0.5rem;
    margin-top: 0.5rem;
    min-width: 15rem;
}
#mainNav .dropdown-item {
    display: flex;
    align-items: center;
    border-radius: 0.6rem;
    padding: 0.65rem 0.9rem;
    font-size: 0.925rem;
    color: var(--color-ink);
}
#mainNav .dropdown-item i {
    color: var(--color-purple);
    width: 1.2rem;
}
#mainNav .dropdown-item:hover,
#mainNav .dropdown-item:focus {
    background: var(--color-surface);
    color: var(--color-ink);
}
#mainNav .dropdown-item:active {
    background: var(--gradient-brand);
    color: #fff;
}
#mainNav .dropdown-item:active i {
    color: #fff;
}
#mainNav .dropdown-divider {
    margin: 0.4rem 0.5rem;
    border-color: rgba(30, 27, 46, 0.08);
}

/* ==========================================
   MENÚ MOBILE (Bootstrap Offcanvas)
   ========================================== */
@media (max-width: 991.98px) {
    #mainNavOffcanvas {
        width: min(85vw, 340px);
    }
    #mainNavOffcanvas .offcanvas-header {
        border-bottom: 1px solid rgba(30, 27, 46, 0.06);
        padding: 1.25rem 1.5rem;
    }
    #mainNavOffcanvas .offcanvas-body {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
    }
    #mainNavOffcanvas .navbar-nav {
        gap: 0.25rem;
    }
    #mainNavOffcanvas .nav-link {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 0.9rem 0.75rem;
        border-radius: 0.7rem;
        font-size: 1.02rem;
    }
    #mainNavOffcanvas .nav-link i {
        width: 1.5rem;
        text-align: center;
        font-size: 1.1rem;
        color: var(--color-muted);
        transition: color 0.2s ease;
    }
    #mainNavOffcanvas .nav-link::before {
        display: none;
    }
    #mainNavOffcanvas .nav-link:hover,
    #mainNavOffcanvas .nav-link:focus-visible {
        background: var(--color-surface);
    }
    #mainNavOffcanvas .nav-link.active {
        background: var(--color-surface);
    }
    #mainNavOffcanvas .nav-link.active i {
        color: var(--color-pink);
    }
    #mainNavOffcanvas .nav-item.ms-lg-2 {
        margin-top: 1rem;
    }
    #mainNavOffcanvas .nav-item.ms-lg-2 .btn {
        width: 100%;
        justify-content: center;
        padding-block: 0.85rem;
    }

    #mainNavOffcanvas .nav-caret {
        flex-shrink: 0;
        background: none;
        border: none;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-muted);
        transition: transform 0.25s ease, color 0.2s ease;
    }
    #mainNavOffcanvas .nav-caret[aria-expanded="true"] {
        transform: rotate(180deg);
        color: var(--color-purple);
    }
    #mainNavOffcanvas .nav-sublist {
        list-style: none;
        padding: 0.25rem 0 0.5rem 2.6rem;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }
    #mainNavOffcanvas .nav-sublist a {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.6rem 0.5rem;
        border-radius: 0.5rem;
        color: var(--color-muted);
        text-decoration: none;
        font-size: 0.925rem;
    }
    #mainNavOffcanvas .nav-sublist a:hover {
        background: var(--color-surface);
        color: var(--color-ink);
    }
    #mainNavOffcanvas .nav-sublist i {
        font-size: 0.9rem;
        color: var(--color-pink);
        width: 1.1rem;
    }

    .offcanvas-extra {
        margin-top: auto;
        padding-top: 1.5rem;
    }
    .offcanvas-whatsapp {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 1rem;
        border-radius: var(--bs-border-radius-lg);
        background: var(--color-surface);
        text-decoration: none;
        color: var(--color-ink);
    }
    .offcanvas-whatsapp strong {
        display: block;
        font-size: 0.9rem;
    }
    .offcanvas-whatsapp span span {
        display: block;
        font-size: 0.78rem;
        color: var(--color-muted);
    }
}

/* ==========================================
   SISTEMA DE BOTONES
   Una sola forma en todo el sitio: se define vía las
   variables locales de Bootstrap 5.3 (--bs-btn-*), así
   btn/btn-sm/btn-lg y cualquier variante heredan el mismo
   radio, padding y foco sin pelear con la especificidad.
   ========================================== */
.btn {
    --bs-btn-border-radius: 50px;
    --bs-btn-padding-y: 0.7rem;
    --bs-btn-padding-x: 1.75rem;
    --bs-btn-font-weight: 600;
    --bs-btn-focus-box-shadow: 0 0 0 4px rgba(96, 51, 139, 0.18);
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-sm {
    --bs-btn-border-radius: 50px;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1.35rem;
    --bs-btn-font-size: 0.875rem;
}
.btn-lg {
    --bs-btn-border-radius: 50px;
    --bs-btn-padding-y: 0.95rem;
    --bs-btn-padding-x: 2.25rem;
}
.btn:focus-visible {
    outline: none;
    box-shadow: var(--bs-btn-focus-box-shadow);
}

/* Primario: gradiente de marca, con barrido de brillo al hover */
.btn-gradient {
    background: var(--gradient-brand);
    color: #fff;
    border: none;
    box-shadow: var(--shadow-sm);
}
.btn-gradient::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.35) 40%, transparent 60%);
    transform: translateX(-120%);
    transition: transform 0.6s ease;
}
.btn-gradient:hover,
.btn-gradient:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.btn-gradient:hover::after,
.btn-gradient:focus-visible::after {
    transform: translateX(120%);
}
.btn-gradient:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Secundario: outline de marca, para fondos claros */
.btn-outline-brand {
    border: 2px solid var(--color-purple);
    color: var(--color-purple);
    background: transparent;
}
.btn-outline-brand:hover,
.btn-outline-brand:focus-visible {
    background: var(--color-purple);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.btn-outline-brand:active {
    transform: translateY(0);
}

/* Secundario sobre fondo oscuro */
.btn-outline-light-brand {
    border: 2px solid rgba(255, 255, 255, 0.6);
    color: #fff;
    background: transparent;
}
.btn-outline-light-brand:hover,
.btn-outline-light-brand:focus-visible {
    background: #fff;
    color: var(--color-purple);
    border-color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.btn-outline-light-brand:active {
    transform: translateY(0);
}

.text-gradient {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(96, 51, 139, 0.08);
    color: var(--color-purple);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.4rem 1rem;
    border-radius: 50px;
}
.badge-soft.on-dark {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* Modificador de .badge-soft para cuando el contenido es una declaración
   de valor en sí misma, no un eyebrow de sección (metadata de bajo peso).
   Mismo pill, pero texto en formato oración (no versalitas) e ícono en
   círculo de color — evita que se confunda con un eyebrow que el usuario
   ya aprendió a saltear en el resto del sitio. */
.badge-soft.value-pill {
    background: #fff;
    box-shadow: var(--shadow-sm);
    color: var(--color-ink);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    padding: 0.5rem 1.25rem 0.5rem 0.5rem;
    gap: 0.65rem;
}
.badge-soft.value-pill i {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-brand);
    color: #fff;
    font-size: 0.85rem;
}

/* Link-CTA dentro de tarjetas: se distingue de un link de texto normal */
.card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-purple);
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
}
.card-cta i {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}
.card-cta:hover {
    color: var(--color-pink);
    gap: 0.65rem;
}
.card-cta:hover i {
    transform: translateX(3px);
}

/* ==========================================
   LAYOUT / SECCIONES
   ========================================== */
.section {
    padding: 5rem 0;
}
.section-sm {
    padding: 3rem 0;
}
.section-lg {
    padding: 7rem 0;
}
.bg-surface {
    background: var(--color-surface);
}

/* ==========================================
   FONDO CON GLOW DE MARCA (hero + CTA final)
   ========================================== */
.glow-bg {
    position: relative;
    background: radial-gradient(ellipse 120% 100% at 20% -10%, rgba(224, 33, 126, 0.35), transparent 55%),
                radial-gradient(ellipse 120% 100% at 90% 110%, rgba(46, 73, 153, 0.35), transparent 55%),
                var(--color-ink);
    color: #fff;
    overflow: hidden;
}

/* ==========================================
   HERO
   ========================================== */
.hero {
    padding-bottom: 6.5rem;
}
.hero-title {
    font-size: clamp(2rem, 1.6vw + 1.6rem, 2.85rem);
    line-height: 1.2;
}
.hero .subtitle {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.1rem;
    line-height: 1.65;
    max-width: 560px;
}
/* No exclusivo de .hero a propósito — es un renglón de confianza para
   usar sobre cualquier fondo oscuro (glow-bg), no solo el hero del home. */
.trust-strip {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}
.trust-strip i {
    color: var(--color-pink);
}

/* Variante suave de .icon-wrap: fondo lavanda translúcido + ícono de
   color en vez de degradé sólido + ícono blanco. Mismo tamaño/radio que
   el .icon-wrap por defecto — es solo un cambio de peso/contraste para
   cuando 4+ íconos en fila no deberían competir visualmente con un CTA
   o un headline cercano (ver nosotros.php, sección "Cómo lo hacemos"). */
.icon-wrap.icon-wrap-soft {
    background: rgba(96, 51, 139, 0.08);
    color: var(--color-purple);
}

/* Curva de transición hero -> siguiente sección */
.hero-shape {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 70px;
    background: var(--color-surface);
    clip-path: ellipse(60% 100% at 50% 100%);
}

/* Composición flotante del hero (mockup abstracto, sin datos falsos) */
.hero-visual {
    position: relative;
    padding: 2rem 1rem;
}
.hero-card {
    background: #fff;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.25rem;
    transform: rotate(-3deg);
}
.hero-card-dots {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 1rem;
}
.hero-card-dots span {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    display: inline-block;
    background: var(--color-surface-2);
}
.hero-card-dots span:first-child { background: var(--color-pink); }
.hero-card-dots span:nth-child(2) { background: #f4c542; }
.hero-card-dots span:nth-child(3) { background: #34c77b; }
.hero-card-bar {
    height: 0.6rem;
    border-radius: 50px;
    background: var(--color-surface-2);
    margin-bottom: 0.6rem;
}
.hero-card-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 90px;
    margin-top: 1.25rem;
}
.hero-card-chart .bar {
    flex: 1;
    border-radius: 6px 6px 0 0;
    background: var(--gradient-brand);
    opacity: 0.85;
}
.hero-badge-float {
    position: absolute;
    left: -1rem;
    bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #fff;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 0.75rem 1.1rem;
    transform: rotate(3deg);
}
.hero-badge-float i {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.hero-badge-float strong {
    display: block;
    font-family: var(--font-display);
    color: var(--color-ink);
    line-height: 1.1;
}
.hero-badge-float span {
    font-size: 0.75rem;
    color: var(--color-muted);
}

/* ==========================================
   TARJETAS
   ========================================== */
.card-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2.25rem 2rem;
    min-height: 15rem;
    border: 1px solid rgba(30, 27, 46, 0.06);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    height: 100%;
    overflow: hidden;
}
.card-brand::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-brand);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.card-brand:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}
.card-brand:hover::before {
    opacity: 1;
}
.icon-wrap {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-brand);
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}
.card-brand h3 {
    font-size: 1.05rem;
    line-height: 1.35;
    margin-bottom: 0.6rem;
    color: var(--color-ink);
}
.card-brand p {
    font-size: 0.9rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
}

/* ==========================================
   ESTADÍSTICAS
   ========================================== */
.stat-number {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 3.2rem);
    font-weight: 800;
    color: var(--color-ink);
    line-height: 1;
}
.stat-number .accent {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stat-label {
    color: var(--color-muted);
    font-weight: 500;
}

/* ==========================================
   PROCESO — showcase estático de 4 columnas
   Reemplaza el sticky-scroll anterior: ahora las 4 etapas se
   ven todas a la vez, cada una con un mockup de producto propio
   (formulario, herramienta de diseño, editor de código, sitio
   publicado) dentro de un timeline numerado. Sin JS de sync.
   ========================================== */
.process-showcase {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    padding: 3.5rem 2rem 2rem;
    background: rgba(255, 255, 255, 0.02);
}
.process-timeline {
    position: absolute;
    top: 0;
    left: 2rem;
    right: 2rem;
    height: 0;
    display: none;
}
@media (min-width: 992px) {
    .process-timeline {
        display: block;
        border-top: 2px solid;
        border-image: linear-gradient(90deg, var(--color-pink), var(--color-purple), var(--color-blue)) 1;
    }
}
.timeline-node {
    position: absolute;
    top: 0;
    transform: translate(-50%, -50%);
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--color-ink);
    border: 2px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-display);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 6px var(--color-ink), 0 0 18px rgba(224, 33, 126, 0.25);
}

.process-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}
@media (min-width: 992px) {
    .process-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }
    .process-col {
        padding: 0 1.5rem;
        border-left: 1px solid rgba(255, 255, 255, 0.08);
    }
    .process-col:first-child {
        border-left: none;
        padding-left: 0;
    }
    .process-col:last-child {
        padding-right: 0;
    }
}
.process-col h3 {
    color: #fff;
    font-size: 1.15rem;
    margin: 1.5rem 0 0.5rem;
}
@media (min-width: 992px) {
    .process-col h3 {
        margin-top: 0;
        text-align: center;
    }
}
.process-col > p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.88rem;
    line-height: 1.55;
    margin-bottom: 1.5rem;
}
@media (min-width: 992px) {
    .process-col > p {
        text-align: center;
        min-height: 2.7em;
    }
}
.process-col .timeline-node-mobile {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 2px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-display);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 992px) {
    .process-col .timeline-node-mobile {
        display: none;
    }
}

.process-check-list {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.process-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.4;
}
.process-check-list i {
    flex-shrink: 0;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    margin-top: 0.05rem;
}

.process-chip {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1.5rem;
    padding: 0.85rem 1.1rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}
.process-chip .chip-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.6rem;
    border: 1.5px solid var(--accent);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.process-chip span {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
}

/* --- Mockup base compartida --- */
.pmock {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.9rem;
    padding: 0.75rem;
}
.pmock-bar {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 0.65rem;
}
.pmock-bar span {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}
.pmock-bar span:first-child { background: var(--color-pink); }
.pmock-bar span:nth-child(2) { background: #f4c542; }
.pmock-bar span:nth-child(3) { background: #34c77b; }

/* --- Mockup 1: Descubrimiento — formulario con sidebar --- */
.pmock-discovery .body {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 0.5rem;
}
.pmock-discovery .sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.pmock-discovery .side-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.4rem;
    border-radius: 0.4rem;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.55);
}
.pmock-discovery .side-item.is-active {
    background: rgba(224, 33, 126, 0.12);
    color: #fff;
}
.pmock-discovery .side-item i {
    font-size: 0.7rem;
    color: var(--color-pink);
}
.pmock-discovery .form-panel {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.pmock-discovery .form-title {
    font-size: 0.66rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.1rem;
}
.pmock-discovery .form-input {
    height: 1.6rem;
    border-radius: 0.35rem;
    background: rgba(255, 255, 255, 0.07);
}
.pmock-discovery .form-btn {
    margin-top: 0.2rem;
    height: 1.5rem;
    border-radius: 50px;
    background: var(--gradient-brand);
}

/* --- Mockup 2: Diseño — herramienta con lienzo claro --- */
.pmock-design .body {
    display: grid;
    grid-template-columns: 1.6rem 1fr;
    gap: 0.5rem;
}
.pmock-design .tool-col {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
    padding-top: 0.2rem;
}
.pmock-design .tool-col i {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
}
.pmock-design .canvas {
    background: #f4f2fa;
    border-radius: 0.5rem;
    padding: 0.6rem;
}
.pmock-design .canvas .headline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.72rem;
    color: var(--color-ink);
    line-height: 1.3;
    margin-bottom: 0.4rem;
}
.pmock-design .canvas .cta {
    width: 45%;
    height: 0.55rem;
    border-radius: 50px;
    background: var(--gradient-brand);
    margin-bottom: 0.45rem;
}
.pmock-design .canvas .avatars {
    display: flex;
    gap: 0.3rem;
}
.pmock-design .canvas .avatars span {
    flex: 1;
    height: 1.1rem;
    border-radius: 0.3rem;
    background: rgba(30, 27, 46, 0.08);
}

/* --- Mockup 3: Desarrollo — editor de código --- */
.pmock-dev .tabs {
    display: flex;
    gap: 0.85rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.4rem;
}
.pmock-dev .tabs span {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.35);
}
.pmock-dev .tabs span.is-active {
    color: #fff;
    font-weight: 600;
}
.pmock-dev .code {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.6rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.5);
    white-space: pre;
    margin-bottom: 0.6rem;
}
.pmock-dev .code .tag { color: var(--color-pink); }
.pmock-dev .code .attr { color: #7dd3fc; }
.pmock-dev .code .str { color: #fbbf24; }
.pmock-dev .commit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    padding: 0.5rem 0.6rem;
}
.pmock-dev .commit-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.7);
}
.pmock-dev .commit-info i {
    color: #34c77b;
}
.pmock-dev .commit-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.15rem;
    height: 0.9rem;
}
.pmock-dev .commit-bars span {
    width: 0.2rem;
    border-radius: 1px;
    background: var(--gradient-brand);
}

/* --- Mockup 4: Lanzamiento — navegador con sitio publicado --- */
.pmock-launch .url-bar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50px;
    padding: 0.3rem 0.7rem;
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.6rem;
}
.pmock-launch .url-bar i {
    color: #34c77b;
    font-size: 0.6rem;
}
.pmock-launch .site-preview {
    background: #f4f2fa;
    border-radius: 0.5rem;
    padding: 0.6rem;
}
.pmock-launch .site-preview .headline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--color-ink);
    line-height: 1.3;
    margin-bottom: 0.4rem;
}
.pmock-launch .site-preview .cta {
    width: 55%;
    height: 0.6rem;
    border-radius: 50px;
    background: var(--gradient-brand);
}
.pmock-launch .status-card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.pmock-launch .status-card i {
    color: var(--color-pink);
    font-size: 1.1rem;
}
.pmock-launch .status-card strong {
    display: block;
    color: #fff;
    font-size: 0.78rem;
}
.pmock-launch .status-card .live {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.6);
}
.pmock-launch .status-card .dot-live {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #34c77b;
}

/* ==========================================
   MINI-CARRUSELES (scroll-snap nativo, sin librerías)
   Scroll horizontal con snap + botones prev/next que
   hacen scrollBy(). Funciona con touch/trackpad nativo
   y no requiere JS para el caso base (progressive enhancement).
   ========================================== */
.scroller-wrap {
    position: relative;
}
.scroller {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0.25rem;
    padding: 0.25rem 0.25rem 1.25rem;
    margin: 0 -0.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.scroller::-webkit-scrollbar {
    display: none;
}
.scroller > * {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 100%;
}
@media (min-width: 576px) {
    .scroller > * { width: calc(50% - 0.625rem); }
}
@media (min-width: 992px) {
    .scroller > * { width: calc(33.333% - 0.834rem); }
}
.scroller.scroller-4 > * {
    width: 100%;
}
@media (min-width: 576px) {
    .scroller.scroller-4 > * { width: calc(50% - 0.625rem); }
}
@media (min-width: 992px) {
    .scroller.scroller-4 > * { width: calc(25% - 0.94rem); }
}

.scroller-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 0.75rem;
}
.scroller-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(30, 27, 46, 0.08);
    box-shadow: var(--shadow-md);
    color: var(--color-purple);
    font-size: 1.1rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.scroller-nav:hover {
    background: var(--gradient-brand);
    color: #fff;
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}
.scroller-nav:active {
    transform: translateY(0);
}

.scroller-dots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.scroller-dot {
    width: 0.55rem;
    height: 0.55rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-surface-2);
    cursor: pointer;
    transition: all 0.25s ease;
}
.scroller-dot:hover {
    background: var(--color-purple);
    opacity: 0.6;
}
.scroller-dot.active {
    width: 1.6rem;
    border-radius: 50px;
    background: var(--gradient-brand);
}

.team-card {
    background: #fff;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--shadow-sm);
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 2.25rem 1.5rem;
    min-height: 14rem;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.team-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
/* Variante con una cita corta por persona — usada solo en nosotros.php
   para que esa página profundice sobre el equipo en vez de repetir tal
   cual la tarjeta teaser del home (mismo componente, más información). */
.team-card-detailed .team-role {
    margin-bottom: 0.75rem;
}
.team-card-detailed .team-quote {
    font-size: 0.82rem;
    font-style: italic;
    line-height: 1.55;
    color: var(--color-muted);
    margin: 0;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(30, 27, 46, 0.07);
}
.team-card .avatar-lg {
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1rem;
    display: block;
    padding: 3px;
    background: var(--gradient-brand);
}

/* ==========================================
   TESTIMONIOS (home) — carrusel oscuro
   Vuelve al carrusel (.scroller, autoplay ~5s ya provisto por
   main.js módulo 3) en vez del muro estático: con 4 citas
   completas, un grid 2x2 alarga demasiado el scroll en mobile
   — el carrusel muestra una a la vez sin perder ninguna.
   ========================================== */
.testimonial-card-dark {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.testimonial-card-dark:hover {
    transform: translateY(-4px);
    border-color: rgba(224, 33, 126, 0.3);
    background: rgba(255, 255, 255, 0.06);
}
.testimonial-card-dark .quote-mark {
    font-family: var(--font-display);
    font-size: 2.75rem;
    line-height: 1;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.5rem;
}
.testimonial-card-dark .quote {
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.7;
    font-size: 0.95rem;
    margin-bottom: 0;
}
.testimonial-card-dark .author-row {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.testimonial-card-dark .avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
    padding: 2px;
    background: var(--gradient-brand);
    flex-shrink: 0;
}
.testimonial-card-dark .author-name {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
}
.testimonial-card-dark .author-company {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
}

/* Tercera tarjeta honesta del carrusel de testimonios: solo hay 2 clientes
   reales citables (Casper, Byus) — en vez de completar el grid con una cita
   inventada, mismo patrón que .result-card-invite pero en el idioma de
   tarjeta oscura (borde discontinuo translúcido, ícono sólido de énfasis
   único en vez de icon-wrap-soft, ver regla de icon-wrap en CLAUDE.md). */
.testimonial-card-invite {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.2);
    align-items: center;
    text-align: center;
    justify-content: center;
    text-decoration: none;
}
.testimonial-card-invite .icon-wrap {
    margin: 0 auto 1rem;
}
.testimonial-card-invite h3 {
    color: #fff;
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}
.testimonial-card-invite p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.875rem;
    margin-bottom: 0;
}
.testimonial-card-invite:hover {
    border-color: rgba(224, 33, 126, 0.4);
}

/* ==========================================
   RECURSOS / BLOG (home) — editorial destacado + lista
   Reemplaza el carrusel de 4 cards idénticas: el artículo
   más reciente se muestra grande (foto real de fondo +
   texto superpuesto), los otros 3 en una lista compacta.
   La jerarquía visual comunica "esto es lo nuevo" en vez
   de tratar los 4 artículos como intercambiables.
   ========================================== */
.blog-showcase {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 992px) {
    .blog-showcase {
        grid-template-columns: 1.15fr 1fr;
    }
}
.blog-featured {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 320px;
    border-radius: 1.25rem;
    overflow: hidden;
    text-decoration: none;
}
@media (min-width: 992px) {
    .blog-featured {
        min-height: 100%;
    }
}
.blog-featured img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.blog-featured:hover img {
    transform: scale(1.05);
}
.blog-featured-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 2rem;
    background: linear-gradient(0deg, rgba(10, 8, 18, 0.94) 0%, rgba(10, 8, 18, 0.55) 55%, transparent 100%);
}
.blog-tag {
    display: inline-block;
    background: var(--gradient-brand);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    margin-bottom: 0.85rem;
}
.blog-featured-overlay h3 {
    color: #fff;
    font-size: 1.4rem;
    line-height: 1.3;
    margin-bottom: 0.6rem;
}
.blog-featured-overlay p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 0.85rem;
    max-width: 46ch;
}
.blog-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
}

.blog-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.blog-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    padding: 0.85rem;
    text-decoration: none;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.blog-list-item:hover {
    transform: translateY(-3px);
    border-color: rgba(224, 33, 126, 0.35);
    background: rgba(255, 255, 255, 0.06);
}
.blog-list-thumb {
    width: 64px;
    height: 64px;
    border-radius: 0.65rem;
    overflow: hidden;
    flex-shrink: 0;
}
.blog-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-list-body {
    flex: 1;
    min-width: 0;
}
.blog-tag-sm {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-pink);
    margin-bottom: 0.3rem;
}
.blog-list-body h4 {
    color: #fff;
    font-size: 0.88rem;
    line-height: 1.35;
    margin: 0;
}
.blog-list-arrow {
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.blog-list-item:hover .blog-list-arrow {
    background: var(--gradient-brand);
    border-color: transparent;
    transform: rotate(45deg);
}

/* ==========================================
   CASOS DE ÉXITO (home): grid de tarjetas tipo "logo directory".
   La cabecera usa el patrón compartido .section-split (ver arriba).
   ========================================== */
.results-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 576px) {
    .results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 992px) {
    .results-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.result-card {
    background: #fff;
    border: 1px solid rgba(30, 27, 46, 0.08);
    border-radius: 1.25rem;
    padding: 2.25rem 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    min-height: 15rem;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.result-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.result-card-logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.9rem;
    color: var(--color-ink);
    letter-spacing: -0.01em;
}
/* Si en vez de texto se coloca un <img> (logo real del cliente),
   se contiene a una altura fija en vez de mostrarse a tamaño
   natural del archivo — así cualquier logo (ancho, cuadrado,
   alto) queda proporcional y alineado con el resto de la grilla. */
.result-card-logo img {
    max-height: 46px;
    max-width: 80%;
    width: auto;
    object-fit: contain;
}
.result-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(30, 27, 46, 0.07);
}
.result-card-footer strong {
    display: block;
    font-size: 0.9rem;
    color: var(--color-ink);
}
.result-card-footer span {
    font-size: 0.8rem;
    color: var(--color-muted);
}
.result-card-link {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.result-card:hover .result-card-link {
    background: var(--gradient-brand);
    color: #fff;
    transform: rotate(45deg);
}

.result-card-invite {
    border-style: dashed;
    border-color: rgba(96, 51, 139, 0.3);
    background: var(--color-surface);
    align-items: center;
    text-align: center;
    justify-content: center;
    text-decoration: none;
}
.result-card-invite .icon-wrap {
    margin: 0 auto 1rem;
}
.result-card-invite h3 {
    font-size: 1.05rem;
    color: var(--color-ink);
    margin-bottom: 0.4rem;
}
.result-card-invite p {
    font-size: 0.875rem;
    margin-bottom: 0;
}

/* ==========================================
   CASOS DE ÉXITO: miniatura tipo navegador
   Marco con degradé de marca (border-box trick) para que
   la única captura real del sitio (Casper, paleta naranja/
   negro ajena a la marca) no aparezca como un recorte suelto
   sin relación visual con el resto de la página.
   ========================================== */
.case-thumb {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 2px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, var(--gradient-brand) border-box;
    margin-bottom: 1.25rem;
}
.case-thumb-bar {
    background: var(--color-surface-2);
    padding: 0.5rem 0.7rem;
    display: flex;
    gap: 0.3rem;
}
.case-thumb-bar span {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(30, 27, 46, 0.15);
    display: inline-block;
}
.case-thumb img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    object-position: top;
    display: block;
}
/* Wrapper solo para capturas reales: une la foto a la paleta de
   marca con un velo de degradé en multiply (sutil, no oculta la
   captura) en vez de dejarla "cruda" dentro del marco. */
.case-thumb-media {
    position: relative;
    overflow: hidden;
}
.case-thumb-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(224, 33, 126, 0.22) 0%, transparent 42%, transparent 60%, rgba(46, 73, 153, 0.24) 100%);
    mix-blend-mode: multiply;
    pointer-events: none;
}
.case-thumb-live::before {
    content: "Cliente real";
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    z-index: 2;
    background: var(--gradient-brand);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.3rem 0.7rem;
    border-radius: 50px;
    box-shadow: var(--shadow-sm);
}
.case-thumb-abstract {
    height: 160px;
    padding: 1.25rem;
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
}
.case-thumb-abstract .bar {
    height: 0.55rem;
    border-radius: 50px;
    background: var(--color-surface-2);
}
.case-thumb-abstract .chip {
    align-self: flex-start;
    margin-top: 0.4rem;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    background: var(--gradient-brand);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
}

/* ==========================================
   FAQ — cabecera editorial + card de contacto enriquecida
   + acordeón con ícono propio (no el acordeón "plano" default
   de Bootstrap). El bloque se apoya sobre una decoración
   ambiental muy sutil (dos manchas radiales, casi imperceptibles)
   para que el fondo claro no se sienta plano — nunca protagonismo.
   ========================================== */
.faq-section {
    position: relative;
    overflow: hidden;
}
.faq-section::before,
.faq-section::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.faq-section::before {
    width: 26rem;
    height: 26rem;
    top: -12%;
    right: -8%;
    background: radial-gradient(circle, rgba(96, 51, 139, 0.06), transparent 70%);
}
.faq-section::after {
    width: 24rem;
    height: 24rem;
    bottom: -18%;
    left: -8%;
    background: radial-gradient(circle, rgba(224, 33, 126, 0.05), transparent 70%);
}

/* ==========================================
   .section-split — cabecera editorial reutilizable
   Fila completa, headline a la izquierda + frase editorial
   secundaria a la derecha (mismo peso que un "aside", nunca
   compite con el headline). Alternativa a .section-header
   (centrado, genérico) para cualquier sección del sitio —
   documentado en DESIGN-SYSTEM.md. Nació en el FAQ, reutilizado
   ahora en Servicios/Proceso/Testimonios/Recursos del home.
   ========================================== */
.section-split {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 3rem;
}
.section-split-main {
    max-width: 620px;
}
.section-split-main h2 {
    font-size: clamp(1.7rem, 1.2vw + 1.4rem, 2.4rem);
    margin-bottom: 0.85rem;
}
.section-split-main p {
    margin-bottom: 0;
}
.section-split-aside {
    flex-shrink: 0;
    padding-left: 1.5rem;
    border-left: 2px solid rgba(96, 51, 139, 0.2);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.7;
    color: var(--color-muted);
}
/* Variante para secciones .glow-bg (fondo oscuro) */
.section-split.on-dark .section-split-main p {
    color: rgba(255, 255, 255, 0.7);
}
.section-split.on-dark .section-split-aside {
    border-left-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 991.98px) {
    .section-split {
        flex-direction: column;
        align-items: flex-start;
    }
    .section-split-aside {
        border-left: none;
        border-top: 2px solid rgba(96, 51, 139, 0.2);
        padding-left: 0;
        padding-top: 0.75rem;
    }
    .section-split.on-dark .section-split-aside {
        border-top-color: rgba(255, 255, 255, 0.18);
    }
}

/* ==========================================
   SPEC LIST — ítem con título corto + descripción
   Para listas donde cada punto es una frase larga con justificación
   propia (ej. "HTTPS en todo el sitio, sin excepciones..."), que sin
   separación queda ambigua: ¿es un beneficio? ¿un riesgo? ¿qué es?
   Separar en título corto (qué es) + descripción (por qué importa)
   resuelve eso. .check-list se queda para listas de frases cortas que
   no necesitan esa separación — no es un reemplazo general.
   ========================================== */
.spec-list-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    margin-bottom: 1.1rem;
}
.spec-list-label.on-dark {
    color: rgba(255, 255, 255, 0.5);
}
.spec-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    height: 100%;
    padding: 1.1rem 1.25rem;
    border-radius: var(--bs-border-radius-lg);
    background: #fff;
    border: 1px solid rgba(30, 27, 46, 0.07);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.spec-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.spec-item-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(96, 51, 139, 0.08);
    color: var(--color-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}
.spec-item strong {
    display: block;
    color: var(--color-ink);
    font-size: 0.92rem;
    margin-bottom: 0.3rem;
}
.spec-item p {
    color: var(--color-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}
/* Variante para uso dentro de .glow-bg — mismo lenguaje de card oscura
   translúcida que .bento-card/.fit-check.on-dark, nunca relleno sólido
   (ver DESIGN-SYSTEM.md §3). */
.spec-item.on-dark {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}
.spec-item.on-dark:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(224, 33, 126, 0.3);
}
.spec-item.on-dark .spec-item-icon {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-pink);
}
.spec-item.on-dark strong {
    color: #fff;
}
.spec-item.on-dark p {
    color: rgba(255, 255, 255, 0.65);
}
/* Variante en columna: mismo card que .spec-item (incluso mezclado en
   la misma fila que texto normal), pero con un número grande como
   elemento dominante arriba en vez de ícono+texto en fila — para que
   un stat (ver "Rendimiento que se mide" en servicios-web.php) combine
   visualmente con el resto de las cards .spec-item de la misma página
   ("Seguridad de base") en vez de quedar suelto sin borde/fondo. */
.spec-item.spec-item-stat {
    flex-direction: column;
    align-items: flex-start;
}
.spec-item.spec-item-stat .inline-stat-icon {
    margin-bottom: 0.85rem;
}
.spec-item.spec-item-stat .num {
    margin-bottom: 0.3rem;
}
.spec-item.spec-item-stat .inline-stat-title {
    margin-top: 0;
}

.faq-body {
    position: relative;
    z-index: 1;
}
.faq-intro {
    position: sticky;
    top: 100px;
}
.faq-contact-card {
    background: #fff;
    border: 1px solid rgba(30, 27, 46, 0.08);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 2rem;
    display: flex;
    flex-direction: column;
}
.faq-contact-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.faq-contact-card .icon-wrap {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.15rem;
    margin-bottom: 0;
}
.faq-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-muted);
    background: var(--color-surface);
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
    white-space: nowrap;
}
.faq-status-pill .dot-live {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #34c77b;
    flex-shrink: 0;
}
.faq-contact-card h3 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
    color: var(--color-ink);
}
.faq-contact-card > p {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}
.faq-contact-card .btn {
    margin-bottom: 1.5rem;
}
.faq-feature-list {
    list-style: none;
    padding: 1.25rem 0 0;
    margin: 0;
    border-top: 1px solid rgba(30, 27, 46, 0.07);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.faq-feature-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--color-muted);
}
.faq-feature-list i {
    color: var(--color-muted);
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* Lista única (no cards sueltas apiladas): un solo contenedor con
   bordes redondeados, cada pregunta separada por un divisor interno.
   Cada fila lleva un ícono propio del tema de la pregunta — no todas
   las preguntas de una página son intercambiables entre sí (una es
   sobre precio, otra sobre plazos, otra sobre soporte), así que el
   ícono es información, no decoración repetida. */
.accordion-brand {
    display: block;
    background: #fff;
    border: 1px solid rgba(30, 27, 46, 0.08);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.accordion-brand .accordion-item {
    border: none;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid rgba(30, 27, 46, 0.08);
}
.accordion-brand .accordion-item:last-child {
    border-bottom: none;
}
.accordion-brand .accordion-button {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-ink);
    transition: background 0.2s ease;
}
.accordion-brand .accordion-button.collapsed:hover {
    background: rgba(30, 27, 46, 0.025);
}
.accordion-brand .accordion-button:not(.collapsed) {
    background: var(--color-surface);
    color: var(--color-purple);
    box-shadow: none;
}
.accordion-brand .accordion-button:focus {
    box-shadow: none;
}
.accordion-brand .accordion-button:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px rgba(96, 51, 139, 0.18);
}
.accordion-brand .accordion-button::after {
    display: none;
}
.accordion-brand .accordion-button > span:not(.accordion-item-icon):not(.accordion-icon) {
    flex: 1;
}
.accordion-item-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    background: rgba(96, 51, 139, 0.08);
    color: var(--color-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    transition: background 0.25s ease, color 0.25s ease;
}
.accordion-brand .accordion-button:not(.collapsed) .accordion-item-icon {
    background: var(--gradient-brand);
    color: #fff;
}
.accordion-brand .accordion-icon {
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    margin-left: auto;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.accordion-brand .accordion-button:not(.collapsed) .accordion-icon {
    background: var(--gradient-brand);
    color: #fff;
    transform: rotate(180deg);
}
.accordion-brand .accordion-body {
    /* 1.5rem (padding del botón) + 2.5rem (ícono) + 1rem (gap) = 5rem,
       para que el texto de la respuesta arranque alineado con el
       texto de la pregunta, no con el ícono. */
    padding: 0 1.5rem 1.5rem 5rem;
    /* Mismo fondo que el .accordion-button activo (var(--color-surface))
       — sin esto, el body queda transparente y muestra el blanco del
       .accordion-item detrás, cortando la tarjeta abierta en dos tonos
       distintos justo donde termina el botón. */
    background: var(--color-surface);
    color: var(--color-muted);
    line-height: 1.7;
    font-size: 0.95rem;
}
@media (max-width: 575.98px) {
    .accordion-brand .accordion-body {
        padding-left: 1.5rem;
    }
}

/* ==========================================
   FOOTER
   ========================================== */
.site-footer {
    background: var(--color-ink);
}
.footer-links a,
.footer-links span {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    display: block;
    padding: 0.3rem 0;
}
.footer-links a:hover {
    color: #fff;
}
.social-links a {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transition: background 0.25s ease;
}
.social-links a:hover {
    background: var(--gradient-brand);
    color: #fff;
}

/* ==========================================
   WHATSAPP FLOTANTE
   ========================================== */
.whatsapp-float {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}
.whatsapp-tooltip {
    background: var(--color-ink);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 1rem;
    border-radius: 50px;
    white-space: nowrap;
    animation: wa-pulse-tooltip 2.5s infinite ease-in-out;
}
.whatsapp-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.7rem;
    box-shadow: var(--shadow-lg);
    animation: wa-pulse-ring 2.5s infinite ease-in-out;
}
@keyframes wa-pulse-tooltip {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
@keyframes wa-pulse-ring {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
    50% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
}

@media (max-width: 767.98px) {
    .whatsapp-btn { width: 52px; height: 52px; font-size: 1.4rem; }
}

/* ==========================================
   PAGE HERO — encabezado de páginas internas
   (más simple que el hero del home: sin mockup)
   ========================================== */
.page-hero {
    padding: 6.5rem 0 5rem;
    text-align: center;
}
.page-hero .subtitle {
    max-width: 640px;
    margin-inline: auto;
}
.page-hero.text-lg-start {
    text-align: left;
}

/* Número grande de la página 404 */
.error-code {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(4.5rem, 14vw, 8rem);
    line-height: 1;
}

/* ==========================================
   LISTA DE BENEFICIOS (check + texto)
   Usada en cards de servicio y secciones de alcance.
   ========================================== */
.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.925rem;
    color: var(--color-ink);
    line-height: 1.5;
}
.check-list i {
    color: var(--color-pink);
    font-size: 1.05rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}
.check-list.on-dark li {
    color: rgba(255, 255, 255, 0.82);
}

/* Chip "para qué sirve" — usado en las cards comparativas de
   servicios-web.php (landing vs. multi-página). */
.process-deliverable {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.25rem;
    padding: 0.45rem 1rem;
    border-radius: 50px;
    background: var(--color-surface);
    color: var(--color-purple);
    font-size: 0.85rem;
    font-weight: 600;
    align-self: flex-start;
}

/* ==========================================
   TABLA "CUÁNDO SÍ / CUÁNDO NO" (calificación,
   usada sobre todo en sistemas a medida)
   ========================================== */
.fit-check {
    background: #fff;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 2rem;
    height: 100%;
}
.fit-check.fit-yes .fit-check-icon {
    background: var(--gradient-brand);
    color: #fff;
}
.fit-check.fit-no {
    background: var(--color-surface);
    box-shadow: none;
}
.fit-check.fit-no .fit-check-icon {
    background: var(--color-surface-2);
    color: var(--color-muted);
}
.fit-check-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}
.fit-check h3 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}
.fit-check ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--color-muted);
}
.fit-check ul li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.fit-check.fit-yes ul li i { color: var(--color-pink); }
.fit-check.fit-no ul li i { color: var(--color-muted); }

/* Variante para uso dentro de secciones .glow-bg — mismo lenguaje
   de card oscura translúcida que .bento-card/.result-card (nunca
   relleno sólido), la distinción yes/no se mantiene por el ícono. */
.fit-check.on-dark {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
}
.fit-check.on-dark.fit-no {
    background: rgba(255, 255, 255, 0.02);
}
.fit-check.on-dark h3 {
    color: #fff;
}
.fit-check.on-dark ul {
    color: rgba(255, 255, 255, 0.65);
}
.fit-check.on-dark.fit-no .fit-check-icon {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
}
.fit-check.on-dark.fit-no ul li i {
    color: rgba(255, 255, 255, 0.4);
}

/* ==========================================
   STAT INLINE — número + etiqueta chica (para
   secciones de "el problema" en páginas de servicio)
   ========================================== */
.inline-stat {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}
.inline-stat .num {
    display: block;
    line-height: 1.1;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2rem;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Título corto (qué es) separado de la descripción (por qué importa) —
   mismo criterio que .spec-item, para cuando la "etiqueta" de un stat
   es en realidad una sigla + una oración larga pegada (ej. "LCP — el
   elemento principal..."), no una frase corta autoexplicativa. */
.inline-stat-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-ink);
    margin-top: 0.3rem;
    margin-bottom: 0.15rem;
}
.inline-stat.on-dark .inline-stat-title {
    color: #fff;
}
.inline-stat .label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-muted);
    line-height: 1.45;
}
.inline-stat.on-dark .label {
    color: rgba(255, 255, 255, 0.68);
}
.inline-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-bottom: 0.75rem;
}

/* Texto de cuerpo legible sobre fondo oscuro — .text-white-50 (Bootstrap,
   50% opacidad) es correcto para metadata/captions chicas, pero de baja
   legibilidad para un párrafo explicativo de varias líneas como los que
   suman las secciones de contenido de las páginas de servicio. */
.text-on-dark-body {
    color: rgba(255, 255, 255, 0.75);
}

/* ==========================================
   MESH DE MARCA — segunda aplicación del degradé
   Manchas radiales muy tenues (6-10% opacidad) para que la
   marca se sienta también en el cuerpo de una sección clave
   por página, no solo en los bordes (hero/CTA). A diferencia
   de .glow-bg (full-bleed, solo fondos oscuros), esto vive
   detrás de contenido claro sin robarle contraste al texto.
   ========================================== */
.mesh-brand {
    position: relative;
    isolation: isolate;
}
.mesh-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 12% 15%, rgba(224, 33, 126, 0.09), transparent 42%),
        radial-gradient(circle at 88% 30%, rgba(46, 73, 153, 0.09), transparent 46%),
        radial-gradient(circle at 50% 95%, rgba(96, 51, 139, 0.07), transparent 50%);
    pointer-events: none;
}

/* ==========================================
   MINI-MOCKUP: landing vs. sitio multi-página
   (servicios-web.php) — comparador visual, no solo texto.
   ========================================== */
.mini-mockup {
    border-radius: 0.75rem;
    background: var(--color-surface);
    border: 1px solid rgba(30, 27, 46, 0.06);
    padding: 0.85rem;
    margin-bottom: 1.25rem;
}
.mini-mockup-dots {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 0.7rem;
}
.mini-mockup-dots span {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--color-surface-2);
}
/* Landing: una sola columna, un solo objetivo, un solo CTA */
.mini-mockup-landing .mini-mockup-stack {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.mini-mockup-landing .block {
    border-radius: 0.4rem;
    background: var(--color-surface-2);
}
.mini-mockup-landing .block-hero {
    height: 2.1rem;
    background: var(--gradient-brand);
    opacity: 0.85;
}
.mini-mockup-landing .block-line {
    height: 0.5rem;
    width: 80%;
}
.mini-mockup-landing .block-cta {
    align-self: center;
    margin-top: 0.35rem;
    width: 45%;
    height: 0.7rem;
    border-radius: 50px;
    background: var(--gradient-brand);
}
/* Multi-página: un nodo raíz conectado a varias secciones */
.mini-mockup-sitemap .tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.mini-mockup-sitemap .tree-root {
    padding: 0.3rem 0.9rem;
    border-radius: 50px;
    background: var(--gradient-brand);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
}
.mini-mockup-sitemap .tree-branch {
    width: 1px;
    height: 0.6rem;
    background: rgba(30, 27, 46, 0.15);
}
.mini-mockup-sitemap .tree-row {
    position: relative;
    display: flex;
    gap: 1.4rem;
}
.mini-mockup-sitemap .tree-row::before {
    content: "";
    position: absolute;
    top: -0.6rem;
    left: 1.4rem;
    right: 1.4rem;
    height: 1px;
    background: rgba(30, 27, 46, 0.15);
}
.mini-mockup-sitemap .tree-leaf {
    position: relative;
    padding: 0.3rem 0.6rem;
    border-radius: 0.4rem;
    background: #fff;
    border: 1px solid rgba(30, 27, 46, 0.08);
    font-size: 0.62rem;
    color: var(--color-muted);
    font-weight: 600;
}
.mini-mockup-sitemap .tree-leaf::before {
    content: "";
    position: absolute;
    top: -0.6rem;
    left: 50%;
    width: 1px;
    height: 0.6rem;
    background: rgba(30, 27, 46, 0.15);
}

/* ==========================================
   MINI-MOCKUP: panel de gestión (servicios-ecommerce.php)
   ========================================== */
.mgmt-panel {
    background: #fff;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    height: 100%;
}
.mgmt-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
}
.mgmt-panel-head strong {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--color-ink);
}
.mgmt-panel-head span {
    font-size: 0.7rem;
    color: var(--color-muted);
    background: var(--color-surface);
    padding: 0.25rem 0.65rem;
    border-radius: 50px;
}
.mgmt-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-top: 1px solid rgba(30, 27, 46, 0.06);
}
.mgmt-row .swatch {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
    background: var(--gradient-brand);
    opacity: 0.85;
}
.mgmt-row .info {
    flex: 1;
    min-width: 0;
}
.mgmt-row .info .line {
    height: 0.5rem;
    width: 70%;
    border-radius: 50px;
    background: var(--color-surface-2);
    margin-bottom: 0.35rem;
}
.mgmt-row .info .line-sm {
    height: 0.4rem;
    width: 40%;
    border-radius: 50px;
    background: var(--color-surface-2);
}
.mgmt-status {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 50px;
}
.mgmt-status.is-paid { background: rgba(52, 199, 123, 0.15); color: #1f8a56; }
.mgmt-status.is-transit { background: rgba(96, 51, 139, 0.12); color: var(--color-purple); }
.mgmt-status.is-pending { background: var(--color-surface-2); color: var(--color-muted); }
.mgmt-panel-foot {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    height: 2.5rem;
    margin-top: 1.1rem;
}
.mgmt-panel-foot .bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: var(--gradient-brand);
    opacity: 0.8;
}

/* ==========================================
   MINI-MOCKUP: gráfico CPL / ROAS (servicios-ads.php)
   ========================================== */
.metric-chart {
    background: #fff;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.75rem;
}
.metric-chart-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.metric-chart-legend {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.metric-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-muted);
}
.metric-chart-legend .dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
}
.metric-chart-legend .dot.cpl { background: var(--color-surface-2); border: 2px solid var(--color-muted); }
.metric-chart-legend .dot.roas { background: var(--gradient-brand); }
.metric-chart-body {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    height: 140px;
}
.metric-chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
    justify-content: flex-end;
}
.metric-chart-col .cpl-bar {
    width: 55%;
    border-radius: 6px 6px 0 0;
    background: var(--color-surface-2);
    border: 2px solid var(--color-muted);
    border-bottom: none;
}
.metric-chart-col .month {
    font-size: 0.7rem;
    color: var(--color-muted);
    margin-top: 0.35rem;
}
.metric-chart-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.metric-chart-line polyline {
    fill: none;
    stroke: url(#metricChartGradient);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.metric-chart-line circle {
    fill: var(--color-pink);
}
.metric-chart-caption {
    margin-top: 1.25rem;
    font-size: 0.78rem;
    color: var(--color-muted);
    text-align: center;
}

/* ==========================================
   COMPARADOR DE PLATAFORMAS (servicios-ads.php,
   "Meta y TikTok no son intercambiables")
   Contenido comparativo por fila (mismo atributo, dos valores)
   en vez de dos cards independientes que no se pueden leer
   una al lado de la otra. Mobile-first: cada fila es un grid de
   2 columnas con el label arriba ocupando todo el ancho; desde
   768px pasa a 3 columnas (label + Meta + TikTok) en una sola
   línea, como una tabla real. Vive en .glow-bg — mismo lenguaje
   de card oscura translúcida que .bento-card/.spec-item.on-dark.
   ========================================== */
.platform-compare {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--bs-border-radius-lg);
    padding: 0.5rem 1.5rem;
}
.platform-compare-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "label label" "meta tiktok";
    gap: 0.35rem 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.platform-compare-row:last-child {
    border-bottom: none;
}
.platform-compare-label {
    grid-area: label;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
}
.platform-compare-value {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
}
.platform-compare-value.is-meta { grid-area: meta; }
.platform-compare-value.is-tiktok { grid-area: tiktok; }
.platform-compare-head {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    padding-top: 1.25rem;
}
.platform-compare-head .platform-compare-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
}
.platform-compare-head .platform-compare-value i {
    color: var(--color-pink);
}
@media (min-width: 768px) {
    .platform-compare-row {
        grid-template-columns: 1.3fr 1fr 1fr;
        grid-template-areas: "label meta tiktok";
        align-items: center;
        padding: 1.1rem 0;
    }
    .platform-compare-label {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.55);
        text-transform: none;
        letter-spacing: normal;
        font-weight: 500;
    }
}

/* ==========================================
   BARRA DE PROPORCIÓN (servicios-ads.php, split 80/20
   presupuesto probar/escalar). El contenido es una
   proporción — se lee al instante en una barra, no como
   párrafo dentro de una card genérica.
   ========================================== */
.split-bar-caption {
    display: block;
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-bottom: 0.85rem;
}
.split-bar.on-dark .split-bar-caption {
    color: rgba(255, 255, 255, 0.6);
}
.split-bar-track {
    display: flex;
    height: 2.75rem;
    border-radius: 50px;
    overflow: hidden;
}
.split-bar-fill,
.split-bar-rest {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
}
.split-bar-fill {
    background: var(--gradient-brand);
    color: #fff;
}
.split-bar-rest {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
}
.split-bar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 0.9rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
}
.split-bar-legend .dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    margin-right: 0.4rem;
}
.split-bar-legend .dot-fill { background: var(--gradient-brand); }
.split-bar-legend .dot-rest { background: rgba(255, 255, 255, 0.25); }

/* ==========================================
   FUNNEL DE ABANDONO (servicios-ecommerce.php,
   "El problema real del checkout"). El 70% de abandono era un
   número suelto en .inline-stat — el contenido es un embudo
   (cada paso pierde gente respecto al anterior) y se lee mejor
   como 3 barras decrecientes que como una sola cifra grande.
   Cada barra tiene su ancho fijado en % vía inline style — no
   hereda de un hermano flex, así que no hay riesgo del bug de
   ancho-por-contenido que tuvo .split-bar-rest.
   ========================================== */
.funnel-viz-row {
    margin-bottom: 1rem;
}
.funnel-viz-row:last-child {
    margin-bottom: 0;
}
.funnel-viz-label {
    display: block;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.4rem;
}
.funnel-viz-bar {
    height: 2.5rem;
    min-width: fit-content;
    border-radius: 0 50px 50px 0;
    background: var(--gradient-brand);
    display: flex;
    align-items: center;
    padding-left: 1rem;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
}
.funnel-viz-row-final .funnel-viz-bar {
    background: var(--color-pink);
}
.funnel-viz-caption {
    margin-top: 1.25rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
}

/* ==========================================
   TIMELINE DE ALCANCE (servicios-sistemas.php +
   "embudo completo" en servicios-ads.php desde 2026-09-14 —
   mismo componente, otro contenido: 3 pasos ordenados
   conectados por flechas en vez de columnas sueltas sin
   relación visual entre sí. Restyling afecta ambos call sites.)
   Convierte 3 tarjetas sueltas en una secuencia conectada.
   ========================================== */
.scope-timeline {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: stretch;
}
@media (min-width: 768px) {
    .scope-timeline {
        flex-direction: row;
        align-items: center;
    }
}
/* Envoltorio sin overflow:hidden por paso — el número flota con
   position:absolute respecto a este wrapper, no respecto a la card.
   Si el número fuera hijo directo de .card-brand quedaría recortado
   a la mitad, porque .card-brand tiene overflow:hidden para contener
   su barra de degradé en hover (ver bloque TARJETAS) — este wrapper
   evita esa dependencia frágil sin tocar la regla global de .card-brand. */
.scope-timeline-item {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
}
.scope-timeline-item > .card-brand,
.scope-timeline-item > .bento-card {
    width: 100%;
}
.timeline-step-number {
    position: absolute;
    top: -0.7rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}
.timeline-arrow {
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--color-pink);
    font-size: 1.3rem;
}

/* ==========================================
   RELATO DE CASO CON PROGRESO (portafolio.php)
   Riel vertical que se va llenando a medida que se hace
   scroll por Problema -> Qué hicimos -> Resultado. Segundo
   momento de interacción a medida del sitio (el primero es
   el proceso sticky-scroll del home) — ver JS módulo 6.
   ========================================== */
.case-story {
    position: relative;
}
.case-story-rail {
    display: none;
}
@media (min-width: 992px) {
    .case-story {
        padding-left: 2rem;
    }
    .case-story-rail {
        display: block;
        position: absolute;
        left: 0;
        top: 0.4rem;
        bottom: 0.4rem;
        width: 2px;
        background: rgba(30, 27, 46, 0.08);
    }
    .case-story-rail-fill {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0%;
        background: var(--gradient-brand);
        transition: height 0.3s ease;
    }
    .case-story-dot {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0.65rem;
        height: 0.65rem;
        border-radius: 50%;
        background: #fff;
        border: 2px solid rgba(30, 27, 46, 0.15);
        transition: border-color 0.3s ease, background 0.3s ease;
        z-index: 1;
    }
    .case-story-dot.done {
        background: var(--color-pink);
        border-color: var(--color-pink);
    }
}
.case-story-step {
    transition: opacity 0.3s ease;
}
@media (min-width: 992px) {
    .case-story-step {
        opacity: 0.55;
    }
    .case-story-step.active {
        opacity: 1;
    }
}

/* ==========================================
   CONTACTO — jerarquía entre la card del formulario (acción principal)
   y las 3 cards de canal directo (información de apoyo). Antes ambas
   usaban .card-brand tal cual y terminaban con el mismo peso visual —
   misma sombra, mismo padding, misma min-height de 15rem aunque las de
   canal directo casi no tienen contenido. Ahora son dos tratamientos
   deliberadamente distintos, no la misma card repetida 4 veces.
   ========================================== */
.card-brand.card-brand-primary {
    box-shadow: var(--shadow-md);
    border-color: rgba(96, 51, 139, 0.12);
}
.card-brand.card-brand-primary::before {
    opacity: 1;
}

.contact-channel-card {
    background: #fff;
    border: 1px solid rgba(30, 27, 46, 0.07);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.35rem 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.contact-channel-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(96, 51, 139, 0.15);
}
.contact-channel-card .icon-wrap {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.15rem;
    margin-bottom: 0;
    flex-shrink: 0;
}
.contact-channel-card .body {
    min-width: 0;
}
.contact-channel-card h3 {
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
    color: var(--color-ink);
}
.contact-channel-card p {
    font-size: 0.83rem;
    line-height: 1.5;
    margin-bottom: 0.4rem;
}
.contact-channel-card .card-cta {
    font-size: 0.82rem;
}

/* ==========================================
   GALERÍA DE RESULTADOS (carrusel de imágenes)
   Reutiliza .scroller/.scroller-wrap tal cual (mismo mecanismo que
   testimonios/equipo/blog en main.js) — sus reglas responsive ya dan
   exactamente 1 imagen visible en mobile, 2 en tablet, 3 en desktop,
   sin necesidad de una regla de ancho nueva acá.
   Las imágenes en assets/images/gallery/ son placeholders abstractos
   generados con PIL, marcados como tales en la propia imagen — están
   pensadas para reemplazarse 1:1 (mismo nombre de archivo, misma
   relación de aspecto 4:3) por imágenes reales generadas con IA.
   ========================================== */
.gallery-card {
    display: block;
    position: relative;
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}
.gallery-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.gallery-card:hover img,
.gallery-card:focus-visible img {
    transform: scale(1.05);
}
.gallery-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(10, 8, 18, 0.8) 0%, transparent 50%);
    display: flex;
    align-items: flex-end;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.gallery-card:hover .gallery-card-overlay,
.gallery-card:focus-visible .gallery-card-overlay {
    opacity: 1;
}
.gallery-card-overlay span {
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
}

/* ==========================================
   HERO ILUSTRADO — variantes para páginas interiores
   Extiende la lógica del hero del home (hero-visual/hero-card/
   hero-badge-float, reutilizados tal cual) a otras páginas,
   cada una con su propia composición dentro del mismo lenguaje.
   ========================================== */

/* servicios.php: mini-lista de los 4 servicios dentro de la tarjeta */
.hero-services-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* Deja espacio para que hero-badge-float (absolute, ancla en la
       esquina inferior de hero-card) no tape el texto de la última
       fila — en el hero del home se superpone sobre un gráfico de
       barras sin texto, acá hay texto real que debe quedar legible. */
    margin-bottom: 3.25rem;
}
.hero-services-list .row-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.7rem;
    border-radius: 0.6rem;
    background: var(--color-surface);
}
.hero-services-list .row-item i {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.55rem;
    background: var(--gradient-brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.hero-services-list .row-item span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-ink);
}

/* portafolio.php: dos miniaturas de caso apiladas */
.hero-case-stack {
    position: relative;
    height: 210px;
}
.hero-case-stack .stack-card {
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1rem;
}
.hero-case-stack .stack-card.back {
    transform: rotate(-6deg) translate(-0.5rem, 0.5rem);
    opacity: 0.9;
}
.hero-case-stack .stack-card.front {
    transform: rotate(3deg);
}

/* contacto.php: vista previa de conversación de WhatsApp */
.hero-chat-mock {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.hero-chat-mock .bubble {
    max-width: 80%;
    padding: 0.55rem 0.85rem;
    border-radius: 1rem;
    font-size: 0.78rem;
    line-height: 1.4;
}
.hero-chat-mock .bubble.in {
    align-self: flex-start;
    background: var(--color-surface);
    color: var(--color-ink);
    border-bottom-left-radius: 0.25rem;
}
.hero-chat-mock .bubble.out {
    align-self: flex-end;
    background: var(--gradient-brand);
    color: #fff;
    border-bottom-right-radius: 0.25rem;
}
.hero-chat-mock .bubble.typing {
    align-self: flex-start;
    display: flex;
    gap: 0.25rem;
    padding: 0.7rem 0.9rem;
}
.hero-chat-mock .bubble.typing span {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--color-muted);
    animation: chat-typing 1.2s infinite ease-in-out;
}
.hero-chat-mock .bubble.typing span:nth-child(2) { animation-delay: 0.15s; }
.hero-chat-mock .bubble.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-3px); opacity: 1; }
}

/* contacto.php: foto real (assets/images/contacto-hero.jpg) en vez del
   chat-mock ilustrado, con una caption itálica (aproxima manuscrito con
   Poppins itálica — el proyecto no vendoriza una fuente cursiva aparte,
   ver CLAUDE.md "no CDNs") superpuesta en la esquina de la propia foto,
   no colgando afuera de ella. Se probó primero colgándola fuera del
   marco (bottom negativo) y quedaba pegada a la curva blanca de cierre
   del hero (.hero-shape) en pantallas más bajas, casi ilegible contra
   ese fondo claro — de ahí el fondo oscuro + blur propio, para que
   funcione encima de cualquier contenido de la foto sin depender de la
   posición exacta de la curva. Reemplazar la foto, no el markup, si
   deja de representar al equipo/producto real. */
.contact-hero-photo {
    position: relative;
    /* Silueta orgánica tipo "nube" (ver #contactBlobClip en contacto.php),
       no un rectángulo con esquinas redondeadas — así se ve en la
       referencia del cliente. clip-path no respeta box-shadow (el
       shadow seguiría dibujando un rectángulo detrás de la silueta
       recortada), por eso drop-shadow en su lugar: ese sí sigue la
       silueta real, no el rectángulo original. */
    clip-path: url(#contactBlobClip);
    filter: drop-shadow(0 20px 35px rgba(10, 8, 18, 0.45));
}
.contact-hero-photo img {
    width: 100%;
    aspect-ratio: 1100 / 733;
    object-fit: cover;
    display: block;
}
.contact-hero-annotation {
    position: absolute;
    right: 0.5rem;
    bottom: 0.75rem;
    max-width: 10.5rem;
    /* Fondo propio (no solo texto suelto sobre la foto): la esquina
       inferior de la foto puede ser clara según el recorte, y el texto
       claro ahí se ilegible. Con esta placa oscura + blur queda legible
       sea cual sea el contenido de la imagen debajo. */
    background: rgba(10, 8, 18, 0.55);
    backdrop-filter: blur(4px);
    padding: 0.6rem 0.75rem;
    border-radius: 0.75rem;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 0.82rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.92);
    transform: rotate(-4deg);
}
@media (max-width: 991.98px) {
    .contact-hero-annotation {
        display: none;
    }
}

/* Fila de confianza directamente en el hero (contacto.php) — reutiliza
   el mismo tono que .trust-strip pero con ícono + sub-línea, porque acá
   son 3 razones concretas, no solo una lista de chips en un renglón. */
.hero-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.75rem;
}
.hero-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    max-width: 210px;
}
.hero-trust-item i {
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-pink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}
.hero-trust-item strong {
    display: block;
    color: #fff;
    font-size: 0.85rem;
    line-height: 1.3;
}
.hero-trust-item span {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.76rem;
    line-height: 1.4;
    margin-top: 0.15rem;
}

/* Excepción deliberada al .icon-wrap-soft de las cards de contacto
   directo: el de WhatsApp usa el verde de marca real (el mismo de
   .whatsapp-btn) en vez de lavanda — WhatsApp ya tiene un color propio
   reconocible en todo el sitio, tiene más sentido semántico reforzarlo
   acá que aplicarle el tratamiento neutro de Email/Ubicación. */
.icon-wrap.icon-wrap-whatsapp {
    background: #25d366;
    color: #fff;
}

/* ==========================================
   SERVICIOS — BENTO OSCURO (home)
   Reemplaza el índice editorial: grid 2x2 sobre fondo oscuro
   con glow (reutiliza .glow-bg), cada card con un mini-mockup
   de UI realista propio del servicio en vez de un ícono suelto.
   Es el único bloque de contenido (no hero/CTA) que usa fondo
   oscuro — deliberado, a pedido del cliente con referencia visual.
   ========================================== */
.section-header.on-dark h2 {
    color: #fff;
}
.section-header.on-dark p {
    color: rgba(255, 255, 255, 0.7);
}

.bento-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@media (max-width: 900px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }
}

.bento-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1.25rem;
    padding: 2rem;
    text-decoration: none;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.bento-card:hover,
.bento-card:focus-visible {
    transform: translateY(-5px);
    border-color: rgba(224, 33, 126, 0.4);
    background: rgba(255, 255, 255, 0.06);
}
.bento-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(224, 33, 126, 0.35);
}
.bento-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
}
.bento-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.bento-arrow {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.95rem;
    transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.bento-card:hover .bento-arrow,
.bento-card:focus-visible .bento-arrow {
    background: var(--gradient-brand);
    border-color: transparent;
    transform: rotate(45deg);
}
.bento-card h3 {
    color: #fff;
    font-size: 1.35rem;
    line-height: 1.3;
    margin-bottom: 1.25rem;
}
.bento-desc {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    line-height: 1.65;
    margin: 1.25rem 0 0;
}

.bento-mock {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.9rem;
    padding: 1rem;
}
.bento-mock-bar {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 0.85rem;
}
.bento-mock-bar span {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}

/* --- Card 1: Sitios Web — mini navegador con landing --- */
.bento-web-preview {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.6rem;
    padding: 1rem;
}
.bento-web-preview .headline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    line-height: 1.35;
    margin-bottom: 0.35rem;
}
.bento-web-preview .subhead {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.8rem;
}
.bento-web-preview .cta-pill {
    display: inline-block;
    background: var(--gradient-brand);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.35rem 0.9rem;
    border-radius: 50px;
}
/* --- Card 2: Ecommerce — producto + checkout --- */
.bento-ecom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.bento-product .product-image {
    height: 48px;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
    margin-bottom: 0.55rem;
}
.bento-product .swatches {
    display: flex;
    flex-direction: row;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}
.bento-product .swatch {
    width: 1rem;
    height: 1rem;
    border-radius: 0.3rem;
    background: rgba(255, 255, 255, 0.12);
}
.bento-product .price {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
    margin: 0 0 0.6rem;
}
.bento-product .add-btn {
    display: inline-block;
    width: 100%;
    text-align: center;
    background: var(--color-pink);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 600;
    padding: 0.4rem;
    border-radius: 0.5rem;
}
.bento-checkout {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.bento-checkout .checkout-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.1rem;
}
.bento-checkout .pay-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0.4rem;
    padding: 0.35rem 0.5rem;
}
.bento-checkout .pay-row i {
    color: var(--color-purple);
}
.bento-checkout .pay-btn {
    margin-top: 0.2rem;
    text-align: center;
    background: var(--gradient-brand);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 600;
    padding: 0.45rem;
    border-radius: 0.5rem;
}

/* --- Card 3: Publicidad — mini dashboard --- */
.bento-dash-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}
.bento-dash-stats .stat {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0.5rem;
    padding: 0.5rem 0.4rem;
}
.bento-dash-stats .stat .label {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    display: block;
    margin-bottom: 0.2rem;
}
.bento-dash-stats .stat .value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    color: #fff;
    display: block;
}
.bento-dash-stats .stat .delta {
    font-size: 0.6rem;
    color: #4ade80;
}
.bento-dash-chart {
    height: 54px;
}
.bento-dash-chart polyline {
    fill: none;
    stroke: url(#bentoAdsGradient);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bento-dash-platforms {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.85rem;
}
.bento-dash-platforms span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 50px;
    padding: 0.3rem 0.7rem;
}

/* --- Card 4: Sistemas — mini panel de leads (CRM) ---
   Reutiliza .mgmt-panel tal cual (mismo componente que
   servicios-ecommerce.php usa para el panel de pedidos) en vez de
   inventar un mockup nuevo — mismo lenguaje visual, otro contexto de
   datos. Reemplazó a un diagrama de cajas (Cliente→Venta→"Negocio
   eficiente") que, al lado de un checkout y un dashboard reales en
   las otras 3 cards del mismo grid, se leía como infográfico y no
   como producto — ver DESIGN-SYSTEM.md §9 (componentes compartidos). */

/* --- Mockup del hero de nosotros.php: preview de equipo ---
   Ninguno de los mockups de producto (checkout, dashboard, panel CRM,
   browser preview) tenía sentido para contenido de "personas" — este es
   el único caso del sitio que necesitaba un mockup nuevo genuino, no un
   fork de uno existente. Reutiliza el shell .bento-mock/.bento-mock-bar
   como todos los demás, solo el contenido interno (.team-preview) es
   nuevo. */
.avatar-stack {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}
.avatar-stack img,
.avatar-stack-more {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 3px solid var(--color-ink);
    margin-left: -0.75rem;
    object-fit: cover;
}
.avatar-stack img:first-child {
    margin-left: 0;
}
.avatar-stack-more {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.75rem;
}
.team-preview-caption {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin: 0;
}

/* ==========================================
   LISTADO DE BLOG — filtro de categorías, grid de cards, paginación
   (blog.php). Todo client-side: los 12 artículos ya están en el DOM,
   el filtro oculta/muestra por categoría y la paginación recorta el
   subconjunto visible — sin recargar la página (ver assets/js/blog.js,
   cargado solo en blog.php, igual criterio que SweetAlert2 en
   contacto.php: no sumarle peso al resto del sitio).
   ========================================== */
.blog-toolbar {
    background: #fff;
    border: 1px solid rgba(30, 27, 46, 0.07);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.6rem 1.75rem 1.75rem;
    margin-bottom: 2.5rem;
}
.blog-toolbar-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.blog-toolbar-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-ink);
    margin: 0;
}
.blog-toolbar-title i {
    color: var(--color-purple);
    font-size: 1.05rem;
}
.blog-search {
    position: relative;
    flex-shrink: 0;
    width: 100%;
}
@media (min-width: 576px) {
    .blog-search { width: 280px; }
}
.blog-search i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted);
    font-size: 0.9rem;
    pointer-events: none;
}
.blog-search-input {
    width: 100%;
    padding: 0.6rem 1rem 0.6rem 2.5rem;
    border-radius: 50px;
    border: 1px solid rgba(30, 27, 46, 0.12);
    background: var(--color-surface);
    font-size: 0.85rem;
    color: var(--color-ink);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.blog-search-input:focus {
    outline: none;
    border-color: var(--color-purple);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(96, 51, 139, 0.12);
}
.blog-search-input::placeholder {
    color: var(--color-muted);
}
.blog-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0;
}
.blog-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.15rem;
    border-radius: 50px;
    border: 1px solid rgba(30, 27, 46, 0.1);
    background: #fff;
    color: var(--color-ink);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.blog-filter-btn:hover {
    border-color: var(--color-purple);
    color: var(--color-purple);
}
.blog-filter-btn .count {
    font-size: 0.72rem;
    color: var(--color-muted);
}
.blog-filter-btn.active {
    background: var(--gradient-brand);
    border-color: transparent;
    color: #fff;
}
.blog-filter-btn.active .count {
    color: rgba(255, 255, 255, 0.8);
}

.blog-results-count {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-bottom: 1.25rem;
}

.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}
@media (min-width: 576px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .blog-grid { grid-template-columns: repeat(3, 1fr); }
}
.blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(30, 27, 46, 0.07);
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.blog-card:hover,
.blog-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.blog-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    flex-shrink: 0;
}
.blog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}
.blog-card:hover .blog-card-media img {
    transform: scale(1.06);
}
.blog-card-tag {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    background: var(--gradient-brand);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.75rem;
    border-radius: 50px;
}
.blog-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.35rem 1.4rem 1.5rem;
}
.blog-card-body h3 {
    font-size: 1.02rem;
    line-height: 1.4;
    color: var(--color-ink);
    margin-bottom: 0.6rem;
}
.blog-card-body p {
    font-size: 0.875rem;
    color: var(--color-muted);
    line-height: 1.55;
    margin-bottom: 1.1rem;
    flex: 1;
}
.blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
}
.blog-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.65rem;
    border-radius: 50px;
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: 0.7rem;
    font-weight: 600;
}
.blog-meta-badge i {
    font-size: 0.72rem;
}
.blog-card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding-top: 0.9rem;
    margin-top: auto;
    border-top: 1px solid rgba(30, 27, 46, 0.07);
    color: var(--color-purple);
    font-weight: 700;
    font-size: 0.88rem;
    transition: gap 0.2s ease, color 0.2s ease;
}
.blog-card:hover .blog-card-cta {
    color: var(--color-pink);
    gap: 0.6rem;
}

.blog-empty-state {
    text-align: center;
    padding: 3.5rem 1rem;
    color: var(--color-muted);
}

.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3rem;
}
.blog-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.5rem;
    border-radius: 50px;
    border: 1px solid rgba(30, 27, 46, 0.1);
    background: #fff;
    color: var(--color-ink);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.blog-page-btn:hover:not(:disabled):not(.active) {
    border-color: var(--color-purple);
    color: var(--color-purple);
}
.blog-page-btn.active {
    background: var(--gradient-brand);
    border-color: transparent;
    color: #fff;
}
.blog-page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.blog-page-btn:active:not(:disabled) {
    transform: scale(0.94);
}

/* ==========================================
   ARTÍCULO DE BLOG (blog.php / post/{slug}.php)
   Reutiliza .page-hero.glow-bg + .badge-soft para el encabezado;
   esto es solo la tipografía del cuerpo y la metadata del artículo.
   ========================================== */
.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
}
.article-meta .meta-dot {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
/* Imagen destacada de un artículo — reemplaza el uso previo de
   .case-thumb (pensado para capturas de sitio con barra de navegador
   falsa, no para fotos reales sueltas). aspect-ratio en vez de una
   altura fija: la imagen respira en el ancho más generoso de la
   columna sin recortes raros en distintos tamaños de pantalla. */
.article-featured-image {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
    aspect-ratio: 16 / 7;
}
.article-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 575.98px) {
    .article-featured-image { aspect-ratio: 4 / 3; }
}
.article-body {
    max-width: 100%;
}
/* Segunda foto real dentro del cuerpo del artículo (no solo la
   destacada del encabezado) — rompe bloques largos de texto a mitad
   de artículo. Una sola por artículo, en un punto de quiebre natural
   entre dos secciones — no un patrón repetido "a diestra y siniestra". */
.article-inline-image {
    margin: 2.5rem 0;
}
.article-inline-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
}
.article-inline-image figcaption {
    margin-top: 0.65rem;
    font-size: 0.8rem;
    color: var(--color-muted);
    text-align: center;
    font-style: italic;
}
/* "Seguí leyendo" — carrusel de artículos relacionados al pie de
   post/{slug}.php. .section-sm (no .section-lg) y sin section-split
   completo a propósito: es una continuación del artículo, no una
   nueva sección de marketing — debe sentirse pegada al contenido,
   no un bloque aparte. Reutiliza .scroller-wrap (autoplay ~5s, dots,
   prev/next — main.js módulo 3) tal cual, ninguna lógica nueva. */
.article-related-section {
    padding-top: 2.5rem;
}
.related-post-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.related-post-card:hover {
    transform: translateY(-4px);
    border-color: rgba(224, 33, 126, 0.3);
    background: rgba(255, 255, 255, 0.06);
}
.related-post-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    flex-shrink: 0;
}
.related-post-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}
.related-post-card:hover .related-post-media img {
    transform: scale(1.06);
}
.related-post-tag {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: var(--gradient-brand);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.28rem 0.7rem;
    border-radius: 50px;
}
.related-post-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem 1.35rem 1.4rem;
}
.related-post-body h4 {
    color: #fff;
    font-size: 0.94rem;
    line-height: 1.4;
    margin-bottom: 1rem;
    flex: 1;
}
.related-post-cta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
    font-size: 0.82rem;
    transition: gap 0.2s ease, color 0.2s ease;
}
.related-post-card:hover .related-post-cta {
    color: #fff;
    gap: 0.6rem;
}
.article-body .article-lead {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--color-ink);
    margin-bottom: 1.75rem;
}
.article-body h2 {
    font-size: 1.3rem;
    line-height: 1.35;
    margin: 2.25rem 0 0.85rem;
    color: var(--color-ink);
}
.article-body p {
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 1.25rem;
}
.article-body a {
    color: var(--color-purple);
    font-weight: 600;
}
.article-body a:hover {
    color: var(--color-pink);
}
.article-body h3 {
    font-size: 1.08rem;
    line-height: 1.35;
    margin: 1.75rem 0 0.65rem;
    color: var(--color-ink);
}
.article-body ul,
.article-body ol {
    margin: 0 0 1.5rem;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.article-body ul li,
.article-body ol li {
    position: relative;
    padding-left: 1.75rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-ink);
}
.article-body ul li::before {
    content: "\f26b";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 0.15rem;
    color: var(--color-pink);
    font-size: 0.95rem;
}
.article-body ol {
    counter-reset: article-ol;
}
.article-body ol li::before {
    counter-increment: article-ol;
    content: counter(article-ol);
    position: absolute;
    left: 0;
    top: 0.05rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.article-body strong {
    color: var(--color-ink);
}

/* Resumen rápido al inicio del artículo ("en resumen") — 3-4 puntos,
   para quien escanea antes de decidir leer completo. */
.article-tldr {
    background: var(--color-surface);
    border: 1px solid rgba(30, 27, 46, 0.07);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.5rem 1.75rem;
    margin-bottom: 2rem;
}
.article-tldr-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-purple);
    margin-bottom: 0.85rem;
}
.article-tldr ul {
    margin: 0;
    gap: 0.5rem;
}
.article-tldr ul li {
    font-size: 0.92rem;
    color: var(--color-ink);
}

/* Cita/dato destacado en medio del artículo — para un stat o frase que
   merece más peso visual que un párrafo normal. */
.article-callout {
    position: relative;
    background: var(--color-surface);
    border-left: 3px solid;
    border-image: linear-gradient(180deg, var(--color-pink), var(--color-blue)) 1;
    border-radius: 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0;
    padding: 1.25rem 1.5rem;
    margin: 1.75rem 0;
}
.article-callout p {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--color-ink);
    margin-bottom: 0;
}
.article-callout cite {
    display: block;
    margin-top: 0.6rem;
    font-style: normal;
    font-size: 0.78rem;
    color: var(--color-muted);
}

/* Breadcrumb visible (Inicio / Blog / Categoría / Artículo) — además
   del BreadcrumbList en JSON-LD (seo.php), que no reemplaza a un
   rastro real en pantalla. */
.breadcrumb-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--color-muted);
    margin-bottom: 1.5rem;
}
.breadcrumb-trail a {
    color: var(--color-muted);
    text-decoration: none;
}
.breadcrumb-trail a:hover {
    color: var(--color-purple);
}
.breadcrumb-trail .sep {
    color: rgba(30, 27, 46, 0.25);
}
.breadcrumb-trail .current {
    color: var(--color-ink);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.breadcrumb-trail.on-dark {
    color: rgba(255, 255, 255, 0.55);
}
.breadcrumb-trail.on-dark a {
    color: rgba(255, 255, 255, 0.55);
}
.breadcrumb-trail.on-dark a:hover {
    color: #fff;
}
.breadcrumb-trail.on-dark .sep {
    color: rgba(255, 255, 255, 0.25);
}
.breadcrumb-trail.on-dark .current {
    color: #fff;
}

.article-cta-box {
    background: var(--color-surface);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.75rem;
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}
.article-cta-box h3 {
    font-size: 1.05rem;
    margin-bottom: 0.3rem;
    color: var(--color-ink);
}
.article-cta-box p {
    margin-bottom: 0;
    font-size: 0.9rem;
}

/* ==========================================
   SCROLL REVEAL (sin librería externa)
   ========================================== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }
.reveal.delay-4 { transition-delay: 0.4s; }