:root{
  /* gentler, warmer background palette for better readability and harmony */
  --bg-top:#f6fff9;    /* very light mint */
  --bg-mid:#f0fbf6;    /* soft green-cream mid tone */
  --bg-btm:#ecf7f3;    /* subtle warm base */
  --card: #ffffff;
  --muted: #eef7f1;    /* lighter card-muted */
  --muted-text: #516455; /* slightly deeper, readable muted text */
  --accent: #1f7a3a;
  --accent-2: #2ca64b;
  --shadow: rgba(20,20,20,0.06);
  --radius: 14px;
  font-family: "Poppins", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* base adjustments: larger, responsive type that adapts to screen size */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:#082012;
  -webkit-tap-highlight-color: transparent;
  display:block;
  padding:12px;
  /* use clamp to scale base font between small and larger screens */
  font-size: clamp(16px, 3.5vw, 18px);

  background: #d3d3d3;
  background-attachment: fixed;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* subtle diagonal stripe accent */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.00) 30%),
    radial-gradient(600px 200px at 20% 80%, rgba(255,255,255,0.02), transparent 10%);
  pointer-events:none;
  mix-blend-mode: overlay;
}

.app{
  width:100%;
  max-width:520px; /* allow a bit more horizontal room for larger components */
  margin:0 auto;
  background:transparent;
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:stretch;
  min-height:100vh;
  justify-content:flex-start;
  padding-block:22px;
  padding-inline:14px;
}

/* Header / brand */
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  background:#ffffff;
  border-radius: var(--radius);
  box-shadow: 0 8px 22px rgba(6,10,6,0.12);
  border:1px solid rgba(6,10,6,0.06);
}
.logo{
  width:76px;
  height:76px;
  object-fit:contain;
  border-radius:10px;
  background:rgba(255,255,255,0.95);
  padding:8px;
}

/* Make the top login button static inside the header and align it to the right
   (no fixed positioning so it won't overlap content when scrolling) */
#openLoginTop{
  position:static;
  margin-left:auto;
  min-width:auto;
  padding:10px 12px;
  z-index:10;
  align-self:flex-start;
}
.brand-text h1{
  margin:0;
  /* scale title size for different screens */
  font-size: clamp(18px, 4.2vw, 22px);
  letter-spacing:0.2px;
  color: #042b1b;
  font-weight:800;
}
.tag{
  margin:6px 0 0 0;
  font-size: clamp(13px, 2.5vw, 15px);
  color:var(--muted-text);
}

/* Welcome */
.welcome{
  padding:18px;
  background:#ffffff;
  border-radius:16px;
  border:1px solid rgba(6,10,6,0.06);
  box-shadow:
    0 22px 44px rgba(4,10,6,0.22),
    0 6px 12px rgba(6,10,6,0.08);
  font-size: clamp(14px, 3.4vw, 16px);
  line-height:1.45;
}

/* Devices grid — responsive 2-column on mobile, 4-column on desktop */
.devices{
  padding:14px;
  background: #ffffff;
  border-radius:16px;
  border:1px solid rgba(6,10,6,0.06);
  box-shadow:
    0 16px 34px rgba(4,10,6,0.18),
    0 6px 12px rgba(6,10,6,0.06);
}
.devices h3{
  margin:6px 8px 10px;
  font-size: clamp(15px, 3.8vw, 17px);
  font-weight:700;
}
.device-list{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
  padding:8px;
}
@media (min-width:480px){
  .device-list{
    grid-template-columns: repeat(4, 1fr);
  }
}
.device{
  background:var(--card);
  border:1px solid rgba(6,12,8,0.06);
  margin:0;
  border-radius:14px;
  padding:16px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  min-width:0;
  cursor:pointer;
  box-shadow: 0 8px 18px rgba(6,10,6,0.06);
  transition:transform .12s ease, box-shadow .12s ease;
  touch-action:manipulation;
  height: clamp(110px, 22vh, 140px);
}
.device:active{transform:translateY(2px)}
.icon{
  font-size: clamp(32px, 8vw, 44px);
  line-height:1;
}
.name{
  font-weight:700;
  font-size: clamp(14px, 4vw, 16px);
  color:#0a3f2a;
  text-align:center;
}

/* CTA */
.cta{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  padding:8px 0;
}
/* primary button (donate) */
.primary{
  background: var(--accent);
  color:white;
  border:none;
  padding:14px 18px;
  border-radius:14px;
  font-weight:700;
  min-width:150px;
  box-shadow:0 10px 26px rgba(0,0,0,0.12);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size: clamp(14px, 3.6vw, 16px);
}

/* secondary button (request) */
.secondary{
  background: var(--accent);
  color:white;
  border:none;
  padding:14px 18px;
  border-radius:14px;
  font-weight:700;
  min-width:150px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 18px rgba(6,10,6,0.08);
  font-size: clamp(14px, 3.6vw, 16px);
}

/* Beneficiaries section */
.beneficiaries{
  padding:12px;
  background: #ffffff;
  border-radius:16px;
  border:1px solid rgba(6,10,6,0.06);
  box-shadow:
    0 12px 30px rgba(4,10,6,0.12),
    0 6px 12px rgba(6,10,6,0.06);
}
.beneficiaries h3{
  margin:6px 8px 12px;
  font-size: clamp(15px, 3.8vw, 17px);
  font-weight:700;
  color:#042b1b;
}
.benef-list{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  padding:6px;
}
.benef-card{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background: linear-gradient(180deg, #ffffff, #fbfffb);
  border-radius:12px;
  padding:12px;
  border:1px solid rgba(6,12,8,0.06);
  box-shadow: 0 8px 20px rgba(6,10,6,0.06);
}
.benef-icon{
  flex:0 0 44px;
  height:44px;
  border-radius:10px;
  background: var(--accent-2);
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:20px;
  box-shadow: 0 8px 18px rgba(44,166,75,0.12);
}
.benef-title{
  font-weight:800;
  color:#0a3f2a;
  font-size:14px;
  margin-bottom:6px;
}
.benef-desc{
  font-size:13px;
  color:var(--muted-text);
  line-height:1.35;
}

/* Footer */
.foot{
  text-align:center;
  color:var(--muted-text);
  font-size:13px;
  padding-top:8px;
}
.foot small{
  font-weight:800;
  color:#042b1b;
  font-size:14px;
  letter-spacing:0.2px;
}

/* Process visual cards */
.process {
  padding:10px;
}
.process h3 {
  margin:6px 8px 12px;
  font-size: clamp(15px, 3.8vw, 17px);
  font-weight:700;
  color:#042b1b;

  /* White boxed label for the heading */
  background: #ffffff;
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(6,10,6,0.06);
  box-shadow: 0 10px 22px rgba(6,10,6,0.08);
}
.process-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:10px;
}

/* Each step as a card */
.step-card{
  display:flex;
  align-items:center;
  gap:12px;
  background: linear-gradient(180deg, #ffffff, #fbfffb);
  border-radius:12px;
  padding:12px;
  border:1px solid rgba(6,12,8,0.06);
  box-shadow: 0 10px 26px rgba(6,10,6,0.08);
  min-height:84px;
}
.step-badge{
  flex:0 0 44px;
  height:44px;
  border-radius:10px;
  background: var(--accent-2);
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:18px;
  box-shadow: 0 8px 18px rgba(44,166,75,0.18);
}
.step-body{
  flex:1;
  min-width:0;
}
.step-title{
  font-weight:800;
  color:#0a3f2a;
  font-size:14px;
  margin-bottom:6px;
}
.step-desc{
  font-size:13px;
  color:var(--muted-text);
  line-height:1.35;
}

/* Icon aligned to right on larger cards */
.step-icon{
  font-size:26px;
  opacity:0.95;
  margin-left:6px;
  flex:0 0 34px;
  text-align:center;
}

/* Make badges and layout more compact on small heights */
@media (max-height:700px){
  .step-card{padding:10px;min-height:72px}
  .step-badge{width:40px;height:40px;font-size:16px}
  .step-icon{font-size:22px}
}

/* Modal */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:linear-gradient(rgba(4,10,6,0.35), rgba(4,10,6,0.35));
  z-index:40;
}
.modal[aria-hidden="false"]{display:flex}
.modal-card{
  width:94%;
  max-width:540px;
  background:var(--card);
  padding:20px;
  border-radius:16px;
  box-shadow:0 22px 48px rgba(6,10,6,0.4);
  position:relative;
}
.close{
  position:absolute;
  right:12px;
  top:10px;
  background:transparent;
  border:none;
  font-size:22px;
  color:var(--muted-text);
  padding:6px;
}

/* Keep everything readable on short viewports but allow components to scale */
@media (max-height:700px){
  .device{height: clamp(80px, 18vh, 110px)}
  .logo{width:68px;height:68px}
  .welcome{font-size:clamp(13px,3.6vw,15px)}
}

/* Stats: prominent circular counter */
.stats{
  padding:14px;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* white boxed label for the stats heading to match visual language */
.stats h3{
  background: #ffffff;
  display: inline-block;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(6,10,6,0.06);
  box-shadow: 0 10px 22px rgba(6,10,6,0.08);
  color: #042b1b;
  font-weight:800;
  margin: 0 0 10px 0;
  font-size: clamp(14px, 3.6vw, 16px);
}

.stat-card{
  background: linear-gradient(180deg,#ffffff,#fbfffb);
  border-radius:999px;
  padding:18px;
  width:160px;
  height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  border:1px solid rgba(6,12,8,0.06);
  box-shadow: 0 18px 40px rgba(6,10,6,0.12);
  position:relative;
  overflow:visible;
}
/* decorative ring */
.stat-card::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(44,166,75,0.08), rgba(31,122,58,0.06));
  filter: blur(8px);
  z-index:0;
}
/* big number */
.stat-number{
  z-index:1;
  font-weight:900;
  font-size: clamp(28px, 8vw, 44px);
  color:#0a3f2a;
  line-height:1;
  letter-spacing:0.6px;
  transition:transform .3s ease;
  display:block;
}
/* label under number */
.stat-label{
  z-index:1;
  margin-top:6px;
  font-size:13px;
  color:var(--muted-text);
  font-weight:800;
  text-align:center;
}

/* small pulse animation to draw attention */
@keyframes stat-pulse {
  0% { transform: scale(1); opacity:0.98; }
  50% { transform: scale(1.02); opacity:1; }
  100% { transform: scale(1); opacity:0.98; }
}
.stat-card {
  animation: stat-pulse 6s ease-in-out infinite;
}

/* make the stat smaller on narrow heights */
@media (max-height:700px){
  .stat-card{ width:130px; height:130px; padding:12px; }
  .stat-number{ font-size: clamp(22px,6.8vw,36px); }
}

/* Quality section: visually prominent card under stats */
.quality{
  padding:12px;
}
.quality h3{
  background:#ffffff;
  display:inline-block;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(6,10,6,0.06);
  box-shadow: 0 10px 22px rgba(6,10,6,0.08);
  color:#042b1b;
  font-weight:800;
  margin:0 0 10px 0;
  font-size: clamp(14px, 3.6vw, 16px);
}
.quality-card{
  background: linear-gradient(180deg, #ffffff, #f8fffa);
  border-radius:14px;
  padding:14px;
  border:1px solid rgba(6,12,8,0.06);
  box-shadow: 0 18px 40px rgba(6,10,6,0.08);
}
.quality-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.quality-lead{
  font-weight:800;
  color:#0a3f2a;
  font-size:14px;
  margin:0;
}
.quality-text{
  margin:0;
  color:var(--muted-text);
  line-height:1.45;
  font-size:13px;
  background: linear-gradient(90deg, rgba(15,179,156,0.02), transparent);
  padding:8px;
  border-radius:8px;
  border:1px dashed rgba(6,10,6,0.04);
}

/* Equipos para donar section */
.to-donate{
  padding:12px;
}
.to-donate h3{
  background:#ffffff;
  display:inline-block;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(6,10,6,0.06);
  box-shadow: 0 10px 22px rgba(6,10,6,0.08);
  color:#042b1b;
  font-weight:800;
  margin:0 0 10px 0;
  font-size: clamp(14px, 3.6vw, 16px);
}
.donate-lead{
  margin:8px 0 12px;
  color:var(--muted-text);
  font-size:13px;
}

/* Four square cards with image area
   Updated to match .sale-grid breakpoints and sizing so donate cards behave like sale cards */
.donate-grid{
  display:grid;
  gap:12px;
  /* center the grid and make columns responsive so cards keep equal proportions */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  justify-content:center;
  justify-items:center;
  align-items:start;
}
@media(min-width:720px){
  .donate-grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media(min-width:1100px){
  .donate-grid{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
.donate-card{
  background: linear-gradient(180deg, #ffffff, #fbfffb);
  border-radius:14px;
  overflow:visible;
  border:1px solid rgba(6,12,8,0.06);
  box-shadow: 0 12px 30px rgba(4,10,6,0.12);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:12px;
  gap:8px;
  /* enforce consistent card proportions while allowing scaling */
  width:100%;
  max-width:360px;
  aspect-ratio: 3 / 4;
  min-height:0;
}

/* placeholder image area at top (you can replace with an <img> later)
   Use aspect-ratio so uploaded background images adapt proportionally to screen size */
.donate-image{
  border-radius:10px;
  background:linear-gradient(180deg, rgba(44,166,75,0.06), rgba(31,122,58,0.03));
  width:100%;
  aspect-ratio: 4 / 3;
  display:block;
  box-shadow: inset 0 2px 6px rgba(6,10,6,0.03);
  background-position:center;
  background-size:cover;
  flex:0 0 auto;
  max-height:40vh;
  height:auto;
}
@media (max-width:420px){
  .donate-image{ max-height:28vh; aspect-ratio: 16/10; }
}
@media (min-width:720px){
  .donate-card{ aspect-ratio: 3 / 4; }
  .donate-image{ aspect-ratio: 4 / 3; }
}

/* info area sits below image and sticks to bottom */
.donate-info{
  display:flex;
  flex-direction:column;
  gap:8px;
  justify-content:space-between;
  padding-top:8px;
  min-height:0;
}
.donate-title{
  font-weight:800;
  color:#0a3f2a;
  font-size:14px;
}
.donate-meta{
  font-size:13px;
  color:var(--muted-text);
  line-height:1.35;
  margin-top:6px;
}

/* actions aligned to right in their own row */
.donate-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:6px;
}
.primary.small{
  padding:8px 10px;
  min-width:90px;
  font-size:13px;
  border-radius:10px;
}

/* Sale section styles */
.for-sale{
  padding:12px;
}
.for-sale h3{
  background:#ffffff;
  display:inline-block;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(6,10,6,0.06);
  box-shadow: 0 10px 22px rgba(6,10,6,0.08);
  color:#042b1b;
  font-weight:800;
  margin:0 0 10px 0;
  font-size: clamp(14px, 3.6vw, 16px);
}
.sale-lead{
  margin:8px 0 12px;
  color:var(--muted-text);
  font-size:13px;
}

/* grid similar to donate but labeled "sale" */
.sale-grid{
  display:grid;
  gap:12px;
  /* center and make columns responsive so all sale cards share equal visual weight */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  justify-content:center;
  justify-items:center;
  align-items:start;
}
@media(min-width:720px){
  .sale-grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media(min-width:1100px){
  .sale-grid{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
.sale-card{
  background: linear-gradient(180deg, #ffffff, #fbfffb);
  border-radius:14px;
  overflow:visible;
  border:1px solid rgba(6,12,8,0.06);
  box-shadow: 0 12px 30px rgba(4,10,6,0.12);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:12px;
  gap:8px;
  width:100%;
  max-width:360px;
  /* consistent card proportion that scales across devices */
  aspect-ratio: 3 / 4;
  min-height:0;
}
.sale-image{
  border-radius:10px;
  background:linear-gradient(180deg, rgba(31,122,58,0.06), rgba(15,179,156,0.03));
  width:100%;
  aspect-ratio: 4 / 3;
  display:block;
  box-shadow: inset 0 2px 6px rgba(6,10,6,0.03);
  background-position:center;
  background-size:cover;
  flex:0 0 auto;
  margin-bottom:6px;
  max-height:40vh;
  height:auto;
}
@media (max-width:420px){
  .sale-image{ max-height:28vh; aspect-ratio: 16/10; }
}
@media (min-width:720px){
  .sale-card{ aspect-ratio: 3 / 4; }
  .sale-image{ aspect-ratio: 4 / 3; }
}
.sale-info{
  display:flex;
  flex-direction:column;
  gap:8px;
  justify-content:space-between;
  padding-top:4px;
  flex:1 1 auto; /* allow content to size naturally without stretching card */
  min-height:0;
}
.sale-title{
  font-weight:800;
  color:#0a3f2a;
  font-size:14px;
}
.sale-meta{
  font-size:13px;
  color:var(--muted-text);
  line-height:1.35;
  margin-top:6px;
  overflow-wrap:break-word;
  white-space: normal; /* ensure text wraps naturally */
  overflow: visible;   /* allow full text to show */
}
.sale-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:6px;
}
.price{
  font-weight:900;
  color:#0a3f2a;
  background: linear-gradient(90deg, rgba(44,166,75,0.06), rgba(31,122,58,0.03));
  padding:8px 10px;
  border-radius:10px;
  font-size:14px;
  min-width:72px;
  text-align:center;
}

/* Posts / Publicaciones section */
.posts{
  padding:12px;
}
.posts h3{
  background:#ffffff;
  display:inline-block;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(6,10,6,0.06);
  box-shadow: 0 10px 22px rgba(6,10,6,0.08);
  color:#042b1b;
  font-weight:800;
  margin:0 0 10px 0;
  font-size: clamp(14px, 3.6vw, 16px);
}
.posts-lead{
  margin:8px 0 12px;
  color:var(--muted-text);
  font-size:13px;
}

/* simple card grid for posts */
.posts-grid{
  display:grid;
  gap:12px;
  /* center the grid and keep cards a comfortable width on all viewports */
  grid-template-columns: repeat(auto-fit, minmax(220px, 320px));
  justify-content:center;
  justify-items:center;
  padding-inline-start: 0;
}
@media(min-width:520px){
  /* on wider screens keep the same centered layout but allow more columns */
  .posts-grid{ grid-template-columns: repeat(auto-fit, minmax(220px, 340px)); }
}
/* Facebook-like post card */
.post-card{
  background: linear-gradient(180deg, #ffffff, #fbfffb);
  border-radius:12px;
  /* allow children to expand so full content is visible */
  overflow:visible;
  border:1px solid rgba(6,12,8,0.06);
  box-shadow: 0 12px 40px rgba(4,10,6,0.12);
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  align-items:stretch;
  min-height: auto;
}

/* header with avatar + author/time */
.post-header{
  display:flex;
  gap:10px;
  align-items:center;
  padding:6px 4px;
}
.post-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  display:block;
  flex:0 0 44px;
  box-shadow: inset 0 2px 6px rgba(6,10,6,0.03);
  object-fit:cover;
}
.post-meta-row{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.post-author{
  font-weight:800;
  color:#0a3f2a;
  font-size:14px;
}
.post-time{
  font-size:12px;
  color:var(--muted-text);
}

/* content area */
.post-content{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:0 4px;
  /* allow content area to grow naturally so text isn't truncated */
  flex: 1 1 auto;
}
.post-title{
  font-weight:800;
  color:#0a3f2a;
  font-size:15px;
}
.post-text{
  font-size:14px;
  color:var(--muted-text);
  line-height:1.36;
}

/* full-width image block for post (keeps visual placeholder from previous design) */
.post-image{
  width:100%;
  /* use an aspect ratio so images are responsive and don't force overflow;
     also constrain max height on very tall screens while allowing shrink on small screens */
  aspect-ratio: 16 / 9;
  min-height: 120px;
  max-height: 40vh;
  height: auto;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(44,166,75,0.06), rgba(31,122,58,0.03));
  background-position:center;
  background-size:cover;
  box-shadow: inset 0 2px 6px rgba(6,10,6,0.03);
  flex: 0 0 auto;
}

/* actions row: like/comment/share and a CTA */
.post-actions{
  display:flex;
  gap:8px;
  padding:6px 4px;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid rgba(6,10,6,0.04);
  margin-top:6px;
}
/* left side: reaction buttons */
.post-actions .action-btn{
  background:transparent;
  border:none;
  color:#0a3f2a;
  padding:8px 10px;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
}
.post-actions .action-btn:hover{
  background: rgba(6,10,6,0.03);
}

/* right-side CTA uses existing .primary.small styling */
.post-actions .primary.small{
  margin-left:auto;
}

/* responsive adjustments */
@media (max-width:420px){
  .post-image{ height:120px; }
  .post-title{ font-size:14px; }
  .post-text{ font-size:13px; }
}