@font-face {
        font-family: 'Neue Montreal';
        src: url('../models/NeueMontreal-Regular.woff2') format('woff2'),
             url('../models/NeueMontreal-Regular.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }

    @keyframes slideInFromTop {
        from {
            transform: translateY(-100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }   
    }

    @keyframes borderAnimation {
        from {
            width: 0;
        }
        to {
            width: 100%;
        }
    }

/* Float animation for the Fisher logo */
    @keyframes float {
        0% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-10px);
        }
        100% {
            transform: translateY(0px);
        }
    }

/* Pulse animation for CTA buttons */
    @keyframes pulse {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.05);
        }
        100% {
            transform: scale(1);
        }
    }   

    .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s ease;
    }

    .reveal.active {
        opacity: 1;
        transform: translateY(0);
    }


    .portada1 {
        height: 820px;
        width: 1313px;
        top:-10px;
        left:-17px;
        background-image: url('../img/imagen-principal.png');
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        margin:0;
    }

    .rectanguloBlanco {
        animation: slideInFromTop 0.7s ease-out;
        position: absolute;
        top: -79px; 
        left: 160px; 
        /*transform: translate(-50%, -50%)*/; /* Aplica el centrado */
        background-color: #ffffff;
        color: #020202;
        border-radius: 54px;
        text-align: center;
        width: 960px;
        height: 159px;
        z-index: 1; /* Asegúrate de que el rectángulo esté encima de la imagen */
    }

    .logo_PeruH{
        position: absolute; /* No es necesario posicionarlo absolutamente aquí */
        /*margin-top: 40px;*/ /* Margen superior para el logo */
        top: 103px;
        left: 80px;
        width: 130px;
        height: 30.71px;
        z-index: 1;
        animation: fadeIn 1s ease-out 0.5s both;
    }

    .rectanguloVerde{
        position:absolute;
        height: 47px;
        width: 206px;
        left: 835px;
        top: 16px;
        border-radius: 11px;
        z-index: 1;
        background-color: #14666b;
        color: white;
        /*text-align: center;*/
        line-height: 16px;
        display:flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        size: 9px;
        font-family: 'Neue Montreal', sans-serif;
        animation: fadeIn 1s ease-out 0.7s both;        
    }

    .rectanguloAmarillo{
        width: 1340px;
        height: 45px;
        top: 80px;
        left:-30px;
        position:absolute;
        background-color: #FFCC16;
        color: #333333;
    }

    .texto2{
        align-items: center;
        left : 416px;
        position: absolute;
        font-size: 16px;    
        font-family: 'Neue Montreal', sans-serif;
        font-weight: 700;
    }
      
    .texto3{
        align-items: center;
        left: 690px;
        position:absolute;
        font: 16px;
        font-family: 'Neue Montreal', sans-serif;
        font-weight: 400;

    }

    .rectanguloNaranjaPequeño{
        align-items: center;
        text-align: center;
        width: 60px;
        height: 27px;
        position: absolute;
        top: 10px;
        left: 868px;
        background-color: #F08323;
        border-radius: 4px;
        color: white
    }
    
    .rectanguloNaranjaPequeño a{
        display: block;
        width: 100%;
        height: 100%;
    }

    .texto4{
        align-items: center;
        text-align:center;
        position:relative;
        top: -10px;
        font-family: "Neue Montreal",sans-serif;
        font-weight: 700;
        cursor: pointer;
    
    }

    .rectanguloDegrade1{
        position: absolute;
        width:516px;
        height:55px;
        top:196px;
        left:-20px;      
    }

    .texto5{
        position: absolute;
        /*align-items: center;*/
        /*text-align: center;*/
        font-size: 35px;
        left: 184px;
        color:white;
        font-family: "Neue Montreal", sans-serif;
        font-weight: 700;
        top: -29px;    
        animation: fadeIn 0.5s ease-out 0.5s both;          

    }

    .texto6{
        position: absolute;
        font-size:31px;
        left: 172px;
        top: 224px;
        color:white;
        font-family:"Neue Montreal",sans-serif;
        font-weight: 300;
        animation: fadeIn 1s ease-out 1s both;
    }

    .textoSnappy{
        color:white;
        font-family:"Neue Montreal",sans-serif;
        font-weight: 700;
        animation: fadeIn 1.5s ease-out 1.5s both;
    }

    .texto7{
        position: absolute;
        font-size: 12px;
        left:172px;
        top: 335px;
        color: white;
        font-family:"Neue Montreal",sans-serif;
        font-weight: 700;
        line-height: 11px;
    }

    .texto8{
        position: absolute;
        font-size: 12px;
        left:172px;
        top: 360px;
        color: white;
        font-family:"Neue Montreal",sans-serif;
        font-weight: 700;
        line-height: 11px;
    }

    .texto9{
        position: absolute;
        font-size: 12px;
        left:172px;
        top: 380px;
        color: white;
        font-family:"Neue Montreal",sans-serif;
        font-weight: 700;
        line-height: 11px;
    }

    .texto10{
        position: absolute;
        font-size: 12px;
        left:172px;
        top: 400px;
        color: white;
        font-family:"Neue Montreal",sans-serif;
        font-weight: 700;
        line-height: 11px;
    }

    .texto11{
        position: absolute;
        font-size: 12px;
        left: 246px;
        top: 360px;
        color: white;
        font-family:"Neue Montreal",sans-serif;
        font-weight: 400;
        line-height: 11px;
    }

    .texto12{
        position: absolute;
        font-size: 12px;
        left: 246px;
        top: 380px;
        color: white;
        font-family:"Neue Montreal",sans-serif;
        font-weight: 400;
        line-height: 11px;
    }

    .texto13{
        position: absolute;
        font-size: 12px;
        left: 246px;
        top: 400px;
        color: white;
        font-family:"Neue Montreal",sans-serif;
        font-weight: 400;
        line-height: 11px;
    }

    .UL{
        position: absolute;
        height: 60px;
        width: 60px;
        left: 410px;
        top: 355px;   
    }

    .rectanguloBlancoPequeño{
        position:absolute;
        height:27px;
        width:134px;
        top: 436px;
        left: 170px;
        border-radius: 5px;
        background-color: #F8F8F8;
        color: #14666b;

    }

    .texto14{
        position:relative;
        align-items: center;
        text-align: center;
        top: -8px;
        left: 16px;
        padding:0;
        margin:0;
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
        font-family: "Neue Montreal",sans-serif;
    }

    .cuadraditoNaranja{
        position: relative;
        align-items: center;
        text-align:center;
        background-color: #EF9522;
        width:27px;
        height:27px;
        border-radius: 5px;
        top: -44px;
    }

    .imagenEmbebida{
        position: relative;
        align-content: center;
        top: 4.5px;

    }

    .texto15{
        position:absolute;
        font-family: "Neue Montreal", sans-serif;
        top: 730px;
        left: 175px;
        font-size: 11px;
        font-weight: 400;
        line-height: 14px;
        color:white;

    }

    .rectanguloBlancoGrande{
        position:absolute;
        width:400px;
        height:580px;
        top:249px;
        left:720px;
        border-top-right-radius: 16px;
        border-top-left-radius: 16px;
        background-color: white;
        color: #14666B;
        font-size:28px;
    }

    .texto16{
        position:relative;
        text-align: center;
        font-weight: 400;
        font-family : "Neue Montreal", sans-serif; 
        animation: slideInFromTop 0.7s ease-out;
    }

    .span1{
        position:relative;
        text-align:center;
        font-weight:700;
        font-family: "Neue Montreal", sans-serif;

    }

    .Formato_Nombres{
        position:relative;
        /*align-self: center;
        text-align: center;*/
        align-items: center;
        text-align: center;
        background-color: white;        
    }

    .Nombres{
        background-color: #F2F2F2;
        border-radius: 6px;      
        border-width:  1px;
        border-color: #b1b1b1;
        width:337px;
        height:29px;
        transition: all 0.3s ease;
        /*align-items: center;
        text-align: center;*/
        
    }
    
    .Nombres:focus{
        transform: translateX(5px);
        border: 2px solid #14666b;
        background-color: #ffffff;
    }

    .Formato_Apellido_Paterno{
        position:relative;
        /*align-self: center;
        text-align: center;*/
        align-items: center;
        text-align: center;
        background-color: white; 
        top:10px;       
    }

    .Apellido_Paterno{
        background-color: #F2F2F2;
        border-radius: 6px;      
        border-width:  1px;
        border-color: #b1b1b1;
        width:337px;
        height:29px;
        transition: all 0.3s ease;
        /*align-items: center;
        text-align: center;*/
        
    }

    .Apellido_Paterno:focus{
        transform: translateX(5px);
        border: 2px solid #14666b;
        background-color: #ffffff;

    }

    .Formato_Apellido_Materno{
        position:relative;
        /*align-self: center;
        text-align: center;*/
        align-items: center;
        text-align: center;
        background-color: white;
        top:20px;        
    }

    .Apellido_Materno{
        background-color: #F2F2F2;
        border-radius: 6px;      
        border-width:  1px;
        border-color: #b1b1b1;
        width:337px;
        height:29px;
        transition: all 0.3s ease;
        /*align-items: center;
        text-align: center;*/
        
    }

    .Apellido_Materno:focus{
        transform: translateX(5px);
        border: 2px solid #14666b;
        background-color: #ffffff;
    }

    .Formato_Correo{
        position:relative;
        /*align-self: center;
        text-align: center;*/
        align-items: center;
        text-align: center;
        background-color: white;
        top: 30px;        
    }

    .Correo{
        background-color: #F2F2F2;
        border-radius: 6px;      
        border-width:  1px;
        border-color: #b1b1b1;
        width:337px;
        height:29px;
        transition: all 0.3s ease;
        /*align-items: center;
        text-align: center;*/
        
    }

    .Correo:focus{
        transform: translateX(5px);
        border: 2px solid #14666b;
        background-color: #ffffff;
    }

    .Formato_Celular{
        position:relative;
        /*align-self: center;
        text-align: center;*/
        align-items: center;
        text-align: center;
        background-color: white;
        top: 40px;        
    }

    .Celular{
        background-color: #F2F2F2;
        border-radius: 6px;      
        border-width:  1px;
        border-color: #b1b1b1;
        width:337px;
        height:29px;
        transition: all 0.3s ease;
        /*align-items: center;
        text-align: center;*/
        
    }

    .Celular:focus{
        transform: translateX(5px);
        border: 2px solid #14666b;
        background-color: #ffffff;
    }

    .Formato_RUC{
        position:relative;
        /*align-self: center;
        text-align: center;*/
        align-items: center;
        text-align: center;
        background-color: white;        
        top:50px;
    }

    .RUC{
        background-color: #F2F2F2;
        border-radius: 6px;      
        border-width:  1px;
        border-color: #b1b1b1;
        width:337px;
        height:29px;
        transition: all 0.3s ease;
        /*align-items: center;
        text-align: center;*/
        
    }

    .RUC:focus{
        transform: translateX(5px);
        border: 2px solid #14666b;
        background-color: #ffffff;
    }

    .Formato_Razon_Social{
        position:relative;
        /*align-self: center;
        text-align: center;*/
        align-items: center;
        text-align: center;
        background-color: white;     
        top: 60px;   
    }

    .Razon_Social{
        background-color: #F2F2F2;
        border-radius: 6px;      
        border-width:  1px;
        border-color: #b1b1b1;
        width:337px;
        height:29px;
        transition: all 0.3s ease;
        /*align-items: center;*/
        /*text-align: center;*/       
    }

    .Razon_Social:focus{
        transform: translateX(5px);
        border: 2px solid #14666b;
        background-color: #ffffff;
    }

    .rectanguloNaranjaGrande{
        background-color: #EF9522;
        border-radius: 12px;
        width: 206px;
        height: 56px;
        top: 95px;
        left: 95px;
        align-items:center;
        position: relative;
        text-align:center;
        color: white;
        animation: pulse 2s infinite;
        transition: transform 0.3s ease;
    }

    .rectanguloNaranjaGrande:hover{
        transform: scale(1.1);
    }
    .rectanguloNaranjaGrande2:hover{
        transform: scale(1.1);
    }
    /*.rectanguloNaranjaGrande3:hover{
        transform: scale(1.1);
    }*/

    .texto17{
        text-align:center;
        position: relative;
        top: -5px;
        font-size:20px;
        font-weight: 700;
        font-family : "Neue Montreal", sans-serif; 

    }

    .Seccion2{
        height: 597px;
        width: 1313px;
        background-size: cover;
    }

    .rectanguloVerdeGrande{
        height: 469px;
        width: 801px;
        background-color: #115f64;
        position: relative;
        border-top-left-radius: 33px;
        border-bottom-right-radius: 33px;
        /*align-items: center;
        align-content: center;*/
        top: 64px;      
        left: 239px;
    }

    .texto18{
        top:49px;
        left:63px;
        position:absolute;
        color: white;
        font-size: 28px;
        font-family : "Neue Montreal", sans-serif; 

        /*background-color: black;*/


    }

    .textoFisher{
        top: 80px;
        left: 187px;
        position: absolute;
        font-family : "Neue Montreal", sans-serif; 


    }
    
    .textoFisher img {
        animation: float 3s ease-in-out infinite;
    }

    .texto19{
        left: 312px;
        top: 78px;
        position:relative;
        color:white;
        font-size:28px;
        font-family : "Neue Montreal", sans-serif; 

    }

    .texto20{
        /*background-color: white;*/
        color:white;
        width: 285px;
        left: 63px;
        position:absolute;
        text-align: justify;
        top: 110px;
        font-family : "Neue Montreal", sans-serif; 

    }

    .escudito{
        position: absolute;
        top: 292px;
        left:63px;

    }

    .texto21{
        color: white;
        left: 141px;
        position:absolute;
        top: 270px;
        font-size: 20px;
        width: 156px;
        height:53px;
        font-family : "Neue Montreal", sans-serif; 
    }

    .mensajeEstrella{
        left:63px;
        position:absolute;
        top: 367px;
    }

    .texto22{
        left: 141px;
        position:absolute;
        top: 346px;
        color:white;
        font-size:20px;
        width:168px;
        font-family : "Neue Montreal", sans-serif; 
    }

    .circuloVerde{
        position: absolute;
        left:1180px;
        top:709px;        
    }

    .carrito{
        position: relative;
        top: -37px;
        left: -510px;
    }

    .video{
        position: relative;
        width: 286px;
        height: 298px;
        left: 450px;
        top: 0 px;
        background-color: white;
        border-radius: 18px;
        overflow: hidden;
    }

        .video video {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Mantiene la proporción y cubre el contenedor */
        border-radius: 18px;
    }

    .rectanguloNaranjaGrande2{
        position: absolute;
        top: 385px;
        width: 286px;
        height: 56px;
        left:450px;
        background-color: #ef9522;
        color: white;
        font-weight: 700;
        border-radius: 13px;
        font-size: 20px;
        animation: pulse 2s infinite;
        transition: transform 0.3s ease;
    }

    .texto23{
        position:relative;
        text-align: center;
        top: -1px;
        font-size: 20px;
        line-height: 20px;
        font-family : "Neue Montreal", sans-serif; 
    }

    .Seccion3 {
        width:1296px;
        left: -12px;
        height:99px;
        background-color: #ffffff;
    }

    .Seccion4 {
        height: 893px;
        width: 1313px;
        left: -17px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        position: relative;
        background-color: #ffffff; /* Fondo crema */
    }

    .Seccion4 canvas {
        display: block;
        width: 100% !important; /* Asegura que el canvas ocupe todo el ancho */
        height: 100% !important; /* Asegura que el canvas ocupe toda la altura */
    }


    .Titulo_Seccion4{
        width: 290px;
        
        height: 47px;
        text-align:center;
        font-size:32px;
        align-items: center;
        left:520px;
        position: absolute;
        font-family : "Neue Montreal", sans-serif;
        font-weight: 400; 
        color: #14666b;
        
    }

    .texto24{
        font-weight: 700;
    }

    .Seccion5{
        width: 1313px;
        height: 779px;


    }

    .texto25{
        font-size:32px;
        top: 61px;
        left: 242px; 
        position: relative;
        width: 245px;
        height: 45px;
        color: #FFA628;
        font-weight: 700;

    }

    .texto26{
        text-align:justify;
        position: relative;
        width: 398px;
        height: 76px;
        left: 643px;

    }
    
    .cuadradoVerdeMediano{
        width: 163px;
        height: 153.79px;
        background-color: #14666B;
        top: 60px;
        position: relative;
        border-top-left-radius: 15px;
        border-bottom-right-radius: 15px;
        left:242px;
        transition: transform 0.3s ease;
    }
    
    .cuadradoVerdeMediano:hover {
        transform: translateY(-10px);
    }

    .LocalPeru{
        position: absolute;
        left: 815px;
        top: 2670px;
    }

    .GPSmapa{
        position: relative;
        width:296px;
        height:325px;
        border-radius: 16px;
        background-color: #D9D9D9;
        top: -95px;
        left: 478px;
    }

    .rectanguloNaranjaGrande3{
        position: absolute;
        width:801px;
        height:125px;
        background-color: #EF9522;
        top: 3060px;
        left: 242px;
        border-bottom-left-radius: 33px;
        border-top-right-radius: 33px;
        /*animation: pulse 2s infinite;
        transition: transform 0.3s ease;*/
    }

    .texto27{
        position:absolute;
        width:192px;
        height:46px;
        font-size:32px;
        color: white; 
        left: 46px;
        top: -7px;
        font-weight: 700;
        align-items: center;
        text-align: center;
    }

    .rectanguloVerdeHorizontalGrande{
        width: 1313px;
        height: 311px;
        left:-12px;
        text-align:center;
        font-size:32px;
        align-items: center;
        position: relative;
        font-family : "Neue Montreal", sans-serif;
        font-weight: 400; 
        color: white;
        background-color: #14666B ;
    }

    .texto28{
        font-weight: 400;
        top:64px;
        position: relative;
        justify-content:center;
        font-family: "Neue Montreal", sans-serif;

    }

    .texto29{
        font-weight: 700;
        justify-content:center;
        font-family: "Neue Montreal", sans-serif;
        justify-content: center;
    }

    .Marcas{
        top: 81px;
        position:relative;
        left:-14px;
        width:max-content;
    }

    @keyframes scrollBrands {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
    }

    .Marcas img {
        animation: scrollBrands 10s linear infinite;
        display: inline-block;
        margin-right: 25px;
    }

    .Marcas img:hover {
        transform: scale(1.1);
    }

    .Marcas-container {
        display: inline-block;
        white-space: nowrap;
        animation: scrollBrands 10s linear infinite;
    }

    .Seccion7{
        height:466px;
        width:1313px;
        left:-12px;
        position:relative;
        background-image: url('../img/FondoFooter.png');
        overflow: hidden;
    }



    .texto30{
        position:absolute;
        justify-content: center;
        /*align-items: center;*/
        color:white;
        font-size:28px;
        font-weight:400;     
        align-items: center;
        font-family: "Neue Montreal", sans-serif;
        left: 500px;
        top:59px;
    }

    .texto31{
        position:relative;
        justify-content:center;
        font-weight: 700;
        left: 40px;
    }

    .pt1{
        position:relative;
        top:189px;
        left:430px;
    }

    .pt1 img {
    transition: transform 0.3s ease;   
    }

    .pt1 img:hover {
    transform: translateY(-5px);    
    }

    .pt2{
        position:absolute;
        top:304px;
        left:472px;
    }

    .texto32{
        top: 212px;
        position: relative;
        color: white;
        left: 514px;
        font-size:20px;
    }

    .tablerito1{
        position: relative;
        top:39px;
        left: 272px;
    }

    .texto33{
        position:relative;
        top: -30px;
        left: 330px;
        font-family: 'Neue Montreal',sans-serif;
        color:white;
        font-size:15px;
        
    }

    .tablerito2{
        position:absolute;
        top:38px;
        left:500px;
    }

    .texto34{
        position:absolute;
        top: 23px;
        left: 560px;
        font-family: 'Neue Montreal',sans-serif;
        color: white;
        font-size:15px;
    }
    
    .Marcas {
        position: relative;
        top: 81px;
        left: -14px;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
    }

    .Marcas img {
        display: inline-block;
        animation: scrollBrands 20s linear infinite;
    }