.sn-orig *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
:root{
            --navy: #0B405D;
            --navy-dark: #072E43;
            --navy-light: #0E5278;
            --lime: #B6C12B;
            --lime-dark: #6E7712  /* antes #9AA623: 2,67:1 sobre blanco fallaba AA; este da 4,87:1 */;
            --lime-light: #D4DE5C;
            --white: #FFFFFF;
            --off-white: #F7F8F3;
            --gray-50: #F9FAFB;
            --gray-100: #F3F4F6;
            --gray-200: #E5E7EB;
            --gray-300: #D1D5DB;
            --gray-400: #9CA3AF;
            --gray-500: #6B7280;
            --gray-600: #4B5563;
            --gray-700: #374151;
            --gray-800: #1F2937;
            --gray-900: #111827;
            --font: 'Assistant', -apple-system, BlinkMacSystemFont, sans-serif;
            --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
        }
.sn-orig /* Offset para que los anchors no queden tapados por la nav sticky (72 px) */
        section[id], .sn-orig #home{ scroll-margin-top: 80px; }
.sn-orig /* ═══════════════════════════════════════
           SCROLL PROGRESS BAR
           ═══════════════════════════════════════ */
        .scroll-progress{
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            width: 0%;
            background: linear-gradient(90deg, var(--lime), var(--lime-light));
            z-index: 1001;
            transition: width 0.1s linear;
        }
.sn-orig /* ═══════════════════════════════════════
           NAVIGATION
           ═══════════════════════════════════════ */
        .nav{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            padding: 0 48px;
            height: 72px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
        }
.sn-orig .nav-logo{
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
        }
.sn-orig .nav-logo img{
            height: 48px;
            width: auto;
        }
.sn-orig .nav-links{
            display: flex;
            align-items: center;
            gap: 36px;
            list-style: none;
        }
.sn-orig .nav-links a{
            font-size: 14px;
            font-weight: 600;
            color: var(--gray-600);
            text-decoration: none;
            transition: color 0.2s;
            position: relative;
        }
.sn-orig .nav-links a::after{
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--lime);
            transition: width 0.3s ease;
        }
.sn-orig .nav-links a:hover{
            color: var(--navy);
        }
.sn-orig .nav-links a:hover::after{
            width: 100%;
        }
.sn-orig .nav-cta{
            padding: 10px 24px;
            background: var(--navy);
            color: var(--white) !important;
            border-radius: 8px;
            font-weight: 600;
            font-size: 13px;
            transition: all 0.2s;
            cursor: pointer;
        }
.sn-orig .nav-cta:hover{
            background: var(--navy-dark);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(11, 64, 93, 0.3);
        }
.sn-orig .nav-cta::after{ display: none !important; }
.sn-orig .mobile-toggle{
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 8px;
            background: none;
            border: none;
        }
.sn-orig .mobile-toggle span{
            width: 24px;
            height: 2px;
            background: var(--navy);
            transition: all 0.3s;
        }
.sn-orig /* ═══════════════════════════════════════
           HERO
           ═══════════════════════════════════════ */
        .hero{
            position: relative;
            height: 280vh;            /* scroll track: controla cuánto scroll dura el video */
        }
.sn-orig .hero-sticky{
            position: sticky;
            top: 0;
            height: 100vh;
            overflow: hidden;
            display: flex;
            align-items: center;
        }
.sn-orig .hero-bg{
            position: absolute;
            inset: 0;
            z-index: 0;
        }
.sn-orig .hero-bg img, .sn-orig .hero-bg video, .sn-orig .hero-bg canvas{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: right center;
            will-change: transform;
        }
.sn-orig .hero-bg canvas{
            display: none;        /* JS lo activa solo en desktop */
            background: #000;
        }
.sn-orig /* Loader Apple-style: full overlay con barra de progreso */
        .hero-loader{
            position: absolute;
            inset: 0;
            background: #0B405D;
            display: none;       /* JS lo muestra cuando arranca la precarga */
            align-items: center;
            justify-content: center;
            z-index: 5;
            transition: opacity .6s ease-out;
        }
.sn-orig .hero-loader.is-active{ display: flex; }
.sn-orig .hero-loader.is-done{
            opacity: 0;
            pointer-events: none;
        }
.sn-orig .hero-loader-inner{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
        }
.sn-orig .hero-loader-bar{
            width: min(280px, 60vw);
            height: 3px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 2px;
            overflow: hidden;
        }
.sn-orig .hero-loader-progress{
            width: 0%;
            height: 100%;
            background: #B6C12B;
            transition: width .15s linear;
            border-radius: 2px;
        }
.sn-orig .hero-loader-label{
            color: rgba(255, 255, 255, 0.72);
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 11px;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            font-weight: 500;
        }
.sn-orig .hero-overlay{
            position: absolute;
            inset: 0;
            background: linear-gradient(
                to right,
                rgba(7, 46, 67, 0.18) 0%,
                rgba(7, 46, 67, 0.05) 35%,
                rgba(7, 46, 67, 0) 60%
            );
            z-index: 1;
        }
.sn-orig .hero-content{
            position: relative;
            z-index: 2;
            max-width: 1280px;
            margin: 0 auto;
            padding: 140px 48px 100px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }
.sn-orig .hero-text h1{
            font-family: var(--font-display);
            font-size: clamp(44px, 6vw, 72px);
            font-weight: 800;
            color: var(--white);
            line-height: 1.05;
            letter-spacing: -2px;
            margin-bottom: 24px;
            text-shadow: 0 2px 24px rgba(7, 46, 67, 0.55);
        }
.sn-orig .hero-text h1 .accent{
            color: var(--lime-light);
            font-style: italic;
            font-weight: 700;
        }
.sn-orig .hero-text p{
            font-size: 18px;
            color: rgba(255, 255, 255, 0.92);
            line-height: 1.7;
            margin-bottom: 40px;
            max-width: 520px;
            font-weight: 400;
            text-shadow: 0 1px 12px rgba(7, 46, 67, 0.6);
        }
.sn-orig .hero-buttons{
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }
.sn-orig .btn{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 14px 32px;
            font-size: 14px;
            font-weight: 600;
            font-family: var(--font);
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.25s ease;
            text-decoration: none;
        }
.sn-orig .btn::after{
            content: '→';
            font-size: 16px;
            line-height: 1;
            transform: translateX(-2px);
            opacity: 0.85;
            transition: transform 0.25s ease, opacity 0.25s ease;
        }
.sn-orig .btn:hover::after{
            transform: translateX(4px);
            opacity: 1;
        }
.sn-orig .btn-lime{
            background: var(--lime);
            color: var(--navy-dark);
        }
.sn-orig .btn-lime:hover{
            background: var(--lime-light);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(182, 193, 43, 0.4);
        }
.sn-orig .btn-outline{
            background: transparent;
            color: var(--white);
            border: 2px solid rgba(255, 255, 255, 0.4);
        }
.sn-orig .btn-outline:hover{
            border-color: var(--white);
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
        }
.sn-orig .btn-navy{
            background: var(--navy);
            color: var(--white);
        }
.sn-orig .btn-navy:hover{
            background: var(--navy-dark);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(11, 64, 93, 0.3);
        }
.sn-orig .hero-visual{
            display: flex;
            justify-content: center;
            align-items: flex-end;
            position: relative;
        }
.sn-orig .hero-packaging{
            max-height: 520px;
            width: auto;
            filter: drop-shadow(0 32px 64px rgba(0, 0, 0, 0.4));
            transform: perspective(800px) rotateY(-4deg);
            transition: transform 0.5s ease;
        }
.sn-orig .hero-packaging:hover{
            transform: perspective(800px) rotateY(0deg) translateY(-8px);
        }
.sn-orig .hero-trust{
            display: flex;
            align-items: center;
            gap: 24px;
            margin-top: 32px;
            padding-top: 32px;
            border-top: 1px solid rgba(255, 255, 255, 0.15);
        }
.sn-orig .hero-trust-item{
            display: flex;
            align-items: center;
            gap: 10px;
        }
.sn-orig .hero-trust-icon{
            width: 40px;
            height: 40px;
            background: rgba(182, 193, 43, 0.15);
            border: 1px solid rgba(182, 193, 43, 0.25);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
.sn-orig .hero-trust-icon svg{
            width: 18px;
            height: 18px;
            stroke: var(--lime);
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
.sn-orig .hero-trust-text{
            font-size: 13px;
            font-weight: 600;
            color: var(--white);
            line-height: 1.3;
            text-shadow: 0 1px 10px rgba(7, 46, 67, 0.7);
        }
.sn-orig .hero-trust-text span{
            display: block;
            font-size: 11px;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.75);
            text-shadow: 0 1px 8px rgba(7, 46, 67, 0.7);
        }
.sn-orig /* ═══════════════════════════════════════
           STATS BAR
           ═══════════════════════════════════════ */
        .stats-bar{
            background:
                radial-gradient(ellipse 80% 140% at 50% 0%, rgba(14, 82, 120, 0.6) 0%, transparent 60%),
                var(--navy);
            padding: 48px;
        }
.sn-orig .stats-grid{
            max-width: 1280px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 48px;
            text-align: center;
        }
.sn-orig .stat h3{
            font-family: var(--font-display);
            font-size: 44px;
            font-weight: 800;
            color: var(--lime);
            letter-spacing: -1px;
            margin-bottom: 4px;
        }
.sn-orig .stat p{
            font-size: 14px;
            color: rgba(255, 255, 255, 0.85);
            font-weight: 500;
        }
.sn-orig /* ═══════════════════════════════════════
           SECTIONS
           ═══════════════════════════════════════ */
        .section{
            padding: 72px 48px;
            max-width: 1280px;
            margin: 0 auto;
        }
.sn-orig .section-wide{
            padding: 72px 48px;
            max-width: 100%;
        }
.sn-orig .section-header{
            margin-bottom: 64px;
        }
.sn-orig .section-label{
            display: inline-block;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--lime-dark);
            background: rgba(182, 193, 43, 0.1);
            padding: 6px 16px;
            border-radius: 20px;
            margin-bottom: 20px;
        }
.sn-orig .section-header h2{
            font-family: var(--font-display);
            font-size: clamp(32px, 4.5vw, 50px);
            font-weight: 700;
            color: var(--navy);
            letter-spacing: -1px;
            line-height: 1.1;
            margin-bottom: 16px;
        }
.sn-orig .section-header p{
            font-size: 18px;
            color: var(--gray-600);
            max-width: 600px;
            line-height: 1.7;
        }
.sn-orig /* ═══════════════════════════════════════
           ABOUT — Split Section
           ═══════════════════════════════════════ */
        .about-grid{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }
.sn-orig .about-image{
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            aspect-ratio: 4/3;
        }
.sn-orig .about-image img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
.sn-orig .about-image-badge{
            position: absolute;
            bottom: 24px;
            left: 24px;
            background: var(--navy);
            color: var(--white);
            padding: 16px 24px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
.sn-orig .about-image-badge .dot{
            width: 8px;
            height: 8px;
            background: var(--lime);
            border-radius: 50%;
        }
.sn-orig .about-text h3{
            font-size: 16px;
            font-weight: 600;
            color: var(--navy);
            margin-bottom: 8px;
            margin-top: 32px;
        }
.sn-orig .about-text h3:first-of-type{
            margin-top: 0;
        }
.sn-orig .about-text p{
            font-size: 15px;
            color: var(--gray-600);
            line-height: 1.7;
        }
.sn-orig .partners-row{
            display: flex;
            gap: 32px;
            margin-top: 40px;
            flex-wrap: wrap;
        }
.sn-orig .partner{
            flex: 1;
            min-width: 160px;
            padding: 20px;
            background: var(--gray-50);
            border-radius: 12px;
            border: 1px solid var(--gray-200);
            text-align: center;
            transition: all 0.2s;
        }
.sn-orig .partner:hover{
            border-color: var(--lime);
            box-shadow: 0 4px 16px rgba(182, 193, 43, 0.15);
            transform: translateY(-2px);
            cursor: default;
        }
.sn-orig /* Altura base común. Los logotipos de dos líneas necesitan más
           altura para pesar ópticamente lo mismo que los de una. */
        .partner-logo{
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 18px;
        }
.sn-orig /* Extremadura Avante se iguala al ANCHO de Dunas (148 px), .sn-orig no a la
           altura: al ser de dos líneas, .sn-orig igualar altura lo dejaba pequeño. */
        .partner-logo.ancho-dunas{
            height: auto;
            min-height: 34px;
        }
.sn-orig .partner-logo.ancho-dunas img{
            width: 148px;
            height: auto;
            max-height: none;
        }
.sn-orig .partner-logo img{
            max-height: 100%;
            max-width: 100%;
            width: auto;
            object-fit: contain;
        }
.sn-orig .partner h4{
            font-size: 14px;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: 4px;
        }
.sn-orig .partner p{
            font-size: 12px;
            color: var(--gray-500);
        }
.sn-orig /* ═══════════════════════════════════════
           FULL-WIDTH IMAGE BREAK
           ═══════════════════════════════════════ */
        .image-break{
            position: relative;
            height: 480px;
            overflow: hidden;
        }
.sn-orig .image-break img{
            position: absolute;
            top: -60px;
            left: 0;
            width: 100%;
            height: calc(100% + 120px);
            object-fit: cover;
            will-change: transform;
        }
.sn-orig .image-break-overlay{
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            padding: 0 80px;
        }
.sn-orig .image-break-text{
            max-width: 540px;
            background: rgba(11, 64, 93, 0.32);
            backdrop-filter: blur(14px) saturate(1.2);
            -webkit-backdrop-filter: blur(14px) saturate(1.2);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 24px;
            padding: 40px 44px;
            box-shadow: 0 16px 48px rgba(7, 46, 67, 0.25);
        }
.sn-orig .image-break-text h2{
            font-family: var(--font-display);
            font-size: 36px;
            font-weight: 700;
            font-style: italic;
            color: var(--white);
            line-height: 1.2;
            margin-bottom: 14px;
            letter-spacing: -0.5px;
        }
.sn-orig .image-break-text p{
            font-size: 16px;
            color: rgba(255, 255, 255, 0.95);
            line-height: 1.7;
        }
.sn-orig /* ═══════════════════════════════════════
           PRODUCTS
           ═══════════════════════════════════════ */
        .products-grid{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 32px;
        }
.sn-orig .product-card{
            background: var(--white);
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid var(--gray-200);
            transition: all 0.3s ease;
        }
.sn-orig .product-card:hover{
            border-color: var(--lime);
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
            transform: translateY(-4px);
            cursor: default;
        }
.sn-orig .product-card-image{
            position: relative;
            height: 560px;
            overflow: hidden;
            background: linear-gradient(145deg, #f5f5f0 0%, #eceee6 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
        }
.sn-orig .product-card-image img{
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            transition: transform 0.5s ease;
            filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.12));
        }
.sn-orig .product-card:hover .product-card-image img{
            transform: scale(1.05);
        }
.sn-orig .product-tag{
            position: absolute;
            top: 20px;
            left: 20px;
            background: var(--navy);
            color: var(--white);
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }
.sn-orig .product-tag.premium{
            background: var(--lime);
            color: var(--navy-dark);
        }
.sn-orig .product-card-body{
            padding: 32px;
        }
.sn-orig .product-card-body h3{
            font-family: var(--font-display);
            font-size: 24px;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: 8px;
        }
.sn-orig .product-card-body .subtitle{
            font-size: 14px;
            color: var(--gray-500);
            font-weight: 600;
            margin-bottom: 16px;
        }
.sn-orig .product-card-body p{
            font-size: 15px;
            color: var(--gray-700);
            line-height: 1.7;
            margin-bottom: 24px;
        }
.sn-orig .specs-row{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 24px;
        }
.sn-orig .spec{
            text-align: center;
            padding: 14px 8px;
            background: var(--gray-50);
            border-radius: 10px;
        }
.sn-orig .spec .value{
            font-size: 18px;
            font-weight: 700;
            color: var(--navy);
            display: block;
        }
.sn-orig .spec .label{
            font-size: 11px;
            color: var(--gray-500);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 600;
            margin-top: 2px;
            display: block;
        }
.sn-orig /* ═══════════════════════════════════════
           CERTIFICATIONS
           ═══════════════════════════════════════ */
        .certs-row{
            display: flex;
            gap: 24px;
            flex-wrap: wrap;
            margin-top: 32px;
            justify-content: center;
        }
.sn-orig .cert{
            flex: 1;
            min-width: 200px;
            max-width: 320px;
            padding: 24px;
            background: var(--white);
            border: 2px solid var(--gray-200);
            border-radius: 16px;
            text-align: center;
            transition: all 0.3s;
        }
.sn-orig .cert:hover{
            border-color: var(--navy);
            box-shadow: 0 8px 32px rgba(11, 64, 93, 0.1);
            transform: translateY(-4px);
            cursor: default;
        }
.sn-orig .cert-icon{
            width: 56px;
            height: 56px;
            background: var(--navy);
            border-radius: 14px;
            margin: 0 auto 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
.sn-orig .cert-icon svg{
            width: 28px;
            height: 28px;
            fill: none;
            stroke: var(--lime);
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
.sn-orig .cert h4{
            font-size: 18px;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: 4px;
        }
.sn-orig .cert p{
            font-size: 13px;
            color: var(--gray-500);
        }
.sn-orig /* ═══════════════════════════════════════
           MARKETS
           ═══════════════════════════════════════ */
        .markets-grid{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }
.sn-orig .market-card{
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            height: 420px;
            cursor: default;
        }
.sn-orig .market-card img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
.sn-orig .market-card:hover img{
            transform: scale(1.08);
        }
.sn-orig .market-card-overlay{
            position: absolute;
            inset: 0;
            background: linear-gradient(
                to top,
                rgba(7, 46, 67, 0.55) 0%,
                rgba(7, 46, 67, 0.12) 28%,
                transparent 50%
            );
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 32px;
        }
.sn-orig .market-card-overlay h3{
            font-family: var(--font-display);
            font-size: 22px;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 8px;
            text-shadow: 0 2px 16px rgba(7, 46, 67, 0.85);
        }
.sn-orig .market-card-overlay p{
            font-size: 14px;
            color: rgba(255, 255, 255, 0.95);
            line-height: 1.6;
            text-shadow: 0 1px 12px rgba(7, 46, 67, 0.9);
        }
.sn-orig .market-tag{
            display: inline-block;
            padding: 4px 12px;
            background: var(--lime);
            color: var(--navy-dark);
            border-radius: 16px;
            font-size: 11px;
            font-weight: 700;
            margin-bottom: 12px;
            width: fit-content;
        }
.sn-orig /* ═══════════════════════════════════════
           SUSTAINABILITY
           ═══════════════════════════════════════ */
        .sustain-section{
            background: var(--off-white);
        }
.sn-orig .ods-grid{
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
        }
.sn-orig .ods-card{
            padding: 28px 20px;
            background: var(--white);
            border-radius: 16px;
            text-align: center;
            border: 1px solid var(--gray-200);
            transition: all 0.3s;
        }
.sn-orig .ods-card:hover{
            border-color: var(--lime);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
            transform: translateY(-4px);
            cursor: default;
        }
.sn-orig .ods-number{
            width: 56px;
            height: 56px;
            background: var(--navy);
            color: var(--lime);
            border-radius: 14px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: 1;
            margin: 0 auto 14px;
        }
.sn-orig .ods-number .ods-label{
            font-size: 8px;
            font-weight: 700;
            letter-spacing: 1.5px;
            color: rgba(255, 255, 255, 0.6);
            margin-bottom: 2px;
        }
.sn-orig .ods-number .ods-num{
            font-family: var(--font-display);
            font-weight: 800;
            font-size: 20px;
        }
.sn-orig .ods-card h4{
            font-size: 13px;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: 6px;
        }
.sn-orig .ods-card p{
            font-size: 12px;
            color: var(--gray-500);
            line-height: 1.5;
        }
.sn-orig .impact-grid{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            margin-top: 64px;
        }
.sn-orig .impact-card{
            padding: 32px;
            background: var(--navy);
            border-radius: 16px;
            text-align: center;
        }
.sn-orig .impact-card h3{
            font-family: var(--font-display);
            font-size: 36px;
            font-weight: 800;
            color: var(--lime);
            letter-spacing: -0.5px;
            margin-bottom: 4px;
        }
.sn-orig .impact-card p{
            font-size: 13px;
            color: rgba(255, 255, 255, 0.85);
            font-weight: 500;
        }
.sn-orig /* ═══════════════════════════════════════
           CONTACT
           ═══════════════════════════════════════ */
        .contact-section{
            background: var(--gray-50);
        }
.sn-orig .contact-grid{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            max-width: 1280px;
            margin: 0 auto;
        }
.sn-orig .contact-info h3{
            font-size: 20px;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: 16px;
            margin-top: 32px;
        }
.sn-orig .contact-info h3:first-of-type{
            margin-top: 0;
        }
.sn-orig .contact-info p{
            font-size: 15px;
            color: var(--gray-600);
            line-height: 1.7;
        }
.sn-orig .contact-info a{
            color: var(--navy);
            font-weight: 600;
            text-decoration: none;
            border-bottom: 2px solid var(--lime);
            transition: all 0.2s;
        }
.sn-orig .contact-info a:hover{
            color: var(--lime-dark);
        }
.sn-orig .contact-detail{
            display: flex;
            align-items: flex-start;
            gap: 14px;
            margin-bottom: 20px;
        }
.sn-orig .contact-detail-icon{
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            background: var(--navy);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
.sn-orig .contact-detail-icon svg{
            width: 18px;
            height: 18px;
            stroke: var(--lime);
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
.sn-orig .contact-form{
            background: var(--white);
            padding: 40px;
            border-radius: 20px;
            border: 1px solid var(--gray-200);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }
.sn-orig .form-row{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
.sn-orig .form-group{
            margin-bottom: 20px;
        }
.sn-orig .form-group.full{
            grid-column: 1 / -1;
        }
.sn-orig .form-group label{
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: var(--gray-700);
            margin-bottom: 6px;
        }
.sn-orig .form-group input, .sn-orig .form-group select, .sn-orig .form-group textarea{
            width: 100%;
            padding: 12px 16px;
            border: 1px solid var(--gray-200);
            border-radius: 10px;
            font-family: var(--font);
            font-size: 14px;
            color: var(--gray-800);
            background: var(--white);
            transition: all 0.2s;
            -webkit-appearance: none;
        }
.sn-orig .form-group select{
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%239CA3AF' stroke-width='1.5'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center;
            padding-right: 36px;
        }
.sn-orig .form-group input:focus, .sn-orig .form-group select:focus, .sn-orig .form-group textarea:focus{
            outline: none;
            border-color: var(--navy);
            box-shadow: 0 0 0 3px rgba(11, 64, 93, 0.1);
        }
.sn-orig .form-group input::placeholder, .sn-orig .form-group textarea::placeholder{
            color: var(--gray-300);
        }
.sn-orig .form-group textarea{
            resize: vertical;
            min-height: 100px;
        }
.sn-orig .form-check{
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 24px;
        }
.sn-orig .form-check input[type="checkbox"]{
            width: 18px;
            height: 18px;
            accent-color: var(--navy);
            cursor: pointer;
            margin-top: 2px;
            flex-shrink: 0;
        }
.sn-orig .form-check label{
            font-size: 13px;
            color: var(--gray-500);
            cursor: pointer;
            line-height: 1.5;
        }
.sn-orig .btn-submit{
            width: 100%;
            padding: 16px;
            font-size: 15px;
        }
.sn-orig /* ═══════════════════════════════════════
           FOOTER
           ═══════════════════════════════════════ */
        footer{
            background:
                radial-gradient(ellipse 60% 120% at 15% 0%, rgba(14, 82, 120, 0.35) 0%, transparent 55%),
                var(--navy-dark);
            padding: 80px 48px 40px;
        }
.sn-orig .footer-grid{
            max-width: 1280px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 60px;
            margin-bottom: 60px;
        }
.sn-orig .footer-brand p{
            color: rgba(255, 255, 255, 0.5);
            font-size: 14px;
            line-height: 1.7;
            margin-top: 16px;
            max-width: 300px;
        }
.sn-orig .footer-brand .logo-footer{
            font-size: 24px;
            font-weight: 800;
            color: var(--white);
            display: flex;
            align-items: center;
            gap: 8px;
        }
.sn-orig .footer-brand .logo-footer .dot{
            width: 8px;
            height: 8px;
            background: var(--lime);
            border-radius: 50%;
            display: inline-block;
        }
.sn-orig .footer-col h4{
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--lime);
            margin-bottom: 20px;
        }
.sn-orig .footer-col a{
            display: block;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.6);
            text-decoration: none;
            margin-bottom: 12px;
            transition: color 0.2s;
        }
.sn-orig .footer-col a:hover{
            color: var(--white);
        }
.sn-orig .footer-bottom{
            max-width: 1280px;
            margin: 0 auto;
            padding-top: 32px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
.sn-orig .footer-bottom p{
            font-size: 13px;
            color: rgba(255, 255, 255, 0.35);
        }
.sn-orig .footer-bottom a{
            color: rgba(255, 255, 255, 0.35);
            text-decoration: none;
            transition: color 0.2s;
        }
.sn-orig .footer-bottom a:hover{
            color: var(--lime);
        }
.sn-orig /* ═══════════════════════════════════════
           FLOURISH DIVIDERS (editorial)
           ═══════════════════════════════════════ */
        .flourish{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            margin-bottom: 24px;
        }
.sn-orig .flourish-line{
            width: 60px;
            height: 1px;
            background: var(--gray-300);
        }
.sn-orig .flourish svg{
            width: 24px;
            height: 24px;
            stroke: var(--lime-dark);
            fill: none;
            stroke-width: 1.5;
            opacity: 0.6;
        }
.sn-orig .flourish-light .flourish-line{
            background: rgba(255, 255, 255, 0.2);
        }
.sn-orig .flourish-light svg{
            stroke: var(--lime);
            opacity: 0.5;
        }
.sn-orig /* ═══════════════════════════════════════
           WHY SERRANOVA
           ═══════════════════════════════════════ */
        .why-grid{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }
.sn-orig .why-card{
            padding: 36px 28px;
            background: var(--white);
            border: 1px solid var(--gray-200);
            border-radius: 16px;
            text-align: center;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }
.sn-orig .why-card::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--navy), var(--lime));
            opacity: 0;
            transition: opacity 0.3s;
        }
.sn-orig .why-card:hover{
            border-color: var(--navy);
            box-shadow: 0 12px 32px rgba(11, 64, 93, 0.08);
            transform: translateY(-4px);
            cursor: default;
        }
.sn-orig .why-card:hover::before{
            opacity: 1;
        }
.sn-orig .why-icon{
            width: 56px;
            height: 56px;
            background: linear-gradient(135deg, var(--navy), var(--navy-light));
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }
.sn-orig .why-icon svg{
            width: 26px;
            height: 26px;
            stroke: var(--lime);
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
.sn-orig .why-card h4{
            font-size: 16px;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: 8px;
        }
.sn-orig .why-card p{
            font-size: 13px;
            color: var(--gray-600);
            line-height: 1.6;
        }
.sn-orig /* ═══════════════════════════════════════
           PROCESS / JOURNEY
           ═══════════════════════════════════════ */
        .process-section{
            background:
                radial-gradient(ellipse 70% 100% at 50% 30%, rgba(14, 82, 120, 0.45) 0%, transparent 55%),
                var(--navy-dark);
        }
.sn-orig .process-steps{
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px;
            position: relative;
        }
.sn-orig .process-step{
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            height: 360px;
            cursor: default;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                        box-shadow 0.4s ease;
        }
.sn-orig .process-step:hover{
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
            z-index: 2;
        }
.sn-orig .process-step-img{
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
.sn-orig .process-step:hover .process-step-img{
            transform: scale(1.08);
        }
.sn-orig .process-step::after{
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(
                to top,
                rgba(7, 46, 67, 0.82) 0%,
                rgba(7, 46, 67, 0.4) 30%,
                rgba(7, 46, 67, 0.08) 55%,
                transparent 75%
            );
            z-index: 1;
        }
.sn-orig .process-step-content{
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 28px 24px;
            z-index: 2;
        }
.sn-orig .process-number{
            position: absolute;
            top: 20px;
            left: 20px;
            width: 40px;
            height: 40px;
            background: var(--lime);
            color: var(--navy-dark);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-display);
            font-weight: 800;
            font-size: 16px;
            z-index: 2;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
.sn-orig .process-step h4{
            font-family: var(--font-display);
            font-size: 18px;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 6px;
            text-shadow: 0 2px 14px rgba(7, 46, 67, 0.9);
        }
.sn-orig .process-step p{
            font-size: 13px;
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.5;
            text-shadow: 0 1px 10px rgba(7, 46, 67, 0.95);
        }
.sn-orig .process-connector{
            position: absolute;
            top: 40px;
            left: 0;
            right: 0;
            height: 2px;
            z-index: 0;
            display: flex;
            align-items: center;
        }
.sn-orig .process-connector::before{
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(182, 193, 43, 0.3), transparent);
        }
.sn-orig /* ═══════════════════════════════════════
           LIFESTYLE
           ═══════════════════════════════════════ */
        .lifestyle-grid{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0;
            border-radius: 20px;
            overflow: hidden;
            min-height: 500px;
        }
.sn-orig .lifestyle-image{
            position: relative;
            overflow: hidden;
        }
.sn-orig .lifestyle-image img{
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 100% center;
        }
.sn-orig .lifestyle-content{
            background: var(--navy);
            padding: 64px 56px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
.sn-orig .lifestyle-content h2{
            font-family: var(--font-display);
            font-size: 36px;
            font-weight: 700;
            color: var(--white);
            line-height: 1.15;
            margin-bottom: 20px;
            letter-spacing: -0.5px;
        }
.sn-orig .lifestyle-content p{
            font-size: 16px;
            color: rgba(255, 255, 255, 0.75);
            line-height: 1.7;
            margin-bottom: 32px;
        }
.sn-orig .lifestyle-features{
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
.sn-orig .lifestyle-feature{
            display: flex;
            align-items: center;
            gap: 14px;
        }
.sn-orig .lifestyle-check{
            width: 28px;
            height: 28px;
            background: rgba(182, 193, 43, 0.15);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
.sn-orig .lifestyle-check svg{
            width: 14px;
            height: 14px;
            stroke: var(--lime);
            fill: none;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
.sn-orig .lifestyle-feature span{
            font-size: 14px;
            color: rgba(255, 255, 255, 0.85);
            font-weight: 500;
        }
.sn-orig /* ═══════════════════════════════════════
           FAQ
           ═══════════════════════════════════════ */
        .faq-list{
            max-width: 800px;
            margin: 0 auto;
        }
.sn-orig .faq-item{
            border-bottom: 1px solid var(--gray-200);
        }
.sn-orig .faq-question{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 24px 0;
            background: none;
            border: none;
            font-family: var(--font-display);
            font-size: 17px;
            font-weight: 600;
            color: var(--navy);
            cursor: pointer;
            text-align: left;
            gap: 16px;
            transition: color 0.2s;
        }
.sn-orig .faq-question:hover{
            color: var(--lime-dark);
        }
.sn-orig .faq-chevron{
            width: 20px;
            height: 20px;
            stroke: var(--gray-400);
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: transform 0.3s;
            flex-shrink: 0;
        }
.sn-orig .faq-item.active .faq-chevron{
            transform: rotate(180deg);
            stroke: var(--lime-dark);
        }
.sn-orig .faq-answer{
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease;
        }
.sn-orig .faq-answer-inner{
            padding: 0 0 24px;
            font-size: 15px;
            color: var(--gray-600);
            line-height: 1.7;
        }
.sn-orig .faq-item.active .faq-answer{
            max-height: 300px;
        }
.sn-orig /* ═══════════════════════════════════════
           CTA BANNER
           ═══════════════════════════════════════ */
        .cta-banner{
            background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
            padding: 80px 48px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
.sn-orig .cta-banner::before{
            content: '';
            position: absolute;
            top: -50%;
            right: -10%;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(182, 193, 43, 0.08) 0%, transparent 70%);
            border-radius: 50%;
        }
.sn-orig .cta-banner h2{
            font-family: var(--font-display);
            font-size: clamp(28px, 4vw, 42px);
            font-weight: 700;
            font-style: italic;
            color: var(--white);
            margin-bottom: 16px;
            letter-spacing: -0.5px;
            position: relative;
        }
.sn-orig .cta-banner p{
            font-size: 17px;
            color: rgba(255, 255, 255, 0.7);
            max-width: 550px;
            margin: 0 auto 36px;
            line-height: 1.7;
            position: relative;
        }
.sn-orig .cta-banner .btn{
            position: relative;
        }
@keyframes kenBurns {
0%{ transform: scale(1); }
100%{ transform: scale(1.08); }
}
.sn-orig .hero-bg img{
            animation: kenBurns 20s ease-in-out alternate infinite;
        }
.sn-orig /* Scroll reveal */
        .reveal{
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
.sn-orig .reveal.visible{
            opacity: 1;
            transform: translateY(0);
        }
.sn-orig .reveal-left{
            opacity: 0;
            transform: translateX(-40px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
.sn-orig .reveal-left.visible{
            opacity: 1;
            transform: translateX(0);
        }
.sn-orig .reveal-right{
            opacity: 0;
            transform: translateX(40px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
.sn-orig .reveal-right.visible{
            opacity: 1;
            transform: translateX(0);
        }
.sn-orig /* Stagger children */
        .stagger > *{
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }
.sn-orig .stagger.visible > *:nth-child(1){ transition-delay: 0s; }
.sn-orig .stagger.visible > *:nth-child(2){ transition-delay: 0.1s; }
.sn-orig .stagger.visible > *:nth-child(3){ transition-delay: 0.2s; }
.sn-orig .stagger.visible > *:nth-child(4){ transition-delay: 0.3s; }
.sn-orig .stagger.visible > *:nth-child(5){ transition-delay: 0.4s; }
.sn-orig .stagger.visible > *:nth-child(6){ transition-delay: 0.5s; }
.sn-orig .stagger.visible > *{
            opacity: 1;
            transform: translateY(0);
        }
.sn-orig /* Scroll indicator */
        .scroll-indicator{
            position: absolute;
            bottom: 32px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            animation: scrollBounce 2s ease-in-out infinite;
        }
.sn-orig .scroll-indicator span{
            font-size: 11px;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 500;
        }
.sn-orig .scroll-indicator svg{
            width: 20px;
            height: 20px;
            stroke: rgba(255, 255, 255, 0.5);
            fill: none;
            stroke-width: 2;
        }
@keyframes scrollBounce {
.sn-orig 0%, .sn-orig 100%{ transform: translateX(-50%) translateY(0); }
50%{ transform: translateX(-50%) translateY(8px); }
}
.sn-orig /* Back to top */
        .back-to-top{
            position: fixed;
            bottom: 32px;
            right: 32px;
            width: 48px;
            height: 48px;
            background: var(--navy);
            color: var(--white);
            border: none;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 999;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.3s ease;
            box-shadow: 0 8px 24px rgba(11, 64, 93, 0.3);
            pointer-events: none;
        }
.sn-orig .back-to-top.show{
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
.sn-orig .back-to-top:hover{
            background: var(--lime);
            transform: translateY(-2px);
            box-shadow: 0 12px 32px rgba(182, 193, 43, 0.3);
        }
.sn-orig .back-to-top svg{
            width: 20px;
            height: 20px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
.sn-orig .back-to-top:hover svg{
            stroke: var(--navy-dark);
        }
.sn-orig /* Parallax image breaks — sizing handled in base .image-break img */

        /* Compact nav on scroll */
        .nav.scrolled{
            height: 60px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }
.sn-orig .nav.scrolled .nav-logo img{
            height: 40px;
        }
.sn-orig /* Subtle grain texture on dark sections */
        .stats-bar, .sn-orig .process-section, .sn-orig .cta-banner{
            position: relative;
        }
.sn-orig .stats-bar::after, .sn-orig .process-section::after, .sn-orig .cta-banner::after{
            content: '';
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
            pointer-events: none;
            z-index: 0;
        }
.sn-orig .stats-bar > *, .sn-orig .process-section > *, .sn-orig .cta-banner > *{
            position: relative;
            z-index: 1;
        }
.sn-orig /* Smooth line on active nav link */
        .nav-links a.active::after{
            width: 100%;
        }
.sn-orig .nav-links a.active{
            color: var(--navy);
        }
.sn-orig /* Contact form reveal */
        .contact-form{
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
.sn-orig .contact-form.visible{
            opacity: 1;
            transform: translateY(0);
        }
.sn-orig /* Product card subtle shine on hover */
        .product-card::after{
            content: '';
            position: absolute;
            top: 0;
            left: -75%;
            width: 50%;
            height: 100%;
            background: linear-gradient(
                to right,
                transparent,
                rgba(255, 255, 255, 0.03),
                transparent
            );
            transform: skewX(-25deg);
            transition: left 0.6s ease;
        }
.sn-orig .product-card{
            position: relative;
            overflow: hidden;
        }
.sn-orig .product-card:hover::after{
            left: 125%;
        }
.sn-orig /* Glow effect on impact cards */
        .impact-card{
            transition: all 0.3s ease;
        }
.sn-orig .impact-card:hover{
            transform: translateY(-4px);
            box-shadow: 0 0 40px rgba(182, 193, 43, 0.15);
            cursor: default;
        }
.sn-orig /* ═══════════════════════════════════════
           RETAILERS TRUST BAND
           ═══════════════════════════════════════ */
        .retailers{
            text-align: center;
            margin: 0 auto 48px;
            max-width: 760px;
        }
.sn-orig .retailers-title{
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--gray-500);
            margin-bottom: 18px;
        }
.sn-orig .retailers-names{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: clamp(20px, 4vw, 48px);
        }
.sn-orig .retailers-names span:not(.dot){
            font-family: var(--font-display);
            font-size: clamp(20px, 2.4vw, 28px);
            font-weight: 700;
            color: #6B7280;
            letter-spacing: -.015em;
            opacity: .85;
        }
.sn-orig .retailers-names .dot{
            color: #B6C12B;
            font-size: 18px;
            font-weight: 700;
            opacity: .5;
        }
@media (max-width: 1024px) {
.sn-orig .hero-content{
                grid-template-columns: 1fr;
                gap: 40px;
            }
.sn-orig .hero-visual{
                justify-content: center;
            }
.sn-orig .hero-packaging{
                max-height: 400px;
            }
.sn-orig .hero-trust{
                gap: 16px;
            }
.sn-orig .about-grid{
                grid-template-columns: 1fr;
                gap: 40px;
            }
.sn-orig .why-grid{
                grid-template-columns: repeat(2, 1fr);
            }
.sn-orig .process-steps{
                grid-template-columns: repeat(3, 1fr);
                gap: 16px;
            }
.sn-orig .process-step{
                height: 300px;
            }
.sn-orig .lifestyle-grid{
                grid-template-columns: 1fr;
            }
.sn-orig .products-grid{
                grid-template-columns: 1fr;
            }
.sn-orig .markets-grid{
                grid-template-columns: 1fr 1fr;
            }
.sn-orig .ods-grid{
                grid-template-columns: repeat(3, 1fr);
            }
.sn-orig .impact-grid{
                grid-template-columns: repeat(2, 1fr);
            }
.sn-orig .contact-grid{
                grid-template-columns: 1fr;
                gap: 48px;
            }
.sn-orig .footer-grid{
                grid-template-columns: 1fr 1fr;
                gap: 40px;
            }
}
@media (max-width: 768px) {
.sn-orig .nav{
                padding: 0 20px;
                height: 64px;
            }
.sn-orig .nav-links{
                display: none;
            }
.sn-orig .mobile-toggle{
                display: flex;
            }
.sn-orig /* Mobile: sin pin — hero a pantalla completa normal */
            .hero{
                height: 100vh;
            }
.sn-orig .hero-sticky{
                position: relative;
                height: 100vh;
            }
.sn-orig .hero-content{
                padding: 100px 20px 60px;
            }
.sn-orig .hero-text h1{
                font-size: 36px;
                letter-spacing: -1px;
            }
.sn-orig .hero-text p{
                font-size: 16px;
            }
.sn-orig .hero-buttons{
                flex-direction: column;
            }
.sn-orig .hero-visual{
                display: none;
            }
.sn-orig .hero-trust{
                flex-direction: column;
                gap: 16px;
                align-items: flex-start;
            }
.sn-orig .hero-packaging{
                max-height: 280px;
            }
.sn-orig .btn{
                width: 100%;
                justify-content: center;
            }
.sn-orig .stats-grid{
                grid-template-columns: repeat(2, 1fr);
                gap: 32px;
            }
.sn-orig .stat h3{
                font-size: 32px;
            }
.sn-orig .why-grid{
                grid-template-columns: 1fr 1fr;
                gap: 16px;
            }
.sn-orig .process-steps{
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }
.sn-orig .process-step{
                height: 260px;
            }
.sn-orig .process-step:last-child{
                grid-column: 1 / -1;
                height: 220px;
            }
.sn-orig .lifestyle-grid{
                min-height: auto;
            }
.sn-orig .lifestyle-content{
                padding: 40px 24px;
            }
.sn-orig .lifestyle-content h2{
                font-size: 28px;
            }
.sn-orig .stat h3{
                font-size: 34px;
            }
.sn-orig .impact-card h3{
                font-size: 30px;
            }
.sn-orig .cta-banner{
                padding: 56px 20px;
            }
.sn-orig .section, .sn-orig .section-wide{
                padding: 64px 20px;
            }
.sn-orig .section-header h2{
                font-size: 28px;
            }
.sn-orig .markets-grid{
                grid-template-columns: 1fr;
            }
.sn-orig .market-card{
                height: 300px;
            }
.sn-orig .ods-grid{
                grid-template-columns: repeat(2, 1fr);
            }
.sn-orig .impact-grid{
                grid-template-columns: 1fr 1fr;
                gap: 16px;
            }
.sn-orig .impact-card h3{
                font-size: 28px;
            }
.sn-orig .form-row{
                grid-template-columns: 1fr;
            }
.sn-orig .specs-row{
                grid-template-columns: repeat(2, 1fr);
            }
.sn-orig .image-break{
                height: 360px;
            }
.sn-orig .image-break-overlay{
                padding: 0 24px;
            }
.sn-orig .image-break-text h2{
                font-size: 26px;
            }
.sn-orig .certs-row{
                gap: 16px;
            }
.sn-orig .cert{
                min-width: 140px;
            }
.sn-orig footer{
                padding: 48px 20px 24px;
            }
.sn-orig .footer-grid{
                grid-template-columns: 1fr;
                gap: 32px;
            }
.sn-orig .footer-bottom{
                flex-direction: column;
                gap: 12px;
                text-align: center;
            }
.sn-orig .partners-row{
                gap: 16px;
            }
}
@media (max-width: 375px) {
.sn-orig .stats-grid{
                grid-template-columns: 1fr 1fr;
                gap: 20px;
            }
.sn-orig .ods-grid{
                grid-template-columns: 1fr 1fr;
            }
.sn-orig .specs-row{
                grid-template-columns: 1fr 1fr;
            }
}
@media (prefers-reduced-motion: reduce) {
.sn-orig *{
                animation-duration: 0.01ms !important;
                transition-duration: 0.01ms !important;
            }
}
/* ─── Ajustes del traspaso a YOOtheme ───
   El tema impone mayúsculas y márgenes a los títulos; dentro del ámbito original, no. */
.sn-orig h1,.sn-orig h2,.sn-orig h3,.sn-orig h4,.sn-orig h5,.sn-orig h6,
.sn-orig .uk-h1,.sn-orig .uk-h2,.sn-orig .uk-h3,.sn-orig .uk-h4{text-transform:none;letter-spacing:normal}
.sn-orig .uk-grid{margin-left:0}
.sn-orig .uk-grid>*{padding-left:0}
/* el adorno bajo la etiqueta de sección, sin bloque de HTML */
.sn-orig .sn-flourish{border:0;display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 18px}
.sn-orig .sn-flourish::before,.sn-orig .sn-flourish::after{content:'';display:block;width:54px;height:1px;
  background:linear-gradient(to right,transparent,var(--lime,#B6C12B),transparent)}
.sn-orig .sn-flourish::after{background:linear-gradient(to left,transparent,var(--lime,#B6C12B),transparent)}


/* ─── Robustez: las animaciones de entrada son un extra, no un requisito ───
   Sin la marca `sn-anim` (que pone el propio script al arrancar) nada queda oculto.
   Si el JS falla o tarda, el contenido se ve igual: nunca una página en blanco. */
.sn-orig .stagger > *,
.sn-orig .reveal, .sn-orig .reveal-left, .sn-orig .reveal-right{opacity:1;transform:none}
html.sn-anim .sn-orig .stagger > *{opacity:0;transform:translateY(30px)}
html.sn-anim .sn-orig .reveal{opacity:0;transform:translateY(40px)}
html.sn-anim .sn-orig .reveal-left{opacity:0;transform:translateX(-40px)}
html.sn-anim .sn-orig .reveal-right{opacity:0;transform:translateX(40px)}
html.sn-anim .sn-orig .stagger.visible > *,
html.sn-anim .sn-orig .reveal.visible,
html.sn-anim .sn-orig .reveal-left.visible,
html.sn-anim .sn-orig .reveal-right.visible{opacity:1;transform:none}
/* y si alguien prefiere no ver movimiento */
@media (prefers-reduced-motion: reduce){
  html.sn-anim .sn-orig .stagger > *,
  html.sn-anim .sn-orig .reveal,
  html.sn-anim .sn-orig .reveal-left,
  html.sn-anim .sn-orig .reveal-right{opacity:1;transform:none;transition:none}
}

/* El contenedor de texto de estas tarjetas es un `row` del builder; se neutraliza su
   rejilla para que el posicionamiento absoluto del diseño original funcione igual. */
.sn-orig .process-step-content,.sn-orig .market-card-overlay{display:block}
.sn-orig .process-step-content>*,.sn-orig .market-card-overlay>*{margin:0;padding:0;width:100%}
.sn-orig .process-step .uk-grid,.sn-orig .market-card .uk-grid{margin:0;display:block}

/* ─── Tipografía base ───
   Al acotar el CSS se descartaron las reglas de `body` (habrían pisado al tema);
   con ellas se fue la fuente del diseño. Se reponen dentro del ámbito. */
.sn-orig{font-family: var(--font); color: var(--gray-800); line-height: 1.6; background: var(--white); -webkit-font-smoothing: antialiased;}
.sn-orig p,.sn-orig li,.sn-orig .uk-text,.sn-orig input,.sn-orig select,.sn-orig textarea{
  font-family:'Assistant',-apple-system,'Segoe UI',Helvetica,sans-serif}
/* los botones del builder toman el aspecto de los del diseño */
.sn-orig .uk-button{font-family:'Plus Jakarta Sans',sans-serif;text-transform:none;letter-spacing:0}
.sn-orig .product-card .uk-button,.sn-orig .contact-form .uk-button,.sn-orig .uk-button-primary{
  background:var(--navy,#0B405D);border-color:var(--navy,#0B405D);color:#fff;border-radius:10px;font-weight:700}
.sn-orig .uk-button-primary:hover{background:var(--navy-dark,#072E43);border-color:var(--navy-dark,#072E43)}

/* Titulares: la declaración global del original se descartó al acotar y el tema colaba su serif.
   Va con la especificidad del ámbito para ganar sin recurrir a !important. */
.sn-orig h1,.sn-orig h2,.sn-orig h3,.sn-orig h4,.sn-orig h5,.sn-orig h6,
.sn-orig .uk-h1,.sn-orig .uk-h2,.sn-orig .uk-h3,.sn-orig .uk-h4{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.15}
/* y sobre fondo oscuro, en blanco: si no, quedan navy sobre navy e invisibles */
.sn-orig .process-section h1,.sn-orig .process-section h2,.sn-orig .process-section h3,.sn-orig .process-section h4,
.sn-orig .market-card h3,.sn-orig .process-step h4{color:#fff}
.sn-orig .process-section p{color:rgba(255,255,255,.82)}

/* El texto de la tarjeta de mercados va abajo, dentro del degradado; si no, cae sobre
   la parte clara de la foto y no se lee. */
.sn-orig .market-card-overlay{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  padding:28px 24px}
.sn-orig .market-card-overlay h3{margin:8px 0 6px}
.sn-orig .market-card-overlay p{margin:0}

.sn-orig .market-tag,.sn-orig .process-number{align-self:flex-start;width:auto}

/* Secciones a sangre: el builder envuelve el contenido en un `uk-container` con ancho máximo
   y padding lateral. En el hero eso dejaba franjas a los lados. Aquí el bloque manda. */
.sn-orig .sn-sangre .uk-container{max-width:none;padding-left:0;padding-right:0;width:100%}
.sn-orig .sn-sangre .uk-grid{margin:0}
.sn-orig .sn-sangre .uk-grid>*{padding:0}
.sn-orig .sn-sangre .uk-section{padding:0}

/* Las secciones `section-wide` del original meten su contenido en un `.section` interior
   con ancho máximo. Aquí ese contenedor no existe, así que el ancho lo fija la rejilla. */
.sn-orig .sustain-section .impact-grid,
.sn-orig .sustain-section .ods-grid,
.sn-orig .sustain-section .why-grid{max-width:1280px;margin-left:auto;margin-right:auto}
/* y las columnas del builder no deben imponer ancho dentro de una rejilla del diseño */
.sn-orig .contact-grid>*,.sn-orig .lifestyle-grid>*,.sn-orig .impact-grid>*,
.sn-orig .ods-grid>*,.sn-orig .why-grid>*,.sn-orig .stats-grid>*{width:auto;max-width:none}

/* ─── Padding de sección ───
   `padding: none` en el builder aplica una utilidad de UIkit con !important, que anula el
   padding del diseño y deja el contenido pegado al borde. Es el único sitio donde hace falta
   competir con !important: contra otro !important. */
.sn-orig .uk-section.section,
.sn-orig .uk-section.section-wide{padding-top:72px!important;padding-bottom:72px!important}
.sn-orig .uk-section.section{max-width:1280px;margin-left:auto;margin-right:auto}
.sn-orig .uk-section.stats-bar{padding-top:56px!important;padding-bottom:56px!important}
/* las de bloque siguen a sangre y sin padding: lo trae su propio markup */
.sn-orig .uk-section.sn-sangre{padding-top:0!important;padding-bottom:0!important}

/* El pie lleva su propio <footer> dentro del bloque: fondo y padding son suyos. */
.sn-orig .sn-pie{background:transparent}

/* La sección de contacto es clara: titulares en navy, como el resto del cuerpo. */
.sn-orig .contact-section h1,.sn-orig .contact-section h2,
.sn-orig .contact-section h3,.sn-orig .contact-section h4{color:var(--navy,#0B405D)}
.sn-orig .contact-section p{color:#54646F}

/* `.sn-orig .uk-grid{margin-left:0}` pisaba el `margin:0 auto` del contact-grid
   y la sección se pegaba al borde izquierdo en pantallas anchas. Misma especificidad,
   declarado después: gana este. */
.sn-orig .contact-grid{margin-left:auto!important;margin-right:auto!important}

/* El formulario es WPForms (el del original no enviaba); se viste con el estilo del diseño. */
.sn-orig .contact-form .wpforms-form input[type=text],
.sn-orig .contact-form .wpforms-form input[type=email],
.sn-orig .contact-form .wpforms-form input[type=tel],
.sn-orig .contact-form .wpforms-form select,
.sn-orig .contact-form .wpforms-form textarea{border:1px solid var(--gray-200,#E5E7EB);border-radius:10px}
.sn-orig .contact-form .wpforms-form button[type=submit]{
  background:var(--navy,#0B405D)!important;border:0!important;color:#fff!important;
  border-radius:10px!important;font-weight:600!important;padding:12px 28px!important;
  font-family:'Plus Jakarta Sans',sans-serif!important}
.sn-orig .contact-form .wpforms-form button[type=submit]:hover{background:var(--navy-dark,#072E43)!important}

/* Formulario a la maqueta del original: form-row de dos columnas, botón full-width con flecha */
.sn-orig .contact-form .wpforms-form input,.sn-orig .contact-form .wpforms-form select,
.sn-orig .contact-form .wpforms-form textarea{width:100%}
.sn-orig .contact-form .wpforms-form button[type=submit]{width:100%!important}
.sn-orig .contact-form .wpforms-form button[type=submit]::after{content:' \2192';font-weight:400}
.sn-orig .contact-form .wpforms-field-label{font-weight:600;font-size:14px;color:#1F2937}
@media (max-width:640px){.sn-orig .contact-form .wpforms-field.wpforms-one-half{width:100%;margin-right:0}}

/* El contacto reproduce el contenedor del original: .section de 1280 centrado con padding 48.
   Sin esto, la cabecera se pega al borde del viewport en pantallas anchas. */
.sn-orig .contact-section .uk-container{max-width:1280px!important;margin-left:auto!important;
  margin-right:auto!important;padding-left:48px;padding-right:48px}

/* form-row de dos columnas, con grid de verdad (los floats de WPForms Lite no emparejan) */
.sn-orig .contact-form .wpforms-field-container{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px}
.sn-orig .contact-form .wpforms-field{grid-column:1/-1}
.sn-orig .contact-form .wpforms-field.wpforms-one-half{grid-column:auto/span 1}
.sn-orig .contact-form .wpforms-field input,
.sn-orig .contact-form .wpforms-field select,
.sn-orig .contact-form .wpforms-field textarea{width:100%!important;max-width:100%!important}
/* la casilla de privacidad, en línea y a la izquierda */
.sn-orig .contact-form .wpforms-field-checkbox ul{list-style:none;margin:0;padding:0}
.sn-orig .contact-form .wpforms-field-checkbox li{display:flex;gap:10px;align-items:flex-start;text-align:left}
.sn-orig .contact-form .wpforms-field-checkbox input[type=checkbox]{width:auto!important;margin-top:3px}
.sn-orig .contact-form .wpforms-field-checkbox label{text-align:left;font-weight:400;font-size:13px;color:#54646F}

/* el contenedor de campos encogía a su contenido: a ancho completo */
.sn-orig .contact-form .wpforms-container,.sn-orig .contact-form .wpforms-form,
.sn-orig .contact-form .wpforms-field-container{width:100%!important;max-width:none!important}
/* wpforms-one-half trae su propio 47% y float: dentro de una celda de grid sobran */
.sn-orig .contact-form .wpforms-field{min-width:0;width:100%!important;float:none!important;
  margin-left:0!important;margin-right:0!important}

/* La tarjeta del formulario, con su declaración original íntegra. El padding va con
   !important porque `.sn-orig .uk-grid>*{padding-left:0}` (necesario para otras rejillas)
   se lo comía y los campos quedaban pegados al borde de la tarjeta. */
.sn-orig .contact-grid > .contact-form{background: var(--white); padding: 40px !important; border-radius: 20px; border: 1px solid var(--gray-200); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);}

/* ─── Añadidos del dossier (31-ago) ─── */
.sn-orig .products-grid-4{grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1100px){.sn-orig .products-grid-4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.sn-orig .products-grid-4{grid-template-columns:1fr}}
.sn-orig .products-grid-4 .product-card-body{padding:20px 18px}
.sn-orig .products-grid-4 h3{font-size:19px}
.sn-orig .products-grid-4 .subtitle{font-size:13px}
.sn-orig .products-grid-4 .product-card-body p:last-child{font-size:12.5px;line-height:1.5}
/* páginas interiores */
.sn-orig .section-header h1{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:clamp(34px,4vw,46px);letter-spacing:-.02em;color:var(--navy,#0B405D);margin:14px 0 12px}
.sn-orig .spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1280px;margin:0 auto}
@media (max-width:1000px){.sn-orig .spec-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sn-orig .spec-grid{grid-template-columns:1fr}}
.sn-orig .spec-card{background:var(--navy,#0B405D);border-radius:16px;padding:30px 22px;text-align:center}
.sn-orig .spec-card h3{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:34px;
  color:var(--lime,#B6C12B);margin:0 0 6px}
.sn-orig .spec-card p{color:rgba(255,255,255,.85);font-size:13.5px;margin:0}
.sn-orig .icono-suelto{width:44px;height:44px;object-fit:contain;margin-bottom:14px}
.sn-orig .timeline-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1280px;margin:0 auto}
@media (max-width:900px){.sn-orig .timeline-grid{grid-template-columns:1fr 1fr}}
.sn-orig .hito{background:#fff;border:1px solid var(--gray-200,#E5E7EB);border-radius:14px;padding:20px}
.sn-orig .hito .anno{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;color:var(--lime,#B6C12B);font-size:15px}
.sn-orig .hito h4{margin:4px 0 2px;font-size:15.5px}
.sn-orig .hito p{font-size:12.5px;color:#54646F;margin:0}

/* Timeline de trayectoria, como el del dossier: espina lima, puntos y alternancia */
.sn-orig .tl{position:relative;display:grid;grid-template-columns:repeat(8,1fr);
  max-width:1280px;margin:24px auto 0;min-height:300px}
.sn-orig .tl::before{content:'';position:absolute;left:1%;right:1%;top:50%;height:2px;
  background:linear-gradient(90deg,var(--lime,#B6C12B) 0%,rgba(182,193,43,.28) 100%)}
.sn-orig .tl-item{position:relative;min-height:300px}
.sn-orig .tl-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--lime,#B6C12B);z-index:1}
.sn-orig .tl-item:last-child .tl-dot{background:var(--lime,#B6C12B)}
.sn-orig .tl-item::after{content:'';position:absolute;left:50%;width:2px;height:20px;
  background:rgba(182,193,43,.45)}
.sn-orig .tl-item.arriba::after{bottom:calc(50% + 8px)}
.sn-orig .tl-item.abajo::after{top:calc(50% + 8px)}
.sn-orig .tl-card{position:absolute;left:4px;right:4px;text-align:center}
.sn-orig .tl-item.arriba .tl-card{bottom:calc(50% + 34px)}
.sn-orig .tl-item.abajo .tl-card{top:calc(50% + 34px)}
.sn-orig .tl-anno{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  color:var(--lime,#B6C12B);font-size:17px;letter-spacing:.02em}
.sn-orig .tl-card h4{margin:2px 0 3px;font-size:14.5px;line-height:1.25;color:var(--navy,#0B405D)}
.sn-orig .tl-card p{margin:0;font-size:12px;color:#54646F;line-height:1.4}
@media (max-width:900px){
  .sn-orig .tl{display:block;min-height:0;padding-left:26px;margin-top:8px}
  .sn-orig .tl::before{left:6px;right:auto;top:4px;bottom:4px;width:2px;height:auto;
    background:linear-gradient(180deg,var(--lime,#B6C12B),rgba(182,193,43,.25))}
  .sn-orig .tl-item{min-height:0;padding:0 0 24px}
  .sn-orig .tl-item::after{display:none}
  .sn-orig .tl-dot{left:-20px;top:5px;transform:none}
  .sn-orig .tl-card{position:static;text-align:left}
}

/* ─── /distribuidores/ con el lenguaje del dossier ─── */
.sn-orig .uk-section.dist-hero{background:
  radial-gradient(ellipse 70% 120% at 20% 0%,rgba(14,82,120,.5) 0%,transparent 60%),
  linear-gradient(115deg,#072E43 0%,#0B405D 100%);
  padding:110px 48px 190px!important}
.sn-orig .dist-hero .uk-container{max-width:1280px!important;margin:0 auto!important}
.sn-orig .dist-hero h1{color:#fff;font-size:clamp(34px,3.6vw,50px);max-width:15ch}
.sn-orig .dist-hero h1 em{font-style:italic;color:var(--lime,#B6C12B)}
.sn-orig .dist-hero p{color:rgba(255,255,255,.85);max-width:52ch;font-size:16px}
.sn-orig .dist-hero .dist-hero-foto img{border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.sn-orig .sn-pull{padding-top:0!important;margin-top:-72px}
.sn-orig .sn-pull .spec-card{box-shadow:0 14px 40px rgba(7,46,67,.22)}
.sn-orig .uk-section.band-transporte{position:relative;
  background:linear-gradient(90deg,rgba(7,46,67,.95) 0%,rgba(7,46,67,.72) 55%,rgba(7,46,67,.35) 100%),
  url('https://serranova.es/wp-content/uploads/2026/08/proceso-5-distribucion.jpg') center 35%/cover;
  padding:88px 48px!important;text-align:center}
.sn-orig .band-transporte h2{color:#fff;font-size:clamp(28px,3vw,40px)}
.sn-orig .band-transporte p{color:rgba(255,255,255,.85);max-width:60ch;margin-left:auto;margin-right:auto}
.sn-orig .sn-grid-2{grid-template-columns:1fr 1fr}
.sn-orig .sn-grid-3,.sn-orig .sn-grid-3-igual{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.sn-orig .sn-grid-2,.sn-orig .sn-grid-3,.sn-orig .sn-grid-3-igual{grid-template-columns:1fr}}
.sn-orig .sn-card-izq{text-align:left;transition:transform .3s ease,box-shadow .3s ease;border-top:3px solid transparent}
.sn-orig .sn-card-izq:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(7,46,67,.10);border-top-color:var(--lime,#B6C12B)}
.sn-orig .sn-fondo-claro{background:var(--off-white,#F7F8F3)!important}
/* el cta-banner nativo reutiliza el gradiente del bloque de la home */
.sn-orig .uk-section.cta-banner{padding:96px 48px!important;text-align:center;
  background:radial-gradient(ellipse 60% 130% at 50% 0%,rgba(14,82,120,.55) 0%,transparent 60%),#0B405D}
.sn-orig .uk-section.cta-banner h2{color:#fff;font-size:clamp(30px,3.4vw,44px);font-style:italic}
.sn-orig .uk-section.cta-banner p{color:rgba(255,255,255,.8)}

/* ─── separación de módulos con solapes ─── */
.sn-orig .sn-sin-abajo{padding-bottom:0!important}
.sn-orig .sn-cartas-apiladas .why-card{margin-bottom:20px}
.sn-orig .sn-foto-solapa img{border-radius:20px;box-shadow:0 20px 50px rgba(7,46,67,.25);
  position:relative;z-index:2;margin-bottom:-110px}
.sn-orig .uk-section.band-transporte{padding-top:150px!important;text-align:left}
.sn-orig .band-transporte h2,.sn-orig .band-transporte p{margin-left:0;max-width:56ch}
.sn-orig .sn-traccion .sn-foto-alta img{border-radius:20px;height:100%;min-height:420px;
  object-fit:cover;box-shadow:0 16px 40px rgba(7,46,67,.18)}
.sn-orig .uk-section.sn-franja-aerea{background:linear-gradient(rgba(7,46,67,.25),rgba(7,46,67,.45)),
  url('https://serranova.es/wp-content/uploads/2026/08/planta-aerea-franja.jpg') center/cover;
  padding:150px 48px 20px!important;position:relative}
.sn-orig .sn-franja-pie{color:rgba(255,255,255,.85);font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;text-align:right;margin:0}

.sn-orig .dist-hero .dist-hero-foto img{margin-bottom:-160px;position:relative;z-index:2}
.sn-orig .dist-hero p{font-size:16px;margin-top:18px}

/* distribuidores v2: solo dos ajustes sobre patrones existentes */
.sn-orig .partner-nombre{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;
  color:var(--navy,#0B405D);font-size:16px;margin:0 0 8px}
.sn-orig .tl{min-height:340px}
.sn-orig .tl-item{min-height:340px}
.sn-orig .tl-anno{font-size:20px}
.sn-orig .tl-card h4{font-size:15.5px}
.sn-orig .tl-card p{font-size:13px}
.sn-orig .tl-dot{width:16px;height:16px}
.sn-orig .section-header h1{text-align:inherit}

/* productos, con la maqueta de la página de gama del dossier: sin cajas, mockups grandes */
.sn-orig .products-grid-4 .product-card{background:transparent;border:0;box-shadow:none;transform:none!important}
.sn-orig .products-grid-4 .product-card:hover{box-shadow:none}
.sn-orig .products-grid-4 .product-card-image{background:var(--off-white,#F7F8F3);border-radius:18px;
  height:360px;display:flex;align-items:center;justify-content:center;padding:28px 18px}
.sn-orig .products-grid-4 .product-card-image img{max-height:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 18px 28px rgba(7,46,67,.16))}
.sn-orig .products-grid-4 .product-card-body{padding:18px 4px 0;background:transparent;text-align:center}
.sn-orig .products-grid-4 h3{font-size:20px;margin-bottom:2px}
.sn-orig .products-grid-4 .subtitle{font-size:13px;color:var(--lime-dark,#7A8414);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.sn-orig .products-grid-4 .product-card-body p:last-child{font-size:13px;color:#54646F}
/* respaldo en 3 columnas de verdad */
.sn-orig .partners-row.sn-3col{grid-template-columns:repeat(3,1fr)!important;gap:20px}
.sn-orig .sn-3col .partner{text-align:left;padding:26px 24px}
.sn-orig .sn-3col .partner p{font-size:13.5px;line-height:1.55}

/* formatos, como la página del dossier */
.sn-orig .formato-titulo{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:22px;
  color:var(--navy,#0B405D);margin:0}
.sn-orig .formato-rotulo{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--lime-dark,#7A8414);margin:2px 0 10px}
.sn-orig .icono-suelto{width:48px;height:48px}
.sn-orig .formato-nota p,.sn-orig p.formato-nota-tecnica{font-size:13px;color:#54646F;text-align:center}

.sn-orig .sn-sin-arriba{padding-top:0!important}
.sn-orig .pellet-anotado img{width:100%;border-radius:20px}

/* ── Banda «Números que se miden» · pellet anotado del dossier (pág. 9), sección Productos ── */
.sn-orig .pellet-banda{margin-top:0;text-align:center}
.sn-orig .pellet-banda-head h3{font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--navy);margin-bottom:12px}
.sn-orig .pellet-banda-head h3 em{font-style:italic;color:var(--lime-dark)}
.sn-orig .pellet-banda-head p{max-width:660px;margin:0 auto;font-size:15px;color:#54646F;line-height:1.7}
.sn-orig figure.pellet-anotado{margin:20px auto 0;max-width:960px}
.sn-orig .pellet-banda-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:820px;margin:26px auto 0;padding-top:24px;border-top:1px solid var(--gray-200)}
.sn-orig .pellet-banda-specs strong{display:block;font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--navy)}
.sn-orig .pellet-banda-specs span{display:block;margin-top:4px;font-size:12.5px;color:#54646F}
@media (max-width:768px){
  .sn-orig .pellet-banda-specs{grid-template-columns:repeat(2,1fr);gap:16px}
  .sn-orig .pellet-banda-head h3{font-size:24px}
}

/* ── Accesibilidad: foco visible al navegar con teclado (no afecta al ratón) ── */
.sn-orig a:focus-visible,.sn-orig button:focus-visible{outline:2px solid var(--lime-dark);outline-offset:3px;border-radius:4px}

/* em del dossier en cabeceras de sección (se miden en lima) */
.sn-orig .section-header h2 em{font-style:italic;color:var(--lime-dark)}
/* subtítulo del bloque de formatos, debajo del pellet */
.sn-orig .formatos-head{margin-top:88px}
.sn-orig .formatos-head h3{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--navy);margin-bottom:8px}
.sn-orig .formatos-head p{font-size:15px;color:#54646F}

/* Foto de producto sobre blanco dentro de lifestyle-grid: entera y centrada, sin recorte (lección p15 del dossier) */
.sn-orig .lifestyle-image.sn-producto{height:auto;min-height:0;overflow:hidden;align-self:center;
  aspect-ratio:4/3;border-radius:20px}
.sn-orig .lifestyle-image.sn-producto img{position:static;width:100%;height:100%;object-fit:cover;object-position:center}
/* la columna de la foto se lleva más ancho: el bodegón es el argumento visual de la sección */
.sn-orig .lifestyle-grid:has(.sn-producto){grid-template-columns:1.22fr .78fr}
@media (max-width:900px){.sn-orig .lifestyle-grid:has(.sn-producto){grid-template-columns:1fr}
  .sn-orig .lifestyle-image.sn-producto{aspect-ratio:16/10}}

/* Granel y palet enfundado como en el dossier (icono navy + rótulo), bajo la gama de la home */
.sn-orig .formatos-extra{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:820px;margin:56px auto 0}
.sn-orig .formato-extra{background:var(--off-white,#F7F8F3);border-radius:18px;padding:32px 28px;text-align:center}
.sn-orig .formato-extra .icono-suelto{width:48px;height:48px;margin:0 auto 14px;display:block}
.sn-orig .formato-extra h3{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--navy);margin-bottom:2px}
.sn-orig .formato-extra .rotulo{display:block;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--lime-dark);margin-bottom:10px}
.sn-orig .formato-extra p{font-size:13px;color:#54646F;line-height:1.7;margin:0}
@media (max-width:640px){.sn-orig .formatos-extra{grid-template-columns:1fr}}

/* El badge de la gama no debe tocar la foto: aire arriba (la foto empieza bajo el badge) */
.sn-orig .products-grid-4 .product-card-image{height:392px;padding:68px 18px 30px}


/* ═══════════════════════════════════════════════════════════════════
   RONDA 1 · award-quality-loop (31-ago-2026)
   Solo fallos verificados con medición. Cada bloque dice qué arregla.
   ═══════════════════════════════════════════════════════════════════ */

/* [1] Las tarjetas de Proceso no tenían NINGÚN velo (las de Mercados sí):
   el texto competía con las ramas. Se les da el mismo degradado del sistema. */
.sn-orig .process-step .process-step-content{
  background:linear-gradient(to top, rgba(7,46,67,.72) 0%, rgba(7,46,67,.34) 55%, rgba(7,46,67,0) 100%);
  padding:22px 20px 20px}

/* [2] La sección Contacto arrancaba a 80px y el resto de la home a 128px. */
.sn-orig .contact-section .section-header,
.sn-orig .contact-section .contact-grid{padding-left:48px}
@media (max-width:1024px){
  .sn-orig .contact-section .section-header,
  .sn-orig .contact-section .contact-grid{padding-left:0}
}

/* [3] El rótulo «ODS» se servía a 8px: ilegible. */
.sn-orig .ods-label{font-size:10px!important;letter-spacing:.1em}
.sn-orig .ods-card p{font-size:13px}

/* [4] Iconos de línea del dossier a 26px: el trazo se deshacía. */
.sn-orig .why-card img, .sn-orig .impact-icon img, .sn-orig .cert-icon img{width:30px!important;height:30px!important}

/* [5] M3 del listón · cuerpo de tarjeta de 13px a 15px (el referente usa 16px
   como tamaño dominante; 13px lee como documento, no como marca de consumo). */
.sn-orig .why-card p,
.sn-orig .process-step p,
.sn-orig .impact-card p,
.sn-orig .formato-extra p,
.sn-orig .products-grid-4 .product-card-body p:last-child,
.sn-orig .pellet-banda-head p{font-size:15px;line-height:1.7}
.sn-orig .pellet-banda-specs span{font-size:13px}

/* [6] La píldora de mercado quedaba a 8px de su titular. */
.sn-orig .market-card-overlay .market-tag{margin-bottom:10px}

/* [7] La clase sn-3col ponía grid-template-columns sobre un contenedor FLEX,
   donde no hace nada: por eso el respaldo salía en 6 columnas de 130px con el
   texto roto a tres palabras por línea. Ahora es rejilla de verdad, 3×2. */
.sn-orig .partners-row.sn-3col{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px;align-items:stretch}
.sn-orig .partners-row.sn-3col .partner{min-width:0;display:flex;flex-direction:column}
.sn-orig .sn-3col .partner p{font-size:15px;line-height:1.6}
@media (max-width:900px){.sn-orig .partners-row.sn-3col{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:560px){.sn-orig .partners-row.sn-3col{grid-template-columns:1fr!important}}

/* [8] M1/M8 del listón · un momento de voz en las páginas interiores:
   la frase sola, grande, sobre fondo plano, sin caja ni foto debajo. */
.sn-orig .voz{background:var(--navy);padding:104px 0;margin:88px 0}
.sn-orig .voz-inner{max-width:1184px;margin:0 auto;padding:0 48px}
.sn-orig .voz h2{font-family:var(--font-display);font-size:clamp(36px,4.6vw,68px);line-height:1.06;
  font-weight:800;color:#fff;margin:0;max-width:26ch}
.sn-orig .voz h2 em{font-style:italic;color:var(--lime)}
.sn-orig .voz p{margin:28px 0 0;font-size:16px;line-height:1.7;color:rgba(255,255,255,.82);max-width:52ch}

/* [9] M9 del listón · franja de datos a sangre sobre navy (sello, no párrafo). */
.sn-orig .sello-datos{background:var(--navy-dark,#072E43);padding:44px 0;margin:64px 0}
.sn-orig .sello-datos-inner{max-width:1184px;margin:0 auto;padding:0 48px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.sn-orig .sello-datos-inner > div{border-top:1px solid rgba(182,193,43,.35);padding-top:18px}
.sn-orig .sello-datos strong{display:block;font-family:var(--font-display);font-size:30px;
  font-weight:800;color:var(--lime);line-height:1.1}
.sn-orig .sello-datos span{display:block;margin-top:6px;font-size:13px;color:#A9C2D2}
@media (max-width:768px){
  .sn-orig .sello-datos-inner{grid-template-columns:repeat(2,1fr);gap:20px;padding:0 24px}
  .sn-orig .voz-inner{padding:0 24px}
}

/* [10] Bifurcación de públicos: dos puertas, cada una en su tono. */
.sn-orig .bifurca{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin:0 0 72px}
.sn-orig .bifurca-card{display:flex;flex-direction:column;padding:40px 36px;border-radius:20px;
  text-decoration:none;transition:transform .25s ease, box-shadow .25s ease}
.sn-orig .bifurca-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(7,46,67,.13)}
.sn-orig .bifurca-hogar{background:var(--off-white,#F7F8F3);border:1px solid #E7EAE0}
.sn-orig .bifurca-negocio{background:var(--navy)}
.sn-orig .bifurca-card .eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.sn-orig .bifurca-hogar .eyebrow{color:var(--lime-dark)}
.sn-orig .bifurca-negocio .eyebrow{color:var(--lime)}
.sn-orig .bifurca-card h3{font-family:var(--font-display);font-size:28px;font-weight:700;margin:10px 0 8px}
.sn-orig .bifurca-hogar h3{color:var(--navy)}
.sn-orig .bifurca-negocio h3{color:#fff}
.sn-orig .bifurca-card p{font-size:15px;line-height:1.7;margin:0 0 22px;flex:1}
.sn-orig .bifurca-hogar p{color:#54646F}
.sn-orig .bifurca-negocio p{color:rgba(255,255,255,.82)}
.sn-orig .bifurca-card .flecha{font-size:14px;font-weight:600}
.sn-orig .bifurca-hogar .flecha{color:var(--navy)}
.sn-orig .bifurca-negocio .flecha{color:var(--lime)}
@media (max-width:768px){.sn-orig .bifurca{grid-template-columns:1fr;margin-bottom:48px}}

/* el sello va a sangre: si la sección lo constriñe, se rompe el contenedor */
.sn-orig .sello-datos{width:100%}

/* [11] .market-tag tenía padding:0 y display:block — el fondo lima quedaba pegado
   al texto y se leía como un subrayado mal recortado, no como una etiqueta.
   Se le da la misma forma de píldora que .product-tag (el patrón del sistema). */
.sn-orig .market-tag{display:inline-block!important;padding:5px 12px!important;border-radius:999px;
  line-height:1.2!important;font-weight:700;letter-spacing:.04em;margin-bottom:12px}

/* enlace dentro del checklist navy: legible sobre fondo oscuro */
.sn-orig .lifestyle-features a{color:var(--lime);text-decoration:underline;text-underline-offset:3px}

/* la voz abre el timeline: menos aire abajo para que se lea como su cabecera */
.sn-orig .voz.voz-timeline{margin:88px 0 0;padding:96px 0 88px}
.sn-orig .voz-timeline .section-label{background:rgba(182,193,43,.16);color:var(--lime);margin-bottom:22px}
.sn-orig .voz-timeline p{margin-top:24px}
.sn-orig .voz-timeline + * .tl,
.sn-orig .voz-timeline ~ .tl{margin-top:56px}

/* Hero de /distribuidores/ con la vista aérea REAL de la planta (2200x504, estaba sin usar) */
.sn-orig .hero-planta{position:relative;min-height:470px;display:flex;align-items:center;overflow:hidden;background:var(--navy)}
.sn-orig .hero-planta > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% center}
.sn-orig .hero-planta::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(7,46,67,.93) 0%, rgba(7,46,67,.82) 44%, rgba(7,46,67,.32) 80%, rgba(7,46,67,.12) 100%)}
.sn-orig .hero-planta-inner{position:relative;z-index:2;max-width:1184px;margin:0 auto;padding:72px 48px;width:100%}
.sn-orig .hero-planta-inner .section-label{background:rgba(182,193,43,.16);color:var(--lime);margin-bottom:20px}
.sn-orig .hero-planta-inner h1{font-family:var(--font-display);font-size:clamp(34px,4.2vw,60px);line-height:1.08;
  font-weight:800;color:#fff;margin:0;max-width:20ch}
.sn-orig .hero-planta-inner h1 em{font-style:italic;color:var(--lime)}
.sn-orig .hero-planta-inner p{margin:22px 0 0;font-size:16px;line-height:1.7;color:rgba(255,255,255,.88);max-width:52ch}
@media (max-width:768px){
  .sn-orig .hero-planta{min-height:420px}
  .sn-orig .hero-planta-inner{padding:56px 24px}
  .sn-orig .hero-planta::after{background:linear-gradient(180deg, rgba(7,46,67,.86) 0%, rgba(7,46,67,.78) 55%, rgba(7,46,67,.88) 100%)}
}

/* Seis razones (pág. 3 del dossier): lista tipográfica numerada, SIN caja ni sombra
   — a propósito distinta de las tarjetas de respaldo, para no repetir compás */
/* banda off-white: cambia de escenario respecto a las secciones blancas de al lado */
.sn-orig .razones-banda{background:var(--off-white,#F7F8F3);padding:96px 0}
.sn-orig .razones-banda .section-header{max-width:1184px;margin:0 auto;padding:0 48px}
.sn-orig .razones-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 44px;
  max-width:1184px;margin:64px auto 0;padding:0 48px}
/* el número es el acento: grande, en lima, con la regla fina debajo de él y no encima del bloque */
.sn-orig .razon{display:grid;grid-template-columns:auto 1fr;gap:0 20px;align-items:start}
.sn-orig .razon-num{grid-row:1 / span 2;font-family:var(--font-display);font-size:34px;font-weight:800;
  line-height:1;color:var(--lime-dark);letter-spacing:-.02em;
  border-top:3px solid var(--lime);padding-top:16px;min-width:52px}
.sn-orig .razon h3{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--navy);
  margin:0 0 10px;padding-top:16px;border-top:1px solid rgba(11,64,93,.16)}
.sn-orig .razon p{font-size:15px;line-height:1.75;color:#54646F;margin:0}
@media (max-width:900px){
  .sn-orig .razones-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 32px;padding:0 24px}
  .sn-orig .razones-banda .section-header{padding:0 24px}
  .sn-orig .razones-banda{padding:72px 0}
}
@media (max-width:560px){.sn-orig .razones-grid{grid-template-columns:1fr;gap:36px}
  .sn-orig .razon-num{font-size:28px;min-width:44px}}
@media (max-width:900px){.sn-orig .razones-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 28px}}
@media (max-width:560px){.sn-orig .razones-grid{grid-template-columns:1fr;gap:28px}}

/* Mercado nacional / vocación europea (pág. 13): dos columnas de texto, sin tarjeta */
.sn-orig .mercado-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin-top:52px;
  padding-top:34px;border-top:1px solid var(--gray-200)}
.sn-orig .mercado-cols h3{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--navy);margin:0 0 10px}
.sn-orig .mercado-cols p{font-size:15px;line-height:1.75;color:#54646F;margin:0}
@media (max-width:768px){.sn-orig .mercado-cols{grid-template-columns:1fr;gap:28px}}

/* [FIX] El timeline tenía grid-template-columns:repeat(8,1fr) FIJO: al añadir el noveno hito
   (Nov 2025 · obras) el último se cayó a una segunda fila. Ahora las columnas se generan solas,
   así que aguanta cualquier número de hitos sin volver a romperse. */
.sn-orig .tl{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  max-width:1320px}
.sn-orig .tl-card{left:2px;right:2px}
.sn-orig .tl-card .tl-anno{font-size:19px}
.sn-orig .tl-card h4{font-size:14px;line-height:1.25}
.sn-orig .tl-card p{font-size:12.5px;line-height:1.35}
@media (max-width:1024px){
  /* en móvil la lista es vertical: se restauran los valores del diseño original */
  .sn-orig .tl{grid-auto-flow:row;max-width:none}
  .sn-orig .tl-card .tl-anno,.sn-orig .tl-card h4,.sn-orig .tl-card p{font-size:inherit}
}

/* Banda de las seis razones: panel off-white redondeado (cambio de escenario sin tocar
   la estructura del builder) */
.sn-orig .razones-banda{background:var(--off-white,#F7F8F3);border-radius:24px;padding:64px 56px}
.sn-orig .razones-banda .section-header{max-width:none;margin:0;padding:0}
.sn-orig .razones-banda .razones-grid{margin:52px 0 0;padding:0;max-width:none}
@media (max-width:768px){.sn-orig .razones-banda{padding:44px 24px;border-radius:18px}}

/* [refinado] Un solo filete continuo por razón, con el tramo lima solo sobre el número
   (antes eran dos filetes separados por el hueco de la rejilla y se leía partido).
   Y el número alineado ópticamente con la mayúscula del título. */
.sn-orig .razon{position:relative;padding-top:22px;border-top:1px solid rgba(11,64,93,.14);
  grid-template-columns:auto 1fr;gap:6px 18px}
.sn-orig .razon::before{content:"";position:absolute;top:-2px;left:0;width:56px;height:3px;
  background:var(--lime,#B6C12B)}
.sn-orig .razon-num{border-top:0;padding-top:0;min-width:56px;margin-top:-3px}
.sn-orig .razon h3{border-top:0;padding-top:0;margin:0 0 8px}
.sn-orig .razon p{grid-column:2}

/* [refinado 2] El número, al ocupar dos filas de la rejilla, fijaba la altura de la primera y
   abría un hueco entre el título y su texto. Se saca del flujo: posición absoluta a la izquierda. */
.sn-orig .razon{display:block;padding:22px 0 0 76px}
.sn-orig .razon::before{width:56px}
.sn-orig .razon-num{position:absolute;left:0;top:22px;margin:0;min-width:0;line-height:1}
.sn-orig .razon h3{margin:0 0 9px}
.sn-orig .razon p{grid-column:auto}
@media (max-width:560px){.sn-orig .razon{padding-left:64px}}

/* [iconos] Los seis iconos del dossier (pág. 3) entran en la propuesta de valor: el icono pasa a
   ser el ancla visual —como en el dossier— y el número queda como índice pequeño sobre el título. */
.sn-orig .razon{padding-left:72px}
.sn-orig .razon-ico{position:absolute;left:0;top:26px;width:48px;height:48px;object-fit:contain;display:block}
.sn-orig .razon-num{position:static;display:block;font-family:var(--font-display);font-size:12px;
  font-weight:800;letter-spacing:.14em;line-height:1;color:var(--lime-dark);margin:0 0 7px;min-width:0}
.sn-orig .razon::before{width:48px}
@media (max-width:560px){
  .sn-orig .razon{padding-left:62px}
  .sn-orig .razon-ico{width:40px;height:40px;top:24px}
  .sn-orig .razon::before{width:40px}
}

/* [ajuste] Los iconos del dossier llevan mucho aire dentro del trazo: a 48 px leian pequenos. */
.sn-orig .razon{padding-left:80px}
.sn-orig .razon-ico{width:56px;height:56px;top:28px}
.sn-orig .razon::before{width:56px}
@media (max-width:560px){
  .sn-orig .razon{padding-left:66px}
  .sn-orig .razon-ico{width:46px;height:46px;top:26px}
  .sn-orig .razon::before{width:46px}
}

/* [Adrián, 1-sep] Fuera los superíndices: el subtítulo ya dice «seis razones» y el icono es el
   ancla. Sin número, el título sube, así que el icono se realinea con su mayúscula. */
.sn-orig .razon-num{display:none}
.sn-orig .razon-ico{top:22px}
@media (max-width:560px){.sn-orig .razon-ico{top:21px}}

/* Sección «El proyecto» (pág. 2 del dossier): texto y cifras a la izquierda, foto real de la
   planta a la derecha. Misma maqueta que el dossier. */
.sn-orig .proyecto-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.sn-orig .proyecto-texto h2{font-family:var(--font-display);font-size:clamp(30px,3.4vw,46px);
  line-height:1.08;font-weight:800;color:var(--navy);margin:18px 0 24px}
.sn-orig .proyecto-texto h2 em{font-style:italic;color:var(--lime-dark)}
.sn-orig .proyecto-texto p{font-size:16px;line-height:1.75;color:#54646F;margin:0 0 18px;max-width:52ch}
.sn-orig .proyecto-texto p strong{color:var(--navy);font-weight:700}
.sn-orig .proyecto-cifras{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 32px;
  background:var(--navy);border-radius:22px;padding:34px 36px;margin-top:32px}
.sn-orig .proyecto-cifras strong{display:block;font-family:var(--font-display);font-size:30px;
  font-weight:800;line-height:1;color:var(--lime)}
.sn-orig .proyecto-cifras span{display:block;margin-top:8px;font-size:13px;line-height:1.45;
  color:rgba(255,255,255,.82)}
.sn-orig figure.proyecto-foto{margin:0;border-radius:22px;overflow:hidden;aspect-ratio:3/4}
.sn-orig .proyecto-foto img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
@media (max-width:900px){
  .sn-orig .proyecto-grid{grid-template-columns:1fr;gap:36px}
  .sn-orig figure.proyecto-foto{aspect-ratio:16/11;order:-1}
  .sn-orig .proyecto-cifras{padding:28px 24px;gap:22px 24px}
  .sn-orig .proyecto-cifras strong{font-size:26px}
}

/* [ajuste] La foto es 860x642 (horizontal). En un hueco 3/4 se ampliaba 1,11x y recortaba de mas.
   Con 5/6 va a tamano nativo (escala 1,00) y ademas conserva mas ancho de la toma. */
.sn-orig figure.proyecto-foto{aspect-ratio:5/6}

/* [ajuste] Con la Trayectoria movida detras de la banda hueso, los 88 px de margen superior mas
   el padding de las dos secciones dejaban 232 px de hueco blanco. La franja navy sube. */
.sn-orig .voz.voz-timeline{margin-top:0;padding-top:88px}

/* [a sangre] La seccion del builder ya va a ancho expandido; lo que constrenia el navy era el
   max-width/padding de .section. Se anula SOLO en la de Trayectoria (sin usar 100vw, que
   desborda por la barra de scroll). El contenido sigue alineado con el resto por .voz-inner. */
.sn-orig .section:has(> .voz-timeline){max-width:none;padding-left:0;padding-right:0}
.sn-orig .section:has(> .voz-timeline) .tl{padding-left:24px;padding-right:24px}
@media (max-width:1024px){
  .sn-orig .section:has(> .voz-timeline) .tl{padding-left:20px;padding-right:20px}
}

/* ═══ Animaciones · remate (1-sep-2026) ═══
   El pellet anotado entra asentandose: sube, aparece y baja de una escala ligera. Los cuatro
   valores de debajo entran escalonados (la clase stagger la pone el JS). */
html.sn-anim .sn-orig .pellet-banda figure.pellet-anotado img{
  transform:scale(1.045);transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity .9s ease}
html.sn-anim .sn-orig .pellet-banda.visible figure.pellet-anotado img{transform:scale(1)}
/* la foto de El proyecto y la del palet, el mismo gesto */
html.sn-anim .sn-orig .proyecto-foto img,
html.sn-anim .sn-orig .lifestyle-image.sn-producto img{
  transform:scale(1.04);transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
html.sn-anim .sn-orig .proyecto-foto.visible img,
html.sn-anim .sn-orig .reveal.visible .lifestyle-image.sn-producto img,
html.sn-anim .sn-orig .lifestyle-grid.visible .sn-producto img{transform:scale(1)}
/* quien pida no ver movimiento, no lo ve */
@media (prefers-reduced-motion: reduce){
  html.sn-anim .sn-orig .pellet-banda figure.pellet-anotado img,
  html.sn-orig .proyecto-foto img,
  html.sn-anim .sn-orig .proyecto-foto img,
  html.sn-anim .sn-orig .lifestyle-image.sn-producto img{transform:none!important;transition:none!important}
}

/* [fix] La escala de las fotos se resuelve desde el contenedor que recibe .visible, no desde el
   propio figure: si el figure no llega a observarse, la imagen se quedaria ampliada para siempre. */
html.sn-anim .sn-orig .proyecto-grid.visible .proyecto-foto img,
html.sn-anim .sn-orig .proyecto-foto.visible img{transform:scale(1)}

/* ═══ Logo de cabecera (1-sep) ═══ Estaba a 132 px de ancho (38 de alto) en una cabecera de 81:
   usaba menos de la mitad. Sube a 176 (51 de alto), que deja aire y gana presencia. */
.sn-orig .tm-header .uk-logo img{width:176px;height:auto}
@media (max-width:959px){.sn-orig .tm-header .uk-logo img{width:148px}}

/* ═══ Iconos del dossier en las tarjetas de impacto (version BLANCA: van sobre navy) ═══ */
.sn-orig .impact-card .impact-ico{width:44px;height:44px;object-fit:contain;display:block;
  margin:0 auto 18px;opacity:.92}

/* ═══ «Preparados para tu cadena» A SANGRE ═══
   La foto ya no es un bodegon sobre blanco sino el lineal real, asi que recorta bien (cover) y
   deja de necesitar la variante sn-producto. Se anula el max-width de .section solo aqui. */
.sn-orig .section:has(> .lifestyle-sangre){max-width:none;padding-left:0;padding-right:0}
.sn-orig .lifestyle-sangre{border-radius:0;overflow:hidden}
.sn-orig .lifestyle-sangre .lifestyle-image{border-radius:0;min-height:560px;aspect-ratio:auto}
.sn-orig .lifestyle-sangre .lifestyle-image img{position:static;width:100%;height:100%;
  object-fit:cover;object-position:center 58%}
.sn-orig .lifestyle-sangre .lifestyle-content{border-radius:0;padding:72px 56px 72px 64px;
  display:flex;flex-direction:column;justify-content:center}
@media (max-width:900px){
  .sn-orig .lifestyle-sangre .lifestyle-image{min-height:0;aspect-ratio:16/10}
  .sn-orig .lifestyle-sangre .lifestyle-content{padding:48px 24px}
}

/* ═══ Pellet anotado · animación por scroll (Apple-style) · 1-sep-2026 ═══
   El pellet es foto; las líneas, los aros, los iconos y los textos son código:
   se traducen con Polylang, se recolorean y —lo importante— se pueden DIBUJAR. */
.sn-orig .pellet-scroll{position:relative}
.sn-orig .pellet-stage{position:sticky;top:96px;display:flex;align-items:center;justify-content:center}
.sn-orig .pellet-lienzo{position:relative;width:100%;max-width:1200px;aspect-ratio:1200/780}
.sn-orig .pellet-foto{position:absolute;left:19%;top:20%;width:62%;height:auto;
  transform:scale(var(--esc,1));transform-origin:center;will-change:transform}
.sn-orig .pellet-trazos{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sn-orig .pellet-trazos polyline{stroke:var(--lime,#B6C12B);stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.sn-orig .pellet-trazos .aro{stroke:var(--lime,#B6C12B);stroke-width:2.2;fill:#fff}
.sn-orig .pellet-rotulo{position:absolute;margin:0;display:flex;flex-direction:column;gap:10px}
.sn-orig .pellet-rotulo.r0{left:0;top:24%;width:14.5%;align-items:flex-end;text-align:right}
.sn-orig .pellet-rotulo.r1{left:81.5%;top:24%;width:18%}
.sn-orig .pellet-rotulo.r2{left:63%;top:76%;width:24%}
.sn-orig .pellet-ico{width:38px;height:38px;overflow:visible}
.sn-orig .pellet-ico .dib{stroke:var(--navy,#0B405D);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sn-orig .pellet-ico .relleno{fill:var(--navy,#0B405D)}
.sn-orig .pellet-rotulo figcaption strong{display:block;font-family:var(--font-display);font-size:clamp(19px,1.7vw,25px);
  font-weight:800;color:var(--navy,#0B405D);line-height:1.05;letter-spacing:-.01em}
.sn-orig .pellet-rotulo figcaption span{display:block;margin-top:3px;font-size:clamp(12px,1vw,14.5px);color:var(--navy,#0B405D)}

/* estados de dibujo, gobernados por el JS con --p (0 a 1) por rótulo */
html.sn-anim .sn-orig .pellet-trazos polyline{stroke-dasharray:var(--largo,400);
  stroke-dashoffset:calc(var(--largo,400) * (1 - var(--p,0)))}
html.sn-anim .sn-orig .pellet-trazos .aro{transform:scale(var(--p,0));transform-origin:center;transform-box:fill-box}
html.sn-anim .sn-orig .pellet-ico .dib{stroke-dasharray:var(--largo,200);
  stroke-dashoffset:calc(var(--largo,200) * (1 - var(--pi,0)))}
html.sn-anim .sn-orig .pellet-ico .relleno{opacity:var(--pi,0)}
html.sn-anim .sn-orig .pellet-rotulo figcaption{opacity:var(--pt,0);
  transform:translateY(calc((1 - var(--pt,0)) * 14px))}

/* móvil: el mismo dibujo pero con recorrido más corto y textos algo menores */
@media (max-width:900px){
  .sn-orig .pellet-stage{top:76px}
  .sn-orig .pellet-ico{width:30px;height:30px}
  .sn-orig .pellet-rotulo.r0{width:17%}
  .sn-orig .pellet-rotulo.r1{width:19%}
  .sn-orig .pellet-rotulo.r2{width:28%}
}
/* quien no quiere movimiento lo ve terminado y sin pegado */
@media (prefers-reduced-motion:reduce){
  .sn-orig .pellet-scroll{height:auto!important}
  .sn-orig .pellet-stage{position:static}
  html.sn-anim .sn-orig .pellet-trazos polyline,
  html.sn-anim .sn-orig .pellet-ico .dib{stroke-dashoffset:0!important}
  html.sn-anim .sn-orig .pellet-trazos .aro{transform:none!important}
  html.sn-anim .sn-orig .pellet-ico .relleno{opacity:1!important}
  html.sn-anim .sn-orig .pellet-rotulo figcaption{opacity:1!important;transform:none!important}
  .sn-orig .pellet-foto{transform:none!important}
}

/* [geometria medida] Lienzo 1200x820; los rotulos se colocan por estilo en linea, calculados
   desde la silueta real del pellet. Los iconos, mas grandes: a 38 px no se leian. */
.sn-orig .pellet-lienzo{aspect-ratio:1200/820}
.sn-orig .pellet-foto{top:auto;left:auto}
.sn-orig .pellet-rotulo{width:auto;max-width:23%;gap:8px}
.sn-orig .pellet-ico{width:46px;height:46px}
.sn-orig .pellet-trazos .aro.grande{fill:#fff}
@media (max-width:900px){
  .sn-orig .pellet-ico{width:34px;height:34px}
  .sn-orig .pellet-rotulo{max-width:31%}
}

/* [v3 · 1-sep] Dos correcciones de Adrián: la fila de valores va DENTRO del bloque fijo (si no,
   al empezar la animación la mitad de abajo queda vacía) y el rótulo de humedad ya NO pisa el
   pellet: los aros se calculan fuera de la silueta (48 px de holgura, medidos). */
.sn-orig .pellet-lienzo{aspect-ratio:1200/660}
.sn-orig .pellet-stage{flex-direction:column;gap:26px;width:100%;max-width:1200px;margin:0 auto}
.sn-orig .pellet-valores{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 28px;
  padding-top:26px;border-top:1px solid var(--gray-200)}
.sn-orig .pellet-valores strong{display:block;font-family:var(--font-display);font-size:21px;
  font-weight:800;color:var(--navy)}
.sn-orig .pellet-valores span{display:block;margin-top:4px;font-size:12.5px;color:#54646F}
@media (max-width:900px){
  .sn-orig .pellet-valores{grid-template-columns:repeat(2,1fr);gap:14px 18px;padding-top:18px}
  .sn-orig .pellet-valores strong{font-size:18px}
  .sn-orig .pellet-stage{gap:18px}
}

/* [v5 · 1-sep] Adrián: la animación debe verse CON el titular en pantalla. La cabecera pasa dentro
   del bloque fijo y el conjunto se ajusta a la ventana: el lienzo manda su altura y conserva su
   proporción (si cambiara, los rótulos —colocados en %— se desalinearían de las líneas del SVG). */
.sn-orig .pellet-stage{height:calc(100svh - 120px);justify-content:center;gap:18px}
.sn-orig .pellet-stage .section-header{margin:0;flex:0 0 auto}
.sn-orig .pellet-stage .section-header h2{margin:10px 0 10px}
.sn-orig .pellet-stage .section-header p{margin:0;max-width:62ch}
.sn-orig .pellet-lienzo{flex:1 1 auto;min-height:0;height:100%;width:auto;aspect-ratio:1200/660;margin:0 auto}
.sn-orig .pellet-valores{flex:0 0 auto;padding-top:18px}
@media (max-width:900px){
  .sn-orig .pellet-stage{height:calc(100svh - 96px);gap:12px}
  .sn-orig .pellet-stage .section-header h2{font-size:clamp(22px,6vw,30px)}
  .sn-orig .pellet-stage .section-header p{display:none}   /* en móvil no cabe: manda el titular */
}

/* ══ [v6 · 1-sep] El módulo del pellet replica la lámina del dossier (pág. 9) ══
   Todas las coordenadas salen de MEDIR pelet.jpg (2400x1350) y dividir por 2: el viewBox es
   1200x675 y la foto recortada se coloca en el sitio exacto que ocupa dentro de aquel marco
   (resuelto casando la silueta: escalas x/y coinciden al 0,04 %). Trazo 1,75 u = los 3,5 px
   del original. Iconos: los del dossier, vectorizados por contorno (IoU 0,86-0,88), no
   redibujados a ojo. Textos como <text> del SVG: escalan con el resto —así se mantiene igual
   a cualquier tamaño— y siguen siendo texto de verdad, traducible. */
.sn-orig .pellet-lienzo{aspect-ratio:1200/675}
.sn-orig .pellet-svg{position:absolute;inset:0;width:100%;height:100%}
.sn-orig .pellet-svg .tr polyline{fill:none;stroke:var(--lime);stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--largo);stroke-dashoffset:calc(var(--largo) * (1 - var(--p,0)))}
.sn-orig .pellet-svg .tr circle{fill:none;stroke:var(--lime);stroke-width:1.75}
.sn-orig .pellet-svg .tr .grande{opacity:calc(var(--p,0) * 5)}          /* el ancla, primero */
.sn-orig .pellet-svg .tr .aro:not(.grande){opacity:calc((var(--p,0) - .82) * 6)}  /* cierra al llegar */
.sn-orig .pellet-svg .rot .ico{fill:var(--navy);opacity:var(--pi,0)}
.sn-orig .pellet-svg .rot text{fill:var(--navy);opacity:var(--pt,0)}
.sn-orig .pellet-svg .cifra{font-family:var(--font-display);font-weight:600;font-size:28.5px}
.sn-orig .pellet-svg .etiq{font-family:var(--font-display);font-weight:400;font-size:22px}
@media (prefers-reduced-motion:reduce){
  .sn-orig .pellet-svg .tr polyline{stroke-dashoffset:0}
  .sn-orig .pellet-svg .tr circle,.sn-orig .pellet-svg .rot .ico,.sn-orig .pellet-svg .rot text{opacity:1}
}
/* Móvil: a esa escala los rótulos del dossier serían ilegibles (8 px). Se cae a la lámina
   sin anotar y los cuatro números quedan en .pellet-valores, justo debajo. */
@media (max-width:900px){
  .sn-orig .pellet-svg{display:none}
  .sn-orig .pellet-stage{position:static;height:auto}
  .sn-orig .pellet-lienzo{aspect-ratio:1400/988;height:auto;width:100%;flex:0 0 auto}
  .sn-orig .pellet-foto{position:static;left:auto;top:auto;width:100%;transform:none}
}

/* ══ [v7 · 1-sep] Tres arreglos ══
   1) Cuerpo de los rótulos del pellet DEDUCIDO, no elegido: la altura de tinta del dígito en el
      dossier es 19,75 u y en Plus Jakarta Sans el dígito mide 0,769 em -> 25,7 u. Igual la
      etiqueta: mayúscula de 14,75 u -> 19,2 u. A esos cuerpos los anchos casan con el original
      dentro de ±3 % (el kWh/kg, -7 %: el original lleva un espacio más ancho).
   2) La bajada tenía el texto centrado pero la caja pegada a la izquierda del titular: se veía
      descentrada. margin-inline:auto y ya.
   3) El acento de los titulares vuelve a ser lima. --lime-dark bajó hoy a #6E7712 para que el
      texto PEQUEÑO que lo usa (.section-label, subtítulos, eyebrows) pasara AA 4,5:1; pero en un
      titular de 55 px el listón es 3:1, así que ahí puede ser más claro. #8A9420 = 3,31:1: pasa
      y se lee lima, no oliva. El token pequeño NO se toca. */
/* [v9 · 1-sep] Adrián: el acento de los titulares es el LIMA de marca, #B6C12B. Queda dicho el
   dato para que conste, no para discutirlo: sobre blanco da 1,97:1 y el listón de texto grande
   es 3:1 — pasa en los titulares sobre fondo navy (Trayectoria), no sobre blanco. Decisión suya,
   tomada dos veces. El token de texto PEQUEÑO (--lime-dark #6E7712, 4,87:1) no se toca: ahí sí
   sería ilegible. */
.sn-orig{--lime-titular:var(--lime)}
.sn-orig .section-header h2 em,.sn-orig .pellet-banda-head h3 em,.sn-orig .proyecto-texto h2 em{color:var(--lime-titular)}
.sn-orig .pellet-stage .section-header p{margin-inline:auto}
.sn-orig .pellet-svg .cifra{font-size:25.7px}
.sn-orig .pellet-svg .etiq{font-size:19.2px}

/* [v8 · 1-sep] La colocación medida de la foto pasa a variables: el estilo inline le ganaba a la
   regla de móvil (por especificidad) y la lámina se quedaba al 65 % en una esquina. Con custom
   properties la cascada vuelve a mandar y no hace falta ningún !important. */
.sn-orig .pellet-foto{position:absolute;left:var(--foto-x);top:var(--foto-y);width:var(--foto-w)}
@media (max-width:900px){
  .sn-orig .pellet-foto{position:static;left:auto;top:auto;width:100%}
}

/* [v10 · 1-sep] La cabecera entra con el mismo avance de scroll que el resto de la escena. Antes
   se revelaba con la banda —que asoma una pantalla antes— y al llegar a su sitio ya estaba puesta:
   parecía que no se animaba. Escalonado etiqueta → titular → bajada. Por defecto 1, así que sin JS
   (o con reduced-motion) se ve entera y quieta. */
.sn-orig .pellet-stage .section-header>*{opacity:var(--e,1);transform:translateY(calc((1 - var(--e,1)) * 16px))}
.sn-orig .pellet-stage .section-header .section-label{--e:var(--e1,1)}
.sn-orig .pellet-stage .section-header h2{--e:var(--e2,1)}
.sn-orig .pellet-stage .section-header p{--e:var(--e3,1)}
@media (prefers-reduced-motion:reduce){
  .sn-orig .pellet-stage .section-header>*{opacity:1;transform:none}
}

/* [v11 · 1-sep] Adrián: los cuatro valores del pie, más grandes. 21 -> 28 px; caben de sobra
   (el más largo, «≥ 4,6 kWh/kg», mide 177 px en una columna de ~275). */
.sn-orig .pellet-valores strong{font-size:28px}
.sn-orig .pellet-valores span{font-size:13.5px;margin-top:6px}
@media (max-width:900px){
  .sn-orig .pellet-valores strong{font-size:22px}
  .sn-orig .pellet-valores span{font-size:12.5px}
}

/* [v13 · 1-sep] Adrián: «¿subimos el formulario a la altura de Hablemos?». El encabezado estaba en
   una FILA aparte, encima de la rejilla, así que la tarjeta del formulario empezaba 211 px más
   abajo. Arreglo estructural: el encabezado pasa DENTRO de la primera columna de .contact-grid, y
   así la tarjeta arranca a la altura del rótulo. En móvil la rejilla ya cae a una columna y el
   orden sigue siendo encabezado → datos → formulario.
   Se reproduce aquí la tipografía que daba .section-header (medida en el navegador antes de
   moverlo: 50/55 px, -1 px de tracking; bajada 18/1,7 con 600 px de ancho máximo), porque esas
   reglas no pueden viajar: .section-header p habría pisado los párrafos de .contact-info. */
.sn-orig .contact-grid .contacto-titular{font-family:var(--font-display);
  font-size:clamp(32px,4.5vw,50px);font-weight:700;color:var(--navy);
  letter-spacing:-1px;line-height:1.1;margin:0 0 16px}
.sn-orig .contact-grid .contacto-bajada{margin:0 0 44px}
.sn-orig .contact-grid .contacto-bajada p{font-size:18px;line-height:1.7;color:#54646F;
  max-width:600px;margin:0}
@media (max-width:900px){
  .sn-orig .contact-grid .contacto-bajada{margin:0 0 32px}
}

/* ════════════════════════════════════════════════════════════════════════════════════
   [v14 · 1-sep-2026] PASADA DE MÓVIL. Todo lo de aquí sale de MEDIR en 390x844, no de
   mirar. El detalle de cada medición, en el comentario de cada bloque.
   ════════════════════════════════════════════════════════════════════════════════════ */

/* 1) 🔴 EL GRAVE: en móvil el FORMULARIO se salía de la pantalla y se cortaban Empresa,
   Teléfono, los dos selectores y el botón de enviar. La cuenta: 48+48 px de padding del
   uk-container + 40+40 de la tarjeta = 176 px de los 390 disponibles, y dentro una rejilla
   de dos columnas que pide ~308. Medido: scrollWidth 486 contra 390 de ventana.
   En un móvil el formulario ES la conversión: esto no era un detalle estético. */
@media (max-width:900px){
  .sn-orig .contact-section .uk-container{padding-left:16px!important;padding-right:16px!important}
  .sn-orig .contact-form,.sn-orig .contact-grid > .contact-form{padding:22px 18px!important}
  .sn-orig .contact-form .wpforms-field-container{grid-template-columns:1fr;gap:0}
  .sn-orig .contact-form .wpforms-field.wpforms-one-half{grid-column:1/-1}
}

/* 2) Hero legible. El velo era `to right` —pensado para el texto a la izquierda en
   escritorio—; en móvil el texto ocupa todo el ancho y cae sobre el saco BLANCO del vídeo.
   Medido ocultando el texto y leyendo el fondo: bajo el titular el 43 % de los píxeles
   quedaba por debajo de 4,5:1, con el peor punto en 1,37:1 (y la palabra en lima, 1,07:1).
   Velo vertical calculado, no elegido a ojo: sobre un fondo casi blanco, alfa 0,45 de
   #072E43 da 3,1:1 (el listón del titular de 36 px es 3:1) y alfa 0,62 da 4,6:1 (el de la
   bajada de 16 px). Se deja el cielo del vídeo limpio arriba y se oscurece de la mitad
   hacia abajo, que es donde vive el texto. */
@media (max-width:900px){
  /* Los topes van sobre la caja del VELO, que empieza 152 px por debajo del borde de la
     ventana (la barra de navegación): en coordenadas del velo el titular cae en el 23-32 %
     y la bajada en el 34-44 %, no en el 41-62 % que dan las coordenadas de pantalla. Con el
     mapeo mal la alfa efectiva bajo el titular era 0,27 en vez de 0,54 — medido en el píxel:
     rgb(188,190,190). Alfa 0,53 sobre blanco puro = 3,3:1 (titular) y 0,66 = 4,8:1 (bajada). */
  .sn-orig .hero-overlay{background:linear-gradient(to bottom,
    rgba(7,46,67,.18) 0%, rgba(7,46,67,.30) 14%, rgba(7,46,67,.52) 20%,
    rgba(7,46,67,.64) 32%, rgba(7,46,67,.68) 38%, rgba(7,46,67,.72) 72%,
    rgba(7,46,67,.76) 100%)}
  .sn-orig .hero-trust-text span{font-size:12px;color:rgba(255,255,255,.85)}
}

/* 3) Tarjetas de MERCADOS. Sí tenían velo, pero llegaba a 0,55 sólo en el borde de abajo y
   se apagaba al 28 % de la altura — justo por debajo del texto. Resultado medido: el titular
   y la bajada de «Grandes superficies» caen sobre los sacos blancos del lineal, casi
   invisibles. Se extiende el degradado para que toda la banda de texto vaya a 0,62 o más.
   Va sin media query: el problema es del degradado, no del ancho, y en escritorio pasa igual. */
.sn-orig .market-card-overlay{background:linear-gradient(to top,
  rgba(7,46,67,.88) 0%, rgba(7,46,67,.74) 34%, rgba(7,46,67,.42) 58%,
  rgba(7,46,67,.14) 78%, rgba(7,46,67,0) 100%)}

/* 4) Rejillas con párrafo dentro que en móvil se quedaban a DOS columnas de 145-167 px: el
   texto caía a 6-7 caracteres por línea (medido: un <p> de la why-card con 89 px de caja).
   Pasan a una columna. Las de cifra corta (stats-grid, pellet-valores, impact-grid) se
   quedan a dos, que ahí funciona y ahorra scroll. */
@media (max-width:640px){
  .sn-orig .why-grid{grid-template-columns:1fr;gap:14px}
  .sn-orig .process-steps{grid-template-columns:1fr;gap:14px}
  .sn-orig .ods-grid{grid-template-columns:1fr;gap:14px}
}

/* 5) Objetivos de toque. El correo (114x21), el teléfono (93x21) y LinkedIn (55x22) medían
   21 px de alto: con el dedo no se aciertan, y en un móvil el teléfono es LA acción. Se
   agranda la zona sensible con un pseudo-elemento para NO mover el subrayado lima ni
   cambiar el aspecto. 44 px es el mínimo de Apple y de las WCAG 2.2. */
@media (max-width:900px){
  .sn-orig .contact-info a,.sn-orig a[href="/especificaciones/"]{position:relative}
  .sn-orig .contact-info a::after,.sn-orig a[href="/especificaciones/"]::after{
    content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
    height:44px;pointer-events:auto}   /* left/right a 0: con -6px la zona sobresalía del <p> y lo desbordaba 6 px */
  .sn-orig .contact-info a{-webkit-tap-highlight-color:rgba(182,193,43,.3)}
}

/* 6) El `.uk-container` del tema es content-box con width:100%, así que en móvil medía
   390 de contenido + 32 de padding = 422, y el `margin:auto` se resolvía en -32px para
   compensar: 32 px de contenido cortados en dos secciones. Se pasa a border-box SOLO en
   móvil; en escritorio se deja como está (allí el contenedor mide 1376 y cabe de sobra,
   y cambiarlo estrecharía el diseño 96 px). */
@media (max-width:900px){
  .sn-orig .uk-container{box-sizing:border-box}
}

/* 7) 72 px de blanco encima del logo en móvil. `.tm-page` lleva padding-top:72px para
   compensar la barra de navegación FIJA de escritorio; en móvil la cabecera de YOOtheme
   (.tm-header-mobile) va en flujo, así que ese hueco era espacio muerto — y en un móvil
   los primeros 72 px son lo más caro que hay. Solo se toca por debajo de 960, donde la
   barra fija de escritorio ya no existe. Arreglado en el ORIGEN (sn-marca.php), no con un
   !important encima: allí la regla pasó a `@media (min-width:960px)`. */

/* 8) Los enlaces del menú móvil medían 34 px de alto. 44 es el mínimo de Apple y de las
   WCAG 2.2: se les da aire vertical, que además hace el menú más fácil de leer. */
@media (max-width:959px){
  .uk-offcanvas-bar .uk-nav.uk-nav-default>li>a,
  #tm-dialog-mobile .uk-nav.uk-nav-default>li>a{min-height:46px;padding:11px 0;
    display:flex;align-items:center;font-size:17px;line-height:1.2}
}

/* 9) La etiqueta «ODS» quedaba a 10 px: es lo único que bajaba de 12 en toda la página. */
@media (max-width:900px){
  .sn-orig .ods-label{font-size:11px}
}

/* 10) Cifras que se partían en móvil: la «t» de «40.000 t» caía sola a la segunda línea, y
   «10–15 días» dejaba «días» descolgado. En los dos casos la culpa era el PADDING, no el cuerpo:

   · .stats-bar tenía 48 px de padding -> de los 390 quedaban columnas de 131, y «10–15 días»
     necesita 170 px a 34. Con 20 px de padding y 18 de gap la columna pasa a 166.
   · .impact-card tenía 32 px por lado: 64 de los 157 px de la tarjeta eran padding y al texto
     le quedaban 93, cuando «40.000 t» pide 125 a 28 px. Con 14 la caja pasa a 129.

   El cuerpo va en clamp() calculado, no elegido: el texto más largo mide 5,0 × el cuerpo (stats)
   y 4,46 × el cuerpo (impacto), así que se fija el máximo que cabe en la columna a cada ancho.
   Y `nowrap` se DESACTIVA por debajo de 360 px: ahí ya no cabe, y partir es mejor que desbordar. */
@media (max-width:900px){
  .sn-orig .stats-bar{padding:40px 20px}
  .sn-orig .stats-grid{gap:18px}
  .sn-orig .stats-grid .stat h3{font-size:clamp(24px,7.7vw,30px);white-space:nowrap}
  .sn-orig .impact-card{padding:24px 14px}
  .sn-orig .impact-card h3{font-size:clamp(22px,7.2vw,28px);white-space:nowrap}
}
@media (max-width:360px){
  .sn-orig .stats-grid .stat h3,.sn-orig .impact-card h3{white-space:normal}
}

/* 11) LÍNEA TEMPORAL en móvil. Medido: cada .tl-item ocupaba 340 px con 72 de contenido
   —268 px muertos por hito, 3.060 px de bloque— porque el `min-height:340px` que puse para
   que la línea de 9 hitos no rompiera en ESCRITORIO no estaba acotado por ancho y también
   caía aquí.
   Y ya que estaba, se replantea la presentación, que era lo que fallaba de verdad: en un
   móvil una tarjeta colgando de una línea vertical no aporta nada (la línea no puede
   alternar arriba/abajo, que es su gracia en escritorio). Pasa a **año | hecho**: el año en
   su columna, el hito y el detalle a la derecha, separadores finos para poder barrer con la
   vista y un raíl lima fino a la izquierda que mantiene la lectura de cronología. Nueve
   hitos entran en ~650 px en vez de 3.060, y se leen de un pasada. */
@media (max-width:900px){
  .sn-orig .tl{display:block;min-height:0;padding:0 0 0 16px;margin-top:24px;position:relative}
  .sn-orig .tl::before{display:block;left:2px;right:auto;top:8px;bottom:8px;width:2px;height:auto;
    background:linear-gradient(180deg,var(--lime,#B6C12B),rgba(182,193,43,.22))}
  .sn-orig .tl-item{min-height:0;padding:13px 0 13px 14px;display:grid;
    grid-template-columns:54px 1fr;column-gap:12px;align-items:start;
    border-top:1px solid var(--gray-200)}
  .sn-orig .tl-item:first-child{border-top:0;padding-top:0}
  .sn-orig .tl-item::after{display:none}
  .sn-orig .tl-dot{display:none}
  .sn-orig .tl-card{display:contents}
  .sn-orig .tl-anno{grid-column:1;grid-row:1 / span 2;font-size:17px;line-height:1.35}
  .sn-orig .tl-card h4{grid-column:2;grid-row:1;margin:0 0 2px;font-size:15px;line-height:1.3}
  .sn-orig .tl-card p{grid-column:2;grid-row:2;margin:0;font-size:13px;line-height:1.4}
}

/* 12) GAMA maquetada como el dossier (pág. 10). Adrián: «maquetemos esto igual que el dossier,
   porque hay información que causa confusión si no» · «no usemos caja en las fotos, así los
   sacos quedan más grandes» · «solo mantenemos el título Marcas y formatos».

   Qué causaba la confusión: la web decía el peso TRES veces y mezclaba dos ejes en el mismo
   badge («Con asa · 10 kg», «Premium · 15 kg» — asa, gama y peso revueltos). El dossier lo
   separa limpio: marca -> peso -> una línea de para-qué -> y el sello CON ASA solo donde
   existe (los de 10 kg). Eso es lo que se ha traído.

   Medidas copiadas del dossier, no inventadas: foto en caja de altura fija alineada ABAJO (así
   los cuatro sacos comparten línea de suelo), marca 700 en navy, peso 800 en LIMA a 1,36× la
   marca, para-qué a 0,76×, y el sello lima con texto navy #072E43 (que además da 5,5:1; el
   blanco sobre lima daría 1,97). Fuera la caja gris y el marco blanco: el saco va sobre el
   fondo de la página y se ve bastante más grande con la misma altura. */
/* [v13] vuelve la bajada: es el copy del dossier y es el que vende (el asa troquelada). */
.sn-orig .formatos-head p{max-width:74ch;font-size:16px;line-height:1.7;color:#54646F}
@media (max-width:640px){ .sn-orig .formatos-head p{font-size:15px} }
.sn-orig .gama-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 20px;
  max-width:1280px;margin:44px auto 0}
.sn-orig .gama-ref{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.sn-orig .gama-foto{width:100%;height:400px;display:flex;align-items:flex-end;justify-content:center}
.sn-orig .gama-foto img{max-height:400px;max-width:100%;width:auto;height:auto;display:block}
.sn-orig .gama-ref figcaption{display:flex;flex-direction:column;align-items:center}
.sn-orig .gama-marca{font-family:var(--font-display);font-weight:700;font-size:20px;
  color:var(--navy);margin-top:24px;line-height:1.2}
.sn-orig .gama-peso{font-family:var(--font-display);font-weight:800;font-size:27px;line-height:1;
  color:var(--lime);margin-top:5px}
.sn-orig .gama-rol{font-size:14px;color:#5B7080;line-height:1.45;max-width:25ch;margin-top:10px}
.sn-orig .gama-asa{display:inline-block;background:var(--lime);color:#072E43;font-size:11px;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 13px;
  border-radius:999px;margin-top:12px}
@media (max-width:1000px){
  .sn-orig .gama-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}
  .sn-orig .gama-foto,.sn-orig .gama-foto img{height:340px;max-height:340px}
}
@media (max-width:640px){
  .sn-orig .gama-grid{gap:28px 14px;margin-top:28px}
  .sn-orig .gama-foto,.sn-orig .gama-foto img{height:210px;max-height:210px}
  .sn-orig .gama-marca{font-size:16px;margin-top:16px}
  .sn-orig .gama-peso{font-size:22px}
  .sn-orig .gama-rol{font-size:12.5px;margin-top:7px}
  .sn-orig .gama-asa{font-size:10px;padding:4px 10px;margin-top:9px}
}

/* [v14] Adrián: el título de la gama, grande. Sube de 28 px al mismo tamaño que los titulares
   de sección del sitio (clamp 30-46), con el mismo tracking cerrado. */
.sn-orig .formatos-head h3{font-family:var(--font-display);font-size:clamp(30px,4.2vw,46px);
  font-weight:700;letter-spacing:-1px;line-height:1.1;color:var(--navy);margin-bottom:16px}
.sn-orig .formatos-head{margin-top:96px}
@media (max-width:640px){ .sn-orig .formatos-head{margin-top:56px} }

/* [v15] Adrián: título y copy de la gama, centrados. Y es lo coherente con la propia página, no
   solo gusto: de las 9 cabeceras de sección, las 4 que ya van centradas son justo las que se
   apoyan en una rejilla simétrica (pellet, «Por qué elegir», «Del bosque a tu hogar», FAQ), y las
   5 alineadas a la izquierda encabezan bloques asimétricos o de texto. La gama es una rejilla de
   cuatro columnas centrada: pertenece a la primera familia.
   ⚠️ El párrafo necesita `margin-inline:auto` además del `text-align`: con la caja limitada a
   74ch y pegada a la izquierda, el texto sale centrado dentro de una caja descentrada — el mismo
   fallo que tenía la bajada del bloque de contacto. */
.sn-orig .formatos-head{text-align:center}
.sn-orig .formatos-head p{margin-inline:auto}

/* [v16] «formatos» en lima. Se suma a la familia de acentos de titular del sitio, que ya usan
   itálica + --lime-titular (.section-header h2 em, .pellet-banda-head h3 em, .proyecto-texto
   h2 em): mismo mecanismo, no un color suelto para este bloque. */
.sn-orig .formatos-head h3 em{font-style:italic;color:var(--lime-titular)}

/* [v17] Adrián: los tres subtítulos de «Quiénes somos», más grandes. Estaban a 16 px con un
   párrafo de 15 —un punto de diferencia— y por eso se leían planos, sin jerarquía. Se llevan al
   tamaño que el sitio YA usa para este tipo de subtítulo (20/700, el de .contact-info h3 y
   .formato-extra h3): 20 sobre 15 da una relación de 1,33 y se distingue de un golpe de vista.
   No es una medida nueva: es la que había. */
.sn-orig .about-text h3{font-family:var(--font-display);font-size:20px;font-weight:700;
  line-height:1.25;color:var(--navy);margin-bottom:10px}
.sn-orig .about-text h3:not(:first-child){margin-top:30px}
@media (max-width:640px){
  .sn-orig .about-text h3{font-size:18px;margin-bottom:8px}
  .sn-orig .about-text h3:not(:first-child){margin-top:24px}
}

/* [v18] Corrección de itálica. Adrián: «el más queda muy pegado después de biomasa». No falta el
   espacio: la última letra de una itálica se inclina hacia la derecha y se COME el espacio óptico
   de la palabra siguiente. En tipografía tiene nombre propio —italic correction, el `\/` de TeX— y
   se arregla con un pelo de espacio a la derecha del acento, no tocando el texto.
   0,06 em: a 46 px son 2,8 px. ⚠️ Va con clase `.ic`, NO a todos los acentos: la corrección de
   itálica se aplica cuando sigue una LETRA, nunca antes de coma o punto (regla clásica: la coma
   es baja y no choca con el vuelo de la itálica). Medido al ponerlo global: en «se miden,» la coma
   se separaba 3 px de la palabra. Hoy solo la lleva «biomasa», que es el único acento seguido de
   palabra; «formatos» va al final y «se miden» lleva coma detrás. */
.sn-orig h1 em.ic,.sn-orig h2 em.ic,.sn-orig h3 em.ic{padding-right:.06em}

/* ══ [v19] «Cuatro formatos disponibles» de /especificaciones/ ══
   Adrián: «esto no quedó bien maquetado». Cuatro cosas, todas medidas:

   1) 🔴 EL FALLO: las tarjetas tenían `padding: 36px 28px 36px 0` — cero por la izquierda. La
      causa es una regla global mía, `.sn-orig .uk-grid>*{padding-left:0}`, puesta para matar la
      sartén de UIkit; pero AQUÍ la tarjeta ES la columna (class="uk-width-1-1 why-card"), así que
      le borraba su propio padding y el texto se pegaba al borde. Se restaura para cualquier
      tarjeta que haga de columna, no solo para estas: si vuelve a pasar en otra página, ya está.
   2) Iconos a 30 px en una tarjeta de 258: se quedaban en anécdota. A 40.
   3) 104 px entre la bajada y las tarjetas (64 del margen de la cabecera + 40 de la fila de
      UIkit, sumados). Se quita el de la fila: queda el ritmo de 64 del resto del sitio.
   4) Las dos notas al pie iban centradas mientras el bloque entero va a la izquierda. */
.sn-orig .uk-grid > .why-card,.sn-orig .uk-grid > .impact-card,
.sn-orig .uk-grid > .formato-extra,.sn-orig .uk-grid > .cert-card{padding-left:28px}
.sn-orig .why-card.sn-card-izq img{width:40px!important;height:40px!important}
.sn-orig .why-card.sn-card-izq h4{font-size:22px;margin-bottom:4px}
.sn-orig .uk-grid-margin:has(> .why-card.sn-card-izq){margin-top:0}
.sn-orig .formato-nota p,.sn-orig p.formato-nota-tecnica{text-align:left}
@media (max-width:900px){
  .sn-orig .uk-grid > .why-card,.sn-orig .uk-grid > .impact-card,
  .sn-orig .uk-grid > .formato-extra,.sn-orig .uk-grid > .cert-card{padding-left:22px;padding-right:22px}
  .sn-orig .why-card.sn-card-izq h4{font-size:19px}
}

/* ══ [v20] Páginas legales (aviso legal · privacidad · cookies) ══
   Montadas con la plantilla de Koolbrand y los datos registrales de BSG. Son documentos largos:
   necesitan medida de lectura acotada, jerarquía clara entre los apartados numerados y tablas que
   se puedan leer. Ancho de 78ch ≈ 75 caracteres por línea, que es la horquilla de lectura cómoda. */
.sn-orig .legal-doc h1{font-family:var(--font-display);font-size:clamp(30px,4vw,44px);font-weight:700;
  letter-spacing:-1px;line-height:1.1;color:var(--navy);margin:0 0 28px}
.sn-orig .legal-doc h2{font-family:var(--font-display);font-size:21px;font-weight:700;color:var(--navy);
  margin:44px 0 12px;padding-top:20px;border-top:1px solid var(--gray-200)}
.sn-orig .legal-doc h2:first-of-type{border-top:0;padding-top:0}
.sn-orig .legal-doc h3{font-family:var(--font-display);font-size:16px;font-weight:700;
  color:var(--navy);margin:26px 0 8px}
.sn-orig .legal-doc p,.sn-orig .legal-doc li{font-size:15.5px;line-height:1.75;color:#54646F}
.sn-orig .legal-doc p{margin:0 0 14px;max-width:78ch}
.sn-orig .legal-doc ul{margin:0 0 18px;padding-left:22px;max-width:78ch}
.sn-orig .legal-doc li{margin-bottom:7px}
.sn-orig .legal-doc strong{color:var(--navy);font-weight:700}
.sn-orig .legal-doc a{color:var(--navy);font-weight:600;border-bottom:1px solid var(--lime);
  text-decoration:none}
.sn-orig .legal-doc a:hover{color:var(--lime-dark)}
.sn-orig .legal-doc code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;
  background:var(--off-white,#F7F8F3);padding:2px 6px;border-radius:5px;color:var(--navy)}
.sn-orig .legal-doc .legal-intro{font-size:17px;color:var(--navy);font-weight:600;margin-bottom:22px}
.sn-orig .legal-doc .legal-fecha{margin-top:40px;padding-top:18px;border-top:1px solid var(--gray-200);
  font-size:13.5px;color:#7A8A96}
.sn-orig .legal-doc .legal-tabla{width:100%;max-width:900px;border-collapse:collapse;margin:6px 0 20px;
  font-size:14px}
.sn-orig .legal-doc .legal-tabla th{text-align:left;background:var(--off-white,#F7F8F3);
  color:var(--navy);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;
  padding:11px 14px;border-bottom:2px solid var(--gray-200)}
.sn-orig .legal-doc .legal-tabla td{padding:12px 14px;border-bottom:1px solid var(--gray-200);
  vertical-align:top;color:#54646F;line-height:1.6}
@media (max-width:900px){
  .sn-orig .legal-doc h2{font-size:19px;margin-top:34px}
  .sn-orig .legal-doc p,.sn-orig .legal-doc li{font-size:15px}
  /* las tablas no se aplastan: se desplazan dentro de su caja */
  .sn-orig .legal-doc .legal-tabla{display:block;overflow-x:auto;white-space:nowrap}
  .sn-orig .legal-doc .legal-tabla td,.sn-orig .legal-doc .legal-tabla th{white-space:normal;min-width:150px}
}

/* [v21] El título salía DOS veces: el del tema (h1.uk-article-title) y el que traía el contenido.
   Se quita el del contenido —el semántico es el del tema— y se le da a ese el aspecto del
   documento, en navy y con el tracking de los titulares del sitio. */
.sn-legal .uk-article-title{font-family:var(--font-display);font-size:clamp(30px,4vw,44px);
  font-weight:700;letter-spacing:-1px;line-height:1.1;color:var(--navy);margin:0 0 26px}
.sn-legal .legal-doc{margin-top:0}

/* ══ [v22] El menú móvil, siempre a mano ══
   Adrián: «el menú en móvil siempre debería ser accesible, ¿no? sticky». Sí: la cabecera de
   YOOtheme va en flujo (position:relative), así que en una página de 19.000 px desaparecía en la
   primera pantalla y el resto del recorrido se hacía sin navegación.
   Se usa `sticky` y no `fixed` a propósito: sticky NO saca el elemento del flujo, así que no hay
   que compensar su altura con padding —el error que ya arrastraba `.tm-page` en escritorio— y no
   se produce ningún salto al cargar.
   La barra baja de 80 a 62 px al desplazarse: en una ventana de 844 px, 80 fijos se comen el 9,5 %
   de pantalla en todo el recorrido. El logo acompaña. z-index 980: por debajo del offcanvas del
   propio menú (que en UIkit va a 1000) y por encima del contenido. */
@media (max-width:959px){
  /* `.tm-header-mobile` a secas NO gana: el tema declara lo mismo y su hoja carga después.
     Se sube la especificidad con el padre (2 clases + hijo directo), sin !important. */
  .tm-page > .tm-header-mobile{position:sticky;top:0;z-index:980}
  /* Adrián: «que ese sticky menu tenga un poco de transparencia». 0,78 de blanco con desenfoque:
     se ve pasar el contenido por detrás y el texto sigue holgado de contraste — sobre una foto
     oscura el navy del menú queda en 7,4:1, muy por encima del 4,5 exigible. El desenfoque sube a
     14 px para que lo que pase por debajo no compita con los rótulos. */
  /* con `.tm-header-mobile .uk-navbar-container` (2 clases) el tema empataba y ganaba por orden
     de carga: en reposo se veía blanco opaco y solo al desplazar entraba mi regla de 3 clases.
     Medido: rgb(255,255,255) en y=0 contra rgba(...,.82) al bajar. Se sube con el padre. */
  .tm-page > .tm-header-mobile .uk-navbar-container{background:rgba(255,255,255,.78);
    -webkit-backdrop-filter:saturate(1.7) blur(14px);backdrop-filter:saturate(1.7) blur(14px);
    border-bottom:1px solid rgba(11,64,93,.07);transition:box-shadow .25s ease, background .25s ease}
  html.sn-scrolled .tm-header-mobile .uk-navbar-container{background:rgba(255,255,255,.82)}
  html.sn-scrolled .tm-header-mobile .uk-navbar-container{
    box-shadow:0 4px 18px rgba(11,64,93,.10)}
  .tm-header-mobile .uk-navbar{min-height:80px;transition:min-height .25s ease}
  html.sn-scrolled .tm-header-mobile .uk-navbar{min-height:62px}
  .tm-header-mobile .uk-logo img{transition:width .25s ease}
  html.sn-scrolled .tm-header-mobile .uk-logo img{width:96px!important}
}

/* [v23] La altura de la barra no la manda el min-height del .uk-navbar sino el TOGGLE, al que
   UIkit le pone min-height:80px: medido, el nav bajaba a 62 de min-height y seguía midiendo 80
   porque .uk-navbar-left/-right se estiraban al alto del enlace. Aquí está el que faltaba. */
@media (max-width:959px){
  html.sn-scrolled .tm-header-mobile .uk-navbar-toggle,
  html.sn-scrolled .tm-header-mobile .uk-logo{min-height:62px}
}

/* ══ [v24] La línea de tiempo se monta con el scroll (solo escritorio) ══
   Todo cuelga de `.tl.tl-scroll`, y esa clase la pone el JS: sin JS no hay clase y la línea se ve
   completa. El raíl crece con scaleX desde la izquierda —no con width, que forzaría relayout en
   cada fotograma—; los puntos y las tarjetas entran con su propio `--q`, que el JS calcula según
   la posición del hito: cada uno aparece cuando el raíl le pasa por encima.
   ⚠️ `.tl-dot` ya llevaba `translate(-50%,-50%)`: hay que repetirlo o el punto se descoloca. */
.sn-orig .tl.tl-scroll::before{transform:scaleX(var(--p,1));transform-origin:left center}
.sn-orig .tl.tl-scroll .tl-item{--q:1}
.sn-orig .tl.tl-scroll .tl-dot{transform:translate(-50%,-50%) scale(calc(.45 + .55 * var(--q,1)));
  opacity:var(--q,1)}
.sn-orig .tl.tl-scroll .tl-item::after{opacity:var(--q,1);transform:scaleY(var(--q,1))}
.sn-orig .tl.tl-scroll .tl-item.arriba::after{transform-origin:center bottom}
.sn-orig .tl.tl-scroll .tl-item.abajo::after{transform-origin:center top}
.sn-orig .tl.tl-scroll .tl-card{opacity:var(--q,1);
  transform:translateY(calc((1 - var(--q,1)) * 12px))}
@media (prefers-reduced-motion:reduce){
  .sn-orig .tl.tl-scroll::before{transform:none}
  .sn-orig .tl.tl-scroll .tl-dot{transform:translate(-50%,-50%);opacity:1}
  .sn-orig .tl.tl-scroll .tl-card,.sn-orig .tl.tl-scroll .tl-item::after{opacity:1;transform:none}
}

/* ══ [v25] Banner de consentimiento con la identidad Serranova ══════════════════
   Complianz pinta el banner desde `wp-content/uploads/complianz/css/banner-1-optin.css`, que él
   regenera cada vez que se guarda el diseño: ahí NO se toca nada, porque se pierde. Todo su color
   sale de variables CSS, así que se redefinen aquí y sobreviven a cualquier regeneración.
   Los botones Aceptar y Denegar quedan del MISMO tamaño y en la misma fila (requisito de la AEPD:
   rechazar tiene que costar lo mismo que aceptar; el sólido vs. contorno es jerarquía visual,
   no un obstáculo). Contrastes medidos sobre blanco: texto #334B58 = 9,4:1 · navy #0B405D = 9,6:1
   · «ver preferencias» #54646F = 6,4:1. Todos por encima de AA. */
#cmplz-cookiebanner-container .cmplz-cookiebanner,
#cmplz-cookiebanner-container .cmplz-manage-consent-container{
  --cmplz_banner_background_color:#ffffff;
  --cmplz_banner_border_color:#E5E7EB;
  --cmplz_banner_border_width:1px;
  --cmplz_banner_border_radius:14px;
  --cmplz_text_color:#334B58;
  --cmplz_hyperlink_color:#0B405D;
  /* Aceptar: navy sólido */
  --cmplz_button_accept_background_color:#0B405D;
  --cmplz_button_accept_border_color:#0B405D;
  --cmplz_button_accept_text_color:#ffffff;
  /* Denegar: mismo tamaño, navy en contorno */
  --cmplz_button_deny_background_color:#ffffff;
  --cmplz_button_deny_border_color:#0B405D;
  --cmplz_button_deny_text_color:#0B405D;
  /* Ver preferencias: terciario, sin caja */
  --cmplz_button_settings_background_color:transparent;
  --cmplz_button_settings_border_color:transparent;
  --cmplz_button_settings_text_color:#54646F;
  --cmplz_button_border_radius:10px;
  /* Interruptores de categoría: el lima solo aquí, como acento */
  --cmplz_slider_active_color:#B6C12B;
  --cmplz_slider_bullet_color:#ffffff;
  --cmplz_slider_inactive_color:#C9D0D6;
  --cmplz_category_header_always_active_color:#6E7712;
}
/* El filete lima de la marca, arriba del banner */
#cmplz-cookiebanner-container .cmplz-cookiebanner{
  border-top:3px solid #B6C12B;
  box-shadow:0 12px 32px rgba(11,64,93,.14);
}
/* El enlace de la política, subrayado en lima como en el resto del sitio */
#cmplz-cookiebanner-container .cmplz-links a{
  text-decoration:none;
  border-bottom:1px solid #B6C12B;
}
#cmplz-cookiebanner-container .cmplz-links a:hover{border-bottom-color:#0B405D}

/* ══ [v26] Partners industriales · rejilla 3+2 y logos igualados por masa de tinta ═══════════
   Iván pidió (2-sep-2026) separar el respaldo institucional (Avante · Santander · Dunas) de los
   partners industriales (Knoblinger · Stela · Topling · Boga Técnica · Seeger). Cinco tarjetas en el
   `flex` de `.partners-row` se rompían en 4+1; aquí van en rejilla de 3, que cae en 3+2 y deja sitio
   al texto. Los institucionales siguen en flex: al ser 3, `flex:1` ya los reparte iguales.

   ⚠️ Los anchos de cada logo NO son arbitrarios. Igualar por altura deja diminuto lo que es casi
   cuadrado: Knoblinger a 34 px de alto medía 44 px de ancho frente a 143 px de Topling. Y bajo la
   misma ÁREA, un logo de masa sólida grita más que uno lineal: medida la masa de tinta
   —Σ alpha × (1 − luminancia) sobre #F9FAFB— Stela daba 2,50× la mediana y Knoblinger 1,41×.
   Así que cada logo se escala a sqrt(área)=96 px y luego se compensa a MEDIAS por masa (raíz cuarta:
   corregir del todo dejaba Stela al 63 % y perdía legibilidad). De ahí salen estos anchos exactos. */
.sn-orig .partners-row.partners-ind{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:20px;
  align-items:stretch;
}
.sn-orig .partners-ind .partner{
  min-width:0;
  display:flex;
  flex-direction:column;
  text-align:left;
  padding:24px;
}
.sn-orig .partners-ind .partner p{font-size:13.5px;line-height:1.6}
/* El logo se alinea con el texto, a la izquierda, y manda el ancho —no la altura— */
.sn-orig .partners-ind .partner-logo{
  height:auto;
  min-height:42px;
  justify-content:flex-start;
  margin-bottom:16px;
}
.sn-orig .partners-ind .partner-logo img{max-height:none;height:auto}
.sn-orig .partners-ind .partner-logo img.logo-knoblinger{width:50px}
.sn-orig .partners-ind .partner-logo img.logo-stela{width:73px}
.sn-orig .partners-ind .partner-logo img.logo-termosun{width:126px}
.sn-orig .partners-ind .partner-logo img.logo-boga-tecnica{width:81px}
.sn-orig .partners-ind .partner-logo img.logo-seeger{width:87px}

@media (max-width:900px){
  .sn-orig .partners-row.partners-ind{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:560px){
  .sn-orig .partners-row.partners-ind{grid-template-columns:1fr !important}
}

/* ══ [v27] Los dos bloques de partners se leen como hermanos ═════════════════════════════════
   Al poner el respaldo institucional encima de los industriales quedó a la vista que uno centraba
   el texto y el otro lo alineaba a la izquierda. Con tres y cuatro líneas por tarjeta el centrado
   deja el borde izquierdo irregular y cuesta más de leer, así que ambos van a la izquierda —logo
   incluido, o el logo centrado sobre texto alineado canta todavía más. Cambia el aspecto de un
   bloque que ya estaba montado: si Iván lo prefiere centrado, se quita este bloque y vuelve. */
.sn-orig #about .partners-row .partner{text-align:left}
.sn-orig #about .partners-row .partner-logo{justify-content:flex-start}

/* ══ [v28] PelletsCUBE · el bloque de tecnología dentro de «Proceso» ════════════════════════
   Va al final de la sección oscura, después de los cinco pasos: primero se cuenta el recorrido del
   pellet y luego con qué se hace. El render del PDF de Knoblinger viene con **fondo blanco opaco**
   (en el PDF lo hace transparente una máscara aparte), así que en vez de recortarle el fondo —el
   equipo es gris claro y se habría comido medio esquema— se presenta sobre una tarjeta blanca. Sale
   ganando: contrasta contra el fondo oscuro y se lee como la ficha técnica que es.
   Cuerpo de texto a rgba(255,255,255,.82), el mismo alpha que ya usaba `.process-section p`; sobre
   el navy oscuro de la sección da 9,8:1, muy por encima de AA. Los datos en `strong` van a blanco
   puro para que la primera palabra de cada línea ancle la lectura. */
.sn-orig .cube-block{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:44px;
  align-items:center;
  margin-top:72px;
}
.sn-orig .cube-media{
  background:#fff;
  border-radius:16px;
  padding:26px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sn-orig .cube-media img{width:100%;height:auto;display:block}
.sn-orig .cube-tag{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--lime);
  background:rgba(182,193,43,.15);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:18px;
}
.sn-orig .cube-text h3{
  color:#fff;
  font-size:clamp(24px,2.4vw,32px);
  line-height:1.2;
  margin:0 0 14px;
}
.sn-orig .cube-text p{color:rgba(255,255,255,.82);margin:0 0 22px;max-width:52ch}
.sn-orig .cube-text p strong{color:#fff}
.sn-orig .cube-datos{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sn-orig .cube-datos li{
  position:relative;
  padding-left:22px;
  font-size:14.5px;
  line-height:1.6;
  color:rgba(255,255,255,.82);
}
/* Viñeta lima, alineada con la primera línea del texto y no con la caja */
.sn-orig .cube-datos li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:7px;
  height:7px;
  border-radius:2px;
  background:var(--lime);
}
.sn-orig .cube-datos strong{color:#fff;font-weight:700}

@media (max-width:900px){
  .sn-orig .cube-block{grid-template-columns:1fr;gap:26px;margin-top:52px}
  .sn-orig .cube-media{padding:18px}
}

/* ══ [v29] PelletsCUBE v3 · foto real, logo del sistema y el sello de «primera en España» ═════
   Iván confirma dos datos que antes no teníamos: es la **primera planta de España** con este sistema
   —no «la única», que era indefendible: Knoblinger lo vende en catálogo abierto y su folleto dice
   «more than 55 systems realised»— y el modelo es el **CUBE XL, 5 t/h**. Los dos datos cuadran entre
   sí: 5 t/h × 8.000 h ≈ las 40.000 t/año que ya anunciaba la web.

   La imagen deja de ser el esquema técnico en tarjeta blanca y pasa a ser la planta real a sangre.
   El logo de PelletsCUBE va en **pastilla blanca** por una razón medida, no estética: su «CUBE» es
   gris y «KNOBLINGER» azul oscuro (#1B4B8F), que sobre el navy #072E43 de la sección desaparecerían.
   El sello va relleno de lima con texto navy: 7,2:1 de contraste. */
.sn-orig .cube-block{align-items:stretch}
/* La foto llena su columna y ambas columnas acaban a la misma altura */
.sn-orig .cube-media{
  background:none;
  padding:0;
  border-radius:16px;
  overflow:hidden;
  min-height:320px;
}
.sn-orig .cube-media img{width:100%;height:100%;object-fit:cover;display:block}
.sn-orig .cube-text{display:flex;flex-direction:column;justify-content:center}
/* Logo del sistema + sello, en la misma línea */
.sn-orig .cube-marcas{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.sn-orig .cube-logo{
  display:inline-flex;
  align-items:center;
  background:#fff;
  border-radius:10px;
  padding:10px 14px;
}
.sn-orig .cube-logo img{width:118px;height:auto;display:block}
.sn-orig .cube-primera{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:#072E43;
  background:var(--lime);
  padding:7px 14px;
  border-radius:999px;
}
@media (max-width:900px){
  .sn-orig .cube-media{min-height:240px}
  .sn-orig .cube-logo img{width:104px}
}

/* ══ [v30] Hero de una pantalla, con el vídeo en bucle y el aviso de deslizar ═══════════════
   El hero medía **280vh** («scroll track: controla cuánto scroll dura el video») porque la secuencia
   de 160 fotogramas necesitaba ese recorrido para avanzar. Al pasar a vídeo en bucle ese recorrido ya
   no hace falta: se queda en una pantalla, igual que el móvil, y el scroll cae directo en el contenido.
   Solo con esto la página se acorta dos pantallas de las diecisiete que medía.
   El aviso de deslizar existe porque, sin él, la primera pantalla no dice que haya nada debajo: es lo
   que llevó a dos visitantes a irse al menú y saltarse la historia. Desaparece a los 60 px de scroll,
   en cuanto ha cumplido su función. */
.sn-orig .hero{height:100vh}
.sn-orig #heroCanvas{display:none !important}

.sn-orig .hero-scroll{
  position:absolute;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  z-index:5;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  text-decoration:none;
  color:#fff;
  font-size:12px;
  font-weight:600;
  letter-spacing:.9px;
  text-transform:uppercase;
  text-shadow:0 1px 10px rgba(7,46,67,.55);
  opacity:.92;
  transition:opacity .35s ease, transform .35s ease;
}
.sn-orig .hero-scroll svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  animation:snBote 1.9s ease-in-out infinite;
}
.sn-orig .hero-scroll:hover{opacity:1}
.sn-orig .hero-scroll.is-oculto{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(10px)}
@keyframes snBote{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(6px)}
}
/* Quien pide menos movimiento no ve el bote ni el vídeo en marcha (eso lo decide el JS) */
@media (prefers-reduced-motion:reduce){
  .sn-orig .hero-scroll svg{animation:none}
}
@media (max-width:768px){
  .sn-orig .hero-scroll{bottom:18px;font-size:11px}
}

/* ══ [v31] El hero cabe en pantalla, y asoma lo que viene debajo ═══════════════════════════
   🔴 BUG DE LAYOUT QUE EXPLICA LO QUE OBSERVÓ IVÁN. `.hero-sticky` medía 100vh pero arranca en
   `top:72px`, bajo la cabecera fija: su borde inferior caía 72 px POR DEBAJO del pliegue, y con él el
   `.scroll-indicator` que lleva ahí desde el principio. Medido: el indicador empezaba en y=850 con un
   viewport de 854 y su contenedor acabando en 926. **Nunca se ha visto.** De ahí que dos visitantes
   pensaran que no había nada más y se fueran al menú.

   Ahora el hero mide `100vh − 72px (cabecera) − 110px`, así que: cabe entero bajo la cabecera, el
   indicador queda dentro, y **asoman 110 px de la franja siguiente** —la de «40.000 toneladas/año»—
   que es la que dice sin palabras que la página continúa. Medido: el contenido del hero necesita
   542 px y con un viewport de 854 quedan 672, de sobra; `min-height` protege las pantallas bajas.
   El indicador pasa de `rgba(255,255,255,.5)` —casi invisible sobre el vídeo— a .88 con sombra. */
@media (min-width:769px){
  .sn-orig .hero{height:calc(100vh - 182px);min-height:560px}
  .sn-orig .hero-sticky{height:calc(100vh - 182px);min-height:560px}
}
.sn-orig .scroll-indicator{text-decoration:none;transition:opacity .3s ease,transform .3s ease}
.sn-orig .scroll-indicator span{
  color:rgba(255,255,255,.88);
  text-shadow:0 1px 10px rgba(7,46,67,.6);
}
.sn-orig .scroll-indicator svg{
  stroke:rgba(255,255,255,.88);
  filter:drop-shadow(0 1px 6px rgba(7,46,67,.5));
}
.sn-orig .scroll-indicator:hover span,
.sn-orig .scroll-indicator:hover svg{color:#fff;stroke:#fff}
.sn-orig .scroll-indicator:hover{transform:translateX(-50%) translateY(3px)}
/* En cuanto el visitante ya está bajando, el aviso ha cumplido y se retira */
.sn-orig .scroll-indicator.is-oculto{opacity:0;pointer-events:none}

/* ══ [v32] El mismo arreglo en móvil ══════════════════════════════════════════════════════════
   El bug de [v31] también estaba en móvil, y ahí es donde más va a doler: cabecera de 81 px, hero a
   100vh, y el `.scroll-indicator` **saliéndose 54 px por debajo del pliegue** (medido a 375×812).
   Espacio útil 731 px; el texto del hero ocupa 503 y con el indicador y su aire hacen 599, así que
   sobran 132: se recortan 80 para que asome la franja de cifras y quedan 52 de holgura. */
@media (max-width:768px){
  .sn-orig .hero{height:calc(100vh - 161px);min-height:600px}
  .sn-orig .hero-sticky{height:calc(100vh - 161px);min-height:600px}
}

/* ══ [v33] En móvil el aviso de deslizar pisaba el contenido del hero ═════════════════════════
   La medición decía «indicador dentro de pantalla» y era verdad, pero **al mirarlo** se veía el
   «DESLIZA PARA SABER MÁS» montado encima de «Toda la materia prima»: el contenido del hero está
   centrado verticalmente y su borde inferior caía justo donde vive el indicador, a 32 px del fondo.
   Ninguna métrica de desborde caza un solapamiento; hay que mirar. Se reserva el hueco con padding
   inferior, que sube el contenido en lugar de comprimirlo. */
@media (max-width:768px){
  /* El contenido arranca arriba y el indicador tiene su franja libre abajo: centrado competían */
  .sn-orig .hero-sticky{align-items:flex-start}
  .sn-orig .hero-content{padding-top:28px;padding-bottom:118px}
}

/* ══ [v34] Los sacos de 10 kg se ven más pequeños, porque lo son ═══════════════════════════════
   Iván: «los productos se ven todos iguales; las bolsas miden 50 y 43, deberían mostrar esa
   diferencia». Cierto: los cuatro mockups son 725×900 y el CSS los ponía a la misma altura.
   Comprobado antes de tocar nada que las cuatro fotos son comparables —el saco ocupa 796-811 px de
   alto dentro de cada una, un 88-90 %—, así que escalar la presentación refleja la diferencia real y
   no un encuadre distinto.
   43/50 = 0,86 → los de 10 kg van al 86 % de la altura. Se usa porcentaje y no píxeles para que salga
   solo en escritorio (340 px → 292) y en móvil (210 → 181) sin repetir la regla en cada media query.
   `.gama-foto` mantiene su altura y su `align-items:flex-end`: los sacos se apoyan en la misma línea
   de base y la diferencia se ve por arriba, como dos sacos puestos en el suelo. */
.sn-orig .gama-ref.gama-10kg .gama-foto img{max-width:86%;max-height:86%}
/* ⚠️ Con solo `max-height` no bastaba: medido, la altura de estos mockups la manda el ANCHO de la
   columna (277 px con el contenedor a 400), no la altura, así que el de 10 kg salía a 344 px frente a
   349 del de 15 y la diferencia era invisible. Limitando las dos dimensiones al 86 % funciona sea cual
   sea el lado que ate la imagen en cada breakpoint. */

/* ══ Indicador de scroll del hero · más presencia ══════════════════ 5-sep-2026
   Pedido de Iván: «el desliza para ver más creo que debe destacar un poco más».

   Estaba en 11 px —el cuerpo más pequeño de toda la web— con un rebote de 8 px en 2 s.
   Pero el tamaño no era el problema de fondo: MEDIDO sobre el propio vídeo del hero, el
   fondo detrás del indicador es el musgo iluminado, rgb(183,161,73), y es estable en los
   6,5 s del bucle (muestreado en 7 instantes). El blanco sobre eso da 2,56:1 y el listón
   de texto pequeño es 4,5:1.

   Por qué NO va en lima, que fue la primera idea: el lima #B6C12B tiene luminancia 0,48 y
   el musgo 0,36 — dos claros del mismo registro. Da 1,30:1, la mitad que el blanco actual.
   Habría hecho lo contrario de lo que pide Iván. Es el mismo asunto que el lima de los
   titulares sobre blanco.

   La solución es darle fondo propio, que hace el contraste independiente de la foto:
   navy translúcido con el texto en blanco (6,50:1) y el lima en la flecha, donde sí se ve.
   Radio 10 px, el mismo de los botones del hero (decisión de Adrián: «no tan redondeada,
   más como los botones de arriba»), y navy en vez de lima pleno para no competir con
   «Hablemos», que es el CTA principal. */
.sn-orig .scroll-indicator{background:rgba(7,46,67,.55);border:1px solid rgba(255,255,255,.25);
  border-radius:10px;padding:12px 22px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:scrollBounce 1.6s ease-in-out infinite}
.sn-orig .scroll-indicator span{font-size:13px;font-weight:600;color:#fff}
.sn-orig .scroll-indicator svg{width:26px;height:26px;stroke:#B6C12B}
@keyframes scrollBounce{50%{transform:translateX(-50%) translateY(14px)}}
/* En MÓVIL la píldora entera no cabe: con el texto mide 188×102 y **tapa los dos chips**
   del hero —94 px de solape con «≤ 0,70 % ceniza» y 72 px con «100 km de radio»—, y encima
   va por delante con z-index 3. El solape ya existía antes con el segundo chip, pero era
   pequeño; la caja nueva lo agrandó. Aquí se queda solo la flecha, anclada a la derecha:
   50×46 y cero solape, medido. El texto sobra en un móvil, donde deslizar es el gesto por
   defecto, y el espacio del hero es el más caro que hay. */
@media (max-width:900px){
  .sn-orig .scroll-indicator{left:auto;right:20px;transform:none;padding:10px 12px;gap:0}
  .sn-orig .scroll-indicator span{display:none}
  .sn-orig .scroll-indicator svg{width:24px;height:24px}
  @keyframes scrollBounce{50%{transform:translateY(10px)}}
}


/* ══ [5-sep-2026] Puntos 3 y 4 de Iván · las tarjetas de formato pasan de icono a FOTO ═══════
   «En palet enfundado me gustaría una foto real del palet saliendo de la paletizadora» y «en
   granel una foto de la tobera de carga o de un silo». Van juntas por fuerza: son dos tarjetas
   hermanas en una rejilla de dos columnas, y una con foto y otra con icono queda descompensada.

   La foto entra a sangre en la cabeza de la tarjeta y en CUADRADO. Las dos originales son
   verticales (el palet de Alba, 1108×1419) y un 3:4 dentro de una tarjeta de 400 px daría 530 px
   de alto: la tarjeta se comería la sección. El cuadrado conserva la verticalidad del sujeto sin
   desbordar y es la proporción en la que las dos fotos casan. Medido con las fotos reales, sus
   temperaturas emparejan: R/B 1,20 el palet y 1,24 la del granel.

   `.formato-extra` pierde su padding porque ahora lo pone `.formato-cuerpo`: la foto tiene que
   llegar al borde, y para eso el recorte del radio lo hace `overflow:hidden` en la tarjeta. */
.sn-orig .formato-extra{padding:0;overflow:hidden;display:flex;flex-direction:column}
.sn-orig .formato-extra .formato-foto{
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center;
  background:var(--gray-200,#E6E8E0)}
.sn-orig .formato-extra .formato-cuerpo{padding:24px 28px 30px}
@media (max-width:640px){
  /* en una columna la tarjeta es ancha y el cuadrado se convierte en una banda demasiado alta */
  .sn-orig .formato-extra .formato-foto{aspect-ratio:4/3}
  .sn-orig .formato-extra .formato-cuerpo{padding:20px 22px 26px}
}
/* la regla vieja de las páginas nativas metía el padding por el lado: ahora lo pone el cuerpo */
.sn-orig .uk-grid > .formato-extra{padding-left:0}