/* Clinics Developer — shared styles for the static build.
   Design tokens and behaviors ported 1:1 from the Claude Design prototypes. */
:root{
  --brand-blue:#284D64;
  --brand-teal:#3A6E71;
  --brand-ink:#102A38;
  --brand-blue-soft:#EAEDF0;
  --brand-blue-extra-soft:#F2F4F6;
  --brand-teal-soft:#EBF0F1;
  --brand-teal-extra-soft:#F3F6F6;
  --brand-border-blue:#D4DBE0;
  --brand-border-teal:#D8E2E3;
  --brand-background:#F7F8F8;
  --text-primary:#102A38;
  --text-secondary:#66757D;
  --brand-white:#FFFFFF;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:#F7F8F8}
img{max-width:100%}
[hidden]{display:none !important}

@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

/* Responsive nav visibility (replaces the runtime's isDesktop / isMobile) */
@media (max-width:899px){ [data-desk]{display:none !important} }
@media (min-width:900px){ [data-mob]{display:none !important} }

/* Mobile menu (was sc-if navOpen) — inline display:flex needs an !important override to hide */
.dc-mnav[hidden]{display:none !important}

/* Entrevistas: thumbnail hover (was injected at runtime) */
.cd-thumb:hover .cd-play{opacity:1 !important;transform:translate(-50%,-50%) scale(1) !important}
.cd-thumb:hover img{transform:scale(1.05)}

/* Entrevistas: focus visible on real-interview cards */
.cd-interview-card:focus-visible{outline:2px solid #7FB4B6;outline-offset:3px}

/* Entrevistas: featured card needs more height on narrow phones so the
   real (longer) title doesn't overflow the 16/6.6 media box */
@media (max-width:640px){
  .cd-featured-media{aspect-ratio:16/13 !important}
}

/* Footer: bloque de financiación institucional */
.footer-funding{display:flex;flex-direction:column;gap:18px}
.footer-funding img{display:block;height:auto;object-fit:contain}
.footer-funding .fn-tr{width:100%;max-width:200px}
.footer-funding .fn-eu{width:100%;max-width:240px}
@media (max-width:899px){
  .footer-funding{align-items:center;text-align:center;margin-top:8px}
  .footer-funding .fn-tr{max-width:160px}
  .footer-funding .fn-eu{max-width:200px}
}