@font-face {
    font-family: ltregular;
    src: url("Assets/fonts/LTWave-Regular.otf");
}
@font-face {
    font-family: ltblack;
    src: url('Assets/fonts/LTWave-Black.otf');
}
html, body{
    margin: 0;
    padding: 0;
}
body{
    margin: 0px;
    padding: 0px;
    height: auto;
}
.br{
        border: solid;
    border-width: 1px;
}
.cuerpo-completo{
    width: 100%;
    background-color: white;
    height: 165vw;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    /* background-image: url('completa.jpg');
    background-repeat: no-repeat;
    background-size: contain; */
}
.botonw{
    position: fixed;
    z-index: 9999;
    top: 18vw;
    left: -2vw;
    width: 6%;
    height: auto;
}
.botonm{
    position: fixed;
    z-index: 9999;
    top: 32vw;
    left: -2vw;
    width: 6%;
    height: auto;
}
.cuadro1{
    width: 55.2%;
    height: 50.2vw;
    position: relative;
    top: 0px;
    left: 0px;
}
.h1{
    font-family: ltregular;
    font-size: 3vw;
    width: 47%;
    height: auto;
    position: absolute;
    top: 5.7vw;
    left: 5.1vw;
}
.h2{
    font-family: ltblack;
    font-size: 3vw;
    position: absolute;
    left: 5.1vw;
    top: 8.6vw;
}
.sello-706{
    width: 39.5%;
    height: auto;
    position: absolute;
    top: 4.2vw;
    left: 40vw;
    z-index: 5;
}
.fot{
    width: 100%;
    height: auto;
}
.lineasepa{
    position: absolute;
    top: 13.7vw;
    left: 5vw;
    width: 180%;
    z-index: 3;
}
.texto1{
    font-family: ltregular;
    font-size: 2.1vw;
    width: 62%;
    height: auto;
    position: absolute;
    top: 17.4vw;
    left: 5vw;
    letter-spacing: -.04vw;
}
.cuadro2{
    width: 47.5%;
    height: 48.9vw;
    position: absolute;
    top: 1.3vw;
    left: 50.2vw;
    z-index: 4;
    background-image: url('Assets/img/curva1.webp');
    background-repeat: no-repeat;
    background-size: contain;
}
.fondocuad1{
    width: 100%;
    height: auto;
    position: relative;
}
.logos1{
    width: 35%;
    height: auto;
    position: absolute;
    top: 12.5vw;
    left: 12vw;
    z-index: 6;
}
.parrafo1{
    font-family: ltregular;
    font-size: 1.6vw;
    color: white;
    position: absolute;
    top: 17.5vw;
    left: 12vw;
    line-height: 1.7vw;
}
.botonver{
    width: 31%;
    height: auto;
    position: absolute;
    top: 25.5vw;
    left: 12vw;
}
.pin1{
    width: 15vw;
    height: 4vw;
    background-image: url("Assets/img/botonporta-on.webp");
    background-repeat: no-repeat;
    background-size: cover;
}
.pin1:hover{
    width: 15vw;
    height: 4vw;
    background-image: url("Assets/img/botonporta-over.webp");
    background-repeat: no-repeat;
    background-size: cover;
}
.mercha1{
    width: 36%;
    height: auto;
    position:absolute;
    top: 27vw;
    left: 28vw;
}
.cuadro3{
     width: 55.2%;
    height: 55.2vw;
    position: relative;
    top: 0vw;
    left: -.6vw;
    background-image: url("Assets/img/curva3.webp");
    background-repeat: no-repeat;
    background-size: 78%;
    background-position: right bottom;
}
.fondocuad2{
    width: 100%;
    height: auto;
    position: relative;
}
.logos2{
    width: 28%;
    height: auto;
    position: absolute;
    top: 29.6vw;
    left: 24.5vw;
    z-index: 6;
}
.parrafo2{
    font-family: ltregular;
    font-size: 1.6vw;
    color: white;
    position: absolute;
    top: 35.5vw;
    left: 24vw;
    line-height: 1.7vw;
}
.botonver2{
    width: 31%;
    height: auto;
    position: absolute;
    top: 43.7vw;
    left: 23.5vw;
}

.mercha2{
    width: 40%;
    height: auto;
    position:absolute;
    top: 4.5vw;
    left: 27.5vw;
}
.cuadro4{
         width: 44.5%;
    height: 55.1vw;
    position: relative;
    top: -55.2vw;
    left: 54.6vw;
    background-image: url("Assets/img/curva2.webp");
    background-repeat: no-repeat;
    background-size: 97%;
    background-position: left top;
}
.fondocuad3{
    width: 100%;
    height: auto;
    position: relative;
}
.logos3{
    width: 28%;
    height: auto;
    position: absolute;
    top: 3.7vw;
    left: 19.8vw;
    z-index: 6;
}
.parrafo3{
    font-family: ltregular;
    font-size: 1.4vw;
    color: white;
    position: absolute;
    top: 9vw;
    left: 10.5vw;
    line-height: 1.7vw;
    text-align: right;
}
.botonver3{
    width: 33.5%;
    height: auto;
    position: absolute;
    top: 19.7vw;
    left: 19.5vw;
    z-index: 4;
}
.botonver3:hover{
    width: 34%;
    height: auto;
    position: absolute;
    top: 19.7vw;
    left: 19.5vw;
    z-index: 4;
}
.mercha3{
    width: 61.5%;
    height: auto;
    position:absolute;
    top: 21vw;
    left: 1.5vw;
}
.cuadro5{
    width: 55.1%;
    height: 63.1vw;
    position: relative;
    top: -55.1vw;
    left: -.6vw;
    background-image: url("Assets/img/curva4.webp");
    background-repeat: no-repeat;
    background-size: 78%;
    background-position: right top;
}
.fondocuad4{
    width: 100%;
    height: auto;
}
.logos4{
    width: 27%;
    height: auto;
    position: absolute;
    top: 4.7vw;
    left: 20vw;
    z-index: 6;
}
.parrafo4{
    font-family: ltregular;
    font-size: 1.5vw;
    color: white;
    position: absolute;
    top: 10.2vw;
    left: 21vw;
    line-height: 1.6vw;
    text-align: left;
}
.botonver4{
    width: 27.5%;
    height: auto;
    position: absolute;
    top: 18.9vw;
    left: 20.5vw;
}
.mercha4{
    width: 48.5%;
    height: auto;
    position:absolute;
    top: 17.6vw;
    left: 33.8vw;
    z-index: 4;
}
.sello{
    position: absolute;
    width: 50%;
    height: auto;
    top: 49vw;
    left: 12vw;
}
.cuadro6{
    width: 45.5%;
    height: 63.1vw;
    position: relative;
    top: -117.8vw;
    left: 54.5vw;
    background-image: url("Assets/img/curva5.webp");
    background-repeat: no-repeat;
    background-size: 104%;
    background-position: left bottom;
}
.fondocuad4{
    width: 100%;
    height: auto;
}
.logos5{
    width: 27%;
    height: auto;
    position: absolute;
    top: 28vw;
    left: 8vw;
    z-index: 6;
}
.parrafo5{
    font-family: ltregular;
    font-size: 1.5vw;
    color: white;
    position: absolute;
    top: 34.2vw;
    left: 8.5vw;
    line-height: 1.6vw;
    text-align: left;
}
.botonver5{
    width: 32.5%;
    height: auto;
    position: absolute;
    top: 42.9vw;
    left: 24.5vw;
}
.mercha5{
    width: 80.5%;
    height: auto;
    position:absolute;
    top: -5.2vw;
    left: 5.2vw;
}
.mapa{
    width: 63%;
    height: auto;
    position: absolute;
    top: 46vw;
    left: -13.7vw;
}




/* ========================= */
/* BACKGROUND ANIMATIONS */
/* ========================= */

.cuadro1 { --bg-size: 100%; }

.cuadro2 { 
    --bg-size: 100%;
    background-image: url('Assets/img/curva1.webp');
    background-repeat: no-repeat;
}

.cuadro3 { 
    --bg-size: 78%;
    background-image: url("Assets/img/curva3.webp");
    background-repeat: no-repeat;
    background-position: right bottom;
}

.cuadro4 { 
    --bg-size: 97%;
    background-image: url("Assets/img/curva2.webp");
    background-repeat: no-repeat;
    background-position: left top;
}

.cuadro5 { 
    --bg-size: 78%;
    background-image: url("Assets/img/curva4.webp");
    background-repeat: no-repeat;
    background-position: right top;
}

.cuadro6 { 
    --bg-size: 104%;
    background-image: url("Assets/img/curva5.webp");
    background-repeat: no-repeat;
    background-position: left bottom;
}

/* Estado inicial */
.cuadro1, .cuadro2, .cuadro3, 
.cuadro4, .cuadro5, .cuadro6 {
    background-size: 0%;
    transition: background-size 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Activo */
.cuadro1.show, .cuadro2.show, .cuadro3.show,
.cuadro4.show, .cuadro5.show, .cuadro6.show {
    background-size: var(--bg-size);
}


/* ========================= */
/* ELEMENTOS GENERALES */
/* ========================= */

.logo, .parrafo, .mercha, .fondo {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.logo.show {
    opacity: 1;
    transform: translateY(0);
}

.parrafo.show {
    opacity: 1;
    transform: translateY(0);
}

/* MERCHA con giro */
.mercha {
    transform: translateY(40px) rotate(-6deg);
}

.mercha.show {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

.fondo.show {
    opacity: 1;
    transform: translateY(0);
}


/* ========================= */
/* HERO (cuadro1) */
/* ========================= */

/* Textos de arriba hacia abajo */
.h1, .h2, .texto1 {
    opacity: 0;
    transform: translateY(-40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.h1.show, .h2.show, .texto1.show {
    opacity: 1;
    transform: translateY(0);
}

/* Sello izquierda → derecha */
.sello-706 {
    opacity: 0;
    transform: translateX(-60px) rotate(-6deg);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.sello-706.show {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
}