.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* Base custom styles */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Área segura de iOS (notch / barra inferior). Solo funciona si la etiqueta lleva viewport-fit=cover; si no, env() vale 0. */ .pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); } .pt-safe { padding-top: env(safe-area-inset-top, 0px); } /* En horizontal el notch del iPhone queda a un lado: se reserva ese margen para que el contenido no quede escondido debajo. Se aplica en . */ .safe-x { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } /* Fondo suave de las cabeceras de página, con dos tonos de la paleta (primary-fixed y secondary-container). La primera capa funde el borde inferior con el color de fondo (#fbf9f8) para que no se vea un corte recto. Solo usa background-image para poder combinarlo con una clase bg-*. */ .hero-bg { background-image: linear-gradient(to bottom, rgba(251, 249, 248, 0) 65%, #fbf9f8), radial-gradient(38rem 26rem at 88% -8%, rgba(255, 219, 207, 0.7), transparent 70%), radial-gradient(30rem 22rem at -6% 85%, rgba(214, 228, 202, 0.6), transparent 70%); } /* Entrada suave de los títulos. No se aplica si el sistema tiene activado "reducir movimiento". */ @media (prefers-reduced-motion: no-preference) { .aparecer { animation: aparecer 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .aparecer-2 { animation-delay: 0.1s; } .aparecer-3 { animation-delay: 0.2s; } } @keyframes aparecer { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* Toast Notification Styles */ .toast { visibility: hidden; min-width: 250px; background-color: #845241; /* primary color */ color: #fff; text-align: center; border-radius: 8px; padding: 16px; position: fixed; z-index: 1000; left: 50%; bottom: 30px; transform: translateX(-50%); box-shadow: 0 4px 12px rgba(132, 82, 65, 0.3); font-family: 'Inter', sans-serif; font-size: 16px; opacity: 0; transition: opacity 0.5s, bottom 0.5s, visibility 0.5s; } .toast.show { visibility: visible; opacity: 1; bottom: 50px; }