/* ═══════════════════════════════════════════
   LAYOUT — Grids, contenedores, responsive
   TFAR Web · tfarafaela.ar
═══════════════════════════════════════════ */

/* ── HISTORIA ── */
.hw { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem,6vw,6rem); align-items: center; }

/* ── DISCIPLINAS ── */
.dgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; }
.dgrid-sep {
  position: absolute; top: 0; left: 50%; width: 1px; height: 100%;
  background: linear-gradient(to bottom, transparent, var(--bg-3), transparent);
  pointer-events: none;
}

/* ── GALERÍA ── */
.mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 280px 210px; gap: 2px; }
.reel { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.reel::-webkit-scrollbar { display: none; }

/* ── CIFRAS ── */
.cinn { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }

/* ── SUMATE ── */
.sw { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(3rem,6vw,6rem); align-items: center; }

/* ── CONTACTO ── */
.cw { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(3rem,6vw,6rem); align-items: start; }
.fr { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── FOOTER ── */
.fi   { max-width: var(--max); margin: 0 auto; }
.ftop {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem;
  padding-bottom: 2.5rem; border-bottom: 1px solid rgba(200,168,75,.12); margin-bottom: 2rem;
}
.fbot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }

/* ── HERO STATS BAR ── */
.hbar {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(10,18,32,.55); backdrop-filter: blur(16px);
  border-top: 1px solid rgba(200,168,75,.2);
  display: grid; grid-template-columns: repeat(4, 1fr);
  opacity: 0; animation: fup .7s 1.2s forwards;
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 960px) {
  .nlinks, .ncta { display: none; }
  .nburg         { display: flex; }
  /* Reducir padding de secciones en tablet/mobile */
  :root { --pad: clamp(1rem, 4vw, 2.5rem); }

  .hw  { grid-template-columns: 1fr; }
  .hv  { display: none; }

  .dgrid { grid-template-columns: 1fr 1fr; }
  .rw    { grid-template-columns: 1fr; }

  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px 200px; }
  .mi-lg  { grid-row: 1/2; grid-column: 1/3; }

  .cinn { grid-template-columns: 1fr 1fr; }
  .cif  { border-right: none; border-bottom: 1px solid rgba(26,46,74,.12); }
  .cif:nth-child(odd)       { border-right: 1px solid rgba(26,46,74,.12); }
  .cif:nth-last-child(-n+2) { border-bottom: none; }

  .sw { grid-template-columns: 1fr; }
  .cw { grid-template-columns: 1fr; }

  .ftop { grid-template-columns: 1fr 1fr; }
  .hbar { grid-template-columns: 1fr 1fr; }

  .hbadges { display: none; }

  .tr { grid-template-columns: 60px 1fr 1fr; }
  .tl2, .te { display: none; }

  .fr { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  html  { font-size: 15px; } /* base más pequeña en celular */
  .dgrid { grid-template-columns: 1fr; }
  .ftop  { grid-template-columns: 1fr; }
  .fbot { flex-direction: column; text-align: center; }
  .fley { text-align: center; }
  .tr   { grid-template-columns: 55px 1fr; padding: 1rem; }
  .td   { display: none; }
  /* Nav: ocultar texto del logo en pantallas muy chicas */
  .nlogo-t { display: none; }
  /* Hero: ajustar stats bar */
  .hbar { grid-template-columns: 1fr 1fr; }
  .hst  { padding: .8rem 1rem; }
}