@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --fondo: hsla(209, 92%, 10%, 0.829);
    --blanco: #ffffff;
    --oscuro: #212121;
    --secundario: #0097A7;
    --gris: #757575;
    --grisClaro: #DFE9F3;
}

/* Estilos generales */
body {
    margin: 0;
    padding: 0;
    background-color: var(--fondo);
    color: var(--blanco)
}

/* Nav*/
.contenedor {
    max-width: 120rem;
   /* margin: 0 auto;*/
}

/*.nav-bg {
    background-color: hsl(212, 93%, 83%);
}*/

.navegacion-principal {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.navegacion-principal a {
    display: block;
    text-align: center;
    color: var(--blanco);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    padding: 1rem;
    justify-content: center;
}

.navegacion-principal a:hover {
    background-color: var(--grisClaro);
    color: var(--oscuro);
}


/*HEADER*/


/*FOTO PRINCIPAL*/
.pagini{
    text-align: center;
    height: 75%;
    background-image: url("./Img/Banner.webp");
    background-size: auto; /*para que cubra toda la pantalla*/
    background-position: center;
    background-attachment: fixed; /*para que la imagen quede quieta cuando hago scroll*/
    padding-top: 5%;
    padding-bottom: 5%;
    box-sizing: border-box;
}

@media (min-width: 760px) {
    .pagini {
      width: auto;
      height: auto;
      padding: 6% 4%;
    }
  }

/*TITULO PRINCIPAL*/
.titulo {
    text-align: left;
    font-family: "Raleway", sans-serif;
    font-size: 2.5em;
    color:var(--fondo);
    padding: 2%;   
}
h1 {
    text-align:left;
    font-family: "Libre Baskerville", italic;
    font-size: 1.8em;
    color: var(--fondo);
    padding: 2%;
    
}
h2{
    text-align: center;
    font-family: "Libre Baskerville", italic;
    font-weight: 600;
    font-size: 2em;
}

h3{
    text-align: center;
    font-family: "Libre Baskerville", italic;
    font-weight: 500;
    font-size: 1.5em;
    text-shadow: 6px 3px 2px black ;
}

h4{
    text-align: center;
    font-family: "Libre Baskerville", italic;
    font-weight: 600;
    font-size: 1,2em;
    margin: 0;
}

h5{
    font-family: "Raleway", sans-serif;
    margin: 0.5%;
    font-size: 1em;
}

h6 {
    text-align:left;
    font-family: "Libre Baskerville", italic;
    font-size: 1.2em;
    color: var(--fondo);
    padding: 2%;
    
}



/*HIPNOSIS CLINICA REPARADORA*/
.cajatexto{
    padding: 20px;
}

p{
    font-family: "Raleway", sans-serif;
    font-size: medium;
    text-align: justify;
    padding-bottom: 1%;
}

/*IMAGEN 1*/
.pag01{
    background-color: rgb(129, 209, 209);
    height:170px;
    background-image: url("./Img/hipnosis.jpg") ;
    background-size: auto; /*para que cubra toda la pantalla*/
    background-position: center;
    background-attachment: fixed; /*para que la imagen quede quieta cuando hago scroll*/
    /*padding-top: 10%;*/
    box-sizing: border-box;
    
}

/*PREGUNTAS FRECUENTES*/
.centrado{
    text-align: center;
}

.divcajitas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    color:#000
    
}

.cajadecajas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 2%;
}

.caja1, .caja2, .caja3 {
    flex: 1;
    min-width: 140px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
}

.sombra {
    box-shadow: 0px 5px 15px 0px var(--oscuro);
    background-color: var(--blanco);
    padding: 2%;
    border-radius: 2rem;
    margin: 2%
  }


/*IMAGEN 2*/
.pag02{
    height: 20%;
    background-image: url("./Img/hipno.jpg");
    background-size: auto; /*para que cubra toda la pantalla*/
    background-position: center;
    background-attachment: fixed; /*para que la imagen quede quieta cuando hago scroll*/
    text-align: center;
    font-family: "Libre Baskerville";
    font-style: italic;
    font-weight: 800;
    box-sizing: border-box;
    padding: 8px 6px;
}

/*SERVICIOS*/
.contenedor_boton {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
}


.informacion {
    display: inline-block;
    padding: 10px 20px;
    background-color: #25d366;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.informacion:hover {
    background-color: #1ebc58;
}

.pag01, .pag02 {
    padding: 20px;
    background-color: #f2f2f2;
    margin: 20px 0;
}

svg:not(:host).svg-inline--fa, svg:not(:root).svg-inline--fa {
    overflow: visible;
    box-sizing: content-box;
}

.svg-inline--fa {
    display: var(--fa-display, inline-block);
    height: 1em;
    overflow: visible;
    vertical-align: -.125em;
}

/*AUTOR*/
.autor {
    height: 80%;
    background-image: url(./Img/banner2.jpg);
  }
  
  .contenedor {
    display: flex;
    flex-direction: column;
  }
  
  .frase {
    padding: 2% 4% 2% 4%;
    color: var(--fondo);
    margin: 10px auto;
  }
  
  .foto {
    width: 70%;
    height: 50%;
    border-radius: 8%;
    padding-bottom: 4%;
    margin: auto;
    display: flex;
  }
  
  @media (min-width: 768px) {
    .contenedor {
      flex-direction: row;
    }
  }
  
  @media (min-width: 768px) {
    .foto {
      width: 70%;
      height: 50%;
      padding: 6% 4%;
    }
  }

  /*CONTACTO*/
.contacto {
    background-color: var(--fondo);
    padding: 3%;
  }
  
  .contacto>p {
    text-align: center;
    padding-bottom: 2%;
  }
  
  /*FOOTER*/
.footer {
    height: 40px;
    background-color: var(--grisClaro);
    color: var(--oscuro);
    padding: 1%;
    
}
.footer>p {
    text-align: center;
    font-size: small;
}

.video-sin-marco {
    background-color: transparent;
    box-shadow: none;
    padding: 1rem 0;
    margin: 2rem auto;
    max-width: 800px;
    text-align: center;
    color: var(--blanco);
}

.video-sin-marco h4 {
    color: var(--blanco);
    font-family: "Libre Baskerville", serif;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}
/* ==== BLOG EXCLUSIVO ==== */
.blog-articulo {
    background-color: #ffffff;
    color: #212121;
    font-family: 'Raleway', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 800px;
    border-radius: 1rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.blog-articulo h4 {
    text-align: center;
    font-family: 'Libre Baskerville', serif;
    font-weight: 600;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: #212121;
}

.blog-articulo p {
    text-align: justify;
    margin-bottom: 1rem;
    color: #212121;
}

/* Video sin marco para blog */
.blog-video {
    background-color: transparent;
    padding: 2rem 0;
    margin: 3rem auto;
    text-align: center;
    max-width: 800px;
    color: #ffffff;
}

.blog-video h4 {
    font-family: 'Libre Baskerville', serif;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: #ffffff;
}
.pagini h1,
.pagini h2,
.pagini h6,
.pagini .titulo {
  color: #c3dbec;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}

a.boton {
    display: inline-block;
    padding: 10px 16px;
    background-color: #1abc9c; /* Color de fondo del botón */
    color: white; /* Color del texto */
    text-decoration: none; /* Elimina el subrayado */
    font-size: 16px; /* Tamaño de la letra */
    border-radius: 6px; /* Bordes redondeados */
    font-weight: 500; /* Peso de la fuente */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves */
  }
  
  a.boton:hover {
    background-color: #16a085; /* Color de fondo al pasar el mouse */
    transform: scale(1.05); /* Efecto de escala al pasar el mouse */
  }

  /*....................................

  .cajatexto ul li {
  margin-bottom: 1.2rem;
  line-height: 1.7;
  font-size: 1.1rem;
  color: hsl(0, 33%, 99%);
}

.cajatexto a {
  color: #65a4f6; 
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

.cajatexto a:hover {
  text-decoration: underline;
  color: #656d74; 
}*/
.redes-sociales {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 10px;
}

.red-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #3b5998;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
}

.red-social:hover {
    transform: scale(1.1);
}

.red-social:nth-child(2) {
    background-color: #e4405f; /* Instagram */
}

.red-social svg {
    width: 20px;
    height: 20px;
}
.boton-wsp-pagini {
    position: absolute;
    bottom: 15px;
    right: 20px;
    background-color: #25d366;
    border-radius: 50%;
    padding: 10px;
    transition: transform 0.3s ease;
    z-index: 10;
}

.boton-wsp-pagini:hover {
    transform: scale(1.1);
}

.boton-wsp-pagini svg {
    width: 24px;
    height: 24px;
}