/* ==========================================================================
   HEADER + BOTÓN FLOTANTE
   ========================================================================== */


/* --------------------------------------------------------------------------
   Header
   Tres columnas: navegación (vacía por ahora) · logo · selector de idioma
   (vacío por ahora). El logo siempre queda centrado.
   -------------------------------------------------------------------------- */

.site-header {
  position: relative;
  z-index: 2;              /* el logo queda por encima de la portada del hero */
  padding: 50px var(--page-gutter) 0;
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

/* Columna derecha del header: solo posiciona los botones de idioma
   (sin fondo ni borde: no es una caja visual) */
.site-header__actions {
  --lang-width: 79px;    /* ✏️ tamaño de cada botón en escritorio */
  --lang-height: 40px;

  position: relative;
  top: 6px;          /* ✏️ baja los botones sin cambiar la altura del header */
  justify-self: end;
  display: flex;     /* ES y EN pegados, sin separación */
}


/* --------------------------------------------------------------------------
   Botones de idioma ES | EN
   Dos enlaces (cada idioma es una página). data-active="es" | "en" en el
   contenedor indica el idioma activo. Cada botón tiene tres capas, cada una
   con una sola responsabilidad:
     1. Fondo: el degradado inactivo (siempre presente).
     2. ::before — el color dorado. En reposo cubre el botón activo; al cambiar
        de idioma se desplaza como una onda por los dos botones (recortada a la
        forma de cada uno) y deja el degradado detrás.
     3. ::after — el borde de 1px, solo en el botón activo. No se mueve ni se
        anima: cambia de botón directamente.
   El texto va por encima de todo. js/language-switch.js navega al terminar.
   -------------------------------------------------------------------------- */

.language-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--lang-width);
  height: var(--lang-height);
  overflow: hidden;      /* la onda dorada no sale de la forma del botón */
  isolation: isolate;
  border-radius: 112px;
  background: linear-gradient(to right, #EDE6D6, #D1CBBF);   /* ✏️ idioma inactivo */
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: calc(var(--lang-height) * 0.47);   /* ✏️ ≈19px en escritorio, 12px en móvil */
  line-height: 1;
}

.language-button__label {
  position: relative;
  z-index: 2;   /* el texto siempre por encima del dorado y del borde */
}

.language-button:focus-visible {
  outline: 2px solid var(--color-ink);   /* foco con teclado */
  outline-offset: 2px;
}

/* 2. Color dorado. "left" está en % del ancho de un botón y en coordenadas de
   cada botón: 0 = cubre este botón; -100% / 100% = fuera, a un lado. */
.language-button::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  z-index: 0;
  width: 100%;
  background-color: var(--color-gold);   /* #C79C57 */
  pointer-events: none;
  /* Extremos difuminados: la máscara deja el centro opaco y vuelve
     transparentes los dos extremos en un ancho --wave-fade. En reposo vale 0%
     (botón activo dorado sólido); durante la onda crece (ver más abajo). */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 var(--wave-fade), #000 calc(100% - var(--wave-fade)), transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0, #000 var(--wave-fade), #000 calc(100% - var(--wave-fade)), transparent 100%);
}

/* Ancho del difuminado de cada extremo, en % de la franja. Registrada para
   que el navegador pueda animarla de forma continua. */
@property --wave-fade {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.language-switch[data-active="es"] .language-button[hreflang="es"]::before,
.language-switch[data-active="en"] .language-button[hreflang="en"]::before {
  left: 0;
}

.language-switch[data-active="es"] .language-button[hreflang="en"]::before {
  left: -100%;
}

/* 3. Borde del botón activo: capa propia, independiente del color */
.language-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid var(--color-ink);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.language-switch[data-active="es"] .language-button[hreflang="es"]::after,
.language-switch[data-active="en"] .language-button[hreflang="en"]::after {
  opacity: 1;
}

/* Onda dorada al cambiar de idioma (js/language-switch.js añade
   "is-switching"). Es la misma franja recorriendo el selector de un botón al
   otro: cada botón la dibuja en sus coordenadas (el de EN, un botón más a la
   izquierda). A mitad de camino mide el 80% de un botón y cruza la unión, así
   que el degradado se ve delante y detrás. La primera mitad acelera y la
   segunda frena, sin detenerse en medio.
   En paralelo, "language-wave-fade" difumina los extremos de la franja
   mientras se mueve (en el inicio y el final coinciden con los bordes del
   botón, así que ahí vuelven a ser nítidos sin que se note). */
.language-switch.is-switching[data-active="en"] .language-button[hreflang="es"]::before { animation: language-wave-to-en-on-es 420ms forwards, language-wave-fade 420ms forwards; }
.language-switch.is-switching[data-active="en"] .language-button[hreflang="en"]::before { animation: language-wave-to-en-on-en 420ms forwards, language-wave-fade 420ms forwards; }
.language-switch.is-switching[data-active="es"] .language-button[hreflang="es"]::before { animation: language-wave-to-es-on-es 420ms forwards, language-wave-fade 420ms forwards; }
.language-switch.is-switching[data-active="es"] .language-button[hreflang="en"]::before { animation: language-wave-to-es-on-en 420ms forwards, language-wave-fade 420ms forwards; }

/* ✏️ 35% = cuánto de la franja ocupa el difuminado en cada extremo */
@keyframes language-wave-fade {
  0%   { --wave-fade: 0%; }
  25%  { --wave-fade: 35%; }
  75%  { --wave-fade: 35%; }
  100% { --wave-fade: 0%; }
}

/* ✏️ Los cuatro keyframes describen la misma franja (inicio · mitad · final) */
@keyframes language-wave-to-en-on-es {
  0%   { left: 0;    width: 100%; animation-timing-function: cubic-bezier(0.45, 0, 0.85, 0.55); }
  50%  { left: 60%;  width: 80%;  animation-timing-function: cubic-bezier(0.15, 0.45, 0.55, 1); }
  100% { left: 100%; width: 100%; }
}

@keyframes language-wave-to-en-on-en {
  0%   { left: -100%; width: 100%; animation-timing-function: cubic-bezier(0.45, 0, 0.85, 0.55); }
  50%  { left: -40%;  width: 80%;  animation-timing-function: cubic-bezier(0.15, 0.45, 0.55, 1); }
  100% { left: 0;     width: 100%; }
}

@keyframes language-wave-to-es-on-es {
  0%   { left: 100%; width: 100%; animation-timing-function: cubic-bezier(0.45, 0, 0.85, 0.55); }
  50%  { left: 60%;  width: 80%;  animation-timing-function: cubic-bezier(0.15, 0.45, 0.55, 1); }
  100% { left: 0;    width: 100%; }
}

@keyframes language-wave-to-es-on-en {
  0%   { left: 0;    width: 100%; animation-timing-function: cubic-bezier(0.45, 0, 0.85, 0.55); }
  50%  { left: -40%; width: 80%;  animation-timing-function: cubic-bezier(0.15, 0.45, 0.55, 1); }
  100% { left: -100%; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .language-switch.is-switching .language-button::before {
    animation: none;
  }
}

/* En pantallas estrechas (móvil y tablet vertical) no caben junto al logo:
   los botones suben por encima del logo, centrados en la pantalla, para no
   encimarse. 860px = ancho a partir del cual caben a su lado. */
@media (max-width: 860px) {
  .site-header__actions {
    position: absolute;
    top: 28px;   /* ✏️ distancia desde el borde superior de la pantalla */
    left: 0;
    right: 0;
    justify-self: center;   /* anula el "end" de escritorio: centrados en la pantalla */

    /* Botones más pequeños en móvil (misma proporción 79×40) */
    --lang-height: 26px;                          /* ✏️ ≈ 51×26 */
    --lang-width: calc(var(--lang-height) * 79 / 40);
  }
}

/* Título del sitio: logotipo original en SVG (assets/img/harbin.svg, 680×72).
   Ocupa el mismo recuadro que tenía titulo.png: 534×56 en escritorio y
   proporcional en pantallas estrechas, así el encabezado y la portada no
   se mueven. El SVG conserva su proporción (mide 534×56.5: ese medio píxel
   sobresale del recuadro sin empujar nada). */
.site-header__title {
  --title-width: min(534px, calc(100vw - 40px));  /* ✏️ ancho del logotipo */

  position: relative;
  top: 24px;                                       /* ✏️ algo más de aire arriba, sin mover el header */
  height: calc(var(--title-width) * 56 / 534);    /* alto del recuadro que ocupaba titulo.png */
  line-height: 0;
}

.site-header__title img {
  display: block;
  width: var(--title-width);
  height: auto;
}


/* --------------------------------------------------------------------------
   Botón flotante "Empieza tu proyecto ahora →"
   Fijo abajo y centrado en todas las pantallas.
   -------------------------------------------------------------------------- */

.floating-cta {
  position: fixed;
  left: 50%;
  bottom: 40px;
  z-index: 10;
  transform: translateX(-50%);
  width: min(620px, calc(100vw - 32px));             /* ✏️ 900px en escritorio; en pantallas pequeñas, 16px de margen a cada lado */
  /* Centrado vertical: las mayúsculas no usan el espacio para descendentes
     que reserva la fuente (≈0.17em); se pasa la mitad del padding de abajo
     a arriba (mismo alto total) para que el texto quede al centro. */
  padding: calc(12px + 0.083em) 24px calc(12px - 0.083em);
  border: 1px solid rgba(35, 34, 32, 0.55);          /* ✏️ borde fino y translúcido */
  border-radius: 112px;
  background-color: rgba(237, 230, 214, 0.7);        /* alternativa si el navegador no admite el desenfoque */
  box-shadow:
    0 4px 18px rgba(35, 34, 32, 0.08),               /* sombra suave */
    inset 0 1px 0 rgba(255, 255, 255, 0.35);         /* brillo fino en el borde superior, como un cristal */
  color: var(--color-gold);
  font-family: var(--font-body);
  font-size: clamp(10px, calc(4.2vw - 4px), 24px);   /* 4px menos que antes en todos los anchos */
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.3s, color 0.3s;
}

/* Efecto cristal esmerilado: fondo más transparente que desenfoca lo que
   hay detrás (no el texto). Solo en navegadores que lo admiten. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .floating-cta {
    background-color: rgba(237, 230, 214, 0.28);       /* ✏️ transparencia del cristal */
    -webkit-backdrop-filter: blur(12px) saturate(140%);
            backdrop-filter: blur(12px) saturate(140%); /* ✏️ intensidad del desenfoque */
  }
}

/* La flecha se dibuja más baja que las mayúsculas: se sube para alinearla con ellas */
.floating-cta__arrow {
  display: inline-block;
  transform: translateY(-0.067em);
}

.floating-cta:hover,
.floating-cta:focus-visible {
  background-color: var(--color-gold);
  color: var(--color-ink);
}

@media (max-width: 767px) {
  .floating-cta {
    /* ✏️ Mismo alto que los campos del formulario (.contact-form__input en
       contact.css: 28px × 1.4 de línea + 5px arriba y abajo + 1px de borde
       = 51.2px). El padding vertical rellena lo que falta hasta ese alto
       (texto de 1em + 2px de borde) y conserva la corrección de centrado. */
    --cta-height: calc(28px * 1.4 + 2 * 5px + 2 * 1px);

    /* Mismo ancho y bordes que los campos del formulario: .contact deja
       --page-gutter a cada lado y los campos ocupan el resto (width: 100%) */
    width: calc(100% - 2 * var(--page-gutter));
    border-color: var(--color-ink);   /* mismo borde que los campos del formulario (1px, #232220) */
    bottom: 24px;
    padding:
      calc((var(--cta-height) - 1em - 2px) / 2 + 0.083em) 28px
      calc((var(--cta-height) - 1em - 2px) / 2 - 0.083em);
  }
}