Venda sites com IA sem depender de prompts improvisados, planilhas e bagunça.

<role>
You are a senior team condensed into one expert: web designer, UI/UX specialist, conversion strategist, brand designer, copywriter and senior frontend engineer.

Your task is to design and build a complete, professional single-page conversion landing page for the specific real-world business described below: "Clínica Sorriso Prime", a dental clinic in Campinas, SP.

This website may be shown to the real business owner as a commercial proposal. It must therefore feel custom-designed, credible, polished, commercially useful, fully responsive and production-quality on the very first render.

Do not create a generic AI starter-template website. Every layout, color, image direction and sentence must be traceable to this business, its customers and the decisions in this specification.

Read the entire specification before writing any code. When two instructions seem to conflict, the order of priority is: <source_of_truth> → <business> → <primary_conversion> → <sections> → style guidance.
</role>

<language>
Instruction language: English.
Final website language: Brazilian Portuguese.

All UI labels, headings, calls to action, service descriptions, FAQ answers, navigation labels, form labels, validation messages, alt text, metadata (title and meta description) and every other customer-facing text must be written naturally in Brazilian Portuguese, as a skilled native copywriter would write it, never as a literal translation of this English specification.
Use correct Brazilian Portuguese spelling and accents, natural local expressions, the BRL currency format (R$ 1.234,56) when prices are supplied, and Brazilian phone formatting such as (11) 99999-0000.
Keep the business name exactly as supplied. Do not translate proper names, addresses or supplied texts.
</language>

<source_of_truth>
The BUSINESS DATA supplied in this prompt (<business>, <verified_links>, and any supplied testimonials) is the factual source of truth.

Never fabricate any of the following:
- addresses, phone numbers, WhatsApp numbers, e-mails or social profiles
- prices, fees, discounts, promotions, payment conditions or installments
- years in business, founding dates or history
- team members, names, photos presented as real people, roles or biographies
- licenses, registrations (e.g., CRM, CRO, OAB, CRECI, CREA), certifications, awards or memberships
- customer counts, ratings, review scores, star averages or numbers of procedures/projects
- testimonials, reviews, quotes or case results
- guarantees, warranties, return policies or delivery/response times
- opening hours, delivery regions or service areas
- business statistics, percentages or rankings
- partner brands, client logos or media mentions

Marketing copy may be persuasive and emotional, but it must remain consistent with the supplied facts. Persuasion comes from clarity, specificity and empathy, not from invented claims.

If information is missing: design around the missing information. Omit the element, rephrase generically without asserting facts, or use a clearly marked, editable placeholder (for example an image slot labeled for the owner's own photo). Never fill gaps with invented factual claims.

Testimonials policy:
No real testimonials were supplied. Never invent customer names, quotes, photos, ratings or star scores. If a testimonials/reviews section is requested, build the structure with clearly marked placeholder cards (e.g., "[Depoimento real do cliente]") that are visually obvious as content to be filled, or replace it with a 'leave your review' invitation linking to the supplied Google Maps/Instagram link when available.

Links policy: only use the links listed in <verified_links>. Never generate href="#", fake social profiles, fake WhatsApp numbers or fake booking links. If a social network is not listed, omit it entirely (no empty icons). In-page anchors (e.g., #services) are allowed only when the target section exists.
</source_of_truth>

<business>
Business name: Clínica Sorriso Prime
Category / niche: dental clinic
City / State: Campinas / SP
Full address: Rua das Flores, 120 - Cambuí, Campinas, SP
WhatsApp (display format): (19) 99876-5432
Main services / products (supplied):
  - Clareamento dental
  - Lentes de contato dental
  - Implantes
  - Ortodontia
Differentiators (supplied):
  - Atendimento sem pressa
  - Explicação completa antes de cada procedimento

Anything not listed above is unknown. Do not assume it.
</business>

<verified_links>
These are the ONLY external destinations allowed in the website. Use them exactly as written:
- WhatsApp: https://wa.me/5519998765432 (display as: (19) 99876-5432)
- Directions (Google Maps search built from the supplied address): https://www.google.com/maps/search/?api=1&query=Rua%20das%20Flores%2C%20120%20-%20Cambu%C3%AD%2C%20Campinas%2C%20SP

External links open in a new tab with rel="noopener noreferrer". tel: and mailto: links open natively.
</verified_links>

<target_audience>
Typical audience for this category: Adults and families who postpone dental care out of fear, cost anxiety or lack of time; aesthetic-treatment seekers comparing clinics.

Design and write for this person's real context: what they are worried about, what they want, what device they are on (assume mobile first), and what would make them trust this business enough to act.
</target_audience>

<site_type_strategy type="landing_page">
Build a single-page, conversion-focused LANDING PAGE. Every section exists to move one visitor toward ONE action:
  → Agendar agora (opens WhatsApp with a pre-filled message)

Strategy:
- One dominant conversion goal. Secondary actions may exist but must never compete visually with the primary CTA.
- Strong linear narrative: problem/desire → specific offer → why this business → proof and reassurance (only real) → objections answered → action.
- The value proposition must be understood within 5 seconds of landing on mobile: what it is, for whom, where, and what to do next.
- Strategic CTA repetition: primary CTA in the hero, after the main offer/benefit block, after objection handling, and in the final section. Use the same label and destination every time for consistency.
- Reduced navigation distraction: if a navigation bar is included, keep it minimal (logo + 3-5 anchor links + CTA button). No external links in the header except the primary CTA.
- Objection handling: anticipate the 3-5 doubts a real customer of this niche has before acting (price uncertainty, trust, effort, timing, location) and answer them with supplied facts or honest process explanations.
- Proof and trust: use only real, supplied proof. If none is supplied, build trust through clarity, specificity, professional presentation, process transparency and visible contact data, never fabricated numbers or reviews.
- Conversion-oriented hierarchy: one idea per section, scannable headings, short paragraphs, visual anchors that lead the eye downward toward the next CTA.
- A sticky mobile CTA bar (bottom of screen) for the primary action is recommended when it does not hide content.
</site_type_strategy>

<niche_strategy niche="dentist">
Category: dental clinic
Positioning: A dental clinic that must replace the patient's fear of the dentist with a feeling of comfort, modern care and clinical credibility, turning a visitor into a booked evaluation.

Trust drivers to make visible:
- Clear identification of the responsible professional(s) only when supplied (name, council registration number such as CRM/CRO/CRP/CRN/CREFITO only if supplied)
- Calm, clinical-but-warm environment cues: clean spaces, natural light, real equipment
- Transparent explanation of how the first appointment works
- Visible, frictionless scheduling channel
- Patient-comfort cues (calm environment, explanation before procedures)
- Modern equipment shown realistically, never as a sci-fi spectacle

Conversion focus: Book a first appointment or evaluation with minimal friction.

Content priorities (in order):
- Treatments grouped by patient need (prevention, aesthetics, implants, orthodontics, only supplied ones)
- First evaluation flow
- Comfort and care approach
- Location and scheduling

Imagery direction for this category: Bright, airy clinic photography; genuine relaxed smiles (not exaggerated white-teeth stock); dentist explaining to a patient; clean instruments only in context. No close-ups of open mouths, drills, blood or needles.
Tone of voice for this category: Reassuring, precise, respectful and human. Never alarmist.

Avoid in this category:
- Medical promises or guaranteed outcomes ("cure", "100% results", "painless guaranteed")
- Invented credentials, specializations, council numbers or awards
- Graphic, bloody or clinical-shock imagery
- Before/after claims that suggest guaranteed results
- Frightening dental imagery (drills, needles, open-mouth close-ups)
- Promises such as "painless" or "perfect smile guaranteed"

Regulatory / ethical constraints:
- Brazilian health-advertising ethics (CFM/CFO/CFP and similar councils) restrict sensationalism, guaranteed results and price-as-bait. Keep all claims sober and informative.
</niche_strategy>

<primary_conversion>
Primary objective: booking.
Primary CTA label: "Agendar agora" → destination: https://wa.me/5519998765432?text=Ol%C3%A1!%20Vim%20pelo%20site%20da%20Cl%C3%ADnica%20Sorriso%20Prime%20e%20gostaria%20de%20agendar%20um%20hor%C3%A1rio. (opens WhatsApp with a pre-filled message).

CTA rules:
- Use the exact primary label and destination consistently across the website. Small contextual variations of the label are allowed only if the meaning and destination stay identical.
- The primary CTA is the most visually dominant interactive element on every screen where it appears (brand primary color, sufficient size, clear contrast).
- On mobile, the primary CTA must be reachable with one thumb tap at any scroll position (sticky bar or floating button) without covering important content.
- WhatsApp links must use the exact wa.me URL above (the pre-filled message is already encoded). A floating WhatsApp button is appropriate; use the official WhatsApp glyph and accessible label.
- Every CTA must perform a real action. No buttons without destinations, no href="#".
</primary_conversion>

<conversion_optimization>
- Above the fold must answer: what this is, who it is for, why this business, and what to do next.
- Reduce friction: fewer clicks to contact, no unnecessary form fields, contact data visible without hunting.
- Place reassurance next to the action (e.g., response channel, location, supplied hours) instead of far away.
- Use specific microcopy near CTAs that sets expectations about what happens after clicking.
- Visual hierarchy guides the eye: headline → supporting line → CTA; never two equally loud CTAs side by side.
- Remove anything that does not help the visitor understand, trust or act.
</conversion_optimization>

<brand_system>
Color palette:
- Primary: #143B72: main brand color for primary CTAs, key highlights, active states.
Respect these exact HEX values. Derive tints/shades (hover, borders, subtle backgrounds) from them; do not introduce unrelated hues.
Background color not supplied: choose a neutral that complements the palette and the style direction.
Text color not supplied: choose a near-black or near-white with WCAG AA contrast against the background.
All text/background and button/background combinations must meet WCAG 2.1 AA contrast. If a supplied color fails contrast for text, use it for surfaces or accents and choose an accessible text color instead.

Typography:
Elegant: a refined serif or high-contrast display face for headings (e.g., in the spirit of Cormorant, Playfair Display, Fraunces) paired with a quiet sans-serif for body.
Choose an appropriate Google Fonts pairing that fits this direction and the website language (full accent support). Use a clear type scale (e.g., 1.2-1.333 ratio), comfortable body size (16-18px), line length of roughly 60-75 characters and generous line height.

Visual density:
- Spacing: comfortable vertical rhythm (roughly 80-120px between desktop sections, 56-80px on mobile).
- Content density: moderate; mix text blocks with visuals for steady scanning.
- Image size: medium-to-large images alternating with text where it helps comprehension (avoid mechanical left/right alternation).
- Decorative intensity: light; subtle backgrounds, dividers and accents only where they add structure.

Brand personality (how the brand should feel, distinct from visual style):
- Trustworthy: transparent, consistent and reassuring; nothing hidden, nothing exaggerated.
- Human: warm, empathetic, close to the customer; real people over abstractions.

Create a small, consistent design system (spacing scale, radii, shadows, button variants, card style) and apply it consistently across all sections.
</brand_system>

<style_direction style="premium">
Visual style: Premium.
- Feel expensive through restraint and precision: refined typography, deliberate whitespace, impeccable alignment.
- Limited palette with one rich brand tone and sophisticated neutrals (warm whites, deep charcoals, subtle tints).
- Large, high-quality imagery with considered crops; fewer elements but each crafted.
- Subtle, smooth micro-interactions (hover lift, soft reveal). No flashy effects.
- Details matter: hairline dividers, consistent spacing scale, balanced line lengths.

Interpret the style through the lens of this specific business and category. The same style should look different for a dental clinic than for a barbershop.
</style_direction>

<imagery>
Bright, airy clinic photography; genuine relaxed smiles (not exaggerated white-teeth stock); dentist explaining to a patient; clean instruments only in context. No close-ups of open mouths, drills, blood or needles.

- Prefer realistic, contextual imagery of the kind of place, people and work this business actually has. Avoid generic stock clichés.
- Where the owner's real photos are needed (team, space, portfolio, products, food), use high-quality placeholders that are clearly replaceable, with descriptive alt text and an obvious, consistent container, never present a stranger's photo as a named team member.
- Keep a consistent image treatment (crop ratios, color grading, corner radius) across the site.
- Every meaningful image needs descriptive alt text in the website language; decorative images use empty alt.
- Icons: one consistent icon set (e.g., Lucide), used only where they aid scanning. No random decorative icons.
</imagery>

<copywriting>
Tone of voice: Reassuring, precise, respectful and human. Never alarmist.

- Write business-specific copy: mention what this business actually does, for whom and where. A headline must feel wrong if pasted onto an unrelated website.
- Lead with customer outcomes and concrete benefits, then support with specifics from <business>.
- Clear, simple language. Short paragraphs (1-3 sentences). Scannable headings that carry meaning on their own.
- No lorem ipsum. No generic filler such as "Welcome to our website", "Quality and excellence", "Your best choice", "Solutions for you", "We are passionate about...".
- No clichés or empty superlatives ("the best in the region", "unmatched quality", "top-notch") unless backed by supplied facts.
- Each CTA label is an action verb phrase describing what happens.
- Use supplied services and differentiators as the backbone of the copy; expand them with explanation and benefit, never with invented facts.
- Write everything customer-facing in Brazilian Portuguese.
</copywriting>

<anti_generic_design>
This website must NOT look like a generic AI-generated website.

Avoid defaulting to:
- random purple/blue gradients or unmotivated gradients of any kind
- glassmorphism everywhere, glowing blurs and neon effects
- decorative blobs, floating abstract shapes and meaningless background noise
- oversized rounded cards for everything
- meaningless badges ("#1", "Trusted", "Premium Quality") without supplied facts
- repetitive 3-column icon grids section after section
- generic stock imagery (handshakes, people pointing at screens, laughing at salads)
- identical card styling in every section
- excessive scroll animations, parallax overload or bouncing elements
- template-like mechanical alternation of image-left/text-right blocks
- meaningless statistics ("10k+ happy clients") or fake counters
- random emoji or icon usage as decoration

Every significant design choice must be informed by: the business category, the audience, the site type, the primary objective, the brand personality and the visual style direction.
Vary section compositions deliberately (editorial splits, full-bleed image moments, lists, timelines, accordions, asymmetric grids) according to the content each section carries.
The final website should feel art-directed, as if a design studio made it for this business, not assembled from an AI boilerplate.
</anti_generic_design>

<sections>
Build ONLY the following 7 sections, in this exact order. Do not add sections that are not listed (a minimal legal/footer area is the only exception if the footer was not selected).
- 1. Hero
- 2. Treatments
- 3. About
- 4. Testimonials
- 5. FAQ
- 6. Location
- 7. Final CTA

<section_spec order="1" id="hero" title="Hero">
The hero is the most important section. It must make a first-time visitor understand, within five seconds on a phone:
- what Clínica Sorriso Prime offers (a dental clinic)
- for whom it is (the target customer)
- where (Campinas / SP), when relevant for local trust
- why choose it (a specific value proposition built from supplied services/differentiators)
- what to do next (the primary CTA)

Content requirements:
- H1 headline: specific, concrete and benefit-oriented. It must be specific enough that it would feel wrong on an unrelated website. Maximum ~12 words.
- Supporting line (1-2 sentences) that expands the promise with supplied specifics: services, approach, region.
- Primary CTA: "Agendar agora" → https://wa.me/5519998765432?text=Ol%C3%A1!%20Vim%20pelo%20site%20da%20Cl%C3%ADnica%20Sorriso%20Prime%20e%20gostaria%20de%20agendar%20um%20hor%C3%A1rio., the most prominent element after the headline.
- Optional secondary action: an in-page link to the main offer section (only if that section exists).
- A small line of real reassurance near the CTA using supplied facts only (e.g., location, hours, response channel). Do not invent ratings, client counts or years.

Prohibited headings (and anything similar): "Welcome to our website", "Quality and excellence", "Your best choice", "Solutions for you", "Excellence in service", "Your satisfaction is our priority".

Composition:
- Choose the composition that best fits the category and style (e.g., editorial split with a strong image, full-bleed photo with overlay text, typographic hero with supporting image), do not default to a centered text over a gradient.
- Brand-relevant imagery: a realistic photo direction consistent with <imagery>, with a clearly replaceable placeholder for the owner's real photo.
- Mobile: headline first, then supporting line, then CTA within the first viewport; image may move below or become a tasteful background crop. Text must never sit on a busy image without sufficient contrast.
- No auto-playing carousels/sliders in the hero.
</section_spec>

<section_spec order="2" id="treatments" title="Treatments">
Present exactly these supplied treatments (you may group them, but do not add new ones):
  - Clareamento dental
  - Lentes de contato dental
  - Implantes
  - Ortodontia
- For each treatment: what it is, who it is for and how it helps, in calm, non-alarming language.
- No guaranteed results, no pain-free promises, no invented durations or prices.
- Group treatments by patient need when there are many.
</section_spec>

<section_spec order="3" id="about" title="About">
- Tell who Clínica Sorriso Prime is, what it believes in and how it works, using the supplied description and brand description.
- Do not mention founding year, years of experience, number of clients or history unless supplied.
- Focus on the customer: how the business's approach benefits them.
- Pair with a real-photo placeholder of the space or team (clearly replaceable).
</section_spec>

<section_spec order="4" id="testimonials" title="Testimonials">
- No real testimonials were supplied. Do NOT invent names, quotes, photos or star ratings.
- Build the section structure with 2-3 clearly marked placeholder cards (e.g., "[Depoimento real de cliente]" / "[Nome do cliente]") that look intentional but are obviously content to be filled by the owner.
</section_spec>

<section_spec order="5" id="faq" title="FAQ">
Write 5-8 realistic pre-purchase questions a real customer of this category would ask before acting, focused on reducing objections and friction.
Relevant themes for this category:
- How to book and how long it takes to get an appointment
- What to bring to the first appointment
- Payment methods / health plans (only answer with supplied facts; otherwise direct to contact)
- Location, parking and accessibility (only supplied facts)
- Does the treatment hurt / how is discomfort managed (general, non-promissory)
- How long treatments typically take (only generic, no invented durations)

- Answers: concise (1-3 sentences), helpful and consistent with supplied facts.
- Do NOT invent pricing, warranties, service coverage, certifications, guarantees, deadlines or policies. When the answer depends on information not supplied, answer honestly and route to the primary contact channel (e.g., "Fale com a equipe pelo WhatsApp para confirmar").
- Accessible accordion: button elements with aria-expanded and aria-controls, keyboard operable, only one or multiple open as appropriate, visible focus state.
- Optionally add FAQPage structured data (JSON-LD) matching the visible questions exactly.
</section_spec>

<section_spec order="6" id="location" title="Location">
- Show the full supplied address exactly as written.
- "Como chegar" style link using the Google Maps destination from <verified_links>.
- Optional: short note on reference points ONLY if supplied.
</section_spec>

<section_spec order="7" id="final_cta" title="Final CTA">
- A strong closing section that summarizes the promise in one specific headline and removes the last hesitation with a real, supplied reassurance (channel, location, hours).
- Primary CTA: "Agendar agora" → https://wa.me/5519998765432?text=Ol%C3%A1!%20Vim%20pelo%20site%20da%20Cl%C3%ADnica%20Sorriso%20Prime%20e%20gostaria%20de%20agendar%20um%20hor%C3%A1rio., large and unmistakable.
- No fake urgency (countdowns, "only today", "last spots") unless supplied.
</section_spec>
</sections>

<responsive>
The website must be designed and verified for three breakpoints: desktop (≥1280px), tablet (~768-1024px) and mobile (360-430px). Mobile is not an afterthought: most visitors will arrive on a phone.
- Responsive typography (fluid sizes with clamp()), never shrinking body text below 16px on mobile.
- Responsive spacing: reduce section padding proportionally on smaller screens without crowding.
- Proper stacking order on mobile: the reading order must match visual priority (headline → text → CTA → image when appropriate).
- Touch targets at least 44×44px with adequate spacing.
- Accessible mobile navigation (see Navigation section).
- Good image crops per breakpoint (object-fit/object-position or art-directed sources); faces and key subjects never cut awkwardly.
- Absolutely no horizontal overflow at any width (test 360px). Long words, URLs and e-mails must wrap.
- A clear, persistent mobile CTA for the primary objective.
- Tables, maps and galleries adapt or scroll inside their own container.
</responsive>

<seo>
- Semantic HTML5 landmarks: header, nav, main, section (with headings), footer.
- Exactly one logical H1 per page (the hero headline); H2 for section titles; H3 for items within sections. No skipped levels.
- A specific <title> (≤ 60 characters) in Brazilian Portuguese combining the business name, its main offer and the location (Campinas - SP).
- A meta description (≤ 155 characters) in Brazilian Portuguese that states the offer and invites the primary action.
- Local SEO context: naturally mention the business name, category, city/region (Campinas - SP) and main services in headings and copy, no keyword stuffing.
- Open Graph and Twitter card meta tags (title, description, image placeholder).
- LocalBusiness (or the most specific schema.org subtype for this category) JSON-LD using ONLY supplied data: name, address, telephone, url, openingHours, sameAs (supplied social links). Omit unknown properties.
- Descriptive link text (no "click here"). lang attribute set to the website language.
</seo>

<accessibility>
- Semantic HTML first; ARIA only when semantics are not enough.
- WCAG 2.1 AA color contrast for all text, icons conveying meaning and focus indicators.
- Every form control has a visible label; errors are announced and associated with fields.
- Meaningful alt text for informative images; empty alt for decorative ones.
- Visible, high-contrast focus states on all interactive elements (never remove outlines without a replacement).
- Full keyboard usability: logical tab order, skip-to-content link, menus/accordions/lightboxes operable by keyboard, Escape closes overlays, focus is managed and restored.
- Respect prefers-reduced-motion: disable non-essential animations.
- Interactive components (accordion, menu, tabs, slider) follow WAI-ARIA Authoring Practices.
- Buttons are <button>, navigation is <a href>, never clickable divs.
</accessibility>

<performance>
- Optimized assets: modern image formats (WebP/AVIF) with explicit width/height to prevent layout shift.
- Lazy-load images and iframes below the fold; eager-load and prioritize the hero image.
- Reasonable dependency usage: no heavy animation libraries for simple effects; prefer CSS transitions and small utilities.
- Load at most two font families with only the weights used, with font-display: swap.
- Stable layout (low CLS), fast first render (good LCP) and no long main-thread tasks from unnecessary scripts.
- No autoplay video in the hero; if video is used elsewhere, it must be optional, muted and lazy.
</performance>

<technical_requirements>
- Clean, maintainable component structure with clear names; content (services, products, menu, FAQ) kept in editable data structures, not scattered in markup.
- No unfinished TODOs, no commented-out dead code, no placeholder text that looks real.
- No console errors or warnings at runtime.
- No broken links: every href points to a verified link, a real in-page anchor or a real route.
- No accidental horizontal scroll at any viewport width.
- Real button behavior everywhere; no fake functionality, no simulated submissions, no simulated payments.
- Consistent design tokens (colors, spacing, radii, shadows) defined once and reused.
- Responsive behavior verified at desktop, tablet and mobile widths.
</technical_requirements>

<final_checklist>
Before finishing, verify every item and fix anything that fails:
- [ ] Business data correct (name, category, services exactly as supplied)
- [ ] No phone number invented
- [ ] WhatsApp correct (exact wa.me link from <verified_links>)
- [ ] Social links correct, only supplied profiles appear
- [ ] Address correct and identical to the supplied text
- [ ] Selected sections present in the specified order: Hero, Treatments, About, Testimonials, FAQ, Location, Final CTA
- [ ] Unselected sections not arbitrarily added
- [ ] Colors respected (primary #143B72 and the other supplied HEX values)
- [ ] Desktop reviewed
- [ ] Tablet reviewed
- [ ] Mobile reviewed (360px, no horizontal scroll)
- [ ] Primary CTA works and opens the correct destination
- [ ] No unsupported factual claims (prices, years, ratings, certifications, results, guarantees)
- [ ] No invented testimonials or reviews
- [ ] All customer-facing text in Brazilian Portuguese
- [ ] No lorem ipsum
- [ ] No generic AI-template appearance
- [ ] No broken components or links (no href="#")
- [ ] No console errors
- [ ] Accessibility basics verified (labels, alt text, focus states, keyboard)
</final_checklist>

<final_task>
Build the complete website for "Clínica Sorriso Prime" now, based strictly on the preceding specification.
Deliver the full, working implementation in one pass, all selected sections, real links, responsive behavior and polished visual design. Do not ask follow-up questions; where information is missing, apply the rules in <source_of_truth>.
</final_task>