/* ================================================================
   ALTEC INDUSTRIES · Paginas internas (blog, articulo, error)
   Hereda tokens, tipografia y "la señal" de styles.css.
   Mismas reglas: radio 0, un solo acento, jerarquia por peso y aire.
================================================================ */

/* La cabecera es fija: el articulo empieza debajo de ella */
.post .inner{ padding-top:calc(var(--top) + var(--sy) * .72); }
.post .node{ top:calc(var(--top) + var(--sy) * .72 + .35em); }

/* Ruta */
.crumbs{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:26px;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
}
.crumbs a{color:var(--steel);transition:color .18s var(--out)}
.crumbs span[aria-hidden]{color:var(--hair)}
@media (hover:hover) and (pointer:fine){ .crumbs a:hover{color:var(--blue)} }

/* Meta del articulo */
.post .fk{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
}
.post .fk span:first-child{color:var(--blue)}

.post-title{
  font-size:clamp(2.1rem,4.4vw,3.3rem);max-width:20ch;margin-bottom:18px;
}
.post .sub{margin-bottom:14px}
.post-by{
  font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
  padding-bottom:30px;border-bottom:1px solid var(--hair);margin-bottom:38px;
}

/* Cuerpo */
.prose{max-width:68ch}
.prose h2{
  font-size:clamp(1.35rem,2.2vw,1.75rem);letter-spacing:-.02em;
  margin:44px 0 14px;padding-left:18px;border-left:2px solid var(--blue);
}
.prose p{margin-bottom:18px;font-size:1.03rem;line-height:1.75;color:var(--ink-2)}
.prose ul{margin:0 0 22px;padding:0}
.prose li{
  position:relative;padding-left:24px;margin-bottom:11px;line-height:1.7;color:var(--ink-2);
}
.prose li::before{
  content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--blue);
}
.prose b{color:var(--ink);font-weight:800}
.prose a{color:var(--blue);font-weight:700;border-bottom:1px solid rgba(37,99,235,.35)}

/* CTA de cierre */
.post-cta{
  margin-top:56px;padding:clamp(26px,4vw,40px);border:1px solid var(--hair);background:var(--white);
  display:grid;gap:24px;grid-template-columns:1.3fr .9fr;align-items:center;
}
.post-cta h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:8px}
.post-cta-btns{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:820px){ .post-cta{grid-template-columns:1fr} }

/* Mas notas / indice */
.post-more{margin-top:64px;padding-top:34px;border-top:1px solid var(--hair)}
.post-more h2{font-size:1.25rem;margin-bottom:22px}
.post-more-grid,.post-list{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.post-more-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.post-list{margin-top:38px}
.post-more-item{
  display:block;background:var(--white);padding:24px;
  transition:background .2s var(--out),transform .2s var(--out);
}
.post-more-item h3{font-size:1.15rem;line-height:1.25;margin:6px 0 10px}
.post-more-item p{color:var(--steel);margin-bottom:14px;max-width:60ch}
.post-more-item .lk{pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .post-more-item:hover{background:var(--paper)}
  .post-more-item:hover .lk svg{transform:translateX(5px)}
}

/* Error */
.post-error .post-title{max-width:16ch}

/* ================================================================
   PÁGINAS DE SECCIÓN (/servicios, /proyectos, /nosotros, /contacto)
   El cuerpo reutiliza las secciones de la portada, así que aquí solo
   va la entradilla y el cierre.
================================================================ */

.pagina .inner{ padding-top:calc(var(--top) + var(--sy) * .72); padding-bottom:calc(var(--sy) * .5); }
.pagina .node{ top:calc(var(--top) + var(--sy) * .72 + .35em); }
.pagina .post-title{ max-width:22ch; }
.pagina .prose{ margin-top:22px; }

/* En una página propia la sección no necesita repetir su encabezado con
   tanto aire: se acerca a la entradilla. */
.pagina + .station .inner{ padding-top:calc(var(--sy) * .5); }
.pagina + .station .node{ top:calc(var(--sy) * .5 + .35em); }

.pagina-fin .inner{ padding-top:var(--sy); }

/* Enlaces a las demás secciones, al pie de cada página */
.otras{
  margin-top:56px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;
  background:var(--hair);
  border:1px solid var(--hair);
}
.otras a{
  display:block;
  background:var(--white);
  padding:22px 24px;
  transition:background .2s var(--out);
}
.otras h3{
  font-size:1.05rem;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:8px;
}
.otras h3::after{
  content:"";
  width:14px;height:1px;background:var(--blue);
  transition:width .2s var(--out);
}
.otras p{
  font-size:13.5px;
  color:var(--steel);
  line-height:1.55;
}
@media (hover:hover) and (pointer:fine){
  .otras a:hover{ background:var(--paper); }
  .otras a:hover h3::after{ width:26px; }
}

/* El menú marca la página en la que estás */
.nav a[aria-current="page"]{ color:var(--ink); }

/* Portada del artículo y miniaturas del índice del blog */
.post-portada{
  aspect-ratio:16/9;overflow:hidden;background:var(--ink);
  margin:0 0 38px;max-width:880px;
}
.post-portada img{width:100%;height:100%;object-fit:cover;display:block}
.post-more-portada{
  aspect-ratio:16/9;overflow:hidden;background:var(--ink);
  margin:-24px -24px 18px;
}
.post-more-portada img{width:100%;height:100%;object-fit:cover;display:block}