/* =========================================================================
   EMILIS — base.css
   Tokens, tipografía, botones, header y footer.
   Paleta: ónix + oro champán.
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. Fuentes (self-hosted, variables, un archivo por familia)
   ---------------------------------------------------------------------- */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-var.woff2') format('woff2-variations'),
       url('../fonts/cormorant-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-var.woff2') format('woff2-variations'),
       url('../fonts/jost-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* Fallbacks con métricas ajustadas: mientras carga la web font el texto ocupa
   casi lo mismo, así el swap no mueve el layout (CLS ~0). */
@font-face {
  font-family: 'Cormorant Fallback';
  src: local('Times New Roman'), local('Times'), local('Liberation Serif');
  size-adjust: 92%;
  ascent-override: 100%;
  descent-override: 30%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Jost Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 96%;
  ascent-override: 105%;
  descent-override: 29%;
  line-gap-override: 0%;
}

/* -------------------------------------------------------------------------
   2. Tokens
   ---------------------------------------------------------------------- */

@property --e-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

:root {
  /* Superficies oscuras */
  --e-onyx:        #0B0B0D;
  --e-onyx-2:      #131316;
  --e-onyx-3:      #1B1B20;
  --e-onyx-4:      #24242B;

  /* Superficies claras */
  --e-ivory:       #F7F4EF;
  --e-ivory-2:     #EFEAE1;
  --e-ivory-3:     #E4DCCF;

  /* Oro champán */
  --e-gold:        #C9A961;
  --e-gold-light:  #E8D5A3;
  --e-gold-deep:   #A8873F;
  --e-gold-ghost:  rgba(201, 169, 97, 0.14);

  /* Texto */
  --e-ink:         #1A1A1C;
  --e-ink-soft:    #55555C;
  --e-on-dark:     #F2EFE9;
  --e-on-dark-mut: rgba(242, 239, 233, 0.60);
  --e-on-dark-fai: rgba(242, 239, 233, 0.34);

  /* Bordes */
  --e-line-dark:   rgba(201, 169, 97, 0.20);
  --e-line-light:  rgba(26, 26, 28, 0.10);

  /* Degradados */
  --e-grad-gold:   linear-gradient(120deg, var(--e-gold-deep) 0%, var(--e-gold) 28%, var(--e-gold-light) 52%, var(--e-gold) 76%, var(--e-gold-deep) 100%);
  --e-grad-text:   linear-gradient(100deg, #E8D5A3 0%, #FFF6DF 22%, #C9A961 48%, #E8D5A3 72%, #A8873F 100%);
  --e-grad-onyx:   linear-gradient(180deg, #0B0B0D 0%, #131316 55%, #0B0B0D 100%);
  --e-grad-panel:  linear-gradient(155deg, rgba(201,169,97,.10) 0%, rgba(201,169,97,.02) 45%, rgba(11,11,13,0) 100%);

  /* Sombras */
  --e-shadow-sm:   0 2px 10px rgba(0, 0, 0, .28);
  --e-shadow-md:   0 14px 40px rgba(0, 0, 0, .40);
  --e-shadow-lg:   0 30px 80px rgba(0, 0, 0, .55);
  --e-glow-gold:   0 0 0 1px rgba(201,169,97,.30), 0 12px 44px rgba(201,169,97,.22);

  /* Tipografía */
  --e-font-display: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
  --e-font-body:    'Jost', 'Jost Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --e-fs-eyebrow: clamp(0.66rem, 0.60rem + 0.25vw, 0.78rem);
  --e-fs-body:    clamp(0.95rem, 0.90rem + 0.22vw, 1.05rem);
  --e-fs-lead:    clamp(1.02rem, 0.94rem + 0.42vw, 1.22rem);
  --e-fs-h3:      clamp(1.35rem, 1.15rem + 0.90vw, 1.95rem);
  --e-fs-h2:      clamp(1.95rem, 1.50rem + 2.10vw, 3.40rem);
  --e-fs-h1:      clamp(2.55rem, 1.80rem + 3.60vw, 5.60rem);

  /* Ritmo */
  --e-gap:        clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
  --e-section-y:  clamp(4rem, 2.5rem + 6vw, 8.5rem);
  --e-radius:     14px;
  --e-radius-lg:  22px;
  --e-max:        1240px;
  --e-max-narrow: 720px;

  /* Movimiento */
  --e-ease:       cubic-bezier(.22, 1, .36, 1);
  --e-ease-soft:  cubic-bezier(.4, 0, .2, 1);
  --e-dur:        .55s;

  --e-header-h:   72px;
}

@media (max-width: 782px) {
  :root { --e-header-h: 60px; }
}

/* -------------------------------------------------------------------------
   3. Reset y base
   ---------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--e-header-h) + 16px);
}

body.emilis {
  margin: 0;
  background: var(--e-ivory);
  color: var(--e-ink);
  font-family: var(--e-font-body);
  font-size: var(--e-fs-body);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.emilis-home { background: var(--e-onyx); }

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--e-font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

/* Astra fija un color de titular fijo (#1e293b) vía CSS dinámico en línea, así
   que ganarle por orden de carga no es fiable. Con `body.emilis` delante subimos
   la especificidad y dejamos que cada sección mande sobre su propio texto. */
body.emilis h1,
body.emilis h2,
body.emilis h3,
body.emilis h4,
body.emilis h5,
body.emilis h6,
body.emilis .e-section p,
body.emilis .e-hero p,
body.emilis .e-final p { color: inherit; }

h1 { font-size: var(--e-fs-h1); }
h2 { font-size: var(--e-fs-h2); }
h3 { font-size: var(--e-fs-h3); }

p { margin: 0 0 1.1em; text-wrap: pretty; }

a { color: inherit; text-decoration-color: rgba(201,169,97,.5); text-underline-offset: 3px; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--e-gold-light);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* -------------------------------------------------------------------------
   4. Utilidades de layout
   ---------------------------------------------------------------------- */

.e-container {
  width: min(100% - 2.5rem, var(--e-max));
  margin-inline: auto;
}

.e-container--narrow { width: min(100% - 2.5rem, var(--e-max-narrow)); }

.e-section { padding-block: var(--e-section-y); position: relative; }
.e-section--dark  { background: var(--e-onyx); color: var(--e-on-dark); }
.e-section--onyx2 { background: var(--e-onyx-2); color: var(--e-on-dark); }
.e-section--light { background: var(--e-ivory); color: var(--e-ink); }
.e-section--ivory2{ background: var(--e-ivory-2); color: var(--e-ink); }

.e-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--e-font-body);
  font-size: var(--e-fs-eyebrow);
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--e-gold);
  margin: 0 0 1.1rem;
}

.e-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--e-gold));
}

.e-eyebrow--center { justify-content: center; }
.e-eyebrow--center::after {
  content: '';
  width: 28px;
  height: 1px;
  background: linear-gradient(270deg, transparent, var(--e-gold));
}

.e-lead {
  font-size: var(--e-fs-lead);
  line-height: 1.6;
  color: var(--e-on-dark-mut);
  font-weight: 300;
  max-width: 56ch;
}

.e-section--light .e-lead,
.e-section--ivory2 .e-lead { color: var(--e-ink-soft); }

.e-center { text-align: center; }
.e-center .e-lead { margin-inline: auto; }

/* Texto con degradado dorado que respira */
.e-gold-text {
  background: var(--e-grad-text);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: e-gold-shift 9s var(--e-ease-soft) infinite;
  /* El recorte a texto usa la caja del elemento: en cursiva la última letra
     sobresale y se corta. Este respiro lo evita. */
  padding-inline: .12em;
}

@keyframes e-gold-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Regla decorativa */
.e-rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--e-line-dark) 20%, var(--e-line-dark) 80%, transparent);
  margin: 0;
}

/* Grano fino sobre las superficies oscuras: quita el aspecto "plano de CSS" */
.e-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  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)' opacity='.35'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   5. Botones y CTAs con borde animado
   ---------------------------------------------------------------------- */

.e-btn {
  --e-btn-pad-y: .92rem;
  --e-btn-pad-x: 2rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: var(--e-btn-pad-y) var(--e-btn-pad-x);
  border: 0;
  border-radius: 999px;
  font-family: var(--e-font-body);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  white-space: nowrap;
  transition: transform .35s var(--e-ease), box-shadow .35s var(--e-ease), color .3s var(--e-ease-soft);
}

.e-btn:hover { transform: translateY(-2px); }
.e-btn:active { transform: translateY(0); }

.e-btn .e-icon { transition: transform .4s var(--e-ease); }
.e-btn:hover .e-icon { transform: translateX(4px); }

/* --- Primario: relleno dorado + anillo cónico animado alrededor --- */
.e-btn--gold {
  background: var(--e-grad-gold);
  background-size: 220% 100%;
  color: #14110A;
  box-shadow: 0 10px 30px rgba(201, 169, 97, .26);
  animation: e-gold-pan 7s var(--e-ease-soft) infinite;
}

.e-btn--gold:hover {
  box-shadow: 0 16px 44px rgba(201, 169, 97, .42);
  color: #0F0D07;
}

@keyframes e-gold-pan {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Barrido de brillo al pasar el ratón */
.e-btn--gold::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.62) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .85s var(--e-ease);
  pointer-events: none;
}

.e-btn--gold:hover::after { transform: translateX(130%); }

/* Anillo exterior que gira. Envolver el botón en .e-cta-ring lo activa. */
.e-cta-ring {
  position: relative;
  display: inline-block;
  border-radius: 999px;
  padding: 2px;
  isolation: isolate;
}

.e-cta-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--e-angle),
    rgba(201,169,97,0) 0deg,
    rgba(232,213,163,.95) 55deg,
    rgba(255,246,223,1) 90deg,
    rgba(201,169,97,.9) 130deg,
    rgba(201,169,97,0) 210deg,
    rgba(201,169,97,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: e-ring-spin 4.5s linear infinite;
  z-index: -1;
}

/* Halo difuso detrás del anillo */
.e-cta-ring::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: conic-gradient(from var(--e-angle), transparent 0deg, rgba(201,169,97,.55) 90deg, transparent 200deg);
  filter: blur(14px);
  opacity: .55;
  animation: e-ring-spin 4.5s linear infinite;
  z-index: -2;
  pointer-events: none;
}

@keyframes e-ring-spin {
  to { --e-angle: 360deg; }
}

/* --- Fantasma: borde cónico animado, fondo transparente --- */
.e-btn--ghost {
  background: rgba(255, 255, 255, .03);
  color: var(--e-on-dark);
  backdrop-filter: blur(8px);
}

.e-btn--ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--e-angle),
    rgba(201,169,97,.25) 0deg,
    rgba(232,213,163,.95) 70deg,
    rgba(201,169,97,.25) 150deg,
    rgba(201,169,97,.25) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: e-ring-spin 6s linear infinite;
  z-index: -1;
}

.e-btn--ghost:hover {
  background: rgba(201, 169, 97, .10);
  color: var(--e-gold-light);
}

/* Fallback si @property no está soportado: borde dorado estático, sin giro. */
@supports not (background: conic-gradient(from var(--e-angle), red, blue)) {
  .e-cta-ring::before,
  .e-btn--ghost::before { background: var(--e-grad-gold); animation: none; }
  .e-cta-ring::after { display: none; }
}

/* --- Sobre fondo claro --- */
.e-section--light .e-btn--ghost,
.e-section--ivory2 .e-btn--ghost { color: var(--e-ink); background: rgba(0,0,0,.02); }

.e-btn--sm { --e-btn-pad-y: .7rem; --e-btn-pad-x: 1.4rem; font-size: .74rem; }

/* Enlace con subrayado que crece */
.e-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--e-gold-light);
  padding-bottom: 3px;
}

.e-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(.28);
  transform-origin: left;
  transition: transform .5s var(--e-ease);
}

.e-link:hover::after { transform: scaleX(1); }
.e-link .e-icon { transition: transform .4s var(--e-ease); }
.e-link:hover .e-icon { transform: translateX(5px); }

/* -------------------------------------------------------------------------
   6. Badges
   ---------------------------------------------------------------------- */

.e-badge {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  display: inline-block;
  padding: .34rem .7rem;
  border-radius: 999px;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
  backdrop-filter: blur(6px);
}

.e-badge--alcohol {
  background: rgba(11, 11, 13, .78);
  color: var(--e-gold-light);
  border: 1px solid var(--e-line-dark);
}

.e-badge--sale {
  top: auto;
  bottom: 12px;
  left: 12px;
  background: var(--e-grad-gold);
  color: #14110A;
  border: 0;
}

/* -------------------------------------------------------------------------
   7. Header
   ---------------------------------------------------------------------- */

.e-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--e-header-h);
  display: flex;
  align-items: center;
  transition: background .45s var(--e-ease-soft), backdrop-filter .45s var(--e-ease-soft), box-shadow .45s var(--e-ease-soft), height .45s var(--e-ease-soft);
}

.e-header__inner {
  width: min(100% - 2.5rem, var(--e-max));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Fondo del header sólo cuando se hace scroll: sobre el hero flota limpio. */
.e-header.is-stuck {
  background: rgba(11, 11, 13, .82);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 var(--e-line-dark), 0 10px 30px rgba(0,0,0,.35);
}

/* Fuera de la home no hay hero oscuro: el header necesita fondo desde el inicio. */
body:not(.emilis-home) .e-header {
  background: rgba(11, 11, 13, .94);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 var(--e-line-dark);
}

body:not(.emilis-home) .e-site-main { padding-top: var(--e-header-h); }

.e-logo {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  color: var(--e-on-dark);
}

.e-logo__name {
  font-family: var(--e-font-display);
  font-size: clamp(1.18rem, 1rem + .8vw, 1.5rem);
  font-weight: 500;
  letter-spacing: .05em;
  white-space: nowrap;
}

.e-logo__tag {
  font-size: clamp(.46rem, .42rem + .12vw, .53rem);
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--e-gold);
  margin-top: 3px;
  white-space: nowrap;
}

.e-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.1rem); }

.e-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.e-nav a {
  position: relative;
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(242, 239, 233, .78);
  padding: .4rem 0;
  transition: color .3s var(--e-ease-soft);
}

.e-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--e-grad-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--e-ease);
}

.e-nav a:hover { color: var(--e-gold-light); }
.e-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.e-header__actions { display: flex; align-items: center; gap: 1rem; }

.e-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: rgba(242, 239, 233, .82);
  text-decoration: none;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .3s var(--e-ease-soft);
}

.e-cart:hover { color: var(--e-gold-light); }

.e-cart__count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  border-radius: 999px;
  background: var(--e-grad-gold);
  color: #14110A;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: 0;
}

/* Botón hamburguesa */
.e-burger {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--e-line-dark);
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  cursor: pointer;
  place-items: center;
}

.e-burger span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--e-on-dark);
  border-radius: 2px;
  transition: transform .4s var(--e-ease), opacity .25s var(--e-ease-soft);
}

.e-burger span + span { margin-top: 4px; }

.e-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.e-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.e-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Panel móvil */
.e-mobile-nav {
  position: fixed;
  inset: var(--e-header-h) 0 0 0;
  z-index: 99;
  background: rgba(11, 11, 13, .97);
  backdrop-filter: blur(20px);
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--e-ease-soft), transform .4s var(--e-ease), visibility .4s;
  overflow-y: auto;
}

.e-mobile-nav.is-open { opacity: 1; transform: none; visibility: visible; }

.e-mobile-nav ul { list-style: none; margin: 0; padding: 0; }

.e-mobile-nav a {
  display: block;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(201,169,97,.12);
  font-family: var(--e-font-display);
  font-size: 1.6rem;
  color: var(--e-on-dark);
  text-decoration: none;
}

.e-mobile-nav a:hover { color: var(--e-gold-light); }

@media (max-width: 900px) {
  .e-nav--desktop { display: none; }
  .e-burger { display: grid; }
  .e-cart span:not(.e-cart__count) { display: none; }
}

/* -------------------------------------------------------------------------
   8. Footer
   ---------------------------------------------------------------------- */

.e-footer {
  position: relative;
  background: var(--e-onyx);
  color: var(--e-on-dark);
  padding-block: clamp(3.5rem, 2rem + 5vw, 6rem) 0;
  overflow: hidden;
}

.e-footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--e-gold), transparent);
  opacity: .55;
}

.e-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}

.e-footer__col h4 {
  font-family: var(--e-font-body);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--e-gold);
  margin-bottom: 1.2rem;
}

.e-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }

.e-footer__col a {
  font-size: .88rem;
  color: var(--e-on-dark-mut);
  text-decoration: none;
  transition: color .3s var(--e-ease-soft);
}

.e-footer__col a:hover { color: var(--e-gold-light); }

.e-footer__about p { font-size: .9rem; color: var(--e-on-dark-mut); max-width: 34ch; font-weight: 300; }

.e-footer__note {
  margin-top: 1.4rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--e-line-dark);
  border-radius: var(--e-radius);
  background: var(--e-grad-panel);
  font-size: .78rem;
  color: var(--e-on-dark-mut);
}

.e-footer__note strong { color: var(--e-gold-light); font-weight: 500; }

.e-footer__bottom {
  margin-top: clamp(2.5rem, 4vw, 4rem);
  padding-block: 1.6rem;
  border-top: 1px solid rgba(201,169,97,.12);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: .76rem;
  color: var(--e-on-dark-fai);
}

.e-footer__pay { display: flex; flex-wrap: wrap; gap: .5rem; }

.e-footer__pay span {
  padding: .34rem .7rem;
  border: 1px solid rgba(201,169,97,.22);
  border-radius: 999px;
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--e-on-dark-mut);
}

@media (max-width: 880px) {
  .e-footer__grid { grid-template-columns: 1fr 1fr; }
  .e-footer__about { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .e-footer__grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   8b. Botón "subir" de Astra
   Astra lo pinta con su azul por defecto vía CSS dinámico en línea. En vez de
   desactivarlo (es útil en una página larga) lo vestimos con la paleta.
   ---------------------------------------------------------------------- */

body.emilis #ast-scroll-top {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  inset: auto 24px 24px auto;
  border-radius: 50%;
  border: 1px solid rgba(201, 169, 97, .5);
  background: var(--e-grad-gold) !important;
  background-size: 220% 100%;
  color: #14110A !important;
  box-shadow: 0 10px 30px rgba(201, 169, 97, .32);
  transition: transform .35s var(--e-ease), box-shadow .35s var(--e-ease);
}

body.emilis #ast-scroll-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(201, 169, 97, .48);
}

body.emilis #ast-scroll-top svg { fill: currentColor; width: 15px; height: 15px; }

@media (max-width: 640px) {
  body.emilis #ast-scroll-top { inset: auto 14px 14px auto; width: 40px; height: 40px; }
}

/* -------------------------------------------------------------------------
   8c. Página 404
   ---------------------------------------------------------------------- */

.e-404 {
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(100svh - var(--e-header-h));
  padding-block: clamp(4rem, 8vw, 7rem);
  background: var(--e-onyx);
  color: var(--e-on-dark);
  overflow: hidden;
  isolation: isolate;
}

.e-404__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 70% at 50% 30%, rgba(201, 169, 97, .18) 0%, transparent 65%);
  animation: e-breathe 15s var(--e-ease-soft) infinite;
}

.e-404__title {
  font-size: clamp(2.4rem, 1.7rem + 3vw, 4.6rem);
  margin-bottom: 1rem;
}

.e-404__title .e-gold-text { font-style: italic; display: block; }

.e-404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
  margin-block: 2.2rem 2.6rem;
}

.e-404__search {
  display: flex;
  gap: .5rem;
  max-width: 480px;
  margin-inline: auto;
}

.e-404__search input {
  flex: 1;
  padding: .9rem 1.2rem;
  border: 1px solid var(--e-line-dark);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--e-on-dark);
  font-family: var(--e-font-body);
  font-size: .92rem;
}

.e-404__search input::placeholder { color: var(--e-on-dark-fai); }

.e-404__search button {
  padding: .9rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--e-grad-gold);
  color: #14110A;
  font-family: var(--e-font-body);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 480px) {
  .e-404__actions { flex-direction: column; }
  .e-404__actions .e-cta-ring, .e-404__actions .e-btn { width: 100%; }
}

/* -------------------------------------------------------------------------
   8c-bis. Páginas de contenido (legales, sobre nosotros)
   ---------------------------------------------------------------------- */

.e-page__head {
  position: relative;
  padding-block: clamp(6.5rem, 5rem + 8vw, 9rem) clamp(2.5rem, 4vw, 4rem);
  background: var(--e-onyx);
  color: var(--e-on-dark);
  overflow: hidden;
  isolation: isolate;
}

.e-page__head-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 90% at 50% 0%, rgba(201, 169, 97, .16) 0%, transparent 62%);
}

.e-page__title { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.8rem); margin: .5rem 0 0; }

/* Prosa */
.e-prose { max-width: 68ch; margin-inline: auto; }

.e-prose h2 {
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
  margin: 2.2rem 0 .8rem;
  color: var(--e-ink);
}

.e-prose h2:first-child { margin-top: 0; }

.e-prose p,
.e-prose li {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--e-ink-soft);
}

.e-prose a { color: var(--e-gold-deep); font-weight: 400; }
.e-prose strong { color: var(--e-ink); font-weight: 600; }

.e-prose ul { padding-left: 1.2rem; margin: 0 0 1.2rem; }
.e-prose li { margin-bottom: .5rem; }

.e-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0 1.8rem;
  font-size: .92rem;
}

.e-prose th,
.e-prose td {
  text-align: left;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--e-line-light);
}

.e-prose th {
  font-family: var(--e-font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--e-gold-deep);
}

.e-legal-note {
  padding: .9rem 1.1rem;
  border-left: 3px solid var(--e-gold);
  background: rgba(201, 169, 97, .08);
  border-radius: 0 var(--e-radius) var(--e-radius) 0;
  font-size: .9rem;
}

/* -------------------------------------------------------------------------
   8d. Banner de cookies
   ---------------------------------------------------------------------- */

.e-cookies {
  position: fixed;
  z-index: 150;
  inset: auto 0 0 0;
  padding: clamp(.9rem, 2vw, 1.2rem);
  transform: translateY(120%);
  transition: transform .5s var(--e-ease);
  pointer-events: none;
}

.e-cookies.is-visible { transform: none; }

.e-cookies__inner {
  pointer-events: auto;
  width: min(100% - 1rem, var(--e-max));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid var(--e-line-dark);
  border-radius: var(--e-radius-lg);
  background: rgba(19, 19, 22, .96);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--e-shadow-lg);
}

.e-cookies__text p {
  margin: 0;
  font-size: .84rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--e-on-dark-mut);
}

.e-cookies__text strong { color: var(--e-on-dark); font-weight: 500; }
.e-cookies__text a { color: var(--e-gold-light); text-underline-offset: 2px; }

.e-cookies__actions {
  display: flex;
  gap: .6rem;
  flex: none;
}

@media (max-width: 720px) {
  .e-cookies__inner { flex-direction: column; align-items: stretch; text-align: center; }
  .e-cookies__actions { justify-content: center; }
  .e-cookies__actions .e-btn { flex: 1; }
}

/* -------------------------------------------------------------------------
   8e. Mega menú
   ---------------------------------------------------------------------- */

/* El item que dispara el mega menú */
.e-nav__item--mega { position: static; } /* el panel se ancla al header, no al item */

/* El item del mega y los <a> vecinos se alinean en su centro vertical. */
.e-nav__list { align-items: center; }

.e-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: none;
  border: 0;
  /* Mismo padding y line-height que los .e-nav a para que el texto quede a la
     misma altura que el resto de pestañas. */
  padding: .4rem 0;
  line-height: 1.65;
  cursor: pointer;
  font-family: var(--e-font-body);
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, .78);
  transition: color .3s var(--e-ease-soft);
}

.e-nav__trigger:hover,
.e-nav__item--mega:hover .e-nav__trigger,
.e-nav__item--mega[data-open="true"] .e-nav__trigger { color: var(--e-gold-light); }

/* Astra pinta un fondo azul de foco en los <button>; lo anulamos. */
.e-nav__trigger:focus,
.e-nav__trigger:focus-visible { background: none; box-shadow: none; }

.e-nav__trigger svg {
  width: 11px; height: 11px;
  transition: transform .4s var(--e-ease);
}

.e-nav__item--mega:hover .e-nav__trigger svg,
.e-nav__item--mega[data-open="true"] .e-nav__trigger svg { transform: rotate(180deg); }

/* El panel: ancho completo bajo el header */
.e-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 90;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .4s var(--e-ease-soft), transform .4s var(--e-ease), visibility .4s;
  background: rgba(11, 11, 13, .97);
  backdrop-filter: blur(22px) saturate(140%);
  border-top: 1px solid var(--e-line-dark);
  border-bottom: 1px solid var(--e-line-dark);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
}

.e-nav__item--mega:hover .e-mega,
.e-nav__item--mega[data-open="true"] .e-mega {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Franja dorada superior animada */
.e-mega::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--e-grad-gold);
  background-size: 200% 100%;
  animation: e-gold-pan 6s var(--e-ease-soft) infinite;
}

.e-mega__inner {
  width: min(100% - 2.5rem, var(--e-max));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.2fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.8rem, 3vw, 2.6rem) 0;
}

.e-mega__col h3 {
  font-family: var(--e-font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--e-gold);
  margin: 0 0 1.1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--e-line-dark);
}

.e-mega__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }

.e-mega__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: .55rem .7rem;
  margin-inline: -.7rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background .3s var(--e-ease-soft), transform .3s var(--e-ease);
}

.e-mega__link:hover { background: var(--e-gold-ghost); transform: translateX(3px); }

.e-mega__link-name {
  font-family: var(--e-font-display);
  font-size: 1.18rem;
  font-weight: 500;
  color: var(--e-on-dark);
}

.e-mega__link:hover .e-mega__link-name { color: var(--e-gold-light); }

.e-mega__link-note {
  font-size: .72rem;
  font-weight: 300;
  color: var(--e-on-dark-fai);
}

/* Tarjeta promocional del mega menú */
.e-mega__promo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 220px;
  padding: 1.4rem;
  border-radius: var(--e-radius-lg);
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  border: 1px solid var(--e-line-dark);
}

.e-mega__promo-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(201, 169, 97, .3) 0%, transparent 60%),
    var(--e-onyx-3);
  transition: transform .8s var(--e-ease);
}

.e-mega__promo:hover .e-mega__promo-bg { transform: scale(1.06); }

.e-mega__promo-eyebrow {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--e-gold);
  margin-bottom: .5rem;
}

.e-mega__promo-title {
  font-family: var(--e-font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--e-on-dark);
  margin: 0 0 .3rem;
  line-height: 1.1;
}

.e-mega__promo-text { font-size: .8rem; font-weight: 300; color: var(--e-on-dark-mut); margin: 0 0 1rem; }

.e-mega__promo-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--e-gold-light);
}

.e-mega__promo-cta svg { transition: transform .4s var(--e-ease); }
.e-mega__promo:hover .e-mega__promo-cta svg { transform: translateX(4px); }

/* En pantallas medianas el mega menú desaparece (se usa el menú móvil). */
@media (max-width: 900px) {
  .e-mega { display: none; }
}

/* --- Neutralizar los estilos de Astra dentro del mega menú ---
   Astra aplica padding, text-transform:uppercase, letter-spacing y su fuente a
   TODOS los <a> del <nav>, pisando el diseño del mega. Se restauran aquí con la
   especificidad de .e-header por delante. */
.e-header .e-mega a {
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.3;
}

/* Padding con !important porque los selectores de anchor de Astra dentro del
   nav son muy específicos y sin esto pisan el del mega (texto pegado al borde). */
.e-header .e-mega__link { padding: .55rem .7rem !important; }
.e-header .e-mega__promo { padding: 1.4rem !important; }

.e-header .e-mega__link-name,
.e-header .e-mega__promo-title {
  font-family: var(--e-font-display);
  text-transform: none;
  letter-spacing: -0.01em;
}

.e-header .e-mega__promo-eyebrow,
.e-header .e-mega__promo-cta,
.e-header .e-mega__col h3 {
  text-transform: uppercase; /* estos sí van en mayúsculas, a propósito */
}

.e-header .e-mega__promo-eyebrow { letter-spacing: .2em; }
.e-header .e-mega__promo-cta { letter-spacing: .14em; }
.e-header .e-mega__col h3 { letter-spacing: .22em; }
.e-header .e-mega__link-note { letter-spacing: normal; text-transform: none; }

/* -------------------------------------------------------------------------
   9. Animaciones de entrada (scroll reveal)
   ---------------------------------------------------------------------- */

/* Sólo si el JS está vivo; si no, todo visible desde el principio. */
html.js .e-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--e-ease-soft), transform .8s var(--e-ease);
  transition-delay: var(--e-delay, 0ms);
  will-change: opacity, transform;
}

html.js .e-reveal.is-in { opacity: 1; transform: none; }

html.js .e-reveal--left  { transform: translateX(-30px); }
html.js .e-reveal--right { transform: translateX(30px); }
html.js .e-reveal--scale { transform: scale(.94); }
html.js .e-reveal--left.is-in,
html.js .e-reveal--right.is-in,
html.js .e-reveal--scale.is-in { transform: none; }

/* Línea que se dibuja al entrar en pantalla */
html.js .e-draw {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--e-ease);
}

html.js .e-draw.is-in { transform: scaleX(1); }

/* -------------------------------------------------------------------------
   10. Accesibilidad y motion
   ---------------------------------------------------------------------- */

.screen-reader-text,
.e-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;
}

.e-skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 200;
  padding: .8rem 1.4rem;
  background: var(--e-gold);
  color: #14110A;
  border-radius: 0 0 10px 10px;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top .3s var(--e-ease);
}

.e-skip-link:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  html.js .e-reveal,
  html.js .e-draw {
    opacity: 1 !important;
    transform: none !important;
  }
}