@charset "UTF-8";

/* ===========================================================
   Lavanderia Iracema — Estilos customizados
   Camadas especificas (tipografia fluida, animacoes, glass,
   app-bar, responsividade extrema) que complementam o
   tailwind.css self-hosted purged.
   =========================================================== */

/* Reset leve + tipografia */
html { scroll-behavior: smooth; }
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { text-wrap: balance; word-break: break-word; }
span, li, a, p { text-wrap: pretty; }

.fluid-h1 { font-size: clamp(1.5rem, 4.5vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; }
.fluid-h2 { font-size: clamp(1.35rem, 4vw, 2.5rem); line-height: 1.1; letter-spacing: -0.015em; }
.fluid-p  { font-size: clamp(13px, 1.6vw, 15px); line-height: 1.65; }

/* SPA Views */
[data-view] { display: none; opacity: 0; transition: opacity .35s ease-in-out; }
[data-view].active { display: block; opacity: 1; }

/* Navegação com efeito vidro */
.glass-nav {
    background: rgba(255, 255, 255, .78);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
}

/* Padrão de gradiente do hero */
.hero-pattern {
    background:
        radial-gradient(60% 50% at 80% 0%, rgba(14, 165, 233, .18) 0, transparent 60%),
        radial-gradient(50% 50% at 0% 100%, rgba(56, 189, 248, .15) 0, transparent 60%);
}

/* Esconde scrollbar horizontal do carrossel */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Pulso animado do botão WhatsApp */
@keyframes pulse-whatsapp {
    0%   { box-shadow: 0 0 0 0   rgba(37, 211, 102, .6); }
    70%  { box-shadow: 0 0 0 22px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0   rgba(37, 211, 102, 0); }
}
.btn-whatsapp-float { animation: pulse-whatsapp 2.2s infinite; }

/* Tambor girando */
@keyframes spin-drum {
    from { transform: rotate(0deg)   scale(1.05); }
    to   { transform: rotate(360deg) scale(1.05); }
}
.animate-spin-drum { animation: spin-drum 22s linear infinite; }

/* Bolhas de sabão */
@keyframes bubble-rise {
    0%   { transform: translateY(60px)   translateX(0)   scale(.3); opacity: 0; }
    20%  { opacity: .9; }
    50%  { transform: translateY(-160px) translateX(30px) scale(1.1); opacity: .85; }
    80%  { opacity: .7; }
    100% { transform: translateY(-420px) translateX(-30px) scale(1.5); opacity: 0; }
}
.bubble-soap {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(110% 110% at 30% 30%,
        rgba(255, 255, 255, .85) 0%,
        rgba(255, 255, 255, .05) 25%,
        rgba(14, 165, 233, .18)  75%,
        rgba(255, 255, 255, .5)  100%);
    border: 1px solid rgba(255, 255, 255, .45);
    box-shadow:
        inset 0 0 10px rgba(255, 255, 255, .45),
              0 0 14px rgba(255, 255, 255, .12);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: bubble-rise linear infinite;
    pointer-events: none;
    z-index: 50;
}

/* Reveal on scroll — com fallback se JS estiver desativado */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
                transform .7s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}
.reveal.active { opacity: 1; transform: translateY(0); will-change: auto; }
/* Fallback sem JS: mostra tudo após 3s caso IntersectionObserver falhe */
@media (scripting: none) {
    .reveal { opacity: 1 !important; transform: none !important; }
}
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* Cards de serviço */
.glass-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .88) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow:
        0 18px 40px rgba(8, 47, 73, .08),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}
.service-icon-bg      { background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%); box-shadow: 0 10px 30px rgba(14, 165, 233, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
.service-icon-bg.alt  { background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%); box-shadow: 0 10px 30px rgba(6, 182, 212, .35); }
.service-icon-bg.warm { background: linear-gradient(135deg, #f97316 0%, #c2410c 100%); box-shadow: 0 10px 30px rgba(249, 115, 22, .3); }
.service-icon-bg.deep { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); box-shadow: 0 10px 30px rgba(15, 23, 42, .4); }
.service-icon-bg.lush { background: linear-gradient(135deg, #10b981 0%, #047857 100%); box-shadow: 0 10px 30px rgba(16, 185, 129, .35); }

/* Bottom app bar (mobile) */
.app-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid rgba(15, 23, 42, .08);
    z-index: 55;
    padding-bottom: env(safe-area-inset-bottom);
}
.app-bar a {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    color: #475569;
    font-weight: 700;
    font-size: 10px;
    transition: color .25s ease;
}
.app-bar a:hover, .app-bar a.active { color: #0284c7; }
.app-bar a .ab-icon { width: 22px; height: 22px; }
@media (min-width: 1024px) { .app-bar { display: none; } }

/* FAQ accordion */
details.faq summary { list-style: none; cursor: pointer; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq[open] summary .faq-chevron { transform: rotate(180deg); }
details.faq summary .faq-chevron { transition: transform .25s ease; }

/* Foco visível (a11y) */
a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: 3px;
    border-radius: 8px;
}

/* Bloqueio de seleção, cópia e arrastar imagens */
body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input, textarea, [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
}
img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
    max-width: 100%;
    height: auto;
}

/* Reduce motion (a11y) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    /* O reveal-on-scroll depende da transicao opacity 0->1 ao ganhar .active.
       Com a transicao zerada aqui, o conteudo ficaria preso invisivel
       (opacity 0). Forca o estado final visivel — mesma rede de seguranca
       do @media (scripting: none) acima. */
    .reveal { opacity: 1 !important; transform: none !important; }
}

/* ===========================================================
   RESPONSIVIDADE EXTREMA — 200dp e telas micro
   Garante usabilidade em qualquer aparelho, inclusive smartwatch,
   foldables fechados e iframes embedados pequenos.
   =========================================================== */

@media (max-width: 250px) {
    body { word-wrap: break-word; hyphens: auto; overflow-x: hidden; }

    /* Grid colapsa para 1 coluna */
    .grid-200dp-col-1   { grid-template-columns: 1fr !important; }
    [class*="grid-cols-2"], [class*="grid-cols-3"], [class*="grid-cols-4"], [class*="grid-cols-5"] {
        grid-template-columns: 1fr !important;
    }

    /* Espaçamentos comprimidos */
    .p-200dp-small      { padding: .5rem !important; }
    .gap-200dp-small    { gap: .5rem !important; }
    [class*="px-"]      { padding-left: .5rem !important; padding-right: .5rem !important; }
    [class*="py-"]      { padding-top: 1rem !important; padding-bottom: 1rem !important; }

    /* Tipografia */
    .fluid-h1, .fluid-h2 { font-size: 1.1rem !important; line-height: 1.2 !important; }
    .fluid-p            { font-size: 11px !important; }
    h3                  { font-size: 13px !important; }

    /* Flexbox cai para coluna */
    .flex-col-200dp     { flex-direction: column !important; align-items: stretch !important; text-align: center; }
    .hidden-200dp       { display: none !important; }

    /* Cards do carrossel ocupam quase toda a largura */
    .service-card       { width: 86vw !important; max-width: 86vw !important; }

    /* App bar mais compacta */
    .app-bar a          { font-size: 8px; padding: 6px 2px; }
    .app-bar a .ab-icon { width: 18px; height: 18px; }

    /* Foto do Jairo encolhe */
    .jairo-photo-wrap img { width: 130px !important; }
    .jairo-photo-wrap .absolute { display: none !important; }

    /* WhatsApp FAB menor */
    .btn-whatsapp-float { padding: 10px !important; }
    .btn-whatsapp-float svg { width: 22px !important; height: 22px !important; }

    /* Logo e textos da nav menores */
    header img            { width: 24px !important; }
    header span           { font-size: 10px !important; }
    /* A logo (shrink-0) empurrava o botao do menu pra fora da tela a 200px.
       Esconde so a tagline larga ("Lavanderia · Curitiba", tracking-[0.2em]);
       o nome "Iracema" continua visivel e o botao do menu volta pra tela. */
    header a[aria-label] span:last-child { display: none !important; }

    /* Botões CTA cabem na largura */
    a, button             { min-width: 0 !important; }
    .rounded-2xl, .rounded-3xl, .rounded-[2.5rem], .rounded-[3rem] {
        border-radius: 12px !important;
    }

    /* Iframe mapa não estoura */
    iframe { min-height: 200px !important; }

    /* Cápsula do carrossel cabe */
    #carousel-prev, #carousel-next { width: 26px !important; height: 26px !important; }
    #carousel-progress { max-width: 60px !important; }

    * { min-width: 0 !important; max-width: 100vw; }
}

/* 320 px */
@media (max-width: 320px) {
    .fluid-h1 { font-size: 1.3rem !important; }
    .fluid-h2 { font-size: 1.15rem !important; }
}

/* 360 px */
@media (max-width: 360px) {
    .fluid-h1 { font-size: 1.45rem !important; }
    .fluid-h2 { font-size: 1.25rem !important; }
    .jairo-photo-wrap img { width: 160px !important; }
}

/* Largura/overflow globais */
body, html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
@media (max-width: 320px) {
    iframe { min-height: 250px !important; }
}

/* SVG sprite: garante invisibilidade absoluta e cascateamento via use */
svg.svg-sprite,
svg[style*="display:none"],
svg[style*="display: none"] {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
svg use { pointer-events: none; }
.fill-current use, [class*="fill-"] use { fill: inherit; }


/* Bubble animations — extraidos do inline style */
.bubble-soap.b-1 { animation-duration: 5s; animation-delay: 0s; }
.bubble-soap.b-2 { animation-duration: 4s; animation-delay: 1.5s; }
.bubble-soap.b-3 { animation-duration: 7s; animation-delay: .5s; }
.bubble-soap.b-4 { animation-duration: 4.5s; animation-delay: 2s; }
.bubble-soap.b-5 { animation-duration: 6s; animation-delay: 1s; }
.bubble-soap.b-6 { animation-duration: 3.5s; animation-delay: .2s; }
.bubble-soap.b-7 { animation-duration: 8s; animation-delay: 2.5s; }
.bubble-soap.b-8 { animation-duration: 4.2s; animation-delay: .8s; }