/* =====================================================================
   BOSQUE DE PAPEL — Sistema visual «Sendero»
   Hoja de estilos única del sitio.
   ---------------------------------------------------------------------
   Índice
   1. Tokens (colores, tipografía, espacios, radios)
   2. Base
   3. Utilidades y componentes (botones, etiquetas, fotos)
   4. Barra superior y cabecera
   5. Mega menú (escritorio) y menú lateral (móvil)
   6. Secciones de la página de inicio
   7. Pie de página y barra inferior móvil
   8. Responsive
   ===================================================================== */

/* 1. TOKENS ----------------------------------------------------------- */
:root {
  /* Colores */
  --bosque:      #1E3B30;  /* primario: botones, portada, pie        */
  --bosque-2:    #28503F;  /* hover del primario                     */
  --musgo:       #4F6F52;  /* etiquetas y acentos verdes             */
  --liquen:      #DCE4D3;  /* fondos FAUNO                           */
  --liquen-2:    #C6D2BA;
  --liquen-3:    #EEF2EA;  /* fondos suaves de íconos y chips        */
  --hueso:       #F3EEE3;  /* fondo del sitio                        */
  --hueso-2:     #D6CFBE;  /* marcador de foto neutro                */
  --blanco:      #FFFFFF;
  --lenga:       #7B5134;  /* línea WoodPins                         */
  --lenga-2:     #936A4B;
  --viruta:      #E9DCCB;  /* fondos WoodPins                        */
  --viruta-2:    #F3E9DD;
  --lago:        #1D2B44;  /* barra superior y sección taller        */
  --lago-2:      #2B3C58;
  --tinta:       #1F2421;  /* texto principal                        */
  --gris:        #5C625D;  /* texto secundario (AA sobre hueso)      */
  --linea:       #E7E1D4;  /* bordes finos                           */

  /* Tipografía */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Radios: esquinas levemente redondeadas */
  --r-chip:  8px;
  --r-btn:   12px;
  --r-card:  16px;
  --r-panel: 24px;
  --r-big:   28px;

  /* Espacios */
  --gutter:      clamp(16px, 4.4vw, 64px);  /* margen lateral del contenido  */
  --gutter-wide: clamp(12px, 1.7vw, 24px);  /* paneles casi a sangre        */
  --section:     clamp(64px, 8vw, 112px);   /* separación entre secciones   */

  --sombra: 0 24px 48px rgba(29, 43, 68, 0.16);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* 2. BASE ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--hueso);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em; }
:focus-visible { outline: 2px solid var(--musgo); outline-offset: 3px; border-radius: 4px; }
body.no-scroll { overflow: hidden; }

/* Textos que cambian según el ancho de la pantalla.
   Dos párrafos en el HTML: se muestra uno y se esconde el otro.
   Úsalos siempre para decir LO MISMO más corto, nunca cosas distintas. */
.solo-angosto { display: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--bosque); color: var(--hueso); padding: 10px 16px; border-radius: var(--r-btn);
}
.skip-link:focus { top: 12px; }

/* 3. UTILIDADES Y COMPONENTES ----------------------------------------- */
.wrap      { max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter-wide); }
.section   { padding-top: var(--section); }

.icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 16px; height: 16px; stroke-width: 2; }

.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--musgo);
}
.eyebrow--lenga { color: var(--lenga); }

/* El subtítulo va bajo el título, no al costado derecho. */
.section-head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  margin-bottom: 40px;
}
.section-head h2 { margin-top: 12px; font-size: clamp(32px, 3.2vw, 52px); }
.section-head__text { max-width: 62ch; color: var(--gris); line-height: 1.6; }
/* Si la cabecera lleva un enlace («Ver todas»), este vuelve al costado derecho. */
.section-head:has(> .link-flecha) { flex-direction: row; justify-content: space-between; align-items: flex-end; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  border-radius: var(--r-btn); border: 1.5px solid transparent;
  font-size: 15px; font-weight: 700; line-height: 1;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  white-space: nowrap;
}
.btn .icon { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn--primario   { background: var(--bosque); color: var(--hueso); }
.btn--primario:hover { background: var(--bosque-2); }
.btn--borde      { border-color: var(--bosque); color: var(--bosque); background: transparent; }
.btn--borde:hover { background: var(--bosque); color: var(--hueso); }
.btn--claro      { background: var(--hueso); color: var(--bosque); }
.btn--claro:hover { background: var(--blanco); }
.btn--claro-borde { border-color: rgba(243,238,227,.45); color: var(--hueso); }
.btn--claro-borde:hover { border-color: var(--hueso); background: rgba(243,238,227,.08); }
.btn--sm { min-height: 48px; font-size: 14px; padding: 0 20px; }

.link-flecha { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; min-height: 44px; }
.link-flecha .icon { transition: transform .25s var(--ease); }
.link-flecha:hover .icon { transform: translateX(3px); }

.chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
  border-radius: var(--r-chip); font-size: 13px; font-weight: 600;
  background: var(--blanco); color: var(--bosque);
}
.badge {
  display: inline-block; padding: 6px 10px; border-radius: var(--r-chip);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--bosque); color: var(--hueso);
}
.badge--lago { background: var(--lago); }

/* Marcadores de foto.
   Para usar una foto real, reemplaza el <div class="foto ..."> por:
   <img class="foto" src="img/nombre.jpg" alt="Descripción" loading="lazy">
   Las proporciones y esquinas se mantienen. */
.foto {
  position: relative; width: 100%; height: 100%;
  border-radius: var(--r-card); object-fit: cover;
  background: var(--hueso-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: rgba(31,36,33,.55); font-size: 13px; font-weight: 600; text-align: center; padding: 16px;
}
.foto::before {  /* ícono de imagen del marcador */
  content: ""; width: 36px; height: 36px; opacity: .8;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='m21 16-5-5-9 8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='m21 16-5-5-9 8'/%3E%3C/svg%3E") center / contain no-repeat;
}
img.foto::before { content: none; }
.foto--liquen { background: var(--liquen-2); color: #4A5A45; }
.foto--lenga  { background: var(--lenga-2);  color: #F1E6D8; }
.foto--viruta { background: #E1CFB9; color: #6A4A30; }
.foto--lago   { background: var(--lago-2);   color: #AEBBD0; }

/* Curvas de nivel decorativas */
.topo { position: absolute; pointer-events: none; fill: none; stroke-width: 1.2; }

/* 4. BARRA SUPERIOR Y CABECERA ---------------------------------------- */
.topbar { background: var(--lago); color: #E4E8EF; font-size: 12px; font-weight: 500; letter-spacing: .03em; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: 16px; }
.topbar__msg { display: flex; align-items: center; gap: 10px; }
.topbar__msg .icon { width: 16px; height: 16px; }
.topbar__links { display: flex; gap: 28px; }
.topbar__links a:hover { color: var(--blanco); text-decoration: underline; text-underline-offset: 3px; }

.header { position: sticky; top: 0; z-index: 40; padding: 16px 0 0; }
.header__bar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 72px; padding: 0 16px 0 20px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-card);
  transition: box-shadow .25s var(--ease);
}
.header.is-scrolled .header__bar { box-shadow: 0 10px 30px rgba(29,43,68,.08); }

/* Logotipo de la marca: un SVG que toma el color del texto que lo rodea */
.logo { display: inline-flex; align-items: center; color: var(--tinta); }
.logo__img { display: block; width: auto; flex-shrink: 0; fill: currentColor; stroke: none; }
.logo__img--v { height: 46px; }      /* apilado: cabecera y pie */
.logo__img--h { height: 28px; display: none; }   /* horizontal: solo móvil */
.logo--sm .logo__img--h { display: block; height: 28px; }
.logo--footer { color: var(--hueso); }
.logo--footer .logo__img--v { height: 62px; }

.nav { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 0; border-radius: 10px; background: transparent; font-weight: 600;
  transition: background-color .2s, color .2s;
}
.nav__link:hover { background: var(--liquen-3); color: var(--bosque); }
.nav__link[aria-current="page"] { color: var(--bosque); }
.nav__link .icon-sm { transition: transform .25s var(--ease); }
.nav__link[aria-expanded="true"] { background: var(--bosque); color: var(--hueso); }
.nav__link[aria-expanded="true"] .icon-sm { transform: rotate(180deg); }

.actions { display: flex; align-items: center; gap: 8px; }
.search {
  display: flex; align-items: center; gap: 10px;
  width: 260px; min-height: 44px; padding: 0 14px;
  background: var(--hueso); border-radius: var(--r-btn); color: var(--gris);
}
.search input { border: 0; background: transparent; width: 100%; font-size: 14px; color: var(--tinta); outline: none; }
.search:focus-within { outline: 2px solid var(--musgo); outline-offset: 2px; }
.icon-btn {
  position: relative; width: 44px; height: 44px; flex-shrink: 0;
  display: grid; place-items: center;
  border: 1px solid var(--linea); border-radius: var(--r-btn); background: var(--blanco);
  transition: background-color .2s;
}
.icon-btn:hover { background: var(--liquen-3); }
.cart-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 16px;
  border-radius: var(--r-btn); background: var(--bosque); color: var(--hueso);
  font-size: 14px; font-weight: 600;
}
.cart-btn:hover { background: var(--bosque-2); }
.cart-btn__count {
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: var(--r-chip);
  background: var(--hueso); color: var(--bosque); font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
}
.menu-btn, .search-mobile { display: none; }
.cart-btn__count[hidden] { display: none; }

/* 5. MENÚ LATERAL (MÓVIL) Y ELEMENTOS COMUNES ---------------------- */
.dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.dot--musgo { background: var(--musgo); } .dot--lenga { background: var(--lenga); } .dot--lago { background: var(--lago); }
.square-btn {
  width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: var(--r-btn);
  display: grid; place-items: center; background: var(--bosque); color: var(--hueso);
  transition: background-color .2s;
}
.square-btn:hover { background: var(--bosque-2); }
.overlay {
  position: fixed; inset: 0; z-index: 30; background: rgba(29,43,68,.35);
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.overlay.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; inset: 0; z-index: 60; background: var(--hueso);
  display: flex; flex-direction: column; padding: 16px 16px 28px; overflow-y: auto;
  transform: translateX(-100%); visibility: hidden;
  transition: transform .3s var(--ease), visibility .3s;
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; min-height: 56px; }

.drawer__nav { margin-top: 12px; background: var(--blanco); border-radius: 20px; padding: 8px; }
.drawer__link {
  width: 100%; min-height: 56px; padding: 0 16px; border: 0; background: transparent;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 17px; font-weight: 700; text-align: left; border-radius: 14px;
}
.drawer__link + .drawer__link, .drawer__shortcuts + .drawer__link { border-top: 1px solid #EFEAE0; border-radius: 0; }
/* «Toda la tienda» cierra la lista de módulos: verde más marcado para no
   confundirse con un módulo abierto. */
.drawer__link--main { background: var(--liquen); color: var(--bosque); }
.mod + .drawer__link--main { margin-top: 10px; border-top: 0; border-radius: 14px; }
.drawer__shortcuts { display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 12px; }
.drawer__shortcuts a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border-radius: 10px; background: var(--hueso); font-size: 15px; font-weight: 600; }
.drawer__visit {
  margin-top: 12px; padding: 20px; border-radius: 20px; background: var(--lago); color: var(--hueso);
  display: flex; flex-direction: column; gap: 6px;
}
.drawer__visit strong { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.2; }
.drawer__visit span:last-child { font-size: 13px; color: #B7C2D3; }
.drawer__account { margin-top: auto; padding-top: 24px; display: flex; gap: 8px; }
.drawer__account .btn { flex: 1; }

/* 6. SECCIONES -------------------------------------------------------- */

/* Portada (bento) */
.hero { padding-top: 24px; }
.hero__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 16px; min-height: 640px; }
.hero__main {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  padding: clamp(28px, 4.4vw, 64px); padding-top: clamp(28px, 3.9vw, 56px); padding-bottom: 48px;
  background: var(--bosque); color: var(--hueso); border-radius: var(--r-panel);
}
.hero__main .topo { right: -220px; top: -150px; width: 720px; height: 720px; stroke: rgba(201,213,192,.16); z-index: -1; }
.pill {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px; background: rgba(243,238,227,.1);
  font-size: 13px; font-weight: 600; color: var(--liquen);
}
.pill .icon { width: 16px; height: 16px; }
.hero h1 { margin-top: 36px; max-width: 680px; font-size: clamp(42px, 5.6vw, 80px); line-height: 1; letter-spacing: -0.02em; }
.hero h1 em { color: #C9D5C0; }
.hero__lead { margin-top: 24px; max-width: 480px; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.55; color: #D3DCCB; }
.hero__ctas { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__ctas .btn { min-height: 54px; padding: 0 24px; }
.hero__feats {
  margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(243,238,227,.16);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  font-size: 14px; font-weight: 600; color: var(--liquen);
}
.hero__feats li { display: flex; align-items: center; gap: 10px; line-height: 1.35; }
/* Nota al pie de la portada: se lee como un pie de página, no como un dato más */
.hero__nota {
  margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(243,238,227,.16);
  display: flex; gap: 6px;
  font-size: 13px; line-height: 1.5; color: rgba(211,220,203,.72);
}
.hero__nota span { opacity: .8; }
.hero__main > *:not(.topo) { position: relative; }
.hero__main .hero__feats,
.hero__main .hero__nota { margin-top: auto; }
.hero__ctas + .hero__feats { margin-top: auto; }
.hero__side { display: grid; grid-template-rows: 1fr 216px; gap: 16px; }
/* Columna del micro video: ocupa todo el alto disponible. */
.hero__media { position: relative; min-height: 0; display: flex; flex-direction: column; }
.hero__media .foto,
.hero__video { flex: 1 1 auto; min-height: 0; border-radius: var(--r-panel); }
.hero__video {
  display: block; width: 100%; height: 100%;
  object-fit: cover; background: var(--liquen);
}
.hero__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tile {
  display: flex; flex-direction: column; padding: 24px; border-radius: 20px;
  transition: transform .25s var(--ease);
}
.tile:hover { transform: translateY(-3px); }
.tile--liquen { background: var(--liquen); color: var(--bosque); }
.tile--lenga  { background: var(--lenga);  color: var(--hueso); }
.tile .badge { align-self: flex-start; background: var(--blanco); color: var(--bosque); }
.tile--lenga .badge { background: rgba(243,238,227,.16); color: var(--hueso); }
.tile__title { margin-top: 16px; font-family: var(--serif); font-size: 26px; line-height: 1.1; }
.tile .link-flecha { margin-top: auto; min-height: 0; }

/* Franja de confianza */
.trust { padding-top: 24px; }
.trust__list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: center;
  padding: 26px 40px; background: var(--blanco); border-radius: 20px;
}
.trust__item { display: flex; align-items: center; gap: 14px; }
.trust__icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--r-btn);
  display: grid; place-items: center; background: var(--liquen-3); color: var(--bosque);
}
.trust__icon--lenga { background: var(--viruta-2); color: var(--lenga); }
.trust__icon--lago  { background: #E6EAF1; color: var(--lago); }
.trust__item strong { display: block; font-size: 15px; }
.trust__item span { font-size: 13px; color: var(--gris); }

/* Dos líneas */
.lines { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.line {
  display: flex; flex-direction: column; padding: 16px; border-radius: var(--r-panel);
}
.line--fauno { background: var(--liquen); color: var(--bosque); }
.line--wood  { background: var(--lenga);  color: var(--hueso); }
.line .foto { height: 330px; }
.line__body { display: flex; flex-direction: column; flex-grow: 1; padding: 24px 16px 8px; }
.line__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.line h3 { font-size: 40px; font-weight: 500; line-height: 1; }
.line__tag { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.line--fauno .line__tag { color: var(--musgo); }
.line--wood .line__tag { color: #EADBC8; }
.line p { margin-top: 12px; max-width: 520px; line-height: 1.55; }
.line--fauno p { color: #33483C; }
.line--wood p  { color: #F1E6D8; }
.line__foot { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.line--wood .chip { background: rgba(243,238,227,.16); color: var(--hueso); }
.line--wood .btn { background: var(--hueso); color: #4A3222; }
.line--wood .btn:hover { background: var(--blanco); }

/* Categorías */
.cats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; }
.cat { display: flex; flex-direction: column; gap: 12px; }
.cat .foto { aspect-ratio: 1 / 1.05; height: auto; transition: transform .3s var(--ease); }
.cat .foto::before { width: 28px; height: 28px; }
.cat:hover .foto { transform: translateY(-4px); }
.cat strong { font-size: 15px; display: block; }
.cat > span > span { font-size: 12px; font-weight: 600; color: var(--musgo); }
.cat--wood > span > span { color: var(--lenga); }
.cat--f1 .foto { background: #DCE4D3; } .cat--f2 .foto { background: #CFD9C5; } .cat--f3 .foto { background: #E3E8DC; }
.cat--w1 .foto { background: #E9DCCB; } .cat--w2 .foto { background: #E1CFB9; } .cat--w3 .foto { background: #D8C3A8; }
.cat .foto { color: rgba(31,36,33,.4); }

/* Destacados */
.price { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* El taller */
.taller {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 5fr 7fr; gap: 64px;
  padding: clamp(28px, 5vw, 72px); border-radius: var(--r-big);
  background: var(--lago); color: var(--hueso);
}
.taller .topo { left: -260px; bottom: -330px; width: 760px; height: 760px; stroke: rgba(228,232,239,.07); z-index: -1; }
.taller__text { display: flex; flex-direction: column; }
.taller .eyebrow { color: #B7C6DA; }
.taller h2 { margin-top: 16px; font-size: clamp(38px, 3.9vw, 56px); }
.taller__lead { margin-top: 24px; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.45; color: #DDE3EC; }
.taller__text > p:not(.eyebrow):not(.taller__lead) { margin-top: 20px; color: #B7C2D3; line-height: 1.65; }
.taller__text .btn { margin-top: 40px; align-self: flex-start; color: var(--lago); }
/* La frase que cierra el bloque: se lee como una declaración, no como texto corrido */
.taller__mantra {
  margin-top: 28px !important; padding-top: 24px;
  border-top: 1px solid rgba(201,213,192,.22);
  font-family: var(--serif); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.4;
  color: var(--hueso) !important;
}
.taller__media { display: flex; flex-direction: column; gap: 24px; }
/* La foto crece para que las dos columnas terminen parejas */
.taller__media .foto { flex: 1 1 auto; min-height: 250px; border-radius: 18px; }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps::before {  /* el sendero */
  content: ""; position: absolute; left: 36px; right: 36px; top: 15px;
  border-top: 2px dashed rgba(201,213,192,.4);
}
.step { position: relative; display: flex; flex-direction: column; gap: 14px; }
.step__num {
  margin-left: 20px; width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: #C9D5C0; color: var(--bosque);
}
.step__num--wood { background: var(--viruta); color: #4A3222; }
.step__card {
  flex-grow: 1; padding: 20px; border-radius: var(--r-card);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
}
.step__card strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; }
.step__card span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: #B7C2D3; }

/* Regalos corporativos */
.corp {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  padding: 16px; background: var(--blanco); border-radius: var(--r-big);
}
.corp .foto { min-height: 400px; border-radius: 18px; }
.corp__text { display: flex; flex-direction: column; padding: 40px 48px 40px 0; }
.corp h2 { margin-top: 14px; font-size: clamp(34px, 3vw, 44px); }
.corp__text > p:not(.eyebrow) { margin-top: 16px; color: var(--gris); }
.checks { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; font-weight: 600; }
.checks li { display: flex; align-items: center; gap: 10px; }
.checks .icon { width: 18px; height: 18px; color: var(--musgo); stroke-width: 2.2; }
.corp__ctas { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

/* 7. PIE Y BARRA INFERIOR --------------------------------------------- */
.footer-wrap { padding-top: var(--section); }
.footer {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 64px var(--gutter) 28px; border-radius: var(--r-big) var(--r-big) 0 0;
  background: var(--bosque); color: #C9D5C0;
}
.footer .topo { right: -200px; top: -260px; width: 700px; height: 700px; stroke: rgba(201,213,192,.1); z-index: -1; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }

.footer__about { margin-top: 16px; max-width: 320px; font-size: 15px; }
.footer__col h2 { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #97AB95; margin-bottom: 16px; }
.footer__col ul { display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: #E6ECE1; }
.footer__col a:hover { color: var(--blanco); text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom {
  margin-top: 96px; padding-top: 24px; border-top: 1px solid rgba(201,213,192,.18);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: #97AB95;
}

.tabbar { display: none; }

/* 8. RESPONSIVE ------------------------------------------------------- */
@media (max-width: 1200px) {
  .search { width: 200px; }
  .nav__link { padding: 0 10px; }
  .trust__list { grid-template-columns: repeat(2, 1fr); padding: 24px; }
  .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .taller { grid-template-columns: 1fr; gap: 40px; }
  .corp__text { padding: 32px 32px 32px 0; }
}

/* Tablet y móvil: cambia la navegación */
@media (max-width: 1024px) {
  .topbar__links { display: none; }
  .topbar__inner { justify-content: center; }
  .header { padding-top: 8px; }
  .header__bar { min-height: 64px; padding: 0 10px; }
  .nav, .search--desktop, .account-btn { display: none; }
  .menu-btn { display: grid; }
  .search-mobile { display: flex; width: auto; margin-top: 8px; background: var(--blanco); min-height: 48px; }
  /* En móvil la cabecera muestra el horizontal en vez del apilado */
  .logo__img--v { display: none; }
  .logo__img--h { display: block; height: 26px; }
  .cart-btn { width: 44px; padding: 0; justify-content: center; position: relative; }
  .cart-btn__label { display: none; }
  .cart-btn__count {
    position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px;
    border-radius: 7px; background: var(--lenga); color: var(--hueso); font-size: 11px;
  }
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__main { min-height: 560px; }
  .hero__side { grid-template-rows: 360px auto; }

  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--blanco); border-top: 1px solid var(--linea); border-radius: 20px 20px 0 0;
    font-size: 11px; font-weight: 700;
  }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--gris); }
  .tabbar a[aria-current="page"] { color: var(--bosque); }
  .tabbar__icon { width: 44px; height: 30px; border-radius: 10px; display: grid; place-items: center; }
  .tabbar a[aria-current="page"] .tabbar__icon { background: var(--liquen-3); }
  body { padding-bottom: 84px; }
}

@media (max-width: 767px) {
  .solo-ancho   { display: none; }
  .solo-angosto { display: block; }
  .section-head, .section-head:has(> .link-flecha) { flex-direction: column; align-items: flex-start; margin-bottom: 24px; }
  .section-head .link-flecha { margin-top: -8px; }
  .hero { padding-top: 12px; }
  .hero__main { min-height: 0; padding-bottom: 28px; border-radius: 20px; }
  .hero__main .topo { width: 420px; height: 420px; right: -200px; top: -140px; }
  .pill { font-size: 12px; }
  .hero h1 { margin-top: 20px; }
  .hero__lead { margin-top: 14px; }
  .hero__ctas { margin-top: 24px; flex-direction: column; }
  .hero__ctas .btn { width: 100%; }
  .hero__main .hero__feats { margin-top: 28px; grid-template-columns: 1fr; gap: 12px; }
  .hero__main .hero__nota { margin-top: 30px; padding-top: 20px; }
  .hero__side { grid-template-rows: 280px auto; }
  .hero__tiles { grid-template-columns: 1fr; }
  .tile { min-height: 170px; }
  .tile .link-flecha { padding-top: 16px; }
  .trust__list { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .lines { grid-template-columns: 1fr; }
  .line .foto { height: 240px; }
  .line h3 { font-size: 34px; }
  .line__foot .btn { width: 100%; }
  /* categorías en carrusel horizontal */
  .cats {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: 8px;
    scrollbar-width: none; scroll-padding-inline: var(--gutter);
  }
  .cats::-webkit-scrollbar { display: none; }
  .cat { flex: 0 0 42%; scroll-snap-align: start; }
  .steps { grid-template-columns: 1fr; }
  .steps::before { left: 35px; right: auto; top: 16px; bottom: 16px; border-top: 0; border-left: 2px dashed rgba(201,213,192,.4); }
  .step { flex-direction: row; align-items: flex-start; }
  .step__num { margin: 0 0 0 20px; }
  .taller__media .foto { height: 200px; }
  .corp { grid-template-columns: 1fr; gap: 0; }
  .corp .foto { min-height: 220px; }
  .corp__text { padding: 28px 12px 16px; }
  .corp__ctas .btn { flex: 1; }
  .footer { padding-top: 48px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom { margin-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   9. TARJETAS DE PRODUCTO (inicio y tienda)
   ===================================================================== */
.grid-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pcard {
  display: flex; flex-direction: column; padding: 12px;
  background: var(--blanco); border-radius: 18px;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.pcard:hover { box-shadow: 0 16px 36px rgba(29,43,68,.08); transform: translateY(-3px); }
.pcard:hover .square-btn { background: var(--bosque-2); }
.pcard__media { position: relative; display: block; aspect-ratio: 3 / 4; }
.pcard__media .foto { border-radius: var(--r-btn); }
.pcard__media .foto::before { width: 32px; height: 32px; opacity: .45; }
.pcard__media .badge { position: absolute; top: 12px; left: 12px; }
.badge--lenga { background: var(--lenga); }
.dots {
  position: absolute; left: 12px; bottom: 12px; display: flex; gap: 4px;
  padding: 6px 8px; border-radius: var(--r-chip); background: rgba(255,255,255,.88);
}
.dots i { width: 10px; height: 10px; border-radius: 50%; }
.pcard__body { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; padding: 16px 8px 4px; }
.pcard__line { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--musgo); }
.pcard--woodpins .pcard__line { color: var(--lenga); }
.pcard__name { font-family: var(--serif); font-size: 21px; line-height: 1.25; }
.pcard__meta { font-size: 13px; color: var(--gris); }
.pcard__foot { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; }

/* =====================================================================
   10. PÁGINA TIENDA
   ===================================================================== */
.shop-hero { padding-top: 40px; }
.breadcrumb { display: flex; gap: 8px; font-size: 13px; color: var(--gris); }
.breadcrumb a:hover { color: var(--bosque); text-decoration: underline; }
.shop-hero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 12px; }
.shop-hero h1 { font-size: clamp(40px, 4.4vw, 64px); }
.shop-hero__row p { max-width: 420px; color: var(--gris); }

/* Líneas (filtro principal) */
.pills {
  margin-top: 28px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 4px;
}
.pills::-webkit-scrollbar { display: none; }
.pill-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 18px; border: 1px solid var(--linea); border-radius: var(--r-btn);
  background: var(--blanco); font-size: 15px; font-weight: 700;
  transition: background-color .2s, color .2s, border-color .2s;
}
.pill-btn:hover { border-color: var(--bosque); }
.pill-btn small { font-size: 12px; font-weight: 700; color: var(--gris); }
.pill-btn[aria-pressed="true"] { background: var(--bosque); border-color: var(--bosque); color: var(--hueso); }
.pill-btn[aria-pressed="true"] small { color: #C9D5C0; }

.shop { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 32px; }

/* Panel de filtros */
.filters {
  position: sticky; top: 112px;
  background: var(--blanco); border-radius: 20px; padding: 8px 20px 20px;
  display: flex; flex-direction: column;
}
.filters__head, .filters__foot { display: none; }
.fgroup { border: 0; margin: 0; padding: 18px 0; min-width: 0; }
.fgroup + .fgroup { border-top: 1px solid #EFEAE0; }
.fgroup legend, .fgroup__title {
  float: left; width: 100%; margin-bottom: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gris);
}
.fgroup legend + * { clear: both; }
.fsearch {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px;
  background: var(--hueso); border-radius: var(--r-btn); color: var(--gris);
}
.fsearch input { border: 0; background: transparent; width: 100%; font-size: 14px; outline: none; color: var(--tinta); }
.fsearch:focus-within { outline: 2px solid var(--musgo); outline-offset: 2px; }

.fcheck {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px;
  border-radius: 10px; cursor: pointer; font-size: 15px; font-weight: 600;
}
.fcheck:hover { background: var(--hueso); }
.fcheck:has(input:checked) { background: var(--liquen-3); color: var(--bosque); }
.fcheck__name { flex-grow: 1; display: flex; align-items: center; gap: 8px; }
.fcheck__count { font-size: 12px; font-weight: 700; color: var(--gris); }
.fline { margin: 12px 0 4px 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.fline:first-child { margin-top: 0; }
input.box {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; margin: 0;
  width: 20px; height: 20px; border: 1.5px solid #B9B2A3; border-radius: 6px; background: var(--blanco);
  display: grid; place-items: center; cursor: pointer;
}
input.box:checked {
  background: var(--bosque) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3EEE3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat;
  border-color: var(--bosque);
}

/* Formatos con su tamaño a escala */
.fsizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fsize {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
  min-height: 104px; padding: 12px 6px 10px; border: 1px solid var(--linea); border-radius: var(--r-btn);
  background: var(--blanco); text-align: center; transition: border-color .2s, background-color .2s;
}
.fsize:hover { border-color: var(--bosque); }
.fsize[aria-pressed="true"] { background: var(--liquen-3); border-color: var(--bosque); color: var(--bosque); }
.fsize__shape { display: block; border: 1.5px solid currentColor; border-radius: 3px; opacity: .7; }
.fsize strong { font-size: 13px; line-height: 1; }
.fsize small { font-size: 10px; color: var(--gris); line-height: 1.2; }
.fhint { margin-top: 10px; font-size: 12px; color: var(--gris); line-height: 1.45; }

/* Interruptor */
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; cursor: pointer; font-size: 15px; font-weight: 600; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track {
  position: relative; flex-shrink: 0; width: 44px; height: 26px; border-radius: 13px; background: #D5CEC0;
  transition: background-color .2s;
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--blanco); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s var(--ease);
}
.switch input:checked + .switch__track { background: var(--bosque); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--musgo); outline-offset: 2px; }
.switch__label small { display: block; font-size: 12px; font-weight: 500; color: var(--gris); }

/* Barra de resultados */
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; min-height: 48px; }
.results__count { font-size: 14px; color: var(--gris); }
.results__count strong { color: var(--tinta); }
.active-chips { display: flex; flex-wrap: wrap; gap: 8px; flex-grow: 1; }
.active-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px 0 12px;
  border: 0; border-radius: var(--r-chip); background: var(--blanco); font-size: 13px; font-weight: 600;
}
.active-chip .icon { width: 14px; height: 14px; stroke-width: 2.2; }
.active-chip:hover { background: var(--liquen-3); }
.link-btn { border: 0; background: none; padding: 0 4px; min-height: 36px; font-size: 13px; font-weight: 700; color: var(--bosque); text-decoration: underline; text-underline-offset: 3px; }
.sort { margin-left: auto; position: relative; }
.sort select {
  appearance: none; -webkit-appearance: none; min-height: 44px; padding: 0 40px 0 14px;
  border: 1px solid var(--linea); border-radius: var(--r-btn); background: var(--blanco);
  font: inherit; font-size: 14px; font-weight: 600; color: var(--tinta); cursor: pointer;
}
.sort .icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.btn-filtros {
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--linea); border-radius: var(--r-btn); background: var(--blanco); font-size: 14px; font-weight: 700;
}
.btn-filtros .count {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 7px; display: grid; place-items: center;
  background: var(--bosque); color: var(--hueso); font-size: 11px;
}
.btn-filtros .count[hidden] { display: none; }

.grid-products--shop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.empty { padding: 64px 24px; text-align: center; background: var(--blanco); border-radius: 20px; }
.empty[hidden] { display: none; }
.empty h2 { font-size: 28px; }
.empty p { margin: 8px 0 20px; color: var(--gris); }
.shop-note {
  margin-top: 32px; padding: 28px 32px; border-radius: 20px; background: var(--liquen);
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; color: var(--bosque);
}
.shop-note strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; }
.shop-note p { color: #33483C; }

/* =====================================================================
   11. OPCIONES DE PRODUCTO (colores, grabado, cantidad)
   ===================================================================== */
.qv {
  width: min(980px, calc(100% - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0;
  border-radius: var(--r-panel); background: var(--blanco); color: var(--tinta);
  box-shadow: var(--sombra); overflow: auto;
}
.qv::backdrop { background: rgba(29,43,68,.5); }
.qv[open] { animation: qv-in .25s var(--ease); }
@keyframes qv-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.qv__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.qv__close { position: absolute; top: 14px; right: 14px; z-index: 2; background: var(--blanco); }
.qv__media { padding: 16px; }
.qv__media .foto { min-height: 520px; height: 100%; transition: background-color .3s; }
.qv__info { display: flex; flex-direction: column; gap: 18px; padding: 40px 40px 32px 24px; }
.qv__line { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--musgo); }
.qv__line--woodpins { color: var(--lenga); }
.qv h2 { margin-top: 8px; font-size: 34px; }
.qv__price { margin-top: 10px; font-size: 22px; font-weight: 700; }
.qv__desc { color: var(--gris); }
.qv__specs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.qv__spec { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-chip); background: var(--hueso); font-size: 13px; font-weight: 600; }
.qv__spec .icon { width: 16px; height: 16px; color: var(--musgo); }
.qv fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.qv legend { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 700; }
.qv legend span { font-weight: 500; color: var(--gris); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { position: relative; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.swatch span {
  display: block; width: 34px; height: 34px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); transition: transform .15s;
}
.swatch:hover span { transform: scale(1.08); }
.swatch input:checked + span { outline: 2px solid var(--bosque); outline-offset: 3px; }
.swatch input:focus-visible + span { outline: 2px solid var(--musgo); outline-offset: 3px; }
.grabado { padding: 16px; border-radius: 14px; background: var(--viruta-2); }
.grabado .fcheck { padding: 0; min-height: 32px; }
.grabado .fcheck:hover, .grabado .fcheck:has(input:checked) { background: transparent; color: inherit; }
.grabado__extra { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--lenga); }
.grabado__field { margin-top: 12px; }
.grabado__field[hidden] { display: none; }
.grabado__field input {
  width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid #DCCBB6; border-radius: var(--r-btn);
  background: var(--blanco); font-size: 16px; font-family: var(--serif);
}
.grabado__field small { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--gris); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--linea); border-radius: var(--r-btn); }
.qty button { width: 44px; height: 44px; border: 0; background: none; display: grid; place-items: center; border-radius: var(--r-btn); }
.qty button:hover { background: var(--hueso); }
.qty output { min-width: 32px; text-align: center; font-weight: 700; }
.qv__buy { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.qv__buy .btn { width: 100%; }
.qv__buy .btn[hidden] { display: none; }
.qv__note { font-size: 12px; color: var(--gris); line-height: 1.5; }

/* Responsive de tienda y ventana */
@media (max-width: 1200px) {
  .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-products--shop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop { grid-template-columns: 250px minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 1024px) {
  .shop { grid-template-columns: minmax(0, 1fr); padding-top: 20px; }
  .btn-filtros { display: inline-flex; }
  .filters {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 70;
    max-height: 86vh; padding: 0; border-radius: 24px 24px 0 0;
    transform: translateY(105%); visibility: hidden;
    transition: transform .3s var(--ease), visibility .3s;
  }
  .filters.is-open { transform: none; visibility: visible; }
  .filters__head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px 10px 24px; border-bottom: 1px solid #EFEAE0;
  }
  .filters__head strong { font-family: var(--serif); font-weight: 400; font-size: 24px; }
  .filters__body { overflow-y: auto; padding: 0 24px; }
  .filters__foot {
    display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #EFEAE0;
  }
  .filters__foot .btn { flex: 1; }
  .overlay { z-index: 65; }
  .qv__media .foto { min-height: 420px; }
}
@media (max-width: 767px) {
  .grid-products, .grid-products--shop { gap: 12px; }
  .pcard { padding: 8px; border-radius: 14px; }
  .pcard__body { padding: 12px 4px 2px; }
  .pcard__name { font-size: 17px; }
  .pcard__meta { font-size: 12px; }
  .pcard__media .badge { top: 8px; left: 8px; font-size: 10px; padding: 5px 8px; }
  .dots { left: 8px; bottom: 8px; gap: 3px; padding: 5px 6px; }
  .dots i { width: 8px; height: 8px; }
  .pcard .price { font-size: 15px; }
  .pcard .square-btn { width: 40px; height: 40px; }
  .shop-hero { padding-top: 24px; }
  .shop-hero__row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pills { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); margin-top: 20px; }
  .toolbar { gap: 10px; }
  .results__count { order: 3; width: 100%; }
  .active-chips { order: 4; }
  .sort { margin-left: 0; flex: 1; }
  .sort select { width: 100%; }
  .shop-note { padding: 24px; }
  /* Ventana como hoja inferior */
  .qv {
    width: 100%; max-width: 100%; max-height: 92vh; margin: auto 0 0;
    border-radius: 24px 24px 0 0;
  }
  .qv__inner { grid-template-columns: minmax(0, 1fr); }
  .qv__media { padding: 12px 12px 0; }
  .qv__media .foto { min-height: 260px; height: 260px; }
  .qv__info { padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); gap: 16px; }
  .qv h2 { font-size: 28px; }
}
.fgroup[hidden] { display: none; }

/* =====================================================================
   12. MENÚ «TIENDA» (escritorio)
   Atajos que abren tienda.html ya filtrada.
   ===================================================================== */
.mega {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 45;
  display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.3fr; gap: 32px;
  padding: 28px 32px; background: var(--blanco); border-radius: 20px; box-shadow: var(--sombra);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.mega.is-open { opacity: 1; visibility: visible; transform: none; }
.mega__col { display: flex; flex-direction: column; gap: 2px; }
.mega__title {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.mega__title--musgo { color: var(--musgo); } .mega__title--lenga { color: var(--lenga); } .mega__title--lago { color: var(--lago); }
.mega__link {
  display: flex; flex-direction: column; padding: 9px 12px; border-radius: 10px;
  font-size: 16px; font-weight: 600; line-height: 1.3;
}
.mega__link small { font-size: 12px; font-weight: 500; color: var(--gris); }
.mega__link:hover { background: var(--liquen-3); color: var(--bosque); }
.mega__link--strong { margin-top: 6px; color: var(--bosque); font-weight: 700; }
.mega__sub {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 2px 0 4px 12px;
  padding-left: 12px; border-left: 2px solid var(--liquen);
}
.mega__sub a { padding: 6px 8px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.mega__sub a span { font-size: 11px; font-weight: 600; color: var(--gris); margin-left: 2px; }
.mega__sub a:hover { background: var(--liquen-3); color: var(--bosque); }
.mega__all { margin-top: auto; padding: 12px 12px 0; font-size: 14px; font-weight: 700; }
.mega__all--musgo { color: var(--bosque); } .mega__all--lenga { color: var(--lenga); }
.mega__promo {
  display: flex; flex-direction: column; padding: 12px; border-radius: var(--r-card);
  background: var(--viruta); color: #4A3222; transition: transform .25s var(--ease);
}
.mega__promo:hover { transform: translateY(-2px); }
.mega__promo .foto { height: 180px; border-radius: var(--r-btn); }
.mega__promo-body { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 16px 8px 4px; }
.mega__promo-title { display: block; margin-top: 4px; font-family: var(--serif); font-size: 23px; line-height: 1.15; }
.mega__promo .square-btn { background: var(--lenga); }
#mega-overlay { z-index: 35; }
@media (max-width: 1024px) {
  .mega, #mega-overlay { display: none; }
}

/* =====================================================================
   13. DETALLES DE TIENDA (filtros nuevos, marcadores de foto)
   ===================================================================== */
.badge--gris { background: #8A8579; }
.badge--ok { background: var(--musgo); }
.pill-btn--link { background: transparent; border-style: dashed; color: var(--bosque); }
.pill-btn--link .icon { width: 16px; height: 16px; }
.fnote { margin-left: 6px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lenga); }
.fhint-link { display: inline-block; margin: 8px 0 0 10px; font-size: 13px; font-weight: 700; color: var(--bosque); }
.fhint-link:hover { text-decoration: underline; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--linea); border-radius: var(--r-chip); background: var(--blanco);
  font-size: 13px; font-weight: 600; transition: border-color .2s, background-color .2s;
}
.fchip small { font-size: 11px; color: var(--gris); font-weight: 700; }
.fchip:hover { border-color: var(--bosque); }
.fchip[aria-pressed="true"] { background: var(--bosque); border-color: var(--bosque); color: var(--hueso); }
.fchip[aria-pressed="true"] small { color: #C9D5C0; }
.switch + .switch { margin-top: 6px; }

/* Marcador de foto con el nombre del diseño «grabado» */
.foto--vacia::before { content: none; }
.foto--vacia { position: relative; }
.glyph {
  font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.1;
  color: rgba(74, 50, 34, .55); text-align: center; padding: 0 12px;
  border: 1.5px solid rgba(74, 50, 34, .3); border-radius: 50%; width: 70%; aspect-ratio: 1;
  display: grid; place-items: center;
}
.foto__label {
  position: absolute; left: 16px; bottom: 16px; font-size: 12px; font-weight: 600; opacity: .75;
}

/* =====================================================================
   14. FICHA DE PRODUCTO (producto.html)
   ===================================================================== */
.pp-crumb { padding-top: 28px; }
.pp-missing { padding: 96px 0; text-align: center; }
.pp-missing h1 { font-size: 40px; margin-bottom: 20px; }
.pp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; padding-top: 20px; align-items: start; }

.pp__gallery { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 12px; }
.pp__main { aspect-ratio: 4 / 5; }
.pp__main .foto { border-radius: var(--r-panel); transition: background-color .3s; }
.pp__main .glyph { width: 56%; font-size: clamp(28px, 3.4vw, 48px); }
.pp__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pp__thumb {
  aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 14px; background: none; overflow: hidden;
  transition: border-color .2s;
}
.pp__thumb .foto { border-radius: 11px; }
.pp__thumb .glyph { font-size: 12px; border-width: 1px; }
.pp__thumb[aria-pressed="true"] { border-color: var(--bosque); }

.pp__info { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.pp__line { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--musgo); }
.pp__line--woodpins { color: var(--lenga); }
.pp h1 { font-size: clamp(34px, 3.4vw, 50px); }
.pp__price-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pp__price { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pp__desc { color: var(--gris); font-size: 16px; }
.pp__options { display: flex; flex-direction: column; gap: 24px; margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--linea); }
.opt { border: 0; margin: 0; padding: 0; min-width: 0; }
.opt legend { padding: 0; margin-bottom: 12px; font-size: 14px; font-weight: 700; }
.opt legend span { font-weight: 500; color: var(--gris); }

/* Formatos como tarjetas con su tamaño a escala */
.opt-formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.optcard { position: relative; cursor: pointer; }
.optcard input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.optcard__body {
  display: flex; align-items: center; gap: 14px; height: 100%; padding: 14px;
  border: 1.5px solid var(--linea); border-radius: 14px; background: var(--blanco);
  transition: border-color .2s, background-color .2s;
}
.optcard__body .fsize__shape { flex-shrink: 0; color: var(--gris); }
.optcard__text { display: flex; flex-direction: column; gap: 1px; flex-grow: 1; min-width: 0; }
.optcard__text strong { font-size: 15px; }
.optcard__text small { font-size: 12px; color: var(--gris); }
.optcard__price { font-size: 13px; font-weight: 700; white-space: nowrap; align-self: flex-start; }
.optcard:hover .optcard__body { border-color: #B9B2A3; }
.optcard input:checked + .optcard__body { border-color: var(--bosque); background: var(--liquen-3); }
.optcard input:checked + .optcard__body .fsize__shape { color: var(--bosque); }
.optcard input:focus-visible + .optcard__body { outline: 2px solid var(--musgo); outline-offset: 2px; }

/* Opciones como fichas (localidades, diseños sin color) */
.opt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opt { position: relative; cursor: pointer; }
.chip-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip-opt span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border: 1.5px solid var(--linea); border-radius: 10px; background: var(--blanco); font-size: 14px; font-weight: 600;
  transition: border-color .2s, background-color .2s;
}
.chip-opt:hover span { border-color: #B9B2A3; }
.chip-opt input:checked + span { border-color: var(--bosque); background: var(--bosque); color: var(--hueso); }
.chip-opt input:focus-visible + span { outline: 2px solid var(--musgo); outline-offset: 2px; }

/* Tipo de hoja con vista previa del rayado */
.opt-hojas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hoja { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
.hoja input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.hoja__prev {
  width: 100%; aspect-ratio: 3 / 4; border: 1.5px solid var(--linea); border-radius: 10px;
  background-color: #FFFDF8; transition: border-color .2s, box-shadow .2s;
}
.hoja--punteada { background-image: radial-gradient(circle, #9E9788 1.1px, transparent 1.4px); background-size: 9px 9px; background-position: 4px 4px; }
.hoja--cuadros { background-image: linear-gradient(#D6CFC1 1px, transparent 1px), linear-gradient(90deg, #D6CFC1 1px, transparent 1px); background-size: 9px 9px; }
.hoja--lineas { background-image: linear-gradient(transparent 10px, #D6CFC1 10px, #D6CFC1 11px); background-size: 100% 11px; background-position: 0 6px; }
.hoja__name { font-size: 13px; font-weight: 600; }
.hoja:hover .hoja__prev { border-color: #B9B2A3; }
.hoja input:checked + .hoja__prev { border-color: var(--bosque); box-shadow: 0 0 0 3px var(--liquen); }
.hoja input:checked ~ .hoja__name { color: var(--bosque); font-weight: 700; }
.hoja input:focus-visible + .hoja__prev { outline: 2px solid var(--musgo); outline-offset: 2px; }

.pp__buy { display: flex; gap: 10px; align-items: stretch; }
.pp__buy .qty { flex-shrink: 0; }
.pp__cta { flex-grow: 1; }
.pp__flow { width: 100%; }
.pp__flow[hidden] { display: none; }
.pp__trust {
  display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding: 18px 20px;
  background: var(--blanco); border-radius: var(--r-card); font-size: 14px; font-weight: 600;
}
.pp__trust li { display: flex; align-items: center; gap: 10px; }
.pp__trust .icon { width: 18px; height: 18px; color: var(--musgo); }

/* Historia + especificaciones numeradas */
.pp-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.pp-story__text h2 { margin: 12px 0 18px; font-size: clamp(32px, 3vw, 44px); }
.pp-story__text p { color: var(--gris); margin-bottom: 14px; max-width: 520px; }
.pp-story__text .pp-story__lead { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.45; color: var(--tinta); }
.pp-specs { background: var(--blanco); border-radius: 20px; padding: 28px 32px; }
.specs { margin-top: 14px; }
.specs li {
  display: grid; grid-template-columns: 36px minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 12px; align-items: baseline;
  padding: 12px 0; border-top: 1px solid #EFEAE0; font-size: 14px;
}
.specs li:first-child { border-top: 0; }
.spec__n { font-size: 11px; font-weight: 700; color: var(--musgo); font-variant-numeric: tabular-nums; }
.spec__k { font-weight: 700; }
.spec__v { color: var(--gris); }

/* Barra de compra fija (móvil) */
.buybar { display: none; }

/* =====================================================================
   15. EDICIONES (ediciones.html y edicion.html)
   ===================================================================== */
.covers { position: relative; width: 100%; height: 100%; min-height: 260px; display: grid; place-items: center; }
.cover {
  position: absolute; width: 30%; aspect-ratio: 5 / 7; border-radius: 4px 10px 10px 4px;
  box-shadow: inset 7px 0 0 rgba(0,0,0,.12), 0 18px 30px rgba(29,43,68,.18);
  transform: translateX(calc((var(--i) - (var(--n) - 1) / 2) * 44%)) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 5deg));
  display: flex; align-items: flex-end; padding: 10px 10px 12px 16px;
}
.cover__label { font-family: var(--serif); font-size: 12px; letter-spacing: .18em; color: rgba(255,255,255,.9); }

.ed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ed-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ed-card {
  display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden;
  background: var(--blanco); border-radius: var(--r-panel);
}
.ed-card__media { display: block; aspect-ratio: 16 / 10; background: var(--liquen); overflow: hidden; }
.ed-card--serie .ed-card__media { background: #E6EAF1; }
.ed-card__body { display: flex; flex-direction: column; gap: 10px; padding: 24px 28px 28px; }
.ed-card__type { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--musgo); }
.ed-card--serie .ed-card__type { color: var(--lago); }
.ed-card h3 { font-size: 32px; }
.ed-card h3 a:hover { color: var(--musgo); }
.ed-card__lema { color: var(--gris); }
.ed-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; font-weight: 600; color: var(--gris); }
.ed-card__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.ed-card--big { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.ed-card--big .ed-card__media { aspect-ratio: auto; min-height: 420px; }
.ed-card--big .ed-card__body { justify-content: center; padding: 48px; }
.ed-card--big h3 { font-size: clamp(40px, 4vw, 60px); }
.ed-empty { padding: 32px; border: 1.5px dashed var(--linea); border-radius: 20px; color: var(--gris); text-align: center; }

/* Página de una edición */
.ed-hero {
  position: relative; overflow: hidden; isolation: isolate; margin-top: 20px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; min-height: 560px;
  padding: clamp(32px, 5vw, 72px); border-radius: var(--r-big); background: var(--bosque); color: var(--hueso);
}
.ed-hero--serie { background: var(--lago); }
.ed-hero .topo { right: -200px; top: -200px; width: 760px; height: 760px; stroke: rgba(201,213,192,.14); z-index: -1; }
.ed-hero__text { display: flex; flex-direction: column; justify-content: center; }
.ed-hero h1 { margin-top: 24px; font-size: clamp(46px, 6vw, 88px); line-height: .98; letter-spacing: -0.02em; color: var(--hueso); }
.ed-hero__lema { margin-top: 20px; max-width: 480px; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.45; color: #DDE3DA; }
.ed-hero__meta { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 14px; font-weight: 600; color: #C9D5C0; }
.ed-hero--serie .ed-hero__meta { color: #B7C6DA; }
.ed-hero .hero__ctas { margin-top: 32px; }
.ed-hero__art { position: relative; min-height: 360px; }
.ed-hero__art .cover { width: 34%; }

.var-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 20px; }
.var-card { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.var-card__cover {
  width: 100%; aspect-ratio: 5 / 7; border-radius: 4px 10px 10px 4px; display: flex; align-items: flex-end; padding: 10px 10px 12px 16px;
  box-shadow: inset 7px 0 0 rgba(0,0,0,.12), 0 10px 20px rgba(29,43,68,.12); transition: transform .25s var(--ease);
}
.var-card:hover .var-card__cover { transform: translateY(-4px) rotate(-1.5deg); }
.var-card__name { font-size: 14px; font-weight: 700; text-align: center; }

.ed-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.ed-story h2 { margin: 12px 0 18px; font-size: clamp(32px, 3vw, 44px); }
.ed-story > div > p:not(.eyebrow) { color: var(--gris); margin-bottom: 14px; max-width: 540px; }

.fmt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fmt-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 24px;
  background: var(--blanco); border-radius: 20px; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.fmt-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(29,43,68,.08); }
.fmt-card__shape { display: block; margin-bottom: 14px; border-radius: 3px 7px 7px 3px; box-shadow: inset 5px 0 0 rgba(0,0,0,.12); align-self: center; }
.fmt-card strong { font-family: var(--serif); font-weight: 400; font-size: 26px; }
.fmt-card > span { font-size: 13px; color: var(--gris); }
.fmt-card .price { margin-top: 8px; color: var(--tinta); }
.fmt-card .link-flecha { margin-top: auto; min-height: 36px; }

/* Responsive: ficha y ediciones */
@media (max-width: 1200px) {
  .fmt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed-card--big { grid-template-columns: minmax(0, 1fr); }
  .ed-card--big .ed-card__media { min-height: 320px; }
}
@media (max-width: 1024px) {
  .pp { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pp__gallery { position: static; }
  .pp__main { aspect-ratio: 1 / 1; }
  .pp-story, .ed-story { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ed-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ed-hero__art { min-height: 300px; }
  .buybar {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    position: fixed; left: 12px; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 48;
    padding: 10px 10px 10px 18px; border-radius: 16px; background: var(--blanco); box-shadow: 0 12px 32px rgba(29,43,68,.18);
    transform: translateY(20px); opacity: 0; visibility: hidden; transition: all .25s var(--ease);
  }
  .buybar.is-visible { transform: none; opacity: 1; visibility: visible; }
  .buybar > div { display: flex; flex-direction: column; min-width: 0; }
  .buybar__name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .buybar__price { font-size: 13px; color: var(--gris); }
}
@media (max-width: 767px) {
  .pp-crumb { padding-top: 16px; font-size: 12px; flex-wrap: wrap; }
  .pp { padding-top: 12px; }
  .pp__thumbs { gap: 8px; }
  .opt-formats { grid-template-columns: minmax(0, 1fr); }
  .opt-hojas { gap: 8px; }
  .pp__buy { flex-wrap: wrap; }
  .pp__buy .pp__cta { flex-basis: 100%; }
  .pp-specs { padding: 20px; }
  .specs li { grid-template-columns: 28px minmax(0, 0.9fr) minmax(0, 1.1fr); font-size: 13px; }
  .ed-grid, .ed-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .ed-card--big .ed-card__body { padding: 24px; }
  .ed-card--big .ed-card__media { min-height: 240px; }
  .ed-hero { margin-top: 12px; padding: 28px 22px; border-radius: 22px; }
  .ed-hero__lema { font-size: 18px; }
  .ed-hero__art { min-height: 220px; }
  .fmt-grid { gap: 10px; }
  .fmt-card { padding: 16px; }
  .fmt-card strong { font-size: 21px; }
  .var-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .cover__label { font-size: 9px; }
}
/* Ajustes: filtros con nota y formatos con forma de cuaderno */
.fcheck { padding-top: 6px; padding-bottom: 6px; }
.fcheck__name { flex-wrap: wrap; column-gap: 8px; row-gap: 0; line-height: 1.3; }
.fnote { flex-basis: 100%; margin: 2px 0 0; }
.optcard__body .fsize__shape { border: 0; border-radius: 2px 4px 4px 2px; background: #D9D2C3; box-shadow: inset 3px 0 0 rgba(0,0,0,.12); opacity: 1; }
.optcard input:checked + .optcard__body .fsize__shape { background: var(--musgo); }
.fsize .fsize__shape { border-radius: 2px 4px 4px 2px; }
.fmt-card__art { align-self: stretch; height: 64px; margin-bottom: 14px; display: flex; align-items: flex-end; justify-content: center; }
.fmt-card__art .fmt-card__shape { margin: 0; }

/* =====================================================================
   16. MENÚ «EDICIONES» (escritorio)
   ===================================================================== */
.mega--ed { display: block; padding: 24px 32px 28px; }
.mega-ed__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.mega-ed__head .mega__title { margin-bottom: 0; }
.mega-ed__head .mega__all { margin-top: 0; padding: 0; }
/* auto-fit: al agregar una edición nueva la grilla se acomoda sola */
.mega-ed__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.ed-box {
  display: flex; flex-direction: column; padding: 12px; border-radius: var(--r-card);
  background: var(--hueso); transition: transform .25s var(--ease), background-color .2s;
}
.ed-box:hover { transform: translateY(-3px); background: var(--liquen-3); }
.ed-box__media { display: block; aspect-ratio: 4 / 3; }
.ed-box__media .foto { border-radius: var(--r-btn); font-size: 12px; }
.ed-box__media .foto::before { width: 26px; height: 26px; }
.ed-box__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 14px 6px 4px; }
.ed-box__type { grid-column: 1; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--musgo); }
.ed-box__name { grid-column: 1; font-family: var(--serif); font-size: 20px; line-height: 1.15; }
.ed-box .square-btn { grid-column: 2; grid-row: 1 / 3; width: 40px; height: 40px; }

/* =====================================================================
   17. PACKS Y CAPÍTULOS DE UNA EDICIÓN
   ===================================================================== */
/* Máximo 420 px por tarjeta: con un solo pack no se estira a lo ancho. */
.pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 420px)); gap: 24px; justify-content: start; }
.pack-card { display: flex; flex-direction: column; background: var(--blanco); border-radius: var(--r-panel); overflow: hidden; }
/* Los cuadernos se miden por el ALTO de esta caja, no por el ancho de la
   tarjeta: así nunca se cortan, sea cual sea el ancho que les toque. */
.pack-card__covers {
  position: relative; height: 248px; background: var(--liquen-3); display: grid; place-items: center;
}
.pack-card__covers .cover { width: auto; height: 62%; }
.pack-card__body { display: flex; flex-direction: column; gap: 10px; flex-grow: 1; padding: 24px 28px 26px; }
.pack-card h3 { font-size: 26px; }
.pack-card__list { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.pack-card__list li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
.pack-card__list .icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--musgo); stroke-width: 2.4; }
.pack-card__foot { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

.caps { display: flex; flex-direction: column; gap: 32px; }
.cap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.cap--inv .cap__media { order: 2; }
.cap__media { aspect-ratio: 4 / 3; }
.cap__media .foto { border-radius: var(--r-panel); }
.cap__n { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--musgo); }
.cap__text h3 { margin: 10px 0 14px; font-size: clamp(28px, 2.6vw, 38px); }
.cap__text p { color: var(--gris); margin-bottom: 12px; max-width: 520px; }

/* Opciones de presentación y packs en la ficha */
.opt-formats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt-packs[hidden], #opt-variantes[hidden] { display: none; }
.packs { display: flex; flex-direction: column; gap: 10px; }
.packcard { position: relative; cursor: pointer; }
.packcard input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.packcard__body {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px;
  border: 1.5px solid var(--linea); border-radius: 14px; background: var(--blanco);
  transition: border-color .2s, background-color .2s;
}
.packcard__covers { display: flex; flex-shrink: 0; }
.packcard__covers span {
  width: 20px; height: 28px; border-radius: 2px 5px 5px 2px;
  box-shadow: inset 3px 0 0 rgba(0,0,0,.14);
}
.packcard__covers span + span { margin-left: -7px; }
.packcard__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.packcard__text strong { font-size: 15px; line-height: 1.25; }
.packcard__text small { font-size: 12px; color: var(--gris); line-height: 1.35; }
.packcard:hover .packcard__body { border-color: #B9B2A3; }
.packcard input:checked + .packcard__body { border-color: var(--bosque); background: var(--liquen-3); }
.packcard input:focus-visible + .packcard__body { outline: 2px solid var(--musgo); outline-offset: 2px; }

/* Contenido fijo (posavasos) */
.packfijo { padding: 18px 20px; border-radius: 14px; background: var(--viruta-2); }
.packfijo__t { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.packfijo ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; font-size: 14px; font-weight: 600; }
.packfijo li { display: flex; align-items: center; gap: 8px; }
.packfijo .icon { width: 16px; height: 16px; color: var(--lenga); stroke-width: 2.4; }

@media (max-width: 1200px) {
  .mega-ed__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .mega--ed { display: none; }
  .cap, .cap--inv .cap__media { grid-template-columns: minmax(0, 1fr); order: 0; }
  .cap { gap: 20px; }
}
@media (max-width: 767px) {
  .pack-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pack-grid { justify-content: stretch; }
  .pack-card__covers { height: 210px; }
  .pack-card__body { padding: 20px; }
  .opt-formats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opt-formats--2 .optcard__body { flex-direction: column; align-items: flex-start; gap: 6px; }
  .packfijo ul { grid-template-columns: minmax(0, 1fr); }
  .caps { gap: 24px; }
}
/* Marcadores de foto de los capítulos: más sobrios y con la etiqueta centrada */
.cap__media .foto--vacia {
  border: 1.5px dashed rgba(31,36,33,.18); align-items: center; justify-content: center;
}
.cap__media .foto__label { position: static; opacity: .6; font-size: 13px; }

/* =====================================================================
   18. MENÚ MÓVIL MODULAR
   Tres módulos que se abren y cierran, uno a la vez.
   ===================================================================== */
.drawer__nav { padding: 6px; }
.drawer__nav--sec { margin-top: 10px; padding: 0 6px; }
.mod { border-radius: 14px; transition: background-color .2s var(--ease); }
.mod + .mod { border-top: 1px solid #EFEAE0; }
.mod.is-open { background: var(--liquen-3); border-top-color: transparent; }
.mod.is-open + .mod { border-top-color: transparent; }
.mod__btn {
  width: 100%; min-height: 60px; padding: 0 14px; border: 0; background: none;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  font: inherit; text-align: left; border-radius: 14px;
}
.mod__title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; }
.mod__meta { font-size: 12px; font-weight: 600; color: var(--gris); }
.mod__chevron { transition: transform .25s var(--ease); color: var(--gris); }
.mod.is-open .mod__btn { color: var(--bosque); }
.mod.is-open .mod__meta { color: var(--musgo); }
.mod.is-open .mod__chevron { transform: rotate(180deg); color: var(--bosque); }
.mod__panel { display: none; padding: 0 10px 12px; }
.mod.is-open .mod__panel { display: block; }
.mod__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mod__grid a {
  display: flex; flex-direction: column; gap: 2px; min-height: 60px; justify-content: center;
  padding: 10px 14px; border-radius: 12px; background: var(--blanco);
}
.mod__grid strong { font-size: 15px; font-weight: 700; }
.mod__grid small { font-size: 12px; color: var(--gris); }
.mod__grid--chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mod__grid--chips a { min-height: 48px; font-size: 15px; font-weight: 600; }
.mod__grid--chips a:last-child { grid-column: 1 / -1; }
.mod__grid--lista { grid-template-columns: minmax(0, 1fr); }
.mod__grid--lista a { min-height: 56px; }
.mod__all {
  display: flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 4px; padding: 0 14px;
  font-size: 14px; font-weight: 700; color: var(--bosque);
}

/* Caja de pedidos con logo, al final del menú */
.drawer__promo {
  display: flex; align-items: center; gap: 16px; margin-top: 12px; padding: 12px;
  border-radius: 20px; background: var(--viruta); color: #4A3222;
}
.drawer__promo-foto {
  width: 96px; height: 96px; flex-shrink: 0; border-radius: var(--r-btn);
  font-size: 10px; line-height: 1.25; padding: 8px;
}
.drawer__promo-foto::before { width: 22px; height: 22px; }
.drawer__promo-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.drawer__promo-txt strong { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.2; }
.drawer__promo .link-flecha { margin-top: 2px; min-height: 0; color: var(--lenga); }

/* =====================================================================
   19. PÁGINA CORPORATIVA (corporativo.html)
   ===================================================================== */

/* Migas de pan sobre el panel verde de la portada */
.breadcrumb--claro { position: relative; margin-bottom: 24px; color: rgba(243,238,227,.66); }
.breadcrumb--claro a { color: var(--liquen); }
.breadcrumb--claro a:hover { color: var(--blanco); }
.breadcrumb--claro [aria-current] { color: var(--hueso); }

/* Por qué funciona: tres ideas numeradas */
.ideas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.idea {
  display: flex; flex-direction: column; gap: 12px;
  padding: 32px 28px 36px; background: var(--blanco); border-radius: var(--r-panel);
}
.idea__num {
  align-self: flex-start; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-btn);
  background: var(--liquen); color: var(--bosque);
  font-size: 14px; font-weight: 700; letter-spacing: .06em;
}
.idea h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.15; }
.idea p { color: var(--gris); line-height: 1.65; }

/* Qué podemos grabar */
.grabar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grabar__item {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 16px 24px; background: var(--blanco); border-radius: var(--r-panel);
}
.grabar__item .foto { height: 190px; border-radius: var(--r-card); }
.grabar__item h3 { margin-top: 6px; font-size: 20px; font-weight: 700; }
.grabar__item p { font-size: 15px; line-height: 1.55; color: var(--gris); }
.grabar__min { margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 700; color: var(--lenga); }
.grabar__item--nota { justify-content: center; padding: 32px 28px; background: var(--viruta); color: #4A3222; }
.grabar__item--nota p { color: #6A4A30; }
.grabar__item--nota .link-flecha { margin-top: auto; color: var(--lenga); }

/* Carrusel de ejemplos: se arrastra, no gira solo */
.carrusel__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin: 0 0 28px; padding: 0 var(--gutter-wide);
}
.carrusel__head h2 { margin-top: 12px; font-size: clamp(30px, 3vw, 46px); }
.carrusel__ctrl { display: flex; gap: 8px; flex-shrink: 0; }
.carrusel__ctrl .icon-btn { background: var(--blanco); }
.carrusel__ctrl .icon-btn[disabled] { opacity: .35; pointer-events: none; }
.carrusel { overflow: hidden; }
.carrusel__pista {
  display: flex; gap: 20px; padding: 4px var(--gutter-wide) 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter-wide);
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab; scroll-behavior: smooth;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.carrusel__pista.is-dragging * { pointer-events: none; }
.carrusel__item {
  flex: 0 0 clamp(260px, 30vw, 400px); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 14px;
}
.carrusel__item .foto { height: clamp(220px, 24vw, 320px); border-radius: var(--r-panel); }
.carrusel__item p { font-size: 15px; line-height: 1.55; color: var(--gris); }
.carrusel__item strong { display: block; margin-bottom: 4px; font-size: 16px; color: var(--tinta); }

/* Cómo funciona: cuatro pasos */
.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.paso { display: flex; flex-direction: column; gap: 12px; }
.paso__num {
  align-self: flex-start; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--bosque); color: var(--hueso);
  font-size: 15px; font-weight: 700; letter-spacing: .06em;
}
.paso__num--wood { background: var(--lenga); }
.paso__num--lago { background: var(--lago); }
.paso h3 { font-size: 19px; font-weight: 700; }
.paso p { font-size: 15px; line-height: 1.6; color: var(--gris); }

/* Preguntas frecuentes */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq__item { background: var(--blanco); border-radius: var(--r-card); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 16px 22px; cursor: pointer;
  font-size: 17px; font-weight: 700; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ''; flex-shrink: 0; width: 12px; height: 12px;
  border-right: 2px solid var(--musgo); border-bottom: 2px solid var(--musgo);
  transform: translateY(-3px) rotate(45deg); transition: transform .25s var(--ease);
}
.faq__item[open] summary::after { transform: translateY(2px) rotate(225deg); }
.faq__item[open] summary { color: var(--bosque); }
.faq__item p { padding: 0 22px 22px; max-width: 70ch; color: var(--gris); line-height: 1.7; }

/* Llamado final */
.cta-final__wrap { padding-top: var(--section); }
.cta-final {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  padding: clamp(32px, 4vw, 56px); border-radius: var(--r-panel);
  background: var(--bosque); color: var(--hueso);
}
.cta-final .topo { right: -180px; top: -160px; width: 620px; height: 620px; stroke: rgba(201,213,192,.16); z-index: -1; }
.cta-final__text { max-width: 620px; }
.cta-final h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.1; }
.cta-final p { margin-top: 14px; color: #D3DCCB; line-height: 1.65; }
.cta-final .btn { flex-shrink: 0; min-height: 56px; padding: 0 26px; }

@media (max-width: 1024px) {
  .ideas, .grabar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
}
@media (max-width: 767px) {
  .ideas, .grabar, .pasos { grid-template-columns: minmax(0, 1fr); }
  .idea { padding: 24px 22px 28px; }
  .carrusel__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .carrusel__item { flex-basis: 78vw; }
  .faq__item summary { font-size: 16px; padding: 14px 18px; }
  .faq__item p { padding: 0 18px 18px; }
  .cta-final { flex-direction: column; align-items: flex-start; }
  .cta-final .btn { width: 100%; }
}

/* =====================================================================
   20. PÁGINA EL TALLER (taller.html)
   ===================================================================== */

/* Cuatro pasos dentro del panel del proceso */
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
  .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 767px) {
  .steps--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Nota de confianza bajo el botón de pedido (ficha de producto).
   Explica por qué la compra se cierra por WhatsApp. */
.pp__porque {
  margin-top: 16px; padding: 16px 18px;
  background: var(--liquen-3); border-radius: var(--r-card);
}
.pp__porque-titulo {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--bosque);
}
.pp__porque-titulo .icon { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; }
.pp__porque > p + p { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--gris); }