/* Estilos específicos de la vista de Donativos; la maquetación vive en Tailwind. */
#donativos-page button:not(:disabled),
#donativos-page a[href],
#donativos-page summary { cursor: pointer; }

#donativos-sticky-cta { bottom: var(--donativos-sticky-bottom, 1rem); }

/* Reserva de lectura para que el CTA fijo no cubra las últimas preguntas. */
#donativos-faq { padding-bottom: 13rem; }
@media (max-width: 639px) { #donativos-faq { padding-bottom: 15rem; } }

#donativos-faq [data-faq-toggle-icon] { position: relative; }
#donativos-faq [data-faq-toggle-icon]::before,
#donativos-faq [data-faq-toggle-icon]::after { position: absolute; width: 18px; height: 2px; border-radius: 9999px; background: #52a9f2; content: ''; transition: transform 180ms ease-out; }
#donativos-faq [data-faq-toggle-icon]::after { transform: rotate(90deg); }
#donativos-faq details[open] [data-faq-toggle-icon]::after { transform: rotate(90deg) scaleX(0); }

@media (hover: hover) {
  #donativos-hero-cta,
  #donativos-more-info,
  [data-ways-track] a { transition: transform 180ms ease-out, box-shadow 180ms ease-out; }
  #donativos-hero-cta:hover,
  #donativos-more-info:hover,
  [data-ways-track] a:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(15, 118, 110, .22); }

  [data-causes-track] article,
  [data-ways-track] article,
  [data-info-panel] article { transition: transform 220ms ease-out, box-shadow 220ms ease-out, border-color 220ms ease-out; }
  [data-causes-track] article:hover,
  [data-ways-track] article:hover,
  [data-info-panel] article:hover { transform: translateY(-4px); box-shadow: 0 14px 26px rgba(15, 23, 42, .12); }

  /* El estado base replica Figma: sólo contenido. El recuadro se crea al
     pasar el cursor sin alterar el flujo ni desplazar el texto. */
  [data-impact-track] blockquote { position: relative; transition: transform 220ms ease-out; }
  [data-impact-track] blockquote > * { position: relative; z-index: 1; }
  [data-impact-track] blockquote::before { position: absolute; z-index: 0; inset: -12px; border: 1px solid transparent; border-radius: 24px; background: transparent; box-shadow: 0 14px 26px transparent; content: ''; opacity: 0; pointer-events: none; transition: opacity 220ms ease-out, background-color 220ms ease-out, border-color 220ms ease-out, box-shadow 220ms ease-out; }
  [data-impact-track] blockquote:hover { transform: translateY(-4px); }
  [data-impact-track] blockquote:hover::before { border-color: #b3ddff; background: #fff; box-shadow: 0 14px 26px rgba(15, 23, 42, .12); opacity: 1; }

}

.donativos-reveal { opacity: 0; transform: translateY(12px); transition: opacity 420ms ease-out, transform 420ms ease-out; }
.donativos-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .donativos-reveal { opacity: 1; transform: none; transition: none; } }

#demo .step-tab-panel { display: none; }
#demo .step-tab-panel.active { display: block; }
#demo .step-footer { display: flex; gap: 12px; margin-top: 40px; }
#demo .step-btn { display: inline-flex; flex: 1; min-height: 68px; align-items: center; justify-content: center; gap: 10px; padding: 20px 40px; border-radius: 24px; color: #fff; background: linear-gradient(90deg, #ec6f43, #ff8459); box-shadow: 0 15px 30px -5px rgba(236, 111, 67, .5); font-size: 20px; font-weight: 800; }
#demo .step-btn img { width: 22px; height: 22px; }
#demo .step-btn:disabled { cursor: not-allowed; opacity: .4; box-shadow: none; }
#demo .btnRegresar { color: #4a5565; background: #f2f7ff; box-shadow: none; }
#demo .badge { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 9999px; font-weight: 700; }
#demo .badge-azul { color: #fff; background: #1593f6; }
#demo .badge-silver { color: #7b8da3; background: #dceafa; }
#demo .input-datos-usuario, #demo .input-otro-monto { width: 100%; padding: 12px 14px; border: 1px solid #b3ddff; border-radius: 14px; color: #125a86; background: #fff; }
#demo .btn-met-pago-sqre, #demo .btn-met-pago-sqre-outline, #demo .btn-monto-unico-outline, #demo .btn-monto-mensual-outline, #demo .btn-monto-unico, #demo .btn-monto-mensual { padding: 10px 12px; border: 1px solid #d8e9fb; border-radius: 9999px; color: #125a86; background: #fff; font-weight: 700; }
#demo .btn-met-pago-sqre, #demo .btn-monto-unico, #demo .btn-monto-mensual { border-color: transparent; color: #fff; background: linear-gradient(105deg, #ec4d4d, #9747ff); }
#demo #btnUnico.btn-met-pago-sqre, #demo #btnMensual.btn-met-pago-sqre { border-color: #fff; color: #3797e7; background: #fff; }
#demo #btnUnico.btn-met-pago-sqre-outline, #demo #btnMensual.btn-met-pago-sqre-outline { border-color: transparent; color: #99a1af; background: transparent; box-shadow: none; }
#demo .btn-monto-unico-outline, #demo .btn-monto-mensual-outline { border: 1.5px solid #f2f7ff; color: #4a5565; box-shadow: 0 1px 1.5px rgba(0, 0, 0, .1); }
#demo .donation-amount { display: flex; min-height: 52px; align-items: center; justify-content: center; padding: 10px; border: 1.5px solid #f2f7ff; border-radius: 24px; color: #4a5565; background: #fff; box-shadow: 0 1px 1.5px rgba(0, 0, 0, .1); font-size: 20px; font-weight: 600; line-height: 32px; }
#demo .donation-amount.btn-monto-unico,
#demo .donation-amount.btn-monto-mensual { border-color: transparent; color: #fff; background: linear-gradient(169.38deg, #ec4d4d 0%, #9747ff 91.4%); box-shadow: 0 10px 10px rgba(21, 147, 246, .3); }
#demo .other-amount { display: flex; min-height: 52px; align-items: center; padding: 1.5px 17.5px; border: 1.475px solid #f2f7ff; border-radius: 24px; background: #fff; box-shadow: 0 1px 1.5px rgba(0, 0, 0, .1); }
#demo .other-amount__prefix { flex: none; color: #b3ddff; font-size: 24px; font-weight: 800; line-height: 32px; }
#demo .other-amount input { min-width: 0; flex: 1; padding: 0 0 0 8px; border: 0; border-radius: 0; outline: 0; color: #4a5565; background: transparent; box-shadow: none; font-size: 20px; font-weight: 600; line-height: 32px; }
#demo .other-amount input::placeholder { color: rgba(153, 161, 175, .5); opacity: 1; }
#demo .row { display: flex; flex-wrap: wrap; gap: 10px; }
#demo .col-6 { width: calc(50% - 5px); }
#demo .col-12 { width: 100%; }
#demo .d-none { display: none !important; }
#demo .wizard-title { color: #383838; font-size: 25px; font-weight: 700; line-height: 32px; }
#demo .wizard-copy { color: #364153; font-size: 18px; line-height: 28px; }
#demo .wizard-input { width: 100%; min-height: 71px; padding: 16px 20px; border: 1.475px solid #f2f7ff; border-radius: 24px; color: #383838; background: #fff; font-size: 16px; }
#demo .wizard-input:focus { border-color: #52a9f2; outline: 3px solid rgba(82, 169, 242, .2); }
#demo .wizard-email-field { position: relative; display: block; }
#demo .wizard-email-field .wizard-input { padding-left: 60px; }
#demo .wizard-email-field__icon { position: absolute; z-index: 1; top: 50%; left: 22px; transform: translateY(-50%); color: #52a9f2; font-size: 22px; font-weight: 800; pointer-events: none; }
#demo .wizard-consent { display: flex; align-items: flex-start; gap: 12px; color: #4a5565; font-size: 14px; line-height: 20px; cursor: pointer; }
#demo .wizard-consent input { position: absolute; opacity: 0; }
#demo .wizard-consent__indicator { display: inline-flex; width: 22px; height: 22px; flex: none; align-items: center; justify-content: center; margin-top: -1px; border: 1.5px solid #b3ddff; border-radius: 7px; background: #fff; }
#demo .wizard-consent input:checked + .wizard-consent__indicator { border-color: #1593f6; background: #1593f6; }
#demo .wizard-consent input:checked + .wizard-consent__indicator::after { width: 10px; height: 6px; border-bottom: 2px solid #fff; border-left: 2px solid #fff; content: ''; transform: rotate(-45deg) translate(1px, -1px); }
#demo .wizard-consent input:focus-visible + .wizard-consent__indicator { outline: 3px solid rgba(82, 169, 242, .35); outline-offset: 2px; }
#demo .wizard-method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#demo .wizard-method { display: flex; min-height: 196px; flex-direction: column; align-items: center; justify-content: center; padding: 22px 14px; border: 1.5px solid #f2f7ff; border-radius: 28px; color: #4a5565; background: #fff; box-shadow: 0 1px 1.5px rgba(0, 0, 0, .1); font-size: 20px; font-weight: 800; line-height: 28px; text-align: center; }
#demo .wizard-method.btn-met-pago { border-color: transparent; color: #fff; background: linear-gradient(169deg, #ec4d4d, #9747ff); box-shadow: 0 10px 10px rgba(21, 147, 246, .3); }
#demo .wizard-method small { display: block; margin-top: 4px; color: #99a1af; font-size: 14px; font-weight: 500; line-height: 20px; }
#demo .wizard-method.btn-met-pago small { color: rgba(255, 255, 255, .84); }
#demo .wizard-method__logos { display: flex; min-height: 42px; align-items: center; justify-content: center; gap: 5px; font-size: 20px; font-weight: 800; }
#demo .wizard-method__icon { display: flex; width: 64px; height: 64px; align-items: center; justify-content: center; margin-bottom: 18px; border-radius: 20px; background: #f2f7ff; font-size: 34px; line-height: 42px; }
#demo .wizard-method__icon img { width: 32px; height: 32px; object-fit: contain; }
#demo .wizard-method.btn-met-pago .wizard-method__icon { background: rgba(255, 255, 255, .9); }
#demo .wizard-message { margin-top: 24px; color: #364153; font-size: 16px; line-height: 24px; }
#demo .wizard-message--generosity, #demo .wizard-message.is-visible { padding: 20px; border-radius: 20px; color: #0fbca2; background: rgba(198, 250, 243, .26); font-weight: 500; }
#demo .wizard-choice { flex: 1; padding: 18px; border: 1.5px solid #f2f7ff; border-radius: 24px; color: #4a5565; background: #fff; font-size: 20px; font-weight: 700; }
#demo .wizard-choice.is-selected { border-color: transparent; color: #fff; background: linear-gradient(169deg, #ec4d4d, #9747ff); }
[data-causes-viewport], [data-impact-viewport], [data-ways-viewport] { overflow: hidden; }
[data-causes-track], [data-impact-track], [data-ways-track] { display: flex; gap: 24px; transition: transform 360ms ease; will-change: transform; }
[data-cause-dot][aria-current="true"], [data-impact-dot][aria-current="true"] { background: #ec4d4d; }
[data-ways-dot][aria-current="true"] { width: 11px; height: 11px; border-radius: 9999px; background: #ec4d4d; }
@media (min-width: 1024px) { [data-ways-viewport], [data-impact-viewport] { overflow: visible; } [data-ways-track] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  #demo #div_monto_unico, #demo #div_monto_mensual { column-gap: 21px; row-gap: 19px; }
  #demo #div_monto_unico .col-6, #demo #div_monto_mensual .col-6 { width: calc(50% - 10.5px); }
  #demo #div_monto_unico .btn-monto-unico-outline, #demo #div_monto_mensual .btn-monto-mensual-outline { box-sizing: border-box; height: 40px !important; min-height: 40px !important; padding: 4px 10px !important; font-size: 18px !important; line-height: 32px; }
  #demo .other-amount { min-height: 40px; padding: 1px 17.5px; }
  #demo .other-amount input { height: 38px !important; min-height: 38px !important; padding: 0 0 0 8px !important; font-size: 18px !important; }
}

/* Dark mode — the values are semantic tokens declared with the rest of the site theme. */
.dark #donativos-page {
  color: rgb(var(--eva-color-content-donation-body));
  background-color: rgb(var(--eva-color-surface-donation-page));
}

.dark #donar > .mx-auto > .min-w-0 > p {
  color: rgb(var(--eva-color-content-donation-body));
}

.dark #div_formulario {
  box-shadow: 38px 0 64px rgb(151 71 255 / .28), -48px 0 90px rgb(151 71 255 / .26), 0 54px 92px rgb(25 138 227 / .28);
}

.dark #frm_donativo {
  border-color: rgb(var(--eva-color-border-donation));
  background: linear-gradient(180deg, #0b1220 0%, #080d16 50%, #0b1220 100%);
}

.dark #demo .wizard-title { color: rgb(var(--eva-color-content-inverse)); }
.dark #demo #divContentStep2 label[for="correo"] > span:first-child { color: #fff; }
.dark #demo .wizard-copy,
.dark #demo .wizard-message,
.dark #demo .wizard-consent { color: rgb(var(--eva-color-content-donation-body)); }
.dark #demo .wizard-message--generosity,
.dark #demo .wizard-message.is-visible { color: #6bb8f5; background: rgb(32 51 97 / .55); }

.dark #demo .btn-met-pago-sqre,
.dark #demo .btn-met-pago-sqre-outline,
.dark #demo .btn-monto-unico-outline,
.dark #demo .btn-monto-mensual-outline,
.dark #demo .btn-monto-unico,
.dark #demo .btn-monto-mensual,
.dark #demo .donation-amount,
.dark #demo .other-amount,
.dark #demo .wizard-input,
.dark #demo .wizard-method,
.dark #demo .wizard-choice {
  border-color: rgb(var(--eva-color-border-donation));
  color: rgb(var(--eva-color-content-donation-muted));
  background-color: rgb(var(--eva-color-surface-donation-control-active));
}

.dark #demo #btnUnico.btn-met-pago-sqre,
.dark #demo #btnMensual.btn-met-pago-sqre {
  border-color: rgb(var(--eva-color-surface-donation-control-active));
  color: #6bb8f5;
  background-color: rgb(var(--eva-color-surface-donation-control-active));
}

.dark #demo #btnUnico.btn-met-pago-sqre-outline,
.dark #demo #btnMensual.btn-met-pago-sqre-outline { color: rgb(var(--eva-color-content-donation-muted)); background-color: transparent; }
.dark #demo .step-tab-panel > .mt-7,
.dark #demo .step-tab-panel > .mt-10 > div:last-child {
  border-color: rgb(var(--eva-color-border-donation) / .8);
  background-color: rgb(var(--eva-color-surface-donation-control));
}
.dark #demo #btnMonedaMXN,
.dark #demo #btnMonedaUSD {
  color: #c8d1e4;
  background-color: transparent;
}
.dark #demo #btnMonedaMXN[aria-current="true"],
.dark #demo #btnMonedaUSD[aria-current="true"] {
  color: #fff;
  background-color: #52a9f2;
  box-shadow: 0 8px 10px rgba(21, 147, 246, .28);
}
.dark #demo #btnMonedaMXN[aria-current="false"]:hover,
.dark #demo #btnMonedaUSD[aria-current="false"]:hover {
  color: #fff;
  background-color: rgb(82 169 242 / .18);
}

.dark #demo .donation-amount.btn-monto-unico,
.dark #demo .donation-amount.btn-monto-mensual,
.dark #demo .wizard-method.btn-met-pago,
.dark #demo .wizard-choice.is-selected {
  color: #efefef;
  background: linear-gradient(169.38deg, #ec4d4d 0%, #9747ff 91.4%);
}

.dark #demo .other-amount__prefix { color: #b3ddff; }
.dark #demo .other-amount input,
.dark #demo .wizard-input { color: rgb(var(--eva-color-content-donation-body)); }
.dark #demo .other-amount input::placeholder { color: rgb(var(--eva-color-content-donation-muted) / .5); }
.dark #demo .wizard-input:focus { border-color: #52a9f2; outline-color: rgb(82 169 242 / .2); }
.dark #demo .wizard-method small { color: rgb(var(--eva-color-content-donation-muted)); }
.dark #demo .wizard-method__icon { background-color: rgb(var(--eva-color-surface-donation-control)); }
.dark #demo .wizard-consent__indicator { border-color: rgb(var(--eva-color-border-donation)); background-color: rgb(var(--eva-color-surface-donation-control)); }

.dark #spnMonto { color: #efefef; }
.dark #frm_donativo > .mt-10 { background-color: #6474d9; }

.dark #donativos-mision,
.dark #donativos-impacto { color: rgb(var(--eva-color-content-donation-body)); }

#donativos-mision {
  max-width: none;
  border-radius: 30px 30px 0 0;
}

#donativos-formas {
  max-width: none;
  border-radius: 0;
}

#donativos-formas > div {
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
}

.dark #donativos-mision > span { color: #6bb8f5; background-color: #203361; }
.dark #donativos-mision h2 { color: rgb(var(--eva-color-content-donation-heading)); }
.dark #donativos-mision p { color: rgb(var(--eva-color-content-donation-body)); }
.dark #donativos-more-info { background-color: #0fbca2; }

.dark #donativos-informacion { background-color: rgb(var(--eva-color-surface-donation-mission)); }
.dark #donativos-informacion > div > div:first-child {
  border-color: rgb(var(--eva-color-border-donation) / .8);
  background-color: rgb(var(--eva-color-surface-donation-card) / .95);
  box-shadow: 0 -10px 40px rgb(0 0 0 / .3);
}
.dark #donativos-informacion [data-info-tab][aria-selected="false"] { color: rgb(var(--eva-color-content-donation-muted)); background-color: rgb(var(--eva-color-surface-donation-control)); }
.dark #donativos-informacion [data-info-panel] h2,
.dark #donativos-informacion [data-info-panel] h3 { color: rgb(var(--eva-color-content-donation-heading)); }
.dark #donativos-informacion [data-info-panel] p,
.dark #donativos-informacion [data-info-panel] h4,
.dark #donativos-informacion [data-info-panel] ul { color: rgb(var(--eva-color-content-donation-body)); }
.dark #donativos-informacion [data-info-panel] article:not([style]) {
  border-color: rgb(var(--eva-color-border-donation));
  background-color: rgb(var(--eva-color-surface-donation-card));
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .24), 0 4px 6px -4px rgb(0 0 0 / .24);
}
.dark #donativos-informacion [data-impact-info-prev],
.dark #donativos-informacion [data-impact-info-next] { border-color: rgb(var(--eva-color-border-donation)); background-color: rgb(var(--eva-color-surface-donation-control)); }

.dark #donativos-formas {
  color: rgb(var(--eva-color-content-donation-body));
  background-color: rgb(var(--eva-color-surface-donation-forms));
}
.dark #donativos-formas h2 { color: rgb(var(--eva-color-content-donation-heading)); }
.dark #donativos-formas > div > div:first-child > div:last-child { background-color: rgb(var(--eva-color-surface-donation-control)); }
.dark [data-ways-track] a,
.dark #donativos-formas [data-commitment-action] { background-color: #0d1017; }

.dark #donativos-impacto h2,
.dark #donativos-impacto p,
.dark #donativos-impacto footer { color: rgb(var(--eva-color-content-donation-body)); }
.dark #donativos-impacto h2 { color: rgb(var(--eva-color-content-donation-heading)); }

.dark #donativos-faq { background-color: rgb(var(--eva-color-surface-donation-faq)); }
.dark #donativos-faq h2 { color: rgb(var(--eva-color-content-donation-heading)); }
.dark #donativos-faq details { border-color: rgb(var(--eva-color-border-donation)); background-color: rgb(var(--eva-color-surface-donation-card)); }
.dark #donativos-faq summary { color: #efefef; }
.dark #donativos-faq details p { color: rgb(var(--eva-color-content-donation-body)); }
.dark #donativos-faq [data-faq-toggle-icon] { border-color: #52a9f2; background-color: #1c1e20; }
.dark #donativos-faq [data-faq-toggle-icon]::before,
.dark #donativos-faq [data-faq-toggle-icon]::after { background-color: #52a9f2; }

/* Estado de espera usado por el flujo AJAX de transferencia. */
#donativos-processing:not(.hidden) { display: flex; }
.donativos-processing-card { display: flex; width: min(100%, 360px); flex-direction: column; align-items: center; gap: 10px; padding: 30px 24px; border-radius: 28px; color: #fff; background: linear-gradient(#6474d9, #ae5dcf); box-shadow: 0 16px 36px rgba(86, 85, 210, .34); }
.donativos-processing-card strong { font-size: 20px; font-weight: 800; line-height: 28px; }
.donativos-processing-card > span:last-child { font-size: 14px; line-height: 20px; opacity: .92; }
.donativos-processing-spinner { width: 32px; height: 32px; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 9999px; animation: donativos-processing-spin 700ms linear infinite; }
@keyframes donativos-processing-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .donativos-processing-spinner { animation-duration: 1ms; } }

/* Equivalente local de la utilidad animate-pulse de Tailwind para el CSS ya compilado. */
#donativos-compromise-counts .animate-pulse { animation: donativos-tailwind-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes donativos-tailwind-pulse { 50% { opacity: .5; } }

#donativos-formas [data-commitment-action],
#donativos-formas [data-commitment-reset] {
  transition: transform 180ms ease-out, box-shadow 180ms ease-out, filter 180ms ease-out;
}
@media (hover: hover) {
  #donativos-formas [data-commitment-action]:hover,
  #donativos-formas [data-commitment-reset]:hover {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.03);
    box-shadow: 0 12px 22px rgba(15, 118, 110, .22);
  }
}
#donativos-formas [data-commitment-action]:focus-visible,
#donativos-formas [data-commitment-reset]:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { #donativos-compromise-counts .animate-pulse { animation: none; } }

/* Interacciones visuales del wizard; no alteran valores ni eventos de pago. */
#demo .wizard-method {
  cursor: pointer;
  transition: transform 200ms ease, filter 200ms ease, box-shadow 200ms ease;
}
#demo .wizard-method:hover { transform: translateY(-4px) scale(1.03); filter: brightness(1.05); }
#demo .wizard-method:focus-visible { outline: 2px solid #52a9f2; outline-offset: 3px; }