/* La portada: el nombre, los botones, la ficha y el avatar. */

.portada {
  min-block-size: 100svb;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem);
}

.izq { display: flex; flex-direction: column; }

/* El nombre en dos líneas, la segunda un poco metida hacia dentro. */
h1 {
  display: flex;
  flex-direction: column;
  font-size: clamp(2.8rem, 8vw, 5.6rem);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 0.94;
}

/* Cada línea recorta su texto mientras sube desde abajo. */
.linea { display: block; overflow: hidden; padding-block-end: 0.06em; }
.sube { display: block; }
.l2 { margin-inline-start: clamp(1.25rem, 4vw, 3rem); font-weight: 500; }

.rol {
  margin-block-start: 1.3rem;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: var(--acento);
  transition: color 300ms ease;
}

.frase {
  margin-block-start: 0.9rem;
  max-inline-size: 44ch;
  color: var(--texto-2);
}


/* --------------------------------------------------------------- Botones */

.acciones {
  margin-block-start: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Sin relleno: sólo el contorno. Al pasar por encima se llena, y ahí es el
   único momento en que la web enseña un bloque de color. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-block-size: 44px;
  padding-inline: 1.2rem;
  border: 1px solid var(--acento);
  border-radius: 8px;
  color: var(--acento);
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 220ms ease, color 220ms ease;
}
.btn:hover { background: var(--acento); color: var(--fondo); }

.btn-flecha { transition: transform 220ms var(--salida); }
.btn:hover .btn-flecha { transform: translateX(3px); }

.btn-sec {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 1.1rem;
  border: 1px solid var(--linea);
  border-radius: 8px;
  color: var(--texto-2);
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color 220ms ease, color 220ms ease;
}
.btn-sec:hover { border-color: var(--texto-3); color: var(--texto); }

/* Sin JavaScript el correo no es un enlace: el href se lo pone js/web.js. */
.correo { cursor: default; }
.correo[href] { cursor: pointer; }


/* ----------------------------------------------------------------- Ficha */

.ficha {
  margin: 2.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
}

.ficha > div { display: flex; flex-direction: column; gap: 0.1rem; }

.ficha dt {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.ficha dd { margin: 0; font-size: 0.92rem; color: var(--texto); }


/* ---------------------------------------------------------------- Avatar */

.der {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

/* El avatar va suelto sobre el fondo, sin marco: con un panel detrás, el
   vaivén chocaba con el borde y parecía una imagen mal encajada.
   Manda el alto y no el ancho, que es lo que compite con la ventana. */
.escena {
  --figura: min(56svb, 490px);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-inline-size: 100%;
}

/* Dos movimientos a la vez, y por eso dos capas: el giro hacia el ratón va
   aquí y el vaivén, en .flota. Una misma propiedad no puede llevar dos
   animaciones. Los valores de giro y desvío los escribe js/web.js. */
.gira {
  transform: perspective(800px)
             rotateX(var(--giro-x, 0deg))
             rotateY(var(--giro-y, 0deg))
             translate3d(var(--desvio-x, 0px), var(--desvio-y, 0px), 0);
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.flota { display: flex; justify-content: center; }

.avatar {
  block-size: var(--figura);
  inline-size: auto;
  max-inline-size: 100%;
  /* La sombra se mueve al revés que la figura: así parece que se levanta del
     fondo en vez de deslizarse por encima. */
  filter: drop-shadow(calc(var(--desvio-x, 0px) * -0.6)
                      calc(22px - var(--desvio-y, 0px) * 0.4)
                      26px rgba(0, 0, 0, 0.55));
  transition: filter 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------------------------------------- Entrada */

@keyframes revelar { from { transform: translateY(105%); } }

@keyframes aterrizar { from { opacity: 0; transform: translateY(30px) scale(0.96); } }

/* El vaivén, corto y lento: que se note que está vivo y poco más. */
@keyframes flotar { to { transform: translateY(-10px); } }

@keyframes balanceo {
  from { transform: perspective(900px) rotateY(-3deg); }
  to   { transform: perspective(900px) rotateY(3deg); }
}

@media (prefers-reduced-motion: no-preference) {
  .sube { animation: revelar 760ms var(--salida) backwards; }
  .l2 .sube { animation-delay: 110ms; }

  .rol, .frase, .acciones, .ficha {
    animation: subir 680ms var(--salida) backwards;
  }
  .rol      { animation-delay: 260ms; }
  .frase    { animation-delay: 320ms; }
  .acciones { animation-delay: 380ms; }
  .ficha    { animation-delay: 440ms; }
  .tonos    { animation-delay: 620ms; }

  .escena { animation: aterrizar 900ms var(--salida) 280ms backwards; }

  .flota { animation: flotar 6s ease-in-out 1s infinite alternate; }

  /* Con el dedo no hay ratón al que seguir, así que el giro lo pone el CSS. */
  @media (pointer: coarse) {
    .gira { animation: balanceo 9s ease-in-out 1s infinite alternate; }
  }
}


/* ----------------------------------------------------------------- Móvil */

@media (max-width: 860px) {
  .portada {
    min-block-size: calc(100svb - 9rem);
    grid-template-columns: 1fr;
    align-content: center;
    gap: 2.5rem;
    /* Más aire arriba para que los botones de idioma y música no tapen la
       cabeza del avatar. */
    padding-block-start: 5.5rem;
  }

  /* El avatar va primero: es lo que da la cara. */
  .der { order: -1; }
  .escena { --figura: min(38svb, 310px); }
  .ficha { gap: 0.9rem 2rem; }
}