/* ════════════════════════════════════════════════════════════════
   T3AMPO STORE — páginas de texto y formulario
   (comprar, gracias, legal, pedidos, salud)

   La portada con la camiseta en 3D tiene su propio style.css. Esto
   es lo otro: páginas normales que se leen.

   Los colores, la tipografía, el espaciado, los materiales y las
   curvas salen de t3ampo.css, que se carga ANTES que esta hoja.
   Acá solo queda lo propio de estas páginas.

   Los nombres viejos (--tinta, --acento, --ok, --mal) siguen como
   alias porque los usan el HTML y compra.js.
   ════════════════════════════════════════════════════════════════ */

@layer sitio {


:root {
  --tinta:        var(--txt-alto);
  --tenue:        var(--txt-dim);
  --apagado:      var(--txt-tenue);
  --linea:        var(--borde);
  --linea-suave:  var(--borde-suave);
  --linea-fuerte: var(--borde-luz);
  --ok:           var(--verde);
  --mal:          var(--rojo);
  --ambar:        var(--naranja);
  --campo:        var(--capa-2);
  --nav-h: 3.5rem;
}

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── Barra ────────────────────────────────────────────────────────
   Es un material que flota: el contenido corre por debajo, no
   contra una franja opaca. En vez de la raya de 1px se usa un
   degradado corto donde el texto se mete abajo del vidrio — se
   nota menos y separa mejor.
   ──────────────────────────────────────────────────────────────── */

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--e5);
  background: rgba(20, 20, 25, 0.92);
  border-bottom: 1px solid var(--borde-suave);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-nav {
    background: var(--mat-fino);
    -webkit-backdrop-filter: var(--mat-fino-filtro);
    backdrop-filter: var(--mat-fino-filtro);
    border-bottom: 1px solid var(--borde);
  }
  .site-nav::after {
    display: none;
  }
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  text-decoration: none;
  color: inherit;
  transition: opacity var(--dur-toque) var(--salida);
}
.nav-brand:hover { opacity: 0.65; color: inherit; }
.nav-back { font-size: 1.05rem; line-height: 1; opacity: 0.55; }
.nav-logo { height: 2rem; width: auto; display: block; }

/* Sobre el vidrio el texto va más contrastado y un punto más
   pesado: el gris plano se pierde apenas pasa algo claro detrás. */
/* .nav-accion es un botón del sistema; lo único propio es que no
   se encoja cuando la barra es angosta. */
.nav-accion { flex-shrink: 0; }

/* ── Texto ────────────────────────────────────────────────────── */

.envoltura {
  max-width: 44rem;
  margin: 0 auto;
  padding: calc(var(--nav-h) + var(--e8)) var(--e5) var(--e10);
}
.envoltura.ancha { max-width: var(--ancho-pagina); }

/* h1/h2/h3 ya traen del sistema su tamaño, su tracking y su
   interlineado, cada uno el suyo. Acá solo se ajustan márgenes. */
h2 { margin-top: var(--e7); }
h3 { margin: var(--e6) 0 var(--e2); }

p, li { font-size: var(--t-texto); line-height: var(--lh-texto); }
ul { padding-left: 1.25rem; margin: 0 0 var(--e4); }
li { margin-bottom: 0.4rem; }

.tenue { color: var(--txt-dim); }

.fecha {
  color: var(--txt-dim);
  font-size: var(--t-micro);
  letter-spacing: var(--tk-micro);
  text-transform: uppercase;
  font-weight: 590;
  margin: 0 0 var(--e6);
}

/* Ficha de datos. El valor lleva cifras de ancho fijo para que los
   números queden en columna. */
.ficha {
  background: var(--capa-1);
  border: 1px solid var(--borde-suave);
  border-radius: var(--r-lg);
  padding: var(--e5);
  margin: var(--e6) 0;
  font-size: var(--t-chico);
  line-height: 1.9;
  box-shadow: var(--sombra-ficha);
}
.ficha div { color: var(--txt-dim); }
.ficha b {
  color: var(--txt-alto);
  font-weight: 590;
  font-variant-numeric: tabular-nums;
}

.pie {
  border-top: 1px solid var(--borde-suave);
  margin-top: var(--e9);
  padding-top: var(--e6);
  color: var(--txt-tenue);
  font-size: var(--t-chico);
}

/* Los botones los define t3ampo.css para los tres sitios. Acá no
   se declara ninguno: si hay que cambiarlos, se cambia allá. */

/* ── Avisos ───────────────────────────────────────────────────────
   Estado, terminado, advertencia, error. El color dice cuál es; el
   texto dice qué hacer.
   ──────────────────────────────────────────────────────────────── */

.aviso {
  border: 1px solid var(--borde-suave);
  background: var(--capa-1);
  border-radius: var(--r-md);
  padding: var(--e3) var(--e4);
  font-size: var(--t-chico);
  line-height: var(--lh-chico);
  margin: 0 0 var(--e5);
}
.aviso.malo  { border-color: rgba(250, 66, 56, 0.3);  background: var(--rojo-tenue); }
.aviso.bueno { border-color: rgba(50, 215, 75, 0.3);  background: var(--verde-tenue); }
.aviso.ojo   { border-color: rgba(255, 125, 26, 0.3); background: var(--naranja-tenue); }

@media (max-width: 600px) {
  .site-nav { padding: 0 var(--e4); }
  .nav-logo { height: 1.625rem; }
  .envoltura {
    padding-top: calc(var(--nav-h) + var(--e7));
    padding-bottom: var(--e8);
  }
}

}