.donar {
  --dv-fondo:#f1efeb;
  --dv-tinta:#171717;
  --dv-papel:#fffefa;
  --dv-crema:#f5f2ed;
  --dv-linea:#e6e0d7;
  --dv-suave:#6b645e;
  --dv-rosa:#f7c0ba;
  --dv-rojo:#c82932;
  --dv-rojo-vivo:#e8464c;
  --dv-verde:#1f6b3a;
  --dv-ambar:#9a6700;
  --dv-sans:'Mona Sans',Arial,Helvetica,sans-serif;
  --dv-serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --dv-mono:ui-monospace,'SF Mono',Menlo,Consolas,'Courier New',monospace;
  background:var(--dv-fondo);
  color:var(--dv-tinta);
  font-family:var(--dv-sans)
}
html:has(body.donar) {
  background:var(--dv-fondo)
}
.donar .cabecera,
.donar .menu-panel {
  font-family:Arial,Helvetica,sans-serif
}
.donar main#contenido {
  padding-top:0;
  overflow-x:clip
}
.dv-ancho {
  width:min(1260px,calc(100% - 40px));
  margin-inline:auto
}

.cortina-ligera {
  transition:transform .55s cubic-bezier(.76,0,.24,1)
}
.cortina-ligera.saliendo {
  transition-duration:.8s
}
.cortina-ligera.sin-transicion {
  transition:none
}

.dv-etiqueta {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--dv-rosa);
  font-size:11px;
  font-weight:800;
  letter-spacing:.2em;
  line-height:1.4
}
.dv-etiqueta::before {
  content:'';
  flex:none;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--dv-rojo-vivo);
  box-shadow:0 0 0 4px #e8464c30
}
.dv-portada .dv-etiqueta {
  color:var(--dv-rojo)
}

.dv-portada {
  position:relative;
  isolation:isolate;
  color:var(--dv-tinta);
  background:
    radial-gradient(ellipse 52% 38% at 92% 8%,#ddd5c77d,transparent 72%),
    radial-gradient(ellipse 42% 38% at 4% 92%,#e4ded5b5,transparent 74%),
    linear-gradient(180deg,#f7f5f1 0%,#efede8 100%)
}
.dv-portada {
  padding:calc(116px + env(safe-area-inset-top)) 0 clamp(64px,9vw,120px)
}
.dv-escena {
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none
}
.dv-anillo {
  position:absolute;
  left:var(--dv-x,50%);
  top:var(--dv-y,72%);
  width:var(--dv-d,680px);
  aspect-ratio:1;
  border:1px solid #30282012;
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,-50%) scale(.3);
  animation:dv-onda 10s cubic-bezier(.22,.61,.36,1) infinite
}
.dv-anillo:nth-child(2) { animation-delay:-2.5s }
.dv-anillo:nth-child(3) { animation-delay:-5s }
.dv-anillo:nth-child(4) { animation-delay:-7.5s }
@keyframes dv-onda {
  0% {
    opacity:0;
    transform:translate(-50%,-50%) scale(.3)
  }
  14% {
    opacity:1
  }
  100% {
    opacity:0;
    transform:translate(-50%,-50%) scale(1.3)
  }
}
.dv-monograma {
  position:absolute;
  left:-.08em;
  bottom:-.3em;
  color:transparent;
  font-size:min(70vw,760px);
  font-weight:900;
  letter-spacing:-.13em;
  line-height:1;
  -webkit-text-stroke:1.5px #3028200b;
  user-select:none
}
.dv-portada-grid {
  display:grid;
  gap:44px
}
.dv-portada h1 {
  margin:22px 0 24px;
  font-size:clamp(64px,19vw,140px);
  font-weight:900;
  line-height:.86;
  letter-spacing:-.08em;
  word-spacing:.12em
}
.dv-portada h1 em {
  color:var(--dv-rojo)
}
.dv-intro {
  max-width:36ch;
  color:var(--dv-suave);
  font-size:clamp(17px,1.45vw,20px);
  line-height:1.5
}
.dv-versiculo {
  max-width:42ch;
  margin:30px 0 0;
  padding-left:18px;
  border-left:2px solid var(--dv-rojo-vivo)
}
.dv-versiculo p {
  font-family:var(--dv-serif);
  font-size:clamp(19px,1.7vw,23px);
  font-style:italic;
  line-height:1.3;
  color:#39332d
}
.dv-versiculo cite {
  display:block;
  margin-top:10px;
  color:var(--dv-rojo);
  font-size:11px;
  font-style:normal;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase
}
.dv-garantias {
  display:none;
  flex-wrap:wrap;
  gap:10px 22px;
  margin:44px 0 0;
  padding:0;
  list-style:none;
  color:var(--dv-suave);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em
}
.dv-garantias li {
  display:inline-flex;
  align-items:center;
  gap:8px
}
.dv-garantias li::before {
  content:'';
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--dv-rojo-vivo)
}

.dv-tarjeta {
  --dv-gris:#fffefa;
  --dv-campo:#f5f3ef;
  --dv-negro:#24211e;
  --dv-texto2:#756d65;
  position:relative;
  min-width:0;
  padding:clamp(22px,3vw,30px);
  border:1px solid #e8e2d9;
  border-radius:clamp(28px,3vw,34px);
  background:var(--dv-gris);
  color:var(--dv-negro);
  box-shadow:0 38px 74px -30px #28201780,0 12px 24px -10px #28201735,0 2px 6px #28201710
}
.dv-tarjeta::before {
  content:'';
  position:absolute;
  top:0;
  left:clamp(24px,3vw,34px);
  right:clamp(24px,3vw,34px);
  height:4px;
  border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--dv-rojo) 0 32%,#d8cfc2 32% 100%)
}
.dv-tarjeta-cabeza {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:24px;
  padding-bottom:18px;
  border-bottom:1px dashed #ded7cd
}
.dv-tarjeta-cabeza h2 {
  font-size:18px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.01em
}
.dv-seguro {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px 7px 10px;
  border-radius:999px;
  background:var(--dv-campo);
  color:var(--dv-verde);
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  box-shadow:0 4px 14px -8px #0003
}
.dv-seguro .icono-svg {
  width:13px;
  height:13px
}

.dv-resumen {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  gap:14px;
  margin-top:28px;
  padding:20px 22px 18px;
  border:1px dashed #d8cbbb;
  border-left:4px solid var(--dv-rojo);
  border-radius:16px;
  background:#f6f2eb;
  color:var(--dv-negro)
}
.dv-resumen-arriba,
.dv-resumen-abajo {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.dv-resumen-etiqueta {
  color:var(--dv-suave);
  font-size:12px;
  font-weight:500
}
.dv-resumen-marca {
  font-size:17px;
  font-weight:900;
  font-style:italic;
  letter-spacing:-.06em;
  color:var(--dv-rojo)
}
.dv-resumen-chip {
  width:38px;
  height:28px;
  border-radius:6px;
  background:
    linear-gradient(90deg,transparent 44%,#00000038 44% 56%,transparent 56%),
    linear-gradient(transparent 31%,#00000038 31% 37%,transparent 37% 63%,#00000038 63% 69%,transparent 69%),
    linear-gradient(135deg,#e6e6e6,#9b9b9b);
  box-shadow:inset 0 0 0 1px #00000026
}
.dv-resumen output {
  font-size:clamp(26px,6vw,32px);
  font-weight:600;
  letter-spacing:.04em;
  line-height:1
}
.dv-resumen strong {
  min-width:0;
  overflow:hidden;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap
}
.dv-resumen-circulos {
  display:flex;
  flex:none
}
.dv-resumen-circulos i {
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--dv-rojo-vivo)
}
.dv-resumen-circulos i + i {
  margin-left:-9px;
  background:#d8cbbb
}

.dv-pagar {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:56px;
  margin-top:22px;
  padding:0 24px;
  border:0;
  border-radius:999px;
  background:var(--dv-negro);
  color:#fff;
  font-size:15px;
  font-weight:600;
  box-shadow:0 16px 30px -18px #000d;
  transition:background .25s ease,transform .35s cubic-bezier(.16,1,.3,1)
}
.dv-pagar .icono-svg {
  display:none
}
.dv-pagar:hover {
  background:#000;
  transform:translateY(-2px)
}
.dv-pagar:active {
  transform:scale(.98)
}
.dv-pagar:disabled {
  cursor:progress;
  background:#3a3a3a;
  transform:none
}

.dv-confianza {
  display:flex;
  gap:9px;
  margin-top:20px;
  color:var(--dv-texto2);
  font-size:12px;
  line-height:1.5
}
.dv-confianza > .icono-svg {
  flex:none;
  width:15px;
  height:15px;
  margin-top:1px;
  color:var(--dv-verde)
}
.dv-confianza strong {
  color:var(--dv-negro);
  font-weight:600
}
@media(min-width:720px) {
  .dv-ancho {
    width:min(1260px,calc(100% - 64px))
  }
  .dv-tarjeta {
    width:min(100%,580px);
    margin-inline:auto
  }
}
@media(min-width:1020px) {
  .dv-portada {
    padding-top:calc(150px + env(safe-area-inset-top))
  }
  .dv-portada-grid {
    grid-template-columns:minmax(0,1fr) minmax(440px,540px);
    align-items:start;
    gap:clamp(48px,6vw,120px)
  }
  .dv-portada-copia {
    padding-top:24px
  }
  .dv-portada h1 {
    font-size:clamp(100px,9.6vw,150px)
  }
  .dv-garantias {
    display:flex
  }
  .dv-tarjeta {
    width:auto;
    margin:0
  }
  .dv-anillo {
    --dv-x:74%;
    --dv-y:48%;
    --dv-d:1000px
  }
}

@media(min-width:1020px) and (min-height:860px) {
  .dv-portada-copia {
    position:sticky;
    top:126px
  }
}

@media(prefers-reduced-motion:reduce) {
  .dv-anillo {
    opacity:.55
  }
  .dv-anillo:nth-child(1) { transform:translate(-50%,-50%) scale(.45) }
  .dv-anillo:nth-child(2) { transform:translate(-50%,-50%) scale(.7) }
  .dv-anillo:nth-child(3) { transform:translate(-50%,-50%) scale(.95) }
  .dv-anillo:nth-child(4) { transform:translate(-50%,-50%) scale(1.2) }
}

.dv-banco-plastico {
  margin-top:0
}
.dv-resumen .dv-banco-numero {
  font-size:clamp(15px,5.1vw,25px);
  letter-spacing:.03em;
  white-space:nowrap
}
.dv-banco-datos {
  margin:18px 0 0;
  padding:4px 16px;
  border-radius:14px;
  background:var(--dv-campo)
}
.dv-banco-datos > div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:52px;
  padding:8px 0;
  border-bottom:1px dashed #e4e0d9
}
.dv-banco-datos > div:last-child {
  border-bottom:0
}
.dv-banco-datos dt {
  flex:none;
  color:var(--dv-texto2);
  font-size:12.5px;
  font-weight:600
}
.dv-banco-datos dd {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  margin:0;
  font-size:15px;
  font-weight:600;
  text-align:right;
  overflow-wrap:anywhere
}
.dv-banco-mono {
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
  white-space:nowrap
}
@media(max-width:430px) {
  .dv-banco-datos {
    padding-inline:14px
  }
  .dv-banco-datos dd {
    gap:8px;
    font-size:14px
  }
  .dv-copiar {
    padding:0 10px
  }
  .dv-banco-fila-copiar {
    flex-wrap:wrap;
    row-gap:6px
  }
  .dv-banco-fila-copiar dd {
    width:100%;
    justify-content:space-between;
    font-size:16px
  }
}
.dv-copiar {
  flex:none;
  min-height:34px;
  padding:0 12px;
  border:1px solid #d9d4cc;
  border-radius:999px;
  background:#fff;
  color:var(--dv-negro);
  font-size:12px;
  font-weight:700;
  transition:background .2s ease,border-color .2s ease
}
.dv-copiar:hover {
  border-color:var(--dv-negro)
}
.dv-copiado {
  min-height:20px;
  margin-top:10px;
  color:var(--dv-verde);
  font-size:13px;
  font-weight:600;
  text-align:center;
  opacity:0;
  transition:opacity .25s ease
}
.dv-copiado.visible {
  opacity:1
}
.dv-banco-plastico .dv-resumen-abajo strong {
  overflow:visible;
  white-space:normal;
  line-height:1.35
}
.dv-banco-plastico {
  grid-template-columns:minmax(0,1fr)
}
@media(max-width:359px) {
  .dv-banco-datos .dv-copiar[data-copiar="clabe"] {
    display:none
  }
}

.dv-versiculo-final {
  max-width:46ch;
  margin:6px 0 0
}
@media(min-width:1020px) {
  .dv-portada-grid .dv-banco {
    grid-column:2;
    grid-row:1 / span 2
  }
  .dv-versiculo-final {
    grid-column:1;
    grid-row:2;
    align-self:end;
    margin:0 0 34px
  }
}

.dv-neu {
  --neu-fondo:#ecebe7;
  --neu-luz:#ffffff;
  --neu-sombra:#c9c5bd;
  --neu-texto:#24211e;
  --neu-suave:#8b857d;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:clamp(34px,5vw,46px) clamp(22px,4vw,38px) clamp(30px,4vw,38px);
  border:0;
  border-radius:clamp(32px,4vw,44px);
  background:var(--neu-fondo);
  color:var(--neu-texto);
  text-align:center;
  box-shadow:14px 14px 30px var(--neu-sombra),-14px -14px 30px var(--neu-luz)
}
.dv-neu::before {
  display:none
}
.dv-neu-logo {
  display:grid;
  place-items:center;
  width:92px;
  height:92px;
  border-radius:50%;
  background:var(--neu-fondo);
  box-shadow:7px 7px 14px var(--neu-sombra),-7px -7px 14px var(--neu-luz)
}
.dv-neu-logo img {
  width:54px;
  height:54px;
  object-fit:contain
}
.dv-neu-titulo {
  margin-top:22px;
  font-size:clamp(24px,3vw,28px);
  font-weight:800;
  letter-spacing:-.02em
}
.dv-neu-sub {
  margin-top:6px;
  color:var(--neu-suave);
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase
}
.dv-neu-campos {
  display:grid;
  gap:18px;
  width:100%;
  margin-top:34px
}
.dv-neu-campo {
  display:flex;
  align-items:center;
  gap:14px;
  min-height:64px;
  padding:10px 10px 10px 20px;
  border-radius:999px;
  background:var(--neu-fondo);
  box-shadow:inset 6px 6px 12px var(--neu-sombra),inset -6px -6px 12px var(--neu-luz);
  text-align:left
}
.dv-neu-icono {
  flex:none;
  width:20px;
  height:20px;
  fill:none;
  stroke:var(--neu-texto);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.dv-neu-texto {
  display:grid;
  flex:1;
  min-width:0
}
.dv-neu-etiqueta {
  color:var(--neu-suave);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase
}
.dv-neu-valor {
  margin-top:2px;
  font-size:15px;
  font-weight:600;
  line-height:1.3;
  overflow-wrap:anywhere
}
.dv-neu-mono {
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em
}
.dv-neu-copiar {
  display:grid;
  place-items:center;
  flex:none;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:var(--neu-fondo);
  color:var(--neu-texto);
  box-shadow:4px 4px 9px var(--neu-sombra),-4px -4px 9px var(--neu-luz);
  transition:box-shadow .2s ease,color .2s ease
}
.dv-neu-copiar svg {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}
.dv-neu-copiar:hover {
  color:var(--dv-rojo)
}
.dv-neu-copiar:active,
.dv-neu-copiar.copiado {
  color:var(--dv-rojo);
  box-shadow:inset 3px 3px 7px var(--neu-sombra),inset -3px -3px 7px var(--neu-luz)
}
.dv-neu-boton {
  width:100%;
  min-height:58px;
  margin-top:30px;
  border:0;
  border-radius:999px;
  background:var(--dv-rojo);
  color:#fff;
  font-size:17px;
  font-weight:700;
  box-shadow:6px 6px 14px var(--neu-sombra),-6px -6px 14px var(--neu-luz);
  transition:background .2s ease,transform .3s cubic-bezier(.16,1,.3,1)
}
.dv-neu-boton:hover {
  background:var(--rojo-oscuro)
}
.dv-neu-boton:active {
  transform:scale(.98)
}
.dv-neu .dv-copiado {
  margin-top:12px
}
.dv-neu-pie {
  margin-top:4px;
  color:var(--neu-suave);
  font-size:14px;
  font-weight:600
}
.dv-neu-pie strong {
  color:var(--neu-texto)
}
@media(max-width:380px) {
  .dv-neu-campo {
    gap:10px;
    padding-left:16px
  }
  .dv-neu-valor {
    font-size:14px
  }
}

@font-face {
  font-family:'Outfit';
  src:url('../fuentes/outfit.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap
}
@font-face {
  font-family:'Inter';
  src:url('../fuentes/inter.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap
}
.donar .dv-portada h1,
.donar .dv-portada h1 em,
.donar .dv-portada h1 .punto-final {
  font-family:'Outfit',Arial,Helvetica,sans-serif;
  font-style:normal;
  font-weight:600
}
.donar .dv-portada h1 {
  color:#1a1a1a;
  letter-spacing:-.04em;
  word-spacing:.02em;
  line-height:.95
}
.donar .dv-portada h1 em {
  color:var(--dv-rojo);
  letter-spacing:-.04em
}
.donar .dv-portada .dv-etiqueta {
  font-family:'Inter',Arial,Helvetica,sans-serif;
  font-weight:600;
  letter-spacing:.08em
}
.donar .dv-garantias {
  font-family:'Inter',Arial,Helvetica,sans-serif;
  font-weight:500;
  letter-spacing:.01em
}

.donar .dv-versiculo {
  padding-left:22px;
  border-left:3px solid #e63946
}
.donar .dv-versiculo p {
  font-family:'Inter',Arial,Helvetica,sans-serif;
  font-style:normal;
  font-weight:300;
  font-size:1.5rem;
  line-height:1.45;
  letter-spacing:-.015em;
  color:#222
}
.donar .dv-versiculo cite {
  margin-top:14px;
  font-family:'Inter',Arial,Helvetica,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--dv-rojo)
}
@media(max-width:400px) {
  .donar .dv-versiculo p {
    font-size:1.35rem
  }
}