/* ==========================================================
   UPA BEBÉ — CABECERA CORPORATIVA
   Hoja adicional: no reemplaza css/styles.css.
   ========================================================== */

:root{
  --upa-celeste:#cfe6f2;
  --upa-celeste-2:#eaf5fa;
  --upa-rosa:#f4d4df;
  --upa-rosa-2:#faedf2;
  --upa-gris:#5d595f;
  --upa-tinta:#302c31;
  --upa-blanco:#ffffff;
}

/* Cabecera con identidad visual, manteniendo el logo superpuesto */
.header{
  position:relative;
  z-index:1000;
  overflow:visible;
  background:
    linear-gradient(100deg,
      var(--upa-celeste-2) 0%,
      #fff 43%,
      #fff 67%,
      var(--upa-rosa-2) 100%);
  border-bottom:1px solid rgba(93,89,95,.14);
  box-shadow:0 7px 22px rgba(60,55,60,.07);
}

/* Línea corporativa inferior */
.header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  height:4px;
  background:linear-gradient(90deg,
    var(--upa-celeste) 0 48%,
    var(--upa-rosa) 52% 100%);
  opacity:.95;
}

.header .header__in{
  min-height:96px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  overflow:visible;
}

/* Logo: grande, limpio y parcialmente superpuesto */
.header .brand{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-22%);
  z-index:1010;
  display:block;
  width:142px;
  height:142px;
  border-radius:50%;
  background:#fff;
  padding:5px;
  box-shadow:
    0 12px 28px rgba(55,50,55,.20),
    0 0 0 3px rgba(255,255,255,.92);
}

.header .brand img{
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:none;
  object-fit:cover;
  border-radius:50%;
}

/* Menú */
.header .nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-left:180px;
}

.header .nav > a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:10px 13px;
  border-radius:12px;
  color:var(--upa-tinta);
  text-decoration:none;
  font-weight:800;
  white-space:nowrap;
  transition:background .18s ease, transform .18s ease, color .18s ease;
}

.header .nav > a:not(.nav__catalogo)::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:5px;
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--upa-celeste),var(--upa-rosa));
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .18s ease;
}

.header .nav > a:not(.nav__catalogo):hover{
  background:rgba(255,255,255,.72);
  transform:translateY(-1px);
}

.header .nav > a:not(.nav__catalogo):hover::after{
  transform:scaleX(1);
}

/* Descargar catálogo se percibe como acción */
.header .nav > .nav__catalogo{
  margin-left:8px;
  padding:11px 17px;
  background:var(--upa-gris);
  color:#fff;
  box-shadow:0 5px 13px rgba(62,58,63,.16);
}

.header .nav > .nav__catalogo:hover{
  background:#49454a;
  transform:translateY(-2px);
}

/* Botón hamburguesa */
.header .navToggle{
  position:relative;
  z-index:1020;
}

/* Tablet: compactar antes de pasar a hamburguesa */
@media (max-width:1180px){
  .header .brand{
    width:126px;
    height:126px;
  }
  .header .nav{
    margin-left:150px;
    gap:2px;
  }
  .header .nav > a{
    padding:10px 9px;
    font-size:15px;
  }
  .header .nav > .nav__catalogo{
    margin-left:3px;
    padding-left:12px;
    padding-right:12px;
  }
}

/* Móvil / tablet angosta */
@media (max-width:900px){
  .header .header__in{
    min-height:82px;
    justify-content:flex-end;
  }

  .header .brand{
    left:14px;
    top:50%;
    width:104px;
    height:104px;
    transform:translateY(-16%);
    padding:4px;
  }

  .header .navToggle{
    display:flex;
    margin-left:auto;
  }

  /* Compatible con el JS actual que abre/cierra #mainNav */
  .header .nav{
    position:absolute;
    top:calc(100% + 4px);
    left:0;
    right:0;
    margin:0;
    padding:20px 16px 18px;
    flex-direction:column;
    align-items:stretch;
    gap:5px;
    background:rgba(255,255,255,.98);
    border-bottom:1px solid rgba(93,89,95,.13);
    box-shadow:0 16px 28px rgba(50,45,50,.13);
  }

  .header .nav > a{
    width:100%;
    min-height:46px;
    justify-content:center;
    padding:11px 14px;
  }

  .header .nav > .nav__catalogo{
    margin:7px 0 0;
    background:var(--upa-gris);
  }
}

/* Teléfono pequeño */
@media (max-width:520px){
  .header .header__in{
    min-height:76px;
  }

  .header .brand{
    width:92px;
    height:92px;
    left:12px;
  }
}


/* ==========================================================
   CORRECCIÓN MENÚ RESPONSIVO
   En móvil el menú debe permanecer oculto hasta pulsar ☰.
   Compatible con los estados/clases más comunes del menú actual.
   ========================================================== */
@media (max-width:900px){

  /* Por defecto: cerrado */
  .header .nav{
    display:none;
  }

  /* Mostrar únicamente cuando el menú haya sido abierto por el JS */
  .header .nav.open,
  .header .nav.is-open,
  .header .nav.active,
  .header .nav.show,
  .header .nav[aria-hidden="false"]{
    display:flex;
  }

  /* También contempla estado aria-expanded del botón hamburguesa */
  .header .navToggle[aria-expanded="true"] + .nav{
    display:flex;
  }
}

/* ==========================================================
   CORRECCIÓN LOGO CABECERA — 2026-10-01
   Mantiene el logo dentro de su círculo y evita el desplazamiento
   provocado por reglas anteriores de css/styles.css.
   ========================================================== */
.header .brand{
  overflow:hidden;
}

.header .brand img{
  position:absolute !important;
  inset:5px !important;
  left:5px !important;
  top:5px !important;
  width:calc(100% - 10px) !important;
  height:calc(100% - 10px) !important;
  max-width:none !important;
  object-fit:cover !important;
  border-radius:50% !important;
  transform:none !important;
  filter:none !important;
}

@media (max-width:900px){
  .header .brand img{
    inset:4px !important;
    left:4px !important;
    top:4px !important;
    width:calc(100% - 8px) !important;
    height:calc(100% - 8px) !important;
  }
}