:root {
  /* Paleta de marca: negro carbón, dorado del logo, blanco cálido,
     texto y beige secundario. Sin rojo ni azul en ningún lado. */
  --ink: #171614;
  --ink-soft: #302c26;
  --bg: #ffffff;
  --surface: #faf8f3;
  --muted: #6f6a62;
  --line: #e0d8c6;
  --accent: #b8a466;
  --accent-dark: #937f44;
  --radius: 14px;
  --shadow: 0 8px 28px rgba(28, 26, 23, .10);
  --max: 1360px;
  /* Inter para texto e interfaz; Libre Franklin para los títulos
     (Categorías, Novedades, etc.). */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-display: "Libre Franklin", "Inter", -apple-system, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  letter-spacing: -0.011em;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* El contenido crece para empujar el footer al fondo: nunca queda una
   franja del body debajo del footer en pantallas con poco contenido. */
.catalog-full,
.plain-wrap,
.auth-screen {
  flex: 1 0 auto;
  min-width: 0;   /* si no, un hijo ancho (carrusel) puede ensanchar la página */
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Cabecera ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(23, 22, 20, .08);
}

.site-header__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;   /* mismo espacio entre logo, buscador y botones */
  padding: 16px 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 28.5px;
  font-weight: 600;
  letter-spacing: .5px;
  white-space: nowrap;
}

.brand__mark {
  color: var(--accent);
  font-size: 21px;
}

.brand__logo {
  display: flex;
  align-items: center;
  height: 96px;
  /* La sombra va acá (afuera del recorte de abajo) para que no se corte. */
  filter: drop-shadow(0 3px 4px rgba(23, 22, 20, .22));
}

/* Recorta el brillo a los límites exactos del logo; en reposo el destello
   queda desplazado a un costado y, sin este recorte, se alcanza a ver. */
.brand__logo-mask {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  overflow: hidden;
}

.brand__logo-mask img {
  height: 100%;
  width: auto;
}

/* Brillo diagonal tipo "glamour" al pasar el mouse: un destello recorre
   el logo de punta a punta, recortado a la forma exacta de las letras
   (usa el propio PNG como máscara, no un rectángulo). */
.brand__logo-mask::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
      transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%);
  -webkit-mask-image: url('../logo/deconoa.png');
  mask-image: url('../logo/deconoa.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  transform: translateX(-130%);
  pointer-events: none;
}

.brand__logo:hover .brand__logo-mask::after {
  animation: shine-sweep 1.3s ease-in-out;
}

/* Una pasada del destello (misma que "Ver pedido"): banda gruesa y lenta.
   Se usa en logo, Acceder y Comprar al pasar el mouse. */
@keyframes shine-sweep {
  from { transform: translateX(-130%); }
  to   { transform: translateX(130%); }
}

.search {
  flex: 1;
  min-width: 0;
  display: flex;
  /* sin ancho máximo: ocupa lo que sobra y los espacios laterales quedan iguales */
  margin: 0;
}

.search__field {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* Botón-lupa a la derecha, dentro del input */
.search__go {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8a8172;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

.search__go:hover {
  background: #f1ebe0;
  color: var(--ink);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.header-acceder {
  display: flex;
  align-items: center;
  height: 44px;
  /* Sombra afuera del recorte del brillo, para que no se corte. */
  filter: drop-shadow(0 3px 4px rgba(23, 22, 20, .22));
}

.header-acceder__mask {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  overflow: hidden;
}

.header-acceder__mask img {
  display: block;
  height: 100%;
  width: auto;
}

/* Mismo brillo diagonal "glamour" que el logo, recortado a la forma del
   botón con el propio PNG como máscara. */
.header-acceder__mask::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
      transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%);
  -webkit-mask-image: url('../logo/acceder-btn.png');
  mask-image: url('../logo/acceder-btn.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  transform: translateX(-130%);
  pointer-events: none;
}

.header-acceder:hover .header-acceder__mask::after {
  animation: shine-sweep 1.3s ease-in-out;
}

.search__input {
  width: 100%;
  min-width: 0;
  height: 50px;
  border: 1px solid #e4ded3;
  border-radius: 999px;
  padding: 0 50px 0 22px;   /* deja lugar para la lupa a la derecha */
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: #fff;
}

.search__input::placeholder {
  color: #9a9184;
}

.search__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(184, 164, 102, .25);
}

/* Oculta la "x" nativa de los <input type=search> para no chocar con la lupa */
.search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ---------- Autocompletado del buscador ---------- */

.search__sug {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .2);
  color: var(--ink);
}

.search__sug-head {
  margin: 0;
  padding: 8px 10px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted);
}

.search__sug-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--ink);
  font-size: 14.5px;
}

.search__sug-item:hover,
.search__sug-item.is-active {
  background: #f2ede4;
}

.search__sug-item svg {
  flex: none;
  color: var(--muted);
}

.search__sug-item__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 16.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease, color .15s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn--search {
  background: var(--accent);
  color: #fff;
}

.btn--search:hover {
  background: var(--accent-dark);
  color: #fff;
}

/* Botón secundario (beige). También lo define panel.css para el panel de gestión. */
.btn--plain {
  background: #ece5d9;
  color: var(--ink);
}

.btn--plain:hover {
  background: #e0d8ca;
}

/* "Comprar" de las tarjetas: el mismo destello al pasar el mouse. */
.card .btn--search,
.grid-more .btn--search {
  position: relative;
  overflow: hidden;
  isolation: isolate;   /* el destello (z-index -1) queda sobre el fondo y bajo el texto */
}

.card .btn--search::after,
.grid-more .btn--search::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(115deg,
      transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%);
  transform: translateX(-130%);
  pointer-events: none;
}

.card .btn--search:hover::after,
.grid-more .btn--search:hover::after {
  animation: shine-sweep 1.3s ease-in-out;
}

/* "Ver más productos": además del destello, hace "pop" (crece con rebote). */
.grid-more .btn--search {
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), background .15s ease, color .15s ease;
}

.grid-more .btn--search:hover {
  transform: scale(1.08);
}

.grid-more .btn--search:active {
  transform: scale(.97);
}

@media (prefers-reduced-motion: reduce) {
  .grid-more .btn--search:hover { transform: none; }
  .card .btn--search:hover::after,
  .grid-more .btn--search:hover::after,
  .brand__logo:hover .brand__logo-mask::after,
  .header-acceder:hover .header-acceder__mask::after { animation: none; }
}

.btn--ghost {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}

.btn--ghost:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.btn--danger {
  background: #d92d20;
  color: #fff;
}

.btn--danger:hover {
  background: #b42318;
}

/* Empuja un botón (p. ej. "Eliminar") al extremo derecho de la fila de acciones */
.detail-actions .push-right {
  margin-left: auto;
}

/* ---------- Barra de contacto (arriba de todo) ---------- */

.topbar {
  background: var(--accent);
  color: #fff;
  font-size: 13px;
}

.topbar__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 22px;
  padding: 7px 16px;
}

.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  font-family: "Poppins", var(--font);   /* geométrica, parecida a la del logo */
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .2px;
  opacity: .96;
}

.topbar__item:hover {
  opacity: 1;
}

/* ---------- Layout catálogo ---------- */

.catalog-full {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 32px 16px 40px;
}

.content {
  min-width: 0;
}

/* ---------- Tarjetas de categoría (carrusel de la portada) ---------- */

.cat-card {
  flex: 0 0 168px;
  display: flex;
  flex-direction: column;
  color: var(--ink-soft);
}

.cat-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--accent-dark);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.cat-card:hover .cat-card__media {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.cat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

/* Con foto: fondo blanco (las fotos de producto vienen sobre blanco) y sin relleno extra. */
.cat-card__media--foto { background: #fff; }
.cat-card__media--foto img { padding: 0; object-fit: cover; }

.cat-card__name {
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
}

/* ---------- Miga de pan y cabecera de categoría ---------- */

.breadcrumb {
  margin: 0 0 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--muted);
}

.breadcrumb a:hover {
  color: var(--accent-dark);
}

.breadcrumb span:first-of-type {
  margin: 0 6px;
}

/* ---------- Banners (portada y una por categoría) ---------- */
/* Cada banner trae su tono (t1..t5), todos dentro de la paleta de marca. */

.banner {
  --b-bg: linear-gradient(120deg, #b8a466 0%, #937f44 100%);
  --b-ink: #fff;
  --b-sub: rgba(255, 255, 255, .88);
  --b-chip: rgba(255, 255, 255, .22);
  --b-icon: rgba(255, 255, 255, .20);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 170px;
  margin-bottom: 30px;
  padding: 30px 44px;
  border-radius: var(--radius);
  background: var(--b-bg);
  color: var(--b-ink);
  overflow: hidden;
}

.banner--t2 {   /* carbón */
  --b-bg: linear-gradient(120deg, #302c26 0%, #171614 100%);
  --b-ink: #fff;
  --b-sub: rgba(255, 255, 255, .78);
  --b-chip: rgba(184, 164, 102, .30);
  --b-icon: rgba(184, 164, 102, .30);
}

.banner--t3 {   /* crema */
  --b-bg: linear-gradient(120deg, #f6f0df 0%, #e8dcb9 100%);
  --b-ink: #171614;
  --b-sub: #4a453c;
  --b-chip: rgba(147, 127, 68, .16);
  --b-icon: rgba(147, 127, 68, .26);
}

.banner--t4 {   /* dorado profundo */
  --b-bg: linear-gradient(120deg, #937f44 0%, #c9b97f 100%);
  --b-ink: #fff;
  --b-sub: rgba(255, 255, 255, .9);
  --b-chip: rgba(23, 22, 20, .18);
  --b-icon: rgba(255, 255, 255, .24);
}

.banner--t5 {   /* arena */
  --b-bg: linear-gradient(120deg, #ece3cd 0%, #d3c6a0 100%);
  --b-ink: #171614;
  --b-sub: #4a453c;
  --b-chip: rgba(23, 22, 20, .10);
  --b-icon: rgba(23, 22, 20, .16);
}

/* Destello suave de fondo, para que no sea un color plano. */
.banner::before {
  content: "";
  position: absolute;
  right: -90px;
  top: -120px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 68%);
  pointer-events: none;
}

.banner__txt {
  position: relative;
  max-width: 640px;
}

/* Rótulo en cursiva, como la firma del logo ("Noa"). */
.banner__eyebrow {
  display: block;
  margin-bottom: 2px;
  font-family: "Mrs Saint Delafield", "Allura", "Brush Script MT", cursive;
  font-size: 54px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--b-ink);
  opacity: .92;
}

.banner__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
}

.banner__sub {
  margin: 8px 0 0;
  font-size: 17px;
  color: var(--b-sub);
}

.banner__count {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--b-chip);
  font-size: 14px;
  font-weight: 500;
}

.banner__icon {
  position: relative;
  flex: none;
  display: flex;
  margin-right: 10px;
  color: var(--b-icon);
}

.banner__icon svg {
  display: block;
}

/* Con foto: la imagen de fondo y un degradado oscuro a la izquierda para que
   el texto se lea sobre cualquier foto. Se oculta el ícono y el destello. */
.banner--img {
  --b-ink: #fff;
  --b-sub: rgba(255, 255, 255, .92);
  --b-chip: rgba(255, 255, 255, .22);
  --b-over: linear-gradient(90deg, rgba(23, 22, 20, .72) 0%, rgba(23, 22, 20, .45) 42%, rgba(23, 22, 20, .05) 80%);
  /* La foto va en el style del banner (ahí la ruta es relativa a la página). */
  background-position: center 62%;
  background-size: cover;
  background-repeat: no-repeat;
}

.banner--img::before,
.banner--img .banner__icon { display: none; }

.banner--img .banner__txt { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }

/* Portada: más grande y con botón. */
.banner--portada {
  min-height: 230px;
  padding: 40px 52px;
}

.banner--portada .banner__title { font-size: 42px; }

.banner--portada .btn--banner { margin-top: 20px; }

.btn--banner {
  background: #fff;
  color: var(--ink);
  font-weight: 600;
}

.btn--banner:hover {
  background: var(--ink);
  color: #fff;
}

@media (max-width: 720px) {
  .banner,
  .banner--portada { min-height: 0; padding: 24px 22px; }
  .banner__title,
  .banner--portada .banner__title { font-size: 26px; }
  .banner__sub { font-size: 15px; }
  .banner__icon { position: absolute; right: -24px; bottom: -24px; margin: 0; opacity: .8; }
  .banner__icon svg { width: 130px; height: 130px; }
}

.section-label {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Contenido ---------- */

.content__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 24px;
}

.content__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 35.5px;
  font-weight: 700;
}

.content__subtitle {
  margin: 0;
  font-size: 16.5px;
  color: var(--muted);
}

/* ---------- Grilla de productos ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .grid { grid-template-columns: 1fr; }
}

/* "Ver más productos" (portada) y paginador (categorías) */
.grid-more,
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 32px 0 8px;
  flex-wrap: wrap;
}

.pager__info {
  font-size: 15px;
  color: var(--muted);
}

.btn.is-disabled {
  opacity: .45;
  pointer-events: none;
}

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 8px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: box-shadow .15s ease, transform .12s ease;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  transform: translateY(-2px);
}

.card__media {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;   /* "lo verde" = la foto del producto */
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* producto entero, sin recortar */
  padding: 14px;
}

.card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px 16px;
}

.card__id {
  font-size: 12px;
  color: #999;
}

.card__name {
  margin: 2px 0 6px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  color: #1a1a1a;
  height: 2.6em;             /* 2 líneas exactas: si no entra, se recorta con "…" */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card__name a {
  color: inherit;
  text-decoration: none;
}

.card__name a:hover {
  text-decoration: underline;
}

/* Precios: se van al pie -> todas las tarjetas los alinean aunque el
   nombre varíe de largo. */
.card__prices {
  margin-top: auto;
}

.card__price-old {
  font-size: 13px;
  color: #999;
  text-decoration: line-through;
}

.card__priceline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0;
  min-height: 1.3em;   /* reserva el alto aunque el producto no tenga oferta */
}

.card__price {
  font-family: var(--font);
  font-size: 24px;
  font-weight: 400;
  color: #1a1a1a;
  letter-spacing: -0.02em;
}

.card__price--off {
  color: var(--accent);
  font-weight: 600;
}

/* Cápsula con el % de descuento (ficha de producto, carrito) */
.pdp__off,
.cart-price-off {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  line-height: 1.45;
  white-space: nowrap;
}

/* % de descuento en la tarjeta: texto plano junto al precio */
.card__off {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

/* Cinta de descuento sobre la foto (esquina superior derecha) */
.card__off--corner {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
}

.card__deal {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--accent-dark);
  font-weight: 500;
}

.card__deal::before {
  content: "\23F1";
  margin-right: 4px;
}

/* Cantidad + "Comprar" dentro de la tarjeta */
.card__buy {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.card__buy-qty {
  width: 56px;
  flex: none;
  height: 40px;
  padding: 0 8px;
  text-align: center;
  font: inherit;
  font-size: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  -moz-appearance: textfield;
}

.card__buy-qty::-webkit-outer-spin-button,
.card__buy-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.card__buy .btn {
  flex: 1;
  height: 40px;
  padding: 0 10px;
}

/* Etiqueta sobre la imagen (tipo "MÁS VENDIDO" de ML) */
/* Sello tipo "estrella" (como las ofertas de un folleto), en vez de la
   etiqueta rectangular de siempre. */
.card__tag {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 4px;
  clip-path: polygon(50% 0%, 60.61% 10.4%, 75% 6.7%, 78.99% 21.01%, 93.3% 25%,
    89.6% 39.39%, 100% 50%, 89.6% 60.61%, 93.3% 75%, 78.99% 78.99%, 75% 93.3%,
    60.61% 89.6%, 50% 100%, 39.39% 89.6%, 25% 93.3%, 21.01% 78.99%, 6.7% 75%,
    10.4% 60.61%, 0% 50%, 10.4% 39.39%, 6.7% 25%, 21.01% 21.01%, 25% 6.7%, 39.39% 10.4%);
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  letter-spacing: .2px;
}

/* ---------- Banner del catálogo (fechas / eventos) ---------- */
.promo-banner {
  max-width: var(--max);
  margin: 20px auto 0;
  padding: 0 16px;
}

.promo-banner a { display: block; }

.promo-banner img {
  display: block;
  width: 100%;
  border-radius: 12px;
}

/* ---------- Carrusel de novedades ---------- */

.carousel-wrap {
  margin-bottom: 34px;
}

.carousel-wrap h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 24px;
}

.carousel-wrap__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.carousel-wrap__head--end {
  justify-content: flex-end;
}

.carousel-wrap__head h2 {
  margin: 0;
}

/* Puntitos de posición: el activo se "estira" y se une con los demás. */
.carousel-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.carousel-dots__dot {
  flex: none;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d8d2c6;
  cursor: pointer;
  transition: width .25s ease, background-color .25s ease;
}

.carousel-dots__dot:hover {
  background: #c7c0b2;
}

.carousel-dots__dot.is-active {
  width: 22px;
  background: var(--accent);
}

.carousel-viewport {
  position: relative;
  overflow: hidden;   /* nada (ni sombras) se asoma fuera del borde */
}

.carousel {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Difuminado de los costados sacado a pedido (de momento). */
}

/* 5 tarjetas por "página" (y por puntito), siempre justas, sin recortar
   la del borde. Se recalcula solo según el ancho disponible. */
.carousel .card {
  flex: 0 0 calc((100% - 4 * 18px) / 5);
}

@media (max-width: 1100px) {
  .carousel .card {
    flex: 0 0 calc((100% - 2 * 18px) / 3);
  }
}

@media (max-width: 720px) {
  .carousel .card {
    flex: 0 0 calc((100% - 18px) / 2);
  }
}

/* Recomendados de la ficha: las 4 tarjetas ocupan todo el ancho del
   panel de arriba (alineadas a sus bordes izq./der.), sin difuminado ni
   scroll horizontal. */
.pdp-recos .carousel {
  -webkit-mask-image: none;
  mask-image: none;
  overflow-x: visible;
}

.pdp-recos .carousel .card {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 720px) {
  .pdp-recos .carousel { flex-wrap: wrap; }
  .pdp-recos .carousel .card { flex: 1 1 calc(50% - 10px); }
}

.carousel::-webkit-scrollbar {
  display: none;
}

/* Pestaña pegada al borde (tipo "D"): del mismo color que el fondo de la
   página (se "funde" con él, sin quedar como una tarjeta blanca flotando),
   plana contra el borde, redondeada hacia adentro. */
.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 84px;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 0;      /* oculta el ‹ › de siempre: la flecha la dibuja ::before */
  cursor: pointer;
  transition: width .15s ease, box-shadow .15s ease, transform .1s ease;
}

.carousel-nav::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

/* "Popea" al pasar el mouse: se agranda y se despega con sombra, pero el
   color sigue siendo el mismo que el fondo (no se oscurece). La sombra va
   sólo hacia el lado de adentro (el de afuera queda plano, sin sombra). */
.carousel-nav:hover {
  width: 50px;
}

.carousel-nav--prev:hover {
  box-shadow: 16px 4px 14px rgba(0, 0, 0, .18);
}

.carousel-nav--next:hover {
  box-shadow: -16px 4px 14px rgba(0, 0, 0, .18);
}

.carousel-nav:active {
  transform: translateY(-50%) scale(.95);
}

.carousel-nav--prev {
  left: 0;
  border-radius: 0 999px 999px 0;
}

.carousel-nav--prev::before {
  border-right: 9px solid var(--ink);
  margin-right: 5px;
}

.carousel-nav--next {
  right: 0;
  border-radius: 999px 0 0 999px;
}

.carousel-nav--next::before {
  border-left: 9px solid var(--ink);
  margin-left: 5px;
}

@media (max-width: 860px) {
  .carousel-nav {
    width: 34px;
    height: 64px;
  }
}

/* ---------- Estados / formularios ---------- */

.empty {
  padding: 40px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
  color: var(--muted);
}

.login {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 380px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.login label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 16.5px;
  color: var(--muted);
}

.login input {
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 17.5px;
  color: var(--ink);
}

.login input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.login__note {
  margin: 0;
  font-size: 15.5px;
  color: var(--muted);
}

.login--wide {
  max-width: 640px;
}

.form-row {
  display: flex;
  gap: 16px;
}

.form-row > label {
  flex: 1;
}

.login select {
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 17.5px;
  color: var(--ink);
  background: var(--surface);
}

.login select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---------- Sesión / avisos ---------- */

.user-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 4px 0 0;
  font-size: 16.5px;
  color: var(--muted);
  white-space: nowrap;
}

.auth {
  max-width: 640px;
}

.auth__alt {
  margin: 18px 0 0;
  font-size: 16.5px;
}

.auth__alt a {
  color: var(--accent-dark);
  text-decoration: underline;
}

.alert {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 16.5px;
}

.alert ul {
  margin: 0;
  padding-left: 18px;
}

.alert--error {
  background: #fbeae6;
  border: 1px solid #e6b7ab;
  color: #8a3b28;
}

/* ---------- Panel interno ---------- */

.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.panel-card {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.panel-card h3 {
  margin: 0 0 6px;
  font-family: var(--font);
  font-size: 21px;
}

.panel-card p {
  margin: 0 0 12px;
  font-size: 16.5px;
  color: var(--muted);
}

.panel-card__soon {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #ece5d9;
  font-size: 14px;
  letter-spacing: .5px;
  color: var(--muted);
}

/* ---------- Layout centrado sin barra de categorías ---------- */

.plain-wrap {
  width: 100%;   /* sin esto, un carrusel ancho estira el contenedor más que la pantalla */
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 24px 64px;
}

/* Ficha de producto: mismo ancho que el catálogo. */
.plain-wrap--wide {
  max-width: var(--max);
}

/* ---------- Pantalla de acceso: logo grande a la izquierda, formulario a la derecha ---------- */

.auth-screen {
  height: 100vh;    /* todo entra en una pantalla, sin scroll */
  height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow-y: auto;   /* sólo aparece scroll si la ventana es demasiado baja para el formulario */
}

.auth-screen__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  /* Velo crema sobre la foto de la portada (va en el style del elemento), para que el logo dorado se lea. */
  --b-veil: linear-gradient(135deg, rgba(250, 248, 243, .80) 0%, rgba(239, 230, 208, .68) 100%);
  background: linear-gradient(135deg, #faf8f3 0%, #efe6d0 100%);   /* sin foto */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-right: 1px solid var(--line);
}

.auth-screen__brand a {
  display: block;
  width: min(78%, 460px);   /* el ancho va en el enlace, para que el logo quede centrado */
}

.auth-screen__brand img {
  width: 100%;
  height: auto;
}

.auth-screen__form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 0;
  padding: 48px 32px;
}

.auth-screen__form > * {
  width: 100%;
  max-width: 420px;
}

.auth-screen .content__head {
  justify-content: flex-start;
  margin-bottom: 20px;
}

.auth-screen .auth {
  max-width: 420px;
  width: 100%;
}

.auth-screen .login {
  max-width: none;
  width: 100%;
}

.auth-screen .login__note {
  margin-top: 16px;
  text-align: center;
}

@media (max-width: 820px) {
  .auth-screen { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-screen__brand { padding: 28px 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .auth-screen__brand a { width: 170px; }
  .auth-screen__form { padding: 32px 20px 48px; }
}

.page-back {
  margin: 0 0 20px;
}

.page-back a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: -10px;              /* alinea el texto con el borde de la página */
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  transition: background .12s ease, color .12s ease;
}

.page-back a:hover {
  background: #ece5d9;
  color: var(--ink);
}

.page-back svg { flex: none; }

/* ---------- Pantalla "pedido enviado" ---------- */

.checkout-done {
  max-width: 520px;
  margin: 40px auto;
  padding: 40px 32px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.checkout-done__check {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #e3f0e4;
  color: #2f6d3b;
  font-size: 34px;
  line-height: 64px;
  font-weight: 700;
}

.checkout-done h1 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
}

.checkout-done p {
  margin: 0 0 6px;
  color: var(--muted);
}

.checkout-done__timer {
  margin: 14px 0 20px !important;
  font-size: 14px;
}

/* ---------- Checkout: formulario a la izquierda, resumen a la derecha ---------- */

.ck-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px;
  align-items: start;
  max-width: 1040px;
  margin: 8px auto 40px;
}

.ck-form { display: flex; flex-direction: column; gap: 14px; }

.ck-h {
  margin: 18px 0 2px;
  font-size: 19px;
  font-weight: 500;
  color: var(--ink-soft, #555);
}
.ck-h:first-of-type { margin-top: 0; }

/* Campo con la etiqueta flotante (sube al escribir). */
.ck-field { position: relative; }
.ck-field input,
.ck-field select {
  width: 100%;
  height: 52px;
  padding: 20px 14px 6px;
  border: 1px solid #d9d4cb;
  border-radius: 4px;
  background: #fff;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
}
.ck-field input:focus,
.ck-field select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.ck-field > input + label,
.ck-field > select + label {
  position: absolute;
  left: 15px;
  top: 16px;
  font-size: 16px;
  color: #9a948a;
  pointer-events: none;
  transition: top .12s ease, font-size .12s ease;
}
.ck-field input:focus + label,
.ck-field input:not(:placeholder-shown) + label,
.ck-field select:focus + label,
.ck-field select:not([value=""]) + label,
.ck-field--select > label {
  top: 7px;
  font-size: 11.5px;
}
.ck-field input:disabled { background: #f6f3ee; }

.ck-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ck-chk {
  position: absolute;
  right: 12px;
  top: 17px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #9a948a;
}
.ck-chk input { width: auto; height: auto; padding: 0; }
.ck-field--num > .ck-chk { top: 17px; left: auto; font-size: 13px; }

/* Código postal: tarjeta con "Cambiar" */
.ck-cp__card {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #d9d4cb;
  border-radius: 4px;
  color: #777;
}
.ck-cp__txt { display: flex; flex-direction: column; flex: 1; font-size: 15px; }
.ck-cp__txt strong { color: #666; }
.ck-cp__btn {
  border: 0;
  border-radius: 999px;
  padding: 8px 18px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.ck-cp__btn:hover { background: var(--accent-dark); }
.ck-cp[data-listo] .ck-cp__card { display: flex; }
.ck-cp[data-listo] .ck-cp__edit { display: none; }
.ck-cp__edit { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Cabecera mínima (checkout y pago): logo a la izquierda, "Volver" a la derecha */
.site-header__inner--min {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* volver | logo centrado | (vacío) */
  align-items: center;
}
.site-header__inner--min .brand { grid-column: 2; grid-row: 1; justify-self: center; }
.site-header__inner--min .header-back { grid-column: 1; grid-row: 1; justify-self: start; }

.header-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 18px 0 12px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent-dark);
  font-size: 15px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.header-back:hover { background: var(--accent); color: #fff; }

/* ---------- Variantes (colores) ---------- */

/* Tarjeta: selector que sube desde abajo al tocar "Comprar" */
.card--vars { position: relative; }
.card__varhint { margin: -4px 0 6px; font-size: 12.5px; color: #8a847a; }
.card__vars {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 12px 12px 14px;
  background: #fff;
  border-top: 1px solid #e6e2db;
  box-shadow: 0 -8px 20px rgba(0, 0, 0, .08);
  transform: translateY(105%);
  transition: transform .22s cubic-bezier(.22, .9, .28, 1);
}
.card.is-picking .card__vars { transform: none; }
.card__vars-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 14px; color: #555; }
.card__vars-close { border: 0; background: none; font-size: 22px; line-height: 1; color: #888; cursor: pointer; }
.card__vars-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 120px; overflow-y: auto; }
.card__var {
  padding: 7px 14px;
  border: 1px solid #d9d4cb;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.card__var:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.card__var:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.card__var small { text-decoration: none; }

/* Ficha del producto: opciones como botones */
.pdp__vars { margin: 0 0 14px; padding: 0; border: 0; }
.pdp__vars legend { padding: 0; margin-bottom: 8px; font-size: 14px; color: #666; }
.pdp__vars-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp__var { position: relative; }
.pdp__var input { position: absolute; opacity: 0; pointer-events: none; }
.pdp__var span {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid #d9d4cb;
  border-radius: 999px;
  font-size: 15px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.pdp__var:hover span { border-color: var(--accent); }
.pdp__var input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.pdp__var input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.pdp__var.is-sin span { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.pdp__vars-err { margin: 8px 0 0; font-size: 13.5px; color: #b0453a; }
.pdp__vars-err[hidden] { display: none; }

/* Viñetas de color (en lugar del texto) */
.card__var--color {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .22);
  border-radius: 50%;
  background: var(--c);
}
.card__var--color:hover:not(:disabled) { background: var(--c); border-color: rgba(0, 0, 0, .5); transform: scale(1.12); }
.card__vars-list:has(.card__var--color) { gap: 10px; max-height: none; overflow: visible; padding-top: 4px; }
/* Nombre del color al pasar el mouse o enfocar */
.card__var--color::after {
  content: attr(data-nombre);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: 4px;
  background: #2b2a27;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.card__var--color:hover::after,
.card__var--color:focus-visible::after { opacity: 1; }

.pdp__var--color span {
  display: block;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .22);
  border-radius: 50%;
  background: var(--c);
  transition: box-shadow .12s ease, transform .12s ease;
}
.pdp__var--color:hover span { transform: scale(1.08); border-color: rgba(0, 0, 0, .5); }
.pdp__var--color input:checked + span {
  background: var(--c);
  border-color: rgba(0, 0, 0, .3);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent);
}
.pdp__vars-list:has(.pdp__var--color) { gap: 12px; }
.pdp__vars-sel { font-weight: 600; color: var(--ink); }

/* Carrito lateral y resumen: la variante elegida */
.cart-drawer__dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 6px;
  vertical-align: -1px;
  border: 1px solid rgba(0, 0, 0, .25);
  border-radius: 50%;
  background: var(--c);
}
.cart-drawer__var { display: block; margin-top: 2px; font-size: 13.5px; color: #8a847a; }
.cart-drawer__aviso { margin: 0 22px 8px; padding: 9px 12px; border-radius: 6px; background: #fbeceb; color: #9c3a2f; font-size: 14px; }
.ck-summary__var { font-style: normal; color: #8a847a; }

/* Domicilio / sucursal: cada tipo muestra sus campos */
.ck-form[data-envio="sucursal"] .ck-dom,
.ck-form[data-envio="sucursal"] .ck-h-dom,
.ck-form[data-envio="domicilio"] .ck-suc,
.ck-form[data-envio="domicilio"] .ck-h-suc { display: none; }

/* Opción de entrega */
.ck-ships { display: flex; flex-direction: column; gap: 10px; }
.ck-ship input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.ck-ship { cursor: pointer; }
.ck-ship:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ck-ship:not(.is-selected) .ck-ship__radio { background: none; border-color: #c9c3b8; }
.ck-ship {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #d9d4cb;
  border-radius: 4px;
  font-size: 15px;
}
.ck-ship.is-selected { border-color: var(--accent); background: #fdfbf7; }
.ck-ship__radio {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 45%, transparent 50%);
}
.ck-ship__txt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ck-ship__txt span { color: #8a847a; font-size: 14px; }
.ck-ship__price { color: #777; white-space: nowrap; }

.ck-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}
.ck-terms { display: flex; align-items: flex-start; gap: 10px; margin-top: 6px; font-size: 14px; line-height: 1.45; color: #6d675c; cursor: pointer; }
.ck-terms input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.ck-terms a { color: var(--accent-dark); text-decoration: underline; }
.ck-back { color: #777; font-size: 15px; }
.ck-back:hover { color: var(--ink); }
.ck-actions .btn { min-width: 240px; }

/* Resumen */
.ck-summary {
  position: sticky;
  top: 20px;
  font-size: 15px;
  color: #666;
}
.ck-summary__list { margin: 0; padding: 0 0 14px; list-style: none; border-bottom: 1px solid #ece8e1; }
.ck-summary__list li { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.ck-summary__list img { width: 64px; height: 64px; object-fit: cover; border-radius: 3px; background: #f1eee9; }
.ck-summary__name { flex: 1; font-size: 14px; line-height: 1.3; }
.ck-summary__price { white-space: nowrap; }
.ck-summary__rows { margin: 14px 0 0; }
.ck-summary__rows > div { display: flex; justify-content: space-between; padding: 4px 0; }
.ck-summary__rows dt, .ck-summary__rows dd { margin: 0; }
.ck-summary__rows .is-saved { color: #3a7d44; }
.ck-summary__total { margin-top: 8px; padding-top: 10px !important; font-size: 20px; color: #444; border-top: 1px solid #ece8e1; }

@media (max-width: 860px) {
  .ck-layout { grid-template-columns: 1fr; gap: 28px; }
  .ck-summary { position: static; order: -1; }
}
@media (max-width: 520px) {
  .ck-pair, .ck-cp__edit { grid-template-columns: 1fr; }
  .ck-actions { flex-direction: column-reverse; align-items: stretch; }
  .ck-actions .btn { min-width: 0; }
  .ck-back { text-align: center; }
}

/* ---------- Pasos de compra (resumen / datos) ---------- */

.checkout-card {
  max-width: 620px;
  margin: 0 auto;
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ck-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

/* Botones de abajo (carrito y checkout): en celular pasan a otra línea en vez de salirse de la pantalla. */
.plain-wrap .detail-actions { flex-wrap: wrap; }

@media (max-width: 480px) {
  .plain-wrap .detail-actions .btn { flex: 1 1 100%; }
}

/* "Tus datos": todo en una sola columna, un campo debajo del otro. */
.checkout-form--vertical .ck-row { grid-template-columns: 1fr; gap: 18px; }
.checkout-card:has(.checkout-form--vertical) { max-width: 520px; }

.ck-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--muted);
}

.ck-row .cap {
  min-height: 20px;
  line-height: 20px;
}

.ck-row input,
.ck-row select {
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
}

.ck-row input:focus,
.ck-row select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.ck-rev-hint {
  grid-column: 1 / -1;
  margin: -8px 0 0;
  font-size: 13px;
  min-height: 16px;
}
.ck-rev-hint.is-ok  { color: #1f7a3d; }
.ck-rev-hint.is-bad { color: #b23c2a; }

.ck-datos {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px 16px;
  margin: 0 0 20px;
}

.ck-datos dt { color: var(--muted); font-size: 14px; }
.ck-datos dd { margin: 0; font-size: 15.5px; }

@media (max-width: 560px) {
  .ck-row { grid-template-columns: 1fr; }
  .ck-datos { grid-template-columns: 1fr; gap: 2px 0; }
  .ck-datos dd { margin-bottom: 8px; }
}

/* ---------- Indicador de pasos: Resumen > Tus datos > Pago ---------- */

.pasos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.pasos__item {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
}

.pasos__item + .pasos__item::before {
  content: "";
  width: 46px;
  height: 2px;
  margin: 0 12px;
  background: var(--line);
}

.pasos__item.is-done + .pasos__item::before,
.pasos__item.is-active::before { background: var(--accent); }

.pasos__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: #fff;
  font-size: 13.5px;
  font-weight: 700;
}

.pasos__item.is-active { color: var(--ink); font-weight: 600; }
.pasos__item.is-active .pasos__n { border-color: var(--accent); background: var(--accent); color: #fff; }
.pasos__item.is-done .pasos__n   { border-color: var(--accent); color: var(--accent-dark); }
.pasos__item.is-done { color: var(--ink-soft); }

@media (max-width: 560px) {
  .pasos__txt { display: none; }
  .pasos__item.is-active .pasos__txt { display: inline; }
  .pasos__item + .pasos__item::before { width: 26px; margin: 0 8px; }
}

.checkout-done__sub { max-width: 460px; margin-left: auto; margin-right: auto; }

/* ---------- Pago con tarjeta ---------- */

.pago {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: 28px;
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
}

.pago-demo {
  max-width: 980px;
  margin: 0 auto 20px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #fbf3dc;
  border: 1px solid #e4cf8f;
  color: #5c4a12;
  font-size: 14.5px;
  line-height: 1.5;
}

.pago-demo code { background: rgba(255, 255, 255, .6); padding: 1px 6px; border-radius: 6px; }

/* Panel de pago: un método (tarjeta) abierto, como un acordeón. */
.pago-metodo {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.pago-metodo__cab {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: var(--surface);
  border-bottom: 2px solid var(--line);
}

.pago-radio {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: radial-gradient(circle, var(--accent) 0 5px, #fff 6px);
}

.pago-metodo__tit {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  font-size: 17px;
}

.pago-pill {
  padding: 2px 10px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}

.pago-metodo__ico { flex: none; color: var(--ink-soft); }

.pago-metodo__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
}

.pago-tipo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pago-tipo__op {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-weight: 500;
  cursor: pointer;
}

.pago-tipo__op input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pago-tipo__op:has(input:checked) { border-color: var(--accent); background: #f6f0df; box-shadow: 0 0 0 2px rgba(184, 164, 102, .35); }

/* Campos con la etiqueta adentro del borde: sube y se achica al escribir. */
.fl { position: relative; min-width: 0; }

.fl input,
.fl select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: 56px;
  padding: 22px 14px 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 16.5px;
  color: var(--ink);
  background: #fff;
}

.fl select { padding-right: 36px; }

.fl label {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  max-width: calc(100% - 44px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 16px;
  pointer-events: none;
  transition: top .12s ease, transform .12s ease, font-size .12s ease;
}

.fl input:focus + label,
.fl input:not(:placeholder-shown) + label,
.fl--select label {
  top: 9px;
  transform: none;
  font-size: 12px;
}

.fl input:focus,
.fl select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Pistas de formato (ej. MM/AA): sólo se ven al hacer clic en el campo. */
.fl input::placeholder { color: transparent; }
.fl input:focus::placeholder { color: #a39b8b; }

.pago-fila { display: grid; gap: 14px; }
.pago-fila > * { min-width: 0; }
.pago-fila--3   { grid-template-columns: 1.5fr 1fr .8fr; }
.pago-fila--doc { grid-template-columns: .8fr 1.2fr; }

.pago-ayuda {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: help;
}

.fl:has(.pago-ayuda) input { padding-right: 42px; }

.pago-marca {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .4px;
}

.pago-marca:empty { display: none; }
.pago-marca.is-visa { background: #1A1F71; }
/* Mastercard: los dos círculos (rojo y naranja) superpuestos, sobre fondo blanco. */
.pago-marca.is-mastercard {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 0;
}
.pago-marca.is-mastercard::before,
.pago-marca.is-mastercard::after {
  content: "";
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #EB001B;
}
.pago-marca.is-mastercard::after { margin-left: -7px; background: #F79E1B; mix-blend-mode: multiply; }

.fl:has(#cMarca) input { padding-right: 112px; letter-spacing: .5px; }

/* Tarjetas aceptadas */
.pago-nota-dni {
  margin: -4px 0 0;
  padding: 9px 12px;
  border-radius: 8px;
  background: #f6f0df;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.4;
}

.pago-aceptadas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

.pago-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

/* Visa: azul de la marca con su detalle dorado sobre la V. */
.pago-logo--visa {
  position: relative;
  color: #1A1F71;
  font-weight: 800;
  font-style: italic;
  font-size: 16px;
  letter-spacing: .5px;
}
.pago-logo--visa::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  width: 9px;
  height: 4px;
  background: #F7B600;
  transform: skewX(-35deg);
}
/* Mastercard: círculos rojo y naranja superpuestos. */
.pago-logo--mc i { width: 18px; height: 18px; border-radius: 50%; background: #EB001B; }
.pago-logo--mc i + i { margin-left: -7px; background: #F79E1B; mix-blend-mode: multiply; }

.pago-error {
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fcece9;
  border: 1px solid #e3a9a0;
  color: #8f2d1d;
  font-size: 14.5px;
}

.pago-error[hidden] { display: none; }

.pago-btn { height: 52px; font-size: 17.5px; font-weight: 600; width: 100%; }
.pago-btn:disabled { opacity: .7; cursor: progress; }

.pago-seguro {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.pago-seguro svg { flex: none; color: #1f7a3d; }

.pago__resumen {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  position: sticky;
  top: 112px;
}

.pago__resumen h2 { margin: 0 0 14px; font-size: 20px; font-family: var(--font-display); }
.pago__resumen h2 small { color: var(--muted); font-family: var(--font); font-weight: 400; font-size: 15px; }

.pago-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.pago-items li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: baseline;
  font-size: 15px;
}

.pago-items__n { color: var(--muted); }
.pago-items__s { font-weight: 600; }

.pago-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 16px 0 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 17px;
}

.pago-total strong { font-size: 24px; }

.pago-datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0 0 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
}

.pago-datos dt { color: var(--muted); }
.pago-datos dd { margin: 0; overflow-wrap: anywhere; }

.pago-volver { font-size: 14.5px; color: var(--accent-dark); }
.pago-volver:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .pago { grid-template-columns: 1fr; }
  .pago__resumen { position: static; order: -1; }
}

@media (max-width: 560px) {
  /* En celular: el titular ocupa toda la fila; vencimiento y CVV van juntos debajo. */
  .pago-fila--3 { grid-template-columns: 1fr 1fr; }
  .pago-fila--3 > :first-child { grid-column: 1 / -1; }
  .pago-metodo__cab { padding: 16px; }
  .pago-metodo__cuerpo { padding: 16px; }
}

/* ---------- Página de producto (estilo Mercado Libre) ---------- */

.breadcrumb--pdp a:hover { color: var(--accent-dark); }

/* El nombre del producto es largo: se corta con "…" y no rompe la línea. */
.breadcrumb--pdp {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.breadcrumb--pdp > * { flex: none; }

.breadcrumb--pdp .breadcrumb__actual {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.pdp-back {
  margin: 0 0 14px;
  font-size: 15px;
}

.pdp-back a { color: var(--muted); }
.pdp-back a:hover { color: var(--ink); }

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 320px;
  grid-template-areas:
    "gal info buy";
  gap: 24px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.pdp__gallery {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-width: 0;
}

.pdp__thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: none;
}

.pdp__thumb {
  width: 64px;
  height: 64px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition: border-color .12s ease;
}

.pdp__thumb:hover { border-color: #c9beac; }
.pdp__thumb.is-active { border-color: var(--accent); border-width: 2px; padding: 2px; }
.pdp__thumb img { width: 100%; height: 100%; object-fit: contain; }

.pdp__main {
  position: relative;
  flex: 1;
  min-width: 0;
  aspect-ratio: 1 / 1;
  max-height: 460px;
  max-width: 460px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  cursor: zoom-in;
}

.pdp__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18px;
  transition: transform .15s ease;
  transform-origin: center center;
}

.pdp__main.is-zoom img { transform: scale(1.3); padding: 0; }

.pdp__zoomhint {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(20, 18, 15, .62);
  color: #fff;
  font-size: 12px;
  pointer-events: none;
  transition: opacity .15s ease;
}

.pdp__main.is-zoom .pdp__zoomhint { opacity: 0; }

/* Datos del producto y caja de compra son columnas propias de la grilla
   (galería | datos | compra), como en Mercado Libre. */
.pdp__side {
  display: contents;
}

/* Un solo foto: misma grilla, imagen más alta. */
.pdp--1foto .pdp__main { max-height: 460px; }

.pdp__info { min-width: 0; }

.pdp__cond {
  font-size: 13px;
  color: var(--muted);
}

.pdp__title {
  margin: 6px 0 14px;
  font-family: var(--font);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
}

.pdp__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.pdp__price-old {
  font-size: 16px;
  color: var(--muted);
  text-decoration: line-through;
}

.pdp__price-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.pdp__price-now {
  font-family: var(--font);
  font-size: 34px;
  font-weight: 600;
}

.pdp__off { font-size: 14px; }

.pdp__envio {
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f7a3d;
}

.pdp__h2 {
  margin: 26px 0 10px;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 600;
}

.pdp__bullets {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pdp__bullets li {
  font-size: 15.5px;
  line-height: 1.45;
  color: #33302b;
  padding-left: 4px;
}

.pdp__bullets li::marker { color: var(--muted); }

.pdp__desc {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: #33302b;
}

/* Caja de compra: tarjeta blanca al costado, fija mientras se baja. */
/* Caja de compra: tarjeta blanca al costado que queda fija al bajar. */
.pdp__gallery { grid-area: gal; }
.pdp__info    { grid-area: info; }

.pdp__buy {
  grid-area: buy;
  align-self: start;
  position: sticky;
  top: 112px;          /* debajo de la cabecera fija */
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(28, 26, 23, .07);
}

/* Beneficios: envío y stock, cada uno con su ícono. */
.pdp__perks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0 0 16px;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

.pdp__perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15.5px;
  color: var(--ink);
}

.pdp__perks svg { flex: none; color: #1f7a3d; }

/* Cantidad en una fila y botón Comprar de punta a punta. */
.pdp__buyform {
  flex-direction: column;
  gap: 14px;
  margin-top: 0;
}

.pdp__qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 15.5px;
  color: var(--muted);
}

.pdp__buyform .card__buy-qty {
  width: 84px;
  height: 44px;
  font-size: 17px;
  color: var(--ink);
}

.pdp__buyform .btn {
  flex: none;
  width: 100%;
  height: 50px;
  font-size: 17px;
  font-weight: 600;
}

.pdp__buy .pdp-share {
  width: 100%;
  justify-content: center;
  margin-top: 0;
  border-color: transparent;
  background: #f5f1e8;
}

.pdp__buy .pdp-share:hover { background: #ece5d3; }

.pdp__buy .pdp-rev-hint { margin: 0; }

.pdp-added {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #e3f0e4;
  border: 1px solid #a9d3ac;
  color: #2f6d3b;
  font-size: 14px;
  font-weight: 600;
}

.pdp-reco-block,
.pdp-recos {
  margin-top: 36px;
}

.btn--block { width: 100%; }

/* Pantallas medianas: la caja de compra baja debajo de los datos. */
@media (max-width: 1100px) {
  .pdp {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-areas:
      "gal info"
      "gal buy";
  }
  .pdp__buy { position: static; }
}

@media (max-width: 900px) {
  .pdp,
  .pdp--1foto {
    grid-template-columns: 1fr;
    grid-template-areas:
      "gal"
      "info"
      "buy";
    gap: 20px;
    padding: 20px;
  }
  .pdp__gallery { position: static; }
  .pdp__main { cursor: default; max-height: none; max-width: none; }
  .pdp__main img { transform: none !important; padding: 18px !important; }
  .pdp__zoomhint { display: none; }
}

@media (max-width: 520px) {
  .pdp__gallery { flex-direction: column-reverse; }
  .pdp__thumbs { flex-direction: row; flex-wrap: wrap; }
}

/* ---------- Carrito en la cabecera: cápsula "Ver pedido" ---------- */
/* Sólo aparece si hay productos en el carrito. */

.cart-cta {
  display: inline-flex;
  align-items: center;
  position: relative;
  justify-content: center;
  gap: 7px;
  /* Mismas proporciones que el botón Acceder (609x222 a 44px de alto). */
  height: 44px;
  min-width: 121px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  transition: background .12s ease;
}

/* Texto y contador quedan por encima del brillo (que pasa por detrás). */
.cart-cta__t,
.cart-cta__n {
  position: relative;
  z-index: 1;
}

/* Brillo diagonal que cruza el botón cada pocos segundos. */
.cart-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
      transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: cart-cta-shine 3.6s ease-in-out 1s infinite;
  pointer-events: none;
}

@keyframes cart-cta-shine {
  0%        { transform: translateX(-130%); }
  35%, 100% { transform: translateX(130%); }
}

.cart-cta:hover {
  background: var(--accent-dark);
  color: #fff;
}

.cart-cta__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .25);
  font-size: 12.5px;
  font-weight: 700;
}

/* Aparición: crece de izquierda a derecha y empuja al resto de la barra.
   Sólo animamos max-width y opacity para que sea bien suave. */
@keyframes cart-cta-in {
  from { max-width: 0; opacity: 0; }
  to   { max-width: 320px; opacity: 1; }
}

.cart-cta.is-in {
  animation: cart-cta-in .42s cubic-bezier(.22, .9, .28, 1) both;
}

/* Salida: la misma animación al revés (se colapsa de derecha a izquierda). */
.cart-cta.is-out {
  animation: cart-cta-in .42s cubic-bezier(.22, .9, .28, 1) reverse forwards;
}

@keyframes cta-bump {
  0%   { transform: none; }
  40%  { transform: scale(1.25); }
  100% { transform: none; }
}

.cart-cta__n.is-bump {
  animation: cta-bump .32s ease;
}

@media (prefers-reduced-motion: reduce) {
  .cart-cta.is-in, .cart-cta.is-out, .cart-cta__n.is-bump, .cart-cta::after { animation: none; }
}

/* ---------- Mini-carrito: cuelga de la cápsula "Ver pedido" ---------- */
/* La cápsula y el panel miden lo mismo: el panel cuelga justo debajo,
   con una flechita que apunta a "Ver pedido". */
.mini-cart {
  position: relative;
  flex: none;   /* que la barra no la encoja: si no, cápsula y panel dejan de coincidir */
}

/* La cápsula ocupa el ancho de su contenedor: al crecer o plegarse se achica con
   los dos extremos redondeados, sin que un borde recto la corte. */
.mini-cart > .cart-cta {
  width: 100%;
  min-width: 0;
  max-width: none;
}

/* Mismo espacio (20px) entre buscador, "Ver pedido" y Acceder. El gap de la
   cabecera es 40px y el de las acciones 10px: el buscador se estira 20px hacia
   la derecha y la cápsula suma los 10px que faltan. */
@media (min-width: 701px) {
  .site-header__inner:has(.mini-cart) .search { margin-right: -20px; }
  .mini-cart { margin-right: 10px; }
}

.mini-cart__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 70;
  transform-origin: top center;
  width: 280px;
  max-width: calc(100vw - 24px);
  padding: 16px 18px 18px;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .22);
  opacity: 0;
  visibility: hidden;
  transform: scale(.4, .3);
  transition: opacity .2s ease, transform .22s cubic-bezier(.22, .9, .28, 1), visibility 0s linear .22s;
}

/* Flechita hacia arriba, centrada bajo la cápsula. */
.mini-cart__panel::before {
  content: "";
  position: absolute;
  top: -7px;
  left: calc(50% - 7px);
  width: 14px;
  height: 14px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}

@media (max-width: 700px) {
  .mini-cart > .cart-cta { width: auto; }
  .mini-cart { position: static; }
  .site-header__actions { position: relative; }
  .mini-cart__panel { left: auto; right: 0; transform-origin: top right; }
  .mini-cart__panel::before { left: auto; right: 40px; }
}

.mini-cart.is-open .mini-cart__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.mini-cart__close {
  position: absolute;
  top: 6px;
  right: 10px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: #777;
  cursor: pointer;
}

.mini-cart__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-right: 22px;
}

.mini-cart__img {
  width: 48px;
  height: 48px;
  flex: none;
  object-fit: cover;
  border-radius: 3px;
  background: #f1eee9;
}

.mini-cart__txt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font-size: 14px;
}

.mini-cart__name {
  font-weight: 500;
  color: #555;
}

.mini-cart__qty {
  font-size: 13px;
  color: #666;
}

.mini-cart__ok {
  margin-top: 4px;
  font-weight: 700;
  color: #444;
}

.mini-cart__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid #e6e2db;
  font-size: 15px;
  font-weight: 600;
  color: #555;
}

.mini-cart__total strong {
  color: #333;
  font-size: 16px;
}

/* ---------- Carrito lateral ---------- */
/* Al abrir el panel se bloquea el scroll de la página; scrollbar-gutter deja
   reservado el lugar de la barra para que el fondo no se corra a la derecha. */
.cart-lock {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(23, 22, 20, .45);
  opacity: 0;
  transition: opacity .25s ease;
}
.cart-overlay.is-open { opacity: 1; }
.cart-overlay[hidden] { display: none; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  width: 500px;
  max-width: 100vw;
  background: #fff;
  color: var(--ink);
  box-shadow: -10px 0 36px rgba(0, 0, 0, .18);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .3s cubic-bezier(.22, .9, .28, 1), visibility 0s linear .3s;
}
.cart-drawer.is-open {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #ece8e1;
}
.cart-drawer__head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #555;
}
.cart-drawer__close {
  border: 0;
  background: none;
  font-size: 30px;
  line-height: 1;
  color: #777;
  cursor: pointer;
}

.cart-drawer__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: opacity .15s ease;
}
.cart-drawer__body.is-busy { opacity: .55; pointer-events: none; }

.cart-drawer__list {
  flex: 1;
  margin: 0;
  padding: 0 22px;
  list-style: none;
  overflow-y: auto;
}

.cart-drawer__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid #ece8e1;
}
.cart-drawer__img {
  width: 74px;
  height: 74px;
  object-fit: cover;
  border-radius: 3px;
  background: #f1eee9;
}
.cart-drawer__info { flex: 1; min-width: 0; }
.cart-drawer__name {
  display: block;
  font-size: 15px;
  line-height: 1.3;
  color: #555;
}
.cart-drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.cart-drawer__qty {
  display: inline-flex;
  border: 1px solid #d9d4cb;
  border-radius: 3px;
}
.cart-drawer__qty button {
  width: 30px;
  border: 0;
  background: none;
  font-size: 18px;
  color: #666;
  cursor: pointer;
}
.cart-drawer__qty button:hover { background: #f6f3ee; }
.cart-drawer__qty input {
  width: 42px;
  border: 0;
  text-align: center;
  font-size: 14px;
  -moz-appearance: textfield;
}
.cart-drawer__qty input::-webkit-outer-spin-button,
.cart-drawer__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-drawer__price { text-align: right; display: flex; flex-direction: column; }
.cart-drawer__price strong { font-size: 15px; color: #444; }
.cart-drawer__del {
  border: 0;
  background: none;
  color: #999;
  cursor: pointer;
  padding: 2px;
}
.cart-drawer__del:hover { color: #b0453a; }

.cart-drawer__foot {
  padding: 18px 22px 22px;
  border-top: 1px solid #ece8e1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cart-drawer__saved,
.cart-drawer__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.cart-drawer__saved { font-size: 14px; color: #3a7d44; }
.cart-drawer__total { font-size: 16px; color: #555; margin-bottom: 6px; }
.cart-drawer__total strong { font-size: 19px; color: #333; }

/* Con el carrito abierto, los botones de la derecha (Ver pedido, Acceder…) se
   pliegan juntos y el buscador ocupa su lugar; al cerrar vuelven a crecer.
   main.js fija el ancho real de la barra antes de plegarla (clase is-folded):
   así la animación arranca de inmediato y no tiene pausas. */
@media (min-width: 701px) {
  .mini-cart {
    width: 280px;
    transition: width .4s cubic-bezier(.22, .9, .28, 1), margin-right .4s cubic-bezier(.22, .9, .28, 1);
  }
  /* La cápsula se achica a la par de la barra (sin quedar cortada por el borde). */
  .site-header__actions.is-folded .mini-cart {
    width: 0;
    margin-right: 0;
  }
  .site-header__actions {
    transition: width .4s cubic-bezier(.22, .9, .28, 1), opacity .3s ease;
  }
  .site-header__actions.is-folded {
    width: 0 !important;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }
}
@media (max-width: 700px) {
  .cart-lock .mini-cart { visibility: hidden; }
}

/* Con el carrito abierto el contenido de la cabecera (buscador + Acceder) termina
   20px antes del panel, la misma separación que hay entre los botones, en vez de
   quedar tapado por él. 500px = ancho del panel; 15px = barra de scroll reservada. */
@media (min-width: 701px) {
  .site-header__inner {
    transition: padding-right .4s cubic-bezier(.22, .9, .28, 1);
  }
  .site-header__inner .search {
    transition: margin-right .4s cubic-bezier(.22, .9, .28, 1);
  }
  .cart-lock .site-header__inner .search { margin-right: -20px; }
  .cart-lock .site-header__inner {
    /* borde derecho de la cabecera centrada = (ancho + ancho del contenido) / 2 */
    padding-right: max(16px, calc(
      ((100vw - 15px) + min(100vw - 15px, var(--max))) / 2 - (100vw - 520px)));
  }
}

/* Formulario de acceso dentro del panel lateral */
.login-drawer {
  padding: 26px 22px;
  overflow-y: auto;
}
.login-drawer__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-drawer__form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  color: var(--muted);
}
.login-drawer__form input {
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
}
.login-drawer__form input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.login-drawer__form .alert[hidden] { display: none; }

/* "Cerrar compra" con el mismo brillo que la cápsula "Ver pedido". */
.cart-drawer__foot .btn--search {
  position: relative;
  overflow: hidden;
}
.cart-drawer__foot .btn--search::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
      transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: cart-cta-shine 3.6s ease-in-out 1s infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .cart-drawer__foot .btn--search::after { animation: none; }
}

.cart-drawer__empty {
  margin: auto;
  padding: 40px 22px;
  text-align: center;
  color: #777;
}
.cart-drawer__empty p { margin: 12px 0 18px; }

/* Sugerencia al agregar el primer producto */
.mini-cart__sug {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e6e2db;
}

.mini-cart__sug-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #555;
}

.mini-cart__sug .mini-cart__item {
  align-items: center;
  padding-right: 0;
}

.mini-cart__last {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #b0453a;
}

.mini-cart__sug-price {
  font-size: 15px;
  color: #333;
}

.mini-cart__sug-add {
  flex: none;
  margin-left: auto;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background: #fff;
  color: var(--accent);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

.mini-cart__sug-add:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}

.mini-cart__sug-skip {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px 0;
  border: 1px solid #cfc9bf;
  border-radius: 999px;   /* cápsula, como el resto de los botones */
  background: #fff;
  color: #555;
  font-size: 13px;
  cursor: pointer;
}

.mini-cart__sug-skip:hover {
  background: #f6f3ee;
}

/* Cuenta regresiva: el botón se va rellenando de dorado, de izquierda a derecha,
   en los 10 s que tarda en cerrarse el recuadro (misma duración que en main.js). */
.mini-cart__sug-skip {
  position: relative;
  overflow: hidden;
}
.mini-cart__sug-skip > span {
  position: relative;
}
.mini-cart__sug-skip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: .4;
  transform: scaleX(0);
  transform-origin: left center;
}
.mini-cart.is-open .mini-cart__sug-skip::before {
  animation: mini-cart-fill 10s linear forwards;
}
@keyframes mini-cart-fill {
  to { transform: scaleX(1); }
}


/* Aviso flotante "se agregó al carrito" */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 60;
  transform: translate(-50%, 16px);
  max-width: calc(100vw - 32px);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #f4efe7;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.toast.is-in {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Botones extra en la tarjeta ---------- */

.btn--block {
  width: 100%;
}

.fav-form {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
}

.fav-btn {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: #b0453a;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

.fav-btn:hover {
  background: #fff;
}

.fav-btn.is-on {
  background: #b0453a;
  color: #fff;
}

/* ---------- Pestañas (cuenta / pedidos) ---------- */

.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.tab {
  padding: 10px 16px;
  font-size: 16.5px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tab:hover {
  color: var(--ink);
}

.tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--accent);
  font-weight: 500;
}

.grid-table tfoot th {
  background: #f7f3ec;
  text-transform: none;
  font-size: 16.5px;
  color: var(--ink);
}

/* ---------- Resumen del pedido (carrito.php) ---------- */

/* La tabla viene del panel (encabezados en MAYÚSCULAS y letra separada);
   acá usamos la misma tipografía y los mismos textos que la portada. */
table.cart-table th {
  text-transform: none;
  letter-spacing: inherit;
  font-size: 15px;
  color: var(--ink-soft);
}

table.cart-table tfoot th {
  letter-spacing: inherit;
  font-size: 16.5px;
}

.cart-qty,
.cart-remove {
  letter-spacing: inherit;
}

.cart-qty {
  color: var(--ink);
}

.cart-prod {
  white-space: normal;
  min-width: 260px;
}

.cart-prod__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.cart-thumb {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  object-fit: contain;
}

/* Filas más amplias, todo centrado en vertical. */
table.cart-table tbody td {
  padding: 18px 14px;
  vertical-align: middle;
}

/* El nombre del producto puede partirse en varias líneas (la regla del panel lo
   impedía y estiraba la tabla hasta que aparecía el scroll horizontal). */
table.cart-table td.cart-prod {
  white-space: normal;
  min-width: 220px;
}

table.cart-table thead th {
  padding-top: 14px;
  padding-bottom: 14px;
  font-weight: 600;
}

.cart-prod__row { align-items: center; gap: 16px; }

.cart-prod__name {
  font-size: 17px;
  font-weight: 600;
}

/* Cantidad: campo cómodo, centrado, con el mismo borde que el resto. */
.cart-table .cart-qty {
  width: 76px;
  height: 46px;
  padding: 0 8px;
  border-radius: 12px;
  background: #fff;
  font-size: 17px;
  font-weight: 500;
  text-align: center;
}

/* Sin las flechitas del navegador: reservan lugar a la derecha y corren el número. */
.cart-table .cart-qty { -moz-appearance: textfield; appearance: textfield; }
.cart-table .cart-qty::-webkit-outer-spin-button,
.cart-table .cart-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-table .cart-qty:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(184, 164, 102, .25);
}

/* Precios: el unitario y el subtotal se leen de un vistazo. */
.cart-price-now { font-size: 17px; font-weight: 600; }

table.cart-table tbody td.num:nth-child(4) {
  font-size: 18px;
  font-weight: 700;
}

.cart-prod__txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cart-prod__name { font-weight: 500; line-height: 1.3; }
.cart-prod__code { font-size: 13px; color: var(--muted); }

.cart-note {
  margin-top: 5px;
  font-size: 13.5px;
}

.cart-note summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  padding: 3px 8px;
  margin-left: -8px;
  border-radius: 8px;
  color: var(--accent-dark);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.cart-note summary { white-space: nowrap; }
.cart-note summary::-webkit-details-marker { display: none; }
.cart-note summary:hover { background: #ece5d9; }
.cart-note[open] summary { color: var(--muted); }

/* El "guardado ✓" no ocupa lugar hasta que aparece (si no, ensancha la tabla). */
.cart-note__saved {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #1f7a3d;
  font-size: 12px;
  opacity: 0;
  transition: opacity .2s ease, max-width .2s ease;
}
.cart-note__saved.is-on { max-width: 90px; opacity: 1; }

.cart-note textarea {
  display: block;
  margin-top: 6px;
  width: 100%;
  max-width: 340px;
  min-height: 36px;
  max-height: 110px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.4;
  resize: none;
  overflow: hidden;
  background: #fff;
}

.cart-note textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* Botón "Quitar" */
.cart-remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.cart-remove:hover {
  background: #fcece9;
  border-color: #e3a9a0;
  color: #b23c2a;
}

.cart-remove svg { flex: none; }

.cart-qty {
  width: 68px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  text-align: center;
}

/* Columnas del carrito: anchos fijos y cada encabezado sobre su dato. */
.cart-col-precio { width: 170px; }
.cart-col-cant   { width: 120px; }
.cart-col-sub    { width: 150px; }
.cart-col-acc    { width: 100px; }

/* Pantallas medianas: foto y columnas más compactas para que la tabla entre sin scroll. */
@media (max-width: 900px) {
  .cart-thumb { width: 72px; height: 72px; }
  .cart-col-cant   { width: 96px; }
  .cart-col-precio { width: 130px; }
  .cart-col-sub    { width: 110px; }
  .cart-col-acc    { width: 96px; }
  table.cart-table td.cart-prod { min-width: 0; }
  .cart-prod__name { font-size: 16px; }
  /* La etiqueta del descuento baja debajo del precio, en vez de ensanchar la columna. */
  .cart-price-off { display: block; width: fit-content; margin: 3px 0 0 auto; }
}

.cart-table th.cart-th-cant,
.cart-table tbody td:nth-child(2) {
  text-align: center;
}

.cart-table tbody td:nth-child(2) .cart-qty { margin: 0 auto; display: block; }

.cart-foot-count {
  text-align: left !important;
  font-weight: 500;
  color: var(--muted);
  text-transform: none;
}

/* Precio con descuento en el carrito */
.cart-price-old {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: line-through;
}
.cart-price-now {
  font-weight: 500;
}
.cart-price-off {
  margin-left: 6px;
  font-size: 11.5px;
}
.cart-saved {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: #1f7a3d;
  font-weight: 500;
}
.cart-foot-saved th {
  color: #1f7a3d;
  font-weight: 500;
  background: #f7f3ec;
}

/* Carrito vacío */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 44px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}
.cart-empty svg { color: var(--muted); }
.cart-empty p { margin: 0; font-size: 16.5px; color: var(--muted); }
.cart-empty .btn { margin-top: 4px; }

/* "Sumá a tu pedido" / "Te podría interesar" — bloque de impulso */
.cart-suggest {
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* ---------- Botón "Compartir" en la ficha ---------- */

.pdp-share {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.pdp-share:hover { background: #efe9dd; }
.pdp-share svg { flex: none; }

.pdp-share.is-done {
  background: #eef6ef;
  border-color: #a9d3ac;
  color: #2f6d3b;
}

.pdp-rev-hint {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: #f0ebe2;
  color: var(--ink);
  font-size: 13.5px;
}
.pdp-rev-hint strong { color: var(--accent-dark); }

/* ---------- Revendedores ---------- */

.reseller-page,
.legal-page {
  max-width: 760px;
  margin: 0 auto;
}

.legal-page h2 { font-family: var(--font); font-size: 19px; margin: 24px 0 6px; }
.legal-page p, .legal-page li { font-size: 15.5px; line-height: 1.6; color: #33302b; }
.legal-page ul { padding-left: 20px; }

.reseller-lead {
  font-size: 18px;
  line-height: 1.55;
  margin: 0 0 16px;
}

.reseller-how {
  margin: 0 0 16px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15.5px;
  line-height: 1.5;
}

.reseller-note {
  font-size: 14px;
  color: var(--muted);
  background: #f0ebe2;
  border-radius: 12px;
  padding: 12px 14px;
}

.reseller-form {
  margin-top: 26px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.reseller-form h2 { font-family: var(--font); font-size: 20px; margin: 0 0 16px; }
.reseller-form .ck-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.reseller-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.reseller-form .cap { color: var(--muted); font-weight: 500; }
.reseller-form input,
.reseller-form select {
  height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
}
/* Más específico que ".reseller-form label" (que la ponía en columna). */
.reseller-form .reseller-priv {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  margin: 6px 0 18px;
  line-height: 1.45;
  cursor: pointer;
}
.reseller-priv input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 2px 0 0;   /* alineado con la primera línea del texto */
  cursor: pointer;
}
.reseller-priv span { flex: 1; }

.reseller-ok {
  text-align: center;
  padding: 40px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.reseller-ok__check {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #e3f0e4;
  color: #2f6d3b;
  font-size: 30px;
  display: flex; align-items: center; justify-content: center;
}

@media (max-width: 620px) {
  .reseller-form .ck-row { grid-template-columns: 1fr; }
}

/* Mis ventas (revendedor) */
.misv-top {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
}
.misv-kpi {
  flex: 1 1 160px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.misv-kpi__num { font-family: var(--font); font-size: 26px; font-weight: 600; }
.misv-kpi__lbl { font-size: 13px; color: var(--muted); }
.misv-ref {
  margin-bottom: 22px;
  padding: 18px 20px;
  background: #f0ebe2;
  border-radius: 14px;
}
.misv-ref__title {
  margin: 0;
  font-family: var(--font);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}
.misv-ref__how ul {
  margin: 8px 0 0;
  padding: 0 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: var(--ink);
}
.misv-ref__how li::marker { color: var(--accent); }

/* Panel: solicitudes de revendedores */
.sol-list { display: flex; flex-direction: column; gap: 14px; }
.sol-card {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.sol-card__data { flex: 1 1 280px; }
.sol-card__data h3 { margin: 0 0 8px; font-family: var(--font); font-size: 18px; }
.sol-card__data dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 14px; margin: 0; }
.sol-card__data dt { color: var(--muted); }
.sol-card__acc { flex: 1 1 240px; display: flex; flex-direction: column; gap: 10px; }
.sol-card__acc .cap { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.sol-card__acc input {
  height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit;
}
.sol-card__btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* Lista de solicitudes: filas clickeables con su #id */
.sol-items { display: flex; flex-direction: column; gap: 8px; }
.sol-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  transition: box-shadow .12s ease, transform .12s ease;
}
.sol-item:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .12); transform: translateY(-1px); }
.sol-item__id {
  flex: none;
  font-family: var(--font);
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.sol-item__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sol-item__sub { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sol-item__date { flex: none; font-size: 12.5px; color: var(--muted); }

/* Detalle de una solicitud + pantalla de cuenta creada */
.sol-detail, .sol-done { padding: 22px 24px; max-width: 620px; }
.sol-detail h2, .sol-done h2 { margin: 0 0 14px; font-family: var(--font); font-size: 20px; }
.sol-detail__id { color: var(--muted); font-weight: 400; }
.sol-detail dl, .sol-done__dl {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 18px; font-size: 15px;
}
.sol-detail dt, .sol-done__dl dt { color: var(--muted); }
.sol-detail .detail-actions { flex-wrap: wrap; gap: 10px; }
.sol-detail__note { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.sol-done__pw {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 8px;
  background: #10222f;
  color: #fff;
  font-size: 16px;
  letter-spacing: 1px;
}

/* Panel: ficha de revendedor */
.rev-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 14px 0 20px;
}
.rev-stats > div {
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.rev-stats strong { font-family: var(--font); font-size: 20px; }
.rev-stats span { font-size: 12px; color: var(--muted); }

.rev-pagada-btn {
  border: 0;
  font: inherit;
  cursor: pointer;
  transition: filter .12s ease;
}
.rev-pagada-btn:hover { filter: brightness(.95); }
.rev-pagada-btn:disabled { opacity: .6; cursor: default; }

/* ---------- Pie ---------- */

.site-footer {
  margin-top: 40px;
  background: var(--ink);
  color: #d8cdbb;
}

.site-footer__cols {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px 16px 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 36px 48px;
}

.footer-col h4 {
  margin: 0 0 14px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #f4efe7;
}

.footer-col__item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 15px;
  color: #d8cdbb;
  max-width: 320px;
}

a.footer-col__item:hover { color: #fff; }
.footer-col__item svg { flex: none; color: var(--accent); }

/* La dirección va siempre en una sola línea. */
.footer-col__item--wide { max-width: none; white-space: nowrap; }
.footer-col__item--horarios { align-items: flex-start; line-height: 1.45; }
.footer-col__item--horarios svg { margin-top: 3px; }

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #4a463f;
  color: #d8cdbb;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.footer-social a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Medios de envío / pago y newsletter */
.footer-list { margin: 0; padding: 0; list-style: none; }
.footer-list li { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 15px; color: #d8cdbb; }
.footer-list li svg { flex: none; color: var(--accent); }
.footer-list li strong { color: #f4efe7; font-weight: 600; }
.footer-list__sub { padding-left: 26px; color: #b9ae9c; font-size: 14px; }
.footer-col__label { margin: 0 0 8px; font-size: 14px; color: #b9ae9c; }
.footer-pays { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.footer-pay {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border-radius: 6px; background: #f4efe7; color: #1a1f71; font-size: 13px; font-weight: 800; letter-spacing: .04em;
}
.footer-pay--visa { font-style: italic; }
.footer-pay--mc { color: #333; font-weight: 700; letter-spacing: 0; font-size: 12.5px; }
.footer-pay--mc i { width: 14px; height: 14px; border-radius: 50%; background: #eb001b; margin-right: -9px; }
.footer-pay--mc i + i { background: #f79e1b; opacity: .9; margin-right: 4px; }
.footer-news__txt { margin: 0 0 12px; font-size: 15px; color: #d8cdbb; max-width: 320px; }
.footer-news__row { display: flex; gap: 8px; max-width: 360px; }
.footer-news input[type="email"] {
  flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid #4a463f; border-radius: 999px;
  background: #24211c; color: #f4efe7; font: inherit; font-size: 15px;
}
.footer-news input[type="email"]::placeholder { color: #8d8576; }
.footer-news input[type="email"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.footer-news button {
  height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--accent); color: #fff;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s ease;
}
.footer-news button:hover:not(:disabled) { background: var(--accent-dark); }
.footer-news button:disabled { opacity: .6; cursor: wait; }
.footer-news__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.footer-news__msg { min-height: 20px; margin: 8px 0 0; font-size: 14px; }
.footer-news__msg.is-ok { color: #9ed6a6; }
.footer-news__msg.is-err { color: #f0a7a0; }

/* Enlaces legales (términos, privacidad, cambios, defensa del consumidor, arrepentimiento) */
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-bottom: 12px; }
.footer-legal-links a { color: #d8cdbb; font-size: 14px; }
.footer-legal-links a:hover { color: #fff; text-decoration: underline; }
.footer-legal-links .footer-arrep {
  padding: 7px 16px; border: 1px solid var(--accent); border-radius: 999px; color: #f4efe7; font-weight: 600;
  transition: background .12s ease;
}
.footer-legal-links .footer-arrep:hover { background: var(--accent); text-decoration: none; }
.footer-legal-defensa { margin: 0 0 10px; font-size: 13.5px; color: #b9ae9c; }
.footer-legal-defensa a { color: #e6d9bd; text-decoration: underline; }
.footer-legal-copy { margin: 0; }

/* Páginas legales y botón de arrepentimiento */
.legal-falta { background: #fff3c4; color: #7a5b00; padding: 0 4px; border-radius: 3px; }
.legal-nota { font-size: 13.5px !important; color: #6d675c !important; border-top: 1px solid #e6e2db; padding-top: 12px; margin-top: 22px; }
.legal-aviso { margin: 4px 0 8px; padding: 16px 18px; border: 1px solid var(--accent); border-radius: 10px; background: #fdfbf7; font-size: 16px; }
.legal-page .btn { margin: 4px 8px 4px 0; }
.arr-page { max-width: 720px; }
.arr-form { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 8px; }
.arr-form__nota { margin: 0; font-size: 13.5px !important; color: #7a7467 !important; }
.arr-form .btn { align-self: flex-start; }
.ck-field--area textarea {
  width: 100%; min-height: 96px; padding: 24px 14px 8px; border: 1px solid #d9d4cb; border-radius: 4px;
  background: #fff; font: inherit; font-size: 16px; color: var(--ink); resize: none;
}
.ck-field--area textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.ck-field--area > textarea + label { position: absolute; left: 15px; top: 16px; font-size: 16px; color: #9a948a; pointer-events: none; transition: top .12s ease, font-size .12s ease; }
.ck-field--area textarea:focus + label, .ck-field--area textarea:not(:placeholder-shown) + label { top: 7px; font-size: 11.5px; }

.arr-ok { margin: 8px 0 20px; padding: 28px 24px; text-align: center; border: 1px solid #d9d4cb; border-radius: 14px; background: #fff; }
.arr-ok__check {
  width: 54px; height: 54px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent); color: #fff; font-size: 28px;
}
.arr-ok h2 { margin: 0 0 4px !important; }
.arr-ok__cod { margin: 6px 0 2px !important; font-size: 30px !important; font-weight: 700; letter-spacing: .06em; color: var(--ink) !important; }
.arr-ok__sub { margin: 0 0 14px !important; color: #7a7467 !important; }
.arr-ok__datos { display: grid; gap: 8px; max-width: 360px; margin: 0 auto 16px; text-align: left; }
.arr-ok__datos > div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid #ece8e1; font-size: 15px; }
.arr-ok__datos dt { color: #7a7467; font-weight: 400; }
.arr-ok__datos dd { margin: 0; font-weight: 600; text-align: right; }

.site-footer__legal {
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px 24px 28px;
  border-top: 1px solid #34302a;
  font-size: 14px;
  color: #9a9184;
}

/* Botón flotante de WhatsApp */
.wa-float {
  position: fixed;
  right: 34px;
  bottom: 34px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  transition: transform .14s ease, box-shadow .14s ease;
}

.wa-float:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .34);
}

@media (max-width: 560px) {
  .wa-float { right: 18px; bottom: 20px; width: 52px; height: 52px; }
  .site-footer__cols { gap: 28px 36px; padding: 30px 20px 10px; }
  .footer-col__item--wide { white-space: normal; }
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .site-header__inner {
    flex-wrap: wrap;
    gap: 12px 16px;
  }

  .brand { flex: 1; }

  .search {
    order: 3;
    flex: 1 0 100%;   /* siempre en su propia fila, ancho completo */
    max-width: none;
    margin: 0;
  }

  .site-header__actions { gap: 8px; }
  .catalog-full {
    padding: 20px 16px 32px;
  }
}

/* Aviso de cookies */
.cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1200; max-width: 520px; margin: 0;
  padding: 22px 24px 20px; background: #111; color: #fff; border-radius: 6px; box-shadow: 0 10px 34px rgba(0, 0, 0, .35); }
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0 0 18px; font-size: 17px; line-height: 1.55; color: #fff; }
.cookie-bar a { color: #d8d2c4; text-decoration: underline; }
.cookie-bar a:hover { color: #fff; }
.cookie-bar__acts { display: flex; align-items: center; justify-content: center; gap: 12px; }
.cookie-bar__acts button { flex: 1 1 0; padding: 13px 10px; border: 0; border-radius: 0; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.cookie-bar__solo { background: transparent; color: #fff; }
.cookie-bar__solo:hover { text-decoration: underline; }
.cookie-bar__todas { background: #fff; color: #111; }
.cookie-bar__todas:hover { background: #e9e4d8; }

/* Ventana de suscripción al newsletter (discreta: aparece una vez, tarde, y se puede cerrar) */
.news-pop { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(30, 24, 10, .45); }
.news-pop[hidden] { display: none; }
.news-pop__card { position: relative; width: 100%; max-width: 420px; max-height: 94vh; overflow-y: auto; padding: 30px 32px 22px;
  background: #fff; border-radius: 18px; box-shadow: 0 20px 60px rgba(30, 24, 10, .3); text-align: center; }
.news-pop__x { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 30px; line-height: 1; color: #2a2620; cursor: pointer; }
.news-pop__logo { display: block; height: 52px; width: auto; margin: 0 auto 10px; }
.news-pop h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.2; color: #1d1a14; }
.news-pop__sub { margin: 0 0 18px; font-size: 13.5px; color: #8c867a; }
.news-pop__form { text-align: left; }
.news-pop__lbl { display: block; margin: 12px 0 2px; font-size: 14.5px; color: #1d1a14; }
.news-pop__lbl small { color: #8c867a; font-size: 12px; }
.news-pop__form input[type="email"], .news-pop__form input[type="date"] {
  width: 100%; padding: 10px 2px; border: 0; border-bottom: 1.5px solid #2a2620; border-radius: 0; font: inherit; font-size: 16px; background: transparent; outline: none; }
.news-pop__form input:focus { border-bottom-color: var(--accent, #c9a24d); }
.news-pop__msg { min-height: 20px; margin: 10px 0 0; font-size: 13.5px; text-align: center; }
.news-pop__msg.is-ok { color: #2f7a3d; }
.news-pop__msg.is-err { color: #b0453a; }
.news-pop__btn { width: 100%; margin-top: 8px; padding: 13px; border: 0; border-radius: 10px; background: var(--accent, #c9a24d); color: #fff;
  font-weight: 700; letter-spacing: .04em; font-size: 15px; cursor: pointer; }
.news-pop__btn:hover { background: var(--accent-dark, #8a6d2b); }
.news-pop__btn:disabled { opacity: .6; cursor: default; }
.news-pop__legal { margin: 14px 0 0; font-size: 11.5px; line-height: 1.5; color: #6d675c; text-align: center; }
.news-pop__legal a { color: inherit; text-decoration: underline; }
.news-pop__fecha { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: 8px; margin-top: 6px; }
.news-pop__fecha select { width: 100%; padding: 10px 8px; border: 1.5px solid #d9d2c2; border-radius: 10px; font: inherit; font-size: 15px;
  background: #fbf9f4; color: #1d1a14; cursor: pointer; outline: none; }
.news-pop__fecha select:focus { border-color: var(--accent, #c9a24d); box-shadow: 0 0 0 3px rgba(201, 162, 77, .2); }
.news-pop__edad { margin: 6px 0 0; font-size: 12px; color: #8c867a; }

/* Ventana de suscripción: encabezado más ordenado */
.news-pop__card { padding-top: 26px; }
.news-pop__logo { height: 64px; margin: 0 auto 14px; }
.news-pop h2 { max-width: 300px; margin: 0 auto 10px; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.news-pop__sub { max-width: 290px; margin: 0 auto 20px; font-size: 14px; line-height: 1.45; text-wrap: balance; }

/* Ventana de suscripción: degradé difuso oro / azul / blanco con grano de película */
.news-pop__card { isolation: isolate; background: #fbf8f0; overflow-x: hidden; }
.news-pop__card > * { position: relative; z-index: 2; }
.news-pop__card::before {
  content: ''; position: absolute; inset: -50px; z-index: 0; pointer-events: none; filter: blur(34px);
  background:
    radial-gradient(48% 38% at 14% 10%, rgba(214, 176, 92, .85), transparent 70%),
    radial-gradient(46% 40% at 92% 22%, rgba(120, 164, 222, .70), transparent 70%),
    radial-gradient(52% 40% at 72% 96%, rgba(226, 190, 108, .70), transparent 70%),
    radial-gradient(44% 36% at 6% 82%, rgba(150, 188, 232, .60), transparent 70%),
    radial-gradient(60% 45% at 50% 48%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .15) 80%);
}
.news-pop__card::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .38; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.news-pop__form input[type="email"] { background: rgba(255, 255, 255, .35); padding-left: 6px; }
.news-pop__fecha select { background: rgba(255, 255, 255, .7); }
.news-pop__card { overflow: hidden; max-height: none; }
.news-pop { overflow-y: auto; }
.news-pop__card > .news-pop__x { position: absolute; z-index: 3; }
.news-pop__card::after { opacity: .2; }
.news-pop__logo { filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(120, 90, 30, .35)); }
/* Zona oscura detrás del logo, para que el blanco se note */
.news-pop__card::before {
  background:
    radial-gradient(52% 15% at 50% 12%, rgba(52, 62, 96, .95), rgba(52, 62, 96, 0) 78%),
    radial-gradient(48% 38% at 14% 10%, rgba(196, 150, 62, .85), transparent 70%),
    radial-gradient(46% 40% at 92% 22%, rgba(104, 146, 208, .70), transparent 70%),
    radial-gradient(52% 40% at 72% 96%, rgba(226, 190, 108, .70), transparent 70%),
    radial-gradient(44% 36% at 6% 82%, rgba(150, 188, 232, .60), transparent 70%),
    radial-gradient(60% 45% at 50% 52%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .15) 80%);
}

/* Aviso de cookies: misma familia que la ventana de suscripción (degradé oscuro oro/azul con grano) */
.cookie-bar { isolation: isolate; overflow: hidden; border-radius: 18px; padding: 22px 24px 20px; max-width: 480px;
  background: #1c2338; color: #fff; box-shadow: 0 20px 60px rgba(30, 24, 10, .35); animation: deco-pop-in .45s ease both; }
.cookie-bar::before { content: ''; position: absolute; inset: -40px; z-index: 0; pointer-events: none; filter: blur(30px);
  background:
    radial-gradient(50% 60% at 6% 8%, rgba(196, 150, 62, .75), transparent 70%),
    radial-gradient(55% 70% at 96% 20%, rgba(88, 126, 190, .65), transparent 70%),
    radial-gradient(50% 60% at 78% 100%, rgba(214, 176, 92, .55), transparent 70%); }
.cookie-bar::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .22; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.cookie-bar > * { position: relative; z-index: 2; }
.cookie-bar p { font-size: 16px; margin-bottom: 16px; }
.cookie-bar a { color: #f1dca4; }
.cookie-bar__acts { justify-content: stretch; }
.cookie-bar__acts button { border-radius: 10px; padding: 12px 10px; font-size: 14.5px; letter-spacing: .02em; }
.cookie-bar__solo { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .35); }
.cookie-bar__solo:hover { background: rgba(255, 255, 255, .2); text-decoration: none; }
.cookie-bar__todas { background: var(--accent, #c9a24d); color: #fff; }
.cookie-bar__todas:hover { background: var(--accent-dark, #8a6d2b); }

/* Aparición suave de ambos carteles */
@keyframes deco-pop-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.news-pop:not([hidden]) { animation: deco-fade-in .3s ease both; }
.news-pop:not([hidden]) .news-pop__card { animation: deco-pop-in .45s ease both; }
@keyframes deco-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cookie-bar, .news-pop, .news-pop__card { animation: none !important; } }

/* Paleta: dorado y blanco al frente; el azul queda sólo como un toque muy leve */
.news-pop__card::before {
  background:
    radial-gradient(52% 15% at 50% 12%, rgba(122, 90, 30, .92), rgba(122, 90, 30, 0) 78%),
    radial-gradient(55% 40% at 12% 10%, rgba(214, 172, 80, .90), transparent 70%),
    radial-gradient(40% 32% at 96% 24%, rgba(150, 182, 226, .38), transparent 70%),
    radial-gradient(58% 42% at 74% 96%, rgba(226, 188, 100, .80), transparent 70%),
    radial-gradient(44% 34% at 4% 84%, rgba(236, 208, 140, .70), transparent 70%),
    radial-gradient(60% 45% at 50% 52%, rgba(255, 255, 255, .96), rgba(255, 255, 255, .2) 80%);
}
.cookie-bar { background: #2a2113; }
.cookie-bar::before {
  background:
    radial-gradient(55% 70% at 6% 8%, rgba(214, 172, 80, .85), transparent 70%),
    radial-gradient(45% 55% at 98% 24%, rgba(150, 182, 226, .22), transparent 70%),
    radial-gradient(55% 65% at 78% 100%, rgba(226, 188, 100, .65), transparent 70%);
}
.cookie-bar__solo { background: rgba(255, 255, 255, .14); }

/* Detrás del logo: zona clara; el logo blanco se destaca con sombra */
.news-pop__card::before {
  background:
    radial-gradient(52% 15% at 50% 12%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 78%),
    radial-gradient(55% 40% at 12% 10%, rgba(214, 172, 80, .85), transparent 70%),
    radial-gradient(40% 32% at 96% 24%, rgba(150, 182, 226, .34), transparent 70%),
    radial-gradient(58% 42% at 74% 96%, rgba(226, 188, 100, .80), transparent 70%),
    radial-gradient(44% 34% at 4% 84%, rgba(236, 208, 140, .70), transparent 70%),
    radial-gradient(60% 45% at 50% 52%, rgba(255, 255, 255, .96), rgba(255, 255, 255, .2) 80%);
}
.news-pop__logo { filter: brightness(0) invert(1) drop-shadow(0 2px 3px rgba(96, 66, 18, .75)) drop-shadow(0 4px 12px rgba(96, 66, 18, .45)); }

/* Aviso de cookies: vidrio esmerilado (se ve difuminado lo que hay detrás) con toques dorados */
.cookie-bar { background: rgba(255, 252, 244, .42); -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
  color: #2a2113; border: 1px solid rgba(255, 255, 255, .65); box-shadow: 0 18px 50px rgba(60, 44, 12, .22); }
.cookie-bar::before { filter: blur(26px);
  background:
    radial-gradient(60% 80% at 4% 6%, rgba(214, 172, 80, .75), transparent 70%),
    radial-gradient(55% 70% at 100% 100%, rgba(226, 188, 100, .60), transparent 70%); }
.cookie-bar::after { opacity: .3; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.cookie-bar p { color: #2a2113; }
.cookie-bar a { color: #7a5a1e; font-weight: 600; }
.cookie-bar a:hover { color: #4d3811; }
.cookie-bar__solo { background: rgba(255, 255, 255, .55); color: #2a2113; border: 1px solid rgba(42, 33, 19, .28); }
.cookie-bar__solo:hover { background: rgba(255, 255, 255, .85); }

/* Cookies: más blanco y luminoso */
.cookie-bar { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(20px) saturate(1.3) brightness(1.08); backdrop-filter: blur(20px) saturate(1.3) brightness(1.08);
  border-color: rgba(255, 255, 255, .9); box-shadow: 0 18px 50px rgba(60, 44, 12, .18), inset 0 1px 0 rgba(255, 255, 255, .95); }
.cookie-bar::before { opacity: .6;
  background:
    radial-gradient(55% 75% at 2% 0%, rgba(222, 184, 96, .8), transparent 68%),
    radial-gradient(45% 60% at 100% 100%, rgba(230, 196, 114, .6), transparent 70%); }
.cookie-bar::after { opacity: .16; }
.cookie-bar__solo { background: rgba(255, 255, 255, .85); }

/* Ventana de suscripción: mismo vidrio blanco y luminoso que el aviso de cookies */
.news-pop { background: rgba(60, 44, 12, .28); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.news-pop__card { background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: blur(22px) saturate(1.3) brightness(1.08); backdrop-filter: blur(22px) saturate(1.3) brightness(1.08);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 24px 64px rgba(60, 44, 12, .25), inset 0 1px 0 rgba(255, 255, 255, .95); }
.news-pop__card::before { opacity: .75;
  background:
    radial-gradient(60% 34% at 50% 8%, rgba(214, 172, 80, .55), transparent 72%),
    radial-gradient(55% 40% at 4% 4%, rgba(222, 184, 96, .85), transparent 68%),
    radial-gradient(50% 42% at 100% 100%, rgba(230, 196, 114, .75), transparent 70%),
    radial-gradient(44% 34% at 2% 90%, rgba(236, 208, 140, .55), transparent 70%); }
.news-pop__card::after { opacity: .16; }
.news-pop__form input[type="email"] { background: rgba(255, 255, 255, .7); }
.news-pop { background: rgba(255, 250, 238, .38); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.news-pop__card { background: rgba(255, 255, 255, .8); box-shadow: 0 24px 64px rgba(60, 44, 12, .2), inset 0 1px 0 #fff; }

/* Campo de e-mail: mismo estilo que los desplegables de la fecha */
.news-pop__form input[type="email"] { width: 100%; margin-top: 6px; padding: 12px 14px; border: 1.5px solid #d9d2c2; border-bottom-width: 1.5px;
  border-radius: 10px; background: rgba(255, 255, 255, .85); font-size: 15px; color: #1d1a14; outline: none;
  transition: border-color .15s, box-shadow .15s; }
.news-pop__form input[type="email"]::placeholder { color: #9a9486; }
.news-pop__form input[type="email"]:focus { border-color: var(--accent, #c9a24d); box-shadow: 0 0 0 3px rgba(201, 162, 77, .22); background: #fff; }
.news-pop__fecha select:hover { border-color: #c9bfa8; }

/* SUSCRIBITE: mismo destello diagonal que "Ver pedido" y "Cerrar compra" */
.news-pop__btn { position: relative; overflow: hidden; }
.news-pop__btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%);
  animation: cart-cta-shine 3.6s ease-in-out 1s infinite;
}
@media (prefers-reduced-motion: reduce) { .news-pop__btn::after { animation: none; } }

/* Cabecera: mismo vidrio blanco luminoso con toques dorados y grano que los carteles.
   El efecto va en un pseudo-elemento para no afectar a los paneles laterales (fixed) que viven dentro del header. */
.site-header { isolation: isolate; background: transparent; box-shadow: 0 6px 24px rgba(96, 70, 20, .10), 0 1px 0 rgba(255, 255, 255, .9) inset; }
.site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) brightness(1.06); backdrop-filter: blur(20px) saturate(1.3) brightness(1.06);
  background-color: rgba(255, 253, 247, .78);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.16'/></svg>"),
    radial-gradient(34% 140% at 0% 0%, rgba(222, 184, 96, .55), transparent 70%),
    radial-gradient(30% 140% at 100% 100%, rgba(230, 196, 114, .45), transparent 70%),
    radial-gradient(40% 110% at 52% 0%, rgba(255, 255, 255, .9), transparent 80%);
}
.brand__logo { filter: drop-shadow(0 2px 4px rgba(122, 90, 30, .28)); }
.header-acceder, .search__field { background-color: rgba(255, 255, 255, .7); }
.header-acceder, .search__field { background-color: transparent; }
.site-header::before {
  background-color: rgba(255, 253, 247, .82);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.12'/></svg>"),
    radial-gradient(40% 90% at 0% 0%, rgba(222, 184, 96, .38), transparent 70%),
    radial-gradient(34% 90% at 100% 100%, rgba(230, 196, 114, .30), transparent 70%),
    radial-gradient(45% 80% at 50% 0%, rgba(255, 255, 255, .9), transparent 80%);
}

/* Logo de la cabecera: más contraste (fondo claro detrás, dorado más profundo y sombra definida) */
.site-header::before {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.12'/></svg>"),
    radial-gradient(34% 110% at 12% 50%, rgba(255, 255, 255, .95), transparent 78%),
    radial-gradient(36% 90% at 46% 0%, rgba(222, 184, 96, .34), transparent 70%),
    radial-gradient(34% 90% at 100% 100%, rgba(230, 196, 114, .32), transparent 70%);
}
.brand__logo { filter: brightness(.82) saturate(1.35) contrast(1.1) drop-shadow(0 1px 1px rgba(90, 62, 14, .55)) drop-shadow(0 4px 8px rgba(122, 90, 30, .35)); }

/
body:not(.panel-body) * =====================================================================
   Estilo general: minimalista y moderno (vidrio blanco,
body:not(.panel-body) toques dorados,
body:not(.panel-body) grano suave)
   Mismo lenguaje visual que la cabecera y los carteles.
   ===================================================================== */
body:not(.panel-body) {
  --radius: 18px;
  --line: rgba(184, 164, 102, .28);
  --shadow: 0 10px 34px rgba(96, 70, 20, .10);
  --glass: rgba(255, 255, 255, .72);
  --grano: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.10'/></svg>");
}
body:not(.panel-body) { /* Fondo: blanco cálido con una luz dorada muy suave y grano */
  background-color: #fffdf8;
  background-image:
    var(--grano),
    radial-gradient(60% 40% at 0% 0%, rgba(222, 184, 96, .16), transparent 70%),
    radial-gradient(55% 40% at 100% 30%, rgba(230, 196, 114, .12), transparent 70%),
    radial-gradient(60% 40% at 20% 100%, rgba(222, 184, 96, .10), transparent 70%);
  background-attachment: fixed;
}
body:not(.panel-body) /* Títulos: más limpios */
.content__title,
body:not(.panel-body) .section-title,
body:not(.panel-body) h1.content__title { letter-spacing: -.025em; }
body:not(.panel-body) .section-label { color: var(--accent-dark); letter-spacing: 1.4px; }
body:not(.panel-body) /* Tarjetas de producto */
.card { background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(96, 70, 20, .05); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body:not(.panel-body) .card:hover { box-shadow: 0 14px 36px rgba(96, 70, 20, .16); transform: translateY(-3px); }
body:not(.panel-body) /* Categorías */
.cat-card__media { border-radius: var(--radius); border: 1px solid var(--line); background: var(--glass);
  box-shadow: 0 2px 10px rgba(96, 70, 20, .05); transition: box-shadow .2s ease, transform .15s ease; }
body:not(.panel-body) .cat-card:hover .cat-card__media { box-shadow: 0 12px 30px rgba(96, 70, 20, .15); transform: translateY(-2px); }
body:not(.panel-body) /* Banners y portada */
.banner { border-radius: 22px; box-shadow: 0 14px 40px rgba(96, 70, 20, .14); }
body:not(.panel-body) /* Botones */
.btn--search { background: linear-gradient(180deg, #c4b072, #b8a466); box-shadow: 0 4px 14px rgba(147, 127, 68, .28), inset 0 1px 0 rgba(255, 255, 255, .35); }
body:not(.panel-body) .btn--search:hover { background: linear-gradient(180deg, #b8a466, #937f44); }
body:not(.panel-body) .btn--plain { background: var(--glass); border-color: var(--line); color: var(--ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body:not(.panel-body) .btn--plain:hover { background: #fff; }
body:not(.panel-body) /* Formularios (checkout,
body:not(.panel-body) arrepentimiento,
body:not(.panel-body) login) */
.ck-field input,
body:not(.panel-body) .ck-field select,
body:not(.panel-body) .ck-field--area textarea { border-radius: 12px; border-color: rgba(184, 164, 102, .4); background: rgba(255, 255, 255, .85); }
body:not(.panel-body) .ck-field input:focus,
body:not(.panel-body) .ck-field select:focus,
body:not(.panel-body) .ck-field--area textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(184, 164, 102, .25); }
body:not(.panel-body) .ck-summary,
body:not(.panel-body) .arr-ok,
body:not(.panel-body) .legal-aviso { border-radius: var(--radius); border-color: var(--line); background: var(--glass); box-shadow: var(--shadow); }
body:not(.panel-body) /* Pie de página: claro,
body:not(.panel-body) en vidrio dorado y blanco */
.site-footer { margin-top: 56px; color: #4a4336; border-top: 1px solid var(--line);
  background-color: rgba(255, 253, 247, .85);
  background-image: var(--grano),
    radial-gradient(40% 80% at 0% 0%, rgba(222, 184, 96, .30), transparent 70%),
    radial-gradient(36% 80% at 100% 100%, rgba(230, 196, 114, .26), transparent 70%); }
body:not(.panel-body) .footer-col h4 { color: #2a2113; }
body:not(.panel-body) .footer-col__item,
body:not(.panel-body) .footer-list li,
body:not(.panel-body) .footer-news__txt,
body:not(.panel-body) .footer-legal-links a { color: #4a4336; }
body:not(.panel-body) a.footer-col__item:hover,
body:not(.panel-body) .footer-legal-links a:hover { color: #2a2113; }
body:not(.panel-body) .footer-list li strong { color: #2a2113; }
body:not(.panel-body) .footer-list__sub,
body:not(.panel-body) .footer-col__label,
body:not(.panel-body) .footer-legal-defensa { color: #7a7467; }
body:not(.panel-body) .footer-legal-defensa a { color: #7a5a1e; }
body:not(.panel-body) .footer-social a,
body:not(.panel-body) .footer-social__link { border-color: rgba(184, 164, 102, .5); color: #4a4336; }
body:not(.panel-body) .footer-news input[type="email"] { background: rgba(255, 255, 255, .85); border-color: rgba(184, 164, 102, .45); color: #2a2113; }
body:not(.panel-body) .footer-news input[type="email"]::placeholder { color: #9a9486; }
body:not(.panel-body) .footer-news__msg.is-ok { color: #2f7a3d; }
body:not(.panel-body) .footer-news__msg.is-err { color: #b0453a; }
body:not(.panel-body) .footer-legal-links .footer-arrep { color: #2a2113; border-color: var(--accent); }
body:not(.panel-body) .footer-legal-links .footer-arrep:hover { color: #fff; }
body:not(.panel-body) .site-footer__legal { border-top-color: rgba(184, 164, 102, .35); color: #7a7467; }

/* Botones planos (como "Ver pedido"): color sólido, sin degradé ni sombra */
body:not(.panel-body) .btn--search { background: var(--accent); box-shadow: none; }
body:not(.panel-body) .btn--search:hover { background: var(--accent-dark); }
body:not(.panel-body) .btn--plain { background: #ece5d9; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body:not(.panel-body) .btn--plain:hover { background: #e0d8ca; }

/* En los carruseles la sombra se cortaba en cuadrado contra el borde del recorte: ahí las tarjetas van sin sombra */
body:not(.panel-body) .carousel .card, body:not(.panel-body) .carousel .card:hover { box-shadow: none; }
body:not(.panel-body) .carousel .card:hover { border-color: rgba(184, 164, 102, .6); transform: translateY(-2px); }
body:not(.panel-body) .carousel .cat-card:hover .cat-card__media { box-shadow: none; border-color: rgba(184, 164, 102, .6); }
body:not(.panel-body) .carousel .cat-card__media { box-shadow: none; }

/* Flechas de los carruseles: en vidrio translúcido, se adaptan al fondo de la web (antes eran un bloque blanco) */
body:not(.panel-body) .carousel-nav { background: rgba(255, 253, 247, .5); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(184, 164, 102, .35); }
body:not(.panel-body) .carousel-nav--prev { border-left: 0; }
body:not(.panel-body) .carousel-nav--next { border-right: 0; }
body:not(.panel-body) .carousel-nav:hover { background: rgba(255, 255, 255, .8); box-shadow: none; }
body:not(.panel-body) .carousel-nav--prev::before { border-right-color: var(--accent-dark); }
body:not(.panel-body) .carousel-nav--next::before { border-left-color: var(--accent-dark); }

/* Que no se recorte el borde de arriba ni los costados de las tarjetas al levantarse con el mouse:
   el carrusel deja un margen interno chico y el visor lo compensa para no mover el diseño. */
body:not(.panel-body) .carousel { padding: 6px 3px 10px; }
body:not(.panel-body) .carousel-viewport { margin: -6px -3px 0; }
body:not(.panel-body) .carousel-viewport .carousel-nav--prev { left: 3px; }
body:not(.panel-body) .carousel-viewport .carousel-nav--next { right: 3px; }

/* Mini-carrito emergente: mismo vidrio blanco con grano y toques dorados que el resto */
body:not(.panel-body) .mini-cart__panel {
  width: 300px; padding: 18px 20px 18px; border-radius: 18px; border: 1px solid rgba(184, 164, 102, .4);
  background-color: rgba(255, 253, 247, .86);
  background-image: var(--grano),
    radial-gradient(60% 70% at 0% 0%, rgba(222, 184, 96, .22), transparent 70%),
    radial-gradient(50% 60% at 100% 100%, rgba(230, 196, 114, .20), transparent 70%);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 18px 48px rgba(96, 70, 20, .22), inset 0 1px 0 #fff;
}
body:not(.panel-body) .mini-cart__panel::before {
  background: #fffdf7; border: 1px solid rgba(184, 164, 102, .4); border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0;
}
body:not(.panel-body) .mini-cart__close {
  top: 10px; right: 12px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #7a7467; transition: background .15s, color .15s;
}
body:not(.panel-body) .mini-cart__close:hover { background: rgba(184, 164, 102, .22); color: #2a2113; }
body:not(.panel-body) .mini-cart__item { gap: 14px; align-items: center; padding-right: 30px; }
body:not(.panel-body) .mini-cart__img { width: 58px; height: 58px; border-radius: 12px; border: 1px solid rgba(184, 164, 102, .35); background: #fff; }
body:not(.panel-body) .mini-cart__txt { gap: 3px; }
body:not(.panel-body) .mini-cart__name { color: #2a2113; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
body:not(.panel-body) .mini-cart__qty { color: #7a7467; font-size: 13px; }
body:not(.panel-body) .mini-cart__ok {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 5px; padding: 3px 10px 3px 8px; border-radius: 999px;
  background: rgba(184, 164, 102, .2); color: #6b4f16; font-size: 12.5px; font-weight: 700;
}
body:not(.panel-body) .mini-cart__ok::before { content: "✓"; font-weight: 800; }
body:not(.panel-body) .mini-cart__total { border-top: 1px solid rgba(184, 164, 102, .35); margin-top: 16px; padding-top: 13px; color: #4a4336; font-weight: 500; }
body:not(.panel-body) .mini-cart__total strong { color: #2a2113; font-size: 18px; font-weight: 700; }

/* Carrito lateral (y panel de acceso): vidrio blanco con grano y toques dorados */
body:not(.panel-body) .cart-overlay { background: rgba(60, 44, 12, .30); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
body:not(.panel-body) .cart-drawer {
  border-radius: 24px 0 0 24px; border-left: 1px solid rgba(184, 164, 102, .4);
  background-color: rgba(255, 253, 247, .9);
  background-image: var(--grano),
    radial-gradient(70% 40% at 100% 0%, rgba(222, 184, 96, .26), transparent 70%),
    radial-gradient(60% 40% at 0% 100%, rgba(230, 196, 114, .22), transparent 70%);
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: -18px 0 54px rgba(96, 70, 20, .22);
}
body:not(.panel-body) .cart-drawer__head { padding: 22px 26px 18px; border-bottom: 1px solid rgba(184, 164, 102, .35); }
body:not(.panel-body) .cart-drawer__head h2 { color: #2a2113; font-size: 15px; letter-spacing: .14em; }
body:not(.panel-body) .cart-drawer__close { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #6d675c; transition: background .15s, color .15s; }
body:not(.panel-body) .cart-drawer__close:hover { background: rgba(184, 164, 102, .22); color: #2a2113; }
body:not(.panel-body) .cart-drawer__list { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
body:not(.panel-body) .cart-drawer__item { padding: 14px; gap: 14px; border: 1px solid rgba(184, 164, 102, .28); border-radius: 16px;
  background: rgba(255, 255, 255, .7); align-items: center; }
body:not(.panel-body) .cart-drawer__img { width: 78px; height: 78px; border-radius: 12px; border: 1px solid rgba(184, 164, 102, .3); background: #fff; }
body:not(.panel-body) .cart-drawer__name { color: #2a2113; font-weight: 600; font-size: 15px; }
body:not(.panel-body) .cart-drawer__qty { border: 1px solid rgba(184, 164, 102, .5); border-radius: 999px; background: rgba(255, 255, 255, .8); overflow: hidden; }
body:not(.panel-body) .cart-drawer__qty button { width: 32px; height: 32px; color: #6b4f16; }
body:not(.panel-body) .cart-drawer__qty button:hover { background: rgba(184, 164, 102, .2); }
body:not(.panel-body) .cart-drawer__qty input { background: transparent; color: #2a2113; font-weight: 600; }
body:not(.panel-body) .cart-drawer__price strong { color: #2a2113; font-size: 16px; }
body:not(.panel-body) .cart-drawer__del { color: #a39d90; border-radius: 50%; padding: 6px; transition: background .15s, color .15s; }
body:not(.panel-body) .cart-drawer__del:hover { background: rgba(176, 69, 58, .1); color: #b0453a; }
body:not(.panel-body) .cart-drawer__foot { padding: 18px 26px 24px; border-top: 1px solid rgba(184, 164, 102, .35); background: rgba(255, 255, 255, .35); }
body:not(.panel-body) .cart-drawer__total { color: #4a4336; }
body:not(.panel-body) .cart-drawer__total strong { color: #2a2113; font-size: 22px; }
body:not(.panel-body) .cart-drawer__foot .btn--search { height: 50px; font-size: 17px; }
body:not(.panel-body) .cart-drawer__empty { color: #7a7467; }
@media (max-width: 560px) { body:not(.panel-body) .cart-drawer { border-radius: 0; } }

/* Resumen del pedido (checkout): tarjeta de vidrio con aire interno */
body:not(.panel-body) .ck-summary {
  padding: 22px 22px 20px; border: 1px solid rgba(184, 164, 102, .4); border-radius: 20px; color: #4a4336;
  background-color: rgba(255, 253, 247, .85);
  background-image: var(--grano),
    radial-gradient(70% 40% at 100% 0%, rgba(222, 184, 96, .22), transparent 70%),
    radial-gradient(60% 40% at 0% 100%, rgba(230, 196, 114, .18), transparent 70%);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 14px 40px rgba(96, 70, 20, .14), inset 0 1px 0 #fff;
}
body:not(.panel-body) .ck-summary::before { content: "Resumen del pedido"; display: block; margin: 0 0 14px; font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #6b4f16; }
body:not(.panel-body) .ck-summary__list { padding: 0 0 12px; border-bottom: 1px solid rgba(184, 164, 102, .35); }
body:not(.panel-body) .ck-summary__list li { gap: 14px; padding: 8px 0; }
body:not(.panel-body) .ck-summary__list img { width: 60px; height: 60px; border-radius: 12px; border: 1px solid rgba(184, 164, 102, .3); background: #fff; }
body:not(.panel-body) .ck-summary__name { color: #2a2113; font-weight: 500; font-size: 14px; }
body:not(.panel-body) .ck-summary__price { color: #2a2113; font-weight: 600; font-size: 14.5px; }
body:not(.panel-body) .ck-summary__rows { margin-top: 12px; }
body:not(.panel-body) .ck-summary__rows > div { padding: 5px 0; font-size: 14.5px; }
body:not(.panel-body) .ck-summary__rows dt { color: #6d675c; font-weight: 400; }
body:not(.panel-body) .ck-summary__rows dd { color: #2a2113; font-weight: 500; }
body:not(.panel-body) .ck-summary__total { margin-top: 10px; padding-top: 14px !important; border-top: 1px solid rgba(184, 164, 102, .35); }
body:not(.panel-body) .ck-summary__total dt { color: #2a2113; font-weight: 600; font-size: 17px; }
body:not(.panel-body) .ck-summary__total dd { color: #2a2113; font-weight: 700; font-size: 24px; letter-spacing: -.01em; }
body:not(.panel-body) .ck-summary__total { align-items: center; }

/* Halo claro detrás del logo (en cualquier cabecera), para que resalte sobre el degradé */
body:not(.panel-body) .brand { position: relative; isolation: isolate; }
body:not(.panel-body) .brand::before {
  content: ""; position: absolute; z-index: -1; inset: -14px -70px; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .98) 35%, rgba(255, 255, 255, .75) 62%, rgba(255, 255, 255, 0) 100%);
}

/* Cabecera uniforme: sin halo ni manchas; un degradé suave y parejo de blanco a crema dorado */
body:not(.panel-body) .brand::before { display: none; }
body:not(.panel-body) .site-header::before {
  background-color: rgba(255, 253, 247, .9);
  background-image: var(--grano),
    linear-gradient(90deg, rgba(255, 255, 255, .85) 0%, rgba(250, 241, 219, .75) 100%);
}

/* ===== Ayuda del CVV: tarjeta negra que gira y muestra el código con zoom ===== */
button.pago-ayuda { background: none; padding: 0; font-family: inherit; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
button.pago-ayuda:hover, button.pago-ayuda:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; outline: 0; }

.cvv-modal { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(60, 44, 12, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overflow-y: auto; }
.cvv-modal[hidden] { display: none; }
.cvv-modal__box { position: relative; width: 100%; max-width: 440px; padding: 24px 24px 22px; text-align: center; border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 24px 64px rgba(60, 44, 12, .28), inset 0 1px 0 #fff;
  background-color: rgba(255, 253, 247, .92);
  background-image: radial-gradient(70% 40% at 0% 0%, rgba(222, 184, 96, .28), transparent 70%), radial-gradient(60% 40% at 100% 100%, rgba(230, 196, 114, .22), transparent 70%);
  animation: deco-pop-in .35s ease both; }
.cvv-modal__box h3 { margin: 0 0 12px; font-size: 20px; color: #2a2113; }
.cvv-modal__x { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none;
  font-size: 24px; line-height: 1; color: #6d675c; cursor: pointer; }
.cvv-modal__x:hover { background: rgba(184, 164, 102, .22); color: #2a2113; }
.cvv-modal__txt { margin: 8px 0 16px; font-size: 14.5px; line-height: 1.5; color: #4a4336; }
.cvv-modal__ok { min-width: 150px; }

/* Escena 3D */
.cvv-scene { perspective: 1100px; height: 244px; display: flex; align-items: center; justify-content: center; }
.cvv-card { position: relative; width: 340px; max-width: 100%; aspect-ratio: 1.586; transform-style: preserve-3d; transform: scale(.7) rotateY(0deg); opacity: 0;
  transition: transform 1s cubic-bezier(.45, .05, .25, 1), opacity .4s ease; }
.cvv-scene.is-in .cvv-card { opacity: 1; transform: scale(1) rotateY(0deg); transition: transform .5s cubic-bezier(.22, .9, .28, 1), opacity .4s ease; }
.cvv-scene.is-flip .cvv-card { transform: scale(1.02) rotateY(180deg); transition: transform 1s cubic-bezier(.45, .05, .25, 1); }
.cvv-scene.is-zoom .cvv-card { transform: scale(1.16) rotateY(180deg); transition: transform .8s cubic-bezier(.22, .9, .28, 1); }

.cvv-face { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; color: #fff;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: linear-gradient(135deg, #2b2b2e 0%, #111113 45%, #050506 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .18); }
.cvv-face::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .10) 45%, transparent 60%); }
.cvv-face--back { transform: rotateY(180deg); }

.cvv-chip { position: absolute; left: 22px; top: 56px; width: 46px; height: 35px; border-radius: 7px;
  background: linear-gradient(135deg, #e8cf8a, #b8a466 55%, #d9bf7c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.cvv-chip::before { content: ""; position: absolute; inset: 7px 10px; border: 1px solid rgba(0, 0, 0, .28); border-radius: 3px; }
.cvv-nfc { position: absolute; left: 78px; top: 58px; color: rgba(255, 255, 255, .7); transform: rotate(90deg); }
.cvv-num { position: absolute; left: 22px; right: 22px; top: 112px; font-size: 21px; letter-spacing: .12em; font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.cvv-meta { position: absolute; left: 22px; bottom: 20px; display: flex; gap: 22px; font-size: 12px; letter-spacing: .08em; color: rgba(255, 255, 255, .75); }

.cvv-brands { position: absolute; right: 20px; bottom: 16px; display: flex; align-items: center; gap: 12px; }
.cvv-brands--back { right: 18px; bottom: 14px; opacity: .85; transform: scale(.8); transform-origin: right bottom; }
.cvv-visa { font-weight: 800; font-style: italic; font-size: 24px; letter-spacing: .02em; color: #fff; }
.cvv-mc { display: inline-flex; align-items: center; }
.cvv-mc i { width: 28px; height: 28px; border-radius: 50%; background: #eb001b; }
.cvv-mc i + i { margin-left: -11px; background: #f79e1b; mix-blend-mode: screen; opacity: .95; }

/* Dorso */
.cvv-stripe { position: absolute; left: 0; right: 0; top: 26px; height: 42px; background: #000; box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.cvv-sign { position: absolute; left: 20px; right: 20px; top: 90px; height: 40px; display: flex; align-items: center; border-radius: 4px; background: #f4f1e8; overflow: visible; }
.cvv-sign__lines { flex: 1; height: 100%; border-radius: 4px 0 0 4px;
  background: repeating-linear-gradient(-45deg, #f4f1e8 0 6px, #e4dfd0 6px 8px); }
.cvv-code { position: relative; width: 66px; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 0 4px 4px 0;
  background: #fff; color: #111; font-size: 21px; font-weight: 800; letter-spacing: .12em; font-style: italic; }
.cvv-scene.is-zoom .cvv-code { animation: cvv-pulso 1.4s ease-in-out infinite; }
@keyframes cvv-pulso {
  0%, 100% { box-shadow: 0 0 0 2px #b8a466, 0 0 0 0 rgba(184, 164, 102, .7); }
  50%      { box-shadow: 0 0 0 2px #b8a466, 0 0 0 11px rgba(184, 164, 102, 0); }
}
.cvv-tag { position: absolute; right: 20px; top: 138px; padding: 3px 10px; border-radius: 999px; background: #b8a466; color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  opacity: 0; transform: translateY(-4px); transition: opacity .4s ease .2s, transform .4s ease .2s; }
.cvv-scene.is-zoom .cvv-tag { opacity: 1; transform: none; }

@media (max-width: 420px) {
  .cvv-card { width: 300px; }
  .cvv-num { font-size: 18px; top: 100px; }
  .cvv-scene { height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .cvv-card, .cvv-scene.is-in .cvv-card, .cvv-scene.is-flip .cvv-card, .cvv-scene.is-zoom .cvv-card { transition: none; }
  .cvv-scene.is-zoom .cvv-code { animation: none; }
}
.cvv-scene { height: 272px; }
@media (max-width: 420px) { .cvv-scene { height: 240px; } }

/* Ayuda del CVV: todo más grande y legible */
.cvv-modal__box { max-width: 580px; padding: 30px 32px 28px; }
.cvv-modal__box h3 { font-size: 26px; margin-bottom: 14px; }
.cvv-scene { zoom: 1.35; }
.cvv-modal__txt { font-size: 18px; line-height: 1.55; margin: 12px 0 22px; }
.cvv-modal__ok { height: 50px; padding: 0 34px; font-size: 18px; }
.cvv-modal__x { width: 40px; height: 40px; font-size: 30px; top: 14px; right: 16px; }
.cvv-code { font-size: 24px; width: 76px; }
.cvv-tag { font-size: 13px; padding: 4px 12px; }
@media (max-width: 560px) {
  .cvv-modal__box { padding: 26px 18px 22px; }
  .cvv-scene { zoom: 1; }
  .cvv-modal__box h3 { font-size: 23px; }
  .cvv-modal__txt { font-size: 16.5px; }
}
.cvv-modal { align-items: flex-start; }
.cvv-modal__box { margin: auto; }
@media (max-height: 760px) and (min-width: 561px) { .cvv-scene { zoom: 1.15; } }

/* Nítida al terminar: la tarjeta se dibuja ya en su tamaño final (zoom 1.16) y las etapas previas la ACHICAN,
   así el navegador no tiene que agrandar una imagen ya rasterizada (eso la dejaba borrosa). */
.cvv-card { zoom: 1.16; transform: scale(.6) rotateY(0deg); }
.cvv-scene.is-in .cvv-card { transform: scale(.862) rotateY(0deg); }
.cvv-scene.is-flip .cvv-card { transform: scale(.88) rotateY(180deg); }
.cvv-scene.is-zoom .cvv-card { transform: scale(1) rotateY(180deg); }
.cvv-scene.is-zoom .cvv-face { -webkit-font-smoothing: antialiased; }

/* =====================================================================
   Celular: catálogo liviano y plano (sin desenfoques, grano, degradés, sombras ni animaciones).
   Se mantienen a propósito: el aviso de cookies, la ventana de suscripción y la tarjeta del CVV.
   ===================================================================== */
@media (max-width: 760px) {
  body:not(.panel-body) { background-image: none; background-attachment: scroll; background-color: #fffdf8; }

  /* Cabecera */
  body:not(.panel-body) .site-header { box-shadow: 0 1px 0 var(--line); }
  body:not(.panel-body) .site-header::before { -webkit-backdrop-filter: none; backdrop-filter: none; background-image: none; background-color: #fffdf8; }
  body:not(.panel-body) .brand__logo { filter: none; }
  body:not(.panel-body) .brand::before { display: none; }

  /* Tarjetas, categorías, banners */
  body:not(.panel-body) .card,
  body:not(.panel-body) .carousel .card { background: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: none; }
  body:not(.panel-body) .card:hover,
  body:not(.panel-body) .carousel .card:hover { transform: none; box-shadow: none; }
  body:not(.panel-body) .cat-card__media { background: #fff; box-shadow: none; transition: none; }
  body:not(.panel-body) .cat-card:hover .cat-card__media { transform: none; box-shadow: none; }
  body:not(.panel-body) .banner { box-shadow: none; }

  /* Botones: planos y sin brillo animado (el brillo de "Ver pedido", "Cerrar compra" y las tarjetas) */
  body:not(.panel-body) .btn--search { box-shadow: none; background: var(--accent); transition: none; }
  body:not(.panel-body) .btn--plain { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cart-cta::after, .cart-drawer__foot .btn--search::after, .card .btn--search::after, .grid-more .btn--search::after,
  .brand__logo-mask::after, .header-acceder__mask::after { animation: none !important; display: none; }
  .grid-more .btn--search, .grid-more .btn--search:hover { transform: none; transition: none; }
  body:not(.panel-body) .carousel-nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fffdf8; }

  /* Carrito lateral, mini-carrito y panel de acceso */
  body:not(.panel-body) .cart-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(30, 24, 10, .45); }
  body:not(.panel-body) .cart-drawer { background-image: none; background-color: #fffdf8; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 0; }
  body:not(.panel-body) .cart-drawer__foot { background: #fffdf8; }
  body:not(.panel-body) .cart-drawer__item { background: #fff; }
  body:not(.panel-body) .mini-cart__panel { background-image: none; background-color: #fffdf8; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }

  /* Checkout */
  body:not(.panel-body) .ck-summary { background-image: none; background-color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }

  /* Pie de página */
  body:not(.panel-body) .site-footer { background-image: none; background-color: #f7f2e7; }
}
@media (max-width: 760px) {
  body:not(.panel-body) .header-acceder, body:not(.panel-body) .header-acceder__mask { filter: none; box-shadow: none; }
  body:not(.panel-body) .btn--banner { box-shadow: none; }
  body:not(.panel-body) .banner--img .banner__txt { text-shadow: none; }
  body:not(.panel-body) .wa-float { box-shadow: none; }
}

/* =====================================================================
   Celular estilo "app de compras": cabecera compacta, categorías en pestañas debajo,
   banner prolijo, categorías redondas y productos en 2 columnas.
   ===================================================================== */
.m-cats { display: none; }
@media (max-width: 760px) {
  /* Cabecera compacta: logo + acceso arriba, buscador debajo */
  body:not(.panel-body) .site-header__inner { gap: 10px 12px; padding: 8px 12px 10px; flex-wrap: wrap; }
  body:not(.panel-body) .brand__logo { height: 46px; }
  body:not(.panel-body) .site-header__actions { margin-left: auto; gap: 8px; }
  body:not(.panel-body) .site-header__inner .search { order: 3; flex: 1 0 100%; margin: 0; }
  body:not(.panel-body) .search__input { height: 42px; font-size: 15px; }
  body:not(.panel-body) .header-acceder__mask img { height: 36px; width: auto; }
  body:not(.panel-body) .cart-cta { height: 36px; font-size: 14px; }
  body:not(.panel-body) .topbar__item { font-size: 13px; }
  body:not(.panel-body) .topbar__inner { padding: 5px 12px; }

  /* Pestañas de categorías (se deslizan a los costados), pegadas a la cabecera */
  .m-cats { display: flex; gap: 4px; overflow-x: auto; padding: 0 8px; border-top: 1px solid var(--line); background: #fffdf8;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .m-cats::-webkit-scrollbar { display: none; }
  .m-cats__a { flex: none; padding: 11px 10px 9px; font-size: 15px; color: #4a4336; border-bottom: 3px solid transparent; white-space: nowrap; }
  .m-cats__a.is-on { color: #2a2113; font-weight: 600; border-bottom-color: var(--accent); }

  /* Banner: ancho completo, prolijo y bajo */
  body:not(.panel-body) .banner { margin: 10px 0 14px; border-radius: 14px; }
  body:not(.panel-body) .banner--portada, body:not(.panel-body) .banner { min-height: 0; padding: 18px 16px; gap: 10px; }
  body:not(.panel-body) .banner--portada .banner__title, body:not(.panel-body) .banner__title { font-size: 22px; line-height: 1.15; }
  body:not(.panel-body) .banner__eyebrow { font-size: 22px; margin-bottom: 0; }
  body:not(.panel-body) .banner__sub { font-size: 13.5px; margin: 4px 0 0; }
  body:not(.panel-body) .banner--portada .btn--banner { margin-top: 10px; height: 38px; padding: 0 16px; font-size: 14px; }
  body:not(.panel-body) .banner__icon { display: none; }

  /* Categorías: fila de íconos redondos, como en las apps */
  body:not(.panel-body) .carousel-wrap > h2 { font-size: 18px; margin: 6px 0 8px; }
  body:not(.panel-body) .cat-card { flex: 0 0 72px; align-items: center; text-align: center; gap: 6px; }
  body:not(.panel-body) .cat-card__media { width: 66px; height: 66px; border-radius: 50%; aspect-ratio: auto; overflow: hidden; padding: 0; }
  body:not(.panel-body) .cat-card__media img { width: 100%; height: 100%; object-fit: cover; }
  body:not(.panel-body) .cat-card__name { font-size: 12px; line-height: 1.2; }
  body:not(.panel-body) .carousel-viewport[data-static] .carousel { gap: 12px; }
  body:not(.panel-body) .carousel-viewport[data-static] .carousel-nav { display: none; }

  /* Productos: 2 columnas parejas y compactas */
  body:not(.panel-body) .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body:not(.panel-body) .carousel .card { flex: 0 0 calc((100% - 10px) / 2); }
  body:not(.panel-body) .card__name { font-size: 14px; }
  body:not(.panel-body) .card__price { font-size: 18px; }
  body:not(.panel-body) .catalog-full, body:not(.panel-body) .content { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 420px) { body:not(.panel-body) .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  body:not(.panel-body) .catalog-full { padding-left: 0; padding-right: 0; }
  body:not(.panel-body) .carousel-wrap { margin-top: 6px; margin-bottom: 8px; }
  body:not(.panel-body) .carousel-wrap > h2 { margin-top: 2px; }
}

/* Celular: logo centrado arriba del buscador; el carrito ("Ver pedido") flota abajo al centro, sin molestar */
@media (max-width: 760px) {
  body:not(.panel-body) .site-header__inner { position: relative; justify-content: center; padding-top: 8px; }
  body:not(.panel-body) .site-header__inner > .brand { flex: 1 0 100%; justify-content: center; }
  body:not(.panel-body) .brand__logo { height: 52px; }
  body:not(.panel-body) .site-header__actions { position: absolute; top: 10px; right: 12px; margin: 0; }

  /* Carrito flotante abajo al centro */
  body:not(.panel-body) .mini-cart { position: fixed; left: 50%; bottom: 14px; z-index: 80; margin: 0; transform: translateX(-50%); }
  body:not(.panel-body) .mini-cart > .cart-cta { width: auto; height: 44px; padding: 0 20px; box-shadow: 0 3px 10px rgba(0, 0, 0, .22); }
  /* Su globito aparece hacia arriba, centrado sobre la cápsula */
  body:not(.panel-body) .mini-cart__panel { top: auto; bottom: calc(100% + 12px); left: 50%; right: auto; margin-left: calc(min(300px, 100vw - 24px) / -2);
    transform-origin: bottom center; }
  body:not(.panel-body) .mini-cart__panel::before { top: auto; bottom: -7px; left: calc(50% - 7px); right: auto; border-radius: 0 0 2px 0; }
  /* Que no tape el final de la página ni el botón de WhatsApp */
  body:not(.panel-body):has(.mini-cart) { padding-bottom: 72px; }
  body:not(.panel-body):has(.mini-cart) .wa-float { bottom: 76px; }
}
@media (max-width: 760px) { body:not(.panel-body) .wa-float { z-index: 60; } }

/* Celular: la sección "Categorías" de íconos se quita (ya están en las pestañas debajo de la cabecera) */
@media (max-width: 760px) { body:not(.panel-body) .carousel-wrap:has(.cat-card) { display: none; } }