:root {
    /* ── Colores ── */
    --gold:       #C9A84C;
    --gold-light: #E8C97A;
    --gold-dark:  #8B6914;
    --gold-alpha: rgba(201,168,76,0.12);
    --black:      #0A0806;
    --dark:       #12100D;
    --dark-2:     #1C1915;
    --dark-3:     #252219;
    --text:       #D4C9B0;
    --text-muted: #9A9080; /* WCAG AA — ratio ~5.2:1 sobre #0A0806 */
    --white:      #F5F0E8;

    /* ── Espaciado ── */
    --space-xs:   0.5rem;
    --space-sm:   1rem;
    --space-md:   2rem;
    --space-lg:   4rem;
    --space-xl:   6rem;

    /* ── Tipografía ── */
    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-sans:  'Montserrat', system-ui, sans-serif;

    /* ── Transiciones ── */
    --transition-fast:   0.2s ease;
    --transition-base:   0.3s ease;
    --transition-slow:   0.6s ease;
    --transition-spring: 0.5s cubic-bezier(0.22,1,0.36,1);

    /* ── Z-index scale ── */
    --z-base:      1;
    --z-dropdown:  100;
    --z-navbar:    1000;
    --z-modal:     2000;
    --z-lightbox:  9000;
    --z-overlay:   9500;
    --z-chatbot:   9997;
    --z-mobile-menu: 10001;
    --z-hamburger: 10002;
    --z-chatbot-mobile: 10003;
    --z-cursor:    999997;
    --z-preloader: 999997;
    --z-age-gate:  999999;

    /* ── Border radius ── */
    --radius-sm:   2px;
    --radius-md:   4px;
    --radius-pill: 100px;

    /* ── Bordes gold ── */
    --border-gold:       1px solid rgba(201,168,76,0.2);
    --border-gold-hover: 1px solid rgba(201,168,76,0.5);
  }

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

  html { scroll-behavior: smooth; }

  body {
    background: var(--black);
    color: var(--text);
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
  }

  /* ─── GRAIN OVERLAY ─── */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
    opacity: 0.3;
  }

  /* ─── SECTIONS ─── */
  section {
    padding: 8rem 4rem;
    max-width: 1400px;
    margin: 0 auto;
  }

  .section-full {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .section-label {
    font-size: 0.6rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .section-label::before {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--gold);
    display: block;
  }

  .section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.5rem, 4vw, 4rem);
    font-weight: 300;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 2rem;
  }

  .section-title em {
    font-style: italic;
    color: var(--gold);
  }

  /* ─── DIVIDER ─── */
  .divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3), transparent);
    margin: 0;
  }

  /* FOCUS VISIBLE — Navegación por teclado             */
  /* ══════════════════════════════════════════════════ */

  /* Reset browser default outline */
  *:focus { outline: none; }

  /* Custom focus ring — visible solo con teclado */
  *:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }

  /* Botones y links — ring dorado */
  a:focus-visible,
  button:focus-visible,
  [role="tab"]:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid #C9A84C;
    outline-offset: 3px;
    border-radius: 1px;
  }

  /* Input chat — ring más ancho */
  #chat-input:focus-visible {
    outline: 2px solid rgba(201,168,76,0.8);
    outline-offset: 0;
  }

  /* Menu tabs focus */
  .menu-tab:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
  }

  /* Gallery items */
  .gallery-item:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
  }
  .gallery-item:focus-visible img {
    transform: scale(1.04);
  }


  /* Screen reader only — visually hidden but accessible */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }


  /* ── Typing indicator ── */
  .typing-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0.7rem 1rem; /* overrides .msg padding */
  }
  .typing-indicator span {
    width: 6px; height: 6px;
    background: rgba(201,168,76,0.6);
    border-radius: 50%;
    animation: typingDot 1.2s infinite;
    display: inline-block;
  }
  .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
  .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes typingDot {
    0%, 60%, 100% { transform: translateY(0); opacity:0.4; }
    30% { transform: translateY(-5px); opacity:1; }
  }
  #chat-clear {
    background: none;
    border: none;
    color: rgba(201,168,76,0.35);
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
    transition: color var(--transition-fast);
  }
  #chat-clear:hover { color: rgba(201,168,76,0.7); }


  /* ── Lightbox mejorado ── */
  #lightbox {
    position: fixed; inset: 0; z-index: var(--z-lightbox);
    background: rgba(5,4,3,0.97);
    display: none; align-items: center; justify-content: center;
    flex-direction: column;
  }
  #lightbox.open { display: flex; }
  #lightbox-img-wrap {
    position: relative;
    max-width: 90vw; max-height: 82vh;
    overflow: hidden;
    cursor: zoom-in;
  }
  #lightbox-img-wrap.zoomed { cursor: zoom-out; }
  #lightbox-img {
    max-width: 90vw; max-height: 82vh;
    object-fit: contain;
    transition: transform 0.25s ease;
    user-select: none;
    display: block;
  }
  #lightbox-close {
    position: absolute; top: 1.5rem; right: 1.5rem;
    background: rgba(255,255,255,0.08); border: var(--border-gold);
    color: rgba(201,168,76,0.8); width: 40px; height: 40px;
    font-size: 1rem; cursor: pointer; z-index: 9001;
    transition: var(--transition-fast);
  }
  #lightbox-close:hover { background: rgba(201,168,76,0.15); color: #fff; }
  #lightbox-prev, #lightbox-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.06); border: 1px solid rgba(201,168,76,0.15);
    color: rgba(201,168,76,0.7); width: 44px; height: 44px;
    font-size: 1.2rem; cursor: pointer; z-index: 9001;
    transition: var(--transition-fast);
  }
  #lightbox-prev { left: 1.5rem; }
  #lightbox-next { right: 1.5rem; }
  #lightbox-prev:hover, #lightbox-next:hover {
    background: rgba(201,168,76,0.15); color: #fff;
  }
  #lightbox-counter {
    position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
    font-size: 0.6rem; letter-spacing: 0.25em; color: rgba(201,168,76,0.5);
    text-transform: uppercase;
  }