/* --------------------------------------------------------------------- */
                /* MEDIA QUERY CONTROL ANCHO PANTALLAS */
/* -------------------------------------------------------------------------- */

 @media (max-width: 1279.98px){ /* Si el ancho de viewport es menor a 1279.98 se cumpliran los estilos */
                              body{
                                    width: 100%; /* define el ancho del wietport */
                                  }    
                        }

 @media (min-width: 1280px){ /* Si el ancho de viewport es mayor a 1280 se cumpliran los estilos */
                              body{
                                    width: 1280px; /* define el ancho del wietport */
                                    margin: 0 auto;
                                   }    
                        } 


/* --------------------------------------------------------------------- 
  CENTRADO NAVEGADORES SELECTOR UNIVERSAL
-----------------------------------------------------------------------  */	        

* { margin: 0; padding: 0; box-sizing: border-box; } /* Pone a 0 los espacios del navegador por defecto */


/* --------------------------------------------------------------------- 
  LAS FUENTES UTILIZADAS
-----------------------------------------------------------------------  */	

@font-face {
  font-family: 'brushscriptstd';
  src: url('../../fuente/brushscriptstd.ttf') format('truetype');}
 .fuente-brushscriptstd {font-family: 'brushscriptstd';}

@font-face {
  font-family: 'questrial';
  src: url('../../fuente/Questrial-Regular.ttf') format('truetype');}
 .fuente-questrial {font-family: 'questrial';}


@font-face {
  font-family: 'corporativa';
  src: url('../../fuente/EagleHorizonP.ttf') format('truetype');}
 .fuente-corporativa {font-family: 'corporativa';}



/* *********************************************************************************** */		
/* ******************* ESTILOS DE LA PÁGINA CABECERA ********************************* */	
/* ************************************************************************************ */  

/* --------------------------------------------
       CONTAINER DEL HEADER
----------------------------------------------- */

.cabecera-container {width: 100%;max-width: 1280px;margin: 0 auto; padding-left: 0%;padding-right: 0%;} /* Container del header cabecera */


/* -----------------------------------------------------------------------
    LA CABECERA TEXTILCORT, $TITULOCABECERA
--------------------------------------------------------------------------  */	
/* CABECERA AJUSTES GENERALES */
.div-cabecera{background-color:#333;}
.cabecera-row {display: flex;justify-content: space-between; /* separa columnas en pantallas grandes */align-items: center;
  flex-wrap: wrap; /* permite que se muevan en móviles */width: 100%;max-width: 1280px;margin: 0 auto;padding:0;}
.cabecera-col {flex: 1 1 50%; /* ocupa la mitad del ancho en pantallas grandes */box-sizing: border-box;padding: 2%;color:#fff}
.titulo-textilcort {font-size: 2em;line-height: 1;letter-spacing: 3px;color: #fff;text-align: left;padding-left:6%;margin:0;font-family: 'corporativa', sans-serif;}
.texto-textilcort {font-size: 1.4em;line-height: 1.1;color: #fff;font-weight: 500;text-align: right; position: relative;top: 20px;font-family: 'questrial';}

/* CABECERA AJUSTES PARA MÓVIL */
@media (max-width: 767.98px) {
.cabecera-row {flex-direction: column;align-items: center;text-align: center;gap: 0.3em; /* controla la separación entre las dos líneas */}
.cabecera-col {flex: 1 1 100%;padding: 0;color:#fff}
.titulo-textilcort {font-size: 2em;line-height: 1.1; /* más compacto */margin-top:1rem;padding: 0;}
.texto-textilcort {font-size: 1.4em;line-height: 1.1; margin:0;padding-bottom: 8%;text-align: center;}}

/* CABECERA REDUCIDA PAGINAS TEXTILES AJUSTES GENERALES */
.div-cabecerared{background-color:#fff;}
.cabecerared-row {width: 100%;max-width: 1280px;}
.cabecerared-col {padding: 1% 0 0 0%;} 
.cabecerared-col p {color:#666;font-size: 2.2em;font-family: 'corporativa', sans-serif; padding:0 0 0 5%;line-height: 1} 
.cabecerared-col span {color:#666;font-family: 'questrial';padding:0 0 0 5%;} 

/* -----------------------------------------------------------------------
    FOTO BANNER
--------------------------------------------------------------------------  */
/* FOTO BANNER */	
.foto-banner{width: 100%;height: auto;max-height: 550px;object-fit: cover;} /* foto entera sin recortes pero máxima altura 550px */
@media (max-width: 767.98px) {.foto-banner {height:auto;object-fit: contain;}}/* auto altura la foto cabecera del banner en móvile sin recortes */


/* -----------------------------------------------------------------------
    BAJO CABECERA CONTACTOS Y BOTONES
--------------------------------------------------------------------------  */	
/* BAJO CABECERA AJUSTES GENERALES */
.div-bajocabecera{background-color:#00667f; text-align: center;color:#fff;padding: 1rem;;}
.div-bajocabecera h3{margin-bottom:3px;font-size:1.4em;font-weight: 700;}
.div-contacto{display: flex;/*convierte el elemento en un contenedor*/ flex-wrap: wrap;/*permite que los elementos hijos hagan salto de línea si no caben en la misma fila*/justify-content: center;/*alinea horizontalmente los hijos al centro dentro del contenedor flex*/margin-bottom:1rem;font-size: 1.25rem;gap: 1rem; /*añade un espacio uniforme entre hijos de 1rem*/ }
/* En pantallas pequeñas, reducir el espacio */
@media (max-width: 576px) {.div-contacto {gap: 0.3rem; /* mucho más compacto */font-size: 1.1rem; /* opcional: tipografía más pequeña */}}
.div-contacto a{text-decoration: none;color:#fff}
.div-botones{display: flex;justify-content: center;gap: 2rem;margin-bottom:1rem;}
.botones{font-size:1em; padding:0.10rem 0.5rem; border-radius:0;} 

/* --------------------------------------------------------------------- */
                /* BOTON WHATSAPP */
/* -------------------------------------------------------------------------- */
.fab {padding: 20px; font-size: 30px; width: 30px; text-align: center; text-decoration: none; margin: 5px 2px;
border-radius: 50%;}
.fab:hover { opacity: 0.7;}
.fa-whatsapp { background: #25D366; color: white;}
/* -------------------------------------------------------------------------------------- */





/* ************************************************************************************** */		
/* *************************** ESTILOS DE LAS PÁGINAS *********************************** */	
/* ************************************************************************************** */  

/* -------------------------------------------
       ESTILOS DEL BODY
---------------------------------------------- */
body {font-family: 'Questrial', sans-serif;}


/* ----------------------------------------------
       CONTAINER DEL MAIN CENTRO PAGINA
------------------------------------------------- */
.main-container {width: 100%;max-width: 1280px;margin: 0 auto;padding-left: 5%;padding-right: 5%;}
/* Pequeño margen en móviles */
@media (max-width: 767.98px) {
.main-container {padding-left: 5%;padding-right: 5%;}}


/* -----------------------------------------------
          TITULO DE LA PÁGINA H1 SPAN Y P 
------------------------------------------------- */
/* AJUSTES GENERALES */
.div-titulo{margin-top:5%;}
.titulo-pagina {text-align: center;color: #00667f;font-family: 'corporativa', sans-serif;}
.titulo-pagina h1 {font-size: 2.2em !important;}
.titulo-pagina span {font-size: 0.8em;color: #0093a0;font-family: 'questrial';font-weight: 700;display: inline-block;margin-left: 1em;line-height: 1.4;}
.titulo-pagina p {font-size: 1.2em;color:#00667f;font-family: 'questrial';display: inline-block;line-height: 1.4;padding:0 5%}
.titulo-pagina a {font-size: 1.2em;color:#00b0c0;}
/* AJUSTES PARA MÓVIL */
@media (max-width: 767.98px) {
.div-titulo{margin-top:5%;padding:0 2px;}   
.titulo-pagina h1 {font-size: 5em;line-height: 1.3;margin-top:10%}
.titulo-pagina span {display: block; font-size: 0.8em;margin-left: 0;margin-top: 0.4em;text-align: center;}
.titulo-pagina p {display: block;font-size: 1.1em;margin-left: 0;margin-top: 0.4em;text-align: center;line-height: 1.4;}}
/* ------------------------------------------------------------------------------------------------------------------- */



/* --------------------------------------------------------------------- 
        SECCIONES SEPARADORAS Y CON FONDO DEGRADADO SI LOS HAY
-------------------------------------------------------------------------- */
/* ESTE SEPARADOR ESTÁ EN LA INDEX Y SEPARA EL ARTICULO DE ENTRADA DEL CONTENIDO CON PAGINA PRINCIPAL, FABRICANTES DESTACADOS */
.separador-minimal {border: 1px #00667f solid;border-radius: 8px;  padding: 10px; text-align: center; color: #fff; margin: 5% 25%;}
@media (max-width: 767.98px) {.separador-minimal {padding: 10px; margin: 5% 5%; }}
.separador-minimal h2 {background: linear-gradient(135deg, #00667f, #0094a8);border-radius: 8px; font-weight: 500;font-size: 1.5em; margin-bottom: 0px; letter-spacing: 2px;}
.separador-minimal p { font-size: 1.2em;color:#00667f;font-weight: 500; margin:0; padding:0;}

/* ESTE SEPARADOR DE AVISOS ESTÁ EN RIELES SMART ELECTRIC. (Estos sistemas solo pueden ser montados por técnicos profesionales.
Solo los servimos en Valencia con nuestra medición e instalación, no los enviamos.)  */
.texto-avisos {background-color:#73A8BD;color: #fff;border-left: 5px solid #00667f;padding: 0.5em;font-weight: bold;text-align: center;border-radius: 8px;box-shadow: 0 2px 6px rgba(0,0,0,0.1);font-size:1rem; margin-top:3%}
@media (max-width: 767.98px) {.texto-avisos {font-size: 0.9rem }}

/* ESTE SEPARADOR DE FRASE DESTCADA ESTÁ EN ORFEO */
.frase-destacada {     
    width: 80%;                  /* ocupa 80% de la pantalla */
    max-width: 800px;            /* opcional, para no exceder un ancho grande */
    margin: 1em auto;            /* centra horizontalmente */
    background-color: #eee;   /* fondo solo del bloque */
    color: #00667f;
    font-weight: 500;
    font-size: 1.1em;
    border-left: 5px solid #00667f;
    border-radius: 8px;
    text-align: center;
    padding: 1em;                /* espacio interno */
    box-sizing: border-box;       }




/* -----------------------------------------------
        CONTENEDORES TITULO Y SECCIONES
------------------------------------------------- */
/* AJUSTES GENERALES */
.contenedor-tituloseccion{padding: 0}
.titulo-seccion {color: #00667f;font-size: 1.4em;border-bottom: 3px solid #00667f;display: inline-block;margin-top: 1rem;width: 100%;}
.titulo-seccion span {font-size: 0.8em;font-weight: 400;color: #00667f;display: inline-block;margin-left: 0.5em;}
/* AJUSTES PARA MÓVIL */
@media (max-width: 767.98px) {
.contenedor-tituloseccion{padding: 0 4%}
.titulo-seccion {background-color:#00667f;color:#fff;font-size: 1.5em;text-align: center;padding:3%;font-weight: 700;}
.titulo-seccion span {color:#fff;display: block;margin-left: 0;margin-top: 0.3em;font-size: 0.8em;text-align: center;}}


/* ***************************************************************
          SECCION BLOQUES CENTRALES ESTILOS COMUNES
****************************************************************** */
/* ---------------------------------------------------- 
   ALTURA FOTO FIJA EN TODO (Galería fotos)
-------------------------------------------------------  */
.tamano-foto{width: 100%;height: 275px;object-fit: cover; /* recorta sin deformar */}
/* Móviles y pantallas pequeñas */
@media (max-width: 767.98px){
.tamano-foto{height: 275px;display: block;object-fit: contain;/*no recorta en móviles*/}}

/* ---------------------------------------------------- 
   ALTURA FOTO 275 FIJA GRANDES Y AUTO MÓVILES
-------------------------------------------------------  */
.tamano-fotofija{width: 100%;height: 275px;object-fit: cover; /* recorta sin deformar */}
/* Móviles y pantallas pequeñas */
@media (max-width: 767.98px){
.tamano-fotofija{height: auto;display: block;object-fit: contain;/*no recorta en móviles*/}}

/* ---------------------------------------------------- 
   ALTURA FOTO AUTO TODAS
------------------------------------------------------  */
.tamano-fotoauto {width: 100%; height: auto;object-fit: cover;/* recorta sin deformar */}
/* Móviles y pantallas pequeñas */
@media (max-width: 767.98px){.tamano-fotoauto {height: auto;display: block; object-fit: contain;/* no recorta en móviles */ }}   


/* ---------------------------------------------------- 
   TAMAÑO TEXTOS BAJO FOTOS 
------------------------------------------------------  */
.estilos-textos h2{font-size: 1.6em;text-align: left;color: #00667f;font-weight: 600;margin:2% 0 0 0}
.estilos-textos h3{font-size: 1.2em;text-align: left;color: #00667f;font-weight: 600;margin:2% 0 0 0}
.estilos-textos p{font-size: 1em;text-align: left;color: #666;margin-top:1%}
/* Móviles y pantallas pequeñas */
@media (max-width: 767.98px){
.estilos-textos h3{font-size: 1.3em;margin-top:4%}
.estilos-textos p {font-size: 1.1em;margin-top:0}}


/* ---------------------------------------------------- 
   BOTON EXPLORAR Y SOLICITAR PRESUPUESTO
------------------------------------------------------  */
.div-solicitarpres{text-align: center;} /* Solo para solicitar presupuesto*/
.enlace-boton { display:inline-block; padding:2px 10px; border-radius:5px; text-decoration:none; color:#00667f;background-color:#eee; border:1px #00667f solid; font-size: 1em; transition: transform 0.2s ease-in-out;}
.enlace-boton:hover {transform: scale(1.1); color:#00667f; /* aumenta tamaño texto enlace boton un 10% */}





/* -----------------------------------------------------------------------------------
           ESTILOS DEL PIÉ DE PÁGINA
--------------------------------------------------------------------------------------*/

/* ESTILOS DE LA SECCIÓN NUESTROS SERVICIOS */
.titulo-destacado h3{color: #00b0c0;font-size:1.6rem;font-weight: 600;}
.titulo-destacado h4{color: #00b0c0;font-size:1.2rem;font-weight: 500;}
.titulo-destacado p{color: #666;font-size:1rem;}
.titulo-destacado span{color: #00b0c0;font-size:1rem;}
.servicios h4{color: #00b0c0;font-size:1.2rem;font-weight: 500;}
.servicios p{color: #666;font-size:0.9rem;}
.consultenos{color: #00b0c0;font-size:1.2rem;}
.datos-empresa{color: #fff;}
.datos-empresa h3{font-family: 'corporativa';font-size:2rem;}
.datos-empresa h5{font-size:1.6rem;}
.datos-empresa p{font-size:1.1rem;}

.servicio-card {
    background-color: #f8f9fa;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.servicio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* ESTILOS DEL PIE DE PÁGINA DATOS Y CONTACTO EMPRESA */
.pie-fade {
    position: relative;
    min-height: 300px;
    color: white;
    background: linear-gradient(to right, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0) 100%), 
                url('/cargas/fotos/fotos-index-nuevo/foto-presupuestos-generica-cortinas-textilcort.jpg') center center / cover no-repeat;
    display: flex;
    align-items: center;
}

.hr-piepagina4 {
    border: none;
    height: 2px;
    background: #00b0c0;
    width: 60px;
    margin: 0.5rem 0;
}

a.text-white:hover {
    text-decoration: underline;
}

/* -----------------------------------------------------------------------------------
           COLORES Y FONDOS A MANTENER
--------------------------------------------------------------------------------------*/

/* ------------------------------------------------------ */
 /* FONDOS COLOR */
/* ------------------------------------------------------ */
/* Fondo Color */
.fondo-blanco{background-color:#fff}
.fondo-casiblanco{background-color:#eee}
.fondo-casinegro{background-color:#333}
.fondo-negro{background-color:#222}
.fondo-naranja{background-color:#f70}
.fondo-naranjaos{background-color:#dc5503}
.fondo-azulturquesapalo{background-color:#00667f}
.fondo-azul2{background-color:#00b0c0}



/* --------------------------------------------------- */
 /* TEXTO COLORES */
/* ---------------------------------------------------- */
/* Texto Colores */
.color-blanco{color:#fff}
.color-negro{color:#000}
.color-corporativo{color:#f70}
.color-azulturquesapalo{color:#00667f}
.color-azul2{color:#00b0c0}
.color-gris{color:#666}

/* -----------------------------------------------------------------------------------
           A PARTIR DE AQUI RETIRAR LOS ESTILOS
           CUANDO ACABE DE RETOCAR TODAS LA PÁGINAS
--------------------------------------------------------------------------------------*/





/* *************************
    HR SEPARADORES
**************************  */
/* NOTA HR no coge height la altura si no es en style en la misma pagina así que empleo este border que da misma apariencia */ 
/* Bootstrap 5 mantiene opacidad en etiqueta hr, hay que poner opacity:1 para quitarla */ 
.hr-cabecera1{height:2px;background:#f70;margin:0%;opacity: 1;} /* Cabecera*/
.hr-cabecera2{background-color: #333;opacity:1;padding:0.5% 0 0 0; margin:0 0 0 0;box-shadow: 0 2px 4px rgba(0,0,0,0.5);border: none;
  height: 3px;background: linear-gradient(to right, #555, #333, #555); margin: 0;} /* Cabecera*/
.hr-principal{color:#d70;opacity:1;width:60%;border: 2px dashed #d70;margin:0 20% 0 20%;padding:0;} /* Linea pricipal naranja 60% */
.hr-seccion{color:#00667f;opacity:1;width:60%;border: 2px dashed #00667f;margin:0 20% 0 20%;padding:0;} /* Linea secciones azul 60% */
.hr-seccion100{border: 0; /* elimina cualquier borde previo */border-top: 2px solid #00667f;margin: 0;padding: 0;opacity: 1;} 
.hr-articulo{background:#aaa;opacity:1;width:60%; height:1px; margin:0 20% 0 20%} /* Linea articulos principal*/
.hr-separador1{background:#333;opacity:1;width:80%; height:1px;margin:0 10% } /* Pertenece al pié de página*/
.hr-piepaginaultimo{border: none;/* Quita estilos por defecto */border-top: 2px solid #d70;opacity: 1;margin:0}
.hr-piepagina1{background:#00667f;opacity:1;width:80%; height:1px; margin:1% 10% 1% 10%} 
.hr-piepagina2{background-color: #333;opacity:1;padding:1% 0 0 0; margin:0 0 0 0;} */
.hr-piepagina3{background-color: #333;opacity:1;padding:0.2% 0 0 0; margin:0;} 
 

/* *************************
    PARRAFOS 
**************************  */
.p-ancho{text-align:center;font-size:1em;color:#666;padding:0 8% 0 8%;margin:0;}/* Parrafos de ancho total pantalla */
.p-anchoazul{text-align:center;font-size:1em;color:#00667f;padding:0 8% 0 8%;margin:0;}/* Parrafos de ancho total pantalla */
.p-estrecho{text-align:center;font-size:1em;color:#666;padding:0 2% 0 2%;margin:0;}/* Parrafos de ancho no toda la pantalla */

/* ---------------------------------------------------------- */
/*  ALINEACION Y CENTRADOS GENERALES */
/* ----------------------------------------------------------------- */  
.row{padding:0;margin:0}
.row-alturas{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-wrap:wrap;text-align:center}
.row-alturas>[class*='col-']{display:flex;flex-direction:column}
.centradofotos{ width: 50%;display: block;margin-left: auto;margin-right: auto;}
.centrado{ display: block; margin: 0 auto}/* Alineacion centro exacto de botones y otros */
.der60{ display:block;float:right;margin-left:60%;margin-right: auto}/* Alineacion derecha de foto width 40%*/
.izq60{ display:block;float:left;margin-left: auto;margin-right:60%}/* Alineacion izquierda de foto width 40%*/
.texto-izq{ text-align:left}
.texto-cen{ text-align:center}
.texto-der{ text-align:right}
.italic{ font-style:italic}
.negrita{font-weight:bold}




/* -------------------------------------------------------------------------------------- */		
/* ------------ ENLACES BOTONES Y LINK--------- */	
/* ----------------------------------------------------------------------------------------- */  
/* ENLACES BOTON CABECERA donde estamos y quienes somos */
.enlace-cabecera {padding:0 1% 0 1%; font-size:0.9em; border-width:0.1em; border-radius:6px; border-color:#aaa;}



/* ENLACES DEL PIE DE PÁGINA presupuestos Y toma de medidas */
.enlace-piepagina { display:inline-block; text-decoration:none; font-weight:bold; color:#fff; font-size: 1em; transition: transform 0.2s ease-in-out;}
.enlace-piepagina:hover {transform: scale(1.1); color:#fff; /* aumenta tamaño texto enlace boton un 10% */}

.decoration-none { text-decoration:none;} 


/* ------------------------------------------------------ */
 /* IMAGENES Y VIDEOS TAMAÑOS Y RESPONSIVE*/
/* ------------------------------------------------------ */













/* --------------------------------------------------- */
 /* BORDES */
/* ---------------------------------------------------- */
.borde1-azul{border:1px #00667f solid}



/* --------------------------------------------------- */
 /* TAMAÑO TEXTOS */
/* ---------------------------------------------------- */

/* Texto Tamaños */
.trescientos{font-size:3em}
.doscientostreinta{font-size:2.3em}
.doscientos{font-size:2em}
.cientosetenta{font-size:1.7em}
.cientosesenta{font-size:1.6em}
.cientocuartenta{font-size:1.4em}
.cientotreinta{font-size:1.3em}
.cientoveinte{font-size:1.2em}
.cientodiez{font-size:1.1em}
.cien{font-size:1em}
.noventa{font-size:0.9em}
.ochentaycinco{font-size:0.85em}
.ochenta{font-size:0.8em}
.setentaycinco{font-size:0.75em}
.setenta{font-size:0.7em}
.sesenta{font-size:0.6em}


/* --------------------------------------------------- */
 /* TAMAÑO TITULOS Y PARRAFOS */
/* ---------------------------------------------------- */
.texto-titulogrande {font-size: 2.2em;} /* Tamaño general titulo grande */
@media (max-width: 767.98px) {.texto-titulogrande {font-size: 2rem }}

.texto-titulomedio {font-size: 1.8em; /* tamaño por defecto */}
@media (max-width: 767.98px) {.texto-titulogrande {font-size: 1.2em;} /* Tamaño reducido a móviles */}

.texto-titulomedio2 {font-size: 1.6em; /* tamaño por defecto */}
@media (max-width: 767.98px) {.texto-titulointroduccion {font-size: 1em;} /* Tamaño reducido a móviles */} 

.texto-titulointroduccion {font-size: 1.3em; /* tamaño por defecto */}
@media (max-width: 767.98px) {.texto-titulointroduccion {font-size: 1.1em;} /* Tamaño reducido a móviles */} 

.texto-parrafointroduccion {font-size: 1.1em; /* tamaño por defecto */}
@media (max-width: 767.98px) {.texto-parrafointroduccion {font-size: 1em;} /* Tamaño reducido a móviles */}  

.texto-titulos {font-size: 1.2em; /* tamaño por defecto */}
@media (max-width: 767.98px) {.texto-titulos {font-size: 1.1em;} /* Tamaño reducido a móviles */}

.texto-titulos2 {font-size: 1.1em; /* tamaño por defecto */}
@media (max-width: 767.98px) {.texto-titulos2 {font-size: 1em;} /* Tamaño reducido a móviles */}

.texto-titulosparrafos {font-size: 1.1em; /* tamaño por defecto */}
@media (max-width: 767.98px) {.texto-titulosparrafos {font-size: 1.1em;} /* Tamaño reducido a móviles */}

.texto-parrafosgrande {font-size: 1em; /* tamaño por defecto */}
@media (max-width: 767.98px) {.texto-parrafos {font-size: 1.2em;} /* Tamaño reducido a móviles */}

.texto-parrafos {font-size: 0.9em; /* tamaño por defecto */}
@media (max-width: 767.98px) {.texto-parrafos {font-size: 1em;} /* Tamaño reducido a móviles */}


 

/* -------------------------------------------------------------------------------------------- */
                               /* ANCHOS, MARGENES Y ESPACIOS */
/* ------------------------------------------------------------------------------------------------ */


/*Estilos padding */
.pad020020{padding:0 20%}
.pad00100{padding:0 10%}
.pad08{padding:0 8%}
.pad0505{padding:0 5%}
.pad0404{padding:0 4%}
.pad0303{padding:0 3%}
.pad0202{padding:0 2%}
.pad0101{padding:0 1%}
.pad2020{padding:2% 0}
.pad0020{padding:0 0 2% 0}
.pad0010{padding:0 0 1% 0}
.pad2525{padding:2% 5%}
.pad1505{padding:1% 5% 0 5%}
.pad1010{padding:1% 0}
.padlogotitulo{padding:3% 0 0 4%}
.padbajologotitulo{padding:0 0 0 5%}
.padmosaicos{padding:2% 0 2% 2%}
.espaciobloques{padding:0 2% 2% 2%}
.padalto{padding:1% 2% 0 2%}
.padderecha{padding:0 1% 0 0}
.padizquierda{padding:0 0 0 1%}
.padbajo{padding:0 2% 1% 2%}
.pad2{padding:2%}
.pad1{padding:1%}
.pad03{padding:0.3%}
.padtres{padding:0.3%}
.cerotres{padding:0 0.3% 0 0.3%}
.pad0000{padding:0}
.pad0{padding:0}

/*Estilos margin */
.margen0{margin:0}
.margen1000{margin:1% 0 0 0}
.margen2000{margin:2% 0 0 0}
.margen3000{margin:3% 0 0 0}
.margen4000{margin:4% 0 0 0}
.margen5000{margin:5% 0 0 0}
.margen0010{margin:0 0 1% 0}
.margen0020{margin:0 0 2% 0}
.margen0030{margin:0 0 3% 0}
.margen0040{margin:0 0 4% 0}
.margen0050{margin:0 0 5% 0}
.margen1010{margin:1% 0 1% 0}
.margen2020{margin:2% 0 2% 0}
.margen3030{margin:3% 0 3% 0}
.margen4040{margin:4% 0 4% 0}
.margen5050{margin:5% 0 5% 0}

/* -------------------------------------------------------------------------------------------- */
                                /* MENU OCULTO */
/* -------------------------------------------------------------------------------------------------- */
/*ESTILOS ARRIBA MENU CORTINAS*/
.fondomenu{background-color: #00667f;}
.textomenu{background-color: #00667f;color:#fff;font-size:1.6em;font-weight: 700;}

/* Botón hamburguesa transparente con barras naranjas */
.custom-toggler {
  border: none;
}

.custom-toggler .navbar-toggler-icon {
  background-image: none;
  position: relative;
  width: 30px;/* Ancho de las barras hamburguesa */
  height: 3px;/* Alto de las barras hamburguesa */
  background-color: #f70;
  box-shadow: 0 10px 0 0 #f70, 0 20px 0 0 #f70; /* Espaciado de las  3 barras */
}

/* Ajustes generales */

.offcanvas-body{background-color: #EEE;
}


.navbar-dark .navbar-brand {
  color: #fff;
  font-weight: bold;
}

.navbar-dark .navbar-toggler {
  border: none;
}

.navbar-toggler { /* Por defecto Navar en bootstrap trae un recuadro redondeado que encierra la hamburguesa, lo quito */
    background-color: transparent !important; /* Quita el fondo */
    border: none !important;                  /* Quita el borde */
    border-radius: 0 !important;             /* Quita las esquinas redondeadas */
    padding: 0;                               /* Ajusta el padding si quieres */
}
.navbar-toggler:focus {/* Quita el residuo que queda de foco del anterior navbar-toggler al accionar y cerrar el menú */
    outline: none !important;       /* Quita el halo de foco */
    box-shadow: none !important;    /* Quita la sombra que aparece en algunos navegadores */
}

/* Estilo del menú lateral */
.offcanvas-start {
  width: 250px; /* ancho menú lateral */
}

.separador-menu {
  font-weight: 600;
  font-size: 1em;
  color:#00667f;          
  margin: 15px 0 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px solid #00667f; /* línea fina debajo */
  padding-bottom: 3px;
}

/* ELEMENTOS DEL MENU */
.offcanvas-body .nav-link {
  padding: 5px; /* espacios en altura de elementos */
  border-radius: 5px;
  transition: background 0.3s;
  color:#666;
  font-size:1em;
  font-weight: 500;
}

/* ELEMENTOS DEL MENU AL PASO DEL RATÓM */
.offcanvas-body .nav-link:hover {
  font-size:1.1em;
  color: #00667f;
  font-weight: 600;
  background-color: #8DA9B3; 
  color: #fff;           
  text-decoration: none;
  padding: 2px 10px;
}

/* Submenú */
.dropdown-menu {
  background-color: #fff;
}

.dropdown-menu .dropdown-item {
  color: #fff;
}

.dropdown-menu .dropdown-item:hover {
  background-color: #00667f;
}

/* estilos submenu */
.collapse .nav-link {
  padding-left: 1.5rem;   /* Espacio a la izquierda del submenú */
  font-size: 0.9em;       /* Tamaño un poco más pequeño */
  color:#00667f;
}

/* Cambia estilos submenu al paso ratón */
.collapse .nav-link:hover {
  background-color: #8DA9B3; 
  color: #fff;            
  text-decoration: none;
  padding: 2px 10px;
}

/* Flechitas de los submenús */
.nav-link[aria-expanded="true"]::after {
  content: "▲";
  float: right;
  font-size: 0.7em;
  margin-left: 5px;
}
.nav-link[aria-expanded="false"]::after {
  content: "▼";
  float: right;
  font-size: 0.7em;
  margin-left: 5px;
}