/* =====================================================================
   NICCOLA — Marca y conversión
   =====================================================================
   26-sep-2026 (original de Limonni) · adaptado para Niccola 2026-10-15.

   QUÉ ES ESTE ARCHIVO
   -------------------
   Estilos de dos cosas nuevas y nada más:

     1. El logotipo real de la marca en el encabezado y en el pie.
     2. Los incentivos de venta: la barra de envío gratis y el aviso
        de retención al intentar salir.

   QUÉ NO TOCA
   -----------
   NADA del catálogo. El mosaico tipo Pinterest (`.feed`, `.pin`,
   `column-count`, las alturas escalonadas, las esquinas redondeadas,
   el texto sobre la foto) se queda exactamente como está, y en este
   archivo no hay una sola regla que lo mencione. Se puede comprobar
   buscando ".pin" o ".feed" aquí dentro: no aparecen.

   Se carga desde includes/layout_header.php, después de style.css.
   Para desactivarlo todo: comentar esa línea.
   ===================================================================== */


/* =====================================================================
   1. LOGOTIPO
   ---------------------------------------------------------------------
   DISTINTO de Limonni a propósito (ver includes/partials/logo.php):
   Niccola no tiene un SVG vectorial propio, así que el emblema es una
   imagen <img> (niccolaEmblema — círculo oliva ya incluido en el PNG)
   y el nombre "Niccola" es texto real en Fraunces cursiva, no un SVG
   con currentColor. Por eso estas reglas ya NO ponen font-size:0 sobre
   el texto (eso lo haría invisible) y el color del wordmark se fija
   con color normal, no con currentColor heredado de un SVG.
   ===================================================================== */

.wordmark-letter {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  display: block;
}
.wordmark-emblema {
  display: block;
  width: auto;
  height: 36px;
  border-radius: 50%;
}

/* El texto real "Niccola" (ver niccolaWordmark() en partials/logo.php). */
.niccola-wordmark-texto {
  font-family: var(--font-display, 'Fraunces', serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: .01em;
  color: var(--black);
  line-height: 1;
  white-space: nowrap;
}

/* Al bajar la página el encabezado ya se compacta por su cuenta; el
   logotipo lo acompaña en la misma proporción. */
.site-header.scrolled .wordmark-emblema       { height: 30px; }
.site-header.scrolled .niccola-wordmark-texto { font-size: 19px; }
.wordmark-emblema, .niccola-wordmark-texto { transition: height .2s cubic-bezier(.4,0,.2,1), font-size .2s cubic-bezier(.4,0,.2,1); }

@media (max-width: 480px) {
  .wordmark-emblema       { height: 31px; }
  .niccola-wordmark-texto { font-size: 19px; }
}

/* Pie de página: el wordmark reemplaza al texto "Niccola". El pie es
   oscuro (carbón), así que aquí el texto se aclara a crema en vez de
   heredar currentColor de un SVG. */
.footer-brand-name {
  color: var(--linen);
  display: block;
}
.footer-wordmark-svg {
  font-size: 18px;
  color: inherit;
}


/* =====================================================================
   2. BARRA DE ENVÍO GRATIS
   ---------------------------------------------------------------------
   Hasta ahora el progreso hacia el envío gratis sólo se veía DENTRO del
   carrito: la clienta tenía que haber agregado algo y haber entrado a
   carrito.php para enterarse de que existía el beneficio. Es decir, el
   incentivo aparecía después de la decisión que pretende influir.

   Esta barra lo saca a la superficie: vive pegada bajo el encabezado en
   todas las páginas, y sólo aparece cuando hay algo en el carrito y
   queda beneficio por alcanzar. Si el carrito está vacío no se muestra
   —no tendría nada que decir— y si ya se logró el envío gratis se
   muestra en verde un momento y se puede cerrar.

   Los números NO se calculan aquí: salen de api/carrito_ver.php, que a
   su vez usa promoResumen() y promoMensajeProgreso() de
   includes/promos_lib.php. Es la misma función que usan el carrito, el
   checkout, el correo de recuperación y Sofía, así que la barra no
   puede decir una cifra distinta de la que cobra la pasarela.
   ===================================================================== */

.envio-barra {
  --eb-alto: 38px;
  position: sticky;
  top: var(--header-h, 64px);
  z-index: 60;
  display: none;                      /* el JS la muestra si procede */
  align-items: center;
  gap: 14px;
  padding: 0 clamp(14px, 4vw, 40px);
  height: var(--eb-alto);
  background: var(--black, #0D0D0D);
  color: rgba(250, 248, 245, .92);
  font-family: var(--font-body, sans-serif);
  font-size: 12.5px;
  line-height: 1.2;
  overflow: hidden;
}
.envio-barra.is-visible { display: flex; }

.envio-barra-texto {
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .01em;
}
.envio-barra-texto b { font-weight: 700; color: #fff; }

/* El riel de progreso. Es lo que convierte un número abstracto
   ("te faltan $80.000") en una meta que se ve avanzar. */
.envio-barra-riel {
  flex: 1 1 auto;
  min-width: 60px;
  max-width: 320px;
  height: 4px;
  border-radius: 999px;
  background: rgba(250, 248, 245, .18);
  overflow: hidden;
}
.envio-barra-relleno {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--gold, #C4984A);
  transition: width .6s cubic-bezier(.16, 1, .3, 1);
}
.envio-barra.is-logrado .envio-barra-relleno { background: #6FBF73; }
.envio-barra.is-logrado .envio-barra-texto b { color: #9BE0A0; }

.envio-barra-cerrar {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  margin-right: -6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  color: rgba(250, 248, 245, .5);
  border-radius: 50%;
  transition: color .2s, background .2s;
}
.envio-barra-cerrar:hover { color: #fff; background: rgba(250, 248, 245, .1); }
.envio-barra-cerrar svg { width: 13px; height: 13px; }

@media (max-width: 640px) {
  .envio-barra {
    --eb-alto: 36px;
    font-size: 11.5px;
    gap: 10px;
    padding: 0 14px;
  }
  /* En un teléfono el riel es lo que comunica, no el texto largo:
     el texto se recorta y el riel conserva su ancho mínimo. */
  .envio-barra-riel { max-width: 110px; min-width: 52px; }
}

/* Convivencia con la fila de categorías.
   `.cat-circles-strip` también es sticky y se ancla en `--header-h`
   (style.css línea 259). Si las dos se pegaran a la misma altura, una
   taparía a la otra al bajar la página. Cuando la barra está visible,
   el JS pone la clase `tiene-barra-envio` en el <body> y la fila de
   categorías baja su anclaje exactamente el alto de la barra. Al
   ocultarse la barra, la clase desaparece y todo vuelve a su sitio:
   no se modifica ninguna regla del archivo original. */
body.tiene-barra-envio .cat-circles-strip { top: calc(var(--header-h) + 38px); }
@media (max-width: 640px) {
  body.tiene-barra-envio .cat-circles-strip { top: calc(var(--header-h) + 36px); }
}


/* =====================================================================
   3. AVISO DE RETENCIÓN (intención de salida)
   ---------------------------------------------------------------------
   Aparece UNA sola vez por visita, cuando la clienta hace el gesto de
   irse con el carrito lleno. No es un anuncio: repite el beneficio que
   ya tiene a medio camino y le da un botón para volver al carrito.

   Nunca se muestra en el checkout (ahí interrumpir es perder la venta
   que ya estaba hecha) ni si el carrito está vacío.
   ===================================================================== */

.retencion-fondo {
  position: fixed; inset: 0; z-index: 9995;
  background: rgba(34, 30, 26, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.retencion-fondo.is-open { opacity: 1; pointer-events: auto; }

.retencion-caja {
  position: relative;
  width: 100%; max-width: 420px;
  background: var(--linen, #FAF8F5);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(13, 13, 13, .3);
  padding: 34px 30px 28px;
  text-align: center;
  transform: translateY(14px) scale(.98);
  transition: transform .32s cubic-bezier(.16, 1, .3, 1);
}
.retencion-fondo.is-open .retencion-caja { transform: none; }

.retencion-emblema {
  display: block;
  height: 40px; width: auto;
  margin: 0 auto 18px;
  color: var(--black, #0D0D0D);
}

.retencion-titulo {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--black, #0D0D0D);
  margin: 0 0 10px;
}
.retencion-titulo em { font-style: italic; }

.retencion-texto {
  font-size: 14.5px;
  line-height: 1.6;
  color: #5C544A;
  margin: 0 auto 20px;
  max-width: 34ch;
}
.retencion-texto b { color: var(--black, #0D0D0D); font-weight: 600; }

/* El mismo riel de la barra, para que se lea como el mismo beneficio
   y no como una promoción distinta. */
.retencion-riel {
  height: 5px; border-radius: 999px;
  background: rgba(34, 30, 26, .1);
  overflow: hidden;
  margin: 0 auto 22px;
  max-width: 260px;
}
.retencion-relleno {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: var(--gold, #C4984A);
  transition: width .8s cubic-bezier(.16, 1, .3, 1) .15s;
}

.retencion-acciones { display: flex; flex-direction: column; gap: 9px; }
.retencion-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 13px 22px;
  font-family: var(--font-body, sans-serif);
  font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  border-radius: 3px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.retencion-btn--primario {
  background: var(--black, #0D0D0D); color: var(--linen, #FAF8F5);
  border-color: var(--black, #0D0D0D);
}
.retencion-btn--primario:hover { background: #2E2A25; }
.retencion-btn--texto {
  background: none; color: #6E665C; border: 0;
  letter-spacing: .04em; text-transform: none;
  font-size: 13px; font-weight: 400; min-height: 38px;
}
.retencion-btn--texto:hover { color: var(--black, #0D0D0D); text-decoration: underline; }

.retencion-cerrar {
  position: absolute; top: 10px; right: 10px;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  color: #8C847A; border-radius: 50%;
  transition: background .2s, color .2s;
}
.retencion-cerrar:hover { background: rgba(34, 30, 26, .06); color: var(--black, #0D0D0D); }
.retencion-cerrar svg { width: 15px; height: 15px; }

@media (max-width: 420px) {
  .retencion-caja { padding: 28px 20px 22px; border-radius: 12px; }
  .retencion-titulo { font-size: 22px; }
  .retencion-texto { font-size: 13.5px; }
}

/* Quien pidió menos movimiento en su sistema no recibe animaciones. */
@media (prefers-reduced-motion: reduce) {
  .envio-barra-relleno, .retencion-relleno,
  .retencion-caja, .retencion-fondo { transition: none; }
}

/* Hito del escalón intermedio de envío (precio fijo) dentro del riel (internacional) */
.envio-barra-riel, .pdp-envio-riel { position: relative; }
.envio-hito {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: rgba(250, 248, 245, .75); transform: translateX(-1px);
}