/* ahnsa-comun.css - generado por tools/extrae_css_inline.py Estos dos bloques estaban inline y byte-identicos en ~1,460 paginas (10.3 MB de HTML repetido). Aqui se bajan una vez. El orden es el mismo que tenian en la pagina: primero el bloque de familia (iba en el ), luego el del mega-menu. */ /* ===== Página de familia: Accesorios industriales ===== */ .fam-main{background:#FEFDF9;color:#0A1E5E} .fam-main *{box-sizing:border-box} .fam-wrap{max-width:1200px;margin:0 auto;padding:0 24px} .fam-kick{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;font-weight:700;color:#1878B9;margin-bottom:12px} .fam-main h2{color:#0A1E5E;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.2;margin:0 0 10px;font-weight:700} .fam-sub{color:#3D4A6B;font-size:1.05rem;line-height:1.55;max-width:720px;margin:0 0 34px} /* HERO */ .fam-hero{background:#0A1E5E;background-image:radial-gradient(ellipse 60% 80% at 78% 30%,rgba(24,120,185,.45),transparent 65%),radial-gradient(ellipse 40% 55% at 12% 85%,rgba(24,120,185,.25),transparent 70%);color:#fff;padding:72px 0 64px} .fam-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center} .fam-hero .fam-kick{color:#7FC4F0} .fam-hero h1{font-size:clamp(2.1rem,5vw,3.2rem);line-height:1.08;margin:0 0 16px;font-weight:700;color:#fff} .fam-hero p{color:#C9D8EA;font-size:1.1rem;line-height:1.55;margin:0 0 28px;max-width:540px} .fam-hero-img{margin:0;display:flex;justify-content:center} .fam-hero-img img{max-width:100%;height:auto;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.35)} .fam-btn{display:inline-block;text-decoration:none;font-weight:700;border-radius:999px;padding:14px 30px;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;cursor:pointer} .fam-btn:hover{transform:translateY(-2px)} .fam-btn-primary{background:#1878B9;color:#fff;box-shadow:0 8px 24px rgba(24,120,185,.35)} .fam-btn-primary:hover{background:#1E88CF;color:#fff} .fam-btn-whats{background:#fff;color:#0A1E5E;border:2px solid #E3E9EF} .fam-btn-whats:hover{border-color:#1878B9;color:#1878B9} .fam-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center} /* Secciones */ .fam-section{padding:64px 0} .fam-section-alt{background:#fff;border-top:1px solid #EDF1F6;border-bottom:1px solid #EDF1F6} /* Tarjetas de tipos */ .fam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px} .fam-card{background:#fff;border:1px solid #E3E9EF;border-radius:14px;padding:24px 22px;display:flex;flex-direction:column;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease} .fam-card:hover{transform:translateY(-2px);border-color:#1878B9;box-shadow:0 10px 28px rgba(10,30,94,.08)} .fam-card h3{margin:0 0 8px;font-size:1.08rem;color:#0A1E5E;line-height:1.3} .fam-card p{margin:0 0 16px;color:#3D4A6B;font-size:.94rem;line-height:1.5;flex:1} .fam-card a{color:#1878B9;font-weight:700;text-decoration:none;font-size:.94rem} .fam-card a:hover{text-decoration:underline} /* Chips de material ISO 513 */ .fam-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px} .fam-chip{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #E3E9EF;border-radius:14px;padding:16px 18px;text-decoration:none;transition:transform .15s ease,border-color .15s ease} .fam-chip:hover{transform:translateY(-2px);border-color:#1878B9} .fam-chip-letter{flex:0 0 auto;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;color:#fff;background:#1878B9} .fam-chip-p .fam-chip-letter{background:#2F6FB4} .fam-chip-m .fam-chip-letter{background:#C9A227} .fam-chip-k .fam-chip-letter{background:#B0413E} .fam-chip-n .fam-chip-letter{background:#3E8E5B} .fam-chip-s .fam-chip-letter{background:#8A5CA8} .fam-chip-h .fam-chip-letter{background:#4A4F5A} .fam-chip strong{display:block;color:#0A1E5E;font-size:.98rem;margin-bottom:2px} .fam-chip span{color:#3D4A6B;font-size:.88rem;line-height:1.45} /* Marcas */ .fam-brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px} .fam-brand{background:#fff;border:1px solid #E3E9EF;border-radius:14px;padding:22px;display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none;transition:transform .15s ease,border-color .15s ease} .fam-brand:hover{transform:translateY(-2px);border-color:#1878B9} .fam-brand img{max-width:150px;width:100%;height:64px;object-fit:contain} .fam-brand em{font-style:normal;color:#3D4A6B;font-size:.85rem;text-align:center;line-height:1.4} .fam-brand strong{color:#1878B9;font-size:.9rem} /* FAQ */ .fam-faq{max-width:860px} .fam-faq details{background:#fff;border:1px solid #E3E9EF;border-radius:14px;margin-bottom:12px;overflow:hidden;transition:border-color .15s ease} .fam-faq details:hover{border-color:#1878B9} .fam-faq summary{cursor:pointer;padding:18px 22px;font-weight:700;color:#0A1E5E;font-size:1rem;list-style:none;position:relative;padding-right:48px} .fam-faq summary::-webkit-details-marker{display:none} .fam-faq summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);color:#1878B9;font-size:1.4rem;font-weight:400;line-height:1} .fam-faq details[open] summary::after{content:"–"} .fam-faq details p{margin:0;padding:0 22px 20px;color:#3D4A6B;line-height:1.6;font-size:.96rem} /* Cierre de conversión */ .fam-cta{background:#0A1E5E;background-image:radial-gradient(ellipse 55% 90% at 50% 110%,rgba(24,120,185,.5),transparent 70%);color:#fff;padding:80px 0;text-align:center} .fam-cta h2{color:#fff;font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:14px} .fam-cta p{color:#C9D8EA;font-size:1.12rem;line-height:1.55;max-width:640px;margin:0 auto 32px} .fam-cta .fam-btn-primary{font-size:1.1rem;padding:18px 44px} .fam-cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:28px} .fam-cta-trust{color:#8FA7C9;font-size:.9rem;letter-spacing:.02em} @media (max-width:860px){ .fam-hero{padding:52px 0 44px} .fam-hero-grid{grid-template-columns:1fr;gap:32px} .fam-hero-img{order:-1} .fam-hero-img img{max-width:78%} .fam-section{padding:48px 0} } /* ---- mega-menu (antes