/* QuickPets - tienda publica
   Identidad: verde petroleo #2e8b9a -> #1a5b6a, Nunito, logo Q con gato. */

:root {
  --verde: #2e8b9a;
  --verde-oscuro: #1a5b6a;
  --verde-profundo: #123f4a;
  --verde-suave: #e6f3f5;
  --tinta: #1b2a2e;
  --gris: #5f6f73;
  --gris-claro: #d7d7d7;
  --linea: #e3eaec;
  --fondo: #f6f9f9;
  --blanco: #ffffff;
  --ok: #1f7a4d;
  --ok-suave: #e3f4ea;
  --error: #b3261e;
  --error-suave: #fbe9e7;
  --radio: 14px;
  --sombra: 0 1px 3px rgba(20, 50, 56, .07), 0 6px 20px rgba(20, 50, 56, .06);
  --ancho: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
  font-size: 15px;
  line-height: 1.45;
}
a { color: var(--verde-oscuro); }
img { max-width: 100%; }
.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }
.oculto-accesible {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------------- cabecera */

.franja {
  background: var(--verde-profundo);
  color: #d9eef1;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 6px 16px;
}
.franja.prueba { background: #c25b00; color: var(--blanco); letter-spacing: .5px; }
.cabecera {
  background: linear-gradient(90deg, var(--verde), var(--verde-oscuro));
  color: var(--blanco);
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.cabecera-fila {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--blanco);
  text-decoration: none;
  font-weight: 900;
  font-size: 32px;
  letter-spacing: .2px;
  flex-shrink: 0;
}
.logo img {
  width: 76px;
  height: 76px;
}
.buscador { flex: 1; display: flex; max-width: 560px; margin: 0 auto; position: relative; }

/* Sugeridos del buscador (static/buscador.js) */
.sugeridos {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  background: var(--blanco); color: var(--tinta); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .22); overflow: hidden;
}
.sugeridos[hidden] { display: none; }
.sugerido {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  color: inherit; text-decoration: none; border-bottom: 1px solid var(--linea);
}
.sugerido:hover, .sugerido.activo { background: var(--verde-suave); }
.sugerido img { width: 48px; height: 48px; object-fit: contain; flex: none; }
.sugerido-texto { flex: 1; min-width: 0; }
.sugerido-nombre { display: block; font-weight: 800; font-size: 14px; line-height: 1.25; }
.sugerido-marca { display: block; font-size: 12px; font-weight: 800; color: var(--verde); text-transform: uppercase; }
.sugerido-precio { text-align: right; font-weight: 900; white-space: nowrap; }
.sugerido-precio s { display: block; font-size: 12px; font-weight: 600; opacity: .6; }
.sugerido-precio small { display: block; font-size: 12px; font-weight: 700; opacity: .65; }
.sugeridos-todos { display: block; padding: 11px 14px; text-align: center; font-weight: 800;
  color: var(--verde); text-decoration: none; }
.sugeridos-todos:hover, .sugeridos-todos.activo { background: var(--verde-suave); }
.sugeridos-vacio { padding: 14px; font-weight: 700; opacity: .7; }
.buscador input {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 10px 14px;
  border: 0;
  border-radius: 999px 0 0 999px;
  outline: none;
}
.buscador button {
  border: 0;
  background: var(--verde-profundo);
  color: var(--blanco);
  padding: 0 16px;
  border-radius: 0 999px 999px 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.boton-carrito {
  position: relative;
  color: var(--blanco);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 10px;
  flex-shrink: 0;
}
.boton-carrito:hover { background: rgba(255, 255, 255, .14); }
.contador {
  position: absolute;
  top: 0;
  left: 22px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--blanco);
  color: var(--verde-oscuro);
  font-size: 12px;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.contador[hidden] { display: none; }
.contador.salta { animation: salto .35s ease; }
@keyframes salto { 50% { transform: scale(1.35); } }

.navegacion { border-top: 1px solid rgba(255, 255, 255, .15); }
.navegacion ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
  /* En la PC entra todo: si la ventana es angosta pasa a una segunda linea
     (nunca queda una categoria cortada). En el celular se desliza (abajo). */
  flex-wrap: wrap;
  justify-content: center;
  scrollbar-width: none;
}
.navegacion ul::-webkit-scrollbar { display: none; }
.navegacion a {
  display: block;
  color: var(--blanco);
  text-decoration: none;
  font-weight: 800;
  font-size: 14.5px;
  padding: 9px 8px;
  white-space: nowrap;
  border-radius: 8px;
}
.navegacion a:hover, .navegacion a.activo { background: rgba(255, 255, 255, .15); }
.navegacion .separador { width: 1px; background: rgba(255, 255, 255, .25); margin: 8px 6px; }

/* Menu desplegable por mascota (Perros > Alimentos > Secos) */
.navegacion .contenedor { position: relative; }
.desplegable summary {
  list-style: none;
  cursor: pointer;
  color: var(--blanco);
  font-weight: 900;
  font-size: 14.5px;
  padding: 9px 8px;
  border-radius: 8px;
  white-space: nowrap;
}
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable summary:hover, .desplegable[open] summary, .desplegable summary.activo {
  background: rgba(255, 255, 255, .15);
}
.desplegable summary span { font-size: 11px; opacity: .8; }
.mega {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 100%;
  background: var(--blanco);
  color: var(--tinta);
  border-radius: 0 0 var(--radio) var(--radio);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
  padding: 16px 20px 18px;
  z-index: 30;
}
.mega-todo { font-weight: 900; color: var(--verde-oscuro); text-decoration: none; display: inline-block; margin-bottom: 10px; }
.mega-columnas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 22px; }
.mega-columna a {
  display: block;
  color: var(--gris);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  padding: 3px 0;
}
.mega-columna a:hover { color: var(--verde-oscuro); }
.mega-columna .mega-rubro { color: var(--tinta); font-weight: 900; font-size: 15px; margin-bottom: 2px; }
.navegacion ul { overflow: visible; }

@media (max-width: 720px) {
  .navegacion ul { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
  .mega { position: fixed; left: 0; right: 0; top: auto; max-height: 70vh; overflow-y: auto; border-radius: 0 0 14px 14px; }
}

/* ---------------------------------------------------------------- avisos */

.avisos { list-style: none; padding: 0; margin: 16px 0 0; }
.avisos li { padding: 10px 14px; border-radius: 10px; margin-bottom: 6px; font-weight: 700; }
.avisos .ok { background: var(--ok-suave); color: var(--ok); }
.avisos .error { background: var(--error-suave); color: var(--error); }
.aviso-error { padding: 10px 14px; border-radius: 10px; margin: 0 0 12px; font-weight: 700;
  background: var(--error-suave); color: var(--error); }

.tostada {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 120px);
  background: var(--tinta);
  color: var(--blanco);
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
  transition: transform .25s ease;
  z-index: 50;
  width: min(520px, calc(100% - 32px));
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}
.tostada.visible { transform: translate(-50%, 0); }
.tostada.error { background: var(--error); }
.tostada a { color: #9fe0ea; white-space: nowrap; }

/* ---------------------------------------------------------------- inicio */

.portada {
  background: linear-gradient(120deg, var(--verde) 0%, var(--verde-oscuro) 70%);
  color: var(--blanco);
  overflow: hidden;
  position: relative;
}
.portada-fila {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: 24px;
  padding: 44px 0;
}
.portada h1 { font-size: 40px; line-height: 1.1; font-weight: 900; margin: 0 0 12px; }
.portada p { font-size: 18px; font-weight: 600; opacity: .92; margin: 0 0 22px; max-width: 520px; }
.portada-logo { justify-self: center; position: relative; }
.portada-logo img {
  width: 230px;
  /* el logo es sin fondo: la sombra sigue la forma de la Q y el gato */
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .25));
}
/* ---------------------------------------------------------------- carrusel */
.carrusel { position: relative; overflow: hidden; }
.carrusel-pista { display: grid; }
/* Todas en la misma celda: la altura es la de la mas alta y no salta al pasar. */
.diapositiva {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s;
  color: var(--blanco);
}
.diapositiva.activa { opacity: 1; visibility: visible; }
.estilo-verde { background: linear-gradient(120deg, var(--verde) 0%, var(--verde-oscuro) 75%); }
.estilo-oscuro { background: linear-gradient(120deg, var(--verde-oscuro) 0%, var(--verde-profundo) 80%); }
.estilo-noche { background: linear-gradient(120deg, #2c4f7c 0%, #172d4d 85%); }
.estilo-claro { background: linear-gradient(120deg, var(--verde-suave) 0%, #d3ebee 100%); }
.estilo-menta { background: linear-gradient(120deg, #e4f5ee 0%, #c4e8da 100%); }
.estilo-arena { background: linear-gradient(120deg, #f8f2e8 0%, #ecdfc8 100%); }
.fondo-claro { color: var(--tinta); }
.diapositiva-fila {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: 24px;
  min-height: 320px;
  padding: 28px 64px 40px;
}
.diapositiva h2 { font-size: 40px; line-height: 1.1; font-weight: 900; margin: 0 0 12px; }
.diapositiva p { font-size: 18px; font-weight: 600; opacity: .92; margin: 0 0 22px; max-width: 540px; }
.diapositiva-arte { justify-self: center; display: flex; align-items: center; justify-content: center; }
.diapositiva-arte img { max-width: 100%; max-height: 290px; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .22)); }
.diapositiva-icono {
  width: 190px; height: 190px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .14);
}
.fondo-claro .diapositiva-icono { background: rgba(46, 139, 154, .14); }
.diapositiva-icono svg {
  width: 104px; height: 104px;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.fondo-claro .diapositiva-icono svg { stroke: var(--verde-oscuro); }
.carrusel-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .85); color: var(--verde-oscuro);
  display: grid; place-items: center; box-shadow: var(--sombra);
}
.carrusel-flecha:hover { background: var(--blanco); }
.carrusel-flecha svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.carrusel-flecha.anterior { left: 14px; }
.carrusel-flecha.siguiente { right: 14px; }
.carrusel-puntos {
  position: absolute; left: 0; right: 0; bottom: 16px;
  display: flex; justify-content: center; gap: 8px;
}
.carrusel-puntos button {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 99px; cursor: pointer;
  background: rgba(255, 255, 255, .55); transition: width .3s, background .3s;
}
.carrusel-puntos button[aria-current] { width: 28px; background: var(--blanco); }
.carrusel:has(.fondo-claro.activa) .carrusel-puntos button { background: rgba(26, 91, 106, .35); }
.carrusel:has(.fondo-claro.activa) .carrusel-puntos button[aria-current] { background: var(--verde-oscuro); }
@media (prefers-reduced-motion: reduce) { .diapositiva { transition: none; } }

.huella {
  position: absolute;
  fill: rgba(255, 255, 255, .12);
  pointer-events: none;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 800;
  padding: 11px 18px;
  border-radius: 11px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  background: var(--verde);
  color: var(--blanco);
  transition: background .15s;
}
.boton:hover { background: var(--verde-oscuro); }
.boton.claro { background: var(--blanco); color: var(--verde-oscuro); }
.boton.claro:hover { background: var(--verde-suave); }
.boton.contorno { background: transparent; color: var(--blanco); box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.boton.contorno:hover { background: rgba(255, 255, 255, .12); }
.boton.secundario { background: var(--verde-suave); color: var(--verde-oscuro); }
.boton.ancho { width: 100%; }
.boton[disabled], .boton.apagado {
  background: var(--gris-claro);
  color: var(--gris);
  cursor: not-allowed;
}
.acciones { display: flex; gap: 10px; flex-wrap: wrap; }

.seccion { padding: 34px 0 6px; }
.seccion-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.seccion-titulo h2 { font-size: 26px; font-weight: 900; margin: 0; }

.categorias {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.categoria {
  position: relative;
  border-radius: var(--radio);
  padding: 26px 22px;
  min-height: 140px;
  color: var(--blanco);
  text-decoration: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: var(--sombra);
  transition: transform .15s;
}
.categoria:hover { transform: translateY(-3px); }
.categoria b { font-size: 28px; font-weight: 900; position: relative; }
.categoria span { font-weight: 700; opacity: .9; position: relative; }
.categoria svg { position: absolute; right: -10px; top: -10px; width: 130px; fill: rgba(255,255,255,.16); }
.categoria img { position: absolute; right: 14px; bottom: 0; height: 128%; max-height: 165px; width: auto;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); transition: transform .2s; }
.categoria:hover img { transform: scale(1.06) rotate(-2deg); }
.categoria.perro { background: linear-gradient(135deg, #2e8b9a, #1a5b6a); }
.categoria.gato { background: linear-gradient(135deg, #1a5b6a, #123f4a); }
.categoria.otros { background: linear-gradient(135deg, #3c9f8f, #1f6b5f); }

.logos-marcas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.logo-marca {
  display: flex; align-items: center; justify-content: center;
  height: 92px; padding: 14px 18px;
  background: var(--blanco); border-radius: 14px; box-shadow: var(--sombra);
  transition: transform .15s, box-shadow .15s;
}
.logo-marca img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-marca.oscuro { background: #123f4a; }
.logo-marca:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
@media (max-width: 900px) { .logos-marcas { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) {
  .logos-marcas { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .logo-marca { height: 70px; padding: 10px; }
}

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--blanco);
  box-shadow: var(--sombra);
  color: var(--tinta);
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
}
.chip:hover, .chip.activo { background: var(--verde); color: var(--blanco); }
.chip small { opacity: .7; font-weight: 700; }

.beneficios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.beneficio {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.beneficio svg { width: 34px; height: 34px; flex-shrink: 0; stroke: var(--verde); }
.beneficio b { display: block; }
.beneficio span { color: var(--gris); font-size: 13px; font-weight: 600; }

/* ---------------------------------------------------------------- tarjetas */

.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
/* Las filas de la portada se recortan (tienda.js) para no dejar una fila a medias. */
.grilla .fuera { display: none !important; }
.tarjeta {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s, transform .15s;
}
.tarjeta:hover { box-shadow: 0 4px 24px rgba(20, 50, 56, .14); transform: translateY(-2px); }
.tarjeta-foto { display: block; aspect-ratio: 1; background: var(--blanco); position: relative; }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tarjeta.agotada .tarjeta-foto img { opacity: .45; filter: grayscale(.6); }
.sello {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--tinta);
  color: var(--blanco);
  font-size: 12px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
}
.sello.ultimas { background: #c25b00; }
.sello-oferta {
  position: absolute; top: 10px; left: 10px; background: var(--error); color: var(--blanco);
  font-size: 13px; font-weight: 900; padding: 3px 10px; border-radius: 999px;
}
.precio-lista { display: block; font-size: 14px; font-weight: 700; color: var(--gris); line-height: 1.1; }
.etiqueta-oferta {
  display: inline-block; vertical-align: middle; background: var(--error); color: var(--blanco);
  font-size: 13px; font-weight: 900; padding: 3px 10px; border-radius: 999px; margin-left: 6px;
}
.tarjeta-cuerpo { padding: 10px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.tarjeta-marca { font-size: 11px; font-weight: 900; color: var(--verde); text-transform: uppercase; letter-spacing: .4px; min-height: 16px; }
.tarjeta-nombre {
  color: var(--tinta);
  text-decoration: none;
  font-weight: 800;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 56px;
}
.tarjeta-nombre:hover { color: var(--verde-oscuro); }
.precio { font-size: 22px; font-weight: 900; margin-top: 8px; }
.sin-impuestos { font-size: 11px; color: var(--gris); font-weight: 600; margin-bottom: 10px; }
.tarjeta form { margin-top: auto; }

/* ---------------------------------------------------------------- listado */

.miga { font-size: 13px; color: var(--gris); font-weight: 700; margin: 18px 0 6px; }
.miga a { color: var(--gris); }
.listado {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding-bottom: 50px;
}
.filtros {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px;
  position: sticky;
  top: 120px;
}
.filtros h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--gris); margin: 14px 0 6px; }
.filtros h3:first-child { margin-top: 0; }
.filtros ul { list-style: none; padding: 0; margin: 0; }
.filtros li a {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--tinta);
  font-weight: 700;
}
.filtros li a:hover { background: var(--verde-suave); }
.filtros li a.activo { background: var(--verde); color: var(--blanco); }
.filtros li small { opacity: .65; }
.lista-marcas { max-height: 260px; overflow-y: auto; }
.filtros .subrubros { margin: 2px 0 6px 10px; border-left: 2px solid var(--verde-suave); padding-left: 4px; }
.filtros .subrubros a { font-size: 14px; font-weight: 700; color: var(--gris); }
.casilla { display: flex; gap: 8px; align-items: center; font-weight: 700; cursor: pointer; }
.casilla input { width: 18px; height: 18px; accent-color: var(--verde); }

.barra-listado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.barra-listado h1 { font-size: 28px; font-weight: 900; margin: 0; }
.barra-listado .cuenta { color: var(--gris); font-weight: 700; }
select {
  font: inherit;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--linea);
  background: var(--blanco);
  color: var(--tinta);
}
.boton-filtros { display: none; }
.vacio {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 40px 20px;
  text-align: center;
}
.vacio h2 { margin-top: 0; }

.paginas { display: flex; gap: 6px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.paginas a, .paginas span {
  min-width: 38px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--blanco);
  box-shadow: var(--sombra);
  text-decoration: none;
  font-weight: 800;
  text-align: center;
}
.paginas span.actual { background: var(--verde); color: var(--blanco); }

/* ---------------------------------------------------------------- ficha */

.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 24px;
  margin-bottom: 30px;
}
.ficha-foto { aspect-ratio: 1; display: grid; place-items: center; }
.ficha-foto img { width: 100%; height: 100%; object-fit: contain; }
.ficha h1 { font-size: 30px; line-height: 1.15; font-weight: 900; margin: 4px 0 6px; }
.ficha .tarjeta-marca { font-size: 13px; }
.ficha .precio { font-size: 36px; margin-top: 14px; }
.ficha .sin-impuestos { font-size: 13px; }
.stock-linea { font-weight: 800; margin: 14px 0; display: flex; align-items: center; gap: 8px; }
.stock-linea::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.stock-linea.pocas::before { background: #c25b00; }
.stock-linea.agotado { color: var(--gris); }
.stock-linea.agotado::before { background: var(--gris-claro); }
.cantidad-fila { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.selector-cantidad {
  display: flex;
  border: 1px solid var(--linea);
  border-radius: 11px;
  overflow: hidden;
  background: var(--blanco);
}
.selector-cantidad button {
  width: 40px;
  border: 0;
  background: var(--verde-suave);
  color: var(--verde-oscuro);
  font: inherit;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}
.selector-cantidad input {
  width: 48px;
  border: 0;
  text-align: center;
  font: inherit;
  font-weight: 800;
  -moz-appearance: textfield;
}
.selector-cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; }
.cantidad-fila .boton { flex: 1; min-width: 180px; }
.detalles { margin-top: 22px; border-top: 1px solid var(--linea); padding-top: 16px; }
.detalles dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.detalles dt { color: var(--gris); font-weight: 700; }
.detalles dd { margin: 0; font-weight: 700; }
.descripcion { white-space: pre-line; margin-top: 14px; }
.nota-entrega {
  background: var(--verde-suave);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--verde-profundo);
}

/* ---------------------------------------------------------------- carrito */

.carrito {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  align-items: start;
  padding-bottom: 50px;
}
.caja {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 18px;
}
.item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--linea);
}
.item:last-child { border-bottom: 0; }
.item img { width: 84px; height: 84px; object-fit: contain; border-radius: 10px; border: 1px solid var(--linea); }
.item-nombre { font-weight: 800; color: var(--tinta); text-decoration: none; }
.item-precio { color: var(--gris); font-weight: 700; font-size: 13px; }
.item-controles { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.item-controles form { margin: 0; }
.item-subtotal { font-weight: 900; font-size: 18px; text-align: right; white-space: nowrap; }
.boton-texto {
  background: none;
  border: 0;
  font: inherit;
  font-weight: 700;
  color: var(--gris);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.resumen h2 { margin: 0 0 12px; font-size: 20px; }
.resumen-fila { display: flex; justify-content: space-between; margin: 8px 0; font-weight: 700; }
.resumen-fila.total { font-size: 22px; font-weight: 900; border-top: 1px solid var(--linea); padding-top: 12px; }
.resumen .sin-impuestos { text-align: right; }
.resumen .nota { color: var(--gris); font-size: 13px; font-weight: 600; margin-top: 10px; }

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

.formulario { max-width: 440px; margin: 28px auto 50px; }
.formulario h1 { font-size: 26px; font-weight: 900; margin: 0 0 6px; text-align: center; }
.formulario .bajada { text-align: center; color: var(--gris); font-weight: 600; margin: 0 0 18px; }
.campo { margin-bottom: 14px; }
.campo label, .etiqueta-campo { display: block; font-weight: 800; font-size: 13px; margin-bottom: 5px; }
.campo input[type=text], .campo input[type=email], .campo input[type=password],
.campo input[type=tel], .campo select, .campo textarea {
  width: 100%;
  font: inherit;
  padding: 11px 13px;
  border: 1px solid var(--linea);
  border-radius: 11px;
  background: var(--blanco);
  color: var(--tinta);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--verde);
  border-color: transparent;
}
.campo textarea { min-height: 70px; resize: vertical; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ayuda { color: var(--gris); font-size: 13px; font-weight: 600; margin-top: 4px; }
.separador-o {
  display: flex; align-items: center; gap: 10px; color: var(--gris);
  font-weight: 700; font-size: 13px; margin: 16px 0;
}
.separador-o::before, .separador-o::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.boton-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px; border-radius: 11px; border: 1px solid var(--linea);
  background: var(--blanco); color: var(--tinta); font: inherit; font-weight: 800;
  text-decoration: none;
}
.boton-google:hover { background: #f4f6f7; }
.pie-formulario { text-align: center; margin-top: 16px; font-weight: 700; }

.opciones-entrega { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.opcion-entrega {
  border: 2px solid var(--linea); border-radius: 12px; padding: 12px 14px; cursor: pointer;
  display: flex; gap: 10px; align-items: flex-start; background: var(--blanco);
}
.opcion-entrega:has(input:checked) { border-color: var(--verde); background: var(--verde-suave); }
.opcion-entrega input { margin-top: 3px; accent-color: var(--verde); width: 18px; height: 18px; }
.opcion-entrega b { display: block; }
.opcion-entrega span { color: var(--gris); font-size: 13px; font-weight: 600; }
.opcion-entrega.apagada { opacity: .5; cursor: not-allowed; }
.compra { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; padding-bottom: 50px; }
.mini-item { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.mini-item img { width: 46px; height: 46px; object-fit: contain; border-radius: 8px; border: 1px solid var(--linea); }
.mini-item span { flex: 1; font-weight: 700; font-size: 14px; }
.mini-item b { white-space: nowrap; }

.tabla-pedidos { width: 100%; border-collapse: collapse; }
.tabla-pedidos th { text-align: left; font-size: 12px; color: var(--gris); text-transform: uppercase; padding: 8px; border-bottom: 2px solid var(--linea); }
.tabla-pedidos td { padding: 10px 8px; border-bottom: 1px solid var(--linea); }
.estado {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px;
  font-weight: 800; background: var(--verde-suave); color: var(--verde-profundo);
}
.estado.pendiente_pago { background: #fff4dc; color: #8a5a00; }
.estado.cancelado { background: #eceff0; color: var(--gris); }
.estado.entregado { background: var(--ok-suave); color: var(--ok); }
.resultado { text-align: center; max-width: 560px; margin: 30px auto 50px; }
.resultado .icono { font-size: 54px; line-height: 1; }
.resultado h1 { font-size: 28px; font-weight: 900; }
.datos-banco { list-style: none; padding: 12px 14px; margin: 0 0 12px; background: var(--verde-suave); border-radius: 10px; font-size: 15px; }
.datos-banco li { padding: 3px 0; word-break: break-all; }
.aviso-invitado { background: var(--verde-suave); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; font-size: 14px; }
.zona-resultado { font-size: 14px; font-weight: 700; margin: 6px 0 0; min-height: 18px; }
.zona-resultado.ok { color: var(--ok); }
.zona-resultado.no { color: var(--error); }
.linea-tiempo { list-style: none; padding: 0; margin: 0; }
.linea-tiempo li { padding: 6px 0 6px 18px; border-left: 2px solid var(--linea); position: relative; font-size: 14px; }
.linea-tiempo li::before { content: ""; position: absolute; left: -6px; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--verde); }
.linea-tiempo small { color: var(--gris); font-weight: 700; display: block; }

@media (max-width: 900px) {
  .compra { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .dos, .opciones-entrega { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- pie */

.pie { background: var(--verde-profundo); color: #cfe6ea; margin-top: 40px; }
.pie-fila {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 24px;
  padding: 30px 0;
}
.pie h3 { color: var(--blanco); margin: 0 0 8px; font-size: 16px; }
.pie a { color: #cfe6ea; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: 4px; }
.pie-legal {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 12px 0;
  font-size: 12px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.pie-legal > div { opacity: .85; }
.data-fiscal img { display: block; background: var(--blanco); border-radius: 4px; }
.boton-arrepentimiento {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 14px;
  border: 2px solid #cfe6ea;
  border-radius: 10px;
  font-weight: 900;
  color: var(--blanco) !important;
  text-decoration: none;
}
.boton-arrepentimiento:hover { background: rgba(255, 255, 255, .1); }

/* Paginas de ayuda y legales */
.pagina-legal { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; align-items: start; padding-bottom: 50px; }
.indice-legal { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 10px; position: sticky; top: 120px; }
.indice-legal a { display: block; padding: 8px 10px; border-radius: 8px; font-weight: 800; color: var(--tinta); text-decoration: none; }
.indice-legal a:hover { background: var(--verde-suave); }
.indice-legal a.activo { background: var(--verde); color: var(--blanco); }
.texto-legal { line-height: 1.6; }
.texto-legal h1 { font-size: 28px; font-weight: 900; margin: 0 0 12px; }
.texto-legal h2 { font-size: 18px; font-weight: 900; margin: 22px 0 6px; color: var(--verde-profundo); }
.texto-legal .falta { color: #c25b00; font-style: normal; font-weight: 800; }
.leyenda-aaip { font-size: 13px; color: var(--gris); background: var(--fondo); border-radius: 10px; padding: 10px 12px; }
.faq { border-bottom: 1px solid var(--linea); padding: 10px 0; }
.faq summary { font-weight: 800; cursor: pointer; }
.faq p { margin: 8px 0 2px; }
.codigo-tramite { font-size: 28px; font-weight: 900; text-align: center; letter-spacing: 1px; color: var(--verde-oscuro); background: var(--verde-suave); border-radius: 12px; padding: 12px; }
@media (max-width: 900px) {
  .pagina-legal { grid-template-columns: 1fr; }
  .indice-legal { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  .pie-legal { flex-direction: column; align-items: flex-start; }
}
.whatsapp-flotante {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  z-index: 40;
}
.whatsapp-flotante svg { width: 30px; fill: var(--blanco); }

/* ---------------------------------------------------------------- celular */

@media (max-width: 900px) {
  .listado { grid-template-columns: 1fr; }
  .filtros { display: none; position: static; }
  .filtros.abierto { display: block; }
  .boton-filtros { display: inline-flex; }
  .carrito { grid-template-columns: 1fr; }
  .pie-fila { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cabecera-fila { flex-wrap: wrap; gap: 10px; }
  .buscador { order: 3; flex-basis: 100%; max-width: none; }
  .logo { font-size: 26px; margin-right: auto; }
  .logo img { width: 56px; height: 56px; }
  .boton-carrito .texto { display: none; }
  .portada-fila { grid-template-columns: 1fr; padding: 28px 0; text-align: left; }
  .portada h1 { font-size: 30px; }
  .portada p { font-size: 16px; }
  .portada-logo { display: none; }
  .diapositiva-fila { grid-template-columns: 1fr 40%; gap: 8px; min-height: 230px; padding: 22px 16px 40px; }
  .diapositiva h2 { font-size: 26px; }
  .diapositiva p { font-size: 15px; margin-bottom: 16px; }
  .diapositiva-arte img { max-height: 150px; }
  .diapositiva-icono { width: 82px; height: 82px; }
  .diapositiva-icono svg { width: 48px; height: 48px; }
  .carrusel-flecha { display: none; }
  .categorias { grid-template-columns: 1fr 1fr; }
  .categoria { min-height: 110px; padding: 18px 16px; }
  .categoria b { font-size: 22px; }
  .categoria img { height: 105%; max-height: 105px; right: 8px; }
  .categoria.otros { grid-column: 1 / -1; min-height: 80px; }
  .beneficios { grid-template-columns: 1fr 1fr; gap: 8px; }
  .beneficio { padding: 10px; gap: 8px; }
  .beneficio svg { width: 26px; height: 26px; }
  .beneficio b { font-size: 14px; }
  .beneficio span { font-size: 12px; }
  .grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tarjeta-cuerpo { padding: 8px 10px 10px; }
  .tarjeta-nombre { font-size: 14px; min-height: 54px; }
  .precio { font-size: 19px; }
  .tarjeta .boton { padding: 9px 10px; font-size: 14px; }
  .ficha { grid-template-columns: 1fr; padding: 16px; gap: 14px; }
  .ficha h1 { font-size: 23px; }
  .ficha .precio { font-size: 30px; }
  .barra-listado h1 { font-size: 22px; }
  .item { grid-template-columns: 64px minmax(0, 1fr); }
  .item img { width: 64px; height: 64px; }
  .item-subtotal { grid-column: 2; text-align: left; }
  .seccion-titulo h2 { font-size: 22px; }
}

/* Pedido sin pagar en el carrito (volvio de Mercado Pago sin pagar) */
.aviso-pendiente { border-left: 5px solid #e0701f; margin-bottom: 16px; }
.aviso-pendiente form { margin: 0; }

/* Contador de las tarjetas: reemplaza a "Agregar al carrito" cuando el producto ya esta en el carrito */
.control-carrito [hidden] { display: none !important; }
.contador-tarjeta {
  display: flex;
  align-items: stretch;
  height: 44px;
  border-radius: 11px;
  overflow: hidden;
  background: var(--verde);
  color: var(--blanco);
}
.contador-tarjeta button {
  width: 48px;
  border: 0;
  background: var(--verde-oscuro);
  color: var(--blanco);
  font: inherit;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
}
.contador-tarjeta button:hover { background: var(--verde-profundo); }
.contador-tarjeta input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--blanco);
  text-align: center;
  font: inherit;
  font-size: 18px;
  font-weight: 900;
  -moz-appearance: textfield;
}
.contador-tarjeta input::-webkit-inner-spin-button,
.contador-tarjeta input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.contador-tarjeta input:focus { outline: 2px solid var(--blanco); outline-offset: -4px; }
.control-carrito.guardando .contador-tarjeta { opacity: .7; }

/* "En tu carrito" (ficha) y barra de envio gratis (ficha y carrito) */
.en-carrito-ficha { margin: 10px 0 0; font-size: 14px; color: var(--verde-oscuro); }
.en-carrito-ficha[hidden] { display: none; }
.envio-gratis {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 11px;
  background: var(--verde-suave);
  font-size: 14px;
  color: var(--verde-profundo);
}
.envio-gratis-barra { height: 8px; margin-top: 7px; border-radius: 99px; background: rgba(26, 91, 106, .15); overflow: hidden; }
.envio-gratis-barra span { display: block; height: 100%; border-radius: 99px; background: var(--verde); transition: width .4s ease; }