/* Montserrat servida desde el propio hosting en vez de Google Fonts: un dominio externo
   menos (sin su handshake DNS/TLS) y sin depender de que fonts.googleapis.com responda.
   Es la fuente variable real (pesos 400-800 en un solo archivo), tal como la entrega Google. */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../assets/fonts/montserrat-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
    /* Reserva siempre el espacio de la barra de scroll vertical, para que
       100vw no cambie de valor cuando la página crece o encoge (eso movía
       de golpe la pasarela de marcas, que usa 100vw para ir a todo el
       ancho de la pantalla). */
    overflow-y: scroll;
}

body {
    font-family: 'Montserrat', sans-serif;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#toast {
    transition: opacity 0.3s ease;
}

.promo-dot.active {
    background-color: #ffffff;
}

.legal-text h4 {
    font-weight: 700;
    color: #0f172a;
    margin-top: 1rem;
}

.legal-text ul {
    list-style: disc;
    padding-left: 1.25rem;
}

.legal-text ol {
    list-style: decimal;
    padding-left: 1.25rem;
}

.legal-text li {
    margin-top: 0.25rem;
}

/* Texto seleccionado con el durazno de la marca: sobre el azul del buscador
   el color por defecto del navegador casi no se distinguía. */
::selection {
    background: #FF6549;
    color: #ffffff;
}

/* Letra pequeña 2px más grande en todo el sitio: se leía muy poco.
   (text-xs 12→14, y los tamaños fijos de 10 y 11 px pasan a 12 y 13.) */
.text-xs { font-size: 14px !important; line-height: 1.25rem !important; }
.text-\[11px\] { font-size: 13px !important; }
.text-\[10px\] { font-size: 12px !important; }

/* ---------- Fondo general animado ---------- */
/* Cuatro auras de color, muy difuminadas, que flotan despacio detrás de todo. Solo se mueven
   con transform (van por la tarjeta gráfica, casi sin costo). Un grano finísimo encima le da
   textura de papel y evita que el degradado se vea plano. */
#ambientBg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(180deg, #F5F8FF 0%, #FBF6FA 55%, #FFF4EF 100%);
}

.ambient-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    will-change: transform;
}

.ambient-sky {
    width: 62vmax; height: 62vmax; left: -18vmax; top: -22vmax;
    background: radial-gradient(circle at 40% 40%, rgba(132, 176, 251, 0.75), rgba(132, 176, 251, 0) 68%);
    animation: ambient-drift-a 38s ease-in-out infinite alternate;
}

.ambient-peach {
    width: 56vmax; height: 56vmax; right: -20vmax; top: 6vh;
    background: radial-gradient(circle at 50% 50%, rgba(255, 101, 73, 0.42), rgba(255, 101, 73, 0) 68%);
    animation: ambient-drift-b 46s ease-in-out infinite alternate;
}

.ambient-blue {
    width: 58vmax; height: 58vmax; left: 12vw; bottom: -30vmax;
    background: radial-gradient(circle at 50% 50%, rgba(2, 89, 222, 0.34), rgba(2, 89, 222, 0) 68%);
    animation: ambient-drift-c 52s ease-in-out infinite alternate;
}

.ambient-glow {
    width: 34vmax; height: 34vmax; left: 38vw; top: 30vh;
    background: radial-gradient(circle at 50% 50%, rgba(255, 190, 165, 0.6), rgba(255, 190, 165, 0) 70%);
    animation: ambient-drift-d 44s ease-in-out infinite alternate;
}

#ambientBg::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.06;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@keyframes ambient-drift-a { from { transform: translate3d(0, 0, 0) scale(1); }    to { transform: translate3d(16vmax, 10vmax, 0) scale(1.18); } }
@keyframes ambient-drift-b { from { transform: translate3d(0, 0, 0) scale(1.1); }  to { transform: translate3d(-18vmax, 14vmax, 0) scale(0.92); } }
@keyframes ambient-drift-c { from { transform: translate3d(0, 0, 0) scale(1); }    to { transform: translate3d(20vmax, -12vmax, 0) scale(1.15); } }
@keyframes ambient-drift-d { from { transform: translate3d(-8vmax, 6vmax, 0) scale(0.9); } to { transform: translate3d(10vmax, -8vmax, 0) scale(1.2); } }

@media (max-width: 767px) {
    .ambient-blob { filter: blur(48px); }
}

/* Quien pide menos movimiento en su dispositivo ve el fondo quieto. */
@media (prefers-reduced-motion: reduce) {
    .ambient-blob { animation: none; }
}

/* El panel de administración es de trabajo: sin animación de fondo. */
body:has(#view-admin:not(.hidden)) #ambientBg { display: none; }

/* Zona donde se están arrastrando imágenes: se resalta con el durazno de la marca. */
.drop-active {
    border-color: #FF6549 !important;
    outline: 2px dashed #FF6549;
    outline-offset: 2px;
    background-color: rgba(255, 101, 73, 0.08);
}

/* Finanzas a todo lo ancho: el contenedor de la página deja de limitarse a 80rem (solo mientras esa
   pestaña está a la vista; ver applyFinanceWidth en nav.js). */
.finanzas-ancho .max-w-7xl { max-width: none; }

/* Slide "Próximamente" del banner de destacados: se distingue de los demás con un fondo nocturno
   (tapa el degradado azul del banner), resplandores que flotan y una etiqueta durazno con punto vivo. */
.soon-slide { background: linear-gradient(135deg, #0b1230 0%, #1b1550 55%, #3a1f5c 100%); }
.soon-bg { position: absolute; inset: 0; pointer-events: none; }
.soon-glow { position: absolute; border-radius: 9999px; filter: blur(60px); opacity: .55; }
.soon-glow-a { width: 55%; aspect-ratio: 1; right: -8%; top: -30%; background: #f5a97f; animation: soonFloat 9s ease-in-out infinite alternate; }
.soon-glow-b { width: 45%; aspect-ratio: 1; left: 20%; bottom: -45%; background: #4f7cff; animation: soonFloat 11s ease-in-out infinite alternate-reverse; }
@keyframes soonFloat { from { transform: translate(0, 0) scale(1); } to { transform: translate(-6%, 8%) scale(1.15); } }
.soon-badge { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #2a1608; background: linear-gradient(90deg, #f5a97f, #ffd2b3, #f5a97f); background-size: 200% 100%; animation: soonShine 3.5s linear infinite; padding: .3rem .75rem; border-radius: 9999px; }
.soon-dot { width: .5rem; height: .5rem; border-radius: 9999px; background: #2a1608; animation: soonPulse 1.4s ease-in-out infinite; }
@keyframes soonShine { to { background-position: -200% 0; } }
@keyframes soonPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.soon-tagline { color: #ffd2b3; letter-spacing: .04em; }
.soon-btn { background: transparent; color: #fff; border: 1.5px solid #f5a97f; }
.soon-btn:hover { background: #f5a97f; color: #2a1608; }
.soon-photos img { box-shadow: 0 0 28px rgba(245, 169, 127, .35); }
.soon-photos > div > div { box-shadow: 0 0 0 1px rgba(255, 210, 179, .35), 0 12px 32px rgba(0, 0, 0, .35); }

/* Avisos (toast): entran desde arriba con un pequeño rebote para que se noten. */
@keyframes toastIn {
    0%   { opacity: 0; transform: translate(-50%, -28px) scale(.94); }
    60%  { opacity: 1; transform: translate(-50%, 5px) scale(1.03); }
    100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.toast-pop { animation: toastIn .45s cubic-bezier(.22, 1, .36, 1); }

/* Pestañas del panel en escritorio: una sola fila con todos los nombres visibles. La barra puede ser más ancha que el resto de
   la página (se centra y sobresale por los lados). En celular se deslizan de lado y en tablet se acomodan en filas (clases de Tailwind). */
@media (min-width: 1024px) {
    #adminTabsBar { flex-wrap: nowrap; width: max-content; max-width: calc(100vw - 1.5rem); position: relative; left: 50%; transform: translateX(-50%); }
    #adminTabsBar > button { flex: 0 0 auto; padding-left: clamp(0.375rem, 0.6vw, 0.625rem); padding-right: clamp(0.375rem, 0.6vw, 0.625rem); font-size: clamp(12px, 1vw, 15px); }
}