/*
 * Surtyplus · página «Próximamente».
 * HTML y CSS planos, sin JavaScript. Diseño según el manual de marca v1.2.
 *
 * Decisión de la «pieza»: la pieza es la ventana del navegador (el bloque de
 * pantalla completa que ve el visitante). Por eso las medidas
 * de la franja usan unidades de ventana: alto de la pieza = 100svh, lado corto
 * de la pieza = el menor entre 100vw y 100svh.
 */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Poppins-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/Poppins-ExtraBold.woff2") format("woff2");
}

:root {
  /* Azul Surty: títulos, texto y banda de la franja. */
  --azul-surty: #013A86;

  /* Ancho del logo vertical: crece con el ancho y se limita con el alto de la pieza. Nunca baja de 180 px (mínimo digital: 80 px). */
  --logo-ancho: clamp(180px, min(46vw, 34vh), 320px);

  /* Área de protección X: altura de la «s» del nombre (~11 % del ancho del logo). */
  --area-x: calc(var(--logo-ancho) * 0.11);

  /* Alto reservado a la franja: su punto más alto llega a ~29 % del alto de la pieza. */
  --franja-alto: 30vh;
}

@supports (height: 1svh) {
  :root {
    --franja-alto: 30svh;
    --logo-ancho: clamp(180px, min(46vw, 34svh), 320px);
  }
}

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

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

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--azul-surty);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

/* La pieza: ocupa al menos el alto de la ventana. La franja va en su borde inferior. */
.pagina {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--area-x) 1.25rem calc(var(--franja-alto) + 1rem);
  text-align: center;
}

/* Logo: protagonista de la pieza, con su área de protección alrededor. */
.logo {
  margin-top: auto;
  padding: var(--area-x);
}

.logo img {
  display: block;
  width: var(--logo-ancho);
  height: auto;
}

main {
  margin-bottom: auto;
  max-width: 34rem;
}

h1 {
  margin: 0 0 0.75rem;
  color: var(--azul-surty);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}

main p {
  margin: 0;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
  text-wrap: balance;
}

footer {
  margin-top: 1.5rem;
  max-width: 34rem;
}

footer p {
  margin: 0;
  font-size: 0.9375rem;
  text-wrap: balance;
}

/*
 * Pie en pantallas angostas: el texto en una línea mide ~21rem y con el
 * relleno de la página necesita ~23.5rem. Bajo 28rem cada parte va en su propia
 * línea y el separador se oculta, para que el «·» nunca quede colgando.
 */
@media (max-width: 28rem) {
  footer p span {
    display: block;
  }

  footer p span[aria-hidden="true"] {
    display: none;
  }
}

/*
 * Franja swoosh: una sola, en el borde inferior, decorativa.
 * La curva baja al centro y sube hacia la derecha. Las alturas se miden en
 * porcentaje del alto de la pieza (1 unidad del viewBox = 1 % del alto).
 * La línea verde mide 3 % del lado corto de la pieza y no escala con la curva.
 */
.franja {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: var(--franja-alto);
  overflow: hidden;
  pointer-events: none;
}

.franja-banda {
  fill: var(--azul-surty);
}

.franja-linea {
  fill: none;
  stroke: #48A011;
  stroke-width: 3vh;
  stroke-width: min(3vw, 3vh);
  stroke-linecap: butt;
}

@supports (height: 1svh) {
  .franja-linea {
    stroke-width: min(3vw, 3svh);
  }
}