/* =========================================================
   HEADER · BUSCADOR TIPO CÁPSULA
   v1 · 2026-09-12
========================================================= */

/* Ocultos por ahora, sin borrar sus enlaces del header. */
.social-link--temporarily-hidden{
  display:none !important;
}

/* Reemplaza visualmente la lupa circular por una cápsula
   dividida: icono a la izquierda + texto a la derecha. */
.header-search-toggle{
  width:auto !important;
  min-width:106px;
  height:34px !important;
  flex:0 0 auto !important;
  margin-left:auto;
  padding:0 !important;

  display:inline-flex !important;
  align-items:stretch !important;
  justify-content:flex-start !important;

  overflow:hidden;
  border:1px solid rgba(101,48,40,.20) !important;
  border-radius:999px !important;

  background:transparent !important;
  color:var(--wine-dark);
  cursor:pointer;

  transform:none !important;

  transition:
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease;
}

.header-search-toggle-icon{
  width:34px;
  min-width:34px;
  height:32px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-right:1px solid rgba(101,48,40,.16);
}

.header-search-toggle-icon svg{
  width:14px !important;
  height:14px !important;
  display:block;
  fill:currentColor;
}

.header-search-toggle-text{
  display:flex;
  align-items:center;
  justify-content:center;

  padding:0 13px 0 11px;

  font-size:.68rem;
  font-weight:700;
  letter-spacing:.025em;
  line-height:1;
  white-space:nowrap;
}

.header-search-toggle:hover,
.header-search-toggle:focus-visible,
.header-search-toggle[aria-expanded="true"]{
  background:rgba(101,48,40,.055) !important;
  color:var(--wine-dark) !important;
  border-color:rgba(101,48,40,.38) !important;
  transform:none !important;
}

.header-search-toggle:hover .header-search-toggle-icon,
.header-search-toggle:focus-visible .header-search-toggle-icon,
.header-search-toggle[aria-expanded="true"] .header-search-toggle-icon{
  border-right-color:rgba(101,48,40,.28);
}

/* Mantiene aire entre la cápsula y las redes visibles. */
.header-search-toggle + .social-nav{
  margin-left:8px !important;
}

/* Con YouTube y TikTok ocultos quedan sólo Instagram + Facebook. */
.social-nav{
  gap:6px;
}

@media(max-width:1180px){
  .header-search-toggle{
    min-width:100px;
    height:32px !important;
  }

  .header-search-toggle-icon{
    width:32px;
    min-width:32px;
    height:30px;
  }

  .header-search-toggle-text{
    padding-inline:10px 12px;
    font-size:.66rem;
  }
}

@media(max-width:700px){
  .header-search-toggle{
    min-width:94px;
    height:30px !important;
  }

  .header-search-toggle-icon{
    width:30px;
    min-width:30px;
    height:28px;
  }

  .header-search-toggle-icon svg{
    width:13px !important;
    height:13px !important;
  }

  .header-search-toggle-text{
    padding-inline:9px 10px;
    font-size:.64rem;
  }

  .header-search-toggle + .social-nav{
    margin-left:6px !important;
  }
}

@media(max-width:480px){
  .header-search-toggle{
    min-width:90px;
    height:29px !important;
  }

  .header-search-toggle-icon{
    width:29px;
    min-width:29px;
    height:27px;
  }

  .header-search-toggle-text{
    padding-inline:8px 9px;
    font-size:.62rem;
  }
}


/* =========================================================
   HEADER MOBILE · COMPOSICIÓN EN DOS NIVELES
   v3 · 2026-09-13

   1) Logo centrado y protagonista.
   2) Línea horizontal sutil.
   3) Buscar + redes + Menú centrados debajo.
========================================================= */

@media(max-width:700px){

  .site-header{
    background:rgba(250,247,240,.98);
  }

  .header-inner{
    height:auto !important;
    min-height:0;
    padding-top:0;
    padding-bottom:10px;

    display:grid !important;
    grid-template-columns:max-content max-content max-content;
    grid-template-areas:
      "brand brand brand"
      "search social menu";
    justify-content:center;
    align-items:center;
    column-gap:9px;
    row-gap:10px;

    position:relative;
  }

  /* Primera fila: logo */
  .brand{
    grid-area:brand;
    width:100%;
    min-width:0;
    margin:0 !important;
    padding:12px 0 11px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-bottom:1px solid rgba(101,48,40,.12);
  }

  .brand img{
    width:min(88vw,390px) !important;
    max-width:100%;
    height:auto !important;
    object-fit:contain;
  }

  /* Segunda fila */
  .header-search-toggle{
    grid-area:search;
    margin:0 !important;

    min-width:102px;
    height:34px !important;
  }

  .header-search-toggle-icon{
    width:34px;
    min-width:34px;
    height:32px;
  }

  .header-search-toggle-text{
    padding:0 13px 0 11px;
    font-size:.69rem;
  }

  .header-search-toggle + .social-nav{
    margin-left:0 !important;
  }

  .social-nav{
    grid-area:social;
    margin:0 !important;
    gap:7px !important;
    justify-content:center;
  }

  .social-link{
    width:34px !important;
    height:34px !important;
  }

  .social-link svg{
    width:14px !important;
    height:14px !important;
  }

  .nav-toggle{
    grid-area:menu;
    display:flex !important;
    align-items:center;
    justify-content:center;

    height:34px;
    margin:0 !important;
    padding:0 14px !important;

    border:1px solid rgba(101,48,40,.20);
    border-radius:999px;

    background:transparent;
    color:var(--ink);

    font-size:.72rem;
    font-weight:600;
    line-height:1;
  }

  .nav-toggle:hover,
  .nav-toggle:focus-visible{
    background:rgba(101,48,40,.055);
    border-color:rgba(101,48,40,.38);
  }

  /* El menú desplegable debe comenzar debajo de las dos filas. */
  .main-nav{
    top:100% !important;
    z-index:60;
  }
}

@media(max-width:480px){

  .header-inner{
    column-gap:7px;
    row-gap:9px;
    padding-bottom:9px;
  }

  .brand{
    padding:11px 0 10px;
  }

  .brand img{
    width:min(90vw,370px) !important;
  }

  .header-search-toggle{
    min-width:98px;
    height:32px !important;
  }

  .header-search-toggle-icon{
    width:32px;
    min-width:32px;
    height:30px;
  }

  .header-search-toggle-text{
    padding:0 11px 0 9px;
    font-size:.66rem;
  }

  .social-link{
    width:32px !important;
    height:32px !important;
  }

  .social-link svg{
    width:13px !important;
    height:13px !important;
  }

  .nav-toggle{
    height:32px;
    padding:0 12px !important;
    font-size:.69rem;
  }
}