/* ============================================================
   TEAM LASER — Componentes
   Botones, spotlights del home, tarjetas de servicio, galería
   con lightbox y bandas de llamado a la acción.
   ============================================================ */

/* ---------------------------------------------------------- *
 * Botones (prefijo tl- para no chocar con las clases .btn*
 * propias de Bootstrap, que también está cargado en el sitio)
 * ---------------------------------------------------------- */
.tl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.7em;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.tl-btn:hover { transform: translateY(-2px); }
.tl-btn:active { transform: translateY(0); }

.tl-btn-ember {
  background: var(--ember-deep);
  color: #fff;
  box-shadow: 0 8px 22px rgba(114, 26, 26, .45);
}
.tl-btn-ember:hover { background: var(--ember-deep-hover); box-shadow: 0 10px 26px rgba(114,26,26,.6); color: #fff; }

.tl-btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.tl-btn-outline:hover { border-color: var(--ember); color: var(--spark); }

.tl-btn-whatsapp {
  background: #25D366;
  color: #06210f;
}
.tl-btn-whatsapp:hover { background: #2fe873; color: #06210f; }

.tl-btn-sm { padding: 0.6em 1.3em; font-size: 0.82rem; }

/* ---------------------------------------------------------- *
 * Spotlights (filas alternadas del home)
 * ---------------------------------------------------------- */
.spotlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 1.2rem + 3vw, 5rem);
  padding: var(--space-lg) 1.5rem;
  max-width: 1240px;
  margin: 0 auto;
}
.spotlight:nth-child(even) .spotlight-media { order: 2; }
.spotlight-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 4 / 3;
}
.spotlight-media img,
.spotlight-media video {
  width: 100%; height: 100%;
  object-fit: cover;
}
.spotlight-media::after {
  content: '';
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: inherit;
  pointer-events: none;
}
.spotlight-text .chip-row {
  display: flex; flex-wrap: wrap; gap: 0.6em;
  margin-top: var(--space-sm);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1em;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--ink-muted);
}
.chip i { color: var(--ember); }

@media (max-width: 860px) {
  .spotlight { grid-template-columns: 1fr; }
  .spotlight:nth-child(even) .spotlight-media { order: 0; }
}

/* ---------------------------------------------------------- *
 * Banda CTA final
 * ---------------------------------------------------------- */
.cta-band {
  position: relative;
  text-align: center;
  padding: var(--space-xl) 1.5rem;
  background:
    radial-gradient(60% 140% at 50% 0%, rgba(var(--ember-rgb), .16), transparent 70%),
    var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-band .inner { max-width: 40rem; margin: 0 auto; }
.cta-band .hero-actions {
  display: flex; flex-wrap: wrap; gap: 0.9em; justify-content: center;
  margin-top: var(--space-md);
}
.cta-band .schedule {
  margin-top: var(--space-md);
  display: inline-flex;
  flex-direction: column;
  gap: 0.3em;
  color: var(--ink-muted);
  font-size: 0.92rem;
}
.cta-band .schedule strong { color: var(--ink); }

/* ---------------------------------------------------------- *
 * Servicios destacados (tarjetas con foto)
 * ---------------------------------------------------------- */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}
.servicio-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.servicio-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--ember-rgb), .5);
  box-shadow: var(--shadow-soft);
}
.servicio-card .servicio-media { aspect-ratio: 4/3; overflow: hidden; }
.servicio-card .servicio-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.servicio-card:hover .servicio-media img { transform: scale(1.06); }
.servicio-card .servicio-body { padding: 1.3em 1.4em 1.5em; }
.servicio-card .servicio-body i {
  color: var(--ember);
  font-size: 1.15rem;
  margin-bottom: 0.5em;
  display: inline-block;
}
.servicio-card h4 { margin-bottom: 0.35em; font-size: 1rem; }
.servicio-card p { font-size: 0.92rem; margin-bottom: 0; }

/* ---------------------------------------------------------- *
 * Galería de trabajos + lightbox
 * ---------------------------------------------------------- */
.trabajos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}
.trabajo-item {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
  display: block;
  width: 100%;
  font: inherit;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.trabajo-item img,
.trabajo-item video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease), filter .4s var(--ease);
}
.trabajo-item .trabajo-caption {
  position: absolute; inset: auto 0 0 0;
  padding: 1.6em 0.9em 0.75em;
  background: linear-gradient(0deg, rgba(0,0,0,.82), transparent);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transform: translateY(8%);
  opacity: 0;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.trabajo-item .trabajo-zoom {
  position: absolute; top: 0.6em; right: 0.6em;
  width: 2.1em; height: 2.1em;
  border-radius: 50%;
  background: rgba(10,10,11,.55);
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.trabajo-item:hover img,
.trabajo-item:hover video,
.trabajo-item:focus-visible img { transform: scale(1.08); }
.trabajo-item:hover .trabajo-caption,
.trabajo-item:focus-visible .trabajo-caption,
.trabajo-item:hover .trabajo-zoom,
.trabajo-item:focus-visible .trabajo-zoom { opacity: 1; transform: translateY(0); }

/* Modal / lightbox (Bootstrap Modal reteñido a la marca) */
#lightboxGaleria .modal-content {
  background: var(--surface);
  border: 1px solid var(--line-strong);
}
#lightboxGaleria .modal-header { border-color: var(--line); }
#lightboxGaleria .carousel-item.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  max-height: 78vh;
  background: #000;
}
#lightboxGaleria .carousel-item img,
#lightboxGaleria .carousel-item video {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(78vh - 3em);
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
}
#lightboxGaleria .carousel-caption-static {
  width: 100%;
  flex-shrink: 0;
  margin: 0;
  padding: 0.9em 1.2em;
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 0.9rem;
  text-align: center;
  border-top: 1px solid var(--line);
}
#lightboxGaleria .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
#lightboxGaleria .carousel-control-prev,
#lightboxGaleria .carousel-control-next { width: 4em; opacity: .85; }
#lightboxGaleria .carousel-control-prev-icon,
#lightboxGaleria .carousel-control-next-icon {
  background-color: rgba(0,0,0,.45);
  border-radius: 50%;
  padding: 1.2em;
  background-size: 45%;
}

/* ---------------------------------------------------------- *
 * Redes sociales (galería)
 * ---------------------------------------------------------- */
.social-follow {
  display: flex;
  gap: 1em;
  justify-content: center;
  flex-wrap: wrap;
  margin: var(--space-md) 0 var(--space-lg);
}
.social-follow .social-btn {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.7em 1.3em;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
  transition: border-color .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
}
.social-follow .social-btn img { width: 1.3em; height: 1.3em; }
.social-follow .social-btn:hover { border-color: var(--ember); color: var(--spark); transform: translateY(-2px); }

/* ---------------------------------------------------------- *
 * Bloques "Quiénes somos"
 * ---------------------------------------------------------- */
.valor-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6em 1.5em;
  height: 100%;
}
.valor-card i { color: var(--ember); font-size: 1.5rem; margin-bottom: 0.5em; display: block; }
.valor-card h4 { margin-bottom: 0.4em; }
.valor-card p { font-size: 0.93rem; margin-bottom: 0; }

/* Fondo circular decorativo y difuminado (efecto atmosférico, no es contenido) */
.bg-blur-circle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60vw; height: 60vw;
  max-width: 520px; max-height: 520px;
  background-image: url('../img/maquina.webp');
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
}

.cards-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (max-width: 700px) {
  .cards-row-2 { grid-template-columns: 1fr; }
}

/* ---- Utilidades puntuales (evitan estilos inline sueltos) ---- */
.section-head-wide { max-width: 56rem; }
.titulo-especial.text-sm { font-size: 1.4rem; }
.relative-section { position: relative; overflow: hidden; }
.z-content { position: relative; z-index: 1; }
.prose-narrow { max-width: 50rem; margin: 0 auto; position: relative; z-index: 1; }

/* ---------------------------------------------------------- *
 * Botón volver arriba
 * ---------------------------------------------------------- */
#backToTop {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 3em; height: 3em;
  border-radius: 50%;
  background: var(--ember-deep);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index: 900;
  cursor: pointer;
}
#backToTop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
#backToTop:hover { background: var(--ember-deep-hover); }