/* ============================================================
   Leizer — estilos exclusivos de la landing (index.html)
   Hero, marquee, servicios, galería, ecosistema, proceso,
   envíos, contacto, modales y chat.
   El sistema compartido vive en css/leizer-core.css
   ============================================================ */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex; align-items: center;
  padding-block: clamp(7rem, 5rem + 8vw, 10rem) clamp(3.5rem, 2rem + 5vw, 6rem);
  background: var(--dark);
  color: #f2f4fa;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* Aurora: dos manchas de marca que se mueven muy despacio.
   Azul y naranja separados, nunca superpuestos, para no generar malva. */
.hero-aurora { position: absolute; inset: -20%; filter: blur(90px); opacity: .5; }
.hero-aurora::before, .hero-aurora::after {
  content: ''; position: absolute; border-radius: 50%;
}
.hero-aurora::before {
  width: 48vw; height: 48vw; left: -6%; top: 2%;
  background: radial-gradient(circle, rgba(30, 80, 230, .5), transparent 68%);
  animation: deriva-a 26s var(--ease-suave) infinite alternate;
}
.hero-aurora::after {
  width: 40vw; height: 40vw; right: -4%; bottom: -6%;
  background: radial-gradient(circle, rgba(242, 107, 31, .34), transparent 68%);
  animation: deriva-b 32s var(--ease-suave) infinite alternate;
}
@keyframes deriva-a { to { transform: translate3d(7%, 9%, 0) scale(1.12); } }
@keyframes deriva-b { to { transform: translate3d(-8%, -6%, 0) scale(1.08); } }

/* Retícula de puntos con paralaje leve, movida por --hero-paralaje desde JS */
.hero-retic {
  position: absolute; inset: -10% -10% -30%;
  background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px);
  background-size: 34px 34px;
  transform: translate3d(0, var(--hero-paralaje, 0px), 0);
  mask-image: radial-gradient(ellipse 80% 62% at 50% 38%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 38%, #000 35%, transparent 78%);
}

/* Barrido diagonal, una sola vez al cargar: el guiño al corte láser */
.hero-barrido {
  position: absolute; top: -60%; left: -30%; width: 55%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(242, 107, 31, .16) 45%, rgba(255, 255, 255, .1) 52%, transparent);
  transform: rotate(14deg) translateX(-40vw);
  animation: barre 2.6s .55s var(--ease) both;
}
@keyframes barre { to { transform: rotate(14deg) translateX(190vw); } }

/* ---------- Destello laser del hero ----------
   Linea diagonal fina en el lado derecho con un punto brillante que la
   recorre en bucle. Viene de la maqueta aprobada; se me quedo fuera al
   redactar el plan. Es distinta del .hero-barrido, que corre una sola vez
   al cargar. */
.hero-laser {
  position: absolute; right: -4%; top: 22%;
  width: 44%; height: 1px;
  z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(242, 107, 31, .5), rgba(77, 124, 255, .4), transparent);
  transform: rotate(-24deg);
  animation: barre-laser 8s var(--ease-suave) infinite;
}
.hero-laser::after {
  content: ''; position: absolute; left: 38%; top: -2px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #ffcf9e;
  box-shadow: 0 0 14px 4px rgba(242, 107, 31, .75);
}
@keyframes barre-laser {
  0%, 100% { opacity: .25; transform: rotate(-24deg) translateX(0); }
  50%      { opacity: .9;  transform: rotate(-24deg) translateX(-40px); }
}
/* En movil no cabe sin ensuciar el titular */
@media (max-width: 768px) { .hero-laser { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-laser { animation: none; opacity: .4; } }

.hero-content { position: relative; z-index: 2; max-width: 900px; }

.hero-badge {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem 1rem .5rem .7rem; margin-bottom: 1.8rem;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: .84rem; font-weight: 500; color: rgba(242, 244, 250, .82);
}
.hero-badge-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #2ee08a; flex: none;
  box-shadow: 0 0 0 0 rgba(46, 224, 138, .6);
  animation: latido 2.4s var(--ease-suave) infinite;
}
@keyframes latido {
  70% { box-shadow: 0 0 0 9px rgba(46, 224, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 224, 138, 0); }
}

.hero h1 {
  font-size: var(--t-hero);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .98;
  margin-bottom: 1.6rem;
}
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero h1 .line > span {
  display: block;
  transform: translateY(112%);
  animation: sube-linea .95s var(--ease) both;
}
.hero h1 .line:nth-child(1) > span { animation-delay: .12s; }
.hero h1 .line:nth-child(2) > span { animation-delay: .24s; }
.hero h1 .line:nth-child(3) > span { animation-delay: .36s; }
@keyframes sube-linea { to { transform: none; } }

.hero-sub {
  font-size: clamp(1rem, .94rem + .5vw, 1.18rem);
  color: rgba(233, 238, 250, .74);
  max-width: 60ch;
  margin-bottom: 2.4rem;
  opacity: 0; animation: aparece .8s .58s var(--ease) both;
}
@keyframes aparece { to { opacity: 1; } }

.hero-actions {
  display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 3.4rem;
  opacity: 0; animation: aparece .8s .7s var(--ease) both;
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 .line > span, .hero-sub, .hero-actions { animation: none; transform: none; opacity: 1; }
  .hero-barrido { display: none; }
}

.hero-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: .9rem; max-width: 700px;
  opacity: 0; animation: aparece .8s .84s var(--ease) both;
}
.hero-stat {
  position: relative; padding: 1.15rem 1.3rem;
  border-radius: var(--r);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
a.hero-stat:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .075);
}
.hero-stat-num {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--display); font-size: 1.85rem; font-weight: 700; letter-spacing: -.03em;
  line-height: 1; margin-bottom: .4rem;
  font-variant-numeric: tabular-nums;
}
.hero-stat-num .icono { width: 20px; height: 20px; color: #ffc44d; }
.hero-stat-label { font-size: .82rem; color: rgba(233, 238, 250, .58); line-height: 1.4; }
.hero-stat-label .icono { display: inline-block; width: 13px; height: 13px; vertical-align: -1px; margin-left: .2rem; }

/* ---------- Marquee de materiales: costura entre el hero y la zona clara ---------- */
.marquee {
  position: relative;
  padding-block: 1.15rem;
  background: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%);
  border-block: 1px solid rgba(255, 255, 255, .07);
  overflow: hidden;
  /* Se desvanece en los bordes en lugar de cortarse en seco */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; width: max-content;
  animation: corre 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  display: flex; align-items: center; flex: none;
  padding-right: 0;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(.92rem, .86rem + .3vw, 1.05rem);
  letter-spacing: .01em;
  color: rgba(233, 238, 250, .55);
  white-space: nowrap;
}
.marquee-track .sep {
  display: inline-block; width: 6px; height: 6px; flex: none;
  margin-inline: 1.6rem;
  border-radius: 50%;
  background: var(--naranja);
  opacity: .85;
}
@keyframes corre { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------- Servicios (zona clara) ---------- */
#servicios { background: var(--claro); }
/* Textura muy tenue para que el claro no se lea como un vacío plano */
#servicios::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(rgba(11, 13, 20, .045) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000, transparent 75%);
}

.svc-filters {
  display: flex; flex-wrap: wrap; gap: .55rem;
  margin-bottom: clamp(1.6rem, 1rem + 1.6vw, 2.6rem);
}
.svc-fbtn {
  padding: .58rem 1.15rem;
  border-radius: var(--r-full);
  border: 1px solid var(--borde);
  background: transparent;
  color: var(--texto-suave);
  font-size: .88rem; font-weight: 500;
  transition: all var(--dur-rapida) var(--ease);
}
.svc-fbtn:hover { border-color: var(--borde-fuerte); color: var(--texto); transform: translateY(-1px); }
.svc-fbtn.active {
  background: var(--tinta); border-color: var(--tinta); color: #fff;
  box-shadow: 0 8px 20px -10px rgba(11, 13, 20, .55);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: var(--gap);
}
.gallery-loading {
  grid-column: 1 / -1; padding: 3rem 0; text-align: center;
  color: var(--texto-tenue); font-size: .95rem;
}

/* ---------- Tarjeta de servicio ---------- */
.srv {
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.6rem 1.5rem 1.35rem;
  border-radius: var(--r-lg);
  background: var(--superficie);
  border: 1px solid var(--borde);
  box-shadow: 0 2px 4px -2px rgba(16, 24, 48, .06);
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* Borde iluminado: un pseudo-elemento con gradiente recortado a un anillo de 1px.
   Se usa máscara compuesta en lugar de border-image, que no acepta radios. */
.srv::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--grad-marca);
  -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 var(--dur) var(--ease);
  pointer-events: none;
}
.srv:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 50px -26px rgba(16, 24, 48, .3);
}
.srv:hover::before { opacity: 1; }

.srv-icon {
  width: 50px; height: 50px; margin-bottom: 1.1rem;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(30, 80, 230, .09);
  color: var(--azul);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.srv-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.srv:hover .srv-icon {
  transform: translateY(-2px) rotate(-4deg);
  background: var(--naranja); color: #fff;
}

.srv h3 { font-size: var(--t-h3); margin-bottom: .5rem; }
.srv p { font-size: .93rem; color: var(--texto-suave); line-height: 1.6; }

.srv-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  margin-top: auto; padding-top: 1.15rem;
}
.srv-badge {
  font-size: .76rem; font-weight: 600; letter-spacing: .04em;
  padding: .3rem .65rem; border-radius: var(--r-full);
  background: rgba(11, 13, 20, .06); color: var(--texto-tenue);
}
.srv-more {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .88rem; font-weight: 600; color: var(--azul);
}
/* La flecha ya es un SVG dentro del marcado (contrato DOM); se anima
   directamente en vez de añadir una flecha de texto duplicada. */
.srv-more svg { transition: transform var(--dur-rapida) var(--ease); }
.srv:hover .srv-more svg { transform: translateX(4px); }

/* ---------- Modal de detalle de servicio ---------- */
.svc-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: flex-start; justify-content: center;
  padding: clamp(1rem, .5rem + 3vw, 3rem) 1rem;
  background: rgba(4, 6, 14, .74);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.svc-modal-overlay.open { display: flex; opacity: 1; }

.svc-modal {
  position: relative; width: 100%; max-width: 900px;
  border-radius: var(--r-lg);
  background: var(--claro-2);
  color: var(--tinta);
  box-shadow: 0 50px 110px -30px rgba(0, 0, 0, .7);
  overflow: clip;
  max-height: 100%;
  display: flex; flex-direction: column;
  transform: translateY(20px) scale(.985);
  transition: transform .5s var(--ease);
}
.svc-modal-overlay.open .svc-modal { transform: none; }

/* Cabecera fija: el modal es alto (album de fotos) y el boton de cerrar debe
   seguir alcanzable al desplazar. Sin esto el CTA del pie quedaba encima del
   boton e interceptaba el clic. */
.svc-modal-top {
  position: relative; z-index: 5; flex: none;
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.2rem 1.4rem 1rem;
  border-bottom: 1px solid rgba(11, 13, 20, .08);
  background: var(--claro-2);
}
.svc-modal-top .srv-icon { margin-bottom: 0; flex: none; }
.svc-modal-top h3 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem); }
.svc-modal-top .sub { font-size: .85rem; color: var(--texto-tenue); margin-top: .25rem; }

.svc-close {
  position: relative; z-index: 6;
  margin-left: auto; width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(11, 13, 20, .06);
  color: var(--tinta);
  transition: background-color var(--dur-rapida) var(--ease), transform var(--dur-rapida) var(--ease);
}
.svc-close:hover { background: rgba(11, 13, 20, .12); transform: rotate(90deg); }

.svc-modal-body { padding: 1.1rem 1.4rem; overflow-y: auto; flex: 1 1 auto; }
.svc-modal-body p { color: rgba(11, 13, 20, .72); line-height: 1.7; }
/* La lista de bullets (con icono de check) no cambia de marcado: solo se
   readapta al fondo claro nuevo. Antes vivía en el <style> inline. */
.svc-modal-body ul { list-style: none; display: grid; gap: .7rem; }
.svc-modal-body li { display: flex; gap: .7rem; font-size: .93rem; color: rgba(11, 13, 20, .82); line-height: 1.5; }
.svc-modal-body li svg { color: var(--azul); flex: none; margin-top: .15rem; }

/* .svc-album es hermano de .svc-modal-body, no hijo, asi que no heredaba su
   padding y su contenido quedaba pegado a los bordes del modal. */
.svc-album { margin-top: 1.6rem; padding-inline: 1.4rem; }
.svc-album .svc-photos { padding-bottom: .2rem; }
.svc-album-h {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-tenue); margin-bottom: .9rem;
}
/* .lbl hereda la tipografía de eyebrow del contenedor; el enlace "Ver página
   del servicio" es una acción, no parte del rótulo, así que recupera su
   propio tamaño y color. */
.svc-album-h a { font-size: .84rem; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--azul); }
.svc-catchips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; }
.svc-catchip {
  padding: .42rem .9rem; border-radius: var(--r-full);
  border: 1px solid rgba(11, 13, 20, .12);
  font-size: .84rem; color: rgba(11, 13, 20, .7);
  transition: all var(--dur-rapida) var(--ease);
}
.svc-catchip:hover, .svc-catchip.active { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.svc-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; }
.svc-photo {
  aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; cursor: pointer;
  background: rgba(11, 13, 20, .05);
}
.svc-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.svc-photo:hover img { transform: scale(1.07); }
/* El mensaje de "sin fotos" cae dentro de la rejilla del album y ocupaba
   una sola celda de ~120px, partiendo el texto en una columna estrecha. */
.svc-empty { grid-column: 1 / -1; width: 100%; padding: 2rem 0; text-align: center; color: var(--texto-tenue); font-size: .9rem; }

.svc-modal-foot {
  flex: none;
  display: flex; flex-wrap: wrap; gap: .7rem;
  padding: 1rem 1.4rem 1.3rem;
  border-top: 1px solid rgba(11, 13, 20, .08);
  background: rgba(11, 13, 20, .02);
}
.svc-cta {
  /* flex:none: sin esto el boton se encoge dentro del pie flex y "Cotizar"
     quedaba aplastado a 36px, ilegible. */
  flex: none;
  display: inline-flex; align-items: center; gap: .5rem;
  white-space: nowrap;
  min-height: 46px; padding: 0 1.35rem; border-radius: var(--r-full);
  border: 1px solid rgba(11, 13, 20, .16);
  font-family: var(--display); font-weight: 600; font-size: .92rem;
  transition: all var(--dur-rapida) var(--ease);
}
.svc-cta:hover { background: rgba(11, 13, 20, .05); transform: translateY(-2px); }

/* Boton de WhatsApp en su verde de marca: antes heredaba un gris tenue y
   apenas se distinguia del fondo. */
.svc-cta.wa {
  background: #1faa53; border-color: #1faa53; color: #fff;
}
.svc-cta.wa:hover {
  background: #189247; border-color: #189247;
  box-shadow: 0 14px 30px -12px rgba(31, 170, 83, .6);
}
.svc-cta-cotizar { background: var(--naranja); border-color: var(--naranja); color: #fff; }
.svc-cta-cotizar:hover { background: var(--naranja-claro); border-color: var(--naranja-claro); box-shadow: 0 14px 30px -12px rgba(242, 107, 31, .65); }
.svc-cta .ext { opacity: .6; font-size: .82rem; }

@media (max-width: 600px) {
  .svc-modal-top { padding: 1.3rem 1.2rem 1.1rem; }
  .svc-modal-body, .svc-album { padding-left: 1.2rem; padding-right: 1.2rem; }
  .svc-modal-foot { padding: 1.1rem 1.2rem 1.4rem; }
}

/* ---------- Galería (zona oscura: la fotografía de producto destaca) ---------- */
#galeria { background: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 55%, var(--dark) 100%); }

.gallery-filters {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: clamp(1.6rem, 1rem + 1.6vw, 2.6rem);
}
.gf-btn {
  padding: .52rem 1.05rem; border-radius: var(--r-full);
  border: 1px solid var(--borde);
  background: transparent; color: var(--texto-suave);
  font-size: .85rem; font-weight: 500;
  transition: all var(--dur-rapida) var(--ease);
}
.gf-btn:hover { border-color: var(--borde-fuerte); color: var(--texto); }
.gf-btn.active { background: #fff; border-color: #fff; color: var(--tinta); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: .8rem;
}

.g-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  background: var(--dark-3);
  border: 1px solid rgba(255, 255, 255, .07);
}
.g-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .75s var(--ease), filter .5s var(--ease);
}
.g-item:hover img { transform: scale(1.07); filter: brightness(.62); }

.g-overlay {
  position: absolute; inset: auto 0 0 0;
  padding: 1.6rem 1.1rem 1.05rem;
  background: linear-gradient(0deg, rgba(4, 6, 14, .92), transparent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.g-item:hover .g-overlay { opacity: 1; }

/* Nombre y etiqueta suben escalonados, no en bloque */
.g-name, .g-tag {
  transform: translateY(10px);
  transition: transform .45s var(--ease);
}
.g-item:hover .g-name { transform: none; }
.g-item:hover .g-tag { transform: none; transition-delay: .06s; }

.g-name { font-family: var(--display); font-weight: 600; font-size: .98rem; color: #fff; line-height: 1.3; }
.g-tag { font-size: .76rem; color: var(--naranja); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-top: .25rem; }

/* Lupa que aparece en la esquina */
.g-item .gh {
  position: absolute; top: .8rem; right: .8rem;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff;
  opacity: 0; transform: scale(.8);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.g-item .gh svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-item:hover .gh { opacity: 1; transform: none; }

.gallery-empty { grid-column: 1 / -1; padding: 3rem 0; text-align: center; color: var(--texto-tenue); }

.g-more-wrap { display: flex; justify-content: center; margin-top: 2.4rem; }
.g-more-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 50px; padding: 0 1.8rem; border-radius: var(--r-full);
  border: 1px solid var(--borde-fuerte);
  color: var(--texto);
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  transition: all var(--dur-rapida) var(--ease);
}
.g-more-btn:hover { background: var(--superficie-2); transform: translateY(-2px); }

/* ---------- Lightbox ---------- */
.lb-overlay {
  position: fixed; inset: 0; z-index: 1100;
  display: none; align-items: center; justify-content: center;
  padding: clamp(1rem, .5rem + 3vw, 4rem);
  background: rgba(3, 5, 12, .93);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.lb-overlay.open { display: flex; opacity: 1; }

#lb-img {
  max-width: 100%; max-height: 82vh;
  object-fit: contain;
  border-radius: var(--r);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9);
  cursor: zoom-out;
  transform: scale(.96);
  transition: transform .45s var(--ease);
}
.lb-overlay.open #lb-img { transform: none; }

.lb-nav, .lb-close {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff;
  transition: background-color var(--dur-rapida) var(--ease), transform var(--dur-rapida) var(--ease);
}
.lb-nav { top: 50%; width: 54px; height: 54px; font-size: 2rem; line-height: 1; translate: 0 -50%; }
.lb-prev { left: clamp(.6rem, .3rem + 1.5vw, 2rem); }
.lb-next { right: clamp(.6rem, .3rem + 1.5vw, 2rem); }
.lb-nav:hover { background: rgba(255, 255, 255, .22); }
.lb-prev:hover { transform: translateX(-3px); }
.lb-next:hover { transform: translateX(3px); }

.lb-close { top: clamp(.8rem, .4rem + 1.5vw, 2rem); right: clamp(.8rem, .4rem + 1.5vw, 2rem); width: 46px; height: 46px; }
.lb-close:hover { background: rgba(255, 255, 255, .22); transform: rotate(90deg); }

.lb-caption {
  position: absolute; left: 50%; bottom: clamp(1rem, .5rem + 2vw, 2.4rem);
  translate: -50% 0;
  max-width: min(90%, 640px); text-align: center;
  font-size: .9rem; color: rgba(255, 255, 255, .82);
  padding: .5rem 1.1rem; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 640px) {
  .lb-nav { width: 44px; height: 44px; font-size: 1.6rem; }
}

/* ---------- Ecosistema: la zona de mayor color del sitio ---------- */
#ecosistema { background: var(--dark); overflow: hidden; }

/* Cinco manchas, una por marca. Muy difusas y de baja opacidad: dan color
   al aire sin competir con las tarjetas. */
.eco-malla {
  position: absolute; inset: -15%; z-index: 0; pointer-events: none;
  filter: blur(100px);
  opacity: .34;
}
.eco-malla::before, .eco-malla::after {
  content: ''; position: absolute; inset: 0;
}
.eco-malla::before {
  background:
    radial-gradient(30% 34% at 12% 22%, var(--eco-studio), transparent 70%),
    radial-gradient(28% 30% at 82% 18%, var(--eco-tienda), transparent 70%),
    radial-gradient(30% 32% at 50% 78%, var(--eco-deco), transparent 70%);
  animation: malla-a 30s var(--ease-suave) infinite alternate;
}
.eco-malla::after {
  background:
    radial-gradient(26% 30% at 22% 82%, var(--eco-dtf), transparent 70%),
    radial-gradient(24% 28% at 88% 72%, var(--eco-magic), transparent 70%);
  animation: malla-b 36s var(--ease-suave) infinite alternate;
}
@keyframes malla-a { to { transform: translate3d(4%, -5%, 0) scale(1.1); } }
@keyframes malla-b { to { transform: translate3d(-5%, 4%, 0) scale(1.08); } }

.eco-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--gap);
}

/* ---------- Tarjeta del ecosistema ---------- */
.eco-card {
  --eco: var(--azul);
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  padding: 1.7rem 1.6rem 1.5rem;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
/* Lavado del color propio, contenido en la parte alta de la tarjeta */
.eco-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 60% at 50% -10%, color-mix(in srgb, var(--eco) 30%, transparent), transparent 70%);
  opacity: .55;
  transition: opacity var(--dur) var(--ease);
}
.eco-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--eco) 55%, transparent);
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--eco) 65%, transparent);
}
.eco-card:hover::before { opacity: 1; }

.eco-card-studio { --eco: var(--eco-studio); }
.eco-card-tienda { --eco: var(--eco-tienda); }
.eco-card-deco   { --eco: var(--eco-deco); }
/* El azul de marca sobre el fondo oscuro del ecosistema da 3.1:1 en el
   texto del enlace. Solo esta tarjeta usa la variante clara del azul
   para su texto; el borde y el icono conservan el azul de marca. */
.eco-card-dtf    { --eco: var(--eco-dtf); }
.eco-card-dtf .eco-link { color: var(--azul-claro); }
.eco-card-magic  { --eco: var(--eco-magic); }

.eco-icon {
  position: relative; z-index: 1;
  width: 52px; height: 52px; margin-bottom: 1.1rem;
  display: grid; place-items: center;
  border-radius: 15px;
  background: color-mix(in srgb, var(--eco) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--eco) 34%, transparent);
  color: var(--eco);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.eco-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.eco-card:hover .eco-icon { transform: translateY(-3px) scale(1.06); background: color-mix(in srgb, var(--eco) 26%, transparent); }

.eco-badge {
  position: absolute; top: 1.1rem; right: 1.1rem; z-index: 2;
  padding: .26rem .6rem; border-radius: var(--r-full);
  background: var(--eco); color: #04060e;
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}

.eco-name { position: relative; z-index: 1; font-family: var(--display); font-size: 1.22rem; font-weight: 700; margin-bottom: .5rem; }
.eco-desc { position: relative; z-index: 1; font-size: .9rem; color: var(--texto-suave); line-height: 1.62; }
.eco-link {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: auto; padding-top: 1.25rem;
  font-family: var(--display); font-weight: 600; font-size: .9rem;
  color: var(--eco);
}
.eco-link::after { content: '→'; transition: transform var(--dur-rapida) var(--ease); }
.eco-card:hover .eco-link::after { transform: translateX(4px); }

/* ---------- Proceso (zona clara) ---------- */
#proceso { background: var(--claro-2); }

.process-wrap { position: relative; }

/* Riel de fondo y línea de avance. En escritorio es horizontal. */
.proceso-linea {
  position: absolute; z-index: 0;
  left: 0; right: 0; top: 26px; height: 2px;
  background: rgba(11, 13, 20, .1);
  border-radius: 2px;
}
.proceso-linea::after {
  content: ''; position: absolute; inset: 0;
  background: var(--grad-marca);
  border-radius: inherit;
  transform: scaleX(var(--avance, 0));
  transform-origin: left;
  transition: transform .25s linear;
}

.process-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(1.4rem, .8rem + 2vw, 2.6rem);
}
.step { position: relative; padding-top: 0; }

.step-num {
  width: 54px; height: 54px; margin-bottom: 1.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--claro-2);
  border: 2px solid rgba(11, 13, 20, .12);
  font-family: var(--display); font-size: 1.05rem; font-weight: 700;
  color: var(--texto-tenue);
  transition: all .5s var(--ease);
}
/* Se enciende cuando la línea de avance lo alcanza */
.step.alcanzado .step-num {
  border-color: var(--naranja);
  background: var(--naranja);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(242, 107, 31, .16);
}

.step h4 { font-size: var(--t-h3); margin-bottom: .5rem; }
.step p { font-size: .93rem; color: var(--texto-suave); line-height: 1.62; }

@media (max-width: 720px) {
  /* En móvil la línea gira a vertical y los pasos se alinean a su lado */
  .proceso-linea { left: 26px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .proceso-linea::after { transform: scaleY(var(--avance, 0)); transform-origin: top; }
  .process-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .step { padding-left: 4.6rem; }
  .step-num { position: absolute; left: 0; top: 0; margin-bottom: 0; }
}

/* ---------- Envíos: la cobertura es el mensaje, los pagos son secundarios ----------
   Portado desde mockups_rediseno/a-dark-premium.html (sección #envios), NO desde el
   plan: el diseño de pills pequeñas del plan fue rechazado por el cliente ("no está
   nada atractiva, casi pasa desapercibida"). --font-d/--font-b de la maqueta se
   traducen a --display/--body del sistema real. */
#envios { position: relative; overflow: hidden; }
#envios::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(48% 70% at 8% 4%, rgba(255, 255, 255, .14), transparent 62%),
    radial-gradient(46% 76% at 96% 100%, rgba(242, 107, 31, .22), transparent 62%);
}
#envios > .c { position: relative; z-index: 1; }

.ship-head { max-width: 760px; margin-bottom: clamp(2.1rem, 1.8rem + 1.4vw, 3.25rem); }
.ship-head h2 { margin-bottom: 1rem; }
/* Subrayado fino en vez de bloque de fondo: el bloque se ensucia cuando el
   titular parte en dos líneas. */
.ship-hl {
  color: #fff;
  background-image: linear-gradient(90deg, var(--naranja), var(--naranja-claro));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 4px;
  padding-bottom: 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.ship-sub { font-size: 1.05rem; line-height: 1.65; color: rgba(255, 255, 255, .78); max-width: 56ch; }

.ship-ruta {
  display: grid; grid-template-columns: 1fr minmax(140px, .85fr) 1fr;
  align-items: center; gap: clamp(.75rem, .5rem + 1.2vw, 1.75rem);
  margin-bottom: clamp(2.1rem, 1.8rem + 1.4vw, 3.4rem);
}

.dest {
  display: flex; align-items: center; gap: 1.1rem;
  padding: clamp(1.1rem, 1rem + .5vw, 1.6rem) clamp(1.25rem, 1.1rem + .6vw, 1.75rem);
  border-radius: var(--r-lg);
  background: var(--superficie);
  border: 1px solid var(--borde);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.dest:hover {
  transform: translateY(-4px);
  background: var(--superficie-2);
  border-color: var(--borde-fuerte);
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .6);
}
.bandera {
  width: 58px; height: 39px; flex: none; border-radius: 6px; overflow: hidden;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .28);
}
.bandera svg { width: 100%; height: 100%; display: block; }
.dest-k {
  display: block; font-size: .7rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--acento); margin-bottom: .2rem;
}
.dest-txt b {
  font-family: var(--display); font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  font-weight: 700; color: #fff; letter-spacing: -.02em; line-height: 1.15;
}

/* Arco de ruta entre los dos destinos */
.ruta { position: relative; height: 80px; }
.ruta svg { width: 100%; height: 100%; overflow: visible; }
.ruta-linea {
  fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 2;
  stroke-linecap: round; stroke-dasharray: 4 6;
  animation: ruta-fluye 2.8s linear infinite;
}
@keyframes ruta-fluye { to { stroke-dashoffset: -20; } }
.ruta-nodo { fill: var(--acento); }
.ruta-caja {
  position: absolute; top: 0; left: 0; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 9px;
  background: var(--naranja); color: #fff;
  box-shadow: 0 6px 18px -6px rgba(242, 107, 31, .9);
  offset-path: path('M8 62 C 90 4, 230 4, 312 62');
  offset-rotate: 0deg;
  animation: ruta-viaja 5.5s var(--ease) infinite;
}
.ruta-caja svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@keyframes ruta-viaja {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Pagos: franja secundaria, separada del mensaje principal. Conserva las
   clases .pagos-grid/.pago/.pago-icon/.pago-name/.pago-desc del contrato DOM. */
.ship-pagos { padding-top: clamp(1.5rem, 1.3rem + 1vw, 2.1rem); border-top: 1px solid var(--borde); }
.pagos-h {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--texto-tenue); margin-bottom: 1rem;
}
.pagos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.pago {
  display: flex; align-items: center; gap: .85rem;
  padding: 1rem 1.1rem; border-radius: var(--r);
  background: var(--superficie);
  border: 1px solid var(--borde);
  transition: border-color var(--dur-rapida) var(--ease), background-color var(--dur-rapida) var(--ease),
              transform var(--dur-rapida) var(--ease);
}
.pago:hover { border-color: var(--borde-fuerte); background: var(--superficie-2); transform: translateY(-3px); }
.pago-icon { color: var(--acento); flex: none; display: grid; place-items: center; width: 26px; height: 26px; }
.pago-icon svg { width: 22px; height: 22px; }
.pago-name { font-family: var(--display); font-weight: 600; font-size: .92rem; color: var(--texto); }
.pago-desc { color: var(--texto-tenue); font-size: .76rem; }

@media (max-width: 900px) {
  .ship-ruta { grid-template-columns: 1fr; gap: 1rem; }
  /* En vertical el arco estorba: se sustituye por un conector corto */
  .ruta { height: 44px; justify-self: center; width: 60px; }
  .ruta svg, .ruta-caja { display: none; }
  .ruta::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .55) 0 5px, transparent 5px 11px);
    transform: translateX(-50%);
  }
  .pagos-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pagos-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ruta-linea, .ruta-caja { animation: none; }
  .ruta-caja { opacity: 1; offset-distance: 50%; }
}

/* ---------- Contacto (zona clara) ---------- */
#contacto { background: var(--claro); }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(1.6rem, 1rem + 2.5vw, 3rem);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }

.cc {
  display: flex; align-items: flex-start; gap: .95rem;
  padding: 1.25rem 1.3rem;
  border-radius: var(--r);
  background: var(--superficie);
  border: 1px solid var(--borde);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
a.cc:hover {
  transform: translateY(-3px);
  border-color: rgba(30, 80, 230, .28);
  box-shadow: 0 20px 40px -22px rgba(16, 24, 48, .3);
}
.cc-icon {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(30, 80, 230, .09);
  color: var(--azul);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
a.cc:hover .cc-icon { background: var(--azul); color: #fff; }
.cc-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* Los logos de red y WhatsApp son marcas: van sólidos */
.cc-icon svg.icono-solido { fill: currentColor; stroke: none; }

.cc-label { font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-tenue); margin-bottom: .22rem; }
.cc-value { font-family: var(--display); font-weight: 600; font-size: 1.02rem; color: var(--texto); line-height: 1.3; }
.cc-sub { font-size: .82rem; color: var(--texto-suave); margin-top: .18rem; line-height: 1.5; }

.socials-box { grid-column: 1 / -1; padding: 1.25rem 1.3rem; border-radius: var(--r); background: var(--superficie); border: 1px solid var(--borde); }
.socials { display: flex; gap: .55rem; margin-top: .7rem; }
.social {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(11, 13, 20, .05);
  color: var(--texto-suave);
  transition: all var(--dur-rapida) var(--ease);
}
.social svg { width: 20px; height: 20px; fill: currentColor; }
.social:hover { transform: translateY(-3px); color: #fff; }
/* Cada red toma su propio color al pasar el cursor */
.social-fb:hover { background: #1877f2; }
.social-ig:hover { background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); }
.social-tk:hover { background: #010101; }

.map-wrap {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--borde);
  box-shadow: 0 26px 50px -28px rgba(16, 24, 48, .32);
  aspect-ratio: 4 / 5;
  min-height: 420px;
}
/* min-height: auto anula el 420px base. En una sola columna angosta (bajo
   900px), min-height ganaba sobre el ancho de la columna y el aspect-ratio
   recalculaba un ancho mayor al del contenedor → desbordamiento horizontal
   medido en 390px (560px de ancho contra 350px de columna). */
@media (max-width: 900px) { .map-wrap { aspect-ratio: 16 / 12; min-height: auto; } }
.map-wrap iframe { width: 100%; height: 100%; border: 0; filter: saturate(.92) contrast(1.03); }

/* ============================================================
   Modal de cotización y chat widget (Etapa 9)
   ============================================================ */
/* ---------- Modal de cotización ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1050;
  display: none; align-items: flex-start; justify-content: center;
  padding: clamp(1rem, .5rem + 3vw, 3rem) 1rem;
  background: rgba(4, 6, 14, .76);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.modal-overlay.open { display: flex; opacity: 1; }

.modal {
  position: relative;   /* ancla el .modal-close; sin esto va a la esquina de la pantalla */
  width: 100%; max-width: 640px;
  border-radius: var(--r-lg);
  background: var(--claro-2);
  color: var(--tinta);
  box-shadow: 0 50px 110px -30px rgba(0, 0, 0, .7);
  /* clip recorta como hidden pero no crea contenedor de scroll, que anularia
     el position:sticky de la cabecera */
  overflow: clip;
  max-height: 100%;
  display: flex; flex-direction: column;
  transform: translateY(22px) scale(.985);
  transition: transform .5s var(--ease);
}
.modal-overlay.open .modal { transform: none; }

.modal-header {
  position: relative; z-index: 2; flex: none;
  padding: 1.4rem 1.6rem 1.1rem;
  background: linear-gradient(160deg, rgba(30, 80, 230, .07), rgba(242, 107, 31, .05));
  border-bottom: 1px solid rgba(11, 13, 20, .07);
}
.modal-eyebrow { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--azul); margin-bottom: .4rem; }
.modal-title { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.7rem); margin-bottom: .35rem; }
.modal-title em { font-style: normal; color: var(--naranja); }
.modal-sub { font-size: .86rem; line-height: 1.45; color: rgba(11, 13, 20, .66); }

.modal-close {
  position: absolute; top: 1.1rem; right: 1.1rem; z-index: 3;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(11, 13, 20, .06); color: var(--tinta);
  transition: background-color var(--dur-rapida) var(--ease), transform var(--dur-rapida) var(--ease);
}
.modal-close:hover { background: rgba(11, 13, 20, .12); transform: rotate(90deg); }

.modal-body { padding: 1.1rem 1.6rem 1.4rem; overflow-y: auto; flex: 1 1 auto; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-group { margin-bottom: .7rem; }
.form-label { display: block; font-size: .78rem; font-weight: 600; color: rgba(11, 13, 20, .82); margin-bottom: .28rem; }
.req { color: var(--naranja); }

.form-input, .form-select, .form-textarea {
  width: 100%; padding: .6rem .8rem;
  border-radius: 10px;
  border: 1.5px solid rgba(11, 13, 20, .13);
  background: #fff; color: var(--tinta);
  font-size: .95rem;
  transition: border-color var(--dur-rapida) var(--ease), box-shadow var(--dur-rapida) var(--ease);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 4px rgba(30, 80, 230, .13);
}
.form-textarea { min-height: 74px; resize: vertical; }
.form-hint { font-size: .73rem; color: rgba(11, 13, 20, .5); margin-top: .2rem; }
.form-error { display: none; font-size: .79rem; color: #d92d20; margin-top: .32rem; }
.form-group.error .form-error { display: block; }
.form-group.error .form-input,
.form-group.error .form-select,
.form-group.error .form-textarea { border-color: #d92d20; }

.btn-form {
  flex: 1; min-height: 44px; padding: 0 1.4rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  border-radius: var(--r-full);
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  transition: all var(--dur-rapida) var(--ease);
}
.btn-form-primary { background: var(--naranja); color: #fff; }
.btn-form-primary:hover { background: var(--naranja-claro); transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(242, 107, 31, .6); }
.btn-form-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.spinner {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: gira .7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }


/* ---------- Chat widget ---------- */
.chat-fab {
  position: fixed; right: clamp(1rem, .5rem + 1.5vw, 1.8rem); bottom: clamp(1rem, .5rem + 1.5vw, 1.8rem);
  z-index: 950;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--azul); color: #fff;
  box-shadow: 0 14px 34px -10px rgba(30, 80, 230, .65);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur-rapida) var(--ease);
}
.chat-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 20px 44px -12px rgba(30, 80, 230, .8); }
.chat-fab .icon-close { display: none; }
.chat-fab.open { background: var(--dark-3); }
.chat-fab.open .icon-open { display: none; }
.chat-fab.open .icon-close { display: block; }

.chat-window {
  position: fixed; right: clamp(1rem, .5rem + 1.5vw, 1.8rem); bottom: calc(clamp(1rem, .5rem + 1.5vw, 1.8rem) + 70px);
  z-index: 949;
  width: min(384px, calc(100vw - 2rem));
  height: min(600px, calc(100dvh - 140px));
  display: none; flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--dark-2);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85);
  overflow: hidden;
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity .32s var(--ease), transform .38s var(--ease);
}
.chat-window.open { display: flex; opacity: 1; transform: none; }

.chat-header {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(120deg, var(--azul), #1a3fb5);
  color: #fff;
}
.chat-close { margin-left: auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; transition: background-color var(--dur-rapida) var(--ease); }
.chat-close:hover { background: rgba(255, 255, 255, .28); }

.chat-register, .chat-messages { flex: 1; overflow-y: auto; padding: 1.15rem; }
.chat-register .lbl { display: block; font-size: .8rem; font-weight: 600; color: var(--texto-suave); margin-bottom: .38rem; }
.chat-register input[type="text"], .chat-register input[type="tel"], .chat-register input[type="email"] {
  width: 100%; padding: .68rem .85rem; margin-bottom: .85rem;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .05); color: #f2f4fa;
  font-size: .92rem;
  transition: border-color var(--dur-rapida) var(--ease), box-shadow var(--dur-rapida) var(--ease);
}
.chat-register input:focus { outline: none; border-color: var(--azul-claro); box-shadow: 0 0 0 3px rgba(77, 123, 255, .2); }
.creg-err { display: none; font-size: .77rem; color: #ff8b80; margin: -.6rem 0 .8rem; }
.creg-err.show { display: block; }
/* Limitada al registro del chat: la clase `wa` la usa tambien el boton
   "Cotizar por WhatsApp" del modal de servicio, al que esta regla dejaba
   sin color y desalineado. */
.chat-register .wa { display: flex; align-items: center; gap: .55rem; font-size: .85rem; color: var(--texto-suave); margin-bottom: 1.1rem; }
.creg-btn {
  width: 100%; min-height: 46px; border-radius: var(--r-full);
  background: var(--naranja); color: #fff;
  font-family: var(--display); font-weight: 600; font-size: .93rem;
  transition: background-color var(--dur-rapida) var(--ease), transform var(--dur-rapida) var(--ease);
}
.creg-btn:hover { background: var(--naranja-claro); transform: translateY(-2px); }

.chat-input-area {
  display: flex; align-items: flex-end; gap: .5rem;
  padding: .8rem;
  border-top: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .02);
}
.chat-input {
  flex: 1; max-height: 110px; padding: .6rem .8rem;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05); color: #f2f4fa;
  font-size: .92rem; resize: none;
}
.chat-input:focus { outline: none; border-color: var(--azul-claro); }
.chat-icon-btn { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--texto-suave); transition: all var(--dur-rapida) var(--ease); }
.chat-icon-btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.chat-send { background: var(--azul); color: #fff; }
.chat-send:hover { background: var(--azul-claro); }

.chat-typing { display: none; gap: .3rem; padding: .6rem 0; }
.chat-typing.show { display: flex; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-tenue); animation: rebota 1.3s var(--ease-suave) infinite; }
.chat-typing span:nth-child(2) { animation-delay: .16s; }
.chat-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes rebota { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }

@media (max-width: 480px) {
  .chat-window { right: .6rem; left: .6rem; width: auto; height: min(560px, calc(100dvh - 120px)); }
}


/* ============================================================
   Migrado desde el <style> inline de index.html (Etapa 9.3)
   Reglas que el sistema de diseño nuevo no cubría: burbujas y
   chips del chat, registro del chat, pantalla de éxito del
   formulario, estados de error, y el botón flotante legacy.
   ============================================================ */
/* ============================================
   LEIZER · Apple/Luxury Design System
   ============================================ */
:root{
  --azul:#1e50e6;--azul-glow:rgba(30,80,230,.35);--azul-soft:#4d76ed;
  --naranja:#f26b1f;--naranja-glow:rgba(242,107,31,.3);--naranja-soft:#ff8543;
  --dark:#080c1a;--dark-2:#0e1328;--dark-3:#161d3a;--dark-4:#1f2850;
  --light:#fafbff;--light-2:#f0f2f8;--light-3:#e4e8f2;
  --ink:#0a0e1e;--ink-soft:#626a82;--ink-muted:#9aa0b4;
  --radius:16px;--radius-lg:24px;--radius-xl:32px;
  --display:'Outfit',system-ui,sans-serif;
  --body:'DM Sans',system-ui,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
}
::selection{background:var(--azul);color:#fff}
/* Container */
.c{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
/* ============ NAV ============
   Todo el nav (base + colapso a móvil) vive ahora en css/leizer-core.css
   (Tasks 2.1 y 2.2). Ver commits "feat(nav): ..." para el detalle de lo migrado. */

/* ============ HERO ============
   Fondo (aurora/retícula/barrido),el titular
   (h1/.line/.accent/.blue),.hero-sub y .hero-actions migraron a
   css/leizer-landing.css (Tasks 3.1 y 3.2). */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 32px;border-radius:999px;font-size:15px;font-weight:600;font-family:var(--body);cursor:pointer;transition:all .35s var(--ease);border:2px solid transparent;letter-spacing:.01em}
.btn-arrow{transition:transform .3s var(--ease);display:inline-block}
/* Hero Stats: migraron a css/leizer-landing.css (Task 3.3).
   Se conserva a.hero-stat:hover .hero-stat-label — matiz adicional que la
   spec nueva no cubre y no choca con nada. */
a.hero-stat:hover .hero-stat-label{color:var(--naranja-soft)}
/* ============ MARQUEE ============
   Migró a css/leizer-landing.css (Task 4.1): desvanecido en los bordes,pausa al pasar el cursor y detención con movimiento reducido. */

/* ============ SECTION SYSTEM ============ */
.section{padding:clamp(80px,12vw,140px) 0;position:relative}
.section-alt{background:var(--light-2);color:var(--ink)}
/* .section-dark y .section-accent migraron: todas las secciones que los usaban
   ahora traen data-theme="dark|light|accent",que ya aporta fondo y color del
   sistema compartido (Tasks 4-8). */

.eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--naranja);margin-bottom:20px;display:flex;align-items:center;gap:14px}
/* El naranja de marca #f26b1f da 2.79:1 sobre el hueso claro, por debajo
   de AA. Sobre fondo claro se usa una version oscurecida de la misma
   familia; sobre fondo oscuro se conserva el naranja de marca. */
[data-theme="light"] .eyebrow{color:#b8480c}
/* Sobre la banda de acento azul el naranja de marca da 3.53:1; se usa el
   tono claro que el propio tema define como acento. */
[data-theme="accent"] .eyebrow{color:var(--acento)}
.section-heading .accent{color:var(--naranja);font-weight:300;font-style:italic}
[data-theme="light"] .section-heading .accent{color:#b8480c}
.section-heading .blue{color:var(--azul)}
/* Reveal animations */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
/* ============ SERVICES ============
   .svc-filters/.svc-fbtn/.services-grid/.srv migraron a css/leizer-landing.css
   (Tasks 4.2 y 4.3: sección en zona clara + tarjeta con borde iluminado). */
#servicios .gallery-loading{color:var(--ink-muted)}
/* ============ GALLERY ============
   .gallery-filters/.gf-btn/.gallery-grid/.g-item/.g-overlay/.g-tag/.g-name/
   .g-more-wrap/.g-more-btn/.gallery-empty migraron a css/leizer-landing.css
   (Task 5.1: rejilla de galería). .gallery-loading sigue aquí,compartida
   con #servicios (ver override arriba). */
.gallery-loading{text-align:center;padding:40px;color:rgba(255,255,255,.3)}
/* Lightbox: .lb-overlay/.lb-close/.lb-nav/.lb-prev/.lb-next/.lb-caption migraron
   a css/leizer-landing.css (Task 5.2: rediseño del lightbox). */
/* Ecosistema: .eco-grid migró en la Task 6.1. El resto (.eco-card*,.eco-link) migra aquí,en la
   Task 6.2,a css/leizer-landing.css con --eco por tarjeta. */
/* La media query de .eco-grid a 900px y la de .gallery-grid a 768px (huérfana
   desde la Task 5.1: quedó fuera del bloque removido entonces) ya no aplican:
   ambas rejillas usan auto-fit/auto-fill responsive en css/leizer-landing.css. */

/* ============ PROCESS ============
   .process-wrap/.proceso-linea/.process-grid/.step/.step-num migraron a
   css/leizer-landing.css (Task 7.1: zona clara con línea que se dibuja). */

/* ============ ENVIOS / SHIPPING ============
   .ship-head/.ship-hl/.ship-sub/.ship-ruta/.dest/.bandera/.ruta (y derivadas)/
   .ship-pagos/.pagos-h/.pagos-grid/.pago (y derivadas) migraron a
   css/leizer-landing.css (Task 7.2: diseño portado desde la maqueta
   a-dark-premium.html,no desde el plan — las pills pequeñas fueron
   rechazadas por el cliente). */

/* ============ CONTACT ============
   .contact-grid/.contact-info/.cc (y derivadas)/.socials-box/.socials/
   .social (y derivadas)/.map-wrap migraron a css/leizer-landing.css
   (Task 8.1: zona clara,redes con su color de marca al pasar el cursor). */

/* ============ FOOTER ============
   .footer/.footer-wordmark/.footer-grid/.footer-marca/.footer-tagline/
   .footer-desc/.footer-resenas/.footer-col (y derivadas)/.footer-eco-dot/
   .footer-legal migraron a css/leizer-core.css (Task 8.2: footer ampliado
   a cuatro columnas — las páginas secundarias reutilizan estos mismos
   estilos). */

/* ============ FAB WhatsApp ============ */
.fab{position:fixed;bottom:24px;right:24px;width:58px;height:58px;background:#25D366;color:#fff;border-radius:50%;display:grid;place-items:center;box-shadow:0 10px 28px -4px rgba(37,211,102,.5);z-index:99;transition:transform .25s var(--ease)}
.fab:hover{transform:scale(1.08)}
.fab::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid #25D366;opacity:.4;animation:fabPulse 2.5s infinite}
/* ============ CHAT WIDGET ============ */
.chat-fab{position:fixed;bottom:94px;right:24px;width:58px;height:58px;background:var(--azul);color:#fff;border-radius:50%;display:grid;place-items:center;box-shadow:0 10px 28px -4px var(--azul-glow);z-index:99;cursor:pointer;border:none;transition:transform .25s var(--ease)}
.chat-fab::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--azul);opacity:.35;animation:fabPulse 2.5s infinite .8s}
.chat-fab.open::after{display:none}
.chat-fab .icon-open{display:grid;place-items:center}
.chat-header-avatar{width:40px;height:40px;background:var(--azul);border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:18px;font-weight:700;color:#fff;flex-shrink:0;letter-spacing:-.02em}
.chat-header-info{flex:1;min-width:0}
.chat-header-name{font-family:var(--display);font-size:14px;font-weight:600;color:#fff;line-height:1.2}
.chat-header-status{font-size:11px;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:5px;margin-top:2px}
.chat-header-status::before{content:'';width:6px;height:6px;background:#4ade80;border-radius:50%;flex-shrink:0;animation:statusPulse 2s infinite}
@keyframes statusPulse{0%,100%{opacity:1}50%{opacity:.4}}
.chat-messages::-webkit-scrollbar{width:3px}
.chat-messages::-webkit-scrollbar-thumb{background:var(--light-3);border-radius:4px}
.chat-msg{max-width:84%;display:flex;flex-direction:column;gap:3px;animation:msgIn .22s var(--ease-spring)}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.chat-msg.bot{align-self:flex-start}
.chat-msg.user{align-self:flex-end}
.chat-bubble{padding:9px 13px;border-radius:16px;font-size:13px;line-height:1.6;word-break:break-word}
.chat-msg.bot .chat-bubble{background:var(--light-2);color:var(--ink);border-bottom-left-radius:4px}
.chat-msg.user .chat-bubble{background:var(--azul);color:#fff;border-bottom-right-radius:4px}
.chat-msg.bot .chat-bubble a{color:var(--azul);text-decoration:underline}
.chat-msg.user .chat-bubble a{color:rgba(255,255,255,.9);text-decoration:underline}
.chat-bubble img{max-width:180px;border-radius:8px;margin-top:4px;display:block}
.chat-time{font-size:10px;color:var(--ink-muted);padding:0 4px}
.chat-msg.user .chat-time{text-align:right}
.chat-chips{display:flex;flex-wrap:wrap;gap:6px;padding:4px 12px 10px;align-self:stretch}
.chat-chip{background:#fff;border:1.5px solid var(--azul);color:var(--azul);border-radius:20px;padding:5px 13px;font-size:12.5px;font-family:inherit;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap;line-height:1.4}
.chat-chip:hover{background:var(--azul);color:#fff}
.chat-img-preview-wrap{padding:8px 14px 0;display:none;flex-shrink:0}
.chat-img-preview-wrap.show{display:block}
.chat-img-preview{position:relative;display:inline-block}
.chat-img-preview img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:2px solid var(--light-3)}
.chat-img-remove{position:absolute;top:-6px;right:-6px;width:18px;height:18px;background:var(--ink);color:#fff;border:none;border-radius:50%;font-size:11px;cursor:pointer;display:grid;place-items:center;line-height:1}
.chat-input::placeholder{color:var(--ink-muted)}
.chat-img-btn{background:var(--light-2);color:var(--ink-soft)}
.chat-img-btn:hover{background:var(--light-3)}
.chat-send:hover:not(:disabled){background:var(--azul-soft);transform:scale(1.06)}
.chat-send:disabled{opacity:.35;cursor:default}
.chat-typing .chat-bubble{display:flex;gap:4px;padding:11px 14px;align-items:center}
.typing-dot{width:7px;height:7px;background:var(--ink-muted);border-radius:50%;animation:typingBounce 1.2s ease-in-out infinite}
.typing-dot:nth-child(2){animation-delay:.18s}
.typing-dot:nth-child(3){animation-delay:.36s}
/* Chat registration form */
.chat-register{flex:1;overflow-y:auto;padding:22px 18px;display:flex;flex-direction:column;justify-content:center;gap:0}
.creg-intro{font-size:13px;color:var(--ink-soft);margin-bottom:18px;line-height:1.55;text-align:center}
.creg-intro strong{color:var(--ink)}
.creg-field{margin-bottom:13px}
.creg-field label{display:block;font-size:11.5px;font-weight:600;color:var(--ink);letter-spacing:.03em;margin-bottom:5px}
.creg-field input{width:100%;border:1.5px solid var(--light-3);border-radius:10px;padding:9px 13px;font-size:13px;font-family:var(--body);outline:none;transition:border-color .2s;color:var(--ink);background:#fff}
.creg-field input:focus{border-color:var(--azul)}
.creg-field input.error{border-color:#ef4444}
.creg-check{display:flex;align-items:flex-start;gap:9px;margin-bottom:14px;cursor:pointer}
.creg-check input[type=checkbox]{width:15px;height:15px;flex-shrink:0;margin-top:2px;accent-color:var(--azul);cursor:pointer}
.creg-check span{font-size:11.5px;color:var(--ink-soft);line-height:1.45}
.creg-privacy{font-size:10.5px;color:var(--ink-muted);text-align:center;margin-top:10px;line-height:1.45}
@media(max-width:500px){
  .chat-window{right:10px;left:10px;width:auto;bottom:88px;height:calc(100svh - 110px);max-height:540px}
  .chat-fab{bottom:90px;right:16px}
  .fab{bottom:20px;right:16px}
}
/* ============ MODAL ============ */
.modal-eyebrow::before{content:'';width:24px;height:1.5px;background:var(--naranja)}
.form-label .req{color:var(--naranja)}
.form-input.error,.form-select.error,.form-textarea.error{border-color:#dc2626;background:#fef2f2}
.form-error.show{display:block}
.honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.form-buttons{display:flex;gap:10px;margin-top:22px;flex-direction:column}
.btn-form-primary:hover:not(:disabled){background:var(--naranja-soft);transform:translateY(-2px);box-shadow:0 10px 24px -6px var(--naranja-glow)}
.btn-form-wa{background:#25D366;color:#fff;border-color:#25D366}
.btn-form-wa:hover{background:#1ebe5a;transform:translateY(-2px);box-shadow:0 10px 24px -6px rgba(37,211,102,.5)}
.form-divider{text-align:center;font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-muted);margin:6px 0;position:relative}
.form-divider::before,.form-divider::after{content:'';position:absolute;top:50%;width:36%;height:1px;background:var(--light-3)}
.form-divider::before{left:0}
.form-divider::after{right:0}
.form-success{display:none;text-align:center;padding:20px 0}
.form-success.show{display:block}
.success-icon{width:72px;height:72px;background:#dcfce7;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;color:#16a34a;animation:popIn .5s var(--ease-spring)}
.success-title{font-family:var(--display);font-size:26px;font-weight:700;margin-bottom:8px}
.success-text{font-size:14px;color:var(--ink-soft);margin-bottom:20px;max-width:360px;margin-left:auto;margin-right:auto}
body.modal-open{overflow:hidden}
/* ============ MODAL DETALLE DE SERVICIO (con álbum) ============
   Migró entera a css/leizer-landing.css (Task 4.4: rediseño del modal,solo estilos — el marcado de renderSvcModal no cambia). Incluye ahí
   mismo el layout de la lista de bullets (ul/li con icono de check),que el plan original no cubría explícitamente. */

/* ============ Smooth scroll-linked opacity for sections ============ */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}


/* En pantallas bajas (portátiles de 1366×768 dejan ~640px útiles) el modal se
   comprime un paso más para seguir cabiendo entero sin desplazar. */
@media (max-height: 760px) {
  .modal-overlay { padding: .7rem .8rem; align-items: center; }
  .modal-header { padding: 1rem 1.3rem .8rem; }
  .modal-title { font-size: 1.25rem; margin-bottom: .25rem; }
  .modal-sub { font-size: .8rem; }
  .modal-eyebrow { margin-bottom: .3rem; }
  .modal-body { padding: .85rem 1.3rem 1rem; }
  .form-group { margin-bottom: .55rem; }
  .form-label { margin-bottom: .2rem; font-size: .75rem; }
  .form-input, .form-select, .form-textarea { padding: .5rem .7rem; font-size: .9rem; }
  .form-textarea { min-height: 56px; }
  .btn-form { min-height: 40px; }
  .form-divider { margin-block: .5rem; }
}

/* En movil el formulario de cotizacion es mas largo que la pantalla. Se
   compacta al maximo y el pie con los botones queda fijo abajo, para que
   enviar no exija desplazar hasta el final. */
@media (max-width: 560px) {
  .modal-overlay { padding: .5rem .5rem; }
  .modal-header { padding: .9rem 1.1rem .7rem; }
  .modal-title { font-size: 1.2rem; }
  .modal-sub { font-size: .78rem; }
  .modal-body { padding: .8rem 1.1rem 1rem; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-group { margin-bottom: .5rem; }
  .form-textarea { min-height: 52px; }
  .btn-form { min-height: 42px; font-size: .9rem; }
}