/* Fisio Anxo Cortés · blog · capa de integración con la web (marca, cabecera, pie, barra móvil y bloque de Shorts) */
:root{
  --green:#7AB12A; --green-deep:#5F8C1E; --ink:#292F35; --ink-soft:#3A434B; --muted:#7A8489;
  --paper:#ffffff; --line:#E3E6E1; --wash:#EFF6E3;
  --sans:'Instrument Sans',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:'Archivo',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
body{font-family:var(--sans);color:var(--ink)}
h1,h2,h3,h4,.brand,.eyebrow,.section-label,.reading-nav strong,.topic-nav a,.quote-credit,.short-kicker,.play-label,.editorial-footer strong{font-family:var(--display)}
h1{font-weight:900}
.prose h2{font-weight:800}
button:focus-visible,a:focus-visible,summary:focus-visible{outline-color:var(--green-deep)}

/* ===== Cabecera (como la web) ===== */
.site-header{max-width:none;margin:0;padding:0;display:block;background:var(--ink)}
.site-header .hd{max-width:1120px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:14px}
.site-header .brand{display:inline-block;font-weight:900;font-size:16px;letter-spacing:.03em;color:#fff;text-decoration:none;white-space:nowrap}
.site-header .brand .o{color:var(--green)}
.site-header .sp{flex:1}
.site-header .nlink{font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#C7CDD1;text-decoration:none;padding:8px 10px}
.site-header .nlink:hover{color:#fff}
.site-header .cta-h{font-family:var(--display);font-weight:800;font-size:13px;background:var(--green);color:#fff;padding:10px 18px;border-radius:999px;text-decoration:none;transition:transform .15s,background .15s;display:inline-block}
.site-header .cta-h:hover{transform:translateY(-1px);background:var(--green-deep)}
@media(max-width:640px){.site-header .cta-h{display:none}}

/* ===== Hero en carbón y píldoras temáticas en verde ===== */
.clinical .hero{background:var(--ink)}
.clinical .hero .dek{color:#B9C2C7}
.clinical .hero .byline{border-color:rgba(255,255,255,.14);color:#C7CDD1}
.clinical .hero .eyebrow{color:var(--green)}
.clinical .hero figcaption{color:#B9C2C7}
.topic-nav a{background:var(--green);border-color:var(--green);color:#fff;font-weight:800;letter-spacing:.04em}
.topic-nav a:hover{background:var(--green-deep);border-color:var(--green-deep)}
.topic-nav a[aria-current]{background:var(--ink);border-color:var(--ink)}
.reading-nav a[aria-current]{color:var(--green-deep);font-weight:700}
.clinical .section-label{color:var(--green-deep)}
.sup-ref,.sources a,.reading-nav a:hover{color:var(--green-deep)}
.pullquote{border-left-color:var(--green)}
.photo .frame{background:var(--wash)}

/* ===== Shorts de YouTube (tres tarjetas 9:16, carga al pulsar) ===== */
.shorts-block{margin:40px 0 8px}
.shorts-heading{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.shorts-rule{height:3px;width:28px;background:var(--green);flex:none}
.shorts-heading h3{font-size:22px;letter-spacing:-.02em;margin:0;line-height:1.2}
.prose .shorts-context{font-size:15px;color:var(--muted);margin:0 0 18px}
.shorts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.short-card{margin:0;min-width:0}
.video-frame{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:var(--ink)}
.video-frame img,.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;display:block}
.short-launch{display:block;position:absolute;inset:0;color:#fff;text-decoration:none}
.play-icon{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:rgba(41,47,53,.8);display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s}
.play-icon svg{width:26px;height:26px;fill:#fff;margin-left:3px}
.short-launch:hover .play-icon{background:var(--green);transform:scale(1.06)}
.play-label{display:none}
.short-caption{margin-top:10px}
.short-kicker{display:block;font-size:10px;letter-spacing:.17em;font-weight:800;color:var(--green-deep)}
.short-caption h4{font-size:14px;line-height:1.35;margin:4px 0 6px;font-weight:700}
.short-external{font-size:12px;color:var(--green-deep);text-decoration:none;font-weight:600}
.short-external:hover{text-decoration:underline}
.prose .shorts-note{font-size:12px;color:var(--muted);margin:14px 0 0}
@media(max-width:760px){.shorts-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.shorts-grid{grid-template-columns:1fr;max-width:300px}}

/* ===== Pie (como la web) y barra móvil ===== */
.site-footer{background:var(--ink);color:#fff;padding:36px 22px 40px;text-align:left;border:0}
.site-footer .fgrid{max-width:1120px;margin:0 auto;display:flex;gap:32px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.site-footer .fbrand{font-family:var(--display);font-weight:900;color:#fff;font-size:15px}
.site-footer .fbrand .o{color:var(--green)}
.site-footer .flegal{font-size:11px;line-height:1.7;max-width:62ch;color:#C7CDD1;margin:14px 0 0}
.site-footer .fsoc{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.site-footer .fsoc a{width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;color:#C7CDD1;text-decoration:none;transition:.15s}
.site-footer .fsoc a svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.site-footer .fsoc a:hover{border-color:var(--green);color:var(--green)}
.site-footer .fsoc .flink{width:auto;height:auto;font-family:var(--display);font-size:12.5px;font-weight:700;color:#AEB6BA;border:1.4px solid #3A434B;border-radius:999px;padding:9px 14px;gap:6px}
.site-footer .fsoc .flink:hover{color:var(--green);border-color:var(--green)}
.mbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:90;display:none;gap:8px;background:rgba(41,47,53,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:20px;padding:10px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.mbar a{flex:1;font-family:var(--display);font-weight:800;font-size:12px;color:#fff;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:14px;text-decoration:none}
.mbar a.pri{background:var(--green)}
.mbar a svg.i{width:19px;height:19px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:640px){.mbar{display:flex}#canvas{padding-bottom:96px}}
@media print{.site-header,.site-footer,.mbar,.shorts-block{display:none!important}}