/* ================================================================
   ENCABEZADO MÓVIL CON BUSCADOR — cintillo + logo + barra de
   búsqueda expandible (≤900px)
   ================================================================
   Copiado de lachoca-header-buscador.html, adaptado a este tema:

   · Todo va bajo .lc-enc en vez de selectores sueltos — .lc-campo,
     .lc-cerrar, .lc-logo y .lc-panel ya eran nombres usados en otras
     piezas del sitio (la hoja del -15% y la vieja adaptación del
     header). Con la especificidad de CSS nunca se hubieran visto
     mal, pero escoparlos bajo .lc-enc evita cualquier ambigüedad
     futura y sigue la misma convención que ya usa el resto del
     tema (.lc-hoja .x, .lc-promo .x, etc).

   · El velo se renombró a .lc-buscar-velo / #lcBuscarVelo: el id
     "lcVelo" ya lo usa el velo de la hoja de categorías (footer.php)
     — dos elementos con el mismo id rompen document.getElementById,
     así que no podían compartirlo.

   · Se quitó la redeclaración de .icn: es idéntica a la que ya
     existe en base.css para todo el sitio, no hace falta repetirla.
   ================================================================ */

/* ================================================================
   1. ENVOLTORIO FIJO
   ================================================================
   Contiene cintillo, encabezado y panel. Se oculta y reaparece con
   el scroll. Su z-index tiene que ser MAYOR que el del velo: si el
   panel viviera fuera de este envoltorio, quedaría atrapado debajo
   del velo sin importar qué tan alto fuera su propio z-index (el
   envoltorio con z-index propio crea su propio contexto de
   apilamiento). No cambiar estos valores sin revisar esto. */
.lc-enc {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 160;
  transform: translateY(0);
  transition: transform .3s cubic-bezier(.3, 0, .2, 1);
}

.lc-enc.lc-oculto { transform: translateY(-100%); }

/* Compensa el espacio que el encabezado deja de ocupar al ser fijo.
   La altura la calcula el script. Sin esto, el hero (y cualquier
   sección que empiece la página) queda debajo del encabezado. */
.lc-enc-espacio { display: block; }

/* Solo en el home: si la medición del script queda corta por un
   pixel (redondeo, fuente que carga tarde), lo que se asoma ahí no
   es la crema de la página sino el mismo verde del encabezado y del
   óvalo del hero — la costura se vuelve invisible en vez de tener
   que perseguir el pixel exacto. En el resto de páginas no aplica:
   ahí abajo no hay verde, así que se deja transparente. */
.lc-enc-espacio--home { background: var(--verde); }


/* ---------- Cintillo ----------
   Va en crema siempre: el encabezado de abajo (.lc-cab) es siempre
   verde en móvil (nunca blanco), así que la regla del sitio de
   "cintillo verde solo cuando el header es blanco" nunca se activa
   aquí — por eso no necesita una variante .cint-verde como el
   cintillo de escritorio (chrome.css).

   Se colapsa cuando el encabezado reaparece por scroll hacia
   arriba, y vuelve solo al llegar hasta arriba del todo. */
.lc-enc .lc-cintillo {
  background: var(--crema);
  color: var(--tinta);
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 22px;
  max-height: 42px;
  overflow: hidden;
  transition: max-height .28s cubic-bezier(.3, 0, .2, 1),
              padding .28s cubic-bezier(.3, 0, .2, 1),
              opacity .2s;
}

.lc-enc.lc-compacto .lc-cintillo {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

.lc-enc .lc-cintillo .lc-cent { display: flex; align-items: center; gap: 7px; }

.lc-enc .lc-cintillo button,
.lc-enc .lc-cintillo a {
  color: var(--tinta);
  display: flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}


/* ================================================================
   2. ENCABEZADO
   ================================================================ */
.lc-enc .lc-cab {
  background: var(--verde);
  border: 0;
  box-shadow: none;
  padding: 9px 22px 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

/* ---------- Logo ----------
   Se fija por ANCHO con la altura en auto. Con altura fija y la
   regla global img{max-width:100%}, el ancho se recorta al del
   contenedor mientras la altura sigue clavada: la imagen sale
   aplastada, no reducida.

   Al activarse el buscador se retrae: ancho y opacidad a la vez,
   para que se lea como que cede el lugar y no como que se apaga. */
.lc-enc .lc-logo {
  flex-shrink: 0;
  overflow: hidden;
  max-width: 112px;
  opacity: 1;
  transition: max-width .32s cubic-bezier(.3, 0, .2, 1),
              opacity .22s ease,
              margin-right .32s cubic-bezier(.3, 0, .2, 1);
}

.lc-enc .lc-logo img {
  width: 106px;
  height: auto;
  max-width: none;
  display: block;
}

.lc-enc .lc-cab.lc-activo .lc-logo {
  max-width: 0;
  opacity: 0;
  margin-right: -10px;
  pointer-events: none;
}


/* ---------- Barra de búsqueda ----------
   margin-left:auto la mantiene pegada a la derecha en reposo.
   Es el MISMO elemento en las tres etapas (reposo, activa, con
   texto) — nunca se duplica ni se sustituye por otro. */
.lc-enc .lc-campo {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, .18);
  border: 1.5px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  height: 40px;
  padding: 0 15px;
  flex: 0 1 168px;
  min-width: 0;
  color: #fff;
  cursor: pointer;
  transition: flex-basis .32s cubic-bezier(.3, 0, .2, 1),
              background .22s, border-color .22s;
}

.lc-enc .lc-cab.lc-activo .lc-campo {
  flex: 1 1 auto;
  background: #fff;
  border-color: #fff;
}

.lc-enc .lc-campo .lc-lupa { font-size: 16px; flex-shrink: 0; transition: color .22s; }
.lc-enc .lc-cab.lc-activo .lc-campo .lc-lupa { color: var(--resalte); }

.lc-enc .lc-campo input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: 0;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  transition: color .22s;
}

.lc-enc .lc-cab.lc-activo .lc-campo input { color: var(--tinta); cursor: text; }
.lc-enc .lc-campo input::placeholder { color: rgba(255, 255, 255, .78); }
.lc-enc .lc-cab.lc-activo .lc-campo input::placeholder { color: var(--tinta-suave); }

/* Sin cursor mientras está en reposo: el input arranca readonly */
.lc-enc .lc-campo input:not(:focus) { caret-color: transparent; }
.lc-enc .lc-cab.lc-activo .lc-campo input { caret-color: auto; }

.lc-enc .lc-campo .lc-limpiar {
  color: #C3CCC9;
  font-size: 15px;
  flex-shrink: 0;
  width: 0;
  opacity: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
  transition: width .18s, opacity .18s;
}

.lc-enc .lc-campo .lc-limpiar.lc-on { width: 20px; opacity: 1; }

/* ---------- Botón de cerrar: solo en modo activo ---------- */
.lc-enc .lc-cerrar {
  width: 0;
  opacity: 0;
  flex-shrink: 0;
  overflow: hidden;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 20px;
  border: 0;
  background: none;
  cursor: pointer;
  transition: width .28s cubic-bezier(.3, 0, .2, 1) .05s, opacity .2s .05s;
}

.lc-enc .lc-cab.lc-activo .lc-cerrar { width: 34px; opacity: 1; }


/* ================================================================
   3. VELO
   ================================================================
   Oscurece SOLO lo que queda detrás. Su z-index es menor que el de
   .lc-enc, así que el panel nunca se ve oscurecido. */
.lc-buscar-velo {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(30, 43, 39, .42);
  opacity: 0;
  visibility: hidden;
  transition: opacity .26s, visibility .26s;
}

.lc-buscar-velo.lc-on { opacity: 1; visibility: visible; }


/* ================================================================
   4. PANEL
   ================================================================
   Se despliega justo bajo el encabezado. Vive dentro de .lc-enc
   para quedar por encima del velo. */
.lc-enc .lc-panel {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: #fff;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 26px 60px rgba(30, 43, 39, .20);
  padding: 6px 18px 18px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform-origin: top center;
  opacity: 0;
  visibility: hidden;
  transform: scaleY(.94) translateY(-4px);
  transition: opacity .24s cubic-bezier(.2, .8, .25, 1),
              transform .24s cubic-bezier(.2, .8, .25, 1),
              visibility .24s;
}

.lc-enc .lc-panel.lc-on { opacity: 1; visibility: visible; transform: none; }

.lc-enc .lc-panel .lc-rotulo {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 16px 0 10px;
}

.lc-enc .lc-panel .lc-chips { display: flex; flex-wrap: wrap; gap: 7px; }

/* Contenedor de marca: borde 1.5px sólido + relleno al 8-10% */
.lc-enc .lc-panel .lc-chip {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  border: 1.5px solid var(--resalte);
  background: rgba(0, 165, 149, .08);
  color: var(--resalte);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.lc-enc .lc-panel .lc-chip:active { background: var(--resalte); color: #fff; }

.lc-enc .lc-panel .lc-chip.lc-n {
  border-color: var(--cta);
  background: rgba(245, 148, 31, .1);
  color: var(--cta-txt);
}

.lc-enc .lc-panel .lc-sug {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 8px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: background .18s;
}

.lc-enc .lc-panel .lc-sug:active { background: var(--crema); }

.lc-enc .lc-panel .lc-sug img {
  width: 42px; height: 42px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 6px rgba(30, 43, 39, .14));
}

.lc-enc .lc-panel .lc-sug .lc-d { min-width: 0; flex: 1; }

.lc-enc .lc-panel .lc-sug b {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 14px;
  display: block;
  line-height: 1.25;
}

.lc-enc .lc-panel .lc-sug small { font-size: 11.5px; color: var(--tinta-suave); }

.lc-enc .lc-panel .lc-sug .lc-pr {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}

.lc-enc .lc-panel .lc-vacio {
  display: none;
  text-align: center;
  padding: 26px 10px 10px;
  color: var(--tinta-suave);
  font-size: 13.5px;
}

.lc-enc .lc-panel .lc-vacio.lc-on { display: block; }

.lc-enc .lc-panel .lc-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
}

.lc-enc .lc-panel .lc-pie a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--resalte-hondo);
  text-decoration: none;
}

.lc-enc .lc-panel .lc-pie .lc-tip { font-size: 11.5px; color: #A8B4B0; }

.lc-enc .lc-panel .lc-grupo { opacity: 0; transform: translateY(10px); }
.lc-enc .lc-panel.lc-on .lc-grupo { animation: lc-enc-sube .32s cubic-bezier(.2, .8, .3, 1) forwards; }

@keyframes lc-enc-sube { to { opacity: 1; transform: none; } }


/* ================================================================
   5. VARIANTE "PÁGINA INTERIOR" (todo menos el home)
   ================================================================
   Mismo criterio que ya usa el sitio en escritorio (chrome.css:
   .cint-verde / .site-header): en el home el cintillo va crema y el
   encabezado verde, porque abajo hay un hero verde; en el resto de
   páginas se invierte — cintillo verde, encabezado blanco, logo
   oscuro — para marcar la diferencia entre "estoy en el home" y
   "estoy navegando el sitio". header.php agrega la clase
   .lc-enc--interior solo cuando NO es la portada (is_front_page()).

   Es SOLO un cambio de color. La estructura, el acomodo (móvil y
   escritorio) y el comportamiento — scroll, buscador, panel — son
   exactamente los mismos en las dos variantes; nada de esto toca
   layout ni JS. */
.lc-enc--interior .lc-cintillo {
  background: var(--verde);
  color: #fff;
}

.lc-enc--interior .lc-cintillo button,
.lc-enc--interior .lc-cintillo a {
  color: #fff;
}

.lc-enc--interior .lc-cab {
  background: #fff;
  border-bottom: 1.5px solid var(--borde);
}

.lc-enc--interior .lc-campo {
  background: var(--crema);
  border-color: var(--borde);
}

.lc-enc--interior .lc-cab.lc-activo .lc-campo {
  background: #fff;
  border-color: var(--resalte);
}

.lc-enc--interior .lc-campo .lc-lupa { color: var(--tinta-suave); }
.lc-enc--interior .lc-cab.lc-activo .lc-campo .lc-lupa { color: var(--resalte); }

.lc-enc--interior .lc-campo input { color: var(--tinta); }
.lc-enc--interior .lc-campo input::placeholder { color: var(--tinta-suave); }

.lc-enc--interior .lc-cerrar { color: var(--tinta-suave); }


/* ================================================================
   6. SOLO EN MÓVIL
   ================================================================ */
@media (min-width: 901px) {
  .lc-enc,
  .lc-enc-espacio,
  .lc-buscar-velo { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .lc-enc, .lc-enc .lc-cintillo, .lc-enc .lc-logo, .lc-enc .lc-campo,
  .lc-enc .lc-cerrar, .lc-enc .lc-panel, .lc-buscar-velo { transition: none !important; }
  .lc-enc .lc-panel .lc-grupo { opacity: 1; transform: none; animation: none !important; }
}