/* ============================================================
   FUEGO SANTO - Pase de fidelidad visual v1
   Complementa fuego-santo-hero-anim.css (no lo sustituye)
   Bloques: grano en bandas oscuras, micro-interacciones,
   transiciones entre secciones, fotos object-fit cover,
   ritmo tipografico, ajustes responsive movil.
   ============================================================ */

/* ------------------------------------------------------------
   1. GRANO / TEXTURA EN BANDAS OSCURAS
   Overlay de ruido SVG (feTurbulence) sobre hero, secciones
   oscuras, banda CTA y footer. Filmico, opacidad baja.
   ------------------------------------------------------------ */
.fs-hero,
.fs-section-dark,
.fs-cta-band,
.fs-footer {
  position: relative;
}

.fs-cta-band,
.fs-footer {
  overflow: hidden;
}

.fs-hero::after,
.fs-section-dark::before,
.fs-cta-band::before,
.fs-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.055;
  mix-blend-mode: overlay;
}

.fs-cta-band::before {
  opacity: 0.09;
  mix-blend-mode: soft-light;
}

.fs-footer::before {
  opacity: 0.045;
}

/* Borde de brasa: linea de transicion entre banda CTA y lo demas */
.fs-cta-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(26,23,20,0) 0%, #D9A441 50%, rgba(26,23,20,0) 100%);
  opacity: 0.55;
  pointer-events: none;
}

/* ------------------------------------------------------------
   2. MICRO-INTERACCIONES: BOTONES
   ------------------------------------------------------------ */
.fs-btn,
.fs-btn-light,
.fs-btn-ghost,
.fs-btn-dark {
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.fs-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(228, 87, 46, 0.35);
}

.fs-btn:active {
  transform: translateY(0);
  box-shadow: 0 5px 14px rgba(228, 87, 46, 0.28);
}

.fs-btn-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.30);
}

.fs-btn-light:active,
.fs-btn-ghost:active,
.fs-btn-dark:active {
  transform: translateY(0);
}

.fs-btn-ghost:hover,
.fs-btn-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

/* ------------------------------------------------------------
   2b. MICRO-INTERACCIONES: TARJETAS Y FILAS
   ------------------------------------------------------------ */
.fs-card {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease;
}

.fs-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 42px rgba(26, 23, 20, 0.16);
  border-color: #D9A441;
}

.fs-card.fs-card-dark:hover {
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5);
  border-color: #6B5636;
}

.fs-cut,
.fs-mi,
.fs-faq-item {
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

.fs-cut:hover,
.fs-mi:hover {
  border-color: #D9A441;
}

/* Nav: subrayado que crece desde la izquierda */
.fs-navlink {
  position: relative;
  transition: color 0.2s ease;
}

.fs-navlink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: #E4572E;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.fs-navlink:hover::after {
  transform: scaleX(1);
}

.fs-footer-link {
  transition: color 0.2s ease;
}

.fs-footer-link:hover {
  color: #F4EDE3;
}

/* ------------------------------------------------------------
   3. TRANSICIONES ENTRE SECCIONES
   Reveal al hacer scroll con animation-timeline: view().
   Usa `translate` (no `transform`) para no pelear con los
   hovers. Degrada sin JS: navegadores sin soporte muestran
   todo estatico.
   ------------------------------------------------------------ */
@keyframes fsRise {
  from {
    opacity: 0;
    translate: 0 26px;
  }
  to {
    opacity: 1;
    translate: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .fs-card,
    .fs-imgslot,
    .fs-h2,
    .fs-lead,
    .fs-kicker,
    .fs-cut,
    .fs-mi,
    .fs-faq-item {
      animation: fsRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}

/* ------------------------------------------------------------
   4. FOTOS: DE PLACEHOLDER A MARCO REAL
   Cuando el slot ya tiene foto: fuera borde punteado y padding,
   proporcion uniforme 4/3, object-fit cover y zoom sutil.
   ------------------------------------------------------------ */
.fs-imgslot:has(img) {
  padding: 0;
  border: 1px solid rgba(217, 164, 65, 0.28);
  overflow: hidden;
  background-color: #12100D;
  aspect-ratio: 4 / 3;
}

.fs-imgslot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.fs-imgslot:has(img):hover img {
  transform: scale(1.045);
}

/* ------------------------------------------------------------
   5. RITMO TIPOGRAFICO
   ------------------------------------------------------------ */
.fs-hero-title {
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.fs-h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.125rem);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.fs-hero-sub,
.fs-lead {
  text-wrap: pretty;
}

.fs-card-title {
  letter-spacing: -0.01em;
}

/* Kicker con guion de brasa (senal de marca, no generico) */
.fs-kicker::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  background: #E4572E;
  margin-right: 10px;
  vertical-align: middle;
}

/* ------------------------------------------------------------
   6. QA RESPONSIVE MOVIL
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .fs-section {
    padding: 4.5rem 20px;
  }

  .fs-hero {
    padding: 90px 20px 70px;
  }

  .fs-cta-band {
    padding: 4.5rem 20px;
  }

  .fs-hero-ctas {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .fs-btn,
  .fs-btn-light,
  .fs-btn-ghost,
  .fs-btn-dark {
    padding: 14px 26px;
  }

  .fs-footer-grid {
    grid-template-columns: 1fr;
    grid-row-gap: 28px;
  }
}

/* ------------------------------------------------------------
   7. NAV MOVIL: HAMBURGUESA (checkbox hack, sin JS)
   DOM esperado dentro de .fs-nav-inner:
   .fs-brand + input.fs-nav-toggle + label.fs-nav-burger + .fs-navlinks
   ------------------------------------------------------------ */
.fs-nav-toggle {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.fs-nav-burger {
  display: none;
}

@media (max-width: 767px) {
  .fs-nav-inner {
    flex-wrap: wrap;
    align-items: center;
  }

  .fs-nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 1px solid rgba(244, 237, 227, 0.28);
    border-radius: 8px;
    cursor: pointer;
  }

  .fs-nav-burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: #F4EDE3;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  .fs-navlinks {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 0 16px;
    grid-column-gap: 0;
    grid-row-gap: 0;
    gap: 0;
  }

  .fs-nav-toggle:checked ~ .fs-navlinks {
    display: flex;
  }

  .fs-navlinks .fs-navlink {
    padding: 13px 4px;
    border-bottom: 1px solid rgba(244, 237, 227, 0.08);
  }

  .fs-navlink::after {
    display: none;
  }

  .fs-navlinks .fs-btn {
    margin-top: 14px;
    text-align: center;
  }

  .fs-nav-toggle:checked ~ .fs-nav-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .fs-nav-toggle:checked ~ .fs-nav-burger span:nth-child(2) {
    opacity: 0;
  }

  .fs-nav-toggle:checked ~ .fs-nav-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* ------------------------------------------------------------
   8. TELEFONO EN iOS: sin azul de auto-deteccion
   Safari inyecta <a href="tel:"> al detectar numeros.
   Hereda el color del texto y sigue siendo tappable.
   ------------------------------------------------------------ */
a[href^="tel"],
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
}

/* ------------------------------------------------------------
   9. ACCESIBILIDAD: MOVIMIENTO REDUCIDO
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .fs-btn,
  .fs-btn-light,
  .fs-btn-ghost,
  .fs-btn-dark,
  .fs-card,
  .fs-cut,
  .fs-mi,
  .fs-faq-item,
  .fs-navlink::after,
  .fs-imgslot img {
    transition: none;
  }

  .fs-btn:hover,
  .fs-btn-light:hover,
  .fs-btn-ghost:hover,
  .fs-btn-dark:hover,
  .fs-card:hover {
    transform: none;
  }

  .fs-imgslot:has(img):hover img {
    transform: none;
  }
}