/* Fonts — Sohne */
@font-face {
  font-family: "Sohne";
  src: url("../fonts/sohne-font-family/TestSohne-Leicht-BF663d89cd4952e.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sohne";
  src: url("../fonts/sohne-font-family/TestSohne-LeichtKursiv-BF663d89cd9a361.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Sohne";
  src: url("../fonts/sohne-font-family/TestSohne-Buch-BF663d89cd32e6a.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sohne";
  src: url("../fonts/sohne-font-family/TestSohne-BuchKursiv-BF663d89cd3e887.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Sohne";
  src: url("../fonts/sohne-font-family/TestSohne-Kraftig-BF663d89cd37e26.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sohne";
  src: url("../fonts/sohne-font-family/TestSohne-Halbfett-BF663d89cd2d67b.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sohne";
  src: url("../fonts/sohne-font-family/TestSohne-Fett-BF663d89cca89ff.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sohne";
  src: url("../fonts/sohne-font-family/TestSohne-FettKursiv-BF663d89cc64878.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Sohne";
  src: url("../fonts/sohne-font-family/TestSohne-Extrafett-BF663d89cc9f2c0.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Reset and base */
*, *::before, *::after { box-sizing: border-box; }
html {
  height: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  height: 100%;
  font-family: "Sohne", system-ui, sans-serif;
  line-height: 1.5;
  color: #333;
  background: #e8e4df;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

html {
  scrollbar-width: none;
}
html::-webkit-scrollbar {
  display: none;
}

/* FAQ section (beige/cream bg) */
.faq-section {
  width: 100%;
  min-height: 100vh;
  background: var(--color-cream);
  padding: 3rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.faq-section__inner {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

.faq-section__title {
  margin: 0 0 1rem;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
}

.faq-section__intro {
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
  margin: 0 0 2rem;
}

/* FAQ page (standalone faq.html): same bg as hero, navbar + footer from index */
.faq-page {
  background: #ffffff;
}
.faq-page__main {
  background: #ffffff;
  min-height: 50vh;
}
.faq-section--planes {
  background: #ffffff;
  padding-top: 0;
}
.faq-section--planes .faq-section__title {
  text-align: left;
  color: #012169;
  white-space: nowrap;
}
.faq-section--planes .faq-section__intro {
  text-align: left;
}
@media (max-width: 640px) {
  .faq-section--planes .faq-section__title {
    white-space: normal;
  }
}

.faq-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-item {
  margin-bottom: 1rem;
  padding: 1.25rem 1.25rem 1.125rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  box-sizing: border-box;
}

.faq-item:last-child {
  margin-bottom: 0;
}

.faq-item__question {
  margin: 0;
}

.faq-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 1rem;
  color: #fff;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.faq-item__question-text {
  flex: 1;
  color: #1a1a1a;
  text-align: left;
}

.faq-item__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.25rem;
  line-height: 1;
  color: #1a1a1a;
  transition: transform 0.2s ease;
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__answer {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #444;
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  display: none;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-line;
}

.faq-item.is-open .faq-item__answer {
  display: block;
}

/* Obituary section: full viewport, white (same height as hero) */
.obituary-section {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
}

.obituary-section__inner {
  max-width: 560px;
  width: 100%;
  text-align: center;
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Prayer / symbol line */
.obituary-section__prayer {
  font-size: 0.9375rem;
  color: #5c5c5c;
  margin: 0 0 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}

.obituary-section__prayer[hidden] {
  display: none;
}

/* Full name – main heading */
.obituary-section__name {
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 0.5rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Dates under name */
.obituary-section__dates {
  font-size: 1rem;
  color: #6b6b6b;
  margin: 0 0 1.75rem;
  font-weight: 400;
}

.obituary-section__dates[hidden] {
  display: none;
}

/* Photo box: placeholder or image */
.obituary-section__photo-box {
  margin: 0 auto 1.75rem;
  position: relative;
}

.obituary-section__photo-placeholder {
  width: 160px;
  height: 200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #f2f0ed;
  border: 2px dashed #c9c4bd;
  border-radius: 10px;
  color: #9a958e;
}

.obituary-section__photo-placeholder[hidden] {
  display: none;
}

.obituary-section__photo-placeholder-icon {
  font-size: 2rem;
  line-height: 1;
  opacity: 0.7;
}

.obituary-section__photo-placeholder-text {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.obituary-section__photo {
  max-width: 200px;
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.obituary-section__photo[hidden] {
  display: none;
}

/* Main paragraph – body text */
.obituary-section__message {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #2d2d2d;
  text-align: left;
  white-space: pre-wrap;
  margin: 0;
}

.obituary-section__message p {
  margin: 0 0 1em;
}

.obituary-section__message p:last-child {
  margin-bottom: 0;
}

/* Stats intro section: 80% / 30sec / 100% in glass panels */
/* ── Tagline section ───────────────────────────────────────────── */
.tagline-section {
  position: relative;
  width: 100%;
  padding: clamp(5rem, 14vw, 10rem) 1.5rem;
  background: #fff url("../img/grad2.jpg") center / cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  scroll-snap-align: start;
  overflow: hidden;
}

.tagline-section__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0.85) 25%, rgba(255, 255, 255, 0.4) 60%, transparent 100%);
  z-index: 0;
}

.tagline-section__inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
}

.tagline-section__title {
  font-family: "Sohne", system-ui, sans-serif;
  font-size: clamp(2.25rem, 6vw, 4rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #012169;
  margin: 0 0 1.5rem;
}

.tagline-section__subtitle {
  font-family: "Sohne", system-ui, sans-serif;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 400;
  line-height: 1.7;
  color: #58718D;
  max-width: 660px;
  margin: 0 auto;
}

.tagline-section .tagline-section__cards {
  position: relative;
  z-index: 1;
  margin-top: clamp(3.5rem, 8vw, 5.5rem);
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Override grid max-width when used as cards row in tagline */
.tagline-section .tagline-section__cards.stats-intro-section__inner {
  max-width: 1400px;
}

/* ── Pricing section (Stripe-like plans + liquid glass) ──────────── */
/* Bottom gradient: picture → white (mirrors top overlay which is white → picture) */
.pricing-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0.9) 4%, rgba(255, 255, 255, 0.5) 10%, transparent 18%);
}

.pricing-section__title {
  position: relative;
  z-index: 1;
  font-family: "Sohne", system-ui, sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #012169;
  margin: 0 auto clamp(2.5rem, 6vw, 4rem);
  text-align: left;
  max-width: 1100px;
  width: 100%;
  padding-left: 0;
  box-sizing: border-box;
}

.pricing-section__plans {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.pricing-section__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  border-radius: 24px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

.pricing-section__card--glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.pricing-section__card--glass::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%);
  opacity: 0.9;
}

.pricing-section__card--glass:hover {
  transform: scale(1.06);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.pricing-section__name {
  position: relative;
  z-index: 1;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.5);
  margin: 0 0 0.75rem;
  line-height: 1.2;
}

.pricing-section__price {
  position: relative;
  z-index: 1;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  color: #012169;
  margin: 0 0 0.5rem;
  line-height: 1.1;
}

.pricing-section__label,
.pricing-section__volume,
.pricing-section__monthly {
  position: relative;
  z-index: 1;
  font-family: "Sohne", system-ui, sans-serif;
  font-size: 0.9375rem;
  color: rgba(0, 0, 0, 0.7);
  margin: 0 0 0.35rem;
  line-height: 1.4;
}

.pricing-section__monthly {
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 1.25rem;
}

.pricing-section__pill {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.pricing-section__btn {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 0.75rem 1.5rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: #012169;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.pricing-section__btn:hover {
  background: #001a52;
  transform: translateY(-1px);
}

.pricing-section__faq-cta {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-family: "Sohne", system-ui, sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 500;
  color: #012169;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.pricing-section__faq-cta:hover {
  color: #001a52;
  transform: translateX(4px);
}

@media (max-width: 899px) {
  .pricing-section__plans {
    grid-template-columns: 1fr;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Stats intro section (cards reused inside tagline) ──────────── */
.stats-intro-section {
  width: 100%;
  min-height: 50vh;
  display: flex;
  align-items: center;
  padding: clamp(4rem, 12vw, 8rem) 1.5rem;
  scroll-snap-align: start;
  background: var(--color-off-white);
}

.stats-intro-section.bg-grad-loaded {
  background-image: url("../img/grad.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Desktop: second section background (override .bg-grad-loaded so grad2 shows) */
@media (min-width: 768px) {
  .stats-intro-section,
  .stats-intro-section.bg-grad-loaded {
    background-image: url("../img/grad2.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

.stats-intro-section__inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  align-items: stretch;
}

.stats-intro-section__col {
  padding: 0 2rem;
  text-align: left;
}

/* Glass panel (same style as API section card) – equal height in row */
.stats-intro-section__col--glass {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.22),
    0 2px 10px rgba(0, 0, 0, 0.18);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.stats-intro-section__col--glass:hover {
  transform: scale(1.05);
  z-index: 1;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.28),
    0 4px 16px rgba(0, 0, 0, 0.2);
}

.stats-intro-section__col--glass::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, transparent 45%, transparent 100%),
    radial-gradient(ellipse 120% 80% at 10% 5%, rgba(255, 255, 255, 0.28) 0%, transparent 50%);
  opacity: 0.95;
}

.stats-intro-section__col--glass::after {
  content: "";
  position: absolute;
  inset: 2px;
  pointer-events: none;
  border-radius: calc(28px - 2px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.stats-intro-section__col--glass .stats-intro-section__number,
.stats-intro-section__col--glass .stats-intro-section__label {
  color: rgba(0, 0, 0, 0.8);
  text-shadow: none;
}

.stats-intro-section__col--glass .stats-intro-section__text,
.stats-intro-section__col--glass .stats-intro-section__text strong,
.stats-intro-section__col--glass .stats-intro-section__list {
  color: rgba(0, 0, 0, 0.75);
}

.stats-intro-section__col--glass .stats-intro-section__list li {
  color: rgba(0, 0, 0, 0.72);
}

.stats-intro-section__number {
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 0.75rem;
  line-height: 1.1;
  position: relative;
  z-index: 1;
  text-align: center;
}

.stats-intro-section__text {
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  line-height: 1.6;
  color: #333;
  margin: 0;
  max-width: 42ch;
  position: relative;
  z-index: 1;
}

.stats-intro-section__text strong {
  font-weight: 600;
  color: #1a1a1a;
}

.stats-intro-section__label {
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 0.6rem;
  position: relative;
  z-index: 1;
  text-align: center;
}

.stats-intro-section__list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.6;
  color: #333;
  position: relative;
  z-index: 1;
}

.stats-intro-section__list li {
  margin-bottom: 0.5rem;
}

.stats-intro-section__list li:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .stats-intro-section {
    padding: 2rem 1rem;
  }

  .stats-intro-section__inner {
    grid-template-columns: 1fr;
    gap: 0.875rem;
    padding: 0;
  }

  .stats-intro-section__col--glass {
    padding: 1.75rem 1.5rem;
    width: 100%;
    box-sizing: border-box;
    flex: 1 1 0;
    min-height: 0;
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  .stats-intro-section__col {
    padding: 0;
    text-align: center;
  }

  .stats-intro-section__col--glass .stats-intro-section__number {
    margin-bottom: 0.4rem;
    text-align: center;
  }

  .stats-intro-section__col--glass .stats-intro-section__label {
    margin-bottom: 0.4rem;
    text-align: center;
  }

  .stats-intro-section__col--glass .stats-intro-section__text {
    font-size: 0.9375rem;
    line-height: 1.55;
    max-width: none;
    width: 100%;
    text-align: center;
  }

  .stats-intro-section__col--glass .stats-intro-section__list {
    font-size: 0.9375rem;
    padding-left: 1rem;
    text-align: left;
  }

  .stats-intro-section__col--glass .stats-intro-section__list li {
    margin-bottom: 0.35rem;
  }

  /* Tagline section: less top padding + cards fit within horizontal padding */
  .tagline-section {
    padding: clamp(3rem, 10vw, 6rem) 1rem;
  }

  .tagline-section .tagline-section__cards {
    margin-top: 2.5rem;
    width: 100%;
    padding: 0;
  }

  /* Stack cards in a flex column with fixed height so flex:1 makes them equal */
  .tagline-section .tagline-section__cards.stats-intro-section__inner {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: calc(56vw * 3 + 0.75rem * 2);
  }
}

/* Ceremony section: clouds bg, dim overlay, big statement + centered column (same height as nombre section) */
.ceremony-section {
  --ceremony-gap-slight: 0.5rem;
  --ceremony-gap-small: 0.5rem;
  --ceremony-gap-medium: 1.25rem;
  --ceremony-gap-large: 1.5rem;
  --ceremony-gap-larger: 2rem;
  --ceremony-padding-block: 2.5rem;
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ceremony-padding-block) 1.5rem;
  overflow: hidden;
  box-sizing: border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* no scroll-snap: ScrollTrigger pin conflicts with snap */
}

.ceremony-section__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #3b84d1;
}

.ceremony-section__cloud {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  animation-iteration-count: infinite;
}

.ceremony-section__cloud--1 {
  width: 85%;
  max-width: 720px;
  height: 55%;
  max-height: 480px;
  top: 15%;
  left: 0;
  background-image: url("../img/cloud1.png");
  animation: ceremony-cloud-run-in-out-1 35s linear infinite;
}

.ceremony-section__cloud--2 {
  width: 75%;
  max-width: 640px;
  height: 50%;
  max-height: 420px;
  top: 55%;
  right: 0;
  left: auto;
  bottom: auto;
  background-image: url("../img/cloud2.png");
  animation: ceremony-cloud-run-in-out-2 42s linear infinite;
}

@keyframes ceremony-cloud-run-in-out-1 {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(calc(100vw + 100%)); }
}

@keyframes ceremony-cloud-run-in-out-2 {
  0% { transform: translateX(100%); }
  100% { transform: translateX(calc(-100vw - 100%)); }
}

.ceremony-section__inner {
  position: relative;
  z-index: 2;
  max-width: 72rem;
  width: 92%;
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 0;
}

.ceremony-section__title {
  position: relative;
  z-index: 2;
  width: 100%;
  font-size: clamp(3.5rem, 18vw, 12rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 var(--ceremony-gap-larger);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  flex-shrink: 0;
  transform-origin: center center;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

@media (max-width: 640px) {
  .ceremony-section__title {
    font-size: clamp(1.5rem, 9vw, 3.5rem);
  }
}

.ceremony-section__subtitle {
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  max-width: 56rem;
  width: 95%;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.ceremony-section__heading {
  font-size: clamp(1.25rem, 3.5vw, 1.5rem);
  font-weight: 600;
  color: #f5f5f5;
  margin: 0 0 var(--ceremony-gap-larger);
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Cream section: full-width band below comunicacion */
.cream-section {
  position: relative;
  background: var(--color-cream);
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
  scroll-snap-align: start;
  overflow: hidden;
}

.cream-section__img {
  position: absolute;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
  object-fit: contain;
  object-position: center;
}

.cream-section__img--left {
  left: 2%;
  top: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: 22%;
}

.cream-section__img--right {
  right: 2%;
  top: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: 22%;
}

.cream-section__text {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  line-height: 1.5;
  color: #2d2d2d;
  text-align: justify;
}

/* Ajustes predefinidos: bloque con fondo primary */
.ajustes-section {
  background: var(--color-primary);
  padding: 3rem 1.5rem;
  text-align: center;
}

.ajustes-section__title {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}

/* Preview section: intro + nav fixed at top; only display area changes when toggling */
.preview-section {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  background: var(--color-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 3.5rem 1.5rem 2rem;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-sizing: border-box;
  overflow-x: hidden;
}

@media (min-width: 768px) {
  .preview-section {
    min-height: 115vh;
    min-height: 115dvh;
    height: 115vh;
    height: 115dvh;
  }
}

/* Fixed-width block so title + navbar never move when display toggles */
.preview-section__header {
  width: 100%;
  max-width: min(960px, calc(100vw - 3rem));
  flex-shrink: 0;
  margin-bottom: 1.25rem;
  text-align: center;
}

.preview-section__intro-title {
  margin: 0 auto 0.5rem;
  max-width: 90rem;
  font-family: Bauziet, system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.35rem, 3.2vw, 2.35rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
}

@media (min-width: 640px) {
  .preview-section__intro-title {
    white-space: nowrap;
  }
}

.preview-section__intro-subtitle {
  margin: 0 auto 1.25rem;
  max-width: 64rem;
  font-family: Bauziet, system-ui, sans-serif;
  font-size: clamp(0.9375rem, 1.8vw, 1.125rem);
  line-height: 1.5;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}

.preview-section__nav {
  display: flex;
  gap: 0;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 9999px;
  padding: 0.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 0;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}

.preview-section__nav-item {
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: #555;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.preview-section__nav-item:hover {
  color: #2d2d2d;
}

.preview-section__nav-item--active,
.preview-section__nav-item[aria-pressed="true"] {
  background: var(--color-primary);
  color: #fff;
}

/* Alternate header: desktop only when phone view is active */
.preview-section__header-alt {
  display: none;
}

.preview-section.is-phone-view .preview-section__header-alt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 1 auto;
  width: auto;
  max-width: min(420px, calc(100vw - 450px));
  margin-bottom: 2.5rem;
  text-align: left;
}

/* Mobile: allow section to grow and scroll (no fixed height) */
@media (max-width: 767px) {
  .preview-section.is-phone-view {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    justify-content: flex-start;
    padding: 2rem 1rem 2.5rem;
    overflow-x: hidden;
  }
  .preview-section.is-phone-view .preview-section__header-alt {
    max-width: 100%;
    width: 100%;
    margin-bottom: 2.5rem;
    text-align: center;
  }
  .preview-section.is-phone-view .preview-section__alt-title {
    font-size: clamp(1.75rem, 6vw, 2.75rem);
  }
  .preview-section.is-phone-view .preview-section__container--telefono {
    height: min(65vh, 600px);
    min-height: min(50vh, 400px);
  }
  .preview-section.is-phone-view .preview-section__phone-wrap {
    max-width: 100%;
    width: 100%;
  }
}

@media (min-width: 768px) {
  .preview-section.is-phone-view .preview-section__header {
    display: none;
  }
  .preview-section.is-phone-view {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  .preview-section.is-phone-view .preview-section__container--telefono {
    margin-left: 0;
    min-height: min(75vh, 700px);
    flex: 0 0 auto;
  }
}

/* Same sizes as hero .hero-title */
.preview-section__alt-title {
  margin: 0 0 0.5rem;
  max-width: 90rem;
  font-family: Bauziet, system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}

/* Same sizes as hero .hero-sub */
.preview-section__alt-subtitle {
  margin: 0;
  max-width: 64rem;
  font-family: Bauziet, system-ui, sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}

.preview-section__nav--alt {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.preview-section__container {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.preview-section__container--ordenador {
  flex: 0 1 auto;
  width: 92%;
  max-width: min(960px, calc(100vw - 3rem));
  min-width: 0;
  aspect-ratio: 16 / 9;
  max-height: min(calc(100vh - 8rem), 540px);
}

.preview-section__container--telefono {
  max-width: 375px;
  height: min(75vh, 700px);
  min-height: min(75vh, 700px);
  flex: 1 1 auto;
}

@media (min-width: 768px) {
  .preview-section__container--telefono {
    margin-left: 50%;
  }
  .preview-section:not(.is-phone-view) .preview-section__container--telefono {
    height: min(75vh, 700px);
    min-height: min(75vh, 700px);
  }
}

.preview-section__iframe {
  width: 100%;
  height: 100%;
  min-height: 280px;
  border: none;
  display: block;
}

/* Force iframe to fill phone container so no white stripes show */
.preview-section__container--telefono .preview-section__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* Wrapper: phone container + circulitos below (same width as phone so iframe unchanged) */
.preview-section__phone-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  flex: 0 0 auto;
  width: 100%;
  max-width: 375px;
  min-width: 0;
}

/* Liquid glass pill bar containing the 4 circulitos */
.preview-section__circulitos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.65rem 3.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.preview-section__circulito {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.preview-section__circulito:hover {
  transform: scale(1.15);
}
.preview-section__circulito.is-active {
  transform: scale(1.4);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  box-sizing: border-box;
}
.preview-section__circulito.is-active:hover {
  transform: scale(1.45);
}
.preview-section__circulito--verde {
  background: #22c55e;
}
.preview-section__circulito--azul {
  background: #3b82f6;
}
.preview-section__circulito--rojo {
  background: #ef4444;
}
.preview-section__circulito--candado {
  background: rgba(255, 255, 255, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
}
.preview-section__circulito--candado:hover {
  transform: scale(1.15);
}

.preview-section__tagline {
  margin: 1.25rem 0 0;
  width: 100%;
  max-width: min(960px, calc(100vw - 3rem));
  text-align: center;
  font-size: clamp(0.9375rem, 2vw, 1.0625rem);
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.4;
  flex-shrink: 0;
}

/* In phone view hide tagline below container; tagline lives in header-alt below titles */
@media (min-width: 768px) {
  .preview-section.is-phone-view .preview-section__tagline--main {
    display: none;
  }
}

.preview-section__tagline--alt {
  margin: 1rem 0 0;
  max-width: 64rem;
  text-align: left;
}

/* Tel section: one row — tel1, tel2+pdf, title — same height */
.tel-section {
  width: 100%;
  background: var(--color-glacier-white, #FFFFFF);
  padding: var(--space-16, 4rem) 7.5%;
  overflow: hidden;
}

.tel-section__inner {
  max-width: none;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-12, 3rem);
}

.tel-section__phones {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
  position: relative;
  flex: 0 0 auto;
  padding-left: 0;
}

.tel-section__title {
  flex: 1 1 0;
  min-width: 0;
  width: 26rem;
  max-width: 100%;
  margin: 0;
  padding-left: 2.5rem;
  text-align: left;
  font-family: "Sohne", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.85rem, 4.5vw, 2.85rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.tel-section__title-line {
  display: block;
  margin-top: 0.75rem;
  color: #012169;
  overflow-wrap: break-word;
}

.tel-section__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 20rem;
  max-height: 31rem;
  object-fit: contain;
  vertical-align: bottom;
}

.tel-section__img--left {
  transform: rotate(10deg);
  will-change: transform;
}

.tel-section__img--right {
  transform: rotate(10deg);
  will-change: transform;
}

.tel-section__tel2-wrap {
  position: relative;
  display: block;
  line-height: 0;
}

.tel-section__tel2-wrap .tel-section__img {
  display: block;
}

.tel-section__pdf-badge {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  width: 4rem;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  animation: tel-pdf-jump 4s ease-in-out infinite;
}

@media (max-width: 767px) {
  .tel-section__pdf-badge {
    animation: none;
  }
}

@keyframes tel-pdf-jump {
  0%, 82%, 100% {
    transform: translateY(0);
  }
  86% {
    transform: translateY(-14px);
  }
  90% {
    transform: translateY(0);
  }
  92% {
    transform: translateY(-5px);
  }
  95%, 100% {
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .tel-section__inner {
    flex-direction: column;
    align-items: center;
  }
  .tel-section__phones {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0;
  }
  .tel-section__title {
    text-align: center;
    padding-left: 0;
  }
  .tel-section__img--left {
    transform: rotate(10deg);
    margin-right: -0.75rem;
  }
  .tel-section__img--right {
    transform: rotate(10deg);
  }
  .tel-section__img {
    max-width: 11rem;
    max-height: 16rem;
  }
}

/* API section: card like 5.png – deceased info, velatorio/ceremonia, actions */
.api-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 3rem 7.5%;
  background: var(--color-off-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}


/* Local blue “stage” behind the card (API section only) */
.api-section__card-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.api-section::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% - 200px);
  transform: translateX(-50%);
  width: min(980px, 92vw);
  height: 340px;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 20% 10%, rgba(120, 180, 255, 0.55) 0%, rgba(20, 90, 210, 0.85) 40%, rgba(10, 55, 160, 0.95) 100%);
  box-shadow: 0 30px 90px rgba(10, 40, 120, 0.35);
  z-index: 0;
}

@media (max-width: 639px) {
  .api-section::before {
    display: none;
  }
  .api-section__card-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background: radial-gradient(120% 120% at 20% 10%, rgba(120, 180, 255, 0.55) 0%, rgba(20, 90, 210, 0.85) 40%, rgba(10, 55, 160, 0.95) 100%);
    box-shadow: 0 30px 90px rgba(10, 40, 120, 0.35);
    z-index: 0;
  }
}

.api-section__title {
  position: relative;
  z-index: 1;
  margin: 0 0 0.5rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  color: #2d2d2d;
  text-align: center;
}

.api-section__subtitle {
  position: relative;
  z-index: 1;
  margin: 0 0 2rem;
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #555;
  text-align: center;
}

.api-section__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  padding: 1.75rem 1.5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Glassmorphism card: frosted glass panel with highlight and inner edge */
.api-section__card--glass {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.22),
    0 2px 10px rgba(0, 0, 0, 0.18);
}

.api-section__card--glass::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, transparent 45%, transparent 100%),
    radial-gradient(ellipse 120% 80% at 10% 5%, rgba(255, 255, 255, 0.28) 0%, transparent 50%);
  opacity: 0.95;
}

.api-section__card--glass::after {
  content: "";
  position: absolute;
  inset: 2px;
  pointer-events: none;
  border-radius: calc(28px - 2px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 640px) {
  .api-section__card {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
  }
}

.api-section__left {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-shrink: 0;
}

.api-section__name {
  margin: 0;
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  font-weight: 600;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.api-section__card--glass .api-section__name {
  color: #000;
}

.api-section__date {
  margin: 0;
  font-size: 0.9375rem;
  color: #666;
}

.api-section__card--glass .api-section__date {
  color: rgba(20, 20, 20, 0.6);
}

.api-section__right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.api-section__details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.api-section__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin: 0;
}

.api-section__row--velatorio {
  align-items: center;
}

.api-section__row--velatorio .api-section__label {
  margin: 0;
  flex-shrink: 0;
}

.api-section__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  flex: 1;
  min-width: 0;
}

.api-section__item {
  font-size: 0.9375rem;
  color: #2d2d2d;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.api-section__card--glass .api-section__item {
  color: rgba(20, 20, 20, 0.92);
}

.api-section__icon {
  flex-shrink: 0;
  color: #8dc63f;
  vertical-align: middle;
  display: inline-block;
}

.api-section__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.api-section__card--glass .api-section__label {
  color: rgba(20, 20, 20, 0.6);
}

.api-section__row--ceremonia .api-section__value {
  margin: 0;
  font-size: 0.9375rem;
  color: #2d2d2d;
}

.api-section__card--glass .api-section__row--ceremonia .api-section__value {
  color: rgba(20, 20, 20, 0.92);
}

.api-section__divider {
  margin: 0;
  border: none;
  border-top: 1px solid #e5e5e5;
}

.api-section__card--glass .api-section__divider {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.api-section__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.api-section__btn {
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.6rem 1.25rem;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.api-section__btn:hover {
  opacity: 0.9;
}

.api-section__btn--primary {
  background: #8dc63f;
  color: #fff;
  border: none;
}

.api-section__card--glass .api-section__btn {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.api-section__btn--secondary {
  background: transparent;
  color: #8dc63f;
  border: 2px solid #8dc63f;
}

.api-section__btn--pdf {
  background: transparent;
  color: rgba(20, 20, 20, 0.88);
  border: 2px solid rgba(20, 20, 20, 0.35);
}

.api-section__card--glass .api-section__btn--pdf {
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.4);
}

.api-section__btn--pdf:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
}

.api-section__arrow {
  margin-left: auto;
  font-size: 1.25rem;
  color: #555;
}

.api-section__card--glass .api-section__arrow {
  color: rgba(20, 20, 20, 0.6);
}

@media (max-width: 639px) {
  .api-section__items {
    flex-direction: column;
    align-items: flex-start;
  }
  .api-section__item {
    white-space: normal;
  }
}

/* Formulario section: form card, same bg as stats (80%) section */
.formulario-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 5rem 1.5rem;
  background: var(--color-off-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.formulario-section.bg-grad-loaded {
  background-image: url("../img/grad.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Index: form section uses grad.png and soft blue tint at top */
#formulario-section:not(.formulario-section--business) {
  background: var(--color-off-white);
}

/* Intro + menu text on off-white: use dark colors */
#formulario-section:not(.formulario-section--business) .formulario-section__intro-title {
  color: #012169;
}
#formulario-section:not(.formulario-section--business) .formulario-section__intro-subtitle {
  color: #58718D;
  text-align: left;
}
#formulario-section:not(.formulario-section--business) .formulario-section__intro-col--subtitle {
  justify-content: flex-start;
}
#formulario-section:not(.formulario-section--business) .formulario-section__menu-item {
  color: rgba(0, 0, 0, 0.7);
}
#formulario-section:not(.formulario-section--business) .formulario-section__menu-item.is-active .formulario-section__menu-item-title,
#formulario-section:not(.formulario-section--business) .formulario-section__menu-item:hover .formulario-section__menu-item-title {
  color: #012169;
}
#formulario-section:not(.formulario-section--business) .formulario-section__menu-item:not(.is-active) {
  opacity: 0.5;
}
#formulario-section:not(.formulario-section--business) .formulario-section__menu-item:not(.is-active) .formulario-section__menu-item-sub {
  display: none;
}
#formulario-section:not(.formulario-section--business) .formulario-section__menu-item-sub,
#formulario-section:not(.formulario-section--business) .formulario-section__menu-item.is-active .formulario-section__menu-item-sub {
  color: rgba(0, 0, 0, 0.55);
}
#formulario-section:not(.formulario-section--business) .formulario-section__menu-item-num {
  color: rgba(0, 0, 0, 0.5);
}
#formulario-section:not(.formulario-section--business) .formulario-section__menu-item.is-active .formulario-section__menu-item-num {
  color: #012169;
}
#formulario-section:not(.formulario-section--business) .formulario-section__menu-item-chevron {
  color: rgba(0, 0, 0, 0.4);
}
#formulario-section:not(.formulario-section--business) .formulario-section__menu-eyebrow,
#formulario-section:not(.formulario-section--business) .formulario-section__menu-heading {
  color: #012169;
}
#formulario-section:not(.formulario-section--business) .formulario-section__menu-divider {
  border-top-color: rgba(0, 0, 0, 0.08);
}
#formulario-section:not(.formulario-section--business) .formulario-section__menu-item-countdown-bar {
  background: rgba(7, 63, 147, 0.35);
}
#formulario-section:not(.formulario-section--business) .formulario-section__menu-item-countdown {
  background: rgba(0, 0, 0, 0.08);
}

/* Intro text at top of form section (index): two-column layout */
.formulario-section__intro {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: clamp(2rem, 5vw, 3rem);
}

.formulario-section__intro-inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: center;
  text-align: left;
}

@media (min-width: 900px) {
  .formulario-section__intro-inner {
    grid-template-columns: 560px 1fr;
    gap: 1.5rem;
  }
  /* Align first letter of intro title with first letter of menu item titles (num width + gap + menu padding-left) */
  #formulario-section:not(.formulario-section--business) .formulario-section__intro-col--title {
    padding-left: calc(1.35rem + 1.625rem + 0.875rem);
  }
  #formulario-section:not(.formulario-section--business) .formulario-section__intro-inner {
    gap: 0.5rem;
  }
  #formulario-section:not(.formulario-section--business) .formulario-section__intro-title {
    margin-bottom: 0.35rem;
  }
}

.formulario-section__intro-col--title,
.formulario-section__intro-col--subtitle {
  min-width: 0;
  overflow: visible;
  display: flex;
  justify-content: center;
}

.formulario-section__intro-title {
  font-family: "Sohne", system-ui, sans-serif;
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
}

.formulario-section__intro-subtitle {
  font-family: "Sohne", system-ui, sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  overflow: visible;
  max-width: 28em;
  text-align: center;
}

@media (max-width: 899px) {
  .formulario-section__intro-inner {
    grid-template-columns: 1fr;
  }
  #formulario-section:not(.formulario-section--business) .formulario-section__intro-inner {
    gap: 0.5rem;
  }
  #formulario-section:not(.formulario-section--business) .formulario-section__intro-title {
    margin-bottom: 0.35rem;
  }
  #formulario-section:not(.formulario-section--business) .formulario-section__intro-subtitle {
    text-align: left;
  }
  #formulario-section:not(.formulario-section--business) .formulario-section__intro-col--subtitle {
    justify-content: flex-start;
  }
}

/* Business form (empresa.html only): use .formulario-section--business or #business-form / .business-form for overrides */

.formulario-section__title {
  position: relative;
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
  flex-shrink: 0;
}

.empresa-panel-intro {
  margin: 0 auto 1.5rem;
  max-width: 36em;
  font-size: 1rem;
  line-height: 1.5;
  color: #444;
  text-align: center;
}

/* Base card — used by empresa.html and any shared context */
.formulario-section__card {
  position: relative;
  overflow: visible;
  width: 100%;
  max-width: 480px;
  background: rgba(7, 63, 147, 0.22);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 24px;
  box-shadow:
    0 8px 32px rgba(7, 63, 147, 0.25),
    0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 2rem 1.75rem;
}

.formulario-section__card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.28) 0%, rgba(180, 210, 255, 0.08) 40%, transparent 100%);
  opacity: 0.95;
}

.formulario-section__card::after {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: calc(24px - 1px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* index.html only (no --business modifier) — darker glass for the dark section bg */

/* 2-column layout: menu (left) + video (right), same glass cards */
.formulario-section__cols {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

@media (min-width: 900px) {
  .formulario-section__cols {
    flex-direction: row;
    align-items: stretch;
    gap: 1.5rem;
  }
}

.formulario-section__card--menu {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
}

/* Layout-only wrapper when card is removed (menu-col has no background/border) */
.formulario-section__menu-col {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
}

@media (min-width: 900px) {
  .formulario-section__card--menu {
    width: 420px;
    max-width: 420px;
    align-self: flex-start;
  }
  .formulario-section__menu-col {
    width: 420px;
    max-width: 420px;
    align-self: flex-start;
  }
}

.formulario-section__right {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.formulario-section__card--video {
  flex: 1;
  max-width: none;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.formulario-section__card--video::before,
.formulario-section__card--video::after {
  border-radius: 24px;
}

/* Video content wrapper — must be a flex column so the video-wrap can fill it */
#formulario-video-content,
#formulario-video-content-2 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#formulario-video-content[hidden],
#formulario-video-content-2[hidden] {
  display: none;
}

/* Form content inside the shared card */
.formulario-section__form-inner {
  padding: 2rem 1.75rem;
  overflow-y: auto;
  max-height: 72vh;
  max-height: 72dvh;
  position: relative;
  z-index: 1;
}

.formulario-section__form-inner[hidden] {
  display: none;
}

.formulario-section__menu-header {
  padding: 0 0.25rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.5rem;
}

.formulario-section__menu-eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(100, 160, 255, 0.9);
  margin-bottom: 0.4rem;
}

.formulario-section__menu-heading {
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.01em;
}

.formulario-section__menu {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.formulario-section__menu-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  width: 100%;
  padding: 1rem 1.25rem 1rem 1.35rem;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  position: relative;
  z-index: 1;
}

.formulario-section__menu-item:not(.is-active) {
  opacity: 0.5;
}
.formulario-section__menu-item:not(.is-active) .formulario-section__menu-item-sub {
  display: none;
}

.formulario-section__menu-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.92);
  opacity: 1;
}

.formulario-section__menu-item.is-active {
  background: rgba(80, 140, 255, 0.1);
  color: #fff;
  box-shadow: inset 3px 0 0 rgba(100, 160, 255, 0.75);
}

.formulario-section__menu-item:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: -2px;
}

.formulario-section__menu-item-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.formulario-section__menu-item:hover .formulario-section__menu-item-num {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
}

.formulario-section__menu-item.is-active .formulario-section__menu-item-num {
  background: rgba(100, 160, 255, 0.2);
  border-color: rgba(100, 160, 255, 0.4);
  color: #fff;
}

.formulario-section__menu-item-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}

.formulario-section__menu-item-title {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: inherit;
  transition: color 0.2s ease;
}

.formulario-section__menu-item.is-active .formulario-section__menu-item-title {
  font-weight: 600;
  color: #fff;
}

.formulario-section__menu-item-sub {
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s ease;
}

.formulario-section__menu-item.is-active .formulario-section__menu-item-sub,
.formulario-section__menu-item:hover .formulario-section__menu-item-sub {
  color: rgba(255, 255, 255, 0.75);
}

.formulario-section__menu-item-countdown {
  flex: 1 1 100%;
  width: 100%;
  height: 4px;
  margin-top: 0.6rem;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
  display: none;
}

.formulario-section__menu-item.is-active[data-index="0"] .formulario-section__menu-item-countdown {
  display: block;
}

.formulario-section__menu-item-countdown-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 2px;
  transform-origin: left;
}

.formulario-section__menu-item-countdown-bar.is-running {
  animation: formulario-countdown 8s linear forwards;
}

@keyframes formulario-countdown {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

.formulario-section__menu-item-chevron {
  flex-shrink: 0;
  opacity: 0.45;
  transform: translateX(0);
  transition: opacity 0.2s ease, transform 0.25s ease;
}

.formulario-section__menu-item:hover .formulario-section__menu-item-chevron {
  opacity: 0.7;
  transform: translateX(2px);
}

.formulario-section__menu-item.is-active .formulario-section__menu-item-chevron {
  opacity: 1;
  transform: translateX(3px);
}

.formulario-section__menu-divider {
  margin: 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  position: relative;
  z-index: 1;
}

/* Progress bar below title (video duration) – only on active item */
.formulario-section__menu-item-progress {
  flex: 1 1 100%;
  order: 10;
  width: 100%;
  height: 4px;
  margin-top: 0.5rem;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
}
.formulario-section__menu-item:not(.is-active) .formulario-section__menu-item-progress {
  display: none;
}
.formulario-section__menu-item-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  will-change: width;
}

#formulario-section:not(.formulario-section--business) .formulario-section__menu-item-progress {
  background: rgba(0, 0, 0, 0.08);
}
#formulario-section:not(.formulario-section--business) .formulario-section__menu-item-progress-fill {
  background: rgba(0, 18, 105, 0.6);
}
#formulario-section:not(.formulario-section--business) .formulario-section__menu-item.is-active .formulario-section__menu-item-progress-fill {
  background: #012169;
}

.formulario-section__video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  min-height: 360px;
  border-radius: 24px;
  overflow: hidden;
}

@media (max-width: 899px) {
  .formulario-section__video-wrap {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
}

@media (min-width: 900px) {
  .formulario-section__video-wrap {
    flex: 1;
    min-height: 560px;
    aspect-ratio: auto;
  }
}

.formulario-section__video-inner {
  position: absolute;
  inset: 0;
}

.formulario-section__video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  opacity: 1;
  transition: opacity 0.35s ease-out;
}

.formulario-section__video-el.is-fading {
  opacity: 0;
}

.formulario-section__form {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.formulario-section__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Form blocks: accordion for velatorio / ceremonia */
.formulario-section__form-block {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  overflow: visible;
  background: rgba(7, 63, 147, 0.18);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15);
}
.formulario-section__form-block:has(.formulario-section__form-block-content:not([hidden])) {
  z-index: 2;
}

.formulario-section__form-block-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.7rem 1rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #fff;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s, border-color 0.2s;
}

.formulario-section__form-block-trigger:hover {
  background: rgba(255, 255, 255, 0.06);
}

.formulario-section__form-block-trigger[aria-expanded="true"] .formulario-section__form-block-chevron {
  transform: rotate(180deg);
}

.formulario-section__form-block-title {
  flex: 1;
}

.formulario-section__form-block-chevron {
  flex-shrink: 0;
  margin-left: 0.5rem;
  transition: transform 0.25s ease;
  stroke: currentColor;
}

.formulario-section__form-block-content {
  padding: 1rem 1rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(7, 63, 147, 0.08);
}

.formulario-section__form-block-content[hidden] {
  display: none !important;
}

/* Bloqueado / solo para empresas: fila tipo desplegable con candado */
.formulario-section__blocked-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 1rem;
  padding: 0.7rem 1rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  cursor: not-allowed;
  pointer-events: none;
}

.formulario-section__blocked-trigger-title {
  flex: 1;
}

.formulario-section__blocked-trigger-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
}

.formulario-section__blocked-trigger-icon {
  flex-shrink: 0;
  opacity: 0.85;
}

.formulario-section__field--foto {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

/* Nacimiento y fallecimiento: unificado en una fila */
.formulario-section__field--fechas .formulario-section__label-row {
  margin-bottom: 0.15rem;
}

.formulario-section__fechas-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 380px) {
  .formulario-section__fechas-row {
    grid-template-columns: 1fr;
  }
}

.formulario-section__fecha-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.formulario-section__fecha-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

/* Velatorio: lugar + día + hora en una fila; opción "Otro (escribir)" */
.formulario-section__field--velatorio .formulario-section__label-row--velatorio {
  margin-bottom: 0.5rem;
}

.formulario-section__field--velatorio .formulario-section__label-row--velatorio .formulario-section__label {
  margin: 0;
}

.formulario-section__velatorio-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 0.75rem;
  align-items: end;
}

.formulario-section__velatorio-lugar-wrap,
.formulario-section__velatorio-sala-wrap {
  grid-column: 1 / -1;
}

.formulario-section__velatorio-sala-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.formulario-section__sala-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.formulario-section__sala-row .formulario-section__select-wrap {
  flex: 1;
  min-width: 0;
}

.formulario-section__sala-pencil {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  background: rgba(7, 63, 147, 0.18);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.formulario-section__sala-pencil:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.formulario-section__sala-pencil svg {
  display: block;
}

.formulario-section__sala-custom {
  margin-top: 0.25rem;
}

.formulario-section__sala-custom .formulario-section__input {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 520px) {
  .formulario-section__velatorio-row {
    grid-template-columns: 1fr;
  }
  .formulario-section__velatorio-lugar-wrap,
  .formulario-section__velatorio-sala-wrap {
    grid-column: 1;
  }
}

.formulario-section__velatorio-lugar-wrap,
.formulario-section__velatorio-fecha-wrap,
.formulario-section__velatorio-hora-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.formulario-section__velatorio-select {
  min-width: 0;
}
.formulario-section__velatorio-select .formulario-section__custom-select {
  min-width: 0;
}

.formulario-section__velatorio-inline-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.formulario-section__input--date,
.formulario-section__input--time {
  min-width: 0;
  width: 100%;
}

.formulario-section__input--time {
  max-width: 6rem;
}

@media (max-width: 520px) {
  .formulario-section__input--time {
    max-width: none;
  }
}

.formulario-section__velatorio-custom {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.formulario-section__velatorio-custom[hidden] {
  display: none;
}

.formulario-section__velatorio-custom-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.formulario-section__label-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.formulario-section__label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
}

.formulario-section__hint {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
  margin-left: 0.25rem;
}

.formulario-section__link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-primary, #073f93);
  text-decoration: underline;
  cursor: pointer;
}

.formulario-section__link-btn:hover {
  opacity: 0.9;
}

.formulario-section__required {
  color: #ff6b6b;
  font-weight: 600;
}

.formulario-section__field.has-value .formulario-section__required,
.formulario-section__fecha-wrap.has-value .formulario-section__required,
.formulario-section__velatorio-lugar-wrap.has-value .formulario-section__required,
.formulario-section__velatorio-fecha-wrap.has-value .formulario-section__required,
.formulario-section__velatorio-hora-wrap.has-value .formulario-section__required,
.formulario-section__velatorio-custom.has-value .formulario-section__required,
.formulario-section__field--religion.has-value .formulario-section__required {
  display: none;
}

.formulario-section__input,
.formulario-section__select {
  font-family: inherit;
  font-size: 0.9375rem;
  padding: 0.6rem 0.85rem;
  min-height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  background: rgba(7, 63, 147, 0.18);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15);
}

.formulario-section__input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* Styled file input (e.g. Imagen corporativa) */
.formulario-section__file-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.formulario-section__file-input {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}

.formulario-section__file-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.25rem;
  min-height: 2.75rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #fff;
  background: rgba(7, 63, 147, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.formulario-section__file-trigger:hover {
  background: rgba(7, 63, 147, 0.5);
  border-color: rgba(255, 255, 255, 0.5);
}

.formulario-section__file-name {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.formulario-section__select {
  appearance: none;
  padding-right: 2.5rem;
  cursor: pointer;
}

.formulario-section__select-wrap {
  position: relative;
  width: 100%;
}

.formulario-section__select-wrap .formulario-section__select {
  width: 100%;
}

/* Hide native select when using custom dropdown */
.formulario-section__select--native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Custom dropdown trigger (replaces native select visually) */
.formulario-section__custom-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2.75rem;
  font-family: inherit;
  font-size: 0.9375rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  background: rgba(7, 63, 147, 0.18);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  color: #fff;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.formulario-section__custom-select:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

.formulario-section__custom-select[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

/* Chevron pill wrapper: blue pill appears on hover (desktop) or when dropdown open */
.formulario-section__chevron-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 0.5rem;
  padding: 0.35rem 0.45rem;
  border-radius: 9999px;
  background: transparent;
  transition: background 0.25s ease;
}

@media (hover: hover) {
  .formulario-section__custom-select:hover .formulario-section__chevron-pill,
  .formulario-section__custom-select[aria-expanded="true"] .formulario-section__chevron-pill {
    background: rgba(7, 63, 147, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
}

.formulario-section__custom-select .formulario-section__select-icon {
  position: static;
  transform: none;
  margin-left: 0;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  display: block;
}

@media (hover: hover) {
  .formulario-section__custom-select:hover .formulario-section__select-icon {
    transform: scale(1.2);
  }
  .formulario-section__custom-select[aria-expanded="true"]:hover .formulario-section__select-icon {
    transform: rotate(180deg) scale(1.2);
  }
}

.formulario-section__custom-select[aria-expanded="true"] .formulario-section__select-icon {
  transform: rotate(180deg);
}

.formulario-section__custom-select-label {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  white-space: normal;
}
.formulario-section__custom-select .formulario-section__chevron-pill {
  flex-shrink: 0;
}

.formulario-section__custom-select--blocked {
  opacity: 0.75;
  cursor: not-allowed;
}

/* Texto conmemorativo: mensaje, fila, aleatorio, lápiz bloqueado */
.formulario-section__texto-conmemorativo-msg {
  margin: 0 0 0.4rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
}

.formulario-section__texto-conmemorativo-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.formulario-section__texto-conmemorativo-row .formulario-section__select-wrap {
  flex: 1;
  min-width: 0;
}

.formulario-section__texto-aleatorio {
  flex-shrink: 0;
  min-height: 2.75rem;
  padding: 0.6rem 1rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  background: rgba(7, 63, 147, 0.18);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.formulario-section__texto-aleatorio:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.formulario-section__texto-aleatorio:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.formulario-section__texto-pencil {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  background: rgba(7, 63, 147, 0.18);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.formulario-section__texto-pencil:hover:not(.formulario-section__texto-pencil--locked) {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1);
  color: #fff;
}

.formulario-section__texto-pencil--locked {
  opacity: 0.65;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
}

.formulario-section__texto-pencil--locked:hover {
  background: rgba(7, 63, 147, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.6);
}

.formulario-section__texto-pencil svg {
  display: block;
}

/* Custom dropdown list */
.formulario-section__custom-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  border-radius: 10px;
  background: rgba(7, 63, 147, 0.95);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  z-index: 10;
  max-height: 220px;
  overflow-y: auto;
}

.formulario-section__custom-dropdown[hidden] {
  display: none !important;
}

.formulario-section__custom-option {
  padding: 0.6rem 0.85rem;
  font-size: 0.9375rem;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.formulario-section__custom-option:last-child {
  border-bottom: none;
}

.formulario-section__custom-option:hover {
  background: rgba(255, 255, 255, 0.15);
}

.formulario-section__custom-option[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.2);
}

.formulario-section__custom-option--disabled {
  cursor: default;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.formulario-section__custom-option--disabled:hover {
  background: transparent;
}

.formulario-section__custom-option-label {
  flex: 1;
}

.formulario-section__custom-option-pencil {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  background: rgba(7, 63, 147, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.formulario-section__custom-option-pencil:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.formulario-section__custom-option-pencil svg {
  display: block;
  width: 12px;
  height: 12px;
}

.formulario-section__custom-option-unavail {
  font-size: 0.85em;
  opacity: 0.85;
}

.formulario-section__custom-option--sala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.formulario-section__custom-option-pencil--sala {
  flex-shrink: 0;
}

/* Sala edit modal (custom, no browser prompt) */
.formulario-section__sala-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.formulario-section__sala-modal[hidden] {
  display: none !important;
}

.formulario-section__sala-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.formulario-section__sala-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 22rem;
  padding: 1.5rem;
  background: var(--color-primary);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

.formulario-section__sala-modal-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
}

.formulario-section__sala-modal-input {
  width: 100%;
  box-sizing: border-box;
}

.formulario-section__sala-modal-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
  width: 100%;
}

.formulario-section__sala-modal-cancel,
.formulario-section__sala-modal-ok {
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  transition: background 0.2s, border-color 0.2s;
}

.formulario-section__sala-modal-cancel:hover,
.formulario-section__sala-modal-ok:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

.formulario-section__sala-modal-ok {
  background: rgba(255, 255, 255, 0.28);
  font-weight: 600;
}

.formulario-section__sala-modal-dialog--confirm {
  max-width: 28rem;
}

/* Danger (destructive) action variant */
.formulario-section__sala-modal-ok--danger {
  background: rgba(220, 38, 38, 0.55);
  border-color: rgba(220, 38, 38, 0.6);
}
.formulario-section__sala-modal-ok--danger:hover {
  background: rgba(220, 38, 38, 0.75);
  border-color: rgba(220, 38, 38, 0.8);
}

/* Tertiary text-style button (e.g. "Guardar y salir") */
.formulario-section__sala-modal-tertiary {
  display: block;
  width: 100%;
  margin-top: 0.625rem;
  padding: 0.45rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}
.formulario-section__sala-modal-tertiary:hover {
  color: #fff;
}

/* Centred actions row (success modal) */
.formulario-section__sala-modal-actions--center {
  justify-content: center;
}

/* Success icon circle */
.formulario-section__sala-modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin: 0 auto 1rem;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.formulario-section__sala-modal-icon--success {
  background: rgba(34, 197, 94, 0.35);
}

.formulario-section__sala-modal-body {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.95);
}

.formulario-section__select-icon {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.75rem;
}

/* SVG chevron (custom dropdown): inherit color for stroke */
.formulario-section__custom-select .formulario-section__select-icon {
  color: inherit;
}
.formulario-section__custom-select .formulario-section__select-icon path {
  stroke: currentColor;
}

.formulario-section__photo-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(7, 63, 147, 0.25);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.formulario-section__foto-label-wrap {
  flex: 1;
  min-width: 0;
}

.formulario-section__toggle-wrap {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.formulario-section__toggle {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.formulario-section__toggle-slider {
  width: 48px;
  height: 26px;
  background: rgba(7, 63, 147, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  position: relative;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.12);
}

.formulario-section__toggle-slider::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 2px;
  top: 2px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.formulario-section__toggle:checked + .formulario-section__toggle-slider {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

.formulario-section__toggle:checked + .formulario-section__toggle-slider::after {
  transform: translateX(22px);
}

.formulario-section__toggle-wrap--row {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.formulario-section__toggle-label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
}

.formulario-section__logo-hint {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.75);
  max-width: 100%;
}

.formulario-section__logo-format-msg {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.9);
}

.formulario-section__logo-format-msg strong {
  color: #fff;
}

.formulario-section__icon {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
}

.formulario-section__submit {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: rgba(7, 63, 147, 0.5);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 12px;
  padding: 0.85rem 1.5rem;
  margin-top: 0.5rem;
  cursor: pointer;
  transition: opacity 0.2s, box-shadow 0.2s;
  box-shadow:
    0 4px 20px rgba(7, 63, 147, 0.3),
    0 1px 4px rgba(0, 0, 0, 0.08);
}

.formulario-section__submit:hover {
  opacity: 0.92;
  box-shadow:
    0 6px 24px rgba(7, 63, 147, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.1);
}

.formulario-section__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.formulario-section__submit:disabled:hover {
  opacity: 0.5;
  box-shadow: none;
}

/* Configuración guardada (empresa): grad.png + glass como el formulario principal */
.formulario-section--business-config {
  margin-top: 0;
  min-height: 0;
  padding: 2rem 1.5rem 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  background-image: url("../img/grad.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.formulario-section--business-config .business-config-card {
  max-width: 560px;
  margin: 0 auto;
  position: relative;
  background: rgba(7, 63, 147, 0.22);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 24px;
  box-shadow:
    0 8px 32px rgba(7, 63, 147, 0.25),
    0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 2rem 1.75rem 2.25rem;
  overflow: visible;
}

.formulario-section--business-config .business-config-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.28) 0%, rgba(180, 210, 255, 0.08) 40%, transparent 100%);
  opacity: 0.95;
}

.formulario-section--business-config .business-config-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: calc(24px - 1px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.formulario-section--business-config .business-config-title {
  position: relative;
  z-index: 1;
  margin: 0 0 0.5rem;
  font-size: clamp(1.375rem, 3.2vw, 1.75rem);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.business-config-intro {
  position: relative;
  z-index: 1;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.formulario-section--business-config .formulario-section__config-guardada {
  margin-bottom: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Bloques acordeón: glass como en el formulario principal */
.formulario-section--business-config .formulario-section__form-block {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  overflow: visible;
  background: rgba(7, 63, 147, 0.18);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15);
}

.formulario-section--business-config .formulario-section__form-block-trigger {
  color: #fff;
  padding: 0.85rem 1.1rem;
  font-size: 0.9375rem;
  font-weight: 500;
}

.formulario-section--business-config .formulario-section__form-block-trigger:hover {
  background: rgba(255, 255, 255, 0.06);
}

.formulario-section--business-config .formulario-section__form-block-trigger[aria-expanded="true"] {
  border-bottom: none;
}

.formulario-section--business-config .formulario-section__form-block-chevron {
  color: currentColor;
  opacity: 0.95;
}

.formulario-section--business-config .formulario-section__form-block-content {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(7, 63, 147, 0.08);
  padding: 1.1rem 1.1rem 1.25rem;
}

.formulario-section--business-config .formulario-section__label,
.formulario-section--business-config .formulario-section__toggle-label {
  color: rgba(255, 255, 255, 0.95);
}

.formulario-section--business-config .formulario-section__hint,
.formulario-section--business-config .formulario-section__logo-hint {
  color: rgba(255, 255, 255, 0.8);
}

.formulario-section--business-config .formulario-section__input {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}

.formulario-section--business-config .formulario-section__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.formulario-section--business-config .formulario-section__file-trigger {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}

.formulario-section--business-config .formulario-section__file-trigger:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.5);
}

.formulario-section--business-config .formulario-section__file-name {
  color: rgba(255, 255, 255, 0.85);
}

.formulario-section--business-config .formulario-section__blocked-trigger {
  background: rgba(0, 0, 0, 0.12);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.85);
}

.formulario-section--business-config .formulario-section__blocked-trigger-badge {
  color: rgba(255, 255, 255, 0.8);
}

.formulario-section--business-config .formulario-section__toggle-slider {
  background: rgba(255, 255, 255, 0.25);
}

.formulario-section--business-config .formulario-section__toggle:checked + .formulario-section__toggle-slider {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

/* Botón Guardar configuración */
.formulario-section--business-config .business-config-save {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  display: block;
  padding: 0.85rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(7, 63, 147, 0.35);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.formulario-section--business-config .business-config-save:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(7, 63, 147, 0.4);
}

.formulario-section--business-config .business-config-save:active {
  transform: translateY(0);
}

/* Bloques del panel de empresa (FAQ, Logo, Teléfono, Estética) – debajo del formulario, cada uno con Guardar */
.empresa-panel-faq-logo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  width: 100%;
  padding: 2rem 1.5rem;
  background: var(--color-off-white);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.empresa-panel-faq-logo-row .empresa-panel-block {
  flex: 1 1 320px;
  min-width: 0;
  padding: 0;
  border-top: none;
}

.empresa-panel-faq-logo-row .empresa-panel-block__card {
  max-width: none;
  height: 100%;
}

.empresa-panel-block {
  width: 100%;
  padding: 2rem 1.5rem;
  background: var(--color-off-white);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.empresa-panel-block__card {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

/* Solicitar conexión API: form + success message */
.empresa-api-request-form .formulario-section__field {
  margin-bottom: 1rem;
}
.empresa-api-request-form .formulario-section__input--textarea {
  width: 100%;
  min-height: 100px;
  resize: vertical;
}
.empresa-api-request-success {
  padding: 1.5rem 0;
}
.empresa-api-request-success__text {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.5;
  color: #1a1a1a;
}

/* Empresa: candado / código de acceso — contenido borroso hasta código válido */
.empresa-main {
  position: relative;
  min-height: 60vh;
}

.empresa-main-content--locked {
  filter: blur(10px);
  pointer-events: none;
  user-select: none;
  transition: filter 0.35s ease;
}

.empresa-gate-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 1.5rem;
  padding-top: clamp(2rem, 8vh, 4rem);
  overflow-y: auto;
}

.empresa-gate-overlay[hidden] {
  display: none;
}

.empresa-gate-content {
  text-align: center;
  max-width: 360px;
  width: 100%;
  padding: 2rem;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.empresa-gate-icon {
  display: inline-block;
  color: var(--color-primary, #073f93);
  margin-bottom: 1rem;
}

.empresa-gate-title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1a1a;
}

.empresa-gate-text {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  color: #555;
}

.empresa-gate-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.empresa-gate-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.empresa-gate-input {
  flex: 1;
  text-align: center;
  font-size: 1.0625rem;
  padding-right: 2.75rem;
}

.empresa-gate-toggle-pw {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: #555;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, background 0.2s ease;
}

.empresa-gate-toggle-pw:hover {
  color: var(--color-primary, #073f93);
  background: rgba(7, 63, 147, 0.08);
}

.empresa-gate-eye-svg {
  display: block;
}

.empresa-gate-submit {
  cursor: pointer;
}

.empresa-gate-error {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  color: #c00;
}

/* FAQ section: grad.png background + glass card */
#empresa-panel-faq {
  background-color: var(--color-off-white);
}

#empresa-panel-correo-envio {
  background-color: var(--color-off-white);
}

#empresa-panel-faq .empresa-panel-block__card {
  max-width: none;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: rgba(7, 63, 147, 0.22);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 24px;
  box-shadow:
    0 8px 32px rgba(7, 63, 147, 0.25),
    0 2px 12px rgba(0, 0, 0, 0.08);
}

#empresa-panel-faq .empresa-panel-block__card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.28) 0%, rgba(180, 210, 255, 0.08) 40%, transparent 100%);
  opacity: 0.95;
}

#empresa-panel-faq .empresa-panel-block__card::after {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: calc(24px - 1px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

#empresa-panel-faq .empresa-panel-block__title,
#empresa-panel-faq .empresa-panel-block__intro,
#empresa-panel-faq .empresa-panel-block__hint,
#empresa-panel-faq .empresa-panel-block__toggle .formulario-section__label,
#empresa-panel-faq .empresa-panel-faq-item__num {
  position: relative;
  z-index: 1;
}

#empresa-panel-faq .empresa-panel-faq-list,
#empresa-panel-faq .empresa-panel-faq-item,
#empresa-panel-faq .empresa-panel-block__add,
#empresa-panel-faq .empresa-panel-block__guardar {
  position: relative;
  z-index: 1;
}

#empresa-panel-faq .empresa-panel-block__title {
  color: #1a1a1a;
}

#empresa-panel-faq .empresa-panel-block__intro {
  color: #444;
}

#empresa-panel-faq .empresa-panel-block__hint {
  color: #1a1a1a;
}

#empresa-panel-faq .empresa-panel-block__add {
  color: #1a1a1a;
  border-color: rgba(0, 0, 0, 0.35);
  border-style: solid;
}

#empresa-panel-faq .empresa-panel-block__add:hover {
  background: rgba(0, 0, 0, 0.06);
}

#empresa-panel-faq .empresa-panel-block__add--secondary {
  color: #1a1a1a;
  border-color: rgba(0, 0, 0, 0.25);
}

#empresa-panel-faq .empresa-panel-block__add--secondary:hover {
  background: rgba(0, 0, 0, 0.04);
}

.empresa-panel-block__card--estetica {
  max-width: 1000px;
}

.empresa-panel-block__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 600;
  color: #1a1a1a;
}

.empresa-panel-block__intro {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  color: #555;
  line-height: 1.5;
}

.empresa-panel-estetica-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
}

.empresa-panel-estetica-intro-outer {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  color: #555;
  line-height: 1.5;
  text-align: center;
}

.empresa-panel-block__hint {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  color: #666;
  line-height: 1.5;
}

/* Correo remitente: prefix input + @avisofuner.com suffix */
.correo-prefix-wrap {
  display: flex;
  align-items: stretch;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(7, 63, 147, 0.25);
  background: rgba(7, 63, 147, 0.08);
}

.correo-prefix-wrap:focus-within {
  border-color: rgba(7, 63, 147, 0.55);
  box-shadow: 0 0 0 3px rgba(7, 63, 147, 0.1);
}

.correo-prefix-input {
  flex: 1;
  min-width: 0;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-right: 0.5rem;
}

.correo-prefix-suffix {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin: 4px;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.correo-prefix-hint {
  margin-top: 0.6rem !important;
  margin-bottom: 1.25rem !important;
  color: #555 !important;
}

.empresa-panel-faq-default-list {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  color: #555;
  line-height: 1.6;
}

.empresa-panel-faq-default-list li {
  margin-bottom: 0.35rem;
}

.empresa-panel-faq-tel-hint {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.empresa-panel-block__toggle {
  margin-bottom: 1.25rem;
}

.empresa-panel-faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
  max-height: 50vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  background: #fff;
}

#empresa-panel-faq .empresa-panel-faq-list {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  max-height: 165px;
  transition: max-height 0.3s ease;
}

#empresa-panel-faq .empresa-panel-faq-list.empresa-panel-faq-list--expanded {
  max-height: 50vh;
}

.empresa-panel-faq-list-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-size: 0.9375rem;
  color: #1a1a1a;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.empresa-panel-faq-list-toggle:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.18);
}

.empresa-panel-faq-list-toggle__icon {
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

#empresa-panel-faq .empresa-panel-faq-list.empresa-panel-faq-list--expanded ~ .empresa-panel-faq-list-toggle .empresa-panel-faq-list-toggle__icon {
  transform: rotate(180deg);
}

#empresa-panel-faq .empresa-panel-faq-list::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%);
  opacity: 0.9;
}

#empresa-panel-faq .empresa-panel-faq-list::after {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: calc(16px - 1px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

#empresa-panel-faq .empresa-panel-faq-item {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.empresa-panel-faq-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem;
  background: var(--color-bg-light, #f4f4f2);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.empresa-panel-faq-item__drag {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 0.15rem;
  color: rgba(0, 0, 0, 0.35);
  cursor: grab;
  border-radius: 6px;
  -webkit-user-select: none;
  user-select: none;
}

.empresa-panel-faq-item__drag:hover {
  color: rgba(0, 0, 0, 0.55);
  background: rgba(0, 0, 0, 0.06);
}

.empresa-panel-faq-item__drag:active {
  cursor: grabbing;
}

.empresa-panel-faq-item--dragging {
  opacity: 0.6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.empresa-panel-faq-item__fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.empresa-panel-faq-item__right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.empresa-panel-faq-item__num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  min-width: 1.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.35);
  line-height: 1;
}

.empresa-panel-faq-item__pregunta,
.empresa-panel-faq-item__respuesta {
  width: 100%;
}

.empresa-panel-faq-item__respuesta {
  resize: vertical;
  min-height: 60px;
}

.empresa-panel-faq-item__right .empresa-panel-faq-item__remove {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 0.8125rem;
  color: #c00;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.35rem 0.5rem;
}

.empresa-panel-faq-item__remove:hover {
  text-decoration: underline;
}

/* Artículos panel (list + item + remove button) */
.empresa-panel-articulos-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.empresa-panel-articulos-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem;
  background: var(--color-bg-light, #f4f4f2);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.empresa-panel-articulos-item__num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  min-width: 1.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.35);
  line-height: 1;
}

.empresa-panel-articulos-item__image {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.empresa-panel-articulos-item__thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: block;
  position: relative;
}

.empresa-panel-articulos-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  vertical-align: middle;
}

.empresa-panel-articulos-item__img-btn {
  font-family: inherit;
  font-size: 0.75rem;
  color: var(--color-primary, #2c70b7);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.empresa-panel-articulos-item__img-btn:hover {
  text-decoration: underline;
}

.empresa-panel-articulos-item__img-remove {
  font-family: inherit;
  font-size: 0.75rem;
  color: #c00;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.empresa-panel-articulos-item__img-remove:hover {
  text-decoration: underline;
}

.empresa-panel-articulos-item__fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.empresa-panel-articulos-item__title,
.empresa-panel-articulos-item__url {
  width: 100%;
}

.empresa-panel-articulos-item__right {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
}

.empresa-panel-articulos-item__right .empresa-panel-articulos-item__remove {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 0.8125rem;
  color: #c00;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.35rem 0.5rem;
}

.empresa-panel-articulos-item__remove:hover {
  text-decoration: underline;
}

.empresa-panel-block__add {
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--color-primary);
  background: none;
  border: 1px dashed var(--color-primary);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  margin-bottom: 1.25rem;
  cursor: pointer;
}

.empresa-panel-block__add:hover {
  background: rgba(7, 63, 147, 0.06);
}

.empresa-panel-block__add--secondary {
  margin-left: 0.5rem;
  color: #555;
  border-color: rgba(0, 0, 0, 0.2);
}

.empresa-panel-block__add--secondary:hover {
  background: rgba(0, 0, 0, 0.04);
}

.empresa-panel-block__guardar {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 1.25rem auto 0;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(7, 63, 147, 0.3);
  transition: opacity 0.2s, transform 0.15s;
}

.empresa-panel-block__guardar:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.empresa-panel-estetica-logo {
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.empresa-panel-estetica-logo .empresa-panel-estetica-subtitle {
  margin: 0 0 0.35rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1a1a;
}

.empresa-panel-estetica-logo .empresa-panel-estetica-intro {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  color: #555;
  line-height: 1.5;
}

.empresa-panel-estetica-logo .formulario-section__field {
  margin-bottom: 0;
}

.empresa-panel-estetica-logo .formulario-section__logo-hint {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: #666;
  line-height: 1.45;
}

.empresa-panel-estetica-logo .formulario-section__label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: 0.9375rem;
}

.empresa-panel-estetica-logo .formulario-section__hint {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  color: #666;
}

.empresa-panel-estetica-logo .formulario-section__file-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0;
}

.empresa-panel-estetica-logo .empresa-panel-block__guardar {
  margin-top: 1.25rem;
  margin-left: 0;
}

.empresa-panel-estetica-inner .landing-personal-section,
.empresa-panel-estetica-inner .esquela-section,
.empresa-panel-estetica-inner .single-color-section {
  padding: 1rem 0;
  background: transparent;
  border: none;
}

.empresa-panel-estetica-inner .landing-personal-section__title,
.empresa-panel-estetica-inner .esquela-section__title {
  display: none;
}

.empresa-panel-estetica-subtitle {
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #333;
}

.empresa-panel-estetica-inner .esquela-section__intro {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
}

.empresa-panel-estetica-inner .single-color-section__title {
  display: none;
}

.empresa-panel-estetica-color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  width: 100%;
}

.empresa-panel-estetica-color-row .single-color-section {
  flex: 1 1 200px;
  min-width: 0;
}

.empresa-panel-estetica-color-row .empresa-panel-estetica-subtitle {
  text-align: center;
}

.empresa-panel-block .formulario-section__input,
.empresa-panel-block .formulario-section__label,
.empresa-panel-block .formulario-section__hint,
.empresa-panel-block .formulario-section__logo-hint {
  color: #1a1a1a;
}

.empresa-panel-block .formulario-section__input {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
}

.empresa-panel-block .formulario-section__file-trigger {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: var(--color-primary);
}

.empresa-panel-block .formulario-section__file-name {
  color: #555;
}

.empresa-panel-block .formulario-section__toggle-slider {
  background: rgba(0, 0, 0, 0.15);
}

.empresa-panel-block .formulario-section__toggle:checked + .formulario-section__toggle-slider {
  background: var(--color-primary);
}

.empresa-panel-block .formulario-section__custom-select-label,
.empresa-panel-block .formulario-section__custom-option {
  color: #1a1a1a;
}

.empresa-panel-block .formulario-section__custom-select {
  border-color: rgba(0, 0, 0, 0.15);
  background: #fff;
}

/* Personalización de Landing con imagen de marca: 3 cards (Sky, Plano color, Onda color) */
.landing-personal-section {
  width: 100%;
  padding: clamp(3rem, 10vw, 5rem) 1.5rem;
  background: var(--color-off-white);
  scroll-snap-align: start;
}

.landing-personal-section__title {
  max-width: 1200px;
  margin: 0 auto 2rem;
  width: 100%;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
}

.landing-personal-section__intro {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  color: #555;
  text-align: center;
}

.landing-personal-section__encabezado-radio {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.landing-personal-section__inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

.landing-personal-section__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.75rem;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.22),
    0 2px 10px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.landing-personal-section__card:has(.landing-personal-section__encabezado-radio:checked) {
  border-color: #073f93;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.22),
    0 0 0 2px #073f93;
}

.landing-personal-section__card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, transparent 45%, transparent 100%),
    radial-gradient(ellipse 120% 80% at 10% 5%, rgba(255, 255, 255, 0.28) 0%, transparent 50%);
  opacity: 0.95;
}

.landing-personal-section__card::after {
  content: "";
  position: absolute;
  inset: 2px;
  pointer-events: none;
  border-radius: calc(28px - 2px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.landing-personal-section__card-label {
  position: relative;
  z-index: 1;
  font-size: clamp(1.125rem, 1.5vw, 1.25rem);
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 1.25rem;
}

.landing-personal-section__color-input {
  position: relative;
  z-index: 1;
  width: 80px;
  height: 80px;
  padding: 4px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.landing-personal-section__color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.landing-personal-section__color-input::-webkit-color-swatch {
  border: none;
  border-radius: 12px;
}

.landing-personal-section__color-input::-moz-color-swatch {
  border: none;
  border-radius: 12px;
}

.landing-personal-section__file-hidden {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.landing-personal-section__card--sky-image .landing-personal-section__sky-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
  border-radius: 12px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  background: #fff;
}

.landing-personal-section__sky-image--clickable {
  cursor: pointer;
}

.landing-personal-section__sky-image--clickable:hover {
  border-color: var(--color-primary, #073f93);
  opacity: 0.95;
}

/* Live wave hero preview (Onda color) – same look as funeraria-wave hero */
.landing-personal-section__onda-preview {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 180px;
  height: 110px;
  border-radius: 12px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background-color: #5a9fd4;
  cursor: pointer;
}
.landing-personal-section__onda-preview-waves {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.landing-personal-section__onda-preview-svg {
  position: absolute;
  bottom: 0;
  left: -12%;
  width: 115%;
  height: 58%;
  min-height: 64px;
  display: block;
}

.landing-personal-section__onda-color-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
}

.landing-personal-section__color-picker-hidden {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.landing-personal-section__color-btn {
  font-family: inherit;
  font-size: 0.8125rem;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: #fff;
  color: #333;
  cursor: pointer;
}

.landing-personal-section__color-btn:hover {
  background: #f5f5f5;
  border-color: rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .landing-personal-section__inner {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .landing-personal-section__card {
    padding: 1.5rem 1.25rem;
  }

  .landing-personal-section__card-label {
    margin-bottom: 1rem;
  }
}

/* Esquela: 10 fondos (textura grad, color plano, fondos 3–10) */
.esquela-section {
  width: 100%;
  padding: clamp(3rem, 10vw, 5rem) 1.5rem;
  background: var(--color-off-white);
  scroll-snap-align: start;
}

.esquela-section__title {
  max-width: 1000px;
  margin: 0 auto 0.5rem;
  width: 100%;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
}

.esquela-section__intro {
  max-width: 1000px;
  margin: 0 auto 0.5rem;
  width: 100%;
  font-size: 0.9375rem;
  color: #555;
  text-align: center;
  line-height: 1.5;
}

.esquela-section__hint {
  font-size: 0.8125rem;
  color: #6b6b6b;
  margin: 0 auto 2rem;
  max-width: 1000px;
  width: 100%;
  text-align: center;
  font-style: italic;
  line-height: 1.4;
}

.esquela-section__grid {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.esquela-section__grid--two {
  grid-template-columns: repeat(2, 1fr);
}

.esquela-section__grid--center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.esquela-section__grid--center .esquela-section__card {
  width: calc((min(1000px, 100%) - 4rem) / 5);
  min-width: 120px;
  max-width: 188px;
}

.esquela-section__revert-row {
  margin-top: 1.25rem;
  margin-bottom: 0.25rem;
}

.esquela-section__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 0.75rem;
  border-radius: 16px;
  border: 2px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.esquela-section__card:hover {
  border-color: rgba(7, 63, 147, 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.esquela-section__card:has(.esquela-section__radio:checked) {
  border-color: var(--color-primary);
  box-shadow: 0 4px 16px rgba(7, 63, 147, 0.2);
}

.esquela-section__radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.esquela-section__card-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #e8e6e2;
  margin-bottom: 0.5rem;
}

.esquela-section__card-thumb--plano {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

.esquela-section__card-thumb--plano .esquela-section__color-plano {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.esquela-section__card-thumb--plano .esquela-section__color-plano::-webkit-color-swatch-wrapper {
  padding: 0;
}

.esquela-section__card-thumb--plano .esquela-section__color-plano::-webkit-color-swatch {
  border: none;
  border-radius: 12px;
}

.esquela-section__card-thumb--plano .esquela-section__color-plano::-moz-color-swatch {
  border: none;
  border-radius: 12px;
}

.esquela-section__card-thumb--placeholder {
  background: linear-gradient(135deg, #e0ddd8 0%, #d0cdc8 100%);
  position: relative;
}

.esquela-section__card-thumb--placeholder::after {
  content: attr(data-esquela-placeholder);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.2);
}

.esquela-section__card-thumb--upload {
  background: linear-gradient(135deg, #e0ddd8 0%, #d0cdc8 100%);
}

.esquela-section__card-thumb--empty {
  background: linear-gradient(135deg, #e0ddd8 0%, #d0cdc8 100%);
}

.esquela-section__card-thumb--fondo {
  position: relative;
  background-size: cover;
  background-position: center;
}

.esquela-section__fondo-remove {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.esquela-section__fondo-remove:hover {
  background: rgba(0, 0, 0, 0.75);
}

.esquela-section__card--add-only {
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.esquela-section__card--add-only .esquela-section__file-hidden,
.esquela-section__card--fondo-10 .esquela-section__file-hidden,
#articulos-item-file {
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.esquela-section__upload-btn {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  margin-bottom: 0.5rem;
  font-family: inherit;
  font-size: 0.75rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: #fff;
  color: #333;
  cursor: pointer;
}

.esquela-section__upload-btn:hover {
  background: #f5f5f5;
}

.esquela-section__card-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
}

.esquela-section__plano-color-row {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}

.esquela-section__color-btn {
  font-family: inherit;
  font-size: 0.8125rem;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: #fff;
  color: #1a1a1a;
  cursor: pointer;
}

.esquela-section__color-btn:hover {
  background: #f5f5f5;
  border-color: rgba(0, 0, 0, 0.3);
}

@media (max-width: 900px) {
  .esquela-section__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .esquela-section__grid--two {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .esquela-section__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .esquela-section__grid--two {
    grid-template-columns: 1fr;
  }

  .esquela-section__card {
    padding: 0.5rem;
  }
}

/* Horarios / Preguntas frecuentes: una sección por título + un selector de color */
.single-color-section {
  width: 100%;
  padding: 2rem 1.5rem;
  background: var(--color-off-white);
  scroll-snap-align: start;
}

.single-color-section__title {
  max-width: 1000px;
  margin: 0 auto 1rem;
  width: 100%;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
}

.single-color-section__inner {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.single-color-section__label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #333;
}

.single-color-section__color-input {
  width: 180px;
  height: 180px;
  padding: 4px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.single-color-section__color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.single-color-section__color-input::-webkit-color-swatch {
  border: none;
  border-radius: 10px;
}

.single-color-section__color-input::-moz-color-swatch {
  border: none;
  border-radius: 10px;
}

/* Empresa panel: botón Previsualizar (todo el panel es como un formulario de selección) */
.empresa-panel-actions {
  width: 100%;
  padding: 2rem 1.5rem;
  background: var(--color-off-white);
  display: flex;
  justify-content: center;
}

.empresa-panel-actions__btn--preview {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.9rem 2rem;
  border: none;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(7, 63, 147, 0.35);
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
}

.empresa-panel-actions__btn--preview:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(7, 63, 147, 0.4);
}

/* Panel de previsualización (empresa): iframe funeraria + Guardar; oculto hasta Previsualizar */
.empresa-preview-section--hidden {
  display: none !important;
}

/* Full-screen overlay on .page-dash */
.page-dash .empresa-preview-section {
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow-y: auto;
  padding: 0;
  scroll-snap-align: none;
}

.page-dash .empresa-preview-section__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.5rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

/* Topbar: back | centred title | spacer (mirrors back width for true centering) */
.empresa-preview-section__topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0 1.75rem;
  flex-shrink: 0;
  width: 100%;
}

.empresa-preview-section__topbar .empresa-preview-section__title {
  flex: 1;
  text-align: center;
  margin: 0;
}

.empresa-preview-section__topbar-spacer {
  flex-shrink: 0;
  width: 90px; /* mirrors the back button width so title stays centred */
}

.empresa-preview-section__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  width: 90px;
  justify-content: center;
}

.empresa-preview-section__back:hover {
  background: rgba(255, 255, 255, 0.2);
}

.empresa-preview-section {
  width: 100%;
  padding: clamp(3rem, 8vw, 5rem) 1.5rem;
  background: var(--color-primary);
  scroll-snap-align: start;
}

.empresa-preview-section__inner {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

.empresa-preview-section__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 600;
  color: #fff;
  text-align: center;
}

.empresa-preview-section__intro {
  margin: 0 auto 2rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  line-height: 1.55;
  max-width: 560px;
}

.empresa-preview-section__container {
  margin: 0 auto 2rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.empresa-preview-section__actions {
  display: flex;
  justify-content: center;
  padding-bottom: 2.5rem;
}

.empresa-preview-section__publish {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2.75rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #fff;
  color: #073f93;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.empresa-preview-section__publish:hover {
  background: #f0f5ff;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

.empresa-preview-section__publish:active {
  transform: translateY(0);
}

.empresa-preview-section__publish:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 3px;
}

.empresa-preview-section__guardar {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.9rem 2.5rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.empresa-preview-section__guardar:hover {
  background: #fff;
  color: var(--color-primary);
}

/* Empresa section: ¿SOIS EMPRESA? – sky, 3 discount tier cards (7 copy.png) */
.empresa-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 3rem 1.5rem;
  background: var(--color-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  overflow: hidden;
}

.empresa-section__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-primary);
}

.empresa-section__cloud {
  display: none; /* no clouds: solid primary blue bg */
}

.empresa-section__cloud--1 {
  width: 85%;
  max-width: 720px;
  height: 55%;
  max-height: 480px;
  top: 15%;
  left: 0;
  background-image: url("../img/cloud1.png");
  animation: empresa-cloud-1 35s linear infinite;
}

.empresa-section__cloud--2 {
  width: 75%;
  max-width: 640px;
  height: 50%;
  max-height: 420px;
  top: 55%;
  right: 0;
  left: auto;
  background-image: url("../img/cloud2.png");
  animation: empresa-cloud-2 42s linear infinite;
}

@keyframes empresa-cloud-1 {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(calc(100vw + 100%)); }
}

@keyframes empresa-cloud-2 {
  0% { transform: translateX(100%); }
  100% { transform: translateX(calc(-100vw - 100%)); }
}

.empresa-section__title {
  position: relative;
  z-index: 2;
  margin: 0 0 2.5rem;
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 600;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.empresa-section__cards {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 960px;
}

.empresa-section__card {
  flex: 1 1 260px;
  max-width: 300px;
  background: #0a2d6b;
  border-radius: 16px;
  padding: 2rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  border-left: 4px solid rgba(255, 255, 255, 0.2);
  border-right: 4px solid rgba(255, 255, 255, 0.2);
}

.empresa-section__percent {
  margin: 0 0 0.15rem;
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 600;
  color: #fff;
  line-height: 1;
}

.empresa-section__label {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.9);
  text-transform: lowercase;
}

.empresa-section__volume {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  color: #fff;
  font-weight: 500;
}

.empresa-section__monthly {
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
}

.empresa-section__btn {
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: #5ba3e8;
  border: none;
  border-radius: 10px;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  margin-top: auto;
  transition: opacity 0.2s;
}

.empresa-section__btn:hover {
  opacity: 0.9;
}

/* Reseñas block inside empresa section (below the three cards) */
.empresa-section__testimonials {
  width: 100%;
  max-width: 640px;
  margin: 2.5rem auto 0;
  position: relative;
  z-index: 2;
}

.empresa-section__testimonials .testimonials-section__title {
  color: #fff;
}

.empresa-section__testimonials .testimonials-section__subtitle {
  color: rgba(255, 255, 255, 0.9);
}

.empresa-section__testimonials .testimonials-section__dot {
  background: rgba(255, 255, 255, 0.4);
}

.empresa-section__testimonials .testimonials-section__dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

.empresa-section__testimonials .testimonials-section__dot--active {
  background: #fff;
  transform: scale(1.2);
}

/* Reseñas inside pricing (white bg): better contrast */
.pricing-section .empresa-section__testimonials .testimonials-section__title {
  color: #012169;
}

.pricing-section .empresa-section__testimonials .testimonials-section__subtitle {
  color: #1B3C55;
}

.pricing-section .empresa-section__testimonials .testimonials-section__dot {
  background: rgba(1, 33, 105, 0.35);
}

.pricing-section .empresa-section__testimonials .testimonials-section__dot:hover {
  background: rgba(1, 33, 105, 0.6);
}

.pricing-section .empresa-section__testimonials .testimonials-section__dot--active {
  background: #012169;
  transform: scale(1.2);
}

.pricing-section .empresa-section__testimonials .testimonials-section__nav-btn {
  background: rgba(1, 33, 105, 0.08);
  border-color: rgba(1, 33, 105, 0.35);
  color: #012169;
}

.pricing-section .empresa-section__testimonials .testimonials-section__nav-btn:hover {
  background: rgba(1, 33, 105, 0.15);
  border-color: rgba(1, 33, 105, 0.5);
  color: #012169;
}

/* Testimonials section: 5 stars, dynamic slider (when standalone or inside empresa) */
.testimonials-section {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 3rem 1.5rem;
  background: var(--color-cream);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.testimonials-section__title {
  margin: 0 0 0.25rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
  flex-shrink: 0;
}

.testimonials-section__subtitle {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  color: #444;
  line-height: 1.45;
  text-align: center;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  flex-shrink: 0;
}

.testimonials-section__slider-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.testimonials-section__nav-btn {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.testimonials-section__nav-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

.testimonials-section__nav-btn:active {
  transform: scale(0.98);
}

.testimonials-section__nav-btn span {
  display: block;
  margin-top: -0.1em;
}

.empresa-section__testimonials .testimonials-section__nav-btn {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}

.empresa-section__testimonials .testimonials-section__nav-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

.testimonials-section__slider {
  flex: 1;
  min-width: 0;
  max-width: 640px;
  margin: 0;
}

.testimonials-section__list {
  position: relative;
  width: 100%;
}

.testimonials-section__card {
  margin: 0;
  padding: 2rem 1.75rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: none;
  flex-direction: column;
  gap: 1rem;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.testimonials-section__card--active {
  display: flex;
  position: relative;
  opacity: 1;
}

.testimonials-section__stars {
  font-size: 1.25rem;
  letter-spacing: 0.15em;
  color: #e6b800;
  line-height: 1;
}

.testimonials-section__quote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #2d2d2d;
  font-style: italic;
}

.testimonials-section__author {
  margin: 0;
  font-size: 0.875rem;
  color: #666;
}

.testimonials-section__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  flex-shrink: 0;
}

.testimonials-section__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.testimonials-section__dot:hover {
  background: rgba(0, 0, 0, 0.45);
}

.testimonials-section__dot--active {
  background: var(--color-primary);
  transform: scale(1.2);
}

/* Desktop: nav-row doesn't create a box so prev/slider/next are in one row */
.testimonials-section__nav-row {
  display: contents;
}

.testimonials-section__nav-btn--prev {
  order: 1;
}

.testimonials-section__slider {
  order: 2;
}

.testimonials-section__nav-btn--next {
  order: 3;
}

@media (max-width: 767px) {
  .testimonials-section__nav-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    order: 2;
  }

  .testimonials-section__slider-wrap {
    flex-direction: column;
    gap: 1rem;
    max-width: 100%;
  }

  .testimonials-section__slider {
    max-width: 100%;
    width: 100%;
    order: 1;
    flex: 0 0 auto;
  }

  .testimonials-section__list {
    width: 100%;
  }

  .testimonials-section__card {
    width: 100%;
    box-sizing: border-box;
  }
}

.ceremony-section__block {
  margin-bottom: var(--ceremony-gap-larger);
  text-align: center;
  width: 100%;
}

.ceremony-section__block:last-of-type {
  margin-bottom: var(--ceremony-gap-large);
}

.ceremony-section__block-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--ceremony-gap-small);
  text-align: center;
}

.ceremony-section__block-subtitle {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 var(--ceremony-gap-small);
  text-align: center;
}

.ceremony-section__block-subtitle[hidden] {
  display: none;
}

.ceremony-section__block-line {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 var(--ceremony-gap-slight);
  line-height: 1.5;
  text-align: center;
}

.ceremony-section__block-address {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 var(--ceremony-gap-small);
  line-height: 1.55;
  white-space: pre-wrap;
  text-align: center;
}

.ceremony-section__map-link {
  font-size: 0.9375rem;
  color: #a8d4ff;
  text-decoration: none;
  display: inline-block;
  margin-top: var(--ceremony-gap-slight);
}

.ceremony-section__map-link:hover {
  text-decoration: underline;
}

.ceremony-section__map-link[hidden] {
  display: none;
}

.ceremony-section__closing {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  font-style: italic;
  margin: var(--ceremony-gap-larger) 0 0;
  text-align: center;
  line-height: 1.5;
}

.ceremony-section__closing[hidden] {
  display: none;
}

/* Announcement page error */
.announcement-error {
  max-width: 640px;
  margin: 2rem auto;
  padding: 2rem;
  background: #fff8f8;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  color: #b33;
}

.announcement-error[hidden] {
  display: none;
}

#announcement-content[hidden] {
  display: none;
}

/* Section spacing */
section {
  padding: 1rem;
}

@media (min-width: 640px) {
  .faq-section {
    padding: 4rem 2rem;
  }
  .faq-section__intro {
    font-size: 1.0625rem;
  }
  .faq-item__question {
    font-size: 1.0625rem;
  }
  .faq-item__answer {
    font-size: 1rem;
  }
}

/* Footer */
.site-footer {
  padding: 3rem 1.5rem 1.5rem;
  background: var(--color-primary);
  color: rgba(255, 255, 255, 0.92);
  border-top: 1px solid #fff;
}

.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5rem 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 1.5rem;
}

.site-footer__brand-block {
  flex-shrink: 0;
}

.site-footer__brand {
  display: block;
  line-height: 0;
  margin-bottom: 0.75rem;
}

.site-footer__logo {
  display: block;
  width: 96px;
  height: auto;
  object-fit: contain;
}

.site-footer__logo--white {
  filter: brightness(0) invert(1);
}

.site-footer__tagline {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  max-width: 220px;
  opacity: 0.9;
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem 0;
}

.site-footer__nav-title {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
}

.site-footer__nav-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2.5rem;
}

.site-footer__nav-cols .site-footer__links {
  min-width: 120px;
}

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__links li {
  margin-bottom: 0.5rem;
}

.site-footer__links a {
  color: inherit;
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.2s ease;
}

.site-footer__links a:hover {
  color: #fff;
}

.site-footer__bottom {
  text-align: center;
}

.site-footer__copy {
  margin: 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.8);
}

.site-footer__credit {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
  margin-left: 0.25em;
}

.site-footer__credit:hover {
  color: #fff;
}

@media (max-width: 640px) {
  .site-footer {
    padding: 2rem 1.25rem 1.25rem;
  }
  .site-footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    padding-bottom: 2rem;
  }
  .site-footer__tagline {
    max-width: none;
  }
}