/* ===== Reset básico ===== */
html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }

/* ===== Tokens de color ===== */
:root{
  --fg:#1d2734;
  --bg:#ffffff;
  --muted:#667085;
  --primary:#1d6893;
  --border:#e6e8ec;
  --brand:#143d55;
}

/* ===== Tipografía ===== */
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
}

/* ===== Estructura ===== */
#wrap, #container{
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  background: #fff;
  border: none;
}

/* Banner / cabecera */
#masthead{
  min-height: 100px;
  padding: 8px 0 0 0;
  margin: 0;
}
#headimg{ float: left; }

/* Títulos */
h1{
  float: none;
  margin: 0;
  padding: 16px 0;
  font-size: 2rem;
  color: #143c55;
}
h2{
  float: none;
  margin: 0;
  padding: 12px 0;
  font-size: 1.25rem;
  color: var(--primary);
}
h3{
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 1.125rem;
  color: #143c55;
}

/* Soporte para selectores antiguos */
.h2_left{
  float: left;
  margin: 0;
  padding: 5px 20px 20px 0;
  font-size: 0.9rem;
  color: #4592be;
}
.p_address{ margin-left: 60px; }

/* ===== Menú principal ===== */
#menucontainer{
  position: relative;
  background: var(--brand);
  color: #e0e0e0;
  width: 100%;
  font-family: Arial, sans-serif;
}
#menunav{
  position: relative;
  height: auto;
  font-size: 15px;
  font-weight: 600;
  background: transparent;
  padding: 8px 12px;
}
#menunav ul{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
#menunav ul li{ padding: 0; }
#menunav ul li a{
  display: inline-flex;
  align-items: center;
  color: #eaf3f8;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 10px;
  background: transparent;
}
#menunav ul li a:hover,
#menunav ul li a:focus-visible{
  color: #fff;
  background: rgba(255,255,255,.12);
  outline: 2px solid transparent;
}
#menunav ul li a.current{
  color: #fff;
  background: var(--primary);
}

/* ===== Barra superior pequeña (idiomas) ===== */
#masthead #topnav{
  font-size: 13px;
  font-weight: 400;
  color: #4592be;
  margin: 2px 0 6px;
}
#masthead #topnav a{
  color: #4592be;
  text-decoration: none;
  margin-right: 8px;
}
#masthead #topnav a:hover{
  color: #143c55;
  text-decoration: underline;
}
#masthead #topnav img{
  width: 16px;
  height: auto;
  vertical-align: -2px;
  margin-right: 4px;
}

/* ===== Layout de contenido ===== */
#content {
  width: 100%;
  margin: 0;
  padding: 1em;
  border: none;
}

/* Eliminamos sidebar */
#sidebar { display: none; }

/* Imagen principal (foto) */
#content img[alt*="Juan Jesús Barbarán"] {
  float: right;
  margin: 0 0 20px 20px;
  border-radius: 8px;
  max-width: 180px;
  height: auto;
}

/* ===== Footer ===== */
#footer{
  clear: both;
  background: var(--brand);
  color: #fff;
  border-top: 4px solid var(--primary);
  height: auto;
  padding: 16px 0;
  margin: 20px 0 0;
  text-align: center;
}

/* ===== Otros ===== */
blockquote{
  font-weight: bold;
  font-style: italic;
  font-size: 16px;
  color: #b29b35;
}
a:link, a:visited{ color: #4592be; text-decoration: none; }
a:hover{ color: #aaa; text-decoration: none; }
a:focus-visible{ outline: 3px solid #ffd166; outline-offset: 2px; }
a img{ border: 0; }

.left{
  float: left;
  border: 0 solid #656c4a;
  margin: 5px 0 10px 0;
  padding: 10px;
}
legend{ margin-bottom: 30px; color: #143c55; }
input{ background: #eee; }

/* Badge en vez de GIF "new" */
.badge-new{
  display:inline-block;
  font-size:11px;
  font-weight:600;
  line-height:1;
  padding:2px 6px;
  margin-left:6px;
  border-radius:999px;
  border:1px solid #dbe6ff;
  background:#eef4ff;
  color:#143c55;
}
img[src*="new4"]{ display:none !important; }

/* ===== Responsivo ===== */
@media (max-width: 900px){
  #content{ margin: 0; padding: 0.5em; }
}

@media (max-width: 600px){
  #content img[alt*="Juan Jesús Barbarán"] {
    float: none;
    display: block;
    margin: 0 auto 20px;
  }
}

/* ===== Menú hamburguesa ===== */
#nav-toggle{ display:none; } /* checkbox oculto */

.hamburger{
  display:none;
  position: relative;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  cursor:pointer;
  user-select:none;
  color:#eaf3f8;
  font-weight:600;
}
.hamburger .bars{ display:inline-block; }
.hamburger .bar{
  display:block;
  width:22px;
  height:2px;
  background:#eaf3f8;
  margin:4px 0;
  transition: transform .2s ease, opacity .2s ease;
}

@media (max-width: 900px){
  #menucontainer{ position: sticky; top:0; z-index: 1000; }

  .hamburger{ display:inline-flex; }
  #menunav ul{
    display:none;
    flex-direction: column;
    gap:0;
    padding: 8px 0 12px;
  }
  #menunav ul li a{
    width:100%;
    border-radius: 8px;
    padding: 12px 14px;
  }

  #nav-toggle:checked ~ #menunav ul{ display:flex; }

  #nav-toggle:checked + label.hamburger .bar:nth-child(1){
    transform: translateY(6px) rotate(45deg);
  }
  #nav-toggle:checked + label.hamburger .bar:nth-child(2){
    opacity:0;
  }
  #nav-toggle:checked + label.hamburger .bar:nth-child(3){
    transform: translateY(-6px) rotate(-45deg);
  }
}