.elementor-4887 .elementor-element.elementor-element-82d63fa{--display:flex;--min-height:350px;--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;}.elementor-4887 .elementor-element.elementor-element-e0ca83c{--display:flex;--min-height:350px;--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:-2vw;--margin-bottom:0vw;--margin-left:0vw;--margin-right:0vw;}.elementor-4887 .elementor-element.elementor-element-e36a5ae{--display:flex;--min-height:350px;--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;}.elementor-4887 .elementor-element.elementor-element-e36a5ae > .elementor-shape-bottom .elementor-shape-fill, .elementor-4887 .elementor-element.elementor-element-e36a5ae > .e-con-inner > .elementor-shape-bottom .elementor-shape-fill{fill:var( --e-global-color-text );}.elementor-4887 .elementor-element.elementor-element-e36a5ae > .elementor-shape-bottom svg, .elementor-4887 .elementor-element.elementor-element-e36a5ae > .e-con-inner > .elementor-shape-bottom svg{width:calc(100% + 1.3px);height:50px;transform:translateX(-50%) rotateY(180deg);}.elementor-4887 .elementor-element.elementor-element-e36a5ae > .elementor-shape-bottom, .elementor-4887 .elementor-element.elementor-element-e36a5ae > .e-con-inner > .elementor-shape-bottom{z-index:2;pointer-events:none;}.elementor-4887 .elementor-element.elementor-element-938414b{--display:flex;--min-height:350px;--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;}@media(min-width:768px){.elementor-4887 .elementor-element.elementor-element-82d63fa{--width:100%;}.elementor-4887 .elementor-element.elementor-element-e0ca83c{--width:100%;}.elementor-4887 .elementor-element.elementor-element-e36a5ae{--width:100%;}.elementor-4887 .elementor-element.elementor-element-938414b{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-dab6405 *//* =========================
   ESTRUCTURA GENERAL
   ========================= */

.security-banner{

  width:100vw; /* ocupa todo el ancho de la pantalla */

  max-height:31.25vw; /* altura máxima responsive */

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

  overflow:hidden; /* oculta elementos que sobresalgan */

  display:flex; /* activa flexbox */

  margin-left:calc(-50vw + 50%); /* expande el banner a ancho completo */
  margin-right:calc(-50vw + 50%); /* expande el banner a ancho completo */

  isolation:isolate; /* crea un nuevo contexto de apilamiento */

  position:relative; /* referencia para pseudo-elementos */
}



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

.security-content{

  width:50%; /* ocupa la mitad izquierda */

  padding:3.47vw 4.17vw 3.47vw 17vw !important; /* espaciado interno */

  color:black; /* color base */

  display:flex; /* activa flexbox */

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

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

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

  z-index:2; /* coloca el contenido sobre las decoraciones */

  font-family:'Roboto', sans-serif; /* fuente principal */
}



/* =========================
   TITULO
   ========================= */

.security-title{

  color:#FFFFFF; /* color blanco */

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

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

  margin-bottom:1.5vw; /* separación inferior */

  font-weight:800; /* negrita */

  font-family:'Roboto', sans-serif; /* fuente principal */
}



/* =========================
   PALABRA DESTACADA
   ========================= */

.security-highlight{

  color:#F3CB4E; /* amarillo destacado */

  position:relative; /* referencia para la línea decorativa */

  display:inline-block; /* ajusta el ancho al contenido */
}



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

.security-highlight::after{

  content:""; /* crea el elemento decorativo */

  position:absolute; /* posicionamiento relativo al texto */

  left:0; /* inicia desde la izquierda */

  bottom:-0.3vw; /* separación respecto al texto */

  width:100%; /* ocupa todo el ancho de la palabra */

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

  background:#F3CB4E; /* color amarillo */

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



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

.security-text{

  color:#FFFFFF; /* color blanco */

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

  line-height:1.5em; /* altura de línea */

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

  max-width:30vw; /* limita el ancho */

  opacity:0.85; /* ligera transparencia */
}



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

.security-buttons{

  display:flex; /* activa flexbox */

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

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



/* =========================
   BOTONES GENERALES
   ========================= */

.security-button{

  border:none; /* elimina bordes */

  padding:0.8vw 1.6vw; /* espaciado interno */

  border-radius:5vw; /* forma tipo píldora */

  cursor:pointer; /* cursor de clic */

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

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

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

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

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

  font-weight:700; /* negrita */

  gap:0.7vw; /* espacio entre icono y texto */

  transition:0.35s ease; /* transición suave */

  text-decoration:none; /* elimina subrayado */
}



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

.travel-btn{

  background-color:#FFFFFF; /* fondo blanco */

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



/* =========================
   HOVER BOTÓN VIAJAR
   ========================= */

.travel-btn:hover{

  background-color:#CAD6FB; /* fondo azul claro */

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

  transform:translateY(-0.2vw) scale(1.05); /* elevación y zoom */

  box-shadow:0 0 1.5vw rgba(0,0,0,0.18); /* sombra suave */
}



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

.drive-btn{

  background-color:#FFFFFF; /* fondo blanco */

  color:#000075; /* texto azul */

  border:0.12vw solid #FFFFFF; /* borde blanco */
}



/* =========================
   HOVER BOTÓN CONDUCIR
   ========================= */

.drive-btn:hover{

  background-color:#F3CB4E; /* fondo amarillo */

  color:#000075; /* texto azul */

  transform:translateY(-0.2vw) scale(1.05); /* elevación y zoom */

  box-shadow:0 0 1.5vw rgba(0,0,117,0.2); /* sombra azul */
}



/* =========================
   DECORACIONES
   ========================= */

.security-banner::before,
.security-banner::after{

  position:absolute; /* posicionamiento libre */

  font-family:Arial Black; /* fuente gruesa */

  font-weight:900; /* máxima negrita */

  color:#FFFFFF; /* color blanco */

  pointer-events:none; /* no bloquea clics */

  user-select:none; /* evita selección */

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

  opacity:0.08; /* transparencia */
}



/* =========================
   SÍMBOLO SUPERIOR
   ========================= */

.security-banner::before{

  content:"🛡️"; /* icono decorativo */

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

  left:-1vw; /* posición horizontal */

  top:4vw; /* posición vertical */

  transform:rotate(-12deg); /* inclinación */
}



/* =========================
   SÍMBOLOS INFERIORES
   ========================= */

.security-banner::after{

  content:"🛡️🛡️"; /* doble icono */

  font-size:8vw; /* tamaño menor */

  left:15vw; /* posición horizontal */

  bottom:1vw; /* posición vertical */

  transform:rotate(-10deg); /* inclinación */

  letter-spacing:-2vw; /* separación entre iconos */
}



/* =========================
   CONTENEDOR DE IMAGEN
   ========================= */

.security-image{

  width:50%; /* ocupa la mitad derecha */

  position:relative; /* referencia para efectos */

  overflow:hidden; /* recorta la imagen */
}



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

.security-image img{

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

  height:100%; /* ocupa todo el alto */

  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(243,203,78,0.18); /* sombra suave amarilla */

  transition:0.4s ease; /* transición suave */
}



/* =========================
   RESPONSIVE
   ========================= */
   
   
   /* ==========================================
   PANTALLAS GRANDES / DESKTOP XL
   2400pxpx en adelante
   Monitores Full HD, superiores
========================================== */

   
   
   @media (min-width:2400px){

  .security-title{
    font-size:5rem;
  }

  .security-text{
    font-size:2rem;
    max-width:36rem;
    line-height:1.6;
  }

  .security-button{
    font-size:1.5rem;
    padding:1rem 2rem;
    gap:1rem;
  }

  .security-highlight::after{
    height:.35rem;
    bottom:-.4rem;
  }

}
   
   /* ==========================================
   TABLETS Y PORTÁTILES PEQUEÑOS
   881px - 1024px
   iPads, tablets horizontales y laptops compactos
========================================== */

   
  @media (min-width:881px) and (max-width:1024px){

  .security-banner{
    display:flex;
    flex-direction:row;
    max-height:none;
    height:45vh;
    min-height:700px;
    margin-top:0 !important;
    padding-top:0 !important;
    overflow:hidden;
  }

  .security-content{
    width:55%;
    padding:4vw 4vw 4vw 8vw !important;
    text-align:left;
    align-items:flex-start;
    justify-content:center;
  }

  .security-title{
    font-size:4rem;
    line-height:1.05;
    margin-bottom:1.2rem;
  }

  .security-text{
    font-size:1.2rem;
    line-height:1.6;
    max-width:90%;
    margin-bottom:2rem;
  }

  .security-buttons{
    gap:1rem;
  }

  .security-button{
    font-size:1rem;
    padding:1rem 2rem;
  }

  .security-image{
    width:45%;
    height:100%;
    overflow:hidden;
  }

  .security-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
    border:none !important;
    box-shadow:none !important;
    border-radius:25% 0 0 0 / 100px 0 0 0 !important;
  }

  .security-banner::before,
  .security-banner::after{
    font-size:18vw;
    opacity:.05;
  }

  .security-highlight::after{
    height:.3rem;
  }
}


/* ==========================================
   MÓVILES Y TABLETS PEQUEÑAS
   880px abajo
   Smartphones en vertical y horizontal
========================================== */


@media (max-width:880px){

  .security-banner{
    display:flex;
    flex-direction:column;
    max-height:none;
    height:auto;
    margin-top:-20px !important;
    padding-top:0 !important;
    overflow:visible;
  }

  .security-image{
    width:100%;
    height:40vh;
    min-height:320px;
    max-height:450px;
    order:1;
    overflow:hidden;
    margin:0;
    padding:0;
  }

  .security-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
    margin:0;
    padding:0;
    border:none !important;
    box-shadow:none !important;
    border-radius:0 0 50% 50% / 0 0 40px 40px !important;
  }

  .security-content{
    width:100%;
    order:2;
    padding:0 6% 2rem 6% !important;
    text-align:center;
    align-items:center;
    margin-top:.5rem;
  }

  .security-title{
    font-size:3.3rem;
    line-height:1.05;
    margin-bottom:1rem;
  }

  .security-text{
    font-size:1.1rem;
    line-height:1.6;
    max-width:600px;
    margin-bottom:1.8rem;
  }

  .security-buttons{
    justify-content:center;
    gap:1rem;
  }

  .security-button{
    font-size:1rem;
    padding:.95rem 1.8rem;
  }

  .security-banner::before,
  .security-banner::after{
    font-size:25vw;
    opacity:.05;
  }

  .security-highlight::after{
    height:.3rem;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-baa77a8 *//* =========================
   SECCIÓN PRINCIPAL
   ========================= */

.security-steps-section{

  width:100vw; /* ocupa todo el ancho de la pantalla */

  background:#ffffff; /* fondo blanco */

  padding:5vw 4vw; /* espaciado interno superior/inferior y laterales */

  margin-left:calc(-50vw + 50%); /* expande la sección a ancho completo */
  margin-right:calc(-50vw + 50%); /* expande la sección a ancho completo */

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

  overflow:hidden; /* oculta elementos que sobresalgan */
}



/* =========================
   EFECTO DE FONDO
   ========================= */

.security-steps-section::before{

  content:"? ? ?"; /* símbolos decorativos */

  position:absolute; /* posicionamiento libre */

  top:5%; /* separación desde arriba */

  left:3%; /* separación desde la izquierda */

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

  font-weight:800; /* negrita */

  color:#F5F5F5; /* gris muy claro */

  letter-spacing:4vw; /* separación entre símbolos */

  transform:rotate(-12deg); /* inclinación decorativa */

  pointer-events:none; /* no bloquea clics */
}



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

.security-steps-title{

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

  color:#090250; /* azul oscuro */

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

  font-weight:800; /* negrita */

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

  position:relative; /* referencia para decoraciones */

  display:inline-block; /* ajusta ancho al contenido */

  left:50%; /* posiciona al centro */

  transform:translateX(-50%); /* corrige centrado */

  font-family:'Roboto', sans-serif; /* fuente principal */
}



/* =========================
   PALABRA DESTACADA
   ========================= */

.security-steps-title span{

  color:#F3CB4E; /* color amarillo */

  position:relative; /* referencia para la línea decorativa */
}



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

.security-steps-title span::after{

  content:""; /* crea el elemento decorativo */

  position:absolute; /* posicionamiento relativo al texto */

  left:0; /* inicia desde la izquierda */

  bottom:-0.4vw; /* separación respecto al texto */

  width:100%; /* ocupa todo el ancho de la palabra */

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

  background:#F3CB4E; /* color amarillo */

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



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

.security-steps-container{

  display:flex; /* activa flexbox */

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

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

  gap:1.2vw; /* separación entre tarjetas */

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

  position:relative; /* referencia para capas */

  z-index:2; /* coloca encima de decoraciones */
}



/* =========================
   TARJETAS
   ========================= */

.security-step-card{

  width:18vw; /* ancho de la tarjeta */

  min-height:19vw; /* altura mínima */

  background:
    linear-gradient(
      180deg,
      #000075 0%, /* azul principal */
      #090250 100% /* azul oscuro */
    );

  border:0.08vw solid rgba(255,255,255,0.12); /* borde sutil */

  border-radius:1.5vw; /* esquinas redondeadas */

  padding:2vw 1.6vw; /* espaciado interno */

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

  transition:0.35s ease; /* transición suave */

  display:flex; /* activa flexbox */

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

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

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

  overflow:hidden; /* oculta contenido sobrante */

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

  font-family:'Roboto', sans-serif; /* fuente principal */
}



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

.security-step-card:hover{

  transform:translateY(-0.5vw); /* eleva la tarjeta */

  border-color:rgba(243,203,78,0.35); /* borde amarillo suave */

  box-shadow:
    0 1vw 2.5vw rgba(0,0,0,0.25); /* sombra más intensa */
}



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

.security-step-number{

  position:absolute; /* posicionamiento libre */

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

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

  width:2.3vw; /* ancho */

  height:2.3vw; /* alto */

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

  background:#F3CB4E; /* fondo amarillo */

  color:#000075; /* texto azul */

  display:flex; /* activa flexbox */

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

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

  font-size:1vw; /* tamaño del número */

  font-weight:700; /* negrita */

  box-shadow:
    0 0 1vw rgba(243,203,78,0.25); /* brillo suave */
}



/* =========================
   ICONO
   ========================= */

.security-step-icon{

  width:5vw; /* ancho */

  height:5vw; /* alto */

  border-radius:1.2vw; /* esquinas redondeadas */

  border:0.1vw solid rgba(255,255,255,0.12); /* borde sutil */

  display:flex; /* activa flexbox */

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

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

  margin-bottom:1.6vw; /* separación inferior */

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

  color:#000075; /* color del icono */

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

  background:#F3CB4E; /* fondo amarillo */
}



/* =========================
   TÍTULOS DE TARJETA
   ========================= */

.security-step-card h3{

  color:#ffffff; /* texto blanco */

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

  font-weight:700; /* negrita */

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

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

  font-family:'Roboto', sans-serif; /* fuente principal */
}



/* =========================
   TEXTO DE TARJETA
   ========================= */

.security-step-card p{

  color:#ffffff; /* texto blanco */

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

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

  opacity:0.9; /* ligera transparencia */
}



/* =========================
   FLECHAS
   ========================= */

.security-arrow{

  color:#000075; /* azul oscuro */

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

  opacity:0.9; /* ligera transparencia */
}



/* =========================
   RESPONSIVE
   ========================= */
   
   
   /* ==========================================
   PANTALLAS GRANDES / DESKTOP XL
   2400pxpx en adelante
   Monitores Full HD, superiores
========================================== */

   
   @media (min-width:2400px){

    .security-steps-title{
        font-size:3.5rem;
    }

    .security-steps-title span::after{
        height:.4rem;
        bottom:-0.4rem;
    }

    .security-step-card{
        padding:2.5rem 2rem;
    }

    .security-step-number{
        width:55px;
        height:55px;
        font-size:1.4rem;
        top:1.5rem;
        left:1.5rem;
    }

    .security-step-icon{
        width:110px;
        height:110px;
        font-size:3rem;
        border-radius:1.2rem;
        margin-bottom:1.5rem;
    }

    .security-step-card h3{
        font-size:1.8rem;
        margin-bottom:1rem;
    }

    .security-step-card p{
        font-size:1.3rem;
        line-height:1.8;
    }

    .security-arrow{
        font-size:2.5rem;
    }

}




/* ==========================================
   TABLETS Y PORTÁTILES PEQUEÑOS
   881px - 1024px
   iPads, tablets horizontales y laptops compactos
========================================== */

   
   
   
@media (max-width: 1024px) and (min-width: 881px) {

  .security-steps-section{
    padding: 6vw 10%;
  }

  .security-steps-title{
    font-size: 2rem;
  }

  .security-steps-title span::after{
    height: .25rem;
    bottom: -6px;
  }

  .security-steps-container{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5vw;
  }

  /* TARJETAS */
  .security-step-card{
    width: 20%;
    max-width: 150px;
    height: 240px; /* misma altura para todas */

    padding: 1.5vw 1.2vw;
    border-radius: 1.2vw;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
  }

  /* NÚMERO */
  .security-step-number{
    width: 26px;
    height: 26px;
    font-size: 0.625rem;
    top: .5rem;
    left: .5rem;
  }

  /* ICONO */
  .security-step-icon{
    width: 40px;
    height: 40px;
    font-size: 1rem;
    margin: 6px 0;
    border-radius: 10px;
  }

  /* TÍTULO */
  .security-step-card h3{
    font-size: 1rem;
    margin-bottom: 4px;
    line-height: 1.1;
  }

  /* TEXTO */
  .security-step-card p{
    font-size: 0.85rem;
    line-height: 1.5;
  }

  /* FLECHAS */
  .security-arrow{
    font-size: 0.875rem;
    opacity: 0.5;
  }

}


/* ==========================================
   MÓVILES Y TABLETS PEQUEÑAS
   880px abajo
   Smartphones en vertical y horizontal
========================================== */




@media (max-width: 880px) {

  .security-steps-section{
    padding: 70px 35px;
  }

  .security-steps-title{
    font-size: 2rem;
    margin-bottom: 20px;
  }

  .security-steps-title span::after{
    height: .25rem;
    bottom: -6px;
  }

  .security-steps-container{
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .security-step-card{
    width: 100%;
    min-height: auto;
    padding: 30px 20px;
    border-radius: 20px;
  }

  .security-arrow{
    transform: rotate(90deg);
    font-size: 1.75rem;
  }

  .security-step-icon{
    width: 70px;
    height: 70px;
    font-size: 1.875rem;
    margin-bottom: 20px;
    border-radius: 20px;
  }

  .security-step-card h3{
    font-size: 1rem;
    margin-bottom: 12px;
  }

  .security-step-card p{
    font-size: 0.85rem;
    line-height: 1.6;
  }

  .security-step-number{
    width: 36px;
    height: 36px;
    font-size: 1rem;
    top: 1rem;
    left: 1rem;
  }

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

.comparativo-section{

    width:100vw; /* ocupa todo el ancho de la pantalla */

    background:#FFFFFF; /* fondo blanco */

    padding:5vw; /* espaciado interno */

    margin-left:calc(-50vw + 50%); /* expande la sección a ancho completo */
    margin-right:calc(-50vw + 50%); /* expande la sección a ancho completo */

    overflow:hidden; /* oculta elementos que sobresalgan */
}


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

.comparativo-title{

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

    color:#090250; /* azul oscuro */

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

    font-weight:800; /* negrita */

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

    font-family:'Roboto',sans-serif; /* fuente principal */
}


/* ====================================
   PALABRA DESTACADA
==================================== */

.comparativo-palabra-destacada{

    color:#F3CB4E; /* color amarillo */

    position:relative; /* referencia para la línea */

    display:inline-block; /* ajusta el ancho al contenido */
}


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

.comparativo-palabra-destacada::after{

    content:""; /* crea el elemento decorativo */

    position:absolute; /* posicionamiento relativo al texto */

    left:0; /* inicia desde la izquierda */

    bottom:-0.25vw; /* separación respecto al texto */

    width:100%; /* ocupa todo el ancho de la palabra */

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

    background:#F3CB4E; /* color amarillo */

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


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

.comparativo-wrapper{

    display:flex; /* activa flexbox */

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

    gap:2vw; /* separación entre columnas */

    padding-left:5%; /* espacio lateral izquierdo */

    padding-right:5%; /* espacio lateral derecho */

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


/* ====================================
   PANEL IZQUIERDO
==================================== */

.comparativo-info{

    width:35%; /* ocupa el 35% del espacio */

    background:#FFFFFF; /* fondo blanco */

    border-radius:1.5vw; /* esquinas redondeadas */

    padding:2vw; /* espaciado interno */

    box-shadow:
    0 0.6vw 2vw rgba(0,0,0,0.06); /* sombra suave */

    display:flex; /* activa flexbox */

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

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

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

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


/* ====================================
   IMAGEN PANEL IZQUIERDO
==================================== */

.comparativo-info img{

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

    max-width:14vw; /* ancho máximo */

    height:auto; /* mantiene proporción */

    margin-bottom:1.5vw; /* separación inferior */

    transform:scale(1.6); /* aumenta el tamaño visual */
}


/* ====================================
   SUBTÍTULO
==================================== */

.comparativo-subtitulo{

    color:#000075; /* azul principal */

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

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

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

    font-family:'Roboto',sans-serif; /* fuente principal */
}


/* ====================================
   PALABRA DESTACADA DEL SUBTÍTULO
==================================== */

.comparativo-tranquilidad{

    color:#F3CB4E; /* amarillo */

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


/* ====================================
   TEXTO PANEL IZQUIERDO
==================================== */

.comparativo-info p{

    color:#090250; /* azul oscuro */

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

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

    font-family:'Roboto',sans-serif; /* fuente principal */
}


/* ====================================
   TABLA
==================================== */

.comparativo-table{

    width:65%; /* ocupa el 65% del espacio */

    background:#FFFFFF; /* fondo blanco */

    border-radius:1.5vw; /* esquinas redondeadas */

    overflow:hidden; /* oculta contenido sobrante */

    border:0.08vw solid rgba(0,0,0,0.08); /* borde suave */

    box-shadow:
    0 0.6vw 2vw rgba(0,0,0,0.06); /* sombra suave */

    display:flex; /* activa flexbox */

    flex-direction:column; /* organiza filas verticalmente */
}


/* ====================================
   HEADER Y FILAS
==================================== */

.comparativo-header,
.comparativo-fila{

    display:flex; /* activa flexbox */

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


/* ====================================
   CABECERA DE LA TABLA
==================================== */

.comparativo-header{

    background:#000075; /* fondo azul */

    color:#FFFFFF; /* texto blanco */

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


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

.comparativo-col{

    padding:1vw; /* espaciado interno */

    display:flex; /* activa flexbox */

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

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

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

    border-right:0.08vw solid rgba(255,255,255,0.08); /* borde derecho */

    border-bottom:0.08vw solid rgba(0,0,0,0.08); /* borde inferior */

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

    font-family:'Roboto',sans-serif; /* fuente principal */

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


/* ====================================
   COLUMNA FUNCIÓN EN FILAS
==================================== */

.comparativo-fila .funcion{

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


/* ====================================
   COLUMNA FUNCIÓN
==================================== */

.funcion{

    width:45%; /* ocupa el 45% */

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

    text-align:left; /* texto alineado a la izquierda */
}


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

.comparativo-header .comparativo-col:not(.funcion),
.comparativo-fila .comparativo-col:not(.funcion){

    width:27.5%; /* reparte el espacio restante */
}


/* ====================================
   ÚLTIMA COLUMNA
==================================== */

.comparativo-col:last-child{

    border-right:none; /* elimina borde derecho */
}


/* ====================================
   ICONOS DEL HEADER
==================================== */

.comparativo-header i{

    margin-right:0.5vw; /* separación respecto al texto */
}


/* ====================================
   ICONOS CHECK
==================================== */

.check-icon{

    color:#16A34A !important; /* verde */

    font-size:1.6vw !important; /* tamaño del icono */
}


/* ====================================
   ICONOS CROSS
==================================== */

.cross-icon{

    color:#DC2626 !important; /* rojo */

    font-size:1.6vw !important; /* tamaño del icono */
}


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



/* ==========================================
   PANTALLAS GRANDES / DESKTOP XL
   2400pxpx en adelante
   Monitores Full HD, superiores
========================================== */



@media (min-width:2400px){

    .comparativo-title{
        font-size:5rem;
        margin-bottom:4rem;
    }

    .comparativo-palabra-destacada::after{
        height:.4rem;
        bottom:-.5rem;
    }

    .comparativo-wrapper{
        gap:3rem;
    }

    .comparativo-info{
        padding:3rem;
        border-radius:2rem;
    }

    .comparativo-info img{
        max-width:420px;
        margin-bottom:2rem;
    }

    .comparativo-subtitulo{
        font-size:3rem;
        margin-bottom:1.5rem;
    }

    .comparativo-info p{
        font-size:1.4rem;
        line-height:1.8;
    }

    .comparativo-table{
        border-radius:2rem;
    }

    .comparativo-col{
        padding:1.5rem;
        font-size:1.3rem;
    }

    .check-icon,
    .cross-icon{
        font-size:2rem !important;
    }

    .comparativo-header i{
        margin-right:.75rem;
    }
}





/* ==========================================
   TABLETS Y PORTÁTILES PEQUEÑOS
   881px - 1024px
   iPads, tablets horizontales y laptops compactos
========================================== */




@media (max-width:1024px) and (min-width:881px){

    .comparativo-section{
        display:grid;
        grid-template-columns:40% 60%;
        grid-template-areas:
        "titulo imagen"
        "tabla tabla";
        align-items:center;
        padding:10%;
    }

    /* TÍTULO */
    .comparativo-title{
        grid-area:titulo;
        font-size:2.5rem;
        line-height:1.1;
        margin:0;
        text-align:left;
        align-self:center;
    }

    .comparativo-palabra-destacada::after{
        height:.25rem;
        bottom:-.5rem;
    }

    /* IMAGEN */
    .comparativo-info{
        grid-area:imagen;
        width:100%;
        max-width:300px;
        justify-self:center;
        padding:1.5rem;
    }

    .comparativo-info img{
        max-width:180px;
        margin-bottom:1rem;
        transform:none;
    }

    .comparativo-subtitulo{
        font-size:1.5rem;
    }

    .comparativo-info p{
        font-size:.9rem;
        line-height:1.6;
    }

    /* TABLA */
    .comparativo-table{
        grid-area:tabla;
        width:100%;
        margin-top:2rem;
    }

    .comparativo-col{
        padding:.9rem;
        font-size:.85rem;
    }

    .check-icon,
    .cross-icon{
        font-size:1.2rem !important;
    }

    /* El wrapper deja de intervenir */
    .comparativo-wrapper{
        display:contents;
    }

}



/* ==========================================
   MÓVILES Y TABLETS PEQUEÑAS
   880px abajo
   Smartphones en vertical y horizontal
========================================== */



@media (max-width:880px){

    .comparativo-title{
        font-size:2rem;          /* Título principal */
        margin-bottom:2rem;
    }

    .comparativo-palabra-destacada::after{
        height:.3rem;
        bottom:-.5rem;
    }

    .comparativo-wrapper{
        display:flex;
        flex-direction:column;
        gap:2rem;
        padding:0;
    }

    .comparativo-info{
        width:85%;
        margin:0 auto;
        padding:2rem 1.5rem;
    }

    .comparativo-info img{
        width:70%;
        max-width:220px;
        transform:none;
        margin-bottom:1.5rem;
    }

    .comparativo-subtitulo{
        font-size:1.5rem;        /* Subtítulos */
    }

    .comparativo-info p{
        font-size:1.2rem;        /* Párrafos */
        line-height:1.6;
    }

    .comparativo-table{
        width:90%;
        overflow-x:auto;
        margin:0 auto;
    }

    .comparativo-col{
        padding:1rem .8rem;
        font-size:.8rem;
    }

    .check-icon,
    .cross-icon{
        font-size:1.4rem !important;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8f92509 *//* =========================
   BANNER COVID
   ========================= */

.covid-banner{

  width:88%; /* ancho del banner */

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

  border:0.12vw solid rgba(108,77,255,0.18); /* borde suave */

  border-radius:1.5vw; /* esquinas redondeadas */

  padding:1.6vw 2vw; /* espaciado interno */

  margin:0vw 0vw 0vw 6vw; /* margen exterior */

  display:flex; /* activa flexbox */

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

  justify-content:space-between; /* distribuye los elementos */

  gap:2vw; /* separación entre elementos */

  overflow:hidden; /* oculta elementos que sobresalgan */

  position:relative; /* referencia para pseudo-elementos */

  box-shadow:0 0.5vw 2vw rgba(9,2,80,0.08); /* sombra suave */

  font-family:'Roboto', sans-serif; /* fuente principal */
}



/* =========================
   EFECTO DE FONDO
   ========================= */

.covid-banner::before{

  content:""; /* crea elemento decorativo */

  position:absolute; /* posicionamiento libre */

  width:20vw; /* ancho del efecto */

  height:20vw; /* alto del efecto */

  background:
    radial-gradient(
      circle,
      rgba(108,77,255,0.08),
      transparent 70%
    ); /* degradado circular */

  left:-8vw; /* desplazamiento horizontal */

  top:-8vw; /* desplazamiento vertical */
}



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

.covid-image{

  width:8vw; /* ancho */

  height:8vw; /* alto */

  min-width:8vw; /* evita que se reduzca */

  border-radius:1.5vw; /* esquinas redondeadas */

  overflow:hidden; /* recorta la imagen */

  position:relative; /* referencia para capas */

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



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

.covid-image img{

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

  height:100%; /* ocupa todo el alto */

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

  display:block; /* elimina espacios */
}



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

.covid-content{

  flex:1; /* ocupa el espacio disponible */

  position:relative; /* referencia para capas */

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



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

.covid-title{

  color:#000000; /* color negro */

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

  font-weight:800; /* negrita */

  margin-bottom:0.8vw; /* separación inferior */

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

  font-family:'Roboto', sans-serif; /* fuente principal */
}



/* =========================
   PALABRA DESTACADA
   ========================= */

.covid-title span{

  color:#000075; /* azul principal */

  position:relative; /* referencia para la línea */
}



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

.covid-title span::after{

  content:""; /* crea el elemento decorativo */

  position:absolute; /* posicionamiento relativo al texto */

  left:0; /* inicia desde la izquierda */

  bottom:-0.25vw; /* separación respecto al texto */

  width:100%; /* ocupa todo el ancho de la palabra */

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

  background:#000075; /* color azul */

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



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

.covid-text{

  color:#000000; /* color negro */

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

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

  max-width:42vw; /* ancho máximo */
}



/* =========================
   CONTENEDOR DEL BOTÓN
   ========================= */

.covid-button-container{

  position:relative; /* referencia para capas */

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



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

.covid-button{

  padding:1.1vw 2vw; /* espaciado interno */

  border-radius:1vw; /* esquinas redondeadas */

  border:0.12vw solid #000075; /* borde azul */

  background:transparent; /* fondo transparente */

  color:#000075; /* texto azul */

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

  font-weight:700; /* negrita */

  display:flex; /* activa flexbox */

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

  gap:1vw; /* separación interna */

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

  transition:0.35s ease; /* transición suave */
}



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

.covid-button:hover{

  background:#000075; /* fondo azul */

  color:white; /* texto blanco */

  transform:translateY(-0.2vw); /* eleva ligeramente */

  box-shadow:0 0.8vw 2vw rgba(108,77,255,0.2); /* sombra */
}



/* =========================
   RESPONSIVE
   ========================= */
   
   
   /* ==========================================
   PANTALLAS GRANDES / DESKTOP XL
   2400pxpx en adelante
   Monitores Full HD, superiores
========================================== */

   
   
   @media (min-width:2400px){

  /* banner */
  .covid-banner{

    max-width:2200px;

    margin:0 auto;

    padding:2.5rem 3rem;

    gap:3rem;

    border-radius:2rem;
  }

  /* imagen */
  .covid-image{

    width:12rem;

    height:12rem;

    min-width:12rem;

    border-radius:2rem;
  }

  /* título */
  .covid-title{

    font-size:3.5rem;
  }

  /* línea decorativa */
  .covid-title span::after{

    height:.35rem;

    bottom:-.4rem;
  }

  /* texto */
  .covid-text{

    font-size:1.3rem;

    max-width:55rem;

    line-height:1.6;
  }

  /* botón */
  .covid-button{

    padding:1.2rem 2rem;

    font-size:1.5rem;

    border-radius:1rem;

    gap:1rem;
  }

}




/* ==========================================
   TABLETS Y PORTÁTILES PEQUEÑOS
   881px - 1024px
   iPads, tablets horizontales y laptops compactos
========================================== */



@media (min-width:881px) and (max-width:1024px){

  /* banner */
  .covid-banner{

    width:92%;

    margin:0 auto;

    padding:2rem;

    gap:1.5rem;

    border-radius:2rem;
  }

  /* imagen */
  .covid-image{

    width:8rem;

    height:8rem;

    min-width:8rem;

    border-radius:1.5rem;
  }

  /* título */
  .covid-title{

    font-size:1.2rem;

    margin-bottom:1rem;
  }

  /* línea decorativa */
  .covid-title span::after{

    height:.25rem;

    bottom:-.35rem;
  }

  /* texto */
  .covid-text{

    font-size:1rem;

    max-width:100%;

    line-height:1.6;
  }

  /* botón */
  .covid-button{

    padding:1rem 1.5rem;

    font-size:1rem;

    border-radius:1rem;

    gap:.8rem;
  }

}



/* ==========================================
   MÓVILES Y TABLETS PEQUEÑAS
   880px abajo
   Smartphones en vertical y horizontal
========================================== */





@media (max-width:880px){

  /* banner */
  .covid-banner{

    width:92%;

    margin:0 auto;

    flex-direction:column;

    text-align:center;

    padding:2rem 1.5rem;

    gap:1.5rem;

    border-radius:1.8rem;
  }

  /* imagen */
  .covid-image{

    width:9rem;

    height:9rem;

    min-width:9rem;

    border-radius:1.5rem;
  }

  /* título */
  .covid-title{

    font-size:2rem;

    margin-bottom:1rem;
  }

  /* línea decorativa */
  .covid-title span::after{

    height:.25rem;

    bottom:-.3rem;
  }

  /* texto */
  .covid-text{

    font-size:1rem;

    max-width:100%;

    line-height:1.6;
  }

  /* botón */
  .covid-button{

    width:100%;

    justify-content:center;

    padding:1rem 1.2rem;

    font-size:1rem;

    border-radius:1rem;

    gap:.8rem;
  }

}/* End custom CSS */