/* ==========================================================
   RESET GLOBAL
========================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /*
    Hace que los enlaces como #producto hagan scroll
    suavemente hasta su sección.
  */
  scroll-behavior: smooth;
}

html,
body,
#root {
  width: 100%;

  min-height: 100%;

  margin: 0;
  padding: 0;
}

body {
  margin: 0;

  /*
    Por ahora usamos una familia del sistema.
    Después podemos escoger la tipografía definitiva
    para Project3D.
  */
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background: #ffffff;

  color: #111111;

  /* Mejora ligeramente el renderizado de tipografía. */
  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;
}

button,
input,
textarea,
select {
  font: inherit;
}

img {
  max-width: 100%;

  display: block;
}

a {
  color: inherit;
}



/* ==========================================================
   SCROLLBAR GLOBAL
========================================================== */

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: #4682b4 #0a0a0a;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #0a0a0a; /* negro */
}

::-webkit-scrollbar-thumb {
  background: #4682b4;
  border-radius: 999px;
  border: 2px solid #0a0a0a; /* hace que combine con el fondo negro */
}

::-webkit-scrollbar-thumb:hover {
  background: #5b94c1;
}

/* ==========================================================
   PRODUCT SHOWCASE
   ----------------------------------------------------------
   Sección principal donde mostramos las funcionalidades de
   Project3D mediante videos demostrativos.

   Estructura en escritorio:
   - Lista de funciones a la izquierda.
   - Video a la derecha.

   Estructura en móvil:
   - Video primero.
   - Funciones debajo.
========================================================== */

/* ==========================================================
   SECCIÓN PRINCIPAL
========================================================== */

._section_17rmv_20 {
  background: #0c0f12;

  color: #ffffff;

  padding:
    clamp(48px, 3vw, 64px)
    clamp(24px, 6vw, 100px)
    clamp(110px, 10vw, 160px);
}

._container_17rmv_31 {
  width: 100%;

  max-width: 1600px;

  margin: 0 auto;
}

/* ==========================================================
   ENCABEZADO
========================================================== */

._header_17rmv_43 {
  display: grid;

  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(280px, 0.7fr);

  gap: clamp(50px, 7vw, 110px);

  align-items: end;

  margin-bottom: clamp(75px, 9vw, 135px);
}

._headerTitle_17rmv_57 {
  min-width: 0;
}

._eyebrow_17rmv_61 {
  display: block;

  margin-bottom: 27px;

  color: #6e9fc4;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}

._title_17rmv_77 {
  margin: 0;

  color: #ffffff;

  font-size: clamp(52px, 7vw, 110px);

  font-weight: 500;

  line-height: 0.91;

  letter-spacing: -0.06em;
}

._title_17rmv_77 span {
  color: rgba(255, 255, 255, 0.38);
}

._intro_17rmv_95 {
  max-width: 560px;

  margin: 0;

  color: rgba(255, 255, 255, 0.58);

  font-size: clamp(17px, 1.4vw, 21px);

  line-height: 1.65;
}

/* ==========================================================
   CONTENIDO PRINCIPAL
========================================================== */

._showcase_17rmv_111 {
  display: grid;

  /*
    La lista recibe menos espacio y el video
    recibe la mayor parte del ancho.
  */
  grid-template-columns:
    minmax(300px, 0.75fr)
    minmax(0, 1.7fr);

  gap: clamp(55px, 7vw, 120px);

  align-items: center;
}

/* ==========================================================
   LISTA DE FUNCIONALIDADES
========================================================== */

._featureList_17rmv_131 {
  width: 100%;

  display: flex;

  flex-direction: column;
}

._featureButton_17rmv_139 {
  width: 100%;

  border: 0;

  border-top: 1px solid rgba(255, 255, 255, 0.12);

  background: transparent;

  color: inherit;

  padding: 29px 0;

  display: grid;

  grid-template-columns:
    42px
    minmax(0, 1fr)
    28px;

  gap: 14px;

  align-items: start;

  text-align: left;

  cursor: pointer;

  transition:
    border-color 250ms ease,
    opacity 250ms ease;
}

._featureButton_17rmv_139:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* ==========================================================
   NÚMERO
========================================================== */

._featureNumber_17rmv_180 {
  padding-top: 4px;

  color: rgba(255, 255, 255, 0.27);

  font-size: 10px;

  letter-spacing: 0.1em;

  transition: color 250ms ease;
}

/* ==========================================================
   TEXTO DE FUNCIONALIDAD
========================================================== */

._featureContent_17rmv_196 {
  min-width: 0;
}

._featureTitle_17rmv_200 {
  display: block;

  color: rgba(255, 255, 255, 0.48);

  font-size: clamp(20px, 1.65vw, 27px);

  font-weight: 500;

  line-height: 1.2;

  letter-spacing: -0.025em;

  transition: color 250ms ease;
}

/* ==========================================================
   DESCRIPCIÓN DESPLEGABLE
========================================================== */

._descriptionWrapper_17rmv_220 {
  /*
    Esta técnica permite animar la altura de contenido
    dinámico sin utilizar un height fijo.
  */
  display: grid;

  grid-template-rows: 0fr;

  opacity: 0;

  transition:
    grid-template-rows 350ms ease,
    opacity 350ms ease;
}

._descriptionWrapperActive_17rmv_236 {
  grid-template-rows: 1fr;

  opacity: 1;
}

._featureDescription_17rmv_242 {
  overflow: hidden;

  max-width: 430px;

  margin: 0;

  padding-top: 0;

  color: rgba(255, 255, 255, 0.47);

  font-size: 14px;

  line-height: 1.7;

  transition: padding-top 350ms ease;
}

._descriptionWrapperActive_17rmv_236 ._featureDescription_17rmv_242 {
  padding-top: 18px;
}

/* ==========================================================
   FLECHA
========================================================== */

._featureArrow_17rmv_268 {
  padding-top: 1px;

  color: rgba(255, 255, 255, 0.22);

  font-size: 20px;

  opacity: 0;

  transform: translateX(-8px);

  transition:
    color 250ms ease,
    opacity 250ms ease,
    transform 250ms ease;
}

/* ==========================================================
   FUNCIONALIDAD ACTIVA
========================================================== */

._featureButtonActive_17rmv_289 {
  border-top-color: rgba(70, 130, 180, 0.7);
}

._featureButtonActive_17rmv_289 ._featureNumber_17rmv_180 {
  color: #6e9fc4;
}

._featureButtonActive_17rmv_289 ._featureTitle_17rmv_200 {
  color: #ffffff;
}

._featureButtonActive_17rmv_289 ._featureArrow_17rmv_268 {
  color: #6e9fc4;

  opacity: 1;

  transform: translateX(0);
}

/* ==========================================================
   HOVER
========================================================== */

._featureButton_17rmv_139:not(._featureButtonActive_17rmv_289):hover ._featureTitle_17rmv_200 {
  color: rgba(255, 255, 255, 0.82);
}

/* ==========================================================
   ÁREA DEL VIDEO
========================================================== */

._visual_17rmv_321 {
  min-width: 0;
}

/* ==========================================================
   FRAME DEL VIDEO
   ----------------------------------------------------------
   Sustituye al antiguo marco tipo navegador.

   La idea es mostrar el producto como una pieza visual
   limpia y premium.
========================================================== */

._videoFrame_17rmv_334 {
  position: relative;

  width: 100%;

  /*
    Un pequeño padding crea el marco alrededor del video
    sin hacerlo demasiado pesado.
  */
  padding: 10px;

  border: 1px solid rgba(255, 255, 255, 0.09);

  border-radius: 22px;

  background: rgba(255, 255, 255, 0.035);

  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.28);
}

/* ==========================================================
   FRANJA SUPERIOR
========================================================== */

._videoTopBar_17rmv_358 {
  height: 42px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding: 0 8px;
}

/* ==========================================================
   PROJECT3D
========================================================== */

._videoBrand_17rmv_376 {
  display: flex;

  align-items: center;

  gap: 8px;

  color: rgba(255, 255, 255, 0.62);

  font-size: 10px;

  font-weight: 500;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}

/* ==========================================================
   PUNTO AZUL DE ESTADO
========================================================== */

._videoStatusDot_17rmv_398 {
  width: 6px;

  height: 6px;

  flex-shrink: 0;

  border-radius: 50%;

  background: #6e9fc4;

  box-shadow: 0 0 0 4px rgba(110, 159, 196, 0.1);
}

/* ==========================================================
   TEXTO SUPERIOR DERECHO
========================================================== */

._videoType_17rmv_416 {
  color: rgba(255, 255, 255, 0.28);

  font-size: 9px;

  letter-spacing: 0.09em;

  text-transform: uppercase;
}

/* ==========================================================
   CONTENEDOR DEL VIDEO
========================================================== */

._videoWrapper_17rmv_430 {
  position: relative;

  width: 100%;

  /*
    Tus videos están grabados en 16:9.

    Mantenemos exactamente esa relación para que
    nunca se corten los laterales.
  */
  aspect-ratio: 16 / 9;

  overflow: hidden;

  border-radius: 14px;

  background: #080b0d;

  animation: _videoReveal_17rmv_1 550ms ease;
}

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

._video_17rmv_334 {
  display: block;

  width: 100%;

  height: 100%;

  /*
    contain garantiza que la interfaz completa sea visible.

    Esto es especialmente importante porque mostramos
    software y no una fotografía decorativa.
  */
  object-fit: contain;

  object-position: center;

  background: #080b0d;
}

/* ==========================================================
   FRANJA INFERIOR
========================================================== */

._videoBottomBar_17rmv_480 {
  min-height: 42px;

  display: flex;

  align-items: center;

  gap: 11px;

  padding: 0 8px;

  color: rgba(255, 255, 255, 0.32);

  font-size: 9px;

  letter-spacing: 0.07em;

  text-transform: uppercase;
}

/*
  El número activo utiliza el color de identidad.
*/
._videoBottomBar_17rmv_480 > span:first-child {
  color: #6e9fc4;
}

/* ==========================================================
   LÍNEA DECORATIVA
========================================================== */

._videoLine_17rmv_511 {
  flex: 1;

  height: 1px;

  background: rgba(255, 255, 255, 0.08);
}

/* ==========================================================
   CAMBIO DE VIDEO
========================================================== */

@keyframes _videoReveal_17rmv_1 {
  from {
    opacity: 0;

    transform: scale(0.995);
  }

  to {
    opacity: 1;

    transform: scale(1);
  }
}

/* ==========================================================
   METADATA ANTIGUA
   ----------------------------------------------------------
   Si todavía tienes el antiguo .visualMeta dentro del TSX,
   lo ocultamos.

   Mi recomendación es borrarlo después del TSX porque
   ahora esa información aparece dentro de videoBottomBar.
========================================================== */

._visualMeta_17rmv_540 {
  display: none;
}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1050px) {
  ._header_17rmv_43 {
    grid-template-columns: 1fr;

    gap: 36px;
  }

  ._intro_17rmv_95 {
    max-width: 650px;
  }

  /*
    En tablet pasamos a una sola columna.

    Todavía mantenemos primero las funciones y luego el video.
  */
  ._showcase_17rmv_111 {
    grid-template-columns: 1fr;

    gap: 55px;
  }

  /*
    Con cinco opciones mantenemos la lista vertical.

    Evita que "Ubicación inteligente" quede sola
    en una segunda columna.
  */
  ._featureList_17rmv_131 {
    display: flex;

    flex-direction: column;
  }
}

/* ==========================================================
   MÓVIL
========================================================== */

@media (max-width: 640px) {
  ._section_17rmv_20 {
    padding: 100px 22px;
  }

  ._header_17rmv_43 {
    margin-bottom: 60px;

    gap: 32px;
  }

  ._title_17rmv_77 {
    font-size: clamp(48px, 14vw, 68px);
  }

  ._intro_17rmv_95 {
    font-size: 16px;
  }

  /* ========================================================
     ORDEN EN MÓVIL
     --------------------------------------------------------
     Cambiamos visualmente:

     Escritorio:
     Funciones → Video

     Móvil:
     Video → Funciones
  ======================================================== */

  ._showcase_17rmv_111 {
    gap: 32px;
  }

  ._visual_17rmv_321 {
    order: 1;
  }

  ._featureList_17rmv_131 {
    order: 2;

    display: flex;

    flex-direction: column;
  }

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

  ._featureButton_17rmv_139 {
    grid-template-columns:
      33px
      minmax(0, 1fr)
      23px;

    gap: 12px;

    padding: 23px 0;
  }

  ._featureTitle_17rmv_200 {
    font-size: 19px;
  }

  ._featureDescription_17rmv_242 {
    max-width: 100%;

    font-size: 13px;

    line-height: 1.65;
  }

  /* ========================================================
     FRAME
  ======================================================== */

  ._videoFrame_17rmv_334 {
    /*
      En móvil utilizamos un marco todavía más pequeño
      para aprovechar mejor el ancho disponible.
    */
    padding: 6px;

    border-radius: 16px;
  }

  /* ========================================================
     PARTE SUPERIOR
  ======================================================== */

  ._videoTopBar_17rmv_358 {
    height: 34px;

    padding: 0 6px;
  }

  ._videoBrand_17rmv_376 {
    gap: 6px;

    font-size: 8px;
  }

  ._videoStatusDot_17rmv_398 {
    width: 5px;

    height: 5px;

    box-shadow: 0 0 0 3px rgba(110, 159, 196, 0.1);
  }

  ._videoType_17rmv_416 {
    font-size: 7px;
  }

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

  ._videoWrapper_17rmv_430 {
    /*
      Seguimos conservando 16:9.

      NO usamos 4:3 porque eso volvería a alterar
      la proporción del video.
    */
    aspect-ratio: 16 / 9;

    border-radius: 10px;
  }

  /* ========================================================
     PARTE INFERIOR
  ======================================================== */

  ._videoBottomBar_17rmv_480 {
    min-height: 34px;

    gap: 8px;

    padding: 0 6px;

    font-size: 7px;
  }
}

/* ==========================================================
   MÓVILES MUY PEQUEÑOS
========================================================== */

@media (max-width: 400px) {
  /*
    Si el teléfono es muy estrecho podemos ocultar
    el texto "Demo interactiva" y dejar solo Project3D.
  */
  ._videoType_17rmv_416 {
    display: none;
  }

  ._section_17rmv_20 {
    padding-left: 18px;

    padding-right: 18px;
  }
}

/* ==========================================================
   ACCESIBILIDAD
   ----------------------------------------------------------
   Si el usuario ha solicitado reducir animaciones desde
   su sistema operativo, eliminamos transiciones innecesarias.
========================================================== */

@media (prefers-reduced-motion: reduce) {
  ._videoWrapper_17rmv_430 {
    animation: none;
  }

  ._descriptionWrapper_17rmv_220 {
    transition: none;
  }

  ._featureArrow_17rmv_268,
  ._featureNumber_17rmv_180,
  ._featureTitle_17rmv_200 {
    transition: none;
  }
}
/* ==========================================================
   PROJECTS SECTION
========================================================== */

._section_hni6a_5 {
  background: #f5f5f3;

  color: #171717;

   

  padding:
    clamp(48px, 3vw, 64px)
    clamp(24px, 6vw, 100px)
    clamp(110px, 10vw, 160px);

}

._container_hni6a_19 {
  width: 100%;

  max-width: 1600px;

  margin: 0 auto;
}

/* ==========================================================
   HEADER
========================================================== */

._header_hni6a_31 {
  display: grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(280px, 0.65fr);

  gap: clamp(50px, 7vw, 110px);

  align-items: end;

  margin-bottom: clamp(70px, 8vw, 120px);
}

._eyebrow_hni6a_45 {
  display: block;

  margin-bottom: 26px;

  color: #4682b4;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

._title_hni6a_61 {
  margin: 0;

  color: #171717;

  font-size: clamp(50px, 6.5vw, 105px);

  font-weight: 500;

  line-height: 0.92;

  letter-spacing: -0.06em;
}

._title_hni6a_61 span {
  color: #95999c;
}

._intro_hni6a_79 {
  max-width: 540px;

  margin: 0;

  color: #686d71;

  font-size: clamp(17px, 1.4vw, 20px);

  line-height: 1.65;
}

/* ==========================================================
   GRID DE PROYECTOS
   ----------------------------------------------------------
   Con un solo proyecto ocupa todo el ancho.

   Cuando agreguemos más, automáticamente tendremos
   dos columnas en escritorio.
========================================================== */

._projects_hni6a_100 {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: clamp(30px, 4vw, 60px);
}

/*
  Si solamente existe un proyecto, hacemos que ocupe
  las dos columnas.
*/
._project_hni6a_100:only-child {
  grid-column: 1 / -1;
}

/* ==========================================================
   PROYECTO
========================================================== */

._project_hni6a_100 {
  min-width: 0;
}

/* ==========================================================
   IMAGEN / ENLACE
========================================================== */

._visual_hni6a_128 {
  position: relative;

  display: block;

  width: 100%;

  /*
    Una proporción amplia funciona bien para renders
    arquitectónicos y capturas de showrooms.
  */
  aspect-ratio: 16 / 9;

  overflow: hidden;

  border-radius: 20px;

  background: #d9dbda;

  color: #ffffff;

  text-decoration: none;
}

/* ==========================================================
   IMAGEN
========================================================== */

._image_hni6a_156 {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;

  /*
    Dejamos una transición lenta para que el hover
    sea elegante y no agresivo.
  */
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

._visual_hni6a_128:hover ._image_hni6a_156 {
  transform: scale(1.025);
}

/* ==========================================================
   OVERLAY
========================================================== */

._overlay_hni6a_181 {
  position: absolute;

  inset: 0;

  /*
    Principalmente oscurecemos la zona inferior,
    donde estarán los textos.
  */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.05) 35%,
    rgba(0, 0, 0, 0.65) 100%
  );

  transition: background 400ms ease;

  pointer-events: none;
}

._visual_hni6a_128:hover ._overlay_hni6a_181 {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 25%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

/* ==========================================================
   CONTENIDO SOBRE LA IMAGEN
========================================================== */

._imageContent_hni6a_213 {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 30px;

  padding: clamp(24px, 4vw, 60px);
}

/* ==========================================================
   NOMBRE
========================================================== */

._imageTitle_hni6a_233 > span {
  display: block;

  margin-bottom: 10px;

  color: rgba(255, 255, 255, 0.62);

  font-size: 9px;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

._imageTitle_hni6a_233 h3 {
  margin: 0;

  color: #ffffff;

  font-size: clamp(40px, 6vw, 90px);

  font-weight: 500;

  line-height: 0.9;

  letter-spacing: -0.055em;
}

/* ==========================================================
   EXPLORAR PROYECTO
========================================================== */

._openProject_hni6a_265 {
  display: flex;

  align-items: center;

  gap: 12px;

  flex-shrink: 0;

  color: rgba(255, 255, 255, 0.8);

  font-size: 11px;

  font-weight: 500;

  letter-spacing: 0.02em;
}

._openProject_hni6a_265 svg {
  width: 22px;

  height: 22px;

  transition: transform 250ms ease;
}

._visual_hni6a_128:hover ._openProject_hni6a_265 svg {
  transform: translate(3px, -3px);
}

/* ==========================================================
   INFO DEBAJO
========================================================== */

._projectInfo_hni6a_299 {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 30px;

  margin-top: 19px;
}
/* ==========================================================
   IDENTIDAD DEL PROYECTO
========================================================== */

._projectIdentity_hni6a_314 {
  display: flex;

  flex-direction: column;

  gap: 5px;
}

._projectIdentity_hni6a_314 h3 {
  margin: 0;

  color: #252729;

  font-size: 16px;

  font-weight: 600;
}

/* ==========================================================
   EMPRESA / DESARROLLADOR
========================================================== */

._projectCompany_hni6a_336 {
  color: #92979a;

  font-size: 10px;

  font-weight: 500;

  letter-spacing: 0.04em;
}

._imageCompany_hni6a_346 {
  display: block;

  margin-top: 12px;

  color: rgba(255, 255, 255, 0.68);

  font-size: 11px;

  font-weight: 500;

  letter-spacing: 0.04em;

  text-transform: none;
}
/* ==========================================================
   METADATA
========================================================== */

._projectMeta_hni6a_365 {
  display: flex;

  align-items: center;

  gap: 18px;
}

._projectMeta_hni6a_365 span {
  color: #8d9295;

  font-size: 10px;

  letter-spacing: 0.05em;

  text-transform: uppercase;
}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1000px) {
  ._header_hni6a_31 {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  ._intro_hni6a_79 {
    max-width: 650px;
  }

  /*
    En tablet mostramos un proyecto por fila.
  */
  ._projects_hni6a_100 {
    grid-template-columns: 1fr;
  }

  ._project_hni6a_100:only-child {
    grid-column: auto;
  }
}

/* ==========================================================
   MÓVIL
========================================================== */

@media (max-width: 640px) {
  ._section_hni6a_5 {
    padding: 100px 22px;
  }

  ._header_hni6a_31 {
    margin-bottom: 60px;
  }

  ._title_hni6a_61 {
    font-size: clamp(46px, 13vw, 64px);
  }

  /*
    Hacemos la imagen ligeramente más vertical para
    que tenga mayor presencia en pantalla móvil.
  */
  ._visual_hni6a_128 {
    aspect-ratio: 4 / 3;

    border-radius: 14px;
  }

  ._imageContent_hni6a_213 {
    padding: 20px;

    align-items: flex-end;
  }

  ._imageTitle_hni6a_233 h3 {
    font-size: clamp(38px, 13vw, 58px);
  }

  /*
    No necesitamos escribir "Explorar proyecto"
    en móvil. La flecha comunica que es interactivo.
  */
  ._openProject_hni6a_265 > span {
    display: none;
  }

  ._openProject_hni6a_265 svg {
    width: 24px;

    height: 24px;
  }

  ._projectInfo_hni6a_299 {
    flex-direction: column;

    gap: 9px;

    margin-top: 15px;
  }

  ._projectInfo_hni6a_299 > div {
    gap: 12px;
  }
}

/* ==========================================================
   ACCESIBILIDAD
========================================================== */

@media (prefers-reduced-motion: reduce) {
  ._image_hni6a_156,
  ._openProject_hni6a_265 svg {
    transition: none;
  }
}
/* ==========================================================
   SOLUTIONS SECTION
   ----------------------------------------------------------
   Sección editorial que explica los distintos escenarios
   donde puede utilizarse Project3D.

   No utilizamos tarjetas.
   Cada solución funciona como una fila amplia.
========================================================== */

/* ==========================================================
   SECCIÓN
========================================================== */

._section_hyu63_15 {
  background: #ffffff;

  color: #171717;

  padding:
    clamp(48px, 3vw, 64px)
    clamp(24px, 6vw, 100px)
    clamp(110px, 10vw, 160px);
}

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

._container_hyu63_30 {
  width: 100%;

  max-width: 1600px;

  margin: 0 auto;
}

/* ==========================================================
   ENCABEZADO
========================================================== */

._header_hyu63_42 {
  display: grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(280px, 0.65fr);

  gap: clamp(50px, 7vw, 110px);

  align-items: end;

  margin-bottom: clamp(75px, 9vw, 135px);
}

._headerTitle_hyu63_56 {
  min-width: 0;
}

/* ==========================================================
   ETIQUETA
========================================================== */

._eyebrow_hyu63_64 {
  display: block;

  margin-bottom: 26px;

  color: #4682b4;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

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

._title_hyu63_84 {
  max-width: 1100px;

  margin: 0;

  color: #171717;

  font-size: clamp(50px, 6.5vw, 105px);

  font-weight: 500;

  line-height: 0.92;

  letter-spacing: -0.06em;
}

/*
  Segunda línea con menor contraste.

  Mantiene el mismo lenguaje visual de:
  - Producto
  - Proyectos
  - Contacto
*/
._title_hyu63_84 span {
  color: #969b9e;
}

/* ==========================================================
   INTRODUCCIÓN
========================================================== */

._intro_hyu63_116 {
  max-width: 540px;

  margin: 0;

  color: #686d71;

  font-size: clamp(17px, 1.4vw, 20px);

  line-height: 1.65;
}

/* ==========================================================
   LISTA
========================================================== */

._solutions_hyu63_132 {
  width: 100%;

  border-top: 1px solid rgba(20, 20, 20, 0.13);
}

/* ==========================================================
   FILA DE SOLUCIÓN
========================================================== */

._solution_hyu63_132 {
  position: relative;

  display: grid;

  /*
    Número | título/contenido | flecha
  */
  grid-template-columns:
    80px
    minmax(0, 1fr)
    55px;

  gap: clamp(20px, 3vw, 45px);

  align-items: start;

  padding: clamp(36px, 4vw, 58px) 0;

  border-bottom: 1px solid rgba(20, 20, 20, 0.13);

  overflow: hidden;
}

/* ==========================================================
   FONDO DE HOVER
   ----------------------------------------------------------
   Creamos el efecto mediante ::before para no modificar
   directamente el contenido.
========================================================== */

._solution_hyu63_132::before {
  content: "";

  position: absolute;

  inset: 0;

  background: #f5f5f3;

  opacity: 0;

  transform: scaleY(0.8);

  transition:
    opacity 300ms ease,
    transform 400ms cubic-bezier(0.16, 1, 0.3, 1);

  pointer-events: none;
}

/*
  En hover aparece un fondo muy suave.
*/
._solution_hyu63_132:hover::before {
  opacity: 1;

  transform: scaleY(1);
}

/*
  Todos los elementos reales deben quedar
  por encima del fondo.
*/
._solution_hyu63_132 > * {
  position: relative;

  z-index: 1;
}

/* ==========================================================
   NÚMERO
========================================================== */

._number_hyu63_216 {
  padding-top: 7px;

  color: #a0a5a8;

  font-size: 10px;

  font-weight: 500;

  letter-spacing: 0.1em;

  transition: color 250ms ease;
}

._solution_hyu63_132:hover ._number_hyu63_216 {
  color: #4682b4;
}

/* ==========================================================
   CONTENIDO
========================================================== */

._solutionContent_hyu63_238 {
  display: grid;

  /*
    Título grande a la izquierda.
    Descripción a la derecha.

    Esto le da a la sección una composición más editorial.
  */
  grid-template-columns:
    minmax(250px, 0.8fr)
    minmax(300px, 0.7fr);

  gap: clamp(40px, 8vw, 140px);

  align-items: start;
}

/* ==========================================================
   TÍTULO DE SOLUCIÓN
========================================================== */

._solutionContent_hyu63_238 h3 {
  margin: 0;

  color: #272a2c;

  font-size: clamp(29px, 3vw, 48px);

  font-weight: 500;

  line-height: 1.05;

  letter-spacing: -0.04em;

  transition:
    color 250ms ease,
    transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

._solution_hyu63_132:hover ._solutionContent_hyu63_238 h3 {
  color: #111111;

  transform: translateX(7px);
}

/* ==========================================================
   DESCRIPCIÓN
========================================================== */

._solutionContent_hyu63_238 p {
  max-width: 520px;

  margin: 3px 0 0;

  color: #777c80;

  font-size: 14px;

  line-height: 1.7;
}

/* ==========================================================
   FLECHA
========================================================== */

._arrow_hyu63_304 {
  justify-self: end;

  width: 46px;

  height: 46px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid rgba(20, 20, 20, 0.13);

  border-radius: 50%;

  color: #9a9ea1;

  transition:
    background-color 250ms ease,
    border-color 250ms ease,
    color 250ms ease,
    transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

._arrow_hyu63_304 svg {
  width: 18px;

  height: 18px;

  transition: transform 250ms ease;
}

/* ==========================================================
   HOVER DE FLECHA
========================================================== */

._solution_hyu63_132:hover ._arrow_hyu63_304 {
  background: #4682b4;

  border-color: #4682b4;

  color: #ffffff;

  transform: translateX(-5px);
}

._solution_hyu63_132:hover ._arrow_hyu63_304 svg {
  transform: translateX(2px);
}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1050px) {
  /* ========================================================
     HEADER
  ======================================================== */

  ._header_hyu63_42 {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  ._intro_hyu63_116 {
    max-width: 650px;
  }

  /* ========================================================
     FILAS
  ======================================================== */

  ._solution_hyu63_132 {
    grid-template-columns:
      55px
      minmax(0, 1fr)
      50px;
  }

  /*
    Título y descripción pasan a una sola columna.
  */
  ._solutionContent_hyu63_238 {
    grid-template-columns: 1fr;

    gap: 20px;
  }

  ._solutionContent_hyu63_238 p {
    max-width: 620px;
  }
}

/* ==========================================================
   MÓVIL
========================================================== */

@media (max-width: 640px) {
  /* ========================================================
     SECCIÓN
  ======================================================== */

  ._section_hyu63_15 {
    padding: 100px 22px;
  }

  /* ========================================================
     HEADER
  ======================================================== */

  ._header_hyu63_42 {
    margin-bottom: 65px;
  }

  ._title_hyu63_84 {
    font-size: clamp(46px, 13vw, 64px);
  }

  ._intro_hyu63_116 {
    font-size: 16px;
  }

  /* ========================================================
     FILA
  ======================================================== */

  ._solution_hyu63_132 {
    /*
      En móvil simplificamos:

      número
      contenido
      flecha
    */
    grid-template-columns:
      32px
      minmax(0, 1fr)
      38px;

    gap: 10px;

    padding: 30px 0;
  }

  /* ========================================================
     NÚMERO
  ======================================================== */

  ._number_hyu63_216 {
    padding-top: 4px;

    font-size: 8px;
  }

  /* ========================================================
     CONTENIDO
  ======================================================== */

  ._solutionContent_hyu63_238 {
    gap: 15px;
  }

  ._solutionContent_hyu63_238 h3 {
    font-size: clamp(25px, 8vw, 34px);
  }

  ._solutionContent_hyu63_238 p {
    font-size: 13px;

    line-height: 1.65;
  }

  /*
    En móvil eliminamos el desplazamiento horizontal del título
    porque hay menos espacio.
  */
  ._solution_hyu63_132:hover ._solutionContent_hyu63_238 h3 {
    transform: none;
  }

  /* ========================================================
     FLECHA
  ======================================================== */

  ._arrow_hyu63_304 {
    width: 36px;

    height: 36px;
  }

  ._arrow_hyu63_304 svg {
    width: 15px;

    height: 15px;
  }

  ._solution_hyu63_132:hover ._arrow_hyu63_304 {
    transform: none;
  }
}

/* ==========================================================
   MÓVILES PEQUEÑOS
========================================================== */

@media (max-width: 400px) {
  ._section_hyu63_15 {
    padding-left: 18px;

    padding-right: 18px;
  }

  ._solution_hyu63_132 {
    grid-template-columns:
      27px
      minmax(0, 1fr)
      34px;
  }

  ._arrow_hyu63_304 {
    width: 32px;

    height: 32px;
  }
}

/* ==========================================================
   ACCESIBILIDAD
========================================================== */

@media (prefers-reduced-motion: reduce) {
  ._solution_hyu63_132::before,
  ._number_hyu63_216,
  ._solutionContent_hyu63_238 h3,
  ._arrow_hyu63_304,
  ._arrow_hyu63_304 svg {
    transition: none;
  }
}
/* ==========================================================
   CONTACT SECTION
   ----------------------------------------------------------
   Cierre comercial de la Home.

   Buscamos una sección:
   - oscura,
   - amplia,
   - limpia,
   - con muy pocos elementos.
========================================================== */

/* ==========================================================
   SECCIÓN
========================================================== */

._section_1b0e1_17 {
  background: #0c0f12;

  color: #ffffff;

padding:
    clamp(48px, 3vw, 64px)
    clamp(24px, 6vw, 100px)
    clamp(110px, 10vw, 160px);
}

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

._container_1b0e1_32 {
  width: 100%;

  max-width: 1600px;

  margin: 0 auto;
}

/* ==========================================================
   ETIQUETA SUPERIOR
========================================================== */

._eyebrow_1b0e1_44 {
  display: block;

  margin-bottom: clamp(55px, 7vw, 100px);

  color: #6e9fc4;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}

/* ==========================================================
   CONTENIDO PRINCIPAL
========================================================== */

._content_1b0e1_64 {
  display: grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(300px, 0.55fr);

  gap: clamp(60px, 9vw, 150px);

  align-items: end;
}

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

._titleWrapper_1b0e1_80 {
  min-width: 0;
}

._title_1b0e1_80 {
  max-width: 1050px;

  margin: 0;

  color: #ffffff;

  font-size: clamp(54px, 7.4vw, 118px);

  font-weight: 500;

  line-height: 0.9;

  letter-spacing: -0.065em;
}

/*
  Última línea con menor contraste.

  Esto mantiene el lenguaje visual que ya utilizamos
  en Producto y Proyectos.
*/
._title_1b0e1_80 span {
  color: rgba(255, 255, 255, 0.38);
}

/* ==========================================================
   BLOQUE DERECHO
========================================================== */

._contactBlock_1b0e1_114 {
  max-width: 480px;

  padding-bottom: 5px;
}

/* ==========================================================
   DESCRIPCIÓN
========================================================== */

._description_1b0e1_124 {
  margin: 0;

  color: rgba(255, 255, 255, 0.56);

  font-size: clamp(16px, 1.3vw, 19px);

  line-height: 1.7;
}

/* ==========================================================
   BOTÓN PRINCIPAL
========================================================== */

._primaryButton_1b0e1_138 {
  width: 100%;

  min-height: 64px;

  margin-top: 40px;

  padding: 0 24px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  border-radius: 14px;

  background: #4682b4;

  color: #ffffff;

  text-decoration: none;

  font-size: 14px;

  font-weight: 600;

  transition:
    background-color 220ms ease,
    transform 220ms ease;
}

/* ==========================================================
   ICONO DEL BOTÓN
========================================================== */

._primaryButton_1b0e1_138 svg {
  width: 20px;

  height: 20px;

  flex-shrink: 0;

  transition: transform 220ms ease;
}

/* ==========================================================
   HOVER DEL BOTÓN
========================================================== */

._primaryButton_1b0e1_138:hover {
  background: #5b94c1;

  transform: translateY(-2px);
}

._primaryButton_1b0e1_138:hover svg {
  transform: translateX(4px);
}

/* ==========================================================
   CORREO
========================================================== */

._emailBlock_1b0e1_204 {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 9px;

  margin-top: 42px;

  padding-top: 30px;

  border-top: 1px solid rgba(255, 255, 255, 0.11);
}

/* ==========================================================
   ETIQUETA DEL CORREO
========================================================== */

._emailLabel_1b0e1_224 {
  color: rgba(255, 255, 255, 0.3);

  font-size: 9px;

  font-weight: 500;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}

/* ==========================================================
   DIRECCIÓN DE CORREO
========================================================== */

._email_1b0e1_204 {
  position: relative;

  color: rgba(255, 255, 255, 0.8);

  font-size: clamp(15px, 1.3vw, 18px);

  text-decoration: none;

  transition: color 200ms ease;
}

._email_1b0e1_204:hover {
  color: #ffffff;
}

/* ==========================================================
   LÍNEA INFERIOR
   ----------------------------------------------------------
   Esta zona funciona como transición hacia el Footer.
========================================================== */

._bottomLine_1b0e1_262 {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  margin-top: clamp(100px, 13vw, 190px);

  padding-top: 24px;

  border-top: 1px solid rgba(255, 255, 255, 0.11);
}

/* ==========================================================
   TEXTOS INFERIORES
========================================================== */

._bottomLine_1b0e1_262 span {
  color: rgba(255, 255, 255, 0.3);

  font-size: 9px;

  letter-spacing: 0.09em;

  text-transform: uppercase;
}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1000px) {
  /*
    El título y el CTA pasan a una sola columna.
  */
  ._content_1b0e1_64 {
    grid-template-columns: 1fr;

    gap: 60px;
  }

  ._contactBlock_1b0e1_114 {
    max-width: 600px;
  }
}

/* ==========================================================
   MÓVIL
========================================================== */

@media (max-width: 640px) {
  /* ========================================================
     SECCIÓN
  ======================================================== */

  ._section_1b0e1_17 {
    padding: 100px 22px 45px;
  }

  /* ========================================================
     ETIQUETA
  ======================================================== */

  ._eyebrow_1b0e1_44 {
    margin-bottom: 50px;

    font-size: 10px;
  }

  /* ========================================================
     CONTENIDO
  ======================================================== */

  ._content_1b0e1_64 {
    gap: 50px;
  }

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

  ._title_1b0e1_80 {
    font-size: clamp(48px, 14vw, 68px);

    line-height: 0.94;
  }

  /* ========================================================
     DESCRIPCIÓN
  ======================================================== */

  ._description_1b0e1_124 {
    font-size: 15px;
  }

  /* ========================================================
     BOTÓN
  ======================================================== */

  ._primaryButton_1b0e1_138 {
    min-height: 58px;

    margin-top: 32px;

    border-radius: 12px;
  }

  /* ========================================================
     CORREO
  ======================================================== */

  ._emailBlock_1b0e1_204 {
    margin-top: 34px;

    padding-top: 25px;
  }

  /* ========================================================
     PARTE INFERIOR
  ======================================================== */

  ._bottomLine_1b0e1_262 {
    flex-direction: column;

    align-items: flex-start;

    gap: 10px;

    margin-top: 90px;
  }
}

/* ==========================================================
   MÓVILES PEQUEÑOS
========================================================== */

@media (max-width: 400px) {
  ._section_1b0e1_17 {
    padding-left: 18px;

    padding-right: 18px;
  }
}

/* ==========================================================
   ACCESIBILIDAD
========================================================== */

@media (prefers-reduced-motion: reduce) {
  ._primaryButton_1b0e1_138,
  ._primaryButton_1b0e1_138 svg,
  ._email_1b0e1_204 {
    transition: none;
  }
}
/* ==========================================================
   FOOTER
========================================================== */

._footer_xzuzz_5 {
  background: #0c0f12;

  color: #ffffff;

  padding: 0 clamp(24px, 6vw, 100px) 42px;
}

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

._container_xzuzz_17 {
  width: 100%;

  max-width: 1600px;

  margin: 0 auto;
}

/* ==========================================================
   PARTE SUPERIOR
========================================================== */

._top_xzuzz_29 {
  display: grid;

  grid-template-columns:
    minmax(260px, 1fr)
    minmax(400px, 0.8fr);

  gap: clamp(60px, 10vw, 160px);

  padding: clamp(70px, 9vw, 120px) 0;

  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================
   MARCA
========================================================== */

._brand_xzuzz_47 {
  max-width: 420px;
}

/* ==========================================================
   LOGO
========================================================== */

._logoLink_xzuzz_55 {
  display: inline-flex;

  align-items: center;

  text-decoration: none;
}

._logo_xzuzz_55 {
  display: block;

  width: auto;

  height: 46px;

  object-fit: contain;
}

/* ==========================================================
   DESCRIPCIÓN
========================================================== */

._brand_xzuzz_47 p {
  max-width: 360px;

  margin: 28px 0 0;

  color: rgba(255, 255, 255, 0.42);

  font-size: 14px;

  line-height: 1.6;
}

/* ==========================================================
   NAVEGACIÓN
========================================================== */

._navigation_xzuzz_93 {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: clamp(40px, 6vw, 90px);
}

/* ==========================================================
   COLUMNAS
========================================================== */

._column_xzuzz_105 {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 14px;
}

/* ==========================================================
   TÍTULO DE COLUMNA
========================================================== */

._columnTitle_xzuzz_119 {
  margin-bottom: 12px;

  color: rgba(255, 255, 255, 0.28);

  font-size: 9px;

  font-weight: 500;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}

/* ==========================================================
   LINKS
========================================================== */

._column_xzuzz_105 a {
  position: relative;

  color: rgba(255, 255, 255, 0.67);

  font-size: 14px;

  text-decoration: none;

  transition: color 200ms ease;
}

._column_xzuzz_105 a:hover {
  color: #ffffff;
}

/* ==========================================================
   PARTE INFERIOR
========================================================== */

._bottom_xzuzz_157 {
  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  gap: 30px;

  padding-top: 28px;

  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================
   COPYRIGHT
========================================================== */

._bottom_xzuzz_157 > span {
  color: rgba(255, 255, 255, 0.28);

  font-size: 9px;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

/* ==========================================================
   LEGAL
========================================================== */

._legal_xzuzz_192 {
  display: flex;
  align-items: center;

  gap: 18px;
}

._legal_xzuzz_192 button {
  position: relative;

  margin: 0;
  padding: 0;

  border: 0;
  outline: none;

  background: transparent;

  color: rgba(255, 255, 255, 0.42);

  font-family: inherit;
  font-size: 11px;
  font-weight: 500;

  letter-spacing: 0.04em;

  cursor: pointer;

  transition:
    color 180ms ease,
    transform 180ms ease;
}

._legal_xzuzz_192 button:hover {
  color: #ffffff;

  transform: translateY(-1px);
}

/* ==========================================================
   VOLVER ARRIBA
========================================================== */

._backToTop_xzuzz_235 {
  justify-self: end;

  display: inline-flex;

  align-items: center;

  gap: 9px;

  color: rgba(255, 255, 255, 0.38);

  font-size: 9px;

  letter-spacing: 0.08em;

  text-decoration: none;

  text-transform: uppercase;

  transition: color 200ms ease;
}

._backToTop_xzuzz_235 svg {
  width: 15px;

  height: 15px;

  transition: transform 200ms ease;
}

._backToTop_xzuzz_235:hover {
  color: #ffffff;
}

._backToTop_xzuzz_235:hover svg {
  transform: translateY(-3px);
}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {
  ._top_xzuzz_29 {
    grid-template-columns: 1fr;

    gap: 65px;
  }

  ._navigation_xzuzz_93 {
    max-width: 600px;
  }

  ._bottom_xzuzz_157 {
    grid-template-columns:
      1fr
      auto;
  }

  ._legal_xzuzz_192 {
    display: none;
  }
}

/* ==========================================================
   MÓVIL
========================================================== */

@media (max-width: 640px) {
  ._footer_xzuzz_5 {
    padding: 0 22px 32px;
  }

  ._top_xzuzz_29 {
    padding: 70px 0;

    gap: 55px;
  }

  ._logo_xzuzz_55 {
    height: 42px;
  }

  ._brand_xzuzz_47 p {
    margin-top: 22px;

    font-size: 13px;
  }

  /* ========================================================
     NAVEGACIÓN
  ======================================================== */

  ._navigation_xzuzz_93 {
    grid-template-columns: 1fr;

    gap: 45px;
  }

  /* ========================================================
     BOTTOM
  ======================================================== */

  ._bottom_xzuzz_157 {
    grid-template-columns: 1fr;

    gap: 18px;
  }

  ._backToTop_xzuzz_235 {
    justify-self: start;
  }
}

/* ==========================================================
   MÓVILES PEQUEÑOS
========================================================== */

@media (max-width: 400px) {
  ._footer_xzuzz_5 {
    padding-left: 18px;

    padding-right: 18px;
  }
}

/* ==========================================================
   ACCESIBILIDAD
========================================================== */

@media (prefers-reduced-motion: reduce) {
  ._column_xzuzz_105 a,
  ._legal_xzuzz_192 a,
  ._backToTop_xzuzz_235,
  ._backToTop_xzuzz_235 svg {
    transition: none;
  }
}
/* ==========================================================
   BACKDROP
========================================================== */

._backdrop_5p06q_5 {
  position: fixed;
  inset: 0;

  z-index: 20000;

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

  padding: clamp(18px, 3vw, 42px);

  background: rgba(4, 7, 10, 0.78);

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

  animation: _backdropIn_5p06q_1 240ms ease;
}

/* ==========================================================
   MODAL
========================================================== */

._modal_5p06q_29 {
  width: min(1380px, 100%);
  height: min(880px, calc(100svh - 60px));

  overflow: hidden;

  display: flex;
  flex-direction: column;

  background: #f5f5f3;

  color: #171717;

  border-radius: 24px;

  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.42);

  animation: _modalIn_5p06q_1 420ms
    cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================
   HEADER
========================================================== */

._header_5p06q_55 {
  flex-shrink: 0;

  min-height: 170px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 40px;

  padding:
    35px
    clamp(28px, 4vw, 58px)
    30px;

  border-bottom: 1px solid #d9dcdd;
}

._eyebrow_5p06q_74 {
  display: block;

  margin-bottom: 11px;

  color: #4682b4;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

._header_5p06q_55 h2 {
  margin: 0;

  font-size: clamp(38px, 4vw, 60px);

  font-weight: 500;

  line-height: 0.98;

  letter-spacing: -0.05em;
}

._header_5p06q_55 p {
  margin: 17px 0 0;

  color: #73787c;

  font-size: 14px;

  line-height: 1.5;
}

/* ==========================================================
   CERRAR
========================================================== */

._close_5p06q_115 {
  position: relative;

  width: 46px;
  height: 46px;

  flex-shrink: 0;

  border: 1px solid #d2d5d6;

  border-radius: 50%;

  background: transparent;

  cursor: pointer;

  transition:
    background 200ms ease,
    border-color 200ms ease,
    transform 200ms ease;
}

._close_5p06q_115:hover {
  background: #171717;

  border-color: #171717;

  transform: rotate(4deg);
}

._close_5p06q_115 span {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 17px;
  height: 1px;

  background: #171717;

  transition: background 200ms ease;
}

._close_5p06q_115 span:first-child {
  transform:
    translate(-50%, -50%)
    rotate(45deg);
}

._close_5p06q_115 span:last-child {
  transform:
    translate(-50%, -50%)
    rotate(-45deg);
}

._close_5p06q_115:hover span {
  background: #ffffff;
}

/* ==========================================================
   CUERPO
========================================================== */

._body_5p06q_179 {
  min-height: 0;

  flex: 1;

  display: grid;

  grid-template-columns:
    280px
    minmax(0, 1fr);
}

/* ==========================================================
   SIDEBAR
========================================================== */

._sidebar_5p06q_195 {
  min-height: 0;

  display: flex;
  flex-direction: column;

  padding: 34px 28px;

  background: #eeefec;

  border-right: 1px solid #d9dcdd;
}

._sidebarLabel_5p06q_208 {
  margin-bottom: 24px;

  color: #9a9ea0;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

._sidebar_5p06q_195 nav {
  display: flex;
  flex-direction: column;

  gap: 2px;
}

._sidebar_5p06q_195 nav button {
  width: 100%;

  display: grid;

  grid-template-columns:
    28px
    minmax(0, 1fr);

  gap: 8px;

  padding: 10px 0;

  border: 0;

  background: transparent;

  color: #6c7073;

  text-align: left;

  font: inherit;

  font-size: 12px;
  font-weight: 500;

  cursor: pointer;

  transition:
    color 180ms ease,
    transform 180ms ease;
}

._sidebar_5p06q_195 nav button span {
  color: #4682b4;

  font-size: 9px;

  padding-top: 2px;
}

._sidebar_5p06q_195 nav button:hover {
  color: #171717;

  transform: translateX(3px);
}

._sidebarFooter_5p06q_275 {
  margin-top: auto;

  padding-top: 30px;

  display: flex;
  flex-direction: column;

  gap: 4px;

  color: #999d9f;

  font-size: 9px;

  letter-spacing: 0.04em;
}

._sidebarFooter_5p06q_275 strong {
  color: #565b5e;

  font-weight: 500;
}

/* ==========================================================
   CONTENIDO SCROLLABLE
========================================================== */

._content_5p06q_302 {
  min-height: 0;

  overflow-y: auto;

  padding:
    15px
    clamp(30px, 5vw, 78px)
    50px;

  scroll-behavior: smooth;

  scrollbar-width: thin;
  scrollbar-color: #4682b4 transparent;
}

._content_5p06q_302::-webkit-scrollbar {
  width: 6px;
}

._content_5p06q_302::-webkit-scrollbar-track {
  background: transparent;
}

._content_5p06q_302::-webkit-scrollbar-thumb {
  background: #4682b4;

  border-radius: 999px;
}

/* ==========================================================
   SECCIÓN
========================================================== */

._section_5p06q_336 {
  display: grid;

  grid-template-columns:
    55px
    minmax(0, 760px);

  gap: 20px;

  padding: 55px 0;

  border-bottom: 1px solid #dedfdd;

  scroll-margin-top: 15px;
}

._sectionNumber_5p06q_352 {
  padding-top: 5px;

  color: #4682b4;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.1em;
}

._sectionContent_5p06q_363 h3 {
  margin:
    0
    0
    28px;

  color: #1a1b1c;

  font-size: clamp(24px, 2vw, 32px);

  font-weight: 500;

  letter-spacing: -0.035em;
}

._sectionContent_5p06q_363 p {
  margin:
    0
    0
    18px;

  color: #5f6467;

  font-size: 15px;

  line-height: 1.75;
}

._sectionContent_5p06q_363 p:last-child {
  margin-bottom: 0;
}

._sectionContent_5p06q_363 strong {
  color: #313436;

  font-weight: 600;
}

._sectionContent_5p06q_363 a {
  color: #4682b4;

  text-decoration: none;
}

._sectionContent_5p06q_363 a:hover {
  text-decoration: underline;
}

/* ==========================================================
   AVISO DESTACADO
========================================================== */

._notice_5p06q_415 {
  margin-top: 32px;

  padding: 26px 28px;

  background: #e9eef2;

  border-left: 3px solid #4682b4;

  border-radius: 0 12px 12px 0;
}

._notice_5p06q_415 > strong {
  display: block;

  margin-bottom: 12px;

  color: #2d3032;

  font-size: 13px;
}

._notice_5p06q_415 p {
  font-size: 13px;

  line-height: 1.7;
}

/* ==========================================================
   FOOTER INTERNO
========================================================== */

._contentFooter_5p06q_447 {
  display: flex;
  justify-content: space-between;

  gap: 20px;

  padding-top: 35px;

  color: #9a9d9f;

  font-size: 9px;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

._mobileDate_5p06q_464 {
  display: none;
}

/* ==========================================================
   ANIMACIONES
========================================================== */

@keyframes _backdropIn_5p06q_1 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes _modalIn_5p06q_1 {
  from {
    opacity: 0;

    transform:
      translateY(18px)
      scale(0.985);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {
  ._body_5p06q_179 {
    grid-template-columns:
      220px
      minmax(0, 1fr);
  }

  ._sidebar_5p06q_195 {
    padding:
      30px
      22px;
  }
}

/* ==========================================================
   MÓVIL
========================================================== */

@media (max-width: 700px) {
  ._backdrop_5p06q_5 {
    padding: 0;

    align-items: stretch;
  }

  ._modal_5p06q_29 {
    width: 100%;
    height: 100svh;

    border-radius: 0;
  }

  ._header_5p06q_55 {
    min-height: auto;

    padding:
      24px
      22px
      22px;
  }

  ._header_5p06q_55 h2 {
    font-size: 38px;
  }

  ._header_5p06q_55 p {
    max-width: 260px;

    margin-top: 12px;

    font-size: 12px;
  }

  ._close_5p06q_115 {
    width: 42px;
    height: 42px;
  }

  ._body_5p06q_179 {
    display: block;

    min-height: 0;

    overflow: hidden;
  }

  ._sidebar_5p06q_195 {
    display: none;
  }

  ._content_5p06q_302 {
    height: 100%;

    padding:
      0
      22px
      45px;
  }

  ._mobileDate_5p06q_464 {
    display: block;

    padding: 22px 0 5px;

    color: #9a9da0;

    font-size: 9px;

    letter-spacing: 0.08em;

    text-transform: uppercase;
  }

  ._section_5p06q_336 {
    grid-template-columns:
      34px
      minmax(0, 1fr);

    gap: 10px;

    padding: 40px 0;
  }

  ._sectionContent_5p06q_363 h3 {
    margin-bottom: 22px;

    font-size: 25px;
  }

  ._sectionContent_5p06q_363 p {
    font-size: 14px;

    line-height: 1.7;
  }

  ._notice_5p06q_415 {
    margin-top: 26px;

    padding: 22px;
  }

  ._contentFooter_5p06q_447 {
    flex-direction: column;

    gap: 7px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  ._backdrop_5p06q_5,
  ._modal_5p06q_29 {
    animation: none;
  }

  ._content_5p06q_302 {
    scroll-behavior: auto;
  }
}/* ==========================================================
   VARIABLES LOCALES
========================================================== */

._page_o6ddv_5 {
  --primary: #4682b4;
  --primary-light: #5b94c1;

  --white: #ffffff;
  --black: #0a0a0a;
  --text-muted: rgba(255, 255, 255, 0.72);

  width: 100%;
  min-height: 100vh;

  background: var(--white);
}

/* ==========================================================
   HERO
========================================================== */

._hero_o6ddv_23 {
  position: relative;

  width: 100%;
  min-height: 100svh;

  overflow: hidden;

  display: flex;
  align-items: flex-end;

  background: #111;
}

/* ==========================================================
   IMAGEN DE FONDO
========================================================== */

._heroBackground_o6ddv_41 {
  position: absolute;

  inset: 0;

  background-image: url("/images/hero.webp");

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  transform: scale(1.02);

  z-index: 0;
}

/* ==========================================================
   OVERLAY
========================================================== */

._heroOverlay_o6ddv_61 {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(4, 8, 12, 0.82) 0%,
      rgba(4, 8, 12, 0.6) 38%,
      rgba(4, 8, 12, 0.18) 70%,
      rgba(4, 8, 12, 0.08) 100%
    ),
    linear-gradient(0deg, rgba(4, 8, 12, 0.56) 0%, transparent 45%);

  z-index: 1;
}

/* ==========================================================
   HEADER
========================================================== */

._header_o6ddv_83 {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 1000;

  padding: 22px clamp(24px, 4vw, 72px);

  pointer-events: none;

  transition:
    transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 250ms ease;
}

._headerHidden_o6ddv_102 {
  transform: translateY(calc(-100% - 30px));

  opacity: 0;

  pointer-events: none;
}

/* ==========================================================
   NAVBAR
========================================================== */

._navbar_o6ddv_114 {
  position: relative;
  overflow: hidden;

  width: 100%;
  min-height: 68px;

  display: flex;
  align-items: center;

  gap: 32px;

  padding: 8px 10px 8px 18px;

  background: rgba(8, 12, 16, 0.44);

  border: 1px solid rgba(255, 255, 255, 0.16);

  border-radius: 18px;

  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);

  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);

  pointer-events: auto;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  ._navbar_o6ddv_114 {
    background: rgba(8, 12, 16, 0.88);
  }
}

/* ==========================================================
   MARCA
========================================================== */

._brand_o6ddv_154 {
  display: flex;
  align-items: center;

  flex-shrink: 0;

  text-decoration: none;
}

._logo_o6ddv_163 {
  display: block;

  width: auto;
  height: 43px;

  object-fit: contain;
}

/* ==========================================================
   LINKS DEL NAVBAR
========================================================== */

._navLinks_o6ddv_176 {
  display: flex;
  align-items: center;

  gap: clamp(22px, 2.3vw, 38px);

  margin-left: auto;
}

._navLinks_o6ddv_176 a {
  position: relative;

  color: rgba(255, 255, 255, 0.82);

  text-decoration: none;

  font-size: 14px;
  font-weight: 500;

  transition:
    color 180ms ease,
    opacity 180ms ease;
}

._navLinks_o6ddv_176 a:hover {
  color: var(--white);
}

._navLinks_o6ddv_176 a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -7px;

  width: 100%;
  height: 1px;

  background: var(--white);

  transform: scaleX(0);
  transform-origin: right;

  transition: transform 250ms ease;
}

._navLinks_o6ddv_176 a:hover::after {
  transform: scaleX(1);

  transform-origin: left;
}

/* ==========================================================
   BOTÓN NAVBAR
========================================================== */

._navButton_o6ddv_233 {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;

  padding: 0 22px;

  border: 0;

  border-radius: 12px;

  background: var(--primary);

  color: var(--white);

  text-decoration: none;

  font-size: 14px;
  font-weight: 600;

  transition:
    transform 200ms ease,
    background-color 200ms ease,
    color 200ms ease;
}

._navButton_o6ddv_233:hover {
  transform: translateY(-2px);

  background: #f1f1f1;

  color: #111111;
}

._brand_o6ddv_154:focus-visible,
._navLinks_o6ddv_176 a:focus-visible,
._navButton_o6ddv_233:focus-visible,
._menuButton_o6ddv_272:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.92);
  outline-offset: 4px;
}

/* ==========================================================
   BOTÓN HAMBURGUESA
========================================================== */

._menuButton_o6ddv_272 {
  display: none;

  width: 46px;
  height: 46px;

  margin-left: auto;

  align-items: center;
  justify-content: center;
  flex-direction: column;

  gap: 7px;

  border: 0;

  background: transparent;

  cursor: pointer;
}

._menuButton_o6ddv_272 span {
  display: block;

  width: 24px;
  height: 1px;

  background: var(--white);

  transition: transform 250ms ease;
}

._menuButtonOpen_o6ddv_313 span:first-child {
  transform: translateY(4px) rotate(45deg);
}

._menuButtonOpen_o6ddv_313 span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

/* ==========================================================
   MENÚ MÓVIL
========================================================== */

._mobileMenu_o6ddv_325 {
  display: none;
}

/* ==========================================================
   CONTENIDO DEL HERO
========================================================== */

._heroContent_o6ddv_333 {
  position: relative;

  z-index: 3;

  width: min(780px, 100%);

  margin-left: clamp(24px, 7vw, 128px);

  margin-bottom: clamp(54px, 9vh, 120px);

  padding-right: 24px;
}

/* ==========================================================
   EYEBROW
========================================================== */

._eyebrow_o6ddv_351 {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 24px;

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

  font-size: 13px;
  font-weight: 500;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

._eyebrow_o6ddv_351::before {
  content: "";

  width: 7px;
  height: 7px;

  flex-shrink: 0;

  border-radius: 50%;

  background: var(--primary);
}

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

._title_o6ddv_387 {
  max-width: 750px;

  margin: 0;

  color: var(--white);

  font-size: clamp(52px, 6.3vw, 104px);

  font-weight: 500;

  line-height: 0.95;

  letter-spacing: -0.055em;
}

._title_o6ddv_387 span {
  color: rgba(255, 255, 255, 0.62);
}

/* ==========================================================
   DESCRIPCIÓN
========================================================== */

._description_o6ddv_411 {
  max-width: 630px;

  margin: clamp(26px, 4vh, 40px) 0 0;

  color: var(--text-muted);

  font-size: clamp(16px, 1.25vw, 19px);

  font-weight: 400;

  line-height: 1.65;
}

/* ==========================================================
   BOTONES HERO
========================================================== */

._heroActions_o6ddv_429 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 34px;
}

._primaryButton_o6ddv_439,
._secondaryButton_o6ddv_440 {
  min-height: 54px;

  padding: 0 24px;

  border-radius: 12px;

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

  gap: 13px;

  text-decoration: none;

  font-size: 14px;
  font-weight: 600;

  transition:
    transform 200ms ease,
    background-color 200ms ease,
    border-color 200ms ease;
}

._primaryButton_o6ddv_439 {
  background: var(--primary);

  color: var(--white);
}

._primaryButton_o6ddv_439:hover {
  transform: translateY(-2px);

  background: var(--primary-light);
}

._secondaryButton_o6ddv_440 {
  background: rgba(255, 255, 255, 0.08);

  color: var(--white);

  border: 1px solid rgba(255, 255, 255, 0.22);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

._secondaryButton_o6ddv_440:hover {
  transform: translateY(-2px);

  background: rgba(255, 255, 255, 0.14);

  border-color: rgba(255, 255, 255, 0.36);
}

._buttonIcon_o6ddv_495 {
  width: 19px;
  height: 19px;

  transition: transform 200ms ease;
}

._primaryButton_o6ddv_439:hover ._buttonIcon_o6ddv_495 {
  transform: translateX(4px);
}

/* ==========================================================
   FEATURES
========================================================== */

._features_o6ddv_510 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 0;

  margin-top: 36px;

  color: rgba(255, 255, 255, 0.55);

  font-size: 12px;
  font-weight: 500;

  letter-spacing: 0.02em;
}

._features_o6ddv_510 span {
  display: flex;
  align-items: center;
}

._features_o6ddv_510 span:not(:last-child)::after {
  content: "";

  width: 3px;
  height: 3px;

  margin: 0 14px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.4);
}

/* ==========================================================
   INDICADOR DE SCROLL
========================================================== */

._scrollIndicator_o6ddv_549 {
  position: absolute;

  right: clamp(24px, 4vw, 72px);
  bottom: 54px;

  z-index: 3;

  display: flex;
  flex-direction: column;
  align-items: flex-end;

  gap: 12px;

  color: rgba(255, 255, 255, 0.6);

  font-size: 11px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  text-decoration: none;
}

._scrollLine_o6ddv_574 {
  width: 70px;
  height: 1px;

  background: rgba(255, 255, 255, 0.4);

  transform-origin: right;

  transition: width 250ms ease;
}

._scrollIndicator_o6ddv_549:hover ._scrollLine_o6ddv_574 {
  width: 95px;
}

/* ==========================================================
   SECCIÓN INTRODUCTORIA
========================================================== */

._intro_o6ddv_593 {
  width: 100%;

  background: #f5f5f3;

  padding: clamp(110px, 15vw, 220px) clamp(24px, 7vw, 128px);
}

._introInner_o6ddv_601 {
  max-width: 1200px;

  margin: 0 auto;
}

._sectionLabel_o6ddv_607 {
  display: block;

  margin-bottom: 30px;

  color: var(--primary);

  font-size: 13px;
  font-weight: 600;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

._intro_o6ddv_593 h2 {
  max-width: 1050px;

  margin: 0;

  color: #161616;

  font-size: clamp(42px, 5.5vw, 82px);

  font-weight: 500;

  line-height: 1.05;

  letter-spacing: -0.045em;
}

._intro_o6ddv_593 p {
  max-width: 650px;

  margin: clamp(36px, 5vw, 60px) 0 0 auto;

  color: #5d6267;

  font-size: clamp(17px, 1.5vw, 21px);

  line-height: 1.65;
}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 950px) {
  ._navLinks_o6ddv_176,
  ._navButton_o6ddv_233 {
    display: none;
  }

  ._menuButton_o6ddv_272 {
    display: flex;
  }

  ._header_o6ddv_83 {
    padding: 18px;
  }

  ._navbar_o6ddv_114 {
    min-height: 62px;

    padding: 7px 8px 7px 15px;
  }

  ._logo_o6ddv_163 {
    height: 40px;
  }

  ._mobileMenu_o6ddv_325 {
    position: absolute;

    top: calc(100% + 8px);

    left: 18px;
    right: 18px;

    display: flex;
    flex-direction: column;

    gap: 3px;

    padding: 10px;

    border-radius: 16px;

    background: rgba(8, 12, 16, 0.82);

    border: 1px solid rgba(255, 255, 255, 0.14);

    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);

    box-shadow:
      0 12px 35px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);

    opacity: 0;

    visibility: hidden;

    transform: translateY(-8px);

    pointer-events: none;

    transition:
      opacity 220ms ease,
      transform 220ms ease,
      visibility 220ms ease;
  }

  ._mobileMenuOpen_o6ddv_720 {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
  }

  ._mobileMenu_o6ddv_325 > a {
    padding: 15px 16px;

    border-radius: 10px;

    color: rgba(255, 255, 255, 0.82);

    text-decoration: none;

    font-size: 15px;
  }

  ._mobileMenu_o6ddv_325 > a:hover {
    background: rgba(255, 255, 255, 0.06);

    color: var(--white);
  }

  ._mobileMenuButton_o6ddv_748 {
    margin-top: 5px;

    justify-content: center;

    text-align: center;

    background: var(--primary);
  }

  ._scrollIndicator_o6ddv_549 {
    display: none;
  }
}

/* ==========================================================
   MÓVIL
========================================================== */

@media (max-width: 640px) {
  /*
    CAMBIO IMPORTANTE:

    En móvil dejamos de alinear el contenido al fondo.

    Como el navbar es position: fixed, reservamos espacio
    arriba dentro del Hero para evitar que el eyebrow y
    el título queden debajo del navbar.
  */
  ._hero_o6ddv_23 {
    min-height: 100svh;

    height: auto;

    align-items: flex-start;

    padding-top: calc(118px + env(safe-area-inset-top));
    padding-bottom: 48px;

    box-sizing: border-box;
  }

  ._heroBackground_o6ddv_41 {
    background-position: 62% center;

    transform: scale(1);
  }

  ._heroOverlay_o6ddv_61 {
    background: linear-gradient(
      0deg,
      rgba(4, 8, 12, 0.88) 0%,
      rgba(4, 8, 12, 0.62) 52%,
      rgba(4, 8, 12, 0.26) 100%
    );
  }

  ._heroContent_o6ddv_333 {
    width: 100%;

    /*
      El Hero ya reserva el espacio superior.
      Por eso no usamos margen inferior para posicionarlo.
    */
    margin: 0;

    padding: 0 22px;

    box-sizing: border-box;
  }

  ._eyebrow_o6ddv_351 {
    margin-bottom: 18px;

    font-size: 11px;

    line-height: 1.4;
  }

  ._title_o6ddv_387 {
    font-size: clamp(48px, 15vw, 70px);

    line-height: 0.98;
  }

  ._description_o6ddv_411 {
    margin-top: 25px;

    font-size: 15px;

    line-height: 1.6;
  }

  ._heroActions_o6ddv_429 {
    width: 100%;

    margin-top: 28px;
  }

  ._primaryButton_o6ddv_439,
  ._secondaryButton_o6ddv_440 {
    width: 100%;

    min-height: 54px;

    box-sizing: border-box;
  }

  ._features_o6ddv_510 {
    margin-top: 27px;

    font-size: 10px;

    line-height: 2;
  }

  ._features_o6ddv_510 span:not(:last-child)::after {
    margin: 0 8px;
  }

  ._intro_o6ddv_593 {
    padding: 100px 22px;
  }

  ._intro_o6ddv_593 h2 {
    font-size: clamp(40px, 12vw, 56px);
  }

  ._intro_o6ddv_593 p {
    margin-top: 40px;

    font-size: 17px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  ._page_o6ddv_5 *,
  ._page_o6ddv_5 *::before,
  ._page_o6ddv_5 *::after {
    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================
   HEADER OCULTO DESKTOP
========================================================== */

@media (min-width: 951px) {
  ._headerHidden_o6ddv_102 {
    transform: translateY(calc(-100% - 30px));

    opacity: 0;

    pointer-events: none;
  }
}

/* ==========================================================
   VOLVER AL INICIO
========================================================== */

._backToTop_o6ddv_915 {
  position: fixed;

  right: 28px;
  bottom: 28px;

  z-index: 5000;

  width: 48px;
  height: 48px;

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

  border: 1px solid rgba(255, 255, 255, 0.14);

  border-radius: 50%;

  background: #ffffff;

  color: #4682b4;

  text-decoration: none;

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

  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);

  transition:
    transform 220ms ease,
    background-color 220ms ease,
    color 220ms ease,
    border-color 220ms ease;
}

._backToTop_o6ddv_915 svg {
  width: 19px;
  height: 19px;
}

._backToTop_o6ddv_915:hover {
  transform: translateY(-4px);

  background: #4682b4;

  color: #ffffff;

  border-color: #4682b4;
}

/* ==========================================================
   VOLVER AL INICIO - MÓVIL
========================================================== */

@media (max-width: 640px) {
  ._backToTop_o6ddv_915 {
    right: 18px;
    bottom: 18px;

    width: 44px;
    height: 44px;
  }
}