/**
 * estilo.css — componentes del sitio.
 *
 * Ningún valor suelto: todo sale de tokens.css. Si algo necesita un color,
 * espacio o duración que no exista allí, se agrega allí, no aquí.
 */

/* ═══════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════ */
body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-cuerpo);
  font-size: var(--paso-0);
  line-height: var(--interlineado-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* clip y no hidden: hidden rompe todos los position:sticky */
}

.contenedor {
  width: min(76rem, 100% - var(--e-5) * 2);
  margin-inline: auto;
}
.contenedor--ancho { width: min(90rem, 100% - var(--e-5) * 2); }

.seccion { padding-block: var(--e-9); }

.seccion__etiqueta {
  font-size: var(--paso--1);
  letter-spacing: var(--track-marca);
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: var(--e-4);
  padding-left: var(--track-marca);   /* compensa el espacio fantasma del tracking */
}

.seccion__titulo {
  font-family: var(--fuente-display);
  font-size: var(--paso-4);
  font-weight: 300;
  line-height: var(--interlineado-apretado);
  letter-spacing: var(--track-apretado);
  margin-bottom: var(--e-5);
}

.seccion__bajada {
  color: var(--texto-suave);
  max-width: var(--medida);
  margin-bottom: var(--e-7);
}

/* ═══════════════════════════════════════════════════════════
   NAVEGACIÓN
   ═══════════════════════════════════════════════════════════ */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  /* Sobre el héroe el fondo es transparente; al bajar aparece el cristal. */
  background: transparent;
  transition: background var(--dur-rapido) var(--ease-salida),
              backdrop-filter var(--dur-rapido) var(--ease-salida);
}
.nav.desplazado {
  background: color-mix(in srgb, var(--fondo) 72%, transparent);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid var(--borde);
}

.nav__marca { display: inline-flex; align-items: center; color: var(--texto); }

/* El wordmark hereda currentColor: un solo archivo sirve en tema claro y
   oscuro, y sobre el héroe se aclara igual que los enlaces. El alto manda
   (el ancho lo pone el viewBox), porque lo que se compara de un logotipo
   entre pantallas es su altura, no su caja. */
.wordmark { height: 1.5rem; width: auto; }
.nav__marca .wordmark { filter: drop-shadow(0 1px 3px #0b0b0fa6); }
.nav.desplazado .nav__marca .wordmark { filter: none; }

.nav__enlaces { display: flex; gap: var(--e-3); align-items: center; }
.nav__enlaces a {
  /* 44px de alto mínimo: WCAG 2.5.5. El padding lateral da también el ancho. */
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--e-2);
  font-size: var(--paso--1);
  letter-spacing: var(--track-amplio);
  text-transform: uppercase;
  text-decoration: none;
  /* Sobre el héroe la nav flota encima de una foto: el color del tema no sirve
     porque el fondo no es el fondo del tema. Se fija claro y se devuelve al
     token en cuanto aparece el cristal. */
  color: #e8e4dd;
  text-shadow: 0 1px 3px #0b0b0fa6;
  transition: color var(--dur-micro) var(--ease-salida);
}
.nav__enlaces a:hover { color: #fff; }

.nav.desplazado .nav__enlaces a { color: var(--texto-suave); text-shadow: none; }
.nav.desplazado .nav__enlaces a:hover { color: var(--texto); }

.nav__menu {
  display: none;
  background: none; border: 0; color: inherit; cursor: pointer;
  width: 2.75rem; height: 2.75rem;      /* 44×44 — mínimo táctil */
  place-items: center;
}
.nav__marca { min-height: 2.75rem; }

@media (max-width: 900px) {
  .nav__enlaces {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(20rem, 82vw);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--e-6);
    padding: var(--e-7);
    background: var(--fondo-elevado);
    border-left: 1px solid var(--borde);
    transform: translateX(100%);
    transition: transform var(--dur-normal) var(--ease-suave);
  }
  .nav__enlaces.abierto { transform: translateX(0); }
  .nav__enlaces a { font-size: var(--paso-1); }
  .nav__menu { display: grid; z-index: 1; }
}

/* ═══════════════════════════════════════════════════════════
   HÉROE
   ═══════════════════════════════════════════════════════════ */
.heroe {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.heroe__fondo { position: absolute; inset: 0; z-index: -2; }
/* <picture> es inline por defecto: un porcentaje de alto en el <img> no
   resuelve de forma fiable si su padre inmediato no tiene tamaño propio.
   Por eso el fondo se veía cortado a mitad de página en móvil — la franja
   gris era el fondo del body asomando bajo la imagen. */
.heroe__fondo picture { display: block; width: 100%; height: 100%; }
.heroe__fondo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Velo: ningún fondo fotográfico es legible por sí solo — fija un suelo de
   luminancia para que el contraste del texto sea calculable. */
.heroe::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(75% 60% at 50% 45%, #0b0b0fd9, #0b0b0f96 50%, transparent 80%),
    linear-gradient(180deg, #0b0b0f8c 0%, transparent 28%, transparent 58%, #0b0b0f 100%);
}

/* Padding lateral corto en móvil: cada píxel de ancho es un carácter más por
   línea, y ahí es donde la medida se queda corta. */
.heroe__contenido { padding: var(--e-8) var(--e-4); max-width: 60rem; color: #f4f2ee; }
@media (min-width: 640px) { .heroe__contenido { padding-inline: var(--e-6); } }

.heroe__titulo {
  font-family: var(--fuente-display);
  font-size: var(--paso-6);
  font-weight: 300;
  line-height: var(--interlineado-apretado);
  letter-spacing: var(--track-apretado);
  margin-bottom: var(--e-5);
  text-wrap: balance;
}

.heroe__bajada {
  /* En móvil --paso-1 deja solo ~35 caracteres por línea, muy por debajo del
     mínimo cómodo de 45. Se baja un paso hasta que hay ancho para sostenerlo. */
  font-size: var(--paso-0);
  color: #d8d2c8;              /* sobre el velo → 9.4:1 */
  max-width: var(--medida);
  margin: 0 auto var(--e-6);
  text-wrap: pretty;
}
@media (min-width: 640px) {
  .heroe__bajada { font-size: var(--paso-1); }
}

.heroe__flecha {
  position: absolute;
  bottom: var(--e-6);
  left: 50%;
  translate: -50% 0;
  color: #d8d2c8;
  animation: flotar 2s ease-in-out infinite;
}
@keyframes flotar { 0%, 100% { translate: -50% 0 } 50% { translate: -50% 8px } }

/* ═══════════════════════════════════════════════════════════
   BOTONES
   ═══════════════════════════════════════════════════════════ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 3rem;                 /* 48px — por encima del mínimo táctil de 44 */
  padding: var(--e-3) var(--e-5);
  border-radius: var(--radio-completo);
  border: 1px solid transparent;
  font-size: var(--paso--1);
  font-weight: 500;
  letter-spacing: var(--track-amplio);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-salida),
              background-color var(--dur-rapido) var(--ease-salida),
              border-color var(--dur-rapido) var(--ease-salida);
}
.boton:active { transform: scale(0.97); }
.boton--principal { background: var(--acento); color: var(--sobre-acento); }
.boton--principal:hover { background: var(--acento-vivo); }
.boton--fantasma { border-color: #ffffff59; color: #f4f2ee; }
.boton--fantasma:hover { border-color: var(--acento); background: #ffffff14; }

/* Botón inerte: se ve completo, para que el cliente vea el sitio terminado,
   pero no hace nada porque el dato que necesitaría todavía es de ejemplo.
   No se le baja la opacidad — eso arruinaría el contraste sin explicar nada;
   lo que explica es el contorno ámbar y el rótulo que va debajo. */
.boton--inerte {
  outline: 2px dashed var(--alerta);
  outline-offset: 3px;
  cursor: not-allowed;
}
.boton--inerte:active { transform: none; }

.acciones { display: flex; gap: var(--e-3); justify-content: center; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════
   CATÁLOGO
   ═══════════════════════════════════════════════════════════ */
.categoria { margin-bottom: var(--e-9); scroll-margin-top: 6rem; }

.categoria__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  padding-bottom: var(--e-4);
  margin-bottom: var(--e-6);
  border-bottom: 1px solid var(--borde);
}
.categoria__nombre {
  font-family: var(--fuente-display);
  font-size: var(--paso-3);
  font-weight: 300;
  letter-spacing: var(--track-apretado);
}
.categoria__conteo { font-size: var(--paso--1); color: var(--texto-suave); }

.rejilla {
  display: grid;
  /* auto-fit + minmax: se adapta sin una sola media query */
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: var(--e-5);
}

.pieza {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radio-3);
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--borde);
  transition: transform var(--dur-normal) var(--ease-suave),
              border-color var(--dur-normal) var(--ease-suave);
}
.pieza:hover { transform: translateY(-4px); border-color: var(--acento-tenue); }

.pieza__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--fondo-elevado);
}
.pieza__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: scale var(--dur-lento) var(--ease-suave);
}
.pieza:hover .pieza__foto img { scale: 1.04; }

.pieza__cuerpo { padding: var(--e-4) var(--e-5) var(--e-5); display: grid; gap: var(--e-2); }
.pieza__nombre { font-family: var(--fuente-display); font-size: var(--paso-1); font-weight: 400; }
.pieza__medida { font-size: var(--paso--1); color: var(--texto-suave); }
.pieza__opcion { font-size: var(--paso--2); color: var(--texto-suave); }

/* ═══════════════════════════════════════════════════════════
   PRECIO
   El precio manda en la tarjeta y en la ficha: es lo que la
   gente busca primero y lo que más se esconde en los sitios
   artesanales. Cifra grande, tabular y en el color de acento.
   ═══════════════════════════════════════════════════════════ */
.precio {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.precio__desde {
  font-size: var(--paso--2);
  text-transform: uppercase;
  letter-spacing: var(--track-amplio);
  color: var(--texto-suave);
}
.precio__cifra { font-size: var(--paso-1); font-weight: 500; letter-spacing: -0.01em; }
.precio--grande .precio__cifra { font-size: var(--paso-3); font-weight: 400; }

.precio-bloque {
  padding: var(--e-5) 0;
  margin-block: var(--e-5);
  border-block: 1px solid var(--borde);
}

/* Versiones y sobrecostos: la tabla que evita fundir $850.000 y $950.000 en
   una cifra sola. Cada línea es una decisión de compra distinta. */
.precio__lineas { list-style: none; padding: 0; margin-top: var(--e-4); display: grid; gap: var(--e-2); }
.precio__lineas li {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  font-size: var(--paso--1);
  color: var(--texto-suave);
  padding-bottom: var(--e-2);
  border-bottom: 1px dotted var(--borde);
}
.precio__lineas b { color: var(--texto); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════
   CAMPO PENDIENTE
   Se ve. Es deliberado: un dato que falta debe estorbar hasta
   que alguien lo llene, no esconderse y salir publicado a medias.
   ═══════════════════════════════════════════════════════════ */
.pendiente {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) var(--e-3);
  border-radius: var(--radio-1);
  border: 1px dashed var(--alerta);
  /* El fondo teñido baja el contraste del propio --alerta por debajo de AA.
     Se usa el fondo del tema y se reserva el tinte solo para el borde. */
  background: var(--fondo-elevado);
  color: var(--alerta);
  font-family: var(--fuente-mono);
  font-size: var(--paso--2);
  line-height: 1.4;
  text-align: left;
}
.pendiente::before { content: "⌛"; }

.seccion--pendiente {
  border: 1px dashed var(--alerta);
  border-radius: var(--radio-3);
  padding: var(--e-6);
  background: color-mix(in srgb, var(--alerta) 5%, transparent);
}

.lista-simple { display: grid; gap: var(--e-2); list-style: none; padding: 0; }

/* Se oculta todo lo pendiente al añadir ?limpio a la URL, para poder
   enseñarle al cliente cómo se verá el sitio terminado. */
body.limpio .pendiente,
body.limpio .seccion--pendiente { display: none; }

/* Ocultar el recuadro deja la fila con el rótulo y la casilla vacía, que se
   lee peor que el pendiente. Si la fila entera era el pendiente, se va la
   fila completa. */
body.limpio .lista-datos__fila:has(> .lista-datos__valor > .pendiente),
body.limpio .especificaciones tr:has(.pendiente) { display: none; }

/* ═══════════════════════════════════════════════════════════
   DATO DE EJEMPLO
   Distinto del pendiente a propósito: aquí SÍ hay un valor a
   la vista, y por eso el rótulo tiene que estar pegado a él.
   El valor es falso; el rótulo es lo que impide que alguien
   le escriba a un número inventado creyendo que es el real.

   IMPORTANTE: el rótulo NO se oculta con ?limpio. Ocultarlo
   volvería el dato falso indistinguible de uno verdadero, que
   es justo lo que hay que evitar.
   ═══════════════════════════════════════════════════════════ */
.ejemplo { display: grid; gap: var(--e-1); justify-items: start; }
.ejemplo__dato { color: var(--texto); }

.ejemplo__nota {
  display: inline-block;
  padding: var(--e-1) var(--e-2);
  border-radius: var(--radio-1);
  border: 1px solid var(--alerta);
  /* --alerta sobre --fondo-elevado: 9.5:1 en oscuro, 5.3:1 en claro — AA en
     ambos. El tinte se reserva para el borde, como en .pendiente. */
  background: var(--fondo-elevado);
  color: var(--alerta);
  font-family: var(--fuente-mono);
  font-size: var(--paso--2);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

/* ═══════════════════════════════════════════════════════════
   FIGURAS CON PIE
   El pie de foto es contenido, no decoración: es el único
   texto del sitio que Rafael escribió sobre su propio taller.
   ═══════════════════════════════════════════════════════════ */
.pie-foto {
  margin-top: var(--e-3);
  font-size: var(--paso--1);
  line-height: var(--interlineado-corto);
  color: var(--texto-suave);
  max-width: var(--medida-estrecha);
  text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════
   CIFRA DESTACADA
   Un solo número grande por sección. Los 14 años del Hotel
   Terra son el dato más valioso de la marca: se leen antes
   que el párrafo que los explica.
   ═══════════════════════════════════════════════════════════ */
.cifra {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}
.cifra__numero {
  font-family: var(--fuente-display);
  font-size: var(--paso-6);
  font-weight: 300;
  line-height: 0.85;
  letter-spacing: var(--track-apretado);
  color: var(--acento);
  font-variant-numeric: lining-nums;
}
.cifra__unidad {
  font-size: var(--paso--1);
  line-height: var(--interlineado-corto);
  letter-spacing: var(--track-amplio);
  text-transform: uppercase;
  color: var(--texto-suave);
  /* Con versalitas y tracking amplio, 1ch se queda corto como unidad: hacen
     falta ~16 para que "INTEMPERIE" quepa entera. Y `overflow-wrap: normal`
     porque el reset global parte palabras, y una palabra partida en
     mayúsculas espaciadas es ilegible. */
  max-width: 16ch;
  overflow-wrap: normal;
}
.cifra--menor .cifra__numero { font-size: var(--paso-4); }

/* ═══════════════════════════════════════════════════════════
   DURABILIDAD
   ═══════════════════════════════════════════════════════════ */
.durabilidad { display: grid; gap: var(--e-7); align-items: center; }
@media (min-width: 900px) {
  .durabilidad { grid-template-columns: 1fr 1fr; gap: var(--e-8); }
}
.durabilidad__figura picture {
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radio-3);
  overflow: hidden;
  background: var(--fondo-elevado);
}
.durabilidad__figura img { width: 100%; height: 100%; object-fit: cover; }
.durabilidad__texto .seccion__bajada { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════
   TALLER
   Todas las fotos del proceso son verticales: se respeta el
   3/4 en las tres. La jerarquía la da el ancho de columna,
   no un recorte que le cortaría la cabeza al artesano.
   ═══════════════════════════════════════════════════════════ */
.taller__fotos {
  display: grid;
  gap: var(--e-5);
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
@media (min-width: 900px) {
  .taller__fotos { grid-template-columns: 1.35fr 1fr 1fr; }
}
.taller__foto picture {
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radio-2);
  overflow: hidden;
  background: var(--fondo-elevado);
}
.taller__foto img { width: 100%; height: 100%; object-fit: cover; }

/* ═══════════════════════════════════════════════════════════
   ARTESANO
   Sin retrato confirmado: la sección se sostiene con la firma
   en display y el relato a medida de lectura. Nada de hueco
   gris esperando una foto que quizá no llegue.
   ═══════════════════════════════════════════════════════════ */
.artesano { display: grid; gap: var(--e-7); }
@media (min-width: 900px) {
  .artesano { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--e-8); }
}
.artesano__ficha { display: grid; gap: var(--e-3); align-content: start; justify-items: start; }
.artesano__nombre {
  font-family: var(--fuente-display);
  font-size: var(--paso-3);
  font-weight: 300;
  line-height: var(--interlineado-apretado);
  letter-spacing: var(--track-apretado);
}
.artesano__rol {
  font-size: var(--paso--1);
  letter-spacing: var(--track-amplio);
  text-transform: uppercase;
  color: var(--texto-suave);
}
.artesano__ficha .cifra { margin-bottom: 0; margin-top: var(--e-2); }

.artesano__relato { display: grid; gap: var(--e-5); max-width: var(--medida); }
.artesano__relato p { color: var(--texto-suave); }
/* La primera frase es la que engancha: entra en display y a mayor cuerpo. */
.artesano__relato p:first-child {
  font-family: var(--fuente-display);
  font-size: var(--paso-2);
  font-weight: 300;
  line-height: var(--interlineado-corto);
  color: var(--texto);
}

/* ═══════════════════════════════════════════════════════════
   BLOQUES DE DATOS (envíos · pagos · políticas)
   ═══════════════════════════════════════════════════════════ */
.bloques {
  display: grid;
  gap: var(--e-6);
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}
.bloque {
  padding: var(--e-6);
  border: 1px solid var(--borde);
  border-radius: var(--radio-3);
  background: var(--superficie);
  scroll-margin-top: 6rem;
}
.bloque__titulo {
  font-family: var(--fuente-display);
  font-size: var(--paso-1);
  font-weight: 400;
  margin-bottom: var(--e-4);
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--borde);
}

.lista-datos { display: grid; gap: var(--e-4); }
.lista-datos__fila { display: grid; gap: var(--e-1); }
.lista-datos__clave {
  font-size: var(--paso--2);
  letter-spacing: var(--track-amplio);
  text-transform: uppercase;
  color: var(--texto-suave);
}
.lista-datos__valor {
  margin: 0;
  font-size: var(--paso--1);
  color: var(--texto);
  display: grid;
  gap: var(--e-1);
  justify-items: start;
}

/* ═══════════════════════════════════════════════════════════
   CONTACTO
   ═══════════════════════════════════════════════════════════ */
.contacto { display: grid; gap: var(--e-7); }
@media (min-width: 900px) {
  .contacto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-8); }
}
.contacto__accion { display: grid; gap: var(--e-6); align-content: start; }
.cta { display: grid; gap: var(--e-3); justify-items: start; }
.nota { font-size: var(--paso--2); color: var(--texto-suave); margin-top: var(--e-3); }

/* ═══════════════════════════════════════════════════════════
   FICHA DE PRODUCTO
   ═══════════════════════════════════════════════════════════ */
.ficha { display: grid; gap: var(--e-7); padding-top: 6rem; }
@media (min-width: 900px) { .ficha { grid-template-columns: 1.1fr 1fr; align-items: start; } }

.galeria__principal {
  aspect-ratio: 4 / 5;
  border-radius: var(--radio-3);
  overflow: hidden;
  background: var(--fondo-elevado);
}
/* display:block (heredado del reset) no basta: sin un height explícito la
   altura de <picture> queda en auto, y entonces el height:100% del <img>
   no tiene contra qué resolver y se ignora. Mismo bug que en el héroe. */
.galeria__principal picture { width: 100%; height: 100%; }
.galeria__principal img { width: 100%; height: 100%; object-fit: cover; }

.galeria__miniaturas { display: flex; gap: var(--e-3); margin-top: var(--e-3); flex-wrap: wrap; }
.galeria__miniatura {
  width: 4.5rem; aspect-ratio: 1;
  border-radius: var(--radio-2);
  overflow: hidden;
  border: 2px solid transparent;
  background: none; padding: 0; cursor: pointer;
  transition: border-color var(--dur-rapido) var(--ease-salida);
}
.galeria__miniatura[aria-current="true"] { border-color: var(--acento); }
.galeria__miniatura img { width: 100%; height: 100%; object-fit: cover; }

.especificaciones { width: 100%; border-collapse: collapse; margin-block: var(--e-5); }
.especificaciones th,
.especificaciones td {
  text-align: left;
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--borde);
  font-size: var(--paso--1);
  vertical-align: top;
}
/* El padding derecho no es estética: sin él, en móvil el rótulo largo
   ("Saliente desde la pared") se pega al valor y se lee como una sola
   palabra ("…pared8 cm"). */
.especificaciones th {
  color: var(--texto-suave);
  font-weight: 400;
  width: 42%;
  padding-right: var(--e-4);
}
.especificaciones td { color: var(--texto); }

/* ═══════════════════════════════════════════════════════════
   PIE
   ═══════════════════════════════════════════════════════════ */
.pie {
  border-top: 1px solid var(--borde);
  padding-block: var(--e-8) var(--e-6);
  margin-top: var(--e-9);
}
.pie__rejilla { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.pie__titulo { font-size: var(--paso--1); letter-spacing: var(--track-amplio); text-transform: uppercase; color: var(--texto-suave); margin-bottom: var(--e-3); }
.pie__lista { list-style: none; padding: 0; display: grid; }
.pie__lista a {
  /* El enlace ocupa toda la fila y 44px de alto: en el pie los enlaces cortos
     ("Grifos") dejaban un objetivo de 35×17px, imposible de acertar con el dedo. */
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--texto-suave);
  text-decoration: none;
  font-size: var(--paso--1);
}
.pie__lista a:hover { color: var(--texto); }
.pie__lista li { display: grid; }
.pie__legal { margin-top: var(--e-7); padding-top: var(--e-5); border-top: 1px solid var(--borde); font-size: var(--paso--2); color: var(--texto-suave); }

/* En el pie el wordmark va acompañado del nombre legal escrito: RSILVA es la
   marca gráfica, "Accesorios en Cobre" es cómo se llama el negocio. */
.pie__marca {
  display: grid;
  gap: var(--e-3);
  justify-items: start;
  align-content: start;   /* si no, la columna se estira y separa marca y nombre */
  color: var(--texto);
}
.pie__marca .wordmark { height: 1.75rem; }
.pie__nombre {
  font-family: var(--fuente-display);
  font-size: var(--paso-1);
  letter-spacing: var(--track-amplio);
  color: var(--texto);
}

/* ═══════════════════════════════════════════════════════════
   WHATSAPP FLOTANTE
   ═══════════════════════════════════════════════════════════ */
.wsp {
  position: fixed;
  right: var(--e-5);
  bottom: var(--e-5);
  z-index: var(--z-flotante);
  display: grid;
  justify-items: center;
  gap: var(--e-1);
}
.wsp__boton {
  width: 3.5rem; height: 3.5rem;
  display: grid; place-items: center;
  border-radius: var(--radio-completo);
  background: #25d366;
  color: #04240f;                 /* sobre #25d366 → 8.1:1  AAA */
  box-shadow: var(--sombra-2);
  transition: transform var(--dur-rapido) var(--ease-resorte);
}
.wsp__boton:hover { transform: scale(1.08); }

/* El icono verde promete WhatsApp. Mientras el número sea de ejemplo, el
   botón lleva a los datos de contacto y lo dice aquí, encima. */
.wsp__tag {
  padding: 0 var(--e-2);
  border-radius: var(--radio-completo);
  border: 1px solid var(--alerta);
  background: var(--fondo-elevado);
  color: var(--alerta);
  font-family: var(--fuente-mono);
  font-size: var(--paso--2);
  line-height: 1.7;
  box-shadow: var(--sombra-1);
}

/* ═══════════════════════════════════════════════════════════
   REVELADO AL ENTRAR EN PANTALLA
   ═══════════════════════════════════════════════════════════ */
[data-revelar] {
  opacity: 0;
  translate: 0 24px;
  transition: opacity var(--dur-normal) var(--ease-salida),
              translate var(--dur-normal) var(--ease-salida);
  transition-delay: var(--retardo, 0ms);
}
[data-revelar].visible { opacity: 1; translate: 0 0; }

/* Sin JS el contenido debe verse igual: nunca se queda invisible. */
.sin-js [data-revelar] { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  [data-revelar] { opacity: 1; translate: 0 0; transition: none; }
  .heroe__flecha { animation: none; }
}