/**
 * La caja común de las páginas interiores.
 *
 * El Home tiene la suya en `home.css` y no hereda ni una regla de acá. Esto es
 * lo que comparten Producto, Soluciones, Mission Control, Seguridad,
 * Integraciones, Empresa, Recursos y Contacto: el ambiente del fondo, el ancho
 * de la columna, la escala de los títulos y el aire entre secciones. El
 * vocabulario de las escenas vive en `escenas.css`; las composiciones de cada
 * página, en su propia hoja.
 *
 * Los nombres son neutros a propósito. Antes esto se llamaba `.product-*` y lo
 * usaban tres páginas: escribir `class="product-shell"` en la página de
 * Empresa es la clase de detalle que hace que nadie entienda de dónde sale
 * nada seis meses después.
 */

.pagina {
  --content: 1520px;
  background:
    radial-gradient(ellipse 38% 24% at 8% 2%, rgba(255, 255, 255, .96), transparent 72%),
    radial-gradient(ellipse 48% 36% at 76% 14%, rgba(167, 139, 250, .16), transparent 70%),
    radial-gradient(ellipse 42% 28% at 34% 58%, rgba(129, 140, 248, .08), transparent 72%),
    linear-gradient(180deg, #faf8ff 0%, #f6f1ff 48%, #faf8ff 100%);
  background-repeat: no-repeat;
}

.pagina main { overflow: clip; }

.pagina h1,
.pagina h2,
.pagina h3 { text-wrap: balance; }

.pagina h1 em,
.pagina h2 em {
  color: var(--violet);
  font-style: normal;
}

.pagina figure { margin: 0; }

.pagina figcaption {
  color: var(--rotulo);
  font-size: 12px;
  letter-spacing: .06em;
}

.pagina .button.small { min-height: 44px; }

/* --- La columna -----------------------------------------------------------
   Todo lo que se lee vive dentro de ella. Las escenas también: una escena que
   se sale de la columna deja de estar en la misma conversación que su texto. */

.hoja {
  width: min(var(--content), calc(100% - 64px));
  margin-inline: auto;
}

/* --- La portada de la página ----------------------------------------------
   El titular a ancho de lectura y la escena debajo, a ancho completo. Dos
   columnas achicarían la escena justo donde tiene que respirar, y el titular
   de una página interior no compite con nada: ya se ganó la atención. */

.hoja-portada {
  position: relative;
  isolation: isolate;
  min-height: min(930px, calc(100svh - 70px));
}

.hoja-portada h1 {
  margin: 0;
  font-size: clamp(58px, 5.1vw, 92px);
  font-weight: 690;
  letter-spacing: -.058em;
  line-height: .96;
}

.hoja-portada .lead {
  max-width: 590px;
  margin: clamp(24px, 3vh, 34px) 0 clamp(28px, 3.4vh, 40px);
  color: var(--muted);
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.6;
}

/* --- Las secciones --------------------------------------------------------- */

.hoja-seccion { padding-block: clamp(96px, 12vh, 150px); }

/* El aire entre lo que se dice y lo que se muestra. Antes era cero: el último
   párrafo quedaba pegado al canto de la escena, y una escena apoyada contra un
   párrafo se lee como parte del párrafo. */
.hoja-intro { max-width: 920px; margin-bottom: clamp(44px, 6vh, 76px); }

.hoja-intro h2 {
  margin: 0;
  font-size: clamp(46px, 4.3vw, 72px);
  font-weight: 650;
  letter-spacing: -.052em;
  line-height: 1.02;
}

.hoja-intro > p:last-child {
  max-width: 630px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

/* El rótulo de concepto: lo que aclara que una escena representa una idea y no
   una captura de pantalla. Va arriba a la izquierda de la escena. */
.hoja-nota {
  margin: 0;
  color: var(--rotulo);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* --- El cierre -------------------------------------------------------------
   Una sola frase centrada y un enlace contextual. Ni tarjeta, ni caja, ni
   formulario: la página ya dijo lo suyo y esto es la puerta de salida. */

.hoja-cierre { padding-block: clamp(110px, 14vh, 170px); text-align: center; }

.hoja-cierre h2 {
  max-width: 20ch;
  margin: 0 auto;
  font-size: clamp(42px, 4vw, 66px);
  font-weight: 650;
  letter-spacing: -.05em;
  line-height: 1.04;
}

.hoja-cierre > p:not(.eyebrow) {
  max-width: 560px;
  margin: 24px auto 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

.hoja-cierre .actions { justify-content: center; margin-top: clamp(32px, 4vh, 44px); }

/* --- Escalas --------------------------------------------------------------- */

@media (max-width: 1040px) {
  .pagina { --content: 920px; }
  .hoja-portada { min-height: auto; padding-block: 90px; }
  .hoja-portada-texto { max-width: 740px; }
}

@media (max-width: 800px) {
  .pagina { --content: 100%; }
  .hoja { width: min(100% - 40px, 680px); }
  .hoja-portada h1 { font-size: clamp(48px, 12.6vw, 68px); }
  .hoja-intro h2,
  .hoja-cierre h2 { font-size: clamp(38px, 10vw, 56px); }
}

@media (max-width: 560px) {
  body.pagina { min-width: 0; }
  .hoja { width: calc(100% - 32px); }
  .hoja-portada { padding-block: 72px; }
}