/* ==========================================================================
   ARREGLAMIHOGAR — Componentes
   ========================================================================== */

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  --btn-edge: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  padding: 0.85rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-edge);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color var(--t-fast) var(--out-quart),
              color var(--t-fast) var(--out-quart),
              border-color var(--t-fast) var(--out-quart),
              box-shadow var(--t-fast) var(--out-quart),
              transform var(--t-press) var(--out-quart);
}

/* Al pulsar, el botón cede. Es lo que confirma que la interfaz ha oído. */
.btn:active { transform: scale(0.975); }

.btn > * { position: relative; z-index: 1; }

/* Barrido de latón desde la izquierda al pasar el cursor */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--brass-300);
  transition: transform var(--t-slow) var(--out-expo);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { transform: scaleX(1); }
}

.btn__ico { width: 1.15em; height: 1.15em; flex: none; }

.btn--brass {
  --btn-bg: var(--brass-400);
  --btn-fg: var(--wine-900);
  --btn-edge: var(--brass-400);
  box-shadow: var(--lift-2);
}

.btn--brass:hover { box-shadow: var(--lift-3); }

.btn--wine {
  --btn-bg: var(--wine-700);
  --btn-fg: var(--stone-100);
  --btn-edge: var(--wine-700);
}

.btn--wine:hover { --btn-fg: var(--wine-900); }

.btn--line {
  --btn-fg: var(--wine-700);
  --btn-edge: var(--hairline);
}

.btn--line:hover { --btn-fg: var(--wine-900); --btn-edge: var(--brass-400); }

.btn--line-light {
  --btn-fg: var(--stone-200);
  --btn-edge: oklch(0.885 0.044 82 / 0.4);
}

.btn--line-light:hover { --btn-fg: var(--wine-900); --btn-edge: var(--brass-300); }

.btn--wa { --btn-bg: var(--wine-700); --btn-fg: var(--stone-100); --btn-edge: var(--wine-700); }
.btn--wa:hover { --btn-fg: var(--wine-900); }

.btn--wide { width: 100%; }
.btn--big { padding: 1rem 1.9rem; }
.btn--small { padding: 0.6rem 1.05rem; font-size: var(--t-xs); letter-spacing: 0.09em; }

/* Enlace con filete que se estira */
.pull {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--wine-700);
  transition: color var(--t-fast) var(--out-quart), transform var(--t-press) var(--out-quart);
}

.pull::after {
  content: "";
  width: 3.2em;
  height: 1px;
  background: var(--brass-500);
  transform: scaleX(0.625);
  transform-origin: left;
  transition: transform var(--t-mid) var(--out-expo), background-color var(--t-fast) var(--out-quart);
}

.pull:hover { color: var(--wine-900); }
.pull:hover::after { transform: scaleX(1); background: var(--wine-700); }
.pull:active { transform: scale(0.98); }

.pull--light { color: var(--stone-200); }
.pull--light:hover { color: var(--brass-300); }
.pull--light:hover::after { background: var(--brass-300); }

/* --------------------------------------------------------------------------
   Etiqueta versal

   Sistema de marca deliberado, no adorno de sección: solo aparece en el hero
   y en los rótulos de datos. Nunca encima de cada título.
   -------------------------------------------------------------------------- */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--brass-600);
}

.kicker::before {
  content: "";
  width: 2.4em;
  height: 1px;
  background: currentColor;
}

.kicker--light { color: var(--brass-300); }
.kicker--bare::before { display: none; }

/* --------------------------------------------------------------------------
   Precio
   -------------------------------------------------------------------------- */

.price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55em;
}

.price__from {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-mute);
}

.price__fig {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  line-height: 1;
  color: var(--ink-900);
  font-variant-numeric: lining-nums;
}

.price--onwine .price__from { color: var(--brass-300); }
.price--onwine .price__fig { color: var(--stone-50); }

.price-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  padding: 0.75rem 1.5rem;
  background: var(--wine-700);
  border-radius: var(--r-sm);
}

.price-tab .price__from { color: var(--brass-300); }
.price-tab .price__fig { color: var(--stone-50); font-size: var(--t-lg); }

/* --------------------------------------------------------------------------
   Tira de garantías
   -------------------------------------------------------------------------- */

/* Dos columnas en el movil y cuatro a partir de 640px. En cuatro, cada
   celda se queda en 56px a 320px de pantalla, y una palabra en versalitas
   con 0.1em de letterspacing no cabe: se salia por encima de la linea
   divisoria de al lado. El divisor se dibuja a la izquierda de todas salvo
   la primera de cada fila, que en dos columnas son las impares. */
.marks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0;
  row-gap: var(--s-4);
}

.mark {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  padding-inline: clamp(0.35rem, 0.4vw, 0.6rem);
  border-left: 1px solid var(--hairline);
}

.mark:nth-child(odd) { border-left: 0; }

@media (min-width: 640px) {
  .marks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(0.4rem, 0.05rem + 1.4vw, 1.5rem);
    row-gap: 0;
  }
  .mark:nth-child(odd) { border-left: 1px solid var(--hairline); }
  .mark:first-child { border-left: 0; }
}

.mark__ico {
  width: clamp(24px, 20px + 1.1vw, 28px);
  height: clamp(24px, 20px + 1.1vw, 28px);
  stroke: var(--brass-500);
  stroke-width: 1.4;
  fill: none;
}

.mark__txt {
  overflow-wrap: break-word;
  font-size: clamp(0.594rem, 0.53rem + 0.26vw, 0.688rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--text-soft);
}

.marks--light .mark { border-left-color: oklch(0.885 0.044 82 / 0.28); }
.marks--light .mark__txt { color: var(--stone-200); }

.marks--framed {
  padding: var(--s-5) var(--s-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
}

.marks--framed .mark__ico { stroke: var(--wine-600); }
.marks--framed .mark__txt { color: var(--wine-800); }

/* --------------------------------------------------------------------------
   Planes

   Cartas porque una comparativa de precios es el caso en que la carta es de
   verdad el mejor recurso. El destacado no es la misma carta con borde: cambia
   de fondo, de altura y de tratamiento.
   -------------------------------------------------------------------------- */

.tiers {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 860px) {
  /* El destacado sobresale por arriba y por abajo para romper la fila. El
     relleno del contenedor reserva ese voladizo: sin él, la tarjeta se comía
     la sección siguiente. */
  .tiers {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding-block: var(--s-5);
  }

  .tier--lead {
    margin-block: calc(var(--s-5) * -1);
    z-index: 1;
  }
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-7) var(--s-5) var(--s-6);
  background: var(--surface);
  border: 1px solid var(--hairline);
  transition: border-color var(--t-mid) var(--out-quart),
              box-shadow var(--t-mid) var(--out-quart);
}

@media (min-width: 860px) {
  .tier + .tier { border-left: 0; }
  .tier--lead + .tier { border-left: 1px solid var(--hairline); }
}

.tier:hover { border-color: var(--brass-400); }

.tier--lead {
  background: var(--wine-800);
  border-color: var(--wine-800);
  color: var(--stone-200);
  padding-block: var(--s-8) var(--s-7);
  box-shadow: var(--lift-3);
}

.tier--lead:hover { border-color: var(--wine-800); }

.tier__flag {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-300);
}

.tier__name {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 400;
  line-height: 1;
  color: var(--wine-700);
}

.tier--lead .tier__name { color: var(--brass-300); }

.tier__price {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  line-height: 1;
  margin-top: var(--s-5);
  color: var(--ink-900);
}

.tier--lead .tier__price { color: var(--stone-50); }

.tier__from {
  display: block;
  font-family: var(--font-text);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 0.35rem;
}

.tier--lead .tier__from { color: var(--brass-400); }

.tier__pitch {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  color: var(--text-soft);
}

.tier--lead .tier__pitch { color: var(--stone-300); }

.tier__list {
  display: grid;
  gap: 0.6rem;
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline-soft);
  font-size: var(--t-sm);
  color: var(--text-soft);
}

.tier--lead .tier__list {
  border-top-color: oklch(0.885 0.044 82 / 0.22);
  color: var(--stone-300);
}

.tier__list li {
  position: relative;
  padding-left: 1.5em;
}

.tier__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.7em;
  height: 1px;
  background: var(--brass-500);
}

.tier__act { margin-top: auto; padding-top: var(--s-6); }

/* --------------------------------------------------------------------------
   Servicios: lista editorial numerada, no rejilla de cartas
   -------------------------------------------------------------------------- */

.rota { border-top: 1px solid var(--hairline); }

.rota__row {
  display: grid;
  gap: var(--s-4);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--hairline);
  align-items: start;
  transition: background-color var(--t-mid) var(--out-quart);
}

@media (min-width: 860px) {
  .rota__row {
    grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.05fr) auto;
    gap: var(--s-6);
    align-items: center;
  }
}

.rota__row:hover { background: var(--stone-100); }

.rota__n {
  font-family: var(--font-display);
  font-size: var(--t-md);
  line-height: 1;
  color: var(--brass-500);
  font-variant-numeric: lining-nums;
}

.rota__title { font-size: var(--t-lg); font-weight: 500; letter-spacing: -0.014em; }

.rota__desc { font-size: var(--t-sm); color: var(--text-soft); max-width: 52ch; }

.rota__go {
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--wine-700);
  transition: background-color var(--t-fast) var(--out-quart),
              border-color var(--t-fast) var(--out-quart),
              transform var(--t-mid) var(--out-expo);
}

.rota__row:active { background: var(--stone-200); }

.rota__row:hover .rota__go {
  background: var(--wine-700);
  border-color: var(--wine-700);
  color: var(--stone-100);
  transform: translateX(4px);
}

.rota__go svg { width: 1rem; height: 1rem; }

/* --------------------------------------------------------------------------
   Proceso: secuencia con filete de conexión
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Cómo trabajamos

   Cuatro fases sobre una línea de latón. La línea se llena al entrar en
   pantalla y su cabeza sigue al cursor: no esconde nada, solo señala. Todo el
   texto está siempre visible, que es lo que se viene a leer.
   -------------------------------------------------------------------------- */

.flow { position: relative; --p: 0; }

.flow__list {
  display: grid;
  gap: var(--s-7);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 880px) {
  .flow__list { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
}

/* La línea solo se dibuja cuando las cuatro fases van en fila. */
.flow__line { display: none; }

@media (min-width: 880px) {
  .flow__line {
    display: block;
    position: absolute;
    top: 3px;
    left: 0;
    right: 0;
    height: 1px;
    background: oklch(0.885 0.044 82 / 0.2);
    overflow: hidden;
  }

  .flow__line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--brass-400);
    transform: scaleX(var(--p));
    transform-origin: left;
    transition: transform 820ms var(--out-expo);
  }
}

.flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: var(--s-5);
  transition: opacity var(--t-mid) var(--out-quart), transform var(--t-mid) var(--out-expo);
}

/* En móvil no hay línea horizontal: cada fase lleva su propio filete. */
@media (max-width: 879px) {
  .flow__step::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    right: 0;
    height: 1px;
    background: oklch(0.885 0.044 82 / 0.2);
  }
}

.flow__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brass-500);
  transform: scale(0.4);
  opacity: 0;
  transition: transform var(--t-mid) var(--out-expo),
              opacity var(--t-fast) var(--out-quart),
              background-color var(--t-fast) var(--out-quart),
              box-shadow var(--t-mid) var(--out-quart);
}

/* Los puntos van apareciendo por detrás de la línea que avanza. */
.flow.seen .flow__dot { transform: scale(1); opacity: 1; }
.flow.seen .flow__step:nth-child(1) .flow__dot { transition-delay: 120ms; }
.flow.seen .flow__step:nth-child(2) .flow__dot { transition-delay: 300ms; }
.flow.seen .flow__step:nth-child(3) .flow__dot { transition-delay: 480ms; }
.flow.seen .flow__step:nth-child(4) .flow__dot { transition-delay: 660ms; }

.flow__n {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-400);
  transition: color var(--t-fast) var(--out-quart);
}

.flow__t {
  margin-top: var(--s-2);
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--stone-50);
}

.flow__d {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--stone-300);
}

/* La cifra que antes iba suelta en otra fila: pertenece a su fase. */
.flow__fig {
  display: grid;
  gap: 0.25rem;
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid oklch(0.885 0.044 82 / 0.16);
}

.flow__figv {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  line-height: 1;
  color: var(--stone-50);
  transition: color var(--t-fast) var(--out-quart);
}

.flow__figl { font-size: var(--t-xs); color: var(--stone-400); }

/* El resto se atenúa para que la fase señalada destaque sola. */
@media (hover: hover) and (pointer: fine) {
  .flow:hover .flow__step { opacity: 0.55; }
  .flow .flow__step:hover { opacity: 1; transform: translateY(-4px); }
  .flow__step:hover .flow__n { color: var(--brass-300); }
  .flow__step:hover .flow__figv { color: var(--brass-300); }
  .flow__step:hover .flow__dot {
    background: var(--brass-300);
    box-shadow: 0 0 0 4px oklch(0.885 0.044 82 / 0.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow__dot { transform: none; opacity: 1; }
  .flow .flow__step:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Proyectos: mosaico de tamaños variados
   -------------------------------------------------------------------------- */

.works {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(2, 1fr);
}

/* Ocho fotos. A tres columnas quedaria 3 + 3 + 2 y la ultima fila coja, asi
   que en escritorio van cuatro: dos filas de cuatro arriba y cuatro de dos en
   movil. Simetrica en los dos sitios. */
@media (min-width: 1000px) {
  .works { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
}

/* Las fotos de obra vienen en vertical, así que la retícula lo es también.
   La columna central baja medio paso para que la fila no quede plana. Se hace
   con margen y no con transform: la aparición al desplazar ya usa transform. */
@media (min-width: 1000px) {
  .works > *:nth-child(4n + 2),
  .works > *:nth-child(4n + 3) { margin-top: var(--s-6); }
}

.shot {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--stone-300);
  isolation: isolate;
}

.works .shot { aspect-ratio: 3 / 4; }

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--out-expo);
}

.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    oklch(0.185 0.055 18 / 0.78) 0%,
    oklch(0.185 0.055 18 / 0.22) 42%,
    oklch(0.185 0.055 18 / 0) 72%);
  opacity: 0;
  transition: opacity var(--t-slow) var(--out-quart);
}

@media (hover: hover) and (pointer: fine) {
  .shot:hover img { transform: scale(1.045); }
  .shot:hover::after { opacity: 1; }
}

a.shot { transition: transform var(--t-press) var(--out-quart); }
a.shot:active { transform: scale(0.99); }

.shot__meta {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: var(--s-5);
  color: var(--stone-50);
  transform: translateY(0.6rem);
  opacity: 0;
  transition: opacity var(--t-slow) var(--out-quart), transform var(--t-slow) var(--out-expo);
}

.shot:hover .shot__meta,
.shot:focus-visible .shot__meta { opacity: 1; transform: none; }

/* Dos líneas: arriba el sitio, debajo el tipo de obra. */
.shot__place {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-md);
  line-height: 1.2;
}

.shot__kind {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-300);
}

/* En pantallas táctiles no hay hover: el rótulo se queda puesto */
@media (hover: none) {
  .shot::after { opacity: 1; }
  .shot__meta { opacity: 1; transform: none; }
}

/* Rejilla uniforme para la página de galería */
.grid-shots {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}

.grid-shots .shot { aspect-ratio: 3 / 4; }

/* --------------------------------------------------------------------------
   Opiniones

   Carril con desplazamiento por tarjetas en lugar de una rejilla fija. Se
   arrastra con el dedo en móvil y con los botones en escritorio, y funciona
   igual sin JavaScript porque el scroll es nativo.
   -------------------------------------------------------------------------- */

.voices {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(82%, 21rem), 1fr);
  gap: var(--s-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Aire para que la sombra al pasar el cursor no se recorte */
  padding: 0.25rem 0.25rem var(--s-2);
  margin: -0.25rem;
}

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

/* --------------------------------------------------------------------------
   Iconos en pantalla estrecha

   Los iconos estan dimensionados con clamp contra el ancho de la ventana, y
   eso en un movil los deja en el minimo: 24 px los de las chapas, 13 px las
   estrellas de las resenas. En una pantalla de 390 px eso no es proporcion,
   es que se pierden. Aqui se suben del orden de un cuarto, solo por debajo
   de 620 px, que es donde el problema existe.
   -------------------------------------------------------------------------- */

@media (max-width: 619px) {
  .mark__ico { width: 30px; height: 30px; stroke-width: 1.5; }
  .stars svg { width: 16px; height: 16px; }
  .tramite__tick { width: 30px; height: 30px; }
  .obsequio__ico { width: 32px; height: 32px; }
  .wa-strip__mark svg { width: 30px; height: 30px; }
  .assure svg { width: 1.2em; height: 1.2em; }
  .rail-btn svg { width: 1.2rem; height: 1.2rem; }
  .rota__go svg { width: 1.2rem; height: 1.2rem; }
}

/* --- El borde difuminado del carril ---------------------------------------

   La tarjeta que asoma por la derecha se cortaba a hachazo contra el borde
   de la seccion y parecia un fallo de maquetacion. Ahora se apaga.

   El lado por el que se difumina lo decide main.js segun donde quede algo
   por ver (data-borde: i, d, id o no). Ponerlo siempre seria peor: al llegar
   al final del carril la ultima tarjeta se veria desvaida sin motivo.

   Sin JavaScript no se pone el atributo y no hay mascara: se corta como
   antes, que es feo pero no rompe nada.

   Solo en los testimonios. En una tarjeta de texto el difuminado se lee como
   «sigue por aqui»; sobre una foto o una ficha de producto se lee como que la
   foto esta mal recortada o que la imagen ha cargado a medias. Los carriles
   de fotos y de producto se cortan limpios contra el borde.
   -------------------------------------------------------------------------- */

.voices[data-borde="d"],
.dichos[data-borde="d"] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 5rem), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 5rem), transparent);
}

.voices[data-borde="i"],
.dichos[data-borde="i"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5rem);
          mask-image: linear-gradient(to right, transparent, #000 5rem);
}

.voices[data-borde="id"],
.dichos[data-borde="id"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5rem,
                                      #000 calc(100% - 5rem), transparent);
          mask-image: linear-gradient(to right, transparent, #000 5rem,
                                      #000 calc(100% - 5rem), transparent);
}

@media (min-width: 760px)  { .voices { grid-auto-columns: minmax(19rem, 1fr); } }
@media (min-width: 1100px) { .voices { grid-auto-columns: minmax(22rem, 1fr); } }

@media (prefers-reduced-motion: reduce) { .voices { scroll-behavior: auto; } }

.voice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  scroll-snap-align: start;
  transition: border-color var(--t-mid) var(--out-quart),
              box-shadow var(--t-mid) var(--out-quart);
}

.voice:hover { border-color: var(--brass-400); box-shadow: var(--lift-2); }

/* Comilla de cierre en latón, recortada por la esquina de la tarjeta */
.voice__mark {
  position: absolute;
  top: -0.06em;
  right: 0.6rem;
  font-family: var(--font-display);
  font-size: 5.5rem;
  line-height: 1;
  color: var(--brass-300);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

.voice__quote {
  font-family: var(--font-display);
  font-size: var(--t-md);
  line-height: 1.48;
  color: var(--ink-900);
  text-wrap: pretty;
}

.voice__by {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline-soft);
}

.voice__badge {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--wine-700);
  color: var(--brass-300);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.voice__name {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-800);
}

.voice__ctx {
  display: block;
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--text-mute);
}

.stars { display: flex; gap: 2px; }
.stars svg { width: 13px; height: 13px; fill: var(--brass-500); }

/* --- Controles del carril --- */

.rail-nav { display: flex; gap: var(--s-2); margin-top: var(--s-5); }

/* El JS pone hidden en el mando cuando todo cabe a la vista y no hay nada que
   desplazar. Sin esta regla no servía de nada: «display: flex» de la línea de
   arriba es una regla de autor y le gana al «[hidden] { display: none }» que
   trae el navegador, así que las flechas seguían ahí, visibles y sin hacer
   nada. Se veía en cuanto un carril tenía pocas fichas. */
.rail-nav[hidden] { display: none; }

.rail-btn {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--wine-700);
  transition: background-color var(--t-mid) var(--out-quart),
              border-color var(--t-mid) var(--out-quart),
              color var(--t-mid) var(--out-quart),
              opacity var(--t-mid) var(--out-quart);
}

.rail-btn:hover { background: var(--wine-700); border-color: var(--wine-700); color: var(--stone-100); }
.rail-btn[disabled] { opacity: 0.3; pointer-events: none; }
.rail-btn svg { width: 1rem; height: 1rem; }

/* --------------------------------------------------------------------------
   Preguntas frecuentes
   -------------------------------------------------------------------------- */

.qa { border-top: 1px solid var(--hairline); }
.qa__item { border-bottom: 1px solid var(--hairline); }

.qa__q {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  text-align: left;
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.011em;
  color: var(--ink-900);
  transition: color var(--t-fast) var(--out-quart);
}

.qa__q:hover { color: var(--wine-600); }

.qa__sign {
  flex: none;
  position: relative;
  width: 14px;
  height: 14px;
  transform: translateY(-1px);
}

.qa__sign::before, .qa__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--brass-600);
  transition: transform var(--t-mid) var(--out-expo);
}

.qa__sign::after { transform: rotate(90deg); }
.qa__q[aria-expanded="true"] .qa__sign::after { transform: rotate(0deg); }

.qa__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-mid) var(--out-expo);
}

.qa__a > div { overflow: hidden; }

/* La clase la pone el JS sobre el contenedor. No sirve el hermano adyacente:
   el botón va dentro de un <h3>, así que no es hermano del panel. */
.qa__item.is-open .qa__a { grid-template-rows: 1fr; }

.qa__a p {
  padding-bottom: var(--s-5);
  max-width: 64ch;
  color: var(--text-soft);
}

.qa__a p + p { padding-bottom: var(--s-5); margin-top: -0.6rem; }

/* --------------------------------------------------------------------------
   Formulario
   -------------------------------------------------------------------------- */

.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }

@media (min-width: 660px) {
  .form--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .form__full { grid-column: 1 / -1; }
}

.f { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; min-width: 0; }

.f__lbl {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--wine-700);
}

.f__lbl { transition: color var(--t-fast) var(--out-quart); }
.f:focus-within .f__lbl { color: var(--brass-700); }

.f__in {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  font-size: var(--t-base);
  color: var(--ink-900);
  transition: border-color var(--t-fast) var(--out-quart),
              box-shadow var(--t-fast) var(--out-quart),
              background-color var(--t-fast) var(--out-quart);
}

.f__in::placeholder {
  color: var(--ink-400);
  transition: opacity var(--t-fast) var(--out-quart);
}

/* Al escribir, el marcador de posición estorba. */
.f__in:focus::placeholder { opacity: 0.45; }

.f__in:hover { border-color: var(--brass-400); }

.f__in:focus {
  outline: none;
  background: var(--bg);
  border-color: var(--brass-500);
  box-shadow: 0 0 0 3px oklch(0.720 0.078 78 / 0.22);
}

/* :user-invalid solo marca en rojo cuando el campo ya se ha tocado, nunca
   mientras se está escribiendo por primera vez. */
.f__in:user-invalid {
  border-color: var(--wine-500);
  box-shadow: 0 0 0 3px oklch(0.475 0.145 21 / 0.12);
}

select.f__in {
  appearance: none;
  padding-right: 2.6rem;
}

/* La flecha va aparte para poder girarla al abrir. */
.f--select { position: relative; }

.f--select::after {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: 1.15rem;
  width: 0.7rem;
  height: 0.42rem;
  background: var(--brass-700);
  clip-path: polygon(0 0, 50% 100%, 100% 0, 82% 0, 50% 62%, 18% 0);
  transform-origin: center;
  transition: transform var(--t-mid) var(--out-expo);
  pointer-events: none;
}

.f--select:focus-within::after { transform: rotate(180deg); }

textarea.f__in { min-height: 8.5rem; resize: vertical; }

/* --- Conformidad RGPD: casilla propia, con el visto que se dibuja --- */

.agree__in {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.agree__box {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.12em;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  transition: background-color var(--t-fast) var(--out-quart),
              border-color var(--t-fast) var(--out-quart),
              transform var(--t-press) var(--out-quart);
}

.agree__box svg {
  width: 0.72rem;
  height: 0.72rem;
  fill: none;
  stroke: var(--stone-50);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset var(--t-mid) var(--out-expo);
}

.agree:hover .agree__box { border-color: var(--brass-400); }
.agree:active .agree__box { transform: scale(0.9); }

.agree__in:checked + .agree__box { background: var(--wine-700); border-color: var(--wine-700); }
.agree__in:checked + .agree__box svg { stroke-dashoffset: 0; }

.agree__in:focus-visible + .agree__box {
  outline: 2px solid var(--brass-600);
  outline-offset: 2px;
}

.f__note { font-size: var(--t-xs); color: var(--text-mute); }

/* --- El formulario, como pieza --- */

.form--card {
  padding: clamp(1.25rem, 0.6rem + 2.6vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  box-shadow: var(--lift-2);
  transition: box-shadow var(--t-mid) var(--out-quart);
}

.form--card:focus-within { box-shadow: var(--lift-3); }

/* Los campos entran escalonados, no todos de golpe. */
.form--card.seen .f,
.form--card.seen .agree,
.form--card.seen .form__full {
  animation: fieldIn 420ms var(--out-expo) backwards;
}

.form--card.seen > *:nth-child(1) { animation-delay: 0ms; }
.form--card.seen > *:nth-child(2) { animation-delay: 45ms; }
.form--card.seen > *:nth-child(3) { animation-delay: 90ms; }
.form--card.seen > *:nth-child(4) { animation-delay: 135ms; }
.form--card.seen > *:nth-child(5) { animation-delay: 180ms; }
.form--card.seen > *:nth-child(6) { animation-delay: 225ms; }
.form--card.seen > *:nth-child(7) { animation-delay: 270ms; }
.form--card.seen > *:nth-child(8) { animation-delay: 315ms; }
.form--card.seen > *:nth-child(n + 9) { animation-delay: 360ms; }

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

@media (prefers-reduced-motion: reduce) {
  .form--card.seen .f,
  .form--card.seen .agree,
  .form--card.seen .form__full { animation: none; }
}

.agree {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--text-mute);
}

.agree a { text-decoration: underline; text-underline-offset: 2px; }

.assure {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--t-sm);
  color: var(--text-soft);
}

.assure svg { width: 1em; height: 1em; stroke: var(--brass-500); stroke-width: 2.2; fill: none; flex: none; }
.assure--light { color: var(--stone-300); }

/* --------------------------------------------------------------------------
   Ficha de catálogo
   -------------------------------------------------------------------------- */

.lot {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color var(--t-mid) var(--out-quart), box-shadow var(--t-mid) var(--out-quart);
}

.lot:hover { border-color: var(--brass-400); box-shadow: var(--lift-2); }

.lot__pic { aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone-200); }

.lot__pic img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--out-expo);
}

.lot:hover .lot__pic img { transform: scale(1.04); }

.lot__body { display: flex; flex-direction: column; gap: 0.5rem; padding: var(--s-5); flex: 1; }
.lot__title { font-size: var(--t-md); font-weight: 500; }
.lot__text { font-size: var(--t-sm); color: var(--text-soft); }
.lot__foot { margin-top: auto; padding-top: var(--s-4); }

.cols {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

/* --------------------------------------------------------------------------
   Entrada de blog
   -------------------------------------------------------------------------- */

.post { display: grid; gap: var(--s-4); }

.post__pic { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-sm); background: var(--stone-200); }

.post__pic img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--out-expo);
}

.post:hover .post__pic img { transform: scale(1.04); }

.post__when {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-600);
}

.post__title { font-size: var(--t-md); font-weight: 500; letter-spacing: -0.012em; }
.post:hover .post__title { color: var(--wine-600); }
.post__sum { font-size: var(--t-sm); color: var(--text-soft); }

/* --------------------------------------------------------------------------
   Cifras
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Barra WhatsApp
   -------------------------------------------------------------------------- */

.wa-strip {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5) var(--edge);
  background: var(--wine-700);
  color: var(--stone-200);
  transition: background-color var(--t-mid) var(--out-quart);
}

.wa-strip:hover { background: var(--wine-600); }

.wa-strip__mark {
  width: 52px; height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--brass-400);
  border-radius: 50%;
  color: var(--brass-300);
}

.wa-strip__mark svg { width: 26px; height: 26px; }
.wa-strip__body { flex: 1; min-width: 0; }

.wa-strip__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-md);
  line-height: 1.2;
  color: var(--stone-50);
}

.wa-strip__sub { display: block; font-size: var(--t-sm); color: var(--stone-300); }
.wa-strip__go { flex: none; width: 20px; height: 20px; color: var(--brass-300); }

/* --------------------------------------------------------------------------
   Antes y después

   Dos fotos del mismo rincón, tomadas desde el mismo sitio. Se mantienen una
   al lado de la otra también en móvil: separadas pierden todo el sentido.
   -------------------------------------------------------------------------- */

.pairs {
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 900px) {
  .pairs { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
}

/* La pareja es columna flexible para que la tira se pueda ir al fondo: con
   un pie de foto de dos lineas y otro de tres, las dos tiras arrancaban a
   distinta altura y la fila quedaba descuadrada. Estirando el pie, las dos
   celdas acaban igual y las tiras coinciden.

   El min-width lo pide la tira de miniaturas: las suyas son columnas de 7,5
   rem que no encogen, asi que el minimo automatico de la pareja pasaba a ser
   el ancho entero de la tira y una columna se comia a la otra (760 px contra
   388). Con el minimo a cero mandan los 1fr de .pairs y las dos vuelven a
   medir igual; la tira, que se desplaza sola, no se entera. */
.pair { margin: 0; min-width: 0; display: flex; flex-direction: column; }
/* El pie crece y empuja la tira al fondo. Las fotos no encogen: en una
   columna flexible lo harian, y son las que mandan en la altura. */
.pair__cap { flex: 1; }

.pair__duo {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--brass-400);
}

.pair__side {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--stone-300);
}

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

.pair__tag {
  position: absolute;
  inset: auto auto var(--s-2) var(--s-2);
  padding: 0.28em 0.7em;
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  background: oklch(0.185 0.055 18 / 0.82);
  color: var(--stone-100);
  backdrop-filter: blur(4px);
}

.pair__side--after .pair__tag { background: var(--brass-500); color: var(--wine-900); }

.pair__cap { margin-top: var(--s-3); }

.pair__where {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-md);
  line-height: 1.2;
}

.pair__what {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--t-sm);
  color: var(--text-mute);
}

/* En el fondo de piedra el gris es el mismo; la regla se queda por si
   algun dia hay que separarlo. */
.on-stone .pair__what { color: var(--text-mute); }

/* --------------------------------------------------------------------------
   Bloque de obra en la galería
   -------------------------------------------------------------------------- */

.job + .job { margin-top: var(--s-8); padding-top: var(--s-8); border-top: 1px solid var(--hairline); }

.job__head { max-width: 60ch; margin-bottom: var(--s-6); }

.job__where {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-600);
}

.job__lede { margin-top: var(--s-3); color: var(--text-mute); }

/* Ficha de obra: etiqueta y dato en columnas, para que las tres líneas
   arranquen a la misma altura en lugar de fluir cada una por su lado. */
.job__facts {
  display: grid;
  gap: 0.55rem;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline-soft);
  padding-inline: 0;
  list-style: none;
  font-size: var(--t-sm);
}

.job__facts li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.5rem; }

.job__facts b {
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-600);
  align-self: baseline;
}

@media (max-width: 519px) {
  .job__facts li { grid-template-columns: 1fr; gap: 0.1rem; }
}

.job__sub {
  margin: var(--s-7) 0 var(--s-4);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-400);
}

/* --------------------------------------------------------------------------
   Calculadora de la portada

   No es una tarjeta con un botón: es una demostración en pequeño de lo que
   hace el configurador. Las cifras que van pasando son las que devuelve la
   herramienta de verdad, no un adorno inventado.

   Tres técnicas, todas sobre transform y opacity:
     1. Los dígitos ruedan en columnas, escalonados de izquierda a derecha.
     2. El rótulo de configuración cruza con un desenfoque que tapa el salto
        entre dos textos distintos.
     3. Un filete de latón recorre el borde al pasar el cursor, con un ángulo
        registrado en @property para que se pueda animar.
   -------------------------------------------------------------------------- */

@property --aro {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.calc {
  position: relative;
  display: grid;
  gap: var(--s-6);
  align-items: center;
  padding: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  transition: box-shadow var(--t-mid) var(--out-quart);
}

@media (min-width: 900px) {
  .calc { grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: var(--s-7); }
}

.calc__t { margin-top: var(--s-3); font-size: var(--t-xl); }
.calc__d { margin-top: var(--s-3); color: var(--text-soft); }
.calc__act { margin-top: var(--s-5); }

/* --- El filete que recorre el borde ------------------------------------- */

/* La composición de máscaras es lo que recorta el degradado a un borde de
   1 px. Si el navegador no la soporta no se dibuja nada, que es justo lo que
   queremos: mejor sin filete que con un manchón encima de la tarjeta. */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .calc::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--aro),
      transparent 0deg, transparent 200deg,
      var(--brass-400) 280deg, var(--brass-300) 300deg,
      transparent 340deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-mid) var(--out-quart);
  }

  /* Se enciende con el mismo gesto que detiene la cifra: el JS pone
     data-luce al entrar el cursor o el foco. Así el borde encendido siempre
     significa lo mismo, «esto está parado para que lo leas». */
  .calc[data-luce="true"]::before {
    opacity: 1;
    animation: aroGira 2.8s linear infinite;
  }
}

@keyframes aroGira { to { --aro: 360deg; } }

.calc[data-luce="true"] { box-shadow: var(--lift-2); }

/* --- El panel, que rima con el resumen del configurador ------------------ */

.calc__panel {
  position: relative;
  overflow: hidden;
  padding: var(--s-5);
  background: var(--wine-800);
  border-radius: var(--r-sm);
  color: var(--stone-100);
}

.calc__et {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-300);
}

/* Fila en flex y no texto en línea: así no hay que cuadrar líneas base
   entre el rótulo, los dígitos que ruedan y el símbolo del euro. */
.calc__cifra {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  line-height: 1;
  color: var(--stone-50);
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Alto de cada celda del rodillo. Prata dibuja las cifras más altas que su
   propia caja em: con 1em el recorte del rodillo les comía la punta por
   arriba y por abajo. Medido: 60 px de tinta para 44 px de caja. */
.calc__num {
  /* Alto de celda y ancho de hueco, medidos sobre la propia Prata a 44 px:
       · la tinta de las cifras ocupa 1.36em, no 1em → celda de 1.45em
       · Prata NO tiene cifras tabulares: el «1» mide 0.345em y el «0»
         0.696em. El hueco se fija al glifo más ancho para que el número no
         baile al rodar ni se monte con el símbolo del euro. */
  --cel: 1.45em;
  --anch: 0.72em;
  display: inline-flex;
  align-items: center;
}

.calc__desde {
  font-family: var(--font-text);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-400);
  flex: none;
}

/* --- Los dígitos que ruedan --------------------------------------------- */

.dig {
  display: inline-block;
  height: var(--cel, 1.45em);
  overflow: hidden;
}

.dig--num { width: var(--anch, 0.72em); }
.dig--sep { width: calc(var(--anch, 0.72em) * 0.45); }

.dig__col {
  display: block;
  transform: translateY(calc(var(--i, 0) * -1 * var(--cel, 1.45em)));
  transition: transform 760ms var(--out-expo);
  transition-delay: calc(var(--d, 0) * 45ms);
}

.dig__c { display: block; height: var(--cel, 1.45em); line-height: var(--cel, 1.45em); text-align: center; }

/* Un respiro entre la última cifra y el símbolo. */
.calc__eur { margin-left: 0.3em; }

/* --- El rótulo de configuración ----------------------------------------- */

.calc__conf {
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  color: var(--stone-300);
  transition: opacity var(--t-fast) var(--out-quart),
              filter var(--t-fast) var(--out-quart),
              transform var(--t-mid) var(--out-expo);
}

/* El desenfoque tapa el instante en que se ven los dos textos a la vez. */
.calc__conf[data-sale="true"] { opacity: 0; filter: blur(4px); transform: translateY(-6px); }

.calc__conf b { font-weight: 600; color: var(--brass-300); }

.calc__pista {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid oklch(0.885 0.044 82 / 0.22);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--brass-400);
}

/* --- El compás del ciclo ------------------------------------------------- */

.calc__compas {
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: oklch(0.885 0.044 82 / 0.16);
}

.calc__compas span {
  display: block;
  height: 100%;
  background: var(--brass-400);
  transform: scaleX(0);
  transform-origin: left;
}

.calc[data-anda="true"] .calc__compas span {
  animation: compas var(--ciclo, 3400ms) linear infinite;
}

@keyframes compas { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .dig__col { transition: none; }
  .calc__conf { transition: none; }
  .calc__compas { display: none; }
  .calc[data-luce="true"]::before { animation: none; }
}

/* El campo trampa del filtro antirrobot. Fuera de la vista pero no con
   display:none, que algunos robots detectan. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Obsequio

   El detalle que la casa regala por contratar la obra. Aparece en varias
   páginas, así que tiene que funcionar sobre fondo claro, sobre piedra y
   sobre burdeos. El lazo late muy despacio: lo justo para que el ojo lo
   pille sin que moleste al leer.
   -------------------------------------------------------------------------- */

.obsequio {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4);
  background: var(--stone-100);
  border: 1px solid var(--brass-400);
  border-radius: var(--r-sm);
  text-align: left;
}

.obsequio__ico {
  flex: none;
  width: 26px;
  height: 26px;
  stroke: var(--brass-700);
  stroke-width: 1.4;
  fill: none;
  transform-origin: 50% 60%;
  animation: lazo 4.2s var(--in-out) infinite;
}

.obsequio__txt { min-width: 0; }

.obsequio strong {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--wine-800);
}

.obsequio__pie {
  display: block;
  margin-top: 0.28rem;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--text-mute);
}

/* Sobre burdeos */
.obsequio--claro {
  background: oklch(0.885 0.044 82 / 0.10);
  border-color: oklch(0.885 0.044 82 / 0.34);
}

.obsequio--claro .obsequio__ico { stroke: var(--brass-400); }
.obsequio--claro strong { color: var(--stone-50); }
.obsequio--claro .obsequio__pie { color: var(--stone-300); }

@keyframes lazo {
  0%, 72%, 100% { transform: none; }
  78% { transform: rotate(-6deg) scale(1.06); }
  84% { transform: rotate(5deg) scale(1.06); }
  90% { transform: rotate(-2deg) scale(1.02); }
}

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

/* --------------------------------------------------------------------------
   Técnica de instalación

   Seis apuntes cortos sobre cómo se coloca el porcelánico. Se numeran solos
   con un contador: son pasos de oficio, y el número ayuda a leerlos como
   una secuencia y no como una lista de virtudes sueltas.
   -------------------------------------------------------------------------- */

.tecnica {
  display: grid;
  gap: var(--s-5) var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  counter-reset: tec;
}

.tecnica__it {
  counter-increment: tec;
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
}

.tecnica__it::before {
  content: counter(tec, decimal-leading-zero);
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-md);
  line-height: 1;
  color: var(--brass-600);
}

.tecnica__t {
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-900);
}

.tecnica__d {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   Vídeos

   `preload="none"` a propósito: cuatro vídeos precargando en un móvil con
   datos es una factura ajena. El navegador solo trae el cartel hasta que
   alguien le da al play.
   -------------------------------------------------------------------------- */

.pelis {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

/* Con un número par de vídeos, dos por fila. La rejilla automática metía tres
   y dejaba el cuarto solo en su propia fila, que se lee como un descuido.
   Además, a dos por fila el vídeo sale más grande, y en vertical se agradece. */
@media (min-width: 700px) {
  .pelis--par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.peli { margin: 0; }

.peli__v,
.peli__falta {
  position: relative;
  display: block;
  width: 100%;
  /* Los videos estan grabados con el movil en la mano, en vertical. En una
     caja 16:9 con object-fit cover se perdia mas de medio encuadre: se veia
     una franja del centro y nada mas. */
  aspect-ratio: 9 / 16;
  max-width: 21rem;
  margin-inline: auto;
  background: var(--ink-900);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.peli__v { object-fit: cover; }

.peli__falta img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}

/* Sello del vídeo que aún no tenemos. Se dice, no se disimula. */
.peli__sello {
  position: absolute;
  inset: 50% 0 auto 0;
  transform: translateY(-50%);
  text-align: center;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--stone-100);
}

.peli__pie {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.55;
}

.peli__pie b { display: block; color: var(--ink-900); }
.peli__pie span { display: block; margin-top: 0.2rem; color: var(--text-mute); }

/* --------------------------------------------------------------------------
   Testimonios en bloque

   La portada los pasa en un raíl horizontal; aquí, en la galería, hay sitio
   para leerlos de una vez y se ponen en rejilla.
   -------------------------------------------------------------------------- */

.dichos {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.dicho {
  margin: 0;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
}

.dicho__q {
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--text-soft);
}

.dicho__q::before { content: "“"; }
.dicho__q::after  { content: "”"; }

.dicho__f {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline-soft);
}

.dicho__ini {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--stone-100);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--wine-700);
}

.dicho__f b { display: block; font-size: var(--t-sm); color: var(--ink-900); }
.dicho__f > span > span { display: block; font-size: var(--t-xs); color: var(--text-mute); }

/* --------------------------------------------------------------------------
   Marcas

   Cuatro familias, cada una con su lista. Las de gama alta se distinguen con
   un punto de latón delante en vez de con negrita: la negrita en una lista
   corta grita demasiado.
   -------------------------------------------------------------------------- */

.marcas {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

/* Columna con la nota empujada al pie: las familias tienen distinto número
   de marcas y, sin esto, cada nota arrancaba a una altura. */
.marca {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
}

.marca__t {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-700);
}

.marca__l {
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}

.marca__l li {
  font-family: var(--font-display);
  font-size: var(--t-base);
  line-height: 1.25;
  color: var(--ink-900);
}

/* Gama alta */
.marca__lujo { position: relative; padding-left: 0.95em; }

.marca__lujo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 0.36em;
  height: 0.36em;
  border-radius: 50%;
  background: var(--brass-500);
}

.marca__n {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline-soft);
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--text-mute);
}

/* ==========================================================================
   SOBRE NOSOTROS
   ========================================================================== */

/* --------------------------------------------------------------------------
   Titular de sección

   En esta página el titular va solo y la frase de apoyo debajo, no a su
   derecha: la columna lateral dejaba media pantalla vacía y partía la
   lectura en dos.
   -------------------------------------------------------------------------- */

.titular { margin-bottom: var(--s-6); }

.titular__bajo {
  max-width: 58ch;
  margin-top: var(--s-4);
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--text-soft);
}

/* Sobre burdeos, la tinta oscura no se lee. */
.titular--claro .display { color: var(--stone-50); }
.titular--claro .titular__bajo { color: var(--stone-300); }

/* --------------------------------------------------------------------------
   Compromisos

   Dos columnas, no tres: eran cuatro y la tercera dejaba uno descolgado.
   Y la descripción iba en tinta oscura sobre el burdeos, que era el motivo
   de que no se leyera nada.
   -------------------------------------------------------------------------- */

.votos {
  display: grid;
  gap: var(--s-6) var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.voto { padding-top: var(--s-4); border-top: 1px solid oklch(0.885 0.044 82 / 0.30); }

.voto__t {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: 1.2;
  color: var(--stone-50);
}

.voto__d {
  max-width: 46ch;
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--stone-300);
}

/* --------------------------------------------------------------------------
   Trámites

   Tres pasos con su visto. No es una rejilla de tarjetas más: es un registro,
   y se lee como tal.
   -------------------------------------------------------------------------- */

.tramites {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tram;
  border-top: 1px solid var(--hairline);
}

.tramite {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--hairline);
}

.tramite__tick {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 0.1rem;
  stroke: var(--brass-600);
  stroke-width: 1.5;
  fill: none;
}

.tramite__t {
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-900);
}

.tramite__d {
  max-width: 68ch;
  margin-top: 0.35rem;
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--text-soft);
}

.tramites__pie {
  max-width: 62ch;
  margin-top: var(--s-5);
  font-size: var(--t-sm);
  line-height: 1.65;
  /* --text-mute daba 4.41:1 a 14px, justo por debajo del minimo. */
  color: var(--text-soft);
}

@media (min-width: 900px) {
  .tramites { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-6); }
  .tramite { border-bottom: 0; padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Marcas

   Dos grupos con etiqueta en vez de un punto sin explicación. El cliente
   preguntó por qué unas marcas llevaban punto y otras no: la respuesta era
   «gama alta», así que ahora lo pone.
   -------------------------------------------------------------------------- */

.marcas {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.marca {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
}

.marca__t {
  /* Dos líneas de alto siempre: «Griferia» ocupa una y «Accesorios de baño»
     dos, y sin esto los grupos de cada tarjeta arrancaban a distinta altura. */
  min-height: 2.4em;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-md);
  line-height: 1.2;
  color: var(--wine-800);
}

.marca__et {
  margin-top: var(--s-4);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-700);
}

.marca__l {
  margin: 0.45rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.2rem;
}

.marca__l li {
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--ink-900);
}

.marca__n {
  margin-top: auto;
  padding-top: var(--s-4);
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--text-mute);
}

/* --------------------------------------------------------------------------
   Zona de trabajo

   Carta de la costa alicantina con los ocho municipios y la tienda. La línea
   de costa y las posiciones salen de coordenadas reales, proyectadas en
   equirectangular: mil unidades del viewBox son 53,2 km.
   -------------------------------------------------------------------------- */

.zona {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}

@media (min-width: 960px) {
  .zona { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--s-8); }
}

.zona__mapa { margin: 0; min-width: 0; }

.mapa {
  display: block;
  width: 100%;
  height: auto;
  /* Sin esto, las curvas de sonda (que van desplazadas mar adentro) se
     pintaban fuera del SVG y se salían de la pantalla. Recortadas al
     encuadre quedan además como en una carta: cortadas por el borde. */
  overflow: hidden;
}

/* El mar es el propio fondo de la sección; la tierra se levanta sobre él. */
.mapa__tierra {
  fill: oklch(0.885 0.044 82 / 0.14);
  stroke: oklch(0.885 0.044 82 / 0.10);
  stroke-width: 1;
}

.mapa__costa {
  fill: none;
  stroke: var(--brass-400);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Sondas: la costa repetida mar adentro, como las isóbatas de una carta. */
.mapa__sonda {
  fill: none;
  stroke: oklch(0.885 0.044 82 / 0.16);
  stroke-width: 1;
  stroke-dasharray: 3 7;
}

/* --- Municipios --- */

.pin__pt { fill: var(--brass-300); }

.pin__halo {
  fill: none;
  stroke: var(--brass-300);
  stroke-width: 1;
  opacity: 0.34;
}

.pin__t {
  fill: var(--stone-100);
  font-family: var(--font-text);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* --- La tienda: chincheta con aguja --- */

.chincheta__aguja { stroke: var(--stone-200); stroke-width: 2; }
.chincheta__base { fill: var(--stone-100); }

.chincheta__halo {
  fill: none;
  stroke: var(--stone-100);
  stroke-width: 1;
  opacity: 0.34;
}

.chincheta__cabeza {
  fill: var(--wine-600);
  stroke: var(--stone-100);
  stroke-width: 2.5;
}

.chincheta__t {
  fill: var(--stone-50);
  font-family: var(--font-display);
  font-size: 30px;
}

/* --- Rosa de los vientos y escala --- */

.rosa__aro {
  fill: none;
  stroke: oklch(0.885 0.044 82 / 0.34);
  stroke-width: 1;
}

.rosa__punta { fill: var(--brass-300); }
.rosa__cola { fill: oklch(0.885 0.044 82 / 0.34); }

.rosa__n {
  fill: var(--brass-300);
  font-family: var(--font-display);
  font-size: 30px;
}

.carta--escala line { stroke: oklch(0.885 0.044 82 / 0.50); stroke-width: 1.4; }

.carta--escala text {
  fill: oklch(0.885 0.044 82 / 0.70);
  font-family: var(--font-text);
  font-size: 21px;
  letter-spacing: 0.04em;
}

/* --- La ficha de la tienda, al lado del mapa --- */

.zona__ficha {
  padding: var(--s-6);
  background: oklch(0.885 0.044 82 / 0.07);
  border: 1px solid oklch(0.885 0.044 82 / 0.24);
  border-radius: var(--r-md);
}

.zona__et {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1.2;
  color: var(--stone-50);
}

.zona__lede {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--stone-300);
}

.zona__dir {
  margin-top: var(--s-5);
  font-style: normal;
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--stone-100);
}

.zona__dir strong { color: var(--stone-50); }

.zona__horas {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem var(--s-4);
  margin: var(--s-4) 0 var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid oklch(0.885 0.044 82 / 0.24);
  font-size: var(--t-sm);
}

.zona__horas dt {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-400);
  align-self: center;
}

.zona__horas dd { margin: 0; color: var(--stone-200); }

/* --- Entrada del mapa ------------------------------------------------------

   La costa se dibuja sola y las chinchetas van cayendo detrás, escalonadas.
   Solo se anima cuando la sección entra en pantalla (.seen lo pone el
   observador de main.js), y nunca si el visitante ha pedido menos motion.
   -------------------------------------------------------------------------- */

.zona__mapa .mapa__costa {
  /* Cada version del mapa lleva su propio --traza porque los dos trazos
     miden distinto (1560 y 1697 unidades). Antes habia aqui un 2600 puesto
     a ojo: al ser mayor que el trazo, la costa se quedaba invisible el
     primer 40 % de la animacion y luego aparecia de golpe. */
  stroke-dasharray: var(--traza, 1600);
  stroke-dashoffset: var(--traza, 1600);
}

.zona__mapa.seen .mapa__costa {
  animation: trazaCosta 1800ms var(--out-quart) forwards;
}

.zona__mapa .pin,
.zona__mapa .chincheta {
  opacity: 0;
  transform: translateY(-10px);
}

.zona__mapa.seen .pin,
.zona__mapa.seen .chincheta {
  animation: caeChincheta 520ms var(--out-expo) forwards;
  animation-delay: calc(700ms + var(--i, 0) * 90ms);
}

.zona__mapa .carta { opacity: 0; }

.zona__mapa.seen .carta {
  animation: asomaCarta 700ms var(--out-quart) forwards;
  animation-delay: 1500ms;
}

@keyframes trazaCosta {
  to { stroke-dashoffset: 0; }
}

@keyframes caeChincheta {
  to { opacity: 1; transform: none; }
}

@keyframes asomaCarta {
  to { opacity: 1; }
}

/* El halo late muy despacio bajo cada municipio, lo justo para que el mapa
   no parezca una captura. */
.zona__mapa.seen .pin__halo {
  animation: latido 3.6s var(--in-out) infinite;
  animation-delay: calc(1600ms + var(--i, 0) * 220ms);
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes latido {
  0%, 70%, 100% { transform: scale(1);    opacity: 0.34; }
  85%           { transform: scale(1.28); opacity: 0.10; }
}

@media (prefers-reduced-motion: reduce) {
  .zona__mapa .mapa__costa { stroke-dasharray: none; stroke-dashoffset: 0; }
  .zona__mapa .pin,
  .zona__mapa .chincheta { opacity: 1; transform: none; animation: none; }
  /* La rosa y la escala llevan su translate en el SVG: aquí solo opacidad. */
  .zona__mapa .carta { opacity: 1; animation: none; }
  .zona__mapa.seen .pin__halo { animation: none; }
}


/* --- El mapa en pantallas estrechas ---------------------------------------

   A 390 px el SVG mide 350 × 300 y sus rótulos de 25 unidades caen a 8,7 px
   reales: no hay quien los lea. Ahí se ocultan los rótulos, la rosa y la
   escala, y los municipios pasan a leerse en una lista de verdad.
   -------------------------------------------------------------------------- */

.zona__lista { margin-top: var(--s-5); }

.zona__lista ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 0.4rem var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zona__lista li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--stone-200);
}

.zona__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass-400);
}

/* Las dos versiones del mapa viven en el mismo HTML y cada una sale en su
   tramo. La estrecha no es la ancha encogida: lleva su propio encuadre, mas
   cenido, y los trazos al doble de grosor, porque a 350 px de ancho todo se
   dibuja a la mitad y con las medidas de escritorio la costa quedaba en
   0,77 px y los municipios en puntos de 1,75 px de radio. */

.mapa--movil { display: none; }

@media (max-width: 619px) {
  .mapa--ancho { display: none; }
  .mapa--movil { display: block; }
}

/* El corte esta en 620 px porque es donde los rotulos del mapa ancho dejan
   de ser ilegibles: la caja mide ahi unos 570 px, o sea escala 0,57, y los
   nombres de 25 unidades salen a 14 px. Por debajo caian a 8,7 y no habia
   quien los leyera; de 620 en adelante manda el mapa rotulado y la lista
   sobra. */
@media (min-width: 620px) {
  .zona__lista { display: none; }
}

/* Tope de ancho de la version estrecha: sus trazos estan calculados para
   unos 350 px, y sin este tope, en una tableta de 600 se estiraba hasta la
   caja entera y la costa salia a 3,5 px, el triple de gorda de la cuenta. */
.mapa--movil {
  max-width: 30rem;
  margin-inline: auto;
}

/* --- Grosores de la version estrecha ---
   Todos van en unidades del viewBox: a 350 px de ancho se dividen por 2,86.
   Es decir, un trazo de 5 aqui se ve como 1,75 px reales. */

.mapa--movil .mapa__tierra {
  fill: oklch(0.885 0.044 82 / 0.20);
  stroke-width: 2.5;
}

.mapa--movil .mapa__costa { stroke-width: 5; }

.mapa--movil .chincheta__aguja { stroke-width: 5; }
.mapa--movil .chincheta__halo { stroke-width: 2.5; }
.mapa--movil .chincheta__cabeza { stroke-width: 5; }
.mapa--movil .chincheta__t { font-size: 46px; }

.mapa--movil .rosa__aro { stroke-width: 2.5; }
.mapa--movil .rosa__n { font-size: 52px; }

.mapa--movil .carta--escala line { stroke-width: 3; }
.mapa--movil .carta--escala text { font-size: 40px; }


/* ==========================================================================
   SERVICIOS

   Cinco tratamientos distintos, uno por servicio, en vez del mismo bloque
   repetido cinco veces. El ritmo de fondos va claro, burdeos, fotografia a
   sangre, piedra y claro: ninguno se parece al de al lado.
   ========================================================================== */

/* --- El indice de apertura ------------------------------------------------
   Cinco filas tipograficas. Nada de tarjetas: una tarjeta por servicio seria
   exactamente el patron que hace que una web parezca una plantilla. */

.indice {
  margin: var(--s-7) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.indice__a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-4) var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--hairline);
  color: inherit;
  text-decoration: none;
  transition: padding-left var(--t-mid) var(--out-quart),
              background var(--t-mid) var(--out-quart);
}

.indice__a:hover,
.indice__a:focus-visible {
  padding-left: var(--s-4);
  background: linear-gradient(to right,
    oklch(0.885 0.044 82 / 0.16), transparent 42%);
}

.indice__n {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1;
  /* brass-500 sobre el crema daba 2,40:1 y el minimo para texto grande es 3. */
  color: var(--brass-700);
}

.indice__t {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-md);
  line-height: 1.2;
}

.indice__d {
  display: block;
  max-width: 54ch;
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--text-soft);
}

.indice__p {
  font-family: var(--font-display);
  font-size: var(--t-md);
  white-space: nowrap;
}

.indice__p span {
  font-family: var(--font-text);
  font-size: var(--t-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.indice__go {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--brass-500);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--t-mid) var(--out-quart),
              transform var(--t-mid) var(--out-quart);
}

.indice__a:hover .indice__go,
.indice__a:focus-visible .indice__go { opacity: 1; transform: none; }

@media (max-width: 759px) {
  .indice__a {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: var(--s-3);
    /* En una columna la fila crece y el numero se quedaba flotando a
       media altura en vez de marcar el principio. */
    align-items: start;
  }
  .indice__p { grid-column: 2; justify-self: start; }
  .indice__go { display: none; }
}

/* --- Cabecera de servicio: titular a la izquierda, entradilla a la derecha */

.serv-cab { display: grid; gap: var(--s-5); }

@media (min-width: 900px) {
  .serv-cab { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
}

.serv-cab__lado p {
  max-width: 56ch;
  margin: 0 0 var(--s-4);
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--text-soft);
}

.serv-cab__lado p:last-child { margin-bottom: 0; }

/* El titular es corto y la entradilla larga, asi que la columna izquierda se
   quedaba con un palmo de blanco debajo. El precio y el boton lo ocupan, y
   ademas caen justo donde va la vista despues de leer el titulo. */
.serv-cab__precio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  margin-top: var(--s-6);
}
.serv-cab--claro .serv-cab__lado p { color: var(--stone-300); }

/* --- Lista con guion de laton, en una o dos columnas --------------------- */

.chulo { margin: var(--s-5) 0 0; padding: 0; list-style: none; }

.chulo li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--text-soft);
}

.chulo li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.7rem;
  height: 1px;
  background: var(--brass-500);
}

.chulo--claro li { color: var(--stone-300); }
.chulo--claro li::before { background: var(--brass-400); }

.chulo--dos { columns: 2; column-gap: var(--s-7); }
.chulo--dos li { break-inside: avoid; }
@media (max-width: 759px) { .chulo--dos { columns: 1; } }

/* El accesible lleva visto en vez de guion: son medidas de seguridad, y un
   visto dice «esto esta cubierto» mucho mejor que una raya. */
.chulo--tick li::before {
  content: "";
  top: 0.32em;
  width: 0.62rem;
  height: 0.34rem;
  background: none;
  border-left: 1.6px solid var(--brass-500);
  border-bottom: 1.6px solid var(--brass-500);
  transform: rotate(-45deg);
}

/* --- Pie de servicio: precio y boton ------------------------------------- */

.serv-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  margin-top: var(--s-6);
}

.price--claro .price__fig { color: var(--stone-50); }
.price--claro .price__from { color: var(--brass-400); }

/* --- 01. El trabajo estrella, con su antes y despues --------------------- */

.serv-prueba { display: grid; gap: var(--s-6); margin-top: var(--s-7); }

@media (min-width: 1000px) {
  .serv-prueba { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s-8); }
}

.serv-prueba__ficha {
  align-self: start;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}

.serv-prueba__t {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.serv-prueba__ficha .chulo { margin-top: var(--s-4); }

/* --- 02. El producto principal: las fases en linea ----------------------- */

.fases {
  display: grid;
  gap: var(--s-4) var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  margin: var(--s-7) 0 0;
  padding: var(--s-6) 0 0;
  border-top: 1px solid oklch(0.885 0.044 82 / 0.22);
  list-style: none;
  counter-reset: fase;
}

.fases__it { display: flex; flex-direction: column; gap: var(--s-2); }

.fases__n {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1;
  color: var(--brass-400);
}

.fases__t {
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--stone-100);
}

.serv-banda__pie {
  display: grid;
  gap: var(--s-5) var(--s-8);
  align-items: start;
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid oklch(0.885 0.044 82 / 0.22);
}

@media (min-width: 900px) {
  .serv-banda__pie { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .serv-banda__pie .chulo { margin-top: 0; }
}

/* --- 03. El de lujo, a toda pagina --------------------------------------- */

.escaparate {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 78svh, 820px);
  padding-block: var(--bay-wide, var(--s-9));
  background: var(--wine-900);
  overflow: hidden;
}

.escaparate__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
}

/* Un solo velo, mas cerrado por la izquierda, que es donde cae el texto. */
.escaparate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom,
      oklch(0.185 0.055 18 / 0.30) 0%,
      oklch(0.185 0.055 18 / 0.10) 40%,
      oklch(0.185 0.055 18 / 0.50) 100%),
    linear-gradient(100deg,
      oklch(0.185 0.055 18 / 0.88) 0%,
      oklch(0.185 0.055 18 / 0.58) 52%,
      oklch(0.185 0.055 18 / 0.12) 88%);
}

.escaparate__caja { max-width: 40rem; }

.escaparate__t { color: var(--stone-50); margin-top: var(--s-3); }

.escaparate__texto p {
  max-width: 46ch;
  margin: var(--s-5) 0 0;
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--stone-200);
}

/* --- 04. La tarifa de montaje -------------------------------------------- */

.tarifa { display: grid; gap: var(--s-6); margin-top: var(--s-7); }

@media (min-width: 1000px) {
  .tarifa { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-8); }
}

.tarifa__oferta {
  align-self: start;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--brass-300);
  border-radius: var(--r-md);
}

.tarifa__sello {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.4rem 0.85rem;
  background: var(--brass-200);
  border-radius: 999px;
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wine-800);
}

.tarifa__sello svg { width: 1.05rem; height: 1.05rem; flex: none; }

.tarifa__lede {
  margin: var(--s-4) 0 0;
  font-size: var(--t-md);
  line-height: 1.55;
}

.tarifa__cierre,
.tarifa__visita {
  margin: var(--s-4) 0 0;
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--text-soft);
}

.tarifa__visita { font-weight: 600; color: var(--wine-700); }

.tarifa__oferta .btn { margin-top: var(--s-5); }

.tarifa__tabla table {
  width: 100%;
  border-collapse: collapse;
}

.tarifa__tabla thead th {
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-mute);
  text-align: right;
}

.tarifa__tabla thead th:first-child { text-align: left; }

.tarifa__tabla tbody th {
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border-bottom: 1px solid var(--hairline-soft);
  font-weight: 500;
  font-size: var(--t-sm);
  line-height: 1.45;
  text-align: left;
}

.tarifa__tabla td {
  padding: var(--s-4) 0 var(--s-4) var(--s-4);
  border-bottom: 1px solid var(--hairline-soft);
  text-align: right;
  white-space: nowrap;
}

.tarifa__con {
  font-family: var(--font-display);
  font-size: var(--t-md);
}

.tarifa__sin {
  font-size: var(--t-xs);
  color: var(--text-soft);
}

.tarifa__letra {
  margin: var(--s-5) 0 0;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--text-soft);
}

/* A 560 px la tabla de tres columnas ya no cabe sin apretar los precios
   contra el nombre, asi que cada producto pasa a ser una ficha de dos
   lineas. Es mas alto, pero se lee. */
@media (max-width: 559px) {
  .tarifa__tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tarifa__tabla tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 var(--s-4);
    align-items: baseline;
    /* La raya va en la fila, no en las celdas: con una por celda salian dos
       segmentos cortos con un hueco en medio, que parecia un error. */
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--hairline-soft);
  }
  .tarifa__tabla tbody th { grid-column: 1 / -1; border-bottom: 0; padding: var(--s-4) 0 var(--s-2); }
  .tarifa__tabla td { padding: 0; border-bottom: 0; text-align: left; }
  .tarifa__tabla .tarifa__sin {
    text-align: right;
    /* Las celdas van en nowrap para que un precio no se parta, pero
       esta columna tambien lleva texto («Modelos y precios en tienda»)
       y en nowrap medía 359 px dentro de una caja de 280. */
    white-space: normal;
  }
}

/* --- 05. El accesible ----------------------------------------------------- */

.calma { display: grid; gap: var(--s-6); align-items: center; }

@media (min-width: 900px) {
  .calma { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: var(--s-8); }
}

.calma__pic { margin: 0; }

.calma__pic img {
  width: 100%;
  border-radius: var(--r-sm);
  box-shadow: var(--lift-2);
}

/* --- Fichas de datos de las páginas legales -------------------------------
   Etiqueta y valor, no lista de guiones. Quien entra en un aviso legal viene
   a comprobar un dato concreto, así que se alinean en dos columnas y cada
   línea se separa con un filete.
   -------------------------------------------------------------------------- */

.prose ul.datos {
  gap: 0;
  margin-top: 1.4em;
  border-top: 1px solid var(--hairline);
}

.prose ul.datos li {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: 0.15em 1.6rem;
  align-items: baseline;
  padding: 0.75em 0;
  border-bottom: 1px solid var(--hairline-soft);
}

/* El guión de la lista normal sobra aquí: la etiqueta ya abre la línea. */
.prose ul.datos li::before { content: none; }

.prose ul.datos li > b {
  font-weight: 500;
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  color: var(--text-soft);
}

/* En móvil no caben dos columnas: el valor pasa debajo de su etiqueta. */
@media (max-width: 34rem) {
  .prose ul.datos li { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PROMOCIONES
   El precio manda. Cada oferta se pinta segun lo que es, y ninguna se parece
   a la anterior: si las cuatro fueran iguales tendriamos otra vez la tabla de
   precios de la que veniamos.
   ========================================================================== */

/* --- La cifra ------------------------------------------------------------
   En Prata y grande. El «Desde» va arriba y pequeño porque es una condición,
   no parte del número, y la promesa debajo para que el ojo no se quede solo
   en el euro. */

.cifra { display: grid; gap: 0.1em; margin-top: var(--s-5); }

.cifra__de {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-700);
}

.cifra__n {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4rem);
  line-height: 0.95;
  color: var(--wine-700);
}

.cifra__que {
  font-size: var(--t-sm);
  color: var(--text-soft);
}

.cifra--claro .cifra__de { color: var(--brass-400); }
.cifra--claro .cifra__n { color: var(--stone-50); }
.cifra--claro .cifra__que { color: var(--stone-300); }

/* --- Qué entra ----------------------------------------------------------- */

.incluye { margin-top: var(--s-6); }

.incluye__t {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-mute);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--hairline);
}

.incluye__l { display: grid; gap: 0.55em; margin-top: var(--s-4); }

.incluye__l li { position: relative; padding-left: 1.35em; }

.incluye__l li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.55em;
  height: 1px;
  background: var(--brass-500);
}

/* En la jornada la lista va en fila: hay sitio y así el pie no crece a lo alto. */
.incluye--fila .incluye__l { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
@media (max-width: 539px) { .incluye--fila .incluye__l { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   PROMOCIONES

   La página reúne tres cosas: los packs cerrados, los tres planes de reforma
   completa y el montaje de regalo de la tienda.

   Antes cada uno de los cuatro packs tenía su propia maqueta —foto a sangre
   a la izquierda, la misma girada, banda burdeos, línea de tiempo— y ocupaba
   entre mil y mil trescientos píxeles. Cuatro ofertas que compiten entre sí y
   que no llegaban a verse dos juntas ni en un monitor de 1440: imposible
   compararlas. Ahora las cuatro fichas son iguales y van de dos en dos.
   -------------------------------------------------------------------------- */

/* --- El índice de la página ----------------------------------------------

   Lo primero que se ve tras el cabezal. No es decoración: es lo que permite
   saber de qué va una página larga sin recorrerla entera, y llegar de un
   salto al bloque que se buscaba. */

.indice { border-top: 1px solid var(--hairline); }

.indice__row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.15rem var(--s-4);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--hairline);
  transition: background-color var(--t-mid) var(--out-quart);
}

.indice__row:hover { background: var(--stone-100); }

.indice__n {
  grid-column: 1;
  grid-row: 1 / span 3;
  font-family: var(--font-display);
  font-size: var(--t-md);
  line-height: 1.15;
  color: var(--brass-500);
  font-variant-numeric: lining-nums;
}

.indice__t {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: -0.014em;
}

.indice__d {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0.15rem;
  font-size: var(--t-sm);
  color: var(--text-soft);
  max-width: 58ch;
}

.indice__de {
  grid-column: 2;
  grid-row: 3;
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--wine-700);
}

.indice__go { display: none; }

@media (min-width: 860px) {
  .indice__row {
    grid-template-columns: 3.5rem minmax(0, 1fr) auto 2.75rem;
    align-items: center;
    gap: 0.2rem var(--s-6);
    padding-block: var(--s-6);
  }

  .indice__n  { grid-row: 1 / span 2; align-self: center; }
  .indice__de { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; text-align: right; }

  .indice__go {
    grid-column: 4;
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    color: var(--wine-700);
    transition: border-color var(--t-fast) var(--out-quart),
                transform var(--t-mid) var(--out-quart);
  }

  .indice__go svg { width: 1.05rem; height: 1.05rem; }
  .indice__row:hover .indice__go { border-color: var(--brass-400); transform: translateX(3px); }
}

/* --- Los cuatro packs ----------------------------------------------------

   Dos por fila. Las dos de arriba llevan foto y las dos de abajo, placa: los
   packs 03 y 04 no tienen fotografía que valga —del accesible no hay obra
   entregada y la del 04 se retiró porque estaba tomada antes de la limpieza—
   y dejar el hueco vacío se lee como error. La placa usa el mismo recorte
   4/3 que la foto, así que las cuatro fichas siguen alineadas. */

.packs { display: grid; gap: var(--s-5); align-items: stretch; }

@media (min-width: 760px) {
  .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
}

.pack {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  transition: border-color var(--t-mid) var(--out-quart),
              box-shadow var(--t-mid) var(--out-quart);
}

.pack:hover { border-color: var(--brass-400); box-shadow: var(--lift-2); }

.pack__pic { margin: 0; }

.pack__pic img,
.pack__placa {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.pack__placa {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-5);
}

/* Sobre la ficha burdeos, la placa va un punto más oscura: si fuese del mismo
   color no se leería como placa, sino como un margen enorme. */
.pack__placa--wine { background: var(--wine-900); color: var(--stone-300); }

.pack__placa--hora {
  background: var(--stone-100);
  border-bottom: 1px solid var(--hairline);
}

.pack__ico {
  width: 2.1rem;
  height: 2.1rem;
  stroke: var(--brass-400);
  fill: none;
  margin-bottom: auto;
}

.pack__placa-t {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  line-height: 1.05;
  letter-spacing: var(--track-tight);
  color: var(--stone-50);
}

.pack__placa--hora .pack__placa-t { color: var(--wine-700); }

.pack__placa-d { font-size: var(--t-sm); max-width: 30ch; }
.pack__placa--hora .pack__placa-d { color: var(--text-soft); }

.pack__in {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--s-6) var(--s-5) var(--s-5);
}

.pack__n {
  font-family: var(--font-display);
  font-size: var(--t-md);
  line-height: 1;
  color: var(--brass-500);
  margin-bottom: var(--s-3);
  font-variant-numeric: lining-nums;
}

.pack__t {
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-xl);
  line-height: 1.08;
  letter-spacing: var(--track-tight);
}

.pack__d { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--text-soft); }

.pack .incluye { margin-top: var(--s-5); }
.pack .incluye__l { font-size: var(--t-sm); }

.pack__act { margin-top: auto; padding-top: var(--s-6); }

/* La ficha del baño accesible, en burdeos. Es la única sin fotografía de obra
   entregada y la única cuyo argumento es la seguridad, no el acabado. */
.pack--wine {
  background: var(--wine-800);
  border-color: var(--wine-800);
  color: var(--stone-200);
}

.pack--wine:hover { border-color: var(--brass-500); }
.pack--wine .pack__n { color: var(--brass-400); }
.pack--wine .pack__t { color: var(--stone-50); }
.pack--wine .pack__d { color: var(--stone-300); }
.pack--wine .incluye__t { color: var(--brass-300); border-bottom-color: oklch(0.885 0.044 82 / 0.24); }
.pack--wine .incluye__l { color: var(--stone-300); }
.pack--wine .incluye__l li::before { background: var(--brass-400); }
.pack--wine .cifra__que { color: var(--stone-300); }

/* --- La jornada del pack 04 ----------------------------------------------

   Seiscientos euros son un día de trabajo, y la única forma de que eso se
   entienda es contar el día. Va debajo de la rejilla, con su propio titular:
   es el detalle de un pack, no un quinto pack. */

.jornada-cab {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--hairline);
}

.jornada-cab__t {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: 1.15;
}

.jornada-cab__d {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--text-soft);
  max-width: 54ch;
}

.jornada {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--hairline);
}

/* Con titular propio el filete ya está arriba: repetirlo partiría el bloque
   en dos justo donde tiene que leerse seguido. */
.jornada-cab + .jornada { margin-top: var(--s-6); padding-top: 0; border-top: 0; }

@media (min-width: 820px) { .jornada { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); } }

.jornada__it { display: grid; gap: 0.35em; align-content: start; }

.jornada__h {
  font-family: var(--font-display);
  font-size: var(--t-md);
  color: var(--brass-700);
}

.jornada__t { font-weight: 600; }
.jornada__d { font-size: var(--t-sm); color: var(--text-soft); }

/* --- Los planes: el desglose, dentro de la ficha -------------------------

   Entre los tres planes son cuarenta y cinco partidas. Enseñarlas todas de
   golpe convierte la sección en una lista interminable y esconde justo lo
   que hay que comparar, que es el resumen. Van dentro de un desplegable por
   ficha: está entero, pero solo lo baja quien lo pide. */

.tier__mas {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline-soft);
}

.tier__mas > summary {
  display: flex;
  align-items: center;
  gap: 0.55em;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--wine-700);
  transition: color var(--t-fast) var(--out-quart);
}

.tier__mas > summary::-webkit-details-marker { display: none; }

.tier__mas > summary::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-0.14em) rotate(45deg);
  transition: transform var(--t-mid) var(--out-quart);
}

.tier__mas[open] > summary::after { transform: translateY(0.06em) rotate(-135deg); }

.tier__mas > summary:hover { color: var(--wine-500); }

.tier__mas > summary:focus-visible {
  outline: 2px solid var(--brass-500);
  outline-offset: 4px;
}

.tier__det { margin-top: var(--s-5); }
.tier__det .plan__bloque + .plan__bloque { margin-top: var(--s-5); }

.tier__hereda {
  margin-bottom: var(--s-5);
  font-size: var(--t-sm);
  color: var(--text-soft);
}

.tier--lead .tier__mas { border-top-color: oklch(1 0 0 / 0.16); }
.tier--lead .tier__mas > summary { color: var(--brass-300); }
.tier--lead .tier__mas > summary:hover { color: var(--brass-400); }
.tier--lead .tier__hereda { color: var(--stone-300); }
.tier--lead .plan__bt { color: var(--brass-300); border-bottom-color: oklch(1 0 0 / 0.16); }
.tier--lead .plan__l { color: var(--stone-300); }
.tier--lead .plan__l li::before { border-left-color: var(--brass-400); border-bottom-color: var(--brass-400); }

/* Titular de la tabla comparativa, que no es una sección aparte sino el
   cierre de los tres planes. */
.vistazo { margin-top: var(--s-9); }

.vistazo__t {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: 1.15;
}

.vistazo__d {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--text-soft);
  max-width: 58ch;
}

/* --- El montaje de regalo ------------------------------------------------

   En servicios esto es una tarifa y se presenta como tabla. Aquí es una
   oferta, y lo que hay que entender de un vistazo es que el número de la
   derecha es el precio del producto y que el montaje es lo que no se cobra.
   Por eso va en burdeos y en lista, no en cuadrícula. */

.monta { display: grid; gap: var(--s-7); margin-top: var(--s-6); }

@media (min-width: 900px) {
  .monta {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: var(--s-9);
    align-items: start;
  }
}

.monta__l { border-top: 1px solid oklch(0.885 0.044 82 / 0.24); }

.monta__it {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem var(--s-5);
  padding-block: var(--s-4);
  border-bottom: 1px solid oklch(0.885 0.044 82 / 0.24);
}

.monta__q {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--t-md);
  color: var(--stone-100);
}

.monta__p {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  text-align: right;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1.1;
  white-space: nowrap;
  color: var(--stone-50);
}

.monta__de {
  display: block;
  font-family: var(--font-text);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-400);
}

.monta__ver {
  font-family: var(--font-text);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-300);
}

.monta__sin {
  grid-column: 1;
  grid-row: 2;
  font-size: var(--t-xs);
  color: var(--stone-300);
}

.monta__lado { display: grid; gap: var(--s-4); align-content: start; }
.monta__cierre { font-size: var(--t-sm); color: var(--stone-300); }
.monta__visita { font-weight: 600; color: var(--stone-50); }
.monta__lado .btn { justify-self: start; }

.monta__letra {
  margin-top: var(--s-7);
  max-width: 76ch;
  font-size: var(--t-xs);
  line-height: 1.65;
  color: var(--stone-300);
}

/* --- El método: plano, replanteo y entrega -------------------------------- */

.metodo { display: grid; gap: var(--s-8); margin-top: var(--s-8); }

/* El primer paso es el plano y manda: fila propia, imagen grande a la
   izquierda y el texto al lado. Los otros dos van debajo, a dos columnas.
   Recortado a un tercio de pantalla las cotas no se leen, y las cotas son
   justo lo que hay que ver. */
@media (min-width: 880px) {
  .metodo--plano .metodo__it { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
  .metodo--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); }
}

.metodo--dos { margin-top: var(--s-7); }

.metodo__it { display: grid; gap: var(--s-5); align-content: start; }

.metodo__pic { margin: 0; }

/* El plano lleva cotas y números pequeños: se muestra entero, sin recortar,
   sobre fondo claro. Recortarlo se comería justo lo que hay que leer. */
.metodo__pic img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface);
  border-radius: var(--r-sm);
  box-shadow: var(--lift-2);
}

/* El plano se ve entero: es un dibujo acotado, no una fotografia que
   pueda recortarse por donde sea. */
.metodo--plano .metodo__pic img { aspect-ratio: 11 / 10; object-fit: contain; padding: var(--s-4); }

.metodo__pie {
  margin-top: var(--s-3);
  font-size: var(--t-xs);
  letter-spacing: 0.01em;
  color: var(--text-soft);
}

.metodo__txt .metodo__n {
  font-family: var(--font-display);
  font-size: var(--t-md);
  line-height: 1;
  color: var(--brass-700);
}

.metodo__t { margin-top: var(--s-2); font-size: var(--t-md); }
.metodo__txt p { margin-top: var(--s-3); color: var(--text-soft); }

.metodo__regalo { max-width: 44rem; margin: var(--s-8) auto 0; }

/* --- Condiciones en claro -------------------------------------------------
   Seis puntos con su titulillo. Antes era una lista de guiones de cinco
   líneas que nadie iba a leer; con encabezado se puede buscar el que
   interesa. */

.clara { display: grid; gap: var(--s-6) var(--s-7); margin-top: var(--s-7); }

@media (min-width: 700px) { .clara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .clara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.clara__it { padding-top: var(--s-4); border-top: 1px solid var(--hairline); }

.clara__t {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.clara__d { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--text-soft); }

/* ==========================================================================
   PLANES
   ========================================================================== */

/* --- Tabla de un vistazo --------------------------------------------------
   Cuatro columnas no caben en un movil. La tabla se desplaza dentro de su
   caja, nunca la pagina, y la columna de partidas se queda pegada a la
   izquierda: desplazandose sin ella te quedas mirando tres celdas sueltas
   sin saber a que fila pertenecen. */

/* En pantalla ancha la tabla cabe entera y el aviso sobra. Debajo de 900 hay
   que decirlo: una tabla que se desplaza sin avisar parece una tabla
   cortada. */
.tabla__desliza {
  display: none;
  margin-top: var(--s-6);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-700);
}

@media (max-width: 899px) {
  .tabla__desliza { display: block; }
  .tabla-envuelta { margin-top: var(--s-4); }
}

.tabla-envuelta {
  margin-top: var(--s-7);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-top: 1px solid var(--hairline);
}

.tabla {
  width: 100%;
  min-width: 48rem;
  border-collapse: collapse;
  text-align: left;
}

.tabla thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  background: var(--bg);
  border-bottom: 1px solid var(--ink-900);
  vertical-align: bottom;
}

.tabla__plan {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-md);
  line-height: 1.15;
}

.tabla__precio {
  display: block;
  margin-top: 0.2em;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-700);
}

.tabla tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 12rem;
  padding: var(--s-4) var(--s-5) var(--s-4) 0;
  background: var(--bg);
  font-size: var(--t-sm);
  font-weight: 600;
  vertical-align: top;
}

.tabla td {
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  font-size: var(--t-sm);
  color: var(--text-soft);
  vertical-align: top;
}

.tabla tbody tr { border-bottom: 1px solid var(--hairline-soft); }

/* La columna del plan mas elegido se marca en toda su altura. */
.tabla thead th:nth-child(3),
.tabla tbody td:nth-child(3) { background: var(--stone-100); padding-left: var(--s-4); }

.tabla__no { color: var(--text-mute); }

.tabla__leyenda {
  margin-top: var(--s-4);
  font-size: var(--t-xs);
  color: var(--text-soft);
}

/* --- Cada plan, partida por partida --------------------------------------- */

.plan__cab { display: grid; gap: var(--s-6); align-items: end; }

@media (min-width: 880px) {
  .plan__cab { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-8); }
  .plan__lado { justify-self: end; text-align: right; }
  .plan__lado .cifra { justify-items: end; }
}

.plan__lede { margin-top: var(--s-4); max-width: 52ch; color: var(--text-soft); }
.plan__lado .btn { margin-top: var(--s-5); }

.plan__hereda {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  font-size: var(--t-sm);
  color: var(--text-soft);
}

.plan__rejilla { display: grid; gap: var(--s-6) var(--s-7); margin-top: var(--s-6); }

@media (min-width: 640px) { .plan__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .plan__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.plan__bloque { break-inside: avoid; }

.plan__bt {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-700);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--hairline);
}

.plan__l { display: grid; gap: 0.5em; margin-top: var(--s-4); }

.plan__l li { position: relative; padding-left: 1.4em; font-size: var(--t-sm); }

/* Visto: lo que sigue es lo que entra en el precio. */
.plan__l li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.6rem;
  height: 0.33rem;
  border-left: 1.6px solid var(--brass-500);
  border-bottom: 1.6px solid var(--brass-500);
  transform: rotate(-45deg);
}

/* Lo que NO entra se dice con el mismo cuidado que lo que si. */
.plan__salvo {
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--text-soft);
}

.on-stone .plan__salvo { background: var(--bg); }

/* --- La vuelta al cambio de bañera, bajo la escalera de la portada -------- */

.planes__vuelta {
  max-width: 46rem;
  margin: var(--s-6) auto 0;
  text-align: center;
  font-size: var(--t-sm);
  color: var(--text-soft);
}

.planes__vuelta a { color: var(--wine-600); text-underline-offset: 0.2em; }

/* La exclusión también en la tarjeta de portada: es la mitad de la promesa. */
.tier__salvo {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline-soft);
  font-size: var(--t-xs);
  color: var(--text-soft);
}

.tier--lead .tier__salvo { border-top-color: oklch(1 0 0 / 0.16); color: var(--stone-300); }

/* El enlace a los tres planes, junto al botón de la reforma integral. */
.serv-banda__act { display: grid; gap: var(--s-4); justify-items: start; }

.serv-banda__mas {
  font-size: var(--t-sm);
  color: var(--stone-100);
  text-decoration: underline;
  text-decoration-color: var(--brass-500);
  text-underline-offset: 0.25em;
}

.serv-banda__mas:hover { text-decoration-color: var(--stone-100); }

/* --------------------------------------------------------------------------
   Carril en móvil

   En un teléfono cada rejilla se convierte en una columna y la página se
   dispara: el catálogo medía treinta y cuatro pantallas y la galería treinta.
   Aquí las rejillas marcadas con data-carril pasan a carril horizontal. No se
   esconde nada, se ve lo mismo pero de lado.

   Solo por debajo de 760 px. De ahí para arriba caben varias fichas por fila
   y el carril sobraría.

   Esta mecánica no se comparte con la del carril de opiniones, que es carril
   a cualquier ancho: overflow-x recorta también en vertical, y en escritorio
   hay tarjetas que sobresalen a propósito de su fila. Lo único común es el
   difuminado del borde, que sí está compartido más abajo.
   -------------------------------------------------------------------------- */

@media (max-width: 759px) {
  /* Doble atributo para ganarle en peso a la clase de cada rejilla sin
     recurrir a !important. */
  [data-carril][data-carril] {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: var(--carril-ancho, minmax(76%, 1fr));
    align-items: stretch;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Aire abajo para que no se recorte la sombra de las fichas al pasar. */
    padding-bottom: 0.25rem;
  }

  [data-carril]::-webkit-scrollbar { display: none; }

  [data-carril] > * { scroll-snap-align: start; }

  /* La rejilla de la portada baja la fila central medio paso en escritorio.
     En carril eso descuadra la fila, así que se desactiva. */
  [data-carril] > * { margin-top: 0; }

  .tiers[data-carril] { padding-block: 0; }

  /* Anchos. El del catálogo enseña una ficha y el pico de la siguiente, que
     es lo que hace entender que hay más sin tener que explicarlo. */
  .prods       { --carril-ancho: minmax(74%, 1fr); }
  .grid-shots  { --carril-ancho: minmax(70%, 1fr); }
  .works       { --carril-ancho: minmax(46%, 1fr); }
  .tiers       { --carril-ancho: minmax(88%, 1fr); }
  .pelis       { --carril-ancho: minmax(78%, 1fr); }
  .dichos      { --carril-ancho: minmax(82%, 1fr); }
  .tecnica     { --carril-ancho: minmax(80%, 1fr); }
  .marcas      { --carril-ancho: minmax(74%, 1fr); }
  .clara       { --carril-ancho: minmax(80%, 1fr); }
  .packs       { --carril-ancho: minmax(84%, 1fr); }
  .jornada     { --carril-ancho: minmax(78%, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  [data-carril] { scroll-behavior: auto; }
}

/* --- El mando: dos flechas y el contador ---------------------------------

   Lo monta main.js y se esconde solo cuando no hay nada que desplazar, que
   es lo que ocurre en escritorio. Sin JavaScript no aparece y el carril se
   arrastra con el dedo, que es como se usa de todas formas en un móvil. */

.rail-nav--carril {
  justify-content: center;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-4);
}

.carril__n {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
  text-align: center;
}

@media (min-width: 760px) {
  .rail-nav--carril:not(.rail-nav--siempre) { display: none; }
}

/* --- La tira de miniaturas bajo cada antes y después ----------------------

   El resto de fotos del baño terminado, en pequeño. Es carril a cualquier
   ancho, no solo en móvil como las rejillas de data-carril: seis miniaturas
   de 7,5 rem no caben en media columna ni en un monitor. Por eso el mando se
   queda puesto en escritorio (data-carril-siempre en el HTML).

   El ancho va en --carril-ancho y no en grid-auto-columns a secas para que
   la regla de móvil, que lee esa variable, calcule exactamente lo mismo y no
   estire las miniaturas al 76 % de la pantalla.
   -------------------------------------------------------------------------- */

.tira {
  --carril-ancho: 7.5rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--carril-ancho);
  gap: var(--s-2);
  margin-top: var(--s-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

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

.tira > * { scroll-snap-align: start; }

.tira img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--stone-300);
}

/* Un mando más pequeño: va debajo de una tira de miniaturas, no de una
   sección entera. */
.rail-nav--siempre { margin-top: var(--s-3); }
.rail-nav--siempre .rail-btn { width: 2.25rem; height: 2.25rem; }
.rail-nav--siempre .rail-btn svg { width: 0.9rem; height: 0.9rem; }

@media (prefers-reduced-motion: reduce) { .tira { scroll-behavior: auto; } }