/* Artículos del centro de recursos: continuidad visual con Nuvacta. */

.resource-card h3 a { color: inherit; text-decoration: none; }
.resource-card h3 a:hover,
.resource-card h3 a:focus-visible { text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .16em; }
.resource-card .resource-read { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; color: inherit; font: 780 .82rem/1.2 var(--font-ui); }

.article-hero { padding-block: clamp(2.8rem, 5vw, 5rem) clamp(1.8rem, 3vw, 3rem); }
.article-hero__back { display: inline-flex; margin-bottom: 1.35rem; color: var(--blue-deep); font: 760 .82rem/1.2 var(--font-ui); text-decoration: none; }
.article-hero__back:hover,
.article-hero__back:focus-visible { text-decoration: underline; }
.article-hero h1 { max-width: 15ch; margin: 0; font: 760 clamp(2.65rem, 1.8rem + 3.8vw, 6rem)/1.02 var(--font-ui); letter-spacing: -.04em; text-wrap: balance; }
.article-hero h1 strong { font-weight: 900; }
.article-deck { max-width: 66ch; margin: 1.25rem 0 0; font-size: clamp(1.05rem, .98rem + .3vw, 1.35rem); font-weight: 430; line-height: 1.58; }
.article-meta { display: flex; flex-wrap: wrap; gap: .55rem 1.1rem; margin-top: 1.35rem; color: var(--ink-soft); font: 560 .75rem/1.4 var(--font-data); letter-spacing: .04em; text-transform: uppercase; }

.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: clamp(1.8rem, 4.5vw, 4.5rem); align-items: start; }
.article-body { max-width: 76ch; font-size: clamp(1rem, .96rem + .16vw, 1.14rem); line-height: 1.72; }
.article-body > :first-child { margin-top: 0; }
.article-body h2 { margin: clamp(2.3rem, 3.8vw, 3.5rem) 0 .9rem; font: 830 clamp(1.65rem, 1.35rem + 1.2vw, 2.5rem)/1.05 var(--font-ui); letter-spacing: -.018em; text-transform: uppercase; text-wrap: balance; }
.article-body h3 { margin: 1.8rem 0 .65rem; font: 780 clamp(1.2rem, 1.05rem + .55vw, 1.5rem)/1.12 var(--font-ui); text-transform: uppercase; }
.article-body a { color: var(--blue-deep); }
.article-body ul,
.article-body ol { padding-left: 1.35rem; }
.article-body li + li { margin-top: .5rem; }

.article-summary,
.article-aside,
.article-end-cta {
  border-radius: var(--surface-radius);
}
.article-summary { padding: clamp(1.25rem, 2.2vw, 1.9rem); background: var(--navy); color: var(--cream); }
.article-summary p { margin: 0; }
.article-summary strong { color: var(--acid); }
.article-callout { margin: 1.8rem 0; padding: clamp(1.1rem, 2vw, 1.6rem); border-left: .3rem solid var(--acid); border-radius: 0 var(--surface-radius) var(--surface-radius) 0; background: rgba(255,255,255,.34); }
.article-callout p:last-child { margin-bottom: 0; }

/* Recurso gráfico específico por guía. Se selecciona por canonical estático. */
.article-summary::after {
  display: grid;
  min-height: 7.5rem;
  margin-top: 1.25rem;
  padding: clamp(1rem, 2vw, 1.45rem);
  place-items: center;
  border: 1px solid rgba(247,247,237,.18);
  border-radius: var(--surface-radius);
  background:
    radial-gradient(circle at 1px 1px, rgba(247,247,237,.14) 1px, transparent 1.2px) 0 0 / 8px 8px,
    linear-gradient(135deg, rgba(82,140,160,.35), rgba(42,37,67,.18));
  color: var(--acid);
  font: 700 clamp(.76rem, .35vw + .7rem, 1rem)/1.45 var(--font-data);
  letter-spacing: .04em;
  text-align: center;
  white-space: pre-line;
}
html:has(link[rel="canonical"][href$="/condiciones-meteorologicas-poliza"]) .article-summary::after { content: "FENÓMENO  →  MAGNITUD  →  LÍMITE  →  PERIODO\A La condición solo se entiende cuando las cuatro piezas encajan"; }
html:has(link[rel="canonical"][href$="/cambio-climatico-seguro-hogar"]) .article-summary::after { content: "RIESGO METEOROLÓGICO CAMBIANTE  ≠  COBERTURA AUTOMÁTICA\A Exposición · póliza · episodio documentado"; }
html:has(link[rel="canonical"][href$="/consorcio-compensacion-seguros-riesgos-extraordinarios"]) .article-summary::after { content: "DAÑO METEOROLÓGICO\A ↙ COBERTURA ORDINARIA     RIESGO EXTRAORDINARIO ↘\A La vía depende del fenómeno y de los requisitos aplicables"; }
html:has(link[rel="canonical"][href$="/demostrar-viento-fuerte-seguro"]) .article-summary::after { content: "FECHA  →  ESTACIÓN  →  OBSERVACIÓN  →  PROCEDENCIA  →  INFORME\A Una cadena de evidencia es más útil que una captura aislada"; }
html:has(link[rel="canonical"][href$="/estacion-meteorologica-siniestro"]) .article-summary::after { content: "ESTACIÓN ÚTIL = PROXIMIDAD + COMPATIBILIDAD + DISPONIBILIDAD\A La más cercana no siempre es la que contiene la variable necesaria"; }
html:has(link[rel="canonical"][href$="/lluvia-litros-metro-cuadrado-seguro"]) .article-summary::after { content: "1 mm  =  1 l/m²\A 1 H     ·     3 H     ·     24 H\A El acumulado necesita siempre su periodo"; }
html:has(link[rel="canonical"][href$="/racha-maxima-vs-velocidad-media"]) .article-summary::after { content: "RACHA MÁXIMA   ████████████████  PICO\A VELOCIDAD MEDIA ██████████        PROMEDIO\A Son magnitudes distintas"; }
html:has(link[rel="canonical"][href$="/velocidad-viento-seguro-hogar"]) .article-summary::after { content: "VARIABLE  +  UMBRAL  +  UNIDAD  +  PERIODO\A = CONDICIÓN METEOROLÓGICA INTERPRETABLE"; }
html:has(link[rel="canonical"][href$="/que-tiempo-hizo-fecha-direccion"]) .article-summary::after { content: "UBICACIÓN + FECHA/HORA + VARIABLE + ESTACIÓN + DISTANCIA + PERIODO\A Reconstruir no es adivinar: cada pieza debe ser trazable"; }
html:has(link[rel="canonical"][href$="/dato-informe-certificado-meteorologico"]) .article-summary::after { content: "DATO  →  CONTEXTO  →  INFORME\A INFORME ≠ CERTIFICADO OFICIAL\A La procedencia del dato y la naturaleza del documento son cosas distintas"; }
html:has(link[rel="canonical"][href$="/plazo-comunicar-siniestro-seguro"]) .article-summary::after { content: "CONOCIMIENTO DEL SINIESTRO  →  COMUNICACIÓN\A 7 DÍAS: referencia general art. 16 LCS\A 2 AÑOS: prescripción de acciones en daños, art. 23 LCS"; }
html:has(link[rel="canonical"][href$="/sin-datos-meteorologicos-siniestro"]) .article-summary::after { content: "SIN DATO COMPATIBLE  ≠  FENÓMENO AUSENTE\A Revisar estación · variable · periodo · distancia · consolidación"; }

.article-steps { display: grid; gap: .7rem; margin: 1.2rem 0 0; padding: 0; list-style: none; counter-reset: article-step; }
.article-steps li { counter-increment: article-step; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .75rem; align-items: start; margin: 0; padding: .95rem 1rem; border: 1px solid var(--line); border-radius: var(--surface-radius); background: rgba(255,255,255,.24); }
.article-steps li::before { content: counter(article-step, decimal-leading-zero); color: var(--blue-deep); font: 650 .78rem/1.5 var(--font-data); }
.article-aside { position: sticky; top: 6.5rem; padding: 1.25rem; border: 1px solid var(--line); background: rgba(255,255,255,.3); }
.article-aside h2 { margin: 0 0 .8rem; font: 840 1.08rem/1.1 var(--font-ui); text-transform: uppercase; }
.article-aside ul { margin: 0; padding: 0; list-style: none; }
.article-aside li + li { margin-top: .65rem; }
.article-aside a { color: inherit; font-weight: 600; }
.article-sources { margin-top: clamp(2.5rem, 4vw, 4rem); padding-top: 1.4rem; border-top: 1px solid var(--line); }
.article-sources h2 { margin-top: 0; }
.article-sources li { overflow-wrap: anywhere; }
.article-note { margin-top: 1.7rem; color: var(--ink-soft); font-size: .94rem; }
.article-table-scroll { max-width: 100%; margin: 1.4rem 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--surface-radius); background: rgba(255,255,255,.22); }
.article-table { width: 100%; min-width: 42rem; border-collapse: collapse; font-size: .92em; line-height: 1.48; }
.article-table th,
.article-table td { padding: .85rem .9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.article-table th { background: rgba(42,37,67,.08); color: var(--navy); font: 760 .8rem/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: .025em; }
.article-table tr:last-child td { border-bottom: 0; }
.article-table td + td,
.article-table th + th { border-left: 1px solid var(--line); }
.article-end-cta { margin-top: clamp(2.5rem, 4vw, 4rem); padding: clamp(1.35rem, 2.6vw, 2.1rem); background: var(--navy); color: var(--cream); }
.article-end-cta .eyebrow { color: var(--acid); }
.article-end-cta h2 { margin-top: 0; }
.article-end-cta .button { margin-top: .4rem; background: var(--cream); color: var(--navy); }

/* Portada /recursos/: evita listing de directorio y sirve como hub SEO interno. */
.resource-index-hero { padding-block: clamp(3rem, 6vw, 6rem) clamp(2rem, 4vw, 3.8rem); }
.resource-index-hero h1 { max-width: 14ch; margin: 0; font: 720 clamp(3rem, 2rem + 4vw, 6.5rem)/.93 var(--font-ui); letter-spacing: -.045em; text-transform: uppercase; }
.resource-index-hero h1 strong { font-weight: 900; }
.resource-index-hero > p:not(.eyebrow) { max-width: 65ch; margin: 1.2rem 0 0; font-size: clamp(1.05rem, .98rem + .3vw, 1.32rem); }
.resource-index-visual { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: 2rem; padding: 1rem; border-radius: var(--surface-radius); background: var(--navy); color: var(--cream); width: fit-content; }
.resource-index-visual span,
.resource-index-visual b { font: 700 .72rem/1 var(--font-data); letter-spacing: .08em; }
.resource-index-visual b { color: var(--acid); }
.resource-index-visual i { color: var(--acid); font-style: normal; }
.resource-index-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-top: 1.5rem; }
.resource-index-card { position: relative; display: flex; min-height: 19rem; flex-direction: column; padding: clamp(1.35rem, 2.5vw, 2.1rem); border: 1px solid var(--line); border-radius: var(--surface-radius); background: rgba(255,255,255,.3); }
.resource-index-card__num { position: absolute; top: 1rem; right: 1.2rem; color: rgba(42,37,67,.14); font: 700 2.1rem/1 var(--font-data); }
.resource-index-card__category { margin: 0 0 3rem; color: var(--blue-deep); font: 650 .66rem/1.2 var(--font-data); letter-spacing: .08em; text-transform: uppercase; }
.resource-index-card h3 { max-width: 24ch; margin: 0; font: 830 clamp(1.25rem, 1rem + .65vw, 1.75rem)/1.14 var(--font-ui); text-transform: uppercase; }
.resource-index-card h3 a { color: inherit; text-decoration: none; }
.resource-index-card h3 a:hover,
.resource-index-card h3 a:focus-visible { text-decoration: underline; text-underline-offset: .15em; }
.resource-index-card > p:not(.resource-index-card__category) { max-width: 52ch; color: var(--ink-soft); }
.resource-index-card__link { position: static; margin-top: auto; padding-top: 1rem; color: var(--navy); font: 780 .78rem/1 var(--font-ui); text-transform: uppercase; }

@media (max-width: 60rem) {
  .article-layout { grid-template-columns: 1fr; }
  /* Mantener orden visual = orden DOM = orden de foco. */
  .article-aside { position: static; }
  .resource-index-grid { grid-template-columns: 1fr; }
}
@media (max-width: 42rem) {
  .article-hero.content-shell,
  .section.content-shell {
    width: calc(100% - 3rem);
  }
  .article-hero { padding-top: 2.2rem; }
  .article-hero h1 { font-size: clamp(2.25rem, 10.5vw, 3.75rem); line-height: 1.04; }
  .article-meta { display: grid; gap: .3rem; }
  .article-body { font-size: 1rem; }
  .article-body h2 { font-size: clamp(1.55rem, 7.5vw, 2.15rem); }
  .article-steps li { grid-template-columns: 2rem minmax(0, 1fr); padding: .85rem; }
  .article-table { min-width: 34rem; font-size: .88em; }
  .article-table th,
  .article-table td { padding: .72rem .75rem; }
  .article-end-cta .button { width: 100%; white-space: normal; text-align: center; }
  .resource-index-hero h1 { font-size: clamp(2.45rem, 12vw, 4rem); }
}

/* Conversion editorial → comprobador/app · 29/08/2026 */
.article-product-cta {
  margin: clamp(2rem, 4vw, 3.5rem) 0;
  padding: clamp(1.3rem, 3vw, 2rem);
  border: 1px solid rgba(254, 253, 113, .34);
  border-radius: var(--surface-radius);
  background: linear-gradient(135deg, rgba(254, 253, 113, .12), rgba(53, 48, 82, .35));
}
.article-product-cta h2 { margin: .2rem 0 .7rem; }
.article-product-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem;
}
.article-inline-tool {
  margin: 2rem 0;
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--acid);
  border-radius: 0 var(--surface-radius) var(--surface-radius) 0;
  background: rgba(254, 253, 113, .08);
}
.article-inline-tool p { margin: 0 0 .8rem; }
.article-faq { margin: clamp(2rem, 4vw, 3.5rem) 0; }
.article-faq details {
  padding: 1rem 0;
  border-top: 1px solid rgba(247, 247, 237, .16);
}
.article-faq details:last-child { border-bottom: 1px solid rgba(247, 247, 237, .16); }
.article-faq summary {
  cursor: pointer;
  font-weight: 800;
}
.article-faq details p { margin: .75rem 0 0; }
@media (max-width: 42rem) {
  .article-product-cta__actions { display: grid; }
  .article-product-cta__actions .button { width: 100%; }
}