:root {
	--naranja: #ff5c35;
	--azul: #00205c;
	--arena: #fdf0e3;	
    --phrases: 3;   /* número de frases */
    --display: 5s; /* tiempo que "ocupa" cada frase en el ciclo */
    --stagger: 0.15s; /* separación entre aparición de palabras dentro de la frase */
    --enter-duration: 0.45s;/* duración de la animación de entrada de cada palabra */
    --font-size: 28px;
    --total: calc(var(--phrases) * var(--display)); /* duración total del ciclo */
  }

@font-face {
    font-family: 'Lexend';
    src: url('/fonts/Lexend-Regular.eot');
    src: url('/fonts/Lexend-Regular.eot?#iefix') format('embedded-opentype'),
        url('/fonts/Lexend-Regular.woff2') format('woff2'),
        url('/fonts/Lexend-Regular.woff') format('woff'),
        url('/fonts/Lexend-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display:auto;
}

@font-face {
    font-family: 'Lexend-Light';
    src: url('/fonts/Lexend-Light.eot');
    src: url('/fonts/Lexend-Light.eot?#iefix') format('embedded-opentype'),
        url('/fonts/Lexend-Light.woff2') format('woff2'),
        url('/fonts/Lexend-Light.woff') format('woff'),
        url('/fonts/Lexend-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: auto;
}

@font-face {
    font-family: 'Lexend-Bold';
    src: url('/fonts/Lexend-Bold.eot');
    src: url('/fonts/Lexend-Bold.eot?#iefix') format('embedded-opentype'),
        url('/fonts/Lexend-Bold.woff2') format('woff2'),
        url('/fonts/Lexend-Bold.woff') format('woff'),
        url('/fonts/Lexend-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: auto;
}


@font-face {
    font-family: 'Lexend-Medium';
    src: url('/fonts/Lexend-Medium.eot');
    src: url('/fonts/Lexend-Medium.eot?#iefix') format('embedded-opentype'),
        url('/fonts/Lexend-Medium.woff2') format('woff2'),
        url('/fonts/Lexend-Medium.woff') format('woff'),
        url('/fonts/Lexend-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: auto;
}


@font-face {
    font-family: 'Lexend-SemiBold';
    src: url('/fonts/Lexend-SemiBold.eot');
    src: url('/fonts/Lexend-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('/fonts/Lexend-SemiBold.woff2') format('woff2'),
        url('/fonts/Lexend-SemiBold.woff') format('woff'),
        url('/fonts/Lexend-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: auto;
}





* {
    font-family: 'Lexend', sans-serif;
    font-weight: normal;
    font-style: normal;
    color: var(--azul);
    transition: 0.3s;
    box-sizing: border-box
    }

    .container{width: 100%; max-width: 1400px}
    main{margin-top: 87px}
    .p-100{padding:100px 0px}
    .bg-arena{background-color: var(--arena)}
    .bg-azul{background-color: var(--azul)}

    .cifra {
  font-size: 4rem;
  font-weight: bold;
  color: #333;
  /* La opacidad inicial es 0 para que aparezca suavemente */
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.naranja{color:var(--naranja)}
.azul{color:var(--azul)}
.arena{color:var(--arena)}
.cifra.visible {
  opacity: 1;
}
h1, h2, h3, h4 {font-family: 'Lexend-Bold', sans-serif;}
h1{font-size: 55px; font-weight: bold; line-height: 100%}
h2{font-size:48px; font-weight: 700; line-height: 100%; margin-bottom:35px}
.txt-big{font-size:21px}
.txt-big span{font-size:115%; font-weight: 600; display: block}
.txt-intro{max-width: 560px}
.sectores .txt-intro{max-width: 750px}
.caja-esp > div{border: 2px solid var(--arena); padding:15px 15px 30px; border-radius:14px; margin:12px 0px; background-color: #fff; z-index: 2; height: 94%;  position: relative}
.sectores .caja-esp > div{min-height:275px;}
.caja-esp h3, .caja-esp h2{font-size:24px; font-weight: 700; margin-left: 8px; line-height:100%}
.caja-esp-header{display: flex; border-bottom:2px solid var(--arena); padding-bottom:8px}
.caja-esp p{font-size:16px; margin:8px 0px 15px}
.caja-esp a{color:var(--naranja); font-size: 16px; font-weight: 600; text-decoration: none; display: block; border-top: 2px solid var(--arena); padding-top: 8px; position: absolute; bottom:15px; width: 91%}
.caja-esp a img{transform: rotate(-90deg); margin-left: 6px}
.caja-esp a:hover img{margin-left: 12px}
.sticky{position: sticky; top:120px; height: auto; z-index: -1;}
.img-bottom{position:relative; max-width: 800px; margin-top:60px}
.zindex3{z-index: 3}
.boton{padding: 15px; width: 100%;  display: block; border-radius: 14px; margin: 12px auto; text-decoration: none; line-height: 100%;
font-size: 21px; text-align: center}
.boton-arena{background: var(--arena); color:var(--azul);}
.boton img{ transform: rotate(-90deg); margin-left: 6px }
.boton-arena:hover{background-color: var(--naranja); color: #fff}
.boton-naranja{background: var(--naranja); color:#fff;}
.boton-naranja:hover{background-color: var(--arena); color: var(--azul)}
ul.menu-int a{color: var(--naranja); font-weight: 700; text-decoration: none}
ul.menu-int{list-style: none; padding:0px; max-width: 300px}
ul.menu-int li{padding:10px 15px; border-bottom:2px solid var(--arena);}
ul.menu-int li img{transform:rotate(-90deg); margin-left: 8px}
ul.menu-int li:hover img{margin-left: 12px}
.img-rounded{border-radius: 50%}
.tag-equipo{text-align: left;}
.tag-equipo span{color:var(--naranja); display: block}
.equipo .carousel-item{position: relative;}
.equipo .carousel-item .tag-equipo{position: absolute; bottom: 0; left: 315px}
.equipo{background-image: url("../img/icono-fondo-arena.svg"); background-repeat: no-repeat; background-position: 117% center; background-size: 1000px}
.equipo .carousel{margin-left: 45px}
.sectores #carouselExample{margin-top: 30px}
.sectores .caja-esp ul{margin-top:8px;}
ul.lista{
    list-style-position: outside;
    list-style-image: url(../img/bullet-orange.svg);
    }

   ul.lista li::marker {font-size: 30px;
    line-height: 10px;}
    .cont-buttons{position: absolute; height: 40px; right: 14px; top:-40px; width: 100px}
    .carousel-control-next, .carousel-control-prev{opacity:21;}
    .carousel-control-prev-icon{transform: rotate(90deg);}
    .carousel-control-next-icon{transform: rotate(-90deg);}
    .cont-buttons .carousel-control-prev-icon:hover{margin-left: -7px}
    .cont-buttons .carousel-control-next-icon:hover{margin-right: -7px}
    .cta{text-align:center; position: relative; background-image: url("../img/img-cta.webp"); background-repeat: no-repeat; background-position: 90% center; background-size: contain; }
    .cta h2, .cta p{color: var(--arena); text-shadow:3px 3px 3px var(--azul)}
    .cta.cta-oficinas h2, .cta.cta-oficinas p{color: var(--arena); text-shadow:none !important}
    .cta h2{font-size: 30px}
    .cta p{font-size: 24px; max-width: 650px; margin:auto;}
    .cta .boton{font-size:24px; margin-top: 30px; max-width:450px;}
    .cta .boton img{display: none}
    .text-right{text-align: right;}
    img.onda-der{border-radius: 0px 0px 50% 0px;}
    .txt-tit{text-align:left; font-size:33px; font-family: 'Lexend-Bold', sans-serif; line-height:100%; margin:0px auto 75px; max-width:1000px; text}
.txt-tit span{display:block; color: var(--naranja); font-family: 'Lexend-Bold', sans-serif; text-align:right}
.que-aseguramos .caja-esp > div{padding:15px}
.que-aseguramos .caja-esp {height:100%}
.que-aseguramos .caja-esp p{margin:8px 0px 0px}
hr{margin:30px 0px; border:4px solid var(--arena); opacity:1; max-width: 300px; width:75%}
.hero-esp{background: #FFFFFF;
background: linear-gradient(90deg, rgba(253, 240, 227, 1) 55%, rgba(255, 255, 255, 1) 55%);}
.hero-esp h1{font-size:50px; margin-bottom:50px}
.hero-esp p{font-size:24px}
.hero-esp a{color:var(--naranja); font-weight:700; font-size:21px; margin-top:50px; text-decoration:none; display:block}
.texto-hero-esp{max-width:500px; margin:30px 0px 30px 13%}
.cont-img-esp{position: relative;}
.cont-img-esp img{width:100%}
.cont-img-esp::before{content: "";
  display:block;
  height:100.4%;
  width:200px;
  background-size: contain;
  background-image: url("../../img/onda-esp-arena.svg");
  background-repeat: no-repeat;
  background-position: left center;
position:absolute;top:-1px; left:-2px;}

.cont-img-esp::after{content: "";
  display:block;
  height:100.2%;
  width:200px;
  background-size: contain;
  background-image: url("../../img/onda-esp-blanca.svg");
  background-repeat: no-repeat; 
  background-position: right center;
position:absolute; top:0; right:-2px;}

.txt-esp img{margin-right: 50px; position:relative; max-width: 100%; border-left: 1px solid #fff;}
.cont-img-txt{position:relative; width: fit-content; }
.cont-img-txt::before{content: "";
  display:block;
  height:101%;
  width:120px;
  background-size: cover;
  background-image: url("../../img/onda-esp-blanca.svg");
  background-repeat: no-repeat;
  background-position: 2px center;
position:absolute; z-index: 2; transform: rotate(180deg);}
    



    

    






/***** HEADER ************************************************************/

	header{background-color: #fff; z-index: 4; padding:15px 0px; position:fixed; top: 0; width: 100%}
	.navbar-nav{margin:auto;}
	.navbar-nav .nav-item{margin:0px 0.75vw;}
	.navbar-expand-lg .navbar-nav .dropdown-menu{border:2px solid var(--arena); position:fixed; top:-25%; width:100%;}
	.dropdown-menu.row.show {display: flex; width:100%; max-width: 1200px; top:80px; z-index: 2; background:#fff; padding:30px 60px;margin: auto; right: 0; left: 0;
	animation-name: example;
  	animation-duration: 0.5s;
  	}

  	
  	@keyframes example {
  	from {opacity:0; top:45px}
  	to {opacity:1; top:80px}
	}
	.nav-link{color:var(--azul);}
    .dropdown-menu ul{list-style: none; padding:0px 15px;}
    .dropdown-menu ul li{margin-bottom: 8px}
    .dropdown-menu ul.columna2{column-count: 2}
    .dropdown-menu ul.columna4{column-count: 4}
    .dropdown-menu p.hlista-header{font-size: 19px; font-weight:700; margin-bottom: 15px; line-height: 100%; padding:0px 15px}
    .dropdown-menu li a, .idiomas a{color: inherit; text-decoration: none}
    .idiomas a{margin:0px 8px; font-size: 14px}
    .dropdown-menu li a:hover{font-weight: bold;}
    .border-r{border-right: 2px solid var(--arena);}
    a.close-dropdown{position:absolute; color:var(--naranja); font-size: 30px;
        display:block; text-decoration: none;right: 0;left: 96%;width: fit-content;top: 0px; transform: rotate(45deg);}

        li.nav-item:after {
    display: block;
    content: '';
    border-bottom: solid 2px var(--naranja);
    transform: scaleY(0) scaleX(0);
    transition: transform 250ms ease-in-out
}

li.nav-item:before {
    position: absolute;
    bottom: -10em;
    left: 10;
    width: 100%
}

li.nav-item:hover:after,li.nav-item:hover:before {
    transform: scaleY(1) scaleX(1)
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus{color:var(--azul);}
.idiomas{text-align: right}
.navbar-toggler {border: none; margin-top:-4px}
.navbar-brand img{width:100%; max-width: 230px}
.navbar-toggler{position:absolute; right: 0; top:10px}

/****** HERO ************************************************/

.hero, footer{height:auto; background: #FFFFFF;
background: linear-gradient(90deg, rgba(255, 255, 255, 1) 70%, rgba(253, 240, 227, 1) 70%);}

.hero p{font-size: 55px; line-height: 100%}
.hero .row{align-items: center}
.carousel-inner .onda{position: absolute;z-index: 2; height: 100%; left:-1px; right:auto}
.carousel-inner .onda.onda-arena{right: -1px; left:auto}
.img-mask{width: 100%;}
.cont-hero{position: relative;}
.texto-hero{position: absolute;z-index: 3; margin:auto; right: 0; left: 125px; top:-150px; bottom:0; width: 450px}
.hero .container{position:relative}
img.flecha-hero{position:absolute; left: 125px; bottom:65px}
img.flecha-hero:hover{bottom:55px; cursor:pointer}





/***** TEXTO ANIMADO HERO *********************************************/
.frases-anim {
    height: 90px;
    position: relative;
    overflow: hidden;
    width: 360px;
  }

  .phrase {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    gap: 0px;
    align-items: center;
    justify-content: flex-start;
    font-size: var(--font-size);
    flex-wrap: wrap;
    pointer-events: none;
    /* cada frase "ocupa" var(--display) segundos dentro del ciclo total */
    animation: phraseVisibility var(--total) linear infinite;

  }


  /* animación que hace que la frase esté visible solo durante su ventana.
     Usaremos delays por índice (nth-child) para escalonar las frases. */
  @keyframes phraseVisibility{
    /* se hace invisible al principio/fin del ciclo */
    0%   { opacity: 0; transform: translateY(0.08em); filter: blur(1px); }
    6%   { opacity: 1; transform: translateY(0); filter: blur(0); }
    28%  { opacity: 1; transform: translateY(0); filter: blur(0); }
    34%  { opacity: 0; transform: translateY(-0.6em); filter: blur(1px); }
    100% { opacity: 0; transform: translateY(-0.6em); filter: blur(1px); }
  }

  /* --- animación de cada palabra (entrar desde abajo y quedarse visible por un rato) --- */
  .word {
    display: inline-block;
    transform: translateY(0.9em);
    opacity: 0;
    will-change: transform, opacity;
    animation-name: wordInOut;
    animation-duration: var(--total); /* recorre todo el ciclo, pero con delay específico */
    animation-timing-function: cubic-bezier(.2,.9,.3,1);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    font-size: 28px; color: var(--naranja); padding:0px 4px;

  }

  @keyframes wordInOut{
    /* La idea: en su ventana pequeña entra, permanece y sale. El resto del ciclo está oculto. */
    0%   { opacity: 0; transform: translateY(0.9em); }
    4%   { opacity: 1; transform: translateY(0); }
    26%  { opacity: 1; transform: translateY(0); }
    32%  { opacity: 0; transform: translateY(-0.6em); }
    100% { opacity: 0; transform: translateY(-0.6em); }
  }

  /* --- offsets por frase (cada frase empieza en un momento distinto del ciclo) --- */
  /* frase 1: delay 0 */
  .phrase:nth-child(1){ animation-delay: calc(0 * var(--display)); }
  /* frase 2: empieza después de 1 * display */
  .phrase:nth-child(2){ animation-delay: calc(1 * var(--display)); }
  /* frase 3: empieza después de 2 * display */
  .phrase:nth-child(3){ animation-delay: calc(2 * var(--display)); }

  /* --- ahora los delays por palabra dentro de cada frase.
     Cambia/añade reglas .phrase:nth-child(X) .word:nth-child(Y) según necesites.
     Fórmula usada: delay = (frase_index * --display) + ((palabra_index - 1) * --stagger)
  */

  /* FRASE 1 (index 0) */
  .phrase:nth-child(1) .word:nth-child(1){ animation-delay: calc(0 * var(--display) + 0 * var(--stagger)); }
  .phrase:nth-child(1) .word:nth-child(2){ animation-delay: calc(0 * var(--display) + 1 * var(--stagger)); }
  .phrase:nth-child(1) .word:nth-child(3){ animation-delay: calc(0 * var(--display) + 2 * var(--stagger)); }
  .phrase:nth-child(1) .word:nth-child(4){ animation-delay: calc(0 * var(--display) + 3 * var(--stagger)); }
  .phrase:nth-child(1) .word:nth-child(5){ animation-delay: calc(0 * var(--display) + 4 * var(--stagger)); }
  .phrase:nth-child(1) .word:nth-child(6){ animation-delay: calc(0 * var(--display) + 5 * var(--stagger)); }

  /* FRASE 2 (index 1) */
  .phrase:nth-child(2) .word:nth-child(1){ animation-delay: calc(1 * var(--display) + 0 * var(--stagger)); }
  .phrase:nth-child(2) .word:nth-child(2){ animation-delay: calc(1 * var(--display) + 1 * var(--stagger)); }
  .phrase:nth-child(2) .word:nth-child(3){ animation-delay: calc(1 * var(--display) + 2 * var(--stagger)); }
  .phrase:nth-child(2) .word:nth-child(4){ animation-delay: calc(1 * var(--display) + 3 * var(--stagger)); }
  .phrase:nth-child(2) .word:nth-child(5){ animation-delay: calc(1 * var(--display) + 4 * var(--stagger)); }
  .phrase:nth-child(2) .word:nth-child(6){ animation-delay: calc(1 * var(--display) + 5 * var(--stagger)); }

  /* FRASE 3 (index 2) */
  .phrase:nth-child(3) .word:nth-child(1){ animation-delay: calc(2 * var(--display) + 0 * var(--stagger)); }
  .phrase:nth-child(3) .word:nth-child(2){ animation-delay: calc(2 * var(--display) + 1 * var(--stagger)); }
  .phrase:nth-child(3) .word:nth-child(3){ animation-delay: calc(2 * var(--display) + 2 * var(--stagger)); }
  .phrase:nth-child(3) .word:nth-child(4){ animation-delay: calc(2 * var(--display) + 3 * var(--stagger)); }
  .phrase:nth-child(3) .word:nth-child(5){ animation-delay: calc(2 * var(--display) + 4 * var(--stagger)); }
  .phrase:nth-child(3) .word:nth-child(6){ animation-delay: calc(2 * var(--display) + 5 * var(--stagger)); }

  /* LÍNEA 1 (index 0) */
  
  .phrase .linea-frase:nth-child(2){ animation-delay: 1s }


  /* Adaptación móvil */
  @media (max-width:600px){
    :root{ --font-size: 20px; --stagger: 0.22s; }
    .ticker{ padding: 18px; }
  }

  /************** CONTADOR ************************************************/

  p.counter{color:var(--naranja); font-size: 40px; font-weight: 600; text-align: right; max-width: 200px; margin-top: 50px; margin-bottom: 0px}
  p.txt-counter{font-size: 21px; font-weight: 400; text-align: right; max-width: 200px; line-height: 100%}
  p.counter.counter-mas:before{content:'+'}
  p.counter.k:after{content:'K'}


  /************ FOOTER **************************************/

  footer{background-image: url("../img/onda-footer.svg"); background-repeat: no-repeat; background-position: 100% center; background-size: contain}
  footer > div.container{padding: 100px 15px 50px}
  footer a{color: inherit; text-decoration: none}
  footer a:hover{font-weight: bold}
  footer ul{list-style: none; padding: 0px}
  footer ul li{margin-bottom:15px; line-height: 110%}
  footer .ul-tit{font-weight: 700; font-size: 17px; margin-bottom: 30px}
  footer p.wbn{font-size: 19px}
  footer p.wbn span{font-size: 27px; font-weight: 700; letter-spacing: 5px; color:#632f7c }
  footer .row:nth-child(2){margin-top: 50px; align-items: end}




  .contacto form{margin: 30px 0px}
.contacto form input, .contacto form textarea{border:2px solid var(--arena); padding:8px 10px; color: var(--azul); background-color: var(--arena);}
form textarea.form-control{height: auto; min-height: 100px}
.contacto form .form-group{margin: 12px 0px}
.form-check-label{font-size: 12px}
.contacto > .container > .cont-contacto > div:first-child{ padding-right:60px; border-right:2px solid var(--arena); }
.contacto > .container > .cont-contacto > div:last-child{ padding-left:60px }
button{border:none}
.contacto form .boton{max-width: 300px; margin-top: 30px}
.contacto h1, .contacto .txt-big{margin-bottom:60px}
ul.ul-contacto li{margin-bottom: 15px}
.cta.cta-oficinas h2, .cta.cta-oficinas p{color: var(--azul);}
.cta.cta-oficinas {background-image: url(../img/img-cta-oficinas.png);}
.form-check-label{text-align: justify; padding-left:15px;}
.form-check{margin-top: 15px}
form label{margin-bottom: 5px}
.ul-iconos{list-style: none;}
.ul-iconos li{position: relative;}
.ul-iconos li img{position: absolute; left: -27px; top: 3px;}
.boton-trans{background:transparent; color: var(--naranja); font-size: 21px; font-weight: 700; width: auto}
.boton-trans img{display: inline !important;}
.boton-trans:hover img{margin-right:-12px}

 .page-especialidades .caja-esp a img{ width:100%; transform:rotate(0deg); margin-left:0px; border-radius:0px 0px 14px 14px;background:var(--azul)}
  .page-especialidades .caja-esp a{position:relative; width: 100%; border-top:none; bottom:0px; margin-top:0px; padding-top:0px}
  .page-especialidades .caja-esp a span{position:absolute;z-index:1; top:40%; background:var(--naranja); color:#fff; padding:5px; opacity: 0; left:-5px}
  .page-especialidades .caja-esp h3, .page-especialidades .caja-esp h2{margin-left:0px}
  .page-especialidades .caja-esp-header{border-bottom:none}
  .page-especialidades .caja-esp > div {padding:15px}
  .page-especialidades .caja-esp a:hover img{opacity: 0.5;}
  .page-especialidades .caja-esp a:hover span{opacity: 1; left:10px}

  .hero-esp.hero1 .texto-hero-esp{max-width:600px !important}
 p.parrafo-hero{font-size:21px}
 .col-md-12:first-child .caja-esp-honda{background-image: url(../img/onda-2.svg); background-position: left bottom;}
 .caja-esp-honda{margin-bottom:30px; padding:15px; background-image: url(../img/onda.svg);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 13%}

   
  
 .caja-esp-honda h3{font-weight:700}
 .caja-esp-honda .caja-esp-header{border-bottom:none}
 .sticky-2{height:auto}
 h2 span{font-weight:normal; display:block; text-align:right}
 .row.space-between{justify-content:space-between}
.accordion-button:not(.collapsed), .accordion-button{background-color:var(--arena); color:var(--naranja); font-size:24px; font-weight:700;
  border-radius:14px !important; border:none}
  .accordion-button:not(.collapsed){background-color:var(--naranja); color:#fff}
  .accordion-item{border:none; margin-bottom:10px; background-color:transparent}
  .accordion-body{border:2px solid var(--arena); border-radius:14px; margin-top:10px; background-color:#fff}
  .accordion-button:not(.collapsed){box-shadow:none}
  .accordion-body p{margin-bottom:0px}
  i{font-style:italic}
  .cont-caja-blanca{margin:8px; padding:25px; background:white; border-radius:14px; height:80%}
  .cont-caja-blanca.bg-image img {width:100%}
  .cont-caja-blanca.bg-image{padding:0px; overflow:hidden}
  .accordion{z-index: 2;}
  .historia h2{font-size:24px; margin-bottom:15px}
  .hito-hist{width:120px; height:120px; background-color:var(--arena); border-radius:100%; font-size:24px; font-weight:bold; display:flex;
    align-items:center; justify-content:center; margin:auto; text-align:center}
	.txt-hist{margin-bottom:30px}
	.txt-hist{padding:45px 30px 30px 55px; border:2px solid var(--arena); border-radius:14px; margin-left:-15px}
	.txt-hist p:last-child{margin-bottom:0px}
	.linea-tiempo{position:relative}
	.linea-tiempo:before{content:""; position:absolute; border:2px solid var(--naranja); height: 100%; left:70px; z-index: -1;}
	.historia .row{justify-content:right}
    .logo-footer-grupo img{padding-bottom:15px; margin-bottom:15px; }
    ol.lista li::marker{color:var(--naranja); font-weight:bold}
  ol.lista li{margin-bottom:15px}
  .damero {
display:flex; flex-wrap:wrap
}

.damero > div{width:33.3%; text-align:center}
.oficinas .accordion-button:not(.collapsed), .oficinas .accordion-button{font-size:21px; letter-spacing:-1px}
  .oficinas .accordion-header{margin-bottom:8px}
  .oficina p{font-weight:bold; font-size:18px; margin-bottom:10px}
  .oficina ul{list-style:none}
  .oficina ul li{margin-bottom:8px; word-break:break-word}
  .oficina ul li i{color:var(--naranja); font-size:14px}
  .oficina ul.fa-ul{margin-left:25px; }
  .oficina {border-bottom:2px solid var(--arena); margin-bottom:15px}
  .img-bottom-corta{width:112%}
  .form-check-input{height: 1.5em;}
  .cont-img-txt img{max-width:100%}
  .img-bg-blanco{background-color:#fff; padding:30px;}

  #loader{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color: #00205cc4; z-index: 10;}
  #loader.active{display:block !important}
  #loader img {width:125px; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; animation: rotate-animation 1.5s infinite linear;}
  @keyframes rotate-animation {
	0% {
		transform: rotate(0deg); 
  }
  50% {
		transform: rotate(180deg); 
	}
	100% {
		transform: rotate(360deg); 
	}
}





/**********MÓVIL********************************************/
@media only screen and (max-width: 575px) {

    header div.align-items-center{align-items: start !important}
    .navbar-expand-lg .navbar-nav .dropdown-menu{position:relative}
    .navbar-collapse{background-color:var(--arena); position:fixed;right: 0;left: 0; top:70px; height: auto; max-height:100vh; overflow: scroll; padding:15px;}
    .dropdown-menu.row.show {
    display: block;
    width: 100%;
    top: auto;
    z-index: 0;
    padding: 15px;
    margin: auto;
    right: auto;
    left: auto;
    animation-name: none;
    animation-duration: 1s;
}
.dropdown-menu ul.columna4, .dropdown-menu ul.columna2 {column-count: 1;}
a.close-dropdown {left: 88%;}
.border-r{border-right:none; border-bottom:2px solid var(--arena);}
.dropdown-menu ul, .dropdown-menu p.hlista-header{padding:15px 0px 8px }
.dropdown-menu p.hlista-header{margin-bottom:0px}
.texto-hero{position:relative; left: 0; top: 0; right: 0; bottom: 0; margin:auto; width: auto}
.hero{background: #fff}

.hero p{font-size: 30px}
.word{font-size: 21px}
.frases-anim{width: auto; height: 70px}
.carousel-inner .onda-blanca{display:none}
.hero .col-12{padding:0px}
.hero .texto-hero{padding:0px 15px}
a[href="#numeros"]{display: none}
.p-100{padding:50px 0}
h1{font-size: 40px}
h2{font-size: 38px}
.txt-big{font-size: 18px}

p.counter{text-align: center; font-size: 28px; margin-top: 30px}
p.txt-counter{text-align: center; font-size: 18px}
.img-bottom{width:155%; position: relative;}
.sticky{overflow: hidden; height: auto; min-height: auto;}
.equipo{background-size: cover; background-position: bottom left}
.equipo .carousel {margin-left: 0px}
.equipo .carousel img{width:100%; max-width:350px; margin: 0px}
.equipo .carousel-item .tag-equipo{position: relative; left: 0; text-align: center;}
.cont-buttons{top: auto; right: 0; left: 0; margin: auto}
.cta{text-align: center; background-image: none}
.cta.p-100{padding:30px 15px 15px}
.cta p{font-size:21px}
footer{background-position: -250px center; background-size: cover;}
footer > div.container{padding:30px 10px 0px}

.contacto > .container > .cont-contacto > div:first-child {padding-right: 15px;}
.contacto > .container > .cont-contacto > div:last-child {padding-left: 15px;}
.cta.cta-oficinas{background-image: none}

.hero-esp{background: var(--arena);}
.hero-esp h1 {margin-bottom: 15px;}
.texto-hero-esp{margin:15px}
.hero-esp p{font-size:18px}
.hero-esp a {margin-top: 15px;}
.cont-img-esp::after{display:none}
.cont-img-esp::before{transform: rotate(180deg); right:-1px; left:auto; top:-2px; height:101%}
.hero-esp > .container > .row > div.col-12:last-child{padding:0px}
.txt-esp .row{flex-direction: column-reverse;}
.txt-esp hr{display:none}
.cont-img-txt{margin-top:0px}
.txt-esp .col-md-6{overflow: hidden;}
.txt-tit{font-size: 27px;}
.txt-tit span{text-align: left;}
.txt-esp img{margin-top: 15px;}
.que-aseguramos .sticky img{display:none}
.txt-hist{padding:15px}
.hito-hist{width:80px; height:80px; font-size:21px; margin-top:-45px}
.linea-tiempo:before{left:50px;}
.txt-hist{margin-left:0px; margin-bottom: 45px}
.hero-esp h1 {font-size: 35px;}
.txt-tit{margin:0px auto 15px}
.oficinas .accordion-button{font-size:18px}
.sectores .caja-esp > div{min-height: auto;}
.caja-esp h3, .caja-esp h2{font-size:18px;}
.cont-caja-blanca img{width:40px}

}

/**********TABLET********************************************/
@media only screen and (min-width: 576px) and (max-width:767px) {

    header div.align-items-center{align-items: start !important}
    .navbar-expand-lg .navbar-nav .dropdown-menu{position:relative}
    .navbar-collapse{background-color:var(--arena); position:fixed;right: 0;left: 0; top:70px; height: auto; max-height:100vh; overflow: scroll; padding:30px;}
    .dropdown-menu.row.show {
    display: block;
    width: 100%;
    top: auto;
    z-index: 0;
    padding: 15px;
    margin: auto;
    right: auto;
    left: auto;
    animation-name: none;
    animation-duration: 1s;
}
.dropdown-menu ul.columna4, .dropdown-menu ul.columna2 {column-count: 2;}
a.close-dropdown {left: 92%;}
.border-r{border-right:none; border-bottom:2px solid var(--arena);}
.dropdown-menu ul, .dropdown-menu p.hlista-header{padding:15px 0px 8px }
.dropdown-menu p.hlista-header{margin-bottom:0px}
.texto-hero{left: 30px; top:-110px}
.hero h1, .hero p{font-size: 6.5vw}
.word{font-size: 24px}
a[href="#numeros"]{display: none}
.p-100{padding:75px 0}
h1{font-size: 42px}
h2{font-size: 40px}
p.counter, p.txt-counter{margin:10px auto}
.img-bottom{width:155%; position: relative;}
.sticky{height: auto; overflow: hidden;}
.equipo{background-size: cover; background-position: bottom 50%}
.equipo .carousel {margin-left: 30%}
.equipo .carousel img{width:100%; max-width:350px; margin: 0px}
.equipo .carousel-item .tag-equipo{position: relative; left: 0;}
.cta{text-align: left; background-position: 125% center;}
.cta.p-100{padding:75px 30% 75px 15px;}
footer > div.container{padding:60px 15px 0px}
footer{background-position: -150px center; background-size: cover;}

.contacto > .container > .cont-contacto > div:first-child {padding-right: 15px;}
.contacto > .container > .cont-contacto > div:last-child {padding-left: 15px;}

.hero-esp{background: var(--arena); overflow: hidden;}
.hero-esp h1 {margin-bottom: 30px; font-size:38px}
.texto-hero-esp{margin:15px}
.hero-esp p{font-size:19px}
.hero-esp a {margin-top: 30px;}
.cont-img-esp::after{display:none}
.cont-img-esp img {width: 150%;}
.txt-esp .row{flex-direction: column-reverse;}
.txt-esp hr{display:none}
.cont-img-txt{margin-top:0px; margin-bottom:30px}
.txt-esp .col-md-6{overflow: hidden;}
.txt-tit{font-size: 30px;}
.txt-tit span{text-align: left;}
.txt-esp img{margin-top: 30px;}
.que-aseguramos .sticky img{width:100%}
.txt-tit{margin:0px auto 30px}
.caja-esp h3, .caja-esp h2{font-size:21px}
.img-bottom{margin-top:30px}
.cont-img-txt::before{background-position: 0px center;}
.caja-esp a{bottom:7px}

}

/**********PORTÁTIL********************************************/
@media only screen and (min-width: 768px) and (max-width:991px) {

    header div.align-items-center{align-items: start !important}
    .navbar-expand-lg .navbar-nav .dropdown-menu{position:relative}
    .navbar-collapse{background-color:var(--arena); position:fixed;right: 0;left: 0; top:70px; height: auto; max-height:100vh; overflow: scroll}
    .dropdown-menu.row.show {
    display: block;
    width: 100%;
    top: auto;
    z-index: 0;
    padding: 15px;
    margin: auto;
    right: auto;
    left: auto;
    animation-name: none;
    animation-duration: 1s;
}
.dropdown-menu ul.columna4, .dropdown-menu ul.columna2 {column-count: 3;}
a.close-dropdown {left: 86%;}
.border-r{border-right:none; border-bottom:2px solid var(--arena);}
.dropdown-menu ul, .dropdown-menu p.hlista-header{padding:15px 0px 8px }
.dropdown-menu p.hlista-header{margin-bottom:0px}
.texto-hero{left:60px;}
.texto-hero{left: 30px; top:-110px}
.hero h1, .hero p{font-size: 6vw}
.word{font-size: 26px}
img.flecha-hero{position:absolute; left: 30px; bottom:30px; width:30px}
.sticky{overflow:hidden; height:auto}
.equipo{background-size: cover; background-position: 100% 70%}
.equipo .carousel {margin-left: 30%}
.equipo .carousel img{width:100%; max-width:350px; margin: 0px}
.equipo .carousel-item .tag-equipo{position: relative; left: 0;}
.caja-esp h3, .caja-esp h2{font-size: 21px}
.cta{background-position: 120% center;}
.hero-esp p {font-size: 21px;}
 .hero-esp h1 {margin-bottom: 40px; font-size:39px}
 .hero-esp a {margin-top:40px}
 .cont-img-esp img {width: 110%;}
 .hero-esp{background: var(--arena); overflow: hidden;}
 .cont-img-esp::after{display:none}
 .img-bottom{position:relative; width:150%}
 .cta p{max-width: 550px;}
 .txt-esp img{border-top:1px solid #fff}

}

/**********ORDENADOR********************************************/
@media only screen and (min-width: 992px) {

}