/* ==========================================================
   extra.css — comportamientos que en Base44 hacía React/Framer
   (el diseño base está en style.css, copiado del sitio original)
   ========================================================== */

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* Entrada suave al hacer scroll */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Menú móvil */
.menu-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease, visibility 0s;
}
.menu-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity .4s ease, transform .4s ease;
}
.menu-overlay.is-open .menu-item {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 80ms + 100ms);
}
body.menu-locked { overflow: hidden; }

/* Puntos de navegación lateral */
.side-dot.is-active .side-bar { height: 3rem; background-color: hsl(var(--cobalt)); }

/* Línea de tiempo Veri*factu (acordeón) */
.vf-dot {
  background-color: hsl(var(--bone));
  border-color: hsl(var(--foreground) / .4);
  transform: translateX(-50%);
  transition: transform .3s ease, background-color .3s ease, border-color .3s ease;
}
.vf-item.is-active .vf-dot {
  background-color: hsl(var(--cobalt));
  border-color: hsl(var(--cobalt));
  transform: translateX(-50%) scale(1.25);
}
.vf-n { color: hsl(var(--slate-ink)); display: block; }
.vf-item.is-active .vf-n { color: hsl(var(--cobalt)); }
.vf-title { color: hsl(var(--slate-ink)); }
.vf-item.is-active .vf-title { color: hsl(var(--obsidian)); }
.vf-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .4s cubic-bezier(.2,.8,.2,1), opacity .4s ease, margin-top .4s ease;
}
.vf-body > div { overflow: hidden; min-height: 0; }
.vf-item.is-active .vf-body { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; }

/* Tarjetas de servicios: capa con las reparaciones */
.svc-overlay {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.svc:hover .svc-overlay,
.svc:focus-within .svc-overlay,
.svc.is-open .svc-overlay {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.svc { cursor: pointer; }

/* Botón secundario (WhatsApp) */
.btn-outline { background: transparent; }
.btn-outline:hover {
  background-color: hsl(var(--cobalt));
  border-color: hsl(var(--cobalt));
  color: hsl(var(--bone));
}

/* Formulario */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status { min-height: 1.25rem; color: hsl(var(--cobalt)); }
.form-status.is-error { color: hsl(var(--destructive)); }
#cf-submit[disabled] { opacity: .6; cursor: wait; }
input:invalid.touched, textarea:invalid.touched { border-color: hsl(var(--destructive) / .7); }

/* Accesibilidad: foco visible */
a:focus-visible, button:focus-visible, .svc:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid hsl(var(--cobalt));
  outline-offset: 3px;
}

/* Respetar "reducir movimiento" */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .ticker-track, .pulse-ring, .animate-pulse { animation: none !important; }
  .menu-item, .vf-body, .svc-overlay { transition: none; }
}

/* Zoom lento en las imágenes del hero (clase que el CSS original no incluía) */
.duration-\[1\.2s\] { transition-duration: 1.2s; }

/* Móvil: el botón MENÚ queda legible sobre las fotos y no pisa el índice "01 / 05" */
#menu-open {
  background: hsl(var(--bone) / .92);
  padding: .5rem .75rem;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@media (max-width: 767px) { .hero-idx-left { visibility: hidden; } }