.hh{
  background:#faf8f4;
  color:#142f3c;
  font-family:"DM Sans",Arial,sans-serif;
  border-bottom:1px solid #dedfd9;
  position:relative;
  z-index:50;
}

.hh *,
.hh *::before,
.hh *::after{
  box-sizing:border-box;
}

.hh a{
  color:inherit;
  text-decoration:none;
}

.hh a:focus-visible,
.hh summary:focus-visible{
  outline:3px solid #b34b2d;
  outline-offset:5px;
}

.hh-wrap{
  width:min(1220px,calc(100% - 64px));
  margin:auto;
}

/* Franja superior */

.hh-top{
  background:#142f3c;
  color:#d5e1e6;
  font-size:11px;
}

.hh-top .hh-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:35px;
}

.hh-top p{
  margin:0;
}

.hh-top a{
  color:#fff;
  white-space:nowrap;
}

.hh-top span{
  color:#f4b493;
  margin-right:8px;
}

/* Cabecera principal */

.hh-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  min-height:105px;
}

.hh-brand{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
}

.hh-logo{
  display:block;
  width:245px;
  max-width:100%;
  height:auto;
  object-fit:contain;
  background:transparent;
}

/* Navegación escritorio */

.hh-desktop{
  display:flex;
  align-items:center;
  gap:26px;
}

.hh-desktop>a:not(.hh-cta){
  font-size:12px;
  font-weight:600;
  padding:12px 0;
  position:relative;
}

.hh-desktop>a:not(.hh-cta)::after{
  content:"";
  position:absolute;
  left:0;
  bottom:5px;
  width:0;
  height:2px;
  background:#b34b2d;
  transition:width .2s;
}

.hh-desktop>a:not(.hh-cta):hover::after{
  width:100%;
}

.hh-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-height:45px;
  padding:12px 19px;
  border-radius:7px;
  background:#b34b2d;
  color:#fff!important;
  font-size:12px;
  font-weight:600;
  line-height:1.4;
  transition:
    background .2s,
    transform .2s;
}

.hh-cta:hover{
  background:#943b23;
  transform:translateY(-1px);
}

.hh-cta span{
  font-size:18px;
}

.hh-mobile{
  display:none;
}

/* Tablet */

@media(max-width:1100px){

  .hh-wrap{
    width:calc(100% - 44px);
  }

  .hh-desktop{
    gap:17px;
  }

  .hh-desktop>a:not(.hh-cta){
    font-size:11px;
  }

  .hh-main{
    gap:20px;
  }

  .hh-logo{
    width:220px;
  }
}

/* Menú móvil */

@media(max-width:960px){

  .hh-wrap{
    width:calc(100% - 36px);
  }

  .hh-main{
    min-height:84px;
  }

  .hh-logo{
    width:200px;
  }

  .hh-desktop{
    display:none;
  }

  .hh-mobile{
    display:block;
  }

  .hh-mobile summary{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:44px;
    padding:10px 13px;
    border:1px solid #d5dddd;
    border-radius:7px;
    list-style:none;
    cursor:pointer;
    font-size:12px;
    font-weight:600;
  }

  .hh-mobile summary::-webkit-details-marker{
    display:none;
  }

  .hh-toggle{
    display:grid;
    gap:5px;
    width:18px;
  }

  .hh-toggle i{
    display:block;
    width:18px;
    height:2px;
    background:#142f3c;
    transition:transform .2s;
  }

  .hh-mobile[open] .hh-toggle i:first-child{
    transform:translateY(3.5px) rotate(45deg);
  }

  .hh-mobile[open] .hh-toggle i:last-child{
    transform:translateY(-3.5px) rotate(-45deg);
  }

  .hh-panel{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#faf8f4;
    border-top:1px solid #dce3e5;
    border-bottom:1px solid #dce3e5;
    box-shadow:0 18px 25px #142f3c12;
    padding:16px 24px 24px;
    max-height:75vh;
    overflow:auto;
  }

  .hh-panel nav{
    display:grid;
  }

  .hh-panel nav>a:not(.hh-cta){
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:48px;
    border-bottom:1px solid #e0e5e4;
    font-size:14px;
  }

  .hh-panel nav>a>span{
    color:#b34b2d;
  }

  .hh-panel .hh-cta{
    margin-top:20px;
    min-height:48px;
  }

  .hh-panel .hh-cta span{
    color:#fff;
  }

  .hh-panel-phone{
    display:block;
    text-align:center;
    margin-top:18px;
    font-size:12px;
    color:#546a74!important;
  }
}

/* Móvil pequeño */

@media(max-width:480px){

  .hh-top .hh-wrap{
    min-height:32px;
    font-size:10px;
    gap:10px;
  }

  .hh-top p{
    font-size:9px;
  }

  .hh-top span{
    display:none;
  }

  .hh-wrap{
    width:calc(100% - 28px);
  }

  .hh-main{
    gap:10px;
    min-height:76px;
  }

  .hh-logo{
    width:170px;
  }

  .hh-mobile summary{
    padding:10px;
    gap:8px;
    font-size:11px;
  }

  .hh-panel{
    padding:14px 18px 20px;
  }
}

@media(max-width:370px){

  .hh-logo{
    width:150px;
  }

  .hh-mobile summary{
    padding:9px;
    font-size:10px;
  }
}

@media(prefers-reduced-motion:reduce){

  .hh *{
    transition:none!important;
  }
}