/* -------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------*/
/* ------------------------   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}
/*Reducir tamaño de los textos en Móvil*/
@media (max-width: 600px) {
    p {font-size: 1.65rem}
}


/*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*/}

.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*/

.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}
}

.titular {text-align: center; padding-bottom: 5rem; font-weight: 600; color: black}

.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: 1rem 3rem; 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.65rem}}/*+ 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}


/* ENLACES AZULES CON HOVER NARANJA QUE ABRIRÁN PAGINAS o POP-UPS */
.enlace {font-size: 1.8rem; font-weight: 800; position: relative;
    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}


/*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)}























/* -------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------*/
/* ----------------  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; 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}

.color-cabecera .redes {display: flex; justify-content: flex-end; gap: 1.3rem; margin-bottom: 0.8rem}
.color-cabecera .redes svg {width: 2rem; height: auto; fill: white; transition: fill 0.2s ease}
.color-cabecera .redes svg:hover {fill: var(--NaranjaGrafico)}
.color-cabecera .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; 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/fondocolor.jpg') no-repeat;
    background-size: 200%; /*Agranda la img pa tener margen pa desplazarla*/
    -webkit-background-clip: text; /*Para navegadores antiguos*/
    animation: MoverFondoTexto 6s 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;}

@media (max-width:  600px) {
    .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}

.banda-naranja p {text-align: center; font-size: 3rem; font-weight: 800}
.banda-naranja p a {font-size: 3.2rem}
.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) {
    .banda-naranja p, .banda-naranja p a, .banda-naranja span {font-size: 2.5rem}
    .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}

.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;}

















/* -------------------------------------------------------------------------------*/
/* ------------------------ 4. Mundo de Contacto ---------------------------------*/
/* -------------------------------------------------------------------------------*/
.circulo-fondo {margin: 0 auto; margin-top: -20.5rem;
    width: 300px; height: 300px; border-radius: 50%;/*Tamaño del círculo*/
    background: url('../img/fondocolor.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}
.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;}

   































/* -------------------------------------------------------------------------------*/
/* -------------------------- Cosa de inicio -------------------------------------*/
/* -------------------------------------------------------------------------------*/
.prueba h1 {display: inline-block; margin: 1rem; padding: 1rem; color: white}


.azul {background: var(--AzulWeb)}
.violeta {background: var(--VioletaApp)}
.naranja {background: var(--NaranjaGrafico)}
.amarillo {background: var(--Amarillo3D)}
.verde {background: var(--VerdeVideo)}
.rojo {background: var(--RojoFotografia)}




.caja-base {background: white; padding: 4rem; border-radius: 15px}
.caja-base h2 {color: var(--AzulWeb); font-size: 5rem; font-weight: 900;}

.caja-base.uno {box-shadow: 0px 0px 30px 9px var(--AzulWeb)}












.parent {display: flex; justify-content: center}
.diagrama {display: flex; background: gray; border-radius: 2rem; padding: 1rem;
    box-shadow: 0px 0px 30px 9px var(--AzulWeb)
}
.diagrama video {max-width: 30rem; border-radius: 2rem}







.fondo-naranja {background: var(--NaranjaGrafico); padding: 2rem;}


.circulo {width: 200px; height: 200px}
  
.progreso-circulo {width: 100%; height: 100%; transform: rotate(83deg) /*Empieza a las 6h*/}
  
.progreso-anillo {fill: none; stroke: white; stroke-width: 6;/*Grosor del círculo (6px)*/
    stroke-dasharray: 282.6; stroke-dashoffset: 282.6; animation: DibujaAnillo 4s linear forwards
}
  
/*Los cortes de color que dividen el círculo en 3 partes*/
.corte {fill: none; stroke: orange; 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}
}




/* -------------------------------------------------------------------------*/

.doble {display: flex; gap: 7rem}
.doble p {text-align: justify; letter-spacing: -0.2px}


















/* -------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------*/
/* ------------------------------ PIE DE PÁGINA ----------------------------------*/
/* -------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------*/

.pie {padding: 3rem;
    background: linear-gradient(170deg, rgb(255 150 55 / 85%) 40%, rgb(70 108 243 / 85%) 60%);
    background-position: center; background-repeat: no-repeat; background-size: cover;
    clip-path: polygon(0 70%, 100% 0, 100% 100%, 0% 100%);
    height: 25rem; display: flex; align-items: flex-end
}

.pie p {color: white; font-weight: 200; font-size: 1.8rem}



/*----- 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}