/* ==========================================================================
   Página pública de un sitio: la ESTRUCTURA y los tokens.

   Hoja aparte de almacigo.css a propósito: esto es la web del CLIENTE, no el
   panel. Acá está el esqueleto y un juego de tokens con valores sobrios que se
   defienden solos; la CARA la pone el tema (static/css/temas/<key>.css), que
   carga después y pisa los tokens que quiera. Ver temas.py.

   La regla para saber qué va acá y qué en un tema: si al cambiarlo se rompe
   algo (el layout, un scroll, que el precio se lea), va acá. Si al cambiarlo
   la página sigue funcionando y solo se ve distinta, es del tema.
   ========================================================================== */

:root {
  /* Lo único que sale de la base del cliente (lo inyecta el layout). */
  --marca: #2e7d32;
  --marca-tinta: #fff;          /* lo que se lee ENCIMA de la marca */

  /* Tipografía. Acá, las del sistema: no bajan nada y están en todos lados.
     El tema es el que trae las suyas. */
  --font-titulo: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-texto: system-ui, -apple-system, "Segoe UI", sans-serif;
  --titulo-peso: 700;
  --titulo-estilo: normal;
  --titulo-espaciado: -.01em;
  --titulo-alto: 1.15;

  /* Escala fluida: crece con la pantalla en vez de saltar en cada breakpoint,
     así el celular y el monitor grande se leen igual de bien. */
  --t-h1: clamp(2rem, 1.3rem + 3.2vw, 3.4rem);
  --t-h2: clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
  --t-h3: 1.0625rem;
  --t-lema: clamp(1.02rem, .97rem + .35vw, 1.25rem);
  --t-precio: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  --t-chico: .8125rem;

  /* Ritmo */
  --ancho: 1140px;
  --sec-py: clamp(2.75rem, 6vw, 5rem);
  --sec-px: clamp(1.25rem, 4vw, 2rem);
  --hero-py: clamp(3.5rem, 10vw, 7rem);
  --gap: clamp(1rem, 2vw, 1.5rem);

  /* Formas */
  --radio: 14px;
  --radio-lg: 20px;
  --card-foto: 1;               /* proporción de la foto en la tarjeta */

  /* Sombras. El tinte va como componentes RGB sueltos para poder darle la
     opacidad acá: en oscuro la sombra tiene que ser negra igual, si no es un
     resplandor. */
  --sombra-tinte: 35 36 31;
  --sombra: 0 10px 26px rgb(var(--sombra-tinte) / .10);
  --sombra-alta: 0 18px 44px rgb(var(--sombra-tinte) / .16);
  --trans: .35s cubic-bezier(.25, .46, .45, .94);

  /* Neutros, en claro. */
  --tinta: #23241f;
  --tinta-2: #6b6d66;
  --papel: #ffffff;
  --papel-2: #f7f6f3;
  --linea: #e4e2dc;

  /* Y los mismos en oscuro, definidos acá aunque todavía no se usen. Un tema
     que quiera otro oscuro pisa SOLO estos --o-*: el trabajo de decidir cuándo
     entran está una sola vez, más abajo. */
  --o-tinta: #ececea;
  --o-tinta-2: #9d9f98;
  --o-papel: #17181a;
  --o-papel-2: #1f2023;
  --o-linea: #2f3135;
  --o-sombra-tinte: 0 0 0;

  /* Velo de la portada: sin esto, el nombre del negocio sobre una foto clara no
     se lee y no hay foto buena que arregle eso.
     Son DOS capas y las dos hacen falta. El charco (radial) es el que hace el
     trabajo: oscurece detrás del texto y se desvanece antes del borde, así una
     foto clara —una taza blanca, una pared— sostiene el título igual. El
     degradado (linear) le da fondo al encabezado y cierra abajo. Un velo parejo
     y fuerte también se leería, pero apaga la foto, que es lo único que había
     para mostrar. */
  --hero-velo:
    radial-gradient(78% 62% at 50% 48%, rgb(0 0 0 / .55), transparent 76%),
    linear-gradient(180deg, rgb(0 0 0 / .38), rgb(0 0 0 / .22) 45%, rgb(0 0 0 / .5));
}

/* --- Cuándo se pone oscuro ------------------------------------------------ */
/* Dos reglas y las dos hacen falta, porque el CSS no puede juntar «lo pide el
   celular» con «lo eligió el visitante» en un solo selector:
   1. el que no tocó el botón sigue a su sistema, como siempre — y esto anda SIN
      JS, que es la razón de que no se resuelva todo desde el script;
   2. el que sí lo tocó manda, y su elección viaja en data-tema (ver sitio-ui.js).
   El `:not([data-tema])` es la bisagra: en cuanto elige a mano, el sistema deja
   de opinar. Los valores no se repiten: las dos remapean los mismos --o-*, así
   que un tema cambia su oscuro tocando SOLO esos. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --tinta: var(--o-tinta); --tinta-2: var(--o-tinta-2);
    --papel: var(--o-papel); --papel-2: var(--o-papel-2); --linea: var(--o-linea);
    --sombra-tinte: var(--o-sombra-tinte);
    --sombra: 0 10px 26px rgb(var(--sombra-tinte) / .5);
    --sombra-alta: 0 18px 44px rgb(var(--sombra-tinte) / .6);
  }
}
:root[data-tema="oscuro"] {
  --tinta: var(--o-tinta); --tinta-2: var(--o-tinta-2);
  --papel: var(--o-papel); --papel-2: var(--o-papel-2); --linea: var(--o-linea);
  --sombra-tinte: var(--o-sombra-tinte);
  --sombra: 0 10px 26px rgb(var(--sombra-tinte) / .5);
  --sombra-alta: 0 18px 44px rgb(var(--sombra-tinte) / .6);
}

/* Que los controles del navegador (scrollbars, campos) vayan con la página. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-tema]) { color-scheme: dark; } }
:root[data-tema="oscuro"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }

/* El encabezado es sticky, así que un salto a #catalogo dejaba el título
   escondido atrás: el scroll-padding le reserva el lugar.
   El alto real lo mide sitio-ui.js y lo escribe en --header-alto, porque cambia
   con el ancho: un renglón en la compu, dos en el celular (el buscador se lleva
   uno) y tres en uno angosto. Estos valores son el arranque, por si el JS no
   corre: se prefiere que sobre lugar a que el título quede tapado. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-alto, 84px);
}
@media (max-width: 720px) { html { scroll-padding-top: var(--header-alto, 140px); } }

body {
  margin: 0;
  font-family: var(--font-texto);
  color: var(--tinta);
  background: var(--papel);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-titulo);
  font-weight: var(--titulo-peso);
  font-style: var(--titulo-estilo);
  letter-spacing: var(--titulo-espaciado);
  line-height: var(--titulo-alto);
}

/* El `height: auto` no es adorno: los <img> llevan width/height en el HTML (para
   que el navegador les reserve el lugar y la página no salte al cargar), y esos
   atributos fijan el alto. Con el alto fijo, `aspect-ratio` NO aplica —solo
   entra si una de las dos medidas es automática—, así que la foto de la ficha
   se estiraba a 1200px de alto en vez de quedar cuadrada. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* --- Encabezado ---------------------------------------------------------- */
/* La barra cruza la pantalla entera (el fondo translúcido y la línea de abajo
   llegan a los dos bordes) y adentro va el renglón, con tope de ancho: en un
   monitor de 27" el logo y el carrito quedarían a medio metro uno del otro. */
/* El atributo `hidden` le gana a cualquier display. Sin esto, un elemento con
   `display: flex` (o grid, o block) puesto por su propia regla se sigue viendo
   aunque el JS le ponga `hidden`: el `display: none` del navegador es de la
   hoja del USUARIO y pierde contra cualquier regla nuestra.
   almacigo.css la tiene desde siempre, pero la web pública no carga esa hoja.
   Va acá y no en un tema: si falta, las cosas no se ven distintas, se ven MAL
   (el contador del pedido aparecía junto al botón de agregar). */
[hidden] { display: none !important; }

/* El logo de WhatsApp (templates/web/_icono_wa.html) lo comparten los temas.
   Acá va solo el tamaño por defecto; el color y los ajustes finos los pone
   cada tema. */
.s-ico-wa { width: 17px; height: 17px; flex: 0 0 auto; }

/* Texto solo para el lector de pantalla. Va en la BASE y no en un tema porque
   si falta no se ve distinto: se ve MAL, con el texto suelto en la pantalla.
   Hace falta cuando el control ya se entiende mirándolo (un círculo de color,
   un ícono) pero no leyéndolo. */
.s-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.s-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--papel) 85%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--linea);
}
/* `min-height` y no `height`: sin JS el buscador se va a un segundo renglón
   (abajo, en el media query) y con el alto clavado quedaría cortado. */
/* El `gap` es solo entre renglones: a lo ancho separa cada uno con su margen,
   porque no todas las juntas miden lo mismo (los íconos van casi pegados entre
   sí y bien separados del buscador). */
.s-header-in {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 0;
  min-height: var(--header-alto-min, 80px);
  max-width: var(--header-ancho, 1440px); margin: 0 auto;
  padding: 0 var(--header-px, 4rem);
}
/* La marca: el logo si lo cargó, el nombre escrito si no. El min-width: 0 es lo
   que le permite al nombre achicarse — sin eso el flex le respeta el ancho de
   su palabra más larga y, si no entra, lo parte en dos renglones. Lo elige el
   cliente y puede ser «Panadería y Confitería La Esperanza». */
.s-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; min-width: 0; flex: 0 1 auto; margin-right: 2rem;
}
.s-logo {
  height: var(--logo-alto, 52px); width: auto; max-width: 190px; flex: 0 0 auto;
  object-fit: contain;
  transition: transform var(--trans);
}
.s-brand:hover .s-logo { transform: scale(1.04); }
.s-brand-name {
  font-weight: 700; font-size: clamp(16px, 4.2vw, 19px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Los links, con la misma presencia que el resto: van en --tinta (el color del
   texto), no apagados. Un menú gris se lee como deshabilitado. */
.s-nav { display: flex; align-items: center; gap: var(--nav-gap, 2.25rem); }
.s-nav a {
  position: relative; text-decoration: none;
  font-size: var(--nav-size, .78rem); font-weight: 600; color: var(--tinta);
  letter-spacing: .03em;
  transition: color var(--trans);
}
/* La rayita que crece de izquierda a derecha al pasar por encima. */
.s-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -5px;
  width: 0; height: 2px; border-radius: 1px;
  background: var(--marca);
  transition: width var(--trans);
}
.s-nav a:hover { color: var(--marca); }
.s-nav a:hover::after { width: 100%; }

/* --- Buscar (en el encabezado) ------------------------------------------- */
/* El margin-left: auto del cajón parte el encabezado en dos grupos: la marca y
   los links contra la izquierda, buscar y los íconos contra la derecha. */
.s-buscar-cajon { flex: 0 1 320px; margin-left: auto; margin-right: 1.25rem; }
.s-buscar {
  display: flex; align-items: center; gap: 6px;
  min-width: 180px;
  padding: .3rem .3rem .3rem .9rem;
  border: 1.5px solid var(--linea); border-radius: 24px;
  background: var(--papel-2);
  transition: border-color var(--trans), background var(--trans), box-shadow var(--trans);
}
/* Al escribir se despega del fondo y se enciende con el color de la marca: es
   la única señal de que el Enter va a hacer algo. */
.s-buscar:focus-within {
  border-color: var(--marca); background: var(--papel);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 12%, transparent);
}
.s-buscar input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: .88rem; font-weight: 500; color: var(--tinta);
  padding: 6px 0;
}
.s-buscar input::placeholder { color: var(--tinta-2); opacity: 1; }
/* La X que Chrome le pone al type=search: pisa el ícono y descuadra la píldora. */
.s-buscar input::-webkit-search-cancel-button { -webkit-appearance: none; }
.s-buscar button {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%; background: none; color: var(--tinta-2);
}
.s-buscar button:hover { color: var(--marca); }

/* --- Los íconos del encabezado (lupa, carrito, tema) --------------------- */
/* Todos iguales: mismo tamaño, mismo blanco de toque y el mismo lavado de la
   marca al pasar por encima. */
.s-icono {
  position: relative; display: grid; place-items: center; flex: 0 0 auto;
  width: 42px; height: 42px; padding: 6px;
  border: 0; border-radius: 8px; background: none; cursor: pointer;
  text-decoration: none; color: var(--tinta); margin-left: .25rem;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--trans), background var(--trans);
}
.s-icono:hover {
  color: var(--marca);
  background: color-mix(in srgb, var(--marca) 8%, transparent);
}
/* El carrito abre el grupo de la derecha: se despega del buscador. */
.s-cart-link { margin-left: 1rem; }
/* La lupa es cosa del celular: en la compu está el buscador entero a la vista. */
.s-buscar-btn { display: none; }

/* El contador del carrito. */
.s-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px;
  padding: 0 4px; border-radius: 999px;
  background: var(--marca); color: var(--marca-tinta);
  font-size: .7rem; font-weight: 700; line-height: 20px; text-align: center;
}

/* --- Hamburguesa --------------------------------------------------------- */
/* Tres rayitas que se vuelven una X. Solo en el celular, y solo si hay JS para
   abrirla: el botón nace con `hidden` y se lo saca sitio-ui.js. Sin JS, el menú
   de abajo se queda visible como siempre. */
.s-menu-btn {
  display: none; flex: 0 0 auto; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 8px; margin-left: -8px;
  border: 0; background: none; cursor: pointer;
}
.s-menu-btn span {
  display: block; width: 24px; height: 2px; border-radius: 2px;
  background: var(--tinta);
  transition: transform var(--trans), opacity var(--trans);
}
.s-menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.s-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.s-menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 720px) {
  .s-header-in { padding: 0 var(--header-px-cel, 1.5rem); }

  /* El renglón, de izquierda a derecha: la marca, y contra la derecha la luna,
     la hamburguesa, la lupa y el carrito. El `order` es el que manda acá y no el
     HTML, porque en la compu el mismo encabezado se acomoda distinto (ahí no hay
     hamburguesa y buscar va entero a la vista).

     La marca va con `flex: 1 1 0`: su medida de partida es CERO, así que se
     queda con todo lo que sobra pero nunca es la que hace saltar de renglón —y
     de paso empuja los botones contra la derecha sin necesidad de un `auto`—.
     Con `flex-basis: auto` (su ancho de contenido) un nombre largo mandaba el
     carrito a un segundo renglón, porque flexbox parte la línea ANTES de
     encoger a nadie; el nombre ni se enteraba de que tenía que achicarse.

     La luna va con aire de los dos lados: es la única que no tiene que ver con
     comprar, así que se lee sola y no como parte del grupo del pedido. */
  .s-brand { order: 0; flex: 1 1 0; min-width: 0; margin-right: .5rem; }
  .con-js .s-menu-btn { display: flex; order: 1; margin-left: 0; }
  .con-js .s-buscar-btn { display: grid; order: 3; margin-left: .125rem; }
  .s-cart-link { order: 4; margin-left: .125rem; }

  /* El nombre deja de cortarse con puntos suspensivos y baja a un segundo
     renglón: en el celular hay alto de sobra y ancho no, y «Panadería y
     Confitería La Esperanza» en dos líneas se lee; cortado, no. Dos como
     máximo, si no el encabezado se vuelve un párrafo. */
  .s-brand-name, .s-header-in .marca-nombre {
    white-space: normal; overflow-wrap: anywhere; line-height: 1.2;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  }

  /* El buscador se despega y baja como un cartel a lo ancho: entre medio de todo
     eso quedaría del ancho de una estampilla. Lo abre la lupa.
     Sin JS no hay lupa que lo abra, así que se queda a la vista en un segundo
     renglón: un buscador escondido detrás de un botón muerto no lo encuentra
     nadie. Por eso lo de abajo va todo con `.con-js` y esto no. */
  .s-buscar-cajon { order: 5; flex-basis: 100%; margin: 0; }
  .con-js .s-buscar-cajon {
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 1rem 1.25rem;
    background: var(--papel);
    border-bottom: 1px solid var(--linea);
    box-shadow: var(--sombra);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: transform var(--trans), opacity var(--trans), visibility var(--trans);
  }
  .con-js .s-buscar-cajon.abierto { transform: none; opacity: 1; visibility: visible; }

  .con-js .s-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 0;
    background: var(--papel);
    border-bottom: 1px solid var(--linea);
    box-shadow: var(--sombra);
    /* visibility además de opacity: sin eso el menú cerrado sigue estando ahí
       y se lo lleva el tabulador, o te come un toque sobre la portada. */
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: transform var(--trans), opacity var(--trans), visibility var(--trans);
  }
  .con-js .s-nav.abierto { transform: none; opacity: 1; visibility: visible; }
  .con-js .s-nav a { padding: 13px var(--sec-px); font-size: 16px; }
  .con-js .s-nav a::after { display: none; }   /* la rayita es cosa del hover */
}
@media (max-width: 560px) {
  .s-header-in { padding: 0 .875rem; gap: 8px 0; }
  :root { --logo-alto: 38px; }
}

/* --- Botones ------------------------------------------------------------- */
.s-btn {
  display: inline-block; padding: 13px 26px; border-radius: var(--btn-radio, 999px);
  background: var(--marca); color: var(--marca-tinta); text-decoration: none;
  font-family: var(--font-texto);
  font-weight: 600; font-size: 15px; border: 0; cursor: pointer;
  transition: filter var(--trans), transform var(--trans), box-shadow var(--trans);
}
.s-btn:hover { filter: brightness(1.08); }
.s-btn-sm { padding: 9px 16px; font-size: 14px; }
.s-btn-wa { background: #25d366; width: 100%; text-align: center; }

/* --- Portada ------------------------------------------------------------- */
/* Dos caras según lo que haya cargado el cliente: con foto va a sangre y el
   texto arriba; sin foto, un lavado de su color. Las dos tienen que quedar
   bien: el que todavía no tiene una buena foto no puede quedar con la web
   rota, y el que la tiene es lo primero que quiere mostrar. */
.s-hero {
  position: relative; isolation: isolate;
  display: grid; place-items: center;
  text-align: center;
  padding: var(--hero-py) var(--sec-px);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--marca) 10%, var(--papel)), var(--papel));
}
.s-hero-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.s-hero-foto::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--hero-velo);
}
/* Sobre la foto, la tinta es otra: se redefine acá y todo lo de adentro la
   hereda, sin repetir un color en cada regla. */
.s-hero-foto {
  --tinta: #fff;
  --tinta-2: rgb(255 255 255 / .82);
  color: var(--tinta);
  min-height: min(74vh, 620px);
  text-shadow: 0 1px 24px rgb(0 0 0 / .35);
}
/* Ancho en px y no en ch: el `ch` se mide con la fuente de ESTE elemento (el
   texto, 16px) y el título de adentro va a 68px, así que un 46ch le partía en
   dos un nombre de tres palabras. Lo que necesita medida de texto es el lema,
   y la tiene abajo. */
.s-hero-cont { max-width: min(100%, 860px); }
.s-hero h1 { margin: 0 0 12px; font-size: var(--t-h1); }
.s-hero-lema {
  margin: 0 auto 28px; max-width: 34ch;
  color: var(--tinta-2); font-size: var(--t-lema);
}

/* --- Secciones ----------------------------------------------------------- */
.s-sec { max-width: var(--ancho); margin: 0 auto; padding: var(--sec-py) var(--sec-px); }
.s-sec-title {
  margin: 0 0 var(--gap); font-size: var(--t-h2);
  display: flex; align-items: center; gap: 14px;
}
/* La rayita que sigue al título hasta el borde. Un tema que no la quiera la
   apaga con --sec-title-linea: transparent. */
.s-sec-title::after {
  content: ""; flex: 1; height: 1px; background: var(--sec-title-linea, var(--linea));
}

/* --- Filtros ------------------------------------------------------------- */
/* Lo que se está buscando ahora mismo. El buscador está arriba, en el
   encabezado, así que acá abajo hay que decir por qué la lista está recortada:
   si no, el catálogo parece vacío. */
.s-buscando { margin: 0 0 16px; color: var(--tinta-2); text-align: center; }
.s-buscando strong { color: var(--tinta); }
.s-buscando a { color: var(--marca); }

.s-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.s-chip {
  padding: 7px 14px; border-radius: 999px; text-decoration: none; font-size: 14px;
  border: 1px solid var(--linea); background: var(--papel-2); color: var(--tinta-2);
}
.s-chip:hover { border-color: var(--marca); color: var(--marca); }
.s-chip.activo { background: var(--marca); border-color: var(--marca); color: #fff; }

/* --- Grilla de productos ------------------------------------------------- */
.s-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
@media (max-width: 480px) {
  .s-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Destacados: pocos y grandes, y centrados. Con la grilla del catálogo, un
   negocio con UN destacado quedaba con una tarjeta chica arrinconada a la
   izquierda y media pantalla vacía al lado. `auto-fit` desarma las columnas
   que sobran y el tope evita que una sola tarjeta se estire a lo ancho. */
.s-grid-destacados {
  grid-template-columns: repeat(auto-fit, minmax(260px, 380px));
  justify-content: center;
}
@media (max-width: 480px) {
  /* `auto-fit` y no dos columnas fijas: con UN destacado, la mitad de la
     pantalla quedaba vacía al lado. Con uno ocupa todo el ancho (que es lo que
     significa destacarlo), con dos o más se acomodan de a dos. */
  .s-grid-destacados { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

.s-card {
  position: relative;            /* ancla del link estirado y de los controles */
  text-decoration: none; color: inherit;
  border: 1px solid var(--card-linea, var(--linea)); border-radius: var(--radio);
  overflow: hidden; background: var(--card-fondo, var(--papel-2));
  display: flex; flex-direction: column;
  transition: transform var(--trans), box-shadow var(--trans);
}
.s-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
/* La foto manda: es lo que hace que alguien toque. La proporción la elige el
   tema (--card-foto), pero es UNA para todas — con fotos de distinto alto la
   grilla queda como una escalera. */
.s-card-foto {
  position: relative; aspect-ratio: var(--card-foto); background: var(--papel);
  overflow: hidden;
}
.s-card-foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--trans);
}
.s-card:hover .s-card-foto img { transform: scale(var(--card-zoom, 1)); }
.s-card-sinfoto {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-size: 40px; opacity: .35;
}
.s-card-body { padding: 14px 16px 16px; }
.s-card-body h3 { margin: 0 0 4px; font-size: var(--t-h3); }
/* Flex + nowrap para que el precio no se parta al medio. En una pantalla
   angosta, «$ 12.500 $ 15.000» cortaba en el espacio de adentro de un importe y
   quedaba «$ 12.500 $» / «15.000». Al ser flex, cada pedazo de texto es un ítem
   suelto que el nowrap mantiene entero, y el wrap los baja de a uno completo.
   Se hace acá y no con &nbsp; en las plantillas porque el precio de la variante
   lo reescribe el JS: un espacio duro habría que acordarse de meterlo también
   allá, y este CSS los cubre a los dos. */
.s-card-precio {
  margin: 0; font-size: var(--t-precio); font-weight: 700;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px;
  white-space: nowrap;
}
.s-desde { font-size: 12px; font-weight: 500; color: var(--tinta-2); }

.s-tag {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #fff;
}
.s-tag-sin { background: #6b6d66; }

/* --- La tarjeta por dentro: link estirado, galería y agregar rápido ------ */
/* La tarjeta dejó de ser un <a> que envuelve todo, porque adentro de un link no
   pueden ir botones (ver el comentario de _tarjeta.html). En su lugar, el link
   del NOMBRE se estira con un ::after que cubre la tarjeta entera: sigue siendo
   un link de verdad —anda sin JS y Google lo entiende— y toda la tarjeta se
   puede tocar igual.
   El z-index es lo que hace que funcione: la capa del link va en 1 y los
   controles en 2, así el que quiere pasar la foto pasa la foto, y el que toca
   cualquier otro lado entra al producto. */
.s-card-link { color: inherit; text-decoration: none; }
.s-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.s-card-flecha, .s-card-puntos, .s-card-sumar { z-index: 2; }

/* Flechas. Se muestran al pasar por la TARJETA (`.s-card:hover`) y no por la
   foto: encima de la foto está la capa del link, así que el :hover de la foto
   nunca llegaría a dispararse. */
.s-card-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(255 255 255 / .85);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--marca);
  box-shadow: 0 2px 8px rgb(0 0 0 / .12);
  opacity: 0;
  transition: opacity .22s ease, background var(--trans), transform .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.s-card:hover .s-card-flecha { opacity: 1; }
.s-card:hover .s-card-flecha:hover {
  background: rgb(255 255 255 / .98); transform: translateY(-50%) scale(1.08);
}
.s-card-flecha-prev { left: 8px; }
.s-card-flecha-next { right: 8px; }

/* Puntitos: cuántas fotos hay y en cuál estás. La pastilla clara de atrás es
   para que se vean sobre una foto clara igual que sobre una oscura. */
.s-card-puntos {
  position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px;
  padding: 4px 8px; border-radius: 10px;
  background: rgb(255 255 255 / .7);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.s-card-punto {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(0 0 0 / .25);
  transition: background .18s ease, transform .18s ease;
}
.s-card-punto:hover { background: rgb(0 0 0 / .45); }
.s-card-punto.activo { background: var(--marca); transform: scale(1.3); }

/* Agregar sin entrar al producto. Asoma al pasar por la tarjeta. */
.s-card-sumar {
  position: absolute; right: 12px; bottom: 12px;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  /* Blanco fijo, NO --papel: esto va sobre la foto, y una foto es una foto en
     el tema claro y en el oscuro. Con --papel, en el tema de noche quedaba un
     círculo negro al lado de flechas blancas. */
  background: #fff; color: var(--marca);
  box-shadow: 0 4px 15px rgb(0 0 0 / .15);
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s cubic-bezier(.175, .885, .32, 1.275),
              transform .3s cubic-bezier(.175, .885, .32, 1.275),
              background var(--trans), color var(--trans);
  -webkit-tap-highlight-color: transparent;
}
.s-card:hover .s-card-sumar { opacity: 1; transform: translateY(0); }
.s-card:hover .s-card-sumar:hover {
  background: var(--marca); color: var(--marca-tinta);
  transform: translateY(0) scale(1.12);
}
/* El envión de "entró al pedido". Va como animación y no como transform en una
   clase: así no pelea con el transform que ya usan el asomarse y el hover. */
@keyframes s-sumado { 40% { transform: scale(.86); } }
.s-card-sumar.s-sumado { animation: s-sumado .28s ease; }

/* En pantalla táctil no hay hover: los controles se ven siempre, si no serían
   invisibles justo donde más se usan. */
@media (hover: none) {
  .s-card-flecha { opacity: .85; width: 32px; height: 32px; }
  .s-card-sumar {
    opacity: 1; transform: none;
    width: 40px; height: 40px; right: 10px; bottom: 10px;
  }
}

.s-vacio { color: var(--tinta-2); text-align: center; padding: 32px 0; }
.s-vacio a { color: var(--marca); }

/* Texto que escribe el cliente: respetamos sus saltos de línea. */
.s-texto { white-space: pre-wrap; color: var(--tinta-2); max-width: 68ch; }

/* --- Galería genérica: las flechas para pasar las fotos ------------------ */
/* Las mismas flechas en la tarjeta del catálogo de los temas que las piden y en
   la ficha de producto de todos. El HTML lo pone web/_galeria_controles.html y
   las mueve la galería genérica de sitio-ui.js.

   Van en `z-index: 2` por la misma razón que los otros controles: encima está
   la capa del link estirado (z-index 1) que hace que toda la tarjeta lleve al
   producto, y una flecha debajo de esa capa abriría la ficha en vez de pasar la
   foto. Neutras a propósito —pastilla blanca, ícono oscuro— porque van SOBRE
   una foto, que es una foto igual en el tema claro que en el de noche; el tema
   que quiera otra cosa las pisa en su hoja. */
.s-gal-flecha {
  position: absolute; top: 50%; z-index: 2;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(255 255 255 / .88); color: #1c1c1c;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgb(0 0 0 / .16);
  opacity: 0;
  transition: opacity .22s ease, background var(--trans), transform .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.s-gal-prev { left: 10px; }
.s-gal-next { right: 10px; }

/* Se muestran al pasar por la TARJETA y no por la foto: encima de la foto está
   la capa del link, así que el :hover de la foto nunca llegaría a dispararse.
   En la ficha no hay tal capa y el contenedor alcanza. Y con `:focus-visible`
   para el que llega con el teclado, que si no las movería a ciegas. */
[data-tarjeta]:hover .s-gal-flecha,
[data-galeria]:hover .s-gal-flecha,
.s-gal-flecha:focus-visible { opacity: 1; }
.s-gal-flecha:hover { background: #fff; transform: translateY(-50%) scale(1.08); }

/* Puntitos: cuántas fotos hay y en cuál estás. La pastilla clara de atrás es
   para que se vean sobre una foto clara igual que sobre una oscura. */
.s-gal-puntos {
  position: absolute; bottom: 10px; left: 50%; z-index: 2;
  transform: translateX(-50%);
  display: flex; gap: 5px;
  padding: 4px 8px; border-radius: 10px;
  background: rgb(255 255 255 / .7);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.s-gal-punto {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(0 0 0 / .25);
  transition: background .18s ease, transform .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.s-gal-punto:hover { background: rgb(0 0 0 / .5); }
.s-gal-punto.activa { background: #1c1c1c; transform: scale(1.3); }

/* En pantalla táctil no hay hover: las flechas se ven siempre, si no serían
   invisibles justo donde más se usan (y ahí el dedo también puede arrastrar). */
@media (hover: none) {
  .s-gal-flecha { opacity: .92; width: 34px; height: 34px; }
}

/* --- La tarjeta de los temas: que toda ella se pueda tocar --------------- */
/* Estas valen para las tarjetas que traen `data-tarjeta` —las de los temas
   Taller artesanal, Boutique nocturna, Pasarela y Fogón— y viven acá y no
   repetidas en las cuatro hojas, que es lo mismo cuatro veces.

   Dos cosas que hacían que la tarjeta se sintiera rota:

   1. La foto y el link se pueden ARRASTRAR de fábrica. Como la capa que cubre
      la tarjeta es la del link del nombre, apretar sobre la foto y correr el
      mouse dos píxeles —cosa que pasa sola, porque la foto se agranda debajo
      del cursor— empezaba un arrastre y el click no llegaba nunca: se hacía
      click en la tarjeta y no entraba al producto.

   2. En el celular, el toque pintaba el recuadro azul del navegador sobre el
      nombre —que es lo que está adentro del link— y recién después entraba.
      Se veía como un error de la página, no como una tarjeta que responde. En
      su lugar, la tarjeta entera se hunde un poco mientras el dedo está
      apoyado, que es la respuesta que se espera. */
[data-tarjeta], [data-tarjeta] a { -webkit-tap-highlight-color: transparent; }
[data-tarjeta] img, [data-tarjeta] a {
  -webkit-user-drag: none; user-drag: none;
}
/* El atributo va DOS VECES a propósito: cada tema declara su propio
   `transition` en la clase de la tarjeta (.gm-card, .mx-card…) y su hoja carga
   después de esta, así que con un solo `[data-tarjeta]` empatan y gana la del
   tema — el hundido quedaba animándose en 250ms, que para un toque se siente
   lento. Con los dos atributos gana esta. Lo que se pisa son transiciones de
   :hover, que en una pantalla táctil no corren. */
@media (hover: none) {
  [data-tarjeta][data-producto] { transition: transform .12s ease; }
  [data-tarjeta][data-producto]:active { transform: scale(.985); }
}

/* --- Ficha de producto --------------------------------------------------- */
.s-prod { max-width: var(--ancho); margin: 0 auto; padding: 24px 20px 56px; }
.s-migas { display: flex; gap: 8px; font-size: 14px; color: var(--tinta-2); margin-bottom: 18px; }
.s-migas a { text-decoration: none; }
.s-migas a:hover { color: var(--marca); }

.s-prod-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
@media (max-width: 860px) { .s-prod-cols { grid-template-columns: 1fr; gap: 22px; } }

/* El marco existe para que las flechas tengan de dónde colgarse: la columna
   entera (.s-galeria) incluye las miniaturas, y centradas ahí quedaban corridas
   hacia abajo. */
.s-galeria-marco { position: relative; }
.s-galeria-grande {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radio); border: 1px solid var(--linea); background: var(--papel-2);
}
.s-galeria-mini { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.s-mini {
  width: 68px; height: 68px; padding: 0; cursor: pointer; overflow: hidden;
  border: 2px solid var(--linea); border-radius: 10px; background: none;
}
.s-mini img { width: 100%; height: 100%; object-fit: cover; }
.s-mini.activa { border-color: var(--marca); }

.s-prod-info h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.2; }
.s-prod-desc { margin: 0 0 16px; color: var(--tinta-2); }
/* Mismo criterio que .s-card-precio: cada importe entero, y si no entran los
   dos, el tachado baja completo. */
.s-prod-precio {
  margin: 0 0 20px; font-size: clamp(26px, 1.4rem + 1.2vw, 34px); font-weight: 700;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px;
  white-space: nowrap;
}

.s-label { display: block; font-size: 13px; color: var(--tinta-2); margin-bottom: 8px; }
.s-variantes { margin-bottom: 18px; }
.s-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.s-opcion {
  padding: 10px 16px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--linea); border-radius: 10px;
  background: var(--papel-2); color: var(--tinta);
}
.s-opcion:hover:not(:disabled) { border-color: var(--marca); }
.s-opcion.activa { background: var(--marca); border-color: var(--marca); color: #fff; }
.s-opcion:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.s-opcion small { font-weight: 400; }

/* Opciones de N ejes: un bloque por grupo (Color, Talle), cada uno con su
   etiqueta arriba. Reusan .s-opciones/.s-opcion, que ya son los chips. */
.s-grupos { margin-bottom: 18px; }
.s-grupo + .s-grupo { margin-top: 14px; }


.s-stock { margin: 0 0 18px; font-size: 14px; color: var(--tinta-2); }
.s-prod-detalle { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--linea); }
.s-prod-detalle h2 { margin: 0 0 10px; font-size: 18px; }

/* --- Agregar al pedido (ficha) ------------------------------------------- */
.s-acciones { display: flex; gap: 10px; align-items: stretch; margin-bottom: 10px; }
.s-cant {
  display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--linea); border-radius: 999px; background: var(--papel-2);
}
.s-cant button {
  width: 38px; height: 44px; border: 0; background: none; cursor: pointer;
  font-size: 20px; color: var(--tinta); border-radius: 999px;
}
.s-cant button:hover { color: var(--marca); }
.s-cant span { min-width: 24px; text-align: center; font-weight: 700; }
.s-acciones .s-btn { flex: 1; }
.s-agregado { margin: 0 0 14px; font-size: 14px; color: var(--marca); font-weight: 600; }
.s-agregado a { color: inherit; }
.s-label-mal { color: #c0392b; font-weight: 600; }

/* --- Carrito y recibo ---------------------------------------------------- */
.s-carrito { max-width: 640px; }

.s-cart-lineas {
  border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden;
}
.s-cart-linea {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 14px; background: var(--papel-2);
}
.s-cart-linea + .s-cart-linea { border-top: 1px solid var(--linea); }
.s-cart-linea small { display: block; color: var(--tinta-2); font-size: 13px; }

/* La foto de cada renglón. La pone sitio-carrito.js solo si la lista trae
   `data-foto-url` (hoy, la página del carrito): el recibo del pedido usa estos
   mismos renglones, los dibuja el servidor sin foto, y por eso la columna
   nueva cuelga de ese atributo y no de `.s-cart-linea` a secas. */
.s-cart-lineas[data-foto-url] .s-cart-linea { grid-template-columns: 60px 1fr auto auto; }
.s-cart-foto {
  display: block; width: 60px; height: 60px; object-fit: cover;
  border: 1px solid var(--linea); border-radius: 10px; background: var(--papel);
}
/* En el celular no entran cuatro columnas: la foto ocupa los dos renglones,
   arriba va el nombre y abajo la cantidad y el subtotal. */
@media (max-width: 560px) {
  .s-cart-lineas[data-foto-url] .s-cart-linea { grid-template-columns: 64px 1fr auto; row-gap: 10px; }
  .s-cart-lineas[data-foto-url] .s-cart-foto { grid-row: span 2; width: 64px; height: 64px; align-self: start; }
  .s-cart-lineas[data-foto-url] .s-cart-linea > div:not(.s-cart-qty) { grid-column: 2 / -1; }
}
.s-cart-qty { display: flex; align-items: center; gap: 4px; }
.s-cart-qty button {
  width: 30px; height: 30px; border: 1px solid var(--linea); border-radius: 8px;
  background: var(--papel); color: var(--tinta); cursor: pointer; font-size: 15px;
}
/* Con el dedo, 30px pegados uno al otro es poco: el − y el + están a 4px de
   distancia y errarle suma cuando querías restar. En el mouse 30 alcanza; el
   que cambia cantidades en el celular necesita el botón entero. */
@media (max-width: 720px) {
  .s-cart-qty { gap: 8px; }
  .s-cart-qty button { width: 42px; height: 42px; font-size: 18px; }
}
.s-cart-qty button:hover:not(:disabled) { border-color: var(--marca); color: var(--marca); }
.s-cart-qty button:disabled { opacity: .4; cursor: not-allowed; }
.s-cart-qty span { min-width: 20px; text-align: center; font-weight: 700; }
.s-cart-cant { color: var(--tinta-2); font-weight: 600; }
.s-cart-sub { font-weight: 700; min-width: 82px; text-align: right; }

.s-cart-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px 4px; font-size: 17px;
}
.s-cart-total strong { font-size: 26px; color: var(--marca); }

/* --- Formulario de checkout ---------------------------------------------- */
.s-form { display: flex; flex-direction: column; gap: 14px; }
.s-form h2 { margin: 10px 0 0; font-size: 19px; }
.s-form label { display: flex; flex-direction: column; gap: 5px; }
.s-form label > span { font-size: 13px; color: var(--tinta-2); }
.s-form input, .s-form select, .s-form textarea {
  font: inherit; font-size: 16px;  /* 16px: menos y iOS hace zoom al tocar */
  padding: 11px 13px; border: 1px solid var(--linea); border-radius: 10px;
  background: var(--papel-2); color: var(--tinta); width: 100%;
}
.s-form input:focus, .s-form select:focus, .s-form textarea:focus {
  outline: none; border-color: var(--marca);
}
.s-form textarea { resize: vertical; }
.s-form .s-btn { margin-top: 4px; }
.s-hint { margin: 0; font-size: 13px; color: var(--tinta-2); }

/* Método de pago: tarjetas arriba del formulario. Hoy hay una sola y ocupa el
   ancho; se abre en dos columnas recién cuando haya un segundo método (Mercado
   Pago). Si el navegador no entiende :has, quedan una abajo de la otra: feo
   antes que roto. */
.s-metodos { display: grid; grid-template-columns: 1fr; gap: 10px; }
.s-metodo {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 14px; font: inherit;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--papel-2); color: var(--tinta);
}
button.s-metodo { cursor: pointer; }
button.s-metodo:hover { border-color: var(--marca); }
.s-metodo.activa {
  border-color: var(--marca);
  background: color-mix(in srgb, var(--marca) 8%, var(--papel-2));
}
.s-metodo-icono { font-size: 20px; line-height: 1; }
.s-metodo strong { font-size: 15px; }
.s-metodo small { font-size: 13px; color: var(--tinta-2); line-height: 1.4; }

@media (min-width: 481px) {
  .s-metodos:has(> :nth-child(2)) { grid-template-columns: 1fr 1fr; }
}

.s-aviso { padding: 11px 13px; border-radius: 10px; font-size: 14px; margin: 0 0 16px; }
.s-aviso-error {
  border: 1px solid color-mix(in srgb, #c0392b 40%, var(--linea));
  background: color-mix(in srgb, #c0392b 10%, var(--papel));
  color: color-mix(in srgb, #c0392b 70%, var(--tinta));
}
.s-aviso-demo {
  border: 1px solid color-mix(in srgb, var(--demo-acento) 45%, var(--linea));
  background: color-mix(in srgb, var(--demo-acento) 14%, var(--papel));
  color: var(--tinta);
}

/* --- Cinta de «esto es una demostración» --------------------------------
   La ponen las cuatro páginas de muestra (ver templates/web/_demo.html) y es
   lo único de esta hoja que NO usa los tokens del tema: tiene que leerse igual
   en los cuatro diseños —dos de ellos oscuros— y verse como un cartel nuestro
   pegado encima de la página, no como una sección más. Por eso el único token
   que usa es suyo (--demo-acento) y ningún tema lo define. */
:root { --demo-acento: #e0a92e; }

.s-demo {
  background: #17191a;
  color: #ece9e2;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  font-family: var(--font-texto);
}
.s-demo-in {
  max-width: var(--ancho); margin: 0 auto; padding: 9px var(--sec-px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 10px; text-align: center;
  font-size: var(--t-chico); line-height: 1.45;
}
.s-demo-in strong { color: #fff; font-weight: 600; }
.s-demo-cta {
  flex: none;
  border: 1px solid var(--demo-acento); border-radius: 999px;
  padding: 3px 11px;
  color: var(--demo-acento); text-decoration: none; font-weight: 600;
  white-space: nowrap;
}
.s-demo-cta:hover { background: var(--demo-acento); color: #17191a; }

/* --- Recibo del pedido --------------------------------------------------- */
.s-recibo-head { text-align: center; padding: 8px 0 28px; }
.s-recibo-head h1 { margin: 0 0 8px; font-size: 27px; }
.s-recibo-head p { margin: 0 auto; max-width: 46ch; color: var(--tinta-2); }
.s-recibo-icono {
  width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center; font-size: 27px;
  background: var(--marca); color: #fff;
}
.s-recibo-mal .s-recibo-icono { background: #6b6d66; }

.s-paso {
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 20px; margin-bottom: 18px; background: var(--papel-2);
}
.s-paso h2 { margin: 0 0 8px; font-size: 19px; }
.s-paso p { margin: 0 0 14px; color: var(--tinta-2); }
.s-paso .s-cart-lineas { background: var(--papel); }
.s-paso .s-cart-linea { background: var(--papel); }

.s-datos-banco {
  display: grid; grid-template-columns: auto 1fr; gap: 8px 16px;
  margin: 0 0 14px; padding: 14px; border-radius: 10px; background: var(--papel);
  border: 1px solid var(--linea);
}
.s-datos-banco dt { font-size: 13px; color: var(--tinta-2); }
.s-datos-banco dd { margin: 0; font-weight: 600; }
.s-datos-banco code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px; user-select: all;   /* un toque lo selecciona entero */
  overflow-wrap: anywhere;             /* el CBU son 22 cifras sin espacio */
}
/* El alias y el CBU con su botón «Copiar» al lado (lo prende sitio-ui.js). */
.s-dato-copiable { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.s-copiar {
  padding: 4px 12px; border: 1px solid var(--linea); border-radius: 999px;
  background: var(--papel-2); color: var(--tinta);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.s-copiar:hover { border-color: var(--tinta-2); }

/* --- Pie ----------------------------------------------------------------- */
.s-footer { border-top: 1px solid var(--linea); background: var(--papel-2); margin-top: 40px; }
.s-footer-cols {
  max-width: var(--ancho); margin: 0 auto; padding: 40px 20px 28px;
  display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.s-footer h3 { margin: 0 0 8px; font-size: 15px; }
.s-footer p { margin: 0 0 5px; font-size: 14px; color: var(--tinta-2); }
.s-footer a { color: var(--tinta-2); text-decoration: none; }
.s-footer a:hover { color: var(--marca); }
.s-footer-bottom {
  border-top: 1px solid var(--linea);
  max-width: var(--ancho); margin: 0 auto; padding: 16px 20px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--tinta-2);
}
.s-credito { text-decoration: none; opacity: .75; }
.s-credito:hover { opacity: 1; }

/* --- WhatsApp flotante --------------------------------------------------- */
.s-wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 20;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; color: #fff; text-decoration: none;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .45);
  transition: transform .15s ease;
}
.s-wa:hover { transform: scale(1.07); }

/* --- Aparecer al scrollear ----------------------------------------------- */
/* Ojo con el `.con-js`: es lo único que separa esto de esconderle el catálogo a
   quien no le corrió el JS. La clase la pone el propio <html> al empezar a
   parsear (ver layout.html), así que no hay parpadeo — y si el script no está,
   nada se esconde nunca. Ver también sitio-revelar.js. */
.con-js .s-revelar {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.con-js .s-revelar.s-visible { opacity: 1; transform: none; }

/* Quien prefiere menos movimiento, no lo tiene: aparece todo junto y quieto.
   El `transition: none` de acá abajo lo cubre igual, pero mejor no arrancar
   corriendo animaciones que no se van a ver. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  html { scroll-behavior: auto; }
  .con-js .s-revelar { opacity: 1; transform: none; }
  /* El `transition: none` de arriba no alcanza para las animaciones: hay que
     apagarlas aparte. */
  .s-card-sumar.s-sumado { animation: none; }
}

/* --- Términos y Condiciones de venta (página pública) ------------------- */
.s-legal { max-width: 74ch; margin: 0 auto; padding: clamp(32px, 6vw, 64px) 20px clamp(48px, 8vw, 80px); }
.s-legal-head { padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--linea, rgba(128,128,128,.25)); }
.s-legal-head h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.1; }
.s-legal-fecha { margin-top: 10px; font-size: .88rem; color: var(--tinta-2); }
.s-legal h2 { font-size: clamp(1.1rem, 2.6vw, 1.35rem); margin: clamp(30px, 4vw, 44px) 0 12px; }
.s-legal p { margin-bottom: 13px; line-height: 1.7; }
.s-legal ul { margin: 0 0 16px; padding-left: 20px; list-style: disc; }
.s-legal li { margin-bottom: 7px; line-height: 1.65; }
.s-legal a { text-decoration: underline; text-underline-offset: 3px; }
/* El apartado del arrepentimiento se despega del resto: es al que llega el que
   entra por el enlace del pie, y tiene que encontrarlo sin buscar. */
.s-legal-arrep { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 6px; }
.s-btn-borde { background: transparent; border: 1px solid currentColor; color: inherit; }
.s-legal-nota { font-size: .92rem; color: var(--tinta-2); }
.s-legal-volver { margin-top: clamp(36px, 5vw, 56px); padding-top: 22px;
  border-top: 1px solid var(--linea, rgba(128,128,128,.25)); }

/* Los dos enlaces legales del pie */
.s-footer-legal { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 16px 0 0; font-size: .88rem; }
.s-footer-legal a { text-decoration: underline; text-underline-offset: 3px; opacity: .8; }
.s-footer-legal a:hover { opacity: 1; }