/* ============================================================
   PARLADOIROS HOUSES — Landing
   Sistema visual: hueso + tinta. Bodoni Moda / Instrument Sans.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --bone:      #EAE6DC;
  --bone-2:    #E2DDD1;
  --bone-3:    #D5CFC0;
  --ink:       #101314;
  --slate:     #1B2426;
  --stone:     #7C776B;
  --paper:     #F6F4EE;
  --wa:        #25D366;

  /* Marca real, del logotipo de Parladoiros */
  --brand:      #1ecad3;   /* turquesa de marca: símbolo y fondos oscuros */
  --brand-deep: #0E7C83;   /* versión legible sobre hueso */
  --brand-mist: #84c6dc;   /* azul secundario del símbolo */

  /* Solo andamiaje: marca los datos pendientes de confirmar */
  --flag:      #9C4A25;

  --line:      rgba(27, 36, 38, .16);
  --line-soft: rgba(27, 36, 38, .09);
  --line-inv:  rgba(246, 244, 238, .18);

  --serif: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --sans:  "Instrument Sans", "Helvetica Neue", Helvetica, sans-serif;

  --gut: clamp(24px, 5vw, 72px);
  --sec: clamp(88px, 13vh, 176px);

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ============================================================
   OBERTURA EN VÍDEO
   Pantalla completa antes del hero. El vídeo es fondo: no lleva
   titular, para que el <h1> siga siendo el del hero.
   ============================================================ */
.obertura {
  position: relative;
  height: 100svh; min-height: 520px;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.obertura__media { position: absolute; inset: 0; }
.obertura__video {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  /* Arranca apagado y entra cuando el vídeo ya puede pintar, para que no
     se vea el salto del cartel al primer fotograma. */
  opacity: 0; transition: opacity 1.1s var(--ease);
}
.obertura.is-reproduciendo .obertura__video { opacity: 1; }

/* Mientras no hay vídeo mandan el cartel y el fondo oscuro. */
.obertura__media::before {
  content: ""; position: absolute; inset: 0;
  background: url("img/portada-cartel.jpg") center/cover no-repeat;
}
.obertura__video { position: relative; z-index: 1; }

/* Velo: abajo para que se lea el texto, arriba para la barra. */
.obertura__velo {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to top, rgba(16, 19, 20, .72) 0%, rgba(16, 19, 20, 0) 42%),
    linear-gradient(to bottom, rgba(16, 19, 20, .5) 0%, rgba(16, 19, 20, 0) 26%);
}

.obertura__contenido {
  position: relative; z-index: 3;
  width: 100%;
  /* El sumando fijo deja libre la barra de reserva, que va fija abajo. */
  padding-bottom: calc(clamp(30px, 5vh, 62px) + 84px);
  color: var(--paper);
}
.obertura__eyebrow {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(246, 244, 238, .72);
}
.obertura__linea {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.4rem, 7vw, 5.4rem);
  line-height: .96; letter-spacing: -.035em;
  margin-top: clamp(10px, 1.4vw, 18px);
}
.obertura__linea .dot { color: var(--brand); }

.obertura__baja {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: clamp(22px, 3vh, 40px);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(246, 244, 238, .82);
  transition: color .35s;
}
.obertura__baja:hover { color: var(--paper); }
.obertura__flecha {
  width: 1px; height: 34px; background: rgba(246, 244, 238, .5);
  position: relative; overflow: hidden;
}
.obertura__flecha::after {
  content: ""; position: absolute; inset: 0;
  background: var(--brand);
  animation: obertura-baja 2.4s var(--ease) infinite;
}
@keyframes obertura-baja {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* Barra de navegación mientras está sobre el vídeo. */
.brand { position: relative; }
.brand__claro {
  position: absolute; inset: 0 auto 0 0;
  opacity: 0; transition: opacity .4s var(--ease);
}
.nav.is-inverso .brand__oscuro { opacity: 0; }
.nav.is-inverso .brand__claro { opacity: 1; }
.brand__oscuro { transition: opacity .4s var(--ease); }
.nav.is-inverso { color: var(--paper); }
.nav.is-inverso .nav__links a { color: var(--paper); }
.nav.is-inverso .lang button { color: rgba(246, 244, 238, .7); }
.nav.is-inverso .lang button.is-active { color: var(--paper); }
.nav.is-inverso .lang span { color: rgba(246, 244, 238, .45); }
.nav.is-inverso .burger span { background: var(--paper); }
/* El botón vive dentro de .nav__links, así que hay que ganarle en
   especificidad a la regla que aclara todos los enlaces de ahí dentro. */
.nav.is-inverso .nav__links a.nav__cta {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  .obertura__flecha::after { animation: none; transform: translateY(0); }
}

@media (max-width: 860px) {
  .obertura { height: 92svh; min-height: 460px; }
  .obertura__linea { font-size: clamp(2.2rem, 12vw, 3.4rem); }
  .obertura__contenido { padding-bottom: calc(clamp(24px, 4vh, 40px) + 76px); }
}

/* ============================================================
   PORTADA DE LAS PÁGINAS INTERIORES
   Más corta que la de la home: aquí el visitante ya sabe qué busca.
   ============================================================ */
.portada { padding: clamp(120px, 17vh, 180px) 0 clamp(56px, 7vw, 88px); }
.portada__volver {
  color: var(--stone); font-size: 12px; letter-spacing: .04em;
  margin-bottom: clamp(24px, 3vw, 38px);
}
.portada__titulo {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: .92; letter-spacing: -.035em;
  text-wrap: balance;
}
.portada__titulo i { font-style: italic; font-weight: 400; }
.portada__entradilla {
  max-width: 46ch; margin-top: clamp(20px, 2.6vw, 32px);
  color: var(--stone);
  font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6;
}
.portada__acciones {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(28px, 3.4vw, 42px);
}

/* ============================================================
   ARCO FINAL DE LAS FICHAS
   ============================================================ */
.arcofin { padding-top: clamp(56px, 7vw, 96px); }
.arcofin__rotulo { text-align: center; margin-bottom: clamp(24px, 3vw, 40px); }
.arcofin__marco { margin-top: 0; }

/* ============================================================
   VENTA CRUZADA
   ============================================================ */
.cruzada__caja {
  display: grid; gap: clamp(24px, 3.4vw, 52px);
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  align-items: center;
}
.cruzada__texto h2 { margin: .3em 0 .5em; }
.cruzada__texto .rating { margin-top: 1.4em; }
.cruzada__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.8em; }
@media (max-width: 860px) {
  .cruzada__caja { grid-template-columns: 1fr; }
}

/* ============================================================
   EXPERIENCIAS · LLAMADA
   ============================================================ */
.expcta__caja {
  display: grid; gap: clamp(26px, 3.6vw, 56px);
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  align-items: center;
}
.expcta__texto h2 { margin: .35em 0 .6em; max-width: 20ch; }
.expcta__texto .btn { margin-top: 1.8em; }
.expcta__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 18px); }
@media (max-width: 860px) {
  .expcta__caja { grid-template-columns: 1fr; }
}

/* ============================================================
   PANTALLA DE PRECARGA
   ============================================================ */
body.cargando { overflow: hidden; }

.carga {
  position: fixed; inset: 0; z-index: 900;
  background: #EAE6DC;
  display: grid; place-content: center; justify-items: center; gap: 22px;
  /* Salvavidas: aunque el JS falle, a los 3,4 s se aparta sola. */
  animation: cargaFuera .55s cubic-bezier(.2, .7, .2, 1) 3.4s forwards;
}
.carga.is-off { animation: cargaFuera .55s cubic-bezier(.2, .7, .2, 1) forwards; }

@keyframes cargaFuera {
  to { opacity: 0; visibility: hidden; }
}

.carga__marca {
  width: clamp(64px, 9vw, 96px); height: auto;
  animation: cargaEntra .7s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes cargaEntra {
  from { opacity: 0; transform: scale(.82) translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Las olas suben como si se llenara el vaso. */
.carga__olas {
  animation: cargaSube 1.15s cubic-bezier(.35, .8, .3, 1) .18s both;
}
@keyframes cargaSube {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.carga__pie {
  font-size: 10.5px; letter-spacing: .34em; text-transform: uppercase;
  color: #7C776B; font-weight: 600;
  animation: cargaPie .6s cubic-bezier(.2, .7, .2, 1) .5s both;
}
@keyframes cargaPie {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .carga { animation-delay: .2s; }
  .carga__marca, .carga__olas, .carga__pie { animation: none; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--slate);
  font-family: var(--sans);
  font-size: clamp(15px, 1.02vw, 17px);
  line-height: 1.62;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, ul, dl, dd { margin: 0; }
ul { list-style: none; padding: 0; }
p { text-wrap: pretty; }
::selection { background: var(--slate); color: var(--bone); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--sec); position: relative; }
section[id], article[id] { scroll-margin-top: clamp(72px, 10vh, 108px); }
.bleed { width: 100%; }
.ink-block { background: var(--ink); color: var(--paper); }
.ink-block ::selection { background: var(--bone); color: var(--ink); }
.bone-2 { background: var(--bone-2); }

/* ---------- Tipografía ---------- */
.display {
  font-family: var(--serif);
  font-weight: 500;
  line-height: .8;
  letter-spacing: -0.035em;
  color: var(--slate);
  font-size: clamp(3.6rem, 13.5vw, 12rem);
  text-wrap: balance;
}
.display i { font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.display .dot { color: var(--slate); }
.ink-block .display, .ink-block .display .dot { color: var(--paper); }

.eyebrow {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--stone);
  line-height: 1.4;
}
.ink-block .eyebrow { color: rgba(246, 244, 238, .5); }

.lead {
  font-size: clamp(1.06rem, 1.5vw, 1.32rem);
  line-height: 1.55;
  letter-spacing: -0.012em;
}
.muted { color: var(--stone); }
.ink-block .muted { color: rgba(246, 244, 238, .58); }

.h-serif {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: .95;
  font-size: clamp(2rem, 4.4vw, 3.6rem);
}
.h-sans {
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.08;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: 1.05em 2.1em;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  letter-spacing: .04em;
  background: var(--ink); color: var(--paper);
  transition: transform .5s var(--ease), background-color .4s var(--ease), color .4s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); background: var(--slate); }
.btn--ghost {
  background: transparent; color: var(--slate);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); box-shadow: none; }
.ink-block .btn { background: var(--paper); color: var(--ink); }
.ink-block .btn:hover { background: #fff; }
.btn__arrow { transition: transform .5s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.link-u {
  display: inline-block;
  font-size: 13px; font-weight: 600; letter-spacing: .03em;
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .5s var(--ease);
}
.link-u:hover { background-size: 0% 1px; background-position: 100% 100%; }

/* ---------- Placeholders de foto ---------- */
.ph {
  position: relative;
  background: var(--bone-3);
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 13px, rgba(27, 36, 38, .045) 13px 14px);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  overflow: hidden;
  display: grid; place-items: center;
  padding: 28px;
}
.ink-block .ph {
  background: #191d1e;
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 13px, rgba(246, 244, 238, .05) 13px 14px);
  box-shadow: inset 0 0 0 1px var(--line-inv);
}
.ph__mark { text-align: center; max-width: 30ch; }
.ph__num {
  display: block;
  font-family: var(--serif); font-size: 34px; font-weight: 500;
  color: rgba(27, 36, 38, .34); line-height: 1; margin-bottom: 12px;
}
.ink-block .ph__num { color: rgba(246, 244, 238, .32); }
.ph__label {
  display: block;
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  line-height: 1.65; color: rgba(27, 36, 38, .52); font-weight: 500;
}
.ink-block .ph__label { color: rgba(246, 244, 238, .48); }
.ph--arch { border-radius: 50% 50% 0 0 / 22% 22% 0 0; }

/* ---------- Fotografía real ---------- */
.shot {
  position: relative; overflow: hidden; margin: 0;
  background: var(--bone-3);
}
.ink-block .shot { background: #191d1e; }
.shot img, .shot video {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.shot--arch { border-radius: 50% 50% 0 0 / 22% 22% 0 0; }
.shot--zoom:hover img { transform: scale(1.035); }
.shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 20px 14px;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; opacity: 0;
  background: linear-gradient(transparent, rgba(16, 19, 20, .72));
  transition: opacity .5s var(--ease);
}
.shot:hover figcaption { opacity: 1; }

/* Banda de vídeo a sangre */
.filmstrip { position: relative; overflow: hidden; background: var(--ink); }
.filmstrip video {
  width: 100%; height: clamp(280px, 62vh, 640px);
  object-fit: cover; display: block;
}
.filmstrip__over {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(24px, 5vw, 56px);
  background: linear-gradient(transparent, rgba(16, 19, 20, .6));
  color: var(--paper);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.filmstrip__over p { font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 2.4rem); letter-spacing: -.03em; line-height: 1; }

/* Retrato de los anfitriones */
.hosts { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 52px); align-items: center; }
@media (max-width: 860px) { .hosts { grid-template-columns: 1fr; } }
.r-4-5  { aspect-ratio: 4 / 5; }
.r-1-1  { aspect-ratio: 1 / 1; }
.r-3-4  { aspect-ratio: 3 / 4; }
.r-16-9 { aspect-ratio: 16 / 9; }
.r-21-9 { aspect-ratio: 21 / 9; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 22px var(--gut);
  transition: background-color .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.nav.is-stuck {
  background: rgba(234, 230, 220, .88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding-block: 13px;
  box-shadow: 0 1px 0 var(--line-soft);
}
.brand { display: block; flex: none; }
.brand img {
  height: clamp(30px, 3.4vw, 40px); width: auto;
  transition: height .5s var(--ease);
}
.nav.is-stuck .brand img { height: clamp(26px, 2.8vw, 33px); }
.foot__logo img { height: clamp(38px, 4.6vw, 56px); width: auto; margin-bottom: 22px; }

.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.nav__links a { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; opacity: .78; transition: opacity .35s; }
.nav__links a:hover { opacity: 1; }
.nav__cta { padding: .78em 1.5em; font-size: 12px; }

/* ---------- Conmutador de idioma ---------- */
.lang {
  position: relative;
  display: flex; align-items: center; gap: 5px; flex: none;
  margin-left: clamp(10px, 1.6vw, 22px);
  font-size: 11.5px; letter-spacing: .1em; font-weight: 600;
}
.lang span { color: var(--line); }
.lang button {
  padding: 4px 2px; color: var(--stone);
  transition: color .3s var(--ease);
}
.lang button:hover { color: var(--slate); }
.lang button.is-active { color: var(--slate); text-decoration: underline; text-underline-offset: 4px; }
.lang button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.burger { display: none; width: 34px; height: 34px; position: relative; }
.burger span {
  position: absolute; left: 6px; right: 6px; height: 1.5px; background: var(--slate);
  transition: transform .45s var(--ease), opacity .3s;
}
.burger span:nth-child(1) { top: 13px; }
.burger span:nth-child(2) { top: 20px; }
.nav.is-open .burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav.is-open .burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding-top: clamp(100px, 13vh, 148px);
  padding-bottom: clamp(40px, 6vw, 80px);
  text-align: center;
}

.hero__titular { display: block; }
.hero__kicker {
  display: block;
  max-width: 22ch; margin-inline: auto;
  font-weight: 700;
  font-size: clamp(1.3rem, 3.2vw, 2.4rem);
  letter-spacing: -0.038em; line-height: 1.14;
  text-wrap: balance;
}
.hero__word {
  display: block;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(3.8rem, 12vw, 10rem);
  line-height: .88; letter-spacing: -0.035em;
  margin-top: clamp(4px, .9vw, 14px);
}

.hero__pie { margin-top: clamp(30px, 4vw, 52px); }
.hero__sub {
  max-width: 40ch; margin-inline: auto;
  color: var(--stone); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.6;
}
.hero__meta {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 22px; margin-top: 22px;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--stone);
}
.hero__actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px; margin-top: 28px;
}

@media (max-width: 900px) {
  .hero { padding-top: clamp(88px, 12vh, 112px); }
  .hero__pie { margin-top: clamp(24px, 5vw, 38px); }
  .hero__meta { margin-top: 16px; gap: 5px 16px; line-height: 1.5; }
  .hero__actions {
    margin-top: 22px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  }
  .hero__actions .btn { justify-content: center; padding: .95em 1em; font-size: 12.5px; }
}

/* Contenedor de clipPath: no pinta nada, solo guarda la forma. */
.formas { position: absolute; width: 0; height: 0; overflow: hidden; }

/* El ancho y la proporción los escribe el JS al hacer scroll. Sale de la
   caja del .wrap con margin-left:50% + translateX(-50%) para poder llegar
   a ocupar el ancho completo de la ventana. */
.hero__arch {
  --arco-w: min(392px, 62vw);
  --arco-ar: 134.3 / 230.08;
  width: var(--arco-w); max-width: none;
  aspect-ratio: var(--arco-ar);
  margin: clamp(56px, 8vw, 96px) 0 0 50%;
  transform: translateX(-50%);
  position: relative; z-index: 2;
  will-change: width;
  cursor: pointer;
  touch-action: pan-y;   /* deja pasar el scroll vertical, captura el lateral */
}
.hero__arch:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }
/* El recorte va en el contenedor, no en las fotos: si estuviera en la foto,
   el zoom del Ken Burns escalaría también la forma del parladoiro. */
.hero__arch {
  clip-path: url(#forma-parladoiro);
  overflow: hidden;
  background: var(--bone-3);
}
.hero__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
  will-change: opacity, transform;
}
.hero__foto.is-on {
  opacity: 1;
  animation: kenburns 11s ease-out both;
}
@keyframes kenburns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1.2%, -1.6%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__foto.is-on { animation: none; }
  .hero__foto { transition: none; }
}
.hero__cap { position: absolute; left: 0; right: 0; top: calc(100% + 16px); }

.hero__cap {
  text-align: center; margin-top: 16px;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--stone);
}

/* ============================================================
   SECCIÓN EDITORIAL (palabra gigante + columnas)
   ============================================================ */
.editorial { display: grid; gap: clamp(26px, 4vw, 56px); }
.editorial__word { margin-left: -0.055em; }
.editorial__word.is-right { text-align: right; margin-right: -0.045em; margin-left: 0; }
.editorial__cols {
  display: grid; gap: clamp(24px, 3.4vw, 54px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1040px;
}
.editorial__cols p + p { margin-top: 1.1em; }
.signature {
  font-family: var(--serif); font-style: italic; font-size: 1.35rem;
  letter-spacing: -0.02em; margin-top: 1.5em; display: block;
}

/* ---------- Pills de casa ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.pill {
  padding: .9em 1.7em; border-radius: 999px;
  font-size: 12px; letter-spacing: .09em; text-transform: uppercase; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.pill:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); box-shadow: none; }

/* ============================================================
   LAS DOS CASAS
   ============================================================ */
.house {
  display: grid; align-items: center;
  gap: clamp(30px, 4.5vw, 76px);
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  padding-block: clamp(52px, 7vw, 96px);
}
.house + .house { border-top: 1px solid var(--line-soft); }
.house--flip .house__media { order: 2; }

/* ---------- Las dos casas, uno al lado de la otra (portada) ----------
   Modificador aparte: las páginas de cada casa reutilizan .house con la
   foto al lado del texto, y eso no debe cambiar. */
.casas__par {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(28px, 4vw, 52px);
}
.house--col {
  display: flex; flex-direction: column;
  grid-template-columns: none;
  gap: clamp(18px, 2.2vw, 28px);
  padding-block: 0;
}
.casas__par .house + .house { border-top: 0; }
.house--col .house__media { order: 0; }
.house--col .house__text { display: flex; flex-direction: column; flex: 1; }
.house--col .house__body { max-width: none; }
/* Empuja precio y botón al fondo: así las dos columnas cierran a la misma
   altura aunque los textos no midan lo mismo. */
.house--col .house__foot { margin-top: auto; }
.house__index {
  font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1; color: var(--bone-3); margin-bottom: .2em;
}
.house__title { margin-block: .16em .06em; }
.house__name {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--stone); font-weight: 600;
}
.house__body { margin-top: 1.1em; max-width: 52ch; }
.house__list { margin-top: 2.1em; display: grid; gap: 0; }
.house__list li {
  display: grid; grid-template-columns: 20px 1fr; gap: 14px;
  padding-block: .82em;
  border-top: 1px solid var(--line-soft);
  font-size: .95rem; line-height: 1.5;
}
.house__list li:last-child { border-bottom: 1px solid var(--line-soft); }
/* Viñeta: un punto pequeño en el turquesa de marca. */
.house__list .n {
  width: 7px; height: 7px; border-radius: 50%;
  margin-top: .78em;
  background-color: var(--brand);
  flex: none;
  transition: background-color .35s var(--ease);
}
.house__list li:hover .n { background-color: var(--brand-deep); }
.house__foot {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px;
  margin-top: 2em;
}
.price { font-family: var(--serif); font-size: clamp(1.75rem, 3vw, 2.4rem); line-height: 1; letter-spacing: -0.025em; }
.price small { font-family: var(--sans); font-size: 12px; letter-spacing: .04em; color: var(--stone); margin-left: 6px; }
.rating { font-size: 12px; letter-spacing: .05em; color: var(--stone); }
.rating b { color: var(--slate); font-weight: 600; }
.rating a {
  color: var(--slate); font-weight: 600;
  box-shadow: inset 0 -1px 0 var(--line);
  transition: box-shadow .35s var(--ease);
}
.rating a:hover { box-shadow: inset 0 -1px 0 var(--slate); }
.star { color: var(--brand-deep); }
.ink-block .star { color: var(--brand); }
.house .btn { margin-top: 1.9em; }

/* ============================================================
   SERVICIOS (grid con filetes)
   ============================================================ */
.amen__head { text-align: center; max-width: 44ch; margin-inline: auto; }
.amen__grid {
  margin-top: clamp(44px, 6vw, 76px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.amen__cell {
  display: grid; justify-items: center; gap: 14px;
  padding: clamp(30px, 4vw, 52px) 14px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.amen__cell:nth-child(4n) { border-right: 0; }
.amen__cell svg { width: 26px; height: 26px; stroke: var(--slate); fill: none; stroke-width: 1.25; opacity: .82; }
.amen__cell span { font-size: 12.5px; letter-spacing: .02em; line-height: 1.4; }
.amen__cta { display: flex; justify-content: center; margin-top: clamp(44px, 6vw, 72px); }

/* ============================================================
   GALERÍA
   ============================================================ */
.gal__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px;
}
.tabs { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 30px); padding-bottom: 6px; }
.tab {
  font-family: var(--serif); font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  letter-spacing: -0.02em; padding-bottom: 8px; position: relative;
  color: var(--stone); transition: color .4s var(--ease);
}
.tab::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.tab.is-active { color: var(--slate); font-style: italic; }
.tab.is-active::after { transform: scaleX(1); }

.gal__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.5vw, 20px);
  padding-block: clamp(48px, 6vw, 84px);
}
.gal__mas-wrap { display: flex; justify-content: center; padding-bottom: clamp(48px, 6vw, 84px); }
.gal__mas[hidden] { display: none; }
.gal__mas span { letter-spacing: .04em; }

.gal__grid .ph { transition: opacity .55s var(--ease), transform .55s var(--ease); }
.gal__item[hidden] { display: none; }
.gal__btn { display: block; width: 100%; height: 100%; padding: 0; cursor: zoom-in; }
.gal__btn img { width: 100%; height: 100%; object-fit: cover; }
.gal__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
body.lb-abierto { overflow: hidden; }

.lb {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(10, 12, 13, .95);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center;
  padding: clamp(48px, 7vw, 88px) clamp(16px, 6vw, 96px);
  animation: lbEntra .3s var(--ease);
}
.lb[hidden] { display: none; }
@keyframes lbEntra { from { opacity: 0 } to { opacity: 1 } }

.lb__marco { margin: 0; display: grid; gap: 14px; justify-items: center; max-width: 100%; }
.lb__marco img {
  max-width: 100%; max-height: calc(100vh - clamp(150px, 20vw, 220px));
  width: auto; height: auto; object-fit: contain;
  animation: lbFoto .4s var(--ease);
}
@keyframes lbFoto { from { opacity: 0; transform: scale(.985) } to { opacity: 1; transform: none } }

.lb__marco figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: 8px 18px; max-width: 62ch; text-align: center;
  font-size: 11.5px; letter-spacing: .06em; color: rgba(246, 244, 238, .62); line-height: 1.5;
}
.lb__num {
  font-size: 10.5px; letter-spacing: .18em; color: rgba(246, 244, 238, .4);
  white-space: nowrap;
}

.lb__cerrar, .lb__nav {
  position: absolute; z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(246, 244, 238, .08);
  transition: background-color .35s var(--ease), transform .35s var(--ease);
}
.lb__cerrar:hover, .lb__nav:hover { background: rgba(246, 244, 238, .2); }
.lb__cerrar:focus-visible, .lb__nav:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.lb__cerrar { top: clamp(12px, 2.4vw, 26px); right: clamp(12px, 2.4vw, 26px); }
.lb__cerrar::before, .lb__cerrar::after {
  content: ""; position: absolute; inset: 50% 32% auto 32%;
  height: 1.5px; background: var(--paper);
}
.lb__cerrar::before { transform: rotate(45deg); }
.lb__cerrar::after  { transform: rotate(-45deg); }

.lb__nav { top: 50%; margin-top: -26px; }
.lb__nav--prev { left: clamp(8px, 2vw, 26px); }
.lb__nav--next { right: clamp(8px, 2vw, 26px); }
.lb__nav::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 11px; height: 11px;
  border-left: 1.5px solid var(--paper); border-bottom: 1.5px solid var(--paper);
}
.lb__nav--prev::before { transform: translate(-35%, -50%) rotate(45deg); }
.lb__nav--next::before { transform: translate(-65%, -50%) rotate(-135deg); }

@media (max-width: 700px) {
  .lb { padding: 64px 12px 90px; }
  .lb__nav { top: auto; bottom: 16px; margin-top: 0; }
  .lb__nav--prev { left: calc(50% - 62px); }
  .lb__nav--next { right: calc(50% - 62px); }
}
@media (prefers-reduced-motion: reduce) {
  .lb, .lb__marco img { animation: none; }
}

/* ============================================================
   EXPERIENCIAS
   ============================================================ */
.exp__title { text-align: center; padding-bottom: clamp(10px, 2vw, 24px); }
.exp__intro { max-width: 48ch; margin: 0 auto; text-align: center; }
.exp__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.4vw, 56px);
  margin-top: clamp(52px, 7vw, 92px);
}
.exp__card { display: grid; gap: 22px; align-content: start; }
.exp__card h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 2vw, 1.85rem); letter-spacing: -0.028em; line-height: 1.06; }
.exp__num { font-size: 10.5px; letter-spacing: .2em; color: rgba(246, 244, 238, .45); font-weight: 600; }
.exp__foot { display: flex; justify-content: center; margin-top: clamp(48px, 6vw, 80px); }
.exp__note { text-align: center; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-top: 20px; }

/* ============================================================
   UBICACIÓN
   ============================================================ */
.loc__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(30px, 5vw, 80px); align-items: end;
  margin-top: clamp(30px, 4vw, 56px);
}
.dist { margin-top: 2.4em; border-top: 1px solid var(--line); }
.dist__row {
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: baseline;
  padding-block: 1.05em; border-bottom: 1px solid var(--line);
}
.dist__row dt { font-size: .98rem; }
.dist__row dd {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--stone); text-align: right; white-space: nowrap;
}
.todo {
  color: var(--flag);
  box-shadow: inset 0 -1px 0 rgba(156, 74, 37, .35);
  font-weight: 600; letter-spacing: .06em; font-size: .92em;
}
.camino__acciones {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2em;
}
@media (max-width: 560px) {
  .camino__acciones { display: grid; }
  .camino__acciones .btn { justify-content: center; }
}

.camino {
  margin-top: clamp(48px, 6vw, 78px);
  padding: clamp(30px, 4vw, 52px);
  background: var(--bone-2);
  display: grid; gap: 18px;
  max-width: 74ch;
}

/* ============================================================
   CAMINO · TABLA DE ETAPAS
   Distancias oficiales del tramo gallego. Va en <table> de verdad:
   es un dato tabular, lo escanea el peregrino y lo entiende Google.
   El rótulo "Las casas" va en el HTML, no en un ::after, para que
   el traductor lo alcance.
   ============================================================ */
.etapas { margin-top: clamp(26px, 3.4vw, 44px); overflow-x: auto; }
.etapas + .etapas { margin-top: clamp(42px, 5vw, 70px); }
.etapas table { width: 100%; max-width: 900px; border-collapse: collapse; }
.etapas caption {
  text-align: left; padding-bottom: 15px;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--stone);
}
.etapas th, .etapas td {
  text-align: left; padding-block: 1.05em; border-bottom: 1px solid var(--line);
}
.etapas thead th {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 500; color: var(--stone); border-bottom-color: var(--slate);
}
.etapas tbody th { font-size: .98rem; font-weight: 500; padding-right: 20px; }
.etapas td { font-size: .98rem; }
.etapas th + th, .etapas td { text-align: right; white-space: nowrap; }
.etapas td + td { font-size: 12px; letter-spacing: .08em; color: var(--stone); }
/* La etapa que pasa por la puerta. El resalte tiene que cubrir también la
   primera celda, que es un <th scope="row">, no un <td>. */
.etapas .aqui th, .etapas .aqui td { background: var(--bone-3); color: var(--slate); }
.etapas .aqui th { font-weight: 600; padding-left: 14px; }
.etapas .aqui td { font-weight: 600; }
.etapas .aqui td:last-child { padding-right: 14px; }
.aqui__tag {
  display: inline-block; margin-left: 10px; padding: 3px 8px; vertical-align: 2px;
  background: var(--brand-deep); color: var(--paper);
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
}
/* En móvil las tres columnas caben si el nombre de la etapa puede partirse:
   así no se pierde el dato que más importa, el que queda a Santiago. */
@media (max-width: 620px) {
  .etapas { overflow-x: visible; }
  .etapas table { min-width: 0; }
  .etapas tbody th { font-size: .92rem; white-space: normal; padding-right: 12px; }
  .etapas td { font-size: .88rem; }
  .etapas td + td { font-size: 11px; letter-spacing: .04em; }
  .etapas thead th { font-size: 9.5px; letter-spacing: .08em; }
  .etapas thead th + th { padding-left: 10px; }
  .etapas .aqui th, .etapas .aqui td { padding-inline: 8px; }
  .aqui__tag { display: block; margin: 7px 0 0; width: max-content; }
}
.etapas__nota { margin-top: 16px; font-size: 12.5px; color: var(--stone); max-width: 62ch; }

/* ============================================================
   CAMINO · HITOS DE LA ETAPA
   Los puntos por los que se pasa, con su altitud.
   ============================================================ */
.hitos { margin-top: clamp(30px, 4vw, 50px); border-top: 1px solid var(--line); max-width: 84ch; }
.hitos__item {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 34px);
  padding-block: clamp(22px, 2.6vw, 32px); border-bottom: 1px solid var(--line);
}
.hitos__lugar {
  font-family: var(--serif); font-weight: 500;
  font-size: 1.2rem; letter-spacing: -.022em; line-height: 1.2;
}
.hitos__alt {
  display: block; margin-top: 7px; font-family: var(--sans);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--stone);
}
.hitos__texto { color: var(--stone); }
@media (max-width: 620px) {
  .hitos__item { grid-template-columns: 1fr; gap: 9px; }
  .hitos__alt { display: inline-block; margin-top: 0; margin-left: 12px; }
}

/* ============================================================
   RESEÑAS
   ============================================================ */
.rev__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px); margin-top: clamp(40px, 5vw, 68px);
}
.rev__slot {
  border: 1px dashed rgba(27, 36, 38, .3);
  padding: clamp(26px, 3vw, 40px);
  min-height: 210px; display: grid; align-content: space-between; gap: 20px;
}
.rev__slot .q { font-family: var(--serif); font-size: 2.4rem; line-height: .6; color: var(--brand-mist); }
.rev__tag { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--flag); font-weight: 600; line-height: 1.6; }
.rev__scores {
  display: flex; flex-wrap: wrap; gap: 12px 46px;
  margin-top: clamp(36px, 4vw, 54px); padding-top: 26px; border-top: 1px solid var(--line);
}
.rev__score { font-size: 12.5px; letter-spacing: .03em; color: var(--stone); }
.rev__score b { color: var(--slate); font-weight: 600; }

/* ============================================================
   DUDAS
   ============================================================ */
.faq { margin-top: clamp(34px, 4vw, 56px); border-top: 1px solid var(--line); max-width: 1000px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; text-align: left;
  display: grid; grid-template-columns: 1fr 22px; gap: 20px; align-items: center;
  padding-block: clamp(22px, 2.6vw, 34px);
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.18rem, 2.1vw, 1.7rem); letter-spacing: -0.025em; line-height: 1.18;
  transition: opacity .35s;
}
.faq__q:hover { opacity: .62; }
.faq__sign { position: relative; width: 18px; height: 18px; justify-self: end; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.4px; background: var(--slate);
  transition: transform .5s var(--ease);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item.is-open .faq__sign::after { transform: rotate(0deg); }
.faq__a { overflow: hidden; height: 0; transition: height .55s var(--ease); }
.faq__a > div { padding-bottom: clamp(24px, 3vw, 38px); max-width: 68ch; color: var(--stone); }
.faq__a p + p { margin-top: 1em; }

/* ============================================================
   CTA FINAL
   ============================================================ */
.final { text-align: center; }
.final__title { max-width: 16ch; margin-inline: auto; }
.final__body { max-width: 54ch; margin: clamp(28px, 3.4vw, 44px) auto 0; }
.final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(34px, 4vw, 50px); }
.btn--wa { background: var(--wa); color: #06301A; }
.btn--wa:hover { background: #2ee574; }
.ink-block .btn--wa { background: var(--wa); color: #06301A; }
.ink-block .btn--wa:hover { background: #2ee574; }
.btn--outline-inv { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px var(--line-inv); }
.ink-block .btn--outline-inv { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px var(--line-inv); }
.ink-block .btn--outline-inv:hover { background: var(--paper); color: var(--ink); box-shadow: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { padding-top: clamp(64px, 8vw, 110px); }
.foot__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 56px);
  padding-bottom: clamp(56px, 7vw, 96px);
}
.foot__col h4 { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(246, 244, 238, .42); font-weight: 600; margin-bottom: 18px; }
.foot__col li + li { margin-top: .62em; }
.foot__col a, .foot__col span { font-size: 14px; opacity: .88; }
.foot__col a { transition: opacity .35s; }
.foot__col a:hover { opacity: .55; }
.foot__wa {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--wa); color: #06301A;
  padding: .62em 1.15em; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; margin-top: 14px;
}
.foot__marquee { overflow: hidden; border-top: 1px solid var(--line-inv); padding-block: clamp(18px, 2.4vw, 34px); }
.foot__track { display: flex; width: max-content; animation: slide 42s linear infinite; }
.foot__track span {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(4rem, 15vw, 15rem); line-height: .92;
  letter-spacing: -0.045em; padding-right: .18em; white-space: nowrap;
}
.foot__track span:nth-child(even) { font-style: italic; font-weight: 400; color: rgba(246, 244, 238, .38); }
@keyframes slide { to { transform: translateX(-50%); } }
.foot__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 30px;
  padding-block: 26px clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--line-inv);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(246, 244, 238, .42);
}
.foot__legal a:hover { color: var(--paper); }

/* ============================================================
   BARRA DE RESERVA (fija abajo)
   ============================================================ */
body { padding-bottom: 92px; }

.bookbar {
  position: fixed; z-index: 96; inset: auto 0 0 0;
  background: rgba(16, 19, 20, .95);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: var(--paper);
  box-shadow: 0 -14px 40px rgba(16, 19, 20, .18);
  transition: opacity .3s var(--ease);
}
/* La barra ya no despliega nada: solo abre el popup de cada casa. */
.bookbar__barra {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px clamp(16px, 3vw, 40px);
  padding: 13px var(--gut);
  max-width: 1440px; margin-inline: auto;
}
.bookbar__rotulo {
  font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.6rem);
  letter-spacing: -.03em; color: var(--paper); line-height: 1;
}
.bookbar__botones { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Motor de reserva, dentro de la ficha de cada casa ----------
   Va aquí y no en un popup porque el widget de Lodgify no se pinta si su
   contenedor no está a la vista y en el flujo normal de la página. */
.motor {
  margin-top: 2.2em;
  padding: clamp(18px, 2.2vw, 26px);
  background: var(--bone-2);
}
/* ---------- Retoques dentro del widget de Lodgify ----------
   Su contador de huéspedes se pinta sin ninguna etiqueta: solo − 1 +,
   que no se entiende. Se le añade el rótulo con ::before y se le da el
   mismo fondo claro que a llegada y salida.

   Se apunta por el aria-label de los botones, no por las clases: las
   suyas son hashes de Emotion (css-pa7ehx…) que cambian en cada versión
   del widget. "Add" y "Remove" son estables. */
#lodgify-book-now-box div:has(> button[aria-label="Add"]) {
  background: var(--paper);
  border-radius: 4px;
  padding-left: 14px;
  overflow: hidden;
}
#lodgify-book-now-box div:has(> button[aria-label="Add"])::before {
  content: "Número de huéspedes";
  margin-right: auto;
  align-self: center;
  font-family: var(--sans);
  font-size: 13.5px;
  letter-spacing: -.01em;
  color: var(--slate);
  white-space: nowrap;
}
html[lang="en"] #lodgify-book-now-box div:has(> button[aria-label="Add"])::before {
  content: "Number of guests";
}

/* ============================================================
   POPUP DE RESERVA
   Cerrado NO usa display:none. Un elemento sin caja de layout no
   deja que Lodgify monte el calendario dentro; con visibility el
   nodo conserva medidas y las dos cajas se pintan al cargar.
   ============================================================ */
body.rsv-abierto { overflow: hidden; }

.rsv {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(10, 12, 13, .82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center;
  padding: clamp(12px, 4vw, 48px);
  overflow-y: auto;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.rsv.is-open {
  visibility: visible; opacity: 1; pointer-events: auto;
  transition: opacity .3s var(--ease), visibility 0s;
}

.rsv__caja {
  position: relative;
  width: min(520px, 100%);
  background: var(--bone);
  padding: clamp(22px, 3.4vw, 36px);
  transform: translateY(14px);
  transition: transform .38s var(--ease);
}
.rsv.is-open .rsv__caja { transform: none; }

.rsv__cab { margin-bottom: 20px; padding-right: 48px; }
.rsv__eyebrow {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--stone); font-weight: 600;
}
.rsv__titulo {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.45rem, 3.4vw, 2rem);
  letter-spacing: -.03em; line-height: 1.05; margin-top: 8px;
}

.rsv__cerrar {
  position: absolute; top: clamp(16px, 2.4vw, 24px); right: clamp(16px, 2.4vw, 24px);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(27, 36, 38, .07);
  transition: background-color .3s var(--ease);
}
.rsv__cerrar:hover { background: rgba(27, 36, 38, .16); }
.rsv__cerrar:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.rsv__cerrar::before, .rsv__cerrar::after {
  content: ""; position: absolute; inset: 50% 32% auto 32%;
  height: 1.5px; background: var(--slate);
}
.rsv__cerrar::before { transform: rotate(45deg); }
.rsv__cerrar::after  { transform: rotate(-45deg); }

/* Selector de casa */
.rsv__casas { display: grid; gap: 8px; margin-bottom: 20px; }
.rsv__casa {
  display: grid; gap: 3px; text-align: left;
  padding: .85em 1.1em; border-radius: 6px;
  font-size: 13.5px; font-weight: 600; letter-spacing: -.01em;
  color: var(--stone);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.rsv__casa small {
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  color: var(--stone); opacity: .8;
}
.rsv__casa:hover { color: var(--slate); }
.rsv__casa.is-active {
  background: var(--ink); color: var(--paper); box-shadow: none;
}
.rsv__casa.is-active small { color: rgba(246, 244, 238, .6); }
.rsv__casa:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* La casa inactiva no se quita del flujo: se aparta conservando medidas,
   para que su caja de Lodgify siga montada. */
.rsv__motor { min-height: 190px; }
.rsv__motor.is-off {
  position: absolute; left: -9999px; top: 0;
  width: min(520px, 90vw);
  visibility: hidden; pointer-events: none;
}

.rsv__pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--line);
}
.rsv__pie p { font-size: 12.5px; color: var(--stone); max-width: 26ch; }
.rsv__pie .btn { padding: .7em 1.3em; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .rsv, .rsv__caja { transition: none; }
}
@media print { .rsv { display: none; } }

.motor__diag {
  margin-top: 12px; padding: 10px 12px;
  background: var(--ink); color: #B8F5C0;
  font: 11px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
  word-break: break-word;
}
.motor__rotulo {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--stone); font-weight: 600; margin-bottom: 14px;
}
.motor :target { scroll-margin-top: 120px; }
#motor-parladoiros, #motor-cachada { scroll-margin-top: clamp(90px, 12vh, 130px); }

#lodgify-book-now-box {
  width: 100%;
  --ldg-bnb-background: transparent;
  --ldg-bnb-border-radius: 4px;
  --ldg-bnb-box-shadow: none;
  --ldg-bnb-padding: 0px;
  --ldg-bnb-input-background: #F6F4EE;
  --ldg-bnb-button-border-radius: 999px;
  --ldg-bnb-font-family: inherit;

  --ldg-bnb-color-primary: #101314;
  --ldg-bnb-color-primary-lighter: #1B2426;
  --ldg-bnb-color-primary-darker: #000000;
  --ldg-bnb-color-primary-contrast: #F6F4EE;

  --ldg-component-calendar-cell-selection-bg-color: #101314;
  --ldg-component-calendar-cell-selection-color: #F6F4EE;
  --ldg-component-calendar-cell-selected-bg-color: #D5CFC0;
  --ldg-component-calendar-cell-selected-color: #101314;

  --ldg-semantic-color-primary: #101314;
  --ldg-semantic-color-primary-lighter: #1B2426;
  --ldg-semantic-color-primary-darker: #000000;
  --ldg-semantic-color-primary-contrast: #F6F4EE;

  /* Por encima de la barra inferior (96) y del lightbox (120). */
  --ldg-component-modal-z-index: 400;
}
.bookbar .btn { background: var(--paper); color: var(--ink); }
.bookbar .btn:hover { background: #fff; }
.bookbar .btn--wa { background: var(--wa); color: #06301A; }
.bookbar .btn--wa:hover { background: #2ee574; }

@media (max-width: 720px) {
  .bookbar__rotulo { display: none; }
  .bookbar__barra { padding: 10px var(--gut); }
  /* Reservar ocupa lo que hay; WhatsApp se queda a su lado, solo con el
     icono, para que los dos quepan en una sola línea. */
  .bookbar__botones {
    width: 100%; display: grid;
    grid-template-columns: 1fr auto; gap: 8px;
  }
  .bookbar__cta { justify-content: center; padding: .9em 1em; font-size: 12.5px; }
  .bookbar__botones .btn--wa { padding: .9em 1.15em; }
  .bookbar__botones .btn--wa .bookbar__txt { display: none; }
  .bookbar__botones .btn--wa svg { width: 20px; height: 20px; }
}

@media print { .bookbar { display: none; } body { padding-bottom: 0; } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(20px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .amen__grid { grid-template-columns: repeat(3, 1fr); }
  .amen__cell:nth-child(4n) { border-right: 1px solid var(--line); }
  .amen__cell:nth-child(3n) { border-right: 0; }
  .exp__grid { grid-template-columns: 1fr; gap: 46px; }
  .exp__card { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: center; }
  .exp__card > .ph { grid-row: span 3; }
}

@media (max-width: 860px) {
  /* ============================================================
     MENÚ DE MÓVIL
     El panel fija su propio color —tinta de fondo, hueso de texto— en
     lugar de heredar el de la barra. Antes no lo hacía, y con la barra
     en claro sobre el vídeo el menú quedaba hueso sobre hueso: 1,13 de
     contraste, ilegible. Ahora el estado de la barra le da igual.
     ============================================================ */
  .nav__links {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; align-items: stretch; justify-content: center;
    gap: 0;
    padding: 104px var(--gut) calc(52px + env(safe-area-inset-bottom, 0px));
    background: rgba(16, 19, 20, .93);
    -webkit-backdrop-filter: blur(22px) saturate(118%);
    backdrop-filter: blur(22px) saturate(118%);
    overflow-y: auto; overscroll-behavior: contain;
    box-shadow: none;
    counter-reset: menu;

    /* Cerrado: recogido arriba y sin capturar toques. */
    opacity: 0; visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transform: none;
    transition: clip-path .7s var(--ease), opacity .35s var(--ease),
                visibility 0s linear .7s;
  }
  .nav.is-open .nav__links {
    opacity: 1; visibility: visible;
    clip-path: inset(0 0 0 0);
    transition: clip-path .7s var(--ease), opacity .3s var(--ease), visibility 0s;
  }

  /* La forma del parladoiro, de marca de agua. */
  .nav__links::after {
    content: ""; position: absolute; right: -14%; bottom: -6%;
    width: 74%; aspect-ratio: 134.3 / 230.08;
    background: var(--brand);
    -webkit-mask: url("img/forma-parladoiro.svg") no-repeat center / contain;
    mask: url("img/forma-parladoiro.svg") no-repeat center / contain;
    opacity: 0; pointer-events: none;
    transform: translateY(28px);
    transition: transform 1.2s var(--ease), opacity 1.2s var(--ease);
  }
  .nav.is-open .nav__links::after { opacity: .085; transform: none; }

  .nav__links a {
    position: relative; z-index: 1;
    display: flex; align-items: baseline; gap: 14px;
    font-family: var(--serif); font-weight: 500;
    font-size: clamp(1.8rem, 8.4vw, 2.6rem);
    letter-spacing: -.035em; line-height: 1.06;
    color: var(--paper);
    padding-block: clamp(13px, 2.3vh, 21px);
    border-bottom: 1px solid rgba(246, 244, 238, .15);
    /* Entran escalonados detrás de la cortina. */
    opacity: 0; transform: translateY(16px);
    transition: transform .6s var(--ease), opacity .6s var(--ease), color .3s;
  }
  .nav.is-open .nav__links a { opacity: 1; transform: none; }
  .nav.is-open .nav__links a:nth-child(1) { transition-delay: .16s; }
  .nav.is-open .nav__links a:nth-child(2) { transition-delay: .22s; }
  .nav.is-open .nav__links a:nth-child(3) { transition-delay: .28s; }
  .nav.is-open .nav__links a:nth-child(4) { transition-delay: .34s; }
  .nav.is-open .nav__links a:nth-child(5) { transition-delay: .40s; }
  .nav.is-open .nav__links a:nth-child(6) { transition-delay: .46s; }

  /* Numeración editorial. Es un contador de CSS: no hay texto que traducir. */
  .nav__links a:not(.nav__cta)::before {
    counter-increment: menu;
    content: counter(menu, decimal-leading-zero);
    flex: none; width: 2.4em;
    font-family: var(--sans); font-size: 11px; font-weight: 500;
    letter-spacing: .14em; color: var(--brand);
    transform: translateY(-.35em);
  }
  .nav__links a:not(.nav__cta):active { color: var(--brand); }

  .nav__links a.nav__cta {
    font-family: var(--sans) !important; font-size: 13px !important;
    align-self: flex-start; margin-top: clamp(20px, 3.6vh, 34px);
    padding: 1em 1.9em;
    background: var(--paper); color: var(--ink) !important;
    border: 0; border-bottom: 0;
  }
  .nav__links a.nav__cta::before { content: none; }

  /* La barra, mientras el panel está abierto: siempre en claro y sin su
     fondo hueso, que si no se pinta por encima de la tinta. */
  .nav.is-open .brand { z-index: 2; }
  .nav.is-open .brand__oscuro { opacity: 0; }
  .nav.is-open .brand__claro { opacity: 1; }
  .nav.is-open .burger span { background: var(--paper); }
  .nav.is-open .lang { z-index: 2; }
  .nav.is-open .lang button { color: rgba(246, 244, 238, .74); }
  .nav.is-open .lang button.is-active { color: var(--paper); }
  .nav.is-open .lang span { color: rgba(246, 244, 238, .4); }
  .nav.is-open.is-stuck {
    background: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }

  /* La barra de reserva estorba por encima del menú: su z-index (96) es
     mayor que el de la barra de navegación (90). */
  #nav.is-open ~ #bookbar { opacity: 0; pointer-events: none; }

  body.menu-abierto { overflow: hidden; }

  /* Quien pide menos animación entra sin cortina ni escalonado. */
  @media (prefers-reduced-motion: reduce) {
    .nav__links,
    .nav__links a,
    .nav__links::after {
      transition-duration: .01ms !important;
      transition-delay: 0s !important;
      transform: none !important;
    }
  }

  .burger { display: block; position: relative; z-index: 2; }

  .editorial__cols { grid-template-columns: 1fr; }
  .casas__par { grid-template-columns: 1fr; gap: clamp(44px, 8vw, 64px); }
  .house { grid-template-columns: 1fr; }
  .house--flip .house__media { order: 0; }
  .gal__grid { grid-template-columns: repeat(2, 1fr); }
  .loc__grid { grid-template-columns: 1fr; }
  .rev__grid { grid-template-columns: 1fr; }
  .rev__slot { min-height: 0; }
  .foot__grid { grid-template-columns: repeat(2, 1fr); }
  .exp__card { grid-template-columns: 1fr; }
  .exp__card > .ph { grid-row: auto; }
}

@media (max-width: 560px) {
  .amen__grid { grid-template-columns: repeat(2, 1fr); }
  .amen__cell:nth-child(3n) { border-right: 1px solid var(--line); }
  .amen__cell:nth-child(2n) { border-right: 0; }
  .gal__grid { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; gap: 34px; }
  .wa-float__hint { display: none; }
  .hero__arch { max-width: 88vw; }
}

/* ============================================================
   AJUSTES DE MÓVIL
   Zonas pulsables de al menos 44 px y rótulos por encima de lo
   legible. Medido con herramientas/auditar-movil.js.
   ============================================================ */
@media (max-width: 860px) {
  /* El conmutador de idioma y la hamburguesa se tocan con el dedo. */
  .lang button {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12.5px;
  }
  .lang { margin-left: 4px; gap: 0; }
  .burger { width: 44px; height: 44px; }
  .burger span { left: 11px; right: 11px; }
  .burger span:nth-child(1) { top: 18px; }
  .burger span:nth-child(2) { top: 25px; }

  .brand { padding-block: 7px; }

  /* Volver: más alto para acertar sin apuntar. */
  .portada__volver { padding-block: 10px; font-size: 13px; }

  /* Enlaces dentro de texto: algo de aire vertical sin romper la línea. */
  .rating a { padding-block: 6px; }

  /* Listas de enlaces del pie: 18 px de alto era imposible de acertar. */
  .foot__col li { margin-top: 0; }
  .foot__col li + li { margin-top: 0; }
  .foot__col a, .foot__col span {
    display: inline-block; padding-block: 9px; font-size: 14.5px;
  }

  /* Los rótulos en versalitas se quedaban en 10,5 px. */
  .eyebrow, .shot figcaption, .hero__cap,
  .exp__num, .ph__label, .lb__num { font-size: 11.5px; }
  .foot__col h4 { font-size: 11.5px; }
  .filmstrip__over .eyebrow { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .foot__track { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Print ---------- */
@media print {
  .nav, .wa-float, .foot__marquee { display: none; }
  body { background: #fff; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   RECORRIDO POR LA CASA
   Material vertical de móvil: se muestra vertical y se pasa con el dedo.
   Los clips se cargan según se avanza, no todos de golpe.
   ============================================================ */
.tour__caja {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(10px, 2.4vw, 30px);
  margin-top: clamp(28px, 4vw, 48px);
}
.tour__marco {
  position: relative; overflow: hidden;
  width: min(340px, 76vw); aspect-ratio: 9 / 16;
  margin-inline: auto;
  background: #000;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
.tour__pista { position: absolute; inset: 0; }
.tour__plano {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .5s var(--ease);
}
.tour__plano.is-on { opacity: 1; }
.tour__plano video, .tour__plano img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.tour__plano img { position: absolute; inset: 0; }
.tour__plano video { position: relative; z-index: 1; opacity: 0; transition: opacity .5s; }
.tour__plano video.is-listo { opacity: 1; }

.tour__flecha {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-inv);
  position: relative; flex: none;
  transition: background-color .3s var(--ease), border-color .3s;
}
.tour__flecha:hover { background: rgba(246, 244, 238, .12); border-color: rgba(246, 244, 238, .5); }
.tour__flecha::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px;
  border-top: 1.5px solid var(--paper); border-right: 1.5px solid var(--paper);
}
.tour__flecha--next::before { transform: translate(-65%, -50%) rotate(45deg); }
.tour__flecha--prev::before { transform: translate(-35%, -50%) rotate(-135deg); }

.tour__pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 26px; margin-top: clamp(20px, 3vw, 32px);
}
.tour__rotulo {
  font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  letter-spacing: -.025em; color: var(--paper); min-height: 1.2em;
}
.tour__puntos { display: flex; gap: 8px; }
.tour__puntos button {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(246, 244, 238, .3);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.tour__puntos button.is-on { background: var(--brand); transform: scale(1.5); }

@media (max-width: 700px) {
  .tour__flecha { display: none; }
  .tour__caja { grid-template-columns: 1fr; }
  .tour__marco { width: min(320px, 82vw); }
}

/* ---------- Cabecera de casa con vídeo de fondo ----------
   Es la obertura de inicio, pero con el contenido de la portada encima:
   texto en claro, y el velo un poco más denso para que se lea el párrafo,
   que aquí es más largo que el "Estás en tu casa" de inicio. */
.obertura--casa { height: 86svh; min-height: 560px; }
.obertura--casa .obertura__velo {
  background:
    linear-gradient(to top, rgba(16, 19, 20, .82) 0%, rgba(16, 19, 20, .12) 58%),
    linear-gradient(to bottom, rgba(16, 19, 20, .55) 0%, rgba(16, 19, 20, 0) 28%);
}
.obertura--casa .obertura__media::before { background-image: none; }
.obertura--casa .portada__volver {
  display: inline-block; color: rgba(246, 244, 238, .72);
}
.obertura--casa .portada__volver:hover { color: var(--paper); }
.obertura--casa .portada__titulo { color: var(--paper); }
.obertura--casa .portada__entradilla { color: rgba(246, 244, 238, .82); }
.obertura--casa .portada__acciones { margin-top: clamp(22px, 3vw, 34px); }

@media (max-width: 860px) {
  .obertura--casa { height: auto; min-height: 92svh; padding-top: 108px; }
  .obertura--casa .obertura__contenido { padding-bottom: calc(clamp(24px, 4vh, 40px) + 76px); }
}


/* ============================================================
   GALERÍA EN LA FORMA DEL LOGO
   Marco propio, sin nada del arco. La máscara va con un SVG aparte para
   que escale sola con el marco, y las propiedades van sueltas: el atajo
   `mask` con `/` para el tamaño no lo aplican todos los navegadores.
   ============================================================ */
.logofin__caja { margin-top: clamp(26px, 3.4vw, 44px); }
.logofin__marco {
  position: relative; overflow: hidden;
  width: min(430px, 76vw); aspect-ratio: 51.63 / 62.24;
  margin: 0 auto;
  background: var(--bone-3);
  -webkit-mask-image: url("img/forma-logo.svg");
          mask-image: url("img/forma-logo.svg");
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: 100% 100%;    mask-size: 100% 100%;
}
.logofin__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 1.3s var(--ease);
}
.logofin__foto.is-on { opacity: 1; }

.logofin__pie {
  text-align: center; margin-top: 18px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--stone);
}

/* Entrada: la forma sube y la foto se acerca. Cuelga del rótulo, que es
   quien recibe .is-in del revelado; sobre el marco no llegaba. */
.logofin__caja { clip-path: inset(100% 0 0 0); }
.logofin__rotulo.is-in ~ .logofin__caja {
  animation: logofin-sube 1.2s var(--ease) forwards;
}
@keyframes logofin-sube {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.logofin__rotulo.is-in ~ .logofin__caja .logofin__foto.is-on {
  animation: logofin-acerca 7s var(--ease) forwards;
}
@keyframes logofin-acerca { from { transform: scale(1.1); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .logofin__caja { clip-path: inset(0 0 0 0); }
  .logofin__rotulo.is-in ~ .logofin__caja,
  .logofin__rotulo.is-in ~ .logofin__caja .logofin__foto.is-on { animation: none; }
}

/* En la portada de inicio el marco es el protagonista: más grande, y con
   la entrada colgada del titular, que es el que recibe .is-in ahí. */
.hero__marco { width: min(360px, 68vw); margin-top: clamp(22px, 3vw, 40px); }
.hero__titular.is-in ~ * .hero__marco,
.hero .hero__marco { clip-path: inset(0 0 0 0); }
@media (max-width: 560px) { .hero__marco { width: min(290px, 74vw); } }

/* ---------- El nombre de la casa, grande y sobre su foto ----------
   No es un pie ni depende del hover: es el titular de la tarjeta, con la
   misma Bodoni de las cabeceras, y se ve igual en móvil y en ordenador. */
.house--col .house__media .shot { position: relative; }
.shot figcaption.house__sobre {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: block;
  padding: clamp(70px, 12vw, 130px) clamp(18px, 2.6vw, 30px) clamp(18px, 2.4vw, 28px);
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  line-height: .98; letter-spacing: -.035em;
  color: var(--paper); text-align: left; text-wrap: balance;
  /* La regla base de .shot figcaption fuerza versalita: aquí el nombre va
     tal como está escrito, con la inicial en mayúscula y el resto no. */
  text-transform: none; letter-spacing: -.035em;
  /* .shot figcaption nace con opacidad 0 y sólo aparece al pasar el ratón:
     es el pie de foto normal de la web. Este no, este está siempre. */
  opacity: 1;
  transform: none;
  transition: none;
  background: linear-gradient(to top,
    rgba(16,19,20,.78) 0%, rgba(16,19,20,.42) 45%, rgba(16,19,20,0) 100%);
  pointer-events: none;
}
@media (max-width: 860px) {
  .shot figcaption.house__sobre { font-size: clamp(1.9rem, 8.5vw, 2.8rem); }
}

/* ============================================================
   GASTRO CÓRNER
   Escaparate: cada tarjeta enlaza a la ficha real en Square, que es
   donde se cobra. Aquí no hay carrito ni pasarela.
   ============================================================ */
.tienda__grupo {
  display: flex; align-items: baseline; gap: 14px;
  margin-top: clamp(46px, 6vw, 78px); padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -.03em;
}
.tienda__grupo span {
  font-family: var(--sans); font-size: 11px; letter-spacing: .14em;
  color: var(--stone); font-weight: 500;
}
.tienda__rejilla {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 36px);
  margin-top: clamp(26px, 3vw, 40px);
}
.prod { display: flex; flex-direction: column; }
.prod__foto {
  display: block; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--bone-2);
}
.prod__foto img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transition: transform .6s var(--ease);
}
.prod__foto:hover img { transform: scale(1.04); }
.prod__nombre {
  margin-top: 14px;
  font-family: var(--sans); font-weight: 500;
  font-size: .92rem; line-height: 1.35; letter-spacing: -.01em;
}
.prod__precio {
  margin-top: 6px;
  font-family: var(--serif); font-size: 1.2rem; letter-spacing: -.02em;
}
.prod .btn--peq {
  margin-top: auto; align-self: flex-start;
  padding: .7em 1.3em; font-size: 12px;
}
.prod .btn--peq + * { margin-top: 12px; }
.prod__precio + .btn--peq { margin-top: 14px; }

@media (max-width: 1080px) { .tienda__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .tienda__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }