/* Ficha de producto — sistema de diseño delmare */

.dm-page{background:#fff}
/* En temas de bloques la ficha se marca «alignwide»; se le da además un
   ancho máximo propio para que la maqueta de dos columnas respire. */
.dm-produkt.alignwide{width:100%;max-width:1240px;margin-inline:auto}
.dm-wrap{max-width:1240px;margin:0 auto;padding:clamp(28px,5vw,64px) clamp(20px,5vw,64px)}

.dm-produkt{
  --brand:#B82105; --brand-deep:#8A2A1A; --sale:#D9342B;
  --ink:#1A202C; --ink-soft:#4A5568; --ink-muted:#9AA3B0;
  --surface:#fff; --surface-alt:#F4F6F9; --surface-media:#EEF1F5;
  --line:rgba(26,32,44,.13); --line-soft:rgba(26,32,44,.07); --line-strong:rgba(26,32,44,.22);
  --radius-card:18px; --radius-pill:100px; --radius-sm:8px; --radius-tile:16px;
  --shadow-card:0 24px 60px -28px rgba(26,32,44,.28);
  --shadow-btn:0 12px 26px -14px rgba(184,33,5,.62);
  --shadow-btn-h:0 18px 34px -14px rgba(184,33,5,.78);
  --ease:cubic-bezier(.22,1,.36,1);
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  color:var(--ink); line-height:1.65;
  font-size:clamp(15px,.55vw + 13px,17px);
}
.dm-produkt *{box-sizing:border-box}

/* --- cabecera en dos columnas --- */
.dm-produkt__head{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(34px,5vw,72px);
  align-items:start;margin-bottom:clamp(48px,6vw,86px)}

/* --- galería --- */
.dm-gal__main{margin:0;border-radius:var(--radius-tile);overflow:hidden;background:var(--surface-media);
  aspect-ratio:4/3}
.dm-gal__main img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--ease)}
.dm-gal__main:hover img{transform:scale(1.07)}
.dm-gal__thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.dm-gal__t{width:76px;height:76px;padding:0;border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;background:var(--surface-media);cursor:pointer;transition:all .45s var(--ease)}
.dm-gal__t img{width:100%;height:100%;object-fit:cover;display:block}
.dm-gal__t:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.dm-gal__t.is-on{border-color:var(--brand);box-shadow:0 0 0 2px rgba(184,33,5,.16)}

/* --- información --- */
.dm-produkt__eyebrow{display:flex;align-items:center;gap:.7em;font-size:.74rem;letter-spacing:.32em;
  text-transform:uppercase;font-weight:600;color:var(--brand-deep);margin:0 0 16px}
.dm-produkt__eyebrow::before{content:"";width:26px;height:1px;background:currentColor}
.dm-produkt__title{font-family:Fraunces,Georgia,serif;font-weight:300;letter-spacing:-.02em;
  line-height:1.08;font-size:clamp(2rem,4.2vw,3.3rem);margin:0 0 16px}
.dm-produkt__lead{font-size:clamp(1rem,1.3vw,1.16rem);color:var(--ink-soft);margin:0 0 26px;max-width:52ch}
.dm-produkt__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.7rem;margin:0 0 18px}
.dm-produkt__old{font-size:1.2rem;color:var(--sale);text-decoration:line-through}
.dm-produkt__now{font-family:Fraunces,Georgia,serif;font-weight:500;letter-spacing:-.02em;
  font-size:clamp(2.2rem,4vw,3rem);line-height:1;display:flex;align-items:baseline;gap:.35rem}
.dm-produkt__from{font-family:"Hanken Grotesk",sans-serif;font-size:.9rem;font-weight:500;color:var(--ink-soft)}
.dm-produkt__note{flex-basis:100%;font-size:.7rem;font-weight:500;color:var(--ink-soft);margin:0}
.dm-produkt__sku{font-size:.86rem;color:var(--ink-muted);margin:0 0 26px}
.dm-produkt__sku span{color:var(--ink-soft);font-weight:500}

.dm-btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font:inherit;
  font-size:.95rem;font-weight:600;padding:14px 32px;border-radius:var(--radius-pill);
  text-decoration:none;transition:all .45s var(--ease)}
.dm-btn--primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-btn)}
.dm-btn--primary:hover{background:var(--brand-deep);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-btn-h)}

/* --- cuerpo --- */
.dm-produkt__h2{font-family:Fraunces,Georgia,serif;font-weight:300;letter-spacing:-.012em;
  line-height:1.1;font-size:clamp(1.7rem,3.2vw,2.5rem);margin:0 0 22px}
.dm-produkt__body{margin-bottom:clamp(48px,6vw,86px)}
.dm-produkt__text{max-width:68ch;color:var(--ink-soft)}
.dm-produkt__text p{margin:0 0 1em}
.dm-produkt__konf{padding-top:clamp(38px,5vw,64px);border-top:1px solid var(--line)}

@media (max-width:900px){
  .dm-produkt__head{grid-template-columns:1fr;gap:28px}
}
@media (prefers-reduced-motion:reduce){.dm-produkt *{transition-duration:.01ms!important}}

/* ---------- migas de pan ---------- */
.dm-crumbs{margin:0 0 clamp(14px,1.8vw,22px);font-size:.86rem;color:var(--ink-muted)}
.dm-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.dm-crumbs li{display:flex;align-items:center;gap:.4rem}
.dm-crumbs li + li::before{content:"/";color:var(--line-strong)}
.dm-crumbs a{color:var(--ink-soft);text-decoration:none}
.dm-crumbs a:hover{color:var(--brand-deep);text-decoration:underline}
.dm-crumbs [aria-current]{color:var(--ink)}

/* ---------- pestañas de contenido del producto ----------
   La pestaña activa se funde con el panel: mismo fondo, esquinas
   superiores redondeadas y un píxel de solape que borra la costura.
   Todos los paneles están en el HTML; solo se alterna el visible. */
.dm-tabs{margin-top:clamp(26px,3.4vw,44px)}

.dm-tabs__bar{display:flex;gap:4px;padding:0 clamp(4px,1vw,10px);
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;position:relative;z-index:1}
.dm-tabs__bar::-webkit-scrollbar{display:none}

.dm-tabs .dm-tabs__t,.dm-tabs button.dm-tabs__t{
  flex:none;position:relative;margin:0 0 -1px;
  padding:13px clamp(16px,2vw,24px) 14px !important;
  border:1px solid transparent !important;border-bottom:0 !important;
  border-radius:14px 14px 0 0 !important;
  background:transparent;color:var(--ink-soft);
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:.95rem;font-weight:600;line-height:1.2;white-space:nowrap;
  cursor:pointer;-webkit-appearance:none;appearance:none;box-shadow:none;
  text-transform:none;letter-spacing:0;min-height:0;width:auto;
  transition:color .45s var(--ease),background .45s var(--ease)}
.dm-tabs .dm-tabs__t:hover{color:var(--brand-deep)}
.dm-tabs .dm-tabs__t.is-on{
  background:var(--surface);color:var(--ink);
  border-color:var(--line-soft) !important}

.dm-tabs__panels{background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  padding:clamp(22px,2.8vw,36px) clamp(20px,2.8vw,36px)}
/* Cuando la activa es la primera, la esquina de arriba a la izquierda
   se cuadra para que pestaña y panel formen una sola pieza. */
.dm-tabs__panels.is-first{border-top-left-radius:0}

.dm-tabs__p{animation:dm-tab-in .45s var(--ease)}
.dm-tabs__p[hidden]{display:none}
@keyframes dm-tab-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.dm-tabs__h{font-family:Fraunces,Georgia,serif;font-weight:400;letter-spacing:-.012em;
  line-height:1.15;font-size:clamp(1.3rem,2.2vw,1.7rem);margin:0 0 16px;color:var(--ink)}
.dm-tabs__body{color:var(--ink-soft);max-width:76ch}
.dm-tabs__body > :first-child{margin-top:0}
.dm-tabs__body > :last-child{margin-bottom:0}
.dm-tabs__body p{margin:0 0 1em}
.dm-tabs__body img{max-width:100%;height:auto;border-radius:var(--radius-sm)}
.dm-tabs__body figure{margin:0 0 1.2em}
.dm-tabs__body figcaption{font-size:.84rem;color:var(--ink-muted);margin-top:.4rem}
.dm-tabs__body iframe,.dm-tabs__body video{max-width:100%;border-radius:var(--radius-sm)}
.dm-tabs__body ul,.dm-tabs__body ol{padding-left:1.3em;margin:0 0 1em}
.dm-tabs__body h2,.dm-tabs__body h3{font-family:Fraunces,Georgia,serif;font-weight:400;
  color:var(--ink);line-height:1.2;margin:1.4em 0 .5em}

/* Sin JavaScript se ven todos los paneles, con su título por delante. */
.dm-tabs__p + .dm-tabs__p{margin-top:clamp(20px,2.4vw,30px);
  padding-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--line-soft)}
.dm-tabs.is-ready .dm-tabs__p + .dm-tabs__p{margin-top:0;padding-top:0;border-top:0}
.dm-tabs:not(.is-ready) .dm-tabs__bar{display:none}

@media (max-width:600px){
  .dm-tabs__bar{padding:0 4px}
  .dm-tabs .dm-tabs__t{font-size:.9rem;padding:11px 14px 12px !important}
}

/* --- relacionados --- */
.dm-related{margin-top:clamp(40px,5vw,72px)}
.dm-related__h{font-family:Fraunces,Georgia,serif;font-weight:300;letter-spacing:-.02em;font-size:clamp(1.5rem,2.6vw,2.1rem);margin:0 0 20px}