/* Portada */

.home {
  /* Tamaño y posición de la firma: el resto de la escena se mide respecto a ella */
  --firma-w: 88vw;
  --firma-x: 0vw;
  /* Búho: dónde se posa (en % del ancho de la firma), su ancho, y la altura de
     la línea en ese punto (en % de la altura de la firma: la línea sube un poco
     de izquierda a derecha, del 90 % en el borde al 83 % antes de las letras) */
  --owl-x: 30%;
  --owl-w: 18%;
  --owl-y: 80%;

  min-height: 100vh;
  min-height: 100dvh;
  /* la línea de la firma, a media pantalla (donde se posa el búho): está al
     86.8 % de la altura de la firma, que mide 190/3840 de su ancho
     (0.043 = 0.868 × 190 / 3840).
     Relleno y no margen en .scene: el margen se salía de .home y alargaba la
     página media pantalla */
  padding-top: calc(50vh - var(--firma-w) * 0.043);
  padding-top: calc(50dvh - var(--firma-w) * 0.043);
  padding-bottom: 3rem;
  overflow-x: clip; /* en móvil la firma sale de la pantalla */
}

/* Escena: firma + búho */

.scene {
  position: relative;
  width: var(--firma-w);
  margin-left: var(--firma-x);
  color: var(--color-text);
}

/* La firma es un dibujo a mano (original: img/firma.png; para la web,
   img/firma.webp sin pérdida, la mitad de peso); se usa como máscara para
   pintarla con el color de la paleta (currentColor = --color-text) */
.scene__firma {
  width: 100%;
  aspect-ratio: 3840 / 190;
  background: currentColor;
  -webkit-mask: url("../img/firma.webp") center / 100% 100% no-repeat;
  mask: url("../img/firma.webp") center / 100% 100% no-repeat;
}

/* Búho en capas (cuerpo + cabeza), todas del mismo lienzo cuadrado */
.scene__owl {
  position: absolute;
  left: var(--owl-x);
  width: var(--owl-w);
  aspect-ratio: 1;
  /* se apoya en la línea con los dedos: en el dibujo del cuerpo, las patas
     están al 52 % del ancho y los dedos al 89 % del alto */
  top: var(--owl-y);
  translate: -52% -89%;
  /* punto sobre el que giran las cabezas diagonales (base del cuello); para
     girarlas sobre su centro, 50% 24.5% */
  --pivote-cabeza: 50% 40%;
  /* punto sobre el que ladea la cabeza de frente 90° (centro de la cabeza) */
  --pivote-ladeo: 50% 24.5%;
  cursor: pointer; /* al hacer click, grita (js/buho.js) */
}

.scene__owl img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* solo se ve la cabeza que toca; las demás, cargadas pero ocultas. js/buho.js
   la inclina un poco (rotate) sobre el cuello para suavizar los cambios */
.owl__head {
  visibility: hidden;
  transform-origin: var(--pivote-cabeza);
  transition: rotate 0.15s ease-out;
}

.owl__head.is-on {
  visibility: visible;
}

/* grito hacia el otro lado: la misma imagen, volteada en horizontal */
.owl__head--espejo {
  scale: -1 1;
}

.tagline {
  /* debajo de las letras de la firma (empiezan al 66 % de su ancho) */
  margin: 1.25rem 1.5rem 0 calc(var(--firma-x) + var(--firma-w) * 0.66);
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: 300;
  letter-spacing: 2px;
  color: var(--color-text-soft);
}

.tagline__mark {
  color: var(--color-accent);
}

/* Etiquetas: bloques malva en fila, alineados a la izquierda. Al pasar por
   encima se alargan hacia la derecha, como las rayitas de los talleres. */

.doors {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin: clamp(2rem, 7vh, 4rem) clamp(1.5rem, 4vw, 3rem) 0 clamp(2rem, 8vw, 7rem);
}

.door {
  display: flex;
  align-items: center;
  width: 13rem;
  height: 3.25rem;
  padding: 0 1.5rem;
  background: var(--color-tag);
  color: var(--color-text-on-tag);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 2px;
  white-space: nowrap;
  text-decoration: none;
  transition: width 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.door:hover,
.door:focus-visible,
.door:active {
  width: 18rem;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

/* Botón de sonido (js/sonido.js): pequeño, arriba a la derecha, como los botones
   de los talleres; apagado por defecto */
.sound-toggle {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  background: var(--color-button);
  color: var(--color-text-on-button);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sound-toggle svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sound-toggle__speaker {
  fill: currentColor;
}

/* apagado: altavoz tachado; activado: altavoz con ondas */
.sound-toggle__on,
.sound-toggle[aria-pressed="true"] .sound-toggle__off {
  display: none;
}

.sound-toggle[aria-pressed="true"] .sound-toggle__on {
  display: inline;
}

.sound-toggle:hover,
.sound-toggle:focus-visible,
.sound-toggle:active {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

/* Pantallas intermedias (tablet): el búho más grande respecto a la firma para
   que no quede diminuto, y las etiquetas una debajo de otra (en fila no caben
   las tres y, al alargarse en hover, empujarían a las demás) */
@media (max-width: 1024px) {
  .home {
    --owl-w: 17%;
  }

  .doors {
    flex-direction: column;
    gap: 1rem;
  }
}

/* Móvil: la firma se agranda y se desplaza a la izquierda para que las letras
   se lean; el búho se posa más a la derecha y vuelve a su tamaño (la firma ya es
   más grande). Las etiquetas, una debajo de otra. */
@media (max-width: 640px) {
  .home {
    --firma-w: 170vw;
    --firma-x: -75vw;
    --owl-x: 56%;
    --owl-y: 83.1%;
    --owl-w: 13%;
  }

  .tagline {
    margin-left: 1.5rem;
    text-align: right;
  }

  .doors {
    flex-direction: column;
    gap: 1rem;
    margin-left: 2rem;
  }
}