html{
    scroll-behavior: smooth;
}

body {
    padding: 0;
    margin: 0;
    background-image: linear-gradient(135deg,#cd93ff, #70e2ff, #9fff5b, #ffe83f, #ffa647, #ff75c3); /* Colores para el degradado */
    background-size: 500%;                          /* Expande el fondo degradado en toda la pantalla */
    min-height: 100vh;                              /* Ocupa todo el alto de la pantalla */
    background-repeat: no-repeat;                   /* Fondo no se repite */
    background-attachment: fixed;                   /* Bloquea fondo para que no se mueva */
    animation: FondoAnimado 10s infinite;           /* Fondo Animado */
    font-family: Arial, Helvetica, sans-serif;      /* Fuentes a utilizar */
    box-sizing: border-box;                         /* Hace que respete el tamano con padding ni margin */
}

/* ---- MENU ---- */
.navbar {
    display: flex;                                  /* Establece el modelo de caja, permitiendo alinear y distribuir los elementos */
    justify-content: center;                        /* Alinea todo a la derecha */
    align-items: center;                            /* Centra verticalmente los elementos */
    position: fixed;                                /* Fija el menu */
    box-sizing: border-box;                         /* Hace que respete el tamano con padding ni margin */
    top: 0;                                         /* Establce la posicion superior */
    height: 4.4rem;                                 /* Altura de la línea del menú */
    width: 100vw;                                   /* Ocupa toda la parte superior */
    z-index: 999;                                   /* Asegura que esté por encima */
    background-color: #408142;                    /* Establece Color Verde */
    color: white;                                 /* Color de Texto Blanco */
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.2);  /* Coloca sombra */

    .nav-links {
    display: flex;                                  /* establece el diseño de la lista como "flexible", Permite colocarlo en horizontal */
    list-style-type: none;                          /* Elimina las viñetas del <ul> */

    & li {
        & a {
            width: 4rem;                           /* Ancho fijo para todos */
            padding: 1em 1.8rem;                   /* añade relleno interno */
            text-align: center;                    /* Centra texto a botones */
            text-decoration: none;                 /* Elimina el subrayado */
            list-style: none;                      /* Elimina las viñetas */
            color: white;                        /* Coloca color Blanco al texto */
            font-weight: bold;                     /* hace que el texto del enlace sea negrita */
            border-bottom: 2px solid transparent;  /* Línea invisible al inicio */
            transition: border-color 0.3s;         /* Suaviza el cambio */

            &:hover{
                border-bottom: 0.5rem solid #d7fd00; /* Color de la línea al pasar el mouse */
                transform: scaleX(1);              /* Muestra la línea */
                }
        }   
    }
}
}

/* ---- Logotipo de la pagina ---- */
.Logo {
    display: flex;                      /* Establece el modelo de caja, permitiendo alinear y distribuir los elementos */
    margin-top: 0.6rem;                 /* Coloca 10px al margen superior */
    position: absolute;                 /* Fija en la parte superior sobre la barra de menu */
    top: 0;                             /* Establce la posicion superior */
    z-index: 10;                        /* Asegura que esté por encima del menu */
    width: 150px;                       /* Ajusta el tamaño según sea necesario */
    left: 20px;                         /* establece logo a la izquierda y añade esacio 20px del margen */
    border-radius: 1.5rem;              /* Hace el borde circular */
}

.google{
    display: flex;
    margin-top: 0.2em;
    margin-left: 1em;
}

.header,
.container {
    width: 95%;
    max-width: 1280px;
    margin-top: 750px;
    margin: auto;
}

.container-links a {                    /* Selecciona Todos los enlaces <a> dentro de la seccion <div class="container service */
    text-decoration: none;              /* Elimina el subrayado */
    list-style: none;                   /* Elimina los puntos numericos del enlace */
}

/* ---- Tarjetas de servicios ---- */
.service-grid {
    display: flex;                      /* Establece modelo de caja */
    flex-direction: column;             /* Define en columnas para distribir el espacio disponible */
    margin: auto;
    width: 1000px;                      /* Establece el ancho de la cuadro */
    box-sizing: border-box;             /* Hace que respete el tamano con padding ni margin */
    margin-top: 100px;    
    gap: 3em;                           /* Añade margen aprox 48px a los elementos en la cuadrícula */
}

.service-card-d,
.service-card-i {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 20px;                /* Bode redondo */
    gap: 20px;
    text-align: center;
    font-size: 1.25em;
    background-color: rgba(0, 0, 0, 0.1);
    overflow: hidden;

    .img-service {
        max-width: 400px;               /* Contenedor ancho maximo 400px */
        height: auto;                   /* un algo automatico */
        flex-shrink: 0;                 /* Evita que la imagen se encoja */
        
        & img {
            width: 100%;                /* Establece tamaño especifico a imagen */
            height: auto;               /* Establece automatico para que no se distorcione */
            align-content: center;      /* Alinea imagen al centro verticalmente */
            padding: 0;                 /* Quita el espacio interior */
            display: block;
            }
    }
    .txt-service {
        flex-grow: 1;                   /* Toma todo el espacio disponible para los textos */
    }
    .btn-cotizar {
    width: 2em;                         /* Ancho aproximado de 32px de ancho */
    margin: 1em;                        /* Margen de 16px aprox */
    padding: 0.5em 1.5em;               /* Margen interno de 8px alto, 24px de ancho */
    border-radius: 0.5em;               /* Redondea bordes */
    background-color: #014e1e;         /* Color del boton */
    color: white;                      /* Color del texto */
    text-decoration: none;              /* quita linea de subrayado */
}
}

.service-card-i {
    flex-direction: row-reverse;        /* Ajusta contenido con imagen a la izquierda */
}

.service-card-d h3 + p,
.service-card-i h3 + p,
.About-card h3 + p {
    padding: 1em;
    text-align: center;
}

.service-card-d,
.service-card-i,
.About-card,
.About {
    &:hover {
      transform: translateY(-5px) scale(1.01);  /* Animacion al pasar el puntero */
    }
}

/* ---- Seccion de About ---- */
.about-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 1000px;
    box-sizing: border-box;    
    margin-top: 2em;

    .About{
        display: flex;                      /* Establece modelo de caja */
        padding: 2em;
        align-items: center;
        gap: 1.5em;
        border-radius: 2em;
        background-color: antiquewhite;
        border: 2px solid #CCA400;

        & img {
            max-width: 170px;
        }
    }
}

.about-grid {
    display: flex;                          /* Establece modelo de caja */
    align-items: center;
    justify-content: space-between;          
    margin-top: 1em;
    gap: 1em;                               /* Añade margen entre */

    .About-card {
        flex:1;                               /* Define el mismo ancho de las columnas */
        align-items: center;                  /* Centra el contenido */
        gap: 1em;                             /* Agrega un espacio entre tarjetas */
        border-radius: 1.5em;                 /* Define el bode redondo */
        padding: 2em;                         /* Margen interno de 32px aprox */
        box-sizing: border-box;               /* Hace que respete el tamano con padding ni margin */
        text-align: center;
        background-color: antiquewhite;
        border: 2px solid #CCA400;

        & img {
            max-width: 100px;
            height: auto;  
        }
    }
}

/* ---- Formulario Citas ---- */
.appointments {
    display: flex;
    align-items: center;                   /* Alinea los elementos del formulario al centro del area verticalmente */
    margin: 2em auto;                      /* Margen superior e inferior de 20px y auto de los aldos del formulario con otra Seccion */
    background-color: antiquewhite;
    width: 800px;                          /* Establece el ancho especifico de 800px de ancho */
    border-radius: 1rem;

    img {
        padding: 0;
        margin: 0 1.2em;
    }

    h2 {
        text-align: center;
        font-size: 28px;
        margin: 20px;
    }
}

.form-group {                               /* Estilos generales de Formulario CITA */
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 350px;
    flex-direction: column;
    padding: 1em;

    & label {
        position: relative;

        & input {
            position: relative;
            width: 95%;                     /* El largo es del 95% del contenedor */
            padding: 10px 10px 20px;        /* Margen interior 10px alto, 10px derecha/izquierda, 20px abajo */
            outline: none;
            border: none;                   /* Sin borde */
            border-radius: 10px;            /* Bordes redondos */

            + span {
                position: absolute;
                left: 10px;
                top: 15px;
                font-size: 0.9em;
                cursor: text;
                transition: 0.3s ease;      /* Mueve el texto al lado inferior izquierdo */
            }
            &:placeholder-shown + span {
                top: 15px;
                font-size: 0.9em;
            }
            &:focus + span,
            &:valid + span {
                top: 30px;
                font-size: 0.7em;
                font-weight: 600;
            }
            &:valid + span {
                color: #3f0000;         /* Cambia color al texto al ingresar datos */
            }
        }
    }

    & select {
            position: relative;
            width: 100%;
            height: 40px;
            outline: none;
            border: none;
            background-color: #ffffff;
            border-radius: 8px;
            padding: 10px;
        }
    
    & textarea {
            position: relative;
            width: 95%;
            padding: 10px 10px 25px;
            outline: none;
            border: none;
            border-radius: 10px;
            resize: none;

            + span {
                position: absolute;
                right: 10px;
                top: 10px;
                font-size: 0.9em;
                cursor: text;
                transition: 0.3s ease;      /* Mueve el texto al lado inferior izquierdo */
            }
            &:placeholder-shown + span {    /* Al seleccionar campo, el texto se mueve */
                top: 15px;
                font-size: 0.9em;
            }
            &:focus + span,                 /* Al seleccionar campo, el texto se mueve al lado inferior */
            &:valid + span {                /* Al ingresar datos, el texto se mueve al */
                top: 45px;                  /* mover el texto al lado inferior derecho */
                font-size: 0.7em;           /* Ajusta el tamaño del texto */
                font-weight: 600;           /* Ajusta el grosor del texto */
                color: #3f0000;         /* Cambia color al texto al ingresar datos */
            }
        }

    .submit {
        width: 100%;
        border: none;
        outline: none;
        padding: 10px;                      /* Agrega un pargen de 10px de borde interno */
        background-color: #1976d2;
        color: #ffffff;
        border-radius: 10px;                /* Coloca borde recondo al boton */
        transform: 0.3s ease;

        &:hover{
            background-color: #014e1e;
            transform: translateY(-3px) scale(1.01);
        }
    }
}

.NoVineta {
    padding: 0;            /* Elimina el padding predeterminado */
    margin: 0;             /* Elimina el margin predeterminado */
    list-style-type: none; /* Elimina las viñetas/números */
    text-decoration: none; /* Elimina el subrayado */

    & li {
        & a {
            text-decoration: none;  /* Elimina el subrayado */
            color: white;         /* Color de texto */
    }
    }
}

.NoVineta a:visited {
    text-decoration: none;  /* Elimina el subrayado */
    color: white;         /* Color de texto */
}

.NoVineta a:hover {
    text-decoration: none;  /* Elimina el subrayado */
    color: red;           /* Color del subrayado al pasar el mouse */
}

.footer{
    width: 100vw;                   /* Abarca todo el ancho de la pantalla */
    background-color: #333;       /* Color de fondo */
}

.footer-group {
    display: flex;                  /* Activa Flexbox */
    justify-content:center;         /* Distribuye las columnas equitativamente */
    max-width: 1280px;              /* Establece un ancho máximo a 1300px */
    margin: 0px auto;    
    color: white;                 /* Color de texto */
    line-height: 1.6;               /* Aumenta el interlineado al 160% */
}
    .columna {
        flex:1;                         /* Hace que cada columna ocupe el mismo ancho */
        max-width: 1200px;
        width: 100%;
        padding: 0 50px;                /* Espaciado lateral entre columnas */
        text-align: left;               /* Centra el texto dentro de la columna */

        .social{
            & a {
            margin-top: 20px;
            text-decoration: none;
            width: 45px;
            height: 45px;
            line-height: 45px;      /*  */
            color: #fff;
            margin-right: 10px;
            background-color: #0d2033;
            text-align: center;
            transition: all 300ms ease;

                &:hover{
                    color: aqua;
                }
            }
        }
        }


.CopyRight{
    vertical-align: middle;     /* Centra contenido verticalmente */
    text-align: center;         /* Centra el texto dentro de la */
    width: 100vw;               /* Ocupa toda la parte inferior */
    background-color: #333;   /* Color de fondo */
    color:#ddd;               /* Color Texto*/
}

.conteiner-social{
    position:fixed;             /* Que no se mueva el boton */
    top:50%;                    /* ubicacion centro de la pantalla verticalmente */
    padding: 0;                 /* Un margen interno de 0*/
    width: 10em;                /* Ancho de 200px al contenedor */
    box-sizing: border-box;     /* Evita que cambie el tamano */
    z-index: 99;                /* Boton siempre encima de Todo */
    left: -7em;                 /* Posicion del boton a la izquierda*/

    & a{
        display: flex;
        justify-content: end;
        margin-bottom: 0.8em;
        padding: 0.5em 0;
        align-items: center;
        border-radius:50px;         /* Dedondea esquinas */
        text-decoration: none;      /* Quita la linea */
        background:#25D366;       /* Color Verde */
        color:white;              /* Color Texto blanco */
        font-family: sans-serif;    /* Tipo de fuente */
        font-weight: bold;          /* texto en negrita*/
        box-shadow: 0px 4px 10px rgba(0,0,0,0.3);   /* Sombra al boton */
        transition: all 0.25s ease-in-out;  

        & i{
            margin: 0 0.3em;        /* Margen entre texto e icono */
            font-size: 1.7em;       /* Tamano de fuente al boton */
        }

        &:hover {
            background:#014e1e;   /* Color Verde */
            margin-right: -6em;     /* para que el boton aparesca */
        }
    }
}
/* Estilos básicos para el botón llamar */
.boton-llamada {
    visibility: hidden;         /* Oculto por defecto (en PC) */
}

/* ---- Media Queries ---- */

/* Fondo Animado */
@keyframes FondoAnimado {
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }   
}

@media (max-width: 568px) {
    .navbar {
        flex-direction: column;
        align-items: center;
    }
    .nav-links {
        visibility: hidden;
    }
    .boton-llamada {
        visibility: visible;         /* Muestra el botón */
    }
    .Logo{
        width: 75px;                /* Ajusta el tamaño según sea necesario */        
    }
    .service-grid {
        justify-content: center;
    }

    .service-card-i,
    .service-card-d {
        flex-direction: column;
        width: 45vh;                /* Ajusta el tamaño según sea necesario */
        margin: 0.8rem;
    }
    .img-service {
        width: 100% auto;
        overflow:visible;
    }
    .conteiner-social{
        margin-top: 2.8vh;
    }
    .about-group{
        flex-direction: column;
        width: 45vh;

        .About {
            flex-direction: column;
        }
    }
    .about-grid {
        flex-direction: column;
    }
}

/* Media Query: mostrar boton si la pantalla es menor a 768px (Móvil/Tablet) */
@media only screen and (max-width: 768px) {
    .appointments{
        flex-direction: column;
        width: auto; /* Ajusta el ancho del cont;*/
    }
    .footer-group {
        width: 90% auto;
        flex-direction: column;
        gap: 30px;
        padding: 35px 0px;
        margin-left: 10px;
    }
    .CopyRight{
        width: 90% auto;
    }
    .google{
        display: none;
    }
}