@import url("identity.css");

/* Base editorial compartida de PÁMPANO: artículos de Revista y guías prácticas.
   Lectura larga en Source Serif 4, interfaz en Inter, filetes discretos, sin tarjetas ni sombras. */

.editorial .breadcrumbs{margin-bottom:var(--space-6)}
.editorial .article{max-width:48rem}
.editorial .article h1{max-width:18ch;font-size:clamp(2.5rem,6vw,4.4rem)}

.article-meta{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;margin:0 0 1.25rem;padding:.7rem 0;color:var(--earth);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:700 .74rem/1.4 var(--font-ui);letter-spacing:.12em;text-transform:uppercase}
.article-meta time,.article-meta .revised{color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:none}

/* Entradilla: no usa .lead para que main.js no inserte imágenes genéricas. */
.standfirst{max-width:40rem;margin:var(--space-5) 0 var(--space-6);color:var(--earth);font:400 clamp(1.3rem,2.3vw,1.6rem)/1.42 var(--font-editorial)}

.editorial .editorial-figure{margin:var(--space-6) 0 var(--space-7)}
.editorial .editorial-figure img{border-radius:0}

.editorial .article h2{margin-top:var(--space-8)}
.editorial .article h3{font-size:clamp(1.3rem,2.2vw,1.55rem)}
.editorial .article > p:first-of-type{margin-top:0}

/* Cabecera con fotografía amplia (fuera de la columna de lectura) */
.article-head{max-width:48rem}
.article-head .standfirst{margin-bottom:0}
.editorial-hero{margin:var(--space-6) 0 var(--space-7)}
.editorial-hero picture,.editorial-hero img{display:block;width:100%}
.editorial-hero img{height:auto;aspect-ratio:16/7;object-fit:cover;background:var(--cream-alt)}
.editorial-hero figcaption,.figure-aside figcaption,.figure-plate figcaption{max-width:var(--container-reading);padding-top:var(--space-3);color:var(--muted);border-top:1px solid var(--ochre);font-size:.79rem;line-height:1.55}
.editorial-hero figcaption{margin-top:.6rem}

/* Fotografía entre secciones con recorte controlado */
.editorial .editorial-figure.figure-crop img{aspect-ratio:3/2;object-fit:cover}

/* Figura junto al texto */
.figure-aside{float:right;width:min(44%,20rem);margin:.35rem 0 var(--space-5) var(--space-6)}
.figure-aside img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--cream-alt)}
.figure-aside figcaption{margin-top:.5rem;font-size:.76rem}
.clear-float{clear:both}

/* Láminas didácticas (nudos, secuencias) */
.figure-plate{margin:var(--space-5) 0 var(--space-6)}
.figure-plate .plate-frame{padding:clamp(.6rem,2vw,1.1rem);background:var(--cream-alt);border-top:2px solid var(--forest)}
.figure-plate img{display:block;width:100%;height:auto}
.figure-plate figcaption{margin-top:.55rem}
.figure-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.6rem,2vw,1rem)}
.figure-pair span{display:block;margin-top:.35rem;color:var(--earth);font:700 .7rem/1.3 var(--font-ui);letter-spacing:.1em;text-transform:uppercase}

/* Nota o decisión: filete lateral, sin caja de color fuerte */
.note-block{margin:var(--space-6) 0;padding:.2rem 0 .2rem 1.25rem;border-left:3px solid var(--ochre)}
.note-block p{margin:.4rem 0}
.note-block strong{color:var(--forest);font-family:var(--font-ui);font-size:.95rem}

/* Listas de acción: marcador ocre, sin plegar */
.check-list{margin:var(--space-5) 0;padding-left:1.25rem}
.check-list li{margin-block:.55rem}
.check-list li::marker{color:var(--ochre)}

/* Pasos numerados (nudos, secuencias) */
.steps-list{counter-reset:step;margin:var(--space-5) 0;padding:0;list-style:none}
.steps-list>li{position:relative;margin:0;padding:.75rem 0 .75rem 3rem;border-top:1px solid var(--line)}
.steps-list>li:last-child{border-bottom:1px solid var(--line)}
.steps-list>li::before{counter-increment:step;content:counter(step);position:absolute;top:.85rem;left:0;width:2rem;color:var(--earth);font:700 .9rem/1.6 var(--font-ui);text-align:center;border-right:1px solid var(--line-strong)}

/* Comparación en columnas con filetes */
.criteria-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-6);margin:var(--space-5) 0}
.criteria-grid>div{padding:var(--space-4) 0;border-top:1px solid var(--line-strong)}
.criteria-grid h3{margin:0 0 .35rem;font-size:1.2rem}
.criteria-grid p{margin:0;font-size:1.05rem!important}

.editorial .table-wrap{border:0;border-top:2px solid var(--forest);border-radius:0}
.editorial table{min-width:34rem;font-family:var(--font-ui)}
.editorial th{color:var(--mountain);background:transparent;border-bottom:1px solid var(--line-strong)}
.editorial tbody tr:nth-child(even){background:transparent}
.editorial td{font-size:.95rem}
.editorial td:first-child{color:var(--forest);font-weight:650}

.source-list{padding-left:1.1rem}
.source-list li{margin-bottom:.7rem;font-size:1rem!important}
.status-note{color:var(--muted);font-size:.95rem!important}

/* Siguiente lectura: reutiliza .next-step-panel de identity.css (main.js no añade otro) */
.editorial .next-step-panel{margin-top:var(--space-8);border-left-width:3px}
.editorial .next-step-panel h2{margin-top:0}
.article-foot{margin-top:var(--space-6);padding-top:var(--space-4);color:var(--muted);border-top:1px solid var(--line);font:400 .88rem/1.5 var(--font-ui)}

/* Compatibilidad: guías prácticas ya reconstruidas (antes en practical-guides.css) */
.practical-guide .guide-meta{display:flex;flex-wrap:wrap;gap:.55rem 1.25rem;margin:0 0 1.4rem;padding:.8rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.88rem;text-transform:uppercase;letter-spacing:.08em}
.practical-guide .decision-box{margin:1.8rem 0;padding:1.35rem;border-left:4px solid var(--forest);background:var(--cream-alt)}
.practical-guide .decision-box h2{margin-top:0}
.practical-guide .check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:1.5rem 0;background:var(--line)}
.practical-guide .check-card{padding:1.2rem;background:var(--cream)}
.practical-guide .check-card h3{margin-top:0}
.practical-guide .source-list li{margin-bottom:.75rem}
.practical-guide .status-note{font-size:.95rem;color:var(--muted)}

@media (max-width:52rem){
  .criteria-grid{grid-template-columns:1fr}
  .editorial-hero img{aspect-ratio:3/2}
}
@media (max-width:40rem){
  .figure-aside{float:none;width:100%;margin:var(--space-5) 0}
  .figure-aside img{aspect-ratio:3/2}
  .figure-pair{grid-template-columns:1fr}
}
@media (max-width:700px){
  .practical-guide .check-grid{grid-template-columns:1fr}
  .practical-guide .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .practical-guide table{min-width:610px}
  .practical-guide .guide-meta{display:block}
  .practical-guide .guide-meta span{display:block;margin:.25rem 0}
}
@media (max-width:35rem){
  .editorial table{min-width:32rem}
  .steps-list>li{padding-left:2.5rem}
  .steps-list>li::before{width:1.6rem}
}