/* ═══════════════════════════════════════════════════════════════════════
   TERRACOTA · styles.css — SISTEMA DE DISEÑO ÚNICO PARA TODO EL SITIO
   ───────────────────────────────────────────────────────────────────────
   Una sola hoja para index / espacios / galeria / 404 / aviso-privacidad.
   Todo lo que se ve en una subpágina existe también aquí: mismos fondos,
   mismos botones, mismas tarjetas, mismo ritmo vertical.

   ORDEN DEL ARCHIVO
   01 · Tokens            06 · Hero + carrusel
   02 · Reset y base      07 · Secciones de la home
   03 · Tipografía        08 · Subpáginas
   04 · Utilidades        09 · Footer y flotantes
   05 · Navegación        10 · Responsive y reduced-motion
   ═══════════════════════════════════════════════════════════════════════ */

/* ══════════════════ 01 · TOKENS ══════════════════
   La paleta sale del logo real de la marca (los aros terracota + el aro
   cobre del monograma), no de un tema genérico. El verde jardín se
   conserva como color de apoyo porque es el color literal del lugar. */
:root{
  /* — Marca — */
  --clay-900:#0B0806;   /* negro casi puro, con la calidez justa — fondos profundos */
  --clay-800:#161009;
  --clay-700:#3C2513;   /* aro exterior del logo                         */
  --clay-600:#563317;
  --clay-500:#7A481C;
  --copper:  #D4A427;   /* aro interior del logo — acento principal, dorado real */
  --copper-2:#F0C24A;
  --gold:    #F4D673;   /* dorado de las series de foquitos               */
  --green:   #2C3A22;   /* verde jardín — apoyo                          */
  --green-2: #3D5030;

  /* — Neutros cálidos — */
  --ink:     #0A0806;
  --ink-2:   #3A322C;
  --bone:    #F7F2E9;
  --bone-2:  #EFE6D8;
  --bone-3:  #E3D6C3;
  --white:   #FFFFFF;
  --wa:      #25D366;

  /* — Tipografía — */
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans: 'Manrope','Segoe UI',system-ui,-apple-system,sans-serif;

  /* — Ritmo vertical: el sitio respira igual en todas las páginas — */
  --sp-section: clamp(88px,11vw,168px);
  --sp-gutter:  clamp(20px,5vw,72px);
  --maxw: 1240px;

  /* — Vidrio: una sola receta para botones, chips y tarjetas flotantes.
       blur + saturación (soporte amplio); el brillo se simula con
       box-shadow en capas, no con filtros SVG dentro de backdrop-filter. */
  --glass-blur:18px;
  --glass-sat:165%;
  --r-lg:22px;
  --r-md:14px;
  --r-sm:10px;

  --shadow-sm:0 2px 10px rgba(20,16,13,.06);
  --shadow-md:0 14px 40px -18px rgba(20,16,13,.35);
  --shadow-lg:0 40px 90px -40px rgba(20,16,13,.55);

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

  /* — Alias que leen los fondos generativos (assets/backgrounds.js) —
       Silk toma --primary, Waves toma --accent y el Ribbon usa los tres.
       Se declaran aquí para que cambiar la paleta de la marca en un solo
       lugar re-tiña también los cuatro fondos, sin tocar el JS. */
  --primary:#3C2513;
  --accent: #D4A427;
  --cream:  #F7F2E9;
}

/* ══════════════════ 02 · RESET Y BASE ══════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  scrollbar-width:thin;
  scrollbar-color:rgba(198,138,92,.35) transparent;
}
body{
  font-family:var(--sans);
  background:var(--bone);
  color:var(--ink);
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* height:auto es obligatorio: las <img> llevan width/height reales en el
   HTML (evitan el salto de layout al cargar) y sin esto el navegador
   respetaría el alto del atributo en vez de escalar proporcionalmente. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none}
::selection{background:var(--copper);color:#fff}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:4px}

/* Grano reutilizable — se le pone a cualquier bloque con position:relative */
.grain::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:.055;
}

/* ══════════════════ 03 · TIPOGRAFÍA ══════════════════ */
.eyebrow{
  display:inline-block;font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--copper);margin-bottom:18px;
}
.eyebrow--ink{color:var(--clay-600)}
.eyebrow--soft{color:rgba(255,255,255,.5)}

.title{
  font-family:var(--serif);font-weight:300;line-height:1.02;
  font-size:clamp(38px,6.4vw,74px);letter-spacing:-.015em;
  color:var(--ink);
}
.title--light{color:var(--bone)}
.title em{font-style:italic;color:var(--copper)}

.title-sm{
  font-family:var(--serif);font-weight:400;line-height:1.1;
  font-size:clamp(26px,3.4vw,38px);letter-spacing:-.01em;
}

.lede{
  font-size:clamp(15px,1.45vw,17.5px);line-height:1.75;color:var(--ink-2);
  max-width:56ch;
}
.lede--light{color:rgba(247,242,233,.74)}

.micro{font-size:12.5px;letter-spacing:.02em;color:rgba(58,50,44,.65)}
.micro--light{color:rgba(247,242,233,.55)}

/* ══════════════════ 04 · UTILIDADES ══════════════════ */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--sp-gutter)}
.section{padding-block:var(--sp-section);position:relative}
.section--dark{background:var(--clay-900);color:var(--bone)}
.section--ink{background:var(--ink);color:var(--bone)}
.section--bone{background:var(--bone)}
.section--bone2{background:var(--bone-2)}

/* GARANTÍA DE APILADO DEL CONTENIDO ────────────────────────────────
   Cada sección tiene capas decorativas absolutamente posicionadas por
   debajo (fondos generativos en canvas, glows, el wordmark gigante del
   footer). .z6 sube el bloque de contenido real por encima de todas
   ellas SIN ambigüedad: isolation:isolate obliga a crear su propio
   stacking context. Sección nueva = su contenedor interno lleva .z6. */
.z6{position:relative;z-index:6;isolation:isolate}

.center{text-align:center}
.center .lede{margin-inline:auto}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(198,138,92,.32),transparent);border:0}

/* — Botones — */
/* — Botones: familia "liquid glass" —
   Una sola receta para las cinco variantes: fondo translúcido + blur +
   saturación (--glass-blur/--glass-sat, ya definidos en :root) y tres
   capas de sombra que simulan refracción de vidrio: un filo de luz
   arriba (inset positivo), una sombra propia del grosor del vidrio abajo
   (inset negativo) y una sombra de caída suave hacia afuera. Cada
   variante SOLO cambia color de fondo/borde/texto — nunca la receta de
   capas — para que todos los botones del sitio se sientan de la misma
   familia, en vez de mezclar pills sólidas con pills de vidrio. */
/* — Botones —
   Tercer intento, y esta vez el objetivo es simplicidad: nada de vidrio
   traslúcido, nada de gradiente satinado, nada de barrido de brillo
   animado. Color plano y saturado, una sombra chica en reposo que crece
   al hover, y ya — el look "producto de 2025" es justo ese, RESTAR
   capas, no acumular efectos. Sin pseudo-elementos, sin blend modes. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:14px 26px;border-radius:100px;cursor:pointer;
  border:1.5px solid transparent;
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .25s ease,background .2s ease,color .2s ease,border-color .2s ease;
  white-space:nowrap;
}
.btn svg{width:13px;height:13px;flex-shrink:0;transition:transform .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:hover svg{transform:translateX(2px)}

.btn--copper{background:var(--copper);color:#2A1109;box-shadow:0 1px 2px rgba(20,16,13,.18)}
.btn--copper:hover{background:var(--copper-2);box-shadow:0 12px 26px -10px rgba(198,138,92,.65)}

.btn--solid{background:var(--clay-800);color:var(--bone);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.btn--solid:hover{background:var(--clay-700);box-shadow:0 12px 26px -10px rgba(0,0,0,.55)}

.btn--ghost{background:transparent;border-color:rgba(92,46,34,.35);color:var(--ink)}
.btn--ghost:hover{background:rgba(92,46,34,.06);border-color:var(--clay-700)}

.btn--glass{
  color:var(--bone);border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.btn--glass:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45)}

.btn--wa{background:var(--wa);color:#08331A;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.btn--wa:hover{background:#31e074;box-shadow:0 12px 26px -10px rgba(37,211,102,.6)}
.btn--wa svg{width:17px;height:17px}

.btn--block{width:100%}
.btn--sm{padding:12px 20px;font-size:11px}

/* — Chips / tags — */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;
  padding:7px 14px;border-radius:100px;
  background:rgba(92,46,34,.07);color:var(--clay-600);
  border:1px solid rgba(92,46,34,.13);
}
.chip--light{background:rgba(255,255,255,.09);color:rgba(247,242,233,.85);border-color:rgba(255,255,255,.16)}

/* — Aviso "todavía sin dato" — nunca en rojo, nunca como error.
     El copy usa "tranquil@" a propósito: no asumimos el género de quien
     lee del otro lado de la pantalla. No reintroducir "tranquilo". — */
.nodata{
  display:inline-flex;align-items:flex-start;gap:9px;
  font-size:12.5px;line-height:1.55;font-weight:500;
  padding:11px 16px;border-radius:var(--r-md);
  background:rgba(198,138,92,.1);color:var(--clay-600);
  border:1px dashed rgba(198,138,92,.4);max-width:54ch;
}
.nodata svg{width:15px;height:15px;flex-shrink:0;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.8}
.nodata--light{background:rgba(255,255,255,.07);color:rgba(247,242,233,.72);border-color:rgba(224,174,129,.34)}

/* — Reveals (los observa motion.js) — */
.reveal,.reveal-left{opacity:0;transition:opacity .85s var(--ease),transform .85s var(--ease);will-change:opacity,transform}
.reveal{transform:translateY(26px)}
.reveal-left{transform:translateX(-26px)}
.reveal.is-visible,.reveal-left.is-visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}

/* — VCR text reveal (lo construye motion.js) — */
.vcr{display:flex;flex-wrap:wrap;align-items:baseline}
.vcr-word{display:inline-flex;overflow:hidden;margin-right:.22em;line-height:1.06}
.vcr-word:last-child{margin-right:0}
.vcr-char{display:inline-block;overflow:hidden}
.vcr-char-inner{display:inline-block;transform:translateY(105%);transition:transform .7s var(--ease);will-change:transform;font-style:inherit}
.vcr.revealed .vcr-char-inner{transform:translateY(0)}
.vcr.is-center{justify-content:center}
/* Semilla SEO de los títulos .vcr: el mismo texto de data-vcr, escrito en
   el HTML para que buscadores y asistentes de IA que no ejecutan JS lean
   el <h1>/<h2>. Nunca se ve: motion.js la reemplaza al armar las letras, y
   mientras tanto solo reserva el alto del título (evita el salto de
   layout). Sin JS la hace visible el <noscript> del <head>. */
.vcr-seed{visibility:hidden}

/* — Pop de la palabra en el instante EXACTO en que el hilo la toca.
     transform-origin:center bottom es lo que importa: con el origen al
     centro, dentro de .vcr (align-items:baseline) la palabra parece
     "subirse" del renglón. Anclado abajo crece desde su propia base. — */
@keyframes circleWordPop{0%{transform:scale(1)}40%{transform:scale(1.13)}100%{transform:scale(1)}}
.vcr-word.circle-pop{transform-origin:center bottom;animation:circleWordPop .5s cubic-bezier(.34,1.56,.64,1) both;will-change:transform}

/* — Puntos decorativos flotantes — */
.dots{position:absolute;pointer-events:none;z-index:2}
.dots circle:nth-child(1){animation:float1 3.8s ease-in-out infinite}
.dots circle:nth-child(2){animation:float2 4.5s ease-in-out infinite .4s}
.dots circle:nth-child(3){animation:float1 5.1s ease-in-out infinite .8s}
.dots circle:nth-child(4){animation:float2 3.6s ease-in-out infinite .2s}
.dots circle:nth-child(5){animation:float1 4.8s ease-in-out infinite 1s}
.dots circle:nth-child(6){animation:float2 4.2s ease-in-out infinite .6s}
.dots circle:nth-child(7){animation:float1 5.4s ease-in-out infinite 1.4s}
@keyframes float1{0%,100%{transform:translate(0,0)}33%{transform:translate(3px,-8px)}66%{transform:translate(-4px,4px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}33%{transform:translate(-3px,6px)}66%{transform:translate(5px,-5px)}}

/* ══════════════════ 05 · NAVEGACIÓN ══════════════════ */
/* — Barra de progreso de scroll —
   Un filo delgado pegado al borde superior real del viewport (no dentro
   del nav flotante, que ya no toca los bordes) — se llena con el avance
   de la página. assets/site.js le pone el ancho en cada frame de scroll. */
.scrollbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:310;background:rgba(255,255,255,.05);pointer-events:none}
.scrollbar__fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--copper),var(--copper-2));
  box-shadow:0 0 14px rgba(224,174,129,.65);
}

/* — Aviso de demo: franja delgada fija en el borde superior, POR ENCIMA
   de la isla de nav (z-index:300) y la scrollbar (z-index:310) — la
   isla se recorre hacia abajo con --notice-h para no montarse encima. */
:root{--notice-h:22px}
#demo-notice{
  position:fixed;top:0;left:0;right:0;z-index:320;
  min-height:var(--notice-h);
  background:#f5c518;color:#1a1a1a;
  padding:4px 16px;text-align:center;
  font-family:var(--sans,sans-serif);
  font-size:10px;font-weight:700;letter-spacing:.01em;line-height:1.4;
  box-shadow:0 1px 5px rgba(0,0,0,.12);
}
#demo-notice a{color:#1a1a1a;text-decoration:underline;font-weight:800}
@media(max-width:600px){:root{--notice-h:20px}#demo-notice{font-size:9px;padding:3px 10px}}

/* — Nav: isla flotante de vidrio —
   Ya no es una barra pegada a los bordes: flota separada, centrada,
   con esquinas completamente redondeadas y vidrio permanente (no solo
   al hacer scroll). Es la diferencia entre "una barra con blur" y una
   pieza de interfaz que se siente 2026. */
.nav{
  position:fixed;top:calc(var(--notice-h) + 16px);left:50%;z-index:300;
  transform:translateX(-50%);
  width:min(1180px,calc(100% - 32px));
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:11px 20px;border-radius:100px;
  background:rgba(36,16,9,.5);
  border:1px solid rgba(224,174,129,.15);
  -webkit-backdrop-filter:blur(22px) saturate(175%);
  backdrop-filter:blur(22px) saturate(175%);
  box-shadow:0 24px 54px -26px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.07);
  transition:top .45s var(--ease),padding .45s var(--ease),background .45s ease,box-shadow .45s ease,border-color .45s ease;
}
.nav.scrolled{
  top:calc(var(--notice-h) + 10px);padding:8px 18px;
  background:rgba(30,13,7,.78);
  border-color:rgba(224,174,129,.32);
  box-shadow:0 28px 64px -22px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.1);
}
.nav__brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.nav__mark{width:36px;height:36px;object-fit:contain;transition:width .45s var(--ease),height .45s var(--ease);
  filter:drop-shadow(0 2px 7px rgba(0,0,0,.4))}
.nav.scrolled .nav__mark{width:30px;height:30px}
.nav__name{font-family:var(--serif);font-size:18px;letter-spacing:.06em;color:var(--bone);line-height:1.05}
.nav__name small{display:block;font-family:var(--sans);font-size:8.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:rgba(247,242,233,.55);margin-top:3px}
/* Wordmark horizontal nuevo: ya trae el ícono + el texto en un solo PNG,
   así que se mide por alto (no por ancho/alto fijos como el ícono solo). */
.nav__mark--wordmark{width:auto;height:34px;transition:height .45s var(--ease)}
.nav.scrolled .nav__mark--wordmark{width:auto;height:28px}

/* Links como chips: el resaltado al hover/activo es un fondo, no una
   simple línea — se siente a botón, no a texto subrayado de los 2010. */
.nav__links{display:flex;align-items:center;gap:2px;list-style:none}
.nav__links a{
  font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(247,242,233,.72);padding:9px 15px;border-radius:100px;
  transition:color .3s ease,background .3s ease;
}
.nav__links a:hover{color:var(--bone);background:rgba(255,255,255,.08)}
.nav__links a[aria-current="page"]{color:var(--copper-2);background:rgba(198,138,92,.18)}

.nav__actions{display:flex;align-items:center;gap:12px}
.nav__burger{display:none;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;cursor:pointer;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07)}
.nav__burger span{display:block;width:17px;height:1.6px;background:var(--bone);border-radius:2px;transition:transform .4s var(--ease),opacity .3s ease}
.nav__burger.open span:nth-child(1){transform:translateY(3.3px) rotate(45deg)}
.nav__burger.open span:nth-child(2){transform:translateY(-3.3px) rotate(-45deg)}

.navmobile{
  position:fixed;inset:0;z-index:290;
  background:linear-gradient(165deg,var(--clay-900),#120704);
  display:flex;flex-direction:column;justify-content:center;
  padding:100px var(--sp-gutter) 44px;
  transform:translateY(-100%);transition:transform .6s var(--ease);
  overflow-y:auto;
}
.navmobile.open{transform:translateY(0)}
/* :not(.btn) es OBLIGATORIO. El CTA del menú también es un <a>, así que
   sin esa exclusión heredaba la tipografía serif de 38px de los enlaces
   y el texto se desbordaba de la píldora del botón (bug real reportado).
   Además los enlaces usan la MISMA familia sans y el mismo tratamiento en
   mayúsculas que el nav de escritorio: el menú móvil no debe sentirse de
   otra página, solo más grande y con más aire para el pulgar. */
.navmobile a:not(.btn){
  font-family:var(--sans);font-size:clamp(17px,4.6vw,21px);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--bone);
  padding:17px 0;border-bottom:1px solid rgba(198,138,92,.14);
  display:flex;align-items:center;gap:16px;
}
.navmobile a:not(.btn) i{
  font-family:var(--sans);font-style:normal;font-size:11px;font-weight:700;
  letter-spacing:.16em;color:var(--copper);opacity:.75;
}
.navmobile .btn{margin-top:30px;align-self:stretch}

/* ══════════════════ 06 · HERO + CARRUSEL ══════════════════ */
.hero{
  position:relative;min-height:100svh;overflow:hidden;
  background:var(--clay-900);
  display:flex;flex-direction:column;
  /* Más aire debajo de la isla flotante del nav (que ya no es una barra
     pegada arriba): el logo se veía pegado al borde superior sin esto. */
  padding-top:clamp(140px,19vh,196px);padding-bottom:0;
}
/* Contenedor del paralaje de fondo (foto + los 3 glows) — el transform
   que le mete assets/hero-parallax.js en tiempo real va AQUÍ, nunca en
   .hero__photo ni en .hero__glow*: esos ya tienen su propia animación
   CSS sobre `transform` y una animación activa siempre gana sobre un
   style puesto a mano en el mismo elemento. Componiendo padre+hijo se
   evita el choque sin tocar ninguna de las animaciones existentes. */
.hero__bg-parallax{position:absolute;inset:0;z-index:0;will-change:transform}
.hero__photo{
  position:absolute;inset:0;z-index:0;
  /* La ruta es relativa a ESTE archivo (assets/). Es la misma foto que
     hero-fondo-nuevo.png (1672x941) en WebP: 329 KB en vez de 2.7 MB. Es
     el LCP del inicio y se precarga desde el <head> de index.html con esta
     misma URL: si se cambia aquí, cambiar también ese preload. */
  background:url('img/hero-fondo.webp') center/cover no-repeat;
  transform:scale(1.08);
  animation:heroDrift 34s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroDrift{from{transform:scale(1.08) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(-1.4%,-1.6%,0)}}
/* Tinte cobre sobre la foto de alberca: sin esto el azul del agua compite
   con la paleta terracota/cobre del resto del sitio. mix-blend-mode:overlay
   funde el tono de marca en la imagen sin taparla. */
.hero__photo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(155deg,rgba(224,174,129,.4) 0%,rgba(198,138,92,.12) 40%,rgba(36,16,9,.5) 100%);
  mix-blend-mode:overlay;
}

/* — Glows ambientales —
   Dos luces radiales muy difuminadas, del mismo cobre/terracota de la
   marca, en la MISMA capa que la foto (z-index:0, insertadas después de
   ella en el DOM). Van por debajo del scrim, que es semitransparente, así
   que el brillo se cuela a través de él en vez de quedar tapado — es lo
   que le da profundidad de "estudio fotográfico" al hero en vez de una
   foto plana con una capa oscura encima. mix-blend-mode:screen las hace
   sumar luz sobre la foto sin verse como un círculo pintado. */
.hero__glow{position:absolute;z-index:0;pointer-events:none;border-radius:50%;mix-blend-mode:screen;will-change:opacity,transform}
.hero__glow--top{
  width:min(900px,64vw);height:min(900px,64vw);left:50%;top:-14%;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(224,174,129,.6) 0%,rgba(224,174,129,.18) 42%,transparent 72%);
  filter:blur(70px);
  animation:glowPulse 9s ease-in-out infinite;
}
.hero__glow--side{
  width:min(620px,46vw);height:min(620px,46vw);right:-10%;bottom:8%;
  background:radial-gradient(circle,rgba(198,138,92,.5) 0%,transparent 70%);
  filter:blur(90px);opacity:.55;
  animation:glowPulse 11s ease-in-out infinite 1.5s;
}
@keyframes glowPulse{0%,100%{opacity:.55;transform:translateX(-50%) scale(1)}50%{opacity:.85;transform:translateX(-50%) scale(1.08)}}
.hero__glow--side{animation-name:glowPulseSide}
@keyframes glowPulseSide{0%,100%{opacity:.42;transform:scale(1)}50%{opacity:.62;transform:scale(1.1)}}
/* Tercer glow: a diferencia de los otros dos (que solo laten en el
   sitio), este además DERIVA en diagonal muy despacio — es lo que hace
   que el fondo se sienta vivo en vez de una foto con dos manchas fijas. */
.hero__glow--drift{
  width:min(500px,40vw);height:min(500px,40vw);left:8%;top:38%;
  background:radial-gradient(circle,rgba(224,174,129,.4) 0%,transparent 68%);
  filter:blur(80px);opacity:.4;
  animation:glowDrift 16s ease-in-out infinite;
}
@keyframes glowDrift{
  0%,100%{transform:translate(0,0) scale(1);opacity:.32}
  50%{transform:translate(6vw,-4vh) scale(1.22);opacity:.55}
}

.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(120% 78% at 50% 0%,rgba(36,16,9,.48) 0%,rgba(36,16,9,.84) 52%,rgba(15,6,3,.98) 100%),
    linear-gradient(180deg,rgba(18,7,4,.66) 0%,rgba(18,7,4,.1) 30%,rgba(18,7,4,.22) 55%,rgba(15,6,3,.94) 100%);
}
/* Viñeta fina en los bordes laterales — sin ella, en pantallas anchas los
   glows quedan "cortados" justo en el borde del viewport en vez de
   desvanecerse. */
.hero__scrim::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,7,4,.55) 0%,transparent 16%,transparent 84%,rgba(18,7,4,.55) 100%);
}

/* — Sello ornamental — puro diseño: ni tarjeta, ni dato, ni texto. Un
   glifo que respira con un anillo de luz cobre girando detrás (::before,
   conic-gradient). El único "contenido" es luz y movimiento. */
.hero__sigil{
  position:relative;z-index:6;isolation:isolate;
  width:44px;height:44px;margin:0 auto clamp(20px,3vh,30px);
  display:grid;place-items:center;color:var(--copper-2);
  opacity:0;transform:translateY(14px) scale(.8);
  animation:heroIn .9s var(--ease) .05s forwards, sigilPulse 3.4s ease-in-out .95s infinite;
}
.hero__sigil svg{width:22px;height:22px}
/* Anillo de luz cobre que gira despacio DETRÁS del glifo (z-index:-1,
   blur alto): se lee como una fuente de luz propia, no como un borde. */
.hero__sigil::before{
  content:'';position:absolute;z-index:-1;inset:-260%;
  background:conic-gradient(from 0deg,transparent 0%,rgba(224,174,129,.65) 8%,transparent 20%,transparent 100%);
  filter:blur(22px);
  animation:trustRingSpin 7s linear infinite;
}
@keyframes trustRingSpin{to{transform:rotate(360deg)}}
@keyframes sigilPulse{
  0%,100%{filter:drop-shadow(0 0 0 rgba(224,174,129,0));transform:scale(1)}
  50%{filter:drop-shadow(0 0 16px rgba(224,174,129,.85));transform:scale(1.12)}
}

.hero__head{position:relative;z-index:6;isolation:isolate;text-align:center;padding-inline:var(--sp-gutter)}
/* El wordmark del cliente es el título del hero: no se re-escribe en texto,
   se usa el PNG real de la marca para que el lockup sea exacto. Un glow
   propio detrás del logo (independiente de los dos ambientales) asegura
   que quede el punto más luminoso del hero, como si tuviera luz propia. */
/* .hero__logo-wrap es el objetivo del paralaje "de adelante"
   (hero-parallax.js): no tiene ninguna animación CSS propia sobre
   transform, así que el JS puede escribirle style.transform en cada
   frame sin pisar nada — el logo, adentro, sigue con la suya. */
.hero__logo-wrap{position:relative;display:inline-block;will-change:transform}
.hero__logo-wrap::before{
  content:'';position:absolute;z-index:-1;inset:-18% -10%;
  background:radial-gradient(ellipse 60% 55% at 50% 42%,rgba(224,174,129,.4),transparent 72%);
  filter:blur(34px);
}
/* Entrada en foco de cámara: arranca grande y desenfocado, como una toma
   que aún no asienta el lente, y "cierra" a foco nítido en tamaño real.
   Mucho más notorio que un simple fundido — es el primer instante del
   hero y tiene que sentirse como tal. */
.hero__logo{
  width:min(400px,58vw);margin:0 auto;
  opacity:0;transform:scale(1.4);
  filter:blur(28px) drop-shadow(0 12px 40px rgba(0,0,0,.55));
  animation:heroLogoReveal 1.6s var(--ease) .32s forwards;
}
@keyframes heroLogoReveal{
  to{opacity:1;transform:scale(1);filter:blur(0) drop-shadow(0 12px 40px rgba(0,0,0,.55))}
}
/* Sigue en uso por el sello, el carrusel, las CTAs y el scroll cue —
   ver los 4 usos de `animation:heroIn` más abajo en este archivo. */
@keyframes heroIn{to{opacity:1;transform:translateY(0)}}

/* — Tagline: efecto de texto cinematográfico —
   Nada de gradiente en el texto (se ve genérico/IA); en vez de eso el
   tracking arranca muy abierto y desvanecido y se "cierra" al tamaño
   normal al aparecer — el mismo truco que un título de película. */
.hero__tagline{
  margin-top:14px;font-family:var(--sans);font-size:13px;font-weight:600;
  color:rgba(247,242,233,.72);text-transform:uppercase;
  opacity:0;letter-spacing:.05em;
  animation:taglineIn 1.4s var(--ease) .68s forwards;
}
@keyframes taglineIn{
  0%{opacity:0;letter-spacing:.6em;filter:blur(6px)}
  60%{opacity:1}
  100%{opacity:1;letter-spacing:.22em;filter:blur(0)}
}

.hero__desc{
  max-width:56ch;margin:18px auto 0;
  font-size:clamp(14px,1.6vw,16px);line-height:1.7;
  color:rgba(247,242,233,.72);
}

/* — CARRUSEL DEL HERO —
   Basado en el componente CircularGallery (react-bits / shadcn), pero en
   fila recta (sin la curvatura del original) y resuelto con
   transform:translate3d en vez de un canvas WebGL. Motivo: la página ya
   corre cuatro fondos generativos (Silk, Waves, Ribbon, Morphic) y sumar
   un contexto WebGL más con 12 texturas era justo lo que causaba lag. Con
   transforms todo vive en el compositor, se mueve solo a 60fps y no
   depende de ninguna librería. */
/* Intocable a propósito: gira sola, no se arrastra, no se toca. Con
   pointer-events:none el navegador ni siquiera le manda eventos de mouse
   o touch — un tap encima en el celular pasa de largo como si la galería
   no estuviera ahí, así nunca puede robarle un gesto de scroll a la
   página (bug real que ya pasó: un tap accidental sobre la galería
   dejaba el celular sin poder bajar la página). */
.arc{
  position:relative;z-index:6;isolation:isolate;
  /* 15% más chico que el original (320/44vh/460 → 272/37.4vh/391) y un 35%
     más abajo (el margen-top absorbe la caída: hero__foot sigue anclado
     al fondo del hero por su margin-top:auto, así que el resto de la
     sección — logo, CTAs, marquesina — no se mueve). */
  width:100%;height:clamp(380px,33vh,540px);
  margin-top:clamp(90px,13vh,150px);
  overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  opacity:0;transform:translateY(16px);
  animation:heroIn 1.1s var(--ease) .58s forwards;
}
/* Brillo cálido justo detrás del carrusel: separa la galería del fondo
   sin necesitar un borde ni una tarjeta — se siente iluminada, no pegada. */
.arc::before{
  content:'';position:absolute;z-index:-1;left:50%;top:50%;
  width:120%;height:180%;
  background:radial-gradient(ellipse 55% 45% at 50% 50%,rgba(224,174,129,.22),transparent 68%);
  filter:blur(50px);pointer-events:none;
  animation:arcGlowBreathe 6s ease-in-out infinite;
}
@keyframes arcGlowBreathe{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.85}
  50%{transform:translate(-50%,-50%) scale(1.12);opacity:1}
}
.arc__stage{position:absolute;inset:0}
.arc__item{
  position:absolute;top:0;left:0;
  width:var(--arc-w,230px);height:var(--arc-h,300px);
  margin-left:calc(var(--arc-w,230px) / -2);
  margin-top:calc(var(--arc-h,300px) / -2);
  will-change:transform;
  transform:translate3d(-9999px,0,0);
  backface-visibility:hidden;
}
.arc__card{
  position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:18px;
  box-shadow:0 26px 60px -26px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.08) inset;
  background:#1b0d07;
}
.arc__card img{width:100%;height:100%;object-fit:cover;display:block}
/* Sin texto sobre la foto a propósito — se quitó el rótulo para que la
   galería se lea como fotografía, no como catálogo. Una viñeta mínima en
   los bordes es lo único que queda, solo para dar profundidad a la toma. */
.arc__card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,transparent 16%,transparent 78%,rgba(0,0,0,.28) 100%);
}
.hero__foot{
  position:relative;z-index:6;isolation:isolate;
  margin-top:auto;padding:clamp(18px,3vh,34px) var(--sp-gutter) 0;
  display:flex;align-items:flex-end;justify-content:center;gap:clamp(14px,3vw,26px);
  flex-wrap:wrap;
  opacity:0;transform:translateY(16px);
  animation:heroIn 1s var(--ease) .82s forwards;
}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
/* CTA principal del hero: glow que respira para que el ojo lo encuentre
   primero. Solo aquí, no en .btn--copper del resto del sitio — el resto
   son botones dentro de secciones normales, no un llamado a la acción
   flotando sobre una foto. */
.hero__ctas .btn--copper{animation:ctaGlow 2.8s ease-in-out infinite}
.hero__ctas .btn--copper:hover{animation-play-state:paused}
@keyframes ctaGlow{
  0%,100%{box-shadow:0 1px 2px rgba(20,16,13,.18),0 0 0 rgba(198,138,92,0)}
  50%{box-shadow:0 1px 2px rgba(20,16,13,.18),0 0 30px 4px rgba(224,174,129,.55)}
}

/* — Sello del premio: aparece en hero, en Nosotros y en el footer —
   La imagen del sello (fondo negro + borde dorado) ya trae su propio
   marco: envolverla en una pastilla con blur encima era un marco sobre
   otro marco. Se muestra tal cual, solo con una sombra para que se sienta
   impresa sobre el fondo, no un ícono de interfaz. */
.award{display:inline-flex;align-items:center;gap:14px}
.award img{
  width:50px;height:50px;object-fit:cover;flex-shrink:0;border-radius:8px;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.7);
}
.award__txt{line-height:1.3}
.award__txt b{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--copper-2)}
.award__txt span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,242,233,.55)}
.award--ink .award__txt b{color:var(--clay-600)}
.award--ink .award__txt span{color:rgba(58,50,44,.6)}

/* — Marquesina — */
.marquee{
  position:relative;z-index:6;
  border-top:1px solid rgba(198,138,92,.16);
  border-bottom:1px solid rgba(198,138,92,.16);
  background:rgba(18,7,4,.55);
  overflow:hidden;padding-block:14px;margin-top:clamp(24px,4vh,44px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__row{display:inline-flex;white-space:nowrap;animation:marq 42s linear infinite;will-change:transform}
.marquee:hover .marquee__row{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee__row span{
  font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(247,242,233,.6);padding-inline:26px;
}
.marquee__row i{color:var(--copper);font-style:normal;opacity:.7}

/* ══════════════════ 07 · SECCIONES ══════════════════ */

/* — Encabezado de sección reutilizable — */
.head{display:grid;gap:clamp(20px,3vw,48px);align-items:end;margin-bottom:clamp(38px,5vw,64px)}
@media(min-width:900px){.head--split{grid-template-columns:1.15fr .85fr}}

/* — Nosotros — */
.about{display:grid;gap:clamp(38px,5vw,72px)}
@media(min-width:940px){.about{grid-template-columns:1.08fr .92fr;align-items:center}}
.about__media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.about__media img{width:100%;height:clamp(300px,44vw,520px);object-fit:cover}
.about__badge{
  position:absolute;left:18px;bottom:18px;z-index:2;
  display:flex;align-items:center;gap:11px;padding:11px 17px;border-radius:100px;
  background:rgba(20,7,3,.62);border:1px solid rgba(224,174,129,.28);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--bone);
}
.about__badge svg{width:14px;height:14px;stroke:var(--copper-2);fill:none;stroke-width:2}

.stats{display:grid;gap:2px;border-radius:var(--r-lg);overflow:hidden;background:rgba(198,138,92,.2);margin-top:clamp(26px,3.5vw,40px)}
@media(min-width:520px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{background:var(--clay-900);padding:26px 22px;display:flex;flex-direction:column;gap:5px}
.section--bone .stat,.section--bone2 .stat{background:var(--bone)}
.stat__num{font-family:var(--serif);font-size:clamp(32px,4.2vw,44px);line-height:1;color:var(--copper)}
.stat__label{font-size:12.5px;font-weight:700;letter-spacing:.02em}
.section--dark .stat__label,.section--ink .stat__label{color:var(--bone)}
.stat__sub{font-size:11.5px;color:rgba(58,50,44,.6)}
.section--dark .stat__sub,.section--ink .stat__sub{color:rgba(247,242,233,.48)}

/* — Espacios (tabs + panel) — */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(26px,3.5vw,40px)}
.tab{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:12px 22px;border-radius:100px;
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(247,242,233,.62);border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  transition:color .3s ease,background .3s ease,border-color .3s ease,transform .3s var(--ease);
}
.tab i{font-style:normal;font-size:9.5px;opacity:.6}
.tab:hover{color:var(--bone);border-color:rgba(224,174,129,.4)}
.tab.active{background:var(--copper);color:#2A1109;border-color:transparent}
.tab.active i{opacity:.75}

.panel{display:none;gap:clamp(26px,4vw,56px);align-items:center}
.panel.active{display:grid;animation:panelIn .6s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(min-width:900px){.panel{grid-template-columns:1.05fr .95fr}}
.panel__img{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.panel__img img{width:100%;height:clamp(280px,42vw,480px);object-fit:cover}
.panel__pill{
  position:absolute;top:16px;left:16px;z-index:2;
  padding:8px 15px;border-radius:100px;font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--bone);
  background:rgba(20,7,3,.6);border:1px solid rgba(224,174,129,.3);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.panel__name{font-family:var(--serif);font-size:clamp(28px,4vw,44px);font-weight:300;line-height:1.05;margin-bottom:6px}
.panel__cap{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--copper-2);margin-block:14px 18px}
.panel__cap svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.feats{display:flex;flex-wrap:wrap;gap:8px;margin-block:22px 26px}

/* — Precios — */
.prices{display:grid;gap:20px}
@media(min-width:820px){.prices{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.price{
  display:flex;flex-direction:column;position:relative;
  padding:clamp(28px,3.4vw,38px);border-radius:var(--r-lg);
  background:rgba(255,255,255,.72);border:1px solid rgba(92,46,34,.11);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.price:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.price--hero{background:var(--clay-900);border-color:transparent;color:var(--bone);box-shadow:var(--shadow-lg)}
.price__tag{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  padding:6px 16px;border-radius:100px;background:var(--copper);color:#2A1109;
  font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
}
.price__from{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--copper);margin-bottom:8px}
.price__name{font-family:var(--serif);font-size:clamp(23px,2.6vw,29px);font-weight:400;line-height:1.15}
.price__amount{font-family:var(--serif);font-size:clamp(30px,3.6vw,40px);line-height:1;margin-block:16px 4px}
.price__amount small{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.14em;opacity:.55}
.price__amount.is-tbd{color:rgba(58,50,44,.34)}
.price--hero .price__amount.is-tbd{color:rgba(247,242,233,.34)}
.price__list{list-style:none;display:flex;flex-direction:column;gap:11px;margin-block:22px 26px;flex:1}
.price__list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.price--hero .price__list li{color:rgba(247,242,233,.8)}
.price__list svg{width:15px;height:15px;flex-shrink:0;margin-top:3px;stroke:var(--copper);fill:none;stroke-width:2.4}

/* — Bento (servicios y adelanto de galería) —
   Regla dura: el total de celdas (piezas de 1 + anchas × 2) SIEMPRE debe
   ser múltiplo de 4. Así cierra sin huecos en los dos anchos que usa el
   sitio: 2 columnas (móvil, donde .svc--wide no aplica todavía y cada
   pieza vale 1) y 4 columnas (tablet/escritorio). Servicios: 8 + 2×2 = 12
   celdas = 3 filas exactas en 4 columnas, 5 filas exactas en 2. Galería:
   4 + 2×2 = 8 celdas = 2 filas / 4 filas. Si agregas o quitas una
   tarjeta, ajusta el conteo para seguir siendo múltiplo de 4 — nunca
   dejes un hueco a propósito. grid-auto-flow:dense es un respaldo, no
   la solución: sin el conteo correcto, dense reordena piezas pero no
   inventa una celda que no existe. */
.bento{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);grid-auto-flow:dense}
@media(min-width:760px){
  .bento{grid-template-columns:repeat(4,1fr)}
  .svc--wide{grid-column:span 2}
}
.svc{
  position:relative;overflow:hidden;border-radius:var(--r-md);
  min-height:190px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:20px;isolation:isolate;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.svc--flat{background:var(--clay-900);color:var(--bone)}
.svc__bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transition:transform 1.1s var(--ease)}
.svc:hover .svc__bg{transform:scale(1.07)}
.svc--photo::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,7,3,.05) 30%,rgba(20,7,3,.86) 100%)}
.svc--photo{color:var(--bone)}
.svc__num{position:absolute;top:16px;right:18px;font-family:var(--serif);font-size:22px;opacity:.4}
.svc__icon{width:34px;height:34px;margin-bottom:auto}
.svc__icon svg{width:100%;height:100%;stroke:var(--copper);fill:none;stroke-width:1.5}
.svc__name{font-size:14.5px;font-weight:700;letter-spacing:.01em;margin-bottom:5px}
.svc__desc{font-size:12.5px;line-height:1.5;opacity:.68}

/* — Reseñas — carrusel de postales, arrastrable con el mouse y con
   scroll táctil nativo en móvil (assets/site.js maneja el arrastre y los
   botones prev/next). Ya no es una rejilla estática. — */
.testimonios__source{text-align:center;margin-block:clamp(40px,5vw,60px) 4px}
.testimonios__source .eyebrow{margin-bottom:0}
.postcards{position:relative}
.postcards + .testimonios__source{margin-top:clamp(40px,5vw,60px)}
.postcards__track{
  display:flex;gap:18px;padding:6px 2px 14px;margin:0 -2px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  cursor:grab;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.postcards__track::-webkit-scrollbar{display:none}
.postcards__track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.postcards__nav{
  position:absolute;top:38%;z-index:3;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:var(--bone);transition:background .3s ease,transform .3s var(--ease);
}
.postcards__nav:hover{background:rgba(255,255,255,.16);transform:translateY(-50%) scale(1.06)}
.postcards__nav:disabled{opacity:.3;pointer-events:none}
.postcards__nav svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.postcards__prev{left:calc(-1 * clamp(4px,2vw,26px));transform:translateY(-50%)}
.postcards__next{right:calc(-1 * clamp(4px,2vw,26px));transform:translateY(-50%)}
@media(max-width:900px){.postcards__nav{display:none}}

/* — Reseñas: postales retro —
   Tarjeta tipo "postal de papel" sobre el fondo oscuro de la sección:
   crema cálido, ligeramente inclinada (alterna según sea par/impar), se
   endereza y se levanta al pasar el cursor, y se puede abrir a pantalla
   completa con un clic (assets/site.js maneja el modal, reutilizando el
   mismo texto que ya está en el DOM — no hace falta duplicar contenido). */
.review{
  scroll-snap-align:start;flex:0 0 clamp(252px,74vw,300px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:0;padding:34px 24px 28px;border-radius:26px;cursor:pointer;
  background:linear-gradient(175deg,var(--bone) 0%,var(--bone-2) 100%);
  box-shadow:0 22px 50px -20px rgba(0,0,0,.55),0 2px 0 rgba(0,0,0,.04);
  border:1px solid rgba(255,255,255,.5);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.review:nth-child(odd){transform:rotate(-1.6deg)}
.review:nth-child(even){transform:rotate(1.4deg)}
.review:hover{transform:rotate(0deg) translateY(-8px) scale(1.02);box-shadow:0 30px 64px -20px rgba(0,0,0,.65)}
.review__quote-ico{width:22px;height:22px;color:var(--copper);opacity:.55;margin-bottom:10px}
.review__quote-ico svg{width:100%;height:100%;fill:currentColor}
.review__ini{
  width:84px;height:84px;border-radius:50%;flex-shrink:0;margin-bottom:16px;
  display:grid;place-items:center;font-family:var(--serif);font-size:30px;font-weight:500;
  background:linear-gradient(150deg,var(--clay-600),var(--copper) 130%);color:var(--bone);
  border:3px solid rgba(92,46,34,.18);box-shadow:0 10px 22px -10px rgba(92,46,34,.5);
}
.review__ini--photo{background-size:cover;background-position:center;color:transparent}
.review__stars{color:var(--copper);letter-spacing:.16em;font-size:12px;margin-bottom:14px}
.review__text{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:18px;line-height:1.5;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
.review__who{display:flex;flex-direction:column;gap:4px;margin-top:20px}
.review__name{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--clay-700)}
.review__meta{
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--copper);text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(198,138,92,.4);
}

/* — Modal de reseña completa —
   Mismo patrón que el lightbox de fotos: un solo modal reutilizado,
   assets/site.js lo llena con el contenido de la tarjeta en la que se
   hizo clic (ya está todo en el DOM, no se duplica nada). */
.tmodal{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px)}
.tmodal.open{display:flex}
.tmodal__bg{position:absolute;inset:0;background:rgba(12,5,2,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.tmodal__card{
  position:relative;width:100%;max-width:560px;max-height:86vh;overflow-y:auto;
  border-radius:28px;padding:clamp(32px,5vw,52px) clamp(28px,4vw,44px) 36px;text-align:center;
  background:linear-gradient(175deg,var(--bone) 0%,var(--bone-2) 100%);
  box-shadow:0 50px 120px -30px rgba(0,0,0,.7);
  animation:tmodalIn .4s var(--ease);
}
@keyframes tmodalIn{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
.tmodal__close{
  position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;background:rgba(92,46,34,.08);color:var(--clay-700);
  transition:background .3s ease,transform .3s var(--ease);
}
.tmodal__close:hover{background:rgba(92,46,34,.16);transform:rotate(90deg)}
.tmodal__close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.tmodal__ini{
  width:110px;height:110px;border-radius:50%;margin:0 auto 18px;
  display:grid;place-items:center;font-family:var(--serif);font-size:38px;font-weight:500;
  background:linear-gradient(150deg,var(--clay-600),var(--copper) 130%);color:var(--bone);
  border:3px solid rgba(92,46,34,.18);box-shadow:0 14px 30px -12px rgba(92,46,34,.5);
}
.tmodal__ini--photo{background-size:cover;background-position:center;color:transparent}
.tmodal__stars{color:var(--copper);letter-spacing:.18em;font-size:14px;margin-bottom:16px}
.tmodal__text{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.4vw,24px);line-height:1.6;color:var(--ink-2)}
.tmodal__name{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--clay-700);margin-top:22px}
.tmodal__meta{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--copper);margin-top:4px}

/* — MODAL "¿A QUIÉN QUIERES CONTACTAR?" —
   Se abre en lugar de redirigir directo a wa.me cuando se toca cualquier
   .js-wa (botón del header, del hero, del footer, flotante, del form).
   Mismo lenguaje visual que .tmodal: tarjeta bone, blur de fondo, easing
   compartido. El marcado lo inyecta assets/site.js, así que este bloque
   vive una sola vez y aplica en las cinco páginas del sitio. */
.wamodal{position:fixed;inset:0;z-index:410;display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px)}
.wamodal.open{display:flex}
.wamodal__bg{position:absolute;inset:0;background:rgba(12,5,2,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.wamodal__card{
  position:relative;width:100%;max-width:420px;
  border-radius:28px;padding:clamp(32px,5vw,44px) clamp(26px,4vw,36px) clamp(28px,4vw,36px);text-align:center;
  background:linear-gradient(175deg,var(--bone) 0%,var(--bone-2) 100%);
  box-shadow:0 50px 120px -30px rgba(0,0,0,.7);
  animation:tmodalIn .4s var(--ease);
}
.wamodal__close{
  position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;background:rgba(92,46,34,.08);color:var(--clay-700);
  transition:background .3s ease,transform .3s var(--ease);
}
.wamodal__close:hover{background:rgba(92,46,34,.16);transform:rotate(90deg)}
.wamodal__close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.wamodal__ico{
  width:60px;height:60px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
  background:rgba(37,211,102,.14);color:var(--wa);
}
.wamodal__ico svg{width:26px;height:26px}
.wamodal__title{font-family:var(--serif);font-size:clamp(21px,2.6vw,25px);font-weight:500;color:var(--ink-2)}
.wamodal__sub{font-size:13px;color:var(--clay-600);margin-top:8px}
.wamodal__opts{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.wamodal__opt{
  display:flex;flex-direction:column;gap:3px;text-align:left;
  padding:16px 20px;border-radius:16px;border:1px solid rgba(92,46,34,.14);
  background:rgba(255,255,255,.5);cursor:pointer;
  transition:border-color .25s ease,background .25s ease,transform .25s var(--ease);
}
.wamodal__opt:hover{border-color:var(--copper);background:rgba(198,138,92,.1);transform:translateY(-2px)}
.wamodal__opt-name{font-size:15px;font-weight:700;color:var(--ink-2)}
.wamodal__opt-num{font-size:12.5px;color:var(--clay-600);letter-spacing:.02em}

/* Sin pastilla: el número grande + una línea vertical fina bastan para
   leerse como una cifra real de Google, no como un chip de interfaz. */
.rating{display:inline-flex;align-items:center;gap:16px}
.rating>span:last-child{padding-left:16px;border-left:1px solid rgba(224,174,129,.32)}
.rating__num{font-family:var(--serif);font-size:44px;line-height:1;color:var(--copper-2)}
.rating__stars{color:var(--copper);font-size:14px;letter-spacing:.14em;display:block}
.rating__count{font-size:11.5px;color:rgba(247,242,233,.55);display:block;margin-top:3px}

/* — FAQ — */
.faq{display:flex;flex-direction:column;gap:10px;max-width:840px;margin-inline:auto}
.faq__item{
  border-radius:var(--r-md);overflow:hidden;
  background:rgba(255,255,255,.62);border:1px solid rgba(92,46,34,.1);
  transition:border-color .35s ease,box-shadow .35s ease,background .35s ease;
}
.faq__item.open{border-color:rgba(198,138,92,.42);box-shadow:var(--shadow-sm);background:#fff}
.faq__q{
  width:100%;display:flex;align-items:center;gap:14px;cursor:pointer;
  padding:19px 22px;text-align:left;font-size:15px;font-weight:600;line-height:1.4;color:var(--ink);
}
/* FIX (bug real, visible como óvalos deformados en vez de círculos):
   antes era `.faq__q span{flex:1}` — ese selector matchea CUALQUIER span
   hijo, incluyendo `.faq__ico` y `.faq__pm`. Como `.faq__q span` (clase +
   elemento) tiene más especificidad que `.faq__ico` (una sola clase), el
   flex:1 le ganaba al flex-shrink:0 del ícono sin importar el orden en el
   archivo, y el círculo de 32px se estiraba a lo ancho de la fila hasta
   verse como una píldora. Ahora el flex:1 vive en una clase propia
   (.faq__label) que SOLO lleva el span del texto de la pregunta. */
.faq__label{flex:1}
.faq__ico{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:rgba(198,138,92,.14)}
.faq__ico svg{width:15px;height:15px;stroke:var(--clay-600);fill:none;stroke-width:1.9}
.faq__pm{width:22px;height:22px;flex-shrink:0;position:relative}
.faq__pm::before,.faq__pm::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--clay-600);border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .4s var(--ease),opacity .3s ease;
}
.faq__pm::before{width:13px;height:1.8px}
.faq__pm::after{width:1.8px;height:13px}
.faq__item.open .faq__pm::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq__item.open .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{padding:0 22px 22px 68px;font-size:14px;line-height:1.68;color:var(--ink-2)}

/* — Ubicación — */
.loc{display:grid;gap:clamp(30px,4vw,56px);align-items:center}
@media(min-width:940px){.loc{grid-template-columns:.9fr 1.1fr}}
.loc__facts{display:flex;flex-direction:column;gap:14px;margin-block:26px 30px}
.loc__fact{display:flex;align-items:center;gap:13px;font-size:14px;color:rgba(247,242,233,.82)}
.loc__fact i{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:rgba(224,174,129,.14);border:1px solid rgba(224,174,129,.24);
}
.loc__fact svg{width:16px;height:16px;stroke:var(--copper-2);fill:none;stroke-width:1.8}
.loc__card{border-radius:var(--r-lg);overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-lg)}
.loc__frame{position:relative;aspect-ratio:16/11}
.loc__frame iframe{width:100%;height:100%;border:0;filter:grayscale(.28) contrast(1.04)}
.loc__pin{
  position:absolute;top:14px;left:14px;z-index:2;display:flex;align-items:center;gap:9px;
  padding:8px 15px;border-radius:100px;background:rgba(20,7,3,.72);border:1px solid rgba(224,174,129,.3);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.loc__pin b{font-size:13px;color:var(--copper-2)}
.loc__pin span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,242,233,.6)}
.loc__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 22px}
.loc__addr{font-size:13px;line-height:1.55;color:rgba(247,242,233,.7)}
.loc__addr b{display:block;color:var(--bone);font-size:14px;margin-bottom:2px}

/* — Contacto — */
.contact{display:grid;gap:clamp(32px,4vw,60px)}
@media(min-width:940px){.contact{grid-template-columns:1fr 1fr;align-items:start}}
.info{display:flex;flex-direction:column;gap:20px;padding:clamp(24px,3vw,32px);border-radius:var(--r-lg);
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.info__row{display:flex;gap:14px;align-items:center}
.info__ico{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:rgba(224,174,129,.14);border:1px solid rgba(224,174,129,.22)}
.info__ico svg{width:16px;height:16px;stroke:var(--copper-2);fill:none;stroke-width:1.8}
.info__label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,242,233,.48);margin-bottom:4px}
.info__val{display:block;font-size:14.5px;line-height:1.5;color:var(--bone)}

.form{padding:clamp(24px,3vw,32px);border-radius:var(--r-lg);background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.form__head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.form h3{font-family:var(--serif);font-size:26px;font-weight:400;color:var(--bone);margin:0}

/* — Switch WhatsApp / Correo — control segmentado, no un toggle binario
     genérico: cada opción lleva su propio ícono y etiqueta, así se lee de
     un vistazo cuál está activa sin depender solo del color. — */
.modeswitch{display:inline-flex;padding:3px;border-radius:100px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.modeswitch__opt{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:8px 14px;border-radius:100px;
  font-size:11px;font-weight:700;letter-spacing:.06em;
  color:rgba(247,242,233,.5);
  transition:background .3s ease,color .3s ease;
}
.modeswitch__opt svg{width:14px;height:14px;flex-shrink:0}
.modeswitch__opt.is-active{background:var(--copper);color:#2A1109}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,242,233,.5)}
.field input,.field select{
  /* -webkit-appearance:none + min-width:0 son OBLIGATORIOS, no cosmética:
     en iOS los <input type="date"> y los <select> traen un ancho mínimo
     intrínseco desde su shadow DOM que IGNORA width:100%, así que el
     campo se desbordaba de la tarjeta del formulario en el celular
     (bug real reportado). Con appearance:none se pierde el chrome nativo
     y el campo por fin respeta el ancho de su contenedor.
     box-sizing ya es border-box global, pero el padding aquí depende de
     eso, así que se deja explícito el width:100%. */
  -webkit-appearance:none;appearance:none;
  width:100%;max-width:100%;min-width:0;
  padding:13px 15px;border-radius:var(--r-sm);font-size:16px;font-family:inherit;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:var(--bone);
  transition:border-color .3s ease,background .3s ease;
}
/* font-size:16px arriba tampoco es capricho: por debajo de 16px, Safari
   en iOS hace zoom automático al enfocar un campo y deja la página
   descuadrada. 16px es el mínimo que evita ese zoom. */
/* background-COLOR, no el atajo `background`: el atajo reinicia
   background-image y borraría la flecha del <select> al enfocarlo. */
.field input:focus,.field select:focus{outline:none;border-color:var(--copper);background-color:rgba(255,255,255,.11)}
.field select option{background:var(--clay-800);color:var(--bone)}
/* El input de fecha en iOS se alinea al centro por defecto y arrastra un
   ancho fantasma del indicador nativo; se fuerza alineación izquierda
   para que coincida con los demás campos del formulario. */
.field input[type="date"]{text-align:left}
.field input::-webkit-date-and-time-value{text-align:left;margin:0}
.field input::-webkit-calendar-picker-indicator{filter:invert(.8) sepia(.4)}
/* El <select> pierde su flecha nativa al poner appearance:none, así que
   se dibuja una con background-image (SVG inline, sin archivo extra). */
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0AE81' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px 16px;
  padding-right:40px;
}
.form__hint{margin-top:11px;text-align:center;font-size:11.5px;color:rgba(247,242,233,.42)}

/* ══════════════════ 08 · SUBPÁGINAS ══════════════════ */
/* Cabecera compacta reutilizada por galeria / espacios / 404 / aviso */
.pagehead{position:relative;overflow:hidden;background:var(--clay-900);padding:clamp(150px,20vh,220px) 0 clamp(56px,7vw,90px)}
.pagehead__photo{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;transform:scale(1.06);opacity:.5}
.pagehead__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(18,7,4,.9) 0%,rgba(36,16,9,.72) 45%,rgba(36,16,9,.98) 100%)}
.crumbs{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,242,233,.45);margin-bottom:18px}
.crumbs a:hover{color:var(--copper-2)}
.crumbs i{font-style:normal;opacity:.5}

/* Galería masonry + lightbox */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,3.6vw,42px);justify-content:center}
.filter{
  padding:10px 20px;border-radius:100px;cursor:pointer;
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid rgba(92,46,34,.16);background:transparent;
  transition:all .3s ease;
}
.filter:hover{border-color:var(--clay-600);color:var(--clay-700)}
.filter.active{background:var(--clay-700);color:var(--bone);border-color:transparent}
/* Sobre secciones oscuras (galería ahora vive en section--ink) el mismo
   botón necesita su contraste invertido: texto claro, borde translúcido. */
.filters--light .filter{color:rgba(247,242,233,.78);border-color:rgba(255,255,255,.2)}
.filters--light .filter:hover{border-color:var(--copper-2);color:var(--copper-2)}
.filters--light .filter.active{background:var(--copper);color:#2A1109}

.mason{columns:1;column-gap:14px}
@media(min-width:600px){.mason{columns:2}}
@media(min-width:980px){.mason{columns:3}}
.mason__item{
  break-inside:avoid;margin-bottom:14px;position:relative;overflow:hidden;
  border-radius:var(--r-md);cursor:zoom-in;background:var(--bone-3);
  box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),opacity .4s ease;
}
.mason__item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.mason__item img{width:100%;height:auto;display:block;transition:transform 1s var(--ease)}
.mason__item:hover img{transform:scale(1.05)}
.mason__item figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(20,7,3,.82));
  opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s var(--ease);
}
.mason__item:hover figcaption{opacity:1;transform:none}
.mason__item.is-hidden{display:none}

.lb{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px)}
.lb.open{display:flex}
.lb__bg{position:absolute;inset:0;background:rgba(12,5,2,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lb__img{position:relative;max-width:min(1100px,92vw);max-height:82vh;border-radius:var(--r-md);box-shadow:0 40px 120px -30px rgba(0,0,0,.9);animation:lbIn .4s var(--ease)}
@keyframes lbIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.lb__cap{position:absolute;left:0;right:0;bottom:calc(-1 * clamp(30px,5vh,44px));text-align:center;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,242,233,.6)}
.lb__btn{
  position:absolute;z-index:2;width:48px;height:48px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  color:#fff;transition:background .3s ease,transform .3s var(--ease);
}
.lb__btn:hover{background:rgba(255,255,255,.18);transform:scale(1.06)}
.lb__btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.lb__close{top:clamp(16px,3vw,32px);right:clamp(16px,3vw,32px)}
.lb__prev{left:clamp(10px,2.4vw,30px);top:50%;transform:translateY(-50%)}
.lb__next{right:clamp(10px,2.4vw,30px);top:50%;transform:translateY(-50%)}
.lb__prev:hover,.lb__next:hover{transform:translateY(-50%) scale(1.06)}

/* Fichas largas de espacios (subpágina) */
.spec{display:grid;gap:clamp(26px,4vw,60px);align-items:center;margin-bottom:clamp(56px,7vw,110px)}
.spec:last-child{margin-bottom:0}
@media(min-width:900px){
  .spec{grid-template-columns:1.05fr .95fr}
  .spec--flip .spec__media{order:2}
}
.spec__media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.spec__media img{width:100%;height:clamp(280px,40vw,470px);object-fit:cover;transition:transform 1.2s var(--ease)}
.spec__media:hover img{transform:scale(1.05)}
.spec__strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.spec__strip img{width:100%;height:clamp(72px,10vw,110px);object-fit:cover;border-radius:var(--r-sm);cursor:zoom-in;
  transition:transform .5s var(--ease),opacity .3s ease}
.spec__strip img:hover{transform:translateY(-3px);opacity:.88}
.spec__n{font-family:var(--serif);font-size:clamp(48px,7vw,82px);line-height:.9;color:rgba(198,138,92,.24);margin-bottom:6px}

/* Documento legal / 404 */
.doc{max-width:780px;margin-inline:auto}
.doc h2{font-family:var(--serif);font-size:clamp(22px,2.8vw,30px);font-weight:500;margin-block:38px 12px;color:var(--clay-700)}
.doc h2:first-of-type{margin-top:0}
.doc p,.doc li{font-size:15px;line-height:1.78;color:var(--ink-2)}
.doc p{margin-bottom:14px}
.doc ul{padding-left:20px;margin-bottom:14px;display:flex;flex-direction:column;gap:8px}
.doc a{color:var(--clay-600);text-decoration:underline;text-underline-offset:3px}
.doc__meta{font-size:12.5px;letter-spacing:.05em;color:rgba(58,50,44,.55);padding-bottom:22px;border-bottom:1px solid rgba(92,46,34,.14);margin-bottom:32px}

.e404{min-height:100svh;display:grid;place-items:center;position:relative;overflow:hidden;background:var(--clay-900);text-align:center;padding:120px var(--sp-gutter) 80px}
.e404__num{font-family:var(--serif);font-size:clamp(110px,26vw,260px);line-height:.82;color:transparent;
  -webkit-text-stroke:1.4px rgba(224,174,129,.5);letter-spacing:.02em}
.e404__links{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:34px}

/* ══════════════════ 09 · FOOTER Y FLOTANTES ══════════════════ */
.footer{position:relative;background:var(--ink);color:var(--bone);overflow:hidden;padding-top:clamp(70px,8vw,100px)}

/* — Footer cinemático —
   Marquesina diagonal montada sobre el borde de arriba, wordmark gigante
   de fondo y una banda de CTA final antes de las columnas informativas.
   Mismos componentes que ya existen en el sitio (marquee, btn, eyebrow),
   solo reacomodados aquí — nada de esto depende de una librería nueva. */
.footer--cinematic{padding-top:0}
/* Sin el bloque .footer__cta (se quitó: quedaba redundante con el
   formulario de contacto) la marquesina queda pegada directo a las
   columnas — este aire de arriba lo reemplaza. */
.footer--cinematic .footer__top{padding-top:clamp(52px,6.4vw,84px)}

.marquee--footer{
  position:relative;z-index:2;margin-top:0;
  transform:rotate(-1.6deg) scale(1.06);
  border-color:rgba(224,174,129,.22);
  box-shadow:0 18px 50px -30px rgba(0,0,0,.8);
}

.footer__giant{
  position:absolute;left:50%;bottom:-2%;transform:translateX(-50%);z-index:0;
  width:100%;text-align:center;pointer-events:none;user-select:none;
  font-family:var(--serif);font-weight:600;font-style:italic;
  font-size:clamp(70px,15vw,220px);line-height:.8;letter-spacing:-.02em;
  color:transparent;
  background:linear-gradient(180deg,rgba(224,174,129,.16) 0%,rgba(224,174,129,.02) 65%,transparent 100%);
  -webkit-background-clip:text;background-clip:text;
  white-space:nowrap;
}

.footer__cta{position:relative;z-index:2;text-align:center;padding-block:clamp(52px,7vw,86px) clamp(40px,5vw,60px)}
.footer__heading{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(40px,6.2vw,78px);line-height:1;letter-spacing:-.01em;
  margin-block:6px 18px;
  background:linear-gradient(180deg,var(--bone) 0%,rgba(247,242,233,.55) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 26px rgba(224,174,129,.16));
}

.btn--lg{padding:19px 36px;font-size:13px}

/* — Barra inferior: crédito, "hecho con amor" y volver arriba — */
.footer__made{display:inline-flex;align-items:center;gap:5px}
.footer__made a{color:inherit}
.footer__heart{display:inline-block;color:var(--copper-2);animation:footHeart 1.8s ease-in-out infinite}
@keyframes footHeart{0%,100%{transform:scale(1)}15%,45%{transform:scale(1.28)}30%{transform:scale(1)}}
.footer__totop{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:rgba(247,242,233,.6);
  transition:background .3s ease,color .3s ease,transform .3s var(--ease);
}
.footer__totop:hover{background:rgba(198,138,92,.2);color:var(--copper-2);transform:translateY(-3px)}
.footer__totop svg{width:15px;height:15px}

.footer__top{position:relative;z-index:2;display:grid;gap:clamp(30px,4vw,54px);padding-bottom:clamp(38px,4.6vw,58px)}
@media(min-width:860px){.footer__top{grid-template-columns:1.2fr 1fr 1fr}}
.footer__brand{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.footer__brand img{width:52px;height:52px;object-fit:contain}
.footer__brand b{display:block;font-family:var(--serif);font-size:22px;font-weight:400;line-height:1.1}
.footer__brand span{display:block;font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(247,242,233,.45);margin-top:3px}
.footer h4{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--copper);margin-bottom:16px}
.footer__nav{display:flex;flex-direction:column;gap:10px}
.footer__nav a{font-size:14px;color:rgba(247,242,233,.68);transition:color .3s ease,padding-left .3s var(--ease)}
.footer__nav a:hover{color:var(--copper-2);padding-left:5px}
.socials{display:flex;gap:10px;margin-top:18px}
.soc{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);
  transition:border-color .3s ease,background .3s ease,transform .3s var(--ease)}
.soc:hover{border-color:var(--copper);background:rgba(198,138,92,.14);transform:translateY(-2px)}
.soc svg{width:16px;height:16px}
.footer__bottom{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-block:22px;border-top:1px solid rgba(255,255,255,.08);
  font-size:11.5px;color:rgba(247,242,233,.42);
}
.footer__bottom a:hover{color:var(--copper-2)}

.wafloat{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:250;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--wa);box-shadow:0 14px 34px -10px rgba(37,211,102,.6);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.wafloat:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 20px 44px -12px rgba(37,211,102,.75)}
.wafloat::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}

.scrollcue{display:flex;flex-direction:column;align-items:center;gap:9px}
.scrollcue span{font-size:9.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:rgba(247,242,233,.4)}
.scrollcue i{display:block;width:1px;height:44px;background:linear-gradient(180deg,rgba(224,174,129,.7),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.5);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}
.hero .scrollcue{
  position:relative;z-index:6;isolation:isolate;
  margin:clamp(14px,2.4vh,22px) auto 0;
  opacity:0;animation:heroIn .9s var(--ease) 1.05s forwards;
}

/* Fondos generativos: el canvas siempre debajo del contenido (.z6 = 6) */
.section-silk-canvas,.ubicacion-waves-canvas,.precios-ribbon-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
#visita-morphic{position:absolute;inset:0;z-index:0;overflow:hidden}
#visita-morphic canvas{width:100%;height:100%;display:block}
.bg-scrim{position:absolute;inset:0;z-index:1}
.bg-scrim--dark{background:linear-gradient(180deg,rgba(36,16,9,.9),rgba(36,16,9,.72) 45%,rgba(36,16,9,.94))}
.bg-scrim--bone{background:linear-gradient(180deg,rgba(239,230,216,.94),rgba(239,230,216,.8) 45%,rgba(239,230,216,.96))}

/* ══════════════════ 10 · RESPONSIVE Y REDUCED-MOTION ══════════════════ */
@media(max-width:1080px){
  .nav__links{display:none}
  .nav__burger{display:flex}
  .nav__actions .btn{display:none}
}
@media(max-width:760px){
  .hero{min-height:auto;padding-bottom:0}
  .arc{height:clamp(238px,44.2vw,289px);margin-top:clamp(78px,20vw,118px)}
  .hero__foot{flex-direction:column;align-items:center;gap:18px}
  .hero__ctas{width:100%;flex-direction:column}
  .hero__ctas .btn{width:100%}
  .hero .scrollcue{display:none}
  .footer__bottom{justify-content:center;text-align:center}
  .rating{width:100%;justify-content:center}
}
@media(max-width:480px){
  .review{padding:22px}
  .faq__q{padding:16px 17px;font-size:14px;gap:11px}
  .faq__a p{padding:0 17px 18px 17px}
  .award img{width:38px;height:38px}
}

/* [EDITAR] A propósito SIN bloque prefers-reduced-motion: es un sitio de
   eventos donde el movimiento (marquesinas, reveals, zoom del hero,
   carrusel) es parte central del diseño — igual que el carrusel del hero,
   que ya ignoraba esta preferencia a propósito (ver arc-gallery.js). Todas
   las animaciones se reproducen siempre, sin importar la configuración de
   movimiento reducido del sistema operativo o el navegador de quien visita.
*/