/**
 * landing.css — Detector de Bulos landing page.
 *
 * PART 1 is a VERBATIM port of antigravityWeb/styles.css, the design the client
 * approved. Do not "improve" values in that block: two earlier front-end
 * attempts were rejected for drifting from an approved design, so any edit there
 * must come from editing the source file and re-running the port.
 *
 * PART 2 adds the sections the source page did not have — pricing, parental
 * control, legal footer, language switcher — built strictly from the tokens
 * declared in PART 1.
 *
 * Fonts: styles.css names 'Plus Jakarta Sans' and 'Space Grotesk', but the
 * source index.html never loaded them, so the approved rendering is the
 * system-ui fallback. That fallback is preserved deliberately. Self-hosting the
 * named faces is a one-line change if the look should match the author's intent
 * rather than what was signed off.
 */

/* ==========================================================================
   PART 1 — verbatim port of antigravityWeb/styles.css
   ========================================================================== */

/* ==========================================================================
   Detector de Bulos — Authentic Stripe Design (Light, Airy & Vibrant Animation)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  /* Stripe Crisp Light Palette */
  --bg-body: #f6f9fc;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #f8fafc;
  --border-subtle: #e2e8f0;

  /* Stripe Signature Palette */
  --stripe-indigo: #635bff;
  --stripe-purple: #7a73ff;
  --stripe-magenta: #e040fb;
  --stripe-pink: #f43f5e;
  --stripe-orange: #ff7a00;
  --stripe-cyan: #00d4ff;
  --stripe-blue: #0073e6;
  --stripe-teal: #00d4b4;

  /* Status Colors */
  --verdict-true: #00d4b4;
  --verdict-true-bg: #e6fffa;
  --verdict-uncertain: #ffb800;
  --verdict-uncertain-bg: #fffbe6;
  --verdict-fake: #ff3b30;
  --verdict-fake-bg: #ffebeb;

  /* High Contrast Stripe Typography */
  --text-main: #0a2540;
  --text-muted: #425466;
  --text-dim: #6b7c93;

  /* Stripe Signature Shadows */
  --shadow-stripe: 0 50px 100px -20px rgba(50, 50, 93, 0.25), 0 30px 60px -30px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 15px 35px rgba(50, 50, 93, 0.06), 0 5px 15px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 30px 60px -12px rgba(50, 50, 93, 0.15), 0 18px 36px -18px rgba(0, 0, 0, 0.1);

  /* Fonts */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-heading: 'Space Grotesk', var(--font-sans);
}

/* Dark Mode Toggle Support */
[data-theme="dark"] {
  --bg-body: #0a2540;
  --bg-surface: #0e3054;
  --bg-surface-elevated: #163d66;
  --border-subtle: rgba(255, 255, 255, 0.12);
  --text-main: #ffffff;
  --text-muted: #adbdcc;
  --text-dim: #8898aa;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-body);
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  transition: background-color 0.4s ease;
}

svg {
  flex-shrink: 0;
}

/* ==========================================================================
   Stripe Hero: Crisp Light Canvas + Right Skewed Animated Ribbon Mesh
   ========================================================================== */

.stripe-hero-wrapper {
  position: relative;
  width: 100%;
  padding-top: 10.5rem;
  padding-bottom: 7rem;
  overflow: hidden;
  background: var(--bg-body);
}

/* Stripe Right-Side Skewed Mesh Gradient Ribbon */
.stripe-hero-ribbon {
  position: absolute;
  top: -120px;
  right: -15%;
  width: 70%;
  height: 140%;
  transform: skewY(-12deg);
  transform-origin: 100% 0;
  z-index: 1;
  background: linear-gradient(
    -45deg,
    #ff7a00,
    #e040fb,
    #635bff,
    #00d4ff,
    #00d4b4,
    #ff7a00
  );
  background-size: 350% 350%;
  animation: stripeRibbonFlow 14s ease infinite;
  mask-image: linear-gradient(to left, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
}

@keyframes stripeRibbonFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Navbar - Clean Glass Capsule */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 1.1rem 0;
  transition: all 0.3s ease;
}

[data-theme="dark"] .navbar {
  background: rgba(10, 37, 64, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.navbar-container {
  width: min(90%, 1140px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--text-main);
  font-weight: 800;
  font-size: 1.35rem;
  font-family: var(--font-heading);
  letter-spacing: -0.03em;
  flex-shrink: 0;
}

.brand-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 10px;
  background: var(--stripe-indigo);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(99, 91, 255, 0.3);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  list-style: none;
}

.nav-link {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--text-main);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

.btn-theme-toggle {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-theme-toggle:hover {
  background: rgba(0, 0, 0, 0.1);
}

.btn-primary {
  background: var(--stripe-indigo);
  color: #ffffff;
  padding: 0.65rem 1.35rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(99, 91, 255, 0.35);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(99, 91, 255, 0.45);
  background: #534be0;
}

/* Hero Content Grid */
.hero {
  position: relative;
  z-index: 2;
  width: min(90%, 1140px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  align-items: center;
}

.badge-stripe {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  padding: 0.4rem 1.1rem;
  border-radius: 50px;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 1.75rem;
  box-shadow: var(--shadow-card);
}

.badge-pill-new {
  background: rgba(99, 91, 255, 0.12);
  color: var(--stripe-indigo);
  padding: 0.15rem 0.6rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 800;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 5.2vw, 4.1rem);
  line-height: 1.08;
  font-weight: 800;
  margin-bottom: 1.35rem;
  letter-spacing: -0.03em;
  color: var(--text-main);
}

.hero-title-accent {
  background: linear-gradient(135deg, var(--stripe-indigo), var(--stripe-magenta));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: 1.18rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-bottom: 2.25rem;
  max-width: 560px;
  line-height: 1.65;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.btn-stripe-dark {
  background: var(--stripe-indigo);
  color: #ffffff;
  padding: 0.8rem 1.75rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 6px 20px rgba(99, 91, 255, 0.35);
  transition: all 0.3s ease;
}

.btn-stripe-dark:hover {
  transform: translateY(-2px);
  background: #534be0;
  box-shadow: 0 10px 28px rgba(99, 91, 255, 0.45);
}

.btn-stripe-light {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  padding: 0.8rem 1.75rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: var(--shadow-card);
  transition: all 0.3s ease;
}

.btn-stripe-light:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* Floating Extension Mockup (Right Side) */
.stripe-mockup-wrapper {
  position: relative;
  perspective: 1000px;
}

.stripe-card-mockup {
  background: #ffffff;
  color: #0a2540;
  border-radius: 24px;
  padding: 1.75rem;
  box-shadow: var(--shadow-stripe);
  position: relative;
  z-index: 2;
  transform: rotateY(-6deg) rotateX(4deg);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.stripe-card-mockup:hover {
  transform: rotateY(0deg) rotateX(0deg) translateY(-6px);
}

.mockup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 1.25rem;
}

.mockup-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--stripe-indigo);
}

.mockup-status-bar {
  background: #ffebeb;
  border: 1px solid #ffcdd2;
  color: #d32f2f;
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.25rem;
  font-weight: 700;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.mockup-status-bar[data-state="verified"] {
  background: #e6fffa;
  border-color: #b2f5ea;
  color: #00796b;
}

.mockup-claim-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.1rem;
}

.mockup-claim-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.mockup-tag {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
}

.tag-fake { background: #ffebeb; color: var(--verdict-fake); }
.tag-true { background: #e6fffa; color: var(--verdict-true); }

.stripe-back-card {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  border-radius: 24px;
  z-index: 1;
  transform: rotateY(-8deg) rotateX(6deg) translateZ(-40px);
}

/* Metrics Bar Below Hero */
.metrics-strip {
  position: relative;
  z-index: 2;
  width: min(90%, 1140px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-main);
}

.metric-number {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--stripe-indigo);
}

.metric-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ==========================================================================
   Airy & Spacious Light Sections with Animated Gradient Feature Banners
   ========================================================================== */

.section {
  position: relative;
  padding: 7rem 0;
  width: min(90%, 1140px);
  margin: 0 auto;
}

.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 4.5rem auto;
}

.section-tag {
  color: var(--stripe-indigo);
  font-weight: 800;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border-radius: 20px;
  background: rgba(99, 91, 255, 0.08);
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.15;
  font-weight: 800;
  margin-bottom: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--text-main);
}

.section-desc {
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1.65;
  font-weight: 400;
}

/* Stripe-Style Clean Cards Grid */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.stripe-feature-card {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  padding: 2.25rem 2rem;
  box-shadow: var(--shadow-card);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* CONTINUOUS ANIMATED GRADIENT TOP STRIPE */
.stripe-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #635bff, #00d4ff, #e040fb, #ff7a00, #635bff);
  background-size: 300% 300%;
  animation: cardStripeFlow 6s ease infinite;
}

@keyframes cardStripeFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.stripe-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: var(--stripe-indigo);
}

.card-top-tag {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--stripe-indigo);
  margin-bottom: 1.25rem;
}

.feature-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  border-radius: 14px;
  background: rgba(99, 91, 255, 0.08);
  color: var(--stripe-indigo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  transition: transform 0.3s ease;
}

.stripe-feature-card:hover .feature-icon {
  transform: scale(1.08);
  background: var(--stripe-indigo);
  color: #ffffff;
}

.feature-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
  color: var(--text-main);
}

.feature-text {
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.card-mini-widget {
  margin-top: auto;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

/* Full-Width Stripe Banner Feature Container (Like Stripe Sessions Banner!) */
.stripe-banner-container {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  padding: 4.5rem 3.5rem;
  color: #ffffff;
  background: linear-gradient(
    -45deg,
    #0a2540,
    #635bff,
    #e040fb,
    #ff7a00,
    #0a2540
  );
  background-size: 350% 350%;
  animation: bannerGradientFlow 12s ease infinite;
  box-shadow: var(--shadow-stripe);
}

@keyframes bannerGradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.stripe-banner-container .section-title {
  color: #ffffff;
}

.stripe-banner-container .section-desc {
  color: rgba(255, 255, 255, 0.9);
}

/* Interactive Demo Box */
.demo-box {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 28px;
  padding: 2.5rem;
  box-shadow: var(--shadow-card);
}

.demo-controls {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.demo-chip {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 0.6rem 1.3rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.demo-chip.active, .demo-chip:hover {
  background: var(--stripe-indigo);
  color: #ffffff;
  border-color: var(--stripe-indigo);
}

.demo-input-group {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.demo-input {
  flex: 1;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 50px;
  padding: 0.9rem 1.5rem;
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 0.98rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.demo-input:focus {
  border-color: var(--stripe-indigo);
}

/* WordPress Swatch Grid */
.wp-palette-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}

.swatch-item {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 1.1rem;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease;
}

.swatch-item:hover {
  transform: translateY(-4px);
}

.swatch-color {
  height: 64px;
  border-radius: 12px;
  margin-bottom: 0.85rem;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}

.swatch-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-main);
}

.swatch-hex {
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* FAQ Accordion */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s ease;
}

.faq-question {
  width: 100%;
  padding: 1.35rem 1.75rem;
  background: transparent;
  border: none;
  color: var(--text-main);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-answer {
  padding: 0 1.75rem 1.35rem 1.75rem;
  color: var(--text-muted);
  font-size: 1rem;
  display: none;
  line-height: 1.65;
}

.faq-item.active .faq-answer {
  display: block;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

/* Footer */
.footer {
  border-top: 1px solid var(--border-subtle);
  padding: 4rem 0 2rem 0;
  width: min(90%, 1140px);
  margin: 0 auto;
  color: var(--text-main);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-bottom {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.88rem;
  border-top: 1px solid var(--border-subtle);
  padding-top: 2rem;
}

/* Responsive Breakpoints */
.btn-text-mobile { display: none; }

@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 8rem;
    gap: 3rem;
  }
  .stripe-hero-ribbon { width: 100%; right: -20%; }
  .stripe-card-mockup { transform: none; }
  .stripe-back-card { display: none; }
  .nav-links { display: none; }
}

@media (max-width: 640px) {
  .navbar-container { width: 92%; }
  .nav-actions .btn-text-desktop { display: none; }
  .nav-actions .btn-text-mobile { display: inline; }
  .section { padding: 4.5rem 0; width: 92%; }
  .hero-title { font-size: 2.2rem; }
  .hero-subtitle { font-size: 1.02rem; }
  .hero-cta-group { flex-direction: column; width: 100%; }
  .btn-stripe-dark, .btn-stripe-light { width: 100%; justify-content: center; }
  .metrics-strip { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; text-align: center; }
  .metric-number { font-size: 1.35rem; }
  .metric-label { font-size: 0.75rem; }
  .demo-controls { flex-direction: column; }
  .demo-chip { width: 100%; text-align: center; }
  .demo-input-group { flex-direction: column; }
  .demo-input { width: 100%; }
  #analyzeBtn { width: 100%; justify-content: center; }
  .stripe-banner-container { padding: 2.5rem 1.5rem; }
}


/* ==========================================================================
   PORT ADDITIONS — sections that exist in the WordPress build but not in the
   original antigravityWeb/index.html.

   Everything below is built from the tokens already declared in styles.css
   (--stripe-*, --text-*, --shadow-*, --bg-*) and reuses the existing card,
   button and section patterns. No new palette, no second design system.

   Added because the source page could not sell anything: it had no pricing,
   no parental-control section, no legal footer and no language switcher.
   ========================================================================== */

/* Wrapper emitted by the [ddb_landing] shortcode ------------------------- */

.ddb-landing {
  /* The parent block theme (Twenty Twenty-Five) injects its own spacing on
     descendants of the content area. Reset it here so the ported layout owns
     its own rhythm rather than inheriting two competing systems. */
  --wp--style--block-gap: 0;
  color: var(--text-main);
  background: var(--bg-body);
}

.ddb-landing :where(p, h1, h2, h3, h4, ul, ol, figure) {
  margin-block: 0;
}

/* Visually-hidden text, for labels that must exist for assistive tech ---- */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Section-tag and card-tag colour variants ------------------------------ */
/* The source set these with inline style attributes. Inline styles cannot be
   themed for dark mode or overridden by a stylesheet, so the port promotes
   them to modifier classes carrying the same values. */

.section-tag--pink     { color: var(--stripe-pink);   background: rgba(244, 63, 94, 0.08); }
.section-tag--cyan     { color: var(--stripe-cyan);   background: rgba(0, 212, 255, 0.08); }

.card-top-tag--magenta  { color: var(--stripe-magenta); }
.card-top-tag--verified { color: var(--verdict-true); }

.feature-icon--magenta  { background: rgba(224, 64, 251, 0.1); color: var(--stripe-magenta); }
.feature-icon--verified { background: rgba(0, 212, 180, 0.1);  color: var(--verdict-true); }

.grid-3--spaced { margin-bottom: 4rem; }

.stripe-banner-container--center { text-align: center; }

.banner-tag {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.banner-title {
  margin: 1rem 0 1.25rem;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.2rem);
}

.banner-desc {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.15rem;
  line-height: 1.7;
}

.banner-cta { margin-top: 1.75rem; }

/* Hero mockup text nodes ------------------------------------------------- */
/* Also promoted out of inline styles so dark mode can reach them. */

.mockup-meta {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dim);
}

.mockup-claim-text {
  margin-bottom: 0.4rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-main);
}

.mockup-claim-reason {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-dim);
}

.card-mini-widget__note {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.demo-note {
  margin-top: 1rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-dim);
  text-align: center;
}

/* Navigation additions --------------------------------------------------- */

.nav-links-wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.ddb-lang-sep {
  opacity: 0.35;
  user-select: none;
}

/* Pricing ---------------------------------------------------------------- */

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

@media (min-width: 880px) {
  .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  background: var(--bg-surface);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* Familia is the tier the business wants chosen, so it is lifted out of the
   row rather than merely tinted. */
.plan-card--featured {
  border-color: transparent;
  background:
    linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
    linear-gradient(135deg, var(--stripe-indigo), var(--stripe-magenta)) border-box;
  border: 2px solid transparent;
  box-shadow: var(--shadow-stripe);
}

@media (min-width: 880px) {
  .plan-card--featured { transform: scale(1.04); z-index: 2; }
  .plan-card--featured:hover { transform: scale(1.04) translateY(-4px); }
}

.plan-ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--stripe-indigo), var(--stripe-magenta));
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 1rem 0 0.35rem;
}

.plan-amount {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 1.6rem + 1.6vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-main);
}

/* Familia has no product yet: the slot must read as deliberate, not broken. */
.plan-amount--soon {
  font-size: clamp(1.3rem, 1rem + 1vw, 1.6rem);
  color: var(--text-dim);
}

.plan-period {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dim);
}

.plan-list {
  display: grid;
  gap: 0.7rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  flex: 1;
}

.plan-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.plan-list-icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  color: var(--verdict-true);
}

.plan-list-text {
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.plan-actions {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.75rem;
}

.btn-block {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* 44px minimum touch target */
  min-height: 44px;
}

.plan-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.plan-buy__label { font-weight: 600; }
.plan-buy__price { opacity: 0.85; font-variant-numeric: tabular-nums; }

/* A control with no destination must look inert and be unreachable by
   keyboard, not merely greyed out. */
.btn-disabled,
.btn-disabled:hover {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}

.plan-action-note {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-dim);
  text-align: center;
}

.plan-action-note--warning { color: var(--verdict-uncertain); }

.pricing-foot {
  margin-top: 2.5rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-dim);
  text-align: center;
}

/* Footer ----------------------------------------------------------------- */

.footer-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  text-align: left;
}

@media (min-width: 720px) {
  .footer-nav { grid-template-columns: 1.4fr repeat(2, 1fr); }
}

.footer-brand-col { display: grid; gap: 0.85rem; align-content: start; }

.footer-tagline {
  max-width: 34ch;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-dim);
}

.footer-company { font-size: 0.85rem; color: var(--text-dim); }

.footer-col { display: grid; gap: 0.7rem; align-content: start; }

.footer-col-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.footer-list { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }

.footer-item { font-size: 0.9rem; line-height: 1.5; }

.footer-link {
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-link:hover,
.footer-link:focus-visible { color: var(--stripe-indigo); }

/* Legal pages that do not exist yet in WordPress. Rendered as plain text so
   nobody clicks through to a 404. */
.footer-link--pending {
  color: var(--text-dim);
  opacity: 0.6;
  cursor: default;
}

.footer-pending-note {
  margin-top: 0.4rem;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-dim);
  opacity: 0.75;
}

.footer-sep { opacity: 0.4; padding-inline: 0.4rem; }

.footer-copyright { font-size: 0.85rem; color: var(--text-dim); }

.footer-disclaimer {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-dim);
  opacity: 0.85;
}

/* Reduced motion ---------------------------------------------------------- */
/* REDUCE, not remove.
 *
 * The hero ribbon is DELIBERATELY EXCLUDED from this block. An earlier version
 * killed its animation here, which was a misreading on my part: the ribbon does
 * not move. stripeRibbonFlow animates background-position over a six-stop
 * gradient, so nothing changes place on screen — it is a slow colour cycle, and
 * colour work is exactly what "reduce" is supposed to keep. Removing it left
 * anyone with the OS setting on looking at a flat, dead band, which is what the
 * client reported.
 *
 * What stays suppressed below is genuine spatial motion: card lifts and scale
 * transforms, the vestibular triggers the media query exists for. */

@media (prefers-reduced-motion: reduce) {
  .plan-card,
  .plan-card--featured,
  .stripe-feature-card {
    animation: none !important;
    transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease !important;
  }

  .plan-card:hover,
  .stripe-feature-card:hover {
    transform: none !important;
  }

  @media (min-width: 880px) {
    .plan-card--featured,
    .plan-card--featured:hover { transform: none !important; }
  }
}

/* Theme-toggle icons ------------------------------------------------------ */
/* Both icons ship in the markup and CSS decides which is visible. The source
   swapped innerHTML from JS instead, which meant the button was empty until the
   script ran and lost its icon entirely if the script failed. */

.btn-theme-toggle .theme-icon { display: none; }
[data-theme="light"] .btn-theme-toggle .theme-icon--moon { display: block; }
[data-theme="dark"]  .btn-theme-toggle .theme-icon--sun  { display: block; }

/* No data-theme yet (first paint, before the script runs): show the moon, which
   matches the default light canvas. */
html:not([data-theme]) .btn-theme-toggle .theme-icon--moon { display: block; }

/* ==========================================================================
   PART 3 — port corrections

   Defects found by looking at the deployed page rather than at the code. The
   source design was built for 5 nav links and had no pricing table; the port
   added a sixth link, a language switcher and a three-tier grid, and those
   additions broke layout assumptions baked into PART 1.
   ========================================================================== */

/* --- Navbar overflow ------------------------------------------------------
   The rules that used to live here — container gap, brand nowrap, link gap and
   font size, action gap, and a max-width: 1180px squeeze — have MOVED TO
   PART 4, which owns the header end to end and is written mobile first.

   They were max-width patches layered on a desktop layout, and they only ever
   treated the symptom: PART 1 sets .nav-links { gap: 2.2rem } for five items
   inside a 1140px container with the brand and the actions both
   flex-shrink: 0, and the port added a sixth link plus a language switcher on
   top of that. Splitting the header across two blocks is how two rules end up
   fighting over the same property, so nothing about it is declared here. */

/* --- Language switcher in the navbar --------------------------------------
   global.css positions the switcher as a fixed top-right overlay for pages
   that have no navbar. Inside the navbar it must be an inline control. */

.ddb-lang-switcher--inline {
  position: static;
  inset: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: rgba(10, 37, 64, 0.05);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-theme="dark"] .ddb-lang-switcher--inline { background: rgba(255, 255, 255, 0.08); }

.ddb-lang-switcher--inline .ddb-lang-btn {
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-decoration: none;
  background: transparent;
}

.ddb-lang-switcher--inline .ddb-lang-btn[aria-current="true"] {
  background: var(--bg-surface);
  color: var(--text-main);
  box-shadow: 0 1px 2px rgba(50, 50, 93, 0.12);
}

[data-theme="dark"] .ddb-lang-switcher--inline .ddb-lang-btn[aria-current="true"] {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

/* --- Pricing grid ---------------------------------------------------------
   The additions block set align-items: center. With three cards of very
   different heights that vertically staggers them, which is exactly how the
   deployed page looked: a short "Gratis" floating mid-row while the two taller
   cards sat lower. Cards must stretch to a common height; only the featured
   tier is deliberately lifted. */

.pricing-grid {
  align-items: stretch;
  /* PART 1's .grid-3 uses auto-fit/minmax(280px), which lands on two columns at
     intermediate widths and orphans the third card. Pin the count. */
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
}

.plan-card {
  /* PART 1's .stripe-feature-card sets overflow: hidden for its animated top
     stripe, which clipped the "Recomendado" ribbon in half. Give the ribbon
     room inside the card instead of letting it hang outside. */
  overflow: hidden;
  padding-top: 3rem;
  height: 100%;
}

.plan-ribbon {
  top: 0.9rem;
  translate: -50% 0;
}

@media (min-width: 900px) {
  /* Replaces the scale() lift from the additions block: scaling a grid item
     blurs its text on non-integer device pixel ratios. */
  .plan-card--featured { transform: none; }
  .pricing-grid .plan-card--featured { margin-block: -0.75rem; padding-block: 3.75rem 2.75rem; }
}

/* --- Price typography -----------------------------------------------------
   "desde 4,99 €" plus "/mes" overflowed its line and wrapped mid-token. */

.plan-price {
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 0.15rem;
}

.plan-amount {
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem);
  overflow-wrap: anywhere;
}

.plan-period { white-space: nowrap; }

/* --- Feature list ---------------------------------------------------------
   The icon span is inline by default, so its box did not line up with the
   first line of the text beside it and the column drifted out of register. */

.plan-list-item {
  align-items: flex-start;
  gap: 0.6rem;
}

.plan-list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 0.2rem;
  flex: 0 0 16px;
}

.plan-list-icon svg { display: block; width: 100%; height: 100%; }

/* Excluded features read as excluded, not as a silent tick. */
.plan-list-item--excluded .plan-list-icon { color: var(--text-dim); opacity: 0.7; }
.plan-list-item--excluded .plan-list-text { color: var(--text-dim); }

/* --- Action notes ---------------------------------------------------------
   The BYOK note sat flush against the button and read as part of it. */

.plan-actions { gap: 0.75rem; }
.plan-action-note { margin-top: 0.1rem; }

/* --- WordPress admin bar --------------------------------------------------
   MOVED TO PART 4. PART 1 pins the navbar with position: fixed; top: 0, so a
   logged-in user's 32px admin bar used to sit on top of it and clip the brand.
   The offset is now a single custom property, --ddb-nav-offset, which the
   navbar's top, the mobile panel's max-height and the anchor scroll-margin all
   read — rather than three separate copies of the 32/46 pair. */

/* --- Chrome Auto Dark Mode -------------------------------------------------
   Chrome can force its own dark rendering on any site that does not declare a
   colour scheme: it rewrote #f6f9fc to #1c1e1f and painted grey boxes behind
   text in the pricing cards. This design already ships its own dark theme via
   [data-theme], so declaring the scheme opts out of the browser's guesswork and
   hands theming back to the stylesheet. */

:root { color-scheme: only light; }
[data-theme="dark"] { color-scheme: dark; }

/* ==========================================================================
   PART 4 — the header

   WHY THIS BLOCK EXISTS
   ---------------------
   antigravityWeb/styles.css is 886 lines, of which 31 sit inside a media
   query: 3.5%. The design was drawn at 1440px, and its entire answer for a
   phone was one line —

       @media (max-width: 980px) { .nav-links { display: none; } }

   — which hides the navigation and puts nothing in its place. On a 402px
   iPhone that left the brand, the ES/EN pill and the CTA fighting for one line
   until the button was clipped to "Ins...", and the six sections of the page
   were unreachable. This block replaces that with a real menu.

   HOW IT IS WRITTEN
   -----------------
   MOBILE FIRST, without exception. Every base rule describes the small screen;
   min-width queries add the desktop bar on top. Not one max-width rule is
   introduced here. PART 1's two max-width rules stay untouched — PART 1 is a
   verbatim port and must not be edited — and are simply made irrelevant by
   later rules of equal or higher specificity below.

   WHAT IT DOES NOT TOUCH
   ----------------------
   No colour, shadow, radius, gradient or typeface changes. Layout, size and
   behaviour only. The one visual value that moves is the theme button's
   diameter, 38px to 44px, and it moves precisely because 38px next to a 44px
   CTA is the misalignment the client reported.

   THE NO-JAVASCRIPT CONTRACT
   --------------------------
   The panel is a native <details>/<summary> disclosure, the same technique the
   FAQ already uses on this page. The BROWSER owns whether it is shown, so with
   JavaScript disabled, blocked or broken the hamburger still opens and closes
   a complete menu. assets/js/landing.js only layers extras on top: focus trap,
   scroll lock, Escape, click-outside and aria-expanded sync. Losing the script
   degrades the menu; it can never hide it. Nothing below hides content by
   default and waits for a class to be added — that is the pattern that once
   shipped a blank page on this project.
   ========================================================================== */

/* --------------------------------------------------------------------------
   4.1 — Shared geometry
   -------------------------------------------------------------------------- */

:root {
  /* Height of the WordPress admin bar. Zero for every visitor; only a
     logged-in user ever sees a non-zero value. Declared once here so the
     navbar's offset, the panel's max-height and the anchor scroll-margin all
     read the same number instead of repeating the 32/46 pair three times. */
  --ddb-nav-offset: 0px;

  /* One optical line for every control in the bar. The hamburger, the theme
     button, the language pill and the CTA all resolve to this height, which is
     also the 44px minimum touch target. Before this they were 44px (CTA),
     about 50px (language pill, inheriting global.css's 44px min-height inside
     its own padding) and 38px (theme button) — three different heights on one
     row, which is exactly the misaligned theme button in the screenshot. */
  --ddb-nav-control: 44px;

  /* Rendered navbar height. Read only by the anchor offsets below; it is not
     what sizes the bar. */
  --ddb-nav-height: 4.25rem;

  /* Width the scrollbar leaves behind when the body scroll is locked. The
     script measures and publishes it; this default keeps the calc() honest
     when there is no script at all. */
  --ddb-scrollbar-gap: 0px;
}

/* WordPress's own admin-bar breakpoint, expressed mobile first: the bar is
   46px tall and static on small screens, 32px and fixed from 783px up. */
.admin-bar { --ddb-nav-offset: 46px; }

@media screen and (min-width: 783px) {
  .admin-bar { --ddb-nav-offset: 32px; }
}

@media (min-width: 640px) {
  :root { --ddb-nav-height: 5rem; }
}

/* PART 1 pins the navbar at top: 0, so without this the admin bar sits on top
   of it and clips the brand. */
.admin-bar .navbar { top: var(--ddb-nav-offset); }

/* --------------------------------------------------------------------------
   4.2 — The bar itself
   -------------------------------------------------------------------------- */

.navbar {
  /* 1.1rem top and bottom spends 35px of a 650px-tall phone viewport before a
     single word of content. Give it back below 640px. */
  padding-block: 0.75rem;
}

@media (min-width: 640px) {
  .navbar { padding-block: 1.1rem; }
}

.navbar-container {
  /* 92% matches .section on phones and 90% matches .hero and .section from
     640px up, so the brand always sits on the same optical margin as the hero
     headline directly below it. */
  width: min(92%, 1140px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

@media (min-width: 640px) {
  .navbar-container { width: min(90%, 1140px); }
}

.navbar .nav-brand {
  /* PART 1 pins the brand at flex-shrink: 0, so at 320px it pushed the
     hamburger off the screen rather than yield a pixel. It may shrink now, and
     the label truncates instead of overflowing — the last-resort guard that
     makes a horizontal scrollbar impossible at any width in the 320-1920
     range. */
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  font-size: clamp(1rem, 0.7rem + 0.75vw, 1.35rem);
}

.nav-brand-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4.3 — Base (phone): the disclosure menu IS the navigation

   The desktop row is not "hidden on mobile"; it is simply not built yet. It
   gets added back by the min-width block in 4.6.
   -------------------------------------------------------------------------- */

.nav-links-wrap,
.nav-actions {
  display: none;
}

.nav-mobile {
  flex: 0 0 auto;
}

/* Hamburger ---------------------------------------------------------------- */

.nav-toggle {
  /* `display` is deliberately left at the user agent's list-item. Changing a
     <summary>'s display has historically broken the disclosure in WebKit, so
     the two icons are absolutely positioned inside the button instead, which
     centres them without touching it. */
  position: relative;
  width: var(--ddb-nav-control);
  height: var(--ddb-nav-control);
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-main);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease;
}

.nav-toggle::-webkit-details-marker { display: none; }
.nav-toggle::marker { content: ""; }

.nav-toggle:hover { background: rgba(0, 0, 0, 0.1); }

[data-theme="dark"] .nav-toggle { background: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .nav-toggle:hover { background: rgba(255, 255, 255, 0.14); }

.nav-toggle-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CSS owns the icon swap and reads the element's own open state, so the button
   is never blank and never needs a script to draw itself. */
.nav-mobile:not([open]) .nav-toggle-icon--close { display: none; }
.nav-mobile[open] .nav-toggle-icon--menu { display: none; }

/* Scrim and panel ---------------------------------------------------------- */

.nav-scrim,
.nav-panel {
  position: absolute;
  /* .navbar is position: fixed, so it is the containing block for both. The
     extra pixel clears its bottom border instead of sitting on top of it. */
  top: calc(100% + 1px);
  left: 0;
  right: 0;
}

.nav-scrim {
  height: 100vh;
  height: 100dvh;
  background: rgba(10, 37, 64, 0.45);
}

[data-theme="dark"] .nav-scrim { background: rgba(0, 0, 0, 0.6); }

.nav-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.75rem clamp(1rem, 4vw, 2rem) 1.5rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  /* Landscape phones and short windows: the panel scrolls itself rather than
     running off the bottom of the screen. overscroll-behavior stops the page
     underneath from taking over the gesture once the panel reaches its end. */
  max-height: calc(100vh - var(--ddb-nav-height) - var(--ddb-nav-offset) - 1rem);
  max-height: calc(100dvh - var(--ddb-nav-height) - var(--ddb-nav-offset) - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: ddbNavPanelIn 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes ddbNavPanelIn {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to   { opacity: 1; transform: none; }
}

.nav-panel-links {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-panel-link {
  display: flex;
  align-items: center;
  /* Comfortably past the 44px minimum: these are the six links the visitor
     could not reach at all on a phone. */
  min-height: 48px;
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-main);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-panel-links li:last-child .nav-panel-link { border-bottom: 0; }

.nav-panel-link:hover,
.nav-panel-link:focus-visible { color: var(--stripe-indigo); }

.nav-panel-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-panel-cta {
  width: 100%;
  /* Its height is set in 4.4, which has to come after .navbar .btn-primary. */
}

/* --------------------------------------------------------------------------
   4.4 — The three controls, sized from one token

   This is the desktop complaint in the brief: the theme button was not on the
   same line as anything else. It was not a vertical-centring bug — every
   control was centred correctly, they were just three different heights.
   -------------------------------------------------------------------------- */

.navbar .btn-theme-toggle {
  /* PART 1 sizes this 38px, which never matched the 44px CTA beside it. */
  width: var(--ddb-nav-control);
  height: var(--ddb-nav-control);
  min-width: var(--ddb-nav-control);
  min-height: var(--ddb-nav-control);
  flex: 0 0 auto;
}

.navbar .btn-primary {
  min-height: var(--ddb-nav-control);
}

/* PART 3 restyled the inline language pill but left global.css's
   .ddb-lang-btn { min-width: 44px; min-height: 44px } in force, so the pill
   rendered about 50px tall inside its own padding — taller than everything
   around it. Size it from the shared token instead. */
.navbar .ddb-lang-switcher--inline {
  height: var(--ddb-nav-control);
  padding: 0.2rem;
  flex: 0 0 auto;
}

.navbar .ddb-lang-switcher--inline .ddb-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Height comes from the pill so the control matches the CTA exactly; the
     width stays generous for the pointer. This copy is only ever displayed
     from the desktop breakpoint up, where the input device is a mouse and
     WCAG 2.2 AA asks for 24x24, not 44x44. */
  min-width: 38px;
  min-height: 0;
  height: 100%;
}

/* Everything inside the panel is touch-first, so it takes the full 44px in
   both axes rather than the bar's pointer-friendly compromise.

   These rules have to sit AFTER .navbar .btn-primary above, not up in 4.3 with
   the rest of the panel: both selectors carry two classes, so specificity ties
   and source order is what decides. A .nav-panel-cta rule declared earlier
   silently lost its height to the bar's 44px. */
.nav-panel .ddb-lang-switcher--panel {
  height: auto;
  padding: 0.25rem;
}

.nav-panel .ddb-lang-switcher--panel .ddb-lang-btn {
  min-width: 52px;
  min-height: 44px;
  height: auto;
}

.nav-panel .nav-panel-cta {
  min-height: 48px;
}

/* --------------------------------------------------------------------------
   4.5 — The CTA label in the bar

   MEASURED DECISION, not an oversight. The approved design carried five links
   and no language switcher. This build carries six links plus an ES/EN pill,
   which is roughly 200px more inside the same 1140px container. With the full
   "Anadir al navegador" label the row does not fit at ANY viewport width,
   because the container caps at 1140px and stops growing at 1266px — so the
   long label would still overflow at 1920px. The bar therefore keeps the short
   label everywhere and the full sentence lives where there is room for it: the
   mobile panel's full-width CTA and the hero.

   Both spans stay in the markup so this is one CSS decision, not a PHP change.
   To restore the long label the container also has to grow past 1140px, which
   costs the brand's alignment with the hero headline below it.
   -------------------------------------------------------------------------- */

.nav-actions .btn-text-desktop { display: none; }
.nav-actions .btn-text-mobile { display: inline; }

/* --------------------------------------------------------------------------
   4.6 — Desktop bar, from 1140px

   WHY 1140 AND NOT 980. Eight things share this row: brand, six links, ES/EN
   pill, theme button and CTA. At 1024px the container is 922px wide and the
   row needs well over a thousand. The old 980px breakpoint was not a measured
   number, it was the width at which the author stopped looking. 1140px is
   where the full row fits with real margin, and every width below it now gets
   a menu that works instead of no navigation at all.
   -------------------------------------------------------------------------- */

@media (min-width: 1140px) {
  .nav-mobile { display: none; }

  .navbar-container {
    /* Three tracks instead of space-between, and the FLEXIBLE one is the
       middle. This is the "reparto irregular" from the brief, measured: the
       action group is 272px wide against a 208px brand, so pinning the links
       to the geometric centre of the bar (1fr auto 1fr) leaves 72px of air on
       the left and 8px on the right at 1140px — the links almost touching the
       language pill. Letting the brand and the actions take their content
       width and giving the leftover to the middle track centres the link row
       inside the space that actually remains, which lands about 60px on each
       side. Symmetric, and it stays symmetric when ES/EN changes the labels. */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1.25rem;
  }

  .nav-links-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }

  .nav-links {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav-link {
    white-space: nowrap;
    font-size: 0.85rem;
  }

  .nav-actions {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 0.6rem;
  }
}

/* Past 1400px the container has already stopped growing (it caps at 1140px),
   so the extra room is real and fixed. Return the links to the size and
   breathing room the approved design drew them at. */
@media (min-width: 1400px) {
  .navbar-container { column-gap: 2rem; }
  .nav-links { gap: 1.25rem; }
  .nav-link { font-size: 0.95rem; }
}

/* --------------------------------------------------------------------------
   4.7 — Focus, motion and the locked scroll
   -------------------------------------------------------------------------- */

.nav-link:focus-visible,
.nav-panel-link:focus-visible,
.navbar .nav-brand:focus-visible {
  outline: 2px solid var(--stripe-indigo);
  outline-offset: 3px;
  border-radius: 6px;
}

.nav-toggle:focus-visible,
.navbar .btn-theme-toggle:focus-visible,
.navbar .btn-primary:focus-visible,
.navbar .ddb-lang-btn:focus-visible {
  outline: 2px solid var(--stripe-indigo);
  outline-offset: 3px;
}

/* FREEZING THE PAGE BEHIND THE PANEL IS DONE IN CSS, read straight off the
   disclosure's own open state, so it works with no script at all. That matters
   for more than the requirement: the scrim is a viewport-tall box, and a page
   that cannot scroll cannot be lengthened by it.

   In its own rule on purpose. A browser that does not understand :has() throws
   away the entire selector list it appears in, so the class-based rule below
   must never share a list with it. */
body:has(.nav-mobile[open]) {
  overflow-y: hidden;
}

@media (min-width: 1140px) {
  /* The disclosure is display: none from here up, but its open attribute can
     still be set — a visitor who opened the menu and then widened the window
     while no script was running — and a frozen page with no visible menu is
     unrecoverable. `auto` is what body already computes to anyway, because
     PART 1's overflow-x: hidden forces the other axis away from visible. */
  body:has(.nav-mobile[open]) { overflow-y: auto; }
}

/* The one thing CSS cannot do: measure the scrollbar. Locking the scroll takes
   it away, and everything sized against the viewport jumps sideways by its
   width — so the script measures it, publishes it as --ddb-scrollbar-gap and
   hands it back as padding to both the document and the fixed bar. Phones use
   overlay scrollbars, where the measurement is 0 and nothing moves; a desktop
   window is where the jump showed. Padding only. Never visibility. */
body.ddb-nav-open {
  overflow: hidden;
  padding-right: var(--ddb-scrollbar-gap, 0px);
}

body.ddb-nav-open .navbar {
  padding-right: var(--ddb-scrollbar-gap, 0px);
}

@media (prefers-reduced-motion: reduce) {
  /* REDUCE, not remove. The panel still fades in — it just stops sliding, and
     the hover colour changes survive untouched. */
  .nav-panel { animation: ddbNavPanelFade 0.15s ease both; }

  .nav-toggle,
  .nav-panel-link {
    transition-property: color, background-color, border-color, opacity;
  }
}

@keyframes ddbNavPanelFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   4.8 — Anchor targets under a fixed bar

   Every nav link is an in-page anchor and the bar is fixed, so without this
   the browser parks each section's heading underneath the navbar and the
   visitor lands on the wrong thing. It was already wrong before the menu
   existed; it matters more now that six links reach these sections from a
   phone. The offset covers the bar, the admin bar and a little air.
   -------------------------------------------------------------------------- */

#como-funciona,
#caracteristicas,
#demostracion,
#familia,
#precios,
#faq {
  /* Land the section's CONTENT under the bar, not its box.
     A section's top padding is empty space, so stopping the scroll at the box
     edge left the whole padding between the header and the eyebrow — which is
     what made the anchors feel like they overshot downward. Subtracting that
     padding pulls the box above the viewport by exactly the empty part and puts
     the eyebrow just below the bar. 0.75rem keeps it from touching. */
  scroll-margin-top: calc(
    var(--ddb-nav-height) + var(--ddb-nav-offset) - var(--ddb-section-pad, 3.25rem) + 0.75rem
  );
}

/* ==========================================================================
   PART 5 — the body of the landing, mobile first

   WHY THIS BLOCK EXISTS
   ---------------------
   PART 4 fixed the header. Everything below it still carried the source's
   desktop-only geometry: antigravityWeb/styles.css was drawn at 1440px and
   answered the phone with two max-width blocks totalling 31 lines, most of
   which re-state a desktop value at a smaller number rather than describe a
   small screen.

   Measured consequences between 320px and 402px:

     - The hero starts 296px down the page before its first word: PART 1 puts
       10.5rem on .stripe-hero-wrapper AND its max-width: 980px block adds
       8rem more on .hero. The two stack.
     - .hero-title resolves to 2.8rem (44.8px) inside a 294px column, because
       5.2vw never beats the clamp minimum on a phone. The 640px patch then
       DROPS it to 2.2rem, so the headline gets smaller as the screen gets
       bigger — a 35.2px title at 640px against 33.3px at 641px.
     - .section spends 224px on vertical padding alone, per section, nine
       times down the page.
     - .grid-3 is repeat(auto-fit, minmax(280px, 1fr)), which lands on TWO
       columns everywhere from 636px to 1003px and orphans the third card.
     - The metrics strip keeps three columns at 320px, 92px each.
     - The hero mockup keeps a back card offset -20px and a 3D tilt.
     - The FAQ answers never open at all. See 5.9.

   HOW IT IS WRITTEN
   -----------------
   MOBILE FIRST, without exception. Every base rule describes the phone and
   min-width queries add the larger layouts on top. Not one max-width rule is
   introduced here. PART 1 keeps its two max-width blocks — it is a verbatim
   port and must not be edited — and they are made irrelevant by the rules
   below, which carry equal specificity and come later in source order.

   WHAT IT DOES NOT TOUCH
   ----------------------
   No colour, shadow, radius, gradient or typeface changes anywhere in this
   block. Geometry, flow, order and size only.

   BREAKPOINTS (all min-width, no new max-width rule exists in PART 5)
   ------------------------------------------------------------------
     560px  hero CTA row, demo chip row, footer nav in two columns
     640px  container 92% -> 90%, first spacing step, demo input row,
            card and box padding return to their larger values
     720px  footer nav in three columns (declared in PART 2, left as it was)
     900px  card grids and the pricing grid become three columns, and the
            card content order returns to the approved desktop order
     980px  the hero becomes two columns, the ribbon returns to its desktop
            footprint, and vertical spacing reaches the source's values
    1024px  footer links leave their touch-target sizing
    1140px  card grid gap and card padding return to the source's values
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.1 — One container width, and the horizontal-overflow guards

   PART 1 gives .hero, .metrics-strip, .section and .footer a 90% container but
   only widens .section to 92% below 640px. The result on a phone is that the
   hero headline, the metrics strip and the footer each sit on a different
   optical margin from the sections between them, and from the navbar, which
   PART 4 already pinned to 92%/90%. One pair of values now drives all five.
   -------------------------------------------------------------------------- */

.hero,
.metrics-strip,
.section,
.footer {
  width: min(92%, 1140px);
}

@media (min-width: 640px) {
  .hero,
  .metrics-strip,
  .section,
  .footer {
    width: min(90%, 1140px);
  }
}

/* A grid or flex item refuses to shrink below its content's minimum width
   unless it is told otherwise, and that is how one long word turns into a
   horizontal scrollbar for the whole page. */
.hero-content,
.stripe-mockup-wrapper,
.stripe-feature-card,
.demo-box,
.footer-brand-col,
.footer-col,
.metrics-strip > div {
  min-width: 0;
}

/* Last-resort guard for the long compounds this copy actually contains
   ("desinformación", "Instalación", "Verificada"). break-word only splits a
   word that cannot fit on a line of its own, so normal wrapping is untouched. */
.hero-title,
.hero-subtitle,
.section-title,
.section-desc,
.section-tag,
.feature-title,
.feature-text,
.banner-title,
.banner-desc,
.faq-question,
.faq-answer,
.plan-list-text,
.metric-label,
.mockup-claim-text,
.mockup-claim-reason {
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   5.2 — Hero

   The DOM already reads copy first, mockup second, so nothing has to move for
   a screen reader. The `order` pair below states that intent explicitly rather
   than leaving it to the accident of source order, and it is what keeps the
   headline first if the grid definition is ever touched again.
   -------------------------------------------------------------------------- */

.stripe-hero-wrapper {
  /* Clear the fixed bar and add air, instead of the source's flat 10.5rem.
     The admin-bar offset is NOT added here: WordPress already pushes the
     document down with html { margin-top }, so counting it twice would leave a
     visible gap above the hero, for logged-in editors only. */
  padding-top: calc(var(--ddb-nav-height) + 2rem);
  padding-bottom: 3rem;
}

@media (min-width: 640px) {
  .stripe-hero-wrapper {
    padding-top: calc(var(--ddb-nav-height) + 3rem);
    padding-bottom: 4rem;
  }
}

@media (min-width: 980px) {
  .stripe-hero-wrapper {
    /* --ddb-nav-height is 5rem here, so this is the source's 10.5rem exactly,
       expressed against the bar it has to clear. */
    padding-top: calc(var(--ddb-nav-height) + 5.5rem);
    padding-bottom: 7rem;
  }
}

.hero {
  /* PART 1's max-width: 980px block adds 8rem of padding-top on top of the
     wrapper's own. The wrapper owns that spacing; the grid owns none of it. */
  padding-top: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem;
}

.hero-content { order: 1; }
.stripe-mockup-wrapper { order: 2; }

@media (min-width: 980px) {
  .hero {
    /* minmax(0, …) rather than the bare 1.1fr/0.9fr: an fr track has a
       min-content floor, so without it a long headline widens its column and
       pushes the mockup off screen. Same proportions, no overflow. */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 3.5rem;
  }

  .hero-content,
  .stripe-mockup-wrapper { order: 0; }
}

/* The ribbon, mobile first. Same gradient, same mask, same skew — only the
   footprint changes, and it changes to the values PART 1 already used below
   980px. Nothing about the artwork is touched. */
.stripe-hero-ribbon {
  width: 100%;
  right: -20%;
}

@media (min-width: 980px) {
  .stripe-hero-ribbon {
    width: 70%;
    right: -15%;
  }
}

.badge-stripe {
  max-width: 100%;
  flex-wrap: wrap;
  padding: 0.35rem 0.85rem;
  margin-bottom: 1.25rem;
  font-size: clamp(0.78rem, 0.72rem + 0.2vw, 0.88rem);
}

@media (min-width: 640px) {
  .badge-stripe {
    padding: 0.4rem 1.1rem;
    margin-bottom: 1.75rem;
  }
}

/* Fluid from 320px, and identical to the approved design from about 1330px up,
   where the source's own clamp has already reached its 4.1rem ceiling. The
   35.2px-at-640px against 33.3px-at-641px step disappears with the patch that
   created it. */
.hero-title {
  font-size: clamp(2rem, 1.4rem + 3.25vw, 4.1rem);
  margin-bottom: 0.85rem;
}

.hero-subtitle {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.18rem);
  margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .hero-title { margin-bottom: 1.35rem; }
  .hero-subtitle { margin-bottom: 2.25rem; }
}

.hero-cta-group {
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}

.hero-cta-group .btn-stripe-dark,
.hero-cta-group .btn-stripe-light {
  width: 100%;
  justify-content: center;
  min-height: 48px;
}

@media (min-width: 560px) {
  .hero-cta-group {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
  }

  .hero-cta-group .btn-stripe-dark,
  .hero-cta-group .btn-stripe-light { width: auto; }
}

@media (min-width: 980px) {
  .hero-cta-group { gap: 1.25rem; }
}

/* The floating mockup, grounded ------------------------------------------- */
/* On a phone it is no longer floating over anything: .stripe-back-card is a
   full-size box offset -20px up and to the right, and the card itself is
   tilted in 3D. Both are what "superpuesto" means in the brief. They come back
   at the width where the mockup has a column of its own again. */

.stripe-mockup-wrapper {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  perspective: none;
}

.stripe-card-mockup {
  transform: none;
  padding: 1.25rem;
}

.stripe-back-card { display: none; }

@media (min-width: 640px) {
  .stripe-card-mockup { padding: 1.75rem; }
}

@media (min-width: 980px) {
  .stripe-mockup-wrapper {
    max-width: none;
    margin-inline: 0;
    perspective: 1000px;
  }

  .stripe-card-mockup { transform: rotateY(-6deg) rotateX(4deg); }
  .stripe-back-card { display: block; }
}

/* Inside the mockup: two space-between rows that had nowhere to go. The URL is
   a domain and the verdict is a full sentence; at 320px both have to be
   allowed to wrap instead of pushing the card wider than its parent. */
.mockup-header {
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}

.mockup-meta {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mockup-status-bar {
  /* Three wrapped lines beside a vertically centred icon read as a
     misalignment. */
  align-items: flex-start;
  font-size: clamp(0.82rem, 0.78rem + 0.15vw, 0.88rem);
}

.mockup-claim-header {
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
}

/* --------------------------------------------------------------------------
   5.3 — Metrics strip

   Three columns survive 320px only because every label is short, and only once
   the gap stops spending 24px of a 294px row. Both type scales are fluid from
   here so neither can be the thing that breaks.
   -------------------------------------------------------------------------- */

.metrics-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  padding-block: 1.75rem;
  text-align: center;
}

.metric-number { font-size: clamp(1.35rem, 0.6rem + 2.4vw, 2.2rem); }

.metric-label {
  font-size: clamp(0.72rem, 0.6rem + 0.42vw, 0.95rem);
  line-height: 1.35;
}

@media (min-width: 640px) {
  .metrics-strip {
    gap: 1.25rem;
    padding-block: 2.25rem;
  }
}

@media (min-width: 980px) {
  .metrics-strip {
    gap: 2rem;
    padding-block: 2.5rem;
    /* The approved design left-aligns the strip. Centring is the phone's
       answer to a 92px column, not a new look. */
    text-align: left;
  }

  .metric-label { line-height: 1.6; }
}

/* --------------------------------------------------------------------------
   5.4 — Section shell

   7rem top and bottom is 224px per section. Eight sections is over 1700px of
   nothing, which is most of what makes the phone build feel endless.
   -------------------------------------------------------------------------- */

.section { --ddb-section-pad: 3.25rem; padding-block: var(--ddb-section-pad); }
.section-header { margin-bottom: 2.25rem; }

.section-tag {
  max-width: 100%;
  font-size: clamp(0.75rem, 0.7rem + 0.18vw, 0.88rem);
}

.section-title {
  font-size: clamp(1.6rem, 1.15rem + 2.25vw, 3rem);
  margin-bottom: 0.85rem;
}

.section-desc { font-size: clamp(0.98rem, 0.92rem + 0.28vw, 1.1rem); }

@media (min-width: 640px) {
  .section { --ddb-section-pad: 4.5rem; }
  .section-header { margin-bottom: 3rem; }
  .section-title { margin-bottom: 1.1rem; }
}

@media (min-width: 980px) {
  /* 7rem was 224px of empty band per section, and with nine sections that is
     most of a screen height spent on nothing. Landing on an anchor showed the
     header, then a void, then the eyebrow. 4.5rem still separates the sections
     clearly at desktop width without making the reader hunt for the content. */
  .section { --ddb-section-pad: 4.5rem; }
  .section-header { margin-bottom: 3rem; }
}

/* --------------------------------------------------------------------------
   5.5 — Card grids and the card itself

   ONE COLUMN, THEN THREE. The source's auto-fit/minmax(280px) resolves to two
   columns for every width from 636px to 1003px, which leaves the third card
   alone on a second row in all four card sections. Two columns are only honest
   here if the content divides by two, and it never does: every grid on this
   page holds exactly three items.
   -------------------------------------------------------------------------- */

.grid-3 {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1140px) {
  .grid-3 { gap: 2rem; }
}

.grid-3--spaced { margin-bottom: 2.5rem; }

@media (min-width: 980px) {
  .grid-3--spaced { margin-bottom: 4rem; }
}

.stripe-feature-card { padding: 1.5rem 1.25rem; }

@media (min-width: 640px) {
  .stripe-feature-card { padding: 2rem 1.75rem; }
}

@media (min-width: 1140px) {
  .stripe-feature-card { padding: 2.25rem 2rem; }
}

/* THE ORDER FIX -----------------------------------------------------------
   Every card puts a 52px icon between its tag and its title, so on a phone the
   first thing under the section heading is decoration, and the reader has to
   travel past it to find out what the card is about. The client asked for the
   label and the headline first, and the visual support after them.

   Done with `order` on the card's own flex column, so the DOM — and therefore
   the reading order for assistive technology — is untouched. The values are
   NEGATIVE on purpose: every other child keeps its initial order of 0, so
   three declarations move three elements and leave the price, the body text,
   the actions, the mini widget and the feature list exactly where they were.
   Positive values would have pushed all five of those above the tag.

   Restored to the approved composition at the width where the cards become
   columns again. */

.stripe-feature-card > .card-top-tag  { order: -3; }
.stripe-feature-card > .feature-title { order: -2; }
.stripe-feature-card > .feature-icon  { order: -1; }

.card-top-tag  { margin-bottom: 0.6rem; }
.feature-icon  { margin-bottom: 1rem; }

.feature-title {
  font-size: clamp(1.12rem, 1.02rem + 0.32vw, 1.3rem);
  margin-bottom: 0.6rem;
}

.feature-text {
  font-size: clamp(0.92rem, 0.88rem + 0.15vw, 0.98rem);
  margin-bottom: 1.1rem;
}

@media (min-width: 900px) {
  .stripe-feature-card > .card-top-tag,
  .stripe-feature-card > .feature-title,
  .stripe-feature-card > .feature-icon { order: 0; }

  .card-top-tag  { margin-bottom: 1.25rem; }
  .feature-icon  { margin-bottom: 1.5rem; }
  .feature-title { margin-bottom: 0.75rem; }
  .feature-text  { margin-bottom: 1.5rem; }
}

.card-mini-widget {
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 0.85rem;
}

@media (min-width: 640px) {
  .card-mini-widget {
    gap: 0.65rem;
    padding: 0.85rem 1rem;
  }
}

/* --------------------------------------------------------------------------
   5.6 — The dark banner

   4.5rem/3.5rem of padding leaves 182px of usable width at 320px.
   -------------------------------------------------------------------------- */

.stripe-banner-container { padding: 2.5rem 1.25rem; }

.banner-tag {
  max-width: 100%;
  font-size: clamp(0.72rem, 0.68rem + 0.15vw, 0.82rem);
}

.banner-title { margin: 0.85rem 0 1rem; }
.banner-desc { font-size: clamp(0.98rem, 0.9rem + 0.35vw, 1.15rem); }
.banner-cta { margin-top: 1.25rem; }

.banner-cta .btn-stripe-light {
  width: 100%;
  justify-content: center;
  min-height: 48px;
}

@media (min-width: 560px) {
  .banner-cta { margin-top: 1.75rem; }
  .banner-cta .btn-stripe-light { width: auto; }
}

@media (min-width: 640px) {
  .stripe-banner-container { padding: 3rem 2rem; }
  .banner-title { margin: 1rem 0 1.25rem; }
}

@media (min-width: 980px) {
  .stripe-banner-container { padding: 4.5rem 3.5rem; }
}

/* --------------------------------------------------------------------------
   5.7 — Demo

   The chips carry long labels — "Noticia Científica (Verificada)" is 31
   characters — so below 560px they stay stacked and full width, where a label
   has a whole row to itself. Above it they wrap as a row, which is what the
   approved design shows.
   -------------------------------------------------------------------------- */

.demo-box { padding: 1.25rem; }

.demo-controls {
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}

.demo-chip {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 1rem;
  font-size: clamp(0.8rem, 0.74rem + 0.2vw, 0.9rem);
  line-height: 1.35;
  text-align: center;
}

@media (min-width: 560px) {
  .demo-controls {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .demo-chip {
    width: auto;
    padding: 0.6rem 1.3rem;
  }
}

.demo-input-group {
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.demo-input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0.8rem 1.25rem;
  font-size: clamp(0.92rem, 0.88rem + 0.15vw, 0.98rem);
}

.demo-input-group .btn-stripe-dark {
  width: 100%;
  justify-content: center;
  min-height: 44px;
}

@media (min-width: 640px) {
  .demo-box { padding: 1.75rem; }

  .demo-input-group {
    flex-direction: row;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .demo-input { padding: 0.9rem 1.5rem; }

  .demo-input-group .btn-stripe-dark {
    width: auto;
    flex: 0 0 auto;
  }
}

@media (min-width: 980px) {
  .demo-box { padding: 2.5rem; }
}

/* --------------------------------------------------------------------------
   5.8 — Pricing

   The grid already switches at 900px in PART 3. What was left is the card's
   own padding — 1.75rem a side leaves 224px at 320px — and the buy buttons,
   which put a label and a WooCommerce price on one space-between line with
   nothing allowed to wrap between them.
   -------------------------------------------------------------------------- */

.plan-card { padding: 2.75rem 1.15rem 1.5rem; }

.plan-actions { margin-top: 1.25rem; }
.plan-list { margin-top: 1.15rem; }
.pricing-foot { margin-top: 1.75rem; }

.plan-buy {
  flex-wrap: wrap;
  row-gap: 0.2rem;
  padding-inline: 1.1rem;
}

.plan-buy__label { min-width: 0; }

/* WooCommerce renders the price as markup, and a subscription period makes it
   long. It wraps onto its own line before it widens the button. */
.plan-buy__price {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 640px) {
  .plan-card { padding: 3rem 1.75rem 2rem; }
  .plan-actions { margin-top: 1.75rem; }
  .plan-list { margin-top: 1.5rem; }
  .pricing-foot { margin-top: 2.5rem; }
  .plan-buy { padding-inline: 1.5rem; }
}

/* --------------------------------------------------------------------------
   5.9 — FAQ

   THE ANSWERS WERE NEVER VISIBLE. PART 1 declares
   `.faq-answer { display: none }` and brings it back only under
   `.faq-item.active` — a class the SOURCE's script used to add. This build
   replaced that script with a native <details>/<summary>, and landing.js has
   no FAQ code at all by design, so nothing on this page has ever set
   `.active`. Opening a question revealed an empty box.

   The open state now comes from the element's own `open` attribute, which the
   browser sets with no script involved. This is the same class of defect the
   project already shipped once: content whose visibility depended on
   JavaScript that was not there.
   -------------------------------------------------------------------------- */

.faq-item[open] .faq-answer { display: block; }
.faq-item[open] .faq-icon { transform: rotate(180deg); }

/* A <summary> paints a disclosure triangle of its own unless its display is
   taken away from list-item. PART 1 sets display: flex, which removes it in
   Blink and Gecko; WebKit needs its pseudo-element named. */
.faq-question { list-style: none; }
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { content: ""; }

.faq-icon { transition: transform 0.25s ease; }

.faq-list { gap: 0.75rem; }

.faq-question {
  gap: 0.75rem;
  min-height: 48px;
  padding: 0.9rem 1.15rem;
  font-size: clamp(1rem, 0.94rem + 0.2vw, 1.1rem);
}

.faq-answer {
  padding: 0 1.15rem 1.1rem;
  font-size: clamp(0.92rem, 0.88rem + 0.15vw, 1rem);
}

@media (min-width: 640px) {
  .faq-list { gap: 1rem; }
  .faq-question { padding: 1.35rem 1.75rem; }
  .faq-answer { padding: 0 1.75rem 1.35rem; }
}

/* --------------------------------------------------------------------------
   5.10 — Footer

   .footer-content is a flex row with justify-content: space-between, but
   .footer-nav inside it is width: 100%, so it always wrapped anyway. Stating
   it as a one-column grid is the same rendering with none of the guesswork,
   and align-items: start stops a short brand column from floating in the
   middle of a tall navigation block.
   -------------------------------------------------------------------------- */

.footer { padding-block: 3rem 1.5rem; }

.footer-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 2rem;
}

.footer-nav { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 560px) {
  /* Two columns are safe here and nowhere else on this page: these are short
     link labels, not cards, and there are three groups of them. */
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 720px) {
  .footer-nav { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
}

/* Fifteen links stacked 0.55rem apart are about 22px tall each — half a touch
   target, and the legal ones are exactly the links a phone user has to be able
   to hit. The row gap pays for the extra height, so the block ends up the size
   it already was. Scoped to .footer-list so the mailto in the bottom bar keeps
   its inline flow inside its sentence. */
.footer-list { gap: 0; }

.footer-list .footer-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.25rem;
}

.footer-list .footer-link--pending {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

@media (min-width: 1024px) {
  .footer-list { gap: 0.55rem; }

  .footer-list .footer-link {
    display: inline-flex;
    min-height: 0;
    padding-block: 0;
  }

  .footer-list .footer-link--pending { display: flex; }
}

.footer-bottom { padding-top: 1.5rem; }

.footer-company .footer-link { overflow-wrap: anywhere; }

@media (min-width: 640px) {
  .footer { padding-block: 4rem 2rem; }
  .footer-bottom { padding-top: 2rem; }
}

/* --------------------------------------------------------------------------
   5.11 — Reduced motion, continued

   The block in PART 2 covers the cards and the hero ribbon. These are the
   displacements it did not reach: every button lifts 2px on hover and the hero
   mockup rotates out of its tilt. REDUCE, not remove — the colour and shadow
   changes on hover all survive, so every control still answers the pointer.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover,
  .btn-stripe-dark:hover,
  .btn-stripe-light:hover,
  .swatch-item:hover {
    transform: none;
  }

  .faq-icon { transition: none; }

  .stripe-card-mockup { transition-property: box-shadow; }

  /* Hover resolves to the resting transform of the current breakpoint, so the
     card changes shadow and nothing moves. */
  .stripe-card-mockup:hover { transform: none; }

  @media (min-width: 980px) {
    .stripe-card-mockup:hover { transform: rotateY(-6deg) rotateX(4deg); }
  }
}

/* Storefront shortcuts in the navbar --------------------------------------- */

.nav-icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--text-muted, #425466);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-icon-link:hover,
.nav-icon-link:focus-visible {
  color: var(--stripe-indigo, #635bff);
  background: rgba(99, 91, 255, 0.08);
}

.nav-cart-count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--stripe-indigo, #635bff);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

.nav-icon-link--panel {
  width: 44px;
  height: 44px;
}

/* ── Bulómetro strip (live counters under the hero) ───────────────────── */
.bulometro-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 1.4rem;
  margin: -1rem auto 0; padding: 0.75rem 1.25rem; max-width: 900px;
  border-radius: 999px; background: #fff; border: 1px solid var(--stripe-border, #e2e8f0);
  box-shadow: 0 10px 26px -18px rgba(50, 50, 93, 0.4); font-size: 0.92rem;
}
.bulometro-strip[hidden] { display: none; }
.bulometro-strip__label { font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem; color: var(--stripe-indigo, #635bff); }
.bulometro-strip__stat strong { font-family: var(--font-heading, inherit); font-size: 1.1rem; }
.bulometro-strip__stat--red strong { color: #ff3b30; }
.bulometro-strip__link { font-weight: 700; color: var(--stripe-indigo, #635bff); text-decoration: none; }
.shield-cta { text-align: center; margin-top: 2rem; }
@media (max-width: 640px) { .bulometro-strip { border-radius: 18px; margin-top: 0; } }