/* =========================================================
   HOME
   Diseño exclusivo del index
========================================================= */


/* =========================================================
   CONTENEDOR GENERAL
========================================================= */

.home-page {
  background: #000000;
}


/*
  El Home elimina únicamente el padding general de .content.
  El comportamiento del SideCard se conserva.
*/

.home-page .home-content {
  padding: 3px 0;

  min-height: 100vh;
  min-height: 100svh;

  box-sizing: border-box;

  background: #000000;

  overflow-x: hidden;
}


/* =========================================================
   ESTRUCTURA GENERAL
========================================================= */

.home-page .home-stage {
  width: 100%;

  min-height: 100vh;
  min-height: 100svh;

  display: grid;

  /*
    Primera fila: video horizontal.
    Segunda fila: menú principal.
  */

  grid-template-rows:
    clamp(300px, 40svh, 520px)
    minmax(0, 1fr);

  box-sizing: border-box;

  background: #000000;
}


/* =========================================================
   VIDEO SUPERIOR
========================================================= */

.home-video-section {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 0;

  overflow: hidden;

  background: #111111;
}


/* VIDEO */

.home-video-bg {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  /*
    Llena el área sin deformar el video.
    Puede recortar bordes según relación de aspecto.
  */

  object-fit: cover;
  object-position: center center;

  background: #111111;
}


/* =========================================================
   CAPA SOBRE VIDEO
========================================================= */

.home-video-shade {
  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.24) 0%,
      rgba(0, 0, 0, 0.10) 45%,
      rgba(0, 0, 0, 0.40) 100%
    );
}


/* =========================================================
   TÍTULO TANIA
========================================================= */

.home-site-header {
  position: absolute;

  top: clamp(28px, 4vh, 48px);
  right: clamp(36px, 9vw, 150px);

  z-index: 5;

  width: auto;

  max-width:
    calc(100% - 72px);

  margin: 0;

  text-align: right;
}


.home-page .site-title-main {
  margin: 0;

  font-family: var(--font-main);

  font-size:
    clamp(
      1.3rem,
      3vw,
      1.65rem
    );

  font-weight: 300;

  line-height: 1.25;

  letter-spacing: var(--tracking-small);

  text-align: right;

  white-space: normal;
}


.home-page .site-title-main a {
  display: inline-block;

  color: rgba(0, 0, 0, 0.78);

  text-decoration: none;

  transition:
    color 0.25s ease,
    opacity 0.25s ease;
}


.home-page .site-title-main a:hover {
  color: #000000;
}


/* =========================================================
   PLAY / PAUSA
========================================================= */

.home-video-control {
  position: absolute;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  z-index: 6;

  width: 82px;
  height: 82px;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 0;

  border: none;
  border-radius: 50%;

  background:
    rgba(55, 55, 55, 0.72);

  color: #ffffff;

  cursor: pointer;

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  /*
    Oculto por defecto.
    El JS agrega controls-visible.
  */

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease;
}


/* MOSTRAR CONTROL */

.home-video-section.controls-visible
.home-video-control {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}


.home-video-control:hover {
  background:
    rgba(85, 85, 85, 0.90);

  transform:
    translate(-50%, -50%)
    scale(1.05);
}


.home-video-control-icon {
  display: block;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 2rem;

  font-weight: 400;

  line-height: 1;
}


/* =========================================================
   LOADING
========================================================= */

.home-video-loading {
  position: absolute;

  left: 50%;
  bottom: 20px;

  z-index: 7;

  width: 26px;
  height: 26px;

  margin-left: -13px;

  border:
    2px solid
    rgba(255, 255, 255, 0.25);

  border-top-color:
    rgba(255, 255, 255, 0.80);

  border-radius: 50%;

  opacity: 0;

  pointer-events: none;

  animation:
    home-video-spin
    0.8s
    linear
    infinite;
}


.home-video-section.is-loading
.home-video-loading {
  opacity: 1;
}


@keyframes home-video-spin {

  to {
    transform: rotate(360deg);
  }

}


/* =========================================================
   MENÚ INFERIOR
========================================================= */

.home-project-menu {
  position: relative;

  width: 100%;

  min-width: 0;
  min-height: 0;

  box-sizing: border-box;

  display: flex;

  flex-direction: column;

  justify-content: center;
  align-items: flex-start;

  gap: 30px;

  padding:
    clamp(42px, 5vh, 76px)
    clamp(36px, 9vw, 150px);

  background: #ffffff;

  overflow: visible;
}


/* =========================================================
   OPCIONES PRINCIPALES
========================================================= */

.home-project-link {
  display: block;

  width: fit-content;
  max-width: 100%;

  flex-shrink: 0;

  margin: 0;

  padding: 0;

  border: none;

  background: transparent;

  color:
    rgba(0, 0, 0, 0.53);

  font-family:
    var(--font-main);

  font-size:
    clamp(
      2rem,
      4.5vw,
      2.5rem
    );

  font-weight: 300;

  line-height: 1.08;

  letter-spacing: -0.025em;

  text-align: left;

  text-decoration: none;

  cursor: pointer;

  transition:
    color 0.28s ease,
    transform 0.28s ease;
}


.home-project-link span {
  font: inherit;
}


/* ROLLOVER */

.home-project-link:hover {
  color: #000000;

  transform:
    translateX(8px);
}


/* =========================================================
   CONTACTO
========================================================= */

.home-contact-link {
  appearance: none;
  -webkit-appearance: none;

  position: absolute;

  left:
    clamp(
      36px,
      9vw,
      150px
    );

  bottom:
    clamp(
      42px,
      5vh,
      76px
    );

  margin: 0;

  font-size:
    clamp(
      1.3rem,
      3vw,
      1.65rem
    );

  line-height: 1.08;
}


/* =========================================================
   TABLETA
========================================================= */

@media (max-width: 1024px) {

  .home-page .home-stage {
    grid-template-rows:
      clamp(
        270px,
        36svh,
        430px
      )
      minmax(0, 1fr);
  }


  .home-site-header {
    top: 24px;

    right:
      clamp(
        30px,
        7vw,
        72px
      );
  }


  .home-project-menu {
    justify-content: center;

    gap: 32px;

    padding:
      42px
      clamp(
        30px,
        7vw,
        72px
      );
  }


  .home-project-link {
    font-size:
      clamp(
        2rem,
        4.5vw,
        2.5rem
      );

    line-height: 1.08;
  }


  .home-contact-link {
    left:
      clamp(
        30px,
        7vw,
        72px
      );

    bottom: 42px;

    margin: 0;

    font-size:
      clamp(
        1.3rem,
        3vw,
        1.65rem
      );
  }


  .home-video-control {
    width: 72px;
    height: 72px;
  }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 768px) {

  /*
    =========================================================
    PRINCIPIO DEL SISTEMA MÓVIL

    Todo el Home ocupa UN solo viewport.

    El video ocupa aproximadamente 28%.
    El menú recibe automáticamente todo el espacio restante.

    Esto evita:

    - scroll adicional;
    - zonas negras al final;
    - superposición entre Escombros y Contacto;
    - problemas con barras dinámicas del navegador.
    =========================================================
  */


  .home-page .home-content {

    /*
      Fallback tradicional
    */

    height: 100vh;


    /*
      Viewport dinámico real.
      DuckDuckGo / Safari / Chrome / Firefox móviles.
    */

    height: 100dvh;

    min-height: 0;

    box-sizing: border-box;

    overflow: hidden;
  }


  .home-page .home-stage {
    width: 100%;
    height: 100%;

    min-height: 0;

    display: grid;


    /*
      Fallback para navegadores
      sin soporte dvh.
    */

    grid-template-rows:
      clamp(
        180px,
        28vh,
        280px
      )
      minmax(0, 1fr);


    /*
      Navegadores actuales.
    */

    grid-template-rows:
      clamp(
        180px,
        28dvh,
        280px
      )
      minmax(0, 1fr);

    overflow: hidden;
  }


  /* =======================================================
     VIDEO
  ======================================================= */

  .home-video-section {
    min-width: 0;
    min-height: 0;

    height: 100%;

    overflow: hidden;
  }


  .home-video-bg {
    object-fit: cover;

    object-position:
      center center;
  }


  /* =======================================================
     TÍTULO
  ======================================================= */

  .home-site-header {
    top: 16px;

    right: 22px;

    max-width:
      calc(100% - 44px);
  }


  .home-page .site-title-main {
    font-size: 0.90rem;

    line-height: 1.2;
  }


  /* =======================================================
     PLAY
  ======================================================= */

  .home-video-control {
    width: 64px;
    height: 64px;
  }


  .home-video-control-icon {
    font-size: 1.6rem;
  }


  /* =======================================================
     MENÚ
  ======================================================= */

  .home-project-menu {
    position: relative;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;


    /*
      Espacio dinámico entre proyectos.

      Se reduce en pantallas de poca altura
      para garantizar que todo permanezca
      dentro del viewport.
    */

    gap:
      clamp(
        14px,
        2.2dvh,
        24px
      );


    /*
      54px arriba reservan espacio para el
      nombre Tania de León Yong.

      El safe-area inferior se respeta sin
      sumar innecesariamente 30 + safe-area.
    */

    padding:
      54px
      22px
      22px
      22px;

    padding-bottom:
      max(
        22px,
        env(safe-area-inset-bottom)
      );

    background: #ffffff;

    overflow: hidden;
  }


  /* =======================================================
     OPCIONES PRINCIPALES
  ======================================================= */

  .home-project-link {
    width: 100%;
    max-width: 100%;

    flex:
      0 0 auto;

    padding: 2px 0;

    margin: 0;

    font-size:
      clamp(
        1.85rem,
        8.1vw,
        2.15rem
      );

    line-height: 1.06;

    letter-spacing:
      -0.035em;
  }


  /*
    Cronografías puede realizar saltos
    naturales dependiendo del ancho.
  */

  .home-project-link span {
    display: inline;
  }


  /* =======================================================
     CONTACTO

     Aquí está una de las correcciones principales.

     En móvil YA NO es absolute.
     Forma parte del flujo del flex.

     margin-top:auto utiliza únicamente el espacio disponible
     entre Escombros y la parte inferior del menú.
  ======================================================= */

  .home-contact-link {
    position: static;

    top: auto;
    right: auto;
    bottom: auto;
    left: auto;

    width: fit-content;
    max-width: 100%;

    align-self: flex-start;

    flex:
      0 0 auto;

    margin-top: auto;

    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    padding: 0;

    font-size:
      clamp(
        1.15rem,
        4.6vw,
        1.3rem
      );

    line-height: 1.08;
  }

}


/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 430px) {

  /*
    En teléfonos estrechos reducimos ligeramente
    el video para darle más área vertical
    al segundo menú.
  */

  .home-page .home-stage {

    grid-template-rows:
      clamp(
        170px,
        27vh,
        240px
      )
      minmax(0, 1fr);

    grid-template-rows:
      clamp(
        170px,
        27dvh,
        240px
      )
      minmax(0, 1fr);

  }


  .home-site-header {
    top: 15px;

    right: 20px;

    max-width:
      calc(100% - 40px);
  }


  .home-project-menu {

    gap:
      clamp(
        10px,
        1.8dvh,
        18px
      );

    padding:
      50px
      20px
      18px
      20px;

    padding-bottom:
      max(
        18px,
        env(safe-area-inset-bottom)
      );

  }


  .home-project-link {

    font-size:
      clamp(
        1.75rem,
        7.8vw,
        2rem
      );

    line-height: 1.05;

    padding: 2px 0;

  }


  .home-contact-link {

    width: fit-content;

    margin-top: auto;

    padding: 0;

    font-size:
      clamp(
        1.1rem,
        4.5vw,
        1.25rem
      );

    line-height: 1.08;

  }

}


/* =========================================================
   CELULARES DE POCA ALTURA

   Este bloque es importante para navegadores móviles que
   dejan una zona visible pequeña debido a sus barras de UI.
========================================================= */

@media
(max-width: 430px)
and (max-height: 650px) {

  /*
    Reducimos el video antes de reducir
    excesivamente el tamaño tipográfico.
  */

  .home-page .home-stage {

    grid-template-rows:
      150px
      minmax(0, 1fr);

  }


  .home-project-menu {

    gap: 9px;

    padding:
      44px
      20px
      14px
      20px;

    padding-bottom:
      max(
        14px,
        env(safe-area-inset-bottom)
      );

  }


  .home-project-link {

    font-size: 1.6rem;

    line-height: 1.03;

  }


  .home-contact-link {

    margin-top: auto;

    font-size: 1.05rem;

  }

}


/* =========================================================
   CELULAR HORIZONTAL
========================================================= */

@media
(max-width: 900px)
and (orientation: landscape) {

  /*
    La altura disponible en horizontal es mucho menor.

    El Home sigue contenido dentro de un viewport,
    pero el video se reduce para reservar área al menú.
  */

  .home-page .home-content {

    height: 100vh;
    height: 100dvh;

    min-height: 0;

    overflow: hidden;

  }


  .home-page .home-stage {

    width: 100%;
    height: 100%;

    min-height: 0;

    grid-template-rows:
      clamp(
        130px,
        42vh,
        240px
      )
      minmax(0, 1fr);

    grid-template-rows:
      clamp(
        130px,
        42dvh,
        240px
      )
      minmax(0, 1fr);

    overflow: hidden;

  }


  .home-site-header {

    top: 12px;

    right: 42px;

  }


  .home-project-menu {

    height: 100%;

    min-height: 0;

    justify-content: flex-start;

    gap:
      clamp(
        6px,
        1.5dvh,
        12px
      );

    padding:
      36px
      42px
      12px
      42px;

    padding-bottom:
      max(
        12px,
        env(safe-area-inset-bottom)
      );

    overflow: hidden;

  }


  .home-project-link {

    width: 100%;

    margin: 0;

    padding: 1px 0;

    font-size:
      clamp(
        1.3rem,
        3.2vw,
        1.7rem
      );

    line-height: 1.02;

  }


  .home-contact-link {

    position: static;

    top: auto;
    right: auto;
    bottom: auto;
    left: auto;

    width: fit-content;

    align-self: flex-start;

    margin-top: auto;

    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    padding: 0;

    font-size:
      clamp(
        1rem,
        2.5vw,
        1.2rem
      );

  }

}


/* =========================================================
   REDUCIR MOVIMIENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .home-project-link,
  .home-video-control {
    transition: none;
  }

}