@font-face {
  font-family: Poppins;
  src: url('../fonts/Poppins-Medium.ttf') format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Poppins;
  src: url('../fonts/Poppins-SemiBold.ttf') format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Poppins;
  src: url('../fonts/Poppins-Regular.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Poppins;
  src: url('../fonts/Poppins-Thin.ttf') format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colores de marca */
  --color-bg: #101010;
  --color-black: #000;
  --color-text: #fff;
  --color-accent: #0eb3f5;
  --color-accent-deep: #0c91af;
  --color-border-blue: #0091df;

  /* Color base de los "glows" difuminados (formato R, G, B para usar con rgba) */
  --glow-rgb: 14, 143, 214;

  /* Tamaño de iconos: FIJO, independiente del contenedor.
     Cambia solo estos valores para escalar cada tipo de icono. */
  --icon-social: 24px;
  --icon-contact: 28px;

  /* Laptop del hero: tamaño FIJO controlable (no depende del contenedor). */
  --hero-laptop-width: 600px;

  /* Superficies */
  --radius-card: 20px;
  --radius-pill: 30px;

  /* Espaciado vertical entre secciones (ritmo consistente) */
  --section-pad-y: 96px;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

body {
  color: #fff;
  background-color: #0a0b0e;
  font-family: Poppins, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

img {
  max-width: 100%;
  display: inline-block;
}

.hero-wrapper {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr .75fr;
  grid-auto-columns: 1fr;
  place-content: center;
  place-items: center;
  height: 0%;
  display: flex;
}

.hero-content {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  display: flex;
}

.hero-heading {
  color: #fff;
  letter-spacing: -1.5px;
  height: auto;
  margin-bottom: 0;
  font-family: Poppins, Arial, sans-serif;
  font-size: 58px;
  font-weight: 600;
  line-height: 1.05;
}

.hero-description {
  color: #fff;
  letter-spacing: -.5px;
  max-width: 500px;
  font-family: Poppins, Arial, sans-serif;
  font-size: 18px;
}

.hero-section {
  background-color: var(--color-bg);
  border: 1px solid var(--color-bg);
  flex-flow: row;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 64px);
  padding-top: 0;
  position: relative;
  overflow: hidden;
  display: flex;
}

.button-primary {
  color: #fff;
  background-color: #000;
  border: 1px solid #0c91af;
  border-radius: 30px;
  padding: 16px 40px;
  font-family: Poppins, Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.hero-visual {
  box-sizing: border-box;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  text-align: center;
  flex: 0 0 auto;
  order: 1;
  justify-content: space-around;
  align-self: auto;
  align-items: flex-end;
  width: auto;
  min-height: 500px;
  display: block;
}

.hero-eyebrow {
  box-sizing: border-box;
  color: #fff;
  text-shadow: 0 1px 1px #0003;
  font-family: Poppins, Arial, sans-serif;
  font-weight: 600;
  position: static;
  overflow: clip;
}

.image {
  box-sizing: border-box;
  float: none;
  clear: none;
  text-align: center;
  vertical-align: baseline;
  object-fit: contain;
  width: var(--hero-laptop-width);
  min-width: auto;
  max-width: 100%;
  min-height: auto;
  font-size: 15px;
  text-decoration: none;
  display: block;
  position: static;
  overflow: clip;
}

.retos-grid {
  grid-column-gap: 58px;
  grid-row-gap: 58px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  text-align: center;
  mix-blend-mode: normal;
  flex-flow: row;
  justify-content: center;
  padding-bottom: 0;
  display: flex;
  position: static;
}

.section-2-retos {
  background-color: transparent;
  background-image: url('../images/FONDO-RETOS.webp');
  background-position: 50% 0%;
  background-repeat: no-repeat;
  background-size: cover;
  padding: var(--section-pad-y) 24px;
}

.reto-item {
  background-color: #000;
  background-image: linear-gradient(320deg, #327fa4, #bbcfda 0%, #85aec2 0%, #327fa4 12%, #1c516b 44%, #0a1d26 80%, #000);
  border: 1px solid #4a6775;
  border-radius: 12px;
  padding: 12px 22px;
  font-size: 18px;
  font-weight: 500;
}

.text-block {
  letter-spacing: -1px;
  font-size: 16px;
  font-weight: 500;
}

.text-block-2, .text-block-3, .text-block-4 {
  letter-spacing: -1px;
  font-size: 16px;
}

.retos-de-una-arrendadora {
  text-align: center;
  letter-spacing: -1px;
  margin-bottom: 20px;
  font-size: 32px;
}

.descripcion-retos {
  text-align: center;
  min-width: 20px;
  margin-bottom: 40px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 16px;
}

.container-retos {
  padding-top: 0;
}

.section-3-porque-ellis {
  background-color: var(--color-bg);
  border-bottom: 1px solid #2a2a2a;
  padding: var(--section-pad-y) 24px;
  position: relative;
  overflow: hidden;
}

.container-2 {
  width: 100%;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.porque-ellis-grid {
  grid-column-gap: 61px;
  grid-row-gap: 61px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.gr-fico-ellis {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 46%;
  display: flex;
}

.grafico-porque-ellis {
  text-align: left;
  border: 1px solid #0000;
  align-self: flex-end;
  max-width: 120%;
}

.descripcion-porque-ellis {
  margin-top: 24px;
  margin-bottom: 24px;
  font-size: 17px;
  font-weight: 500;
}

.button-primary-2 {
  color: #fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  background-color: #1a1b1f;
  padding: 12px 25px;
  font-size: 12px;
  line-height: 20px;
  transition: all .2s;
}

.button-primary-2:hover {
  color: #fff;
  background-color: #32343a;
}

.button-primary-2:active {
  background-color: #43464d;
}

.titulo-porque-ellis {
  color: #fff;
  letter-spacing: -1px;
  font-size: 32px;
}

.descripcion-2-porque-ellis {
  padding-top: 20px;
  font-size: 14px;
}

.beneficio-item {
  background-color: #000;
  border: 1px solid #285362;
  border-radius: 20px;
  flex-flow: column wrap;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
}

.section-3-como-te-ayuda-ellis {
  background-color: #101010;
}

.heading-3 {
  letter-spacing: -2px;
}

.heading-4 {
  text-align: left;
  letter-spacing: -1px;
  font-size: 22px;
}

.paragraph-3 {
  text-align: left;
  font-size: 15px;
}

.beneficios-grid {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  overflow-wrap: normal;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  padding: 24px;
  display: flex;
}

.section-4-como-te-ayuda-ellis {
  -webkit-text-fill-color: inherit;
  background-color: var(--color-bg);
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #2a2a2a;
  padding: var(--section-pad-y) 30px;
  position: relative;
  overflow: hidden;
}

.container-como-ayuda-ellis {
  width: 100%;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.titulo-como-ayuda-ellis {
  text-align: center;
  margin-bottom: 16px;
}

.descripcion-como-ayuda-ellis {
  text-align: center;
  max-width: 530px;
  margin-left: auto;
  margin-right: auto;
  font-size: 15px;
}

.slider-wrapper-como-ayuda-ellis {
  text-align: center;
  background-color: #0000;
  height: auto;
  margin-top: 50px;
}

.team-slide-wrapper {
  width: 30%;
  margin-right: 5%;
}

.team-block {
  text-align: center;
  background-color: #000;
  border: 1px solid #000;
  border-radius: 19px;
  padding-bottom: 24px;
}

.team-member-image-two {
  filter: blur();
  vertical-align: baseline;
  border-radius: 0;
  max-width: 35%;
  max-height: 50%;
  margin-bottom: 0;
  padding-top: 30px;
}

.team-block-info {
  flex-direction: column;
  align-items: flex-start;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
}

.team-member-name-two {
  text-align: left;
  letter-spacing: -1px;
  flex: 0 auto;
  margin-bottom: 12px;
  font-weight: 600;
}

.team-member-text {
  text-align: left;
  margin-bottom: 20px;
}

.text-link-arrow {
  color: #1a1b1f;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  display: flex;
}

.arrow-embed {
  margin-left: 2px;
  display: flex;
}

.team-slider-arrow {
  display: none;
}

.team-slider-nav {
  background-color: #101010;
  margin-top: 24px;
  font-size: 10px;
  position: static;
  bottom: -60px;
}

.team-slider-nav.w-slider-nav-invert > div {
  background-color: #ffffff40;
  width: 11px;
  height: 11px;
  margin: 0 6px;
  vertical-align: middle;
  transition: background-color .2s, box-shadow .2s;
}

.team-slider-nav.w-slider-nav-invert > div.w-active {
  background-color: #0eb3f5;
  box-shadow: 0 0 0 3px #0eb3f540, 0 0 10px #0eb3f5b3;
}

.mask {
  text-align: center;
}

.contacto-grid {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  background-color: #10101000;
  flex-flow: row;
  align-items: center;
  margin-top: 0;
  display: flex;
}

.info--card {
  box-sizing: border-box;
  background-color: #000;
  border: 1px solid #2c2c2c;
  border-radius: 20px;
  flex-flow: column;
  width: 48%;
  padding: 32px;
  display: flex;
}

.image-2 {
  vertical-align: top;
  order: 9999;
  align-self: flex-start;
  position: static;
}

.una-solucion-de-sistemas {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: row;
  justify-content: flex-start;
  align-self: center;
  align-items: center;
  padding-top: 0;
  padding-bottom: 20px;
  display: flex;
}

.logo-sp-footer {
  max-width: 20%;
}

.text-block-5 {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 20px;
  display: flex;
}

.form-block {
  width: 48%;
}

.section-5-formulario {
  color: var(--color-text);
  -webkit-text-fill-color: inherit;
  background-color: var(--color-bg);
  padding: var(--section-pad-y) 24px;
  position: relative;
  overflow: hidden;
}

.div-block {
  flex-flow: row;
  justify-content: flex-start;
  align-self: center;
  align-items: center;
  display: flex;
}

.image-4 {
  object-fit: fill;
  align-self: flex-start;
  max-width: 50%;
  padding-left: 40px;
}

.submit-button {
  color: #fff;
  text-align: center;
  vertical-align: top;
  background-color: #000;
  background-image: linear-gradient(120deg, #0eb3f5, #0085ae 12%, #105374 40%, #000 101%);
  border: 1px solid #383838;
  border-radius: 20px;
  margin-top: 20px;
  font-size: 16px;
  font-weight: 600;
  display: inline-block;
}

.form {
  padding-top: 0;
}

.code-embed {
  min-width: 70%;
}

.boton-quiero-conocer-a-ellis {
  flex-flow: row;
  justify-content: center;
  align-items: center;
  display: flex;
}

.div-contacto {
  flex-flow: column;
  align-items: flex-start;
  width: 48%;
  display: flex;
}

/* Opciones de contacto alineadas a la izquierda */
.div-contacto .contactanos {
  text-align: left;
}

.div-contacto .contacto-tel-fono,
.div-contacto .una-solucion-de-sistemas {
  align-self: flex-start;
  justify-content: flex-start;
}

.div-redes {
  flex-flow: column;
  display: flex;
}

.container-4 {
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  flex-flow: row;
  justify-content: center;
  align-items: flex-start;
  padding-top: 40px;
  display: flex;
}

.div-solucion {
  text-align: center;
  background-color: #101010;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 20%;
  margin-top: 10px;
  display: flex;
}

.image-5 {
  width: 50%;
  max-width: 70%;
}

.text-block-6 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  width: 50%;
  display: flex;
  overflow: clip;
}

.contacto-tel-fono {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: row;
  justify-content: flex-start;
  align-self: center;
  align-items: center;
  padding-bottom: 10px;
  display: flex;
}

.tarjeta-reds {
  flex-flow: column;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding-top: 0;
  display: flex;
}

.redes-sociales {
  background-color: #000;
  border: 1px solid #0091df;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  padding: 8px 20px;
  display: inline-flex;
}

.contactanos {
  text-align: center;
  padding-bottom: 20px;
  font-family: Poppins, Arial, sans-serif;
  font-size: 19px;
  font-weight: 600;
}

.redes-block {
  grid-column-gap: 14px;
  grid-row-gap: 0px;
  flex-flow: row;
  flex: 0 auto;
  order: -9999;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-self: auto;
  align-items: center;
  padding-top: 0;
  display: flex;
}

.image-6 {
  max-width: 10%;
  padding-right: 0;
  font-size: 10px;
}

.image-7, .image-8, .image-9 {
  max-width: 8%;
}

.siguenos {
  text-align: center;
  padding-top: 20px;
  font-size: 15px;
}

.div-block-4 {
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 50%;
  display: flex;
}

.copywrite {
  text-align: center;
  margin-bottom: 0;
  padding-top: 40px;
  padding-bottom: 24px;
}

.section-6 {
  background-color: var(--color-bg);
  position: relative;
  overflow: hidden;
}

.div-block-5 {
  justify-content: center;
  align-items: center;
  display: flex;
}

.text-block-9 {
  font-size: 18px;
}

.text-field, .text-field-2, .text-field-3, .text-field-4 {
  background-color: #000;
  border: 1px solid #215872;
  border-radius: 10px;
}

.logo-sistemas-footer {
  max-width: 30%;
}

.una-solucion {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 20px;
  display: flex;
}

.icon-map, .icon-time {
  max-width: 10%;
}

.icon-telefono {
  max-width: 16%;
}

.icon-mail {
  max-width: 15%;
}

.icon-ubi {
  max-width: 16%;
}

.container-5 {
  padding-top: 20px;
}

.image-10 {
  max-width: 15%;
}

.logo-ellis {
  width: auto;
  height: 42px;
  max-width: 20%;
}

.navigator-logo-sp {
  width: auto;
  height: 42px;
  max-width: 19%;
}

.container-navigator {
  background-color: #101010;
}

.navbar {
  background-color: #101010;
  border: 1px solid #525252;
}

.navigator-logos {
  grid-column-gap: 19px;
  grid-row-gap: 19px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.text-block-10 {
  text-align: right;
}

.vis-tanos-en-la-amsofac {
  text-align: right;
  flex-flow: row;
  flex: 1;
  justify-content: flex-end;
  align-items: flex-start;
  font-size: 16px;
  display: flex;
}

.navegador {
  background-color: #101010;
  border: 1px solid #3b3b3b;
  padding-top: 10px;
  padding-bottom: 10px;
}

.icon-linkedin {
  width: 19.9972%;
  max-width: 20%;
}

.link-linkedin {
  box-sizing: border-box;
  flex-flow: row;
  flex: 0 auto;
  order: 1;
  justify-content: center;
  align-self: auto;
  align-items: center;
  width: auto;
  min-width: auto;
  max-width: none;
  min-height: auto;
  display: flex;
  position: static;
  overflow: visible;
}

.link-facebook {
  text-align: left;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-facebook {
  max-width: 20%;
}

.icon-instagram {
  max-width: 20%;
  display: block;
}

.link-instagram {
  justify-content: center;
  align-items: center;
  display: flex;
}

.link-tiktok {
  justify-content: space-around;
  align-items: center;
  display: flex;
}

.image-11 {
  max-width: 20%;
}

@media screen and (max-width: 991px) {
  .container-2 {
    max-width: 728px;
  }

  .porque-ellis-grid {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: -40px;
  }

  .gr-fico-ellis {
    max-width: 100%;
    margin-bottom: 40px;
  }

  .container-como-ayuda-ellis {
    max-width: 728px;
  }

  .team-slide-wrapper {
    width: 47%;
    margin-right: 6%;
  }
}

@media screen and (max-width: 767px) {
  .section-3-porque-ellis, .section-4-como-te-ayuda-ellis {
    padding: 60px 15px;
  }
}

@media screen and (max-width: 479px) {
  .container-2, .container-como-ayuda-ellis {
    max-width: none;
  }

  .titulo-como-ayuda-ellis {
    margin-bottom: 24px;
  }

  .team-slide-wrapper {
    width: 100%;
    margin-right: 0%;
  }
}


@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* ===== Aurora ambiental (fondo difuminado continuo en CSS) ===== */

/* Una sola capa de luz detrás de TODA la página, fija al viewport, para dar
   CONTINUIDAD (sin cortes entre secciones). Se controla con --glow-rgb. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 45% at 12% 6%,   rgba(var(--glow-rgb), .30), transparent 62%),
    radial-gradient(48% 42% at 96% 40%,  rgba(var(--glow-rgb), .22), transparent 60%),
    radial-gradient(75% 55% at 50% 106%, rgba(var(--glow-rgb), .26), transparent 62%);
  animation: aurora-drift 20s ease-in-out infinite alternate;
}

@keyframes aurora-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .82; }
  100% { transform: translate3d(0, -2.5%, 0) scale(1.06); opacity: 1; }
}

/* Secciones transparentes: la aurora fluye de forma continua a través de ellas.
   (Retos también es transparente; su .webp tiene alfa, así que solo el avión y
   el brillo se pintan sobre la aurora.) El footer NO va aquí: es un bloque aparte. */
.hero-section,
.section-2-retos,
.section-3-porque-ellis,
.section-4-como-te-ayuda-ellis,
.section-5-formulario {
  background-color: transparent;
  border: none;
}

/* ===== HERO: rayos de luz (imagen del diseño) reactivos al scroll ===== */
#container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  padding-left: 24px;
  padding-right: 24px;
}

/* Los rayos son la imagen original del diseño (HERO-LANDING.webp).
   mix-blend-mode: screen descarta las zonas oscuras (se ve la aurora) y deja
   pasar solo los haces brillantes. El JS transforma este elemento al hacer scroll. */
.hero-rays {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('../images/HERO-LANDING.webp');
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: cover;
  mix-blend-mode: screen;
  transform-origin: 20% 0%;
  will-change: transform, opacity;
}

/* ===== FOOTER: bloque seccionado (separado de la aurora) ===== */
.section-6 {
  background: #0c0f17;
  border-top: 1px solid #262b36;
  padding-bottom: 28px;
}

.section-6::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90%;
  background: radial-gradient(70% 95% at 50% 100%, rgba(var(--glow-rgb), .26), transparent 62%);
  z-index: 0;
  pointer-events: none;
  animation: glow-breathe 11s ease-in-out infinite;
}

.container-4,
.copywrite {
  position: relative;
  z-index: 1;
}

@keyframes glow-breathe {
  0%, 100% { opacity: .6; }
  50%      { opacity: .95; }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .section-6::before {
    animation: none;
  }
}

/* ===== Componentes reutilizables ===== */

/* Iconos de redes sociales: tamaño FIJO (no depende del contenedor).
   Redimensiona la píldora sin que cambien los iconos, y viceversa. */
.icon-linkedin,
.icon-facebook,
.icon-instagram,
.image-11 {
  width: var(--icon-social);
  height: var(--icon-social);
  max-width: none;
  object-fit: contain;
  flex: none;
}

/* Iconos de contacto (teléfono, correo, ubicación, mapa, horario): tamaño FIJO. */
.icon-telefono,
.icon-mail,
.icon-ubi,
.icon-map,
.icon-time {
  width: var(--icon-contact);
  height: var(--icon-contact);
  max-width: none;
  object-fit: contain;
  flex: none;
}

/* ===== Animaciones y micro-interacciones ===== */

/* Scroll suave para los anclas (#name, etc.) */
html {
  scroll-behavior: smooth;
}

/* --- Aparición al hacer scroll (reveal). El estado oculto solo se aplica
   cuando el JS añade .reveal-on al <html> (si no hay JS o hay reduced-motion,
   todo se ve normal). --- */
.reveal-on .hero-heading,
.reveal-on .hero-description,
.reveal-on .button-primary,
.reveal-on .hero-visual,
.reveal-on .retos-de-una-arrendadora,
.reveal-on .descripcion-retos,
.reveal-on .reto-item,
.reveal-on .gr-fico-ellis,
.reveal-on .titulo-como-ayuda-ellis,
.reveal-on .descripcion-como-ayuda-ellis,
.reveal-on .info--card,
.reveal-on .form-block,
.reveal-on .una-solucion,
.reveal-on .div-contacto,
.reveal-on .tarjeta-reds,
.reveal-on .copywrite {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .6s cubic-bezier(.22, .61, .36, 1),
              box-shadow .3s ease,
              border-color .3s ease;
  will-change: opacity, transform;
}

.reveal-on .is-visible {
  opacity: 1;
  transform: none;
}

/* Escalonado sutil (solo en elementos sin hover, para no retrasar el hover) */
.reveal-on .hero-description { transition-delay: .08s; }
.reveal-on .hero-visual { transition-delay: .12s; }
.reveal-on .form-block { transition-delay: .1s; }
.reveal-on .tarjeta-reds { transition-delay: .08s; }

/* --- Flotación sutil de la laptop del hero --- */
.image {
  animation: floaty 6s ease-in-out infinite;
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* --- Hover / micro-interacciones --- */
.button-primary,
.submit-button {
  transition: transform .25s ease, box-shadow .25s ease,
              background-color .25s ease, border-color .25s ease;
}

.button-primary:hover,
.submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(var(--glow-rgb), .38);
  border-color: var(--color-accent);
}

.button-primary:active,
.submit-button:active {
  transform: translateY(0);
}

.reto-item {
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.reto-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(var(--glow-rgb), .3);
  border-color: var(--color-accent);
}

.team-block {
  transition: transform .3s ease, box-shadow .3s ease;
}

.team-block:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .5), 0 0 22px rgba(var(--glow-rgb), .22);
}

.info--card {
  transition: box-shadow .3s ease;
}

.info--card:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, .4), 0 0 24px rgba(var(--glow-rgb), .18);
}

.link-linkedin,
.link-facebook,
.link-instagram,
.link-tiktok {
  transition: transform .25s ease;
}

.link-linkedin:hover,
.link-facebook:hover,
.link-instagram:hover,
.link-tiktok:hover {
  transform: translateY(-3px) scale(1.12);
}

.text-field,
.text-field-2,
.text-field-3,
.text-field-4 {
  transition: border-color .25s ease, box-shadow .25s ease;
}

.text-field:focus,
.text-field-2:focus,
.text-field-3:focus,
.text-field-4:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--glow-rgb), .18);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .image {
    animation: none;
  }
}

/* ===== Ajustes responsivos ===== */
@media screen and (max-width: 991px) {
  /* Hero apilado (texto arriba, laptop abajo) ya desde tablet */
  .hero-section {
    min-height: auto;
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .hero-wrapper {
    flex-direction: column;
    height: auto;
    grid-row-gap: 36px;
    row-gap: 36px;
  }

  .hero-content {
    align-items: center;
    text-align: center;
  }

  .hero-heading {
    font-size: 46px;
  }

  .hero-heading br {
    display: none;
  }

  .hero-description {
    max-width: 100%;
  }

  .hero-visual {
    width: 100%;
    min-height: auto;
  }

  .image {
    width: 100%;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }

  .retos-grid {
    grid-column-gap: 22px;
    column-gap: 22px;
  }
}

@media screen and (max-width: 767px) {
  .navigator-logos {
    flex-wrap: wrap;
    grid-row-gap: 6px;
    row-gap: 6px;
  }

  .logo-ellis, .navigator-logo-sp {
    height: 34px;
  }

  .hero-heading {
    font-size: 34px;
  }

  /* Rayos del hero responsivos: se muestran como banda de luz arriba,
     centrados en los haces (si no, se recortaban y se perdían). */
  .hero-rays {
    bottom: auto;
    height: 62%;
    background-position: 30% 0%;
  }

  .section-2-retos,
  .section-3-porque-ellis,
  .section-4-como-te-ayuda-ellis,
  .section-5-formulario {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .container-retos {
    padding-top: 0;
  }

  .retos-grid {
    flex-wrap: wrap;
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    column-gap: 14px;
    row-gap: 14px;
    padding-bottom: 0;
  }

  .contacto-grid {
    flex-direction: column;
    grid-row-gap: 24px;
    row-gap: 24px;
  }

  .info--card, .form-block {
    width: 100%;
  }

  .form {
    padding-top: 24px;
  }

  .code-embed {
    width: 100%;
    min-width: 0;
  }

  .code-embed iframe {
    width: 100%;
  }

  .container-4 {
    flex-direction: column;
    grid-row-gap: 40px;
    row-gap: 40px;
    align-items: center;
  }

  .div-contacto, .tarjeta-reds {
    width: 100%;
  }
}

@media screen and (max-width: 479px) {
  .hero-heading {
    font-size: 28px;
  }

  .hero-rays {
    height: 52%;
  }

  .retos-de-una-arrendadora {
    font-size: 26px;
  }

  .retos-grid {
    flex-direction: column;
    align-items: stretch;
  }

  .reto-item {
    width: 100%;
    text-align: center;
  }
}