/* ==========================================================================
   Espacio TEC — versión simple
   Una pantalla: el edificio que se construye y el formulario al lado.
   Mobile first; a partir de 960px, edificio y formulario van en dos columnas.
   ========================================================================== */

:root{
  --purpura:#784690;
  --magenta:#bc005a;
  --coral:#c8563c;
  --ambar:#db9600;
  --amarillo:#f4d800;
  --lima:#d7d91f;

  --ink:#14171b;
  --paper:#f7f5f1;
  --card:#fff;
  --line:#ddd8d0;
  --muted:#6a6a70;

  --radio:18px;
  --gutter:16px;
  --franjas:linear-gradient(90deg,var(--purpura),var(--magenta) 20%,var(--coral) 40%,var(--ambar) 60%,var(--amarillo) 80%,var(--lima));
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
h1,h2{letter-spacing:-.04em;line-height:1.02;margin:0 0 .35em;font-weight:900}
h1{font-size:clamp(2.2rem,min(11vw,11vh),4.6rem)}
h2{font-size:clamp(1.6rem,6vw,2.4rem)}
p{margin:0 0 .8em}
:where(a,button,input):focus-visible{outline:3px solid var(--ambar);outline-offset:3px;border-radius:6px}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 20px;border:0;border-radius:999px;
  background:var(--magenta);color:#fff;font-weight:800;text-decoration:none;
  box-shadow:0 6px 18px rgba(188,0,90,.28);transition:transform .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:wait}
.btn-grande{width:100%;min-height:58px;font-size:1.08rem;margin-top:6px}
.btn-borde{background:transparent;color:inherit;border:1.5px solid currentColor;box-shadow:none}

/* ---------- Barra de arriba ---------- */
.barra{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px var(--gutter);background:var(--ink);
}
.barra img{height:34px;width:auto}
.barra-der{display:flex;align-items:center;gap:8px}
.idioma{
  min-height:44px;padding:6px 12px;border-radius:999px;border:1.5px solid #4a5058;
  background:transparent;color:#fff;font-weight:800;font-size:.9rem;white-space:nowrap;
}
.idioma:hover{border-color:#fff}
.franjas{height:5px;background:var(--franjas)}

/* ---------- Estructura ---------- */
.principal{max-width:1240px;margin-inline:auto}
@media(min-width:960px){
  .principal{
    display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,1fr);
    gap:32px;padding:32px 24px;align-items:start;
  }
  .donar{position:sticky;top:78px}
}

/* ---------- El edificio ---------- */
.obra-texto{padding:24px var(--gutter) 16px}
.obra-texto p{font-size:1.08rem;color:#3b3f45;max-width:40ch;margin:0}
@media(min-width:960px){ .obra-texto{padding:0 0 20px} }

.fachada{
  position:relative;overflow:hidden;
  /* La foto en miniatura y borrosa: se ve al instante mientras carga la
     de verdad, que en este hosting tarda. */
  background:#8d8a99 url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQIAHAAcAAD/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wAARCAAQABgDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAABAADBf/EACIQAAICAgEDBQAAAAAAAAAAAAECAxEABBITIUEUIjGB8f/EABUBAQEAAAAAAAAAAAAAAAAAAAAC/8QAGhEAAgMBAQAAAAAAAAAAAAAAAAECAxETQf/aAAwDAQACEQMRAD8A4SIo6YjckvzY0KYADEq8setGzSFTbA2LB79vGYLq9R2kEhYEECux/MU5k9Miqqq4JJt7+clSeYi1FaJI110Vn2j7rriBRP1lhNkovSLGNlC1wBLGyfGWJXWeDnE//9k=) 62.5% 24% / 120% auto no-repeat;   /* mismo encuadre que la foto */
  /* La caja es exactamente el edificio del render (x 160–1440, y 30–930 de
     una imagen de 1536×1024): así la grilla tapa el edificio y no la
     vereda ni el cielo, en cualquier ancho. */
  aspect-ratio:1280/900;
}
@media(min-width:960px){ .fachada{border-radius:var(--radio)} }
.fachada>img{position:absolute;max-width:none;width:120%;height:auto;left:-12.5%;top:-3.33%}

/* La grilla tapa el edificio con un velo de papel; cada ladrillo puesto
   se vuelve transparente y deja ver la foto. Así el museo aparece. */
.ladrillos{
  position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(var(--cols,12),1fr);
  grid-template-rows:repeat(var(--rows,12),1fr);
}
.ladrillo{
  padding:0;border:0;min-width:0;min-height:0;
  background:rgba(247,245,241,.8);
  box-shadow:inset 0 0 0 .5px rgba(20,23,27,.16);
  transition:background-color .5s ease,box-shadow .5s ease;
}
.ladrillo.puesto{background:transparent;box-shadow:inset 0 0 0 .5px rgba(244,216,0,.55)}
.ladrillo.puesto:hover,.ladrillo.elegido{
  background:rgba(255,106,61,.55);box-shadow:inset 0 0 0 1.5px #fff;
}
.ladrillo.tuyo{background:rgba(188,0,90,.62);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.7)}
.ladrillo:disabled{cursor:default}
/* Antes de verse, ninguno está puesto; después se encienden en orden. */
.ladrillos:not(.listo) .ladrillo.puesto{background:rgba(247,245,241,.8);transition:none}

.hito{
  position:absolute;left:0;right:0;height:0;z-index:3;pointer-events:none;
  border-top:2px dashed #fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.meta-arriba{
  position:absolute;left:0;right:0;top:0;height:0;z-index:3;pointer-events:none;
  border-top:2px dashed #fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.meta-arriba span{
  position:absolute;right:8px;top:6px;
  background:var(--ink);color:#fff;font-size:.72rem;font-weight:800;
  padding:3px 8px;border-radius:999px;white-space:nowrap;
}
.meta-arriba.logrado{border-top:3px solid #3ddc84}
.meta-arriba.logrado span{background:#1f7a3a}
.elegir{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 0;max-width:460px}
.elegir .btn{min-height:50px;padding-inline:10px;font-size:.98rem}
.sellos{display:flex;align-items:center;gap:12px;margin:16px 0 0}
.sellos img{width:88px;height:auto;object-fit:contain;flex:0 0 auto}
.sellos .sello-vcf{width:60px}
.sellos p{margin:0;font-size:.85rem;line-height:1.35;color:#3b3f45}
@media (orientation:landscape) and (max-height:560px) and (max-width:959px){ .sellos{display:none} }
.aclaracion{margin:6px 0 0;font-size:.8rem;color:var(--muted)}
.aclaracion-fuerte{font-size:.95rem;font-weight:800;color:var(--ink);margin-top:10px}
.alternativa{margin:12px 0 0;text-align:center;font-size:.95rem;color:#3b3f45}
.alternativa a{font-weight:800;color:var(--magenta)}
#museo,#club{scroll-margin-top:70px}
.hito.logrado{border-top:3px solid #3ddc84}
.hito.logrado span{background:#1f7a3a}
.hito span{
  position:absolute;right:8px;bottom:4px;
  background:var(--ink);color:#fff;font-size:.72rem;font-weight:800;
  padding:3px 8px;border-radius:999px;white-space:nowrap;
}

.obra-datos{padding:16px var(--gutter) 8px}
@media(min-width:960px){ .obra-datos{padding:16px 0 0} }
.cifra{margin:0 0 8px;font-size:.95rem;color:var(--muted)}
.cifra b{font-size:clamp(1.5rem,6vw,2rem);color:var(--ink);letter-spacing:-.03em}
/* Hasta que llegan los datos del backend, las cifras no se muestran: un 0
   que después salta a otro número se lee como que no hay nada. */
.cargando #edRecaudado,.cargando #edLadrillos,.cargando #opRecaudado,.cargando #ladrilloHoy,.cargando #edNota,.cargando #hitoTexto,.cargando #metaTexto{visibility:hidden}
.cargando .cifra::before{content:"…";font-weight:800;font-size:1.6rem}
.gastos-arriba{display:block;margin:14px 0 6px;padding:10px 14px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:inherit;text-decoration:none}
.gastos-arriba:hover{border-color:var(--ink)}
.gastos-arriba p{margin:0 0 7px;font-size:.92rem;color:var(--muted)}
.gastos-arriba b{color:var(--ink);font-size:1.05rem}
.barra-progreso.fina{height:7px}
.cargando .gastos-arriba .op-recaudado{visibility:hidden}
.ladrillo-hoy{display:block;margin-top:4px;font-size:.88em;color:var(--muted)}
.cuenta-ladrillos{margin:-4px 0 10px;font-size:.95rem;color:var(--muted)}
.cuenta-ladrillos b{color:var(--ink)}
.barra-progreso{position:relative;height:12px;border-radius:999px;background:#e4dfd6;overflow:hidden}
.barra-progreso i{position:absolute;inset:0 auto 0 0;width:0;background:var(--franjas);border-radius:inherit;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.barra-progreso.ambar i{background:var(--ambar)}
.nota{margin:8px 0 0;font-weight:700;font-size:.95rem}
.detalle{
  margin:0 0 14px;padding:12px 14px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);font-size:.95rem;min-height:3.2em;
}
.detalle .dedic{display:block;font-style:italic;color:#3b3f45;margin-top:4px}

/* ---------- Donar ---------- */
.donar{padding:24px var(--gutter) 40px;scroll-margin-top:60px}
@media(min-width:960px){ .donar{padding:0} }
.tarjeta{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radio);
  padding:22px 18px;box-shadow:0 18px 50px rgba(20,23,27,.08);
}
@media(min-width:560px){ .tarjeta{padding:26px 24px;max-width:520px;margin-inline:auto} }

.destinos{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:#efece6;border-radius:999px;margin-bottom:14px}
.destinos button{border:0;background:transparent;border-radius:999px;padding:10px 6px;font-weight:800;font-size:.9rem;line-height:1.2}
.destinos button[aria-pressed="true"]{background:var(--ink);color:#fff}

.montos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.monto{
  min-width:0;border:1.5px solid var(--line);background:#fff;border-radius:14px;
  padding:12px 2px;font-weight:850;font-size:clamp(.76rem,3.7vw,1rem);line-height:1.15;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.monto-otro{grid-column:1 / -1;padding:10px 4px}
.monto-medio{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;text-align:left;border-style:dashed}
.monto-medio>span:first-child{font-weight:750;letter-spacing:0}
.monto-medio>span:last-child{text-align:right;white-space:nowrap}
.monto small{display:block;font-weight:600;font-size:.74rem;color:var(--muted);margin-top:2px}
.monto[aria-pressed="true"]{border-color:var(--magenta);background:#fff0f6;box-shadow:inset 0 0 0 1px var(--magenta)}

.campo{display:block;margin-bottom:12px}
.campo>span{display:block;font-weight:700;font-size:.88rem;margin-bottom:4px}
.campo small{font-weight:500;color:var(--muted)}
.campo input{
  width:100%;min-height:48px;padding:10px 14px;
  border:1.5px solid var(--line);border-radius:12px;background:#fff;
  font-size:16px;   /* 16px o más: iOS no hace zoom al enfocar */
}
.campo input:focus{border-color:var(--ink);outline:none}

.equivale{
  margin:0 0 12px;padding:10px 12px;border-radius:12px;
  background:#fbf6e3;font-size:.92rem;
}
.equivale:empty{display:none}
.pie-form{margin:10px 0 0;font-size:.85rem;color:var(--muted);text-align:center}
.demo{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:#fff4d6;font-size:.82rem}

/* ---------- Museo ---------- */
.museo{max-width:1240px;margin-inline:auto;padding:40px var(--gutter) 48px}
@media(min-width:960px){ .museo{padding:56px 24px 64px} }
.fotos{
  display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;
  margin:18px calc(var(--gutter) * -1) 24px;padding-inline:var(--gutter);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
}
.fotos::-webkit-scrollbar{display:none}
@media(min-width:640px){
  .fotos{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);margin-inline:0;padding-inline:0;overflow:visible}
}
.fotos figure{margin:0;scroll-snap-align:start;min-width:0}
.fotos img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.fotos figcaption{font-weight:800;margin-top:8px}
.operativo{max-width:560px}
.operativo .btn-borde{margin-top:16px}

/* Celular acostado: poca altura. El texto va al costado del edificio para
   que la fachada entre en la primera pantalla, y la barra deja de ser fija. */
@media (orientation:landscape) and (max-height:560px) and (max-width:959px){
  .barra{position:static;padding-block:6px}
  .barra img{height:28px}
  .obra{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:16px;padding:16px var(--gutter) 0;align-items:start}
  .obra-texto{padding:0}
  .obra-texto p{font-size:.95rem}
  .fachada{grid-column:2;grid-row:1 / span 2;border-radius:14px}
  .obra-datos{grid-column:1;grid-row:2;padding:0}
  .obra-datos .btn-grande{min-height:48px}
}
@media(min-width:960px) and (max-width:1180px){ .monto{font-size:.9rem} }

/* ---------- Donar en un toque ---------- */
.obra-datos .btn-grande{margin-top:16px}
.acciones{display:grid;gap:10px;margin-top:16px}
@media(min-width:560px){ .acciones{grid-template-columns:1fr auto;align-items:center} .acciones .btn{margin:0} }
.btn-oscuro{background:var(--ink);box-shadow:none}
.mensual{
  margin-top:32px;padding:22px 18px;border-radius:var(--radio);
  background:#fff;border:1px solid var(--line);display:grid;gap:14px;
}
.mensual h3{margin:0 0 4px;font-size:1.3rem;letter-spacing:-.03em}
.mensual p{margin:0;color:#3b3f45}
.club-logo{width:150px;height:auto;image-rendering:pixelated}
@media(min-width:720px){
  .mensual{grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:24px 28px}
  .club-logo{width:170px}
  .mensual .btn-grande{width:auto;padding-inline:28px;margin:0}
}

/* Barra fija del celular: aparece cuando el formulario no está a la vista. */
.fija{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:var(--ink);color:#fff;font-weight:700;font-size:.9rem;
  transform:translateY(110%);transition:transform .25s ease;
}
.fija.visible{transform:none}
.fija .btn{flex:0 0 auto}
@media(min-width:960px){ .fija{display:none} }

/* ---------- Pie ---------- */
.pie{background:var(--ink);color:#c9ccd1;padding:32px var(--gutter) calc(88px + env(safe-area-inset-bottom));text-align:center;font-size:.92rem}
.pie a{color:#fff;font-weight:700}
.pie p:first-child a{margin:0 8px}
.pie .legal{max-width:60ch;margin-inline:auto;font-size:.8rem;color:#8b939c}

/* ---------- Diálogo ---------- */
dialog{border:0;border-radius:var(--radio);padding:24px;width:min(420px,calc(100vw - 32px));box-shadow:0 30px 90px rgba(0,0,0,.4)}
dialog::backdrop{background:rgba(10,12,15,.6)}
dialog h2{font-size:1.4rem}
dialog .btn-borde{width:100%;margin-top:10px;min-height:48px}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}