/* =========================================================
   MAGNO EVENTOS — Sistema de diseño
   Art Déco de lujo · negro y dorado
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --negro: #0A0A0A;
  --carbon: #141416;
  --grafito: #1E1E21;
  --oro: #B8924A;
  --oro-brillo: #E3C47E;
  --oro-oscuro: #7A5C2A;
  --vino: #5A1A24;
  --rosa: #D9B8A8;
  --marfil: #F2EDE4;
  --marfil-tenue: rgba(242, 237, 228, .65);

  --oro-linea: rgba(184, 146, 74, .55);
  --oro-sutil: rgba(184, 146, 74, .22);

  --f-grabada: "Cinzel", "Times New Roman", serif;
  --f-display: "Cormorant Garamond", "Times New Roman", serif;
  --f-texto: "Jost", "Helvetica Neue", Arial, sans-serif;

  --curva: cubic-bezier(.2, .7, .2, 1);
  --lento: 1.1s;

  --gutter: clamp(1rem, 5vw, 3rem);
  --ancho: 76rem;
  --nav-alto: 4.25rem;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-alto);
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--marfil);
  font-family: var(--f-texto);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Grano de película sobre todo el sitio */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .045;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }

::selection { background: var(--vino); color: var(--marfil); }

:focus-visible {
  outline: 1px solid var(--oro-brillo);
  outline-offset: 4px;
}

.saltar {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 300;
  padding: .6rem 1rem;
  background: var(--negro);
  border: 1px solid var(--oro);
  font-size: .85rem;
  transition: top .3s var(--curva);
}
.saltar:focus { top: 1rem; }

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

/* ---------- 3. Tipografía ---------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--f-grabada);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--oro);
}
.etiqueta::before,
.etiqueta::after {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

.titulo-seccion {
  font-family: var(--f-grabada);
  font-size: clamp(1.5rem, 4.5vw, 2.6rem);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.25;
}

.frase {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 4.6vw, 2.9rem);
  line-height: 1.3;
}
.frase em,
.enfasis {
  font-style: italic;
  font-weight: 400;
  color: var(--rosa);
}

.texto-tenue { color: var(--marfil-tenue); }

/* Brillo metálico (máximo 2 usos en la página) */
.oro-metal {
  background: linear-gradient(100deg, var(--oro-oscuro) 0%, var(--oro) 22%, var(--oro-brillo) 46%, var(--oro) 64%, var(--oro-oscuro) 100%);
  background-size: 220% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- 4. Ornamentos ---------- */

/* Separador: línea — rombo — línea */
.separador {
  display: block;
  width: min(15rem, 70%);
  height: 18px;
  margin-inline: auto;
  background: url("../assets/ornamentos/separador.svg") center / contain no-repeat;
}

/* Filigrana de fondo (usar en 1 o 2 secciones) */
.con-filigrana { position: relative; isolation: isolate; }
.con-filigrana::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .05;
  background: url("../assets/ornamentos/filigrana.svg") center / 48px 24px repeat;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
}

/* Marco Art Déco reutilizable
   <div class="marco-deco">
     <span class="marco-deco__num">III</span>        (opcional, arriba)
     <span class="marco-deco__num marco-deco__num--inf">VI</span>  (opcional, abajo)
     …contenido…
   </div> */
.marco-deco {
  --marco-fondo: var(--carbon);
  position: relative;
  isolation: isolate;
  padding: clamp(2.6rem, 6vw, 3.5rem) clamp(1.6rem, 5vw, 3rem);
  background: var(--marco-fondo);
  /* línea interior a 6px del borde */
  box-shadow: inset 0 0 0 6px var(--marco-fondo), inset 0 0 0 7px var(--oro-sutil);
}
/* línea exterior: se "dibuja" desde el centro */
.marco-deco::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(var(--oro-linea), var(--oro-linea)) top center / 100% 1px no-repeat,
    linear-gradient(var(--oro-linea), var(--oro-linea)) bottom center / 100% 1px no-repeat,
    linear-gradient(var(--oro-linea), var(--oro-linea)) left center / 1px 100% no-repeat,
    linear-gradient(var(--oro-linea), var(--oro-linea)) right center / 1px 100% no-repeat;
  transition: background-size 1.4s var(--curva);
}
/* esquinas con abanico Art Déco */
.marco-deco::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    url("../assets/ornamentos/esquina-tl.svg") left top / 60px 60px no-repeat,
    url("../assets/ornamentos/esquina-tr.svg") right top / 60px 60px no-repeat,
    url("../assets/ornamentos/esquina-bl.svg") left bottom / 60px 60px no-repeat,
    url("../assets/ornamentos/esquina-br.svg") right bottom / 60px 60px no-repeat;
  transition: opacity 1s var(--curva) .5s, transform 1.2s var(--curva) .5s;
}
.marco-deco__num {
  position: absolute;
  left: 50%;
  top: 6px;
  translate: -50% 0;
  display: grid;
  place-items: center;
  min-width: 4.4em;
  height: 2em;
  padding: 0 .9em .15em;
  border: 1px solid var(--oro-linea);
  border-top: 0;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  font-family: var(--f-grabada);
  font-size: .62rem;
  letter-spacing: .2em;
  line-height: 1;
  color: var(--oro);
  transition: opacity 1s var(--curva) .8s;
}
.marco-deco__num--inf {
  top: auto;
  bottom: 6px;
  padding: .15em .9em 0;
  border-top: 1px solid var(--oro-linea);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* Estado antes de entrar en pantalla (solo con JS) */
.js .marco-deco.revela:not(.visible)::before {
  background-size: 0 1px, 0 1px, 1px 0, 1px 0;
}
.js .marco-deco.revela:not(.visible)::after { opacity: 0; transform: scale(.97); }
.js .marco-deco.revela:not(.visible) .marco-deco__num { opacity: 0; }

/* Placa de título (como "SERVICIOS" / "MANIFIESTO" del moodboard) */
.placa {
  --marco-fondo: var(--negro);
  display: inline-block;
  padding: 2.4rem clamp(2rem, 7vw, 4.5rem);
  text-align: center;
}

/* ---------- 5. Botones y enlaces ---------- */
@property --ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75em;
  min-height: 3.25rem;
  padding: .95rem 2.1rem;
  border: 1px solid rgba(184, 146, 74, .85);
  background: transparent;
  color: var(--marfil);
  font-family: var(--f-texto);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  transition: color .6s var(--curva), background-color .6s var(--curva), border-color .6s var(--curva);
}
/* brillo que recorre el borde */
.btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  z-index: -1;
  background: conic-gradient(from var(--ang), transparent 0deg 250deg, var(--oro-brillo) 300deg, #FFF6DC 320deg, var(--oro-brillo) 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity .6s var(--curva);
}
.btn:hover,
.btn:focus-visible {
  color: var(--oro-brillo);
  background-color: rgba(184, 146, 74, .07);
  border-color: rgba(184, 146, 74, .4);
}
.btn:hover::before,
.btn:focus-visible::before {
  opacity: 1;
  animation: girar-brillo 2.6s linear infinite;
}
@keyframes girar-brillo { to { --ang: 360deg; } }

.btn--sm {
  min-height: 2.6rem;
  padding: .6rem 1.3rem;
  font-size: .7rem;
  letter-spacing: .2em;
}

.enlace-oro {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding-block: .35em;
  font-family: var(--f-texto);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro);
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: color .5s var(--curva), background-size .6s var(--curva);
}
.enlace-oro:hover,
.enlace-oro:focus-visible {
  color: var(--oro-brillo);
  background-size: 100% 1px;
}

/* ---------- 6. Formulario (estilo base) ---------- */
.campo { display: grid; gap: .4rem; }
.campo__etiqueta {
  font-family: var(--f-grabada);
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--oro);
}
.campo__control {
  width: 100%;
  padding: .7rem 0 .6rem;
  border: 0;
  border-bottom: 1px solid var(--oro-linea);
  border-radius: 0;
  background: transparent;
  color: var(--marfil);
  font-family: var(--f-texto);
  font-weight: 300;
  font-size: 1rem;
  transition: border-color .5s var(--curva), box-shadow .5s var(--curva);
}
.campo__control::placeholder { color: rgba(242, 237, 228, .35); }
.campo__control:focus {
  outline: none;
  border-bottom-color: var(--oro-brillo);
  box-shadow: 0 1px 0 0 var(--oro-brillo), 0 8px 18px -12px rgba(90, 26, 36, .9);
}
select.campo__control {
  appearance: none;
  padding-right: 1.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B8924A'/%3E%3C/svg%3E") right center no-repeat;
}
select.campo__control option { background: var(--carbon); color: var(--marfil); }

.casilla {
  display: flex;
  align-items: center;
  gap: .75rem;
  cursor: pointer;
  font-size: .95rem;
}
.casilla input {
  appearance: none;
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  border: 1px solid var(--oro-linea);
  rotate: 45deg;
  transition: background-color .4s var(--curva), border-color .4s var(--curva);
  cursor: pointer;
}
.casilla input:checked {
  background: radial-gradient(var(--oro-brillo) 0 30%, transparent 32%);
  border-color: var(--oro-brillo);
}

/* ---------- 7. Aparición al hacer scroll ---------- */
.js .revela:not(.marco-deco) {
  opacity: 0;
  translate: 0 26px;
  transition: opacity var(--lento) var(--curva), translate var(--lento) var(--curva);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.js .revela.visible:not(.marco-deco) { opacity: 1; translate: 0 0; }
.js .marco-deco.revela {
  opacity: 0;
  transition: opacity var(--lento) var(--curva);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.js .marco-deco.revela.visible { opacity: 1; }

/* =========================================================
   NAVEGACIÓN
   ========================================================= */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--nav-alto);
  padding: 0 var(--gutter);
  padding-top: env(safe-area-inset-top);
  transition: background-color .8s var(--curva), box-shadow .8s var(--curva), backdrop-filter .8s var(--curva);
}
.nav--solida {
  background-color: rgba(10, 10, 10, .72);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 1px 0 rgba(184, 146, 74, .14);
}
.nav__marca { flex: none; display: block; padding: .5rem 0; }
.nav__marca img { width: 3.1rem; transition: filter .6s var(--curva); }
.nav__marca:hover img { filter: brightness(1.2); }

.nav__enlaces { display: none; }

.nav__acciones {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.75rem);
}

.idioma {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--f-grabada);
  font-size: .72rem;
  letter-spacing: .18em;
  color: rgba(242, 237, 228, .5);
}
.idioma span { color: var(--oro-sutil); }
.idioma a { padding: .4rem .1rem; transition: color .4s var(--curva); }
.idioma a:hover { color: var(--marfil); }
.idioma a[aria-current] { color: var(--oro); }

.nav__cta { display: none; }

.nav__boton-menu {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 2.75rem;
  font-family: var(--f-grabada);
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.nav__boton-lineas {
  position: relative;
  width: 1.6rem;
  height: 7px;
}
.nav__boton-lineas::before,
.nav__boton-lineas::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--oro);
  transition: transform .7s var(--curva), top .7s var(--curva), width .7s var(--curva);
}
.nav__boton-lineas::before { top: 0; }
.nav__boton-lineas::after { top: 6px; left: 35%; }
.nav__boton-menu[aria-expanded="true"] .nav__boton-lineas::before { top: 3px; transform: rotate(25deg); }
.nav__boton-menu[aria-expanded="true"] .nav__boton-lineas::after { top: 3px; left: 0; transform: rotate(-25deg); }

@media (min-width: 40em) {
  .nav__cta { display: inline-flex; }
}

@media (min-width: 80em) {
  :root { --nav-alto: 5.25rem; }
  .nav__enlaces {
    display: flex;
    gap: clamp(1.25rem, 2vw, 2.25rem);
    margin-left: auto;
  }
  .nav__enlaces a {
    position: relative;
    padding: .5rem 0;
    font-family: var(--f-grabada);
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(242, 237, 228, .78);
    transition: color .5s var(--curva);
  }
  .nav__enlaces a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: .25rem;
    width: 0;
    height: 1px;
    background: var(--oro);
    transition: width .6s var(--curva), left .6s var(--curva);
  }
  .nav__enlaces a:hover { color: var(--marfil); }
  .nav__enlaces a:hover::after { width: 100%; left: 0; }
  .nav__boton-menu { display: none; }
}

/* Menú de pantalla completa — estuche de joyería */
.menu {
  --metal: linear-gradient(100deg, #7A5C2A 0%, #B8924A 18%, #F3DDA0 36%, #FFF7E0 46%, #E3C47E 56%, #B8924A 74%, #7A5C2A 100%);
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3svh, 2rem);
  padding: calc(var(--nav-alto) + clamp(1.4rem, 4svh, 2.6rem)) calc(var(--gutter) + .75rem) calc(clamp(3.2rem, 7svh, 4rem) + env(safe-area-inset-bottom));
  overflow: hidden auto;
  isolation: isolate;
  text-align: center;
  background:
    radial-gradient(ellipse 90% 45% at 50% 0%, rgba(227, 196, 126, .16), transparent 62%),
    radial-gradient(ellipse 70% 35% at 50% 102%, rgba(227, 170, 96, .14), transparent 70%),
    radial-gradient(circle at 50% 50%, #15130f 0%, #0a0a0a 55%, #050505 100%);
  visibility: hidden;
  opacity: 0;
  transition: opacity .8s var(--curva), visibility 0s linear .8s;
}
.menu.abierto {
  visibility: visible;
  opacity: 1;
  transition: opacity .8s var(--curva), visibility 0s;
}
.menu-abierto { overflow: hidden; }
.menu-abierto .nav { background-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.menu-abierto .nav__marca,
.menu-abierto .nav__cta { opacity: 0; pointer-events: none; }

/* Geometría que se dibuja al abrir */
.menu__geo {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: -2;
  width: max(115vmin, 34rem);
  max-width: none;
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 70%);
  mask-image: radial-gradient(circle, #000 35%, transparent 70%);
}
.mg {
  fill: none;
  stroke: var(--oro);
  stroke-width: 1.3;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.4s var(--curva);
}
.mg--a { opacity: .5; }
.mg--b { opacity: .3; }
.mg--c { opacity: .2; }
.mg--f { opacity: .13; }
.mg--eje { opacity: .35; }
.menu.abierto .mg { stroke-dashoffset: 0; }
.menu.abierto .mg--b { transition-delay: .1s; }
.menu.abierto .mg--c { transition-delay: .2s; }
.menu.abierto .mg--f { transition-delay: .3s; }

/* Reflejo de laca que cruza al abrir */
.menu__brillo {
  position: absolute;
  inset: -20% -60%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 238, 196, .09) 46%, rgba(255, 255, 255, .03) 51%, transparent 58%);
  translate: -60% 0;
}
.menu.abierto .menu__brillo { animation: reflejo 2.6s var(--curva) .25s both; }
@keyframes reflejo { from { translate: -60% 0; } to { translate: 60% 0; } }

/* Marco joya: doble filete dorado con esquinas Art Déco */
.menu__marco {
  position: absolute;
  inset: calc(var(--nav-alto) + .25rem) .75rem calc(.75rem + env(safe-area-inset-bottom));
  z-index: -1;
  pointer-events: none;
  background:
    url("../assets/ornamentos/esquina-tl.svg") left 6px top 6px / 52px 52px no-repeat,
    url("../assets/ornamentos/esquina-tr.svg") right 6px top 6px / 52px 52px no-repeat,
    url("../assets/ornamentos/esquina-bl.svg") left 6px bottom 6px / 52px 52px no-repeat,
    url("../assets/ornamentos/esquina-br.svg") right 6px bottom 6px / 52px 52px no-repeat;
  /* filete interior fino */
  box-shadow: inset 0 0 0 6px transparent, inset 0 0 0 7px rgba(184, 146, 74, .28), 0 0 40px -12px rgba(227, 196, 126, .25);
  opacity: 0;
  scale: .985;
  transition: opacity 1s var(--curva) .15s, scale 1.2s var(--curva) .15s;
}
.menu.abierto .menu__marco { opacity: 1; scale: 1; }
/* filete exterior en oro pulido */
.menu__marco::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(135deg, #7A5C2A, #F3DDA0 25%, #B8924A 50%, #FFF2CC 72%, #7A5C2A);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* Cabecera: alas que brillan */
.menu__cabeza {
  display: grid;
  justify-items: center;
  gap: .7rem;
  opacity: 0;
  translate: 0 -8px;
  transition: opacity 1s var(--curva) .2s, translate 1s var(--curva) .2s;
}
.menu.abierto .menu__cabeza { opacity: 1; translate: 0 0; }
.menu__cabeza img {
  width: clamp(3.6rem, 9svh, 5rem);
  filter: drop-shadow(0 0 14px rgba(227, 196, 126, .45));
}
.menu__marca {
  font-family: var(--f-grabada);
  font-size: .68rem;
  letter-spacing: .42em;
  margin-right: -.42em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, .85);
}
.menu__marca b {
  font-weight: 400;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Enlaces en oro pulido */
.menu__enlaces {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(.1rem, .8svh, .5rem);
}
/* velo oscuro detrás de los enlaces: la geometría no cruza las letras */
.menu__enlaces::before {
  content: "";
  position: absolute;
  inset: -12% -18%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(9, 9, 9, .94) 55%, rgba(9, 9, 9, 0) 100%);
}
.menu__enlaces a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .9rem;
  padding: clamp(.25rem, .9svh, .5rem) 1.2rem;
  opacity: 0;
  translate: 0 22px;
  filter: blur(4px);
  transition: opacity 1s var(--curva), translate 1s var(--curva), filter 1s var(--curva);
}
.menu.abierto .menu__enlaces a { opacity: 1; translate: 0 0; filter: blur(0); }
.menu.abierto .menu__enlaces a:nth-child(1) { transition-delay: .28s; }
.menu.abierto .menu__enlaces a:nth-child(2) { transition-delay: .36s; }
.menu.abierto .menu__enlaces a:nth-child(3) { transition-delay: .44s; }
.menu.abierto .menu__enlaces a:nth-child(4) { transition-delay: .52s; }
.menu.abierto .menu__enlaces a:nth-child(5) { transition-delay: .60s; }
.menu.abierto .menu__enlaces a:nth-child(6) { transition-delay: .68s; }

.menu__texto {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2rem, min(9vw, 5.4svh), 3.4rem);
  line-height: 1.1;
  background: var(--metal);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 18px rgba(227, 196, 126, .12));
}
.menu.abierto .menu__texto { animation: pulir 2.2s var(--curva) both; }
.menu.abierto a:nth-child(1) .menu__texto { animation-delay: .5s; }
.menu.abierto a:nth-child(2) .menu__texto { animation-delay: .6s; }
.menu.abierto a:nth-child(3) .menu__texto { animation-delay: .7s; }
.menu.abierto a:nth-child(4) .menu__texto { animation-delay: .8s; }
.menu.abierto a:nth-child(5) .menu__texto { animation-delay: .9s; }
.menu.abierto a:nth-child(6) .menu__texto { animation-delay: 1s; }
@keyframes pulir {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}
.menu__enlaces a:hover .menu__texto,
.menu__enlaces a:focus-visible .menu__texto {
  animation: pulir-loop 2.4s linear infinite;
}
@keyframes pulir-loop {
  from { background-position: 100% 0; }
  to { background-position: -160% 0; }
}
/* destello bajo el enlace al pasar el dedo / cursor */
.menu__enlaces a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .15rem;
  width: 0;
  height: 1px;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, var(--oro-brillo), transparent);
  box-shadow: 0 0 10px rgba(227, 196, 126, .7);
  transition: width .8s var(--curva);
}
.menu__enlaces a:hover::after,
.menu__enlaces a:focus-visible::after { width: 70%; }
.menu__enlaces a:focus-visible { outline: none; }

.menu__num {
  font-family: var(--f-grabada);
  font-size: .62rem;
  letter-spacing: .2em;
  color: var(--oro);
  translate: 0 -.9em;
}

/* Pie del menú */
.menu__pie {
  display: grid;
  justify-items: center;
  gap: 1.2rem;
  width: 100%;
  opacity: 0;
  translate: 0 14px;
  transition: opacity 1s var(--curva), translate 1s var(--curva);
}
.menu.abierto .menu__pie { opacity: 1; translate: 0 0; transition-delay: .8s; }
.menu__pie .btn { width: min(100%, 20rem); }
.menu__redes { display: flex; gap: .9rem; }
.menu__redes a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid transparent;
  background:
    radial-gradient(circle at 50% 30%, #1a1712, #0a0a0a) padding-box,
    linear-gradient(135deg, #7A5C2A, #F3DDA0, #B8924A, #FFF2CC) border-box;
  color: var(--oro-brillo);
  transition: box-shadow .5s var(--curva);
}
.menu__redes a:hover { box-shadow: 0 0 18px rgba(227, 196, 126, .35); }
.menu__ciudades {
  font-family: var(--f-grabada);
  font-size: .58rem;
  letter-spacing: .2em;
  color: rgba(242, 237, 228, .6);
}

/* Celulares bajos (iPhone SE y similares): todo cabe sin scroll */
@media (max-height: 46em) {
  .menu { gap: .8rem; padding-top: calc(var(--nav-alto) + 1.3rem); padding-bottom: calc(2.8rem + env(safe-area-inset-bottom)); }
  .menu__cabeza { gap: .45rem; }
  .menu__cabeza img { width: 3.1rem; }
  .menu__enlaces { gap: 0; }
  .menu__enlaces a { padding-block: .15rem; }
  .menu__texto { font-size: clamp(1.6rem, 4.8svh, 2.4rem); }
  .menu__pie { gap: .9rem; }
  .menu__ciudades { display: none; }
}

/* Botón joya: borde de oro pulido y reflejo que pasa solo */
.btn--joya {
  overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(40, 33, 20, .95), rgba(12, 11, 9, .95)) padding-box,
    linear-gradient(120deg, #7A5C2A, #F3DDA0 30%, #B8924A 52%, #FFF2CC 75%, #7A5C2A) border-box;
  color: var(--oro-brillo);
  box-shadow: 0 0 26px -6px rgba(227, 196, 126, .35);
}
.btn--joya::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 244, 214, .28) 48%, transparent 66%);
  translate: -120% 0;
  animation: reflejo-boton 4.5s var(--curva) 1.4s infinite;
}
@keyframes reflejo-boton {
  0% { translate: -120% 0; }
  45%, 100% { translate: 120% 0; }
}
.btn--joya:hover,
.btn--joya:focus-visible {
  color: #FFF7E0;
  box-shadow: 0 0 34px -4px rgba(227, 196, 126, .5);
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-alto) + 1rem) var(--gutter) 5.5rem;
  overflow: hidden;
}

.hero__fondo {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background: var(--negro);
}
.hero__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
  transform-origin: 55% 45%;
  animation:
    aparecer-foto 2.4s var(--curva) both,
    ken-burns 24s ease-in-out 0s infinite alternate;
}
@keyframes aparecer-foto { from { opacity: 0; } }
@keyframes ken-burns {
  from { transform: scale(1.05); }
  to { transform: scale(1.17) translate(-1.5%, -1%); }
}

/* Oscurecido + viñeta + fundido hacia la siguiente sección */
.hero__velo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 75% 65% at 50% 47%, rgba(10, 10, 10, .25) 0%, rgba(10, 10, 10, .78) 100%),
    linear-gradient(to bottom, rgba(10, 10, 10, .75) 0%, rgba(10, 10, 10, .35) 30%, rgba(10, 10, 10, .45) 70%, var(--negro) 100%);
}
/* Luz cálida de vela que respira */
.hero__vela {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 45% at 50% 58%, rgba(227, 170, 96, .13), transparent 70%);
  mix-blend-mode: screen;
  animation: vela 7s ease-in-out infinite;
}
@keyframes vela {
  0%, 100% { opacity: .85; }
  35% { opacity: 1; }
  55% { opacity: .75; }
  70% { opacity: .95; }
}

.hero__contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.2rem, 2.6svh, 2rem);
  text-align: center;
}

/* --- Medallón --- */
.medallon {
  --d: min(86vw, 50svh, 37.5rem);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--d);
  aspect-ratio: 1;
  container-type: inline-size;
}
.medallon__disco {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(118deg, transparent 38%, rgba(255, 255, 255, .045) 47%, rgba(255, 255, 255, .015) 55%, transparent 62%),
    radial-gradient(circle at 50% 30%, #19191c 0%, #0d0d0e 55%, #060606 100%);
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, .9),
    0 0 120px -30px rgba(227, 196, 126, .18);
  animation: aparecer 1.4s var(--curva) .35s both;
}
.medallon__geo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--d) * 1600 / 600);
  max-width: none;
  height: auto;
  aspect-ratio: 1;
  translate: -50% -50%;
  overflow: visible;
  pointer-events: none;
}
.g {
  fill: none;
  stroke: var(--oro);
  stroke-width: 1.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dibujar 2.2s var(--curva) var(--r, 0s) forwards;
}
.g--flor { opacity: .3; animation-duration: 2.6s; }
.g--anillo-a { opacity: .7; }
.g--anillo-b { opacity: .4; }
.g--anillo-c { opacity: .26; }
.g--anillo-d { opacity: .18; }
.g--eje { opacity: .5; }
.g--eje-h { opacity: .22; }
.g--marcas { opacity: .6; }
.g--aro { stroke: url(#geo-oro); stroke-width: 3.4; animation-duration: 1.9s; }
.g--aro-int { opacity: .4; stroke-width: 1.2; }
.g-rombos { fill: var(--oro); opacity: 0; animation: aparecer-suave 1.2s var(--curva) 1.3s forwards; }
.g-romanos {
  fill: var(--oro);
  font-family: var(--f-grabada);
  font-size: 15px;
  letter-spacing: 2px;
  text-anchor: middle;
  dominant-baseline: central;
  opacity: 0;
  animation: aparecer-suave 1.2s var(--curva) 1.2s forwards;
}
@keyframes dibujar { to { stroke-dashoffset: 0; } }
@keyframes aparecer-suave { to { opacity: .8; } }
@keyframes aparecer { from { opacity: 0; } }

.medallon__contenido {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 78cqi;
  padding-bottom: 2cqi;
}
.medallon__alas {
  width: 30cqi;
  margin-bottom: 4.5cqi;
  animation: alas 1.4s var(--curva) 1.05s both;
}
@keyframes alas {
  from { opacity: 0; translate: 0 10px; filter: blur(6px); }
  to { opacity: 1; translate: 0 0; filter: blur(0); }
}

.medallon__titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--f-grabada);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
}
.medallon__magno {
  /* Titular: escala del brief, limitado al tamaño del medallón */
  font-size: clamp(2.4rem, 15cqi, 5.5rem);
  letter-spacing: .1em;
  margin-right: -.1em; /* compensa el espaciado de la última letra */
  color: var(--marfil);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
  animation: magno 1.6s var(--curva) 1.5s both;
}
@keyframes magno {
  from { opacity: 0; letter-spacing: .28em; margin-right: -.28em; }
  to { opacity: 1; letter-spacing: .1em; margin-right: -.1em; }
}
.medallon__eventos {
  display: flex;
  align-items: center;
  gap: 3.5cqi;
  margin-top: 2.6cqi;
  font-size: max(.72rem, 4.3cqi);
  letter-spacing: .55em;
  font-weight: 500;
}
.medallon__eventos span {
  margin-right: -.55em;
  background: linear-gradient(100deg, var(--oro-oscuro) 0%, var(--oro) 25%, var(--oro-brillo) 50%, var(--oro) 75%, var(--oro-oscuro) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: aparecer 1.2s var(--curva) 2s both, destello 3.2s var(--curva) 2.4s both;
}
@keyframes destello {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}
.medallon__eventos::before,
.medallon__eventos::after {
  content: "";
  width: 9cqi;
  height: 1px;
  background: var(--oro);
  opacity: .7;
  transform-origin: right;
  animation: linea-crece 1.2s var(--curva) 2.05s both;
}
.medallon__eventos::after { transform-origin: left; }
@keyframes linea-crece { from { transform: scaleX(0); } }

.medallon__rombo {
  width: 30cqi;
  height: 14px;
  margin: 4.5cqi 0 3.6cqi;
  background: url("../assets/ornamentos/separador.svg") center / contain no-repeat;
  animation: aparecer 1.2s var(--curva) 2.3s both;
}
.medallon__frase {
  max-width: 58cqi;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: max(1.05rem, 5.6cqi);
  line-height: 1.22;
  color: var(--rosa);
  text-wrap: balance;
  animation: subir 1.3s var(--curva) 2.45s both;
}
@keyframes subir {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}

.hero__texto {
  max-width: 30rem;
  font-size: clamp(.95rem, 2.2vw, 1.08rem);
  line-height: 1.7;
  color: var(--marfil-tenue);
  text-wrap: balance;
  animation: subir 1.3s var(--curva) 2.75s both;
}
.hero__cta { animation: subir 1.3s var(--curva) 2.95s both; }
.nav--intro { animation: aparecer 1.4s var(--curva) 2.4s both; }

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: calc(.6rem + env(safe-area-inset-bottom));
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: .5rem;
  font-family: var(--f-grabada);
  font-size: .58rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, .5);
  animation: aparecer 1.4s var(--curva) 3.4s both;
}
.hero__scroll-linea {
  position: relative;
  width: 1px;
  height: 2.2rem;
  overflow: hidden;
  background: rgba(184, 146, 74, .25);
}
.hero__scroll-linea::after {
  content: "";
  position: absolute;
  left: 0;
  top: -40%;
  width: 1px;
  height: 40%;
  background: linear-gradient(transparent, var(--oro-brillo));
  animation: gota 2.6s var(--curva) infinite;
}
@keyframes gota { to { top: 100%; } }

/* Pantallas bajas (celular horizontal, portátiles pequeños) */
@media (max-height: 34em) and (orientation: landscape) {
  .medallon { --d: min(70svh, 22rem); }
  .hero__scroll { display: none; }
}

/* =========================================================
   SECCIONES — piezas comunes
   ========================================================= */
.seccion {
  --fondo: var(--negro);
  position: relative;
  padding: clamp(5.5rem, 13vw, 10rem) var(--gutter);
  background: var(--fondo);
}
.seccion--carbon { --fondo: var(--carbon); }

.icono {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.encabezado {
  display: grid;
  justify-items: center;
  gap: 1.3rem;
  max-width: 44rem;
  margin: 0 auto clamp(3rem, 7vw, 5rem);
  text-align: center;
}
@media (max-width: 30em) {
  /* En celular las etiquetas largas no llevan líneas a los lados */
  .encabezado .etiqueta { letter-spacing: .24em; text-wrap: balance; }
  .encabezado .etiqueta::before,
  .encabezado .etiqueta::after { width: 1.25rem; }
}
.encabezado--izq { justify-items: start; text-align: left; margin-inline: 0; }
.encabezado--izq .etiqueta::before { display: none; }
.encabezado__sub {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.65rem, 4.6vw, 2.6rem);
  line-height: 1.22;
  text-wrap: balance;
}
.encabezado__sub em { font-style: italic; font-weight: 400; color: var(--rosa); }
.encabezado__sub--sm {
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  color: var(--marfil-tenue);
}

/* =========================================================
   I. MANIFIESTO
   ========================================================= */
.manifiesto {
  display: grid;
  justify-items: center;
  gap: clamp(2.4rem, 6vw, 3.5rem);
  padding-block: clamp(6rem, 16vw, 12rem);
  text-align: center;
}
.manifiesto__texto {
  max-width: 46rem;
  text-wrap: pretty;
}

/* =========================================================
   II. POR QUÉ ELEGIRNOS
   ========================================================= */
.por-que { --fondo: var(--carbon); }
.razones {
  display: grid;
  gap: 1px;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  background: var(--oro-sutil);
}
.razon {
  display: grid;
  align-content: start;
  gap: .9rem;
  padding: clamp(2.2rem, 5vw, 3.2rem) clamp(1.4rem, 4vw, 2.6rem);
  background: var(--fondo);
}
.razon__num {
  font-family: var(--f-grabada);
  font-size: clamp(2.2rem, 5vw, 2.8rem);
  line-height: 1;
  letter-spacing: .08em;
  color: var(--oro);
}
.razon__titulo {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.45rem, 3.2vw, 1.75rem);
  line-height: 1.2;
}
.razon p { color: var(--marfil-tenue); font-size: .98rem; }

@media (min-width: 40em) { .razones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .razones { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================
   III. SERVICIOS
   ========================================================= */
.servicios__carril {
  display: flex;
  gap: 1rem;
  margin-inline: calc(var(--gutter) * -1);
  padding: .5rem var(--gutter) 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.servicios__carril::-webkit-scrollbar { display: none; }
.servicios__carril:focus-visible { outline-offset: -2px; }

.servicio {
  display: flex;
  flex-direction: column;
  flex: 0 0 min(84%, 22rem);
  scroll-snap-align: start;
  padding: 3.4rem 1.7rem 2.2rem;
}
.servicio__nombre {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.6vw, 1.85rem);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.servicio__desc { color: var(--marfil-tenue); font-size: .98rem; }
.servicio__nota {
  margin-top: .9rem;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.45;
  color: var(--rosa);
}
.servicio__incluye {
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--oro-sutil);
  font-size: .85rem;
  line-height: 1.6;
  color: var(--marfil-tenue);
}
.servicio__incluye b { font-weight: 400; color: var(--oro); }
.servicio__enlace { margin-top: auto; padding-top: 1.6rem; align-self: flex-start; }
.servicio__enlace { background-position: left calc(100% - .35em); }

/* Guía del carrusel (solo celular) */
.servicios__guia {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  max-width: 22rem;
  margin: 1.4rem auto 0;
}
.servicios__progreso {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--oro-sutil);
}
.servicios__progreso span {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(100% / 7);
  background: var(--oro);
  transition: transform .5s var(--curva);
}
.servicios__contador {
  font-family: var(--f-grabada);
  font-size: .68rem;
  letter-spacing: .2em;
  color: rgba(242, 237, 228, .5);
}
.servicios__contador b { font-weight: 400; color: var(--oro); }

.cobertura {
  display: flex;
  gap: .9rem;
  max-width: 44rem;
  margin: clamp(3rem, 7vw, 4.5rem) auto 0;
  font-size: .85rem;
  line-height: 1.7;
  color: var(--marfil-tenue);
}
.cobertura .icono { width: 1.35rem; height: 1.35rem; margin-top: .1rem; color: var(--oro); }

@media (max-width: 47.99em) {
  .servicios__carril .revela { --i: 0 !important; }
}
@media (min-width: 48em) {
  .servicios__carril {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    max-width: 76rem;
    margin: 0 auto;
    padding: 0;
    overflow: visible;
  }
  .servicio { flex: 0 1 calc((100% - 1.5rem) / 2); }
  .servicios__guia { display: none; }
  .cobertura { justify-content: center; }
}
@media (min-width: 64em) {
  .servicio { flex-basis: calc((100% - 3rem) / 3); }
}
@media (min-width: 80em) {
  .servicio { flex-basis: calc((100% - 4.5rem) / 4); padding-inline: 1.6rem; }
}

/* =========================================================
   IV. GALERÍA
   ========================================================= */
.galeria__mosaico {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 1rem;
  max-width: 62rem;
  margin: 0 auto;
}
.foto {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--carbon);
  cursor: zoom-in;
}
.foto img {
  width: 100%;
  transition: transform 1.6s var(--curva);
}
/* viñeta */
.foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%);
}
/* marco fino dorado interior */
.foto::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(227, 196, 126, .4);
  transition: inset .9s var(--curva), border-color .9s var(--curva);
}
.foto:hover img,
.foto:focus-visible img { transform: scale(1.05); }
.foto:hover::after,
.foto:focus-visible::after { inset: 12px; border-color: rgba(227, 196, 126, .75); }

.foto--destacada { grid-column: 1 / -1; order: -1; max-width: 26rem; justify-self: center; width: 100%; }
.galeria__mosaico > .foto:nth-child(3n) { margin-top: 2.5rem; }

@media (min-width: 48em) {
  .galeria__mosaico { grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); }
  .foto--destacada { grid-column: auto; order: 0; max-width: none; }
  .galeria__mosaico > .foto:nth-child(3n) { margin-top: 0; }
  .galeria__mosaico > .foto:nth-child(3n+2) { margin-top: 4.5rem; }
  .galeria__mosaico > .foto:nth-child(3n+3) { margin-top: 1.5rem; }
}

/* Visor a pantalla completa */
.visor {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(6, 6, 6, .97);
  color: var(--marfil);
  overscroll-behavior: contain;
}
.visor::backdrop { background: rgba(0, 0, 0, .6); }
.visor[open] { display: grid; place-items: center; animation: aparecer .6s var(--curva); }
.visor__figura {
  display: grid;
  justify-items: center;
  gap: 1.2rem;
  margin: 0;
  padding: 4.5rem 1rem 5rem;
  touch-action: pan-y;
}
.visor__img {
  width: auto;
  max-width: min(92vw, 40rem);
  max-height: min(70vh, 38rem);
  object-fit: contain;
  outline: 1px solid rgba(227, 196, 126, .35);
  outline-offset: 8px;
  transition: opacity .4s var(--curva);
}
.visor__pie {
  max-width: 34rem;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.4;
  text-align: center;
  color: var(--rosa);
}
.visor__contador {
  position: absolute;
  top: 1.6rem;
  left: 50%;
  translate: -50% 0;
  font-family: var(--f-grabada);
  font-size: .7rem;
  letter-spacing: .25em;
  color: var(--oro);
}
.visor__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--oro-sutil);
  border-radius: 50%;
  color: var(--oro);
  transition: border-color .4s var(--curva), color .4s var(--curva);
}
.visor__btn:hover { border-color: var(--oro); color: var(--oro-brillo); }
.visor__btn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.2; }
.visor__cerrar { top: 1rem; right: 1rem; }
.visor__ant { left: 1rem; bottom: 1.2rem; }
.visor__sig { right: 1rem; bottom: 1.2rem; }
@media (min-width: 48em) {
  .visor__ant, .visor__sig { bottom: auto; top: 50%; translate: 0 -50%; }
  .visor__ant { left: 2rem; }
  .visor__sig { right: 2rem; }
  .visor__cerrar { top: 1.5rem; right: 2rem; }
}

/* =========================================================
   V. EQUIPO
   ========================================================= */
.equipo { --fondo: var(--carbon); }
.equipo__rejilla {
  display: grid;
  gap: clamp(3rem, 7vw, 5.5rem);
  max-width: 72rem;
  margin: 0 auto;
  align-items: center;
}
.equipo__foto {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  max-width: 28rem;
  width: 100%;
  margin-inline: auto;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(227, 170, 96, .10), transparent 65%),
    repeating-radial-gradient(circle at 50% 42%, transparent 0 46px, rgba(184, 146, 74, .09) 46px 47px),
    var(--negro);
  box-shadow: inset 0 0 0 1px var(--oro-sutil);
}
.equipo__foto::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(184, 146, 74, .3);
  pointer-events: none;
}
.equipo__emblema {
  display: grid;
  justify-items: center;
  gap: 1rem;
  margin-top: -8%;
}
.equipo__emblema img { width: 6.5rem; opacity: .9; }
.equipo__emblema span {
  font-family: var(--f-grabada);
  font-size: .72rem;
  letter-spacing: .4em;
  margin-right: -.4em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, .7);
}
.valores { display: grid; margin: 0; padding: 0; list-style: none; }
.valor {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.3rem;
  padding: 1.8rem 0;
  border-top: 1px solid var(--oro-sutil);
}
.valor:last-child { border-bottom: 1px solid var(--oro-sutil); }
.valor__icono {
  width: 2.8rem;
  height: 2.8rem;
  fill: none;
  stroke: var(--oro);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.valor__titulo {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.2;
  margin-bottom: .4rem;
}
.valor p { color: var(--marfil-tenue); font-size: .96rem; }
@media (max-width: 63.99em) {
  .equipo__foto { order: 1; max-width: 26rem; }
}
@media (min-width: 64em) {
  .equipo__rejilla { grid-template-columns: 5fr 7fr; }
}

/* =========================================================
   VI. CONTACTO
   ========================================================= */
.contacto .encabezado { max-width: 52rem; }
.contacto__titulo {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(2.3rem, 6.4vw, 4.4rem);
  line-height: 1.08;
  text-wrap: balance;
}
.contacto__titulo .oro-metal { animation: destello 4s var(--curva) both; animation-play-state: paused; }
.contacto__titulo.visible .oro-metal,
.encabezado.visible .oro-metal { animation-play-state: running; }

.contacto__rejilla {
  display: grid;
  gap: 3rem;
  max-width: 68rem;
  margin: 0 auto;
}
.formulario { padding: 3.4rem clamp(1.4rem, 5vw, 3rem) 2.6rem; }
.formulario__campos { display: grid; gap: 1.9rem; }
.campo__opcional { text-transform: none; letter-spacing: .05em; color: rgba(242, 237, 228, .45); }
textarea.campo__control { resize: vertical; min-height: 5.5rem; line-height: 1.6; }
.casillas {
  display: grid;
  gap: .95rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.casillas legend { padding: 0; margin-bottom: 1.1rem; }
.campo__control[aria-invalid="true"] { border-bottom-color: #B3505F; }
.formulario__error {
  min-height: 1.6em;
  margin-top: 1.3rem;
  font-size: .88rem;
  color: #E2A3AD;
}
.formulario__enviar { width: 100%; margin-top: .6rem; }
.formulario__enviar .icono { width: 1.3em; height: 1.3em; }

.contacto__directo {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 1.4rem;
  text-align: center;
}
.contacto__o {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--rosa);
}
.contacto__wa { width: 100%; max-width: 22rem; min-height: 3.8rem; font-size: .85rem; }
.contacto__wa .icono { width: 1.5em; height: 1.5em; }
.contacto__linea {
  display: inline-flex;
  align-items: flex-start;
  gap: .8rem;
  color: var(--marfil-tenue);
  font-size: .95rem;
  text-align: left;
  transition: color .4s var(--curva);
}
a.contacto__linea:hover { color: var(--oro-brillo); }
.contacto__linea .icono { width: 1.3rem; height: 1.3rem; margin-top: .15rem; color: var(--oro); }
.contacto__linea small { font-size: .82rem; color: rgba(242, 237, 228, .5); }

@media (min-width: 40em) {
  .formulario__campos { grid-template-columns: 1fr 1fr; gap: 2rem 2.2rem; }
  .campo--ancho { grid-column: 1 / -1; }
  .casillas { grid-template-columns: 1fr 1fr; column-gap: 2.2rem; }
  .formulario__enviar { width: auto; }
}
@media (min-width: 64em) {
  .contacto__rejilla { grid-template-columns: 8fr 4fr; align-items: start; gap: 4rem; }
  .contacto__directo { justify-items: start; text-align: left; padding-top: 3rem; }
}

/* =========================================================
   PIE DE PÁGINA — mármol negro
   ========================================================= */
.pie {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1.6rem;
  padding: clamp(4.5rem, 10vw, 6.5rem) var(--gutter) calc(2.2rem + env(safe-area-inset-bottom));
  text-align: center;
  border-top: 1px solid var(--oro-sutil);
  background:
    linear-gradient(168deg, rgba(255, 255, 255, .035) 0%, transparent 35%, transparent 70%, rgba(255, 255, 255, .02) 100%),
    url("../assets/ornamentos/marmol.svg") center top / max(100%, 1400px) auto repeat-y,
    #080808;
}
.pie__marca { display: grid; justify-items: center; gap: .8rem; }
.pie__marca img { width: 4.2rem; }
.pie__nombre {
  font-family: var(--f-grabada);
  font-size: 1.25rem;
  letter-spacing: .32em;
  margin-right: -.32em;
  text-transform: uppercase;
}
.pie__nombre span { color: var(--oro); }
.pie__frase {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--rosa);
}
.pie__ciudades { font-size: .85rem; letter-spacing: .06em; color: var(--marfil-tenue); }
.pie__fila {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.pie__redes { display: flex; gap: .8rem; }
.pie__redes a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--oro-sutil);
  border-radius: 50%;
  color: var(--oro);
  transition: border-color .4s var(--curva), color .4s var(--curva);
}
.pie__redes a:hover { border-color: var(--oro); color: var(--oro-brillo); }
.pie__legal { margin-top: 1rem; font-size: .75rem; color: rgba(242, 237, 228, .62); }

/* =========================================================
   Botón flotante de WhatsApp
   ========================================================= */
.wa-flotante {
  position: fixed;
  right: calc(1rem + env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 80;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid rgba(184, 146, 74, .8);
  border-radius: 50%;
  background: rgba(10, 10, 10, .72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--oro-brillo);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .8);
  opacity: 0;
  visibility: hidden;
  translate: 0 14px;
  transition: opacity .8s var(--curva), translate .8s var(--curva), visibility 0s linear .8s, box-shadow .6s var(--curva);
}
.wa-flotante.visible {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity .8s var(--curva), translate .8s var(--curva), visibility 0s, box-shadow .6s var(--curva);
}
.wa-flotante:hover { box-shadow: 0 0 0 4px rgba(184, 146, 74, .12), 0 0 28px rgba(227, 196, 126, .25); }
.wa-flotante svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linejoin: round; }
.menu-abierto .wa-flotante { opacity: 0; visibility: hidden; }

/* =========================================================
   ORO PULIDO — el dorado brilla en todo el sitio
   (títulos, números romanos, marcos y botones)
   ========================================================= */
:root {
  /* Degradado simétrico: en reposo se ve su centro, la parte más luminosa */
  --metal: linear-gradient(100deg, #7A5C2A 0%, #B8924A 16%, #E8CD8A 32%, #FFF7E0 46%, #F0D9A0 54%, #C9A55C 70%, #8A6A32 86%, #B8924A 100%);
  --metal-linea: linear-gradient(90deg, #7A5C2A, #F3DDA0 22%, #B8924A 45%, #FFF2CC 68%, #C9A55C 85%, #7A5C2A);
  --metal-linea-v: linear-gradient(180deg, #7A5C2A, #F3DDA0 22%, #B8924A 45%, #FFF2CC 68%, #C9A55C 85%, #7A5C2A);
  --marfil-pulido: linear-gradient(100deg, #D9CBB0 0%, #F2EDE4 30%, #FFFFFF 48%, #F2EDE4 66%, #CDBE9F 100%);
}

/* Texto en oro pulido */
.titulo-seccion,
.etiqueta,
.razon__num,
.marco-deco__num,
.campo__etiqueta,
.enlace-oro,
.servicio__incluye b,
.servicios__contador b,
.menu__num,
.pie__nombre span,
.idioma a[aria-current] {
  background-image: var(--metal);
  background-size: 260% 100%;
  background-position: 50% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.titulo-seccion,
.razon__num { filter: drop-shadow(0 0 14px rgba(227, 196, 126, .16)); }

/* Nombres de servicios y valores: marfil satinado con luz */
.servicio__nombre,
.razon__titulo,
.valor__titulo,
.encabezado__sub:not(.encabezado__sub--sm) {
  background-image: var(--marfil-pulido);
  background-size: 220% 100%;
  background-position: 50% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.encabezado__sub em { -webkit-text-fill-color: var(--rosa); }

/* Al aparecer en pantalla, un destello recorre el oro */
.visible .titulo-seccion,
.visible.etiqueta, .visible .etiqueta,
.visible .razon__num, .razon.visible .razon__num,
.visible > .marco-deco__num {
  animation: pulir-oro 2.6s var(--curva) .3s both;
}
@keyframes pulir-oro {
  from { background-position: 100% 0; }
  to { background-position: 50% 0; }
}
.enlace-oro:hover,
.enlace-oro:focus-visible { background-size: 260% 100%; animation: pulir-continuo 2.4s linear infinite; }
@keyframes pulir-continuo {
  from { background-position: 100% 0; }
  to { background-position: -60% 0; }
}
/* Título del contacto: mismo oro pulido, con destello al aparecer */
.oro-metal { background-image: var(--metal); background-size: 260% 100%; background-position: 50% 0; }
.contacto__titulo .oro-metal { animation-name: pulir-oro; filter: drop-shadow(0 0 22px rgba(227, 196, 126, .18)); }

/* Líneas de las etiquetas en oro pulido */
.etiqueta::before { background: linear-gradient(90deg, transparent, #E3C47E); opacity: 1; }
.etiqueta::after { background: linear-gradient(90deg, #E3C47E, transparent); opacity: 1; }

/* Marcos: filete de oro pulido con un leve resplandor */
.marco-deco {
  box-shadow:
    inset 0 0 0 6px var(--marco-fondo),
    inset 0 0 0 7px rgba(227, 196, 126, .3),
    0 0 46px -22px rgba(227, 196, 126, .35);
}
.marco-deco::before {
  background:
    var(--metal-linea) top center / 100% 1px no-repeat,
    var(--metal-linea) bottom center / 100% 1px no-repeat,
    var(--metal-linea-v) left center / 1px 100% no-repeat,
    var(--metal-linea-v) right center / 1px 100% no-repeat;
}
.marco-deco__num { border-color: rgba(227, 196, 126, .7); }
.servicio { transition: box-shadow .8s var(--curva), translate .8s var(--curva), opacity var(--lento) var(--curva); }
.servicio:hover { box-shadow: inset 0 0 0 6px var(--marco-fondo), inset 0 0 0 7px rgba(227, 196, 126, .5), 0 18px 60px -24px rgba(227, 196, 126, .45); }

/* Placas de título: filete doble más presente, como en el moodboard */
.placa { box-shadow: inset 0 0 0 6px var(--marco-fondo), inset 0 0 0 7px rgba(227, 196, 126, .45), 0 0 60px -20px rgba(227, 196, 126, .35); }

/* Botones: todos con borde de oro pulido y reflejo */
.btn {
  overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(40, 33, 20, .92), rgba(12, 11, 9, .92)) padding-box,
    linear-gradient(120deg, #7A5C2A, #F3DDA0 30%, #B8924A 52%, #FFF2CC 75%, #7A5C2A) border-box;
  color: var(--oro-brillo);
  box-shadow: 0 0 26px -8px rgba(227, 196, 126, .32);
  transition: color .6s var(--curva), box-shadow .6s var(--curva);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 244, 214, .26) 48%, transparent 66%);
  translate: -120% 0;
  animation: reflejo-boton 5s var(--curva) 2s infinite;
}
.btn:hover,
.btn:focus-visible {
  color: #FFF7E0;
  background:
    linear-gradient(180deg, rgba(58, 46, 24, .95), rgba(18, 15, 10, .95)) padding-box,
    linear-gradient(120deg, #8A6A32, #FFF2CC 30%, #C9A55C 52%, #FFF7E0 75%, #8A6A32) border-box;
  box-shadow: 0 0 36px -4px rgba(227, 196, 126, .5);
}

/* Fotos: marco interior dorado más luminoso */
.foto::after { border-color: rgba(243, 221, 160, .55); }

/* Botones redondos (pie, visor, flotante) con aro de oro pulido */
.pie__redes a,
.visor__btn,
.wa-flotante {
  border: 1px solid transparent;
  background:
    radial-gradient(circle at 50% 30%, #1a1712, #0a0a0a) padding-box,
    linear-gradient(135deg, #7A5C2A, #F3DDA0, #B8924A, #FFF2CC) border-box;
  color: var(--oro-brillo);
}
.wa-flotante { box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .8), 0 0 22px -6px rgba(227, 196, 126, .35); }

/* Casillas y campos del formulario */
.casilla input { border-color: rgba(227, 196, 126, .7); }
.campo__control { border-bottom-color: rgba(227, 196, 126, .45); }

/* Números romanos del medallón del hero */
.g-romanos { fill: url(#geo-oro); }

/* =========================================================
   ANIMACIONES DE ENTRADA POR SECCIÓN
   ========================================================= */

/* Etiquetas: las líneas crecen desde el texto y las letras se asientan */
.js .encabezado.revela .etiqueta::before,
.js .encabezado.revela .etiqueta::after {
  transform: scaleX(0);
  transition: transform 1.4s var(--curva) .35s;
}
.js .encabezado.revela .etiqueta::before { transform-origin: right; }
.js .encabezado.revela .etiqueta::after { transform-origin: left; }
.js .encabezado.revela.visible .etiqueta::before,
.js .encabezado.revela.visible .etiqueta::after { transform: scaleX(1); }
.js .encabezado.revela .etiqueta { letter-spacing: .5em; transition: letter-spacing 1.6s var(--curva); }
.js .encabezado.revela.visible .etiqueta { letter-spacing: .3em; }
@media (max-width: 30em) {
  .js .encabezado.revela .etiqueta { letter-spacing: .38em; }
  .js .encabezado.revela.visible .etiqueta { letter-spacing: .24em; }
}

/* Subtítulos grandes: se descubren de abajo hacia arriba, de borroso a nítido */
.js .encabezado.revela .encabezado__sub,
.js .encabezado__sub.revela {
  clip-path: inset(0 0 100% 0);
  filter: blur(6px);
  transition: clip-path 1.5s var(--curva) .25s, filter 1.5s var(--curva) .25s;
}
.js .encabezado.revela.visible .encabezado__sub,
.js .encabezado__sub.revela.visible { clip-path: inset(0 0 -10% 0); filter: blur(0); }

/* Manifiesto: palabra por palabra */
.palabra { display: inline-block; white-space: pre; }
.js [data-palabras].revela { opacity: 1; translate: 0 0; }
.js [data-palabras] .palabra {
  opacity: 0;
  translate: 0 .5em;
  filter: blur(8px);
  transition: opacity 1.1s var(--curva), translate 1.1s var(--curva), filter 1.1s var(--curva);
  transition-delay: calc(var(--p) * 45ms + .2s);
}
.js [data-palabras].visible .palabra { opacity: 1; translate: 0 0; filter: blur(0); }

/* Placas: llegan con un leve zoom y un halo que se enciende */
.js .placa.revela { scale: .94; transition: opacity 1.2s var(--curva), scale 1.6s var(--curva), box-shadow 2s var(--curva); }
.js .placa.revela.visible { scale: 1; }
.placa.visible { animation: halo-placa 2.8s var(--curva) .4s both; }
@keyframes halo-placa {
  0% { box-shadow: inset 0 0 0 6px var(--marco-fondo), inset 0 0 0 7px rgba(227, 196, 126, .45), 0 0 0 0 rgba(227, 196, 126, 0); }
  40% { box-shadow: inset 0 0 0 6px var(--marco-fondo), inset 0 0 0 7px rgba(255, 242, 204, .8), 0 0 80px -6px rgba(227, 196, 126, .55); }
  100% { box-shadow: inset 0 0 0 6px var(--marco-fondo), inset 0 0 0 7px rgba(227, 196, 126, .45), 0 0 60px -20px rgba(227, 196, 126, .35); }
}

/* Por qué elegirnos: un hilo de luz recorre el borde superior de cada celda */
.razon { position: relative; overflow: hidden; }
.razon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #FFF2CC, transparent);
  box-shadow: 0 0 12px rgba(255, 242, 204, .8);
  translate: -110% 0;
  opacity: 0;
}
.razon.visible::before { animation: hilo-luz 2.2s var(--curva) calc(var(--i, 0) * 120ms + .3s) both; }
@keyframes hilo-luz {
  0% { translate: -110% 0; opacity: 0; }
  15% { opacity: 1; }
  100% { translate: 330% 0; opacity: 0; }
}
.js .razon.revela .razon__num { display: inline-block; scale: .7; filter: blur(6px); transition: scale 1.4s var(--curva) .2s, filter 1.4s var(--curva) .2s; }
.js .razon.revela.visible .razon__num { scale: 1; filter: blur(0); }

/* Servicios: las tarjetas se levantan en 3D y un reflejo las cruza */
.js .servicio.revela {
  transform: perspective(1000px) rotateX(14deg) translateY(46px);
  transform-origin: 50% 100%;
  transition: opacity 1.2s var(--curva), transform 1.5s var(--curva), box-shadow .8s var(--curva);
  transition-delay: calc(var(--i, 0) * 140ms);
}
.js .servicio.revela.visible { transform: none; }
.servicio {
  background:
    linear-gradient(105deg, transparent 42%, rgba(255, 240, 200, .09) 50%, transparent 58%) 160% 0 / 260% 100% no-repeat,
    var(--marco-fondo);
}
.servicio.visible { animation: reflejo-tarjeta 2.4s var(--curva) calc(var(--i, 0) * 140ms + .5s) both; }
@keyframes reflejo-tarjeta {
  from { background-position: 160% 0, 0 0; }
  to { background-position: -60% 0, 0 0; }
}

/* Galería: cortina que se abre y la foto se asienta como en cine */
.js .foto.revela {
  opacity: 1;
  translate: 0 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.6s var(--curva);
  transition-delay: calc(var(--i, 0) * 180ms);
}
.js .foto.revela.visible { clip-path: inset(0 0 0 0); }
.js .foto.revela img { scale: 1.3; transition: scale 2.4s var(--curva), transform 1.6s var(--curva); transition-delay: calc(var(--i, 0) * 180ms); }
.js .foto.revela.visible img { scale: 1; }

/* Equipo: el espacio de la foto se abre como cortina y los íconos se dibujan */
.js .equipo__foto.revela { opacity: 1; translate: 0 0; clip-path: inset(0 50% 0 50%); transition: clip-path 1.8s var(--curva); }
.js .equipo__foto.revela.visible { clip-path: inset(0 0 0 0); }
.valor__icono [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .valor.revela .valor__icono [pathLength] { stroke-dashoffset: 1; transition: stroke-dashoffset 2s var(--curva); transition-delay: calc(var(--i, 0) * 150ms + .3s); }
.js .valor.revela.visible .valor__icono [pathLength] { stroke-dashoffset: 0; }

/* Formulario: el marco se dibuja y los campos aparecen uno tras otro */
.js .formulario.revela .formulario__campos > * { opacity: 0; translate: 0 14px; transition: opacity .9s var(--curva), translate .9s var(--curva); }
.js .formulario.revela.visible .formulario__campos > * { opacity: 1; translate: 0 0; }
.formulario.visible .formulario__campos > :nth-child(1) { transition-delay: .5s; }
.formulario.visible .formulario__campos > :nth-child(2) { transition-delay: .6s; }
.formulario.visible .formulario__campos > :nth-child(3) { transition-delay: .7s; }
.formulario.visible .formulario__campos > :nth-child(4) { transition-delay: .8s; }
.formulario.visible .formulario__campos > :nth-child(5) { transition-delay: .9s; }
.formulario.visible .formulario__campos > :nth-child(7) { transition-delay: 1s; }
.formulario.visible .formulario__campos > :nth-child(8) { transition-delay: 1.1s; }

/* Hero: al bajar, el medallón se aleja suavemente (lo controla main.js) */
.hero__contenido { will-change: opacity, transform; }

/* =========================================================
   EQUIPO — escena del mesero que trae la O de MAGNO
   Línea de tiempo (segundos desde que la sección aparece):
   1.0 la silueta camina a oscuras · 3.9 se voltea · 4.6 se prende la luz
   y aparecen las alas detrás de él · 5.3 toma y levanta la campana
   6.3 brilla la O · 7.0 alas y O vuelan juntas · 7.7 MAGN · 8.3 se une
   8.7 zoom al logo · 9.6 EVENTOS · 9.9 se dibuja el aro
   ========================================================= */
.equipo__foto { background: #090807; cursor: pointer; }
.escena { position: absolute; inset: 0; width: 100%; height: 100%; }
.escena g, .escena circle, .escena path, .escena text, .escena ellipse, .escena rect { transform-origin: 0 0; }
.escena .es-mundo { transform-origin: 200px 135px; }
.js .escena:not(.activa) > * { opacity: 0; }

.es-magn text { font-family: var(--f-grabada); font-size: 32px; text-anchor: middle; }
.es-o text { font-family: var(--f-grabada); font-size: 32px; }
.es-eventos text { font-family: var(--f-grabada); font-size: 9.5px; letter-spacing: 5.5px; }
.es-alas { filter: drop-shadow(0 0 8px rgba(255, 226, 160, .45)); }
.es-alas image { filter: contrast(1.18) saturate(1.12) brightness(1.06); }
.es-oscuridad { opacity: .08; }
.es-contraluz { opacity: .25; }
.es-candelabro__luz { opacity: .5; }
.es-o__brillo, .es-union { opacity: 0; }
/* silueta: negro puro recortado contra el contraluz, sin brillo */
.es-lado { opacity: 0; fill: #000; }
.es-reflejo .es-lado { fill: #000; }
.es-piso-brillo { opacity: .35; }
.activa .es-piso-brillo { animation: es-piso 1.2s ease 4.6s both; }
@keyframes es-piso { from { opacity: 1; } to { opacity: .35; } }
.escena__repetir {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.2rem;
  font-family: var(--f-grabada);
  font-size: .58rem;
  letter-spacing: .3em;
  text-align: center;
  color: rgba(242, 237, 228, .45);
  opacity: 0;
}

/* 1 · A oscuras: la silueta camina */
.activa .es-oscuridad { animation: es-luces 1s linear 4.6s both; }
@keyframes es-luces {
  0% { opacity: 1; } 18% { opacity: .45; } 28% { opacity: .95; }
  42% { opacity: .3; } 52% { opacity: .7; } 100% { opacity: .08; }
}
.activa .es-candelabro__luz { animation: es-candelabro 1s linear 4.6s both; }
@keyframes es-candelabro {
  0% { opacity: .06; } 18% { opacity: .35; } 28% { opacity: .1; }
  42% { opacity: .45; } 52% { opacity: .2; } 100% { opacity: .5; }
}
.activa .es-contraluz { animation: es-contraluz 1.2s ease 4.6s both, es-desvanecer 1.2s ease 8.7s forwards; }
@keyframes es-contraluz { from { opacity: 1; } to { opacity: .25; } }

.activa .es-lado-pos { animation: es-caminar 2.8s linear 1s both; }
@keyframes es-caminar {
  from { transform: translateX(-380px); }
  to { transform: translateX(0); }
}
/* ciclo de paso: el muslo va y viene desde la cadera y la rodilla se dobla al levantar el pie */
.activa .es-muslo--frente { animation: es-muslo .933s linear 1s 3; }
.activa .es-canilla--frente { animation: es-canilla .933s linear 1s 3; }
.activa .es-muslo--atras { animation: es-muslo .933s linear .5335s 3.5; }
.activa .es-canilla--atras { animation: es-canilla .933s linear .5335s 3.5; }
@keyframes es-muslo {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  42% { transform: rotate(10deg); }
  62% { transform: rotate(-11deg); }
  78% { transform: rotate(-16deg); }
  100% { transform: rotate(0deg); }
}
@keyframes es-canilla {
  0% { transform: rotate(3deg); }
  25% { transform: rotate(10deg); }
  42% { transform: rotate(46deg); }
  62% { transform: rotate(34deg); }
  78% { transform: rotate(4deg); }
  100% { transform: rotate(3deg); }
}
.activa .es-bob { animation: es-bob .4665s ease-in-out 1s 6; }
@keyframes es-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }

/* 2 · Se voltea hacia nosotros */
/* El giro dura .8s y va por etapas: la cabeza se voltea primero, el cuerpo pasa
   por tres cuartos, da un paso doblando la rodilla, el brazo se balancea y el peso baja y sube. */
.activa .es-lado { animation: es-girar-lado .8s cubic-bezier(.45, 0, .55, 1) 3.8s both; }
@keyframes es-girar-lado {
  0% { opacity: 1; transform: translateX(0) scaleX(1); }
  30% { opacity: .9; transform: translateX(-1px) scaleX(.86); }
  45% { opacity: 0; transform: translateX(-2px) scaleX(.74); }
  100% { opacity: 0; transform: translateX(-2px) scaleX(.74); }
}
.activa .es-frente { animation: es-girar-frente .8s cubic-bezier(.45, 0, .55, 1) 3.8s both; }
@keyframes es-girar-frente {
  0%, 20% { opacity: 0; transform: translate(6px, 0) scaleX(.42); }
  45% { opacity: 1; transform: translate(4px, 2.5px) scaleX(.64); }
  75% { opacity: 1; transform: translate(1px, 1px) scaleX(.9); }
  100% { opacity: 1; transform: translate(0, 0) scaleX(1); }
}
.activa .es-cabeza-f { animation: es-giro-cabeza .8s cubic-bezier(.3, 0, .4, 1) 3.8s both; }
@keyframes es-giro-cabeza {
  0%, 20% { transform: translateX(7px); }
  55% { transform: translateX(1.5px); }
  100% { transform: translateX(0); }
}
.activa .es-canilla-f { animation: es-giro-paso .8s ease-in-out 3.8s both; }
@keyframes es-giro-paso {
  0%, 25% { transform: translate(0, 0); }
  50% { transform: translate(2.5px, -9px); }
  75% { transform: translate(1px, -2px); }
  100% { transform: translate(0, 0); }
}

/* 3 · Se prende la luz: la silueta se llena de detalle y aparecen las alas detrás */
.activa .es-cuerpo { animation: es-iluminar 1s linear 4.6s both, es-desvanecer 1s var(--curva) 8.6s forwards; }
@keyframes es-iluminar {
  0% { filter: brightness(0); } 18% { filter: brightness(.6); } 28% { filter: brightness(.05); }
  42% { filter: brightness(.8); } 52% { filter: brightness(.3); } 100% { filter: brightness(1); }
}
@keyframes es-desvanecer { to { opacity: 0; } }

.activa .es-alas { animation: es-alas-luz 1s linear 4.6s both, es-alas-volar 1.4s cubic-bezier(.45, 0, .2, 1) 7s both; }
@keyframes es-alas-luz {
  0% { opacity: 0; } 18% { opacity: .6; } 28% { opacity: .1; }
  42% { opacity: .85; } 52% { opacity: .4; } 100% { opacity: 1; }
}
@keyframes es-alas-volar {
  0% { transform: translate(0, 150px) scale(1.4); filter: drop-shadow(0 0 6px rgba(255, 226, 160, .4)); }
  55% { filter: drop-shadow(0 0 20px rgba(255, 236, 190, .95)); }
  100% { transform: translate(0, 0) scale(1); filter: drop-shadow(0 0 8px rgba(255, 226, 160, .45)); }
}
.activa .es-magn text { animation: es-aparecer 1s var(--curva) calc(7.7s + var(--n) * 100ms) both; }
@keyframes es-aparecer { from { opacity: 0; } to { opacity: 1; } }

/* 4 · Toma la campana y la levanta */
.activa .es-brazo-sup { animation: es-giro-brazo .8s ease-in-out 3.8s, es-brazo-sup 1.75s var(--curva) 5.3s forwards; }
.activa .es-brazo-ant { animation: es-giro-antebrazo .8s ease-in-out 3.8s, es-brazo-ant 1.75s var(--curva) 5.3s forwards; }
@keyframes es-giro-brazo { 0%, 20% { transform: rotate(-14deg); } 55% { transform: rotate(4deg); } 100% { transform: rotate(-8deg); } }
@keyframes es-giro-antebrazo { 0%, 20% { transform: rotate(18deg); } 55% { transform: rotate(26deg); } 100% { transform: rotate(8deg); } }
@keyframes es-brazo-sup {
  0% { transform: rotate(-8deg); }
  40%, 49% { transform: rotate(12.4deg); }
  74.5% { transform: rotate(-53.3deg); }
  100% { transform: rotate(-119deg); }
}
@keyframes es-brazo-ant {
  0% { transform: rotate(8deg); }
  40%, 49% { transform: rotate(134.5deg); }
  74.5% { transform: rotate(182.2deg); }
  100% { transform: rotate(229.9deg); }
}
.es-brazo-sup { transform: rotate(-8deg); }
.es-brazo-ant { transform: rotate(8deg); }
.activa .es-campana { animation: es-campana 1.75s var(--curva) 5.3s both; }
@keyframes es-campana {
  0%, 49% { transform: translate(0, 0) rotate(0); }
  74.5% { transform: translate(39px, -8.5px) rotate(-8deg); }
  100% { transform: translate(35px, -49px) rotate(-18deg); }
}

/* 5 · La O brilla y vuela junto con las alas; se acoplan en el logo */
.activa .es-o__brillo { animation: es-brillo-o 2.2s var(--curva) 6.3s both, es-desvanecer .8s ease 8.6s forwards; }
@keyframes es-brillo-o {
  0% { opacity: 0; transform: translate(-5px, -175px) scale(0) translate(5px, 175px); }
  30% { opacity: 1; transform: translate(-5px, -175px) scale(1.4) translate(5px, 175px); }
  100% { opacity: .5; transform: translate(-5px, -175px) scale(1) translate(5px, 175px); }
}
.activa .es-o { animation: es-o 1.4s cubic-bezier(.45, 0, .2, 1) 7s both; }
/* la O no se ve hasta que se levanta la campana */
.activa .es-o text { animation: es-aparecer .3s ease 6.2s both; }
@keyframes es-o {
  0% { transform: translate(0, 0); }
  40% { transform: translate(-5px, -102px); }
  100% { transform: translate(67px, -119px); }
}
.activa .es-union { animation: es-union 1s var(--curva) 8.3s both; }
@keyframes es-union { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

/* 6 · Zoom: solo queda el logo, y aparece el aro */
.activa .es-mundo { animation: es-zoom 1.8s cubic-bezier(.65, 0, .25, 1) 8.7s both; }
@keyframes es-zoom { from { transform: translate(0, 0) scale(1); } to { transform: translate(0, 97px) scale(1.5); } }
.activa .es-salon { animation: es-salon 1.8s ease 8.7s both; }
@keyframes es-salon { to { opacity: 0; } }
/* el candelabro también está apagado e invisible hasta que se prende la luz */
.activa .es-candelabro { animation: es-alas-luz 1s linear 4.6s both, es-desvanecer 1s ease 7.9s forwards; }
.es-cono-lampara { opacity: .6; }
.activa .es-cono-lampara { animation: es-alas-luz 1s linear 4.6s both; }
/* relieve de las molduras doradas: luz arriba, sombra abajo */
.es-relieve { filter: drop-shadow(.7px .9px 0 rgba(0, 0, 0, .95)) drop-shadow(-.4px -.5px 0 rgba(243, 221, 160, .28)); }
/* la luz del candelabro llena el salón al encender */
.activa .es-iluminacion { animation: es-alas-luz 1s linear 4.6s both; }
/* velas: se encienden con la luz y luego parpadean suave */
.activa .es-llamas { animation: es-alas-luz 1s linear 4.6s both; }
.escena .es-llama { transform-box: fill-box; transform-origin: 50% 100%; animation: es-llama 1.3s ease-in-out infinite; }
@keyframes es-llama { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(.9, 1.12); } 60% { transform: scale(1.06, .94); } }
.es-eventos { opacity: 0; }
.es-fondo-final { opacity: 0; }
.activa .es-fondo-final { animation: es-aparecer 1.6s ease 8.8s both; }
/* destello que recorre alas y letras, como luz sobre metal */
.es-barrido { opacity: 0; }
.activa .es-barrido { animation: es-barrido 5s cubic-bezier(.4, 0, .2, 1) 10.6s infinite; }
@keyframes es-barrido {
  0% { opacity: 1; transform: skewX(-20deg) translateX(-20px); }
  30% { opacity: 1; transform: skewX(-20deg) translateX(330px); }
  31%, 100% { opacity: 0; transform: skewX(-20deg) translateX(330px); }
}
.activa .es-eventos { animation: es-aparecer 1.2s var(--curva) 9.6s both; }
.es-aro { stroke-dasharray: 1; }
.activa .es-aro { animation: es-aro 1.8s var(--curva) 9.9s both; }
.activa .es-aro--int { animation-delay: 10.1s; }
@keyframes es-aro { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.es-cristal { animation: es-titilar 2.4s ease-in-out infinite; }
.es-chispas { opacity: 0; }
.activa .es-chispas { animation: es-aparecer 1s ease 10.6s both; }
.activa .es-chispas circle { animation: es-titilar 2.6s ease-in-out infinite; }
.activa .es-chispas circle:nth-child(2n) { animation-delay: .9s; }
.activa .es-chispas circle:nth-child(3n) { animation-delay: 1.6s; }
@keyframes es-titilar { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

.activa ~ .escena__repetir { animation: es-aparecer 1.2s ease 11.2s both; }

/* =========================================================
   OUTRO — el logo entra como el cierre de un video
   ========================================================= */
.pie { padding-top: 0; gap: 1.4rem; }
.outro {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(100% + var(--gutter) * 2);
  min-height: min(100svh, 52rem);
  margin-inline: calc(var(--gutter) * -1);
  overflow: hidden;
  isolation: isolate;
}
.outro__escena {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* oscurece el mármol detrás del logo para que el oro resalte */
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(8, 8, 8, .88) 0%, rgba(8, 8, 8, .55) 60%, rgba(8, 8, 8, .2) 100%);
}

/* Anillos que se dibujan */
.outro__anillos {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(150vw, 62rem);
  max-width: none;
  aspect-ratio: 1;
  translate: -50% -50%;
  -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 72%);
  mask-image: radial-gradient(circle, #000 40%, transparent 72%);
}
.oa { fill: none; stroke: url(#geo-oro); stroke: var(--oro); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.oa--1 { opacity: .55; }
.oa--2 { opacity: .3; }
.oa--3 { opacity: .16; }
.oa--4 { opacity: .4; }

/* Destello central (lens flare) y línea de horizonte */
.outro__destello {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(120vw, 60rem);
  height: min(60vw, 26rem);
  translate: -50% -50%;
  background: radial-gradient(ellipse at center, rgba(255, 236, 190, .5) 0%, rgba(227, 196, 126, .16) 28%, transparent 62%);
  mix-blend-mode: screen;
  opacity: 0;
}
.outro__horizonte {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92vw, 56rem);
  height: 1px;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, #F3DDA0 30%, #FFFBEF 50%, #F3DDA0 70%, transparent);
  box-shadow: 0 0 18px 2px rgba(255, 236, 190, .65);
  opacity: 0;
}

/* Polvo de oro flotando */
.outro__polvo i {
  position: absolute;
  left: var(--x);
  bottom: -2%;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #FFF2CC;
  box-shadow: 0 0 6px 1px rgba(255, 226, 160, .8);
  opacity: 0;
}

/* Logo */
.outro__logo {
  display: grid;
  justify-items: center;
  padding: 4rem var(--gutter);
  text-align: center;
}
.outro__alas {
  position: relative;
  width: clamp(9.5rem, 40vw, 17rem);
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
  filter: drop-shadow(0 0 24px rgba(227, 196, 126, .35));
}
/* Reflejo que recorre solo el dibujo de las alas */
.outro__brillo {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 252, 236, .95) 50%, transparent 62%) 140% 0 / 260% 100% no-repeat;
  -webkit-mask: url("../assets/logo/alas-530.png") center / contain no-repeat;
  mask: url("../assets/logo/alas-530.png") center / contain no-repeat;
}
.outro__magno {
  display: flex;
  gap: .13em;
  margin-right: -.13em;
  font-family: var(--f-grabada);
  font-size: clamp(3rem, 14vw, 7.5rem);
  line-height: 1;
  color: var(--marfil);
  text-shadow: 0 0 30px rgba(255, 236, 190, .25), 0 2px 0 rgba(0, 0, 0, .5);
}
.outro__magno span { display: inline-block; }
.outro__eventos {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: clamp(.6rem, 1.6vw, 1rem);
  font-family: var(--f-grabada);
  font-weight: 500;
  font-size: clamp(.85rem, 3.6vw, 1.55rem);
  letter-spacing: .6em;
  text-transform: uppercase;
}
.outro__eventos span {
  margin-right: -.6em;
  background-image: var(--metal);
  background-size: 260% 100%;
  background-position: 50% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.outro__eventos::before,
.outro__eventos::after {
  content: "";
  width: clamp(2.2rem, 10vw, 5rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, #F3DDA0);
}
.outro__eventos::after { background: linear-gradient(90deg, #F3DDA0, transparent); }
.outro__sep { margin: clamp(1.4rem, 3vw, 2rem) auto 1.1rem; }
.outro__frase {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.15rem, 3.6vw, 1.6rem);
  color: var(--rosa);
}

/* --- Estado inicial (solo con JS): todo espera en la oscuridad --- */
.js .outro:not(.activo) .oa { stroke-dashoffset: 1; }
.js .outro:not(.activo) .outro__alas picture { clip-path: inset(-10% 50% -10% 50%); opacity: 0; }
.js .outro:not(.activo) .outro__brillo { opacity: 0; }
.js .outro:not(.activo) .outro__magno span { opacity: 0; translate: 0 .35em; filter: blur(10px); }
.js .outro:not(.activo) .outro__eventos,
.js .outro:not(.activo) .outro__sep,
.js .outro:not(.activo) .outro__frase { opacity: 0; }

/* --- La secuencia, al llegar al final de la página --- */
.outro.activo .outro__logo { animation: acercar 4s var(--curva) both; }
@keyframes acercar { from { scale: 1.08; } to { scale: 1; } }

.outro.activo .outro__horizonte { animation: horizonte 2.6s var(--curva) both; }
@keyframes horizonte {
  0% { opacity: 0; transform: scaleX(0); }
  30% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1.15); }
}
.outro.activo .outro__destello { animation: destello-outro 3.4s var(--curva) .5s both; }
@keyframes destello-outro {
  0% { opacity: 0; scale: .6; }
  35% { opacity: 1; scale: 1; }
  100% { opacity: .35; scale: 1.1; }
}
.outro.activo .oa { stroke-dashoffset: 0; transition: stroke-dashoffset 2.8s var(--curva) .3s; }
.outro.activo .oa--2 { transition-delay: .45s; }
.outro.activo .oa--3 { transition-delay: .6s; }
.outro.activo .oa--4 { transition-delay: .9s; }

.outro.activo .outro__alas picture { animation: alas-outro 1.8s var(--curva) .6s both; }
@keyframes alas-outro {
  from { clip-path: inset(-10% 50% -10% 50%); opacity: 0; }
  to { clip-path: inset(-10% -5% -10% -5%); opacity: 1; }
}
.outro.activo .outro__brillo { animation: brillo-alas 6s var(--curva) 2.2s infinite; }
@keyframes brillo-alas {
  0% { background-position: 140% 0; }
  35%, 100% { background-position: -40% 0; }
}
.outro.activo .outro__magno span { animation: letra 1.3s var(--curva) calc(1.3s + var(--n) * 110ms) both; }
@keyframes letra {
  from { opacity: 0; translate: 0 .35em; filter: blur(10px); }
  to { opacity: 1; translate: 0 0; filter: blur(0); }
}
.outro.activo .outro__eventos { animation: aparecer 1.4s var(--curva) 2s both; }
.outro.activo .outro__eventos span { animation: pulir-oro 2.6s var(--curva) 2.1s both; }
.outro.activo .outro__eventos::before,
.outro.activo .outro__eventos::after { animation: linea-crece 1.4s var(--curva) 2.1s both; }
.outro.activo .outro__eventos::before { transform-origin: right; }
.outro.activo .outro__eventos::after { transform-origin: left; }
.outro.activo .outro__sep { animation: aparecer 1.2s var(--curva) 2.5s both; }
.outro.activo .outro__frase { animation: subir 1.4s var(--curva) 2.7s both; }
.outro.activo .outro__polvo i { animation: polvo var(--d) linear calc(2.6s + var(--t)) infinite; }
@keyframes polvo {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: .9; }
  70% { opacity: .6; }
  100% { opacity: 0; transform: translate(18px, -70vh); }
}

/* Datos de contacto debajo del outro */
.pie__info { display: grid; justify-items: center; gap: 1.4rem; }

/* =========================================================
   Movimiento reducido: sin Ken Burns ni dibujo de líneas
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .4s !important;
    transition-delay: 0s !important;
  }
  .g { stroke-dashoffset: 0; animation: none !important; }
  .hero__fondo img { animation: none !important; transform: scale(1.05); }
  .hero__vela { animation: none !important; }
  .hero__scroll-linea::after { display: none; }
  .js .revela:not(.marco-deco) { translate: 0 0; }
}