/* ══ Portada ══════════════════════════════════════════════════════ */

/* ── Hero ────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: clamp(560px, 88vh, 900px);
  display: flex;
  align-items: center;
  background: var(--gradiente-crema);
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  right: -12%;
  top: -18%;
  width: 62vw;
  height: 62vw;
  max-width: 820px;
  max-height: 820px;
  background: radial-gradient(circle at 40% 40%, rgba(235, 203, 196, .55), rgba(234, 217, 193, .18) 55%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(3rem, 6vw, 5rem);
  width: min(100% - var(--gutter) * 2, var(--ancho));
  margin-inline: auto;
}
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__texto { order: 2; }
  .hero__escena { order: 1; }
  .hero .eyebrow { justify-content: center; }
}

.hero__titulo {
  font-size: var(--t-hero);
  line-height: .92;
  letter-spacing: -.02em;
  margin: 0 0 1.2rem;
}
.hero__titulo span { display: block; }
.hero__titulo .linea-2 { font-style: italic; color: var(--cafe); padding-left: .12em; }
.hero__titulo span {
  opacity: 0;
  transform: translateY(26px);
  animation: entrada-hero 900ms var(--curva) forwards;
}
.hero__titulo .linea-2 { animation-delay: 130ms; }
@keyframes entrada-hero { to { opacity: 1; transform: none; } }

.hero__sub {
  font-size: var(--t-sub);
  font-family: var(--serif);
  color: var(--texto-suave);
  max-width: 30ch;
  margin-bottom: 2rem;
  opacity: 0;
  animation: entrada-hero 900ms var(--curva) 260ms forwards;
}
@media (max-width: 900px) { .hero__sub { margin-inline: auto; } }
.hero__ctas {
  display: flex; flex-wrap: wrap; gap: .8rem;
  opacity: 0;
  animation: entrada-hero 900ms var(--curva) 380ms forwards;
}
@media (max-width: 900px) { .hero__ctas { justify-content: center; } }

.hero__pie {
  display: flex; flex-wrap: wrap; gap: 1.6rem;
  margin-top: 2.6rem;
  font-size: var(--t-micro);
  color: var(--texto-suave);
  opacity: 0;
  animation: entrada-hero 900ms var(--curva) 520ms forwards;
}
@media (max-width: 900px) { .hero__pie { justify-content: center; } }
.hero__pie strong { display: block; font-family: var(--serif); font-size: 1.35rem; color: var(--tinta); font-weight: 400; }

/* Composición del hero: frasco + elementos flotantes */
.hero__escena { position: relative; display: grid; place-items: center; min-height: 380px; }
.hero__frasco {
  width: min(78%, 420px);
  border-radius: var(--organica-1);
  box-shadow: var(--sombra-alta);
  transition: transform 700ms var(--curva);
  will-change: transform;
}
.flotante {
  position: absolute;
  color: var(--dorado);
  opacity: .85;
  pointer-events: none;
  animation: flotar 7s ease-in-out infinite;
  transition: transform 900ms var(--curva);
}
.flotante svg { width: 100%; height: 100%; }
.flotante--1 { top: 6%; left: 4%; width: 46px; height: 46px; animation-delay: -1s; }
.flotante--2 { top: 22%; right: 2%; width: 30px; height: 30px; color: var(--rosa-empolvado); animation-delay: -3s; }
.flotante--3 { bottom: 14%; left: 0; width: 38px; height: 38px; color: var(--rosa-nude); animation-delay: -5s; }
.flotante--4 { bottom: 4%; right: 12%; width: 26px; height: 26px; animation-delay: -2s; }
@keyframes flotar {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(6deg); }
}

/* ── Categorías ──────────────────────────────────────────────────── */
.categorias {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}
@media (max-width: 980px) { .categorias { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .categorias { grid-template-columns: 1fr; } }

.categoria {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(300px, 34vw, 420px);
  padding: 1.6rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--marfil);
  isolation: isolate;
  transition: transform var(--medio) var(--curva), box-shadow var(--medio);
}
.categoria:hover { transform: translateY(-8px); box-shadow: var(--sombra-media); }
.categoria__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  object-fit: cover;
  width: 100%; height: 100%;
  transition: transform var(--lento) var(--curva);
}
.categoria:hover .categoria__fondo { transform: scale(1.06); }
.categoria::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255, 253, 252, 0) 30%, rgba(51, 42, 39, .55) 100%);
}
.categoria__forma {
  position: absolute;
  top: -18%; right: -22%;
  width: 62%; aspect-ratio: 1;
  z-index: -1;
  background: var(--acento, var(--rosa-nude));
  opacity: .5;
  border-radius: var(--organica-2);
  transition: transform var(--lento) var(--curva);
}
.categoria:hover .categoria__forma { transform: rotate(14deg) scale(1.1); }
.categoria__emoji { font-size: 1.5rem; margin-bottom: .3rem; }
.categoria h3 { color: var(--blanco); font-size: 1.7rem; margin-bottom: .2rem; }
.categoria p { color: rgba(255, 253, 252, .84); font-size: .85rem; margin: 0; }
.categoria__flecha {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1rem;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  color: var(--blanco);
}
.categoria__flecha svg { width: 15px; transition: transform var(--medio) var(--curva); }
.categoria:hover .categoria__flecha svg { transform: translateX(5px); }

/* ── Descubridor de esencia ──────────────────────────────────────── */
.descubridor {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--blanco);
  box-shadow: var(--sombra-media);
  overflow: hidden;
}
.descubridor__cabecera {
  padding: clamp(1.8rem, 4vw, 3rem) clamp(1.4rem, 4vw, 3rem) 0;
  text-align: center;
}
.descubridor__pasos {
  display: flex; justify-content: center; gap: .5rem;
  margin: 1.4rem 0 0;
}
.paso-punto {
  width: 30px; height: 3px;
  border-radius: var(--r-pill);
  background: var(--champagne);
  transition: background var(--medio), width var(--medio) var(--curva);
}
.paso-punto.activo { background: var(--gradiente-dorado); width: 46px; }
.paso-punto.hecho { background: var(--dorado-claro); }

.descubridor__cuerpo { padding: clamp(1.4rem, 4vw, 3rem); }
.descubridor__pregunta { text-align: center; font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 1.8rem; }
.opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .7rem;
  max-width: 760px;
  margin-inline: auto;
}
.opcion {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: 1.1rem .8rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background: var(--crema);
  cursor: pointer;
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--texto);
  transition: transform var(--rapido) var(--curva), border-color var(--rapido), background var(--rapido), box-shadow var(--rapido);
}
.opcion span:first-child { font-size: 1.5rem; }
.opcion:hover { transform: translateY(-3px); border-color: var(--dorado); box-shadow: var(--sombra-suave); }
.opcion[aria-pressed='true'] { background: var(--gradiente-nude); border-color: var(--rosa-empolvado); }
.descubridor__pie { display: flex; justify-content: center; gap: .8rem; margin-top: 1.8rem; }
.descubridor__resultado { text-align: center; }
.descubridor__resultado .grid-productos { margin-top: 2rem; text-align: left; }

/* ── Shop by mood ────────────────────────────────────────────────── */
.moods { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: 2.4rem; }
.mood {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.4rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-pill);
  background: var(--blanco);
  font-family: var(--sans);
  font-size: .85rem;
  cursor: pointer;
  transition: all var(--rapido) var(--curva);
}
.mood:hover { transform: translateY(-2px); border-color: var(--dorado); }
.mood[aria-pressed='true'] { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }

/* ── Carrusel ────────────────────────────────────────────────────── */
.carrusel { position: relative; }
.carrusel__pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--champagne) transparent;
}
.carrusel__pista > * { scroll-snap-align: start; }
.carrusel__pista::-webkit-scrollbar { height: 5px; }
.carrusel__pista::-webkit-scrollbar-thumb { background: var(--champagne); border-radius: var(--r-pill); }
@media (min-width: 1100px) { .carrusel__pista { grid-auto-columns: minmax(0, calc(25% - 1.2rem)); } }
.carrusel__controles { display: flex; gap: .5rem; }
.carrusel__btn {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--linea);
  border-radius: var(--r-pill);
  background: var(--blanco);
  cursor: pointer;
  color: var(--cafe);
  transition: background var(--rapido), transform var(--rapido);
}
.carrusel__btn:hover { background: var(--champagne); transform: translateY(-2px); }
.encabezado-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.encabezado-fila .encabezado-seccion { margin-bottom: 0; }

/* ── Promociones ─────────────────────────────────────────────────── */
.promos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
@media (max-width: 860px) { .promos { grid-template-columns: 1fr; } }
.promo {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--r-lg);
  background: var(--gradiente-crema);
  border: 1px solid var(--linea-suave);
  overflow: hidden;
  transition: transform var(--medio) var(--curva), box-shadow var(--medio);
}
.promo:hover { transform: translateY(-5px); box-shadow: var(--sombra-media); }
.promo::before {
  content: '';
  position: absolute;
  inset: auto -30% -60% auto;
  width: 70%; aspect-ratio: 1;
  background: var(--gradiente-nude);
  opacity: .55;
  border-radius: var(--organica-1);
}
.promo > * { position: relative; }
.promo__tag {
  display: inline-block;
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  color: var(--dorado);
  margin-bottom: .8rem;
}
.promo h3 { font-size: 1.9rem; margin-bottom: .3rem; }
.promo p { color: var(--texto-suave); font-size: .9rem; }

/* ── Camillea Girls ──────────────────────────────────────────────── */
.social-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .6rem;
}
@media (max-width: 900px) { .social-grid { grid-template-columns: repeat(3, 1fr); } }
.social-grid a {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--marfil);
}
.social-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--lento) var(--curva); }
.social-grid a:hover img { transform: scale(1.08); }
.social-grid a::after {
  content: '♡';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(51, 42, 39, .35);
  color: var(--crema);
  font-size: 1.6rem;
  opacity: 0;
  transition: opacity var(--medio);
}
.social-grid a:hover::after { opacity: 1; }

/* ── Newsletter ──────────────────────────────────────────────────── */
.newsletter {
  position: relative;
  padding: clamp(2.6rem, 6vw, 4.5rem);
  border-radius: var(--r-lg);
  background: var(--tinta);
  color: var(--crema);
  text-align: center;
  overflow: hidden;
}
.newsletter::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("/assets/monograma-oscuro.svg");
  background-size: 170px;
  opacity: .28;
}
.newsletter > * { position: relative; }
.newsletter h2 { color: var(--crema); }
.newsletter p { color: rgba(247, 240, 228, .72); max-width: 44ch; margin-inline: auto; }
.newsletter__form {
  display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center;
  max-width: 520px; margin: 1.8rem auto 0;
}
.newsletter__form input {
  flex: 1 1 240px;
  padding: .95rem 1.3rem;
  border: 1px solid rgba(247, 240, 228, .28);
  border-radius: var(--r-pill);
  background: rgba(255, 253, 252, .07);
  color: var(--crema);
  font-family: var(--sans);
}
.newsletter__form input::placeholder { color: rgba(247, 240, 228, .5); }
.newsletter__form input:focus { outline: none; border-color: var(--dorado-claro); }