/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
/* Fondo base BLANCO autoritativo (!important). Root-fix definitivo del
   "fondo negro": el entorno de vista previa inyecta un <style> con la regla
   html,body{background:transparent} que, tras una navegación in-place, puede
   quedar como última hoja en cascada y ganarle al blanco — dejando html/body
   transparentes y revelando el fondo oscuro de atrás. Al declararlo
   !important, NUESTRA hoja manda siempre, sin importar el orden. Es seguro:
   en todas las páginas el lienzo base debe ser blanco (hero, header y
   secciones pintan su propio fondo por encima). El anti-FOUC pre-CSS sigue
   funcionando porque el <style id=critical-theme> actúa antes de cargar esta hoja. */
html{scroll-behavior:smooth;font-size:16px;color-scheme:light only;background:#fff !important;height:100%;}
body{font-family:var(--font-sans);color:#1e293b;background:#fff !important;overflow-x:hidden;line-height:1.6;min-height:100%;min-height:100dvh;}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}

/* ═══════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════ */
:root{
  /* Altura real del header fluido: 14px padding ×2 + logo 56px */
  --header-h: 84px;
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  /* ── Eje maestro de layout (chasis unificado) ──
     Fuente de verdad única del ritmo horizontal. Las secciones molde
     (Servicios/Personalización) y los carruseles consumen el mismo gap. */
  --page-max: 1200px;
  --grid-gap: 1.4rem;
  --navy:   #0a2540;
  --navy2:  #0d3260;
  /* Accent on navy / decorative (may be <4.5:1 on white) */
  --green:  #6abf2e;
  --green2: #4e9e1a;
  /* WCAG AA text/UI on white (≥4.5:1 with #fff) */
  --green-btn:  #459918;
  --green-btn-deep: #378214;   /* sombra/depth en reposo */
  --green-btn-hover: #55ad1f;  /* brillo ligero en hover */
  --green-text: #2d6b0f;
  /* ── Curva de marca única ──
     Mismo easing que ya domina cards/reveals del sitio (--cc-ease) y el
     usado en el menú móvil premium (--cc-ease-soft). Se centraliza aquí
     para que toda animación NUEVA (transición de página, hovers de nav)
     comparta identidad de movimiento con el resto — sin tocar las
     transiciones ya existentes, que siguen intactas. */
  /* Token de marca: úsalo en toda transición/hover nueva para mantener
     una sola identidad de movimiento. Aplicado hoy a: transición de
     página, barra de progreso, menú de escritorio, botones (.btn),
     hamburguesa y enlaces del menú móvil — sin tocar duración, solo la
     curva. El resto de hovers del sitio sigue con sus valores previos
     y puede migrarse igual más adelante. */
  --cc-ease:      cubic-bezier(.22,.7,.25,1);
  --cc-ease-soft: cubic-bezier(.32,.72,0,1);
  --cc-fast: .2s;
  --cc-med:  .35s;
  --white:  #ffffff;
  --gray50: #f8fafc;
  --gray100:#f1f5f9;
  --gray200:#e2e8f0;
  --gray300:#cbd5e1;
  --gray400:#94a3b8;
  --gray500:#64748b;
  --gray600:#475569;
  --gray700:#334155;
  --gray800:#1e293b;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.1);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.13);
  --radius:  12px;
  --radius-lg: 20px;
}

/* ═══════════════════════════════════════════
   UTILITIES
═══════════════════════════════════════════ */
.container{max-width:1200px;margin:0 auto;padding:0 5%;}
.btn{display:inline-flex;align-items:center;gap:6px;padding:11px 26px;border-radius:100px;font-size:.82rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:all .2s var(--cc-ease);border:none;}
.btn-primary{background:var(--green-btn);color:#fff;}
.btn-primary:hover{background:var(--green-btn-hover);transform:translateY(-1px);box-shadow:0 6px 20px rgba(61,124,20,.35);}
.btn-outline{background:transparent;color:var(--navy);border:1.5px solid var(--navy);}
.btn-outline:hover{background:var(--navy);color:#fff;}
.btn-outline:visited,.btn-outline:active,.btn-outline:focus,.btn-outline:focus-visible{color:var(--navy);background:transparent;}
.btn-outline:visited:hover,.btn-outline:active:hover,.btn-outline:focus:hover{color:#fff;background:var(--navy);}
.btn,.btn:visited,.btn:active,.btn:focus{text-decoration:none;}
.btn-primary:visited{background:var(--green-btn);color:#fff;}
.btn-primary:visited:hover{background:var(--green-btn-hover);}
.btn-primary:disabled,.form-submit:disabled{opacity:.65;cursor:not-allowed;transform:none;box-shadow:none;}
.btn-white{background:#fff;color:var(--navy);}
.btn-white:hover{background:var(--gray100);}
.badge{display:inline-block;padding:3px 12px;border-radius:100px;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.badge-green{background:#e8f5e0;color:var(--green-text);}
.badge-blue{background:#e0eaf5;color:var(--navy);}
.badge-gray{background:var(--gray100);color:var(--gray600);}
.section-tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--green-text);margin-bottom:1rem;}
.section-title{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:800;color:var(--navy);line-height:1.15;margin-bottom:.8rem;}
.section-sub{font-size:.95rem;color:var(--gray600);max-width:580px;line-height:1.7;}
.divider-green{
  width:160px;height:2px;
  background:rgba(106,191,46,.55);
  border-radius:2px;
  margin:.75rem 0 1.5rem;
}

/* ═══════════════════════════════════════════
   1. HEADER
═══════════════════════════════════════════ */
header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  /* Mismo comportamiento que la home: altura fluida que se compacta
     al hacer scroll (padding 14px → 6px). */
  height:auto;padding:14px 0;
  /* Azul marino corporativo fijo siempre — sin parpadeo ni cambio de fondo */
  background:var(--navy2);
  border-bottom:none;box-shadow:none;
}
.header-inner{
  max-width:1280px;margin:0 auto;padding:0 5%;
  height:100%;display:flex;align-items:center;justify-content:space-between;
}
.header-logo{
  --logo-capsule-h:56px;
  --logo-name-h:20px;
  --logo-mex-h:11px;
  --logo-mex-pt:4px;
  display:flex;align-items:center;gap:.55rem;
  background:transparent;box-shadow:none;flex-shrink:0;padding:0;margin:0;height:auto;width:auto;
}
.header-logo__mark{display:flex;align-items:center;flex-shrink:0;margin-right:2px;}
.header-logo__text{
  display:flex;flex-direction:column;
  height:var(--logo-capsule-h);
  transition:height .5s cubic-bezier(0.4,0,0.2,1);
}
.header-logo__name-row{
  flex:1 1 auto;display:flex;align-items:flex-end;justify-content:center;min-height:0;
}
.header-logo__mex-row{
  flex:0 0 auto;display:flex;align-items:flex-start;justify-content:center;
  max-height:calc(var(--logo-mex-h) + var(--logo-mex-pt) + 2px);
  padding-top:var(--logo-mex-pt);
  padding-left:0;
  overflow:hidden;
  opacity:1;
  transition:max-height .5s cubic-bezier(0.4,0,0.2,1),
             opacity .4s cubic-bezier(0.4,0,0.2,1),
             padding-top .5s cubic-bezier(0.4,0,0.2,1),
             padding-left .5s cubic-bezier(0.4,0,0.2,1);
}
.header-logo__capsule{
  display:block;height:var(--logo-capsule-h);width:auto;max-width:none;
  object-fit:contain;flex-shrink:0;
  background:transparent;border:0;padding:0;margin:0;
  transition:height .5s cubic-bezier(0.4,0,0.2,1),transform .3s var(--cc-ease);
}
.header-logo__name{
  display:block;height:var(--logo-name-h);width:auto;max-width:min(168px,34vw);
  object-fit:contain;object-position:center bottom;
  background:transparent;border:0;padding:0 0 2px 0;margin:0;
  transform:translateY(0);
  transition:transform .5s cubic-bezier(0.4,0,0.2,1);
}
.header-logo__mex{
  display:block;height:var(--logo-mex-h);width:auto;max-width:min(120px,28vw);
  object-fit:contain;object-position:center top;
  background:transparent;border:0;padding:0;margin:0;
}
.header-logo:hover .header-logo__capsule{transform:scale(1.06);}
header.is-scrolled .header-logo{
  --logo-capsule-h:47px;
}
header.is-scrolled .header-logo__name{
  transform:translateY(calc((var(--logo-name-h) - var(--logo-capsule-h)) / 2));
}
header.is-scrolled .header-logo__mex-row{
  max-height:0;
  opacity:0;
  padding-top:0;
  padding-left:0;
  pointer-events:none;
}
@media (max-width:880px){
  :root{--header-h:72px;} /* 14×2 + logo 44px */
  .header-logo{--logo-capsule-h:44px;--logo-name-h:16px;--logo-mex-h:9px;gap:.45rem;}
  header.is-scrolled .header-logo{--logo-capsule-h:39px;}
}
.nav-menu{display:flex;align-items:center;gap:1.35rem;list-style:none;}
.nav-menu > li{display:flex;align-items:center;}
.nav-menu a{
  font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.9);transition:color var(--cc-fast) var(--cc-ease);
  padding:4px 0;line-height:1;
  border-bottom:none;
  display:inline-flex;align-items:center;
}
.nav-menu a:hover,.nav-menu a.active{color:#fff;}
.nav-cta .btn{padding:9px 22px;font-size:.78rem;}
.hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;padding:4px;width:44px;height:44px;min-width:44px;min-height:44px;border:0;background:transparent;color:#fff;-webkit-tap-highlight-color:transparent;}
.hamburger span{display:block;width:24px;height:2px;background:currentColor;border-radius:2px;transition:.3s var(--cc-ease);}
.hamburger:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:8px;}

/* ── Menú móvil a pantalla completa — comportamiento premium tipo Apple ──
   · position:fixed + inset:0 + 100dvh → cubre el viewport dinámico sin
     dejar huecos por la barra de Safari.
   · safe-area-insets en los 4 lados (notch / home-indicator / landscape).
   · overscroll-behavior:contain → sin rebote ni encadenado al fondo. */
.mobile-menu{
  position:fixed;inset:0;
  width:100%;
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  /* Fondo BLANCO SÓLIDO OPACO (antes: rgba translúcido + backdrop-filter
     blur para efecto vidrio esmerilado). Se eliminó el backdrop-filter a
     propósito: al cerrar el panel hacia una sección, el salto de scroll
     ocurre mientras el panel sigue montado, y desmontar una capa
     backdrop-filter durante un scroll simultáneo dispara un parpadeo NEGRO
     de compositing en ciertas GPU/Chrome de laptop (bug conocido del
     navegador). Un fondo opaco sólido se ve igual de limpio y elimina el
     glitch en todos los dispositivos. */
  background:#ffffff;
  z-index:1001;
  padding:
    calc(env(safe-area-inset-top, 0px) + var(--header-offset, 96px) + .4rem)
    calc(env(safe-area-inset-right, 0px) + 7%)
    calc(env(safe-area-inset-bottom, 0px) + 2rem)
    calc(env(safe-area-inset-left, 0px) + 7%);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  /* Estado cerrado */
  opacity:0;visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .34s var(--cc-ease-soft),
             transform .34s var(--cc-ease-soft),
             visibility 0s linear .34s;
  pointer-events:none;
}
.mobile-menu.open{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .38s var(--cc-ease-soft),
             transform .42s var(--cc-ease-soft);
}
/* Botón de cierre (X) — pinado arriba a la derecha, respeta el safe-area.
   position:fixed → se mantiene visible aunque el panel haga scroll. */
.mobile-close{
  position:fixed;
  top:calc(env(safe-area-inset-top, 0px) + 26px);
  right:calc(env(safe-area-inset-right, 0px) + 6%);
  width:42px;height:42px;
  display:grid;place-items:center;
  background:transparent;border:0;cursor:pointer;
  color:var(--navy);border-radius:50%;
  -webkit-tap-highlight-color:transparent;
  opacity:0;transform:scale(.85) rotate(-30deg);
  transition:background .2s ease,transform .35s var(--cc-ease-soft),opacity .3s ease;
  z-index:3;pointer-events:none;
}
.mobile-menu.open .mobile-close{
  opacity:1;transform:none;pointer-events:auto;transition-delay:.08s;
}
.mobile-close:active{background:rgba(13,50,96,.08);transform:scale(.9);}
.mobile-close svg{width:25px;height:25px;}
/* Zona de navegación: fluye con su contenido; el panel entero hace scroll.
   margin-top:auto en el pie lo ancla abajo cuando sobra espacio y lo deja
   fluir tras la lista cuando el contenido es alto (sin solaparse). */
.mobile-menu .mm-nav{flex:0 0 auto;}
.mobile-menu ul{list-style:none;display:flex;flex-direction:column;gap:0;margin-top:.2rem;}
.mobile-menu a{
  display:block;padding:.46rem 0;
  font-size:1.06rem;font-weight:700;color:var(--navy);
  letter-spacing:.04em;text-transform:uppercase;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s var(--cc-ease),transform .15s var(--cc-ease),padding-left .25s var(--cc-ease-soft);
}
.mobile-menu a:active{transform:scale(.985);}
/* Enlace activo — acento de marca con punto indicador */
.mobile-menu a.active{color:var(--green2);padding-left:20px;position:relative;}
.mobile-menu a.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:var(--green);
}
/* Pie del panel — divisor + CTA a ancho completo */
.mobile-menu .mm-footer{
  flex-shrink:0;margin-top:auto;padding-top:1.1rem;
  border-top:1px solid rgba(10,37,64,.12);
  display:flex;flex-direction:column;gap:.6rem;
}
.mobile-menu .mm-cta{width:100%;justify-content:center;padding:14px;font-size:.86rem;}
.mobile-menu .mm-wa{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  font-size:.82rem;font-weight:600;color:var(--gray600);
  text-transform:none;letter-spacing:0;padding:.2rem 0;
}
.mobile-menu .mm-wa svg{width:17px;height:17px;color:#25D366;}
@media (prefers-reduced-motion:no-preference){
  .mobile-menu .mm-footer{opacity:0;transform:translateY(10px);}
  .mobile-menu.open .mm-footer{
    opacity:1;transform:none;
    transition:opacity .45s ease .24s,transform .5s var(--cc-ease-soft) .24s;
  }
}
/* Entrada escalonada de los enlaces al abrir */
@media (prefers-reduced-motion:no-preference){
  .mobile-menu li{opacity:0;transform:translateY(8px);}
  .mobile-menu.open li{
    opacity:1;transform:none;
    transition:opacity .4s ease,transform .45s var(--cc-ease-soft);
  }
  .mobile-menu.open li:nth-child(1){transition-delay:.04s;}
  .mobile-menu.open li:nth-child(2){transition-delay:.07s;}
  .mobile-menu.open li:nth-child(3){transition-delay:.10s;}
  .mobile-menu.open li:nth-child(4){transition-delay:.13s;}
  .mobile-menu.open li:nth-child(5){transition-delay:.16s;}
  .mobile-menu.open li:nth-child(6){transition-delay:.19s;}
  .mobile-menu.open li:nth-child(7){transition-delay:.22s;}
  .mobile-menu.open li:nth-child(8){transition-delay:.25s;}
  .mobile-menu.open li:nth-child(9){transition-delay:.28s;}
  .mobile-menu.open li:nth-child(n+10){transition-delay:.31s;}
}

/* Bloqueo total del scroll del fondo mientras el menú está abierto.
   El <body> se fija conservando la posición (top:-Ypx vía JS) para que
   no haya rebote ni desplazamiento del contenido detrás en iOS/Android. */
html.menu-lock{overscroll-behavior:none;}
body.menu-open{
  position:fixed;left:0;right:0;width:100%;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
}

/* ═══════════════════════════════════════════
   2. HERO / BANNER
═══════════════════════════════════════════ */
.hero{
  margin-top:var(--header-h);
  min-height:460px;
  padding:0;
  background:#0D3260;
  background: linear-gradient(135deg, #0D3260 0%, #0a2a4d 58%, #14416e 100%);
  position:relative;overflow:hidden;
  display:flex;align-items:center;
}
.hero-pattern{
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(106,191,46,.12) 0%, transparent 50%),
    radial-gradient(circle at 10% 80%, rgba(106,191,46,.08) 0%, transparent 40%);
}
.hero-grid-overlay{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:50px 50px;
}
.hero-capsule-bg{
  position:absolute;right:0;top:0;bottom:0;width:55%;
  opacity:.85;
  background:var(--navy, #0a1f3d);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 30%, #000 70%);
  mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 30%, #000 70%);
  pointer-events:none;
  overflow:hidden;
}
.hero-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center right;
  opacity:1;
}
@media (max-width:880px){
  .hero-capsule-bg{width:100%;opacity:.22;-webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 60%);mask-image:linear-gradient(to bottom, transparent 0%, #000 60%);}
  .hero-video{object-position:center center;}
}
@media (prefers-reduced-motion: reduce){
  .hero-video{display:none;}
  .hero-capsule-bg{
    background:url('../img/hero-produccion-capsulas.png') center right/cover no-repeat;
  }
}
.hero-content{
  position:relative;z-index:2;padding:4rem 5%;max-width:1280px;margin:0 auto;width:100%;
}
.hero-breadcrumb{
  display:flex;align-items:center;gap:6px;
  font-size:.76rem;color:rgba(255,255,255,.55);margin-bottom:1.4rem;
}
.hero-breadcrumb a{color:rgba(255,255,255,.7);transition:color .2s;}
.hero-breadcrumb a:hover{color:#fff;}
.hero-breadcrumb .sep{color:rgba(255,255,255,.35);}
.hero h1{
  font-size:clamp(2.6rem,5vw,4rem);font-weight:800;
  color:#fff;line-height:1.1;margin-bottom:1rem;
}
.hero h1 em{font-style:normal;color:var(--green);}
.hero-desc{
  font-size:1rem;color:rgba(255,255,255,.72);max-width:500px;
  line-height:1.75;margin-bottom:2rem;
}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;}
.hero-stats{
  display:flex;gap:3rem;margin-top:3rem;padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.12);flex-wrap:wrap;
}
.hero-stat-num{font-size:1.8rem;font-weight:800;color:var(--green);line-height:1;}
.hero-stat-label{font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:3px;}

/* ═══════════════════════════════════════════
   2b. HOME — Navbar transparente premium sobre el banner azul.
   IMPORTANTE: flujo normal (sin efecto cortina). El hero NO es sticky
   y las secciones/footer NO llevan z-index — solo el navbar flota.
═══════════════════════════════════════════ */
body.home header{
  position:fixed;top:0;left:0;right:0;width:100%;
  height:auto;padding:14px 0;
  /* Azul marino fijo desde el inicio, igual que al hacer scroll */
  background-color:#0d3260;-webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:none;box-shadow:none;
  z-index:1000;
  transition:box-shadow .4s ease, padding .4s ease, background-color .4s ease, backdrop-filter .4s ease, -webkit-backdrop-filter .4s ease;
}
/* Logo compuesto en el header (home) */
body.home{--home-logo-h:56px;}
body.home .header-logo{align-self:center;--logo-capsule-h:var(--home-logo-h);--logo-name-h:20px;--logo-mex-h:11px;--logo-mex-pt:4px;}
/* Menú legible en blanco sobre el azul */
body.home .nav-menu a{color:rgba(255,255,255,.9);transition:color .3s ease;}
body.home .nav-menu a:hover,
body.home .nav-menu a.active{color:#fff;}
body.home .nav-menu .dropdown-menu a{color:var(--navy2);}
body.home .nav-menu .dropdown-menu a:hover{color:var(--green);}
body.home .hamburger span{background:#fff;transition:background .3s ease;}

/* Estado scrolled: fondo semitransparente con blur suave, sombra y compactación */
body.home header.is-scrolled{
  background-color:rgba(13,50,96,.88);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 4px 20px rgba(0,0,0,.2);
  padding:6px 0;
}
body.home header.is-scrolled .header-logo{--logo-capsule-h:47px;}

/* Hero a pantalla completa: contenido arriba, stats abajo */
body.home .hero{
  margin-top:0;
  height:100vh;
  height:100svh;
  height:100dvh;
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  padding:0;
  flex-direction:column;
  align-items:stretch;
}
body.home .hero-content{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  width:100%;
  min-height:0;
  padding-top:calc(28px + var(--home-logo-h) + clamp(.5rem, 1.5vh, 1rem) + env(safe-area-inset-top, 0px));
  padding-bottom:calc(clamp(1rem, 2.5vh, 1.75rem) + env(safe-area-inset-bottom, 0px));
}
body.home .hero-main{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:0;
}
/* Compactar el ritmo vertical del hero en Home */
body.home .hero h1{font-size:clamp(2.2rem,3.6vw,3.05rem);line-height:1.04;margin-bottom:.55rem;letter-spacing:-.025em;font-weight:800;}
/* El verde es acento; igualamos su tamaño al de las líneas blancas para que
   "Soluciones en" y "para tu industria" tengan el mismo peso visual. */
body.home .hero h1 em{font-size:1em;}
body.home .hero-breadcrumb{margin-bottom:.6rem;}
body.home .hero-desc{
  font-size:clamp(.95rem,1.1vw,1.125rem);
  margin-top:clamp(1.25rem,3vh,2.5rem);
  margin-bottom:1rem;
}
body.home .hero-actions{margin-top:clamp(1rem,2vh,1.375rem);margin-bottom:0;}
body.home .hero-stats{
  flex-shrink:0;
  padding-top:clamp(.75rem,2vh,1.25rem);
}

@media (max-width:880px){
  body.home{--home-logo-h:44px;}
  body.home .header-logo{--logo-name-h:16px;--logo-mex-h:9px;}
  body.home header.is-scrolled .header-logo{--logo-capsule-h:39px;}
  body.home .hero-content{
    padding-top:calc(28px + var(--home-logo-h) + clamp(.5rem,2vh,1rem) + env(safe-area-inset-top, 0px));
  }
}

@media (max-width:680px){
  body.home .hero-stats{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem 1.25rem;
  }
}

@media (max-height:640px){
  body.home .hero h1{font-size:clamp(1.65rem,4.5vh,2.2rem);margin-bottom:.35rem;}
  body.home .hero-desc{margin-top:.75rem;margin-bottom:.5rem;font-size:.9rem;}
  body.home .hero-actions{margin-top:.5rem;}
  body.home .hero-stats{padding-top:.5rem;gap:1rem;}
  body.home .hero-stat-num{font-size:1.4rem;}
}

/* ═══════════════════════════════════════════
   PROTECCIÓN DEL LOGO — ESCRITORIO / LAPTOP (≥881px)
   Equivale a la intención de .navbar-brand, pero aplicado a la
   clase REAL del sitio (.header-logo). El móvil queda intacto.
═══════════════════════════════════════════ */
@media (min-width:881px){
  .header-logo{
    min-width:160px;
    overflow:visible;
    flex-shrink:0;
  }
}

/* ═══════════════════════════════════════════
   SHARED SECTION STYLES
═══════════════════════════════════════════ */
.section-header-centered{text-align:center;margin-bottom:3rem;}
.section-header-centered .divider-green{margin:.75rem auto 1.35rem;}
.section-header-centered .section-sub{margin-top:0;}
/* Fondo BLANCO por defecto en TODA sección. Root-fix del "fondo negro":
   varias secciones de la home (#nosotros, #blog, #contacto) no declaraban
   fondo y por tanto mostraban el color del <body>. En la home ese color
   base es azul marino oscuro (anti-FOUC del hero/header); si por cualquier
   motivo ese navy llega a ganarle al blanco del body tras una navegación
   in-place, esas secciones se pintaban de oscuro/negro. Dándole a CADA
   <section> su propio fondo blanco, el contenido es inmune al color del
   body. Las secciones con bg-gray/bg-navy o la .hero lo sobreescriben por
   mayor especificidad, así que nada cambia visualmente donde ya había color. */
section{padding:5rem 0;background:#fff;}
section.bg-gray{background:var(--gray50);}
section.bg-white{background:#fff;}
section.bg-navy{background:var(--navy);}
/* Sin esta regla, las secciones "bg-white" no tienen color propio y
   dependen de que se vea el fondo de <body> por debajo — funciona casi
   siempre, pero deja una rendija: si el fondo temporal de <body> (usado
   para evitar destellos mientras carga el hero) queda visible un instante
   durante la navegación, la sección se ve oscura en vez de blanca. */
section.bg-white{background:#fff;}

/* ═══════════════════════════════════════════
   3. ABOUT
═══════════════════════════════════════════ */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;}
.about-img{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);position:relative;}
.about-img img{width:100%;height:420px;object-fit:cover;}
.about-img-badge{
  position:absolute;bottom:-16px;right:-16px;
  background:var(--green);color:#fff;
  border-radius:var(--radius);padding:1.2rem 1.6rem;
  text-align:center;box-shadow:var(--shadow-md);
}
.about-img-badge strong{display:block;font-size:2rem;font-weight:800;line-height:1;}
.about-img-badge span{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.9;}
.mv-cards{display:grid;gap:1rem;margin-top:1.6rem;}
.mv-card{
  background:var(--gray50);border-radius:var(--radius);
  padding:1.4rem 1.6rem;border-left:3px solid var(--green);
}
.mv-card h4{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:.5rem;}
.mv-card p{font-size:.86rem;color:var(--gray600);line-height:1.65;}

/* ═══════════════════════════════════════════
   4. PRODUCTS – category layout
═══════════════════════════════════════════ */
.cat-header{
  display:flex;align-items:center;gap:1rem;
  margin-bottom:1.8rem;padding-bottom:1rem;
  border-bottom:2px solid var(--gray200);
}
.cat-nav{
  margin-left:auto;display:flex;gap:.5rem;
}
.cat-arrow{
  width:38px;height:38px;border-radius:50%;
  border:1.5px solid var(--gray200);background:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--navy);
  transition:all .2s;flex-shrink:0;
}
.cat-arrow:hover:not([disabled]){
  background:var(--navy);color:#fff;border-color:var(--navy);
  transform:translateY(-1px);
}
.cat-arrow[disabled]{
  opacity:.35;cursor:not-allowed;
}
.cat-arrow svg{width:16px;height:16px;}
.cat-icon{
  width:40px;height:40px;border-radius:10px;
  background:var(--navy);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.cat-icon svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.8;}
.cat-title{font-size:1.1rem;font-weight:700;color:var(--navy);}
.cat-count{font-size:.72rem;font-weight:600;color:var(--gray400);background:var(--gray100);padding:2px 10px;border-radius:100px;margin-left:.5rem;}
.cat-block{margin-bottom:4rem;}

/* ─── Carrusel horizontal de productos ─── */
.prod-carousel{
  position:relative;
  margin:0 -1rem; /* extiende ligeramente para que el fade se vea natural */
}
.prod-carousel::before,
.prod-carousel::after{
  content:'';position:absolute;top:0;bottom:1rem;width:32px;
  pointer-events:none;z-index:2;transition:opacity .25s;
}
.prod-carousel::before{
  left:0;background:linear-gradient(to right,var(--gray50),transparent);
}
.prod-carousel::after{
  right:0;background:linear-gradient(to left,var(--gray50),transparent);
}
.prod-carousel[data-at-start="1"]::before{opacity:0;}
.prod-carousel[data-at-end="1"]::after{opacity:0;}

.prod-grid{
  display:flex;
  gap:var(--grid-gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:.5rem 1rem 1.2rem;
  scroll-padding-inline:1rem;
  /* Ocultar scrollbar manteniendo funcionalidad */
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor:grab;
}
.prod-grid::-webkit-scrollbar{display:none;}
.prod-grid:active{cursor:grabbing;}
.prod-grid .prod-card{
  flex:0 0 calc((100% - 4.2rem) / 4); /* 4 visibles por defecto */
  scroll-snap-align:start;
  min-width:0;
}
@media(max-width:1024px){
  .prod-grid .prod-card{flex-basis:calc((100% - 2.8rem) / 3);}
}
@media(max-width:768px){
  .prod-grid{gap:1.5rem;}
  .prod-grid .prod-card{flex-basis:calc((100% - 1.5rem) / 2);}
}
@media(max-width:480px){
  /* ── Opción A — Chasis unificado en móvil ──
     El carrusel deja de sangrar (margin:0) y se vuelve flush dentro de
     .container, por lo que HEREDA exactamente los mismos márgenes laterales
     y ancho útil que las secciones molde. Cada tarjeta ocupa el 100% del
     contenido y hace snap de una por pantalla. El slider sigue intacto. */
  .prod-carousel{margin:0;}
  .prod-carousel::before,.prod-carousel::after{display:none;}
  .prod-grid{gap:var(--grid-gap);padding:.5rem 0 1.4rem;scroll-padding-inline:0;}
  .prod-grid > :first-child{margin-left:0;}
  .prod-grid > :last-child{margin-right:0;}
  .prod-grid .prod-card{flex:0 0 100%;scroll-snap-align:start;}
}

/* ─── Variantes del carrusel para Maquinaria y Maquila ─── */
.cat-header-compact{
  border-bottom:1px solid var(--gray200);
  padding-bottom:.9rem;
  margin-bottom:1.4rem;
}
.cat-header-compact .cat-pill{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--navy);background:var(--gray100);
  padding:6px 12px;border-radius:100px;
}
.cat-header-compact .cat-pill svg{width:14px;height:14px;color:var(--green);}

.prod-carousel-gray::before{background:linear-gradient(to right,var(--gray100),transparent)!important;}
.prod-carousel-gray::after{background:linear-gradient(to left,var(--gray100),transparent)!important;}

/* Certificaciones: los logotipos (FDA, etc.) no deben llevar velo/sombra
   lateral. Se elimina el degradado de borde solo en este carrusel para
   garantizar la correcta visibilidad de cada logo. */
.prod-carousel:has(.prod-grid-cert)::before,
.prod-carousel:has(.prod-grid-cert)::after{content:none;}

/* Servicios (Maquinaria, Maquila, Logística): el degradado decorativo del
   borde se superponía ~16px sobre el costado de la primera/última tarjeta.
   Las flechas de navegación ya indican el desplazamiento, así que se retira
   el velo para que las tarjetas se vean limpias. Consistente con el carrusel
   de certificaciones. */
.prod-carousel:has(.prod-grid-maq)::before,
.prod-carousel:has(.prod-grid-maq)::after,
.prod-carousel:has(.prod-grid-maquila)::before,
.prod-carousel:has(.prod-grid-maquila)::after{content:none;}

/* Maquinaria y Maquila usan el componente y la rejilla canónicos de Cápsulas
   (.prod-grid .prod-card). El responsive 4→3→2→1 columnas se hereda de ahí,
   garantizando dimensiones idénticas en todos los breakpoints. */

/* Certificaciones — 4 visibles desktop */
.prod-grid-cert > .cert-card{
  flex:0 0 calc((100% - 4.2rem) / 4);
  scroll-snap-align:start;
  margin-bottom:.6rem;
  display:flex;flex-direction:column;gap:.6rem;
}
@media(max-width:1024px){.prod-grid-cert > .cert-card{flex-basis:calc((100% - 2.8rem) / 3);}}
@media(max-width:768px){.prod-grid-cert > .cert-card{flex-basis:calc((100% - 1.4rem) / 2);}}
@media(max-width:480px){.prod-grid-cert > .cert-card{flex:0 0 100%;scroll-snap-align:start;}}

/* Blog — 3 visibles desktop */
.prod-grid-blog > .blog-card{
  flex:0 0 calc((100% - 2.8rem) / 3);
  scroll-snap-align:start;
  margin-bottom:.6rem;
}
@media(max-width:1024px){.prod-grid-blog > .blog-card{flex-basis:calc((100% - 1.4rem) / 2);}}
@media(max-width:768px){.prod-grid-blog > .blog-card{flex-basis:82%;}}
@media(max-width:480px){.prod-grid-blog > .blog-card{flex:0 0 100%;scroll-snap-align:start;}}
.prod-card{
  background:#fff;border-radius:var(--radius-lg);
  border:1px solid var(--gray200);overflow:hidden;
  transition:transform .25s,box-shadow .25s,border-color .25s;
  display:flex;flex-direction:column;
}
.prod-card:hover{
  box-shadow:var(--ring-green);
  border-color:var(--green);
}
.prod-img{
  height:180px;background:var(--gray50);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:.85rem 0;position:relative;
}
.prod-img img{
  width:100%;height:100%;max-width:none;max-height:none;
  object-fit:contain;object-position:center;
  transition:transform .35s;
  filter:none;
}
.prod-card:hover .prod-img img{transform:scale(1.08) rotate(-2deg);}

/* Variante con foto a sangre (Maquila/Maquinaria): la foto SIEMPRE cubre el
   100% de la caja fija de 180px, sin importar su proporción original — se
   recorta el sobrante en vez de encogerse (object-fit:cover). Esto evita las
   franjas de fondo visibles ("marcos") que dejaba el object-fit:contain
   anterior cuando la proporción de la foto no coincidía con la caja. */
.prod-img-cover{padding:0;background:#fff !important;}
.prod-img-cover img{width:100%;height:100%;object-fit:cover;object-position:center;}
.prod-card:hover .prod-img-cover img{transform:scale(1.06) rotate(0);}

/* Variante para equipos verticales altos (p. ej. Pulidora): la foto es más
   alta que ancha y con la caja estándar de 180px se veía pequeña, sobre todo
   en móvil. Aquí se agranda el área de imagen para que el equipo completo
   (tolva, cuerpo y ruedas) se aprecie a buen tamaño con object-fit:contain,
   sin recortar. Escala progresivamente en pantallas chicas. */
.prod-img-tall{height:230px;padding:.4rem 0;}
@media(max-width:768px){.prod-img-tall{height:280px;}}
@media(max-width:480px){.prod-img-tall{height:340px;padding:.2rem 0;}}
.prod-img-tall img{object-fit:contain;}

/* Variante con icono (Logística): icono centrado en el área de imagen de 180px */
.prod-img-icon{padding:0;background:linear-gradient(135deg,#e9f6e1 0%,#f3faef 55%,#eef6ff 100%);}
.prod-img-icon .i-svc{width:60px;height:60px;stroke:var(--green2);fill:none;stroke-width:1.5;transition:transform .35s;}
.prod-card:hover .prod-img-icon .i-svc{transform:scale(1.08);}

/* Pills (etiquetas) dentro del footer del componente unificado */
.prod-footer .maq-tag,.prod-footer .maquila-tag{margin-top:0;}

.prod-body{padding:1.2rem 1.4rem;flex:1;display:flex;flex-direction:column;}
/* ── COMPONENTE ÚNICO DE TARJETA — altura reservada constante ──
   Usado por Cápsulas, Maquinaria, Maquila y Logística. El título reserva 2 líneas
   y la descripción 4 líneas (la altura natural de la tarjeta de referencia,
   Cápsula de Gelatina), de modo que TODAS las tarjetas miden exactamente igual en
   cualquier breakpoint. El texto que excede se recorta con elipsis. */
.prod-name{
  font-size:.92rem;font-weight:700;color:var(--navy);
  margin-bottom:.3rem;line-height:1.3;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;min-height:calc(1.3em * 2);
}
.prod-desc{
  font-size:.78rem;color:var(--gray600);line-height:1.55;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;
  overflow:hidden;min-height:calc(1.55em * 4);max-height:calc(1.55em * 4);
}
.prod-footer{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:1rem;padding-top:.8rem;
  border-top:1px solid var(--gray100);
  flex-wrap:nowrap;gap:.6rem;
}
/* La etiqueta nunca envuelve (mantiene el footer en una sola fila → altura
   de tarjeta uniforme); si fuera demasiado larga se recorta con elipsis. */
.prod-footer .badge,
.prod-footer .maq-tag,
.prod-footer .maquila-tag{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:0 1 auto;min-width:0;
}
.prod-footer .prod-btn{flex:0 0 auto;white-space:nowrap;}
.prod-btn{
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--green);display:flex;align-items:center;gap:4px;
  transition:gap .2s,color .2s;
}
.prod-btn:hover{color:var(--green2);gap:8px;}
.prod-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;}

/* ═══════════════════════════════════════════
   5. SIZES
═══════════════════════════════════════════ */
.sizes-img-wrap{
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);background:#fff;
  border:1px solid var(--gray200);
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.sizes-img-wrap:hover{
  border-color:var(--green);
  box-shadow:var(--ring-green);
  transform:translateY(-2px);
}
.sizes-img-wrap img{width:100%;display:block;transition:transform .35s;}
.sizes-img-wrap:hover img{transform:scale(1.04);}
.sizes-pills{
  display:flex;justify-content:center;gap:1.6rem;
  flex-wrap:wrap;margin-top:2rem;
}
.size-chip{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:#fff;border:1.5px solid var(--gray200);
  border-radius:10px;padding:.6rem 1rem;
  transition:border-color .2s,box-shadow .2s;cursor:default;
  min-width:58px;
}
.size-chip:hover{border-color:var(--green);box-shadow:var(--ring-green);}
.size-chip-num{font-size:1.1rem;font-weight:800;color:var(--navy);}
.size-chip-lbl{font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gray400);}

/* ═══════════════════════════════════════════
   6. MACHINERY
═══════════════════════════════════════════ */
.maq-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.2rem;
}
.maq-card{
  background:#fff;border-radius:var(--radius-lg);border:1px solid var(--gray200);
  overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s;
  display:flex;flex-direction:column;
  min-height:388px; /* alinea la altura con las tarjetas de Cápsulas/Maquila (4up y 3up) */
}
.maq-card:hover{box-shadow:var(--ring-green);border-color:var(--green);}
.maq-img{
  height:180px;background:linear-gradient(135deg, var(--gray50) 0%, var(--gray100) 100%);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:.85rem 0;position:relative;
}
.maq-img img{
  width:100%;height:100%;max-width:none;max-height:none;
  object-fit:contain;object-position:center;transition:transform .3s;
}
.maq-card:hover .maq-img img{transform:scale(1.06);}
.maq-body{padding:1.2rem 1.4rem;flex:1;display:flex;flex-direction:column;}
.maq-name{font-size:.92rem;font-weight:700;color:var(--navy);margin-bottom:.3rem;}
.maq-desc{font-size:.78rem;color:var(--gray600);line-height:1.55;flex:1;min-height:2.4rem;}
.maq-tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--navy);background:var(--gray100);padding:.32rem .7rem;border:1px solid transparent;border-radius:100px;}

/* Footer "Ver más" en Maquinaria y Maquila — igual a Cápsulas */
.maq-footer{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:auto;padding-top:.8rem;
  border-top:1px solid var(--gray100);
}
.maq-footer .maq-tag{margin-top:0;}
.maq-footer .prod-btn{
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--green);display:flex;align-items:center;gap:4px;
  transition:gap .2s,color .2s;
}
.maq-footer .prod-btn:hover{color:var(--green2);gap:8px;}
.maq-footer .prod-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5;}

.maquila-footer{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:1rem;padding-top:.8rem;
  border-top:1px solid var(--gray100);
}
.maquila-tag{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--green2);background:rgba(106,191,46,.10);padding:.32rem .7rem;border:1px solid rgba(106,191,46,.22);border-radius:100px;
}
.maquila-footer .prod-btn{
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--green);display:flex;align-items:center;gap:4px;
  transition:gap .2s,color .2s;
}
.maquila-footer .prod-btn:hover{color:var(--green2);gap:8px;}
.maquila-footer .prod-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;}

/* Al hacer hover en la card completa, la flecha también se desplaza */
.maq-card:hover .maq-footer .prod-btn{gap:8px;color:var(--green2);}
.maquila-card:hover .maquila-footer .prod-btn{gap:8px;color:var(--green2);}

/* ═══════════════════════════════════════════
   7. MAQUILA
═══════════════════════════════════════════ */
.maquila-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--grid-gap);
}
.maquila-card{
  background:#fff;border-radius:var(--radius-lg);border:1px solid var(--gray200);
  padding:2rem;display:flex;gap:1.2rem;align-items:flex-start;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.maquila-card:hover{box-shadow:var(--ring-green);border-color:var(--green);}
.maquila-icon{
  width:48px;height:48px;border-radius:12px;background:#e8f5e0;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.4rem;
}
.maquila-body h3{font-size:.92rem;font-weight:700;color:var(--navy);margin-bottom:.3rem;}
.maquila-body p{font-size:.8rem;color:var(--gray600);line-height:1.6;}

/* ═══════════════════════════════════════════
   8. CERTIFICATIONS
═══════════════════════════════════════════ */
.cert-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.2rem;
  max-width:1100px;margin:0 auto;
}
.cert-card{
  background:#fff;border-radius:var(--radius-lg);border:1px solid var(--gray200);
  padding:1.6rem 1.2rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.cert-card:hover{box-shadow:var(--ring-green);border-color:var(--green);}
.cert-card:hover .cert-logo-slot.has-logo img{transform:scale(1.04);}
.cert-logo{height:64px;width:auto;object-fit:contain;}
.cert-logo-slot.has-logo{
  background:#fff;
  border:none;
  height:84px;width:100%;
  padding:8px 14px;
  border-radius:12px;
  overflow:hidden;
}
.cert-logo-slot.has-logo img{
  max-height:100%;max-width:100%;
  width:auto;height:auto;
  object-fit:contain;
  transition:transform .3s ease;
}
.cert-name{font-size:.84rem;font-weight:700;color:var(--navy);}
.cert-desc{font-size:.73rem;color:var(--gray600);line-height:1.5;}
.cert-chip{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green2);background:#e8f5e0;padding:3px 10px;border-radius:100px;}

/* ═══════════════════════════════════════════
   9. BLOG
═══════════════════════════════════════════ */
.blog-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.6rem;
}
.blog-card{
  background:#fff;border-radius:var(--radius-lg);border:1px solid var(--gray200);
  overflow:hidden;transition:transform .25s,box-shadow .25s;
}
.blog-card:hover{box-shadow:var(--ring-green);border-color:var(--green);}
.blog-thumb{
  height:170px;display:flex;align-items:center;justify-content:center;font-size:3rem;
}
.blog-body{padding:1.4rem;}
.blog-cat{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green);background:#e8f5e0;padding:3px 10px;border-radius:100px;}
.blog-title{font-size:1rem;font-weight:700;color:var(--navy);margin:.7rem 0 .4rem;line-height:1.35;}
.blog-excerpt{font-size:.8rem;color:var(--gray600);line-height:1.6;}
.blog-meta{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--gray100);}
.blog-date{font-size:.72rem;color:var(--gray400);}
.blog-link{font-size:.72rem;font-weight:700;color:var(--green);display:flex;align-items:center;gap:4px;}
.blog-link:hover{color:var(--green2);}

/* ═══════════════════════════════════════════
   10. CONTACT CTA BAND
═══════════════════════════════════════════ */
.cta-band{
  background:linear-gradient(135deg,var(--navy),var(--navy2));
  padding:5rem 0;text-align:center;position:relative;overflow:hidden;
}
.cta-band::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 70% 50%,rgba(106,191,46,.12),transparent 60%);
}
.cta-band h2{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;color:#fff;margin-bottom:.8rem;}
.cta-band p{font-size:.95rem;color:rgba(255,255,255,.7);max-width:500px;margin:0 auto 2rem;}
.cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}

/* ═══════════════════════════════════════════
   11. CONTACT SECTION
═══════════════════════════════════════════ */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;}
.contact-info h2{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;color:var(--navy);margin-bottom:.6rem;}
.contact-info p{font-size:.9rem;color:var(--gray600);line-height:1.7;margin-bottom:1.8rem;}
.contact-items{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.8rem;}
.contact-item{display:flex;align-items:center;gap:14px;}
.contact-icon{
  width:44px;height:44px;border-radius:50%;background:#e8f5e0;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.contact-icon svg{width:20px;height:20px;stroke:var(--green2);fill:none;stroke-width:1.8;}
.contact-icon-wsp{background:#dcf8c6;}
.contact-icon-wsp svg{stroke:none;fill:#25d366;width:22px;height:22px;}
.contact-item-label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray400);}
.contact-item-value{font-size:.9rem;font-weight:600;color:var(--navy);}
.contact-item-value a{color:inherit;transition:color .2s;}
.contact-item-value a:hover{color:var(--green);}
.social-row{display:flex;gap:.75rem;flex-wrap:wrap;}
.soc-pill{
  display:flex;align-items:center;gap:7px;padding:8px 16px;
  border-radius:100px;border:1.5px solid var(--gray200);
  font-size:.74rem;font-weight:600;color:var(--gray800);
  transition:all .2s;
}
.soc-pill svg{width:16px;height:16px;flex-shrink:0;}
.soc-pill:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.soc-fb:hover{background:#1877F2;color:#fff;border-color:#1877F2;}
.soc-ig:hover{background:#E1306C;color:#fff;border-color:#E1306C;}
.soc-tt:hover{background:#000;color:#fff;border-color:#000;}
.soc-yt:hover{background:#FF0000;color:#fff;border-color:#FF0000;}
/* Al hacer hover el fondo toma el color de la marca: el ícono debe volverse blanco para no perderse */
.soc-pill:hover svg path,
.soc-pill:hover svg circle,
.soc-pill:hover svg rect{fill:#fff;}
.contact-form{background:var(--gray50);border-radius:var(--radius-lg);padding:2.4rem;border:1px solid var(--gray200);}

/* ── Mapa de ubicación (Google Maps incrustado, responsivo) ── */
.contact-map{
  margin-top:3.5rem;
}
.contact-map-head{
  display:flex;align-items:center;gap:.7rem;margin-bottom:1.2rem;
}
.contact-map-head svg{width:22px;height:22px;color:var(--green);flex-shrink:0;}
.contact-map-head h3{font-size:1.1rem;font-weight:700;color:var(--navy);}
.contact-map-head p{font-size:.84rem;color:var(--gray600);margin-top:2px;}
.contact-map-frame{
  position:relative;
  width:100%;
  aspect-ratio:16 / 7;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--gray200);
  box-shadow:var(--shadow-md);
}
.contact-map-frame iframe{
  position:absolute;inset:0;
  width:100%;height:100%;border:0;display:block;
}
@media(max-width:680px){
  .contact-map{margin-top:2.5rem;}
  .contact-map-frame{aspect-ratio:4 / 5;}
}
.contact-form h3{font-size:1.1rem;font-weight:700;color:var(--navy);margin-bottom:1.6rem;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.form-group{margin-bottom:1.1rem;}
.form-group label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gray600);margin-bottom:5px;}
.form-group input,.form-group textarea,.form-group select{
  width:100%;padding:11px 14px;border:1.5px solid var(--gray200);border-radius:10px;
  font-family:inherit;font-size:.88rem;color:var(--gray800);background:#fff;
  outline:none;transition:border-color .2s,box-shadow .2s;
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{
  border-color:var(--green);box-shadow:0 0 0 3px rgba(106,191,46,.12);
}
.form-group textarea{resize:vertical;min-height:100px;}
.form-submit{
  width:100%;background:var(--navy);color:#fff;padding:13px;border-radius:100px;
  border:none;cursor:pointer;font-family:inherit;font-size:.84rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;transition:background .2s,transform .15s;
  margin-top:.4rem;
}
.form-submit:hover{background:var(--navy2);transform:translateY(-1px);}

/* ═══════════════════════════════════════════
   12. FOOTER
═══════════════════════════════════════════ */
footer{
  background:#060f1e;
  color:rgba(255,255,255,.55);
  padding:3.5rem 0 2.2rem;
}
/* Wrapper alineado MATEMÁTICAMENTE con .header-inner (mismo max-width + padding) */
.footer-inner{max-width:1280px;margin:0 auto;padding:0 5%;}
.footer-top{
  display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:3rem;
  padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:1.5rem;
}
/* Col 1 — Branding: logo con la misma alineación, padding y hover que el del header */
.footer-logo{display:inline-flex;align-items:center;padding:0;margin:0 0 1.3rem;background:transparent;box-shadow:none;}
.footer-logo img{
  width:auto;max-width:100%;display:block;object-fit:contain;
  background:transparent !important;background-color:transparent !important;
  padding:0 !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;
}
/* Versión vertical armada con los elementos separados del logo:
   icono (verde) + wordmark CALI CAPS (blanco, legible sobre navy) + "de México" (verde) */
.footer-logo__stack{
  display:flex;flex-direction:column;align-items:center;
  transition:transform .3s ease;
}
.footer-logo__icon{height:76px;}
.footer-logo__name{height:17px;margin-top:10px;}
.footer-logo__mex{height:9px;margin-top:6px;}
.footer-logo:hover .footer-logo__stack{transform:scale(1.04);}
.footer-brand p{font-size:.82rem;line-height:1.7;max-width:300px;color:rgba(255,255,255,.5);}
/* Col 2 y 3 — Recursos y Contacto */
.footer-col h4{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:1.1rem;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.7rem;}
.footer-col li a{font-size:.82rem;color:rgba(255,255,255,.5);transition:color .2s;}
.footer-col li a:hover{color:#fff;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;font-size:.75rem;}
.footer-bottom span{color:rgba(255,255,255,.45);}
.footer-bottom a{color:rgba(255,255,255,.45);margin-left:1rem;transition:color .2s;}
.footer-bottom a:hover{color:#fff;}
/* Colapso ordenado en móvil */
@media(max-width:1024px){
  .footer-top{grid-template-columns:1fr 1fr;gap:2.4rem;}
  .footer-brand{grid-column:1 / -1;}
}
@media(max-width:768px){
  .footer-top{grid-template-columns:1fr;gap:2rem;}
}
/* Espaciado de seguridad: los FAB (WhatsApp der. / scroll-top izq.) no tapan el copyright */
@media(max-width:768px){
  footer{padding-bottom:132px;}
  .footer-bottom{justify-content:center;text-align:center;gap:.85rem 1.5rem;}
  .footer-bottom a{margin-left:0;}
}
/* Escritorio/tablet: reserva horizontal para que el enlace "Aviso de Privacidad"
   (alineado a la derecha) y el copyright (izquierda) no queden bajo los botones flotantes */
@media(min-width:769px){
  .footer-bottom{padding:0 104px;}
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
/* El ancla #cotizar vive dentro del form; offset para que el header fijo no la tape */
.anchor-target{scroll-margin-top:110px;}
/* Contacto en DOS columnas para Laptop/PC (>=992px). Por debajo se apila. */
@media(min-width:992px){
  .contact-wrap{grid-template-columns:1fr 1fr;gap:4rem;align-items:start;}
}
@media(max-width:991px){
  .contact-wrap{grid-template-columns:1fr;gap:2.5rem;}
  /* Los hijos de un grid tienen min-width:auto por defecto y no se encogen
     por debajo del ancho intrínseco de su contenido (inputs, textos largos),
     lo que provoca desbordamiento horizontal en móvil. Forzamos min-width:0. */
  .contact-info,.contact-form{min-width:0;}
}
@media(max-width:480px){
  .contact-form{padding:1.5rem;}
}
@media(max-width:1024px){
  .about-grid{grid-template-columns:1fr;gap:2.5rem;}
  .about-img{display:none;}
}
@media(max-width:768px){
  .nav-menu,.nav-cta{display:none;}
  .hamburger{display:flex;}
  .hero h1{font-size:2.2rem;}
  .hero-stats{gap:1.5rem;}
  .form-row{grid-template-columns:1fr;}
  .cat-header{flex-wrap:wrap;}
  .cat-nav{order:3;margin-left:auto;}
}
@media(max-width:480px){
  .maquila-grid{grid-template-columns:1fr;}
}

/* ═══════════════════════════════════════════
   SCROLL ANIMATIONS
═══════════════════════════════════════════ */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;}
.fade-in.visible{opacity:1;transform:none;}

/* Scroll reveal escalonado — Maquinaria & Maquila */
.reveal-stagger > .maq-card,
.reveal-stagger > .maquila-card{
  opacity:0;
  transform:translateY(32px) scale(.97);
  transition:opacity .65s var(--cc-ease),transform .65s var(--cc-ease);
}
.reveal-stagger.visible > .maq-card,
.reveal-stagger.visible > .maquila-card{
  opacity:1;
  transform:none;
}
/* Delays escalonados (hasta 12 tarjetas) */
.reveal-stagger.visible > *:nth-child(1){transition-delay:.04s}
.reveal-stagger.visible > *:nth-child(2){transition-delay:.10s}
.reveal-stagger.visible > *:nth-child(3){transition-delay:.16s}
.reveal-stagger.visible > *:nth-child(4){transition-delay:.22s}
.reveal-stagger.visible > *:nth-child(5){transition-delay:.28s}
.reveal-stagger.visible > *:nth-child(6){transition-delay:.34s}
.reveal-stagger.visible > *:nth-child(7){transition-delay:.40s}
.reveal-stagger.visible > *:nth-child(8){transition-delay:.46s}
.reveal-stagger.visible > *:nth-child(9){transition-delay:.52s}
.reveal-stagger.visible > *:nth-child(10){transition-delay:.58s}
.reveal-stagger.visible > *:nth-child(11){transition-delay:.64s}
.reveal-stagger.visible > *:nth-child(12){transition-delay:.70s}

/* Respetar usuarios con motion reducida */
@media (prefers-reduced-motion: reduce){
  .reveal-stagger > .maq-card,
  .reveal-stagger > .maquila-card{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* ═══════════════════════════════════════════
   ICONOGRAFÍA SVG (reemplaza emojis)
═══════════════════════════════════════════ */
/* Maquila — círculo verde claro, icono verde */
.maquila-icon .i-svc{width:24px;height:24px;color:var(--green2);}

/* Maquinaria — placeholders sin foto: cuadrado gris con icono naval */
.maq-img .i-svc{width:64px;height:64px;color:var(--navy);opacity:.55;stroke-width:1.4;}

/* Misión / Visión */
.mv-card h4{display:flex;align-items:center;gap:8px;}
.mv-card h4 .i-mv{width:16px;height:16px;color:var(--green);flex-shrink:0;}

/* Blog thumbnails — icono grande translúcido */
.blog-thumb .i-svc,
.blog-thumb .i-blog{width:72px;height:72px;color:var(--navy);opacity:.45;stroke-width:1.4;}

/* Fecha en meta del blog */
.blog-date{display:inline-flex;align-items:center;gap:5px;}
.blog-date .i-mini{width:12px;height:12px;color:var(--gray400);flex-shrink:0;}


/* ═══════════════════════════════════════════
   PLACEHOLDER SLOTS (foto Nosotros + logos certificaciones)
═══════════════════════════════════════════ */
.placeholder-slot{
  position:relative;
  background:
    linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 24px,
      rgba(255,255,255,.55) 24px,
      rgba(255,255,255,.55) 25px
    ),
    linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border-radius:var(--radius-lg);
  min-height:420px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.placeholder-content{
  text-align:center;color:var(--gray600);
  padding:2rem;max-width:80%;
}
.placeholder-content svg{
  width:64px;height:64px;color:var(--gray400);
  margin:0 auto .8rem;display:block;
}
.placeholder-label{
  font-size:.95rem;font-weight:700;color:var(--navy);
  margin-bottom:.4rem;
}
.placeholder-hint{
  font-size:.75rem;color:var(--gray600);line-height:1.5;
}
.placeholder-hint code{
  font-family:'SF Mono','Monaco','Menlo',monospace;
  font-size:.7rem;background:#fff;padding:2px 7px;border-radius:6px;
  border:1px solid var(--gray200);
}

/* Cert logo slot */
.cert-logo-slot{
  height:64px;width:140px;
  background:
    repeating-linear-gradient(
      45deg,
      var(--gray100) 0,
      var(--gray100) 6px,
      var(--gray50) 6px,
      var(--gray50) 12px
    );
  border:1.5px dashed var(--gray200);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
}
.cert-logo-slot span{
  font-family:'SF Mono','Monaco','Menlo',monospace;
  font-size:.72rem;font-weight:700;color:var(--gray600);
  letter-spacing:.05em;
}

/* ═══════════════════════════════════════════
   FORM ENHANCEMENTS
═══════════════════════════════════════════ */
.form-banner{
  padding:12px 16px;border-radius:10px;
  font-size:.85rem;font-weight:600;
  margin-bottom:1.2rem;
}
.form-banner.success{background:#e8f5e0;color:var(--green2);border:1px solid var(--green);}
.form-banner.error{background:#fee2e2;color:#b91c1c;border:1px solid #fecaca;}
.form-whatsapp{
  width:100%;background:transparent;color:var(--gray600);
  padding:10px;border-radius:100px;border:1.5px solid var(--gray200);
  cursor:pointer;font-family:inherit;font-size:.78rem;font-weight:600;
  letter-spacing:.04em;margin-top:.6rem;
  transition:all .2s;
}
.form-whatsapp:hover{
  background:#e8f5e0;color:var(--green2);border-color:var(--green);
}


/* ═══════════════════════════════════════════
   FLOATING ACTION BUTTONS (FABs)
═══════════════════════════════════════════ */
/* ── Menú de contacto — WhatsApp directo (ver chrome.css; reglas base duplicadas por compatibilidad) ── */
.contact-menu{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:900;
  display:flex;flex-direction:column;align-items:center;
  width:58px;gap:.8rem;overflow:visible;
  transition:gap .35s cubic-bezier(.22,.85,.3,1);
}
.cm-action{
  position:relative;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;color:#fff;text-decoration:none;
  box-shadow:0 8px 22px rgba(10,37,64,.28);
  opacity:0;max-height:0;overflow:hidden;
  transform:translateY(14px) scale(.4);pointer-events:none;
  transition:opacity .32s cubic-bezier(.22,.85,.3,1.1),
             transform .32s cubic-bezier(.22,.85,.3,1.1),
             max-height .35s cubic-bezier(.22,.85,.3,1),
             margin .35s cubic-bezier(.22,.85,.3,1);
  margin:0;
}
.cm-action svg{width:22px;height:22px;}
.cm-call{background:#0D3260;}
.cm-call:hover{background:#0a2540;}
.cm-quote{background:#17a2b8;}
.cm-quote:hover{background:#138a9c;}
.cm-action:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 12px 26px rgba(10,37,64,.34);}
.contact-menu.open .cm-action,
.contact-menu.cm-expanded .cm-action{
  opacity:1;max-height:48px;
  /* overflow:visible al estar desplegado: el overflow:hidden del estado
     colapsado (para la animación de max-height) recortaba el .cm-tip,
     que se posiciona FUERA del botón. */
  overflow:visible;
  transform:translateY(0) scale(1);pointer-events:auto;
}
.contact-menu.open .cm-call,
.contact-menu.cm-expanded .cm-call{transition-delay:.04s;}
.contact-menu.open .cm-quote,
.contact-menu.cm-expanded .cm-quote{transition-delay:.1s;}
.cm-tip{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(6px);background:var(--navy);color:#fff;font-size:.74rem;font-weight:600;letter-spacing:.02em;white-space:nowrap;padding:.32rem .6rem;border-radius:7px;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;box-shadow:0 4px 14px rgba(10,37,64,.22);}
.cm-action:hover .cm-tip,
.cm-action:focus-visible .cm-tip,
.cm-main:hover .cm-tip,
.cm-main:focus-visible .cm-tip,
.cm-trigger:hover .cm-tip,
.cm-trigger:focus-visible .cm-tip{opacity:1;transform:translateY(-50%) translateX(0);}
.cm-dock{display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cm-main{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;text-decoration:none;box-shadow:0 10px 26px rgba(37,211,102,.42);transition:transform .25s ease,box-shadow .25s ease;-webkit-tap-highlight-color:transparent;flex-shrink:0;}
.cm-main:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(37,211,102,.5);}
.cm-main:active{transform:scale(.95);}
.cm-main::after{content:'';position:absolute;inset:0;border-radius:50%;background:#25D366;z-index:-1;animation:cmPulse 2.4s cubic-bezier(.25,.6,.3,1) infinite;}
@keyframes cmPulse{0%{transform:scale(1);opacity:.5;}70%{opacity:0;}100%{transform:scale(1.75);opacity:0;}}
.cm-trigger{
  width:32px;height:32px;min-width:32px;min-height:32px;
  border-radius:50%;border:2px solid #fff;background:var(--navy);color:#fff;
  display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:0 3px 10px rgba(10,37,64,.35);
  opacity:.72;z-index:2;
  transition:opacity .3s ease,
             transform .36s cubic-bezier(.22,.85,.3,1.05),
             bottom .36s cubic-bezier(.22,.85,.3,1),
             right .36s cubic-bezier(.22,.85,.3,1),
             background .2s ease,box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;flex-shrink:0;position:relative;
}
.cm-trigger:hover{background:var(--navy2);opacity:1;}
.cm-trigger-ico{display:block;pointer-events:none;width:12px;height:12px;transition:transform .3s cubic-bezier(.4,.1,.3,1.2);}
@keyframes cmTriggerIn{from{opacity:0;transform:scale(.72);}to{opacity:.72;transform:scale(1);}}
.cm-trigger.cm-trigger--reveal{animation:cmTriggerIn .34s cubic-bezier(.22,.85,.3,1.1) both;}
.contact-menu:not(.open):not(.cm-expanded){gap:0;}
.contact-menu:not(.open):not(.cm-expanded) .cm-trigger,
.contact-menu.cm-expanded:not(.open) .cm-trigger{
  position:absolute;right:calc(58px + 9px);bottom:13px;
}
.contact-menu:not(.open):not(.cm-expanded) .cm-action{margin-top:calc(-1 * .8rem);transition-delay:0s;}
.contact-menu.open .cm-trigger{position:relative;right:auto;bottom:auto;opacity:1;}
.contact-menu.open .cm-trigger-ico,
.contact-menu.cm-expanded .cm-trigger-ico{transform:rotate(180deg);}
.contact-menu.cm-expanded .cm-trigger{opacity:1;}
@media (max-width:680px){
  .contact-menu{right:1rem;bottom:1rem;width:56px;}
  .contact-menu:not(.open):not(.cm-expanded) .cm-trigger,
  .contact-menu.cm-expanded:not(.open) .cm-trigger{right:calc(56px + 9px);bottom:12px;}
  .cm-main{width:56px;height:56px;}
  .cm-action{width:46px;height:46px;}
  .contact-menu.open .cm-action,
  .contact-menu.cm-expanded .cm-action{max-height:46px;}
  .cm-trigger{width:32px;height:32px;min-width:32px;min-height:32px;}
}
@media (prefers-reduced-motion:reduce){.cm-main::after{animation:none;opacity:0;}}

/* ═══════════════════════════════════════════
   FORM ENHANCEMENTS (campos extra + consentimientos)
═══════════════════════════════════════════ */
.form-intro{
  font-size:.82rem;color:var(--gray600);line-height:1.6;
  margin:-.6rem 0 1.2rem;
}
.form-group .req{color:var(--green2);font-weight:700;}
.form-consent{
  display:flex;flex-direction:column;gap:.7rem;
  margin:.4rem 0 1.2rem;
}
.form-consent .checkbox{
  display:flex;align-items:flex-start;gap:10px;
  font-size:.78rem;color:var(--gray600);line-height:1.5;cursor:pointer;
}
.form-consent .checkbox input{
  width:16px;height:16px;margin-top:2px;flex-shrink:0;
  accent-color:var(--green);
}
.form-consent .checkbox a{color:var(--navy);text-decoration:underline;}
.form-consent .checkbox a:hover{color:var(--green2);}
.form-consent .checkbox em{color:var(--green2);font-style:normal;font-weight:700;}

/* ═══════════════════════════════════════════
   PÁGINA DE COTIZACIÓN (cotizacion.html)
═══════════════════════════════════════════ */
.quote-page{padding:7rem 0 5rem;background:var(--gray50);min-height:80vh;}
.quote-page .container{max-width:780px;}
.quote-page .quote-header{text-align:center;margin-bottom:2.5rem;}
.quote-page h1{
  font-size:clamp(2rem,4vw,2.8rem);font-weight:800;color:var(--navy);
  line-height:1.15;margin-bottom:.8rem;
}
.quote-page .quote-intro{
  font-size:1rem;color:var(--gray600);line-height:1.7;
  max-width:560px;margin:0 auto;
}
.quote-perks{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  margin:2rem auto 3rem;max-width:680px;
}
.quote-perk{
  background:#fff;border:1px solid var(--gray200);border-radius:var(--radius);
  padding:1.1rem;text-align:center;
}
.quote-perk svg{
  width:28px;height:28px;color:var(--green);margin-bottom:.4rem;
  stroke-width:1.8;
}
.quote-perk-label{font-size:.78rem;font-weight:700;color:var(--navy);line-height:1.35;}
.quote-page .contact-form{
  background:#fff;
  box-shadow:0 4px 20px rgba(0,0,0,.05);
}
@media(max-width:560px){
  .quote-perks{grid-template-columns:1fr;}
}


/* ═══════════════════════════════════════════
   NAV DROPDOWN
═══════════════════════════════════════════ */
.nav-menu .has-dropdown{position:relative;display:flex;align-items:center;}
.nav-menu .dropdown-toggle{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.28rem;
}
.nav-menu .dropdown-toggle svg{
  width:8px;height:8px;
  flex-shrink:0;
  display:block;
  margin:0 !important;
  position:relative;
  top:0;
}
.nav-menu .dropdown-menu{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:220px;background:#fff;border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  padding:.5rem 0;list-style:none;
  opacity:0;visibility:hidden;transition:all .2s;
  z-index:1100;
}
.nav-menu .has-dropdown:hover .dropdown-menu,
.nav-menu .has-dropdown:focus-within .dropdown-menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.nav-menu .dropdown-menu li a{
  display:flex;align-items:center;padding:.6rem 1.1rem;
  font-size:.78rem;color:var(--gray800);
  border-bottom:none;letter-spacing:.04em;text-transform:none;
  line-height:1.3;
}
.nav-menu .dropdown-menu li a:hover{background:var(--gray50);color:var(--green2);}

/* ═══════════════════════════════════════════
   PLACEHOLDER IMG (productos sin foto)
═══════════════════════════════════════════ */
.placeholder-img{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
  background:repeating-linear-gradient(45deg,#f1f5f9 0 8px,#e2e8f0 8px 9px);
  color:var(--gray400);
}
.placeholder-img svg{width:48px;height:48px;stroke-width:1.4;}
.placeholder-img-tag{
  font-family:'SF Mono','Monaco','Menlo',monospace;
  font-size:.6rem;font-weight:700;color:var(--gray600);
  background:#fff;padding:2px 8px;border-radius:6px;border:1px solid var(--gray200);
}

/* ═══════════════════════════════════════════
   SECCIÓN TECNOLOGÍA — Plano técnico interactivo
═══════════════════════════════════════════ */
@property --cap-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #082a46;
}
@property --body-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #069eb9;
}
@property --sample-cap {
  syntax: "<color>";
  inherits: true;
  initial-value: #082a46;
}
@property --sample-body {
  syntax: "<color>";
  inherits: true;
  initial-value: #069eb9;
}

.tech-list{
  list-style:none;
  margin:0 0 .9rem;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.tech-list li{
  position:relative;
  padding-left:1.2rem;
  font-size:.78rem;
  color:var(--gray600);
  line-height:1.5;
}
.tech-list li::before{
  content:'';
  position:absolute;
  left:0;top:.42em;
  width:10px;height:10px;
  border-radius:50%;
  border:1.5px solid rgba(106,191,46,.42);
  background:radial-gradient(circle at center,var(--green) 0 2.2px,transparent 2.35px);
  box-sizing:border-box;
}

.tech-bp{
  --blueprint: #ffffff;
  --blueprint-deep: var(--navy);
  --paper-line: rgba(83, 157, 75, .045);
  --technical: var(--green);
  --technical-soft: #718078;
  --technical-faint: rgba(64, 112, 75, .17);
  --bp-ink: var(--navy);
  --bp-mono: 'SF Mono','Monaco','Menlo',monospace;
  --sample-cap: #082a46;
  --sample-body: #069eb9;
  --print-ink: #ffffff;
  position: relative;
  margin-top: 1.5rem;
  color: var(--bp-ink);
}
.tech-bp button,
.tech-bp input { font: inherit; }

.tech-bp .blueprint {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(66,139,61,.36);
  border-radius: 8px;
  background-color: var(--blueprint);
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px),
    linear-gradient(rgba(83,157,75,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83,157,75,.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, rgba(106,191,46,.055), transparent 43%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(250,252,250,.88));
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px, auto, auto;
  box-shadow:
    0 26px 64px rgba(21,55,39,.10),
    inset 0 0 0 7px rgba(72,122,82,.025),
    inset 0 0 80px rgba(54,95,65,.035);
}
.tech-bp .blueprint::before,
.tech-bp .blueprint::after {
  content: "";
  position: absolute;
  z-index: 20;
  width: 23px;
  height: 23px;
  pointer-events: none;
}
.tech-bp .blueprint::before {
  top: 13px;
  left: 13px;
  border-top: 1px solid var(--technical);
  border-left: 1px solid var(--technical);
}
.tech-bp .blueprint::after {
  right: 13px;
  bottom: 13px;
  border-right: 1px solid var(--technical);
  border-bottom: 1px solid var(--technical);
}

.tech-bp .drawing {
  --capsule-w: 183.34px;
  --capsule-h: 482.85px;
  --half-w: 91.67px;
  --half-h: 241.43px;
  --quarter-h: 120.71px;
  --size-anchor-right: 102.94px;
  --size-anchor-y: -108.14px;
  --color-anchor-x: 31.12px;
  --color-anchor-y: -118.69px;
  --brand-anchor-x: 95.63px;
  --brand-anchor-y: 74.81px;
  --print-size: 14.07px;
  position: relative;
  min-height: 820px;
  margin: 0 34px;
  border-bottom: 1px solid rgba(67,129,72,.24);
  isolation: isolate;
  transition: --sample-cap .42s cubic-bezier(.22,.8,.25,1), --sample-body .42s cubic-bezier(.22,.8,.25,1);
}
.tech-bp .drawing::before,
.tech-bp .drawing::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.tech-bp .drawing::before {
  top: 4%;
  bottom: 4%;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, rgba(106,191,46,.17) 12%, rgba(106,191,46,.17) 88%, transparent);
}
.tech-bp .drawing::after {
  top: 50%;
  right: 5%;
  left: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(106,191,46,.11) 15%, rgba(106,191,46,.11) 85%, transparent);
}

.tech-bp .central-field {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}
.tech-bp .orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(106,191,46,.14);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 52px rgba(106,191,46,.018), 0 0 0 104px rgba(106,191,46,.011);
}
.tech-bp .orbit::before,
.tech-bp .orbit::after {
  content: "";
  position: absolute;
  background: rgba(106,191,46,.22);
}
.tech-bp .orbit::before { top: 50%; left: -16px; right: -16px; height: 1px; }
.tech-bp .orbit::after { top: -16px; bottom: -16px; left: 50%; width: 1px; }

.tech-bp .capsule-wrap {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: var(--capsule-w);
  height: var(--capsule-h);
  transform: translate(-50%, -50%) rotate(-4.5deg);
  transform-origin: 50% 52%;
  transition: width .48s cubic-bezier(.2,.8,.2,1), height .48s cubic-bezier(.2,.8,.2,1);
}
.tech-bp .capsule-wrap.is-3d { transition: none; }
.tech-bp .drawing.is-size-tweening .capsule-wrap,
.tech-bp .drawing.is-size-tweening .dimension,
.tech-bp .drawing.is-size-tweening .leader,
.tech-bp .drawing.is-size-tweening .capsule-brand {
  transition: none !important;
}
.tech-bp .capsule-3d-canvas {
  position: absolute;
  z-index: 2;
  top: -4%;
  left: -4%;
  display: block;
  width: 108%;
  height: 108%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.tech-bp .capsule-wrap.is-3d .capsule-3d-canvas { opacity: 1; }

.tech-bp .capsule-shadow {
  position: absolute;
  z-index: 0;
  inset: 3% -3% -1% 5%;
  border-radius: 999px;
  background: rgba(17,31,27,.39);
  filter: blur(24px);
  transform: translate(16%, 6%) scale(.95);
  opacity: .56;
  transition: opacity .42s ease;
}
.tech-bp .capsule-shadow::after {
  content: "";
  position: absolute;
  right: -6%;
  bottom: -7%;
  width: 116%;
  height: 11%;
  border-radius: 50%;
  background: rgba(17,31,27,.33);
  filter: blur(9px);
}

.tech-bp .hero-capsule {
  position: absolute;
  z-index: 3;
  inset: 0;
  --cap-color: #082a46;
  --body-color: #069eb9;
  filter:
    drop-shadow(2px 4px 3px rgba(0,0,0,.19))
    drop-shadow(10px 15px 16px rgba(0,0,0,.17));
  transition: opacity .2s ease, --cap-color .42s cubic-bezier(.22,.8,.25,1), --body-color .42s cubic-bezier(.22,.8,.25,1);
}
.tech-bp .capsule-wrap.is-3d .hero-capsule { filter: none; }
.tech-bp .capsule-wrap.is-3d .capsule-half,
.tech-bp .capsule-wrap.is-3d .capsule-seam,
.tech-bp .capsule-wrap.is-3d .capsule-gloss,
.tech-bp .capsule-wrap.is-3d .capsule-gloss-hard { opacity: 0; }
.tech-bp .capsule-half,
.tech-bp .capsule-seam,
.tech-bp .capsule-gloss,
.tech-bp .capsule-gloss-hard { transition: opacity .42s cubic-bezier(.22,.8,.25,1); }

.tech-bp .capsule-half {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor, black 40%);
}
.tech-bp .capsule-half::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 19% 73% at 18% 42%, rgba(255,255,255,.53), transparent 73%),
    radial-gradient(ellipse 25% 75% at 97% 51%, rgba(0,0,0,.30), transparent 78%),
    linear-gradient(90deg, rgba(0,0,0,.18), transparent 14% 75%, rgba(0,0,0,.24));
  mix-blend-mode: soft-light;
}
.tech-bp .capsule-half::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 12%;
  right: 12%;
  width: 7%;
  height: 68%;
  border-radius: 50%;
  background: linear-gradient(transparent, rgba(210,245,255,.58) 17%, rgba(255,255,255,.24) 69%, transparent);
  filter: blur(2.4px);
  mix-blend-mode: screen;
  opacity: .34;
  pointer-events: none;
}
.tech-bp .capsule-top {
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(51.35% + 2px);
  color: var(--cap-color);
  border-radius: 999px 999px 8px 8px / 999px 999px 5px 5px;
  background:
    radial-gradient(ellipse 70% 18% at 38% 2%, rgba(255,255,255,.59), transparent 70%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--cap-color), black 60%),
      color-mix(in srgb, var(--cap-color), black 19%) 14%,
      color-mix(in srgb, var(--cap-color), white 21%) 32%,
      var(--cap-color) 58%,
      color-mix(in srgb, var(--cap-color), black 31%) 83%,
      color-mix(in srgb, var(--cap-color), black 64%));
  box-shadow:
    inset 7px 0 11px rgba(0,0,0,.18),
    inset -10px 0 15px rgba(0,0,0,.26),
    inset 0 4px 5px rgba(255,255,255,.20),
    inset 0 -4px 5px rgba(0,0,0,.20);
}
.tech-bp .capsule-bottom {
  z-index: 1;
  top: 50.1%;
  left: .6%;
  width: 98.8%;
  height: 49.9%;
  color: var(--body-color);
  border-radius: 7px 7px 999px 999px / 5px 5px 999px 999px;
  background:
    radial-gradient(ellipse 84% 42% at 45% 103%, rgba(0,0,0,.30), transparent 70%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--body-color), black 31%),
      color-mix(in srgb, var(--body-color), black 7%) 14%,
      color-mix(in srgb, var(--body-color), white 23%) 32%,
      var(--body-color) 59%,
      color-mix(in srgb, var(--body-color), black 17%) 82%,
      color-mix(in srgb, var(--body-color), black 48%));
  box-shadow:
    inset 7px 0 11px rgba(0,0,0,.17),
    inset -10px 0 15px rgba(0,0,0,.26),
    inset 0 -7px 9px rgba(0,0,0,.24),
    inset 0 3px 3px rgba(255,255,255,.19);
}
.tech-bp .capsule-seam {
  position: absolute;
  z-index: 8;
  top: calc(50.25% + 2px);
  left: 0;
  width: 100%;
  height: max(5px, 1.55%);
  border-top: 1px solid rgba(255,255,255,.40);
  border-radius: 50%;
  background: linear-gradient(
    color-mix(in srgb, var(--cap-color), white 20%),
    color-mix(in srgb, var(--cap-color), black 36%) 63%,
    color-mix(in srgb, var(--cap-color), black 60%));
  box-shadow: 0 3px 4px rgba(0,0,0,.20);
}
.tech-bp .capsule-wrap:not(.is-3d) .hero-capsule.cap-clear .capsule-top,
.tech-bp .capsule-wrap:not(.is-3d) .hero-capsule.body-clear .capsule-bottom {
  opacity: .58;
  border-color: rgba(59,101,99,.48);
  backdrop-filter: blur(.7px) saturate(.82);
}
.tech-bp .hero-capsule.cap-clear .capsule-top {
  background:
    radial-gradient(ellipse 68% 20% at 36% 2%, rgba(255,255,255,.88), transparent 70%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--cap-color), black 42%),
      color-mix(in srgb, var(--cap-color), white 68%) 31%,
      color-mix(in srgb, var(--cap-color), white 28%) 62%,
      color-mix(in srgb, var(--cap-color), black 46%));
}
.tech-bp .hero-capsule.body-clear .capsule-bottom {
  background:
    radial-gradient(ellipse 78% 40% at 45% 103%, rgba(50,89,87,.26), transparent 72%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--body-color), black 36%),
      color-mix(in srgb, var(--body-color), white 70%) 31%,
      color-mix(in srgb, var(--body-color), white 30%) 62%,
      color-mix(in srgb, var(--body-color), black 43%));
}
.tech-bp .capsule-wrap.has-clear-cap .capsule-shadow,
.tech-bp .capsule-wrap.has-clear-body .capsule-shadow { opacity: .49; }
.tech-bp .capsule-wrap.has-clear-cap.has-clear-body .capsule-shadow { opacity: .42; }

.tech-bp .capsule-gloss,
.tech-bp .capsule-gloss-hard {
  position: absolute;
  z-index: 7;
  pointer-events: none;
  mix-blend-mode: screen;
}
.tech-bp .capsule-gloss {
  top: 7%;
  left: 17%;
  width: 16%;
  height: 74%;
  border-radius: 50%;
  background: linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.38) 32%, rgba(255,255,255,.10) 72%, transparent);
  filter: blur(5px);
  opacity: .74;
}
.tech-bp .capsule-gloss-hard {
  top: 13%;
  left: 25%;
  width: 3.8%;
  height: 59%;
  border-radius: 50%;
  background: linear-gradient(transparent, rgba(255,255,255,.92) 14%, rgba(255,255,255,.61) 65%, transparent);
  filter: blur(1px);
  opacity: .67;
}

.tech-bp .capsule-brand {
  position: absolute;
  z-index: 9;
  top: 67%;
  left: 50%;
  display: flex;
  width: 88%;
  align-items: center;
  justify-content: center;
  color: var(--print-ink);
  font-size: var(--print-size);
  font-weight: 800;
  letter-spacing: .07em;
  line-height: 1;
  text-shadow: 0 1px 2px var(--print-shadow, rgba(0,0,0,.48));
  transform: translateX(-50%) perspective(160px) rotateX(-4deg) rotate(-.7deg);
  transform-origin: center;
  white-space: nowrap;
  transition: font-size .42s ease, opacity .14s ease, transform .08s linear;
}
.tech-bp .capsule-brand span {
  display: inline-block;
  min-width: .18em;
  transform-origin: center bottom;
}
.tech-bp .capsule-brand.is-empty { opacity: 0; }

.tech-bp .dimension {
  position: absolute;
  z-index: 3;
  color: #3f8737;
  font-family: var(--bp-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  transition: inset .45s ease, width .45s ease, height .45s ease, top .45s ease, left .45s ease;
}
.tech-bp .dimension-v {
  top: calc(50% - var(--half-h));
  left: calc(50% - var(--half-w) - 46px);
  width: 1px;
  height: var(--capsule-h);
  border-left: 1px solid rgba(74,145,68,.47);
}
.tech-bp .dimension-v::before,
.tech-bp .dimension-v::after {
  content: "";
  position: absolute;
  left: -5px;
  width: 10px;
  height: 1px;
  background: var(--technical);
}
.tech-bp .dimension-v::before { top: 0; }
.tech-bp .dimension-v::after { bottom: 0; }
.tech-bp .dimension-v span {
  position: absolute;
  top: 50%;
  right: auto;
  left: -12px;
  width: max-content;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  text-shadow: -2px 0 #fff, 2px 0 #fff, 0 -2px #fff, 0 2px #fff;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.tech-bp .dimension-h {
  top: calc(50% + var(--half-h) + 27px);
  left: calc(50% - var(--half-w));
  width: var(--capsule-w);
  height: 1px;
  border-top: 1px solid rgba(74,145,68,.47);
}
.tech-bp .dimension-h::before,
.tech-bp .dimension-h::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 1px;
  height: 10px;
  background: var(--technical);
}
.tech-bp .dimension-h::before { left: 0; }
.tech-bp .dimension-h::after { right: 0; }
.tech-bp .dimension-h span {
  position: absolute;
  top: 10px;
  left: 50%;
  width: max-content;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  white-space: nowrap;
  text-shadow: -2px 0 #fff, 2px 0 #fff, 0 -2px #fff, 0 2px #fff;
  transform: translateX(-50%);
}

.tech-bp .technical-card {
  position: absolute;
  z-index: 7;
  width: 31%;
  padding: 20px 21px;
  border: 1px solid rgba(65,126,73,.23);
  border-radius: 20px;
  color: var(--bp-ink);
  background: linear-gradient(145deg, #ffffff, rgba(251,253,251,.97));
  box-shadow:
    0 12px 28px -14px rgba(27,67,44,.16),
    0 4px 12px -10px rgba(27,67,44,.08),
    inset 0 1px 0 #fff;
  transition:
    box-shadow .38s cubic-bezier(.22,1,.36,1),
    border-color .28s ease;
}
.tech-bp .technical-card:focus-within {
  border-color: rgba(72,145,66,.44);
  box-shadow:
    0 24px 48px -16px rgba(27,67,44,.30),
    0 9px 20px -10px rgba(27,67,44,.20),
    inset 0 1px 0 #fff;
}
@media (hover: hover) {
  .tech-bp .technical-card:hover {
    border-color: rgba(72,145,66,.44);
    box-shadow:
      0 24px 48px -16px rgba(27,67,44,.30),
      0 9px 20px -10px rgba(27,67,44,.20),
      inset 0 1px 0 #fff;
  }
}
.tech-bp .card-size { top: 45.5%; left: 1.5%; transform: translateY(-50%); }
.tech-bp .card-color { top: 8.5%; right: 1.5%; }
.tech-bp .card-print { right: 1.5%; bottom: 7%; }

.tech-bp .card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 13px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(72,132,77,.15);
}
.tech-bp .card-heading h3 {
  margin: 0;
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.tech-bp .card-number {
  color: rgba(106,191,46,.20);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .9;
  transition: color .28s ease, text-shadow .34s ease;
}
.tech-bp .technical-card:focus-within .card-number {
  color: var(--technical);
  text-shadow: 0 0 16px rgba(106,191,46,.24);
}
@media (hover: hover) {
  .tech-bp .technical-card:hover .card-number {
    color: var(--technical);
    text-shadow: 0 0 16px rgba(106,191,46,.24);
  }
}

.tech-bp .size-controls {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  height: 72px;
  align-items: end;
  gap: 0;
  margin-top: 15px;
}
.tech-bp .size-button,
.tech-bp .part-button,
.tech-bp .setting-button {
  border: 1px solid rgba(68,124,75,.22);
  color: #66766d;
  background: rgba(240,246,241,.72);
  font-family: var(--bp-mono);
  font-weight: 700;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.tech-bp .size-button {
  display: grid;
  min-width: 0;
  height: 72px;
  grid-template-rows: 1fr auto;
  align-items: end;
  justify-items: center;
  gap: 5px;
  padding: 0 3px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  font-size: 8px;
}
.tech-bp .size-sample {
  position: relative;
  display: block;
  width: var(--sample-w);
  height: var(--sample-h);
  overflow: hidden;
  border: 1px solid rgba(10,43,64,.20);
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--sample-body), black 20%),
    color-mix(in srgb, var(--sample-body), white 24%) 35%,
    var(--sample-body) 64%,
    color-mix(in srgb, var(--sample-body), black 34%));
  box-shadow: 1px 3px 4px rgba(10,43,64,.13);
  transition: transform .2s ease, filter .2s ease;
}
.tech-bp .size-sample::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 0 49%;
  border-radius: 999px 999px 2px 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--sample-cap), black 39%),
    color-mix(in srgb, var(--sample-cap), white 20%) 35%,
    var(--sample-cap) 63%,
    color-mix(in srgb, var(--sample-cap), black 47%));
}
.tech-bp .size-sample::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 49%;
  left: 0;
  width: 100%;
  height: 2px;
  background: color-mix(in srgb, var(--sample-cap), black 37%);
}
.tech-bp .size-button small {
  color: #66766d;
  font-family: var(--bp-mono);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.tech-bp .size-button:hover,
.tech-bp .part-button:hover,
.tech-bp .setting-button:hover { border-color: var(--technical); color: var(--bp-ink); }
.tech-bp .size-button:hover,
.tech-bp .size-button:focus-visible { background: rgba(106,191,46,.07); }
.tech-bp .size-button:hover .size-sample,
.tech-bp .size-button.is-selected .size-sample {
  transform: translateY(-3px);
  filter: drop-shadow(0 4px 4px rgba(106,191,46,.22));
}
.tech-bp .size-button.is-selected,
.tech-bp .part-button.is-active,
.tech-bp .setting-button.is-active {
  border-color: var(--technical);
  color: #ffffff;
  background: var(--technical);
  box-shadow: 0 4px 11px rgba(106,191,46,.18);
}
.tech-bp .size-button.is-selected {
  color: var(--technical);
  background: transparent;
  box-shadow: none;
}
.tech-bp .size-button.is-selected small { color: var(--technical); }
.tech-bp .size-button:focus-visible,
.tech-bp .part-button:focus-visible,
.tech-bp .swatch:focus-visible,
.tech-bp .setting-button:focus-visible,
.tech-bp .brand-input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
.tech-bp .size-button:focus-visible { position: relative; z-index: 1; }

.tech-bp .selected-dimension {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  color: var(--technical-soft);
  font-family: var(--bp-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tech-bp .part-selector {
  display: inline-flex;
  gap: 3px;
  margin-top: 12px;
  padding: 3px;
  border: 1px solid rgba(68,124,75,.18);
  border-radius: 999px;
  background: #f0f6f1;
}
.tech-bp .part-button,
.tech-bp .setting-button {
  min-height: 32px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tech-bp .palette {
  display: grid;
  width: max-content;
  grid-template-columns: repeat(7, 23px);
  gap: 8px;
  margin-top: 12px;
}
.tech-bp .swatch {
  display: block;
  width: 23px;
  height: 23px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.42), 0 0 0 0 transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.tech-bp .swatch:hover { transform: scale(1.12); }
.tech-bp .swatch[data-name="blanco"] { border-color: rgba(84,97,91,.58); }
.tech-bp .swatch.clear {
  border-color: rgba(76,104,101,.62);
  background:
    radial-gradient(circle at 31% 27%, rgba(255,255,255,.96) 0 10%, transparent 12%),
    linear-gradient(135deg, rgba(255,255,255,.88) 0 42%, rgba(100,163,158,.34) 43% 57%, rgba(215,240,237,.72) 58%),
    repeating-conic-gradient(rgba(118,160,156,.18) 0 25%, rgba(255,255,255,.72) 0 50%) 50% / 8px 8px;
}
.tech-bp .swatch.is-selected {
  box-shadow: inset 0 1px 1px rgba(255,255,255,.42), 0 0 0 2px var(--blueprint), 0 0 0 4px var(--technical);
}
.tech-bp .swatch.bi {
  background: linear-gradient(135deg, #082a46 0 47%, var(--technical) 48% 52%, #069eb9 53%);
}
.tech-bp .palette-more {
  display: grid;
  width: 23px;
  height: 23px;
  border: 1px solid rgba(106,191,46,.22);
  border-radius: 50%;
  color: var(--technical);
  font-size: 7px;
  font-weight: 800;
  place-items: center;
}

.tech-bp .brand-control { margin-top: 12px; }
.tech-bp .brand-control label {
  display: block;
  margin-bottom: 5px;
  color: var(--technical-soft);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.tech-bp .brand-input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(68,124,75,.24);
  border-radius: 10px;
  color: var(--bp-ink);
  background: #f8fbf9;
  font-family: var(--bp-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.tech-bp .print-settings {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 10px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--technical-faint);
}
.tech-bp .setting-block > span {
  display: block;
  margin-bottom: 6px;
  color: var(--technical-soft);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.tech-bp .setting-options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tech-bp .setting-button {
  padding: 5px 7px;
  font-size: 8.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tech-bp .leader {
  position: absolute;
  z-index: 5;
  height: 1px;
  background: linear-gradient(90deg, rgba(106,191,46,.16), var(--technical));
  pointer-events: none;
  transition: left .45s ease, right .45s ease, top .45s ease;
}
.tech-bp .leader::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--technical);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(106,191,46,.08);
}
.tech-bp .leader::before {
  content: "";
  position: absolute;
  top: -3px;
  width: 0;
  height: 0;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}
.tech-bp .leader-size {
  top: calc(50% + var(--size-anchor-y));
  right: calc(50% + var(--size-anchor-right));
  left: 32.5%;
}
.tech-bp .leader-size::after { right: -4px; }
.tech-bp .leader-size::before { right: 5px; border-left: 5px solid var(--technical); }
.tech-bp .leader-color,
.tech-bp .leader-print {
  right: 31.5%;
  background: linear-gradient(90deg, var(--technical), rgba(106,191,46,.16));
}
.tech-bp .leader-color {
  top: calc(50% + var(--color-anchor-y));
  left: calc(50% + var(--color-anchor-x));
}
.tech-bp .leader-print {
  top: calc(50% + var(--brand-anchor-y));
  left: calc(50% + var(--brand-anchor-x));
}
.tech-bp .leader-color::after,
.tech-bp .leader-print::after { left: -4px; }
.tech-bp .leader-color::before,
.tech-bp .leader-print::before { left: 5px; border-right: 5px solid var(--technical); }

.tech-bp .datum {
  position: absolute;
  z-index: 3;
  bottom: 8.5%;
  left: 2%;
  width: 29%;
  padding-left: 17px;
  color: #819087;
  font-family: var(--bp-mono);
  font-size: 8px;
  line-height: 1.7;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tech-bp .datum::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 1px;
  background: var(--technical);
}
.tech-bp .datum strong { color: var(--technical); font-weight: 800; }

.tech-bp .spec-strip {
  display: grid;
  grid-template-columns: 1.25fr repeat(5, minmax(110px, .75fr));
  margin: 0;
  padding: 0 34px;
  border: 0;
  border-top: 4px solid var(--technical);
  background: linear-gradient(90deg, var(--navy), var(--navy2));
}
.tech-bp .spec-cell {
  min-height: 76px;
  padding: 15px 14px;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.14);
}
.tech-bp .spec-cell span {
  display: block;
  margin-bottom: 4px;
  color: #9fdb82;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.tech-bp .spec-cell strong {
  color: #ffffff;
  font-family: var(--bp-mono);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .02em;
}
.tech-bp .title-cell strong {
  display: block;
  color: #d9f5cb;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tech-bp .title-cell em {
  display: block;
  margin-top: 4px;
  color: rgba(235,248,241,.68);
  font-size: 8px;
  font-style: normal;
  line-height: 1.4;
}

@media (max-width: 1050px) {
  .tech-bp .drawing {
    display: grid;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    padding: 22px 0 28px;
  }
  .tech-bp .drawing::before,
  .tech-bp .drawing::after,
  .tech-bp .leader,
  .tech-bp .datum { display: none; }
  .tech-bp .central-field {
    position: relative;
    inset: auto;
    height: 620px;
    grid-column: 1 / -1;
  }
  .tech-bp .technical-card {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    transform: none;
  }
  .tech-bp .card-size { grid-column: 1 / -1; }
  .tech-bp .spec-strip { grid-template-columns: repeat(3, 1fr); }
  .tech-bp .title-cell { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .tech-bp .blueprint { border-radius: 3px; }
  .tech-bp .drawing { margin-right: 15px; margin-left: 15px; grid-template-columns: 1fr; }
  .tech-bp .central-field { height: 640px; }
  .tech-bp .technical-card,
  .tech-bp .card-size { grid-column: 1; }
  .tech-bp .orbit { width: 330px; height: 330px; }
  .tech-bp .dimension-v { left: max(20px, calc(50% - var(--half-w) - 36px)); }
  .tech-bp .size-controls { gap: 0; }
  .tech-bp .size-button { font-size: 9px; }
  .tech-bp .spec-strip {
    grid-template-columns: repeat(2, 1fr);
    margin: 0;
    padding-right: 15px;
    padding-left: 15px;
  }
  .tech-bp .title-cell { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .tech-bp .capsule-wrap,
  .tech-bp .capsule-3d-canvas,
  .tech-bp .capsule-shadow,
  .tech-bp .drawing,
  .tech-bp .hero-capsule,
  .tech-bp .dimension,
  .tech-bp .leader,
  .tech-bp .capsule-brand,
  .tech-bp .capsule-half,
  .tech-bp .capsule-seam,
  .tech-bp .capsule-gloss,
  .tech-bp .capsule-gloss-hard,
  .tech-bp .size-button,
  .tech-bp .size-sample,
  .tech-bp .part-button,
  .tech-bp .setting-button,
  .tech-bp .swatch,
  .tech-bp .technical-card,
  .tech-bp .card-number { transition: none; }
}

/* sabores */
.tech-flavors{display:flex;flex-wrap:wrap;gap:6px;}
.tech-flavors span{
  font-size:.7rem;font-weight:600;color:var(--navy);
  background:var(--gray50);border:1px solid var(--gray200);
  padding:5px 11px;border-radius:100px;
}
.tech-flavors .more{background:#e8f5e0;color:var(--green2);border-color:var(--green);}

/* impresión */
.tech-print svg{width:100%;height:60px;}
.tech-print-hint{
  font-size:.7rem;color:var(--gray400);text-align:center;
  margin-top:.4rem;font-style:italic;
}

.tech-cta{
  margin-top:3rem;text-align:center;
  background:var(--gray50);border-radius:var(--radius-lg);
  padding:2rem 2.4rem;
  display:flex;align-items:center;justify-content:center;gap:1.4rem;
  flex-wrap:wrap;
}
.tech-cta p{font-size:.95rem;color:var(--gray800);}
.tech-cta strong{color:var(--navy);}

/* ═══════════════════════════════════════════
   NOSOTROS — Tabs
═══════════════════════════════════════════ */
#nosotros{
  position:relative;
  overflow:clip;
  scroll-margin-top:calc(var(--header-h) + 1rem);
  padding:clamp(3.75rem,6vw,4.75rem) 0;
  background:
    radial-gradient(circle at 88% 9%,rgba(106,191,46,.065),transparent 24rem),
    linear-gradient(180deg,#fff 0%,#fbfdf9 100%);
}
#nosotros > .container{position:relative;z-index:1;}
#nosotros::before{
  content:'NOSOTROS';
  position:absolute;top:2.2rem;left:50%;
  transform:translateX(-50%);
  color:rgba(10,37,64,.025);
  font-size:clamp(5.5rem,16vw,13rem);font-weight:800;line-height:.8;
  letter-spacing:-.075em;white-space:nowrap;pointer-events:none;
}
#nosotros::after{
  content:'';position:absolute;z-index:0;
  width:clamp(20rem,42vw,36rem);aspect-ratio:1;
  top:18%;right:-9%;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 35% 38%,rgba(106,191,46,.11),transparent 48%),
    radial-gradient(circle at 65% 60%,rgba(13,50,96,.055),transparent 55%);
  filter:blur(22px);opacity:.52;
  animation:aboutAuraDrift 18s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes aboutAuraDrift{
  from{transform:translate3d(-1.5rem,-1rem,0) scale(.96);}
  to{transform:translate3d(1.5rem,2.25rem,0) scale(1.06);}
}
.about-intro{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:clamp(2rem,6vw,5.5rem);align-items:end;
  padding-bottom:clamp(2.75rem,5vw,4rem);
  border-bottom:1px solid rgba(10,37,64,.14);
}
.about-intro .section-tag{grid-column:1/-1;justify-self:center;margin-bottom:-.55rem;}
.about-intro .section-title{
  margin:0;font-size:clamp(2.25rem,4.55vw,4.1rem);
  letter-spacing:-.055em;line-height:1.02;
}
.about-intro .section-title span{color:var(--green-text);font-weight:500;}
.about-intro-lead{
  max-width:29rem;margin:0 0 .25rem;
  color:var(--gray600);font-size:clamp(.9rem,1.15vw,1rem);line-height:1.75;
}
.about-editorial{
  display:grid;grid-template-columns:190px minmax(0,1fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:start;
}
.about-index{
  position:sticky;top:calc(var(--header-h) + 2rem);
  display:flex;flex-direction:column;padding-top:3.4rem;
}
.about-index-label{
  padding-bottom:1rem;margin-bottom:.2rem;
  color:var(--gray400);font-size:.66rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
}
.about-index-link{
  position:relative;display:flex;align-items:baseline;gap:.72rem;
  padding:.72rem 0;color:var(--gray500);
  font-size:.78rem;font-weight:600;line-height:1.25;
  transition:color .3s var(--cc-ease),transform .3s var(--cc-ease);
}
.about-index-link::before{
  content:'';position:absolute;left:0;bottom:.35rem;
  width:2.4rem;height:1px;background:var(--green);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--cc-ease);
}
.about-index-link span{
  color:var(--gray400);font-size:.64rem;font-weight:700;letter-spacing:.08em;
  transition:color .3s var(--cc-ease);
}
.about-index-link:hover,
.about-index-link:focus-visible,
.about-index-link.is-current{color:var(--navy);transform:translateX(4px);}
.about-index-link:hover span,
.about-index-link:focus-visible span,
.about-index-link.is-current span{color:var(--green-text);}
.about-index-link.is-current::before{transform:scaleX(1);}
.about-index-link:focus-visible{outline:2px solid var(--green);outline-offset:5px;border-radius:2px;}
.about-flow{min-width:0;}
.about-chapter{
  position:relative;padding:clamp(3.35rem,5.8vw,4.9rem) 0;
  scroll-margin-top:calc(var(--header-h) + 1.5rem);
}
.about-chapter + .about-chapter{border-top:1px solid rgba(10,37,64,.14);}
.about-chapter::after{
  content:'';position:absolute;left:0;bottom:-1px;width:0;height:2px;
  background:var(--green);transition:width .65s var(--cc-ease);
}
.about-chapter:hover::after{width:5rem;}
.about-chapter-head{display:flex;gap:1.15rem;align-items:flex-start;margin-bottom:1.65rem;}
.about-chapter-num{
  color:rgba(78,158,26,.22);font-size:clamp(2.4rem,4.25vw,3.75rem);
  font-weight:300;letter-spacing:-.06em;line-height:.8;
}
.about-chapter-kicker{
  display:block;margin-bottom:.45rem;color:var(--green-text);
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.about-chapter h3{
  color:var(--navy);font-size:clamp(1.65rem,2.75vw,2.35rem);
  font-weight:750;letter-spacing:-.04em;line-height:1.05;
}
.about-statement{
  max-width:43rem;margin-bottom:1rem;color:var(--navy);
  font-size:clamp(1.2rem,2vw,1.7rem);font-weight:500;
  letter-spacing:-.025em;line-height:1.42;
}
.about-statement--compact{max-width:36rem;margin-bottom:1.65rem;}
.about-copy{max-width:43rem;color:var(--gray600);font-size:.89rem;line-height:1.75;}
.about-timeline{list-style:none;margin-top:2rem;border-top:1px solid var(--gray200);}
.about-timeline li{
  display:grid;grid-template-columns:8rem 1fr;gap:1.5rem;
  padding:1.05rem 0;border-bottom:1px solid var(--gray200);
  transform:translateX(0);
  transition:transform .3s var(--cc-ease),border-color .3s ease,background-color .3s ease;
}
.about-timeline li:hover{transform:translateX(4px);border-color:rgba(106,191,46,.5);background:rgba(106,191,46,.025);}
.about-time{color:var(--green-text);font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;}
.about-timeline p{max-width:38rem;color:var(--gray600);font-size:.85rem;line-height:1.65;}
.about-purpose{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);}
.about-purpose-item{position:relative;padding-top:1rem;border-top:2px solid var(--navy);}
.about-purpose-item::before{
  content:'';position:absolute;top:-2px;left:0;width:3rem;height:2px;background:var(--green);
  transition:width .45s var(--cc-ease);
}
.about-purpose-item:hover::before{width:6rem;}
.about-purpose-label{
  display:block;margin-bottom:.8rem;color:var(--navy);
  font-size:1.08rem;font-weight:750;letter-spacing:-.02em;
}
.about-purpose-item p{color:var(--gray600);font-size:.86rem;line-height:1.72;}
.about-values{border-top:1px solid var(--navy);}
.about-value{
  display:grid;grid-template-columns:2.6rem minmax(9rem,.7fr) minmax(0,1.3fr);
  gap:.85rem;align-items:center;padding:1.05rem 0;
  border-bottom:1px solid var(--gray200);
  transform:translateX(0);
  transition:transform .3s var(--cc-ease),background-color .25s ease,border-color .25s ease;
}
.about-value:hover{transform:translateX(4px);background:linear-gradient(90deg,rgba(106,191,46,.045),transparent 70%);border-color:rgba(106,191,46,.35);}
.about-value-icon{display:grid;width:1.8rem;height:1.8rem;color:var(--green-text);place-items:center;}
.about-value-icon svg{width:1.35rem;height:1.35rem;}
.about-value h4{color:var(--navy);font-size:clamp(1rem,1.45vw,1.18rem);font-weight:700;letter-spacing:-.025em;}
.about-value p{max-width:30rem;color:var(--gray600);font-size:.8rem;line-height:1.6;}

@media(max-width:900px){
  .about-editorial{grid-template-columns:1fr;gap:0;}
  .about-index{
    position:sticky;top:var(--header-h);z-index:4;
    flex-direction:row;overflow-x:auto;padding:.6rem 0;
    background:rgba(255,255,255,.94);border-bottom:1px solid var(--gray200);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    scrollbar-width:none;
  }
  .about-index::-webkit-scrollbar{display:none;}
  .about-index-label{display:none;}
  .about-index-link{flex:0 0 auto;padding:.65rem 1.1rem .65rem 0;margin-right:1rem;white-space:nowrap;}
  .about-index-link::before{bottom:.4rem;}
  .about-index-link:hover,.about-index-link:focus-visible,.about-index-link.is-current{transform:none;}
}
@media(max-width:700px){
  #nosotros::before{top:4.5rem;}
  #nosotros{padding:3rem 0;}
  .about-intro{grid-template-columns:1fr;gap:1.15rem;padding-bottom:2.6rem;}
  .about-intro .section-tag{grid-column:auto;margin-bottom:.1rem;}
  .about-intro .section-title br{display:none;}
  .about-chapter{padding:3rem 0;}
  .about-chapter-head{gap:.85rem;margin-bottom:1.4rem;}
  .about-chapter-num{font-size:2.25rem;}
  .about-purpose{grid-template-columns:1fr;gap:2rem;}
  .about-timeline li{grid-template-columns:1fr;gap:.45rem;}
  .about-value{grid-template-columns:2.2rem 1fr;gap:.4rem 1rem;align-items:center;}
  .about-value p{grid-column:2;}
}
@media (prefers-reduced-motion:reduce){
  #nosotros::after{animation:none!important;transform:none!important;}
  .about-index-link,.about-index-link::before,.about-chapter::after,
  .about-timeline li,.about-purpose-item::before,.about-value{transition:none!important;}
  .about-timeline li:hover,.about-value:hover{transform:none!important;}
}

/* ═══════════════════════════════════════════
   NEWSLETTER (footer)
═══════════════════════════════════════════ */
/* Newsletter retirado del footer (Executive Clean — layout de 3 columnas) */


/* ═══════════════════════════════════════════
   PÁGINAS DE INFORMACIÓN (FAQs, Cumplimiento)
═══════════════════════════════════════════ */
.info-page{padding:7rem 0 5rem;background:var(--gray50);min-height:80vh;}
.info-narrow{max-width:780px;}
.info-hero{text-align:center;margin-bottom:3rem;}
.info-hero h1{
  font-size:clamp(2rem,4vw,2.8rem);font-weight:800;color:var(--navy);
  line-height:1.15;margin-top:.4rem;
}
.info-hero .divider-green{margin-left:auto;margin-right:auto;}
.info-intro{
  font-size:1rem;color:var(--gray600);line-height:1.7;
  max-width:560px;margin:1rem auto 0;
}

/* FAQ accordion */
.faq-list{display:flex;flex-direction:column;gap:10px;margin-bottom:3rem;}
.faq-item{
  background:#fff;border:1px solid var(--gray200);border-radius:var(--radius);
  overflow:hidden;transition:border-color .28s ease,box-shadow .28s ease;
}
.faq-item[open]{border-color:var(--green);box-shadow:var(--ring-green);}
.faq-item summary{
  display:flex;align-items:center;gap:1rem;
  padding:1.1rem 1.4rem;cursor:pointer;list-style:none;
  user-select:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-q{
  flex:1;font-size:.95rem;font-weight:700;color:var(--navy);
  line-height:1.4;
}
.faq-icon{
  width:18px;height:18px;color:var(--gray400);flex-shrink:0;
  transition:transform .32s cubic-bezier(.22,.85,.3,1),color .25s ease;
}
.faq-item[open] .faq-icon{transform:rotate(180deg);color:var(--green);}
.faq-a{
  overflow:hidden;
  padding:0 1.4rem 1.2rem;
}
.faq-a p{
  font-size:.88rem;color:var(--gray600);line-height:1.7;
  border-top:1px solid var(--gray100);padding-top:.9rem;margin:0;
}
@media (prefers-reduced-motion:reduce){
  .faq-icon{transition:none;}
}

/* Normativas grid */
.norm-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.2rem;margin-bottom:3rem;
}
.norm-card{
  background:#fff;border:1px solid var(--gray200);border-radius:var(--radius-lg);
  padding:1.6rem 1.4rem;display:flex;gap:1rem;align-items:flex-start;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.norm-card:hover{border-color:var(--green);box-shadow:var(--ring-green);}
.norm-badge{
  width:48px;height:48px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:800;letter-spacing:.05em;
  color:#fff;
}
.norm-badge-mx{background:linear-gradient(135deg,#006847,#ce1126);}
.norm-badge-us{background:linear-gradient(135deg,#3c3b6e,#b22234);}
.norm-badge-eu{background:linear-gradient(135deg,#003399,#ffcc00);color:#003399;}
.norm-badge-iso{background:var(--navy);}
.norm-body{flex:1;min-width:0;}
.norm-code{
  font-family:'SF Mono','Monaco','Menlo',monospace;
  font-size:.7rem;font-weight:700;color:var(--green2);
  letter-spacing:.05em;margin-bottom:.3rem;
}
.norm-body h3{font-size:.95rem;font-weight:700;color:var(--navy);margin-bottom:.4rem;line-height:1.35;}
.norm-body p{font-size:.82rem;color:var(--gray600);line-height:1.6;}

/* Info section (Cumplimiento) */
/* Lista con check (restaurada: se perdió en un refactor del CSS) */
.value-list{list-style:none;display:flex;flex-direction:column;gap:.8rem;}
.value-list li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:.86rem;color:var(--gray800);line-height:1.55;
}
.value-list svg{
  width:18px;height:18px;color:var(--green2);
  flex-shrink:0;margin-top:2px;
}

.info-section{margin-bottom:3rem;}
.info-section h2{
  font-size:1.4rem;font-weight:800;color:var(--navy);margin-bottom:.8rem;
}
.info-section>p{
  font-size:.92rem;color:var(--gray600);line-height:1.7;
}

/* ══ PÁGINAS LEGALES — Aviso de Privacidad y Términos y Condiciones ══ */
/* Contenedor de lectura cómoda — máx. 800px, tipografía generosa */
.ap-article{max-width:800px;margin:0 auto;}

/* Metadato: fecha de última actualización (chip discreto) */
.ap-meta{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.74rem;font-weight:600;letter-spacing:.04em;
  color:var(--gray600);background:var(--gray100);
  padding:.4rem .85rem;border-radius:100px;margin-top:1rem;
}
.ap-meta svg{width:14px;height:14px;color:var(--green2);}

/* ── Resumen ejecutivo (tarjeta destacada / alert box) ── */
.ap-summary{
  background:#fff;border:1px solid var(--gray200);
  border-left:4px solid var(--green);
  border-radius:var(--radius-lg);
  padding:1.8rem 1.9rem;margin:0 0 3rem;
  box-shadow:var(--shadow-md);
}
.ap-summary-head{
  display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem;
}
.ap-summary-head svg{width:24px;height:24px;color:var(--green2);flex-shrink:0;}
.ap-summary-head h2{
  font-size:1.15rem;font-weight:800;color:var(--navy);margin:0;
}
.ap-summary>p{
  font-size:.92rem;color:var(--gray600);line-height:1.65;margin-bottom:1.1rem;
}
.ap-summary ul{
  list-style:none;display:grid;gap:.85rem;
}
.ap-summary li{
  display:flex;align-items:flex-start;gap:.7rem;
  font-size:.95rem;color:var(--gray800);line-height:1.55;
}
.ap-summary li svg{
  width:19px;height:19px;color:var(--green2);flex-shrink:0;margin-top:2px;
}
.ap-summary li strong{color:var(--navy);font-weight:700;}

/* ── Índice de contenidos (table of contents) ── */
/* Antes: fondo gris plano sin sombra — se sentía "aplanado" frente a la
   tarjeta de resumen justo arriba. Ahora usa el mismo lenguaje de tarjeta
   elevada (fondo blanco + sombra suave + radio grande) para continuidad. */
.ap-toc{
  background:#fff;border:1px solid var(--gray200);border-radius:var(--radius-lg);
  padding:1.4rem 1.6rem;margin-bottom:3rem;
  box-shadow:var(--shadow-sm);
}
.ap-toc h2{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray600);margin-bottom:.9rem;
}
.ap-toc ol{
  list-style:none;counter-reset:toc;
  columns:2;column-gap:2rem;
}
.ap-toc li{counter-increment:toc;margin-bottom:.55rem;break-inside:avoid;}
.ap-toc a{
  display:flex;gap:.6rem;align-items:baseline;
  font-size:.9rem;color:var(--gray800);line-height:1.4;
  text-decoration:none;transition:color .18s;
}
.ap-toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-size:.74rem;font-weight:700;color:var(--green2);
  font-variant-numeric:tabular-nums;flex-shrink:0;
}
.ap-toc a:hover{color:var(--green2);}

/* ── Secciones legales numeradas ── */
/* Antes cada sección era texto "a secas" sobre el fondo de la página,
   separada solo por una línea recta bajo el título — de ahí la sensación
   de "documento plano" al bajar, en contraste con la tarjeta elevada del
   resumen ejecutivo. Ahora cada sección es su propia tarjeta blanca con
   sombra suave y esquinas redondeadas: mismo lenguaje de principio a fin. */
.ap-section{
  margin-bottom:1.75rem;scroll-margin-top:110px;
  background:#fff;border:1px solid var(--gray200);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:1.8rem 1.9rem;
}
.ap-section h2{
  display:flex;align-items:baseline;gap:.7rem;
  font-size:1.3rem;font-weight:800;color:var(--navy);
  line-height:1.3;margin-bottom:.9rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--gray200);
}
.ap-section h2 .ap-num{
  font-size:.95rem;font-weight:800;color:var(--green2);
  font-variant-numeric:tabular-nums;flex-shrink:0;
}
.ap-section h3{
  font-size:1rem;font-weight:700;color:var(--navy);
  margin:1.6rem 0 .6rem;
}
/* Texto base del documento — legible: 16px / interlineado amplio */
.ap-section p,
.ap-section li{
  font-size:1rem;color:var(--gray700);line-height:1.75;
}
.ap-section p{margin-bottom:1rem;}
.ap-section p:last-child{margin-bottom:0;}
.ap-section a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.ap-section a:hover{color:var(--green2);}
.ap-section strong{color:var(--navy);font-weight:700;}

/* Listas con viñeta cápsula (mismo marcador que .tech-list de la home) */
.ap-list{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin:.4rem 0 1.2rem;}
.ap-list li{position:relative;padding-left:1.4rem;}
.ap-list li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:10px;height:10px;border-radius:50%;
  border:1.5px solid rgba(106,191,46,.42);
  background:radial-gradient(circle at center,var(--green) 0 2.2px,transparent 2.35px);
  box-sizing:border-box;
}

/* Tarjetas de categorías de datos / finalidades */
.ap-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1.2rem 0;}
.ap-card{
  background:var(--gray50);border:1px solid var(--gray200);
  border-radius:var(--radius);padding:1.2rem 1.3rem;
  box-shadow:var(--shadow-xs);
}
.ap-card h4{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green2);margin-bottom:.5rem;
}
.ap-card p{font-size:.9rem;color:var(--gray600);line-height:1.6;margin:0;}

/* Caja de derechos ARCO / contacto destacado */
.ap-callout{
  background:#f3faef;border:1px solid rgba(106,191,46,.25);
  border-radius:var(--radius);padding:1.4rem 1.6rem;margin:1.2rem 0;
  box-shadow:var(--shadow-xs);
}
.ap-callout p{margin-bottom:.5rem;}
.ap-callout p:last-child{margin-bottom:0;}

/* Marcador de dato que el responsable debe completar */
.ap-fill{
  background:#fff7e6;border:1px dashed #e0a800;border-radius:6px;
  padding:.05rem .4rem;font-size:.95em;color:#8a6500;font-weight:600;
  font-family:'SF Mono','Monaco','Menlo',monospace;
}

/* Definición Responsable / domicilio.
   Antes usaba un fondo casi-blanco (#f8fafc) con borde fino sobre un fondo
   blanco puro: la diferencia de tono es tan sutil que en pantallas de
   celular se percibía como un simple filo/marco flotante ("corte brusco"),
   sin leerse como tarjeta intencional. Se unifica con el mismo lenguaje de
   tarjeta con tinte verde que ya usan .ap-callout (ARCO, Contacto) — mayor
   contraste con el fondo, sin borde duro, coherente con el resto del doc. */
.ap-identity{
  display:grid;gap:.2rem;
  background:#f3faef;border:1px solid rgba(106,191,46,.25);
  border-radius:var(--radius);
  padding:1.3rem 1.5rem;margin:.4rem 0 1.2rem;
  box-shadow:var(--shadow-xs);
}
.ap-identity dt{
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green2);margin-top:.9rem;
}
.ap-identity dt:first-child{margin-top:0;}
.ap-identity dd{font-size:1rem;color:var(--navy);font-weight:600;line-height:1.5;}
.ap-identity dd a{font-weight:600;}

@media (max-width:600px){
  .ap-toc ol{columns:1;}
  .ap-summary{padding:1.4rem 1.3rem;}
  .ap-section{padding:1.4rem 1.3rem;}
}

/* Info CTA común */
.info-cta{
  background:#fff;border:1px solid var(--gray200);border-radius:var(--radius-lg);
  padding:2.2rem 2rem;text-align:center;
}
.info-cta h3{font-size:1.2rem;font-weight:800;color:var(--navy);margin-bottom:.4rem;}
.info-cta p{font-size:.9rem;color:var(--gray600);margin-bottom:1.2rem;}
.info-cta-actions{
  display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;
}

@media(max-width:560px){
  .norm-card{flex-direction:column;}
}

/* ═══════════════════════════════════════════
   HOVER EFFECTS — Cápsulas & Maquila
═══════════════════════════════════════════ */

/* ── Cápsulas (.prod-card) ─────────────────── */
.prod-card{
  position:relative;
  transition:transform .35s var(--cc-ease),
             box-shadow .35s var(--cc-ease),
             border-color .25s;
}
/* Glow verde retirado: la selección es solo contorno + anillo, sin velo sobre la imagen */
.prod-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:none;
  opacity:0;transition:opacity .35s;pointer-events:none;z-index:0;
}
.prod-card:hover{
  box-shadow:var(--ring-green);
  border-color:var(--green);
}
.prod-card:hover::after{opacity:0;}

/* Imagen — float más natural con shadow que se ensancha */
/* La imagen siempre por encima de cualquier overlay del componente */
.prod-img{transition:background .35s;position:relative;z-index:1;}
.prod-card:hover .prod-img{background:none;}
.prod-img img{
  transition:transform .5s var(--cc-ease),
             filter .35s ease;
}
.prod-card:hover .prod-img img{
  transform:scale(1.06);
  filter:none;
}

/* Nombre — pequeño shift de color */
.prod-card .prod-name,
.prod-card .prod-desc,
.prod-card .prod-footer{position:relative;z-index:1;}
.prod-card .prod-name{transition:color .25s;}
.prod-card:hover .prod-name{color:var(--green2);}

/* Botón "Ver más" — flecha que sale al pasar el hover */
.prod-btn svg{transition:transform .3s var(--cc-ease);}
.prod-card:hover .prod-btn{gap:10px;color:var(--green2);}
.prod-card:hover .prod-btn svg{transform:translateX(3px);}

/* Badge — pequeño lift */
.prod-card .badge{transition:transform .25s, box-shadow .25s;}
.prod-card:hover .badge{
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(10,37,64,.08);
}

/* ── Maquila (.maquila-card) ───────────────── */
.maquila-card{
  position:relative;overflow:hidden;
  transition:transform .35s var(--cc-ease),
             box-shadow .35s var(--cc-ease),
             border-color .25s,
             background .25s;
}
/* Línea verde superior que aparece */
.maquila-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, var(--green), var(--green2));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--cc-ease);
}
.maquila-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 44px -16px rgba(10,37,64,.22), 0 6px 18px rgba(106,191,46,.15);
}
.maquila-card:hover::before{transform:scaleX(1);}

/* Icono — círculo verde claro se llena de verde brand, icono se vuelve blanco y rota */
.maquila-icon{
  transition:background .35s var(--cc-ease),
             transform .35s var(--cc-ease),
             box-shadow .35s;
}
.maquila-icon .i-svc{transition:color .35s, transform .45s var(--cc-ease);}
.maquila-card:hover .maquila-icon{
  background:var(--green);
  transform:rotate(-6deg) scale(1.06);
  box-shadow:0 8px 20px rgba(106,191,46,.32);
}
.maquila-card:hover .maquila-icon .i-svc{
  color:#fff;
  transform:rotate(6deg);
}

/* Título con color shift sutil */
.maquila-body h3{transition:color .25s;}
.maquila-card:hover .maquila-body h3{color:var(--green2);}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .prod-card,.prod-card *,
  .maquila-card,.maquila-card *,
  .servicio-card,.servicio-card *,
  .maq-card,.maq-card *,
  .blog-card,.pp-related-card,
  .cert-card,.value-card,.norm-card{
    transition:none!important;
    animation:none!important;
  }
  .prod-card:hover,.maquila-card:hover,.servicio-card:hover,
  .maq-card:hover,.blog-card:hover,.pp-related-card:hover,
  .cert-card:hover,.value-card:hover,.norm-card:hover{transform:none;}
}


/* ═══════════════════════════════════════════
   SERVICIOS — Índice (3 tarjetas)
═══════════════════════════════════════════ */
.servicios-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.6rem;
  margin-top:1.5rem;
}
@media (max-width:880px){.servicios-grid{grid-template-columns:1fr;gap:1.1rem;}}

.servicio-card{
  position:relative;
  background:#fff;
  border:1px solid var(--gray200);
  border-radius:var(--radius-lg);
  text-decoration:none;color:inherit;
  display:flex;flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow:hidden;
}
.servicio-card::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, var(--green), var(--green2));
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--cc-ease);
}
.servicio-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 48px -16px rgba(10,37,64,.22), 0 6px 18px rgba(106,191,46,.16);
  border-color:var(--green);
}
.servicio-card:hover::before{transform:scaleX(1);}

.servicio-num{
  position:absolute;top:.9rem;left:.9rem;z-index:2;
  display:inline-flex;align-items:center;
  font-size:.74rem;font-weight:800;letter-spacing:.14em;
  color:#fff;background:rgba(10,37,64,.62);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  padding:.32rem .62rem;border-radius:999px;
  font-variant-numeric:tabular-nums;
  transition:background .3s ease;
}
.servicio-card:hover .servicio-num{background:var(--green2);}
/* Imagen grande de encabezado */
.servicio-media{
  position:relative;
  height:210px;
  overflow:hidden;
  background:var(--gray100);
}
.servicio-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--cc-ease);
}
.servicio-card:hover .servicio-media img{transform:scale(1.06);}
.servicio-media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,37,64,.22) 0%, rgba(10,37,64,0) 40%);
}
.servicio-body{
  padding:1.7rem 1.6rem 1.6rem;
  display:flex;flex-direction:column;flex:1;
}
@media (max-width:880px){.servicio-media{height:200px;}}
.servicio-icon{
  width:56px;height:56px;border-radius:14px;
  background:#e8f5e0;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.2rem;
  transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.servicio-icon svg{width:28px;height:28px;color:var(--green2);transition:color .3s ease;}
.servicio-card:hover .servicio-icon{
  background:var(--green);
  transform:rotate(-6deg) scale(1.05);
  box-shadow:0 8px 20px rgba(106,191,46,.3);
}
.servicio-card:hover .servicio-icon svg{color:#fff;}

.servicio-card h3{
  font-size:1.15rem;font-weight:700;color:var(--navy);
  letter-spacing:-.01em;line-height:1.3;margin-bottom:.55rem;
  transition:color .25s ease;
}
.servicio-card:hover h3{color:var(--green2);}
.servicio-card p{
  font-size:.88rem;color:var(--gray600);
  line-height:1.65;flex:1;margin-bottom:1.2rem;
}
.servicio-arrow{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.82rem;font-weight:700;color:var(--green2);
  letter-spacing:.02em;
  transition:gap .25s ease, color .25s ease;
}
.servicio-arrow svg{
  width:14px;height:14px;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.servicio-card:hover .servicio-arrow{gap:10px;color:var(--green);}

/* Crumb-up en section-tag (parent link) */
.crumb-up{
  color:var(--green);text-decoration:none;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  transition:color .2s ease;
}
.crumb-up:hover{color:var(--green2);text-decoration:underline;text-underline-offset:3px;}

/* Mobile menu — grouping for Servicios */
.mobile-menu .mobile-group{
  color:var(--navy)!important;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.mobile-menu .mobile-sub{
  padding-left:1.1rem;
  font-weight:500;
  font-size:.98rem;
  text-transform:none;
  letter-spacing:.01em;
  color:var(--gray600);
}


/* ═══════════════════════════════════════════
   SERVICIOS — CTA "Ver más"
═══════════════════════════════════════════ */
.servicios-cta{
  text-align:center;
  margin-top:2.4rem;
  padding-top:2rem;
}
.servicios-reveal-btn{
  font-size:1rem;
  padding:.95rem 2rem;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  letter-spacing:.01em;
}
.servicios-reveal-btn svg{
  transition:transform .25s ease;
}
.servicios-reveal-btn:hover svg{
  transform:translateY(3px);
}
.servicios-cta-hint{
  margin-top:.85rem;
  font-size:.82rem;
  color:var(--gray500);
  letter-spacing:.02em;
}


/* ═══════════════════════════════════════════
   Breadcrumb superior (páginas de Servicios)
═══════════════════════════════════════════ */
.page-crumb-bar{
  padding:6.5rem 0 .2rem;
  background:transparent;
}
.page-crumb{
  max-width:1200px;margin:0 auto;padding:0 1.5rem;
  display:flex;align-items:center;gap:.5rem;
  font-size:.78rem;font-weight:600;letter-spacing:.04em;
  color:var(--gray500);
}
.page-crumb a{
  color:var(--gray600);
  text-decoration:none;
  transition:color .2s;
}
.page-crumb a:hover{color:var(--green2);}
.page-crumb .sep{color:var(--gray300);}
.page-crumb .current{color:var(--navy);}
.page-crumb svg{
  width:14px;height:14px;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  vertical-align:middle;margin-right:.3rem;
}


/* ═══════════════════════════════════════════
   Botón "Volver a Servicios" (páginas de servicio)
═══════════════════════════════════════════ */
.back-to-services{
  display:inline-flex;align-items:center;gap:.55rem;
  margin:0 0 0 0;
  padding:.65rem 1.1rem .65rem .9rem;
  background:#fff;
  border:1.5px solid var(--gray200);
  border-radius:100px;
  font-size:.85rem;font-weight:600;color:var(--navy);
  text-decoration:none;
  transition:all .2s ease;
  letter-spacing:.01em;
}
.back-to-services:hover{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
  transform:translateX(-2px);
}
.back-to-services svg{
  width:16px;height:16px;
  fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s ease;
}
.back-to-services:hover svg{transform:translateX(-3px);}
/* Botón de regreso dentro del hero de páginas de detalle */
.pp-back{margin:0 0 1.5rem;}
.back-bar{
  max-width:1200px;margin:0 auto;
  padding:.8rem 1.5rem 2.4rem;
}


/* ═══════════════════════════════════════════
   ACCESIBILIDAD (WCAG)
═══════════════════════════════════════════ */

/* Skip link — visible al recibir foco con teclado */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;width:1px;height:1px;overflow:hidden;
  z-index:100000;
}
.skip-link:focus,
.skip-link:focus-visible{
  position:fixed;
  left:1rem;top:1rem;width:auto;height:auto;
  padding:.85rem 1.4rem;
  background:var(--navy);
  color:#fff;
  font-size:.9rem;font-weight:600;
  text-decoration:none;
  border-radius:8px;
  box-shadow:0 8px 24px rgba(10,37,64,.32);
  outline:3px solid var(--green);
  outline-offset:2px;
}

/* Focus states consistentes para teclado */
*:focus{outline:none;}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--green);
  outline-offset:2px;
  border-radius:4px;
}

/* Botones e inputs ya tienen su estilo; no romper */
.btn:focus-visible{outline-offset:3px;}

/* Tipografía mínima legible */
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* Screen reader-only utility */
.sr-only{
  position:absolute!important;
  width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}


/* ═══════════════════════════════════════════
   FASE 3 — MOTION + MICROINTERACCIONES
═══════════════════════════════════════════ */

/* ── Fade-in con stagger ────────────────────── */
.fade-in{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--cc-ease),
             transform .7s var(--cc-ease);
  transition-delay:var(--stagger-delay, 0ms);
}
.fade-in.visible{
  opacity:1;
  transform:none;
}

/* Variante lateral para hero */
.fade-in-left{
  opacity:0;
  transform:translateX(-30px);
  transition:opacity .8s var(--cc-ease),
             transform .8s var(--cc-ease);
}
.fade-in-left.visible{opacity:1;transform:none;}

/* ═══════════════════════════════════════════
   VELO BLANCO DURANTE LA NAVEGACIÓN IN-PLACE
   Causa del "fondo negro" en el PRIMER clic hacia una subpágina: mientras
   spa-nav.js descarga la página nueva de la red (unos ms la primera vez;
   instantáneo después, ya en caché), la página ACTUAL sigue visible. Si esa
   página es el inicio —cuyo banner (hero) es azul marino muy oscuro
   (#0d3260, casi negro en pantallas de laptop)— se percibe un destello
   oscuro/negro hasta que la subpágina (blanca) reemplaza el contenido.
   spa-nav marca <html> con .cc-navigating durante TODA esa ventana (inicio
   del clic → fin del swap). Pintamos encima un velo blanco opaco: convierte
   ese instante en un blanco limpio (igual que una carga de página normal),
   nunca en negro. Al terminar el swap se quita .cc-navigating y el velo
   desaparece, revelando la página nueva ya pintada en blanco: sin costura.
═══════════════════════════════════════════ */
html.cc-navigating::after{
  content:'';
  position:fixed;
  inset:0;
  background:#ffffff;
  z-index:2000;
  pointer-events:none;
}

/* ═══════════════════════════════════════════
   GARANTÍA ANTI-"PANTALLA VACÍA" EN NAVEGACIÓN IN-PLACE
   En cuanto spa-nav.js inicia un cambio de página, marca <html> con
   .cc-instant. Entonces TODO el contenido con animación de entrada se
   fuerza a su estado final visible, SIN transición. Así la página nueva
   se pinta 100% visible desde el primer frame, sin depender del timing
   de transiciones, del orden de pintado ni del IntersectionObserver.
   Las animaciones de entrada solo se ven en la PRIMERA carga del sitio.
═══════════════════════════════════════════ */
html.cc-instant .fade-in,
html.cc-instant .fade-in-left,
html.cc-instant .reveal-stagger,
html.cc-instant .reveal-stagger > .maq-card,
html.cc-instant .reveal-stagger > .maquila-card,
html.cc-instant .pp-reveal{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

/* ═══════════════════════════════════════════
   Transición de entrada "premium" (fade + rise)
   Se activa cuando spa-nav.js añade body.cc-page-enter, en toda
   navegación in-place del sitio público (excluye panel.html). Excluye
   TODO el "chrome" persistente del sitio — header, menú móvil,
   breadcrumb, back-bar, FAB de contacto, botón volver arriba, footer —
   porque esos elementos no existen igual en todas las páginas (p.ej.
   Inicio no tiene breadcrumb ni back-bar). Si se animaran, cada
   navegación se vería distinta según qué chrome tuviera esa página en
   particular, lo que se percibía como una transición "distinta"/"sucia"
   entre secciones. Solo el CONTENIDO propio de cada página entra con
   fade + elevación mínima de 10px; el chrome permanece fijo y consistente.
═══════════════════════════════════════════ */
@media (prefers-reduced-motion:no-preference){
  body.cc-page-enter > :not(header):not(.mobile-menu):not(.contact-menu):not(.scroll-top-btn):not(footer):not(script):not(style):not(.cc-progress){
    animation:ccPageEnter .38s var(--cc-ease) both;
  }
  /* El breadcrumb y el botón «volver» son chrome DE PÁGINA (no global como
     header/footer): entran junto con el contenido, sin retraso, para que
     se vean como una sola unidad sin costura entre "franja fija" y
     "contenido que se mueve" (el corte que se veía en Maquinaria/Maquila/
     Logística, las únicas páginas con ambas barras apiladas). */
}
@keyframes ccPageEnter{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

/* ── Barra de progreso — solo se ve si la descarga tarda ─── */
/* Aparece a los ~220ms de una navegación in-place que aún no resuelve
   (conexión lenta / caché fría); en el caso normal (con precarga en
   hover/touch) la navegación ya terminó antes de ese umbral y nunca se ve.
   No sustituye el velo blanco anti-flash: es solo una señal de progreso. */
.cc-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:var(--green);
  z-index:2001; /* por encima del velo (2000) */
  opacity:0;
  transition:width .4s var(--cc-ease), opacity var(--cc-fast) ease;
  pointer-events:none;
}
.cc-progress.is-active{opacity:1;}
.cc-progress.is-done{width:100% !important;opacity:0;transition:width var(--cc-fast) ease, opacity .3s ease .1s;}
@media (prefers-reduced-motion:reduce){
  .cc-progress{transition:opacity .15s ease;}
}

/* ── Header con sombra/blur al hacer scroll ─── */
header{
  transition:box-shadow .4s ease, padding .4s ease, background-color .4s ease, backdrop-filter .4s ease, -webkit-backdrop-filter .4s ease;
}
header.is-scrolled{
  background:rgba(13,50,96,.88);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 4px 20px rgba(0,0,0,.2);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:6px 0;
}


/* ── Botón "Volver arriba" ──────────────────── */
.scroll-top-btn{
  position:fixed;
  left:1.25rem;bottom:1.25rem;
  width:48px;height:48px;
  background:#0D3260;
  color:#fff;
  border:none;border-radius:14px;
  display:grid;place-items:center;
  cursor:pointer;
  opacity:0;pointer-events:none;
  transform:translateY(20px) scale(.9);
  transition:opacity .35s ease, transform .35s var(--cc-ease),
             background .2s ease, box-shadow .2s ease;
  box-shadow:0 8px 22px rgba(13,50,96,.34);
  z-index:998;
}
/* Visible al bajar >300px: opacidad sutil para no estorbar la lectura */
.scroll-top-btn.visible{
  opacity:.6;pointer-events:auto;
  transform:translateY(0) scale(1);
}
/* Al pasar el cursor o enfocar, sube a opacidad plena */
.scroll-top-btn.visible:hover,
.scroll-top-btn.visible:focus-visible{
  opacity:1;
  background:var(--navy);
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 12px 28px rgba(13,50,96,.42);
}
.scroll-top-btn.visible:active{transform:translateY(-1px) scale(1.02);}
.scroll-top-btn svg{width:20px;height:20px;}
@media (max-width:680px){
  .scroll-top-btn{
    width:44px;height:44px;border-radius:12px;
    left:1rem;bottom:1rem;
  }
}

/* ── Ripple en botones .btn ─────────────────── */
.btn{position:relative;overflow:hidden;}
.btn-ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.45);
  pointer-events:none;
  transform:scale(0);
  animation:btn-ripple-anim .6s cubic-bezier(.4,0,.2,1);
}
@keyframes btn-ripple-anim{
  to{transform:scale(2.4);opacity:0;}
}
.btn-outline .btn-ripple,
.btn-white .btn-ripple{
  background:rgba(10,37,64,.18);
}

/* ── Hover unificado: transición consistente en TODAS las cards ── */
.prod-card,
.maq-card,
.maquila-card,
.servicio-card,
.blog-card,
.pp-related-card,
.cert-card,
.value-card,
.norm-card{
  transition:transform .35s var(--cc-ease),
             box-shadow .35s var(--cc-ease),
             border-color .25s ease;
}

/* ── Link underline anim sutil ──────────────── */
.nav-menu > li > a{
  position:relative;
}
.nav-menu > li > a::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:-4px;
  width:100%;height:2px;
  background:var(--green);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .25s ease;
}
.nav-menu > li > a:hover::after,
.nav-menu > li > a.active::after{
  transform:scaleX(1);
}

/* ── Imagen ampliada al hover en prod-img/maq-img/blog-card-image ── */
.prod-img,
.maq-img,
.blog-card-image,
.pp-related-img{
  overflow:hidden;
}

/* ── Animación shimmer en stat number cuando empieza a contar ── */
.hero-stat-num,
.stat-num{
  transition:color .3s ease;
}

/* ── Reducción de movimiento ────────────────── */
@media (prefers-reduced-motion: reduce){
  .fade-in,.fade-in-left{
    opacity:1!important;transform:none!important;
    transition:none!important;
  }
  .scroll-top-btn{transition:opacity .2s ease;}
  .btn-ripple{display:none;}
  .hero-capsule-bg,.hero-pattern,.hero-grid-overlay{transform:none!important;}
}


/* ═══════════════════════════════════════════
   FASE 4 — PULIDO VISUAL PREMIUM
═══════════════════════════════════════════ */

/* ── Tokens de sombra en capas ──────────────── */
:root{
  /* Sombras tipo "Apple/Stripe" — combinación close + ambient */
  --shadow-xs:  0 1px 2px rgba(10,37,64,.06);
  --shadow-sm:  0 1px 2px rgba(10,37,64,.06), 0 1px 3px rgba(10,37,64,.08);
  --shadow-md:  0 4px 8px -2px rgba(10,37,64,.08), 0 2px 4px -1px rgba(10,37,64,.05);
  --shadow-lg:  0 12px 24px -8px rgba(10,37,64,.10), 0 4px 8px -4px rgba(10,37,64,.06);
  --shadow-xl:  0 24px 48px -12px rgba(10,37,64,.18), 0 8px 16px -8px rgba(10,37,64,.08);
  --shadow-2xl: 0 36px 64px -16px rgba(10,37,64,.22), 0 12px 24px -12px rgba(10,37,64,.10);
  /* Estado seleccionado/hover unificado (Opción B): UN solo contorno verde nítido y OPACO.
     Sin translucidez (no hay "velo" verdoso sobre los fondos pastel) y sin doble trazo:
     el anillo opaco se funde con el borde verde en una única línea limpia. */
  --ring-green: 0 0 0 1.5px var(--green);

  /* Sombras "green" suaves para hovers */
  --shadow-green-sm: 0 4px 12px rgba(106,191,46,.18);
  --shadow-green-md: 0 12px 28px -8px rgba(106,191,46,.28), 0 4px 12px rgba(106,191,46,.12);

  /* Sombras "navy" para CTAs premium */
  --shadow-navy: 0 12px 28px -8px rgba(10,37,64,.32);
}

/* ── Tipografía destacada (Plus Jakarta Sans italic, como Urbahome) ── */
.hero h1 em,
.section-title em,
.pp-hero h1 em,
.blog-hero h1 em{
  font-family:var(--font-sans);
  font-style:italic;
  font-weight:500;
  letter-spacing:-.01em;
  line-height:.95;
}

/* Hero: el em se ve elegante en color verde con un sutil gradient si lo deseas */
.hero h1 em{
  color:var(--green);
  font-size:1.08em;
}

/* ── Jerarquía tipográfica refinada ─────────── */
h1, h2, h3{
  text-wrap:balance;
}
p{text-wrap:pretty;}

.section-title{
  letter-spacing:-.025em;
  font-feature-settings:"ss01","cv01";
}

/* Section-tag: punto decorativo como flex item (no absolute)
   para que no se desborde del pill en body.home */
.section-tag{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
}
.section-tag::before{
  content:'';
  flex-shrink:0;
  width:5px;height:5px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 3px rgba(106,191,46,.18);
}

/* ── Divider-green refinado ─────────────────── */
.divider-green{
  width:160px;height:1.5px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(106,191,46,.35) 18%,
    rgba(106,191,46,.7) 50%,
    rgba(106,191,46,.35) 82%,
    transparent 100%);
  border-radius:1px;
}

/* ── Botones con depth premium ──────────────── */
.btn-primary{
  background:linear-gradient(180deg, var(--green-btn) 0%, var(--green-btn-deep) 100%);
  box-shadow:var(--shadow-green-sm),
             inset 0 1px 0 rgba(255,255,255,.18);
  border:none;
  color:#fff;
}
.btn-primary:hover{
  background:linear-gradient(180deg, var(--green-btn-hover) 0%, var(--green-btn) 100%);
  box-shadow:var(--shadow-green-md),
             inset 0 1px 0 rgba(255,255,255,.28);
  transform:translateY(-1px);
}
.btn-primary:visited:hover{
  background:linear-gradient(180deg, var(--green-btn-hover) 0%, var(--green-btn) 100%);
}
.btn-primary:active{
  transform:translateY(0);
  box-shadow:var(--shadow-green-sm),
             inset 0 2px 4px rgba(0,0,0,.12);
}

/* ── Cards con sombras en capa ──────────────── */
.prod-card,
.maq-card,
.maquila-card,
.blog-card,
.pp-related-card{
  box-shadow:var(--shadow-xs);
  border:1px solid var(--gray100);
}
/* Cards secundarias: conservan la firma anterior (contorno + anillo verde). */
.pp-related-card:hover,
.value-card:hover{
  box-shadow:var(--ring-green);
  border-color:var(--green);
}
/* Firma hover unificada de cards de sección (Cápsulas, Maquinaria, Maquila,
   Logística, Servicios, Certificaciones, Blog y Cumplimiento normativo):
   elevación progresiva — zoom sutil de toda la tarjeta + sombra en capas.
   El contorno verde se adelgaza: solo el borde de 1px cambia a verde, sin el
   anillo extra de --ring-green. */
.prod-card:hover,
.maq-card:hover,
.maquila-card:hover,
.blog-card:hover,
.cert-card:hover,
.norm-card:hover,
.servicio-card:hover{
  transform:translateY(-3px) scale(1.015);
  box-shadow:var(--shadow-lg);
  border-color:var(--green);
}

.servicio-card{
  box-shadow:var(--shadow-sm);
  border:1px solid var(--gray100);
}

/* ── Badges premium ─────────────────────────── */
.badge{
  font-feature-settings:"ss01";
  letter-spacing:.02em;
  padding:.32rem .7rem;
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  border-radius:100px;
  border:1px solid transparent;
}
.badge-green{
  background:rgba(106,191,46,.10);
  color:var(--green2);
  border-color:rgba(106,191,46,.22);
}
.badge-blue{
  background:rgba(59,130,246,.10);
  color:#1d4ed8;
  border-color:rgba(59,130,246,.22);
}
.badge-gray{
  background:var(--gray100);
  color:var(--gray600);
  border-color:var(--gray200);
}

/* ── Form inputs premium ────────────────────── */
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=tel],
.contact-form input[type=number],
.contact-form select,
.contact-form textarea,
input[type=email]:not(.no-edit input){
  background:#fff;
  border:1.5px solid var(--gray200);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  font-feature-settings:"ss01";
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--green);
  background:#fff;
  box-shadow:0 0 0 4px rgba(106,191,46,.10),
             0 1px 2px rgba(10,37,64,.05);
}
.contact-form label{
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.01em;
  color:var(--navy);
}

/* ── Hero stats refinement: separadores verticales ── */
.hero-stats > div{
  position:relative;
  padding:0 1.2rem;
}
.hero-stats > div + div::before{
  content:'';
  position:absolute;
  left:0;top:50%;
  width:1px;height:60%;
  background:rgba(255,255,255,.08);
  transform:translateY(-50%);
}
@media (max-width:680px){
  .hero-stats > div + div::before{display:none;}
}

/* ── Spacing rhythm refinement ──────────────── */
section{padding:5.5rem 0;}
section.hero{padding:0;}
section + section{padding-top:5.5rem;}
@media (max-width:880px){
  section{padding:3.5rem 0;}
}

/* ── Imagen de productos: gradiente sutil de fondo ── */
.prod-img{
  background:linear-gradient(135deg, var(--gray50) 0%, var(--gray100) 100%);
}

/* ── Footer corporativo premium ─────────────── */
footer{
  background:linear-gradient(180deg, var(--navy) 0%, #061a30 100%);
}


/* ── FAB stack: ajuste visual coherente ─────── */
.fab{
  box-shadow:var(--shadow-lg);
}
.fab:hover{
  box-shadow:var(--shadow-xl);
}

/* ── Suavizar transiciones globales para .btn ── */
.btn{
  transition:all .25s var(--cc-ease);
}

/* ── Selección de texto en color de marca ───── */
::selection{
  background:rgba(106,191,46,.28);
  color:var(--navy);
}
::-moz-selection{
  background:rgba(106,191,46,.28);
  color:var(--navy);
}

/* ── Scrollbar refinado (WebKit) ──────────────
   Antes: thumb gray300 con borde del MISMO tono que el track (gray50) —
   ese borde "recortaba" visualmente casi todo el ancho del thumb, y sobre
   el fondo blanco del sitio el contraste resultaba tan bajo que se sentía
   como si desapareciera al hacer scroll. Ahora: thumb más oscuro (gray400)
   y borde sutil pero con más contraste, visible en cualquier fondo blanco. */
@media (hover:hover){
  ::-webkit-scrollbar{width:12px;height:12px;}
  ::-webkit-scrollbar-track{background:var(--gray50);}
  ::-webkit-scrollbar-thumb{
    background:var(--gray400);
    border-radius:10px;
    border:3px solid var(--gray50);
  }
  ::-webkit-scrollbar-thumb:hover{background:var(--gray500);}
}
/* Firefox */
html{scrollbar-width:auto;scrollbar-color:var(--gray400) var(--gray50);}

/* ═══════════════════════════════════════════
   HOME — Pulido visual (sutil, solo inicio)
═══════════════════════════════════════════ */
body.home .hero-stats{
  border-top-color:rgba(255,255,255,.10);
  gap:clamp(1rem,2.5vw,2rem);
}
body.home .hero-stats > div{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:clamp(.65rem,1.5vw,1rem) clamp(1rem,2vw,1.4rem);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:background .25s,border-color .25s;
}
body.home .hero-stats > div:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(106,191,46,.35);
}
body.home .hero-stats > div + div::before{display:none;}

body.home .section-tag{
  background:rgba(106,191,46,.08);
  border:1px solid rgba(106,191,46,.18);
  padding:.38rem .95rem .38rem .85rem;
  border-radius:100px;
}

body.home .cat-header{
  border-bottom:none;
  padding-bottom:0;
  margin-bottom:1.4rem;
}
body.home .cat-title{
  display:flex;align-items:center;gap:.75rem;
  font-size:1.15rem;
}
body.home .cat-title::before{
  content:'';
  width:4px;height:1.1em;border-radius:4px;
  background:linear-gradient(180deg,var(--green),var(--green2));
  flex-shrink:0;
}

body.home .prod-card .prod-img{border-bottom:1px solid var(--gray100);}

body.home .tech-cta{
  background:linear-gradient(135deg,rgba(106,191,46,.06) 0%,rgba(106,191,46,.02) 100%);
  border:1px solid rgba(106,191,46,.20);
  box-shadow:var(--shadow-xs);
}

body.home .servicio-card{box-shadow:var(--shadow-sm);}

body.home .section-header-centered{margin-bottom:3.25rem;}

@media (max-width:680px){
  body.home .hero-stats > div{padding:.55rem .85rem;}
}

/* ══ Modal Aviso de Privacidad / Términos y Condiciones ══ */
html.cc-legal-open,
body.cc-legal-open{
  overflow:hidden;
}
.cc-legal-modal{
  position:fixed;inset:0;z-index:1200;
  display:flex;align-items:center;justify-content:center;
  padding:max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease, visibility .28s ease;
}
.cc-legal-modal.is-open{
  opacity:1;visibility:visible;pointer-events:auto;
}
.cc-legal-modal[hidden]{display:none!important;}
.cc-legal-modal__backdrop{
  position:absolute;inset:0;
  background:rgba(8,22,42,.62);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  cursor:pointer;
}
.cc-legal-modal__dialog{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  width:min(860px,100%);
  max-height:min(88vh,920px);
  background:#fff;
  border-radius:var(--radius-lg, 16px);
  box-shadow:0 24px 64px rgba(0,0,0,.28);
  overflow:hidden;
  transform:translateY(12px) scale(.98);
  transition:transform .3s cubic-bezier(.25,.7,.25,1);
}
.cc-legal-modal.is-open .cc-legal-modal__dialog{
  transform:none;
}
.cc-legal-modal__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-shrink:0;
  padding:.95rem 1.15rem .95rem 1.4rem;
  border-bottom:1px solid var(--gray100, #eef1f5);
  background:linear-gradient(180deg,#fff 0%,var(--gray50,#f7f8fa) 100%);
}
.cc-legal-modal__title{
  margin:0;font-size:1.05rem;font-weight:800;color:var(--navy,#0d3260);
  letter-spacing:-.01em;line-height:1.25;
}
.cc-legal-modal__close{
  appearance:none;border:0;background:var(--gray100,#eef1f5);color:var(--navy,#0d3260);
  width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.cc-legal-modal__close:hover{
  background:var(--navy,#0d3260);color:#fff;
}
.cc-legal-modal__close:focus-visible{
  outline:2px solid var(--green,#6abf2e);outline-offset:2px;
}
.cc-legal-modal__body{
  flex:1 1 auto;min-height:0;overflow:auto;
  padding:1.35rem 1.5rem 2rem;
  -webkit-overflow-scrolling:touch;
  outline:none;
}
.cc-legal-modal__body .info-hero{margin-bottom:1.75rem;text-align:left;}
.cc-legal-modal__body .info-hero h1{
  font-size:clamp(1.55rem,3.2vw,2.1rem);
}
.cc-legal-modal__body .info-intro{margin-bottom:0;}
.cc-legal-modal__body .info-cta{margin-top:2rem;}
.cc-legal-modal__loading,
.cc-legal-modal__error{
  margin:2rem 0;text-align:center;color:var(--gray600);font-size:.95rem;
}
.cc-legal-modal__error a{color:var(--green2);font-weight:600;}

@media (max-width:600px){
  .cc-legal-modal{
    padding:0;align-items:stretch;
  }
  .cc-legal-modal__dialog{
    width:100%;max-height:100%;
    border-radius:0;
    min-height:100%;
  }
  .cc-legal-modal__body{padding:1.1rem 1.1rem 2.5rem;}
  .cc-legal-modal__bar{padding:.85rem 1rem;}
}

@media (prefers-reduced-motion:reduce){
  .cc-legal-modal,
  .cc-legal-modal__dialog{transition:none;}
}