/* Ajustes visuales del buscador del header (caja blanca con icono rojo) */

@media (min-width: 1181px) {
  .section-2 nav .navtop .container .navMenu {
    gap: 2rem;
  }

  form.search-form {
    padding: 0;
  }

  form.search-form .container-input {
    width: 23rem;
    max-width: 23rem;
    min-width: 23rem;
    flex-shrink: 0;
    padding: 0.65rem 1.25rem;
    background-color: #fff;
    border-color: transparent;
    border-radius: 0.5rem;
  }

  form.search-form .container-input input {
    color: var(--bg-color-black2);
    font-size: 0.85rem;
    white-space: nowrap;
  }

  form.search-form .container-input input::placeholder {
    color: var(--bg-color-grey);
  }

  header .section-2 nav .navtop .container .navMenu .header-menu .contenedor-forma > ul > li > a span,
  header .section-2 nav .navtop .container .navMenu .header-menu .contenedor-forma > ul > li > span span {
    font-size: 1.125rem;
  }

  form.search-form .container-input::after {
    background: none;
    background-color: var(--bg-color-red1);
    -webkit-mask-image: url("../../images/buscar-icon.svg");
    mask-image: url("../../images/buscar-icon.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
}

/* En tablet (781-1180px) el buscador queda visible en línea sin necesidad
   de activar el estado "header.search": mismo look que en escritorio. */
@media (min-width: 781px) and (max-width: 1180px) {
  form.search-form .container-input {
    background-color: #fff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.65rem 1.25rem;
  }

  form.search-form .container-input input {
    color: var(--bg-color-black2);
  }

  form.search-form .container-input input::placeholder {
    color: var(--bg-color-grey);
  }

  form.search-form .container-input::after {
    background: none;
    background-color: var(--bg-color-red1);
    -webkit-mask-image: url("../../images/buscar-icon.svg");
    mask-image: url("../../images/buscar-icon.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
}

/* Mismo look (caja blanca rectangular, texto legible, icono rojo)
   cuando el buscador se abre en tablet/mobile (header.search) */
@media (max-width: 1180px) {
  header.search .section-2 nav .navtop .container .navMenu form .container-input {
    border: none;
    background-color: #fff;
    border-radius: 0.5rem;
    padding: 0.65rem 1.25rem;
  }

  header.search .section-2 nav .navtop .container .navMenu form .container-input input {
    color: var(--bg-color-black2);
  }

  header.search .section-2 nav .navtop .container .navMenu form .container-input input::placeholder {
    color: var(--bg-color-grey);
  }

  header.search .section-2 nav .navtop .container .navMenu form .container-input::after {
    background: none;
    background-color: var(--bg-color-red1);
    -webkit-mask-image: url("../../images/buscar-icon.svg");
    mask-image: url("../../images/buscar-icon.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
}