/* =========================================================================
   4° JUZGADO DE FAMILIA DE SANTIAGO — Sistema visual
   Cargado por jf-mejoras.php (sandbox de Novamira).

   No contiene ninguna regla del plugin Smart Tabs. Todo lo relativo a la
   agenda (#sp-wp-tabs-wrapper_1413 y body.page-id-1414) sigue viviendo en
   Apariencia → CSS adicional y no se toca desde aquí.
   ========================================================================= */

:root{
  --jf-font:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --jf-navy-900:#06192F;
  --jf-navy-800:#0A2E5C;
  --jf-navy-700:#0B3A6F;
  --jf-navy-600:#123F7A;

  --jf-oro:#C8912A;
  --jf-oro-400:#E0A93F;
  --jf-oro-300:#F3B236;
  --jf-oro-200:#FFD978;

  /* Navy real del emblema, medido sobre el logo original. */
  --jf-brand:#012165;

  --jf-tinta:#0F1E33;
  --jf-gris:#4A5A72;

  /* Escala de fondo. El papel es el suelo de la pagina: si se acerca
     demasiado al blanco, las tarjetas blancas dejan de leerse como
     tarjetas y la pagina entera se ve plana. #E6EDF7 deja 7 puntos de
     luminosidad contra el blanco, suficiente para que cada tarjeta
     tenga borde propio sin oscurecer la lectura. */
  --jf-linea:#C6D5E8;
  --jf-papel:#E6EDF7;
  --jf-tinte-navy:#D9E4F2;
  --jf-tinte-oro:#F6EBD6;

  /* Superficies: lo que va encima del papel. */
  --jf-superficie:#FFFFFF;
  --jf-superficie-2:#F7FAFE;

  /* Tinte calido para la familia "atencion": mismo dorado de marca,
     rebajado hasta servir de fondo. */
  --jf-oro-tinte:#FBF4E4;
  --jf-oro-tinte-2:#F5E8CE;
  --jf-oro-texto:#7A5410;

  --jf-radio:14px;
  --jf-radio-pill:999px;

  --jf-sombra-1:0 1px 2px rgba(6,25,47,.06), 0 4px 12px rgba(6,25,47,.06);
  --jf-sombra-2:0 2px 4px rgba(6,25,47,.06), 0 12px 28px rgba(6,25,47,.10);
  --jf-sombra-3:0 8px 20px rgba(6,25,47,.10), 0 24px 56px rgba(6,25,47,.14);

  --jf-transicion:.2s cubic-bezier(.4,0,.2,1);
}

/* =========================================================================
   1. TIPOGRAFÍA
   Kadence expone su tipografía como variables; se reemplazan en la raíz y
   luego se neutraliza el Arial hardcodeado dentro de los bloques HTML.
   ========================================================================= */

:root{
  --global-body-font-family:var(--jf-font);
  --global-heading-font-family:var(--jf-font);
  --global-primary-nav-font-family:var(--jf-font);
  --global-fallback-font:var(--jf-font);
}

body,
button,
input,
select,
optgroup,
textarea{
  font-family:var(--jf-font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

h1, h2, h3, h4, h5, h6{
  font-family:var(--jf-font);
  letter-spacing:-.022em;
}

/* Contenedores de los bloques HTML de la portada y de Atención de Público.
   Cada uno declaraba font-family:Arial !important en su <style> inline. */
.jf-hero-home-final,
.jf-hero-home-final *,
.jf-info-ticker,
.jf-info-ticker *,
.jf-accesos-rapidos,
.jf-accesos-rapidos *,
.jf-info-home,
.jf-info-home *,
.jf-ubicacion,
.jf-ubicacion *,
.jf-footer,
.jf-footer *,
.ap-atencion-rescate,
.ap-atencion-rescate *{
  font-family:var(--jf-font) !important;
}

/* Títulos display: el peso 900 de Public Sans aguanta mejor un tracking
   negativo más marcado que el Arial que había antes. */
.jf-hero-home-final h1,
.jf-accesos-rapidos h2,
.jf-info-home h2,
.jf-ubicacion h2,
.jf-footer h2{
  letter-spacing:-.035em !important;
}

/* =========================================================================
   2. SISTEMA DE BOTONES
   Tres niveles únicos para todo el sitio: primario (dorado, acción
   principal), secundario (navy) y terciario (texto con flecha).
   ========================================================================= */

.jf-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  min-height:48px !important;
  padding:13px 24px !important;
  border:1px solid transparent !important;
  border-radius:var(--jf-radio-pill) !important;
  font-family:var(--jf-font) !important;
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:-.01em !important;
  text-decoration:none !important;
  cursor:pointer !important;
  transition:transform var(--jf-transicion), box-shadow var(--jf-transicion), background var(--jf-transicion), color var(--jf-transicion) !important;
}

.jf-btn svg{
  width:19px !important;
  height:19px !important;
  flex:0 0 auto !important;
  stroke:currentColor !important;
  stroke-width:2.2 !important;
  fill:none !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.jf-btn--primary{
  background:linear-gradient(135deg, var(--jf-oro-300), var(--jf-oro-200)) !important;
  color:var(--jf-navy-900) !important;
  box-shadow:0 2px 6px rgba(200,145,42,.24), 0 10px 24px rgba(200,145,42,.20) !important;
}

.jf-btn--primary:hover,
.jf-btn--primary:focus-visible{
  transform:translateY(-2px) !important;
  color:var(--jf-navy-900) !important;
  box-shadow:0 4px 10px rgba(200,145,42,.28), 0 16px 34px rgba(200,145,42,.30) !important;
}

.jf-btn--secondary{
  background:var(--jf-navy-700) !important;
  color:#FFFFFF !important;
  box-shadow:var(--jf-sombra-1) !important;
}

.jf-btn--secondary:hover,
.jf-btn--secondary:focus-visible{
  transform:translateY(-2px) !important;
  background:var(--jf-navy-800) !important;
  color:#FFFFFF !important;
  box-shadow:var(--jf-sombra-2) !important;
}

.jf-btn--ghost{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.30) !important;
  color:#FFFFFF !important;
}

.jf-btn--ghost:hover,
.jf-btn--ghost:focus-visible{
  transform:translateY(-2px) !important;
  background:rgba(255,255,255,.16) !important;
  border-color:rgba(255,255,255,.48) !important;
  color:#FFFFFF !important;
}

/* Foco visible y consistente en todo el sitio. */
.jf-btn:focus-visible,
.jf-footer a:focus-visible,
.main-navigation a:focus-visible{
  outline:3px solid var(--jf-oro-300) !important;
  outline-offset:3px !important;
}

/* --- Retrofit: botones que ya existían dentro de los bloques HTML ------- */

/* Hero */
.jf-hero-final-btn{
  min-height:48px !important;
  padding:13px 24px !important;
  font-size:15px !important;
  font-weight:700 !important;
  letter-spacing:-.01em !important;
  border-radius:var(--jf-radio-pill) !important;
  transition:transform var(--jf-transicion), box-shadow var(--jf-transicion), background var(--jf-transicion) !important;
}

.jf-hero-final-btn.primary{
  background:linear-gradient(135deg, var(--jf-oro-300), var(--jf-oro-200)) !important;
  color:var(--jf-navy-900) !important;
  border:1px solid rgba(255,255,255,.42) !important;
  box-shadow:0 2px 6px rgba(200,145,42,.24), 0 10px 24px rgba(200,145,42,.24) !important;
  animation:none !important;
}

.jf-hero-final-btn.primary:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 4px 10px rgba(200,145,42,.30), 0 16px 34px rgba(200,145,42,.32) !important;
}

/* Los tres señuelos del botón principal: etiqueta "Pincha aquí", flecha
   blanca y pulso infinito. Sobran los tres. */
.jf-hero-final-btn.primary::after,
.jf-hero-final-btn.primary::before{
  content:none !important;
  display:none !important;
}

.jf-hero-final-btn.secondary{
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.34) !important;
  color:#FFFFFF !important;
}

.jf-hero-final-btn.secondary:hover{
  transform:translateY(-2px) !important;
  background:rgba(255,255,255,.18) !important;
  border-color:rgba(255,255,255,.52) !important;
}

/* Secciones interiores: "Ver ubicación", "Atención de público", etc. */
.jf-info-actions a,
.jf-ubicacion-actions a{
  min-height:48px !important;
  padding:13px 24px !important;
  border-radius:var(--jf-radio-pill) !important;
  font-size:15px !important;
  font-weight:700 !important;
  letter-spacing:-.01em !important;
  transition:transform var(--jf-transicion), box-shadow var(--jf-transicion) !important;
}

.jf-info-actions a:hover,
.jf-ubicacion-actions a:hover{
  transform:translateY(-2px) !important;
  box-shadow:var(--jf-sombra-2) !important;
}

/* =========================================================================
   3. HERO
   ========================================================================= */

/* El párrafo estaba completo en dorado peso 800: compite con el título y
   aplana la jerarquía. El dorado queda reservado al subtítulo. */
.jf-hero-final-content p{
  color:rgba(255,255,255,.86) !important;
  font-size:17px !important;
  font-weight:400 !important;
  line-height:1.62 !important;
  max-width:34em !important;
}

.jf-hero-final-kicker{
  font-weight:700 !important;
  letter-spacing:.10em !important;
}

/* Chips informativos dentro de la tarjeta de agenda. Reemplazan a los tres
   badges flotantes que se montaban encima del contenido. */
.jf-device-meta{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-top:16px !important;
}

.jf-chip{
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  padding:9px 14px !important;
  border-radius:var(--jf-radio-pill) !important;
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  color:#FFFFFF !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
  white-space:nowrap !important;
}

.jf-chip svg{
  width:15px !important;
  height:15px !important;
  flex:0 0 auto !important;
  stroke:var(--jf-oro-300) !important;
  stroke-width:2.2 !important;
  fill:none !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

/* La tarjeta ya no necesita flotar: el movimiento constante estorba la
   lectura de un horario. */
.jf-hero-agenda-device{
  animation:none !important;
}

@media (max-width:768px){
  .jf-hero-final-content p{
    font-size:16px !important;
  }

  .jf-chip{
    font-size:12px !important;
    padding:8px 12px !important;
  }
}

/* =========================================================================
   4. ENCABEZADO Y MENÚ
   (Reemplaza el bloque "MENÚ / ENCABEZADO" que vivía en CSS adicional.)
   ========================================================================= */

.site-header{
  transition:box-shadow var(--jf-transicion) !important;
}

#masthead.item-is-stuck,
.site-header.item-is-stuck,
.kadence-sticky-header.item-is-stuck{
  box-shadow:0 1px 0 var(--jf-linea), 0 8px 28px rgba(6,25,47,.10) !important;
}

.main-navigation .primary-menu-container > ul.menu{
  flex-wrap:nowrap !important;
  justify-content:center !important;
  align-items:center !important;
  gap:2px !important;
}

.main-navigation .primary-menu-container > ul.menu > li.menu-item > a{
  position:relative !important;
  white-space:nowrap !important;
  padding-left:15px !important;
  padding-right:15px !important;
  color:var(--jf-tinta) !important;
  font-size:15px !important;
  font-weight:600 !important;
  letter-spacing:.005em !important;
  border-bottom:0 !important;
  transition:color var(--jf-transicion) !important;
}

/* Indicador activo: subrayado dorado que crece desde el centro, en vez del
   borde estático anterior. */
.main-navigation .primary-menu-container > ul.menu > li.menu-item > a::after{
  content:'' !important;
  position:absolute !important;
  left:15px !important;
  right:15px !important;
  bottom:14px !important;
  height:2px !important;
  border-radius:2px !important;
  background:var(--jf-oro-400) !important;
  transform:scaleX(0) !important;
  transform-origin:center !important;
  transition:transform var(--jf-transicion) !important;
}

.main-navigation .primary-menu-container > ul.menu > li.menu-item:hover > a,
.main-navigation .primary-menu-container > ul.menu > li.current-menu-item > a,
.main-navigation .primary-menu-container > ul.menu > li.current_page_item > a{
  color:var(--jf-navy-700) !important;
}

.main-navigation .primary-menu-container > ul.menu > li.menu-item:hover > a::after,
.main-navigation .primary-menu-container > ul.menu > li.current-menu-item > a::after,
.main-navigation .primary-menu-container > ul.menu > li.current_page_item > a::after{
  transform:scaleX(1) !important;
}

/* Botón dorado del encabezado */
a.header-button.button,
.header-button-inner-wrap a.button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  padding:12px 18px !important;
  white-space:nowrap !important;
  border:1px solid rgba(255,255,255,.42) !important;
  border-radius:var(--jf-radio-pill) !important;
  background:linear-gradient(135deg, var(--jf-oro-300), var(--jf-oro-200)) !important;
  color:var(--jf-navy-900) !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  letter-spacing:.01em !important;
  box-shadow:0 2px 6px rgba(200,145,42,.24), 0 10px 22px rgba(200,145,42,.20) !important;
  transition:transform var(--jf-transicion), box-shadow var(--jf-transicion) !important;
}

a.header-button.button:hover,
.header-button-inner-wrap a.button:hover{
  transform:translateY(-2px) !important;
  color:var(--jf-navy-900) !important;
  box-shadow:0 4px 10px rgba(200,145,42,.30), 0 16px 32px rgba(200,145,42,.30) !important;
}

/* Menú móvil */
@media (max-width:1024px){
  .site-branding img,
  .site-logo img,
  .site-header-item-main-logo img,
  .site-header-main-section-left img{
    max-width:210px !important;
    width:auto !important;
    height:auto !important;
  }
}

/* El panel lateral de Kadence tiene fondo casi negro (#090C10): el texto
   va en claro. */
.mobile-navigation ul li a{
  font-family:var(--jf-font) !important;
  font-size:16px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,.92) !important;
}

.mobile-navigation ul li a:hover,
.mobile-navigation ul li.current-menu-item > a{
  color:var(--jf-oro-200) !important;
}

.popup-drawer .drawer-toggle,
.popup-drawer .menu-toggle-close{
  color:rgba(255,255,255,.85) !important;
}

/* Entrada destacada de la agenda dentro del menú hamburguesa. */
.mobile-navigation ul li.jf-menu-cta a{
  margin:10px 16px !important;
  padding:13px 20px !important;
  border-radius:var(--jf-radio-pill) !important;
  background:linear-gradient(135deg, var(--jf-oro-300), var(--jf-oro-200)) !important;
  color:var(--jf-navy-900) !important;
  font-weight:700 !important;
  text-align:center !important;
  justify-content:center !important;
  box-shadow:0 8px 20px rgba(200,145,42,.26) !important;
}

/* En escritorio ya existe el botón dorado del encabezado. */
@media (min-width:1025px){
  .main-navigation .primary-menu-container > ul.menu > li.jf-menu-cta{
    display:none !important;
  }
}

/* =========================================================================
   5. BARRA DE ACCIÓN FIJA EN MÓVIL
   El botón dorado del encabezado no se renderiza bajo los 992px y tampoco
   entraba al menú hamburguesa: en celular la agenda quedaba sin acceso
   directo desde el encabezado.
   ========================================================================= */

.jf-mobile-cta{
  display:none;
  position:fixed;
  z-index:99;
  left:0;
  right:0;
  bottom:0;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--jf-linea);
  box-shadow:0 -6px 24px rgba(6,25,47,.12);
}

.jf-mobile-cta .jf-btn{
  width:100% !important;
}

@media (max-width:1024px){
  .jf-mobile-cta{
    display:block;
  }

  body.jf-has-mobile-cta .jf-footer{
    padding-bottom:80px;
  }
}

@media (prefers-color-scheme:dark){
  .jf-mobile-cta{
    background:rgba(6,25,47,.86);
    border-top-color:rgba(255,255,255,.14);
  }
}

/* =========================================================================
   6. FOOTER INSTITUCIONAL (global)
   Antes vivía dentro del contenido de la portada, así que el resto de las
   páginas quedaba sin pie. Ahora lo imprime jf-mejoras.php en todas.
   ========================================================================= */

/* El pie propio de Kadence queda reemplazado por éste. */
.site-footer{
  display:none !important;
}

.jf-footer,
.jf-footer *{
  box-sizing:border-box;
}

.jf-footer{
  position:relative;
  overflow:hidden;
  margin-top:0;
  color:#FFFFFF;
  background:
    radial-gradient(circle at 85% 20%, rgba(243,178,54,.16), transparent 30%),
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.07), transparent 26%),
    linear-gradient(135deg, var(--jf-navy-900), var(--jf-navy-800), var(--jf-navy-600));
  border-radius:34px 34px 0 0;
  box-shadow:0 -18px 46px rgba(6,25,47,.14);
}

.jf-footer::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, rgba(255,255,255,.04) 0 1px, transparent 1px 100%),
    linear-gradient(30deg, rgba(255,255,255,.028) 0 1px, transparent 1px 100%);
  background-size:58px 58px;
  opacity:.7;
  pointer-events:none;
}

.jf-footer-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:52px 18px 26px;
}

.jf-footer-top{
  display:grid;
  grid-template-columns:1.25fr .75fr .75fr;
  gap:34px;
  align-items:start;
  padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.14);
}

.jf-footer-brand{
  max-width:520px;
}

.jf-footer-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  padding:7px 14px;
  border-radius:var(--jf-radio-pill);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:#FFFFFF;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.jf-footer-brand h2{
  margin:0 0 14px;
  color:#FFFFFF;
  font-size:clamp(24px, 3vw, 34px);
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.035em;
}

.jf-footer-brand h2 span{
  color:var(--jf-oro-300);
}

.jf-footer-brand p{
  margin:0 0 24px;
  color:rgba(255,255,255,.76);
  font-size:16px;
  line-height:1.65;
}

.jf-footer-col h3{
  margin:0 0 16px;
  color:#FFFFFF;
  font-size:12px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.jf-footer-links,
.jf-footer-contact{
  margin:0;
  padding:0;
  list-style:none;
}

.jf-footer-links li,
.jf-footer-contact li{
  margin:0 0 12px;
}

.jf-footer-links a,
.jf-footer-contact a,
.jf-footer-contact span{
  display:inline-flex;
  color:rgba(255,255,255,.78);
  font-size:15px;
  line-height:1.45;
  font-weight:500;
  text-decoration:none;
  transition:color var(--jf-transicion), transform var(--jf-transicion);
}

.jf-footer-links a:hover,
.jf-footer-contact a:hover{
  color:var(--jf-oro-300);
  transform:translateX(3px);
}

.jf-footer-contact strong{
  display:block;
  margin-bottom:4px;
  color:#FFFFFF;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.jf-footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-top:22px;
}

.jf-footer-copy{
  margin:0;
  color:rgba(255,255,255,.62);
  font-size:13.5px;
  line-height:1.5;
}

.jf-footer-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:var(--jf-radio-pill);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  color:#FFFFFF;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

@media (max-width:1024px){
  .jf-footer-top{
    grid-template-columns:1fr 1fr;
  }

  .jf-footer-brand{
    grid-column:span 2;
  }
}

@media (max-width:768px){
  .jf-footer{
    border-radius:26px 26px 0 0;
  }

  .jf-footer-inner{
    padding:36px 14px 22px;
  }

  .jf-footer-top{
    grid-template-columns:1fr;
    gap:26px;
    padding-bottom:28px;
  }

  .jf-footer-brand{
    grid-column:span 1;
  }

  .jf-footer-brand h2{
    font-size:26px;
  }

  .jf-footer .jf-btn{
    width:100% !important;
  }

  .jf-footer-bottom{
    display:block;
  }

  .jf-footer-copy{
    margin-bottom:14px;
  }
}

/* =========================================================================
   7. MAPA E ILUSTRACIÓN
   ========================================================================= */

/* El panel era una grilla CSS con un pin dibujado; ahora lleva el mapa real. */
.jf-map-frame{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  border:0 !important;
  display:block !important;
  z-index:1 !important;
}

.jf-map-panel{
  background:var(--jf-navy-800) !important;
}

/* El rótulo del mapa y el badge "Santiago Centro" se ajustan en el <style>
   del propio bloque de la portada: ahí viven sus reglas originales y la
   cascada las resuelve en un solo lugar. */

/* Ilustración del edificio, en reemplazo del emoji 🏛 a 72px. */
.jf-building-art{
  display:block !important;
  width:min(240px, 82%) !important;
  height:auto !important;
  margin:0 auto 20px !important;
  fill:none !important;
  stroke:var(--jf-oro-200) !important;
  stroke-width:2.4 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  opacity:.92 !important;
}

.jf-building-art rect{
  fill:rgba(255,255,255,.05) !important;
}

@media (max-width:768px){
  .jf-building-art{
    width:min(190px, 70%) !important;
    margin-bottom:14px !important;
  }
}

/* =========================================================================
   8. AJUSTES POR PÁGINA
   ========================================================================= */

/* Atención de Público: el hero de Kadence repetía el título que el propio
   bloque ya muestra, con un hueco blanco de ~300px encima. */
body.page-id-1451 .entry-hero,
body.page-id-1451 .entry-hero-container-inner,
body.page-id-1451 h1.entry-title,
body.page-id-1451 .entry-header .entry-title{
  display:none !important;
}

body.page-id-1451 .content-area,
body.page-id-1451 .site-main{
  padding-top:0 !important;
  margin-top:0 !important;
}

/* Los iconos eran emojis (⚖ 💬 🏛 🕙 ☎); ahora son los mismos SVG de
   línea que usa la portada, para que las dos páginas se lean igual.
   El tamaño de la caja y el ancho de la tarjeta se ajustan en el <style>
   del propio bloque. */
.ap-icon svg{
  width:23px !important;
  height:23px !important;
  stroke:var(--jf-navy-700) !important;
  stroke-width:2 !important;
  fill:none !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

/* =========================================================================
   9. MARCA DEL ENCABEZADO
   El PNG anterior no tenia canal alfa (recuadro blanco sobre cualquier
   fondo) y su tipografia no era la del sitio. Ahora: emblema vectorial
   con el texto vivo en Public Sans.
   ========================================================================= */

.site-branding .brand,
.jf-marca{
  display:inline-flex !important;
  align-items:center !important;
  gap:16px !important;
  text-decoration:none !important;
  line-height:1 !important;
}

/* Kadence dimensiona la marca contando con un <img>; ya no hay ninguno. */
.site-branding .brand img.custom-logo{
  display:none !important;
}

.jf-marca-emblema{
  width:46px !important;
  height:46px !important;
  flex:0 0 auto !important;
  fill:var(--jf-brand) !important;
  transition:fill var(--jf-transicion) !important;
}

/* La barra vertical que separaba emblema y texto en el PNG, ahora viva. */
.jf-marca-texto{
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
  padding-left:16px !important;
  border-left:1px solid var(--jf-linea) !important;
}

.jf-marca-texto strong{
  display:block !important;
  color:var(--jf-brand) !important;
  font-size:19px !important;
  font-weight:800 !important;
  letter-spacing:-.028em !important;
  line-height:1.05 !important;
}

.jf-marca-texto > span{
  display:block !important;
  color:var(--jf-gris) !important;
  font-size:14px !important;
  font-weight:500 !important;
  letter-spacing:.02em !important;
  line-height:1 !important;
}

.site-branding .brand:hover .jf-marca-emblema,
.jf-marca:hover .jf-marca-emblema{
  fill:var(--jf-navy-700) !important;
}

.site-branding .brand:focus-visible,
.jf-marca:focus-visible{
  outline:3px solid var(--jf-oro-300) !important;
  outline-offset:4px !important;
  border-radius:6px !important;
}

@media (max-width:600px){
  .site-branding .brand,
  .jf-marca{ gap:11px !important; }
  .jf-marca-emblema{ width:38px !important; height:38px !important; }
  .jf-marca-texto{ padding-left:11px !important; gap:2px !important; }
  .jf-marca-texto strong{ font-size:15px !important; }
  .jf-marca-texto > span{ font-size:12px !important; }
}

/* =========================================================================
   10. CONSTELACION DEL HERO
   ========================================================================= */

.jf-hero-final-wrap{
  position:relative !important;
  isolation:isolate !important;
}

.jf-destellos{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  width:100% !important;
  height:100% !important;
  pointer-events:none !important;
  opacity:1 !important;
}

/* Glow radial detras de la constelacion: da profundidad sin sombras duras. */
.jf-hero-final-wrap::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(46% 54% at 14% 24%, rgba(224,169,63,.20), transparent 62%),
    radial-gradient(42% 48% at 88% 16%, rgba(43,110,190,.28), transparent 60%),
    radial-gradient(52% 46% at 72% 88%, rgba(1,33,101,.42), transparent 62%) !important;
}

/* El contenido del hero se mantiene sobre ambas capas. */
.jf-hero-final-inner{
  position:relative !important;
  z-index:2 !important;
}

/* =========================================================================
   11. ENTRADAS AL HACER SCROLL
   La clase jf-anim-listo la pone el propio script: sin JS nada se oculta.
   ========================================================================= */

html.jf-anim-listo .jf-reveal{
  opacity:0;
  transform:translateY(18px);
}

html.jf-anim-listo .jf-reveal{
  transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}

html.jf-anim-listo .jf-reveal.jf-visible{
  opacity:1;
  transform:none;
}

/* =========================================================================
   12. COLOR POR SECCION

   El problema que resuelve este bloque: el 57% de la home era casi blanco
   y todo el color vivia en los dos extremos (hero y footer). Entre medio
   habia 3.000px seguidos de blanco sobre blanco, con tarjetas blancas que
   no se distinguian del fondo.

   La correccion tiene tres partes y no agrega ningun matiz nuevo: se
   trabaja solo con el navy y el dorado del emblema.

     1. El suelo de la pagina baja a --jf-papel, para que toda tarjeta
        blanca tenga contraste propio.
     2. Aparece una banda oscura a media pagina (marco institucional), que
        parte en dos la racha clara y le da a la home un tercer ancla de
        color entre el hero y el footer.
     3. Las tarjetas de accesos dejan de ser seis blancos iguales: se
        agrupan por lo que hacen, y cada grupo tiene su superficie.

   Los envoltorios .jf-accesos-rapidos / .jf-info-home / .jf-ubicacion
   miden 1180px y estan centrados: pintarlos a ellos deja franjas blancas
   a los lados. Por eso el suelo se pinta en el body y las bandas que
   necesitan otro color se pintan en elementos que si son de ancho
   completo.
   ========================================================================= */

/* Kadence pinta de blanco el contenedor .wp-site-blocks, que tapa por
   completo el fondo del body. El suelo hay que ponerlo ahi, no en el body,
   o no se ve nada.

   Se aplica a todo el sitio menos la agenda (page-id-1414): esa pagina
   tiene su propio diseno afinado en Apariencia -> CSS adicional y no se
   toca desde aqui. Si el suelo viviera solo en la home, al hacer clic en
   "Atencion de Publico" se saldria de una pagina con color a una blanca. */
body:not(.page-id-1414),
body:not(.page-id-1414) .site.wp-site-blocks{
  background:var(--jf-papel) !important;
}

/* Kadence tiene ademas un panel blanco por pagina (.content-bg). En la
   home viene apagado, pero en las paginas interiores tapa el suelo y deja
   la columna de contenido en blanco, con el papel asomando solo como dos
   franjas a los lados. */
body:not(.page-id-1414) .site .entry.content-bg{
  background:transparent !important;
}

/* Los envoltorios ceden el fondo al body: si se pintan ellos, se ve la
   franja de 1180px recortada contra el resto. */
.jf-accesos-rapidos,
.jf-info-home,
.jf-ubicacion{
  background:transparent !important;
}

/* Transicion desde la cinta oscura hacia el papel: un respiro azul que
   evita el corte seco entre la banda navy y la seccion clara. */
.jf-info-ticker + .jf-accesos-rapidos{
  position:relative !important;
}

.jf-info-ticker + .jf-accesos-rapidos::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:50% !important;
  width:100vw !important;
  height:280px !important;
  transform:translateX(-50%) !important;
  pointer-events:none !important;
  z-index:0 !important;
  background:linear-gradient(180deg, rgba(10,46,92,.14) 0%, rgba(10,46,92,0) 100%) !important;
}

.jf-accesos-head,
.jf-accesos-grid{
  position:relative !important;
  z-index:1 !important;
}

/* -------------------------------------------------------------------------
   12.1 Banda oscura del marco institucional

   Esta seccion es la unica de la home que ya era de ancho completo, asi
   que puede tomar el fondo directamente. El contenido, en cambio, se
   encierra en los mismos 1180px que el resto: antes se escapaba del
   contenedor y quedaba desalineado con las demas secciones.
   ------------------------------------------------------------------------- */

.entry-content > .jf-info-section{
  position:relative !important;
  margin:0 !important;
  padding:66px 18px 70px !important;
  background:
    radial-gradient(ellipse 60% 80% at 12% 0%, rgba(200,145,42,.20), transparent 60%),
    radial-gradient(ellipse 70% 90% at 88% 100%, rgba(18,63,122,.62), transparent 62%),
    linear-gradient(158deg, #0A2E5C 0%, #06192F 58%, #08213F 100%) !important;
}

/* Filo dorado: cierra la banda por arriba y por abajo, igual que la linea
   que separa el bloque fijo en la agenda. */
.entry-content > .jf-info-section::before,
.entry-content > .jf-info-section::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  height:3px !important;
  background:linear-gradient(90deg, var(--jf-oro) 0%, var(--jf-oro-300) 38%, rgba(243,178,54,0) 100%) !important;
}

.entry-content > .jf-info-section::before{ top:0 !important; }

.entry-content > .jf-info-section::after{
  bottom:0 !important;
  background:linear-gradient(90deg, rgba(243,178,54,0) 0%, var(--jf-oro-300) 62%, var(--jf-oro) 100%) !important;
}

/* La tarjeta blanca desaparece: sobre la banda ya no tiene que separar
   nada, solo alinear el contenido. */
.entry-content > .jf-info-section > .jf-timeline-card{
  max-width:1180px !important;
  margin:0 auto !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

.entry-content > .jf-info-section > .jf-timeline-card::before{
  display:none !important;
}

.entry-content > .jf-info-section .jf-timeline-head h2{
  color:#FFFFFF !important;
}

.entry-content > .jf-info-section .jf-timeline-head p{
  color:rgba(226,236,248,.80) !important;
}

.entry-content > .jf-info-section .jf-info-kicker{
  background:rgba(243,178,54,.16) !important;
  border:1px solid rgba(243,178,54,.34) !important;
  color:var(--jf-oro-200) !important;
}

/* Tarjetas 01 / 02 / 03: vidrio sobre el navy, con el numero en dorado.
   Es el unico lugar de la home donde el dorado carga peso real. */
.entry-content > .jf-info-section .jf-time-item{
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 16px 34px rgba(3,12,26,.34) !important;
  transition:transform .25s cubic-bezier(.23,1,.32,1),
             border-color .25s cubic-bezier(.23,1,.32,1),
             background .25s cubic-bezier(.23,1,.32,1) !important;
}

.entry-content > .jf-info-section .jf-time-number{
  background:linear-gradient(135deg, var(--jf-oro-400), var(--jf-oro-300)) !important;
  color:#06192F !important;
  box-shadow:0 8px 18px rgba(200,145,42,.32) !important;
}

.entry-content > .jf-info-section .jf-time-item h3{
  color:#FFFFFF !important;
}

.entry-content > .jf-info-section .jf-time-item p{
  color:rgba(219,231,246,.78) !important;
}

@media (hover:hover) and (pointer:fine){
  .entry-content > .jf-info-section .jf-time-item:hover{
    transform:translateY(-4px) !important;
    border-color:rgba(243,178,54,.38) !important;
    background:linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.05)) !important;
  }
}

/* -------------------------------------------------------------------------
   12.2 Accesos rapidos: cuatro familias, no siete tarjetas iguales

   El grupo se lee por color antes que por texto:
     navy solido  -> la agenda, que es lo que la gente viene a buscar
     dorado       -> donde hay una persona atendiendo
     blanco       -> tramites que el usuario hace solo
     navy tenue   -> sitios institucionales externos
   ------------------------------------------------------------------------- */

.jf-accesos-grid .jf-acceso-card{
  background:linear-gradient(180deg, var(--jf-superficie) 0%, var(--jf-superficie-2) 100%) !important;
  border:1px solid var(--jf-linea) !important;
  box-shadow:0 2px 4px rgba(6,25,47,.05), 0 16px 34px rgba(6,25,47,.09) !important;
  transition:transform .25s cubic-bezier(.23,1,.32,1),
             box-shadow .25s cubic-bezier(.23,1,.32,1),
             border-color .25s cubic-bezier(.23,1,.32,1) !important;
}

.jf-accesos-grid .jf-acceso-card:active{
  transform:scale(.985) !important;
}

/* El icono era un cuadrado casi blanco sobre tarjeta blanca: no aportaba
   nada. Relleno solido, que es de donde sale casi todo el color nuevo. */
.jf-accesos-grid .jf-acceso-icon{
  background:linear-gradient(140deg, var(--jf-navy-800) 0%, var(--jf-navy-600) 100%) !important;
  color:#FFFFFF !important;
  box-shadow:0 8px 18px rgba(10,46,92,.26), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* Familia atencion: Atencion de publico y Conecta PJUD. */
.jf-accesos-grid .jf-acceso-card.fam-atencion{
  background:linear-gradient(180deg, var(--jf-oro-tinte) 0%, var(--jf-oro-tinte-2) 100%) !important;
  border-color:rgba(200,145,42,.34) !important;
}

.jf-accesos-grid .fam-atencion .jf-acceso-icon{
  background:linear-gradient(140deg, var(--jf-oro) 0%, var(--jf-oro-400) 100%) !important;
  box-shadow:0 8px 18px rgba(200,145,42,.30), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.jf-accesos-grid .fam-atencion .jf-acceso-link{
  color:var(--jf-oro-texto) !important;
}

.jf-accesos-grid .fam-atencion::after{
  background:rgba(200,145,42,.10) !important;
}

/* Familia institucional: Poder Judicial TV y Poder Judicial. */
.jf-accesos-grid .jf-acceso-card.fam-institucional{
  background:linear-gradient(180deg, #EDF3FC 0%, #E1EAF7 100%) !important;
  border-color:rgba(10,46,92,.22) !important;
}

/* La destacada gana un halo dorado para que no compita con las demas:
   es la unica accion que se usa a diario. */
.jf-accesos-grid .jf-acceso-card.destacado{
  border-color:rgba(243,178,54,.30) !important;
  box-shadow:0 4px 10px rgba(6,25,47,.18),
             0 26px 60px rgba(6,25,47,.26),
             0 0 0 1px rgba(243,178,54,.12) !important;
}

@media (hover:hover) and (pointer:fine){
  .jf-accesos-grid .jf-acceso-card:hover{
    border-color:rgba(10,46,92,.30) !important;
  }

  .jf-accesos-grid .fam-atencion:hover{
    border-color:rgba(200,145,42,.55) !important;
  }

  .jf-accesos-grid .jf-acceso-card.destacado:hover{
    border-color:rgba(243,178,54,.52) !important;
    box-shadow:0 6px 14px rgba(6,25,47,.20),
               0 34px 74px rgba(6,25,47,.30),
               0 0 0 1px rgba(243,178,54,.26) !important;
  }
}

/* -------------------------------------------------------------------------
   12.3 Etiquetas de seccion

   Eran pastillas celeste palido sobre fondo casi blanco: invisibles.
   Pasan al dorado rebajado, que es el unico acento calido de la paleta y
   funciona como puntuacion entre tanto azul.
   ------------------------------------------------------------------------- */

.jf-accesos-head .jf-accesos-kicker,
.jf-info-home .jf-info-kicker,
.jf-ubicacion .jf-ubicacion-kicker{
  background:var(--jf-oro-tinte-2) !important;
  border:1px solid rgba(200,145,42,.32) !important;
  color:var(--jf-oro-texto) !important;
}

/* -------------------------------------------------------------------------
   12.4 Tarjetas blancas sobre el papel nuevo
   ------------------------------------------------------------------------- */

.jf-info-home .jf-info-card,
.jf-ubicacion .jf-ubicacion-card{
  border:1px solid var(--jf-linea) !important;
  box-shadow:0 2px 4px rgba(6,25,47,.05), 0 22px 52px rgba(6,25,47,.11) !important;
}

/* Ficha de datos (ubicacion, comuna, atencion): el borde izquierdo dorado
   las agrupa como una sola unidad de informacion. */
.jf-info-home .jf-fact,
.jf-ubicacion .jf-contact-item{
  background:var(--jf-superficie-2) !important;
  border:1px solid var(--jf-linea) !important;
  border-left:3px solid var(--jf-oro-400) !important;
}

/* -------------------------------------------------------------------------
   12.5 Atencion de Publico

   Misma correccion que en la home: sobre el papel nuevo las tarjetas ya
   se separan solas, y el icono deja de ser un cuadrado casi blanco sobre
   fondo casi blanco.
   ------------------------------------------------------------------------- */

.ap-atencion-rescate .ap-card{
  border:1px solid var(--jf-linea) !important;
  box-shadow:0 2px 4px rgba(6,25,47,.05), 0 16px 34px rgba(6,25,47,.09) !important;
}

.ap-atencion-rescate .ap-icon{
  background:linear-gradient(140deg, var(--jf-navy-800) 0%, var(--jf-navy-600) 100%) !important;
  color:#FFFFFF !important;
  box-shadow:0 8px 18px rgba(10,46,92,.26), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* Este SVG no hereda de color: trae el navy escrito en el stroke, asi que
   sobre el relleno navy quedaba un cuadrado vacio. */
.ap-atencion-rescate .ap-icon svg{
  stroke:#FFFFFF !important;
}

.ap-atencion-rescate .ap-kicker{
  background:var(--jf-oro-tinte-2) !important;
  border:1px solid rgba(200,145,42,.32) !important;
  color:var(--jf-oro-texto) !important;
}

/* El kicker del banner va sobre la foto: ahi el tinte claro no sirve. */
.ap-atencion-rescate .ap-hero > .ap-kicker{
  background:rgba(243,178,54,.18) !important;
  border-color:rgba(243,178,54,.38) !important;
  color:var(--jf-oro-200) !important;
}

/* Foto real del edificio en el panel que antes llevaba un emoji.
   El alto y la alineacion se fijan en el <style> del propio bloque. */
.jf-info-foto{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

.jf-info-foto-pie{
  position:relative !important;
  z-index:2 !important;
  width:100% !important;
  padding:56px 26px 22px !important;
  background:linear-gradient(180deg, transparent, rgba(6,25,47,.88) 62%) !important;
  text-align:left !important;
}

.jf-info-foto-pie h3{
  margin:0 0 4px !important;
  color:#FFFFFF !important;
  font-size:19px !important;
  font-weight:700 !important;
  letter-spacing:-.02em !important;
}

.jf-info-foto-pie p{
  margin:0 !important;
  max-width:none !important;
  color:rgba(255,255,255,.82) !important;
  font-size:14px !important;
}

/* Ubicacion: el mapa y la foto de la entrada comparten la columna derecha,
   para que la seccion siga siendo de dos columnas. */
.jf-ubicacion .jf-ubicacion-card{
  align-items:start !important;
}

.jf-ubicacion .jf-ubicacion-card > .jf-ubicacion-content{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
}

.jf-ubicacion .jf-map-panel{
  grid-column:2 !important;
  grid-row:1 !important;
  min-height:360px !important;
}

.jf-entrada{
  grid-column:2 !important;
  grid-row:2 !important;
  position:relative !important;
  margin:0 !important;
  border-radius:22px !important;
  overflow:hidden !important;
  box-shadow:0 14px 34px rgba(6,25,47,.14) !important;
}

.jf-entrada img{
  display:block !important;
  width:100% !important;
  height:230px !important;
  object-fit:cover !important;
  object-position:center 42% !important;
}

.jf-entrada figcaption{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  padding:26px 18px 13px !important;
  background:linear-gradient(180deg, transparent, rgba(6,25,47,.86)) !important;
  color:#FFFFFF !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
}

@media (max-width:900px){
  .jf-ubicacion .jf-ubicacion-card > .jf-ubicacion-content,
  .jf-ubicacion .jf-map-panel,
  .jf-entrada{
    grid-column:1 !important;
    grid-row:auto !important;
  }

  .jf-entrada img{
    height:190px !important;
  }
}

/* Atencion de Publico: el banner de titulo ahora lleva la foto real del
   acceso, con el degradado institucional convertido en velo para que el
   texto conserve contraste. */
.ap-atencion-rescate .ap-hero{
  position:relative !important;
  overflow:hidden !important;
  min-height:230px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  padding:30px !important;
}

.ap-hero-foto{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 58% !important;
  z-index:0 !important;
  display:block !important;
}

/* El velo se abre hacia la derecha: denso donde va el texto, casi limpio
   sobre el edificio. El titulo vive en el tercio izquierdo, asi que
   aclarar la derecha no le quita contraste a nada. */
.ap-atencion-rescate .ap-hero::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background:linear-gradient(100deg, rgba(1,33,101,.92) 0%, rgba(6,29,64,.80) 38%, rgba(6,25,47,.30) 100%) !important;
}

.ap-atencion-rescate .ap-hero > .ap-kicker,
.ap-atencion-rescate .ap-hero > h1{
  position:relative !important;
  z-index:2 !important;
}

/* El hero es un flex en columna sin align-items, asi que estiraba la
   pastilla del rotulo de lado a lado. Tiene que medir lo que mide su
   texto. */
.ap-atencion-rescate .ap-hero > .ap-kicker{
  align-self:flex-start !important;
  width:auto !important;
  max-width:100% !important;
}

@media (max-width:768px){
  .ap-atencion-rescate .ap-hero{
    min-height:190px !important;
    padding:22px !important;
  }

  .ap-atencion-rescate .ap-hero::before{
    background:linear-gradient(180deg, rgba(1,33,101,.82) 0%, rgba(6,25,47,.92) 100%) !important;
  }
}

/* =========================================================================
   13. ACCESIBILIDAD
   ========================================================================= */

/* -------------------------------------------------------------------------
   13.1 Foco de teclado en TODO lo que se puede tocar

   Ya existia una regla de foco (seccion 2), pero apuntaba a .jf-btn,
   .jf-footer a y .main-navigation a. Los bloques HTML de las paginas usan
   otras clases: .jf-hero-final-btn, .jf-info-btn, .jf-ubicacion-btn,
   .jf-acceso-card, .ap-btn. Resultado medido: 17 de 31 elementos
   focalizables de la portada quedaban con el anillo por defecto del
   navegador, una linea azul de 1px que sobre la tarjeta navy no se ve.

   Aqui se cierra el hueco. El color del anillo cambia segun el fondo,
   porque un solo color no alcanza para los dos:

     navy  -> sobre papel, blanco y tinte dorado   (14:1 de contraste)
     oro   -> sobre hero, tarjeta destacada y pie  (7,3:1 de contraste)

   WCAG 2.2 pide 3:1 para el indicador de foco. Los dos pasan con holgura.
   ------------------------------------------------------------------------- */

.header-navigation a:focus-visible,
.site-header .button:focus-visible,
.jf-acceso-card:focus-visible,
.jf-hero-final-btn:focus-visible,
.jf-info-btn:focus-visible,
.jf-ubicacion-btn:focus-visible,
.jf-contact-item a:focus-visible,
.jf-chip:focus-visible,
.ap-atencion-rescate .ap-btn:focus-visible,
.ap-atencion-rescate a:focus-visible,
.ap-faq summary:focus-visible{
  outline:3px solid var(--jf-navy-900) !important;
  outline-offset:3px !important;
}

/* Los puntos de la ficha del hero los crea el script, van sobre la
   pantalla blanca del panel. El offset es menor porque la pantalla
   recorta lo que se sale. */
.jf-ficha-punto:focus-visible{
  outline:3px solid var(--jf-navy-900) !important;
  outline-offset:2px !important;
}

/* El acordeon de preguntas no es un enlace: hay que darle su propio
   anillo, y que el recorte de la tarjeta no se lo coma. */
.ap-faq details:focus-within{
  overflow:visible !important;
}

/* El salto al contenido es lo primero que toca un usuario de teclado.
   Kadence le fuerza outline:none con mas especificidad, de ahi el body. */
body a.skip-link:focus,
body a.skip-link:focus-visible{
  outline:3px solid var(--jf-navy-900) !important;
  outline-offset:3px !important;
}

/* Sobre fondo oscuro el anillo navy desaparece: ahi va el dorado. */
.jf-hero-final-wrap .jf-hero-final-btn:focus-visible,
.jf-accesos-grid .jf-acceso-card.destacado:focus-visible,
.jf-info-ticker a:focus-visible,
.jf-footer a:focus-visible,
.jf-map-panel a:focus-visible,
.ap-atencion-rescate .ap-hero a:focus-visible{
  outline:3px solid var(--jf-oro-300) !important;
  outline-offset:3px !important;
}

/* El anillo tiene que poder salirse de la tarjeta: varias llevan
   overflow:hidden para recortar el circulo decorativo del fondo. */
.jf-acceso-card:focus-visible,
.ap-atencion-rescate .ap-card:focus-within{
  overflow:visible !important;
}

/* -------------------------------------------------------------------------
   13.2 Area tactil minima

   44x44 px es el minimo de Apple HIG y 48x48 el de Material. Los enlaces
   de texto del pie y de contacto median 22 px de alto: en telefono quedan
   por debajo de la mitad. Se agranda el area sin mover el diseno, usando
   padding vertical, que si cuenta como area tactil.
   ------------------------------------------------------------------------- */

@media (max-width:900px){
  .jf-footer a,
  .jf-contact-item a,
  .jf-footer-nav a{
    display:inline-flex !important;
    align-items:center !important;
    min-height:44px !important;
  }
}

/* El boton de menu en telefono medía 37x31: es el control mas importante
   de la version movil y era el mas chico de la pagina. */
.menu-toggle-open,
.drawer-toggle,
button.menu-toggle{
  min-width:44px !important;
  min-height:44px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* -------------------------------------------------------------------------
   13.3 Cuerpo de texto en telefono

   Medido a 375px: 14 parrafos por debajo de 16px, el minimo en 13,5px.
   El propio sitio dice que atiende a "usuarios adultos mayores de 65
   anos", asi que el cuerpo de texto sube a 16px en pantalla chica.

   Los pies de foto y la linea legal del footer se quedan mas abajo a
   proposito: son texto secundario, no cuerpo de lectura.
   ------------------------------------------------------------------------- */

/* Ojo con la especificidad: el <style> de cada bloque va DESPUES de esta
   hoja en el documento, asi que con la misma especificidad gana el bloque
   aunque las dos reglas lleven !important. Por eso todo lo de abajo suma
   el contenedor. */
@media (max-width:900px){
  .jf-accesos-grid .jf-acceso-card p,
  .jf-timeline-grid .jf-time-item p,
  .ap-atencion-rescate .ap-card p{
    font-size:16px !important;
    line-height:1.58 !important;
  }

  .jf-accesos-rapidos .jf-accesos-head p,
  .jf-ubicacion .jf-ubicacion-intro,
  .jf-ubicacion .jf-ubicacion-content > p,
  .jf-info-section .jf-timeline-head p{
    font-size:16.5px !important;
    line-height:1.65 !important;
  }

  .jf-accesos-grid .jf-acceso-link{
    font-size:15.5px !important;
  }

  /* Secundarios: suben, pero no hasta el cuerpo. */
  .jf-info-home .jf-info-foto-pie p{
    font-size:15px !important;
  }

  .jf-ubicacion .jf-entrada figcaption,
  .jf-footer .jf-footer-bottom p{
    font-size:14.5px !important;
  }

  /* El area tactil de los enlaces del pie ocupa el ancho de la columna,
     no solo el ancho del texto: "Inicio" media 37px de ancho. */
  .jf-footer-links a,
  .jf-footer-nav a,
  .jf-footer nav a{
    width:100% !important;
  }

  /* La marca del encabezado quedaba 6px por debajo del minimo. */
  .site-header .brand{
    min-height:44px !important;
    display:inline-flex !important;
    align-items:center !important;
  }

  /* El boton "Agenda de Audiencias" del encabezado medía 40px de alto. */
  .site-header .button,
  .header-navigation .button{
    min-height:44px !important;
    display:inline-flex !important;
    align-items:center !important;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}