<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DermoPura | Alta Performance em Skincare e Dermocosméticos</title>
<meta name="description" content="Descubra a linha completa de dermocosméticos DermoPura. Produtos para pele oleosa, acneica, madura e sensível. Ciência aplicada à beleza." />
<meta name="keywords" content="dermocosméticos, skincare, produtos para pele, maquiagem, beleza, rotina de skincare, protetor solar, hidratação facial" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://dermopura.com.br/" />
<meta property="og:title" content="DermoPura | Alta Performance em Skincare" />
<meta property="og:description" content="Ciência e beleza unidas para a saúde da sua pele. Conheça nossos produtos recomendados por dermatologistas." />
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<!-- Tailwind CSS 4 CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
nude: '#FDF9F6',
cream: '#FAF3EF',
rose: '#F4E7E3',
sage: '#DDE1D7',
text: '#2C2C2C',
accent: '#8E7A6E',
}
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
serif: ['Cormorant Garamond', 'serif'],
}
}
}
}
</script>
<!-- Alpine.js (Para Interatividade em arquivo único) -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<!-- Schema.org Markup -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Linha Expert DermoPura",
"image": "https://dermopura.com.br/icon.png",
"description": "Dermocosméticos de alta performance testados dermatologicamente.",
"brand": {
"@type": "Brand",
"name": "DermoPura"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.9",
"reviewCount": "1205"
}
}
</script>
<style>
[x-cloak] { display: none !important; }
html { scroll-behavior: smooth; }
body { background-color: #FDF9F6; color: #2C2C2C; }
.perspective-1000 { perspective: 1000px; }
</style>
</head>
<body x-data="{ modal: null, mobileMenu: false }">
<!-- Nav -->
<nav class="fixed top-0 w-full z-50 bg-white/80 backdrop-blur-md border-b border-[#8E7A6E]/10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-20 items-center">
<div class="flex items-center gap-2">
<svg class="w-8 h-8 text-brand-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
<span class="text-2xl font-serif tracking-tight">DermoPura</span>
</div>
<div class="hidden md:flex items-center gap-8 text-sm font-medium uppercase tracking-widest text-[#8E7A6E]">
<a href="#produtos" class="hover:text-brand-text transition-colors">Produtos</a>
<a href="#ciencia" class="hover:text-brand-text transition-colors">Ciência</a>
<a href="#faq" class="hover:text-brand-text transition-colors">Dúvidas</a>
<button @click="modal = 'find'" class="px-6 py-3 border border-brand-accent/30 rounded-full hover:bg-brand-accent hover:text-white transition-all text-xs">
Encontre uma Farmácia
</button>
</div>
<div class="md:hidden">
<button @click="mobileMenu = !mobileMenu" class="text-brand-accent p-2">
<svg x-show="!mobileMenu" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/></svg>
<svg x-show="mobileMenu" x-cloak class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div x-show="mobileMenu" x-cloak class="md:hidden bg-brand-cream border-t border-brand-accent/10 py-6 px-4">
<div class="flex flex-col gap-4 text-center">
<a href="#produtos" @click="mobileMenu = false" class="text-lg font-serif">Produtos</a>
<a href="#ciencia" @click="mobileMenu = false" class="text-lg font-serif">Ciência e Pesquisa</a>
<a href="#faq" @click="mobileMenu = false" class="text-lg font-serif">Perguntas Frequentes</a>
</div>
</div>
</nav>
<main>
<!-- Hero -->
<section class="pt-40 pb-20 px-4">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center gap-12">
<div class="flex-1 space-y-8">
<div class="inline-block px-4 py-1.5 bg-brand-sage/40 border border-brand-accent/20 text-brand-accent rounded-full text-xs font-semibold tracking-wider italic">
CIÊNCIA PARA A SUA PELE • 2026
</div>
<h1 class="text-5xl md:text-7xl font-serif text-brand-text leading-[1.1]">
Dermocosméticos <br />
<span class="italic text-brand-accent">de Alta Performance</span>
</h1>
<p class="text-lg md:text-xl text-brand-accent max-w-xl font-light leading-relaxed">
Desenvolvidos com ativos dermatológicos de última geração, os produtos DermoPura tratam, protegem e rejuvenescem a sua pele de forma inteligente e segura.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<button class="bg-brand-accent text-white px-8 py-4 rounded-full shadow-lg shadow-brand-accent/20 hover:scale-105 transition-transform font-medium uppercase tracking-widest text-xs">
Conheça a Linha Completa
</button>
<button class="border border-brand-accent text-brand-accent px-8 py-4 rounded-full hover:bg-brand-accent/5 transition-colors font-medium uppercase tracking-widest text-xs">
Saiba Mais sobre a Ciência
</button>
</div>
</div>
<div class="flex-1 relative w-full aspect-square bg-brand-cream rounded-[4rem] flex items-center justify-center overflow-hidden">
<div class="absolute inset-0 border-[40px] border-brand-rose/20 rounded-full scale-110 opacity-50 animate-[spin_40s_linear_infinite]"></div>
<div class="relative z-10 text-center p-8 space-y-4">
<svg class="w-24 h-24 mx-auto text-brand-accent/40" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
<p class="font-serif italic text-2xl text-brand-accent">Pureza e Eficácia</p>
</div>
</div>
</div>
</section>
<!-- Trust Badges -->
<div class="bg-brand-sage/30 flex flex-wrap justify-center gap-8 py-8 px-4 border-y border-brand-accent/5">
<div class="flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.2em] text-brand-accent">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
Eficácia Comprovada
</div>
<div class="flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.2em] text-brand-accent">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
Entrega em todo o Brasil
</div>
<div class="flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.2em] text-brand-accent">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
7 dias para devolução
</div>
</div>
<!-- Science -->
<section id="ciencia" class="py-24 bg-brand-cream/40">
<div class="max-w-7xl mx-auto px-4">
<div class="text-center mb-16 space-y-4">
<h2 class="text-4xl md:text-5xl font-serif">A Ciência por trás da Beleza</h2>
<p class="text-brand-accent max-w-2xl mx-auto font-light">Combinamos o melhor da natureza com a precisão da biotecnologia para resultados reais.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-10 rounded-3xl border border-brand-accent/5 hover:shadow-xl transition-all duration-500">
<div class="w-16 h-16 bg-brand-rose/30 rounded-2xl flex items-center justify-center text-brand-accent mb-6">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
</div>
<h3 class="text-2xl font-serif mb-4">Ativos Inteligentes</h3>
<p class="text-brand-accent font-light leading-relaxed">Fórmulas com Ácido Hialurônico, Retinol e Vitamina C de liberação prolongada para maior absorção.</p>
</div>
<div class="bg-white p-10 rounded-3xl border border-brand-accent/5 hover:shadow-xl transition-all duration-500">
<div class="w-16 h-16 bg-brand-rose/30 rounded-2xl flex items-center justify-center text-brand-accent mb-6">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
</div>
<h3 class="text-2xl font-serif mb-4">Segurança Garantida</h3>
<p class="text-brand-accent font-light leading-relaxed">Produtos hipoalergênicos testados em laboratórios independentes e recomendados por especialistas.</p>
</div>
<div class="bg-white p-10 rounded-3xl border border-brand-accent/5 hover:shadow-xl transition-all duration-500">
<div class="w-16 h-16 bg-brand-rose/30 rounded-2xl flex items-center justify-center text-brand-accent mb-6">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
</div>
<h3 class="text-2xl font-serif mb-4">Eco-Consciência</h3>
<p class="text-brand-accent font-light leading-relaxed">Ingredientes 100% biodegradáveis e embalagens recicláveis com selo carbono neutro.</p>
</div>
</div>
</div>
</section>
<!-- Products Grid -->
<section id="produtos" class="py-24">
<div class="max-w-7xl mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-4">
<div class="space-y-2">
<h2 class="text-4xl md:text-5xl font-serif">Linha de Tratamento</h2>
<p class="text-brand-accent font-light italic">Desenvolvida para as diversas necessidades da pele brasileira.</p>
</div>
<a href="#" class="text-brand-accent underline underline-offset-8 text-xs font-bold uppercase tracking-[0.2em] hover:text-brand-text transition-colors">Catálogo Completo</a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="group relative h-[450px] rounded-[2.5rem] overflow-hidden bg-brand-rose/40 cursor-pointer">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 p-8 text-white w-full">
<h3 class="text-2xl font-serif mb-2">Limpeza Facial</h3>
<p class="text-sm opacity-80 mb-4 font-light">Géis e cremes micelares.</p>
<div class="h-0 group-hover:h-12 transition-all duration-500 overflow-hidden">
<button class="bg-white text-brand-text px-8 py-2 rounded-full text-[10px] font-bold uppercase tracking-widest">Ver Linha</button>
</div>
</div>
</div>
<div class="group relative h-[450px] rounded-[2.5rem] overflow-hidden bg-brand-sage/40 cursor-pointer">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 p-8 text-white w-full">
<h3 class="text-2xl font-serif mb-2">Hidratação</h3>
<p class="text-sm opacity-80 mb-4 font-light">Séruns concentrados anti-aging.</p>
<div class="h-0 group-hover:h-12 transition-all duration-500 overflow-hidden">
<button class="bg-white text-brand-text px-8 py-2 rounded-full text-[10px] font-bold uppercase tracking-widest">Ver Linha</button>
</div>
</div>
</div>
<div class="group relative h-[450px] rounded-[2.5rem] overflow-hidden bg-brand-cream/60 cursor-pointer">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 p-8 text-white w-full">
<h3 class="text-2xl font-serif mb-2">Proteção</h3>
<p class="text-sm opacity-80 mb-4 font-light">Efeito blur e FPS 60+.</p>
<div class="h-0 group-hover:h-12 transition-all duration-500 overflow-hidden">
<button class="bg-white text-brand-text px-8 py-2 rounded-full text-[10px] font-bold uppercase tracking-widest">Ver Linha</button>
</div>
</div>
</div>
<div class="group relative h-[450px] rounded-[2.5rem] overflow-hidden bg-brand-nude border border-brand-accent/10 cursor-pointer shadow-soft">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 p-8 text-white w-full">
<h3 class="text-2xl font-serif mb-2">Maquiagem</h3>
<p class="text-sm opacity-80 mb-4 font-light">Maquiagem que trata enquanto colore.</p>
<div class="h-0 group-hover:h-12 transition-all duration-500 overflow-hidden">
<button class="bg-white text-brand-text px-8 py-2 rounded-full text-[10px] font-bold uppercase tracking-widest">Ver Linha</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section id="faq" class="py-24 bg-brand-nude">
<div class="max-w-3xl mx-auto px-4" x-data="{ active: null }">
<div class="text-center mb-16 space-y-4">
<h2 class="text-4xl font-serif">Dúvidas Frequentes</h2>
<p class="text-brand-accent font-light italic">Tudo o que você precisa saber sobre a rotina ideal.</p>
</div>
<div class="space-y-4">
<template x-for="(f, i) in [
{q: 'O que diferencia os dermocosméticos da maquiagem comum?', a: 'Dermocosméticos são formulados com ativos farmacológicos testados que penetram na derme, tratando a pele ao longo do tempo. Diferente dos cosméticos comuns, eles possuem eficácia clínica comprovada contra manchas, rugas e oleosidade.'},
{q: 'Posso usar os produtos DermoPura em pele sensível?', a: 'Com certeza. Nossa linha Expert para pele sensível é formulada com ativos calmantes, sem fragrância e sem álcool, minimizando o risco de irritações.'},
{q: 'Como montar uma rotina de skincare simples com seus produtos?', a: 'Recomendamos 3 passos essenciais: 1. Limpeza Micelar, 2. Sérum de Tratamento (Hidratação ou Anti-Aging) e 3. Proteção Solar. Esta rotina básica garante saúde e luminosidade.'},
{q: 'Onde encontrar a DermoPura nas melhores farmácias?', a: 'Estamos presentes em todas as grandes redes do Brasil, incluindo Drogasil, Droga Raia, Pague Menos e Farmácias São Paulo.'}
]">
<div class="border-b border-brand-accent/10 pb-4">
<button @click="active = active === i ? null : i" class="w-full flex justify-between items-center text-left py-4 group">
<span class="text-xl font-serif group-hover:text-brand-accent transition-colors" x-text="f.q"></span>
<svg :class="active === i ? 'rotate-180' : ''" class="w-5 h-5 text-brand-accent transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7"/></svg>
</button>
<div x-show="active === i" x-cloak x-collapse class="text-brand-accent/70 font-light leading-relaxed pb-6" x-text="f.a"></div>
</div>
</template>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-white pt-20 pb-10 border-t border-brand-accent/10">
<div class="max-w-7xl mx-auto px-4 grid grid-cols-1 md:grid-cols-4 gap-12 mb-20">
<div class="space-y-6">
<div class="flex items-center gap-2">
<svg class="w-6 h-6 text-brand-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
<span class="text-xl font-serif">DermoPura</span>
</div>
<p class="text-brand-accent/50 text-sm leading-relaxed">Ética, Ciência e Beleza unidas para o cuidado diário da sua pele.</p>
</div>
<div>
<div>
<h4 class="font-serif mb-6 text-lg tracking-tight">Suporte Legal</h4>
<ul class="text-sm space-y-4 text-brand-accent/60">
<li><button @click="modal = 'terms'" class="hover:text-brand-accent transition-colors">Termos de Serviço</button></li>
<li><button @click="modal = 'privacy'" class="hover:text-brand-accent transition-colors">Política de Privacidade</button></li>
</ul>
</div>
<div>
<h4 class="font-serif mb-6 text-lg tracking-tight">Diga Olá</h4>
<div class="flex gap-2">
<input type="text" placeholder="Seu melhor email" class="bg-brand-cream border-none rounded-full px-4 py-3 text-[10px] uppercase tracking-widest flex-1 focus:ring-1 focus:ring-brand-accent">
<button class="bg-brand-accent text-white p-3 rounded-full hover:bg-brand-text transition-colors shadow-lg"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg></button>
</div>
</div>
</div>
<div class="text-center text-[10px] text-brand-accent/30 uppercase tracking-[0.3em] pt-10 border-t border-brand-accent/5">
© 2026 DermoPura Cosméticos Ltd. - Tecnologia Dermatológica Avançada
</div>
</footer>
<!-- Modals -->
<div x-show="modal" x-cloak x-transition.opacity class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-brand-text/60 backdrop-blur-sm">
<div @click="modal = null" class="absolute inset-0"></div>
<div x-show="modal" x-transition.scale.90 class="relative bg-white w-full max-w-2xl max-h-[85vh] overflow-y-auto rounded-[3rem] p-10 md:p-14 shadow-2xl">
<button @click="modal = null" class="absolute top-8 right-8 p-3 hover:bg-brand-cream rounded-full transition-colors">
<svg class="w-5 h-5 text-brand-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
<!-- Content Privacy -->
<div x-show="modal === 'privacy'" class="space-y-8 text-brand-text text-sm">
<h2 class="text-4xl font-serif mb-4">Política de Privacidade</h2>
<p class="font-bold opacity-60">Última atualização: 15 de maio de 2026.</p>
<p>Na **DermoPura**, respeitamos sua privacidade. Seus dados cadastrais como nome, e-mail e preferências de pele são utilizados exclusivamente para personalizar suas recomendações e processar seus pedidos. Não compartilhamos suas informações com terceiros para fins de marketing ou publicidade sem seu consentimento explícito.</p>
<h3 class="text-2xl font-serif">1. Coleta e Uso</h3>
<p>Utilizamos cookies para entender seu comportamento em nosso portal e oferecer uma navegação mais rápida. Para fins de LGPD, você pode solicitar a exportação ou exclusão total dos seus dados enviando um e-mail para [email protected].</p>
<h3 class="text-2xl font-serif">2. Segurança</h3>
<p>Seus dados são protegidos por criptografia SSL de 256 bits, garantindo que toda transação financeira e troca de mensagens seja inviolável.</p>
</div>
<!-- Content Terms -->
<div x-show="modal === 'terms'" class="space-y-8 text-brand-text text-sm">
<h2 class="text-4xl font-serif mb-4">Termos de Serviço</h2>
<p class="font-bold opacity-60">Última atualização: 15 de maio de 2026.</p>
<p>Bem-vindo à plataforma DermoPura. Ao acessar nosso site, você concorda em cumprir estes termos de serviço. O conteúdo deste portal destina-se apenas a fins informativos e não substitui de forma alguma o conselho médico profissional.</p>
<h3 class="text-2xl font-serif">1. Uso de Produtos</h3>
<p>A DermoPura Lab não se responsabiliza pelo uso indevido de seus dermocosméticos. Certifique-se de ler a bula e fazer o teste de sensibilidade antes de aplicar qualquer produto em áreas extensas da pele.</p>
<h3 class="text-2xl font-serif">2. Direitos Autorais</h3>
<p>Todo o material textual e visual aqui presente é propriedade intelectual da DermoPura Cosméticos Ltd. O uso não autorizado de nossas imagens ou textos para fins comerciais é estritamente proibido.</p>
</div>
<!-- Find Pharmacy -->
<div x-show="modal === 'find'" class="space-y-8 text-brand-text text-center">
<div class="w-20 h-20 bg-brand-rose/30 rounded-full flex items-center justify-center mx-auto mb-8">
<svg class="w-10 h-10 text-brand-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
</div>
<h2 class="text-4xl font-serif">Onde nos Encontrar</h2>
<p class="font-light italic px-4">Encontre a DermoPura nas gôndolas das melhores farmácias e perfumarias do Brasil.</p>
<div class="grid grid-cols-2 gap-4 text-xs font-bold uppercase tracking-widest text-brand-accent">
<div class="p-6 border border-brand-accent/10 rounded-[2rem] hover:bg-brand-cream transition-colors">Droga Raia</div>
<div class="p-6 border border-brand-accent/10 rounded-[2rem] hover:bg-brand-cream transition-colors">Drogasil</div>
<div class="p-6 border border-brand-accent/10 rounded-[2rem] hover:bg-brand-cream transition-colors">Pague Menos</div>
<div class="p-6 border border-brand-accent/10 rounded-[2rem] hover:bg-brand-cream transition-colors">São Paulo</div>
</div>
<button @click="modal = null" class="w-full bg-brand-accent text-white py-5 rounded-full font-bold uppercase tracking-[0.2em] shadow-xl hover:scale-[1.02] transition-transform">Voltar para a Loja</button>
</div>
</div>
</div>
</body>
</html>9 views