/* ════════════════════════════════════════════════════════════════════════
   AURA VELAS — home.css
   Estilos específicos de la landing (index.html).
   ════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── HERO (banner) ─────────────────────────────
   Una sola imagen de fondo que cubre, con el texto anclado en la esquina
   inferior izquierda y un botón "Compra aquí". Estilo Bath & Body Works. */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;        /* contenido abajo */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--c-ice);   /* color de respaldo si la imagen no carga */
  overflow: hidden;
}
/* Capa sólida semitransparente (sin degradado) para que el texto blanco se lea
   sobre la foto. */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(34, 28, 22, 0.38);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: var(--sp-6);
  padding-bottom: clamp(96px, 19vh, 190px);
}
.hero__copy {
  max-width: 640px;
  margin-left: clamp(16px, 4vw, 64px);
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.hero__title {
  max-width: 11ch;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 5.6vw, 5.4rem);
  margin-bottom: var(--sp-6);
  color: var(--c-text);         /* mismo color de título que las demás páginas (ciruela) */
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.hero__cta {
  align-self: flex-start;
  font-family: var(--font-button);
  font-weight: 600;
}

/* ───────────────── FEATURES (icono izquierda + texto, estilo profesional) ───────────────── */
/* La sección de features pega menos con lo de abajo: reduce su padding inferior. */
.section:has(.features-grid) { padding-bottom: var(--sp-6); }
/* La sección de destacados sube un poco: menos padding superior. */
.section:has(.destacados-head) { padding-top: var(--sp-6); }
/* El título de "Descubre algunas favoritas": aire moderado bajo el head. */
.destacados-head { margin-bottom: var(--sp-6); }

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.feature {
  display: flex;
  flex-direction: column;     /* icono ARRIBA, texto debajo */
  align-items: center;        /* todo centrado */
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  /* Contenedor blanco con borde, como las tarjetas de producto (sin hover). */
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}
/* Icono sólido, negro/ciruela, SIN fondo de color, centrado arriba. */
.feature__ico {
  display: inline-grid;
  place-items: center;
  color: var(--c-text);
}
.feature__ico svg { width: 40px; height: 40px; }
.feature__body { min-width: 0; }
.feature h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: var(--sp-2);
  line-height: 1.25;
}
.feature p { font-size: var(--fs-sm); color: var(--c-text-soft); line-height: 1.5; }

/* ───────────────────────────── COLECCIONES ───────────────────────────── */
.collections-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.collection-card {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--c-border);
  background: var(--c-ice);
}
.collection-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Sin efecto de zoom en la imagen al pasar el mouse (a petición) */
.collection-card__overlay {
  position: absolute;
  inset: 0;
  /* Capa SÓLIDA semitransparente (sin degradados) para que el texto blanco
     se lea sobre la imagen. */
  background: rgba(34, 28, 22, 0.45);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-5);
  color: #fff;
}
.collection-card__overlay h3 { color: #fff; font-size: var(--fs-xl); }
.collection-card__overlay p { font-size: var(--fs-sm); color: rgba(255,255,255,0.82); margin-top: 4px; }
.collection-card__overlay .link-cta {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-terra-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.collection-card:hover .link-cta .arrow { transform: translateX(3px); }
.link-cta .arrow { transition: transform var(--t-fast); }

/* ───────────────────────────── AROMAS ───────────────────────────── */
.aromas-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
}
.aroma-card {
  text-align: center;
  padding: var(--sp-6) var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  transition: background var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
/* Sin cambio de sombra ni elevación en el contenedor al pasar el mouse (a petición) */
.aroma-card__ico {
  display: inline-grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--r-round);
  background: var(--c-ice);
  color: var(--c-terra);
  margin: 0 auto var(--sp-3);
}
.aroma-card__ico svg { width: 28px; height: 28px; }
.aroma-card h3 { font-size: var(--fs-md); color: var(--c-text); }
.aroma-card p { font-size: var(--fs-xs); color: var(--c-text-soft); margin-top: 4px; }

/* ───────────────── CTA BAND (suave/aireado, como el footer) ───────────────── */
.cta-band {
  background: var(--c-ice);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-9) var(--sp-8);
  text-align: center;
  color: var(--c-text-soft);
  position: relative;
  overflow: hidden;
}
.cta-band h2 { color: var(--c-heading); font-size: var(--fs-3xl); margin-bottom: var(--sp-3); }
.cta-band p { color: var(--c-text-soft); max-width: 52ch; margin: 0 auto var(--sp-6); }
/* el botón de WhatsApp conserva su verde de acción */

/* ───────────────────────────── RESPONSIVE ───────────────────────────── */
@media (max-width: 980px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .collections-grid { grid-template-columns: repeat(2, 1fr); }
  .aromas-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .hero { min-height: 60vh; }
  .hero__inner { padding-bottom: clamp(120px, 24vh, 190px); }   /* sube el texto y el botón en móvil (a petición) */
  .hero__copy { margin-left: 10px; }
  .hero__title { max-width: 10ch; font-size: clamp(1.8rem, 8.5vw, 2.4rem); }   /* título del hero más pequeño en móvil (a petición) */

  /* Solo en móvil: las 4 cajas de features como CINTA CONTINUA (marquee),
     que se desliza sola hacia la izquierda de forma infinita, igual que el
     carrusel de clientes de Trixel. El JS duplica las tarjetas una vez. */
  .features-grid {
    display: flex;
    grid-template-columns: none;
    width: max-content;
    gap: var(--sp-4);
    will-change: transform;
    animation: features-marquee 22s linear infinite;
  }
  .features-grid .feature {
    flex: 0 0 auto;
    width: 80vw;                           /* una caja ocupa casi todo el ancho */
    max-width: 320px;
  }
  /* Pausa la cinta cuando el usuario la toca (deja leer con calma). */
  .features-grid:active { animation-play-state: paused; }
  /* La sección debe recortar el desbordamiento de la cinta. */
  .section:has(.features-grid) > .container { overflow: hidden; }
}
@keyframes features-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }   /* -50% = ancho de un juego (el otro es copia) */
}
@media (max-width: 640px) {
  /* (cierre reabierto para no romper el bloque; reglas móviles siguen abajo) */
  .collections-grid { grid-template-columns: 1fr; }
  .aromas-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-band { padding: var(--sp-8) var(--sp-5); }
}

/* ════════════════════════════════════════════════════════════════════════
   CHELSEA — multicolor festivo (overrides con la paleta del logo)
   ════════════════════════════════════════════════════════════════════════ */

/* (Los iconos de features ya NO llevan fondo de color: son sólidos en --c-text.) */

/* Tarjetas de aroma (sección clara): cada icono un color del logo */
.aromas-grid .aroma-card:nth-child(1) .aroma-card__ico { background: rgba(240,138,110,0.16); color: var(--c-coral); }
.aromas-grid .aroma-card:nth-child(2) .aroma-card__ico { background: rgba(200,74,135,0.14);  color: var(--c-terra); }
.aromas-grid .aroma-card:nth-child(3) .aroma-card__ico { background: rgba(217,168,92,0.18);  color: var(--c-gold); }
.aromas-grid .aroma-card:nth-child(4) .aroma-card__ico { background: rgba(242,210,122,0.22); color: #C99A2E; }
.aromas-grid .aroma-card:nth-child(5) .aroma-card__ico { background: rgba(111,201,181,0.18); color: var(--c-turq); }
.aroma-card:hover .aroma-card__ico { animation: wiggle 0.5s ease; }

/* (La banda CTA ahora es clara/suave; definida más arriba.) */

/* ── Decoraciones 2D flotantes del hero: VELAS con llama animada ── */
.deco-candle-1 { top: 12%;  right: 3%;  width: 46px; height: 62px; opacity: 0.95; }
.deco-candle-2 { bottom: 9%; left: 45%;   width: 40px; height: 54px; opacity: 0.92; }
/* La llama (grupo .deco-flame dentro del SVG de la vela) parpadea */
.deco-flame { transform-origin: center 30%; animation: flame-flicker 1.5s ease-in-out infinite; }
.deco-candle-2 .deco-flame { animation-duration: 1.8s; }
.deco-spark-1 { top: 10%;  right: 8%;  width: 28px; height: 28px; animation: sparkle 3s ease-in-out infinite; }
.deco-spark-2 { top: 44%;  left: 1%;   width: 20px; height: 20px; animation: sparkle 2.4s ease-in-out infinite 0.6s; }
.deco-spark-3 { bottom: 20%; right: 4%; width: 24px; height: 24px; animation: sparkle 2.8s ease-in-out infinite 1s; }

@media (max-width: 980px) {
  .deco-candle-2, .deco-spark-2 { display: none; }
}
@media (max-width: 600px) {
  .deco-candle-1 { width: 34px; height: 46px; top: 8%; }
  .deco-spark-1, .deco-spark-3 { width: 18px; height: 18px; }
}

/* Encabezado centrado (sección de velas destacadas del index) */
.section__head--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/* Título de destacados: centrado, ancho completo y en UNA sola línea. */
.destacados-head {
  max-width: none;
}
.destacados-head h2 {
  white-space: nowrap;
}
/* En pantallas chicas sí puede partirse para que no se desborde. */
@media (max-width: 600px) {
  .destacados-head h2 { white-space: normal; }
}

/* ════════════════════════════════════════════════════════════════════════
   SOLO INDEX: sin efectos de transición (reveal). Todos los elementos se
   muestran al instante, sin deslizarse ni desvanecerse al hacer scroll.
   ════════════════════════════════════════════════════════════════════════ */
body[data-nav="home"] [data-reveal][data-reveal-dir] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ═══════════════════════ TESTIMONIOS (carrusel index) ═══════════════════════ */
.section--testimonios { background: var(--c-ice); }
.testimonios { max-width: 1040px; margin: var(--sp-6) auto 0; }

/* Escenario: 3 tarjetas (peek izq + central grande + peek der), centradas.
   El overflow-x oculto recorta las laterales para el efecto carrusel. */
.tm-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  overflow: hidden;
  padding: var(--sp-2) 0;
}
.tm-slide { flex-shrink: 0; transition: transform var(--t-base), opacity var(--t-base); }

/* Tarjeta central: grande, al frente. */
.tm-slide--center { width: min(560px, 86%); z-index: 2; }

/* Tarjetas laterales: más chicas, atenuadas, detrás; recortadas por el overflow. */
.tm-slide--prev,
.tm-slide--next {
  width: min(560px, 86%);
  transform: scale(0.85);
  opacity: 0.6;
  cursor: pointer;
  z-index: 1;
  /* Se "meten" hacia el centro; menos margen negativo = asoman MÁS. */
  margin: 0 calc(-1 * min(300px, 44%));
}
.tm-slide--prev:hover,
.tm-slide--next:hover { opacity: 0.85; }

.tm-stage.is-anim .tm-slide { animation: tm-fade var(--t-base) ease; }

@media (max-width: 720px) {
  /* En móvil solo la central; las laterales se ocultan (no hay espacio). */
  .tm-slide--prev, .tm-slide--next { display: none; }
  .tm-slide--center { width: 100%; }
}
@keyframes tm-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.tm-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-7) var(--sp-6);
}
.tm__quote { width: 34px; height: 34px; color: var(--c-terra-soft); margin-bottom: var(--sp-3); }
.tm-card__text {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--c-text);
  margin: 0 0 var(--sp-4);
  max-width: 50ch;
}
.tm-card__stars { display: inline-flex; gap: 2px; margin-bottom: var(--sp-4); }
.tm-card__stars .star { width: 18px; height: 18px; }
.tm-card__prod {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
}
.tm-card__thumb {
  width: 48px; height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-ice);
  flex-shrink: 0;
  border: 1px solid var(--c-border);
}
.tm-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tm-card__meta { display: flex; flex-direction: column; text-align: left; }
.tm-card__autor { font-weight: 700; color: var(--c-text); font-size: var(--fs-sm); }
.tm-card__prod-name { font-size: var(--fs-xs); color: var(--c-text-soft); }
.tm-card__prod:hover .tm-card__prod-name { color: var(--c-terra-dark); }

/* Puntos de navegación. */
.tm-dots {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.tm-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid var(--c-terra-soft);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background var(--t-fast), transform var(--t-fast);
}
.tm-dot:hover { background: var(--c-terra-soft); }
.tm-dot.is-active { background: var(--c-terra); border-color: var(--c-terra); transform: scale(1.15); }

/* ── Opiniones en MÓVIL: cinta continua (marquee), como el carrusel de Trixel ── */
.tm-marquee { width: 100%; overflow: hidden; }
.tm-marquee__track {
  display: flex;
  width: max-content;
  gap: var(--sp-4);
  will-change: transform;
  animation: tm-marquee 40s linear infinite;
}
.tm-marquee:active .tm-marquee__track { animation-play-state: paused; }
.tm-marquee__item {
  flex: 0 0 auto;
  width: 82vw;
  max-width: 340px;
}
@keyframes tm-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }   /* -50% = un juego de reseñas (el otro es copia) */
}

/* ───────────── Banda de envíos (debajo del hero) ───────────── */
.ship-band {
  background: var(--c-ice);          /* mismo color que el header */
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.ship-band__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 0;
  color: var(--c-text-soft);   /* mismo color que el texto de los menús del header */
}
.ship-band__ico { width: 24px; height: 24px; flex: 0 0 auto; color: var(--c-text-soft); }   /* camión en el color de los menús */
.ship-band__text {
  font-family: var(--font-nav);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}
@media (max-width: 480px) {
  .ship-band__inner { padding: 12px 16px; gap: 9px; }
  .ship-band__text { font-size: var(--fs-xs); text-align: center; }
}