/* css document - For mobile phones: */ 
body{color:#FFD4AA; font:1em Arial, sans-serif;background: linear-gradient(to bottom,  #000 0%, #000a14 70%, #00101f 100%); }
header{margin:0 auto;border-bottom:2px dotted #645b60;overflow:hidden;margin-bottom:35px; background:#000 url(img/bg-luna.jpg) no-repeat 2% 0%;} 
section,footer{max-width:580px;margin:0 auto;padding:10px;}
footer{border-top:2px #545 dotted;font-size:0.8em;margin:30px 0;} 
h1{font-family:Verdana, sans-serif;color:#a56d5c;}
h3{color:#E7A128;margin:0;text-shadow:0 0 3px #000;}
h2{color:#edd9c3;}
p{line-height:1.5em;margin:10px 0;} a{color:#ec9;text-decoration:none; font-weight:bold;}
img{width:100%;max-width:515px;}
.title{color:#c99c81}
.tarifa{margin:-10px 0 10px 0;text-align:center;color:#8a9;;}
.tel2 {font-size:1.8em;}.tel2 a{color:#0df}
.left{float:left;padding:5px 15px;}
.right{display:block;float:right}
ul li {padding:10px 0;list-style-type:none;} 
ul li a{color:#ccc;font-weight:bold;}
li::before {content:"-";color:green; margin-right:3px;}
.site-name{font-size:1.9em;font-family:Verdana, sans-serif; color:#a56d5c; padding:0;margin:0;text-shadow:0 0 1px #fff;}
.domain{color:#8a9;}
.slogan{font-size:1em;}
.pie{margin: 10px 0 }
.space{height:40px; width:auto; font-size:1.8em; margin-top:25px; padding-left:25px;}
.pspace{padding-left:20px; }
.domain,.slogan{text-shadow:0 0 1px #000;}
.center{text-align:center;}

/* --- LOGICA DEL MENU (Mobile First) --- */
/* El boton solo se ve en movil */
.menu-toggle {
    display: block; 
    background: rgba(165, 109, 92, 0.3);
    color: #ec9;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #a56d5c;
    margin: 10px;
    font-weight: bold;
    border-radius: 4px;
}
/* El menú en móvil empieza oculto */
.menu-movil {
    display: none; 
    background: rgba(0, 0, 0, 0.6);
    padding: 10px;
}
.menu-movil a {
    display: block; /* Uno debajo de otro en móvil */
    padding: 9px;
    border-bottom: 1px solid #333;
    color: #ffd47f; text-align:right;
}
/* boton */
.contenedor-boton {
    text-align: center;
    margin: 30px 0;
    padding: 0 10px;
}

.btn-tel {
    display: inline-block;
    background: linear-gradient(180deg, #22c1c3 0%, #2dbdcb 100%); /* Un azul/turquesa vibrante */
    color: #fff !important; /* Forzamos blanco para que resalte */
    font-size: 1.6em;
    font-weight: bold;
    padding: 15px 25px;
    border-radius: 50px; /* Bordes redondeados tipo cápsula */
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 200, 255, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    border: 2px solid rgba(255,255,255,0.2);
}

.btn-tel:active {
    transform: scale(0.95); /* Efecto de "hundirse" al tocarlo */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.btn-tel .icon {
    margin-right: 10px;
    font-size: 1.2em;
}

.tarifa-boton {
    font-size: 0.75em;
    color: #8a9;
    margin-top: 8px;
}

/* flotante */ 

.btn-flotante {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(145deg, #00d2ff, #00adff);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    z-index: 1000;
    text-decoration: none;
    animation: latido 2s infinite; /* Animación para llamar la atención */
}

@keyframes latido {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* boton con info */ 
.btn-flotante-info {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(145deg, #0081a7, #00afb9); /* Tonos serios pero llamativos */
    color: white !important;
    padding: 10px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    text-decoration: none;
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.3);
    animation: pulso-suave 2s infinite;
}

.icono-tel {
    font-size: 24px;
    margin-right: 12px;
}

.texto-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.llamar-txt {
    font-size: 0.9em;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.precio-txt {
    font-size: 0.65em;
    opacity: 0.9;
}

/* Animación de pulso que no marea pero atrae el ojo */
@keyframes pulso-suave {
    0% { transform: scale(1); box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
    50% { transform: scale(1.05); box-shadow: 0 4px 25px rgba(0,175,185,0.6); }
    100% { transform: scale(1); box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
}

/* Esconder en PC para no estorbar el diseño limpio */
@media screen and (min-width: 601px) {
    .btn-flotante-info {
        display: none;
    }
}
/* --- AJUSTES PARA ESCRITORIO (Media Query) --- */
@media screen and (min-width: 601px) {
    .menu-toggle {
        display: none !important; /* Escondemos el botón de "Menú" en PC */
    }
    .menu-movil {
        display: block !important; /* Siempre visible en PC */
        background: transparent;
        text-align: center;
        margin-bottom: 20px;
    }

    .menu-movil a {
        display: inline-block; /* Uno al lado de otro en PC */
        margin: 0 10px;
        border-bottom: none;
        background: rgba(255,255,255,0.05);
        padding: 8px 15px;
        border-radius: 5px;
    }

    header, footer {
        max-width: 90%;
        min-height: 140px;
        padding: 0 10% 0 10%;
    }
body{background-position: 0 0;}
header,footer{max-width:90%;min-height:140px;padding:0 10% 0 10%; }
.cap{max-width:1500px;margin:0 auto;}
section{background: url(img/bg-carta-gris.jpg) no-repeat 75% 8%;}
section,.pie{max-width:800px;margin:0 auto;}
.left{display:block;float:left}
h1{font-size:2.2em;;margin:15px 0;} img{width:auto;}
.site-name{font-size:2.1em;}
.domain{font-size:1.3em;}
.slogan{font-size:1.1em; margin-top:25px;}
.none{float:none;width: auto; height:auto;padding:5px;}
.space{height:50px; width:auto; margin-top:45px; }
.cap,.left,.right{width:auto;height:auto;}
.menu-movil{margin-top:58px;}
.btn-tel {
        font-size: 1.8em;
        padding: 18px 40px;
    }
    .btn-tel:hover {
        background: linear-gradient(180deg, #2dbdcb 0%, #22c1c3 100%); /* Invierte el brillo */
        box-shadow: 0 6px 20px rgba(0, 200, 255, 0.5);
    }
}