/* modern.css v51 FINAL DEPURADO - JyF Contadores */
:root{
 --bg:#f4f7fb; --surface:#fff; --text:#172033; --muted:#657085;
 --border:#e3e9ef; --shadow:0 14px 35px rgba(24,43,64,.08);
 --radius:18px; --max-width:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;font-size:16px;line-height:1.65}
.container{width:min(calc(100% - 40px),var(--max-width));margin:0 auto}

/* HEADER */
#header-wrapper{background:#fff;border-bottom:1px solid #e6ecf2;position:sticky;top:0;z-index:1000;padding:8px 0}
#header{min-height:78px;display:flex;align-items:center;justify-content:space-between;padding-left:60px}
#logo{background:linear-gradient(to bottom,#1bb3d1,#1494b6) !important;color:#fff !important;padding:8px 18px !important;border-radius:10px !important;border:1.5px solid #fff !important;box-shadow:0 0 0 1.5px #1497b7 !important;font-weight:800 !important;text-decoration:none !important}
#nav{display:flex !important;gap:10px !important;margin-left:auto;flex-wrap:wrap}
#nav a{background:linear-gradient(to bottom,#1bb3d1,#1494b6) !important;color:#fff !important;font-weight:700 !important;padding:7px 14px !important;border-radius:10px !important;border:1.5px solid #fff !important;box-shadow:0 0 0 1.5px #1497b7 !important;text-decoration:none !important}

/* SLIDER UNICO */
#menu-toggle{
 display:flex !important; position:fixed !important; top:12px !important; left:12px !important;
 z-index:10001 !important; width:44px !important; height:44px !important;
 background:#0a9abf !important; color:#fff !important; border:none !important;
 border-radius:10px !important; font-size:28px !important;
 align-items:center !important; justify-content:center !important; cursor:pointer !important;
}

#sidebar{
  position:fixed;
  top:0;
  left:-360px;
  width:340px;
  max-width:85vw;
  height:100vh;
  background:#fff;
  z-index:10000;
  transition:left .3s ease;
  padding:15px 15px 30px 15px;
  box-shadow:2px 0 15px rgba(0,0,0,.2);
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
#sidebar a{
  display:block !important;
  background:#1aa5c8 !important;
  color:#fff !important;
  padding:10px 12px !important;
  margin:6px 0 !important;
  border-radius:12px !important;
  text-decoration:none !important;
  text-align:center !important;
  font-weight:bold !important;
  font-size:14px !important;
  line-height:1.25 !important;
  transition: all 0.4s ease !important;
  box-sizing:border-box !important;
  width:100% !important;
}
#sidebar a:hover{
  background:#68C3EA !important;
  border-radius:50px !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(104,195,234,0.4) !important;
}
#sidebar::-webkit-scrollbar{width:6px}
#sidebar::-webkit-scrollbar-thumb{background:#1aa5c8; border-radius:10px}
#overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:none;z-index:9999}
#sidebar.open{left:0 !important}
#overlay.open{display:block !important}

/* BANNER */
#banner-wrapper{padding:22px 16px !important;background:#eef4f7 !important}
#banner{min-height:230px !important;padding:32px 38px !important;border-radius:18px !important;background:linear-gradient(105deg,#0a708a 0%,#13a3c2 100%) !important;display:flex !important;align-items:center !important;box-shadow:0 16px 30px rgba(6,78,94,.16) !important}
#banner h1{color:#fff !important;font-size:33px !important;line-height:1.08 !important}
#banner p{color:rgba(255,255,255,.92) !important}
#banner .eyebrow{ display:inline-block !important; background:rgba(255,255,255,.20) !important; border:1px solid rgba(255,255,255,.35) !important; color:#fff !important; border-radius:100px !important; padding:5px 14px !important; font-size:11px !important; font-weight:800 !important; letter-spacing:.08em !important; margin-bottom:14px !important;}
#banner .button{background:#fff !important;color:#0a708a !important;border:0 !important;box-shadow:0 6px 16px rgba(0,0,0,.18) !important}

/* CARDS */
#main{padding:30px 0 70px}
.main-grid{display:grid;gap:24px;margin-bottom:24px}
.main-grid-three{grid-template-columns:repeat(3,1fr)}
.main-grid-two{grid-template-columns:1.12fr .88fr}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.card h2,.card h3{color:#0000FF !important}

/* CELULAR */
@media screen and (max-width:980px){
 #nav{display:none !important}
 #header{padding-left:60px !important}
 .main-grid{grid-template-columns:1fr !important}
 #banner h1{font-size:24px !important}
}


/* JUSTIFICAR TEXTOS */
.card p, .card li, #main p {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
}
.card h2, .card h3 {
  text-align: left !important;
}

/* --- FIX JyF v52 - Buscador parejo --- */
#search {
  margin-bottom: 14px !important;
  width: 100% !important;
}
#search form {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
}
#search input[type="text"] {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 44px !important;
  border-radius: 22px !important;
  padding: 0 15px !important;
  background: #fff !important;
  border: 1px solid #d0dbe6 !important;
  display: block !important;
  margin: 0 !important;
}
#search button {
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  border-radius: 50% !important;
  background: #1aa5c8 !important;
  color: #fff !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}

/* Todos los botones grandes del sidebar mismo azul */
#sidebar > a.button,
#sidebar > a {
  background: #1aa5c8 !important;
  height: 44px !important;
  line-height: 44px !important;
  border-radius: 22px !important;
  padding: 0 !important;
}

#search button {
  transition: all 0.4s ease !important;
}
#search button:hover {
  background: #68C3EA !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(104,195,234,0.4) !important;
}