/* ============================================================
   modelos.css — páginas de modelo cuatrimoto (yansumi.cn)
   Solo se carga en las páginas nuevas de modelo y en el índice.
   No modifica css/fenye.css.
   ============================================================ */

.mdl-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.mdl-tags li{font-size:12.5px;line-height:1;padding:7px 11px;border:1px solid #d8dde5;border-radius:999px;color:#33475b;background:#fff}
.mdl-tags li b{font-weight:600;color:#0b2a4a}
.mdl-tags li.is-on{border-color:#0b2a4a;background:#0b2a4a;color:#fff}
.mdl-tags li.is-on b{color:#fff}

.mdl-lead{font-size:16.5px;line-height:1.75;color:#333;margin:0 0 18px}

/* ---------- ficha técnica ---------- */
.mdl-ficha{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:14.5px}
.mdl-ficha caption{caption-side:top;text-align:left;font-size:13px;color:#6b7684;padding:0 0 8px}
.mdl-ficha th,.mdl-ficha td{border:1px solid #e3e7ec;padding:9px 12px;vertical-align:top;text-align:left}
.mdl-ficha th{width:38%;background:#f6f8fa;font-weight:600;color:#1b3a5c}
.mdl-ficha tr:nth-child(even) td{background:#fbfcfd}

/* ---------- imágenes: formato uniforme, <=50% del ancho de pantalla ---------- */
.mdl-fig{margin:0 0 26px;text-align:center}
.mdl-fig img{display:block;width:100%;max-width:560px;height:auto;margin:0 auto;border:1px solid #e8ebef;background:#fff}
.mdl-fig figcaption{font-size:12.5px;line-height:1.5;color:#6b7684;padding:8px 0 0}

.mdl-gal{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 26px;justify-content:center}
.mdl-gal .mdl-fig{flex:0 1 calc(50% - 9px);margin:0}
.mdl-gal .mdl-fig img{max-width:100%}

/* ---------- titulo ---------- */
.mdl-h1{font-size:26px;line-height:1.35;margin:0 0 16px;color:#12263a}
@media (max-width:767px){.mdl-h1{font-size:21px}}

/* ---------- bloques ---------- */
.mdl-h2{font-size:22px;line-height:1.35;margin:34px 0 14px;padding-left:12px;border-left:4px solid #0b2a4a;color:#12263a}
.mdl-p{font-size:15.5px;line-height:1.8;color:#333;margin:0 0 14px}
.mdl-list{margin:0 0 22px;padding:0 0 0 20px}
.mdl-list li{font-size:15px;line-height:1.75;color:#333;margin:0 0 7px}

.mdl-note{background:#f6f8fa;border-left:4px solid #0b2a4a;padding:14px 18px;margin:0 0 26px;font-size:14.5px;line-height:1.75;color:#33475b}
.mdl-note b{color:#12263a}

/* ---------- comparativa ---------- */
.mdl-cmp{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:14px}
.mdl-cmp th{background:#0b2a4a;color:#fff;font-weight:600;padding:10px 12px;text-align:left;border:1px solid #0b2a4a}
.mdl-cmp td{border:1px solid #e3e7ec;padding:9px 12px;vertical-align:top}
.mdl-cmp tr:nth-child(even) td{background:#fafbfc}
.mdl-cmp td.is-cur{background:#eef3f9;font-weight:600}

/* ---------- grid de modelos ---------- */
.mdl-grid{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 30px;padding:0;list-style:none}
.mdl-card{flex:0 1 calc(33.333% - 12px);border:1px solid #e3e7ec;background:#fff;padding:0 0 14px;display:flex;flex-direction:column}
.mdl-card img{display:block;width:100%;height:auto;border-bottom:1px solid #eef1f4}
.mdl-card h3{font-size:15.5px;line-height:1.4;margin:12px 14px 6px;color:#12263a}
.mdl-card p{font-size:13px;line-height:1.6;color:#5b6876;margin:0 14px 10px}
.mdl-card .mdl-card-tags{font-size:11.5px;color:#7b8794;margin:0 14px 10px}
.mdl-card a.mdl-card-link{margin:auto 14px 0;font-size:13.5px;font-weight:600;color:#0b2a4a;text-decoration:none}
.mdl-card a.mdl-card-link:hover{text-decoration:underline}

/* ---------- filtros ---------- */
.mdl-filter{border:1px solid #e3e7ec;background:#fbfcfd;padding:14px 16px;margin:0 0 26px}
.mdl-filter p{margin:0 0 8px;font-size:13px;color:#5b6876}
.mdl-filter p b{color:#12263a}
.mdl-filter .mdl-tags{margin:0}

/* ---------- CTA ---------- */
.mdl-cta{background:#0b2a4a;color:#fff;padding:26px 28px;margin:34px 0 10px}
.mdl-cta h2{font-size:20px;line-height:1.4;margin:0 0 8px;color:#fff;border:0;padding:0}
.mdl-cta p{font-size:14.5px;line-height:1.7;color:#d7e0ea;margin:0 0 16px}
.mdl-cta a{display:inline-block;background:#fff;color:#0b2a4a;font-weight:700;font-size:14px;padding:11px 22px;text-decoration:none}
.mdl-cta a:hover{background:#e8eef5}

/* ---------- FAQ ---------- */
.mdl-faq{margin:0 0 26px}
.mdl-faq details{border-bottom:1px solid #e3e7ec;padding:0}
.mdl-faq summary{cursor:pointer;font-size:15.5px;font-weight:600;color:#12263a;padding:14px 26px 14px 0;list-style:none;position:relative}
.mdl-faq summary::-webkit-details-marker{display:none}
.mdl-faq summary:after{content:'+';position:absolute;right:2px;top:11px;font-size:22px;line-height:1;color:#0b2a4a}
.mdl-faq details[open] summary:after{content:'–'}
.mdl-faq details p{font-size:15px;line-height:1.8;color:#333;margin:0;padding:0 0 16px}

/* ---------- relacionados ---------- */
.mdl-rel{border-top:1px solid #e3e7ec;margin:34px 0 0;padding:22px 0 0}
.mdl-rel h2{font-size:17px;margin:0 0 12px;color:#12263a;border:0;padding:0}
.mdl-rel ul{margin:0;padding:0 0 0 18px}
.mdl-rel li{font-size:14.5px;line-height:1.9;color:#33475b}
.mdl-rel a{color:#0b2a4a;text-decoration:none}
.mdl-rel a:hover{text-decoration:underline}

@media (max-width:991px){
  .mdl-card{flex:0 1 calc(50% - 9px)}
}
@media (max-width:767px){
  .mdl-lead{font-size:15.5px}
  .mdl-h2{font-size:19px;margin:26px 0 12px}
  .mdl-p,.mdl-list li,.mdl-faq details p{font-size:14.5px}
  .mdl-fig img{max-width:100%}
  .mdl-gal{gap:12px}
  .mdl-gal .mdl-fig{flex:0 1 100%}
  .mdl-card{flex:0 1 100%}
  .mdl-ficha,.mdl-cmp{font-size:13px}
  .mdl-ficha th{width:44%}
  .mdl-ficha th,.mdl-ficha td,.mdl-cmp th,.mdl-cmp td{padding:8px 9px}
  .mdl-cta{padding:20px}
}

/* ---------- correcciones sobre el tema heredado ---------- */
.mdl-faq summary{border:0!important;background:none!important;box-shadow:none!important;font-size:15.5px;font-weight:600}
.mdl-faq details[open] summary:after{transform:none}
.mdl-list{list-style:none;margin:0 0 18px;padding:0}
.mdl-list li{list-style:none;position:relative;padding-left:18px}
.mdl-list li:before{content:"";position:absolute;left:1px;top:9px;width:6px;height:6px;background:#0b2a4a;border-radius:50%}
.mdl-card a.mdl-card-link{margin-top:auto}
.mdl-fig figcaption{display:block}
.mdl-tblwrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 22px}
.mdl-tblwrap table{margin-bottom:0}
@media (max-width:767px){
  .mdl-tblwrap:before{content:"Desliza para ver la tabla completa \2192";display:block;font-size:12px;color:#7a8794;padding:0 0 6px}
  .mdl-cmp{min-width:560px}
}