/* ==========================================================================
   hero.css
   --------------------------------------------------------------------------
   Hero de la home: vídeo de fondo a ancho completo, overlay de contraste y
   contenido centrado limitado a --content-max.

   Se carga DESPUÉS de components.css y ANTES de responsive.css.

   EXCEPCIÓN A LA ARQUITECTURA: este módulo incluye sus propias media queries
   en lugar de llevarlas a responsive.css. Es deliberado — el hero se pidió
   aislado en un archivo propio, y separar sus breakpoints obligaría a saltar
   entre dos archivos para entender una sola sección. El resto de módulos sigue
   la regla general.

   Mobile-first: los estilos base son los de móvil.
   ========================================================================== */


/* --------------------------------------------------------------------------
   .gt-hero — contenedor de la sección
   El fondo --color-primary hace de respaldo en cuatro situaciones: mientras el
   vídeo carga, si el navegador no puede reproducirlo, si el archivo no existe
   (en ese caso la plantilla ni siquiera imprime la etiqueta <video>) y cuando
   el visitante ha pedido movimiento reducido.
   -------------------------------------------------------------------------- */

.gt-hero {
  /* Densidad del overlay. Dos valores, porque el degradado va de más oscuro
     (lado del texto) a más transparente (lado libre del vídeo).
     Subir --gt-hero-shade-strong si algún fotograma claro deja el texto justo
     de contraste; bajar --gt-hero-shade-soft para que se vea más el vídeo. */
  --gt-hero-shade-strong: 0.80;
  --gt-hero-shade-soft: 0.30;

  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;

  background-color: var(--color-primary);

  /* Alto del hero en móvil.
     Se usa svh (small viewport height) para que las barras del navegador móvil
     no recorten el contenido al aparecer y desaparecer; vh queda como respaldo
     para navegadores antiguos.

     60svh es un SUELO, no un techo: si el texto ocupa más, la sección crece.
     Por eso lo que de verdad hace que el hero quepa en pantalla son los
     tamaños de fuente y los márgenes de abajo, no este valor. */
  min-height: 60vh;
  min-height: 60svh;

  padding-block: 40px 60px;   /* algo más abajo, para dejar sitio al indicador de scroll */
}


/* --------------------------------------------------------------------------
   .gt-hero__video — vídeo de fondo
   Cubre toda la sección con object-fit: cover, recortando lo que sobre en vez
   de deformar la imagen. Va detrás del overlay y del contenido.
   -------------------------------------------------------------------------- */

.gt-hero__poster,
.gt-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;

  width: 100%;
  height: 100%;
  object-fit: cover;

  /* Evita el hueco en línea base que dejan los elementos reemplazados */
  display: block;
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   .gt-hero__overlay — capa de contraste
   --------------------------------------------------------------------------
   EN MÓVIL el texto ocupa todo el ancho, así que un degradado lateral no
   serviría de nada: aquí el overlay es prácticamente uniforme, apenas más
   denso por abajo.
   A partir de 768px pasa a ser un degradado horizontal (ver más abajo).
   -------------------------------------------------------------------------- */

.gt-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.62) 55%,
    rgba(0, 0, 0, 0.72) 100%
  );
}


/* --------------------------------------------------------------------------
   .gt-hero__content — contenido
   Lleva también .gt-container, que es quien aporta el máximo de 1280px y el
   margen lateral del breakpoint. Aquí solo se resuelve la superposición sobre
   el vídeo y la tipografía.
   -------------------------------------------------------------------------- */

.gt-hero__content {
  position: relative;
  z-index: 2;

  color: var(--color-bg);
  text-align: left;
}

/* Blanco puro (--color-bg = #ffffff) sobre el overlay oscuro, más una sombra
   suave que salva los fotogramas claros del vídeo sin que se note como efecto.
   La sombra es más marcada en el título y el subtítulo, que son los que caen
   sobre la zona con más movimiento de imagen. */

/* --------------------------------------------------------------------------
   RITMO VERTICAL
   --------------------------------------------------------------------------
   Los tres huecos son distintos, y responden a cómo se agrupa el contenido:

     título → subtítulo   medio. Marca el salto del titular al mensaje.
     subtítulo → párrafo  el más pequeño. Subtítulo y párrafo son el mismo
                          bloque de mensaje y se leen seguidos; separarlos
                          los convertía en dos ideas sueltas.
     párrafo → botón      el mayor. Separa el mensaje de la acción, y le da al
                          CTA el aire que lo hace parecer pulsable.

   Los tres crecen con la tipografía en cada breakpoint. Antes eran fijos, así
   que en escritorio un título de 48px quedaba a 12px de su subtítulo: pegados.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   LA ESCALA DEL HERO DE LA PORTADA, revisada el 2026-09-12
   --------------------------------------------------------------------------
   El H1 iba a 26 · 30 · 48 · 60 · 68px y la línea de debajo a 16 · 17 · 22 ·
   24 · 24 en semibold: un 70% más que el H1 de cualquier página interna
   (24 · 32 · 40). El usuario lo vio: «más grandes que lo habitual».

   Ahora: H1 28 · 32 · 40 · 48 · 52 y subtítulo 16 · 17 · 18 · 20 · 20 en
   medium. Un escalón por encima de las interiores —es la portada— y no dos.
   El escalón de 1280 sube el H1 y no el subtítulo: a partir de 20px una frase
   de doce palabras deja de ser una línea y pasa a ser un párrafo en negrita.
   -------------------------------------------------------------------------- */

.gt-hero__title {
  margin: 0 0 8px;
  font-family: var(--font-primary);
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 700;                  /* bold */
  color: var(--color-bg);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.40);
  text-wrap: balance;
}

/* EL MARGEN INFERIOR ES EL QUE LLEVABA .gt-hero__text, no el suyo de 8px:
   ahora esta frase es la última antes de los botones y tiene que separarse de
   ellos, no de un párrafo que ya no existe. Lo mismo en cada escalón. */
.gt-hero__subtitle {
  margin: 0 0 28px;
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 500;                  /* medium: a 20px el semibold gritaba */
  color: var(--color-bg);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.35);
  text-wrap: balance;
}

.gt-hero__text {
  margin: 0 0 28px;
  max-width: 60ch;                   /* longitud de línea cómoda de leer */
  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--color-bg);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}


/* --------------------------------------------------------------------------
   .gt-hero__scroll — indicador de scroll
   Chevron dibujado con bordes CSS, sin imagen ni icono externo. Decorativo:
   va con aria-hidden en la plantilla y no es enfocable.
   -------------------------------------------------------------------------- */

.gt-hero__scroll {
  position: absolute;
  z-index: 2;
  bottom: 20px;
  left: 50%;
  translate: -50% 0;

  width: 28px;
  height: 28px;

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

  opacity: 0.85;
  animation: gt-hero-bounce 2.4s ease-in-out infinite;
}

.gt-hero__scroll::before {
  content: "";
  width: 13px;
  height: 13px;
  border-right: 2px solid var(--color-bg);
  border-bottom: 2px solid var(--color-bg);
  rotate: 45deg;
  translate: 0 -3px;                 /* centra ópticamente el chevron */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

@keyframes gt-hero-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}


/* --------------------------------------------------------------------------
   Animación de entrada
   --------------------------------------------------------------------------
   Fade-in con un ligero desplazamiento hacia arriba, escalonado por elemento.
   El estado inicial (opacidad 0) vive SOLO dentro de los keyframes, nunca en
   la regla base: así, si la animación se desactiva por movimiento reducido,
   el contenido queda visible sin necesidad de deshacer nada.
   -------------------------------------------------------------------------- */

@keyframes gt-hero-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gt-hero__title,
.gt-hero__subtitle,
.gt-hero__text,
.gt-hero__actions {
  animation: gt-hero-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.gt-hero__title    { animation-delay: 0.10s; }
.gt-hero__subtitle { animation-delay: 0.22s; }
.gt-hero__text     { animation-delay: 0.34s; }
.gt-hero__actions  { animation-delay: 0.46s; }

/* --------------------------------------------------------------------------
   LOS DOS BOTONES DEL HERO
   --------------------------------------------------------------------------
   EL SEGUNDO NO PUEDE SER OTRO BOTÓN ROJO. Dos botones llenos del mismo color
   compiten y ninguno gana: el rojo es la acción que se pide —contactar— y bajar
   a los servicios es solo navegación. Por eso va perfilado, sobre el vídeo, y
   con la flecha hacia ABAJO en lugar de hacia la derecha: dice a dónde lleva.
   -------------------------------------------------------------------------- */
.gt-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.gt-hero__jump {
  /* AZUL DE MARCA, el mismo que el botón de teléfono de los heros interiores:
     así los dos botones secundarios del sitio son la misma pieza. Relleno y no
     perfilado, porque va el PRIMERO: el ojo llega antes aquí que al rojo, y
     una pieza vacía en primera posición se lee como deshabilitada.

     El filo blanco se queda, atenuado: sobre una zona clara del vídeo, el azul
     sin canto se funde con la imagen. */
  background-color: var(--color-primary);
  color: var(--color-bg);
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.gt-hero__jump::after {
  content: "↓";
  font-family: var(--font-symbols);
}

/* Tres clases para ganarle a .gt-btn:hover, que vive en components.css y pinta
   el fondo de rojo. Con dos clases empatarían y decidiría el orden de carga. */
.gt-hero__actions .gt-hero__jump:hover,
.gt-hero__actions .gt-hero__jump:focus-visible {
  background-color: color-mix(in srgb, var(--color-primary) 86%, #000);
  border-color: rgba(255, 255, 255, 0.75);
}

/* La flecha del botón rojo se desplaza a la derecha al pasar el ratón; esta
   tiene que bajar, que es hacia donde lleva. */
.gt-hero__actions .gt-hero__jump:hover::after,
.gt-hero__actions .gt-hero__jump:focus-visible::after {
  transform: translateY(3px);
}

/* El indicador de scroll aparece el último, cuando ya se ha leído el bloque */
.gt-hero__scroll {
  animation:
    gt-hero-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.75s both,
    gt-hero-bounce 2.4s ease-in-out 1.45s infinite;
}


/* --------------------------------------------------------------------------
   Ampliaciones por breakpoint
   -------------------------------------------------------------------------- */

/* Móvil grande — a partir de 480px
   Subida gradual: de 1.625rem a 3rem (768px) de golpe habría dejado un salto
   tipográfico muy brusco entre un móvil grande y una tablet pequeña. */
@media (min-width: 480px) {

  .gt-hero {
    min-height: 68vh;
    min-height: 68svh;
    padding-block: 48px 68px;
  }

  .gt-hero__title    { font-size: 2rem;      margin-bottom: 10px; }
  .gt-hero__subtitle { font-size: 1.0625rem; margin-bottom: 30px; }
  .gt-hero__text     { font-size: 0.9375rem; margin-bottom: 30px; }

}

/* Tablet — a partir de 768px
   Aquí el texto deja de ocupar todo el ancho, así que el overlay pasa a ser un
   degradado horizontal: denso sobre la columna de texto (izquierda) y casi
   transparente a la derecha, donde el vídeo se ve limpio. Se superpone un
   segundo degradado vertical muy leve para que el indicador de scroll no
   quede sobre un fotograma claro. */
@media (min-width: 768px) {

  /* LA MISMA ALTURA QUE EL HERO CON VÍDEO DE LAS PÁGINAS INTERIORES
     —min(88vh, 760px), en components.css—. Antes la portada iba a 85svh y a
     100svh en escritorio: dos heros con vídeo, uno de pantalla completa y otro
     de dos tercios, y al pasar de uno a otro parecía que el segundo estaba
     recortado. Ahora se ven iguales.

     Y el tope en píxeles importa más que el porcentaje: sin él, en una pantalla
     de 1440 de alto el hero crecía hasta 1440 con el mismo texto dentro, y lo
     que ganaba era hueco, no presencia. */
  .gt-hero {
    min-height: min(88vh, 760px);
    padding-block: 80px 96px;
  }

  .gt-hero__overlay {
    background-image:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, var(--gt-hero-shade-strong)) 0%,
        rgba(0, 0, 0, calc(var(--gt-hero-shade-strong) * 0.88)) 32%,
        rgba(0, 0, 0, calc(var(--gt-hero-shade-strong) * 0.55)) 58%,
        rgba(0, 0, 0, var(--gt-hero-shade-soft)) 82%,
        rgba(0, 0, 0, calc(var(--gt-hero-shade-soft) * 0.7)) 100%
      ),
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 65%,
        rgba(0, 0, 0, 0.28) 100%
      );
  }

  .gt-hero__title    { font-size: 2.5rem; margin-bottom: 14px; }

  /* SIN max-width, a propósito: el subtítulo tiene que caber en UNA sola línea.
     A este tamaño ocupa unos 600px de los 1232px útiles del contenedor, así
     que sigue quedando dentro de la mitad izquierda, que es la zona oscura del
     degradado. Tampoco se usa white-space: nowrap: en inglés o italiano la
     frase puede crecer, y es preferible que entonces pase a dos líneas a que
     se salga por el borde. */
  .gt-hero__subtitle { font-size: 1.125rem; margin-bottom: 34px; }

  /* max-width: none anula el límite de 60ch de la regla base, que aquí partía
     la frase en dos. Sin él ocupa unos 630px de los 1232px útiles: cabe en una
     línea y sigue dentro de la mitad izquierda, la zona oscura del degradado.
     Tampoco se usa nowrap, por lo mismo que en el subtítulo: en otro idioma la
     frase puede crecer y es preferible que pase a dos líneas antes que
     salirse por el borde. */
  .gt-hero__text     { font-size: 1.0625rem; max-width: none; margin-bottom: 38px; }

}

/* Desktop — a partir de 1024px
   El vídeo pasa a ocupar prácticamente el alto del viewport: es el elemento
   protagonista de la home. */
@media (min-width: 1024px) {

  .gt-hero {
    /* Un escalón más que en tableta: en escritorio el vídeo es el argumento de
       la página y necesita superficie. El tope en píxeles sigue puesto para que
       en una pantalla muy alta el hero no crezca a base de hueco vacío. */
    min-height: min(92vh, 880px);
    padding-block: 96px 112px;
  }

  .gt-hero__title    { font-size: 3rem;    margin-bottom: 16px; }
  .gt-hero__subtitle { font-size: 1.25rem; margin-bottom: 36px; }
  .gt-hero__text     { margin-bottom: 44px; }

  .gt-hero__scroll   { bottom: 32px; }

}

/* Desktop ancho — a partir de 1280px */
@media (min-width: 1280px) {

  .gt-hero__title    { font-size: 3.25rem; }
  .gt-hero__text     { font-size: 1.125rem; }

}


/* --------------------------------------------------------------------------
   Móvil en horizontal
   Un teléfono apaisado tiene muy poca altura: 70svh dejaría el botón fuera de
   pantalla. Se reduce el alto y se recortan los espacios.
   -------------------------------------------------------------------------- */

@media (max-height: 500px) and (orientation: landscape) {

  .gt-hero {
    min-height: 100svh;
    padding-block: 40px 56px;
  }

  .gt-hero__title    { font-size: 1.75rem; margin-bottom: 10px; }
  .gt-hero__subtitle { font-size: 1rem;    margin-bottom: 12px; }
  .gt-hero__text     { font-size: 0.9375rem; margin-bottom: 20px; }

  .gt-hero__scroll   { display: none; }

}


/* --------------------------------------------------------------------------
   Accesibilidad — movimiento reducido
   Quien haya pedido en su sistema que se reduzca el movimiento no debería
   recibir ni vídeo reproduciéndose solo, ni entradas animadas, ni un chevron
   rebotando. Queda el fondo corporativo y el contenido estático.
   -------------------------------------------------------------------------- */

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

  .gt-hero__video {
    display: none;
  }

  .gt-hero__title,
  .gt-hero__subtitle,
  .gt-hero__text,
  .gt-hero__actions,
  .gt-hero__scroll {
    animation: none;
  }

}