/* CSS IBERNET CLOUD - INDEX */

/* CUERPO */

body {
        margin: 0;
        background-color: #FFFFFF;
        font-family: Helvetica;
    }
    
    /* COOKIES */
    
    #avisoCookies {
        display: none;
        background: #fff;
        padding: 20px;
        width: calc(100% - 40px);
        max-width: 300px;
        line-height: 150%;
        border-radius: 10px;
        position: fixed;
        top: 57%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 100;
        padding-top: 60px;
        box-shadow: 0px 0px 15px #888888;
        text-align: center;
    }
    
    #avisoCookies.activo {
        display: block;
    }
    
    #avisoCookies #galleta {
        max-width: 100px;
        position: absolute;
        top: -50px;
        left: calc(50% - 50px);
    }
    
    #avisoCookies #tituloCookies {
        font-weight: bold;
    }
    
    #avisoCookies #tituloCookies, #avisoCookies #parrafoCookies {
        margin-bottom: 15px;
    }
    
    #avisoCookies #botonCookies {
        width: 100%;
        background-color: rgb(44, 44, 44);
        border:2px solid black;
        border-radius: 0px;
        color : #FFFFFF;
        text-align: center;
        padding: 15px 20px;
        cursor: pointer;
        transition: .3s ease all;
        margin-bottom: 15px;
        font-size: 14px;
        font-weight: bold;
    }
    
    #avisoCookies #botonCookies:hover {
        background-color:#BEDFFB;
        color:black;
    }
    
    #avisoCookies #enlaceCookies {
        color: #007BFF;
        text-decoration: none;
        font-size: 14px;
    }
    
    #avisoCookies #enlaceCookies:hover {
        text-decoration: underline;
    }
    
    #fondoAvisoCookies {
        display: none;
        background: rgba(0,0,0,.20);
        position: fixed;
        z-index: 99;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
    }
    
    #fondoAvisoCookies.activo {
        display: block;
    }
    
    /* CABECERA */
    
    header {
        width: 100%;
        height: 70vh;
        background-color: #B5B5B5;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Merriweather;
        font-size: 50px;
    }
    
    #contenedorVideo {
        position: relative; 
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 70vh;
        overflow: hidden;
    }
    
    #video {
        position: absolute; 
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; 
    }
    
    .wrapper {
        height: 100vh;
        z-index: 1;
        color:white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Merriweather;
        flex-direction: column;
    }
    
    .typing-demo {
        width: 11ch;
        color: #d4ebff;
        animation: typing 1.3s steps(11), blink .5s step-end infinite alternate;
        white-space: nowrap;
        overflow: hidden;
        font-family: monospace;
        border-right: 3px solid;
        font-size: 90px;
    }
    
    @keyframes typing {
        
        from {
            width: 0;
        }
    }
      
    @keyframes blink {
        
        50% {
            border-color: transparent;
        }
    }
    
    /* SECCIÓN 1: VIÑETA + MENSAJE */
    
    #seccion-1 {
        height: 90vh;
        font-size: 20px; 
        background-color: #FFFFFF;
        display: flex;
        justify-content: space-evenly;
        align-items:center;
        flex-direction: row;
        padding:10px;
    }
    
    #titulo-seccion-1 {
        font-weight: bold;
        font-size:30px;
    }
    
    #texto-seccion-1 {
        margin:10px;
        display: flex;
        width:40%;
        justify-content: center;
        flex-direction: column;
    }
    
    #botones {
        display: flex;
        align-items: center;
    }
    
    #botones #btn1 {
        font-weight: bold;
        background-color: rgb(44, 44, 44);
        border:2px solid black;
        font-size: 17px;
        color: white;
        height:50px;
    }
    
    #botones #btn1:hover {
        background-color:#BEDFFB;
        color:black;
    }
    
    #botones #btn2 {
        font-weight: bold;
        background-color: rgb(248, 248, 248);
        padding:7px;
        border:2px solid black;
        font-size: 17px;
        color: black;
        margin: 10px;
        height:50px;
    }
    
    #botones #btn2:hover {
        background-color:#BEDFFB;
        color:black; 
    }
    
    .nav-link:hover {
        color: #007BFF !important;
    }
    
    /* SECCIÓN 2: PRESUPUESTO */
    
    #seccion-2 {
        height: 90vh;
        font-size: 20px; 
        background-color: #DCDCDC;
        display: flex;
        justify-content: space-evenly;
        align-items:center;
        flex-direction: row;
        padding:10px;
    }
    
    #titulo-seccion-2 {
        font-weight: bold;
        font-size:30px;
    }
    
    #texto-seccion-2 {
        margin:10px;
        display: flex;
        width:40%;
        justify-content: center;
        flex-direction: column;
        text-align: center;
    }
    
    #botones2 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    #botones2 #btn1 {
        font-weight: bold;
        background-color: rgb(44, 44, 44);
        border:2px solid black;
        font-size: 17px;
        color: white;
        height:50px;
    }
    
    #botones2 #btn1:hover {
        background-color:#BEDFFB;
        color:black;
    }
    
    
    /* SECCIÓN 3: MARKETING, DIGITALIZACIÓN, BRANDING */
    
    #seccion-3 {
        display: flex;
        flex-wrap: wrap; 
        justify-content: center; 
        align-items: stretch; 
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    #seccion-3 > div {
        box-sizing: border-box;
        padding: 30px 10px;
        font-size: 0.8rem;
        margin-bottom: 30px; 
        width: calc(33.3333% - 20px);
        height: 452px;
        margin: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    
    #marketing-digital {
        background-color: white;
    }
    
    #digitalizacion {
        background-color: rgb(232, 231, 231);
    }
    
    #branding {
        background-color: rgb(154, 152, 152);   
    }
    
    #business {
        background-color: rgb(154, 152, 152);
    }
    
    #diseño_movil {
        background-color: rgb(232, 231, 231);
    }
    
    #proyectos {
      background-color: white;  
    }
    
    
    .parrafo-seccion-3 {
        padding: 10px;
        margin-bottom: 15px; 
        font-size: 18px; 
        text-align: center;
        font-weight: bold;
        color: #222222;
        height: 100%;
        
    }
    
    .texto-seccion-3 {
        text-align: center;
        font-weight: bolder;
        color: #000;
        font-size: 22px;
        margin-bottom: 20px; 
       
    }
    
    #logo {
        height: 60px; 
        margin-bottom: 25px; 
    }
    
	
    .boton-seccion3 {
        height:50px;
        padding:6px;
        width: 300px;
        max-width: 90%;
        margin-bottom: 10px;
        border:2px solid black;
        font-size: 13px;
        color: black;
        font-weight: bolder;
    }
        
    #boton-seccion3-branding {
        background-color: black;
        color: white;
    }

    #boton-seccion3-marketing:hover,
    #boton-seccion3-diseno:hover,
    #boton-seccion3-branding:hover {
        background-color: #BEDFFB;
        border: 2px solid black;
        color: black;
    }

    #foto img {
		height: 400px;
		box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
	}
    
    
    /* @MEDIAS */
    
    @media only screen and (max-width: 584px) {
        
        .typing-demo {
            font-size: 50px !important;
        }
    
        .typing-static{
            font-size: 20px !important;
        }

        #botones {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            
        }

        #botones #btn1 #btn2{
            font-size: 12px;
            height: 100px;
            width: 80px;
            margin-left: 10px;
        }

        #botones2 #btn1 {
            font-size: 14px;
        }
    
        #seccion-3 > div {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                justify-content: center;
                height: 570px;
                width: 100% !important;
        }
    
        .parrafo-seccion-3 {
            font-size: 14px; 
            margin-bottom: -296px; 
        }
    
        #texto-seccion-3 {
            font-size: 18px; 
            margin-bottom: 15px; 
        }
    
        #logo {
            max-width: 100%;
            height: 35px; 
            margin-bottom: 15px; 
        }
    
        .boton-seccion3 {
            width: 100% !important;  
            margin: 10px 0; 
            font-size: 12px; 
            padding: 10px;
            white-space: nowrap; 
            width: 342px !important;
        }
    }
    
    @media only screen and (max-width: 300px) {
        
        .typing-demo {
            font-size: 30px !important;
        }
    
        .typing-static{
            font-size: 15px !important;
        }

        #botones {
            display: flex;
            align-items: center;
            justify-content: center;
    
        }

        #botones #btn1 #btn2{
            font-size: 12px;
            height: 100px;
            width: 60px;
           
        }
        
        #botones2 #btn1 {
            font-size: 12px;
        }
    
        #seccion-3 > div {
            display: flex;
            flex-direction: column;
            align-items: center; 
            text-align: center; 
        }

        #logo {
            max-width: 100%;
            height: 35px; 
            margin-bottom: 15px; 
        }
    
        #parrafo-seccion-3, 
        #texto-seccion-3 {
            font-size: 12px; 
        }
     
        .boton-seccion3 {
            width: 100%; 
            font-size: 10px; 
            padding: 8px 16px; 
            margin-bottom: 5px;
            white-space: nowrap;  
        }
    }
    
    @media only screen and (max-width: 990px) {
      
        .animated-title > div.text-bottom {
            margin-left: 120px;
            font-size: 40px;
        }
      
        #botones #btn1 {
            font-weight: bold;
            background-color: rgb(44, 44, 44);
            border:2px solid black;
            font-size: 12px;
            color: white;
            height:50px;
        }
    
        #botones #btn2 {
            font-weight: bold;
            background-color: rgb(248, 248, 248);
            padding:7px;
            border:2px solid black;
            font-size: 12px;
            color: black;
            margin: 10px;
            height:50px;
        }
    
        #foto img {
            margin-top:20px;
            height: 200px;
        }
    
        #seccion-1 {
            height: auto;
            font-size: 20px; 
            background-color: #FFFFFF;
            display: flex;
            justify-content: space-evenly;
            align-items:center;
            flex-direction: column !important;
            padding:30px;
            border-bottom: 1px solid black;
        }
        
        #seccion-2 {
            height: auto;
            font-size: 20px; 
            background-color: #DCDCDC;
            display: flex;
            justify-content: space-evenly;
            align-items:center;
            flex-direction: column !important;
            padding:30px;
            border-bottom: 1px solid black;
        }
      
        
        #parrafo-seccion-3 {
            font-size: 16px; 
        }
    
        #texto-seccion-3 {
            font-size: 20px; 
        }
    
        #logo {
            height: 40px; 
            margin-bottom: 20px; 
        }
    
        .boton-seccion3 {
                font-size: 12px;
                padding: 12px; 
                width: 275px;
        }
    
        #seccion-3 > div {
            font-size: 16px; 
            margin: 5px; 
            width: calc(50% - 10px); 
        }
    
        #texto-seccion-1, #texto-seccion-2 {
            font-size: 10px;
            margin:10px;
            display: flex;
            width:90%;
            justify-content: center;
            text-align: center;
            flex-direction: column !important;
        }
    
        p {
            font-size: 20px;
        }
    
    }
    
    @media (min-width: 700px) and(max-width: 1200px) {
      
        .animated-title > div.text-top {
            font-size: 30px;
            border-bottom: 1vmin solid #BEDFFB;
            top: 0;
        }
      
        #abc {
            margin-left:160px;
        }
    
        .animated-title > div.text-top div span:first-child {
            color: #ffffff;
        }
      
        .animated-title > div.text-bottom {
            bottom: 0;
            color: #BEDFFB;
            margin-left: 170px;
            font-size: 60px;
            text-shadow: 0px 0px 0 rgb(169,202,230),
                     0px 1px 0 rgb(149,182,210),
                     0px 2px 0 rgb(128,161,189),
                     0px 3px  0 rgb(107,140,168),
                     0px 4px 3px rgba(255,252,252,0.22),
                     0px 4px 1px rgba(255,252,252,0.5),
                     0px 0px 3px rgba(255,252,252,.2);
        }
    
        #seccion-3 > div {
            align-items: center;
            width: calc(33.333% - 20px);
        }
    
        #seccion-3 {
            justify-content: center;
        }
    
        #parrafo-seccion-3,
        #texto-seccion-3 {
            font-size: 18px; 
        }
    
        #logo {
            height: 60px; 
        }
    
        .boton-seccion3 {
            width: calc(100% - 60px); 
            font-size: 14px;
            padding: 12px 20px; 
            max-width: 300px;
        }
    }
    
    @media (min-width: 1920px) and (max-width: 2560px)  {
    
        #titulo-seccion-1, #titulo-seccion-2 {
            font-size:50px;
        }
    
        #seccion-3 > div {
            width: calc(33.333% - 20px); 
            padding: 40px; 
            display: flex;
            flex-direction: column;
            justify-content: flex-start; 
        }
    
        .boton-seccion3 {
                height: 50px;
                padding: 6px;
                width: 300px;
                max-width: 90%;
                margin-bottom: 10px;
                border: 2px solid black;
                font-size: 13px;
                color: black;
                font-weight: bolder;
        }
      
      
        #texto-seccion-3 {
            font-size: 25px; 
        }
    
        #parrafo-seccion-3 {
            font-size: 20px; 
        }
    
        #foto img {
            max-height: 150px;
        }
      
        .animated-title > div.text-top {
            font-size: 50px;
            border-bottom: 1vmin solid #BEDFFB;
            top: 0;
        }
        
        #abc {
            margin-left:145px;
        }
    
        .animated-title > div.text-top div span:first-child {
            color: #ffffff;
        }
      
        .animated-title > div.text-bottom {
            bottom: 0;
            color: #BEDFFB;
            margin-left: 170px;
            font-size: 80px;
            text-shadow:0px 0px 0 rgb(169,202,230),
                        0px 1px 0 rgb(149,182,210),
                        0px 2px 0 rgb(128,161,189),
                        0px 3px  0 rgb(107,140,168),
                        0px 4px 3px rgba(255,252,252,0.22),
                        0px 4px 1px rgba(255,252,252,0.5),
                        0px 0px 3px rgba(255,252,252,.2);
        }
    }
    
    @media (max-width: 1024px) and (max-height: 800px) {
        
      


        #parrafo-seccion-3,
        #texto-seccion-3 {
            font-size: 12px; 
        }
    
        #logo {
            height: 40px;
            width: auto; 
        }
    
        .boton-seccion3 {
            width: 90%;
            margin: 5px 0; 
            font-size: 10px; 
            padding: 8px;
        }
    }