/* pdp.css — capa base compartida por las páginas de producto de Momenturies
   (cuadro.html / sobremesa.html / iman.html). Extraído de producto.html. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --beige:#f0ebe3;--black:#1a1a1a;--mid:#666;--light:#aaa;
  --white:#fff;--gray:#f5f3f0;--gray2:#e0dbd4;--topbar:#1c1c1c;
  --font-serif:Georgia,'Times New Roman',serif;
  --font-sans:'Inter','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);color:var(--black);background:var(--white);overflow-x:hidden}
a{text-decoration:none;color:inherit}
[data-lang="en"] .es{display:none!important}
[data-lang="es"] .en{display:none!important}

/* ── TOPBAR / NAV ── */
.topbar{background:var(--topbar);color:var(--white);text-align:center;padding:10px 16px;font-size:13px;letter-spacing:.3px}
.topbar-code{display:inline-block;border:1px solid rgba(255,255,255,.4);border-radius:3px;padding:1px 7px;margin-left:4px;font-family:monospace;font-size:12px;letter-spacing:1px}
.nav{position:sticky;top:0;z-index:900;height:60px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 20px;background:var(--white);border-bottom:1px solid var(--gray2);transition:box-shadow .3s}
.nav.floating{box-shadow:0 2px 20px rgba(0,0,0,.08)}
.nav-left{display:flex;align-items:center;font-size:13px;color:var(--mid)}
.nav-back{display:flex;align-items:center;gap:6px;transition:color .15s}
.nav-back:hover{color:var(--black)}
.nav-logo{display:flex;align-items:center;gap:9px;justify-content:center}
.nav-logo-word{font-family:var(--font-serif);font-size:14px;font-weight:700;letter-spacing:2.5px;color:var(--black);text-transform:uppercase}
.nav-right-slot{display:flex;align-items:center;justify-content:flex-end;gap:2px}
.nav-icon-btn{width:38px;height:38px;border-radius:6px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--black);transition:background .15s}
.nav-icon-btn:hover{background:var(--gray)}

/* ── BRANDING HERO (la página = branding + un botón) ── */
.brand-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;max-width:1200px;margin:0 auto;padding:56px 40px 80px;align-items:center}
.bh-media{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.14)}
.bh-media img{display:block;width:100%;height:auto}
.bh-badge{position:absolute;left:16px;bottom:16px;background:rgba(26,26,26,.88);color:#fff;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;padding:8px 14px;border-radius:24px;backdrop-filter:blur(4px)}
.bh-tag{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--mid);margin-bottom:14px}
.bh-h1{font-family:var(--font-serif);font-size:clamp(30px,3.6vw,48px);font-weight:700;line-height:1.15;margin-bottom:16px}
.bh-stars{color:#e0a92e;font-size:14px;margin-bottom:8px}
.bh-stars b{color:var(--mid);font-weight:400;margin-left:6px;font-size:13px}
.bh-price{font-size:17px;color:var(--mid);margin-bottom:22px}
.bh-price strong{color:var(--black);font-size:22px;font-weight:700;margin-right:6px}
/* descuento por cantidad, junto a la foto */
.bh-packs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.bh-pack{border:1px solid var(--gray2);border-radius:12px;padding:11px 8px 10px;background:#fff;text-align:center;display:flex;flex-direction:column;gap:3px}
.bh-pack b{font-size:12.5px;font-weight:600;color:var(--mid)}
.bh-pack-pct{font-size:20px;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--black)}
.bh-pack-off{font-size:12px;font-weight:600;letter-spacing:0;color:var(--mid);padding:4px 0 3px}
.bh-pack-on{border-color:var(--black);box-shadow:0 8px 22px rgba(0,0,0,.08)}
.bh-packs-note{font-size:12.5px;color:var(--mid);line-height:1.5;margin-bottom:22px}
.bh-packs-note a{color:var(--black);font-weight:600;white-space:nowrap}
@media(max-width:420px){ .bh-packs{gap:6px} .bh-pack{padding:10px 4px 9px} .bh-pack b{font-size:11.5px} .bh-pack-pct{font-size:17px} .bh-pack-off{font-size:11px} }
.bh-bullets{list-style:none;margin-bottom:30px;display:flex;flex-direction:column;gap:10px}
.bh-bullets li{display:flex;align-items:center;gap:10px;font-size:15px;color:#333}
.bh-bullets svg{flex-shrink:0;color:var(--black)}
.bh-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--black);color:#fff;border:none;cursor:pointer;font-size:17px;font-weight:700;padding:18px 44px;border-radius:8px;transition:background .2s,transform .15s;font-family:var(--font-sans)}
.bh-cta:hover{background:#333}
.bh-cta:active{transform:scale(.99)}
.bh-cta-arr{transition:transform .2s}
.bh-cta:hover .bh-cta-arr{transform:translateX(4px)}
.bh-sub{font-size:13px;color:var(--light);margin-top:12px}
.bh-trust{display:flex;gap:22px;margin-top:30px;padding-top:22px;border-top:1px solid var(--gray2)}
.bh-trust-item{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--mid)}
@media(max-width:900px){
  .brand-hero{grid-template-columns:1fr;gap:30px;padding:28px 20px 56px}
  .bh-cta{width:100%}
  .bh-trust{flex-wrap:wrap;gap:14px}
}

/* ── FRANJA DE FORMATOS (menú de distribución por producto) ── */
/* Con 4 pestañas, "Paredes de ensueño" no cabía en la fila y se iba sola a una segunda línea:
   la barra cambiaba de alto según cuál pestaña llevara el móvil más flojo de memoria (daba la
   sensación de que "cambiaba de sitio" al pasar de un producto a otro). Ahora nunca se parte:
   de anchura de sobra hace una fila centrada: si no cabe, se desliza en horizontal, una fila
   siempre, igual en las 4 páginas. */
.fstrip{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:nowrap;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:10px 16px;background:var(--gray);border-bottom:1px solid var(--gray2);font-size:12.5px}
.fstrip::-webkit-scrollbar{display:none}
.fstrip a{padding:6px 14px;border-radius:20px;border:1.5px solid transparent;color:var(--mid);
  font-weight:600;white-space:nowrap;flex:0 0 auto;transition:border-color .15s,color .15s,background .15s}
.fstrip a:hover{color:var(--black);border-color:var(--gray2)}
.fstrip a[aria-current="page"]{background:var(--black);color:#fff}

/* ── CROSS-SELL AL PIE ── */
.otherfmt{max-width:900px;margin:0 auto;padding:56px 40px 72px;text-align:center}
.otherfmt h2{font-family:var(--font-serif);font-size:clamp(20px,2.4vw,28px);font-weight:700;margin-bottom:22px}
.otherfmt-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.otherfmt-card{border:1px solid var(--gray2);border-radius:14px;padding:22px;transition:box-shadow .2s,transform .2s;background:#fff}
.otherfmt-card:hover{box-shadow:0 14px 40px rgba(0,0,0,.10);transform:translateY(-3px)}
.otherfmt-card b{display:block;font-size:15px;margin-bottom:4px}
.otherfmt-card span{font-size:12.5px;color:var(--mid)}
.pdp-foot{background:#080808;color:#fff;text-align:center;padding:34px 20px;font-size:12px;opacity:.9}
.pdp-foot a{color:#fff;opacity:.6}.pdp-foot a:hover{opacity:1}
@media(max-width:640px){ .otherfmt{padding:44px 20px 56px} .otherfmt-grid{grid-template-columns:1fr} }

/* ── GUÍA DE TALLAS A ESCALA ── */
.sizes-section{max-width:1100px;margin:0 auto;padding:64px 40px 8px;text-align:center}
.sizes-section h2{font-family:var(--font-serif);font-size:clamp(22px,2.6vw,30px);font-weight:700;margin-bottom:10px}
.sg-lead{font-size:14px;color:var(--mid);max-width:560px;margin:0 auto 26px;line-height:1.55}
.sg-wrap{border-radius:16px;overflow:hidden;border:1px solid var(--gray2)}
.sg-svg{display:block;width:100%;height:auto}
.sg-svg text{font-family:var(--font-sans);font-size:30px;font-weight:700}
.sg-svg .sg-dim{font-size:16px;font-weight:500;fill:#8a7f70}
.sg-svg .sg-own rect{fill:#1a1a1a}
.sg-svg .sg-own text{fill:#fff}
.sg-svg .sg-other rect{fill:#fff;stroke:#9a8f80;stroke-width:2;stroke-dasharray:6 5}
.sg-svg .sg-other text{fill:#9a8f80}
.sg-legend{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.sg-legend li{display:flex;align-items:center;gap:8px;border:1px solid var(--gray2);border-radius:24px;padding:7px 14px 7px 8px;font-size:12.5px;color:var(--mid);background:#fff}
.sg-legend li b{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;border-radius:13px;background:var(--gray);color:var(--black);font-size:11px;padding:0 6px}
.sg-legend li.sg-own{border-color:var(--black);color:var(--black)}
.sg-legend li.sg-own b{background:var(--black);color:#fff}
@media(max-width:820px){ .sizes-section{padding:48px 20px 4px} .sg-svg text{font-size:38px} .sg-legend li{font-size:12px} }


/* ══════════════════════════════════════════════════════════════════════════
   BLOQUES DE FICHA AÑADIDOS EL 21-SEP-2026 (estructura pedida por el socio)
   combinaciones · paso a paso · colgado · aluminio vs marco · paredes · FAQ
   ══════════════════════════════════════════════════════════════════════════ */
.pk-section,.pp-section,.hg-section,.vs-section,.wl-section,.rv-section,.fq-section{
  max-width:1100px;margin:0 auto;padding:64px 40px 8px;text-align:center}
.pk-section h2,.pp-section h2,.hg-section h2,.vs-section h2,.wl-section h2,.rv-section h2,.fq-section h2{
  font-family:var(--font-serif);font-size:clamp(22px,2.6vw,30px);font-weight:700;margin-bottom:10px}
.pk-lead,.hg-lead,.wl-lead{font-size:14px;color:var(--mid);max-width:620px;margin:0 auto 28px;line-height:1.6}

/* ── combinaciones 2 · 3 · 4 ── */
.pk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:left}
.pk-card{position:relative;border:1px solid var(--gray2);border-radius:14px;padding:20px 18px 18px;background:#fff;display:flex;flex-direction:column;gap:4px}
.pk-card-on{border-color:var(--black);box-shadow:0 12px 34px rgba(0,0,0,.09)}
.pk-badge{position:absolute;top:-10px;left:18px;background:var(--black);color:#fff;font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;border-radius:20px;padding:4px 10px}
.pk-card b{font-size:15px}
.pk-pct{font-size:26px;font-weight:800;line-height:1.1;letter-spacing:-.02em}
.pk-pct-off{font-size:14px;font-weight:600;color:var(--mid);padding:6px 0 5px}
.pk-price{font-size:14.5px;font-weight:700;margin-top:2px}
.pk-note{font-size:12.5px;color:var(--mid);line-height:1.5}
.pk-ship{display:inline-flex;align-items:center;gap:9px;margin:22px auto 0;border:1px solid var(--gray2);border-radius:26px;
  padding:10px 18px;font-size:13.5px;color:#333;background:var(--gray)}
.pk-cta{display:block;width:fit-content;margin:18px auto 0;font-size:13.5px;font-weight:700;color:var(--black);
  text-decoration:underline;text-underline-offset:4px}
@media(max-width:900px){
  .pk-section,.pp-section,.hg-section,.vs-section,.wl-section,.rv-section,.fq-section{padding:48px 20px 4px}
  .pk-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .pk-card{padding:18px 14px 14px}
  .pk-pct{font-size:22px}
  .pk-ship{font-size:12.5px;padding:9px 14px;text-align:left}
}

/* ── paso a paso ── */
.pp-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:left;margin-top:28px}
.pp-grid li{position:relative;display:flex;flex-direction:column}
.pp-n{position:absolute;top:10px;left:10px;z-index:2;width:24px;height:24px;border-radius:50%;background:rgba(26,26,26,.88);
  color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.pp-media{border-radius:12px;overflow:hidden;background:var(--gray);aspect-ratio:4/3;border:1px solid var(--gray2)}
.pp-media img{width:100%;height:100%;object-fit:cover;display:block}
.pp-grid b{font-size:14.5px;margin:12px 0 3px}
.pp-grid li>span:not(.pp-n){font-size:12.5px;color:var(--mid);line-height:1.5}
@media(max-width:900px){
  .pp-grid{grid-template-columns:1fr;gap:14px}
  .pp-grid li{display:grid;grid-template-columns:96px 1fr;column-gap:14px;align-items:center}
  .pp-media{grid-row:1 / span 2;aspect-ratio:1/1}
  .pp-grid b{margin:0 0 3px;align-self:end}
  .pp-grid li>span:not(.pp-n){align-self:start}
  .pp-n{width:21px;height:21px;font-size:11px;top:6px;left:6px}
}

/* ── colgado: las cuatro viñetas ── */
.hang-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:left}
.hang-steps li{background:#fff;border:1px solid var(--gray2);border-radius:14px;padding:16px 16px 18px}
.hang-steps svg{width:100%;height:auto;display:block;border-radius:8px;margin-bottom:12px}
.hang-steps b{display:block;font-size:14px;margin-bottom:4px}
.hang-steps li>span{font-size:12.5px;color:var(--mid);line-height:1.5}
@media(max-width:900px){ .hang-steps{grid-template-columns:repeat(2,1fr);gap:10px} .hang-steps li{padding:12px 12px 14px} .hang-steps b{font-size:13px} }

/* ── aluminio vs marco ── */
.vs-photo{border-radius:14px;overflow:hidden;background:var(--gray);margin-top:22px}
.vs-photo img{width:100%;height:auto;display:block}
.vs-table{width:100%;border-collapse:collapse;margin-top:22px;border:1px solid var(--gray2);border-radius:14px;overflow:hidden;font-size:13.5px}
.vs-table th,.vs-table td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--gray2)}
.vs-table thead th{background:var(--gray);font-size:12.5px;font-weight:700}
.vs-table .vs-th-on{background:var(--black);color:#fff}
.vs-table tbody tr:last-child th,.vs-table tbody tr:last-child td{border-bottom:none}
.vs-table td:first-child{color:var(--mid)}
.vs-table td:last-child{background:#fbfaf8}
@media(max-width:640px){ .vs-table{font-size:12.5px} .vs-table th,.vs-table td{padding:10px 9px} }

/* ── paredes de ensueño ── */
.wl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}
.wl-card{display:flex;flex-direction:column;border:1px solid var(--gray2);border-radius:14px;overflow:hidden;background:#fff;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.wl-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.11)}
.wl-card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.wl-card b{font-size:15px;padding:13px 16px 2px}
.wl-card>span{font-size:12.5px;color:var(--mid);padding:0 16px 15px}
.wl-card s{color:var(--light)}
.wl-more{display:block;width:fit-content;margin:20px auto 0;font-size:13.5px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
@media(max-width:900px){ .wl-grid{grid-template-columns:1fr} }

/* ── reseñas y FAQ ── */
.rv-section p{font-size:14px;color:var(--mid);line-height:1.7;max-width:640px;margin:0 auto}
.rv-section a{text-decoration:underline}
.fq-list{max-width:760px;margin:22px auto 0;text-align:left;border-top:1px solid var(--gray2)}
.fq-item{border-bottom:1px solid var(--gray2)}
.fq-item summary{list-style:none;cursor:pointer;padding:17px 34px 17px 0;font-size:14.5px;font-weight:600;position:relative}
.fq-item summary::-webkit-details-marker{display:none}
.fq-item summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:20px;font-weight:400;color:var(--mid)}
.fq-item[open] summary::after{content:"\2212"}
.fq-item p{font-size:13.5px;color:var(--mid);line-height:1.7;padding:0 34px 18px 0}