/* =========================================================================
   Plena — Informes de producto (vitamina-d3-k2, colageno-verisol, creatina)
   CSS plano, sin build, cargado junto a landing.css. Reutiliza sus tokens de
   color/tipografía y componentes (header/footer reales, .btn-primary,
   .dimensions-grid/.dimension-card, .pillar-card/.pillar-title/.pillar-desc
   para las "notas"). Tipografía de artículo (párrafo largo, tablas, listas
   numeradas) es propia de esta plantilla, no existe en landing.css.
   ========================================================================= */

.informe-main { overflow-x:hidden; font-size:17px; line-height:1.68; }
.informe-main a:not(.btn-primary) { color:var(--color-teal-800); text-decoration-thickness:1px; text-underline-offset:.18em; }

.informe-mono { font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

/* ---- Hero: banda oscura con imagen de fondo, sin dos columnas (aquí el
   protagonista es el titular del informe, no el producto). ---- */
.informe-hero { position:relative; overflow:hidden; background-image:url('/images/landing/c-hero.png'); background-size:cover; background-position:center; box-shadow:var(--shadow-peach); }
.informe-hero::after { content:''; position:absolute; inset:0; background:rgba(11,65,65,.62); }
.informe-hero-inner { position:relative; z-index:1; max-width:900px; margin:0 auto; padding:clamp(48px,8vw,96px) 0; display:flex; flex-direction:column; gap:20px; }
.informe-hero .kicker { color:var(--color-beige-300); font-size:13px; }
.informe-hero h1 { font-family:var(--font-display); font-weight:800; font-size:clamp(38px,7vw,68px); line-height:1.04; color:#fff; max-width:16ch; letter-spacing:-.025em; }
.informe-hero-deck { font-size:clamp(17px,2.2vw,22px); line-height:1.5; color:#fff; opacity:.93; max-width:36rem; }
/* ---- Metadatos del informe: antes eran spans sueltos separados solo por
   gap (sin separador visual, así que en pantallas estrechas donde cada
   uno cae en su propia línea quedaban flotando sin relación entre sí).
   Se añade el separador "·" real (viene del CSS, no del contenido, para
   no repetirlo en cada idioma) y una línea fina que corta con el párrafo
   de arriba, como en el resto de fichas del sitio (.informe-spec-head). ---- */
.informe-byline { display:flex; flex-wrap:wrap; margin-top:22px; margin-bottom:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.22); font-size:13px; font-weight:500; color:var(--color-beige-300); }
.informe-byline span::after { content:'\00b7'; margin:0 10px; opacity:.55; }
.informe-byline span:last-child::after { content:none; margin:0; }

.informe-page { max-width:900px; margin:0 auto; }

/* ---- Ficha "lo esencial en 30 segundos" ---- */
.informe-spec { background:#fff; border-radius:2rem; box-shadow:var(--shadow-peach); border:1px solid rgba(47,59,55,.08); margin:-48px auto 0; position:relative; z-index:2; overflow:hidden; }
.informe-spec-head { display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; padding:24px clamp(20px,3vw,32px) 18px; border-bottom:1px solid rgba(47,59,55,.08); }
.informe-spec-head h2 { font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--color-green-900); }
.informe-spec-head .kicker { color:var(--color-sage-muted); }
.informe-spec-row { display:grid; grid-template-columns:8rem 1fr; gap:5px 24px; padding:17px clamp(20px,3vw,32px); border-bottom:1px solid rgba(47,59,55,.08); }
.informe-spec-row:last-of-type { border-bottom:0; }
.informe-spec-row dt { font-family:var(--font-display); font-weight:800; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-sage-muted); padding-top:.5em; }
.informe-spec-row dd { margin:0; }
.informe-spec-val { display:block; font-family:var(--font-display); font-weight:800; font-size:21px; line-height:1.2; letter-spacing:-.02em; color:var(--color-green-900); }
.informe-spec-note { display:block; font-size:15px; line-height:1.5; color:var(--color-forest-700); margin-top:3px; }

/* ---- Índice ---- */
.toc { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:0 32px; margin-top:48px; padding-top:18px; border-top:2px solid var(--color-green-900); }
.toc a { display:block; padding:7px 0; font-size:14px; color:var(--color-sage-muted); text-decoration:none; border-bottom:1px solid rgba(47,59,55,.08); }
.toc a:hover { color:var(--color-teal-800); }

/* ---- Separador entre bloques temáticos ---- */
.movement { margin-top:72px; padding-top:14px; border-top:2px solid var(--color-green-900); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.movement .kicker { color:var(--color-green-900); font-size:13px; }
.movement .kicker + .kicker { color:var(--color-sage-500); }

/* ---- Tipografía de artículo ---- */
.informe-main section { margin-top:52px; }
.informe-main section > * + * { margin-top:18px; }
.informe-main section h2 { font-family:var(--font-display); font-weight:800; font-size:clamp(24px,3.4vw,34px); line-height:1.14; color:var(--color-green-900); }
.informe-main section h2 + p { margin-top:22px; }
.informe-main section h3 { font-family:var(--font-display); font-weight:800; font-size:18px; line-height:1.35; color:var(--color-green-900); margin-top:32px; }
.informe-lede { font-size:18px; line-height:1.6; color:var(--color-sage-muted); }
.informe-main ul, .informe-main ol { padding-left:21px; }
.informe-main li { margin-top:8px; }
.informe-main li::marker { color:var(--color-sage-500); }

.callout { border-left:3px solid var(--color-sand); padding:2px 0 2px 22px; font-family:var(--font-display); font-weight:700; font-size:19px; line-height:1.4; color:var(--color-green-900); letter-spacing:-.015em; }

/* ---- Estacionalidad, en tarjeta ---- */
.informe-season { max-width:38rem; background:#fff; border:1px solid rgba(47,59,55,.13); border-radius:1.5rem; padding:22px 24px 20px; margin-top:28px; }
.informe-season .kicker { color:var(--color-sage-muted); }
.informe-season .season-grid { margin:14px 0 13px; }

/* ---- Tablas ---- */
.informe-scroll { overflow-x:auto; margin-top:28px; border-radius:1.25rem; border:1px solid rgba(47,59,55,.13); }
.informe-main table { border-collapse:collapse; width:100%; min-width:32rem; font-size:15px; }
.informe-main caption { caption-side:top; text-align:left; padding:16px 20px 4px; font-family:var(--font-display); font-weight:800; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-sage-muted); }
.informe-main th, .informe-main td { text-align:left; vertical-align:top; padding:14px 20px; border-bottom:1px solid rgba(47,59,55,.08); line-height:1.5; }
.informe-main th { font-family:var(--font-display); font-weight:800; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-sage-muted); background:var(--color-beige-100); border-bottom:1px solid rgba(47,59,55,.13); }
.informe-main tbody tr:last-child td { border-bottom:0; }
.informe-dose { font-family:var(--font-display); font-weight:800; color:var(--color-teal-800); white-space:nowrap; font-variant-numeric:tabular-nums; }
.informe-cmp td:first-child { font-family:var(--font-display); font-weight:700; color:var(--color-green-900); }
.informe-sev td:first-child { font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--color-forest-700); white-space:nowrap; border-left:5px solid var(--stripe,var(--color-sage-500)); }
.informe-sev th:first-child { border-left:5px solid transparent; }
tr.sev-1 { --stripe:var(--color-sage-500); }
tr.sev-2 { --stripe:var(--color-sand); }
tr.sev-3 { --stripe:var(--color-coral); }
tr.sev-4 { --stripe:var(--color-brick); }

/* ---- Listas numeradas de errores / pasos ---- */
.informe-mistakes, .informe-steps { list-style:none; padding:0; max-width:38rem; }
.informe-mistakes li > *, .informe-steps li > * { margin:0; }
.informe-mistakes { counter-reset:m; }
.informe-mistakes li { counter-increment:m; position:relative; padding:10px 0 10px 46px; border-bottom:1px solid rgba(47,59,55,.08); margin:0; line-height:1.55; }
.informe-mistakes li::before { content:counter(m,decimal-leading-zero); position:absolute; left:0; top:10px; font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--color-sand); letter-spacing:.05em; }
.informe-steps { counter-reset:s; }
.informe-steps li { counter-increment:s; position:relative; margin:0; padding:6px 0 6px 45px; line-height:1.55; }
.informe-steps li::before { content:counter(s); font-family:var(--font-display); font-weight:800; font-size:13px; color:#fff; background:var(--color-teal-600); width:1.6rem; height:1.6rem; border-radius:50%; display:grid; place-items:center; position:absolute; left:0; top:6px; }

/* ---- Cómo tomarlo (lista con separadores) ---- */
.informe-howto { display:grid; gap:0; max-width:38rem; margin-top:26px; }
.informe-howto > div { padding:18px 0; border-top:1px solid rgba(47,59,55,.08); }
.informe-howto > div:first-child { border-top:1px solid rgba(47,59,55,.13); }
.informe-howto h3 { margin:0 0 6px; font-size:17px; }
.informe-howto p { color:var(--color-sage-muted); }

/* ---- Banda melocotón (seguridad / contraindicaciones) ---- */
.informe-band { position:relative; overflow:hidden; background:var(--color-peach-shadow); margin:72px calc(50% - 50vw) 0; padding:clamp(40px,6vw,64px) 0; width:100vw; }
.informe-band-inner { max-width:900px; margin:0 auto; position:relative; z-index:1; }
.informe-band .movement { margin-top:0; border-top-color:var(--color-teal-600); }
.informe-band section:first-of-type { margin-top:40px; }
.informe-band h2 { color:var(--color-teal-600); }
.leaf { position:absolute; pointer-events:none; opacity:.55; z-index:0; }
.leaf-l { left:-5rem; bottom:-4rem; width:min(30vw,15rem); }
.leaf-r { right:-5rem; top:-4rem; width:min(30vw,15rem); }

/* ---- Contraindicaciones ---- */
.informe-contra { display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:24px; margin-top:28px; max-width:100%; }
.informe-contra > div { background:#fff; border-radius:1.5rem; padding:22px 24px; border-top:4px solid var(--color-brick); }
.informe-contra > div.warn { border-top-color:var(--color-sand); }
.informe-contra > div.accent { border-top-color:var(--color-coral); }
.informe-contra h3 { margin:0 0 10px; font-size:17px; }
.informe-contra ul { font-size:15px; padding-left:18px; }
.informe-contra li { margin-top:5px; }

/* ---- Callout de producto (ver también el producto) ---- */
.informe-product { display:grid; grid-template-columns:minmax(0,13rem) 1fr; gap:clamp(24px,4vw,48px); align-items:center; background:var(--color-green-900); border-radius:2rem; padding:clamp(28px,4vw,44px); margin-top:28px; box-shadow:var(--shadow-peach); }
.informe-product img { display:block; margin:0 auto; max-height:19rem; width:auto; }
.informe-product .kicker { color:var(--color-beige-300); }
.informe-product h3 { color:#fff; font-family:var(--font-display); font-weight:800; font-size:clamp(22px,2.6vw,30px); margin:10px 0 12px; line-height:1.18; }
.informe-product p { color:var(--color-beige-100); opacity:.9; font-size:16px; line-height:1.6; margin-bottom:22px; }
/* ---- Los 2 botones del callout: .btn-primary es inline-flex, así que en
   una columna estrecha el segundo botón salta a otra línea — un
   margin-left ya no separa nada porque ambos botones quedan en líneas
   distintas y el margen es horizontal. Con flex+gap se separan siempre,
   ya se queden en la misma línea o salten a la siguiente. ---- */
.informe-product-actions { display:flex; flex-wrap:wrap; gap:12px; }

/* ---- Cierre / recomendación final ---- */
.informe-finale { background:#fff; border-radius:2rem; padding:30px; max-width:38rem; box-shadow:var(--shadow-peach); border-left:4px solid var(--color-sand); margin-top:28px; }
.informe-finale blockquote { font-family:var(--font-display); font-weight:800; font-size:22px; line-height:1.3; color:var(--color-green-900); letter-spacing:-.02em; margin-bottom:22px; }
.informe-finale ul { padding-left:18px; font-size:15px; }
.informe-nopromise { background:var(--color-beige-100); border-radius:1.5rem; padding:26px 28px; max-width:38rem; margin-top:28px; }
.informe-nopromise ul { padding-left:18px; font-size:15px; }
.informe-nopromise li { margin-top:10px; }

/* ---- Fuentes consultadas ---- */
.informe-sources { margin-top:24px; max-width:100%; }
.informe-sources details { border-top:1px solid rgba(47,59,55,.13); padding:15px 0; }
.informe-sources summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-sage-muted); }
.informe-sources summary::-webkit-details-marker { display:none; }
.informe-sources summary::after { content:"+"; color:var(--color-sand); font-size:16px; }
.informe-sources details[open] summary::after { content:"\2013"; }
.informe-sources ul { padding-left:18px; margin-top:14px; font-size:14px; color:var(--color-sage-muted); line-height:1.55; }
.informe-sources li { margin-top:6px; }
.informe-sources em { color:var(--color-forest-700); font-style:italic; }

/* ---- .informe-hero-inner / .informe-page / .informe-band-inner solo
   llevan "margin:0 auto" + max-width:900px, sin padding horizontal propio:
   en desktop no se nota porque el viewport siempre supera los 900px y
   sobra aire a los lados, pero en mobile/tablet (viewport < 900px) el
   contenido queda pegado al borde de la pantalla. Mismos breakpoints que
   producto.css para que el par producto/informe se sienta consistente. ---- */
@media (max-width:56rem) {
  .informe-hero-inner, .informe-page, .informe-band-inner { padding-left:32px; padding-right:32px; }
}
@media (max-width:640px) {
  .informe-hero-inner, .informe-page, .informe-band-inner { padding-left:20px; padding-right:20px; }

  /* ---- Tablas en mobile: nada de scroll horizontal (mala UX táctil,
     y esconde columnas fuera de la vista sin avisar). Cada fila pasa a
     ser una tarjeta con pares etiqueta/valor apilados — la etiqueta sale
     del propio dato vía atributo data-label en cada <td> (añadido en los
     blades de informe, uno por columna, tomado del array $table['head']),
     no es contenido nuevo escondido en el CSS. El <table>/<thead> reales
     se mantienen en el DOM (accesibilidad/SEO), solo se ocultan
     visualmente. Mismo lenguaje visual que .informe-spec-row/.specs
     (etiqueta pequeña en mayúsculas encima del valor). ---- */
  .informe-scroll { overflow-x:visible; border:none; border-radius:0; }
  .informe-main table { min-width:0; }
  .informe-main caption { padding-left:0; padding-right:0; }
  .informe-main thead {
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;
  }
  .informe-main tbody { display:block; }
  .informe-main tr {
    display:block; background:#fff; border:1px solid rgba(47,59,55,.13);
    border-radius:1rem; padding:4px 18px; margin-top:12px;
    box-shadow:0 10px 24px -20px rgba(11,65,65,.4);
  }
  .informe-main tbody tr:first-child { margin-top:0; }
  .informe-main td {
    display:block; padding:12px 0;
    border-bottom:1px solid rgba(47,59,55,.08);
  }
  .informe-main tr td:last-child { border-bottom:0; }
  .informe-main td::before {
    content:attr(data-label); display:block; margin-bottom:4px;
    font-family:var(--font-display); font-weight:800; font-size:11px;
    letter-spacing:.07em; text-transform:uppercase; color:var(--color-sage-muted);
  }
  /* La franja de severidad pasa de borde de celda a borde de tarjeta
     entera (un borde de 5px en una sola línea de texto ya no se lee). */
  .informe-sev td:first-child { border-left:0; }
  .informe-sev tr { border-left:5px solid var(--stripe,var(--color-sage-500)); }
}

@media (max-width:38rem) {
  .informe-spec-row { grid-template-columns:1fr; }
  .informe-spec-row dt { padding-top:0; }
}
@media (max-width:40rem) {
  .informe-product { grid-template-columns:1fr; text-align:center; }
  .informe-product img { max-height:14rem; }
}