/* ============================================================================
   DongoProyect — sistema visual "Atacama"
   Paleta: arena · cobre · noche del desierto.
   Dark-first: el sitio vive de noche, con el cobre como única fuente de calor.
   ========================================================================= */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  /* noche */
  --noche-0:   #0A0908;   /* fondo base, casi negro cálido */
  --noche-1:   #12100D;   /* superficies elevadas */
  --noche-2:   #1B1813;   /* bordes / cards */
  --noche-3:   #2A251D;   /* bordes vivos */

  /* arena */
  --arena-100: #F2E9DA;   /* texto principal */
  --arena-200: #D9CCB6;   /* texto secundario */
  --arena-300: #A8977C;   /* texto terciario / labels */
  --arena-400: #6E6350;   /* apagado */

  /* cobre — el acento, usado con avaricia */
  --cobre:     #C2622C;
  --cobre-alto:#E08A4A;
  --cobre-bajo:#7A3C18;

  /* mineral — acento frío, solo para datos/estados */
  --mineral:   #4E7A73;

  --max: 1280px;
  --gutter: clamp(20px, 5vw, 80px);

  /* tipografía */
  --display: 'Bricolage Grotesque', 'Arial Black', sans-serif;
  --serif:   'Newsreader', Georgia, serif;
  --body:    'Manrope', system-ui, sans-serif;
  --mono:    'Space Mono', ui-monospace, monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }
/* `scroll-behavior: smooth` en <html> vuelve arrastrado TODO el scroll, también
   el de la rueda. Se aplica solo al salto por ancla, que es donde se quiere. */
@media (prefers-reduced-motion: no-preference) {
  :target { scroll-behavior: smooth; }
  html:focus-within { scroll-behavior: smooth; }
}

/* El negro vive en <html>: así el body queda transparente y deja ver el canvas
   fijo del fondo, sin que se vea blanco al hacer overscroll. */
html { background: var(--noche-0); }

body {
  background: transparent;
  color: var(--arena-200);
  font-family: var(--body);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--cobre); color: var(--noche-0); }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* grano: da textura de papel/polvo a todo el sitio */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .32;
  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='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

/* ── Fondo galáctico global ───────────────────────────────────────────────
   Cubre TODA la web, no solo el hero: va `fixed` al viewport, detrás de todo
   (z-index 0 con el contenido en 1). El canvas lo pinta galaxia.js, que lo
   mueve y le hace zoom según el scroll. */
.fondo {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.fondo-cielo {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 62% at 50% 46%, rgba(224,138,74,.20) 0%, transparent 62%),
    radial-gradient(60% 40% at 78% 12%, rgba(78,122,115,.10) 0%, transparent 64%),
    linear-gradient(180deg, #07060A 0%, #0B0908 55%, #120E0B 100%);
}
#galaxia { position: absolute; inset: 0; display: block; transform: translateZ(0); }

/* ── Núcleo: el logo girando en el centro de la galaxia ───────────────────
   galaxia.js le escribe el `transform` en cada frame para clavarlo en el
   centro exacto de la galaxia dibujada. Arranca en 0×0 arriba a la izquierda:
   sin JS no se muestra, y está bien — es decoración pura. */
#nucleo {
  position: fixed; left: 0; top: 0; width: 0; height: 0;
  z-index: 0; pointer-events: none;
  opacity: 0;                       /* lo enciende el JS al posicionarlo */
  transition: opacity 1.2s ease;
}
#nucleo.listo { opacity: 1; }

.orb-escena {
  /* Tamaño ya expandido (360 × 2.6 del plano): si la escena midiera 360 y el
     plano se escalara dentro, `contain: paint` recortaría las órbitas. */
  position: absolute; left: -468px; top: -468px;
  width: 936px; height: 936px;
  display: grid; place-items: center;
  perspective: 760px;
  /* Capa propia + aislamiento: sin esto, los 8 SVG con cientos de glifos
     dentro de un `perspective` obligaban a recomponer este árbol en cada
     frame de scroll — medido, costaba ~45fps.
     El `contain` va acá y NO en #nucleo: #nucleo mide 0×0 y sus hijos viven
     fuera de sus límites (left:-180px), así que ahí recortaría todo. */
  contain: layout paint;
  will-change: transform;
  transform: translateZ(0);
}

/* El plano de las órbitas, escalado para que las espirales salgan del encuadre
   y se lean como un flujo que viene de lejos. */
/* Gira el PLANO entero, no cada anillo ni el texto.
   Por qué: animar `startOffset` con SMIL obliga a Chrome a recalcular el
   trazado del texto sobre la ruta en cada frame — medido, 616ms de layout
   cada 3s, y el scroll se sentía pesado. Rotar un único contenedor es
   composición pura: el texto se traza UNA vez y después solo se transforma.
   El resplandor también va acá, una vez, y no en cada anillo. */
.orb-plano {
  position: absolute; inset: 0;
  transform-origin: 50% 50%;
  animation: orbPlanoGira 150s linear infinite;
  filter: drop-shadow(0 0 3px rgba(224, 138, 74, .5));
}
@keyframes orbPlanoGira {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* El movimiento lo hace SMIL (<animate> sobre startOffset del textPath): anima
   SOLO el texto recorriendo la ruta. Probé rotar el SVG por CSS y fue mucho
   peor — 14 capas de ~1300px promovidas a GPU tiraban el scroll a 8fps. */
.orb-anillo {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.orb-anillo text {
  font-family: var(--mono); font-weight: 700;
  font-size: 2.6px; letter-spacing: 5px;
}

/* El logo, girando como una moneda. */
.orb-logo {
  position: relative; z-index: 2;
  width: clamp(72px, 8vw, 118px); aspect-ratio: 1;
  animation: orbFlota 6s ease-in-out infinite;
  filter: drop-shadow(0 14px 40px rgba(194, 98, 44, .55));
}
.orb-logo-cara {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  /* Vaivén en vez de vuelta completa: girando 360° la letra pasa la mitad del
     tiempo de canto, ilegible. Así se lee siempre y igual da sensación 3D. */
  animation: orbGira 11s ease-in-out infinite;
}
.orb-logo-cara svg { width: 100%; height: 100%; }

@keyframes orbGira {
  0%, 100% { transform: rotateY(-34deg); }
  50%      { transform: rotateY(34deg); }
}
@keyframes orbFlota {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* El contenido va por encima del fondo. Sin esto el canvas fijo lo taparía. */
.nav, main, footer, .wa-float { position: relative; z-index: 1; }
.nav { z-index: 100; }
.wa-float { z-index: 90; }

/* Las secciones no llevan fondo opaco: dejan ver la galaxia pasar por detrás.
   El velo es suave — lo justo para que el texto tenga contraste sin apagar el
   fondo. Los títulos llevan sombra propia (abajo) para leerse sobre el brillo
   del núcleo cuando pasa por debajo. */
.sec, .contacto {
  background: linear-gradient(180deg,
    rgba(10, 9, 8, .55) 0%,
    rgba(10, 9, 8, .78) 22%,
    rgba(10, 9, 8, .78) 78%,
    rgba(10, 9, 8, .55) 100%);
}

/* Legibilidad sobre el fondo brillante: sombra suave en todo lo que es texto
   sobre la galaxia. Sin esto, un título claro sobre el núcleo se pierde. */
.sec-head h2, .contacto h2, .hero h1,
.svc-nombre, .paso h3, .faq summary {
  text-shadow: 0 2px 24px rgba(6, 5, 4, .85), 0 1px 4px rgba(6, 5, 4, .7);
}
.sec-head p, .hero-sub, .contacto p, .paso p, .faq-r,
.svc-resumen, .eyebrow, .hero-meta .v, .contacto-datos .v {
  text-shadow: 0 1px 3px rgba(6, 5, 4, .9), 0 2px 14px rgba(6, 5, 4, .7);
}

/* ── Utilidades ───────────────────────────────────────────────────────────── */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cobre);
}

.serif-em { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* salto para navegación por teclado */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--cobre); color: var(--noche-0);
  padding: 12px 20px; font-family: var(--mono); font-size: 13px;
}
.skip:focus { left: 12px; top: 12px; }

/* foco visible y coherente en todo el sitio */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--cobre-alto);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Reveal al hacer scroll ───────────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(28px); }
.rv.in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.d1.in { transition-delay: .08s; }
.rv.d2.in { transition-delay: .16s; }
.rv.d3.in { transition-delay: .24s; }

/* Sin JS: nunca dejar contenido invisible. */
.no-js .rv { opacity: 1; transform: none; }

/* ── Nav ──────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 16px var(--gutter);
  background: color-mix(in srgb, var(--noche-0) 72%, transparent);
  backdrop-filter: blur(14px);
  /* Capa propia: sin esto el backdrop-filter obliga a recomponer toda la
     página en cada frame de scroll y el movimiento se siente pesado. */
  transform: translateZ(0);
  border-bottom: 1px solid transparent;
  transition: border-color .4s, background .4s;
}
.nav.scrolled { border-bottom-color: var(--noche-2); background: color-mix(in srgb, var(--noche-0) 92%, transparent); }

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand svg { width: 30px; height: 30px; overflow: visible; }
.brand b {
  font-family: var(--display); font-weight: 700; font-size: 18px;
  letter-spacing: -.02em; color: var(--arena-100);
}

.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a {
  font-size: 14px; color: var(--arena-300);
  transition: color .3s; position: relative; padding: 4px 0;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--cobre); transition: width .35s var(--ease);
}
.nav-links a:hover { color: var(--arena-100); }
.nav-links a:hover::after { width: 100%; }

/* botón WhatsApp */
.btn-wa {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--cobre); color: var(--noche-0);
  font-weight: 700; font-size: 14px;
  padding: 11px 20px; border-radius: 2px;
  border: 1px solid var(--cobre);
  transition: background .3s, transform .3s var(--ease);
  white-space: nowrap;
}
.btn-wa:hover { background: var(--cobre-alto); border-color: var(--cobre-alto); transform: translateY(-2px); }
.btn-wa svg { width: 17px; height: 17px; fill: currentColor; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--noche-3); color: var(--arena-200);
  padding: 11px 20px; border-radius: 2px; font-size: 14px; font-weight: 600;
  transition: border-color .3s, color .3s, transform .3s var(--ease);
}
.btn-ghost:hover { border-color: var(--cobre); color: var(--arena-100); transform: translateY(-2px); }

/* menú móvil */
.nav-toggle {
  display: none; background: none; border: 1px solid var(--noche-3);
  color: var(--arena-200); width: 42px; height: 42px; border-radius: 2px;
  cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 140px 0 90px;
  /* El hero es donde más se luce la galaxia: velo lateral suave, solo lo justo
     para que el titular no compita con el núcleo. */
  background: linear-gradient(100deg,
    rgba(8, 7, 6, .74) 0%, rgba(8, 7, 6, .42) 42%,
    rgba(8, 7, 6, .08) 72%, transparent 100%);
}

/* Escena del hero: galaxia en canvas sobre un cielo CSS.
   El canvas lo pinta galaxia.js; el degradado de abajo es el respaldo para
   cuando no corre (movimiento reducido, sin JS, canvas no soportado). */
/* El hero ya no lleva escena propia: el fondo es global (ver ── Fondo). */

.hero-inner { position: relative; width: 100%; }

.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  /* Acotado para que el CTA entre en el primer viewport: con 8.6vw el titular
     empujaba los botones fuera de pantalla en 1440×900. */
  font-size: clamp(40px, 6.2vw, 92px);
  line-height: .98;
  letter-spacing: -.028em;
  color: var(--arena-100);
  max-width: 17ch;
  margin: 18px 0 0;
  text-wrap: balance;
}
.hero h1 .em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--cobre-alto); letter-spacing: -.01em;
}

.hero-sub {
  margin-top: 24px;
  max-width: 54ch;
  font-size: clamp(16px, 1.2vw, 19px);
  color: var(--arena-200);
  line-height: 1.6;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-cta .btn-wa, .hero-cta .btn-ghost { padding: 15px 26px; font-size: 15px; }

/* barra de datos al pie del hero */
.hero-meta {
  display: flex; flex-wrap: wrap; gap: clamp(22px, 4vw, 56px);
  margin-top: clamp(36px, 4.5vw, 58px);
  padding-top: 22px;
  border-top: 1px solid var(--noche-2);
}
.hero-meta div { display: flex; flex-direction: column; gap: 5px; }
.hero-meta dt, .hero-meta .k {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--arena-400);
}
.hero-meta .v { font-size: 15px; color: var(--arena-100); font-weight: 600; }

/* ── Secciones ────────────────────────────────────────────────────────────── */
.sec { position: relative; padding: clamp(76px, 8.5vw, 124px) 0; }
/* Sin línea divisoria: sobre la galaxia, un borde recto corta el fondo y se
   ve como una costura. El cambio de sección lo marca el propio velo. */

.sec-head { margin-bottom: clamp(44px, 6vw, 76px); }
.sec-head h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(34px, 5.4vw, 74px);
  line-height: 1.02; letter-spacing: -.03em;
  color: var(--arena-100); margin-top: 14px;
  max-width: 20ch; text-wrap: balance;
}
.sec-head p {
  margin-top: 20px; max-width: 62ch;
  color: var(--arena-300); font-size: clamp(16px, 1.15vw, 18px);
}

/* ── Servicios ────────────────────────────────────────────────────────────── */
.svc-list { border-top: 1px solid var(--noche-2); }

.svc {
  border-bottom: 1px solid var(--noche-2);
  position: relative;
}
.svc::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(194,98,44,.07), transparent 55%);
  opacity: 0; transition: opacity .45s var(--ease); pointer-events: none;
}
.svc:hover::before { opacity: 1; }

.svc-btn {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(24px, 3.2vw, 40px) 0;
  text-align: left; color: inherit; font: inherit;
  position: relative; z-index: 1;
}
.svc-num {
  font-family: var(--mono); font-size: 13px; color: var(--cobre);
  letter-spacing: .1em;
}
.svc-nombre {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(22px, 3.1vw, 40px);
  letter-spacing: -.025em; color: var(--arena-100); line-height: 1.15;
  transition: color .3s;
}
.svc:hover .svc-nombre { color: var(--cobre-alto); }

.svc-mas {
  width: 40px; height: 40px; border: 1px solid var(--noche-3); border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  transition: border-color .35s, transform .45s var(--ease), background .35s;
}
.svc-mas span { position: relative; width: 13px; height: 13px; }
.svc-mas span::before, .svc-mas span::after {
  content: ''; position: absolute; background: var(--arena-200);
  transition: background .3s, opacity .35s var(--ease), transform .45s var(--ease);
}
.svc-mas span::before { left: 0; top: 6px; width: 13px; height: 1px; }
.svc-mas span::after  { top: 0; left: 6px; height: 13px; width: 1px; }
.svc:hover .svc-mas { border-color: var(--cobre); }
.svc-btn[aria-expanded="true"] .svc-mas { background: var(--cobre); border-color: var(--cobre); transform: rotate(180deg); }
.svc-btn[aria-expanded="true"] .svc-mas span::before,
.svc-btn[aria-expanded="true"] .svc-mas span::after { background: var(--noche-0); }
.svc-btn[aria-expanded="true"] .svc-mas span::after { opacity: 0; transform: scaleY(0); }

.svc-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--ease);
}
.svc-panel > div { overflow: hidden; }
.svc-panel.open { grid-template-rows: 1fr; }

.svc-body {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding: 0 0 clamp(30px, 4vw, 48px) clamp(0px, 5.5vw, 72px);
  align-items: start;
}

/* Foto del servicio: teñida a la paleta para que no parezca stock pegado. */
.svc-foto {
  position: relative; overflow: hidden;
  border: 1px solid var(--noche-3);
  aspect-ratio: 16 / 9;
}
.svc-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.68) contrast(1.06) brightness(.82);
  transform: scale(1.02);
  transition: transform 1.1s var(--ease), filter .7s var(--ease);
}
.svc:hover .svc-foto img { transform: scale(1.06); filter: saturate(.9) contrast(1.04) brightness(.94); }
/* Lavado de cobre encima: une la foto con el resto del sitio. */
.svc-foto::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,9,8,.06) 0%, rgba(10,9,8,.48) 100%),
    linear-gradient(115deg, rgba(194,98,44,.24) 0%, transparent 62%);
  mix-blend-mode: multiply;
}

.svc-resumen { color: var(--arena-200); font-size: clamp(16px, 1.2vw, 19px); }
.svc-incluye li {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 9px 0; border-bottom: 1px solid var(--noche-1);
  color: var(--arena-300); font-size: 15px;
}
.svc-incluye li::before {
  content: ''; flex-shrink: 0; margin-top: 9px;
  width: 5px; height: 5px; background: var(--cobre); transform: rotate(45deg);
}
.svc-wa {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px; font-family: var(--mono); font-size: 13px;
  color: var(--cobre); letter-spacing: .04em;
  border-bottom: 1px solid var(--cobre-bajo); padding-bottom: 3px;
  transition: color .3s, border-color .3s;
}
.svc-wa:hover { color: var(--cobre-alto); border-color: var(--cobre-alto); }

/* ── Proceso ──────────────────────────────────────────────────────────────── */
.proceso { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 32px); }
.paso { position: relative; padding-top: 30px; border-top: 1px solid var(--noche-2); }
.paso::before {
  content: ''; position: absolute; top: -1px; left: 0; width: 0; height: 1px;
  background: var(--cobre); transition: width .8s var(--ease);
}
.paso.in::before { width: 100%; }
.paso .n {
  font-family: var(--mono); font-size: 12px; letter-spacing: .18em;
  color: var(--cobre); display: block; margin-bottom: 16px;
}
.paso h3 {
  font-family: var(--display); font-weight: 700; font-size: clamp(18px, 1.7vw, 24px);
  letter-spacing: -.02em; color: var(--arena-100); margin-bottom: 10px;
  /* Reserva 2 líneas: los títulos tienen largos distintos y sin esto el
     párrafo de cada paso arranca a distinta altura y la fila se ve torcida. */
  min-height: 2.2em; line-height: 1.1;
}
.paso p { color: var(--arena-300); font-size: 15px; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq { max-width: 900px; }
.faq details {
  border-bottom: 1px solid var(--noche-2);
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: clamp(20px, 2.4vw, 28px) 44px clamp(20px, 2.4vw, 28px) 0;
  position: relative;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(17px, 1.6vw, 22px); letter-spacing: -.015em;
  color: var(--arena-100);
  transition: color .3s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--cobre-alto); }
.faq summary::after {
  content: ''; position: absolute; right: 8px; top: 50%;
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--cobre); border-bottom: 1.5px solid var(--cobre);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .4s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-r { padding: 0 clamp(30px, 6vw, 90px) 26px 0; color: var(--arena-300); font-size: 16px; }

/* ── Contacto ─────────────────────────────────────────────────────────────── */
.contacto {
  position: relative; overflow: hidden;
  padding: clamp(100px, 14vw, 190px) 0 clamp(80px, 10vw, 140px);
  border-top: 1px solid var(--noche-1);
}
.contacto::before {
  content: ''; position: absolute; left: 50%; top: 30%;
  width: min(150vw, 1400px); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(194,98,44,.20), rgba(122,60,24,.06) 45%, transparent 68%);
  pointer-events: none; z-index: 0;
}
.contacto .wrap { position: relative; z-index: 1; }

.contacto h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(46px, 11vw, 150px); line-height: .9; letter-spacing: -.045em;
  color: var(--arena-100); margin: 18px 0 0;
}
.contacto h2 .em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--cobre-alto); }
.contacto p { margin-top: 26px; max-width: 54ch; color: var(--arena-200); font-size: clamp(16px, 1.3vw, 20px); }

.contacto-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.contacto-cta .btn-wa { padding: 17px 30px; font-size: 16px; }
.contacto-cta .btn-ghost { padding: 17px 30px; font-size: 16px; }

.contacto-datos {
  display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 70px);
  margin-top: clamp(50px, 7vw, 82px); padding-top: 28px;
  border-top: 1px solid var(--noche-2);
}
.contacto-datos div { display: flex; flex-direction: column; gap: 6px; }
.contacto-datos .k {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--arena-400);
}
.contacto-datos .v { color: var(--arena-100); font-size: 15px; font-weight: 600; }
.contacto-datos a.v:hover { color: var(--cobre-alto); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.pie {
  border-top: 1px solid var(--noche-2);
  padding: 40px 0;
  display: flex; flex-wrap: wrap; gap: 18px;
  align-items: center; justify-content: space-between;
}
.pie small { color: var(--arena-400); font-size: 13px; }
.pie .pie-form { color: var(--arena-400); font-size: 12.5px; max-width: 60ch; }

/* ── WhatsApp flotante ────────────────────────────────────────────────────
   Verde oficial de WhatsApp (se reconoce al instante) con una de las
   guardianas asomada al borde. Visible siempre, no solo en móvil. */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; color: #06301A;
  display: grid; place-items: center;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .5), 0 0 0 0 rgba(37, 211, 102, .5);
  transition: transform .35s var(--ease), background .3s, box-shadow .3s;
  animation: waPulso 3.6s ease-out infinite;
}
.wa-float:hover { transform: scale(1.07); background: #2FE977; animation-play-state: paused; }
.wa-float > svg { width: 31px; height: 31px; fill: currentColor; }

/* El anillo que late: llama la atención sin ser un banner. */
@keyframes waPulso {
  0%       { box-shadow: 0 10px 34px rgba(0,0,0,.5), 0 0 0 0    rgba(37,211,102,.45); }
  55%,100% { box-shadow: 0 10px 34px rgba(0,0,0,.5), 0 0 0 22px rgba(37,211,102,0); }
}

/* La guardiana asomada arriba del botón. */
.wa-float-pet {
  position: absolute; top: -25px; right: -6px;
  width: 42px; height: 42px; pointer-events: none;
  transform-origin: 50% 100%;
  animation: petAsoma 5.5s ease-in-out infinite;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
}
.wa-float-pet svg { width: 100%; height: 100%; }
@keyframes petAsoma {
  0%, 58%, 100% { transform: translateY(6px) rotate(-6deg); }
  66%, 92%      { transform: translateY(0)   rotate(4deg); }
}

/* ── Mascotas ─────────────────────────────────────────────────────────────
   Los cuatro guardianes: orejas, lengua y parpadeo animados por CSS.
   Rescatado del proyecto anterior. */
.pet-avatar-svg { width: 100%; height: 100%; overflow: visible; }

/* Animaciones ORIGINALES del sitio anterior (rescatadas de producción,
   cmd-sections.css). `transform-box: fill-box` es imprescindible: sin él el
   transform-origin se calcula sobre el viewBox entero y no sobre la forma, y
   la lengua y los párpados salen deformados. */

/* orejas caídas, alternadas */
.pa-ear { animation: pa-ear-flop 1.6s ease-in-out infinite; }
.pa-ear-r { animation-delay: .2s; transform-box: fill-box; }
@keyframes pa-ear-flop {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-8deg); }
}

/* la oreja parada de Gladys: casi quieta, con una sacudida cada tanto */
.pa-ear-up { animation: pa-ear-perk 3.2s ease-in-out infinite; }
@keyframes pa-ear-perk {
  0%, 84%, 100% { transform: rotate(0deg); }
  89%           { transform: rotate(-8deg); }
  94%           { transform: rotate(4deg); }
}

/* párpados: caen desde arriba del ojo, cada tanto */
.pa-blink {
  transform-box: fill-box;
  transform-origin: center top;
  transform: scaleY(0);
  animation: pa-blink 4.6s ease-in-out infinite;
}
@keyframes pa-blink {
  0%, 93%, 100% { transform: scaleY(0); }
  96%           { transform: scaleY(1); }
}

/* el pelo de Toby: deriva suave, solo transform (barato) */
.pa-fur { animation: pa-fur-sway 3.4s ease-in-out infinite; will-change: transform; }
@keyframes pa-fur-sway {
  0%, 100% { transform: rotate(-1.6deg); }
  50%      { transform: rotate(2.2deg); }
}

/* Lengua: quieta por defecto, como en el sitio original. Solo jadea la que
   camina (el paseo) — un perro trotando jadeando se lee bien; cuatro caras
   jadeando fijo en la sección de contacto, no. */
.pa-tongue { transform-box: fill-box; transform-origin: center top; }
.pet-paseo .pa-tongue { animation: pa-pant .5s ease-in-out infinite; }
@keyframes pa-pant {
  0%, 100% { transform: scaleY(0.7); }
  50%      { transform: scaleY(1.15); }
}

/* Fila de guardianes en la sección de contacto. */
.guardianes { margin-top: clamp(44px, 5.5vw, 70px); }
.guardianes-nota {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--arena-400); margin-bottom: 16px;
}
.guardianes-fila { display: flex; gap: clamp(18px, 2.6vw, 34px); align-items: flex-end; }
.guardianes-fila li { display: flex; flex-direction: column; align-items: center; gap: 7px; }

.guardian {
  width: clamp(54px, 6vw, 76px); height: clamp(54px, 6vw, 76px);
  display: block;
  transition: transform .4s var(--ease);
  animation: petSalta 4s ease-in-out infinite;
}
.guardianes-fila li:nth-child(2) .guardian { animation-delay: .5s; }
.guardianes-fila li:nth-child(3) .guardian { animation-delay: 1s; }
.guardianes-fila li:nth-child(4) .guardian { animation-delay: 1.5s; }
.guardianes-fila li:hover .guardian { transform: translateY(-8px) scale(1.08); }

.guardian-n {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--arena-400); transition: color .3s;
}
.guardianes-fila li:hover .guardian-n { color: var(--cobre-alto); }
@keyframes petSalta {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* Paseo: un guardián cruza el borde inferior de la sección y se va. */
.pet-paseo {
  position: absolute; left: 0; bottom: 8px;
  width: 54px; height: 54px; pointer-events: none; z-index: 2;
  animation: petCruza 13s linear forwards;
}
.pet-paseo.vuelta { animation-name: petCruzaVuelta; }
.pet-paseo-cuerpo {
  width: 100%; height: 100%;
  animation: petTrote .42s ease-in-out infinite;
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .5));
}
@keyframes petCruza {
  from { transform: translateX(-70px); }
  to   { transform: translateX(calc(100vw + 70px)); }
}
/* De vuelta: espejado, para que mire hacia donde camina. */
@keyframes petCruzaVuelta {
  from { transform: translateX(calc(100vw + 70px)) scaleX(-1); }
  to   { transform: translateX(-70px) scaleX(-1); }
}
@keyframes petTrote {
  0%, 100% { transform: translateY(0)     rotate(-1.5deg); }
  50%      { transform: translateY(-3.5px) rotate(1.5deg); }
}
/* La sección es el contenedor de referencia del paseo de las mascotas. */
.sec { overflow: hidden; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .proceso { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  /* La foto pasa arriba del texto: en dos columnas angostas no se lee ninguna. */
  .svc-body { grid-template-columns: 1fr; row-gap: 22px; }
}

@media (max-width: 760px) {
  .nav-links {
    position: fixed; inset: 62px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--noche-1); border-bottom: 1px solid var(--noche-2);
    padding: 8px var(--gutter) 20px;
    transform: translateY(-130%); transition: transform .45s var(--ease);
    max-height: calc(100svh - 62px); overflow-y: auto;
  }
  .nav-links.open { transform: none; }
  .nav-links a { padding: 15px 0; border-bottom: 1px solid var(--noche-2); font-size: 16px; }
  .nav-links a::after { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav .btn-wa { display: none; }
  .wa-float { display: grid; }

  .proceso { grid-template-columns: 1fr; }

  .svc-body { grid-template-columns: 1fr; padding-left: 0; row-gap: 22px; }
  .svc-btn { grid-template-columns: auto 1fr auto; gap: 14px; }
  .svc-num { font-size: 11px; }

  .hero { min-height: auto; padding: 118px 0 70px; }
  .hero-meta { gap: 22px 32px; }

  /* Botones a ancho completo y del mismo tamaño: apilados con anchos distintos
     se veían como dos elementos sin relación. */
  .hero-cta, .contacto-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-cta > a, .contacto-cta > a { justify-content: center; width: 100%; }

  /* El botón flotante no debe tapar el último dato de contacto. */
  .contacto-datos { padding-bottom: 60px; }
}

/* ── Accesibilidad: respetar reducción de movimiento ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .paso::before { width: 100%; }
  /* Los guardianes quedan quietos, pero visibles. El paseo no se monta
     (lo decide mascotas.js), así que acá no hay nada que ocultar. */
  .guardian, .wa-float, .wa-float-pet,
  .pa-ear, .pa-ear-up, .pa-fur, .pa-tongue,
  .orb-logo, .orb-logo-cara { animation: none; }
  /* El núcleo no se monta sin JS de galaxia, pero por si acaso: sin órbitas. */
  .orb-anillo { display: none; animation: none; }
  /* El párpado sin animación tiene que quedar ABIERTO, no tapando el ojo. */
  .pa-blink { animation: none; transform: scaleY(0) !important; }
}

/* ── Impresión ───────────────────────────────────────────────────────────── */
@media print {
  body::after, .nav, .wa-float, .fondo { display: none; }
  body { background: #fff; color: #000; }
  .svc-panel { grid-template-rows: 1fr; }
}