/* Identidad TRAMA: paleta, tipografía Manrope, logo, interruptor de tema y fotos reales del NEA.
   Va después de vistoso.css. Los colores migrados están en tema-colores.css; acá van la paleta y los ajustes a mano.
   Paleta: petróleo #0E3D3A, turquesa #18B5A6, lima #C8FF64, gris claro #F4F6F5, gris oscuro #1F2937. */
@import url("/tema-colores.css");

:root{--petroleo:#0E3D3A;--turquesa:#18B5A6;--gris-claro:#F4F6F5;--gris-oscuro:#1F2937;
  --display:"Manrope",sans-serif;--body:"Manrope",sans-serif;
  --lime:#C8FF64;--glow:#C8FF64;
  --acento-txt:#0b7f74;--acento-borde:#18B5A6;--marca-trazo:#0E3D3A;--marca-texto:#0E3D3A}
:root[data-tema="oscuro"]{--acento-txt:#C8FF64;--acento-borde:#C8FF64;--marca-trazo:#F4F6F5;--marca-texto:#F4F6F5}
html.tema-cambiando *,html.tema-cambiando *::before,html.tema-cambiando *::after{transition:background-color .4s,color .4s,border-color .4s,box-shadow .4s!important}

/* ---------- logo ---------- */
.brand:not(.marca){visibility:hidden} /* el logo viejo de los HTML base no llega a verse: tema.js lo cambia al cargar */
/* solo el icono y el nombre, pegados (sin lema) */
.marca{display:inline-flex;align-items:center;gap:10px;letter-spacing:0;justify-self:start}
.marca-svg{width:42px;height:42px;flex:none;overflow:visible}
.marca-texto{display:flex;flex-direction:column;font:800 17px/.98 var(--display);letter-spacing:-.6px;color:var(--marca-texto)}
.marca-texto b{font-weight:800}
.site-footer .marca-svg{width:48px;height:48px}

/* ---------- interruptor soleado / nocturno ---------- */
.tema-switch{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--b-37413a);background:transparent;border-radius:999px;padding:6px 9px;color:inherit;font-size:14px;line-height:1;flex:none}
.tema-switch:hover{border-color:var(--turquesa)}
.tema-pista{position:relative;width:38px;height:22px;border-radius:999px;background:#d7e2e0;transition:background .3s}
.tema-bolita{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0e3d3a55;transition:transform .3s cubic-bezier(.3,.7,.3,1.3),background .3s}
.tema-switch[aria-checked="true"] .tema-pista{background:var(--turquesa)}
.tema-switch[aria-checked="true"] .tema-bolita{transform:translateX(16px);background:var(--lime)}
.tema-sol{color:#e3a008}.tema-luna{color:var(--turquesa)}
.tema-switch[aria-checked="true"] .tema-sol,.tema-switch[aria-checked="false"] .tema-luna{opacity:.4}

/* ---------- fotos reales del NEA (Wikimedia Commons; créditos en terminos.html) ---------- */
/* portada: detrás de la tarjeta, la foto del lugar de esa misma colecta (simple.js cambia --hero-foto y --hero-lugar
   por los de la primera destacada; Itatí es la que va primero en api/_destacadas.js) */
.hero-object .object-halo{inset:-24px -8px -24px 24%;width:auto;height:auto;border:0;border-radius:32px;animation:none;
  background:linear-gradient(200deg,#0e3d3a00 45%,#0e3d3ab3),var(--hero-foto,url(/img/itati.jpg)) center 40%/cover;
  box-shadow:0 30px 70px -24px #0e3d3a80,inset 0 0 0 1px #ffffff26}
.hero-object .object-halo::after{content:var(--hero-lugar,"Itatí, Corrientes");inset:14px 14px auto auto;border:0;border-radius:999px;
  padding:6px 12px;background:#0e3d3ab3;color:#e8f5f3;font:600 11px/1 var(--body);backdrop-filter:blur(4px)}
.hero-object .object-shell{width:min(340px,64%);margin-right:auto}
:root[data-tema="oscuro"] .hero-object .object-halo{box-shadow:0 30px 70px -24px #000c,inset 0 0 0 1px #ffffff1f}
.hero h1 em{color:var(--acento-titulo,#0f9488)}
:root[data-tema="oscuro"] .hero h1 em{--acento-titulo:var(--lime)}

/* franja "por qué Hedera": el río serpenteando entre la selva, igual en los dos temas */
.por-que{background:linear-gradient(90deg,#0b2523f0,#0e3d3ad9 55%,#0e3d3a8c),url(/img/rio-aereo.jpg) center 62%/cover;color:#d9ebe8;border:0;padding:40px 0}
.por-que-grid div{border-left-color:var(--lime)}
.por-que-grid div:hover{border-color:#fff}
.por-que-grid b{color:#fff}

/* cards del marketplace con foto: un poco más altas para que se luzca */
.nea-visual{height:150px}

/* ---------- celular ---------- */
/* las rayitas del botón de menú (movil.css) son un trazo, no un fondo: van del color del logo */
.menu-boton span{background:var(--marca-texto)}
.menu-boton{border-color:var(--b-4a5a51)}
@media(max-width:700px){
  .marca-svg{width:36px;height:36px}
  .marca-texto{font-size:15px}
  .site-header .marca{margin-right:auto;min-width:0}
  .tema-sol,.tema-luna{display:none}
  .tema-switch{padding:4px}
  body .hero-object,body.simple .hero-object{height:auto;min-height:420px;padding:36px 0}
  .hero-object .object-shell{width:min(330px,84%)}
  .hero-object .object-halo{inset:0 -6px 0 20%}
  /* la tarjeta de la portada, compacta: el título largo de una colecta real la hacía enorme */
  .object-face h2{font-size:26px;letter-spacing:-1px;margin:16px 0}
  .object-face{padding:18px}
  /* filtros del marketplace en una sola fila que se desliza */
  .nea-filtros{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding:4px 16px 8px 0}
  .nea-filtros::-webkit-scrollbar{display:none}
  .nea-filtros button{flex:none}
  /* leyendas y números que no entraban a lo ancho */
  .leyenda.tres{grid-template-columns:1fr}
  .kpis{gap:6px}
  .kpis div{padding:10px 4px}
  .kpis span{font-size:9px;letter-spacing:.3px}
  .kpi strong{font-size:28px}
  /* la topología se lee deslizando, en vez de achicarse hasta no verse */
  .topologia-caja{overflow-x:auto}
  #topologia{min-width:640px}
  /* el indicador en vivo de Hedera, más chico (abajo a la derecha está el botón de accesibilidad) */
  .ticker-red{padding:6px 10px;font-size:9px}
}

/* ---------- interfaz más limpia (pedido de Martín, 19/10): menos rótulos alrededor de lo importante ---------- */
/* portada: la tarjeta de la colecta muestra solo el título, lo recaudado y la meta */
.hero-object .object-top,.hero-object .object-label,.hero-object .object-bottom,.hero-object .floating-tag,
.hero .hero-note,.hero .hero-index,.hero .hero-grid{display:none}
/* tarjetas de colectas: la descripción en 3 líneas, sin fila de etiquetas */
.nea-card.aprobada .nea-body p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* ideas de la comunidad: plegadas detrás de un botón */
.ver-ideas{display:inline-flex;align-items:center;gap:6px;margin:6px 0 0;padding:12px 20px;border-radius:999px;border:1px solid currentColor;background:transparent;color:inherit;font:700 14px var(--display,inherit);cursor:pointer;opacity:.85;transition:opacity .2s}
.ver-ideas:hover{opacity:1}
.ideas{margin-top:22px}
@media(max-width:700px){
  /* en el celular la tarjeta de portada ocupaba una pantalla: las colectas aparecen enseguida abajo */
  body .hero-object,body.simple .hero-object{display:none}
  /* colecta: el botón fijo "Donar" ya cumple esa función */
  body[data-page="colecta"] .page-hero-actions .button-lime{display:none}
}

/* ---------- encabezado en una sola línea y parejo (pedido de Nicolás, 20/10) ---------- */
/* marca a la izquierda, menú centrado, y a la derecha Ingresar, el interruptor y Crear colecta, los tres de 40 px de alto.
   Ningún texto se parte en dos renglones: con la pantalla más angosta se achican los espacios y se acortan los rótulos. */
.site-header{gap:20px}
.site-header .desktop-nav{flex:1;justify-content:center;align-items:center;gap:clamp(18px,2.2vw,32px);white-space:nowrap}
.site-header .cuenta-chip,.site-header .cuenta-chip a{white-space:nowrap}
.cuenta-ingresar,.site-header .nav-action{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;font-size:13px;white-space:nowrap}
.site-header .nav-action:not([id]){background:var(--glow);border-color:transparent;color:var(--ink-fijo);font-weight:800}
.site-header .nav-action:not([id]) span{padding-left:8px;color:inherit}
.site-header .nav-action:not([id]):hover{background:var(--glow);box-shadow:0 0 20px var(--s-d8f16a77)}
.site-header .tema-switch{height:40px}
@media(max-width:1240px){
  .site-header .solo-escritorio,.site-header .tema-sol,.site-header .tema-luna{display:none}
}

/* ---------- colectas de la portada: grilla de 3 por fila en vez de carrusel, cards cortas ---------- */
.nea-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.nea-grid .nea-vacio{grid-column:1/-1}
@media(max-width:900px){.nea-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.nea-grid{grid-template-columns:1fr}}
.nea-visual{height:130px}
.nea-body{gap:8px;padding:16px}
.nea-card.aprobada .nea-body p{-webkit-line-clamp:2}
.nea-fuente{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "En qué se gastó" y "Doná", uno abajo del otro y del mismo ancho */
.nea-botones{grid-auto-flow:row;grid-template-columns:1fr;gap:8px}
.nea-botones .nea-accion{padding:9px}
/* toda la card lleva a la colecta: el link del título se estira por encima; la fuente y los botones quedan arriba de él */
.nea-card.aprobada{cursor:pointer}
.nea-card.aprobada h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.nea-card.aprobada .nea-fuente,.nea-card.aprobada .nea-botones{position:relative;z-index:2}

/* ---------- fondos de naturaleza del NEA en la portada (pedido de Nicolás, 20/10) ---------- */
/* Cada sección lleva una foto propia con un velo del color de fondo del tema encima, así el texto se lee igual en los
   dos temas. Fotos de Wikimedia Commons ya acreditadas en terminos.html. */
body[data-page="home"] .hero{background:
  linear-gradient(90deg,color-mix(in srgb,var(--cream) 94%,transparent) 0%,color-mix(in srgb,var(--cream) 86%,transparent) 48%,color-mix(in srgb,var(--cream) 62%,transparent) 100%),
  url(/img/esteros.jpg) center 55%/cover}
body[data-page="home"] .nea-section{background:
  linear-gradient(180deg,color-mix(in srgb,var(--f-171d1b) 82%,transparent),color-mix(in srgb,var(--f-171d1b) 93%,transparent) 55%),
  url(/img/cataratas.jpg) center 30%/cover}
/* "Cómo funciona" tiene el ancho del contenido: la foto se estira a todo el ancho por detrás */
html{overflow-x:clip}
body[data-page="home"] #como-funciona{position:relative;isolation:isolate}
body[data-page="home"] #como-funciona::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background:
  linear-gradient(180deg,color-mix(in srgb,var(--cream) 90%,transparent),color-mix(in srgb,var(--cream) 80%,transparent)),
  url(/img/garganta.jpg) center 40%/cover}
body[data-page="home"] .site-footer{background:
  linear-gradient(180deg,color-mix(in srgb,var(--f-171d1b) 92%,transparent),color-mix(in srgb,var(--f-171d1b) 78%,transparent)),
  url(/img/rio-aereo.jpg) center 70%/cover}