/* Landing de bolea.club. Colores, espacios y tipos vienen de tokens.css (generado desde el diseño).
   Composición: encabezado de A2 y "Así funciona" de B1 (design/referencias), en una columna de hasta 560 px. */

@font-face {
  font-family: "Bolea Display";
  src: url("/fonts/archivo-extracondensed-blackitalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  /* block y no swap: la de respaldo es ~1,3 veces más ancha y desbordaría un momento.
     La fuente va precargada y pesa ~13 KB. */
  font-display: block;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--t1);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

/* Los cortes del wordmark y del símbolo se definen una vez; con display: none dejarían de recortar. */
.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.hero,
.page,
.footer {
  position: relative;
  width: 100%;
  max-width: calc(560px + 2 * var(--space-margin));
  margin-inline: auto;
  padding-inline: max(var(--space-margin), env(safe-area-inset-left)) max(var(--space-margin), env(safe-area-inset-right));
}

.display {
  font-family: "Bolea Display", "Arial Narrow", sans-serif;
  font-weight: 900;
  font-style: italic;
  /* 64 px desde 375 px de ancho; en celulares más angostos se achica para que nada desborde a 320. */
  font-size: min(64px, calc((100vw - 2 * var(--space-margin)) / 5.2));
  line-height: 0.86;
  text-transform: uppercase;
  white-space: nowrap;
}

.symbol {
  fill: var(--br);
}

/* A2: wordmark arriba a la izquierda, el símbolo grande saliendo por la derecha y el título abajo.
   El alto mínimo deja el título unos 45 px debajo del símbolo (que se ve hasta unos 461 px), como en A2.
   overflow: hidden y no overflow-x: clip, que Safari no tiene antes de la 16. */
.hero {
  display: flex;
  flex-direction: column;
  min-height: 744px;
  padding-top: max(var(--space-s6), env(safe-area-inset-top));
  padding-bottom: var(--space-s12);
  overflow: hidden;
}

/* La bola sigue al wordmark aunque haya zona segura arriba. 26 = 96 − 70 en A2: el wordmark mide
   ~33 px de alto y lo visible de la bola empieza 32,6 px debajo del borde del SVG, así que quedan 26 px. */
.hero-symbol {
  position: absolute;
  top: calc(max(var(--space-s6), env(safe-area-inset-top)) + 26px);
  left: 96px;
  width: 440px;
  height: 440px;
}

.wordmark {
  position: relative;
  display: block;
  width: 92px;
  fill: var(--t1);
  fill-rule: evenodd;
}

.wordmark-link {
  position: relative;
  align-self: flex-start;
}

.hero-copy {
  position: relative;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-copy .display {
  letter-spacing: -0.005em;
}

.lede {
  max-width: 300px;
  color: var(--t2);
  text-wrap: pretty;
}

.link {
  align-self: flex-start;
  color: var(--brt);
  font-weight: 600;
  text-decoration: none;
}

.link:hover,
.link:focus-visible {
  text-decoration: underline;
}

.link:focus-visible {
  outline-offset: 2px;
}

/* B1: título display y tres filas con ficha de ícono. Entre secciones hay 48 px: los pone el
   padding de abajo del encabezado, el de arriba del cierre y el de arriba del pie. */
.how {
  display: flex;
  flex-direction: column;
  gap: var(--space-s12);
  padding-block: 0;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.step {
  display: flex;
  gap: var(--space-s4);
}

.step-icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--s1);
  color: var(--t1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-icon svg {
  display: block;
  width: 26px;
  height: 26px;
}

.step-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-s1);
  padding-top: 3px;
}

.step-text h3 {
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: 600;
}

.step-text p {
  font-size: var(--type-callout-size);
  line-height: var(--type-callout-line);
  color: var(--t2);
  text-wrap: pretty;
}

.closing {
  padding-block: var(--space-s12) 0;
}

/* A2 compone esta frase a 300 px. */
.closing p {
  max-width: 300px;
  font-size: var(--type-headline-size);
  line-height: var(--type-headline-line);
  font-weight: var(--type-headline-weight);
  text-wrap: pretty;
}

.footer {
  padding-top: var(--space-s12);
  padding-bottom: max(var(--space-s12), env(safe-area-inset-bottom));
}

.footer p {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  font-weight: var(--type-caption-weight);
  color: var(--t3);
}

/* Pantallas grandes. Con min-height un celular acostado sigue con la composición de celular. */
@media (min-width: 768px) and (min-height: 600px) {
  .wordmark {
    width: 140px;
  }

  /* 0,9 de type.display.xl.lineHeight: a 104 px el 0,86 de A2 pega las tildes a la línea de arriba. */
  .display {
    font-size: 104px;
    line-height: 0.9;
  }

  .hero {
    min-height: 840px;
  }

  /* El wordmark de 140 px mide 49,8 px de alto: 49,8 + 26 − 32,6 ≈ 44. */
  .hero-symbol {
    top: calc(max(var(--space-s6), env(safe-area-inset-top)) + 44px);
  }
}