/* ════════════════════════════════════════════
           RESET & BASE
        ════════════════════════════════════════════ */
        * { margin:0; padding:0; box-sizing:border-box; }
        html { width:100%; overflow-x:hidden; }
        body {
            width:100%; overflow-x:hidden;
            font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; line-height:1.6; color:#333; padding-top:95px; }

        /* ════════════════════════════════════════════
           HEADER — gris neutro elegante (fijo para las 3 páginas)
        ════════════════════════════════════════════ */
        header {
            background:#242424;
            color:white; padding:0; position:fixed; top:25px; left:0; right:0; width:100%; z-index:2000;
            box-shadow:0 2px 12px rgba(0,0,0,.2);
            border-bottom:2px solid #666;
        }
        .header-container { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; padding:11px 24px; }
        .logo-section { display:flex; align-items:center; gap:14px; cursor:pointer; }
        .logo { font-size:19px; font-weight:700; color:#e0e0e0; letter-spacing:.5px; }
        .logo-text { font-size:13px; color:#888; }
        .mobile-menu-btn { display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:38px; height:34px; background:transparent; border:none; cursor:pointer; padding:0; }
        .mobile-menu-btn span { display:block; width:24px; height:3px; background:#ccc; border-radius:2px; transition:all .25s; }
        body.body-page-home .mobile-menu-btn span, body.body-page-perma .mobile-menu-btn span, body.body-page-faulhaber .mobile-menu-btn span { background:#333; }
        .mobile-menu-btn.active span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
        .mobile-menu-btn.active span:nth-child(2) { opacity:0; }
        .mobile-menu-btn.active span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
        header nav { display:flex; align-items:center; gap:8px; }
        header nav a {
            color:#ccc; text-decoration:none; font-size:12.5px; font-weight:600;
            border-radius:6px; transition:all .25s; letter-spacing:.3px;
            display:inline-flex; align-items:center; justify-content:center;
            height:25px; padding:0 16px; border:2px solid transparent; box-sizing:border-box;
            text-transform:uppercase;
        }
        header nav a:hover { color:#fff; background:rgba(255,255,255,.08); }
        /* Menús desplegables del header (Productos / Industrias) */
        .nav-dropdown { position:relative; }
        .nav-dropdown-toggle { background:transparent; border:2px solid transparent; color:#ccc; font-size:12.5px; font-weight:600; letter-spacing:.3px; height:25px; padding:0 16px; border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:all .25s; text-transform:uppercase; }
        .nav-dropdown-toggle:hover { color:#fff; background:rgba(255,255,255,.08); }
        .nav-dropdown-toggle .nav-caret { font-size:9px; transition:transform .2s; }
        .nav-dropdown.open .nav-dropdown-toggle .nav-caret { transform:rotate(180deg); }
        .nav-dropdown-menu { position:absolute; top:100%; left:50%; margin-top:6px; background:#fff; border:1px solid #e2e2e2; border-radius:8px; overflow:hidden; width:100%; min-width:auto; box-shadow:0 10px 26px rgba(0,0,0,.15); opacity:0; visibility:hidden; transform:translate(-50%,-6px); transition:all .18s; z-index:900; }
        .nav-dropdown.open .nav-dropdown-menu { opacity:1; visibility:visible; transform:translate(-50%,0); }
        .nav-dropdown-menu a { display:block; width:100%; text-align:center; color:#333; font-size:12px; font-weight:600; padding:10px 6px; text-decoration:none; border-radius:0; height:auto; white-space:normal; line-height:1.3; box-sizing:border-box; }
        .nav-dropdown-menu a:hover { background:#f5f5f5; color:#000; }
        body.body-page-home .nav-dropdown-toggle, body.body-page-perma .nav-dropdown-toggle, body.body-page-faulhaber .nav-dropdown-toggle { color:#333; }
        body.body-page-home .nav-dropdown-toggle:hover, body.body-page-perma .nav-dropdown-toggle:hover, body.body-page-faulhaber .nav-dropdown-toggle:hover { color:#000; background:rgba(0,0,0,.06); }
        /* Perma nav pill — rojo sólido (color de marca Perma) */
        .nav-perma { background:#C41E3A; border-color:#C41E3A; color:#fff !important; font-weight:700; }
        .nav-perma:hover { background:#9b0020; border-color:#9b0020; box-shadow:0 4px 12px rgba(180,0,30,.4); }
        /* Faulhaber nav pill — azul sólido (color de marca Faulhaber) */
        .nav-faulhaber { background:#002060; border-color:#002060; color:#fff !important; font-weight:700; }
        .nav-faulhaber:hover { background:#001440; border-color:#001440; box-shadow:0 4px 12px rgba(0,32,96,.5); }
        /* Contacto nav pill — igual que inicio (gris neutro) */
        .nav-contact { color:#ccc !important; border-color:transparent !important; background:transparent !important; }
        .nav-contact:hover { color:#fff !important; background:rgba(255,255,255,.08) !important; border-color:transparent !important; }
        .btn-contact-red { background:#C41E3A; color:white; }
        .btn-contact-red:hover { background:#9b0020; transform:translateY(-2px); box-shadow:0 6px 18px rgba(196,30,58,.4); }
        .nav-active { color:#fff !important; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25) !important; }

        /* Header blanco — Inicio, PERMA y FAULHABER */
        body.body-page-home header, body.body-page-perma header, body.body-page-faulhaber header { background:#fff; border-bottom:2px solid #e2e2e2; box-shadow:0 2px 12px rgba(0,0,0,.08); }
        body.body-page-home .logo, body.body-page-perma .logo, body.body-page-faulhaber .logo { color:#1a1a1a; }
        body.body-page-home .logo-text, body.body-page-perma .logo-text, body.body-page-faulhaber .logo-text { color:#777; }
        body.body-page-home header nav a, body.body-page-perma header nav a, body.body-page-faulhaber header nav a { color:#333; }
        body.body-page-home header nav a:hover, body.body-page-perma header nav a:hover, body.body-page-faulhaber header nav a:hover { color:#000; background:rgba(0,0,0,.06); }
        body.body-page-home .nav-active, body.body-page-perma .nav-active, body.body-page-faulhaber .nav-active { color:#000 !important; background:rgba(0,0,0,.08); border-color:rgba(0,0,0,.15) !important; }
        body.body-page-home .nav-contact, body.body-page-perma .nav-contact, body.body-page-faulhaber .nav-contact { color:#333 !important; }
        body.body-page-home .nav-contact:hover, body.body-page-perma .nav-contact:hover, body.body-page-faulhaber .nav-contact:hover { color:#000 !important; background:rgba(0,0,0,.06) !important; }

        /* Zócalo superior azul con selector de idioma */
        .topbar { background:linear-gradient(90deg,#0d1b2a,#16324a); padding:5px 20px; display:flex; justify-content:center; align-items:center; position:fixed; top:0; left:0; right:0; width:100%; z-index:2001; flex-wrap:wrap; gap:8px; overflow:visible; }
        .topbar-right { display:flex; align-items:center; gap:12px; }
        .topbar-contact { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
        .topbar-tools { display:flex; align-items:center; gap:12px; position:absolute; right:20px; top:50%; transform:translateY(-50%); }
        @media(max-width:768px){
            .topbar-tools { position:static; transform:none; margin-top:4px; }
        }
        .topbar-sep { width:1px; height:13px; background:rgba(255,255,255,.28); flex-shrink:0; }
        .topbar-item { color:#dce8f5; font-size:11px; font-weight:600; letter-spacing:.2px; white-space:nowrap; }
        .topbar-item a { color:inherit; text-decoration:none; }
        .topbar-item a:hover { color:#fff; text-decoration:underline; }
        .wa-icon { width:13px; height:13px; vertical-align:-2px; margin-right:2px; }

        .topbar-search { display:flex; align-items:center; }
        .search-toggle { background:transparent; border:1px solid rgba(255,255,255,.35); color:#dce8f5; cursor:pointer; padding:3px; line-height:1; border-radius:3px; display:flex; align-items:center; justify-content:center; transition:all .2s; }
        .search-toggle:hover { color:#fff; border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.08); }
        .search-input { width:0; opacity:0; padding:0; border:none; background:rgba(255,255,255,.1); color:#fff; font-size:11px; border-radius:3px; transition:all .25s; }
        .search-input::placeholder { color:#c7d6e8; }
        .search-input.open { width:150px; opacity:1; padding:4px 8px; margin-right:6px; border:1px solid rgba(255,255,255,.3); }

        @media(max-width:768px){
            .topbar { justify-content:center; }
            .topbar-item { font-size:10px; }
        }

        .flag-icon { width:20px; height:14px; object-fit:cover; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.15); flex-shrink:0; }


        /* ════════════════════════════════════════════
           SHARED UTILS
        ════════════════════════════════════════════ */
        .page { display:block; }
        .container { max-width:1200px; margin:0 auto; padding:0 20px; box-sizing:border-box; width:100%; }
        .btn { display:inline-block; padding:13px 32px; border:none; border-radius:5px; font-size:15px; cursor:pointer; transition:all .3s; font-weight:700; text-decoration:none; letter-spacing:.3px; }
        .btn-outline-white { background:transparent; color:white; border:2px solid rgba(255,255,255,.7); }
        .btn-outline-white:hover { background:white; }
        .cta-buttons { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

        /* BREADCRUMB */
        .breadcrumb { padding:2px 20px; }
        .breadcrumb .container { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; }
        .breadcrumb-left { display:flex; align-items:center; gap:8px; }
        .breadcrumb span { cursor:pointer; transition:color .2s; }
        .breadcrumb .current { font-weight:600; }
        .breadcrumb-btn { padding:8px 14px; border-radius:6px; background:#333; color:#fff; text-decoration:none; font-weight:600; font-size:13px; display:inline-flex; align-items:center; white-space:nowrap; gap:6px; transition:all .35s cubic-bezier(.22,1,.36,1); box-shadow:0 4px 12px rgba(0,0,0,.15); position:relative; overflow:hidden; }
        .breadcrumb-btn::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:rgba(255,255,255,.1); transition:left .4s ease; }
        .breadcrumb-btn:hover { background:#1a1a1a; transform:translateY(-3px) scale(1.05); box-shadow:0 10px 26px rgba(0,0,0,.3); }
        .breadcrumb-btn:hover::before { left:100%; }
        .breadcrumb-btn::after { content:'→'; display:inline-block; opacity:0; margin-left:-8px; transition:opacity .35s ease, margin-left .35s ease; }
        .breadcrumb-btn:hover::after { opacity:1; margin-left:0; }

        /* CONTACT INFO BOXES */
        .contact-info { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; margin-top:28px; }
        .contact-info div { padding:18px 24px; background:rgba(255,255,255,.12); border-radius:8px; font-size:14px; border:1px solid rgba(255,255,255,.15); }

        /* FOOTER */
        footer { background:#4a4a4a; color:white; padding:14px 20px; text-align:center; border-top:1px solid #666; }
        footer p { margin:3px 0; font-size:12px; color:#ccc; }
        .footer-links { display:flex; justify-content:center; gap:22px; margin-bottom:8px; flex-wrap:wrap; }
        .footer-links span { color:#bbb; font-size:13px; cursor:pointer; transition:color .2s; }

        /* GRIDS */
        .benefits-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:28px; }
        .services-grid { display:flex; flex-wrap:wrap; gap:24px; justify-content:center; }
        .sectors-grid  { display:flex; flex-wrap:wrap; gap:15px; justify-content:center; }
        .products-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:26px; }
        .products-grid-3 { grid-template-columns:repeat(3,1fr); gap:12px; }
        @media(max-width:768px){
            .products-grid-3 { grid-template-columns:repeat(1,1fr); }
        }
        .objections-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:26px; }
        .countries-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(195px,1fr)); gap:28px; }
        .brands-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); gap:28px; }
        .compromise-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; max-width:1000px; margin:0 auto; }

        /* SHARED CARD CHROME */
        .product-card { border-radius:8px; overflow:hidden; transition:all .3s; display:flex; flex-direction:column; }
        .product-image { height:130px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; overflow:hidden; }
        .product-content { padding:14px; display:flex; flex-direction:column; flex:1; }
        .product-content p { flex:1; }
        .product-content p { font-size:13px; line-height:1.6; margin-bottom:14px; }
        .product-btn { padding:10px 18px; border:none; border-radius:4px; cursor:pointer; width:100%; font-weight:700; font-size:13px; transition:all .3s; }

        /* STAT BANNER */
        .stats-banner { display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); }
        .stat-item { padding:26px 18px; text-align:center; }
        .stat-number { font-size:40px; font-weight:800; }
        .stat-label { margin-top:5px; font-size:15px; }

        /* ════════════════════════════════════════════
           PAGE: HOME — Gris / Negro / Blanco
        ════════════════════════════════════════════ */

        /* Hero Home */

        /* Stats Home */
        #page-home .stats-banner { background:#fff; border-bottom:3px solid #555; }
        #page-home .stat-item { border-right:1px solid #e8e8e8; }
        #page-home .stat-item:last-child { border-right:none; }
        #page-home .stat-number { color:#3a3a3a; }
        #page-home .stat-label { color:#777; }

        /* Section title Home */
        #page-home .section-title { color:#1a1a1a; font-size:36px; text-align:center; margin-bottom:48px; }

        /* About Home */
        #page-home .about-section { background:#f5f5f5; padding:14px 20px 40px; }
        #page-home .about-section h2 { font-size:32px; color:#111; margin-bottom:12px; text-align:center; }
        #page-home .about-section { text-align:center; }
        #page-home .about-section p { margin-left:auto; margin-right:auto; }
        #page-home .highlight { color:#B0001E; font-weight:700; }
        #page-home .about-section p { font-size:15px; color:#555; line-height:1.6; margin-bottom:12px; max-width:900px; }
        #page-home .mission-box { background:linear-gradient(135deg,#e0e0e0,#f0f0f0); border-left:5px solid #333; padding:12px 16px; margin:10px auto; border-radius:8px; max-width:1080px; display:flex; align-items:center; gap:18px; text-align:left; }
        #page-home .mission-box .mission-text { flex:1 1 320px; }
        #page-home .mission-box h3 { color:#111; font-size:18px; margin-bottom:6px; }
        #page-home .mission-box p { color:#444; font-size:14px; line-height:1.5; margin:0; max-width:800px; }
        @media(max-width:760px){ #page-home .mission-box { flex-direction:column; text-align:center; } #page-home .mission-box .mission-text { text-align:center; } }

        /* Carrusel de fotos — Nuestra Misión */
        .mission-carousel { position:relative; flex:1 1 360px; max-width:400px; width:100%; border-radius:10px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.18); background:#111; }
        .mission-carousel .car-track { display:flex; transition:transform .45s ease; }
        .mission-carousel .car-track img { width:100%; flex:0 0 100%; height:150px; object-fit:cover; display:block; }
        .mission-carousel .car-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.5); color:#fff; border:none; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; transition:background .2s; }
        .mission-carousel .car-btn:hover { background:rgba(196,30,58,.85); }
        .mission-carousel .car-prev { left:10px; }
        .mission-carousel .car-next { right:10px; }
        .mission-carousel .car-dots { position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:7px; }
        .mission-carousel .car-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer; border:none; padding:0; }
        .mission-carousel .car-dot.active { background:#fff; }
        @media(max-width:760px){ .mission-carousel { max-width:100%; } }

        /* Brands Home */
        #page-home .brands-section { background:#fff; padding:24px 20px 70px; }
        #page-home .brand-card { border:2px solid #e0e0e0; border-radius:10px; padding:34px 22px; text-align:center; transition:all .3s; cursor:pointer; background:#fff; display:flex; flex-direction:column; height:100%; }
        #page-home .brand-card:hover { border-color:#333; box-shadow:0 8px 28px rgba(0,0,0,.12); transform:translateY(-5px); background:#fff; }
        #page-home .brand-flag { font-size:65px; height:110px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; flex-shrink:0; }
        #page-home .brand-card h3 { color:#1a1a1a; font-size:22px; margin-bottom:9px; font-weight:700; min-height:30px; display:flex; align-items:center; justify-content:center; }
        #page-home .brand-card p { color:#666; font-size:14px; line-height:1.6; flex-grow:1; }
        #page-home .go-btn { display:inline-block; margin-top:16px; align-self:center; padding:9px 22px; background:#1a1a1a; color:white; border-radius:4px; font-size:13px; font-weight:700; cursor:pointer; border:none; transition:all .3s; }
        #page-home .go-btn:hover { background:#444; }

        /* Services Home */
        #page-home .services-section { background:#f5f5f5; padding:24px 20px 70px; }
        #page-home .service-card { background:#fff; border-radius:8px; padding:28px; border-left:4px solid #333; transition:all .3s; box-shadow:0 2px 8px rgba(0,0,0,.05); flex:1 1 250px; max-width:320px; }
        #page-home .service-card:hover { transform:translateY(-4px); box-shadow:0 8px 22px rgba(0,0,0,.1); }
        #page-home .service-icon { font-size:34px; margin-bottom:11px; }
        #page-home .service-card h3 { color:#1a1a1a; margin-bottom:9px; font-size:16px; font-weight:700; }
        #page-home .service-card p { color:#666; font-size:14px; line-height:1.6; }

        /* Sectors Home — cuadrícula moderna */
        #page-home .sectors-section { background:#fff; padding:22px 20px 65px; }
        #page-home .sector-card { position:relative; height:220px; border-radius:18px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.12); transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease; flex:1 1 165px; max-width:210px; }
        #page-home .sector-card img { transition:transform .6s cubic-bezier(.22,1,.36,1), filter .45s ease; filter:saturate(1.05) contrast(1.02); }
        #page-home .sector-card:hover { transform:translateY(-8px); box-shadow:0 22px 40px rgba(0,0,0,.28); }
        #page-home .sector-card:hover img { transform:scale(1.1); }
        #page-home .sector-card h3 { position:absolute; bottom:0; left:0; right:0; color:#fff; font-size:13px; font-weight:800; letter-spacing:.6px; margin:0; padding:34px 14px 14px; z-index:2; text-shadow:0 1px 4px rgba(0,0,0,.4); background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.5) 60%,rgba(0,0,0,0) 100%); transition:padding-bottom .35s ease; }
        #page-home .sector-card:hover h3 { padding-bottom:18px; }
        #page-home .sector-icon { font-size:34px; margin-bottom:10px; }

        /* Represented Home */
        #page-home .represented-section { background:#f5f5f5; padding:24px 20px 70px; }
        #page-home .country-block h3 { color:#1a1a1a; font-size:15px; margin-bottom:13px; font-weight:700; }
        #page-home .country-block ul { list-style:none; }
        #page-home .country-block ul li { padding:6px 0; border-bottom:1px solid #ddd; font-size:14px; color:#555; }
        #page-home .country-block ul li a { color:#0066cc; text-decoration:none; transition:color .2s ease; }
        #page-home .country-block ul li a:hover { color:#003d7a; text-decoration:underline; }
        #page-home .country-block ul li:before { content:"→ "; color:#555; font-weight:700; }

        /* Clients Home */
        #page-home .clients { background:#fff; padding:20px 20px 60px; }
        #page-home .client-logo { background:#fff; padding:0; border-radius:8px; text-align:center; font-weight:700; color:#555; font-size:13px; border:2px solid #e0e0e0; display:flex; align-items:center; justify-content:center; height:150px; flex:1 1 138px; max-width:180px; overflow:hidden; position:relative; pointer-events:none; }
        #page-home .client-logo img { width:100%; height:100%; object-fit:contain; padding:0; background:#fff; box-sizing:border-box; }

        /* Compromise Home */
        #page-home .compromise-section { background:#f5f5f5; padding:24px 20px 70px; }
        #page-home .compromise-item { display:flex; gap:13px; align-items:flex-start; }
        #page-home .check { color:#333; font-size:20px; font-weight:800; min-width:26px; }
        #page-home .compromise-item p { font-size:15px; color:#555; }

        /* Contact Home */
        #page-home .contact-section { background:linear-gradient(135deg,#4a4a4a 0%,#5e5e5e 100%); color:white; padding:24px 20px 70px; text-align:center; }
        #page-home .contact-section h2 { font-size:34px; margin-bottom:13px; color:#fff; }
        #page-home .contact-section p { font-size:17px; color:#e0e0e0; margin-bottom:0; }

        /* Footer Home */
        #page-home footer .footer-links span:hover { color:#ddd; }

        /* ════════════════════════════════════════════
           PAGE: PERMA — Rojo / Blanco
        ════════════════════════════════════════════ */
        #page-perma { font-family:'Barlow',sans-serif; font-weight:400; }
        #page-perma h1 { font-family:'Barlow',sans-serif; font-weight:700; }
        #page-perma h2, #page-perma h3 { font-family:'Barlow',sans-serif; font-weight:600; }

        #page-perma .breadcrumb { background:#e8e8e8; }
        #page-perma .breadcrumb span { color:#666; }
        #page-perma .breadcrumb span:hover, #page-perma .breadcrumb .current { color:#C41E3A; }

        /* Hero Perma */
        #page-perma .btn-primary { background:#fff; color:#9b0020; font-weight:800; }
        #page-perma .btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.35); }
        #page-perma .btn-outline-white:hover { color:#9b0020; }

        /* Stats Perma */
        #page-perma .stats-banner { background:#fff; border-bottom:3px solid #C41E3A; }
        #page-perma .stat-item { border-right:1px solid #fde0e5; }
        #page-perma .stat-item:last-child { border-right:none; }
        #page-perma .stat-number { color:#B0001E; }
        #page-perma .stat-label { color:#888; }

        /* Section title Perma */
        #page-perma .section-title { color:#1a0005; font-size:36px; text-align:center; margin-bottom:48px; }

        /* About Perma */
        #page-perma .about-section { background:#fff8f9; padding:28px 20px 80px; text-align:center; }
        #page-perma .about-section h2 { font-size:38px; color:#1a0005; margin-bottom:18px; }
        #page-perma .highlight { color:#B0001E; font-weight:700; }
        #page-perma .about-section p { font-size:16px; color:#555; line-height:1.85; margin-bottom:18px; max-width:900px; }
        #page-perma .mission-box { background:linear-gradient(135deg,#fff0f2,#ffe4e8); border-left:5px solid #C41E3A; padding:42px 38px; margin:36px 0; border-radius:8px; }
        #page-perma .mission-box h3 { color:#9b0020; font-size:21px; margin-bottom:11px; }
        #page-perma .mission-box p { color:#5a1020; font-size:16px; line-height:1.8; margin:0; }
        #perma-mission-carousel { max-width:900px; margin:0 auto; }
        #perma-mission-carousel .car-track img { height:518px; }
        @media(max-width:900px){ #perma-mission-carousel .car-track img { height:378px; } }
        @media(max-width:520px){ #perma-mission-carousel .car-track img { height:258px; } }
        #faulhaber-mission-carousel .car-track img { height:160px; }
        @media(max-width:900px){ #faulhaber-mission-carousel .car-track img { height:130px; } }
        @media(max-width:520px){ #faulhaber-mission-carousel .car-track img { height:110px; } }
        @media(max-width:760px){ #page-perma .mission-box { flex-direction:column; text-align:center; padding:32px 24px; } #page-perma .mission-box .mission-text { text-align:center; } }

        /* Benefits Perma */
        #page-perma .benefits { background:#fff; padding:16px 20px 40px; }
        #page-perma .benefit-card { background:#fff8f9; padding:28px; border-radius:8px; border-left:4px solid #C41E3A; transition:all .3s; }
        #page-perma .benefit-card:hover { transform:translateY(-5px); box-shadow:0 8px 24px rgba(180,0,30,.15); }
        #page-perma .benefit-icon { font-size:42px; margin-bottom:13px; }
        #page-perma .benefit-card h3 { color:#9b0020; margin-bottom:12px; font-size:18px; }
        #page-perma .metric { font-size:32px; font-weight:800; color:#C41E3A; margin:10px 0; }
        #page-perma .benefit-card p { color:#666; font-size:14px; }

        /* Sectors Perma — cuadrícula moderna */
        #page-perma .sectors-section { background:#fff8f9; padding:22px 20px 65px; }
        #page-perma .sector-card { position:relative; height:220px; border-radius:18px; overflow:hidden; box-shadow:0 4px 14px rgba(180,0,30,.14); transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease; flex:1 1 165px; max-width:210px; }
        #page-perma .sector-card img { transition:transform .6s cubic-bezier(.22,1,.36,1), filter .45s ease; filter:saturate(1.05) contrast(1.02); }
        #page-perma .sector-card:hover { transform:translateY(-8px); box-shadow:0 22px 40px rgba(180,0,30,.32); }
        #page-perma .sector-card:hover img { transform:scale(1.1); }
        #page-perma .sector-card h3 { position:absolute; bottom:0; left:0; right:0; color:#fff; font-size:13px; font-weight:800; letter-spacing:.6px; margin:0; padding:34px 14px 14px; z-index:2; text-shadow:0 1px 4px rgba(0,0,0,.4); background:linear-gradient(to top,rgba(40,0,8,.92) 0%,rgba(40,0,8,.55) 60%,rgba(40,0,8,0) 100%); transition:padding-bottom .35s ease; }
        #page-perma .sector-card h3::after { content:'→'; display:inline-block; opacity:0; margin-left:-10px; transition:opacity .35s ease, margin-left .35s ease; }
        #page-perma .sector-card:hover h3::after { opacity:1; margin-left:6px; }
        #page-perma .sector-card:hover h3 { padding-bottom:18px; }
        #page-perma .sector-icon { font-size:34px; margin-bottom:10px; }

        /* Products Perma */
        #page-perma .products { background:#fff; padding:24px 20px 70px; }
        #page-perma .product-card { background:#fff; border:2px solid #f5c0c8; }
        #page-perma .product-card:hover { border-color:#C41E3A; box-shadow:0 6px 22px rgba(180,0,30,.18); }
        #page-perma .product-image { background:linear-gradient(135deg,#f5c0c8,#fde0e5); color:#9b0020; }
        #page-perma .product-content h3 { color:#9b0020; text-align:center; }
        #page-perma .product-content p { color:#666; }
        #page-perma .product-btn { background:#C41E3A; color:white; }
        #page-perma .product-btn:hover { background:#9b0020; }

        /* Objections Perma */
        #page-perma .objections-box { background:#fff8f9; border-radius:10px; padding:52px 38px; margin-top:62px; border:1px solid #fde0e5; }
        #page-perma .objection-card { background:#fff; padding:28px; border-radius:8px; box-shadow:0 2px 8px rgba(180,0,30,.07); border-top:4px solid #C41E3A; transition:all .3s; }
        #page-perma .objection-card:hover { box-shadow:0 8px 22px rgba(180,0,30,.15); transform:translateY(-3px); }
        #page-perma .objection-card h3 { color:#1a0005; margin-bottom:13px; font-size:15px; font-weight:700; }
        #page-perma .objection-card p { color:#666; font-size:14px; line-height:1.7; }

        /* Compromise Perma */
        #page-perma .compromise-section { background:#fff8f9; padding:24px 20px 70px; }
        #page-perma .compromise-item { display:flex; gap:13px; align-items:flex-start; }
        #page-perma .check { color:#C41E3A; font-size:20px; font-weight:800; min-width:26px; }
        #page-perma .compromise-item p { font-size:15px; color:#555; }

        /* Contact Perma */
        #page-perma .contact-section { background:linear-gradient(135deg,#9b0020 0%,#C41E3A 100%); color:white; padding:24px 20px 70px; text-align:center; }
        #page-perma .contact-section h2 { font-size:32px; margin-bottom:13px; }
        #page-perma .contact-section p { font-size:17px; opacity:.92; }

        /* Footer Perma */
        #page-perma footer .footer-links span:hover { color:#ff8080; }

        /* ════════════════════════════════════════════
           PAGE: FAULHABER — Azules / Grises
        ════════════════════════════════════════════ */
        #page-faulhaber .breadcrumb { background:#e8edf5; }
        #page-faulhaber .breadcrumb span { color:#5a6a88; }
        #page-faulhaber .breadcrumb span:hover, #page-faulhaber .breadcrumb .current { color:#002060; }

        /* Hero Faulhaber */
        #page-faulhaber .btn-primary { background:#fff; color:#2c3e5e; font-weight:800; }
        #page-faulhaber .btn-primary:hover { background:#f0f4ff; transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.25); }
        #page-faulhaber .btn-outline-white { border-color:rgba(200,220,255,.7); }
        #page-faulhaber .btn-outline-white:hover { background:rgba(255,255,255,.15); }

        /* Stats Faulhaber */
        #page-faulhaber .stats-banner { background:#dce8f8; border-bottom:3px solid #002060; }
        #page-faulhaber .stat-item { border-right:1px solid #b8cfe8; }
        #page-faulhaber .stat-item:last-child { border-right:none; }
        #page-faulhaber .stat-number { color:#1e4080; }
        #page-faulhaber .stat-label { color:#4a6080; }

        /* Dark sections Faulhaber — ahora gris azulado claro/medio */
        .f-dark { background:#eef2fa; padding:14px 20px 30px; }
        .f-mid  { background:#e4ecf7; padding:14px 20px 20px; }
        .f-deep { background:#dce8f8; padding:70px 20px; }
        .f-h2 { color:#1e3a6a; font-size:36px; text-align:center; margin-bottom:48px; font-weight:700; }
        .f-accent { color:#002060; }

        /* Intro box Faulhaber */
        .f-intro-box { background:#fff; border-left:4px solid #002060; padding:4px 20px; border-radius:8px; max-width:900px; box-shadow:0 2px 10px rgba(37,99,235,.1); text-align:center; margin-left:auto; margin-right:auto; }
        .f-intro-box h3 { color:#1e3a6a; margin-bottom:6px; font-size:16px; }
        .f-intro-box p { color:#3a5070; font-size:13px; line-height:1.4; margin:0 0 6px; }

        /* Faulhaber cards */
        .faulhaber-card { background:#fff; border-radius:10px; padding:28px; border-left:4px solid #002060; transition:all .3s; box-shadow:0 2px 8px rgba(0,32,96,.08); }
        .faulhaber-card:hover { transform:translateY(-4px); box-shadow:0 8px 28px rgba(37,99,235,.18); }
        .faulhaber-card h3 { color:#1e3a6a; margin-bottom:11px; font-size:17px; font-weight:700; }
        .faulhaber-card p { color:#4a6080; font-size:14px; line-height:1.7; }

        /* Sectors Faulhaber — cuadrícula moderna */
        .f-sector-card { position:relative; height:220px; border-radius:18px; overflow:hidden; box-shadow:0 4px 14px rgba(0,20,60,.12); transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease; flex:1 1 165px; max-width:210px; isolation:isolate; }
        .f-sector-card img { transition:transform .6s cubic-bezier(.22,1,.36,1), filter .45s ease; filter:saturate(1.05) contrast(1.02); }
        .f-sector-card:hover { transform:translateY(-8px); box-shadow:0 22px 40px rgba(0,20,60,.32); }
        .f-sector-card:hover img { transform:scale(1.1); }
        .f-sector-card h3 { position:absolute; bottom:0; left:0; right:0; color:#fff; font-size:13px; font-weight:800; letter-spacing:.6px; margin:0; padding:34px 14px 14px; z-index:2; text-shadow:0 1px 4px rgba(0,0,0,.4); background:linear-gradient(to top,rgba(0,12,36,.92) 0%,rgba(0,12,36,.55) 60%,rgba(0,12,36,0) 100%); transition:padding-bottom .35s ease; }
        .f-sector-card h3::after { content:'→'; display:inline-block; opacity:0; margin-left:-10px; transition:opacity .35s ease, margin-left .35s ease; }
        .f-sector-card:hover h3::after { opacity:1; margin-left:6px; }
        .f-sector-card:hover h3 { padding-bottom:18px; }
        .f-sector-card .sector-icon { font-size:34px; margin-bottom:10px; }
        .f-sector-card.f-cta { background:linear-gradient(135deg,#0a2a6e,#1c48a8); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
        .f-sector-card.f-cta h3 { position:static; background:none; padding:0; text-shadow:none; }
        .f-sector-card.f-cta h3::after { content:none; }
        .f-sector-card.f-cta .cta-circle { width:46px; height:46px; border-radius:50%; border:2px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; font-size:19px; color:#fff; transition:transform .4s cubic-bezier(.22,1,.36,1), background .4s ease, border-color .4s ease; }
        .f-sector-card.f-cta:hover .cta-circle { transform:translateX(6px); background:rgba(255,255,255,.18); border-color:#fff; }

        /* Products Faulhaber */
        .f-product-card { background:#fff; border:2px solid #c0d4f0; border-radius:8px; overflow:hidden; transition:all .3s; display:flex; flex-direction:column; }
        .f-product-card:hover { border-color:#002060; box-shadow:0 6px 22px rgba(37,99,235,.18); }
        .f-product-image { background:#fff; height:80px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; letter-spacing:1.5px; color:#1e3a6a; overflow:hidden; }
        .f-product-content { padding:8px 10px; display:flex; flex-direction:column; flex:1; background:#c8daf5; }
        .f-product-content p { flex:1; }
        .f-product-content h3 { color:#1e3a6a; margin-bottom:4px; font-size:14px; }
        .f-product-content p { color:#4a6080; font-size:11px; line-height:1.35; margin-bottom:6px; }
        .f-product-btn { background:#002060; color:white; padding:6px 14px; border:none; border-radius:4px; cursor:pointer; width:100%; font-weight:700; font-size:11px; transition:all .3s; }
        .f-product-btn:hover { background:#003080; }

        /* Contact Faulhaber */
        .f-contact { background:linear-gradient(135deg,#2c3e5e 0%,#3a5080 100%); color:white; padding:24px 20px 70px; text-align:center; border-top:2px solid #002060; }
        .f-contact h2 { font-size:32px; margin-bottom:13px; color:#fff; }
        .f-contact p { font-size:17px; color:#d0e0f8; }

        /* Footer Faulhaber */
        #page-faulhaber footer .footer-links span:hover { color:#7eb3ff; }

        /* ════════════════════════════════════════════
           RESPONSIVE
        ════════════════════════════════════════════ */
        @media(max-width:768px){
            header nav a { padding:0 10px; height:34px; font-size:11px; }
            #page-home .section-title, #page-perma .section-title { font-size:26px; }
            .sectors-grid-54 .sector-card { flex-basis:calc(50% - 8px); max-width:calc(50% - 8px); }
            #page-home .sectors-grid-54 .sector-card { flex-basis:calc(50% - 8px); max-width:calc(50% - 8px); }
        }
        .sectors-grid-54 .sector-card { flex:0 0 calc(20% - 12px); max-width:calc(20% - 12px); }
        #page-home .sectors-grid-54 .sector-card { flex:0 0 calc(20% - 12px); max-width:calc(20% - 12px); }
        .sectors-grid-54 .f-sector-card { flex:0 0 calc(20% - 12px); max-width:calc(20% - 12px); }
        @media(max-width:768px){
            .sectors-grid-54 .f-sector-card { flex-basis:calc(50% - 8px); max-width:calc(50% - 8px); }
        }
        .sectors-grid-5 .sector-card { flex:0 0 calc(20% - 12px); max-width:calc(20% - 12px); }
        #page-perma .sectors-grid-5 .sector-card { flex:0 0 calc(20% - 12px); max-width:calc(20% - 12px); }
        @media(max-width:768px){
            .sectors-grid-5 .sector-card { flex-basis:calc(50% - 8px); max-width:calc(50% - 8px); }
            #page-perma .sectors-grid-5 .sector-card { flex-basis:calc(50% - 8px); max-width:calc(50% - 8px); }
        }

        /* ===== Grilla Sectores que Atendemos (Home) — igual a Perma ===== */
        #industrias .sectors-grid-54 .sector-card { flex:0 0 calc(20% - 12px); max-width:calc(20% - 12px); }
        @media (max-width:768px) {
            #industrias .sectors-grid-54 .sector-card { flex-basis:calc(50% - 8px); max-width:calc(50% - 8px); }
        }
    
        /* ===== RESPONSIVE DESIGN ===== */
        
        /* ===== MENÚ MÓVIL (hamburguesa) — mobile-first: nav se convierte en panel desplegable =====
           1180px es el ancho por debajo del cual el nav completo (831px) + el logo (276px)
           ya no entran en una línea. Con 900px el header pasaba a 2-3 líneas y tapaba el
           hero, porque body reserva una altura fija de 95px. */
        @media (max-width: 1180px) {
            .mobile-menu-btn { display:flex; }
            header nav {
                display:none;
                position:fixed;
                top:var(--header-h,64px);
                left:0; right:0;
                width:100%;
                max-height:calc(100vh - var(--header-h,64px));
                overflow-y:auto;
                flex-direction:column;
                align-items:stretch;
                gap:0;
                background:#242424;
                box-shadow:0 8px 20px rgba(0,0,0,.25);
                padding:6px 0 14px;
                z-index:999;
            }
            body.body-page-home header nav, body.body-page-perma header nav, body.body-page-faulhaber header nav { background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.15); }
            header nav.mobile-open { display:flex; }
            header nav a, .nav-dropdown-toggle { width:100%; height:auto !important; padding:14px 22px !important; border-radius:0 !important; font-size:14px !important; justify-content:flex-start !important; border-bottom:1px solid rgba(255,255,255,.08); box-sizing:border-box; }
            body.body-page-home header nav a, body.body-page-perma header nav a, body.body-page-faulhaber header nav a,
            body.body-page-home .nav-dropdown-toggle, body.body-page-perma .nav-dropdown-toggle, body.body-page-faulhaber .nav-dropdown-toggle { border-bottom:1px solid rgba(0,0,0,.08); }
            .nav-dropdown { width:100%; }
            .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { position:static; width:100%; max-width:none; margin-top:0; box-shadow:none; border:none; border-radius:0; left:0; transform:none !important; }
        }


        @media (max-width: 768px) {
            .container { padding: 20px 15px; }
            
            /* Header responsive */
            header { padding: 12px 15px; }
            .logo { font-size: 18px; }
            .nav-menu a { font-size: 13px; padding: 8px 10px; }
            
            /* Stats banner */
            .stats-banner { padding: 20px 15px; gap: 15px; }
            .stat-item { flex: 1; }
            .stat-number { font-size: 28px; }
            .stat-label { font-size: 12px; }
            
            /* Brand cards */
            #page-home .brands-grid { grid-template-columns: 1fr; gap: 16px; }
            #page-home .brand-card { padding: 24px 16px; }
            #page-home .brand-flag { height: 90px; margin-bottom: 8px; }
            #page-home .brand-card h3 { font-size: 18px; }
            #page-home .brand-card p { font-size: 13px; }
            
            /* Mission box */
            #page-home .mission-box { flex-direction: column; padding: 24px 16px; gap: 20px; }
            #page-home .mission-box .mission-text { text-align: center; }
            .mission-carousel { max-width: 100%; }
            
            /* Compromise section */
            .compromise-section { padding: 40px 15px; }
            .compromise-list { grid-template-columns: 1fr; gap: 16px; }
            
            /* Section titles */
            .section-title { font-size: 24px; margin-bottom: 24px; }
            
            /* Contact section */
            .contact-info { flex-direction: column; gap: 16px; }
            .contact-info > div { flex: 1; }
            
            /* Footer */
            footer { padding: 10px 15px; flex-direction: column; gap: 6px; }
            .footer-links { flex-direction: column; gap: 4px; }
            .footer-links span { font-size: 12px; }
            
            /* Country blocks */
            .countries-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
            
            /* Intro box */
            .f-intro-box { padding: 6px 16px; }
            .f-intro-box h3 { font-size: 16px; }
            .f-intro-box p { font-size: 14px; }
        }
        
        /* Móviles pequeños (max-width: 480px) */
        @media (max-width: 480px) {
            body { font-size: 14px; }
            .container { padding: 16px 12px; }
            
            /* Header */
            header { padding: 10px 12px; }
            .logo { font-size: 14px; }
            .logo-text { font-size: 11px; }
            .nav-menu { gap: 4px; }
            .nav-menu a { font-size: 11px; padding: 6px 8px; }
            
            /* Stats banner */
            .stats-banner { padding: 16px 12px; flex-wrap: wrap; }
            .stat-item { min-width: 45%; }
            .stat-number { font-size: 22px; }
            .stat-label { font-size: 10px; }
            
            /* Brand cards */
            #page-home .brands-grid { gap: 12px; }
            #page-home .brand-card { padding: 16px 12px; }
            #page-home .brand-flag { height: 80px; margin-bottom: 6px; }
            #page-home .brand-card h3 { font-size: 16px; margin-bottom: 6px; }
            #page-home .brand-card p { font-size: 12px; line-height: 1.4; }
            #page-home .go-btn { padding: 7px 14px; font-size: 11px; }
            
            /* Mission box */
            #page-home .mission-box { padding: 16px 12px; gap: 12px; }
            #page-home .mission-box h2 { font-size: 20px; }
            #page-home .mission-box p { font-size: 12px; }
            
            /* Section title */
            .section-title { font-size: 20px; margin-bottom: 16px; }
            
            /* Contact info */
            .contact-info { gap: 12px; }
            .contact-info div { font-size: 12px; }
            .contact-info strong { font-size: 13px; }
            .contact-info small { font-size: 10px; }
            
            /* Footer */
            footer { padding: 8px 12px; }
            .footer-links { gap: 4px; }
            .footer-links span { font-size: 11px; }
            
            /* Country blocks */
            .countries-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
            .country-block h4 { font-size: 12px; }
            
            /* Intro box */
            .f-intro-box { padding: 4px 12px; }
            .f-intro-box h3 { font-size: 14px; margin-bottom: 6px; }
            .f-intro-box p { font-size: 12px; }
            
            /* Carousel responsive */
            .mission-carousel { max-height: 200px; }
            
            /* Mobile menu */
            .nav-menu { flex-wrap: wrap; }
        }
        
        /* Landscape mode (max-height: 600px) */
        @media (max-height: 600px) {
            header { padding: 8px 15px; }
        }
        
        /* Large screens (min-width: 1200px) */
        @media (min-width: 1200px) {
            .container { max-width: 1200px; padding: 0 40px; }
            #page-home .brands-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
        }

        /* Ultra-móviles Android pequeños (max-width: 360px) */
        @media (max-width: 360px) {
            .topbar { padding: 3px 6px; font-size: 9px; }
            .topbar-item { font-size: 9px; }
            .topbar-right { gap: 4px; }
            
            .container { padding: 12px 8px; }
            .section-title { font-size: 18px; }
            
            .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { position: fixed; top: auto; left: 0; right: 0; width: 100vw; max-width: 100vw; margin: 0; border-radius: 0; transform:none !important; }
        }

/* ════════════════════════════════════════════════════════════════════
   HEROES — rebuilt as real HTML text over text-free artwork.
   The artwork keeps its natural aspect ratio (full-bleed, like the
   original baked banner) and every label is now indexable copy.
   Type is sized in vw so the composition matches the artwork at any
   width; below 900px the hero switches to a stacked, readable layout.
════════════════════════════════════════════════════════════════════ */
.hero { position:relative; width:100%; overflow:hidden; }
.hero-art { display:block; width:100%; height:auto; }
.hero-copy { position:absolute; z-index:2; }
.hero-copy h1 { font-weight:700; letter-spacing:-.01em; }
.hero-logo { display:block; width:100%; height:auto; }
.hero-rule { display:block; border:0; border-radius:2px; }
.hero-sub { font-weight:400; }

/* ── Home ───────────────────────────────────────────────────────── */
.hero-home { background:#dfe9f7; }
.hero-home .hero-copy { left:6.4%; top:4.0%; width:35.5%; font-size:3.05vw; color:#12305f; }
.hero-home .hero-logo { width:33%; margin-bottom:.22em; }
.hero-home h1 { font-size:1em; line-height:1.03; color:#0f2d5e; margin:0; }
.hero-home .hero-sub { font-size:.715em; line-height:1.06; color:#23406e; margin:.36em 0 0; }
.hero-home .hero-rule { width:2.95em; height:.11em; background:#0e2a5c; margin-top:.5em; }

/* Industry strip that used to be baked into the bottom of the banner */
.hero-strip { background:#011e40; color:#eaf1fb; }
.hero-strip ul {
    list-style:none; margin:0 auto; padding:1.15vw 2vw; max-width:1500px;
    display:grid; grid-template-columns:repeat(7,1fr); align-items:center;
}
.hero-strip li {
    display:flex; flex-direction:column; align-items:center; gap:.55vw;
    padding:0 .6vw; border-right:1px solid rgba(255,255,255,.22);
    font-size:clamp(9px,.92vw,15px); font-weight:600; letter-spacing:.08em; text-align:center;
}
.hero-strip li:last-child { border-right:none; }
.hero-strip svg { width:clamp(20px,2.1vw,34px); height:auto; stroke:#7fb2f0; fill:none; stroke-width:1.5; }

/* ── PERMA ──────────────────────────────────────────────────────── */
.hero-perma { background:#f1f1f1; }
.hero-perma .hero-copy { left:2.8%; top:4.4%; width:30.5%; font-size:2.48vw; color:#1b2733; }
.hero-perma .hero-logo { width:48%; margin-bottom:.46em; }
.hero-perma .hero-eyebrow {
    display:block; font-size:.335em; font-weight:600; letter-spacing:.2em;
    text-transform:uppercase; color:#C41E3A; margin-bottom:.32em;
}
.hero-perma h1 { font-size:1em; line-height:1.09; margin:0; font-weight:700; text-transform:uppercase; }
.hero-perma h1 em { font-style:normal; color:#C41E3A; }
.hero-perma .hero-rule { width:2.05em; height:.145em; background:#C41E3A; margin:.42em 0 .5em; }
.hero-perma .hero-sub { font-size:.52em; line-height:1.42; color:#2a3742; margin:0; }
.hero-perma .hero-badges {
    list-style:none; margin:.9em 0 0; padding:0; display:flex; gap:1.15em;
    font-size:.235em; font-weight:700; letter-spacing:.05em; color:#1b2733;
    text-transform:uppercase;
}
.hero-perma .hero-badges li {
    display:flex; flex-direction:column; align-items:center; gap:.8em;
    padding-right:1.15em; border-right:1px solid rgba(0,0,0,.18); text-align:center;
}
.hero-perma .hero-badges li:last-child { border-right:none; padding-right:0; }
.hero-perma .hero-badges svg { width:2.6em; height:auto; stroke:#C41E3A; fill:none; stroke-width:1.5; }

/* Floating benefit card that used to be baked into the banner */
.hero-pill {
    position:absolute; z-index:2; right:2.4%; top:6%; width:56.5%;
    background:#fbfbfb; border-radius:1.1vw; box-shadow:0 .3vw 1.4vw rgba(0,0,0,.07);
}
.hero-pill ul {
    list-style:none; margin:0; padding:1.1vw 1.4vw; display:grid;
    grid-template-columns:repeat(4,1fr); align-items:center;
}
.hero-pill li {
    display:flex; align-items:center; gap:.85vw; padding:0 1vw;
    border-right:1px solid #dcdcdc; font-size:clamp(8px,.86vw,15px);
    font-weight:700; letter-spacing:.03em; line-height:1.35; color:#1b2733;
}
.hero-pill li:last-child { border-right:none; }
.hero-pill svg { flex-shrink:0; width:clamp(18px,2vw,34px); height:auto; fill:none; stroke-width:1.5; }

.hero-bar { background:#29343e; color:#fff; }
.hero-bar ul {
    list-style:none; margin:0 auto; padding:1.4vw 2vw; max-width:1500px;
    display:grid; grid-template-columns:repeat(4,1fr); gap:1.5vw;
}
.hero-bar li { display:flex; gap:1vw; align-items:flex-start; }
.hero-bar svg { flex-shrink:0; width:clamp(20px,2.2vw,36px); height:auto; stroke:#fff; fill:none; stroke-width:1.4; }
.hero-bar b, .hero-bar p { margin:0; }
.hero-bar b { display:block; font-size:clamp(11px,1.02vw,17px); font-weight:700; letter-spacing:.05em; }
.hero-bar p { font-size:clamp(10px,.92vw,15px); line-height:1.4; color:#ccd3d9; margin-top:.25em; }

/* ── FAULHABER ──────────────────────────────────────────────────── */
.hero-faulhaber { background:#e9eef5; }
.hero-faulhaber .hero-copy { left:2.75%; top:4.6%; width:31.6%; font-size:2.6vw; }
.hero-faulhaber .hero-logo { width:100%; }
.hero-faulhaber h1 { font-size:.5em; font-weight:600; letter-spacing:.315em; color:#003d8f; margin:.5em 0 0; text-transform:uppercase; }

.hero-stats { background:#011e3a; color:#fff; }
.hero-stats ul {
    list-style:none; margin:0 auto; padding:1.3vw 2vw; max-width:1500px;
    display:grid; grid-template-columns:repeat(5,1fr); align-items:center;
}
.hero-stats li {
    display:flex; align-items:center; gap:1vw; padding:0 1.2vw;
    border-right:1px solid rgba(255,255,255,.2);
}
.hero-stats li:last-child { border-right:none; }
.hero-stats svg { flex-shrink:0; width:clamp(20px,2.3vw,38px); height:auto; stroke:#1e8bf4; fill:none; stroke-width:1.5; }
.hero-stats b { display:block; font-size:clamp(15px,1.9vw,32px); font-weight:700; color:#1e8bf4; line-height:1.1; }
.hero-stats span { display:block; font-size:clamp(9px,.92vw,15px); font-weight:600; letter-spacing:.04em; line-height:1.25; }
.hero-stats .stat-lead b { color:#fff; font-size:clamp(11px,1.05vw,17px); letter-spacing:.04em; }

/* ── Stacked hero layout for narrow screens ─────────────────────── */
@media (max-width:900px) {
    /* The per-page rules above carry two classes, so the stacked layout has to
       match that specificity to win — do not weaken these selectors. */
    .hero { display:flex; flex-direction:column; }
    .hero-home .hero-copy, .hero-perma .hero-copy, .hero-faulhaber .hero-copy {
        position:static; order:-1; left:auto; top:auto; right:auto;
        width:auto; max-width:none; font-size:16px; padding:26px 20px 24px;
    }
    .hero-home .hero-copy { background:linear-gradient(180deg,#eef4fc,#dce8f7); }
    .hero-perma .hero-copy { background:#f4f4f4; }
    .hero-faulhaber .hero-copy { background:linear-gradient(180deg,#f0f4fa,#dfe7f2); }
    .hero-logo { width:auto !important; max-width:190px; margin-bottom:14px !important; }
    .hero-home .hero-logo { max-width:110px; }
    .hero-copy h1 { font-size:clamp(23px,5.6vw,34px) !important; line-height:1.15; }
    .hero-perma .hero-eyebrow { font-size:11px; }
    .hero-copy .hero-sub { font-size:clamp(14px,3.4vw,17px) !important; line-height:1.5; margin-top:12px !important; }
    .hero-home .hero-rule, .hero-perma .hero-rule { width:64px; height:4px; margin:14px 0 0; }
    .hero-faulhaber h1 { font-size:13px !important; letter-spacing:.2em; margin-top:12px !important; }
    .hero-perma .hero-badges { font-size:10px; gap:14px; margin-top:18px; }
    .hero-perma .hero-badges li { gap:7px; padding-right:14px; }
    .hero-perma .hero-badges svg { width:26px; }

    .hero-pill { position:static; width:auto; border-radius:0; box-shadow:none; background:#fff; border-top:1px solid #e6e6e6; }
    .hero-pill ul, .hero-strip ul, .hero-bar ul, .hero-stats ul { grid-template-columns:repeat(2,1fr); padding:16px; gap:14px; }
    .hero-pill li, .hero-strip li, .hero-stats li { border-right:none; padding:0; font-size:11px; gap:8px; }
    .hero-strip li { gap:6px; }
    .hero-strip svg, .hero-pill svg, .hero-bar svg, .hero-stats svg { width:24px; }
    .hero-bar b { font-size:13px; } .hero-bar p { font-size:12px; }
    .hero-stats b { font-size:20px; } .hero-stats span { font-size:11px; }
}
@media (max-width:520px) {
    .hero-strip ul { grid-template-columns:repeat(3,1fr); }
    .hero-strip li { font-size:9.5px; }
}

/* ── Skip link / a11y ───────────────────────────────────────────── */
.skip-link {
    position:absolute; left:-9999px; top:0; z-index:5000; background:#C41E3A; color:#fff;
    padding:10px 18px; font-weight:700; border-radius:0 0 6px 0; text-decoration:none;
}
.skip-link:focus { left:0; }
:focus-visible { outline:3px solid #C41E3A; outline-offset:2px; }

/* ════════════════════════════════════════════════════════════════════
   MULTI-PAGE ADJUSTMENTS
   The original was one document with JS-swapped panes; navigation is
   now real links, so a few elements changed tag (div→a) and need their
   default link chrome removed.
════════════════════════════════════════════════════════════════════ */
.visually-hidden {
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
[id] { scroll-margin-top:120px; }

a.logo-section { text-decoration:none; color:inherit; }
.logo-section .logo, .logo-section .logo-text { display:block; }

.footer-links a { color:#bbb; font-size:13px; text-decoration:none; transition:color .2s; }
.footer-links a:hover { color:#fff; text-decoration:underline; }
footer address { font-style:normal; font-size:12px; color:#ccc; margin:6px 0 0; }
footer address a { color:#ddd; text-decoration:none; }
footer address a:hover { text-decoration:underline; }

/* Cards that became links */
a.brand-card { text-decoration:none; color:inherit; }
a.sector-card, a.f-sector-card { text-decoration:none; display:block; }
.breadcrumb { padding:7px 20px; }
.breadcrumb a:not(.breadcrumb-btn) { color:inherit; text-decoration:none; }
.breadcrumb a:not(.breadcrumb-btn):hover { text-decoration:underline; }
#page-perma .breadcrumb a:not(.breadcrumb-btn):hover { color:#C41E3A; }
#page-faulhaber .breadcrumb a:not(.breadcrumb-btn):hover { color:#002060; }
.go-btn { text-align:center; }

/* Sector tiles: the <img> is positioned by CSS instead of inline styles */
.sector-card > img, .f-sector-card > img {
    position:absolute; inset:0; z-index:1;
    width:100%; height:100%; object-fit:cover; display:block;
}
.product-image img, .f-product-image img { max-width:100%; height:auto; object-fit:contain; }
.client-logo img { width:100%; height:100%; object-fit:contain; }

/* Floating WhatsApp button */
.wa-float {
    position:fixed; bottom:24px; right:24px; width:60px; height:60px; background:#25D366;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,.3); z-index:9999; transition:transform .2s;
}
.wa-float:hover { transform:scale(1.08); }

/* Carousel images keep their box */
.mission-carousel .car-track img { width:100%; flex:0 0 100%; object-fit:cover; display:block; }

/* Breadcrumb stacks so the outbound brand button stays inside the viewport */
@media (max-width:768px) {
    .breadcrumb .container { flex-direction:column; align-items:flex-start; gap:8px; }
    .breadcrumb-btn { align-self:flex-start; }
}

/* ════════════════════════════════════════════
   V5 — v1 con dos injertos
   1. Clientes: la grilla de 21 logos pasa a ser la cinta
      continua de la v2 (mismo código), en la posición de la v1
      y con su título.
   2. Contacto: el formulario de consulta de la v4, entre la
      bajada y las tres tarjetas, con la estética de la v1.
════════════════════════════════════════════ */

/* ── 1. Cinta de clientes (copiada de la v2) ── */
#page-home .clients { padding:20px 0 60px; }

.clients-marquee {
    position:relative; overflow:hidden;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
            mask-image:linear-gradient(to right, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
}
/* --tile/--gap/--n describen una copia; el ciclo desplaza exactamente
   una copia, n·(tile+gap), así el salto es invisible. */
.clients-track {
    --tile:152px; --gap:13px; --n:21;
    display:flex; flex-wrap:nowrap; gap:var(--gap); width:max-content;
    will-change:transform;
    animation:clients-scroll 60s linear infinite;
}
@keyframes clients-scroll {
    from { transform:translate3d(0,0,0); }
    to   { transform:translate3d(calc(-1 * var(--n) * (var(--tile) + var(--gap))),0,0); }
}
.clients-marquee:hover .clients-track,
.clients-marquee:focus-within .clients-track { animation-play-state:paused; }
.clients-marquee:focus-visible { outline-offset:-3px; }

#page-home .clients-track .client-logo {
    flex:0 0 var(--tile); width:var(--tile); height:96px; max-width:none;
    padding:10px; box-sizing:border-box;
}
#page-home .clients-track .client-logo img { padding:0; }

@media(max-width:768px){
    #page-home .clients { padding:16px 0 40px; }
    #page-home .clients-track { --tile:124px; --gap:10px; }
    #page-home .clients-track .client-logo { height:78px; padding:8px; }
    .clients-marquee {
        -webkit-mask-image:linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
                mask-image:linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .clients-track { animation:none; }
    .clients-marquee { overflow-x:auto; scrollbar-width:thin; }
}

/* ── 2. Formulario de contacto (estructura de la v4) ──
   Tarjeta blanca sobre el degradado gris de la sección, alineada
   a la izquierda aunque la sección esté centrada. */
.contact-section .form {
    max-width:760px; margin:28px auto 0; text-align:left;
    background:#fff; color:#333; border-radius:8px; padding:32px 34px;
    box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.contact-section .form fieldset { border:0; margin:0; padding:0; min-width:0; }
.contact-section .form legend { font-size:22px; font-weight:700; color:#1a1a1a; margin-bottom:6px; padding:0; }
#page-home .contact-section .form p { color:inherit; font-size:inherit; }
#page-home .contact-section .form .form-hint { color:#777; font-size:13px; margin-bottom:22px; }
.form-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px 18px; }
.field { display:flex; flex-direction:column; gap:6px; margin:0; }
.field--wide { grid-column:1 / -1; }
.field label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#555; }
.field input, .field select, .field textarea {
    width:100%; min-width:0; box-sizing:border-box;
    font:inherit; font-size:15px; color:#333; background:#fff;
    border:1px solid #d0d0d0; border-radius:5px; padding:11px 13px;
    transition:border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
    border-color:#4a4a4a; outline:none; box-shadow:0 0 0 3px rgba(74,74,74,.15);
}
.field textarea { resize:vertical; }
.field [aria-invalid="true"] { border-color:#C41E3A; }
#page-home .contact-section .form .form-error { color:#C41E3A; font-size:13px; }
#page-home .contact-section .form .form-consent { grid-column:1 / -1; display:flex; gap:10px; align-items:flex-start; font-size:13px; color:#666; margin:0; }
.form-consent input { margin-top:3px; accent-color:#4a4a4a; }
#page-home .contact-section .form .form-actions { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin:0; }
.form-submit { background:#4a4a4a; color:#fff; }
.form-submit:hover { background:#1a1a1a; transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.25); }
.form-submit:disabled { opacity:.6; cursor:wait; transform:none; }
.form-alt { font-size:13px; color:#666; }
.form-alt a { color:#1a1a1a; font-weight:700; }
#page-home .contact-section .form .form-status { grid-column:1 / -1; font-size:14px; margin:0; }
#page-home .contact-section .form .form-status:empty { display:none; }
#page-home .contact-section .form .form-status[data-state="err"] { color:#C41E3A; }
.form-hp { position:absolute; left:-9999px; }

@media(max-width:768px){
    .contact-section .form { padding:24px 20px; margin-top:22px; }
    .form-grid { grid-template-columns:minmax(0,1fr); }
}

/* ── Contacto: dos columnas sobre fondo oscuro (como la v4) ── */
#page-home .contact-section { background:#1f2528; color:#fff; text-align:left; padding:clamp(48px,6vw,90px) 4vw; }
.contact-section .contact { display:grid; grid-template-columns:minmax(0,24rem) minmax(0,1fr); gap:clamp(32px,5vw,72px); max-width:1500px; margin:0 auto; }
#page-home .contact-section .contact-aside h2 { font-size:clamp(28px,3vw,40px); color:#fff; margin-bottom:0; }
#page-home .contact-section .section-lead { color:rgba(255,255,255,.62); margin-top:18px; font-size:17px; max-width:58ch; }
.contact-list { margin-top:34px; display:grid; gap:22px; }
.contact-list dt { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.52); margin-bottom:6px; }
.contact-list dd { margin:0; font-size:18px; }
.contact-list a { color:#fff; }
.contact-list a:hover { text-decoration:underline; }
.contact-section .form { max-width:none; margin:0; box-shadow:none; border-radius:6px; }
.contact-section .field input:focus, .contact-section .field select:focus, .contact-section .field textarea:focus { border-color:#c4202d; box-shadow:none; }
.contact-section .form-consent input { accent-color:#c4202d; }
.contact-section .form-submit { background:#c4202d; }
.contact-section .form-submit:hover { background:#9b011a; }
.contact-section .form-alt a { color:#c4202d; }
@media(max-width:900px){ .contact-section .contact { grid-template-columns:1fr; } }

/* Formulario seguro: fieldset sin borde (antes inline), nota de privacidad y Turnstile */
.form-fieldset { border:0; padding:0; margin:0; min-width:0; }
.form-privacy { grid-column:1 / -1; margin:0; font-size:12.5px; line-height:1.5; color:#666; }
.form-privacy a { color:inherit; text-decoration:underline; }
.form-turnstile { grid-column:1 / -1; min-height:0; }
.privacy-page { max-width:800px; margin:0 auto; padding:40px 20px 60px; line-height:1.6; color:#333; }
.privacy-page h1 { font-size:30px; margin:0 0 6px; }
.privacy-page h2 { font-size:20px; margin:28px 0 8px; }
.privacy-page .privacy-updated { color:#666; font-size:14px; margin:0 0 24px; }