/* ═══════════════════════════════════════════════════════════
   JOYERÍA GRIJALVA — main.css
   ═══════════════════════════════════════════════════════════ */

/* ── Variables ────────────────────────────────────────────── */
:root {
  /* Vino: acento de marca. Es el color del botón primario, de las itálicas de
     énfasis y de la nav — NO el color del texto (ver --tinta más abajo). */
  --vino: #891618;
  --vino-dark: #2a0608;
  --rosa: #bc8279;
  --blanco: #fffdf8;
  --crema: #fdfaf2;  /* fondo base — papel cálido, no amarillo */
  --dorado: #edc757;
  --dorado-dark: #c9a83e;

  /* Acento gold de marca (auditoría) */
  --oro: #c9a84c;

  /* Neutros cálidos de soporte — fondos de sección con calidez artesanal,
     evitando el blanco clínico tipo Mejuri */
  --lino: #f7f3e8;   /* beige claro, fondo principal de respiro */
  --arena: #efeadc;  /* arena cálida, contraste suave entre secciones */

  /* Tinta — color real del texto. Antes el cuerpo iba en --vino, lo que teñía
     todo de rojo y dejaba al acento sin fuerza. Títulos casi negros y cuerpo
     gris cálido: el vino recupera su papel de acento. */
  --tinta: #1f1b17;
  --tinta-suave: #57514a;

  /* Hairline de 1px — sustituye a las sombras como separador editorial */
  --linea: rgba(31, 27, 23, .12);

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  --max-w: 1200px;
  --gap: clamp(24px, 5vw, 80px);

  /* Sombra de producto — profundidad de galería tipo Tiffany/Tous,
     compartida por la ficha WooCommerce y la ficha de catálogo custom */
  --shadow-product: 0 18px 40px rgba(31, 27, 23, .08);

  /* Escala de espaciado editorial — secciones muy respiradas (Mejuri: 80–120px) */
  --space-section: clamp(80px, 11vw, 130px);

  --r: 0;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ── Reset ────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Accessibility / SEO utilities ───────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta-suave);
  background: var(--crema);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

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

button {
  cursor: pointer;
  font-family: inherit;
}

/* ── Noise texture helper ─────────────────────────────────── */
.hero__noise,
.filosofia__noise,
.cta-final__noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ── Container ────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 60px);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-cta {
  display: inline-block;
  padding: 15px 36px;
  background: var(--vino);
  color: var(--blanco);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  border: 1px solid var(--vino);
  border-radius: var(--r);
  transition: background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s;
}

.btn-cta:hover {
  background: var(--vino-dark);
  border-color: var(--vino-dark);
  color: var(--blanco);
}

/* Ícono de WhatsApp dentro de un .btn-cta (hero): alineado con el texto sin
   cambiar el display inline-block del botón. */
.btn-cta__glyph {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -.2em;
  margin-right: .55em;
}

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

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

/* Sobre fondo vino (cta-final, bloques oscuros): invierte el primario. */
.btn-cta--light {
  background: var(--blanco);
  color: var(--vino);
  border-color: var(--blanco);
}

.btn-cta--light:hover {
  background: var(--crema);
  border-color: var(--crema);
  color: var(--vino);
}

.btn-cta--ghost {
  background: transparent;
  color: var(--blanco);
  border-color: rgba(255, 245, 241, .35);
  margin-left: 12px;
}

.btn-cta--ghost:hover {
  background: rgba(255, 245, 241, .1);
  border-color: var(--blanco);
}

/* ── Link con flecha ──────────────────────────────────────────
   Enlace editorial de bajo peso visual ("Conoce nuestra historia →").
   Se usa donde un botón sólido competiría con el CTA principal de la
   sección: cierres de bloque, tarjetas y pies de columna. */
.link-flecha {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 4px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vino);
  border-bottom: 1px solid var(--linea);
  transition: border-color .25s var(--ease-out);
}

.link-flecha:hover {
  border-bottom-color: var(--vino);
}

.link-flecha svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  transition: transform .25s var(--ease-out);
}

.link-flecha:hover svg {
  transform: translateX(4px);
}

/* ── Section shared ───────────────────────────────────────── */
section {
  scroll-margin-top: 110px;
}

@media (max-width: 768px) {
  section {
    scroll-margin-top: 80px;
  }
}

.section-header {
  text-align: center;
  margin-bottom: clamp(40px, 7vw, 80px);
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .01em;
  color: var(--tinta);
}

/* Énfasis del titular en itálica vino — "El arte de la <em>joyería lenta</em>" */
.section-title em {
  font-style: italic;
  color: var(--vino);
}

/* Kicker editorial — etiqueta breve sobre el título de sección */
.section-kicker {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oro);
}

.section-sub {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--tinta-suave);
}

.section-line {
  width: 40px;
  height: 1px;
  background: var(--linea);
  margin: 20px auto;
}

/* ── Fade-in animations ───────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}

.fade-in.visible {
  opacity: 1;
  transform: none;
}

.fade-in--delay-1 {
  transition-delay: .1s;
}

.fade-in--delay-2 {
  transition-delay: .22s;
}

.fade-in--delay-3 {
  transition-delay: .34s;
}

/* Quien pide menos movimiento en su sistema no debería recibir ni el scroll
   suave ni las entradas animadas: el contenido se muestra ya asentado. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .fade-in,
  .fade-in--delay-1,
  .fade-in--delay-2,
  .fade-in--delay-3 {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}

/* ════════════════════════════════════════════
   NAV
════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 11px 0;
  /* Reduced top padding for a cleaner look */
  /* Solo animamos color/sombra (propiedades de composición) para evitar
     reflows en cada frame de scroll. El padding se mantiene constante. */
  transition: background .3s, box-shadow .3s;
  /* Ojo: nada de transform/filter aquí — convertirían al nav en containing
     block y el panel fixed del menú móvil (inset: 0) quedaría del tamaño de
     la barra en vez de la pantalla. will-change: background-color no tiene
     ese efecto y basta para la capa de composición. */
  will-change: background-color;
}

.nav.scrolled {
  background: rgba(137, 22, 24, .96);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, .25);
}

/* En móvil el backdrop-filter provoca parpadeo al scrollear (re-rasteriza el
   fondo en cada frame). El fondo ya es casi opaco, así que lo hacemos sólido
   y eliminamos el blur en pantallas táctiles. */
@media (max-width: 768px) {
  .nav.scrolled {
    background: rgb(137, 22, 24);
    backdrop-filter: none;
  }
}

/* Páginas interiores (fondo claro): el nav siempre lleva fondo vino para que
   los enlaces blancos del menú sean legibles desde el primer scroll. */
.nav--solid {
  background: rgb(137, 22, 24);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 60px);
}

/* Marca: disco + wordmark de texto, como el wordmark de las casas grandes.
   El nombre iba solo en el eyebrow del hero, así que en la nav la marca no se
   leía —solo el disco con la G—. El texto va en blanco porque la nav es vino
   (sólida en interiores, vino al scroll en el home) con enlaces blancos. */
/* Marca: disco (isotipo) + wordmark oficial (imagen, para respetar la tipografía
   real del logotipo — Cormorant no era la fuente de la marca). El wordmark se
   extrajo del logo con fondo transparente; el dorado se lee sobre el vino de la
   nav y sobre la foto del hero. */
.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 0;
  order: 1;
}

/* Wordmark: la imagen del logotipo oficial (script dorada), extraída con fondo
   transparente. Se agranda para que el nombre se lea claro, como Mejuri. */
.nav .nav__wordmark {
  display: block;
  width: clamp(128px, 12vw, 151px);
  max-width: none;
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
}

@media (max-width: 768px) {
  .nav .nav__wordmark { width: 108px; }
}

/* El hero full-screen se define más abajo, en su propia sección. */

.nav__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--vino);
  border-radius: 50%;
  padding: 12px;
  width: 80px;
  height: 80px;
  transition: transform .3s var(--ease-out), box-shadow .3s;
  box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
}

@media (max-width: 768px) {
  .nav__logo {
    width: 62px;
    height: 62px;
    padding: 9px;
  }
}

.nav__brand:hover .nav__logo {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}

.nav__logo img {
  height: auto;
  width: 100%;
  object-fit: contain;
}

.nav__menu {
  display: flex;
  align-items: center;
  /* Gap adaptativo: 8 ítems deben caber en horizontal desde ~1024px */
  gap: clamp(12px, 1.7vw, 26px);
  list-style: none;
  /* Empuja el menú a la derecha y garantiza separación del wordmark, que si no
     se pegaban cuando el brand era ancho. */
  margin-left: auto;
  padding-left: 32px;
  order: 2;
}

.nav__menu a,
.nav__menu .nav__sub-toggle {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--blanco);
  opacity: .8;
  transition: opacity .2s;
  /* Nunca partir una etiqueta en dos líneas (evita el encabalgado del nav). */
  white-space: nowrap;
}

.nav__menu a:hover,
.nav__menu .nav__sub-toggle:hover {
  opacity: 1;
}

/* ─── Dropdowns del menú (Catálogo / Servicios) ── */
.nav__has-sub {
  position: relative;
}

.nav__sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: inherit;
  font-family: inherit;
}

.nav__caret {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  transition: transform .25s var(--ease-out);
}

.nav__has-sub.open > .nav__sub-toggle .nav__caret {
  transform: rotate(180deg);
}

/* Resalte del padre cuando una subpágina está activa */
.nav__has-sub.is-active > .nav__sub-toggle {
  opacity: 1;
}

.nav__submenu {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

/* Desktop: panel flotante en hover / foco / click (sincronizado con el colapso
   de la hamburguesa, que ahora ocurre a ≤1200px). */
@media (min-width: 1201px) {
  .nav__submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 220px;
    background: var(--vino);
    border: 1px solid rgba(237, 199, 87, .28);
    border-top: 2px solid var(--dorado);
    border-radius: var(--r);
    box-shadow: 0 18px 46px rgba(42, 6, 8, .32);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
    z-index: 310;
  }

  .nav__has-sub:hover > .nav__submenu,
  .nav__has-sub:focus-within > .nav__submenu,
  .nav__has-sub.open > .nav__submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  .nav__submenu a {
    display: block;
    padding: 10px 22px;
    font-size: 11px;
    color: var(--crema);
    opacity: .85;
    white-space: nowrap;
  }

  .nav__submenu a:hover,
  .nav__submenu a[aria-current] {
    opacity: 1;
    background: rgba(237, 199, 87, .12);
    color: var(--blanco);
  }
}

.nav__cta {
  padding: 9px 22px;
  background: var(--dorado);
  color: var(--vino) !important;
  opacity: 1 !important;
  border-radius: var(--r);
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 2px;
  transition: background .2s !important;
}

.nav__cta:hover {
  background: var(--rosa) !important;
  color: var(--blanco) !important;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  margin-left: clamp(12px, 1.4vw, 20px);
  order: 3;
}

.nav__action {
  position: relative;
  z-index: 301;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--blanco);
  opacity: .9;
  border: 1px solid rgba(255, 253, 248, .24);
  border-radius: 50%;
  transition: color .2s, border-color .2s, background .2s, opacity .2s;
}

.nav__action:hover,
.nav__action:focus-visible,
.nav__action.is-active {
  color: var(--dorado);
  border-color: rgba(237, 199, 87, .7);
  background: rgba(42, 6, 8, .16);
  opacity: 1;
}

.nav__action svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.nav__cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  color: var(--vino-dark);
  background: var(--dorado);
  /* Anillo con sombra en vez de borde sólido: el nav es transparente en la
     portada, así que un borde vino se vería como un aro suelto sobre el hero.
     La sombra despega la burbuja de cualquier fondo. */
  box-shadow: 0 0 0 2px rgba(42, 6, 8, .55), 0 2px 5px rgba(42, 6, 8, .35);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* Carrito vacío: queda el ícono limpio, sin un "0" dorado permanente. */
.nav__cart-count.is-empty {
  display: none;
}

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
  order: 4;
  position: relative;
  z-index: 301;
}

.nav__toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--dorado);
  transition: transform .3s, opacity .3s;
}

.nav__toggle.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav__toggle.open span:nth-child(2) {
  opacity: 0;
}

.nav__toggle.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ════════════════════════════════════════════
   HERO — banda editorial, imagen de taller + legado
════════════════════════════════════════════ */
.hero {
  position: relative;
  /* Banda de 78vh, no pantalla completa: el mockup deja ver el inicio de la
     sección siguiente sin necesidad de scroll. */
  min-height: 78vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--vino-dark);
}

/* Imagen de fondo (foto real de taller). Reemplazar el archivo
   assets/img/hero-taller.jpg manteniendo este nombre. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Velo para legibilidad del texto sobre la foto. Con el contenido centrado a
   la izquierda, el degradado lateral es el que hace el trabajo; el vertical
   solo asienta el conjunto. La foto del hero se cambia desde Personalizar, así
   que el velo tiene que funcionar con cualquier imagen. */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(42, 6, 8, .9) 0%, rgba(42, 6, 8, .74) 30%, rgba(42, 6, 8, .3) 58%, transparent 78%),
    linear-gradient(to top, rgba(42, 6, 8, .35) 0%, transparent 45%),
    /* Velo general: la foto del local es muy luminosa en el centro y el texto
       cae justo encima al ir centrado verticalmente. */
    linear-gradient(rgba(42, 6, 8, .18), rgba(42, 6, 8, .18));
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding: clamp(80px, 12vh, 120px) clamp(20px, 5vw, 60px) clamp(48px, 8vh, 80px);
}

.hero__content {
  max-width: 560px;
}

.hero__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 22px;
}

/* Headline de legado — acento serif de marca */
.hero__headline {
  font-family: var(--font-serif);
  font-size: clamp(40px, 7vw, 84px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: .005em;
  color: var(--blanco);
  margin-bottom: 22px;
}

/* El énfasis va en dorado, no en vino como en el resto del sitio: aquí la
   itálica cae sobre una foto oscura y el vino no tendría contraste. */
.hero__headline em {
  font-style: italic;
  color: var(--dorado);
}

.hero__tagline {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--crema);
  max-width: 46ch;
  margin-bottom: 36px;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero__ctas .btn-cta {
  margin-left: 0;
}

/* El primario es vino sólido, pero aquí caería sobre un velo vino oscuro y se
   perdería. Sobre la foto se invierte a claro sin tocar el markup. */
.hero__ctas .btn-cta:not(.btn-cta--ghost) {
  background: var(--blanco);
  color: var(--vino);
  border-color: var(--blanco);
}

.hero__ctas .btn-cta:not(.btn-cta--ghost):hover {
  background: var(--crema);
  border-color: var(--crema);
}

/* ─── Hero carrusel ───────────────────────────────────────
   El desplazamiento lo hace el navegador con scroll-snap: así el gesto de
   deslizar en móvil es el nativo —con su inercia y su rebote— y sin JS el
   carrusel sigue siendo navegable. El script solo automatiza y sincroniza. */
.hero--carrusel {
  display: block;
  align-items: initial;
}

.hero__track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* La barra sobraría: la navegación son los puntos y las flechas. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hero__track::-webkit-scrollbar {
  display: none;
}

.hero__track:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: -4px;
}

.hero__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  min-height: 78vh;
  display: flex;
  align-items: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* La portada dice el eslogan en tres palabras y aguanta 84px. Las promesas de
   servicio son frases enteras: al mismo cuerpo se partirían en cuatro líneas y
   taparían la pieza. */
.hero__headline--promesa {
  font-size: clamp(29px, 4.1vw, 52px);
  line-height: 1.12;
  /* Medida pensada para la promesa más larga («Estrenar algo bueno no debería
     ser cosa de una vez al año.»): a menos de esto se parte en cuatro líneas. */
  max-width: 20ch;
  text-wrap: balance;
}

.hero__controles {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(18px, 3.4vh, 34px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(42, 6, 8, .42);
  backdrop-filter: blur(6px);
}

.hero__flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--blanco);
  background: none;
  border: 1px solid rgba(255, 253, 248, .3);
  border-radius: 50%;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}

.hero__flecha:hover,
.hero__flecha:focus-visible {
  color: var(--dorado);
  border-color: rgba(237, 199, 87, .75);
  background: rgba(42, 6, 8, .35);
}

.hero__flecha svg {
  width: 16px;
  height: 16px;
}

.hero__puntos {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Cápsula en vez de punto: el activo se alarga, así se lee la posición de un
   vistazo sin contar círculos. */
.hero__punto {
  width: 9px;
  height: 9px;
  padding: 0;
  background: rgba(255, 253, 248, .42);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: width .3s var(--ease-out), background .3s;
}

.hero__punto:hover {
  background: rgba(255, 253, 248, .75);
}

.hero__punto.is-active {
  width: 26px;
  background: var(--dorado);
}

.hero__punto:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: 3px;
}

/* Sin animación: se respeta la preferencia del sistema. El script además no
   arranca el paso automático cuando esta consulta se cumple. */
@media (prefers-reduced-motion: reduce) {
  .hero__track {
    scroll-behavior: auto;
  }

  .hero__punto {
    transition: none;
  }
}

@media (max-width: 768px) {
  .hero {
    /* 100svh (no 100dvh): el viewport dinámico cambia de alto cuando la barra
       de URL del navegador móvil aparece/desaparece al scrollear, provocando
       saltos. El "small viewport" se mantiene estable. */
    min-height: 100svh;
    align-items: flex-end;
  }

  .hero__overlay {
    background: linear-gradient(to top, rgba(42, 6, 8, .9) 0%, rgba(42, 6, 8, .35) 55%, rgba(42, 6, 8, .25) 100%);
  }

  .hero__ctas .btn-cta {
    flex: 1 1 auto;
    text-align: center;
  }
}



/* ════════════════════════════════════════════
   FILOSOFÍA
════════════════════════════════════════════ */
.filosofia {
  position: relative;
  padding: clamp(110px, 16vw, 200px) 0;
  background: var(--vino-dark);
  overflow: hidden;
}

/* Foto de fondo cinematográfica + velo oscuro */
.filosofia__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.filosofia__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .42;
}

.filosofia::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(42, 6, 8, .55) 100%),
    linear-gradient(to bottom, rgba(42, 6, 8, .5), rgba(42, 6, 8, .5));
}

.filosofia__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  padding: 0 clamp(20px, 5vw, 60px);
}

.filosofia__line {
  width: 48px;
  height: 1px;
  background: var(--dorado);
  margin: 28px auto;
}

.filosofia__quote {
  font-family: var(--font-serif);
  font-size: clamp(20px, 3vw, 32px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.6;
  color: var(--blanco);
  letter-spacing: .3px;
}

.filosofia__cite {
  display: block;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--crema);
  font-style: normal;
}

/* ════════════════════════════════════════════
   EL TALLER — Storytelling de proceso (zigzag)
════════════════════════════════════════════ */
.taller {
  position: relative;
  padding: var(--space-section) 0;
  background: var(--lino);
  overflow: hidden;
}

/* Textura sutil de grano (CSS puro, baja opacidad, sin coste de red) */
.taller::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

.taller__rows {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 8vw, 100px);
  margin-top: clamp(40px, 6vw, 72px);
}

.taller__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

/* Zigzag: filas pares invierten el orden imagen/texto */
.taller__row:nth-child(even) .taller__media {
  order: 2;
}

.taller__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--arena);
}

.taller__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Placeholder visible mientras no haya foto real */
.taller__media--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(137, 22, 24, .25);
}

.taller__media--empty span {
  font-family: var(--font-serif);
  font-size: clamp(40px, 6vw, 72px);
  font-style: italic;
  color: rgba(137, 22, 24, .25);
}

.taller__step {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 16px;
}

.taller__title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--tinta);
  margin-bottom: 16px;
}

.taller__text {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--tinta-suave);
  max-width: 44ch;
}

@media (max-width: 768px) {
  .taller__row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* En móvil siempre imagen arriba, texto abajo */
  .taller__row:nth-child(even) .taller__media {
    order: 0;
  }
}

/* ════════════════════════════════════════════
   COLECCIONES
════════════════════════════════════════════ */
.colecciones {
  padding: var(--space-section) 0;
  background: var(--crema);
}

/* Grid asimétrico editorial: la primera tarjeta manda (7 de 12 columnas y dos
   filas de alto), dos la acompañan apiladas a la derecha y la cuarta cierra en
   banda ancha. Rompe la monotonía de la retícula de 4 iguales. */
.colecciones__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* Altura de fila explícita: las tarjetas llevan el contenido en position
     absolute, así que su altura intrínseca es 0 y el grid no podría
     dimensionar las filas por sí solo. */
  grid-auto-rows: clamp(170px, 21vw, 265px);
  gap: 16px;
}

.coleccion-card:nth-child(1) {
  grid-column: span 7;
  grid-row: span 2;
}

.coleccion-card:nth-child(2),
.coleccion-card:nth-child(3) {
  grid-column: span 5;
}

.coleccion-card:nth-child(4) {
  grid-column: span 12;
}

.colecciones__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 4vw, 48px);
}

.coleccion-card {
  position: relative;
  background: var(--arena);
  border-radius: var(--r);
  overflow: hidden;
}

/* Tarjeta como enlace a su página de servicio */
a.coleccion-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.coleccion-card__mas {
  display: inline-block;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blanco);
  border-bottom: 1px solid rgba(255, 253, 248, .45);
  padding-bottom: 3px;
  transition: border-color .25s var(--ease-out);
}

.coleccion-card__img {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--arena);
}

.coleccion-card__img img {
  width: 100%;
  height: 100%;
  /* cover, no contain: la foto llena la celda del grid asimétrico */
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}

/* Efectos hover solo en dispositivos con puntero real (no táctiles): en móvil
   el :hover queda "pegado" tras tocar y provocaba el zoom que interfería con
   la navegación entre secciones. */
@media (hover: hover) {
  .coleccion-card:hover .coleccion-card__img img {
    transform: scale(1.04);
  }

  .coleccion-card:hover .coleccion-card__mas {
    border-bottom-color: var(--blanco);
  }
}

.coleccion-card__placeholder {
  width: 100%;
  height: 100%;
  background: var(--rosa);
  display: flex;
  align-items: center;
  justify-content: center;
}

.coleccion-card__placeholder span {
  font-family: var(--font-serif);
  font-size: 28px;
  font-style: italic;
  color: var(--blanco);
  opacity: .7;
}

/* Texto sobreimpreso al pie de la foto, sobre un degradado que garantiza el
   contraste sea cual sea la imagen que se suba desde Personalizar. */
.coleccion-card__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: clamp(22px, 3vw, 36px);
  background: linear-gradient(to top, rgba(31, 27, 23, .94) 0%, rgba(31, 27, 23, .78) 45%, rgba(31, 27, 23, .3) 80%, transparent 100%);
  color: var(--blanco);
}

.coleccion-card__title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--blanco);
  margin-bottom: 8px;
}

.coleccion-card__text {
  font-size: 14px;
  color: var(--blanco);
  opacity: .85;
  font-weight: 400;
  line-height: 1.6;
  max-width: 46ch;
}

/* ════════════════════════════════════════════
   GALERÍA / LOOKBOOK
════════════════════════════════════════════ */
.galeria {
  padding: var(--space-section) 0;
  background: var(--blanco);
}

/* Grid acotado y centrado: celdas moderadas para que los thumbnails del
   catálogo (baja resolución) se vean nítidos y no queden enormes. */
.galeria__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 900px;
  margin: clamp(40px, 6vw, 72px) auto 0;
  padding-inline: clamp(20px, 5vw, 60px);
}

.galeria__item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--arena);
  display: block;
  border-radius: var(--r);
  border: 1px solid rgba(201, 168, 62, .18);
}

.galeria__media {
  position: absolute;
  inset: 0;
}

.galeria__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease-out);
}

/* Placeholder mientras no haya foto real */
.galeria__media--empty {
  background:
    repeating-linear-gradient(45deg, rgba(137, 22, 24, .04) 0 12px, transparent 12px 24px),
    var(--arena);
}

.galeria__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(42, 6, 8, .42);
  opacity: 0;
  transition: opacity .35s var(--ease-out);
}

.galeria__cta {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--crema);
  border: 1px solid rgba(243, 238, 217, .6);
  padding: 10px 22px;
  transform: translateY(8px);
  transition: transform .35s var(--ease-out);
}

.galeria__item:focus-visible .galeria__overlay {
  opacity: 1;
}

.galeria__item:focus-visible .galeria__cta {
  transform: translateY(0);
}

/* El zoom/overlay al pasar el cursor solo en dispositivos con puntero real;
   en táctil el :hover se queda pegado al tocar. */
@media (hover: hover) {
  .galeria__item:hover .galeria__overlay {
    opacity: 1;
  }

  .galeria__item:hover .galeria__cta {
    transform: translateY(0);
  }

  .galeria__item:hover .galeria__media img {
    transform: scale(1.05);
  }
}

@media (max-width: 768px) {
  .galeria__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .ubicacion__grid {
    grid-template-columns: 1fr;
  }

  /* Orden en móvil: datos/dirección → mapa → foto fachada → foto interior.
     La columna de detalle (info + mapa) pasa antes que las fotos. */
  .ubicacion__detalle {
    order: -1;
  }

  .ubicacion__fotos {
    max-width: 420px;
    margin-inline: auto;
  }

  .ubicacion__map {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

/* ── Ubicación ────────────────────────────────────────────── */
.ubicacion {
  padding: var(--space-section) 0;
  background: var(--blanco);
}

.ubicacion__grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) 1fr;
  gap: var(--gap);
  max-width: var(--max-w);
  margin: 0 auto;
  align-items: stretch;
  min-width: 0;
}

/* Columna de fotos del local */
.ubicacion__fotos {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Ambas fotos comparten el mismo cuadro cuadrado (fotos 1500x1500),
   de tamaño moderado: la columna se limita a 360px y la imagen se escala. */
.ubicacion__foto {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--crema);
  box-shadow: 0 10px 40px rgba(137, 22, 24, .08);
}

.ubicacion__foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ubicacion__foto--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lino);
  border: 1px solid rgba(201, 168, 62, .35);
}

.ubicacion__foto--empty span {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--dorado-dark);
}

/* Columna de detalle: datos de visita + mapa */
.ubicacion__detalle {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ubicacion__info {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0 0 24px;
}

.ubicacion__info-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ubicacion__info-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--dorado-dark);
}

.ubicacion__info-value {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--tinta);
}

.ubicacion__map {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 320px;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(137, 22, 24, .08);
}

.ubicacion__map iframe {
  width: 100%;
  max-width: 100%;
  height: 100%;
  display: block;
}

/* ════════════════════════════════════════════
   FAQ
════════════════════════════════════════════ */
/* FAQ editorial a dos columnas: el encabezado se ancla a la izquierda y las
   preguntas ocupan la columna ancha, separadas por hairlines. Antes iba sobre
   fondo vino, justo antes del CTA final —también vino—, y ambas secciones se
   fundían en una sola masa de color. */
.faq {
  padding: var(--space-section) 0;
  background: var(--lino);
  position: relative;
}

.faq .container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}

.faq .section-header {
  text-align: left;
  margin-bottom: 0;
  position: sticky;
  top: 130px;
}

.faq .section-title {
  color: var(--tinta);
}

.faq .section-sub {
  color: var(--tinta-suave);
  margin-top: 16px;
}

.faq .section-line {
  margin: 20px 0;
}

.faq__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--linea);
}

.faq__item {
  border-bottom: 1px solid var(--linea);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  font-family: var(--font-serif);
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 400;
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color .2s;
}

.faq__question:hover {
  color: var(--vino);
}

.faq__question::-webkit-details-marker { display: none; }

.faq__question::after {
  content: '+';
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 300;
  color: var(--vino);
  line-height: 1;
  transition: transform .35s var(--ease-out);
}

.faq__item[open] .faq__question::after {
  transform: rotate(45deg);
}

.faq__answer {
  padding: 0 0 24px;
  margin-top: 0;
  max-width: 68ch;
}

.faq__answer p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--tinta-suave);
}

.faq__answer a {
  color: var(--vino);
  font-weight: 500;
  border-bottom: 1px solid var(--linea);
  transition: border-color .2s;
}

.faq__answer a:hover {
  border-color: var(--vino);
}

@media (max-width: 900px) {
  .faq .container {
    grid-template-columns: 1fr;
  }

  .faq .section-header {
    position: static;
  }
}

@media (max-width: 768px) {
  .faq__question {
    font-size: 17px;
  }
}

/* ════════════════════════════════════════════
   PRUEBA SOCIAL — tira bajo el hero
   Franja baja, no una sección: adelanta la señal de confianza sin competir
   con el hero ni con «Lo que hacemos».
════════════════════════════════════════════ */
.prueba-social {
  background: var(--lino);
  border-bottom: 1px solid var(--arena);
  padding: 14px 0;
}
.prueba-social__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 32px;
}
.prueba-social__item {
  font-family: var(--font-sans);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--tinta-suave);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.prueba-social__item a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.prueba-social__item a:hover,
.prueba-social__item a:focus-visible {
  color: var(--tinta);
  border-bottom-color: var(--dorado-dark);
}
.prueba-social__estrellas {
  color: var(--dorado-dark);
  letter-spacing: .1em;
  font-size: .9rem;
}
/* En móvil la tira se apila: tres líneas cortas leen mejor que una envuelta. */
@media (max-width: 600px) {
  .prueba-social__lista { flex-direction: column; gap: 7px; }
  .prueba-social__item  { font-size: .78rem; }
}

/* ════════════════════════════════════════════
   RESEÑAS — prueba social (Google vía Trustindex)
════════════════════════════════════════════ */
.resenas {
  padding: var(--space-section) 0;
  background: var(--crema);
}
.resenas__widget {
  max-width: 1100px;
  margin: 0 auto;
}

/* ════════════════════════════════════════════
   CTA FINAL
════════════════════════════════════════════ */
.cta-final {
  position: relative;
  padding: var(--space-section) 0;
  background: var(--vino);
  overflow: hidden;
  text-align: center;
}

.cta-final__content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin-inline: auto;
  padding: 0 clamp(20px, 5vw, 60px);
}

.cta-final__line {
  width: 48px;
  height: 1px;
  background: var(--dorado);
  margin: 28px auto;
}

.cta-final__title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 300;
  color: var(--blanco);
  line-height: 1.1;
  margin-bottom: 12px;
}

.cta-final__sub {
  font-family: var(--font-serif);
  font-size: clamp(16px, 2vw, 22px);
  font-style: italic;
  color: var(--crema);
  opacity: .95;
  margin-bottom: 36px;
}

.cta-final__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
.footer {
  background: var(--lino);
  border-top: 1px solid var(--linea);
  padding: clamp(56px, 7vw, 80px) 0 0;
}

.footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  padding-bottom: clamp(48px, 6vw, 64px);
}

.footer__logo {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--tinta);
  display: block;
  margin-bottom: 8px;
}

.footer__logo em {
  font-style: italic;
}

.footer__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--tinta);
  margin-bottom: 6px;
}

.footer__city {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Links subrayados con hairline, como en el pie de las tres referencias */
.footer__nav a {
  font-size: 13px;
  color: var(--tinta-suave);
  border-bottom: 1px solid var(--linea);
  padding-bottom: 3px;
  transition: color .2s, border-color .2s;
}

.footer__nav a:hover {
  color: var(--vino);
  border-bottom-color: var(--vino);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--tinta-suave);
  transition: color .2s;
}

.footer__link:hover {
  color: var(--vino);
}

.footer__bottom {
  border-top: 1px solid var(--linea);
  padding: 18px 0;
  text-align: center;
}

.footer__bottom p {
  font-size: 11px;
  color: var(--tinta-suave);
  opacity: .7;
  letter-spacing: .06em;
}

/* ════════════════════════════════════════════
   WhatsApp Float
════════════════════════════════════════════ */
.wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 200;
  height: 52px;
  padding: 0 22px 0 16px;
  background: var(--dorado);
  color: var(--vino);
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
  transition: transform .25s var(--ease-out), background .25s;
}

.wa-float:hover {
  transform: translateY(-2px);
  background: var(--dorado-dark);
}

.wa-float svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.wa-float__text {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* ── Section Navigation Arrows ────────────────────────────── */
.nav-arrows {
  position: fixed;
  left: 20px;
  bottom: 80px;
  /* Shifted up to avoid overlap with browser bars or other buttons */
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 200;
  opacity: 0;
  transform: translateX(-20px);
  pointer-events: none;
  transition: opacity .4s, transform .4s;
}

.nav-arrows.visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}

/* Botón en el extremo (tope o final de página): atenuado y sin interacción.
   Se controla por clase desde JS para evitar escribir estilos inline en cada
   frame de scroll. */
.nav-arrows__btn.is-disabled {
  opacity: .3;
  pointer-events: none;
}

.nav-arrows__btn {
  width: 44px;
  height: 44px;
  background: var(--dorado);
  color: var(--vino);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, .15);
  transition: background .25s, transform .25s var(--ease-out);
}

.nav-arrows__btn:hover {
  background: var(--dorado-dark);
  transform: scale(1.1);
}

.nav-arrows__btn svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 768px) {
  .nav-arrows {
    left: 16px;
    bottom: 16px;
  }

  .wa-float {
    right: 16px;
    bottom: 16px;
    width: 52px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .wa-float__text {
    display: none;
  }
}

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */

/* El menú colapsa a hamburguesa hasta 1360px: el wordmark, las etiquetas en
   uppercase y los accesos de cuenta/carrito necesitan más aire. */
@media (max-width: 1360px) {
  .nav__menu {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--vino);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    /* Por encima de los flotantes (.wa-float y .nav-arrows, z 200) y por
       debajo del .nav (300 en móvil) para que la hamburguesa siga cerrando. */
    z-index: 290;
  }

  .nav {
    z-index: 300;
  }

  .nav__menu.open {
    display: flex;
  }

  .nav__menu a,
  .nav__menu .nav__sub-toggle {
    font-size: 13px;
  }

  /* Dropdowns como acordeón dentro del overlay */
  .nav__has-sub {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .nav__submenu {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    transition: max-height .3s var(--ease-out), padding .3s var(--ease-out);
  }

  .nav__has-sub.open .nav__submenu {
    max-height: 70vh;
    padding: 20px 0 4px;
  }

  .nav__submenu a {
    font-size: 12px;
    opacity: .85;
  }

  .nav__toggle {
    display: flex;
    margin-left: 10px;
  }

  .nav__actions {
    margin-left: auto;
  }
}

@media (max-width: 520px) {
  .nav .nav__wordmark {
    display: none;
  }

  .nav__logo {
    width: 54px;
    height: 54px;
    padding: 8px;
  }

  .nav__action {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 768px) {
  .cta-final__btns {
    flex-direction: column;
    align-items: center;
  }

  .btn-cta--ghost {
    margin-left: 0;
  }

  .footer__inner {
    flex-direction: column;
  }
}

/* Tarjetas de servicios: el grid asimétrico de 12 columnas se deshace en
   tablet (2 tarjetas por fila) y en móvil (una por fila). Hay que anular los
   spans y el grid-row de la tarjeta grande, no solo las columnas. */
@media (max-width: 1024px) {
  .colecciones__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(240px, 34vw, 320px);
  }

  .coleccion-card:nth-child(1),
  .coleccion-card:nth-child(2),
  .coleccion-card:nth-child(3),
  .coleccion-card:nth-child(4) {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  .colecciones__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: clamp(260px, 62vw, 340px);
  }
}

/* ── Nav logo image ───────────────────────────────────────── */
.nav__logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* El logo tiene fondo negro — screen lo hace transparente sobre el fondo vino */
  mix-blend-mode: screen;
  filter: brightness(1.1);
}

.nav__logo:hover .nav__logo-img {
  transform: scale(1.05);
}

/* ── Footer logo image ────────────────────────────────────── */
/* El PNG del logo trae fondo negro. Con el footer ya en claro, aplicar `screen`
   contra el lino lo borraría: el disco vino le devuelve el lienzo oscuro que el
   blend necesita, mismo recurso que .nav__logo. */
.footer__logo-disco {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  padding: 10px;
  margin-bottom: 16px;
  background: var(--vino);
  border-radius: 50%;
}

.footer__logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: brightness(1.1);
}

/* ── Footer social icons ──────────────────────────────────────
   Antes iban en dorado sobre el footer oscuro. Con el pie en claro el dorado
   no llega al contraste mínimo, así que heredan el color de .footer__link. */
.footer__link--fb,
.footer__link--tt,
.footer__link--ig,
.footer__link--wa {
  color: inherit;
}


.wp-caption {
  max-width: 100%;
}

.aligncenter {
  margin-inline: auto;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ════════════════════════════════════════════
   PIEZAS DESTACADAS — carrusel horizontal (home)
════════════════════════════════════════════ */
.destacados {
  padding: clamp(56px, 8vw, 104px) 0;
  background: var(--lino, var(--crema));
}

.destacados__wrap {
  position: relative;
  max-width: var(--maxw);
  margin: clamp(28px, 4vw, 40px) auto 0;
  padding-inline: clamp(8px, 2vw, 16px);
  display: flex;
  align-items: center;
  gap: 8px;
}

.destacados__viewport {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 6px clamp(12px, 3vw, 32px) 14px;
}

.destacados__track {
  display: flex;
  gap: clamp(16px, 2.5vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.destacados__track > .catalogo-card {
  flex: 0 0 clamp(216px, 24vw, 268px);
  scroll-snap-align: start;
}

.destacados__arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blanco);
  color: var(--vino);
  border: 1.5px solid var(--dorado);
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}

.destacados__arrow:hover {
  background: var(--dorado);
  color: var(--vino);
}

.destacados__arrow svg {
  width: 20px;
  height: 20px;
}

.destacados__foot {
  text-align: center;
  margin-top: clamp(24px, 3vw, 34px);
}

@media (max-width: 760px) {
  .destacados__arrow { display: none; } /* en móvil se navega con swipe */
  .destacados__viewport { scroll-snap-type: x proximity; }
}