/* ==========================================================================
   Eu Lavo Pet Spa — Design System
   Fonte única de verdade para cores, tipografia, botões e a animação de
   bolhas usada em todas as páginas do site. Não contém nenhuma lógica de
   negócio — apenas estilo visual, compartilhado via <link> em cada página.
   ========================================================================== */

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

:root {
    /* Cores oficiais extraídas do logotipo */
    --cor-laranja:        #F78320;
    --cor-laranja-hover:  #e6740f;
    --cor-azul-escuro:    #004F9F;
    --cor-azul-escuro-2:  #003b78;
    --cor-azul-claro:     #00AEEF;
    --cor-fundo-limpo:    #F4F9FC;
    --cor-branco:         #FFFFFF;

    /* Tipografia */
    --fonte-titulo: 'Fredoka', sans-serif;
    --fonte-texto:  'Poppins', sans-serif;

    /* Componentes */
    --raio-botao:   30px;
    --raio-card:    20px;
    --sombra-suave: 0 8px 24px rgba(0, 79, 159, 0.12);
    --sombra-forte: 0 12px 28px rgba(0, 79, 159, 0.18);
    --transicao:    0.3s ease;
}

/* ---------- Tipografia base ---------- */
body {
    font-family: var(--fonte-texto);
}
h1, h2, h3, h4, h5, h6,
.titulo, .logo-txt {
    font-family: var(--fonte-titulo);
}

/* ---------- Botões e CTAs modernos ---------- */
.btn, button,
input[type="submit"],
input[type="button"] {
    border-radius: var(--raio-botao);
    box-shadow: var(--sombra-suave);
    transition: transform var(--transicao), box-shadow var(--transicao), filter var(--transicao);
    font-family: var(--fonte-texto);
    cursor: pointer;
}
.btn:hover, button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--sombra-forte);
    filter: brightness(1.04);
}
.btn:active, button:active,
input[type="submit"]:active,
input[type="button"]:active {
    transform: translateY(0) scale(0.98);
}

/* ---------- Cards / superfícies modernas ---------- */
.card, .painel, .box {
    border-radius: var(--raio-card);
    box-shadow: var(--sombra-suave);
}

/* ---------- Tabelas modernas (remove bordas rígidas antigas) ---------- */
table {
    border-collapse: collapse;
}
table th, table td {
    border: none;
    border-bottom: 1px solid rgba(0, 79, 159, 0.08);
}

/* ---------- Bolhas flutuantes ---------- */
.bubbles-wrap {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}
.bubbles-wrap .bubble {
    position: absolute;
    bottom: -120px;
    display: block;
    background: rgba(0, 174, 239, 0.15);
    border-radius: 50%;
    animation: subirBolha linear infinite;
    pointer-events: none;
}
.bubbles-wrap .bubble:nth-child(1) { left: 5%;  width: 40px; height: 40px; animation-duration: 18s; animation-delay: 0s; }
.bubbles-wrap .bubble:nth-child(2) { left: 15%; width: 20px; height: 20px; animation-duration: 12s; animation-delay: 2s; }
.bubbles-wrap .bubble:nth-child(3) { left: 28%; width: 60px; height: 60px; animation-duration: 22s; animation-delay: 4s; }
.bubbles-wrap .bubble:nth-child(4) { left: 42%; width: 30px; height: 30px; animation-duration: 15s; animation-delay: 1s; }
.bubbles-wrap .bubble:nth-child(5) { left: 55%; width: 50px; height: 50px; animation-duration: 20s; animation-delay: 6s; }
.bubbles-wrap .bubble:nth-child(6) { left: 68%; width: 25px; height: 25px; animation-duration: 14s; animation-delay: 3s; }
.bubbles-wrap .bubble:nth-child(7) { left: 80%; width: 45px; height: 45px; animation-duration: 19s; animation-delay: 5s; }
.bubbles-wrap .bubble:nth-child(8) { left: 92%; width: 18px; height: 18px; animation-duration: 11s; animation-delay: 7s; }

@keyframes subirBolha {
    0%   { transform: translateY(0) scale(1); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(-115vh) scale(1.15); opacity: 0; }
}

/* ---------- Responsivo base ---------- */
@media (max-width: 600px) {
    .container { padding: 0 16px; }
}