.elementor-7018 .elementor-element.elementor-element-664c20f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-1vw;--margin-bottom:0vw;--margin-left:0vw;--margin-right:0vw;--padding-top:0vw;--padding-bottom:0vw;--padding-left:0vw;--padding-right:0vw;}.elementor-7018 .elementor-element.elementor-element-664c20f.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-7018 .elementor-element.elementor-element-8e73142{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0vw;--margin-bottom:0vw;--margin-left:0vw;--margin-right:0vw;--padding-top:0vw;--padding-bottom:0vw;--padding-left:0vw;--padding-right:0vw;}.elementor-7018 .elementor-element.elementor-element-8e73142.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-7018 .elementor-element.elementor-element-f45280d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-7018 .elementor-element.elementor-element-f45280d:not(.elementor-motion-effects-element-type-background), .elementor-7018 .elementor-element.elementor-element-f45280d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-text );}.elementor-7018 .elementor-element.elementor-element-f45280d > .elementor-shape-bottom .elementor-shape-fill, .elementor-7018 .elementor-element.elementor-element-f45280d > .e-con-inner > .elementor-shape-bottom .elementor-shape-fill{fill:var( --e-global-color-text );}.elementor-7018 .elementor-element.elementor-element-f45280d > .elementor-shape-bottom svg, .elementor-7018 .elementor-element.elementor-element-f45280d > .e-con-inner > .elementor-shape-bottom svg{width:calc(100% + 1.3px);height:50px;transform:translateX(-50%) rotateY(180deg);}.elementor-7018 .elementor-element.elementor-element-f45280d > .elementor-shape-bottom, .elementor-7018 .elementor-element.elementor-element-f45280d > .e-con-inner > .elementor-shape-bottom{z-index:2;pointer-events:none;}.elementor-7018 .elementor-element.elementor-element-1d255dd{width:var( --container-widget-width, 102.639% );max-width:102.639%;--container-widget-width:102.639%;--container-widget-flex-grow:0;}.elementor-7018 .elementor-element.elementor-element-1d255dd.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-7018 .elementor-element.elementor-element-44d5dc2{--display:flex;--min-height:30em;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:stretch;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--margin-top:-1vw;--margin-bottom:0vw;--margin-left:0vw;--margin-right:0vw;--padding-top:5%;--padding-bottom:5%;--padding-left:5%;--padding-right:5%;}.elementor-7018 .elementor-element.elementor-element-44d5dc2:not(.elementor-motion-effects-element-type-background), .elementor-7018 .elementor-element.elementor-element-44d5dc2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-text );}.elementor-7018 .elementor-element.elementor-element-44d5dc2.e-con{--align-self:flex-start;}@media(min-width:768px){.elementor-7018 .elementor-element.elementor-element-664c20f{--width:100%;}.elementor-7018 .elementor-element.elementor-element-8e73142{--width:100%;}.elementor-7018 .elementor-element.elementor-element-f45280d{--width:100%;}.elementor-7018 .elementor-element.elementor-element-44d5dc2{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-e1ef0e9 *//* =========================
   HERO PRINCIPAL
   ========================= */

/* Contenedor principal del hero */
.hero0{

  width:100vw; /* Ocupa el 100% del ancho de la pantalla (viewport) */

  height:31.25vw; /* Altura responsive basada en el ancho de pantalla */
  max-height:31.25vw; /* Limita la altura máxima al mismo valor */

  background-color:#000075; /* Color de fondo azul oscuro del hero */

  overflow:hidden; /* Evita que elementos decorativos se salgan del contenedor */

  display:flex; /* Activa Flexbox para dividir contenido en columnas */

  margin-left:calc(-50vw + 50%); /* Rompe el contenedor y lo expande full width */
  margin-right:calc(-50vw + 50%); /* Lo mismo hacia la derecha */

  position:relative; /* Permite posicionar elementos ::before y ::after */
}



/* =========================
   DECORACIÓN DE FONDO
   ========================= */

/* Estrella decorativa superior izquierda */
.hero0::before{

  content:"✦︎"; /* Símbolo decorativo */

  position:absolute; /* Se posiciona relativo al hero */

  font-size:14vw; /* Tamaño grande relativo a pantalla */

  left:5vw; /* Posición desde la izquierda */
  top:4vw; /* Posición desde arriba */

  transform:rotate(-15deg); /* Rotación estética */

  opacity:.25; /* Transparencia para que no distraiga */

  z-index:1; /* Detrás del contenido principal */

  pointer-events:none; /* No interfiere con clics */
}


/* Estrellas decorativas inferiores */
.hero0::after{

  content:"✦✦︎︎"; /* Más símbolos decorativos */

  position:absolute; /* Posicionamiento absoluto */

  font-size:9vw; /* Tamaño menor que el anterior */

  left:13vw; /* Posición horizontal */
  bottom:-2vw; /* Sale un poco hacia abajo */

  transform:rotate(12deg); /* Rotación contraria */

  letter-spacing:3vw; /* Espacio entre estrellas */

  opacity:.20; /* Más transparente */

  z-index:1; /* Detrás del contenido */

  pointer-events:none; /* No clickeable */
}



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

/* Contenedor del texto */
.hero0__content{

  width:50%; /* Ocupa la mitad izquierda del hero */

  padding:3.47vw 4.17vw 3.47vw 17vw !important; /* Espaciado interno (arriba, derecha, abajo, izquierda) */

  color:white; /* Color del texto */

  display:flex; /* Flexbox interno */

  flex-direction:column; /* Elementos en columna */

  justify-content:center; /* Centrado vertical */

  position:relative; /* Para capas internas */

  z-index:2; /* Encima de decoraciones */
}



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

.hero0__title{

  color:#ffffff; /* Color blanco */

  font-size:3vw; /* Tamaño responsive del título */

  line-height:1.1; /* Espaciado entre líneas reducido */

  margin-bottom:1.3vw; /* Separación inferior */

  position:relative; /* Para el subrayado decorativo */

  display:block; /* Comportamiento de bloque */

  max-width:28vw; /* Evita que el texto sea muy largo */

  font-weight:800; /* Negrita fuerte */
}



/* Palabra destacada */
.hero0__title span{

  color:#F3CB4E; /* Color amarillo destacado */

  position:relative; /* Necesario para el subrayado */

  display:inline-block; /* Permite pseudo-elementos */
}



/* Subrayado decorativo */
.hero0__title span::after{

  content:""; /* Línea decorativa */

  position:absolute; /* Posición relativa al texto */

  left:0; /* Inicia desde la izquierda */
  bottom:-0.3vw; /* Debajo del texto */

  width:100%; /* Igual al ancho del texto */
  height:0.3vw; /* Grosor de la línea */

  background:#F3CB4E; /* Color amarillo */

  border-radius:5vw; /* Bordes redondeados */
}



/* =========================
   TEXTO DESCRIPTIVO
   ========================= */

.hero0__text{

  color:#ffffff; /* Texto blanco */

  font-size:1vw; /* Tamaño responsive */

  line-height:1.5em; /* Espaciado entre líneas */

  margin-bottom:2vw; /* Separación inferior */

  max-width:24vw; /* Evita líneas demasiado largas */
}



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

.hero0__buttons{

  display:flex; /* Flexbox para botones */

  align-items:center; /* Centrado vertical */

  justify-content:flex-start; /* Alineados a la izquierda */

  gap:1vw; /* Espacio entre botones */

  margin-top:1vw; /* Separación superior */

  flex-wrap:wrap; /* Permite salto de línea si no caben */
}



/* =========================
   BOTONES BASE
   ========================= */

.hero0__btn-primary,
.hero0__btn-secondary{

  background-color:#fff; /* Fondo blanco */

  color:#000075; /* Texto azul */

  border:none; /* Sin borde */

  padding:0.9vw 1.8vw; /* Espaciado interno */

  border-radius:5vw; /* Forma tipo “pill” */

  cursor:pointer; /* Cursor de clic */

  display:inline-flex; /* Flex interno */

  align-items:center; /* Centrado vertical */

  justify-content:center; /* Centrado horizontal */

  width:auto; /* Ancho automático */

  font-size:.85vw; /* Tamaño del texto */

  font-weight:700; /* Negrita */

  gap:0.6vw; /* Espacio icono-texto */

  transition:0.3s ease; /* Animación suave */

  text-decoration:none !important; /* Sin subrayado */

  white-space:nowrap; /* Evita salto de línea */
}



/* Hover botón principal */
.hero0__btn-primary:hover{
  background-color:#C9D6FB; /* Cambia fondo */
  color:#000075; /* Cambia texto */
  transform:scale(1.05); /* Efecto zoom */
}


/* Hover botón secundario */
.hero0__btn-secondary:hover{
  background-color:#F3CB4E; /* Fondo amarillo */
  color:#000075; /* Texto azul */
  transform:scale(1.05); /* Zoom */
}



/* Iconos en botones */
.hero0__btn-primary i,
.hero0__btn-secondary i{

  font-size:.85vw; /* Tamaño del icono */
}



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

.hero0__image{

  width:58%; /* Ocupa más espacio que el texto */

  position:relative; /* Base para efectos */

  overflow:hidden; /* Evita desbordes */

  z-index:2; /* Encima del fondo */
}



/* Imagen principal */
.hero0__image img{

  width:100%; /* Ancho completo */

  height:100%; /* Alto completo */

  object-fit:cover; /* Recorta sin deformar */

  display:block; /* Elimina espacios */

  border-top-left-radius:50% 100%; /* Curva superior izquierda */
  border-bottom-left-radius:50% 100%; /* Curva inferior izquierda */

  box-shadow:0 0 2vw rgba(0,0,117,0.18); /* Sombra suave */

  -webkit-mask-image:linear-gradient(
    to left,
    rgba(0,0,0,1) 25%,
    rgba(0,0,0,0.7) 45%,
    rgba(0,0,0,0.3) 70%,
    rgba(0,0,0,0)
  ); /* Desvanecido en Safari */

  mask-image:linear-gradient(
    to left,
    rgba(0,0,0,1) 25%,
    rgba(0,0,0,0.7) 45%,
    rgba(0,0,0,0.3) 70%,
    rgba(0,0,0,0)
  ); /* Desvanecido normal */
}



/* =========================
   RESPONSIVE
   ========================= */

@media(max-width:1024px){

  .hero0{
    flex-direction:column; /* Cambia de horizontal a vertical */
    height:auto; /* Altura automática */
    max-height:none; /* Sin límite */
  }

  .hero0::before{
    font-size:30vw; /* Más grande en móvil */
    left:-5vw;
    top:15vw;
  }

  .hero0::after{
    font-size:18vw;
    left:20vw;
    bottom:10vw;
  }

  .hero0__content{
    width:100%; /* Ocupa todo el ancho */
    padding:10vw 7vw !important; /* Más espacio en móvil */
    text-align:center; /* Centra texto */
    align-items:center; /* Centra flex */
  }

  .hero0__title{
    font-size:10vw; /* Título grande en móvil */
    max-width:100%;
  }

  .hero0__text{
    font-size:3.8vw; /* Texto más legible */
    max-width:100%;
  }

  .hero0__buttons{
    justify-content:center; /* Centra botones */
    gap:3vw; /* Más separación */
  }

  .hero0__btn-primary,
  .hero0__btn-secondary{
    font-size:3.5vw; /* Botones más grandes */
    padding:3vw 6vw; /* Más cómodos */
  }

  .hero0__btn-primary i,
  .hero0__btn-secondary i{
    font-size:3.5vw; /* Iconos más grandes */
  }

  .hero0__image{
    width:100%; /* Imagen ocupa todo */
    height:90vw; /* Altura responsive */
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f134d7c *//* =========================
   SECTION PRINCIPAL
   ========================= */

/* Contenedor general de la sección "Choose" */
.choose0{

  width:100%; /* ocupa todo el ancho disponible */

  max-width:1300px; /* limita el ancho en pantallas grandes para mejor lectura */

  height:35vw; /* altura responsive basada en el viewport */

  margin:auto; /* centra la sección horizontalmente */

  padding:4rem 1.5rem; /* espacio interno (arriba/abajo y lados) */
}



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

/* Título de la sección */
.choose0__title{

  text-align:center; /* centra el texto */

  font-size:3vw; /* tamaño del texto responsive */

  font-weight:700; /* negrita */

  color:#090250; /* azul oscuro */

  margin-bottom:3rem; /* separación inferior */
}



/* =========================
   PALABRA DESTACADA (AMARILLO)
   ========================= */

/* Palabra resaltada dentro del título */
.choose0__word{

  position:relative; /* necesario para el subrayado */

  color:#F3CB4E; /* color amarillo destacado */
}



/* Subrayado decorativo de la palabra */
.choose0__word::after{

  content:""; /* crea una línea decorativa */

  position:absolute; /* se posiciona relativo al texto */

  left:0; /* inicia desde la izquierda */
  bottom:-6px; /* se coloca debajo del texto */

  width:100%; /* ocupa todo el ancho del texto */
  height:0.31vw; /* grosor de la línea */

  background:#F3CB4E; /* mismo color amarillo */

  border-radius:20px; /* bordes redondeados */
}



/* =========================
   TEXTO / BRAND (AZUL OSCURO)
   ========================= */

/* Parte del título o marca en color azul */
.choose0__brand{

  color:#090250; /* azul oscuro */
}



/* =========================
   GRID DE TARJETAS
   ========================= */

/* Contenedor de las tarjetas */
.choose0__grid{

  display:grid; /* activa CSS Grid */

  /* columnas automáticas según el espacio disponible */
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

  gap:24px; /* espacio entre tarjetas */
}



/* =========================
   TARJETA INDIVIDUAL
   ========================= */

/* Contenedor de cada tarjeta */
.choose0__card{

  height:360px; /* altura fija de la card */

  perspective:1200px; /* activa efecto 3D para el flip */
}



/* =========================
   INTERIOR DE LA TARJETA
   ========================= */

/* Contenedor interno que gira */
.choose0__card-inner{

  position:relative; /* referencia para las caras */

  width:100%; /* ocupa todo el ancho */
  height:100%; /* ocupa toda la altura */

  transform-style:preserve-3d; /* permite efecto 3D real */

  transition:transform .7s ease; /* animación suave del giro */
}



/* Efecto hover: gira la tarjeta */
.choose0__card:hover .choose0__card-inner{

  transform:rotateY(180deg); /* gira la tarjeta horizontalmente */
}



/* =========================
   CARA FRONTAL Y TRASERA
   ========================= */

/* Estilos comunes para front y back */
.choose0__front,
.choose0__back{

  position:absolute; /* se superponen */

  inset:0; /* top/right/bottom/left = 0 */

  border-radius:24px; /* bordes redondeados */

  overflow:hidden; /* evita desbordes */

  backface-visibility:hidden; /* oculta la cara trasera al girar */
  -webkit-backface-visibility:hidden;

  box-shadow:0 10px 30px rgba(0,0,0,.08); /* sombra suave */
}



/* =========================
   FRENTE DE LA TARJETA
   ========================= */

/* Cara frontal */
.choose0__front{

  background:#FFF; /* fondo blanco */
}



/* IMAGEN DE LA TARJETA */
.choose0__image{

  width:100%; /* ancho completo */

  height:210px; /* altura fija de imagen */
}



/* Imagen dentro del contenedor */
.choose0__image img{

  width:100%; /* ocupa todo el ancho */

  height:100%; /* ocupa toda la altura */

  object-fit:cover; /* recorta sin deformar */

  display:block; /* elimina espacios inferiores */
}



/* =========================
   PARTE INFERIOR DEL FRENTE
   ========================= */

/* Zona inferior de la tarjeta frontal */
.choose0__front-bottom{

  position:relative; /* base para icono flotante */

  height:150px; /* altura de la parte inferior */

  background:#fff; /* fondo blanco */

  display:flex; /* centra contenido */

  align-items:center; /* centrado vertical */
  justify-content:center; /* centrado horizontal */

  padding:2rem 1.5rem; /* espacio interno */
}



/* =========================
   ICONO CIRCULAR SUPERIOR
   ========================= */

/* Icono flotante en la tarjeta */
.choose0__icon{

  position:absolute; /* sale del flujo normal */

  top:-38px; /* lo sube encima de la tarjeta */
  left:50%; /* lo centra horizontalmente */

  transform:translateX(-50%); /* ajuste fino de centrado */

  width:76px; /* tamaño del círculo */
  height:76px;

  border-radius:50%; /* forma circular */

  background:#000075; /* azul oscuro */

  border:5px solid #fff; /* borde blanco */

  display:flex; /* centra icono */

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

  font-size:1.7rem; /* tamaño del icono */

  color:#F3CB4E; /* color amarillo */

  box-shadow:0 8px 20px rgba(0,0,0,.15); /* sombra */
}



/* TÍTULO DEL FRENTE */
.choose0__front-bottom h3{

  margin-top:2rem; /* separación del icono */

  text-align:center; /* centra texto */

  font-size:1.4rem; /* tamaño del título */

  font-weight:700; /* negrita */

  color:#090250; /* azul oscuro */
}



/* =========================
   PARTE TRASERA (BACK)
   ========================= */

/* Cara trasera de la tarjeta */
.choose0__back{

  background:#000075; /* fondo azul oscuro */

  transform:rotateY(180deg); /* queda oculta inicialmente */

  padding:2rem; /* espacio interno */

  display:flex; /* flexbox */

  flex-direction:column; /* contenido en columna */

  align-items:center; /* centrado horizontal */

  justify-content:center; /* centrado vertical */

  text-align:center; /* texto centrado */

  border:4px solid #c9d6fb; /* borde amarillo */
}



/* ICONO DEL BACK */
.choose0__back-icon{

  width:82px; /* tamaño del círculo */

  height:82px;

  border-radius:50%; /* círculo */

  background:#F3CB4E; /* amarillo */

  display:flex; /* centra icono */

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

  font-size:2rem; /* tamaño del icono */

  color:#000075; /* azul */

  margin-bottom:1rem; /* separación inferior */
}



/* TÍTULO DEL BACK */
.choose0__back h3{

  color:#F3CB4E; /* amarillo */

  font-size:1.5rem; /* tamaño del título */

  margin-bottom:1rem; /* separación inferior */
}



/* TEXTO DEL BACK */
.choose0__back p{

  color:rgba(255,255,255,.85); /* blanco transparente */

  line-height:1.7; /* espacio entre líneas */

  font-size:.96rem; /* tamaño del texto */
}



/* =========================
   RESPONSIVE
   ========================= */

/* Ajustes para pantallas pequeñas */
@media(max-width:768px){

  .choose0__title{

    font-size:2rem; /* reduce tamaño del título */
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1d255dd *//* =========================
   SECCIÓN PRINCIPAL
   ========================= */

/* Contenedor general de la sección */
.home-how-it-works {

  width: 100%; /* ocupa todo el ancho disponible */

  padding: 4rem 1.5rem; /* espacio interno arriba/abajo y laterales */

  background: #FFF; /* fondo blanco */

  position: relative; /* base para elementos decorativos */

  overflow: hidden; /* evita desbordes */

  display: flex; /* activa flexbox */

  flex-direction: column; /* organiza elementos en columna */

  align-items: center; /* centra contenido horizontalmente */
}



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

/* Contenedor del encabezado */
.home-how-it-works__header {

  text-align: center; /* centra el texto */

  margin-bottom: 4rem; /* separación inferior */
}



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

/* Título principal de la sección */
.home-how-it-works__title {

  font-size: 3vw; /* tamaño responsive */

  font-weight: 700; /* negrita */

  color: #090250; /* azul oscuro */

  text-align: center; /* centra texto */
}



/* PALABRA DESTACADA (FUNCIONA) */
.home-how-it-works__title span {

  color: #F3CB4E; /* amarillo destacado */

  position: relative; /* necesario para subrayado */

  display: inline-block; /* permite pseudo-elementos */
}



/* SUBRAYADO AMARILLO */
.home-how-it-works__title span::after {

  content: ""; /* crea línea decorativa */

  position: absolute; /* posicionada respecto al texto */

  left: 0; /* inicia desde izquierda */

  bottom: -0.45vw; /* debajo del texto */

  width: 100%; /* ancho completo del texto */

  height: 0.32vw; /* grosor de la línea */

  background: #F3CB4E; /* color amarillo */

  border-radius: 5vw; /* bordes redondeados */
}



/* =========================
   WRAPPER (CONTENEDOR PRINCIPAL)
   ========================= */

/* Contenedor de las dos columnas */
.home-how-it-works__wrapper {

  display: grid; /* usa CSS Grid */

  /* dos columnas con ancho controlado */
  grid-template-columns: repeat(2, minmax(650px, 750px));

  justify-content: center; /* centra el grid horizontalmente */

  align-items: start; /* alinea arriba */

  gap: 4rem; /* espacio entre columnas */

  position: relative; /* base para línea central */

  width: 100%; /* ocupa todo el ancho */

  margin: 0 auto; /* centra horizontalmente */
}



/* =========================
   LÍNEA DIVISORIA CENTRAL
   ========================= */

/* Línea vertical decorativa entre columnas */
.home-how-it-works__wrapper::after {

  content: ""; /* elemento decorativo */

  position: absolute; /* posicionamiento libre */

  left: 50%; /* centro horizontal */

  top: 2vw; /* separación superior */

  transform: translateX(-50%); /* centra perfectamente */

  width: 5px; /* grosor de la línea */

  height: 85%; /* altura de la línea */

  background: #000075; /* color azul oscuro */

  z-index: 2; /* por encima del fondo */
}



/* =========================
   COLUMNA
   ========================= */

/* Cada columna del layout */
.home-how-it-works__column {

  background: #FFF; /* fondo blanco */

  border-radius: 25px; /* bordes redondeados */

  padding: 2.5rem 2rem; /* espacio interno */

  position: relative; /* base para elementos internos */

  overflow: hidden; /* evita desbordes */
}



/* =========================
   BOTONES USUARIOS / CONDUCTORES
   ========================= */

/* Botón base */
.home-how-it-works__label {

  display: flex; /* flexbox */

  justify-content: center; /* centra contenido */

  align-items: center; /* centra vertical */

  width: fit-content; /* ancho según contenido */

  margin: 0 auto 3rem auto; /* centra y separa abajo */

  padding: 1.2rem 2rem; /* espacio interno */

  border-radius: 999px; /* forma tipo píldora */

  font-size: 1vw; /* tamaño responsive */

  font-weight: 700; /* negrita */

  border: none; /* sin borde */

  outline: none; /* sin outline */

  cursor: pointer; /* cursor clickeable */

  transition: all 0.3s ease; /* animación
  suave */
  
  text-decoration: none !important;
}



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

/* Estilo usuarios */
.users-label {

  background: #000075; /* azul oscuro */

  color: #ffffff; /* texto blanco */
}

/* hover usuarios */
.users-label:hover {

  transform: scale(1.05); /* agranda */

  background: #c9d6fb; /* cambia fondo */

  color: #000075; /* cambia texto */
}



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

/* Estilo conductores */
.drivers-label {

  background: #F3CB4E; /* amarillo */

  color: #000075; /* texto azul */
}

/* hover conductores */
.drivers-label:hover {

  transform: scale(1.05); /* agranda */

  background: #000075; /* cambia a azul */

  color: #F3CB4E; /* texto amarillo */
}



/* EFECTO CLICK */
.home-how-it-works__label:active {

  transform: scale(0.96); /* efecto presión */
}



/* =========================
   PASOS
   ========================= */

/* Contenedor de pasos */
.home-how-it-works__steps {

  display: flex; /* flexbox */

  justify-content: space-between; /* separa pasos */

  gap: 2rem; /* espacio entre pasos */

  width: 100%; /* ocupa todo el ancho */
}



/* PASO INDIVIDUAL */
.home-how-it-works__step {

  flex: 1; /* todos ocupan mismo espacio */

  min-width: 0; /* evita desbordes */

  text-align: center; /* centra texto */

  position: relative; /* base para línea */
}



/* =========================
   ÍCONO
   ========================= */

/* Círculo del icono */
.home-how-it-works__icon {

  width: 70px; /* ancho */

  height: 70px; /* alto */

  margin: 0 auto 1.2rem auto; /* centrado y separación */

  border-radius: 50%; /* círculo */

  border: 3px solid #000075; /* borde azul */

  display: flex; /* centra icono */

  align-items: center;

  justify-content: center;

  font-size: 1.5rem; /* tamaño icono */

  color: #000075; /* color azul */
}



/* =========================
   LÍNEA ENTRE ÍCONOS
   ========================= */

/* línea horizontal entre pasos */
.home-how-it-works__line {

  position: absolute; /* posicionamiento libre */

  top: 34px; /* altura centrada */

  right: -45px; /* sale hacia la derecha */

  width: 70px; /* largo de la línea */

  height: 0.2vw; /* grosor */

  background: #000075; /* color azul */
}



/* último paso sin línea */
.home-how-it-works__step:last-child .home-how-it-works__line {

  display: none; /* oculta la línea */
}



/* =========================
   TEXTO PASO
   ========================= */

/* título de cada paso */
.home-how-it-works__step-title {

  font-size: 1.1vw; /* tamaño responsive */

  font-weight: 700; /* negrita */

  color: #090250; /* azul oscuro */

  margin-bottom: 0.9rem; /* separación */
}



/* texto descriptivo */
.home-how-it-works__text {

  font-size: 0.95vw; /* tamaño texto */

  line-height: 1.7; /* espaciado entre líneas */

  color: #000075; /* azul */
}



/* =========================
   RESPONSIVE
   ========================= */

/* pantallas medianas */
@media (max-width: 1400px) {

  .home-how-it-works__wrapper {

    grid-template-columns: 1fr; /* una sola columna */

    width: 100%; /* ancho completo */
  }

  .home-how-it-works__wrapper::after {

    display: none; /* oculta línea central */
  }
}



/* pantallas pequeñas */
@media (max-width: 900px) {

  .home-how-it-works__title {

    font-size: 2rem; /* reduce título */
  }

  .home-how-it-works__steps {

    flex-direction: column; /* pasos en columna */

    gap: 3rem; /* más separación */
  }

  .home-how-it-works__line {

    display: none; /* oculta líneas */
  }

  .home-how-it-works__step-title {

    font-size: 1.2rem; /* ajusta título */
  }

  .home-how-it-works__text {

    font-size: 1rem; /* texto más legible */
  }

  .home-how-it-works__label {

    font-size: 0.9rem; /* botón más pequeño */
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0311668 *//* =========================
   SECCIÓN PRINCIPAL
   ========================= */

/* Contenedor principal de la sección */
.home-seg{

    width:100%; /* ocupa todo el ancho disponible */

    background:#ffffff; /* fondo blanco */

    padding:4vw 2vw; /* espacio interno responsive (arriba/abajo y lados) */

    box-sizing:border-box; /* incluye padding dentro del ancho total */

    font-family:'Roboto',sans-serif; /* fuente de la sección */
}



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

/* Contenedor que organiza imagen y contenido */
.home-seg-container{

    width:100%; /* ocupa todo el ancho */

    display:flex; /* activa flexbox */

    align-items:center; /* centra verticalmente */

    justify-content:space-between; /* separa imagen y contenido */

    gap:4vw; /* espacio entre columnas */
}



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

/* Contenedor de la imagen */
.home-seg-image{

    width:52%; /* ocupa más de la mitad del espacio */

    position:relative; /* base para overlay */

    border-radius:1.2vw; /* bordes redondeados */

    overflow:hidden; /* recorta la imagen */

    flex-shrink:0; /* evita que se reduzca */
}



/* Imagen dentro del contenedor */
.home-seg-image img{

    width:100%; /* ocupa todo el ancho */

    display:block; /* elimina espacios inferiores */

    object-fit:cover; /* recorta sin deformar */
}



/* =========================
   OVERLAY (TEXTO SOBRE IMAGEN)
   ========================= */

/* capa de texto encima de la imagen */
.home-seg-overlay{

    position:absolute; /* se coloca sobre la imagen */

    top:1vw; /* separación superior */

    left:2vw; /* separación izquierda */

    right:2vw; /* separación derecha */
}



/* título dentro del overlay */
.home-seg-overlay h2{

    margin:0; /* elimina margen por defecto */

    color:#ffffff; /* texto blanco */

    font-size:3vw; /* tamaño responsive */

    font-weight:700; /* negrita */

    line-height:1.1; /* altura de línea compacta */

    text-transform:uppercase; /* texto en mayúsculas */
}



/* palabra destacada */
.home-seg-overlay span{

    color:#F3CB4E; /* amarillo destacado */
}



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

/* columna de texto */
.home-seg-content{

    width:48%; /* ocupa casi la mitad */
}



/* párrafos */
.home-seg-content p{

    color:#090250; /* azul oscuro */

    font-size:1.5vw; /* tamaño responsive */

    line-height:1.8; /* espacio entre líneas */

    margin:0 0 2vw 0; /* separación inferior */
}



/* subtítulo principal */
.home-seg-sub{

    font-size:3vw; /* tamaño grande */

    color:#090250; /* azul oscuro */

    margin:0 0 1.5vw 0; /* separación inferior */

    font-weight:700; /* negrita */
}



/* subrayado decorativo del subtítulo */
.home-seg-sub::after{

    content:""; /* línea decorativa */

    display:block; /* lo convierte en bloque */

    width:5vw; /* largo de la línea */

    height:.35vw; /* grosor */

    background:#F3CB4E; /* color amarillo */

    margin-top:.8vw; /* separación del texto */

    border-radius:10vw; /* bordes redondeados */
}



/* =========================
   BOTONES / REDES
   ========================= */

/* contenedor de botones */
.home-seg-social{

    display:flex; /* flexbox */

    gap:1vw; /* separación entre botones */

    flex-wrap:wrap; /* permite salto de línea */
}



/* botón individual */
.home-seg-btn{

    display:flex; /* flex interno */

    align-items:center; /* centra vertical */

    gap:.6vw; /* espacio icono-texto */

    padding:.9vw 1.5vw; /* espacio interno */

    border:.08vw solid #090250; /* borde azul */

    border-radius:10vw; /* forma tipo pill */

    background:#dce5ff; /* fondo azul claro */

    color:#090250; /* texto azul */

    text-decoration:none !important; /* sin subrayado */

    font-size:1vw; /* tamaño texto */

    font-weight:500; /* peso medio */

    transition:.3s; /* animación suave */
}



/* iconos dentro del botón */
.home-seg-btn i{

    font-size:1.1vw; /* tamaño del icono */
}



/* hover del botón */
.home-seg-btn:hover{

    background:#090250; /* cambia a azul oscuro */

    color:#ffffff; /* texto blanco */

    transform:scale(1.05); /* efecto zoom */
}/* End custom CSS */