/* ============================================================
   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 */
  --acc-claro: #5BC18C;    /* el verde de marca aclarado: fondo del hero */
  --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 */
  --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,
.repo-titulo,
.resumen-importe {
  font-family: var(--font-display);
}
a { color: var(--tinta); text-decoration: none; }
a:hover { color: #23855A; }
::selection { background: var(--acc); color: var(--tinta); }
button { font-family: inherit; }

.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;
}
.topbar .sep { opacity: 0.35; }

/* ============================================================
   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; }
.btn-icono svg { width: 17px; height: 17px; flex: none; }

/* ============================================================
   Hero (Home)
   ============================================================ */
.hero {
  background: var(--acc-claro);   /* verde de marca aclarado; la sección de energía y fibras conserva el intenso */
  padding: 88px 56px 96px;
}
.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;
  border: 1px solid rgba(28, 45, 34, 0.28);
  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(--crema); }
.hero-lead {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  max-width: 560px;
  color: rgba(28, 45, 34, 0.82);
  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); }
.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 30px 40px rgba(28, 45, 34, 0.32));
}
/* ============================================================
   Selector por uso (Home)
   ============================================================ */
.selector {
  background: var(--tinta);
  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.65);
  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; }
/* El sector elegido se queda encendido, no solo mientras el ratón está encima:
   es lo que explica por qué abajo hay tarjetas apagadas. */
.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.78; }

/* ============================================================
   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; }
.catalogo-nota {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(28, 45, 34, 0.62);
}
/* Un display de autor gana al [hidden] del navegador: sin esto la nota saldría
   vacía nada más cargar y no se iría al apagar el sector. */
.catalogo-nota[hidden] { display: none; }
.catalogo-ver-todo {
  font: inherit;
  font-weight: 700;
  color: var(--tinta);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--acc);
  padding: 0 0 1px;
  cursor: pointer;
}
.catalogo-ver-todo:hover { border-bottom-color: var(--tinta); }
.productos { display: grid; grid-template-columns: repeat(4, 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); }
/* Elegido un sector arriba, lo compatible se enciende y lo demás se apaga.
   Apagado y no escondido: quien ya sabe lo que quiere lo sigue teniendo a mano,
   y la rejilla no da un salto al recolocarse. */
.producto-card.is-encendida {
  border-color: var(--acc);
  box-shadow: 0 0 0 2px var(--acc), 0 18px 44px rgba(28, 45, 34, 0.12);
}
.producto-card.is-apagada { opacity: 0.42; }
.producto-card.is-apagada:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .producto-card { transition: none; }
}
.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.55); margin-right: 2px; }
.producto-nombre { line-height: 1.15; }
.producto-meta { font-size: 13px; font-weight: 500; color: rgba(28, 45, 34, 0.55); }
.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.6);
}

/* ============================================================
   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(--acc); }
.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(--verde-claro); }
.oferta-light .eyebrow { color: rgba(28, 45, 34, 0.6); }
.oferta-light p { color: rgba(28, 45, 34, 0.75); }
.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(--verde-suave); 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; }
.repos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.repo-card {
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding: 24px;
  background: var(--crema);
  border-radius: 20px;
}
.repo-card svg { width: 26px; height: 26px; overflow: visible; }
.repo-body { display: flex; flex-direction: column; gap: 6px; }
.repo-titulo { font-weight: 800; font-size: 17px; }
.repo-desc { font-size: 14px; line-height: 1.45; color: rgba(28, 45, 34, 0.65); }
.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.6); }
.reponer-tel a { color: inherit; text-decoration: underline; }
.reponer-tel a:hover { color: var(--tinta); }

/* ============================================================
   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.5); }
.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.45);
  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.5);
}
.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.5); }
.footer-legal a:hover,
.footer-legal-links a:hover { 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 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);
}
.resumen-total { display: flex; justify-content: space-between; align-items: baseline; }
.resumen-importe { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; }
.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;
}
.btn-prueba {
  background: var(--acc);
  color: var(--tinta);
  border: none;
  padding: 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
}
.btn-prueba:hover { background: var(--crema); }
.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(--acc); }
.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.2);
  border-radius: 14px;
  padding: 12px 14px;
  resize: vertical;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus { outline: 2px solid var(--acc); outline-offset: 1px; border-color: transparent; }
.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.6); }
.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.55);
  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; }
.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);
}
.cesta-seguir { font-size: 15px; font-weight: 700; color: rgba(28, 45, 34, 0.65); }
.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 «Volver a pedir»
   ============================================================ */
.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: 1fr 1fr; gap: 16px; }
.cuenta-nota { font-size: 13px; line-height: 1.5; color: rgba(28, 45, 34, 0.55); }
.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.55); }
.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.6); }
.repo-fecha { font-size: 14px; color: rgba(28, 45, 34, 0.7); }
.repo-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.repo-cambiar { display: flex; align-items: center; gap: 10px; }
.repo-cambiar label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.repo-cambiar 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: 9px 12px;
}
.repo-cambiar select:focus { outline: 2px solid var(--acc); outline-offset: 1px; }
.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
   ============================================================ */
@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; }
  .hero { padding: 64px 28px 72px; }
  .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; }
  .productos { grid-template-columns: 1fr 1fr; }
  .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; }
  .repos { grid-template-columns: 1fr 1fr; }
  .reponer-head { flex-wrap: wrap; }
  .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: 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: 11px 4px; }
  .header-actions .btn-outline { padding: 11px 13px; }
  .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; }
  .catalogo-nota { flex-wrap: wrap; gap: 6px 12px; }
  .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; }
  .repos { grid-template-columns: 1fr; }
  .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; }
  .header-actions { flex-wrap: wrap; }
}

/* ============================================================
   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.6); }
.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%; }
/* 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; }
.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; }
.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.55; 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; }
.aviso-cesta {
  margin: 0;
  background: var(--menta);
  color: #1B4D33;
  border-radius: 14px;
  padding: 11px 14px;
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
}
/* La JS conmuta esta clase cuando el servidor rechaza el alta. Sin ella el
   fallo salía con el mismo fondo que el acierto. */
.aviso-cesta.es-error { background: #F6DED9; color: #7A2E24; }
.cat-config .resumen-linea { font-size: 15px; color: rgba(244, 239, 224, 0.75); }

@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; }
}
@media (max-width: 640px) {
  .cat-head h1 { font-size: 34px; }
  .opciones { grid-template-columns: 1fr; }
}