/* ============================================================
   IMG CONSTRUMIN — PREMIUM UI v1.0 (2026-06)
   Capa global de refinamiento visual y de animaciones.
   Se carga DESPUÉS de site.min.css y enhancements.css en
   todas las páginas. Solo sobreescribe; no redefine layout.

   Criterios (emil-design-eng):
   - Animar solo transform/opacity. Nada de padding/height.
   - UI frecuente < 300ms. Botones 120-160ms. Dropdowns ~180ms.
   - ease-out custom en entradas. Nunca ease-in.
   - Hover solo en (hover:hover) and (pointer:fine).
   - prefers-reduced-motion respetado.
   ============================================================ */

/* ─── 1. TOKENS ──────────────────────────────────────────── */
:root {
  /* Curvas */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Paleta industrial premium (complementa la de marca) */
  --pui-carbon: #0B0F14;          /* negro carbón */
  --pui-slate: #1E293B;           /* slate técnico */
  --pui-warm-white: #FAFAF7;      /* blanco cálido */
  --pui-steel: #64748B;           /* gris industrial */
  --pui-teal: #14B8A6;            /* verde/teal ingeniería */
  --pui-deep-blue: #0C2D48;       /* azul profundo */
  --pui-copper: #C08552;          /* dorado/cobre sutil (solo acento) */
  --pui-accent: #EA580C;          /* naranja de marca existente */
  --pui-green: #16A34A;

  /* Radios modernos */
  --pui-r-md: 16px;
  --pui-r-lg: 20px;
  --pui-r-xl: 24px;

  /* Sombras suaves por elevación */
  --pui-shadow-1: 0 1px 2px rgba(2, 6, 12, .06), 0 4px 16px rgba(2, 6, 12, .06);
  --pui-shadow-2: 0 2px 6px rgba(2, 6, 12, .08), 0 12px 32px rgba(2, 6, 12, .10);
  --pui-shadow-3: 0 4px 12px rgba(2, 6, 12, .10), 0 24px 56px rgba(2, 6, 12, .16);

  /* Borde glass ligero */
  --pui-glass-border-dark: rgba(255, 255, 255, .10);
  --pui-glass-border-light: rgba(11, 15, 20, .10);
}

/* ─── 2. TIPOGRAFÍA Y BASE ───────────────────────────────── */
h1, h2, h3 { text-wrap: balance; }

h2 { letter-spacing: -0.03em; }
h3 { letter-spacing: -0.015em; }

::selection {
  background: rgba(234, 88, 12, .85);
  color: #fff;
}

/* Scrollbar discreto premium */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .45);
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover { background-color: rgba(100, 116, 139, .7); }
}

/* Focus visible consistente en todo el sitio */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--pui-teal);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ─── 3. ICONOS (sistema SVG local de site.min.js) ───────── */
/* Reservar el espacio del icono ANTES de que JS reemplace
   <i class="fa-*"> por <svg>, para evitar saltos de layout. */
i[class*="fa-"] {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  font-style: normal;
}

/* ─── 4. HEADER PREMIUM ──────────────────────────────────── */
/* Blur ligero (≤10px) y transición SOLO de propiedades baratas:
   nunca padding (el cambio de tamaño al hacer scroll es un snap
   discreto en vez de una animación de layout). */
.img-main-header {
  backdrop-filter: blur(10px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.15) !important;
  transition: background-color .2s ease, background .2s ease,
              box-shadow .2s ease, border-color .2s ease !important;
}

/* ─── 5. MEGA MENÚ / DROPDOWNS ───────────────────────────── */
/* Entrada rápida y elegante: 180ms ease-out custom, desde
   translateY(8px) + scale(.98) (nunca desde scale(0)). */
.img-mega-menu,
.img-services-menu {
  backdrop-filter: blur(12px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.15) !important;
  transition: opacity 180ms var(--ease-out),
              transform 180ms var(--ease-out),
              visibility 180ms !important;
  transform: translate(-50%, 8px) scale(.98);
  transform-origin: top center;
  border-radius: var(--pui-r-lg) !important;
}

.img-nav-item.is-open .img-mega-menu,
.img-nav-item.is-open .img-services-menu,
.img-nav-item:focus-within .img-mega-menu,
.img-nav-item:focus-within .img-services-menu {
  transform: translate(-50%, 0) scale(1) !important;
}

/* En desktop con puntero fino, el hover también abre (rápido) */
@media (hover: hover) and (pointer: fine) {
  .img-nav-item:hover .img-mega-menu,
  .img-nav-item:hover .img-services-menu {
    transform: translate(-50%, 0) scale(1) !important;
  }
}

/* En táctil: el hover NO abre menús (evita menús "pegados" tras
   un tap). Solo la clase .is-open que gestiona el JS. */
@media (hover: none) {
  .img-nav-item:not(.is-open):not(:focus-within):hover .img-mega-menu,
  .img-nav-item:not(.is-open):not(:focus-within):hover .img-services-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Links del mega menú: feedback inmediato */
.img-mega-links a,
.img-services-menu a {
  transition: background-color 140ms ease, color 140ms ease,
              transform 140ms var(--ease-out);
}

.img-mega-links a:active,
.img-services-menu a:active { transform: scale(.98); }

/* ─── 6. BOTONES Y CTAs ──────────────────────────────────── */
/* Feedback táctil universal en elementos pulsables clave.
   120-160ms, transform only. */
.cta-button,
.svc-btn-primary,
.svc-btn-secondary,
.svc-btn-wa,
.img-nav-cta,
.img-whatsapp-cta,
.img-whatsapp-float,
.btn-wa-pulse,
button[type="submit"],
a[href*="wa.me"] {
  transition-duration: 160ms;
}

.cta-button:active,
.svc-btn-primary:active,
.svc-btn-secondary:active,
.svc-btn-wa:active,
.img-nav-cta:active,
.img-whatsapp-cta:active,
.img-whatsapp-float:active,
.btn-wa-pulse:active,
button[type="submit"]:active,
form button:active {
  transform: scale(.97) !important;
  transition-duration: 100ms !important;
}

/* Shimmer del CTA: de 600ms a 240ms (o invisible si reduce-motion) */
.cta-button::after {
  transition-duration: 240ms !important;
}

/* Jerarquía: CTA primario con presencia, secundario discreto */
.svc-btn-primary,
.cta-button--primary {
  box-shadow: 0 2px 8px rgba(234, 88, 12, .28), 0 8px 24px rgba(234, 88, 12, .22);
}

/* ─── 7. HERO ────────────────────────────────────────────── */
/* Hover de imagen hero: 250ms transform only (antes 550ms + filter) */
.seo-hero img,
.premium-hero__media img {
  transition: transform 250ms var(--ease-out) !important;
}

/* Entrada de hero: sutil, opacity + translateY(8px) */
.pui-hero-enter {
  opacity: 0;
  transform: translateY(8px);
  animation: pui-fade-up 420ms var(--ease-out) 60ms forwards;
}

@keyframes pui-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* Legibilidad: el H1 de heroes con imagen siempre con sombra suave */
.svc-hero h1,
.premium-hero h1 {
  text-shadow: 0 2px 20px rgba(0, 0, 0, .45);
}

/* ─── 8. CARDS ───────────────────────────────────────────── */
/* Radio y elevación consistentes; hover sutil SOLO en desktop. */
.svc-benefit-card,
.svc-tech-item,
.svc-app-card,
.svc-intro__stat-card,
.spotlight-card,
.product-card,
.c-glass-card {
  border-radius: var(--pui-r-lg);
}

.svc-faq-item { border-radius: var(--pui-r-md); }

@media (hover: hover) and (pointer: fine) {
  .svc-benefit-card,
  .svc-tech-item,
  .spotlight-card,
  .product-card {
    transition: transform 220ms var(--ease-out),
                box-shadow 220ms var(--ease-out),
                border-color 220ms ease;
  }

  .svc-benefit-card:hover,
  .spotlight-card:hover,
  .product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--pui-shadow-2);
  }

  /* Zoom de imagen en cards: contenido, no exagerado */
  .svc-app-card:hover .svc-app-card__bg { transform: scale(1.04); }
  .svc-app-card__bg { transition: transform 300ms var(--ease-out); }
}

/* En táctil las cards no se mueven (evita estados fantasma) */
@media (hover: none) {
  .svc-benefit-card:hover,
  .spotlight-card:hover,
  .product-card:hover,
  .svc-app-card:hover {
    transform: none !important;
  }
  .svc-app-card:hover .svc-app-card__bg { transform: none !important; }
}

/* Glass ligero coherente en dark */
.dark .spotlight-card,
.dark .product-card {
  border-color: var(--pui-glass-border-dark);
}

/* ─── 9. TABLAS TÉCNICAS ─────────────────────────────────── */
/* Tablas dentro del contenido: modernas, legibles, responsivas. */
main table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .875rem;
  line-height: 1.55;
}

main table th {
  font-weight: 800;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .08em;
}

main table th,
main table td {
  padding: .75rem 1rem;
  text-align: left;
}

main table tbody tr {
  border-bottom: 1px solid rgba(100, 116, 139, .16);
}

/* Scroll horizontal suave en móvil en lugar de desbordes */
@media (max-width: 720px) {
  main .overflow-x-auto table { min-width: 560px; }
  main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  main .overflow-x-auto table,
  main .overflow-x-auto { display: table; overflow: visible; }
  main div.overflow-x-auto { display: block; overflow-x: auto; }
}

/* ─── 10. FORMULARIOS ────────────────────────────────────── */
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="number"],
form select,
form textarea {
  border-radius: 12px;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="tel"]:focus,
form input[type="number"]:focus,
form select:focus,
form textarea:focus {
  outline: none;
  border-color: var(--pui-accent) !important;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, .18);
}

.dark form input[type="text"]:focus,
.dark form input[type="email"]:focus,
.dark form input[type="tel"]:focus,
.dark form input[type="number"]:focus,
.dark form select:focus,
.dark form textarea:focus {
  box-shadow: 0 0 0 3px rgba(234, 88, 12, .28);
}

form ::placeholder { opacity: .65; }

/* ─── 11. FOOTER SÓLIDO ──────────────────────────────────── */
footer {
  border-top-width: 1px !important;
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pui-accent), var(--pui-copper) 45%, transparent 90%);
  pointer-events: none;
}

footer a { transition: color 140ms ease; }

/* ─── 12. WHATSAPP FLOTANTE ──────────────────────────────── */
/* Pulso más sutil y menos frecuente; nunca tapa la barra móvil. */
@keyframes pui-wa-pulse {
  0%, 86%, 100% { transform: scale(1); }
  90% { transform: scale(1.045); }
  94% { transform: scale(1); }
}

.btn-wa-pulse,
.img-whatsapp-float {
  animation: pui-wa-pulse 6s ease-in-out infinite;
}

/* Icono WhatsApp del botón flotante: el glifo llegaba al borde del
   círculo (se veía desbordado). Con box-sizing el padding cuenta dentro
   de los 2.9rem, así el glifo queda holgado dentro de la pastilla. */
.img-whatsapp-float > .svg-icon {
  box-sizing: border-box;
  padding: 0.7rem !important;
}

@media (max-width: 768px) {
  /* La barra de acción móvil ocupa la parte inferior: subir flotantes */
  .img-whatsapp-float,
  a.btn-wa-pulse[class*="fixed"] {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ─── 13. MARQUEE / TICKER ───────────────────────────────── */
/* Pausar al pasar el cursor (desktop) — cortesía de lectura */
@media (hover: hover) and (pointer: fine) {
  .marquee-content:hover,
  section[aria-label="Clientes y Marcas"] :hover > .marquee-content {
    animation-play-state: paused;
  }
}

/* ─── 14. ENTRADAS ON-SCROLL CON STAGGER ─────────────────── */
/* Si la página usa .io-fade-up en grids, escalonar 50ms. */
.io-fade-up:nth-child(2) { transition-delay: 50ms; }
.io-fade-up:nth-child(3) { transition-delay: 100ms; }
.io-fade-up:nth-child(4) { transition-delay: 150ms; }
.io-fade-up:nth-child(5) { transition-delay: 200ms; }
.io-fade-up:nth-child(n+6) { transition-delay: 240ms; }

/* ─── 15. MÓVIL: APAGAR DECORACIÓN CARA ──────────────────── */
@media (max-width: 768px) {
  /* Drift infinito de fondos: invisible en móvil = GPU libre */
  .premium-hero::before,
  .premium-hero::after {
    animation: none !important;
  }

  /* Blur de cabecera aún más ligero en móvil */
  .img-main-header {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
}

/* ─── 16. PREFERS-REDUCED-MOTION ─────────────────────────── */
/* Menos y más suaves: se conservan fades de opacidad, se
   eliminan desplazamientos, zooms, pulsos e infinitas. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .io-fade-up,
  .pui-hero-enter {
    opacity: 1 !important;
    transform: none !important;
  }

  .btn-wa-pulse,
  .img-whatsapp-float,
  .premium-hero::before,
  .marquee-content {
    animation: none !important;
  }
}

/* ─── 17. CONTRASTE Y LEGIBILIDAD ────────────────────────── */
/* Suelo de contraste para texto secundario en dark */
.dark .text-gray-500 { color: #94A3B8 !important; }
.dark .text-gray-600 { color: #94A3B8 !important; }

/* Evitar títulos desbordados en pantallas pequeñas */
@media (max-width: 420px) {
  h1 { overflow-wrap: break-word; }
}

/* ─── 18. READING PROGRESS (inyectado por site.min.js) ───── */
.img-reading-progress {
  background: linear-gradient(90deg, var(--pui-accent), var(--pui-copper)) !important;
}

/* ─── 19. GUARDS DARK PARA ESTILOS INLINE HEREDADOS ──────── */
/* Algunas páginas (p. ej. productos/bandejas-hdpe) tienen cards con
   colores hardcodeados inline que las clases dark: de Tailwind no
   pueden vencer. Estos guards las adaptan al tema oscuro. */
.dark [style*="background:rgba(255,255,255,.85)"] {
  background: var(--pui-slate) !important;
  border-color: var(--pui-glass-border-dark) !important;
}

.dark [style*="background:#F6F7F2"] {
  background: rgba(255, 255, 255, .05) !important;
}

.dark [style*="color:#101820"] { color: #F9FAFB !important; }
.dark [style*="color:#374151"] { color: #CBD5E1 !important; }
.dark [style*="color:#4B5563"] { color: #B6C2D0 !important; }

/* ─── 20. REVEAL ON-SCROLL LIVIANO (pui) ─────────────────── */
/* El JS añade .pui-anim SOLO si hay IntersectionObserver y el
   usuario no pide reduced-motion → sin JS todo queda visible.
   Animación: transform + opacity, 60fps, sin layout. */
.pui-anim {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay: var(--pui-d, 0ms);
}

.pui-anim.pui-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .pui-anim {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── 21. PULIDO DE JERARQUÍA Y SECCIONES ────────────────── */
/* Kickers de sección: consistencia tipográfica en todo el sitio */
.svc-kicker,
.section-kicker,
.svc-cta-final__label {
  font-feature-settings: "tnum";
}

/* Cards blancas en modo claro: borde algo más definido para no
   "flotar" sobre fondos casi blancos */
html:not(.dark) .svc-intro__stat-card,
html:not(.dark) .svc-tech-item {
  border-color: rgba(11, 15, 20, .09);
}

/* Valores grandes de stats: legibles en ambos modos */
html:not(.dark) .svc-stat-item strong { color: #14532D; }

/* Inputs y selects: contraste mínimo garantizado en claro */
html:not(.dark) form select,
html:not(.dark) form input[type="number"],
html:not(.dark) form input[type="text"],
html:not(.dark) form input[type="email"],
html:not(.dark) form input[type="tel"] {
  color: #111827;
}

.dark form select,
.dark form input[type="number"],
.dark form input[type="text"],
.dark form input[type="email"],
.dark form input[type="tel"] {
  color: #F9FAFB;
}

/* Enlaces dentro de párrafos: subrayado visible y accesible */
main p a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(234, 88, 12, .5);
  transition: text-decoration-color 140ms ease;
}

main p a:not([class]):hover {
  text-decoration-color: var(--pui-accent);
}

/* ─── 22. HERO CARDS (index) — LEGIBLES EN AMBOS MODOS ───── */
/* Las cards del hero siempre están sobre la foto con overlay
   oscuro: en modo claro deben seguir siendo glass OSCURO con
   texto claro, nunca glass blanquecino con gris medio. */
html:not(.dark) .hero-card-item {
  background: rgba(8, 14, 11, .48) !important;
  border-color: rgba(255, 255, 255, .24) !important;
}

.hero-card-item {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Descripciones de las hero cards: claras en ambos modos */
.hero-card-item .text-gray-400,
html:not(.dark) .hero-card-item .text-gray-400 {
  color: rgba(255, 255, 255, .82) !important;
}

/* ─── 23. PANELES SIEMPRE-OSCUROS EN MODO CLARO ──────────── */
/* Secciones con .text-white en el contenedor (ISO de nosotros,
   panel info de contacto, paneles de resultados) son oscuras en
   ambos temas: su contenido debe seguir las reglas dark aunque
   el sitio esté en claro. */

/* Cards spotlight (Certificaciones ISO) — el override genérico
   de enhancements.css las volvía blancas con título blanco. */
html:not(.dark) .text-white .spotlight-card {
  background: rgba(255, 255, 255, .055) !important;
  border-color: rgba(255, 255, 255, .15) !important;
}

/* Texto secundario sobre paneles oscuros: contraste AA real */
html:not(.dark) .text-white .text-gray-400,
.dark .text-white .text-gray-400 {
  color: rgba(255, 255, 255, .78) !important;
}

html:not(.dark) .text-white .text-gray-500 {
  color: rgba(255, 255, 255, .66) !important;
}

/* Labels uppercase pequeños (Sede Central, WhatsApp / Llamadas):
   blancos puros para máxima jerarquía */
.text-white address h3 {
  color: #fff !important;
  letter-spacing: .14em;
}

/* ─── 24. CONTACTO (index #contacto) — PULIDO PREMIUM ────── */
/* Separación clara entre panel info y formulario */
#contacto .img-contact-wrap {
  box-shadow: 0 1px 2px rgba(2, 6, 12, .05),
              0 24px 64px -20px rgba(16, 24, 32, .22);
}

/* Título Contáctenos: presencia en ambos modos (el panel es
   oscuro siempre, así que blanco con sombra suave) */
#contacto .title-highlight {
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
}

/* Datos de contacto: texto y enlaces legibles, hover claro */
#contacto address .text-gray-400 { color: rgba(255, 255, 255, .80) !important; }
#contacto address a:hover { color: #fff !important; }

/* Iconos de contacto: feedback más nítido */
#contacto address .group:hover .shadow-glass {
  border-color: rgba(255, 255, 255, .35);
}

/* Inputs del formulario: hover sutil además del focus */
@media (hover: hover) and (pointer: fine) {
  #contacto input:not([type="hidden"]):hover,
  #contacto select:hover,
  #contacto textarea:hover {
    border-color: rgba(234, 88, 12, .45);
  }
}

/* ─── 25. FAQ DEL INDEX — MICROINTERACCIÓN ───────────────── */
.faq-accordion-header {
  transition: color 160ms ease, background-color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .faq-accordion-header:hover { color: var(--pui-accent); }
  .dark .faq-accordion-header:hover { color: #FB923C; }
}

.faq-accordion-header.active::after {
  background: rgba(234, 88, 12, .2);
}

.faq-item {
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.faq-item:has(.faq-accordion-header.active) {
  border-color: rgba(234, 88, 12, .35);
  box-shadow: 0 4px 20px rgba(16, 24, 32, .06);
}

@media (prefers-reduced-motion: reduce) {
  .faq-content { transition: none !important; }
}

/* ============================================================
   IMG CONSTRUMIN — PREMIUM v2.0 (2026-06-12)
   Identidad industrial · Textura · Profundidad · Jerarquía
   ============================================================ */

/* ─── 26. IDENTIDAD INDUSTRIAL — TEXTURA DE FONDO ────────────
   Patrón de puntos para secciones técnicas (dot grid).
   Visible pero sutil: 1px de radio, espaciado de 24px.      */
.svc-tech {
  background-image: radial-gradient(rgba(30, 41, 59, .06) 1px, transparent 1px);
  background-size: 24px 24px;
}
.dark .svc-tech {
  background-image: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 24px 24px;
}
.svc-timeline {
  background-image: radial-gradient(rgba(30, 41, 59, .045) 1px, transparent 1px);
  background-size: 20px 20px;
}
.dark .svc-timeline {
  background-image: radial-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Ruido SVG inline sutil en el CTA final oscuro */
.svc-cta-final {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.028'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #0B1F17 0%, #0d2318 50%, #071a12 100%);
  background-blend-mode: overlay, normal;
}

/* ─── 27. KICKER CON ACENTO VERTICAL ─────────────────────────
   Barra naranja de 3px a la izquierda del kicker de sección.
   Da carácter industrial técnico inmediato.                  */
.svc-kicker,
.section-kicker {
  position: relative;
  padding-left: 1rem;
}
.svc-kicker::before,
.section-kicker::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.35em;
  background: var(--pui-accent);
  border-radius: 2px;
  flex-shrink: 0;
}
/* Excepción: kickers centrados (svc-section-head) no llevan barra */
.svc-section-head .svc-kicker { padding-left: 0; }
.svc-section-head .svc-kicker::before { display: none; }

/* ─── 28. SUBRAYADO DE SECCIÓN — ACENTO TÉCNICO ──────────────
   Línea corta bajo H2 en secciones centradas.               */
.svc-section-head h2 {
  padding-bottom: .75rem;
  margin-bottom: .75rem;
  position: relative;
}
.svc-section-head h2::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 2.5rem;
  height: 3px;
  background: linear-gradient(90deg, var(--svc-accent) 0%, var(--svc-green-mid) 100%);
  border-radius: 2px;
}

/* ─── 29. ESTADÍSTICAS — DISPLAY TÉCNICO INDUSTRIAL ──────────
   Número grande con gradiente y tipografía tabular.         */
.svc-stat-item strong {
  font-size: 2.35rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--svc-green) 0%, #1A9A50 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  line-height: 1;
  margin-bottom: .3rem;
}
.dark .svc-stat-item strong {
  background-image: linear-gradient(135deg, var(--svc-green-mid) 0%, #4ADE80 100%);
}

/* ─── 30. HERO INDUSTRIAL — PROFUNDIDAD EXTRA ────────────────
   Resplandor radial naranja sutil en el extremo derecho.
   Anima solo transform/opacity; cero layout. */
.svc-hero__bg::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  background: radial-gradient(ellipse 70% 65% at 85% 30%,
    rgba(249, 115, 22, .12) 0%,
    transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* Badge premium mejorado: blur sutil */
.svc-hero__badge {
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
}

/* ─── 31. BENEFIT CARDS — BORDE ACENTO IZQUIERDO ────────────
   Solo en desktop; en móvil queda plano para ahorrar espacio. */
@media (min-width: 768px) {
  .svc-benefit-card {
    border-left: 3px solid transparent;
    transition: border-left-color 220ms ease,
                transform 220ms var(--ease-out),
                box-shadow 220ms var(--ease-out) !important;
  }
  @media (hover: hover) and (pointer: fine) {
    .svc-benefit-card:hover {
      border-left-color: var(--svc-green-mid) !important;
    }
    .dark .svc-benefit-card:hover {
      border-left-color: var(--svc-accent) !important;
    }
  }
}

/* ─── 32. CTA FINAL — BORDE SUPERIOR TÉCNICO ─────────────────
   Línea de 2px con gradiente naranja-verde sobre el CTA.   */
.svc-cta-final {
  position: relative;
  overflow: hidden;
}
.svc-cta-final::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--svc-green) 0%,
    var(--svc-accent) 45%,
    transparent 90%);
  pointer-events: none;
  z-index: 3;
}

/* ─── 33. NAVEGACIÓN — LINK CON UNDERLINE ANIMADO ────────────
   Línea inferior de 2px que crece desde 0 al hacer hover.
   Solo en desktop con puntero fino.                        */
@media (hover: hover) and (pointer: fine) {
  .img-nav-desktop a:not(.img-nav-cta):not(.img-nav-brand) {
    position: relative;
  }
  .img-nav-desktop a:not(.img-nav-cta):not(.img-nav-brand)::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--pui-accent);
    border-radius: 1px;
    transition: width 200ms var(--ease-out);
  }
  .img-nav-desktop a:not(.img-nav-cta):not(.img-nav-brand):hover::after {
    width: 100%;
  }
  html:not(.dark) #navbar.scrolled .img-nav-desktop a:not(.img-nav-cta):not(.img-nav-brand)::after {
    background: var(--svc-green);
  }
}

/* Active link: naranja en ambos modos */
.img-nav-desktop a.pui-nav-active,
.img-nav-desktop a[aria-current="page"] {
  color: var(--pui-accent) !important;
  font-weight: 700;
}
html:not(.dark) #navbar.scrolled .img-nav-desktop a.pui-nav-active,
html:not(.dark) #navbar.scrolled .img-nav-desktop a[aria-current="page"] {
  color: var(--svc-green) !important;
}

/* ─── 34. FOOTER INDUSTRIAL UPGRADE ──────────────────────────
   Gradiente oscuro más profundo + topografía de borde.     */
footer {
  background: linear-gradient(180deg, #06130F 0%, #03090A 100%) !important;
  border-top: 1px solid rgba(249, 115, 22, .15) !important;
}
footer::before {
  height: 2px !important;
  background: linear-gradient(90deg, var(--pui-accent) 0%, var(--pui-copper) 45%, transparent 80%) !important;
}
html:not(.dark) footer {
  background: linear-gradient(180deg, #0B1F17 0%, #051410 100%) !important;
}
@media (hover: hover) and (pointer: fine) {
  footer a:hover { color: var(--pui-teal) !important; }
}

/* ─── 35. PRODUCT CARD — FLECHA ANIMADA ──────────────────────
   La flecha del c-glass-card se desplaza +4px al hacer hover. */
.c-glass-card__action {
  transition: color 200ms ease;
}
.c-glass-card__action i,
.c-glass-card__action svg {
  transition: transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .c-glass-card:hover .c-glass-card__action i,
  .c-glass-card:hover .c-glass-card__action svg {
    transform: translateX(4px);
  }
}

/* ─── 36. HERO CARDS INDEX — HOVER TÉCNICO ───────────────────
   Cards flotantes del hero: presencia al hacer hover.      */
.hero-card-item {
  transition: transform 200ms var(--ease-out),
              background-color 200ms ease,
              border-color 200ms ease !important;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .hero-card-item:hover {
    transform: translateY(-4px) !important;
    background: rgba(8, 14, 11, .65) !important;
    border-color: rgba(255, 255, 255, .34) !important;
  }
}

/* ─── 37. TIMELINE MARKER — PULSE GLOW ───────────────────────
   El marcador numérico de timeline tiene halo sutil.       */
.svc-timeline__marker {
  box-shadow:
    0 0 0 4px rgba(31, 107, 69, .15),
    0 4px 16px rgba(31, 107, 69, .35) !important;
}

/* ─── 38. TABLAS TÉCNICAS — HEADER MEJORADO ──────────────────
   Thead con fondo tenue para mayor jerarquía visual.       */
main table thead tr {
  background: rgba(31, 107, 69, .06);
}
.dark main table thead tr {
  background: rgba(47, 168, 102, .08);
}

/* ─── 39. FORMS — FOCUS INDUSTRIAL ───────────────────────────
   Focus con doble anillo: exterior naranja, interior verde. */
form input:focus,
form select:focus,
form textarea:focus {
  box-shadow:
    0 0 0 3px rgba(234, 88, 12, .18),
    0 0 0 1px rgba(234, 88, 12, .45) !important;
}
.dark form input:focus,
.dark form select:focus,
.dark form textarea:focus {
  box-shadow:
    0 0 0 3px rgba(234, 88, 12, .28),
    0 0 0 1px rgba(234, 88, 12, .55) !important;
}

/* ─── 40. BREADCRUMB GLOBAL ──────────────────────────────────
   Estilos consistentes en todas las páginas.              */
nav[aria-label="Breadcrumb"] li { font-size: .78rem; }
nav[aria-label="Breadcrumb"] a {
  color: rgba(255,255,255,.68);
  text-decoration: none;
  transition: color 140ms ease;
}
nav[aria-label="Breadcrumb"] a:hover { color: #fff; }
html:not(.dark) nav[aria-label="Breadcrumb"] a { color: #6B7280; }
html:not(.dark) nav[aria-label="Breadcrumb"] a:hover { color: #111827; }

/* ─── 41. SCROLL PROGRESS BAR MEJORADA ───────────────────────
   Gradiente naranja-verde de marca.                       */
.img-reading-progress {
  height: 3px !important;
  background: linear-gradient(90deg,
    var(--svc-green) 0%,
    var(--pui-accent) 50%,
    var(--pui-copper) 100%) !important;
  box-shadow: 0 0 8px rgba(249, 115, 22, .45) !important;
}

/* ─── 42. ANIMACIONES — VARIANTES PUI ADICIONALES ────────────
   pui-anim-left: entra desde izquierda (para secciones hero side) */
.pui-anim-left {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay: var(--pui-d, 0ms);
}
.pui-anim-left.pui-in {
  opacity: 1;
  transform: translateX(0);
}
.pui-anim-right {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay: var(--pui-d, 0ms);
}
.pui-anim-right.pui-in {
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .pui-anim-left, .pui-anim-right {
    opacity: 1 !important; transform: none !important;
  }
}

/* ─── 43. MOBILE ACTION BAR — FONDO PROFUNDO ─────────────────
   Barra inferior móvil con mayor profundidad y blur.      */
.dark .img-mobile-action-bar,
.dark [class*="fixed bottom-0"] {
  background: rgba(3, 10, 7, .97) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
  border-top-color: rgba(255,255,255,.06) !important;
}
html:not(.dark) .img-mobile-action-bar,
html:not(.dark) [class*="fixed bottom-0"] {
  background: rgba(248, 250, 247, .97) !important;
  border-top-color: rgba(0,0,0,.08) !important;
}

/* ─── 44. UTILITY — USANDO MOUSE (FOCUS RING) ────────────────
   Oculta el focus ring en interacción con ratón.          */
body.pui-using-mouse *:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* ─── 45. PARITY — IMAGEN DE PRODUCTO CON OUTLINE ────────────
   Sombra de borde sutil en todas las imágenes de producto. */
.product-card img,
.svc-app-card__bg,
img[class*="hero"] {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10);
}
.dark .product-card img,
.dark .svc-app-card__bg {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

/* ─── 46. PICKERS Y CHECKBOXES TÉCNICOS ─────────────────────
   Checkbox y radio con color de marca.                    */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  accent-color: var(--pui-accent);
}

/* ─── 47. SECCIÓN "NOSOTROS" — STAT BADGES ──────────────────
   Números grandes en sección nosotros: mejor jerarquía.   */
html:not(.dark) #nosotros .text-4xl,
html:not(.dark) #nosotros .text-5xl {
  color: var(--svc-green) !important;
}
.dark #nosotros .text-4xl,
.dark #nosotros .text-5xl {
  color: var(--svc-green-mid) !important;
}

/* ─── 48. SVC-INTRO GRID — CARDS LATERAL MEJORADAS ──────────
   Línea de separación en las filas de stat-card.          */
.svc-intro__stat-card .svc-stat-item + .svc-stat-item {
  border-top: 1px solid rgba(100, 116, 139, .12);
  padding-top: 1rem;
}
.dark .svc-intro__stat-card .svc-stat-item + .svc-stat-item {
  border-top-color: rgba(255,255,255,.08);
}

/* ─── 49. PÁGINA BLOG/RECURSOS — ARTICLE CARDS ───────────────
   Cards de artículo: hover y borde acento.               */
article.card-hover,
.blog-card {
  border-radius: var(--pui-r-md);
  transition: transform 220ms var(--ease-out),
              box-shadow 220ms var(--ease-out),
              border-color 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
  article.card-hover:hover,
  .blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pui-shadow-2);
    border-color: rgba(249,115,22,.25) !important;
  }
}

/* ─── 50. SKIP LINK ACCESIBILIDAD ───────────────────────────
   Visible al recibir foco (teclado). Posición fija en top. */
a.pui-skip-link,
a[href="#main-content"]:not([class]) {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: .5rem 1.25rem;
  background: var(--pui-accent);
  color: #fff;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  font-size: .875rem;
  transition: top 180ms ease;
}
a.pui-skip-link:focus,
a[href="#main-content"]:not([class]):focus {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ─── 51. NAV DROPDOWN HOVER — bridge & timing fix ─────────── */
/*
   PROBLEMA: gap físico de ~0.55rem entre .img-nav-item y el panel
   (.img-services-menu usa top:calc(100%+.55rem)) + timer de cierre
   de 220ms en site.min.js. Si el cursor tarda >220ms en cruzar el
   gap, pointer-events:none se aplica antes de que llegue al panel.

   SOLUCIÓN CSS (capa 1 de 2):
   a) Pseudo-element ::after en .img-nav-item actúa como "puente"
      invisible — extiende el hitbox del ítem hacia abajo,
      cubriendo el gap. Mientras cursor esté en el puente, el
      .img-nav-item sigue recibiendo eventos → pointerleave NO dispara.
   b) Reducimos top del panel a 2px (mínimo visual necesario).
   c) El ::before del panel añade cobertura adicional desde arriba.
*/

@media (hover: hover) and (pointer: fine) {

  /* Contexto de posición para el puente */
  .img-nav-desktop .img-nav-item {
    position: relative !important;
  }

  /* Puente inferior — 20px cubre el gap con margen de seguridad */
  .img-nav-desktop .img-nav-item::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: -16px !important;
    right: -16px !important;
    height: 20px !important;
    pointer-events: auto !important;
    z-index: 119 !important;   /* debajo del menú (z:125) */
    background: transparent !important;
  }

  /* Reduce el gap de los paneles al mínimo visual */
  .img-services-menu {
    top: calc(100% + 2px) !important;
    margin-top: 0 !important;
  }

  /* Puente superior en el panel: cubre 20px arriba del panel,
     manteniendo pointer-events incluso durante el fade de cierre */
  .img-mega-menu::before,
  .img-services-menu::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: -20px !important;
    left: 0 !important;
    right: 0 !important;
    height: 20px !important;
    pointer-events: auto !important;
  }
}

/* Transición suavizada para abrir/cerrar (reemplaza la de site.min.css) */
.img-mega-menu,
.img-services-menu {
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease !important;
}

/* Cuando se abre: sin delay, instantáneo */
.img-nav-item.is-open .img-mega-menu,
.img-nav-item.is-open .img-services-menu {
  transition-delay: 0ms !important;
}

/* Cuando se cierra: dar 80ms de gracia adicional antes de ocultar */
.img-nav-item:not(.is-open) .img-mega-menu,
.img-nav-item:not(.is-open) .img-services-menu {
  transition-delay: 80ms !important;
}

/* ─── 52. NAV DROPDOWN KEYBOARD — estados de foco ───────────── */
/* Mejora visual cuando el menú se abre por teclado (focus-within) */
.img-nav-item:focus-within .img-mega-menu,
.img-nav-item:focus-within .img-services-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%) scale(1) !important;
  transition-delay: 0ms !important;
}

.img-mega-links a:focus-visible,
.img-services-menu a:focus-visible {
  outline: 2px solid var(--pui-accent) !important;
  outline-offset: 2px !important;
  background: rgba(234, 88, 12, .08) !important;
  color: #c2410c !important;
}

/* ============================================================
   IMG CONSTRUMIN — PREMIUM v3.0 (2026-06-12)
   REPALETIZACION: "Grafito - Teal Acero - Magma"
   Migra de verde-carbon calido (agricola) a un sistema
   industrial-premium de acero (mineria/ingenieria),
   conservando el naranja de conversion y sumando cobre.
   100% capa de override - sin tocar layout ni HTML.
   ============================================================ */

/* --- V3.1 TOKENS DE LA NUEVA PALETA --- */
:root {
  --g-base:   #03050B;
  --g-1:      #0C1219;
  --g-2:      #131B24;
  --g-3:      #1B2631;
  --g-hair:   rgba(170,186,202,.10);
  --g-hair-2: rgba(170,186,202,.16);

  --steel:        #14B8A6;
  --steel-bright: #2DD4BF;
  --steel-deep:   #0E8C7A;

  --copper:   #C28A5A;
  --copper-2: #A66B3C;

  --magma:      #F97316;
  --magma-deep: #EA580C;

  --svc-dark-bg:    #03050B;
  --svc-dark-card:  #0C1219;
  --svc-dark-card2: #131B24;
  --svc-green:      #0E8C7A;
  --svc-green-mid:  #2DD4BF;
  --pui-teal:       #14B8A6;
  --pui-deep-blue:  #0C1219;
}

/* --- V3.2 SUPERFICIES OSCURAS -> GRAFITO --- */
.dark [class~="bg-[#0B1F17]"],
.dark [class~="bg-[#0d2318]"],
.dark [class~="bg-[#0B132B]"],
.dark [class~="bg-[#0E131F]"],
.dark [class~="bg-[#060B1A]"] { background-color: var(--g-1) !important; }

[class~="bg-[#0B1F17]"],
[class~="bg-[#0d2318]"] { background-color: var(--g-1); }

[class~="bg-[#0B132B]"] { background-color: var(--g-1) !important; }

.dark #nosotros    { background: linear-gradient(to bottom right, #070B11, var(--g-1), #070B11) !important; }
.dark #calculadora { background: linear-gradient(to bottom, var(--g-1), var(--g-2)) !important; }
.dark #catalogo    { background: var(--g-2) !important; }

#nosotros .absolute.top-0    { background: rgba(20,184,166,.08) !important; }
#nosotros .absolute.bottom-0 { background: rgba(45,212,191,.06) !important; }

.dark .marquee-container { background-color: var(--g-1) !important; }

.dark [style*="#0B1F17"] { background-color: var(--g-1) !important; }
.dark [style*="#0d2318"] { background-color: var(--g-2) !important; }

[style*="#1F6B45"][style*="linear-gradient"] {
  background-image: linear-gradient(135deg, #070B11 0%, var(--steel-deep) 50%, #070B11 100%) !important;
}

/* --- V3.3 ACENTO PRIMARIO: EMERALD -> TEAL ACERO --- */
.bg-brand-primary { background-color: var(--steel) !important; }
.bg-brand-primary\/10 { background-color: rgba(20,184,166,.10) !important; }
.bg-brand-primary\/20 { background-color: rgba(20,184,166,.20) !important; }
.bg-brand-primary\/30 { background-color: rgba(20,184,166,.30) !important; }
.dark .text-brand-primary { color: var(--steel-bright) !important; }
.text-brand-primary { color: var(--steel-deep); }
.border-brand-primary { border-color: var(--steel) !important; }
.border-brand-primary\/20 { border-color: rgba(20,184,166,.20) !important; }
.border-brand-primary\/30 { border-color: rgba(20,184,166,.30) !important; }
.from-brand-primary { --tw-gradient-from: var(--steel) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(20,184,166,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-brand-primary   { --tw-gradient-to: var(--steel) var(--tw-gradient-to-position) !important; }
.via-brand-primary  { --tw-gradient-stops: var(--tw-gradient-from), var(--steel) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }

.bg-brand-bio { background-color: #1CC4A2 !important; }
.bg-brand-bio\/10 { background-color: rgba(28,196,162,.10) !important; }
.bg-brand-bio\/20 { background-color: rgba(28,196,162,.20) !important; }
.bg-brand-bio\/30 { background-color: rgba(28,196,162,.30) !important; }
.dark .text-brand-bio { color: #38E0BE !important; }
.text-brand-bio { color: #0E9C84 !important; }
.border-brand-bio { border-color: #1CC4A2 !important; }
.border-brand-bio\/20 { border-color: rgba(28,196,162,.20) !important; }
.border-brand-bio\/30 { border-color: rgba(28,196,162,.30) !important; }
.from-brand-bio { --tw-gradient-from: #1CC4A2 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(28,196,162,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }

.bg-brand-blue\/20 { background-color: rgba(12,18,25,.55) !important; }
.bg-brand-blue\/30 { background-color: rgba(12,18,25,.7) !important; }

.img-tech-table th { background: var(--steel-deep) !important; }
.dark .img-tech-table tr:nth-child(even) td { background: rgba(20,184,166,.05) !important; }
main table thead tr { background: rgba(20,184,166,.07) !important; }
.dark main table thead tr { background: rgba(45,212,191,.08) !important; }

/* --- V3.4 DETALLES DE COBRE + TEAL --- */
.svc-tech, .svc-timeline, #catalogo, #calculadora { border-top: 1px solid var(--g-hair); }
.svc-cta-final::before { background: linear-gradient(90deg, var(--steel) 0%, var(--copper) 45%, transparent 90%) !important; }
.dark footer { background: linear-gradient(180deg, var(--g-1) 0%, #05080C 100%) !important; }
footer::before { background: linear-gradient(90deg, var(--magma) 0%, var(--copper) 45%, transparent 82%) !important; }
@media (hover: hover) and (pointer: fine) { footer a:hover { color: var(--steel-bright) !important; } }

.img-reading-progress { background: linear-gradient(90deg, var(--steel) 0%, var(--magma) 55%, var(--copper) 100%) !important; }
.svc-timeline__marker { box-shadow: 0 0 0 4px rgba(20,184,166,.16), 0 4px 16px rgba(20,184,166,.32) !important; }

/* --- V3.5 CARDS - PROFUNDIDAD GRAFITO --- */
.dark .spotlight-card,
.dark .product-card,
.dark .svc-benefit-card,
.dark .svc-tech-item,
.dark .c-glass-card { background-color: rgba(255,255,255,.022); border-color: var(--g-hair-2); }
@media (hover: hover) and (pointer: fine) {
  .dark .spotlight-card:hover,
  .dark .product-card:hover,
  .dark .c-glass-card:hover { border-color: rgba(20,184,166,.30); }
}

/* --- V3.6 STAT NUMBERS - GRADIENTE TEAL --- */
.svc-stat-item strong {
  background: linear-gradient(135deg, var(--steel-deep) 0%, var(--steel) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dark .svc-stat-item strong { background-image: linear-gradient(135deg, var(--steel) 0%, var(--steel-bright) 100%); }
html:not(.dark) .svc-stat-item strong { color: #0E6F62; }

/* --- V3.7 SELECCION + FOCO TEAL --- */
::selection { background: rgba(20,184,166,.85); color: #04110E; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline-color: var(--steel-bright); }

/* --- V3.8 NAV UNDERLINE - TEAL EN OSCURO --- */
@media (hover: hover) and (pointer: fine) {
  .dark .img-nav-desktop a:not(.img-nav-cta):not(.img-nav-brand)::after { background: var(--steel-bright); }
}

/* --- V3.9 GRADIENT STOPS -> GRAFITO (utilities from/via/to) --- */
/* Tailwind setea --tw-gradient-from/to/via; los reasignamos por token. */
[class~="from-[#0B132B]"] { --tw-gradient-from: var(--g-1) var(--tw-gradient-from-position) !important; }
[class~="from-[#0B1F17]"] { --tw-gradient-from: var(--g-1) var(--tw-gradient-from-position) !important; }
[class~="to-[#071411]"]   { --tw-gradient-to: #070B11 var(--tw-gradient-to-position) !important; }
.from-brand-blue { --tw-gradient-from: var(--g-1) var(--tw-gradient-from-position) !important; }
.to-brand-blue   { --tw-gradient-to: var(--g-1) var(--tw-gradient-to-position) !important; }

.dark [class~="dark:from-[#0B132B]"] { --tw-gradient-from: var(--g-1) var(--tw-gradient-from-position) !important; }
.dark [class~="dark:from-[#0B1F17]"] { --tw-gradient-from: var(--g-1) var(--tw-gradient-from-position) !important; }
.dark [class~="dark:from-[#111827]"] { --tw-gradient-from: var(--g-2) var(--tw-gradient-from-position) !important; }
.dark [class~="dark:to-[#0d2318]"]   { --tw-gradient-to: var(--g-2) var(--tw-gradient-to-position) !important; }
.dark [class~="dark:to-[#071411]"]   { --tw-gradient-to: #070B11 var(--tw-gradient-to-position) !important; }
.dark [class~="dark:via-[#0d2318]"]  { --tw-gradient-via-position: ; --tw-gradient-stops: var(--tw-gradient-from), var(--g-2) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.dark [class~="dark:to-brand-blue"]  { --tw-gradient-to: var(--g-1) var(--tw-gradient-to-position) !important; }

/* --- V3.10 NUCLEO: TOKENS .dark + BODY (mata el lavado verde) --- */
/* El bloque .dark de site.min.css define la base verde-carbon en
   muchos tokens consumidos por body, surfaces y acentos. Los
   reasignamos a grafito + teal (mismo selector, gana por orden). */
.dark {
  --ic-bg: #06080C;
  --ic-bg-2: #0C1219;
  --ic-surface: rgba(12,18,25,.82);
  --img-bg: #06080C;
  --img-surface: rgba(12,18,25,.82);
  --img-surface-strong: #131B24;
  --img-accent: #14B8A6;
}

/* Body: base grafito + glow teal sutil (reemplaza radial verde) */
.dark body {
  background:
    radial-gradient(circle at 18% -5%, rgba(20,184,166,.06), transparent 22rem),
    #06080C !important;
}
body {
  background:
    radial-gradient(circle at 15% -5%, rgba(20,184,166,.045), transparent 20rem),
    linear-gradient(180deg, rgba(20,184,166,.022), transparent 18rem),
    var(--ic-bg) !important;
}

/* --- V3.11 TITULO HERO (text-clip) + HERO BG: corrige V3.2 --- */
/* Gradiente de texto verde (#1F6B45,#2FA866) -> teal brillante legible */
[style*="#2FA866"][style*="#1F6B45"],
[style*="#1F6B45"][style*="#2FA866"] {
  background-image: linear-gradient(to right, var(--steel-bright) 0%, #5EEAD4 100%) !important;
}
/* Fondo hero/seccion (#071411,#1F6B45,#071411) -> grafito sobrio */
[style*="#071411"][style*="#1F6B45"] {
  background-image: linear-gradient(135deg, #070B11 0%, #0C1219 50%, #070B11 100%) !important;
}

/* --- V3.12 NAV: tintes emerald/verde -> teal --- */
.img-mega-col { background: hsla(0,0%,100%,.05); }
.dark .img-mega-col { background: rgba(20,184,166,.04) !important; }
@media (hover: hover) and (pointer: fine) {
  .img-mega-col:hover { border-color: rgba(20,184,166,.30) !important; }
}
.dark .img-nav-shell { background: rgba(7,11,17,.72) !important; }
.dark .img-mega-menu, .dark .img-services-menu { background: rgba(9,13,19,.92) !important; }

/* Pildora/realce emerald (rgba(5,150,105)) -> teal en navegacion */
.dark .img-nav-desktop a[aria-current="page"],
.dark .img-mega-links a:hover {
  background: rgba(20,184,166,.10) !important;
  border-color: rgba(20,184,166,.22) !important;
}

/* --- V3.13 FIX CONTRASTE: titulo text-clip segun modo (WCAG) --- */
.dark [style*="#2FA866"][style*="#1F6B45"],
.dark [style*="#1F6B45"][style*="#2FA866"] {
  background-image: linear-gradient(to right, var(--steel-bright) 0%, #5EEAD4 100%) !important;
}
html:not(.dark) [style*="#2FA866"][style*="#1F6B45"],
html:not(.dark) [style*="#1F6B45"][style*="#2FA866"] {
  background-image: linear-gradient(to right, #0E8C7A 0%, #0B7D6C 100%) !important;
}

/* ============================================================
   HERO GEOMÉTRICO GLOBAL (.hg-)  — añadido 2026-06-15
   Convertido de componente 21st.dev a HTML/CSS puro (sin React).
   Usado en index.html y, vía variantes --photo/--left, en todas
   las páginas internas (productos/servicios/soluciones/etc).
   Paleta de marca: carbón #0B0F14, teal #14B8A6, cobre #C08552,
   azul #0C2D48, naranja #EA580C. Respeta prefers-reduced-motion.
   ============================================================ */
.hg-hero{position:relative;min-height:100svh;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#0B0F14}
.hg-ambient{position:absolute;inset:0;background:linear-gradient(135deg,rgba(20,184,166,.10),transparent 45%,rgba(192,133,82,.08));filter:blur(60px);pointer-events:none}
.hg-shapes{display:none!important}
.hg-fade-top{position:absolute;inset:0;background:linear-gradient(to top,#0B0F14 0%,transparent 28%,transparent 78%,rgba(11,15,20,.4) 100%);pointer-events:none;z-index:2}
.hg-inner{position:relative;z-index:10;width:100%;max-width:64rem;margin:0 auto;padding:0 1rem;text-align:center}
@media (min-width:768px){.hg-inner{padding:0 1.5rem}}

/* Formas elegantes: wrapper (entrada) > inner (flotación) > elipse (visual) */
.hg-shape{position:absolute;opacity:0;animation:hg-enter 2.2s cubic-bezier(.23,.86,.39,.96) forwards}
.hg-shape__float{animation:hg-float 12s ease-in-out infinite;will-change:transform}
.hg-shape__el{position:absolute;inset:0;border-radius:9999px;border:2px solid rgba(255,255,255,.12);backdrop-filter:blur(2px);box-shadow:0 8px 32px 0 rgba(0,0,0,.25)}
.hg-shape__el::after{content:"";position:absolute;inset:0;border-radius:9999px;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.16),transparent 70%)}

@keyframes hg-enter{0%{opacity:0;transform:translateY(-120px) rotate(var(--r-from))}100%{opacity:1;transform:translateY(0) rotate(var(--r))}}
@keyframes hg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(15px)}}

/* Entrada de contenido */
.hg-up{opacity:0;transform:translateY(28px);animation:hg-fadeup .9s cubic-bezier(.25,.4,.25,1) forwards}
@keyframes hg-fadeup{to{opacity:1;transform:translateY(0)}}
.hg-d1{animation-delay:.45s}.hg-d2{animation-delay:.6s}.hg-d3{animation-delay:.8s}.hg-d4{animation-delay:1s}

/* Badge */
.hg-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:9999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);margin-bottom:2rem}
.hg-badge__dot{width:.5rem;height:.5rem;border-radius:9999px;background:#C08552;box-shadow:0 0 10px rgba(192,133,82,.7);flex-shrink:0}
.hg-badge__txt{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72);font-weight:700}
@media (min-width:768px){.hg-badge{margin-bottom:2.5rem}}

/* Título */
.hg-title{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0 0 1.5rem;font-size:clamp(2.5rem,8vw,6rem);color:#fff}
.hg-title__1{display:block;background:linear-gradient(to bottom,#fff,rgba(255,255,255,.82));-webkit-background-clip:text;background-clip:text;color:transparent}
.hg-title__2{display:block;background:linear-gradient(90deg,#C08552,rgba(255,255,255,.92) 50%,#14B8A6);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (min-width:768px){.hg-title{margin-bottom:2rem}}

/* Descripción */
.hg-desc{font-size:clamp(1rem,2.2vw,1.25rem);color:rgba(255,255,255,.6);font-weight:300;line-height:1.7;letter-spacing:.01em;max-width:42rem;margin:0 auto 2rem;padding:0 1rem}

/* CTAs */
.hg-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}
@media (min-width:640px){.hg-cta{flex-direction:row}}
.hg-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:9999px;padding:.85rem 1.6rem;font-size:.95rem;font-weight:700;text-decoration:none;transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
.hg-btn:active{transform:scale(.96)}
.hg-btn--primary{background:#EA580C;color:#fff;box-shadow:0 8px 24px rgba(234,88,12,.35)}
.hg-btn--primary:hover{background:#F97316;box-shadow:0 10px 30px rgba(234,88,12,.5)}
.hg-btn--ghost{background:rgba(255,255,255,.05);color:#fff;border:1px solid rgba(255,255,255,.18)}
.hg-btn--ghost:hover{background:rgba(255,255,255,.10)}
.hg-btn svg{width:1.05em;height:1.05em;flex-shrink:0}

/* ---- Variante con FOTO temática de fondo (páginas internas) ---- */
.hg-hero--photo .hg-photo{position:absolute;inset:0;z-index:0;background-image:var(--hero-img);background-size:cover;background-position:center;transform:scale(1.06);filter:blur(1px) saturate(1.1) brightness(.85)}
.hg-hero--photo .hg-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,15,20,.28),rgba(11,15,20,.55)),linear-gradient(90deg,rgba(11,15,20,.66) 0%,rgba(11,15,20,.20) 50%,transparent 100%)}
.hg-hero--photo .hg-ambient{opacity:.5}

/* ---- Variante de contenido alineado a la izquierda (páginas internas) ---- */
.hg-inner--left{text-align:left;max-width:72rem}
.hg-inner--left .hg-desc{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
.hg-inner--left .hg-cta{justify-content:flex-start}
.hg-hero--compact{min-height:78svh}

/* ---- Indicadores / métricas reutilizables ---- */
.hg-metrics{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;margin-top:2.25rem}
.hg-inner:not(.hg-inner--left) .hg-metrics{justify-content:center}
.hg-metric{display:flex;flex-direction:column;line-height:1.2}
.hg-metric strong{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-size:1.35rem;font-weight:800;color:#fff}
.hg-metric span{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.55);margin-top:.15rem}

@media (prefers-reduced-motion:reduce){
  .hg-shape,.hg-up{animation:none;opacity:1;transform:none}
  .hg-shape__float{animation:none}
  .hg-hero--photo .hg-photo{transform:none}
}

/* ============================================================
   TUBELIGHT NAV (.tln-*) — añadido 2026-06-15
   Convertido de componente 21st.dev "tubelight-navbar" a CSS puro.
   Estilo "lámpara": indicador superior brillante sobre el ítem
   activo (página actual) y en hover, con píldora glass. Las clases
   .tln-item / .tln-active las aplica premium-enhancements.js a los
   ítems de primer nivel del nav de escritorio (ambas estructuras de
   header). La píldora usa inset negativo → NO altera el layout.
   ============================================================ */
.tln-item{position:relative;border-radius:9999px;transition:color .2s ease}
.tln-item::before{content:"";position:absolute;inset:-.5rem -.95rem;border-radius:9999px;background:transparent;transition:background-color .22s ease;z-index:0;pointer-events:none}
.tln-item:hover::before,.tln-item.tln-active::before{background:rgba(234,88,12,.10)}
/* La "lámpara": barra brillante en el borde superior con resplandor descendente */
.tln-item::after{content:"";position:absolute;top:-.62rem;left:50%;transform:translateX(-50%) scaleX(.45);width:34px;height:4px;border-radius:0 0 7px 7px;background:#F97316;opacity:0;transition:opacity .25s ease,transform .25s ease;box-shadow:0 0 12px 2px rgba(249,115,22,.55),0 6px 22px 6px rgba(249,115,22,.32);pointer-events:none;z-index:2}
.tln-item:hover::after,.tln-item.tln-active::after{opacity:1;transform:translateX(-50%) scaleX(1)}
/* Realce de color en el ítem activo (texto + icono) */
.tln-item.tln-active{color:#EA580C}
.dark .tln-item.tln-active{color:#FB923C}
.dark .tln-item:hover::before,.dark .tln-item.tln-active::before{background:rgba(251,146,60,.12)}
@media (prefers-reduced-motion:reduce){
  .tln-item::before,.tln-item::after{transition:none}
  .tln-item::after{transform:translateX(-50%) scaleX(1)}
}

/* ============================================================
   SECCIÓN CLIENTES (.cli-*) — añadido 2026-06-15
   Grilla de logos (21st.dev "customers-section" → CSS puro):
   entrada blur escalonada (al entrar en viewport, vía .cli-in que
   añade premium-enhancements.js) + hover del grupo que revela el
   enlace y difumina/atenúa los logos. A prueba de fallos: sin JS
   los logos quedan visibles. Logos reales en /images/responsive/.
   ============================================================ */
.cli-wrap{position:relative;margin:0 auto;max-width:64rem;padding:0 1.5rem}
.cli-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.25rem 2.5rem;margin:0 auto;max-width:42rem;align-items:center;transition:filter .5s var(--ease-out),opacity .5s var(--ease-out)}
@media (min-width:640px){.cli-grid{grid-template-columns:repeat(4,1fr);gap:3.25rem 3.5rem}}
.cli-item{display:flex;align-items:center;justify-content:center}
.cli-item img{height:auto;width:auto;max-height:42px;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.62;transition:opacity .4s ease,filter .4s ease}
.dark .cli-item img{filter:grayscale(1) invert(1) brightness(1.6);opacity:.72}
/* Hover del grupo: difumina/atenúa la grilla y revela el enlace */
.cli-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.95);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);pointer-events:none}
.cli-section:hover .cli-overlay,.cli-section:focus-within .cli-overlay{opacity:1;transform:scale(1);pointer-events:auto}
.cli-section:hover .cli-grid,.cli-section:focus-within .cli-grid{filter:blur(3px);opacity:.5}
.cli-overlay a{display:inline-flex;align-items:center;gap:.4rem;font-size:.95rem;font-weight:700;color:#EA580C;text-decoration:none;transition:opacity .15s ease}
.dark .cli-overlay a{color:#FB923C}
.cli-overlay a:hover{opacity:.75}
.cli-overlay svg{width:1em;height:1em}
/* Entrada blur escalonada (premium-enhancements.js añade .cli-ready y luego .cli-in) */
.cli-ready .cli-item{opacity:0}
.cli-in .cli-item{animation:cli-blurin .9s var(--ease-out) both;animation-delay:var(--cli-d,0ms)}
@keyframes cli-blurin{from{opacity:0;filter:blur(12px);transform:translateY(12px)}to{opacity:1;filter:none;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .cli-ready .cli-item{opacity:1}
  .cli-in .cli-item{animation:none}
  .cli-section:hover .cli-grid,.cli-section:focus-within .cli-grid{filter:none}
}

/* ============================================================
   LOGO CLOUD (.lgc-*) — slider infinito de marcas, reemplaza la
   grilla .cli-* en index. Traducción del componente React
   logo-cloud-3 (21st.dev) a HTML/CSS puro. Añadido 2026-06-15.
   Track con 2 sets duplicados → translateX -50% = loop sin saltos.
   Bordes desvanecidos con mask-image; pausa al hover (desktop).
   ============================================================ */
.lgc-head{max-width:48rem;margin:0 auto 1.5rem;padding:0 1.5rem;text-align:center}
.lgc-head h2{font-size:clamp(1.05rem,2.4vw,1.6rem);line-height:1.28;letter-spacing:-.01em;font-weight:600;margin:0}
.lgc-head .lgc-muted{display:block;color:#5b6b63;font-weight:500}
.dark .lgc-head .lgc-muted{color:#9aa6a0}
.lgc-head .lgc-strong{display:block;font-weight:800;color:#06130F}
.dark .lgc-head .lgc-strong{color:#F3F5F2}
.lgc-rule{height:1px;max-width:22rem;margin:1.15rem auto 0;background:linear-gradient(to right,transparent,rgba(16,24,32,.18),transparent)}
.dark .lgc-rule{background:linear-gradient(to right,transparent,rgba(255,255,255,.14),transparent)}
.lgc-mask{overflow:hidden;padding:1rem 0;-webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent)}
.lgc-track{display:flex;width:max-content;align-items:center;gap:clamp(2.5rem,6vw,4.5rem);animation:lgc-scroll 40s linear infinite;will-change:transform}
@media (hover:hover) and (pointer:fine){.lgc-mask:hover .lgc-track{animation-play-state:paused}}
.lgc-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.lgc-item img{height:auto;width:auto;max-height:38px;max-width:160px;object-fit:contain;filter:grayscale(1);opacity:.55;transition:opacity .35s ease,filter .35s ease}
.lgc-item img:hover{filter:grayscale(0);opacity:1}
.dark .lgc-item img{filter:grayscale(1) invert(1) brightness(1.7);opacity:.66}
.dark .lgc-item img:hover{opacity:1}
.lgc-cta{display:inline-flex;align-items:center;gap:.45rem;font-size:.95rem;font-weight:700;color:#EA580C;text-decoration:none;transition:gap .25s var(--ease-out),opacity .15s ease}
.dark .lgc-cta{color:#FB923C}
.lgc-cta:hover{opacity:.82;gap:.75rem}
.lgc-cta svg{width:1em;height:1em}
@keyframes lgc-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .lgc-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;max-width:64rem;margin:0 auto;row-gap:1.75rem}
  .lgc-item img{opacity:.8}
}

/* ============================================================
   CARRUSEL DE FONDO DEL HERO (.hg-slide) — añadido 2026-06-15
   premium-enhancements.js inyecta los slides dentro de .hg-photo
   a partir de data-hg-bg. Crossfade + Ken Burns sutil (zoom). El
   overlay/blur de .hg-photo y las formas/contenido quedan encima.
   ============================================================ */
.hg-photo.hg-photo--carousel{background-image:none}
.hg-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.5s ease;will-change:opacity}
.hg-slide.is-active{opacity:1}
.hg-slide.kb{animation:hg-kb 22s ease-in-out infinite alternate}
.hg-photo.hg-paused .hg-slide.kb{animation-play-state:paused}
@keyframes hg-kb{from{transform:scale(1.04)}to{transform:scale(1.16)}}
@media (prefers-reduced-motion:reduce){
  .hg-slide{transition:none}
  .hg-slide.kb{animation:none}
}

/* ============================================================
   RADIAL ORBITAL TIMELINE (.rot-*) — añadido 2026-06-15
   Adaptación vanilla (sin React) del componente radial-orbital
   a la paleta Grafito·Teal·Magma. premium-enhancements.js lee
   los .rot-node y los distribuye en órbita (desktop). En móvil /
   reduced-motion degrada a una grilla de tarjetas accesible.
   Modificador .rot--dark fuerza estética oscura sobre fondos
   oscuros independientemente del tema (secciones bg-brand-dark).
   ============================================================ */
.rot{
  --rot-surface:#ffffff;
  --rot-surface-2:#F6F7F2;
  --rot-border:rgba(11,15,20,.12);
  --rot-text:#0C1219;
  --rot-muted:#51606F;
  --rot-ring:rgba(11,15,20,.10);
  --rot-icon:var(--steel-deep);
  --rot-name:#1B2631;
  position:relative;
  margin:2rem auto 0;
}
.dark .rot,
.rot.rot--dark{
  --rot-surface:var(--g-2);
  --rot-surface-2:var(--g-1);
  --rot-border:rgba(170,186,202,.16);
  --rot-text:#F4F7FA;
  --rot-muted:#9FB0C0;
  --rot-ring:rgba(170,186,202,.16);
  --rot-icon:var(--steel-bright);
  --rot-name:#E7EEF4;
}

/* ── Modo base / fallback (móvil, sin JS, reduced-motion): tarjetas ── */
.rot:not(.is-orbital){
  display:grid;gap:1rem;max-width:60rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
}
.rot:not(.is-orbital) .rot-hub,
.rot:not(.is-orbital) .rot-ring{display:none}
.rot:not(.is-orbital) .rot-node{
  display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;align-items:start;
  background:var(--rot-surface);border:1px solid var(--rot-border);
  border-radius:18px;padding:1.15rem 1.3rem;
}
.rot:not(.is-orbital) .rot-dot{
  grid-row:1 / span 2;width:2.6rem;height:2.6rem;border-radius:.8rem;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--steel) 0%,var(--steel-deep) 100%);
  color:#fff;border:0;font-size:1rem;box-shadow:0 6px 16px rgba(20,184,166,.25);
}
.rot:not(.is-orbital) .rot-dot__idx{display:none}
.rot:not(.is-orbital) .rot-name{font-weight:800;font-size:.98rem;color:var(--rot-text);align-self:center}
.rot:not(.is-orbital) .rot-detail{display:block}
.rot:not(.is-orbital) .rot-detail__idx,
.rot:not(.is-orbital) .rot-detail__title{display:none}
.rot:not(.is-orbital) .rot-detail__text{margin:0;font-size:.9rem;line-height:1.55;color:var(--rot-muted)}

/* ── Modo órbita (desktop) ── */
.rot.is-orbital{
  display:block;position:relative;max-width:760px;width:100%;
  margin-left:auto;margin-right:auto;
  overflow:hidden;overflow:clip;   /* evita que nodos/paneles desborden y generen un 2º scrollbar */
}
.rot.is-orbital .rot-ring{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid var(--rot-ring);pointer-events:none;
  transition:opacity .4s ease;
}
.rot.is-orbital.rot--open .rot-ring{opacity:.4}

/* Núcleo central */
.rot.is-orbital .rot-hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 32% 28%,var(--steel-bright),var(--steel) 46%,var(--magma) 130%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 12px 42px rgba(20,184,166,.4),0 4px 14px rgba(249,115,22,.25);
  z-index:30;transition:opacity .4s ease;
}
.rot.is-orbital.rot--open .rot-hub{opacity:.14}
.rot.is-orbital .rot-hub__core{
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);
}
.rot.is-orbital .rot-hub__ping{
  position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.45);
  animation:rot-ping 2.6s cubic-bezier(0,0,.2,1) infinite;pointer-events:none;
}
.rot.is-orbital .rot-hub__ping--2{animation-delay:1.3s;border-color:rgba(249,115,22,.4)}
.rot.is-orbital .rot-hub__label{
  position:absolute;top:calc(100% + .85rem);left:50%;transform:translateX(-50%);
  white-space:nowrap;font-weight:900;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rot-name);transition:opacity .3s ease;
}
.rot.is-orbital .rot-hub__sub{
  position:absolute;top:calc(100% + 2.1rem);left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:.72rem;color:var(--rot-muted);transition:opacity .3s ease;
}
.rot.is-orbital.rot--open .rot-hub__label,
.rot.is-orbital.rot--open .rot-hub__sub{opacity:0}
@keyframes rot-ping{0%{transform:scale(1);opacity:.8}80%,100%{transform:scale(1.9);opacity:0}}

/* Nodos en órbita */
.rot.is-orbital .rot-node{
  position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;
  background:none;border:0;padding:0;
  transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .5s ease;
}
.rot.is-orbital .rot-dot{
  position:relative;width:3.25rem;height:3.25rem;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
  background:var(--rot-surface);color:var(--rot-icon);
  border:2px solid var(--rot-border);
  box-shadow:var(--pui-shadow-1);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .3s,border-color .3s,box-shadow .3s,color .3s;
}
.rot.is-orbital .rot-dot:hover{transform:scale(1.08);border-color:var(--steel)}
.rot.is-orbital .rot-dot:focus-visible{outline:2px solid var(--steel);outline-offset:3px}
.rot.is-orbital .rot-dot__idx{
  position:absolute;top:-.35rem;right:-.35rem;min-width:1.15rem;height:1.15rem;padding:0 .25rem;
  border-radius:999px;background:var(--magma);color:#fff;font-size:.62rem;font-weight:900;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(234,88,12,.4);
}
.rot.is-orbital .rot-name{
  margin-top:.6rem;font-size:.76rem;font-weight:700;letter-spacing:.02em;text-align:center;
  max-width:8.5rem;line-height:1.2;color:var(--rot-name);
  text-shadow:0 1px 6px rgba(0,0,0,.25);transition:opacity .3s ease;
}
.rot.is-orbital .rot-node.is-active .rot-dot{
  transform:scale(1.28);color:#fff;border-color:#fff;
  background:linear-gradient(135deg,var(--steel) 0%,var(--steel-deep) 70%,var(--magma) 160%);
  box-shadow:0 0 0 6px rgba(20,184,166,.18),0 14px 38px rgba(20,184,166,.45);
}
.rot.is-orbital .rot-node.is-active .rot-name{opacity:0}

/* Panel de detalle (se abre desde el nodo activo, anclado arriba/centro) */
.rot.is-orbital .rot-detail{
  position:absolute;top:calc(100% + 1.1rem);left:50%;width:min(19rem,76vw);
  transform:translateX(-50%) translateY(.5rem);
  background:var(--rot-surface);border:1px solid var(--rot-border);border-radius:18px;
  padding:1.15rem 1.25rem 1.25rem;text-align:left;
  box-shadow:var(--pui-shadow-3);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;pointer-events:none;z-index:40;
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,1,.36,1),visibility .4s;
}
.rot.is-orbital .rot-detail::before{
  content:"";position:absolute;top:-.7rem;left:50%;width:1px;height:.7rem;
  background:var(--rot-border);transform:translateX(-50%);
}
.rot.is-orbital .rot-node.is-active .rot-detail{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.rot.is-orbital .rot-detail__idx{
  display:inline-block;font-size:.7rem;font-weight:900;letter-spacing:.12em;
  color:var(--magma);margin-bottom:.4rem;
}
.rot.is-orbital .rot-detail__title{
  margin:0 0 .5rem;font-size:1.02rem;font-weight:800;line-height:1.25;color:var(--rot-text);
}
.rot.is-orbital .rot-detail__text{
  margin:0;font-size:.88rem;line-height:1.6;color:var(--rot-muted);
}

@media (prefers-reduced-motion:reduce){
  .rot.is-orbital .rot-node,
  .rot.is-orbital .rot-detail,
  .rot.is-orbital .rot-dot{transition:none}
  .rot.is-orbital .rot-hub__ping{animation:none}
}

/* ============================================================
   FIX TÍTULO .title-highlight — añadido 2026-06-15
   site.min.css aplica un gradiente (naranja→texto) como
   background-image !important pero nunca lo recorta al texto,
   por lo que se veía como una caja naranja/verde detrás del
   título. Aquí lo recortamos al glifo para que el degradado
   pinte solo las letras (1.ª mitad magma, resto color heredado).
   ============================================================ */
.title-highlight{
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  background-repeat:no-repeat;
  /* el degradado de site.min usa currentColor en la 2.ª mitad:
     se mantiene legible en claro/oscuro sin tocar el HTML */
}
/* En #contacto el panel es siempre oscuro: forzamos blanco como
   color heredado para que la 2.ª mitad del degradado sea blanca. */
#contacto .title-highlight{ color:#fff; }
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  /* Navegadores sin soporte: sin degradado, texto sólido visible. */
  .title-highlight{ -webkit-text-fill-color:currentColor; background-image:none !important; }
}

/* ============================================================
   GLOW BORDER (SPOTLIGHT) EN CARDS — añadido 2026-06-15
   Adaptado del componente "spotlight-card" (GlowCard, React
   21st.dev) a CSS/JS puro. premium-enhancements.js (sección 12)
   fija --pui-x/--pui-y en :root con un único listener global e
   inyecta un hijo .pui-glow-fx en cada card. Gracias a
   background-attachment:fixed, el aro de luz del borde se
   posiciona en coordenadas de viewport y "sigue" al cursor por
   toda la página: las cards cercanas se iluminan en su borde.
   Técnica de aro: borde transparente + máscara exclude (gradient
   border), sin depender de mask-composite:intersect.
   Solo desktop fine-pointer; respeta prefers-reduced-motion.
   Paleta v3: núcleo blanco → teal #14B8A6 → cobre #C08552.
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  .pui-glow{ position:relative; }

  .pui-glow-fx{
    position:absolute;
    inset:0;
    z-index:3;
    border-radius:inherit;
    pointer-events:none;
    /* el grosor del borde transparente = grosor del aro luminoso */
    border:1.5px solid transparent;
    /* el degradado-spotlight vive en el borde (clip a border-box) */
    background:
      radial-gradient(
        200px 200px at calc(var(--pui-x, -9999) * 1px) calc(var(--pui-y, -9999) * 1px),
        rgba(255,255,255,.92),
        rgba(20,184,166,.95) 16%,
        rgba(192,133,82,.45) 42%,
        transparent 66%
      ) border-box;
    background-attachment:fixed;
    /* recorta el relleno al aro del borde (gradient-border trick) */
    -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
            mask-composite:exclude;
    /* halo difuso para dar sensación de resplandor real */
    filter:drop-shadow(0 0 6px rgba(20,184,166,.35));
    will-change:background-position;
  }
}

@media (prefers-reduced-motion: reduce){
  .pui-glow-fx{ display:none !important; }
}

/* ============================================================
   CASE STUDIES / PROYECTOS DESTACADOS — añadido 2026-06-15
   Adaptación del componente React "Projects / Case Studies"
   (Framer Motion, 21st.dev) a HTML/CSS/JS puro. Interacciones
   en premium-enhancements.js (sección 13):
     · cuadrados flotantes con parallax al scroll + bob;
     · revelado "pixel-dissolve" en hover (grilla 12×8);
     · cuadrados magnéticos que siguen al cursor (solo desktop);
     · marquee horizontal infinito de sectores (pausa en hover).
   Re-paletizado al sistema v3 (teal · cobre · grafito) y con
   soporte de tema claro/oscuro. Prefijo de clases: cs-.
   ============================================================ */
.cs-section{ position:relative; overflow:hidden; }

/* — cuadrados flotantes del encabezado — */
.cs-squares{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.cs-sq{
  position:absolute; left:var(--x); top:var(--y);
  width:var(--s); height:var(--s);
  will-change:transform;
}
.cs-sq__b{
  display:block; width:100%; height:100%;
  background:var(--steel); opacity:.16;
  animation:cs-bob var(--bob,3s) ease-in-out infinite;
  animation-delay:var(--bd,0s);
}
.cs-sq:nth-child(even) .cs-sq__b{ background:var(--copper); opacity:.18; }
.dark .cs-sq__b{ opacity:.22; }
@keyframes cs-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

.cs-section .content-band__inner{ position:relative; z-index:1; }

/* — encabezado — */
.cs-head{ text-align:center; max-width:60rem; margin:0 auto 2.6rem; }
.cs-badge{
  display:inline-block; margin-bottom:1.15rem;
  background:var(--g-1,#1B2129); color:#fff;
  padding:.4rem 1rem; font-size:.8rem; font-weight:600; letter-spacing:.04em;
  border-radius:999px;
}
.dark .cs-badge{ background:var(--steel); color:#03050B; }
.cs-title{
  font-size:clamp(1.8rem,3.2vw,2.8rem); font-weight:300;
  line-height:1.25; letter-spacing:-.01em; margin:0;
}
.cs-title-soft{ opacity:.42; }

/* — grilla de tarjetas — */
.cs-grid{
  display:grid; gap:1rem; grid-template-columns:1fr;
  max-width:72rem; margin:0 auto;
}
@media (min-width:768px){ .cs-grid{ grid-template-columns:repeat(2,1fr); } }

.cs-card{
  position:relative; overflow:hidden; aspect-ratio:4/3;
  border-radius:var(--pui-radius,16px);
  background:#0c1219; isolation:isolate;
}
.cs-card__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; z-index:0;
  transition:transform .9s cubic-bezier(.22,1,.36,1);
}
.cs-card:hover .cs-card__img{ transform:scale(1.04); }

/* revelado pixel-dissolve (grilla 12×8) */
.cs-pixels{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.cs-px{
  position:absolute; width:calc(100%/12 + .6px); height:calc(100%/8 + .6px);
  background:rgba(6,12,20,.82); transform:scale(0); opacity:0;
  transform-origin:center;
  transition:transform .25s cubic-bezier(.22,1,.36,1), opacity .25s ease;
  transition-delay:var(--dout,0s);
}
.cs-card:hover .cs-px{
  transform:scale(1); opacity:1; transition-delay:var(--din,0s);
}

/* cuadrados magnéticos */
.cs-mags{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.cs-mag{
  position:absolute; left:var(--x); top:var(--y);
  width:var(--s); height:var(--s); background:#fff; opacity:.9;
  transform:translate3d(0,0,0);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
  will-change:transform;
}
.cs-mag:nth-child(3n+1){ background:var(--steel-bright); }
.cs-mag:nth-child(3n+2){ background:var(--copper); }

/* botón "+" */
.cs-plus{
  position:absolute; right:1rem; top:1rem; z-index:4;
  display:flex; align-items:center; justify-content:center;
  width:1.75rem; height:1.75rem;
  border:1px solid rgba(255,255,255,.35); color:#fff;
  font-size:.85rem; line-height:1; user-select:none;
}

/* placa de información */
.cs-plate{
  position:absolute; bottom:0; left:0; z-index:5; max-width:74%;
  background:#fff; color:#0c1219;
  padding:.6rem 1rem .75rem;
}
.dark .cs-plate{ background:var(--g-1,#11161d); color:#fff; }
.cs-plate__title{
  margin:0; font-size:clamp(1.3rem,2.2vw,1.95rem);
  font-weight:500; line-height:1.12;
}
.cs-plate__meta{ display:flex; gap:1rem; margin-top:.4rem; }
.cs-cat{ font-size:.78rem; opacity:.6; }
.cs-year{ font-size:.78rem; font-weight:600; color:var(--steel-deep); }
.dark .cs-year{ color:var(--steel-bright); }

/* — pie: copy + CTA + marquee — */
.cs-foot{
  display:flex; flex-direction:column; gap:2rem;
  max-width:72rem; margin:2.5rem auto 0;
}
@media (min-width:768px){
  .cs-foot{ flex-direction:row; align-items:flex-end; justify-content:space-between; }
}
.cs-foot__left{ max-width:30rem; }
.cs-plus--dark{
  position:static; margin-bottom:1rem;
  border-color:rgba(120,130,140,.4); color:inherit;
}
.cs-foot__copy{ font-size:.95rem; line-height:1.7; opacity:.65; margin:0; }
.cs-foot__cta{
  display:inline-flex; align-items:flex-end; gap:0; margin-top:1.5rem;
  text-decoration:none;
}
.cs-foot__cta-label{
  display:inline-flex; align-items:center; gap:.6rem;
  border:1px solid rgba(120,130,140,.35);
  background:var(--g-1,#1B2129); color:#fff;
  padding:.55rem .9rem; font-size:1rem; font-weight:500;
  transition:background .25s ease;
}
.dark .cs-foot__cta-label{ background:var(--steel); color:#03050B; }
.cs-foot__cta:hover .cs-foot__cta-label{ background:#000; }
.dark .cs-foot__cta:hover .cs-foot__cta-label{ background:var(--steel-bright); }
.cs-foot__arrow{
  display:flex; align-items:center; justify-content:center;
  width:1.5rem; height:1.5rem; margin-bottom:1.4rem;
  background:var(--g-1,#1B2129); color:#fff;
  transition:margin-bottom .3s cubic-bezier(.22,1,.36,1);
}
.dark .cs-foot__arrow{ background:var(--steel); color:#03050B; }
.cs-foot__cta:hover .cs-foot__arrow{ margin-bottom:2.1rem; }

.cs-foot__right{ flex:1; overflow:hidden; }
@media (min-width:768px){ .cs-foot__right{ margin-left:3rem; } }
@media (max-width:767px){ .cs-foot__right{ border-top:1px solid rgba(120,130,140,.18); padding-top:.5rem; } }
.cs-marquee{ overflow:hidden; padding:1.25rem 0; }
.cs-marquee__track{ display:flex; width:max-content; animation:cs-marquee 28s linear infinite; }
.cs-marquee:hover .cs-marquee__track{ animation-play-state:paused; }
.cs-logo{
  display:flex; flex-shrink:0; align-items:center; gap:.65rem; padding:0 2rem;
  font-size:.9rem; font-weight:500; letter-spacing:.02em; opacity:.8;
  white-space:nowrap;
}
.cs-logo i{ font-size:1rem; color:var(--steel-deep); }
.dark .cs-logo i{ color:var(--steel-bright); }
@keyframes cs-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

@media (prefers-reduced-motion:reduce){
  .cs-sq__b, .cs-marquee__track, .cs-card__img{ animation:none; transition:none; }
  .cs-px{ transition:none; transition-delay:0s; }
  .cs-mag{ transition:none; }
}

/* ============================================================
   BENTO GRID (.bnt-*) — añadido 2026-06-15
   Reemplaza las secciones "Ventajas" que usaban .rot por una
   grilla bento premium. Adaptación 100% vanilla (sin React /
   lucide / tailwind) del componente bento-grid 21st.dev a la
   paleta Grafito·Teal·Magma. Iconos FontAwesome (mismos que el
   rot). El modificador .bnt--dark fuerza estética oscura sobre
   fondos oscuros (secciones rot--dark heredadas). .bnt-item--wide
   ocupa 2 columnas en desktop; .bnt-item--feature mantiene el
   estado "hover" (patrón de puntos + borde glow) de forma fija.
   ============================================================ */
.bnt{
  --bnt-surface:#ffffff;
  --bnt-border:rgba(11,15,20,.12);
  --bnt-text:#0C1219;
  --bnt-muted:#51606F;
  --bnt-chip:rgba(11,15,20,.05);
  --bnt-icon:var(--steel-deep);
  --bnt-dot:rgba(11,15,20,.05);
  display:grid;gap:.85rem;grid-template-columns:1fr;
  max-width:72rem;margin:2rem auto 0;
}
.dark .bnt,
.bnt.bnt--dark{
  --bnt-surface:var(--g-2);
  --bnt-border:rgba(170,186,202,.16);
  --bnt-text:#F4F7FA;
  --bnt-muted:#9FB0C0;
  --bnt-chip:rgba(170,186,202,.10);
  --bnt-icon:var(--steel-bright);
  --bnt-dot:rgba(170,186,202,.05);
}
@media (min-width:768px){
  .bnt{grid-template-columns:repeat(3,1fr);gap:1rem}
  .bnt-item--wide{grid-column:span 2}
}

.bnt-item{
  position:relative;overflow:hidden;border-radius:18px;
  padding:1.25rem 1.35rem;
  background:var(--bnt-surface);
  border:1px solid var(--bnt-border);
  box-shadow:var(--pui-shadow-1);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease;
  will-change:transform;
}
/* patrón de puntos (capa hover) */
.bnt-item::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background-image:radial-gradient(circle at center,var(--bnt-dot) 1px,transparent 1px);
  background-size:4px 4px;transition:opacity .3s ease;
}
/* borde glow (gradient-border trick, mask-composite exclude) */
.bnt-item::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,transparent 0%,rgba(20,184,166,.45) 50%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s ease;
}
.bnt-item--feature::before{opacity:1}
.bnt-item--feature::after{opacity:1}
@media (hover:hover) and (pointer:fine){
  .bnt-item:hover{transform:translateY(-3px);box-shadow:var(--pui-shadow-3);border-color:rgba(20,184,166,.4)}
  .bnt-item:hover::before{opacity:1}
  .bnt-item:hover::after{opacity:1}
}

.bnt-item__inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:.85rem;height:100%}
.bnt-item__top{display:flex;align-items:center;justify-content:space-between}
.bnt-icon{
  width:2.5rem;height:2.5rem;border-radius:.8rem;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--bnt-chip);color:var(--bnt-icon);font-size:1.05rem;
  transition:background .3s ease,color .3s ease;
}
.bnt-item:hover .bnt-icon,
.bnt-item--feature .bnt-icon{
  background:linear-gradient(135deg,var(--steel) 0%,var(--steel-deep) 100%);color:#fff;
  box-shadow:0 6px 16px rgba(20,184,166,.25);
}
.bnt-badge{
  font-size:.7rem;font-weight:800;letter-spacing:.06em;font-variant-numeric:tabular-nums;
  padding:.32rem .6rem;border-radius:.6rem;background:var(--bnt-chip);color:var(--bnt-muted);
}
.bnt-item__title{margin:0;font-size:1.02rem;font-weight:800;line-height:1.25;color:var(--bnt-text)}
.bnt-item__text{margin:.45rem 0 0;font-size:.9rem;line-height:1.6;color:var(--bnt-muted)}

@media (prefers-reduced-motion:reduce){
  .bnt-item,.bnt-item::before,.bnt-item::after,.bnt-icon{transition:none}
}

/* ============================================================
   IMG CONSTRUMIN — FOOTER UNIFICADO (clases imgf-)  2026-06-15
   Adaptacion vanilla del componente React "footer-section"
   (shadcn/21st.dev). Footer unico, profesional, sector minero-
   agroindustrial. Paleta de marca (grafito + teal). Reemplaza el
   markup de <footer> en TODAS las paginas. Reveal blur-in en scroll.
   ============================================================ */
.imgf{
  position:relative; width:100%; overflow:hidden;
  background:var(--g-base,#03050B);
  color:#8b97a3;
  border-top:1px solid var(--g-hair,rgba(170,186,202,.10));
  font-family:"Inter","Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
.imgf::before{
  content:""; position:absolute; top:0; left:0; right:0; height:160px; pointer-events:none;
  background:radial-gradient(40% 160px at 50% 0%, rgba(20,184,166,.12), transparent 72%);
}
.imgf__topline{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:34%; height:1px; border-radius:9999px; filter:blur(.5px); pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(45,212,191,.75),transparent);
}
.imgf__inner{ position:relative; z-index:1; max-width:80rem; margin:0 auto; padding:4.5rem 1.5rem 2rem; }
@media(min-width:1024px){ .imgf__inner{ padding:5rem 2rem 2.25rem; } }

.imgf__grid{ display:grid; gap:3rem; }
@media(min-width:1024px){ .imgf__grid{ grid-template-columns:1.15fr 2fr; gap:4.5rem; } }
.imgf__cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.25rem 1.5rem; }
@media(min-width:768px){ .imgf__cols{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* Marca */
.imgf__logo{ display:inline-flex; align-items:center; gap:.75rem; text-decoration:none; }
.imgf__mark{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:2.6rem; height:2.6rem; border-radius:.85rem;
  background:linear-gradient(135deg,var(--steel,#14B8A6),var(--steel-deep,#0E8C7A));
  box-shadow:0 8px 22px rgba(20,184,166,.30);
}
.imgf__mark svg{ width:1.4rem; height:1.4rem; color:#fff; }
.imgf__name{ font-family:"Plus Jakarta Sans",sans-serif; font-weight:900; font-size:1.4rem; line-height:1; letter-spacing:-.02em; color:#fff; }
.imgf__name span{ display:block; margin-top:.28rem; font-size:.62rem; font-weight:600; letter-spacing:.34em; color:var(--steel-bright,#2DD4BF); }
.imgf__desc{ margin-top:1.4rem; max-width:36ch; font-size:.875rem; line-height:1.75; font-weight:300; color:#8b97a3; }
.imgf__social{ display:flex; gap:.6rem; margin-top:1.6rem; }
.imgf__social a{
  width:2.5rem; height:2.5rem; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.04); border:1px solid var(--g-hair-2,rgba(170,186,202,.16)); color:#c3ccd4;
  transition:transform .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease;
}
.imgf__social a svg{ width:1.05rem; height:1.05rem; }
.imgf__social a:hover{ color:#fff; background:var(--steel,#14B8A6); border-color:var(--steel,#14B8A6); transform:translateY(-3px); box-shadow:0 10px 22px rgba(20,184,166,.38); }

/* Columnas de enlaces */
.imgf__col h3{ font-family:"Plus Jakarta Sans",sans-serif; color:#fff; font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 1.2rem; }
.imgf__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.imgf__col a{ display:inline-flex; align-items:center; gap:.55rem; color:#8b97a3; font-size:.875rem; font-weight:300; text-decoration:none; transition:color .25s ease, transform .25s ease; }
.imgf__col a:hover{ color:var(--steel-bright,#2DD4BF); transform:translateX(3px); }
.imgf__col a svg{ width:.95rem; height:.95rem; flex-shrink:0; color:var(--steel,#14B8A6); }

/* Barra inferior */
.imgf__bottom{
  margin-top:3.25rem; padding-top:1.6rem; border-top:1px solid var(--g-hair,rgba(170,186,202,.10));
  display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:.7rem;
  font-size:.78rem; color:#6f7b86; text-align:center;
}
@media(min-width:768px){ .imgf__bottom{ flex-direction:row; text-align:left; } }
.imgf__tag{ letter-spacing:.04em; }
.imgf__tag b{ color:var(--steel-bright,#2DD4BF); font-weight:600; }

/* Reveal blur-in (replica AnimatedContainer) */
.imgf-anim{ opacity:0; transform:translateY(-8px); filter:blur(4px); transition:opacity .8s ease, transform .8s ease, filter .8s ease; transition-delay:var(--d,0s); }
.imgf-anim.imgf-in{ opacity:1; transform:none; filter:blur(0); }
@media (prefers-reduced-motion:reduce){ .imgf-anim{ opacity:1; transform:none; filter:none; transition:none; } }

/* Footer: el enlace WhatsApp NO debe convertirse en pastilla CTA verde
   (site.min.js le inyecta .img-whatsapp-cta). Se mantiene como link de texto. */
.imgf .img-whatsapp-cta,
.imgf__col a.img-whatsapp-cta{
  background:none!important; background-image:none!important; background-color:transparent!important;
  color:#8b97a3!important; padding:0!important; border:0!important; border-radius:0!important;
  box-shadow:none!important; font-weight:300!important; text-transform:none!important;
  letter-spacing:normal!important; display:inline-flex!important; width:auto!important;
  -webkit-text-fill-color:#8b97a3!important;
}
.imgf .img-whatsapp-cta:hover{ color:var(--steel-bright,#2DD4BF)!important; -webkit-text-fill-color:var(--steel-bright,#2DD4BF)!important; transform:translateX(3px)!important; }
.imgf .img-whatsapp-cta svg{ color:var(--steel,#14B8A6)!important; }

/* ============================================================
   AURORA HERO BG (.hg-hero) — añadido 2026-06-16
   Adaptación a CSS puro del componente "Aurora Background"
   (21st.dev / Aceternity). Cintas de luz fluyendo en la paleta
   de marca (teal #14B8A6 · #2DD4BF · cobre #C08552 · magma #EA580C)
   por encima de la foto del hero (.hg-photo z-index:0) y por
   debajo del viñeteado (.hg-fade-top z:2) y el contenido (z:10).
   Solo cambia el FONDO: la imagen del carrusel se mantiene.
   Dos capas (base + animada) con mix-blend:screen para simular
   la interferencia de luces; máscara radial al ángulo superior
   para que el centro/base queden limpios y legibles.
   ============================================================ */
.hg-hero::before,
.hg-hero::after{
  content:"";
  position:absolute;
  inset:-12%;
  z-index:1;
  pointer-events:none;
  will-change:transform;
  background-repeat:repeat;
  mix-blend-mode:screen;
  /* Cintas de aurora (color) con bandas oscuras superpuestas que
     las recortan en franjas — base-image dark sobre el degradado aurora */
  background-image:
    repeating-linear-gradient(100deg,#0B0F14 0%,#0B0F14 7%,transparent 10%,transparent 12%,#0B0F14 16%),
    repeating-linear-gradient(100deg,#14B8A6 10%,#2DD4BF 15%,#5EEAD4 20%,#C08552 25%,#EA580C 30%);
  -webkit-mask-image:radial-gradient(120% 85% at 78% 0%,#000 6%,transparent 66%);
  mask-image:radial-gradient(120% 85% at 78% 0%,#000 6%,transparent 66%);
}
/* Capa base: suave, ancha y difusa */
.hg-hero::before{
  opacity:.5;
  filter:blur(30px) saturate(1.18);
  background-size:300% 200%;
  background-position:50% 50%;
}
/* Capa animada: barrido lento que crea el flujo de la aurora */
.hg-hero::after{
  opacity:.42;
  filter:blur(22px) saturate(1.25);
  background-size:200% 100%;
  background-position:50% 50%;
  animation:hg-aurora 60s linear infinite;
}
@keyframes hg-aurora{
  from{background-position:50% 50%}
  to{background-position:350% 50%}
}
/* En la home (hero sin foto al inicio) realzamos un poco la aurora */
.hg-hero:not(.hg-hero--photo)::before{opacity:.6}
.hg-hero:not(.hg-hero--photo)::after{opacity:.5}
@media (prefers-reduced-motion:reduce){
  .hg-hero::after{animation:none}
}
/* En pantallas pequeñas reducimos blur/coste y mantenemos legibilidad */
@media (max-width:640px){
  .hg-hero::before{filter:blur(22px) saturate(1.15);opacity:.45}
  .hg-hero::after{filter:blur(16px) saturate(1.2);opacity:.36}
}

/* ============================================================
   FIX 2026-06-16 — .title-highlight: garantizar recorte al texto
   En biodigestores (y potencialmente otras) la cascada anulaba
   background-clip:text, por lo que el degradado (teal/cobre) se
   pintaba como CAJA detrás del texto naranja ("parte sombreada").
   Forzamos clip-to-text + fill transparente de forma determinista.
   ============================================================ */
.title-highlight{
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  background-repeat:no-repeat !important;
}
/* Navegadores sin soporte de background-clip:text: texto sólido visible. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .title-highlight{ -webkit-text-fill-color:currentColor !important; background-image:none !important; }
}

/* ============================================================
   FIX 2026-06-16 (biodigestores · modo claro)
   site.min.css fuerza en claro: html:not(.dark) .title-highlight{
   background:none; clip:unset; -webkit-text-fill-color:#F97316 !important }
   (especificidad 0-2-1). Pero el #id del título (regla scoped 0-2-0 con
   #beneficios = 1-2-0) mantenía el background-image teal => salía texto
   naranja sobre CAJA teal ("parte sombreada"). Restauramos el degradado
   teal recortado al glifo en claro con especificidad 0-3-1 (gana a 0-2-1).
   ============================================================ */
html:not(.dark) .page-biodigestores .title-highlight{
  background-image:linear-gradient(115deg,
    var(--bio-teal-deep,#0E8C7A) 0%,
    var(--bio-teal,#14B8A6) 42%,
    var(--bio-copper,#C28A5A) 100%) !important;
  background-repeat:no-repeat !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}