/* =============================================================
   CAPA VISUAL GLOBAL (premium-redesign.css)
   -------------------------------------------------------------
   QUÉ ES: hoja de estilos COMPARTIDA que unifica la dirección
   de arte de todo el sitio (colores de marca, header, footer,
   botones, secciones). La cargan las 9 páginas HTML y tienda.php
   DESPUÉS del CSS propio de cada página, por eso "gana" sobre él.
   Si editas algo aquí, afecta a TODO el sitio.

   DEPURACIÓN (jun 2026): este archivo está prácticamente 100%
   en uso; solo se eliminó 1 regla muerta (.hero-orbs).
   ============================================================= */

:root{
  --pr-ink:#071e26;
  --pr-ink-2:#0b2f38;
  --pr-green:#18a889;
  --pr-green-2:#0d7464;
  --pr-sun:#f4b942;
  --pr-paper:#f7faf8;
  --pr-soft:#edf6f3;
  --pr-line:rgba(7,30,38,.12);
  --pr-shadow:0 22px 60px rgba(7,30,38,.14);
  --pr-shadow-soft:0 14px 36px rgba(7,30,38,.09);
  --nav-h:76px;
}

html{
  scroll-padding-top:120px;
  max-width:100%;
  overflow-x:hidden;
}

body{
  background:var(--pr-paper) !important;
  color:#142b2a;
  max-width:100%;
  overflow-x:hidden;
}

body.menu-open{
  overflow:hidden;
}

.container{
  width:min(calc(100% - 48px), 1200px) !important;
}

main,
.hero,
.section,
.footer{
  max-width:100vw;
}

.site-header{
  position:fixed !important;
  top:18px !important;
  left:clamp(14px, 3vw, 34px) !important;
  right:clamp(14px, 3vw, 34px) !important;
  z-index:1000 !important;
  width:auto !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(255,255,255,.76) !important;
  border-radius:999px !important;
  box-shadow:0 18px 46px rgba(7,30,38,.12) !important;
  backdrop-filter:blur(24px) saturate(1.22) !important;
  -webkit-backdrop-filter:blur(24px) saturate(1.22) !important;
  transition:top .28s ease, box-shadow .28s ease, background .28s ease, border-color .28s ease !important;
}

.site-header.scrolled{
  top:10px !important;
  background:rgba(255,255,255,.96) !important;
  border-color:rgba(255,255,255,.9) !important;
  box-shadow:0 20px 54px rgba(7,30,38,.18) !important;
}

.nav{
  min-height:var(--nav-h) !important;
  display:grid !important;
  grid-template-columns:minmax(170px, 1fr) auto minmax(170px, 1fr) !important;
  align-items:center !important;
  gap:18px !important;
  padding:0 10px !important;
}

.nav.container{
  width:min(calc(100% - 22px), 1440px) !important;
}

.brand{
  justify-self:start !important;
  min-width:0 !important;
}

.brand-symbol{
  width:42px !important;
  height:42px !important;
  filter:drop-shadow(0 8px 18px rgba(13,92,85,.14));
}

.brand-wordmark{
  height:34px !important;
  max-width:clamp(126px, 12vw, 186px) !important;
  object-fit:contain !important;
}

.nav-pill{
  justify-self:center !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  max-width:min(100%, 820px) !important;
  padding:6px !important;
  border:1px solid rgba(7,30,38,.12) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.58) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 24px rgba(7,30,38,.06) !important;
}

.nav-menu{
  gap:2px !important;
}

.nav-menu a,
.dropbtn{
  min-height:38px !important;
  padding:9px 13px !important;
  border:1px solid transparent !important;
  border-radius:999px !important;
  color:#163433 !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1 !important;
}

.nav-menu a:hover,
.drop:hover .dropbtn,
.drop:focus-within .dropbtn{
  background:rgba(24,168,137,.10) !important;
  color:var(--pr-green-2) !important;
}

.nav-menu a.active,
.dropbtn.active{
  background:#fff !important;
  color:var(--pr-green-2) !important;
  border-color:rgba(24,168,137,.24) !important;
  box-shadow:0 8px 22px rgba(7,30,38,.10) !important;
}

.nav-menu a.active::after{
  content:none !important;
}

.drop-panel{
  border-radius:22px !important;
  border:1px solid rgba(7,30,38,.10) !important;
  box-shadow:0 26px 70px rgba(7,30,38,.18) !important;
}

.drop-panel a{
  border-radius:16px !important;
}

.nav-menu-socials{
  display:none !important;
}

.nav-right{
  justify-self:end !important;
  gap:10px !important;
}

.nav-email-btn{
  width:42px !important;
  height:42px !important;
  background:#fff !important;
  border-color:rgba(7,30,38,.10) !important;
  box-shadow:0 8px 20px rgba(7,30,38,.08) !important;
}

.nav-email-btn:hover{
  color:#fff !important;
  background:var(--pr-green-2) !important;
  border-color:var(--pr-green-2) !important;
}

.nav-cta{
  min-height:42px !important;
  padding:11px 22px !important;
  background:linear-gradient(135deg, var(--pr-green) 0%, var(--pr-green-2) 100%) !important;
  box-shadow:0 14px 30px rgba(24,168,137,.28) !important;
}

.menu-toggle{
  border-radius:999px !important;
}



.hero:not(.mini-hero){
  min-height:clamp(720px, 100svh, 940px) !important;
  background:#f7fbf8 !important;
}

.hero-video{
  filter:saturate(1.08) contrast(1.03) brightness(1.02) !important;
}

.hero-video-fallback{
  background:
    linear-gradient(to bottom, rgba(255,255,255,.58), rgba(247,250,248,.88)),
    url("../img/hero-paneles-solares.webp") center/cover no-repeat !important;
}

.hero-overlay{
  background:
    linear-gradient(to bottom, rgba(255,255,255,.86) 0%, rgba(255,255,255,.72) 36%, rgba(238,247,243,.78) 70%, rgba(247,250,248,.96) 100%),
    linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.12) 26%, rgba(255,255,255,.12) 74%, rgba(255,255,255,.92) 100%) !important;
}

.hero-overlay::after{
  background:
    radial-gradient(ellipse 66% 48% at 50% 42%, rgba(255,255,255,.72), rgba(255,255,255,.12) 72%, transparent 100%) !important;
}

.hero-content{
  width:min(calc(100% - 48px), 960px) !important;
  padding:clamp(126px, 12vw, 170px) 0 clamp(54px, 7vw, 86px) !important;
}

.hero-eyebrow{
  background:rgba(255,255,255,.82) !important;
  border-color:rgba(24,168,137,.28) !important;
  color:var(--pr-green-2) !important;
  box-shadow:0 14px 34px rgba(7,30,38,.08) !important;
}

.hero-content h1{
  max-width:940px !important;
  color:var(--pr-ink) !important;
  font-family:var(--font-sans) !important;
  font-size:clamp(46px, 7.5vw, 96px) !important;
  font-weight:900 !important;
  line-height:.98 !important;
  text-wrap:balance;
}

.hero-content h1 em{
  color:var(--pr-green) !important;
}

.mobile-break{ display:none; }

.hero-lead{
  max-width:720px !important;
  color:#264642 !important;
  font-size:clamp(17px, 2vw, 21px) !important;
}

.hero-location-pill{
  margin:0 auto 26px !important;
  background:rgba(255,255,255,.86) !important;
  border-color:rgba(7,30,38,.10) !important;
  box-shadow:0 14px 34px rgba(7,30,38,.08) !important;
}

.hero:not(.mini-hero) .hero-stats{
  display:none !important;
}

.btn,
.catalog-whatsapp{
  border-radius:999px !important;
}

.btn-hero-primary,
.btn-primary{
  background:linear-gradient(135deg, var(--pr-green) 0%, var(--pr-green-2) 100%) !important;
  color:#fff !important;
  box-shadow:0 16px 34px rgba(24,168,137,.30) !important;
}

.btn-hero-primary:hover,
.btn-primary:hover{
  background:linear-gradient(135deg, #20bb99 0%, #0a6559 100%) !important;
  box-shadow:0 22px 46px rgba(24,168,137,.36) !important;
}

.btn-hero-secondary,
.btn-dark{
  background:var(--pr-ink) !important;
  color:#fff !important;
  box-shadow:0 16px 34px rgba(7,30,38,.26) !important;
}

.btn-outline{
  border-color:rgba(7,30,38,.18) !important;
  color:var(--pr-ink) !important;
  background:#fff !important;
}

.btn-outline:hover{
  color:#fff !important;
  background:var(--pr-ink) !important;
  border-color:var(--pr-ink) !important;
}

.hero-stats{
  left:50% !important;
  right:auto !important;
  bottom:28px !important;
  width:min(calc(100% - 48px), 980px) !important;
  transform:translateX(-50%) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:28px !important;
  background:rgba(7,30,38,.84) !important;
  box-shadow:0 26px 70px rgba(7,30,38,.24) !important;
  backdrop-filter:blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.2) !important;
  overflow:hidden !important;
}

.hero-stat{
  max-width:none !important;
  padding:22px 18px !important;
}

.hero-stat strong{
  color:#fff !important;
}

.hero-stat span{
  color:rgba(255,255,255,.70) !important;
}

.hero-scroll{
  display:none !important;
}

.mini-hero{
  min-height:430px !important;
  padding-top:104px !important;
  background-image:var(--hero-image) !important;
  background-size:cover !important;
  background-position:center !important;
  display:flex !important;
  align-items:center !important;
  color:#fff !important;
}

.mini-hero::before{
  background:
    linear-gradient(120deg, rgba(7,30,38,.72) 0%, rgba(9,47,56,.56) 48%, rgba(13,92,85,.22) 100%),
    linear-gradient(to bottom, rgba(7,30,38,.10), rgba(7,30,38,.24)) !important;
}

.mini-hero::after{
  display:none !important;
}

.mini-hero .hero-inner{
  min-height:auto !important;
  display:flex !important;
  justify-content:center !important;
  padding:64px 0 78px !important;
  text-align:center !important;
  width:100% !important;
  min-width:0 !important;
}

.mini-hero .hero-inner > .reveal{
  width:100% !important;
  max-width:900px !important;
  min-width:0 !important;
  margin:0 auto !important;
}

.mini-hero h1{
  width:100% !important;
  max-width:900px !important;
  margin-inline:auto !important;
  color:#fff !important;
  font-family:var(--font-sans) !important;
  font-size:clamp(38px, 5.5vw, 68px) !important;
  line-height:1.02 !important;
  overflow-wrap:break-word !important;
  text-wrap:balance;
}

.mini-hero .lead{
  width:100% !important;
  max-width:780px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  color:rgba(255,255,255,.82) !important;
  overflow-wrap:break-word !important;
}

.mini-hero .breadcrumbs{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  margin-bottom:20px !important;
  padding:7px 14px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.10) !important;
  color:rgba(255,255,255,.72) !important;
  text-decoration:none !important;
}

.mini-hero .breadcrumbs a{
  color:#fff !important;
  text-decoration:none !important;
}

.mini-hero .breadcrumbs span[aria-current]{
  color:#bff7e8 !important;
}

.mini-hero .kicker{
  justify-content:center !important;
  flex-wrap:wrap !important;
  white-space:normal !important;
  color:#bff7e8 !important;
}

.mini-hero .kicker::before{
  background:var(--pr-sun) !important;
}

.mini-hero .btn-ghost{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.34) !important;
  color:#fff !important;
}

.mini-hero .btn-ghost:hover{
  background:#fff !important;
  border-color:#fff !important;
  color:var(--pr-ink) !important;
}

.mini-hero .btns{
  justify-content:center !important;
}

.section{
  padding:clamp(76px, 8vw, 118px) 0 !important;
}

.section.white{
  background:#fff !important;
}

.section.soft,
.section.cream{
  background:linear-gradient(180deg, #f7faf8 0%, #edf6f3 100%) !important;
}

.section.dark{
  background:
    linear-gradient(135deg, var(--pr-ink) 0%, var(--pr-ink-2) 58%, #0d5c55 100%) !important;
}

.section-head{
  max-width:820px !important;
  margin-bottom:clamp(36px, 5vw, 58px) !important;
}

.kicker{
  color:var(--pr-green-2) !important;
  letter-spacing:.13em !important;
}

.section:not(.dark) .section-head:not(.center) h2,
.section:not(.dark) .reveal > .kicker + h2{
  position:relative !important;
  padding-left:24px !important;
}

.section:not(.dark) .section-head:not(.center) h2::before,
.section:not(.dark) .reveal > .kicker + h2::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:.18em !important;
  width:5px !important;
  height:1.15em !important;
  border-radius:999px !important;
  background:linear-gradient(180deg, var(--pr-green), var(--pr-sun)) !important;
}

.section-head.center h2::after{
  content:"" !important;
  display:block !important;
  width:72px !important;
  height:4px !important;
  margin:18px auto 0 !important;
  border-radius:999px !important;
  background:linear-gradient(90deg, var(--pr-green), var(--pr-sun)) !important;
}

.grid-2{
  gap:clamp(36px, 5vw, 70px) !important;
}

.grid-3{
  gap:clamp(22px, 3vw, 32px) !important;
}

.grid-4{
  gap:24px !important;
}

.card,
.contact-panel,
.quote,
.simulator,
.timeline,
.stats,
.catalog-note{
  border-radius:26px !important;
  border:1px solid var(--pr-line) !important;
  box-shadow:var(--pr-shadow-soft) !important;
}

.card{
  padding:30px !important;
  background:#fff !important;
}

.card:hover,
.catalog-card:hover{
  box-shadow:var(--pr-shadow) !important;
  border-color:rgba(24,168,137,.28) !important;
}

.card .media{
  border-radius:22px 22px 0 0 !important;
}

.card .media img{
  height:clamp(220px, 22vw, 290px) !important;
}

.card h3,
.catalog-body h3{
  color:var(--pr-ink) !important;
}

.image-card{
  min-height:clamp(360px, 38vw, 500px) !important;
  border-radius:30px !important;
  box-shadow:var(--pr-shadow) !important;
}

.image-card::after{
  background:linear-gradient(to top, rgba(7,30,38,.74), rgba(7,30,38,.18) 54%, rgba(7,30,38,0)) !important;
}

.image-card .caption{
  border-radius:22px !important;
  background:rgba(7,30,38,.64) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
}

.list li::before{
  background:var(--pr-green) !important;
}

.timeline{
  padding:26px !important;
  background:#fff !important;
}

.tl-item{
  border-color:rgba(7,30,38,.10) !important;
}

.contact-panel,
.simulator{
  background:#fff !important;
}

.field input,
.field textarea,
.field select,
.catalog-search input{
  border-radius:18px !important;
  border-color:rgba(7,30,38,.14) !important;
  background:#fff !important;
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.catalog-search input:focus{
  border-color:var(--pr-green) !important;
  box-shadow:0 0 0 4px rgba(24,168,137,.14) !important;
}

.catalog-section{
  background:linear-gradient(180deg, #fff 0%, #f4faf7 100%) !important;
}

.catalog-toolbar{
  border-radius:999px !important;
  border-color:rgba(7,30,38,.10) !important;
  background:rgba(255,255,255,.78) !important;
  box-shadow:0 14px 34px rgba(7,30,38,.06) !important;
}

.catalog-filter.active::before{
  background:linear-gradient(135deg, var(--pr-green) 0%, var(--pr-green-2) 100%) !important;
}

.catalog-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:28px !important;
}

.catalog-card{
  border-radius:26px !important;
  border:1px solid rgba(7,30,38,.10) !important;
  box-shadow:var(--pr-shadow-soft) !important;
}

.catalog-card::before,
.catalog-card::after{
  display:none !important;
}

.catalog-photo{
  border-radius:26px 26px 0 0 !important;
}

.catalog-photo img{
  height:270px !important;
}

.catalog-body{
  padding:28px !important;
}

.catalog-price{
  color:var(--pr-ink) !important;
}

.catalog-whatsapp{
  background:var(--pr-ink) !important;
}

.catalog-whatsapp::before{
  background:linear-gradient(120deg, var(--pr-green-2), #25d366) !important;
}

.footer{
  background:linear-gradient(180deg, #1a746c, #125f58) !important;
  color:rgba(255,255,255,.78) !important;
}

.whatsapp-float{
  box-shadow:0 16px 42px rgba(37,211,102,.34) !important;
}

@media (min-width:1500px){
  .catalog-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width:1240px){
  :root{
    --nav-h:68px;
  }

  .site-header{
    top:10px !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    max-width:none !important;
    border-radius:28px !important;
  }

  .site-header.scrolled{
    top:8px !important;
  }

  .nav{
    position:relative !important;
    grid-template-columns:1fr auto !important;
    min-height:var(--nav-h) !important;
    padding:0 60px 0 12px !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  .brand-symbol{
    width:38px !important;
    height:38px !important;
  }

  .brand-wordmark{
    height:30px !important;
    max-width:150px !important;
  }

  .menu-toggle{
    position:absolute !important;
    right:8px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    justify-self:end !important;
  }

  .nav-right{
    display:none !important;
  }

  .nav-pill{
    position:fixed !important;
    top:calc(var(--nav-h) + 22px) !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100dvh - 96px) !important;
    overflow:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    padding:16px !important;
    border-radius:28px !important;
    background:rgba(255,255,255,.97) !important;
    box-shadow:0 24px 70px rgba(7,30,38,.24) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(-10px) !important;
    transition:opacity .22s ease, visibility .22s ease, transform .22s ease !important;
  }

  .nav-pill.open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
  }

  .nav-pill .nav-menu{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    width:100% !important;
    gap:6px !important;
  }

  .nav-menu a,
  .dropbtn{
    width:100% !important;
    min-height:48px !important;
    justify-content:flex-start !important;
    padding:14px 16px !important;
    font-size:15px !important;
  }

  .dropbtn{
    justify-content:space-between !important;
  }

  .drop-panel{
    position:static !important;
    min-width:0 !important;
    transform:none !important;
    margin:6px 0 4px !important;
    box-shadow:none !important;
    border-radius:18px !important;
    background:var(--pr-soft) !important;
  }

  .drop:hover .drop-panel{
    display:none;
  }

  .drop.open .drop-panel,
  .drop:focus-within .drop-panel{
    display:grid !important;
  }

  .nav-menu-socials{
    display:flex !important;
    justify-content:center !important;
  }
}

@media (max-width:980px){
  .container{
    width:min(calc(100% - 32px), 1200px) !important;
  }

  .mini-hero .container.hero-inner{
    width:calc(100vw - 32px) !important;
    max-width:calc(100vw - 32px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .mini-hero .hero-inner > .reveal,
  .mini-hero h1,
  .mini-hero .lead,
  .mini-hero .btns{
    max-width:100% !important;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .catalog-grid{
    grid-template-columns:1fr !important;
  }

  .hero:not(.mini-hero){
    min-height:820px !important;
  }

  .hero-content{
    width:min(calc(100% - 32px), 900px) !important;
    padding:112px 0 72px !important;
  }

  .hero-content h1{
    font-size:clamp(40px, 12vw, 60px) !important;
  }

  .hero-btns,
  .btns{
    display:grid !important;
  }

  .hero-btns .btn,
  .btns .btn{
    width:100% !important;
  }

  .hero-stats{
    width:calc(100% - 28px) !important;
    bottom:18px !important;
    flex-wrap:wrap !important;
    border-radius:24px !important;
  }

  .hero-stat{
    flex:0 0 50% !important;
    max-width:50% !important;
    padding:17px 12px !important;
  }

  .mini-hero{
    min-height:410px !important;
    padding-top:88px !important;
  }

  .mini-hero .hero-inner{
    padding:48px 0 58px !important;
  }

  .mini-hero h1{
    font-size:clamp(30px, 8.8vw, 42px) !important;
  }

  .catalog-photo img{
    height:240px !important;
  }
}

@media (max-height:820px) and (min-width:981px){
  .hero:not(.mini-hero){
    min-height:100svh !important;
  }

  .hero-content{
    padding:112px 0 42px !important;
  }

  .hero-eyebrow{
    margin-bottom:20px !important;
  }

  .hero-content h1{
    font-size:clamp(42px, 6.6vw, 78px) !important;
    margin-bottom:18px !important;
  }

  .hero-lead{
    font-size:18px !important;
    line-height:1.55 !important;
    margin-bottom:24px !important;
  }

  .hero-location-pill{
    padding:9px 18px !important;
    margin-bottom:22px !important;
  }

  .btn-hero-primary,
  .btn-hero-secondary{
    padding:14px 28px !important;
  }
}

@media (max-height:720px) and (min-width:981px){
  .site-header{
    top:10px !important;
  }

  .hero-content{
    padding:96px 0 32px !important;
  }

  .hero-content h1{
    font-size:clamp(40px, 6vw, 68px) !important;
  }

  .hero-lead{
    max-width:680px !important;
    font-size:17px !important;
    margin-bottom:18px !important;
  }

  .hero-location-pill{
    margin-bottom:16px !important;
  }
}

@media (max-width:560px){
  .container{
    width:min(calc(100% - 28px), 1200px) !important;
  }

  .site-header{
    left:8px !important;
    right:8px !important;
    width:auto !important;
    max-width:none !important;
  }

  .mini-hero .container.hero-inner{
    width:calc(100vw - 28px) !important;
    max-width:calc(100vw - 28px) !important;
  }

  .brand-wordmark{
    max-width:124px !important;
  }

  .hero:not(.mini-hero){
    min-height:860px !important;
  }

  .hero-content{
    width:min(calc(100% - 28px), 900px) !important;
    padding:104px 0 64px !important;
  }

  .hero-content h1{
    font-size:clamp(32px, 9vw, 36px) !important;
    line-height:1.08 !important;
  }

  .mobile-break{ display:inline !important; }

  h2{
    font-size:clamp(28px, 8vw, 32px) !important;
  }

  .hero-eyebrow{
    max-width:100% !important;
    white-space:normal !important;
    justify-content:center !important;
    text-align:center !important;
  }

  .hero-location-pill{
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:normal !important;
    line-height:1.35 !important;
  }

  .hero-lead,
  .section-head,
  .section-head p,
  .text{
    max-width:calc(100vw - 120px) !important;
    width:min(260px, calc(100vw - 96px)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  .hero-stat{
    padding:15px 10px !important;
  }

  .hero-stat strong{
    font-size:34px !important;
  }

  .mini-hero .breadcrumbs{
    max-width:100% !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
  }

  .mini-hero .kicker{
    font-size:10px !important;
    letter-spacing:.09em !important;
  }

  .section{
    padding:60px 0 !important;
  }

  .section:not(.dark) .section-head:not(.center) h2,
  .section:not(.dark) .reveal > .kicker + h2{
    padding-left:18px !important;
  }

  .card,
  .contact-panel,
  .quote,
  .simulator,
  .timeline{
    border-radius:22px !important;
    padding:24px !important;
  }

  .catalog-toolbar{
    border-radius:22px !important;
  }

  .catalog-filter{
    flex:1 1 100% !important;
  }
}

/* ============================================================
   Responsive hardening - home/index
   Keeps the existing routes and markup intact while tightening
   spacing, touch targets and menu behavior across breakpoints.
   ============================================================ */
h1,
h2,
h3,
h4{
  letter-spacing:0 !important;
}

.btn,
.nav-menu a,
.dropbtn,
.menu-toggle,
.nav-email-btn,
.nav-cta,
.whatsapp-float{
  touch-action:manipulation;
}

.btn{
  min-height:48px !important;
}

.card,
.image-card,
.contact-panel,
.quote{
  overflow:hidden;
}

.card .media img,
.image-card img,
.catalog-photo img{
  width:100% !important;
  object-fit:cover !important;
}

.hero-video{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

@media (max-width:1200px){
  .container{
    width:min(calc(100% - 40px), 1120px) !important;
  }

  .hero-content h1{
    font-size:76px !important;
    line-height:1.02 !important;
  }

  .hero-lead{
    width:min(100%, 720px) !important;
    max-width:720px !important;
  }

  .nav-pill{
    left:50% !important;
    right:auto !important;
    width:min(calc(100vw - 20px), 560px) !important;
    max-width:min(calc(100vw - 20px), 560px) !important;
    background:#fff !important;
    transform:translateX(-50%) translateY(-10px) !important;
  }

  .nav-pill.open{
    transform:translateX(-50%) translateY(0) !important;
  }

  .nav-pill .nav-menu a,
  .nav-pill .dropbtn{
    width:100% !important;
  }
}

@media (max-width:992px){
  .container{
    width:min(calc(100% - 34px), 920px) !important;
  }

  .hero:not(.mini-hero){
    min-height:780px !important;
  }

  .hero-content{
    width:min(calc(100% - 34px), 900px) !important;
    padding:116px 0 72px !important;
  }

  .hero-content h1{
    font-size:58px !important;
    line-height:1.04 !important;
  }

  .hero-lead{
    width:100% !important;
    max-width:680px !important;
    font-size:18px !important;
    line-height:1.62 !important;
  }

  .grid-2{
    grid-template-columns:1fr !important;
  }

  .grid-3{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .section{
    padding:78px 0 !important;
  }

  .image-card{
    min-height:380px !important;
  }
}

@media (max-width:768px){
  .container{
    width:min(calc(100% - 30px), 720px) !important;
  }

  .nav{
    padding:0 58px 0 10px !important;
  }

  .brand{
    gap:8px !important;
  }

  .brand-symbol{
    width:36px !important;
    height:36px !important;
  }

  .brand-wordmark{
    height:28px !important;
    max-width:138px !important;
  }

  .nav-pill{
    width:min(calc(100vw - 18px), 520px) !important;
    max-width:min(calc(100vw - 18px), 520px) !important;
    max-height:min(640px, calc(100dvh - 104px)) !important;
    padding:14px !important;
  }

  .hero:not(.mini-hero){
    min-height:auto !important;
  }

  .hero-content{
    width:min(calc(100% - 30px), 680px) !important;
    padding:104px 0 58px !important;
  }

  .hero-eyebrow{
    margin-bottom:20px !important;
  }

  .hero-content h1{
    font-size:44px !important;
    line-height:1.07 !important;
  }

  .hero-lead{
    width:100% !important;
    max-width:620px !important;
    margin:22px auto 24px !important;
    font-size:17px !important;
    line-height:1.58 !important;
  }

  .hero-location-pill{
    margin-bottom:22px !important;
  }

  .hero-btns,
  .btns{
    gap:12px !important;
  }

  .grid-3,
  .grid-4,
  .catalog-grid{
    grid-template-columns:1fr !important;
  }

  .field-row{
    grid-template-columns:1fr !important;
  }

  .section-head,
  .section-head p,
  .text{
    width:100% !important;
    max-width:100% !important;
  }

  .card{
    padding:24px !important;
  }

  .card .media img{
    height:240px !important;
  }

  .image-card{
    min-height:340px !important;
  }

  .footer-grid{
    gap:30px !important;
  }
}

@media (max-width:480px){
  .container{
    width:calc(100% - 28px) !important;
  }

  .site-header{
    top:8px !important;
    left:8px !important;
    right:8px !important;
    border-radius:24px !important;
  }

  .nav{
    min-height:64px !important;
    padding:0 56px 0 9px !important;
  }

  .brand-symbol{
    width:34px !important;
    height:34px !important;
  }

  .brand-wordmark{
    max-width:132px !important;
  }

  .menu-toggle{
    width:46px !important;
    height:46px !important;
    right:7px !important;
  }

  .nav-pill{
    top:82px !important;
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    padding:14px !important;
    border-radius:24px !important;
  }

  .nav-menu a,
  .dropbtn{
    min-height:50px !important;
    padding:14px 15px !important;
    font-size:15px !important;
  }

  .hero-content{
    width:calc(100% - 28px) !important;
    padding:94px 0 88px !important;
  }

  .hero-content h1{
    font-size:34px !important;
    line-height:1.1 !important;
  }

  .hero-lead,
  .section-head,
  .section-head p,
  .text{
    width:100% !important;
    max-width:100% !important;
    overflow-wrap:break-word !important;
  }

  .hero-lead{
    margin:20px auto 22px !important;
    font-size:16px !important;
    line-height:1.55 !important;
  }

  .hero-location-pill{
    padding:10px 14px !important;
    font-size:13px !important;
  }

  .hero-btns .btn,
  .btns .btn{
    min-height:54px !important;
    padding:13px 18px !important;
  }

  h2{
    font-size:32px !important;
    line-height:1.12 !important;
  }

  h3{
    font-size:23px !important;
  }

  .section{
    padding:58px 0 !important;
  }

  .card,
  .contact-panel,
  .quote,
  .simulator,
  .timeline{
    padding:22px !important;
    border-radius:20px !important;
  }

  .card .media{
    border-radius:18px !important;
  }

  .card .media img{
    height:220px !important;
  }

  .image-card{
    min-height:310px !important;
    border-radius:22px !important;
  }

  .image-card .caption{
    left:14px !important;
    right:14px !important;
    bottom:14px !important;
  }

  .contact-panel input,
  .contact-panel textarea,
  .contact-panel select{
    min-height:50px !important;
  }

  .whatsapp-float{
    right:12px !important;
    bottom:12px !important;
    width:54px !important;
    height:54px !important;
  }

  .whatsapp-float svg{
    width:27px !important;
    height:27px !important;
  }
}

/* Scroll cue: indica de forma sutil que hay más contenido debajo del hero. */
.hero-scroll{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  bottom:22px !important;
  z-index:5 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  min-height:34px !important;
  padding:8px 14px !important;
  border:1px solid rgba(7,30,38,.10) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.84) !important;
  color:var(--pr-green-2) !important;
  box-shadow:0 14px 34px rgba(7,30,38,.08) !important;
  backdrop-filter:blur(14px) saturate(1.18) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.18) !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  transform:translateX(-50%) !important;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease !important;
  animation:prScrollCue 1.9s ease-in-out infinite !important;
}

.hero-scroll:hover,
.hero-scroll:focus-visible{
  background:#fff !important;
  color:var(--pr-ink) !important;
  box-shadow:0 18px 42px rgba(7,30,38,.14) !important;
}

.hero-scroll::after{
  content:"" !important;
  width:8px !important;
  height:8px !important;
  margin:0 !important;
  border-right:2px solid currentColor !important;
  border-bottom:2px solid currentColor !important;
  background:none !important;
  transform:rotate(45deg) !important;
  opacity:.9 !important;
}

@keyframes prScrollCue{
  0%, 100%{
    transform:translateX(-50%) translateY(0);
  }
  50%{
    transform:translateX(-50%) translateY(8px);
  }
}

@media (max-width:768px){
  .hero-scroll{
    bottom:14px !important;
    min-height:30px !important;
    padding:7px 12px !important;
    font-size:10px !important;
  }
}

@media (max-width:480px){
  .hero-scroll{
    bottom:10px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-scroll{
    animation:none !important;
  }
}

/* ============================================================
   Banner readability pass
   Moves copy away from the exact center so product/place images
   stay visible while the text remains readable on desktop/mobile.
   ============================================================ */
.mini-hero{
  min-height:clamp(390px, 52vw, 520px) !important;
  align-items:flex-end !important;
  background-position:center right !important;
}

.mini-hero::before{
  background:
    linear-gradient(90deg, rgba(7,30,38,.82) 0%, rgba(7,30,38,.58) 34%, rgba(7,30,38,.18) 68%, rgba(7,30,38,.08) 100%),
    linear-gradient(to top, rgba(7,30,38,.72) 0%, rgba(7,30,38,.16) 56%, rgba(7,30,38,.10) 100%) !important;
}

.mini-hero .hero-inner{
  justify-content:flex-start !important;
  align-items:flex-end !important;
  text-align:left !important;
  padding:clamp(96px, 12vw, 134px) clamp(22px, 5vw, 72px) clamp(56px, 7vw, 82px) !important;
}

.mini-hero .hero-inner > .reveal{
  max-width:680px !important;
  margin:0 !important;
  opacity:1 !important;
  transform:none !important;
}

.mini-hero h1,
.mini-hero .lead,
.mini-hero .kicker,
.mini-hero .breadcrumbs,
.mini-hero .btns{
  margin-left:0 !important;
  margin-right:auto !important;
  text-align:left !important;
  justify-content:flex-start !important;
}

.mini-hero h1{
  max-width:680px !important;
  font-size:clamp(34px, 5vw, 58px) !important;
  line-height:1.04 !important;
  text-shadow:0 3px 24px rgba(0,0,0,.32) !important;
}

.mini-hero .lead{
  max-width:600px !important;
  font-size:clamp(15.5px, 1.5vw, 18px) !important;
  line-height:1.55 !important;
  color:rgba(255,255,255,.88) !important;
  text-shadow:0 2px 16px rgba(0,0,0,.28) !important;
}

.mini-hero .breadcrumbs{
  max-width:100% !important;
}

.hero:not(.mini-hero) .hero-content{
  margin-left:clamp(18px, 7vw, 90px) !important;
  margin-right:auto !important;
  text-align:left !important;
}

.hero:not(.mini-hero) .hero-lead,
.hero:not(.mini-hero) .hero-btns,
.hero:not(.mini-hero) .hero-location-pill{
  margin-left:0 !important;
  margin-right:auto !important;
}

@media (max-width:768px){
  .mini-hero{
    min-height:360px !important;
    background-position:center !important;
  }

  .mini-hero::before{
    background:
      linear-gradient(to top, rgba(7,30,38,.88) 0%, rgba(7,30,38,.62) 46%, rgba(7,30,38,.24) 100%) !important;
  }

  .mini-hero .container.hero-inner{
    width:calc(100vw - 28px) !important;
    max-width:calc(100vw - 28px) !important;
  }

  .mini-hero .hero-inner{
    padding:96px 0 50px !important;
  }

  .mini-hero h1{
    max-width:100% !important;
    font-size:clamp(27px, 8vw, 36px) !important;
  }

  .mini-hero .lead{
    max-width:100% !important;
    margin-top:14px !important;
    font-size:14.8px !important;
    line-height:1.5 !important;
  }

  .mini-hero .breadcrumbs{
    margin-bottom:14px !important;
    padding:6px 11px !important;
    font-size:11px !important;
  }

  .hero:not(.mini-hero) .hero-content{
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media (max-width:480px){
  .mini-hero{
    min-height:330px !important;
  }

  .mini-hero .hero-inner{
    padding:88px 0 44px !important;
  }

  .mini-hero h1{
    font-size:clamp(24px, 7.8vw, 32px) !important;
  }

  .mini-hero .lead{
    font-size:14px !important;
  }
}

/* Mobile nav visibility safeguard. */
@media (max-width:1240px){
  .menu-toggle{
    position:fixed !important;
    top:20px !important;
    right:20px !important;
    transform:none !important;
    display:inline-flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:46px !important;
    height:46px !important;
    border:1px solid rgba(7,30,38,.14) !important;
    background:#fff !important;
    box-shadow:0 8px 20px rgba(7,30,38,.10) !important;
    z-index:1002 !important;
  }

  .menu-toggle span{
    display:block !important;
    width:20px !important;
    height:2px !important;
    margin:3px 0 !important;
    border-radius:999px !important;
    background:var(--pr-ink) !important;
  }
}

/* ============================================================
   Internal banner final pass
   Compact, readable heroes for every inner page. Index keeps its
   full hero because it does not use .mini-hero.
   ============================================================ */
.mini-hero{
  min-height:clamp(390px, 42vw, 520px) !important;
  padding-top:clamp(84px, 8vw, 102px) !important;
  align-items:flex-end !important;
  background-image:var(--hero-image) !important;
  background-position:var(--hero-position, center right) !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-color:#08272f !important;
}

.mini-hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background:
    linear-gradient(90deg, rgba(4,24,29,.90) 0%, rgba(5,31,36,.76) 38%, rgba(8,43,48,.34) 68%, rgba(8,43,48,.14) 100%),
    linear-gradient(to top, rgba(4,24,29,.66) 0%, rgba(4,24,29,.22) 58%, rgba(4,24,29,.10) 100%) !important;
  transform:none !important;
  animation:none !important;
}

.mini-hero::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:-1px !important;
  z-index:0 !important;
  display:block !important;
  height:76px !important;
  background:linear-gradient(to bottom, rgba(247,250,248,0), rgba(247,250,248,.96)) !important;
  pointer-events:none !important;
}

.mini-hero .container.hero-inner{
  width:min(calc(100% - 48px), 1200px) !important;
  max-width:min(calc(100% - 48px), 1200px) !important;
}

.mini-hero .hero-inner{
  position:relative !important;
  z-index:1 !important;
  min-height:auto !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  padding:clamp(22px, 4vw, 42px) 0 clamp(44px, 5vw, 62px) !important;
  text-align:left !important;
}

.mini-hero .hero-inner > .reveal{
  width:min(100%, 760px) !important;
  max-width:760px !important;
  margin:0 !important;
  opacity:1 !important;
  transform:none !important;
}

.mini-hero h1{
  max-width:760px !important;
  color:#fff !important;
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  font-size:clamp(32px, 4.25vw, 52px) !important;
  line-height:1.04 !important;
  letter-spacing:0 !important;
  text-shadow:0 4px 26px rgba(0,0,0,.38) !important;
  animation:none !important;
}

.mini-hero .lead{
  max-width:640px !important;
  margin-top:16px !important;
  color:rgba(255,255,255,.88) !important;
  font-size:clamp(15.5px, 1.25vw, 17px) !important;
  line-height:1.5 !important;
  text-shadow:0 2px 16px rgba(0,0,0,.32) !important;
}

.mini-hero .breadcrumbs{
  margin-bottom:14px !important;
  padding:6px 12px !important;
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.20) !important;
  color:rgba(255,255,255,.78) !important;
  backdrop-filter:blur(14px) saturate(1.15) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.15) !important;
}

.mini-hero .kicker{
  color:#bff7e8 !important;
  letter-spacing:.12em !important;
}

.mini-hero .btns{
  margin-top:24px !important;
  gap:10px !important;
}

.mini-hero .btn{
  min-height:42px !important;
  padding:11px 22px !important;
  border-radius:999px !important;
}

.mini-hero + .section{
  padding-top:clamp(48px, 5vw, 72px) !important;
}

.mini-hero + .section .reveal{
  opacity:1 !important;
  transform:none !important;
}

@media (max-width:768px){
  .mini-hero{
    min-height:clamp(430px, 72svh, 560px) !important;
    padding-top:82px !important;
    background-position:var(--hero-position-mobile, center) !important;
  }

  .mini-hero::before{
    background:
      linear-gradient(to top, rgba(4,24,29,.94) 0%, rgba(4,24,29,.74) 52%, rgba(4,24,29,.28) 100%) !important;
  }

  .mini-hero::after{
    height:54px !important;
  }

  .mini-hero .container.hero-inner{
    width:calc(100% - 28px) !important;
    max-width:calc(100% - 28px) !important;
  }

  .mini-hero .hero-inner{
    padding:28px 0 40px !important;
  }

  .mini-hero h1{
    max-width:100% !important;
    font-size:clamp(28px, 8vw, 38px) !important;
    line-height:1.06 !important;
  }

  .mini-hero .lead{
    max-width:100% !important;
    font-size:14.5px !important;
    line-height:1.48 !important;
  }

  .mini-hero .btns{
    margin-top:18px !important;
  }

  .mini-hero .btn{
    min-height:40px !important;
    padding:10px 16px !important;
  }

  .mini-hero + .section{
    padding-top:42px !important;
  }
}

/* ============================================================
   Requested hero corrections
   Keep the home hero centered and make every inner-page cue
   visible/clickable without touching page logic.
   ============================================================ */
.hero:not(.mini-hero){
  min-height:clamp(680px, 100svh, 880px) !important;
}

.hero:not(.mini-hero) .hero-video,
.hero:not(.mini-hero) .hero-video-fallback{
  object-position:center center !important;
  background-position:center center !important;
}

.hero:not(.mini-hero) .hero-overlay{
  background:
    linear-gradient(to bottom, rgba(255,255,255,.68) 0%, rgba(255,255,255,.54) 38%, rgba(238,247,243,.66) 72%, rgba(247,250,248,.94) 100%),
    linear-gradient(90deg, rgba(255,255,255,.76) 0%, rgba(255,255,255,.28) 26%, rgba(255,255,255,.28) 74%, rgba(255,255,255,.76) 100%) !important;
}

.hero:not(.mini-hero) .hero-overlay::after{
  background:
    radial-gradient(ellipse 64% 46% at 50% 43%, rgba(255,255,255,.52), rgba(255,255,255,.10) 74%, transparent 100%) !important;
}

.hero:not(.mini-hero) .hero-content{
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

.hero:not(.mini-hero) .hero-eyebrow,
.hero:not(.mini-hero) .hero-location-pill,
.hero:not(.mini-hero) .hero-lead,
.hero:not(.mini-hero) .hero-content h1{
  margin-left:auto !important;
  margin-right:auto !important;
}

.hero:not(.mini-hero) .hero-btns{
  justify-content:center !important;
}

.mini-hero .hero-scroll{
  left:50% !important;
  right:auto !important;
  bottom:18px !important;
  display:inline-flex !important;
  transform:translateX(-50%) !important;
  animation:prMiniScrollPulse 2s ease-in-out infinite !important;
  box-shadow:0 14px 34px rgba(24,168,137,.18), 0 0 0 0 rgba(24,168,137,.30) !important;
}

@keyframes prMiniScrollPulse{
  0%, 100%{
    transform:translateX(-50%) translateY(0) scale(1);
    box-shadow:0 14px 34px rgba(24,168,137,.18), 0 0 0 0 rgba(24,168,137,.30);
  }
  50%{
    transform:translateX(-50%) translateY(7px) scale(1.06);
    box-shadow:0 20px 44px rgba(24,168,137,.28), 0 0 0 10px rgba(24,168,137,0);
  }
}

@media (max-width:1024px){
  .hero:not(.mini-hero){
    min-height:clamp(660px, 100svh, 820px) !important;
  }

  .hero:not(.mini-hero) .hero-content{
    width:min(calc(100% - 36px), 900px) !important;
    padding-top:clamp(118px, 14vw, 150px) !important;
  }
}

@media (max-width:768px){
  .hero:not(.mini-hero){
    min-height:clamp(680px, 100svh, 820px) !important;
  }

  .hero:not(.mini-hero) .hero-overlay{
    background:
      linear-gradient(to bottom, rgba(255,255,255,.72) 0%, rgba(255,255,255,.58) 42%, rgba(238,247,243,.74) 74%, rgba(247,250,248,.96) 100%) !important;
  }

  .hero:not(.mini-hero) .hero-content{
    width:min(calc(100% - 30px), 620px) !important;
    padding:112px 0 82px !important;
  }

  .hero:not(.mini-hero) .hero-content h1{
    font-size:clamp(34px, 10vw, 54px) !important;
    line-height:1.02 !important;
  }

  .hero:not(.mini-hero) .hero-lead{
    max-width:560px !important;
    font-size:15.8px !important;
  }

  .hero:not(.mini-hero) .hero-btns{
    align-items:center !important;
  }

  .mini-hero .hero-inner{
    padding-bottom:76px !important;
  }

  .mini-hero .hero-scroll{
    left:50% !important;
    bottom:12px !important;
    min-height:32px !important;
    padding:7px 12px !important;
    font-size:10px !important;
    transform:translateX(-50%) !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .mini-hero .hero-scroll{
    animation:none !important;
  }
}

/* Final mobile fit for the centered home hero. */
.hero:not(.mini-hero) .hero-overlay{
  background:
    linear-gradient(to bottom, rgba(255,255,255,.58) 0%, rgba(255,255,255,.44) 38%, rgba(238,247,243,.58) 72%, rgba(247,250,248,.90) 100%),
    linear-gradient(90deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.20) 26%, rgba(255,255,255,.20) 74%, rgba(255,255,255,.66) 100%) !important;
}

@media (max-width:768px){
  .hero:not(.mini-hero) .hero-overlay{
    background:
      linear-gradient(to bottom, rgba(255,255,255,.62) 0%, rgba(255,255,255,.48) 42%, rgba(238,247,243,.64) 74%, rgba(247,250,248,.92) 100%) !important;
  }

  .hero:not(.mini-hero) .hero-content{
    width:calc(100% - 30px) !important;
    max-width:360px !important;
    overflow:hidden !important;
  }

  .hero:not(.mini-hero) .hero-content h1,
  .hero:not(.mini-hero) .hero-lead,
  .hero:not(.mini-hero) .hero-location-pill,
  .hero:not(.mini-hero) .hero-btns{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .hero:not(.mini-hero) .hero-lead{
    overflow-wrap:break-word !important;
  }

  .hero:not(.mini-hero) .hero-btns{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
  }

  .hero:not(.mini-hero) .hero-btns .btn{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    justify-content:center !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    box-sizing:border-box !important;
  }
}

@media (max-width:480px){
  .hero:not(.mini-hero) .hero-content{
    width:calc(100vw - 30px) !important;
    max-width:calc(100vw - 30px) !important;
    margin-left:15px !important;
    margin-right:15px !important;
  }

  .mini-hero{
    min-height:clamp(420px, 78svh, 540px) !important;
  }

  .mini-hero h1{
    font-size:clamp(26px, 8.4vw, 34px) !important;
  }

  .mini-hero .breadcrumbs{
    max-width:100% !important;
    white-space:normal !important;
  }
}

/* ============================================================
   Click-to-view image lightbox for content photos.
   Applied from script.js only to main content images.
   ============================================================ */
main img.pr-lightbox-image,
main svg.pr-lightbox-image{
  cursor:zoom-in !important;
}

body.pr-lightbox-open{
  overflow:hidden !important;
}

.pr-lightbox{
  position:fixed;
  inset:0;
  z-index:5000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(18px, 4vw, 44px);
  background:rgba(4,24,29,.86);
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
}

.pr-lightbox.is-open{
  display:flex;
}

.pr-lightbox__dialog{
  position:relative;
  width:min(100%, 1180px);
  max-height:calc(100svh - 56px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.pr-lightbox__img{
  max-width:100%;
  max-height:calc(100svh - 120px);
  object-fit:contain;
  border-radius:10px;
  background:#fff;
  box-shadow:0 28px 90px rgba(0,0,0,.38);
}

.pr-lightbox__caption{
  max-width:min(100%, 900px);
  color:rgba(255,255,255,.86);
  font-size:14px;
  font-weight:700;
  text-align:center;
}

.pr-lightbox__close{
  position:absolute;
  top:-12px;
  right:-12px;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:999px;
  background:#fff;
  color:var(--pr-ink);
  box-shadow:0 16px 36px rgba(0,0,0,.24);
  font-size:28px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

@media (max-width:640px){
  .pr-lightbox{
    padding:14px;
  }

  .pr-lightbox__img{
    max-height:calc(100svh - 104px);
    border-radius:8px;
  }

  .pr-lightbox__close{
    top:0;
    right:0;
  }
}

/* Prevent an invisible closed mobile menu from intercepting page taps.
   Some page-level styles keep descendants clickable while the menu is hidden. */
@media (max-width:1240px){
  html body .site-header .nav-pill:not(.open),
  html body .site-header .nav-pill:not(.open) *{
    visibility:hidden !important;
    pointer-events:none !important;
  }
}