/* ============================================================
   views.css — Secciones de portada, vitrina 3D, catálogo,
   ficha de producto, carrito, checkout y páginas editoriales.
   ============================================================ */

/* ============================================================
   HERO — "El telar de luz"
   ============================================================ */
.hero {
  position: relative;
  min-height: calc(100dvh - var(--h-anuncio));
  margin-top: calc(var(--h-header) * -1);
  display: grid;
  align-items: center;
  background: var(--g-noche);
  color: var(--c-lino);
  overflow: hidden;
  isolation: isolate;
}
/* Lienzo de hilos animados (fondo generativo) */
.hero__telar {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .85;
}
/* Halo cálido central */
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 130vmin; height: 130vmin;
  right: -22vmin; top: 50%;
  translate: 0 -50%;
  background: radial-gradient(closest-side, rgba(201, 163, 102, .2), transparent 70%);
  pointer-events: none;
}

.hero__int {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding: calc(var(--h-header) + var(--s-8)) var(--pad-x) var(--s-9);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: var(--s-8);
}

.hero__txt { max-width: 640px; }
.hero__eyebrow { margin-bottom: var(--s-5); color: var(--c-laton-claro); }
.hero__titulo {
  font-family: var(--f-display);
  font-size: var(--t-3xl);
  font-weight: 300;
  line-height: .96;
  letter-spacing: -0.02em;
}
.hero__titulo em {
  font-style: italic;
  background: linear-gradient(100deg, #F0DCB4 0%, #C9A366 40%, #EFD9AE 62%, #B98B4E 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brillo-metal 9s linear infinite alternate;
}
.hero__plomo {
  margin-top: var(--s-5);
  font-size: var(--t-md);
  font-weight: 300;
  line-height: 1.68;
  color: rgba(247, 243, 238, .68);
  max-width: 46ch;
}
.hero__acciones {
  margin-top: var(--s-7);
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.hero__datos {
  margin-top: var(--s-8);
  display: flex;
  gap: var(--s-7);
  flex-wrap: wrap;
  padding-top: var(--s-5);
  border-top: 1px solid rgba(247, 243, 238, .12);
}
.hero__dato b {
  display: block;
  font-family: var(--f-display);
  font-size: 1.85rem;
  font-weight: 300;
  color: var(--c-laton-claro);
  line-height: 1.1;
}
.hero__dato small {
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(247, 243, 238, .45);
}

/* Escenario 3D de la pieza protagonista */
.hero__escena {
  position: relative;
  aspect-ratio: 1 / 1.06;
  perspective: 1200px;
  perspective-origin: 50% 45%;
  display: grid;
  place-items: center;
}
.hero__pieza {
  position: relative;
  width: 82%;
  transform-style: preserve-3d;
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
  transition: transform .5s var(--e-suave);
  will-change: transform;
}
.hero__pieza svg { width: 100%; overflow: visible; filter: drop-shadow(0 30px 50px rgba(0,0,0,.5)); }

/* Fotografía real de la pieza más vendida, enmarcada.
   Antes aquí iba una imagen de archivo generada por ordenador; ahora
   es una pieza del catálogo y se puede pulsar para abrir su ficha. */
.hero__foto {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(231, 201, 154, .28);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55);
  background: var(--c-noche-2);
}
.hero__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--g-velo);
  opacity: .85;
  pointer-events: none;
}
.hero__foto-pie {
  position: absolute;
  left: var(--s-5); right: var(--s-5); bottom: var(--s-4);
  z-index: 2;
  display: grid;
  gap: 2px;
  text-align: left;
}
.hero__foto-pie b {
  font-family: var(--f-display);
  font-size: 1.24rem;
  font-weight: 400;
  color: var(--c-lino);
  line-height: 1.15;
}
.hero__foto-pie small {
  font-size: var(--t-sm);
  color: var(--c-laton-claro);
  font-variant-numeric: tabular-nums;
}
/* Banner de la portada: las fotografías de las piezas marcadas como
   «Aparece en la portada», apiladas en la misma celda de la rejilla.
   Al ocupar todas la misma celda, el contenedor toma la altura de la
   mayor y el relevo es un fundido limpio, sin saltos de maquetación.
   `visibility` va con retardo para que la que sale alcance a fundirse
   antes de dejar de existir para el ratón y para el lector de pantalla. */
.hero__banner {
  display: grid;
  grid-template-areas: "banner";
}
.hero__slide {
  grid-area: banner;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s var(--e-suave), visibility 0s linear .9s;
}
.hero__slide.is-activo {
  opacity: 1;
  visibility: visible;
  transition: opacity .9s var(--e-suave), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}

.hero__pieza-aro {
  position: absolute;
  inset: -8%;
  border: 1px solid rgba(231, 201, 154, .18);
  border-radius: 50%;
  transform: translateZ(-70px) rotateX(74deg);
}
.hero__pieza-aro:nth-of-type(2) { inset: -20%; transform: translateZ(-110px) rotateX(74deg); opacity: .55; }

/* Partículas de polvo dorado */
.hero__polvo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero__polvo i {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: var(--c-laton-claro);
  opacity: 0;
  animation: subir-polvo linear infinite;
}
@keyframes subir-polvo {
  0%   { opacity: 0; transform: translateY(0) scale(.6); }
  12%  { opacity: .7; }
  85%  { opacity: .35; }
  100% { opacity: 0; transform: translateY(-70vh) scale(1.3); }
}

.hero__scroll {
  position: absolute;
  bottom: var(--s-5); left: 50%;
  translate: -50% 0;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  font-size: 9px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(247, 243, 238, .4);
}
.hero__scroll i {
  display: block;
  width: 1px; height: 42px;
  background: linear-gradient(180deg, rgba(231,201,154,.7), transparent);
  animation: descender 2.4s ease-in-out infinite;
}
@keyframes descender {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@media (max-width: 980px) {
  .hero__int { grid-template-columns: 1fr; text-align: center; }
  .hero__txt { max-width: none; margin-inline: auto; }
  .hero__plomo { margin-inline: auto; }
  .hero__acciones, .hero__datos, .hero__eyebrow { justify-content: center; }
  .hero__escena { order: -1; width: min(360px, 76vw); margin-inline: auto; }
  .hero__datos { justify-content: space-around; gap: var(--s-5); }
}
@media (max-width: 560px) {
  .hero { min-height: auto; }
  .hero__int { padding-bottom: var(--s-8); }
  .hero__scroll { display: none; }
}

/* Portada oscura de página interior: se desliza bajo la cabecera
   para que ésta pueda volverse clara sin perder contraste. */
.seccion--portada {
  margin-top: calc(var(--h-header) * -1);
  padding-top: calc(var(--h-header) + var(--seccion-y));
  padding-bottom: var(--seccion-y);
}

/* ============================================================
   Cinta de valores
   ============================================================ */
.cinta {
  border-block: 1px solid var(--c-borde);
  background: var(--c-lino-2);
  overflow: hidden;
  padding-block: var(--s-4);
}
.cinta__pista { display: flex; width: max-content; animation: marquesina 40s linear infinite; }
.cinta__grupo { display: flex; flex: none; }
.cinta__item {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding-inline: 2rem;
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 300;
  color: var(--c-humo);
  white-space: nowrap;
}
.cinta__item::after {
  content: "";
  width: 6px; height: 6px;
  background: var(--c-laton);
  transform: rotate(45deg);
  margin-left: 1.2rem;
}

/* ============================================================
   La Vitrina — carrusel 3D en cilindro
   ============================================================ */
/* El cilindro gira y sus caras laterales se salen del ancho de la
   pantalla. En el teléfono eso hacía que TODA la página se pudiera
   desplazar de lado (500 px de contenido en 375 de pantalla), con la
   cabecera y el pie descuadrados.

   Se recorta aquí, en la sección, y no en la escena: el efecto 3D
   vive en `.vitrina__escena` (perspective) y `.vitrina__cilindro`
   (preserve-3d), dos niveles más adentro, así que el carrusel sigue
   funcionando exactamente igual. `clip` en vez de `hidden` para no
   crear un contenedor de desplazamiento. */
.vitrina {
  position: relative;
  padding-block: var(--s-8);
  overflow-x: clip;
}
.vitrina__escena {
  position: relative;
  height: 460px;
  perspective: 1400px;
  perspective-origin: 50% 42%;
  cursor: grab;
  touch-action: pan-y;
}
.vitrina__escena:active { cursor: grabbing; }
.vitrina__cilindro {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(var(--gy, 0deg));
  transition: transform .9s var(--e-salida);
}
.vitrina__cilindro.arrastrando { transition: none; }
.vitrina__cara {
  position: absolute;
  top: 50%; left: 50%;
  width: 250px; height: 320px;
  margin: -160px 0 0 -125px;
  border-radius: var(--r-md);
  background: linear-gradient(168deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border: 1px solid rgba(231, 201, 154, .17);
  backdrop-filter: blur(3px);
  display: grid;
  /* minmax(0, 1fr) y no 1fr a secas.

     `1fr` es en realidad `minmax(auto, 1fr)`, y ese `auto` impide que
     la fila encoja por debajo del tamaño mínimo de su contenido. Con
     una fotografía vertical dentro, la fila se plantaba en los 270 px
     que pedía la imagen en vez de los 219 que quedaban libres: la
     tarjeta —que mide 320 px fijos— se abría por dentro y empujaba la
     leyenda fuera del marco. En el carrusel 3D eso se veía como un
     precio suelto flotando debajo de la vitrina, ya sobre la sección
     siguiente, porque `.vitrina` solo recorta en horizontal.

     Con minmax(0, ...) la fila puede encoger y la foto recorta por
     `object-fit: cover`, que es lo que se quería desde el principio. */
  grid-template-rows: minmax(0, 1fr) auto;
  padding: var(--s-4);
  transform-style: preserve-3d;
  transition: border-color var(--d-medio), background var(--d-medio);
}
.vitrina__cara:hover { border-color: rgba(231, 201, 154, .45); background: rgba(255,255,255,.08); }
.vitrina__cara svg { width: 100%; height: 100%; overflow: visible; }
/* La fotografía se ciñe al hueco igual que el dibujo generado. Sin
   esto solo estaba atado el <svg>, y las piezas con foto real —que hoy
   son todas— se salían. */
.vitrina__cara img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
  border-radius: var(--r-sm);
}
.vitrina__cara-pie {
  text-align: center;
  color: var(--c-lino);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(231, 201, 154, .14);
}
.vitrina__cara-pie b {
  display: block;
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 400;
}
.vitrina__cara-pie small { font-size: var(--t-xs); color: var(--c-laton-claro); font-variant-numeric: tabular-nums; }

/* Piso reflectante */
.vitrina__piso {
  position: absolute;
  left: 50%; bottom: 6%;
  translate: -50% 0;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201,163,102,.16), transparent 70%);
  transform: rotateX(78deg);
  pointer-events: none;
}
.vitrina__ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.vitrina__ctrl button {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(231, 201, 154, .35);
  border-radius: 50%;
  color: var(--c-laton-claro);
  transition: all var(--d-rapido);
}
.vitrina__ctrl button:hover { background: rgba(231, 201, 154, .13); transform: scale(1.06); }
.vitrina__ctrl button svg { width: 18px; height: 18px; }
.vitrina__pista {
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(247, 243, 238, .38);
}
@media (max-width: 720px) {
  .vitrina__escena { height: 380px; }
  .vitrina__cara { width: 190px; height: 250px; margin: -125px 0 0 -95px; }
  .vitrina__piso { width: 360px; height: 360px; }
}

/* ============================================================
   El Atelier — proceso con visual pegajoso
   ============================================================ */
.atelier { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: start; }
.atelier__visual {
  position: sticky;
  top: calc(var(--h-header) + var(--s-6));
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  background: radial-gradient(circle at 50% 42%, var(--c-nube), var(--c-lino-2) 68%);
  border: 1px solid var(--c-borde);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.atelier__capa {
  position: absolute;
  inset: 8%;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.86) rotate(-6deg);
  transition: opacity var(--d-lento) var(--e-suave), transform var(--d-cine) var(--e-salida);
}
.atelier__capa.is-activo { opacity: 1; transform: none; }
.atelier__capa svg { width: 100%; height: 100%; overflow: visible; }

/* Con fotografía real la capa va a sangre: el recuadro ya tiene esquinas
   redondeadas y overflow oculto, así que la imagen las hereda sola. El
   giro de entrada se suaviza —en un dibujo generado queda bien, en una
   fotografía parece un fallo—. */
.atelier__capa--foto { inset: 0; transform: scale(1.04); }
.atelier__capa--foto.is-activo { transform: none; }
.atelier__capa--foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.atelier__pasos { display: grid; gap: var(--s-6); }
.atelier__paso {
  padding: var(--s-6);
  border-left: 1px solid var(--c-borde);
  transition: border-color var(--d-lento), opacity var(--d-lento);
  opacity: .42;
}
.atelier__paso.is-activo { border-left-color: var(--c-laton); opacity: 1; }
.atelier__paso-num {
  font-family: var(--f-display);
  font-size: 2.6rem;
  font-weight: 300;
  color: var(--c-borde-fuerte);
  line-height: 1;
  transition: color var(--d-lento);
}
.atelier__paso.is-activo .atelier__paso-num { color: var(--c-laton); }
.atelier__paso h3 { font-size: var(--t-lg); margin-block: var(--s-3) var(--s-2); }
.atelier__paso p { color: var(--c-humo); max-width: 44ch; }

@media (max-width: 900px) {
  .atelier { grid-template-columns: 1fr; gap: var(--s-6); }
  .atelier__visual { position: relative; top: 0; max-width: 420px; margin-inline: auto; width: 100%; }
  .atelier__paso { opacity: 1; border-left-color: var(--c-borde-fuerte); }
}

/* ============================================================
   Franja editorial (imagen + texto)
   ============================================================ */
.editorial { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-9); }
.editorial--invertido .editorial__media { order: 2; }
.editorial__media {
  position: relative;
  aspect-ratio: 5/6;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(160deg, var(--c-arena), var(--c-lino-2));
  display: grid;
  place-items: center;
}
.editorial__media svg { width: 78%; height: 78%; overflow: visible; }
.editorial__firma {
  position: absolute;
  bottom: var(--s-5); left: var(--s-5);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(8px);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--c-tinta-80);
}
.editorial__txt h2 { margin-bottom: var(--s-4); }
.editorial__lista { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.editorial__lista li {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: var(--t-sm);
  color: var(--c-humo);
}
.editorial__lista .rombo { margin-top: .55em; }
@media (max-width: 900px) {
  .editorial { grid-template-columns: 1fr; gap: var(--s-6); }
  .editorial--invertido .editorial__media { order: 0; }
}

/* ============================================================
   Instagram
   ============================================================ */
.ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-2); }
.ig-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: linear-gradient(160deg, var(--c-nube), var(--c-lino-2));
  border: 1px solid var(--c-borde);
  display: grid;
  place-items: center;
}
.ig-item svg { width: 74%; height: 74%; overflow: visible; transition: transform var(--d-lento) var(--e-salida); }
.ig-item:hover svg { transform: scale(1.1) rotate(3deg); }
.ig-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(28,26,24,.5);
  opacity: 0;
  transition: opacity var(--d-medio);
}
.ig-item__icono {
  position: absolute;
  z-index: 2;
  color: var(--c-lino);
  opacity: 0;
  transform: scale(.7);
  transition: all var(--d-medio) var(--e-elastico);
}
.ig-item:hover::after { opacity: 1; }
.ig-item:hover .ig-item__icono { opacity: 1; transform: none; }
.ig-item__icono svg { width: 22px; height: 22px; }
@media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   Boletín
   ============================================================ */
.boletin {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--g-noche);
  color: var(--c-lino);
  padding: clamp(2.2rem, 5vw, 4.5rem);
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}
.boletin__hilos {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .2;
}
.boletin h2 { color: var(--c-lino); }
.boletin .plomo { margin-inline: auto; color: rgba(247,243,238,.66); }
.boletin__form {
  display: flex;
  gap: var(--s-2);
  max-width: 520px;
  margin: var(--s-6) auto 0;
  flex-wrap: wrap;
}
.boletin__form .input {
  flex: 1;
  min-width: 220px;
  background: rgba(255,255,255,.06);
  border-color: rgba(247,243,238,.18);
  color: var(--c-lino);
  border-radius: var(--r-full);
  padding-inline: 1.4em;
}
.boletin__form .input::placeholder { color: rgba(247,243,238,.4); }
.boletin__form .input:focus { border-color: var(--c-laton); box-shadow: 0 0 0 3px rgba(185,139,78,.2); }
.boletin__legal { margin-top: var(--s-4); font-size: var(--t-xs); color: rgba(247,243,238,.4); }

/* ============================================================
   CATÁLOGO
   ============================================================ */
.cabecera-pag {
  padding-block: var(--s-8) var(--s-6);
  border-bottom: 1px solid var(--c-borde);
}
.cabecera-pag__titulo { font-size: var(--t-2xl); margin-block: var(--s-2); }
.cabecera-pag .plomo { font-size: var(--t-base); }

.tienda { display: grid; grid-template-columns: 250px 1fr; gap: var(--s-8); align-items: start; }

.filtros {
  position: sticky;
  top: calc(var(--h-header) + var(--s-5));
  display: grid;
  gap: var(--s-5);
}
.filtro__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-tinta);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-borde);
  margin-bottom: var(--s-3);
}
.filtro__opciones { display: grid; gap: var(--s-2); }
.filtro__op {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--c-humo);
  cursor: pointer;
  padding: 4px 0;
  transition: color var(--d-rapido);
  text-align: left;
  width: 100%;
}
.filtro__op:hover { color: var(--c-laton-hondo); }
.filtro__op.is-activo { color: var(--c-tinta); }
/* En el panel de filtros del teléfono las opciones van una sobre
   otra: con 29 px de alto se marcaba la de al lado sin querer. */
@media (pointer: coarse), (max-width: 980px) {
  .filtro__op { padding-block: 10px; }
}
.filtro__op.is-activo .filtro__marca { background: var(--c-laton); border-color: var(--c-laton); }
.filtro__marca {
  width: 15px; height: 15px;
  flex: none;
  border: 1px solid var(--c-borde-fuerte);
  border-radius: 3px;
  position: relative;
  transition: all var(--d-rapido);
}
.filtro__op.is-activo .filtro__marca::after {
  content: "";
  position: absolute;
  left: 4.5px; top: 1.5px;
  width: 4px; height: 8px;
  border-right: 1.6px solid #fff;
  border-bottom: 1.6px solid #fff;
  transform: rotate(42deg);
}
.filtro__cuenta { font-size: var(--t-xs); color: var(--c-humo-claro); font-variant-numeric: tabular-nums; }
.filtro__izq { display: flex; align-items: center; gap: var(--s-3); }

/* Pista bajo el bloque de Material: la pieza se puede pedir en otro
   metal aunque no esté publicada así. El margen negativo la pega al
   bloque del que habla, porque .filtros separa a todos sus hijos por
   igual y suelta parecería un aviso del panel entero. */
.filtro__pista {
  margin-top: calc(var(--s-4) * -1);
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--c-humo);
}

.rango { display: grid; gap: var(--s-3); }
.rango__valores { display: flex; justify-content: space-between; font-size: var(--t-sm); font-variant-numeric: tabular-nums; color: var(--c-tinta); }
.rango input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: var(--c-borde-fuerte);
  border-radius: var(--r-full);
  outline: none;
}
.rango input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--c-lino);
  border: 1.5px solid var(--c-laton);
  box-shadow: var(--sh-1);
  cursor: pointer;
  transition: transform var(--d-rapido);
}
.rango input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.rango input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--c-lino);
  border: 1.5px solid var(--c-laton);
  cursor: pointer;
}

/* Pie de una grilla que se pinta por tandas. */
.grilla-mas {
  display: flex;
  justify-content: center;
  margin-top: var(--s-7);
}
.grilla-mas:empty { margin-top: 0; }

.tienda__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--c-borde);
  flex-wrap: wrap;
}
.tienda__cuenta { font-size: var(--t-sm); color: var(--c-humo); }
.tienda__cuenta b { color: var(--c-tinta); font-weight: 500; }
/* «todas con 10% de descuento», junto al recuento. Separado por una
   viñeta para que no se lea pegado al número de piezas. */
.tienda__cuenta-promo { color: var(--c-laton-hondo); font-weight: 500; }
.tienda__cuenta-promo::before { content: " · "; color: var(--c-borde-fuerte); font-weight: 400; }
.tienda__herr { display: flex; align-items: center; gap: var(--s-3); }
.orden {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-humo);
}
.orden select {
  border: 0;
  background: none;
  padding: .3em 1.5em .3em .3em;
  cursor: pointer;
  color: var(--c-tinta);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2323201E' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}
.orden select:focus { outline: none; }

.filtros-activos { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.btn-filtros-movil { display: none; }

@media (max-width: 980px) {
  .tienda { grid-template-columns: 1fr; }
  .btn-filtros-movil { display: inline-flex; }
  .filtros {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    background: var(--c-lino);
    padding: var(--s-5) var(--pad-x) var(--s-8);
    overflow-y: auto;
    align-content: start;
    transform: translateX(-100%);
    transition: transform var(--d-lento) var(--e-salida);
    visibility: hidden;
    top: 0;
  }
  .filtros.is-abierto { transform: none; visibility: visible; }
  .filtros__head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--c-borde);
  }
  .filtros__pie { display: block !important; position: sticky; bottom: 0; padding-top: var(--s-4); background: var(--c-lino); }
}
.filtros__head, .filtros__pie { display: none; }

/* ============================================================
   FICHA DE PRODUCTO
   ============================================================ */
.producto { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-9); align-items: start; }

.pgal { display: grid; gap: var(--s-3); }
.pgal__marco {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, var(--c-nube), var(--c-lino-2) 72%);
  border: 1px solid var(--c-borde);
  display: grid;
  place-items: center;
  perspective: 1000px;
  cursor: grab;
  user-select: none;
}
.pgal__marco:active { cursor: grabbing; }
.pgal__pieza {
  width: 74%;
  transform-style: preserve-3d;
  transform: rotateY(var(--py, 0deg)) rotateX(var(--px, 0deg));
  transition: transform .35s var(--e-suave);
}
.pgal__pieza.arrastrando { transition: none; }
.pgal__pieza svg { width: 100%; overflow: visible; filter: drop-shadow(0 26px 34px rgba(58,44,30,.2)); }
.pgal__sombra {
  position: absolute;
  bottom: 13%; left: 50%;
  translate: -50% 0;
  width: 40%; height: 16px;
  background: radial-gradient(closest-side, rgba(58,44,30,.22), transparent);
  filter: blur(7px);
}
.pgal__hint {
  position: absolute;
  bottom: var(--s-4); left: 50%;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .45em .95em;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(8px);
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-humo);
  pointer-events: none;
  transition: opacity var(--d-medio);
}
.pgal__hint svg { width: 14px; height: 14px; }
.pgal__marco:active .pgal__hint { opacity: 0; }
.pgal__miniaturas { display: flex; gap: var(--s-2); }
.pgal__mini {
  width: 74px;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-borde);
  background: var(--c-nube);
  overflow: hidden;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color var(--d-rapido), transform var(--d-rapido);
}
.pgal__mini svg { width: 76%; height: 76%; overflow: visible; }
.pgal__mini:hover { transform: translateY(-2px); }
.pgal__mini.is-activo { border-color: var(--c-laton); }

.pinfo { display: grid; gap: var(--s-4); align-content: start; }
.pinfo__cat {
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--c-laton-hondo);
}
.pinfo__nombre { font-size: var(--t-xl); line-height: 1.05; }
.pinfo__precio-fila { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.pinfo__precio {
  font-family: var(--f-display);
  font-size: 2rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.pinfo__antes {
  font-size: var(--t-md);
  color: var(--c-humo);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--c-rosa);
}
.pinfo__cuotas { font-size: var(--t-xs); color: var(--c-humo); }
.pinfo__desc { color: var(--c-humo); line-height: 1.72; }
.pinfo__bloque { display: grid; gap: var(--s-3); }
.pinfo__bloque-tit {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-humo);
}
.pinfo__bloque-tit b { color: var(--c-tinta); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: var(--t-sm); }
.pinfo__acciones { display: flex; gap: var(--s-3); align-items: stretch; flex-wrap: wrap; }
/* `max-content` y no una cifra escrita a mano: el botón no puede quedar
   nunca más angosto que su propio texto. Decía `200px` cuando el botón
   pide 253, así que entre 900 y 960 px —donde la columna de la ficha se
   queda en 342— se dejaba estrujar hasta 213 y cortaba la palabra. Lo
   que cede ahora es la fila, no el texto: el corazón baja solo. Y como
   la tipografía crece con la pantalla, la cifra buena se mueve (253 px
   a 375, 270 a 1280); `max-content` la recalcula sola. */
.pinfo__acciones .btn { flex: 1; min-width: max-content; }
/* El corazón es un botón redondo de 52 px, no un «.btn» que crece para
   llenar la fila. Sin esta línea hereda el `min-width` de arriba —que
   además le gana a su propio `width`— y se estiraba a 200 px hasta caer
   a una segunda fila, una barra vacía bajo «Agregar a la bolsa». */
.pinfo__acciones .btn--icono { flex: none; width: 52px; min-width: 0; padding: 0; }
.pinfo__meta { display: grid; gap: var(--s-2); font-size: var(--t-sm); color: var(--c-humo); }
.pinfo__meta li { display: flex; align-items: center; gap: var(--s-3); }
.pinfo__meta svg { width: 16px; height: 16px; color: var(--c-laton); flex: none; }
.pinfo__stock {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-exito);
}
.pinfo__stock i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pinfo__stock.agotado { color: var(--c-error); }

.especificaciones { display: grid; gap: 0; }
.especificaciones li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-borde);
  font-size: var(--t-sm);
}
.especificaciones dt, .especificaciones li b {
  color: var(--c-humo-claro);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: var(--t-xs);
}

/* Enlace «¿Cómo medir?» de la ficha. Es un botón porque abre la guía
   encima de la ficha en vez de navegar a otra página, pero no debe
   verse distinto del enlace que era antes. */
.pinfo__medir {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--t-xs);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Guía para medir la talla de un anillo. Se usa igual dentro de la
   página de cuidados y dentro de la ventana de la ficha. */
.medidor--modal {
  border: 0;
  background: none;
  padding: var(--s-7);
  max-width: 34rem;
}
.medidor--modal:hover { transform: none; box-shadow: none; }
.medidor__pasos {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-2) 0;
}
.medidor__pasos li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--s-3);
  align-items: start;
  font-size: var(--t-sm);
}
.medidor__pasos li > span {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(185, 139, 78, .12);
  color: var(--c-laton-hondo);
  font-family: var(--f-ui);
  font-size: var(--t-xs);
}
.medidor__tallas-tit {
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-humo-claro);
}
.medidor__tallas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.medidor__tallas li {
  padding: .35em .7em;
  border: 1px solid var(--c-borde);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  background: var(--c-lino);
}

@media (max-width: 900px) {
  .producto { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* En el teléfono los tres no caben en una fila: la cantidad (122 px),
   el botón de comprar (253) y el corazón (52) piden 451 y a 375 px de
   pantalla el ancho útil es 336. Aquí el botón se encogía —lo hacía un
   `min-width: 0` puesto en este mismo sitio— y como `.btn` va con
   `white-space: nowrap` y `overflow: hidden`, el que se quedaba sin
   sitio era el texto: se leía «gregar a la bo» en el único botón que
   vende. Cortaba hasta los 496 px de pantalla, o sea en todos los
   teléfonos. Ahora se lleva la segunda fila entera —336 px para 253— y
   arriba quedan la cantidad y el corazón, que ahí sí caben. */
@media (max-width: 560px) {
  /* `max-content` y no `auto`: con `auto` el fr de al lado se lleva el
     sobrante y la columna se queda en el min-content del selector —86 px—,
     que encoge los botones de − y + de 40 a 22 y deja la cantidad por
     debajo del tamaño que se acierta con el dedo. */
  .pinfo__acciones { display: grid; grid-template-columns: max-content 1fr; }
  .pinfo__acciones > .btn:not(.btn--icono) { grid-area: 2 / 1 / 3 / 3; }
  .pinfo__acciones > .btn--icono { grid-area: 1 / 2 / 2 / 3; justify-self: end; }
}

/* Barra de compra pegajosa en móvil */
.barra-compra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: none;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: rgba(247,243,238,.95);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-borde);
  transform: translateY(100%);
  transition: transform var(--d-medio) var(--e-salida);
}
.barra-compra.is-visible { transform: none; }
.barra-compra__txt { flex: 1; min-width: 0; }
.barra-compra__txt b { display: block; font-family: var(--f-display); font-size: 1.05rem; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-compra__txt small { font-variant-numeric: tabular-nums; color: var(--c-humo); }
@media (max-width: 900px) { .barra-compra { display: flex; } }

/* ============================================================
   CARRITO (página) y CHECKOUT
   ============================================================ */
.carro { display: grid; grid-template-columns: 1fr 380px; gap: var(--s-8); align-items: start; }
.carro__lista { border-top: 1px solid var(--c-borde); }
.carro__linea {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: var(--s-5);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--c-borde);
  align-items: center;
}
.carro__linea-img {
  aspect-ratio: 4/5;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-borde);
  background: var(--c-nube);
  overflow: hidden;
}
.carro__linea-img svg { width: 100%; height: 100%; }
.carro__linea-total { font-family: var(--f-display); font-size: 1.32rem; font-variant-numeric: tabular-nums; text-align: right; }

.resumen {
  position: sticky;
  top: calc(var(--h-header) + var(--s-5));
  padding: var(--s-6);
  background: var(--c-nube);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  display: grid;
  gap: var(--s-5);
}
.resumen h3 { font-size: var(--t-lg); }
.cupon { display: flex; gap: var(--s-2); }
.cupon .input { border-radius: var(--r-full); }

@media (max-width: 900px) {
  .carro { grid-template-columns: 1fr; }
  .carro__linea { grid-template-columns: 84px 1fr; }
  .carro__linea-total { grid-column: 2; text-align: left; }
}

/* Checkout */
.checkout { display: grid; grid-template-columns: 1fr 400px; gap: var(--s-8); align-items: start; }
.checkout__form { display: grid; gap: var(--s-7); }
.checkout__paso { display: grid; gap: var(--s-4); }
.checkout__paso-tit {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-borde);
}
.checkout__paso-num {
  width: 28px; height: 28px;
  flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--c-laton);
  border-radius: 50%;
  font-size: var(--t-xs);
  color: var(--c-laton-hondo);
}
.checkout__paso-tit h3 { font-size: var(--t-md); }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 900px) {
  .checkout { grid-template-columns: 1fr; }
  .dos-col { grid-template-columns: 1fr; }
}

.pedido-ok {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  display: grid;
  gap: var(--s-5);
  justify-items: center;
  padding-block: var(--s-9);
}
.pedido-ok__sello {
  width: 92px; height: 92px;
  border-radius: 50%;
  border: 1px solid var(--c-laton);
  display: grid; place-items: center;
  color: var(--c-laton);
  position: relative;
}
.pedido-ok__sello::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(185,139,78,.3);
  border-radius: 50%;
  animation: pulso-suave 3s ease-in-out infinite;
}
.pedido-ok__sello svg { width: 38px; height: 38px; }
.pedido-ok__num {
  font-family: var(--f-display);
  font-size: 1.5rem;
  letter-spacing: .1em;
  color: var(--c-laton-hondo);
}

/* ============================================================
   Páginas editoriales
   ============================================================ */
.prosa { max-width: 72ch; }
.prosa h2 { font-size: var(--t-xl); margin-block: var(--s-7) var(--s-4); }
.prosa h3 { font-size: var(--t-lg); margin-block: var(--s-6) var(--s-3); }
.prosa p { color: var(--c-humo); margin-bottom: var(--s-4); line-height: 1.78; }
.prosa ul { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.prosa ul li { display: flex; gap: var(--s-3); color: var(--c-humo); align-items: flex-start; }
.prosa ul li .rombo { margin-top: .58em; }
.prosa strong { color: var(--c-tinta); font-weight: 500; }
.prosa blockquote {
  border-left: 2px solid var(--c-laton);
  padding-left: var(--s-5);
  margin-block: var(--s-6);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.32rem;
  color: var(--c-tinta-80);
  line-height: 1.6;
}

.tarjeta-info {
  padding: var(--s-6);
  background: var(--c-nube);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  display: grid;
  gap: var(--s-3);
  transition: transform var(--d-medio) var(--e-salida), box-shadow var(--d-medio);
}
.tarjeta-info:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.tarjeta-info__icono {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(185,139,78,.1);
  display: grid; place-items: center;
  color: var(--c-laton-hondo);
}
.tarjeta-info__icono svg { width: 21px; height: 21px; }
.tarjeta-info h3 { font-size: var(--t-md); }
.tarjeta-info p { font-size: var(--t-sm); color: var(--c-humo); }

/* Estado vacío de catálogo */
.sin-resultados {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  text-align: center;
  padding: var(--s-10) var(--s-4);
  color: var(--c-humo);
}
.sin-resultados svg { width: 54px; height: 54px; color: var(--c-borde-fuerte); }
/* La nota de «pídela en otro material» solo aparece aquí cuando el
   filtro vacío era justamente el de material. Se alinea a la izquierda
   —es un párrafo, no un titular— dentro del bloque centrado. */
.sin-resultados .nota { max-width: 46ch; text-align: left; }

/* ============================================================
   Cobro en mantenimiento

   Se muestra donde iría el pago mientras Mercado Pago no esté
   configurado. La tienda sigue navegable: esto solo sustituye el
   paso de cobro, no la tienda.
   ============================================================ */
.mant {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  max-width: 520px;
  margin: 0 auto;
  padding: var(--s-8) var(--s-5);
  text-align: center;
  background: var(--c-lino-2);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-lg);
}
.mant__marca {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--c-arena);
  color: var(--c-laton-hondo);
}
.mant__titulo { font-size: var(--t-xl); margin: 0; }
.mant__titulo-sm {
  font-family: var(--f-display); font-size: var(--t-lg);
  font-weight: 400; line-height: 1.25;
}
.mant__texto {
  margin: 0;
  color: var(--c-humo);
  font-size: var(--t-sm);
  line-height: 1.6;
  max-width: 40ch;
}
.mant__acciones {
  display: grid; gap: var(--s-2);
  width: 100%; max-width: 320px;
  margin-top: var(--s-2);
}
.mant__acciones .btn { justify-content: center; gap: var(--s-2); }
.mant__volver {
  font-size: var(--t-xs);
  color: var(--c-humo);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mant__volver:hover { color: var(--c-tinta); }

/* Dentro del resumen del carrito, sin caja doble ni tanto aire. */
.mant--compacto {
  max-width: none;
  padding: var(--s-4);
  background: none;
  border: 0;
  border-top: 1px solid var(--c-borde);
  border-radius: 0;
  gap: var(--s-2);
  text-align: left;
  justify-items: stretch;
}
.mant--compacto .mant__texto { max-width: none; }
.mant--compacto .mant__acciones { max-width: none; }

/* ============================================================
   Comentarios de clientes

   Solo aparecen los aprobados por el taller, y siempre de alguien
   que compró la pieza.
   ============================================================ */
.resenas { display: grid; gap: var(--s-4); }
.resena {
  padding: var(--s-5);
  background: var(--c-lino-2);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
}
.resena__cab {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-3); flex-wrap: wrap;
}
.resena__cab > div { display: grid; margin-right: auto; }
.resena__verif {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--t-xs); color: var(--c-humo);
}
.resena__txt { margin: 0; line-height: 1.7; }

/* Estrellas: las vacías se marcan, no se omiten. */
.testimonio__estrellas .es-vacia { opacity: .28; }

/* Formulario para opinar, en el seguimiento del pedido */
.seg-opinar {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-borde);
  display: grid; gap: var(--s-3);
}
.opinar {
  display: grid; gap: var(--s-3);
  padding: var(--s-4);
  background: var(--c-lino-2);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
}
.opinar__pieza { font-family: var(--f-display); font-size: var(--t-md); font-weight: 400; }
.opinar__estrellas { display: flex; gap: 2px; }
.opinar__estrella { cursor: pointer; line-height: 0; }
.opinar__estrella input { position: absolute; opacity: 0; pointer-events: none; }
.opinar__estrella span { display: block; color: var(--c-borde-fuerte); transition: color var(--d-rapido); }
.opinar__estrella:hover span,
.opinar__estrella:has(input:checked) span,
.opinar__estrellas:has(input:checked) .opinar__estrella:has(input:checked) ~ .opinar__estrella span {
  color: var(--c-borde-fuerte);
}
/* Se pintan de latón la elegida y todas las anteriores. */
.opinar__estrellas .opinar__estrella:has(~ .opinar__estrella input:checked) span,
.opinar__estrella:has(input:checked) span { color: var(--c-laton); }
.opinar__estrella input:focus-visible + span { outline: 2px solid var(--c-laton); outline-offset: 2px; }
.opinar__pie { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.opinar__aviso { font-size: var(--t-xs); color: var(--c-error); }

/* ============================================================
   Páginas legales (términos y privacidad)
   ============================================================ */
.legal-portada { padding-bottom: var(--s-6); }
.legal-fecha {
  margin-top: var(--s-3);
  font-size: var(--t-xs);
  color: var(--c-humo);
  letter-spacing: var(--tracking-wide);
}
.legal h2 {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-borde);
  font-size: var(--t-lg);
}
.legal h2:first-of-type { margin-top: var(--s-5); }
.legal p, .legal li { line-height: 1.75; }

.legal-pie {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-borde);
  font-size: var(--t-sm);
  color: var(--c-humo);
}

/* Las tablas de datos y proveedores tienen que poder mirarse en el
   teléfono sin que la página entera se desplace de lado. */
.tabla-legal { overflow-x: auto; margin: var(--s-4) 0; }
.tabla-legal table {
  width: 100%; min-width: 520px;
  border-collapse: collapse; font-size: var(--t-sm);
}
.tabla-legal th, .tabla-legal td {
  text-align: left; padding: var(--s-3);
  border-bottom: 1px solid var(--c-borde);
  vertical-align: top; line-height: 1.55;
}
.tabla-legal th {
  font-size: var(--t-xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--c-humo); font-weight: 500;
  background: var(--c-lino-2);
}

/* Casilla de consentimiento del checkout */
.opcion--casilla { align-items: flex-start; }
.opcion--casilla small { display: block; margin-top: 3px; line-height: 1.5; }