/* ============================================================
   IMPRIMIMAGIA - estilos de la tienda
   Colores y tipografías sacados del mockup de Claude Design.
   ============================================================ */

:root {
  --crema: #FFF8F1;          /* fondo general */
  --borde: #F2E7DC;          /* bordes suaves */
  --tinta: #574766;          /* texto principal (violeta oscuro) */
  --gris: #9387A6;           /* texto secundario */
  --gris-claro: #B5A8C6;
  --rosa: #D8568C;           /* botones principales */
  --rosa2: #E1689B;          /* acentos rosas */
  --lila: #9B7BC2;
  --verde: #3FA39B;
  --amarillo: #F3C277;
  --pastel-rosa: #F6C9DC;
  --pastel-lila: #E9E0F6;
  --pastel-durazno: #FAD9C2;
  --pastel-verde: #C3E8E1;
}

* { box-sizing: border-box; }

/* En monitores grandes la página no se estira a lo ancho:
   queda como una "hoja" centrada de 1280px como máximo. */
html { background: #F1E6DA; }

body {
  margin: 0 auto;
  max-width: 1440px;
  background: var(--crema);
  box-shadow: 0 0 60px rgba(87, 71, 102, .14);
  font-family: Nunito, system-ui, sans-serif;
  color: var(--tinta);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.pacifico { font-family: Pacifico, cursive; }

/* ---------- Barra de avisos de arriba ---------- */
.aviso {
  background: var(--pastel-lila);
  color: var(--lila);
  font-weight: 800;
  font-size: 12px;
  padding: 9px 14px;
  text-align: center;
  letter-spacing: .02em;
}

/* ---------- Encabezado / menú ---------- */
.encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 36px;
  background: var(--crema);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 50;
}

.marca { display: flex; align-items: center; gap: 10px; }
.marca img { width: 46px; height: 46px; border-radius: 12px; }
/* El logo rectangular (con el nombre incluido) del encabezado */
.marca .logo-recto { width: auto; height: 44px; border-radius: 0; }
.marca .nombre { font-weight: 800; font-size: 21px; color: var(--lila); }
.marca .nombre b { color: var(--rosa2); font-weight: 800; }

.menu { display: flex; gap: 28px; font-weight: 700; font-size: 14px; }
.menu a.activo { color: var(--rosa2); border-bottom: 2px solid var(--rosa2); padding-bottom: 2px; }
.menu a:hover { color: var(--rosa2); }

.btn-carrito {
  display: flex; align-items: center; gap: 8px;
  background: var(--rosa); color: #fff;
  padding: 9px 18px; border-radius: 999px;
  font-weight: 800; font-size: 13px;
  white-space: nowrap;
}
.btn-carrito .contador {
  background: #fff; color: var(--rosa);
  border-radius: 999px; min-width: 20px; height: 20px;
  display: grid; place-items: center;
  font-size: 11px; padding: 0 5px;
}

.selector-moneda {
  display: flex; border: 1px solid var(--borde); border-radius: 999px;
  padding: 3px; gap: 2px;
}
.selector-moneda button {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-weight: 800; font-size: 12px; color: var(--tinta);
  padding: 6px 12px; border-radius: 999px;
}
.selector-moneda button.activo { background: var(--rosa); color: #fff; }

/* Selector de idioma: mismo aspecto que el de moneda, pero son enlaces
   (cada idioma vive en su propia dirección, ej: /tienda y /en/tienda) */
.selector-idioma {
  display: flex; border: 1px solid var(--borde); border-radius: 999px;
  padding: 3px; gap: 2px;
}
.selector-idioma a {
  text-decoration: none;
  font-weight: 800; font-size: 12px; color: var(--tinta);
  padding: 6px 12px; border-radius: 999px;
}
.selector-idioma a.activo { background: var(--lila); color: #fff; }

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  background: var(--rosa); color: #fff;
  padding: 14px 26px; border-radius: 999px;
  font-weight: 800; font-size: 15px;
  font-family: inherit;
  border: 0; cursor: pointer;
  box-shadow: 0 14px 26px -12px rgba(216, 86, 140, .7);
  text-align: center;
}
.btn:hover { background: var(--rosa2); }
.btn-claro {
  display: inline-block;
  background: rgba(255, 255, 255, .75);
  border: 1px solid #fff; color: var(--tinta);
  padding: 14px 26px; border-radius: 999px;
  font-weight: 800; font-size: 15px; cursor: pointer;
}
.btn-chico { padding: 8px 16px; font-size: 13px; box-shadow: none; }

/* ---------- Hero de la home ---------- */
.hero {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 32px;
  align-items: center;
  padding: 52px 56px;
  background: linear-gradient(165deg, #FDEFE6, #EFE4F7);
}
.hero .etiqueta {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .75); border: 1px solid #fff;
  padding: 7px 16px; border-radius: 999px;
  font-weight: 800; font-size: 12px; color: var(--lila);
  margin-bottom: 20px;
}
.hero .etiqueta .punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 4px rgba(63, 163, 155, .2);
}
.hero h1 { margin: 0; font-weight: 900; font-size: 58px; line-height: 1; letter-spacing: -.01em; }
.hero h1 .rosa { color: var(--rosa2); }
.hero h1 .lila { color: var(--lila); }
.hero p { margin: 18px 0 26px; font-weight: 600; font-size: 17px; line-height: 1.55; max-width: 38ch; }
.hero .botones { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .numeros { display: flex; gap: 32px; margin-top: 32px; font-weight: 700; font-size: 13px; color: var(--gris); }
.hero .numeros b { display: block; font-weight: 900; font-size: 24px; color: var(--tinta); }

/* margen derecho "auto" = la foto queda hacia la izquierda, cerca del texto */
.hero .foto { position: relative; transform: rotate(-2.5deg); width: 100%; max-width: 620px; margin: 0 auto 0 48px; }
.hero .foto > img, .hero .foto .sin-foto, .hero .foto .carrusel {
  width: 100%; border-radius: 20px; border: 8px solid #fff;
  box-shadow: 0 40px 80px -30px rgba(87, 71, 102, .55); display: block;
}

/* ---------- Carrusel del hero (van pasando las ediciones) ---------- */
.hero .foto .carrusel { position: relative; aspect-ratio: 1/1; overflow: hidden; background: #fff; }
.carrusel .diapo { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.carrusel .diapo.visible { opacity: 1; }
.carrusel .diapo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carrusel .nombre-diapo {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(255, 255, 255, .92); color: var(--tinta);
  padding: 6px 14px; border-radius: 999px;
  font-weight: 800; font-size: 13px;
}
.puntos { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }
.punto-carrusel {
  width: 9px; height: 9px; border-radius: 999px; border: 0; padding: 0;
  background: rgba(87, 71, 102, .25); cursor: pointer;
  transition: width .3s, background .3s;
}
.punto-carrusel.activo { width: 24px; background: var(--rosa2); }
.hero .foto .sin-foto {
  aspect-ratio: 4/3; display: grid; place-items: center;
  background: linear-gradient(135deg, #C3E8E1, #9AD0CA);
  color: #fff; text-align: center;
}
.hero .foto .sello {
  position: absolute; bottom: -14px; right: 24px; transform: rotate(2deg);
  background: #fff; padding: 10px 18px; border-radius: 999px;
  box-shadow: 0 20px 42px -22px rgba(87, 71, 102, .45);
  font-weight: 800; font-size: 13px;
  display: flex; align-items: center; gap: 8px;
}
.hero .foto .sello .barras { color: var(--verde); }

/* ---------- Secciones ---------- */
.seccion { padding: 44px 56px; }
.seccion-centrada { text-align: center; }
.antetitulo {
  font-weight: 800; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--rosa2);
}
.titulo { font-weight: 900; font-size: 34px; margin: 8px 0 26px; }
.subtitulo-verde { font-weight: 800; font-size: 14px; color: var(--verde); }

/* ---------- Pasos (de la compra a la fiesta) ---------- */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; }
.paso { background: #fff; border: 1px solid var(--borde); border-radius: 22px; padding: 24px; }
.paso .numero {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 20px; margin-bottom: 14px;
}
.paso h3 { margin: 0; font-weight: 800; font-size: 19px; }
.paso p { margin: 6px 0 0; font-weight: 600; font-size: 14px; line-height: 1.5; color: var(--gris); }

/* ---------- Tarjetas de producto ---------- */
.grilla-productos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.grilla-productos.tres { grid-template-columns: repeat(3, 1fr); gap: 20px; }

.producto {
  background: #fff; border: 1px solid var(--borde); border-radius: 22px;
  overflow: hidden; display: flex; flex-direction: column;
}
.producto .tapa {
  aspect-ratio: 1/1; position: relative;
  display: grid; place-items: center; overflow: hidden;
}
.grilla-productos.tres .producto .tapa { aspect-ratio: 4/3; }
/* "contain" = la foto entra completa, sin recortarse (con fondo blanco) */
.producto .tapa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }

/* Flechitas para pasar las fotos sin salir de la tarjeta (como en ML) */
.producto .tapa .flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--borde); background: rgba(255, 255, 255, .92);
  color: var(--tinta); font-size: 20px; font-weight: 800; line-height: 1;
  cursor: pointer; display: grid; place-items: center; padding: 0 0 3px;
  opacity: 0; transition: opacity .2s; z-index: 2;
}
.producto .tapa .flecha.izq { left: 10px; }
.producto .tapa .flecha.der { right: 10px; }
.producto:hover .tapa .flecha { opacity: 1; }
@media (hover: none) { .producto .tapa .flecha { opacity: .85; } }
.producto .tapa .sin-foto { text-align: center; color: #fff; padding: 16px; }
.producto .tapa .sin-foto .nota { font-size: 42px; opacity: .9; line-height: 1; }
.producto .tapa .sin-foto .corto {
  font-family: Pacifico, cursive; font-size: 24px; line-height: 1.3;
  text-shadow: 0 2px 8px rgba(87, 71, 102, .3);
}
.producto .tapa .tag {
  position: absolute; top: 10px; left: 10px;
  background: rgba(255, 255, 255, .92);
  padding: 4px 11px; border-radius: 999px;
  font-weight: 800; font-size: 10px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--rosa2);
}
.producto .datos { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.producto .datos h3 { margin: 0; font-weight: 800; font-size: 16px; line-height: 1.2; }
.producto .datos .genero { font-weight: 600; font-size: 12.5px; color: var(--gris); }
.producto .pie {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: auto; padding-top: 8px; gap: 8px;
}
.producto .precio { font-weight: 900; font-size: 19px; }
.producto .cuotas { font-weight: 700; font-size: 10.5px; color: var(--verde); }

/* ---------- Reseñas ---------- */
.grilla-resenas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.resena {
  background: #fff; border: 1px solid var(--borde); border-radius: 22px;
  padding: 24px; display: flex; flex-direction: column; gap: 10px; text-align: left;
}
.estrellas { color: var(--amarillo); font-size: 16px; letter-spacing: 2px; }
.resena p { margin: 0; font-weight: 600; font-size: 14.5px; line-height: 1.55; }
.resena .quien { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; }
.resena .inicial {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 14px; color: #fff;
}
.resena .nombre { font-weight: 800; font-size: 13px; }
.resena .detalle { font-weight: 600; font-size: 11.5px; color: var(--gris); }

/* ---------- Banda final con frase ---------- */
.banda {
  padding: 40px 56px;
  background: linear-gradient(90deg, #E9E0F6, #F6C9DC);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
}
.banda .frase { font-family: Pacifico, cursive; font-size: 30px; color: var(--lila); }
.banda .bajada { font-weight: 600; font-size: 15px; margin-top: 6px; }

/* ---------- Pie de página ---------- */
.pie-pagina { background: var(--tinta); color: var(--crema); padding: 36px 56px 24px; }
.pie-pagina .columnas {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr;
  gap: 32px; margin-bottom: 26px;
}
.pie-pagina .marca-pie { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.pie-pagina .marca-pie img { width: 54px; height: 54px; border-radius: 50%; }
.pie-pagina .marca-pie .nombre { font-weight: 800; font-size: 19px; }
.pie-pagina .marca-pie .nombre span { color: #D9CBEA; }
.pie-pagina .marca-pie .nombre b { color: var(--pastel-rosa); font-weight: 800; }
.pie-pagina .lema { font-family: Pacifico, cursive; color: var(--pastel-rosa); font-size: 15px; margin-bottom: 4px; }
.pie-pagina p { margin: 0; font-weight: 600; font-size: 13px; line-height: 1.5; color: #DDD3E6; max-width: 34ch; }
.pie-pagina h4 {
  margin: 0 0 10px; font-weight: 800; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--amarillo);
}
.pie-pagina .enlaces { display: flex; flex-direction: column; gap: 7px; font-weight: 600; font-size: 13px; color: #DDD3E6; }
.pie-pagina .enlaces a:hover { color: #fff; }
.pie-pagina .legal {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: 14px; font-weight: 600; font-size: 11.5px; color: var(--gris-claro);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

/* ---------- Cabecera del catálogo ---------- */
.cabecera-tienda {
  background: linear-gradient(180deg, #FDEFE6, var(--crema));
  padding: 38px 56px 30px; text-align: center;
}
.cabecera-tienda h1 { margin: 8px 0 6px; font-weight: 900; font-size: 40px; }
.cabecera-tienda .bajada { font-weight: 600; font-size: 15px; color: var(--gris); }

/* Recuadro "¿se te ocurre una edición?": una tarjeta más de la grilla.
   La imagen ya trae el botón dibujado; el enlace invisible va encima */
.caja-sugerencia { position: relative; align-self: center; }
.caja-sugerencia img { width: 100%; display: block; border-radius: 22px; }
.caja-sugerencia .click-sugerencia {
  position: absolute; left: 30%; top: 73%; width: 40%; height: 11%;
  border-radius: 999px;
}

/* ---------- Detalle de producto ---------- */
.migas { font-weight: 700; font-size: 13px; color: var(--gris); margin-bottom: 18px; }
.migas b { color: var(--tinta); font-weight: 700; }
.detalle { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.detalle .imagen-grande {
  width: 100%; border-radius: 22px; border: 1px solid var(--borde); display: block;
  aspect-ratio: 1/1; object-fit: contain; background: #fff;
}

/* Las fotitos chicas debajo de la imagen grande (galería estilo ML) */
.miniaturas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.miniatura {
  width: 68px; height: 68px; flex-shrink: 0;
  border: 2px solid var(--borde); border-radius: 12px;
  padding: 0; overflow: hidden; cursor: pointer; background: #fff;
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura.activa { border-color: var(--rosa); }
.miniatura:hover { border-color: var(--rosa2); }
.detalle .imagen-grande.sin-foto {
  display: grid; place-items: center; color: #fff; text-align: center; border: 0;
}
.detalle .imagen-grande.sin-foto .nota { font-size: 64px; opacity: .9; line-height: 1; }
.detalle .imagen-grande.sin-foto .corto {
  font-family: Pacifico, cursive; font-size: 38px;
  text-shadow: 0 2px 8px rgba(87, 71, 102, .3);
}
.detalle .tag-detalle {
  display: inline-block; background: var(--pastel-verde); color: var(--verde);
  padding: 5px 14px; border-radius: 999px;
  font-weight: 800; font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 12px;
}
.detalle h1 { margin: 0; font-weight: 900; font-size: 36px; line-height: 1.1; }
.detalle .frase { font-family: Pacifico, cursive; font-size: 22px; color: var(--rosa2); margin: 6px 0 12px; }
.detalle .valoracion { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; color: var(--gris); margin-bottom: 16px; }
.detalle .precio-grande { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.detalle .precio-grande b { font-weight: 900; font-size: 38px; }
.detalle .precio-grande span { font-weight: 700; font-size: 14px; color: var(--verde); }
.detalle .nota-digital { font-weight: 600; font-size: 13px; color: var(--gris); margin-bottom: 20px; }
.caja-incluye {
  background: #fff; border: 1px solid var(--borde); border-radius: 18px;
  padding: 18px 20px; margin-bottom: 20px;
}
.caja-incluye h3 {
  margin: 0 0 10px; font-weight: 800; font-size: 13px;
  letter-spacing: .05em; text-transform: uppercase;
}
.caja-incluye .item { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.caja-incluye .item:last-child { margin-bottom: 0; }
.caja-incluye .tilde { color: var(--verde); }
/* Selector de color (ediciones que vienen en varios colores) */
.caja-colores { margin-bottom: 20px; }
.caja-colores h3 {
  margin: 0 0 10px; font-weight: 800; font-size: 13px;
  letter-spacing: .05em; text-transform: uppercase;
}
.opciones-color { display: flex; gap: 10px; flex-wrap: wrap; }
.opcion-color {
  background: #fff; border: 2px solid var(--borde); border-radius: 14px;
  padding: 10px 14px; font-weight: 700; font-size: 14px;
  font-family: inherit; cursor: pointer; color: inherit;
}
.opcion-color.activa { border-color: var(--rosa2); background: #FDF0F6; }
.detalle .comprar { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.detalle .comprar .btn { flex: 1; }
.detalle .garantias { display: flex; gap: 14px; font-weight: 700; font-size: 12px; color: var(--gris); flex-wrap: wrap; }

/* La descripción larga del producto (la misma que en ML) */
.descripcion-larga {
  margin-top: 44px; background: #fff;
  border: 1px solid var(--borde); border-radius: 22px; padding: 26px 30px;
}
.descripcion-larga p {
  margin: 0; font-weight: 600; font-size: 15px; line-height: 1.65;
  white-space: pre-line;   /* respeta los saltos de línea del texto original */
}

/* ---------- Carrito ---------- */
.pagina-carrito h1 { font-weight: 900; font-size: 34px; margin: 0 0 20px; }
.pagina-carrito h1 span { font-weight: 700; font-size: 16px; color: var(--gris); }
.carrito-grilla { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; }
.item-carrito {
  display: flex; gap: 16px; align-items: center;
  background: #fff; border: 1px solid var(--borde); border-radius: 18px;
  padding: 16px; margin-bottom: 14px;
}
.item-carrito .mini {
  width: 74px; height: 74px; border-radius: 14px; object-fit: cover;
  display: grid; place-items: center; color: #fff; font-size: 24px; flex-shrink: 0;
}
.item-carrito .info { flex: 1; min-width: 0; }
.item-carrito .info h3 { margin: 0; font-weight: 800; font-size: 16px; }
.item-carrito .info .tipo { font-weight: 600; font-size: 12.5px; color: var(--gris); }
.item-carrito .quitar {
  font-weight: 700; font-size: 12px; color: var(--rosa2);
  margin-top: 4px; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.cantidad {
  display: flex; align-items: center; gap: 12px;
  background: var(--crema); border: 1px solid var(--borde); border-radius: 999px;
  padding: 8px 14px; font-weight: 800; font-size: 14px;
}
.cantidad button {
  background: none; border: 0; color: var(--lila);
  font-size: 16px; font-weight: 800; cursor: pointer; padding: 0 2px; font-family: inherit;
}
.item-carrito .subtotal { font-weight: 900; font-size: 18px; min-width: 80px; text-align: right; }
.seguir { font-weight: 700; font-size: 13.5px; color: var(--rosa); }

.resumen {
  background: #fff; border: 1px solid var(--borde); border-radius: 22px;
  padding: 26px; box-shadow: 0 20px 42px -22px rgba(87, 71, 102, .25);
}
.resumen h2 { margin: 0 0 18px; font-weight: 800; font-size: 19px; }
.resumen .linea { display: flex; justify-content: space-between; font-weight: 600; font-size: 14px; color: var(--gris); margin-bottom: 8px; }
.resumen .linea.verde { color: var(--verde); margin-bottom: 14px; }
.resumen .total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--borde); padding-top: 14px; margin-bottom: 18px;
}
.resumen .total b { font-weight: 900; font-size: 28px; }
.resumen label { display: block; font-weight: 700; font-size: 12.5px; margin-bottom: 6px; }
.resumen input {
  width: 100%; background: var(--crema); border: 1px solid var(--borde);
  border-radius: 14px; padding: 13px 16px;
  font-weight: 600; font-size: 14px; font-family: inherit; color: var(--tinta);
  margin-bottom: 16px;
}
.btn-mp {
  width: 100%; background: #009EE3; color: #fff;
  padding: 15px; border-radius: 15px; border: 0; cursor: pointer;
  font-weight: 800; font-size: 15px; font-family: inherit;
}
.btn-mp:disabled { opacity: .6; cursor: wait; }
.resumen .nota-segura { text-align: center; font-weight: 600; font-size: 11.5px; color: var(--gris); margin-top: 10px; }

/* Aclaración chiquita debajo de cada botón de pago */
.nota-medio-pago { text-align: center; font-size: 11.5px; font-weight: 600; color: var(--gris); margin-top: 6px; }
/* Qué pasa después de pagar: dónde se descarga, el mail y a quién escribir.
   Va más suave que el resto para no competir con los botones. */
.nota-que-sigue { font-size: 11.5px; line-height: 1.55; color: var(--gris); margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee; }
.nota-que-sigue a { color: var(--rosa); font-weight: 600; }
/* El "o" que separa las dos formas de pagar en dólares */
.separador-pago { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; color: var(--gris); font-size: 12px; font-weight: 700; }
.separador-pago::before, .separador-pago::after { content: ""; flex: 1; height: 1px; background: var(--borde); }
/* El botón de dólares: mismo peso visual que el de Mercado Pago, pero en
   violeta de la marca para que se note que es la otra opción */
.btn-usd {
  width: 100%; background: var(--tinta); color: #fff;
  padding: 15px; border-radius: 15px; border: 0; cursor: pointer;
  font-weight: 800; font-size: 15px; font-family: inherit; line-height: 1.35;
}
.btn-usd:hover { background: #6B5A7D; }
.btn-usd:disabled { opacity: .6; cursor: wait; }
/* Casillero del código de promoción */
.resumen .promo { display: flex; gap: 8px; margin-bottom: 16px; }
.resumen .promo input { margin-bottom: 0; }
.resumen .promo button { flex-shrink: 0; }

.carrito-vacio { text-align: center; padding: 60px 20px; }
.carrito-vacio .emoji { font-size: 48px; }

/* ---------- Página de gracias: la entrega del kit ---------- */
.pagina-gracias { max-width: 980px; margin: 0 auto; }
.pagina-gracias .emoji-gracias { font-size: 52px; margin-bottom: 6px; }
.pagina-gracias .subtitulo-gracias { font-weight: 700; font-size: 16px; color: var(--gris); }
.pagina-gracias .aviso-gracias {
  text-align: center; max-width: 60ch; margin: 0 auto;
  font-weight: 600; font-size: 16px; line-height: 1.6; color: var(--gris);
}

.tarjeta-kit {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 32px; align-items: center;
  background: #fff; border: 1px solid var(--borde); border-radius: 22px;
  padding: 28px; margin-bottom: 20px;
  box-shadow: 0 20px 42px -22px rgba(87, 71, 102, .25);
}
.foto-kit {
  display: grid; place-items: center; border-radius: 16px; overflow: hidden;
  min-height: 260px; align-self: stretch;
}
.foto-kit img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-kit .sin-foto { text-align: center; color: #fff; }
.foto-kit .sin-foto .nota { font-size: 56px; line-height: 1; }
.foto-kit .sin-foto .corto { font-family: Pacifico, cursive; font-size: 30px; text-shadow: 0 2px 8px rgba(87, 71, 102, .3); }

.datos-kit h2 { margin: 0; font-weight: 900; font-size: 30px; line-height: 1.15; }
.datos-kit .frase-kit { font-family: Pacifico, cursive; font-size: 20px; color: var(--rosa2); margin: 4px 0 16px; }
.datos-kit .btn-descargar { display: block; text-align: center; font-size: 16px; }
.datos-kit .nota-descarga { text-align: center; font-weight: 600; font-size: 12.5px; color: var(--gris); margin: 10px 0 16px; }

.botones-musica { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.botones-musica a {
  flex: 1; text-align: center; color: #fff; font-weight: 800; font-size: 14px;
  padding: 12px 16px; border-radius: 14px; white-space: nowrap;
}
.btn-spotify { background: #1DB954; }
.btn-youtube { background: #FF0033; }

.mini-garantias { display: flex; gap: 10px; border-top: 1px solid var(--borde); padding-top: 16px; }
.mini-garantias > div { flex: 1; text-align: center; font-size: 20px; }
.mini-garantias p { margin: 4px 0 0; font-weight: 600; font-size: 12px; color: var(--gris); line-height: 1.35; }
.mini-garantias b { color: var(--tinta); }

.grilla-kit-info { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grilla-kit-info .caja-incluye { margin-bottom: 0; }
.caja-consejo {
  display: flex; gap: 14px; align-items: flex-start;
  background: #FFF4DC; border: 1px solid #F5E3BC; border-radius: 18px; padding: 18px 20px;
}
.caja-consejo .icono {
  background: var(--amarillo); border-radius: 50%; width: 40px; height: 40px;
  display: grid; place-items: center; font-size: 18px; flex-shrink: 0;
}
.caja-consejo h3 { margin: 0 0 4px; font-weight: 800; font-size: 15px; }
.caja-consejo p { margin: 0; font-weight: 600; font-size: 13.5px; color: var(--gris); line-height: 1.5; }

@media (max-width: 760px) {
  .tarjeta-kit { grid-template-columns: 1fr; padding: 20px; gap: 20px; }
  .grilla-kit-info { grid-template-columns: 1fr; }
}

/* ---------- Cómo se juega ---------- */
.cabecera-juego {
  background: linear-gradient(165deg, #FDEFE6, #EFE4F7);
  padding: 44px 56px; text-align: center;
}
.cabecera-juego .arriba { font-family: Pacifico, cursive; font-size: 20px; color: var(--rosa2); }
.cabecera-juego h1 { margin: 8px 0; font-weight: 900; font-size: 42px; }
.cabecera-juego .bajada { font-weight: 600; font-size: 16px; color: var(--gris); max-width: 52ch; margin: 0 auto; }

.pasos-juego { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.paso-juego { background: #fff; border: 1px solid var(--borde); border-radius: 22px; padding: 24px; text-align: center; }
.paso-juego .circulo {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; font-size: 26px; margin: 0 auto 14px;
}
.paso-juego .etiqueta-paso { font-weight: 800; font-size: 13px; letter-spacing: .08em; margin-bottom: 6px; }
.paso-juego h3 { margin: 0 0 6px; font-weight: 800; font-size: 18px; }
.paso-juego p { margin: 0; font-weight: 600; font-size: 13.5px; line-height: 1.5; color: var(--gris); }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.caja-tips { background: linear-gradient(135deg, #E9E0F6, #F6C9DC); border-radius: 22px; padding: 26px; }
.caja-tips h3 { margin: 0 0 12px; font-weight: 800; font-size: 18px; }
.caja-tips div { font-weight: 600; font-size: 14px; line-height: 1.5; margin-bottom: 9px; }
.caja-cta {
  background: var(--tinta); border-radius: 22px; padding: 26px;
  display: flex; flex-direction: column; justify-content: center; text-align: center;
}
.caja-cta .frase { font-family: Pacifico, cursive; font-size: 24px; color: var(--pastel-rosa); }
.caja-cta p { font-weight: 600; font-size: 14px; color: #DDD3E6; margin: 8px 0 16px; }
.caja-cta .btn { align-self: center; box-shadow: none; }

/* ---------- Página de gracias ---------- */
.gracias { text-align: center; padding: 70px 20px; max-width: 60ch; margin: 0 auto; }
.gracias .emoji { font-size: 56px; }
.gracias h1 { font-weight: 900; font-size: 34px; margin: 12px 0; }
.gracias p { font-weight: 600; font-size: 16px; line-height: 1.6; color: var(--gris); }

/* ---------- Avisito flotante al agregar al carrito ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--tinta); color: #fff;
  padding: 12px 24px; border-radius: 999px;
  font-weight: 800; font-size: 14px;
  box-shadow: 0 20px 42px -18px rgba(87, 71, 102, .6);
  z-index: 100; opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.toast.visible { opacity: 1; }

/* ============================================================
   VERSIÓN CELULAR (pantallas angostas)
   ============================================================ */
@media (max-width: 900px) {
  .encabezado { padding: 10px 16px; }
  .menu { display: none; }               /* en el celu, el menú va abajo en el pie */
  .marca img { width: 38px; height: 38px; border-radius: 10px; }
  .marca .logo-recto { width: auto; height: 34px; }
  .marca .nombre { font-size: 17px; }

  .hero { grid-template-columns: 1fr; padding: 28px 20px 30px; text-align: center; }
  .hero h1 { font-size: 36px; }
  .hero p { margin-left: auto; margin-right: auto; font-size: 14px; }
  .hero .botones { justify-content: center; }
  .hero .numeros { justify-content: center; gap: 20px; }
  .hero .foto { transform: rotate(-2deg); max-width: 82%; margin: 0 auto; }

  .seccion { padding: 24px 20px; }
  .titulo { font-size: 24px; }
  .pasos, .grilla-productos, .grilla-productos.tres, .grilla-resenas,
  .pasos-juego, .dos-columnas, .carrito-grilla { grid-template-columns: 1fr; }

  .cabecera-tienda { padding: 28px 20px 22px; }
  .cabecera-tienda h1 { font-size: 28px; }
  .detalle { grid-template-columns: 1fr; gap: 20px; }
  .detalle h1 { font-size: 23px; }
  .banda { padding: 28px 20px; text-align: center; justify-content: center; }
  .cabecera-juego { padding: 28px 20px; }
  .cabecera-juego h1 { font-size: 28px; }
  .pie-pagina { padding: 28px 20px 18px; }
  .pie-pagina .columnas { grid-template-columns: 1fr; gap: 22px; }
}