/* ═══════════════════════════════════════════
   QUINTA MOMPANÍ — DESIGN SYSTEM
   ═══════════════════════════════════════════ */

@font-face {
  font-family: 'Avenir';
  src: url('fonts/Avenir/Avenir Light/Avenir Light.woff2') format('woff2'),
       url('fonts/Avenir/Avenir Light/Avenir Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenir';
  src: url('fonts/Avenir/Avenir Regular/Avenir Regular.woff2') format('woff2'),
       url('fonts/Avenir/Avenir Regular/Avenir Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenir';
  src: url('fonts/Avenir/Avenir Black/Avenir Black.woff2') format('woff2'),
       url('fonts/Avenir/Avenir Black/Avenir Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand colors */
  --plum:   #3F2B56;   /* Morado profundo */
  --sage:   #CDD2A9;   /* Verde claro */
  --gold:   #B4A269;   /* Dorado oliva */
  --moss:   #616355;   /* Gris verdoso */
  --cream:  #ECEAE6;   /* Crema */
  --ink:    #1a1410;
  --paper:  #F4F1EC;

  /* Derived */
  --plum-deep: #2a1d3a;
  --sage-deep: #aab288;
  --gold-warm: #c9b27a;

  /* Type */
  --display:  'Tenor Sans', sans-serif;
  --serif:    'Tenor Sans', sans-serif;
  --sans:     'Avenir', 'Avenir Next', sans-serif;
  --mono-cap: 'Tenor Sans', sans-serif;

  /* Spacing */
  --pad: clamp(1.25rem, 4vw, 4rem);
  --gutter: clamp(1rem, 2.5vw, 2rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 300;
  background: var(--paper);
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Body refined paragraph styling */
p { font-weight: 300; letter-spacing: 0.005em; }
.eyebrow, .nav-links, .nav-cta, .btn, .gc-meta, .blog-meta, .pilar-no, .vnum, .form-eyebrow, .footer-col h5, .footer-bot, .scroll-indicator, .lbl, .corner-mark {
  font-family: var(--mono-cap);
  font-weight: 400;
}

@media (max-width: 900px) {
  body { cursor: auto; }
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ─── GRAIN OVERLAY ─── */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.08;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ─── CUSTOM CURSOR ─── */
.cursor-dot, .cursor-ring {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  top: 0; left: 0;
  border-radius: 50%;
  mix-blend-mode: difference;
  will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: width .25s, height .25s, background .25s;
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1px solid #fff;
  transform: translate(-50%, -50%);
  transition: width .35s cubic-bezier(.2,.7,.2,1), height .35s cubic-bezier(.2,.7,.2,1), border-color .25s;
}
.cursor-ring.hover {
  width: 70px; height: 70px;
  border-color: var(--sage);
}
.cursor-dot.hover {
  width: 0; height: 0;
}

/* ─── REVEAL ANIMATIONS ─── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
}
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.4s; }

/* Letter-by-letter reveal for big headlines */
.split-line { display: block; }
.line-row { display: block; overflow: hidden; padding-bottom: 0.05em; }
.split-line .word { display: inline-block; transform: translateY(110%); opacity: 0; transition: transform 1.1s cubic-bezier(.2,.7,.2,1), opacity 1.1s; }
.split-line.in .word { transform: translateY(0); opacity: 1; }
.split-line.in .word:nth-child(1) { transition-delay: 0s; }
.split-line.in .word:nth-child(2) { transition-delay: 0.08s; }
.split-line.in .word:nth-child(3) { transition-delay: 0.16s; }
.split-line.in .word:nth-child(4) { transition-delay: 0.24s; }
.split-line.in .word:nth-child(5) { transition-delay: 0.32s; }
.split-line.in .word:nth-child(6) { transition-delay: 0.4s; }
.split-line.in .word:nth-child(7) { transition-delay: 0.48s; }
.split-line.in .word:nth-child(8) { transition-delay: 0.56s; }
.split-line.in .word:nth-child(9) { transition-delay: 0.64s; }
.split-line.in .word:nth-child(10) { transition-delay: 0.72s; }

/* ─── NAV ─── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.5rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background .5s, color .5s, backdrop-filter .5s;
  color: var(--cream);
}
.nav.scrolled {
  background: rgba(244, 241, 236, 0.92);
  backdrop-filter: blur(20px);
  color: var(--ink);
  padding: 1rem var(--pad);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
/* Scrim superior: degradado oscuro que cae desde arriba y se desvanece sobre
   el vídeo, dando contraste cohesivo a logo + menú + iconos sin barra dura.
   Se desvanece al hacer scroll para ceder paso a la barra crema. */
.nav::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(140px, 20vh, 190px);
  background: linear-gradient(180deg, rgba(14,7,22,.6) 0%, rgba(14,7,22,.28) 45%, rgba(14,7,22,0) 100%);
  z-index: -1;
  pointer-events: none;
  opacity: 1;
  transition: opacity .5s;
}
.nav.scrolled::before { opacity: 0; }
.nav-logo {
  position: relative;
  display: block;
  /* huella en la barra: NO la crece. El logo grande cuelga por debajo. */
  width: 140px;
  height: 54px;
  line-height: 0;
}
/* Emblema único (logo.png) en el header. Absoluto para poder colgar bajo la
   barra sin agrandarla. */
.nav-logo .logo-img {
  position: absolute;
  top: -28px; left: 0;
  height: 54px;
  width: auto;
  display: block;
  transition: height .5s;
}
footer .logo-img{width: 200px;}
/* Sobre el vídeo: emblema grande que cuelga, con halo para legibilidad del
   texto del emblema sobre el fondo oscuro */
.nav:not(.scrolled) .nav-logo .logo-img {
  height: 140px;
}
.nav.scrolled .nav-logo .logo-img { height: 90px; }
.nav-links {
  display: flex;
  gap: 2.5rem;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
}
.nav-links a {
  position: relative;
  padding: 0.4rem 0;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-cta {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  /* CTA primario resaltado: pill gold sólido (destaca sobre vídeo y nav crema) */
  background: var(--gold);
  color: var(--plum);
  border: 1px solid var(--gold);
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  /* elevación con sombra tintada al hue de marca (sin glow neón) */
  box-shadow: 0 6px 18px -7px rgba(180,162,105,.6);
  transition: background .35s, color .35s, border-color .35s, box-shadow .35s, transform .2s cubic-bezier(.2,.7,.2,1);
}
.nav-cta:hover {
  background: currentColor;
  color: var(--paper);
}
.nav-cta:hover {
  color: var(--paper) !important;
}

.nav:not(.scrolled) .nav-links a,
.nav:not(.scrolled) .nav-logo,
.nav:not(.scrolled) .nav-links a {
  text-shadow: 0 1px 3px rgba(10,5,18,.5);
}
/* iconos sociales: pequeña sombra para que se lean sobre el scrim/vídeo */
.nav:not(.scrolled) .nav-social {
  filter: drop-shadow(0 1px 3px rgba(10,5,18,.5));
}

@media (max-width: 900px) {
  .nav-links { display: none; }
}

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1.1rem 2rem;
  border-radius: 999px;
  border: 1px solid;
  transition: all .5s cubic-bezier(.2,.7,.2,1);
  cursor: none;
  position: relative;
  overflow: hidden;
}
.btn .arrow {
  width: 1em;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width .4s;
}
.btn .arrow::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  width: 0.5em; height: 0.5em;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.btn:hover .arrow { width: 2em; }

.btn-primary {
  background: var(--plum);
  color: var(--cream);
  border-color: var(--plum);
}
.btn-primary:hover {
  background: var(--plum-deep);
  border-color: var(--plum-deep);
}
.btn-light {
  background: var(--cream);
  color: var(--plum);
  border-color: var(--cream);
}
.btn-light:hover {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
}
.btn-ghost {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}
.btn-ghost:hover {
  background: currentColor;
}
.btn-ghost:hover {
  color: var(--paper) !important;
}

/* ─── EYEBROW ─── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--moss);
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
}

/* ─── DISPLAY HEADINGS ─── */
.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.025em;
}
.display .it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.005em;
}

/* ─── ELEGANT TYPE REFINEMENTS ─── */
h1, h2, h3, h4 { font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "calt" 1; }
.display .it { padding: 0 0.05em; }

.eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.36em;
  font-weight: 400;
}
.eyebrow::before { width: 32px; }

/* ═══════════════════════════════════════════
   NEW SHOWY EFFECTS
   ═══════════════════════════════════════════ */

/* IMAGE MASK REVEAL — clip-path slide-in */
.mask-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s cubic-bezier(.7,0,.2,1);
}
.mask-reveal.in { clip-path: inset(0 0 0 0); }

/* IMAGE COVER REVEAL — vertical curtain */
.curtain {
  position: relative;
  overflow: hidden;
}
.curtain::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--plum);
  transform-origin: bottom;
  transform: scaleY(1);
  transition: transform 1.3s cubic-bezier(.7,0,.2,1);
  z-index: 3;
  pointer-events: none;
}
.curtain.in::after { transform: scaleY(0); }

/* TEXT GRADIENT GLOW on big headings */
.shimmer-text {
  background: linear-gradient(110deg, var(--cream) 0%, var(--cream) 40%, var(--gold-warm) 50%, var(--cream) 60%, var(--cream) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 250% 0; }
  100% { background-position: -250% 0; }
}

/* MAGNETIC BUTTON */
.magnetic {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}

/* ANIMATED UNDERLINE that draws */
.draw-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 0.1em;
}
.draw-underline::before {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(.7,0,.2,1) 0.3s;
}
.draw-underline.in::before { transform: scaleX(1); }

/* HOVER LIFT on cards */
.lift {
  transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s;
}
.lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -20px rgba(63, 43, 86, 0.35);
}

/* IMAGE PARALLAX KEN BURNS */
.kenburns img {
  animation: kenburns 14s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  0%   { transform: scale(1.02) translate(0, 0); }
  100% { transform: scale(1.12) translate(-2%, -1.5%); }
}

/* BLOB BACKGROUND */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  pointer-events: none;
  /* overlay: más presencia que soft-light (tinte + contraste) pero SIN quemar
     las zonas claras a blanco como hacía screen */
  mix-blend-mode: overlay;
  z-index: 4;
  animation: blobMove 18s ease-in-out infinite alternate;
  will-change: transform;
}
.blob.b1 { width: 480px; height: 480px; background: var(--gold); top: -12%; left: -8%; opacity: 0.62; }
.blob.b2 { width: 620px; height: 620px; background: var(--sage); bottom: -22%; right: -14%; animation-delay: -6s; opacity: 0.58; }
.blob.b3 { width: 400px; height: 400px; background: var(--gold); top: 32%; left: 46%; opacity: 0.42; animation-delay: -12s; }
@keyframes blobMove {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(8%, -6%) scale(1.1); }
  100% { transform: translate(-4%, 8%) scale(0.95); }
}

/* GLITTER PARTICLES */
.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.particle {
  position: absolute;
  width: 3px; height: 3px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 8px var(--gold);
  animation: floatUp 12s linear infinite;
}
@keyframes floatUp {
  0%   { transform: translateY(110vh) scale(0.4); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-10vh) scale(1.2); opacity: 0; }
}

/* SECTION DIVIDER ORNAMENT */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 0 auto 3rem;
  color: var(--gold);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s, transform 1s;
}
.ornament.in { opacity: 1; transform: translateY(0); }
.ornament::before, .ornament::after {
  content: '';
  width: 80px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.ornament .glyph {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: 0.3em;
}

/* KINETIC FLOATING LABELS */
.float-label {
  display: inline-block;
  animation: gentleFloat 6s ease-in-out infinite;
}
@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* STICKY SCROLL OVERLAY (manifesto) */
.sticky-words .frag {
  display: inline-block;
  margin: 0 0.15em;
  transition: opacity 0.6s, color 0.6s, transform 0.6s;
  opacity: 0.18;
}
.sticky-words .frag.lit {
  opacity: 1;
  color: var(--plum);
}

/* CIRCLE-ZOOM REVEAL */
.circle-reveal {
  position: relative;
  overflow: hidden;
}
.circle-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--paper);
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1.4s cubic-bezier(.7,0,.2,1);
  pointer-events: none;
  z-index: 2;
}
.circle-reveal.in::after { clip-path: circle(150% at 50% 50%); opacity: 0; transition: clip-path 1.4s cubic-bezier(.7,0,.2,1), opacity 0.4s 1.4s; }

/* GAL ITEM rotation on hover */
.gal-item {
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.gal-item:hover {
  transform: scale(1.02);
  z-index: 5;
}
.gal-item:hover img {
  transform: scale(1.12) rotate(-1deg);
}

/* DUAL CARD elegant hover */
.dual-card {
  transition: background .6s, transform .6s cubic-bezier(.2,.7,.2,1), border-color .6s;
}
.dual-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
}

/* EXP CARD smooth scale */
.exp-card { transition: background .6s, color .6s, transform .8s cubic-bezier(.2,.7,.2,1); }
.exp-card:hover { transform: scale(0.98); }

/* HERO refined headings with shimmer & line ornament */
.hero h1 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.hero .tag {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.01em;
}

.hero-line {
  position: absolute;
  left: var(--pad);
  top: 50%;
  transform-origin: top;
  width: 1px;
  height: 200px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  z-index: 4;
  animation: lineSweep 4s ease-in-out infinite;
  opacity: 0.6;
}
@keyframes lineSweep {
  0%, 100% { transform: scaleY(0.3); opacity: 0.2; }
  50%      { transform: scaleY(1); opacity: 0.6; }
}

/* MANIFIESTO refined */
.manifiesto {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.manifiesto .it {
  letter-spacing: -0.005em;
}

/* SECTION HEAD H2 refinements */
.section-head h2, .contacto h2, .sobre-text h2, .sub-hero h2, .espacio-text h3, .dual-card h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.025em;
}

/* Footer brand */
.footer-brand, .nav-logo, .testi-card cite .name {
  font-family: var(--display);
  letter-spacing: 0.02em;
}

/* TESTIMONIALS refined */
.testi-card blockquote {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.32;
}

/* GAL CAPTION */
.gal-item .gal-caption h4 {
  font-family: var(--display);
  letter-spacing: -0.01em;
}

/* BLOG title */
.blog-card h3 {
  font-family: var(--display);
  letter-spacing: -0.015em;
  font-weight: 400;
}

/* PILAR title */
.pilar h3 {
  font-family: var(--display);
  letter-spacing: -0.015em;
}

/* VALOR title */
.valor h4 {
  font-family: var(--display);
  letter-spacing: -0.015em;
}

/* DUAL CARD title */
.dual-card h3 {
  letter-spacing: -0.025em;
}

/* SOBRE signature */
.sobre-text .signature {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
}

/* CTA / button refined */
.btn {
  font-family: var(--mono-cap);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
}

/* NAV refined */
.nav-logo {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  font-weight: 400;
}
.nav-logo .ampers {
  font-style: italic;
  font-weight: 300;
  font-size: 1.4rem;
  color: var(--gold);
}
.nav-links { font-size: 0.95rem; letter-spacing: 0.12em; font-weight: 700; }
.nav-cta { font-size: 0.75rem; letter-spacing: 0.16em; }

/* CURSOR — refined */
.cursor-dot {
  width: 8px; height: 8px;
  background: var(--gold-warm);
  mix-blend-mode: normal;
  /* halo: hace visible el cursor oro sobre las zonas claras del vídeo */
  box-shadow: 0 0 0 1px rgba(14,7,22,.35), 0 1px 6px rgba(10,5,18,.5);
}
.cursor-ring {
  width: 40px; height: 40px;
  border: 1px solid rgba(201, 178, 122, 0.85);
  mix-blend-mode: normal;
  filter: drop-shadow(0 1px 4px rgba(10,5,18,.5));
}
.cursor-ring.hover {
  width: 80px; height: 80px;
  border-color: var(--gold);
  background: rgba(180, 162, 105, 0.08);
  backdrop-filter: invert(1);
}
.cursor-dot.hidden, .cursor-ring.hidden { opacity: 0 !important; }
/* Sobre WhatsApp: cursor visible pero sin efecto hover ni tinte */
.cursor-dot.neutral {
  background: var(--gold-warm);
  width: 8px; height: 8px;
  box-shadow: 0 0 0 1px rgba(14,7,22,.35), 0 1px 6px rgba(10,5,18,.5);
}
.cursor-ring.neutral {
  width: 40px; height: 40px;
  border-color: rgba(201, 178, 122, 0.85);
  background: transparent;
  backdrop-filter: none;
  filter: drop-shadow(0 1px 4px rgba(10,5,18,.5));
}

/* ─── HERO ─── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  background: var(--plum-deep);
  color: var(--cream);
  display: flex;
  align-items: flex-end;
  padding: var(--pad);
  padding-top: clamp(7rem, 14vh, 10rem);
  padding-bottom: clamp(3rem, 8vh, 6rem);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* anclaje del texto: oscurece suavemente la esquina inferior izquierda */
    radial-gradient(120% 90% at 10% 100%, rgba(18,9,28,.7) 0%, rgba(18,9,28,.28) 40%, transparent 70%),
    /* viñeta ligera para enfocar el centro */
    radial-gradient(140% 120% at 50% 42%, transparent 55%, rgba(14,7,22,.42) 100%),
    /* base vertical */
    linear-gradient(180deg, rgba(20,10,30,.38) 0%, rgba(20,10,30,.08) 30%, rgba(20,10,30,.5) 80%, rgba(14,7,22,.85) 100%);
  z-index: 2;
}
/* Grano de película: rompe el banding/bloqueo del vídeo comprimido y aporta textura cara */
.hero-bg::after {
  content: '';
  position: absolute;
  /* mayor que el viewport para poder animar el grano sin descubrir bordes */
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.45;
  /* multiply = grano de tonos OSCUROS: el blanco del ruido no afecta y solo
     las motas oscuras oscurecen la imagen. Conserva la riqueza (no lava). */
  mix-blend-mode: multiply;
  /* ruido monocromo de ALTO contraste: saturate=0 lo vuelve gris y
     feComponentTransfer (slope 3) lo lleva casi a blanco/negro -> grano visible */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: grainShift 0.7s steps(1) infinite;
  will-change: transform;
}
/* Parpadeo del grano (steps = saltos discretos, como película) */
@keyframes grainShift {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-8%, 4%); }
  20% { transform: translate(6%, -7%); }
  30% { transform: translate(-5%, 9%); }
  40% { transform: translate(9%, -3%); }
  50% { transform: translate(-7%, -6%); }
  60% { transform: translate(4%, 8%); }
  70% { transform: translate(-9%, 2%); }
  80% { transform: translate(7%, -5%); }
  90% { transform: translate(-3%, 6%); }
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 110%;
  object-fit: cover;
  will-change: transform;
}
/* El color grade (contraste, saturación, calidez, altas luces domadas) va
   horneado en el archivo vía ffmpeg, no en CSS. Aquí solo bajamos un punto la
   exposición para que el texto respire sobre las tomas claras. */
.hero-video {
  filter: brightness(0.96);
}

/* Animated organic background fallback */
.organic-bg {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(180, 162, 105, 0.4) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 70%, rgba(205, 210, 169, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(63, 43, 86, 0.6) 0%, transparent 60%),
    linear-gradient(135deg, #2a1d3a 0%, #1a1023 100%);
  filter: blur(40px);
  animation: drift 30s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-3%, 2%) scale(1.05); }
}

.hero-content {
  position: relative;
  z-index: 5;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 3rem;
}
.hero-text {
  max-width: 1100px;
}
.hero h1 {
  /* escala fluida (antes 85px fijo: se desbordaba en móvil) */
  font-size: clamp(2.2rem, 4.8vw, 4.3rem);
  margin-bottom: 1.9rem;
  text-shadow: 0 2px 30px rgba(10,5,18,.6), 0 1px 2px rgba(10,5,18,.4);
}
/* acento editorial: la palabra itálica del titular en oro cálido (foco emocional).
   Excluye la variante v3 (fondo crema), donde el oro no contrastaría. */
.hero:not([data-variant="v3"]) h1 .it {
  color: var(--gold-warm);
}
.hero .tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  color: var(--cream);
  margin-bottom: 1.5rem;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 18px rgba(10,5,18,.6), 0 1px 3px rgba(10,5,18,.45);
  /* guion oro editorial (sistema coherente con "Refugio Privado") */
  display: inline-flex;
  align-items: center;
  gap: .7rem;
}
.hero .tag::before {
  content: '';
  width: 30px;
  height: 1px;
  background: var(--gold-warm);
  opacity: .9;
}
.hero p {
  max-width: 490px;
  font-size: 1.04rem;
  line-height: 1.72;
  margin-bottom: 2rem;
  opacity: 0.9;
  letter-spacing: 0.004em;
  text-shadow: 0 1px 14px rgba(10,5,18,.45);
}
.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sage);
}
.hero-meta .vert {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.4em;
}
.hero-corner-tl, .hero-corner-tr, .hero-corner-bl, .hero-corner-br {
  position: absolute;
  z-index: 5;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sage);
  opacity: 0.7;
}
.hero-corner-tr {
  top: calc(var(--pad) + 5rem);
  right: var(--pad);
  /* crema legible sobre el vídeo claro + acento editorial oro */
  color: var(--cream);
  opacity: 0.92;
  text-shadow: 0 1px 14px rgba(10,5,18,.6), 0 1px 2px rgba(10,5,18,.4);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.hero-corner-tr::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--gold-warm);
  opacity: .85;
}
.hero-corner-bl { bottom: var(--pad); left: var(--pad); display: none; }

@media (max-width: 800px) {
  .hero-content { grid-template-columns: 1fr; }
  .hero-meta { display: none; }
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sage);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  opacity: 0.7;
}
.scroll-indicator .line {
  width: 1px;
  height: 50px;
  background: var(--sage);
  position: relative;
  overflow: hidden;
}
.scroll-indicator .line::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: var(--cream);
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(200%); }
}

/* ─── SECTION SHELL ─── */
section {
  position: relative;
  padding: clamp(5rem, 12vh, 10rem) var(--pad);
}
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
section > .container { padding-left: 0; padding-right: 0; }
.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  margin-bottom: 5rem;
  align-items: end;
}
.section-head h2 {
  font-size: clamp(2.5rem, 5.5vw, 5.5rem);
}
.section-head p {
  max-width: 480px;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--moss);
}
@media (max-width: 800px) {
  .section-head { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; }
}

/* ─── MARQUEE ─── */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  padding: 2.5rem 0;
  border-top: 1px solid rgba(97, 99, 85, 0.3);
  border-bottom: 1px solid rgba(97, 99, 85, 0.3);
  background: var(--paper);
}
.marquee-track {
  display: inline-flex;
  gap: 4rem;
  animation: marqueeScroll 40s linear infinite;
  padding-right: 4rem;
}
.marquee span {
  font-family: var(--display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: 0.02em;
  color: var(--plum);
}
.marquee .star {
  display: inline-flex;
  align-items: center;
  color: var(--gold);
  font-size: clamp(2rem, 4vw, 3rem);
}
.marquee .it {
  font-family: var(--serif);
  font-style: italic;
  color: var(--moss);
}
@keyframes marqueeScroll {
  to { transform: translateX(-50%); }
}

/* ─── CONCEPTO (DUAL CHOICE) ─── */
.concept {
  background: var(--plum);
  color: var(--cream);
}
.concept .section-head h2 { color: var(--cream); }
.concept .section-head p { color: var(--sage); }
.dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 800px) {
  .dual { grid-template-columns: 1fr; }
}
.dual-card {
  position: relative;
  padding: 3rem;
  border: 1px solid rgba(205, 210, 169, 0.2);
  background: rgba(255,255,255,0.02);
  overflow: hidden;
  transition: background .6s;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dual-card:hover { background: rgba(205, 210, 169, 0.08); }
.dual-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, transparent 60%, rgba(180, 162, 105, 0.15) 100%);
  pointer-events: none;
}
.dual-card .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: var(--gold);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}
.dual-card h3 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 400;
  line-height: 1.05;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}
.dual-card h3 .it {
  font-family: var(--serif);
  font-style: italic;
  color: var(--sage);
}
.dual-card p {
  color: rgba(236, 234, 230, 0.8);
  margin-bottom: 2rem;
  line-height: 1.65;
}
.dual-card .arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.dual-card .arrow-link::after {
  content: '→';
  transition: transform .4s;
}
.dual-card:hover .arrow-link::after { transform: translateX(8px); }

/* ─── EXPERIENCIAS / AUDIENCIA TILES ─── */
.experiences {
  background: var(--paper);
}
.exp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(97, 99, 85, 0.2);
  border: 1px solid rgba(97, 99, 85, 0.2);
}
@media (max-width: 900px) {
  .exp-grid { grid-template-columns: 1fr; }
}
.exp-card {
  background: var(--paper);
  padding: 3.5rem 2.5rem;
  position: relative;
  transition: background .6s, color .6s;
  cursor: none;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.exp-card .exp-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity .8s, transform 1.5s cubic-bezier(.2,.7,.2,1);
  z-index: 0;
}
.exp-card .exp-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,10,30,.3), rgba(63,43,86,.85));
}
.exp-card:hover .exp-img { opacity: 1; transform: scale(1); }
.exp-card:hover { color: var(--cream); }
.exp-card > * { position: relative; z-index: 1; }
.exp-card .exp-no {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--gold);
  letter-spacing: 0.2em;
}
.exp-card h3 {
  font-family: var(--display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 400;
  line-height: 1;
  margin: 1.5rem 0 1rem;
}
.exp-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 360px;
  opacity: 0.85;
}
.exp-card .exp-link {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.exp-card .exp-link::after {
  content: '→';
  transition: transform .4s;
}
.exp-card:hover .exp-link::after { transform: translateX(8px); }

/* ─── PILARES (HORIZONTAL SCROLL) ─── */
.pilares {
  background: var(--cream);
  overflow: hidden;
}
.pilares-track {
  display: flex;
  gap: 2rem;
  padding: 0 var(--pad);
  margin-left: calc(var(--pad) * -1);
}
.pilar {
  flex: 0 0 clamp(280px, 30vw, 400px);
  padding: 3rem 0;
  border-top: 1px solid rgba(97, 99, 85, 0.4);
  position: relative;
}
.pilar .pilar-no {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--gold);
  letter-spacing: 0.3em;
  margin-bottom: 2rem;
  display: block;
}
.pilar h3 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 1rem;
  color: var(--plum);
}
.pilar p {
  color: var(--moss);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* ─── ESPACIOS (SPLIT-SCROLL) ─── */
.espacios {
  background: var(--moss);
  color: var(--cream);
}
.espacios .section-head h2 { color: var(--cream); }
.espacios .section-head p { color: rgba(236, 234, 230, 0.75); }
.espacios .eyebrow { color: var(--sage); }

.espacio-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding: 5rem 0;
  border-bottom: 1px solid rgba(205, 210, 169, 0.15);
}
.espacio-row:last-child { border-bottom: none; }
.espacio-row.flip .espacio-img { order: 2; }
.espacio-img {
  aspect-ratio: 4/5;
  background: var(--plum);
  position: relative;
  overflow: hidden;
}
.espacio-img .placeholder, .placeholder-bg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(236, 234, 230, 0.4);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0.25em;
}
.espacio-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.espacio-img:hover img { transform: scale(1.05); }
.espacio-text .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 4rem;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 1rem;
  display: block;
}
.espacio-text h3 {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}
.espacio-text h3 .it {
  font-family: var(--serif);
  font-style: italic;
  color: var(--sage);
}
.espacio-text p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  color: rgba(236, 234, 230, 0.85);
  max-width: 480px;
}
.espacio-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(205, 210, 169, 0.2);
}
.espacio-stat .lbl {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sage);
  display: block;
  margin-bottom: 0.4rem;
}
.espacio-stat .val {
  font-family: var(--display);
  font-size: 1.3rem;
}
@media (max-width: 800px) {
  .espacio-row { grid-template-columns: 1fr; gap: 1.5rem; padding: 3rem 0; }
  .espacio-row.flip .espacio-img { order: 0; }
}

/* ─── FILOSOFÍA / MANIFIESTO ─── */
.filosofia {
  background: var(--paper);
  position: relative;
}
.manifiesto {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.8vw, 2rem);
  line-height: 1.25;
  color: var(--plum);
  letter-spacing: -0.005em;
}
.manifiesto .it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
}
.manifiesto .frag {
  display: inline-block;
  margin: 0.15em 0.2em;
  transition: opacity .8s, transform .8s;
}
.manifiesto.in .frag { opacity: 1; transform: translateY(0); }
.manifiesto .frag.dim { opacity: 0.35; }

.valores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 6rem;
}
@media (max-width: 900px) {
  .valores { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .valores { grid-template-columns: 1fr; }
}
.valor {
  border-top: 1px solid var(--moss);
  padding-top: 1.5rem;
}
.valor .vnum {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  margin-bottom: 1.5rem;
  display: block;
}
.valor h4 {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 0.8rem;
  color: var(--plum);
  line-height: 1.1;
}
.valor p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--moss);
}

/* ─── GALERÍA ─── */
.galeria {
  background: var(--ink);
  color: var(--cream);
}
.galeria .section-head h2 { color: var(--cream); }
.galeria .section-head p { color: rgba(236, 234, 230, 0.7); }
.galeria .eyebrow { color: var(--gold); }

.gal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.gal-1, .gal-2, .gal-3, .gal-4, .gal-5, .gal-6, .gal-7, .gal-8, .gal-9 {
  aspect-ratio: 4/3;
}
.gal-item {
  position: relative;
  overflow: hidden;
  cursor: none;
  background: var(--plum);
}
.gal-item .ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(63,43,86,.6), rgba(97,99,85,.4)),
    radial-gradient(circle at 30% 30%, rgba(180,162,105,.3), transparent 60%);
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: 0.3em;
  color: rgba(236,234,230,0.4);
  font-size: 0.75rem;
  text-transform: uppercase;
}
.gal-item .ph::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='50' cy='50' r='1' fill='%23ECEAE6' opacity='.15'/></svg>");
  pointer-events: none;
}
.gal-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s cubic-bezier(.2,.7,.2,1), filter 1s;
  filter: grayscale(0.3) brightness(0.85);
  will-change: transform;
}
.gal-item:hover img {
  transform: scale(1.08);
  filter: grayscale(0) brightness(1);
}
.gal-item .gal-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  background: linear-gradient(180deg, transparent 50%, rgba(20,10,30,.8));
  opacity: 0;
  transition: opacity .6s;
  z-index: 2;
  pointer-events: none;
}
.gal-item:hover .gal-caption { opacity: 1; }
.gal-item .gal-caption .gc-meta {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.gal-item .gal-caption h4 {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--cream);
}

@media (max-width: 800px) {
  .gal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .gal-grid { grid-template-columns: 1fr; }
}

/* ─── TESTIMONIOS ─── */
.testimonios {
  background: var(--cream);
}
.testi-track {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--pad);
  padding-bottom: 2rem;
  margin: 0 calc(var(--pad) * -1);
  padding-left: var(--pad);
  padding-right: var(--pad);
  scrollbar-width: none;
}
.testi-track::-webkit-scrollbar { display: none; }
.testi-card {
  flex: 0 0 clamp(320px, 40vw, 540px);
  scroll-snap-align: start;
  background: var(--paper);
  padding: 3rem;
  border: 1px solid rgba(97, 99, 85, 0.2);
  position: relative;
}
.testi-card .quote-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 5rem;
  color: var(--gold);
  line-height: 0.5;
  margin-bottom: 1rem;
  display: block;
}
.testi-card blockquote {
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.3;
  color: var(--plum);
  margin-bottom: 2rem;
  letter-spacing: -0.005em;
}
.testi-card cite {
  display: block;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--moss);
}
.testi-card cite .name {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  font-size: 1.1rem;
  color: var(--plum);
  margin-bottom: 0.3rem;
}

/* ─── BLOG ─── */
.blog-section {
  background: var(--paper);
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 800px) {
  .blog-grid { grid-template-columns: 1fr; }
}
.blog-card {
  cursor: none;
}
.blog-card .blog-img {
  aspect-ratio: 4/5;
  background: var(--plum);
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.blog-card .blog-img .ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--plum), var(--moss));
  color: rgba(236, 234, 230, 0.4);
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: 0.25em;
  font-size: 0.8rem;
}
.blog-card .blog-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.blog-card:hover .blog-img img { transform: scale(1.05); }
.blog-card .blog-meta {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.7rem;
}
.blog-card h3 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--plum);
  margin-bottom: 0.5rem;
}
.blog-card p {
  font-size: 0.95rem;
  color: var(--moss);
}

/* ─── CONTACTO / CTA FINAL ─── */
.contacto {
  background: var(--plum-deep);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.contacto::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(180, 162, 105, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(205, 210, 169, 0.15) 0%, transparent 50%);
  pointer-events: none;
}
.contacto .container { position: relative; z-index: 1; }
.contacto-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .contacto-grid { grid-template-columns: 1fr; gap: 3rem; }
}
.contacto h2 {
  font-family: var(--display);
  font-size: clamp(2.5rem, 6vw, 6rem);
  line-height: 0.95;
  margin-bottom: 2rem;
  letter-spacing: -0.02em;
}
.contacto h2 .it {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
}
.contacto-info {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(236, 234, 230, 0.8);
  max-width: 500px;
  margin-bottom: 3rem;
}
.contact-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  font-size: 0.9rem;
  border-top: 1px solid rgba(205, 210, 169, 0.2);
  padding-top: 2rem;
  margin-top: 2rem;
}
.contact-meta .lbl {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sage);
  display: block;
  margin-bottom: 0.5rem;
}
.contact-meta .val {
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--cream);
}
.contact-meta .val a:hover { color: var(--gold); }

/* Form */
.contacto-form {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(205, 210, 169, 0.2);
  padding: 2.5rem;
  backdrop-filter: blur(10px);
}
.contacto-form .form-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  display: block;
}
.contacto-form h3 {
  font-family: var(--display);
  font-size: 1.6rem;
  margin-bottom: 1.8rem;
  font-weight: 400;
  line-height: 1.1;
}
.fld {
  margin-bottom: 1.2rem;
  position: relative;
}
.fld label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 0.5rem;
}
.fld input, .fld textarea, .fld select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(205, 210, 169, 0.3);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.6rem 0;
  cursor: none;
  transition: border-color .3s;
}
.fld input:focus, .fld textarea:focus, .fld select:focus {
  outline: none;
  border-color: var(--gold);
}
.fld textarea { resize: vertical; min-height: 80px; }
.fld select option { background: var(--plum-deep); color: var(--cream); }

/* ─── WHATSAPP FLOATING BUBBLE ─── */
.wa-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
}
.wa-bubble {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 40px -8px rgba(37, 211, 102, 0.6), 0 4px 12px rgba(0,0,0,0.15);
  position: relative;
  animation: waBounce 3s ease-in-out infinite;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.wa-bubble svg { width: 32px; height: 32px; fill: #fff; position: relative; z-index: 2; }
.wa-bubble::before, .wa-bubble::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: waPulse 2.4s ease-out infinite;
}
.wa-bubble::after { animation-delay: 1.2s; }
@keyframes waPulse {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.8); opacity: 0; }
}
@keyframes waBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.wa-tooltip {
  background: var(--plum);
  color: var(--cream);
  padding: 0.85rem 1.2rem;
  border-radius: 999px 0 0 999px;
  margin-right: -16px;
  padding-right: 28px;
  font-family: var(--mono-cap);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .5s, transform .5s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  box-shadow: 0 8px 30px rgba(63,43,86,0.3);
}
.wa-tooltip .it {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gold);
  font-size: 0.95rem;
  margin-right: 0.4em;
}
.wa-float:hover .wa-tooltip { opacity: 1; transform: translateX(0); }
.wa-float:hover .wa-bubble { transform: scale(1.08) rotate(-6deg); }
@media (max-width: 600px) {
  .wa-float { bottom: 1.2rem; right: 1.2rem; }
  .wa-bubble { width: 56px; height: 56px; }
  .wa-bubble svg { width: 28px; height: 28px; }
  .wa-tooltip { display: none; }
}
footer {
  background: var(--ink);
  color: var(--cream);
  padding: 4rem var(--pad) 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
.footer-brand {
  font-family: var(--display);
  font-size: 2rem;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}
.footer-logo {
  height: 130px;
  width: auto;
  display: block;
  margin-bottom: 1.25rem;
}
.footer-brand .ampers {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0;
  font-size: 2.2rem;
  vertical-align: -3px;
  margin: 0 .15em;
}
.footer-tag {
  font-family: var(--serif);
  font-style: italic;
  color: var(--sage);
  font-size: 1rem;
  max-width: 280px;
}
.footer-col h5 {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.95rem; }
.footer-col a:hover { color: var(--sage); }
.footer-bot {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(236, 234, 230, 0.5);
  border-top: 1px solid rgba(236, 234, 230, 0.1);
  padding-top: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 600px) {
  .footer-bot { flex-direction: column; gap: 1rem; text-align: center; }
}

/* ─── SUB-HERO MARKERS for Bodas / Retiros / Íntimas ─── */
.sub-hero {
  position: relative;
  padding: clamp(4rem, 10vh, 8rem) var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  overflow: hidden;
}
@media (max-width: 800px) {
  .sub-hero { grid-template-columns: 1fr; gap: 2rem; }
}
.sub-hero.bodas { background: var(--sage); color: var(--plum); }
.sub-hero.retiros { background: var(--gold); color: var(--ink); }
.sub-hero.intimas { background: var(--cream); color: var(--plum); }

.sub-hero h2 {
  font-family: var(--display);
  font-size: clamp(2.5rem, 6vw, 6rem);
  line-height: 0.95;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}
.sub-hero h2 .it {
  font-family: var(--serif);
  font-style: italic;
}
.sub-hero .lead {
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 2rem;
  max-width: 480px;
  opacity: 0.85;
}
.sub-hero ul {
  list-style: none;
  margin-top: 2rem;
}
.sub-hero ul li {
  display: flex;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(63, 43, 86, 0.15);
  font-size: 0.95rem;
  line-height: 1.5;
}
.sub-hero ul li::before {
  content: '✦';
  color: var(--gold);
  font-size: 0.8em;
  margin-top: 0.2em;
}
.sub-hero.retiros ul li { border-bottom-color: rgba(0,0,0,0.15); }
.sub-hero .img-block {
  aspect-ratio: 4/5;
  background: rgba(63, 43, 86, 0.15);
  position: relative;
  overflow: hidden;
}
.sub-hero .img-block .ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: 0.25em;
  font-size: 0.8rem;
  opacity: 0.5;
}
.sub-hero .corner-mark {
  position: absolute;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.5;
}

.sub-hero .corner-mark.tl { top: 2rem; left: var(--pad); }
.sub-hero .corner-mark.br { bottom: 2rem; right: var(--pad); }

/* ─── SOBRE NOSOTROS ─── */
.sobre {
  background: var(--paper);
  position: relative;
}
.sobre-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
@media (max-width: 800px) {
  .sobre-grid { grid-template-columns: 1fr; gap: 3rem; }
}
.sobre-img {
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--moss), var(--plum));
  position: relative;
  overflow: hidden;
}
.sobre-img .ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(236,234,230,0.4);
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: 0.25em;
  font-size: 0.8rem;
}
.sobre-text h2 {
  font-family: var(--display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 0.95;
  margin-bottom: 2rem;
  color: var(--plum);
  letter-spacing: -0.015em;
}
.sobre-text h2 .it {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
}
.sobre-text p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--moss);
  margin-bottom: 1.2rem;
  max-width: 540px;
}
.sobre-text .signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--plum);
  margin-top: 2rem;
}

/* ─── HERO VARIANTS ─── */
/* V1 (default): centered with side meta */
/* V2: massive type with split */
.hero[data-variant="v2"] .hero-content {
  grid-template-columns: 1fr;
  align-items: center;
  text-align: center;
}
.hero[data-variant="v2"] .hero-text {
  max-width: 100%;
  margin: 0 auto;
}
.hero[data-variant="v2"] h1 {
  font-size: clamp(4rem, 14vw, 14rem);
}
.hero[data-variant="v2"] .hero-actions { justify-content: center; }
.hero[data-variant="v2"] .hero-meta { display: none; }

/* V3: editorial split */
.hero[data-variant="v3"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  padding: 0;
}
.hero[data-variant="v3"] .hero-bg {
  position: relative;
  grid-column: 1;
}
.hero[data-variant="v3"] .hero-content {
  grid-column: 2;
  background: var(--cream);
  color: var(--plum);
  padding: var(--pad);
  align-items: center;
  grid-template-columns: 1fr;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero[data-variant="v3"] .hero-text { max-width: 600px; }
.hero[data-variant="v3"] h1 { font-size: clamp(2.5rem, 6vw, 6rem); }
.hero[data-variant="v3"] .tag { color: var(--moss); }
.hero[data-variant="v3"] p { color: var(--moss); opacity: 1; }
.hero[data-variant="v3"] .hero-meta { display: none; }
.hero[data-variant="v3"] .hero-corner-tr { color: var(--cream); }
.hero[data-variant="v3"] .scroll-indicator { color: var(--cream); left: 25%; }
@media (max-width: 800px) {
  .hero[data-variant="v3"] {
    grid-template-columns: 1fr;
    grid-template-rows: 40vh 1fr;
  }
  .hero[data-variant="v3"] .scroll-indicator { left: 50%; }
}