/* TECESA — estilos personalizados */

:root {
  --brand-800: #004464;
  --brand-700: #03467e;
  --brand-900: #002a40;
  --accent-500: #2ec4f4;
  --accent-400: #39c7f5;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
}

/* Header dinámico al hacer scroll */
#site-header {
  background: transparent;
  backdrop-filter: blur(0);
}

#site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 rgba(2, 27, 50, 0.06), 0 8px 30px -12px rgba(0, 68, 100, 0.18);
}

/* Antes del scroll, sobre el hero, los links se ven blancos */
#site-header:not(.is-scrolled) nav a,
#site-header:not(.is-scrolled) .header-cta-secondary {
  color: rgba(255, 255, 255, 0.92);
}
#site-header:not(.is-scrolled) nav a:hover,
#site-header:not(.is-scrolled) .header-cta-secondary:hover {
  color: var(--accent-500);
}
/* EXCEPCIÓN: los links del mobile-menu (fondo blanco) SIEMPRE oscuros — no importa el estado del header */
#site-header #mobile-menu nav a {
  color: #002a40 !important;   /* brand-800 */
}
#site-header #mobile-menu nav a:hover {
  color: var(--accent-500) !important;
}
/* El CTA cotizar del mobile menu sigue blanco (tiene bg oscuro) */
#site-header #mobile-menu nav a[href="#cotizar"] {
  color: #fff !important;
}

#site-header:not(.is-scrolled) #menu-toggle {
  color: white;
}

/* Logo: cuando aún no hay scroll lo invertimos para que se vea sobre fondo oscuro */
#site-header:not(.is-scrolled) a[aria-label="TECESA inicio"] img {
  filter: brightness(0) invert(1);
}

/* Animación sutil de entrada */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up {
  animation: fade-up 0.7s ease-out both;
}

/* WhatsApp pulse */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  70%  { box-shadow: 0 0 0 14px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

#whatsapp-fab {
  animation: pulse-ring 2.4s infinite;
}

/* Mejor focus accesible */
:focus-visible {
  outline: 3px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Tipografía display */
.font-display {
  letter-spacing: -0.01em;
}

/* Scrollbar más fina (Webkit) */
@media (min-width: 1024px) {
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: #f1f5f9; }
  ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 6px; }
  ::-webkit-scrollbar-thumb:hover { background: #64748b; }
}

/* Sin animación si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ====================================================== */
/*  HERO · efectos de cristal interactivos                  */
/* ====================================================== */
#hero-glass-fx {
  perspective: 1200px;
}

/* Caja del video del hero — altura FIJA por aspect-ratio real.
   El build de Tailwind self-hosted NO incluye la utilidad .aspect-square,
   así que sin esto el contenedor no tiene altura garantizada: al rotar el
   video cada 6s (v.load()) el <video> colapsa un instante y todo el
   contenido de abajo salta hacia arriba y regresa (bug visible en móvil). */
.hero-video-box {
  aspect-ratio: 1 / 1;
}
.hero-video-box > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video del hero — panel de vidrio flotante, mismo lenguaje que .glass-pane */
.hero-video-container {
  --r: 6deg;                             /* rotación base (como los otros glass) */
  position: absolute;
  top: 18%;
  right: 8%;
  width: min(360px, 48%);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 18px;
  z-index: 2;
  pointer-events: auto;                  /* padre #hero-glass-fx desactiva eventos */
  cursor: pointer;
  transform: rotate(var(--r));
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)),
    linear-gradient(45deg, rgba(46,196,244,0.18), rgba(57,199,245,0.06));
  box-shadow:
    0 20px 50px -18px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(46, 196, 244, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  animation: float-glass 10s ease-in-out infinite -1s;    /* mismo ritmo que los glass-pane */
  transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
  will-change: transform;
}
/* Borde brillante interno (tipo canto de vidrio) */
.hero-video-container::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 40%, rgba(46,196,244,0.25) 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}
/* Reflejo diagonal sutil, como los glass-panes */
.hero-video-container::after {
  content: '';
  position: absolute;
  top: -50%; left: -30%;
  width: 60%; height: 200%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.14) 50%, transparent 60%);
  transform: rotate(15deg);
  pointer-events: none;
  z-index: 4;
  transition: transform 0.9s ease;
}
.hero-video {
  border-radius: inherit;
}

/* ── Hover: se agranda un poquito (misma velocidad que los glass-panes flotando) ── */
.hero-video-container:hover {
  transform: rotate(calc(var(--r) - 2deg)) scale(1.05);
  animation-play-state: paused;                    /* pausa el float mientras interactúas */
  z-index: 15;
  box-shadow:
    0 30px 65px -20px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(46, 196, 244, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
.hero-video-container:hover::after {
  transform: translateX(180%) rotate(15deg);
}

@media (max-width: 1280px) {
  .hero-video-container { width: min(300px, 46%); right: 6%; }
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}
.hero-video-container::after {
  /* Sutil overlay para integrar con el color de marca */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(46,196,244,0.06) 0%, rgba(0,42,64,0) 40%),
    linear-gradient(0deg, rgba(0,42,64,0.25) 0%, rgba(0,42,64,0) 30%);
  pointer-events: none;
}
/* Si no hay video (src vacío o ausente), oculta todo el contenedor */
.hero-video-container:has(video:not([src])),
.hero-video-container:has(video[src=""]) {
  display: none;
}
/* Media dentro del glass-pane (video o imagen editable desde CMS).
   Vacío por defecto — si tiene contenido, muestra el media con opacidad
   media para conservar el look de "vidrio con reflejo del proyecto". */
.glass-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.glass-media img,
.glass-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.7;
  mix-blend-mode: luminosity;
  filter: saturate(0.85) brightness(1.05);
}
/* Cuando hay media, subo el shimmer para que se vea encima */
.glass-pane:has(.glass-media > img),
.glass-pane:has(.glass-media > video) {
  background: rgba(0, 42, 64, 0.15);
}

.glass-pane {
  position: absolute;
  border-radius: 22px;
  /* Base: tint azul + gradient, MÁS translúcido para dejar ver el fondo */
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 60%),
    linear-gradient(45deg, rgba(46,196,244,0.22), rgba(57,199,245,0.04));
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    0 40px 80px -25px rgba(0,20,50,0.55),
    0 8px 32px -8px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(46,196,244,0.2);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
  will-change: transform;
}
/* Reflejo diagonal fino tipo vidrio pulido */
.glass-pane::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Reflejo top-left (luz directa) */
    linear-gradient(135deg,
      rgba(255,255,255,0.28) 0%,
      rgba(255,255,255,0) 22%,
      transparent 100%),
    /* Reflejo bottom-right (rebote sutil) */
    linear-gradient(315deg,
      rgba(46,196,244,0.14) 0%,
      transparent 40%);
  opacity: 0.9;
  pointer-events: none;
}
/* Textura sutil de reflejos diagonales — la esencia del vidrio pulido */
.glass-pane::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.05) 0 32px,
      transparent 32px 64px);
  opacity: 0.5;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Shimmer profesional: pasa una banda de luz brillante como reflejo real */
.glass-shimmer {
  position: absolute;
  top: -20%;
  left: -50%;
  width: 60%;
  height: 140%;
  background: linear-gradient(115deg,
    transparent 40%,
    rgba(255,255,255,0.6) 48%,
    rgba(255,255,255,0.9) 50%,
    rgba(255,255,255,0.6) 52%,
    transparent 60%);
  transform: translateX(0) rotate(15deg);
  animation: shimmer 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  mix-blend-mode: screen;
  filter: blur(1px);
}
@keyframes shimmer {
  0%   { transform: translateX(0) rotate(15deg); }
  55%  { transform: translateX(400%) rotate(15deg); }
  100% { transform: translateX(400%) rotate(15deg); }
}
@keyframes float-glass {
  0%, 100% { transform: translateY(0) rotate(var(--r,6deg)); }
  50%      { transform: translateY(-18px) rotate(calc(var(--r,6deg) + 1.5deg)); }
}

/* Cada glass-pane con un tint distinto (simulando tipos de vidrio) */
.glass-pane-1 {
  width: 340px; height: 460px; top: 6%;  right: -50px; --r: 8deg;
  transform: rotate(8deg);
  animation: float-glass 9s ease-in-out infinite;
  /* Templado — más claro y pulido */
}
.glass-pane-2 {
  width: 250px; height: 340px; top: 28%; right: 290px; --r: -5deg;
  transform: rotate(-5deg);
  animation: float-glass 11s ease-in-out infinite -2s;
  /* Low-E — tint verde-azul sutil */
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 60%),
    linear-gradient(45deg, rgba(52,211,153,0.14), rgba(46,196,244,0.08));
}
.glass-pane-3 {
  width: 200px; height: 260px; top: 56%; right: 50px; --r: 12deg;
  transform: rotate(12deg);
  animation: float-glass 7s ease-in-out infinite -4s;
  /* Insulado — más azulado */
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 60%),
    linear-gradient(45deg, rgba(59,130,246,0.18), rgba(46,196,244,0.08));
}
.glass-pane-4 {
  width: 155px; height: 200px; top: 10%; right: 330px; --r: -10deg;
  transform: rotate(-10deg);
  animation: float-glass 8s ease-in-out infinite -1s;
  opacity: 0.9;
}
.glass-pane-5 {
  width: 115px; height: 155px; top: 60%; right: 400px; --r: 18deg;
  transform: rotate(18deg);
  animation: float-glass 6s ease-in-out infinite -3s;
  opacity: 0.95;
}

.glass-shimmer { animation-delay: var(--shim, 0s); }
.glass-pane-2 .glass-shimmer { animation-delay: 2s; }
.glass-pane-3 .glass-shimmer { animation-delay: 4s; }
.glass-pane-4 .glass-shimmer { animation-delay: 1s; }
.glass-pane-5 .glass-shimmer { animation-delay: 3s; }

/* Interacción — hover sube ligeramente el panel */
.glass-pane:hover {
  transform: translateY(-8px) rotate(var(--r,6deg));
}
.glass-pane-3 .glass-shimmer { animation-delay: 2s; }
.glass-pane-4 .glass-shimmer { animation-delay: 0.5s; }
.glass-pane-5 .glass-shimmer { animation-delay: 1.5s; }

/* Pequeños destellos (sparks) */
.glass-spark {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 12px 3px rgba(46,196,244,0.85);
  animation: spark 3.5s ease-in-out infinite;
}
@keyframes spark {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50%      { opacity: 1; transform: scale(1.2); }
}
.glass-spark-1 { top: 18%; right: 22%; animation-delay: 0s; }
.glass-spark-2 { top: 45%; right: 8%;  animation-delay: 0.7s; }
.glass-spark-3 { top: 70%; right: 28%; animation-delay: 1.4s; }
.glass-spark-4 { top: 28%; right: 54%; animation-delay: 2.1s; }
.glass-spark-5 { top: 80%; right: 60%; animation-delay: 2.8s; }

/* Líneas de refracción */
.glass-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.gline {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: glide 6s ease-in-out infinite;
}
.gline-2 { animation-delay: 1.5s; }
.gline-3 { animation-delay: 3s; }
@keyframes glide {
  0%   { stroke-dashoffset: 600; }
  60%  { stroke-dashoffset: 0;   opacity: 1; }
  100% { stroke-dashoffset: -600; opacity: 0; }
}

/* Mapa de cobertura — anillo pulsante */
@keyframes pulse-soft {
  0%   { transform: scale(1);   opacity: 0.5; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(1);   opacity: 0; }
}
.pulse-ring  { transform-origin: center; transform-box: fill-box; animation: pulse-soft 2.4s infinite; }
.pulse-ring-2 { transform-origin: center; transform-box: fill-box; animation: pulse-soft 2.4s infinite 0.8s; }

/* Puntos de cobertura aparecen escalonados */
.cobertura-puntos circle {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: fade-up 0.6s ease-out forwards;
}
.cobertura-puntos circle:nth-child(1) { animation-delay: 0.1s; }
.cobertura-puntos circle:nth-child(2) { animation-delay: 0.2s; }
.cobertura-puntos circle:nth-child(3) { animation-delay: 0.3s; }
.cobertura-puntos circle:nth-child(4) { animation-delay: 0.4s; }
.cobertura-puntos circle:nth-child(5) { animation-delay: 0.5s; }
.cobertura-puntos circle:nth-child(6) { animation-delay: 0.6s; }
.cobertura-puntos circle:nth-child(7) { animation-delay: 0.7s; }
.cobertura-puntos circle:nth-child(8) { animation-delay: 0.8s; }
.cobertura-puntos circle:nth-child(9) { animation-delay: 0.9s; }
.cobertura-puntos circle:nth-child(10){ animation-delay: 1.0s; }
.cobertura-puntos circle:nth-child(11){ animation-delay: 1.1s; }
.cobertura-puntos circle:hover { fill: white; r: 8; cursor: pointer; }

/* Simulador de vidrios — botón activo */
.sim-btn.is-active {
  border-color: var(--accent-500);
  background: linear-gradient(135deg, rgba(46,196,244,0.08), rgba(46,196,244,0.02));
  box-shadow: 0 0 0 3px rgba(46,196,244,0.18);
}

/* Filtro de productos — Vidrios / Herrajes */
.prod-tab { color: #475569; }
.prod-tab:hover { color: #002a40; }
.prod-tab.is-active {
  background: #ffffff;
  color: #002a40;
  box-shadow: 0 1px 3px rgba(11,31,58,0.14);
}

/* Antes / Durante / Después — comparador simple en páginas de proyecto */
.project-stage {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
}
.project-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-stage .stage-label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.35rem 0.85rem;
  background: rgba(0, 68, 100, 0.92);
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

/* ====================================================== */
/*  CHAT INTERACTIVO DE COTIZACIÓN                          */
/* ====================================================== */
#chat-log { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
#chat-log::-webkit-scrollbar { width: 4px; }
#chat-log::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

@keyframes fadein {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fadein { animation: fadein .32s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Puntitos del "escribiendo…" */
.typing-indicator .dot {
  height: 6px; width: 6px; background: #94a3b8; border-radius: 50%;
  display: inline-block; animation: dot 1.2s infinite ease-in-out;
}
.typing-indicator .dot:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Opciones multi-select activadas */
.chat-multi.is-active {
  border-color: #0aa5d9;
  background: linear-gradient(135deg, #f0f9ff, #dbeafe);
  color: #002a40;
}

/* Chat responsive: en mobile la altura se adapta */
@media (max-width: 640px) {
  #lead-chat { min-height: 480px !important; }
  #chat-log { max-height: 320px !important; padding: 1rem !important; }
  #chat-input-zone { padding: 0.75rem 1rem !important; }
}

/* En móviles muy pequeños (iPhone SE ancho 375px) el video del hero
   puede molestar. Lo achicamos y ponemos más abajo. */
@media (max-width: 640px) {
  .hero-video-container {
    top: 65%;
    right: 4%;
    width: min(180px, 40%);
  }
}
/* Botones apilados en mobile del hero de #productos + finder */
@media (max-width: 640px) {
  section#productos [data-catalogo-link],
  section#productos a[href="finder.php"] {
    justify-content: center;
    width: 100%;
  }
}

/* ====================================================== */
/*  GALERÍA — carrusel horizontal snap                      */
/* ====================================================== */
.galeria-carousel {
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.galeria-carousel::-webkit-scrollbar { display: none; }

.galeria-carousel .galeria-slide {
  width: 85vw;
  max-width: 340px;
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
}
@media (min-width: 640px) {
  .galeria-carousel .galeria-slide { width: 340px; max-width: none; }
}
@media (min-width: 1024px) {
  .galeria-carousel .galeria-slide { width: 380px; }
}

/* ====================================================== */
/*  LIGHTBOX (galería + otros)                             */
/* ====================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(2, 10, 25, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 220ms ease;
}
.lightbox.is-open {
  display: flex;
  opacity: 1;
}
.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 0.75rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.96);
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lightbox.is-open img { transform: scale(1); }
.lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  height: 42px;
  width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.25); transform: scale(1.06); }
body.lightbox-open { overflow: hidden; }

/* ====================================================== */
/*  OBRAS — carrusel horizontal snap                        */
/* ====================================================== */
.obras-carousel {
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.obras-carousel::-webkit-scrollbar { display: none; }

.obras-carousel .obra-slide {
  width: 85vw;
  max-width: 340px;
}
@media (min-width: 640px) {
  .obras-carousel .obra-slide { width: 340px; max-width: none; }
}
@media (min-width: 1024px) {
  .obras-carousel .obra-slide { width: 380px; }
}

/* ====================================================== */
/*  MODAL OBRA — detalles del proyecto sin navegación      */
/* ====================================================== */
.obra-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 220ms ease;
}
.obra-modal.is-open { display: flex; opacity: 1; }
.obra-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 22, 48, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.obra-modal-container {
  position: relative;
  width: 100%;
  max-width: 960px;
  max-height: 92vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.5);
  transform: translateY(20px) scale(0.98);
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.obra-modal.is-open .obra-modal-container {
  transform: translateY(0) scale(1);
}
.obra-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  height: 40px;
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.95);
  color: #0f2544;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease;
}
.obra-modal-close:hover { transform: scale(1.08); background: #fff; }
body.obra-modal-open { overflow: hidden; }

/* ====================================================== */
/*  MODAL CHAT — flotante al clickear "Cotizar" en card    */
/* ====================================================== */
.chat-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 220ms ease;
}
.chat-modal.is-open {
  display: flex;
  opacity: 1;
}
.chat-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 22, 48, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.chat-modal-container {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 1rem;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.45);
  transform: translateY(20px) scale(0.98);
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chat-modal.is-open .chat-modal-container {
  transform: translateY(0) scale(1);
}
.chat-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  height: 36px;
  width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.9);
  color: #0f2544;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease;
}
.chat-modal-close:hover { transform: scale(1.06); background: #fff; }
/* Cuando el chat esta dentro del modal, ajustar sus estilos */
.chat-modal #lead-chat {
  min-height: 520px;
  width: 100%;
}
/* Cuerpo bloqueado (sin scroll) mientras modal esta abierto */
body.chat-modal-open { overflow: hidden; }

/* Móvil: el modal se pega abajo tipo "bottom sheet" y usa dvh (viewport
   dinámico) — con el teclado del iPhone abierto, vh clásico dejaba el
   input de escribir tapado por el teclado. */
@supports (height: 100dvh) {
  .chat-modal-container { max-height: 92dvh; }
}
@media (max-width: 640px) {
  .chat-modal { align-items: flex-end; padding: 0; }
  .chat-modal-container {
    max-width: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .chat-modal #lead-chat { min-height: 0; }
}

/* ====================================================== */
/*  MENÚ MOBILE — apertura suave (fade + slide)            */
/* ====================================================== */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    max-height 320ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 200ms ease,
    transform 250ms ease;
  pointer-events: none;
}
.mobile-menu.is-open {
  max-height: 600px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ====================================================== */
/*  MARQUEE — solo mobile (desktop = grid estatico)        */
/* ====================================================== */
.marquee .marca-item {
  flex-shrink: 0;
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);   /* default: fondo oscuro del hero (banda mobile) */
  text-align: center;
  white-space: nowrap;
}

/* Banda de marcas debajo del hero (fondo blanco) — color oscuro */
.marcas-desktop-bar .marca-item {
  color: #94a3b8;   /* slate-400 sobre bg-white */
}
/* Mobile: mas compacto */
@media (max-width: 639px) {
  .marcas-desktop-bar .marca-item {
    font-size: 0.7rem !important;
    letter-spacing: 0.08em !important;
    font-weight: 500 !important;
  }
  .marcas-desktop-bar { padding: 0.25rem 0; }
}
/* Desktop: grid estatico normal */
@media (min-width: 640px) {
  .marcas-desktop-bar .marca-item {
    font-size: 1rem;
  }
}

/* Mobile y tablet (<1024px): marquee auto-scroll.
   Antes cortaba en 640px, pero el grid de 7 columnas apretaba nombres
   largos ("SAINT GOBAIN") entre 640-1100px y se encimaban. */
@media (max-width: 1023px) {
  .marquee {
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  .marquee-track {
    display: flex;
    gap: 3rem;
    width: max-content;
    animation: marquee-scroll 32s linear infinite;
    will-change: transform;
  }
  .marquee-track:hover { animation-play-state: paused; }
}

/* Desktop (>=1024px): grid estatico centrado, sin animacion, clones ocultos */
@media (min-width: 1024px) {
  .marquee {
    max-width: 80rem;    /* max-w-7xl */
    margin: 0 auto;
    padding: 0 1.5rem;
  }
  .marquee-track {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: center;
    animation: none;
    width: auto;
  }
  .marquee-track [aria-hidden="true"] { display: none; }   /* ocultar clones en desktop */
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  /* Sin animación el contenido quedaba cortado (overflow hidden): permitir
     scroll manual para que todas las marcas sigan siendo accesibles. */
  .marquee-track { animation: none; width: auto; }
  .marquee { overflow-x: auto; }
  .certs-marquee-track { animation: none; width: auto; }
  .certs-marquee-wrap { overflow-x: auto; }
}

/* iOS hace ZOOM forzado al enfocar inputs con fuente <16px — en el chat de
   cotización (flujo principal de leads) eso ampliaba y descuadraba todo. */
@media (max-width: 640px) {
  #chat-input-zone input,
  #chat-input-zone textarea {
    font-size: 16px;
  }
}

/* FAB de WhatsApp: en móvil se oculta mientras el chat está en pantalla o
   abierto como modal — se encimaba sobre el botón de enviar del chat. */
#whatsapp-fab { transition: opacity 0.2s ease, transform 0.2s ease; }
@media (max-width: 640px) {
  body.chat-inview #whatsapp-fab,
  body.chat-modal-open #whatsapp-fab {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
  }
}

/* ====================================================== */
/*  CERTIFICACIONES — marquee auto en mobile, grid en desktop */
/* ====================================================== */
/* Desktop: grid normal (2/4 columnas), clones ocultos */
@media (min-width: 640px) {
  .certs-marquee-wrap { display: grid; }
  .certs-marquee-track { display: contents; }   /* hace que los cards se conviertan en items del grid padre */
  .certs-marquee-track .cert-clone { display: none; }
}
/* Mobile: marquee horizontal */
@media (max-width: 639px) {
  .certs-marquee-wrap {
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  .certs-marquee-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: marquee-scroll 40s linear infinite;
    will-change: transform;
  }
  .certs-marquee-track:hover { animation-play-state: paused; }
  .certs-marquee-track .cert-card {
    flex-shrink: 0;
    width: 78vw;
    max-width: 300px;
  }
}