/* ═══════════════════════════════════════════
   HEBRON S.A. — Style Override (Landrick)
   Adapts static HTML to match beta.hebronsa.es
   ═══════════════════════════════════════════ */

/* 1. FONT — Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

body { font-family: 'Poppins', sans-serif !important; font-size: 15px; color: #3c4858 !important; }
h1,h2,h3,h4,h5,h6 { font-family: 'Poppins', sans-serif !important; letter-spacing: normal !important; }

/* 2. COLORS — primary #0c479d */
:root {
  --blue: #0c479d !important;
  --bd:   #0c479d !important;
  --bm:   #1a65cc !important;
  --bl:   #ddeeff !important;
  --bp:   #eef4ff !important;
  --tx:   #2c3e50 !important;
  --ts:   #4a5568 !important;
  --mu:   #718096 !important;
  --br:   #e2e8f0 !important;
  --lt:   #f7f9fc !important;
}

/* Bootstrap primary override */
:root {
  --bs-primary: #0c479d !important;
  --bs-primary-rgb: 12,71,157 !important;
}
.btn-primary { background-color: #0c479d !important; border-color: #0c479d !important; }
.btn-primary:hover { background-color: #0a3d8a !important; border-color: #0a3d8a !important; }
.text-primary { color: #0c479d !important; }
.bg-primary { background-color: #0c479d !important; }
.border-primary { border-color: #0c479d !important; }

/* 3. TOPBAR */
.topbar {
  background: #0c479d !important;
  color: rgba(255,255,255,.85) !important;
  padding: 8px 0 !important;
  font-size: .8rem !important;
}
.topbar a { color: rgba(255,255,255,.85) !important; }
.topbar a:hover { color: #fff !important; }

/* 4. LOGO — image instead of letter */
.logo-sq { display: none !important; }
.logo-img-wrap { display: flex !important; align-items: center !important; }
.logo-img-wrap img { height: 52px !important; width: auto !important; }
/* Keep text fallback hidden if image present */
.logo-nm, .logo-sub { display: none !important; }
/* Footer logo — smaller */
.ft-logo img { height: 38px !important; margin-bottom: 12px !important; }

/* 5. NAVBAR */
.hb-nav {
  background: rgba(255,255,255,.98) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}
.ni { font-size: .75rem !important; letter-spacing: .05em !important; color: #2c3e50 !important; font-weight: 600 !important; }
.ni:hover, .ni.active { color: #0c479d !important; }
.ni.active::after { background: #0c479d !important; }
.dp { border-top: 3px solid #0c479d !important; }
.dp a:hover { background: #eef4ff !important; color: #0c479d !important; }
/* Bridge the 4px gap between nav item and dropdown so :hover persists when the cursor crosses it */
.dp::before { content: ''; position: absolute; top: -4px; left: 0; right: 0; height: 4px; background: transparent; }
.lang-btn { border-color: #e2e8f0 !important; color: #4a5568 !important; font-family: 'Poppins',sans-serif !important; }
.lang-btn:hover { border-color: #0c479d !important; color: #0c479d !important; background: #eef4ff !important; }

/* Catalogue CTA button in nav */
.nav-acts .btn-p, .nav-acts a.btn-p {
  background: #0c479d !important;
  border-radius: 30px !important;
  padding: 8px 20px !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  color: #fff !important;
}

/* 6. HERO — light with industrial image */
.hero {
  background: #f7f9fc !important;
  min-height: 82vh !important;
}
.hero-grid { display: none !important; }
.hero-glow { display: none !important; }
.hero-particles { display: none !important; }

/* Hero background image */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/hero_bg.webp') center/cover no-repeat;
  opacity: .15;
  pointer-events: none;
}

/* Hero text — dark on light bg */
.hero h1 { color: #1a2744 !important; font-weight: 300 !important; font-size: clamp(2rem,4.5vw,3.4rem) !important; }
.hero-hl::after { background: linear-gradient(90deg,#0c479d,#1a65cc) !important; opacity: .7 !important; }
.hero-tag { background: rgba(12,71,157,.1) !important; border-color: rgba(12,71,157,.2) !important; color: #0c479d !important; }
.hero-desc { color: #4a5568 !important; }
.hero-kpis { border-top-color: rgba(12,71,157,.15) !important; }
.hero-kpi .n { color: #0c479d !important; font-weight: 700 !important; }
.hero-kpi .l { color: #718096 !important; }
.stat-glass { background: rgba(12,71,157,.06) !important; border-color: rgba(12,71,157,.12) !important; }
.stat-glass .n { color: #1a2744 !important; }
.stat-glass .l { color: #4a5568 !important; }
.stat-glass .tr { color: #0c479d !important; }
.hero-img-card { background: rgba(12,71,157,.05) !important; border-color: rgba(12,71,157,.1) !important; }
.scroll-cue { opacity: .4 !important; }
.scroll-cue span, .scroll-wheel { color: #0c479d !important; }
.scroll-wheel { border-color: rgba(12,71,157,.4) !important; }
.scroll-wheel::after { background: rgba(12,71,157,.6) !important; }

/* Hero buttons — match beta */
.btn-w {
  background: #0c479d !important;
  color: #fff !important;
  border-radius: 30px !important;
}
.btn-w:hover { background: #0a3d8a !important; color: #fff !important; transform: none !important; }
.hero .btn-gw {
  background: transparent !important;
  color: #0c479d !important;
  border-color: rgba(12,71,157,.4) !important;
  border-radius: 30px !important;
}
.hero .btn-gw:hover { background: #eef4ff !important; border-color: #0c479d !important; transform: none !important; }
/* On dark sections keep btn-gw white */
.cta-band .btn-gw, .cta-sec .btn-gw, .ots-section .btn-gw, .ph .btn-gw {
  background: transparent !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.35) !important;
  border-radius: 30px !important;
}
.cta-band .btn-gw:hover, .cta-sec .btn-gw:hover, .ots-section .btn-gw:hover, .ph .btn-gw:hover {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.6) !important;
}

/* 7. BUTTONS — pill style */
.btn-p {
  background: #0c479d !important;
  border-radius: 30px !important;
  box-shadow: 0 3px 8px rgba(12,71,157,.25) !important;
  font-weight: 500 !important;
}
.btn-p:hover { background: #0a3d8a !important; transform: none !important; box-shadow: 0 5px 16px rgba(12,71,157,.3) !important; }
.btn-o {
  color: #0c479d !important;
  border-color: #0c479d !important;
  border-radius: 30px !important;
}
.btn-o:hover { background: #0c479d !important; color: #fff !important; transform: none !important; }

/* 8. ABOUT SECTION */
.about-badge { background: #0c479d !important; border-radius: 12px !important; }
.about-otsuka { color: #0c479d !important; border-radius: 10px !important; }
.val-pill { background: #eef4ff !important; border-color: rgba(12,71,157,.15) !important; color: #0c479d !important; border-radius: 30px !important; }
.val-pill:hover { background: #ddeeff !important; transform: none !important; }

/* 9. SECTION TITLES */
.eyebrow { color: #0c479d !important; font-size: .7rem !important; font-weight: 600 !important; }
.eyebrow::before { background: #0c479d !important; }
.stitle { font-size: clamp(1.6rem,2.5vw,2.1rem) !important; font-weight: 400 !important; }
/* Only override stitle color on light backgrounds — not inside .mkts or .cta-band */
.sec .stitle, .sec-alt .stitle, .sec-sm .stitle { color: #1a2744 !important; }
.sdiv { background: linear-gradient(90deg,#0c479d,#1a65cc) !important; }
.sdesc { color: #4a5568 !important; font-size: .93rem !important; }

/* 10. PRODUCT CARDS */
.pc { border-radius: 8px !important; }
.pc::before { background: linear-gradient(90deg,#0c479d,#1a65cc) !important; }
.pc:hover { box-shadow: 0 8px 24px rgba(12,71,157,.15) !important; transform: translateY(-4px) !important; }
.pc-icon { background: #eef4ff !important; border-radius: 8px !important; }
.pc:hover .pc-icon { background: #ddeeff !important; }
.pc-fam { color: #0c479d !important; }
.pc-arr { color: #0c479d !important; }

/* 11. MARKETS SECTION */
.mkts {
  background: linear-gradient(160deg,#0c479d 0%, #0a3d8a 50%, #083070) !important;
}
.mkts .stitle { color: #fff !important; }
.mkts .eyebrow { color: rgba(255,255,255,.75) !important; }
.mkts .eyebrow::before { background: rgba(255,255,255,.5) !important; }
.mkts .sdesc { color: rgba(255,255,255,.7) !important; }
.mkt-card { color: #fff !important; }
.mkt-card h6 { color: #fff !important; }
.mkt-ico { background: rgba(255,255,255,.12) !important; }

/* 12. NEWS */
.nc-empresa { background: rgba(12,71,157,.88) !important; }
.nc-productos { background: rgba(26,101,204,.88) !important; }
.news-rmore { color: #0c479d !important; }

/* 13. CTA BAND */
.cta-band {
  background: linear-gradient(140deg,#0c479d 0%,#1a65cc 60%,#0c479d 100%) !important;
}
.cta-band .stitle, .cta-band h2, .cta-band h3 { color: #fff !important; }
.cta-band .sdesc, .cta-band p { color: rgba(255,255,255,.8) !important; }
.cta-sec .stitle, .cta-sec h2, .cta-sec h3 { color: #fff !important; }
.cta-sec .sdesc, .cta-sec p { color: rgba(255,255,255,.8) !important; }
.ph .stitle, .ph h1, .ph h2 { color: #fff !important; }

/* 14. CDMO STATS */
.cdmo-stat { background: #eef4ff !important; border-radius: 10px !important; }
.cdmo-stat:hover { background: #ddeeff !important; transform: none !important; }
.cdmo-stat .n { color: #0c479d !important; }

/* 15. FEATURE CARDS */
.feat-card::before { background: linear-gradient(90deg,#0c479d,#1a65cc) !important; }
.feat-card:hover { box-shadow: 0 8px 24px rgba(12,71,157,.15) !important; transform: translateY(-4px) !important; }
.feat-icon { background: #eef4ff !important; border-radius: 10px !important; }
.feat-card:hover .feat-icon { background: #0c479d !important; }

/* Timeline */
.timeline::before { background: linear-gradient(180deg,#0c479d,#1a65cc 50%,rgba(12,71,157,.15)) !important; }
.tl-dot { background: #0c479d !important; box-shadow: 0 0 0 3px rgba(12,71,157,.16) !important; }
.tl-year { color: #0c479d !important; }

/* Page hero (dark hero for inner pages) — default; pages with a custom .ph background override this with their own rule */
body:not(.ph-img) .ph {
  background: linear-gradient(135deg,#0c479d 0%,#0a3d8a 40%,#083070 100%) !important;
}

/* 16. FOOTER — solid blue */
.hb-footer {
  background: #0c479d !important;
}
.hb-footer-top { border-color: rgba(255,255,255,.12) !important; }
.hb-footer-bot { border-top-color: rgba(255,255,255,.12) !important; }
.ft-h { color: rgba(255,255,255,.95) !important; letter-spacing: .05em !important; }
.ft-ul a { color: rgba(255,255,255,.65) !important; }
.ft-ul a::before { background: rgba(255,255,255,.2) !important; }
.ft-ul a:hover { color: #fff !important; }
.ft-ul a:hover::before { background: rgba(255,255,255,.6) !important; }
.ft-tag { color: rgba(255,255,255,.7) !important; }
.ft-social a { border-color: rgba(255,255,255,.2) !important; color: rgba(255,255,255,.65) !important; }
.ft-social a:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; border-color: rgba(255,255,255,.4) !important; transform: none !important; }
.ft-certs span { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.5) !important; }
.ft-ci i { color: rgba(255,255,255,.4) !important; }
.ft-ci span, .ft-ci a { color: rgba(255,255,255,.65) !important; }
.ft-ci a:hover { color: #fff !important; }
.hb-footer-bot span { color: rgba(255,255,255,.5) !important; }
.ft-legal a { color: rgba(255,255,255,.5) !important; }
.ft-legal a:hover { color: rgba(255,255,255,.85) !important; }
.ft-legal span { color: rgba(255,255,255,.2) !important; }

/* Footer logo — light version */
.ft-logo .logo-nm { color: #fff !important; }
.ft-logo .logo-sub { color: rgba(255,255,255,.6) !important; }

/* 17. SCROLL TOP */
#stt {
  background: #0c479d !important;
  box-shadow: 0 4px 12px rgba(12,71,157,.35) !important;
}
#stt:hover { transform: translateY(-3px) !important; }

/* 18. MOBILE MENU */
.mm-lang { background: #0c479d !important; border-radius: 8px !important; }
.mm-lang:hover { background: #0a3d8a !important; }
.mms a:hover { color: #0c479d !important; background: #eef4ff !important; border-left-color: #0c479d !important; }
.mml:hover, .mml-direct:hover { background: #eef4ff !important; color: #0c479d !important; }
.bc a { color: #0c479d !important; }

/* Tag pills */
.tag-pill { background: #eef4ff !important; color: #0c479d !important; border-color: rgba(12,71,157,.12) !important; }

/* 19. TABLE */
.hb-table th { background: #0c479d !important; }
.hb-table tr:hover td { background: #eef4ff !important; }

/* HL box */
.hl-box { background: linear-gradient(135deg,#eef4ff,#ddeeff) !important; border-color: rgba(12,71,157,.13) !important; }
.hl-box::before { background: linear-gradient(180deg,#0c479d,#1a65cc) !important; }

/* Step numbers */
.step-num { background: linear-gradient(135deg,#1a65cc,#0c479d) !important; }

/* 20. SECTION ALTERNATES */
.sec-alt { background: #f7f9fc !important; }

/* Drop-in animation */
@keyframes dropIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

/* ───── Product-family theming ─────
   Each product page sets data-pf="foam|additive|crosslink|specialty" on <body>.
   These vars drive hero accents, advantages, and applications. */
body[data-pf="foam"]      { --pf-c1:#1e50bc; --pf-c2:#0f2a6b; --pf-soft:#e6eefa; }
body[data-pf="additive"]  { --pf-c1:#d97706; --pf-c2:#7c2d12; --pf-soft:#fef3c7; }
body[data-pf="crosslink"] { --pf-c1:#7c3aed; --pf-c2:#4c1d95; --pf-soft:#ede9fe; }
body[data-pf="specialty"] { --pf-c1:#059669; --pf-c2:#064e3b; --pf-soft:#d1fae5; }

/* Hero overlay glow with family color */
body[data-pf] .prod-hero::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: radial-gradient(ellipse at 70% 40%, color-mix(in srgb, var(--pf-c1) 35%, transparent) 0%, transparent 65%);
  mix-blend-mode: screen;
}
body[data-pf] .prod-hero > .container { position: relative; z-index: 2; }

/* Family color band on prod hero (top border accent) */
body[data-pf] .prod-hero::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px; z-index:5;
  background: linear-gradient(90deg, var(--pf-c1), var(--pf-c2), var(--pf-c1));
  background-size: 200% 100%;
  animation: pfShimmer 6s linear infinite;
}
@keyframes pfShimmer { 0%{background-position:0 0;} 100%{background-position:200% 0;} }

/* Family-tinted prod card 3D */
body[data-pf] .prod-card-3d {
  background: linear-gradient(160deg, color-mix(in srgb, var(--pf-c1) 22%, transparent), color-mix(in srgb, var(--pf-c2) 12%, transparent)) !important;
  border: 1px solid color-mix(in srgb, var(--pf-c1) 30%, transparent) !important;
  box-shadow: 0 24px 60px -10px color-mix(in srgb, var(--pf-c1) 35%, transparent) !important;
}
body[data-pf] .prod-card-3d .pc3-icon i {
  color: var(--pf-c1) !important;
  filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--pf-c1) 40%, transparent));
}
body[data-pf] .prod-family-tag {
  background: color-mix(in srgb, var(--pf-c1) 15%, transparent) !important;
  border-color: color-mix(in srgb, var(--pf-c1) 35%, transparent) !important;
  color: rgba(255,255,255,.92) !important;
}

/* Visual Advantages list with check icons */
body[data-pf] .app-list li,
.prod-specs .app-list li {
  position: relative;
  padding-left: 38px;
  margin-bottom: 14px;
  list-style: none;
}
body[data-pf] .app-list li::before,
.prod-specs .app-list li::before {
  content: '\f00c'; /* fa-check */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0; top: 1px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--pf-soft, #eef4ff);
  color: var(--pf-c1, var(--blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
}

/* Visual feat-card with family hover */
body[data-pf] .prod-features .feat-card {
  border: 1px solid var(--br);
  border-radius: 16px;
  padding: 26px 22px;
  transition: all .35s;
  background: #fff;
  position: relative;
  overflow: hidden;
}
body[data-pf] .prod-features .feat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--pf-c1), var(--pf-c2));
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s;
}
body[data-pf] .prod-features .feat-card:hover::before { transform: scaleX(1); }
body[data-pf] .prod-features .feat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px -8px color-mix(in srgb, var(--pf-c1) 25%, transparent);
  border-color: color-mix(in srgb, var(--pf-c1) 30%, transparent);
}
body[data-pf] .prod-features .feat-ic {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--pf-soft);
  color: var(--pf-c1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 14px;
  transition: all .35s;
}
body[data-pf] .prod-features .feat-card:hover .feat-ic {
  background: linear-gradient(135deg, var(--pf-c1), var(--pf-c2));
  color: #fff;
  transform: scale(1.05) rotate(-4deg);
}
body[data-pf] .prod-features .feat-card:hover .feat-ic i {
  color: #fff !important;
}
body[data-pf] .prod-features .feat-card h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--tx);
  line-height: 1.3;
  margin: 0;
}
body[data-pf] .prod-features .feat-card p {
  font-size: .86rem;
  color: var(--ts);
  line-height: 1.65;
  margin-top: 8px;
}

/* Family-tinted markets pills */
body[data-pf] .tag-pill {
  background: var(--pf-soft) !important;
  border: 1px solid color-mix(in srgb, var(--pf-c1) 25%, transparent) !important;
  color: var(--pf-c2) !important;
  transition: all .25s;
}
body[data-pf] .tag-pill:hover {
  background: var(--pf-c1) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* Family-tinted sec-tag inside product */
body[data-pf] .prod-specs .sec-tag,
body[data-pf] .prod-features .sec-tag {
  background: var(--pf-soft) !important;
  color: var(--pf-c1) !important;
  border-color: color-mix(in srgb, var(--pf-c1) 30%, transparent) !important;
}

/* Family-tinted related cards */
body[data-pf] .prod-related .rel-thumb {
  background: linear-gradient(135deg, var(--pf-c1), var(--pf-c2)) !important;
}
body[data-pf] .prod-related .rel-card {
  transition: all .3s;
}
body[data-pf] .prod-related .rel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -6px color-mix(in srgb, var(--pf-c1) 25%, transparent);
}

/* CTA bar bg with family accent */
body[data-pf] .prod-cta-bar {
  background: linear-gradient(135deg, var(--pf-c2) 0%, var(--pf-c1) 100%) !important;
  position: relative;
  overflow: hidden;
}
body[data-pf] .prod-cta-bar::before {
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,.08) 0%, transparent 50%),
                    radial-gradient(circle at 80% 50%, rgba(255,255,255,.06) 0%, transparent 50%);
  pointer-events: none;
}
body[data-pf] .prod-cta-bar > * { position: relative; z-index: 2; }

/* Sticky nav fix — ensure it remains on top on all pages */
.hb-nav { position: sticky !important; top: 0 !important; z-index: 600 !important; }

/* ───── Professional section headers in product pages ───── */
body[data-pf] .prod-specs .sec-tag,
body[data-pf] .prod-features .sec-tag,
body[data-pf] .prod-related .sec-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--pf-c1, #0c479d) !important;
  margin-bottom: 18px !important;
  border-radius: 0 !important;
}
body[data-pf] .prod-specs .sec-tag::before,
body[data-pf] .prod-features .sec-tag::before,
body[data-pf] .prod-related .sec-tag::before {
  content: '';
  display: inline-block;
  width: 36px;
  height: 2px;
  background: linear-gradient(90deg, var(--pf-c1), var(--pf-c2));
  flex-shrink: 0;
}

body[data-pf] .prod-specs .sec-h2,
body[data-pf] .prod-features .sec-h2,
body[data-pf] .prod-related .sec-h2,
body[data-pf] .prod-specs h2.sec-h2,
body[data-pf] .prod-features h2.sec-h2 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(1.5rem, 2.5vw, 2.05rem) !important;
  font-weight: 800 !important;
  color: var(--tx, #0c1928) !important;
  letter-spacing: -.025em !important;
  line-height: 1.18 !important;
  margin: 0 0 28px 0 !important;
  position: relative;
  padding-bottom: 18px;
}
body[data-pf] .prod-specs .sec-h2::after,
body[data-pf] .prod-features .sec-h2::after,
body[data-pf] .prod-related .sec-h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--pf-c1), var(--pf-c2));
}
/* When sec-h2 is centered (sec-head), align the underline accordingly */
body[data-pf] .prod-features .sec-head {
  text-align: center;
  margin-bottom: 36px;
}
body[data-pf] .prod-features .sec-head .sec-tag {
  justify-content: center;
}
body[data-pf] .prod-features .sec-head .sec-h2::after {
  left: 50%;
  transform: translateX(-50%);
}

/* Smaller mb-4 utility on sec-h2 doesn't conflict because we override margin */
body[data-pf] .prod-specs .sec-h2.mb-4 { margin-bottom: 28px !important; }

/* ───── Product format cards with image ───── */
.fmt-card {
  background: #fff;
  border: 1px solid var(--br, #dde5ef);
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all .35s;
  position: relative;
}
.fmt-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pf-c1, #1a3d8f), var(--pf-c2, #0f2a6b));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s;
  z-index: 2;
}
.fmt-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -8px color-mix(in srgb, var(--pf-c1, #1a3d8f) 22%, rgba(0,0,0,.1));
  border-color: color-mix(in srgb, var(--pf-c1, #1a3d8f) 25%, transparent);
}
.fmt-card:hover::before { transform: scaleX(1); }
.fmt-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, #f5f8fb, #e6eefa);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fmt-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s;
}
.fmt-card:hover .fmt-img img { transform: scale(1.06); }
.fmt-img-icon {
  font-size: 3rem;
  color: var(--pf-c1, #1a3d8f);
}
.fmt-body {
  padding: 22px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.fmt-body h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--tx, #0c1928);
  margin: 0 0 8px;
}
.fmt-body p {
  font-size: .87rem;
  color: var(--ts, #374f6a);
  line-height: 1.65;
  margin: 0;
}

/* ───── Product hero with cover image ───── */
.prod-hero[data-cover] .prod-hero-bg { opacity: .35 !important; mix-blend-mode: overlay; }
.prod-hero[data-cover] .prod-hero-bg .g1,
.prod-hero[data-cover] .prod-hero-bg .g2 { opacity: .25; }
.prod-hero[data-cover] .prod-hero-bg .prod-hero-grid { opacity: .15; }
.prod-hero[data-cover]::before { z-index: 0 !important; }
.prod-hero[data-cover] > .container { position: relative; z-index: 3; }
.prod-hero[data-cover] .prod-card-3d {
  background: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.18) !important;
}

/* ───── Catalog cover image ───── */
.cat-card-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform .55s;
}
.cat-card:hover .cat-card-cover { transform: scale(1.06); }
.cat-card .cat-card-visual:has(.cat-card-cover) {
  background: #0a1d3a;
}
.cat-card .cat-card-visual:has(.cat-card-cover)::before { display: none; }
.cat-card .cat-card-visual:has(.cat-card-cover) .cat-card-icon { display: none; }
.cat-card .cat-card-visual:has(.cat-card-cover) .cat-card-fam {
  z-index: 2;
}
/* Subtle dark gradient over cover for fam-tag readability */
.cat-card .cat-card-visual:has(.cat-card-cover)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.25) 100%);
  z-index: 1;
  pointer-events: none;
}

/* ───── Home portfolio cover image ───── */
.pc-cover-wrap {
  width: calc(100% + 48px);
  margin: -28px -24px 18px;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 0;
  background: linear-gradient(135deg, #0a1d3a, #1a3d8f);
  position: relative;
}
.pc-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s;
}
.pc:hover .pc-cover { transform: scale(1.06); }
@media (max-width: 576px) {
  .pc-cover-wrap { width: calc(100% + 40px); margin: -22px -20px 14px; }
}

/* ───── Application photo gallery ───── */
.prod-apps-gallery {
  padding: 80px 0;
  background: var(--lt, #f5f8fb);
}
.app-photo {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: #0a1d3a;
  aspect-ratio: 16 / 10;
  box-shadow: 0 14px 36px -10px rgba(10, 24, 55, .25);
  transition: transform .35s, box-shadow .35s;
}
.app-photo:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 50px -10px rgba(10, 24, 55, .35);
}
.app-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s;
}
.app-photo:hover img { transform: scale(1.05); }
.app-photo figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 60%, transparent 100%);
  color: #fff;
  padding: 28px 22px 18px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Generic Hebron button (btn-hb) — used in cdmo, productos catalog, contacto, etc. */
.btn-hb {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 13px 28px !important;
  border-radius: 30px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: .87rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all .25s !important;
  border: none !important;
  cursor: pointer !important;
}
.btn-hb-white {
  background: #fff !important;
  color: #0c479d !important;
}
.btn-hb-white:hover {
  background: #eef4ff !important;
  color: #0c479d !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.15) !important;
}
.btn-hb-ghost-light {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.35) !important;
  padding: 11px 26px !important;
}
.btn-hb-ghost-light:hover {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.6) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}
.btn-hb-sm {
  padding: 8px 18px !important;
  font-size: .8rem !important;
}

/* 21. Hero figure — absolute, behind text, bottom-clipped */
.hero { position: relative; overflow: hidden; }
.hero-content { position: relative; z-index: 5; }
.hero-figure {
  position: absolute;
  right: -4%;
  top: 8%;
  bottom: auto;
  width: 56%;
  max-width: 920px;
  height: auto;
  object-fit: contain;
  object-position: top center;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  filter: none;
}
/* Hide the in-flow visual column so it doesn't reserve space */
.col-lg-5.d-none.d-lg-flex:has(> .hero-visual) { display: none !important; }
/* Hide the stats inside hero-visual (kept for fallback but not rendered) */
.hero-visual, .hero-visual-img, .hero-visual-stats { display: none !important; }

@media (max-width: 1399px) {
  .hero-figure { right: -8%; top: 10%; width: 60%; }
}
@media (max-width: 1199px) {
  .hero-figure { right: -10%; top: 12%; width: 65%; opacity: .85; }
}
@media (max-width: 991px) {
  .hero-figure { display: none; }
}
.hero-visual-stats {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  z-index: 3;
}
.hv-stat {
  background: rgba(8, 20, 45, .55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 14px 16px;
  color: #fff;
}
.hv-stat .n {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
}
.hv-stat .l {
  font-size: .72rem;
  opacity: .76;
  margin-top: 5px;
  line-height: 1.3;
}
.hv-stat .t {
  font-size: .68rem;
  color: #7ad9b6;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}

/* Legacy hero-img-card kept for fallback */
.hero-img-card img { display: none !important; }

/* About image — keep <img> visible if it points to a real file */
.about-img img[src*="data:image/svg"] {
  display: none !important;
}
.about-img:has(> img[src*="data:image/svg"]) {
  background: url('../img/about_plant.webp') center/cover no-repeat !important;
  min-height: 400px !important;
}

/* 22. RESPONSIVE overrides */
@media (max-width:991px) {
  .hero::before { opacity: .1 !important; }
}
@media (max-width:576px) {
  .hero h1 { font-size: clamp(1.7rem,6vw,2.4rem) !important; }
}

/* Market SVG icon inline */
.tag-ic{width:16px;height:16px;display:inline-block;vertical-align:-3px;margin-right:4px;}
.cat-card-mkt .tag-ic,.cat-card-mkts .tag-ic{width:14px;height:14px;vertical-align:-2px;margin-right:3px;}
.cat-fbtn .tag-ic{width:18px;height:18px;vertical-align:-3px;margin-right:5px;}

/* Mercados nav SVG icons (desktop dropdown + mobile) */
.dp a > img.dp-svg{width:26px!important;height:26px!important;font-size:initial!important;color:initial!important;opacity:1!important;display:inline-block;vertical-align:middle;margin-right:10px;flex-shrink:0;}
.dp a:has(> img.dp-svg){display:flex;align-items:center;}
.mms a > img.mm-ic{width:24px!important;height:24px!important;display:inline-block;vertical-align:-7px;margin-right:10px;}

/* Home — latest news cards */
.news-mini{display:flex;flex-direction:column;background:#fff;border:1px solid var(--br);border-radius:16px;overflow:hidden;height:100%;text-decoration:none;color:inherit;transition:all .3s;}
.news-mini:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(26,61,143,.18);border-color:rgba(26,61,143,.25);color:inherit;}
.news-mini-img{aspect-ratio:16/9;overflow:hidden;background:#0c1e54;}
.news-mini-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s;}
.news-mini:hover .news-mini-img img{transform:scale(1.04);}
.news-mini-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex-grow:1;}
.news-mini-meta{display:flex;align-items:center;gap:10px;}
.news-mini-cat{background:rgba(26,61,143,.1);border-radius:20px;padding:2px 10px;font-size:.7rem;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.04em;}
.news-mini-date{font-size:.74rem;color:var(--mu);}
.news-mini-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.02rem;font-weight:800;color:var(--tx);line-height:1.35;margin:0;}
.news-mini-excerpt{font-size:.88rem;color:var(--ts);line-height:1.6;margin:0;flex-grow:1;}
.news-mini-cta{font-size:.82rem;font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:6px;margin-top:4px;transition:gap .25s;}
.news-mini:hover .news-mini-cta{gap:10px;}