/* =============================================================================
   TALLER AUTOELÉCTRICO ALVARADO — Hoja de estilos
   Paleta oscura cálida · tipografía grande · composiciones asimétricas
   -----------------------------------------------------------------------------
   Organización:
   1. Tokens (variables de color, tipografía, easings)
   2. Reset y base
   3. Utilidades
   4. Tipografía
   5. Componentes (botones, tarjetas, badges)
   6. Grano/ruido global
   7. Navegación
   8. Hero
   9. Marquee
   10. Servicios
   11. Por qué Alvarado
   12. Proceso
   13. Reseñas
   14. Ubicación
   15. Contacto / CTA final
   16. Footer
   17. WhatsApp flotante + cursor
   18. Reveal / animaciones
   19. Responsive
   20. Reduced-motion
   ============================================================================= */

/* =============================================================
   1. TOKENS
   ============================================================= */
:root {
  /* --- Base --- */
  --bg:        #0d0b0a;   /* negro cálido — fondo principal */
  --bg-alt:    #12100e;   /* negro alterno — reseñas y ubicación */
  --bg-card:   #17140f;   /* tarjetas sobre el fondo */

  /* --- Marca --- */
  --guinda:    #8e1d22;   /* guinda Alvarado */
  --guinda-2:  #b33840;   /* guinda más viva (hover/glow) */
  --crema:     #f2d9a8;   /* crema/dorado — acentos, estrellas */

  /* --- Texto --- */
  --titulo:    #f7efdd;   /* blanco cálido — títulos */
  --texto:     #f2e8d5;   /* texto general (usar con opacidad) */

  /* --- Conversión --- */
  --wa:        #25D366;   /* verde WhatsApp */
  --wa-txt:    #06110a;   /* texto sobre verde */

  /* --- Bordes y detalles (crema translúcido) --- */
  --linea:     rgba(242, 217, 168, .12);
  --linea-2:   rgba(242, 217, 168, .22);
  --linea-3:   rgba(242, 217, 168, .45);

  /* --- Tipografía --- */
  --display:  "Fraunces", Georgia, "Times New Roman", serif;
  --sans:     "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:     "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;

  /* --- Easings (nunca ease por defecto) --- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Medidas --- */
  --nav-h: 74px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1320px;
  --radio: 16px;
}

/* =============================================================
   2. RESET Y BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;              /* clip no rompe sticky (nunca hidden) */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);  /* offset por la nav fija */
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
ul { list-style: none; padding: 0; }

::selection { background: var(--guinda); color: var(--titulo); }

:focus-visible {
  outline: 2px solid var(--crema);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================
   3. UTILIDADES
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .6rem 1rem; background: var(--crema); color: var(--bg);
  border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.kicker {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--crema);
  opacity: .85;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
}
.kicker::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--crema);
  opacity: .6;
}

.section {
  position: relative;
  padding-block: clamp(4.5rem, 11vw, 9rem);
}

/* Título de sección grande y editorial */
.section-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: .98;
  letter-spacing: -0.02em;
  color: var(--titulo);
  text-wrap: balance;
}
.section-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--crema);
}

/* =============================================================
   4. TIPOGRAFÍA
   ============================================================= */
h1, h2, h3, h4 {
  text-wrap: balance;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--titulo);
  font-weight: 600;
}

/* =============================================================
   5. COMPONENTES
   ============================================================= */

/* --- Botones --- */
.btn {
  --_pad-y: .95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: var(--_pad-y) 1.6rem;
  border-radius: 100px;
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: .01em;
  line-height: 1;
  cursor: pointer;
  transition: transform .5s var(--ease-out),
              background .5s var(--ease-out),
              box-shadow .5s var(--ease-out),
              color .5s var(--ease-out),
              border-color .5s var(--ease-out);
  will-change: transform;
}
.btn svg { width: 1.15em; height: 1.15em; }

/* Primario — verde WhatsApp */
.btn-wa {
  background: var(--wa);
  color: var(--wa-txt);
  box-shadow: 0 8px 30px -12px rgba(37, 211, 102, .6);
}
.btn-wa:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -12px rgba(37, 211, 102, .75);
  background: #2ee671;
}
.btn-wa:active { transform: translateY(-1px) scale(.98); }

/* Secundario — guinda */
.btn-guinda {
  background: var(--guinda);
  color: var(--titulo);
  box-shadow: 0 8px 30px -14px rgba(142, 29, 34, .8);
}
.btn-guinda:hover {
  transform: translateY(-3px);
  background: var(--guinda-2);
  box-shadow: 0 16px 44px -14px rgba(179, 56, 64, .85);
}
.btn-guinda:active { transform: translateY(-1px) scale(.98); }

/* Fantasma — borde crema */
.btn-ghost {
  background: transparent;
  color: var(--titulo);
  border: 1px solid var(--linea-2);
}
.btn-ghost:hover {
  transform: translateY(-3px);
  border-color: var(--linea-3);
  background: rgba(242, 217, 168, .06);
}
.btn-ghost:active { transform: translateY(-1px) scale(.98); }

.btn-lg { --_pad-y: 1.15rem; padding-inline: 2.2rem; font-size: 1.08rem; }

/* --- Badge --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border-radius: 100px;
  background: rgba(19, 16, 14, .55);
  border: 1px solid var(--linea-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .8rem;
  font-weight: 500;
  color: var(--texto);
  letter-spacing: .01em;
}
.badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--crema);
  box-shadow: 0 0 0 3px rgba(242, 217, 168, .18);
}
.badge.badge-guinda .dot { background: var(--guinda-2); box-shadow: 0 0 0 3px rgba(179,56,64,.22); }

/* --- Placeholder de imagen (mientras no hay fotos reales) ---------------
   Div con degradado de la paleta, ruido sutil y etiqueta en crema que
   dice qué imagen va y qué medidas necesita. Se sustituye por un <img>. */
.ph {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 200px;
  background:
    linear-gradient(135deg, rgba(142,29,34,.28) 0%, transparent 55%),
    linear-gradient(300deg, rgba(242,217,168,.10) 0%, transparent 50%),
    var(--bg-card);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ph::before {                         /* ruido sutil */
  content: "";
  position: absolute; inset: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
}
.ph::after {                          /* etiqueta central */
  content: attr(data-ph);
  position: relative;
  z-index: 1;
  max-width: 78%;
  text-align: center;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--crema);
  opacity: .72;
  padding: .8rem 1.1rem;
  border: 1px dashed var(--linea-3);
  border-radius: 10px;
  background: rgba(13,11,10,.35);
}

/* =============================================================
   6. GRANO / RUIDO GLOBAL (textura de película sobre el negro)
   ============================================================= */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =============================================================
   7. NAVEGACIÓN
   ============================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 130;                 /* por encima del menú móvil (110) para que la ✕ siempre se pueda pulsar */
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background .5s var(--ease-out), border-color .5s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(13, 11, 10, .72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--linea);
}
.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Logo tipográfico provisional */
.logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--titulo);
  font-family: var(--display);
  z-index: 120;
}
.logo svg { width: 30px; height: 30px; flex: none; }
.logo img { height: 42px; width: auto; flex: none; }         /* logo real */
.logo-txt { display: flex; flex-direction: column; line-height: 1; }
.logo-txt b {
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: .01em;
}
.logo-txt span {
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--crema);
  opacity: .8;
  margin-top: .18rem;
}

/* Links de ancla (centro) */
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.2vw, 2.1rem);
}
.nav-links a {
  position: relative;
  font-size: .92rem;
  font-weight: 500;
  color: var(--texto);
  opacity: .78;
  padding: .3rem 0;
  transition: opacity .4s var(--ease-out);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--crema);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-cta { display: flex; align-items: center; gap: .8rem; }

/* Botón hamburguesa (móvil) */
.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  border-radius: 12px;
  border: 1px solid var(--linea-2);
  z-index: 120;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 12px; right: 12px; height: 2px;
  background: var(--titulo);
  border-radius: 2px;
  transition: transform .45s var(--ease-out), opacity .3s var(--ease-out);
}
.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { top: 23px; }
.nav-toggle span:nth-child(3) { top: 29px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Menú fullscreen móvil */
.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2rem;
  padding: var(--gutter);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--ease-out);
  pointer-events: none;
}
.nav-mobile.is-open {
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
}
.nav-mobile a {
  font-family: var(--display);
  font-size: clamp(2rem, 9vw, 3.4rem);
  font-weight: 500;
  color: var(--titulo);
  line-height: 1.1;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.nav-mobile a em { font-style: italic; color: var(--crema); }
.nav-mobile.is-open a {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--i, 0) * 70ms + 120ms);
}
.nav-mobile .nav-mobile-foot {
  margin-top: 2rem;
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--texto);
  opacity: .6;
  transform: none;
}

/* =============================================================
   8. HERO
   ============================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--nav-h) + 2rem);
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
}

/* Imagen de fondo (placeholder) */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg .ph,
.hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  border: 0;
  border-radius: 0;
}
/* Overlay oscuro + gradiente para legibilidad */
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(13,11,10,.55) 0%, rgba(13,11,10,.35) 35%, rgba(13,11,10,.9) 100%),
    linear-gradient(90deg, rgba(13,11,10,.8) 0%, rgba(13,11,10,.2) 60%);
  z-index: 2;
}

/* Circuito eléctrico animado (detalle memorable) */
.hero-circuit {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  opacity: .5;
  pointer-events: none;
}
.hero-circuit .trace {
  fill: none;
  stroke: var(--crema);
  stroke-width: 1;
  opacity: .16;
}
.hero-circuit .node {
  fill: var(--crema);
  opacity: .22;
}
/* La chispa que recorre las pistas */
.hero-circuit .spark {
  fill: none;
  stroke: var(--crema);
  stroke-width: 2.4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(242, 217, 168, .9));
  stroke-dasharray: 26 1400;
  stroke-dashoffset: 0;
  animation: sparkRun 5.5s linear infinite;
}
.hero-circuit .spark.s2 { animation-duration: 7s; animation-delay: 1.4s; stroke: var(--guinda-2); filter: drop-shadow(0 0 6px rgba(179,56,64,.9)); }
.hero-circuit .spark.s3 { animation-duration: 6.2s; animation-delay: 3s; }
@keyframes sparkRun {
  from { stroke-dashoffset: 1426; }
  to   { stroke-dashoffset: 0; }
}

.hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
}
.hero-eyebrow { margin-bottom: 1.6rem; }

.hero-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.9rem, 9.5vw, 8.5rem);
  line-height: .93;
  letter-spacing: -0.03em;
  color: var(--titulo);
  max-width: 16ch;
  text-wrap: balance;
}
.hero-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--crema);
}
.hero-title .line { display: block; }

.hero-sub {
  margin-top: 1.7rem;
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: var(--texto);
  opacity: .82;
}

.hero-actions {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Badges de confianza flotando */
.hero-badges {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}
.hero-badges .badge {
  animation: badgeFloat 6s var(--ease-soft) infinite;
}
.hero-badges .badge:nth-child(2) { animation-delay: -2s; }
.hero-badges .badge:nth-child(3) { animation-delay: -4s; }
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Indicador de scroll */
.hero-scroll {
  position: absolute;
  bottom: 1.4rem; right: var(--gutter);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texto);
  opacity: .5;
}
.hero-scroll .bar {
  width: 1px; height: 44px;
  background: linear-gradient(180deg, var(--crema), transparent);
  transform-origin: top;
  animation: scrollBar 2.4s var(--ease-soft) infinite;
}
@keyframes scrollBar {
  0%, 100% { transform: scaleY(.35); opacity: .4; }
  50%      { transform: scaleY(1); opacity: 1; }
}

/* =============================================================
   9. MARQUEE
   ============================================================= */
.marquee {
  position: relative;
  background: var(--guinda);
  color: var(--crema);
  padding-block: 1.15rem;
  overflow: hidden;
  border-block: 1px solid rgba(0,0,0,.25);
}
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marqueeMove 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group {
  display: flex;
  align-items: center;
  flex: none;
}
.marquee-item {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  font-weight: 500;
  white-space: nowrap;
  padding-inline: 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
}
.marquee-item::after {
  content: "·";
  color: rgba(242, 217, 168, .55);
  font-style: normal;
}
@keyframes marqueeMove {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =============================================================
   10. SERVICIOS
   ============================================================= */
.servicios-head {
  display: grid;
  gap: 1.4rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 60ch;
}
.servicios-head p {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--texto);
  opacity: .75;
}

.servicios-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

.serv-card {
  position: relative;
  padding: clamp(1.6rem, 2.4vw, 2.2rem);
  background: var(--bg-card);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform .55s var(--ease-out),
              border-color .55s var(--ease-out),
              box-shadow .55s var(--ease-out);
}
/* Glow guinda al pasar el cursor */
.serv-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 50% 0%, rgba(179, 56, 64, .28), transparent 60%);
  opacity: 0;
  transition: opacity .55s var(--ease-out);
  pointer-events: none;
}
.serv-card:hover {
  transform: translateY(-6px);
  border-color: var(--linea-3);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.9),
              0 0 0 1px rgba(242,217,168,.06);
}
.serv-card:hover::before { opacity: 1; }

.serv-icon {
  width: 54px; height: 54px;
  margin-bottom: 1.3rem;
  display: grid;
  place-items: center;
  border-radius: 13px;
  border: 1px solid var(--linea-2);
  background: rgba(242, 217, 168, .04);
  color: var(--crema);
  transition: border-color .55s var(--ease-out), background .55s var(--ease-out);
}
.serv-card:hover .serv-icon { border-color: var(--linea-3); background: rgba(242,217,168,.08); }
.serv-icon svg { width: 28px; height: 28px; }

.serv-card h3 {
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--titulo);
  line-height: 1.15;
  margin-bottom: .55rem;
}
.serv-card p {
  font-size: .96rem;
  color: var(--texto);
  opacity: .72;
  line-height: 1.55;
  margin-bottom: 1.3rem;
}
.serv-cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--crema);
  opacity: .85;
  transition: gap .4s var(--ease-out), opacity .4s var(--ease-out);
}
.serv-cta svg { width: 1em; height: 1em; }
.serv-card:hover .serv-cta { gap: .75rem; opacity: 1; }

/* =============================================================
   10.5 TRABAJOS / GALERÍA (autos que pasan por el taller)
   ============================================================= */
.trabajos { background: var(--bg); }
.trabajos-head {
  display: grid;
  gap: 1.3rem;
  max-width: 62ch;
  margin-bottom: clamp(2.2rem, 4.5vw, 3.5rem);
}
.trabajos-head p {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--texto);
  opacity: .75;
}

/* Masonry con columnas (respeta la proporción real de cada foto) */
.galeria {
  columns: 1;
  column-gap: 1.1rem;
}
.galeria-item {
  position: relative;
  display: block;
  break-inside: avoid;
  margin-bottom: 1.1rem;
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--linea);
  background: var(--bg-card);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out),
              border-color .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.galeria.is-visible .galeria-item { opacity: 1; transform: none; }
.galeria.is-visible .galeria-item:nth-child(1) { transition-delay: .05s; }
.galeria.is-visible .galeria-item:nth-child(2) { transition-delay: .12s; }
.galeria.is-visible .galeria-item:nth-child(3) { transition-delay: .19s; }
.galeria.is-visible .galeria-item:nth-child(4) { transition-delay: .26s; }
.galeria.is-visible .galeria-item:nth-child(5) { transition-delay: .33s; }
.galeria.is-visible .galeria-item:nth-child(6) { transition-delay: .40s; }

.galeria-item img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(1.03) brightness(.96);
  transition: transform .8s var(--ease-out), filter .8s var(--ease-out);
}
.galeria-item:hover {
  border-color: var(--linea-3);
  box-shadow: 0 26px 60px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(179,56,64,.14);
}
.galeria-item:hover img { transform: scale(1.05); filter: saturate(1.12) brightness(1.02); }

/* Etiqueta inferior (siempre visible, sutil) */
.galeria-cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.4rem 1.1rem 1rem;
  background: linear-gradient(transparent, rgba(13,11,10,.55) 40%, rgba(13,11,10,.9));
  display: flex;
  align-items: center;
  gap: .6rem;
  pointer-events: none;
}
.galeria-cap .marca {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--titulo);
}
.galeria-cap .tag {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--crema);
  opacity: .75;
}

/* Insignia destacada (foto del diagnóstico) */
.galeria-badge {
  position: absolute;
  top: .9rem; left: .9rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .8rem;
  border-radius: 100px;
  background: var(--guinda);
  color: var(--crema);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px -10px rgba(142,29,34,.9);
}
.galeria-badge svg { width: 13px; height: 13px; }

@media (min-width: 640px)  { .galeria { columns: 2; } }
@media (min-width: 1024px) { .galeria { columns: 3; } }

/* =============================================================
   11. POR QUÉ ALVARADO
   ============================================================= */
.porque {
  background: var(--bg);
  position: relative;
}
.porque-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

/* Contadores */
.contadores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--linea);
  padding-top: 2.2rem;
}
.contador .num {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1;
  color: var(--crema);
  letter-spacing: -0.03em;
  display: flex;
  align-items: baseline;
}
.contador .num .suf { font-size: .55em; opacity: .7; }
.contador .lbl {
  margin-top: .5rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto);
  opacity: .6;
  line-height: 1.4;
}

/* Razones */
.razones { display: grid; gap: 1rem; }
.razon {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--linea);
}
.razon:first-child { border-top: 1px solid var(--linea); }
.razon-check {
  width: 34px; height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--guinda);
  color: var(--crema);
}
.razon-check svg { width: 17px; height: 17px; }
.razon h4 {
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--titulo);
  margin-bottom: .25rem;
}
.razon p { font-size: .94rem; color: var(--texto); opacity: .7; }

/* =============================================================
   12. PROCESO
   ============================================================= */
.proceso { background: var(--bg-alt); }
.proceso-wrap {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.proceso-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.2rem;
  position: relative;
}
/* Línea que se dibuja */
.proceso-line {
  position: absolute;
  left: 26px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--linea);
  overflow: hidden;
}
.proceso-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--crema), var(--guinda-2));
  transform: scaleY(var(--draw, 0));
  transform-origin: top;
  transition: transform .1s linear;
}
.paso {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 1.4rem;
  align-items: start;
}
.paso-num {
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--linea-2);
  font-family: var(--mono);
  font-size: .95rem;
  color: var(--crema);
  z-index: 2;
  transition: border-color .5s var(--ease-out), background .5s var(--ease-out), color .5s var(--ease-out);
}
.paso.is-visible .paso-num {
  border-color: var(--guinda-2);
  background: var(--guinda);
  color: var(--titulo);
}
.paso h3 {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 600;
  color: var(--titulo);
  margin-bottom: .35rem;
  padding-top: .5rem;
}
.paso p { font-size: 1rem; color: var(--texto); opacity: .72; max-width: 46ch; }

/* =============================================================
   13. RESEÑAS
   ============================================================= */
.resenas { background: var(--bg-alt); }
.resenas-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
}
.rating-big {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.rating-big .score {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(3rem, 8vw, 5rem);
  line-height: .9;
  color: var(--crema);
  letter-spacing: -0.03em;
}
.rating-big .meta { line-height: 1.4; }
.stars { display: flex; gap: 3px; margin-bottom: .3rem; }
.stars svg { width: 20px; height: 20px; color: var(--crema); }
.rating-big .meta span {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto);
  opacity: .65;
}

/* Carrusel */
.resenas-carousel {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  padding-block: .5rem 2rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
}
.resenas-carousel::-webkit-scrollbar { display: none; }
.resena-card {
  flex: 0 0 min(88%, 400px);
  scroll-snap-align: start;
  background: var(--bg-card);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transition: border-color .5s var(--ease-out), transform .5s var(--ease-out);
}
.resena-card:hover { border-color: var(--linea-2); transform: translateY(-4px); }
.resena-card .stars svg { width: 16px; height: 16px; }
.resena-txt {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--texto);
  opacity: .88;
  flex: 1;
}
.resena-autor {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.avatar {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--guinda);
  color: var(--crema);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
}
.resena-autor .nombre { font-weight: 600; color: var(--titulo); font-size: .98rem; }
.resena-autor .fuente { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: var(--texto); opacity: .5; text-transform: uppercase; }

.resenas-foot {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.carousel-nav { display: flex; gap: .6rem; }
.carousel-nav button {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--linea-2);
  color: var(--titulo);
  display: grid;
  place-items: center;
  transition: border-color .4s var(--ease-out), background .4s var(--ease-out), transform .4s var(--ease-out);
}
.carousel-nav button:hover { border-color: var(--linea-3); background: rgba(242,217,168,.06); }
.carousel-nav button:active { transform: scale(.92); }
.carousel-nav svg { width: 18px; height: 18px; }

/* =============================================================
   14. UBICACIÓN
   ============================================================= */
.ubicacion { background: var(--bg-alt); }
.ubicacion-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.mapa {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--linea);
  min-height: 320px;
  background: var(--bg-card);
}
.mapa iframe {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  /* Filtro para que combine con la paleta oscura */
  filter: grayscale(1) invert(.92) contrast(.92) hue-rotate(180deg) brightness(.9) sepia(.15);
  transition: filter .6s var(--ease-out);
}
.mapa:hover iframe { filter: grayscale(.4) invert(.9) contrast(.95) hue-rotate(180deg) brightness(.95); }

.info-panel { display: flex; flex-direction: column; gap: 1.5rem; }
.info-block h3 {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--crema);
  opacity: .8;
  margin-bottom: .7rem;
}
.info-block .dato { font-size: 1.08rem; color: var(--titulo); line-height: 1.5; }
.info-block .dato a { border-bottom: 1px solid var(--linea-2); transition: border-color .4s var(--ease-out); }
.info-block .dato a:hover { border-color: var(--crema); }

/* Estado abierto/cerrado */
.estado {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1rem;
  border-radius: 100px;
  border: 1px solid var(--linea-2);
  font-weight: 600;
  font-size: .92rem;
}
.estado .pip { width: 9px; height: 9px; border-radius: 50%; }
.estado.abierto { color: var(--wa); }
.estado.abierto .pip { background: var(--wa); box-shadow: 0 0 0 4px rgba(37,211,102,.18); animation: pulsePip 2s infinite; }
.estado.cerrado { color: #d98a8a; }
.estado.cerrado .pip { background: #d98a8a; box-shadow: 0 0 0 4px rgba(217,138,138,.16); }
@keyframes pulsePip { 0%,100%{box-shadow:0 0 0 4px rgba(37,211,102,.18);} 50%{box-shadow:0 0 0 7px rgba(37,211,102,.05);} }

/* Tabla de horario */
.horario-tabla { width: 100%; border-collapse: collapse; margin-top: .3rem; }
.horario-tabla th { text-align: left; }
.horario-tabla td, .horario-tabla th {
  padding: .55rem 0;
  border-bottom: 1px solid var(--linea);
  font-size: .96rem;
}
.horario-tabla .dia { color: var(--texto); opacity: .75; }
.horario-tabla .hrs { text-align: right; color: var(--titulo); font-variant-numeric: tabular-nums; }
.horario-tabla tr.hoy .dia,
.horario-tabla tr.hoy .hrs { color: var(--crema); font-weight: 600; opacity: 1; }
.horario-tabla tr.hoy { position: relative; }
.horario-tabla tr.hoy .dia { padding-left: 1rem; }
.horario-tabla tr.hoy .dia::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 3px;
  background: var(--guinda-2);
}

/* =============================================================
   15. CONTACTO / CTA FINAL
   ============================================================= */
.contacto {
  position: relative;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(142, 29, 34, .22), transparent 55%),
    var(--bg);
  overflow: hidden;
}
.contacto-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
.contacto-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: .95;
  color: var(--titulo);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.contacto-title em { font-style: italic; color: var(--crema); }
.contacto-sub { margin-top: 1.3rem; font-size: 1.1rem; color: var(--texto); opacity: .78; max-width: 42ch; }

.contacto-directo { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.4rem; }
.tel-grande {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--titulo);
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  width: fit-content;
  transition: color .4s var(--ease-out);
}
.tel-grande:hover { color: var(--crema); }
.tel-grande svg { width: .8em; height: .8em; color: var(--crema); }
.contacto-email {
  font-family: var(--mono);
  font-size: .95rem;
  color: var(--texto);
  opacity: .75;
}
.contacto-email a { border-bottom: 1px solid var(--linea-2); }
.contacto-email a:hover { border-color: var(--crema); color: var(--crema); }

/* Formulario que arma el WhatsApp */
.form-wa {
  background: var(--bg-card);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.form-wa .form-titulo {
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--titulo);
  margin-bottom: .4rem;
}
.form-wa .form-nota { font-size: .88rem; color: var(--texto); opacity: .6; margin-bottom: 1.5rem; }
.campo { margin-bottom: 1.1rem; }
.campo label {
  display: block;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto);
  opacity: .7;
  margin-bottom: .5rem;
}
.campo input, .campo textarea {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--bg);
  border: 1px solid var(--linea-2);
  border-radius: 10px;
  color: var(--titulo);
  font: inherit;
  font-size: .98rem;
  transition: border-color .4s var(--ease-out), background .4s var(--ease-out);
}
.campo input::placeholder, .campo textarea::placeholder { color: rgba(242,232,213,.35); }
.campo input:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--linea-3);
  background: rgba(242,217,168,.03);
}
.campo textarea { resize: vertical; min-height: 92px; }
.form-wa button { width: 100%; margin-top: .5rem; }

/* =============================================================
   16. FOOTER
   ============================================================= */
.footer {
  background: #080706;
  border-top: 1px solid var(--linea);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--linea);
}
.footer-brand .logo { margin-bottom: 1.2rem; }
.footer-brand .logo img { height: 54px; }
.footer-brand p { font-size: .94rem; color: var(--texto); opacity: .6; max-width: 34ch; line-height: 1.6; }
.footer-col h4 {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--crema);
  opacity: .8;
  margin-bottom: 1.1rem;
}
.footer-col ul { display: grid; gap: .7rem; }
.footer-col a, .footer-col li {
  font-size: .95rem;
  color: var(--texto);
  opacity: .7;
  transition: opacity .4s var(--ease-out), color .4s var(--ease-out);
}
.footer-col a:hover { opacity: 1; color: var(--crema); }
.footer-bottom {
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}
.footer-bottom p { font-family: var(--mono); font-size: .74rem; color: var(--texto); opacity: .5; letter-spacing: .04em; }

/* =============================================================
   17. WHATSAPP FLOTANTE + CURSOR
   ============================================================= */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0;
  opacity: 0;
  transform: translateY(20px) scale(.9);
  pointer-events: none;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.wa-float.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.wa-float-btn {
  position: relative;
  width: 60px; height: 60px;
  flex: none;
  border-radius: 50%;
  background: var(--wa);
  color: var(--wa-txt);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 34px -10px rgba(37,211,102,.7);
  transition: transform .5s var(--ease-out);
}
.wa-float-btn svg { width: 30px; height: 30px; }
.wa-float-btn:hover { transform: scale(1.08); }
/* Pulso sutil */
.wa-float-btn::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--wa);
  animation: waPulse 2.4s var(--ease-out) infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.7); opacity: 0; }
}
/* Tooltip */
.wa-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  white-space: nowrap;
  background: var(--titulo);
  color: var(--bg);
  padding: .6rem .95rem;
  border-radius: 100px;
  font-size: .85rem;
  font-weight: 600;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.7);
  opacity: 0;
  transform: translateX(10px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
  pointer-events: none;
}
.wa-tooltip::after {
  content: "";
  position: absolute;
  right: -5px; top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px; height: 10px;
  background: var(--titulo);
}
.wa-float.show-tip .wa-tooltip,
.wa-float-btn:hover + .wa-tooltip,
.wa-float:hover .wa-tooltip { opacity: 1; transform: translateX(0); }

/* Cursor personalizado (solo desktop) */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 9998;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .3s var(--ease-out);
  mix-blend-mode: difference;
}
.cursor.is-ready { opacity: 1; }
.cursor-dot {
  width: 7px; height: 7px;
  background: var(--crema);
  margin: -3.5px 0 0 -3.5px;
  transition: transform .2s var(--ease-out);
}
.cursor-ring {
  width: 38px; height: 38px;
  border: 1px solid rgba(242, 217, 168, .6);
  margin: -19px 0 0 -19px;
  transition: transform .35s var(--ease-out), width .35s var(--ease-out), height .35s var(--ease-out), border-color .35s var(--ease-out);
}
.cursor-ring.is-hover {
  width: 58px; height: 58px;
  margin: -29px 0 0 -29px;
  border-color: var(--crema);
  background: rgba(242,217,168,.06);
}

/* =============================================================
   17.5 VISOR DE GALERÍA (LIGHTBOX)
   ============================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 7, 6, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease-out), visibility .45s var(--ease-out);
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lb-figure {
  position: relative;
  margin: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  transform: scale(.94);
  opacity: 0;
  transition: transform .5s var(--ease-out), opacity .5s var(--ease-out);
}
.lightbox.is-open .lb-figure { transform: scale(1); opacity: 1; }

.lb-img {
  max-width: min(92vw, 1100px);
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--linea-2);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
  background: var(--bg-card);
}
.lb-cap {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--display);
  color: var(--titulo);
}
.lb-cap-marca { font-size: 1.15rem; font-weight: 600; }
.lb-cap-tag {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--crema);
  opacity: .8;
  padding: .25rem .6rem;
  border: 1px solid var(--linea-2);
  border-radius: 100px;
}
.lb-cap-tag:empty { display: none; }

/* Controles */
.lb-btn {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  color: var(--titulo);
  background: rgba(19, 16, 14, .6);
  border: 1px solid var(--linea-2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .4s var(--ease-out), border-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.lb-btn svg { width: 24px; height: 24px; }
.lb-btn:hover { background: var(--guinda); border-color: var(--guinda-2); }
.lb-btn:active { transform: scale(.92); }
.lb-close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lb-prev { left: clamp(.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-prev:active, .lb-next:active { transform: translateY(-50%) scale(.92); }

.lb-count {
  position: absolute;
  bottom: clamp(1rem, 3vw, 1.8rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--texto);
  opacity: .6;
}

/* La galería ahora es clicable como botón */
.galeria-item[data-lightbox] { cursor: pointer; }

@media (max-width: 640px) {
  .lb-prev { left: .5rem; }
  .lb-next { right: .5rem; }
  .lb-btn { width: 46px; height: 46px; }
  .lb-img { max-height: 72vh; }
}

/* =============================================================
   18. REVEAL / ANIMACIONES DE ENTRADA
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Escalonado por hijos */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}
[data-stagger].is-visible > *:nth-child(1) { transition-delay: .05s; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: .12s; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: .19s; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: .26s; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: .33s; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: .40s; }
[data-stagger].is-visible > *:nth-child(7) { transition-delay: .47s; }

/* Parallax hero (aplicado por JS con --py) */
.hero-bg, .hero-circuit { transform: translateY(var(--py, 0)); }

/* =============================================================
   19. RESPONSIVE
   ============================================================= */
/* Barra de navegación en móvil/tablet: ocultar enlaces centrales,
   mostrar el menú hamburguesa y dejar el WhatsApp como icono compacto */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-cta .btn-wa .btn-txt { display: none; }
  .nav-cta .btn-wa { width: 46px; height: 46px; padding: 0; }
  .nav-cta .btn-wa svg { width: 22px; height: 22px; }
  .logo img { height: 38px; }
}

@media (min-width: 720px) {
  .servicios-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .contacto-grid { grid-template-columns: 1.1fr .9fr; }
}

@media (min-width: 960px) {
  .servicios-grid { grid-template-columns: repeat(3, 1fr); }
  /* La primera tarjeta ocupa dos columnas (composición asimétrica) */
  .serv-card:first-child { grid-column: span 2; }
  .porque-grid { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .ubicacion-grid { grid-template-columns: 1.15fr .85fr; gap: 2rem; }
  .mapa, .mapa iframe { min-height: 480px; }
  .proceso-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
  }
  .proceso-line {
    left: 8px; right: 8px; top: 26px;
    width: auto; height: 2px; bottom: auto;
  }
  .proceso-line::after {
    transform: scaleX(var(--draw, 0));
    transform-origin: left;
  }
  .paso { grid-template-columns: 1fr; gap: 1.2rem; }
  .paso h3 { padding-top: 0; }
}

@media (min-width: 1280px) {
  .serv-card:first-child { grid-column: span 1; }
  .servicios-grid { grid-template-columns: repeat(3, 1fr); }
  /* Composición asimétrica: destacamos la primera y la última */
  .serv-card:nth-child(1) { grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; }
}

/* =============================================================
   20. REDUCED-MOTION (solo gestos intrusivos)
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-circuit .spark { animation: none; opacity: 0; }
  .hero-badges .badge { animation: none; }
  .hero-scroll .bar { animation: none; }
  .wa-float-btn::after { animation: none; }
  .marquee-track { animation-duration: 90s; }  /* más lento, no lo quitamos */
  .estado.abierto .pip { animation: none; }
  /* Los reveal, hover, tilt, contadores NO se desactivan */
}