/* MOTORZELO article design system (.mz-article) - consolidated */
.mz-article{
    --bg:#FAFAF8; --bg-elev:#F0EFEC; --paper:#FFFFFF;
    --ink:#15171A; --ink-soft:#5B6169; --line:#DEDDD9;
    --graphite:#15171A; --graphite-2:#1F2226; --graphite-3:#2A2D31;
    --on-graphite:#F5F4F2; --on-graphite-soft:#A7ACB3;
    --red:#E01A2B; --red-dark:#B01523; --red-soft:#FBE7E7; --red-line:#F2C4C6;
    --green-ok:#1F7A4D; --focus:#1857C9;
    --radius-s:2px; --radius-m:3px;
    --font-display:'Big Shoulders Display','Arial Narrow',sans-serif;
    --font-body:'Hanken Grotesk',-apple-system,'Segoe UI',sans-serif;
    --font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
    color-scheme: light;
  }

@media (prefers-color-scheme: dark){
    .mz-article:not([data-theme="light"]){
      --bg:#121316; --bg-elev:#1A1C1F; --paper:#17181B;
      --ink:#F1F0EE; --ink-soft:#9CA1A7; --line:#2C2E32;
      --graphite:#000000; --graphite-2:#0A0B0D; --graphite-3:#1B1D20;
      --on-graphite:#F5F4F2; --on-graphite-soft:#9CA2A8;
      --red:#FF4655; --red-dark:#E63847; --red-soft:rgba(255,70,85,.14); --red-line:rgba(255,70,85,.35);
      --green-ok:#3FAE7A; --focus:#6FA0FF; color-scheme: dark;
    }
  }

.mz-article[data-theme="dark"]{
    --bg:#121316; --bg-elev:#1A1C1F; --paper:#17181B;
    --ink:#F1F0EE; --ink-soft:#9CA1A7; --line:#2C2E32;
    --graphite:#000000; --graphite-2:#0A0B0D; --graphite-3:#1B1D20;
    --on-graphite:#F5F4F2; --on-graphite-soft:#9CA2A8;
    --red:#FF4655; --red-dark:#E63847; --red-soft:rgba(255,70,85,.14); --red-line:rgba(255,70,85,.35);
    --green-ok:#3FAE7A; --focus:#6FA0FF; color-scheme: dark;
  }

.mz-article, .mz-article *{box-sizing:border-box;}

.mz-article{background:var(--bg); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased;}

.mz-article img{max-width:100%; display:block;}

.mz-article a{color:inherit;}

.mz-article h1, .mz-article h2, .mz-article h3{text-wrap:balance; margin:0;}

.mz-article ::selection{background:var(--red); color:#fff;}

.mz-article :focus-visible{outline:2px solid var(--focus); outline-offset:2px;}

@media (prefers-reduced-motion: reduce){ .mz-article, .mz-article *{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important;} }

.wrap{max-width:1160px; margin-inline:auto; padding-inline:24px;}

@media (max-width:480px){ .wrap{padding-inline:16px;} }

.col{max-width:740px;}

.eyebrow{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--red); font-weight:600;}

.mz-logo{width:22px; height:17px; flex-shrink:0;}

.mz-wordmark{display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:800; font-size:.95rem; letter-spacing:.02em; text-transform:uppercase;}

.btn{font-family:var(--font-body); font-weight:700; font-size:.86rem; padding:12px 20px; border-radius:var(--radius-m); border:1.5px solid var(--ink); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:border-color .15s ease, background-color .15s ease, color .15s ease; text-transform:none; background:var(--paper); color:var(--ink);}

.btn:hover{border-color:var(--red); color:var(--red);}

.btn-primary{background:var(--red); border-color:var(--red); color:#fff;}

.btn-primary:hover{background:var(--red-dark); border-color:var(--red-dark); color:#fff;}

.content h2{font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(1.4rem,2.6vw,1.9rem); border-bottom:2px solid var(--ink); padding-bottom:12px; margin-bottom:20px; margin-top:52px; display:flex; align-items:baseline; gap:12px;}

.content > h2:first-child{margin-top:0;}

.content > .content-photo:first-child{margin-top:0;}

.content:has(> .content-photo:first-child){padding-top:0 !important;}

.content h3{font-family:var(--font-body); font-weight:800; font-size:1rem; text-transform:uppercase; letter-spacing:.02em; margin-top:32px; margin-bottom:10px; display:flex; align-items:center; gap:10px;}

.content h3::before{content:""; width:14px; height:2px; background:var(--red); display:inline-block; flex-shrink:0;}

.content p{line-height:1.7; margin-block:15px;}

.content p a, .content li a{color:var(--red); font-weight:600; text-decoration-thickness:1.5px;}

.content ul, .content ol{line-height:1.62; padding-left:1.3em; margin-block:15px;}

.content li{margin-block:7px;}

.content ol.errors{list-style:none; padding-left:0; counter-reset:err;}

.content ol.errors li{counter-increment:err; position:relative; padding-left:44px; margin-block:17px;}

.content ol.errors li::before{content:counter(err,decimal-leading-zero); position:absolute; left:0; top:-4px; font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--red);}

.table-wrap{overflow-x:auto; margin-block:22px;}

table.mz{width:100%; border-collapse:collapse; font-size:.86rem;}

table.mz caption{text-align:left; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:9px; caption-side:top;}

table.mz th{background:var(--graphite); color:var(--on-graphite); font-family:var(--font-mono); font-weight:600; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; text-align:left; padding:10px 13px; border-bottom:2px solid var(--red);}

table.mz td{padding:10px 13px; border-bottom:1px solid var(--line); vertical-align:top;}

table.mz tr:nth-child(even) td{background:var(--bg-elev);}

.callout{position:relative; padding:16px 20px 16px 40px; border-radius:var(--radius-s); margin-block:22px; font-size:.93rem; line-height:1.6;}

.callout .marker{position:absolute; left:16px; top:19px; width:9px; height:9px;}

.callout .callabel{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; display:block; margin-bottom:7px;}

.callout-note{background:var(--graphite); color:var(--on-graphite);}

.callout-note .marker{background:var(--red); border-radius:50%;}

.callout-note .callabel{color:#FF8790;}

.callout-note a{color:#FF9AA2;}

.callout-fact{background:var(--paper); border:1px solid var(--line);}

.callout-fact .marker{background:transparent; border:2px solid var(--ink-soft);}

.callout-fact .callabel{color:var(--ink-soft);}

.callout-alert{background:var(--red-soft); color:var(--ink);}

.callout-alert .marker{background:var(--red); clip-path:polygon(50% 0,100% 100%,0 100%);}

.callout-alert .callabel{color:var(--red-dark);}

figure.content-photo{margin:30px 0; border:1px solid var(--line); position:relative;}

figure.content-photo .frame{position:relative; overflow:hidden; aspect-ratio:16/9; background:var(--bg-elev);}

figure.content-photo img{width:100%; height:100%; object-fit:cover; display:block;}

figure.content-photo .fig-tag{position:absolute; top:10px; left:10px; background:rgba(21,23,26,.78); color:var(--on-graphite); font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; padding:4px 8px; text-transform:uppercase;}

figure.content-photo figcaption{font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); padding:10px 14px; border-top:1px solid var(--line); background:var(--bg-elev);}

/* Fotos reales del autor: se ven enteras, sin recortar a 16:9 */
figure.content-photo.content-photo--real .frame{aspect-ratio:auto; height:auto;}
figure.content-photo.content-photo--real img{height:auto; object-fit:contain;}

.faq-list{border-top:1px solid var(--line);}

.faq-list details{border-bottom:1px solid var(--line);}

.faq-list details[open]{border-left:2px solid var(--red);}

.faq-list summary{list-style:none; cursor:pointer; padding:17px 0 17px 16px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-weight:700; font-size:.98rem;}

.faq-list details:not([open]) summary{padding-left:18px;}

.faq-list summary::-webkit-details-marker{display:none;}

.faq-list summary .plus{font-family:var(--font-mono); font-size:1.05rem; color:var(--ink-soft); min-width:20px; text-align:right; transition:transform .15s ease;}

.faq-list details[open] summary .plus{transform:rotate(45deg); color:var(--red);}

.faq-list .faq-a{padding:0 0 18px 16px; color:var(--ink-soft); line-height:1.6; max-width:64ch;}

.sources{background:var(--bg-elev); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

.sources h2{font-family:var(--font-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); margin-bottom:16px; border:none; padding:0; margin-top:0;}

.sources ul{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:8px 32px; font-size:.85rem; color:var(--ink-soft);}

@media (max-width:640px){ .sources ul{grid-template-columns:1fr;} }

.sources li{margin:0;}

.sources li b{color:var(--ink);}

.sources .rev{margin-top:18px; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft);}

.sources .disclaimer{margin-top:10px; font-size:.8rem; color:var(--ink-soft); max-width:70ch; line-height:1.6;}

.resources-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:26px;}

@media (max-width:820px){ .resources-grid{grid-template-columns:1fr 1fr;} }

@media (max-width:560px){ .resources-grid{grid-template-columns:1fr;} }

.resource-card{background:var(--paper); padding:20px; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:8px; transition:background-color .15s ease;}

.resource-card:hover{background:var(--bg-elev);}

.resource-card .r-tag{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.07em; text-transform:uppercase; color:var(--red);}

.resource-card .r-name{font-weight:700; font-size:.94rem; line-height:1.3;}

.resource-card .r-desc{font-size:.82rem; color:var(--ink-soft); line-height:1.45;}

.resource-card .r-go{margin-top:auto; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft);}

.resource-card:hover .r-go{color:var(--red);}

.end-note{text-align:center; padding-block:34px; font-family:var(--font-mono); font-size:.7rem; color:var(--ink-soft); letter-spacing:.05em;}

.art-topbar{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--line);}

.art-topbar-inner{max-width:1160px; margin-inline:auto; padding:12px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;}

@media (max-width:480px){ .art-topbar-inner{padding:10px 16px;} }

.art-topbar .mz-wordmark{color:var(--ink);}

.art-back{font-family:var(--font-mono); font-size:.74rem; color:var(--ink-soft); text-decoration:none; display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.art-back:hover{color:var(--red);}

.art-header{padding-block:44px 8px; background:var(--bg-elev); border-bottom:1px solid var(--line);}

@media (max-width:640px){ .art-header{padding-block:32px 8px;} }

.art-header h1{font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(1.7rem,3.6vw,2.5rem); line-height:1.04; letter-spacing:-.005em; margin-block:10px 14px; color:var(--ink);}

.art-lead{font-size:1.05rem; line-height:1.55; color:var(--ink-soft); max-width:62ch; margin-bottom:22px;}

.art-meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); letter-spacing:.02em; padding-bottom:24px;}

.art-meta .dot{width:3px; height:3px; border-radius:50%; background:var(--ink-soft); flex-shrink:0;}

.quick-answer{background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--red); border-radius:var(--radius-s); padding:24px 26px; margin-block:28px;}

.quick-answer .qa-label{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--red); font-weight:600; display:block; margin-bottom:12px;}

.quick-answer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px;}

.quick-answer li{padding-left:18px; position:relative; line-height:1.55; font-size:.95rem;}

.quick-answer li::before{content:"—"; position:absolute; left:0; color:var(--red); font-weight:600;}

.mini-checklist{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-s); padding:22px 24px; margin-block:26px;}

.mini-checklist .mc-label{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:14px;}

.check-item{display:flex; align-items:flex-start; gap:10px; padding-block:7px; font-size:.92rem; line-height:1.4;}

.check-item input[type="checkbox"]{appearance:none; -webkit-appearance:none; width:17px; height:17px; min-width:17px; border:1.5px solid var(--ink-soft); border-radius:var(--radius-s); margin-top:1px; display:grid; place-content:center; cursor:pointer; background:var(--paper);}

.check-item input[type="checkbox"]::before{content:""; width:8px; height:8px; transform:scale(0); background:var(--red); transition:transform .1s ease-in;}

.check-item input[type="checkbox"]:checked::before{transform:scale(1);}

.check-item input[type="checkbox"]:checked{border-color:var(--red);}

.check-item label{cursor:pointer;}

.check-item:has(input:checked) label{color:var(--ink-soft); text-decoration:line-through; text-decoration-color:var(--line);}

.mini-steps{margin-block:26px; border-top:1px solid var(--line);}

.mini-step{display:grid; grid-template-columns:40px 1fr; gap:16px; padding-block:15px; border-bottom:1px solid var(--line);}

.mini-step-num{font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:var(--red); line-height:1;}

.mini-step-body b{display:block; font-size:.96rem; margin-bottom:2px;}

.mini-step-body span{font-size:.85rem; color:var(--ink-soft); line-height:1.4;}

.sources h3{font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-top:20px; margin-bottom:8px;}

.sources h3::before{display:none;}

.checklist-groups{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-block:26px;}

@media (max-width:680px){ .checklist-groups{grid-template-columns:1fr;} }

.checklist-groups .mini-checklist{margin-block:0;}

/* Recomendación comercial contextual — componente reservado, sin usar todavía en ningún artículo */
  .service-card{background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--red); border-radius:var(--radius-s); padding:22px 24px; margin-block:26px; display:flex; flex-direction:column; gap:10px;}

.service-card .sc-label{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft);}

.service-card .sc-name{font-weight:700; font-size:1.05rem;}

.service-card .sc-desc{font-size:.89rem; color:var(--ink-soft); line-height:1.55;}

.service-card .sc-when{font-size:.85rem; color:var(--ink-soft); line-height:1.5; font-style:italic;}

.service-card .sc-cta{align-self:flex-start; margin-top:4px;}

.service-card .sc-affiliate-note{font-size:.78rem; color:var(--ink-soft); line-height:1.4;}

.callout-alert ul{margin:0; padding-left:1.1em;}

.callout-alert li{margin-block:6px;}

.option-cards{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-block:26px;}

@media (max-width:680px){ .option-cards{grid-template-columns:1fr;} }

.option-card{background:var(--paper); padding:22px;}

.option-card .oc-tag{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:var(--red); display:block; margin-bottom:8px;}

.option-card .oc-name{font-weight:700; font-size:1.02rem; margin-bottom:10px;}

.option-card p{font-size:.89rem; color:var(--ink-soft); line-height:1.55; margin-block:8px;}

.option-card strong{color:var(--ink);}

.calc-panel-sm{background:var(--graphite); color:var(--on-graphite); padding:32px; border-top:3px solid var(--red); margin-block:30px;}

.calc-panel-sm .eyebrow{color:#FF6B78;}

.calc-panel-sm h3{font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:1.3rem; margin-block:8px 10px;}

.calc-panel-sm h3::before{display:none;}

.calc-panel-sm p{color:var(--on-graphite-soft); max-width:52ch; line-height:1.55; font-size:.9rem;}

.sources li a{color:var(--ink); text-decoration-line:underline; text-decoration-color:var(--line); text-underline-offset:2px;}

.sources li a:hover{color:var(--red); text-decoration-color:var(--red);}

/* Pasos de proceso — para trámites con un orden secuencial claro */
  .mini-steps{margin-block:26px; border-top:1px solid var(--line);}

/* ============================================================
     MOTORZELO — SISTEMA VISUAL DE ARTÍCULOS (basado en el sistema
     de la Pilar, mismos tokens y mismo vocabulario de componentes,
     con una capa "artículo" más ligera encima). Todo lo que ya
     existía en la Pilar bajo .mz-pilar se reutiliza aquí tal cual
     bajo .mz-article: mismos nombres de clase, mismos valores.
     ============================================================ */
  .mz-article{
    --bg:#FAFAF8; --bg-elev:#F0EFEC; --paper:#FFFFFF;
    --ink:#15171A; --ink-soft:#5B6169; --line:#DEDDD9;
    --graphite:#15171A; --graphite-2:#1F2226; --graphite-3:#2A2D31;
    --on-graphite:#F5F4F2; --on-graphite-soft:#A7ACB3;
    --red:#E01A2B; --red-dark:#B01523; --red-soft:#FBE7E7; --red-line:#F2C4C6;
    --green-ok:#1F7A4D; --focus:#1857C9;
    --radius-s:2px; --radius-m:3px;
    --font-display:'Big Shoulders Display','Arial Narrow',sans-serif;
    --font-body:'Hanken Grotesk',-apple-system,'Segoe UI',sans-serif;
    --font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
    color-scheme: light;
  }

/* ---------- CONTENT TYPOGRAPHY (idéntico a la Pilar) ---------- */
  .content h2{font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(1.4rem,2.6vw,1.9rem); border-bottom:2px solid var(--ink); padding-bottom:12px; margin-bottom:20px; margin-top:52px; display:flex; align-items:baseline; gap:12px;}

/* ============================================================
     COMPONENTES NUEVOS — específicos del sistema de ARTÍCULOS.
     No existían en la Pilar porque la Pilar no los necesita.
     ============================================================ */

  /* Barra superior ligera: sin progreso, sin nav de fases */
  .art-topbar{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--line);}

/* Cabecera de artículo — clara, no cinematográfica. Diferencia
     deliberada frente al hero a página completa de la Pilar. */
  .art-header{padding-block:44px 8px; background:var(--bg-elev); border-bottom:1px solid var(--line);}

/* Respuesta rápida — la tarjeta de orientación inmediata que ya
     usan todos los artículos como bloque de apertura, ahora con
     tratamiento visual propio en vez de una simple cita. */
  .quick-answer{background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--red); border-radius:var(--radius-s); padding:24px 26px; margin-block:28px;}

/* Tarjetas de opción — para cuando el contenido presenta 2-3
     caminos alternativos (p. ej. "solicitarlo al fabricante" vs
     "solicitarlo mediante un intermediario"). Reutilizable en
     cualquier artículo con una decisión de ese tipo. */
  .option-cards{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-block:26px;}

/* Checklist compacta de una columna — misma interacción que la
     de la Pilar (casilla real, tachado al marcar), en formato
     reducido para un cierre de sección, no para todo un tramo. */
  .mini-checklist{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-s); padding:22px 24px; margin-block:26px;}

/* Panel de calculadora, versión ligera (para artículos donde sí
     aporte valor — no se usa en este piloto, ver apéndice). */
  .calc-panel-sm{background:var(--graphite); color:var(--on-graphite); padding:32px; border-top:3px solid var(--red); margin-block:30px;}

/* Tarjeta de recomendación comercial — componente reutilizable
     para cuando exista un servicio real que enlazar. Se distingue
     con claridad de una tarjeta editorial (etiqueta explícita,
     borde de color en vez de fondo llamativo) para que nunca se
     confunda con contenido propio de Motorzelo. */
  .service-card{background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--red); border-radius:var(--radius-s); padding:22px 24px; margin-block:26px; display:flex; flex-direction:column; gap:10px;}

/* Apéndice de componentes (documentación, no contenido publicado) */
  .appendix{border-top:6px solid var(--graphite); background:var(--bg-elev); padding-block:50px;}

.appendix .eyebrow{display:block; margin-bottom:10px;}

.appendix h2{font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:1.6rem; margin-bottom:6px;}

.appendix > .wrap > p{color:var(--ink-soft); max-width:68ch; line-height:1.6; margin-bottom:34px;}

.appendix-block{margin-bottom:40px;}

.appendix-block .ab-label{font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); letter-spacing:.05em; margin-bottom:12px; display:block; text-transform:uppercase;}

.mini-checklist{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-s); padding:22px 24px; margin-block:20px;}

.option-cards{display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-block:26px;}

@media (max-width:820px){ .option-cards{grid-template-columns:1fr;} }

.service-card{background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--red); border-radius:var(--radius-s); padding:22px 24px; margin-block:26px; display:flex; flex-direction:column; gap:10px;}

.checklist-groups{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-block:26px;}

@media (max-width:820px){ .checklist-groups{grid-template-columns:1fr;} }