@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Macondo&family=Montez&family=Oleo+Script&family=Roboto+Mono:wght@700&family=Sriracha&display=swap');

 *{padding:0; margin:0; text-decoration: none;}

#banner1{position:absolute; top:10px; left:   0; width:20%; height:60px; }
#banner2{position:absolute; top: 4px; left:0; width:20%; height:60px; z-index:2000;  animation: GIROS1 1s infinite; opacity:0.3;}
@keyframes GIROS1{from{transform:rotateY(0deg)} to {transform:rotateY(360deg);}}


#back{
    position:absolute;
    top:70px;
    left:90%;
    width:40px;
    height:40px;
    border-radius:50%;
    font-size:40px;
    color:blue;
    cursor:pointer;
    z-index: 8;
}
#back:hover {
    width:38px;
    height:38px;
    box-shadow:0 0 4px 2px black;
}



.mizviajes{
    position: absolute;
    top: 20px;
    left:32%;
    width: 40%;
    height: auto; /* Altura automática según contenido */
    font-size: min(5vw, 30px); /* Usa 5vw pero nunca más de 40px */
    color: #4E94A0;
    overflow: hidden; /* Opcional: contiene el texto */
    text-overflow: ellipsis; /* Opcional: añade ... si el texto es muy largo */
    white-space: nowrap; /* Opcional: evita saltos de línea */
    font-weight: bold;
}

.agenc_esp{ position:absolute; top:50px; left:32%; width:70%; height:30px; font-size:20px; color:#4E94A0; font-family: 'Macondo', cursive;}


.cuerpo{position:absolute; top:100px; left:3%; width:94%; height:200px; background:yellow;}
    #foto{position:absolute; top:0; left:0; width:35%; height:100%; z-index:500;}
 #paisaje{position:absolute; top:0; left:0; width:100%; height:100%; opacity:0.7; }

.cubous{position:absolute; top:320px; left:1%; width:98%; display: flex;  flex-direction:column;}
.cubos{text-align:center; margin-bottom:10%;}

#text0{color:#4B5981; font-size:25px; background:pink;}
#text1{color:#351F80; font-size:16px; font-family: 'Roboto Mono', monospace;}
#text2{color:#4B5981; font-size:20px; font-family: 'Roboto Mono', monospace;} 
#text3{color:black;   font-size:18px; font-family: 'Fredericka the Great'}
#text4{color:white; font-size:24px; font-family: 'Macondo', cursive; background:#39B4AE;}
#text5{color:#39B4AE; font-size:18px; font-family: 'Macondo', cursive;}
#text6{color:#0B8B85; font-size:18px; font-family: 'Oleo Script', cursive;}
#text7{color:#FA3D26; font-size:18px; font-family: 'Sriracha', cursive;}

.socialite{margin-left:10%; width:80%; height:auto;}
.circle {
  width: 50px;
  height: 50px;
  background: green;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  position: absolute;
}

.circle::before, .circle::after {
  content:"";
  position:absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border: 10px solid gray;
  border-radius:100%;
  animation: latido linear 3s infinite;
}

.circle::after {
  animation-delay: -1.5s;
}

@keyframes latido {
  0% { width:50px; height:50px; border:5px solid green; }
  100% { width:100px; height:100px; border:10px solid transparent; }
}

.icono {
  width: 50px;
  height: 50px;
border-radius:50%;
}

#button-0 { top:480px; left: 160px; } 

#telf{font-size:30px;}
 
#logo_MZ {
    position: absolute;
    top: 5px;
    left: 15px;
    width: 80px;
    height: 100px;
}

.mariposa_fija {
    position: absolute;
    top: 60px;
    left: 55px;
    width: 30px;
    height: 50px;
    z-index: 2;
    opacity: 0.4;
}

/* Ala izquierda (reflejada con scaleX) */
.left-wing {
    position: absolute;
    width: 50px;
    height: 100px;
    left: 0;
    transform: scaleX(-1);
    transform-origin: 0% 50%; /* ← Este es el truco correcto */
    z-index: 1;
    animation: flapLeft var(--animation-speed) infinite ease-in-out;
}


/* Ala derecha (normal) */
.right-wing {
    position: absolute;
    width: 50px;
    height: 100px;
    left: 1px;
    transform-origin: 0% 50%;
    z-index: 1;
    animation: flapRight var(--animation-speed) infinite ease-in-out;
}

/* Aleteo de ala izquierda */
@keyframes flapLeft {
    0%   { transform: translateY(-50%) rotateY(0deg) scaleX(-1); }
    50%  { transform: translateY(-50%) rotateY(80deg) scaleX(-1); }
    100% { transform: translateY(-50%) rotateY(0deg) scaleX(-1); }
}

/* Aleteo de ala derecha */
@keyframes flapRight {
    0%   { transform: translateY(-50%) rotateY(0deg) scaleX(1); }
    50%  { transform: translateY(-50%) rotateY(-90deg) scaleX(1); }
    100% { transform: translateY(-50%) rotateY(0deg) scaleX(1); }
}

/* Vuelo rotativo y desplazamiento de la mariposa */
@keyframes girarYvolar {
    0%   { transform: translateX(-50%) rotate(180deg) scale(0.8); }
    47%  { transform: translateX(-10%) rotate(180deg) scale(0.8); }
    50%  { transform: translateX(10%) rotate(20deg) scale(0.8); }
    97%  { transform: translateX(-10%) rotate(0deg) scale(0.8); }
    100% { transform: translateX(-50%) rotate(180deg) scale(0.8); }
}


.wing-rapido  { --animation-speed: 0.20s; }
.wing-normal  { --animation-speed: 0.4s; }
.wing-lento   { --animation-speed: 4.2s; }

 
 
 
 
 
 
 
 
 
 
    
 @media screen and (min-width: 450px) {
#banner1{position:absolute; top:10px; left:10px; width:50px; height:40px; }
#banner2{position:absolute; top:4px; left:10px; width:50px; height:40px; z-index:2000;  animation: GIROS1 1s infinite; opacity:0.3;}
.mizviajes{
    position: absolute;
    top: 30px;
    left: 120px;
    width: 40%;
    height: auto; /* Altura automática según contenido */
    font-size: min(5vw, 30px); /* Usa 5vw pero nunca más de 40px */
    color: #4E94A0;
    overflow: hidden; /* Opcional: contiene el texto */
    text-overflow: ellipsis; /* Opcional: añade ... si el texto es muy largo */
    white-space: nowrap; /* Opcional: evita saltos de línea */
    font-weight: bold;
}


.agenc_esp{position:absolute; top:40px; left:40%; width:70%; height:20px; font-size:20px; color:#4E94A0; }

 .cuerpo{position:absolute; top:110px; left:1%; width:98%; height:200px; background:yellow;}
#paisaje{position:absolute; top:0;    left:0; width:100%; height:100%; opacity:0.7; }
  #foto{position:absolute; top:0; left:0; width:30%; height:100%; z-index:500;}

.cubous{position:absolute; left:15%; width:70%; display: flex;  flex-direction:column;}
.cubos{text-align:center; color:#FA3D26; font-size:40px;}

 .contac{width:40px; height:40px;} .contac:hover{width:45px; height:45px;}
}
 
@media screen and (min-width: 820px) {

#banner1{position:absolute; top:10px; left:0; width:120px; height:80px; }
#banner2{position:absolute; top:4px; left:10px; width:100px; height:80px; z-index:2000;  animation: GIROS1 1s infinite; opacity:0.3;}

#back {
    position:absolute;
    top:30px;
    left:90%;
    width:40px;
    height:40px;
    border-radius:50%;
    font-size:40px;
    color:blue;
}



.agenc_esp {
    position: absolute;
    top: 32px;
    left: 35%;
    width: 40%;
    height: 30px;
    font-size: 28px;
    color: #4E94A0;
    font-family: 'Macondo', cursive;
}




 .cuerpo{position:absolute; top:120px; left:10%; width:80%; height:400px; background:yellow;}
#paisaje{position:absolute; top:0;    left:0; width:100%; height:100%; opacity:0.7; }
   #foto{position:absolute; top:0; left:0; width:30%; height:100%; z-index:500;}

.cubous{position:absolute; top:550px; left:15%; width:70%; display: flex; flex-direction:column;}

 .contac{width:60px; height:60px;} .contac:hover{width:55px; height:55px;}

#text0{color:#4B5981; font-size:40px; background:pink;}
#text1{color:#351F80; font-size:20px; font-family: 'Roboto Mono', monospace;}
#text2{color:#4B5981; font-size:25px; font-family: 'Roboto Mono', monospace;} #text2:hover{font-size:30px;}
#text3{color:black;   font-size:25px; font-family: 'Fredericka the Great'}
#text4{color:white; font-size:30px; font-family: 'Macondo', cursive; background:#39B4AE;}
#text5{color:#39B4AE; font-size:18px; font-family: 'Macondo', cursive;}
#text6{color:#0B8B85; font-size:18px; font-family: 'Oleo Script', cursive;}
#text7{color:#FA3D26; font-size:18px; font-family: 'Sriracha', cursive;}

.cubos{text-align:center; margin-bottom:5%;}
#button-0 { top:460px; left: 47%; } 

}