@charset "UTF-8";
/*--------------------------------------------------------------
# ZEINER — Capa premium (movimiento + accesibilidad)
# Aditiva: se carga DESPUÉS de main.css y no reemplaza estilos base.
# Ver premium.js para el motor de reveal.
--------------------------------------------------------------*/

:root {
  --z-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --z-reveal-y: 20px;
  --z-reveal-time: 0.7s;
}

/* --- Scroll reveal -------------------------------------------------
   El estado inicial (oculto) solo se aplica cuando el JS marca
   <html class="reveal-ready"> ANTES del primer render (sin parpadeo).
   Un failsafe en el <head> garantiza que el contenido nunca quede
   oculto si el motor de reveal no llega a ejecutarse. */
html.reveal-ready :is(
  .section-title,
  .about-content, .image-block, .trust-item,
  .diagnostic-note, .service-item, .not-repaired-block,
  .process-card, .process-cta,
  .feature-card,
  .intro-block, .faq-item,
  .map-wrapper, .contact-card, .contact-form-container
) {
  opacity: 0;
  transform: translateY(var(--z-reveal-y));
  transition: opacity var(--z-reveal-time) var(--z-ease),
              transform var(--z-reveal-time) var(--z-ease);
  will-change: opacity, transform;
}

html.reveal-ready :is(
  .section-title,
  .about-content, .image-block, .trust-item,
  .diagnostic-note, .service-item, .not-repaired-block,
  .process-card, .process-cta,
  .feature-card,
  .intro-block, .faq-item,
  .map-wrapper, .contact-card, .contact-form-container
).is-in {
  opacity: 1;
  transform: none;
}

/* Accesibilidad: quien pide menos movimiento, ve todo estático */
@media (prefers-reduced-motion: reduce) {
  html.reveal-ready :is(
    .section-title, .about-content, .image-block, .trust-item,
    .diagnostic-note, .service-item, .not-repaired-block,
    .process-card, .process-cta, .feature-card,
    .intro-block, .faq-item, .map-wrapper, .contact-card, .contact-form-container
  ) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- Foco visible accesible (navegación por teclado) --------------
   Aporta pulido "premium" real y cumple accesibilidad, sin chocar
   con los hover ya existentes. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(15, 107, 53, 0.55);
  outline-offset: 3px;
  border-radius: 6px;
}