/* SnapRush: la marca en un solo lugar. Todas las páginas de la web cargan este archivo (/marca.css) y solo
   agregan lo suyo. Colores, fuentes y vidrio son los de la app (app/www/index.html, tema claro).
   Las reglas de elementos van dentro de :where() (especificidad cero): así cualquier regla de la página gana. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap");

:root {
  /* marca */
  --azul:#0474ba;      /* SNAP, azul cancha */
  --naranja:#f17720;   /* RUSH y el botón de Guardar */
  --acento:#be560c;    /* naranja para TEXTO: el #f17720 sobre claro no llega a 4.5:1 */
  --texto:#0a2540;
  --tenue:#56627a;
  --fondo:#eef3fb;
  --papel:#fbfcfe;
  --linea:#e3e8f0;
  --rojo:#c62828;
  --bien:#1d7a46;
  --suave:#fff1e8;     /* naranja pálido: lo elegido o encendido */
  --suave-borde:#fdc09a;
  --tinta:#fff;        /* texto sobre el naranja */
  /* nombres viejos de algunas páginas, apuntando a lo mismo */
  --tarjeta:var(--papel);
  --borde:var(--linea);
  --r:16px;
  /* vidrio */
  --vidrio:rgba(255,255,255,.55);
  --filo:rgba(255,255,255,.85);
  --esmerilado:blur(22px) saturate(180%);
  --flota:0 10px 30px rgba(22,40,90,.10), inset 0 1px 0 rgba(255,255,255,.9);
  --sombra:0 4px 14px rgba(22,40,90,.08);
  /* letras: títulos con la voz de la palabra SNAPRUSH; apoyo en Montserrat */
  --letra:-apple-system, system-ui, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --letra-apoyo:Montserrat, system-ui, sans-serif;
}

:where(*, *::before, *::after) { box-sizing:border-box; }
/* el color va en html: en body taparía las manchas */
:where(html) { background:var(--fondo); }
:where(body) { margin:0; color:var(--texto); font:16px/1.55 var(--letra); -webkit-font-smoothing:antialiased; }
/* dos manchas detrás de todo: sin color atrás el vidrio no tiene qué desenfocar */
body::before { content:""; position:fixed; inset:-20%; z-index:-1; pointer-events:none;
  background:radial-gradient(40% 32% at 12% 22%, rgba(4,116,186,.20), transparent 70%),
             radial-gradient(40% 32% at 92% 70%, rgba(241,119,32,.16), transparent 70%);
  animation:deriva 26s ease-in-out infinite alternate; }
@keyframes deriva { to { transform:translate(4%,-3%) rotate(8deg) scale(1.05); } }
/* la red de particulas.js vive entre las manchas y el vidrio: los paneles la desenfocan */
#red { position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
@media (prefers-reduced-motion:reduce) { body::before { animation-duration:80s; } }  /* atenuar, no apagar */
:where(img) { display:block; max-width:100%; }
:where(a) { color:var(--acento); }
:focus-visible { outline:2px solid var(--naranja); outline-offset:3px; }

/* títulos: negra, itálica, mayúsculas */
:where(h1, h2, .titulo) { font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:-.035em; line-height:1; }
/* textos de apoyo: Montserrat, callada */
:where(.sub, .entrada, .nota, .fecha, .apoyo) { font-family:var(--letra-apoyo); font-weight:400; color:var(--tenue); }

/* el logo: <a class="marca"><img src="/icono.svg" alt=""><span class="palabra">Snap<em>Rush</em></span></a> */
:where(.marca) { display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
:where(.marca img) { width:32px; height:32px; }
:where(.palabra) { font-family:var(--letra); font-size:1.15rem; font-weight:900; font-style:italic; letter-spacing:-.03em; text-transform:uppercase; color:var(--azul); }
.palabra em { font-style:inherit; color:var(--naranja); }

/* la barra de arriba: pastilla de vidrio flotante, como el dock de la app. Se queda pegada arriba al bajar */
:where(.barra) { position:sticky; top:max(14px, env(safe-area-inset-top)); z-index:20; margin:14px 0 0;
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 8px 8px 16px; border-radius:999px;
  background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.85); box-shadow:0 10px 30px rgba(22,40,90,.16), inset 0 1px 0 #fff;
  -webkit-backdrop-filter:var(--esmerilado); backdrop-filter:var(--esmerilado); }
:where(.barra .marca img) { width:30px; height:30px; }
:where(.barra a.enlace) { padding:10px 18px; border-radius:999px; background:#fff; color:var(--texto); text-decoration:none; font-weight:700;
  font-size:.92rem; border:1px solid var(--linea); box-shadow:0 4px 14px rgba(22,40,90,.08); }

/* tarjeta de vidrio */
:where(.vidrio) { background:var(--vidrio); border:1px solid var(--filo); border-radius:28px; box-shadow:var(--flota);
  -webkit-backdrop-filter:var(--esmerilado); backdrop-filter:var(--esmerilado); }
/* tarjeta lisa: blanca, sin esmerilado (donde hay mucho encima, como en los paneles) */
:where(.lisa) { background:var(--papel); border:1px solid var(--linea); border-radius:20px; box-shadow:var(--sombra); }

/* botón: pastilla naranja con el brillo del botón Guardar */
:where(.boton) { display:inline-block; padding:14px 24px; border-radius:999px; background:var(--naranja); border:0; color:var(--tinta);
  font:inherit; font-weight:800; text-align:center; text-decoration:none; cursor:pointer;
  box-shadow:0 8px 22px rgba(241,119,32,.40), inset 0 1px 0 rgba(255,255,255,.35); transition:transform .15s ease, box-shadow .2s ease; }
.boton:hover { box-shadow:0 0 0 4px rgba(241,119,32,.18), 0 10px 26px rgba(241,119,32,.45); }
.boton:active { transform:scale(.97); }
.boton:disabled { opacity:.5; cursor:default; }
/* secundario: blanco con filo */
.boton.gris { background:#fff; color:var(--texto); border:1px solid var(--linea); box-shadow:var(--sombra); }
.boton.gris:hover { border-color:var(--rojo); color:var(--rojo); box-shadow:var(--sombra); }
/* sobre foto o video oscuro */
.boton.linea { background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%); }

/* campos: blancos y redondos, como el buscador de clubes de la app */
:where(input:not([type=checkbox], [type=radio], [type=range], [type=color]), select, textarea) {
  width:100%; padding:14px 18px; border:1px solid var(--linea); border-radius:16px; background:var(--papel); color:var(--texto);
  font:inherit; box-shadow:var(--sombra), inset 0 1px 0 #fff; transition:border-color .2s, box-shadow .2s; }
:where(input, select, textarea):focus { outline:0; border-color:var(--naranja); box-shadow:0 0 0 4px rgba(241,119,32,.16); }
:where(input, textarea)::placeholder { color:var(--tenue); opacity:.6; }
:where(input[type=checkbox], input[type=radio]) { accent-color:var(--naranja); }

/* la insignia oficial de Apple, sin tocarle nada */
:where(.tienda) { display:inline-block; border-radius:10px; line-height:0; transition:transform .15s ease; }
.tienda:active { transform:scale(.97); }
:where(.tienda img) { height:54px; width:auto; }