/* =====================================================================
   E-PEREZ NAVAJAS DE CUERNO
   Hoja de estilo principal del sitio publico

   Direccion de diseno
   --------------------
   El giro es artesania de lujo heredada: navajas, cuchillos y hebillas
   con cacha de asta de venado, pintadas a mano. El sistema visual
   traduce el material del producto:

   · Tinta profunda y hueso cal, los dos tonos reales del asta curtido.
   · Laton antiguo como unico acento, en lugar del rojo saturado que
     usaba la version anterior: el laton evoca el metal de las hojas y
     el marco de las hebillas, y resulta masappropriate para una pieza
     de autor.
   · Tipografia serif de contraste alto para los titulos (herencia,
     taller) y sans geometrica de peso ligero para el texto (claridad
     de catalogo).
   · Filetes finos, indices numerados y mucho aire: la composicion
     imita una ficha de catalogo de museo, no una tienda de descuento.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------- */
:root {
  /* Tinta y hueso: los dos extremos del asta de venado */
  --tinta:            #14110E;
  --tinta-2:          #1F1A16;
  --tinta-3:          #2C2520;
  --hueso:            #F6F2EA;
  --hueso-2:          #EFE9DD;
  --hueso-3:          #E5DCCC;

  /* Laton antiguo: acento unico */
  --laton:            #B08D4F;
  --laton-claro:      #D4B77C;
  --laton-oscuro:     #8A6C36;

  /* Texto */
  --texto:            #221D18;
  --texto-medio:      #5C534A;
  --texto-suave:      #8A8075;
  --texto-hueso:      #EFE9DD;
  --texto-hueso-medio:#B5A995;
  --texto-hueso-tenue:#8A8075;

  /* Lineas */
  --filete:           #DCD3C2;
  --filete-fuerte:    #C3B7A2;
  --filete-tinta:     rgba(246, 242, 234, 0.14);
  --filete-tinta-2:   rgba(246, 242, 234, 0.28);

  /* Estados */
  --exito:            #4A6B4F;
  --alerta:           #A8571F;
  --error:            #9B2C22;

  /* Tipografia */
  --serif:  "Cormorant Garamond", "Times New Roman", Times, serif;
  --sans:   "Jost", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Medidas */
  --ancho-maximo: 1320px;
  --ancho-texto:  68ch;
  --alto-encabezado: 84px;
  --alto-barra-superior: 40px;

  /* Ritmo */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Sombras: sutiles y frias, nunca difusas */
  --sombra-sm: 0 1px 2px rgba(20, 17, 14, 0.06);
  --sombra-md: 0 4px 16px rgba(20, 17, 14, 0.08);
  --sombra-lg: 0 18px 48px rgba(20, 17, 14, 0.14);
  --sombra-humo: 0 24px 60px rgba(10, 8, 6, 0.35);

  /* Movimiento */
  --mov-rapido: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --mov-medio:  260ms cubic-bezier(0.4, 0, 0.2, 1);
  --mov-lento:  520ms cubic-bezier(0.16, 1, 0.3, 1);

  --alto-encabezado-movil: 68px;
}


/* ---------------------------------------------------------------------
   2. Reinicio
   --------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

/* El atributo hidden esconde el elemento con display:none, pero esa regla la
   pone el navegador y pierde contra cualquier clase del autor que tamben ponga
   display (por ejemplo .aviso, que es flex). Sin esta linea, los recuadros de
   error que se ocultan con hidden se veian de todos modos: vacios y en rojo.
   Afecta al del modal de WhatsApp y al de Stripe en el checkout. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-encabezado) + 20px);
}

body {
  min-height: 100vh;
  background: var(--hueso);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
svg { display: block; max-width: 100%; }

img { height: auto; }

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: 0; padding: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

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

hr {
  border: 0;
  border-top: 1px solid var(--filete);
  margin: 0;
}

::selection { background: var(--laton); color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--laton);
  outline-offset: 3px;
}


/* ---------------------------------------------------------------------
   3. Tipografia
   --------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
h2 { font-size: clamp(2rem, 3.8vw, 3.05rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
h4 { font-size: clamp(1.12rem, 1.5vw, 1.3rem); }

p { text-wrap: pretty; }

strong, b { font-weight: 500; }

/* Antetitulo: la linea pequena sobre cada titulo de seccion */
.antetitulo {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--laton-oscuro);
  margin-bottom: 20px;
}

.antetitulo::before {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
  flex: none;
}

.antetitulo--centro { justify-content: center; }
.antetitulo--centro::after {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
  flex: none;
}

.antetitulo--hueso { color: var(--laton-claro); }

/* Texto de apoyo bajo los titulos */
.bajada {
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--texto-medio);
  max-width: 60ch;
}

.bajada--hueso { color: var(--texto-hueso-medio); }

/* Indice numerado, recurso tipografico recurrente */
.indice {
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--laton);
  letter-spacing: 0.06em;
}

.rotulo {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-suave);
}


/* ---------------------------------------------------------------------
   4. Estructura
   --------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 64px);
}

.contenedor--angosto { max-width: 900px; }
.contenedor--medio  { max-width: 1100px; }

/* Antes eran clamp(64px, 9vw, 128px) y entre bloque y bloque quedaban casi
   dos pantallas de scroll en blanco. El sitio tiene muchas secciones seguidas
   y el aire se acumulo; estos valores dejan respirar sin perder la pagina. */
.seccion { padding-block: clamp(44px, 6vw, 88px); }
.seccion--ajustada { padding-block: clamp(36px, 4.5vw, 64px); }
.seccion--hueso    { background: var(--hueso); }
.seccion--arena   { background: var(--hueso-2); }
.seccion--tinta    { background: var(--tinta); color: var(--texto-hueso); }
.seccion--carbon   { background: var(--tinta-2); color: var(--texto-hueso); }

.seccion__cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(36px, 5vw, 60px);
  flex-wrap: wrap;
}

.seccion__cabecera h2 { max-width: 20ch; }

.seccion__cabecera--centro {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.seccion__cabecera--centro h2 { max-width: 24ch; }
.seccion__cabecera--centro .bajada { margin-inline: auto; }

/* "Tres lineas, un mismo material" cabe holgado en una pantalla ancha, pero el
   tope de 24ch del bloque centrado lo partia en tres renglones. Aqui se le
   quita el limite para que quede en uno solo, igual que pediste. */
.seccion__cabecera--centro h2.lineas-catalogo { max-width: none; }
.seccion__cabecera--centro h2.lineas-catalogo + .bajada { margin-inline: auto; }

/* Fila superior e inferior de una tabla sin borde visible */
.fila { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fila--entre { justify-content: space-between; }
.fila--centro { justify-content: center; }
.columna { display: flex; flex-direction: column; }
.oculto { display: none !important; }

/* Parrafo de apoyo: texto corto que explica o aclara algo */
.nota {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--texto-medio);
}

.nota--suave { color: var(--texto-suave); }
.nota--suave strong { color: var(--texto-medio); font-weight: 400; }

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ---------------------------------------------------------------------
   5. Botones
   --------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--mov-medio), color var(--mov-medio),
              border-color var(--mov-medio), transform var(--mov-rapido),
              box-shadow var(--mov-medio);
}

.boton:active { transform: translateY(1px); }

.boton--laton {
  background: var(--laton);
  color: var(--tinta);
  border-color: var(--laton);
}
.boton--laton:hover {
  background: var(--laton-oscuro);
  border-color: var(--laton-oscuro);
  color: #fff;
}

.boton--tinta {
  background: var(--tinta);
  color: var(--hueso);
  border-color: var(--tinta);
}
.boton--tinta:hover { background: var(--tinta-3); }

.boton--contorno {
  background: transparent;
  color: var(--texto);
  border-color: var(--filete-fuerte);
}
.boton--contorno:hover { border-color: var(--tinta); background: rgba(20, 17, 14, 0.03); }

.boton--contorno-hueso {
  background: transparent;
  color: var(--hueso);
  border-color: var(--filete-tinta-2);
}
.boton--contorno-hueso:hover { border-color: var(--laton-claro); color: #fff; }

.boton--texto {
  padding: 4px 0;
  background: none;
  color: var(--laton-oscuro);
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  letter-spacing: 0.12em;
}
.boton--texto:hover { color: var(--tinta); }

.boton--bloque { width: 100%; }
.boton--mini { padding: 9px 16px; font-size: 0.68rem; letter-spacing: 0.12em; }
.boton[disabled], .boton[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* Enlace con flecha, para "ver todo" */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--laton-oscuro);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color var(--mov-medio), border-color var(--mov-medio), gap var(--mov-medio);
}

.enlace-flecha::after {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: width var(--mov-medio);
}

.enlace-flecha:hover { color: var(--tinta); border-bottom-color: currentColor; }
.enlace-flecha:hover::after { width: 32px; }


/* ---------------------------------------------------------------------
   6. Barra superior y encabezado
   --------------------------------------------------------------------- */
.barra-superior {
  display: none;
}

.barra-superior__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding-block: 8px;
}

.barra-superior__dato {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.barra-superior__dato svg { width: 13px; height: 13px; opacity: 0.7; flex: none; }

.barra-superior__enlaces {
  display: flex;
  align-items: center;
  gap: 20px;
}

.barra-superior a { transition: color var(--mov-rapido); }
.barra-superior a:hover { color: var(--hueso); }

.encabezado {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(246, 242, 234, 0.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--filete);
  transition: box-shadow var(--mov-medio), background var(--mov-medio);
}

.encabezado.esta-desplazado { box-shadow: var(--sombra-md); background: rgba(246, 242, 234, 0.98); }

.encabezado__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: var(--alto-encabezado);
}

.marca { display: flex; align-items: center; gap: 14px; flex: none; }

.marca__logo {
  height: 58px;
  width: auto;
  transition: transform var(--mov-lento);
}

.marca:hover .marca__logo { transform: scale(1.03); }

.marca__texto { display: flex; flex-direction: column; line-height: 1.15; }

.marca__nombre {
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--tinta);
}

.marca__lema {
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-top: 3px;
}

/* Navegacion principal */
.navegacion { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); }

.navegacion__enlace {
  position: relative;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--texto);
  padding-block: 8px;
  transition: color var(--mov-rapido);
  white-space: nowrap;
}

.navegacion__enlace::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0;
  height: 1px;
  background: var(--laton);
  transition: width var(--mov-medio);
}

.navegacion__enlace:hover::after,
.navegacion__enlace.es-activo::after { width: 100%; }

.navegacion__enlace.es-activo { color: var(--laton-oscuro); }

/* Acciones de la derecha */
.encabezado__acciones { display: flex; align-items: center; gap: 6px; flex: none; }

.icono-boton {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-pill);
  color: var(--texto);
  transition: background var(--mov-rapido), color var(--mov-rapido);
}

.icono-boton:hover { background: rgba(20, 17, 14, 0.06); }
.icono-boton svg { width: 19px; height: 19px; }

.contador {
  position: absolute;
  top: 4px;
  right: 3px;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  background: var(--laton);
  color: var(--tinta);
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
  transition: transform var(--mov-medio);
}

.contador.esta-oculto { transform: scale(0); }
.contador.animar { animation: latir 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes latir {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* Menú desplegable de categorías */
.menu-desplegable { position: relative; }
.menu-desplegable__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 250px;
  background: var(--hueso);
  border: 1px solid var(--filete);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-lg);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mov-medio), transform var(--mov-medio), visibility var(--mov-medio);
  z-index: 10;
}

.menu-desplegable:hover .menu-desplegable__panel,
.menu-desplegable:focus-within .menu-desplegable__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.menu-desplegable__enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  color: var(--texto);
  transition: background var(--mov-rapido), color var(--mov-rapido);
}

.menu-desplegable__enlace:hover { background: var(--hueso-2); color: var(--laton-oscuro); }
.menu-desplegable__enlace span { color: var(--texto-suave); font-size: 0.75rem; }

/* Carrito del menu: lista al agregar, solo en escritorio.
   La lista hace scroll; los botones se quedan abajo. */
.mini-carrito { position: relative; }

.mini-carrito__panel { display: none; }

@media (min-width: 1001px) {
  .mini-carrito--lleno:hover .mini-carrito__panel,
  .mini-carrito--lleno:focus-within .mini-carrito__panel,
  .mini-carrito--lleno.esta-abierto .mini-carrito__panel {
    display: block;
  }

  .mini-carrito__panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 30;
    width: 340px;
    padding-top: 12px;
  }

  .mini-carrito__caja {
    display: flex;
    flex-direction: column;
    max-height: min(70vh, 460px);
    background: #fff;
    border: 1px solid var(--filete);
    border-radius: var(--r-md);
    box-shadow: var(--sombra-lg);
    overflow: hidden;
  }

  .mini-carrito__titulo {
    flex: none;
    margin: 0;
    padding: 14px 16px 10px;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--laton-oscuro);
  }

  .mini-carrito__lista {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0 8px 8px;
    list-style: none;
    overflow-y: auto;
  }

  .mini-carrito__item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 8px;
  }

  .mini-carrito__item + .mini-carrito__item {
    border-top: 1px solid var(--filete);
  }

  .mini-carrito__item img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--r-sm);
    background: var(--hueso-2);
  }

  .mini-carrito__nombre {
    display: block;
    font-family: var(--serif);
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--tinta);
  }

  .mini-carrito__nombre:hover { color: var(--laton-oscuro); }

  .mini-carrito__meta {
    margin: 4px 0 0;
    font-size: 0.75rem;
    color: var(--texto-suave);
  }

  .mini-carrito__importe {
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--tinta);
    white-space: nowrap;
  }

  .mini-carrito__pie {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--filete);
    background: #fff;
  }

  .mini-carrito__subtotal {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0 0 4px;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texto-suave);
  }

  .mini-carrito__subtotal strong {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tinta);
  }
}

/* Menú móvil */
.boton-menu { display: none; }

.panel-movil {
  position: fixed;
  inset: 0;
  z-index: 300;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}

.panel-movil.esta-abierto { visibility: visible; pointer-events: auto; }

.panel-movil__fondo {
  position: absolute;
  inset: 0;
  background: rgba(20, 17, 14, 0.5);
  opacity: 0;
  transition: opacity var(--mov-medio);
}

.panel-movil.esta-abierto .panel-movil__fondo { opacity: 1; }

.panel-movil__caja {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 88vw);
  background: var(--hueso);
  padding: 24px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--mov-lento);
  box-shadow: var(--sombra-humo);
}

.panel-movil.esta-abierto .panel-movil__caja { transform: translateX(0); }

.panel-movil__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--filete);
  margin-bottom: 8px;
}

.panel-movil__grupo { padding-block: 20px; border-bottom: 1px solid var(--filete); }
.panel-movil__grupo:last-of-type { border-bottom: 0; }

.panel-movil__titulo {
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--laton-oscuro);
  margin-bottom: 14px;
}

.panel-movil__enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--tinta);
  border-bottom: 1px solid transparent;
  transition: color var(--mov-rapido);
}

.panel-movil__enlace:hover { color: var(--laton-oscuro); }
.panel-movil__enlace span { font-family: var(--sans); font-size: 0.74rem; color: var(--texto-suave); }

.panel-movil__contacto { margin-top: auto; padding-top: 24px; }


/* ---------------------------------------------------------------------
   7. Portada
   --------------------------------------------------------------------- */
/* El hero ocupaba min-height: clamp(560px, 82vh, 800px), o sea casi una
   pantalla completa, y el catalogo quedaba debajo del primer scroll. Ahora la
   imagen sigue siendo protagonista pero se ve la primera seccion de una vez. */
.portada {
    position: relative;
    min-height: clamp(430px, 64vh, 620px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--tinta);
    isolation: isolate;
}

.portada__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  z-index: -2;
  transform: scale(1.04);
  animation: PortaAmpliar 14s ease-out forwards;
}

@keyframes PortaAmpliar {
  from { transform: scale(1.09); }
  to   { transform: scale(1.0); }
}

/* Velo en capas: garantiza legibilidad sin aplanar la fotografia */
.portada::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(12, 10, 8, 0.94) 0%, rgba(12, 10, 8, 0.62) 38%, rgba(12, 10, 8, 0.28) 68%, rgba(12, 10, 8, 0.5) 100%),
    linear-gradient(to right, rgba(12, 10, 8, 0.62) 0%, rgba(12, 10, 8, 0.12) 62%);
}

.portada__contenido {
    position: relative;
    width: 100%;
    padding-block: clamp(40px, 5.5vw, 72px);
    color: var(--hueso);
}

.portada__titulo {
  max-width: 17ch;
  color: var(--hueso);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
  margin-bottom: 22px;
}

.portada__bajada {
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.75;
  color: rgba(246, 242, 234, 0.84);
  max-width: 48ch;
  margin-bottom: 36px;
}

.portada__acciones { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Detalle inferior de la portada */
.portada__pie {
  position: absolute;
  right: clamp(20px, 5vw, 64px);
  bottom: clamp(40px, 5.5vw, 72px);
  display: none;
  text-align: right;
  color: rgba(246, 242, 234, 0.62);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  line-height: 1.9;
  max-width: 260px;
}

.portada__pie strong {
  display: block;
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 300;
  color: var(--laton-claro);
  line-height: 1;
  margin-bottom: 6px;
}

@media (min-width: 1000px) {
  .portada__pie { display: block; }
}

/* Cinta de garantias bajo la portada */
.cinta {
  background: var(--tinta-2);
  color: var(--texto-hueso-medio);
  border-block: 1px solid var(--filete-tinta);
}

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

.cinta__dato {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 26px clamp(12px, 2vw, 28px);
  border-left: 1px solid var(--filete-tinta);
}

.cinta__dato:first-child { border-left: 0; }
.cinta__dato svg { width: 22px; height: 22px; color: var(--laton); flex: none; }

.cinta__texto strong {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--hueso);
  margin-bottom: 2px;
}

.cinta__texto span { font-size: 0.78rem; color: var(--texto-hueso-tenue); }


/* ---------------------------------------------------------------------
   8. Categorias destacadas
   --------------------------------------------------------------------- */
.tarjetas-categoria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
}

.tarjeta-categoria {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--tinta);
  border-radius: var(--r-sm);
  aspect-ratio: 3 / 4;
  isolation: isolate;
}

.tarjeta-categoria__imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tarjeta-categoria::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(12, 10, 8, 0.9) 0%, rgba(12, 10, 8, 0.42) 42%, rgba(12, 10, 8, 0.1) 100%);
  transition: background var(--mov-lento);
}

.tarjeta-categoria:hover .tarjeta-categoria__imagen { transform: scale(1.06); }
.tarjeta-categoria:hover::after {
  background: linear-gradient(to top, rgba(12, 10, 8, 0.94) 0%, rgba(12, 10, 8, 0.5) 48%, rgba(12, 10, 8, 0.18) 100%);
}

.tarjeta-categoria__contenido {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(22px, 3vw, 34px);
  color: var(--hueso);
}

.tarjeta-categoria__indice {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--laton-claro);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 8px;
}

.tarjeta-categoria__nombre {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 10px;
}

.tarjeta-categoria__conteo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246, 242, 234, 0.66);
  margin-bottom: 16px;
}

.tarjeta-categoria__conteo::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--laton);
}

.tarjeta-categoria__ver {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--laton-claro);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--mov-medio), transform var(--mov-medio);
}

.tarjeta-categoria:hover .tarjeta-categoria__ver { opacity: 1; transform: translateY(0); }


/* ---------------------------------------------------------------------
   9. Seccion del taller
   --------------------------------------------------------------------- */
.taller {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.taller__texto h2 { margin-bottom: 24px; }
.taller__texto .bajada { margin-bottom: 30px; }

.taller__pasos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--filete);
  border: 1px solid var(--filete);
  margin-top: 34px;
}

.taller__paso {
  background: var(--hueso);
  padding: 22px 20px;
}

.taller__paso-num {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--laton);
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}

.taller__paso strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.taller__paso p { font-size: 0.88rem; line-height: 1.65; color: var(--texto-medio); }

.taller__medio {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--tinta-2);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--sombra-lg);
}

.taller__medio video,
.taller__medio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Marco decorativo: filete de laton desplazado */
.taller__medio::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(212, 183, 124, 0.42);
  pointer-events: none;
  border-radius: 2px;
}

/* Firma sobre la foto: va dentro de .taller__medio, asi que el offset
   left/right se toma de la foto, no de la pantalla. */
.taller__firma {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 26px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  color: var(--hueso);
  z-index: 2;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75);
}

.taller__firma-texto {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75);
}

/* El dato de fundacion no debe partirse en dos lineas. */
.taller__firma .indice {
  white-space: nowrap;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75);
}


/* ---------------------------------------------------------------------
   10. Rejilla y tarjeta de producto
   --------------------------------------------------------------------- */
.rejilla-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: clamp(18px, 2.2vw, 34px);
}

/* Tienda: un poco mas de aire entre piezas. */
.rejilla-productos--aire {
  gap: clamp(28px, 3.2vw, 48px);
}

/* Fondo blanco en la tienda, las destacadas del inicio y las piezas
   de nosotros, para que titulo, precio y botones no se fundan con el
   hueso de la pagina. */
.rejilla-productos--placa .tarjeta-producto {
  background: #fff;
  border: 1px solid var(--filete);
  border-radius: var(--r-md);
  padding: 10px 10px 16px;
  box-shadow: var(--sombra-sm);
}

.rejilla-productos--placa .tarjeta-producto__datos,
.rejilla-productos--placa .tarjeta-producto__acciones {
  padding-inline: 6px;
}

.rejilla-productos--placa .tarjeta-producto__precios {
  justify-content: center;
}

/* ---------------------------------------------------------------------
   Variante de tres tarjetas.

   La rejilla general usa auto-fill, asi que con solo tres piezas la
   cuarta columna queda vacia y la fila se ve chueca. Aqui se fija en tres
   columnas iguales y se centra el bloque completo con margin-inline, de
   modo que las tres tarjetas queden en la misma fila y al centro.
   --------------------------------------------------------------------- */
.rejilla-productos--tres {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 900px;
  margin-inline: auto;
}

/* Los precios quedan al pie de la tarjeta para que las tres filas
   terminen a la misma altura, sin importar el largo de cada nombre. */
.rejilla-productos--tres .tarjeta-producto__precios {
  margin-top: auto;
  padding-top: 14px;
}

.tarjeta-producto {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
}

.tarjeta-producto__medio {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1.04;
  overflow: hidden;
  background: var(--hueso-2);
  border: 1px solid var(--hueso-3);
  border-radius: var(--r-sm);
  margin-bottom: 18px;
}

/* Bloque de texto: mantiene el precio en el mismo sitio en todas las tarjetas */
.tarjeta-producto__datos {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
}

.tarjeta-producto__imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--mov-lento), transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* La segunda foto aparece al pasar el cursor: la pieza girada */
.tarjeta-producto__imagen--alt { opacity: 0; }

@media (hover: hover) {
  .tarjeta-producto:hover .tarjeta-producto__imagen--principal { opacity: 0; }
  .tarjeta-producto:hover .tarjeta-producto__imagen--alt { opacity: 1; transform: scale(1.04); }
}

.tarjeta-producto__insignia {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.insignia {
  display: inline-block;
  padding: 5px 11px;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--r-xs);
  background: var(--tinta);
  color: var(--hueso);
}

.insignia--oferta  { background: var(--alerta); color: #fff; }
.insignia--nuevo   { background: var(--exito); color: #fff; }
.insignia--agotado { background: var(--texto-medio); color: var(--hueso); }
.insignia--laton   { background: var(--laton); color: var(--tinta); }

/* Linea del producto, en la esquina superior derecha de la foto.
   No compite con las insignias de oferta/nuevo, que viven a la izquierda. */
.tarjeta-producto__linea {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  max-width: calc(100% - 24px);
  padding: 6px 11px;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--tinta);
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--r-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ver la pieza y agregar al carrito: siempre a la vista, sin depender del
   cursor. Se reparten la fila y, si no caben los dos, se apilan. */
.tarjeta-producto__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.tarjeta-producto__acciones .boton {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  letter-spacing: 0.08em;
}

.tarjeta-producto__nombre {
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--tinta);
  margin-bottom: 8px;
  transition: color var(--mov-rapido);
}

.tarjeta-producto:hover .tarjeta-producto__nombre { color: var(--laton-oscuro); }

.tarjeta-producto__precios {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
}

.precio {
  font-family: var(--serif);
  font-size: 1.42rem;
  font-weight: 400;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.precio-sufijo {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  text-transform: lowercase;
  white-space: nowrap;
}

.precio--anterior {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--texto-suave);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.tarjeta-producto__estado {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--texto-suave);
  margin-top: 5px;
}

.tarjeta-producto__estado--agotado { color: var(--error); }
.tarjeta-producto__estado--ultimas { color: var(--alerta); }

/* Variante sobre fondo oscuro */
.seccion--tinta .tarjeta-producto__nombre,
.seccion--tinta .precio,
.seccion--carbon .tarjeta-producto__nombre,
.seccion--carbon .precio { color: var(--hueso); }

.seccion--tinta .tarjeta-producto__medio,
.seccion--carbon .tarjeta-producto__medio {
  background: var(--tinta-3);
  border-color: var(--filete-tinta);
}


/* ---------------------------------------------------------------------
   11. Banda editorial (pieza insignia)
   --------------------------------------------------------------------- */
.banda-editorial {
  position: relative;
  overflow: hidden;
  background: var(--tinta);
  isolation: isolate;
}

.banda-editorial__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  z-index: -2;
}

.banda-editorial::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, rgba(12, 10, 8, 0.95) 22%, rgba(12, 10, 8, 0.62) 100%);
}

.banda-editorial__contenido {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(56px, 8vw, 108px);
  color: var(--hueso);
}

.banda-editorial h2 { color: var(--hueso); margin-bottom: 22px; }
.banda-editorial__lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--filete-tinta);
  border: 1px solid var(--filete-tinta);
  margin-top: 30px;
}

.banda-editorial__punto {
  background: rgba(20, 17, 14, 0.55);
  padding: 20px;
  display: flex;
  gap: 13px;
  align-items: flex-start;
}

.banda-editorial__punto svg { width: 19px; height: 19px; color: var(--laton); flex: none; margin-top: 2px; }
.banda-editorial__punto strong { display: block; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; color: var(--hueso); }
.banda-editorial__punto p { font-size: 0.86rem; line-height: 1.6; color: var(--texto-hueso-medio); }

.banda-editorial__precio {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 26px 0;
  flex-wrap: wrap;
}

.banda-editorial__precio .precio { color: var(--laton-claro); font-size: 2.1rem; }
.banda-editorial__precio .precio-sufijo { color: var(--texto-hueso-tenue); }


/* ---------------------------------------------------------------------
   12. Tienda: barra de filtros
   --------------------------------------------------------------------- */
/* La cabecera de pagina (titulos + migas) ocupaba mucho espacio con
   padding-block: clamp(48px, 6vw, 84px). Se baja un poco para que el
   catalogo aparezca antes de que el visitante haga scroll. */
.cabecera-pagina {
    position: relative;
    background: var(--tinta);
    color: var(--hueso);
    overflow: hidden;
    isolation: isolate;
    padding-block: clamp(34px, 4.5vw, 58px);
}

.cabecera-pagina__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.14;
  z-index: -2;
}

.cabecera-pagina::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, rgba(12, 10, 8, 0.94) 40%, rgba(12, 10, 8, 0.5));
}

.cabecera-pagina h1 { color: var(--hueso); margin-bottom: 12px; }
.cabecera-pagina .bajada { color: var(--texto-hueso-medio); }

/* Migas de pan */
.migas {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--texto-suave);
    margin-bottom: 12px;
}

.migas a { transition: color var(--mov-rapido); }
.migas a:hover { color: var(--laton-oscuro); }
.migas__separador { opacity: 0.5; }
.migas span[aria-current] { color: var(--texto); }

.cabecera-pagina .migas { color: var(--texto-hueso-tenue); }
.cabecera-pagina .migas a:hover { color: var(--laton-claro); }
.cabecera-pagina .migas span[aria-current] { color: var(--hueso); }

.panel-filtros {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 0;
  border-bottom: 1px solid var(--filete);
  margin-bottom: clamp(28px, 4vw, 44px);
}

/* ---------------------------------------------------------------------
   Catalogo de la tienda
   ---------------------------------------------------------------------
   La primera fila de piezas tiene que caber en la pantalla sin desplazamiento:
   el visitante no deberia tener que bajar para ver que hay navajas. Por eso la
   seccion del catalogo recorta el aire de arriba y deja el bloque de filtros
   pegado al banner, con un margen corto pero no nulo para que no se sienta
   amontonado.
   --------------------------------------------------------------------- */
.seccion--catalogo {
  padding-block: clamp(24px, 2.8vw, 40px) clamp(40px, 5vw, 64px);
}

.seccion--catalogo .panel-filtros {
  margin-bottom: clamp(16px, 2vw, 24px);
}

.seccion--catalogo .resumen-tienda {
  margin-bottom: clamp(18px, 2.2vw, 26px);
  padding-bottom: 14px;
}

.filtros-categoria {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 17px;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-medio);
  border: 1px solid var(--filete);
  border-radius: var(--r-pill);
  transition: all var(--mov-rapido);
  white-space: nowrap;
}

.pastilla:hover { border-color: var(--tinta); color: var(--tinta); }

.pastilla.es-activa {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--hueso);
}

.pastilla__conteo { opacity: 0.55; font-size: 0.66rem; }

.campo-busqueda { position: relative; display: flex; align-items: center; }
.campo-busqueda svg { position: absolute; left: 13px; width: 15px; height: 15px; color: var(--texto-suave); pointer-events: none; }

.campo-busqueda input {
  width: 240px;
  padding: 11px 14px 11px 38px;
  font-size: 0.86rem;
  font-weight: 300;
  background: transparent;
  border: 1px solid var(--filete);
  border-radius: var(--r-pill);
  transition: border-color var(--mov-rapido), width var(--mov-medio);
}

.campo-busqueda input::placeholder { color: var(--texto-suave); }
.campo-busqueda input:focus { outline: none; border-color: var(--tinta); width: 280px; }

/* Panel desplegable de rango de precio */
.filtros-precio { position: relative; }

.desplegable-filtro__disparador {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto);
  border: 1px solid var(--filete);
  border-radius: var(--r-pill);
  transition: border-color var(--mov-rapido);
  white-space: nowrap;
}

.desplegable-filtro__disparador:hover { border-color: var(--tinta); }
.desplegable-filtro__disparador svg { width: 13px; height: 13px; transition: transform var(--mov-medio); }
.desplegable-filtro.esta-abierto .desplegable-filtro__disparador svg { transform: rotate(180deg); }
.desplegable-filtro.esta-abierto .desplegable-filtro__disparador { border-color: var(--tinta); }

.desplegable-filtro__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: 290px;
  padding: 22px;
  background: var(--hueso);
  border: 1px solid var(--filete);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--mov-medio), transform var(--mov-medio), visibility var(--mov-medio);
}

.desplegable-filtro:not(.esta-abierto) .desplegable-filtro__panel {
  display: none;
}

.desplegable-filtro.esta-abierto .desplegable-filtro__panel {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.rango-precios { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.rango-precios label { display: block; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 6px; }
.desplegable-filtro__acciones { display: flex; gap: 8px; }
.desplegable-filtro__acciones .boton { flex: 1; }

.rango-activo { display: flex; align-items: center; gap: 8px; font-size: 0.7rem; color: var(--laton-oscuro); letter-spacing: 0.06em; }
.rango-activo button { color: var(--texto-suave); text-decoration: underline; font-size: 0.7rem; }
.rango-activo button:hover { color: var(--error); }

/* Resumen de resultados y orden */
.resumen-tienda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--filete);
}

.resumen-tienda__conteo { font-size: 0.84rem; color: var(--texto-medio); }
.resumen-tienda__conteo strong { color: var(--tinta); font-weight: 500; }

.orden-selector { display: flex; align-items: center; gap: 10px; }

.orden-selector label { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-suave); }

.orden-selector select {
  padding: 9px 34px 9px 14px;
  font-size: 0.8rem;
  font-weight: 300;
  background-color: transparent;
  border: 1px solid var(--filete);
  border-radius: var(--r-pill);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C534A' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 13px;
  transition: border-color var(--mov-rapido);
}

.orden-selector select:hover, .orden-selector select:focus { border-color: var(--tinta); outline: none; }

/* Paginacion */
.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: clamp(40px, 5vw, 68px);
  flex-wrap: wrap;
}

.paginacion a,
.paginacion span {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 12px;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--filete);
  border-radius: var(--r-sm);
  color: var(--texto-medio);
  transition: all var(--mov-rapido);
}

.paginacion a:hover { border-color: var(--tinta); color: var(--tinta); }
.paginacion .es-activa { background: var(--tinta); border-color: var(--tinta); color: var(--hueso); }
.paginacion .esta-d disabled { opacity: 0.35; pointer-events: none; }
.paginacion__puntos { color: var(--texto-suave); border: 0; min-width: 24px; }


/* ---------------------------------------------------------------------
   13. Ficha de producto
   --------------------------------------------------------------------- */
.ficha { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 4.5vw, 72px); align-items: start; }

.galeria { position: sticky; top: calc(var(--alto-encabezado) + 24px); }

.galeria__principal {
  position: relative;
  aspect-ratio: 1 / 1.04;
  background: var(--hueso-2);
  border: 1px solid var(--hueso-3);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: 12px;
  cursor: zoom-in;
}

.galeria__principal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.galeria__principal:hover img { transform: scale(1.05); }

.galeria__zoom {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: rgba(246, 242, 234, 0.92);
  border-radius: var(--r-pill);
  color: var(--tinta);
  pointer-events: none;
  backdrop-filter: blur(4px);
}

.galeria__zoom svg { width: 16px; height: 16px; }

.galeria__miniaturas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 10px;
}

.galeria__miniatura {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--filete);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--hueso-2);
  transition: border-color var(--mov-rapido), opacity var(--mov-rapido);
  opacity: 0.62;
}

.galeria__miniatura img { width: 100%; height: 100%; object-fit: cover; }
.galeria__miniatura:hover { opacity: 1; }
.galeria__miniatura.es-activa { border-color: var(--tinta); opacity: 1; }

.ficha__categoria {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--laton-oscuro);
  margin-bottom: 14px;
}

.ficha__categoria::before { content: ""; width: 22px; height: 1px; background: currentColor; }

/* El titulo de la ficha va en h2 para que la pagina tenga un solo h1 (el de la
   cabecera), pero se queda con el tamano tipografico del h1: es el nombre de la
   pieza y tiene que seguir leyendose como el titulo principal de la vista. */
.ficha__titulo { font-size: clamp(2.6rem, 5.4vw, 4.4rem); margin-bottom: 18px; }

.ficha__precios {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--filete);
  margin-bottom: 24px;
}

.ficha__precios .precio { font-size: 2.3rem; }

.ficha__extracto {
  font-size: 1rem;
  line-height: 1.78;
  color: var(--texto-medio);
  margin-bottom: 26px;
}

.ficha__estado {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--exito);
  margin-bottom: 22px;
}

.ficha__estado::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.ficha__estado--agotado { color: var(--error); }
.ficha__estado--ultimas { color: var(--alerta); }
.ficha__estado--pedido { color: var(--laton-oscuro); }

.ficha__envio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 0 22px;
  padding: 14px 16px;
  background: var(--hueso-2);
  border: 1px solid var(--filete);
  border-radius: var(--r-sm);
}

.ficha__envio svg { width: 17px; height: 17px; color: var(--laton-oscuro); flex: none; margin-top: 2px; }
.ficha__envio strong { display: block; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.ficha__envio p { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--texto-medio); }
.ficha__envio p + p { margin-top: 4px; }

/* Selector de cantidad */
.cantidad {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.cantidad button {
  width: 42px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--texto-medio);
  font-size: 1.1rem;
  transition: background var(--mov-rapido), color var(--mov-rapido);
}

.cantidad button:hover:not([disabled]) { background: var(--hueso-2); color: var(--tinta); }
.cantidad button[disabled] { opacity: 0.3; cursor: not-allowed; }

.cantidad input {
  width: 48px;
  height: 46px;
  border: 0;
  border-inline: 1px solid var(--filete-fuerte);
  text-align: center;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  background: transparent;
  -moz-appearance: textfield;
}

.cantidad input::-webkit-outer-spin-button,
.cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cantidad input:focus { outline: none; background: var(--hueso-2); }

/* Bloque de compra */
.compra { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; margin-bottom: 22px; }
.compra .cantidad { flex: none; }
.compra .boton { flex: 1; min-width: 200px; }

.pedido-personalizado {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: var(--hueso-2);
  border: 1px solid var(--hueso-3);
  border-left: 2px solid var(--laton);
  border-radius: var(--r-sm);
  margin-bottom: 26px;
}

.pedido-personalizado svg { width: 17px; height: 17px; color: var(--laton-oscuro); flex: none; margin-top: 3px; }
.pedido-personalizado strong { display: block; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
.pedido-personalizado p { font-size: 0.86rem; line-height: 1.6; color: var(--texto-medio); }

/* Ficha tecnica */
.ficha-tecnica { margin-block: 34px; border-top: 1px solid var(--filete); }

.ficha-tecnica__titulo {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--laton-oscuro);
  margin: 28px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--filete);
}

.ficha-tecnica__descripcion p { margin-bottom: 14px; color: var(--texto-medio); line-height: 1.75; }

.ficha-tecnica__descripcion ul { display: grid; gap: 9px; }
.ficha-tecnica__descripcion li { position: relative; padding-left: 22px; color: var(--texto-medio); line-height: 1.65; }
.ficha-tecnica__descripcion li::before { content: ""; position: absolute; left: 0; top: 10px; width: 9px; height: 1px; background: var(--laton); }

/* "Que trae" en dos columnas: las multiherramientas traen mas de veinte
   lineas y en una sola la ficha se alargaba demasiado. Se usa multi-column
   y no grid para que el texto fluya solo hasta llenar la primera columna
   (con grid las lineas largas dejarian huecos feos en la segunda).
   La clase se agrega desde producto.php solo cuando hay 6 lineas o mas. */
.ficha-tecnica__descripcion ul.lista-columnas {
  display: block;
  columns: 2;
  column-gap: clamp(20px, 2.4vw, 34px);
}
.ficha-tecnica__descripcion ul.lista-columnas li { margin-bottom: 9px; break-inside: avoid; }
.ficha-tecnica__descripcion ul.lista-columnas li:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .ficha-tecnica__descripcion ul.lista-columnas { columns: 1; }
}

.datos-tecnicos { display: grid; gap: 0; border: 1px solid var(--filete); border-radius: var(--r-sm); overflow: hidden; }

.dato-tecnico {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 16px;
  padding: 13px 16px;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--filete);
}

.dato-tecnico:last-child { border-bottom: 0; }
.dato-tecnico:nth-child(odd) { background: rgba(239, 233, 221, 0.4); }
.dato-tecnico dt { color: var(--texto-suave); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 2px; }
.dato-tecnico dd { color: var(--texto); }

/* Bloque de garantias del producto */
.garantias-producto {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  padding-top: 28px;
  border-top: 1px solid var(--filete);
}

.garantia-producto { display: flex; gap: 12px; align-items: flex-start; }
.garantia-producto svg { width: 19px; height: 19px; color: var(--laton-oscuro); flex: none; margin-top: 2px; }
.garantia-producto strong { display: block; font-size: 0.76rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 3px; }
.garantia-producto p { font-size: 0.84rem; line-height: 1.55; color: var(--texto-medio); }


/* ---------------------------------------------------------------------
   13.b Reseñas de la pieza

   Las estrellas se dibujan con el glifo de estrella (★) para no
   depender de una fuente de iconos: el sitio ya carga una sola hoja de
   estilo y el SVG de incluye/iconos.php no tiene una estrella de cinco
   puntas. El color lo pone el laton, el unico acento de la paleta.
   --------------------------------------------------------------------- */

.estrellas {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
  vertical-align: middle;
}

.estrella {
  font-size: 0.95rem;
  color: var(--laton);
}

.estrella--vacia { color: var(--filete-fuerte); }
.estrella--media { opacity: 0.55; }

.estrellas__texto {
  margin-left: 8px;
  font-size: 0.8rem;
  color: var(--texto-medio);
  letter-spacing: 0.02em;
}

/* Enlace al bloque de reseñas que va junto al precio */
.ficha__valoracion {
  display: inline-block;
  margin-bottom: 18px;
  text-decoration: none;
}

.ficha__valoracion:hover .estrellas__texto { color: var(--laton-oscuro); }

/* Rejilla general: resumen a la izquierda, lista a la derecha */
.resenas {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.resenas__resumen {
  padding: 26px 24px;
  background: var(--hueso);
  border: 1px solid var(--filete);
  border-radius: var(--r-sm);
}

.resenas__promedio {
  font-family: var(--serif);
  font-size: 3rem;
  line-height: 1;
  color: var(--tinta);
  margin-bottom: 10px;
}

.resenas__promedio-max {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--texto-suave);
  letter-spacing: 0.08em;
  margin-left: 6px;
}

.resenas__conteo {
  font-size: 0.8rem;
  color: var(--texto-medio);
  margin-top: 10px;
  margin-bottom: 20px;
}

.resenas__reparto {
  display: grid;
  gap: 7px;
  padding-top: 18px;
  border-top: 1px solid var(--filete);
}

.resenas__fila {
  display: grid;
  grid-template-columns: 74px 1fr 26px;
  gap: 10px;
  align-items: center;
  font-size: 0.76rem;
  color: var(--texto-medio);
}

.resenas__fila-estrellas { white-space: nowrap; }

.resenas__barra {
  height: 5px;
  background: var(--hueso-3);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.resenas__barra-llena {
  display: block;
  height: 100%;
  background: var(--laton);
  border-radius: var(--r-pill);
}

.resenas__fila-cuenta {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--texto-suave);
}

.resenas__vacio {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--texto-medio);
}

.resenas__lista { display: grid; gap: 26px; }

.resena {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--filete);
}

.resena:last-child { border-bottom: 0; padding-bottom: 0; }

.resena__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.resena__autor {
  font-size: 0.94rem;
  color: var(--tinta);
  font-weight: 400;
}

.resena__fecha {
  font-size: 0.76rem;
  color: var(--texto-suave);
  margin-top: 3px;
}

.resena__verificada {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--r-pill);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--exito);
}

.resena__titulo {
  font-family: var(--serif);
  font-size: 1.28rem;
  color: var(--tinta);
  margin-bottom: 6px;
}

.resena__texto {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--texto-medio);
  white-space: pre-line;
}

.resenas__formulario {
  margin-top: clamp(38px, 5vw, 62px);
  padding: clamp(24px, 3.5vw, 40px);
  background: var(--hueso);
  border: 1px solid var(--filete);
  border-radius: var(--r-sm);
}

.resenas__formulario h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  margin-bottom: 8px;
}

/* Selector de estrellas del formulario: cinco botones de radio */
.estrellas-estrella {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 4px;
}

.estrellas-estrella__opcion {
  position: relative;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--filete-fuerte);
  transition: color var(--mov-rapido);
}

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

/* Al pasar el raton se encienden las estrellas de la izquierda.
   El HTML va de la 5 a la 1 y el contenedor esta en row-reverse, asi que
   lo que se ve de izquierda a derecha es 1, 2, 3, 4, 5. Por eso los
   selectores ~ (hermanos siguientes en el HTML) encienden las de menor
   numero, que son las de la izquierda. */
.estrellas-estrella__opcion:hover,
.estrellas-estrella__opcion:hover ~ .estrellas-estrella__opcion,
.estrellas-estrella__opcion:has(input:checked),
.estrellas-estrella__opcion:has(input:checked) ~ .estrellas-estrella__opcion {
  color: var(--laton);
}

.estrellas-estrella__opcion:focus-within { outline: 2px solid var(--laton); outline-offset: 3px; }


/* ---------------------------------------------------------------------
   14. Contenido editorial (Nosotros, FAQ, etc.)
   --------------------------------------------------------------------- */

/* Paginas de texto (aviso de privacidad): el contenido va centrado, que
   es como lo pidio el cliente. */
.texto-centrado { text-align: center; }
.texto-centrado h3 { margin-top: 36px; }
.texto-centrado h3:first-child { margin-top: 0; }
.texto-centrado p { max-width: 68ch; margin-inline: auto; }
.texto-centrado .bajada p { margin-inline: auto; }
.texto-centrado .acordeon__pregunta {
  position: relative;
  text-align: center;
  justify-content: center;
  padding-right: 38px;
}
.texto-centrado .acordeon__signo {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -7px;
}
.texto-centrado .acordeon__respuesta p { margin-inline: auto; }

/* Bloque que lleva a la pagina de terminos y condiciones. */
.terminos-enlace {
  border: 1px solid var(--filete);
  border-radius: var(--r-sm);
  background: var(--hueso);
  padding: clamp(26px, 4vw, 46px);
  box-shadow: var(--sombra-md);
}

.columnas { columns: 2; column-gap: clamp(28px, 4vw, 60px); column-rule: 1px solid var(--filete); }
.columnas p { break-inside: avoid; margin-bottom: 18px; line-height: 1.85; color: var(--texto-medio); }
.columnas p:first-child::first-letter {
  float: left;
  font-family: var(--serif);
  font-size: 4.1rem;
  line-height: 0.82;
  padding: 6px 12px 0 0;
  color: var(--laton-oscuro);
}

.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--filete-tinta); border: 1px solid var(--filete-tinta); }

.cifra { background: var(--tinta-2); padding: clamp(22px, 3vw, 34px); text-align: center; }
.cifra__valor { font-family: var(--serif); font-size: clamp(2.2rem, 3.6vw, 3.1rem); font-weight: 300; color: var(--laton-claro); line-height: 1; margin-bottom: 10px; }
.cifra__etiqueta { font-size: 0.68rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texto-hueso-medio); }

/* Preguntas frecuentes: acordeon accesible sin dependencias */
.acordeon { border-top: 1px solid var(--filete); }

.acordeon__item { border-bottom: 1px solid var(--filete); }

.acordeon__pregunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  text-align: left;
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--tinta);
  transition: color var(--mov-rapido);
}

.acordeon__pregunta:hover { color: var(--laton-oscuro); }

.acordeon__signo { position: relative; width: 15px; height: 15px; flex: none; }
.acordeon__signo::before,
.acordeon__signo::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 1px;
  background: var(--laton);
  transform: translate(-50%, -50%);
  transition: transform var(--mov-medio), opacity var(--mov-medio);
}
.acordeon__signo::after { transform: translate(-50%, -50%) rotate(90deg); }

.acordeon__item.esta-abierto .acordeon__signo::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.acordeon__respuesta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--mov-lento);
}

/* El estado abierto se lee en el item, no en el boton: la respuesta es
   hermana del h3 que envuelve al boton, no hermana del boton. */
.acordeon__item.esta-abierto .acordeon__respuesta { grid-template-rows: 1fr; }

.acordeon__respuesta > div { overflow: hidden; }

.acordeon__respuesta p { padding-bottom: 26px; color: var(--texto-medio); line-height: 1.78; max-width: 72ch; }
.acordeon__respuesta ul { padding-bottom: 26px; display: grid; gap: 8px; }
.acordeon__respuesta li { position: relative; padding-left: 20px; color: var(--texto-medio); line-height: 1.7; }
.acordeon__respuesta li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 1px; background: var(--laton); }


/* ---------------------------------------------------------------------
   15. Formularios
   --------------------------------------------------------------------- */
.formulario { display: grid; gap: 20px; }

/* Bloque del captcha: la caja de Google y, encima, el aviso de carga.
   El motor de reCAPTCHA exige que su caja este vacia, asi que el aviso
   va en un bloque hermano que se retira cuando el widget ya esta. */
.recaptcha-bloque { position: relative; margin: 18px 0 4px; }

.recaptcha-campo { min-height: 78px; }

.recaptcha-cargando {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-medio);
  background: var(--hueso);
  border: 1px dashed var(--filete);
  border-radius: var(--r-sm);
  z-index: 2;
}

.recaptcha-cargando[hidden] { display: none; }

.recaptcha-cargando.es-error {
  color: var(--error);
  border-color: rgba(155, 44, 34, 0.4);
  background: rgba(155, 44, 34, 0.06);
}

/* Cargador giratorio: el mismo para el captcha, para el boton de enviar
   y para los avisos de espera del formulario. */
.cargador {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: none;
  border: 2px solid var(--filete);
  border-top-color: var(--laton);
  border-radius: 50%;
  animation: girarCargador 0.7s linear infinite;
}

.cargador[hidden] { display: none; }

@keyframes girarCargador {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cargador { animation-duration: 2.4s; }
}

.boton--cargando { cursor: progress; }
.boton--cargando .cargador {
  border-color: currentColor;
  border-top-color: transparent;
  opacity: 0.85;
}

.campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.campo--ancho { grid-column: 1 / -1; }

.campo { display: flex; flex-direction: column; gap: 4px; }

.campo label {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-medio);
}

/* Etiqueta de un campo que no es un <label> (por ejemplo el selector de
   estrellas, que son botones de radio): se ve igual que una etiqueta. */
.campo__etiqueta {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-medio);
}

.campo label .requerido { color: var(--error); margin-left: 3px; }
.campo__etiqueta .requerido { color: var(--error); margin-left: 3px; }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 13px 16px;
  font-size: 0.94rem;
  font-weight: 300;
  background: var(--hueso);
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--r-sm);
  transition: border-color var(--mov-rapido), box-shadow var(--mov-rapido), background var(--mov-rapido);
}

.campo textarea { min-height: 60px; resize: vertical; line-height: 1.5; }

.campo select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C534A' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  padding-right: 40px;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--laton);
  box-shadow: 0 0 0 3px rgba(176, 141, 79, 0.14);
}

.campo input[readonly] { background: var(--hueso-2); color: var(--texto-medio); }

.campo__ayuda { font-size: 0.78rem; color: var(--texto-suave); line-height: 1.5; }

.campo--error input,
.campo--error select,
.campo--error textarea { border-color: var(--error); background: rgba(155, 44, 34, 0.03); }

.campo__error { font-size: 0.8rem; color: var(--error); }

.casilla { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; font-size: 0.88rem; line-height: 1.6; color: var(--texto-medio); }
.casilla input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--laton); flex: none; cursor: pointer; }

/* Casilla oculta para Honeypot (anti-spam) */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Aviso de formulario */
.aviso {
  display: flex;
  gap: 13px;
  padding: 15px 18px;
  border-radius: var(--r-sm);
  font-size: 0.88rem;
  line-height: 1.6;
  border: 1px solid transparent;
  margin-bottom: 24px;
}

.aviso svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.aviso strong { display: block; margin-bottom: 3px; }
.aviso--exito { background: rgba(74, 107, 79, 0.08); border-color: rgba(74, 107, 79, 0.28); color: #2F4A34; }
.aviso--exito svg { color: var(--exito); }
.aviso--error { background: rgba(155, 44, 34, 0.07); border-color: rgba(155, 44, 34, 0.28); color: #74211A; }
.aviso--error svg { color: var(--error); }
.aviso--aviso { background: rgba(176, 141, 79, 0.09); border-color: rgba(176, 141, 79, 0.34); color: #6E5525; }
.aviso--aviso svg { color: var(--laton-oscuro); }
.aviso--info { background: var(--hueso-2); border-color: var(--filete); color: var(--texto-medio); }
.aviso--info svg { color: var(--texto-medio); }

/* Lista de errores */
.lista-errores { display: grid; gap: 8px; margin-bottom: 12px; }
.lista-errores li { position: relative; padding-left: 20px; font-size: 0.88rem; color: #74211A; line-height: 1.55; }
.lista-errores li::before { content: "!"; position: absolute; left: 0; top: 0; width: 14px; height: 14px; display: grid; place-items: center; background: var(--error); color: #fff; font-size: 0.6rem; font-weight: 500; border-radius: 50%; }


/* ---------------------------------------------------------------------
   16. Carrito y checkout
   --------------------------------------------------------------------- */
.carrito { display: grid; grid-template-columns: 1fr 380px; gap: clamp(28px, 4vw, 56px); align-items: start; }

.lista-carrito { border-top: 1px solid var(--filete); }

.renglon-carrito {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--filete);
  align-items: start;
}

.renglon-carrito__imagen {
  width: 96px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--filete);
  border-radius: var(--r-sm);
  background: var(--hueso-2);
}

.renglon-carrito__nombre {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 5px;
  display: block;
  transition: color var(--mov-rapido);
}

.renglon-carrito__nombre:hover { color: var(--laton-oscuro); }
.renglon-carrito__meta { font-size: 0.8rem; color: var(--texto-suave); margin-bottom: 14px; }
.renglon-carrito__acciones { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.enlace-peligro {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  border-bottom: 1px solid transparent;
  transition: color var(--mov-rapido), border-color var(--mov-rapido);
}

.enlace-peligro:hover { color: var(--error); border-bottom-color: currentColor; }

.renglon-carrito__precios { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.renglon-carrito__unitario { font-size: 0.78rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.renglon-carrito__importe { font-family: var(--serif); font-size: 1.35rem; color: var(--tinta); font-variant-numeric: tabular-nums; }

.resumen {
  position: sticky;
  top: calc(var(--alto-encabezado) + 24px);
  padding: 28px;
  background: var(--hueso-2);
  border: 1px solid var(--hueso-3);
  border-radius: var(--r-sm);
}

.resumen__titulo {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--filete-fuerte);
}

.resumen__linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 9px;
  font-size: 0.92rem;
  color: var(--texto-medio);
}

.resumen__linea strong { font-weight: 400; color: var(--tinta); font-variant-numeric: tabular-nums; }

.resumen__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  margin-top: 12px;
  border-top: 1px solid var(--filete-fuerte);
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--tinta);
}

.resumen__total .precio-sufijo { font-size: 0.7rem; }
.resumen__nota { font-size: 0.8rem; color: var(--texto-suave); line-height: 1.6; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--filete-fuerte); }
.resumen .boton { margin-top: 20px; }

.resumen__gratis { color: var(--exito); font-weight: 500; }

.resumen__aclaracion {
  margin: 0 0 6px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--texto-suave);
}

.resumen--sin-comision [data-linea-comision] { opacity: 0.5; }
.resumen--sin-comision [data-linea-comision] strong { text-decoration: line-through; }

.cuenta-pedido {
  margin: 0 auto 34px;
  max-width: 40rem;
  padding: 22px 22px 20px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--filete);
}

.cuenta-pedido h3 {
  margin-bottom: 10px;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 400;
}

.cuenta-pedido p { color: var(--texto-medio); line-height: 1.6; }

.cuenta-pedido__clave {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--hueso);
  border: 1px dashed var(--filete-fuerte);
}

.cuenta-pedido__clave strong {
  font-size: 1.25rem;
  letter-spacing: 0.08em;
}

.lista-pedidos {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pedido-cuenta {
  padding: 18px 18px 14px;
  background: #fff;
  border: 1px solid var(--filete);
}

.pedido-cuenta__cabecera {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.pedido-cuenta__folio {
  display: block;
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--tinta);
}

.pedido-cuenta__meta { text-align: right; font-size: 0.85rem; }
.pedido-cuenta__meta strong { display: block; margin-top: 4px; }

.pedido-cuenta__piezas {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--filete);
}

.pedido-cuenta__piezas li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 0.92rem;
}

.pedido-cuenta__total {
  margin-top: 8px;
  text-align: right;
  font-family: var(--serif);
  font-size: 1.2rem;
}

@media (max-width: 640px) {
  .pedido-cuenta__cabecera,
  .pedido-cuenta__piezas li { flex-direction: column; }
  .pedido-cuenta__meta { text-align: left; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Forma de pago: una sola, tarjeta con Stripe */
.pago-tarjeta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--laton);
  border-radius: var(--r-sm);
  background: var(--hueso);
  box-shadow: 0 0 0 1px var(--laton-claro);
}

.pago-tarjeta__icono {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(176, 141, 79, 0.14);
  color: var(--laton-oscuro);
}

.pago-tarjeta__cuerpo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--texto-medio);
}

.pago-tarjeta__cuerpo strong {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--tinta);
}

.pago-tarjeta__moneda {
  flex: 0 0 auto;
  padding: 5px 11px;
  border: 1px solid var(--filete);
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--texto-medio);
  background: var(--hueso-2);
}

/* Formulario de tarjeta: ficha limpia sobre el panel de resumen */
.stripe-pago {
  margin-top: 12px;
  padding: 20px;
  background: var(--hueso);
  border: 1px solid var(--filete);
  border-radius: var(--r-sm);
}

.stripe-pago__elemento {
  min-height: 0;
  transition: opacity var(--mov-rapido);
}

.stripe-pago__estado {
  font-size: 0.82rem;
  color: var(--texto-medio);
  line-height: 1.55;
  margin-bottom: 14px;
}

.stripe-pago__cargando {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  color: var(--laton-oscuro);
  margin-bottom: 12px;
}

.stripe-pago__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--laton);
  animation: pago-latido 1.1s ease-in-out infinite;
}

@keyframes pago-latido {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1); }
}

.resumen__pendiente {
  font-size: 0.88rem;
  color: var(--texto-suave);
  font-style: italic;
}

.resumen__nota--sutil {
  font-size: 0.76rem;
  margin-top: 8px;
  padding-top: 0;
  border: 0;
}

/* El costo y el tiempo de entrega son el dato que el cliente necesita para
   decidir, asi que van en destacado y no como una nota mas. Se usa una
   clase y no <strong> porque el JS reemplaza el texto de la nota del
   formulario con textContent al cambiar de destino: un <strong> dentro se
   perderia en el primer cambio. */
.envio-detalle {
  font-weight: 600;
  color: var(--texto-medio);
}

.checkout-layout .checkout-form {
  display: contents;
}

.checkout-form__entrega {
  min-width: 0;
}

.checkout-form .formulario {
  gap: 14px;
}

.checkout-form h2 {
  margin-bottom: 6px;
}

.checkout-form h3 {
  margin: 6px 0 0;
  font-size: 1.05rem;
}

.checkout-form .bajada {
  margin-bottom: 2px;
}

.checkout-form .campos {
  gap: 12px 16px;
  align-items: start;
}

.checkout-form .aviso {
  margin-bottom: 0;
}

.checkout-paso {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 14px;
}

.checkout-paso__num {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--filete-fuerte);
  border-radius: 50%;
  font-size: 0.72rem;
  color: var(--laton-oscuro);
}

.checkout-paso--movil {
  display: none;
}

.checkout-pago {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--filete-fuerte);
}

.checkout-paso--aside {
  margin-bottom: 16px;
}

/* Solo la lista de piezas tiene scroll. Totales y pago siguen el alto
   del contenido y se desplazan con la pagina. */
.resumen--checkout {
  position: static;
  max-height: none;
  overflow: visible;
}

.resumen--checkout > .resumen-tienda {
  display: block;
  max-height: 280px;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
  margin-right: -8px;
  scrollbar-width: thin;
  scrollbar-color: var(--filete-fuerte) transparent;
}

.resumen--checkout .renglon-carrito {
  grid-template-columns: 64px minmax(0, 1fr) auto;
  width: 100%;
}

.resumen--checkout > .resumen-tienda::-webkit-scrollbar {
  width: 6px;
}

.resumen--checkout > .resumen-tienda::-webkit-scrollbar-thumb {
  background: var(--filete-fuerte);
  border-radius: 3px;
}

/* Panel del pedido confirmado: los montos no se recorren con el scroll. */
.resumen--flotante {
  position: sticky;
  top: calc(var(--alto-encabezado) + 20px);
  z-index: 5;
  background: var(--hueso);
  box-shadow: var(--sombra-md);
}

@media (max-width: 900px) {
  .checkout-paso--movil {
    display: none;
  }

  .checkout-paso--aside {
    display: flex;
  }

  .resumen--checkout,
  .resumen--flotante {
    position: static;
    max-height: none;
    overflow: visible;
    box-shadow: none;
  }

  .resumen--checkout > .resumen-tienda {
    max-height: 240px;
    overflow-y: auto;
  }
}

.pago-metodos {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
  border: 0;
  padding: 0;
}

.pago-opcion {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--filete);
  border-radius: var(--r-sm);
  background: var(--hueso);
  cursor: pointer;
}

.pago-opcion:has(input:checked) {
  border-color: var(--laton);
  box-shadow: 0 0 0 1px var(--laton);
}

.pago-opcion input {
  margin-top: 4px;
  accent-color: var(--laton);
  flex: none;
}

.pago-opcion strong {
  display: block;
  font-weight: 500;
  color: var(--tinta);
  font-size: 0.92rem;
}

.pago-opcion span span {
  display: block;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--texto-medio);
}

button.barra-superior__dato,
button.enlace-plano {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

button.enlace-plano {
  border-bottom: 1px solid var(--filete-fuerte);
}

button.enlace-plano:hover {
  color: var(--laton-oscuro);
  border-bottom-color: currentColor;
}

.datos-transferencia {
  margin-top: 12px;
  padding: 16px 18px;
  background: var(--hueso);
  border: 1px solid var(--filete);
  border-radius: var(--r-sm);
  white-space: pre-line;
  overflow-wrap: anywhere;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--tinta);
}

/* Pasos del pedido ya hecho: la accion va aqui, no al final de la pagina. */
.pedido-pasos {
  display: grid;
  gap: 12px;
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
}

.pedido-paso {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px 14px;
  align-items: start;
  margin: 0;
  padding: 16px;
  background: var(--hueso-2);
  border: 1px solid var(--filete);
  border-radius: var(--r-sm);
}

.pedido-paso--accion {
  border-color: var(--laton);
  background: #fff;
}

.pedido-paso__num {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--laton);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--laton-oscuro);
}

.pedido-paso h3 {
  margin: 4px 0 6px;
  font-size: 1.15rem;
}

.pedido-paso p {
  margin: 0;
  color: var(--texto-medio);
  font-size: 0.92rem;
  line-height: 1.55;
}

.pedido-paso__boton {
  margin-top: 14px;
  white-space: normal;
  line-height: 1.35;
  text-align: center;
}

@media (min-width: 860px) {
  .pedido-pasos--transferencia {
    grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
    align-items: start;
  }

  .pedido-pasos--transferencia > .pedido-paso:first-child {
    grid-row: 1 / span 2;
  }
}

/* Carrito vacio */
.carrito-vacio { text-align: center; padding-block: clamp(56px, 9vw, 110px); max-width: 520px; margin-inline: auto; }
.carrito-vacio__icono { width: 62px; height: 62px; margin: 0 auto 26px; color: var(--filete-fuerte); }
.carrito-vacio h2 { margin-bottom: 14px; }
.carrito-vacio p { color: var(--texto-medio); margin-bottom: 30px; }

/* Resumen del pedido confirmado */
.confirmacion { text-align: center; max-width: 640px; margin-inline: auto; }
.confirmacion__icono { width: 72px; height: 72px; margin: 0 auto 28px; color: var(--exito); }
.confirmacion h1 { margin-bottom: 18px; }
.confirmacion > p { color: var(--texto-medio); margin-bottom: 30px; }

.folio {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 36px;
  background: var(--hueso-2);
  border: 1px dashed var(--laton);
  border-radius: var(--r-sm);
  margin-bottom: 30px;
}

.folio__etiqueta { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--texto-suave); }
.folio__valor { font-family: var(--serif); font-size: 1.8rem; letter-spacing: 0.06em; color: var(--tinta); font-variant-numeric: tabular-nums; }


/* ---------------------------------------------------------------------
   17. Contacto
   --------------------------------------------------------------------- */
.contacto { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }

.datos-contacto { display: grid; gap: 0; border-top: 1px solid var(--filete); }

.dato-contacto {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--filete);
}

.dato-contacto__icono {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--filete-fuerte);
  border-radius: 50%;
  color: var(--laton-oscuro);
}

.dato-contacto__icono svg { width: 17px; height: 17px; }
.dato-contacto__etiqueta { font-size: 0.66rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 5px; }
.dato-contacto__valor { font-size: 1rem; line-height: 1.6; color: var(--texto); }
.dato-contacto__valor a { transition: color var(--mov-rapido); border-bottom: 1px solid var(--filete-fuerte); }
.dato-contacto__valor a:hover { color: var(--laton-oscuro); border-bottom-color: currentColor; }
.dato-contacto__valor--suave { font-size: 0.9rem; color: var(--texto-medio); }

.mapa {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--hueso-2);
  border: 1px solid var(--filete);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-top: 26px;
}

.mapa iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) contrast(0.94); }

/* Boton flotante de WhatsApp */
  .whatsapp-flotante {
    position: fixed;
    left: 22px;
    bottom: 22px;
  z-index: 180;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 20px 13px 15px;
  background: #1FA855;
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  box-shadow: 0 6px 24px rgba(31, 168, 85, 0.34);
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: transform var(--mov-medio), box-shadow var(--mov-medio), background var(--mov-rapido);
}

.whatsapp-flotante:hover { transform: translateY(-3px); background: #18904A; box-shadow: 0 10px 30px rgba(31, 168, 85, 0.42); }
.whatsapp-flotante svg { width: 22px; height: 22px; flex: none; }

  .whatsapp-flotante__texto { display: none; }
  @media (min-width: 600px) { .whatsapp-flotante__texto { display: inline; } }


  /* ---------------------------------------------------------------------
     Boton de subir: en la esquina opuesta a la de WhatsApp, para que
     no se tapen. El chevron se gira 180 grados en vez de tener un icono
     "arriba" propio, que no existe en el juego de iconos.
     --------------------------------------------------------------------- */
  .ir-arriba {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 180;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: var(--tinta);
    color: var(--texto-hueso-medio);
    border: 1px solid var(--filete-tinta);
    border-radius: 50%;
    box-shadow: 0 6px 24px rgba(12, 10, 8, 0.24);
    transition: opacity var(--mov-medio), visibility var(--mov-medio),
                transform var(--mov-medio), background var(--mov-rapido),
                color var(--mov-rapido);
  }
  .ir-arriba svg { width: 18px; height: 18px; transform: rotate(180deg); }
  .ir-arriba:hover { background: var(--laton); color: var(--tinta); border-color: var(--laton); }

  /* Cerca del inicio no hace falta, asi que se oculta. Sin JS se queda
     siempre visible y el ancla #sube funciona igual. */
  .ir-arriba.esta-oculto {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
  }



/* ---------------------------------------------------------------------
   18. Pie de pagina
   --------------------------------------------------------------------- */
.pie { background: var(--tinta); color: var(--texto-hueso-medio); }

.pie__principal {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.5fr;
  gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(48px, 6vw, 80px);
}

.pie__marca { display: flex; flex-direction: column; gap: 20px; }

/* El logo se quito del pie: sobre el fondo tinta no tenia contraste y se
   perdia. En su lugar la marca va como texto, que si se lee y ademas deja
   el nombre comercial escrito en el pie de cada pagina. */
.pie__nombre {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--hueso);
  margin: 0;
}
.pie__texto { font-size: 0.9rem; line-height: 1.75; max-width: 38ch; }
.pie__redes { display: flex; gap: 8px; }

.pie__red {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--filete-tinta-2);
  border-radius: 50%;
  color: var(--texto-hueso-medio);
  transition: all var(--mov-rapido);
}

.pie__red:hover { border-color: var(--laton); color: var(--laton); background: rgba(176, 141, 79, 0.1); }
.pie__red svg { width: 15px; height: 15px; }

.pie__titulo {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--laton-claro);
  margin-bottom: 20px;
}

.pie__enlaces { display: grid; gap: 11px; }

.pie__enlaces a {
  font-size: 0.9rem;
  color: var(--texto-hueso-medio);
  transition: color var(--mov-rapido), padding-left var(--mov-rapido);
  display: inline-block;
}

.pie__enlaces a:hover { color: var(--hueso); padding-left: 5px; }
.pie__enlaces--datos li { font-size: 0.9rem; line-height: 1.65; }

/* Icono pegado a su dato: el svg entra como bloque y lo empuja a la linea
   de arriba, por eso el dato va en flex con el icono fijo al inicio. */
.pie__enlaces--datos li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pie__icono-dato {
  flex: 0 0 auto;
  margin-top: 3px;
}

.pie__dato-texto { flex: 1 1 auto; min-width: 0; }
.pie__enlaces--datos a { color: inherit; }
.pie__enlaces--datos a:hover { color: var(--laton-claro); padding-left: 0; }

.boletin { display: flex; gap: 8px; margin-top: 16px; }

.boletin input {
  flex: 1;
  min-width: 0;
  padding: 12px 15px;
  font-size: 0.86rem;
  font-weight: 300;
  color: var(--hueso);
  background: rgba(246, 242, 234, 0.06);
  border: 1px solid var(--filete-tinta-2);
  border-radius: var(--r-sm);
  transition: border-color var(--mov-rapido), background var(--mov-rapido);
}

.boletin input::placeholder { color: var(--texto-hueso-tenue); }
.boletin input:focus { outline: none; border-color: var(--laton); background: rgba(246, 242, 234, 0.1); }
.boletin .boton { padding-inline: 18px; }

    .pie__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-block: 24px;
  border-top: 1px solid var(--filete-tinta);
  font-size: 0.78rem;
  color: var(--texto-hueso-tenue);
}

.pie__legal a { transition: color var(--mov-rapido); }
.pie__legal a:hover { color: var(--laton-claro); }
.pie__legal-enlaces { display: flex; gap: 22px; flex-wrap: wrap; }

/* El boton del aviso vive entre enlaces, asi que se iguala a ellos: sin
   fondo ni borde propios, con la misma respuesta al pasar el cursor. */
.pie__legal-enlaces button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  color: var(--texto-hueso-medio);
  cursor: pointer;
  transition: color var(--mov-rapido);
}

.pie__legal-enlaces button:hover { color: var(--laton-claro); }
.pie__legal-enlaces button:focus-visible {
  outline: 1px solid var(--laton-claro);
  outline-offset: 3px;
}

/* Aviso de modificacion fijo en el pie.
   El modal aparece una sola vez; despues el texto se queda aqui, siempre
   visible, para que el aviso no dependa de que el visitante lo cerrara.
   Se marca aparte del boton "pie__legal" y lleva borde de laton para que se
   lea como aviso sin competir con el aviso de privacidad. */
.pie__aviso {
  padding: 20px 22px;
  margin-bottom: 28px;
  border: 1px solid rgba(176, 141, 79, 0.34);
  border-left: 2px solid var(--laton);
  border-radius: var(--r-sm);
  background: rgba(176, 141, 79, 0.07);
}

.pie__aviso-titulo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--laton-claro);
}

.pie__aviso-titulo svg { flex: 0 0 auto; color: var(--laton); }

/* El texto del aviso es largo: se acota el ancho para no quedar en lineas
   de 200 caracteres, que no se leen. */
.pie__aviso-texto {
  max-width: 96ch;
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--texto-hueso-medio);
}

.pie__aviso-texto p { margin: 0; }
.pie__aviso-texto p + p { margin-top: 10px; }


/* ---------------------------------------------------------------------
   19. Ventana modal
   --------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity var(--mov-medio), visibility var(--mov-medio); }
.modal.esta-abierto { opacity: 1; visibility: visible; }
.modal__fondo { position: absolute; inset: 0; background: rgba(12, 10, 8, 0.72); backdrop-filter: blur(3px); }
.modal__caja { position: relative; width: min(520px, 100%); max-height: none; overflow-y: visible; background: var(--hueso); border-radius: var(--r-lg); box-shadow: var(--sombra-humo); padding: clamp(16px, 2.5vw, 22px); transform: scale(0.96) translateY(12px); transition: transform var(--mov-lento); }
.modal.esta-abierto .modal__caja { transform: scale(1) translateY(0); }

.modal__cerrar {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--texto-medio);
  transition: all var(--mov-rapido);
}
.modal__cerrar:hover { background: var(--hueso-2); color: var(--tinta); transform: rotate(90deg); }
.modal__cerrar svg { width: 17px; height: 17px; }

.modal h2 { margin-bottom: 18px; }
.modal__texto { color: var(--texto-medio); line-height: 1.6; margin-bottom: 14px; }
.modal__texto strong { color: var(--tinta); }
.modal__acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* Solo el formulario del boton flotante de WhatsApp. El de contacto
   y el de checkout conservan el alto de sus campos. */
#whatsapp .modal__caja {
  width: min(460px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

#whatsapp .campos { gap: 8px 12px; }
#whatsapp .campo { gap: 2px; }

#whatsapp .campo input,
#whatsapp .campo select,
#whatsapp .campo textarea {
  padding: 6px 10px;
  font-size: 0.86rem;
  line-height: 1.35;
}

#whatsapp .campo textarea {
  min-height: 0;
  height: 4.25rem;
}

#whatsapp .campo__ayuda {
  font-size: 0.72rem;
  line-height: 1.35;
}

#whatsapp h2 { margin-bottom: 8px; }
#whatsapp .modal__texto { margin-bottom: 8px; font-size: 0.9rem; line-height: 1.45; }
#whatsapp .modal__acciones { margin-top: 12px; }

/* Aviso legal en el modal */
.modal__legal { background: var(--hueso-2); border-left: 2px solid var(--laton); padding: 20px; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 0.88rem; line-height: 1.75; color: var(--texto-medio); }

/* Lupa de imagen */
.lupa { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 24px; background: rgba(12, 10, 8, 0.94); opacity: 0; visibility: hidden; transition: opacity var(--mov-medio), visibility var(--mov-medio); cursor: zoom-out; }
.lupa.esta-abierta { opacity: 1; visibility: visible; }
.lupa img { max-width: 100%; max-height: 92vh; object-fit: contain; border-radius: var(--r-sm); }
.lupa__cerrar { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(246, 242, 234, 0.3); border-radius: 50%; color: var(--hueso); }
.lupa__cerrar svg { width: 20px; height: 20px; }


/* ---------------------------------------------------------------------
   20. Capa de galeria
   --------------------------------------------------------------------- */
.capa {
  position: fixed;
  inset: 0;
  z-index: 350;
  background: rgba(246, 242, 234, 0.98);
  display: grid;
  place-items: center;
  padding: clamp(20px, 4vw, 48px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mov-medio), visibility var(--mov-medio);
}

.capa.esta-abierta { opacity: 1; visibility: visible; }

.capa__cerrar {
  position: absolute;
  top: clamp(16px, 3vw, 32px);
  right: clamp(16px, 3vw, 32px);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--filete-fuerte);
  border-radius: 50%;
  color: var(--tinta);
  transition: all var(--mov-rapido);
}

.capa__cerrar:hover { background: var(--tinta); border-color: var(--tinta); color: var(--hueso); transform: rotate(90deg); }
.capa__cerrar svg { width: 19px; height: 19px; }

.capa__figura { position: relative; max-width: 100%; }
.capa__figura img { max-width: 100%; max-height: 76vh; object-fit: contain; }

.capa__pie {
  position: absolute;
  bottom: clamp(16px, 3vw, 32px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--texto-suave);
}


/* ---------------------------------------------------------------------
   21. Avisos flotantes
   --------------------------------------------------------------------- */
.avisos {
  position: fixed;
  right: 22px;
  bottom: 88px;
  z-index: 320;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(360px, calc(100vw - 44px));
  pointer-events: none;
}

.aviso-flotante {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 18px;
  background: var(--tinta);
  color: var(--hueso);
  border-radius: var(--r-sm);
  box-shadow: var(--sombra-humo);
  font-size: 0.88rem;
  line-height: 1.5;
  border-left: 2px solid var(--laton);
  pointer-events: auto;
  animation: entraAviso 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

.aviso-flotante--error { border-left-color: var(--error); }
.aviso-flotante svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--laton-claro); }
.aviso-flotante--error svg { color: #E8837A; }
.aviso-flotante__texto { flex: 1; }
.aviso-flotante button { color: var(--texto-hueso-tenue); flex: none; }
.aviso-flotante button:hover { color: var(--hueso); }
.aviso-flotante.saliendo { animation: saleAviso 0.3s ease forwards; }

@keyframes entraAviso {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes saleAviso {
  to { opacity: 0; transform: translateX(28px); }
}


/* ---------------------------------------------------------------------
   22. Animacion al hacer scroll
   --------------------------------------------------------------------- */
.revelar {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.revelar.esta-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .revelar { opacity: 1; transform: none; }
  .portada__fondo { animation: none; transform: scale(1.02); }
}


/* ---------------------------------------------------------------------
   23. Adaptacion a pantallas
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .carrito { grid-template-columns: 1fr; }
  .resumen { position: static; }
  .pie__principal { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }
}

@media (max-width: 1000px) {
  :root { --alto-encabezado: var(--alto-encabezado-movil); }

  .navegacion { display: none; }
  .boton-menu { display: grid; }

  .marca__texto { display: none; }

  .cinta__interior { grid-template-columns: 1fr 1fr; }
  .cinta__dato:nth-child(odd) { border-left: 0; }
  .cinta__dato:nth-child(-n+2) { border-bottom: 1px solid var(--filete-tinta); }

  .ficha { grid-template-columns: 1fr; }
  .galeria { position: static; }
  .banda-editorial__contenido { grid-template-columns: 1fr; }
  .taller { grid-template-columns: 1fr; }
  .taller__medio { max-width: 520px; }
  .contacto { grid-template-columns: 1fr; }
  .cifras { grid-template-columns: 1fr 1fr; }
  .columnas { columns: 1; }
  .resenas { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .barra-superior { display: none; }
  .modal { padding: 12px; }
  .modal__caja { width: 100%; max-height: calc(100dvh - 24px); overflow-y: auto; padding: 16px; }
  .modal h2 { font-size: 1.25rem; margin-bottom: 10px; }

  #whatsapp.modal {
    padding: 8px;
    align-items: end;
  }

  #whatsapp .modal__caja {
    width: 100%;
    max-height: calc(100dvh - 16px);
    padding: 14px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 16px;
  }

  #whatsapp h2 { font-size: 1.35rem; margin-bottom: 6px; }
  #whatsapp .modal__texto { font-size: 0.84rem; margin-bottom: 8px; }
  #whatsapp .campos { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  #whatsapp .campo input,
  #whatsapp .campo select,
  #whatsapp .campo textarea {
    font-size: 16px;
    padding: 7px 10px;
  }

  #whatsapp .modal__acciones {
    display: grid;
    grid-template-columns: 1fr;
  }

  #whatsapp .modal__acciones .boton {
    width: 100%;
    justify-content: center;
  }

  .encabezado__interior { gap: 10px; min-width: 0; }
  .marca { min-width: 0; }
  .marca__logo { height: 48px; }
  .icono-boton { width: 40px; height: 40px; }

  .panel-movil__caja {
    width: min(400px, 100%);
    max-width: 100%;
    padding: 20px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  }
  .panel-movil__enlace { font-size: 1.35rem; overflow-wrap: anywhere; }

  .tarjetas-categoria {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 70vw);
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin-inline: calc(var(--contenedor-x, 16px) * -1);
    padding-inline: var(--contenedor-x, 16px);
    scroll-padding-inline: var(--contenedor-x, 16px);
    scrollbar-width: thin;
  }
  .tarjetas-categoria::-webkit-scrollbar { height: 6px; }
  .tarjetas-categoria::-webkit-scrollbar-thumb { background: rgba(246, 242, 234, 0.25); border-radius: 6px; }
  .tarjetas-categoria::-webkit-scrollbar-track { background: transparent; }
  .tarjeta-categoria { aspect-ratio: 3 / 4; flex: none; scroll-snap-align: start; }
  .tarjeta-categoria__ver { opacity: 1; transform: translateY(0); }

  .panel-filtros {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
  }
  .filtros-categoria {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .filtros-precio,
  .desplegable-filtro { max-width: 100%; }
  .desplegable-filtro__panel {
    left: 0;
    right: auto;
    width: min(290px, calc(100vw - 40px));
  }
  .campo-busqueda input, .campo-busqueda input:focus { width: 100%; }
  .campo-busqueda { width: 100%; max-width: 100%; }
  .orden-selector { width: 100%; min-width: 0; justify-content: space-between; }
  .orden-selector select { flex: 1; min-width: 0; max-width: 100%; }

  .rejilla-productos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .rejilla-productos--aire { gap: 18px; }
  .tarjeta-producto { min-width: 0; }
  .tarjeta-producto__nombre { font-size: 1.05rem; overflow-wrap: anywhere; }
  .tarjeta-producto__acciones { flex-direction: column; }
  .tarjeta-producto__acciones .boton {
    width: 100%;
    padding: 10px 8px;
    letter-spacing: 0.04em;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
  .rejilla-productos--placa .tarjeta-producto { padding: 8px 8px 12px; }
  .precio { font-size: 1.15rem; }

  .aviso {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
  }
  .aviso > h2,
  .aviso > .bajada,
  .aviso > p,
  .aviso > div,
  .aviso > strong,
  .aviso > span {
    flex: 1 1 calc(100% - 40px);
    min-width: 0;
    max-width: 100%;
  }

  .campos { grid-template-columns: minmax(0, 1fr); }
  .carrito,
  .carrito > *,
  .resumen,
  .formulario,
  .campos,
  .campo,
  .checkout-form__entrega,
  .pago-tarjeta,
  .stripe-pago {
    min-width: 0;
    max-width: 100%;
  }
  .campo input,
  .campo select,
  .campo textarea {
    min-width: 0;
    max-width: 100%;
  }
  .resumen .boton,
  .compra .boton,
  .boton--bloque {
    white-space: normal;
    line-height: 1.35;
    text-align: center;
  }
  .garantias-producto { grid-template-columns: 1fr; }
  .banda-editorial__lista { grid-template-columns: 1fr; }
  .taller__pasos { grid-template-columns: 1fr; }
  .datos-tecnicos { grid-template-columns: 1fr; }
  .dato-tecnico { grid-template-columns: 1fr; gap: 4px; }
  .dato-tecnico:nth-child(odd) { background: transparent; }

  .renglon-carrito { grid-template-columns: 76px minmax(0, 1fr); }
  .renglon-carrito > * { min-width: 0; }
  .renglon-carrito__precios { grid-column: 2; align-items: flex-start; text-align: left; }
  .renglon-carrito__imagen { width: 76px; max-width: 100%; }
  .compra .boton { min-width: 0; width: 100%; }

  /* En movil el pie se apila en tres filas: la marca a todo lo ancho,
     debajo navegacion y lineas del taller a mitades (50/50) y al final el
     contacto, tambien a todo lo ancho, con el boton de WhatsApp centrado. */
  .pie__principal { grid-template-columns: 1fr 1fr; gap: 34px 26px; }
  .pie__marca { grid-column: 1 / -1; }
  .pie__contacto { grid-column: 1 / -1; }
  /* Columna angosta: el correo y el boton de WhatsApp no caben enteros,
     asi que se les deja cortar en vez de desbordar el pie. */
  .pie__enlaces--datos a { overflow-wrap: anywhere; }
  .pie__principal .boton { width: 100%; white-space: normal; text-align: center; }
  .avisos { right: 14px; left: 14px; max-width: none; }
  .whatsapp-flotante { left: 14px; bottom: 14px; padding: 12px 16px; }
  .ir-arriba { right: 14px; bottom: 14px; width: 44px; height: 44px; }
  .folio { padding: 18px 24px; }
  .folio__valor { font-size: 1.45rem; }

  /* -------------------------------------------------------------------
     Pie centrado en movil

     En escritorio el pie se apoya a la izquierda y se lee como una
     rejilla. Apilado en una sola columna, ese margen izquierdo se
     convierte en un hueco enorme y desbalanceado, asi que se centra
      todo: marca, texto, redes, titulos, enlaces, datos y legal.
      ------------------------------------------------------------------- */
  .pie__marca { align-items: center; text-align: center; }
  .pie__texto { margin-inline: auto; }
  .pie__redes { justify-content: center; }
  .pie__enlaces { justify-items: center; }
  .pie__titulo { margin-bottom: 14px; text-align: center; }
  /* El aviso se mantiene a la izquierda: es un bloque de texto largo y
     justificado a la izquierda se lee mucho mejor que centrado. */
  .pie__aviso { padding: 18px 16px; }
  .pie__aviso-texto { font-size: 0.8rem; }
  /* Centrado el bloque, pero icono y texto siguen uno al lado del otro. */
  .pie__enlaces--datos li { text-align: center; justify-content: center; }
  .pie__enlaces a:hover { padding-left: 0; }

  .boletin { flex-direction: column; align-items: stretch; max-width: min(340px, 100%); margin-inline: auto; min-width: 0; }
  .boletin .boton { width: 100%; }

  .pie__legal {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    /* Los botones flotantes van fijos y se montan sobre la ultima fila del
       pie al bajar del todo, asi que se le deja aire debajo. */
    padding-bottom: 84px;
  }
  .pie__legal-enlaces { justify-content: center; gap: 14px 20px; }

  /* Los enlaces del pie son un area de toque pequena; con mas aire se
     pulsan mejor con el pulgar. */
  .pie__enlaces { gap: 4px; }
  .pie__enlaces a { padding-block: 7px; }
}

@media (max-width: 460px) {
  .portada__acciones .boton { width: 100%; }
  .portada__acciones { flex-direction: column; align-items: stretch; }
  .cinta__interior { grid-template-columns: 1fr; }
  .cinta__dato { border-left: 0; border-bottom: 1px solid var(--filete-tinta); }
  .cinta__dato:last-child { border-bottom: 0; }
  .cifras { grid-template-columns: 1fr; }
  .resumen { padding: 22px; }

  /* Los dos botones de "A su medida" no caben uno al lado del otro en una
     pantalla de 360 px: se apilan y ocupan todo el ancho, que ademas es lo
     que espera el pulgar. */
  .fila--acciones { flex-direction: column; align-items: stretch; }
  .fila--acciones .boton { width: 100%; }
}

/* ---------------------------------------------------------------------
   23. Rejilla de tres tarjetas, pasos para pantalla angosta

   Va despues de los media queries generales para ganar en el orden de
   la cascada. En escritorio las tres van en la misma fila. En pantallas
   medianas la tercera baja y se centra. En movil quedan en dos columnas,
   igual que la tienda y las destacadas del inicio.
   --------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .rejilla-productos--tres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 640px;
  }

  .rejilla-productos--tres > :nth-child(3):last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 10px);
  }
}

@media (max-width: 760px) {
  .rejilla-productos--tres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    gap: 16px;
  }

  .rejilla-productos--tres > :nth-child(3):last-child {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
}


/* ---------------------------------------------------------------------
   24. Impresion
   --------------------------------------------------------------------- */
/* Paginas de aviso y de terminos: columna estrecha, texto centrado. */
.pagina-legal .contenedor--medio { max-width: 980px; }

.legal-titulo {
  text-align: center;
  margin-bottom: 14px;
}

.articulos-legales {
  list-style: none;
  margin: 8px auto 0;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 760px;
}

.articulo-legal {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 8px 18px;
  align-items: start;
  text-align: left;
  padding: 22px 24px;
  border: 1px solid var(--filete);
  border-radius: var(--r-md);
  background: var(--hueso-2);
}

.articulo-legal__num {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--laton-oscuro);
  padding-top: 3px;
}

.articulo-legal h3 {
  margin: 0 0 8px;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.articulo-legal p {
  margin: 0 0 10px;
  max-width: none;
  color: var(--texto-medio);
  line-height: 1.75;
}

.articulo-legal p:last-child { margin-bottom: 0; }

.acordeon--legal { max-width: 760px; margin-inline: auto; text-align: left; }
.acordeon--legal .acordeon__pregunta { text-align: left; justify-content: space-between; }
.acordeon--legal .acordeon__respuesta p { margin-inline: 0; text-align: left; }

@media (max-width: 560px) {
  .articulo-legal { grid-template-columns: 1fr; padding: 18px; }
}

.bajada--centro {
  text-align: center;
  margin-inline: auto;
  margin-bottom: 34px;
}

.aviso.aviso--bloque {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 32px 28px;
}

.aviso.aviso--bloque > * {
  flex: none;
  width: 100%;
  max-width: 68ch;
}

.aviso.aviso--bloque .antetitulo { justify-content: center; margin-bottom: 0; }

.aviso.aviso--bloque h2 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1.15;
}

.tarjetas-legales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.tarjeta-legal {
  padding: 24px 20px;
  border: 1px solid var(--filete);
  border-radius: var(--r-md);
  text-align: center;
  background: var(--hueso-2);
}

.tarjeta-legal h3 { margin: 8px 0 10px; }

.tarjeta-legal p {
  margin: 0;
  max-width: none;
  text-align: left;
  color: var(--texto-medio);
  line-height: 1.7;
}

.cargador--grande {
  width: 28px;
  height: 28px;
  border-width: 2px;
}

@media print {
  .encabezado, .pie, .barra-superior, .whatsapp-flotante, .avisos,
  .portada__acciones, .panel-filtros, .carrito__acciones, .modal { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .seccion { padding-block: 12pt; }
  a { text-decoration: underline; }
  .resumen { border: 1pt solid #999; }
}