/* =============================================
       VARIABLES & RESET
    ============================================= */
        :root {
            /* --primary, --accent, --dark, --radius*, --section-py y las dos
               fuentes los puede sobrescribir el layout con la identidad de la
               plantilla o de la landing (ver layout.html.twig). El resto de
               tonos se derivan aquí para que un cambio de marca los arrastre
               en vez de dejarlos descoordinados. */
            --primary: #1a56db;
            --primary-dark: color-mix(in srgb, var(--primary) 82%, #000);
            --primary-light: color-mix(in srgb, var(--primary) 12%, #fff);
            --accent: #f59e0b;
            --accent-dark: color-mix(in srgb, var(--accent) 84%, #000);
            --dark: #0f172a;
            --dark-2: color-mix(in srgb, var(--dark) 88%, #fff);
            --gray: #64748b;
            --gray-light: #94a3b8;
            --border: #e2e8f0;
            --bg-light: #f8fafc;
            --white: #ffffff;
            --radius-sm: 6px;
            --radius: 12px;
            --radius-lg: 20px;
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .05);
            --shadow: 0 4px 16px rgba(0, 0, 0, .1);
            --shadow-lg: 0 20px 60px rgba(0, 0, 0, .15);
            --transition: .3s ease;
            --section-py: 96px;
            --font-body: 'Inter', sans-serif;
            --font-heading: 'Playfair Display', serif;
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-body);
            color: var(--dark);
            background: var(--white);
            line-height: 1.6;
            overflow-x: hidden;
        }

        img {
            max-width: 100%;
            display: block;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        ul {
            list-style: none;
        }

        button {
            cursor: pointer;
            border: none;
            background: none;
            font-family: inherit;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
        }

        .section-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--primary);
            margin-bottom: 16px;
        }

        .section-label::before {
            content: '';
            width: 28px;
            height: 3px;
            background: var(--primary);
            border-radius: 2px;
        }

        .section-title {
            font-family: var(--font-heading);
            font-size: clamp(28px, 4vw, 44px);
            font-weight: 800;
            line-height: 1.2;
            color: var(--dark);
        }

        /* Sin max-width a propósito: el subtítulo acompaña al título y ocupa
           lo mismo que él. Antes se limitaba a 600px —la mitad del container—
           y quedaba partido en el centro bajo un título a ancho completo. Las
           secciones que lo pintan dentro de una columna (video, contacto) ya
           quedan acotadas por su contenedor. */
        .section-subtitle {
            font-size: 17px;
            color: var(--gray);
            margin-top: 12px;
            line-height: 1.7;
        }

        .text-center {
            text-align: center;
        }

        .text-center .section-subtitle {
            margin: 12px auto 0;
        }

        .text-center .section-label::before {
            display: none;
        }

        .text-center .section-label {
            justify-content: center;
            width: 100%;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 28px;
            border-radius: var(--radius-sm);
            font-size: 15px;
            font-weight: 600;
            transition: var(--transition);
        }

        .btn-primary {
            background: var(--primary);
            color: var(--on-primary, var(--white));
        }

        .btn-primary:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent);
        }

        .btn-outline {
            background: transparent;
            color: var(--white);
            border: 2px solid rgba(255, 255, 255, .6);
        }

        .btn-outline:hover {
            background: rgba(255, 255, 255, .12);
            border-color: var(--white);
        }

        .btn-accent {
            background: var(--accent);
            color: var(--dark);
        }

        .btn-accent:hover {
            background: var(--accent-dark);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(245, 158, 11, .35);
        }

        /* =============================================
       TOPBAR
    ============================================= */
        #topbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1001;
            height: 40px;
            background: var(--dark);
            border-bottom: 1px solid rgba(255, 255, 255, .07);
            transition: transform var(--transition), opacity var(--transition);
        }

        #topbar.hidden {
            transform: translateY(-100%);
            opacity: 0;
            pointer-events: none;
        }

        #topbar > .container {
            height: 100%;
        }

        .topbar-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 100%;
        }

        .topbar-contact {
            display: flex;
            align-items: center;
            gap: 24px;
        }

        .topbar-contact a {
            font-size: 12px;
            color: rgba(255, 255, 255, .6);
            display: flex;
            align-items: center;
            gap: 6px;
            transition: color var(--transition);
        }

        .topbar-contact a:hover {
            color: var(--white);
        }

        .topbar-contact i {
            font-size: 11px;
            color: var(--accent);
        }

        .topbar-right {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .topbar-social {
            display: flex;
            align-items: center;
            gap: 12px;
            border-right: 1px solid rgba(255, 255, 255, .1);
            padding-right: 16px;
        }

        .topbar-social a {
            color: rgba(255, 255, 255, .5);
            font-size: 12px;
            transition: color var(--transition);
        }

        .topbar-social a:hover {
            color: var(--white);
        }

        .topbar-lang select {
            appearance: none;
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .15);
            border-radius: 3px;
            color: rgba(255, 255, 255, .75);
            font-size: 11px;
            font-family: var(--font-body);
            padding: 3px 22px 3px 8px;
            cursor: pointer;
            outline: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,.5)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 7px center;
        }

        .topbar-lang select option {
            background: var(--dark);
            color: var(--white);
        }

        /* =============================================
       NAVBAR
    ============================================= */
        #navbar {
            position: fixed;
            top: 40px;
            left: 0;
            right: 0;
            z-index: 1000;
            transition: background var(--transition), box-shadow var(--transition), top var(--transition);
        }

        #navbar.scrolled {
            background: var(--white);
            box-shadow: var(--shadow);
        }

        .nav-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 72px;
        }

        .nav-logo {
            font-family: var(--font-heading);
            font-size: 24px;
            font-weight: 800;
            color: var(--white);
            transition: color var(--transition);
        }

        #navbar.scrolled .nav-logo {
            color: var(--dark);
        }

        /* El logo lo sube cada proyecto y llega con el tamaño que tenga. La
           barra mide 72px fijos, pero la imagen no estaba limitada: una grande
           se salía de ella y ocupaba media pantalla. */
        .nav-logo img {
            display: block;
            max-height: 44px;
            width: auto;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 32px;
        }

        .nav-links a {
            font-size: 14px;
            font-weight: 500;
            color: rgba(255, 255, 255, .85);
            transition: color var(--transition);
        }

        .nav-links a:hover {
            color: var(--white);
        }

        #navbar.scrolled .nav-links a {
            color: var(--gray);
        }

        #navbar.scrolled .nav-links a:hover {
            color: var(--primary);
        }

        .nav-cta {
            background: var(--white);
            color: var(--primary) !important;
            padding: 9px 22px;
            border-radius: var(--radius-sm);
            font-weight: 600 !important;
        }

        #navbar.scrolled .nav-cta {
            background: var(--primary);
            color: var(--on-primary, var(--white)) !important;
        }

        .nav-toggle {
            display: none;
            flex-direction: column;
            gap: 5px;
            padding: 4px;
        }

        .nav-toggle span {
            display: block;
            width: 24px;
            height: 2px;
            background: var(--white);
            border-radius: 2px;
            transition: var(--transition);
        }

        #navbar.scrolled .nav-toggle span {
            background: var(--dark);
        }

        /* =============================================
       HERO SLIDER
    ============================================= */
        #hero,
        .hero-sec {
            position: relative;
            height: 100vh;
            min-height: 600px;
            overflow: hidden;
        }

        .slider-track {
            display: flex;
            height: 100%;
            transition: transform .7s cubic-bezier(.77, 0, .18, 1);
        }

        .slide {
            min-width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
        }

        .slide-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            transform: scale(1.05);
            transition: transform 8s ease;
        }

        .slide.active .slide-bg {
            transform: scale(1);
        }

        .slide-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(10, 20, 50, .78) 0%, rgba(10, 20, 50, .45) 100%);
        }

        .slide-content {
            position: relative;
            z-index: 2;
            max-width: 700px;
            padding: 0 24px;
            margin-left: calc((100vw - 1200px) / 2);
            opacity: 0;
            transform: translateY(30px);
            transition: opacity .8s .3s ease, transform .8s .3s ease;
        }

        .slide.active .slide-content {
            opacity: 1;
            transform: translateY(0);
        }

        .slide-label {
            display: inline-block;
            background: var(--accent);
            color: var(--dark);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            padding: 5px 14px;
            border-radius: 3px;
            margin-bottom: 20px;
        }

        .slide-title {
            font-family: var(--font-heading);
            font-size: clamp(36px, 5vw, 64px);
            font-weight: 800;
            color: var(--white);
            line-height: 1.15;
            margin-bottom: 20px;
        }

        .slide-text {
            font-size: 18px;
            color: rgba(255, 255, 255, .82);
            line-height: 1.7;
            margin-bottom: 36px;
            max-width: 560px;
        }

        /* Listas dentro del subtítulo del hero. El reset global
           (ul { list-style: none }) se come los bullets, y el contenido lo
           escribe CKEditor, así que no puede traer iconos en el markup: el
           tick lo pinta el ::before con Font Awesome, que el layout ya carga. */
        .slide-text ul {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin: 0;
            padding: 0;
        }

        .slide-text ul li {
            position: relative;
            padding-left: 30px;
        }

        .slide-text ul li::before {
            content: "\f058";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            left: 0;
            top: 1px;
            font-size: 16px;
            color: var(--accent);
        }

        .slide-actions {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }

        /* Slider controls */
        .slider-prev,
        .slider-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .18);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, .3);
            color: var(--white);
            font-size: 18px;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .slider-prev {
            left: 28px;
        }

        .slider-next {
            right: 28px;
        }

        .slider-prev:hover,
        .slider-next:hover {
            background: var(--primary);
            border-color: var(--primary);
        }

        .slider-dots {
            position: absolute;
            bottom: 36px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            display: flex;
            gap: 10px;
        }

        .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .4);
            border: 2px solid transparent;
            transition: var(--transition);
            cursor: pointer;
        }

        .dot.active {
            background: var(--white);
            transform: scale(1.2);
        }

        /* Scroll indicator */
        .scroll-hint {
            position: absolute;
            bottom: 36px;
            right: 40px;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            color: rgba(255, 255, 255, .6);
            font-size: 11px;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .scroll-hint-line {
            width: 1px;
            height: 48px;
            background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .6));
            animation: scrollDown 2s ease-in-out infinite;
        }

        @keyframes scrollDown {

            0%,
            100% {
                transform: scaleY(1);
                opacity: 1;
            }

            50% {
                transform: scaleY(.5);
                opacity: .4;
            }
        }

        /* =============================================
       STATS BAND
    ============================================= */
        #stats {
            background: var(--primary);
            padding: 60px 0;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 40px;
            text-align: center;
        }

        .stat-item {}

        .stat-number {
            font-family: var(--font-heading);
            font-size: 52px;
            font-weight: 800;
            color: var(--white);
            line-height: 1;
        }

        .stat-suffix {
            color: var(--accent);
        }

        .stat-label {
            font-size: 14px;
            color: rgba(255, 255, 255, .72);
            margin-top: 6px;
            font-weight: 500;
            letter-spacing: .02em;
        }

        /* =============================================
       INTRO
    ============================================= */
        .intro-sec {
            padding: var(--section-py) 0;
            background: var(--white);
        }

        .intro-sec .about-prose {
            max-width: 720px;
            margin-left: auto;
            margin-right: auto;
        }

        /* =============================================
       COMMENTS (CTA a reseñas externas)
    ============================================= */
        .comments-sec {
            padding: var(--section-py) 0;
            background: var(--light, #f8f9fa);
        }

        .comments-sec .section-title {
            margin-bottom: 20px;
        }

        .comments-sec .section-subtitle {
            margin-bottom: 36px;
        }

        .comments-sec .comments-cta {
            margin-top: 12px;
        }

        /* =============================================
       TRUST (Clientes que confían)
    ============================================= */
        .trust-sec {
            padding: var(--section-py) 0;
            background: var(--white);
        }

        .trust-sec .section-title {
            margin-bottom: 20px;
        }

        .trust-sec .section-subtitle {
            margin: 0;
        }

        .trust-sec .trust-cta {
            margin-top: 28px;
            font-size: 18px;
            font-weight: 600;
            color: var(--primary);
        }

        /* =============================================
       GENERATOR (Banner con enlace)
    ============================================= */
        .generator-sec {
            padding: var(--section-py) 0;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: var(--on-primary, var(--white));
        }

        .generator-sec .section-title {
            color: var(--white);
            margin-bottom: 20px;
        }

        .generator-sec .generator-content {
            max-width: 720px;
            margin: 0 auto;
            color: rgba(255, 255, 255, .9);
            font-size: 16px;
            line-height: 1.7;
        }

        .generator-sec .generator-cta {
            margin-top: 32px;
        }

        .generator-sec .generator-cta .btn-primary {
            background: var(--white);
            color: var(--primary);
        }

        .generator-sec .generator-cta .btn-primary:hover {
            background: var(--accent);
            color: var(--dark);
        }

        /* =============================================
       SERVICES
    ============================================= */
        #services {
            padding: var(--section-py) 0;
            background: var(--white);
        }

        .services-header {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: end;
            margin-bottom: 64px;
        }

        .services-header .btn {
            justify-self: end;
            align-self: end;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
        }

        .service-card {
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 36px 32px;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--primary);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform var(--transition);
        }

        .service-card:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-6px);
            border-color: transparent;
        }

        .service-card:hover::before {
            transform: scaleX(1);
        }

        .service-icon {
            width: 60px;
            height: 60px;
            border-radius: var(--radius-sm);
            background: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: var(--on-primary, var(--white));
            margin-bottom: 24px;
            transition: var(--transition);
        }

        .service-card:hover .service-icon {
            transform: scale(1.08);
            box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 40%, transparent);
        }

        .service-name {
            font-size: 19px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .service-desc {
            font-size: 14px;
            color: var(--gray);
            line-height: 1.7;
        }

        .service-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 600;
            color: var(--primary);
            margin-top: 18px;
            transition: gap var(--transition);
        }

        .service-link:hover {
            gap: 10px;
        }

        /* =============================================
       VIDEO
    ============================================= */
        #video {
            padding: var(--section-py) 0;
            background: var(--dark-2);
            position: relative;
            overflow: hidden;
        }

        #video::before {
            content: '';
            position: absolute;
            top: -80px;
            right: -80px;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--primary) 12%, transparent);
            filter: blur(60px);
        }

        .video-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 72px;
            align-items: center;
        }

        .video-text .section-title {
            color: var(--white);
        }

        .video-text .section-subtitle {
            color: rgba(255, 255, 255, .65);
        }

        .video-features {
            margin-top: 36px;
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .video-feature {
            display: flex;
            gap: 16px;
            align-items: flex-start;
        }

        .video-feature-icon {
            flex-shrink: 0;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--on-primary, var(--white));
            font-size: 15px;
        }

        .video-feature-text h3,
        .video-feature-text h4 {
            font-size: 15px;
            font-weight: 600;
            color: var(--white);
            margin-bottom: 3px;
        }

        .video-feature-text p {
            font-size: 13px;
            color: rgba(255, 255, 255, .55);
        }

        .video-wrapper {
            position: relative;
            border-radius: var(--radius-lg);
            overflow: hidden;
            aspect-ratio: 16/9;
            background: #000;
        }

        .video-thumb {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: .65;
            transition: opacity var(--transition);
        }

        .video-play-btn {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .play-circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .95);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: var(--primary);
            padding-left: 4px;
            transition: transform var(--transition), box-shadow var(--transition);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, .4);
        }

        .video-play-btn:hover .play-circle {
            transform: scale(1.1);
            box-shadow: 0 0 0 16px rgba(255, 255, 255, .15);
        }

        /* Modal de video */
        .video-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: rgba(0, 0, 0, .9);
            align-items: center;
            justify-content: center;
        }

        .video-modal.open {
            display: flex;
        }

        .video-modal-inner {
            width: 90%;
            max-width: 900px;
            position: relative;
        }

        .video-modal iframe {
            width: 100%;
            aspect-ratio: 16/9;
            border-radius: var(--radius);
            border: none;
        }

        .video-modal-close {
            position: absolute;
            top: -44px;
            right: 0;
            color: var(--white);
            font-size: 28px;
            opacity: .8;
        }

        .video-modal-close:hover {
            opacity: 1;
        }

        /* =============================================
       ABOUT / QUÉ HACEMOS
    ============================================= */
        .about-sec {
            padding: var(--section-py) 0;
            background: var(--white);
        }

        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }

        .about-content .section-label {
            display: inline-block;
            margin-bottom: 14px;
        }

        .about-prose {
            margin-top: 20px;
            font-size: 15px;
            color: var(--gray);
            line-height: 1.8;
        }

        .about-items {
            margin-top: 28px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .about-item {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            font-size: 14px;
            color: var(--dark);
            line-height: 1.65;
        }

        .about-item-icon {
            /* La card es un flex vertical: la posición del icono la decide
               align-self, y --about-icon-align la fija la sección. */
            align-self: var(--about-icon-align, flex-start);
            flex-shrink: 0;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: var(--primary);
            color: var(--on-primary, var(--white));
            font-size: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 1px;
        }
        .text-white {
            color: var(--white);
        }

        /* --- Variante con vídeo (about/con-video.html.twig) ---------------
           Un vídeo vertical a media pantalla queda desproporcionado, así que
           la columna se estrecha y el vídeo se limita en ancho. El reparto
           deja de ser 1fr 1fr. */
        .about-sec--video .about-grid {
            grid-template-columns: 1fr minmax(0, 380px);
            gap: 64px;
        }

        /* Vídeo a la izquierda: se invierte el orden visual sin tocar el HTML,
           así el texto sigue leyéndose primero para un lector de pantalla. */
        .about-sec--video-left .about-grid {
            grid-template-columns: minmax(0, 380px) 1fr;
        }

        .about-sec--video-left .about-content { order: 2; }
        .about-sec--video-left .about-video-wrap { order: 1; }

        .about-video-wrap {
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            /* Reserva el hueco antes de que carguen los metadatos: sin esto la
               página pega un salto cuando el navegador descubre el tamaño. */
            aspect-ratio: var(--about-video-ratio, 9/16);
            background: var(--dark);
        }

        .about-video {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        @media (max-width: 900px) {
            /* En una columna el vídeo se centra y no pasa de 320px: a pantalla
               completa un 9:16 ocuparía más de un viewport de alto. */
            .about-sec--video .about-grid,
            .about-sec--video-left .about-grid {
                grid-template-columns: 1fr;
            }

            .about-sec--video-left .about-content,
            .about-sec--video-left .about-video-wrap {
                order: initial;
            }

            .about-video-wrap {
                max-width: 320px;
                margin-inline: auto;
            }
        }

        .about-img-wrap {
            border-radius: var(--radius-lg);
            overflow: hidden;
            aspect-ratio: 4/3;
        }

        .about-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform .6s ease;
        }

        .about-img-wrap:hover img {
            transform: scale(1.04);
        }

        /* =============================================
       POR QUÉ ELEGIRNOS
    ============================================= */
        #why {
            padding: var(--section-py) 0;
            background: var(--bg-light);
        }

        .why-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 72px;
            align-items: center;
        }

        .why-visual {
            position: relative;
        }

        .why-img-main {
            border-radius: var(--radius-lg);
            overflow: hidden;
            aspect-ratio: 4/3;
            background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .why-img-placeholder {
            text-align: center;
            color: rgba(255, 255, 255, .7);
        }

        .why-img-placeholder i {
            font-size: 80px;
            margin-bottom: 16px;
        }

        .why-img-placeholder p {
            font-size: 15px;
            font-weight: 500;
        }

        .why-badge {
            position: absolute;
            bottom: -24px;
            right: -24px;
            background: var(--white);
            border-radius: var(--radius);
            padding: 20px 24px;
            box-shadow: var(--shadow-lg);
            text-align: center;
            min-width: 140px;
        }

        .why-badge-num {
            font-family: var(--font-heading);
            font-size: 36px;
            font-weight: 800;
            color: var(--primary);
            line-height: 1;
        }

        .why-badge-suffix {
            color: var(--accent);
        }

        .why-badge-label {
            font-size: 12px;
            color: var(--gray);
            font-weight: 500;
            margin-top: 4px;
        }

        .why-list {
            margin-top: 40px;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .why-item {
            display: flex;
            gap: 18px;
            padding: 24px;
            background: var(--white);
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
        }

        .why-item:hover {
            box-shadow: var(--shadow);
            transform: translateX(6px);
        }

        .why-item-icon {
            flex-shrink: 0;
            width: 48px;
            height: 48px;
            border-radius: 10px;
            background: var(--primary-light);
            color: var(--primary);
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .why-item h3,
        .why-item h4 {
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .why-item p {
            font-size: 13px;
            color: var(--gray);
            line-height: 1.6;
        }

        /* PRICE-SEC reutiliza las clases .why-* */
        .price-sec {
            padding: var(--section-py) 0;
            background: var(--white);
        }

        .why-img-main img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .why-checklist {
            margin-top: 24px;
        }

        .why-checklist ul,
        .why-checklist ol {
            padding-left: 0;
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .why-checklist li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 14px;
            color: var(--dark);
            line-height: 1.6;
        }

        .why-checklist li::before {
            content: '';
            flex-shrink: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--primary-light);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%231a56db' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 12px;
            margin-top: 2px;
        }

        .why-cta {
            margin-top: 36px;
            display: flex;
            align-items: center;
            gap: 24px;
            flex-wrap: wrap;
        }

        .why-price-tag {
            font-family: var(--font-heading);
            font-size: 28px;
            font-weight: 800;
            color: var(--primary);
        }

        .why-price-tag small {
            font-family: var(--font-body);
            font-size: 14px;
            font-weight: 500;
            color: var(--gray);
            margin-left: 4px;
        }

        /* =============================================
       PROCESO / CÓMO FUNCIONA
    ============================================= */
        .process-area2 {
            padding: var(--section-py) 0;
            background-color: var(--dark);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
        }

        /* Velo sobre el fondo. --process-overlay lo define la sección desde el
           admin (color opaco si no hay imagen, al 72% si la hay); sin color
           configurado cae al velo oscuro de siempre. */
        .process-area2::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--process-overlay, rgba(15, 23, 42, .72));
        }

        .process-area2 > .container {
            position: relative;
            z-index: 1;
        }

        .process-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .process-header .section-title {
            color: var(--section-text, var(--white));
        }

        .process-header .section-subtitle {
            color: color-mix(in srgb, var(--section-text, #ffffff) 82%, transparent);
        }

        .process-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 24px;
            justify-content: center;
            align-items: stretch;
        }

        .process-card {
            flex: 1 1 200px;
            max-width: 340px;
            border-radius: var(--radius);
            padding: 36px 28px 32px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            position: relative;
            overflow: hidden;
        }

        .process-card-num {
            font-family: var(--font-heading);
            font-size: 56px;
            font-weight: 800;
            color: rgba(255, 255, 255, .32);
            line-height: 1;
            position: absolute;
            top: 12px;
            right: 18px;
        }

        .process-card h3,
        .process-card h4 {
            font-size: 16px;
            font-weight: 700;
            margin: 0;
            line-height: 1.4;
        }

        .process-card p {
            font-size: 14px;
            line-height: 1.75;
            margin: 0;
            flex-grow: 1;
        }

        /* =============================================
       CASOS DE ÉXITO
    ============================================= */
        #cases {
            padding: var(--section-py) 0;
            background: var(--white);
        }

        .cases-header {
            margin-bottom: 52px;
        }

        .cases-filter {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 32px;
        }

        .filter-btn {
            padding: 8px 20px;
            border-radius: 100px;
            font-size: 13px;
            font-weight: 600;
            border: 2px solid var(--border);
            color: var(--gray);
            transition: var(--transition);
        }

        .filter-btn:hover,
        .filter-btn.active {
            background: var(--primary);
            border-color: var(--primary);
            color: var(--on-primary, var(--white));
        }

        .cases-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
        }

        .case-card {
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            background: var(--white);
            border: 1px solid var(--border);
        }

        .case-card:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-6px);
        }

        .case-img {
            aspect-ratio: 4/3;
            position: relative;
            overflow: hidden;
        }

        .case-img-bg {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 52px;
            color: rgba(255, 255, 255, .5);
            transition: transform var(--transition);
        }

        .case-card:hover .case-img-bg {
            transform: scale(1.05);
        }

        .case-overlay {
            position: absolute;
            inset: 0;
            background: rgba(10, 20, 50, .55);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity var(--transition);
        }

        .case-card:hover .case-overlay {
            opacity: 1;
        }

        .case-overlay a {
            color: var(--white);
            font-size: 13px;
            font-weight: 600;
            border: 2px solid var(--white);
            padding: 8px 18px;
            border-radius: var(--radius-sm);
            transition: var(--transition);
        }

        .case-overlay a:hover {
            background: var(--white);
            color: var(--dark);
        }

        .case-body {
            padding: 20px 22px;
        }

        .case-tag {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: var(--primary);
            margin-bottom: 6px;
        }

        .case-title {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .case-desc {
            font-size: 13px;
            color: var(--gray);
            line-height: 1.6;
        }

        .case-meta {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px solid var(--border);
            font-size: 12px;
            color: var(--gray-light);
            font-weight: 500;
        }

        .case-meta i {
            font-size: 11px;
        }

        /* Cases checklist */
        .cases-checklist {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .case-check-item {
            display: flex;
            gap: 18px;
            align-items: flex-start;
            padding: 24px;
            border: 1.5px solid var(--border);
            border-radius: var(--radius);
            background: var(--white);
            transition: var(--transition);
        }

        .case-check-item:hover {
            border-color: var(--primary);
            box-shadow: var(--shadow);
            transform: translateY(-2px);
        }

        .case-check-icon {
            flex-shrink: 0;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: #dcfce7;
            color: #16a34a;
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 2px;
        }

        .case-check-body {
            flex: 1;
        }

        .case-check-body .case-tag {
            margin-bottom: 5px;
        }

        .case-check-body .case-title {
            font-size: 15px;
            margin-bottom: 7px;
        }

        .case-check-body .case-desc {
            font-size: 13px;
            color: var(--gray);
            line-height: 1.6;
            margin-bottom: 12px;
        }

        .case-metric {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 700;
            color: var(--primary);
            background: var(--primary-light);
            padding: 3px 10px;
            border-radius: 100px;
        }

        .case-metric i {
            font-size: 11px;
        }

        /* =============================================
       BLOG
    ============================================= */
        #blog {
            padding: var(--section-py) 0;
            background: var(--bg-light);
        }

        .blog-grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr;
            gap: 28px;
            margin-top: 52px;
        }

        .blog-card {
            background: var(--white);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            display: flex;
            flex-direction: column;
        }

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

        .blog-img {
            aspect-ratio: 16/9;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 52px;
            color: rgba(255, 255, 255, .6);
        }

        .blog-card.featured .blog-img {
            aspect-ratio: 16/10;
            font-size: 80px;
        }

        .blog-body {
            padding: 24px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .blog-category {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: var(--primary);
            margin-bottom: 10px;
        }

        .blog-title {
            font-size: 17px;
            font-weight: 700;
            line-height: 1.4;
            margin-bottom: 10px;
            transition: color var(--transition);
        }

        .blog-card.featured .blog-title {
            font-size: 22px;
        }

        .blog-card:hover .blog-title {
            color: var(--primary);
        }

        .blog-excerpt {
            font-size: 13px;
            color: var(--gray);
            line-height: 1.7;
            flex: 1;
        }

        .blog-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 18px;
            padding-top: 16px;
            border-top: 1px solid var(--border);
        }

        .blog-author {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .author-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: var(--white);
            font-weight: 700;
            font-size: 12px;
        }

        .blog-author-name {
            font-size: 12px;
            font-weight: 600;
        }

        .blog-date {
            font-size: 11px;
            color: var(--gray-light);
        }

        .blog-read-time {
            font-size: 11px;
            color: var(--gray-light);
            display: flex;
            align-items: center;
            gap: 4px;
        }

        /* =============================================
       GALERÍA
    ============================================= */
        .gallery-sec {
            padding: var(--section-py) 0;
            background: var(--white);
        }

        /* No existía ninguna regla para .gallery-header, aunque el template la
           pinta: la descripción quedaba pegada a las fotos. El margen es el
           mismo criterio que .testimonials-header y .process-header. */
        .gallery-header {
            margin-bottom: 48px;
        }

        .gallery-sec .section-title {
            color: var(--section-text, var(--dark));
        }

        .gallery-sec .section-subtitle {
            color: var(--section-text, var(--gray));
        }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
        }

        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: var(--radius);
            aspect-ratio: 1 / 1;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform .5s ease;
        }

        .gallery-item:hover img {
            transform: scale(1.07);
        }

        .gallery-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(15, 23, 42, .88) 0%, transparent 55%);
            opacity: 0;
            transition: opacity var(--transition);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 20px;
            text-decoration: none;
        }

        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }

        .gallery-overlay h3 {
            font-size: 14px;
            font-weight: 700;
            color: var(--white);
            margin: 0 0 4px;
            line-height: 1.3;
        }

        .gallery-overlay p {
            font-size: 13px;
            color: rgba(255, 255, 255, .72);
            margin: 0;
            line-height: 1.5;
        }

        .gallery-overlay-zoom {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .2);
            backdrop-filter: blur(6px);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            font-size: 14px;
            transform: scale(0);
            transition: transform var(--transition);
        }

        .gallery-item:hover .gallery-overlay-zoom {
            transform: scale(1);
        }

        /* =============================================
       RAZONES / VENTAJAS
    ============================================= */
        .testimonial-sec {
            padding: var(--section-py) 0;
            background: var(--dark);
            position: relative;
            overflow: hidden;
        }

        .testimonial-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            opacity: .1;
            filter: blur(3px);
        }

        .testimonials-header {
            text-align: center;
            margin-bottom: 56px;
            position: relative;
            z-index: 1;
        }

        /* --section-text lo define el bloque Apariencia del editor, común a
           todas las secciones. El resto de tonos se derivan de él, así que un
           solo color sirve tanto sobre fondo oscuro como sobre fondo claro.
           Sin configurar, todo cae al blanco original. */
        .testimonials-header .section-title {
            color: var(--section-text, var(--white));
        }

        .testimonials-header .section-subtitle {
            color: color-mix(in srgb, var(--section-text, #ffffff) 82%, transparent);
        }

        .testimonials-header-desc {
            margin-top: 16px;
            color: color-mix(in srgb, var(--section-text, #ffffff) 82%, transparent);
            font-size: 15px;
            line-height: 1.8;
        }

        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 20px;
            position: relative;
            z-index: 1;
        }

        .testimonial-card {
            background: color-mix(in srgb, var(--section-text, #ffffff) 6%, transparent);
            border: 1px solid color-mix(in srgb, var(--section-text, #ffffff) 10%, transparent);
            border-radius: var(--radius);
            padding: 28px 26px;
            transition: var(--transition);
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .testimonial-card:hover {
            background: color-mix(in srgb, var(--section-text, #ffffff) 10%, transparent);
            border-color: var(--accent);
            transform: translateY(-4px);
        }

        .reason-icon {
            /* La card es un flex vertical, así que la posición del icono la
               decide align-self. --why-icon-align la fija la sección. */
            align-self: var(--why-icon-align, flex-start);
            width: 48px;
            height: 48px;
            border-radius: var(--radius-sm);
            background: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: var(--on-primary, var(--white));
            flex-shrink: 0;
            transition: var(--transition);
        }

        .testimonial-card:hover .reason-icon {
            transform: scale(1.08);
            box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 40%, transparent);
        }

        .reason-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--section-text, var(--white));
            line-height: 1.35;
            margin: 0;
        }

        .reason-desc {
            font-size: 14px;
            color: color-mix(in srgb, var(--section-text, #ffffff) 70%, transparent);
            line-height: 1.7;
            margin: 0;
        }

        /* Botón opcional al cierre de una sección (sections/_cta.html.twig).
           z-index porque en why el fondo y el degradado van posicionados por
           encima del flujo normal y se comerían el clic. */
        .section-cta {
            margin-top: 44px;
            text-align: center;
            position: relative;
            z-index: 1;
        }

        /* --- Variante "con imagen" (why/con-imagen.html.twig) -------------
           El grid deja de ser auto-fill: las columnas las elige el admin y
           llegan en --why-cols. Baja a 2 y a 1 en pantallas pequeñas, así
           que elegir 4 no rompe el móvil. */
        .testimonial-sec.testimonial-sec--cards .testimonials-grid {
            grid-template-columns: repeat(var(--why-cols, 3), 1fr);
        }

        @media (max-width: 991px) {
            .testimonial-sec.testimonial-sec--cards .testimonials-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 575px) {
            .testimonial-sec.testimonial-sec--cards .testimonials-grid {
                grid-template-columns: 1fr;
            }
        }

        /* La imagen va a sangre contra el borde superior de la card: el
           margen negativo compensa el padding (28px 26px) y el overflow
           recorta las esquinas redondeadas. */
        .testimonial-sec.testimonial-sec--cards .testimonial-card {
            overflow: hidden;
        }

        .testimonial-card-media {
            margin: -28px -26px 0;
            aspect-ratio: 4 / 3;
        }

        .testimonial-card-media img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* --- Variante "con vídeo" (why/con-video.html.twig) ---------------
           El encabezado sigue a todo el ancho y el cuerpo se parte en dos:
           los elementos a un lado y el vídeo al otro. */
        .testimonials-body {
            display: grid;
            grid-template-columns: 1fr minmax(0, 320px);
            gap: 48px;
            /* Las tarjetas NO se estiran hasta la altura del vídeo: cada
               columna arranca arriba y conserva su alto natural. */
            align-items: start;
            /* Por encima de la imagen de fondo (.testimonial-bg). */
            position: relative;
            z-index: 1;
        }

        /* Vídeo a la izquierda: se invierte el orden visual sin tocar el HTML,
           así los elementos se siguen leyendo primero. */
        .testimonial-sec--video-left .testimonials-body {
            grid-template-columns: minmax(0, 320px) 1fr;
        }

        .testimonial-sec--video-left .testimonials-grid { order: 2; }
        .testimonial-sec--video-left .why-video-wrap { order: 1; }

        /* Sin número fijo de columnas: caben las que quepan en el ancho que
           deja el vídeo. Con 200px de mínimo entran dos en escritorio y una
           sola cuando la columna se estrecha. */
        .testimonial-sec.testimonial-sec--video .testimonials-grid {
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            align-content: start;
        }

        .why-video-wrap {
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            /* Reserva el hueco antes de que carguen los metadatos: sin esto la
               página pega un salto cuando el navegador descubre el tamaño. */
            aspect-ratio: var(--why-video-ratio, 9/16);
            background: var(--dark);
        }

        .why-video {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        @media (max-width: 900px) {
            .testimonials-body,
            .testimonial-sec--video-left .testimonials-body {
                grid-template-columns: 1fr;
            }

            .testimonial-sec--video-left .testimonials-grid,
            .testimonial-sec--video-left .why-video-wrap {
                order: initial;
            }

            /* En una columna el vídeo se centra y no pasa de 320px: a pantalla
               completa un 9:16 ocuparía más de un viewport de alto. */
            .why-video-wrap {
                max-width: 320px;
                margin-inline: auto;
            }
        }

        /* =============================================
       WHO / CHECKLIST
    ============================================= */
        .team-sec {
            padding: var(--section-py) 0;
            background: var(--white);
        }

        .who-header {
            text-align: center;
            margin-bottom: 56px;
        }

        .who-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .who-item {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            padding: 22px 24px;
            background: var(--white);
            border-radius: var(--radius);
            border: 1px solid var(--border);
            transition: var(--transition);
        }

        .who-item:hover {
            border-color: var(--primary);
            box-shadow: var(--shadow);
            transform: translateY(-3px);
        }

        .who-item-icon {
            /* La card es un flex vertical: la posición del icono la decide
               align-self, y --who-icon-align la fija la sección. */
            align-self: var(--who-icon-align, flex-start);
            flex-shrink: 0;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: var(--primary);
            color: var(--on-primary, var(--white));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            transition: var(--transition);
        }

        .who-item:hover .who-item-icon {
            transform: scale(1.08);
            box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 40%, transparent);
        }

        .who-item p {
            font-size: 15px;
            color: var(--dark);
            line-height: 1.65;
            margin: 0;
        }

        /* =============================================
       FAQ
    ============================================= */
        .faq-sec {
            padding: var(--section-py) 0;
            background: var(--white);
        }

        .faq-grid {
            margin-top: 52px;
        }

        /* Variante con caja lateral (faq/con-contacto.html.twig). El acordeón
           manda y la caja acompaña, de ahí el reparto desigual. En pantallas
           medianas la caja baja debajo en vez de estrecharse. */
        .faq-grid--with-aside {
            display: grid;
            grid-template-columns: 1.9fr 1fr;
            gap: 40px;
            align-items: start;
        }

        @media (max-width: 900px) {
            .faq-grid--with-aside {
                grid-template-columns: 1fr;
                gap: 28px;
            }
        }

        .faq-sidebar h3 {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .faq-sidebar p {
            font-size: 14px;
            color: var(--gray);
            margin-bottom: 28px;
        }

        .faq-contact-box {
            background: var(--primary-light);
            border-radius: var(--radius);
            padding: 28px;
            border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
        }

        .faq-contact-box i {
            font-size: 28px;
            /* El fondo de la caja es --primary-light, siempre claro, así que
               el icono se oscurece a partir del primario en vez de usarlo
               tal cual: con una marca clara no se distinguiría. */
            color: color-mix(in srgb, var(--primary) 70%, #000);
            margin-bottom: 12px;
        }

        .faq-contact-box h3,
        .faq-contact-box h4 {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .faq-contact-box p {
            font-size: 13px;
            color: var(--gray);
            margin-bottom: 0;
        }

        .faq-contact-box a {
            /* El fondo de la caja es --primary-light: un 12% del primario sobre
               blanco, así que siempre es muy claro. Derivar de él el color del
               enlace dejaba el contraste a merced de la marca —con un primario
               amarillo se quedaba al filo—, así que se usa el color de texto,
               que sobre ese fondo pasa con cualquier paleta.

               Y se subraya: así el enlace no se distingue solo por el color,
               que es lo que pide el criterio de no depender del color para
               transmitir información. */
            color: var(--dark);
            font-weight: 600;
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        /* La flecha queda fuera del subrayado: el inline-block la saca de la
           línea de decoración del enlace, que no se puede quitar desde el hijo. */
        .faq-contact-box a i {
            display: inline-block;
        }

        .faq-contact-box .faq-contact-cta {
            margin-top: 16px;
            margin-bottom: 0;
        }

        .faq-contact-box .faq-contact-cta i {
            font-size: 12px;
            margin-bottom: 0;
            margin-left: 4px;
        }

        .faq-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .faq-item {
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            overflow: hidden;
            transition: border-color var(--transition);
        }

        .faq-item.open {
            border-color: var(--primary);
        }

        .faq-question {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 22px;
            cursor: pointer;
            font-weight: 600;
            font-size: 15px;
            gap: 16px;
            user-select: none;
        }

        .faq-icon {
            flex-shrink: 0;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 2px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: var(--gray);
            transition: var(--transition);
        }

        .faq-item.open .faq-icon {
            background: var(--primary);
            border-color: var(--primary);
            color: var(--on-primary, var(--white));
            transform: rotate(45deg);
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height .4s ease, padding .4s ease;
        }

        .faq-item.open .faq-answer {
            max-height: 300px;
        }

        .faq-answer-inner {
            padding: 0 22px 20px;
            font-size: 14px;
            color: var(--gray);
            line-height: 1.8;
        }

        /* =============================================
       FORMULARIO
    ============================================= */
        .contact-sec {
            padding: var(--section-py) 0;
            background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
            position: relative;
            overflow: hidden;
        }

        .contact-sec::before {
            content: '';
            position: absolute;
            bottom: -120px;
            left: -120px;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--primary) 8%, transparent);
            filter: blur(80px);
        }

        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1.3fr;
            gap: 72px;
            align-items: start;
        }

        .contact-info .section-label {
            color: color-mix(in srgb, var(--primary) 45%, #fff);
        }

        .contact-info .section-title {
            color: var(--white);
        }

        .contact-info .section-subtitle {
            color: rgba(255, 255, 255, .6);
        }

        .contact-form-empty p {
            color: var(--gray);
            font-size: 14px;
        }

        .contact-details {
            margin-top: 44px;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .contact-detail {
            display: flex;
            gap: 16px;
            align-items: flex-start;
        }

        .contact-detail-icon {
            flex-shrink: 0;
            width: 44px;
            height: 44px;
            border-radius: 10px;
            background: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--on-primary, var(--white));
            font-size: 18px;
        }

        .contact-detail h3,
        .contact-detail h4 {
            font-size: 13px;
            font-weight: 600;
            color: rgba(255, 255, 255, .5);
            margin-bottom: 3px;
            text-transform: uppercase;
            letter-spacing: .06em;
        }

        .contact-detail p {
            font-size: 15px;
            font-weight: 500;
            color: var(--white);
        }

        .form-card {
            background: var(--white);
            border-radius: var(--radius-lg);
            padding: 44px 40px;
            box-shadow: var(--shadow-lg);
        }

        /* Los 6px de antes asumían un .form-subtitle debajo que ningún
           template llega a pintar, así que el título quedaba pegado al primer
           campo. Si algún día se añade el subtítulo, recupera su margen corto. */
        .form-title {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 28px;
        }

        .form-title:has(+ .form-subtitle) {
            margin-bottom: 6px;
        }

        .form-subtitle {
            font-size: 14px;
            color: var(--gray);
            margin-bottom: 32px;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .form-fields-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0 20px;
        }

        .form-group--full {
            grid-column: 1 / -1;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: var(--dark-2);
            margin-bottom: 7px;
        }

        .form-group label span {
            color: var(--primary);
        }

        .form-control {
            width: 100%;
            padding: 12px 16px;
            border: 1.5px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-family: var(--font-body);
            color: var(--dark);
            background: var(--white);
            transition: border-color var(--transition), box-shadow var(--transition);
            outline: none;
        }

        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
        }

        .form-control::placeholder {
            color: var(--gray-light);
        }

        textarea.form-control {
            resize: vertical;
            min-height: 120px;
        }

        .form-select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center;
        }

        .form-check {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 24px;
        }

        .form-check input {
            margin-top: 2px;
            accent-color: var(--primary);
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }

        .form-check label {
            font-size: 13px;
            color: var(--gray);
            cursor: pointer;
        }

        .form-check a {
            color: var(--primary);
        }

        .form-submit {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        .form-note {
            font-size: 12px;
            color: var(--gray-light);
        }

        /* Success state */
        .form-success {
            display: none;
            text-align: center;
            padding: 32px 0;
        }

        .form-success i {
            font-size: 56px;
            color: #22c55e;
            margin-bottom: 16px;
        }

        .form-success h3 {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .form-success p {
            font-size: 14px;
            color: var(--gray);
        }

        /* =============================================
       TEXTO EN PROSA — sección `prose`
    ============================================= */
        /* Tipografía del contenido escrito con el editor. Vive separada del
           bloque que la usa porque la maquetó primero el cuerpo de las
           páginas estáticas, que ahora se montan también con secciones. */
        .prose {
            font-size: var(--prose-size, 16px);
            line-height: 1.85;
            color: var(--section-text, var(--gray));
        }

        .prose h2,
        .prose h3,
        .prose h4 {
            font-family: var(--font-heading);
            color: var(--section-text, var(--dark));
            line-height: 1.3;
            margin: 40px 0 14px;
        }

        .prose h2 { font-size: 26px; }
        .prose h3 { font-size: 20px; }
        .prose h4 { font-size: 17px; }

        .prose > :first-child { margin-top: 0; }
        .prose > :last-child { margin-bottom: 0; }

        .prose p { margin: 0 0 18px; }

        .prose strong { color: var(--section-text, var(--dark)); }

        .prose a {
            color: var(--primary);
            text-decoration: underline;
        }

        .prose ul,
        .prose ol {
            margin: 0 0 18px;
            padding-left: 22px;
        }

        .prose li { margin-bottom: 8px; }

        /* Las tablas de las políticas de cookies traen más columnas de las
           que caben en móvil: se desplazan dentro de su caja en lugar de
           reventar el ancho de la página. */
        .prose figure.table {
            overflow-x: auto;
            margin: 0 0 24px;
        }

        .prose table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }

        .prose th,
        .prose td {
            border: 1px solid var(--border);
            padding: 10px 12px;
            text-align: left;
            vertical-align: top;
        }

        .prose th {
            background: var(--bg-light);
            color: var(--dark);
            font-weight: 600;
        }

        .prose img {
            border-radius: var(--radius);
        }

        /* --- Sección `prose` (prose/default.html.twig) -------------------
           Ancho, alineación, tamaño y columnas los elige el admin y llegan
           como variables desde el <section>. */
        .prose-sec {
            padding: var(--section-py) 0;
        }

        .prose-block {
            max-width: var(--prose-width, 820px);
            /* El bloque siempre va centrado en el contenedor; lo que elige el
               admin es cómo se alinea el texto DENTRO de él. */
            margin-inline: auto;
            text-align: var(--prose-align, left);
            /* Justificado y a dos columnas se abren calles blancas enormes
               entre palabras: partir por sílabas las cierra. Funciona porque
               el layout declara el idioma en <html lang>. */
            hyphens: auto;
        }

        .prose-block .section-title,
        .prose-block .section-subtitle {
            text-align: inherit;
        }

        /* Ni el título ni el subtítulo traen margen inferior: cada sección se
           lo pone en su propia cabecera, y aquí no hay ninguna, así que el
           texto arrancaba pegado. El margen se le da al cuerpo y no al título
           para no tener que distinguir si hay subtítulo de por medio; en un
           bloque de solo texto el cuerpo es el primer hijo y no separa nada. */
        .prose-body {
            margin-top: 32px;
        }

        .prose-body:first-child {
            margin-top: 0;
        }

        /* Dos columnas de texto: el `column-count` no parte el bloque en dos
           cajas, reparte el mismo flujo, así que los encabezados siguen
           encajando donde toque. */
        .prose-body {
            column-count: var(--prose-cols, 1);
            column-gap: 48px;
        }

        @media (max-width: 767px) {
            /* Dos columnas en una pantalla de móvil dejan renglones de cuatro
               palabras: por debajo de tablet siempre una. */
            .prose-body { column-count: 1; }

            .prose-block { text-align: left; }
        }

        /* Hueco para las barras fijas, en las páginas que no arrancan con un
           hero. El hero mide 100vh y lleva la barra montada encima por diseño;
           una sección normal empezaría tapada por ella.

           La altura depende de lo que se pinte, y eso lo sabe el layout: pone
           `has-topbar` y `has-navbar` en el wrapper, y aquí solo se traduce a
           píxeles. Sin barras, el hueco es cero. */
        .page-top-spacer {
            height: 0;
        }

        .has-topbar .page-top-spacer {
            height: 40px;
        }

        .has-topbar.has-navbar .page-top-spacer {
            height: 112px;
        }

        /* Por debajo de 991px la barra superior se oculta —ver el media query
           que le pone display:none— así que solo queda la de menú. */
        @media (max-width: 991px) {
            .has-topbar .page-top-spacer {
                height: 0;
            }

            .has-topbar.has-navbar .page-top-spacer {
                height: 72px;
            }
        }

        /* =============================================
       NOTICIAS — listado y detalle
    ============================================= */
        .blog-sec {
            padding: var(--section-py) 0;
            background: var(--white);
        }

        .blog-header {
            text-align: center;
            margin-bottom: 48px;
        }

        /* Las columnas las elige el admin y llegan en --blog-cols. Bajan a 2 y
           a 1 en pantallas pequeñas, así que elegir 4 no rompe el móvil. */
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(var(--blog-cols, 3), 1fr);
            gap: 28px;
        }

        @media (max-width: 991px) {
            .blog-grid { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 575px) {
            .blog-grid { grid-template-columns: 1fr; }
        }

        .blog-card {
            display: flex;
            flex-direction: column;
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            overflow: hidden;
            transition: var(--transition);
        }

        .blog-card:hover {
            border-color: var(--primary);
            box-shadow: var(--shadow);
        }

        /* Proporción fija para que una foto vertical no descuadre la fila. */
        .blog-card-media {
            aspect-ratio: 16 / 10;
            background: var(--bg-light);
        }

        .blog-card-media img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .blog-card-body {
            padding: 22px 24px 26px;
        }

        .blog-card-date {
            display: block;
            margin-bottom: 8px;
            color: var(--primary);
            font-size: 12px;
            font-weight: 600;
        }

        .blog-card-title {
            font-family: var(--font-heading);
            font-size: 19px;
            line-height: 1.35;
            margin: 0 0 10px;
        }

        .blog-card-title a {
            color: var(--dark);
            transition: color var(--transition);
        }

        .blog-card-title a:hover {
            color: var(--primary);
        }

        .blog-card-excerpt {
            margin: 0;
            color: var(--gray);
            font-size: 14px;
            line-height: 1.7;
        }

        .blog-empty {
            text-align: center;
            color: var(--gray);
        }

        /* --- Paginación --- */
        .blog-pager {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 48px;
        }

        .blog-pager-item {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 38px;
            height: 38px;
            padding: 0 10px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--dark);
            font-size: 14px;
            transition: var(--transition);
        }

        .blog-pager-item:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        .blog-pager-item--current {
            background: var(--primary);
            border-color: var(--primary);
            color: var(--white);
        }

        /* --- Detalle del artículo --- */
        .article-sec {
            padding: var(--section-py) 0;
            background: var(--white);
        }

        /* Ancho de lectura, igual que las páginas de texto: el cuerpo de un
           artículo a todo el contenedor obliga a barrer la pantalla entera. */
        .article-header,
        .article-media,
        .article-sec .prose,
        .article-back {
            max-width: 820px;
            margin-inline: auto;
        }

        .article-header {
            margin-bottom: 32px;
        }

        .article-date {
            display: block;
            margin-bottom: 10px;
            color: var(--primary);
            font-size: 13px;
            font-weight: 600;
        }

        .article-media {
            margin-bottom: 36px;
            border-radius: var(--radius-lg);
            overflow: hidden;
        }

        .article-media img {
            display: block;
            width: 100%;
            height: auto;
        }

        .article-back {
            margin-top: 40px;
        }

        .article-back a {
            color: var(--primary);
            font-weight: 500;
        }

        /* =============================================
       FOOTER
    ============================================= */
        #footer {
            background: var(--dark);
            padding: 72px 0 32px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 48px;
            padding-bottom: 48px;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
        }

        /* El logo del pie lo sube cada landing, así que llega con el tamaño
           que tenga: se limita por alto y se deja que el ancho lo siga.
           El <a> pasa a bloque porque, siendo inline, el margen auto de la
           imagen no tiene ancho contra el que centrarse. */
        .footer-brand > a {
            display: block;
        }

        .footer-brand > a img {
            max-height: 200px;
            width: auto;
            margin-left: auto;
            margin-right: auto;
        }

        .footer-brand p,
        .footer-brand-text {
            font-size: 14px;
            color: rgba(255, 255, 255, .5);
            line-height: 1.8;
            margin: 12px 0 24px;
        }

        /* El texto del pie lo escribe un editor, así que puede traer
           encabezados, párrafos y listas. La hoja no define color para h1-h6,
           que caían al negro del navegador y sobre el fondo oscuro del footer
           no se veían. */
        .footer-brand-text > :first-child { margin-top: 0; }
        .footer-brand-text > :last-child { margin-bottom: 0; }

        .footer-brand-text p {
            font-size: inherit;
            color: inherit;
            line-height: inherit;
            margin: 0 0 10px;
        }

        .footer-brand-text h1,
        .footer-brand-text h2,
        .footer-brand-text h3,
        .footer-brand-text h4,
        .footer-brand-text h5,
        .footer-brand-text h6 {
            color: var(--white);
            font-size: 16px;
            font-weight: 700;
            line-height: 1.4;
            margin: 0 0 8px;
        }

        .footer-brand-text a {
            color: color-mix(in srgb, var(--primary) 45%, #fff);
            text-decoration: underline;
        }

        .footer-brand-text ul {
            margin: 0 0 10px;
            padding-left: 18px;
            list-style: disc;
        }

        .footer-brand-text li { margin-bottom: 4px; }

        .footer-social {
            display: flex;
            gap: 10px;
        }

        .footer-social a {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: rgba(255, 255, 255, .08);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, .6);
            font-size: 14px;
            transition: var(--transition);
        }

        .footer-social a:hover {
            background: var(--primary);
            color: var(--on-primary, var(--white));
        }

        .footer-col h4 {
            font-size: 13px;
            font-weight: 700;
            color: var(--white);
            letter-spacing: .06em;
            text-transform: uppercase;
            margin-bottom: 20px;
        }

        .footer-links {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .footer-links a {
            font-size: 14px;
            color: rgba(255, 255, 255, .5);
            transition: color var(--transition);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .footer-links a:hover {
            color: var(--white);
        }

        .footer-links a::before {
            content: '—';
            font-size: 10px;
            opacity: .4;
        }

        /* Footer contact list */
        .footer-contact-list {
            display: flex;
            flex-direction: column;
            gap: 14px;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-contact-list li {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 14px;
            color: rgba(255, 255, 255, .6);
            line-height: 1.5;
        }

        .footer-contact-list li .fc-icon {
            flex-shrink: 0;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .07);
            border: 1px solid rgba(255, 255, 255, .1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: 13px;
            transition: background var(--transition), color var(--transition);
        }

        .footer-contact-list li a {
            display: flex;
            align-items: center;
            gap: 12px;
            color: rgba(255, 255, 255, .6);
            transition: color var(--transition);
        }

        .footer-contact-list li a:hover {
            color: var(--white);
        }

        .footer-contact-list li a:hover .fc-icon,
        .footer-contact-list li:hover .fc-icon {
            transform: scale(1.08);
            box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 40%, transparent);
        }

        .footer-newsletter input {
            width: 100%;
            padding: 11px 16px;
            background: rgba(255, 255, 255, .07);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: var(--radius-sm);
            color: var(--white);
            font-size: 13px;
            font-family: var(--font-body);
            outline: none;
            margin-bottom: 10px;
            transition: border-color var(--transition);
        }

        .footer-newsletter input::placeholder {
            color: rgba(255, 255, 255, .35);
        }

        .footer-newsletter input:focus {
            border-color: var(--primary);
        }

        .footer-newsletter .btn {
            width: 100%;
            justify-content: center;
            padding: 11px 20px;
            background: var(--primary);
            color: var(--on-primary, var(--white));
            border-radius: var(--radius-sm);
            font-size: 13px;
        }

        .footer-newsletter .btn:hover {
            background: var(--primary-dark);
        }

        .footer-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 28px;
            font-size: 13px;
            /* Al 35% no llega al mínimo ni sobre un fondo muy oscuro, y el color
               del pie lo elige cada proyecto: con un secundario claro es
               ilegible. */
            color: rgba(255, 255, 255, .75);
            gap: 16px;
            flex-wrap: wrap;
        }

        .footer-bottom a {
            color: rgba(255, 255, 255, .85);
            transition: color var(--transition);
        }

        .footer-bottom a:hover {
            color: var(--white);
        }

        .site-footer__bottom {
            margin-top: 32px;
            padding: 28px 0;
            border-top: 1px solid rgba(255, 255, 255, .08);
        }

        .kit-logos {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 24px;
        }

        .kit-logos img {
            height: 52px;
            width: auto;
            max-width: 120px;
            object-fit: contain;
            opacity: .85;
            transition: opacity var(--transition);
        }

        .kit-logos img:hover {
            opacity: 1;
        }

        /* =============================================
       BACK TO TOP
    ============================================= */
        #back-top {
            position: fixed;
            bottom: 32px;
            right: 32px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--primary);
            color: var(--on-primary, var(--white));
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow);
            opacity: 0;
            pointer-events: none;
            transition: var(--transition);
            z-index: 900;
        }

        #back-top.visible {
            opacity: 1;
            pointer-events: auto;
        }

        #back-top:hover {
            background: var(--primary-dark);
            transform: translateY(-3px);
        }

        /* =============================================
       RESEÑAS (panel estilo Google)
    ============================================= */
        .reviews-sec {
            padding: var(--section-py) 0;
            background: var(--bg-light);
        }

        /* El color de texto de la sección solo alcanza a su cabecera: dentro
           del panel el fondo es blanco fijo, como en el widget original, así
           que un texto claro ahí quedaría ilegible. */
        .reviews-sec .section-title {
            color: var(--section-text, var(--dark));
        }

        .reviews-sec .section-label {
            color: var(--section-text, var(--primary));
        }

        /* Panel horizontal: resumen fijo a la izquierda, carrusel a la
           derecha, todo dentro de una caja con borde de marca. */
        .reviews-panel {
            display: grid;
            grid-template-columns: 210px minmax(0, 1fr);
            gap: 36px;
            align-items: center;
            margin-top: 40px;
            padding: 32px;
            background: var(--white);
            border: 2px solid var(--primary);
            border-radius: var(--radius-lg);
        }

        .reviews-summary {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 4px;
        }

        .reviews-rating-label {
            font-size: 21px;
            font-weight: 800;
            letter-spacing: .5px;
            color: var(--dark);
        }

        .reviews-stars {
            color: #fbbc04;   /* amarillo de Google: no sigue la marca a propósito */
            font-size: 22px;
            letter-spacing: 1px;
        }

        .reviews-count {
            font-size: 14px;
            color: var(--gray);
        }

        .reviews-count b { color: var(--dark); }

        /* Logotipo compuesto con letras: evita depender de una imagen remota. */
        .reviews-google {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 30px;
            font-weight: 500;
            letter-spacing: -1px;
            margin-top: 6px;
            line-height: 1;
        }

        .reviews-google b,
        .reviews-google i,
        .reviews-google u,
        .reviews-google s,
        .reviews-google em,
        .reviews-google strong {
            font-style: normal;
            font-weight: 500;
            text-decoration: none;
        }

        .reviews-google b      { color: #4285F4; }
        .reviews-google i      { color: #EA4335; }
        .reviews-google u      { color: #FBBC05; }
        .reviews-google s      { color: #4285F4; }
        .reviews-google em     { color: #34A853; }
        .reviews-google strong { color: #EA4335; }

        .reviews-link {
            margin-top: 10px;
            font-size: 13px;
            font-weight: 600;
            color: color-mix(in srgb, var(--primary) 70%, #000);
        }

        /* Carrusel: scroll nativo con snap, así se arrastra con el dedo sin
           JavaScript. Las flechas solo hacen scrollBy. */
        .reviews-carousel {
            position: relative;
            min-width: 0;
        }

        .reviews-track {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            padding-bottom: 4px;
            /* La barra se oculta: el desplazamiento se hace con las flechas o
               arrastrando, y una barra bajo las tarjetas ensucia el panel. */
            scrollbar-width: none;
        }

        .reviews-track::-webkit-scrollbar { display: none; }

        .review-card {
            flex: 0 0 275px;
            scroll-snap-align: start;
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 18px 18px 20px;
        }

        .review-head {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        .review-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }

        /* Sin foto se pinta la inicial sobre el color de marca. */
        .review-avatar--initial {
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--primary);
            color: var(--on-primary, var(--white));
            font-weight: 700;
            font-size: 15px;
        }

        .review-meta { flex: 1; min-width: 0; }

        .review-author {
            font-size: 14px;
            font-weight: 700;
            color: var(--dark);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .review-date {
            font-size: 12px;
            /* --gray-light sobre blanco se queda en 2.8:1. El gris normal ya
               pasa el 4.5:1 que pide el nivel AA para texto pequeño. */
            color: var(--gray);
        }

        .review-g { flex-shrink: 0; }

        .review-stars {
            display: flex;
            align-items: center;
            gap: 2px;
            color: #fbbc04;
            font-size: 13px;
            margin-bottom: 8px;
        }

        .review-verified {
            color: #4285F4;
            font-size: 12px;
            margin-left: 4px;
        }

        /* Cortado a 4 líneas: sin esto una reseña larga estira toda la fila,
           porque las tarjetas del carrusel comparten altura. */
        .review-text {
            font-size: 13.5px;
            line-height: 1.65;
            color: var(--gray);
            margin: 0;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            line-clamp: 4;
            overflow: hidden;
        }

        .review-card.is-expanded .review-text {
            display: block;
            -webkit-line-clamp: unset;
            line-clamp: unset;
            overflow: visible;
        }

        .review-more {
            margin-top: 8px;
            padding: 0;
            font-size: 12.5px;
            font-weight: 600;
            /* Igual que el enlace de la caja de FAQ: con un primario claro el
               70% no llegaba al mínimo. */
            color: color-mix(in srgb, var(--primary) 55%, #000);
            background: none;
            border: none;
        }

        .review-more:hover { text-decoration: underline; }

        .reviews-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--white);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-sm);
            color: var(--gray);
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
            transition: var(--transition);
        }

        .reviews-nav:hover {
            color: var(--dark);
            border-color: var(--gray-light);
        }

        .reviews-nav--prev { left: -16px; }
        .reviews-nav--next { right: -16px; }

        /* Al llegar a un extremo la flecha se apaga en vez de desaparecer,
           para que el ancho del carrusel no baile. */
        .reviews-nav[disabled] {
            opacity: .3;
            pointer-events: none;
        }

        @media (max-width: 860px) {
            .reviews-panel {
                grid-template-columns: 1fr;
                gap: 24px;
                padding: 24px 20px;
            }

            .reviews-nav { display: none; }
        }

        /* =============================================
       SEPARADOR
    ============================================= */

        /* Sin --section-py: el alto de un separador lo marcan los espacios
           que se eligen en el editor, no el padding estándar de sección. */
        /* Por clase y no por id: el separador puede repetirse en una misma
           página, y dos elementos con el mismo id son HTML inválido. Como no
           ofrece enlace de pie ni lo busca ningún JS, el identificador solo
           servía de enganche para estas dos reglas. */
        .separator-sec {
            padding: 0;
        }

        .separator-sec > .container {
            display: flex;
            justify-content: center;
        }

        .separator-motif {
            display: block;
            max-width: 100%;
            line-height: 0;
        }

        .separator-motif img {
            display: block;
            width: 100%;
            height: auto;
        }

        /* Teñido: el span lleva el color de fondo y se recorta con la propia
           imagen como máscara, de modo que solo queda su silueta pintada.

           El <img> sigue dentro, invisible: es quien reserva el alto que
           corresponde a la proporción de la imagen, que una máscara no conoce.

           La imagen de la máscara y el color se declaran en el style inline
           del elemento, no aquí: una url() dentro de una custom property se
           resuelve respecto a esta hoja, y el motivo vive en media/page/. */
        .separator-motif--tinted {
            -webkit-mask-position: center;
            mask-position: center;
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
        }

        .separator-motif--tinted img {
            visibility: hidden;
        }

        /* El <hr> se queda solo sin el borde y los márgenes que le pone el
           navegador. El alto y el fondo los define entero el style inline, que
           es lo que permite controlar el tamaño de guiones y puntos.

           Aquí no se le pone background-color a propósito: cuando lo tenía,
           pintaba la línea completa por debajo de los guiones —y en el color
           heredado del texto, de ahí que saliera gris— y el resultado se veía
           continuo. */
        .separator-line {
            margin: 0;
            max-width: 100%;
            border: 0;
        }

        /* =============================================
       APARIENCIA COMÚN DE LAS SECCIONES
    ============================================= */

        /* El bloque "Apariencia" del editor deja elegir color de texto en
           cualquier sección, pero solo unas pocas tenían reglas que lo
           consumieran. Aquí se cubren las demás, siempre con el valor que
           tenían fijo como fallback: sin configurar nada, todo se ve igual.

           Se listan una a una en vez de aplicarlo a `section *` porque cada
           una tiene elementos con color propio (botones, tarjetas, iconos)
           que no deben seguir al texto. */
        .intro-sec .section-title,
        .comments-sec .section-title,
        .trust-sec .section-title,
        .team-sec .section-title,
        .faq-sec .section-title,
        .contact-sec .section-title,
        .about-sec .section-title,
        .price-sec .section-title,
        #video .section-title,
        .generator-sec .section-title {
            color: var(--section-text, var(--dark));
        }

        .intro-sec .section-subtitle,
        .team-sec .section-subtitle,
        .faq-sec .section-subtitle,
        .about-sec .section-subtitle,
        .price-sec .section-subtitle {
            color: var(--section-text, var(--gray));
        }

        /* Estas dos van sobre fondo oscuro, así que su fallback es blanco. */
        .comments-sec .section-title,
        .generator-sec .section-title {
            color: var(--section-text, var(--white));
        }

        .comments-sec .section-subtitle,
        .trust-sec .section-subtitle,
        .generator-sec .section-subtitle {
            color: var(--section-text, color-mix(in srgb, #ffffff 82%, transparent));
        }

        /* Degradado decorativo del panel de apariencia. El selector de atributo
           evita tener que añadir una clase a las 19 maquetas: la regla solo
           entra en juego cuando la sección declara la variable, y una sección
           sin degradado no llega ni a crear el pseudo-elemento.

           `> *` sube el contenido por encima del velo. Sin eso el ::after
           taparía el texto, porque se pinta después en el orden del documento. */
        section[style*="--section-overlay"] {
            position: relative;
        }

        section[style*="--section-overlay"]::after {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--section-overlay);
            pointer-events: none;
            z-index: 0;
        }

        section[style*="--section-overlay"] > * {
            position: relative;
            z-index: 1;
        }

        /* La imagen de fondo del panel de apariencia se pinta a tamaño
           completo y sin repetir, que es lo que se espera de un fondo de
           sección. Las secciones con imagen propia (hero, process, why) traen
           su propio tratamiento y no pasan por aquí. */
        section[style*="background-image"] {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        /* =============================================
       RESPONSIVE
    ============================================= */
        @media (max-width: 1024px) {
            .services-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 32px;
            }

            .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .who-grid {
                grid-template-columns: 1fr;
            }

            .video-grid,
            .why-grid,
            .about-grid,
            .contact-grid {
                grid-template-columns: 1fr;
                gap: 48px;
            }

            .slide-content {
                margin-left: 24px;
            }

            .cases-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .blog-grid {
                grid-template-columns: 1fr 1fr;
            }

            .blog-card:first-child {
                grid-column: 1 / -1;
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 768px) {
            :root {
                --section-py: 64px;
            }

            #topbar {
                display: none;
            }

            #navbar {
                top: 0 !important;
            }

            .cases-checklist {
                grid-template-columns: 1fr;
            }

            .nav-links {
                display: none;
                flex-direction: column;
                position: fixed;
                top: 72px;
                left: 0;
                right: 0;
                background: var(--white);
                padding: 24px;
                gap: 20px;
                box-shadow: var(--shadow-lg);
            }

            .nav-links.open {
                display: flex;
            }

            .nav-links a {
                color: var(--gray) !important;
            }

            .nav-links .nav-cta {
                background: var(--primary);
                color: var(--on-primary, var(--white)) !important;
                text-align: center;
            }

            .nav-toggle {
                display: flex;
            }

            .services-header {
                grid-template-columns: 1fr;
            }

            .services-header .btn {
                justify-self: start;
            }

            .services-grid {
                grid-template-columns: 1fr;
            }

            .cases-grid {
                grid-template-columns: 1fr;
            }

            .blog-grid {
                grid-template-columns: 1fr;
            }

            .why-badge {
                right: 8px;
                bottom: -16px;
            }

            .form-row {
                grid-template-columns: 1fr;
            }

            .form-fields-grid {
                grid-template-columns: 1fr;
            }

            .form-submit {
                flex-direction: column;
                align-items: stretch;
            }

            .form-submit .btn {
                justify-content: center;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 32px;
            }

            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }

            .contact-grid {
                gap: 40px;
            }

            .slider-prev,
            .slider-next {
                display: none;
            }
        }