/* =========================================================
   Datanex Theme — base (helthonfuentes.com)
   Tokens, fuentes, reset, botones, header y footer.
   Los componentes de cada sección viven en su widget.
   ========================================================= */

/* ---------- Fuentes autoalojadas (subset latino, OFL) ---------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/archivo-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/archivo-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/archivo-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/archivo-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/archivo-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/source-serif-4-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/source-serif-4-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/source-serif-4-latin-600-normal.woff2) format('woff2')}

/* ---------- Tokens ---------- */
:root{
  --hf-azul:#0e2746;
  --hf-azul-2:#223956;
  --hf-azul-3:#0a1e37;
  --hf-arena:#c0ae76;
  --hf-arena-texto:#7a6a3a;
  --hf-arena-suave:#efe8d4;
  --hf-marfil:#f6f4ee;
  --hf-blanco:#ffffff;
  --hf-grafito:#20242a;
  --hf-texto-2:#3d4450;
  --hf-texto-3:#4a5361;
  --hf-claro:#d8dee8;
  --hf-linea:#e7e3d8;
  --hf-linea-2:#d9d3c2;
  --hf-azul-hover:#2c4a70;   /* relleno hover del botón primario */
  --hf-arena-hover:#d8cb9f;  /* relleno hover del botón arena */

  --hf-sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --hf-serif:'Source Serif 4',Georgia,'Times New Roman',serif;

  --hf-contenedor:1200px;
  --hf-ancho-lectura:760px;
  --hf-ancho-editorial:1100px;
  --hf-pad-x:clamp(20px,5vw,120px);
  --hf-seccion:clamp(64px,9vw,120px);
  --hf-radio:10px;
  --hf-radio-img:16px;
  --hf-radio-lg:24px;
  --hf-radio-pill:999px;

  --hf-h2:clamp(31px,3.4vw,46px);
  --hf-h2-serif:clamp(32px,3.2vw,44px);

  /* Alto del header: lo usan el sticky y el desplazamiento a anclas */
  --hf-header-h:88px;
  --hf-adminbar-h:0px;
}
@media (max-width:959px){:root{--hf-header-h:72px}}
@media (max-width:767px){:root{--hf-header-h:64px}}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hf-header-h) + var(--hf-adminbar-h) + 16px)}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;font-family:var(--hf-sans);color:var(--hf-grafito);background:var(--hf-blanco);line-height:1.6;-webkit-font-smoothing:antialiased}
/* Footer siempre al fondo en páginas cortas */
body>main{flex:1 0 auto}
body>.hf-footer{flex-shrink:0}
img{display:block;max-width:100%;height:auto}
svg{flex-shrink:0}
a{color:var(--hf-azul)}
a:hover{color:var(--hf-azul-2)}
:focus-visible{outline:3px solid var(--hf-arena);outline-offset:3px}
h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

/* Barra de administración (solo usuarios conectados) */
html:has(body.admin-bar){--hf-adminbar-h:32px}
@media (max-width:782px){html:has(body.admin-bar){--hf-adminbar-h:46px}}

/* ---------- Utilidades ---------- */
.hf-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hf-skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--hf-azul);color:#fff;padding:12px 18px;text-decoration:none}
.hf-skip:focus{top:calc(12px + var(--hf-adminbar-h));color:#fff}
.hf-wrap{width:100%;max-width:calc(var(--hf-contenedor) + 2*var(--hf-pad-x));margin:0 auto;padding-inline:var(--hf-pad-x)}
.hf-seccion{padding-block:var(--hf-seccion)}
.hf-fondo-marfil{background:var(--hf-marfil)}
.hf-fondo-azul{background:var(--hf-azul);color:#fff}

/* ---------- Botones ----------
   Hover aprobado: relleno que se desliza desde la izquierda.
   Solo se anima transform (GPU): sin recálculo de layout ni impacto en INP/CLS. */
.hf-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:var(--hf-radio);font-family:var(--hf-sans);font-size:16px;font-weight:600;text-decoration:none;border:1.5px solid var(--hf-azul);cursor:pointer;transition:color .3s,border-color .3s}
.hf-btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left center;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.hf-btn:is(:hover,:focus-visible)::before{transform:scaleX(1)}
.hf-btn:active::before{transform:scaleX(1);transition-duration:.15s}
.hf-btn--primario{background:var(--hf-azul);color:#fff}
.hf-btn--primario::before{background:var(--hf-azul-hover)}
.hf-btn--primario:is(:hover,:focus-visible,:active){color:#fff}
.hf-btn--secundario{background:transparent;color:var(--hf-azul)}
.hf-btn--secundario::before{background:var(--hf-azul)}
.hf-btn--secundario:is(:hover,:focus-visible,:active){color:#fff}
.hf-btn--arena{background:var(--hf-arena);border-color:var(--hf-arena);color:var(--hf-azul);font-weight:700}
.hf-btn--arena::before{background:var(--hf-arena-hover)}
.hf-btn--arena:is(:hover,:focus-visible,:active){color:var(--hf-azul)}
.hf-btn--sm{min-height:44px;padding:0 20px;font-size:15px}

/* ---------- Header ---------- */
.hf-header{position:sticky;top:var(--hf-adminbar-h);z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--hf-linea)}
.hf-header__in{display:flex;align-items:center;justify-content:space-between;height:var(--hf-header-h);gap:24px}
.hf-logo{font-size:18px;font-weight:800;letter-spacing:.08em;color:var(--hf-azul);text-decoration:none;white-space:nowrap}
.hf-nav{display:flex;align-items:center;gap:36px}
.hf-nav ul{display:flex;gap:32px;list-style:none;padding:0}
.hf-nav a:not(.hf-btn){font-size:15px;font-weight:500;color:var(--hf-grafito);text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
.hf-nav a:not(.hf-btn):hover,.hf-nav a[aria-current="page"]:not(.hf-btn){border-bottom-color:var(--hf-arena)}
.hf-menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:0;padding:0;color:var(--hf-azul);cursor:pointer}
.hf-menu-btn span{display:inline-flex}
.hf-menu-btn__cerrar,.hf-menu-btn[aria-expanded="true"] .hf-menu-btn__abrir{display:none!important}
.hf-menu-btn[aria-expanded="true"] .hf-menu-btn__cerrar{display:inline-flex!important}

/* ---------- Footer ---------- */
.hf-footer{background:var(--hf-azul-3);color:var(--hf-claro);padding-block:72px 40px;border-radius:40px 40px 0 0}
.hf-footer__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:48px}
.hf-footer__marca p{font-size:15px;line-height:1.6;max-width:320px;margin-top:16px}
.hf-footer .hf-logo{color:#fff}
.hf-footer__col p{font-size:14px;font-weight:600;color:var(--hf-arena);margin-bottom:10px}
.hf-footer__col ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:4px}
.hf-footer__col a{display:inline-block;padding:4px 0;font-size:15px;color:var(--hf-claro);text-decoration:none}
.hf-footer__col a:hover,.hf-footer__col a[aria-current="page"]{color:#fff;text-decoration:underline}
.hf-footer__col a.hf-menu-ico{display:inline-flex;align-items:center;gap:8px}
.hf-menu-ico svg{width:18px;height:18px}
.hf-footer__legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin-top:56px;padding-top:24px;border-top:1px solid var(--hf-azul-2);font-size:13px}
.hf-footer__legal a{color:var(--hf-claro)}
.hf-footer__legal a:hover{color:#fff}
.hf-footer__legal ul{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;padding:0}

/* ---------- Plantilla de respaldo (index.php) ---------- */
.hf-basico{max-width:calc(var(--hf-ancho-lectura) + 2*var(--hf-pad-x))}
.hf-basico h1{font-size:clamp(33px,4.2vw,52px);line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--hf-azul);margin-bottom:28px}
.hf-basico h2{font-size:clamp(26px,3vw,34px);line-height:1.2;font-weight:800;color:var(--hf-azul);margin:32px 0 12px}
.hf-basico p,.hf-basico li{font-family:var(--hf-serif);font-size:19px;line-height:1.78}
.hf-basico p+p{margin-top:20px}

/* ---------- Responsive ---------- */
@media (max-width:1199px){
  .hf-nav ul{gap:22px}
  .hf-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:959px){
  .hf-header__in{position:relative}
  .hf-nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--hf-linea);padding:16px var(--hf-pad-x) 24px;flex-direction:column;align-items:stretch;gap:16px;max-height:calc(100vh - var(--hf-header-h) - var(--hf-adminbar-h));overflow-y:auto}
  .hf-nav ul{flex-direction:column;gap:0}
  .hf-nav ul a:not(.hf-btn){display:block;padding:14px 0;border-bottom:1px solid var(--hf-linea)}
  .hf-nav ul a[aria-current="page"]:not(.hf-btn){border-bottom-color:var(--hf-arena)}
  /* Con JS: menú plegable. Sin JS: queda desplegado y accesible. */
  .hf-js .hf-menu-btn{display:inline-flex}
  .hf-js .hf-nav{display:none}
  .hf-js .hf-nav.is-open{display:flex}
  .hf-no-js .hf-nav{position:static;flex-basis:100%;padding-inline:0;border:0}
  .hf-no-js .hf-header__in{height:auto;flex-wrap:wrap;padding-block:16px}
}
@media (max-width:767px){
  .hf-logo{font-size:15px}
  .hf-footer{border-radius:28px 28px 0 0}
  .hf-footer__grid{grid-template-columns:1fr 1fr;gap:32px 24px}
  .hf-footer__marca{grid-column:1/-1}
}
@media (max-width:600px){
  /* Por debajo de 600 px la barra de administración deja de ser fija */
  html:has(body.admin-bar){--hf-adminbar-h:0px}
}