/* ============================================================
   MenúGold · sistema de diseño
   Negro humo, dorado champagne, tipografía editorial.
   ============================================================ */

:root {
  /* Paleta base — un tema solo redefine estos tripletes RGB.
     `ink` es siempre el fondo y `cream` siempre el texto: en los temas
     claros se invierten y toda la interfaz cambia con ellos. */
  --ink-rgb:       12, 11, 9;
  --carbon-rgb:    22, 20, 18;
  --carbon2-rgb:   30, 27, 24;
  --cream-rgb:     244, 237, 225;
  --gold-rgb:      216, 178, 110;
  --gold-soft-rgb: 232, 206, 156;
  --ember-rgb:     196, 80, 43;
  --green-rgb:     111, 191, 139;
  --shadow-rgb:    0, 0, 0;
  --on-accent:     #FFF6F1;
  --on-gold:       rgb(var(--ink-rgb));
  --a-numeral:     .65;

  /* Opacidades que el tema ajusta: un tinte sobre blanco necesita más
     fuerza que el mismo tinte sobre negro para verse igual de presente. */
  --a-line:      .20;
  --a-line-soft: .10;
  --a-dim:       .68;
  --a-faint:     .58;
  --a-fill:      .07;
  --a-shadow:    .90;

  /* Velo sobre fotografía: nunca se invierte. El texto que va encima
     siempre es claro, haya el tema que haya. */
  --scrim-rgb:  10, 9, 8;
  --on-scrim:   #F7F3EC;

  --ink:        rgb(var(--ink-rgb));
  --carbon:     rgb(var(--carbon-rgb));
  --carbon-2:   rgb(var(--carbon2-rgb));
  --gold:       rgb(var(--gold-rgb));
  --gold-soft:  rgb(var(--gold-soft-rgb));
  --cream:      rgb(var(--cream-rgb));
  --ember:      rgb(var(--ember-rgb));
  --green:      rgb(var(--green-rgb));

  --line:       rgba(var(--gold-rgb), var(--a-line));
  --line-soft:  rgba(var(--cream-rgb), var(--a-line-soft));
  --text:       var(--cream);
  --text-dim:   rgba(var(--cream-rgb), var(--a-dim));
  --text-faint: rgba(var(--cream-rgb), var(--a-faint));

  /* Tipografía */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(.78rem, .76rem + .12vw, .86rem);
  --step-0:  clamp(.94rem, .90rem + .18vw, 1.03rem);
  --step-1:  clamp(1.13rem, 1.05rem + .38vw, 1.35rem);
  --step-2:  clamp(1.42rem, 1.24rem + .85vw, 2.05rem);
  --step-3:  clamp(1.85rem, 1.45rem + 1.9vw, 3.1rem);
  --step-4:  clamp(2.4rem, 1.6rem + 3.6vw, 4.6rem);
  --step-5:  clamp(3rem, 1.2rem + 9vw, 8rem);

  /* Ritmo */
  --gutter: clamp(1.25rem, .8rem + 2.2vw, 3.5rem);
  --section: clamp(5rem, 3rem + 9vw, 11rem);
  --maxw: 1400px;
  --readw: 62ch;

  /* Formas */
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;
  --r-pill: 999px;

  /* Movimiento */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, .05, .36, 1);
  --dur: .68s;

  --shadow: 0 30px 80px -30px rgba(var(--shadow-rgb), var(--a-shadow));
  --shadow-gold: 0 24px 60px -24px rgba(var(--gold-rgb), .38);
  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, figure, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

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

::selection { background: var(--gold); color: var(--on-gold); }

/* ---------- Granulado global ---------- */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: .03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Tipografía ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.022em;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 100;
}
.display em { font-style: italic; font-variation-settings: "SOFT" 40, "WONK" 1; color: var(--gold-soft); }

h1.display { font-size: var(--step-5); }
h2.display { font-size: var(--step-4); }
h3.display { font-size: var(--step-3); }
h4.display { font-size: var(--step-2); }

.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: .9em;
}
.eyebrow::before {
  content: "";
  width: clamp(24px, 4vw, 56px);
  height: 1px;
  background: var(--gold);
  opacity: .5;
  flex: none;
}
.eyebrow.is-centered { justify-content: center; }
.eyebrow.is-plain::before { display: none; }

.numeral {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: .34em;
  color: rgba(var(--gold-rgb), var(--a-numeral));
}

.lead { font-size: var(--step-1); color: var(--text-dim); line-height: 1.6; max-width: var(--readw); }
.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.gold { color: var(--gold); }

/* ---------- Estructura ---------- */
.shell { width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; }
.shell-narrow { width: min(100% - var(--gutter) * 2, 900px); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.rule { height: 1px; background: var(--line); }

/* ---------- Botones ---------- */
.btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 1.05em 2.1em;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--btn-fg);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color .35s var(--ease), transform .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-bg);
  border-radius: inherit;
  transition: transform .5s var(--ease);
  transform-origin: bottom;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: var(--gold-soft);
}
.btn:hover::before { transform: scaleY(0); }
.btn:hover { color: var(--ink); }
.btn:active { transform: scale(.975); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--cream);
  border: 1px solid var(--line);
}
.btn-ghost::after { background: var(--gold); }
.btn-ghost:hover { color: var(--ink); border-color: var(--gold); }

.btn-ember { --btn-bg: var(--ember); --btn-fg: var(--cream); }
.btn-ember::after { background: rgb(var(--ember-rgb)); }
.btn-ember:hover { color: var(--on-accent); }

.btn-sm { padding: .7em 1.4em; font-size: 11px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Enlace subrayado que se dibuja al pasar el cursor */
.link-line {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.link-line::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease);
}
.link-line:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Cápsulas / etiquetas ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .34em .8em;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.chip-solid { background: var(--gold); color: var(--on-gold); border-color: transparent; }
.chip-ember { color: var(--ember); border-color: rgba(var(--ember-rgb), .4); }
.chip-green { color: var(--green); border-color: rgba(var(--green-rgb), .35); }
.chip-dim   { color: var(--text-faint); border-color: var(--line-soft); }

.dot-live {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  position: relative;
  flex: none;
}
.dot-live::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--green);
  animation: pulse-ring 2.2s var(--ease-io) infinite;
}
.dot-live.is-off { background: var(--text-faint); }
.dot-live.is-off::after { display: none; }
@keyframes pulse-ring {
  0%   { transform: scale(.7); opacity: .9; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ---------- Imágenes ---------- */
.mg-pic, .ph-img { container-type: inline-size; }
.mg-pic {
  display: block;
  position: relative;
  overflow: hidden;
  background-color: var(--carbon);
  background-size: cover;
  background-position: center;
}
.mg-pic img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .7s var(--ease), transform 1.1s var(--ease);
}
.mg-pic.is-loaded img { opacity: 1; }
/* Marcador para cuando todavía no hay fotografía: se diseña, no se rompe. */
.ph-img {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  width: 100%;
  background:
    radial-gradient(120% 110% at 26% 4%, rgba(var(--gold-rgb), .20), transparent 58%),
    radial-gradient(90% 80% at 88% 96%, rgba(var(--ember-rgb), .12), transparent 62%),
    linear-gradient(158deg, var(--carbon-2) 0%, var(--ink) 78%);
}
.ph-img::before {
  content: "";
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(var(--gold-rgb), .17);
  border-radius: inherit;
  pointer-events: none;
}
.ph-img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: .045;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ph-mark {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 13cqi, 4.5rem);
  letter-spacing: .06em;
  color: var(--gold);
  opacity: .34;
  line-height: 1;
  user-select: none;
}
@supports not (font-size: 1cqi) {
  .ph-mark { font-size: clamp(1.6rem, 6vw, 3.4rem); }
}
.zoomer { overflow: hidden; }
.zoomer .mg-pic img, .zoomer > img { transition: transform .9s var(--ease); }
@media (hover: hover) {
  .zoomer:hover .mg-pic img, .zoomer:hover > img { transform: scale(1.055); }
}

/* ---------- Aparición al hacer scroll ----------
   Todo se ve por omisión: si el JavaScript no carga, la página sigue
   siendo legible. Solo se oculta cuando <html> lleva la clase .js,
   que se añade en la propia cabecera antes de pintar. */
.reveal { transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal {
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }

.reveal-mask { overflow: hidden; display: block; }
.reveal-mask > * { display: block; transition: transform 1s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal-mask > * { transform: translateY(110%); }
.js .is-in > .reveal-mask > *, .js .reveal-mask.is-in > * { transform: none; }

/* Título letra por letra */
.split-line { display: block; overflow: hidden; }
.split-char { display: inline-block; transition: transform .9s var(--ease), opacity .5s linear; }
.js .split-char { transform: translateY(102%) rotate(3deg); opacity: 0; }
.js .is-in .split-char { transform: none; opacity: 1; }

/* ---------- Marquesina ---------- */
.marquee {
  --speed: 42s;
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 1.1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee var(--speed) linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.2vw, 1.6rem);
  letter-spacing: -.01em;
  color: var(--text-dim);
  padding-inline: 1.6rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  white-space: nowrap;
}
.marquee-item::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Cursor personalizado ---------- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transform: translate3d(-100px, -100px, 0);
  transition: width .35s var(--ease), height .35s var(--ease), background .35s var(--ease);
}
.cursor.is-big { width: 46px; height: 46px; background: rgba(var(--gold-rgb), .3); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- Cortina de transición ---------- */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}
.curtain.is-out { transform: scaleY(1); transform-origin: bottom; transition: transform .4s var(--ease-io); }
.curtain.is-in  { transform: scaleY(0); transform-origin: top;    transition: transform .4s var(--ease-io); }

/* ---------- Formularios ---------- */
.field { display: block; margin-bottom: 1.15rem; min-width: 0; max-width: 100%; }
.field > label, .label {
  display: block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: .55rem;
  font-weight: 500;
}
.input, .select, .textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: .92em 1.05em;
  background: rgba(var(--cream-rgb), .035);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  color: var(--cream);
  font-size: var(--step-0);
  transition: border-color .3s var(--ease), background .3s var(--ease);
  appearance: none;
}
.textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23D8B26E' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.05em center;
  padding-right: 2.6em;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(var(--cream-rgb), .06);
}
.input::placeholder, .textarea::placeholder { color: rgba(var(--cream-rgb), .5); }
.input:disabled, .select:disabled { opacity: .5; cursor: not-allowed; }
.field-hint { font-size: 12px; color: var(--text-faint); margin-top: .4rem; }
.field-error { font-size: 12px; color: var(--ember); margin-top: .4rem; }
.input.has-error { border-color: var(--ember); }

.switch { display: inline-flex; align-items: center; gap: .75rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 44px; height: 25px;
  border-radius: var(--r-pill);
  background: rgba(var(--cream-rgb), .12);
  border: 1px solid var(--line-soft);
  position: relative;
  transition: background .3s var(--ease), border-color .3s var(--ease);
  flex: none;
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--cream);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.switch input:checked + .switch-track { background: rgba(var(--gold-rgb), .3); border-color: var(--gold); }
.switch input:checked + .switch-track::after { transform: translateX(19px); background: var(--gold); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Avisos ---------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: 1rem 1.2rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(var(--gold-rgb), .07);
  font-size: var(--step--1);
  margin-bottom: 1.2rem;
}
.alert-error   { border-color: rgba(var(--ember-rgb), .45); background: rgba(var(--ember-rgb), .1); color: rgb(var(--ember-rgb)); }
.alert-success { border-color: rgba(var(--green-rgb), .4); background: rgba(var(--green-rgb), .1); color: rgb(var(--green-rgb)); }

/* ---------- Accesibilidad ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -100px; left: 1rem;
  z-index: 10000;
  background: var(--gold);
  color: var(--ink);
  padding: .8rem 1.4rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- Respeto por el movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal-mask > *, .js .split-char { transform: none; opacity: 1; }
  .marquee-track { animation: none; }
  .cursor { display: none; }
}