/* =========================================================
   ADJ Ingeniería y Construcción SAS — portal-clientes.css
   Componente independiente: sección "Acceso a clientes" /
   Portal de clientes. Autocontenido (tokens locales, clases
   con prefijo `.portal-clientes`) para poder moverse o
   reutilizarse sin depender de otras secciones del sitio.

   Estructura:
   1. Tokens de color locales
   2. Layout de la sección (grid de 2 columnas)
   3. Fondo con parallax y overlay (ver js/portal-clientes.js)
   4. Columna izquierda (eyebrow, título, descripción)
   5. Tarjeta del formulario
   6. Animación de entrada (IntersectionObserver, ver
      js/portal-clientes.js)
   7. Animación de llenado del botón
   8. Accesibilidad de movimiento reducido
   9. Responsive (tablet / móvil)
   ========================================================= */

/* ---------- 1. Tokens de color locales ---------- */
.portal-clientes {
  --portal-navy: #0D2435;
  --portal-white: #FFFFFF;
  --portal-accent: #73B8E8;
  --portal-text-muted: #AEBCC7;
  --portal-text-dark: var(--color-text-primary);
  --portal-form-muted: var(--color-text-secondary);
  --portal-field-bg: #F3F5F6;
  --portal-field-border: #D5DEE4;
  --portal-btn-base: #AEBCC5;
  --portal-btn-accent: #65B8EE;

  --portal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 2. Layout de la sección ---------- */
.portal-clientes {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background-color: var(--portal-navy);
  padding-block: calc(var(--header-height) + 48px) 64px;
  scroll-margin-top: var(--header-height);
}

/* ---------- 3. Fondo con parallax y overlay ----------
   Capa exclusiva para la fotografía (nunca opacity sobre la sección
   completa, para no afectar textos ni formulario). Se extiende 12%
   por encima/por debajo (`inset`) para tener margen de desplazamiento
   vertical sin dejar franjas vacías; `overflow: hidden` en la sección
   recorta ese excedente. js/portal-clientes.js solo actualiza la
   variable --parallax-y por frame; el resto es CSS puro. */
.portal-clientes__background {
  position: absolute;
  inset: -12% 0;
  z-index: -2;
  background-image: url('../assets/Fondo_seguimiento_de_obra.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.12;
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.08);
  will-change: transform;
  pointer-events: none;
}

.portal-clientes__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(13, 36, 53, 0.78);
  pointer-events: none;
}

.portal-clientes__container {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: clamp(20px, 6vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(420px, 0.9fr);
  align-items: center;
  column-gap: clamp(32px, 6vw, 96px);
  row-gap: 56px;
}

/* ---------- 4. Columna izquierda ---------- */
.portal-clientes__intro {
  max-width: 900px;
}

.portal-clientes__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--portal-text-muted);
}

.portal-clientes__eyebrow-line {
  display: inline-block;
  width: 44px;
  height: 3px;
  background-color: var(--portal-accent);
}

.portal-clientes__title {
  margin: 28px 0 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(4rem, 5.7vw, 7.2rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--portal-white);
  max-width: 20ch;
}

.portal-clientes__title-line {
  display: block;
}

.portal-clientes__description {
  margin: 40px 0 0;
  max-width: 850px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.125rem, 0.9rem + 0.7vw, 1.4375rem);
  line-height: 1.7;
  color: var(--portal-text-muted);
}

/* ---------- 5. Tarjeta del formulario ---------- */
.portal-clientes__card {
  width: 100%;
  max-width: 670px;
  margin-inline: auto 0;
  background-color: var(--portal-white);
  border-radius: 2px;
  box-shadow: 0 32px 64px -32px rgba(13, 36, 53, 0.32);
  padding: clamp(28px, 4vw, 56px);
}

.portal-clientes__card-heading {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.portal-clientes__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px;
}

.portal-clientes__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.portal-clientes__label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--portal-text-dark);
}

.portal-clientes__input {
  width: 100%;
  min-height: 68px;
  padding: 0 20px;
  border: 1px solid var(--portal-field-border);
  border-radius: 2px;
  background-color: var(--portal-field-bg);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--portal-text-dark);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.portal-clientes__input::placeholder {
  color: var(--portal-form-muted);
}

.portal-clientes__input:focus-visible {
  outline: none;
  border-color: var(--portal-accent);
  box-shadow: 0 0 0 3px rgba(115, 184, 232, 0.35);
}

.portal-clientes__submit {
  position: relative;
  overflow: hidden;
  min-height: 66px;
  margin-top: 8px;
  border: none;
  border-radius: 2px;
  background-color: var(--portal-btn-base);
  cursor: not-allowed;
  -webkit-tap-highlight-color: transparent;
}

.portal-clientes__submit-fill {
  position: absolute;
  inset: 0;
  background-color: var(--portal-btn-accent);
  transform: scaleX(0);
  transform-origin: left center;
  animation: portalButtonFill 4.4s var(--portal-ease) infinite;
  pointer-events: none;
}

.portal-clientes__submit:hover .portal-clientes__submit-fill {
  filter: brightness(1.06);
}

.portal-clientes__submit-label {
  position: relative;
  z-index: 2;
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--portal-white);
}

.portal-clientes__submit:focus-visible {
  outline: 2px solid var(--portal-accent);
  outline-offset: 3px;
}

.portal-clientes__note {
  margin: 20px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--portal-form-muted);
}

/* ---------- 6. Animación de entrada (JS agrega .is-visible) ----------
   Por defecto el contenido es completamente visible: así se ve íntegro
   si JavaScript está desactivado. Solo cuando portal-clientes.js confirma
   que puede animar, añade `.portal-clientes-js` a la sección y estas
   reglas ocultan los elementos para revelarlos con el IntersectionObserver. */
.portal-clientes-js .portal-clientes-reveal {
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  transition: opacity 1.3s var(--portal-ease), transform 1.3s var(--portal-ease);
  will-change: opacity, transform;
}

.portal-clientes-js .portal-clientes-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ---------- 7. Animación de llenado del botón ---------- */
@keyframes portalButtonFill {
  0% {
    transform: scaleX(0);
    transform-origin: left center;
  }

  60% {
    transform: scaleX(1);
    transform-origin: left center;
  }

  82% {
    transform: scaleX(1);
    transform-origin: left center;
  }

  83% {
    transform-origin: right center;
  }

  100% {
    transform: scaleX(0);
    transform-origin: right center;
  }
}

/* ---------- 8. Accesibilidad de movimiento reducido ----------
   portal-clientes.js ya evita añadir `.portal-clientes-js` (y por lo
   tanto el estado oculto) cuando el usuario prefiere movimiento
   reducido, así que el contenido permanece visible sin transición.
   Aquí solo se detiene el bucle infinito del botón. */
@media (prefers-reduced-motion: reduce) {
  .portal-clientes__submit-fill {
    animation: none;
    transform: scaleX(1);
  }
}

/* ---------- 9. Responsive ---------- */
@media (max-width: 960px) {
  .portal-clientes__container {
    grid-template-columns: 1fr;
  }

  .portal-clientes__card {
    max-width: 560px;
    margin-inline: 0;
  }

  .portal-clientes__title {
    font-size: clamp(2.75rem, 7vw, 4.5rem);
  }
}

@media (max-width: 640px) {
  .portal-clientes {
    padding-block: calc(var(--header-height) + 32px) 48px;
  }

  .portal-clientes__container {
    row-gap: 40px;
  }

  .portal-clientes__title {
    font-size: clamp(2.875rem, 11vw, 4rem);
  }

  .portal-clientes__description {
    margin-top: 28px;
  }

  .portal-clientes__card {
    max-width: none;
  }

  .portal-clientes__form {
    gap: 20px;
  }
}