/* ===========================================================
   GRIMANTI — Alta Joyería · Trujillo, Perú
   Rework — Paleta marfil / negro / oro
   CD-01 F0: Bigilla fuera (sin licencia comercial y no se lee sobre
   fotografía). Josefin Sans auto-hospedada la reemplaza.

   ESCALA TIPOGRÁFICA — no inventar tamaños fuera de esta tabla:
     display   clamp(3rem, 7vw, 5.25rem)      Josefin 600 · MAYÚSCULA · ls .05em
     h1        clamp(2.25rem, 4.5vw, 3.5rem)  Josefin 600 · MAYÚSCULA · ls .05em
     h2        clamp(1.75rem, 3.4vw, 2.6rem)  Josefin 600 · MAYÚSCULA · ls .05em
     h3        clamp(1.05rem, 2vw, 1.3rem)    Josefin 600 · caja normal · ls .02em
     cuerpo    1rem / 1.6                     Helvetica 400
     etiqueta  .72rem · ls .22em              Josefin 600 · MAYÚSCULA
     serif     Instrument Serif 400 + itálica  SOLO titulares de página (Gemología; el inicio, F9). Nunca en el header ni el megamenú

   POR QUÉ EL PÁRRAFO NO ES JOSEFIN — esto es deliberado, no un olvido:
   Josefin Sans tiene la altura de la x muy baja. Es magnífica en grande y
   cansadora a 15 px. El cuerpo se queda en --sans (Helvetica). Si alguien
   "arregla" esto pasando el body a Josefin, la lectura de las fichas de
   producto empeora de inmediato.

   LAS MAYÚSCULAS VAN POR CSS, nunca escritas en el contenido: el título
   tiene que seguir siendo legible en <title>, en resultados de búsqueda y
   en un lector de pantalla. Con mayúsculas, el letter-spacing se abre
   (.04-.08em) o se apelmaza.

   ESCALERA DE Z-INDEX — no inventar un número fuera de esta tabla.
   Vale para TODO lo que se apile: fijo, sticky o posicionado. Adivinar un
   número es literalmente lo que produjo el bug del botón de WhatsApp — un
   toast invisible a 400 sin pointer-events tapaba la esquina y se comía los
   clics, y el síntoma que llegó fue «el botón no hace nada».

     100   .megamenu                     desplegable del menú de catálogo
     240   .wsp                          botón flotante de WhatsApp
     250   .announce / .header           franja superior y cabecera sticky
     250   .overlay                      velo del cajón y del menú móvil
     260   .header ≤880 / .nav__links-wrapper   menú móvil (sobre su propio velo)
     290   .pdp-barra                    barra fija de compra de la ficha (en su <style>)
     300   .drawer                       cajón del carrito
     400   .scroll-progress              barra de progreso de lectura
     400   .search-overlay               overlay del buscador
     400   .video-lightbox               lightbox de video
     400   #toast                        aviso efímero (en main.js, inline)

   TRES REGLAS QUE NO SE NEGOCIAN:

   1. Lo que tape la pantalla entera va de 400 para arriba, y solo mientras
      esté abierto: fuera de uso tiene que ser INALCANZABLE al clic — display:none,
      visibility:hidden, pointer-events:none o fuera del viewport. No basta
      con opacity:0: eso lo hace invisible, no inofensivo.
   2. Un elemento que aparece y se va solo (avisos, toasts) NUNCA es
      interactivo: pointer-events:none, siempre.
   3. Un botón fijo va por DEBAJO del overlay (250) para que el cajón abierto
      lo tape, y por ENCIMA del contenido para que se pueda pulsar.

   Si agregás un elemento apilado, sumalo a esta tabla en el mismo commit. Una
   tabla incompleta es peor que ninguna, porque el siguiente confía en ella —
   y por eso `tests/Feature/EscaleraZIndexTest.php` la hace cumplir: falla si
   aparece un z-index >= 100 que no esté acá, si un peldaño cambia de número
   sin actualizar la tabla, o si algo que tapa la pantalla se queda clicable.
   =========================================================== */

/* UN solo archivo para los dos pesos, no dos: Google sirve Josefin Sans como
   fuente VARIABLE (eje wght 100-700) y devuelve exactamente el mismo .woff2
   cuando se le piden el 400 y el 600 — declararlos por separado bajaría dos
   veces los mismos bytes. El RANGO en font-weight es lo que hace que el 600
   sea un peso real del eje y no una negrita sintética del navegador.
   Subconjunto latino (U+0000-00FF): cubre todo el castellano, ñ y acentos
   incluidos. 28 KB contra los 356 KB de los dos .otf de Bigilla que salen. */
@font-face {
  font-family: 'Josefin Sans';
  src: url('../fonts/josefin-sans.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* LA ÚNICA EXCEPCIÓN a Josefin: la palabra GRIMANTI. Es el nombre de la empresa y
   ya tiene su tipografía, Bigilla — la del logotipo. Donde diga GRIMANTI (cabecera,
   pie, títulos, texto corrido, panel) va envuelta en .marca, y nada más usa esta
   familia. Los archivos son un SUBCONJUNTO con las 14 letras de la palabra
   (G R I M A N T, mayúsculas y minúsculas, ~8 KB cada uno): cualquier otra letra
   cae al respaldo, así que no sirve para otra cosa ni hace falta que sirva.
   Licencia: ver DEBT-23 — es la licencia «Logo» del foundry la que cubre esto. */
@font-face {
  font-family: 'Bigilla';
  src: url('../fonts/bigilla-marca.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bigilla';
  src: url('../fonts/bigilla-bold-marca.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  /* Paleta de marca — sin cambios (§3.5) */
  --ivory:      #F4EFE8;
  --ivory-2:    #EAE1D4;
  --charcoal:   #371519;
  --wine:       #371519;
  --wine-2:     #260E11;
  --on-dark:    #C9C0B5;
  --black:      #220C0E;
  --gold:       #B0905E;
  --gold-light: #DAC4A2;
  --gold-deep:  #8A6740;
  --line:       rgba(55,21,25,.15);
  --border:     rgba(55,21,25,.15);
  --muted:      #7C6A63;
  --green:      #25D366;

  /* --bigilla y --serif se mantienen como nombres (los referencian ~15 lugares,
     incluidos <style> en línea dentro de las vistas) pero apuntan a Josefin Sans.
     No renombrarlos en un rediseño: renombrar es tocar 15 archivos para nada. */
  --bigilla:   "Josefin Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif:     "Josefin Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --titular:   "Josefin Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans:      "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* La marca, y solo la marca: ver el @font-face de Bigilla arriba. */
  --marca:     "Bigilla", "Josefin Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* La palabra GRIMANTI dondequiera que aparezca. Hereda tamaño, peso y color del
   contexto: en un h2 sale en Bigilla Bold, en un párrafo en Bigilla Regular. */
.marca{ font-family:var(--marca); letter-spacing:.04em; }

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--helvetica); color:var(--charcoal); background:var(--ivory);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* Titulares: Josefin 600, mayúscula por CSS, tracking abierto */
h1, .h1{
  font-family:var(--titular); font-weight:600; line-height:1.06;
  font-size:clamp(2.25rem, 4.5vw, 3.5rem);
  text-transform:uppercase; letter-spacing:.05em;
}
h2, .h2{
  font-family:var(--titular); font-weight:600; line-height:1.1;
  font-size:clamp(1.75rem, 3.4vw, 2.6rem);
  text-transform:uppercase; letter-spacing:.05em;
}
.display{
  font-family:var(--titular); font-weight:600; line-height:1.02;
  font-size:clamp(3rem, 7vw, 5.25rem);
  text-transform:uppercase; letter-spacing:.05em;
}
/* h3/h4 en caja normal: son nombres de pieza y de paso de taller, no rótulos.
   En mayúscula un nombre de producto largo deja de escanearse. */
h3, .h3{ font-family:var(--titular); font-weight:600; line-height:1.2; letter-spacing:.02em;
  font-size:clamp(1.05rem, 2vw, 1.3rem); }
h4, .h4{ font-family:var(--titular); font-weight:600; line-height:1.2; letter-spacing:.02em; }

/* .serif quedó como nombre heredado; hoy es el titular */
.serif{ font-family:var(--titular); }
.gold{ color:var(--gold); }
.center{ text-align:center; }
.eyebrow{ font-family:var(--titular); font-size:.72rem; font-weight:600; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold-deep); }
.container{ width:min(1240px,92%); margin-inline:auto; }
.section{ padding:clamp(58px,9vw,124px) 0; }

/* ---------- Botones ---------- */
/* Josefin 600 en todos los botones y etiquetas (encargo del cliente).
   El barrido de fondo se mantiene: es de la casa y no compite con ninguna foto. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--titular); font-weight:600;
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  padding:16px 38px; border:1px solid var(--charcoal);
  background:transparent; color:var(--charcoal); cursor:pointer;
  position:relative; overflow:hidden; transition:color .4s ease; z-index:0;
  min-height:48px;
}
.btn::after{ content:""; position:absolute; inset:0; z-index:-1; background:var(--charcoal);
  transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.7,0,.2,1); }
.btn:hover{ color:var(--ivory); } .btn:hover::after{ transform:scaleX(1); }
.btn--gold{ border-color:var(--gold); color:var(--gold-deep); } .btn--gold::after{ background:var(--gold); } .btn--gold:hover{ color:#fff; }
.btn--light{ border-color:rgba(255,255,255,.6); color:#fff; } .btn--light::after{ background:#fff; } .btn--light:hover{ color:var(--charcoal); }
/* Sólido de marca: el "Añadir" de la ficha, el botón de la barra fija y el de error */
.btn--solido{ background:var(--charcoal); color:var(--ivory); border-color:var(--charcoal); }
.btn--solido::after{ background:var(--gold-deep); }
.btn--solido:hover{ color:#fff; }
.btn--block{ width:100%; justify-content:center; }
.btn--sm{ padding:11px 24px; font-size:.68rem; min-height:44px; }

/* ---------- Josefin manda en TODA etiqueta del sitio ----------
   Titulares (h1-h4, .display) y botones (.btn*) ya están arriba. Esto cubre
   el resto: rótulos, micro-copy, contadores, cifras de interfaz y enlaces de
   navegación. La lista es explícita a propósito — con un selector global
   (body{font-family:var(--titular)}) el párrafo caería también en Josefin, y
   a 15 px cansa (ver la nota de la cabecera). Si agregás un rótulo nuevo,
   sumalo acá; si agregás un párrafo, no.                                    */
.nav__links a,
.announce,
.brand-centered__name,
.brand-centered__sub,
.brand__text,
.login-label,
.cart-count,
.megamenu__col h4,
.megamenu__card span,
.search-overlay__label,
.footer h5,
.footer__bar,
.eyebrow,
.head .eyebrow,
.facets__group__title,
.facets__link,
.facets__count,
.facets__chips,
.pagination__link,
.quote cite,
.quote__stars,
.workshop-card__num,
.instagram-likes,
.drawer__head h3,
.drawer__foot .row,
.cart-item__tag,
.page-hero .eyebrow,
.pdp-size-guia,
.pdp-size-title,
.pdp-info__cat,
.pdp-info__stock,
.badge,
.tag,
label{
  font-family:var(--titular);
}
.brand-centered__name{ font-weight:600; letter-spacing:.06em; }
/* Los rótulos cortos van en mayúscula con el tracking abierto; si no, con la
   x-height baja de Josefin se apelmazan. */
.facets__group__title,
.footer h5,
.quote cite,
.cart-item__tag{ text-transform:uppercase; letter-spacing:.18em; }

/* Lo que NO pasa a Josefin, a propósito:
   · el cuerpo de texto (body, p, .split__body p, .pdp-info__desc, .error-page__text);
   · el contenido que escribe la clienta (input, textarea, select);
   · las cifras de precio (.product__price, .pdp-info__price), que a tamaño
     chico se leen mejor en Helvetica;
   · el micro-copy que EXPLICA una etiqueta en vez de ser una: el detalle de
     .pdp-confianza__d ("Certificado de autenticidad") y la línea de estado del
     panel del carrito ("Añadido al carrito · S/ 1,480"). Son frases de .8rem:
     con la x-height baja de Josefin se leerían peor. La ETIQUETA de arriba sí
     va en Josefin; su explicación, no. Es criterio, no descuido. */
input, textarea, select{ font-family:var(--sans); }

/* =========================================================
   ANNOUNCEMENT
   ========================================================= */
/* =========================================================
   ANNOUNCEMENT
   ========================================================= */
.announce {
  background: var(--charcoal);
  color: var(--ivory);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  z-index: 250;
  position: relative;
}
.announce__container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* =========================================================
   HEADER / NAV con Mega Menús Centrados
   ========================================================= */
.header {
  position: sticky;
  top: 0;
  /* z-index por encima del .overlay (250): el menú móvil vive dentro del header
     (sticky + backdrop-filter crean stacking context), así que debe superar al
     overlay para que sus opciones sean tappables. El drawer del carrito (300)
     sigue por encima. */
  z-index: 260;
  background: rgba(244,239,232,0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background 0.5s ease, box-shadow 0.5s ease;
}
.header.scrolled {
  background: rgba(244,239,232,0.98);
  box-shadow: 0 18px 40px -30px rgba(42,28,24,0.35);
}
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px 0;
  transition: padding 0.5s ease;
  position: relative;
}
.header.scrolled .nav {
  padding: 10px 0;
}

.nav__toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  justify-self: start;
}
.icon {
  width: 20px;
  height: 20px;
  stroke: var(--charcoal);
  fill: none;
  stroke-width: 1.4;
}

.nav__links-wrapper {
  display: flex;
  align-items: center;
  justify-self: start;
}
.nav__links {
  list-style: none;
  display: flex;
  align-items: center;
}
.nav__links--left {
  gap: 28px;
}
.nav__links--right {
  gap: 24px;
}
.nav__links--mobile-only {
  display: none;
}

.nav__links a {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--charcoal);
  padding: 10px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.nav__links > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  height: 1px;
  width: 0;
  background: var(--gold);
  transition: width 0.35s ease;
}
.nav__links > li:hover > a::after,
.nav__links a.active::after {
  width: 100%;
}
.nav__links a.active {
  color: var(--gold-deep);
}

.caret {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  transition: transform 0.3s;
}
.has-megamenu:hover .caret {
  transform: rotate(180deg);
}

/* Logotipo Centralizado */
.brand-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  text-align: center;
  text-decoration: none;
  color: var(--charcoal);
}
.brand-centered__logo {
  height: 38px;
  width: auto;
  margin-bottom: 2px;
  object-fit: contain;
  transition: height 0.5s ease;
}
.brand-centered__name {
  font-family: var(--marca);
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
  line-height: 1.1;
  transition: font-size 0.5s ease;
}
.brand-centered__sub {
  display: block;
  font-family: var(--sans);
  font-size: 0.48rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-top: 1px;
}

.header.scrolled .brand-centered__logo {
  height: 30px;
}
.header.scrolled .brand-centered__name {
  font-size: 1.35rem;
}

/* Bloque Derecho de Escritorio */
.nav__right-desktop {
  display: flex;
  align-items: center;
  gap: 30px;
  justify-self: end;
}
.nav__icons {
  display: flex;
  gap: 20px;
  align-items: center;
}
.nav__icons a,
.nav__icons button {
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  color: var(--charcoal);
}
.cart-count {
  position: absolute;
  top: -8px;
  right: -10px;
  background: var(--gold);
  color: #fff;
  font-size: 0.58rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--sans);
}

/* =========================================================
   MEGA MENÚS ESTILOS
   ========================================================= */
.megamenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 60px -20px rgba(42,28,24,0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
  z-index: 100;
  padding: 40px 0;
}
.has-megamenu:hover .megamenu,
.has-megamenu:focus-within .megamenu,
.has-megamenu.is-open .megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* CAT-03 §3: Escape cierra y devuelve el foco al nivel 1, pero el foco sigue DENTRO del <li>
   (en el propio trigger) — sin esta clase, :focus-within lo reabriría de inmediato. Se aplica
   solo mientras el usuario no vuelve a interactuar con el trigger (ver public/js/main.js). */
.has-megamenu.force-closed .megamenu {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(10px) !important;
}
/* Foco visible siempre (§3): el estado por defecto del navegador ya alcanza en la mayoría de los
   casos, pero se refuerza para que nunca dependa de eso. */
.nav__links a:focus-visible,
.megamenu__col ul a:focus-visible,
.megamenu__card:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}
.megamenu__container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
}
.megamenu__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  border-right: 1px solid var(--line);
  padding-right: 40px;
}
.megamenu__cols--three {
  grid-template-columns: repeat(3, 1fr);
}
.megamenu__col h4 {
  font-family: var(--sans);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
  font-weight: 500;
}
.megamenu__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.megamenu__col ul a {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--charcoal);
  text-transform: none;
  padding: 2px 0;
  transition: color 0.25s;
}
.megamenu__col ul a::after {
  display: none !important;
}
.megamenu__col ul a:hover {
  color: var(--gold-deep);
}
.megamenu__featured {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.megamenu__featured--single {
  grid-template-columns: 1fr;
  max-width: 280px;
  margin-left: auto;
}
.megamenu__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: var(--charcoal);
}
.megamenu__card-img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 2px;
  background: var(--ivory-2);
}
.megamenu__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.megamenu__card:hover .megamenu__card-img img {
  transform: scale(1.06);
}
.megamenu__card span {
  /* Descripción de cuerpo, no titular: va en Helvetica como el resto del cuerpo. */
  font-family: var(--sans);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  transition: color 0.25s;
}
.megamenu__card:hover span {
  color: var(--gold-deep);
}
.drop li a{ display:block; padding:11px 24px; font-size:.7rem; letter-spacing:.14em; white-space:nowrap; transition:background .25s,color .25s; }
.drop li a::after{ display:none; }
.drop li a:hover{ background:var(--ivory-2); color:var(--gold-deep); }

.nav__icons{ display:flex; gap:20px; justify-content:flex-end; align-items:center; }
.nav__icons a, .nav__icons button{ display:grid; place-items:center; background:none; border:0; cursor:pointer; position:relative; }
.icon{ width:20px; height:20px; stroke:var(--charcoal); fill:none; stroke-width:1.4; }
.cart-count{ position:absolute; top:-8px; right:-10px; background:var(--gold); color:#fff;
  font-size:.58rem; width:16px; height:16px; border-radius:50%; display:grid; place-items:center; font-family:var(--sans); }
.nav__toggle{ display:none; background:none; border:0; cursor:pointer; }

/* =========================================================
   HERO (Full-width Background & Overlay)
   ========================================================= */
.hero {
  position: relative;
  height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--charcoal);
}
.hero__bg-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(75deg, rgba(38,14,17,0.9) 0%, rgba(38,14,17,0.55) 45%, rgba(0,0,0,0) 80%);
  z-index: 2;
}
.hero__container {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(60px, 8vw, 110px);
}
.hero__text-box {
  max-width: 600px;
  text-align: left;
  opacity: 0;
  transform: translateY(30px);
  animation: rise 1s 0.2s forwards cubic-bezier(0.16, 1, 0.3, 1);
  margin-left: clamp(24px, 6vw, 70px);
}
.hero__title {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 24px;
  line-height: 1.1;
}
.hero__link {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--gold);
  transition: color 0.35s ease, border-color 0.35s ease, letter-spacing 0.35s ease;
}
.hero__link:hover {
  color: var(--gold-light);
  border-color: #fff;
  letter-spacing: 0.28em;
}
.hero__scroll {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 4;
}
.hero__scroll span {
  width: 1px;
  height: 38px;
  background: var(--gold-light);
  animation: scrolldot 2s ease-in-out infinite;
  transform-origin: top;
}

@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes scrolldot {
  0%, 100% {
    transform: scaleY(.3);
  }
  50% {
    transform: scaleY(1);
  }
}

/* =========================================================
   SECCIÓN: encabezados
   ========================================================= */
.head{ text-align:center; max-width:640px; margin:0 auto clamp(36px,5vw,64px); }
.head h2{ font-size:clamp(2rem,4.4vw,3.2rem); margin:14px 0; }
.head p{ color:var(--muted); }

/* =========================================================
   PRODUCTOS (CD-01 F3)
   Reemplaza el bloque PRODUCTOS de styles.css. Hay que borrar además
   las líneas .products{ grid-template-columns } de los @media de
   1024 / 768 / 560 y la regla .product__shine.
   ========================================================= */
/* La tienda (catálogo y búsqueda) es 5 % más ancha que el resto del sitio: 1240 → 1302 px. */
.container--tienda{ width:min(1302px,94%); }
.products{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  /* 6 px, no 30: las piezas van PEGADAS, como una tira de vitrina. Con el panel de
     filtros fuera de la columna lateral, cada foto gana además ~95 px de ancho. */
  gap:6px;
}
/* La tarjeta es columna flex y el botón se ancla abajo (margin-top:auto).
   Sin esto, un nombre de dos líneas empuja su botón ~21 px más abajo que el
   del vecino y la fila queda escalonada — justo lo contrario de "que se
   entienda de un vistazo". */
.product{ display:flex; flex-direction:column; }
.product__link{ display:block; color:inherit; text-decoration:none; }

.product__media{
  position:relative;
  aspect-ratio:5/7;                      /* vertical: una joya se fotografía de pie. 5 % más alta que 3/4 */
  overflow:hidden;
  background:#fff;                       /* blanco, no arena: es el fondo de la foto de producto */
  display:grid; place-items:center;
}
.product__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1s cubic-bezier(.16,1,.3,1);
}
/* Realce mínimo de la FOTO en hover. Reemplaza a .product__shine, que era un
   destello diagonal sobre la joya: existía para lucirse, no para que la pieza
   entre mejor (§1). */
.product:hover .product__media img{ transform:scale(1.03); }
.product__media svg{ width:55%; height:55%; }
/* Segunda foto: aparece al pasar el mouse (la baja main.js en el primer paso). Sin segunda foto no
   existe el elemento. Solo con mouse: en táctil el hover «se queda pegado» tras el toque. */
.product__media > .product__img2{
  position:absolute; inset:0; opacity:0;
  transition:opacity .7s ease, transform 1s cubic-bezier(.16,1,.3,1);
}
@media (hover:hover){
  .product:hover .product__img2.is-lista{ opacity:1; }
}

/* --- Insignias ---
   "A PEDIDO" se fabrica por encargo: es deseable, así que va en champán y se
   lee como etiqueta de categoría. "Agotado" es lo que de verdad no se puede
   comprar: gris, con borde, sin relleno. Nunca el mismo tratamiento. */
.product__badge{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--titular); font-weight:600;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  padding:6px 11px;
}
.product__badge--pedido{ background:var(--gold-light); color:var(--charcoal); }
.product__badge--agotado{ background:rgba(244,239,232,.92); color:var(--muted); border:1px solid var(--line); }

/* Cuerpo de la tarjeta. Con las fotos pegadas, el aire lateral del texto tiene que
   ponerlo la tarjeta: si no, el nombre de una toca el de la vecina. */
.product__cuerpo{ display:flex; flex-direction:column; flex:1; padding:16px 18px 0; }

/* --- Jerarquía: foto > nombre > precio --- */
.product__name{
  font-family:var(--titular); font-weight:600;
  font-size:1.06rem; letter-spacing:.02em; line-height:1.2;
  color:var(--charcoal);
  margin:0 0 6px;
}
/* El precio se atenúa por TAMAÑO y por color de texto (antes era dorado de
   acento, lo segundo más llamativo de la tarjeta). No se esconde, no se
   anima, no se repite: sigue visible antes de comprar, que es lo que exige
   la regla de IGV en Perú. */
.product__price{
  font-family:var(--sans);
  font-size:.84rem; line-height:1.4;
  color:var(--charcoal);
  margin:0 0 14px;
  word-break:break-word;
}
.product__price-antes{ text-decoration:line-through; color:var(--muted); font-size:.92em; margin-right:6px; }
.product__price-ahora{ color:var(--charcoal); }

/* --- Añadir: siempre visible, nunca solo en hover --- */
.btn--anadir{
  width:100%;
  margin-top:auto;
  border-color:var(--charcoal); color:var(--charcoal);
}
.btn--anadir::after{ background:var(--charcoal); }
.btn--anadir:hover{ color:var(--ivory); }
.btn--anadir.is-agotado{
  border-color:rgba(55,21,25,.3); color:var(--muted);
  opacity:1; cursor:not-allowed;
}
.btn--anadir.is-agotado::after{ display:none; }

.product{ transition:transform .6s cubic-bezier(.16,1,.3,1); }
.product:hover{ transform:translateY(-6px); }
/* El precio ya no aporta el margen inferior: lo hace el gap de la grilla, y
   así margin-top:auto del botón mide contra el mismo borde en toda la fila. */
.product__price:last-of-type{ margin-bottom:14px; }

@media(max-width:1100px){
  .products{ grid-template-columns:repeat(3,1fr); gap:6px; }
}
@media(max-width:768px){
  /* DOS columnas en celular, no una: la clienta llega de una transmisión
     buscando una pieza concreta y necesita barrer, no desfilar. */
  .products{ grid-template-columns:repeat(2,1fr); gap:4px; }
  .product__cuerpo{ padding:12px 12px 0; }
  .product__name{ font-size:.92rem; margin-top:0; }
  .product__price{ font-size:.78rem; margin-bottom:10px; }
  .product__badge{ top:9px; left:9px; font-size:.6rem; padding:5px 8px; }
}
@media(max-width:400px){
  .products{ gap:4px; }
  .product__cuerpo{ padding:10px 9px 0; }
  .btn--anadir{ padding:11px 10px; font-size:.62rem; letter-spacing:.14em; }
}

/* =========================================================
   GRILLA DE TRES (heredada de las viejas tarjetas de categoría)
   ========================================================= */
/* La tarjeta .cat murió con F2 —la portada ahora usa el carrusel .vitrina— pero
   `.cats` sigue viva: `tienda.blade.php` la usa como grilla de tres para el
   bloque "Por qué elegirnos", que nunca tuvo nada que ver con categorías. Se
   queda sola, sin ninguna regla de .cat, y con su colapso a una columna en 880. */
.cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

/* =========================================================
   VITRINA DE CATEGORÍAS — CARRUSEL (CD-01 F2, reestilizada en F9 §6)
   Es una sola sección y una sola fuente: sale de $menuCatalogo (las mismas categorías
   del megamenú), sus fotos las sube la tienda desde el panel (Categoria::fotoVitrina()) y,
   si falta la foto, se pinta un marcador. F9 la reestiliza, no la reescribe.

   Cómo se ve en F9: banda #FBF8F3, fila deslizable de tarjetas 3:4 con 18 px entre ellas
   (≈3,3 visibles en escritorio, 72 % en móvil) y el nombre ABAJO, sobre un velo crema con
   desenfoque, en blanco con sombra. Antes era una tira de tarjetas pegadas (6 px) con el
   rótulo arriba en su propia franja: esa composición murió con el rediseño.

   El orden lo da config('catalogo.orden_vitrina') (Categoria::ordenarParaVitrina): una
   categoría que no esté en la lista va al FINAL, no desaparece.

   El movimiento es scroll nativo con scroll-snap: sin librería y con el momentum del sistema.
   vitrina.js solo agrega el arrastre con mouse y el estado de las flechas.
   ========================================================= */
.vitrina-sec{ overflow:hidden; }   /* la pista a sangre no puede empujar scroll lateral */
.inicio-categorias{ background:#FBF8F3; padding:28px 0; }

.vitrina{ position:relative; }

.vitrina__pista{
  display:flex;
  gap:18px;
  padding-inline:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:18px;
  scroll-behavior:smooth;
  cursor:grab;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
  /* Las tarjetas son <a>: sin esto, al arrastrar se selecciona el texto de los
     rótulos y Chrome levanta su arrastre nativo de enlace por encima. */
  user-select:none; -webkit-user-select:none;
}
.vitrina__pista::-webkit-scrollbar{ display:none; }
.vitrina__pista.is-arrastrando{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }

.vitrina__card{
  position:relative;
  flex:0 0 calc((100% - 3 * 18px) / 3.3);   /* ≈3,3 visibles: la cuarta asoma e invita a deslizar */
  scroll-snap-align:start;
  display:block; color:inherit;
  -webkit-user-drag:none;
}
.vitrina__card img{ -webkit-user-drag:none; pointer-events:none; }

/* ---------- Foto ---------- */
.vitrina__media{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:#EFE9E1;                /* fondo claro, no vino */
  display:grid; place-items:center;
}
.vitrina__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* opacidad 1: la foto es el contenido, no una textura de fondo */
  transition:transform 1.2s cubic-bezier(.16,1,.3,1);
}
.vitrina__card:hover .vitrina__media img{ transform:scale(1.05); }

/* ---------- Rótulo, abajo, sobre un velo crema con desenfoque ---------- */
.vitrina__rotulo{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px 12px;
  text-align:center;
  background:rgba(244,239,232,.55);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.vitrina__rotulo h3{
  font-family:var(--titular); font-weight:600;
  font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  color:#fff; text-shadow:0 1px 8px rgba(38,14,17,.55); margin:0;
}

/* Sobre el marcador (claro) el blanco del rótulo no se lee: va en vino. Con foto, blanco. */
.vitrina__media--pendiente .vitrina__rotulo h3{ color:var(--charcoal); text-shadow:none; }

/* Marcador mientras no llegan las fotos de pieza (DEBT-30).
   El rayado va en un modificador y no en `:has()`: la clase la pone la propia
   vista, que ya sabe si hay foto, y así no depende del soporte del selector. */
.vitrina__media--pendiente::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg,
    rgba(55,21,25,.05) 0 10px, rgba(55,21,25,.02) 10px 20px);
}
.vitrina__pendiente{
  position:relative;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.69rem; letter-spacing:.08em; line-height:1.7;
  color:var(--muted); text-align:center; padding:20px;
}

/* ---------- Flechas ----------
   Van DENTRO de la pista, flotando sobre la primera y la última tarjeta: con el
   carrusel a sangre, colgarlas por fuera (left:-22px) las dejaba fuera de la pantalla. */
.vitrina__flecha{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ivory); border:1px solid rgba(55,21,25,.18);
  color:var(--charcoal); cursor:pointer; z-index:3;
  box-shadow:0 12px 30px -16px rgba(38,14,17,.55);
  transition:opacity .3s ease, transform .3s ease, border-color .3s ease;
}
.vitrina__flecha svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5; }
.vitrina__flecha:hover{ border-color:var(--gold); transform:translateY(-50%) scale(1.06); }
.vitrina__flecha--prev{ left:18px; }
.vitrina__flecha--next{ right:18px; }
/* En el tope el botón no desaparece: se apaga. Un control que se esfuma deja
   al usuario buscando dónde estaba. */
.vitrina__flecha[disabled]{ opacity:.25; pointer-events:none; }

@media(max-width:768px){
  /* En celular manda el swipe: las flechas sobran y ocupan foto */
  .vitrina__flecha{ display:none; }
  .vitrina__card{ flex:0 0 72%; }   /* asoma la siguiente: invita a deslizar */
  .vitrina__rotulo{ padding:14px 10px; }
}

@media (prefers-reduced-motion: reduce){
  .vitrina__pista{ scroll-behavior:auto; }
  .vitrina__card, .vitrina__media img{ transition:none; }
}

/* =========================================================
   SPLIT
   ========================================================= */
/* La foto pesa 55% y el texto 45%, SIEMPRE. Como las secciones alternan de lado,
   la costura vertical cae al 55% en una y al 45% en la siguiente: se refleja
   respecto al eje central en vez de alinearse.
   Es el arreglo del "parecen una infografía": antes la partición era 1fr 1fr, así
   que las cuatro esquinas de dos secciones contiguas convergían exactamente en el
   centro de la página y formaban una cruz: una cuadrícula, no una composición.
   Con el reflejo ese punto de convergencia deja de existir, y las secciones
   siguen tocándose a sangre (el formato no cambia).
   El desfase es además el gesto correcto para el tema: en un diamante la corona y
   el pabellón son planos con ángulos distintos y no se alinean, se encuentran
   desplazados en el filetín. */
.split{ display:grid; grid-template-columns:55% 45%; align-items:center; }
.split--rev{ grid-template-columns:45% 55%; }
.split__img{ aspect-ratio:1; background:var(--ivory-2); display:grid; place-items:center; min-height:420px; overflow:hidden; }
.split__img svg{ width:46%; height:46%; }
.split__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.split__body{ padding:clamp(30px,6vw,90px); }
.split__body h2{ font-size:clamp(2rem,4vw,3rem); margin:16px 0 18px; }
.split__body p{ color:var(--muted); margin-bottom:28px; max-width:460px; }
/* El burdeos profundo se mantiene: el contraste crema/vino es un activo de la
   marca (el drama del estuche), y el problema era la geometría, no el color.
   Bajarlo a un vino aguado debilitaba la paleta sin arreglar la cuadrícula. */
.split--dark{ background:var(--charcoal); color:var(--ivory); }
.split--dark .split__img{ background:var(--wine-2); }
.split--dark p{ color:var(--on-dark); }
.split--rev .split__img{ order:2; }

.feature-list{ display:grid; gap:20px; margin:30px 0; }
.feature{ display:flex; gap:16px; align-items:flex-start; }
.feature svg{ width:30px; height:30px; stroke:var(--gold); fill:none; flex:none; margin-top:4px; }
.feature h4{ font-family:var(--helvetica); font-size:1.25rem; font-weight:500; text-transform:none; letter-spacing:normal; margin-bottom:2px; color:var(--charcoal); }
.feature p{ font-family:var(--sans); font-size:1.05rem; color:var(--muted); margin:0; line-height:1.45; }
/* Sobre fondo vino, el color heredado de .feature h4 era var(--charcoal), es decir
   EXACTAMENTE el color del fondo: los títulos existían pero se veían invisibles, y
   por eso la descripción parecía descuadrada respecto al icono. */
.split--dark .feature h4{ color:var(--ivory); }
.split--dark .feature p{ color:var(--on-dark); }

/* =========================================================
   TESTIMONIOS
   ========================================================= */
.testi{ background:var(--ivory-2); }
.testi__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.quote{ background:var(--ivory); padding:38px 32px; border:1px solid var(--line); }
.quote__stars{ color:var(--gold); letter-spacing:.3em; margin-bottom:16px; font-size:.8rem; }
.quote p{ font-family:var(--sans); font-size:1.18rem; font-style:italic; line-height:1.45; margin-bottom:22px; }
.quote cite{ font-style:normal; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); }

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band{ background:var(--charcoal); color:var(--ivory); text-align:center; position:relative; overflow:hidden; }
.cta-band h2{ font-size:clamp(2rem,4.5vw,3.4rem); margin-bottom:14px; }
.cta-band p{ color:#b9b2a6; max-width:480px; margin:0 auto 30px; }
.cta-band__glow{ position:absolute; inset:0; opacity:.4; background:radial-gradient(circle at 50% 0%, rgba(184,146,79,.55), transparent 60%); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--black); color:#cfc8bc; padding-top:70px; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; }
.footer__brand .brand{ color:var(--ivory); text-align:left; font-size:1.7rem; }
.footer__brand p{ margin-top:16px; max-width:300px; font-size:.9rem; color:#9d968b; }
.footer h5{ font-family:var(--sans); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-light); margin-bottom:18px; }
.footer ul{ list-style:none; display:grid; gap:11px; }
.footer ul a, .footer ul li{ font-size:.88rem; color:#b6afa4; transition:color .3s; }
.footer ul a:hover{ color:var(--gold-light); }
.footer__social{ display:flex; gap:14px; margin-top:20px; }
.footer__social a{ width:38px; height:38px; border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; transition:border-color .3s; }
.footer__social a:hover{ border-color:var(--gold); }
.footer__social svg{ width:16px; height:16px; stroke:#cfc8bc; fill:none; }
.footer__bar{ border-top:1px solid rgba(255,255,255,.1); padding:24px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.74rem; color:#857f74; letter-spacing:.08em; }

/* =========================================================
   PAGE HERO (internas)
   ========================================================= */
.page-hero{ background:var(--charcoal); color:var(--ivory); text-align:center;
  padding:clamp(80px,13vw,150px) 0 clamp(56px,8vw,100px); position:relative; overflow:hidden; }
.page-hero__glow{ position:absolute; inset:0; opacity:.4; background:radial-gradient(circle at 50% 30%, rgba(184,146,79,.5), transparent 62%); z-index:1; }
.page-hero h1{ font-size:clamp(2.6rem,6vw,4.4rem); position:relative; }
.page-hero p{ color:#b9b2a6; max-width:580px; margin:18px auto 0; position:relative; }

/* Portada con imagen de fondo (con velo para legibilidad del texto) */
.page-hero--cover{ background-size:cover; background-position:center; }
.page-hero--cover::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(38,14,17,.58) 0%, rgba(38,14,17,.80) 100%); }
.page-hero--cover .container{ position:relative; z-index:2; }
.crumbs{ font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-light); margin-bottom:22px; position:relative; }
/* .page-hero p (margin:18px auto 0, color gris) pesa más que .crumbs y le borraba el margen
   de abajo y el dorado: las migas quedaban pegadas al h1. Esta regla les devuelve los dos. */
.page-hero .crumbs{ margin:0 auto 22px; color:var(--gold-light); }

/* filtros — chips/pills (enlaces server-side) */
.filters{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:46px; }
.filters a{ display:inline-block; padding:9px 22px; border:1px solid var(--line); border-radius:999px;
  background:none; color:var(--charcoal); text-decoration:none;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; line-height:1;
  transition:background .3s, color .3s, border-color .3s, transform .3s; }
.filters a:hover{ border-color:var(--gold); color:var(--gold-deep); transform:translateY(-1px); }
.filters a.is-active{ background:var(--charcoal); color:var(--ivory); border-color:var(--charcoal); }
.filters a.is-active:hover{ color:var(--ivory); }

/* paginación */
.pagination{ display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:52px; }
.pagination__link{ display:grid; place-items:center; min-width:42px; height:42px; padding:0 12px;
  border:1px solid var(--line); border-radius:999px; background:none; color:var(--charcoal); text-decoration:none;
  font-size:.82rem; letter-spacing:.04em; transition:background .3s, color .3s, border-color .3s; }
.pagination__link:hover{ border-color:var(--gold); color:var(--gold-deep); }
.pagination__link.is-active{ background:var(--charcoal); color:var(--ivory); border-color:var(--charcoal); cursor:default; }
.pagination__link.is-disabled{ opacity:.4; pointer-events:none; }

/* =========================================================
   CATÁLOGO — panel de facetas (CAT-02), en BARRA SUPERIOR
   =========================================================
   Los filtros vivían en una columna de 240 px a la izquierda. Se subieron arriba
   por lo que le hacían a lo que de verdad importa: esa columna más su separación
   se comían ~284 px de ancho, y en una tienda de joyería eso sale directo del
   tamaño de la foto, que es lo que vende. Arriba, el filtro ocupa alto —barato,
   se lee de una pasada y se deja atrás— en vez de ancho, que es caro y permanente.

   En celular no cambia nada de lo que ya había: el panel sigue siendo un
   <details> que arranca plegado, porque cinco grupos abiertos empujarían la
   primera pieza fuera de la pantalla.
   ========================================================= */
.catalog-layout{ display:block; }

.facets-panel{ border:1px solid var(--line); background:var(--ivory); margin-bottom:28px; }
.facets-panel__summary{ display:none; }

/* Los grupos se reparten en fila y bajan solos cuando no entran. `auto-fit` con
   un mínimo, en vez de un número fijo de columnas: hoy son cuatro atributos más
   el precio, pero `material` y `gema` crecen cuando la tienda defina sus listas
   y la barra no tiene por qué reescribirse por eso. */
.facets{
  padding:22px 26px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:22px 32px;
  align-items:start;
}
.facets__group__title{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:12px; }

/* En fila y envolviendo. Los valores dejan de ser una lista vertical con el
   conteo alineado a la derecha —eso solo tiene sentido en una columna— y pasan
   a ser etiquetas que se leen de corrido. */
.facets__list{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.facets__link{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; text-decoration:none;
  border:1px solid var(--line); border-radius:999px;
  color:var(--charcoal); font-size:.8rem; line-height:1;
  transition:color .25s, border-color .25s, background .25s;
}
.facets__link:hover{ color:var(--gold-deep); border-color:var(--gold); }
/* El activo se rellena: en una fila de etiquetas, un subrayado casi no se ve. */
.facets__link.is-active{
  background:var(--charcoal); border-color:var(--charcoal); color:var(--ivory); font-weight:600;
}
.facets__link.is-active .facets__count{ color:rgba(244,239,232,.7); }
.facets__link.is-disabled{ color:var(--muted); opacity:.45; cursor:default; }
.facets__link.is-disabled:hover{ border-color:var(--line); color:var(--muted); }
.facets__count{ color:var(--muted); font-size:.74rem; }

.facets__precio{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.facets__precio-input{ width:78px; padding:8px 10px; border:1px solid var(--line); background:var(--ivory);
  font-family:var(--sans); font-size:.82rem; color:var(--charcoal); }
.facets__precio-input:focus{ outline:none; border-color:var(--gold); }
.facets__precio span{ color:var(--muted); }
.facets__precio .btn{ padding:8px 16px; font-size:.68rem; }

.facets__chips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.chip{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border:1px solid var(--line); border-radius:999px;
  background:var(--ivory-2); color:var(--charcoal); font-size:.72rem; letter-spacing:.05em; text-decoration:none; transition:border-color .25s, color .25s; }
.chip:hover{ border-color:var(--gold); color:var(--gold-deep); }
.chip span{ color:var(--muted); font-size:.9rem; line-height:1; }
.chip--clear{ background:none; border-style:dashed; text-transform:uppercase; letter-spacing:.14em; font-size:.66rem; }

.catalog-empty{ text-align:center; margin:48px 0; padding:40px 0; }
.catalog-empty p{ color:var(--muted); font-size:1rem; margin-bottom:20px; }

@media(max-width:880px){
  .facets-panel{ margin-bottom:24px; }
  .facets-panel__summary{ display:flex; justify-content:space-between; align-items:center; cursor:pointer;
    padding:16px 22px; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); list-style:none; }
  .facets-panel__summary::-webkit-details-marker{ display:none; }
  .facets-panel__summary::after{ content:"+"; font-size:1.1rem; }
  .facets-panel[open] .facets-panel__summary::after{ content:"–"; }
  .facets{ border-top:1px solid var(--line); grid-template-columns:1fr; gap:20px; padding:20px 22px; }
}

/* =========================================================
   GEMOLOGÍA — cortes de diamante
   ========================================================= */
.cuts{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.cut{ text-align:center; padding:30px 14px; border:1px solid var(--line); background:var(--ivory); transition:transform .4s, box-shadow .4s; }
.cut:hover{ transform:translateY(-6px); box-shadow:0 30px 50px -30px rgba(0,0,0,.35); }
.cut svg{ width:70px; height:70px; margin:0 auto 16px; stroke:var(--gold); fill:none; }
.cut h4{ font-size:1.2rem; }
.cut span{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.fourc{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.cgem{ text-align:center; padding:34px 22px; background:var(--ivory-2); }
.cgem .big{ font-family:var(--sans); font-size:3rem; color:var(--gold); line-height:1; }
.cgem h4{ font-family:var(--helvetica); font-size:1.25rem; font-weight:500; text-transform:none; letter-spacing:normal; margin:12px 0 6px; color:var(--charcoal); }
/* Texto de cuerpo: Helvetica. Iba en la familia de titulares (Bigilla entonces,
   Josefin Sans desde F0) y rompía la jerarquía justo debajo de un h4 que sí
   estaba en Helvetica. */
.cgem p{ font-family:var(--sans); font-size:1.05rem; color:var(--muted); line-height:1.45; }

/* =========================================================
   TIENDA — info / mapa / horario
   ========================================================= */
.store-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch;
  width:min(1240px,92%); margin:clamp(40px,6vw,80px) auto; border-radius:20px; overflow:hidden;
  box-shadow:0 30px 60px -25px rgba(38,14,17,.55); border:1px solid var(--line); }
.store-map{ position:relative; min-height:460px; background:var(--ivory-2); }
.store-map iframe{ width:100%; height:100%; min-height:460px; border:0; display:block;
  filter:sepia(.35) saturate(.82) contrast(1.02) brightness(.98);
  transition:filter .6s ease; }
.store-map:hover iframe{ filter:sepia(0) saturate(1) contrast(1) brightness(1); }
/* Marco dorado interior sutil */
.store-map::after{ content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(176,144,94,.35); }
.store-info{ padding:clamp(34px,6vw,80px); background:var(--charcoal); color:var(--ivory); }
.store-info h2{ font-size:clamp(2rem,4vw,3rem); margin-bottom:24px; }
.store-info .info-row{ display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.store-info .info-row svg{ width:26px; height:26px; stroke:var(--gold-light); fill:none; flex:none; margin-top:3px; }
.store-info .info-row h4{ font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-light); margin-bottom:4px; }
.store-info .info-row p{ color:#cfc8bc; font-size:.95rem; }
.video-box{ aspect-ratio:16/10; background:var(--ivory-2); display:grid; place-items:center; position:relative; overflow:hidden; }
.video-box--poster{ background-size:cover; background-position:center; }
.video-box--poster::before{ content:""; position:absolute; inset:0; z-index:1; background:rgba(38,14,17,.42); }
.video-box .play{ width:78px; height:78px; border-radius:50%; background:rgba(184,146,79,.92); display:grid; place-items:center; cursor:pointer; transition:transform .3s; position:relative; z-index:2; }
.video-box .play:hover{ transform:scale(1.08); }
.video-box .play svg{ width:26px; height:26px; fill:#fff; stroke:none; margin-left:4px; }
/* Estado neutro "próximamente" (sin video aún) */
.video-box .play--soon{ background:rgba(38,14,17,.55); cursor:default; }
.video-box .play--soon:hover{ transform:none; }
.video-box__soon{ position:absolute; bottom:20px; left:0; right:0; text-align:center; z-index:2;
  color:var(--ivory); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; }

/* Lightbox de video */
.video-lightbox{ position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center;
  padding:24px; background:rgba(12,6,7,.88); }
.video-lightbox.is-open{ display:flex; }
.video-lightbox video, .video-lightbox iframe{ width:min(960px,100%); aspect-ratio:16/9; background:#000; border:0; border-radius:3px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.video-lightbox__close{ position:absolute; top:20px; right:26px; width:44px; height:44px; font-size:2rem; line-height:1;
  color:var(--ivory); background:none; border:0; cursor:pointer; }

/* =========================================================
   CARRITO
   ========================================================= */
.cart-wrap{ display:grid; grid-template-columns:1.6fr .9fr; gap:46px; align-items:start; }
.cart-item{ display:grid; grid-template-columns:90px 1fr auto; gap:20px; align-items:center; padding:22px 0; border-bottom:1px solid var(--line); }
.cart-item__img{ width:90px; height:90px; background:var(--ivory-2); display:grid; place-items:center; }
.cart-item__img svg{ width:54%; height:54%; stroke:var(--gold); fill:none; }
.cart-item h4{ font-family:var(--helvetica); font-size:1.2rem; }
.cart-item .meta{ font-size:.8rem; color:var(--muted); }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); margin-top:8px; }
.qty button{ width:30px; height:30px; background:none; border:0; cursor:pointer; font-size:1rem; }
.qty span{ width:34px; text-align:center; font-size:.9rem; }
.cart-item__price{ text-align:right; }
.cart-item__price .p{ color:var(--gold-deep); font-size:1.05rem; }
.cart-item__price button{ background:none; border:0; cursor:pointer; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:8px; text-decoration:underline; }
.cart-summary{ background:var(--ivory-2); padding:38px 32px; position:sticky; top:110px; }
.cart-summary h3{ font-size:1.6rem; margin-bottom:22px; }
.cart-summary .row{ display:flex; justify-content:space-between; padding:10px 0; font-size:.95rem; color:var(--muted); }
.cart-summary .row.total{ border-top:1px solid var(--line); margin-top:10px; padding-top:18px; color:var(--charcoal); font-size:1.15rem; }
.cart-summary .row.total b{ color:var(--gold-deep); }
.cart-empty{ text-align:center; padding:80px 20px; }
.cart-empty svg{ width:70px; height:70px; stroke:var(--gold); fill:none; margin:0 auto 24px; }
.cart-empty h3{ font-size:1.8rem; margin-bottom:12px; }
.cart-empty p{ color:var(--muted); margin-bottom:26px; }

/* aviso de entrega: todos los pedidos son para recojo en tienda */
.cart-notice{ display:flex; gap:16px; align-items:flex-start; background:var(--ivory-2);
  border:1px solid rgba(184,146,79,.35); border-left:3px solid var(--gold-deep);
  padding:20px 24px; margin-bottom:34px; border-radius:2px; }
.cart-notice svg{ width:24px; height:24px; stroke:var(--gold-deep); fill:none; stroke-width:1.6; flex:none; margin-top:1px; }
.cart-notice h4{ font-family:var(--helvetica); font-size:1rem; font-weight:500; letter-spacing:normal;
  text-transform:none; color:var(--charcoal); margin:0 0 4px; }
.cart-notice p{ font-size:.9rem; color:var(--muted); margin:0; line-height:1.55; }
.cart-notice a{ color:var(--gold-deep); text-decoration:underline; text-underline-offset:2px; }
.cart-notice a:hover{ color:var(--charcoal); }
@media(max-width:560px){
  .cart-notice{ padding:16px 18px; gap:12px; }
  .cart-notice p{ font-size:.85rem; }
}

/* drawer carrito */
.drawer{ position:fixed; inset:0 0 0 auto; width:min(420px,90%); background:var(--ivory); z-index:300;
  transform:translateX(100%); transition:transform .5s cubic-bezier(.7,0,.2,1); display:flex; flex-direction:column; box-shadow:-30px 0 60px -30px rgba(0,0,0,.4); }
.drawer.open{ transform:translateX(0); }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:24px; border-bottom:1px solid var(--line); }
.drawer__head h3{ font-size:1.4rem; }
.drawer__head button{ background:none; border:0; cursor:pointer; font-size:1.4rem; }
.drawer__body{ flex:1; overflow-y:auto; padding:24px; }
.drawer__body .empty{ text-align:center; color:var(--muted); padding:50px 0; }
.drawer__foot{ padding:24px; border-top:1px solid var(--line); }
.drawer__foot .row{ display:flex; justify-content:space-between; margin-bottom:16px; font-size:1.05rem; }
.mini-item{ display:grid; grid-template-columns:54px 1fr auto; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.mini-item__img{ width:54px; height:54px; background:var(--ivory-2); display:grid; place-items:center; }
.mini-item__img svg{ width:55%; height:55%; stroke:var(--gold); fill:none; }
.mini-item h5{ font-family:var(--helvetica); font-size:1rem; }
.mini-item .mp{ color:var(--gold-deep); font-size:.85rem; }
.mini-item .rm{ background:none; border:0; cursor:pointer; color:var(--muted); font-size:1.1rem; }

/* =========================================================
   LOGIN / AUTH
   ========================================================= */
.auth{ display:grid; grid-template-columns:1fr 1fr; min-height:84vh; }
.auth__visual{ background:var(--charcoal); color:var(--ivory); display:grid; place-items:center; position:relative; overflow:hidden; padding:40px; }
.auth__visual .glow{ position:absolute; inset:0; opacity:.45; background:radial-gradient(circle at 50% 40%, rgba(184,146,79,.55), transparent 62%); }
.auth__visual-inner{ position:relative; text-align:center; max-width:380px; }
.auth__visual svg{ width:90px; height:90px; stroke:var(--gold-light); fill:none; margin:0 auto 26px; }
.auth__visual h2{ font-size:2.4rem; margin-bottom:14px; }
.auth__visual p{ color:#b9b2a6; }
.auth__panel{ display:grid; place-items:center; padding:clamp(30px,5vw,70px); }
.auth__form{ width:min(420px,100%); }
.auth__tabs{ display:flex; gap:8px; margin-bottom:30px; border-bottom:1px solid var(--line); }
.auth__tabs button{ flex:1; background:none; border:0; padding:14px 0; cursor:pointer; font-size:.74rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted); border-bottom:2px solid transparent; transition:all .3s; }
.auth__tabs button.active{ color:var(--charcoal); border-color:var(--gold); }
.auth__form h3{ font-size:1.9rem; margin-bottom:6px; }
.auth__form .sub{ color:var(--muted); margin-bottom:26px; font-size:.92rem; }
.auth__msg{ margin-top:14px; font-size:.85rem; padding:10px 0; }
.auth__msg.ok{ color:var(--gold-deep); } .auth__msg.err{ color:#b3402e; }
.auth__hello{ background:var(--ivory-2); padding:18px 22px; margin-bottom:20px; font-size:.92rem; }
.link-line{ font-size:.85rem; color:var(--muted); margin-top:18px; text-align:center; }
.link-line a{ color:var(--gold-deep); border-bottom:1px solid var(--gold); }

/* campos */
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.field input,.field textarea,.field select{ width:100%; padding:14px 16px; border:1px solid var(--line); background:var(--ivory);
  font-family:var(--sans); font-size:.95rem; color:var(--charcoal); transition:border-color .3s; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--gold); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* =========================================================
   CONTACTO
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.info-block{ margin-bottom:28px; }
.info-block h4{ font-family:var(--sans); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:8px; }
.info-block p{ color:var(--muted); }
.info-block a{ color:var(--charcoal); border-bottom:1px solid var(--line); }

/* Confirmación / errores del formulario de contacto (respuesta real del servidor) */
.form-ok{ background:var(--ivory-2); border-left:3px solid var(--gold-deep);
  padding:14px 18px; margin-bottom:24px; color:var(--gold-deep); font-size:.92rem; }
.form-errors{ background:#fbe9e7; border:1px solid #ffab91; border-left:3px solid #c62828;
  padding:14px 18px; margin-bottom:24px; color:#b3261e; font-size:.9rem; line-height:1.5; }

/* =========================================================
   FAQ (acordeón)
   ========================================================= */
.faq{ max-width:820px; margin:0 auto; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{ width:100%; background:none; border:0; cursor:pointer; text-align:left; padding:24px 40px 24px 0;
  font-family:var(--sans); font-size:1.3rem; color:var(--charcoal); position:relative; }
.faq__q::after{ content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:1.5rem; color:var(--gold); transition:transform .3s; }
.faq__item.open .faq__q::after{ content:"−"; }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq__a p{ padding:0 0 24px; color:var(--muted); }

/* =========================================================
   PROSE (términos)
   ========================================================= */
.prose{ max-width:820px; margin:0 auto; }
.prose h2{ font-size:1.7rem; margin:38px 0 14px; }
.prose h2:first-child{ margin-top:0; }
.prose p{ color:#4a463f; margin-bottom:16px; }
.prose ul{ margin:0 0 16px 22px; color:#4a463f; }
.prose li{ margin-bottom:8px; }
.prose .updated{ font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:30px; }

/* =========================================================
   WHATSAPP flotante (P-25 §3b)
   A la DERECHA, como lo pidió el cliente. El bloque existía desde el rediseño
   pero ningún .blade.php lo usaba: se escribió el estilo y nunca se puso el
   elemento. Ahora vive en layouts/app.blade.php, antes de </body>.

   LA POSICIÓN VA EN VARIABLES a propósito: en la ficha de producto hay una
   barra fija de compra en celular que se le monta encima, y con variables ese
   ajuste es una línea desde la página que tiene la barra (ver el <style> de
   producto-detalle.blade.php) en vez de una discusión sobre este bloque.

   El z-index (150) queda DEBAJO del overlay (250) y del cajón del carrito (300):
   con el carrito abierto el botón no se le pone delante.
   ========================================================= */
.wsp{
  --wsp-bottom:22px;
  --wsp-right:22px;
  position:fixed; right:var(--wsp-right); bottom:var(--wsp-bottom);
  width:56px; height:56px; border-radius:50%;
  /* EL VERDE DE WHATSAPP SALIÓ A PROPÓSITO. Es el color de otra marca en una esquina fija de
     una tienda de alta joyería: canta en toda página y no se parece a nada del resto del
     sitio. El círculo toma el vino de la casa —el mismo de la cabecera, la franja superior y
     el pie— y el glifo el oro claro. La silueta de WhatsApp se reconoce igual sin su verde. */
  background:var(--charcoal); border:1px solid rgba(218,196,162,.28);
  display:grid; place-items:center;
  /* Escalera de z-index: ver la tabla de la cabecera de este archivo. Por encima del
     contenido, por debajo del overlay (250) y del cajón (300) — con el carrito abierto el
     botón no se pone delante. */
  z-index:240;
  box-shadow:0 12px 30px -10px rgba(38,14,17,.55);
  transition:transform .3s, background .3s, border-color .3s; }
.wsp:hover{ transform:scale(1.08); background:var(--gold-deep); border-color:var(--gold-light); }
.wsp svg{ width:30px; height:30px; fill:var(--gold-light); transition:fill .3s; }
.wsp:hover svg{ fill:var(--ivory); }

/* =========================================================
   REVEAL
   ========================================================= */
.reveal{ opacity:0; transform:translateY(46px) scale(.985); filter:blur(6px);
  transition:opacity 1.05s cubic-bezier(.16,1,.3,1), transform 1.15s cubic-bezier(.16,1,.3,1), filter 1.05s ease; will-change:opacity,transform,filter; }
/* Ya revelado, suelta la capa de composición: con decenas de .reveal en la página (reseñas, Visítanos,
   carruseles) mantenerlas todas en memoria de GPU para siempre es lo que hacía que, en el teléfono,
   de «Nuestros clientes» hacia abajo todo tardara en aparecer. */
.reveal.in{ opacity:1; transform:none; filter:none; will-change:auto; }
.reveal.d1{ transition-delay:.1s; } .reveal.d2{ transition-delay:.22s; } .reveal.d3{ transition-delay:.34s; } .reveal.d4{ transition-delay:.46s; }

/* =========================================================
   OVERLAY (menú móvil + drawer)
   ========================================================= */
.overlay{ position:fixed; inset:0; background:rgba(12,12,12,.45); opacity:0; pointer-events:none; transition:opacity .4s; z-index:250; }
.overlay.show{ opacity:1; pointer-events:auto; }

/* =========================================================
   RESPONSIVE — Sistema completo multi-breakpoint
   Breakpoints: 1024 · 880 · 768 · 560 · 400 · 360
   ========================================================= */

/* ---------- ≤ 1024px — Tablets landscape ---------- */
@media(max-width:1024px){
  .cuts{ grid-template-columns:repeat(3,1fr); }
  .fourc{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:30px; }
  .store-grid{ border-radius:14px; }
}

/* ---------- ≤ 880px — Tablets portrait / phablets ---------- */
@media(max-width:880px){
  /* Container más amplio para ganar espacio */
  .container{ width:94%; }

  /* NAV — Hamburguesa + drawer lateral */
  .nav {
    grid-template-columns: auto 1fr auto;
    padding: 12px 0;
  }
  .nav__toggle {
    display: grid;
    order: -1;
    min-width: 44px;
    min-height: 44px;
    place-items: center;
  }
  .nav__right-desktop {
    display: contents;
  }
  .nav__links--right {
    display: none;
  }
  .nav__icons {
    grid-column: 3;
    justify-self: end;
    display: flex;
    gap: 16px;
  }
  /* Tap targets en iconos (mínimo 44px) */
  .nav__icons a,
  .nav__icons button {
    min-width: 44px;
    min-height: 44px;
  }
  /* Ocultar label "Ingresar" en tablets estrechas */
  .login-label { display: none !important; }

  /* Mobile links drawer wrapper */
  .nav__links-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: min(82%, 340px);
    height: 100vh;
    height: 100dvh;
    background: var(--ivory);
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    transform: translateX(-100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 260;
    padding: 80px 24px 40px;
    align-items: stretch;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 20px 0 50px rgba(0,0,0,0.15);
  }
  .nav__links-wrapper.open {
    transform: translateX(0);
  }

  .nav__links {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .nav__links--left {
    gap: 0;
  }
  .nav__links--left > li {
    border-bottom: 1px solid var(--line);
  }
  .nav__links--left > li > a {
    padding: 16px 0;
    font-size: 0.82rem;
    width: 100%;
    justify-content: space-between;
    min-height: 48px;
  }
  .nav__links--left > li > a::after {
    display: none;
  }
  .nav__links--left .caret {
    margin-left: auto;
  }

  .nav__links--mobile-only {
    display: flex;
    gap: 0;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px dashed var(--line);
  }
  .nav__links--mobile-only a {
    padding: 14px 0;
    font-size: 0.82rem;
    color: var(--muted);
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* Mega Menu en Móvil (Acordeón) */
  .megamenu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    border: 0;
    box-shadow: none;
    padding: 0 0 14px 16px;
    background: transparent;
    display: none;
  }
  .has-megamenu.open-sub .megamenu {
    display: block;
  }
  .megamenu__container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .megamenu__cols {
    grid-template-columns: 1fr;
    gap: 20px;
    border-right: 0;
    padding-right: 0;
  }
  .megamenu__col h4 {
    margin-bottom: 10px;
  }
  .megamenu__col ul {
    gap: 10px;
  }
  .megamenu__col ul a {
    padding: 6px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .megamenu__featured {
    display: none;
  }

  /* Logotipo reducido */
  .brand-centered__name { font-size: 1.35rem; }
  .brand-centered__logo { height: 32px; }

  /* HERO — seccion vieja, si existe */
  .hero{ grid-template-columns:1fr; }
  .hero__stage{ height:46vh; order:-1; }
  .hero__content{ text-align:center; } .hero__cta{ justify-content:center; }

  /* Layouts de 2 columnas → 1 columna */
  /* .split--rev explícito: en escritorio lleva su propia partición reflejada y
     no debe depender del orden de las reglas para volver a una columna. */
  .split, .split--rev, .contact-grid, .store-grid, .cart-wrap, .auth{ grid-template-columns:1fr; }
  .split--rev .split__img{ order:0; }
  .split__body{ padding: clamp(30px, 5vw, 60px); }
  .split__img{ min-height:280px; aspect-ratio:4/3; }
  .cats, .testi__grid{ grid-template-columns:1fr; }
  .cats[style]{ grid-template-columns:1fr !important; }

  /* Testimonios — solo 1 col */
  .testi__grid{ gap:18px; }

  /* Auth layout */
  .auth__visual{ min-height:240px; }
  .auth__visual h2 { font-size: 1.8rem; }
  .auth__visual svg { width: 70px; height: 70px; }

  /* Carrito */
  .cart-summary{ position:static; }

  /* Tienda */
  .store-grid{ border-radius:12px; }
  .store-map, .store-map iframe{ min-height:320px; }
  .store-info{ padding: clamp(28px, 5vw, 60px); }

  /* Footer 2 cols en tablet */
  .footer__grid{ grid-template-columns:1fr 1fr; gap:30px; }
  .footer__bar{ flex-direction:column; text-align:center; gap:6px; }

  /* Sección encabezados */
  .head h2{ font-size:clamp(1.6rem,4vw,2.6rem); }
  .head{ max-width:540px; }

  /* Page Hero */
  .page-hero{ padding:clamp(60px,10vw,120px) 0 clamp(40px,6vw,70px); }
  .page-hero h1{ font-size:clamp(2rem,5vw,3.6rem); }

  /* Drawer carrito más ancho en móvil */
  .drawer{ width:min(420px,92%); }

  /* Section spacing reducido */
  .section{ padding:clamp(42px,7vw,90px) 0; }
}

/* ---------- ≤ 768px — Móviles grandes / tablets small ---------- */
@media(max-width:768px){
  /* Products en grid de 2 */

  /* Cuts gemología */
  .cuts{ grid-template-columns:repeat(2,1fr); gap:14px; }

  /* Footer a 1 columna */
  .footer__grid{ grid-template-columns:1fr; gap:24px; }
  .footer__brand p{ max-width:100%; }

  /* Brand footer */
  .brand--footer{ justify-content:center; }
  .footer__brand{ text-align:center; }
  .footer__social{ justify-content:center; }

  /* Page hero */
  .page-hero h1{ font-size:clamp(1.8rem,4.5vw,3rem); }
  .crumbs{ font-size:.6rem; margin-bottom:16px; }
  .page-hero .crumbs{ margin-bottom:16px; }

  /* Hero slider */
  .hero-slider{ min-height:420px; }

  /* CTA band */
  .cta-band h2{ font-size:clamp(1.6rem,4vw,2.8rem); }
  .cta-band p{ font-size:.92rem; }

  /* Filtros wrap */
  .filters{ gap:8px; margin-bottom:30px; }
  .filters a{ padding:8px 16px; font-size:.64rem; }

  /* Split body */
  .split__body h2{ font-size:clamp(1.6rem,3.5vw,2.4rem); }

  /* Login dashboard — flex wrap */
  #auth-dashboard .container > div[style*="display:flex"] {
    flex-direction: column !important;
    gap: 24px !important;
  }
}

/* ---------- ≤ 560px — Móviles estándar ---------- */
@media(max-width:560px){
  /* Container */
  .container{ width:92%; }

  /* Grids → 1 columna */
  .cuts{ grid-template-columns:1fr; gap:14px; }
  .fourc{ grid-template-columns:1fr; gap:14px; }
  .footer__grid{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }

  /* Announce barra */
  .announce{ font-size:.56rem; letter-spacing:.12em; padding:6px 0; }
  .announce__container{ gap:8px; }
  .announce__text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1; }

  /* Botones — más compactos */
  .btn{ padding:13px 22px; font-size:.7rem; }

  /* Tipografía escalada */
  .head h2{ font-size:clamp(1.4rem,5vw,2rem); }
  .head p{ font-size:.88rem; }
  .eyebrow{ font-size:.64rem; letter-spacing:.28em; }

  /* Hero slider */
  .hero-slider{ min-height:400px; }

  /* Split sections */
  .split__body{ padding:28px 20px; }
  .split__body h2{ font-size:clamp(1.4rem,5vw,2rem); }
  .split__body p{ font-size:.9rem; margin-bottom:20px; }
  .split__img{ min-height:220px; }

  /* Feature list */
  .feature svg{ width:26px; height:26px; }
  /* .72rem dejaba el título MÁS PEQUEÑO que su propia descripción (.85rem),
     invirtiendo la jerarquía en móvil. El h4 debe seguir por encima del cuerpo. */
  .feature h4{ font-size:1rem; }
  .feature p{ font-size:.85rem; }

  /* Quotes / Testimonios */
  .quote{ padding:24px 18px; }
  .quote p{ font-size:1.05rem; }

  /* Cart */
  .cart-summary{ padding:24px 18px; }
  .cart-item{ grid-template-columns:60px 1fr auto; gap:10px; padding:16px 0; }
  .cart-item__img{ width:60px; height:60px; }
  .cart-item h4{ font-size:1rem; }
  .cart-item .meta{ font-size:.75rem; }
  .qty button{ width:28px; height:28px; }

  /* Drawer carrito */
  .drawer{ width:92%; }
  .drawer__head{ padding:18px; }
  .drawer__body{ padding:18px; }
  .drawer__foot{ padding:18px; }
  .mini-item{ grid-template-columns:48px 1fr auto; gap:10px; padding:12px 0; }
  .mini-item__img{ width:48px; height:48px; }

  /* Footer spacing */
  .footer{ padding-top:50px; }
  .footer h5{ margin-bottom:12px; }
  .footer__bar{ font-size:.66rem; padding:18px 0; }

  /* Gemología cortes */
  .cut{ padding:22px 12px; }
  .cut svg{ width:56px; height:56px; margin-bottom:12px; }
  .cut h4{ font-size:1.05rem; }
  .cgem{ padding:24px 16px; }
  .cgem .big{ font-size:2.4rem; }

  /* Tienda — store */
  .store-grid{ border-radius:10px; }
  .store-info h2{ font-size:clamp(1.6rem,4vw,2.2rem); }
  .store-info .info-row{ padding:14px 0; }
  .store-info .info-row svg{ width:22px; height:22px; }

  /* Page Hero reducido */
  .page-hero{ padding:clamp(50px,8vw,90px) 0 clamp(30px,5vw,50px); }
  .page-hero h1{ font-size:clamp(1.6rem,5.5vw,2.8rem); }
  .page-hero p{ font-size:.88rem; }

  /* CTA band */
  .cta-band h2{ font-size:clamp(1.4rem,5vw,2.2rem); }
  .cta-band p{ font-size:.88rem; margin-bottom:22px; }

  /* FAQ */
  .faq__q{ font-size:1.1rem; padding:20px 36px 20px 0; }

  /* Auth login */
  .auth__visual{ min-height:200px; padding:30px 20px; }
  .auth__visual h2{ font-size:1.5rem; }
  .auth__visual svg{ width:60px; height:60px; }
  .auth__panel{ padding:30px 20px; }
  .auth__form h3{ font-size:1.5rem; }
  .auth__tabs button{ font-size:.68rem; padding:12px 0; }

  /* Confirmación page inline styles override */
  .section[style*="max-width: 700px"] {
    max-width: 100% !important;
  }
  .section > div[style*="padding:40px"] {
    padding: 24px 18px !important;
  }

  /* Contacto */
  .contact-grid{ gap:30px; }

  /* Privacidad / Términos */
  .prose h2{ font-size:1.4rem; margin:28px 0 10px; }

  /* Paginación */
  .pagination{ margin-top:36px; }
  .pagination__link{ min-width:36px; height:36px; font-size:.76rem; }

  /* Search overlay */
  .search-overlay{ padding:clamp(60px,14vh,140px) 16px 16px; }
  .search-overlay__form{ padding:22px 18px 24px; }
  .search-overlay__label{ font-size:1.2rem; margin-bottom:12px; }
  .search-overlay__row{ flex-direction:column; }
  .search-overlay__close{ top:14px; right:16px; }

  /* Filtros */
  .filters a{ padding:7px 14px; font-size:.62rem; letter-spacing:.12em; }

  /* WhatsApp floating — ligeramente más pequeño */
  .wsp{ --wsp-bottom:16px; --wsp-right:16px; width:50px; height:50px; }
  .wsp svg{ width:26px; height:26px; }

  /* Workshop */
  .workshop-grid{ gap:16px; }
  .workshop-card__info{ padding:18px 16px 20px; }
  .workshop-card__info h3{ font-size:1.15rem; }
  .workshop-card__info p{ font-size:.84rem; }

  /* Instagram carousel items más pequeños */
  .instagram-carousel__item{ flex:0 0 180px; width:180px; }
  .instagram-carousel__track{ gap:16px; }

  /* Video box */
  .video-box .play{ width:62px; height:62px; }
  .video-box .play svg{ width:22px; height:22px; }
}

/* ---------- ≤ 400px — Móviles pequeños ---------- */
@media(max-width:400px){
  .container{ width:94%; }

  /* Nav brand — más compacto */
  .brand-centered__name{ font-size:1.25rem; letter-spacing:.05em; text-indent:.05em; }
  .brand-centered__sub{ font-size:.42rem; letter-spacing:.3em; text-indent:.3em; }
  .brand-centered__logo{ height:28px; }

  /* Hero slider */
  .hero-slider{ min-height:360px; }

  /* Botón compacto */
  .btn{ padding:12px 18px; font-size:.66rem; letter-spacing:.18em; }
  .btn--sm{ padding:10px 16px; font-size:.62rem; }

  /* Confirmación y checkout — texto más pequeño */
  .cart-item h4{ font-size:.92rem; }
  .cart-item .meta{ font-size:.7rem; }

  /* Quote */
  .quote p{ font-size:.98rem; line-height:1.4; }
  .quote cite{ font-size:.62rem; }

  /* Footer */
  .footer__social a{ width:34px; height:34px; }
  .footer__social svg{ width:14px; height:14px; }
  .footer ul a, .footer ul li{ font-size:.82rem; }

  /* Filtros — scroll horizontal */
  .filters{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    justify-content:flex-start; padding-bottom:8px; scrollbar-width:none; }
  .filters::-webkit-scrollbar{ display:none; }
  .filters a{ flex:0 0 auto; white-space:nowrap; }

  /* FAQ */
  .faq__q{ font-size:1rem; padding:18px 32px 18px 0; }
  .faq__q::after{ font-size:1.3rem; }
  .faq__a p{ font-size:.88rem; }

  /* Instagram items aún más pequeños */
  .instagram-carousel__item{ flex:0 0 160px; width:160px; }

  /* Store */
  .store-info{ padding:24px 18px; }
  .store-info h2{ font-size:1.5rem; }
  .store-map, .store-map iframe{ min-height:260px; }

  /* Auth */
  .auth__visual{ min-height:180px; }
  .auth__visual h2{ font-size:1.3rem; }
  .auth__form h3{ font-size:1.3rem; }
  .auth__form .sub{ font-size:.85rem; }
  .field label{ font-size:.62rem; }
  .field input, .field textarea, .field select{ padding:12px 14px; font-size:.9rem; }
}

/* ---------- ≤ 360px — Móviles ultra-pequeños ---------- */
@media(max-width:360px){
  .container{ width:96%; }

  /* Brand minúsculo */
  .brand-centered__name{ font-size:1.1rem; letter-spacing:.05em; text-indent:.05em; }
  .brand-centered__logo{ height:24px; }
  .brand-centered__sub{ display:none; }

  /* Hero */
  .hero-slider{ min-height:320px; }

  /* Section general */
  .section{ padding:clamp(32px,6vw,60px) 0; }

  /* Head */
  .head h2{ font-size:clamp(1.2rem,5vw,1.6rem); }

  /* Footer brand text */
  .brand__text{ font-size:1.5rem; letter-spacing:.05em; text-indent:.05em; }
  .brand__text small{ font-size:.42rem; letter-spacing:.35em; }

  /* Drawer max */
  .drawer{ width:96%; }

  /* Page hero */
  .page-hero h1{ font-size:clamp(1.3rem,5vw,2rem); }
  .page-hero p{ font-size:.82rem; }

  /* CTA */
  .cta-band h2{ font-size:clamp(1.2rem,5vw,1.8rem); }

  /* Instagram — mínimo */
  .instagram-carousel__item{ flex:0 0 140px; width:140px; }
  .instagram-carousel__track{ gap:12px; }
}

/* =========================================================
   MEJORAS GLOBALES PARA TÁCTIL / MÓVIL
   ========================================================= */
/* Touch: prevenir zoom accidental en inputs iOS */
@media(max-width:880px){
  input, textarea, select { font-size: 16px !important; }
}

/* Textos largos en celdas de datos no deben desbordar */
.cart-item__price .p,
.product__price,
.pdp-info__price {
  word-break: break-word;
}

/* Mejores touch targets para todos los botones */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .qty button { min-width: 38px; min-height: 38px; }
  .faq__q { min-height: 48px; }
  .pagination__link { min-width: 40px; min-height: 40px; }
}

/* =========================================================
   MOVIMIENTO FLUIDO Y LUJOSO
   ========================================================= */
/* entrada de página */
@keyframes pageIn{ from{ opacity:0; } to{ opacity:1; } }
body{ animation:pageIn .9s ease both; }

/* barra de progreso de scroll (oro) */
.scroll-progress{ position:fixed; top:0; left:0; height:2px; width:0%; z-index:400;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold-light)); transition:width .12s linear; }

/* parallax suave */
[data-parallax]{ will-change:transform; }

/* títulos y botones con transición elegante */
.btn{ transition:color .4s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.btn:active{ transform:scale(.97); }

/* hover lujoso en tarjetas de producto/categoría/cortes */
.cut, .showroom, .quote{ transition:transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s ease; }
.quote:hover{ transform:translateY(-6px); box-shadow:0 34px 60px -38px rgba(42,28,24,.45); }

/* aparición escalonada de imagen del hero */
.hero__stage{ animation:fadeStage 1.4s .2s ease both; }
@keyframes fadeStage{ from{ opacity:0; transform:scale(1.04); } to{ opacity:1; transform:none; } }

/* respeta usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ filter:none; transform:none; opacity:1; }
}

/* =========================================================
   INSTAGRAM FEED CAROUSEL
   ========================================================= */
.instagram-section {
  padding-bottom: 0 !important; /* El carrusel va de borde a borde y conecta abajo */
  overflow: hidden;
}
.instagram-username {
  color: var(--gold-deep);
  border-bottom: 1px solid transparent;
  transition: all 0.35s ease;
}
.instagram-username:hover {
  color: var(--charcoal);
  border-color: var(--charcoal);
}
.instagram-carousel {
  position: relative;
  width: 100%;
  margin-top: 24px;
}
.instagram-carousel__track-container {
  width: 100%;
  overflow: hidden;
}
.instagram-carousel__track {
  display: flex;
  gap: 26px;
  width: max-content;
  padding: 10px 0 30px; /* Espacio para que las sombras y la elevación no se corten */
  animation: instagram-marquee 64s linear infinite; /* 48 s antes: un 25 % más lento (F9) */
  will-change: transform;
}
.instagram-carousel:hover .instagram-carousel__track {
  animation-play-state: paused; /* Pausar en hover */
}
@keyframes instagram-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0); /* Reseteo perfecto de la mitad */
  }
}
.instagram-carousel__item {
  flex: 0 0 260px;
  width: 260px;
  aspect-ratio: 9/16; /* Relación de aspecto vertical de Reels (9:16) */
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  border-radius: 16px;
  box-shadow: 0 12px 30px -14px rgba(38, 14, 17, 0.45);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.instagram-carousel__item::after {
  /* Degradado inferior permanente para dar profundidad y acabado */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(38, 14, 17, 0.55) 0%, transparent 42%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  border-radius: inherit;
}
.instagram-carousel__item:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 50px -18px rgba(38, 14, 17, 0.6);
}
.instagram-carousel__item a {
  display: block;
  width: 100%;
  height: 100%;
}
.instagram-carousel__media-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  background: radial-gradient(120% 120% at 50% 30%, #4a1f26 0%, var(--wine) 55%, var(--wine-2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.instagram-carousel__thumb,
.instagram-carousel__active-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  opacity: 1;
}
.instagram-carousel__item:hover .instagram-carousel__thumb,
.instagram-carousel__item:hover .instagram-carousel__active-video {
  transform: scale(1.06);
}
.instagram-carousel__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(74, 31, 38, 0.55) 0%, rgba(34, 12, 14, 0.78) 100%);
  backdrop-filter: saturate(1.1);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 3;
  border-radius: inherit;
}
.instagram-carousel__item:hover .instagram-carousel__overlay {
  opacity: 1;
}
.instagram-likes {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  transform: translateY(10px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.instagram-carousel__item:hover .instagram-likes {
  transform: translateY(0);
}
.instagram-likes .heart-icon {
  width: 22px;
  height: 22px;
  fill: #fff;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.instagram-brand-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  color: rgba(255, 255, 255, 0.9);
  transition: transform 0.3s;
}
.instagram-brand-badge svg {
  width: 18px;
  height: 18px;
}
.instagram-video-badge-wrapper {
  position: absolute;
  top: 18px;
  left: 18px;
  color: rgba(255, 255, 255, 0.9);
}
.instagram-video-badge-wrapper svg {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.instagram-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(244, 239, 232, 0.9);
  border: 1px solid var(--line);
  color: var(--charcoal);
  cursor: pointer;
  z-index: 10;
  display: grid;
  place-items: center;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(55,21,25,0.08);
}
.instagram-carousel__btn:hover {
  background: var(--charcoal);
  color: var(--ivory);
  border-color: var(--charcoal);
  transform: translateY(-50%) scale(1.08);
}
.instagram-carousel__btn:active {
  transform: translateY(-50%) scale(0.95);
}
.instagram-carousel__btn svg {
  width: 20px;
  height: 20px;
}
.instagram-carousel__btn--prev {
  left: 20px;
}
.instagram-carousel__btn--next {
  right: 20px;
}

/* RESPONSIVE INSTAGRAM CAROUSEL */
@media(max-width: 880px) {
  .instagram-carousel__item {
    flex: 0 0 200px; /* Más compacto en tabletas y móviles */
    width: 200px;
  }
  .instagram-carousel__btn {
    display: none; /* Scroll táctil nativo en móvil */
  }
}

/* =========================================================
   LOGO INTEGRATION
   ========================================================= */
.brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.brand__logo {
  height: 38px;
  width: auto;
  object-fit: contain;
  transition: height 0.5s ease;
}
.brand__text {
  font-family: var(--marca);
  font-size: 2.1rem;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
  font-weight: 600;
  line-height: 1.1;
  text-align: left;
  transition: font-size 0.5s ease;
}
.brand__text small {
  display: block;
  font-family: var(--sans);
  font-size: 0.5rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--gold-deep);
  margin-top: 2px;
}
.header.scrolled .brand__logo {
  height: 32px;
}
.header.scrolled .brand__text {
  font-size: 1.6rem;
}

/* Footer brand adjustments */
.brand--footer {
  justify-content: flex-start;
  margin-bottom: 18px;
  color: #ffffff;
}
.brand__logo--footer {
  height: 44px;
  background: transparent;
}

/* =========================================================
   SECCIÓN: NUESTRO TALLER / ARTESANÍA
   ========================================================= */
.workshop-section {
  background: var(--ivory-2);
}
.workshop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 56px;
}
.workshop-card {
  position: relative;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 12px 34px -18px rgba(55,21,25,0.10);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.55s ease;
}
.workshop-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 55px -24px rgba(55,21,25,0.30);
  border-color: var(--gold);
}
.workshop-card__media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--charcoal);
}
.workshop-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}
.workshop-card:hover .workshop-card__media img {
  transform: scale(1.07);
  filter: saturate(1.05);
}
/* Velo degradado inferior para dar profundidad y unificar el número */
.workshop-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(38,14,17,0.55) 0%, rgba(38,14,17,0.06) 42%, transparent 70%);
  pointer-events: none;
}
/* Número de etapa, estilo editorial */
.workshop-card__num {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 2;
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--gold-light);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  transition: color 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.workshop-card:hover .workshop-card__num {
  color: #fff;
  transform: translateY(-2px);
}
.workshop-card__info {
  padding: 22px 20px 24px;
  text-align: left;
  position: relative;
}
/* Filete dorado sobre el título */
.workshop-card__info::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  width: 32px;
  height: 2px;
  background: var(--gold);
  opacity: 0.8;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.workshop-card:hover .workshop-card__info::before {
  width: 56px;
}
.workshop-card__info h3 {
  font-size: 1.35rem;
  font-family: var(--helvetica);
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
.workshop-card__info p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

@media(max-width: 990px) {
  .workshop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media(max-width: 520px) {
  .workshop-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .workshop-card__media {
    aspect-ratio: 16/10;
  }
}
@media(max-width: 580px) {
  .workshop-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* =========================================================
   GALERÍA DE GEMAS (PÁGINA GEMOLOGÍA)
   ========================================================= */
.gem-gallery {
  margin-top: 56px;
  width: 100%;
}
.gem-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.gem-gallery__item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--charcoal);
  box-shadow: 0 10px 30px -15px rgba(55, 21, 25, 0.05);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.gem-gallery__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(55, 21, 25, 0.12);
  border-color: var(--gold);
}
.gem-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.gem-gallery__item:hover img {
  transform: scale(1.08);
}
.gem-gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(38, 14, 17, 0.95), transparent);
  color: var(--ivory);
  padding: 24px 14px 12px;
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-align: center;
  pointer-events: none;
}

@media(max-width: 990px) {
  .gem-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media(max-width: 480px) {
  .gem-gallery__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* =========================================================
   HERO — Fundido con enfoque (CD-01 F1)
   Sin WebGL, sin Three.js, sin GSAP: dos <img> apiladas y una
   transición de opacidad + blur + scale. La foto se ve nítida,
   que es el activo que vende (§1).
   ========================================================= */
.hero-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;          /* móvil: evita el salto por la barra del navegador */
  min-height: 560px;
  max-height: 860px;
  background: var(--wine-2);
  overflow: hidden;
}
.slider-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--wine-2);
}

/* --- Las diapositivas --- */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
  z-index: 1;
}
.hero-slide.is-active { opacity: 1; z-index: 2; }
.hero-slide.is-saliente { z-index: 1; }   /* debajo de la que entra (ver hero-slider.js, ir()) */
/* Foto casi cuadrada (el velo): con cover el hero panorámico le cortaba media cara. Se muestra
   entera y centrada, y los bordes se funden con el vino del fondo en vez de cortarse en seco. */
/* Fondo opaco propio: con los bordes de la foto fundidos, sin él se transparentaba la diapositiva
   vecina (la 5 y la 1) por los lados. */
.hero-slide--completa { background: var(--wine-2); }
.hero-slide.hero-slide--completa img {
  /* La caja de la imagen toma su proporción (no el ancho del hero): así la máscara actúa sobre
     los bordes de la foto y no sobre el vacío de los lados. */
  width: auto; max-width: 100%; margin: 0 auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
/* Foto casi blanca (GIA): sin esto el menú blanco de la cabecera casi no se lee sobre ella. */
.hero-slide--clara::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(34,12,14,.5) 0%, rgba(34,12,14,0) 30%);
}
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* estado de reposo: nítido y a escala 1 */
  filter: blur(0);
  transform: scale(1);
  transition: filter 1.4s cubic-bezier(.16,1,.3,1), transform 1.8s cubic-bezier(.16,1,.3,1);
}
/* La que ENTRA arranca desenfocada y un poco grande, y se resuelve.
   8px y 1.06 son el techo: más que eso deja de ser enfoque y es efecto. */
.hero-slide.is-entering img {
  filter: blur(8px);
  transform: scale(1.06);
}

/* --- Legibilidad del titular ---
   Degradado sobre la ZONA DEL TEXTO (banda del tercio inferior), no un velo
   sobre toda la foto ni una sombra dura.

   POR QUÉ UNA BANDA Y NO UNA CUÑA DIAGONAL: la primera versión usaba
   linear-gradient(75deg, …) y se agotaba a media línea de texto. Medido sobre
   img/inicio/hero/1.webp —la MÁS CLARA de las seis, que es contra la que hay
   que verificar— el párrafo caía sobre píxeles casi blancos (~250,250,248) con
   tinta blanca: 2.8:1, muy por debajo de 4.5:1. La banda cubre la zona del
   texto completa y deja el resto de la foto limpio. */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(0deg,
      rgba(34,12,14,.9)  0%,
      rgba(34,12,14,.66) 30%,
      rgba(34,12,14,0)   60%),
    linear-gradient(90deg,
      rgba(38,14,17,.6) 0%,
      rgba(38,14,17,.2) 44%,
      rgba(38,14,17,0)  72%);
}

/* --- Contenido (F9 §1) ---
   Titular, píldora y puntos, en columna y centrados, a 56 px del borde inferior
   (32 en móvil), con 26 px entre cada uno. El titular va en Instrument Serif: es un
   titular de PÁGINA, que es donde la serif tiene permiso (CLAUDE.md). */
.slide-content {
  position: absolute;
  left: 0; right: 0; bottom: 56px;
  z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  padding-inline: 20px;
  text-align: center;
}
.slide-title {
  font-family: var(--display-serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: clamp(56px, 6.4vw, 92px);
  line-height: .9;
  color: #fff;
  margin: 0;
  max-width: 1100px;
}
/* La cola del titular va en minúscula cursiva, como en el diseño («LO VERDADERO permanece»). */
.slide-title em { font-style: italic; text-transform: none; }

/* --- Píldora: 46 px (48 en móvil), borde de 1 px; al pasar el mouse se rellena de crema
   con el texto en vino. Sirve sobre cualquier banda oscura (hero, «Compra ahora», reseñas). --- */
.btn--pildora {
  border-radius: 999px; min-height: 46px; padding: 0 34px;
  background: transparent; color: var(--ivory); border-color: var(--ivory);
}
.btn--pildora::after { background: var(--ivory); }
.btn--pildora:hover { color: var(--charcoal); }

/* --- Indicador mínimo ---
   Reemplaza los seis rótulos de 160 px que el cliente marcó ilegibles. Seis puntos,
   clicables, con 44 px de área real, y no tapan la joya. */
.slide-indicator {
  display: flex;
  align-items: center;
}
.slide-dots { display: flex; gap: 7px; }
.slide-dot {
  width: 7px; height: 7px;
  padding: 0; border: 0; border-radius: 4px;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  transition: width .35s ease, background .35s ease;
  position: relative;
}
/* área tappable de 44px sin agrandar el punto */
.slide-dot::before { content:""; position:absolute; inset:-18px -8px; }
.slide-dot.is-active { width: 22px; background: var(--ivory); }

@media (max-width: 768px) {
  .hero-slider { min-height: 520px; }
  .slide-content { bottom: 32px; }
  .btn--pildora { min-height: 48px; }
  /* en móvil el titular son dos líneas: lo de siempre y, debajo, la cola en cursiva */
  .slide-title em { display: block; }
  /* en vertical el texto ya no está al lado: solo banda, sin cuña lateral */
  .hero-veil {
    background: linear-gradient(0deg,
      rgba(34,12,14,.9)  0%,
      rgba(34,12,14,.62) 34%,
      rgba(0,0,0,0)      62%);
  }
}

/* Sin transición si el sistema lo pide. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-slide img { transition: none !important; }
  .hero-slide.is-entering img { filter: none; transform: none; }
}

/* ---------- Overlay de búsqueda (H3) ---------- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(80px, 18vh, 200px) 24px 24px;
  background: rgba(24, 12, 14, 0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
.search-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.search-overlay__form {
  width: min(680px, 100%);
  background: var(--ivory, #fff);
  border: 1px solid var(--line, #e6e0d8);
  border-radius: 3px;
  padding: 28px clamp(20px, 4vw, 36px) 30px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  transform: translateY(-14px);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.search-overlay.is-open .search-overlay__form {
  transform: translateY(0);
}
.search-overlay__label {
  display: block;
  font-family: var(--helvetica);
  font-size: 1.5rem;
  color: var(--charcoal, #2a1a1c);
  margin-bottom: 16px;
}
.search-overlay__row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.search-overlay__row input {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--charcoal, #2a1a1c);
  background: var(--ivory-2, #f7f3ee);
  border: 1px solid var(--line, #e6e0d8);
  border-radius: 2px;
  outline: none;
}
.search-overlay__row input:focus {
  border-color: var(--gold, #b8924f);
}
.search-overlay__row .btn {
  white-space: nowrap;
}
.search-overlay__close {
  position: absolute;
  top: 26px;
  right: 30px;
  width: 44px;
  height: 44px;
  font-size: 2rem;
  line-height: 1;
  color: var(--ivory, #fff);
  background: none;
  border: 0;
  cursor: pointer;
}
@media (max-width: 560px) {
  .search-overlay__row { flex-direction: column; }
  .search-overlay__close { top: 14px; right: 16px; }
}

/* =========================================================
   GUÍA DE TALLAS DE ANILLO (PDP-01)
   ========================================================= */
.guia-tallas { margin-bottom: 24px; }
.guia-tallas__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gold-deep);
  cursor: pointer;
  text-align: left;
}
.guia-tallas__toggle:hover { color: var(--charcoal); }
.guia-tallas__toggle:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.guia-tallas__toggle-label { text-decoration: underline; text-underline-offset: 3px; }
.guia-tallas__chevron { flex-shrink: 0; transition: transform 0.25s ease; }
.guia-tallas__toggle[aria-expanded="true"] .guia-tallas__chevron { transform: rotate(180deg); }

.guia-tallas__panel {
  margin-top: 16px;
  padding: 20px;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.guia-tallas__panel[hidden] { display: none; }

.guia-tallas__metodos {
  display: grid;
  gap: 14px;
  margin-bottom: 20px;
}
@media (min-width: 560px) {
  .guia-tallas__metodos { grid-template-columns: 1fr 1fr; }
}
.guia-tallas__metodo { display: flex; gap: 12px; }
.guia-tallas__metodo-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold-deep);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--sans);
  display: flex;
  align-items: center;
  justify-content: center;
}
.guia-tallas__metodo strong {
  display: block;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--charcoal);
  margin-bottom: 4px;
}
.guia-tallas__metodo p {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}

.guia-tallas__tabla-wrap {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.guia-tallas__tabla { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 0.82rem; }
.guia-tallas__tabla thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--ivory-2);
  color: var(--charcoal);
  text-align: left;
  padding: 8px 10px;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.guia-tallas__tabla td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--charcoal);
}
.guia-tallas__fila--disponible { background: rgba(176, 144, 94, 0.14); font-weight: 500; }
.guia-tallas__fila--agotada td { color: var(--muted); text-decoration: line-through; }
.guia-tallas__fila--no-ofrecida td { color: var(--muted); }

.guia-tallas__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.guia-tallas__notas {
  margin: 16px 0 0;
  padding-left: 18px;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.6;
}
.guia-tallas__notas a { color: var(--gold-deep); }

/* Los clientes compran en talla Nacional: en móvil se oculta la equivalencia
   americana para que Talla, Diám. y Circunf. entren cómodas. */
@media (max-width: 560px) {
  .guia-tallas__col-us { display: none; }
}

/* =========================================================
   PÁGINAS DE ERROR (CD-01 F7)
   Bloque nuevo, al final de styles.css. No lo usa el 503, que es
   autocontenido con estilos en línea a propósito.

   El criterio es el del 404 que mandó el cliente como referencia:
   número enorme, titular enorme, UNA frase, UN camino, y una foto de
   producto. No pide disculpas: sigue vendiendo.
   ========================================================= */
.error-page{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  min-height:clamp(480px, 72vh, 640px);
  background:var(--ivory);
}
.error-page__body{
  padding:clamp(36px,6vw,64px) clamp(24px,5vw,56px);
  display:flex; flex-direction:column; justify-content:center;
}
.error-page__code{
  font-family:var(--titular); font-weight:600;
  font-size:clamp(4rem,9vw,7rem); line-height:.9; letter-spacing:.02em;
  color:var(--charcoal); margin:0;
}
.error-page__title{
  font-family:var(--titular); font-weight:600;
  text-transform:uppercase; letter-spacing:.05em;
  font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.1;
  margin:18px 0 12px;
}
.error-page__text{
  font-family:var(--sans); font-size:1rem; line-height:1.6;
  color:var(--muted); max-width:460px; margin:0 0 26px;
}

.error-page__search{ display:flex; max-width:480px; margin-bottom:18px; }
.error-page__search input{
  flex:1; min-width:0; height:56px; padding:0 16px;
  border:1px solid rgba(55,21,25,.3); border-right:0;
  background:#fff; font-family:var(--sans); font-size:1rem; color:var(--charcoal);
}
.error-page__search input:focus{ outline:none; border-color:var(--gold); }
.error-page__search .btn{ height:56px; padding:0 26px; }

.error-page__actions{ display:flex; gap:10px; flex-wrap:wrap; }

.error-page__media{
  background:var(--ivory-2);
  display:grid; place-items:center; position:relative; overflow:hidden;
}
.error-page__media img{ width:100%; height:100%; object-fit:cover; }
.error-page__pendiente{
  position:relative;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.72rem; letter-spacing:.08em; line-height:1.8;
  color:var(--muted); text-align:center;
}
.error-page__media:has(.error-page__pendiente)::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg,
    rgba(55,21,25,.05) 0 10px, rgba(55,21,25,.02) 10px 20px);
}

@media(max-width:880px){
  .error-page{ grid-template-columns:1fr; min-height:0; }
  /* La foto va DEBAJO en celular: primero la salida, después el escaparate. */
  .error-page__media{ order:2; aspect-ratio:4/3; }
  .error-page__body{ order:1; }
  .error-page__search{ flex-direction:column; gap:10px; max-width:none; }
  .error-page__search input{ border-right:1px solid rgba(55,21,25,.3); }
  .error-page__search .btn,
  .error-page__actions .btn{ width:100%; }
}

/* =========================================================
   PANEL DEL CARRITO — «Únelo con esto» (CD-01 F5)
   =========================================================
   La confirmación se encoge a UNA línea y lo que crece es lo siguiente. El total
   va discreto al pie, con el camino a pagar y la salida de «seguir mirando» al
   mismo alcance: quien acaba de añadir algo está a un clic de sumar otra pieza y
   a un clic de irse, y las dos salidas tienen que estar donde ya está mirando.
   ========================================================= */

/* ---- La confirmación ---- */
.drawer-ok{
  display:flex; gap:12px; align-items:center;
  padding-bottom:16px; border-bottom:1px solid var(--line);
}
.drawer-ok__img{
  width:52px; height:52px; flex:none; overflow:hidden;
  background:var(--ivory-2); display:grid; place-items:center;
}
.drawer-ok__img svg{ width:55%; height:55%; stroke:var(--gold); fill:none; }
.drawer-ok__img img{ width:100%; height:100%; object-fit:cover; }
.drawer-ok__txt{ min-width:0; }
.drawer-ok__nombre{ font-family:var(--titular); font-weight:600; font-size:.85rem; line-height:1.3; }
/* El detalle se queda en Helvetica: es una frase corta, no un rótulo. */
.drawer-ok__meta{ font-family:var(--sans); font-size:.78rem; color:var(--muted); }

/* ---- «Únelo con esto» ---- */
.drawer-sug{ padding-top:22px; }
.drawer-sug h4{
  font-family:var(--titular); font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  font-size:1.25rem; line-height:1.2; margin:0 0 4px;
}
.drawer-sug__sub{ font-family:var(--sans); font-size:.82rem; color:var(--muted); margin:0 0 18px; }

.drawer-sug__lista{ display:grid; gap:16px; }
.drawer-sug__item{ display:flex; gap:14px; align-items:center; }
.drawer-sug__foto{
  width:118px; height:148px; flex:none; overflow:hidden;
  background:var(--ivory-2); display:grid; place-items:center;
}
.drawer-sug__foto svg{ width:50%; height:50%; stroke:var(--gold); fill:none; }
.drawer-sug__datos{ min-width:0; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.drawer-sug__nombre{
  font-family:var(--titular); font-weight:600;
  font-size:.95rem; line-height:1.2; color:var(--charcoal);
}
.drawer-sug__nombre:hover{ color:var(--gold-deep); }
.drawer-sug__precio{ font-family:var(--sans); font-size:.82rem; color:var(--charcoal); }
.drawer-sug__datos .btn{ min-height:44px; padding:0 20px; }

/* ---- El estado de CERO sugerencias, que está diseñado ----
   No es un hueco: es el que más se va a ver mientras el catálogo esté a medio
   cargar y mientras haya piezas sin público etiquetado. Ofrece dos salidas
   concretas en vez de dejar el panel en blanco. */
.drawer-sug__vacio{
  border:1px solid var(--line); background:var(--ivory-2); padding:22px 20px;
}
.drawer-sug__vacio-t{
  font-family:var(--titular); font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; font-size:.88rem; margin-bottom:8px;
}
.drawer-sug__vacio p{ font-family:var(--sans); font-size:.84rem; line-height:1.55; color:var(--charcoal); margin:0 0 16px; }
.drawer-sug__acciones{ display:flex; gap:10px; flex-wrap:wrap; }
.drawer-sug__acciones a{
  min-height:44px; display:inline-flex; align-items:center; padding:0 18px;
  border:1px solid var(--charcoal);
  font-family:var(--titular); font-weight:600;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--charcoal); transition:background .3s, color .3s;
}
.drawer-sug__acciones a:hover{ background:var(--charcoal); color:var(--ivory); }
.drawer-sug__acciones a.is-suave{ border-color:rgba(55,21,25,.3); color:var(--gold-deep); }
.drawer-sug__acciones a.is-suave:hover{ background:transparent; border-color:var(--gold); }

/* ---- Pie ---- */
.drawer__foot .row{
  font-family:var(--titular); font-weight:600;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.drawer__foot .row .amt{ color:var(--charcoal); }
.drawer__pagar{ min-height:52px; }
.drawer__seguir{ text-align:center; margin-top:10px; }
.drawer__seguir button{
  background:none; border:0; cursor:pointer;
  font-family:var(--titular); font-weight:600;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-deep); border-bottom:1px solid rgba(138,103,64,.5);
  padding:0 0 2px;
}
.drawer__seguir button:hover{ color:var(--charcoal); border-bottom-color:var(--charcoal); }

@media(max-width:560px){
  /* La foto de la sugerencia cede primero: lo que no puede encogerse es el botón. */
  .drawer-sug__foto{ width:92px; height:116px; }
  .drawer-sug h4{ font-size:1.1rem; }
}

/* =========================================================
   CD-02 · HEADER (P-30 §1)
   Va al final a propósito: pisa reglas de cabecera que viven repartidas en
   tres sitios del archivo (base, duplicado de la línea ~600 y el bloque ≤880).
   Sin z-index nuevos: el megamenú sigue en 100 y la cabecera en su peldaño.
   ========================================================= */

/* ---- Grupo derecho: cita · lupa · bolsa · píldora de cuenta ---- */
.nav__icons{ gap:10px; }
.nav__icons > a:not(.nav__ingresar),
.nav__icons > button{ width:40px; height:40px; }
.cart-count{
  top:4px; right:2px; width:auto; min-width:16px; padding:0 4px; border-radius:8px;
  background:var(--charcoal); color:var(--ivory); font-weight:600;
}
.nav__icons > a.nav__ingresar{
  display:inline-flex; align-items:center; min-height:42px; padding:0 20px; margin-left:6px;
  border:1px solid var(--charcoal); border-radius:999px;
  transition:background .3s ease, color .3s ease;
}
.nav__ingresar .login-label{
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
}
.nav__ingresar:hover{ background:var(--charcoal); color:var(--ivory); }
.nav__ingresar:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; }

/* ---- Megamenú de Gemología: tarjetas que llevan a secciones de la página ---- */
.megamenu__container--guia{ grid-template-columns:minmax(0,2fr) minmax(0,1.1fr); gap:28px; }
.megamenu__guia{ list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.nav__links .megamenu__guia a{
  display:grid; gap:8px; align-content:start; height:100%;
  padding:0 12px 0 0; border-right:1px solid var(--line);
  text-transform:none; letter-spacing:0; font-size:inherit;
}
.nav__links .megamenu__guia a::after{ display:none; }
.megamenu__guia-t{
  font-family:var(--titular); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--charcoal); transition:color .25s;
}
.megamenu__guia-d{ font-family:var(--sans); font-size:.92rem; line-height:1.5; color:var(--muted); }
.megamenu__guia a:hover .megamenu__guia-t{ color:var(--gold-deep); }
.megamenu__guia a:focus-visible,
.megamenu__cita-btn:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; }
.megamenu__cita{
  background:var(--wine-2); color:var(--ivory);
  padding:22px 22px 24px; display:grid; gap:14px; align-content:start;
}
.megamenu__cita-t{
  font-family:var(--titular); font-weight:600; letter-spacing:.02em; line-height:1.2;
  font-size:clamp(1.05rem, 2vw, 1.3rem);
}
.nav__links .megamenu__cita-btn{
  display:flex; justify-content:center; align-items:center; min-height:44px; padding:0 16px;
  background:var(--ivory); color:var(--charcoal);
  font-family:var(--titular); font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  transition:background .25s;
}
.nav__links .megamenu__cita-btn::after{ display:none; }
.nav__links .megamenu__cita-btn:hover{ background:var(--gold-light); }

/* ---- Entre el corte móvil y el escritorio holgado ----
   De 881 a 1100 px el nivel 1 completo (3 enlaces + cita + lupa + bolsa + píldora)
   no cabe con los espacios de 1280: se aprietan los espacios, no se esconde nada. */
@media (min-width:881px) and (max-width:1100px){
  .nav__links--left{ gap:18px; }
  .nav__right-desktop{ gap:14px; }
  .nav__links a{ letter-spacing:.12em; }
  .nav__icons{ gap:4px; }
  .nav__icons > a.nav__ingresar{ padding:0 14px; margin-left:2px; }
}

/* ---- Móvil: cabecera con menú · logo · lupa · bolsa; la cuenta va dentro del menú ---- */
@media (max-width:880px){
  .nav__icons{ gap:2px; }
  .nav__icons > a:not(.nav__ingresar),
  .nav__icons > button{ width:44px; height:44px; }
  .nav__icons > a.nav__ingresar{ display:none; }

  .nav__links--left > li > a{ min-height:60px; font-size:1rem; letter-spacing:.1em; }
  /* Acordeón con + / − en vez del caret: el estado lo pone la clase .open-sub que ya
     alterna main.js, así que el signo no necesita JS propio. */
  .nav__links--left > li.has-megamenu > a .caret{ display:none; }
  .nav__links--left > li.has-megamenu > a::after{
    content:"+"; display:block; position:static; width:auto; height:auto; background:none;
    margin-left:auto; font-size:1.25rem; font-weight:400; line-height:1;
  }
  .nav__links--left > li.has-megamenu.open-sub > a::after{ content:"−"; }
  .nav__links--left > li.has-megamenu.open-sub > a{ color:var(--gold-deep); }

  .megamenu__container--guia{ grid-template-columns:1fr; gap:0; }
  .megamenu__guia{ grid-template-columns:1fr; gap:0; }
  .nav__links .megamenu__guia a{ display:flex; align-items:center; min-height:44px; padding:0; border-right:0; }
  .megamenu__guia-t{ font-size:.82rem; letter-spacing:.12em; color:var(--muted); }
  .megamenu__guia-d,
  .megamenu__cita{ display:none; }

  .nav__links--mobile-only{
    flex-direction:column; gap:10px; margin-top:20px; padding-top:0; border-top:0;
  }
  .nav__links--mobile-only a.nav__movil-cita,
  .nav__links--mobile-only a.nav__movil-ingresar{
    justify-content:center; min-height:52px; padding:0 16px;
    font-size:.72rem; font-weight:600; letter-spacing:.2em;
  }
  .nav__links--mobile-only a.nav__movil-cita{ background:var(--charcoal); color:var(--ivory); }
  .nav__links--mobile-only a.nav__movil-ingresar{
    border:1px solid var(--charcoal); border-radius:999px; color:var(--charcoal);
  }
}

/* =========================================================
   CD-02 · TIPOGRAFÍA DE TITULARES DE GEMOLOGÍA
   Instrument Serif (SIL OFL), auto-hospedada como el resto: subconjunto latino,
   ~21 KB por estilo. Es la equivalente legal de la didona con cursivas del
   diseño. Va SOLO en titulares de página (Gemología y, desde F9, el inicio); el
   resto del sitio sigue en Josefin (F0). NUNCA en el header ni en el megamenú:
   cerrado lleva visibility:hidden, que sí se maqueta, y la serif bajaba en todas
   las páginas (P-31 §3). GRIMANTI sigue en Bigilla aunque esté en medio de un
   titular serif.
   ========================================================= */
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
:root{ --display-serif: "Instrument Serif", Georgia, "Times New Roman", serif; }

/* =========================================================
   CD-02 · LOGO, MEGAMENÚ DE TRES TARJETAS Y CABECERA SOBRE EL HERO
   ========================================================= */
/* Solo el monograma, como en el diseño. Las reglas viejas de ≤560/≤400 le daban
   28/24 px pensando en el nombre debajo: estas, al final, las pisan. */
.brand-centered__logo{ height:60px; width:60px; margin:0; }
.header.scrolled .brand-centered__logo{ height:52px; width:52px; }
.brand-centered__logo--claro{ display:none; }

/* Solo en escritorio: sin el media query, estas dos pisaban el acordeón de una columna de
   ≤880 (que vive más arriba) y en el celular las tres tarjetas salían en fila. */
@media (min-width:881px){
  .megamenu__container--guia{ grid-template-columns:minmax(0,3fr) minmax(0,1.1fr); }
  .megamenu__guia{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
/* «Tu gema, con lupa» va en Josefin (la regla de arriba), NO en la serif: el megamenú cerrado
   lleva visibility:hidden, que sí se maqueta, y con la serif ahí las dos fuentes (~43 KB) bajaban
   en la primera visita de TODAS las páginas aunque nadie abriera el menú (P-31 §3, medido). */
.megamenu__cita-t em{ font-style:normal; color:var(--gold-light); }

/* Cabecera transparente sobre la portada (body.cabecera-sobre-hero: lo pone el layout con
   App\Support\CabeceraSobreHero cuando la página arranca con .hero-slider, .page-hero o .gem-hero).
   - La altura se fija para que la foto pueda subir exactamente debajo de ella
     (margin-bottom negativo) y para que nada salte cuando main.js le pone .scrolled.
   - Vuelve a sólida con .scrolled, con un megamenú abierto o con el menú móvil abierto:
     el panel marfil colgando de una cabecera transparente se leía como un error.
   - El selector usa :has(). Un navegador sin :has() descarta la regla entera y deja la
     cabecera sólida sobre la foto: se degrada a lo de antes, no a algo roto. */
.cabecera-sobre-hero{ --alto-cabecera:118px; }
.cabecera-sobre-hero .header{ height:var(--alto-cabecera); margin-bottom:calc(-1 * var(--alto-cabecera)); }
.cabecera-sobre-hero .header .nav,
.cabecera-sobre-hero .header.scrolled .nav{ height:100%; padding-block:0; }

.cabecera-sobre-hero .header:not(.scrolled):not(:has(.has-megamenu:hover, .has-megamenu:focus-within, .has-megamenu.is-open, .nav__links-wrapper.open)){
  background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom-color:transparent; box-shadow:none;
}
.cabecera-sobre-hero .header:not(.scrolled):not(:has(.has-megamenu:hover, .has-megamenu:focus-within, .has-megamenu.is-open, .nav__links-wrapper.open)) .brand-centered__logo{ display:none; }
.cabecera-sobre-hero .header:not(.scrolled):not(:has(.has-megamenu:hover, .has-megamenu:focus-within, .has-megamenu.is-open, .nav__links-wrapper.open)) .brand-centered__logo--claro{ display:block; height:84px; width:84px; }
.cabecera-sobre-hero .header:not(.scrolled):not(:has(.has-megamenu:hover, .has-megamenu:focus-within, .has-megamenu.is-open, .nav__links-wrapper.open)) .icon{ stroke:var(--ivory); }
.cabecera-sobre-hero .header:not(.scrolled):not(:has(.has-megamenu:hover, .has-megamenu:focus-within, .has-megamenu.is-open, .nav__links-wrapper.open)) .cart-count{ background:var(--ivory); color:var(--charcoal); }
@media (min-width:881px){
  .cabecera-sobre-hero .header:not(.scrolled):not(:has(.has-megamenu:hover, .has-megamenu:focus-within, .has-megamenu.is-open)) .nav__links--left > li > a,
  .cabecera-sobre-hero .header:not(.scrolled):not(:has(.has-megamenu:hover, .has-megamenu:focus-within, .has-megamenu.is-open)) .nav__links--right a,
  .cabecera-sobre-hero .header:not(.scrolled):not(:has(.has-megamenu:hover, .has-megamenu:focus-within, .has-megamenu.is-open)) .nav__icons > a.nav__ingresar{ color:var(--ivory); }
  .cabecera-sobre-hero .header:not(.scrolled):not(:has(.has-megamenu:hover, .has-megamenu:focus-within, .has-megamenu.is-open)) .nav__links--left > li > a.active{ color:var(--gold-light); }
  .cabecera-sobre-hero .header:not(.scrolled):not(:has(.has-megamenu:hover, .has-megamenu:focus-within, .has-megamenu.is-open)) .nav__links > li > a::after{ background:var(--gold-light); }
  .cabecera-sobre-hero .header:not(.scrolled):not(:has(.has-megamenu:hover, .has-megamenu:focus-within, .has-megamenu.is-open)) .nav__icons > a.nav__ingresar{ border-color:var(--ivory); }
  .cabecera-sobre-hero .header:not(.scrolled):not(:has(.has-megamenu:hover, .has-megamenu:focus-within, .has-megamenu.is-open)) .nav__icons > a.nav__ingresar:hover{ background:var(--ivory); color:var(--charcoal); }
}

@media (max-width:880px){
  .brand-centered__logo,
  .header.scrolled .brand-centered__logo{ height:48px; width:48px; }
  .cabecera-sobre-hero{ --alto-cabecera:80px; }
  .cabecera-sobre-hero .header:not(.scrolled):not(:has(.has-megamenu:hover, .has-megamenu:focus-within, .has-megamenu.is-open, .nav__links-wrapper.open)) .brand-centered__logo--claro{ height:60px; width:60px; }
}

/* =========================================================
   CD-02 · PIE (P-30)
   Pisa el pie vino de antes (.footer, más arriba) solo donde lleva .footer--cd02.
   ========================================================= */
.footer--cd02{ background:var(--ivory); color:var(--charcoal); padding-top:0; border-top:1px solid var(--line); }
/* En Gemología la banda oscura de las 4C ya separa el pie: sin línea extra. */
.cabecera-sobre-hero .footer--cd02{ border-top:0; }
.footer__cd{ display:grid; grid-template-columns:1fr auto 1fr; gap:40px; align-items:start; padding:88px 0 80px; }
.footer--cd02 h5{
  font-family:var(--titular); font-weight:600; font-size:.875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--charcoal); margin-bottom:18px;
}
.footer__col--info{ padding-top:78px; }
.footer--cd02 ul{ list-style:none; display:grid; gap:12px; }
.footer--cd02 ul a{
  font-family:var(--titular); font-size:.875rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--charcoal); transition:color .3s;
}
.footer--cd02 ul a:hover,
.footer__col--tienda a:hover{ color:var(--gold-deep); }
.footer__col--tienda{ padding-top:78px; text-align:right; display:grid; gap:14px; justify-items:end; }
.footer__col--tienda h5{ margin-bottom:4px; }
.footer__col--tienda p,
.footer__col--tienda a{ font-size:.9rem; line-height:1.5; max-width:250px; color:var(--charcoal); }
.footer__centro{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.footer__monograma{ display:flex; flex-direction:column; align-items:center; color:var(--charcoal); }
.footer__monograma img{ width:120px; height:120px; object-fit:contain; }
.footer__marca{ font-size:2.1rem; line-height:1; text-transform:uppercase; margin-top:6px; }
.footer__lema{
  margin-top:44px; font-family:var(--titular); font-size:.82rem; letter-spacing:.16em;
  text-transform:uppercase; line-height:1.5;
}
.footer__texto{ margin-top:24px; max-width:250px; font-size:.84rem; line-height:1.55; color:var(--muted); text-wrap:pretty; }
.footer__legal{ background:var(--black); color:var(--ivory); }
.footer__legal-fila{ display:flex; justify-content:space-between; gap:20px; padding:26px 0; }
.footer__legal a{
  font-family:var(--titular); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  white-space:nowrap; transition:color .3s;
}
.footer__legal a:hover{ color:var(--gold-light); }
.footer--cd02 a:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; }

@media (max-width:880px){
  .footer__cd{ grid-template-columns:1fr; gap:44px; text-align:center; padding:60px 0 52px; }
  .footer__centro{ order:-1; }
  .footer__monograma img{ width:92px; height:92px; }
  .footer__marca{ font-size:1.9rem; }
  .footer__lema{ margin-top:28px; }
  .footer__col--info,
  .footer__col--tienda{ padding-top:0; }
  .footer--cd02 ul{ gap:0; }
  .footer--cd02 ul a{ min-height:44px; display:flex; align-items:center; justify-content:center; }
  .footer__col--tienda{ text-align:center; justify-items:center; gap:10px; }
  .footer__col--tienda a{ min-height:44px; display:flex; align-items:center; text-decoration:underline; text-underline-offset:3px; }
  /* Abajo deja sitio al botón flotante de WhatsApp, que si no tapa el último enlace. */
  .footer__legal-fila{ display:grid; grid-template-columns:1fr 1fr; gap:0; padding:14px 0 76px; }
  .footer__legal a{
    min-height:48px; display:flex; align-items:center; justify-content:center; text-align:center;
    white-space:normal; padding:0 6px; font-size:.7rem; letter-spacing:.1em;
  }
}

/* =========================================================
   CD-02 · GEMOLOGÍA (P-30 §2)
   Reemplaza a .cuts / .cut / .gem-gallery / .fourc / .cgem, que quedan sin uso
   (solo los usaba gemologia.blade.php).
   ========================================================= */
/* Los dos destinos del megamenú: que el título no quede debajo de la cabecera fija. */
#cortes, #cuatro-c{ scroll-margin-top:130px; }

/* La foto ocupa toda la pantalla: el alto de la ventana menos la franja .announce,
   que queda arriba. La cabecera va encima (ver «cabecera sobre el hero»). */
.gem-hero{
  position:relative; overflow:hidden; background:#2b2320; color:var(--ivory);
  height:calc(100vh - var(--alto-franja, 34px)); height:calc(100svh - var(--alto-franja, 34px)); min-height:520px;
  display:flex; align-items:flex-end;
}
.gem-hero__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%;
  /* Virado provisional del diseño (GE1): sale cuando llegue la foto ya virada. */
  filter:sepia(.65) saturate(.75) brightness(.78) contrast(1.05);
}
/* Oscurece arriba para la cabecera transparente y abajo para el titular. */
.gem-hero__velo{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,16,12,.6) 0%, rgba(26,16,12,0) 32%, rgba(26,16,12,0) 58%, rgba(26,16,12,.66) 100%);
}
.gem-hero__inner{ position:relative; padding-bottom:30px; text-align:center; }
.gem-hero h1{
  font-family:var(--display-serif); font-weight:400; letter-spacing:0; line-height:.9;
  font-size:clamp(3.4rem, 7vw, 6.25rem); text-transform:uppercase; color:var(--ivory);
}
.gem-hero h1 em,
.gem-cortes h2 em,
.gem-4c h2 em{ font-style:italic; }

.gem-intro{ padding:56px 0 52px; text-align:center; border-bottom:1px solid rgba(55,21,25,.3); }
.gem-intro p{ max-width:480px; margin:0 auto; font-size:1rem; line-height:1.7; text-wrap:pretty; }

.gem-cortes .head{ max-width:none; margin-bottom:clamp(40px, 5vw, 64px); }
.gem-antetitulo{
  font-family:var(--display-serif); font-style:italic; font-size:clamp(1.75rem, 3vw, 2.4rem);
  line-height:1; color:var(--charcoal);
}
.gem-cortes .head h2{
  font-family:var(--display-serif); font-weight:400; letter-spacing:0; line-height:.9;
  font-size:clamp(3.25rem, 6.5vw, 5.5rem); text-transform:uppercase; margin:10px 0 0;
}

.gem-fotos{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px; }
.gem-fotos__item{ position:relative; aspect-ratio:7/6; overflow:hidden; background:var(--wine-2); margin:0; }
.gem-fotos__item img{ width:100%; height:100%; object-fit:cover; object-position:50% 52%; }
.gem-fotos__item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:11px 8px;
  background:rgba(34,12,14,.68); color:var(--ivory); text-align:center;
  font-family:var(--titular); font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
}

/* Filetes dorados de 1 px: el fondo de la grilla asoma por el hueco entre celdas. */
.gem-formas{
  list-style:none; max-width:880px; margin:clamp(64px, 9vw, 110px) auto 0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--gold);
  border:1px solid var(--gold);
}
.gem-formas__item{
  background:var(--ivory); padding:48px 12px 40px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.gem-formas__item svg{ width:56px; height:56px; fill:none; stroke:var(--charcoal); stroke-width:1.3; stroke-linejoin:round; }
.gem-formas__item span{ font-size:1rem; }

.gem-4c{
  position:relative; overflow:hidden; text-align:center; color:var(--ivory); background:#120a09;
  border-block:72px solid var(--black);
  padding:clamp(72px, 9vw, 110px) 0 clamp(80px, 10vw, 120px);
}
.gem-4c__fondo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.4) sepia(.4) brightness(.5);
}
.gem-4c::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 70% at 50% 50%, rgba(12,7,6,.86) 0%, rgba(12,7,6,.6) 100%);
}
/* z-index local (1, no un peldaño de la escalera): solo pone el texto sobre el velo. */
.gem-4c__inner{ position:relative; z-index:1; }
.gem-4c__marca{ font-size:clamp(3.5rem, 7.5vw, 6.5rem); line-height:.9; text-transform:uppercase; }
.gem-4c h2{
  font-family:var(--display-serif); font-weight:400; letter-spacing:0; text-transform:none; line-height:1;
  font-size:clamp(2.4rem, 4.5vw, 3.9rem); margin:24px 0 clamp(44px, 6vw, 64px); color:var(--ivory);
}
.gem-4c__lista{ display:grid; gap:34px; max-width:360px; margin:0 auto; }
.gem-4c__lista h3{ font-weight:400; font-size:clamp(1.5rem, 2.4vw, 1.75rem); line-height:1.1; }
.gem-4c__lista p{ margin-top:10px; font-size:.94rem; color:#EDE6DC; }

@media (max-width:880px){
  .gem-hero{ --alto-franja:27px; }
  .gem-hero__img{ object-position:58% center; }
  .gem-intro{ padding:40px 0 36px; }
  .gem-fotos{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .gem-fotos__item{ aspect-ratio:1; }
  .gem-formas{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .gem-formas__item{ padding:30px 8px 26px; gap:12px; }
  .gem-formas__item svg{ width:46px; height:46px; }
  .gem-4c{ border-block-width:44px; }
}

/* =========================================================
   CD-02 · MÓVIL según las referencias de 390 px del diseño
   ========================================================= */
.nav__toggle-cerrar{ display:none; }
.gem-hero__corte{ display:none; }

@media (max-width:880px){
  /* Menú a pantalla completa DEBAJO de la cabecera, como «F8 Menú móvil»: la cabecera
     queda a la vista (menú → X, logo, bolsa) y la misma hamburguesa lo cierra, así que no
     hace falta un botón ni JS nuevos. top:100% mide contra la cabecera porque su
     backdrop-filter la vuelve el bloque contenedor del position:fixed; con el menú abierto
     la cabecera transparente de Gemología vuelve a sólida (y a tener backdrop-filter). */
  .nav__links-wrapper{
    top:100%; width:100%; height:calc(100dvh - 100%);
    padding:8px 22px 26px; box-shadow:none; border-top:1px solid var(--line);
  }
  .header:has(.nav__links-wrapper.open) .nav__toggle-abrir{ display:none; }
  .header:has(.nav__links-wrapper.open) .nav__toggle-cerrar{ display:block; }
  .header:has(.nav__links-wrapper.open) #search-toggle{ visibility:hidden; }

  .nav__links .megamenu__guia a{ padding-left:14px; }
  .megamenu__guia-t{ font-size:.82rem; letter-spacing:.12em; }

  /* Hero: «El arte / de las gemas» en dos líneas, como la referencia. */
  .gem-hero__corte{ display:inline; }
  /* Que el botón flotante de WhatsApp (abajo a la derecha) no tape la última línea. */
  .gem-hero__inner{ padding-bottom:80px; }

  /* Pie: la versión corta de la referencia (sin lema, texto y dirección abreviados). */
  .footer__solo-ancho{ display:none; }
}

/* =========================================================
   CD-02 · LA MISMA CABECERA SOBRE TODAS LAS PORTADAS
   Inicio, páginas internas con .page-hero y Gemología: todas arrancan con una
   portada oscura y todas llevan la cabecera transparente encima. Las páginas sin
   portada (carrito, ficha, cuenta) la mantienen sólida.
   ========================================================= */
.cabecera-sobre-hero{ --alto-franja:34px; }

/* Inicio: la portada ocupa la pantalla bajo la franja, con la cabecera encima.
   El velo suma una banda arriba: hero/1.webp es casi blanca en esa zona y la tinta
   marfil de la cabecera no se leería sin ella. */
.cabecera-sobre-hero .hero-slider{
  height:calc(100vh - var(--alto-franja)); height:calc(100svh - var(--alto-franja));
}
.cabecera-sobre-hero .hero-veil{
  background:
    linear-gradient(180deg, rgba(26,16,12,.62) 0%, rgba(26,16,12,0) 30%),
    linear-gradient(0deg, rgba(34,12,14,.9) 0%, rgba(34,12,14,.66) 30%, rgba(34,12,14,0) 60%);
}

/* Páginas internas: el texto del page-hero baja lo que ocupa la cabecera encima. */
.cabecera-sobre-hero .page-hero{
  padding-top:calc(var(--alto-cabecera) + clamp(56px, 9vw, 110px));
}

/* El pie arranca con la banda vino del diseño en TODAS las páginas, no solo en
   Gemología (donde antes la ponía el borde inferior de las 4C). */
.footer--cd02,
.cabecera-sobre-hero .footer--cd02{ border-top:0; }
.footer--cd02::before{ content:""; display:block; height:72px; background:var(--black); }
.gem-4c{ border-bottom-width:0; }

@media (max-width:880px){
  .cabecera-sobre-hero{ --alto-franja:27px; }
  .cabecera-sobre-hero .hero-veil{
    background:
      linear-gradient(180deg, rgba(26,16,12,.62) 0%, rgba(26,16,12,0) 26%),
      linear-gradient(0deg, rgba(34,12,14,.9) 0%, rgba(34,12,14,.62) 34%, rgba(0,0,0,0) 62%);
  }
  .footer--cd02::before{ height:44px; }
}

/* Megamenú a todo el ancho de la pantalla (CD-02). Era absoluto dentro de .nav, que mide
   lo que el .container; con .nav estático, el bloque contenedor pasa a ser la cabecera
   (sticky, ya posicionada), que ocupa toda la ventana sin contar la barra de scroll — por
   eso no 100vw, que la incluye y desbordaba. El contenido sigue alineado con el resto
   gracias al .container de .megamenu__container. */
@media (min-width:881px){
  .nav{ position:static; }
}

/* =========================================================
   F9 · INICIO (P-32)
   Páginas de inicio rediseñadas, sección por sección. Todo lo de esta tanda vive acá,
   con prefijo `inicio-`, para que el CSS de F9 se pueda leer (y borrar) de una vez.
   Titulares en Instrument Serif: son titulares de PÁGINA, que es donde la serif tiene
   permiso. Colores: crema --ivory, vino --charcoal, bandas --wine-2, dorado --gold-light.
   ========================================================= */
.inicio-titulo{
  font-family:var(--display-serif); font-weight:400; text-transform:uppercase;
  letter-spacing:0; line-height:.95; color:var(--charcoal); margin:0;
}
.inicio-titulo em{ font-style:italic; }

/* Marcador de foto que todavía no subió la tienda: se ve como marcador, nunca como imagen
   rota. Mismo patrón que .vitrina__media--pendiente. */
.inicio-foto{ position:relative; width:100%; height:100%; overflow:hidden; background:#EFE9E1; display:grid; place-items:center; }
.inicio-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.inicio-foto--pendiente::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, rgba(55,21,25,.05) 0 10px, rgba(55,21,25,.02) 10px 20px);
}
.inicio-pendiente{
  position:relative;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.69rem; letter-spacing:.08em; line-height:1.7;
  color:var(--muted); text-align:center; padding:20px;
}

/* ---------- §2 · Diseñado para permanecer ---------- */
.inicio-permanecer{ position:relative; background:var(--ivory); aspect-ratio:1920/1700; overflow:hidden; }
.inicio-permanecer .inicio-titulo{
  position:absolute; left:11%; top:12%; z-index:2;
  font-size:clamp(34px, 3.6vw, 52px);
}
.inicio-permanecer__lienzo{ position:absolute; inset:0; }
.inicio-permanecer__estuche,
.inicio-permanecer__modelo{ position:absolute; display:block; }
/* Composición CENTRADA: el contenido ocupa del 11 % al 89 % (el mismo margen a cada lado). En el diseño
   la modelo llegaba al borde derecho (54,3 % + 45,7 % = 100 %) y la composición se leía corrida a la
   derecha; acá la modelo termina en el 89 % y el monograma en el mismo margen. */
.inicio-permanecer__estuche{ left:11%; top:22%; width:43%; height:66%; }
.inicio-permanecer__modelo{ left:50%; top:4%; width:39%; height:64%; z-index:1; }
.inicio-permanecer__estuche img,
.inicio-permanecer__modelo img{ transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.inicio-permanecer__estuche:hover img,
.inicio-permanecer__modelo:hover img{ transform:scale(1.03); }
.inicio-permanecer__monograma{ position:absolute; right:11%; bottom:5%; width:8%; height:auto; }

@media (max-width:768px){
  /* Margen de 64 px abajo: el estuche tocaba la franja vino de «Compra ahora». */
  .inicio-permanecer{ aspect-ratio:auto; overflow:hidden; padding:56px 24px 64px; }
  .inicio-permanecer .inicio-titulo{ position:static; font-size:40px; }
  .inicio-permanecer .inicio-titulo em{ display:block; }   /* dos líneas */
  /* Las dos fotos IGUALES (mismo ancho y proporción 2:3, la de los archivos), escalonadas: la
     modelo arriba a la derecha y el estuche abajo a la izquierda, con un solape corto. Antes una
     medía 72 % × 62 % y la otra 62 % × 56 % de un lienzo fijo de 520 px: una salía más cuadrada
     y la otra más grande. El lienzo toma la altura de las dos juntas (aspect-ratio). */
  .inicio-permanecer__lienzo{ position:relative; inset:auto; aspect-ratio:1/1.72; margin:28px -24px 0; }
  .inicio-permanecer__estuche,
  .inicio-permanecer__modelo{ width:60%; height:auto; aspect-ratio:2/3; }
  .inicio-permanecer__estuche{ left:4%; top:auto; bottom:0; }
  .inicio-permanecer__modelo{ left:auto; right:4%; top:0; }
  .inicio-permanecer__monograma{ right:6%; bottom:2%; width:14%; }
}
@media (prefers-reduced-motion:reduce){
  .inicio-permanecer__estuche img, .inicio-permanecer__modelo img{ transition:none; }
}

/* Solo para lector de pantalla: el H2 que una sección sin título visible necesita. */
.inicio-solo-lector{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- §4 · Beneficios ---------- */
.inicio-beneficios{ background:var(--ivory); padding:76px 44px; }
.inicio-beneficios__lista{
  list-style:none; margin:0 auto; padding:0; max-width:1240px;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px;
}
.inicio-beneficios__lista li{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px; }
.inicio-beneficios__lista img{ height:92px; width:auto; }
.inicio-beneficios__lista p{ max-width:210px; font-size:14px; line-height:1.5; color:var(--charcoal); margin:0; }

@media (max-width:768px){
  .inicio-beneficios{ padding:56px 24px; }
  .inicio-beneficios__lista{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:40px 20px; }
  .inicio-beneficios__lista img{ height:72px; }
  .inicio-beneficios__lista p{ font-size:13px; }
}

/* ---------- §5 · El arte de permanecer ---------- */
.inicio-arte{ background:var(--wine-2); }
.inicio-arte__enlace{ position:relative; display:block; aspect-ratio:1920/834; overflow:hidden; color:var(--ivory); }
.inicio-arte__foto img{ filter:grayscale(1); transition:transform 1.6s cubic-bezier(.16,1,.3,1); }
.inicio-arte__enlace:hover .inicio-arte__foto img{ transform:scale(1.02); }
/* Sin foto, el marcador es oscuro: el titular es crema y sobre el marcador claro no se leería. */
.inicio-arte__foto.inicio-foto--pendiente{ background:var(--wine-2); }
.inicio-arte__foto.inicio-foto--pendiente::before{
  background:repeating-linear-gradient(135deg, rgba(244,239,232,.06) 0 10px, rgba(244,239,232,.02) 10px 20px);
}
.inicio-arte__foto .inicio-pendiente{ color:var(--on-dark); }
.inicio-arte__velo{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(60deg, rgba(20,14,14,.62) 0%, rgba(20,14,14,.18) 38%, transparent 60%);
}
.inicio-arte .inicio-titulo{
  position:absolute; left:7%; bottom:12%;
  color:var(--ivory); font-size:clamp(44px, 5vw, 72px);
}
.inicio-arte__linea{ display:block; padding-left:.9em; }   /* la segunda línea, con sangría */
.inicio-arte__de{ text-transform:none; }                   /* «de» en minúscula cursiva */

@media (max-width:768px){
  .inicio-arte__enlace{ aspect-ratio:auto; height:420px; }
  .inicio-arte__velo{ background:linear-gradient(0deg, rgba(20,14,14,.7) 0%, rgba(20,14,14,.2) 45%, transparent 70%); }
  .inicio-arte .inicio-titulo{ left:24px; bottom:32px; }
}
@media (prefers-reduced-motion:reduce){
  .inicio-arte__foto img{ transition:none; }
}

/* ---------- §7 · Nuestros clientes ---------- */
.inicio-clientes{ background:var(--wine-2); color:var(--ivory); padding:84px 0 96px; }
.inicio-clientes__interior{ width:min(1240px, 92%); margin-inline:auto; }
.inicio-clientes .inicio-titulo{ color:var(--ivory); font-size:44px; text-align:left; margin-bottom:44px; }

.inicio-clientes__pista{
  display:grid; grid-template-columns:repeat(var(--columnas, 3), minmax(0,1fr)); gap:24px;
}
/* Tarjeta: foto de la marca en escala de grises (3:4; 4:5 en móvil) y, debajo, la caja con la reseña.
   La foto es decorativa y opcional: sin ella la caja se sostiene sola. */
.inicio-resena{ margin:0; display:flex; flex-direction:column; gap:16px; }
.inicio-resena.reveal{ transition-delay:calc(var(--i, 0) * 90ms); }
/* En el teléfono las reseñas van en un carril horizontal: las de la derecha están fuera de pantalla y
   el reveal las dejaba invisibles (con desenfoque) hasta deslizar hasta ellas. Ahí se ven siempre. */
@media (max-width:768px){
  .inicio-resena.reveal{ opacity:1; transform:none; filter:none; transition:none; will-change:auto; }
}
.inicio-resena__foto{ aspect-ratio:3/4; overflow:hidden; background:var(--charcoal); }
.inicio-resena__foto img{
  width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1);
  transition:transform 1.4s cubic-bezier(.16,1,.3,1), filter 1s ease;
}
.inicio-resena:hover .inicio-resena__foto img{ transform:scale(1.05); filter:grayscale(.55); }
.inicio-resena__caja{
  flex:1; background:#4A2E30; border-radius:6px; padding:30px 26px 24px;
  display:flex; flex-direction:column; gap:16px;
}
.inicio-resena__estrellas{ color:var(--gold-light); letter-spacing:.3em; font-size:.8rem; text-align:center; }
.inicio-resena blockquote{ margin:0; flex:1; }
.inicio-resena p{ font-family:var(--sans); font-size:14px; line-height:1.65; text-align:center; color:var(--ivory); margin:0; }
.inicio-resena figcaption{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.inicio-resena cite{
  font-family:var(--display-serif); font-style:italic; font-size:19px; line-height:1.1; color:var(--gold-light);
}
.inicio-resena figcaption span{
  font-family:var(--titular); font-weight:600; font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--on-dark);
}
.inicio-clientes__mas{ margin-top:44px; display:flex; justify-content:center; }

@media (max-width:768px){
  .inicio-clientes{ padding:64px 0 72px; }
  .inicio-clientes .inicio-titulo{ font-size:36px; margin-bottom:32px; }
  /* Carrusel: scroll-snap nativo, tarjetas al 78 % para que asome la siguiente, sin barra. */
  .inicio-clientes__pista{
    display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;
    margin-inline:-4vw; padding-inline:4vw; scroll-padding-inline:4vw;
  }
  .inicio-clientes__pista::-webkit-scrollbar{ display:none; }
  .inicio-resena{ flex:0 0 78%; scroll-snap-align:start; }
  .inicio-resena__foto{ aspect-ratio:4/5; }
  .inicio-clientes__mas{ margin-top:32px; }
}

/* ---------- §3 · Compra ahora ----------
   Vitrina de joyería, a sangre y con las tarjetas del tamaño de las de categorías (≈3,3 visibles, 3:4).
   Todo el movimiento va con transform/opacity (barato) y se apaga con prefers-reduced-motion. */
.inicio-compra{
  background:
    radial-gradient(ellipse 70% 38% at 50% 0%, rgba(218,196,162,.13), transparent 70%),
    var(--wine-2);
  color:var(--ivory); padding:84px 0 96px; overflow:hidden;
}
.inicio-compra__cabecera{ text-align:center; margin-bottom:48px; padding-inline:20px; }
.inicio-compra .inicio-titulo{ color:var(--ivory); font-size:54px; }

/* Ornamento bajo el título: filete de oro, brillante que titila, filete de oro. */
.inicio-compra__ornamento{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:18px; }
.inicio-compra__ornamento span{
  width:clamp(48px, 9vw, 110px); height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-light));
  transform:scaleX(0); transform-origin:right; transition:transform 1.2s cubic-bezier(.16,1,.3,1) .2s;
}
.inicio-compra__ornamento span:last-child{ background:linear-gradient(270deg, transparent, var(--gold-light)); transform-origin:left; }
.inicio-compra__ornamento svg{
  width:20px; height:20px; fill:none; stroke:var(--gold-light); stroke-width:1.2; stroke-linejoin:round;
  animation:inicio-brillo 3.6s ease-in-out infinite;
}
.inicio-compra__cabecera.in .inicio-compra__ornamento span{ transform:scaleX(1); }
@keyframes inicio-brillo{
  0%, 100%{ transform:scale(1) rotate(0); opacity:.75; filter:drop-shadow(0 0 0 rgba(218,196,162,0)); }
  50%{ transform:scale(1.18) rotate(8deg); opacity:1; filter:drop-shadow(0 0 7px rgba(218,196,162,.9)); }
}

.inicio-compra__carrusel{ position:relative; }
.inicio-compra__pista{
  display:flex; gap:18px; padding-inline:18px; scroll-padding-inline:18px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; cursor:grab;
  scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;
  user-select:none; -webkit-user-select:none; overscroll-behavior-x:contain;
}
.inicio-compra__pista::-webkit-scrollbar{ display:none; }
.inicio-compra__pista.is-arrastrando{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }

.inicio-compra__card{
  flex:0 0 calc((100% - 3 * 18px) / 3.8);   /* ≈3,8 visibles: más angostas que las categorías para que la pieza entre entera en pantalla */
  scroll-snap-align:start; display:block; color:inherit; -webkit-user-drag:none;
}
/* Sin .reveal en las tarjetas: aparecían con desenfoque y desplazamiento al entrar en pantalla
   MIENTRAS se deslizaba el carrusel, y eso se sentía como un tirón (peor en el teléfono). */

.inicio-compra__foto{
  position:relative; aspect-ratio:4/5; overflow:hidden; background:#F1EEEA;   /* 4:5, no 3:4: ~17 % menos alta */
  display:grid; place-items:center; isolation:isolate;
  contain:paint;   /* recorte duro: nada de la foto (zoom, destello, segunda foto) puede asomar fuera del marco */
}
.inicio-compra__foto > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  pointer-events:none; -webkit-user-drag:none; transition:transform 1.4s cubic-bezier(.16,1,.3,1);
}
.inicio-compra__foto > svg{ width:42%; height:42%; }
@media (hover:hover){
  .inicio-compra__card:hover .inicio-compra__foto > img{ transform:scale(1.05); }
}
.inicio-compra__card{ -webkit-tap-highlight-color:transparent; }

/* Segunda foto de la pieza: aparece al pasar el mouse (la carga vitrina.js). Sin segunda foto no
   existe el elemento y la tarjeta no cambia. Solo con mouse: en táctil el hover «se queda pegado». */
.inicio-compra__foto > .inicio-compra__img2{ opacity:0; transition:opacity .7s ease, transform 1.4s cubic-bezier(.16,1,.3,1); }
@media (hover:hover){
  .inicio-compra__card:hover .inicio-compra__img2.is-lista{ opacity:1; }
}

/* Destello: una franja diagonal de luz cruza la pieza, como el de una faceta al girar. */
.inicio-compra__foto::after{
  content:""; position:absolute; top:-10%; bottom:-10%; left:0; width:55%; z-index:3; pointer-events:none;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  transform:translateX(-160%) skewX(-14deg); opacity:0;
}
@media (hover:hover){
  .inicio-compra__card:hover .inicio-compra__foto::after{ animation:inicio-destello 1.1s ease-out; }
}
@keyframes inicio-destello{
  0%{ transform:translateX(-160%) skewX(-14deg); opacity:1; }
  100%{ transform:translateX(320%) skewX(-14deg); opacity:1; }
}

.inicio-compra__num{
  position:absolute; top:16px; left:18px; z-index:4;
  font-family:var(--titular); font-weight:600; font-size:.7rem; letter-spacing:.24em; color:var(--gold-deep);
}
.inicio-compra__insignia{
  position:absolute; top:14px; right:14px; z-index:4;
  font-family:var(--titular); font-weight:600; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--charcoal); background:var(--gold-light); padding:6px 11px;
}
/* «Ver pieza» sube desde abajo sobre un velo de vino. */
.inicio-compra__ver{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; align-items:center; justify-content:center; gap:10px; padding:20px 12px 18px;
  font-family:var(--titular); font-weight:600; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ivory); background:linear-gradient(0deg, rgba(38,14,17,.88), rgba(38,14,17,0));
  transform:translateY(101%); transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.inicio-compra__ver svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; }
.inicio-compra__card:focus-visible .inicio-compra__ver{ transform:none; }
@media (hover:hover){ .inicio-compra__card:hover .inicio-compra__ver{ transform:none; } }

/* El filete de oro bajo el nombre ya no es un ::after con transform: es el fondo del propio bloque,
   que crece de 0 a 100 % de ancho. Sin elemento aparte no hay nada que pueda quedar a medio dibujar
   (una franja clara y gruesa que aparecía un instante bajo la pieza). */
.inicio-compra__datos{
  padding-top:16px; padding-bottom:9px; display:grid; gap:7px; position:relative;
  background:linear-gradient(90deg, var(--gold-light), transparent 80%) no-repeat left bottom / 0 1px;
  transition:background-size .8s cubic-bezier(.16,1,.3,1);
}
.inicio-compra__cat{
  font-family:var(--titular); font-weight:600; font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-light); opacity:.8;
}
.inicio-compra__fila{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  font-family:var(--titular); font-weight:600; font-size:14px; letter-spacing:.08em; text-transform:uppercase;
}
.inicio-compra__nombre{ color:var(--ivory); transition:color .4s ease; }
.inicio-compra__precio{ color:var(--gold-light); white-space:nowrap; }
.inicio-compra__precio s{ color:var(--on-dark); opacity:.7; margin-right:.4em; }
.inicio-compra__card:focus-visible .inicio-compra__datos{ background-size:100% 1px; }
@media (hover:hover){
  .inicio-compra__card:hover .inicio-compra__datos{ background-size:100% 1px; }
}
.inicio-compra__card:hover .inicio-compra__nombre{ color:#fff; }

/* Flechas: círculos de oro sobre las fotos de los extremos, como las de la vitrina de categorías. */
.inicio-compra__flecha{
  position:absolute; top:calc(50% - 40px); transform:translateY(-50%); z-index:5;
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center; padding:0;
  background:var(--ivory); border:1px solid var(--gold); color:var(--charcoal); cursor:pointer;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.7);
  transition:opacity .3s ease, transform .3s ease, background .3s ease;
}
.inicio-compra__flecha svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5; }
.inicio-compra__flecha:hover{ background:var(--gold-light); transform:translateY(-50%) scale(1.08); }
.inicio-compra__flecha--prev{ left:18px; }
.inicio-compra__flecha--next{ right:18px; }
.inicio-compra__flecha[disabled]{ opacity:.25; pointer-events:none; }

/* Barra de avance: filete de oro con un brillante en la punta (vitrina.js mueve el span). */
.inicio-compra__barra{ display:flex; align-items:center; gap:14px; margin:34px 18px 0; }
.inicio-compra__barra-pista{ flex:1; height:1px; background:rgba(244,239,232,.18); position:relative; }
.inicio-compra__barra-pista span{
  position:absolute; left:0; top:-1px; height:3px; width:20%; background:var(--gold-light);
}
.inicio-compra__barra-pista span::after{
  content:""; position:absolute; right:-4px; top:-2px; width:7px; height:7px;
  background:var(--gold-light); transform:rotate(45deg); box-shadow:0 0 8px rgba(218,196,162,.9);
}
.inicio-compra__cuenta{
  font-family:var(--titular); font-weight:600; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-dark);
}
.inicio-compra__mas{ margin-top:44px; display:flex; justify-content:center; }

@media (max-width:768px){
  .inicio-compra{ padding:64px 0 72px; }
  .inicio-compra__cabecera{ margin-bottom:34px; }
  .inicio-compra .inicio-titulo{ font-size:40px; }
  .inicio-compra__card{ flex:0 0 72%; }
  .inicio-compra__flecha{ display:none; }   /* en móvil, deslizamiento táctil */
  .inicio-compra__ver{ display:none; }      /* sin hover: la tarjeta entera es el toque */
  .inicio-compra__barra{ margin-top:26px; }
  .inicio-compra__mas{ margin-top:34px; }
}
@media (prefers-reduced-motion:reduce){
  .inicio-compra__pista{ scroll-behavior:auto; }
  .inicio-compra__ornamento svg{ animation:none; }
  .inicio-compra__ornamento span{ transform:none; transition:none; }
  .inicio-compra__foto > img, .inicio-compra__ver,
  .inicio-compra__datos{ transition:none; }
  .inicio-compra__card:hover .inicio-compra__foto::after{ animation:none; }
}

/* Instagram sin encabezado (F9): solo el carrusel, al final. Sin el título, el padding de arriba sobra. */
.instagram-section--solo{ padding-top:0; background:var(--ivory); }
.instagram-section--solo .instagram-carousel__track{ padding-top:34px; }