/* -------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------*/
/* ------------------------   ESTILOS GLOBALES    --------------------------*/
/* -------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------*/

:root {/* LLAMADAS DE LA WEB */
/* Paleta de colores de esta web */
    --AzulWeb: #5691eb;
    --NaranjaGrafico: #efa25d;
    --VioletaApp: #cf6dbe;
    --Amarillo3D: #e1ce3e;
    --VerdeVideo: #5dc561;
    --RojoFotografia: #ef5f5f;
    --RosaRedaccion: #ffb0df;
    --GrisPlanificacion: #ababab;
    --Negro: #414141;/*y NegroInvestigacion*/
    --Blanco: #FFF;
    --GrisFondo: #f0edff;
/* Tipografias de esta web */
    --Inter: "Inter", sans-serif;
}


body {/*DECORACIÓN BASE*/
    background: var(--GrisFondo);
    font-family: var(--Inter);/*tipografia de los textos de base*/
    line-height: 1.7;/*interlineado de los textos en general*/
}


/* COLOR DE LETRA Y FONDO PA CUANDO SE SEÑALE EL TEXTO*/
::-moz-selection {background: var(--AzulWeb); color: #f5aa68; text-shadow: none}
::selection {background: var(--AzulWeb); color: #f5aa68; text-shadow: none}


/*BARRA DE DESPLAZAMIENTO PERSONALIZADA*/
body::-webkit-scrollbar {width: 15px}/*Tamaño de la barra*/
body::-webkit-scrollbar-track {background: var(--GrisFondo)}/*Fondo de la barra */
body::-webkit-scrollbar-thumb {background: var(--AzulWeb); border-radius: 10px; border: 1px solid #f0edff}/*Color barra*/
body::-webkit-scrollbar-thumb:hover {background: var(--NaranjaGrafico)}/*Color barra en hover*/


/*DECORACIÓN BÁSICA DE TEXTOS*/
h1, h2, h3, h4 {/*Decoracion Títulos*/
    color: var(--Negro);
    line-height: 1.3;/*pequeño interlineado en títulos (x si caen de renglon)*/
}

/*Todos los Párrafos*/
p {font-size: 1.8rem; font-weight: 400; color: var(--Negro); text-align: justify; margin-bottom: 1.6rem}

/*Todos los TITULARES de Sections (y se incluye su animación letra x letra)*/
.titular {text-align: center; font-size: 4.5rem; font-weight: 800; font-style: italic; color: var(--Negro); margin-bottom: 3rem}

    .palabra {display: inline-block; white-space: nowrap}
    .letra {display: inline-block; opacity: 0; transform: translateY(20px)}
    .letra.activa{animation: sube-letra 0.2s forwards}

@keyframes sube-letra {0% {opacity: 0; transform: translateY(20px)} 100% {opacity: 1; transform:translateY(0)}}


/*Reducir tamaño de los textos en Móvil*/
@media (max-width: 600px) {
    p {font-size: 1.6rem}
    .titular {font-size: 3.5rem}/*más grande no, qe no caben en Movil*/
}


/*CLASES PARA RECURRIR EL HTML*/
.contenedor {/*Contenedor de esta web*/
    width: 100%;/*ESTO FUERZA LA ANCHURA EN CONFLICTOS CON DISPLAY:FLEX*/
    margin: 0 auto;/*centrada*/
    padding: 0 2rem; /*y con padding a los lados pal movil*/
    /*background-color: rgba(0, 111, 255, 0.4);*/
}
.cien {max-width: 100rem/*1.000px de ancho, pa textos pequeños*/}
.cientoveinte {max-width: 120rem/*1.200px de ancho, pa textos grandes o cajas con elementos*/}
.cientotreinta {max-width: 130rem/*1.300px de ancho, pa cajas especiales*/}

.contenedor-color {padding: 8rem 0}/*Si va un color al 100%, qe tenga pading*/

.top20 {margin-top: 20rem}/*Margen de arriba para poner en cada Section de la web*/
@media (max-width: 600px) {.top20 {margin-top: 12rem}}/*pero en Móvil se reduce un poco*/

.top13 {margin-top: 13rem}/*Margen de arriba para poner "Mis 10 Fases"*/
@media (max-width: 600px) {.top13 {margin-top: 7rem}}/*pero en Móvil se reduce un poco*/

.top-cabecera-grande {margin-top: 38rem}/*Margen de arriba pa cuadrar con Cabeceras*/
.top-cabecera {margin-top: 20rem}
@media (max-width: 600px) {/*pero en Móvil se reduce un poco*/
    .top-cabecera-grande {margin-top: 22rem}
    .top-cabecera {margin-top: 10rem}
}

.cursiva {font-style: italic}
.subrayado {text-decoration: underline}
.negrita {font-weight: bold}
.centro {text-align: center}


/*ESTILO DE LOS BOTONES DE LA WEB*/
/*1º estructura del botón*/
    .boton {font-weight: 500; text-align: center; padding: 0.6rem 2rem; border-radius: 10px;
    display: block; width: 100%; /*que ocupe el 100%*/
    font-size: 1.8rem; font-weight: 400; color: var(--Blanco);/*estilo del texto*/
    background: linear-gradient(172deg, rgb(71 122 255), rgb(255 154 62));/*color*/
        background-size: 140% 150%; background-position: left center;
        transition: background-position 0.3s ease
    }

    .boton:hover {background-position: right center}/*color del hover*/

    @media (max-width: 600px) {.boton {font-size: 1.6rem}}/*+ peqeño en movil*/

/*2º o alinear botón al centro o la derecha (.boton debe estar envuelto por este div:*/
.padre-btn-centro {display: flex; justify-content: center}
.padre-btn-derecha {display: flex; justify-content: flex-end}



/* TODOS LOS ELEMENTOS QE LES HAGAN "HOVER" LO HACEN RÁPIDO PERO CON TRANSICIÓN */
.transicion {transition: all 0.2s ease}



/*LOS ICONOS DE MIS SERVICIOS SIEMPRE VAN A IR ASOCIADOS A UN COLOR*/
.icono.web svg {fill: var(--AzulWeb)}
.icono.web p {color: var(--AzulWeb)}
.icono.app svg {fill: var(--VioletaApp)}
.icono.app p {color: var(--VioletaApp)}
.icono.grafico svg {fill: var(--NaranjaGrafico)}
.icono.grafico p {color: var(--NaranjaGrafico)}
.icono.tresd svg {fill: var(--Amarillo3D)}
.icono.tresd p {color: var(--Amarillo3D)}
.icono.video svg {fill: var(--VerdeVideo)}
.icono.video p {color: var(--VerdeVideo)}
.icono.fotografia svg {fill: var(--RojoFotografia)}
.icono.fotografia p {color: var(--RojoFotografia)}
.icono.planificacion svg {fill: var(--GrisPlanificacion)}
.icono.planificacion p {color: var(--GrisPlanificacion)}
.icono.investigacion svg {fill: var(--Negro)}
.icono.investigacion p {color: var(--Negro)}
.icono.redaccion svg {fill: var(--RosaRedaccion)}
.icono.redaccion p {color: var(--RosaRedaccion)}



/* ENLACES AZULES CON HOVER NARANJA QUE ABRIRÁN PAGINAS o POP-UPS */
.enlace {font-size: 1.8rem; font-weight: 800; position: relative; cursor: pointer;
    background-image: -webkit-linear-gradient(left,#efa25d 50%,#5691eb 0);
    background-position: 100% 0; background-size: 200% 100%;
    -webkit-text-fill-color: transparent; -webkit-background-clip: text;
    -webkit-transition: background-position 1.5s cubic-bezier(.19,1,.22,1)!important;
    -moz-transition: background-position 1.5s cubic-bezier(.19,1,.22,1)!important;
    -o-transition: background-position 1.5s cubic-bezier(.19,1,.22,1)!important;
    transition: background-position 1.5s cubic-bezier(.19,1,.22,1)!important;
}
@media (max-width:  600px) {.enlace {font-size: 1.7rem}}

.enlace:hover {color: #efa25d; text-decoration: none; background-position: 0 0}

.enlace:after{content: ''; display: inline-block; width: 0; height: 2px; background-color: #efa25d;
position: absolute; bottom: 0; left: 0;
    -webkit-transition: width 1.5s cubic-bezier(.19,1,.22,1)!important;
    -moz-transition: width 1.5s cubic-bezier(.19,1,.22,1)!important;
    -o-transition: width 1.5s cubic-bezier(.19,1,.22,1)!important;
    transition: width 1.5s cubic-bezier(.19,1,.22,1)!important;
}

.enlace:hover:after {width: 100%}

/*color naranja más oscuro (x si el fondo ya es naranja)*/
.enlace.oscuro {background-image: -webkit-linear-gradient(left,#f1882c 50%,#5691eb 0)}
.enlace.oscuro:hover {color: #f1882c}
.enlace.oscuro:after{background-color: #f1882c}





/* ------------------ POP-UPS --------------------------*/
.caja-habito {margin: 20px}
.habito {padding: 15px 30px; font-size: 20px; cursor: pointer}
.popup-container {position: fixed; inset: 0; display:none; justify-content:center; align-items: center; padding: 1.5rem;
background: #568beff0; z-index: 999; display: none; opacity: 0; transition: opacity .5s ease; top: 0; left: 0; width: 100%; height: 100%;
opacity: 0;/*Pop-up oculto al principio*/}
.popup-container.show {display: flex}
.popup-content {position: relative; background: var(--GrisFondo); max-width: 500px; width: 90%; padding: 30px; border-radius: 10px}
#cerrar-popup {position: absolute; top: 0; right: 0; cursor: pointer}
#popup-texto {margin: 0.5rem; margin-top: 22px}/*espacio de la X*/
#popup-texto p {font-size: 1.75rem; line-height: 1.5}
html.no-scroll {overflow: hidden}/* Desactiva scroll con el pop-up visible*/
.popup-container.show {display: flex; opacity: 1}/*mostrar pop-up con transición*/
.popup-container.show .popup-content {transform: scale(1)} /*Restaura tamaño original*/

.popup-content {position: relative; background: var(--GrisFondo); max-width: 500px; width: 90%; border-radius: 10px;
text-align: center; border-radius: 10px; width: 600px;/*puedes qitar este ancho*/ padding: 15px;/*espacio del texto*/
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
transform: scale(0.8); /* Comienza ligeramente escalado */
transition: transform 0.3s ease;/*Transición*/
}

.popup-content button {border: none; cursor: pointer; margin: 5px; padding: 2px 9px; border-radius: 5px;
background: var(--AzulWeb); color: var(--Blanco); font-size: 16px; transition: background-color 0.2s ease;/*Transición*/}
.popup-content button:hover {background: var(--NaranjaGrafico)}

@media (max-width: 600px) {
    #popup-texto p {line-height: 1.4; font-size: 1.45rem}/*letra peqeñísima pa caber todo el Móvil*/
}
















/* -------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------*/
/* ----------------  ANIMACIÓN DE COLORES DE FONDO DE LA WEB  --------------------*/
/* -------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------*/
.bg {animation:slide 12s linear infinite alternate;
    background-image: linear-gradient(-60deg,
  #edd834 0%, #edd834 25%,
  #4a9cdc 25%, #4a9cdc 50%,
  #00bd06 50%, #00bd06 75%,
  #ef5f5f 75%, #ef5f5f 100%);
    bottom: 0; left: -50%; opacity: 0.06; position: fixed; right: -50%; top: 0; z-index: -2
}

.bg2 {animation-direction: alternate-reverse; animation-duration: 16s}

.bg3 {animation-duration: 20s}

@keyframes slide {
    0% {transform:translateX(-25%)}
    100% {transform:translateX(25%)}
}

@media (max-width: 500px) {/*En menos anchura va mas lento, así que aumento su velocidad*/
    .bg {animation-duration: 6s}
    .bg2 {animation-duration: 6s}
    .bg3 {animation-duration: 7.5s}
}














/* -------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------*/
/* -------------------------------  CABECERAS  -----------------------------------*/
/* -------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------*/

/* ------------------------ MENÚ PARA PC */
.fundaBotonX {display: none}

.color-cabecera::before {height: 20rem; content: "";
    position: absolute; z-index: 1; inset: 0; background: inherit;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0% 100%);
    background: linear-gradient(171deg, rgb(77 124 245 / 85%) 35%, rgb(255 150 55 / 85%) 90%),
    url(../img/portada-mini.jpg);
    background-position: center; background-repeat: no-repeat; background-size: cover;
}

.color-cabecera.grande-inicio::before {height: 85rem;
    content: ""; position: absolute; inset: 0; background: inherit;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
    background: linear-gradient(150deg, rgb(77 124 245 / 85%) 35%, rgb(255 150 55 / 85%) 100%), 
    url(../img/portada.jpg);
    background-position: center; background-repeat: no-repeat; background-size: cover;
}

.cabecera-menu {position: relative; z-index: 1}

/*Este estilo de iconos de redes sociales es igual en la "Cabecera" y en el "Pie de pag":*/
.redes {display: flex; justify-content: flex-end; gap: 1.3rem; margin-bottom: 0.8rem}
.redes svg {width: 2rem; height: auto; fill: white; transition: fill 0.2s ease}
.redes svg:hover {fill: var(--NaranjaGrafico)}
.redes .you svg {width: 2.3rem; margin-top: -1px}

.color-cabecera #menu {display: flex; flex-direction: column; margin-top: -3rem}
.color-cabecera.grande-inicio #menu {margin-top: 0}

#menu a {color: var(--Blanco); font-size: 1.7rem; font-weight: 400; transition: color 0.2s ease}
#menu .active {color: #ffb350 !important; font-weight: 600 !important; text-shadow: 1px 1px 4px rgb(98 103 255 / 90%)}
#menu a:hover {color: #ffb350; text-shadow: 1px 1px 4px rgb(98 103 255 / 90%)}

.cabecera-menu {display: flex; justify-content: space-between; padding: 2rem; padding-right: 2.5rem;
align-items: center; margin: 0 auto; max-width: 170rem /*hibrido entre 100% de pantalla y contenedor*/}

#menu ul {display: flex; gap: 4rem}

.color-cabecera .logo {margin-top: 2rem; z-index: 9999}
.color-cabecera.grande-inicio .logo {margin-top: 0}

.color-cabecera .logo a {font-size: 0}
.color-cabecera .logo svg {width: 15rem; height: auto; fill: var(--Blanco); transition: fill 0.2s ease}
.color-cabecera .logo svg:hover {fill: var(--NaranjaGrafico)}



/* ------------------------ MENÚ PARA TABLET/MÓVIL */
@media (max-width: 900px) {
    .color-cabecera .fundaBotonX {display: block; margin-top: -3rem; z-index: 999;}
    .color-cabecera.grande-inicio .fundaBotonX {display: block; margin-top: 0}
    
    .color-cabecera #menu {flex-direction: column-reverse; justify-content: flex-end; gap: 2rem; margin-top: 0}

    .cabecera-menu {padding: 20px; position: relative; z-index: 100}

    #botonX {display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
    width: 34px; height: 26px; cursor: pointer}

    #botonX span {height: 4px; background: var(--Blanco); border-radius: 10px; transition: 0.3s}
    #botonX span:nth-child(1) {width:100%}
    #botonX span:nth-child(2) {width:60%}
    #botonX span:nth-child(3) {width:20%}

    #botonX.active span:nth-child(1) {transform:translateY(11px) rotate(45deg)}
    #botonX.active span:nth-child(2) {width:100%; opacity:0}
    #botonX.active span:nth-child(3) {width:100%; transform:translateY(-11px) rotate(-45deg)}

    #menu {position: fixed; top: 0; right: 0; width: 100%; height:100vh;
        background: linear-gradient(150deg,
            rgb(77 124 245 / 90%) 35%,
            rgb(255 150 55 / 90%) 100%);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        transform:translateX(100%);
        transition:transform .35s ease;
        padding: 110px 25px 30px; z-index: 999; overflow-y: auto;
        border-top-left-radius:15px; border-bottom-left-radius:15px;
        box-sizing:border-box;
        clip-path: polygon(0 0, 100% 0, 100% 60%, 102% 102%);
    }

    #menu.ver {transform: translateX(0)}
    #menu ul {display: flex; flex-direction: column; gap: 15px; align-items: flex-end}
    #menu a {display: block; font-size: 1.6rem; color:var(--Blanco)}
}

















/* -------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------*/
/* -------------------  TEXTO DE LA CABECERA DE "Inicio"  ------------------------*/
/* -------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------*/
.texto-cabecera {text-align: center; margin-top: 13rem; position: relative; z-index: 99}

.texto-cabecera h1 {color: var(--Blanco); font-size: 7rem; font-weight: 800}
.texto-cabecera h1 span {display: block; font-size: 3.1rem; font-weight: 500; margin-top: -0.3rem}

.texto-cabecera p {display: flex; justify-content: center; align-items: center; gap: 0.5rem;
    font-size: 2.3rem; color: var(--Blanco); font-weight: 200; margin-top: 0.2rem;
}

.texto-cabecera p span {font-size: 2.2rem; font-weight: 300; text-shadow: 1px 1px 4px rgb(123 128 255 / 90%)}
.texto-cabecera p span:nth-child(1) {color: #92e5ff}
.texto-cabecera p span:nth-child(2) {color: #ffd198}
.texto-cabecera p span:nth-child(3) {color: #9aefb5}
.texto-cabecera p span:nth-child(4) {color: #ffa9a2}

/* ------------------------ MENOS TAMAÑO EN MÓVILES */
@media (max-width: 600px) {
    .color-cabecera::before {height: 16rem}
    .color-cabecera.grande-inicio::before {height: 55rem}
    .texto-cabecera {margin-top: 4rem}
    .color-cabecera .logo svg {width: 12rem}
    .texto-cabecera h1 {font-size: 4rem}
    .texto-cabecera h1 span {font-size: 1.8rem}
    .texto-cabecera p span {font-size: 1.7rem}
}














/* -------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------*/
/* --------- CUBO DE RUBIK DE MIS SERVICIOS EN LA CABECERA DE "Inicio" -----------*/
/* -------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------*/
.rubik {margin: 0 auto; margin-top: 3rem; position: relative; z-index: 1; width: 150px; height: 150px;
    transform-style: preserve-3d; animation: rotateGrid 15s linear infinite;/*Tiempo de rotar 3D*/
}

.rubik .pieza {position: absolute; width: 40px; height: 40px; border-radius: 6px;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    animation: Vuelan 4s ease-in-out infinite;/*Tiempo qe se separan los cuadrados*/
    animation-delay: calc((var(--x) + var(--y)) * 0.40s);/*Tiempo pa qe cuadren los cuadrados*/
}

@keyframes Vuelan {
    0%, 100% {transform: translate(calc(var(--x) * 0px - 50%), calc(var(--y) * 0px - 50%));}
    50% {transform: translate(calc(var(--x) * 50px - 50%), calc(var(--y) * 50px - 50%));}
}

/*Colores de las piezas*/
.pieza.uno {background: var(--VerdeVideo)}
.pieza.dos {background: #d762c3}
.pieza.tres {background: #ef9e56}
.pieza.cuatro {background: var(--Amarillo3D)}
.pieza.cinco {background: var(--Blanco)}
.pieza.seis {background: #f15757}
.pieza.siete {background: var(--RosaRedaccion)}
.pieza.ocho {background: var(--Negro)}
.pieza.nueve {background: var(--AzulWeb)}

/*Detalles de los iconos*/
.rubik .pieza svg {height: 2.5rem; margin: 0.7rem; fill: white; opacity: 0.5}
.rubik .pieza.uno svg {opacity: 0.65}
.rubik .pieza.cinco svg {fill: black; opacity: 0.25}
.rubik .pieza.dos svg {margin-left: 1.1rem}
.rubik .pieza.tres svg {margin-left: 0.9rem}
.rubik .pieza.cuatro svg {margin-left: 0.8rem; opacity: 0.65}
.rubik .pieza.siete svg {margin-left: 0.9rem; opacity: 0.65}
.rubik .pieza.ocho svg {margin-left: 0.8rem; opacity: 0.3}
.rubik .pieza.nueve svg {margin-left: 0.73rem}






























/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------  INICIO  -------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/

/* -------------------------------------------------------------------------------*/
/* --------------------------- 1. Introducción -----------------------------------*/
/* -------------------------------------------------------------------------------*/

/*--- Texto de eslogan con color de fondo que se mueve*/
.texto-intro h1 {font-size: 6rem; color: transparent; background-clip: text; line-height: 1.25;
    background: url('../img/colorido.jpg') no-repeat;
    background-size: 200%; /*Agranda la img pa tener margen pa desplazarla*/
    -webkit-background-clip: text; /*Para navegadores antiguos*/
    animation: MoverFondoTexto 5s linear infinite; /*Animación de mov de imagen*/
    max-width: 64rem; margin: 0 auto; margin-bottom: 4rem; font-weight: 800;
}

@keyframes MoverFondoTexto {
    from, to {background-position: 0 0} /*Comienza en esquina superior izquierda*/
    50% {background-position: 100% 0}/*Mueve la imagen completamente a la derecha*/
}

@media (max-width: 600px) {.texto-intro h1 {font-size: 4rem}}


/*--- iconos de mis servicios*/
.presentacion-iconos {display: flex; flex-wrap: wrap; justify-content: center; margin-top: 3rem; gap: 3.9rem;}
.presentacion-iconos .icono {display: flex; gap: 0.5rem; align-items: center}
.presentacion-iconos .icono.grafico {gap: 0}
.presentacion-iconos .icono svg {height: 6.5rem}
.presentacion-iconos .icono.secundario svg {height: 5.5rem}
.presentacion-iconos .icono p {font-size: 2.2rem; font-weight: 800; margin-top: 11px}

@media (max-width:  600px) {
    .presentacion-iconos {row-gap: 1.5rem}
    .presentacion-iconos .icono svg {height: 5rem}
    .presentacion-iconos .icono.secundario svg {height: 4rem}
    .presentacion-iconos .icono p {font-size: 2rem}
    .presentacion-iconos .icono.secundario p {font-size: 1.8rem}
}







/* -------------------------------------------------------------------------------*/
/* ----------------------------- 2. Adjetivos ------------------------------------*/
/* -------------------------------------------------------------------------------*/
.linea-superior, .linea-inferior {display: block; width: 100%; position: relative; z-index: 2; fill: var(--NaranjaGrafico);
height: 15rem/*esto acentúa más la curva*/}

.banda-naranja {position: relative; z-index: 2; background: var(--NaranjaGrafico); padding: 2rem; padding-top: 4rem}

.adjetivos picture img {position: relative; z-index: 1; display: block; width: 100%; margin-top: -15rem}

.adjetivos .banda-naranja p {text-align: center; font-size: 3rem; font-weight: 800}
.adjetivos .banda-naranja p a {font-size: 3.2rem}
.adjetivos .banda-naranja span {font-size: 3rem; font-weight: 800; color: var(--Negro)}

/*CURSOR PARPADEANTE*/
.escribiendo span::after {content: ""; position: absolute; width: 0.3rem; height: 4rem;
    margin-top: 5px; margin-left: 3px; opacity: 0; /* Oculto por defecto */
    animation: parpadeo 1s step-end infinite;
}

.escribiendo span.con-cursor::after {opacity: 1}

@keyframes parpadeo {/*la animación */
    from, to {background: transparent}
    50% {background: gray}
}

.escribiendo {display: inline-block; text-align: left; position: relative; min-width: 13ch /*según la palabra más larga*/}


/*Reducción de todo en Móvil*/
@media (max-width: 600px) {
    .adjetivos .banda-naranja p, .adjetivos .banda-naranja p a, .adjetivos .banda-naranja span {font-size: 2.5rem}
    .adjetivos .escribiendo span::after {height: 3.5rem; margin-top: 2px}
    .linea-superior, .linea-inferior {height: 10rem}
    .adjetivos picture img {margin-top: -10rem}

}







/* -------------------------------------------------------------------------------*/
/* ------------------------ 3. Todos mis Proyectos -------------------------------*/
/* -------------------------------------------------------------------------------*/
.banners-proyectos-inicio {margin-top: 3rem}

.banner {width: 100%; display: flex; align-items: center; position: relative; overflow: hidden; margin-bottom: 2rem}

.banner img {width: auto !important; max-width: none !important; z-index: -1; position: relative}

.banners-internos {display: flex; position: relative}

.banner .bloque {position: relative; display: inline-block; margin-right: 2rem}

.banner .textos {position: absolute; bottom: 0; left: 0; width: 100%; padding: 1rem}

.banner .textos h3, .banner .textos p {position: static; margin: 0; color: white}

.banner h3 {font-size: 1.5rem; font-weight: 800; letter-spacing: 0.8px; line-height: 2.3}
.banner p {font-size: 1.7rem; font-weight: 300; line-height: 1.5; text-align: left}

.banner .bloque::before {content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease; z-index: 1}
.banner .bloque:hover::before {opacity: 1}

.banner .web::before {background: linear-gradient(180deg, transparent 0%, #037dffe3 70%)}
.banner .grafico::before {background: linear-gradient(180deg, transparent 0%, #eb9728e3 70%)}
.banner .app::before {background: linear-gradient(180deg, transparent 0%, #d768f1e3 70%)}
.banner .tresd::before {background: linear-gradient(180deg, transparent 0%, #d5b300e3 70%)}
.banner .video::before {background: linear-gradient(180deg, transparent 0%, #30b72fe3 70%)}
.banner .fotografia::before {background: linear-gradient(180deg, transparent 0%, #f14242e3 70%)}

.banner .textos {opacity: 0; transition: opacity 0.3s ease; z-index: 2}
.banner .bloque:hover .textos {opacity: 1}

.banner.cuatro, .banner.cinco {margin-bottom: 5rem}
.banner.cuatro img, .banner.cinco img {margin-left: 12rem; height: 14rem;}

@media (max-width: 600px) {
    .banner h3 {font-size: 1.3rem}
    .banner p {font-size: 1.45rem}
    .banner img {height: 16rem; width: auto !important}/*Tamaño reducido de cada img de Proyecto*/
}










/* -------------------------------------------------------------------------------*/
/* ------------------------------ 4. Códigos -------------------------------------*/
/* -------------------------------------------------------------------------------*/
.codigos .texto-numerico {margin: 0 auto; max-width: 63rem; padding: 0 2rem;
text-align: right; font-size: 3rem; font-weight: 200}

@media (max-width: 650px) {
    .codigos .texto-numerico {text-align: center; font-size: 2.5rem}
    .codigos .texto-numerico #avance {display: inline-block; min-width: 7ch; text-align: right; /*background: red*/}
}





    




/* -------------------------------------------------------------------------------*/
/* ------------------------ 5. Mundo de Contacto ---------------------------------*/
/* -------------------------------------------------------------------------------*/
.mundocontacto {margin-top: 30rem}

.circulo-fondo {margin: 0 auto; margin-top: -20.5rem; position: relative; z-index: 1; opacity: 0.8;
    width: 300px; height: 300px; border-radius: 50%;/*Tamaño del círculo*/
    background: url('../img/colorido.jpg') no-repeat; background-size: 200%; /*Agranda img pa qe se mueva*/
    -webkit-background-clip: border-box; /* Para que la imagen quede recortada en forma de círculo */
    background-clip: border-box; /* Para que la imagen quede recortada en forma de círculo */
    animation: MoverFondoCirculo 6s linear infinite; /* Animación de movimiento de la imagen */
}
  
@keyframes MoverFondoCirculo {
    from, to {background-position: 0 0} /*Comienza en esquina superior izquierda*/
    50% {background-position: 100% 0}/*Mueve la imagen completamente a la derecha*/
}

.mundocontacto .vias {display: flex; justify-content: center; gap: 18rem; position: relative; z-index: 2}
.mundocontacto .telefono {margin-left: 5rem}

.mundocontacto .telefono svg {height: 2.9rem; fill: var(--Negro)}
.mundocontacto .email svg {height: 3rem; fill: var(--Negro); margin-top: 3px}
.mundocontacto .basic {display: flex; gap: 0.5rem; margin-bottom: -1rem}
.mundocontacto .telefono .basic {flex-direction: row-reverse}

.mundocontacto p {font-size: 2rem; font-weight: 600;}


/*Que los Buttons de abrir Aplicaciones tengan el mismo estilo que los "enlace" */
.btn-llamar, .btn-whatsapp, .btn-mail {font-size: 2rem; font-weight: 800; position: relative;
    background-image: linear-gradient(
        to right,
        #f1882c 50%,
        #4682dc 0
    );
    background-size: 200% 100%; background-position: 100% 0;
    color: transparent; -webkit-background-clip: text; background-clip: text;
    border: none; background-color: transparent; cursor: pointer;
    transition: background-position 1.5s cubic-bezier(.19,1,.22,1);
}
.btn-llamar:hover, .btn-whatsapp:hover, .btn-mail:hover {background-position: 0 0}
.btn-llamar::after, .btn-whatsapp::after, .btn-mail::after {
content: ''; display: inline-block; width: 0; height: 2px; background-color: #efa25d;
position: absolute; bottom: 0; left: 0; transition: width 1.5s cubic-bezier(.19,1,.22,1)}
.btn-llamar:hover::after, .btn-whatsapp:hover::after, .btn-mail:hover::after {width: 100%}
.btn-llamar, .btn-whatsapp, .btn-mail {display: inline-block}

@media (max-width: 750px) {
    .mundocontacto p, .mundocontacto button {font-size: 1.8rem}
    .mundocontacto {margin-top: 17rem}
    .circulo-fondo {width: 250px; height: 250px; margin-top: -23.5rem}
    .mundocontacto .vias {flex-direction: column; align-items: center; gap: 2rem; max-width: 300px; margin: 0 auto; align-items: flex-start}
    .mundocontacto .telefono .basic {flex-direction: row}
    .mundocontacto .telefono {margin-left: 0rem}
}





























/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------  SERVICIOS  -----------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/

/* -------------------------------------------------------------------------------*/
/* ----------------------- 1. Servicios ofrecidos --------------------------------*/
/* -------------------------------------------------------------------------------*/
.serviciosofrecidos .titular {margin-bottom: 5rem}
.serviciosofrecidos .cajasservicios {padding: 1rem; margin-bottom: -12rem}

.cajaservicio {width: 50rem; margin: 0 auto; background: var(--Blanco); border-radius: 50px 0 50px 0;
width: 100%; display: flex; margin-bottom: 14rem}

.cajaservicio.dos, .cajaservicio.cuatro {flex-direction: row-reverse}

.cajaservicio .texto {width: 55%; padding: 4rem}
.cajaservicio .imagen {width: 45%}

.cajaservicio .primer {font-weight: bold}
.cajaservicio .segun {margin-bottom: 0}

.cajaservicio .imagen img {height: 100%; width: 100%; object-fit: cover;  border-radius: 50px 0 50px 0}

.cajaservicio.uno {box-shadow: -20px 20px 50px 0px #cf6dbe, 6px -7px 25px 8px #5691eb}
.cajaservicio.dos {box-shadow: -20px 20px 50px 0px #e1ce40, 6px -7px 25px 8px #efa25d}
.cajaservicio.tres {box-shadow: -20px 20px 50px 0px #64cd68, 6px -7px 25px 8px #64cd68}
.cajaservicio.cuatro {box-shadow: -20px 20px 50px 0px #ef5f5f, 6px -7px 25px 8px #ef5f5f}

.cajaservicio .iconos {display: flex}
.cajaservicio .icono {display: flex}
.cajaservicio .icono svg {height: 6rem}

.cajaservicio .icono p {font-size: 4rem; font-weight: 800; margin-left: 0.8rem}
.cajaservicio .iconos span {font-size: 4rem; font-weight: 800; color: var(--Negro); margin: 0 1rem}

@media (max-width: 900px) {
    .cajaservicio {flex-direction: column; margin-bottom: 12rem}
    .cajaservicio.dos, .cajaservicio.cuatro {flex-direction: column}
    .cajaservicio .texto {width: 100%; padding: 2rem}
    .cajaservicio .imagen {width: 100%}
    .cajaservicio .icono svg {height: 4rem}
    .cajaservicio .icono p {font-size: 2.5rem; margin-left: 0.5rem}
    .cajaservicio .iconos span {font-size: 2.5rem}
}







/* -------------------------------------------------------------------------------*/
/* ------------- 2. Interconexión de Servicios (Mapa SolQuality) -----------------*/
/* -------------------------------------------------------------------------------*/
/* ------------------------ASPECTOS GENERALES*/
.mapaservicios {position: relative; margin: 0 auto; margin-top: 2.5rem; max-width: 600px}/*preparo al padre*/

.cuadricula {position: absolute; inset: 0;/*y la pongo al 100% de lo qe ocupa el padre*/}

/*Que solo sea señalable la parte pintada del svg*/
.mapaservicios .objeto polygon, .objeto polyline, .objeto path {pointer-events:auto}

.mapaservicios .objeto svg {pointer-events: none; cursor: pointer; position: absolute;
fill:red; opacity: 0}/*----------------<<<<<<<<<<<<< PRUEBAS: PON Y QUITA OPACIDAD*/

.mapaservicios article {padding: 1rem; position: absolute; z-index: 100; width: 20rem;
transform: translate(-50%, -50%); /* el punto de la coordenada es el centro */
display: none}/*----------------------<<<<<<<<<<<<<<<< PRUEBAS: PON Y QUITA LOS TEXTOS*/

.mapaservicios article p {color: #ff9915; font-size: 2rem; font-weight: 800; line-height: 1.5; margin-bottom: 0}

.mapaservicios #cartel-inicial {display: block}

.mapaservicios #objeto1 p, .mapaservicios #objeto2 p, .mapaservicios #objeto3 p, .mapaservicios #objeto4 p {text-align: right}
.mapaservicios #objeto5 p, .mapaservicios #objeto6 p, .mapaservicios #objeto7 p, .mapaservicios #cartel-inicial {text-align: left}

/* ------------------------CADA OBJETO QUE PULSAR*/
.mapaservicios #cartel-inicial {top: 91%; left: 117%}
.mapaservicios #objeto1 article {top: 7.5%; left: -16%}
.mapaservicios #objeto2 article {top: 48%; left: -16%}
.mapaservicios #objeto3 article {top: 69.5%; left: -17%}
.mapaservicios #objeto4 article {top: 90%; left: -14%}
.mapaservicios #objeto5 article {top: 19%; left: 117%}
.mapaservicios #objeto6 article {top: 46%; left: 115.5%}
.mapaservicios #objeto7 article {top: 69.5%; left: 116%}

/* ---Responsive: Textos abajo*/
@media (max-width: 1020px) {
    .mapaservicios article p {font-size: 1.45rem; font-weight: 600; line-height: 1.4}
    .mapaservicios article {background: #f0edffeb; box-shadow: 0.10rem 0.20rem 1rem #00000080; border-radius: 5px; width: 15rem}
    .mapaservicios #cartel-inicial {top: 105%; left: 87%}
    .mapaservicios #objeto1 article {top: 20%; left: 13%}
    .mapaservicios #objeto2 article {top: 60%; left: 13%}
    .mapaservicios #objeto3 article {top: 82%; left: 13%}
    .mapaservicios #objeto4 article {top: 103%; left: 13%}
    .mapaservicios #objeto5 article {top: 31%; left: 87%}
    .mapaservicios #objeto6 article {top: 59.5%; left: 87%}
    .mapaservicios #objeto7 article {top: 81.5%; left: 87%}
}

/* ---Responsive: Menos margen pa poder pulsarse mejor*/
@media (max-width: 600px) {
    .mapaservicios {margin: -1rem; margin-top: 2rem}
    .mapaservicios #cartel-inicial {top: 105%; left: 70%}
    .mapaservicios #objeto1 article {top: 17%; left: 30%}
    .mapaservicios #objeto2 article {top: 60%; left: 30%}
    .mapaservicios #objeto3 article {top: 82%; left: 30%}
    .mapaservicios #objeto4 article {top: 105%; left: 30%}
    .mapaservicios #objeto5 article {top: 32%; left: 70%}
    .mapaservicios #objeto6 article {top: 59%; left: 70%}
    .mapaservicios #objeto7 article {top: 82%; left: 70%}
}





/* -------------------------------------------------------------------------------*/
/* -------------------------- 3. Servicios Asociados -----------------------------*/
/* -------------------------------------------------------------------------------*/
.serasociados .titular {position: relative; z-index: 2; margin: 0 2rem}
.serasociados .caja-naranja {position: relative; z-index: 1; margin-top: -10.5rem; margin-bottom: -3rem}

.serasociados .banda-naranja .contenedor {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6rem}

.serasociados .complemento {text-align: center}
.serasociados .complemento svg {height: 9rem; fill: var(--Blanco)}
.serasociados .complemento p {color: var(--Blanco)}
.serasociados .complemento .pre {font-size: 4rem; font-weight: 800; text-align: center}
.serasociados .complemento .post {text-align: justify; margin-top: -1rem}

@media (max-width: 900px) {
    .serasociados .banda-naranja .contenedor {grid-template-columns: 1fr; gap: 4rem}
    .serasociados .complemento svg {height: 7rem}
    .serasociados .complemento .pre {font-size: 3rem}
}

@media (max-width: 600px) {
    .serasociados {margin-top: 18rem}
    .serasociados .caja-naranja {margin-top: -6rem}
}






/* -------------------------------------------------------------------------------*/
/* -------------------------- 4. Por qué contratarme -----------------------------*/
/* -------------------------------------------------------------------------------*/
.argumentosia p {position: relative; margin-left: 6rem; padding-left: 2rem /*espacio para el guión*/}
.argumentosia p::before {content: "-"; position: absolute; left: 0; top: 0; font-weight: 700}
@media (max-width: 600px) {.argumentosia p {margin-left: 0rem}}

.argumentosia .boton {margin-top: 3.5rem; letter-spacing: 1px}




































/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------  SOBRE MÍ  -----------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/

/* -------------------------------------------------------------------------------*/
/* ---------------------------- 1. Mi Recorrido ----------------------------------*/
/* -------------------------------------------------------------------------------*/
.trayectoria {display: flex; gap: 3rem}
.trayectoria img {width: 50%; object-fit: cover; border-radius: 100px 0 100px 0}
.trayectoria .texto {width: 50%}

@media (max-width: 850px) {
    .trayectoria {flex-direction: column}
    .trayectoria img {width: 100%}
    .trayectoria .texto {width: 100%}
}







/* -------------------------------------------------------------------------------*/
/* ---------------------------- 2. Mi Filosofía ----------------------------------*/
/* -------------------------------------------------------------------------------*/
.filosofia .titular {margin-bottom: -12rem; position: relative; z-index: 2}

.malaga {position: relative}

.malaga::before {content: ""; position: absolute; inset: 0; z-index: 0; clip-path: polygon(0 0, 100% 0, 100% 70%, 0% 100%);
background: linear-gradient(150deg, rgb(77 124 245 / 85%) 35%, rgb(255 150 55 / 85%) 100%),
url("../img/sobre-mi/malaga.jpg") center/cover no-repeat;
}

.malaga .valores {position: relative; z-index: 1; padding-top: 14rem; padding-bottom: 25rem}
.malaga .etica {position: relative; z-index: 1; padding: 3rem; background: #ffffff78; border-radius: 50px}
.malaga .etica p {text-align: center; font-size: 2rem; font-weight: 600;}
.malaga .etica p:last-child {margin-bottom: 0}

.filosofia {margin-top: 30rem}

.filosofia .enlace {font-size: 2rem}

@media (max-width: 600px) {
    .filosofia {margin-top: 23rem}
    .malaga::before {clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%)}
    .malaga .valores {padding-bottom: 20rem}
    .malaga .etica {padding: 2rem}
    .malaga .etica p {font-size: 1.7rem}
    .filosofia .enlace {font-size: 1.7rem}
}






/* -------------------------------------------------------------------------------*/
/* ----------------------- 3. Programas y Lenguajes ------------------------------*/
/* -------------------------------------------------------------------------------*/
.programas .titular {position: relative; z-index: 2; margin: 0 2rem}
.programas .caja-naranja {position: relative; z-index: 1; margin-top: -10.5rem; margin-bottom: -3rem}

.programas .banda-naranja .padreprogramas {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 3rem; row-gap: 5rem}

.programas .progreso-circulo {width: 100%; height: 100%; position: relative; z-index: 1; transform: rotate(83deg) /*Empieza abajo*/}

.programas .progreso-anillo {fill: none; stroke: var(--Blanco); stroke-width: 6; stroke-dasharray: 282.6; stroke-dashoffset: 282.6}

.programas .circulo {display: flex; flex-direction: column; align-items: center}

.programas .anillo {width: 200px; height: 200px; position: relative}

.programas .circulo img {position: absolute; height: auto; z-index: 2; pointer-events: none; width: 10rem;
transform:translate(-50%, -50%); top: 52%; left: 50%}

.programas .circulo .adobe img {width: 9.4rem}

.programas .circulo p {margin-top: 1.5rem; text-align: center; color: var(--Blanco); font-size: 2.1rem; font-weight: 700}

/*Los cortes de color que dividen el círculo en 3 partes*/
.corte {fill: none; stroke: var(--NaranjaGrafico); stroke-width: 10; /*Grosor de los 3 huecos (10px)*/
    pointer-events: none; stroke-dasharray: 10 272.6; /* Solo un hueco de 10px */
}
.corte1 {stroke-dashoffset: 0}/* en la parte inferior (6h) */
.corte2 {stroke-dashoffset: 94.2}/* 1/3 del círculo más adelante */
.corte3 {stroke-dashoffset: 188.4}/* 2/3 del círculo más adelante */

@keyframes DibujaAnillo {to {stroke-dashoffset: 0}}

.tapa3 {stroke-dashoffset: 165.4; stroke-dasharray: 89 272.6}/*Tapa el 3º llenado del Anillo*/
.tapa2 {stroke-dashoffset: 353.4; stroke-dasharray: 183 272.6}/*Tapa el 2º y 3º llenado del Anillo*/

.programaia {margin-top: 5rem; max-width: 93rem}
.programaia p {font-size: 1.9rem; color: var(--Blanco); font-style: italic; text-align: center}
.programaia p span {font-weight: 800; font-size: 2rem; letter-spacing: 0.5px}

@media (max-width: 1000px) {
    .programas .banda-naranja .padreprogramas {grid-template-columns: 1fr 1fr}
}

@media (max-width: 600px) {
    .programas {margin-top: 18rem}
    .programas .caja-naranja {margin-top: -6rem}
    .programas .banda-naranja .padreprogramas {grid-template-columns: 1fr}

    .programas .circulo p {font-size: 2.0rem}
    .programaia p {font-size: 1.8rem}
    .programaia p span {font-size: 1.9rem}
}









/* -------------------------------------------------------------------------------*/
/* -------------------------- 4. Mi Enfoque Técnico ------------------------------*/
/* -------------------------------------------------------------------------------*/
.video-enfoque {width: 100%}
.video-enfoque * {margin-bottom: 1.6rem}










/* -------------------------------------------------------------------------------*/
/* ------------------------------ 5. Clientes ------------------------------------*/
/* -------------------------------------------------------------------------------*/
.clientes p {text-align: center; margin-top: -1rem}
.banners-empresas-sobremi {margin-top: 3rem}
.clientes .banner img {height: 14rem; margin-left: 12rem}

@media (max-width: 600px) {
    .clientes .banner img {height: 10rem; margin-left: 6rem; width: auto !important}/*Tamaño reducido de cada img de Proyecto*/
}





































/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------  METODOLOGÍA  ---------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/

/* -------------------------------------------------------------------------------*/
/* ------------------------ A. Mi Método de Trabajo ------------------------------*/
/* -------------------------------------------------------------------------------*/
.metodo .titular {margin-bottom: 4rem}

.sistemas {display: flex; align-items: center}

.sistema {width: 50%; height: 100%; padding: 2rem 3rem}
.sistema p {margin-bottom: 0; line-height: 1.6}
.sistema-uno p {color: var(--Blanco)}
.sistema-dos p {font-weight: 500}

.sistema-uno {background: var(--AzulWeb); border-radius: 2rem 0 0 2rem}
.sistema-dos {background: var(--NaranjaGrafico); border-radius: 0 2rem 2rem 0}

.diagrama {display: flex; border-radius: 2rem; z-index: 2; box-shadow: -10px 6px 27px 0px #efa25d, 3px 0px 15px 8px #5691eb}
.diagrama video {max-width: 26rem; border-radius: 2rem}

.diagrama.movil {display: none}

@media (max-width: 1000px) {
    .diagrama.movil {display: flex; width: max-content; margin: 0 auto; margin-bottom: 3rem}
    .diagrama.pc {display: none}
}

@media (max-width: 600px) {
    .sistemas {flex-direction: column; gap: 2rem}
    .sistema {width: 100%; height: auto; padding: 2rem}
    .sistema-uno, .sistema-dos {border-radius: 2rem}
}

    






/* -------------------------------------------------------------------------------*/
/* ----------------------- B. Mis 10 Fases de Trabajo ----------------------------*/
/* -------------------------------------------------------------------------------*/
.mimetodotrabajo .sub {text-align: center; margin-top: -2rem; margin-bottom: 3rem}
.mimetodotrabajo h3 {font-size: 3.5rem; font-weight: 800; color: var(--Negro); margin-bottom: 1rem}
@media (max-width: 600px) {.mimetodotrabajo h3 {font-size: 2.8rem}}







/* -------------------------------------------------------------------------------*/
/* ------------------------------ 1. Información ---------------------------------*/
/* -------------------------------------------------------------------------------*/
.informacion {display: flex; gap: 3rem; margin-top: 6rem}

.informacion .contenido {width: 51%}
.informacion .imagen {width: 49%}

.informacion .imagen img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

/*--- iconos de mis servicios*/
.informacion  .iconosextra {display: flex; flex-wrap: wrap; gap: 3rem; justify-content: center; margin-top: 2.5rem}
.informacion .icono {display: flex; gap: 0.5rem; align-items: center}
.informacion .icono svg {height: 6rem}
.informacion .icono p {font-size: 2rem; font-weight: 800; margin-top: 11px}

@media (max-width: 900px) {
    .informacion {flex-direction: column; margin-top: 3rem}
    .informacion .contenido {width: 100%; margin-bottom: -3rem}
    .informacion .imagen {width: 100%}
    .informacion .iconosextra {display: none}/*Los Iconos afean la maquetación en Móvil*/
}








/* -------------------------------------------------------------------------------*/
/* ----------------------- 2. Diseño visual (boceto)  ----------------------------*/
/* -------------------------------------------------------------------------------*/

/* --------------------------   GALERÍAS DE IMÁGENES    -------------------------*/

/*1º ---------------------Las miniaturas de la Galería*/

.galeria-imagenes {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 2rem}
.galeria-imagenes.galeria-scroll {grid-template-columns: 1fr 1fr}

@media (max-width: 900px) {
    .galeria-imagenes.galeria-boceto {grid-template-columns: 1fr 1fr 1fr !important}
}

@media (max-width: 500px) {
    .galeria-imagenes.galeria-boceto {grid-template-columns: 1fr 1fr!important}
}

/*Si hay imágenes más pequeñas, que se pongan al 100% como sus img compañeras*/
.galeria-imagenes img {height: 100%; object-fit: cover}



/*2º ----------------------El Pop-up*/

.modal {position: fixed; inset: 0; z-index: 101; background: #000000f2; padding: 3rem}

/*Pone la imagen abierta al 100% y centrada horiztalmente*/
.modal img {max-width: 100%; max-height: 100%; margin: 0 auto}

/*Responsive de la imagen abierta*/
@media (max-width: 1200px) {
    .modal {display: grid; place-items: center;}/*centra imagen verticalmente*/
    .modal img {padding-top: 0}/*corrige el error del centrado verticalmente*/
}

/*Que salga el cursor "mano" y la img se transparente con transicion*/
.galeria-imagenes img {transition: all 0.2s ease}
.galeria-imagenes img:hover {cursor: pointer; opacity: 0.3}


/*Transición al abrir y cerrar la imagen*/
.modal {animation: fadeIn ease-in 0.5s}
.modal.fade-out {animation: fadeOut ease-in 0.5s;}

@keyframes fadeIn {
    0%{opacity: 0}
    100%{opacity: 1}
}

@keyframes fadeOut {
    100%{opacity: 0}
    0%{opacity: 1}
}

/*Bloquear Scroll*/
html.no-scroll {overflow: hidden;}




/* --------------------3º Las Flechas para pasar imágenes del Pop-up */

.flecha {display: inline-block; width: 40px; height: 30px; z-index: 100;
    position: absolute; top: 48%; transform: translateY(-50%);
    background: transparent; cursor: pointer; /*background: red*/
}
.flecha:hover span {background: white}
.flecha span {display: block; width: 20px; height: 3px; background: gray;
    transition: all 0.4s ease;
}

/*Flecha izquierda*/
.flecha.izquierda {left: 7px; transform: rotate(-90deg)}

.flecha.izquierda span:nth-child(1) {transform: rotate(-45deg); position: absolute;
    margin-top: 12px; margin-left: 3px;
}

.flecha.izquierda span:nth-child(2) {transform: rotate(45deg);
    margin-top: 12px; margin-left: 16px;
}

/*Flecha derecha*/
.flecha.derecha {right: 7px; transform: rotate(-90deg)}

.flecha.derecha span:nth-child(1) {transform: rotate(45deg); position: absolute;
    margin-top: 15px; margin-left: 3px;
}

.flecha.derecha span:nth-child(2) {transform: rotate(-45deg);
    margin-top: 15px; margin-left: 16px;
}



/*4º ----------------------- El Botón X (finge cerrar el Pop-up)*/

.equis {position: absolute; top: 10px; right: 10px; width: 40px; height: 40px;
    cursor: pointer; /*background: red;*/
    border-radius: 50%; z-index: 100;
}

.equis span {display: block; width: 32px; height: 3px;/*cada línea del Botón X*/
    background: gray; transition: all 0.3s ease; border-radius: 10px
}

.equis:hover span {background: white;}

/* --- Animación de la transformación del Botón X (de --- a X) */
.equis span:nth-child(1) {transform: rotate(-45deg);
position: absolute; margin-top: 18px; margin-left: 4px;}

.equis span:nth-child(2) {transform: rotate(45deg);
position: absolute; margin-top: 17px; margin-left: 4px;}



/*5º ---------------------Botón pa poner la Galería en Pantalla Completa*/

.agrandar {position: absolute; top: 16px; right: 63px; cursor: pointer;
width: 25px; height: 25px; z-index: 100}

.agrandar span {display: block; position: absolute; width: 10px; height: 3px; background: gray; border-radius: 5px; transition: all 0.3s ease}
.agrandar span::after {content: ''; position: absolute; width: 3px; height: 10px;
background: gray; border-radius: 5px; transition: all 0.3s ease}

/*esquina arriba izquierda*/
.agrandar span:nth-child(1), .agrandar span:nth-child(1)::after 
{top: 0; left: 0}

/*esquina arriba derecha*/
.agrandar span:nth-child(2), .agrandar span:nth-child(2)::after 
{top: 0; right: 0}

/*esquina abajo izquierda*/
.agrandar span:nth-child(3), .agrandar span:nth-child(3)::after 
{bottom: 0; left: 0}

/*esquina abajo derecha*/
.agrandar span:nth-child(4), .agrandar span:nth-child(4)::after
{bottom: 0; right: 0}

/*:hover*/
.agrandar:hover span {background: white}
.agrandar:hover span::after {background: white}



/*6º --------------------TRANSICONES entre las imágenes del Pop-up*/

/* Contenedor para las imágenes en el modal */
.modal .image-container {position: relative; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center; overflow: hidden
}

/* Asegurarse de que las imágenes estén en el mismo lugar y con proporciones completas */
.modal img {position: absolute; max-width: 100%; max-height: 100%;
    object-fit: contain; transition: opacity 0.5s ease-in-out;
}

/* Animación de desvanecimiento para la imagen actual */
@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
.modal img.fade-out {animation: fadeOut 500ms forwards}

/* Animación de aparición para la nueva imagen */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.modal img.fade-in {animation: fadeIn 0.5s forwards}



/*7º --------------------------Efecto Zoom al pinchar en foto*/

.modal img {transition: transform 0.3s ease;
cursor: url(../img/lupa-mas.png) 17 17, none
}

/*ESTE ES EL ZOOM QUE SE LE HARÁ (CASI EL DOBLE)*/
.modal img.zoomed {transform: scale(1.9);
cursor: url(../img/lupa-menos.png) 17 17, none}

/* Añade esta clase al CSS de tus imágenes para aplicar la transición de tamaño */
.zoomable {transition: transform 0.3s ease}

/* Esta clase se aplicará a la imagen cuando esté en estado de zoom */
.zoomed {transform: scale(1.9)}

/* Opcional: transiciones suaves para la imagen cuando se cambie entre imágenes */
.image-container {transition: opacity 0.3s ease}

/* Asegúrate de que las imágenes nuevas no sean visibles al principio */
.image-container img.fade-in {opacity: 0}

.image-container img.fade-in {opacity: 1}










/* -------------------------------------------------------------------------------*/
/* ------------------------------ 3. Materiales  ---------------------------------*/
/* -------------------------------------------------------------------------------*/
.materiales .contenidos {display: flex; gap: 2rem; align-items: center;}
.materiales .texto {width: 75%}
.materiales .rubik {width: 25%; margin-top: 0}

.materiales p:last-child {margin-bottom: 0}

@media (max-width: 900px) {
    .materiales .contenidos {flex-direction: column}
    .materiales .texto {width: 100%}
    .materiales .rubik {width: 100%}
}







/* -------------------------------------------------------------------------------*/
/* ---------------------------- 4. Arquitectura web  -----------------------------*/
/* -------------------------------------------------------------------------------*/
.cajaimgzoom {overflow: hidden; position: relative}

.cajaimgzoom img { transition: transform 0.3s ease; transform-origin: center; width: 100%;
cursor: url(../img/lupa-mas.png) 16.5 16.5, none}

.cajaimgzoom:hover img {transform: scale(2.4);/* Zoom del 240% */}







/* -------------------------------------------------------------------------------*/
/* ----------------------------- 5. Base de Datos --------------------------------*/
/* -------------------------------------------------------------------------------*/
.basedatos .columnas {display: flex; gap: 6rem}
.basedatos .columna {width: 50%}

.col-uno .cajaimgzoom:hover img {transform: scale(1.85);/* Zoom del 185% */}

@media (max-width: 900px) {
    .basedatos .columnas {flex-direction: column; gap: 3rem}
    .basedatos .columna {width: 100%}
}








/* -------------------------------------------------------------------------------*/
/* ----------------------------- 6. Web Front-End --------------------------------*/
/* -------------------------------------------------------------------------------*/
.front {display: flex; gap: 3rem}
.front .contenido {width: 43%}
.front .desplegable {width: 57%}

.front .contenido .guiones p {margin-bottom: 0}
.front .contenido .guiones {margin-bottom: 1.6rem}


/*---- DESPLEGABLE QUE MUESTRA CÓDIGOS*/
.front .desplegable .botones {display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: -1px; margin-left: -1px}
.front .desplegable .botones div {padding: 1rem; margin: 0.1rem; text-align: center;}
.front .desplegable .boton p {margin-bottom: -0.6rem; margin-left: 0.6rem; font-size: 2rem; font-weight: 600; color: var(--Blanco); letter-spacing: 0.8px}
.front .desplegable video {width: 100%}

/*Fondo base de cada botón*/
.front .desplegable .boton {background: #333333; cursor: pointer; width: 20%; border-radius: 20px 20px 0 0;}

/*Hover de cada botón*/
.front #BTNcodunoArriba.boton:hover {background: #e56e3b}
.front #BTNcoddosArriba.boton:hover {background: #4274e5}
.front #BTNcodtresArriba.boton:hover {background: #e1ca00}

/*Cada botón que está activo*/
.front #BTNcodunoArriba.boton.active {background: #e56e3b}
.front #BTNcoddosArriba.boton.active {background: #4274e5}
.front #BTNcodtresArriba.boton.active {background: #e1ca00}

/*---- estilo visual cajas*/
.front .caja .imagen {position: relative;}
.front .color {position: absolute; width: 100%; height: 100%}

.front .coduno .color {background: linear-gradient(-180deg, #e56e3b 0%, #e56e3b0f 10%); border: 6px solid #e56e3b} 
.front .coddos .color {background: linear-gradient(-180deg, #4274e5 0%, #4274e517 10%); border: 6px solid #4274e5} 
.front .codtres .color {background: linear-gradient(-180deg, #e1ca00 0%, #e1ca000f 10%); border: 6px solid #e1ca00}

/*---- animaciones*/
.front .caja {max-height: 0; overflow: hidden; transition: max-height 0.5s ease}
.front .parent {display: flex; justify-content: center}

@media (max-width: 900px) {
    .front {flex-direction: column; gap: 1rem}
    .front .contenido {width: 100%}
    .front .desplegable {width: 100%}
}

@media (max-width: 600px) {
    .front .desplegable .boton p {margin-bottom: -0.6rem; font-size: 1.4rem; font-weight: 500; margin-left: 0rem}
}









/* -------------------------------------------------------------------------------*/
/* ----------------------------- 7. Web Back-End ---------------------------------*/
/* -------------------------------------------------------------------------------*/
.back {display: flex; gap: 3rem}
.back .contenido {width: 43%}
.back .desplegable {width: 57%}

.back .contenido .guiones p {margin-bottom: 0}
.back .contenido .guiones {margin-bottom: 1.6rem}


/*---- DESPLEGABLE QUE MUESTRA CÓDIGOS*/
.back .desplegable .botones {display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: -1px; margin-left: -1px}
.back .desplegable .botones div {padding: 1rem; margin: 0.1rem; text-align: center;}
.back .desplegable .boton p {margin-bottom: -0.6rem; margin-left: 0.6rem; font-size: 2rem; font-weight: 600; color: var(--Blanco); letter-spacing: 0.8px}
.back .desplegable video {width: 100%}

/*Fondo base de cada botón*/
.back .desplegable .boton {background: #333333; cursor: pointer; width: 20%; border-radius: 20px 20px 0 0;}

/*Hover de cada botón*/
.back #BTNcodunoAbajo.boton:hover {background: #9a88b9}
.back #BTNcoddosAbajo.boton:hover {background: #6fc1e1}

/*Cada botón que está activo*/
.back #BTNcodunoAbajo.boton.active {background: #9a88b9}
.back #BTNcoddosAbajo.boton.active {background: #6fc1e1}

/*---- estilo visual cajas*/
.back .caja .imagen {position: relative;}
.back .color {position: absolute; width: 100%; height: 100%}

.back .coduno .color {background: linear-gradient(-180deg, #9a88b9 0%, #9a88b90f 10%); border: 6px solid #9a88b9} 
.back .coddos .color {background: linear-gradient(-180deg, #6fc1e1 0%, #6fc1e114 10%); border: 6px solid #6fc1e1} 

/*---- animaciones*/
.back .caja {max-height: 0; overflow: hidden; transition: max-height 0.5s ease}
.back .parent {display: flex; justify-content: center}

@media (max-width: 900px) {
    .back {flex-direction: column; gap: 1rem}
    .back .contenido {width: 100%}
    .back .desplegable {width: 100%}
}

@media (max-width: 600px) {
    .back .desplegable .boton p {margin-bottom: -0.6rem; font-size: 1.4rem; font-weight: 500; margin-left: 0rem}
}









/* -------------------------------------------------------------------------------*/
/* ------------------------- 8. Animaciones Scroll -------------------------------*/
/* -------------------------------------------------------------------------------*/
.animscrol .columnas {display: flex; gap: 6rem}
.animscrol .coluno {width: 50%}
.animscrol .coldos {width: 50%}

.video-pro {width: 100%}

@media (max-width: 900px) {
    .galeria-scroll img {height: 100%}/*Vuelve a su altura natural*/
    .animscrol .columnas {flex-direction: column; gap: 3rem}
    .animscrol .coluno {width: 100%}
    .animscrol .coldos {width: 100%}
}








/* -------------------------------------------------------------------------------*/
/* ---------------------- 9. y 10. Publicación y Testeo --------------------------*/
/* -------------------------------------------------------------------------------*/
.publitest {display: flex; gap: 6rem}
.publitest .apartadouno {width: 50%}
.publitest .apartadodos {width: 50%}


@media (max-width: 900px) {
    .publitest {flex-direction: column; gap: 3rem}
    .publitest .apartadouno {width: 100%}
    .publitest .apartadodos {width: 100%}
}





































/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------  PROYECTOS  ----------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/

/*----------- EL SUBMENÚ PARA MOVERTE X PROYECTOS -----------*/
.color-menuproy {display: flex; justify-content: center}

.color-menuproy a {font-size: 2.5rem; font-weight: 800; text-shadow: 0.5px 0.5px 0.5px rgb(129 130 137)}
.color-menuproy a:hover {text-decoration: underline}

.color-menuproy .web {color: #6089e9}
.color-menuproy .app {color: #d06bc1}
.color-menuproy .grafico {color: #eca762}
.color-menuproy .tresd {color: #dfd549}
.color-menuproy .video {color: #64d168}
.color-menuproy .foto {color: #ec6666}

.cabecera-menuproy {padding: 2rem; display: flex; justify-content: space-between;
align-items: center; max-width: 1200px; margin: 0 auto}

#menuproy ul {display: flex; gap: 2rem;}


/*----------- EL SUBMENÚ QUE APARECE (FIXED) PARA MOVERTE X PROYECTOS -----------*/
.color-menuproy.clon {position: fixed; width: 100%; z-index: 50; transition: top 0.4s ease; top: -10rem; padding: 1rem;
background: #e8f2e780; backdrop-filter: blur(5px)}

.color-menuproy.clon a {font-size: 2rem}


@media (max-width: 800px) {/*En Móvil: cabecera.clon tiene un margencito*/
    .color-menuproy.clon #menuproy {margin-top: 8px}
}


/*----------- LOS BOTONES DEL SUBMENÚ SE SUSTUTUYEN X ICONOS -----------*/
#menuproy .iconitos {display: none}
@media (max-width: 600px) {
    #menuproy .letritas {display: none}
    #menuproy .iconitos {display: flex; gap: 1.5rem; margin-top: 1.3rem}
}
#menuproy .iconitos svg {height: 4rem}
#menuproy .iconitos .web svg {fill: var(--AzulWeb)}
#menuproy .iconitos .app svg {fill: var(--VioletaApp)}
#menuproy .iconitos .grafico svg {fill: var(--NaranjaGrafico)}
#menuproy .iconitos .tresd svg {fill: var(--Amarillo3D)}
#menuproy .iconitos .video svg {fill: var(--VerdeVideo)}
#menuproy .iconitos .foto svg {fill: var(--RojoFotografia)}


/*----------- CADA PROYECTO -----------*/
.proyectos .titular {margin-bottom: 1rem}

.proyectos .proyecto {display: flex; align-items: flex-start; gap: 4rem; padding-top: 11rem; margin-bottom: 6rem}
.proyectos .proyecto.primerproy {gap: 0}
.proyectos .proyecto .texto {width: 50%}
.proyectos .proyecto .imagen {width: 50%}
.proyectos .proyecto .enlace-img {border-radius: 30px; transition: all 0.2s ease}
.proyectos .enlace-img:hover {opacity: 0.6}
.proyectos .enlace-img.falso:hover {opacity: 1}
.proyectos .proyecto img {border-radius: 30px; width: 100%}

.proyectos .proyecto.primerproy .texto {padding-right: 4rem}

.proyectos .tipo {font-size: 2.3rem; font-weight: 900; margin-top: -4.8rem; margin-bottom: 0.2rem}
.proyectos .web .tipo {color: var(--AzulWeb)}
.proyectos .app .tipo {color: var(--VioletaApp)}
.proyectos .grafico .tipo {color: var(--NaranjaGrafico)}
.proyectos .tresd .tipo {color: var(--Amarillo3D)}
.proyectos .video .tipo {color: var(--VerdeVideo)}
.proyectos .fotografia .tipo {color: var(--RojoFotografia)}

.proyectos .nombre {font-size: 4.3rem; font-weight: 800; line-height: 1.1; margin-bottom: 0.5rem; text-align: left}

.proyectos .cliente {font-size: 1.65rem; font-weight: 500; font-style: italic; line-height: 1.2}

.proyectos .detalles p {font-size: 1.6rem; font-weight: 400; margin-bottom: 0}

.proyectos .proyecto .boton {transition: all 0.2s ease; margin-top: 1.6rem;}
.proyectos .proyecto.web .boton {background: var(--AzulWeb)}
.proyectos .proyecto.web .boton:hover {background: #3179e7}
.proyectos .proyecto.app .boton {background: var(--VioletaApp)}
.proyectos .proyecto.app .boton:hover {background: #cf4bb8}
.proyectos .proyecto.grafico .boton {background: var(--NaranjaGrafico)}
.proyectos .proyecto.grafico .boton:hover {background: #ed913e}
.proyectos .proyecto.tresd .boton {background: var(--Amarillo3D)}
.proyectos .proyecto.tresd .boton:hover {background: #ebd31f}
.proyectos .proyecto.video .boton {background: var(--VerdeVideo)}
.proyectos .proyecto.video .boton:hover {background: #35bb3b}
.proyectos .proyecto.fotografia .boton {background: var(--RojoFotografia)}
.proyectos .proyecto.fotografia .boton:hover {background: #ed3a3a}
.proyectos .proyecto .boton.falso {cursor: default}
.proyectos .proyecto.web .boton.falso:hover {background: var(--AzulWeb)}

.proyectos .web .enlace-img img {box-shadow: -6px 28px 31px -34px var(--AzulWeb), -1px 0px 22px 0px var(--AzulWeb)}
.proyectos .app .enlace-img img {box-shadow: -6px 28px 31px -34px var(--VioletaApp), -1px 0px 22px 0px var(--VioletaApp)}
.proyectos .grafico .enlace-img img {box-shadow: -6px 28px 31px -34px var(--NaranjaGrafico), -1px 0px 22px 0px var(--NaranjaGrafico)}
.proyectos .tresd .enlace-img img {box-shadow: -6px 28px 31px -34px var(--Amarillo3D), -1px 0px 22px 0px var(--Amarillo3D)}
.proyectos .video .enlace-img img {box-shadow: -6px 28px 31px -34px var(--VerdeVideo), -1px 0px 22px 0px var(--VerdeVideo)}
.proyectos .fotografia .enlace-img img {box-shadow: -6px 28px 31px -34px var(--RojoFotografia), -1px 0px 22px 0px var(--RojoFotografia)}


/*El primer Proyecto es especial*/
#web {margin-top: 2rem}


/*El Proyecto "JosPress" es especial*/
.proyecto .texto .detallesybotones {display: none}

.multi-imagen {position: relative; width: 100%; aspect-ratio: 1 / 1;  overflow: hidden; border-radius: 30px;
box-shadow: -6px 28px 31px -34px var(--VioletaApp), -1px 0px 22px 0px var(--VioletaApp)}
.multi-imagen img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s}
.multi-imagen img.active {opacity: 1}

.proyectos .imagencambiajs .enlace-img:hover {opacity: 1}
.proyectos .imagencambiajs .detallesybotones .detalles p {margin-top: 2rem}


/*El Proyecto "Catálogo Reco52" incluye un video*/
.video-feria-marbella {width: 100%}
    


/* Los proyectos Impares: texto izquierda e imagen derecha */
.proyecto:nth-child(odd) {flex-direction: row-reverse}

/* Los proyectos Pares: imagen izquierda y texto derecha */
.proyecto:nth-child(even) {flex-direction: row}


/*Adaptaciones de todo a Móvil*/
.identificacion-movil {display: none}

@media (max-width: 900px) {
    .identificacion-pc {display: none}
    .identificacion-movil {display: block; margin-bottom: -1.5rem}
    #web .identificacion-movil {margin-bottom: -3.5rem}

    .proyectos .proyecto.primerproy .texto {padding-right: 0}
    .proyectos .proyecto.primerproy {gap: 2rem}

    .proyectos .proyecto {flex-direction: column; gap: 2rem; padding-top: 10rem}
    .proyectos .proyecto .texto {width: 100%}
    .proyectos .proyecto .imagen {width: 100%}

    .proyecto .texto .detallesybotones {display: block}
    .proyecto .imagen .detallesybotones {display: none}
}

.botones-js {display: flex; gap: 2rem}

@media (max-width: 600px) {
    .proyectos .proyecto {padding-top: 14rem; margin-bottom: 5rem}
    .proyectos .proyecto .enlace-img {border-radius: 20px}
    .proyectos .proyecto img {border-radius: 20px}
    #web {padding-top: 8rem}
    .color-menuproy.clon {padding: 0.5rem}

    .proyectos .tipo {font-size: 2rem; margin-bottom: 0.2rem}
    .proyectos .nombre {font-size: 3.3rem}
    .proyectos .cliente {font-size: 1.5rem; text-align: left}
    .proyectos .detalles p {font-size: 1.45rem; text-align: left}

    .botones-js {display: block}
}



/* ---------------- Proyecto "3D interactivo: Clínica dental"------------------------------------*/
.tresdclinicadental .titulo {font-size: 4.3rem; font-weight: 800; line-height: 1.1; text-align: center; margin-bottom: 5rem; color: var(--Negro)}

.tresdclinicadental p {text-align: center}
.tresdclinicadental .chico {font-size: 1.6rem; margin-top: -1.5rem}

.tresdclinicadental .espacio {margin-top: 8rem}

.tresdclinicadental img {margin: 0 auto}

    
.tresdclinicadental .sketchfab-embed-wrapper iframe {width: 100%; height: 750px}

.tresdclinicadental .tapa3d {height: 50px; background: var(--Negro); z-index: 1000; position: relative; margin-bottom: -50px}

.tresdclinicadental .tapa3dabajo {height: 50px; background: var(--Negro); z-index: 1000; position: relative; margin-top: -50px}

@media (max-width: 900px) {
    .tresdclinicadental .sketchfab-embed-wrapper iframe {height: 550px}
}

@media (max-width: 600px) {
    .tresdclinicadental .sketchfab-embed-wrapper iframe {height: 400px}
    .tresdclinicadental .chico {font-size: 1.4rem}
}



/*ESTO HACE RESPONSIVE TODOS LOS VIDEOS DE LA WEB*/
.embed-container {position: relative; height: 0; overflow: hidden; padding-top: 30px; /* IE6 workaround*/
padding-bottom: 53.6%; /* 16/9 ratio */
}

.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

@media (max-width: 900px) {/* Reducir líneas en TABLET */
    .embed-container {padding-bottom: 52.8% /* 16/9 ratio */}
}

@media (max-width: 600px) {/* Reducir líneas en MOVIL */
    .embed-container {padding-bottom: 51% /* 16/9 ratio */}
}

@media (max-width: 500px) {/* Reducir líneas en MOVIL */
    .embed-container {padding-bottom: 49.5% /* 16/9 ratio */}
}

@media (max-width: 400px) {/* Reducir líneas en MOVIL */
    .embed-container {padding-bottom: 48% /* 16/9 ratio */}
}

















/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------  CONTACTO  -----------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
.contacto {display: flex; align-items: center; margin-bottom: -26.5rem; margin-top: -4rem;}
.contacto .contenido {width: 55%; margin-top: 13rem;}
.contacto .foto {width: 45%; position: relative}
.contacto .foto img {width: 100%}

.movildirecto {position: absolute; z-index: 5; bottom: 8rem; right: 3rem}
.movildirecto p {text-align: right}

.contacto .titular {margin-bottom: 2rem}

.contacto svg {height: 2.9rem; fill: var(--Negro)}
.contacto .vias {display: flex; flex-direction: column; align-items: center}    
.contacto .vias div {display: flex; gap: 1rem}
.contacto .vias p {font-weight: 700}

.contacto .caja-naranja svg {height: 8.5rem; fill: var(--NaranjaGrafico)}

@media (max-width: 1350px) {.contacto .vias {margin-bottom: -2rem}}

/*Versión para Tablet/Movil*/
@media (max-width: 1100px) {
    .contacto {flex-direction: column; margin-bottom: -24rem; margin-top: 10rem}
    .contacto .contenido {width: 100%; margin-top: 0; z-index: 2}
    .contacto .vias {margin-bottom: 3rem}
    .contacto .foto {width: 100%; margin-bottom: -10rem; margin-top: -9rem}
    .movildirecto {bottom: 15rem}
}

@media (max-width: 600px) {.contacto .foto {width: 100%; margin-bottom: -2rem}}


/*ASPECTO DE LOS MENSAJES DE ALERTA DEL FORMULARIO*/
.alerta {text-align: center !important; color: white !important; padding: 0.8rem; font-weight: bold; text-transform: uppercase;
max-width: 60rem; margin: 0 auto; margin-bottom: 1rem; border-radius: 10px;}
.rojo {background: red}
.verde {background: green}
/*las alertas verdes (qe solo informan) desaparecen en 4 segundos*/
.se-va {transition: transform 1s ease, opacity 1s ease; transform: translateY(0); opacity: 1}
.se-va.oculto {transform: translateY(-100%); opacity: 0}




/*ASPECTO DEL FORMULARIO DE CONTACTO*/
#manda-email fieldset {margin-bottom: 1rem}

#manda-email .formulario input:not([type="submit"]),/*Estilo de todos los campos (menos "enviar")*/
#manda-email .formulario textarea, #manda-email .formulario select {
background: transparent; width: 100%; max-width: 60rem; padding: 5px 0; margin-top: -1rem; margin-bottom: 2rem;
color: var(--Blanco); font-weight: 600; font-size: 1.9rem; border: 2px solid transparent; outline: 0;
border-bottom-color: var(--Blanco)}

input::placeholder, textarea::placeholder {color: var(--Blanco); opacity: 1; font-weight: 300; font-style: italic; font-size: 1.7rem}

#manda-email .formulario .send {margin: 0 auto; margin-bottom: 0; padding: 1rem}

/*Estilo de los input en :hover*/
#manda-email .formulario {input:hover, textarea:hover, select:hover {border-bottom-color: var(--AzulWeb)}}

/*Estilo de los input al pulsarse*/
#manda-email .formulario {text-align: center; margin-top: 1.5rem; margin-bottom: 3rem; input:focus, textarea:focus, select:focus {outline: none; border-bottom-color: var(--AzulWeb)}}

#manda-email .formulario input {margin-bottom: 2rem; max-width: 60rem;}
#manda-email .formulario textarea {margin-bottom: 2rem; height: 15rem}



















/* -------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------*/
/* ------------------------------ PIE DE PÁGINA ----------------------------------*/
/* -------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------*/
.pie {position: relative; overflow: hidden}

.pie::before{content: ""; position: absolute; inset: 0; z-index: 0; height: 27rem;
    background: linear-gradient(170deg, rgb(255 150 55) 20%, rgb(77 124 245) 100%);
    clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
}

.contenedor-pie {padding: 2rem; margin: 0 auto; max-width: 170rem /*hibrido entre 100% de pantalla y contenedor*/;
display: flex; justify-content: space-between; width: 100%; position: relative; z-index: 1; padding-top: 10rem}

.pie-redes {margin-top: 6rem}
.pie-redes .redes svg:hover {fill: var(--AzulWeb)}

.pie-texto p {color: var(--Blanco); font-weight: 200; font-size: 1.6rem; text-align: right; margin-bottom: 1rem}

@media (max-width: 900px) {
    .pie::before{height: 24rem}
    .contenedor-pie {flex-direction: column; margin-top: 6rem; padding: 2.5rem}
    .pie-redes {margin-top: 0}
    .pie-texto p {font-size: 1.3rem}
    .pie-texto .derechos {font-size: 1.3rem; margin-bottom: 0}
}



/*----- BOTÓN FLECHA PA SUBIR ARRIBA*/
.subir {position: fixed; bottom: 0; right: 0; z-index:100; margin: 10px;
    padding: 10px; padding-left: 9px; cursor: pointer; line-height: 1.5;
    border-radius: 100px; background: #ffffff80; display: none}

.subir:hover .flechas span {background: var(--NaranjaGrafico)}

.flechas {display: inline-block; width: 22px}

.flechas span {display: block; width: 20px; height: 3px; background:var(--AzulWeb); transition: all 0.2s ease}

.flechas span:nth-child(1) {transform: rotate(-45deg); position: absolute; margin-top: -9px; margin-left: -5px}
.flechas span:nth-child(2) {transform: rotate(45deg); margin-top: -9px; margin-left: 8px}
























/* -------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------*/
/* ------------------------ ERROR: PAG NO ENCONTRADA -----------------------------*/
/* -------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------*/
.pag-noexiste {margin-top: 23rem; margin-bottom: 22rem}
.pag-noexiste .error-explicado {margin-top: -1.5rem; margin-bottom: 2.5rem; text-align: center;}