/* Reusable brand utilities for landing pages (Bootstrap via CDN) */
:root { --brand-cta: #d28066; }
.bg-brand { background-color: var(--brand-cta) !important; }
/* Section wave divider */
.section-wave { line-height: 0; }
.section-wave svg { display: block; width: 100%; height: auto; }

/* Page-scoped spacing: add a bit more breathing room between sections */
.landing-rsvp section:not(:first-of-type) { padding-top: clamp(3.75rem, 3rem + 1.2vw, 4.75rem) !important; }
@media (min-width: 992px) {
  .landing-rsvp section:not(:first-of-type) { padding-top: clamp(4rem, 3rem + 1.4vw, 5rem) !important; }
}

/* Scoped styles for hero timeline (placed in body so the layout shell doesn't strip it) */
.hero-steps { max-width: 560px; --badge-size: 6rem; --badge-left: -14px; --badge-border: 4px; --inner-padding: 3.5rem; }
.hero-steps .step-item { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; position: relative; }
.hero-steps .step-item.show { opacity: 1; transform: none; }
/* If GSAP runs, we disable CSS transitions to avoid double animations */
.hero-steps.gsap .step-item { transition: none !important; }
/* Ensure enough space for the badge; keep this in sync with --inner-padding */
.hero-steps .step-item > .position-relative { padding-left: var(--inner-padding); }
.hero-steps .icon-badge { position: absolute; left: var(--badge-left); width: var(--badge-size); height: var(--badge-size); border-radius: 50%; background: #ffffff; border: var(--badge-border) solid #dee2e6; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 .375rem .75rem rgba(0,0,0,.08); background-position: center; background-size: cover; background-repeat: no-repeat; }
/* Per-step images as background for reliable cover + clipping */
.hero-steps .step-item.step-1 .icon-badge { background-image: url('/ilustrations/share.svg'); }
.hero-steps .step-item.step-2 .icon-badge { background-image: url('/ilustrations/attendance.svg'); }
.hero-steps .step-item.step-3 .icon-badge { background-image: url('/ilustrations/configure.svg'); }
.hero-steps .step-box { background: #ffffff; color: #212529; border: 2px solid rgba(13,110,253,.15); }
/* connector centered using a flex wrapper; animated to grow downward */
.hero-steps .connector-wrap { display: flex; justify-content: center; }
.hero-steps .connector { height: 36px; border-left: 2px dashed #e9ecef; width: 0; margin: .25rem 0 .75rem 0; transform-origin: top center; transform: scaleY(0); opacity: 0; will-change: transform, opacity; }

/* Removed arrow visuals; connector dotted line indicates progression */

/* Color variants per step to better match the reference */
.hero-steps .step-item.step-1 .icon-badge { border-color: #ffd1d1; }
.hero-steps .step-item.step-1 .step-box { border-color: #ffd1d1; }
.hero-steps .step-item.step-1 .connector { border-left-color: #ffd1d1; }

.hero-steps .step-item.step-2 .icon-badge { border-color: rgba(13,110,253,.35); }
.hero-steps .step-item.step-2 .step-box { border-color: rgba(13,110,253,.25); }
.hero-steps .step-item.step-2 .connector { border-left-color: rgba(13,110,253,.25); }

.hero-steps .step-item.step-3 .icon-badge { border-color: #e9ecef; }
.hero-steps .step-item.step-3 .step-box { border-color: #e9ecef; }
.hero-steps .step-item.step-3 .connector { border-left-color: #e9ecef; }

/* Avatars + rating (left column) */
.avatar { width: 36px; height: 36px; border-radius: 50%; background: #e9ecef; color: #495057; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #ffffff; box-shadow: 0 .125rem .25rem rgba(0,0,0,.06); }
.avatar + .avatar { margin-left: -15px; }
@media (max-width: 991.98px) {
  .hero-steps { margin-top: .5rem; margin-left: auto; margin-right: auto; }
  /* margin-left handled by variable-based calc above */
}
/* Mobile: refine layout for compact, readable steps */
@media (max-width: 575.98px) {
  /* Make content area wider: minimal reserved left space */
  .hero-steps { --badge-size: 3.25rem; --inner-padding: 1rem; }
  .hero-steps .step-item > .position-relative { min-height: calc(var(--badge-size) + .35rem); padding-left: var(--inner-padding) !important; }
  /* Overlap badge on the card's top-left corner */
  .hero-steps .icon-badge {
    top: -.6rem !important; /* rise above the card edge */
    left: .25rem !important; /* nudge a bit more to the very edge */
    transform: none !important; /* cancel translate-middle-y */
    z-index: 2; /* sit above the card */
    border-width: 3px; /* slightly slimmer on small screens */
  }
  /* Card padding: compact and not pushed right by the badge */
  .hero-steps .step-box {
    /* Move content slightly right so the badge never covers text */
    padding-left: calc(1rem + (var(--badge-size) * 0.72)) !important;
    padding-right: 1rem !important;
    padding-top: 1rem !important; /* keep text clear of the overlapped badge */
    padding-bottom: .85rem !important;
  }
  /* Ensure the title sits on its own line with a hair more space */
  .hero-steps .step-box strong { display: block; margin-bottom: .15rem; }
  /* Tight typography for small screens */
  .hero-steps .step-box strong { font-size: 1rem; line-height: 1.3; }
  .hero-steps .step-box .small { font-size: .92rem; }
  /* Space between stacked steps (connectors hidden on mobile) */
  .hero-steps .step-item + .step-item { margin-top: .85rem; }
}

/* Small tablets (sm: 576–767px): keep overlap, give more width */
@media (min-width: 576px) and (max-width: 767.98px) {
  .hero-steps { --badge-size: 3.75rem; --inner-padding: .75rem; }
  .hero-steps .step-item > .position-relative { min-height: calc(var(--badge-size) + .5rem); padding-left: var(--inner-padding) !important; }
  .hero-steps .icon-badge {
    top: -.55rem !important;
    left: .15rem !important;
    transform: none !important;
    z-index: 2;
    border-width: 3px;
  }
  .hero-steps .step-box {
    padding-left: calc(1rem + (var(--badge-size) * 0.65)) !important;
    padding-right: 1rem !important;
    padding-top: 1rem !important;
    padding-bottom: .9rem !important;
  }
  .hero-steps .step-box strong { display: block; margin-bottom: .15rem; }
  .hero-steps .step-box strong { font-size: 1.05rem; line-height: 1.3; }
  .hero-steps .step-box .small { font-size: .95rem; }
  .hero-steps .step-item + .step-item { margin-top: 1rem; }
}

/* Medium devices (md: 768–991px): center, keep overlap, scale badges down */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-steps { --badge-size: 3.5rem; --badge-left: 0; --inner-padding: 1rem; margin-left: auto; margin-right: auto; }
  .hero-steps .step-item > .position-relative { min-height: calc(var(--badge-size) + .45rem); padding-left: var(--inner-padding) !important; }
  .hero-steps .icon-badge { top: -.5rem !important; left: .35rem !important; transform: none !important; border-width: 3px; }
  .hero-steps .step-box { padding-left: calc(1rem + (var(--badge-size) * 0.56)) !important; padding-right: 1.1rem !important; padding-top: 1rem !important; padding-bottom: .95rem !important; }
  .hero-steps .step-box strong { font-size: 1.06rem; line-height: 1.3; }
  .hero-steps .step-box .small { font-size: .96rem; }
  /* Center the dotted connector lines */
  .hero-steps .connector-wrap { justify-content: center; }
  .hero-steps .connector-wrap .connector { margin-left: 0; }
}

/* Secure badge blob background */
.secure-badge-wrap { position: relative; display: inline-block; }
.secure-badge-wrap img { position: relative; z-index: 1; }
/* Removed blob SVG background */
/* Inline highlight (dark pill) for emphasized words in headings) */
.inline-highlight {
  background-color: var(--brand-cta);
  color: #fff;
  border-radius: .45rem;
  padding: .1em .4em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Stats flash effect (used when numbers change) */
.stat-card { transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.stat-card.stat-flash { background-color: rgba(210,128,102,.08); border-color: rgba(210,128,102,.55) !important; box-shadow: 0 .5rem 1rem rgba(210,128,102,.15); }

#features .card { border-radius: 2rem; overflow: hidden; }
/* Bigger radius for images in the "Ejemplo" section */
#example img { border-radius: 2rem !important; }

/* Make the Feature Demo accordion backgrounds transparent */
#rsvpFeatureAccordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-bg: transparent;
  /* keep a subtle divider color for item borders */
  --bs-accordion-border-color: rgba(0,0,0,.08);
  /* soften focus ring (match blog FAQ pinkish tone) */
  --bs-accordion-btn-focus-border-color: rgba(210,128,102,.45); /* #d28066 @ ~45% */
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(210,128,102,.20); /* #d28066 @ 20% */
  /* remove default paddings */

  --bs-accordion-body-padding-x: 0;
}
/* Remove default button shadow line and keep text color */
#rsvpFeatureAccordion .accordion-button {
  box-shadow: none !important;
  color: inherit;
  font-weight: 700; /* title a bit bolder */
}
#rsvpFeatureAccordion .accordion-button:not(.collapsed) {
  box-shadow: inset 0 -1px 0 var(--bs-accordion-border-color);
}
/* Content slightly smaller and still bold */
#rsvpFeatureAccordion .accordion-body {
  font-size: 0.95rem; /* a bit smaller */
  font-weight: 600;   /* bold, but less than title */
}