/* ════════════════════════════════════════════════════════════════
   Cadabra Landing Page — styles.css
   Layout: Escala-inspired (dark teal hero, form right, watermark bg)

   Structure:
     1.  Reset & base
     2.  Scroll-reveal
     3.  prefers-reduced-motion
     4.  Navbar (transparent → solid)
     5.  Logo
     6.  Hero section (background, layout)
     7.  Hero watermark SVG
     8.  Hero form card
     9.  Hero CTA button
     10. Benefit cards
     11. Testimonial cards
     12. Mobile sticky CTA bar
     13. Scrollbar
   ════════════════════════════════════════════════════════════════ */


/* ── 1. Reset & base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

:focus          { outline: none; }
:focus-visible  { outline: 2px solid #0d9488; outline-offset: 3px; border-radius: 6px; }


/* ── 2. Scroll-reveal ──────────────────────────────────────────── */
.reveal-stagger {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity   0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-stagger.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ── 3. prefers-reduced-motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
    scroll-behavior: auto           !important;
  }
  .reveal-stagger   { opacity: 1; transform: none; transition: none; }
  .mobile-cta-bar   { transition: none; }
}


/* ── 4. Navbar / Cabecera ──────────────────────────────────────── */
#navbar {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 12px -3px rgba(15, 23, 42, 0.08);
}


/* ── 6. Hero section ───────────────────────────────────────────── */
.hero-section {
  background:
    /* Subtle radial highlight top-left */
    radial-gradient(ellipse 70% 60% at 20% 30%, rgba(13, 148, 136, 0.25) 0%, transparent 60%),
    /* Base dark teal gradient */
    linear-gradient(160deg, #0b3d45 0%, #0a4f5e 45%, #093a46 100%);
  min-height: 88vh;
}


/* ── 7. Hero watermark SVG ─────────────────────────────────────── */
.hero-watermark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  /* Fade edges so it doesn't compete with text */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,0.8) 55%, transparent 90%),
    linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,0.8) 55%, transparent 90%),
    linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-composite: intersect;
  opacity: 0.9;
}

.hero-watermark svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ── 8. Hero form card ─────────────────────────────────────────── */
.hero-form-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04),
    0 24px 64px -12px rgba(10, 60, 70, 0.35),
    0 8px 24px -6px rgba(10, 60, 70, 0.20);
  /* Subtle lift from hero background */
  position: relative;
  z-index: 2;
}

.hero-form-input {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 0.875rem;
  font-family: inherit;
  color: #0f172a;
  background: #f8fafc;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  display: block;
}

.hero-form-input::placeholder { color: #94a3b8; }

.hero-form-input:focus {
  outline: none;
  border-color: #0d9488;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

/* Remove autofill yellow */
.hero-form-input:-webkit-autofill,
.hero-form-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #f8fafc inset;
  -webkit-text-fill-color: #0f172a;
}


/* ── 8b. Form validation error states ─────────────────────────── */
.hero-form-input.input-error {
  border-color: #ef4444;
  background: #fff5f5;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.hero-form-input.input-error:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.20);
}

.field-error {
  font-size: 0.75rem;
  color: #dc2626;
  margin-top: 4px;
  min-height: 1rem;       /* evita saltos de layout */
  display: block;
}


/* ── 9. Hero CTA button ────────────────────────────────────────── */
.hero-cta-btn {
  background: #f97316;           /* orange-500 — high contrast on white card */
  color: white;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 14px -3px rgba(249, 115, 22, 0.45);
}

.hero-cta-btn:hover {
  background: #ea580c;           /* orange-600 */
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -4px rgba(249, 115, 22, 0.50);
}

.hero-cta-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.hero-cta-btn:focus-visible {
  outline: 2px solid #f97316;
  outline-offset: 2px;
}


/* ── 10. Benefit cards ─────────────────────────────────────────── */
.benefit-card {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 16px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  cursor: default;
}

.benefit-card:hover {
  border-color: #ccfbf1;
  box-shadow: 0 12px 32px -8px rgba(13, 148, 136, 0.15);
  transform: translateY(-3px);
}

.benefit-number {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-size: 3rem;
  font-weight: 900;
  color: #f1f5f9;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.benefit-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  transition: transform 0.2s ease;
}

.benefit-card:hover .benefit-icon-wrap {
  transform: scale(1.08);
}


/* ── 11. Testimonial cards ─────────────────────────────────────── */
.testimonial-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.25s, transform 0.25s;
}

.testimonial-card:hover {
  box-shadow: 0 8px 28px -6px rgba(13, 148, 136, 0.12);
  transform: translateY(-2px);
}

.star { color: #fbbf24; font-size: 0.95rem; }

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}


/* ── 12. Mobile sticky CTA ─────────────────────────────────────── */
.mobile-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  padding: 0.75rem 1.25rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(11, 61, 69, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.10);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-cta-bar.is-visible {
  transform: translateY(0);
}

.mobile-cta-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 52px;
  background: #f97316;
  color: white;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s;
}

.mobile-cta-link:hover { background: #ea580c; }


/* ── 13. Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #99f6e4; border-radius: 99px; }