/* MOLA — hoja base compartida por las fichas de producto y partners.
   Un cambio acá se propaga a todas las páginas que la enlazan. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --papel: #F0EEEA; --card: #E8E6E1; --tinta: #1A1816;
  --grafito: #6B6760; --linea: #D8D5CF; --naranja: #F05A28; --blanco: #FAFAF8;
  --font: 'Inter', system-ui, sans-serif;
  --display: 'Syne', 'Inter', sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  --pad: 48px;
}
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 74px; }
body { background: var(--papel); color: var(--tinta); font-family: var(--font); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--naranja); outline-offset: 3px; }

/* nav */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 200; display: flex; justify-content: space-between; align-items: center; padding: 0 var(--pad); height: 62px; background: rgba(240,238,234,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
.nav.scrolled { background: rgba(240,238,234,.97); border-bottom-color: var(--linea); }
.nav .marca img { height: 28px; display: block; }
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--grafito); text-decoration: none; transition: color .15s; }
.nav-links a:hover { color: var(--tinta); }
.burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 20px; height: 1.5px; background: var(--tinta); margin: 4px 0; transition: transform .25s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* breadcrumb */
.miga { padding: 88px var(--pad) 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; color: var(--grafito); }
.miga a { text-decoration: none; transition: color .15s; }
.miga a:hover { color: var(--tinta); }
.miga .sep { margin: 0 8px; opacity: .4; }

/* hero */
.hero { padding: 26px var(--pad) 0; display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: start; }
.placa-marco { position: relative; aspect-ratio: 4/3; width: 100%; display: flex; align-items: center; justify-content: center; }
.placa-marco::before, .placa-marco::after { content: ""; position: absolute; background: var(--linea); }
.placa-marco::before { left: 0; right: 0; top: 50%; height: 1px; }
.placa-marco::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.placa-img { position: relative; z-index: 2; max-width: 100%; max-height: 86%; object-fit: contain; transition: opacity .3s ease; }
.placa-img.fade { opacity: 0; }
.placa-img.bleed { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; }
.tiras { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.tira { width: 66px; height: 66px; background: var(--card); border: 1px solid transparent; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: border-color .2s; }
.tira.on { border-color: var(--naranja); }
.tira img { max-width: 82%; max-height: 82%; object-fit: contain; }
.tira img.bleed { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; }

/* info */
.info { position: sticky; top: 84px; }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--grafito); display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--naranja); }
.modelo { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.04; letter-spacing: -.025em; }
.modelo span { display: block; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .1em; color: var(--naranja); margin-bottom: 8px; }
.slogan { font-size: 15px; line-height: 1.64; color: var(--grafito); margin: 16px 0 26px; }
.bloque { border-top: 1px solid var(--linea); padding-top: 20px; margin-bottom: 20px; }
.rotulo { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--grafito); margin-bottom: 12px; }
.colores { display: flex; gap: 10px; }
.color { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--linea); cursor: pointer; padding: 0; position: relative; transition: transform .18s; }
.color:hover { transform: scale(1.08); }
.color[aria-pressed="true"]::after { content: ""; position: absolute; inset: -5px; border: 1px solid var(--naranja); border-radius: 50%; }
.color-nombre { font-family: var(--mono); font-size: 12px; color: var(--grafito); margin-top: 10px; }
.precio { font-family: var(--display); font-weight: 600; font-size: 32px; letter-spacing: -.02em; }
.precio small { font-family: var(--font); font-weight: 400; font-size: 13px; color: var(--grafito); margin-left: 8px; letter-spacing: 0; }
.precio-neto { font-family: var(--mono); font-size: 12px; color: var(--grafito); margin-top: 6px; }
.acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.btn { display: flex; justify-content: space-between; align-items: center; gap: 14px; background: var(--tinta); color: var(--blanco); font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; padding: 15px 20px; text-decoration: none; transition: opacity .18s; }
.btn:hover { opacity: .86; }
.btn.ghost { background: none; color: var(--tinta); border: 1px solid var(--linea); }
.btn.ghost:hover { border-color: var(--tinta); opacity: 1; }
.btn em { font-style: normal; font-family: var(--font); font-size: 11.5px; color: rgba(250,250,248,.6); display: block; margin-top: 3px; }
.btn.ghost em { color: var(--grafito); }

/* kpis */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linea); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); margin: 78px 0 0; }
.kpi { background: var(--papel); padding: 24px var(--pad); }
.kpi dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--grafito); margin-bottom: 8px; }
.kpi dd { font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: -.02em; }

/* capitulos */
.cap { padding: 84px var(--pad); }
.cap-num { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--naranja); margin-bottom: 14px; }
.cap-tit { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 3vw, 40px); line-height: 1.1; letter-spacing: -.028em; margin-bottom: 14px; }
.cap-baj { font-size: 15px; line-height: 1.66; color: var(--grafito); max-width: 520px; margin-bottom: 40px; }

.vistas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.vista { background: var(--papel); padding: 20px; }
.vista-rot { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--grafito); margin-bottom: 10px; }
.vista-fig { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; }
.vista-fig img { max-width: 100%; max-height: 100%; object-fit: contain; }

.detalles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.det { background: var(--papel); }
.det figure { margin: 0; }
.det img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.det figcaption { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--grafito); padding: 14px 18px; }

/* specs */
.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.spec { background: var(--papel); padding: 20px 22px; }
.spec dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--grafito); margin-bottom: 7px; }
.spec dd { font-size: 15px; line-height: 1.4; }
.spec.pendiente dd { color: #BEB9B1; font-family: var(--mono); font-size: 12.5px; }
.nota-pie { font-family: var(--mono); font-size: 11px; color: var(--grafito); margin-top: 18px; line-height: 1.6; }

/* en uso */
.uso-foto { border: 1px solid var(--linea); }
.uso-foto img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.uso-foto figcaption { display: flex; align-items: baseline; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--grafito); padding: 14px 18px; }
.uso-foto figcaption b { font-weight: 400; color: var(--naranja); }
.uso-nota { font-family: var(--mono); font-size: 11px; color: #B0ABA3; letter-spacing: .04em; margin-top: 16px; }

/* relacionados */
.rel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.rel a { background: var(--papel); padding: 22px; text-decoration: none; display: flex; flex-direction: column; transition: background .2s; }
.rel a:hover { background: var(--card); }
.rel-cod { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; color: var(--naranja); }
.rel-fig { aspect-ratio: 4/3; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; margin: 8px 0 12px; }
.rel-fig img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rel-nom { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; margin-bottom: 4px; }
.rel-pre { font-family: var(--mono); font-size: 12px; color: var(--grafito); }

.pie { padding: 40px var(--pad); border-top: 1px solid var(--linea); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pie small, .pie a { font-family: var(--mono); font-size: 11.5px; color: var(--grafito); letter-spacing: .04em; text-decoration: none; }
.pie a:hover { color: var(--tinta); }

@media (max-width: 1080px) { .specs, .vistas, .detalles { grid-template-columns: repeat(2, 1fr); } .kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  :root { --pad: 22px; }
  .burger { display: block; }
  .nav-links { position: fixed; inset: 62px 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--papel); border-bottom: 1px solid var(--linea); padding: 6px 22px 18px; display: none; }
  .nav-links.abierto { display: flex; }
  .nav-links a { padding: 13px 0; font-size: 14px; width: 100%; }
  .hero { grid-template-columns: 1fr; gap: 30px; }
  .info { position: static; }
  .cap { padding: 56px var(--pad); }
  .kpis { margin-top: 48px; }
  .kpi { padding: 20px var(--pad); }
  .specs, .vistas, .detalles, .rel { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }