[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-130-Estilo-de-IA-Etica":3},"# SYSTEM PROMPT — Build a Complete Landing Page: \"Ethical AI Style\" (Corporate & SaaS)\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page for a safe conversational AI product in the **Ethical AI Style** — clean, trustworthy, thoughtful (2026+ Responsible AI era). Generate the final code immediately, in a single response, following every rule below. **All user-facing copy must be written in English.**\n\n---\n\n## 1. THEME & DESIGN DIRECTION\n\n**1.1 Style Identity**\n- **Name:** Ethical AI Style\n- **Type:** Clean, Trustworthy, Thoughtful\n- **Keywords:** AI, ethical AI, safe AI, conversational AI, trustworthy, thoughtful, clean, minimalist, responsible, secure\n- **Mood:** Calm, transparent, non-hype. Generous whitespace, modular layout, highly legible sans-serif typography.\n\n**1.2 Color Palette → Required CSS Token Mapping (Light Mode, `:root`)**\n- `--primary: #1A73E8` (Ethical Blue — brand, actions) · `--primary-strong: #1557B0` (hover\u002Fpressed)\n- `--secondary: #34A853` (Green — trust\u002Fsuccess accents)\n- `--accent-cyan: #00BCD4` (conversational-flow accents) · `--accent-yellow: #FBBC05` (progress fills, ratings) · `--accent-red: #EA4335` (danger accents)\n- `--bg-primary: #fefefe` (page canvas) · `--bg-secondary: #F8F9FA` (alternating sections, footer) · `--bg-surface: #FFFFFF` (cards\u002Felevated surfaces)\n- `--text-primary: #3C4043` · `--text-secondary: #5F6368`\n- `--text-success: #188038` · `--text-error: #D93025` (AA-compliant text derivatives of palette green\u002Fred)\n- `--border-default: #DADCE0` · `--border-success: #34A853` · `--border-error: #EA4335`\n- `--radius-sm: 6px` · `--radius-md: 8px` · `--radius-lg: 16px`\n- `--shadow-sm: 0 2px 8px rgba(0,0,0,0.1)` · `--shadow-md: 0 8px 24px rgba(0,0,0,0.12)`\n- `--spacing-gap: 1.5rem` · `--transition-fast: 0.15s ease-in-out` · `--transition-normal: 0.3s ease-in-out` · `--ease-standard: ease-in-out`\n- `--z-header: 900` · `--z-dropdown: 1000` · `--z-modal: 1050` · `--z-toast: 1100`\n- `--font-base: \"Roboto\", Arial, sans-serif`\n\n> **Exception (source palette):** The source spec explicitly lists `#FFFFFF`; reserve pure white for card surfaces (`--bg-surface`) and the specified hero gradient — the base page canvas token stays `#fefefe` per mandatory rules.\n\n**1.3 Mandatory Dark Mode Tokens** (defined under a `.dark` class **and** `@media (prefers-color-scheme: dark)`, guarded so an explicit user choice always wins):\n- `--primary: #8AB4F8` · `--primary-strong: #A8C7FA` · `--secondary: #81C995`\n- `--bg-primary: #202124` · `--bg-secondary: #292A2D` · `--bg-surface: #303134`\n- `--text-primary: #E8EAED` · `--text-secondary: #9AA0A6` · `--text-success: #81C995` · `--text-error: #F28B82`\n- `--border-default: #3C4043` · `--border-success: #81C995` · `--border-error: #F28B82`\n- `--accent-cyan: #4DD0E1` · `--accent-yellow: #FDD663` · `--accent-red: #F28B82`\n- Shadows deepen (`rgba(0,0,0,0.4)` \u002F `rgba(0,0,0,0.5)`); trust glows switch to `rgba(138,180,248,0.15)`.\n- **Enforce contrast pairing in both themes:** light backgrounds pair with dark text; dark backgrounds pair with light text.\n\n**1.4 Signature Visual Effects (pure CSS + Google Icons — no SVG)**\n- `.conversation-flow-animation` (exact class name required): chat mockup with alternating user\u002FAI bubbles, staggered fade-and-rise entrance via `animation-delay`, looping three-dot typing indicator; cyan accents on the AI side.\n- `.ai-safety-diagram` (exact class name required): modular pipeline (Input → Guardrails → Verified Output) built from Material icons connected by an animated gradient progress line.\n- `.trust-glow`: subtle glow on trust badges\u002Fchips (primary-tinted `box-shadow` alpha); must remain subtle in dark mode.\n- `.research-progress`: ethical research progress bars (e.g., \"Bias reduction 94%\") whose fill animates when scrolled into view (JS adds `.is-visible`; CSS animates width).\n- Security feedback micro-interactions: check icons animate in on hover\u002Ffocus of safety chips; form success swaps button content to an animated check.\n- Hero background: `linear-gradient(to bottom, #F8F9FA, #FFFFFF)` (dark mode equivalent: `#202124 → #171719`).\n\n**1.5 Typography & Icons**\n- Google Fonts: **Roboto** (400\u002F500\u002F700) via `\u003Clink>`, bound to `--font-base`. Headings 700 with tight tracking; body 400, line-height 1.6; fluid sizes via `clamp()`.\n- Google **Material Symbols (Rounded)** via `\u003Clink>`; icons rendered as `\u003Cspan class=\"material-symbols-rounded\" aria-hidden=\"true\">shield\u003C\u002Fspan>`. Suggested set: `shield`, `verified_user`, `lock`, `forum`, `psychology`, `supervisor_account`, `check_circle`, `error`, `star`, `format_quote`, `expand_more`, `arrow_forward`, `dark_mode`, `light_mode`, `menu`, `close`. **Forbidden: inline SVGs, local icon files, emoji icons.**\n\n---\n\n## 2. STRICT RULES & ARCHITECTURE\n\n**2.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. **No `style=\"...\"` attributes in HTML.** Class\u002FID selectors only. HTML stays semantic and style-agnostic so the look can change via CSS alone.\n\n**2.2 CSS Variables & Theme Tokens**\n- Every color, spacing, radius, shadow, transition, and z-index value must come from the tokens in 1.2\u002F1.3. No hard-coded hex values outside `:root` and the dark token blocks.\n\n**2.3 Mandatory Dark Mode Support**\n- Dark mode fully defined per 1.3. Visible toggle in the header (sun\u002Fmoon Material icons, correct `aria-pressed` and dynamic `aria-label`). User choice persists via `localStorage`.\n> **Exception (source spec):** The source style sheet designates light mode as the only supported mode; honor it by defaulting to **light on first visit** (instead of `prefers-color-scheme`), while keeping dark mode fully implemented and toggleable.\n\n**2.4 Flexbox Layout & Mobile-First Alignment**\n- Every layout container uses `display: flex` and **defaults to `align-items: center`** (any deviation must be a justified, commented exception). Rows collapse to columns at breakpoints. Zero horizontal scrolling at 320px; `box-sizing: border-box` globally.\n\n**2.5 Framework & Naming Convention**\n- Clean custom CSS in `style.css` organized with CSS cascade layers (`@layer tokens, base, components, utilities`). **BEM naming only** (`.card`, `.card__title`, `.card--featured`). Reusable component classes (`.btn`, `.card`, `.input-group`) must bind to CSS variables. Never mix naming conventions.\n\n**2.6 File Structure**\n- Separate `index.html`, `style.css`, `script.js`. A single `\u003Cscript src=\"script.js\" defer>` reference; no other inline scripts.\n\n---\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\n**3.1 Buttons (`.btn` + variants `.btn--primary`, `.btn--secondary`, `.btn--danger`)**\n- **Default:** flex, `align-items: center`, `justify-content: center`, `gap: 0.5rem`; minimum touch target 44×44px; `--radius-md`.\n- **Hover:** brightness\u002Fshadow shift, `cursor: pointer`. **Focus:** distinct ring via `box-shadow` using `--primary` (never remove outlines without replacement). **Active:** `transform: scale(0.97)`.\n- **Loading (`.is-loading`):** CSS spinner (animated border circle) that does not change button dimensions; `pointer-events: none` + `aria-busy=\"true\"` to prevent double submissions.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback styled with `--text-success` \u002F `--text-error` plus icon swap.\n- `.btn--danger` must be visually distinct in **both** themes and never rely on color alone (pair with icon\u002Flabel).\n\n**3.2 Cards (`.card`)**\n- **Default:** `--bg-surface`, 1px `--border-default`, `--radius-md`, `--shadow-sm`; flex column layout.\n- **Interactive cards** (features, pricing): hover `translateY(-2px)` + `--shadow-md`; `:focus-within` highlights the border with `--primary` and a trust glow.\n- Define `.card--skeleton` (shimmer keyframe, preserves layout) and `.card--empty` (Material icon + guidance text) as part of the card system.\n- `.card--featured` (recommended pricing tier): primary border, trust glow, \"Most Trusted\" badge.\n\n**3.3 Forms & Inputs (`.input-group`)**\n- Flex column wrapping a label, input, and dedicated error container. States required: empty, focused (ring), filled, valid (success border + check icon), invalid (error border + error icon + message), disabled, read-only. Error feedback lives in `.input-group__error` with `aria-live=\"polite\"`; never color alone. Used for the Final CTA email capture.\n\n**3.4 FAQ Accordion**\n- Button triggers with `aria-expanded` + `aria-controls`; answer regions animated via CSS (`grid-template-rows: 0fr → 1fr`); `expand_more` chevron rotates; fully keyboard operable with visible focus.\n\n**3.5 Modal\u002FPopup (conditional)**\n- If any overlay is implemented (optional), it must use a centered flex overlay + backdrop, CSS-animated opening\u002Fopen\u002Floading\u002Fsuccess\u002Fclosing states, a Material icon close button, `Esc` and backdrop-click closing, and a keyboard focus trap.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` typography; breakpoints ~640\u002F768\u002F1024px; no horizontal overflow.\n- **Smooth animations:** all state changes use `transition: var(--transition-normal)`; fully respect `prefers-reduced-motion` (disable transforms\u002Fanimations and smooth scrolling; keep instant state changes).\n- **Accessibility:** WCAG AA contrast in both themes; semantic landmarks (`header`\u002F`nav`\u002F`main`\u002F`section[aria-labelledby]`\u002F`footer`); skip-to-content link; logical focus order; every interaction keyboard operable; `aria-live` regions for form feedback and dynamic status; never rely on color alone.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change; the sticky header gains a shadow when scrolled (`.is-scrolled` via JS).\n- Anchor navigation uses smooth scrolling with `scroll-margin-top` compensating for the sticky header.\n\n---\n\n## 5. LANDING PAGE SECTION SPECIFICATION\n\n**5.0 Page Shell** — Sticky header: brand (shield\u002Fverified icon + an invented concise product name), nav links (Features, How It Works, Pricing, FAQ), theme toggle, \"Get Started\" `.btn--primary`. Mobile hamburger (`aria-expanded`) opens a flex-column panel that closes on link click or `Esc`.\n\n**5.1 Hero** — Gradient background per 1.4. Two-column flex (stacks on mobile): left = eyebrow trust chip (\"Responsible AI · 2026\", trust glow), H1 (e.g., \"Conversational AI you can actually trust\"), subhead, dual CTAs (primary \"Start a Safe Conversation\" → `#pricing`; secondary \"See How It Works\" → `#how-it-works`), trust chip row (`lock` \"Private by design\", `verified_user` \"Independently audited\", `supervisor_account` \"Human oversight\") with hover check micro-interactions. Right = `.conversation-flow-animation` chat mockup (3–4 bubbles + typing indicator). Below: a strip of three `.research-progress` bars (\"Bias reduction 94%\", \"Harm-free responses 99.2%\", \"Safety eval pass 98%\") animating on scroll.\n\n**5.2 Features (3 cards)** — Section header (eyebrow, H2 \"Built responsibly, by default\", subtext) + grid of three `.card--feature`: `verified_user` \"Transparent by Design\" (shows sources and reasoning), `supervisor_account` \"Human Oversight\" (review controls and escalation), `lock` \"Privacy First\" (encrypted; never trained on your data). Each: icon in a tinted circle, title, 2–3 line description, \"Learn more\" arrow link → `#faq`.\n\n**5.3 How It Works (3 steps)** — Three `.step` cards in a flex row (column on mobile) connected by an `.ai-safety-diagram` progress line: 01 `forum` \"You ask\" → 02 `shield` \"Guardrails reason\" (intent checks, source citation) → 03 `check_circle` \"Verified answer\" (confidence, sources, feedback loop). Numbered badges; staggered scroll reveal.\n\n**5.4 Testimonials (3 cards)** — Quote cards: `format_quote` icon, 5-star row (`star` icons in `--accent-yellow`), realistic quote, author row with initials avatar (palette-tinted circle), name, role\u002Fcompany (e.g., Head of Trust & Safety at a fintech; CTO at a healthcare platform; AI research lead). Real English copy — no lorem ipsum.\n\n**5.5 Pricing (3 tiers)** — Starter $0 (personal use, limited conversations, `.btn--secondary` \"Start Free\"); Pro $20\u002Fmo (`.card--featured`, \"Most Trusted\" glow badge, expanded guardrails, priority support, `.btn--primary` \"Go Pro\"); Enterprise Custom (SSO, independent audits, dedicated review team, `.btn--secondary` \"Contact Sales\"). Feature lists use `check_circle` icons in `--text-success`; include billing microcopy.\n\n**5.6 FAQ** — 5–6 accordion items (per 3.4) covering: preventing harmful outputs, data training policy, human review options, safety standards\u002Fcompliance, model transparency. Real 2–3 sentence answers.\n\n**5.7 Final CTA** — Centered panel (`--bg-surface`, `--radius-lg`, `--shadow-md`, trust glow): H2 \"Build with AI you can trust\", supporting line, inline email form (`.input-group`): input + `.btn--primary` \"Request Access\" with the full state machine (loading → success check + `aria-live` confirmation \"Thanks — we'll be in touch\"); reassurance microcopy \"No spam. Your data stays private.\"\n\n**5.8 Footer** — `--bg-secondary`. Brand block (logo, one-line mission, trust badges: \"Audited\", \"End-to-end encrypted\", \"Human-reviewed\") + four secondary link columns (Product, Company, Resources, Legal) with realistic English labels; bottom bar with copyright (dynamic year via JS) and responsible-AI microcopy.\n\n---\n\n## 6. DELIVERABLE & ACCEPTANCE CHECKLIST\n\nOutput complete `index.html`, `style.css`, and `script.js` in one response.\n- Zero inline `style` attributes; a single deferred script; Google Fonts + Material Symbols `\u003Clink>` tags in `\u003Chead>`.\n- BEM naming only; all values token-driven; dark mode fully functional with a persisted, accessible toggle.\n- No lorem ipsum — write all real English copy; invent a concise product name and use it consistently.\n- Verify before finishing: no horizontal scroll at 320px; full keyboard pass (nav, FAQ, forms, toggle); visible focus everywhere; AA contrast in both themes; `prefers-reduced-motion` honored; every button and link has hover\u002Ffocus\u002Factive feedback.\n",1791954982110]