/* Reset básico */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Float Elements
---------------------------------*/
.fl-lt {float:left;}
.fl-rt {float:right;}
header_outer
/* Clear Floated Elements
---------------------------------*/
.clear {
  clear: both;
  display: block;
  overflow: auto;
  visibility: hidden;
  width: 0;
  height: 0;
}
/* display: none;
}
---*/

.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: auto;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:after {
  clear: both;
}

#imgl {
position: absolute;
margin-left: 10px;
margin-top: -10px;
}
ul{ list-style:none;}

ul{ margin-bottom: 0px;}

.figure{ margin:0px;}

img{ max-width:100%;}

a, a:hover, a:active{ outline:0px !important}


@font-face {
  font-family: 'GeosansLight';
  src: url('../fonts/2/GeosansLight.ttf');
}

@font-face {
  font-family: 'GeosansLight-Oblique';
  src: url('../fonts/2/GeosansLight-Oblique.ttf');
}

@font-face {
  font-family: 'Raleway-Bold';
  src: url('../fonts/1/Raleway-Bold.ttf');
}
@font-face {
font-family: 'Raleway-ExtraBold';
src: url('../fonts/1/Raleway-ExtraBold.ttf');
}
@font-face {
font-family: 'Raleway-ExtraLight';
src: url('../fonts/1/Raleway-ExtraLight.ttf');
}
@font-face {
font-family: 'Raleway-Heavy';
src: url('../fonts/1/Raleway-Heavy.ttf');
}
@font-face {
font-family: 'Raleway-Light';
src: url('../fonts/1/Raleway-Light.ttf');
}
@font-face {
font-family: 'Raleway-Medium';
src: url('../fonts/1/Raleway-Medium.ttf');
}
@font-face {
font-family: 'Raleway-Regular';
src: url('../fonts/1/Raleway-Regular.ttf');
}
@font-face {
font-family: 'Raleway-SemiBold';
src: url('../fonts/1/Raleway-SemiBold.ttf');
}
@font-face {
font-family: 'Raleway-Thin';
src: url('../fonts/1/Raleway-Thin.ttf');
}

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'LatoRegular';
    src: url('../fonts/lato-regular.eot');
    src: url('../fonts/lato-regular.eot') format('embedded-opentype'),
         url('../fonts/lato-regular.woff2') format('woff2'),
         url('../fonts/lato-regular.woff') format('woff'),
         url('../fonts/lato-regular.ttf') format('truetype'),
         url('../fonts/lato-regular.svg#LatoRegular') format('svg');
}
@font-face {
    font-family: 'LatoBoldBold';
    src: url('../fonts/lato-bold.eot');
    src: url('../fonts/lato-bold.eot') format('embedded-opentype'),
         url('../fonts/lato-bold.woff2') format('woff2'),
         url('../fonts/lato-bold.woff') format('woff'),
         url('../fonts/lato-bold.ttf') format('truetype'),
         url('../fonts/lato-bold.svg#LatoBoldBold') format('svg');
}
@font-face {
    font-family: 'DosisBold';
    src: url('../fonts/dosis-bold.eot');
    src: url('../fonts/dosis-bold.eot') format('embedded-opentype'),
         url('../fonts/dosis-bold.woff2') format('woff2'),
         url('../fonts/dosis-bold.woff') format('woff'),
         url('../fonts/dosis-bold.ttf') format('truetype'),
         url('../fonts/dosis-bold.svg#DosisBold') format('svg');
}

body {
    font-family: 'Lato', sans-serif;
    background-color: #2783CC;;
    color: #333;
    line-height: 1.5;
    overflow-x: hidden;
    /* Evitar scroll horizontal por desbordes */
}

/* Contenedor general */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.header {
    background-color: #2783CC;
    /* Color azul solicitado */
    color: #fff;
    /* Texto blanco */
    padding: 10px 0;
    border-bottom: none;
}

.header__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.header__nav-left ul,
.header__nav-right ul {
    list-style: none;
    display: flex;
    gap: 15px;
}

.linea_r {
    background-color: #FF0000;
    height: 5px;
    position: relative;
    width: 100%;
}

.nav-list li a {
    text-decoration: none;
    color: #007bff;
    /* Se mantiene azul para botones */
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.nav-list li a:hover {
    background-color: #007bff;
    color: #fff;
}

/* Botones header con fondo blanco y texto azul para contraste */
.btn_login {
    margin: 5px;
    text-align: center;
    padding: 2px;
    font-weight: 600;
    font-size: 30px;
    color: #ffffff;
    background-color: #0d3045;
    border-radius: 12px;
    border: 2px solid #0d3045;

  }

.btn--signup {
    background-color: #fff;
    color: #2783CC;
    font-weight: 700;
    border-radius: 4px;
    padding: 6px 12px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn--login:hover,
.btn--signup:hover {
    background-color: #1f639f;
    /* Azul más oscuro */
    color: #fff;
}

#text1 {
	font-size:30px;
	color:#fff;
	font-family:'GeosansLight';
	/*font-weight:700;*/
	text-align:center;
}


#text2 {
	font-size:30px;
	color:#fff;
	font-family:'Raleway-Bold';
	/*font-weight:700;*/
	text-align:center;
	text-transform:uppercase;
}

#text3 {
	font-size:14px;
	color:#fff;
	font-family:'Raleway-Bold';
	/*font-weight:700;*/
	text-align:center;
	text-transform:uppercase;
}

.btn_singup {
    margin: 5px;
    text-decoration: none;
    padding: 5px;
    font-weight: 600;
    color: #ffffff;
    font-size: 15px;
  }

  
.navnew {
	width: 100%;
	display:inline-block;
	margin: 0px;
	padding: 0px;
}

#nav-left{
    float: left;
	height: auto;
	}

#nav-left ul li{
	text-decoration: none;
	display:inline-block;
	margin:0 5px;
	}
#nav-right {
	float: right;
	height: auto;
	}

 #nav-right ul li{
   text-decoration: none;
   display:inline-block;
	margin:0 5px;
	}


      .bcolor {
  	border-radius: 4px;
    background-color: #051C4A;
  }

  .bcolor:hover {
  	border-radius: 4px;
    background-color: #2783CC;
  }


.btn_singup:hover {
color: #0d3045;
}


/* Header principal */
.header__main {
    display: flex;
    justify-content: space-between;
    /* Mantener separación entre logo, slogan y redes */
    align-items: center;
    /* Alinear verticalmente */
    flex-wrap: nowrap;
    /* Evitar que se rompa en PC */
    gap: 15px;
    padding: 0 15px;
}

/* Logo */
.header__logo img {
    max-height: 88px;
    width: auto;
}

/* Slogan: texto blanco, centrado y evitar desbordes */
/* Slogan: en PC más grande, centrado y con flex fijo para que no se comprima */
.header__slogan {
    font-size: 2.5rem;
    /* Más grande que antes */
    font-weight: 700;
    color: #fff;
    flex: 1 1 auto;
    /* Que tome el espacio disponible */
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    margin: 0 20px;
    /* Margen horizontal para separar del logo y redes */
}

/* Redes sociales: alineadas a la derecha, sin flex 1 1 100% para que no ocupe toda la fila */
.header__social {
    flex: 0 0 auto;
    /* Tamaño fijo según contenido */
}
.header__social ul {
    list-style: none;
    display: flex;
    gap: 15px;
    padding: 0;
    margin: 0;
    justify-content: flex-end;
    /* Alinea a la derecha */
}

.header__social ul li a {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

.header__social ul li a img {
    width: 20px;
    height: 20px;
}
/*top-content*/

.top-content {
  position: relative;
  background-image: url('../img/Home/Background.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 40px 20px 80px;
  color: #fff;
  z-index: 1;
  text-align: center;
}

#selectt {
    color: #fff;
    font-size: 25px;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    max-width: 70%;
    min-height: 40px;
    border-radius: 8px;
}
#select1 {
    display: flex;
    align-items: center;
    /* ya centra verticalmente */
    justify-content: flex-start;
    background-color: #0067B6;
    color: #fff;
    font-size: 20px;
    margin: 0 auto;
    max-width: 80%;
    height: 50px;
    border-radius: 8px;
    padding: 0 20px;
    box-sizing: border-box;
    gap: 15px;
    overflow: visible;
    white-space: nowrap;
    position: relative;
}

/* Ajusta un poco la posición vertical de la imagen del mundo */
#selecti {
    flex: 0 0 auto;
    position: relative;
    z-index: 10;
    margin-left: -30px;
    top: 3px;
    /* baja un poco la imagen para que quede más centrada verticalmente */
}

#selecti img {
    width: 90px;
    height: auto;
    display: block;
    position: relative;
    top: 0;
    /* ya no sobresale hacia arriba */
}

/* Ajusta la posición vertical de la lista de países para subirla un poco */
nav.nav7 {
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* centra verticalmente los países */
    margin-top: -20px;
    /* sube un poco la lista para alinearla mejor */
}

nav.nav7 ul {
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
}

nav.nav7 ul li {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    max-width: 120px;
    overflow: hidden;
}

nav.nav7 ul li a {
    color: #fff;
    font-weight: 600;
    font-size: 1.2rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
}

nav.nav7 ul li img {
    width: 28px;
    height: 18px;
    object-fit: contain;
}


/* Capa semitransparente para mejorar legibilidad */
.top-content::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 0;
}

/* Asegurar que el contenido esté por encima */
.top-content > * {
  position: relative;
  z-index: 1;
}

.top-content__title {
  font-family: 'Dosis', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 10px;
  color: #fff; /* texto blanco */
  text-align: center;
}

/* Países */
.countries {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Centra horizontalmente */
    gap: 30px;
    margin-bottom: 40px;
    padding: 0;
}

.country {
    background: #f0f0f0;
    border-radius: 8px;
    padding: 10px 15px;
    width: 140px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

.country a {
    text-decoration: none;
    color: #007bff;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.country a:hover {
    background-color: #e6f0ff;
    border-radius: 8px;
}

.country__flag {
    width: 48px;
    height: auto;
    object-fit: contain;
}

.country__name {
    font-size: 1rem;
}

.countries-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 10px;
    padding: 0;
    width: 100%; /* Asegura que ocupe todo el ancho del contenedor */
    box-sizing: border-box;
}

.countries-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    flex: 0 0 auto; /* Evita que los items se estiren */
}

.countries-list li:first-child {
    margin-left: 0; /* Elimina margen izquierdo extra si existiera */
}


/* Enlaces dentro de li */
.countries-list li a {
    text-decoration: none;
    color: #ffffff;
    font-weight: 600;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Imagen de bandera */
.countries-list li img {
    width: 32px;
    height: 20px;
    object-fit: contain;
}

/* Pasos */
.steps {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.step {
  
    padding: 15px;
    border-radius: 8px;
    width: 180px;
    text-align: center;
    
}

.step__number {
    font-size: 2rem;
    font-weight: 900;
    color: #007bff;
    margin-bottom: 10px;
}

.step__image {
    width: 80px;
    height: auto;
    margin-bottom: 10px;
}

.step__text {
    font-weight: 700;
    font-size: 1rem;
    color: #333;
}

/* Texto final pasos */
.steps__footer {
    font-weight: 700;
    font-size: 1.3rem;
    color: #222;
    margin-bottom: 40px;
}

#logoe {
text-align: center;
margin-top: -102px;
margin-right: auto;
margin-left: auto;
position: relative;
}

#logo1 img {
width: 261px;
height: 102px;
}


#rcubre {
background-color: rgba(300,300,300,.7);
color:#121F30;
font-size:30px;
font-family:'Raleway-Bold';
min-height: 50px;
width: auto;
}


.nav {
    height: 100%;
    text-align: center;
}

.nav ul {
    list-style: none;
    padding: 0px;
    margin-top: 15px;

}

.nav ul.toggle {
    display: none;
    visibility: hidden;
    height: 0px;
    overflow: hidden;
    margin-bottom: 0;
}

.nav ul li {
    display: inline-block;
    margin: 5px;
    flex-wrap: none;
}

.nav ul li:first-child {
    /*margin:0px;*/
}

.nav ul li:last-child {
    /*margin:0 0 0 10px;*/
}

.nav ul li a {
    display: block;
    font-size: 14px;
    color: #fff;
    font-family: 'Dosis';
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.nav ul li a:hover {
    color: #2A287F;
}

.nav ul li div a:hover {
    color: #fff;
}

#navm {
    height: auto;
    text-align: center;
    padding-top: 7px;
}

#navm ul {
    list-style: none;
    padding: 0px;

}

#navm ul li {
    /*padding-top: 20px;*/
    display: inline-block;
    margin: 0 10px;
}


#navm ul li a {
    display: block;
    font-size: 13px;
    color: #fff;
    font-family: 'Raleway-Light';
    text-decoration: none;
    font-weight: 600;

}

#navm ul li a:focus,
#navm ul li a:visited,
#navm ul li a:hover,
#navm ul li a:active {
    color: #2A287F;
    font-family: 'Raleway-Light';
    text-decoration: none;
}


#nav3 {
    height: 60px;
    text-align: center;
    z-index: 300;
    width: 100%;
    position: relative;
    height: auto;
}

#nav3 ul {
    list-style: none;
    background: #2783CC;

}

#nav3 ul li {
    display: inline-block;
    text-align: center;
    /*width: 7%;*/
    margin-right: 3px;
    margin-left: 3px;
    margin-top: 10px;

}

#nav3 ul li a {
    display: block;
    font-size: 14px;
    color: #fff;
    font-family: 'Dosis';
    text-decoration: none;
    /*text-transform:uppercase;*/
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    text-align: center;
}

#nav3 ul li a:hover {
    color: #2A287F;
}

#nav4 {
    height: 60px;
    text-align: center;
    z-index: 300;
    display: none;
}

#nav4 ul {
    list-style: none;
    padding: 0px;
    background-color: #0084CF;
    padding: 5px;
    padding-right: 20px;
    padding-left: 20px
}

#nav4 ul li {
    display: inline-block;
    margin: 0 5px;
}

#nav4 ul li a {
    display: block;
    font-size: 14px;
    color: #fff;
    font-family: 'Dosis';
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

#nav5 {
    height: auto;
    text-align: center;
    padding-top: 7px;
}

#nav5 ul {
    list-style: none;
    padding: 0px;

}

#nav5 ul li {
    /*padding-top: 20px;*/
    display: none;
    margin: 0 10px;
    color: #fff;
    background-color: #0767B2;
    font-size: 25px;
    font-family: 'Raleway-Light';
}

.navnew {
    width: 100%;
    display: inline-block;
    margin: 0px;
    padding: 0px;
}

#nav-left {
    float: left;
    height: auto;
}

#nav-left ul li {
    text-decoration: none;
    display: inline-block;
    margin: 0 5px;
}

#nav-right {
    float: right;
    height: auto;
}

#nav-right ul li {
    text-decoration: none;
    display: inline-block;
    margin: 0 5px;
}

.btnother {
    float: right;
    margin: 5px;
    text-decoration: none;
    text-align: center;
    padding: 2px;
    font-weight: 600;
    font-size: 20px;
    color: #ffffff;
    background-color: #0d3045;
    border-radius: 12px;
    border: 2px solid #0d3045;
    width: 90px;
    font-size: 10px;
}

#nav7 {
    height: 60px;
    text-align: center;
    z-index: 300;
    width: 100%;
    position: relative;
    height: auto;
    padding-top: 7px;
}

#nav7 ul {
    list-style: none;
    /*background:#2783CC;*/

}

#nav7 ul li {
    display: inline-block;
    text-align: center;
    /*width: 7%;*/
    margin-right: 3px;
    margin-left: 3px;
    margin-top: 10px;

}

#nav7 ul li a {
    display: block;
    font-size: 14px;
    color: #fff;
    font-family: 'Dosis';
    text-decoration: none;
    /*text-transform:uppercase;*/
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    text-align: center;
}

/* Footer */
.footer {
    background-color: #0767B2;
    /* Fondo azul oscuro */
    color: #eee;
    padding: 20px 0 10px;
    text-align: center;
    position: relative;
}

/* Franja superior para redes sociales */
.footer__nav {
    background-color: #2783CC;
    /* Azul más claro */
    padding: 15px 0;
    margin-bottom: 10px;
}

.footer__nav ul.social-list {
  display: flex;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap; /* para que baje en móviles */
}

.footer__nav ul.social-list li {
  display: flex;
  flex-direction: column; /* icono arriba, texto abajo */
  align-items: center;
  justify-content: center;
  flex: 0 0 auto; /* que no crezca ni encoja */
  min-width: 80px; /* ancho mínimo para que no se achique */
  text-align: center;
}

/*.footer__nav ul.social-list li a {
    color: #eee;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}*/

.footer__nav ul.social-list li a {
  color: #eee;
  text-decoration: none;
  font-weight: 600;
  display: flex;
  flex-direction: column; /* icono y texto en columna */
  align-items: center;
  gap: 6px;
}

.footer__nav ul.social-list li a img {
  width: 24px;
  height: 24px;
}

/*.footer__nav ul.social-list li a img {
    width: 20px;
    height: 20px;
}*/

.footer__legal {
    font-size: 0.9rem;
    margin-top: 10px;
}

.footer__legal a {
    color: #eee;
    text-decoration: underline;
    margin-left: 10px;
}

/* Botón WhatsApp fijo */
.whatsapp-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25d366;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.whatsapp-btn:hover {
    background: #1ebe57;
}

.whatsapp-btn img {
    width: 35px;
    height: 35px;
}

/* Media Queries */

/* Móviles */
@media (max-width: 600px) {

    .top-content {
    background-size: contain; /* Evita que la imagen se recorte o expanda */
    background-position: top center;
    padding: 20px 10px 40px;
  }


     /* Contenedores nav-left y nav-right apilados y centrados */
  #nav-left, #nav-right {
    float: none;
    width: 100%;
    text-align: center;
    margin: 10px 0;
  }

  /* Listas en bloque y centradas */
  #nav-left ul, #nav-right ul {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 0;
    margin: 0 auto;
  }

  /* Botones en línea con espacio */
  #nav-left ul li, #nav-right ul li {
    display: inline-block;
    margin: 0;
  }

  /* Ajustar específicamente "REGÍSTRATE" para que esté más a la derecha */
  #nav-left ul li:last-child {
    margin-left: 30px;
  }

  /* Ajustar "CALCULA TU ENVÍO" para que esté más a la izquierda */
  #nav-right ul li:first-child {
    margin-right: 30px;
  }


    .header__nav {
        flex-direction: column;
        gap: 10px;
    }

    .header__nav-left ul,
    .header__nav-right ul {
        justify-content: center;
    }

    .header__main {
        flex-direction: column;
        gap: 15px;
        padding: 0 1px;
    }

    .header__slogan {
        font-size: 1.2rem;
        margin-bottom: 15px;
        white-space: normal;
        /* Permitir salto de línea */
        word-wrap: break-word;
        color: #fff;
        /* Asegurar texto blanco */
        text-align: center;
    }

    .header__social ul {
        justify-content: center;
        gap: 10px;
    }

    .header__social ul li a {
        font-size: 0.85rem;
        white-space: nowrap;
        color: #fff;
        /* Texto blanco */
    }

    .countries-list {
        flex-direction: column;
        gap: 15px;
    }

    .countries {
        gap: 20px;
    }

    .country {
        width: 45%;
        margin: 0 auto;
    }

  /*  .steps {
        flex-direction: column;
        gap: 20px;
    }

    .step {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }*/

         .steps {
             display: flex;
             /* activar flexbox */
             flex-direction: row;
             /* alinear en fila */
             justify-content: center;
             /* centrar horizontalmente */
             gap: 15px;
             /* espacio entre pasos */
             flex-wrap: nowrap;
             /* evitar que se rompa en varias filas */
         }
    
         .step {
             flex: 1 1 auto;
             /* que cada paso crezca y se reduzca */
             max-width: 120px;
             /* ancho máximo para cada paso */
             text-align: center;
             /* centrar contenido */
             margin: 0;
             /* eliminar márgenes automáticos */
         }

                 .countries-list {
                     flex-direction: column;
                     gap: 15px;
                     align-items: center;
                 }
        
                 .countries-list li {
                     width: 100%;
                     justify-content: center;
                 }
                                   /* Forzar que el enlace sea flex con espacio entre imagen y texto */
                                   .countries-list li a {
                                       display: flex;
                                       align-items: center;
                                       justify-content: flex-start;
                                       /* Alinear todo a la izquierda */
                                       gap: 20px;
                                       /* Separación fija entre bandera y texto */
                                       width: 180px;
                                       /* Ancho fijo para que todos tengan igual espacio */
                                   }
                
                                   /* Texto del país con ancho fijo para alinear las banderas */
                                   .countries-list li a span {
                                       display: inline-block;
                                       width: 110px;
                                       /* Ajusta según el texto más largo (ej. "Reino Unido") */
                                       text-align: left;
                                   }

                                         .footer__nav ul.social-list {
                                             flex-wrap: wrap;
                                             /* Permite que los ítems bajen a otra línea */
                                             justify-content: center;
                                             /* Centra los ítems */
                                             gap: 1px;

                                             /* Espacio entre ítems */
                                       overflow-x: auto;
                                         }
                    
                                         .footer__nav ul.social-list li {
                                             /*flex: 1 1 100%;*/
                                            flex: 0 0 auto;
                                             /* Cada ítem ocupa casi la mitad del ancho */
                                           /*  max-width: 45%;*/
                                        /* que cada ítem ocupe solo el ancho necesario */
                                            min-width: 80px;

                                             /* Máximo ancho para evitar que se estiren mucho */
                                             text-align: center;
                                             /* Centrar texto e icono */
                                         }
                    
                                         .footer__nav ul.social-list li a {
                                             justify-content: center;
                                             /* Centrar contenido dentro del enlace */
                                         }
                                                                                 


}

/* Tablets */
@media (min-width: 601px) and (max-width: 900px) {
       .top-content {
    padding: 30px 10px 60px;
  }
  .top-content__title {
    font-size: 1.8rem;
  }

    .header__nav {
        flex-wrap: wrap;
    }

    .header__nav-left ul,
    .header__nav-right ul {
        justify-content: center;
    }

    .header__main {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .header__slogan {
        font-size: 1.4rem;
        color: #fff;
        /* Asegurar texto blanco */
    }

    .countries-list {
        justify-content: center;
    }

    .steps {
        justify-content: center;
    }
        .footer__nav ul.social-list {
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
        }
    
        .footer__nav ul.social-list li {
        flex: 0 0 auto;
            min-width: 80px;
            text-align: center;
    

        }
}

@media (max-width: 900px) {
    .top-content {
        background-size: contain;
        background-position: top center;
        padding: 30px 15px 60px;
    }

  #select1 {
      flex-direction: column;
      height: auto;
      padding: 20px 20px 10px 20px;
      width: 90%;
      max-width: none;
      gap: 15px;
      align-items: center;
  }

  #selecti {
      flex: none;
      margin: 0 auto;
  }

  #selecti img {
      width: 80px;
      height: auto;
      position: static;
      left: 0;
      top: 0;
  }

  nav.nav7 {
      flex: none;
      width: 100%;
      display: flex;
      justify-content: center;
  }

 nav.nav7 ul {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-auto-flow: row;
     gap: 5px;
     padding: 0;
     margin: 0 auto;
     width: 100%;
     max-width: 380px;

     /* ancho aumentado para 4 columnas */
     /*justify-items: center;*/
     grid-auto-rows: minmax(40px, auto);
     /* altura mínima para filas */
 }

  /* Primer país ocupa toda la fila */
 /* nav.nav7 ul li:last-child {
      grid-column: 1 / -1;
      display: flex;
      justify-content: center;
      text-align: center;
  }*/
/* Centrar el div interno */


  /*nav.nav7 ul li #selectl {
      display: flex;
      flex-direction: column;
   
      align-items: center;
     
      gap: 5px;
      
      white-space: normal;
    
      text-align: center;
      
  }*/

  nav.nav7 ul li #selectl {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /* centra verticalmente */
      gap: 5px;
      text-align: center;
      height: 100%;
      /* para que ocupe toda la celda */
      box-sizing: border-box;
  }

  nav.nav7 ul li #selectl a:last-child {
      padding-left: 0 !important;
      padding-right: 0 !important;
      white-space: normal;
      /* permitir salto de línea */
      width: 100%;
      /* que ocupe todo el ancho del contenedor */
      display: block;
      font-weight: 600;
      /* opcional, para destacar */
      font-size: 1.1rem;
      /* ajustar tamaño si quieres */
  }

  nav.nav7 ul li:first-last #selectl a {
      padding-left: 0 !important;
      padding-right: 0 !important;
      white-space: nowrap;
  }

nav.nav7 ul li:last-child a {
    justify-content: center;
    text-align: center;
    width: auto;
}

 /*nav.nav7 ul li {
     justify-content: center;
     width: 100%;
 }*/

 nav.nav7 ul li {
     display: flex;
     justify-content: center;
     align-items: center;
     /* centra verticalmente */
     height: 100%;
     box-sizing: border-box;
 }

   nav.nav7 ul li a {
       width: 100%;
       justify-content: center;
       gap: 10px;
       font-size: 1.2rem;
   }

   nav.nav7 ul li img {
       width: 28px;
       height: 18px;
   }

   /*nav.nav7 ul li img {
       width: 28px;
       height: 18px;
       margin: 0;
       
       padding: 0;
    
       vertical-align: middle;
       
       display: block;
    
   }*/


    .header__main {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 0 1px;
    }

    .header__logo,
    .header__slogan,
    .header__social {
        flex: 1 1 100%;
        text-align: center;
        margin: 5px 0;
    }

    .header__slogan {
        font-size: 1.5rem;
        /* Reducir tamaño en móvil */
        margin: 10px 0;
    }

    .header__social ul {
        justify-content: center;
        gap: 10px;
    }

         .steps {
             display: flex;
             /* activar flexbox */
             flex-direction: row;
             /* alinear en fila */
             justify-content: center;
             /* centrar horizontalmente */
             gap: 15px;
             /* espacio entre pasos */
             flex-wrap: nowrap;
             /* evitar que se rompa en varias filas */
         }
    
         .step {
             flex: 1 1 auto;
             /* que cada paso crezca y se reduzca */
             max-width: 120px;
             /* ancho máximo para cada paso */
             text-align: center;
             /* centrar contenido */
             margin: 0;
             /* eliminar márgenes automáticos */
         }
}