:root {
  --iz-purple-950: #241039;
  --iz-purple-900: #32164f;
  --iz-purple-800: #513b5f;
  --iz-plum: #81256f;
  --iz-raspberry: #cd366b;
  --iz-pink: #eb1855;
  --iz-yellow: #fcc41a;
  --iz-yellow-dark: #d89f00;
  --iz-ivory: #faf9f7;
  --iz-lavender: #f3eef8;
  --iz-ink: #2e2140;
  --iz-muted: #706777;
  --iz-white: #ffffff;
  --iz-radius-sm: .75rem;
  --iz-radius-md: 1.25rem;
  --iz-radius-lg: 2rem;
  --iz-shadow: 0 1.25rem 3rem rgba(50, 22, 79, .14);
  --bs-primary: var(--iz-plum);
  --bs-warning: var(--iz-yellow);
  --bs-body-color: var(--iz-ink);
  --bs-body-bg: var(--iz-ivory);
  --bs-link-color: var(--iz-plum);
  --bs-link-hover-color: var(--iz-raspberry);
  --bs-font-sans-serif: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  overflow-x: hidden;
  background: var(--iz-ivory);
  color: var(--iz-ink);
  font-size: 1rem;
  line-height: 1.65;
}

img,
video {
  max-width: 100%;
}

.icon-svg {
  display: inline-block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

a,
button,
.gallery-card,
.innovation-card,
.media-card {
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

:focus-visible {
  outline: .2rem solid var(--iz-yellow);
  outline-offset: .2rem;
}

.skip-link {
  position: fixed;
  z-index: 1100;
  top: 1rem;
  left: 1rem;
  padding: .75rem 1rem;
  border-radius: .5rem;
  background: var(--iz-white);
  color: var(--iz-purple-950);
}

.site-navbar {
  padding-block: 1rem;
  background: rgba(36, 16, 57, .88);
  backdrop-filter: blur(14px);
  box-shadow: 0 .5rem 2rem rgba(15, 7, 25, .12);
}

.navbar-brand {
  font-size: 1.15rem;
}

.letter-spacing,
.eyebrow {
  letter-spacing: .1em;
}

.eyebrow {
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.navbar .nav-link {
  color: rgba(255, 255, 255, .86);
  font-weight: 600;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--iz-yellow);
}

.hero-section {
  position: relative;
  min-height: 46rem;
  background-image: linear-gradient(90deg, rgba(36, 16, 57, .98) 0%, rgba(50, 22, 79, .88) 37%, rgba(50, 22, 79, .08) 72%), url("assets/images/banner-izmiralda.webp");
  background-position: center, center;
  background-size: cover;
}

.hero-section::after {
  position: absolute;
  inset: auto 0 0;
  height: 12rem;
  content: "";
  background: linear-gradient(0deg, rgba(36, 16, 57, .4), transparent);
  pointer-events: none;
}

.hero-section .container {
  z-index: 1;
}

.min-vh-75 {
  min-height: 75vh;
}

.text-white-75 {
  color: rgba(255, 255, 255, .78);
}

.btn-raspberry {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--iz-raspberry);
  --bs-btn-border-color: var(--iz-raspberry);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ac2858;
  --bs-btn-hover-border-color: #ac2858;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #92234b;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 .65rem 1.5rem rgba(36, 16, 57, .16);
}

.action-strip {
  position: relative;
  z-index: 3;
  min-height: 4.5rem;
}

.action-item {
  display: flex;
  min-height: 7.5rem;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
}

a.action-item:hover {
  color: var(--iz-purple-950);
  filter: brightness(1.04);
}

.action-item-purple { background: linear-gradient(135deg, var(--iz-purple-800), var(--iz-plum)); }
.action-item-pink { background: linear-gradient(135deg, var(--iz-raspberry), var(--iz-pink)); }
.action-item-yellow { background: linear-gradient(135deg, var(--iz-yellow), #ffb700); }

.action-icon {
  width: 2.4rem;
  height: 2.4rem;
}

.anchor-target {
  scroll-margin-top: 7rem;
}

.section-space {
  padding-block: clamp(4rem, 8vw, 7rem);
}

.section-heading {
  max-width: 52rem;
  color: var(--iz-purple-900);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.12;
}

.title-rule {
  display: inline-block;
  width: 3.5rem;
  height: .2rem;
  margin-top: 1.25rem;
  border-radius: 999px;
  background: var(--iz-yellow);
}

.text-plum { color: var(--iz-plum) !important; }
.text-raspberry { color: var(--iz-raspberry) !important; }
.link-raspberry { color: var(--iz-raspberry); }
.link-plum { color: var(--iz-plum); }

.story-section {
  position: relative;
  background: var(--iz-lavender);
}

.story-section::before {
  position: absolute;
  top: -2.5rem;
  right: 0;
  left: 0;
  height: 5rem;
  content: "";
  border-radius: 50% 50% 0 0;
  background: var(--iz-lavender);
}

.media-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--iz-radius-sm);
  background: #fff;
  box-shadow: var(--iz-shadow);
}

.media-card:hover {
  transform: translateY(-.4rem);
  box-shadow: 0 1.8rem 4rem rgba(50, 22, 79, .2);
}

.media-card-label {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--iz-purple-900);
  font-size: .8rem;
  font-weight: 800;
}

.innovation-card {
  overflow: hidden;
  border: 1px solid rgba(81, 59, 95, .1);
  border-radius: var(--iz-radius-md);
  background: var(--iz-white);
  box-shadow: 0 .7rem 2rem rgba(50, 22, 79, .08);
}

.innovation-card:hover {
  transform: translateY(-.25rem);
  box-shadow: var(--iz-shadow);
}

.innovation-image {
  width: 100%;
  height: 100%;
  min-height: 24rem;
  object-fit: cover;
}

.price-badge {
  align-self: flex-start;
  padding: .5rem .8rem;
  border-radius: 999px;
  background: rgba(205, 54, 107, .1);
  color: var(--iz-raspberry);
  font-weight: 800;
  white-space: nowrap;
}

.fact-box {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  padding: 1rem;
  border-left: .25rem solid var(--iz-raspberry);
  border-radius: .35rem;
  background: var(--iz-lavender);
}

.fact-box strong {
  color: var(--iz-plum);
  font-size: 1.6rem;
}

.fact-box span {
  color: var(--iz-muted);
  font-size: .9rem;
}

.benefit-list li {
  position: relative;
  padding: .55rem 0 .55rem 1.75rem;
  border-bottom: 1px solid rgba(81, 59, 95, .12);
}

.benefit-list li::before {
  position: absolute;
  left: 0;
  content: "✓";
  color: var(--iz-raspberry);
  font-weight: 900;
}

.impact-stat {
  display: flex;
  min-height: 9rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.impact-icon {
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: .75rem;
  opacity: .92;
}

.impact-stat strong {
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1;
}

.impact-stat span {
  margin-top: .65rem;
  font-weight: 600;
}

.impact-purple { background: var(--iz-purple-900); }
.impact-plum { background: var(--iz-plum); }
.impact-pink { background: var(--iz-pink); }

.gallery-card {
  position: relative;
  display: block;
  width: 100%;
  height: 17rem;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--iz-radius-sm);
  background: var(--iz-purple-900);
  box-shadow: 0 .5rem 1.4rem rgba(50, 22, 79, .1);
  cursor: zoom-in;
}

.gallery-card::after {
  position: absolute;
  inset: 0;
  content: "Ver imagen";
  display: grid;
  place-items: center;
  background: rgba(50, 22, 79, .7);
  color: #fff;
  font-weight: 800;
  opacity: 0;
  transition: opacity .25s ease;
}

.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.gallery-card:hover,
.gallery-card:focus-visible {
  transform: translateY(-.25rem);
  box-shadow: var(--iz-shadow);
}

.gallery-card:hover::after,
.gallery-card:focus-visible::after {
  opacity: 1;
}

.gallery-card:hover img {
  transform: scale(1.05);
}

.modal-gallery-image {
  max-height: 76vh;
  object-fit: contain;
}

.video-frame {
  position: relative;
  max-width: 68rem;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--iz-radius-sm);
  background: #160d20;
}

.video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-play-cover {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  align-items: center;
  gap: 2rem;
  padding: clamp(2rem, 6vw, 5.5rem);
  border: 0;
  background: linear-gradient(90deg, rgba(36, 16, 57, .97) 0%, rgba(50, 22, 79, .84) 38%, rgba(50, 22, 79, .38) 64%, rgba(36, 16, 57, .08) 100%);
  color: var(--iz-purple-900);
  cursor: pointer;
}

.video-play-cover[hidden] {
  display: none;
}

.video-play-button {
  display: grid;
  width: clamp(4.5rem, 8vw, 6.5rem);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1rem 2.5rem rgba(36, 16, 57, .32);
  transition: transform .25s ease, background-color .25s ease;
}

.video-cover-copy {
  display: flex;
  max-width: 34rem;
  flex-direction: column;
  align-items: flex-start;
  color: var(--iz-white);
}

.video-cover-eyebrow {
  margin-bottom: .75rem;
  color: var(--iz-yellow);
  font-size: clamp(.68rem, 1.2vw, .85rem);
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.video-cover-title {
  font-size: clamp(1.8rem, 4.2vw, 4rem);
  line-height: 1.05;
}

.video-cover-description {
  max-width: 29rem;
  margin-top: 1rem;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(.9rem, 1.5vw, 1.08rem);
  line-height: 1.55;
}

.video-play-button svg {
  width: 44%;
  margin-left: .3rem;
  fill: currentColor;
}

.video-play-cover:hover .video-play-button,
.video-play-cover:focus-visible .video-play-button {
  transform: scale(1.08);
  background: var(--iz-yellow);
}

.donation-section {
  position: relative;
  overflow: hidden;
  border-radius: var(--iz-radius-lg) var(--iz-radius-lg) 0 0;
  background: radial-gradient(circle at 10% 15%, rgba(205, 54, 107, .34), transparent 34%), linear-gradient(135deg, var(--iz-purple-950), var(--iz-purple-800));
}

.donation-heading {
  max-width: 56rem;
}

.py-lg-6 {
  padding-block: 6rem !important;
}

.goal-panel {
  display: inline-flex;
  min-width: min(100%, 20rem);
  flex-direction: column;
  padding: 1.5rem 2rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--iz-radius-md);
  background: linear-gradient(135deg, var(--iz-pink), var(--iz-plum));
  box-shadow: 0 1rem 2.5rem rgba(20, 8, 34, .28);
}

.goal-panel strong {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.1;
}

.donation-card {
  border-radius: var(--iz-radius-md);
}

.btn-outline-plum {
  --bs-btn-color: var(--iz-plum);
  --bs-btn-border-color: rgba(81, 59, 95, .45);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--iz-plum);
  --bs-btn-hover-border-color: var(--iz-plum);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--iz-purple-900);
  --bs-btn-active-border-color: var(--iz-purple-900);
  font-size: .86rem;
  font-weight: 700;
}

.btn-check:checked + .btn-outline-plum {
  border-color: var(--iz-plum);
  background: var(--iz-plum);
  color: #fff;
  box-shadow: 0 0 0 .2rem rgba(129, 37, 111, .16);
}

.donation-assurances .col {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-weight: 700;
}

.assurance-icon {
  width: 2rem;
  height: 2rem;
}

.transfer-card {
  overflow: hidden;
  border-radius: var(--iz-radius-md);
  color: var(--iz-ink);
}

.transfer-title-icon {
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: .75rem;
  color: var(--iz-raspberry);
}

.transfer-card .accordion-button {
  color: var(--iz-purple-900);
  font-weight: 750;
}

.transfer-card .accordion-button:not(.collapsed) {
  background: var(--iz-lavender);
  color: var(--iz-plum);
  box-shadow: none;
}

.transfer-card .accordion-button:focus {
  border-color: transparent;
  box-shadow: 0 0 0 .2rem rgba(129, 37, 111, .16);
}

.bank-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem 1.5rem;
}

.bank-details div {
  min-width: 0;
  padding: .8rem 1rem;
  border-radius: .65rem;
  background: var(--iz-lavender);
}

.bank-details dt {
  color: var(--iz-muted);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bank-details dd {
  margin: .15rem 0 0;
  overflow-wrap: anywhere;
  color: var(--iz-purple-900);
  font-weight: 700;
}

.trust-card {
  position: relative;
  padding: 2rem;
  border-left: 1px solid rgba(81, 59, 95, .15);
}

.trust-number {
  display: block;
  margin-bottom: 1rem;
  color: var(--iz-raspberry);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
}

.site-footer {
  background: var(--iz-purple-950);
}

.site-footer a {
  color: rgba(255, 255, 255, .86);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--iz-yellow);
}

.footer-partner-logo {
  width: clamp(10rem, 1vw, 15rem);
  height: 4.5rem;
  object-fit: cover;
  object-position: center 54%;
}

@media (max-width: 991.98px) {
  .site-navbar {
    background: rgba(36, 16, 57, .97);
  }

  .navbar-collapse {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    background: var(--iz-purple-900);
  }

  .hero-section {
    min-height: 44rem;
    background-image: linear-gradient(90deg, rgba(36, 16, 57, .96), rgba(50, 22, 79, .56)), url("assets/images/enas-hero.png");
    background-position: center, 62% center;
  }

  .innovation-image {
    min-height: 20rem;
    max-height: 30rem;
  }

  .py-lg-6 {
    padding-block: 4rem !important;
  }
}

@media (max-width: 767.98px) {
  .hero-section {
    min-height: 42rem;
    text-align: center;
    background-position: center, 68% center;
  }

  .hero-section .display-3 {
    font-size: clamp(2.4rem, 11vw, 3.6rem);
  }

  .action-strip {
    min-height: auto;
  }

  .action-strip .translate-middle-y {
    transform: translateY(-2rem) !important;
  }

  .action-item {
    min-height: 5.25rem;
  }

  .story-section::before {
    top: -1.4rem;
    height: 2.8rem;
  }

  .impact-stat {
    min-height: 7.25rem;
  }

  .gallery-card {
    height: 12rem;
  }

  .donation-section {
    border-radius: 1.5rem 1.5rem 0 0;
  }

  .bank-details {
    grid-template-columns: 1fr;
  }

  .trust-card {
    border-top: 1px solid rgba(81, 59, 95, .15);
    border-left: 0;
  }

  .footer-partner-logo {
    width: 11rem;
  }
}

@media (max-width: 575.98px) {
  .section-space {
    padding-block: 3.5rem;
  }

  .hero-section {
    min-height: 46rem;
  }

  .video-play-cover {
    grid-template-columns: 1fr;
    place-content: center;
    justify-items: center;
    gap: 1.15rem;
    padding: 1.25rem;
    background: linear-gradient(90deg, rgba(36, 16, 57, .94), rgba(50, 22, 79, .52));
  }

  .video-cover-copy {
    align-items: center;
    text-align: center !important;
  }

  .video-cover-description {
    display: none;
  }

  .video-play-button {
    width: 3.75rem;
  }

  .gallery-card {
    height: 9.5rem;
  }

  .donation-card .card-body {
    padding: 1.35rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}
