/* ============================================================
   ENERGY LAB&FIT — CSS
   Paleta: #161616 negro | #C9A96E dorado | #FFFFFF blanco
   ============================================================ */

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

:root {
  --black:   #161616;
  --black2:  #1e1e1e;
  --gold:    #C9A96E;
  --gold-lt: #e0c28e;
  --white:   #ffffff;
  --gray:    #888888;
  --gray-lt: #cccccc;
  --bone:    #efedE8;
  --gold-dk: #8a6d2f;
  --font-main: 'Montserrat', sans-serif;
  --font-serif: 'Cormorant Garamond', serif;
  --max-w: 1200px;
  --gap: clamp(1.5rem, 4vw, 3rem);
  --nav-h: 4.5rem;
}

html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.7;
  /* `overflow-x: hidden` aquí convertía a <body> en contenedor de scroll (computaba
     a `hidden auto`) y eso mataba TODOS los `position: sticky` del sitio. El scroll
     horizontal ya lo corta `html` en la línea 25, así que basta con `clip`. */
  overflow-x: clip;
  /* Espacio reservado para la barra de menú fija, para que no se superponga
     a las imágenes de cabecera (hero / page-hero) */
  padding-top: var(--nav-h);
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}

/* ── TIPOGRAFÍA ── */
h1, h2, h3, h4 { line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.5rem, 7vw, 6rem); }
h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1rem; font-weight: 600; }

em { font-family: var(--font-serif); font-style: italic; font-weight: 300; color: var(--gold); }

.label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.section-sub {
  color: var(--gray-lt);
  font-size: 1rem;
  font-weight: 300;
  margin-top: 0.75rem;
  max-width: 500px;
}

.section-header {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* ── BOTONES ── */
.btn {
  display: inline-block;
  padding: 0.875rem 2.25rem;
  font-family: var(--font-main);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.btn--gold {
  background: var(--gold);
  color: var(--black);
}
.btn--gold:hover { background: var(--gold-lt); }

.btn--ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.3);
}
.btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.btn--icon { display: inline-flex; align-items: center; gap: 0.6em; }
.btn--full { width: 100%; justify-content: center; max-width: 420px; }

.link-gold {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  transition: opacity 0.2s;
}
.link-gold:hover { opacity: 0.7; }

/* ── NAV ── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  padding: 0.85rem clamp(1.25rem, 5vw, 3rem);
  background: rgba(22,22,22,0.85);
  backdrop-filter: blur(10px);
  transition: background 0.4s ease, padding 0.4s ease;
}

.nav.scrolled {
  background: rgba(22,22,22,0.96);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(201,169,110,0.15);
}

.nav__logo {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-right: auto;
}
.nav__logo--img img {
  height: 40px;
  width: auto;
  display: block;
  object-fit: contain;
}
.nav__logo-e,
.nav__logo-f { color: var(--gold); }
.nav__logo-amp { color: var(--white); }
.footer__social { display: flex; gap: 1rem; margin-top: 0.75rem; }
.footer__social a { color: var(--gold); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; }
.tienda__empty { color: var(--gold); text-align: center; padding: 2rem 0; font-style: italic; }

.nav__links {
  display: flex;
  gap: 2rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 2.5rem;
}
.nav__links a { color: var(--gray-lt); transition: color 0.2s; }
.nav__links a:hover { color: var(--gold); }

.nav__burger { display: none; }

/* ── HERO ── */
.hero {
  position: relative;
  height: calc(100vh - var(--nav-h));
  min-height: calc(600px - var(--nav-h));
  overflow: hidden;
}

/* Slider */
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  /* Las fotos del hero llevan a la persona en el lado izquierdo del
     encuadre, así que el contenido se desplaza a la derecha para no taparla */
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero__slide.is-active { opacity: 1; }

.hero__logo {
  display: block;
  width: clamp(160px, 16vw, 260px);
  height: auto;
  margin-bottom: 2rem;
  opacity: 0;
}
@media (max-width: 900px) {
  .hero__logo { margin-left: auto; margin-right: auto; }
  .hero__slide {
    justify-content: center;
  }
  .hero__content {
    text-align: center;
    margin-right: 0;
  }
  .hero__title,
  .hero__actions {
    justify-content: center;
  }
  .hero__sub {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Solo la primera diapositiva: contenido empieza oculto para la animación GSAP */
.hero__slide:first-child .hero__eyebrow  { opacity: 0; }
.hero__slide:first-child .hero__word     { opacity: 0; transform: translateY(40px); }
.hero__slide:first-child .hero__sub      { opacity: 0; }
.hero__slide:first-child .hero__actions  { opacity: 0; }
/* Resto de diapositivas: contenido ya visible (el fade lo controla la slide) */
.hero__slide:not(:first-child) .hero__eyebrow,
.hero__slide:not(:first-child) .hero__word,
.hero__slide:not(:first-child) .hero__sub,
.hero__slide:not(:first-child) .hero__actions { opacity: 1; transform: none; }

/* Puntos de navegación */
.hero__dots {
  position: absolute;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.6rem;
  z-index: 10;
}
.hero__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  border: 1px solid rgba(255,255,255,0.5);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, transform 0.3s, border-color 0.3s;
}
.hero__dot.is-active {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.3);
}

.hero__bg {
  position: absolute;
  inset: 0;
}
.hero__img { transform: none; }

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 8s ease;
}
.hero__slide.is-active .hero__video { transform: scale(1); }

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(22,22,22,0.4) 0%,
    rgba(22,22,22,0.65) 60%,
    rgba(22,22,22,0.9) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: left;
  padding: 0 1.5rem;
  margin-right: clamp(2rem, 8vw, 7rem);
  max-width: 900px;
}

.hero__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--black);
  padding: 0.5em 1em;
  margin-bottom: 1.5rem;
  opacity: 0;
}

.hero__title {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.1em;
  margin-bottom: 1.5rem;
}

.hero__word {
  display: block;
  opacity: 0;
  transform: translateY(40px);
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}

.hero__word:nth-child(2) { color: var(--gold); }

.hero__sub {
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  font-weight: 300;
  color: var(--gray-lt);
  max-width: 500px;
  margin: 0 0 2.5rem;
  opacity: 0;
}

.hero__actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
  flex-wrap: wrap;
  opacity: 0;
}

.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
  opacity: 0;
}

.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
  0%, 100% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
}

/* ── REVEAL (scroll animations) ── */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.reveal--right {
  transform: translateX(60px);
}
.reveal.is-visible {
  opacity: 1;
  transform: translate(0);
}

/* ── INTRO / FILOSOFIA ── */
.intro {
  padding: clamp(5rem, 10vw, 9rem) 0;
}

.intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}

.intro__text { display: flex; flex-direction: column; gap: 1.5rem; }
.intro__title { line-height: 1.1; }
.intro__title em { font-size: clamp(1.4rem, 3.5vw, 2.5rem); }
.intro__text p { color: var(--gray-lt); font-weight: 300; font-size: 1rem; }

.intro__image {
  position: relative;
  aspect-ratio: 4 / 5;
}
.intro__image img { height: 100%; border-radius: 2px; }

.intro__image-badge {
  position: absolute;
  bottom: -1.5rem;
  left: -1.5rem;
  background: var(--gold);
  color: var(--black);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.badge__num { font-size: 2rem; font-weight: 900; line-height: 1; }
.badge__text { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.25rem; }

/* ── VALORES ── */
.valores {
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

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

.valor {
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 2.5vw, 2.5rem);
  border-top: 1px solid rgba(201,169,110,0.2);
  border-right: 1px solid rgba(255,255,255,0.05);
  position: relative;
  transition: background 0.3s;
  overflow: hidden;
}
.valor:last-child { border-right: none; }
.valor::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}
.valor:hover::before { transform: scaleX(1); }
.valor:hover { background: rgba(201,169,110,0.03); }

.valor__num {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 0.25rem 0.6rem;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}
.valor h3 { font-size: 1.15rem; margin-bottom: 0.75rem; letter-spacing: 0.03em; text-transform: uppercase; }
.valor p { font-size: 1rem; color: var(--gray-lt); font-weight: 300; line-height: 1.75; }

/* ── SERVICIOS ── */
.servicios {
  padding: clamp(5rem, 10vw, 9rem) 0;
}

.servicios__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

.servicio {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.servicio__img-wrap {
  height: 400px;
  overflow: hidden;
}
.servicio__img-wrap img {
  transition: transform 0.6s ease;
}
.servicio:hover .servicio__img-wrap img {
  transform: scale(1.05);
}

.servicio::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22,22,22,0.92) 0%, rgba(22,22,22,0.78) 20%, rgba(22,22,22,0) 45%);
  pointer-events: none;
}

.servicio__body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 1;
  padding: 2rem;
  transform: translateY(1rem);
  transition: transform 0.4s ease;
}
.servicio:hover .servicio__body { transform: translateY(0); }

.servicio__num {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold);
  display: block;
  margin-bottom: 0.5rem;
}
.servicio h3 { margin-bottom: 0.5rem; }
.servicio p {
  font-size: 0.875rem;
  color: var(--gray-lt);
  font-weight: 300;
  margin-bottom: 1rem;
  opacity: 0;
  transition: opacity 0.4s ease 0.1s;
}
.servicio:hover p { opacity: 1; }

/* ── TRIPTYCH ── */
.triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 70vh;
  min-height: 480px;
}

.triptych__panel {
  position: relative;
  overflow: hidden;
  cursor: default;
}

.triptych__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.triptych__panel:hover img { transform: scale(1.06); }

.triptych__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(22,22,22,0.88) 0%,
    rgba(22,22,22,0.2) 50%,
    rgba(22,22,22,0.1) 100%
  );
  transition: background 0.5s ease;
}
.triptych__panel:hover .triptych__overlay {
  background: linear-gradient(
    to top,
    rgba(22,22,22,0.92) 0%,
    rgba(22,22,22,0.35) 55%,
    rgba(22,22,22,0.1) 100%
  );
}

.triptych__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2.5rem 2rem;
  z-index: 1;
}

.triptych__num {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.triptych__body h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.triptych__body p {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--gray-lt);
  line-height: 1.6;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.triptych__panel:hover .triptych__body p {
  opacity: 1;
  transform: translateY(0);
}

/* ── IMAGE BREAK (páginas interiores) ── */
.img-break {
  height: 55vh;
  min-height: 320px;
  overflow: hidden;
}
.img-break img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 8s ease;
}

/* ── RESERVAS CTA ── */
.reservas-cta {
  position: relative;
  padding: clamp(6rem, 12vw, 10rem) 0;
  text-align: center;
  overflow: hidden;
}

.reservas-cta__bg {
  position: absolute;
  inset: 0;
}

.reservas-cta__content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.reservas-cta__content h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
.reservas-cta__content p { color: var(--gray-lt); font-weight: 300; }
.reservas-cta__note {
  font-size: 0.7rem;
  color: var(--gray);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: -0.5rem;
}

/* ── TIENDA ── */
.tienda {
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: var(--black2);
}

.tienda__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: 2rem;
}

/* Aviso físico en sección tienda home */
.tienda__aviso {
  background: rgba(201,169,110,0.08);
  border: 1px solid rgba(201,169,110,0.25);
  padding: 1rem 1.5rem;
  margin-bottom: 2rem;
  border-radius: 2px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold);
  text-align: center;
}

.producto { overflow: hidden; text-decoration: none; color: inherit; display: block; cursor: pointer; }

.producto__img-wrap {
  position: relative;
  height: 300px;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
}
.producto__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(22,22,22,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
.producto__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 0.5s ease;
}
.producto:hover .producto__img-wrap img { transform: scale(1.04); }

.producto__badge {
  position: absolute;
  top: 1rem; left: 1rem;
  background: var(--gold);
  color: var(--black);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  z-index: 2;
}

.producto__body {
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.producto__body h4 { margin-bottom: 0.25rem; }
.producto__body p { font-size: 0.8rem; color: var(--gray); font-weight: 300; }
.producto__price { font-size: 1.1rem; font-weight: 700; color: var(--gold); display: block; margin-top: 0.5rem; }

.tienda__cta { text-align: center; margin-top: 3rem; }

/* ── MARCAS EXCLUSIVAS (home) ── */
.tienda__marcas-header { text-align: center; margin-bottom: 2.5rem; }
.tienda__marcas-titulo {
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.tienda__marcas-sub {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  color: var(--gray-lt);
}
.tienda__marcas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}
/* Con 4 marcas, en pantallas intermedias se parten en 2x2 antes de apilarse */
@media (max-width: 1100px) {
  .tienda__marcas { grid-template-columns: repeat(2, 1fr); }
}
.tienda__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(201,169,110,0.25);
  border-radius: 4px;
  text-decoration: none;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
  overflow: hidden;
  padding: 2.5rem;
}
.tienda__marca:hover {
  border-color: var(--gold);
  background: rgba(201,169,110,0.07);
  transform: translateY(-4px);
}
.tienda__marca img {
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: opacity 0.3s;
}
.tienda__marca:hover img { opacity: 1; }
.tienda__marca-nombre {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--white);
  text-transform: uppercase;
  text-align: center;
}

/* ── MÁS VENDIDOS (home) ── */
.tienda__vendidos-header { margin-bottom: 2rem; }
.tienda__vendidos-titulo {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
}

/* ── FILTRO TIENDA (page-tienda) ── */
/* top = 56px, por debajo de la barra de menú más baja que existe (59px cuando encoge
   al bajar). Así el filtro siempre se mete DEBAJO del menú y nunca queda un hueco por
   el que se vea pasar el contenido. Con 64px había 5px de hueco entre 769 y ~1100px. */
.catalogo__filtro {
  background: var(--black2);
  border-bottom: 1px solid rgba(201,169,110,0.15);
  padding: 1.25rem 0;
  position: sticky;
  top: 56px;
  z-index: 10;
  transition: opacity 0.3s, visibility 0.3s;
  scroll-margin-top: var(--nav-h);
}
/* .catalogo__filtro.is-hidden eliminado — el filtro siempre es visible */
.catalogo__filtro-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.catalogo__select {
  flex: 1;
  min-width: 180px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(201,169,110,0.3);
  border-radius: 2px;
  padding: 0.55rem 1rem;
  font-size: 0.85rem;
  color: var(--white);
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A96E' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.5rem;
  transition: border-color 0.25s;
}
.catalogo__select:focus { border-color: var(--gold); }
.catalogo__select option { background: #1e1e1e; color: var(--white); }
.catalogo__search-btn {
  background: var(--gold);
  border: none;
  cursor: pointer;
  padding: 0.6rem 1rem;
  color: var(--black);
  border-radius: 2px;
  display: flex;
  align-items: center;
  transition: background 0.25s;
  flex-shrink: 0;
}
.catalogo__search-btn:hover { background: #b8922e; }

/* ── UBICACION ── */
.ubicacion {
  padding: clamp(5rem, 10vw, 9rem) 0;
}

.ubicacion__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: stretch;
}

.ubicacion__info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.ubicacion__datos { display: flex; flex-direction: column; gap: 1.5rem; }

.ubicacion__dato {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.dato__icon { color: var(--gold); font-size: 1rem; margin-top: 0.1rem; flex-shrink: 0; }
.ubicacion__dato strong { display: block; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.25rem; color: var(--gold); }
.ubicacion__dato p { font-size: 0.9rem; color: var(--gray-lt); font-weight: 300; line-height: 1.6; }

.ubicacion__map {
  min-height: 450px;
  overflow: hidden;
}
.ubicacion__map iframe { width: 100%; height: 100%; filter: grayscale(80%) invert(90%); }

/* ── FOOTER ── */
.footer {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 3rem;
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 2rem;
  padding-bottom: 3rem;
}

.footer__logo { display: inline-block; }
.footer__logo img {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer__links a { color: var(--gray); transition: color 0.2s; }
.footer__links a:hover { color: var(--gold); }

.footer__legal {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: right;
  font-size: 0.7rem;
  color: var(--gray);
}
.footer__legal a:hover { color: var(--gold-lt); }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 1.25rem clamp(1.25rem, 5vw, 3rem);
  text-align: center;
  font-size: 0.7rem;
  color: var(--gray);
  letter-spacing: 0.05em;
}

/* ============================================================
   PÁGINAS INTERIORES
   ============================================================ */

/* ── NAV MOBILE ── */
.nav__mobile {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 99;
  background: #0d0d0d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.77,0,0.18,1);
}
/* Línea dorada en la parte superior */
.nav__mobile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
}
.nav__mobile.open { transform: translateX(0); }

.nav__mobile-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  list-style: none;
  width: 100%;
  max-width: 420px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.nav__mobile-links > li {
  border-bottom: 1px solid rgba(255,255,255,0.07);
  text-align: center;
}
.nav__mobile-links a {
  display: block;
  padding: 1.3rem 2rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
  transition: color 0.2s, background 0.2s;
}
.nav__mobile-links a:hover {
  color: var(--gold);
  background: rgba(201,169,110,0.04);
}
.nav__mobile .btn { margin-top: 2.5rem; }

/* ── PAGE HERO ── */
.page-hero {
  position: relative;
  height: calc(60vh - var(--nav-h));
  min-height: calc(400px - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.page-hero--short { height: calc(60vh - var(--nav-h)); min-height: calc(400px - var(--nav-h)); }

.page-hero__bg {
  position: absolute;
  inset: 0;
}
.page-hero__bg img { transform: scale(1.03); }

.page-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem 1.5rem;
  max-width: 700px;
}
.page-hero__content h1 { font-size: clamp(2rem, 5vw, 4rem); margin-bottom: 0.75rem; }
.page-hero__content p  { color: var(--gray-lt); font-weight: 300; font-size: 1.05rem; }
.page-hero__back {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  transition: opacity 0.2s;
}
.page-hero__back:hover { opacity: 0.7; }

/* ── TIENDA: hero "Marcas Exclusivas" ───────────────────────────────────────── */
.page-hero--marcas .page-hero__bg img {
  object-position: center top;
}
.page-hero--marcas .hero__overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.08) 100%);
}
.page-hero--marcas .page-hero__content { display: none; }

.tienda-hero-marcas {
  position: absolute;
  z-index: 2;
  left: 5%;
  /* Se aprovecha más ancho: la pared de la foto es clara y admite los logos
     negros encima. El tope está en no llegar a la chica (empieza sobre el 60%). */
  right: 42%;
  /* Centrado en vertical SIN transform: la animación .reveal pisa el transform
     del elemento (le pone translateY) y descolocaba el bloque. */
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.tienda-hero-marcas__logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* 4 logos en una sola línea: la suma de anchos son ~10,1 veces la altura,
     así que la altura manda para que quepan. */
  gap: clamp(1rem, 2vw, 2rem);
  margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
}
.tienda-hero-marcas__logos img {
  width: auto;
  height: clamp(36px, 4.2vw, 68px);
  object-fit: contain;
}
.tienda-hero-marcas__titulo {
  color: var(--gold);
  font-size: clamp(1.7rem, 4vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: 0.12em;
  margin-bottom: 0.75rem;
}
.tienda-hero-marcas__sub {
  color: var(--black2);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  max-width: 38ch;
}

@media (max-width: 767px) {
  .page-hero--marcas .page-hero__bg img {
    object-position: 85% top;
  }
  .tienda-hero-marcas {
    left: 4%; right: 44%;
    top: auto;
    bottom: 1.25rem;
    transform: none;
  }
  .tienda-hero-marcas__logos {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
  }
  .tienda-hero-marcas__logos img {
    height: clamp(24px, 8vw, 42px);
  }
  .tienda-hero-marcas__titulo { font-size: clamp(1.1rem, 5.5vw, 1.5rem); }
  .tienda-hero-marcas__sub { font-size: clamp(0.75rem, 3.4vw, 0.9rem); max-width: 26ch; }
}

/* ── PAGE CTA ── */
.page-cta {
  padding: clamp(5rem, 8vw, 7rem) 0;
  background: var(--black2);
  text-align: center;
}
.page-cta__inner {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.page-cta__inner h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
.page-cta__inner p { color: var(--gray-lt); font-weight: 300; }
.page-cta__btns { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* ── SERVICIOS PAGE ── */
.servicios-page { padding: clamp(4rem, 8vw, 7rem) 0; }

.servicio-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(3rem, 5vw, 5rem) 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.servicio-row:last-child { border-bottom: none; }
.servicio-row--reverse { direction: rtl; }
.servicio-row--reverse > * { direction: ltr; }

.servicio-row__img {
  position: relative;
  height: 420px;
  overflow: hidden;
}
.servicio-row__img img { height: 100%; transition: transform 0.6s ease; }
.servicio-row:hover .servicio-row__img img { transform: scale(1.03); }

.servicio-row__price-badge {
  position: absolute;
  bottom: 1.5rem; right: 1.5rem;
  background: var(--gold);
  color: var(--black);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  font-size: 0.875rem;
}

.servicio-row__body { display: flex; flex-direction: column; gap: 1.25rem; }
.servicio-row__num  { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em; color: var(--gold); }
.servicio-row__body h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.servicio-row__sub  { color: var(--gray-lt); font-weight: 300; font-size: 1rem; }

.servicio-row__meta {
  display: flex;
  gap: 1.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.05em;
}

.servicio-row__beneficios {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.servicio-row__beneficios li {
  font-size: 0.9rem;
  color: var(--gray-lt);
  font-weight: 300;
  padding-left: 1.25rem;
  position: relative;
}
.servicio-row__beneficios li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold);
}

.servicio-row__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; }

/* ── SINGLE SERVICIO ── */
.servicio-single { padding: clamp(4rem, 8vw, 7rem) 0; }

.servicio-single__grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 4rem;
  align-items: start;
}

.servicio-single__desc { color: var(--gray-lt); font-weight: 300; line-height: 1.8; margin-bottom: 2.5rem; }
.servicio-single__desc p { margin-bottom: 1rem; }

.servicio-single__beneficios h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; color: var(--gold); }
.servicio-single__beneficios ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.servicio-single__beneficios li { font-size: 0.9rem; color: var(--gray-lt); font-weight: 300; padding-left: 1.25rem; position: relative; }
.servicio-single__beneficios li::before { content: '—'; position: absolute; left: 0; color: var(--gold); }

.servicio-single__sidebar { position: sticky; top: 100px; }

.servicio-single__img2 { height: 280px; overflow: hidden; margin-bottom: 1.5rem; }
.servicio-single__img2 img { height: 100%; }

.servicio-single__card {
  padding: 2rem;
  border: 1px solid rgba(201,169,110,0.2);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.servicio-single__precio strong { font-size: 1.5rem; color: var(--gold); display: block; margin-top: 0.25rem; }

.otros-servicios { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--black2); }

/* ── MÉTODO PAGE ── */
.metodo-intro { padding: clamp(3rem, 6vw, 5rem) 0; }
.metodo-intro__inner {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 300;
  color: var(--gray-lt);
  line-height: 1.9;
}

.metodo-pasos { padding: clamp(5rem, 9vw, 8rem) 0; background: var(--black2); }
.metodo-pasos__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.05);
}
.metodo-paso {
  padding: clamp(2.5rem, 4vw, 4rem);
  background: var(--black2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: background 0.3s;
}
.metodo-paso:hover { background: rgba(201,169,110,0.04); }
.metodo-paso__num {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--gold);
  background: rgba(201,169,110,0.1);
  border: 1px solid rgba(201,169,110,0.3);
  padding: 0.35rem 0.75rem;
  width: fit-content;
}
.metodo-paso h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; line-height: 1.2; }
.metodo-paso p { color: var(--gray-lt); font-weight: 300; font-size: 1rem; line-height: 1.8; }

.equipo { padding: clamp(4rem, 8vw, 7rem) 0; }
.equipo__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.equipo__foto { height: 320px; overflow: hidden; margin-bottom: 1.25rem; }
.equipo__foto img { height: 100%; transition: transform 0.5s ease; }
.equipo__miembro:hover .equipo__foto img { transform: scale(1.03); }
.equipo__miembro h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.equipo__miembro p { font-size: 0.875rem; color: var(--gray-lt); font-weight: 300; margin-top: 0.5rem; line-height: 1.6; }

/* ── RESERVAS PAGE ── */
.reservas-page { padding: clamp(4rem, 8vw, 7rem) 0; }

.timps-embed { border: 1px solid rgba(201,169,110,0.15); overflow: hidden; margin-bottom: 4rem; }

.reservas-placeholder {
  text-align: center;
  padding: 5rem 2rem;
  border: 1px solid rgba(201,169,110,0.15);
  margin-bottom: 4rem;
}
.reservas-placeholder__icon { font-size: 2rem; color: var(--gold); margin-bottom: 1.5rem; }
.reservas-placeholder h2 { font-size: 1.75rem; margin-bottom: 1rem; }
.reservas-placeholder p { color: var(--gray-lt); font-weight: 300; margin-bottom: 0.75rem; }
.reservas-placeholder__btns { margin-top: 2rem; display: flex; justify-content: center; }

.reservas-info { padding-top: clamp(3rem, 5vw, 5rem); border-top: 1px solid rgba(255,255,255,0.06); }
.reservas-info__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.reservas-info__item { padding-left: 1.5rem; border-left: 1px solid rgba(201,169,110,0.2); }
.reservas-info__num { display: block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em; color: var(--gold); margin-bottom: 0.75rem; }
.reservas-info__item h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.reservas-info__item p { font-size: 0.875rem; color: var(--gray-lt); font-weight: 300; line-height: 1.6; }

/* ── CONTACTO PAGE ── */
.contacto-page { padding: clamp(4rem, 8vw, 7rem) 0; }
.contacto-page__grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 5rem;
  align-items: start;
  margin-bottom: 4rem;
}

.contacto-form h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: 1.5rem; margin-top: 0.5rem; }

.contacto-wa-text {
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 40ch;
}

.contacto-wa-note {
  margin-top: 1.5rem;
  color: var(--gray-lt);
  font-size: 1.05rem;
}

.contacto-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}
.contacto-extra__btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  background: var(--gold);
  color: var(--black);
  border-radius: 2px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s;
}
.contacto-extra__btn svg { flex-shrink: 0; }
.contacto-extra__btn:hover {
  background: var(--gold-lt);
}

/* ── PRODUCTOS / CATÁLOGO ── */
.productos-aviso {
  background: rgba(201,169,110,0.06);
  border-top: 1px solid rgba(201,169,110,0.2);
  border-bottom: 1px solid rgba(201,169,110,0.2);
  padding: 1.5rem 0;
}
.productos-aviso__inner p { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; color: var(--gold); text-align: center; }

.catalogo { padding: clamp(4rem, 8vw, 7rem) 0; }

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

.catalogo__item { overflow: hidden; }

.catalogo__img {
  height: 280px;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  position: relative;
}
.catalogo__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(22,22,22,0.6) 100%);
  pointer-events: none;
  z-index: 1;
}
.catalogo__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 0.5s ease;
  position: relative;
  z-index: 0;
}
.catalogo__img-placeholder { width: 100%; height: 100%; background: #1a1a1a; }
.catalogo__item { overflow: hidden; text-decoration: none; color: inherit; cursor: pointer; }
.catalogo__item:hover .catalogo__img img { transform: scale(1.04); }

.catalogo__body {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  /* que ocupe lo que sobre de la tarjeta */
  flex: 1;
}
/* Las tarjetas de una fila miden todas lo mismo, pero los nombres ocupan una o
   dos líneas. Sin esto, el "Ver producto" de cada una queda a distinta altura y
   la fila se ve descuadrada. */
.catalogo__item {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.catalogo__body h3 { font-size: 1rem; font-weight: 600; margin-top: 0.25rem; }
.catalogo__body p  { font-size: 0.875rem; color: var(--gray-lt); font-weight: 300; line-height: 1.6; }

.catalogo__precio {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  margin-top: 0.5rem;
}

.contacto-datos h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: 1.75rem; margin-top: 0.5rem; }
.contacto-mapa { overflow: hidden; border: 1px solid rgba(255,255,255,0.06); }

/* ── WOOCOMMERCE básico ── */
.woocommerce-page .page-hero { display: none; }
.woocommerce { padding: clamp(4rem, 8vw, 7rem) 0; }
.woocommerce ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; list-style: none; padding: 0; }
.woocommerce ul.products li.product a img { width: 100%; height: 280px; object-fit: cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-main); font-size: 0.95rem; font-weight: 600; padding: 1rem 0 0.25rem; }
.woocommerce ul.products li.product .price { color: var(--gold); font-size: 1rem; font-weight: 700; }
.woocommerce ul.products li.product a.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button { background: var(--gold); color: var(--black); font-family: var(--font-main); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.75rem 1.5rem; border: none; cursor: pointer; transition: background 0.2s; }
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--gold-lt); }

/* ── RESPONSIVE PÁGINAS ── */
@media (max-width: 1200px) {
  .servicio-single__grid { grid-template-columns: 1fr 300px; gap: 2.5rem; }
  .equipo__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .valores__grid { grid-template-columns: repeat(2, 1fr); }
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    padding: 0.6rem 0.7rem;
    z-index: 101;
    transition: border-color 0.3s;
  }
  .nav__burger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--white);
    transition: all 0.35s cubic-bezier(0.77,0,0.18,1);
  }
  .nav__burger.open { border-color: var(--gold); }
  .nav__burger.open span { background: var(--gold); }

  /* Burger → X */
  .nav__burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav__burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav__burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

@media (max-width: 768px) {
  .intro__grid { grid-template-columns: 1fr; }
  .intro__image { aspect-ratio: 4 / 5; height: auto; max-height: 70vh; }
  .intro__image-badge { left: 1rem; bottom: -1rem; }
  .servicios__grid { grid-template-columns: 1fr; }
  .servicio__img-wrap { height: 300px; }
  .servicio p { opacity: 1; }
  .tienda__grid { grid-template-columns: 1fr; }
  /* Con 4 marcas, apilarlas de una en una deja casi 1000px de logos en móvil */
  .tienda__marcas { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .tienda__marca  { min-height: 130px; }
  .tienda__marca img { max-height: 56px; }
  .catalogo__filtro { position: static; }
  .catalogo__filtro-inner { flex-direction: column; align-items: stretch; }
  .catalogo__select { width: 100%; }
  .catalogo__search-btn { width: 100%; justify-content: center; }
  .ubicacion__grid { grid-template-columns: 1fr; }
  .ubicacion__map { min-height: 300px; }
  .footer__inner { grid-template-columns: 1fr; text-align: center; }
  .footer__legal { text-align: center; }
  .hero__actions { flex-direction: column; align-items: center; }

  /* Triptych */
  .triptych { grid-template-columns: 1fr; height: auto; }
  .triptych__panel { height: 55vw; min-height: 280px; }
  .triptych__body p { opacity: 1; transform: none; }
  .img-break { height: 40vw; min-height: 220px; }

  /* Páginas interiores */
  .servicio-row { grid-template-columns: 1fr; direction: ltr; }
  .servicio-row--reverse { direction: ltr; }
  .servicio-row__img { height: 280px; }
  .servicio-single__grid { grid-template-columns: 1fr; }
  .servicio-single__sidebar { position: static; }
  .metodo-pasos__grid { grid-template-columns: 1fr; }
  .equipo__grid { grid-template-columns: 1fr; }
  .reservas-info__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .contacto-page__grid { grid-template-columns: 1fr; gap: 3rem; }
  .form__row { grid-template-columns: 1fr; }
  .woocommerce ul.products { grid-template-columns: 1fr; }
  .page-cta__btns { flex-direction: column; align-items: center; }
  .catalogo__grid { grid-template-columns: 1fr; }
  .productos-aviso__inner p { text-align: center; }
}

@media (max-width: 480px) {
  .valores__grid { grid-template-columns: 1fr; }
  .woocommerce ul.products { grid-template-columns: 1fr; }
}

/* ── CATÁLOGO: enlace "Ver producto" ───────────────────────────────────────── */
.catalogo__cta {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold);
  text-transform: uppercase;
  /* auto, no una medida fija: empuja el enlace al fondo de la tarjeta para que
     todas las de una fila lo tengan a la misma altura aunque el nombre ocupe una
     o dos líneas. OJO: esta regla va DESPUÉS de la de arriba y por eso manda. */
  margin-top: auto;
  padding-top: 0.75rem;
  transition: gap 0.2s;
}

/* ── PRODUCTO INDIVIDUAL ───────────────────────────────────────────────────── */
.producto-hero {
  position: relative;
  height: 60vh;
  min-height: 400px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.producto-hero__bg { position: absolute; inset: 0; }
.producto-hero__img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.producto-hero__content {
  position: relative;
  z-index: 2;
  padding: 2.5rem clamp(1.5rem, 5vw, 5rem);
  max-width: 700px;
}
.producto-hero__content h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0.5rem 0;
}
.producto-hero__precio {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
  margin-top: 0.5rem;
}
.producto-hero__precio .woocommerce-Price-amount { color: var(--gold); }

.producto-detalle { padding: clamp(4rem, 8vw, 6rem) 0; }
.producto-detalle__grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 4rem;
  align-items: start;
}
.producto-detalle__intro {
  font-size: 1.15rem;
  font-weight: 300;
  color: var(--gray-lt);
  line-height: 1.8;
  margin-bottom: 2rem;
  border-left: 3px solid var(--gold);
  padding-left: 1.5rem;
}
.producto-detalle__body {
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--gray-lt);
}
.producto-detalle__body p { margin-bottom: 1rem; }
.producto-detalle__body ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.producto-detalle__body li { margin-bottom: 0.4rem; }

.producto-detalle__aside {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 2px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 100px;
}
.producto-aside__precio {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gold);
}
.producto-aside__precio .woocommerce-Price-amount { color: var(--gold); }
.producto-aside__aviso {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.875rem;
  color: var(--gray-lt);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 1.5rem;
}
.producto-aside__aviso .dato__icon { color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.producto-aside__aviso strong { color: var(--white); }
.btn--wa { text-align: center; }

@media (max-width: 768px) {
  .producto-detalle__grid { grid-template-columns: 1fr; }
  .producto-detalle__aside { position: static; }
}

/* ── PRODUCTO INDIVIDUAL: layout imagen izquierda / info derecha ─────────── */
.prod-single {
  /* Arriba mucho menos aire: esta sección es LO PRIMERO de la página y el body ya
     reserva el hueco del menú fijo. Con el padding de sección intermedia quedaban
     164px en blanco entre el menú y la foto del producto. Abajo se mantiene. */
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(5rem, 10vw, 8rem);
  min-height: 80vh;
}
.prod-single__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.prod-single__img {
  /* Sin sticky: con `top:100px` el navegador empujaba la foto 60px hacia abajo ya
     en reposo (el offset se mide desde el padding del body, que reserva el menú),
     y quedaba desalineada con el título. Como la foto y la columna de texto miden
     casi lo mismo, el efecto de "foto que acompaña" no se llegaba a apreciar. */
  /* Marco cuadrado idéntico en todas las fichas. Las fotos se normalizan antes
     de subirlas (tienda/normalizar_fotos.py): mismo lienzo 1200x1200, mismo fondo
     blanco y el producto siempre al 86% del lienzo. Así ninguna sale enana ni
     enorme y no hay bandas de relleno. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 2px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.prod-single__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(22,22,22,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
.prod-single__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  position: relative;
  z-index: 0;
}
.prod-single__img-empty {
  width: 100%; height: 100%;
  background: #1a1a1a;
}
.prod-single__title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0.5rem 0 1rem;
}
/* Al filtrar sin recargar, la rejilla se desvanece y vuelve. Nada de bajar la
   opacidad de golpe: se atenúa poco (0.55) y con transición, así se percibe como
   un cambio suave y no como que la pantalla se apaga. */
/* La transición va en la MISMA sección que recibe la clase, si no el cambio de
   opacidad es un salto seco en vez de un fundido. */
#productos {
  transition: opacity 0.12s ease;
}
#productos.esta-cargando {
  opacity: 0.55;
}

/* Recuadro de variantes en las tarjetas: "4 sabores", "2 colores", "3 opciones".
   Va pegado al precio, en la misma línea, con el dorado de la marca pero en versión
   contorno para que no compita con la etiqueta "En Tienda" de la foto. */
.catalogo__precio-linea {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.catalogo__variantes-chip {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--gold);
  border: 1px solid rgba(201, 169, 110, 0.45);
  border-radius: 2px;
  white-space: nowrap;
}

.prod-single__precio {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 1.5rem;
}
.prod-single__precio .woocommerce-Price-amount,
.prod-single__precio bdi { color: var(--gold); }
.prod-single__variantes {
  margin-bottom: 1.5rem;
}
.prod-single__variantes-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-lt);
  margin-bottom: 0.75rem;
}
.prod-single__variantes-list {
  /* En fila y ajustadas al texto: son etiquetas de sabor, no filas de precio */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}
.prod-single__variantes-list li {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(201,169,110,0.15);
  border-radius: 2px;
}
.prod-single__variante-peso { font-weight: 600; color: var(--white); }
.prod-single__variante-precio,
.prod-single__variante-precio .woocommerce-Price-amount,
.prod-single__variante-precio bdi { font-weight: 700; color: var(--gold); }
.prod-single__desc-corta {
  font-size: 1rem;
  color: var(--gray-lt);
  line-height: 1.8;
  padding-left: 1.25rem;
  border-left: 2px solid var(--gold);
  margin-bottom: 1.5rem;
}
.prod-single__desc-larga {
  font-size: 0.9rem;
  color: var(--gray-lt);
  line-height: 1.9;
  margin-bottom: 1.75rem;
}
.prod-single__desc-larga p { margin-bottom: 0.75rem; }
.prod-single__desc-larga ul { padding-left: 1.25rem; }
.prod-single__aviso {
  background: rgba(201,169,110,0.06);
  border-left: 3px solid var(--gold);
  padding: 1rem 1.25rem;
  border-radius: 2px;
  margin-bottom: 1.75rem;
}
.prod-single__aviso p { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; color: var(--gold); margin: 0; }
.prod-single__actions { display: flex; flex-direction: column; gap: 0.75rem; }
.prod-single__actions .btn { display: flex; justify-content: center; align-items: center; width: 100%; }

@media (max-width: 768px) {
  .prod-single__grid { grid-template-columns: 1fr; }
  .prod-single__img { position: static; aspect-ratio: 4 / 3; }
}

/* ── CONTACTO: botón WhatsApp ────────────────────────────────────────────── */
.contacto-wa {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--gold);
  color: var(--black);
  font-weight: 700;
  font-size: 1rem;
  padding: 1rem 1.5rem;
  border-radius: 2px;
  text-decoration: none;
  transition: opacity 0.2s;
  margin-bottom: 1.5rem;
}
.contacto-wa:hover { opacity: 0.9; }
.contacto-wa--big {
  font-size: 1.05rem;
  padding: 1.25rem 2rem;
}

/* ── FIX imagen productos catálogo ──────────────────────────────────────── */
.catalogo__img img,
.producto__img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* ── NAV DROPDOWN — funciona con WP menu Y con el fallback ──────────────── */

/* Compartido: el li padre es el trigger del hover */
.nav__links li.nav__has-dropdown,
.nav__links li.menu-item-has-children {
  position: relative;
}

/* Pseudo-elemento que "rellena" el hueco entre el texto y el menú desplegable
   para que el cursor no "salga" del hover al moverse hacia abajo */
.nav__links li.nav__has-dropdown::after,
.nav__links li.menu-item-has-children::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 16px; /* cubre el hueco */
}

/* Trigger del fallback (span) — no clicable */
.nav__dropdown-trigger {
  color: var(--gray-lt);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: default;
  user-select: none;
}
.nav__dropdown-trigger::after,
.nav__links li.menu-item-has-children > a::after {
  content: ' ▾';
  font-size: 0.65em;
  opacity: 0.5;
}

/* Servicios no clicable (cuando se configura como # en WP Menú) */
.nav__links a[href="#"] { cursor: default; pointer-events: none; }

/* El desplegable — oculto por defecto */
.nav__dropdown,
.nav__links .sub-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: #0e0e0e;
  border: 1px solid rgba(201,169,110,0.2);
  border-top: 2px solid var(--gold);
  min-width: 220px;
  list-style: none;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 9999;
}

/* Mostrar al hacer hover sobre el li */
.nav__links li.nav__has-dropdown:hover .nav__dropdown,
.nav__links li.menu-item-has-children:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

/* Items del desplegable */
.nav__dropdown li a,
.nav__links .sub-menu li a {
  display: block;
  padding: 0.7rem 1.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-lt);
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
  pointer-events: all !important;
  cursor: pointer !important;
}
.nav__dropdown li a:hover,
.nav__links .sub-menu li a:hover {
  color: var(--gold);
  background: rgba(201,169,110,0.06);
}

/* ── MOBILE SERVICIOS ────────────────────────────────────────────────────── */
.nav__mobile-parent {
  display: block;
  padding: 1.3rem 2rem;
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
}
.nav__mobile-sub {
  list-style: none;
  padding: 0;
  background: rgba(201,169,110,0.04);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.nav__mobile-sub li { border-bottom: 1px solid rgba(255,255,255,0.04); }
.nav__mobile-sub li:last-child { border-bottom: none; }
.nav__mobile-sub li a {
  font-size: 0.7rem;
  color: var(--gray-lt);
  padding: 0.9rem 2rem;
  display: block;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  font-weight: 500;
}
.nav__mobile-sub li a:hover { color: var(--gold); }

/* ── SERVICIO CARD: clicable ─────────────────────────────────────────────── */
.servicio { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.servicio:hover .servicio__img-wrap img { transform: scale(1.04); }
.servicio__img-wrap img { transition: transform 0.5s ease; }

/* ── PÁGINA SERVICIO INDIVIDUAL ──────────────────────────────────────────── */
.sv-hero {
  position: relative;
  height: 70vh;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.sv-hero__bg { position: absolute; inset: 0; background: var(--dark); }
.sv-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.5; }
.sv-hero__content {
  position: relative;
  z-index: 2;
  padding: 3rem clamp(1.5rem, 6vw, 6rem);
  max-width: 800px;
}
.sv-hero__content h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0.5rem 0 1rem;
}
.sv-hero__sub { font-size: 1.1rem; color: var(--gray-lt); margin-bottom: 1.25rem; }
.sv-hero__meta { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; font-size: 0.85rem; color: var(--gray); }
.sv-hero__meta span { border: 1px solid rgba(255,255,255,0.15); padding: 0.35rem 0.85rem; border-radius: 20px; }

.sv-content { padding: clamp(4rem, 8vw, 7rem) 0; }
.sv-content__body {
  max-width: 780px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--gray-lt);
}
.sv-content__body h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--white);
  margin: 2.5rem 0 1rem;
  letter-spacing: -0.01em;
}
.sv-content__body h2:first-child { margin-top: 0; }
.sv-content__body p { margin-bottom: 1rem; }
.sv-content__body ul { padding-left: 1.5rem; margin-bottom: 1.5rem; }
.sv-content__body li { margin-bottom: 0.6rem; }
.sv-content__body strong { color: var(--white); }
.sv-content__body em { color: var(--gold); font-style: italic; }
.sv-content__body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
  font-size: 0.9rem;
}
.sv-content__body th, .sv-content__body td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sv-content__body th { color: var(--gold); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.sv-content__cta {
  display: flex;
  gap: 1rem;
  margin-top: 3rem;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

/* ── DROPDOWN TRIGGER (no link) ─────────────────────────────────────────── */
.nav__dropdown-trigger {
  color: var(--gray-lt);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: default;
  user-select: none;
  transition: color 0.2s;
}
.nav__dropdown-trigger::after { content: ' ▾'; font-size: 0.65em; opacity: 0.6; }
.nav__has-dropdown:hover .nav__dropdown-trigger { color: var(--gold); }

/* ── SERVICIO INDIVIDUAL v2 ─────────────────────────────────────────────── */

/* Hero */
.sv2-hero {
  position: relative;
  height: 85vh;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.sv2-hero__img-wrap {
  position: absolute;
  inset: 0;
}
.sv2-hero__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.sv2-hero__img-wrap--empty { background: var(--black2); }
.sv2-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(22,22,22,0.2) 0%,
    rgba(22,22,22,0.5) 50%,
    rgba(22,22,22,0.95) 100%
  );
}
.sv2-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
}
.sv2-hero__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 3rem clamp(1.25rem, 5vw, 3rem);
}
.sv2-hero__inner h1 {
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 0.5rem 0 1.25rem;
  line-height: 1;
}
.sv2-hero__badges {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.sv2-hero__badges span {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gray-lt);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 0.4rem 1rem;
  border-radius: 20px;
}
.sv2-hero__price {
  color: var(--gold) !important;
  border-color: var(--gold) !important;
}
.sv2-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Cuerpo del servicio */
.sv2-body { padding-bottom: 0; }

/* Intro: texto + imagen opcional */
.sv2-intro { padding: clamp(4rem, 8vw, 7rem) 0; }
.sv2-intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}
.sv2-intro__grid.has-img { grid-template-columns: 1fr 400px; }

/* Contenido del editor: tipografía rica */
.sv2-intro__text h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--white);
  margin: 2.5rem 0 1rem;
  letter-spacing: -0.01em;
  position: relative;
  padding-left: 1.25rem;
}
.sv2-intro__text h2::before {
  content: '';
  position: absolute;
  left: 0; top: 0.2em; bottom: 0.2em;
  width: 3px;
  background: var(--gold);
  border-radius: 2px;
}
.sv2-intro__text h2:first-child { margin-top: 0; }
.sv2-intro__text p {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--gray-lt);
  margin-bottom: 1.25rem;
}
.sv2-intro__text ul {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.sv2-intro__text li {
  padding: 1.1rem 1.5rem;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--gold);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--gray-lt);
  transition: background 0.2s;
}
.sv2-intro__text li:hover { background: rgba(201,169,110,0.06); }
.sv2-intro__text li strong { color: var(--white); display: block; margin-bottom: 0.2rem; }
.sv2-intro__text em { color: var(--gold); font-style: italic; }
.sv2-intro__text table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
  font-size: 0.9rem;
  overflow-x: auto;
  display: block;
}
.sv2-intro__text th, .sv2-intro__text td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sv2-intro__text th { color: var(--gold); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(201,169,110,0.05); }

.sv2-intro__img {
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 3/4;
  position: sticky;
  top: 100px;
}
.sv2-intro__img img { width: 100%; height: 100%; object-fit: cover; }

/* CTA final */
.sv2-cta {
  background: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: clamp(4rem, 8vw, 6rem) 0;
}
.sv2-cta__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
}
.sv2-cta__text h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0.5rem 0 0.75rem; }
.sv2-cta__text p { color: var(--gray-lt); font-size: 0.95rem; line-height: 1.7; max-width: 500px; }
.sv2-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
  white-space: nowrap;
}
.sv2-cta__back {
  font-size: 0.78rem;
  color: var(--gray);
  letter-spacing: 0.06em;
  transition: color 0.2s;
  margin-top: 0.25rem;
}
.sv2-cta__back:hover { color: var(--gold); }

@media (max-width: 900px) {
  .sv2-intro__grid.has-img { grid-template-columns: 1fr; }
  .sv2-intro__img { position: static; aspect-ratio: 16/9; }
  .sv2-cta__inner { grid-template-columns: 1fr; }
}

/* ── PÁGINA SERVICIOS — SLIDES ──────────────────────────────────────────── */

/* Dots de navegación lateral */
.svp-dots {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 50;
}
.svp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.3);
  transition: background 0.3s, transform 0.3s, border-color 0.3s;
  display: block;
}
.svp-dot.is-active {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.4);
}
.svp-dot:hover { background: var(--gold); border-color: var(--gold); }

/* Wrapper */
.svp-wrap { }

/* Cada slide */
.svp-slide {
  display: grid;
  grid-template-columns: 45% 55%;
  min-height: 100vh;
  scroll-margin-top: 0;
}

/* Imagen izquierda — sticky mientras scrolleas el texto */
.svp-slide__img {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--dark);
}
.svp-slide__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.svp-slide__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, rgba(22,22,22,0.6) 100%);
}
.svp-slide__num {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  font-size: 6rem;
  font-weight: 900;
  color: rgba(255,255,255,0.06);
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* Contenido derecha */
.svp-slide__content {
  padding: clamp(5rem, 8vw, 8rem) clamp(2rem, 5vw, 5rem) clamp(5rem, 8vw, 8rem) clamp(2rem, 4vw, 4rem);
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}
.svp-slide__inner { width: 100%; }

.svp-slide__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0.5rem 0 2rem;
  line-height: 1.05;
}

/* Texto del servicio */
.svp-slide__text { margin-bottom: 2.5rem; }

.svp-slide__text h2 {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 700;
  color: var(--white);
  margin: 2rem 0 0.75rem;
  padding-left: 1rem;
  border-left: 3px solid var(--gold);
}
.svp-slide__text h2:first-child { margin-top: 0; }

.svp-slide__text p {
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--gray-lt);
  margin-bottom: 1rem;
}

/* Acotaciones — párrafos con solo em o con texto de experto */
.svp-slide__text p:has(> em:only-child),
.svp-slide__text p > em {
  display: block;
  background: rgba(201,169,110,0.07);
  border-left: 3px solid var(--gold);
  padding: 1rem 1.25rem;
  border-radius: 0 2px 2px 0;
  font-style: italic;
  color: var(--gold-lt, #e0c28e);
  font-size: 0.88rem;
  line-height: 1.7;
  margin: 1.5rem 0;
}

/* Lista de ventajas */
.svp-slide__text ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.svp-slide__text li {
  padding: 0.9rem 1.25rem;
  background: rgba(255,255,255,0.025);
  border-left: 2px solid rgba(201,169,110,0.35);
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--gray-lt);
}
.svp-slide__text li strong {
  color: var(--white);
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.85rem;
}

/* Tabla comparativa */
.svp-slide__text table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.82rem; }
.svp-slide__text th, .svp-slide__text td { padding: 0.6rem 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.06); text-align: left; }
.svp-slide__text th { color: var(--gold); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(201,169,110,0.04); }

/* Separador visual entre slides */
.svp-slide + .svp-slide {
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* CTAs del slide */
.svp-slide__cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Responsive */
@media (max-width: 900px) {
  .svp-slide { grid-template-columns: 1fr; }
  .svp-slide__img { position: relative; height: 50vw; min-height: 280px; }
  .svp-slide__content { min-height: auto; }
  .svp-dots { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   PÁGINA SERVICIOS — SECCIONES ALTERNADAS (v3, limpia y directa)
   ══════════════════════════════════════════════════════════════════ */

/* Dots laterales */
.svp-dots {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  z-index: 200;
}
.svp-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  transition: background .3s, transform .3s, border-color .3s;
  display: block;
}
.svp-dot.is-active { background: var(--gold); border-color: var(--gold); transform: scale(1.5); }
.svp-dot:hover     { background: var(--gold); border-color: var(--gold); }

/* Wrapper */
.svp-wrap { display: flex; flex-direction: column; }

/* Slide — cada servicio */
.svp-slide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  scroll-margin-top: 0;
}
/* Impar: imagen derecha, texto izquierda */
.svp-slide--reverse { direction: rtl; }
.svp-slide--reverse > * { direction: ltr; }

/* Imagen */
.svp-slide__img {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--black2);
}
.svp-slide__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.svp-slide__img-num {
  position: absolute;
  bottom: 1.5rem; left: 1.5rem;
  font-size: 7rem;
  font-weight: 900;
  color: rgba(255,255,255,0.05);
  line-height: 1;
  letter-spacing: -0.05em;
  pointer-events: none;
}

/* Contenido */
.svp-slide__content {
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 6rem clamp(2rem, 5vw, 5rem);
  background: var(--black);
  border-left: 1px solid rgba(255,255,255,0.04);
}
.svp-slide--reverse .svp-slide__content { border-left: none; border-right: 1px solid rgba(255,255,255,0.04); }

.svp-slide__inner { width: 100%; max-width: 560px; }

.svp-slide__inner h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 0.5rem 0 1.5rem;
  line-height: 1;
}

.svp-slide__intro {
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--gray-lt);
  margin-bottom: 1.75rem;
}

/* Lista de puntos */
.svp-slide__puntos {
  list-style: none;
  padding: 0;
  margin-bottom: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.svp-slide__puntos li {
  padding: 0.75rem 1rem 0.75rem 1.25rem;
  border-left: 2px solid var(--gold);
  background: rgba(201,169,110,0.04);
  font-size: 0.87rem;
  color: var(--gray-lt);
  line-height: 1.5;
}

/* Cita / acotación */
.svp-slide__cita {
  background: rgba(201,169,110,0.07);
  border-left: 3px solid var(--gold);
  padding: 1rem 1.25rem;
  border-radius: 0 2px 2px 0;
  font-style: italic;
  font-size: 0.88rem;
  color: var(--gold-lt, #e0c28e);
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* CTAs */
.svp-slide__cta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Separador entre slides */
.svp-slide + .svp-slide { border-top: 1px solid rgba(255,255,255,0.04); }

/* Responsive */
@media (max-width: 900px) {
  .svp-slide { grid-template-columns: 1fr; min-height: auto; direction: ltr !important; }
  .svp-slide--reverse > * { direction: ltr; }
  .svp-slide__img { position: relative; height: 55vw; min-height: 260px; }
  .svp-slide__content { min-height: auto; padding: 3rem 1.5rem; }
  .svp-slide__content, .svp-slide--reverse .svp-slide__content { border: none; border-top: 1px solid rgba(255,255,255,0.05); }
  .svp-dots { display: none; }
}

/* ── PÁGINA INDIVIDUAL DE SERVICIO — ajustes ────────────────────────────── */
/* En la página individual no hay scroll multi-slide, la imagen sticky se queda
   pegada mientras el usuario lee y luego aparece la sección "Otros servicios" */
.sv-single-slide .svp-slide__h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0.5rem 0 1.75rem;
}

/* ── CUADRO DE INFORMACIÓN (nivel / duración / precio) ──────────────────── */
.sv-cuadro {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(201,169,110,0.2);
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 1.75rem 0 2rem;
}
.sv-cuadro__label {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.35rem;
}
.sv-cuadro__value {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--white);
}
.sv-cuadro__item--precio .sv-cuadro__value {
  color: var(--gold);
  font-size: 1rem;
}
@media (max-width: 480px) {
  .sv-cuadro { grid-template-columns: 1fr; }
}

/* ── OTROS SERVICIOS — grid de miniaturas ───────────────────────────────── */
.otros-servicios__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 3rem;
}

/* Tarjeta de "otro servicio" */
.otro-sv {
  position: relative;
  overflow: hidden;
  display: block;
  color: var(--white);
  cursor: pointer;
  text-decoration: none;
}
.otro-sv__img {
  height: 320px;
  overflow: hidden;
  background: var(--black2);
}
.otro-sv__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.otro-sv__img-empty {
  width: 100%;
  height: 100%;
  background: var(--black2);
}
.otro-sv:hover .otro-sv__img img {
  transform: scale(1.06);
}
.otro-sv::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22,22,22,0.92) 0%, rgba(22,22,22,0.15) 55%);
  pointer-events: none;
}
.otro-sv__body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 1;
  padding: 1.75rem 2rem;
}
.otro-sv__num {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold);
  display: block;
  margin-bottom: 0.4rem;
}
.otro-sv__body h3 {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 700;
  margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
}
.otro-sv__body .link-gold {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  display: inline-block;
}
.otro-sv:hover .otro-sv__body .link-gold {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .otros-servicios__grid { grid-template-columns: repeat(2, 1fr); }
  .otro-sv__img { height: 260px; }
}
@media (max-width: 600px) {
  .otros-servicios__grid { grid-template-columns: 1fr; }
  .otro-sv__img { height: 220px; }
  .otro-sv__body .link-gold { opacity: 1; transform: none; }
}

/* ── SECCIÓN SEO ─────────────────────────────────────────────────────────── */
/* ── GALERÍA DE LA CLASE — columna junto al texto SEO ─────────────────────── */
.sv-galeria__h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.25;
  /* 1.5rem: el aire que antes ponia el subtitulo, ahora quitado */
  margin-bottom: 1.5rem;
}
/* Escritorio: las tres apiladas, se aprovecha el alto de la columna del SEO.
   El carrusel solo entra en móvil (ver la @media de abajo). */
.sv-galeria__track {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sv-galeria__item {
  margin: 0;
  overflow: hidden;
  background: var(--black);
}
.sv-galeria__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.sv-galeria__nav {
  display: none;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
}
.sv-galeria__contador {
  margin-right: auto;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gold);
}
.sv-galeria__btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201,169,110,0.35);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
}
.sv-galeria__btn:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); color: var(--black); }
.sv-galeria__btn:disabled { opacity: 0.28; cursor: default; }

.sv-seo {
  background: var(--black2);
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-top: 1px solid rgba(201,169,110,0.18);
  border-bottom: 1px solid rgba(201,169,110,0.18);
}
.sv-seo__inner {
  max-width: 820px;
}
.sv-seo__inner--galeria {
  max-width: var(--max-w);
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) {
  .sv-seo__inner--galeria { grid-template-columns: 1fr; gap: 2.5rem; }
  /* En móvil, apiladas ocuparían media pantalla cada una: aquí sí carrusel. */
  .sv-galeria__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .sv-galeria__viewport::-webkit-scrollbar { display: none; }
  .sv-galeria__track { flex-direction: row; }
  .sv-galeria__item { flex: 0 0 100%; scroll-snap-align: start; }
  .sv-galeria__nav { display: flex; }
}
.sv-seo__h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 1.5rem;
}
.sv-seo__intro {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  color: var(--gray-lt);
  line-height: 1.85;
  margin-bottom: 2.5rem;
}
.sv-seo__intro strong { color: var(--gold); font-weight: 600; }
.sv-seo__h3 {
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
}
.sv-seo__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sv-seo__list li {
  font-size: clamp(0.9rem, 1.4vw, 1rem);
  color: var(--gray-lt);
  line-height: 1.7;
  padding: 0.85rem 1.25rem 0.85rem 1rem;
  border-left: 3px solid var(--gold);
  background: rgba(255,255,255,0.03);
}
.sv-seo__list li strong { color: var(--white); font-weight: 700; }
@media (max-width: 900px) {
  .sv-seo__inner { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE FIXES
   ═══════════════════════════════════════════════════════════════ */

/* Fix #1 — Hero móvil: texto siempre visible, mujer en la parte superior */
@media (max-width: 600px) {
  /* Hero a pantalla completa para dar espacio de sobra al texto */
  .hero { height: calc(100svh - var(--nav-h)); min-height: 520px; }
  /* Texto al fondo del hero — siempre visible al entrar */
  .hero__slide { align-items: flex-end; padding-bottom: 1.75rem; padding-top: 0; }
  /* Encuadre: lado izquierdo con un recorte alto para acercar la imagen al menú */
  .hero__img { object-position: 6% center; }
  /* Gradiente solo en la zona inferior para que el texto sea legible */
  .hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(22,22,22,0.1) 0%,
      transparent 25%,
      rgba(22,22,22,0.65) 65%,
      rgba(22,22,22,0.92) 100%
    );
    pointer-events: none;
  }
  /* Texto centrado, alineado y compacto para no invadir la zona de la cara */
  .hero__content { text-align: center !important; margin-right: 0 !important; }
  .hero__eyebrow { display: block; text-align: center; margin-bottom: 0.85rem; }
  .hero__title { align-items: center !important; margin-bottom: 0.85rem; gap: 0; }
  .hero__sub { text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 1.25rem; font-size: 0.85rem; }
  .hero__word { display: block; text-align: center; font-size: clamp(2rem, 9vw, 2.6rem); }
}

/* Fix #2 — Menú hamburguesa: sub-menús desplegables */

/* Contenedor del padre: relativo para posicionar el chevron */
.nav__mobile-links .menu-item-has-children,
.nav__mobile-group { position: relative; display: block; }

/* El enlace padre ocupa todo el ancho — mismo padding que el resto para que el texto quede centrado igual que los demás (el chevron se superpone, no ocupa espacio propio) */
.nav__mobile-links .menu-item-has-children > a,
.nav__mobile-group > a.nav__mobile-parent {
  display: block;
  width: 100%;
}

/* Chevron: posición absoluta a la derecha, no afecta al centrado del texto */
.nav__mobile-toggle {
  position: absolute;
  right: 0;
  top: 0;
  height: 3.6rem; /* alto del enlace padre (~2×1.3rem padding + línea 0.8rem): el chevron se queda junto a "Servicios" aunque el submenú esté desplegado, en vez de centrarse sobre todo el <li> */
  width: 3.5rem;
  background: none;
  border: none;
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav__mobile-toggle svg { transition: transform 0.25s ease; }
.nav__mobile-toggle.is-open svg { transform: rotate(90deg); }

/* Estilos de los items del sub-menú (WP + fallback) — en dorado */
.nav__mobile-links .sub-menu,
.nav__mobile-sub {
  display: none;
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.nav__mobile-links .sub-menu.is-open,
.nav__mobile-sub.is-open { display: block; }
.nav__mobile-links .sub-menu li a,
.nav__mobile-sub li a {
  font-size: 0.7rem;
  color: var(--gold) !important;
  padding: 0.9rem 2rem;
  display: block;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.nav__mobile-links .sub-menu li:last-child a,
.nav__mobile-sub li:last-child a { border-bottom: none; }

/* Fix extra — Menú móvil: permite scroll cuando el submenú desplegado no cabe en pantalla */
.nav__mobile {
  justify-content: flex-start;
  overflow-y: auto;
  padding: 5.5rem 0 2rem;
}

/* Fix #3 — Watermark: oculta el número en todos los tamaños */
.svp-slide__img-num { display: none !important; }

/* ── Borrar filtros (desktop y móvil) */
.catalogo__clear {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-lt);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 0.45rem 0.9rem;
  border-radius: 2px;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
  text-decoration: none;
  flex-shrink: 0;
}
.catalogo__clear:hover { color: var(--white); border-color: rgba(255,255,255,0.45); }

/* Fix #5 — Filtro en móvil: siempre visible, en el flujo de la página */

/* FAB, backdrop y cabecera del panel ocultos — no se usan */
.catalogo__fab,
.catalogo__backdrop,
.catalogo__filtro-header { display: none !important; }

@media (max-width: 768px) {
  /* Filtro sticky en móvil: sigue al usuario igual que en escritorio.
     La barra de menú mide 63px y encoge a 59px al bajar; con top:64px quedaba un
     hueco de 5px por el que se veía pasar el contenido. Con 56px el filtro se mete
     siempre por debajo del menú (que va a z-index 100 y lo tapa). */
  .catalogo__filtro {
    position: sticky !important;
    top: 56px !important;
    transform: none !important;
    transition: none !important;
    background: var(--black2) !important;
    border-top: 3px solid var(--gold) !important;
    border-bottom: 1px solid rgba(201,169,110,0.15) !important;
    padding: 1rem 0 !important;
    z-index: 10 !important;
  }
  .catalogo__filtro-inner { flex-direction: column; gap: 0.75rem; }
  .catalogo__select { width: 100%; min-width: auto; }
  .catalogo__clear { width: 100%; justify-content: center; }
}

/* ── NOTICIAS (Blog) ─────────────────────────────────────────────────────────── */
.noticias-buscar {
  background: var(--black2);
  padding: 2rem 0;
  border-bottom: 1px solid rgba(201,169,110,0.15);
}
.noticias-buscar__form {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 700px;
  margin: 0 auto;
}
.noticias-buscar__icono { flex-shrink: 0; color: var(--gold); }
.noticias-buscar__input {
  flex: 1;
  min-width: 180px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(201,169,110,0.3);
  color: var(--white);
  padding: 0.875rem 1.25rem;
  font-family: var(--font-main);
  font-size: 0.9rem;
}
.noticias-buscar__input::placeholder { color: var(--gray-lt); }
.noticias-buscar__input:focus { outline: none; border-color: var(--gold); }
.noticias-buscar__clear {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-lt);
  text-decoration: none;
  transition: color 0.2s;
}
.noticias-buscar__clear:hover { color: var(--gold); }

.noticias { padding: clamp(4rem, 8vw, 7rem) 0; scroll-margin-top: var(--nav-h); }

.noticias-lista {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 6vw, 5rem);
  max-width: 1000px;
  margin: 0 auto;
}
.noticias-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  width: 92%;
  text-decoration: none;
}
.noticias-item:nth-child(odd)  { align-self: flex-start; }
.noticias-item:nth-child(even) { align-self: flex-end; }
.noticias-item:nth-child(even) .noticias-item__img  { order: 2; }
.noticias-item:nth-child(even) .noticias-item__body { order: 1; }

.noticias-item__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.noticias-item__img-placeholder { width: 100%; height: 100%; background: #1a1a1a; }

.noticias-item__fecha {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.noticias-item__body h2 {
  font-size: clamp(1.25rem, 2.5vw, 1.9rem);
  margin-bottom: 0.75rem;
}
.noticias-item__body h2 a {
  color: var(--white);
  text-decoration: none;
  transition: color 0.2s;
}
.noticias-item__body h2 a:hover { color: var(--gold); }
.noticias-item__body p {
  color: var(--gray-lt);
  font-weight: 300;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.noticias-item__cta {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: opacity 0.2s;
}
.noticias-item__cta:hover { opacity: 0.7; }

.noticias-paginacion {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  flex-wrap: wrap;
}

.noticias-empty {
  text-align: center;
  color: var(--gray-lt);
  font-weight: 300;
  padding: 3rem 0;
}

@media (max-width: 767px) {
  .noticias-item {
    grid-template-columns: 1fr;
    width: 100%;
    align-self: stretch;
  }
  .noticias-item:nth-child(even) .noticias-item__img,
  .noticias-item:nth-child(even) .noticias-item__body {
    order: initial;
  }
}

/* ── PÁGINAS LEGALES (Privacidad, Cookies, Términos y Condiciones) ───────────── */
.legal-content {
  margin-top: 2rem;
}
.legal-content h2,
.legal-content .wp-block-heading {
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.01em;
  margin-top: 10px;
  margin-bottom: 10px;
}
.legal-content h2:first-of-type,
.legal-content .wp-block-heading:first-of-type {
  margin-top: 0;
}
.legal-content p,
.legal-content .wp-block-paragraph {
  margin-bottom: 10px;
  line-height: 1.7;
  color: var(--white);
}
.legal-content a { color: var(--gold); text-decoration: underline; }
.legal-content em { color: var(--gray-lt); }

/* ── SOBRE NOSOTROS (fundador + certificaciones) ─────────────────────────────── */
.fundador__media { display: flex; flex-direction: column; gap: 1.5rem; }
.fundador__media img { width: 100%; border-radius: 2px; object-fit: cover; }
.fundador__cita {
  margin: 0;
  background: rgba(201,169,110,0.07);
  border-left: 3px solid var(--gold);
  padding: 1rem 1.25rem;
  border-radius: 0 2px 2px 0;
  font-style: normal;
  font-size: 1rem;
  color: var(--gold-lt);
  line-height: 1.7;
}
/* Placeholder de foto (mientras no exista el retrato real) */
.foto-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem; text-align: center;
  height: 100%; min-height: 420px;
  border: 1px solid rgba(201,169,110,0.35);
  background: linear-gradient(160deg, rgba(201,169,110,0.07), rgba(255,255,255,0.02));
  border-radius: 2px; padding: 2rem;
}
.foto-placeholder__icon { font-size: 2.5rem; color: var(--gold); opacity: 0.7; line-height: 1; }
.foto-placeholder__txt { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-lt); font-weight: 600; }
.foto-placeholder__sub { font-size: 0.75rem; color: var(--gray); font-weight: 300; letter-spacing: 0.06em; }
/* Botón "Conócenos" dentro del bloque de texto */
.intro__text .btn { align-self: flex-start; margin-top: 0.5rem; }

/* Formación — dos grupos (académica / certificaciones) */
.cred-groups { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); }
.cred-group h3 { font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); margin-bottom: 1.5rem; padding-bottom: 0.85rem; border-bottom: 1px solid rgba(201,169,110,0.3); }
.cred-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.cred-group li { display: flex; flex-direction: column; gap: 0.25rem; }
.cred-name { color: var(--white); font-weight: 500; font-size: 1.05rem; line-height: 1.35; }
.cred-desc { color: var(--gray); font-weight: 300; font-size: 0.85rem; line-height: 1.4; }
@media (max-width: 768px) { .cred-groups { grid-template-columns: 1fr; gap: 2.5rem; } }

/* Home: menos hueco entre "Sobre nosotros" y "Servicios" */
#sobre-nosotros { padding-bottom: clamp(1.5rem, 3vw, 3rem); }

/* Sobre nosotros (página): imagen vertical que acompaña a todo el texto */
.intro__grid--about { align-items: stretch; }
.intro__grid--about .fundador__media { height: 100%; }
.intro__grid--about .fundador__media img,
.intro__grid--about .fundador__media .foto-placeholder { flex: 1 1 auto; min-height: 340px; }

/* Badge "Fundador" (ya sin número) */
.intro__image-badge .badge__text { font-size: 0.8rem; letter-spacing: 0.12em; }

/* ── PREGUNTAS FRECUENTES (Q&A / FAQ) ─────────────────────────────────────────
   Sección de home debajo de la Tienda. Foto vertical + acordeón a dos columnas,
   estética de marca (dorado sobre negro). Acordeón exclusivo nativo
   (<details name="faq-elf">): sólo una abierta, accesible, sin JS, indexable. */
.faq {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

/* Menos separación de la FAQ con sus vecinas en la home */
.tienda    { padding-bottom: clamp(2rem, 4vw, 3.5rem); } /* hueco bajo "Ver toda la tienda" */
.ubicacion { padding-top: clamp(3rem, 6vw, 5rem); }      /* hueco antes de Contacto */

.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start; /* foto anclada arriba: NO se mueve al abrir/cerrar preguntas */
}

/* Foto vertical, más pequeña y centrada en su columna (deja aire arriba/abajo) */
.faq__image {
  width: min(100%, 400px);
  aspect-ratio: 3 / 4;
  margin: 4rem auto 0; /* aire arriba fijo (queda centrada en reposo) + centrada horizontalmente */
  border-radius: 2px;
  overflow: hidden;
}
.faq__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Contenido a la derecha */
.faq__content { display: flex; flex-direction: column; }
.faq__title { margin-bottom: 0.25rem; }
.faq__list { margin-top: 2rem; }

.faq__item { border-bottom: 1px solid rgba(255,255,255,0.12); }
.faq__item:first-child { border-top: 1px solid rgba(255,255,255,0.12); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  font-weight: 600;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.35;
  color: var(--white);
  list-style: none;
  transition: color 0.25s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--gold); }
.faq__item[open] .faq__q { color: var(--gold); }

/* Icono +/− dibujado con CSS, en dorado */
.faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px; height: 18px;
}
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  background: var(--gold);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.faq__icon::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.faq__icon::after  { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.faq__item[open] .faq__icon::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }

.faq__a { padding: 0 0 1.5rem; max-width: 52ch; }
.faq__a p { color: var(--gray-lt); font-weight: 300; font-size: 1rem; margin: 0; }
.faq__a p + p { margin-top: 0.75rem; }

@media (max-width: 768px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq__image { order: -1; width: min(100%, 360px); margin: 0 auto; }
  .faq__a { max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   UTILIDADES
   ══════════════════════════════════════════════════════════════════════════ */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.btn--grande {
  padding: 1.15rem 3.25rem;
  font-size: 0.82rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   RITMO DE LA PORTADA — secciones alternas (negro / gris) y bien pegadas
   ══════════════════════════════════════════════════════════════════════════ */
.intro,
.servicios,
.horarios,
.tarifas,
.tienda,
.faq,
.ubicacion {
  padding-top: clamp(2.75rem, 4.5vw, 4rem);
  padding-bottom: clamp(2.75rem, 4.5vw, 4rem);
}

.intro,
.horarios,
.tienda,
.ubicacion { background: var(--black); }

.servicios,
.tarifas,
.faq { background: var(--black2); }

.section-header { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }

/* ══════════════════════════════════════════════════════════════════════════
   HORARIOS — calendario semanal por sala
   ══════════════════════════════════════════════════════════════════════════ */
.horarios__controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

.horarios__salas {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.05);
}

.horarios__sala {
  font-family: var(--font-main);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-lt);
  background: transparent;
  border: none;
  padding: 0.7rem 1.5rem;
  cursor: pointer;
  transition: all 0.25s ease;
}
.horarios__sala:hover { color: var(--gold); }
.horarios__sala.is-active { background: var(--gold); color: var(--black); }

.horarios__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.horarios__filtro {
  font-family: var(--font-main);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  transition: all 0.25s ease;
}
.horarios__filtro:hover { border-color: var(--gold); color: var(--gold); }
.horarios__filtro.is-active { border-color: var(--gold); color: var(--gold); background: rgba(201, 169, 110, 0.10); }

.horarios__wrap { position: relative; }
.horarios__panel { display: none; }
.horarios__panel.is-active { display: block; }
.horarios__scroll { overflow-x: auto; }

/* Toda la tabla es un enlace a la plataforma de reservas */
.horarios__link {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.horarios__wrap { transition: box-shadow 0.3s ease; }
.horarios__wrap:hover { box-shadow: 0 0 0 1px rgba(201, 169, 110, 0.35); }
.horarios__wrap:hover .horarios__clase { border-left-color: var(--gold-lt); }

.horarios__tabla {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  table-layout: fixed;
}

.horarios__tabla thead th {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0 0 1rem;
  text-align: center;
}
.horarios__th-hora { width: 108px; }

.horarios__tabla td,
.horarios__tabla tbody th {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.5rem 0.35rem;
  vertical-align: top;
}

.horarios__hora {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-lt);
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-align: left;
  font-variant-numeric: tabular-nums;
  padding-top: 1rem !important;
}

.horarios__celda { text-align: center; }

.horarios__clase {
  --c: var(--gold);
  --bg: rgba(201, 169, 110, 0.14);
  display: block;
  background: var(--bg);
  border-left: 3px solid var(--c);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
  padding: 0.7rem 0.6rem;
  margin-bottom: 0.35rem;
  text-align: left;
  transition: opacity 0.25s ease, border-color 0.3s ease;
}
.horarios__clase:last-child { margin-bottom: 0; }
.horarios__clase.is-oculta { opacity: 0.12; }

.horarios__clase--reformer      { --c: #c9a96e; --bg: rgba(201, 169, 110, 0.20); }
.horarios__clase--mat-pilates   { --c: #7fa8c9; --bg: rgba(127, 168, 201, 0.14); }
.horarios__clase--full-energy   { --c: #d2725a; --bg: rgba(210, 114,  90, 0.14); }
.horarios__clase--barre         { --c: #c98fb0; --bg: rgba(201, 143, 176, 0.14); }
.horarios__clase--funcional,
.horarios__clase--e-funcional   { --c: #8fc99b; --bg: rgba(143, 201, 155, 0.13); }

.horarios__pie {
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
  text-align: center;
}

@media (max-width: 700px) {
  .horarios__controles { flex-direction: column; align-items: flex-start; }
  .horarios__salas { width: 100%; }
  .horarios__sala { flex: 1; padding: 0.7rem 0.5rem; }
  .horarios__tabla { min-width: 620px; }
  .horarios__clase { font-size: 0.66rem; padding: 0.55rem 0.45rem; }
  .btn--grande { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TARIFAS
   ══════════════════════════════════════════════════════════════════════════ */
.tarifas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}

.tarifa {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.28);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.tarifa:hover { border-color: rgba(201, 169, 110, 0.45); transform: translateY(-4px); }

.tarifa--destacada {
  border-color: var(--gold);
  background: rgba(201, 169, 110, 0.06);
}

.tarifa__cabecera {
  padding-bottom: 1.25rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tarifa__titulo {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
}
.tarifa--destacada .tarifa__titulo { color: var(--gold); }

.tarifa__sub {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--gray);
  margin-top: 0.4rem;
}

.tarifa__lista { flex: 1; margin: 0.5rem 0 1.5rem; }

.tarifa__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.tarifa__fila:last-child { border-bottom: none; }

.tarifa__concepto { font-size: 0.85rem; font-weight: 300; color: var(--gray-lt); }

.tarifa__precio {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tarifa--destacada .tarifa__precio { color: var(--gold); }

.tarifa__btn { text-align: center; }

.tarifas__nota {
  margin-top: 1.75rem;
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--gray);
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTÓN FLOTANTE DE WHATSAPP
   ══════════════════════════════════════════════════════════════════════════ */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--black);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, background 0.25s ease;
}
.wa-float:hover { background: var(--gold-lt); transform: translateY(-3px); }
.wa-float svg { width: 1.75rem; height: 1.75rem; }

@media (prefers-reduced-motion: reduce) {
  .wa-float, .tarifa, .horarios__wrap, .horarios__clase { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HORARIOS — vista móvil: un día cada vez
   ══════════════════════════════════════════════════════════════════════════ */
.horarios__dias { display: none; }

@media (max-width: 780px) {
  .horarios__dias {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 3px;
  }
  .horarios__dia {
    font-family: var(--font-main);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-lt);
    background: transparent;
    border: none;
    padding: 0.65rem 0.25rem;
    cursor: pointer;
  }
  .horarios__dia.is-active { background: var(--gold); color: var(--black); }

  /* solo se ve la columna del día activo */
  .horarios__wrap.mostrar-l .dia:not(.dia-l),
  .horarios__wrap.mostrar-m .dia:not(.dia-m),
  .horarios__wrap.mostrar-x .dia:not(.dia-x),
  .horarios__wrap.mostrar-j .dia:not(.dia-j),
  .horarios__wrap.mostrar-v .dia:not(.dia-v),
  .horarios__wrap.mostrar-s .dia:not(.dia-s),
  .horarios__wrap.mostrar-d .dia:not(.dia-d) { display: none; }

  .horarios__tabla { min-width: 0; }
  .horarios__scroll { overflow-x: visible; }
  .horarios__th-hora { width: 92px; }
  .horarios__tabla thead th { padding-bottom: 0.75rem; }
  .horarios__clase { font-size: 0.72rem; padding: 0.7rem 0.6rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PÁGINA DE RESERVAS — el «Cómo funciona» pegado al calendario
   ══════════════════════════════════════════════════════════════════════════ */
.reservas-page { padding: 0 0 clamp(3rem, 6vw, 5rem); }
.reservas-info { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* ══════════════════════════════════════════════════════════════════════════
   PÁGINA DE CONTACTO — mapa grande a la izquierda, canales a la derecha
   ══════════════════════════════════════════════════════════════════════════ */
.contacto-page__grid {
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: 0;
}

.contacto-mapa-col .btn { margin-top: 1.5rem; }

.contacto-mapa {
  height: clamp(280px, 42vh, 420px);
  margin-top: 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.contacto-mapa iframe { display: block; width: 100%; height: 100%; }

.contacto-mapa__ph {
  display: grid;
  place-items: center;
  height: 100%;
  background: rgba(201, 169, 110, 0.06);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.contacto-mapa-col__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 1.75rem;
}

.contacto-dato strong {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.contacto-dato p {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--gray-lt);
  line-height: 1.7;
}

.contacto-canales__intro {
  color: var(--gray-lt);
  font-weight: 300;
  font-size: 0.9rem;
  margin: 0.75rem 0 1.75rem;
}

.contacto-canal {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  margin-bottom: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.contacto-canal:hover {
  border-color: var(--gold);
  background: rgba(201, 169, 110, 0.07);
  transform: translateX(3px);
}

.contacto-canal__icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--black);
}
.contacto-canal__icono svg { width: 1.35rem; height: 1.35rem; }

.contacto-canal__texto { flex: 1; min-width: 0; }
.contacto-canal__texto strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  overflow-wrap: anywhere;
}
.contacto-canal__texto small {
  display: block;
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--gray);
  margin-top: 0.15rem;
}

.contacto-canal__flecha { color: var(--gold); font-size: 1.1rem; }

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

/* ══════════════════════════════════════════════════════════════════════════
   MÓVIL — cabeceras de página cuadradas (1:1) en todas las páginas
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 780px) {
  .page-hero,
  .page-hero--short {
    height: 100vw;
    min-height: 0;
  }
  /* la cabecera de cada servicio (página Servicios) usa otro bloque */
  .svp-slide__img {
    position: relative;
    height: 100vw;
    min-height: 0;
  }
  /* al recortar en cuadrado el texto cae sobre zonas claras: más velo */
  .page-hero .hero__overlay {
    background: linear-gradient(to bottom, rgba(22, 22, 22, 0.55) 0%, rgba(22, 22, 22, 0.78) 100%);
  }
  /* ...menos en la cabecera de la tienda: ahí el título es dorado, el subtítulo
     casi negro y los logos negros, todo pensado sobre una foto CLARA. Este velo
     la apagaba y dejaba texto oscuro sobre fondo oscuro. Va después de la regla
     de arriba porque tienen la misma especificidad y gana la última. */
  .page-hero--marcas .hero__overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.08) 100%);
  }
}

/* ── Contacto: foto del bloque «Háblanos» + orden en móvil ── */
.contacto-canales__foto {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin-bottom: 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.contacto-canales__foto img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  /* en móvil primero «Háblanos», después «Encuéntranos» */
  .contacto-canales { order: -1; }
  .contacto-mapa-col { order: 1; margin-top: 2.5rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CABECERA CON FOTO PROPIA (contacto) — dos recortes según pantalla
   ══════════════════════════════════════════════════════════════════════════ */
.page-hero--foto .page-hero__bg picture,
.page-hero--foto .page-hero__bg img { display: block; width: 100%; height: 100%; }
.page-hero--foto .page-hero__bg img { object-fit: cover; object-position: center; }
/* el granito es claro: un poco más de velo para que el texto se lea */
.page-hero--foto .hero__overlay {
  background: linear-gradient(to bottom, rgba(22, 22, 22, 0.55) 0%, rgba(22, 22, 22, 0.62) 50%, rgba(22, 22, 22, 0.72) 100%);
}