/* ================================================================
   NAVEGACIÓN MÓVIL — barra inferior + hoja + burbuja del -15%
   ================================================================
   Solo aplica en max-width:900px (el breakpoint que ya usa el resto
   del tema para el header). En escritorio no se ve nada de esto: ahí
   sigue el header completo y el popup de esquina que ya existen.

   El cintillo y el encabezado móvil (con su buscador expandible) NO
   viven aquí — están en header-buscador.css/.js. Este archivo solo
   se encarga de ocultar sus equivalentes de escritorio (ver sección
   1) y de la barra de abajo hacia adelante.
   ================================================================ */

:root {
  --lc-barra: 58px;
  /* Alto real de la barra inferior, con safe-area incluido. Si
     nav-movil.js ya midió la barra (--lc-barra-real), se usa esa
     medida exacta; si no, se cae al cálculo de respaldo con el
     número fijo de arriba. Todo lo que necesite despegar la barra
     (franja de reseñas, burbujas) usa esta variable, no las de
     arriba directamente. */
  --lc-barra-h: var(--lc-barra-real, calc(var(--lc-barra) + env(safe-area-inset-bottom, 0)));
}

/* ================================================================
   1. COSTURAS DEL CINTILLO Y EL ÓVALO DEL HERO EN MÓVIL
   ================================================================
   COSTURA 1 (línea de 1px entre el cintillo y el header): la causa
   real, revisando chrome.css, es la regla ".cintillo{border-bottom:
   1px solid rgba(255,255,255,.16)}" que se agregó cuando el cintillo
   se repintó de verde — con el header pegado justo debajo, ese borde
   translúcido se ve como una rayita. Se quita en móvil (en escritorio
   se deja, ahí no se nota).

   COSTURA 2 (línea de 2-3px entre el header y el hero, solo en el
   home): revisando home-hero.css, ni el header ni .frame tienen
   borde o sombra propios — el óvalo (#s-hero .oval) está calculado
   por posición/tamaño en porcentajes para la proporción de escritorio
   (ver la nota "ajustado por regresión a la captura real" en el CSS
   original). En móvil, con "aspect-ratio:auto" en .frame, esa curva
   ya no llega exactamente hasta la esquina superior, y se asoma una
   rendija angosta con el fondo crema de la página detrás. Se cierra
   subiendo el óvalo un poco más en vez de solo tapar el hueco con un
   margen negativo (así no se corta nada del óvalo, solo se agranda
   su margen de sobra). */
@media (max-width: 900px) {
  .cintillo {
    border-bottom: 0;
  }
  #s-hero .oval {
    top: -98%;
  }

  /* Los dos headers de escritorio (.site-header blanco de las páginas
     interiores y .site-header.en-hero del home) Y el cintillo de
     escritorio los reemplaza por completo el encabezado dedicado de
     header-buscador.css/.js (.lc-enc, con su propio cintillo). */
  .site-header,
  .cintillo {
    display: none !important;
  }
}


/* ================================================================
   2. BARRA INFERIOR
   ================================================================ */
.lc-barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 110;
  background: #fff;
  border-top: 1.5px solid var(--borde);
  display: flex;
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -8px 26px rgba(30, 43, 39, .07);
}

.lc-barra a,
.lc-barra > button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 2px 9px;
  min-height: var(--lc-barra);
  font-family: 'Poppins', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--tinta-suave);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}

.lc-barra .lc-ic { font-size: 20px; }

.lc-barra .lc-act { color: var(--resalte); }

.lc-barra .lc-act::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--resalte);
}

.lc-barra .lc-centro { flex: 0 0 78px; }

.lc-barra .lc-centro .lc-burbuja {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--cta);
  color: var(--cta-txt);
  display: grid;
  place-items: center;
  font-size: 21px;
  margin-top: -20px;
  box-shadow: 0 8px 20px rgba(245, 148, 31, .42);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}

.lc-barra .lc-centro.lc-abierto .lc-burbuja { transform: rotate(90deg); }

.lc-barra .lc-cart { position: relative; }

.lc-barra .lc-cart b {
  position: absolute;
  top: 4px; right: 50%;
  margin-right: -20px;
  background: var(--cta);
  color: var(--cta-txt);
  font-size: 9.5px;
  font-weight: 700;
  border-radius: 50%;
  width: 16px; height: 16px;
  display: grid;
  place-items: center;
}


/* ================================================================
   3. HOJA DE CATEGORÍAS
   ================================================================
   Sin buscador y sin Mi cuenta: los dos ya viven fuera (encabezado
   y barra inferior). Lo primero que se ve son las categorías, que
   es a lo que la gente entra. */
.lc-velo {
  position: fixed;
  inset: 0;
  /* Por encima del encabezado nuevo (.lc-enc, z-index:160 en
     header-buscador.css): si no, con el encabezado visible (arriba
     del todo, sin haber hecho scroll) la hoja se abre pero queda
     tapada por él. */
  z-index: 161;
  background: rgba(30, 43, 39, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s, visibility .28s;
}

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

.lc-hoja {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 162;
  background: var(--crema);
  border-radius: 26px 26px 0 0;
  /* La hoja ya cubre a la barra de abajo (mismo bottom:0, z-index
     mayor) — no necesita el aire extra que antes le dejaba libre;
     solo un cierre cómodo + el safe-area del celular. */
  padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0));
  transform: translateY(101%);
  transition: transform .34s cubic-bezier(.2, .8, .3, 1);
  max-height: 86vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lc-hoja.lc-on { transform: translateY(0); }

/* Mientras se arrastra con el dedo, la hoja sigue el movimiento sin
   animación, para que no se sienta con retardo. */
.lc-hoja.lc-arrastrando { transition: none; }

/* El asa es también la zona de agarre: por eso lleva padding */
.lc-hoja .lc-asa-zona {
  padding: 6px 0 12px;
  cursor: grab;
  touch-action: none;
}

.lc-hoja .lc-asa {
  width: 40px; height: 4px;
  border-radius: 999px;
  background: #D5DBD9;
  margin: 0 auto;
}

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

/* ---------- Toda la tienda: primer renglón de la lista ----------
   Va ARRIBA de las categorías, no al final. Es el "ver todo" del
   catálogo y en una jerarquía el padre va antes que los hijos. */
.lc-hoja .lc-todo {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  border: 1.5px solid var(--borde);
  border-radius: 16px;
  padding: 13px 14px;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
}

.lc-hoja .lc-todo .lc-ic {
  color: var(--resalte);
  font-size: 21px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.lc-hoja .lc-todo b {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 700;
  display: block;
  line-height: 1.2;
}

.lc-hoja .lc-todo small { font-size: 11.5px; color: var(--tinta-suave); }

.lc-hoja .lc-todo .lc-fl { margin-left: auto; color: #C3CCC9; font-size: 17px; }

.lc-reja {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lc-cat {
  border: 1.5px solid var(--c);
  background: color-mix(in srgb, var(--c) 10%, #fff);
  border-radius: 18px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
  opacity: 0;
  transform: translateY(12px) scale(.98);
}

.lc-hoja.lc-on .lc-cat { animation: lc-entra .4s cubic-bezier(.2, .8, .3, 1) forwards; }

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

/* Miniatura suelta: sin recuadro, sin borde y sin fondo.
   Requiere que el PNG tenga transparencia real. */
.lc-cat .lc-foto {
  width: 46px; height: 46px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 8px rgba(30, 43, 39, .16));
}

.lc-cat b {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--c);
  line-height: 1.2;
  display: block;
}

.lc-cat small {
  font-size: 11px;
  color: var(--tinta-suave);
  display: block;
  margin-top: 1px;
}

.lc-cat.lc-ancha { grid-column: 1 / -1; }

/* Las dos fotos del combo, más juntas pero sin tocarse */
.lc-cat .lc-duo {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.lc-cat .lc-duo img {
  width: 46px; height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(30, 43, 39, .16));
}

.lc-hoja .lc-extras {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.lc-hoja .lc-extras a {
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  border: 1.5px solid var(--borde);
  background: #fff;
  color: var(--tinta-suave);
  border-radius: 999px;
  padding: 9px 15px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}

/* ---------- Preferencias: dos columnas, peso reducido ----------
   Idioma y código postal se configuran una vez y casi nunca se
   vuelven a tocar. A ancho completo pesaban más de lo que valen. */
.lc-hoja .lc-prefs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}

.lc-hoja .lc-pref {
  background: #fff;
  border: 1.5px solid var(--borde);
  border-radius: 16px;
  padding: 11px 12px;
}

.lc-hoja .lc-pref-cab {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tinta);
  margin-bottom: 9px;
}

.lc-hoja .lc-pref-cab svg { color: var(--resalte); font-size: 15px; }

.lc-hoja .lc-segmento {
  display: flex;
  background: var(--crema);
  border: 1.5px solid var(--borde);
  border-radius: 999px;
  padding: 3px;
}

.lc-hoja .lc-segmento button {
  flex: 1;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tinta-suave);
  border: 0;
  background: none;
  border-radius: 999px;
  padding: 7px 4px;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.lc-hoja .lc-segmento button.lc-on { background: var(--resalte); color: #fff; }

/* El campo de CP y el botón "Ver" van en la misma fila: apilados
   dejaban esta tarjeta más alta que la de Idioma, sin necesidad. */
.lc-hoja .lc-cp-fila { display: flex; gap: 6px; }

.lc-hoja .lc-cp-fila input {
  flex: 1;
  min-width: 0;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  border: 1.5px solid var(--borde);
  background: var(--crema);
  border-radius: 999px;
  padding: 8px 13px;
  outline: 0;
  color: var(--tinta);
}

.lc-hoja .lc-cp-fila input:focus { border-color: var(--resalte); background: #fff; }
.lc-hoja .lc-cp-fila input::placeholder { color: #A8B4B0; }

.lc-hoja .lc-cp-fila button {
  flex-shrink: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  background: var(--cta);
  color: var(--cta-txt);
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
}

/* El resultado del CP sí ocupa las dos columnas: es una frase */
.lc-hoja .lc-cp-res {
  display: none;
  grid-column: 1 / -1;
  margin-top: -2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--resalte-hondo);
  padding: 0 4px;
}

.lc-hoja .lc-cp-res.lc-on { display: block; }
.lc-hoja .lc-cp-res.lc-error { color: #DD374B; }


/* ================================================================
   4. BURBUJA DEL -15%
   ================================================================
   Va a la izquierda, para no competir con el WhatsApp que ya vive a
   la derecha. Se queda siempre visible: no se esconde al hacer
   scroll. Solo cambia de altura si abajo hay franja de reseñas
   (misma clase body.tiene-franja que ya usa el resto del tema). */
.lc-burb15 {
  position: fixed;
  left: 12px;
  bottom: calc(var(--lc-barra-h) + 12px);
  z-index: 109;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: var(--cta);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: -.3px;
  box-shadow: 0 6px 18px rgba(245, 148, 31, .45);
  transition: bottom .32s cubic-bezier(.2, .8, .3, 1);
}

/* La posición cuando la franja de reseñas está visible se coordina
   en home-franja.css (misma clase body.tiene-franja), junto con el
   WhatsApp flotante — ahí viven las dos juntas para no repetir el
   cálculo del alto de la franja en dos archivos distintos. */

.lc-burb15::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--cta);
  opacity: 0;
  animation: lc-latido 2.8s ease-out infinite;
}

@keyframes lc-latido {
  0%   { transform: scale(.9); opacity: .55; }
  70%,
  100% { transform: scale(1.25); opacity: 0; }
}


/* ================================================================
   5. HOJA DEL -15%
   ================================================================ */
.lc-promo {
  position: fixed;
  inset: 0;
  /* Por encima del encabezado nuevo (.lc-enc, z-index:160): antes
     (z-index:130) el popup del -15% se abría bien pero, si se
     tocaba la burbuja con el encabezado todavía visible (arriba del
     todo, sin scroll), el encabezado verde quedaba encima y tapaba
     el popup. */
  z-index: 163;
  background: rgba(246, 246, 244, .96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--tinta);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}

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

.lc-promo-in {
  padding: 16px 22px 34px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  max-width: 520px;
  margin: 0 auto;
}

.lc-promo .lc-cerrar {
  align-self: flex-end;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--borde);
  color: var(--tinta-suave);
  display: grid;
  place-items: center;
  font-size: 18px;
  cursor: pointer;
}

.lc-promo .lc-mega {
  width: 190px;
  height: auto;
  margin: 4px auto 10px;
  display: block;
}

.lc-promo h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -1.2px;
  line-height: 1.1;
  color: var(--tinta);
}

.lc-promo h2 .lc-cur {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  color: var(--verde);
  font-size: 1.32em;
  display: block;
  line-height: 1;
  margin-top: 2px;
}

.lc-promo p {
  margin-top: 12px;
  font-size: 15px;
  color: var(--tinta-suave);
}

.lc-promo .lc-lista {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.lc-promo .lc-lista div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--tinta);
}

.lc-promo .lc-lista .lc-p {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--verde) 16%, #fff);
  color: var(--resalte-hondo);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 11px;
}

.lc-promo .lc-campo {
  margin-top: 22px;
  display: flex;
  gap: 8px;
}

.lc-promo .lc-campo input {
  flex: 1;
  min-width: 0;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  border: 1.5px solid var(--borde);
  background: #fff;
  color: var(--tinta);
  border-radius: 999px;
  padding: 14px 18px;
  outline: 0;
}

.lc-promo .lc-campo input::placeholder { color: #A8B4B0; }
.lc-promo .lc-campo input:focus { border-color: var(--verde); }

.lc-promo .lc-campo button {
  background: var(--cta);
  color: var(--cta-txt);
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 800;
  border: 0;
  border-radius: 999px;
  padding: 14px 22px;
  flex-shrink: 0;
  cursor: pointer;
}

.lc-promo .lc-letra {
  margin-top: 14px;
  font-size: 11.5px;
  color: #96A29E;
  line-height: 1.5;
}

.lc-promo .lc-ahora {
  margin-top: auto;
  padding-top: 20px;
  text-align: center;
}

.lc-promo .lc-ahora button {
  color: var(--tinta-suave);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lc-promo .lc-gracias { display: none; text-align: center; padding-top: 6px; }
.lc-promo .lc-gracias.lc-on { display: block; }

.lc-promo .lc-palomita {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--verde) 14%, #fff);
  border: 1.5px solid var(--verde);
  color: var(--verde);
  display: grid;
  place-items: center;
  font-size: 26px;
  margin: 0 auto 16px;
}

.lc-promo .lc-gracias b {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 21px;
  color: var(--tinta);
  display: block;
  letter-spacing: -.5px;
}

.lc-promo .lc-cupon {
  margin-top: 22px;
  border: 1.5px dashed var(--cta);
  background: color-mix(in srgb, var(--cta) 8%, #fff);
  border-radius: 18px;
  padding: 16px;
}

.lc-promo .lc-cupon small {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cta);
}

.lc-promo .lc-codigo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

.lc-promo .lc-codigo span {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 1px;
  color: var(--tinta);
}

.lc-promo .lc-codigo button {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid var(--cta);
  color: var(--cta);
  background: #fff;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}

.lc-promo .lc-seguir {
  margin-top: 22px;
  width: 100%;
  background: var(--cta);
  color: var(--cta-txt);
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 800;
  border: 0;
  border-radius: 999px;
  padding: 15px;
  cursor: pointer;
}


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

@media (prefers-reduced-motion: reduce) {
  .lc-cat { opacity: 1; transform: none; animation: none !important; }
  .lc-burb15::after { animation: none; }
  .lc-hoja, .lc-velo, .lc-promo, .lc-burb15 { transition: none; }
}