/* ===== FIRE PREVENTION — estilos carrusel héroe ===== */
/* Archivo: /assets/css/estilos.css */

/* Contenedor principal del carrusel (versión .hc-* si la usas en otra página) */
#heroCarousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

/* Cada slide (apilados uno sobre otro) */
.hc-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .6s ease, visibility .6s ease;
  will-change: opacity, visibility;
}

/* Slide visible */
.hc-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Imagen de fondo opcional */
.hc-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Botones prev/next */
.hc-prev, .hc-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 22px;
  line-height: 44px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.hc-prev:hover, .hc-next:hover {
  background: rgba(0,0,0,.55);
  transform: translateY(-50%) scale(1.04);
}
.hc-prev { left: 12px; }
.hc-next { right: 12px; }

/* Dots */
.hc-dots {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  display: flex; gap: 8px; justify-content: center; align-items: center;
  z-index: 3;
}
.hc-dot {
  width: 10px; height: 10px; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.8);
  background: transparent;
  cursor: pointer;
  transition: width .2s ease, background .2s ease, opacity .2s ease;
  opacity: .9;
}
.hc-dot.is-active {
  width: 26px;
  background: #fff;
}

/* Pequeños */
@media (max-width: 640px) {
  .hc-prev, .hc-next { width: 38px; height: 38px; font-size: 20px; }
  .hc-dot { width: 8px; height: 8px; }
}

/* Asegurar que otros estilos no bloqueen el carrusel */
#heroCarousel * { box-sizing: border-box; }

/* ====== Subrayado animado para subtítulos ====== */
:root{ --fp-primary:#2c6fb2; }

.section-title,
.heading-underline{
  position:relative; display:inline-block; padding-bottom:.25rem;
}
.section-title::after,
.heading-underline::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:3px; background:var(--fp-primary);
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.section-title.is-visible::after,
.heading-underline.is-active::after{
  transform:scaleX(1);
}

/* ====== Subrayado animado en links del header ======
   Estructura esperada:
   <a class="nav-link">Inicio <span class="link-underline"></span></a> */
.nav-link{ position:relative; display:inline-flex; align-items:center; }
.nav-link .link-underline{
  position:absolute; left:.75rem; right:.75rem; bottom:.35rem;
  height:2px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav-link:hover .link-underline,
.nav-link[aria-current="page"] .link-underline{ transform:scaleX(1); }

/* ====== Animación de aparición al hacer scroll ====== */
.reveal{
  opacity:0; transform:translateY(12px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{ opacity:1; transform:none; }

/* =================================================================== */
/* ============================  TEMA  ================================ */
/* =================================================================== */

/* Variables del tema: usa html.dark (tu toggle ya lo maneja así) */
html{
  --fp-bg: #f6f8fb;
  --fp-surface: #ffffff;     /* fondos de cards/superficies */
  --fp-text: #0b1324;
  --fp-muted: #6b7280;
  --fp-link: #2c6fb2;
  --fp-border: rgba(2,6,23,.08);
  --fp-shadow: 0 10px 28px rgba(0,0,0,.06);
  --fp-primary: #2c6fb2;
}
html.dark{
  --fp-bg: #0a1222;
  --fp-surface: #0b1324;
  --fp-text: #e5e7eb;
  --fp-muted: #94a3b8;
  --fp-link: #7bb5ff;
  --fp-border: rgba(148,163,184,.18);
  --fp-shadow: 0 10px 28px rgba(0,0,0,.18);
}

html,body{ background: var(--fp-bg); color: var(--fp-text); }

/* Patch de contraste para cards y textos en Home/Servicios */
.ix-card, .sv-card, .sv-sec{
  background: var(--fp-surface) !important;
  color: var(--fp-text) !important;
  box-shadow: var(--fp-shadow);
  border: 1px solid var(--fp-border);
}
.ix-h3, .sv-card h3, .sv-sec h3{ color: var(--fp-text) !important; }
.ix-muted, .sv-muted, .prj-text{ color: var(--fp-muted) !important; }
.ix-list a, .sv-list a{ color: var(--fp-link) !important; }
.ix-list a:hover, .sv-list a:hover{ text-decoration: underline; }