/* ============================================================
   Rico MC Transit — estilos del blog
   Se carga DESPUÉS de site.css y reutiliza sus colores y tipografía.
   ============================================================ */

/* ---------- Banda de título (blog y artículo) ---------- */
.b-head{background:var(--petrol);color:#fff;padding:4.5rem 0 3.5rem}
.b-head h1{font-size:clamp(2.3rem,4.6vw,3.8rem);max-width:18ch}
.b-head .lede{color:var(--on-dark);max-width:36rem}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.4rem;padding:0;list-style:none;font-size:.92rem;color:var(--on-dark)}
.crumbs li+li::before{content:"/";margin-right:.4rem;opacity:.5}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---------- Filtro por tema: misma franja turquesa de la puerta ---------- */
.topics{background:var(--teal);color:var(--petrol)}
.topics .wrap{display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none}
.topics .wrap::-webkit-scrollbar{display:none}
.topics button{all:unset;cursor:pointer;flex:none;padding:1.15rem 1.4rem;font-weight:600;font-size:.98rem;border-left:1px solid rgba(12,42,48,.22);white-space:nowrap;display:flex;align-items:baseline;gap:.5rem}
.topics button:first-child{border-left:0;padding-left:0}
.topics button small{font-weight:500;opacity:.7;font-variant-numeric:tabular-nums}
.topics button:hover{text-decoration:underline;text-underline-offset:4px}
.topics button[aria-pressed="true"]{box-shadow:inset 0 -4px 0 var(--petrol)}
.topics button:focus-visible{outline:3px solid var(--petrol);outline-offset:-3px}

/* ---------- Artículo destacado ---------- */
.feature{padding:4.5rem 0 1rem}
.feature a.card{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:0;text-decoration:none;background:var(--mist)}
.feature figure{margin:0;position:relative;overflow:hidden}
.feature figure img{width:100%;height:100%;min-height:380px;object-fit:cover}
.feature .body{padding:2.6rem 2.6rem 2.4rem;display:flex;flex-direction:column}
.feature h2{font-size:clamp(1.7rem,2.8vw,2.4rem);margin-top:.9rem}
.feature p{color:var(--muted);margin-top:1rem}
.feature .read{margin-top:auto;padding-top:1.8rem;font-weight:600;color:var(--teal-ink)}
.feature a.card:hover h2{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
@media (max-width:860px){.feature a.card{grid-template-columns:1fr}.feature figure img{min-height:0;aspect-ratio:16/10}.feature .body{padding:1.8rem 1.4rem}}

/* Etiqueta de tema: igual que la de "Oversize" en servicios */
.cat{display:inline-block;align-self:flex-start;font-weight:700;font-size:.82rem;padding:.3rem .65rem;background:var(--petrol);color:#fff;border-radius:2px}
.cat.oversize{background:var(--amber);color:#1B1A10}
.cat.story{background:var(--teal);color:var(--petrol)}
.meta{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;font-size:.92rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- Lista de artículos (como una bitácora) ---------- */
.log{padding:3.5rem 0 6rem}
.log-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1.2rem}
.log-head h2{font-size:clamp(1.5rem,2.4vw,1.9rem)}
.log-head p{color:var(--muted);font-size:.95rem}
.posts{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.posts li{border-bottom:1px solid var(--line)}
.posts li[hidden],.feature[hidden]{display:none}
.posts a{display:grid;grid-template-columns:8.5rem minmax(0,1fr) 220px;gap:2rem;padding:1.8rem 0;text-decoration:none;align-items:start}
.posts time{font-weight:600;font-variant-numeric:tabular-nums;font-size:.95rem;padding-top:.15rem}
.posts time span{display:block;font-weight:400;color:var(--muted);font-size:.88rem}
.posts h3{font-size:1.4rem;margin-top:.7rem;font-variation-settings:"wdth" 112}
.posts p{color:var(--muted);margin-top:.5rem;max-width:40rem}
.posts img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.posts a:hover h3{text-decoration:underline;text-underline-offset:4px}
.empty{padding:2rem 0;color:var(--muted)}
@media (max-width:860px){
  .posts a{grid-template-columns:minmax(0,1fr) 120px;gap:.4rem 1.2rem}
  .posts time{grid-column:1/-1}
  .posts time span{display:inline;margin-left:.6rem}
  .posts .txt{grid-row:2}
  .posts img{grid-row:2;aspect-ratio:1}
  .posts h3{font-size:1.2rem}
}
@media (max-width:480px){.posts a{grid-template-columns:1fr}.posts img{grid-row:auto;aspect-ratio:16/9;margin-top:.8rem}}

/* ---------- Logo como imagen del artículo (sección "Our story") ----------
   Logo blanco centrado sobre el color oscuro de la marca, con un degradado sutil. */
.feature figure img.brand-art,
.posts img.brand-art{object-fit:contain;object-position:center;background:radial-gradient(ellipse at center,#17434B 0%,var(--petrol) 72%)}
.feature figure img.brand-art{padding:10% 21%}
.posts img.brand-art{padding:12% 14%}

/* ---------- Página de artículo ---------- */
.a-head .meta{color:var(--on-dark);margin-top:1.6rem}
.a-head .cat{margin-bottom:1.2rem}
.a-figure{margin:0;background:linear-gradient(var(--petrol) 0 55%,var(--paper) 55% 100%)}
.a-figure img{width:100%;max-height:620px;aspect-ratio:16/9;object-fit:cover;border-radius:2px}
.a-figure figcaption{color:var(--muted);font-size:.9rem;margin-top:.7rem}

.a-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:5rem;padding:2.5rem 0 5rem}
.prose{max-width:41rem;font-size:1.125rem;line-height:1.7}
.prose>*+*{margin-top:1.25rem}
.prose h2{font-size:clamp(1.5rem,2.4vw,1.95rem);margin-top:3rem;line-height:1.15}
.prose h3{margin-top:2rem}
.prose a{color:var(--teal-ink);font-weight:600;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li+li{margin-top:.45rem}
.prose li::marker{color:var(--teal-ink);font-weight:700}
.prose .intro{font-size:1.28rem;line-height:1.55;color:var(--ink)}
.prose .spec-scroll{margin-top:1.8rem}
.prose table.spec{min-width:480px;font-size:1rem}
.prose .spec tbody th{font-size:1rem}
.callout{border-left:4px solid var(--amber);background:#FDF6E3;padding:1.2rem 1.4rem;border-radius:2px;font-size:1.02rem}
.callout strong{display:block;margin-bottom:.25rem}

/* Cita destacada dentro del texto */
.prose .pull{margin:2.4rem 0;padding:.2rem 0 .2rem 1.4rem;border-left:4px solid var(--teal)}
.prose .pull p{font-size:clamp(1.35rem,2.4vw,1.7rem);line-height:1.25;font-weight:700;font-variation-settings:"wdth" 112;color:var(--petrol)}

/* Foto dentro del texto: a la derecha en pantalla grande, completa en celular */
.prose figure.inline{float:right;width:min(16rem,42%);margin:.4rem 0 1.2rem 2rem}
.prose figure.inline img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px}
.prose figure.inline figcaption{color:var(--muted);font-size:.88rem;margin-top:.5rem;line-height:1.4}
.prose h2{clear:both}
@media (max-width:600px){.prose figure.inline{float:none;width:100%;margin:1.6rem 0}.prose figure.inline img{aspect-ratio:4/3}}

/* Foto a lo ancho del texto */
.prose figure.wide{margin:2.4rem 0}
.prose figure.wide img{width:100%;height:auto;border-radius:2px}
.prose figure.wide figcaption{color:var(--muted);font-size:.9rem;margin-top:.6rem;line-height:1.4}

/* Lista dentro de un recuadro de aviso */
.callout ul{margin:.6rem 0 0;padding-left:1.2rem}
.callout li+li{margin-top:.3rem}
.callout p+p{margin-top:.6rem}

/* Fuentes oficiales: enlaces largos que no deben romper el ancho en celular */
.prose .sources a{overflow-wrap:anywhere}

/* Compromisos (lista de definiciones) */
.commit{margin:1.8rem 0 0;display:grid;gap:0;border-top:2px solid var(--ink)}
.commit>div{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:.3rem 1.5rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.commit dt{font-weight:700;font-variation-settings:"wdth" 112;color:var(--teal-ink)}
.commit dd{margin:0}
@media (max-width:600px){.commit>div{grid-template-columns:1fr}}

/* Línea de tiempo en la barra lateral */
.road{padding:0;margin-bottom:2.5rem}
.road h2{font-size:1rem;font-variation-settings:"wdth" 100;letter-spacing:0;margin-bottom:.8rem}
.road ol{list-style:none;margin:0;padding:0 0 0 1.1rem;border-left:2px solid var(--line)}
.road li{position:relative;padding:0 0 1rem;font-size:.95rem;line-height:1.45;color:var(--muted)}
.road li:last-child{padding-bottom:0}
.road li::before{content:"";position:absolute;left:calc(-1.1rem - 6px);top:.35rem;width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--teal-ink)}
.road li:last-child::before{background:var(--teal-ink)}
.road span{display:block;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

.a-side{position:relative}
.a-side .stick{position:sticky;top:calc(var(--head-h) + 1.5rem + env(safe-area-inset-top,0px));display:grid;gap:2rem}
.toc h2{font-size:1rem;font-variation-settings:"wdth" 100;letter-spacing:0;margin-bottom:.6rem}
.toc ol{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.toc li{border-bottom:1px solid var(--line)}
.toc a{display:block;padding:.48rem 0;text-decoration:none;font-weight:500;font-size:.98rem}
.toc a:hover,.toc a[aria-current="true"]{color:var(--teal-ink)}
.toc a[aria-current="true"]{box-shadow:inset 3px 0 0 var(--teal-ink);padding-left:.8rem}
.cta-box{background:var(--petrol);color:#fff;padding:1.8rem 1.6rem;border-radius:2px}
.cta-box h2{font-size:1.35rem;line-height:1.15}
.cta-box p{color:var(--on-dark);margin-top:.6rem;font-size:.98rem}
.cta-box .btn{width:100%;margin-top:1.2rem}
.cta-box .avail{margin-top:.9rem;font-size:.95rem}
/* En pantallas bajas (laptops pequeñas) la barra lateral no se queda fija, para que el botón de cotizar nunca quede cortado */
@media (max-height:860px){.a-side .stick{position:static}}
@media (max-width:980px){
  .a-grid{grid-template-columns:minmax(0,1fr);gap:3rem}
  .a-side .stick{position:static}
  .toc{display:none}
}

.author{display:flex;gap:1rem;align-items:center;margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.author img{width:64px;height:64px;object-fit:contain;background:var(--petrol);padding:.4rem;border-radius:50%}
.author strong{display:block}
.author span{color:var(--muted);font-size:.95rem}

.related{background:var(--mist);padding:4.5rem 0 5.5rem}
.related .log-head{margin-bottom:1.4rem}
.related .posts a{grid-template-columns:8.5rem minmax(0,1fr) 180px}
@media (max-width:860px){.related .posts a{grid-template-columns:minmax(0,1fr) 110px}}
@media (max-width:480px){.related .posts a{grid-template-columns:1fr}}
.back{display:inline-block;margin-top:2rem;font-weight:600;color:var(--teal-ink);text-underline-offset:3px}

/* Enlace "Blog" activo en el menú */
.nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -2px 0 var(--teal)}