/* Shared styles for the secondary pages (thanks, legal, 404) — same tokens as the landing page */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --primary-red: #E31E24;
  --dark-red: #B71C1C;
  --light-red: #FF5252;
  --black: #000000;
  --dark-gray: #1a1a1a;
  --medium-gray: #333333;
  --light-gray: #f5f5f5;
  --white: #ffffff;
  --whatsapp: #25D366;
  --gradient-dark: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  --gradient-red: linear-gradient(135deg, #E31E24 0%, #FF5252 100%);
  --font-primary: 'Heebo', sans-serif;
  --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 2rem; --spacing-lg: 3rem; --spacing-xl: 4rem;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px;
  --shadow-md: 0 4px 20px rgba(0,0,0,0.15);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.2);
  --shadow-red: 0 4px 20px rgba(227,30,36,0.3);
}
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-primary);
  line-height: 1.6;
  color: var(--medium-gray);
  background-color: var(--white);
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); }
h1, h2, h3 { font-weight: 700; line-height: 1.2; margin-bottom: var(--spacing-sm); color: var(--black); }
.highlight { color: var(--primary-red); font-weight: 800; }

/* Dark hero, as on the landing page */
.hero {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-dark);
  overflow: hidden;
  padding: var(--spacing-xl) 0;
  text-align: center;
  color: var(--white);
}
.hero.hero-full { min-height: 100vh; }
.hero .gradient-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(227, 30, 36, 0.15) 0%, transparent 50%);
}
.hero-content { position: relative; z-index: 2; }
.logo { max-width: 400px; width: 30%; height: auto; margin-bottom: var(--spacing-md); filter: drop-shadow(0 4px 20px rgba(227, 30, 36, 0.5)); animation: fadeInDown 1s ease-out; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; color: var(--white); text-shadow: 2px 2px 10px rgba(0,0,0,0.5); animation: fadeInUp 1s ease-out 0.2s backwards; }
.hero .subtitle { font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 500; margin-bottom: var(--spacing-lg); opacity: 0.95; animation: fadeInUp 1s ease-out 0.4s backwards; }
.hero .success-icon {
  width: 96px; height: 96px; margin: 0 auto var(--spacing-md);
  background: var(--gradient-red); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: var(--white); box-shadow: var(--shadow-red);
  animation: fadeInDown 1s ease-out;
}
.hero-actions { display: flex; gap: var(--spacing-sm); justify-content: center; flex-wrap: wrap; animation: fadeInUp 1s ease-out 0.6s backwards; }

.cta-button {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--gradient-red); color: var(--white);
  padding: 1.1rem 2.2rem; font-size: 1.2rem; font-weight: 700;
  text-decoration: none; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-red); transition: all 0.3s ease; border: 2px solid transparent;
}
.cta-button:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 40px rgba(227,30,36,0.5); }
.cta-button.whatsapp { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); box-shadow: 0 4px 20px rgba(37,211,102,0.4); }
.cta-button.whatsapp:hover { box-shadow: 0 8px 30px rgba(37,211,102,0.6); }
.cta-button-secondary {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: transparent; color: var(--white);
  padding: 1.1rem 2.2rem; font-size: 1.2rem; font-weight: 700;
  text-decoration: none; border-radius: var(--radius-lg);
  border: 2px solid rgba(255,255,255,0.5); transition: all 0.3s ease;
}
.cta-button-secondary:hover { background: var(--white); color: var(--primary-red); border-color: var(--white); }

/* Legal / text pages */
.legal { padding: var(--spacing-xl) 0; direction: rtl; }
.legal .container { max-width: 900px; }
/* The original privacy/terms pages used .legal-* classes with no styles at all; they are
   aliased to the accessibility-statement styles below so all three pages match. */
.acc-title, .legal-title { font-size: clamp(2rem, 4vw, 3rem); text-align: center; margin-bottom: var(--spacing-xs); }
.acc-updated, .legal-updated { text-align: center; color: #999; font-size: 0.95rem; margin-bottom: var(--spacing-xl); }
.acc-section, .legal-section { margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-lg); border-bottom: 1px solid #eee; }
.acc-section:last-of-type, .legal-section:last-of-type { border-bottom: none; }
.acc-section h2, .legal-section h2 { font-size: 1.5rem; margin-bottom: var(--spacing-sm); padding-right: var(--spacing-sm); border-right: 4px solid var(--primary-red); }
.acc-section h3, .legal-section h3 { font-size: 1.15rem; margin: var(--spacing-md) 0 var(--spacing-xs); color: var(--black); }
.acc-section p, .legal-section p { font-size: 1.05rem; line-height: 1.9; margin-bottom: var(--spacing-sm); }
.acc-list, .legal-list { list-style: none; padding: 0; }
.acc-list li, .legal-list li { position: relative; padding-right: 28px; margin-bottom: var(--spacing-sm); font-size: 1.05rem; line-height: 1.8; }
.acc-list li::before, .legal-list li::before { content: '✔'; position: absolute; right: 0; color: var(--primary-red); font-weight: 700; }
.acc-contact, .legal-contact { background: var(--light-gray); padding: var(--spacing-md); border-radius: var(--radius-md); margin-top: var(--spacing-sm); }
.acc-contact p, .legal-contact p { margin-bottom: var(--spacing-xs); }
.acc-contact i, .legal-contact i { color: var(--primary-red); width: 20px; text-align: center; margin-left: 8px; }
.acc-contact a, .legal-contact a { color: var(--primary-red); text-decoration: none; font-weight: 600; }
.acc-contact a:hover, .legal-contact a:hover { color: var(--dark-red); text-decoration: underline; }
.acc-disclaimer, .legal-footer-note { background: #FFF3E0; padding: var(--spacing-md); border-radius: var(--radius-md); border-right: 4px solid #FF9800; margin-top: var(--spacing-md); }
.acc-disclaimer p, .legal-footer-note p { text-align: center; margin: 0; }
.legal-home { text-align: center; margin-top: var(--spacing-lg); }
.legal-home a { color: var(--primary-red); font-weight: 700; text-decoration: none; }
.legal-home a:hover { text-decoration: underline; }

/* Compact dark header for the legal pages */
.page-header { background: var(--gradient-dark); padding: var(--spacing-md) 0; text-align: center; }
.page-header img { max-width: 160px; width: 40%; height: auto; filter: drop-shadow(0 4px 20px rgba(227, 30, 36, 0.5)); }

/* Footer — same as the landing page */
.footer { background: var(--dark-gray); padding: var(--spacing-lg) 0; color: var(--white); text-align: center; }
.footer-text { font-size: 1.1rem; margin-bottom: var(--spacing-xs); opacity: 0.9; }
.footer-copy { font-size: 0.9rem; opacity: 0.7; }
.footer-links { margin: var(--spacing-sm) 0; }
.footer-links a { color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.3s ease; }
.footer-links a:hover { color: var(--primary-red); }
.footer-divider { margin: 0 0.5rem; opacity: 0.4; }

@keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 768px) {
  .logo { max-width: 280px; width: 60%; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .cta-button, .cta-button-secondary { justify-content: center; }
}
@media (max-width: 480px) {
  :root { --spacing-md: 1rem; --spacing-lg: 2rem; --spacing-xl: 2.5rem; }
  .container { padding: 0 var(--spacing-sm); }
}