/* Donde estamos.

   Todo por franjas de ancho completo. La version anterior era una columna de
   datos al lado de un cuadradito de mapa, con la foto colgada abajo: tres
   cajas apiladas que se leian como un documento. Aca no hay ninguna caja: la
   foto y el mapa ocupan todo el ancho, y los datos se separan con lineas
   finas, no con marcos. La unica caja es el panel del titulo, y esta ahi para
   que el texto no se apoye directo sobre la foto. */

/* ---- 1. la foto, con el panel contra la izquierda ----

   El tamano NO es cover. Con cover, la foto (16:9) calza exacto al ancho de la
   franja y no sobra nada a los costados: mover la posicion horizontal no hace
   absolutamente nada. Con un valor mayor a 100% sobra ancho, y recien ahi el
   primer valor de background-position sirve para correrla.

   Primer valor (horizontal): mas CHICO corre la foto a la DERECHA.
   Segundo valor (vertical): mas GRANDE corre la foto hacia ARRIBA.
   El tamano: mas CHICO la aleja, mas GRANDE la acerca. Ojo que al alejarla se
   pierde holgura horizontal y la foto se recentra sola. */
.donhero{position:relative;
background-size:114% auto;background-position:0% 84%;background-repeat:no-repeat;
min-height:clamp(460px,70vh,640px);display:flex;align-items:center;
color:#fff;overflow:hidden}
/* Sin foto cargada no queda un hueco raro: se pone el negro de la marca. */
.donhero.sinfoto{background:var(--ink);min-height:auto;align-items:flex-end}

/* flex:1 1 100% ademas de width: un item flex sin base declarada se encoge al
   ancho de su contenido, y los margenes automaticos de .wrap lo centran. Eso
   era lo que dejaba el titulo en el medio de la foto en vez de alineado con la
   direccion de la franja de abajo. Las dos declaraciones dicen lo mismo a
   proposito: una sola no alcanzaba en todos los casos. */
.donheroin{width:100%;flex:1 1 100%;padding-top:38px;padding-bottom:38px}

/* El panel: una columna angosta y alta, no una caja apaisada. El ancho fijo en
   px y no en porcentaje es a proposito: en porcentaje se estira en pantallas
   grandes y vuelve a quedar horizontal. Angosto ademas porque tiene que cubrir
   la pared negra de la izquierda sin llegar nunca a la marquesina. */
.donpanel{margin-left:0;margin-right:auto;width:100%;max-width:330px;
background:rgba(12,12,15,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.16);border-radius:16px;
padding:30px 26px 32px;box-shadow:0 26px 64px rgba(0,0,0,.42)}
.donhero.sinfoto .donpanel{max-width:none;background:transparent;border:0;
box-shadow:none;padding:0;backdrop-filter:none}

.donhero .eyebrow{color:rgba(255,255,255,.72)}
.donhero h1{font-size:29px;line-height:1.14;margin:10px 0 14px}
.donhero p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.9)}
.donhero p+p{margin-top:10px;color:rgba(255,255,255,.78)}

/* En una columna angosta los botones van uno debajo del otro: al lado se
   apretarian y partirian el texto. */
.donbtns{display:flex;flex-direction:column;align-items:stretch;gap:9px;margin-top:24px}
.donbtns .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
transition:background .18s,border-color .18s,color .18s}
.donbtns .bi{width:17px;height:17px;display:block;flex:none}
.donbtns .bi svg{width:17px;height:17px;display:block}

/* La clase .btn.red del sitio NO es roja: usa var(--ink), el negro de la
   marca. Sobre el panel oscuro queda negro sobre negro, no se lee como boton y
   el hover (que va a #000) no se nota. Sobre foto va en rojo de verdad. */
.donbtns .btn.red{background:var(--red);border-color:var(--red);color:#fff}
.donbtns .btn.red:hover{background:#B0161E;border-color:#B0161E}
/* El secundario, calado con un velo apenas visible: asi se ve que es un boton
   sin competir con el rojo. */
.donbtns .btn.fantasma{background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.55);color:#fff}
.donbtns .btn.fantasma:hover{background:rgba(255,255,255,.18);border-color:#fff}

/* ---- 2. los datos: tipografia y lineas, sin marcos ---- */
.dondatos{border-bottom:1px solid var(--line);background:var(--paper)}
.dondatos .wrap{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:0;
padding-top:26px;padding-bottom:26px}
.dond{padding:0 30px;border-left:1px solid var(--line)}
.dond:first-child{padding-left:0;border-left:0}
.dond:last-child{padding-right:0}
.dond .k{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;
letter-spacing:.16em;text-transform:uppercase;color:var(--mut2);margin-bottom:8px}
.dond b{display:block;font-size:15.5px;font-weight:600;line-height:1.45}
.dond b.suave{font-weight:400;color:var(--mut);font-size:14px;line-height:1.55}
.dond .n{display:block;font-size:13px;color:var(--mut);line-height:1.5;margin-top:6px}

/* ---- 3. el mapa, como banda ancha ----
   Carga de entrada: el rectangulo gris con un boton no decia nada y el dato
   que se venia a buscar no estaba. Va desaturado para entrar en la paleta del
   sitio y recupera el color al pasarle el mouse, por si hace falta leerlo. */
.donmapa{position:relative;height:clamp(300px,42vh,420px);background:var(--surf2);
overflow:hidden}
.donmapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
filter:grayscale(1) contrast(1.05);transition:filter .3s}
.donmapa:hover iframe{filter:grayscale(0)}

/* Queda por si algun dia se vuelve a la carga a pedido. */
.donmapa:not(.cargado){cursor:pointer}
.mapaprev{position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;
background:
 linear-gradient(0deg,rgba(242,242,240,.92),rgba(242,242,240,.92)),
 repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 52px),
 repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 52px)}
.mapaprev .pin{width:52px;height:52px;border-radius:50%;background:var(--red);color:#fff;
display:flex;align-items:center;justify-content:center;
box-shadow:0 12px 28px rgba(217,28,38,.34)}
.mapaprev .pin svg{width:26px;height:26px}
.mapaprev b{font-size:16px;font-weight:600;color:var(--ink)}
.mapaprev .nota{font-size:12.5px;color:var(--mut2)}

/* ---- 4. por que venir ---- */
.donrazones{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.donr .n{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;
color:var(--red);display:block;padding-bottom:10px;margin-bottom:12px;
border-bottom:2px solid var(--ink)}
.donr b{display:block;font-size:17px;font-weight:600;line-height:1.28;margin-bottom:6px}
.donr span{font-size:14px;color:var(--mut);line-height:1.6}

@media(max-width:1000px){
.dondatos .wrap{grid-template-columns:1fr;gap:22px;padding-top:22px;padding-bottom:22px}
.dond{padding:0;border-left:0;padding-top:22px;border-top:1px solid var(--line)}
.dond:first-child{padding-top:0;border-top:0}
.donrazones{grid-template-columns:1fr;gap:26px}
/* En pantalla chica la columna angosta ya no tiene sentido: ocupa el ancho. */
.donpanel{max-width:none}
.donbtns{flex-direction:row;flex-wrap:wrap}
.donhero{min-height:clamp(400px,56vh,520px);background-size:cover;background-position:58% 84%}
}
@media(max-width:640px){
.donbtns{flex-direction:column}
.donpanel{padding:22px 18px 24px;border-radius:14px}
}