@import url('https://fonts.googleapis.com/css2?family=Allison&family=Dancing+Script:wght@400..700&family=Parisienne&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* =========================================================
   ESTILOS GENERALES
   ========================================================= */

/* Reset básico para que todos los navegadores partan igual */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}



/* Color de texto principal y fuente general */
body {
    font-family: "Roboto", sans-serif;
    color: #23313a;              /* Color de texto principal */
    line-height: 1.6;
    background-color: #F5F9F4;   /* Fondo general muy claro */
}

/* Imágenes responsivas por defecto */
img {
    max-width: 100%;
    display: block;
}

/* Enlaces sin subrayado por defecto */
a {
    color: inherit;
    text-decoration: none;
}

/* Contenedor central, controla el ancho máximo de la web */
.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

/* =========================================================
   COLORES PRINCIPALES  (EDITA ESTOS PARA CAMBIAR LA GAMA)
   ========================================================= */
/*
   VERDE PRINCIPAL:      #41b883
   VERDE OSCURO (hover): #32926a
   VERDE SUAVE FONDO:    #e6f7ef
*/

:root {
    --verde-principal:      #8FBC8F;
    --verde-oscuro:         #4E834E;

    --verde-suave:          #EAF3EA;
    --verde-clarito-fondo : #F5F9F4;
    
    --verde-sutil:          #dce7e0;

    --blanco:               #ffffff;
    --gris-suave:           #e3ece7;
    --texto-principal:      #23313a;

    --textoh1:              #4E834E;
    --nocookies-badge-fondo:#7CB1B1;
    --nocookies-badge-texto:#fff;

    --footer-color:         #fff;
    --footer-fondo:         #A6BC8F;

} 

/*
:root {
    --verde-principal:      #3CB371;
    --verde-oscuro:         #32926a;

    --verde-suave:          #e6f7ef;
    --verde-clarito-fondo : #f4faf6;

    --verde-sutil:          #dce7e0;

    --blanco:               #ffffff;
    --gris-suave:           #e3ece7;
    --texto-principal:      #23313a;
    
    --textoh1:              #8FBC8F;
    --nocookies-badge-fondo:#7CB1B1;
    --nocookies-badge-texto:#fff;

    --footer-color:         #fff;
    --footer-fondo:         #A6BC8F;
}*/

/* =========================================================
   BOTONES
   ========================================================= */

/* Estilo base para botones */
.btn-primario,
.btn-secundario {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    border-radius: 999px;      /* Botón redondeado */
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    cursor: pointer;
    text-align: center;
}

/* Botón principal: verde sólido */
.btn-primario {
    background-color: var(--verde-principal);
    color: var(--blanco);
}

.btn-primario:hover {
    background-color: var(--verde-oscuro);
}

/* Botón secundario: borde verde, fondo blanco */
.btn-secundario {
    border: 1px solid var(--verde-principal);
    color: var(--verde-principal);
    background-color: var(--blanco);
    margin-left: 0.5rem;
}

.btn-secundario:hover {
    background-color: var(--verde-suave);
}

/* =========================================================
   CABECERA (HEADER)
   ========================================================= */

.site-header {
    background-color: var(--blanco);        /* Fondo blanco */
    /*border-bottom: 1px solid var(--verde-sutil); /* Línea sutil inferior */
    position: sticky;                 /* Se queda pegado arriba al hacer scroll */
    top: 0;
    z-index: 10;
    /* blur detras */
    box-shadow: 0 3px 7px var(--verde-sutil);*/
}



.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
}
/* aqui ajustamos el titulo para qure aparezca el diente a su izquierda */

.logo { 

 /* border: 3px dashed blue;*/
}
.logo::before {
  content: '';

  position: absolute;
  background-repeat: no-repeat;
  top: 15px; bottom: -30px;
  width: 80px; height: 180px; /* Más grande */
  background-image: url('./media/dienteh1.png');
  background-size: 60px;
  background-origin: content-box;
  /* z-index: -1; para ir o no al fondo*/

}

/* Logotipo en texto (si usas imagen, sustituye en el HTML) */
.logo a {
    
    font-weight: 400;
    letter-spacing: 0.04em;
    font-size: 1.6rem;
    padding-left: 80px;
    color: var(--textoh1);
}
.logo a:visited {

    /*color: var(--verde-principal);*/
}


/* Menú de navegación principal */
.main-nav ul {
    list-style: none;
    display: flex;
    gap: 1rem;
    padding-left: 80px;
}

/* Enlaces del menú */
.main-nav a {

    font-size: 0.95rem;
    padding: 0.3rem 0;
    border-bottom: 2px solid transparent;

}

.main-nav a:hover {
    border-color: var(--verde-principal); /* Subrayado verde al pasar el ratón */
}

/* Botón “Pide cita” en la cabecera */
.btn-cita {
    margin-left: 1rem;
}

/* =========================================================
   HERO (SECCIÓN SUPERIOR CON TITULAR)
   ========================================================= */

.hero {
    background: linear-gradient(135deg, var(--verde-suave), #ffffff);
    padding: 3rem 0 3.5rem;
}

/* Dos columnas: texto + imagen */
.hero-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2rem;
    align-items: center;
}

/* Titular principal */
.hero-texto h1 {

    /* font-family: "Dancing Script", cursive;*/


    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--textoh1); /* 5F9EA0 122027 */
}

/* Párrafo descriptivo */
.hero-texto p {
    margin-bottom: 1.3rem;
    max-width: 34rem;
    color: #435a64;
}

/* Imagen de la clínica en el hero (contenedor) */
.hero-imagen {
    background-color: #fff;
    border-radius: 1rem;
    padding: 0.7rem;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.08);
    transform: rotate(-1deg);
}

/* =========================================================
   SECCIONES GENERALES
   ========================================================= */

/* Espaciado vertical general de las secciones */
.seccion {
    padding: 5rem 0;
    background-color: var(--verde-clarito-fondo); /* Fondo verdoso muy suave */
}

/* Alternamos el color de fondo sección sí / sección no */
.seccion:nth-of-type(even) {
    background-color: var(--blanco);
}

/* Títulos de sección */
.seccion h2 {

    font-size: 1.7rem;
    margin-bottom: 0.7rem;
    text-align: center;
    color: #122027;
}

/* Párrafo introductorio de cada sección */
.seccion > .container > p {
    text-align: center;
    max-width: 32rem;
    margin: 0 auto 2rem;
    color: #4e636d;
}
/* Párrafo introductorio de cada sección */
.seccion > .container > div {
    margin-bottom: 2rem;
}
    
/* =========================================================
   SERVICIOS
   ========================================================= */

/* Grid de servicios: ajusta el número de columnas según tus gustos */
.grid-servicios {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(4, 1fr); /* Cambia el 4 por 3 si quieres 3 columnas en escritorio */
}

/* Tarjeta individual de servicio */
.servicio {
    background-color: #ffffff;
    border-radius: 0.7rem;
    padding: 1.2rem;
    border: 1px solid #dde9e2; /* Borde suave */
    box-shadow: 0 6px 15px rgba(26, 63, 46, 0.03); /* Sombra muy ligera */
}

/* Título del servicio */
.servicio h3 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
    color: var(--verde-principal);
}

/* Descripción del servicio */
.servicio p {
    font-size: 0.95rem;
    color: #4e636d;
}

/* =========================================================
   SECCIÓN “LA CLÍNICA”
   ========================================================= */

/* Texto + imágenes en dos columnas */
.clinica-inner {
    display: grid;
    grid-template-columns: 1.4fr 1.1fr;
    gap: 2rem;
    align-items: center;
}

/* Separación entre párrafos de la descripción */
.clinica-texto p + p {
    margin-top: 0.7rem;
}

/* Grid para mostrar 2–3 fotos de la clínica */
.clinica-imagenes {
    display: grid;
    gap: 0.8rem;
}

/* =========================================================
   EQUIPO
   ========================================================= */

/* Grid de tarjetas de profesionales */
.grid-equipo {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 1rem;
}

/* Tarjeta de cada miembro del equipo */
.miembro-equipo {
    background-color: #ffffff;
    border-radius: 0.7rem;
    overflow: hidden;
    border: 1px solid #dde9e2;
    box-shadow: 0 6px 15px rgba(26, 63, 46, 0.03);
    text-align: center;
    padding-bottom: 1rem;
}

/* Imagen del profesional (recorta a alto fijo) */
.miembro-equipo img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

/* Nombre del profesional */
.miembro-equipo h3 {
    margin-top: 0.8rem;
    font-size: 1rem;
    color: #122027;
}

/* Especialidad */
.miembro-equipo p {
    font-size: 0.9rem;
    color: #607880;
}


/* =========================================================
   CONTACTO
   ========================================================= */

.seccion-contacto {
    padding-bottom: 3.5rem;
}

/* Dos columnas: info + formulario */
.contacto-inner {
    display: grid;
    grid-template-columns: 1.1fr 1.2fr;
    gap: 2rem;
    align-items: flex-start;
}

/* Espaciado entre líneas de datos de contacto */
.contacto-info li + li {
    margin-top: 0.4rem;
}

/* decoracion de los items */

ul.lista {
  list-style-type: none; /* Elimina los puntos */
  margin: 0;             /* Quita margen predeterminado */
  padding: 0;            /* Quita relleno predeterminado */
}


/* Tamaños de los iconos */

.icono-contacto {
    width: 24px;     /* Tamaño deseado */
    height: 24px;    /* O usa height: auto para proporción */
    /*display: block;  /* Evita espacio extra debajo */
    /*border: solid 1px;*/
}

.lista {
    font-size: 1.2rem;
    padding-left: .8rem;
}

/* =========================================================
   PIE DE PÁGINA (FOOTER)
   ========================================================= */

.site-footer {
    background-color: var(--footer-fondo);
    color: var(--footer-color);
    padding: 1.5rem 0;
    font-size: 0.9rem;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* Enlaces legales en el footer */
.site-footer a {
    color: var(--footer-enlaces-legales);
    text-decoration: underline;
}

/* aviso especial */

.no-cookies-badge {
    display: inline-block;/*
    background-color: #28a745;*/
    padding: 9px 40px;
    border-radius: 20px;
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 20px;

    background-color: var(--nocookies-badge-fondo);
    /*color: var(--verde-clarito-fondo);*/
    color: var(--nocookies-badge-texto);
}

/* =========================================================
   RESPONSIVE (TABLET Y MÓVIL)
   ========================================================= */

/* Ajustes para pantallas medianas (tablets) */
@media (max-width: 900px) {

    /* Las columnas pasan a una sola cuando no hay ancho suficiente */
    .hero-inner,
    .clinica-inner,
    .contacto-inner {
        grid-template-columns: 1fr;
    }

    .hero-inner {
        text-align: center;
    }

    .hero-texto p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-imagen {
        order: -1;              /* Imagen arriba en móvil */
        max-width: 320px;
        margin: 0 auto 1rem;
    }

    .grid-servicios {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-equipo,
    .grid-opiniones {
        grid-template-columns: repeat(2, 1fr);
    }

    .header-inner {
        flex-wrap: wrap;
        gap: 0.8rem;
    }

    /* Opcional: ocultar botón extra en cabecera en pantallas pequeñas */
    .btn-cita {
        display: none;
    }
}

/* Ajustes para móviles pequeños */
@media (max-width: 600px) {

    .grid-servicios,
    .grid-equipo,
    .grid-opiniones {
        grid-template-columns: 1fr;
    }

    .main-nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.6rem;
    }

    .footer-inner {
        flex-direction: column;
        text-align: center;
    }
}