/* =========================================================
   ALASKA — Design System
   Infraestructura modular para proyectos industriales
   ========================================================= */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@300,400,500,600,700&display=swap');

:root{
  /* Brand */
  --verde: #09423D;
  --verde-oscuro: #062E2A;
  --verde-claro: #0F5A53;
  --dorado: #C7A45A;
  --dorado-suave: #DCC391;

  /* Neutros */
  --blanco: #FFFFFF;
  --gris-claro: #F5F6F7;
  --gris-medio: #6B7280;
  --negro: #111827;

  /* Tipografía */
  --font-base: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Espaciado */
  --section-pad: clamp(48px, 4.5vw, 84px);
  --container-w: 1280px;

  /* Transiciones */
  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast: 300ms var(--ease);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-base);
  color:var(--negro);
  background:var(--blanco);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input,textarea,select{ font-family:inherit; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

.container{
  width:100%;
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 32px;
}
@media (max-width:640px){ .container{ padding:0 20px; } }

/* ---------- Utility ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dorado);
  margin-bottom:18px;
}
.eyebrow::before{
  content:'';
  width:28px; height:1px;
  background:var(--dorado);
}
h1,h2,h3,h4{ font-weight:600; letter-spacing:-.015em; color:var(--verde-oscuro); }
.section-title{
  font-size:clamp(28px,3.4vw,44px);
  line-height:1.15;
  max-width:720px;
}
.section-lede{
  font-size:17px;
  color:var(--gris-medio);
  max-width:620px;
  margin-top:18px;
  line-height:1.7;
}
.section-head{ margin-bottom:42px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .section-title,
.section-head.center .section-lede{ margin-left:auto; margin-right:auto; }

.section{ padding:var(--section-pad) 0; }
.section.tight{ padding:56px 0; }
.bg-verde{ background:var(--verde-oscuro); color:var(--blanco); }
.bg-verde h2,.bg-verde h3,.bg-verde h4{ color:var(--blanco); }
.bg-gris{ background:var(--gris-claro); }

/* ---------- Reveal on scroll ----------
   Por defecto TODO es visible (así el sitio nunca depende de que el JS
   cargue correctamente). El JS, si carga bien, oculta cada bloque justo
   antes de animarlo. Si el JS falla, el contenido igual se ve. */
.reveal{ opacity:1; transform:none; transition:opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.pre{ opacity:0; transform:translateY(24px); }
.reveal.in{ opacity:1; transform:none; }
.reveal-delay-1{ transition-delay:80ms; }
.reveal-delay-2{ transition-delay:160ms; }
.reveal-delay-3{ transition-delay:240ms; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 32px;
  font-size:15px;
  font-weight:500;
  border-radius:4px;
  transition:all var(--t-fast);
  white-space:nowrap;
}
.btn-primary{
  background:var(--verde);
  color:var(--blanco);
  border:1px solid var(--verde);
}
.btn-primary:hover{ background:var(--verde-claro); border-color:var(--verde-claro); transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(9,66,61,.4); }
.btn-secondary{
  background:transparent;
  color:var(--verde);
  border:1px solid var(--verde);
}
.btn-secondary:hover{ background:var(--verde); color:var(--blanco); transform:translateY(-2px); }
.bg-verde .btn-secondary,
.hero .btn-secondary,
.page-hero .btn-secondary,
.cta-band .btn-secondary{ color:var(--blanco); border-color:rgba(255,255,255,.5); }
.bg-verde .btn-secondary:hover,
.hero .btn-secondary:hover,
.page-hero .btn-secondary:hover,
.cta-band .btn-secondary:hover{ background:var(--blanco); color:var(--verde-oscuro); border-color:var(--blanco); }
.btn-gold{
  background:var(--dorado);
  color:var(--verde-oscuro);
  border:1px solid var(--dorado);
}
.btn-gold:hover{ background:var(--dorado-suave); border-color:var(--dorado-suave); transform:translateY(-2px); }
.btn-whatsapp{
  background:#25D366; color:#fff; border:1px solid #25D366;
}
.btn-whatsapp:hover{ filter:brightness(1.06); transform:translateY(-2px); }
.btn-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:36px; }

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:18px 0;
  transition:all var(--t-fast);
  background:rgba(4,20,18,.82);
  backdrop-filter:blur(6px);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; }
.site-header.scrolled{
  background:rgba(6,46,42,.96);
  backdrop-filter:blur(8px);
  padding:14px 0;
  box-shadow:0 4px 24px rgba(0,0,0,.12);
}
.logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo img{ height:52px; width:auto; display:block; }
.footer-brand .logo img{ height:60px; }
.logo .dot{ color:var(--dorado); }
.main-nav{ display:flex; align-items:center; gap:40px; }
.main-nav ul{ display:flex; gap:34px; }
.main-nav a{
  color:rgba(255,255,255,.88);
  font-size:14.5px; font-weight:400;
  position:relative;
  padding:6px 0;
  white-space:nowrap;
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--dorado); transition:width var(--t-fast);
}
.main-nav a:hover::after, .main-nav a.active::after{ width:100%; }
.main-nav a.active{ color:var(--blanco); }
.header-cta{ display:flex; align-items:center; gap:18px; flex-shrink:0; }
.main-nav .mobile-cta{ display:none; }
.header-cta .btn{ padding:12px 24px; font-size:13.5px; white-space:nowrap; }
.header-cta .btn-primary{ background:var(--dorado); border-color:var(--dorado); color:var(--verde-oscuro); }
.header-cta .btn-primary:hover{ background:var(--dorado-suave); border-color:var(--dorado-suave); }

/* ---------- Instagram destacado (Baños Premium) ---------- */
.ig-banner{
  max-width:760px; margin:32px auto 0; display:flex; align-items:center; gap:18px;
  background:linear-gradient(135deg, #fdf6ea 0%, #f8f4ec 100%);
  border:1px solid rgba(199,164,90,.35); border-radius:12px; padding:20px 24px;
}
.ig-banner-icon{
  flex:none; width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7); color:#fff;
}
.ig-banner-body{ flex:1; min-width:0; }
.ig-banner-body p.ig-eyebrow{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--dorado); margin:0 0 3px; }
.ig-banner-body h4{ font-size:16px; margin:0 0 3px; }
.ig-banner-body p.ig-sub{ font-size:13.5px; color:var(--gris-medio); margin:0; }
.ig-banner .btn{ flex:none; padding:11px 20px; font-size:13px; white-space:nowrap; }
@media (max-width:560px){
  .ig-banner{ flex-direction:column; text-align:center; padding:22px 20px; }
  .ig-banner .btn{ width:100%; }
}
/* ---------- Contacto rápido en header (teléfono / correo) ---------- */
.header-contact{ display:flex; align-items:center; gap:14px; margin-right:22px; flex-shrink:0; }
.header-contact a{
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:34px; height:34px; border-radius:50%; color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.06); transition:background var(--t-fast), color var(--t-fast);
}
.header-contact a:hover{ background:rgba(199,164,90,.16); color:var(--dorado-suave); }
.header-contact svg{ flex:none; }
.header-contact .hc-text{ display:none; }
@media (min-width:1500px){
  .header-contact a{ width:auto; padding:0 4px; background:none; border-radius:0; }
  .header-contact a:hover{ background:none; }
  .header-contact .hc-text{ display:inline; font-size:13px; white-space:nowrap; }
}
/* Escritorio angosto / laptop — aliviar apretujamiento entre nav, contacto y CTA */
@media (min-width:961px) and (max-width:1320px){
  .main-nav{ gap:22px; }
  .main-nav ul{ gap:18px; }
  .main-nav a{ font-size:13.5px; }
  .header-contact{ gap:8px; margin-right:14px; }
  .header-cta .btn{ padding:11px 18px; font-size:13px; }
}
@media (max-width:960px){ .header-contact{ margin-right:16px; gap:8px; } }

/* Dropdown Soluciones */
.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(0);
  background:var(--blanco); border-radius:6px; box-shadow:0 24px 48px -16px rgba(9,66,61,.25);
  padding:10px; width:240px; opacity:0; pointer-events:none; transition:opacity var(--t-fast);
  margin-top:18px;
}
/* Puente invisible: sin esto, al mover el mouse desde el link hacia el submenú
   se cruza una zona sin hover y el menú se cierra antes de poder hacer clic. */
.has-dropdown::before{
  content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width:240px; height:22px; z-index:5;
}
@media (min-width:961px){
  .has-dropdown:hover .dropdown{ opacity:1; pointer-events:auto; }
}
.dropdown a{ display:block; padding:12px 14px; border-radius:4px; color:var(--verde-oscuro) !important; font-size:14px; }
.dropdown a::after{ display:none; }
.dropdown a:hover{ background:var(--gris-claro); color:var(--verde) !important; }
@media (max-width:960px){
  .has-dropdown::before{ display:none; }
  .dropdown{ position:static; transform:none; opacity:1; pointer-events:auto; width:auto; background:transparent; box-shadow:none; padding:0; margin-top:10px; display:block; }
  .dropdown a{ color:rgba(255,255,255,.75) !important; font-size:16px; padding:8px 0; text-align:center; }
  .dropdown a:hover{ background:transparent; }
  .has-dropdown > a{ pointer-events:none; opacity:.55; font-size:14px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:2px; }
  .has-dropdown > a::after{ display:none; }
}

.nav-toggle{ display:none; flex-direction:column; gap:5px; width:28px; z-index:1100; }
.nav-toggle span{ height:2px; width:100%; background:#fff; border-radius:2px; transition:all var(--t-fast); }

@media (max-width:960px){
  .main-nav{
    position:fixed; top:0; left:0; width:100%; height:100vh; height:100dvh;
    background:var(--verde-oscuro);
    flex-direction:column; justify-content:flex-start; align-items:center;
    padding:100px 24px 40px; overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateX(100%); transition:transform 420ms var(--ease);
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; text-align:center; gap:20px; width:100%; }
  .main-nav a{ font-size:20px; }
  .header-cta{ display:none; }
  .main-nav .mobile-cta{ display:flex; margin-top:28px; }
  .nav-toggle{ display:flex; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  color:var(--blanco); overflow:hidden;
  background:linear-gradient(135deg,#0a3d38 0%,#062e2a 60%,#041f1c 100%);
}
.hero .ph-bg{ position:absolute; inset:0; z-index:0; }
.hero::before{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(4,18,16,.86) 0%, rgba(4,18,16,.62) 38%, rgba(4,18,16,.22) 62%, rgba(4,18,16,0) 80%),
    linear-gradient(180deg, rgba(4,26,24,.4) 0%, rgba(6,46,42,.55) 55%, rgba(4,20,18,.92) 100%);
  z-index:1;
}
.hero-content{ position:relative; z-index:2; padding-bottom:120px; padding-top:200px; max-width:760px; }
.hero-content .eyebrow{ color:var(--dorado-suave); }
.hero-content h1{
  font-size:clamp(36px,5.4vw,62px);
  color:var(--blanco); line-height:1.1; letter-spacing:-.025em; font-weight:500;
}
.hero-content p{ font-size:clamp(16px,1.6vw,19px); color:rgba(255,255,255,.82); margin-top:22px; max-width:600px; line-height:1.7; }
.hero-scroll{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%); z-index:2;
  width:1px; height:56px; background:linear-gradient(180deg, rgba(255,255,255,.7), transparent);
}
.hero-stats{
  position:relative; z-index:2; display:flex; gap:0; margin-top:56px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.16); padding-top:28px; max-width:760px;
}
.hero-stats div{ padding-right:44px; }
.hero-stats strong{ display:block; font-size:28px; color:var(--dorado-suave); font-weight:600; }
.hero-stats span{ font-size:12.5px; color:rgba(255,255,255,.65); text-transform:uppercase; letter-spacing:.08em; }

/* ---------- Placeholder image blocks (hasta recibir fotos reales) ---------- */
.ph{
  position:relative; overflow:hidden; border-radius:6px;
  background:linear-gradient(135deg,#0F5A53 0%,#09423D 55%,#062E2A 100%);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:rgba(255,255,255,.78);
  min-height:220px;
}
.ph::before{
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(199,164,90,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199,164,90,.14) 1px, transparent 1px);
  background-size:28px 28px;
}
.ph-label{ position:relative; z-index:1; padding:24px; font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; line-height:1.6; max-width:80%; }
.ph-label::before{
  content:''; display:block; width:34px; height:34px; margin:0 auto 14px;
  background:rgba(255,255,255,.12);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2Z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2Z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center/contain no-repeat;
  border-radius:8px;
}
.ph.light .ph-label::before{ background:rgba(9,66,61,.18); }

/* ---------- Fotos reales (reemplazan a los placeholders) ---------- */
.photo-wrap{ position:relative; overflow:hidden; border-radius:6px; background:var(--gris-claro); }
.photo-wrap img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.photo-tag{
  position:absolute; top:14px; left:14px; z-index:1;
  font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(199,164,90,.92); color:var(--verde-oscuro); padding:5px 10px; border-radius:3px;
}
.ph-label small{ display:block; font-weight:400; text-transform:none; letter-spacing:0; opacity:.7; margin-top:6px; font-size:11.5px; }
.ph-tag{
  position:absolute; top:14px; left:14px; z-index:1;
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(199,164,90,.92); color:var(--verde-oscuro); padding:5px 10px; border-radius:3px;
}
.ph-tag.ai{ background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(4px); }
/* Etiqueta "Imagen IA" — discreta: más pequeña, más translúcida, esquina inferior */
.photo-tag.ai, .ph-tag.ai{
  top:auto; left:auto; bottom:10px; right:10px;
  font-size:8px; font-weight:500; letter-spacing:.05em; padding:3px 7px;
  background:rgba(4,20,18,.4); color:rgba(255,255,255,.7); backdrop-filter:blur(2px);
  border-radius:2px;
}
.ph.light{ background:linear-gradient(135deg,#EEF1EF 0%,#E4E8E5 100%); color:var(--gris-medio); }
.ph.light::before{ background-image:linear-gradient(rgba(9,66,61,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(9,66,61,.08) 1px, transparent 1px); }

/* En Hero / Hero de página interna: el placeholder es solo fondo.
   Ocultamos su etiqueta descriptiva y dejamos únicamente un badge discreto
   en la esquina inferior derecha, para que no compita con el título real. */
.hero .ph-bg .ph-label, .page-hero .ph-bg .ph-label{ display:none; }
.hero .ph-bg .ph-tag, .page-hero .ph-bg .ph-tag{
  top:auto; bottom:20px; left:auto; right:20px;
  background:rgba(4,20,18,.55); color:rgba(255,255,255,.8); backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.18);
}
.hero .ph-bg .ph::before, .page-hero .ph-bg .ph::before{ opacity:.28; }

/* Fix: la foto de fondo del hero debe cubrir el 100% del alto real de la
   sección (que puede ser mayor a 100vh/64vh en pantallas angostas donde el
   texto ocupa más líneas). Antes solo se heredaba un min-height, así que en
   mobile la imagen no llegaba hasta abajo y se veía el corte de color. */
.hero .ph-bg .photo-wrap, .page-hero .ph-bg .photo-wrap{
  position:absolute; inset:0; height:100%; min-height:100% !important;
}
.hero .ph-bg .photo-wrap img, .page-hero .ph-bg .photo-wrap img{
  width:100%; height:100%; object-fit:cover;
}
/* Mismo fix para las secciones que aún no tienen foto real (placeholder .ph
   en vez de .photo-wrap) — evita la misma costura de color. */
.hero .ph-bg .ph, .page-hero .ph-bg .ph{
  position:absolute; inset:0; height:100%; min-height:100% !important;
}

/* ---------- Cards ---------- */
.card{
  background:var(--blanco);
  border-radius:6px;
  border:1px solid #EBEDEC;
  box-shadow:0 2px 8px rgba(17,24,39,.03);
  transition:transform var(--t-fast), box-shadow var(--t-fast);
  overflow:hidden;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 24px 48px -20px rgba(9,66,61,.18); }
.card-body{ padding:32px; }
.card h3{ font-size:20px; margin-bottom:12px; }
.card p{ color:var(--gris-medio); font-size:15px; line-height:1.7; }
.card-link{ display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-size:14px; font-weight:500; color:var(--verde); }
.card-link svg{ transition:transform var(--t-fast); }
.card:hover .card-link svg{ transform:translateX(4px); }

.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:960px){ .grid-3,.grid-4,.grid-5{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4,.grid-5{ grid-template-columns:1fr; } }

/* ---------- Icon feature blocks ---------- */
.feature{ display:flex; gap:18px; }
.feature-icon{
  flex:none; width:48px; height:48px; border-radius:50%;
  background:rgba(9,66,61,.07); color:var(--verde);
  display:flex; align-items:center; justify-content:center;
}
.bg-verde .feature-icon{ background:rgba(199,164,90,.14); color:var(--dorado-suave); }
.feature h4{ font-size:16.5px; margin-bottom:8px; }
.feature p{ font-size:14.5px; color:var(--gris-medio); line-height:1.65; }
.bg-verde .feature p{ color:rgba(255,255,255,.68); }

/* ---------- Split section (imagen + texto) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.split.reverse{ direction:rtl; } .split.reverse > *{ direction:ltr; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:40px; } .split.reverse{ direction:ltr; } }

/* ---------- Logos strip ---------- */
.sectors-strip{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.sectors-strip span{
  font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:9px 16px; border:1px solid rgba(255,255,255,.22); border-radius:30px; color:rgba(255,255,255,.85);
}
.sectors-strip.light span{
  border-color:rgba(9,66,61,.18); color:var(--verde-oscuro); background:#fff;
}

/* ---------- Process steps ---------- */
.process{ counter-reset:step; display:grid; grid-template-columns:repeat(5,1fr); gap:24px; }

/* ---------- Bloque destacado (Soluciones a Medida) ---------- */
.highlight-block{ text-align:center; max-width:760px; margin:0 auto; }
.highlight-block .section-title{ margin-bottom:18px; }
.highlight-block p{ margin-top:10px; }
@media (max-width:960px){ .process{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .process{ grid-template-columns:1fr; } }
.step{ position:relative; padding-top:8px; border-top:2px solid #E3E6E4; }
.step-num{ font-size:13px; font-weight:600; color:var(--dorado); letter-spacing:.08em; margin-bottom:14px; display:block; }
.step h4{ font-size:16.5px; margin-bottom:8px; }
.step p{ font-size:14px; color:var(--gris-medio); line-height:1.65; }

/* ---------- FAQ Accordion ---------- */
.faq-item{ border-bottom:1px solid #E3E6E4; }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:24px 0; text-align:left; font-size:16.5px; font-weight:500; color:var(--verde-oscuro);
}
.faq-q .plus{ flex:none; width:22px; height:22px; position:relative; margin-left:20px; }
.faq-q .plus::before,.faq-q .plus::after{ content:''; position:absolute; background:var(--verde); transition:transform var(--t-fast); }
.faq-q .plus::before{ top:50%; left:0; width:100%; height:2px; margin-top:-1px; }
.faq-q .plus::after{ left:50%; top:0; height:100%; width:2px; margin-left:-1px; }
.faq-item.open .plus::after{ transform:rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height 420ms var(--ease); }
.faq-a-inner{ padding-bottom:24px; color:var(--gris-medio); font-size:15px; line-height:1.7; max-width:680px; }

/* ---------- Gallery / Lightbox ---------- */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.gallery .ph{ min-height:180px; cursor:pointer; }
.gallery .g-wide{ grid-column:span 2; }
/* Simetría: proporción 8:3 en anchas (2 columnas) = misma altura que 4:3 en simples (1 columna), en cualquier combinación de fila */
.gallery > .photo-wrap.g-wide{ aspect-ratio:8/3; }
.gallery .g-wide > .photo-wrap{ aspect-ratio:8/3; }
.gallery > .photo-wrap:not(.g-wide){ aspect-ratio:4/3; }
.gallery .g-wide .comp-carousel{ aspect-ratio:8/3; }
.gallery .g-wide .comp-carousel-track{ height:100%; }
.gallery .g-wide .comp-carousel-track img{ height:100%; width:100%; aspect-ratio:auto; }
@media (max-width:900px){ .gallery{ grid-template-columns:repeat(2,1fr); } .gallery .g-wide{ grid-column:span 2; } }
@media (max-width:560px){
  .gallery{ grid-template-columns:1fr; }
  .gallery .g-wide{ grid-column:span 1; }
  .gallery > .photo-wrap.g-wide{ aspect-ratio:4/3; }
  .gallery .g-wide .comp-carousel{ aspect-ratio:4/3; }
}
.lightbox{
  position:fixed; inset:0; z-index:2000; background:rgba(4,20,18,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity var(--t-fast);
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox-inner{ width:min(900px,88vw); }
.lightbox-inner .ph{ min-height:60vh; }
.lightbox-close{ position:absolute; top:28px; right:32px; color:#fff; font-size:32px; font-weight:300; }

/* ---------- Forms ---------- */
.form-card{ background:var(--blanco); border-radius:8px; padding:44px; border:1px solid #EBEDEC; box-shadow:0 24px 60px -30px rgba(9,66,61,.2); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-grid .full{ grid-column:1/-1; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field label{ font-size:13px; font-weight:500; color:var(--verde-oscuro); }
.field input, .field select, .field textarea{
  padding:13px 16px; border:1px solid #DADEDC; border-radius:5px; font-size:15px; color:var(--negro);
  transition:border-color var(--t-fast), box-shadow var(--t-fast); background:#fff;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--verde); box-shadow:0 0 0 3px rgba(9,66,61,.1);
}
.field .error{ font-size:12.5px; color:#B3261E; display:none; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:#B3261E; }
.field.invalid .error{ display:block; }
.field textarea{ resize:vertical; min-height:120px; }
.form-note{ font-size:13px; color:var(--gris-medio); margin-top:16px; }
.form-success{ display:none; text-align:center; padding:40px 20px; }
.form-success.show{ display:block; }
.form-success h3{ margin-bottom:10px; }

/* ---------- Consulta rápida — widget compacto (no formulario grande) ---------- */
.quick-inquiry{
  max-width:640px; margin:0 auto; background:var(--blanco); border:1px solid #EBEDEC; border-radius:10px;
  padding:28px 30px; box-shadow:0 20px 50px -28px rgba(9,66,61,.22);
}
.quick-inquiry-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.quick-inquiry-head .qi-icon{
  flex:none; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(9,66,61,.07); color:var(--verde);
}
.quick-inquiry-head h3{ font-size:17px; margin:0; }
.quick-inquiry-head p{ font-size:13px; color:var(--gris-medio); margin:2px 0 0; }
.quick-inquiry .qi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.quick-inquiry .qi-grid .full{ grid-column:1/-1; }
@media (max-width:560px){ .quick-inquiry{ padding:22px 20px; } .quick-inquiry .qi-grid{ grid-template-columns:1fr; } }
.quick-inquiry .field{ margin-bottom:14px; }
.quick-inquiry .field label{ font-size:12px; }
.quick-inquiry .field input, .quick-inquiry .field textarea{ padding:10px 12px; font-size:13.5px; }
.quick-inquiry .field textarea{ min-height:76px; }
.quick-inquiry-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:4px; flex-wrap:wrap; }
.quick-inquiry-foot .form-note{ margin:0; font-size:11.5px; }
.quick-inquiry .btn{ padding:11px 24px; font-size:13.5px; white-space:nowrap; }
.quick-inquiry .form-success{ padding:22px 4px; }
.quick-inquiry .form-success h3{ font-size:16px; }
.quick-inquiry .form-success p{ font-size:13.5px; }

/* ---------- Contact info cards ---------- */
.info-card{ display:flex; gap:16px; align-items:flex-start; padding:26px; border:1px solid #EBEDEC; border-radius:6px; }

/* ---------- Mapa embebido (CEV Chicureo) ---------- */
.map-embed{ position:relative; width:100%; aspect-ratio:16/10; border-radius:10px; overflow:hidden; box-shadow:0 20px 50px -28px rgba(9,66,61,.35); }
.map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; }
@media (max-width:560px){ .map-embed{ aspect-ratio:4/3; } }
.info-card h4{ font-size:15px; margin-bottom:6px; }
.info-card p, .info-card a{ font-size:14.5px; color:var(--gris-medio); }
.info-card a:hover{ color:var(--verde); }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; }
.cta-band .container{ position:relative; z-index:2; text-align:center; }
.cta-band h2{ max-width:640px; margin:0 auto; }
.cta-band .btn-row{ justify-content:center; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--verde-oscuro); color:rgba(255,255,255,.75); padding:80px 0 0; }
.footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.1); }
@media (max-width:1100px){ .footer-top{ grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }
.footer-top h5{ color:#fff; font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; margin-bottom:20px; }
.footer-top ul li{ margin-bottom:12px; font-size:14.5px; }
.footer-top ul a:hover{ color:var(--dorado-suave); }
.footer-brand p{ font-size:14.5px; margin:18px 0 22px; max-width:280px; line-height:1.7; }
.footer-social{ display:flex; gap:12px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; transition:all var(--t-fast); }
.footer-social a:hover{ background:var(--dorado); border-color:var(--dorado); color:var(--verde-oscuro); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; font-size:13px; color:rgba(255,255,255,.5); flex-wrap:wrap; gap:12px; }

/* Sello Mercado Público */
.footer-badge{ display:flex; align-items:center; gap:12px; padding-bottom:32px; }
.footer-badge .badge-icon{
  flex:none; width:44px; height:44px; border-radius:50%;
  background:rgba(199,164,90,.14); border:1px solid rgba(199,164,90,.3);
  display:flex; align-items:center; justify-content:center; color:var(--dorado-suave);
}
.footer-badge span{ font-size:13px; color:rgba(255,255,255,.7); line-height:1.5; }
.footer-badge strong{ display:block; color:#fff; font-size:13.5px; font-weight:500; }

/* ---------- WhatsApp float ---------- */
.wa-float{
  position:fixed; bottom:26px; right:26px; z-index:900;
  width:60px; height:60px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(37,211,102,.4);
  transition:transform var(--t-fast);
}
.wa-float:hover{ transform:scale(1.08); }

/* ---------- Equipamiento Complementario (grid 3+2, fotos protagonistas) ---------- */
.complementary-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:28px; margin-top:8px; }
.complementary-grid.grid-4up{ grid-template-columns:repeat(2,1fr); }
.complementary-grid.grid-4up .comp-card{ grid-column:span 1; }
.comp-card{ grid-column:span 2; }
.comp-card.wide{ grid-column:span 3; }
.comp-photo{
  aspect-ratio:4/3; min-height:0; margin-bottom:18px; cursor:default;
  transition:transform .5s var(--ease);
}
.comp-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.comp-card:hover .comp-photo{ transform:scale(1.02); }
.comp-card h4{ font-size:17px; margin-bottom:6px; color:var(--verde-oscuro); }
.comp-card p{ font-size:14px; color:var(--gris-medio); line-height:1.6; }
@media (max-width:900px){
  .complementary-grid{ grid-template-columns:1fr; gap:32px; }
  .comp-card, .comp-card.wide{ grid-column:span 1; }
}
.comp-cta{
  margin-top:52px; padding:32px 36px; background:var(--gris-claro); border-radius:8px;
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.comp-cta p{ font-size:15px; color:var(--verde-oscuro); max-width:600px; line-height:1.6; }
@media (max-width:700px){ .comp-cta{ flex-direction:column; align-items:flex-start; text-align:left; } }

/* ---------- Carrusel dentro de tarjeta de equipamiento ---------- */
.comp-carousel{ position:relative; overflow:hidden; border-radius:6px; }
.comp-carousel-track{ display:flex; transition:transform .45s var(--ease); }
.comp-carousel-track img{ width:100%; flex:none; aspect-ratio:4/3; object-fit:cover; display:block; }
.comp-carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(6,46,42,.55); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s, background .2s;
}
.comp-carousel:hover .comp-carousel-btn{ opacity:1; }
.comp-carousel-btn:hover{ background:rgba(6,46,42,.85); }
.comp-carousel-btn.prev{ left:10px; }
.comp-carousel-btn.next{ right:10px; }
.comp-carousel-dots{ position:absolute; bottom:10px; left:0; right:0; display:flex; gap:6px; justify-content:center; z-index:2; }
.comp-carousel-dots button{
  width:6px; height:6px; border-radius:50%; border:none; background:rgba(255,255,255,.55); cursor:pointer; padding:0;
  transition:background .2s, width .2s;
}
.comp-carousel-dots button.active{ background:var(--dorado); width:16px; border-radius:3px; }

/* ---------- Solution Spotlight (Infraestructura Deportiva) ---------- */
.solution-spotlight{
  display:grid; grid-template-columns:1fr 1.2fr; align-items:stretch;
  margin-top:44px; background:var(--blanco); border-radius:8px; overflow:hidden;
  box-shadow:0 24px 50px -28px rgba(9,66,61,.28); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.solution-spotlight:hover{ transform:translateY(-3px); box-shadow:0 30px 60px -26px rgba(9,66,61,.35); }
.spotlight-photo{ position:relative; min-height:220px; }
.spotlight-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.spotlight-body{ padding:36px 40px; display:flex; flex-direction:column; justify-content:center; }
.spotlight-body h3{ font-family:var(--font-base); font-size:23px; font-weight:600; color:var(--verde-oscuro); margin:8px 0 10px; text-transform:none; letter-spacing:0; }
.spotlight-body p{ font-size:14.5px; color:var(--gris-medio); line-height:1.65; margin-bottom:16px; }
.spotlight-link{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--verde); }
@media (max-width:800px){
  .solution-spotlight{ grid-template-columns:1fr; }
  .spotlight-photo{ min-height:200px; }
  .spotlight-body{ padding:28px 26px; }
}

/* Centra un último ítem "huérfano" en un grid de 3 columnas — solo en
   desktop. En mobile, el grid pasa a 1 columna y NO debe forzar grid-column,
   porque referenciar una columna inexistente crea una columna implícita y
   causa scroll horizontal en todo el sitio. */
@media (min-width:641px){
  .center-last-grid-item{ grid-column:2; }
}

/* ---------- Collage Infraestructura Deportiva ---------- */
.deportiva-collage{ position:relative; min-height:380px; }
.deportiva-main{ position:absolute; inset:0; min-height:0; }
.deportiva-secondary{
  position:absolute; bottom:-24px; left:-24px; width:52%; min-height:0; aspect-ratio:4/3;
  border:4px solid var(--blanco); box-shadow:0 20px 40px -16px rgba(9,66,61,.35);
}
@media (max-width:800px){
  .deportiva-collage{ min-height:280px; margin-top:24px; }
  .deportiva-secondary{ width:48%; bottom:-16px; left:-16px; border-width:3px; }
}
@media (max-width:500px){
  .deportiva-collage{ margin-bottom:24px; }
}

/* ---------- Mosaico Fabricación (Baños Premium) ---------- */
.fab-mosaic{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr; gap:16px; min-height:380px; }
.fab-photo{ min-height:0; }
.fab-video{ min-height:0; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:6px; }
.fab-video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:800px){
  .fab-mosaic{ grid-template-columns:1fr; grid-template-rows:auto; min-height:0; }
  .fab-photo, .fab-video{ min-height:260px; }
}

/* ---------- Equipamiento (pills) ---------- */
.equip-list{ margin-top:56px; padding-top:44px; border-top:1px solid #E3E6E4; }
.equip-pills{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:8px; }
.equip-pill{
  border:1px solid var(--verde-oscuro); color:var(--verde-oscuro); background:var(--blanco);
  padding:11px 22px; border-radius:100px; font-size:14px; font-weight:500;
  transition:background .2s, color .2s, transform .2s;
}
.equip-pill:hover{ background:var(--verde-oscuro); color:var(--blanco); transform:translateY(-2px); }
.equip-pill.gold{ border-color:var(--dorado); color:#8a6a2c; }
.equip-pill.gold:hover{ background:var(--dorado); color:var(--verde-oscuro); }

/* ---------- Mapa de Chile (Contacto) ---------- */
.chile-map-wrap{ max-width:360px; margin:0 auto; text-align:center; }
.chile-map{ width:100%; height:auto; filter:drop-shadow(0 20px 40px rgba(0,0,0,.25)); }
.chile-map-note{ margin-top:20px; font-size:13.5px; color:rgba(255,255,255,.7); line-height:1.6; text-align:center; }

/* ---------- Cobertura — mapa horizontal ---------- */
.coverage-map-wrap{ max-width:900px; margin:0 auto; }
.coverage-map-svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 20px 40px rgba(0,0,0,.3)); }
.coverage-map-legend{ display:none; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:22px; }
.coverage-map-legend span{
  font-size:11.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  padding:7px 13px; border:1px solid rgba(255,255,255,.22); border-radius:30px; color:rgba(255,255,255,.85);
}
.coverage-map-legend span.major{ color:#fff; border-color:rgba(199,164,90,.5); background:rgba(199,164,90,.12); }
@media (max-width:640px){
  .coverage-map-svg .cm-labels{ display:none; }
  .coverage-map-legend{ display:flex; }
}

/* ---------- Volver arriba ---------- */
.back-to-top{
  position:fixed; bottom:26px; left:26px; z-index:900;
  width:48px; height:48px; border-radius:50%; border:none;
  background:var(--verde-oscuro); color:var(--dorado-suave);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px -10px rgba(9,66,61,.5); cursor:pointer;
  opacity:0; pointer-events:none; transform:translateY(12px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), background .2s;
}
.back-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.back-to-top:hover{ background:var(--verde); }
@media (max-width:600px){ .back-to-top{ width:44px; height:44px; bottom:20px; left:20px; } }

/* ---------- Breadcrumb / page hero (subpáginas) ---------- */
.page-hero{ position:relative; min-height:64vh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; }
.page-hero::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,26,24,.6) 0%, rgba(6,46,42,.72) 50%, rgba(4,20,18,.95) 100%); z-index:1; }
.page-hero .ph-bg{ position:absolute; inset:0; }
.page-hero-content{ position:relative; z-index:2; padding:180px 0 64px; max-width:760px; margin:0 auto; width:100%; }

/* ---------- Badge dot for CEV nav item ---------- */
.nav-badge{ font-size:9.5px; background:var(--dorado); color:var(--verde-oscuro); padding:2px 7px; border-radius:20px; margin-left:6px; vertical-align:2px; font-weight:800; letter-spacing:.03em; }

/* ---------- Misc ---------- */
.divider{ height:1px; background:#E3E6E4; margin:var(--section-pad) 0; }
.text-gold{ color:var(--dorado); }
.small-caps{ font-size:12.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--gris-medio); }

/* ---------- Arriendo para Eventos (Baños Premium) ---------- */
.event-highlight{
  max-width:640px; margin:36px auto 0; text-align:center; padding:22px 28px;
  background:var(--gris-claro); border-radius:10px; border-left:3px solid var(--dorado);
}
.event-highlight h4{ font-size:16px; margin-bottom:6px; }
.event-highlight p{ font-size:14px; color:var(--gris-medio); line-height:1.6; margin:0; }
.event-gallery{ max-width:960px; margin:44px auto 0; }
.event-gallery-main{ border-radius:8px; overflow:hidden; aspect-ratio:16/7; }
.event-gallery-main img{ width:100%; height:100%; object-fit:cover; display:block; }
.event-gallery-sub{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }
.event-gallery-sub img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:8px; }
@media (max-width:760px){
  .event-gallery-main{ aspect-ratio:4/3; }
  .event-gallery-sub{ gap:8px; }
}
.promo-popup{
  position:fixed; left:20px; bottom:96px; z-index:950; width:260px;
  background:var(--verde-oscuro); border-radius:12px; overflow:hidden;
  border:2px solid var(--dorado);
  box-shadow:0 26px 60px -20px rgba(0,0,0,.55);
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.promo-popup.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.promo-popup-close{
  position:absolute; top:8px; right:8px; z-index:3; width:24px; height:24px; border-radius:50%;
  border:1px solid rgba(255,255,255,.4); background:rgba(4,20,18,.55); color:#fff; font-size:14px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s;
}
.promo-popup-close:hover{ background:rgba(4,20,18,.85); border-color:#fff; }
.promo-popup-media{ position:relative; height:175px; }
.promo-popup-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.promo-popup-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,20,18,.05) 35%, rgba(4,20,18,.92) 100%);
}
.promo-popup-content{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding:14px; }
.promo-popup-tag{ color:var(--dorado-suave); font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; margin:0 0 4px; }
.promo-popup-title{ color:#fff; font-size:17px; font-weight:800; line-height:1.2; margin:0 0 12px; text-shadow:0 2px 10px rgba(0,0,0,.5); }
.promo-popup-cta{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  background:var(--dorado); color:var(--verde-oscuro); font-size:12.5px; font-weight:700;
  padding:9px 15px; border-radius:30px; transition:background .2s, transform .2s;
}
.promo-popup-cta:hover{ background:var(--dorado-suave); transform:translateY(-2px); }
@media (max-width:600px){
  .promo-popup{ left:14px; bottom:82px; width:224px; }
  .promo-popup-media{ height:150px; }
  .promo-popup-title{ font-size:15.5px; }
}

/* ---------- Aplicaciones (Carpas Industriales) — referencia pequeña CEV ---------- */
.ap-deporte-ref{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.ap-deporte-ref .photo-wrap{ flex:none; width:64px; height:64px; border-radius:6px; }
.ap-deporte-ref span{ font-size:11.5px; color:var(--gris-medio); font-style:italic; }

/* ---------- Franja Hero — Baños Tráiler Premium (Home) ---------- */
.hero-banner-strip{
  position:absolute; top:90px; left:0; right:0; z-index:4;
  display:block; background:var(--dorado);
  transition:background var(--t-fast);
}
.hero-banner-strip:hover{ background:var(--dorado-suave); }
.hbs-inner{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-top:8px; padding-bottom:8px;
}
.hbs-text{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; color:var(--verde-oscuro); }
.hbs-text strong{ font-size:12px; font-weight:400; margin-right:8px; }
.hbs-text span{ font-size:11px; font-weight:400; opacity:.8; }
.hbs-link{
  flex:none; display:flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:700; color:var(--verde-oscuro);
  white-space:nowrap;
}
.hbs-link svg{ width:11px; height:11px; }
@media (max-width:900px){
  .hbs-text{ flex-direction:column; align-items:flex-start; gap:1px; }
}
@media (max-width:640px){
  .hero-banner-strip{ top:86px; }
  .hbs-inner{ flex-direction:row; align-items:center; justify-content:space-between; gap:8px; padding-top:7px; padding-bottom:7px; }
  .hbs-text{ flex:1; min-width:0; }
  .hbs-text strong{ font-size:10px; margin-right:0; display:block; line-height:1.25; font-weight:400; }
  .hbs-text span{ display:none; }
  .hbs-link{ font-size:9.5px; flex:none; }
  .hbs-link svg{ width:9px; height:9px; }
}