/* Panel público · "Juntos levantamos el techo de nuestra Parroquia"
   Variante del diseño: tono verde · flores blancas · follaje en las esquinas. */

*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#FFFFFF;background:#0B1F2E;-webkit-font-smoothing:antialiased}
a{color:#FFFFFF}

/* ---------- Lienzo ---------- */
.page{
  container-type:inline-size;container-name:page;
  position:relative;min-height:100vh;width:100%;display:flex;flex-direction:column;
  color:#FFFFFF;overflow:hidden;background:#0B1F2E;
  /* flores blancas */
  --petal:#FFFFFF;--petal-edge:#D3D8DF;--petal-shade:rgba(176,186,200,.42);
  --leaf:#BFD889;--leaf-vein:#8DB356;--leaf-dark:#A3C86E;--stem:#8FB75A;
  --center:#F4C542;--center-dark:#E0A91E;
}
.photo{position:absolute;inset:-24px;background:#0A2A20 url("assets/fondo.webp") 0% 50%/cover no-repeat;filter:blur(3px) saturate(1.1)}
.tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,38,28,.6) 0%,rgba(6,38,28,.32) 32%,rgba(6,38,28,.36) 62%,rgba(6,38,28,.74) 100%)}

/* ---------- Flores de las esquinas ---------- */
.flor{position:absolute;z-index:1;height:auto;opacity:.97;filter:drop-shadow(0 8px 16px rgba(0,0,0,.32));pointer-events:none;animation:fade 1.6s ease both}
@keyframes fade{from{opacity:0}to{opacity:.97}}
.r-tl{top:-14px;left:-14px;width:clamp(180px,20cqw,300px);transform:scaleY(-1)}
.r-br{right:-14px;bottom:calc(clamp(180px,24vh,290px) - 14px);width:clamp(150px,16cqw,240px);transform:scaleX(-1);animation-delay:.2s}
.e-tr{top:-14px;right:-14px;width:clamp(150px,16cqw,250px);transform:rotate(180deg);animation-delay:.3s}
.e-bl{left:-14px;bottom:calc(clamp(180px,24vh,290px) - 14px);width:clamp(150px,16cqw,250px);animation-delay:.4s}

/* ---------- Animaciones de entrada ---------- */
.rise{animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
.d1{animation-delay:.1s}.d2{animation-delay:.25s}.d3{animation-delay:.4s}.d4{animation-delay:.55s}.d5{animation-delay:.7s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- Estructura ---------- */
.wrap{position:relative;z-index:2;width:100%;padding-left:clamp(20px,4cqw,64px);padding-right:clamp(20px,4cqw,64px)}
.grid{flex:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);row-gap:clamp(12px,2cqw,28px);padding-top:clamp(8px,2cqw,28px);padding-bottom:clamp(16px,2.4cqw,32px)}

/* ---------- Logo + botón ---------- */
.hero{grid-column:1 / -1;grid-row:1;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.4cqw,18px)}
.logo-juntos{width:clamp(304px,36.8cqw,544px);height:auto;display:block;filter:drop-shadow(0 10px 30px rgba(0,0,0,.45))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:clamp(44px,3.4cqw,56px);padding:0 clamp(18px,1.6cqw,26px);border-radius:999px;font-size:clamp(16px,1.2cqw,20px);font-weight:600;text-decoration:none;border:0;cursor:pointer;font-family:inherit;line-height:1;transition:background .2s,color .2s,transform .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-dona{position:relative;background:#FFFFFF;color:#123B22;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(12px,.95cqw,15px);min-height:clamp(36px,2.9cqw,44px);padding:0 clamp(14px,1.4cqw,22px) 0 clamp(16px,1.6cqw,24px);border:1.5px solid #E0A91E;box-shadow:0 8px 20px rgba(0,0,0,.32),0 0 0 3px rgba(224,169,30,.18);margin-top:clamp(0px,.4cqw,6px);transition:transform .2s ease,box-shadow .2s ease}
.btn-dona:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.4),0 0 0 4px rgba(224,169,30,.26);color:#123B22;background:#FFFFFF}
.btn-dona .arrow{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;border-radius:50%;background:linear-gradient(135deg,#F7DA6F,#E0A91E);color:#123B22;font-size:.9em;margin-left:.15em}

/* ---------- Contador de recaudo ---------- */
.sheet{container-type:inline-size;container-name:sheet;grid-column:1;grid-row:2;align-self:center;justify-self:center;width:min(100%,780px);min-width:0;margin:0;position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(16,64,38,.72),rgba(6,38,28,.66));backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5);border:1px solid rgba(240,196,74,.42);border-radius:32px;box-shadow:0 16px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);color:#FFFFFF}
.sheet::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:linear-gradient(90deg,#F7DA6F 0%,#E0A91E 55%,#8DB356 100%)}
.sheet::after{content:"";position:absolute;right:-40px;bottom:-60px;width:260px;height:120px;border-radius:50%;background:radial-gradient(closest-side,rgba(240,196,74,.22),rgba(240,196,74,0));pointer-events:none}
.live{display:flex;flex-direction:column;gap:2.6cqw;min-width:0;padding:5cqw 5.6cqw 5.6cqw}
.amount{font-size:clamp(44px,12.6cqw,180px);font-weight:800;letter-spacing:-.04em;line-height:1;color:#FFFFFF;display:inline-block;transform-origin:left center;white-space:nowrap;text-shadow:0 6px 30px rgba(0,0,0,.35)}
.amount.bump{animation:bump .9s ease}
@keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.03)}100%{transform:scale(1)}}
.bar-track{height:clamp(24px,5.2cqw,44px);background:rgba(255,255,255,.14);border:1px solid rgba(240,196,74,.25);border-radius:999px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.bar-fill{position:relative;height:100%;min-width:max-content;display:flex;align-items:center;justify-content:flex-end;padding:0 1.8cqw;background:linear-gradient(90deg,#F7DA6F,#E8B82E 60%,#D99A16);border-radius:999px;transition:width 1.3s cubic-bezier(.2,.8,.2,1);overflow:hidden;box-shadow:0 0 20px rgba(232,184,46,.45)}
.bar-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:shimmer 2.6s linear infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.bar-pct{position:relative;z-index:1;font-size:clamp(14px,2.8cqw,24px);font-weight:800;color:#06241A;letter-spacing:-.02em;white-space:nowrap}
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sub{font-size:clamp(18px,3.9cqw,30px);font-weight:500;color:rgba(255,255,255,.8);letter-spacing:-.01em}
.sub strong{color:#F7DA6F;font-weight:700}
.live-tag{display:inline-flex;align-items:center;gap:10px;font-size:clamp(15px,3cqw,22px);font-weight:700;color:#123B22;background:linear-gradient(90deg,#F7DA6F,#E0A91E);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:.9cqw 2.4cqw;letter-spacing:-.01em;align-self:flex-start}
.dot{width:11px;height:11px;border-radius:50%;background:#1B5E34;animation:blink 1.4s ease-in-out infinite;flex:none;box-shadow:0 0 0 4px rgba(27,94,52,.25)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- Marquesina de patrocinadores ---------- */
.strip{position:relative;z-index:2;background:rgba(8,30,24,.64);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);border-top:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex:none;height:clamp(180px,24vh,290px);padding:0;color:#FFFFFF}
.marquee{width:100%;height:100%;min-width:0;overflow:hidden;display:flex;align-items:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
/* La pista lleva la lista de logos dos veces; cada logo aporta su propio margen
   derecho para que -50% sea exactamente una vuelta y el bucle no dé saltos. */
.track{display:flex;align-items:center;height:100%;width:max-content;animation:marquee 160s linear infinite}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo{flex:none;width:clamp(116px,15vh,186px);height:clamp(116px,15vh,186px);margin-right:clamp(24px,2.6cqw,48px);object-fit:cover;border-radius:22px;display:block;background:#111111;box-shadow:0 10px 30px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.08)}
.logo.fit{object-fit:contain;padding:clamp(8px,1.2vh,14px)}

/* ---------- Aviso periódico "¿Cómo donar?" ---------- */
.aviso{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .9s ease}
.aviso.on{opacity:1;pointer-events:auto}
.aviso-bg{position:absolute;inset:0;background:rgba(4,22,15,.78);backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2)}
.aviso-in{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(32px,6vw,110px);width:min(100%,1260px);padding:0 clamp(20px,4vw,64px);transform:translateY(16px);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.aviso.on .aviso-in{transform:none}
.aviso-txt{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,2vw,26px);max-width:620px}
.aviso-logo{width:clamp(300px,34vw,520px);height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.5))}
.aviso-h{margin:0;font-size:clamp(34px,4vw,60px);font-weight:800;letter-spacing:-.03em;color:#FFFFFF;line-height:1}
.aviso-pasos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(10px,1.3vw,16px);font-size:clamp(18px,1.75vw,27px);font-weight:600;color:rgba(255,255,255,.92);letter-spacing:-.01em}
.aviso-pasos li{display:flex;align-items:center;gap:14px}
.aviso-pasos strong{color:#F7DA6F;font-weight:800}
.aviso-pasos .n{flex:none;width:1.6em;height:1.6em;border-radius:50%;background:linear-gradient(135deg,#F7DA6F,#E0A91E);color:#123B22;font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-size:.85em}
.aviso-qr{height:clamp(320px,62vh,620px);width:auto;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.5)}

/* ---------- Computador: una sola pantalla fija, sin scroll ---------- */
@media (min-width:981px) and (min-height:700px){
  html,body{height:100%;overflow:hidden}
  .page{height:100vh;min-height:0}
  /* En ventanas más bajas que 900 px el logo y el contador se encogen con la
     altura para que la barra de patrocinadores conserve su tamaño y su aire.
     A 1440×900 y 1920×1080 estos topes no actúan. */
  .logo-juntos{width:min(clamp(304px,36.8cqw,544px),calc(72vh - 118px))}
  .sheet{width:min(100%,780px,calc(106vh - 174px))}
}

/* ---------- Tablet: contenido apilado y desplazable ---------- */
@container page (max-width: 980px){
  .grid{grid-template-rows:auto auto auto;row-gap:28px;padding-bottom:32px}
  .hero{grid-column:1}
  .logo-juntos{width:min(86%,560px)}
  .sheet{align-self:start;width:min(100%,720px)}
  .e-bl,.r-br{display:none}
  .r-tl{width:clamp(150px,20cqw,220px)}
}
@media (max-width:980px){
  .aviso{overflow:auto;align-items:flex-start}
  .aviso-in{flex-direction:column;padding-top:40px;padding-bottom:40px}
  .aviso-txt{align-items:center;text-align:center}
  .aviso-pasos li{text-align:left}
  .aviso-qr{height:auto;width:min(100%,360px)}
}

/* ---------- Celular ---------- */
@container page (max-width: 640px){
  .grid{row-gap:20px;padding-top:24px;padding-bottom:28px}
  .logo-juntos{width:min(92%,420px)}
  .sheet{border-radius:24px;width:100%}
  .e-tr,.r-tl{width:150px}
  .logo{width:112px;height:112px}
}

@media (prefers-reduced-motion:reduce){
  .rise,.flor{animation:none}
}