/* ============================================================
   LA CALLE DE HIELO
   ============================================================
   Los mismos colores que la app, y por el mismo motivo: para quien
   tiene iPhone LA WEB ES LA APP, y si no se parecen da la sensación de
   ser dos cosas distintas.

   Blanco de hielo, azul y rojo no son una elección: son los colores de
   la casa de una pista de curling de verdad. */
:root{
  --fondo:#080C12; --panel:#101720;
  --hielo-alto:#EAF4FA; --hielo-bajo:#BCD4E5;
  --marino:#14336E; --azul:#1B50A8; --rojo:#CE2B2B;
  --tinta:#14336E; --tinta-floja:rgba(20,51,110,.86);
  --tinta-debil:rgba(20,51,110,.66);
  --linea:rgba(27,80,168,.14);
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--fondo); color:var(--tinta);
  font-family:"Segoe UI",Roboto,system-ui,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* LA CALLE, VERTICAL Y DE ARRIBA ABAJO, no una franja de cabecera.
   Va fija: al bajar, la pista se queda quieta como se queda el hielo
   mientras tú avanzas por él.

   Los lados se difuminan con una máscara, no con un borde: si el corte
   fuera una línea, parecería un error de dibujo. Donde no haya máscara
   —navegadores viejos— el hielo llega a los lados y tampoco pasa
   nada. */
body::before{
  content:"";position:fixed;z-index:-2;
  top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:min(100%,660px);
  background:linear-gradient(180deg,
    var(--hielo-alto) 0%, var(--hielo-alto) 40%, var(--hielo-bajo) 100%);
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0%, #000 17%, #000 83%, transparent 100%);
  mask-image:linear-gradient(90deg,
    transparent 0%, #000 17%, #000 83%, transparent 100%);
}
/* Las líneas de la pista: los dos bordes de la calle y la central. */
body::after{
  content:"";position:fixed;z-index:-1;pointer-events:none;
  top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:min(100%,660px);
  background:
    linear-gradient(90deg,transparent calc(19% - 1px),
      var(--linea) calc(19% - 1px),var(--linea) 19%,transparent 19%),
    linear-gradient(90deg,transparent calc(81% - 1px),
      var(--linea) calc(81% - 1px),var(--linea) 81%,transparent 81%),
    linear-gradient(90deg,transparent calc(50% - 1px),
      rgba(27,80,168,.10) calc(50% - 1px),
      rgba(27,80,168,.10) 50%,transparent 50%);
}

.caja{max-width:620px;margin:0 auto;padding:34px 24px 60px}

/* El logo, arriba del todo: es la casa de la pista. */
.logo{display:block;width:min(260px,76%);margin:0 auto 8px}
.lema{
  text-align:center;color:var(--tinta-floja);
  font-size:15px;font-weight:500;margin:0 0 26px;
}

h1{
  font-size:clamp(25px,6vw,34px);font-weight:700;letter-spacing:-.01em;
  color:var(--marino);text-align:center;line-height:1.15;
}
h2{
  font-size:12.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--azul);margin:34px 0 12px;
}
p{margin:0 0 14px;color:var(--tinta-floja);font-size:15px}
strong{color:var(--marino)}
a{color:var(--azul)}
ul{margin:0 0 14px 20px;color:var(--tinta-floja);font-size:15px}
li{margin-bottom:7px}

/* TODOS LOS CUADROS, DE CRISTAL ESMERILADO. Lo de detrás se ve pero
   desenfocado: así la pista sigue estando ahí sin estorbar para leer. */
.tarjeta,.cristal{
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.72);
  border-radius:18px;padding:18px 20px;margin-bottom:14px;
  box-shadow:0 12px 26px rgba(20,51,110,.16);
}
.cristal{border-radius:22px;padding:22px;margin:0 auto 10px}
.tarjeta p:last-child,.cristal p:last-child{margin-bottom:0}

.boton{
  display:block;text-align:center;text-decoration:none;
  background:var(--azul);color:#fff;font-weight:600;font-size:16px;
  border-radius:13px;padding:15px 20px;margin:22px 0 10px;
  box-shadow:0 8px 18px rgba(27,80,168,.28);
}
.boton.flojo{
  background:rgba(255,255,255,.55);color:var(--marino);
  border:1px solid rgba(20,51,110,.18);box-shadow:none;
}
.cristal .boton{margin:0 0 12px}
.nota{color:var(--tinta-debil);font-size:13px;text-align:center;line-height:1.55}

footer{
  margin-top:44px;padding-top:22px;
  border-top:1px solid rgba(20,51,110,.14);
  color:var(--tinta-debil);font-size:13px;text-align:center;
}
footer a{color:var(--tinta-floja)}