/* =====================================================================
   PROFUMO — hoja de estilos única
   Paleta: hueso, tinta y bronce. Tipografía serif para el display.
   ===================================================================== */

:root {
  --hueso:      #faf8f5;
  --hueso-2:    #f2eee8;
  --tinta:      #17140f;
  --tinta-70:   #4a443c;
  --gris:       #857c70;
  --linea:      #e2dcd2;
  --bronce:     #9a7a4f;
  --bronce-cl:  #c2a678;
  --blanco:     #ffffff;
  --rojo:       #a4432f;
  --verde:      #4d6b52;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ancho: 1240px;
  --radio: 2px;
  --sombra: 0 1px 2px rgba(23,20,15,.04), 0 8px 30px rgba(23,20,15,.06);
  --trans: .28s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ─────────────────────────────────────────────────────────── */

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

* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--hueso);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; }

/* ── Tipografía ────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.5rem; }

.eyebrow {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bronce);
}

.lead { font-size: 1.05rem; color: var(--tinta-70); max-width: 56ch; }

.mut { color: var(--gris); }

/* ── Layout ────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 24px;
}

.seccion { padding-block: clamp(56px, 9vw, 110px); }

.seccion--tenue { background: var(--hueso-2); }

.cab-seccion {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}

.cab-seccion h2 { margin-top: 6px; }

/* ── Botones ───────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 30px;
  border: 1px solid var(--tinta);
  background: var(--tinta);
  color: var(--hueso);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: var(--radio);
  transition: background var(--trans), color var(--trans), border-color var(--trans), opacity var(--trans);
}

.btn:hover { background: var(--bronce); border-color: var(--bronce); color: #fff; }

.btn--linea { background: transparent; color: var(--tinta); }
.btn--linea:hover { background: var(--tinta); color: var(--hueso); border-color: var(--tinta); }

/* Sobre fondos oscuros (hero y banners) el botón sólido tiene que ser claro:
   el .btn normal es tinta sobre tinta y desaparece. */
.btn--luz { background: var(--hueso); color: var(--tinta); border-color: var(--hueso); }
.btn--luz:hover { background: var(--bronce); color: #fff; border-color: var(--bronce); }

.btn--claro { background: transparent; color: var(--hueso); border-color: rgba(250,248,245,.5); }
.btn--claro:hover { background: var(--hueso); color: var(--tinta); border-color: var(--hueso); }

.btn--full { width: 100%; }
.btn--sm { padding: 10px 20px; font-size: .68rem; }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .38;
  pointer-events: none;
}

.link-sub {
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 3px;
  transition: border-color var(--trans), color var(--trans);
  white-space: nowrap;
}
.link-sub:hover { color: var(--bronce); border-color: var(--bronce); }

/* ── Barra de anuncio (marquesina) ─────────────────────────────────── */

.anuncio {
  background: var(--tinta);
  color: var(--hueso);
  overflow: hidden;
  padding: 10px 0;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.anuncio__pista {
  display: inline-flex;
  width: max-content;
  animation: marquesina 38s linear infinite;
}

.anuncio__grupo {
  display: inline-flex;
  align-items: center;
  gap: 38px;
  padding-right: 38px;
}

.anuncio__punto { color: var(--bronce-cl); font-size: .6rem; }

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

@media (prefers-reduced-motion: reduce) {
  .anuncio__pista { animation: none; }
}

/* ── Encabezado ────────────────────────────────────────────────────── */

.cab {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250,248,245,.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}

.cab__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: 74px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-size: 1.7rem;
  letter-spacing: .14em;
  font-weight: 500;
  line-height: 1;
}

/* El isotipo hereda el color del texto: oscuro en la cabecera, claro en el pie. */
.logo svg {
  height: 34px;
  width: auto;
  flex: none;
}

.logo span {
  font-family: 'Bodoni Moda', 'Cormorant Garamond', serif;
  font-weight: 700;
  text-indent: .14em;
}

.nav { display: flex; gap: 30px; }

.nav a {
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-70);
  position: relative;
  padding-block: 4px;
  transition: color var(--trans);
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--bronce);
  transition: width var(--trans);
}

.nav a:hover, .nav a[aria-current] { color: var(--tinta); }
.nav a:hover::after, .nav a[aria-current]::after { width: 100%; }

.cab__acc { display: flex; align-items: center; gap: 18px; }

.carrito-btn { position: relative; display: flex; align-items: center; gap: 8px; }

.carrito-btn .contador {
  position: absolute;
  top: -7px; right: -11px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--bronce);
  color: #fff;
  border-radius: 999px;
  font-size: .63rem;
  font-weight: 600;
  display: grid;
  place-items: center;
}

.menu-btn { display: none; }

/* ── Hero ──────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: min(78vh, 680px);
  display: grid;
  align-items: center;
  background: var(--tinta);
  color: var(--hueso);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%; height: 100%;
  opacity: .5;
}

.hero__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(23,20,15,.92) 8%, rgba(23,20,15,.55) 55%, rgba(23,20,15,.25) 100%);
}

.hero__in { position: relative; padding-block: 90px; max-width: 620px; }

.hero h1 { margin: 16px 0 20px; color: var(--hueso); }

.hero p { color: rgba(250,248,245,.76); font-size: 1.05rem; max-width: 46ch; }

.hero__acc { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }

/* ── Franja de argumentos ──────────────────────────────────────────── */

/* Columnas fijas (4 → 2 → 1) en lugar de auto-fit: son exactamente cuatro
   items y con auto-fit sobraba una celda vacía pintada del color de la línea. */
.argumentos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--linea);
  border-block: 1px solid var(--linea);
}

.argumento {
  background: var(--hueso);
  padding: 34px 28px;
  text-align: center;
}

.argumento strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 5px;
}

.argumento span { font-size: .84rem; color: var(--gris); }

/* ── Grilla de productos ───────────────────────────────────────────── */

.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 40px 28px;
}

.card { position: relative; display: flex; flex-direction: column; }

.card__img {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--hueso-2);
  overflow: hidden;
  margin-bottom: 16px;
}

.card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,0,.2,1);
}

.card:hover .card__img img { transform: scale(1.05); }

.card__marca {
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 5px;
}

.card__nombre {
  font-family: var(--serif);
  font-size: 1.28rem;
  line-height: 1.2;
  margin-bottom: 4px;
}

.card__meta { font-size: .8rem; color: var(--gris); margin-bottom: 10px; }

.card__precio {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 1rem;
  margin-top: auto;
}

.card__precio del { color: var(--gris); font-size: .85rem; }

.card__acc { margin-top: 14px; }

/* Etiquetas sobre la imagen — se apilan si hay más de una */
.tags {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.tag {
  padding: 5px 11px;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--tinta);
  color: var(--hueso);
}

.tag--pedido { background: var(--bronce); }
.tag--oferta { background: var(--rojo); }
.tag--agotado { background: var(--gris); }
.tag--poco { background: var(--ambar, #b8860b); }

/* Sello de oferta — medallón elegante en la esquina superior derecha, así no
   se pisa con las etiquetas de la izquierda (a pedido / últimas unidades). */
.sello-oferta {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  width: 62px; height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--tinta);
  color: var(--hueso);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.sello-oferta::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--bronce);
  border-radius: 50%;
  pointer-events: none;
}
.sello-oferta span { position: relative; z-index: 1; line-height: 1.15; }

@media (max-width: 640px) {
  .sello-oferta { width: 52px; height: 52px; font-size: .5rem; top: 10px; right: 10px; }
}

.card--agotado .card__img img { filter: grayscale(1); opacity: .55; }

/* ── Banner publicitario ───────────────────────────────────────────── */

.banner {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 340px;
  background: var(--tinta);
  color: var(--hueso);
  overflow: hidden;
  text-align: center;
}

.banner img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .45;
}

.banner__in { position: relative; padding: 64px 24px; max-width: 640px; }

.banner h2 { color: var(--hueso); margin: 12px 0 14px; }

.banner p { color: rgba(250,248,245,.75); margin-bottom: 28px; }

.banner .eyebrow { color: var(--bronce-cl); }

/* Banner chico lateral / destacado */
.banner--chico { min-height: 240px; }

/* ── Filtros de catálogo ───────────────────────────────────────────── */

.filtros {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: 26px;
  margin-bottom: 38px;
  border-bottom: 1px solid var(--linea);
}

.filtros select, .filtros input[type="search"] {
  padding: 10px 14px;
  border: 1px solid var(--linea);
  background: var(--blanco);
  border-radius: var(--radio);
  font-size: .85rem;
  min-width: 160px;
}

.filtros input[type="search"] { flex: 1 1 220px; min-width: 200px; }

.filtros select:focus, .filtros input:focus { outline: 1px solid var(--bronce); border-color: var(--bronce); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }

.chip {
  padding: 8px 16px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--tinta-70);
  transition: all var(--trans);
}

.chip:hover { border-color: var(--tinta); }
.chip[aria-current] { background: var(--tinta); color: var(--hueso); border-color: var(--tinta); }

/* ── Ficha de producto ─────────────────────────────────────────────── */

.ficha {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.ficha__img {
  aspect-ratio: 4 / 5;
  background: var(--hueso-2);
  overflow: hidden;
  position: relative;
}

.ficha__img img { width: 100%; height: 100%; object-fit: cover; }

.miniaturas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.miniatura {
  padding: 0;
  border: 1px solid var(--linea);
  background: var(--hueso-2);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  transition: border-color var(--trans), opacity var(--trans);
  opacity: .68;
}

.miniatura img { width: 100%; height: 100%; object-fit: cover; }

.miniatura:hover { opacity: 1; }
.miniatura[aria-current="true"] { border-color: var(--tinta); opacity: 1; }

.ficha__info { padding-top: 8px; }

.ficha h1 { font-size: clamp(2.2rem, 4vw, 3.1rem); margin: 10px 0 14px; }

.ficha__precio {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 1.7rem;
  font-family: var(--serif);
  margin: 22px 0;
}

.ficha__precio del { font-size: 1.05rem; color: var(--gris); }

.datos {
  border-top: 1px solid var(--linea);
  margin-top: 30px;
  padding-top: 22px;
  display: grid;
  gap: 12px;
}

.dato { display: flex; justify-content: space-between; gap: 20px; font-size: .88rem; }
.dato dt { color: var(--gris); }
.dato dd { text-align: right; }

.estado-stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  letter-spacing: .06em;
}

.estado-stock::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.estado-stock.ok { color: var(--verde); }
.estado-stock.poco { color: var(--bronce); }
.estado-stock.pedido { color: var(--bronce); }
.estado-stock.agotado { color: var(--gris); }

.compra {
  display: flex;
  gap: 12px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.cant {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--linea);
  background: var(--blanco);
  border-radius: var(--radio);
}

.cant button { width: 42px; height: 48px; font-size: 1.1rem; color: var(--tinta-70); }
.cant button:hover { color: var(--bronce); }
.cant input {
  width: 46px; height: 48px;
  text-align: center;
  border: none;
  background: none;
  -moz-appearance: textfield;
}
.cant input::-webkit-outer-spin-button,
.cant input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.compra .btn { flex: 1 1 200px; }

/* ── Carrito ───────────────────────────────────────────────────────── */

.carrito-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: start;
}

.linea {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--linea);
  align-items: center;
}

.linea__img { aspect-ratio: 3/4; background: var(--hueso-2); overflow: hidden; }
.linea__img img { width: 100%; height: 100%; object-fit: cover; }

.linea__nombre { font-family: var(--serif); font-size: 1.15rem; }

.linea__acc { display: flex; align-items: center; gap: 16px; margin-top: 10px; }

.quitar { font-size: .74rem; color: var(--gris); text-decoration: underline; text-underline-offset: 3px; }
.quitar:hover { color: var(--rojo); }

.linea__total { font-size: 1.05rem; white-space: nowrap; }

.resumen {
  background: var(--blanco);
  border: 1px solid var(--linea);
  padding: 30px;
  position: sticky;
  top: 100px;
}

.resumen h3 { margin-bottom: 22px; }

.resumen__fila {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  font-size: .9rem;
}

.resumen__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--linea);
  margin-top: 14px;
  padding-top: 18px;
  margin-bottom: 22px;
  font-family: var(--serif);
  font-size: 1.5rem;
}

/* ── Formularios ───────────────────────────────────────────────────── */

.campo { margin-bottom: 20px; }

.campo label {
  display: block;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 8px;
}

.campo input, .campo textarea, .campo select {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--linea);
  background: var(--blanco);
  border-radius: var(--radio);
  transition: border-color var(--trans);
}

.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none;
  border-color: var(--bronce);
}

.campo textarea { min-height: 110px; resize: vertical; }

.campo small { display: block; margin-top: 6px; color: var(--gris); font-size: .78rem; }

.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }

.check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.check input { width: 17px; height: 17px; margin-top: 3px; flex: none; accent-color: var(--bronce); }
.check label { text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--tinta); margin: 0; }

/* Métodos de pago */
.pago { display: grid; gap: 12px; margin-bottom: 8px; }

.pago__op {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--linea);
  background: var(--blanco);
  cursor: pointer;
  transition: border-color var(--trans), background var(--trans);
}

.pago__op:hover { border-color: var(--bronce-cl); }

.pago__op:has(input:checked) { border-color: var(--tinta); background: var(--hueso-2); }

.pago__op input { margin-top: 4px; accent-color: var(--bronce); flex: none; }

.pago__op strong { display: block; font-weight: 500; }
.pago__op span { font-size: .84rem; color: var(--gris); }

.pago__op--off { opacity: .5; cursor: not-allowed; }

.datos-banco {
  white-space: pre-line;
  background: var(--hueso-2);
  border-left: 2px solid var(--bronce);
  padding: 18px 20px;
  font-size: .88rem;
  margin-top: 14px;
}

/* ── Avisos ────────────────────────────────────────────────────────── */

.aviso {
  padding: 14px 18px;
  border-left: 2px solid var(--bronce);
  background: var(--hueso-2);
  font-size: .9rem;
  margin-bottom: 18px;
}

.aviso--error { border-color: var(--rojo); color: var(--rojo); background: #fbf1ee; }
.aviso--ok { border-color: var(--verde); }

.vacio { text-align: center; padding: 90px 24px; }
.vacio h3 { margin-bottom: 12px; }
.vacio p { color: var(--gris); margin-bottom: 26px; }

/* ── Pie ───────────────────────────────────────────────────────────── */

.pie {
  background: var(--tinta);
  color: rgba(250,248,245,.72);
  padding-block: 70px 30px;
  margin-top: 90px;
}

.pie a:hover { color: var(--bronce-cl); }

.pie__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 44px;
  padding-bottom: 46px;
  border-bottom: 1px solid rgba(250,248,245,.12);
}

.pie .logo { color: var(--hueso); margin-bottom: 14px; }

.pie h4 {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--hueso);
  margin-bottom: 16px;
}

.pie ul { list-style: none; display: grid; gap: 9px; font-size: .88rem; }

.pie__bajo {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 26px;
  font-size: .78rem;
  flex-wrap: wrap;
}

/* ── Utilidades ────────────────────────────────────────────────────── */

.centro { text-align: center; }
.mt-0 { margin-top: 0; }
.oculto { display: none !important; }

.migas {
  font-size: .76rem;
  color: var(--gris);
  padding-block: 26px 8px;
  display: flex;
  gap: 8px;
}
.migas a:hover { color: var(--bronce); }

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 1020px) {
  .argumentos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .ficha { grid-template-columns: 1fr; }
  .carrito-layout { grid-template-columns: 1fr; }
  .resumen { position: static; }
  .pie__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 760px) {
  .menu-btn { display: block; font-size: 1.4rem; line-height: 1; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(300px, 82vw);
    background: var(--hueso);
    border-left: 1px solid var(--linea);
    flex-direction: column;
    gap: 0;
    padding: 92px 30px 30px;
    transform: translateX(100%);
    transition: transform var(--trans);
    z-index: 55;
  }

  .nav.abierto { transform: translateX(0); }
  .nav a { padding: 16px 0; border-bottom: 1px solid var(--linea); font-size: .82rem; }

  .argumentos { grid-template-columns: 1fr; }
  .argumento { padding: 22px; }
  .grilla { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 30px 18px; }
  .campos-2 { grid-template-columns: 1fr; }
  .linea { grid-template-columns: 72px 1fr; }
  .linea__total { grid-column: 2; text-align: right; }
  .pie__grid { grid-template-columns: 1fr; }
  .cab__in { height: 64px; }
  .logo { font-size: 1.35rem; }
}

/* =====================================================================
   CAPA V2 — rediseño editorial de la portada
   Va al final a propósito: pisa lo anterior sin tocar el resto del sitio.
   ===================================================================== */

/* ── Tipografía display más grande, con acentos en itálica ─────────── */

h1 { font-size: clamp(2.9rem, 7.5vw, 5.6rem); letter-spacing: -.02em; }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }

h1 em, h2 em, .banner h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--bronce);
}

.hero h1 em, .banner h2 em { color: var(--bronce-cl); }

/* ── Hero editorial ────────────────────────────────────────────────── */

.hero--v2 {
  min-height: min(88vh, 780px);
  isolation: isolate;
}

/* resplandor bronce */
.hero--v2::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(52% 60% at 74% 24%, rgba(194,166,120,.16), transparent 70%),
    radial-gradient(40% 45% at 12% 88%, rgba(154,122,79,.10), transparent 70%);
  pointer-events: none;
}

/* grano sutil */
.hero--v2::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .05;
  pointer-events: none;
  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='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* el frasco del logo como marca de agua */
.hero__agua {
  position: absolute;
  right: 4%;
  bottom: -6%;
  height: 86%;
  color: var(--hueso);
  opacity: .055;
  z-index: 0;
  pointer-events: none;
  animation: flotar 11s ease-in-out infinite alternate;
}

.hero__agua svg { height: 100%; width: auto; }

@keyframes flotar {
  from { transform: translateY(0) rotate(-2deg); }
  to   { transform: translateY(-26px) rotate(2deg); }
}

.hero--v2 .hero__in { position: relative; z-index: 2; max-width: 700px; }

.hero--v2 p { font-size: 1.12rem; }

/* entrada escalonada */
.hero--v2 .eyebrow,
.hero--v2 h1,
.hero--v2 p,
.hero--v2 .hero__acc {
  animation: subir .85s cubic-bezier(.2,.6,.2,1) both;
}
.hero--v2 h1        { animation-delay: .08s; }
.hero--v2 p         { animation-delay: .18s; }
.hero--v2 .hero__acc { animation-delay: .28s; }

@keyframes subir {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* guiño de scroll */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 2;
  width: 1px;
  height: 52px;
  background: rgba(250,248,245,.28);
  overflow: hidden;
}

.hero__cue::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bronce-cl);
  animation: cue 2.2s cubic-bezier(.6,0,.4,1) infinite;
}

@keyframes cue {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ── Encabezados de sección numerados ──────────────────────────────── */

.cab-seccion { border-top: 1px solid var(--linea); padding-top: 22px; }

.num-sec {
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--bronce);
  margin-right: 12px;
}

/* ── Grilla editorial: la primera tarjeta manda ────────────────────── */

@media (min-width: 960px) {
  .grilla--editorial { grid-template-columns: repeat(4, 1fr); }
  .grilla--editorial .card:first-child { grid-column: span 2; grid-row: span 2; }
  .grilla--editorial .card:first-child .card__nombre { font-size: 1.9rem; }
}

/* ── Familias olfativas ────────────────────────────────────────────── */

.familias {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.familia {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 230px;
  padding: 26px 24px;
  color: var(--hueso);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radio);
  transition: transform var(--trans);
}

.familia:hover { transform: translateY(-4px); }

.familia::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 80% 0%, var(--fam-luz, #9a7a4f) -60%, var(--fam-fondo, #2b2118) 60%);
}

.familia::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(120% 90% at 80% 0%, var(--fam-luz, #9a7a4f) -30%, var(--fam-fondo, #2b2118) 75%);
  transition: opacity var(--trans);
}

.familia:hover::after { opacity: 1; }

.familia__inicial {
  position: absolute;
  top: -14px;
  right: 6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 7rem;
  line-height: 1;
  color: rgba(250,248,245,.09);
  pointer-events: none;
}

.familia h3 {
  font-size: 1.7rem;
  color: var(--hueso);
  margin-bottom: 4px;
}

.familia p {
  font-size: .84rem;
  color: rgba(250,248,245,.72);
  margin-bottom: 12px;
  max-width: 30ch;
}

.familia span {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronce-cl);
}

/* atmósferas por familia */
.fam-amaderada { --fam-fondo: #2b2118; --fam-luz: #a9834f; }
.fam-floral    { --fam-fondo: #372731; --fam-luz: #c99ab0; }
.fam-citrica   { --fam-fondo: #34301a; --fam-luz: #cdbb4e; }
.fam-oriental  { --fam-fondo: #311f18; --fam-luz: #c47a3a; }
.fam-aromatica { --fam-fondo: #212a22; --fam-luz: #82a586; }
.fam-gourmand  { --fam-fondo: #2e2017; --fam-luz: #bd8f56; }
.fam-chipre    { --fam-fondo: #2a2a1e; --fam-luz: #a9a26a; }
.fam-acuatica  { --fam-fondo: #1d262d; --fam-luz: #7d9fb5; }
.fam-fougere   { --fam-fondo: #232b20; --fam-luz: #93a56f; }

/* ── Comprar en 4 pasos ────────────────────────────────────────────── */

.pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 34px;
}

.paso {
  border-top: 1px solid var(--linea);
  padding-top: 20px;
}

.paso__n {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--bronce);
  opacity: .45;
  margin-bottom: 10px;
}

.paso h3 { font-size: 1.35rem; margin-bottom: 8px; }

.paso p { font-size: .9rem; color: var(--tinta-70); }

/* ── Marca gigante en el pie ───────────────────────────────────────── */

.pie { overflow: hidden; }

.pie__marca {
  font-family: 'Bodoni Moda', var(--serif);
  font-weight: 600;
  font-size: clamp(4.5rem, 16vw, 13rem);
  line-height: .9;
  letter-spacing: .08em;
  text-align: center;
  color: rgba(250,248,245,.05);
  user-select: none;
  margin-bottom: 34px;
  white-space: nowrap;
}

/* ── Aparición al hacer scroll ─────────────────────────────────────── */
/* Animación nativa de scroll (sin JS). En navegadores que no la soportan
   el contenido simplemente se muestra: nunca puede quedar invisible.    */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rev {
      animation: rev-entrada linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
  }
}

@keyframes rev-entrada {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--v2 .eyebrow, .hero--v2 h1, .hero--v2 p, .hero--v2 .hero__acc { animation: none; }
  .hero__agua, .hero__cue::after { animation: none; }
}

/* ── Detalles ──────────────────────────────────────────────────────── */

.btn { transition: background var(--trans), color var(--trans), border-color var(--trans), transform var(--trans); }
.btn:hover { transform: translateY(-1px); }

.card__img { border-radius: var(--radio); }

/* ── Responsive V2 ─────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .familias { grid-template-columns: repeat(2, 1fr); }
  .pasos { grid-template-columns: repeat(2, 1fr); gap: 26px 26px; }
}

@media (max-width: 620px) {
  .familias { grid-template-columns: 1fr; }
  .familia { min-height: 170px; }
  .pasos { grid-template-columns: 1fr; }
  .hero__agua { right: -14%; height: 62%; opacity: .05; }
  .hero--v2 { min-height: 76vh; }
}