/* ============================================================
   DONAR — página para donantes. Aire elevado y moderno.
   Mezcla elegida: hero premium (glass + degradado de marca +
   parallax) sobre un cuerpo minimal SIN marcos (aire y divisores
   finos, no cajas). Botones trabajados. Tema claro/oscuro.
   Guiado por el skill ui-ux-pro-max (Liquid Glass, premium).
   ============================================================ */

#app{
  --gold:#F2B705; --orange:#F97316; --red:#D62828; --wa:#25D366;
  --grad:linear-gradient(135deg,#F2B705 0%,#F97316 52%,#D62828 100%);
  /* Foto de fondo del hero. Deja tu imagen real en  img/hero-donar.jpg
     (o cambia la ruta aquí). Si no existe, el hero cae al degradado. */
  --hero-img:url("../img/hero-donar.jpg");
}

/* franja legible un poco más ancha aquí */
.view.on .pad{padding-top:10px}
.view.on .pad > *{max-width:900px}
/* Desktop: columna centrada y ancha; catálogo a 3 columnas. Scoped a /donar. */
@media(min-width:840px){
  .donar-page .view.on .pad{max-width:1040px;margin-left:auto;margin-right:auto}
  .donar-page .view.on .pad > *{max-width:none;margin-left:0;margin-right:0}
  .donar-page .dcat.open .dgrid{grid-template-columns:1fr 1fr 1fr;column-gap:30px}
  .donar-page .dgrid .ditem:nth-child(3){border-top:0}
}

/* ---------- menú superior (navegación entre páginas) ---------- */
/* control segmentado, igual al nav de la app principal */
.dnav{display:flex;flex:0 0 auto;margin:10px 14px 12px;padding:3px;
  border-radius:999px;background:var(--chip);border:1px solid var(--line)}
.dnav a{flex:1;text-align:center;padding:9px 4px;border-radius:999px;font:650 13.2px/1.2 inherit;
  letter-spacing:-.2px;color:var(--dim);text-decoration:none;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;transition:color .25s var(--ease),background .25s var(--ease)}
.dnav a.on{color:var(--txt);font-weight:750;background:var(--seg);box-shadow:0 1px 2px rgba(2,8,23,.18)}

/* ---------- segmentado de idioma (header) ---------- */
.langtog{display:inline-flex;gap:3px;padding:3px;border-radius:13px;background:var(--chip);flex:0 0 auto}
.langtog button{min-width:46px;height:38px;border:0;border-radius:10px;background:none;color:var(--dim);
  font:800 13px/1 inherit;letter-spacing:.5px;cursor:pointer;display:grid;place-items:center;transition:color .15s,transform .1s}
.langtog button.on{color:#fff;background:var(--grad);box-shadow:0 4px 12px -5px rgba(2,8,23,.45)}
.langtog button:not(.on):active{transform:scale(.94)}

/* ---------- HERO premium (glass + parallax) ---------- */
.dhero{position:relative;margin:6px 0 30px;padding:30px 22px 26px;border-radius:26px;overflow:hidden;
  color:#f4f7fd;
  background:
    linear-gradient(165deg, rgba(9,14,26,.66) 0%, rgba(9,14,26,.88) 74%),   /* velo para legibilidad */
    radial-gradient(130% 120% at 0% 0%, rgba(242,183,5,.20), transparent 50%),
    radial-gradient(130% 120% at 100% 6%, rgba(214,40,40,.20), transparent 52%),
    var(--hero-img, none) center/cover no-repeat,
    linear-gradient(160deg,#16203a 0%,#0b1220 72%);                          /* respaldo si no hay foto */
  box-shadow:0 30px 70px -34px rgba(2,8,23,.7), inset 0 1px 0 rgba(255,255,255,.07)}
.dhero-aura{position:absolute;inset:-40% -20% 30% -20%;z-index:0;pointer-events:none;will-change:transform;filter:blur(4px);
  background:
    radial-gradient(42% 55% at 24% 22%, rgba(242,183,5,.30), transparent 60%),
    radial-gradient(44% 58% at 86% 12%, rgba(214,40,40,.28), transparent 60%)}
.dhero-in{position:relative;z-index:1}
.dkick{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:#ffdc8f;padding:6px 12px 6px 11px;border-radius:999px;background:rgba(242,183,5,.14)}
.dkick::before{content:"";width:6px;height:6px;border-radius:50%;background:#F2B705;box-shadow:0 0 0 4px rgba(242,183,5,.22)}
.dhero h2{margin:15px 0 9px;font-size:clamp(27px,7.2vw,38px);font-weight:850;letter-spacing:-0.6px;line-height:1.04;color:#fff}
.dhero p{margin:0;font-size:15.5px;line-height:1.5;color:rgba(244,247,253,.82);max-width:42ch}

/* buscador de vidrio (sin marco duro) */
.dsearch{display:flex;align-items:center;gap:11px;margin-top:22px;height:56px;padding:0 18px;border-radius:16px;
  background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff;
  transition:box-shadow .18s,background .18s}
.dsearch:focus-within{background:rgba(255,255,255,.15);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 0 0 4px rgba(242,183,5,.22)}
.dsearch .ic{width:20px;height:20px;color:rgba(255,255,255,.62);flex:0 0 auto}
.dsearch input{flex:1;min-width:0;border:0;background:none;outline:none;font:500 16px/1 inherit;color:#fff}
.dsearch input::placeholder{color:rgba(255,255,255,.55)}

/* línea de datos, en texto (nada de tarjetas de métricas) */
.dstat{display:flex;align-items:center;gap:11px;margin-top:16px;font-size:13px;color:rgba(244,247,253,.72);
  font-variant-numeric:tabular-nums}
.dstat b{color:#fff;font-weight:800;font-size:14px}
.dstat i{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.4);display:inline-block}

/* accesos rápidos del hero */
.dhero-acts{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.dh-btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px;border:0;border-radius:13px;
  background:rgba(255,255,255,.14);color:#fff;font:800 14px/1 inherit;letter-spacing:-.2px;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background .15s,transform .12s}
.dh-btn .ic{width:18px;height:18px}
.dh-btn:hover{background:rgba(255,255,255,.2)}
.dh-btn:active{transform:scale(.97)}
.dh-btn.ghost{background:rgba(255,255,255,.06)}
.dh-btn.amz-hero{background:#FF9900;color:#131A22;box-shadow:none}
.dh-btn.amz-hero:hover{background:#ffab2e}

/* logo del header (es un enlace en /donar) — sin subrayado */
.marcabtn{text-decoration:none;color:inherit}

/* botón "Ubícame" dentro de la sección de centros */
.dubi{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;margin:0 0 16px;border-radius:12px;
  border:0;background:var(--chip);color:var(--txt);font:800 14px/1 inherit;letter-spacing:-.2px;cursor:pointer;transition:background .15s}
.dubi .ic{width:18px;height:18px;color:var(--acc)}
.dubi:hover{background:var(--line)}
.dubi:active{transform:scale(.98)}
.dubi.load{opacity:.7;pointer-events:none}
.dubi.load .ic{animation:locspin 1s linear infinite}
.dh-btn.load{opacity:.7;pointer-events:none}
.dh-btn.load .ic{animation:locspin 1s linear infinite}
@keyframes locspin{to{transform:rotate(360deg)}}

/* chip de distancia en la ficha del centro */
.cdist{display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:5px 11px;border-radius:999px;
  font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--chip);color:var(--dim)}
.cdist.near{background:color-mix(in srgb, var(--c0) 16%, var(--card));color:var(--c0)}
.cdist .ic{width:14px;height:14px}
.ccard.isnear{background:color-mix(in srgb, var(--c0) 10%, var(--card));
  box-shadow:0 1px 2px rgba(2,8,23,.05), 0 16px 38px -20px rgba(2,8,23,.32)}
.ccard.isnear .cmark{background:var(--c0)}

/* ---------- modo búsqueda: hero mínimo, solo resultados ---------- */
#app.searching .dhero{position:sticky;top:0;z-index:20;margin:0 0 18px;padding:14px 16px;
  border-radius:0 0 22px 22px;box-shadow:0 14px 30px -18px rgba(2,8,23,.7)}
#app.searching .dhero-aura,
#app.searching .dkick,
#app.searching .dhero h2,
#app.searching .dhero p,
#app.searching .dstat,
#app.searching .dhero-acts{display:none}
#app.searching .dsearch{margin-top:0}
#app.searching #d-modo,
#app.searching #d-no,
#app.searching #d-centros-h,
#app.searching #d-centros-sub,
#app.searching #d-centros,
#app.searching #d-vermapa{display:none}

/* ---------- selector de modo (Todo / Fácil) ---------- */
.dmodo{margin:0 0 20px}
.dseg{display:inline-flex;gap:3px;padding:4px;border-radius:14px;background:var(--chip)}
.dseg button{height:42px;padding:0 18px;border:0;border-radius:11px;background:none;color:var(--dim);
  font:800 14px/1 inherit;letter-spacing:-.2px;cursor:pointer;transition:color .15s}
.dseg button.on{color:#fff;background:var(--grad);box-shadow:0 5px 14px -6px rgba(2,8,23,.4)}
.dmodo-sub{margin:12px 2px 0;font-size:14px;line-height:1.5;color:var(--dim);text-wrap:pretty}

/* ---------- CATEGORÍAS (sin marcos, colapsables, seleccionables) ---------- */
.dcat{margin:0 0 22px}
.dcat-h{width:100%;display:flex;align-items:center;gap:13px;padding:6px 0;border:0;background:none;
  color:var(--txt);font:inherit;text-align:left;cursor:pointer}
.dcat-t{margin:0;font-size:18px;font-weight:800;letter-spacing:-.4px;flex:1;line-height:1.2}
.dcat-n{font-variant-numeric:tabular-nums;font-size:12px;font-weight:800;color:var(--dim);
  min-width:24px;height:24px;padding:0 8px;border-radius:999px;background:var(--chip);display:grid;place-items:center}
.dcat-h .chev{width:20px;height:20px;color:var(--dim);transition:transform .22s ease}
.dcat.open .dcat-h .chev{transform:rotate(180deg)}
.dcat-ic{width:46px;height:46px;flex:0 0 auto;border-radius:14px;display:grid;place-items:center;
  color:var(--cat,#4f9cf9);
  background:color-mix(in srgb, var(--cat,#4f9cf9) 15%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cat,#4f9cf9) 24%, transparent)}
.dcat-ic .ic{width:23px;height:23px}
.dcat--medico{--cat:#e11d48}
.dcat--medicamentos{--cat:#0d9488}
.dcat--higiene{--cat:#0ea5e9}
.dcat--herramientas{--cat:#d97706}
.dcat--emergencia{--cat:#7c3aed}

/* cuerpo colapsable */
.dgrid{display:none;grid-template-columns:1fr;margin-top:6px}
.dcat.open .dgrid{display:grid}
@media(min-width:560px){.dcat.open .dgrid{grid-template-columns:1fr 1fr;column-gap:26px}}

/* ítem seleccionable (toca para armar tu lista) */
.ditem{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  padding:13px 4px;font:inherit;font-size:15px;line-height:1.4;color:var(--txt);
  background:none;border:0;border-top:1px solid var(--line);cursor:pointer;transition:background .12s}
.ditem:hover{background:color-mix(in srgb, var(--cat,#4f9cf9) 6%, transparent)}
.dgrid .ditem:first-child{border-top:0}
@media(min-width:560px){.dgrid .ditem:nth-child(2){border-top:0}}
.dchk{flex:0 0 auto;width:24px;height:24px;margin-top:-1px;border-radius:8px;display:grid;place-items:center;
  background:transparent;box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--txt) 22%, transparent);
  color:#fff;transition:background .14s,box-shadow .14s}
.dchk .ic{width:16px;height:16px;opacity:0;transform:scale(.6);transition:opacity .14s,transform .14s}
.ditem.on .dchk{background:var(--cat,#16a34a);box-shadow:inset 0 0 0 2px var(--cat,#16a34a)}
.ditem.on .dchk .ic{opacity:1;transform:scale(1)}
.dtxt{flex:1;padding-top:2px}
.ditem.on .dtxt{font-weight:600}
.dnores{padding:8px 2px}

/* ---------- NO RECIBIMOS (relleno suave, sin marco) ---------- */
.dno{margin:8px 0 34px;padding:20px 20px 6px;border-radius:20px;
  background:color-mix(in srgb, var(--c3) 8%, var(--card))}
.dno .sec{margin:0 0 12px;padding:0;border:0;font-size:12px;font-weight:800;letter-spacing:.9px;
  text-transform:uppercase;color:var(--c3)}
.dnogrid{display:grid;grid-template-columns:1fr}
@media(min-width:560px){.dnogrid{grid-template-columns:1fr 1fr;column-gap:26px}}
.dnoitem{display:flex;align-items:flex-start;gap:10px;padding:0 0 14px;font-size:14.5px;line-height:1.4;color:var(--txt)}
.dnoitem .ic{width:19px;height:19px;margin-top:1px;flex:0 0 auto}

/* ---------- CENTROS (sin tarjetas: bloques divididos) ---------- */
.dsec{margin:34px 0 4px;font-size:22px;font-weight:850;letter-spacing:-.5px;color:var(--txt)}
.dsec-sub{margin:0 0 6px;font-size:14.5px;line-height:1.5;color:var(--dim)}

.ccard{position:relative;margin:0 0 14px;padding:18px;border-radius:20px;background:var(--card);
  box-shadow:0 1px 2px rgba(2,8,23,.05), 0 14px 34px -20px rgba(2,8,23,.3)}
:root:not([data-eff="light"]) .ccard{box-shadow:0 1px 2px rgba(0,0,0,.25), 0 16px 36px -22px rgba(0,0,0,.6)}
.crow{display:flex;align-items:flex-start;gap:13px}
.cmark{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:var(--mk,#0ea5e9)}
.cmark .ic{width:22px;height:22px}
.ccard h3{margin:0;font-size:19px;font-weight:800;letter-spacing:-.3px;line-height:1.2}
.cloc{font-size:13px;font-weight:600;color:var(--dim);margin-top:3px}
.ccard .muted{font-size:13.5px;margin-top:5px;font-variant-numeric:tabular-nums;color:var(--dim)}
.ccoord{font-size:14px;margin-top:5px}
.ccoord b{font-weight:800;color:var(--txt)}
.cdir{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:14.5px;color:var(--txt)}
.cdir .ic{color:var(--acc);width:18px;height:18px;flex:0 0 auto}
.clab{margin:16px 0 8px;font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--dim)}
.ccard .opts{display:flex;flex-wrap:wrap;gap:8px}
.ccard .chip{background:var(--chip);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:600;color:var(--txt)}
.cclasif{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:13px 15px;border-radius:14px;
  font-size:14px;font-weight:600;line-height:1.4;
  background:color-mix(in srgb, var(--gold) 15%, var(--card));color:var(--txt)}
.cclasif .ic{color:#b45309;width:20px;height:20px;flex:0 0 auto;margin-top:1px}
:root[data-eff="light"] .cclasif .ic{color:#92600a}
.ccond{margin:0;font-size:14.5px;line-height:1.55;color:var(--txt)}

/* botón WhatsApp — sólido, táctil */
.wa{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 17px;border-radius:999px;
  background:var(--wa);color:#04310f;border:0;font:800 14px/1 inherit;cursor:pointer;text-decoration:none;
  white-space:nowrap;box-shadow:0 6px 16px -8px rgba(2,8,23,.35);transition:transform .15s,box-shadow .15s}
.wa .ic{width:17px;height:17px}
.wa:hover{transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(2,8,23,.4)}
.wa:active{transform:translateY(0)}

/* ---------- CTA principal al mapa ---------- */
.dcta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:58px;margin-top:30px;
  border-radius:18px;background:var(--grad);color:#fff;border:0;cursor:pointer;text-decoration:none;
  font:850 16.5px/1 inherit;letter-spacing:-.2px;
  box-shadow:0 16px 40px -20px rgba(2,8,23,.5);transition:transform .18s,box-shadow .18s}
.dcta::after{content:"";width:19px;height:19px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.dcta:hover{transform:translateY(-2px);box-shadow:0 24px 52px -22px rgba(2,8,23,.55)}
.dcta:active{transform:translateY(0)}

.dhero p,.dtxt,.ccond,.dsec-sub{text-wrap:pretty}

/* enlace para registrar un nuevo centro (auto-servicio) */
.dregistrar{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;padding:15px;
  border-radius:16px;background:var(--chip);color:var(--txt);text-decoration:none;
  font:800 14.5px/1.3 inherit;letter-spacing:-.1px;text-align:center;transition:background .15s}
.dregistrar:hover{background:var(--line)}
.dregistrar::after{content:"→";font-weight:800;color:var(--acc)}

/* ---------- Mi lista (barra flotante) ---------- */
.dlista{position:fixed;left:12px;right:12px;bottom:calc(14px + var(--safe));z-index:60;
  display:flex;align-items:center;gap:12px;max-width:760px;margin:0 auto;
  padding:11px 11px 11px 18px;border-radius:18px;color:#fff;
  background:rgba(15,23,42,.93);backdrop-filter:blur(14px);
  box-shadow:0 22px 54px -18px rgba(2,8,23,.72), inset 0 0 0 1px rgba(255,255,255,.1);
  animation:dl-rise .26s ease}
.dlista[hidden]{display:none}
:root[data-eff="light"] .dlista{background:rgba(17,24,39,.95)}
@keyframes dl-rise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.dl-info{display:flex;align-items:baseline;gap:6px;flex:1;min-width:0;font-size:13px;color:rgba(255,255,255,.75);white-space:nowrap}
.dl-info b{font-size:20px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.dl-acts{display:flex;gap:8px;flex:0 0 auto}
.dl-btn{height:44px;padding:0 16px;border:0;border-radius:12px;background:var(--grad);color:#fff;
  font:800 14px/1 inherit;cursor:pointer;transition:transform .15s,filter .15s}
.dl-btn:hover{filter:brightness(1.07)}
.dl-btn:active{transform:scale(.96)}
.dl-btn.ghost{background:rgba(255,255,255,.13)}
@media(max-width:430px){.dl-info span{display:none}.dl-btn{padding:0 13px}}

/* al mostrar la barra, deja aire abajo para no tapar el CTA ni el pie */
.view.on.withbar .pad{padding-bottom:calc(116px + var(--safe))}

/* ---------- hoja para compartir ---------- */
.dsheet{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center}
.dsheet[hidden]{display:none}
.dsheet-bg{position:absolute;inset:0;background:rgba(2,8,23,.5);opacity:0;transition:opacity .22s}
.dsheet.on .dsheet-bg{opacity:1}
.dsheet-card{position:relative;width:100%;max-width:520px;margin:0 10px calc(10px + var(--safe));
  background:var(--card);border-radius:22px;padding:16px 14px 14px;
  box-shadow:0 -10px 60px -18px rgba(2,8,23,.6), inset 0 0 0 1px var(--line);
  transform:translateY(24px);opacity:0;transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .22s}
.dsheet.on .dsheet-card{transform:none;opacity:1}
.dsheet-h{font-size:13px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--dim);
  padding:4px 8px 12px}
.dsopt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:0;background:none;
  padding:14px 10px;border-radius:14px;color:var(--txt);font:inherit;cursor:pointer;transition:background .12s}
.dsopt:hover{background:var(--chip)}
.dsopt-ic{width:46px;height:46px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center;
  color:var(--acc);background:color-mix(in srgb, var(--acc) 14%, transparent)}
.dsopt-ic .ic{width:23px;height:23px}
.dsopt b{display:block;font-size:16px;font-weight:750;letter-spacing:-.2px}
.dsopt small{display:block;font-size:13px;color:var(--dim);margin-top:2px}
.dsheet-x{width:100%;height:50px;margin-top:8px;border:0;border-radius:14px;background:var(--chip);
  color:var(--txt);font:800 15px/1 inherit;cursor:pointer}
.dsheet-x:active{transform:scale(.99)}

/* ---- selector de centro para Amazon (rediseñado) ---- */
.amz-sub{margin:0 6px 14px;font-size:14px;line-height:1.5;color:var(--dim);text-wrap:pretty}
.amzloc{display:flex;align-items:center;gap:9px;width:100%;padding:12px 14px;margin:0 0 14px;border:0;border-radius:14px;
  background:color-mix(in srgb, var(--acc) 12%, transparent);color:var(--acc);font:800 14px/1 inherit;
  cursor:pointer;text-align:left;transition:background .12s}
.amzloc:hover{background:color-mix(in srgb, var(--acc) 18%, transparent)}
.amzloc:active{transform:scale(.99)}
.amzloc .ic{width:20px;height:20px;flex:0 0 auto}
.amz-hint{margin:0 6px 9px;font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--dim)}
.amzrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;cursor:pointer;
  padding:11px 12px;border-radius:16px;margin:0 0 9px;background:var(--chip);
  transition:background .12s,transform .08s}
.amzrow:hover{background:var(--line)}
.amzrow:active{transform:scale(.995)}
.amzrow.near{box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--c0) 55%, transparent)}
.amzrow-ic{width:44px;height:44px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;color:#fff}
.amzrow-ic .ic{width:22px;height:22px}
.amzrow-txt{flex:1;min-width:0}
.amzrow-txt b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amzrow-txt .muted{font-weight:600;color:var(--dim)}
.amzrow-txt small{display:block;font-size:12.5px;color:var(--dim);margin-top:2px;font-variant-numeric:tabular-nums;
  line-height:1.35;text-wrap:pretty}
.amzcta{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:9px 12px;border-radius:999px;
  background:#FF9900;color:#131A22;font:800 13px/1 inherit;white-space:nowrap}
.amzcta .amzlogo{width:18px;height:16px}
.amzcta .ic:last-child{width:15px;height:15px}

/* ---------- bienvenida (agradecer + elegir) ---------- */
.dwelcome{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:18px}
.dwelcome[hidden]{display:none}
.dwelcome-bg{position:absolute;inset:0;background:rgba(2,8,23,.6);opacity:0;transition:opacity .25s}
.dwelcome.on .dwelcome-bg{opacity:1}
.dwelcome-card{position:relative;width:100%;max-width:440px;background:var(--card);border-radius:26px;
  padding:28px 22px 22px;text-align:center;box-shadow:0 40px 90px -30px rgba(2,8,23,.7);
  transform:translateY(18px) scale(.98);opacity:0;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .25s}
.dwelcome.on .dwelcome-card{transform:none;opacity:1}
.dw-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border:0;border-radius:12px;
  background:var(--chip);color:var(--dim);font-size:22px;line-height:1;cursor:pointer}
.dw-mark{width:64px;height:64px;margin:2px auto 14px;border-radius:20px;display:grid;place-items:center;
  color:#fff;background:var(--grad)}
.dw-mark .ic{width:32px;height:32px}
.dwelcome-card h2{margin:0 0 8px;font-size:23px;font-weight:850;letter-spacing:-.5px}
.dwelcome-card p{margin:0 0 18px;font-size:15px;line-height:1.5;color:var(--dim);text-wrap:pretty}
.dw-opt{display:flex;align-items:center;gap:13px;width:100%;text-align:left;border:0;cursor:pointer;
  padding:15px;border-radius:16px;margin-top:10px;background:var(--chip);color:var(--txt);font:inherit;
  transition:transform .12s,filter .15s}
.dw-opt:active{transform:scale(.99)}
.dw-opt.primary{background:var(--grad);color:#fff}
.dw-opt.amazon{background:#FF9900;color:#131A22}
.dw-opt.primary:hover,.dw-opt.amazon:hover{filter:brightness(1.05)}
.dw-opt-ic{width:44px;height:44px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.22)}
.dw-opt.amazon .dw-opt-ic{background:rgba(19,26,34,.14)}
.dw-opt-ic .ic{width:22px;height:22px}
.dw-opt b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.2px}
.dw-fast{display:inline-block;vertical-align:middle;margin-left:6px;padding:3px 8px;border-radius:999px;
  font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  background:rgba(19,26,34,.16);color:inherit}
.dw-opt small{display:block;font-size:12.5px;margin-top:3px;opacity:.9;font-weight:600}

/* aviso "se añadió": punto que vuela al carrito + rebote del contador */
.flydot{position:fixed;z-index:85;width:18px;height:18px;border-radius:50%;pointer-events:none;
  box-shadow:0 6px 16px -4px rgba(2,8,23,.45);opacity:1;
  transition:transform .46s cubic-bezier(.35,.6,.3,1), opacity .46s ease-in}
.dl-info b.bump{animation:cartbump .34s cubic-bezier(.22,1,.36,1)}
@keyframes cartbump{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}

/* botón Amazon del centro (Wish List) */
.amz{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border-radius:12px;
  background:#FF9900;color:#131A22;border:0;font:800 14px/1 inherit;text-decoration:none;cursor:pointer;
  margin-top:16px;box-shadow:0 6px 16px -8px rgba(2,8,23,.35);transition:transform .15s,box-shadow .15s}
.amz .ic{width:18px;height:18px}
.amz:hover{transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(2,8,23,.4)}
.amz:active{transform:translateY(0)}

/* fila de acciones del centro: WhatsApp + Amazon, grandes y visibles */
.cacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cacts .wa,.cacts .amz{flex:1 1 140px;justify-content:center;height:50px;margin-top:0}
.cacts .cshare{flex:1 1 100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;
  border-radius:12px;background:var(--chip);color:var(--txt);border:0;font:800 14px/1 inherit;cursor:pointer;text-decoration:none}
.cacts .cshare .ic{width:17px;height:17px}
.cacts .cshare:hover{background:var(--line)}

/* toast */
.dtoast{position:fixed;left:50%;bottom:calc(88px + var(--safe));z-index:90;
  transform:translateX(-50%) translateY(8px);
  background:#0f172a;color:#fff;padding:11px 18px;border-radius:999px;font-size:14px;font-weight:700;
  box-shadow:0 14px 34px -12px rgba(2,8,23,.72), inset 0 0 0 1px rgba(255,255,255,.12);
  opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.dtoast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* respeto a quien pide menos movimiento */
@media (prefers-reduced-motion: reduce){
  .dhero-aura{transform:none!important}
  .langtog button,.wa,.dcta,.dl-btn,.dseg button{transition:none}
  .dlista{animation:none}
  .dcat-h .chev{transition:none}
  .dl-info b.bump{animation:none}
  .amz{transition:none}
}

/* ============================================================
   HUB de donar: pestañas Amazon / En persona, guía y promo
   ============================================================ */
.dtabs{display:flex;gap:9px;margin:14px 0 4px}
.dtabs button{flex:1;height:52px;border-radius:16px;border:1.6px solid var(--line);background:var(--surf);
  font:730 13.5px/1.15 inherit;color:var(--dim);cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  transition:transform .16s var(--ease),border-color .2s,background .2s,color .2s}
.dtabs button:active{transform:scale(.97)}
.dtabs button .ic{width:18px;height:18px}
.dtabs button[aria-selected="true"]{border-color:#dc2626;background:rgba(220,38,38,.07);color:#F87171}
:root[data-eff="light"] .dtabs button[aria-selected="true"]{color:#C11B1B}
.dguia[hidden],.dmodo[hidden],#d-cats[hidden],#d-centros[hidden],#d-centros-h[hidden],
#d-centros-sub[hidden],#d-ubicame[hidden],#d-registrar[hidden]{display:none}
.dguia .dhint{display:flex;gap:9px;align-items:flex-start;margin:12px 0 2px;padding:11px 13px;
  border-radius:14px;background:rgba(79,156,249,.12);color:var(--link);font-size:12.5px;line-height:1.45}
.dguia .dhint .ic{flex:0 0 auto;margin-top:1px}
.dguia .dhint b{font-weight:650}
.dhow{counter-reset:s;margin:4px 0 6px;padding:0;list-style:none}
.dhow li{position:relative;padding:0 0 14px 38px;font-size:13.5px;color:var(--dim);line-height:1.5;font-weight:550}
.dhow li b{color:var(--txt);font-weight:730}
.dhow li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-1px;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:#dc2626;color:#fff;font-size:12.5px;font-weight:800}
.dhow li::after{content:"";position:absolute;left:12.5px;top:27px;bottom:2px;width:1.5px;background:var(--line)}
.dhow li:last-child{padding-bottom:0}
.dhow li:last-child::after{display:none}
.damz-big{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:48px;
  border:0;border-radius:15px;font:780 14.5px/1 inherit;font-family:inherit;cursor:pointer;
  background:linear-gradient(160deg,#FFB84D,#F59E0B);color:#3B2500;
  box-shadow:0 5px 14px rgba(0,0,0,.3);margin:4px 0 6px;
  transition:transform .16s var(--ease),filter .2s}
.damz-big:active{transform:scale(.975);filter:brightness(.95)}
:root[data-eff="light"] .damz-big{box-shadow:0 5px 14px rgba(15,23,41,.18)}
.amzcat{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:6px;height:44px;border:0;border-radius:13px;font:750 13.5px/1 inherit;font-family:inherit;
  cursor:pointer;background:linear-gradient(160deg,#FFB84D,#F59E0B);color:#3B2500;
  transition:transform .16s var(--ease)}
.amzcat:active{transform:scale(.975)}
/* promo "ser centro de acopio" */
.dregistrar{display:flex!important;align-items:center;gap:12px;text-align:left;
  padding:15px!important;border-radius:20px!important;border:0!important;margin-top:10px;
  background:linear-gradient(140deg,#0EA5E9,#2563EB 60%,#1D4ED8)!important;color:#fff!important;
  box-shadow:0 10px 26px rgba(0,0,0,.35);text-decoration:none;
  transition:transform .16s var(--ease)}
.dregistrar:active{transform:scale(.98)}
:root[data-eff="light"] .dregistrar{box-shadow:0 8px 20px rgba(15,23,41,.2)}
.dregistrar .rpi{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.2);
  display:grid;place-items:center;flex:0 0 auto}
.dregistrar .rpi .ic{width:22px;height:22px}
.dregistrar .rpt{flex:1;min-width:0}
.dregistrar .rpt b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.35px}
.dregistrar .rpt small{display:block;font-size:12.3px;opacity:.88;margin-top:2px;line-height:1.35}
.dregistrar .rpa{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.22);
  display:grid;place-items:center;flex:0 0 auto}
.dregistrar .rpa .ic{width:15px;height:15px}


/* ============================================================
   HERO del diseño: tarjeta degradada con estadísticas
   ============================================================ */
.dhero2{position:relative;overflow:hidden;border-radius:22px;padding:18px 16px 16px;margin:2px 0 4px;
  background:
    linear-gradient(135deg,rgba(245,158,11,.86),rgba(239,68,68,.82) 58%,rgba(200,30,30,.88)),
    url('../img/hero-donar.jpg') center 30%/cover no-repeat;
  color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.35)}
:root[data-eff="light"] .dhero2{box-shadow:0 10px 26px rgba(15,23,41,.22)}
.dhero2::after{content:"";position:absolute;right:-40px;top:-50px;width:170px;height:170px;
  border-radius:50%;background:rgba(255,255,255,.13)}
.dhero2 .dkick2{font-size:10.5px;font-weight:800;letter-spacing:1.4px;opacity:.9;text-transform:uppercase}
.dhero2 h2{margin:6px 0;font-size:24px;font-weight:850;letter-spacing:-.9px;line-height:1.15;position:relative}
.dhero2 p{margin:0;font-size:13.2px;line-height:1.5;opacity:.94;position:relative;max-width:290px}
.dh2-stats{display:flex;gap:8px;margin-top:15px;position:relative}
.dh2-stats .hstat{flex:1;background:rgba(255,255,255,.19);border-radius:14px;padding:9px 6px;text-align:center;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dh2-stats .hstat b{display:block;font-size:19px;font-weight:850;letter-spacing:-.6px}
.dh2-stats .hstat small{display:block;font-size:10.5px;font-weight:650;opacity:.9;margin-top:1px}
/* buscador del catálogo */
.dsearch2{display:flex;align-items:center;gap:9px;margin:12px 0 2px;height:48px;padding:0 14px;
  border-radius:15px;background:var(--inp);border:1.5px solid var(--line)}
.dsearch2 .ic{width:18px;height:18px;color:var(--dim);flex:0 0 auto}
.dsearch2 input{flex:1;border:0;background:none;color:var(--txt);font:600 14.5px/1 inherit;outline:none;min-width:0}
.dsearch2 input::placeholder{color:var(--dim);opacity:.75}
.dsearch2:focus-within{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.12)}
#d-busca-wrap[hidden]{display:none}

.dcat-t small{display:block;font-size:11.5px;color:var(--dim);font-weight:620;margin-top:1px}
#d-catlab[hidden]{display:none}
/* CTA del mapa siempre a mano, como en el diseño */
#d-vermapa{position:sticky;bottom:10px;z-index:40;box-shadow:0 10px 26px rgba(0,0,0,.4)}
:root[data-eff="light"] #d-vermapa{box-shadow:0 10px 24px rgba(15,23,41,.28)}

/* volver al mapa: explicito, no solo el logo */
.hback{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;height:34px;padding:0 12px 0 8px;
  border-radius:999px;background:var(--chip);color:var(--dim);text-decoration:none;
  font:750 12.5px/1 inherit;transition:transform .18s var(--ease)}
.hback:active{transform:scale(.94)}