:root {
  --bg: #FBF5EC;
  --text: #3D3128;
  --text-soft: #6B5D52;
  --text-softer: #9A8B7B;
  --border: #EBE0D2;
  --border-strong: #DED2C2;
  --card: #FFFFFF;
  --accent: #7D65A6;
  --accent-pastel: #C7B7E8;
  --gradient: linear-gradient(135deg, #F2A8BE 0%, #F0B8C8 22%, #F0C851 42%, #A9DDB0 60%, #8FBBE0 78%, #B39DDB 100%);
}

* { box-sizing: border-box; }
img { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; user-drag: none; pointer-events: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Karla, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text); }
h1, h2, h3, .brand { font-family: Fraunces, Georgia, serif; font-weight: 560; }

.header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 32px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg); z-index: 10;
}
.brand-mark {
  display: flex; align-items: center; gap: 12px;
}
.brand-logo {
  width: 38px; height: 38px; border-radius: 11px; background: var(--gradient);
  display: flex; align-items: center; justify-content: center; flex: none;
  color: #FFFDF9; font-family: 'Arial Rounded MT Bold', ui-rounded, 'SF Pro Rounded', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif; font-weight: 700; font-size: 19px;
}
.brand-name { font-size: 22px; line-height: 1; }
.brand-tag { font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; color: #B08C93; margin-top: 2px; }
.nav { display: flex; gap: 28px; align-items: center; font-size: 15px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border-radius:10px; border: none; cursor: pointer;
  font-family: Karla, sans-serif; font-weight: 600; font-size: 15px; letter-spacing:.01em;
  background: var(--accent); color: #FFFDF9;
}
.btn:hover { opacity: 0.9; color: #FFFDF9; }
.btn.secondary { background: transparent; border: 1px solid var(--text); color: var(--text); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.pill {
  padding: 9px 18px; border-radius:10px; border: 1px solid var(--border-strong);
  color: var(--text-soft); font-family: Karla, sans-serif; font-weight: 500; font-size: 14px; cursor: pointer;
  background: none;
}
.pill.active { border: 2px solid var(--text); color: var(--text); }

.container { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
.section { padding: 56px 32px; border-bottom: 1px solid var(--border); }

.hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  padding: 64px 32px;
}
.hero h1 { font-size: 42px; margin: 0 0 16px; }
.hero p { color: var(--text-soft); font-size: 17px; line-height: 1.6; }

.grid-categorias {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;
}
.card-categoria {
  border: 1px solid var(--border); border-radius:12px; overflow: hidden; background: var(--card);
  display: block; color: var(--text);
}
.card-categoria img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.card-categoria .info { padding: 14px 16px; }
.card-categoria .info strong { font-family: Fraunces, Georgia, serif; font-weight: 560; }

.grid-productos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px;
}
.card-producto {
  border: 1px solid var(--border); border-radius:12px; overflow: hidden; background: var(--card);
  display: flex; flex-direction: column;
}
.card-producto img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: var(--border); }
.card-producto .info { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-producto .precio { font-family: Fraunces, Georgia, serif; font-weight: 560; font-size: 20px; }
.card-producto .stock-agotado { color: var(--accent); font-size: 13px; }

.configurador {
  display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border);
  border-radius:14px; overflow: hidden; background: var(--card); min-height: 420px;
}
.configurador .panel { padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.configurador .preview {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 32px 20px; min-height: 260px;
  background: radial-gradient(120% 90% at 50% 26%, #F7EBD4 0%, #EEE0C5 70%, #E7D7B8 100%);
  transition: background .3s ease;
}
.configurador .preview--glossy {
  background: radial-gradient(120% 90% at 50% 20%, #FCF3DE 0%, #EADCBE 62%, #DECFAE 100%);
}
.configurador .preview--glossy::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 32%);
}
.preview-word {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; z-index: 1;
}
.preview-tag {
  z-index: 1; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #9A8B7B; background: rgba(255,253,249,0.7); padding: 5px 12px; border-radius:10px;
}
.letra-preview {
  font-family: Fredoka, sans-serif; font-weight: 700; font-size: 58px; line-height: 1.05; cursor: pointer;
}
.configurador { align-items: start; }
.configurador .preview { align-self: stretch; min-height: 380px; }
.configurador .preview--3d-on {
  align-self: start; aspect-ratio: 1 / 1; height: auto; min-height: 0;
  position: sticky; top: 88px;
}
.preview-3d {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.preview--3d-on .preview-3d { opacity: 1; pointer-events: auto; }
.preview--3d-on .preview-word { display: none; }
.preview-hint3d {
  position: absolute; bottom: 12px; right: 14px; z-index: 2; display: none;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #9A8B7B;
  background: rgba(255,253,249,0.72); padding: 4px 10px; border-radius:10px; pointer-events: none;
}
.preview--3d-on .preview-hint3d { display: block; }
.preview--3d-on.preview--wall .preview-hint3d { display: none; }
.preview-hintwall {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: none; white-space: nowrap;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #7A6B5F;
  background: rgba(255,253,249,0.82); padding: 4px 12px; border-radius:10px; pointer-events: none;
}
.preview--3d-on.preview--wall .preview-hintwall { display: block; }
.preview--3d-on.preview--wall .preview-3d { cursor: grab; }
.preview--3d-on .preview-tag { position: absolute; bottom: 12px; left: 14px; z-index: 2; }

.preview-modes {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: none; gap: 3px; padding: 3px; border-radius:10px;
  background: rgba(255,253,249,0.82); box-shadow: 0 4px 14px rgba(59,50,44,0.12);
}
.preview--3d-on .preview-modes { display: flex; }
.preview-modes button {
  border: 0; background: none; cursor: pointer; font-family: Karla, sans-serif; font-weight: 500;
  font-size: 12px; color: var(--text-soft); padding: 6px 13px; border-radius:10px;
}
.preview-modes button.active { background: var(--text); color: var(--bg); }
.preview-wall-change {
  position: absolute; bottom: 12px; right: 14px; z-index: 3;
  border: 0; cursor: pointer; font-family: Karla, sans-serif; font-weight: 500; font-size: 11px;
  color: var(--text); background: rgba(255,253,249,0.85); padding: 5px 12px; border-radius:10px;
}
.preview--wall { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
.preview--wall::before { display: none; }
.campo-hint { margin: 6px 0 0; font-size: 12px; color: var(--text-softer); }

.acabado-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acabado-opt {
  display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  padding: 12px 14px; border-radius:10px; border: 1px solid var(--border-strong); background: none;
}
.acabado-opt.active { border: 2px solid var(--text); background: #FBF5EC; padding: 11px 13px; }
.acabado-nombre { font-family: Fraunces, Georgia, serif; font-weight: 560; font-size: 15px; color: var(--text); }
.acabado-desc { font-size: 11.5px; line-height: 1.35; color: var(--text-softer); }

.paletas { display: flex; flex-wrap: wrap; gap: 8px; }
.paleta-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 12px 6px 8px; border-radius:10px; border: 1px solid var(--border-strong);
  background: none; font-family: Karla, sans-serif; font-weight: 500; font-size: 13px; color: var(--text-soft);
}
.paleta-btn.active { border: 2px solid var(--text); color: var(--text); padding: 5px 11px 5px 7px; }
.figuras-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.figura-btn {
  cursor: pointer; padding: 7px 14px; border-radius:10px; border: 1px solid var(--border-strong);
  background: none; font-family: Karla, sans-serif; font-weight: 500; font-size: 13px; color: var(--text-soft);
}
.figura-btn.active { border: 2px solid var(--text); color: var(--text); padding: 6px 13px; }
.figura-color {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap;
}
.figura-color > span { font-size: 12px; color: var(--text-soft); min-width: 54px; }
.figura-color .tonos { gap: 6px; }
.figura-color .tono { width: 22px; height: 22px; }

.paleta-sw { display: inline-flex; }
.paleta-sw i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid #FFFDF9; margin-left: -5px; }
.paleta-sw i:first-child { margin-left: 0; }
.campo label { display: block; font-size: 13px; color: var(--text-soft); margin-bottom: 8px; }
.campo input[type=text] {
  border: 1px solid var(--border-strong); border-radius: 14px; padding: 14px 16px;
  font-family: Karla, sans-serif; font-weight: 500; font-size: 20px; color: var(--text); background: var(--bg);
  outline: none; width: 100%;
}
.fila-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.tonos { display: flex; gap: 8px; flex-wrap: wrap; }
.tono {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
  position: relative;
  box-shadow: 0 6px 14px -7px rgba(61,49,40,.4), inset 0 0 0 1px rgba(0,0,0,.08);
}
.tono.active { border-color: var(--text); }
#armar-letras.fila-pills { gap: 8px; margin-bottom: 12px; }
.chip-letra {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: Karla, sans-serif; font-weight: 600; font-size: 13px; cursor: pointer; border: 1px solid var(--border-strong);
}
.chip-letra.active { border: 2px solid var(--text); }
.resumen {
  display: flex; align-items: baseline; justify-content: space-between; padding-top: 8px;
  border-top: 1px solid var(--border);
}
.resumen .total { font-family: Fraunces, Georgia, serif; font-weight: 560; font-size: 24px; }

.cart-row {
  display: flex; gap: 18px; padding: 20px; align-items: flex-start;
  background: #FFFDF9; border: 1px solid var(--border); border-radius: 18px;
}
.cart-row img { width: 84px; height: 84px; object-fit: cover; border-radius: 14px; background: var(--border); flex: none; }
.cart-row .grow { flex: 1; min-width: 0; }
.cart-row .grow strong { font-family: Fraunces, Georgia, serif; font-weight: 560; font-size: 17px; }
.cart-row .side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.cart-row .qty { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border-strong); border-radius: 999px; padding: 4px 6px; }
.cart-row .qty span { min-width: 16px; text-align: center; font-weight: 600; font-size: 14px; }
.cart-row .qty button {
  width: 26px; height: 26px; border-radius: 50%; border: none; background: var(--bg); color: var(--text);
  cursor: pointer; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.cart-row .qty button:hover { background: var(--border); }
.cart-row .quitar {
  font-size: 12.5px; color: var(--text-softer); border: none; background: none; cursor: pointer;
  font-family: Karla, sans-serif; padding: 0;
}
.cart-row .quitar:hover { color: var(--text); text-decoration: underline; }
.cart-summary {
  background: #FFFDF9; border: 1px solid var(--border); border-radius: 18px; padding: 22px 24px;
  display: flex; align-items: baseline; justify-content: space-between;
}
.cart-summary .label { font-size: 14px; color: var(--text-soft); }
.cart-summary .total { font-family: Fraunces, Georgia, serif; font-weight: 560; font-size: 26px; }
.cart-empty {
  text-align: center; background: #FFFDF9; border: 1px solid var(--border); border-radius: 18px;
  padding: 56px 32px; display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.cart-empty p { margin: 0; color: var(--text-soft); font-size: 15px; }

.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-field label { font-size: 13px; color: var(--text-soft); }
.form-field input, .form-field textarea {
  border: 1px solid var(--border-strong); border-radius: 12px; padding: 12px 14px;
  font-family: Karla, sans-serif; font-size: 15px; background: var(--card); color: var(--text);
}

.footer { padding: 32px; text-align: center; color: var(--text-softer); font-size: 13px; }
.badge-cart {
  background: var(--text); color: var(--bg); border-radius:10px; font-size: 11px;
  padding: 2px 7px; margin-left: 4px;
}
.estado-msg { text-align: center; padding: 80px 32px; }
.estado-msg h1 { font-size: 32px; }

@media (max-width: 720px) {
  .hero, .configurador { grid-template-columns: 1fr; }
  .nav { display: none; }
  .configurador .preview { order: -1; }
  .configurador .preview--3d-on {
    /* relative, no sticky: pero SIEMPRE positioned -> si no, .preview-3d
       (position:absolute) se escapa del contenedor y flota sobre toda la
       página (bug visto en mobile) */
    position: relative; height: 340px; top: auto;
  }
}

/* ============================================================
   Shared "lena & mond" design system (home + product pages)
   ============================================================ */
/* Abecedario propio de lena & mond (el que Iris trazó para la impresión 3D,
   estilo "Elli"). Solo mayúsculas A-Z. Se usa en la opción "Spaghetti" del
   configurador "Arma tu nombre". */
@font-face {
  font-family: 'Alfabeto Elli';
  src: url('../fonts/AlfabetoElli.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
/* Silueta del set "Bubble Letters Wall Art" que lena & mond imprime — para la
   opción "Bubble" del configurador. Solo A-Z. */
@font-face {
  font-family: 'Bubble LM';
  src: url('../fonts/BubbleLM.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
.lm { background:#FBF5EC; color:#3D3128; font-family:Karla, sans-serif; -webkit-font-smoothing:antialiased; }
.lm a { color:#C97B84; }
.lm a:hover { color:#3D3128; }
.lm a.btn, .lm a.btn:hover { color:#FFFDF9; }
.lm a.btn.secondary, .lm a.btn.secondary:hover { color: var(--text); }
.lm section[id], .lm [id].lm-anchor { scroll-margin-top:96px; }
.lm-sec { padding:112px 64px; border-bottom:1px solid #EBE0D2; }
.lm-sec--cream { background:#FFFDF9; }
.lm-head { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; margin-bottom:56px; }
.lm-eyebrow { font-size:12px; letter-spacing:0.24em; text-transform:uppercase; color:#B5A493; }
.lm-h2 { margin:0; font-family:Fraunces, Georgia, serif; font-weight:560; font-size:38px; color:#3D3128; }
.lm-head p { margin:0; max-width:520px; font-size:16px; line-height:1.6; color:#7A6B5F; }
.lm-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.lm-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.lm-grid-6 { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }

.lm-header { display:flex; flex-direction:row; align-items:center; gap:40px; padding:22px 64px; border-bottom:1px solid #EBE0D2; position:sticky; top:0; z-index:20; background:#FFFDF9; }
.lm-brand { display:flex; align-items:center; gap:12px; color:inherit; margin-right:auto; }
.lm-brand-lockup { height:38px; width:auto; flex:none; display:block; object-fit:contain; }
.lm-brand-tag { font-size:9px; letter-spacing:0.32em; text-transform:uppercase; color:#3D3128; margin-top:2px; }
.lm-nav { display:flex; gap:52px; font-size:15px; align-items:center; white-space:nowrap; }
.lm-nav a { white-space:nowrap; }
.lm-nav a { color:#4A3F37; }
.lm-nav-cart { display:inline-flex; align-items:center; gap:4px; }

/* "Productos" en el nav de escritorio: menú desplegable al pasar el mouse */
.lm-nav-item { position:relative; }
.lm-nav-item > a { display:inline-flex; align-items:center; gap:5px; }
.lm-nav-caret { transition:transform .18s ease; opacity:.7; }
.lm-nav-item:hover .lm-nav-caret, .lm-nav-item:focus-within .lm-nav-caret { transform:rotate(180deg); }
.lm-nav-menu { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(10px); min-width:196px; background:#FFFDF9; border:1px solid #EBE0D2; border-radius:10px; padding:8px; display:flex; flex-direction:column; gap:1px; box-shadow:0 14px 36px rgba(59,50,44,0.14); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .16s ease, transform .16s ease; z-index:40; }
.lm-nav-menu::before { content:""; position:absolute; left:0; right:0; top:-14px; height:16px; }
.lm-nav-item:hover .lm-nav-menu, .lm-nav-item:focus-within .lm-nav-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(6px); }
.lm-nav-menu a { display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:10px; font-size:14px; color:#4A3F37; white-space:nowrap; }
.lm-nav-menu a:hover { background:#F4EEE4; color:#3D3128; }
.lm-nav-menu-num { display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; border-radius:50%; background:#F4EEE4; color:#9A8B7B; font-size:11px; font-weight:600; flex:none; }
.lm-nav-menu-all { margin-top:5px; padding-top:14px !important; border-top:1px solid #EBE0D2; font-weight:600; color:#3D3128 !important; }
.lm-nav-menu-soon { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 14px; border-radius:10px; font-size:14px; color:#B4A99A; white-space:nowrap; cursor:default; }
.lm-nav-menu-soon em { font-style:normal; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:#C7BCAD; }
.lm-cta { display:inline-block; padding:12px 26px; border-radius:10px; background:#3D3128; color:#FBF5EC; font-family:Karla, sans-serif; font-weight:600; font-size:14px; letter-spacing:.02em; white-space:nowrap; }
.lm-cta:hover { color:#FBF5EC; opacity:.92; }
.lm-deco { display:block; }

/* cart icon: right side on every breakpoint. hamburger: mobile only. */
.lm-icon-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; color:#3D3128; flex:none; }
.lm-icon-btn .badge-dot { position:absolute; top:3px; right:1px; min-width:16px; height:16px; padding:0 4px; border-radius:10px; background:var(--accent); color:#FFFDF9; font-family:Karla, sans-serif; font-weight:600; font-size:10px; line-height:16px; text-align:center; }
.lm-hamburger { display:none; width:42px; height:42px; border-radius:12px; border:1px solid #DED2C2; background:#FFFDF9; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; padding:0; flex:none; }
.lm-hamburger span { width:17px; height:2px; background:#3D3128; border-radius:1px; display:block; }

.lm-drawer { position:fixed; inset:0; z-index:60; background:#FBF5EC; display:flex; flex-direction:column; padding:20px 24px 32px; transform:translateX(100%); transition:transform .25s ease; visibility:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.lm-drawer.open { transform:none; visibility:visible; }
.lm-drawer-top { display:flex; align-items:center; justify-content:space-between; }
.lm-drawer-close { width:42px; height:42px; border-radius:12px; border:1px solid #DED2C2; background:#FFFDF9; font-size:22px; line-height:1; color:#3D3128; cursor:pointer; }
.lm-drawer-nav { display:flex; flex-direction:column; gap:22px; margin-top:44px; font-family:Fraunces, Georgia, serif; font-weight:500; font-size:24px; flex:none; }
.lm-drawer-nav a { color:#3D3128; }
.lm-drawer-cta { margin-top:auto; text-align:center; font-size:17px; padding:16px; flex:none; color:#FBF5EC !important; }
.lm-drawer-group { display:flex; flex-direction:column; flex:none; }
.lm-drawer-sub-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:0; border:0; background:none; cursor:pointer; font-family:Fraunces, Georgia, serif; font-weight:500; font-size:24px; color:#3D3128; text-align:left; }
.lm-drawer-chev { flex:none; transition:transform .2s ease; }
.lm-drawer-group.open .lm-drawer-chev { transform:rotate(180deg); }
.lm-drawer-sub { max-height:0; overflow:hidden; transition:max-height .28s ease; flex:none; }
.lm-drawer-group.open .lm-drawer-sub { max-height:70vh; }
.lm-drawer-sub-inner { display:flex; flex-direction:column; gap:16px; padding-top:18px; }
.lm-drawer-sub a { font-size:18px; color:#6E6055; padding-left:2px; }
.lm-drawer-sub .lm-drawer-soon { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:18px; color:#B4A99A; padding-left:2px; cursor:default; }
.lm-drawer-sub .lm-drawer-soon em { font-style:normal; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#C7BCAD; }

.lm-footer { padding:64px; background:#FBF5EC; color:#3D3128; border-top:1px solid #EBE0D2; }
.lm-foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.lm-footer .col { display:flex; flex-direction:column; gap:12px; font-size:14px; color:#6B5D52; }
.lm-footer .col a { color:#6B5D52; }
.lm-footer .col a:hover { color:#3D3128; }
.lm-footer .col .h { font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:#3D3128; font-weight:700; margin-bottom:6px; }
/* ---- Product detail page ---- */
.pdp-crumbs { padding:20px 64px; font-size:13px; color:#9A8B7B; background:#FFFDF9; }
.pdp-crumbs a { color:#9A8B7B; }
.pdp-crumbs .here { color:#4A3F37; }
.pdp-main { padding:36px 64px 88px; display:grid; grid-template-columns:1fr 1fr; gap:64px; border-bottom:1px solid #EBE0D2; align-items:start; }
.pdp-gallery { display:flex; flex-direction:column; gap:16px; min-width:0; }
.pdp-hero-img { border-radius:12px; overflow:hidden; border:1px solid #EFE5D8; height:460px; background:#FFFDF9; display:flex; align-items:center; justify-content:center; }
.pdp-hero-img img { width:100%; height:100%; object-fit:contain; display:block; }
.pdp-hero-img.cover img { object-fit:cover; }
.pdp-thumbs { display:grid; gap:10px; }
.pdp-thumb { border-radius:12px; overflow:hidden; border:1px solid #EFE5D8; height:78px; cursor:pointer; background:#FFFDF9; display:flex; align-items:center; justify-content:center; }
.pdp-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.pdp-thumbs--contain .pdp-thumb { background:#FBF5EC; }
.pdp-thumbs--contain .pdp-thumb img { object-fit:contain; padding:4px; }
.pdp-thumb.active { border:2px solid #3D3128; }
.pdp-info { display:flex; flex-direction:column; gap:22px; min-width:0; }
.pdp-info h1 { margin:0; font-family:Fraunces, Georgia, serif; font-weight:560; font-size:42px; color:#3D3128; line-height:1.05; }
.pdp-lede { margin:0; font-size:16px; line-height:1.6; color:#6B5D52; max-width:460px; }
.pdp-field { display:flex; flex-direction:column; gap:10px; }
.pdp-field > label { font-size:13px; color:#7A6B5F; }
.pdp-opts { display:flex; gap:10px; flex-wrap:wrap; }
.pdp-opt { padding:9px 16px; border-radius:10px; border:1px solid #DED2C2; font-family:Karla, sans-serif; font-weight:500; font-size:14px; color:#6B5D52; cursor:pointer; background:none; display:flex; flex-direction:column; align-items:center; line-height:1.3; }
.pdp-opt small { font-size:11px; color:#9A8B7B; }
.pdp-opt.active { border:2px solid #3D3128; color:#3D3128; }
.pdp-swatches { display:flex; gap:8px; flex-wrap:wrap; }
.pdp-swatch {
  width:30px; height:30px; border-radius:50%; cursor:pointer; border:2px solid transparent; padding:0;
  position: relative;
  box-shadow: 0 6px 14px -7px rgba(61,49,40,.4), inset 0 0 0 1px rgba(0,0,0,.08);
}
.pdp-swatch.active { border:2px solid #3D3128; }
.pdp-priceline { display:flex; align-items:baseline; justify-content:space-between; padding-top:8px; border-top:1px solid #EFE5D8; gap:12px; }
.pdp-priceline .sub { font-size:14px; color:#7A6B5F; }
.pdp-priceline .price { font-family:Fraunces, Georgia, serif; font-weight:560; font-size:24px; color:#3D3128; }
.pdp-add { text-align:center; padding:16px; border-radius:10px; background:#3D3128; color:#FBF5EC; font-family:Karla, sans-serif; font-weight:600; font-size:15px; letter-spacing:.01em; border:none; cursor:pointer; width:100%; }
.pdp-add:hover { color:#FBF5EC; opacity:.92; }
.pdp-add:disabled { opacity:.45; cursor:not-allowed; }
.pdp-note { margin:0; font-size:12px; color:#9A8B7B; line-height:1.5; }
.pdp-specs { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; padding-top:16px; border-top:1px solid #EFE5D8; }
.pdp-specs .k { font-family:Karla, sans-serif; font-weight:600; font-size:14px; }
.pdp-specs .v { font-size:12px; color:#7A6B5F; }
.pdp-extra { padding:64px; display:flex; flex-direction:column; gap:32px; }
.pdp-extra h2 { margin:0; font-family:Fraunces, Georgia, serif; font-weight:560; font-size:26px; color:#3D3128; }
.pdp-toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:#3D3128; color:#FBF5EC; padding:14px 22px; border-radius:10px; font-family:Karla, sans-serif; font-weight:500; font-size:14px; box-shadow:0 8px 30px rgba(59,50,44,.25); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:1000; }
.pdp-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:900px) {
  .lm-sec, .pdp-extra { padding:44px 22px; }
  .lm section[id], .lm [id].lm-anchor { scroll-margin-top:80px; }
  .lm-header { padding:14px 20px; gap:12px; }
  .pdp-crumbs { padding-left:20px; padding-right:20px; }
  .lm-nav { display:none; }
  .lm-hamburger { display:flex; }
  .lm-deco { display:none; }
  .lm-grid-3, .lm-grid-4 { grid-template-columns:1fr 1fr; }
  .lm-grid-6 { grid-template-columns:repeat(3,1fr); gap:12px; }
  .lm-foot-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .lm-footer { padding:48px 24px; }
  .lm-hero-grid { grid-template-columns:1fr !important; }
  .lm-hero-grid > div:first-child { padding:36px 20px 32px !important; }
  .lm-hero-img { height:280px !important; aspect-ratio:auto !important; }
  .lm-split { grid-template-columns:1fr !important; padding:44px 20px !important; gap:24px !important; }
  .lm-nosotras-img { height:340px !important; }
  .lm-split--photo { padding:0 !important; }
  .lm-split--photo .lm-hero-img { order:-1; height:260px !important; }
  #porque-lena-img { object-position:center 45% !important; }
  .lm-split--photo > div:not(.lm-hero-img) { padding:32px 20px 40px !important; max-width:none !important; }
  .lm-h2, .lm-hero h1 { font-size:28px !important; }
  .pdp-main { grid-template-columns:1fr; gap:28px; padding:20px 20px 64px; }
  .pdp-hero-img { height:auto; aspect-ratio:1/1; }
  .pdp-info h1 { font-size:30px; }
  .pdp-specs { grid-template-columns:1fr; }
  .pdp-extra { padding:48px 20px; }
}
@media (max-width:520px) {
  .lm-grid-3, .lm-grid-4 { grid-template-columns:1fr 1fr; }
  .lm-foot-grid { grid-template-columns:1fr; }
  .lm-hero h1 { font-size:26px !important; }
  .pdp-extra .lm-grid-6 { grid-template-columns:1fr 1fr !important; }
}

#lm-whatsapp {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  width: 56px; height: 56px; border-radius: 50%; background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px -6px rgba(37,211,102,0.55);
  transition: transform .15s ease;
}
#lm-whatsapp:hover { transform: scale(1.06); }
@media (max-width: 520px) {
  #lm-whatsapp { right: 16px; bottom: 16px; width: 50px; height: 50px; }
}

#lm-popup-descuento { position: fixed; inset: 0; z-index: 80; }
.lm-popup-overlay { position: absolute; inset: 0; background: rgba(61,49,40,0.45); animation: lm-popup-fade .25s ease; }
.lm-popup-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(400px, calc(100vw - 32px)); background: var(--card); border-radius: 22px;
  box-shadow: 0 24px 60px -16px rgba(61,49,40,0.35); animation: lm-popup-pop .3s ease;
}
.lm-popup-body { padding: 40px 32px 32px; text-align: center; }
.lm-popup-close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  border: none; background: var(--bg); color: var(--text-soft); font-size: 20px; line-height: 1;
  cursor: pointer;
}
.lm-popup-close:hover { background: var(--border); }
.lm-popup-eyebrow { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #B08C93; margin-bottom: 10px; }
.lm-popup-title { margin: 0 0 10px; font-family: Fraunces, Georgia, serif; font-weight: 560; font-size: 24px; color: var(--text); text-wrap: balance; }
.lm-popup-text { margin: 0 0 20px; font-size: 14.5px; line-height: 1.6; color: var(--text-soft); }
.lm-popup-form { display: flex; flex-direction: column; gap: 10px; }
.lm-popup-input {
  padding: 13px 16px; border-radius: 12px; border: 1px solid var(--border-strong);
  font-size: 15px; font-family: Karla, sans-serif; background: var(--bg); color: var(--text);
}
.lm-popup-input:focus { outline: 2px solid var(--accent-pastel); outline-offset: 1px; }
.lm-popup-submit {
  padding: 13px; border-radius: 12px; border: none; background: var(--accent); color: #FFFDF9;
  font-family: Karla, sans-serif; font-weight: 600; font-size: 15px; cursor: pointer;
}
.lm-popup-submit:disabled { opacity: 0.6; cursor: default; }
.lm-popup-msg { margin: 10px 0 0; font-size: 13px; color: #C0394A; min-height: 16px; }
.lm-popup-code {
  margin: 4px 0 16px; padding: 14px; border-radius: 12px; border: 1.5px dashed var(--accent-pastel);
  font-family: Karla, sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 0.08em; color: var(--accent);
}
@keyframes lm-popup-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lm-popup-pop { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
