/* =========================================================================
   EMILIS — home.css
   Secciones de la portada.
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. HERO
   Requisito: titular, texto, CTA y señales de confianza caben enteros en la
   primera pantalla móvil. Se usa 100svh (small viewport height) para que la
   barra de direcciones del navegador no tape el CTA al cargar.
   ---------------------------------------------------------------------- */

.e-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--e-header-h) + 1.5rem) 0 clamp(3rem, 8vh, 5rem);
  background: var(--e-onyx);
  color: var(--e-on-dark);
  overflow: clip;
  isolation: isolate;
}

/* --- Fondo --- */

.e-hero__bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; }

.e-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .55;
}

.e-hero__glow--1 {
  width: 62vmax; height: 62vmax;
  top: -26vmax; left: 50%;
  translate: -50% 0;
  background: radial-gradient(circle, rgba(201,169,97,.34) 0%, rgba(201,169,97,.10) 42%, transparent 68%);
  animation: e-breathe 14s var(--e-ease-soft) infinite;
}

.e-hero__glow--2 {
  width: 46vmax; height: 46vmax;
  bottom: -22vmax; right: -12vmax;
  background: radial-gradient(circle, rgba(168,135,63,.26) 0%, transparent 65%);
  animation: e-breathe 18s var(--e-ease-soft) infinite reverse;
}

@keyframes e-breathe {
  0%, 100% { transform: scale(1);    opacity: .48; }
  50%      { transform: scale(1.14); opacity: .70; }
}

/* =========================================================================
   FIRMA DEL HERO — "la gota"
   Una gota de attar cae, decelera y florece en el halo dorado detrás del
   titular; debajo, la estela (sillage) sube lenta. Es la única pieza audaz
   del hero: el resto se mantiene quieto y disciplinado.
   ====================================================================== */

/* Halo dorado detrás del titular: nace pequeño y "florece" justo cuando la
   gota aterriza (delay sincronizado), luego respira muy despacio. */
.e-hero__bloom {
  position: absolute;
  top: 40%; left: 50%;
  width: 72vmax; height: 72vmax;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(232,213,163,.30) 0%,
    rgba(201,169,97,.16) 30%,
    rgba(201,169,97,.05) 52%,
    transparent 70%);
  filter: blur(42px);
  opacity: 0;
  transform: scale(.2);
  animation: e-bloom 1.6s var(--e-ease) 1s forwards,
             e-breathe 15s var(--e-ease-soft) 2.6s infinite;
}

@keyframes e-bloom {
  0%   { opacity: 0;  transform: scale(.2); }
  60%  { opacity: .95; transform: scale(1.08); }
  100% { opacity: .6; transform: scale(1); }
}

/* La gota que cae y se funde en el bloom al impactar. */
.e-hero__drop {
  position: absolute;
  z-index: 0;
  top: 40%; left: 50%;
  width: 12px; height: 12px;
  translate: -50% -50%;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 38% 32%, #FFF6DF, #E8D5A3 42%, #C9A961 74%, #A8873F);
  box-shadow: 0 0 24px 7px rgba(232, 213, 163, .5);
  opacity: 0;
  animation: e-drop-fall 1.15s cubic-bezier(.55, 0, .78, .38) .15s forwards;
}

@keyframes e-drop-fall {
  0%   { opacity: 0; transform: translateY(-44vh) scaleY(1.5); }
  12%  { opacity: 1; }
  82%  { opacity: 1; transform: translateY(0) scaleY(1); }
  100% { opacity: 0; transform: translateY(2vh) scale(2.4); }
}

/* Sillage: el aroma subiendo. Tres cintas verticales difusas y lentas. */
.e-hero__sillage {
  position: absolute;
  bottom: 0; left: 50%;
  width: min(44vmax, 600px);
  height: 78%;
  translate: -50% 0;
  filter: blur(26px);
  opacity: .5;
  mix-blend-mode: screen;
}

.e-hero__sillage span {
  position: absolute;
  bottom: -8%;
  width: 3px;
  height: 60%;
  border-radius: 40%;
  background: linear-gradient(to top, transparent, rgba(201, 169, 97, .5), transparent);
  transform-origin: bottom center;
  animation: e-sillage 9s ease-in-out infinite;
}

.e-hero__sillage span:nth-child(1) { left: 41%; animation-delay: .2s; }
.e-hero__sillage span:nth-child(2) { left: 50%; animation-delay: 2.2s; height: 74%; }
.e-hero__sillage span:nth-child(3) { left: 59%; animation-delay: 4s; }

@keyframes e-sillage {
  0%   { opacity: 0;  transform: translateY(22%) scaleY(.7) skewX(0deg); }
  25%  { opacity: .7; }
  50%  { transform: translateY(-28%) scaleY(1.1) skewX(6deg); }
  75%  { opacity: .5; }
  100% { opacity: 0;  transform: translateY(-68%) scaleY(1.3) skewX(-5deg); }
}

/* Reducir movimiento: sin caída ni estela; el halo aparece ya florecido. */
@media (prefers-reduced-motion: reduce) {
  .e-hero__drop, .e-hero__sillage { display: none; }
  .e-hero__bloom { opacity: .6; transform: translate(-50%, -50%) scale(1); animation: none; }
}

.e-hero__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 40%, transparent 40%, rgba(11,11,13,.55) 78%, var(--e-onyx) 100%),
    linear-gradient(180deg, rgba(11,11,13,.65) 0%, transparent 22%, transparent 72%, var(--e-onyx) 100%);
}

/* --- Flacón de línea dorada --- */

.e-hero__flacon {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: clamp(240px, 34vh, 420px);
  translate: -50% -48%;
  opacity: .16;
  pointer-events: none;
  animation: e-float 9s var(--e-ease-soft) infinite;
}

.e-hero__flacon svg { width: 100%; height: auto; }

@keyframes e-float {
  0%, 100% { translate: -50% -48%; }
  50%      { translate: -50% -52%; }
}

/* --- Contenido --- */

.e-hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.e-hero__inner > * {
  opacity: 0;
  animation: e-rise .95s var(--e-ease) forwards;
}

.e-hero__eyebrow  { animation-delay: .12s; margin-bottom: clamp(.8rem, 2vh, 1.4rem); }
.e-hero__title    { animation-delay: .24s; }
.e-hero__lead     { animation-delay: .40s; }
.e-hero__actions  { animation-delay: .54s; }
.e-hero__trust    { animation-delay: .68s; }

@keyframes e-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.e-hero__title {
  font-size: clamp(2.4rem, 1.55rem + 3.6vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0 0 clamp(.9rem, 2.2vh, 1.5rem);
  font-weight: 500;
}

.e-hero__line { display: block; }
.e-hero__line.e-gold-text { font-style: italic; font-weight: 400; }

.e-hero__lead {
  font-size: clamp(.98rem, .90rem + .45vw, 1.2rem);
  font-weight: 300;
  line-height: 1.58;
  color: var(--e-on-dark-mut);
  max-width: 46ch;
  margin: 0 0 clamp(1.5rem, 3.4vh, 2.4rem);
}

.e-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .9rem;
  margin-bottom: clamp(1.6rem, 3.6vh, 2.6rem);
}

/* --- Señales de confianza --- */

.e-hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem clamp(1rem, 3vw, 2.2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.e-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--e-on-dark-mut);
  white-space: nowrap;
}

.e-hero__trust .e-icon { color: var(--e-gold); flex: none; }

/* --- Indicador de scroll --- */

.e-hero__cue {
  position: absolute;
  bottom: clamp(1rem, 3vh, 2rem);
  left: 50%;
  translate: -50% 0;
  z-index: 1;
  width: 26px;
  height: 44px;
  display: grid;
  place-items: start center;
  padding-top: 6px;
  border: 1px solid var(--e-line-dark);
  border-radius: 999px;
  opacity: 0;
  animation: e-rise .8s var(--e-ease) 1.1s forwards;
}

.e-hero__cue-line {
  width: 2px;
  height: 8px;
  border-radius: 2px;
  background: var(--e-gold);
  animation: e-cue 2.2s var(--e-ease-soft) infinite;
}

@keyframes e-cue {
  0%       { transform: translateY(0);    opacity: 0; }
  25%      { opacity: 1; }
  70%, 100%{ transform: translateY(18px); opacity: 0; }
}

/* Pantallas muy bajas (móvil apaisado, 360x640): comprimimos para no pasarnos. */
@media (max-height: 660px) {
  .e-hero__title { font-size: clamp(2rem, 1.2rem + 3.4vw, 3rem); }
  .e-hero__lead  { font-size: .92rem; margin-bottom: 1.2rem; }
  .e-hero__flacon { opacity: .10; }
  .e-hero__cue { display: none; }
}

@media (max-width: 420px) {
  .e-hero__actions { flex-direction: column; width: 100%; gap: .7rem; }
  .e-hero__actions .e-cta-ring,
  .e-hero__actions .e-btn { width: 100%; }
  .e-hero__trust li { font-size: .68rem; }
}

/* -------------------------------------------------------------------------
   2. MARQUEE DE MARCAS
   ---------------------------------------------------------------------- */

.e-marquee {
  background: var(--e-onyx);
  border-block: 1px solid rgba(201,169,97,.14);
  padding-block: 1.2rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.e-marquee__track {
  display: flex;
  width: max-content;
  animation: e-marquee 38s linear infinite;
}

.e-marquee:hover .e-marquee__track { animation-play-state: paused; }

.e-marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-right: clamp(2rem, 5vw, 4.5rem);
}

.e-marquee__group span {
  font-family: var(--e-font-display);
  font-size: clamp(1rem, .85rem + .6vw, 1.35rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, .34);
  white-space: nowrap;
  transition: color .4s var(--e-ease-soft);
}

.e-marquee__group span:hover { color: var(--e-gold); }

@keyframes e-marquee {
  to { transform: translateX(-50%); }
}

/* -------------------------------------------------------------------------
   3. TARJETAS "POR QUÉ EN ACEITE"
   ---------------------------------------------------------------------- */

.e-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e-gap);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.e-card {
  position: relative;
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  border: 1px solid var(--e-line-dark);
  border-radius: var(--e-radius-lg);
  background: var(--e-grad-panel);
  overflow: hidden;
  transition: transform .5s var(--e-ease), border-color .5s var(--e-ease-soft), background .5s var(--e-ease-soft);
}

/* Brillo que sigue al cursor. Las coordenadas las escribe premium.js. */
.e-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--e-mx, 50%) var(--e-my, 0%), rgba(201,169,97,.16), transparent 62%);
  opacity: 0;
  transition: opacity .45s var(--e-ease-soft);
  pointer-events: none;
}

.e-card:hover {
  transform: translateY(-5px);
  border-color: rgba(201,169,97,.42);
  background: linear-gradient(155deg, rgba(201,169,97,.16) 0%, rgba(201,169,97,.03) 55%, transparent 100%);
}

.e-card:hover::before { opacity: 1; }

.e-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.3rem;
  border-radius: 14px;
  border: 1px solid var(--e-line-dark);
  background: rgba(201,169,97,.08);
  color: var(--e-gold);
  transition: color .4s var(--e-ease-soft), border-color .4s var(--e-ease-soft);
}

.e-card:hover .e-card__icon { color: var(--e-gold-light); border-color: rgba(201,169,97,.5); }

.e-card h3 { font-size: 1.4rem; margin-bottom: .5rem; }
.e-card p  { font-size: .92rem; font-weight: 300; color: var(--e-on-dark-mut); margin: 0; }

/* -------------------------------------------------------------------------
   4. CABECERA DE SECCIÓN CON ENLACE
   ---------------------------------------------------------------------- */

.e-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}

.e-head-row h2 { margin: 0; }
.e-link--dark { color: var(--e-gold-deep); }

/* -------------------------------------------------------------------------
   5. FAMILIAS OLFATIVAS
   ---------------------------------------------------------------------- */

/* Flex centrado en vez de grid: con 5 cards, la fila incompleta se centra en
   lugar de dejar una card huérfana a la izquierda (el "4+1" feo). */
.e-families {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-gap);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.e-family {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Base pequeña para que las 5 quepan en una fila en escritorio; crecen para
     repartir el ancho. En pantallas menores envuelven y la fila incompleta
     se centra (justify-content del contenedor), sin la card huérfana a un lado. */
  flex: 1 1 180px;
  min-width: 180px;
  max-width: 280px;
  min-height: 290px;
  padding: clamp(1.6rem, 2.4vw, 2.1rem);
  border: 1px solid var(--e-line-dark);
  border-radius: var(--e-radius-lg);
  text-decoration: none;
  color: var(--e-on-dark);
  overflow: hidden;
  isolation: isolate;
  background: var(--e-onyx-3);
  transition: transform .55s var(--e-ease), border-color .5s var(--e-ease-soft);
}

.e-family:hover { transform: translateY(-6px); border-color: rgba(201,169,97,.5); }

/* Cada familia tiene su propio matiz dentro de la paleta ónix+oro. */
.e-family__glow {
  position: absolute;
  inset: -30% -20% auto -20%;
  height: 80%;
  z-index: -1;
  filter: blur(50px);
  opacity: .5;
  transition: opacity .6s var(--e-ease-soft), transform .8s var(--e-ease);
}

.e-family:hover .e-family__glow { opacity: .9; transform: scale(1.15); }

.e-family--oriental              .e-family__glow { background: radial-gradient(circle, rgba(168,135,63,.85), transparent 62%); }
.e-family--floral                .e-family__glow { background: radial-gradient(circle, rgba(214,166,150,.55), transparent 62%); }
.e-family--amaderada             .e-family__glow { background: radial-gradient(circle, rgba(122,124,102,.60), transparent 62%); }
.e-family--dulce                 .e-family__glow { background: radial-gradient(circle, rgba(201,169,97,.75), transparent 62%); }
.e-family--perfumes-con-feromonas .e-family__glow { background: radial-gradient(circle, rgba(150,90,120,.60), transparent 62%); }

.e-family__notes {
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--e-gold);
  margin-bottom: auto;
}

.e-family__name {
  font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem);
  margin: 1.8rem 0 .4rem;
}

.e-family__desc {
  font-size: .88rem;
  font-weight: 300;
  color: var(--e-on-dark-mut);
  margin: 0 0 1.2rem;
}

.e-family__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--e-gold-light);
}

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

/* -------------------------------------------------------------------------
   6. PANEL DE SETS (borde animado grande)
   ---------------------------------------------------------------------- */

.e-panel {
  position: relative;
  border-radius: clamp(18px, 2.5vw, 28px);
  padding: 2px;
  isolation: isolate;
  overflow: hidden;
}

.e-panel__border {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--e-angle),
    rgba(201,169,97,.12) 0deg,
    rgba(232,213,163,.9) 70deg,
    rgba(201,169,97,.12) 160deg,
    rgba(201,169,97,.12) 360deg);
  animation: e-ring-spin 9s linear infinite;
}

.e-panel__body {
  display: grid;
  grid-template-columns: 1.35fr .8fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 3.6rem);
  border-radius: inherit;
  background:
    radial-gradient(90% 130% at 12% 0%, rgba(201,169,97,.14) 0%, transparent 58%),
    var(--e-onyx-2);
}

.e-panel__body h2 { margin-bottom: .6rem; }
.e-panel__actions { margin-top: 1.8rem; }

.e-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .95rem;
}

.e-panel__list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .88rem;
  font-weight: 300;
  color: var(--e-on-dark-mut);
  padding-bottom: .95rem;
  border-bottom: 1px solid rgba(201,169,97,.12);
}

.e-panel__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.e-panel__list .e-icon { color: var(--e-gold); flex: none; margin-top: 2px; }

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

/* -------------------------------------------------------------------------
   7. PASOS DEL RITUAL
   ---------------------------------------------------------------------- */

.e-steps {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1.8rem, 3.5vw, 3rem);
  counter-reset: step;
}

.e-step { position: relative; padding-top: 2.2rem; }

.e-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--e-gold), rgba(201,169,97,.15));
}

.e-step__num {
  display: block;
  font-family: var(--e-font-display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--e-gold-deep);
  opacity: .7;
  margin-bottom: .8rem;
}

.e-step h3 { font-size: 1.45rem; margin-bottom: .5rem; }
.e-step p  { font-size: .92rem; font-weight: 300; color: var(--e-ink-soft); margin: 0; }

/* -------------------------------------------------------------------------
   8. FAQ
   ---------------------------------------------------------------------- */

.e-faq { margin-top: clamp(2.2rem, 4vw, 3.2rem); }

.e-faq__item {
  border-bottom: 1px solid rgba(201,169,97,.16);
}

.e-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--e-font-display);
  font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem);
  font-weight: 500;
  color: var(--e-on-dark);
  transition: color .3s var(--e-ease-soft);
}

.e-faq__item summary::-webkit-details-marker { display: none; }
.e-faq__item summary:hover { color: var(--e-gold-light); }

.e-faq__sign {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}

.e-faq__sign::before,
.e-faq__sign::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: var(--e-gold);
  transition: transform .45s var(--e-ease);
}

.e-faq__sign::after { transform: rotate(90deg); }
.e-faq__item[open] .e-faq__sign::after { transform: rotate(0deg); }

.e-faq__answer {
  padding-bottom: 1.4rem;
  max-width: 62ch;
  animation: e-faq-open .45s var(--e-ease);
}

.e-faq__answer p {
  margin: 0;
  font-size: .94rem;
  font-weight: 300;
  color: var(--e-on-dark-mut);
}

@keyframes e-faq-open {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   9. CTA FINAL
   ---------------------------------------------------------------------- */

.e-final {
  position: relative;
  padding-block: clamp(5rem, 10vw, 9rem);
  background: var(--e-onyx);
  color: var(--e-on-dark);
  overflow: hidden;
  isolation: isolate;
}

.e-final__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 100% at 50% 100%, rgba(201,169,97,.24) 0%, transparent 62%),
    radial-gradient(50% 70% at 50% 0%, rgba(168,135,63,.14) 0%, transparent 60%);
  animation: e-breathe 16s var(--e-ease-soft) infinite;
}

.e-final h2 { font-size: clamp(2.2rem, 1.6rem + 2.8vw, 4.2rem); margin-bottom: 1rem; }
.e-final .e-gold-text { font-style: italic; }
.e-final .e-lead { margin-bottom: 2.2rem; }