/**
 *
 * los estilos que comparten las páginas de contenido (inicio, integrantes,
 * test vocacional, productos, entrevistas y contacto): colores, fuentes, el
 * encabezado grande, las secciones, las estrellas, los títulos y el pie de
 * página
 *
 * cada página carga primero este archivo, después barra.css (la barra de
 * navegación) y por último el suyo propio. Los colores
 * de la marca son azul noche #2d2c57, azul cielo #83AEE3, morado #4b1c71, lila
 * #dbb6e8, naranja #EB5727, naranja vivo #FE6A00 y hueso #FCFCFB
 *
 */

/**
 *
 * los colores, el degradado del encabezado, la sombra y las fuentes de
 * Futuria, guardados como variables (--nombre), que se usan en todas las
 * reglas con var(--nombre)
 *
 * las fuentes Ringtall y Avant Garde solo se usan si están instaladas; si no,
 * se usa Jost, que carga cada página desde Google Fonts
 *
 */
:root{
  --azul-noche:#2d2c57;
  --azul-cielo:#83AEE3;
  --morado:#4b1c71;
  --lila:#dbb6e8;
  --naranja:#EB5727;
  --naranja-vivo:#FE6A00;
  --hueso:#FCFCFB;

  --degradado-hero:linear-gradient(100deg,#2d2c57 0%,#4b1c71 45%,#EB5727 100%);
  --sombra:0 18px 50px -20px rgba(45,44,87,.45);

  --fuente-titulo:"Ringtall","AvantGardeDemi","Jost","Century Gothic",sans-serif;
  --fuente-demi:"AvantGardeDemi","Jost","Century Gothic",sans-serif;
  --fuente-book:"AvantGardeBook","Jost","Century Gothic",sans-serif;
}

/**
 *
 * quita los márgenes que el navegador pone por defecto y hace que el ancho de
 * las cajas incluya su relleno y su borde
 *
 */
*{box-sizing:border-box;margin:0;padding:0}

/**
 *
 * todo lo que lleva el atributo hidden queda escondido, aunque otra regla le
 * ponga display
 *
 */
[hidden]{display:none!important}

/**
 *
 * al saltar a un enlace dentro de la misma página (#algo) el desplazamiento es
 * suave
 *
 */
html{scroll-behavior:smooth}

/**
 *
 * el fondo hueso, el texto azul noche y la fuente normal de toda la página
 *
 */
body{
  font-family:var(--fuente-book);
  background:var(--hueso);
  color:var(--azul-noche);
  line-height:1.6;
}

/**
 *
 * las imágenes nunca se salen de su caja; los enlaces van sin subrayado y las
 * listas sin viñetas
 *
 */
img{max-width:100%;display:block}
a{text-decoration:none}
ul{list-style:none}

/**
 *
 * la caja centrada donde va el contenido de cada sección: ocupa el 92% del
 * ancho y como máximo 1120px
 *
 */
.contenedor{width:min(1120px,92%);margin-inline:auto}

/**
 *
 * una sección de la página, con espacio arriba y abajo. .seccion--morada le
 * pone fondo morado
 *
 */
.seccion{padding:5rem 0;position:relative;overflow:hidden}
.seccion--morada{background:var(--morado)}

/**
 *
 * el encabezado grande de cada página, con el degradado azul noche → morado →
 * naranja y el texto blanco
 *
 * sus ::before y ::after son dos luces redondas borrosas en las esquinas;
 * overflow: hidden recorta lo que se sale
 *
 */
.hi-hero {
  position: relative;
  z-index: 1;
  background: linear-gradient(115deg, #2d2c57 0%, #4b1c71 45%, #EB5727 100%);
  color: #FCFCFB;
  font-family: 'Avant Garde Demi BT', 'Century Gothic', 'Trebuchet MS', sans-serif;
  padding: 84px 22px 100px;
  overflow: hidden;
}
.hi-hero::before,
.hi-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 65%);
  pointer-events: none;
}
.hi-hero::before { width: 420px; height: 420px; right: -120px; top: -120px; }
.hi-hero::after  { width: 340px; height: 340px; left: -110px; bottom: -130px; }

/**
 *
 * el contenido del encabezado en dos columnas: el texto a la izquierda y el
 * círculo del logo a la derecha
 *
 */
.hi-interior {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: center;
  gap: 48px;
}

/**
 *
 * la pastilla transparente con letras separadas que dice la sección, por
 * ejemplo "FUTURIA · INTEGRANTES"
 *
 */
.hi-etiqueta {
  display: inline-block;
  font-size: 0.82rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.32);
  padding: 8px 16px;
  border-radius: 999px;
  margin: 0 0 18px;
}

/**
 *
 * el título grande "Futuria"; crece y se achica con el ancho de la pantalla
 * (clamp) entre 3,2rem y 5,6rem
 *
 */
.hi-titulo {
  font-family: 'Ringtall Sans Serif Personal Use', 'Avant Garde Demi BT', 'Century Gothic', sans-serif;
  font-size: clamp(3.2rem, 8vw, 5.6rem);
  line-height: 1.02;
  margin: 0;
  letter-spacing: 4px;
  font-weight: 800;
}

/**
 *
 * el lema "Crea tu futuro" en cursiva y lila
 *
 */
.hi-lema {
  font-family: 'Avant Garde Demi Oblique BT', 'Avant Garde Demi BT', 'Century Gothic', sans-serif;
  font-style: italic;
  font-size: clamp(1.2rem, 2.6vw, 1.65rem);
  color: #DBB6E0;
  margin: 6px 0 18px;
  letter-spacing: 1px;
}

/**
 *
 * la descripción debajo del lema, de 540px de ancho como máximo
 *
 */
.hi-desc {
  max-width: 540px;
  margin: 0 0 30px;
  font-size: 1.1rem;
  opacity: 0.95;
  font-family: 'Avant Garde Book BT', 'Century Gothic', 'Trebuchet MS', sans-serif;
}

/**
 *
 * el botón naranja "Comienza ahora" con el cohete
 *
 * al pasar el mouse sube, crece un poco y el cohete se mueve hacia arriba a la
 * derecha
 *
 */
.hi-boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #FE6A00, #EB5727);
  color: #FCFCFB;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 16px 30px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 18px 38px -12px rgba(45, 44, 87, 0.6);
  transition: transform 0.3s, box-shadow 0.3s;
}
.hi-boton:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 24px 48px -12px rgba(45, 44, 87, 0.7); }
.hi-boton svg { transition: transform 0.35s; }
.hi-boton:hover svg { transform: translate(3px, -4px) rotate(8deg); }

/**
 *
 * el círculo blanco con el logo, que flota subiendo y bajando 10px cada 5
 * segundos
 *
 * su ::before es el borde punteado de afuera, que gira una vuelta completa
 * cada 22 segundos
 *
 */
.hi-circulo {
  justify-self: end;
  position: relative;
  width: min(320px, 64vw);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #FCFCFB;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-shadow: 0 34px 70px -24px rgba(45, 44, 87, 0.7);
  animation: hi-flotar 5s ease-in-out infinite;
}
.hi-circulo::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 3px dashed rgba(255, 255, 255, 0.55);
  animation: hi-girar 22s linear infinite;
}
.hi-circulo img {
  width: 92%;
  border-radius: 50%;
  object-fit: contain;
}

/**
 *
 * el movimiento de flotar: sube 10px a la mitad y vuelve a bajar
 *
 */
@keyframes hi-flotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/**
 *
 * el movimiento de girar: una vuelta completa
 *
 */
@keyframes hi-girar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/**
 *
 * en pantallas de 920px o menos el encabezado pasa a una sola columna,
 * centrada, con el círculo debajo del texto
 *
 */
@media (max-width: 920px) {
  .hi-interior { grid-template-columns: 1fr; text-align: center; gap: 46px; }
  .hi-circulo { justify-self: center; }
  .hi-etiqueta { margin: 0 auto 18px; }
  .hi-desc { margin: 0 auto 30px; }
}

/**
 *
 * en celulares pequeños el encabezado tiene menos espacio arriba, abajo y a
 * los lados
 *
 */
@media (max-width: 480px) {
  .hi-hero { padding: 60px 18px 80px; }
}

/**
 *
 * la capa que cubre toda la sección donde comun.js pone las estrellas; no se
 * puede tocar, los clics pasan a través de ella
 *
 */
.estrellas{position:absolute;inset:0;overflow:hidden;pointer-events:none}

/**
 *
 * una estrella de cuatro puntas, recortada con clip-path, que brilla con la
 * animación "brillo"
 *
 */
.estrella{
  position:absolute;
  clip-path:polygon(50% 0%,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0% 50%,40% 40%);
  animation:brillo 3.5s ease-in-out infinite;
}

/**
 *
 * el brillo de las estrellas: empiezan tenues y pequeñas, a la mitad se ven
 * completas y un poco más grandes, y vuelven
 *
 */
@keyframes brillo{
  0%,100%{opacity:.25;transform:scale(.8)}
  50%{opacity:1;transform:scale(1.15)}
}

/**
 *
 * centra el texto de los bloques de título y párrafo
 *
 */
.quienes{text-align:center}

/**
 *
 * el título de cada sección, en mayúsculas separadas y morado. .titulo--claro
 * lo pone blanco para fondos oscuros
 *
 */
.titulo{font-family:var(--fuente-demi);font-size:clamp(2rem,5vw,3rem);letter-spacing:.12em;color:var(--morado)}
.titulo--claro{color:var(--hueso)}

/**
 *
 * la rayita naranja centrada debajo de los títulos
 *
 */
.subrayado{display:block;width:6rem;height:4px;border-radius:999px;background:var(--naranja-vivo);margin:1rem auto 0}

/**
 *
 * el párrafo normal, separado del título. .texto--claro lo pone blanco para
 * fondos oscuros
 *
 */
.texto{margin-top:1.75rem;color:rgba(45,44,87,.85)}
.texto--claro{color:rgba(252,252,251,.85)}

/**
 *
 * el botón naranja redondeado que usa la página de contacto para enviar el
 * formulario; al pasar el mouse se aclara y sube 2px
 *
 */
.btn-cohete{
  display:inline-flex;align-items:center;gap:.7rem;margin-top:2.5rem;
  padding:1rem 2rem;border-radius:999px;
  background:var(--naranja-vivo);color:var(--hueso);
  font-family:var(--fuente-demi);font-size:1.05rem;
  box-shadow:var(--sombra);transition:filter .25s,transform .25s;
}
.btn-cohete:hover{filter:brightness(1.1);transform:translateY(-2px)}

/**
 *
 * el pie de página con el mismo degradado del encabezado
 *
 */
.footer{background-image:var(--degradado-hero);position:relative;overflow:hidden;padding:3.5rem 0}

/**
 *
 * el contenido del pie, centrado y en columna: logo, redes y derechos
 *
 */
.footer__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center}

/**
 *
 * el logo redondo de 64px sobre fondo hueso
 *
 */
.footer__logo{width:64px;height:64px;border-radius:50%;background:var(--hueso);object-fit:contain;padding:4px}

/**
 *
 * la fila de botones redondos de redes sociales; al pasar el mouse se ponen
 * naranjas y suben 2px
 *
 */
.footer__redes{display:flex;gap:1rem}
.footer__redes a{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:rgba(252,252,251,.12);color:var(--hueso);transition:background .2s,transform .2s;
}
.footer__redes a:hover{background:var(--naranja-vivo);transform:translateY(-2px)}

/**
 *
 * la línea de derechos reservados, pequeña y un poco transparente
 *
 */
.footer__legal{font-size:.9rem;color:rgba(252,252,251,.75)}