/* ============================================================
   CAMPANAS DE TEMPORADA - La Ultima Gema

   Dos partes:
   1) Piezas de campaña (banda del cupón, píldora, casilla del
      cupón). Usan las variables de la marca, así que se ven bien
      con cualquier tema.
   2) Temas. Cada tema es un bloque [data-campana="..."] que
      reasigna las variables de tienda.css. Sin campaña vigente
      el atributo no existe y la tienda se ve exactamente igual
      que siempre: este archivo no pisa nada por su cuenta.

   Para crear un tema nuevo (navidad, día del niño...), copia el
   bloque del final y cambia los colores.
   ============================================================ */

[hidden] { display: none !important; }

/* ---------- Píldora sobre el título de la portada ---------- */
.campana-pildora {
  display: inline-block;
  margin-bottom: .9rem;
  padding: .38rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--dorado);
  background: rgba(255, 255, 255, .06);
  color: var(--dorado);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------- Banda del cupón (debajo de la portada) ---------- */
.campana-banda {
  /* el tinte la separa de la sección siguiente, que usa el mismo fondo */
  background:
    radial-gradient(1100px 420px at 18% 45%, var(--campana-tinte, rgba(255, 255, 255, .05)), transparent 70%),
    var(--fondo-banda);
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.campana-banda-cuerpo {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center;
}
.campana-cupon {
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  transform: rotate(-1.2deg);
  transition: transform var(--transicion);
}
.campana-cupon:hover { transform: rotate(0deg) scale(1.015); }
.campana-cupon img { width: 100%; height: auto; }

.campana-texto h2 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.12;
}
.campana-texto > p {
  margin-top: .9rem;
  color: var(--crema-suave);
  font-size: .95rem;
  line-height: 1.75;
}
.campana-texto .campana-nota {
  margin-top: .9rem;
  font-size: .76rem;
  color: rgba(246, 241, 234, .5);
  line-height: 1.6;
}

/* código del cupón + botón para aplicarlo */
.campana-codigo {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem;
  padding: .9rem 1.1rem;
  border: 1.5px dashed var(--dorado);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
}
.campana-codigo-rotulo {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--crema-suave);
}
.campana-codigo strong {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--dorado);
}
.campana-codigo button {
  margin-left: auto;
  padding: .6rem 1.3rem;
  border: none;
  border-radius: 999px;
  background: var(--dorado);
  color: var(--tinta);   /* tinta sobre el acento claro: se lee de lejos */
  font-weight: 700;
  font-size: .84rem;
  transition: transform var(--transicion), filter var(--transicion);
}
.campana-codigo button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.campana-codigo button:disabled { opacity: .6; cursor: default; transform: none; }

@media (max-width: 860px) {
  .campana-banda-cuerpo { grid-template-columns: 1fr; }
  .campana-cupon { transform: none; order: -1; }
  .campana-codigo button { margin-left: 0; width: 100%; }
}

/* ---------- Casilla del cupón en el panel del carrito ---------- */
.cupon-caja {
  padding: .85rem 1rem;
  border: 1px dashed #d9d0c4;
  border-radius: 14px;
  background: #faf7f2;
  margin-bottom: .85rem;
}
.cupon-caja label {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  color: var(--gris);
  margin-bottom: .45rem;
}
.cupon-fila { display: flex; gap: .5rem; }
.cupon-fila input {
  flex: 1;
  min-width: 0;
  padding: .55rem .8rem;
  border: 1px solid #ddd;
  border-radius: 999px;
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: #fff;
  color: var(--tinta);
}
.cupon-fila input:focus { outline: none; border-color: var(--dorado-oscuro); }
.cupon-fila input::placeholder { text-transform: none; letter-spacing: normal; color: #b3aca3; }
.cupon-fila button {
  padding: .55rem 1.1rem;
  border: none;
  border-radius: 999px;
  background: var(--dorado-oscuro);
  color: #fff;
  font-weight: 600;
  font-size: .82rem;
  transition: filter var(--transicion);
}
.cupon-fila button:hover { filter: brightness(1.1); }
.cupon-error {
  margin-top: .45rem;
  font-size: .74rem;
  color: var(--peligro);
  font-weight: 500;
}
.cupon-caja.aplicado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  border-style: solid;
  border-color: var(--dorado-oscuro);
  background: #fdf4f7;
}
.cupon-ok {
  font-size: .82rem;
  font-weight: 600;
  color: var(--dorado-oscuro);
}
.cupon-quitar {
  border: none;
  background: none;
  color: var(--gris);
  font-size: .74rem;
  text-decoration: underline;
  padding: .2rem;
}
.cupon-quitar:hover { color: var(--peligro); }

/* ---------- Línea de descuento en carrito y resúmenes ---------- */
.panel .fila-descuento {
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
  font-weight: 600;
  color: var(--dorado-oscuro);
  margin-bottom: .3rem;
}
.panel .fila-total .antes {
  font-weight: 500;
  color: var(--gris);
  text-decoration: line-through;
  margin-right: .45rem;
}
.resumen .linea.descuento { color: var(--dorado-oscuro); font-weight: 600; }


/* ---------- Aviso de vista previa (solo lo ve quien abre ?ver=) ---------- */
.campana-previa {
  position: fixed;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: .7rem;
  max-width: calc(100vw - 2rem);
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: rgba(29, 26, 23, .95);
  color: var(--crema);
  border: 1.5px solid var(--dorado);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  font-size: .78rem;
  line-height: 1.4;
}
.campana-previa strong { color: var(--dorado); }
.campana-previa a {
  flex-shrink: 0;
  color: var(--crema);
  text-decoration: underline;
  opacity: .75;
}
.campana-previa a:hover { opacity: 1; }

/* ============================================================
   TEMAS
   Un tema solo reasigna cinco variables; los ajustes de contraste
   de más abajo valen para todos. Para crear uno nuevo copia un
   bloque, cámbiale el nombre y los colores, y agrégalo también a
   campana-temas.js (así aparece en el menú del mantenedor).

   REGLA IMPORTANTE al elegir --dorado: debe tener una luminosidad
   parecida al dorado original #c9a86a, porque sirve a la vez de
   texto sobre fondo oscuro y de fondo con texto claro. Si eliges
   un color muy claro o muy oscuro, se rompen los contrastes de
   toda la tienda. Los de abajo ya están calculados.
   ============================================================ */

/* Ajustes comunes: donde el acento claro quedaría lavado, va el tono
   oscuro del tema. Valen para cualquier tema presente y futuro. */
[data-campana] .anuncio,
[data-campana] .boton.dorado,
[data-campana] .etiqueta,
[data-campana] .chip.activo,
[data-campana] .progreso-envio .barra span { background: var(--dorado-oscuro); }
[data-campana] .boton.dorado:hover { background: var(--campana-fuerte); }
[data-campana] .chip.activo { border-color: var(--dorado-oscuro); }

/* Clásico: los colores de siempre. Sirve para una promoción que
   quieras anunciar sin cambiarle el aspecto a la tienda. */
[data-campana="clasico"] {
  --dorado-oscuro: #b3945a;
  --campana-fuerte: #a08350;
  --campana-tinte: rgba(201, 168, 106, .18);
}
[data-campana="clasico"] .anuncio { background: var(--dorado); }

/* Aniversario: el rosa vino del cupón */
[data-campana="aniversario"] {
  --dorado: #dfa0b6;
  --dorado-oscuro: #a84f6b;
  --campana-fuerte: #8f4159;
  --fondo-banda: #322029;
  --campana-tinte: rgba(168, 79, 107, .3);
}

/* Navidad: rojo cálido */
[data-campana="navidad"] {
  --dorado: #e39b95;
  --dorado-oscuro: #a3382f;
  --campana-fuerte: #862b23;
  --fondo-banda: #2f221f;
  --campana-tinte: rgba(163, 56, 47, .3);
}

/* Día del Niño: celeste alegre */
[data-campana="infantil"] {
  --dorado: #7ab6d4;
  --dorado-oscuro: #2f6f8f;
  --campana-fuerte: #245A75;
  --fondo-banda: #1f2a30;
  --campana-tinte: rgba(47, 111, 143, .32);
}

/* Día de la Madre: malva suave */
[data-campana="madres"] {
  --dorado: #d29ec0;
  --dorado-oscuro: #8e4a75;
  --campana-fuerte: #763c61;
  --fondo-banda: #2c2029;
  --campana-tinte: rgba(142, 74, 117, .3);
}

/* Fiestas Patrias: azul chileno */
[data-campana="patrias"] {
  --dorado: #7fa9d8;
  --dorado-oscuro: #2f5b96;
  --campana-fuerte: #254a7c;
  --fondo-banda: #1f2530;
  --campana-tinte: rgba(47, 91, 150, .32);
}