/* ============================================================
   honestbags — estilos globales
   Diseño: "Rediseño Honestbags tienda online" (Claude Design)
   ============================================================ */

/* ---- Tipografía: mismo sistema que lcpaper.com/honestpaper ----
   Autoalojada, subset latin, fuentes variables (OFL, Google Fonts).
   Bricolage Grotesque = titulares · Hanken Grotesk = texto ·
   Shantell Sans = notas manuscritas */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url("../fonts/bricolage-var-latin.woff2") format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url("../fonts/hanken-var-latin.woff2") format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url("../fonts/hanken-italic-latin.woff2") format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Shantell Sans';
  src: url("../fonts/shantell-var-latin.woff2") format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Shantell Sans';
  src: url("../fonts/shantell-italic-latin.woff2") format('woff2');
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

/* ---- Tokens ---- */
:root {
  --acc: #35B577;          /* acento de marca */
  /* Fondo del hero: el verde de marca oscurecido, en degradado. Detrás del texto
     el claro se lee a más de 5:1 y la pastilla mostaza se recorta a 4,5:1; con
     el verde claro de antes era 1,9:1 y la pastilla casi no tenía borde. */
  --verde-hondo: #14553A;
  --verde-hondo-medio: #1B6B43;
  --verde-hondo-claro: #2A9D63;
  /* El verde casi negro del hero: el del fondo de la foto de bodegón. */
  --verde-noche: #111E16;
  --verde-noche-medio: #182A1F;
  --verde-noche-claro: #22392B;
  --crema: #F4EFE0;        /* fondo base */
  --tinta: #1C2D22;        /* texto / superficies oscuras */
  --verde-claro: #C9E9D3;  /* barra superior, badges */
  --verde-suave: #CDEBD6;  /* secciones suaves */
  --menta: #E2F4E8;        /* confirmaciones: menta pastel, no grita */
  /* El contrapunto cálido del verde, solo en la home: sin él, de arriba abajo
     todo era verde. El kraft de las bolsas va bien con los dos. */
  --mostaza: #EBAE3F;      /* amarillo oscuro */
  --naranja-claro: #FAD9B7;
  --carta: #FDFBF3;        /* tarjetas */
  --kraft: linear-gradient(155deg, #E3D2B2 0%, #D8C29C 55%, #CBB289 100%);
  --kraft-claro: linear-gradient(155deg, #EDE2C9 0%, #E3D5B4 55%, #D8C6A0 100%);
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-text: 'Hanken Grotesk', system-ui, sans-serif;
  --font-hand: 'Shantell Sans', 'Segoe Script', cursive;
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4.5 4.5L19 7' fill='none' stroke='%23F4EFE0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- Marca de selección: todo bloque activo de un selector lleva tick ---- */
.opcion.is-active::after,
.color-btn.is-active::after {
  content: "";
  background-image: var(--tick);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex: none;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  color: var(--tinta);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
}
body { background: var(--crema); }
/* El lienzo va del color del pie. Lo que quede por debajo del footer —una página
   más corta que la ventana, el rebote del scroll— sigue en su color, y así el
   footer se lee como el final de la página y no como una barra sobre la crema. */
html { background: var(--tinta); }
h1, h2, h3,
.logo,
.uso-nombre,
.mensaje,
.producto-nombre,
.paso-titulo,
.dato-titulo,
.resumen-importe {
  font-family: var(--font-display);
}
a { color: var(--tinta); text-decoration: none; text-underline-offset: 0.18em; }
a:hover { color: #23855A; }
::selection { background: var(--acc); color: var(--tinta); }
button { font-family: inherit; }
/* Lo que no se dibuja también es de la marca: el cursor de texto, la barra de
   scroll, los ejemplos de los campos y el foco del teclado. El foco va en tinta
   sobre la crema y en verde sobre lo oscuro; la cabecera fija no lo tapa. */
:root { caret-color: var(--verde-hondo-medio); scrollbar-color: rgba(28, 45, 34, 0.35) var(--crema); }
html { scroll-padding-top: 96px; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.resumen :focus-visible,
.site-footer :focus-visible,
.site-footer-mini :focus-visible,
.admin-cab :focus-visible { outline-color: var(--acc); }
::placeholder { color: rgba(28, 45, 34, 0.66); opacity: 1; }

.wrap { max-width: 1360px; margin: 0 auto; }

/* ============================================================
   Barra superior
   ============================================================ */
.topbar {
  background: var(--verde-claro);
  color: var(--tinta);
  display: flex;
  justify-content: center;
  gap: 28px;
  padding: 10px 32px;
  font-size: 13.5px;
  font-weight: 600;
}

/* ============================================================
   Cabecera
   ============================================================ */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 56px;
  background: rgba(244, 239, 224, 0.78);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid rgba(28, 45, 34, 0.08);
  position: sticky;
  top: 0;
  z-index: 50;
}
.logo {
  font-weight: 800;
  font-size: 25px;
  letter-spacing: -0.03em;
  display: inline-block;
  line-height: 1;
}
.logo:hover { color: var(--tinta); }
.logo .swash { position: relative; display: inline-block; }
.logo .swash svg {
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 10px;
  overflow: visible;
}
.logo .dot { color: var(--acc); }
.main-nav { display: flex; align-items: center; gap: 32px; font-size: 15px; font-weight: 600; }
.main-nav .is-active { border-bottom: 2.5px solid var(--acc); }
.nav-externo { display: inline-flex; align-items: center; gap: 7px; }
.nav-externo svg { width: 14px; height: 14px; flex: none; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.btn-outline {
  font-size: 14px;
  font-weight: 600;
  padding: 11px 18px;
  border: 1.5px solid var(--tinta);
  border-radius: 999px;
}
.btn-outline:hover { background: var(--tinta); color: var(--crema); }
.btn-solid {
  font-size: 14px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--crema);
}
.btn-solid:hover { background: var(--acc); color: var(--tinta); }
/* Tercer botón de la cabecera: sin caja, para que «Cuenta» no compita con
   «Volver a pedir» ni con la cesta, que es a donde se quiere que se vaya. */
.btn-plano {
  font-size: 14px;
  font-weight: 600;
  padding: 11px 6px;
  color: rgba(28, 45, 34, 0.7);
}
.btn-plano:hover { color: var(--tinta); }
.btn-icono { display: inline-flex; align-items: center; gap: 8px; }
.rotulo-movil { display: none; font-weight: inherit; }
.btn-icono svg { width: 17px; height: 17px; flex: none; }
/* Los dos botones de la cabecera van más contenidos que los del resto de la
   página: así el menú cabe en una sola línea en un portátil. Ningún rótulo se
   parte en dos; si no cabe, manda la regla del tramo intermedio de abajo. */
.site-header .logo, .logo { flex: none; white-space: nowrap; }
.main-nav > a,
.header-actions > a { white-space: nowrap; }
/* Misma caja para los dos: altura fija y el mismo borde de 1,5 px (en la
   cesta, del color del fondo), así no hay uno más alto que el otro. */
.header-actions .btn-outline,
.header-actions .btn-solid { font-size: 13px; height: 36px; padding: 0 14px; }
.header-actions .btn-solid { border: 1.5px solid var(--tinta); }
.header-actions .btn-solid:hover { border-color: var(--acc); }
.header-actions .btn-plano { padding: 8px 6px; }
.header-actions .btn-icono { gap: 6px; }
.header-actions .btn-icono svg { width: 15px; height: 15px; }

/* ============================================================
   Hero (Home)
   ============================================================ */
.hero {
  /* El verde del fondo de la foto, casi negro: más oscuro del lado del texto y
     con un poco de luz detrás de las bolsas, como en el estudio. */
  background:
    radial-gradient(ellipse 55% 65% at 76% 62%, rgba(58, 96, 72, 0.42), transparent 70%),
    linear-gradient(115deg, var(--verde-noche) 0%, var(--verde-noche-medio) 50%, var(--verde-noche-claro) 100%);
  color: var(--crema);
  padding: 88px 56px 96px;
  /* la foto puede salirse por la derecha: lo que asome se corta sin barra de scroll */
  overflow-x: clip;
}
.hero-inner {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 72px;
  align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
.hero-eyebrow {
  align-self: flex-start;
  padding: 8px 14px;
  background: var(--mostaza);
  color: var(--tinta);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.hero h1 {
  margin: 0;
  font-size: 59px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 800;
  text-wrap: balance;
}
.hero h1 .claro { color: var(--mostaza); }
.hero-lead {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  max-width: 560px;
  color: rgba(244, 239, 224, 0.88);
  text-wrap: pretty;
}
.hero-ctas { display: flex; gap: 14px; align-items: center; }
.btn-hero-primary {
  background: var(--tinta);
  color: var(--crema);
  padding: 18px 32px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
}
.btn-hero-primary:hover { background: var(--crema); color: var(--tinta); }
.btn-hero-secondary {
  padding: 18px 32px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  background: rgba(244, 239, 224, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-hero-secondary:hover { background: var(--crema); color: var(--tinta); }
/* Sobre el verde oscuro, los botones se invierten: el principal en crema y el
   secundario en contorno claro. Fuera del hero (cuenta, contacto) no cambian. */
.hero .btn-hero-primary { background: var(--crema); color: var(--tinta); }
.hero .btn-hero-primary:hover { background: var(--mostaza); color: var(--tinta); }
.hero .btn-hero-secondary {
  color: var(--crema);
  background: rgba(244, 239, 224, 0.1);
  box-shadow: inset 0 0 0 1.5px rgba(244, 239, 224, 0.5);
}
.hero .btn-hero-secondary:hover { background: var(--crema); color: var(--tinta); box-shadow: none; }
.btn-hero-primary.btn-icono svg,
.btn-hero-secondary.btn-icono svg { width: 19px; height: 19px; }
/* Recortada sobre transparente: las bolsas flotan sobre el verde del hero. */
.hero-foto {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.42));
}
/* En horizontal, un 30 % más grande que su columna: crece un poco hacia el
   texto y el resto hacia el margen derecho, y se mete en el acolchado de
   arriba y de abajo para que el hero no se alargue. */
@media (min-width: 1101px) {
  .hero-foto { width: 130%; max-width: none; margin: -52px -12% -60px -18%; }
}
/* ============================================================
   Selector por uso (Home)
   ============================================================ */
.selector {
  /* El verde de marca: el hero es casi negro y, con el mismo oscuro, los dos
     bloques se fundían en uno. */
  background: linear-gradient(160deg, var(--verde-hondo) 0%, var(--verde-hondo-medio) 100%);
  color: var(--crema);
  padding: 96px 56px;
}
.selector .wrap { display: flex; flex-direction: column; gap: 44px; }
.selector-head { display: flex; flex-direction: column; gap: 10px; }
.selector h2 { margin: 0; font-size: 52px; font-weight: 800; letter-spacing: -0.03em; }
.selector-sub {
  font-size: 17px;
  color: rgba(244, 239, 224, 0.82);
  max-width: 640px;
  line-height: 1.5;
}
.usos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.uso-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 26px;
  border: 1px solid rgba(244, 239, 224, 0.18);
  border-radius: 24px;
  color: var(--crema);
  min-height: 210px;
  background: rgba(244, 239, 224, 0.04);
}
.uso-card:hover { background: var(--acc); color: var(--tinta); border-color: var(--acc); }
.uso-card svg { width: 48px; height: 48px; color: var(--mostaza); }
.uso-card:hover svg,
.uso-card.is-elegido svg { color: var(--tinta); }
/* El sector elegido se queda encendido mientras su cajón está abierto: así se
   ve de qué es la lista que ha salido debajo. */
.uso-card.is-elegido {
  background: var(--acc);
  color: var(--tinta);
  border-color: var(--acc);
}
.uso-body { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.uso-nombre { font-family: var(--font-display); font-size: 27px; font-weight: 800; letter-spacing: -0.02em; }
.uso-para { font-size: 14px; line-height: 1.45; opacity: 0.9; }

/* Cajón de un sector: se abre a todo lo ancho, debajo de la fila del sector
   pulsado, con las bolsas que van bien para eso. Claro sobre el verde noche,
   para que se lea como lo que hay dentro y no como otra tarjeta. */
.uso-cajon {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border-radius: 24px;
  background: var(--crema);
  color: var(--tinta);
  animation: uso-cajon-entra 0.2s ease-out;
}
.uso-cajon:focus { outline: none; }
.uso-cajon:focus-visible { outline: 3px solid var(--mostaza); outline-offset: 3px; }
@keyframes uso-cajon-entra {
  from { opacity: 0; transform: translateY(-8px); }
}
.uso-cajon-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.uso-cajon-titulo { margin: 0; font-size: 17px; color: rgba(28, 45, 34, 0.72); }
.uso-cajon-titulo strong {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tinta);
}
.uso-cajon-cerrar {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  font: inherit;
  font-weight: 700;
  color: var(--tinta);
  background: none;
  border: 1px solid rgba(28, 45, 34, 0.25);
  border-radius: 999px;
  cursor: pointer;
}
.uso-cajon-cerrar:hover { border-color: var(--tinta); }
.uso-cajon-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.uso-cajon-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px 10px 10px;
  background: var(--carta);
  border: 1px solid rgba(28, 45, 34, 0.08);
  border-radius: 18px;
  color: var(--tinta);
}
.uso-cajon-item:hover { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
.uso-cajon-item img {
  flex: none;
  width: 72px;
  height: 72px;
  object-fit: cover;
  background: #FFF;
  border-radius: 12px;
}
.uso-cajon-cuerpo { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.uso-cajon-nombre { font-weight: 800; font-size: 16.5px; line-height: 1.2; letter-spacing: -0.01em; }
.uso-cajon-precio { font-weight: 700; font-size: 15px; }
.uso-cajon-meta { font-size: 13px; color: rgba(28, 45, 34, 0.68); }
.uso-cajon-ir {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--crema);
  font-size: 18px;
}
.uso-cajon-item:hover .uso-cajon-ir { background: var(--acc); color: var(--tinta); }
@media (prefers-reduced-motion: reduce) {
  .uso-cajon { animation: none; }
}

/* ============================================================
   Bodegón de la gama (Home)
   La foto viene sobre un verde casi negro: la franja lleva ese mismo verde,
   con la luz del suelo abajo a la izquierda como en la foto, y los bordes de
   la imagen se funden en él. No se ve dónde acaba la foto.
   ============================================================ */
.bodegon {
  background:
    radial-gradient(ellipse 45% 38% at 8% 100%, rgba(60, 87, 71, 0.85), transparent 75%),
    linear-gradient(180deg, #172A1D 0%, #132318 55%, #12201A 100%);
  color: var(--crema);
  padding-top: 72px;
  overflow: hidden;
}
.bodegon-copy {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 56px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.bodegon-eyebrow {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--mostaza);
}
.bodegon h2 { margin: 0; font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.bodegon-link {
  flex: none;
  font-weight: 700;
  color: var(--crema);
  border-bottom: 2px solid var(--acc);
  padding-bottom: 2px;
}
.bodegon-link:hover { border-bottom-color: var(--crema); }
.bodegon-foto {
  display: block;
  width: 100%;
  max-width: 1760px;
  height: auto;
  margin: 8px auto 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
                      linear-gradient(180deg, transparent 0, #000 9%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
              linear-gradient(180deg, transparent 0, #000 9%);
  mask-composite: intersect;
}
/* Las tarjetas de «En stock» y «Tu logo» venían pegadas a la sección de antes. */
.bodegon + .oferta { padding-top: 96px; }

/* ============================================================
   Catálogo (Home)
   ============================================================ */
.catalogo {
  padding: 96px 56px;
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 44px;
  /* La cabecera es sticky: sin esto, el salto desde el selector de sectores
     dejaba el titular del catálogo escondido debajo. Se corrige por tramos
     porque la cabecera crece al bajar: el menú se le pone debajo. */
  scroll-margin-top: 84px;
}
.catalogo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.catalogo h2 { margin: 0; font-size: 52px; font-weight: 800; letter-spacing: -0.03em; }
/* Seis tarjetas y, entre la primera fila y la segunda, el cajón de las planas
   a todo lo ancho. */
.productos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.producto-card {
  display: flex;
  flex-direction: column;
  background: var(--carta);
  border: 1px solid rgba(28, 45, 34, 0.08);
  border-radius: 24px;
  overflow: hidden;
  transition: opacity 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.producto-card:hover { box-shadow: 0 18px 44px rgba(28, 45, 34, 0.14); }
@media (prefers-reduced-motion: reduce) {
  .producto-card { transition: none; }
}

/* Grupo de las bolsas planas: tres familias que, vistas desde fuera, son la
   misma bolsa. Siempre abierto: una bandeja color kraft, a todo lo ancho, con
   su título y su «desde», y dentro las tres tarjetas de siempre, que se leen
   como tipos de esa bolsa y no como tres productos más. */
.producto-grupo {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 26px 24px 24px;
  background: var(--kraft-claro);
  border: 1px solid rgba(28, 45, 34, 0.14);
  border-radius: 30px;
}
.producto-grupo-cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding: 0 4px;
}
.producto-grupo-texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.producto-grupo-nombre {
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.producto-grupo-humano { margin: 0; font-size: 15.5px; line-height: 1.45; color: rgba(28, 45, 34, 0.82); }
.producto-grupo-cab .producto-caja { font-size: 26px; }
.producto-grupo-cab .producto-caja .desde { color: rgba(28, 45, 34, 0.8); }
.producto-grupo-opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.producto-grupo .producto-card { border-color: rgba(28, 45, 34, 0.12); }
.producto-foto { aspect-ratio: 1 / 1; position: relative; display: block; background: #FFF; }
.producto-info { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.producto-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.producto-nombre { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.producto-linea {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(28, 45, 34, 0.45);
}
.producto-humano {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(28, 45, 34, 0.68);
  min-height: 42px;
  text-wrap: pretty;
}
.producto-compra {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid rgba(28, 45, 34, 0.1);
  padding-top: 14px;
}
.producto-precio { display: flex; flex-direction: column; gap: 2px; }
.producto-caja { font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.producto-caja .desde { font-size: 13px; font-weight: 600; color: rgba(28, 45, 34, 0.72); margin-right: 2px; }
.producto-nombre { line-height: 1.15; }
.producto-meta { font-size: 13px; font-weight: 500; color: rgba(28, 45, 34, 0.72); }
.producto-add {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--crema);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
}
.producto-add:hover { background: var(--acc); color: var(--tinta); }

/* ============================================================
   Mensajes en bolsa (Home)
   ============================================================ */
/* La foto va recortada y sin margen vertical: toca el borde de arriba y el de
   abajo de la sección, y es el texto quien decide la altura. */
.mensajes { background: var(--acc); }
.mensajes-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 38%, 620px);
  gap: 56px;
  align-items: stretch;
  /* El texto se alinea con la retícula de la página; la foto llega al borde. */
  padding-left: max(56px, calc((100% - 1360px) / 2));
}
.mensajes-copy { padding: 80px 0; align-self: center; }
.mensajes-foto {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center bottom;
}
.mensaje {
  font-size: 54px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
}
.mensaje.claro { color: var(--crema); }
.mensajes-nota {
  margin: 28px 0 0;
  max-width: 640px;
  font-size: 20.5px;
  line-height: 1.5;
  color: var(--tinta);
  text-wrap: pretty;
}

/* ============================================================
   Evidencia / filosofía (Home)
   ============================================================ */
.filosofia {
  padding: 96px 56px;
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
}
.filosofia-copy { display: flex; flex-direction: column; gap: 22px; }
.eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(28, 45, 34, 0.55);
}
.filosofia h2 {
  margin: 0;
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
}
.filosofia-lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(28, 45, 34, 0.72);
  text-wrap: pretty;
}
.filosofia-link { font-size: 15px; font-weight: 700; text-decoration: underline; }
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dato-card {
  border: 1px solid rgba(28, 45, 34, 0.08);
  border-radius: 24px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 214px;
  background: var(--carta);
}
.dato-icono { width: 30px; height: 30px; overflow: visible; }
.dato-titulo { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.dato-nota {
  margin-top: auto;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(28, 45, 34, 0.72);
}

/* ============================================================
   Dos niveles de oferta (Home)
   ============================================================ */
.oferta {
  padding: 0 56px 96px;
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.oferta-card {
  padding: 44px;
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 340px;
}
.oferta-card h3 { margin: 0; font-size: 38px; font-weight: 800; letter-spacing: -0.02em; }
.oferta-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  max-width: 420px;
  text-wrap: pretty;
}
.oferta-cta { margin-top: auto; display: flex; align-items: center; gap: 20px; }
.oferta-dark { background: var(--tinta); color: var(--crema); }
.oferta-dark .eyebrow { color: var(--mostaza); }
.oferta-dark p { color: rgba(244, 239, 224, 0.75); }
.oferta-dark .btn-oferta {
  display: inline-block;
  background: var(--crema);
  color: var(--tinta);
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 700;
}
.oferta-dark .btn-oferta:hover { background: var(--acc); color: var(--tinta); }
.oferta-light { background: var(--mostaza); }
.oferta-light .eyebrow { color: rgba(28, 45, 34, 0.85); }
.oferta-light p { color: rgba(28, 45, 34, 0.85); }
.oferta-light .btn-oferta {
  display: inline-block;
  background: var(--tinta);
  color: var(--crema);
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 700;
}
.oferta-light .btn-oferta:hover { background: var(--crema); color: var(--tinta); }

/* ============================================================
   Reposición (Home)
   ============================================================ */
.reponer { background: var(--naranja-claro); padding: 88px 56px; }
.reponer .wrap { display: flex; flex-direction: column; gap: 40px; }
.reponer-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.reponer h2 { margin: 0; font-size: 52px; font-weight: 800; letter-spacing: -0.03em; }
.reponer-link { font-size: 15px; font-weight: 700; text-decoration: underline; white-space: nowrap; }
/* Así funciona lo recurrente: el texto y la animación (assets/js/ciclo.js) */
.reponer-ciclo {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 32px;
  align-items: center;
  background: var(--crema);
  border-radius: 20px;
  padding: 28px 32px;
}
.reponer-ciclo h3 { margin: 0 0 10px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.reponer-ciclo-texto p { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: rgba(28, 45, 34, 0.75); }
@media (max-width: 900px) {
  .reponer-ciclo { grid-template-columns: 1fr; gap: 16px; padding: 22px 20px; }
}
.reponer-contacto { display: flex; align-items: center; gap: 16px; font-size: 15px; flex-wrap: wrap; }
.reponer-contacto .fuerte { font-weight: 800; }
.reponer-tel { font-size: 14px; font-weight: 500; color: rgba(28, 45, 34, 0.75); }
.reponer-tel a { color: inherit; text-decoration: underline; }
.reponer-tel a:hover { color: var(--tinta); }

/* ============================================================
   Preguntas frecuentes (Home)
   ============================================================ */
.preguntas { padding: 88px 56px; }
.preguntas .wrap { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; align-items: start; }
.preguntas h2 { margin: 0; font-size: 52px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; }
.faq { display: flex; flex-direction: column; border-top: 1px solid rgba(28, 45, 34, 0.15); }
.faq-item { border-bottom: 1px solid rgba(28, 45, 34, 0.15); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--acc); flex: none; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 0 0 22px; max-width: 680px; font-size: 16px; line-height: 1.6; color: rgba(28, 45, 34, 0.75); }
.faq-item a { text-decoration: underline; font-weight: 700; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--tinta); color: var(--crema); padding: 72px 56px 40px; }
.site-footer .wrap { display: flex; flex-direction: column; gap: 56px; }
.footer-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-brand .logo { font-size: 28px; color: var(--crema); }
.footer-tagline {
  font-size: 15px;
  color: rgba(244, 239, 224, 0.65);
  max-width: 380px;
  line-height: 1.5;
}
.footer-hermana { font-size: 13.5px; font-weight: 500; color: rgba(244, 239, 224, 0.62); }
.footer-hermana a { color: rgba(244, 239, 224, 0.8); text-decoration: underline; }
.footer-cols { display: flex; gap: 64px; font-size: 14.5px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col-titulo {
  font-size: 13px;
  font-weight: 700;
  color: rgba(244, 239, 224, 0.62);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.footer-col a { color: var(--crema); }
.footer-col a:hover { color: var(--acc); }
.footer-legal {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(244, 239, 224, 0.15);
  padding-top: 24px;
  font-size: 13px;
  color: rgba(244, 239, 224, 0.62);
}
.footer-legal-links { display: flex; gap: 20px; }
/* El pie compacto cuelga los enlaces legales fuera de .footer-legal, así que el
   color va también en la lista: sin esto heredan la tinta y no se ven sobre el
   fondo oscuro. */
.footer-legal a,
.footer-legal-links a { color: rgba(244, 239, 224, 0.62); }
.footer-legal a:hover,
.footer-legal-links a:hover { color: var(--crema); }
.footer-legal-links { align-items: center; }
/* La entrada al panel: un botón, pero del mismo tono apagado que lo legal, para
   que el cliente no lo confunda con algo suyo. */
.footer-legal-links a.footer-gestion {
  border: 1px solid rgba(244, 239, 224, 0.28);
  border-radius: 999px;
  padding: 3px 12px;
  margin: -4px 0;
  line-height: 1.4;
}
.footer-legal-links a.footer-gestion:hover { border-color: var(--crema); }

/* Footer compacto (Make it yours) */
.site-footer-mini {
  background: var(--tinta);
  color: var(--crema);
  padding: 36px 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
}
.site-footer-mini .brandline {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(244, 239, 224, 0.6);
}
.site-footer-mini .logo { font-size: 17px; letter-spacing: -0.02em; color: var(--crema); }
.site-footer-mini .logo .swash svg { bottom: -5px; height: 7px; }

/* ============================================================
   Bolsas personalizadas — intro y capacidades
   ============================================================ */
.intro {
  padding: 72px 56px 44px;
  width: 100%;
  max-width: 1472px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
  gap: 56px;
  align-items: center;
}
.intro-copy { display: flex; flex-direction: column; gap: 32px; }
.intro h1 { margin: 0; font-size: 50.4px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.intro p {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  max-width: 720px;
  color: rgba(28, 45, 34, 0.72);
  text-wrap: pretty;
}
.intro .eyebrow { align-self: flex-start; }
/* La foto viene con el fondo de estudio llevado a blanco puro
   (scripts/fundir_fondo.py), que es el neutro del multiply: así se funde con la
   crema de la página sin que se le vea el recuadro, y las sombras de las bolsas
   caen sobre el fondo de la página. Si se cambia la foto, hay que pasarla por
   el script; si no, volverá a verse el recorte. */
.intro-imagen { margin: 0; min-width: 0; }
.intro-imagen img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.resumen {
  background: var(--tinta);
  color: var(--crema);
  border-radius: 24px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* El panel es oscuro: un enlace con el color de texto normal desaparecería. */
.resumen a { color: var(--crema); text-decoration: underline; }
.resumen .cesta-aviso a { color: inherit; }
.resumen a:hover { color: var(--acc); }
.resumen-linea {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  color: rgba(244, 239, 224, 0.65);
}
/* La referencia de la combinación, la misma que en productospapel.com: es por
   la que preguntará quien llame o repita un pedido de siempre. */
.resumen-ref {
  flex: none;
  margin-left: 12px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: rgba(244, 239, 224, 0.55);
}
.resumen-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.resumen-importe { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.resumen-linea span:last-child, .cesta-subtotal, .pedido-total, .producto-caja { font-variant-numeric: tabular-nums; }
.resumen-unidad { font-size: 14px; font-weight: 600; color: rgba(244, 239, 224, 0.7); }
.resumen-detalles {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(244, 239, 224, 0.75);
  border-top: 1px solid rgba(244, 239, 224, 0.2);
  padding-top: 14px;
}
/* Cuánto falta para no pagar transporte: un empujón amable, en mostaza. */
.resumen-gratis { margin: -6px 0 0; font-size: 13.5px; font-weight: 600; color: var(--mostaza); }
/* Lo que falta para el pedido mínimo: en mostaza, que avisa sin alarmar. */
.resumen-minimo { color: var(--mostaza); font-weight: 600; }
.btn-prueba {
  background: var(--acc);
  color: var(--tinta);
  border: none;
  padding: 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
}
@media (hover: hover) { .btn-prueba:hover { background: var(--crema); } }
.btn-prueba[aria-busy="true"], .btn-transferencia[aria-busy="true"] { cursor: progress; opacity: 0.7; }
.btn-prueba:disabled { opacity: 0.45; cursor: not-allowed; background: var(--acc); }
.resumen-nota {
  font-size: 13px;
  font-weight: 500;
  color: rgba(244, 239, 224, 0.55);
  text-align: center;
}

/* ============================================================
   Proyectos especiales (Make it yours)
   ============================================================ */
.especiales { background: var(--verde-suave); padding: 64px 56px; }
.especiales .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}
.especiales-copy { display: flex; flex-direction: column; gap: 8px; }
.especiales h2 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.especiales p {
  margin: 0;
  font-size: 16px;
  color: rgba(28, 45, 34, 0.7);
  max-width: 560px;
  text-wrap: pretty;
}
.btn-fabricantes {
  background: var(--tinta);
  color: var(--crema);
  padding: 16px 30px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}
.btn-fabricantes:hover { background: var(--acc); color: var(--tinta); }

/* ============================================================
   Bolsas personalizadas — capacidades, proceso y contacto
   ============================================================ */
.capacidades { padding: 8px 56px 72px; }
.capacidades .wrap { display: flex; flex-direction: column; gap: 22px; }
.capacidades h2 { margin: 0; font-size: 42px; font-weight: 800; letter-spacing: -0.03em; }
.capacidades-lead {
  margin: 0;
  max-width: 720px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(28, 45, 34, 0.7);
  text-wrap: pretty;
}
/* La tabla de formatos se desplaza sola cuando no cabe, sin arrastrar la página. */
.tabla-formatos {
  overflow-x: auto;
  border: 1px solid rgba(28, 45, 34, 0.1);
  border-radius: 24px;
  background: var(--carta);
}
.tabla-formatos table { width: 100%; border-collapse: collapse; min-width: 720px; }
.tabla-formatos th,
.tabla-formatos td {
  text-align: left;
  padding: 16px 22px;
  font-size: 15px;
  border-bottom: 1px solid rgba(28, 45, 34, 0.08);
}
.tabla-formatos thead th {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(28, 45, 34, 0.55);
}
.tabla-formatos tbody th { font-weight: 800; }
.tabla-formatos tbody tr:last-child th,
.tabla-formatos tbody tr:last-child td { border-bottom: 0; }
.tabla-para { color: rgba(28, 45, 34, 0.65); }
.capacidades-cards { padding-bottom: 88px; }
.datos-tres { grid-template-columns: repeat(3, 1fr); }

.proceso { background: var(--verde-suave); padding: 72px 56px; }
.proceso .wrap { display: flex; flex-direction: column; gap: 28px; }
.proceso h2 { margin: 0; font-size: 42px; font-weight: 800; letter-spacing: -0.03em; }
.pasos-num {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: paso;
}
.pasos-num li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(28, 45, 34, 0.72);
}
.pasos-num strong { display: block; color: var(--tinta); }
.paso-n {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--crema);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
}

.contacto { padding: 88px 56px; }
.contacto-inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: start;
}
.contacto-copy { display: flex; flex-direction: column; gap: 18px; }
.contacto-copy h2 { margin: 0; font-size: 42px; font-weight: 800; letter-spacing: -0.03em; }
.contacto-copy p { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(28, 45, 34, 0.72); }
.contacto-copy a { font-weight: 700; text-decoration: underline; }
.contacto-nota { font-size: 15px; }
.contacto-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: var(--carta);
  border: 1px solid rgba(28, 45, 34, 0.1);
  border-radius: 24px;
  padding: 28px;
}
.campo { display: flex; flex-direction: column; gap: 7px; font-size: 14px; font-weight: 700; }
.campo b { color: var(--verde-hondo-medio); }
.campo-ancho { grid-column: 1 / -1; }
.campo input,
.campo select,
.campo textarea {
  font: inherit;
  font-weight: 500;
  font-size: 15px;
  color: var(--tinta);
  background: #FFF;
  border: 1.5px solid rgba(28, 45, 34, 0.45);
  border-radius: 14px;
  padding: 12px 14px;
  resize: vertical;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus { outline: 2px solid var(--verde-hondo-medio); outline-offset: 1px; }
/* Un campo con error lo dice él mismo, con el motivo debajo: no solo arriba. */
.campo [aria-invalid="true"],
.campo input:user-invalid { border-color: #B3261E; }
.campo-error { font-size: 13.5px; font-weight: 600; color: #9A2A1E; }
.campo-ejemplo { font-weight: 500; color: rgba(28, 45, 34, 0.72); }
.cesta-aviso a { color: inherit; text-decoration: underline; }
.contacto-form .btn-hero-primary { grid-column: 1 / -1; justify-self: start; border: 0; cursor: pointer; }
.contacto-legal { grid-column: 1 / -1; font-size: 13px; color: rgba(28, 45, 34, 0.55); }
.contacto-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contacto-ok,
.contacto-errores {
  grid-column: 1 / -1;
  margin: 0;
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 14.5px;
  font-weight: 700;
}
.contacto-ok { background: var(--acc); color: var(--tinta); }
.contacto-errores { background: #F6DED9; color: #7A2E24; }
.contacto-errores p { margin: 0 0 4px; }
.contacto-errores p:last-child { margin-bottom: 0; }

/* ============================================================
   Cesta
   ============================================================ */
.cesta-pag { padding: 56px 56px 88px; }
.cesta-pag h1 { margin: 0 0 28px; font-size: 52px; font-weight: 800; letter-spacing: -0.03em; }
.cesta-vacia { font-size: 18px; color: rgba(28, 45, 34, 0.7); }
.cesta-vacia a { font-weight: 700; text-decoration: underline; }
.cesta-aviso {
  margin: 0 0 20px;
  background: #F6DED9;
  color: #7A2E24;
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 14.5px;
  font-weight: 700;
}
.cesta-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; }
.cesta-lineas { display: flex; flex-direction: column; gap: 14px; }
.cesta-linea {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 20px;
  align-items: start;
  background: var(--carta);
  border: 1px solid rgba(28, 45, 34, 0.1);
  border-radius: 24px;
  padding: 20px;
}
.cesta-foto {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background: #FFF;
  overflow: hidden;
}
.cesta-foto img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 80%;
  max-height: 84%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.cesta-datos { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cesta-nombre { font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.cesta-combi { font-size: 14.5px; font-weight: 600; }
.cesta-envase { font-size: 13.5px; color: rgba(28, 45, 34, 0.72); }
.cesta-ref { font-size: 12.5px; font-variant-numeric: tabular-nums; color: rgba(28, 45, 34, 0.72); }
.cesta-entrega { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.cesta-radio { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; cursor: pointer; }
.cesta-radio input { accent-color: var(--acc); width: 17px; height: 17px; }
.cesta-cada { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: rgba(28, 45, 34, 0.7); }
.cesta-cada.is-off { opacity: 0.4; }
.cesta-cada select {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta);
  background: #FFF;
  border: 1.5px solid rgba(28, 45, 34, 0.2);
  border-radius: 999px;
  padding: 7px 12px;
}
.cesta-acciones { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.cesta-cantidad {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(28, 45, 34, 0.06);
  border-radius: 999px;
  padding: 4px;
}
.cesta-cantidad button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta);
  font-size: 17px;
  cursor: pointer;
}
.cesta-cantidad button:hover { background: rgba(28, 45, 34, 0.1); }
.cesta-cantidad input {
  width: 44px;
  border: 0;
  background: transparent;
  text-align: center;
  font: inherit;
  font-weight: 700;
  color: var(--tinta);
}
.cesta-subtotal { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.cesta-quitar {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(28, 45, 34, 0.72);
  text-decoration: underline;
  cursor: pointer;
}
.cesta-quitar:hover { color: var(--tinta); }
.cesta-mini {
  border: 1.5px solid var(--tinta);
  background: transparent;
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.cesta-vaciar { display: flex; justify-content: flex-end; }
.cesta-total { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 14px; }
.cesta-total .resumen-linea { font-size: 15px; color: rgba(244, 239, 224, 0.8); }
.cesta-total .btn-prueba { border: 0; cursor: pointer; }
/* El de tarjeta va dentro de un <form>: sin esto se quedaba al ancho de su
   rótulo, más estrecho que «Pagar por transferencia bancaria», que es un enlace
   y ocupa la columna entera. */
.cesta-total form > .btn-prueba { width: 100%; justify-content: center; }
.cesta-total .btn-prueba:disabled { opacity: 0.45; cursor: not-allowed; }
.cesta-total .cesta-aviso { margin: 0; }
.resumen-nota-fuerte {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(244, 239, 224, 0.85);
}
/* Lo recurrente en el resumen: qué pasa después de pagar, en tres líneas. */
.cesta-recurrencia {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1.5px solid var(--acc);
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(53, 181, 119, 0.08);
}
.cesta-recurrencia .resumen-nota-fuerte { color: var(--crema); font-weight: 700; }
/* Lo que importa de lo recurrente es cuánto y cada cuándo: eso, destacado; la
   explicación, en voz normal. */
.cesta-recurrencia .resumen-nota { text-align: left; font-size: 14px; line-height: 1.5; color: rgba(244, 239, 224, 0.85); }
.cesta-recurrencia .cesta-siguiente { font-size: 15.5px; }
.cesta-mini[hidden], [data-copiar][hidden] { display: none; }
.cesta-recurrencia-lista {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(244, 239, 224, 0.8);
}
.cesta-recurrencia-lista li::marker { color: var(--acc); }
.cesta-recurrencia-lista strong { color: var(--crema); }
/* Todo puntual: la propuesta de pasarlo a recurrente. */
.cesta-pasar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1.5px dashed rgba(53, 181, 119, 0.7);
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(244, 239, 224, 0.8);
}
.cesta-pasar p { margin: 0; }
.cesta-pasar .cesta-pasar-titulo { font-size: 15px; font-weight: 800; color: var(--crema); }
.cesta-pasar-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.cesta-pasar-fila label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.cesta-pasar-fila select {
  font: inherit;
  font-weight: 700;
  color: var(--tinta);
  background: var(--crema);
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
}
.cesta-pasar-fila .btn-compra-puntual { padding: 9px 16px; font-size: 14px; border-color: var(--acc); }
.cesta-aviso p { margin: 0; }
.cesta-igualar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cesta-igualar button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  color: #7A2E24;
  background: #fff;
  border: 1.5px solid #7A2E24;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}
.cesta-igualar button:hover { background: #7A2E24; color: #fff; }
/* El atajo al mínimo: el mismo botón que «Todo cada N semanas». */
.cesta-atajo { margin: 10px 0 4px; }
.cesta-atajo button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  color: #7A2E24;
  background: #fff;
  border: 1.5px solid #7A2E24;
  border-radius: 999px;
  padding: 9px 14px;
  min-height: 44px;
  cursor: pointer;
  text-align: left;
}
.cesta-atajo button:hover { background: #7A2E24; color: #fff; }
.cesta-seguir { font-size: 15px; font-weight: 700; color: rgba(28, 45, 34, 0.75); }
.cesta-seguir:hover { color: var(--tinta); }
.gracias { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; max-width: 720px; }
.gracias h1 { margin: 0; }
.gracias-lead { margin: 0; font-size: 18px; line-height: 1.55; color: rgba(28, 45, 34, 0.72); }
.gracias-lead a { font-weight: 700; text-decoration: underline; }

/* ============================================================
   Cuenta y «Pedidos recurrentes»
   ============================================================ */
.cuenta-lead {
  margin: -8px 0 28px;
  max-width: 720px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(28, 45, 34, 0.72);
}
.cuenta-lead a { font-weight: 700; text-decoration: underline; }
.cuenta-ok {
  margin: 0 0 20px;
  background: var(--menta);
  color: #1B4D33;
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 14.5px;
  font-weight: 700;
}
.cuenta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.cuenta-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--carta);
  border: 1px solid rgba(28, 45, 34, 0.1);
  border-radius: 24px;
  padding: 28px;
}
.cuenta-form h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.cuenta-form .btn-hero-primary { align-self: flex-start; border: 0; cursor: pointer; }
.cuenta-form .campo input:disabled { background: rgba(28, 45, 34, 0.05); color: rgba(28, 45, 34, 0.55); }
.campos-dir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.cuenta-nota { font-size: 13px; line-height: 1.5; color: rgba(28, 45, 34, 0.72); }
.cuenta-nota a { font-weight: 700; text-decoration: underline; }
.cuenta-salir { margin-top: 28px; }

.pedidos-titulo { margin: 48px 0 18px; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.pedidos-titulo:first-of-type { margin-top: 8px; }
.repo-lista, .pedidos-lista { display: flex; flex-direction: column; gap: 14px; }
.repo-item, .pedido {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  background: var(--carta);
  border: 1px solid rgba(28, 45, 34, 0.1);
  border-radius: 24px;
  padding: 24px 28px;
}
.repo-item-cab, .pedido-cab {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}
.repo-cada, .pedido-ref { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.repo-estado {
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 700;
}
.repo-estado.es-viva { background: var(--menta); color: #1B4D33; }
.repo-estado.es-quieta { background: rgba(28, 45, 34, 0.08); color: rgba(28, 45, 34, 0.7); }
.repo-estado.es-mala { background: #F6DED9; color: #7A2E24; }
.pedido-fecha { font-size: 14px; color: rgba(28, 45, 34, 0.72); }
.pedido-total { margin-left: auto; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.repo-lineas, .pedido-lineas {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.repo-lineas li, .pedido-lineas li { display: flex; flex-direction: column; gap: 2px; }
.repo-linea-nombre, .pedido-linea-nombre { font-size: 15.5px; font-weight: 700; }
.repo-linea-detalle, .pedido-linea-detalle { font-size: 13.5px; color: rgba(28, 45, 34, 0.72); }
.repo-fecha { font-size: 14px; color: rgba(28, 45, 34, 0.7); }
.repo-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
/* Qué hace cada botón, dicho una vez: con la misma letra que la fecha. */
.repo-ayuda {
  margin: 0 0 24px;
  max-width: 720px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(28, 45, 34, 0.7);
}
.repo-item .repo-ayuda { margin: 0; }
.repo-como { max-width: 720px; margin-bottom: 24px; }
.repo-como .repo-ayuda { margin-bottom: 10px; }
/* La acción que llega preparada desde el botón del correo, a un clic. */
.repo-confirma {
  border: 2px solid var(--acc);
  background: var(--menta);
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.repo-confirma p { margin: 0; font-size: 15px; line-height: 1.5; color: #1B4D33; }
.repo-confirma .repo-confirma-titulo { font-size: 19px; font-weight: 800; color: var(--tinta); }
.repo-confirma-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 10px; }
.repo-confirma-botones button { cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 700; }
/* «Repetir cada [4 semanas ▾] Cambiar», todo en una pieza: el botón es la
   confirmación de lo elegido en el desplegable, y se enciende al cambiarlo. */
.repo-cambiar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 16px;
  border: 1.5px solid var(--tinta);
  border-radius: 999px;
  background: #FFF;
}
.repo-cambiar label { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.repo-cambiar select {
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  color: var(--tinta);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 6px 4px;
  cursor: pointer;
}
.repo-cambiar select:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.repo-cambiar button {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  background: var(--tinta);
  color: var(--crema);
  cursor: pointer;
}
.repo-cambiar button:disabled { background: rgba(28, 45, 34, 0.12); color: rgba(28, 45, 34, 0.45); cursor: default; }
.repo-cambiar.is-destacado { box-shadow: 0 0 0 4px rgba(53, 181, 119, 0.35); }
.repo-acciones .btn-outline { border: 1.5px solid var(--tinta); background: none; cursor: pointer; font-family: inherit; }
.repo-item .cesta-quitar, .repo-portal .cesta-seguir { cursor: pointer; }
.pedido .btn-outline { border: 1.5px solid var(--tinta); background: none; cursor: pointer; font-family: inherit; }
.repo-portal { margin-top: 16px; }
.repo-portal .cesta-seguir {
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: rgba(28, 45, 34, 0.65);
  padding: 0;
}
.repo-portal .cesta-seguir:hover { color: var(--tinta); }

/* ============================================================
   Responsive
   ============================================================ */
/* Portátil: el menú entero en una fila. Un 1280 con barra de scroll se queda
   en 1263 px útiles, y ahí los rótulos se partían en dos líneas. */
@media (min-width: 1101px) and (max-width: 1340px) {
  .site-header { padding: 18px 32px; gap: 20px; }
  .main-nav { gap: 22px; font-size: 14.5px; }
  .header-actions { gap: 8px; }
  .header-actions .btn-plano { padding: 8px 4px; }
}
@media (min-width: 1101px) and (max-width: 1200px) {
  .site-header { padding-left: 24px; padding-right: 24px; }
  .main-nav { gap: 18px; font-size: 14px; }
  /* Con «Pedidos recurrentes» la fila no cabe: «Cuenta» se queda en su icono,
     con el rótulo fuera de la vista para el lector de pantalla. */
  .header-actions .btn-plano span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 1100px) {
  .topbar { flex-wrap: wrap; gap: 10px 20px; text-align: center; }
  .site-header { padding: 16px 28px; flex-wrap: wrap; gap: 14px; }
  /* Los cuatro rótulos no caben en una pantalla estrecha y partirlos en dos
     filas empujaba media página hacia abajo. Una sola fila que se arrastra. */
  .main-nav {
    order: 3;
    flex-wrap: nowrap;
    gap: 24px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Los 28px del acolchado lateral de la cabecera, desbordados a los dos
       lados: la fila arranca pegada al borde y el último rótulo se ve cortado
       ahí mismo. Con width:100% se quedaba corta por los dos extremos y el
       arrastre acababa antes de llegar al borde de la pantalla. */
    width: calc(100% + 56px);
    margin: 0 -28px;
    padding: 0 28px 3px;
  }
  /* Centrada mientras quepa; en cuanto no cabe, «safe» impide que el centrado
     deje el primer enlace fuera de alcance. Donde no se entienda, el navegador
     tira la línea entera y quedan a la izquierda, que también sirve. */
  .main-nav { justify-content: safe center; }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav > a { flex: none; white-space: nowrap; }
  /* Una columna: el texto arriba, así que el oscuro va arriba */
  .hero {
    padding: 64px 28px 72px;
    background:
      radial-gradient(ellipse 80% 40% at 50% 82%, rgba(58, 96, 72, 0.42), transparent 70%),
      linear-gradient(170deg, var(--verde-noche) 0%, var(--verde-noche-medio) 50%, var(--verde-noche-claro) 100%);
  }
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero-foto { max-width: 560px; width: 100%; margin: 0 auto; }
  .hero h1 { font-size: 42px; }
  .selector, .catalogo, .filosofia, .reponer { padding-left: 28px; padding-right: 28px; }
  .selector { padding-top: 72px; padding-bottom: 72px; }
  .selector h2, .catalogo h2, .reponer h2 { font-size: 42px; }
  .usos { grid-template-columns: 1fr 1fr; }
  .uso-card { min-height: 0; }
  .catalogo { padding-top: 72px; padding-bottom: 72px; scroll-margin-top: 152px; }
  .catalogo-head { flex-wrap: wrap; }
  /* A dos columnas, la cilíndrica se quedaría sola antes del cajón: la de
     punta sube a hacerle compañía. */
  .productos { grid-template-columns: 1fr 1fr; grid-auto-flow: dense; }
  .mensajes-inner { grid-template-columns: 1fr; gap: 0; padding: 0 28px; }
  .mensajes-copy { padding: 64px 0 32px; }
  .mensajes-foto { max-height: 420px; object-position: center; }
  .mensaje { font-size: 38px; }
  .filosofia { grid-template-columns: 1fr; gap: 40px; padding-top: 72px; padding-bottom: 72px; }
  .oferta { grid-template-columns: 1fr; padding: 0 28px 72px; }
  .oferta-card { min-height: 0; }
  .reponer-head { flex-wrap: wrap; }
  .preguntas { padding: 72px 28px; }
  .preguntas .wrap { grid-template-columns: 1fr; gap: 24px; }
  .preguntas h2 { font-size: 42px; }
  .site-footer { padding: 56px 28px 32px; }
  .footer-main { flex-direction: column; }
  .footer-cols { flex-wrap: wrap; gap: 32px 48px; }
  .footer-legal { flex-direction: column; gap: 12px; }
  .intro { padding: 56px 28px 32px; }
  .intro-grid { grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: 32px; }
  .capacidades, .proceso, .contacto { padding-left: 28px; padding-right: 28px; }
  .capacidades h2, .proceso h2, .contacto-copy h2 { font-size: 34px; }
  .datos-tres { grid-template-columns: 1fr 1fr; }
  .pasos-num { grid-template-columns: 1fr 1fr; }
  .contacto-inner { grid-template-columns: 1fr; gap: 32px; }
  .cesta-pag { padding: 40px 28px 64px; }
  .cesta-pag h1 { font-size: 40px; }
  .cesta-grid { grid-template-columns: 1fr; gap: 32px; }
  .cesta-total { position: static; }
  .cuenta-grid { grid-template-columns: minmax(0, 1fr); }
  /* Tres botones no caben con su rótulo: se quedan en el icono. El texto sigue
     ahí, fuera de la vista, que es el nombre que lee un lector de pantalla. */
  .header-actions .btn-plano span,
  .header-actions .btn-outline span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .header-actions .btn-plano { padding: 8px 4px; }
  /* Solo el icono: un círculo de la misma altura que la cesta. */
  .header-actions .btn-outline { width: 36px; padding: 0; justify-content: center; }
  .intro h1 { font-size: 36.4px; }
  .especiales { padding: 48px 28px; }
  .especiales .wrap { flex-direction: column; align-items: flex-start; }
  .site-footer-mini { flex-direction: column; gap: 16px; padding: 28px; text-align: center; }
}

@media (max-width: 640px) {
  .catalogo-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .producto-grupo { padding: 20px 12px 12px; gap: 16px; border-radius: 26px; }
  .producto-grupo-cab { align-items: flex-start; flex-direction: column; }
  .producto-grupo-nombre { font-size: 28px; }
  .producto-grupo-opciones { gap: 12px; }
  .uso-cajon { padding: 18px 14px 14px; }
  .uso-cajon-cab { align-items: flex-start; }
  .uso-cajon-lista { grid-template-columns: 1fr; }
  .hero h1 { font-size: 29px; }
  .hero { padding-left: 20px; padding-right: 20px; }
  .hero-copy { gap: 22px; }
  .hero-eyebrow { font-size: 11px; }
  .hero-foto { border-radius: 22px; }
  .datos-tres { grid-template-columns: 1fr; }
  .pasos-num { grid-template-columns: 1fr; }
  .contacto-form { grid-template-columns: 1fr; padding: 22px; }
  .cesta-linea { grid-template-columns: 64px 1fr; }
  .cesta-acciones { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .cesta-pag h1 { font-size: 32px; }
  .selector h2, .catalogo h2, .reponer h2 { font-size: 32px; }
  .filosofia h2 { font-size: 32px; }
  .mensaje { font-size: 28px; }
  .productos { grid-template-columns: 1fr; }
  .usos { grid-template-columns: 1fr; }
  .preguntas h2 { font-size: 32px; }
  .faq-item summary { font-size: 17px; }
  .datos { grid-template-columns: 1fr; }
  .hero-ctas { flex-direction: column; align-items: stretch; text-align: center; }
  .intro-grid { grid-template-columns: 1fr; }
  .intro h1 { font-size: 28px; }
  /* Logo, cuenta, recurrentes y cesta en una sola fila; el menú, debajo. Para
     que quepan: logo un poco menor, la cuenta y la cesta en su icono (la cesta
     con el número), y «Recurrentes» con rótulo donde hay sitio (abajo). */
  .site-header { padding-left: 20px; padding-right: 20px; column-gap: 6px; row-gap: 12px; }
  .main-nav { width: calc(100% + 40px); margin: 0 -20px; padding: 0 20px 3px; }
  .site-header .logo { font-size: 20px; }
  .header-actions { gap: 4px; }
  .header-actions .btn-solid { padding: 0 10px; }
  .header-actions .cesta-palabra {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .header-actions .cesta-par { display: none; }
}
/* «Recurrentes» se lee en cuanto cabe, porque es a donde mandan la ficha, la
   cesta y los correos; en los móviles más estrechos se queda en su icono. */
@media (min-width: 370px) and (max-width: 640px) {
  .header-actions .btn-outline { width: auto; padding: 0 10px; font-size: 12.5px; }
  .header-actions .btn-outline.btn-icono { gap: 5px; }
  .header-actions .btn-outline .rotulo-movil { display: inline; }
}

/* Con el dedo, todo lo que se pulsa mide al menos 44 px; los campos, a 16 px
   para que el iPhone no amplíe la página al tocarlos. */
@media (pointer: coarse) {
  .cesta-radio { min-height: 44px; }
  .cesta-radio input { width: 20px; height: 20px; }
  .cesta-quitar { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
  .cesta-cantidad button, .cantidad-control button { width: 44px; height: 44px; }
  .cesta-cantidad input, .cantidad-control input { min-height: 44px; }
  .cesta-cada select, #semanas { min-height: 44px; }
  .ver-escala { min-height: 44px; }
  .ciclo-detalles summary { min-height: 44px; }
  .header-actions .btn-plano { min-width: 44px; min-height: 44px; justify-content: center; }
  .header-actions .btn-outline, .header-actions .btn-solid { height: 44px; }
  .header-actions .btn-outline { min-width: 44px; }
}
@media (max-width: 1100px) {
  .campo input, .campo select, .campo textarea { font-size: 16px; }
  html { scroll-padding-top: 160px; }
}

/* ============================================================
   Página de categoría
   ============================================================ */
.cat-head { padding: 56px 56px 40px; }
.cat-head-inner {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 64px;
  align-items: center;
}
.cat-copy { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.volver { font-size: 14.5px; font-weight: 700; color: rgba(28, 45, 34, 0.72); }
.volver:hover { color: var(--tinta); }
.cat-head h1 {
  margin: 0;
  font-size: 62px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  text-wrap: balance;
}
.cat-titular {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--tinta);
  letter-spacing: -0.02em;
}
.cat-intro {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  max-width: 560px;
  color: rgba(28, 45, 34, 0.72);
  text-wrap: pretty;
}
.cat-usos {
  background: var(--verde-claro);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 700;
}
.cat-preview { display: flex; }
.preview-lienzo {
  flex: 1;
  aspect-ratio: 4 / 3.4;
  border-radius: 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #FFF;
}
.preview-muestra {
  width: 42%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  box-shadow: 0 18px 44px rgba(28, 45, 34, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  transition: background .18s ease;
}

/* ============================================================
   Fotos de producto
   Vienen recortadas sobre transparente, así que el producto flota sobre el
   lienzo kraft; las pocas que no se pudieron recortar traen su fondo blanco y
   la misma sombra las convierte en una ficha de estudio.
   ============================================================ */
.preview-foto,
.producto-foto img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 76%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 26px rgba(28, 45, 34, 0.24));
}
.producto-foto img { max-width: 72%; max-height: 78%; }
/* Más de una foto para la combinación: miniaturas al pie del lienzo. Si no
   caben (el móvil, una combinación con muchas fotos), se desplazan de lado. */
.preview-galeria {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  pointer-events: none;
}
.preview-galeria::-webkit-scrollbar { display: none; }
.preview-galeria > * { pointer-events: auto; flex: none; }
/* Fotos de ambiente: la bolsa en uso, con su fondo. No flotan como los
   recortes: van enmarcadas en el hueco que dejan las miniaturas. */
.preview-foto.es-ambiente {
  inset: 14px 14px 80px;
  max-width: calc(100% - 28px);
  max-height: calc(100% - 94px);
  border-radius: 14px;
  filter: none;
  box-shadow: 0 10px 26px rgba(28, 45, 34, 0.16);
}
.galeria-ambiente { padding: 0; overflow: hidden; }
.galeria-ambiente img { object-fit: cover; }
.preview-galeria[hidden] { display: none; }
.galeria-mini {
  width: 56px;
  height: 56px;
  padding: 4px;
  border: 1.5px solid rgba(28, 45, 34, 0.18);
  border-radius: 12px;
  background: #FFF;
  cursor: pointer;
}
.galeria-mini:hover { border-color: var(--tinta); }
.galeria-mini.is-active { border-color: var(--tinta); box-shadow: 0 0 0 1.5px var(--tinta); }
.galeria-mini img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Medidas a escala: el dibujo ocupa el lienzo menos la franja de miniaturas. */
.preview-medidas { position: absolute; inset: 14px 14px 80px; display: flex; }
.preview-medidas[hidden] { display: none; }
.preview-medidas svg { width: 100%; height: 100%; display: block; }
.galeria-medidas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font: 700 10px/1.1 var(--font-text);
  color: var(--tinta);
}
.galeria-medidas svg { width: 24px; height: 24px; }
.galeria-muestra { display: block; width: 100%; height: 100%; border-radius: 50%; }
/* Misma geometría que .cat-head: así los pasos arrancan donde arranca el
   nombre del producto, y el cajón de la cesta mide lo mismo que la foto. */
.cat-config { padding: 16px 56px 88px; scroll-margin-top: 96px; }

/* Tabla de precios de la ficha: está en el HTML para quien no ejecuta
   JavaScript (buscadores, asistentes) y plegada para quien sí. */
.cat-precios { padding: 0 56px 72px; }
.cat-precios h2,
.otras-familias h2 { margin: 0 0 10px; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.precios-nota { margin: 0 0 18px; font-size: 15px; color: rgba(28, 45, 34, 0.75); }
.precios-detalle { background: var(--carta); border: 1px solid rgba(28, 45, 34, 0.12); border-radius: 18px; }
.precios-detalle summary {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 700;
  font-size: 15px;
}
.precios-detalle[open] summary { border-bottom: 1px solid rgba(28, 45, 34, 0.1); }
.precios-scroll { overflow-x: auto; padding: 4px 8px 12px; }
.precios-scroll table { width: 100%; border-collapse: collapse; font-size: 14px; }
.precios-scroll th,
.precios-scroll td { text-align: left; padding: 9px 12px; border-bottom: 1px solid rgba(28, 45, 34, 0.08); white-space: nowrap; }
.precios-scroll th { font-size: 12.5px; font-weight: 700; color: rgba(28, 45, 34, 0.6); }
.precios-scroll .num { text-align: right; font-variant-numeric: tabular-nums; }
.precios-scroll tbody tr:hover { background: rgba(53, 181, 119, 0.08); }
.precios-uso { color: rgba(28, 45, 34, 0.55); font-size: 13px; }
.precios-scroll .ref { font-size: 12.5px; font-variant-numeric: tabular-nums; color: rgba(28, 45, 34, 0.6); }
.precios-scroll a { font-weight: 700; text-decoration: underline; }

/* Enlaces a las demás familias, al pie de cada ficha. */
.otras-familias { padding: 0 56px 72px; }
.otras-familias ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.otras-familias li { display: flex; }
/* Cada bloque entero es el enlace, con el dibujo de la bolsa a la izquierda. */
.otras-familias li a {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px 14px 14px;
  border: 1px solid rgba(28, 45, 34, 0.12);
  border-radius: 16px;
  background: var(--carta);
  color: var(--tinta);
}
.otras-familias li a:hover { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); color: var(--tinta); }
.otra-icono { flex: none; width: 56px; height: 56px; color: var(--tinta); }
.otra-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.otra-texto strong { font-family: var(--font-display); font-size: 16.5px; font-weight: 800; line-height: 1.2; }
.otra-texto span { font-size: 13px; color: rgba(28, 45, 34, 0.72); }
.cat-config-inner {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 64px;
  align-items: start;
}
/* Los tres pasos de la ficha, uno debajo de otro y cada rótulo separado de sus
   opciones: sin este aire los títulos se pegan a los bloques de arriba y abajo. */
.config-pasos { display: flex; flex-direction: column; gap: 36px; }
.paso { display: flex; flex-direction: column; gap: 16px; }
.paso-titulo { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.paso-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ver-escala {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  font: 700 14px/1.2 var(--font-text);
  color: var(--verde-hondo);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ver-escala svg { width: 18px; height: 18px; align-self: center; }
.ver-escala[hidden] { display: none; }
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcion {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 16px 46px 16px 18px;
  border: 1.5px solid rgba(28, 45, 34, 0.2);
  border-radius: 18px;
  background: var(--carta);
  color: var(--tinta);
  cursor: pointer;
}
.opcion:hover { border-color: var(--tinta); }
.opcion.is-active { border-color: var(--tinta); background: var(--tinta); color: var(--crema); }
.opcion.is-active::after { position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; }
.opcion-n { font-family: var(--font-display); font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; }
.opcion-d { font-size: 13.5px; line-height: 1.4; opacity: 0.7; }
.opcion-sup { font-size: 12.5px; font-weight: 700; opacity: 0.72; margin-top: 4px; }
.opcion-tamano .opcion-n { font-size: 19px; }
/* Combinaciones que no se fabrican o están agotadas: se ven, no se pulsan. */
.opcion.no-hay,
.color-btn.no-hay {
  opacity: 0.4;
  border-style: dashed;
  cursor: not-allowed;
}
.opcion.no-hay:hover,
.color-btn.no-hay:hover { border-color: rgba(28, 45, 34, 0.2); }

.colores { display: flex; flex-wrap: wrap; gap: 10px; }
.color-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 8px;
  border: 1.5px solid rgba(28, 45, 34, 0.2);
  border-radius: 999px;
  background: var(--carta);
  color: var(--tinta);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.color-btn:hover { border-color: var(--tinta); }
.color-btn.is-active { border-color: var(--tinta); background: var(--tinta); color: var(--crema); }
.color-btn.is-active::after { width: 15px; height: 15px; }
.color-btn .muestra {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(28, 45, 34, 0.15);
  flex: none;
}

.cantidad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid rgba(244, 239, 224, 0.2);
  padding-top: 16px;
}
.cantidad-label { font-size: 14px; font-weight: 600; color: rgba(244, 239, 224, 0.75); }
.cantidad-control {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(244, 239, 224, 0.12);
  border-radius: 999px;
  padding: 4px;
}
.cantidad-control button {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--crema);
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.cantidad-control button:hover { background: rgba(244, 239, 224, 0.2); }
.cantidad-control input {
  width: 46px;
  border: none;
  background: transparent;
  color: var(--crema);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.cantidad-control input::-webkit-outer-spin-button,
.cantidad-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Sin caja ni borde: texto claro sobre el panel oscuro, con la marca verde
   delante cuando ha ido bien. */
.aviso-cesta {
  margin: 0;
  background: none;
  border: 0;
  padding: 2px 0;
  color: var(--crema);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}
.aviso-cesta:not(.es-error)::before { content: "✓ "; color: var(--acc); font-weight: 800; }
/* La JS conmuta esta clase cuando el servidor rechaza el alta. */
.aviso-cesta.es-error { color: #FFB4A6; }
.resumen .aviso-cesta a { color: inherit; white-space: nowrap; }
.cat-config .resumen-linea { font-size: 15px; color: rgba(244, 239, 224, 0.75); }

/* Comprar en la ficha: dos caminos con su rótulo, uno debajo de otro. Primero
   el puntual, a pelo; luego el recurrente, en su recuadro verde con la
   frecuencia a la vista. Lo demás —stock, mínimo, transporte— en letra pequeña
   encima, y lo recurrente se explica en una línea y en «¿Cómo funciona?». */
.cat-config .resumen-detalles { margin: 0; gap: 3px; font-size: 13px; line-height: 1.4; }
.resumen-stock { color: var(--crema); font-weight: 600; }
.compra-opciones { display: flex; flex-direction: column; gap: 12px; }
.compra-opcion { display: flex; flex-direction: column; gap: 10px; }
.compra-puntual { padding: 2px 0 0; }
.compra-puntual .compra-etiqueta { color: rgba(244, 239, 224, 0.72); }
.compra-puntual .btn-prueba { justify-content: center; }
.compra-recurrente {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1.5px solid var(--acc);
  border-radius: 18px;
  padding: 14px 16px 16px;
  background: rgba(53, 181, 119, 0.08);
}
.compra-recurrente-cab {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 12px;
}
.compra-etiqueta {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acc);
}
.compra-cada {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}
.compra-cada select {
  font: inherit;
  font-weight: 700;
  color: var(--tinta);
  background: var(--crema);
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}
.compra-recurrente .btn-prueba { justify-content: center; }
.compra-nota {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: rgba(244, 239, 224, 0.8);
}
.compra-nota strong { color: var(--crema); }
.compra-aviso-frecuencia {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  color: #F2C46D;
}
.btn-compra-puntual {
  background: transparent;
  color: var(--crema);
  border: 1.5px solid rgba(244, 239, 224, 0.4);
  padding: 13px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.btn-compra-puntual:hover { border-color: var(--crema); }
.btn-compra-puntual:disabled { opacity: 0.45; cursor: not-allowed; border-color: rgba(244, 239, 224, 0.4); }
/* Los dos botones de la ficha, del mismo verde: lo que los distingue es el
   recuadro de la reposición, no el color. */
.resumen > .btn-prueba.btn-icono,
.compra-recurrente .btn-prueba { justify-content: center; }
.btn-prueba.is-off { opacity: 0.45; pointer-events: none; }
a.btn-prueba { display: inline-flex; align-items: center; text-decoration: none; }
.resumen a.btn-prueba { color: var(--tinta); text-decoration: none; }

/* ============================================================
   Cómo funciona lo recurrente: la animación (assets/js/ciclo.js)
   ============================================================ */
/* «¿Cómo funciona?» / «Ver un ejemplo»: una pastilla mostaza, que se lee igual
   sobre el verde oscuro de la ficha y la cesta que sobre el blanco de las
   tarjetas. Dentro, los acentos de la animación van en el mismo amarillo. */
.ciclo-detalles { --ciclo-acc: var(--mostaza); }
.ciclo-detalles summary {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--tinta);
  background: var(--mostaza);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ciclo-detalles summary:hover { background: #F2C46D; }
.ciclo-detalles summary::-webkit-details-marker { display: none; }
.ciclo-detalles summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s;
}
.ciclo-detalles[open] summary::before { transform: rotate(45deg) translate(-1px, -1px); }
.ciclo-detalles[open] summary { margin-bottom: 12px; }
.ciclo { display: flex; flex-direction: column; gap: 10px; }
.ciclo-pestanas { display: flex; flex-wrap: wrap; gap: 6px; }
.ciclo-pestanas button {
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: inherit;
  background: none;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 5px 11px;
  opacity: 0.65;
  cursor: pointer;
}
.ciclo-pestanas button:hover { opacity: 1; }
.ciclo-pestanas button[aria-selected="true"] { opacity: 1; background: var(--ciclo-acc, var(--acc)); border-color: var(--ciclo-acc, var(--acc)); color: var(--tinta); }
.ciclo-pista { position: relative; height: 112px; }
.ciclo-eje { position: absolute; left: 0; right: 0; top: 62px; height: 2px; background: currentColor; opacity: 0.22; }
.ciclo-pieza {
  position: absolute;
  top: 44px;
  width: 34px;
  margin-left: -17px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: left .8s cubic-bezier(.3, .7, .2, 1), opacity .5s, transform .5s;
}
.ciclo-caja svg { width: 34px; height: 34px; display: block; }
.ciclo-caja.es-pasada { opacity: 0.45; }
.ciclo-etq { position: absolute; top: -17px; font-size: 11px; font-weight: 700; white-space: nowrap; opacity: 0.8; }
.ciclo-caja .ciclo-cruz,
.ciclo-caja .ciclo-ok { position: absolute; opacity: 0; transform: scale(.4); transition: opacity .4s, transform .4s; }
.ciclo-caja .ciclo-cruz { inset: 0; width: 34px; height: 34px; }
.ciclo-caja .ciclo-ok { right: -8px; top: -6px; width: 18px; height: 18px; }
.ciclo-caja.es-saltada > svg:first-child { opacity: 0.3; }
.ciclo-caja.es-saltada .ciclo-cruz,
.ciclo-caja.es-ok .ciclo-ok { opacity: 1; transform: none; }
.ciclo-caja.es-pausa { opacity: 0.25; filter: grayscale(1); }
.ciclo-extra { opacity: 0; transform: translateY(-26px); }
.ciclo-extra.es-visible { opacity: 1; transform: none; }
.ciclo-aviso { top: 4px; opacity: 0; transform: translateY(-8px) scale(.8); }
.ciclo-aviso svg { width: 28px; height: 20px; display: block; }
.ciclo-aviso .ciclo-etq { top: auto; bottom: -15px; }
.ciclo-aviso.es-visible { opacity: 1; transform: none; }
.ciclo-tramo {
  position: absolute;
  top: 82px;
  height: 7px;
  border: 1.5px solid currentColor;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  opacity: 0.35;
  transition: left .8s cubic-bezier(.3, .7, .2, 1), opacity .4s, color .4s;
}
.ciclo-tramo span {
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.ciclo-tramo.es-destacado { opacity: 1; color: var(--ciclo-acc, var(--acc)); }
/* El mostaza como texto sobre blanco no se lee: ahí, un ámbar más oscuro. */
.ciclo-detalles .ciclo-claro .ciclo-tramo.es-destacado { color: #8F6110; }
.ciclo-tramo.es-oculto { opacity: 0; }
.ciclo-pausa {
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%) scale(.8);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 3px 6px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  font-size: 11.5px;
  font-weight: 800;
  opacity: 0;
  transition: opacity .4s, transform .4s;
}
.ciclo-pausa svg { width: 16px; height: 16px; }
.ciclo.en-pausa .ciclo-pausa { opacity: 1; transform: translateX(-50%); }
.ciclo-texto { margin: 0; font-size: 13.5px; line-height: 1.5; min-height: 4.5em; }
.ciclo.es-quieto .ciclo-pieza,
.ciclo.es-quieto .ciclo-tramo,
.ciclo.es-quieto .ciclo-pausa,
.ciclo.es-quieto .ciclo-caja svg { transition: none; }
/* Sobre fondo claro (portada, «Pedidos recurrentes», enlace del correo) */
.ciclo-claro { color: var(--tinta); }
.ciclo-claro .ciclo-texto { color: rgba(28, 45, 34, 0.75); }

/* El aviso de la cuenta cuando se llega desde una compra recurrente */
.cuenta-recurrente {
  margin: -8px 0 28px;
  max-width: 720px;
  background: var(--menta);
  color: #1B4D33;
  border-radius: 16px;
  padding: 16px 18px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
}

@media (max-width: 1100px) {
  .cat-head { padding: 40px 28px 28px; }
  .cat-head-inner { grid-template-columns: 1fr; gap: 32px; }
  .cat-head h1 { font-size: 44px; }
  .cat-config { padding: 8px 28px 64px; }
  .cat-config-inner { grid-template-columns: 1fr; gap: 40px; }
  .cat-precios, .otras-familias { padding-left: 28px; padding-right: 28px; }
  .otras-familias ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cat-head h1 { font-size: 34px; }
  .opciones { grid-template-columns: 1fr; }
  .cat-precios, .otras-familias { padding-left: 20px; padding-right: 20px; }
  .otras-familias ul { grid-template-columns: 1fr; }
  /* El bodegón es muy apaisado: en el móvil se recorta al centro para que las
     bolsas no queden diminutas. */
  .bodegon { padding-top: 56px; }
  .bodegon-copy { padding: 0 20px; flex-direction: column; align-items: flex-start; }
  .bodegon h2 { font-size: 30px; }
  .bodegon-foto { height: 250px; object-fit: cover; object-position: 52% 50%; }
  .bodegon + .oferta { padding-top: 64px; }
  /* El dibujo a escala necesita más alto que la foto para que los rótulos se lean. */
  .preview-lienzo.con-medidas { aspect-ratio: 4 / 4.9; }
  .preview-medidas { inset: 10px 8px 78px; }
}

/* ============================================================
   Página del pedido (enlace del correo)
   ============================================================ */
.pedido-pag { display: flex; flex-direction: column; gap: 18px; max-width: 860px; }
.pedido-pag h1 { margin: 0; }
/* Los botones de la reposición son <button>: sin esto heredan el aspecto del navegador. */
.repo-acciones button.btn-solid,
.repo-acciones button.btn-outline { cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700; }
.repo-acciones button.btn-solid { border: 1.5px solid var(--tinta); }
.repo-acciones button.btn-outline { background: none; color: var(--tinta); }
.repo-acciones button.btn-outline:hover { background: var(--tinta); color: var(--crema); }
.pedido-pie {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: rgba(28, 45, 34, 0.7);
  border-top: 1px solid rgba(28, 45, 34, 0.1);
  padding-top: 12px;
}

/* ============================================================
   Pago por transferencia (cesta, transferencia.php y el pedido)
   ============================================================ */
/* En el resumen oscuro de la cesta, segundo camino: contorno, como «pedido puntual». */
.btn-transferencia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  color: var(--crema);
  border: 1.5px solid rgba(244, 239, 224, 0.4);
  padding: 13px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.resumen a.btn-transferencia { color: var(--crema); text-decoration: none; }
.btn-transferencia:hover { border-color: var(--crema); }
.btn-transferencia.is-off { opacity: 0.45; pointer-events: none; }
.btn-transferencia svg { width: 20px; height: 20px; flex: none; }
.cesta-total .resumen-nota { margin: -4px 0 0; }
.transferencia-form h2 + .campos-dir { margin-top: -4px; }
.transferencia-form .btn-prueba { align-self: flex-start; padding: 15px 26px; display: inline-flex; gap: 10px; align-items: center; }
.transferencia-form .btn-prueba svg { width: 20px; height: 20px; }
.transferencia-lineas { margin: 0 0 4px; padding: 0 0 12px; list-style: none; display: flex; flex-direction: column; gap: 10px;
  border-bottom: 1px solid rgba(244, 239, 224, 0.2); font-size: 14px; }
.transferencia-lineas li { display: flex; justify-content: space-between; gap: 14px; color: rgba(244, 239, 224, 0.8); }
.transferencia-lineas strong { display: block; color: var(--crema); }
.transferencia-lineas li > span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Lo que hay que transferir: grande, en su orden y fácil de copiar. */
.transferencia-datos {
  background: var(--naranja-claro);
  border-radius: 20px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
}
.transferencia-datos p { margin: 0; }
.transferencia-titulo { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
/* Los cuatro datos, en filas sobre el mismo papel: nada de tarjetas dentro de la tarjeta. */
.transferencia-datos dl { margin: 6px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.transferencia-datos dl div { position: relative; padding: 12px 70px 12px 0; border-top: 1px solid rgba(28, 45, 34, 0.14); }
.transferencia-copiar {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  min-height: 36px;
  padding: 0 12px;
  border: 1.5px solid rgba(28, 45, 34, 0.45);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.transferencia-copiar:hover { border-color: var(--tinta); }
.transferencia-copiar.es-copiado { background: var(--tinta); border-color: var(--tinta); color: var(--crema); }
.transferencia-despues { font-size: 14px; color: rgba(28, 45, 34, 0.8); }
.transferencia-total { margin: 0; font-size: 15px; line-height: 1.5; }
.transferencia-total strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* El resumen de errores: cada uno lleva a su campo. */
.errores-lista { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.cesta-aviso:focus { outline: 2px solid #7A2E24; outline-offset: 3px; }
.transferencia-datos dt { font-size: 12.5px; font-weight: 700; color: rgba(28, 45, 34, 0.72); }
.transferencia-datos dd { margin: 2px 0 0; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; user-select: all; }
.pedido-pago { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(28, 45, 34, 0.75); }
.pedido-pago a { font-weight: 700; text-decoration: underline; }
@media (max-width: 640px) {
  .transferencia-datos dl { grid-template-columns: 1fr; }
}

/* ============================================================
   Panel de gestión (admin/)
   Herramienta de trabajo: densa, tablas anchas, nada de adornos.
   ============================================================ */
/* min-height: sin ella, en una página corta asomaría por debajo el fondo oscuro
   que el html lleva para el pie de la tienda. */
body.admin { background: var(--crema); min-height: 100vh; }
.admin-cab {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 32px;
  background: var(--tinta);
  color: var(--crema);
}
.admin-cab .logo { color: var(--crema); font-size: 21px; }
.admin-cab .logo:hover { color: var(--crema); }
.admin-panel-rotulo {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mostaza);
}
.admin-tabs { display: flex; gap: 4px; margin-left: 12px; flex-wrap: wrap; }
.admin-tabs a {
  color: rgba(244, 239, 224, 0.75);
  font-weight: 700;
  font-size: 14.5px;
  padding: 8px 14px;
  border-radius: 999px;
}
.admin-tabs a:hover { color: var(--crema); background: rgba(244, 239, 224, 0.08); }
.admin-tabs a.is-active { background: var(--crema); color: var(--tinta); }
.admin-salir { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(244, 239, 224, 0.6); }
.admin-salir .btn-plano { color: var(--crema); background: none; border: 0; cursor: pointer; font-family: inherit; }
.admin-main { padding: 28px 32px 64px; max-width: 1480px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.admin-h1 { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.admin-h1 .admin-sub { display: inline; margin-left: 10px; font-size: 15px; font-weight: 600; }
.admin-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.admin-kpis > div {
  background: var(--carta);
  border: 1px solid rgba(28, 45, 34, 0.1);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-kpis strong { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.admin-kpis span { font-size: 13px; color: rgba(28, 45, 34, 0.6); }
.admin-buscar { display: flex; gap: 10px; max-width: 640px; }
.admin-buscar input {
  flex: 1;
  font: inherit;
  font-size: 15px;
  padding: 10px 14px;
  border: 1.5px solid rgba(28, 45, 34, 0.2);
  border-radius: 12px;
  background: #FFF;
}
.admin-buscar .btn-outline { background: none; cursor: pointer; font-family: inherit; }
.admin-tabla-scroll {
  overflow-x: auto;
  background: var(--carta);
  border: 1px solid rgba(28, 45, 34, 0.1);
  border-radius: 16px;
}
.admin-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-tabla th,
.admin-tabla td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid rgba(28, 45, 34, 0.08); }
.admin-tabla th { font-size: 12.5px; font-weight: 700; color: rgba(28, 45, 34, 0.6); white-space: nowrap; }
.admin-repos td:nth-child(3), .admin-repos td:nth-child(5), .admin-tabla td:first-child { white-space: nowrap; }
.admin-tabla tbody tr:hover { background: rgba(53, 181, 119, 0.06); }
.admin-tabla tfoot td { border-bottom: 0; }
.admin-tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.admin-tabla .ref { font-variant-numeric: tabular-nums; white-space: nowrap; color: rgba(28, 45, 34, 0.7); }
.admin-tabla a { font-weight: 700; }
.admin-tabla a:hover { text-decoration: underline; }
.admin-sub { display: block; font-size: 12.5px; color: rgba(28, 45, 34, 0.55); font-weight: 500; }
.admin-prueba {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7A5A12;
  background: #F8E7BD;
  border-radius: 6px;
  padding: 2px 6px;
}
.admin-linea { display: block; margin-bottom: 4px; }
.admin-acciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.admin-acciones .btn-outline,
.admin-acciones .btn-solid {
  font-size: 12.5px;
  padding: 6px 12px;
  cursor: pointer;
  font-family: inherit;
  background: none;
  white-space: nowrap;
}
.admin-acciones .btn-solid { background: var(--tinta); color: var(--crema); border: 1.5px solid var(--tinta); }
.admin-stripe { font-size: 12.5px; color: rgba(28, 45, 34, 0.6); }
.admin-apagada { opacity: 0.55; }
.admin-nota { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(28, 45, 34, 0.7); max-width: 900px; }
.admin-nota a { text-decoration: underline; }
.admin-ficha { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.admin-ficha h2, .admin-ajustes h2 { margin: 6px 0 10px; font-size: 18px; font-weight: 800; }
.admin-bloque { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; }
.admin-bloque a { text-decoration: underline; }
.admin-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.admin-ajustes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.admin-ajustes section {
  background: var(--carta);
  border: 1px solid rgba(28, 45, 34, 0.1);
  border-radius: 16px;
  padding: 18px 20px;
  font-size: 14.5px;
  line-height: 1.55;
}
.admin-ajustes p { margin: 0 0 10px; }
.admin-ajustes .repo-estado { margin-right: 6px; }
.admin-ajustes .btn-solid { cursor: pointer; font-family: inherit; border: 0; }
.admin-ajustes .btn-outline { cursor: pointer; font-family: inherit; background: none; }
.admin-ajustes form { margin: 0 0 10px; }
.admin-clave { display: flex; gap: 8px; }
.admin-clave input {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 9px 14px;
  border: 1px solid rgba(28, 45, 34, 0.25);
  border-radius: 999px;
  background: #fff;
}
.admin-clave input:focus { outline: 2px solid var(--acc); outline-offset: 1px; }
/* Transporte y pedido mínimo: cada opción en su línea, con su cifra dentro de la frase. */
.admin-tienda fieldset { border: 0; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.admin-tienda legend { padding: 0; margin-bottom: 8px; font-weight: 700; }
.admin-tienda label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.admin-tienda input[type="number"] {
  width: 6.5em;
  font: inherit;
  padding: 6px 10px;
  border: 1px solid rgba(28, 45, 34, 0.25);
  border-radius: 999px;
  background: #fff;
  text-align: right;
}
.admin-tienda input[type="number"]:focus { outline: 2px solid var(--acc); outline-offset: 1px; }
.admin-tienda .admin-sub { display: inline; }
.admin-tienda-minimo { margin-bottom: 14px; }
/* Acolchado y no margen: un margen arriba atravesaría el body y dejaría ver
   por encima el fondo oscuro del html. */
.admin-entrar {
  max-width: 480px;
  margin: 0 auto;
  padding: 72px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.admin-entrar h1 { margin: 0; font-size: 30px; }
/* nombre @ dominio, en una sola fila */
.admin-correo { display: flex; align-items: center; gap: 6px; }
.admin-correo input { flex: 1; min-width: 0; }
.admin-correo select {
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 10px;
  border: 1.5px solid rgba(28, 45, 34, 0.2);
  border-radius: 14px;
  background: #FFF;
  color: var(--tinta);
}
.admin-arroba { font-weight: 800; color: rgba(28, 45, 34, 0.55); }
.admin-entrar .cesta-seguir { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.admin-pin { font-size: 28px !important; letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; }

/* Productos: la lista, las combinaciones y la rejilla de tamaños, que se edita en sitio. */
.admin-h2 { margin: 8px 0 10px; font-size: 18px; font-weight: 800; }
.admin-historial li { line-height: 1.45; }
.admin-muestra { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px;
  margin-right: 6px; border: 1px solid rgba(28, 45, 34, 0.18); }
.admin-muestra-grande { width: 26px; height: 26px; vertical-align: -2px; }
.admin-tocado { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px;
  font-weight: 700; background: var(--naranja-claro); color: #7A4A12; }
/* Debajo del campo, como el valor original: al lado, el campo ocupa todo el ancho y lo pisaba. */
.admin-tocado-bajo { display: table; margin: 4px 0 0; }
.admin-mini { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; background: #fff;
  border: 1px solid rgba(28, 45, 34, 0.1); display: inline-block; flex: none; vertical-align: middle; }
.admin-mini-vacia { background: repeating-linear-gradient(45deg, #fff 0 6px, rgba(28, 45, 34, 0.05) 6px 8px); }
.admin-foto { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; background: #fff;
  border: 1px solid rgba(28, 45, 34, 0.1); display: inline-block; flex: none; }
.admin-original { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: #7A4A12; }
.admin-abrir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; }
.admin-abrir select,
.admin-producto input[type="text"],
.admin-producto select,
.admin-nombres input[type="text"],
.admin-transferencia input {
  font: inherit;
  font-size: 14px;
  padding: 7px 10px;
  border: 1px solid rgba(28, 45, 34, 0.25);
  border-radius: 10px;
  background: #fff;
  color: var(--tinta);
  min-width: 0;
}
.admin-abrir .btn-outline, .admin-producto .btn-solid, .admin-nombres .btn-solid { cursor: pointer; font-family: inherit; }
.admin-producto .btn-solid { border: 0; align-self: flex-start; }
.admin-nombres input[type="text"] { width: 100%; }
.admin-nombres td { min-width: 160px; }
.admin-nombres .admin-campo-muestra { width: calc(100% - 26px); }
.admin-ancha { grid-column: 1 / -1; }
.admin-producto { display: flex; flex-direction: column; gap: 16px; }
.admin-combi-foto { display: flex; gap: 18px; align-items: flex-start; background: var(--carta);
  border: 1px solid rgba(28, 45, 34, 0.1); border-radius: 16px; padding: 16px; }
.admin-combi-foto > div { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; max-width: 520px; }
.admin-subir { font-size: 13px; color: rgba(28, 45, 34, 0.65); display: flex; flex-direction: column; gap: 6px; }
.admin-variantes td { vertical-align: middle; }
.admin-variantes .admin-campo-num { width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
.admin-variantes .admin-campo-sku { width: 140px; }
.admin-variantes tr.admin-var-no td:first-child strong { color: rgba(28, 45, 34, 0.45); }
.admin-variantes tr.admin-var-agotado td:first-child strong { color: #7A4A12; }
.admin-foto-tamano { display: flex; gap: 8px; align-items: center; min-width: 260px; }
.admin-foto-tamano > div { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.admin-foto-tamano input[type="file"] { font-size: 12px; }
/* Las líneas del pedido, con el botón para llevarlas a Business Central. */
.admin-lineas-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.admin-lineas-cab h2 { margin: 0; }
.admin-copiar-bc { border: 0; cursor: pointer; font-family: inherit; }
.admin-tabla-bc td { vertical-align: middle; }
/* Añadir un papel, un color o un tamaño: una fila de campos con su botón. */
.admin-anadir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; }
.admin-anadir input[type="text"] { font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid rgba(28, 45, 34, 0.45);
  border-radius: 10px; background: #fff; color: var(--tinta); min-width: 0; }
.admin-anadir .btn-outline, .admin-anadir .btn-solid { cursor: pointer; font-family: inherit; }
.admin-anadir .btn-outline { background: none; }
.admin-anadir .btn-solid { border: 0; }
.admin-anadir-rotulo { font-weight: 700; }
.admin-nuevo-tamano { background: var(--carta); border: 1px solid rgba(28, 45, 34, 0.1); border-radius: 16px; padding: 14px 16px; }
.admin-nuevo-tamano .admin-h2 { margin-top: 0; }
/* Cobro de las transferencias: el aviso de la lista y el bloque de la ficha. */
.admin-pendientes { margin: 0; background: var(--naranja-claro); border-radius: 14px; padding: 12px 16px; font-size: 14.5px; }
.admin-pendientes a { font-weight: 700; text-decoration: underline; margin-left: 6px; }
.admin-cobro { background: var(--carta); border: 1px solid rgba(28, 45, 34, 0.1); border-radius: 16px; padding: 14px 16px;
  margin-bottom: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.admin-cobro-pendiente { background: #FFF4E6; border-color: var(--naranja-claro); }
.admin-cobro p { margin: 0; }
.admin-cobro-datos { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.admin-cobro-datos div { display: contents; }
.admin-cobro-datos dt { color: rgba(28, 45, 34, 0.6); }
.admin-cobro-datos dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.admin-cobro .admin-acciones form { display: flex; align-items: center; gap: 8px; }
.admin-cobro .admin-acciones button { cursor: pointer; font-family: inherit; }
.admin-cobro .admin-acciones .btn-outline { background: none; }
.admin-avisar { font-size: 12.5px; display: flex; align-items: center; gap: 4px; }
.admin-transferencia { display: flex; flex-direction: column; gap: 10px; }
.admin-transferencia .campo { font-size: 13px; }
.admin-transferencia .btn-solid { align-self: flex-start; }

@media (max-width: 900px) {
  .admin-cab { padding: 12px 16px; }
  .admin-tabs { margin-left: 0; order: 3; width: 100%; }
  .admin-main { padding: 20px 16px 48px; }
  .admin-kpis { grid-template-columns: 1fr 1fr; }
  .admin-ficha, .admin-ajustes { grid-template-columns: 1fr; }
  .admin-combi-foto { flex-direction: column; }
}