/* ============================================================================
   Carrito + sección de encargo — Zafira Belleza & Tendencias
   CSS propio (sin Tailwind): no toca ni recompila la hoja existente.
   Paleta de la casa: marfil #FAF6EE · esmeralda #113E21 · oro #C29947 ·
   oliva #5A6735 · tinta #1C1C17 · verde-gratis #2D6A4F
   ============================================================================ */
:root {
  --zc-marfil: #FAF6EE;
  --zc-marfil-alt: #F3EEE3;
  --zc-esmeralda: #113E21;
  --zc-esmeralda-prof: #0A2614;
  --zc-oro: #C29947;
  --zc-oliva: #5A6735;
  --zc-tinta: #1C1C17;
  --zc-suave: rgba(28, 28, 23, .66);
  --zc-verde: #2D6A4F;
  --zc-linea: rgba(90, 103, 53, .28);
  --zc-sombra: 0 18px 40px -18px rgba(10, 38, 20, .35);
}

/* ---------------------------------------------------------------- accesibilidad */
/* El atributo hidden tiene que ganarle SIEMPRE a cualquier display de clase.
   Sin esto, .zc-dos{display:grid} mantiene visible el bloque de direccion aunque
   el JS lo marque hidden (pasa lo mismo con .zc-aviso y .zn-vermas, que ya tienen
   su propia regla; esta general evita que se repita). */
[hidden] { display: none !important; }
body.zc-sin-scroll { overflow: hidden; }
.zc-oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- botón flotante */
.zc-btn {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--zc-esmeralda); color: var(--zc-marfil);
  border: 1px solid rgba(194, 153, 71, .55); border-radius: 999px;
  padding: 12px 18px; font: 600 13px/1 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: .06em; cursor: pointer; box-shadow: var(--zc-sombra);
  transition: transform .25s ease, background .25s ease;
}
.zc-btn:hover { background: var(--zc-esmeralda-prof); transform: translateY(-2px); }
.zc-btn--vacio { background: rgba(17, 62, 33, .92); }
.zc-btn-ico { font-size: 16px; line-height: 1; }
.zc-btn-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--zc-oro); color: var(--zc-esmeralda-prof);
  font-size: 11px; font-weight: 700;
}
.zc-btn-sub { font-weight: 700; }

/* ------------------------------------------------------------------- cajón/drawer */
.zc-fondo {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(10, 38, 20, .55); backdrop-filter: blur(2px);
}
.zc-drawer {
  position: fixed; top: 0; right: 0; z-index: 80;
  width: min(440px, 100%); height: 100%;
  display: flex; flex-direction: column;
  background: var(--zc-marfil); border-left: 1px solid var(--zc-linea);
  box-shadow: -20px 0 50px -30px rgba(10, 38, 20, .55);
  transform: translateX(102%); transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--zc-tinta);
}
.zc-drawer.zc-abierto { transform: none; }
.zc-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--zc-linea); background: #fff;
}
.zc-cab h2 {
  margin: 0; font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px; color: var(--zc-esmeralda);
}
.zc-x-cerrar {
  background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer;
  color: var(--zc-oliva); padding: 2px 6px;
}
.zc-cuerpo { flex: 1; overflow-y: auto; padding: 16px 18px 22px; }
.zc-pie {
  border-top: 1px solid var(--zc-linea); background: #fff; padding: 14px 18px 18px;
}

/* ------------------------------------------------------------------- bloques */
.zc-bloque { margin-bottom: 18px; }
.zc-bloque-tit {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--zc-linea);
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.zc-bloque-tit.zc-t-stock { color: var(--zc-verde); }
.zc-bloque-tit.zc-t-encargo { color: var(--zc-oliva); }
.zc-lista { list-style: none; margin: 0; padding: 0; }
.zc-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid rgba(90, 103, 53, .14);
}
.zc-item-txt { min-width: 0; }
.zc-item-nom { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.35; }
.zc-item-ref, .zc-item-precio { margin: 2px 0 0; font-size: 11px; color: var(--zc-suave); }
.zc-item-ctrl { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.zc-q {
  width: 26px; height: 26px; border: 1px solid var(--zc-linea); background: #fff;
  color: var(--zc-esmeralda); font-size: 15px; line-height: 1; cursor: pointer;
}
.zc-q:hover { border-color: var(--zc-oro); }
.zc-n { min-width: 20px; text-align: center; font-size: 13px; font-weight: 700; }
.zc-sub { min-width: 74px; text-align: right; font-size: 13px; font-weight: 700; color: var(--zc-esmeralda); }
.zc-x {
  border: 0; background: none; color: var(--zc-suave); font-size: 18px;
  line-height: 1; cursor: pointer; padding: 0 2px;
}
.zc-x:hover { color: #A03A2B; }

/* ------------------------------------------------------------------- resumen */
.zc-resumen { margin-top: 10px; border-top: 1px solid var(--zc-linea); padding-top: 10px; }
.zc-linea-res {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: var(--zc-suave); padding: 3px 0;
}
.zc-total {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--zc-linea);
  font-family: 'Playfair Display', Georgia, serif; font-size: 17px; color: var(--zc-esmeralda);
}
.zc-total strong { font-size: 22px; }
.zc-vacio { padding: 26px 4px; text-align: center; color: var(--zc-suave); font-size: 13px; }

/* ---------------------------------------------------------------- formulario */
.zc-paso2 { margin-top: 6px; }
.zc-campo { margin-bottom: 10px; }
.zc-campo label {
  display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--zc-oliva);
}
.zc-campo input, .zc-campo textarea, .zc-campo select {
  width: 100%; border: 1px solid var(--zc-linea); background: #fff;
  padding: 10px 12px; font: 400 14px/1.3 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--zc-tinta); box-sizing: border-box;
}
.zc-campo input:focus, .zc-campo textarea:focus, .zc-campo select:focus {
  outline: none; border-color: var(--zc-oro); box-shadow: 0 0 0 2px rgba(194, 153, 71, .25);
}
/* Menus de Region y Comuna: van en una fila y la direccion ocupa el ancho completo. Se deja la
   flecha nativa del select (no se toca appearance) para no depender de imagenes externas. */
.zc-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.zc-campo--ancho { grid-column: 1 / -1; }
.zc-campo select:disabled { background: #F5F1E6; color: var(--zc-suave); cursor: not-allowed; }
@media (max-width: 430px) { .zc-dos { grid-template-columns: 1fr; } }
.zc-requerido { color: #A03A2B; }
.zc-radio-grupo { display: flex; flex-wrap: wrap; gap: 8px; }
.zc-radio {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px;
  border: 1px solid var(--zc-linea); background: #fff; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--zc-oliva);
}
.zc-radio input { accent-color: var(--zc-esmeralda); }
.zc-error {
  margin: 4px 0 8px; padding: 8px 10px; background: rgba(160, 58, 43, .08);
  border-left: 2px solid #A03A2B; color: #7d2c21; font-size: 12px;
}

/* ------------------------------------------------------------------ botones CTA */
.zc-btn-cta {
  display: block; width: 100%; margin-top: 10px; border: 1px solid var(--zc-esmeralda);
  background: var(--zc-esmeralda); color: var(--zc-marfil); cursor: pointer;
  padding: 14px 16px; font: 700 13px/1 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; transition: background .25s ease;
}
.zc-btn-cta:hover:not(:disabled) { background: var(--zc-esmeralda-prof); }
.zc-btn-cta:disabled { opacity: .45; cursor: not-allowed; }
.zc-btn-cta.zc-wa { background: var(--zc-verde); border-color: var(--zc-verde); }
.zc-btn-cta.zc-wa:hover { background: var(--zc-esmeralda); }
.zc-btn-sec {
  display: block; width: 100%; margin-top: 8px; border: 1px solid rgba(90, 103, 53, .45);
  background: #fff; color: var(--zc-oliva); cursor: pointer; padding: 12px 16px;
  font: 600 12px/1 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: .1em;
  text-transform: uppercase;
}
.zc-btn-sec:hover { border-color: var(--zc-oro); color: var(--zc-esmeralda); }
.zc-nota {
  margin-top: 10px; font-size: 11px; line-height: 1.5; color: var(--zc-suave); text-align: center;
}

/* ---------------------------------------------------------------------- aviso */
.zc-aviso {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  z-index: 90; max-width: 90vw; padding: 10px 16px; border-radius: 999px;
  background: var(--zc-esmeralda); color: var(--zc-marfil);
  font: 600 12px/1.3 'Plus Jakarta Sans', system-ui, sans-serif;
  box-shadow: var(--zc-sombra);
}

/* ------------------------------------------------- botones dentro de las tarjetas */
.btn-carrito, .btn-encargo {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--zc-verde); background: var(--zc-verde); color: #fff;
  padding: 9px 14px; cursor: pointer;
  font: 700 11px/1 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: .1em; text-transform: uppercase; transition: background .25s ease;
}
.btn-carrito:hover, .btn-encargo:hover { background: var(--zc-esmeralda); border-color: var(--zc-esmeralda); }
.btn-encargo { border-color: var(--zc-oliva); background: var(--zc-oliva); }
.btn-encargo:hover { background: var(--zc-esmeralda); border-color: var(--zc-esmeralda); }
.btn-pedir-wa {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(194, 153, 71, .55); background: none; color: var(--zc-oliva);
  padding: 8px 12px; text-decoration: none;
  font: 600 11px/1 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: .1em;
  text-transform: uppercase;
}
.btn-pedir-wa:hover { border-color: var(--zc-oro); color: var(--zc-esmeralda); }
.tarjeta-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ------------------------------------------------------- badge de "por encargo" */
.badge-encargo { background: var(--zc-oliva) !important; }
.badge-inmediato-ahora { background: var(--zc-verde) !important; }

/* ------------------------------------------------------------- sección encargo */
.zn-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 18px 0 6px; padding: 14px; border: 1px solid var(--zc-linea); background: #fff;
}
.zn-barra .zn-campo { flex: 1 1 220px; }
.zn-barra input {
  width: 100%; border: 1px solid var(--zc-linea); padding: 10px 12px;
  font: 400 14px/1.2 'Plus Jakarta Sans', system-ui, sans-serif; box-sizing: border-box;
}
.zn-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; }
.zn-rejilla {
  display: grid; gap: 22px; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .zn-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .zn-rejilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .zn-rejilla { grid-template-columns: repeat(4, 1fr); } }

.zn-tarjeta { height: 100%; }
.zn-media {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--zc-marfil-alt), #fff 70%);
}
.zn-monograma {
  font-family: 'Playfair Display', Georgia, serif; font-size: 66px; line-height: 1;
  color: rgba(90, 103, 53, .35);
}
/* Foto oficial de la revista (CDN de Natura -> assets/natura/<PID>.jpg). Va encima del
   monograma: si la imagen no carga, el onerror la quita y queda el monograma. */
.zn-foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 10px; background: #fff;
}
/* Aviso flotante (ej: "datos guardados, sigue agregando productos"). Vive FUERA del cajon a
   proposito: justamente tiene que verse cuando el cajon se cierra. */
.zc-aviso {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 90; max-width: min(92vw, 460px); margin: 0;
  padding: 12px 18px; border-radius: 10px;
  background: var(--zc-esmeralda); color: #fff; text-align: center;
  font: 600 12.5px/1.45 'Plus Jakarta Sans', system-ui, sans-serif;
  box-shadow: 0 12px 30px rgba(28, 28, 23, .28);
}
.zc-aviso[hidden] { display: none; }
/* Ilustracion propia de cada forma de compra (SVG en src/ilustraciones/). Va arriba del
   numero y del titulo, como cabecera de la tarjeta. */
.zop-img {
  display: block; width: 100%; height: auto; margin: 0 0 16px;
  border-radius: 12px;
}
.zn-cuerpo { display: flex; flex-direction: column; gap: 6px; padding: 16px; flex: 1; }
.zn-nombre {
  margin: 0; font-family: 'Playfair Display', Georgia, serif;
  font-size: 15.5px; line-height: 1.35; color: var(--zc-esmeralda);
}
.zn-ref { margin: 0; font-size: 11px; color: var(--zc-suave); }
.zn-pie {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 10px; margin-top: auto; padding-top: 10px;
}
.zn-pie .precio { display: flex; flex-direction: column; }
.zn-lista {
  margin: 2px 0 0; font-size: 11px; font-weight: 400; color: var(--zc-suave);
  text-decoration: line-through;
}
.zn-vermas {
  display: block; margin: 24px auto 0; border: 1px solid rgba(90, 103, 53, .45);
  background: #fff; color: var(--zc-oliva); cursor: pointer; padding: 13px 22px;
  font: 600 12px/1 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: .1em;
  text-transform: uppercase;
}
.zn-vermas:hover { border-color: var(--zc-oro); color: var(--zc-esmeralda); }
.zn-vermas[hidden] { display: none; }      /* el atributo hidden le gana al display:block */
.zn-error { padding: 16px; border-left: 2px solid #A03A2B; background: rgba(160, 58, 43, .06); font-size: 13px; }

/* --------------------------------------------------- tres formas de comprar */
.zop-grid { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 24px; }
@media (min-width: 768px) { .zop-grid { grid-template-columns: repeat(3, 1fr); } }
.zop {
  display: flex; flex-direction: column; gap: 10px; height: 100%;
  border: 1px solid var(--zc-linea); background: #fff; padding: 22px;
}
.zop--destacado { border-color: var(--zc-oro); box-shadow: var(--zc-sombra); }
.zop-num { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: 26px; line-height: 1; color: var(--zc-oro); }
.zop h3 { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: 19px; line-height: 1.25; color: var(--zc-esmeralda); }
.zop p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--zc-suave); }
.zop p strong { color: var(--zc-tinta); }
/* Los tres CTA de "Tres formas de comprar" deben quedar al MISMO nivel, y ese nivel es el del
   mas bajo (el de "Ver stock (21)"): las tarjetas 2 y 3 bajan, la 1 no se mueve.
   Como se consigue: las tres tarjetas miden lo mismo (align-items:stretch) y el boton se pega
   al borde inferior (margin-top:auto).
   Va con !important a proposito: el CSS de la marca trae reglas mas especificas y sin esto la
   alineacion no se aplica (comprobado en el navegador: los botones seguian a distinto nivel). */
.zop-grid { align-items: stretch !important; }
.zop-grid > .zop { display: flex !important; flex-direction: column !important; }
.zop-grid > .zop > .zop-accion { margin-top: auto !important; }
.zop-accion { margin-top: auto; padding-top: 10px; display: flex; }
.zop-accion a { text-decoration: none; }
/* Los tres CTA de "Tres formas de comprar" tienen que verse IGUALES: mismo ancho (el de la
   tarjeta), misma altura y misma tipografia. Sin esta regla el mas corto ("Ver stock (21)")
   queda angosto y el .btn-wa (que viene de zafira.css) sale mas grande que los otros dos.
   Gana por especificidad (.zop-accion > a = 0,2,0 v/s .btn-x = 0,1,0), sin depender del orden. */
.zop-accion > a {
  flex: 1 1 auto; width: 100%; min-height: 42px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px;
  font: 700 11px/1.2 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: .1em; text-transform: uppercase; text-align: center;
}

/* etiqueta chica bajo el precio (precio exclusivo / precio oficial) */
.etiqueta-precio {
  display: block; margin-top: 4px; font: 600 10.5px/1.2 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: .1em; text-transform: uppercase; color: var(--zc-suave);
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 480px) {
  .zc-btn { right: 12px; bottom: 12px; padding: 11px 14px; }
  .zc-btn-sub { display: none; }
  .zc-drawer { width: 100%; }
  .zc-item { align-items: flex-start; flex-direction: column; }
  .zc-item-ctrl { width: 100%; justify-content: space-between; }
}

/* -------------------------------------------------------- sin movimiento (a11y) */
@media (prefers-reduced-motion: reduce) {
  .zc-drawer { transition: none; }
  .zc-btn { transition: none; }
}

/* Nunca imprimir el carrito */
@media print {
  .zc-btn, .zc-drawer, .zc-fondo, .zc-aviso { display: none !important; }
}

/* ============================================================================
   RESPONSIVE (auditoria 2026-10-14, medida en Chromium a 390 / 820 / 1440 px)
   Sin tocar paleta ni tipografia: solo estructura tactil.
   Lo que se midio ANTES de estos arreglos:
     · filtros de Natura: 13 chips en varias filas (alto 124 px a 820, ~186 a 390)
     · inputs del cajon y buscador en 14 px  -> iOS hace auto-zoom al tocarlos
     · .zc-drawer con height:100%            -> la barra del navegador tapa el pie
     · body/footer con 0 px de aire al final -> el boton flotante tapa el ultimo boton
   ============================================================================ */
html, body { overflow-x: clip; }   /* clip y no hidden: hidden rompe el header sticky */

/* Tarjetas: columna flex y CTA siempre al fondo. Ya venia del Tailwind (medido:
   .tarjeta = flex/column), se deja explicito para no depender de otra hoja. */
.tarjeta { display: flex !important; flex-direction: column !important; height: 100% !important; }
.tarjeta > div:last-child { margin-top: auto; }
/* Filas de igual altura solo donde hay varias columnas (tablet/escritorio). En celular
   queda auto a proposito: forzar la altura de la tarjeta mas alta dejaria huecos enormes. */
@media (min-width: 640px) { .grid:has(> .tarjeta) { grid-auto-rows: 1fr; } }

/* ---- cajon: alto real del viewport movil + scroll interno ---- */
.zc-drawer {
  height: 100vh;                 /* respaldo para navegadores sin dvh */
  height: 100dvh;                /* evita que la barra de Safari/Chrome tape el pie */
  max-height: 100dvh;
}
.zc-cab, .zc-pie { flex: 0 0 auto; position: relative; z-index: 1; }
.zc-cuerpo { overscroll-behavior: contain; }
@media (max-width: 600px) { .zc-drawer { width: 100%; max-width: 100vw; } }

/* ---- iOS: con menos de 16px Safari hace zoom al tocar el campo ---- */
@media (max-width: 1024px) {
  #zc-drawer input, #zc-drawer select, #zc-drawer textarea, .zn-barra input {
    font-size: 16px !important;
  }
}

/* ---- filtros de Natura: una sola fila con scroll horizontal tactil y sin barra ---- */
@media (max-width: 1024px) {
  .zn-cats {
    flex-wrap: nowrap !important; white-space: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;
    scroll-snap-type: x proximity; padding-bottom: 4px; margin-bottom: 18px;
  }
  .zn-cats::-webkit-scrollbar { display: none; }
  .zn-cats > * { flex: 0 0 auto; scroll-snap-align: start; }
}

/* ---- boton flotante: area tactil minima 48x48 (medido: ya daba 120x48) ---- */
.zc-btn { min-height: 48px; min-width: 48px; }

/* ---- aire al final para que el boton flotante no tape el ultimo boton de compra ---- */
@media (max-width: 1024px) { body footer { padding-bottom: 96px !important; } }

/* ============================================================================
   CELULAR (<= 767px): la primera pantalla del catalogo.
   Objetivo (auditoria 2026-10-14): que las 3 formas de comprar se entiendan sin
   scrollear y que haya productos en la primera pantalla. Antes habia que pasar
   ~3 pantallas: header con 3 botones (200 px) + hero de 5 lineas (530 px) +
   3 tarjetas de modalidad de ~600 px cada una.
   Escritorio y tablet NO se tocan: todo vive dentro de este media query.
   ============================================================================ */
.zc-nav, .zc-menu-btn { display: none; }
.zc-menu-lista { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zc-solo-esc { display: inline; }
.zc-solo-mov { display: none; }

/* ============================================================================
   TABLET (768-1024 px) — 2026-10-14. Pedido del usuario: "aplica todos los cambios
   que hemos hecho en la version celular a la version tablet". Aqui van los que
   faltaban: sin numeros 1-2-3 en las tres formas de comprar y la barra pegada de
   secciones (que en celular ya existia). No hizo falta tocar la ficha de pedido
   (en tablet ya era cuadrada, del mismo tamaño que la de stock y sin solape) ni el
   icono (ya medía 197 x 99). Escritorio (> 1024 px) NO se toca.
   ============================================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  .zop-grid > .zop > .zop-num { display: none !important; }
  .zc-nav { display: flex; background: #fff; border-top: 1px solid var(--zc-linea); }
  .zc-nav a {
    flex: 1; text-align: center; padding: 11px 6px; text-decoration: none;
    font: 700 11px/1.2 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: .08em;
    text-transform: uppercase; color: var(--zc-oliva); border-bottom: 2px solid transparent;
  }
  .zc-nav a + a { border-left: 1px solid rgba(90, 103, 53, .16); }
  #entrega, #encargo, #como-comprar { scroll-margin-top: 118px; }
}

@media (max-width: 767px) {
  .zc-solo-esc { display: none; }

  /* --- cabecera: una sola fila, enlaces plegados en un menu sin JS (checkbox + label).
         El checkbox esta "hidden" pero el label lo activa igual: no hace falta JavaScript. --- */
  .zc-menu { position: relative; }
  .zc-menu-btn {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    border: 1px solid rgba(90, 103, 53, .35); background: #fff; color: var(--zc-esmeralda);
    padding: 10px 12px; font: 700 11px/1 'Plus Jakarta Sans', system-ui, sans-serif;
    letter-spacing: .1em; text-transform: uppercase;
  }
  .zc-menu-txt { display: inline; }
  .zc-menu-lista {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; display: none;
    flex-direction: column; gap: 6px; min-width: 234px;
    padding: 10px; background: var(--zc-marfil); border: 1px solid var(--zc-linea);
    box-shadow: 0 18px 40px -18px rgba(10, 38, 20, .45);
  }
  .zc-menu-tog:checked ~ .zc-menu-lista { display: flex; }
  .zc-menu-lista a { width: 100%; text-align: center; }

  /* --- barra pegada de secciones (antes no existia) --- */
  .zc-nav { display: flex; background: #fff; border-top: 1px solid var(--zc-linea); }
  .zc-nav a {
    flex: 1; text-align: center; padding: 11px 4px; text-decoration: none;
    font: 700 10.5px/1.2 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: .08em;
    text-transform: uppercase; color: var(--zc-oliva); border-bottom: 2px solid transparent;
  }
  .zc-nav a + a { border-left: 1px solid rgba(90, 103, 53, .16); }
  #entrega, #encargo, #como-comprar { scroll-margin-top: 108px; }

  /* --- hero: que los 2 botones quepan en una fila y el titulo de seccion no gaste alto --- */
  .zc-solo-mov { display: block !important; }
  .zc-hero-cta { gap: 8px !important; margin-top: 14px !important; }
  .zc-hero-cta > * { padding: 11px 14px !important; font-size: 11px !important; }
  .zc-formas-cab.eyebrow { display: none !important; }
  .zc-formas-cab { font-size: 18px !important; line-height: 1.25 !important; margin-top: 0 !important; }

  /* --- las 3 formas: de tarjetas de ~600 px a filas de ~125 px.
         Se usa ".zop-grid > .zop" porque la marca tiene una regla MAS especifica
         (.zop-grid > .zop{display:flex} con !important) y con !important gana la mas especifica,
         no la que aparece despues. --- */
  .zop-grid { display: block !important; margin-top: 10px !important; }
  .zop-grid > .zop {
    display: grid !important; grid-template-columns: 96px 1fr !important;
    gap: 2px 12px !important; padding: 10px 12px !important; margin-bottom: 8px !important;
    align-items: center; text-align: left !important;
    border-left: 3px solid var(--zc-verde);
  }
  .zop--destacado { border-left-color: var(--zc-oro) !important; }
  /* icono al doble (antes 54 x 44): se mantiene la proporcion del SVG con height:auto */
  .zop-grid > .zop > .zop-img { grid-area: 1 / 1 / 5 / 2 !important; width: 96px !important;
                                height: auto !important; object-fit: contain; margin: 0 !important; border-radius: 0; }
  /* numeros 1-2-3 fuera en celular: la fila 1 colapsa y el titulo sube solo */
  .zop-grid > .zop > .zop-num { display: none !important; }
  .zop-grid > .zop > h3 { grid-area: 2 / 2 / 3 / 3 !important; font-size: 16px !important; line-height: 1.2 !important; }
  .zop-grid > .zop > p { grid-area: 3 / 2 / 4 / 3 !important; font-size: 12px !important; line-height: 1.32 !important;
                          display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .zop-grid > .zop > .zop-accion { grid-area: 4 / 2 / 5 / 3 !important; margin: 7px 0 0 !important;
                                   padding: 0 !important; display: block !important; }
  .zop-grid > .zop > .zop-accion > a { min-height: 32px !important; padding: 8px 12px !important; font-size: 10px !important; }

  /* --- grilla de stock: 2 columnas con foto cuadrada --- */
  .grid:has(> .tarjeta) { grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-top: 12px !important; }
  .tarjeta-media { aspect-ratio: 1 / 1; height: auto !important; }
  .tarjeta-media img { object-fit: contain !important; }
  .tarjeta > div:last-child { padding: 9px !important; gap: 3px !important; }
  .tarjeta h3 { font-size: 13px !important; line-height: 1.28 !important;
                display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .tarjeta p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tarjeta .badge { font-size: 8px !important; padding: 3px 5px !important; }
  .tarjeta .precio { font-size: 15px !important; }
  .tarjeta .etiqueta-precio { font-size: 8px !important; }
  .tarjeta-acciones { flex-direction: column; gap: 6px !important; }
  .tarjeta-acciones > * { width: 100%; justify-content: center;
                          padding: 9px 8px !important; font-size: 9.5px !important; }

  /* --- catalogo Natura en celular: MISMA forma que las tarjetas de stock.
         Antes esta rejilla pasaba a "fila con miniatura de 78 px" y la foto quedaba
         4,6 veces mas chica que la de stock (78 vs 168 px, medido a 390 px). Ahora la
         ficha conserva el cuadro 1:1 de ~168 px —el mismo que stock— con el texto debajo
         y el chip "Por encargo" en flujo arriba del nombre: nada tapa la foto. --- */
  .zn-rejilla { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .zn-tarjeta { display: flex !important; flex-direction: column;
                background: #fff; border: 1px solid var(--zc-linea); }
  .zn-media { position: relative; flex: 0 0 auto;
              width: 100% !important; height: auto !important;
              aspect-ratio: 1 / 1; margin: 0 !important; }
  .zn-monograma { font-size: 52px !important; }
  .zn-cuerpo { flex: 1 1 auto; padding: 9px !important; gap: 3px !important; }
  .zn-chip { font-size: 8px !important; padding: 3px 5px !important; letter-spacing: .08em; }
  .zn-nombre { font-size: 13px !important; line-height: 1.28 !important;
               display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .zn-ref { font-size: 9px !important; }
  .zn-pie { margin-top: auto !important; padding-top: 8px !important; gap: 6px !important;
            flex-direction: column; align-items: stretch; }
  .zn-pie .precio { font-size: 15px; }
  .zn-lista { font-size: 9.5px !important; }
  .zn-pie .btn-encargo { width: 100%; justify-content: center;
                         padding: 9px 8px !important; font-size: 9.5px !important; }
  .zn-vermas { margin-top: 16px !important; width: 100%; }

  /* --- buscador mas compacto --- */
  .zn-barra { padding: 10px !important; gap: 8px !important; }

  /* ==========================================================================
     COMPACTADO FINAL (medido a 390 real con el mapa por tramos):
     cabecera 96 + hero 230 + formas 512 + buscador 105 + cabecera de seccion 292
     = el primer producto arrancaba en 1.241 px (1,47 pantallas de 844).
     Aqui se pliegan los textos REPETIDOS (el hero y la barra de secciones ya dicen
     lo mismo que las bajadas largas) y se aprietan paddings. Nada de esto se aplica
     sobre 767 px: escritorio y tablet quedan intactos.
     ========================================================================== */
  main > section:first-of-type { padding-top: 16px !important; padding-bottom: 8px !important; }
  main > section:first-of-type > .eyebrow { display: none !important; }
  main > section:first-of-type h1 { font-size: 26px !important; }
  main > section:first-of-type p { font-size: 13px !important; }
  .zc-hero-cta { margin-top: 10px !important; }

  .zc-formas-cab:not(.eyebrow) { display: none !important; }
  #como-comprar { padding-top: 0 !important; padding-bottom: 6px !important; }
  #como-comprar > p:last-of-type { display: none !important; }
  #como-comprar + section { padding-top: 4px !important; }

  #entrega, #varios { padding-top: 10px !important; }
  #entrega > div:first-child, #varios > div:first-child { padding-bottom: 6px !important; }
  #entrega > div:first-child .eyebrow, #varios > div:first-child .eyebrow { display: none !important; }
  #entrega > div:first-child h2, #varios > div:first-child h2 { font-size: 19px !important; }
  #entrega > div:first-child .cuenta, #varios > div:first-child .cuenta { margin-top: 2px !important; }
  #entrega > p, #varios > p { display: none !important; }
  #entrega > .grid, #varios > .grid { margin-top: 10px !important; }

  .zop-grid > .zop { padding: 8px 12px !important; gap: 1px 10px !important; margin-bottom: 6px !important; }
  .zop-grid > .zop > h3 { font-size: 15.5px !important; }
  .zop-grid > .zop > p { -webkit-line-clamp: 1 !important; }
  .zop-grid > .zop > .zop-accion { margin-top: 5px !important; }
  .zop-grid > .zop > .zop-accion > a { min-height: 30px !important; padding: 7px 12px !important; }

  /* --- segunda pasada: que el primer producto entre VISIBLE en la primera pantalla ---
     El parrafo del hero se pliega porque la barra pegada (En stock / A pedido / Natura)
     y las 3 filas numeradas dicen exactamente lo mismo, y el badge de la seccion se
     repite en cada tarjeta. --- */
  main > section:first-of-type { padding-top: 10px !important; }
  main > section:first-of-type p { display: none !important; }
  main > section:first-of-type h1 { font-size: 24px !important; }
  .zc-hero-cta { margin-top: 8px !important; }
  .zc-nav a { padding: 9px 4px !important; }
  #entrega > div:first-child > .etiqueta, #varios > div:first-child > .etiqueta { display: none !important; }
  .zn-barra { padding: 8px !important; }
  #buscar { padding-top: 10px !important; padding-bottom: 10px !important; }

  /* --- banner que se oculta al bajar. Pedido del usuario: en la pantalla del
         celular el header sticky (logo + barra de secciones, ~100 px) come mucho
         contenido. Se desliza hacia arriba al bajar y vuelve al subir; el estado lo
         pone carrito.js con la clase .zc-header-oculto. SOLO <= 767 px: en tablet y
         escritorio el header se queda quieto. --- */
  body > header.sticky { transition: transform .28s cubic-bezier(.22, .61, .36, 1); }
  body > header.zc-header-oculto { transform: translateY(-100%); }
}

/* ============================================================================
   FIX 2026-10-14 — el aviso deja de tapar el producto.
   ANTES: .badge vivia en position:absolute dentro de .tarjeta-media, encima de la
   foto. En celular (tarjeta de ~170 px) la cinta "Entrega Inmediata - En Stock"
   cubria la franja superior del producto, y en "A pedido" el chip "Por encargo"
   tapaba casi entera la miniatura de 78 px (medido en Chromium a 390 px).
   AHORA: .tarjeta-media pasa a rejilla de 2 filas. El badge ocupa la fila 1 a
   todo el ancho, EN FLUJO (ya no absoluto), y la foto conserva debajo su cuadro
   1:1 intacto: no se achica ni se recorta, solo se le suma la franja arriba.
   Se excluye .zn-media porque esa caja es position:relative y usa el monograma
   como respaldo de la foto (no debe reordenarse).
   Especificidad (0,3,0): le gana al .badge de zafira.css y a las reglas !important
   de mas abajo, sin depender del orden.
   ============================================================================ */
.tarjeta-media:not(.zn-media) {
  display: grid !important;
  grid-template-rows: auto auto;
  aspect-ratio: auto !important;
}
.tarjeta-media:not(.zn-media) > .badge {
  position: static !important;
  grid-row: 1; grid-column: 1;
  width: 100%; box-sizing: border-box; text-align: center;
  padding: 5px 6px; font-size: 9px; line-height: 1.25; letter-spacing: .1em;
}
.tarjeta-media:not(.zn-media) > img {
  grid-row: 2; grid-column: 1;
  width: 100%; height: auto !important; aspect-ratio: 1 / 1;
}

/* Chip "Por encargo" de la seccion Natura: antes vivia dentro de la miniatura
   (position:absolute sobre 78 px). Ahora va en el cuerpo de la tarjeta, en flujo,
   asi que la miniatura queda limpia. */
.zn-chip {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
  width: max-content; background: var(--zc-oliva); color: #fff; padding: 3px 7px;
  font: 600 9px/1.2 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
}

/* ============================================================================
   REDONDEO 2026-10-14 — "redondear las puntas de los botones y tarjetas para que
   se vea mas sutil" (pedido del usuario). Va GLOBAL —celular, tablet y escritorio—
   porque es identidad visual, no una adaptacion de espacio. Se declara aqui, al
   final de carrito.css, que se carga DESPUES de zafira.css (el Tailwind generado y
   minificado), asi que gana en igualdad de especificidad. No se tocan los elementos
   que ya tenian su radio propio: .zc-btn y .zc-btn-n y .zc-aviso (999 px, pastilla).
   ============================================================================ */
/* --- tarjetas y paneles --- */
.tarjeta, .zop, .zn-tarjeta, .zn-barra, .banner-cruzado { border-radius: 14px; }
.zn-tarjeta { overflow: hidden; }              /* que la foto respete la esquina */
.zc-bloque, .zc-radio { border-radius: 10px; }
.zc-error { border-radius: 0 10px 10px 0; }    /* conserva su filo izquierdo de aviso */
/* --- botones --- */
.btn-oro, .btn-borde, .btn-wa, .btn-wa--chico, .btn-carrito, .btn-encargo,
.btn-pedir-wa, .zc-btn-cta, .zc-btn-sec, .zc-menu-btn { border-radius: 9px; }
.zc-q { border-radius: 50%; }                  /* los +/- del carrito, redondos */
/* --- campos y filtros --- */
.campo, .zn-barra input, .zc-campo input, .zc-campo textarea, .zc-campo select { border-radius: 10px; }
.filtro { border-radius: 999px; }              /* los chips de filtro, pastilla */
/* --- cintas y chips --- */
.badge, .badge-inmediato, .badge-pedido, .badge-encargo, .zn-chip { border-radius: 6px; }

/* ============================================================================
   FOCO EN LAS TRES FORMAS DE COMPRAR — 2026-10-14.
   Pedido del usuario: al tocar "Cómo comprar" (hero) la página se pone
   levemente tenue y quedan destacadas las 3 tarjetas hasta que el lead toque la
   pantalla o pasen 5 segundos. Aplica en celular, tablet y escritorio.
   El velo lo crea carrito.js y la clase .zc-foco vive en el body; el JS la
   quita al tocar el velo, con Escape o a los 5 s.
   ============================================================================ */
.zc-foco-fondo {
  position: fixed; inset: 0; z-index: 95; background: rgba(10, 38, 20, .58);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
  -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
}
body.zc-foco .zc-foco-fondo { opacity: 1; visibility: visible; }
/* las 3 tarjetas pasan por encima del velo (necesitan z-index > 95) */
body.zc-foco .zop-grid { position: relative; z-index: 96; }
body.zc-foco .zop-grid > .zop {
  box-shadow: 0 26px 60px -16px rgba(10, 38, 20, .6);
  transition: box-shadow .28s ease;
}
@media (prefers-reduced-motion: reduce) {
  .zc-foco-fondo, body.zc-foco .zop-grid > .zop { transition: none; }
}