/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap');

*{
    overflow-anchor: auto;
}

li > * {
    /* vertical-align: text-top; */
    vertical-align: middle;
}

:root{
    --ancho: 1024px;
    --colorEncabezado: #155bc59d;
 /*    --colorMenu: #668ecb;
    --colorMenuOver: #155bc5; */
    --colorMenu: #96aed1;
    --colorMenuOver: #668ecb;
}
  
html {    
    background-color:#aaa;
/*     font-family: Myriad Pro; */
/*     font-family: 'Noto Sans SC', sans-serif; */
    font-family: 'Open Sans', sans-serif;
    
    z-index: -1;
    text-align: center; /*CENTRADO*/
}

body {
    position:relative;
    width:80%;          /*CENTRADO*/
    margin: 0 auto;     /*CENTRADO*/
   /*  left:20%;
    right:20%;
    width:60%; */
    min-width: 400px; /* VER DE VARIAR SEGUN MEDIA QUERY */
    max-width: var(--ancho);
    /*height: 1500px;*/
    background-color:#fff;
}

section {
    margin: 40px 0;
}

a {
    text-decoration: solid;
    color:black;
}

header{
    position: relative;
}

.imagenPortada {
    position: relative;
    /* height: 100%;*/
    width: 100%;
    bottom: 0;
    z-index: 10;
}

.transpAzulHeader {
    position: absolute;
    background-color: var(--colorEncabezado);
    width: 100%;
    bottom: 0;
    height: 32%;
    z-index: 20;
   
}

.logo {
    position: absolute;
    height: 40%;
    left: 10px;
    bottom: 1rem;
    z-index: 30;
}

header > p a {                /*TEXTO CON DIRECCION*/
    position: absolute;
    font-size: .9rem;       /* VER DE VARIAR SEGUN MEDIA QUERY */ 
    bottom: 0;
    right: 1rem;
    color: #fff;
    z-index: 40;
    margin: 1rem;
}

h3 > span {
    font-size: .8rem;
}

summary, details {
    cursor: pointer;
}

/* =================
     BOTONERA
==================*/

.menu-princ {
    display:inline-flex;
    background-color: none/* #668ecb */;
    margin: 0 0 1.5rem 0; 
    padding-inline-start: 0;
    width:100%; 
    align-items: center;
    justify-items: center; 
    z-index: 10;
    /* VER COMO ESTIRAR*/
    flex-direction: row;
    flex-flow: row wrap;
    justify-content: space-evenly;
    justify-items: center; /* adjusted */
    gap: 0px;
}

li {
    background: none;    
    padding: .5em 0;
    list-style-type: none;
    text-align: center;
}



li.semiSubra * {
   text-decoration: none; 
    /*color: red; */
}

li.semiSubra span a {
   text-decoration: none !important; 
    /* color: blue; */
}

li.semiSubra span a span{
   text-decoration: underline; 
    /* color: blue; */
}

/*
.listaContacto li a {
  
}
/*
.listaContacto li a span {
   text-decoration: auto; 
}*/

.menu-princ ul {  
    align-items: center;
}

.menu-princ > li {  /*Hijos exclusivamente*/
    font-size: .9rem;
    text-transform: uppercase;
    /* padding: .5rem; */
    
    color: white;
    width: 9rem;
/*     height: 2.5rem; */
    display: flex;
    justify-content: center;
  
    position: relative;
    cursor: pointer;
/*     border: 1px solid #555; */
}

.menu-princ a {
    min-width: 80px;
    height: 2rem;
    width: 100%;
    letter-spacing: .05em;
    font-weight: 400;
    
/*     color: white;
 */    
}

/*MENUS DESPLEGABLES*/

.menu-desplegable {
    position: absolute;
    display: block;
    width: 9.25rem;
    /*  float: left; */
    margin: 0 0 0 0;
    padding: 1.6rem 0 0 0;
    padding-inline-start: 0;
    display: none;
    z-index: 50;
}

.menu-desplegable li {
    /* background-color: #fff; */
    background-color: var(--colorMenu);
    justify-content: left;
    text-align: left;
    /* border: 1px solid; */ /* BORRAR */
    padding: 0 0.9rem;
    margin: 0;
    width: 100%;   
}

.menu-desplegable li a {
    padding: 0.9rem 0;
    display: block;
    height: 1.5rem;

}

.menu-princ li:hover .menu-desplegable{
    display: block;
}

/*MARCADO DE MOUSE OVER*/

.menu-princ > li:hover,
.menu-desplegable > li:hover {  /*Descendencia totales*/
    background-color: var(--colorMenuOver);
}


/*=============
    SLIDER
=============*/

.slider{
    position: relative;
    margin: auto;
    width: 85%;
 /*   border: 1px solid;  /*Eliminar*/
    overflow: hidden;
    
  }

.show-slider {
  /* position: relative; */
  width: 500%;
  height: 300px;
  padding: 0;
  margin: auto;
  display: flex;
  animation: cambio 25s infinite linear;
}

.show-slider li {
/*    position: absolute;*/
padding: 0;
    width: inherit;
    height: inherit;
/*     transition: opacity .5s; */
    background:#fff;
    width: 100%;
}

.show-slider img{
  width: 100%;
  height: 90%;
  
  object-fit: cover;
}

@keyframes cambio {
    0% {margin-left: 0;    }
    10% {margin-left: 0;    }
    15% {margin-left: -100%;    }
    35% {margin-left: -100%;    }
    40% {margin-left: -200%;    }
    60% {margin-left: -200%;    }
    65% {margin-left: -300%;    }
    85% {margin-left: -300%;    }
    90% {margin-left: -400%;    }
    100% {margin-left: -400%;   }
}
/*1º muestra*/
/* ul.slider li:first-child { 
    opacity: 1;
}

ul.slider li:target {/*Al cliquear 
    opacity: 1;
}
*/
.menu-slider{
  width: 100%;
  margin: auto;
  position: absolute;
  height: 5px;
  bottom: 0;
  padding: 5px 0;
  background-color: #fff8;  
  
}

.menu-slider li{
  display: inline-block;
  text-align: center;
  padding: 0 10px;
  margin: 0 5px;
  height: 5px;
}

.menu-slider li a{
  display: inline-block;
  color: white;
  text-decoration: none;
  /*background-color: grey;*/
  padding: 0;
  width: 10px;
  /*height: 2px;
  /*font-size: 20px;
  /* border-radius: 100%; */
}

/*marcadores AZULES*/
.menu-slider li:nth-child(1){ background-color: #0060BB;  }
.menu-slider li:nth-child(2){ background-color: #0070BB;  }
.menu-slider li:nth-child(3){ background-color: #0080BB;  }
.menu-slider li:nth-child(4){ background-color: #0090BB;  }


/*================
    BLUE TILES
================*/

/*li GENERICO DECLARADO EN NAV*/


.cajas-colores{
    position: relative;
    /*margin-bottom: 5%; 

    margin: 40px auto; */
    align-items: center;
    width: 100%;
}

.contenedor-flex, .contenedor-flex-serv {
/*  position: absolute; */
    width: 100%; 
    /* height: 100%; */
    display:inline-flex; 
   /*  display: flex;*/
    flex-direction: row;
    flex-flow: row wrap;
    justify-content: center;
    justify-items: center; /* adjusted */
    gap:0px;
    margin: 0 auto; 
}

.contenedor-flex > div, .contenedor-flex-serv > div {  /*DIVS => CAJAS AZULES*/
    height: 140px;
    width: 170px;
    /*Centrado interior*/
    display: flex;
    justify-content: center;
    /* align-items: flex-start; */
    align-items: stretch;
    align-content: stretch;
    /* background-size: cover; */
    background-size: 100% 100%;
}



.cajaColor a {
    width: 100%;
    height: 100%;
}

.cajaColor ul {
    padding: 0;
    margin: 0;
    border: 0;
}

.cajaColor li,.cajaColor a {
    color: white;
    font-size: .8rem;
    /* cursor: pointer; */
}

.cajaColor li:first-child {
    padding: 1rem 0 0;
}

.cajaColor b {
    font-size: 1.2rem;
}

/*BLOQUES AZULES*/
.contenedor-flex div:nth-child(1){ background-color: #0060BB;  }
.contenedor-flex div:nth-child(2){ background-color: #0070BB;  }
.contenedor-flex div:nth-child(3){ background-color: #0080BB;  }
.contenedor-flex div:nth-child(4){ background-color: #0090BB;  }

 /*=====================
 BLOQUES SERVICIOS
 =====================*/

.transpAzulServicios {
    position: absolute;
    background-color: var(--colorEncabezado);
    bottom: 0;
    height: 32%;
    width: inherit;
}

.cajaServicio {
    position: relative;
/*     padding-top: 1rem;
 */}

 .cajaServicio a {
    text-transform:uppercase;
    text-align: left;
    color: whitesmoke;
    font-size: .8rem;
    padding: 0 0 0 1.2rem;
    padding-top: 65%;
    z-index: 30;
    width: 100%;
}

/*  .contenedor-flex-serv > div, .contenedor-flex div{
 clip-path: polygon(100% 0, 100% 60%, 75% 100%, 0 99%, 0 0);
 } */

.contenedor-flex-serv > div:nth-child(1){ 
    background: no-repeat center/130% url("../src/1.laboratorio.jpg");

}
.contenedor-flex-serv > div:nth-child(2){ 
    background: no-repeat center/200% url("../src/2.consultorios.jpg");  
}

.contenedor-flex-serv > div:nth-child(3){ 
    background: no-repeat center/130% url("../src/3.kinesiologia.jpeg");  
}
.contenedor-flex-serv > div:nth-child(4){ 
    background: no-repeat center/130% url("../src/4.estudios.jpg");  
}

/*================
    FOOTER
================*/

footer.main {
    /* position: relative; */
    display:flex;
    justify-content: space-around;  /*Acomoda las tres columnas uniformemente*/
    flex-direction: row;
    flex-flow: row wrap;
    
    background-color: grey;
    color: #fff;
    padding: 1rem;
    font-size: .9rem;
    font-weight:lighter;
    gap: .5rem;
}

footer.main ul {
    background: none;
    padding: 0;
    margin: 0;
    border: 0;
    
    list-style-type: none;
    flex-grow: 1;
/*     padding-top: .8rem;
 */}

footer.main ul:last-child li {   /*Centrado Data Fiscal*/
    /* justify-content: center;
    align-items: center; */
    margin: 0;
    padding: 0;
}

footer.main li  {
    padding: .2rem 0;
    text-align: left;

}

footer.main li > * {
    /* vertical-align: text-top; */
    vertical-align: bottom;
}

footer.main li::marker {
    /* vertical-align: text-top; */
    max-height: 16px;
}

footer.main a {
    color: #fff;
    font-size: .9rem;
    font-weight:lighter;
    cursor: pointer;
}

.logoFooter {
    max-width: 250px;
}

.listHeader, .listHeader a {
    text-align: left;
/*     margin-top: .8rem;
 */    margin-bottom: .2rem !important;
    font-weight: 700;
    cursor:auto;
}


footer.main ul:nth-child(3) {    /*Tercer columna del footer*/
    height: 80%;
    align-content: flex-end;
}







 .UbicIcoLi {
   
    list-style-image: url(../src/ico/Ubicacion.png);

}



.MailIcoLi {
    list-style-image: url(../src/ico/Mail.png);
}

.TeleIcoLi {
    list-style-image: url(../src/ico/Telefono.png);
    cursor:auto;
}

.WhapIcoLi {
    list-style-image: url(../src/ico/Whatsapp.png);
}

.iconado {
    margin: 0 0 .2em 2em !important;
    
    font-size: .9rem;
    position: relative;
    align-items: center;
    vertical-align: middle;
   
}

/*CENTRADO VERTICAL DE TEXTO + LI MARKER*/
.iconado span {
    display: inline-table;
    vertical-align: middle;
    height: 100%;
/*     padding-bottom: .7rem; */
  }

/*   .MailIcoLi.iconado span {
    padding-bottom: .4rem; 
  } */

.fiscal {
    min-width: 60px;
    margin: 1rem 0 0 1rem;
    
    
}