@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Quicksand:wght@400;500;600;700&display=swap");

:root {
  --primary-color: #4a3728;
  --secondary-color: #f5ebe0;
  --tertiary-color: #8a9a5b;
  --alert-color: #925e54;
  --neutral-color: #d9d0c4;

  --principal-font: "Poppins", sans-serif;
  --secondary-font: "Quicksand", sans-serif;
}

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

html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  display: flex;
  background-color: var(--secondary-color);
  font-family: var(--secondary-font);
  color: var(--primary-color);
  min-height: 100vh;
  flex-direction: column;
  max-width: 100%;
  overflow-x: hidden;
}

/* ========================================================= */
/* --- JERARQUÍA TIPOGRÁFICA GLOBAL: POPPINS Y QUICKSAND --- */
/* ========================================================= */

/* 1. Textos Importantes (Titulares, Botones, Precios, Enlaces Clave): Poppins */
h1, h2, h3, h4, h5, h6,
th,
button,
.btn,
.btn-comprar,
.btn-suscribirse,
.btn-agregar,
.btn-submit,
.btn-cta-banner,
.btn-volver,
.btnAceptar,
.btnRechazar,
.btn-leer-mas,
.btn-tab-perfil,
.precio-plan,
.total-pedido,
#total-precio,
#contador-carrito,
.etiqueta-popular,
.estado-pedido,
.fecha-post,
.articulo-fecha,
.ticker-item,
.toast,
.exito-titulo,
.opcion-desplegable,
.inside-container a,
.indice-legal a,
.grupo-input label,
.contenedor-cupon label {
  font-family: var(--principal-font);
}

/* 2. Párrafos, Textos de Lectura, Descripciones y Entradas: Quicksand */
p,
li,
span,
small,
label,
input,
textarea,
select,
td,
.articulo-cuerpo,
.exito-texto,
.cabecera-blog p,
.cabecera-planes p,
.contenido-banner p,
.cookie-text p,
.cookie-text a,
.beneficios-plan li,
.contenido-texto-legal p,
.contenido-texto-legal li,
.grupo-terminos,
.requisitos-password,
.detalles-pedido p,
.id-pedido {
  font-family: var(--secondary-font);
}

.dividing-line {
  width: 100%;
  border: none;
  border-top: 2px dashed var(--primary-color);
}

/* 1. Posicionamos el contenedor flotando en la esquina superior derecha */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999; /* Asegura que pase por encima de los modales y el carrito */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 2. Estilo base del aviso (empieza invisible y desplazado a la derecha) */
.toast {
  min-width: 250px;
  padding: 15px 20px;
  border-radius: 8px;
  color: white;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

  /* Configuración de la animación que activa tu JS */
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.toast.mostrar {
  opacity: 1;
  transform: translateX(0);
}

.toast.exito {
  background-color: var(--tertiary-color);
  border-left: 6px solid #1a5e2d;
}

.toast.error {
  background-color: var(--alert-color);
  border-left: 6px solid #8d021f;
}

.logo-principal {
  height: 100px;
  width: auto;
  display: block;
}