/* ==========================================================================
   Desarrollo Organizacional · Hospital Regional de Antofagasta
   Hoja de estilos del sitio público (solo modo claro).

   Índice
   1. Fuentes y tokens
   2. Base y utilidades
   3. Layout (contenedor, secciones)
   4. Header, navegación y MobileNav
   5. Botones, enlaces y ExternalLink
   6. Hero
   7. SectionHeader
   8. ServiceCard
   9. ToolCard
   10. TeamCard y perfiles
   11. ResourceCard y avisos
   12. ContactBlock
   13. CTA
   14. PageHero y Breadcrumb
   15. Organigrama y Descriptores
   16. Footer
   17. Animaciones y accesibilidad
   ========================================================================== */

/* 1. Fuentes y tokens ------------------------------------------------------ */
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/public-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/public-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/public-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/public-sans-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:800;font-display:swap;src:url("/assets/fonts/public-sans-latin-800-normal.woff2") format("woff2")}

:root{
  color-scheme:light;
  /* Paleta tomada de los logos HRA y DO */
  --blue-900:#0b2f4f;   /* títulos */
  --blue-800:#0c416f;
  --blue-700:#0b5a96;   /* azul institucional (acciones) */
  --blue-600:#0c6ca8;
  --cyan-600:#00739f;   /* texto cian accesible */
  --cyan-500:#00a3d9;   /* cian logo */
  --teal-500:#2fb3bf;   /* turquesa logo */
  --sky-50:#f3f9fc;
  --sky-100:#e7f3f9;
  --sky-200:#cfe6f2;
  --ink:#16293a;
  --ink-2:#35495a;
  --muted:#5a6d7c;
  --line:#e1e9ef;
  --line-2:#cddbe4;
  --surface:#ffffff;
  --surface-2:#f6f9fb;
  --focus:#00739f;

  --font:"Public Sans","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(11,47,79,.06);
  --shadow:0 1px 2px rgba(11,47,79,.05),0 10px 28px -16px rgba(11,47,79,.22);
  --ease:cubic-bezier(.22,.8,.24,1);
  --header-h:72px;
  --gutter:20px;
  --container:1200px;
}

/* 2. Base y utilidades ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-700);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--blue-800)}
h1,h2,h3,h4{color:var(--blue-900);line-height:1.18;margin:0;letter-spacing:-.018em;text-wrap:balance}
p{margin:0}
p+p{margin-top:.9em}
ul{margin:0;padding:0}
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
::selection{background:var(--sky-200)}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-80px;z-index:200;background:var(--blue-700);color:#fff;padding:12px 18px;border-radius:var(--radius-sm);font-weight:700;text-decoration:none;transition:top .15s var(--ease)}
.skip-link:focus{top:12px;color:#fff}
.icon{width:24px;height:24px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icon-sm{width:18px;height:18px}
.icon-xs{width:15px;height:15px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-600)}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor}
.lede{font-size:1.1875rem;color:var(--ink-2);line-height:1.6;max-width:62ch}

/* 3. Layout ---------------------------------------------------------------- */
.container{width:100%;max-width:calc(var(--container) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.section{padding:72px 0}
.section-tight-top{padding-top:48px!important}
.section-tint{background:var(--sky-50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grid{display:grid;gap:20px}
@media (min-width:640px){:root{--gutter:28px}}
@media (min-width:1024px){.section{padding:104px 0}:root{--gutter:40px}}

/* 4. Header ---------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);border-bottom:1px solid transparent;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.site-header.is-scrolled{border-bottom-color:var(--line);box-shadow:0 6px 20px -16px rgba(11,47,79,.35)}
.header-inner{height:var(--header-h);display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--blue-900);flex:0 0 auto;border-radius:10px}
.brand-logos{display:flex;align-items:center;gap:12px}
.brand-logos img{height:48px;width:auto}
.brand-logos .logo-hra{height:46px}
.brand-sep{width:1px;height:36px;background:var(--line-2)}
.brand-text{display:none;line-height:1.2}
.brand-text strong{display:block;font-size:.9875rem;font-weight:800;letter-spacing:-.01em}
.brand-text span{display:block;font-size:.8125rem;color:var(--muted);font-weight:500}
.main-nav{margin-left:auto;display:none}
.main-nav ul{list-style:none;display:flex;align-items:center;gap:2px}
.main-nav a{display:block;padding:9px 12px;border-radius:9px;color:var(--ink-2);font-weight:600;font-size:.96875rem;text-decoration:none;transition:color .15s var(--ease),background-color .15s var(--ease)}
.main-nav a:hover{color:var(--blue-800);background:var(--sky-50)}
.main-nav a[aria-current="page"]{color:var(--blue-700);background:var(--sky-100)}
.btn.header-cta{display:none}
.nav-toggle{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:48px;height:46px;padding:0 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--blue-900);font:inherit;font-weight:700;font-size:.9375rem;cursor:pointer}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-open{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}
/* MobileNav */
.mobile-nav{position:fixed;inset:var(--header-h) 0 0 0;z-index:99;background:var(--surface);border-top:1px solid var(--line);overflow-y:auto;padding:12px var(--gutter) calc(32px + env(safe-area-inset-bottom,0px))}
.mobile-nav ul{list-style:none;display:grid;gap:2px}
.mobile-nav a{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 6px;border-bottom:1px solid var(--line);color:var(--blue-900);font-weight:700;font-size:1.1875rem;text-decoration:none}
.mobile-nav a .icon{color:var(--muted)}
.mobile-nav a[aria-current="page"]{color:var(--blue-700)}
.mobile-nav .btn{margin-top:22px;width:100%}
.mobile-nav-meta{margin-top:22px;font-size:.9375rem;color:var(--muted)}
.nav-open{overflow:hidden}
@media (min-width:480px){.brand-logos img{height:52px}.brand-logos .logo-hra{height:50px}}
@media (min-width:1080px){
  :root{--header-h:84px}
  .nav-toggle,.mobile-nav{display:none!important}
  .main-nav{display:block}
  .brand-logos img{height:58px}.brand-logos .logo-hra{height:56px}
  .brand-sep{height:44px}
}
@media (min-width:1320px){.brand-text{display:block}.btn.header-cta{display:inline-flex}}

/* 5. Botones y enlaces ---------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 22px;border-radius:12px;border:1.5px solid transparent;font:inherit;font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease),transform .12s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue-700);color:#fff}
.btn-primary:hover{background:var(--blue-800);color:#fff}
.btn-secondary{background:var(--surface);color:var(--blue-800);border-color:var(--line-2)}
.btn-secondary:hover{border-color:var(--blue-700);color:var(--blue-800);background:var(--sky-50)}
.btn-ghost{background:transparent;color:var(--blue-700);padding-left:4px;padding-right:4px;min-height:44px}
.btn-ghost:hover{color:var(--blue-900)}
.btn-sm{min-height:42px;padding:9px 16px;font-size:.9375rem;border-radius:10px}
.btn .icon{width:20px;height:20px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;color:var(--blue-700)}
.link-arrow .icon{width:18px;height:18px;transition:transform .18s var(--ease)}
.link-arrow:hover .icon{transform:translateX(3px)}
/* ExternalLink indicator */
.ext{display:inline-flex;align-items:center;gap:6px}
.ext .icon-ext{width:15px;height:15px;opacity:.75}

/* 6. Hero ------------------------------------------------------------------ */
.hero{position:relative;padding:36px 0 56px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0 0 auto 0;height:100%;background:linear-gradient(180deg,var(--sky-50),#fff 70%);z-index:-1}
.hero-grid{display:grid;gap:36px;align-items:center}
.hero-copy .eyebrow{margin-bottom:16px}
.hero h1{font-size:clamp(2.35rem,7.4vw,4rem);font-weight:800;letter-spacing:-.03em;line-height:1.04}
.hero h1 span{display:block;color:var(--blue-700)}
.hero-institution{margin-top:14px;font-size:1.0625rem;font-weight:600;color:var(--ink-2)}
.hero .lede{margin-top:20px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-actions .btn{flex:1 1 220px}
.hero-media{position:relative}
.hero-frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--sky-100);aspect-ratio:3/2;box-shadow:var(--shadow)}
.hero-frame img{width:100%;height:100%;object-fit:cover}
.hero-ring{position:absolute;width:190px;height:190px;border-radius:50%;border:2px solid var(--teal-500);opacity:.55;right:-60px;bottom:-60px;z-index:-1}
.hero-ring.r2{width:120px;height:120px;left:-44px;top:-40px;right:auto;bottom:auto;border-color:var(--cyan-500);opacity:.35}
.hero-caption{margin-top:12px;font-size:.875rem;color:var(--muted);display:flex;align-items:center;gap:8px}
.hero-caption .icon{width:17px;height:17px;color:var(--cyan-600)}
.hero-strip{margin-top:44px;display:grid;gap:10px;border-top:1px solid var(--line);padding-top:22px}
.hero-strip div{display:flex;align-items:flex-start;gap:12px;font-size:.96875rem;color:var(--ink-2)}
.hero-strip .icon{color:var(--cyan-600);margin-top:2px;width:21px;height:21px}
.hero-strip strong{display:block;color:var(--blue-900);font-size:.8125rem;text-transform:uppercase;letter-spacing:.08em}
@media (min-width:720px){.hero-strip{grid-template-columns:repeat(3,1fr);gap:24px}.hero-actions .btn{flex:0 0 auto}}
@media (min-width:1024px){
  .hero{padding:64px 0 76px}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
  .hero-ring{width:260px;height:260px;right:-90px;bottom:-80px}
}

/* 7. SectionHeader ---------------------------------------------------------- */
.section-header{max-width:720px;margin-bottom:40px}
.section-header .eyebrow{margin-bottom:12px}
.section-header h2{font-size:clamp(1.85rem,4.4vw,2.6rem);font-weight:800}
.section-header p{margin-top:14px;color:var(--ink-2);font-size:1.125rem}
.section-header.center{margin-left:auto;margin-right:auto;text-align:center}
.section-header.center .eyebrow::before{display:none}
.section-header-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 32px;margin-bottom:40px}
.section-header-row .section-header{margin-bottom:0}

/* Bienvenida */
.welcome{display:grid;gap:28px}
.welcome-text{font-size:1.25rem;line-height:1.6;color:var(--ink-2)}
.welcome-text strong{color:var(--blue-900)}
.welcome-list{list-style:none;display:grid;gap:12px}
.welcome-list li{margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden;transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}
.welcome-list li:hover{border-color:var(--sky-200);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.welcome-link{display:flex;gap:14px;align-items:flex-start;width:100%;padding:16px 18px;color:inherit;text-decoration:none}
.welcome-link:hover{color:inherit;background:var(--sky-50)}
.welcome-link>div{min-width:0;flex:1}
.welcome-list .icon{color:var(--blue-700);margin-top:1px}
.welcome-list strong{display:block;color:var(--blue-900);font-size:1rem}
.welcome-list span{font-size:.9375rem;color:var(--muted)}
.welcome-link-arrow{align-self:center;width:18px!important;height:18px!important;margin:0!important;color:var(--blue-600)!important;transition:transform .18s var(--ease)}
.welcome-link:hover .welcome-link-arrow{transform:translateX(3px)}
@media (min-width:960px){.welcome{grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}}

/* 8. ServiceCard ----------------------------------------------------------- */
.services{grid-template-columns:1fr}
.service-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 26px 30px;display:flex;flex-direction:column;gap:14px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.service-card::after{content:"";position:absolute;left:26px;right:26px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--accent,var(--cyan-500))}
.service-card:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-2px)}
.service-num{font-size:.8125rem;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.service-icon{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:var(--tint,var(--sky-100));color:var(--accent-ink,var(--blue-700))}
.service-icon .icon{width:30px;height:30px;stroke-width:1.6}
.service-card h3{font-size:1.375rem;font-weight:800}
.service-card p{color:var(--ink-2)}
.service-card.s-clima{--accent:var(--teal-500);--tint:#e3f5f6;--accent-ink:#0e7580}
.service-card.s-estructura{--accent:var(--blue-600);--tint:#e5eff8;--accent-ink:var(--blue-700)}
.service-card.s-desempeno{--accent:var(--cyan-500);--tint:#e1f4fb;--accent-ink:var(--cyan-600)}
@media (min-width:860px){.services{grid-template-columns:repeat(3,1fr);gap:24px}}

/* 9. ToolCard -------------------------------------------------------------- */
.tools{grid-template-columns:1fr}
.tool-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.tool-card:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-2px)}
.tool-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--sky-100);color:var(--blue-700)}
.tool-icon .icon{width:27px;height:27px}
.tool-card h3{font-size:1.25rem;font-weight:800}
.tool-card p{color:var(--ink-2);font-size:1rem;flex:1}
.tool-card .btn{align-self:flex-start;margin-top:4px}
.tool-card.featured{background:var(--blue-800);border-color:var(--blue-800);color:#fff}
.tool-card.featured h3{color:#fff}
.tool-card.featured p{color:#d7e6f2}
.tool-card.featured .tool-icon{background:rgba(255,255,255,.12);color:#fff}
.tool-card.featured .btn-primary{background:#fff;color:var(--blue-800)}
.tool-card.featured .btn-primary:hover{background:var(--sky-100)}
.tool-card.featured:hover{border-color:var(--blue-900)}
.tool-meta{font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-600)}
.tool-card.featured .tool-meta{color:#9fd9f0}
@media (min-width:720px){.tools{grid-template-columns:repeat(2,1fr);gap:20px}}
@media (min-width:1160px){.tools{grid-template-columns:repeat(4,1fr)}}

/* 10. TeamCard y perfiles -------------------------------------------------- */
.team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:640px){.team-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
@media (min-width:1080px){.team-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.team-card{text-align:center;padding:26px 18px 24px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.team-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.avatar{display:block;position:relative;width:min(128px,100%);aspect-ratio:1;height:auto;margin:0 auto 16px;border-radius:50%;padding:5px;background:linear-gradient(135deg,var(--cyan-500),var(--blue-600) 60%,var(--teal-500))}
.avatar picture,.hero-frame picture,.team-photo picture{display:block;width:100%;height:100%}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#fff;border:3px solid #fff}
.team-card h3{font-size:1.0625rem;font-weight:800}
.team-card p{margin-top:4px;font-size:.9375rem;color:var(--muted);line-height:1.45}
.team-photo{margin:0 0 56px}
.team-photo .frame{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:3/2;background:var(--sky-100)}
.team-photo img{width:100%;height:100%;object-fit:cover}
.team-photo figcaption{margin-top:12px;font-size:.9375rem;color:var(--muted)}
.profiles{display:grid;gap:22px}
.profile{display:grid;gap:22px;padding:26px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.profile-media{display:flex;align-items:center;gap:18px}
.profile .avatar{width:112px;margin:0;flex:0 0 auto}
.profile-head h2{font-size:1.5rem;font-weight:800}
.profile-role{margin-top:4px;font-weight:700;color:var(--cyan-600);font-size:1rem}
.profile-bio{color:var(--ink-2)}
.profile-contact{display:flex;flex-wrap:wrap;gap:10px 22px;padding-top:16px;border-top:1px solid var(--line);font-size:.96875rem}
.profile-contact a,.profile-contact span{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);text-decoration:none;overflow-wrap:anywhere}
.profile-contact a{color:var(--blue-700);font-weight:600}
.profile-contact a:hover{text-decoration:underline}
.profile-contact .icon{width:19px;height:19px;color:var(--cyan-600)}
@media (min-width:860px){
  .profile{grid-template-columns:220px minmax(0,1fr);gap:40px;padding:36px 40px;align-items:center}
  .profile-media{flex-direction:column;justify-content:center;align-self:stretch;background:var(--sky-50);border-radius:var(--radius);padding:28px 16px}
  .profile .avatar{width:156px}
  .profile:nth-child(even){grid-template-columns:minmax(0,1fr) 220px}
  .profile:nth-child(even) .profile-media{order:2}
  .profile-body{display:grid;gap:14px}
}
@media (max-width:859px){.profile-body{display:grid;gap:14px}}

/* 11. ResourceCard y avisos ------------------------------------------------ */
.resource-group+.resource-group{margin-top:64px}
.group-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px}
.group-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--sky-100);color:var(--blue-700);flex:0 0 auto}
.group-head h2{font-size:clamp(1.5rem,3.4vw,1.9rem);font-weight:800}
.group-head p{margin-top:6px;color:var(--ink-2)}
.resources{grid-template-columns:1fr}
.resource-card{display:flex;gap:16px;align-items:flex-start;padding:20px 20px 20px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-decoration:none;color:inherit;transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}
.resource-card:hover{border-color:var(--blue-600);box-shadow:var(--shadow);transform:translateY(-1px);color:inherit}
.res-type{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto}
.res-type .icon{width:25px;height:25px}
.res-type.t-pdf{background:#fdecee;color:#b3263a}
.res-type.t-proc{background:#e5eff8;color:var(--blue-700)}
.res-type.t-curso{background:#e3f5f6;color:#0e7580}
.res-type.t-repo{background:#fdf3de;color:#8a5a00}
.res-body{flex:1;min-width:0}
.res-label{display:block;font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.res-title{display:block;margin-top:3px;font-size:1.0625rem;font-weight:700;color:var(--blue-900);line-height:1.35}
.res-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:.875rem;color:var(--muted)}
.res-go{align-self:center;color:var(--blue-700);display:inline-flex}
.res-go .icon{width:20px;height:20px}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px;font-size:.8125rem;font-weight:700;background:var(--sky-100);color:var(--blue-800)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.notice{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--radius);background:var(--sky-50);border:1px solid var(--sky-200);color:var(--ink-2);font-size:.96875rem}
.notice .icon{color:var(--cyan-600);margin-top:1px}
.notice strong{color:var(--blue-900)}
.repo-card{display:grid;gap:18px;padding:28px;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface)}
.repo-card h3{font-size:1.25rem;font-weight:800}
.repo-card p{color:var(--ink-2)}
.soon-card{display:flex;gap:16px;align-items:flex-start;padding:20px;border:1.5px dashed var(--line-2);border-radius:var(--radius);color:var(--muted);font-size:.96875rem}
.soon-card strong{display:block;color:var(--ink-2)}
@media (min-width:760px){.resources{grid-template-columns:repeat(2,1fr);gap:16px}.repo-card{grid-template-columns:1fr auto;align-items:center;padding:32px 36px}}

/* 12. ContactBlock ---------------------------------------------------------- */
.contact{display:grid;gap:22px}
.contact-card{padding:28px;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line)}
.contact-list{list-style:none;display:grid;gap:22px}
.contact-list li{display:flex;gap:16px;align-items:flex-start}
.contact-list .c-icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--sky-100);color:var(--blue-700);flex:0 0 auto}
.contact-list .c-icon .icon{width:23px;height:23px}
.contact-list .c-label{display:block;font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.contact-list .c-value{display:block;margin-top:2px;font-weight:600;color:var(--blue-900);overflow-wrap:anywhere}
.contact-list a.c-value{color:var(--blue-700)}
.anexos{list-style:none;display:grid;gap:6px;margin-top:6px}
.anexos li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.96875rem}
.anexos li:last-child{border-bottom:0}
.anexos span{color:var(--ink-2)}
.anexos strong{color:var(--blue-900);font-variant-numeric:tabular-nums;white-space:nowrap}
.agenda-card{padding:32px 28px;border-radius:var(--radius-lg);background:var(--blue-800);color:#fff;display:flex;flex-direction:column;gap:16px}
.agenda-card .tool-icon{background:rgba(255,255,255,.12);color:#fff}
.agenda-card h3{color:#fff;font-size:1.5rem;font-weight:800}
.agenda-card p{color:#d7e6f2}
.agenda-card .btn{align-self:flex-start;background:#fff;color:var(--blue-800)}
.agenda-card .btn:hover{background:var(--sky-100);color:var(--blue-900)}
.org-lines{font-size:.9375rem;color:var(--muted);line-height:1.55;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.org-lines strong{color:var(--ink-2)}
@media (min-width:900px){.contact{grid-template-columns:1.35fr 1fr;gap:24px;align-items:start}.contact-card{padding:36px}}

/* 13. CTA ------------------------------------------------------------------ */
.cta{display:grid;gap:20px;align-items:center;padding:34px 28px;border-radius:var(--radius-lg);background:var(--sky-100);border:1px solid var(--sky-200)}
.cta h2{font-size:clamp(1.5rem,3.4vw,2rem);font-weight:800}
.cta p{margin-top:8px;color:var(--ink-2)}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}
@media (min-width:860px){.cta{grid-template-columns:1fr auto;padding:40px 48px}}

/* 14. PageHero y Breadcrumb ------------------------------------------------ */
.page-hero{padding:28px 0 48px;background:linear-gradient(180deg,var(--sky-50),#fff);border-bottom:1px solid var(--line)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 26px;padding:0;font-size:.9375rem}
.breadcrumb li{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.breadcrumb li+li::before{content:"";width:6px;height:6px;border-right:1.6px solid var(--line-2);border-top:1.6px solid var(--line-2);transform:rotate(45deg);margin-right:4px}
.breadcrumb a{color:var(--blue-700);text-decoration:none;font-weight:600}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb [aria-current]{color:var(--ink-2);font-weight:600}
.page-hero h1{font-size:clamp(2.1rem,6vw,3.25rem);font-weight:800;letter-spacing:-.028em;margin-top:12px}
.page-hero .lede{margin-top:16px}
@media (min-width:1024px){.page-hero{padding:36px 0 64px}}

/* 15. Organigrama y Descriptores ------------------------------------------ */
.doc-card{display:grid;gap:22px;padding:30px 28px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm)}
.doc-head{display:flex;gap:18px;align-items:flex-start}
.doc-icon{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;background:#fdecee;color:#b3263a;flex:0 0 auto}
.doc-icon .icon{width:30px;height:30px}
.doc-card h2{font-size:1.5rem;font-weight:800}
.doc-card .doc-sub{margin-top:6px;color:var(--ink-2)}
.doc-facts{display:grid;gap:12px;margin:0}
.doc-facts div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.doc-facts dt{color:var(--muted);font-weight:600;font-size:.9375rem}
.doc-facts dd{margin:0;color:var(--blue-900);font-weight:600}
.org-slot{margin-top:28px;display:grid;justify-items:center;text-align:center;gap:14px;padding:56px 24px;border:2px dashed var(--line-2);border-radius:var(--radius-lg);background:repeating-linear-gradient(135deg,#fff 0 14px,var(--surface-2) 14px 28px)}
.org-slot .tool-icon{width:64px;height:64px;border-radius:18px}
.org-slot .tool-icon .icon{width:32px;height:32px}
.org-slot h2{font-size:1.5rem;font-weight:800}
.org-slot p{max-width:52ch;color:var(--ink-2)}
.btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed;pointer-events:none}
.status-pill{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:#fdf3de;color:#8a5a00;font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:#dba017}
.two-col{display:grid;gap:28px}
.check-list{list-style:none;display:grid;gap:10px;margin-top:16px}
.check-list li{position:relative;padding-left:30px;color:var(--ink-2)}
.check-list li::before{content:"";position:absolute;left:4px;top:.55em;width:12px;height:7px;border-left:2.4px solid var(--teal-500);border-bottom:2.4px solid var(--teal-500);transform:rotate(-45deg)}
@media (min-width:960px){.two-col{grid-template-columns:1.2fr 1fr;gap:56px;align-items:start}.doc-card{padding:36px 40px}}

/* 16. Footer --------------------------------------------------------------- */
.site-footer{background:var(--blue-900);color:#c9d9e6;padding:56px 0 28px;font-size:.96875rem}
.footer-grid{display:grid;gap:36px}
.footer-logos{display:inline-flex;align-items:center;gap:14px;background:#fff;border-radius:14px;padding:12px 16px}
.footer-logos img{height:54px;width:auto}
.footer-logos .logo-hra{height:52px}
.footer-org{margin-top:18px;line-height:1.6}
.footer-org strong{color:#fff;display:block}
.site-footer h2{font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:#8fc5e3;margin-bottom:14px}
.footer-links{list-style:none;display:grid;gap:4px}
.footer-links a{display:inline-flex;align-items:center;gap:6px;min-height:36px;color:#e3edf5;text-decoration:none}
.footer-links a:hover{color:#fff;text-decoration:underline}
.footer-contact{list-style:none;display:grid;gap:8px}
.footer-contact a{color:#e3edf5}
.footer-bottom{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:.875rem;color:#9fb6c8}
.site-footer :focus-visible{outline-color:#8fd6f5}
@media (min-width:860px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr}}

/* 17. Animaciones y accesibilidad ----------------------------------------- */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .reveal{opacity:1;transform:none}
}
@media print{.site-header,.mobile-nav,.site-footer,.skip-link{display:none!important}body{font-size:12pt}}
.contact-list .c-sub{display:block;font-size:.9375rem;color:var(--muted)}
@media (max-width:639px){.team-card{padding:18px 10px 16px}.team-card h3{font-size:.96875rem}.team-card p{font-size:.875rem}.avatar{width:104px}}
.notice p,.res-title,.res-body,.doc-facts dd,.contact-list .c-value{overflow-wrap:anywhere;min-width:0}
.notice p{min-width:0;flex:1}
@media (min-width:860px){.team-photo .frame{aspect-ratio:16/7}.team-photo img{object-position:50% 58%}}

/* Organigrama embebido ----------------------------------------------------- */
.org-embed-section{margin-top:56px;width:100%}
.org-embed-section .section-header{max-width:880px;margin-bottom:28px}
.org-slides-wrap{width:100%;max-width:1200px;margin:0 auto}
.video-container{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#07131d;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 18px 44px -28px rgba(11,47,79,.42)}
.video-container iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.org-embed-help{margin-top:12px;color:var(--muted);font-size:.9375rem;text-align:center}
@media (max-width:639px){.org-embed-section{margin-top:40px}.org-embed-section .section-header{margin-bottom:18px}.video-container{border-radius:12px}.org-embed-help{text-align:left;font-size:.875rem}}

/* 18. Optimización móvil · RC32 ------------------------------------------- */
.org-embed-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;margin-top:14px}
.org-embed-foot .org-embed-help{margin:0}
@media (max-width:1023px){
  .contact{grid-template-columns:1fr}
}
@media (max-width:639px){
  body{font-size:1rem;line-height:1.6}
  .section{padding:52px 0}
  .section-tight-top{padding-top:36px!important}
  .section-header{margin-bottom:26px}
  .section-header h2{font-size:1.75rem}
  .section-header p{font-size:1.0625rem;margin-top:10px}
  .section-header-row{margin-bottom:26px;gap:16px}
  .section-header-row>.btn{width:100%}
  .lede{font-size:1.0625rem}
  .eyebrow{font-size:.75rem;letter-spacing:.1em}

  /* Header y menú */
  .header-inner{gap:12px}
  .nav-toggle{height:44px;padding:0 12px}
  .mobile-nav a{min-height:54px;font-size:1.125rem}

  /* Hero */
  .hero{padding:22px 0 36px}
  .hero-grid{gap:26px}
  .hero-copy .eyebrow{margin-bottom:12px}
  .hero h1{font-size:clamp(2.1rem,10.5vw,2.6rem)}
  .hero-institution{margin-top:10px;font-size:.96875rem}
  .hero .lede{margin-top:14px}
  .hero-actions{margin-top:22px;gap:10px}
  .hero-actions .btn{flex:1 1 100%}
  .hero-ring{display:none}
  .hero-frame{border-radius:16px}
  .hero-caption{font-size:.8125rem}
  .hero-strip{margin-top:28px;padding-top:18px;gap:14px}
  .hero-strip div{font-size:.9375rem}

  /* Bienvenida */
  .welcome{gap:20px}
  .welcome-text{font-size:1.0625rem;line-height:1.6}
  .welcome-list{gap:10px}
  .welcome-link{padding:14px 14px 14px 16px;gap:12px}

  /* ¿Qué hacemos? */
  .services{gap:14px}
  .service-card{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:14px;row-gap:6px;padding:20px 18px 22px}
  .service-card::after{left:18px;right:18px}
  .service-icon{width:48px;height:48px;border-radius:13px;grid-row:span 2;align-self:start}
  .service-icon .icon{width:25px;height:25px}
  .service-num{align-self:end;font-size:.75rem}
  .service-card h3{font-size:1.1875rem;align-self:start}
  .service-card p{grid-column:1/-1;font-size:.96875rem;margin-top:4px}

  /* Herramientas */
  .tools{gap:12px}
  .tool-card{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:4px;padding:18px}
  .tool-icon{width:44px;height:44px;border-radius:12px;grid-row:span 2;align-self:center}
  .tool-icon .icon{width:23px;height:23px}
  .tool-meta{align-self:end;font-size:.75rem}
  .tool-card h3{font-size:1.125rem;align-self:start}
  .tool-card p{grid-column:1/-1;font-size:.96875rem;margin-top:6px}
  .tool-card .btn{grid-column:1/-1;width:100%;margin-top:10px;min-height:46px}

  /* Equipo (vista previa) */
  .team-grid .team-card:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 6px)}

  /* Contacto */
  .contact{gap:14px}
  .contact-card{padding:20px 18px}
  .contact-list{gap:18px}
  .contact-list li{gap:12px}
  .contact-list .c-icon{width:40px;height:40px;border-radius:11px}
  .contact-list .c-icon .icon{width:21px;height:21px}
  .contact-list .c-value{font-size:.96875rem}
  .contact-list a.c-value{word-break:break-all}
  .anexos li{font-size:.9375rem}
  .org-lines{font-size:.875rem;margin-top:18px;padding-top:14px}
  .agenda-card{padding:24px 20px;gap:12px}
  .agenda-card h3{font-size:1.3125rem}
  .agenda-card .btn{align-self:stretch;width:100%}
  .agenda-card .tool-icon{align-self:flex-start}

  /* CTA */
  .cta{padding:24px 20px;gap:16px}
  .cta-actions .btn{flex:1 1 100%}

  /* Páginas internas */
  .page-hero{padding:18px 0 32px}
  .breadcrumb ol{margin-bottom:18px;font-size:.875rem}
  .page-hero h1{font-size:clamp(1.9rem,9vw,2.35rem);margin-top:10px}
  .page-hero .lede{margin-top:12px}

  /* Perfiles del equipo */
  .team-photo{margin-bottom:32px}
  .team-photo .frame{border-radius:16px}
  .team-photo figcaption{font-size:.875rem}
  .profiles{gap:14px}
  .profile{grid-template-columns:76px minmax(0,1fr);column-gap:14px;row-gap:14px;padding:20px 18px;align-items:center}
  .profile-media{display:block}
  .profile .avatar{width:76px;padding:3px}
  .profile .avatar img{border-width:2px}
  .profile-body{display:contents}
  .profile-head h2{font-size:1.1875rem;line-height:1.25}
  .profile-role{font-size:.875rem;margin-top:3px;line-height:1.35}
  .profile-bio{grid-column:1/-1;font-size:.96875rem}
  .profile-contact{grid-column:1/-1;flex-direction:column;gap:10px;font-size:.9375rem}
  .profile-contact a{word-break:break-all}

  /* Recursos */
  .resource-group+.resource-group{margin-top:44px}
  .group-head{gap:12px;margin-bottom:16px}
  .group-icon{width:40px;height:40px;border-radius:11px}
  .group-icon .icon{width:21px;height:21px}
  .group-head h2{font-size:1.375rem}
  .group-head p{font-size:.9375rem}
  .resources{gap:10px}
  .resource-card{position:relative;padding:16px 44px 16px 14px;gap:12px}
  .res-type{width:40px;height:40px;border-radius:11px}
  .res-type .icon{width:22px;height:22px}
  .res-label{font-size:.75rem}
  .res-title{font-size:1rem}
  .res-go{position:absolute;top:16px;right:14px}
  .res-go .icon{width:18px;height:18px}
  .soon-card,.notice{padding:16px;font-size:.9375rem;gap:12px}
  .notice a{word-break:break-all}
  .repo-card{padding:20px 18px;gap:16px}
  .repo-card .btn{width:100%}

  /* Organigrama / documentos */
  .doc-card{padding:22px 18px;gap:18px}
  .doc-head{flex-direction:column;gap:12px}
  .doc-icon{width:48px;height:48px;border-radius:13px}
  .doc-icon .icon{width:25px;height:25px}
  .doc-card h2{font-size:1.3125rem}
  .doc-facts{gap:0}
  .doc-facts div{grid-template-columns:1fr;gap:2px;padding:10px 0}
  .doc-facts dt{font-size:.8125rem;text-transform:uppercase;letter-spacing:.06em}
  .doc-card .btn{width:100%}
  .org-embed-foot{flex-direction:column;align-items:stretch;gap:10px}
  .org-embed-foot .btn{width:100%;min-height:46px}
  .two-col{gap:22px}
  .check-list li{font-size:.96875rem}

  /* Pie */
  .site-footer{padding:40px 0 24px}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-links{grid-template-columns:1fr 1fr;column-gap:16px}
  .footer-logos img{height:46px}.footer-logos .logo-hra{height:44px}
  .footer-org{font-size:.9375rem}
  .footer-contact{font-size:.875rem;gap:10px}
  .footer-contact a{word-break:break-all}
  .footer-bottom{margin-top:28px;flex-direction:column;gap:4px;font-size:.8125rem}
}
@media (max-width:380px){
  :root{--gutter:16px}
  .brand-logos{gap:9px}
  .brand-logos img{height:44px}.brand-logos .logo-hra{height:42px}
  .brand-sep{height:30px}
}