/* =====================================================================
   DESIGN SYSTEM — EXTENSIÓN: páginas interiores, blog y artículo
   Aditivo sobre ds.css (no lo sustituye). Reutiliza los mismos tokens.
   Componentes nuevos para: cabecera interior, breadcrumb, grid de blog,
   tarjeta de post, paginación, artículo (prose), TOC, autor, relacionados.
   Mapeo Elementor: ver MAPEO-ELEMENTOR.md (mismas reglas por clase).
   ===================================================================== */

/* ---------- CABECERA DE PÁGINA INTERIOR (.page-hero) -------------------
   Hero compacto para páginas que no son la home: nosotros, contacto, blog.
   Patrón eyebrow→H1 (la keyword va en el H1). */
.page-hero{
  position:relative;padding:140px 0 64px;overflow:hidden;
  background:linear-gradient(180deg,var(--ink-2),var(--ink));
  border-bottom:1px solid var(--line);
}
.page-hero .glow{
  position:absolute;top:-180px;right:-120px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(139,195,74,.16),transparent 70%);pointer-events:none;
}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{
  font-weight:300;font-size:clamp(34px,5vw,60px);margin:18px 0 0;max-width:16ch;
}
.page-hero h1 b{font-weight:900}
.page-hero .lede{max-width:60ch;margin-top:20px}
.page-hero.center{text-align:center}
.page-hero.center h1,.page-hero.center .lede{margin-left:auto;margin-right:auto}

/* ---------- BREADCRUMB (.breadcrumb) ---------------------------------- */
.breadcrumb{font-size:13.5px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.breadcrumb a{color:var(--cream-dim);transition:color .2s var(--ease)}
.breadcrumb a:hover{color:var(--green-deep)}
.breadcrumb .sep{opacity:.5}
.breadcrumb [aria-current]{color:var(--cream)}

/* ---------- FILTRO DE CATEGORÍAS (.blog-cats) ------------------------- */
.blog-cats{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 44px}
.blog-cats a{
  font-size:14px;font-weight:600;padding:9px 18px;border-radius:100px;
  border:1px solid var(--line);color:var(--cream-dim);
  transition:all .22s var(--ease);
}
.blog-cats a:hover{border-color:var(--green);color:var(--green-deep)}
.blog-cats a.on{background:var(--green-ink);color:#fff;border-color:var(--green-ink)}

/* ---------- POST DESTACADO (.post-featured) --------------------------- */
.post-featured{
  display:grid;grid-template-columns:1.15fr .85fr;gap:0;align-items:stretch;
  border:1px solid var(--line);border-radius:24px;overflow:hidden;
  background:var(--ink);margin-bottom:56px;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.post-featured:hover{box-shadow:0 18px 40px rgba(51,51,51,.07);transform:translateY(-3px)}
.post-featured .ph{position:relative;overflow:hidden;min-height:340px}
.post-featured .ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.post-featured:hover .ph img{transform:scale(1.04)}
.post-featured .body{padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;justify-content:center}
.post-featured h2{font-weight:400;font-size:clamp(26px,3vw,38px);margin:14px 0 14px}
.post-featured p{color:var(--cream-dim);margin-bottom:22px}

/* Reset del borde discontinuo del primitivo .ph genérico (ds.css) en los
   huecos de imagen reales de blog/equipo (si no, heredan el dashed). */
.post-card .ph,.post-featured .ph,.team-grid .member .ph,.ph.is-ph{border:0}

/* ---------- PLACEHOLDER DE IMAGEN (.ph.is-ph) ------------------------- */
/* Hueco de imagen branded para maqueta: ni foto repetida ni hueco vacío.
   Sustituir por la imagen real del post (la clase .is-ph se quita y se mete <img>). */
.ph.is-ph{
  background:var(--ink-2) url('/wp-content/themes/demandamos/assets/iso-green.svg') no-repeat center 40% / 60px auto;
  display:block;
}
.post-featured .ph.is-ph{background-size:88px auto}
.ph.is-ph::after{
  content:"Imagen del post";position:absolute;left:0;right:0;bottom:16px;text-align:center;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}

/* ---------- ETIQUETA DE CATEGORÍA (.cat-tag) -------------------------- */
.cat-tag{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-deep);background:rgba(139,195,74,.14);
  padding:6px 12px;border-radius:100px;
}

/* ---------- META DE POST (.post-meta) --------------------------------- */
.post-meta{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:13px;color:var(--muted);margin-top:18px;
}
.post-meta .who{display:flex;align-items:center;gap:8px;color:var(--cream-dim)}
.post-meta .who img{width:26px;height:26px;border-radius:50%;object-fit:cover}
.post-meta .d{display:flex;align-items:center;gap:5px}
.post-meta svg{width:14px;height:14px;opacity:.7}

/* ---------- GRID DE POSTS (.blog-grid + .post-card) ------------------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.post-card{
  display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:18px;overflow:hidden;background:var(--ink);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.post-card:hover{box-shadow:0 18px 40px rgba(51,51,51,.07);transform:translateY(-4px)}
.post-card .ph{position:relative;aspect-ratio:16/10;overflow:hidden}
.post-card .ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.post-card:hover .ph img{transform:scale(1.05)}
.post-card .body{padding:26px;display:flex;flex-direction:column;flex:1}
.post-card h3{font-size:20px;line-height:1.2;margin:13px 0 10px}
.post-card h3 a{transition:color .2s var(--ease)}
.post-card:hover h3 a{color:var(--green-deep)}
.post-card p{font-size:15px;color:var(--cream-dim);line-height:1.55;margin-bottom:16px}
.post-card .post-meta{margin-top:auto;padding-top:6px}

/* ---------- PAGINACIÓN (.pagination) ---------------------------------- */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:64px}
.pagination a,.pagination span{
  min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px;border-radius:12px;border:1px solid var(--line);
  font-size:15px;font-weight:600;color:var(--cream-dim);transition:all .2s var(--ease);
}
.pagination a:hover{border-color:var(--green);color:var(--green-deep)}
.pagination .on{background:var(--green-ink);color:#fff;border-color:var(--green-ink)}
.pagination .nx{font-weight:700}

/* =====================================================================
   ARTÍCULO (single)
   ===================================================================== */
.article-head{padding:130px 0 0}
.article-head .wrap{max-width:820px}
.article-head h1{
  font-weight:300;font-size:clamp(30px,4.4vw,52px);line-height:1.08;
  margin:18px 0 0;letter-spacing:-.02em;
}
.article-head .standfirst{font-size:21px;line-height:1.5;color:var(--cream-dim);margin-top:22px}
.article-head .post-meta{margin-top:26px;font-size:14px}
.article-head .post-meta .who img{width:34px;height:34px}

/* portada del artículo */
.article-cover{max-width:1100px;margin:42px auto 0;padding:0 32px}
.article-cover img{width:100%;border-radius:24px;aspect-ratio:21/9;object-fit:cover;display:block}
.article-cover .cover-ph{width:100%;border-radius:24px;aspect-ratio:21/9;position:relative;
  background:var(--ink-2) url('/wp-content/themes/demandamos/assets/iso-green.svg') no-repeat center 42% / 110px auto;border:1px solid var(--line)}
.article-cover .cover-ph::after{content:"Imagen de portada";position:absolute;left:0;right:0;bottom:26px;
  text-align:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.article-cover figcaption{font-size:13px;color:var(--muted);text-align:center;margin-top:12px}

/* layout cuerpo + aside pegajoso */
.article-layout{
  max-width:1100px;margin:0 auto;padding:64px 32px 0;
  display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:60px;align-items:start;
}
.article-aside{position:sticky;top:104px;display:flex;flex-direction:column;gap:26px}

/* tabla de contenidos */
.toc{border:1px solid var(--line);border-radius:18px;padding:22px 24px;background:var(--ink-2)}
.toc .toc-t{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-bottom:14px}
.toc ul{list-style:none}
.toc li{margin:0 0 10px}
.toc a{font-size:14.5px;color:var(--cream-dim);line-height:1.4;display:block;
  padding-left:14px;border-left:2px solid transparent;transition:all .2s var(--ease)}
.toc a:hover,.toc a.on{color:var(--green-deep);border-left-color:var(--green)}

/* CTA lateral compacta */
.aside-cta{border:1px solid var(--line);border-radius:18px;padding:24px;
  background:linear-gradient(150deg,rgba(139,195,74,.12),var(--ink-2))}
.aside-cta h4{font-family:"Roboto";font-size:18px;font-weight:700;margin-bottom:8px}
.aside-cta p{font-size:14px;color:var(--cream-dim);margin-bottom:16px;line-height:1.5}

/* compartir */
.share{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.share a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;color:var(--cream-dim);
  transition:all .2s var(--ease)}
.share a:hover{border-color:var(--green);color:var(--green-deep);transform:translateY(-2px)}
.share svg{width:17px;height:17px}

/* ---------- TIPOGRAFÍA DEL CUERPO (.prose) ---------------------------- */
.prose{font-size:18.5px;line-height:1.75;color:var(--cream)}
.prose>*+*{margin-top:1.35em}
.prose p{color:#3a3f3a}
.prose h2{font-family:"Roboto";font-weight:700;font-size:clamp(24px,2.6vw,32px);
  line-height:1.18;margin-top:1.9em;letter-spacing:-.01em;scroll-margin-top:100px}
.prose h3{font-family:"Roboto";font-weight:700;font-size:21px;margin-top:1.6em;
  scroll-margin-top:100px}
.prose h2+p,.prose h3+p{margin-top:.6em}
.prose a{color:var(--green-deep);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(90,138,47,.4)}
.prose a:hover{text-decoration-color:var(--green-deep)}
.prose strong{font-weight:700;color:var(--cream)}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{margin:.5em 0}
.prose ul li::marker{color:var(--green-deep)}
.prose blockquote{
  border-left:3px solid var(--green);padding:6px 0 6px 26px;margin-left:0;
  font-family:"Roboto";font-style:italic;font-size:22px;line-height:1.4;color:var(--cream);
}
.prose img{width:100%;border-radius:18px;display:block}
.prose figure figcaption{font-size:13.5px;color:var(--muted);text-align:center;margin-top:10px}
.prose hr{border:none;border-top:1px solid var(--line);margin:2.4em 0}
.prose table{width:100%;border-collapse:collapse;font-size:15.5px}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.prose thead th{font-family:"Roboto";font-size:13px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--cream-dim);background:var(--ink-2)}
/* destacado/aviso dentro del cuerpo */
.prose .callout{background:var(--ink-2);border:1px solid var(--line);border-radius:16px;
  padding:22px 24px;font-size:16px;color:var(--cream-dim)}
.prose .callout strong{color:var(--green-deep)}

/* etiquetas al pie del artículo */
.article-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:42px}
.article-tags a{font-size:13px;color:var(--cream-dim);background:var(--ink-2);
  border:1px solid var(--line);border-radius:100px;padding:7px 14px;transition:all .2s var(--ease)}
.article-tags a:hover{border-color:var(--green);color:var(--green-deep)}

/* caja de autor */
.author-box{display:flex;gap:20px;align-items:flex-start;margin-top:48px;
  padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--ink-2)}
.author-box img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.author-box .role{font-size:13px;color:var(--green-deep);font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;margin:4px 0 8px}
.author-box h4{font-family:"Roboto";font-size:20px;margin-bottom:0}
.author-box p{font-size:15px;color:var(--cream-dim);line-height:1.55;margin-top:8px}

/* =====================================================================
   EQUIPO COMPLETO (.team-grid) — para la página Quiénes somos
   (la home usa .team-slider; aquí mostramos a todo el equipo de una pasada)
   ===================================================================== */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.team-grid .member{
  background:var(--ink);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  text-align:left;transition:box-shadow .3s var(--ease),transform .3s var(--ease);position:relative;
}
.team-grid .member:hover{box-shadow:0 18px 40px rgba(51,51,51,.07);transform:translateY(-4px)}
.team-grid .member .ph{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;filter:grayscale(1);
  transition:filter .4s var(--ease)}
.team-grid .member:hover .ph{filter:grayscale(0)}
.team-grid .member .info{padding:18px 18px 20px}
.team-grid .member h3{font-size:17px;line-height:1.2;margin-bottom:4px}
.team-grid .member .role{font-size:13px;color:var(--cream-dim)}
.team-grid .member .li{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.92);display:inline-flex;align-items:center;justify-content:center;
  color:var(--green-ink);opacity:0;transform:translateY(-6px);transition:all .25s var(--ease)
}
.team-grid .member:hover .li{opacity:1;transform:translateY(0)}
.team-grid .member .li svg{width:18px;height:18px}

/* tira de valores (reusa .grid-3 + .card con icono superior) */
.value-card .svc-ico{margin-bottom:16px}

/* =====================================================================
   CONTACTO — canales de contacto (.contact-methods)
   ===================================================================== */
.contact-methods{display:flex;flex-direction:column;gap:14px}
.contact-row{display:flex;align-items:center;gap:16px;padding:18px 20px;
  border:1px solid var(--line);border-radius:16px;background:var(--ink);
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.contact-row:hover{border-color:var(--green);transform:translateX(3px)}
.contact-row .ic{flex:0 0 auto;width:46px;height:46px;border-radius:12px;
  background:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;color:var(--green-deep)}
.contact-row .ic svg{width:22px;height:22px}
.contact-row .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.contact-row .tx .k{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.contact-row .tx .v{font-family:"Roboto";font-size:18px;font-weight:700;color:var(--cream)}
.contact-row .tx .v.sm{font-size:15px;font-weight:400;color:var(--cream-dim)}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:980px){
  .article-layout{grid-template-columns:1fr;gap:0}
  .article-aside{position:static;flex-direction:row;flex-wrap:wrap;margin-bottom:36px}
  .toc{display:none} /* el TOC desktop se oculta; en móvil estorba */
  .team-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .post-featured{grid-template-columns:1fr}
  .post-featured .ph{min-height:240px}
  .team-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .blog-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .page-hero{padding:118px 0 48px}
  .article-cover,.article-layout{padding-left:20px;padding-right:20px}
  .prose{font-size:17.5px}
}