/* =============================================================
   PALETA DE COLOR — "Spa Editorial"
   Estilo cálido y editorial: crema, salvia y terracota apagada.
   ============================================================= */

:root {
  --color-bg: #fdfaf5;
  --color-surface: #ffffff;
  --color-text: #2d2926;
  --color-text-soft: #7a756e;
  --color-primary: #2d2926;
  --color-primary-dark: #000000;
  --color-accent: #b8705f;
  --color-border: #e8e2d9;
  --font-display: "Libre Baskerville", Baskerville, "Baskerville Old Face", Georgia, "Times New Roman", serif;
  --font-body: "Gantari", "Segoe UI", Arial, sans-serif;
  --color-nav-bg: #2d2926;
  --color-nav-text: #f5f5f4;
}

/* box-sizing: que el borde y el relleno cuenten dentro del ancho.

   touch-action: apaga el "doble toque para acercar" del navegador.

   Va en el selector universal (*) a propósito, y no en body: esta
   propiedad NO se hereda. Ponerla solo en el cuerpo de la página deja a
   todos los elementos de adentro en "auto", así que el doble toque
   seguía ampliando sobre la foto, sobre el texto y sobre el fondo. Ese
   fue el error de los dos intentos anteriores.

   El pellizco con dos dedos sigue funcionando, que es el gesto
   deliberado y el que sirve para leer la etiqueta de un producto. Lo que
   se apaga es el accidente de tocar dos veces al querer desplazar. */
* {
  box-sizing: border-box;
  touch-action: manipulation;
}

/* Los navegadores de celular reescalan el texto por su cuenta cuando esto
   no está declarado: miran el ancho de cada bloque y agrandan o achican
   las letras a su criterio. En un monitor no pasa nunca, así que es un
   problema que solo se ve en el teléfono.

   El efecto es raro de describir: como la foto del producto ocupa el
   100% del ancho y no se toca, pero el texto de al lado se achica solo,
   parece que la imagen creciera y el resto se encogiera.

   Con 100% le decimos al navegador que no toque nada: el sitio ya está
   pensado para pantallas chicas y los tamaños son los que elegimos. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  transition: background 0.2s ease, color 0.2s ease;

}

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

.hidden { display: none !important; }

/* ---------- Barra de anuncio ---------- */

.promo-bar {
  background: color-mix(in srgb, var(--color-accent) 16%, white);
  color: var(--color-text);
  text-align: center;
  font-size: 0.8rem;
  padding: 8px 16px;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-surface);
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 10px;
  gap: 12px;
  padding: 16px 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.brand span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand svg { width: 34px; height: 34px; }

/* El logo es de trazo fino: por debajo de ~40px las hojas se empastan,
   así que lo mostramos algo más grande que el cuadrado que reemplazó. */
.brand__logo {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .brand__logo { width: 38px; height: 38px; }
}

.cart-toggle {
  position: relative;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-toggle:hover { background: var(--color-primary-dark); }

.cart-badge {
  background: var(--color-accent);
  color: white;
  border-radius: 999px;
  font-size: 0.75rem;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- Cuenta / login ---------- */

.auth-area { position: relative; }

.auth-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 9px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
}

.auth-trigger svg { width: 18px; height: 18px; flex-shrink: 0; }
.auth-trigger:hover { border-color: var(--color-primary); }

#auth-trigger-label {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 25;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  min-width: 190px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-menu__item {
  display: block;
  text-align: left;
  text-decoration: none;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 10px 10px;
  font-size: 0.88rem;
  color: var(--color-text);
  cursor: pointer;
}

.account-menu__item:hover { background: var(--color-bg); }

/* ---------- Modal de login / registro ---------- */

.auth-card {
  background: var(--color-surface);
  border-radius: 24px;
  overflow: hidden;
}

/* ---------- Columna del formulario ---------- */

.auth-panel { padding: 28px 30px 26px; min-width: 0; }

.auth-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.auth-panel__title {
  margin: 22px 0 18px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
}

.auth-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  margin: -2px -6px 0 0;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-soft);
  cursor: pointer;
}

.auth-close:hover { background: var(--color-bg); color: var(--color-text); }

.auth-warning {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 14px;
  margin: 20px 0 0;
  font-size: 0.88rem;
  color: var(--color-text-soft);
}

/* ---------- Pestanas ---------- */

.auth-tabs { display: flex; gap: 10px; }

.auth-tab {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 8px 15px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-text-soft);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.auth-tab:hover { background: var(--color-bg); }

.auth-tab.is-active {
  background: color-mix(in srgb, var(--color-accent) 12%, white);
  border-color: var(--color-accent);
  color: color-mix(in srgb, var(--color-accent) 78%, black);
  font-weight: 600;
}

/* ---------- Campos ---------- */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 0.85rem;
  color: var(--color-text-soft);
}

/* El texto de la etiqueta, en versalitas. Va en su propio <span> y no
   suelto dentro del <label> porque el de contrasena comparte la linea
   con el enlace de "La olvidaste?", que no lleva este estilo. */
.auth-label {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  /* Alinea con el texto de adentro del campo, que ahora es una pildora
     y tiene la curva comiendose el borde izquierdo. */
  padding-left: 16px;
}

.auth-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-right: 16px;
}

.auth-form input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 0.95rem;
  font-family: var(--font-body);
  color: var(--color-text);
  background: #ffffff;
  transition: border-color 0.15s ease;
}

.auth-form input::placeholder { color: color-mix(in srgb, var(--color-text-soft) 70%, white); }
.auth-form input:hover { border-color: color-mix(in srgb, var(--color-text-soft) 50%, white); }
.auth-form input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent); }

/* El boton principal sigue siendo el negro solido de toda la tienda;
   solo se redondea para acompanar a los campos. */
.auth-form .btn { border-radius: 999px; padding: 13px 18px; margin-top: 6px; }

/* Aviso de "Minimo 8 caracteres" debajo del campo de contrasena.
   Va dentro del <label>, que ya es una columna flex, asi que queda
   pegado al campo sin necesidad de margenes propios. Sirve tanto en
   el modal de cuenta (.auth-form) como en las paginas (.form). */
.password-hint {
  font-size: 0.75rem;
  color: var(--color-text-soft);
}

/* En el modal los campos son pildoras, asi que el aviso se corre para
   alinear con el texto de adentro y no con el borde curvo. */
.auth-form .password-hint { padding-left: 16px; }

/* Boton "Continuar con Google".
   Google no deja recolorear su logo ni cambiarle la forma, asi que este
   boton se queda blanco a proposito y no usa la paleta del sitio. Es la
   unica pieza de la tienda que no sigue el estilo, y esta bien: el
   cliente lo reconoce de otras paginas justamente porque es igual en
   todas. */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.btn-google:hover:not(:disabled) { background: var(--color-bg); border-color: var(--color-primary); }
.btn-google:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* Mientras Google responde. Sin esto se puede tocar dos veces y se
   abren dos ventanas. */
.btn-google:disabled { opacity: 0.6; cursor: default; }

/* El logo no se achica aunque el texto sea largo. */
.btn-google svg { flex-shrink: 0; }

/* Separador con la palabra en el medio: las dos rayas se estiran solas
   para llenar lo que sobra a cada lado del texto. */
.auth-separador {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--color-text-soft);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.auth-separador::before,
.auth-separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.auth-forgot-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-accent);
  text-decoration: underline;
  cursor: pointer;
}

.auth-forgot-link:hover { color: var(--color-text); }

.auth-error {
  margin: 0;
  padding-left: 16px;
  font-size: 0.8rem;
  color: #d92d20;
}

.auth-info {
  margin: 0;
  padding-left: 16px;
  font-size: 0.8rem;
  color: var(--color-primary-dark);
}

.auth-legal {
  margin: 14px 0 0;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--color-text-soft);
}

.auth-legal a { color: var(--color-accent); }

/* ---------- En el celular ---------- */

@media (max-width: 720px) {
  .modal--auth { width: 94vw; border-radius: 20px; }
  .auth-card { border-radius: 20px; }
  .auth-panel { padding: 22px 22px 24px; }
  .auth-panel__title { margin: 18px 0 14px; }
}

/* ---------- Formulario genérico (libro de reclamaciones, etc.) ---------- */

.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--color-text-soft);
}

.form input,
.form textarea {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-surface);
  resize: vertical;
}

.form input:focus,
.form textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

/* Un campo bloqueado tenía el mismo aspecto que uno editable, así que
   parecía que se podía escribir en él. Ahora se ve claramente fijo. */
.form input:disabled,
.form textarea:disabled {
  background: color-mix(in srgb, var(--color-border) 35%, var(--color-bg));
  border-style: dashed;
  color: var(--color-text-soft);
  cursor: not-allowed;
}

.form__nota {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--color-text-soft);
}

.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.form__radios {
  display: flex;
  gap: 20px;
  font-size: 0.9rem;
  color: var(--color-text);
}

.form__radios label {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.form__section-title {
  margin: 10px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-soft);
}

/* ---------- Página "Mi cuenta" ---------- */

.account-page {
  max-width: 640px;
  margin: 36px auto 70px;
  padding: 0 20px;
}

.account-page__loading {
  color: var(--color-text-soft);
  font-size: 0.95rem;
}

.account-page__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.account-page__avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-page__header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  margin: 0;
}

.account-page__email { margin: 2px 0 0; font-size: 0.9rem; color: var(--color-text-soft); }

.account-page__unverified {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: #b45309;
}

.account-page__unverified button {
  background: none;
  border: none;
  padding: 0;
  margin-left: 4px;
  font-size: 0.82rem;
  color: var(--color-primary-dark);
  text-decoration: underline;
  cursor: pointer;
}

.account-page__unverified button:disabled { cursor: default; opacity: 0.7; }

.account-card {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 20px;
}

.account-card h2 {
  margin: 0 0 4px;
  font-size: 1.02rem;
}

.account-card__hint {
  margin: 0 0 16px;
  font-size: 0.85rem;
  color: var(--color-text-soft);
}

.account-card .form { margin-top: 16px; }

.account-feedback {
  margin: 0;
  font-size: 0.85rem;
}

.account-feedback--ok { color: var(--color-primary-dark); }
.account-feedback--error { color: #d92d20; }


.modal__body h3 { font-size: 0.95rem; margin: 0 0 10px; }

.account-order {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.account-order__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--color-text-soft);
  margin-bottom: 4px;
}

.account-order__estado {
  text-transform: capitalize;
  background: var(--color-bg);
  border-radius: 999px;
  padding: 1px 8px;
}

.account-order__items { margin: 0; font-size: 0.88rem; }
.account-order__total { margin: 4px 0 0; font-weight: 700; }

/* ---------- Mega menú ---------- */

.mega-nav {
  position: relative;
  background: var(--color-nav-bg);
}

.mega-nav__row {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 12px;
  overflow-x: auto;
}

.mega-nav__item { position: static; }

.mega-nav__trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 13px 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-nav-text);
  cursor: pointer;
  white-space: nowrap;
}

.mega-nav__trigger:hover,
.mega-nav__item.is-open .mega-nav__trigger {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.mega-nav__chevron {
  font-size: 0.65rem;
  color: color-mix(in srgb, var(--color-nav-text) 55%, transparent);
  transition: transform 0.2s ease;
}

.mega-nav__item.is-open .mega-nav__chevron { transform: rotate(180deg); }

.mega-nav__panel-host {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 35;
}

.mega-nav__panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-width: 1100px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.12);
  padding: 22px 26px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.mega-nav__panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-nav__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.mega-nav__panel-head h3 { margin: 0; font-size: 1rem; }

.mega-nav__panel-viewall {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
}

.mega-nav__panel-viewall:hover { text-decoration: underline; }

.mega-nav__panel-grid {
  display: grid;
  /* Un poco más ancho que antes: ahora cada fila lleva la miniatura al lado
     del nombre, y con 190px los nombres largos se partían en tres líneas. */
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2px 16px;
}

.mega-nav__panel-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 10px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.12s ease;
}

.mega-nav__panel-link:hover { background: var(--color-bg); }
.mega-nav__panel-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.mega-nav__panel-link-img {
  flex: none;
  width: 42px;
  height: 42px;
  /* contain y no cover: son fotos de producto sobre fondo blanco, recortarlas
     les cortaría el envase. */
  object-fit: contain;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 3px;
}

/* min-width: 0 para que el nombre largo se pueda achicar en vez de empujar
   la miniatura fuera de la fila. */
.mega-nav__panel-link-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.mega-nav__panel-link-name {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text);
}

.mega-nav__panel-link-price {
  font-size: 0.8rem;
  color: var(--color-text-soft);
}

.mega-nav__panel-empty {
  color: var(--color-text-soft);
  font-size: 0.9rem;
}

/* En pantallas táctiles el menú no despliega nada: tocar una categoría
   lleva directo a esa categoría. La flechita de "acá se abre algo" sobra,
   y prometiéndola de más confunde. */
@media (hover: none) {
  .mega-nav__chevron { display: none; }
  .mega-nav__panel { display: none !important; }
}

/* ---------- Carrusel de destacados ---------- */
/* A todo el ancho de la ventana (sin los 20px de margen que usa el resto del
   contenido) — 3 paneles: el activo al centro, y a los costados se "asoma"
   el producto anterior/siguiente. Cada panel es la foto de fondo completa
   con un degradé y el texto encima, como el resto de la página que sirvió
   de referencia. */

.carousel {
  position: relative;
  width: 100%;
  margin: 0;
  scroll-margin-top: 130px;
}

.carousel__viewport {
  display: flex;
  gap: 4px;
  height: clamp(340px, 42vw, 560px);
}

/* Paneles laterales: se "asoma" el producto anterior/siguiente, clickeables */
.carousel__peek {
  flex: 0 0 18%;
  min-width: 0;
  border: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: var(--color-border);
}

.carousel__peek img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  transition: opacity 0.2s ease, transform 0.3s ease;
}

.carousel__peek:hover img {
  opacity: 1;
  transform: scale(1.05);
}

.carousel__peek::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 55%);
}

.carousel__peek-label {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
}

/* Panel principal: foto de fondo completa, texto superpuesto a la izquierda */
.carousel__main {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.carousel__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel__main::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 42%, rgba(0, 0, 0, 0) 68%);
}

/* La imagen ya trae su propio texto dibujado adentro — sin degradé oscuro encima */
.carousel__main--image-only::after {
  background: none;
}

.carousel__main-text {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  max-width: 62%;
  padding: clamp(20px, 3vw, 44px);
}

.carousel__badge {
  align-self: flex-start;
  background: var(--color-accent);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 4px;
}

.carousel__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.carousel__rule {
  width: 40px;
  height: 2px;
  margin: 2px 0 4px;
  border: none;
  background: var(--color-accent);
}

.carousel__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.carousel__price {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
}

.carousel__price--old {
  font-weight: 400;
  opacity: 0.75;
  text-decoration: line-through;
  margin-right: 8px;
  color: rgba(255, 255, 255, 0.8);
}

.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.carousel__arrow:hover { background: #ffffff; }
.carousel__arrow--prev { left: 8px; }
.carousel__arrow--next { right: 8px; }

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}

.carousel__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: var(--color-border);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, width 0.2s ease;
}

.carousel__dot.is-active {
  background: var(--color-accent);
  width: 20px;
  border-radius: 4px;
}

@media (max-width: 720px) {
  .carousel__peek {
    display: none;
  }

  .carousel__viewport {
    height: 300px;
  }

  .carousel__main-text {
    max-width: 78%;
    padding: 20px;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(380px, 46vw, 540px);
  padding: 56px 20px 80px;
  margin-top: 28px;
  background: var(--color-bg);
}

/* Video de fondo del hero: se "apaga" con un degradé hacia el color de
   fondo de la página, así no queda un corte feo al llegar al catálogo. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Antes acá había un video de fondo de 13,8 MB que se descargaba de un
   servidor ajeno (el de la herramienta con la que se generó) en cada
   visita a la portada. Dos problemas: le quemaba los datos del celular a
   cada clienta, y el día que ese servidor borrara el archivo la portada
   quedaba en negro sin que nos enteráramos.
   Ahora es un cuadro fijo del mismo video, alojado acá, de 88 KB. Como
   el fondo es abstracto y casi no se movía, se ve prácticamente igual. */
.hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.5) 62%,
    var(--color-bg) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 1;
}

.hero h1 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4.5vw, 2.7rem);
  color: #ffffff;
}

.hero__rule {
  width: 64px;
  height: 2px;
  margin: 0 auto 18px;
  background: var(--color-accent);
  border: none;
}

.hero p {
  margin: 0 0 26px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
}

.hero__cta {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  background: #ffffff;
  color: #111111;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.hero__cta:hover {
  background: var(--color-accent);
  color: #ffffff;
  transform: translateY(-1px);
}

/* ---------- Página de producto individual ---------- */
/* Paleta cálida (crema + verde salvia), solo en esta página. */

body.page-product {
  background: #faf7ef;
}

.breadcrumb {
  max-width: 1100px;
  margin: 16px auto 0;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--color-text-soft);
}

.breadcrumb a {
  color: var(--color-text-soft);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.product-detail {
  display: grid;
  /* minmax(0, 1fr) y no 1fr a secas.
     "1fr" en realidad quiere decir "minmax(auto, 1fr)", y ese "auto"
     significa: como minimo, lo que mida el contenido. Con un recuadro de
     proporcion fija adentro eso se muerde la cola —la foto define el
     ancho, el ancho define el alto, el alto vuelve a definir la foto— y
     en el motor de Safari (que en iPhone usan TODOS los navegadores,
     Brave incluido) el calculo se desboca: medido en un iPhone, la foto
     paso de 390 a 9332 pixeles cambiando de tamaño 191 veces.
     El 0 como minimo corta esa cadena. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  max-width: 1100px;
  margin: 16px auto 60px;
  padding: 0 20px;
  align-items: start;
}

.product-detail__gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Misma razon que arriba: un elemento flex trae min-width: auto, que
     tambien deja que el contenido empuje el ancho sin techo. */
  min-width: 0;
}

/* La columna del texto es el otro hijo de la rejilla y trae el mismo
   min-width: auto. Una palabra larga o una tabla ancha podrian empujarla
   fuera de la pantalla igual que la foto. */
.product-detail__info {
  min-width: 0;
}

.product-detail__image-card {
  position: relative;
  /* El techo explicito es la otra mitad del arreglo del desborde.
     Al acotar la rejilla con minmax(0, ...) la columna ya no se estira
     para acomodar lo que tenga adentro; entonces, si la tarjeta calcula
     un ancho mayor, se sale por la derecha y se ve cortada. Con esto no
     puede pasarse nunca del ancho de su columna. */
  width: 100%;
  max-width: 100%;
  aspect-ratio: 3 / 4;
  background: #ffffff;
  border: 1px solid #ece7d9;
  border-radius: 20px;
  padding: 28px;
}

.product-detail__image-card img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

.product-detail__thumbs {
  display: flex;
  gap: 10px;
}

.product-detail__thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 12px;
  border: 1.5px solid #ece7d9;
  background: #ffffff;
  overflow: hidden;
  cursor: pointer;
}

.product-detail__thumb.is-active {
  border-color: #2c4a32;
}

.product-detail__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-detail__category {
  display: inline-block;
  background: #dceadd;
  color: #2c4a32;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  margin: 0 0 14px;
}

.product-detail__info h1 {
  font-family: var(--font-display);
  margin: 0 0 14px;
  font-size: 1.7rem;
  line-height: 1.25;
}

.product-detail__price {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.product-detail__price-old {
  font-weight: 400;
  opacity: 0.6;
  text-decoration: line-through;
  font-size: 1rem;
  margin-right: 8px;
}

.product-detail__desc {
  color: var(--color-text-soft);
  line-height: 1.6;
  margin-bottom: 26px;
  max-width: 42ch;
}

.product-detail__stock {
  /* Tira del renglón hacia arriba, pegado al precio, sin mover nada
     cuando está oculto (productos sin dato de stock cargado todavía). */
  margin: -14px 0 20px;
  font-size: 0.82rem;
  color: var(--color-text-soft);
}

.product-detail__stock--out {
  color: #d92d20;
  font-weight: 600;
}

.product-detail__buy-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.product-detail__buy-row .btn {
  flex: 1;
}

.stepper--lg {
  flex-shrink: 0;
  padding: 8px;
}

.stepper--lg .stepper__btn {
  width: 34px;
  height: 34px;
  font-size: 1.2rem;
}

.product-detail__in-cart {
  margin-top: 10px;
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: 0.9rem;
}

.accordion {
  margin-top: 30px;
}

.accordion__item {
  border-top: 1px solid var(--color-border);
}

.accordion__item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
}

.accordion__icon {
  font-size: 1.1rem;
  color: var(--color-text-soft);
}

.accordion__panel {
  display: none;
  padding: 0 0 16px;
  color: var(--color-text-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}

.accordion__item.is-open .accordion__panel {
  display: block;
}

.plan-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #1f3d2b;
  color: #ffffff;
  border-radius: 14px;
  padding: 16px 20px;
  margin-top: 18px;
  margin-bottom: 30px;
}

.plan-banner__title {
  margin: 0 0 2px;
  font-weight: 700;
  font-size: 0.95rem;
}

.plan-banner__text {
  margin: 0;
  font-size: 0.85rem;
  color: #cfe0d1;
}

.plan-banner__cta {
  flex-shrink: 0;
  background: #ffffff;
  color: #1f3d2b;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 9px 16px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}

.plan-banner__cta:hover {
  background: #f0f0f0;
}

.specs-table {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.specs-table__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.specs-table__row dt {
  font-weight: 700;
  color: var(--color-text);
}

.specs-table__row dd {
  margin: 0;
  text-align: right;
}

.product-detail__not-found {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 20px;
}

.product-detail__not-found .btn {
  display: inline-flex;
  margin-top: 16px;
}

.related-products {
  max-width: 1100px;
  margin: 0 auto 60px;
  padding: 0 20px;
}

.related-products h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0 0 18px;
}

.related-products .product-grid {
  padding: 0;
  max-width: none;
  margin: 0;
}

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

/* ---------- Páginas de contenido (legal, contacto) ---------- */

.content-page {
  max-width: 720px;
  margin: 36px auto 70px;
  padding: 0 20px;
}

.content-page h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  margin: 0 0 8px;
}

.content-page__updated {
  margin: 0 0 24px;
  font-size: 0.82rem;
  color: var(--color-text-soft);
}

.content-page h2 {
  font-size: 1.05rem;
  margin: 32px 0 10px;
}

.content-page p,
.content-page li {
  color: var(--color-text-soft);
  line-height: 1.7;
  font-size: 0.95rem;
}

.content-page ul {
  padding-left: 20px;
  margin: 0 0 16px;
}

.legal-notice {
  background: color-mix(in srgb, #d97706 12%, var(--color-surface));
  border: 1px solid color-mix(in srgb, #d97706 35%, transparent);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 30px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text);
}

.legal-notice strong {
  display: block;
  margin-bottom: 4px;
}

/* ---------- Página de contacto ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.contact-card {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 20px;
}

.contact-card h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.contact-card p {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ---------- Página "en construcción" ---------- */

.construction-page {
  text-align: center;
}

.construction-page__doodle {
  width: 190px;
  margin: 0 auto 22px;
}

.construction-page__doodle svg {
  width: 100%;
  height: auto;
  display: block;
}

.construction-page p {
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

.construction-page__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* ---------- Página de planes mensuales ---------- */

.plans-hero {
  max-width: 640px;
  margin: 36px auto 8px;
  padding: 0 20px;
  text-align: center;
}

.plans-hero h1 {
  font-family: var(--font-display);
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
}

.plans-hero p {
  margin: 0;
  color: var(--color-text-soft);
  line-height: 1.6;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 36px auto 70px;
  padding: 0 20px;
  align-items: start;
}

.plan-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #ece7d9;
  border-radius: 18px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}

.plan-card--highlight {
  border-color: #2c4a32;
  box-shadow: 0 12px 30px -12px rgba(44, 74, 50, 0.35);
}

.plan-card__ribbon {
  position: absolute;
  top: -12px;
  left: 24px;
  background: #2c4a32;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}

.plan-card__name {
  margin: 6px 0 4px;
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.plan-card__discount {
  margin: 0 0 10px;
  font-size: 2rem;
  font-weight: 700;
  color: #2c4a32;
}

.plan-card__discount span {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-soft);
}

.plan-card__tagline {
  margin: 0 0 18px;
  color: var(--color-text-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}

.plan-card__features {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.plan-card__features li {
  padding-left: 22px;
  position: relative;
  font-size: 0.88rem;
  line-height: 1.4;
}

.plan-card__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #2c4a32;
  font-weight: 700;
}

/* ---------- Página de catálogo (filtros) ---------- */

.catalog {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  max-width: 1100px;
  margin: 28px auto 60px;
  padding: 0 20px;
  align-items: start;
}

.catalog__filters {
  position: sticky;
  top: 130px;
}

.catalog__filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.catalog__filters-head h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0;
}

.catalog__filters-close {
  display: none;
}

.catalog__filters-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-family: var(--font-body);
  color: var(--color-text);
  cursor: pointer;
}

.filter-group {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.filter-group h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-soft);
  margin: 0 0 10px;
  font-weight: 700;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  padding: 5px 0;
  cursor: pointer;
}

.filters-clear {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.82rem;
  color: var(--color-text-soft);
  cursor: pointer;
}

.filters-clear:hover {
  border-color: var(--color-primary);
  color: var(--color-text);
}

.catalog__title {
  font-family: var(--font-display);
  margin: 0 0 18px;
  font-size: 1.6rem;
}

.catalog__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.catalog__count {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.9rem;
}

.catalog__sort {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  background: var(--color-surface);
  color: var(--color-text);
}

.catalog__main .product-grid {
  padding: 0;
  max-width: none;
  margin: 0;
}

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

  /* El logo se queda también en el catálogo y en favoritos. Estuvo oculto
     un tiempo para ganar espacio, pero sin él esas dos páginas perdían de
     dónde son y el camino de vuelta a la portada, que es justamente lo que
     hace el logo. Solo se achica un poco. */
  .site-header--catalog .brand { gap: 8px; }
  .site-header--catalog .brand__logo { width: 34px; height: 34px; }
  .site-header--catalog .brand span { font-size: 1.05rem; }

  .catalog__filters-toggle {
    display: flex;
    order: 1;
  }

  .catalog__sort {
    order: 2;
    margin-left: auto;
  }

  .catalog__count {
    order: 3;
    flex-basis: 100%;
  }

  /* El panel de filtros se convierte en un cajón deslizable, igual que el carrito */
  .catalog__filters {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 45;
    width: min(300px, 85vw);
    background: var(--color-surface);
    padding: 20px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  .catalog__filters.is-open {
    transform: translateX(0);
  }

  .catalog__filters-close {
    display: block;
    font-size: 1.2rem;
  }
}

/* ---------- Grid de productos ---------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
  padding: 0 20px 60px;
  max-width: 1100px;
  margin: 0 auto;
  scroll-margin-top: 130px;
}

/* ---------- Portada agrupada por categorías ---------- */

.product-sections {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 0 40px;
}

.product-section {
  scroll-margin-top: 130px;
}

.product-section + .product-section {
  border-top: 1px solid var(--color-border);
  padding-top: 30px;
}

.product-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0 20px;
  margin-bottom: 16px;
}

.product-section__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

.product-section__head h2 span {
  margin-right: 4px;
  font-size: 0.95em;
}

.product-section__link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
}

.product-section__link:hover { text-decoration: underline; }

/* Dentro de una sección la grilla no repite el espacio de abajo */
.product-grid--flush {
  padding-bottom: 34px;
}

@media (max-width: 480px) {
  .product-section__head h2 { font-size: 1.1rem; }
}

@media (max-width: 480px) {
  .product-grid {
    /* minmax(0, ...) por lo mismo que en .product-detail: estas tarjetas
       tambien llevan proporcion fija, y con "1fr" a secas el ancho puede
       dispararse en el motor de Safari. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

.empty-msg {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-text-soft);
  padding: 40px 0;
}

.product-card {
  background: none;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease, outline-color 0.3s ease, transform 0.2s ease;
  outline: 3px solid transparent;
  outline-offset: 4px;
}

/* El diseño nuevo levanta apenas la tarjeta y profundiza el relieve, en
   vez del salto de 3px que teníamos. Queda más contenido. */
.product-card:hover {
  transform: translateY(-1px);
}

.product-card:hover .product-card__image {
  box-shadow:
    0 1px 2px rgba(32, 31, 29, 0.1),
    0 8px 18px rgba(32, 31, 29, 0.13),
    0 18px 34px rgba(32, 31, 29, 0.08),
    inset 0 1px 0 #fff;
}

.product-card--flash {
  outline-color: var(--color-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

/* Diseño de tarjeta hecho en Claude Design (septiembre 2026).
   Tres cambios respecto de lo anterior:
     - el fondo pasa de crema a blanco, así las fotos de producto (que
       vienen con fondo blanco) dejan de recortarse contra el recuadro
     - esquinas menos redondeadas y menos aire adentro
     - relieve permanente en capas, en vez de sombra solo al pasar el mouse */
.product-card__image {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  background: #ffffff;
  border: 1px solid rgba(32, 31, 29, 0.06);
  border-radius: 10px;
  overflow: hidden;
  /* En el diseño el recuadro mide 167px con 12px de aire adentro.
     Como en la web la tarjeta cambia de ancho según la pantalla (de
     155px en celular a ~290px en monitor), lo ponemos en porcentaje:
     así se mantiene la misma proporción que diseñaste en todos lados. */
  padding: 7%;
  box-shadow:
    0 1px 2px rgba(32, 31, 29, 0.09),
    0 5px 12px rgba(32, 31, 29, 0.1),
    0 12px 22px rgba(32, 31, 29, 0.05),
    inset 0 1px 0 #fff;
  transition: box-shadow 180ms ease;
}

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

.product-card__name-link:hover {
  text-decoration: underline;
}

/* Pastilla clara con borde dorado, en vez del bloque terracota sólido.
   El icono va dibujado (no emoji) para que tome el color del texto. */
.product-card__badge {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f3ede2;
  border: 1px solid #e0a33f;
  color: #8a5a12;
  border-radius: 999px;
  padding: 3px 10px 3px 8px;
  font-family: var(--font-display);
  font-size: 0.69rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}

.product-card__badge-icon {
  flex-shrink: 0;
  color: #c07a1c;
}

.product-card__price-old {
  font-weight: 400;
  opacity: 0.65;
  text-decoration: line-through;
  font-size: 0.85rem;
}

.product-card__image img { width: 100%; height: 100%; object-fit: contain; }

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

/* Las tarjetas de una fila ya compartían alto, pero el título ocupaba
   entre 1 y 2 líneas y la descripción entre 1 y 3, así que cada una
   empezaba a distinta altura y la grilla se veía despareja. Fijamos dos
   líneas para ambos: los nombres largos se cortan con "…" y los cortos
   igual reservan el espacio. */
.product-card__body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  min-height: 2.7em; /* 2 líneas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__desc {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-text-soft);
  min-height: 2.9em; /* 2 líneas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* La descripción ya no se estira, así que el pie se ancla abajo solo. */
.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}

.product-card__price {
  font-weight: 700;
  color: var(--color-primary-dark);
}

.btn {
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.btn:hover { background: var(--color-primary-dark); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Botón secundario: fondo transparente, solo borde.
   Tiene que ir DESPUÉS de .btn. Estaba escrito mucho más arriba en este
   archivo y, al tener las dos reglas la misma fuerza, ganaba .btn por
   estar después: el botón salía oscuro igual que el principal en las tres
   páginas que lo usan. */
.btn--outline {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn--outline:hover { background: var(--color-bg); }

.btn--small { padding: 7px 14px; font-size: 0.85rem; }

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

.btn--whatsapp {
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.btn--whatsapp:hover { background: #1ebe57; }

.stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-bg);
  border-radius: 10px;
  padding: 4px;
}

.stepper__btn {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 8px;
  background: var(--color-primary);
  color: white;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}

.stepper__btn:disabled {
  background: var(--color-border);
  color: var(--color-text-soft);
  cursor: not-allowed;
}

.stepper__qty { min-width: 16px; text-align: center; font-weight: 600; }

/* ---------- Overlay ---------- */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.overlay.is-open { opacity: 1; pointer-events: auto; }

/* ---------- Panel del carrito ---------- */

.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 100%);
  background: var(--color-surface);
  z-index: 40;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
}

.cart-panel.is-open { transform: translateX(0); }

.cart-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border);
}

.cart-panel__header h2 { margin: 0; font-size: 1.1rem; }

/* ---------- Favoritos ("me gusta") ---------- */

:root {
  --color-fav: #b0270c;
}

/* Corazón del header */
.fav-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: var(--color-fav);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.fav-toggle svg { width: 22px; height: 22px; }

.fav-toggle:hover {
  color: var(--color-fav);
  border-color: var(--color-fav);
}

.fav-toggle:focus-visible {
  outline: 2px solid var(--color-fav);
  outline-offset: 2px;
}

.fav-badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--color-fav);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

/* Corazón junto a "Agregar al carrito" y sobre las tarjetas */
.fav-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-fav);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.fav-btn svg { width: 24px; height: 24px; }

.fav-btn:hover {
  color: var(--color-fav);
  border-color: var(--color-fav);
}

.fav-btn:active { transform: scale(0.94); }

.fav-btn:focus-visible {
  outline: 2px solid var(--color-fav);
  outline-offset: 2px;
}

/* El corazón del header va SIEMPRE relleno: es el acceso a la sección, no
   un estado. El CSS le gana al fill="none" que trae el SVG. */
.fav-toggle svg path {
  fill: currentColor;
}

/* Los corazones de los productos NO se rellenan por CSS: ahí el relleno es
   justamente lo que distingue un producto guardado de uno que no, y lo
   maneja el marcado (fill="none" / fill="currentColor"). */
.fav-btn.is-active {
  color: var(--color-fav);
  border-color: var(--color-fav);
}

.fav-btn--card {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
}

.fav-btn--card svg { width: 19px; height: 19px; }

/* Página de favoritos */
.favoritos {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 20px 72px;
}

.favoritos__head { margin-bottom: 26px; }
.favoritos__head h1 { margin: 0 0 6px; font-size: 1.7rem; }

.favoritos__sub {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text);
  opacity: 0.65;
}

.favoritos__aviso {
  max-width: 460px;
  margin: 40px auto;
  padding: 36px 28px;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.favoritos__aviso svg {
  width: 46px;
  height: 46px;
  color: var(--color-fav);
  margin-bottom: 14px;
}

.favoritos__aviso h2 { margin: 0 0 8px; font-size: 1.15rem; }

.favoritos__aviso p {
  margin: 0 0 20px;
  font-size: 0.94rem;
  color: var(--color-text);
  opacity: 0.72;
}

/* ---------- Selector de distrito y fila de envío ---------- */

.cart-district {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}

.cart-district:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.cart-shipping-value--free {
  color: #2f6b4f;
  font-weight: 600;
}

.cart-shipping-note {
  margin: -2px 0 8px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--color-text);
  opacity: 0.62;
}

.cart-shipping-note:empty { margin: 0; }

.cart-shipping-note--error {
  color: #a8402c;
  opacity: 1;
}

/* ---------- Franja "Te falta X para envío gratis" ---------- */

.cart-shipping-banner {
  padding: 12px 20px;
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg));
}

.cart-shipping-banner:empty { padding: 0; }

.cart-shipping-banner p {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--color-text);
}

.cart-shipping-banner strong {
  color: var(--color-accent);
}

.cart-shipping-banner__done {
  margin: 0 !important;
  font-weight: 600;
}

.cart-shipping-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}

.cart-shipping-bar__fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.icon-btn {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--color-text-soft);
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  transition: border-color 0.15s ease;
}

.cart-item:hover {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
}

.cart-item__image {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg));
}

.cart-item__image img { width: 100%; height: 100%; object-fit: cover; }

.cart-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cart-item__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.cart-item__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.3;
}

.cart-item__unit-price {
  font-size: 0.76rem;
  color: var(--color-text-soft);
}

.cart-item__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

.cart-item__subtotal {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--color-text);
}

.cart-item__remove {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--color-text-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.cart-item__remove svg { width: 14px; height: 14px; }

.cart-item__remove:hover {
  background: color-mix(in srgb, #dc2626 12%, transparent);
  color: #dc2626;
}

.cart-panel__footer {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-weight: 700;
  font-size: 1.05rem;
}

#cart-total {
  font-size: 1.2rem;
  color: var(--color-accent);
}

/* ---------- Modal de checkout ---------- */

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  width: min(480px, 92vw);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: 18px;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.modal.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

/* Los modificadores van DESPUÉS de .modal a propósito. Los dos son
   selectores de una sola clase, así que pesan igual y gana el que está
   más abajo en el archivo. Arriba, el width de .modal les ganaba y el
   modal de cuenta se quedaba en 480px en vez de 696px.
   (Nos pasó lo mismo con .btn--outline.) */
.modal--narrow { width: min(400px, 92vw); }

/* ---------- Modal de cuenta ---------- */

/* La tarjeta lleva el fondo y las esquinas, no el modal. El modal tiene
   overflow-y: auto para poder scrollear en pantallas bajas, y eso pelea
   con el overflow: hidden que necesitan las esquinas redondeadas del
   panel oscuro. Separando las dos cosas funcionan las dos. */
.modal--auth {
  width: min(440px, 94vw);
  background: transparent;
  border-radius: 24px;
}


.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-border);
}

.modal__header h2 { margin: 0; font-size: 1.15rem; }

.modal__body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 18px; }

.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: 3px 0;
}

.checkout-total-row {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 1.1rem;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

.payment-info h3 { margin: 0 0 10px; font-size: 1rem; }

.payment-block {
  background: var(--color-bg);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.payment-block h4 { margin: 0 0 4px; font-size: 0.92rem; }
.payment-block p { margin: 2px 0; font-size: 0.88rem; color: var(--color-text-soft); }

.checkout-note {
  font-size: 0.82rem;
  color: var(--color-text-soft);
  text-align: center;
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: 60px;
  background: var(--color-nav-bg);
  color: var(--color-nav-text);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 20px 36px;
}

.site-footer__brand .brand span {
  color: var(--color-nav-text);
}

.site-footer__blurb {
  margin: 14px 0 6px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-nav-text) 68%, transparent);
  max-width: 34ch;
}

.site-footer__contact {
  margin: 0;
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--color-nav-text) 55%, transparent);
}

.site-footer__col h3 {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--color-nav-text) 60%, transparent);
  /* Los títulos de las columnas del pie tienen que ocupar el mismo alto,
     o los enlaces de cada columna arrancan a distinta altura y el pie se
     ve desparejo. "ATENCIÓN AL CLIENTE" entra en dos líneas mientras que
     "EXPLORAR" y "TRANSPARENCIA" entran en una, y eso empujaba
     "Contáctanos" 15px más abajo que los demás.
     Reservamos el alto de dos líneas para todos. */
  line-height: 1.35;
  min-height: 2.7em; /* 2 líneas de 1.35 */
}

.site-footer__col {
  display: flex;
  flex-direction: column;
}

.site-footer__col a {
  color: var(--color-nav-text);
  text-decoration: none;
  font-size: 0.88rem;
  padding: 5px 0;
}

.site-footer__col a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 20px 28px;
  border-top: 1px solid color-mix(in srgb, var(--color-nav-text) 15%, transparent);
}

.site-footer__bottom p {
  margin: 0;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--color-nav-text) 55%, transparent);
}

.site-footer__bottom em {
  font-style: normal;
  color: var(--color-accent);
}

.site-footer__socials {
  display: flex;
  gap: 10px;
}

.site-footer__socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-nav-text) 10%, transparent);
  color: var(--color-nav-text);
  cursor: default;
}

.site-footer__socials svg {
  width: 16px;
  height: 16px;
}

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

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

/* ---------- Página de checkout ---------- */

.checkout-page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}

.checkout-page__back {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 0.86rem;
  color: var(--color-text-soft);
  text-decoration: none;
}

.checkout-page__back:hover { color: var(--color-text); }

.checkout-page > h1 {
  margin: 0 0 26px;
  font-size: 1.7rem;
}

.checkout-cols {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 32px;
  align-items: start;
}

.checkout-form { margin-top: 0; gap: 0; }

.checkout-block {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.checkout-block h2 {
  margin: 0;
  font-size: 1rem;
  font-family: var(--font-display);
}

.checkout-opcional {
  font-weight: 400;
  opacity: 0.6;
}

.checkout-hint {
  margin: -8px 0 0;
  font-size: 0.8rem;
  color: var(--color-text-soft);
}

.checkout-hint--error { color: #a8402c; }

/* Formas de pago */

.pay-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.pay-option:has(input:checked) {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg));
}

.pay-option input { margin-top: 3px; flex-shrink: 0; }

.pay-option__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pay-option__title {
  font-weight: 600;
  font-size: 0.95rem;
}

.pay-option__desc {
  font-size: 0.82rem;
  color: var(--color-text-soft);
}

.pay-option__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--color-accent) 18%, var(--color-bg));
  color: var(--color-accent);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

.pay-option--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Resumen del pedido */

.checkout-resumen {
  position: sticky;
  top: 130px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 20px;
  background: var(--color-surface);
}

.checkout-resumen h2 {
  margin: 0 0 14px;
  font-size: 1rem;
  font-family: var(--font-display);
}

.checkout-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}

.checkout-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.checkout-item img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 4px;
  flex-shrink: 0;
}

.checkout-item__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.checkout-item__name {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
}

.checkout-item__qty {
  font-size: 0.78rem;
  color: var(--color-text-soft);
}

.checkout-item__total {
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}

.checkout-empty {
  max-width: 420px;
  margin: 40px auto;
  padding: 36px 28px;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.checkout-empty h2 { margin: 0 0 8px; font-size: 1.15rem; }

.checkout-empty p {
  margin: 0 0 20px;
  color: var(--color-text-soft);
  font-size: 0.94rem;
}

@media (max-width: 860px) {
  .checkout-cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .checkout-resumen { position: static; }
}

/* Slide de un producto que no tiene banner ancho: su foto es cuadrada, así
   que en vez de recortarla (y que el texto caiga encima del producto) la
   mostramos entera a la derecha, sobre un fondo suave, y el texto va a la
   izquierda con su propio espacio. */
.carousel__main--producto {
  background: color-mix(in srgb, var(--color-accent) 7%, var(--color-bg));
}

.carousel__main--producto img {
  width: 46%;
  margin-left: auto;
  object-fit: contain;
  padding: clamp(14px, 2.5vw, 32px);
}

.carousel__main--producto::after { background: none; }

.carousel__main--producto .carousel__main-text { max-width: 54%; }

.carousel__main--producto .carousel__title,
.carousel__main--producto .carousel__price {
  color: var(--color-text);
  text-shadow: none;
}

.carousel__main--producto .carousel__eyebrow {
  color: var(--color-text-soft);
}

.carousel__main--producto .carousel__rule {
  border-color: var(--color-border);
}

/* ---------- Iconos de categoría ---------- */

/* Los iconos usan currentColor, así que el color se decide acá según el
   fondo sobre el que caen. Es la práctica normal en identidad visual:
   una versión para fondo oscuro y otra para fondo claro. */

.cat-icon {
  flex-shrink: 0;
  vertical-align: -0.18em;
}

/* Barra oscura -> dorado */
.mega-nav__trigger .cat-icon,
.mega-nav__panel-head h3 .cat-icon {
  color: #e8b33d;
}

/* Fondo crema -> terracota, que es el único que se lee bien ahí */
.product-section__head h2 .cat-icon,
.catalog__filters .cat-icon,
.product-detail__category .cat-icon,
.filter-group .cat-icon {
  color: #b5502a;
}

/* Sobre la foto del carrusel el texto ya es blanco o tinta según el
   slide, así que el icono sigue al texto y no se fija a un color. */
.carousel__eyebrow .cat-icon {
  color: inherit;
}

/* ---------- QR de Yape en el checkout ---------- */

.yape-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 12px 0 14px;
}

.yape-qr img {
  width: 180px;
  height: 180px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  /* Nada de filtros ni sombras encima: cualquier cosa que altere el
     contraste puede hacer que el lector no reconozca el código. */
}

.yape-qr__hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-soft);
}

.payment-block__check {
  margin: 8px 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-text-soft);
}

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

.co-confirm {
  max-width: 560px;
  margin: 0 auto;
  padding: 36px 28px 40px;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
}

.co-confirm__tick {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  color: #2f6b4f;
  background: #e2ede5;
  border-radius: 50%;
}

.co-confirm h2 { margin: 0 0 6px; }
.co-confirm__sub { margin: 0; font-size: 0.86rem; color: var(--color-text-soft); }

.co-confirm__codigo {
  margin: 4px 0 10px;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.co-confirm__guardado { margin: 0 0 20px; font-size: 0.85rem; color: var(--color-text-soft); }
.co-confirm__guardado--ok { color: #2f6b4f; }
.co-confirm__guardado--error { color: #a8402c; }

.co-confirm__popup {
  margin: 0 0 18px;
  padding: 12px 14px;
  text-align: left;
  font-size: 0.86rem;
  line-height: 1.5;
  background: color-mix(in srgb, #a8402c 8%, var(--color-bg));
  border-left: 3px solid #a8402c;
  border-radius: 4px;
}
.co-confirm__popup p { margin: 0; }

.co-confirm .btn--whatsapp { display: inline-flex; width: auto; padding-inline: 26px; }

.co-confirm__pasos {
  margin: 26px 0 0;
  padding: 0 0 0 20px;
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-soft);
}
.co-confirm__pasos li { margin-bottom: 7px; }

.co-confirm__pie {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
  font-size: 0.86rem;
  color: var(--color-text-soft);
}
.co-confirm__pie a { margin-left: 4px; }

/* ---------- Estados de un pedido ---------- */

.estado-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}
.estado-pill--pendiente { background: #f4e7c9; color: #8a6417; }
.estado-pill--pagado    { background: #dce8f3; color: #2c5578; }
.estado-pill--entregado { background: #e2ede5; color: #2f6b4f; }
.estado-pill--cancelado { background: #eee;    color: #666; }

.account-order__codigo {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-soft);
}

.account-order__cancelar {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--color-text-soft);
}
.account-order__cancelar:hover:not(:disabled) { color: #a8402c; }
.account-order__cancelar:disabled { opacity: 0.6; cursor: default; text-decoration: none; }

/* ---------- Rangos de precio como pastillas ---------- */
/* Antes eran tres botones apilados; ocupaban mucho alto y se veían
   pobres. Ahora van en una fila, con la cantidad de productos al lado.
   Estilo tomado de las etiquetas del archivo de Claude Design. */

.precio-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.precio-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.78rem;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.precio-chip:hover:not(:disabled) {
  border-color: var(--color-accent);
}

.precio-chip.is-active {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg));
  border-color: var(--color-accent);
  color: #8a3f2c;
  font-weight: 600;
}

/* Un rango sin productos no se puede tocar: ofrecerlo sería mandar al
   cliente a una pantalla vacía. */
.precio-chip:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ---------- Viento: página 404 y "en construcción" ---------- */
/* El clima del dibujo se escapa a toda la página: las hojas cruzan por
   detrás y el título se inclina con cada ráfaga. El movimiento se hace
   solo con transform, que es lo que el navegador dibuja barato. */

.viento-escena {
  position: relative;
  overflow: hidden;
}

.viento-hojas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Que las hojas no ensanchen la página al salirse por el costado. */
  overflow: hidden;
}

.viento-hoja {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  color: #6b7f6e;
  will-change: transform;
}

.viento-hoja svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.viento-hoja:nth-child(3n) { color: var(--color-accent); }
.viento-hoja:nth-child(4n) { color: #b5502a; }

/* El contenido va por encima de las hojas. */
.viento-escena > *:not(.viento-hojas) { position: relative; z-index: 1; }

.viento-letra {
  display: inline-block;
  will-change: transform;
  /* El giro sale desde abajo: la letra se dobla como pasto, no gira
     sobre su centro. */
  transform-origin: 50% 90%;
}

/* Lleva un espacio duro adentro, así toma el ancho que la tipografía
   le da al espacio en vez de uno inventado por nosotros. El
   inline-block es para que no se lo coma el navegador. */
.viento-espacio { display: inline-block; }

/* Quien pidió menos animaciones en su sistema ve la página quieta.
   js/viento.js ni siquiera arranca, esto es el cinturón de seguridad. */
@media (prefers-reduced-motion: reduce) {
  .viento-hoja { display: none; }
  .viento-letra { transform: none !important; }
}

.error-page {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 20px 64px;
}

.error-page__numero {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 13vw, 6rem);
  line-height: 1;
  margin: 0 0 4px;
  color: var(--color-text);
}

.error-page__sub {
  max-width: 44ch;
  margin: 10px auto 0;
  color: var(--color-text-soft);
  line-height: 1.6;
}

.error-page__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}

.error-page__doodle { width: min(200px, 46vw); margin-bottom: 8px; }
.error-page__doodle svg { width: 100%; height: auto; display: block; }

/* El dibujo de estas dos páginas pasó a ser el logo, que es una imagen y
   no un SVG suelto como antes. */
.construction-page__doodle img,
.error-page__doodle img { width: 100%; height: auto; display: block; }

/* La foto del producto en celular.
   Con proporción 3/4 medía 447px de alto en una pantalla de 812: más de
   la mitad, y en un celular real con la barra del navegador es todavía
   más. El cliente entraba y no llegaba a ver ni el nombre ni el precio
   sin desplazarse. Cuadrada mide 335px y entra el título, el precio y
   parte de la descripción. */
@media (max-width: 720px) {
  .product-detail__image-card {
    aspect-ratio: 1 / 1;
    padding: 16px;
    border-radius: 14px;
  }
}