/*
    Theme Name: Bienestar Emocional
    Theme URI: 
    Author: Carlos Andres Medina
    Author URI: 
    Description: Tema personalizado y diseñado desde cero para profesionales de la psicología, terapia y la salud mental.
    Version: 1.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: psicologia, salud-mental, terapia, custom-theme, flexbox, css-grid, mobile-first
    Text Domain: bienestar-emocional
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Staatliches&display=swap');

:root {
    /*FUENTES*/
    --fuente-principal: 'Montserrat', sans-serif;
    --fuente-headings: 'Cormorant Garamond', serif;
    /*COLORES*/
    --color-header: #d8dbdf; 
    --color-texto-principal: #3C4148;
    --color-marca-oro-rosa: #A0787C;
    --color-cta-verde: #4a6b5d;
    --color-cta-hover: #B9CCD9;
    --color-azul: #170C79;
    --blanco: #ffffff;
    --negro: #000000;
    --gris-oscuro: #2f2e2e;
    --gris-claro: #EBEBEB;
    --gris-medio: #D3D3D3;

}

html {
  font-size: 62.5%; /* Esto establece la base para el uso de unidades rem, donde 1rem será igual a 10px, lo que facilita el cálculo de tamaños relativos. */
  box-sizing: border-box; /* Esto hace que el padding y el border se incluyan dentro del ancho total de los elementos, lo que facilita el diseño y evita problemas de desbordamiento.*/
}
*, *:before, *:after {/* Esto asegura que todos los elementos, incluyendo los pseudo-elementos, hereden la propiedad box-sizing del elemento html, lo que mantiene la consistencia en el diseño. */
  box-sizing: inherit;
}

body {
    font-family: var(--fuente-principal);
    font-size: 18px; /* Esto establece un tamaño de fuente base de 18px para el cuerpo del documento, lo que es un buen punto de partida para la legibilidad. */
    font-size: 1.8rem; /* Esto hace que el tamaño de fuente sea relativo a la raíz, lo que mejora la accesibilidad y la escalabilidad del diseño. */;
    line-height: 2; /* Esto establece una altura de línea de 2, lo que mejora la legibilidad al proporcionar suficiente espacio entre las líneas de texto. */ 
    
}

/*HEADINGS*/
h1, h2, h3, h4 {
    font-family: var(--fuente-headings);
    margin: 0 0 5rem 0; /* Esto establece un margen inferior de 5rem para los encabezados, lo que proporciona un buen espacio visual entre los encabezados y el contenido siguiente. */
    line-height: 1.2; /* La altura de línea debe ser relativa al tamaño de fuente; 1.2rem era demasiado pequeña para encabezados grandes. */
}



h1 {
    font-size:6rem; /* Esto establece un tamaño de fuente de 6rem para los encabezados h1, lo que los hace destacar como el nivel más alto de encabezado en la jerarquía del contenido. */
}

@media (max-width: 767px) {
  h1 {
    font-size: 5rem;
    line-height: 1.2;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
 }
}

h2 {
    font-size: 4.8rem; /* Esto establece un tamaño de fuente de 2.4rem para los encabezados h2, lo que los hace destacar como el segundo nivel de encabezado en la jerarquía del contenido. */
    line-height: 1.1; /* Altura de línea reducida para que el encabezado ocupe menos espacio vertical. */
    margin: 0 0 1.2rem 0; /* Margen inferior más pequeño para acercar el contenido siguiente. */
}
h3 {
    font-size: 3.6rem; /* Esto establece un tamaño de fuente de 1.8rem para los encabezados h3, lo que los hace destacar como el tercer nivel de encabezado en la jerarquía del contenido. */
}
h4 {
    font-size: 2.4rem; /* Esto establece un tamaño de fuente de 1.2rem para los encabezados h4, lo que los hace destacar como el cuarto nivel de encabezado en la jerarquía del contenido. */
}

/**Globales*/
p {
    margin: 0; /* Esto elimina el margen predeterminado de los párrafos, lo que permite un control total sobre el espaciado entre los párrafos y otros elementos. */
}
a {
    text-decoration: none; /* Esto elimina el subrayado predeterminado de los enlaces, lo que permite un diseño más limpio y personalizado para los enlaces. */
}
ul {
    list-style: none; /* Esto elimina los puntos o números predeterminados de las listas, lo que permite un diseño más limpio y personalizado para las listas. */   
    margin: 0;/* Esto elimina el margen predeterminado de las listas, lo que permite un control total sobre el espaciado entre las listas y otros elementos. */
    padding: 0;/* Esto elimina el relleno predeterminado de las listas, lo que permite un control total sobre el espaciado entre los elementos de la lista y otros elementos. */
}
img {
    display: block; /* Esto hace que las imágenes se comporten como elementos de bloque, lo que elimina el espacio en línea debajo de las imágenes y permite un mejor control sobre su posicionamiento. */
    max-width: 100%; /* Esto asegura que las imágenes no excedan el ancho de su contenedor, lo que mejora la responsividad del diseño. */
    height: auto;
    margin: 0;
}
.imagen-destacada {
    margin: 0 auto 4rem auto;
    display: block;
    max-width: 100%;
}

.contenedor {
    width: min(95%, 120rem); /* Esto establece el ancho del contenedor en el 95% del ancho de la ventana del navegador, pero no excederá los 1200px (120rem), lo que garantiza que el contenido se mantenga legible y bien presentado en pantallas grandes sin ocupar todo el ancho disponible. */
    margin: 0 auto; /* Esto centra el contenedor horizontalmente dentro de su elemento padre, lo que es útil para mantener un diseño equilibrado y centrado en la página. */
}
.contenedor-boton {
    display: flex; /* Esto convierte el contenedor del botón en un contenedor flexbox, lo que facilita la alineación y distribución de los botones dentro del contenedor. */
    justify-content: flex-end; /* Esto alinea los botones al final del contenedor, lo que es común para los botones de llamada a la acción (CTA) que se colocan al final de una sección o contenido. */
}
/** Botones **/
 
.form-submit .submit,
.boton {
    background-color: var(--color-acento);
    color: var(--blanco);
    padding: 1rem 3rem;
    display: block;
    flex: 1;
    width: 100%;
    text-align: center;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: .5rem;
    margin: 1rem 0;
    border: none;
}

@media (min-width:768px) {
    .boton {
        display: inline-block;
        flex: 0 0 auto;
        width: auto;
    }
}

.boton-primario {
    background-color: var(--color-cta-hover);
    color: var(--color-texto-principal);
}

.contenido-centrado {
    width: min(95%, 80rem);

}
.logo {
    width: 20rem; /* Esto establece un ancho fijo de 20rem para el contenedor del logo, lo que asegura que el logo tenga un tamaño consistente y adecuado en la mayoría de los dispositivos. */
    height: auto;
}

/* Esto establece un color de fondo claro para el sitio web, lo que mejora la legibilidad y crea un ambiente acogedor para los visitantes. */

/**Utilidades*/
.text-center {
    text-align: center; /* Esto centra el texto dentro de los elementos que tienen la clase "text-center", lo que es útil para títulos, subtítulos o cualquier contenido que se quiera destacar en el centro de la página. */
}   
.text-primary {
    color: var(--color-texto-principal); /* Esto establece el color del texto utilizando la variable CSS definida para el color de texto principal, lo que ayuda a mantener la coherencia visual en todo el sitio web. */
}
.text-blanco {
    color: var(--blanco);
}
.seccion {
    padding: 5rem 0; /* Esto agrega un espacio de 5rem en la parte superior e inferior de las secciones, lo que ayuda a separar visualmente el contenido y mejorar la legibilidad. */
}

/**Header **/

body.home .header {
    padding-top: 2rem;
    height: auto;
    min-height: 70rem;
}

@media (min-width: 768px) {
    body.home .header {
        height: 100vh;
        max-height: 80rem;
        background-size: cover;
        background-position: center 5%;
    }
}

.tagline {
    color: var(--blanco);
    margin-top: 5rem;
}

@media(min-width: 992px) {
    .fixed-top {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        background-color: rgba(174, 172, 172, 0.784); /* Esto establece un fondo semitransparente para la barra de navegación fija, lo que permite que el contenido detrás de ella sea visible mientras mantiene la legibilidad de los elementos de navegación. */
        padding: 1rem 5rem;
        height: 15rem;
        z-index: 1000;
        transition: background-color 300ms ease;
    }

    .fixed-top .logo-principal {
        width: 12rem;
    }

    img .logo-principal {
        width: 25rem;
        height: 25rem;
    }
}


@media (min-width: 768px) {
    .tagline {
        margin-top: 15rem;
    }
}
.tagline p {
    font-size: 2rem;
}


.header{
    background-color: var(--color-header); /* Esto establece el color de fondo del encabezado utilizando la variable CSS definida para el color de fondo principal, lo que ayuda a mantener la coherencia visual en todo el sitio web. */
    padding: 2rem 0; /* Esto agrega un espacio de 2rem en la parte superior e inferior del encabezado, lo que ayuda a separar visualmente el contenido del encabezado del resto de la página y mejora la estética general. */
}
.barra-navegacion {
    display: flex; /* Esto convierte el contenedor de navegación en un contenedor flexbox, lo que facilita la alineación y distribución de los elementos dentro de la barra de navegación. */
    flex-direction: column;
    align-items: center;
    
}

@media (min-width: 768px) {
    .barra-navegacion {
        flex-direction: row; /* Esto cambia la dirección de los elementos dentro de la barra de navegación a una fila en pantallas más grandes, lo que es común para diseños de navegación horizontal. */
        justify-content: space-between; /* Esto distribuye los elementos dentro de la barra de navegación con espacio entre ellos, lo que mejora la apariencia y la usabilidad en pantallas más grandes. */
    }
}

/*.menu-principal {
    display: none; /* Esto oculta el menú de navegación en pantallas pequeñas, lo que es común en diseños móviles para ahorrar espacio y mejorar la experiencia del usuario. 
} */

.hamburguer-menu {
    cursor: pointer;
}

@media(min-width:768px) {
    .hamburguer-menu {
        display: none;

    }
}

.contenedor-menu {
    opacity: 0;
    max-height: 0;
    transition-delay: 100ms, 300ms;
    transition-property: opacity, max-height ;
    transition-timing-function: ease-in-out;
    animation-duration: 300ms;
}

@media(min-width:768px) {
    .contenedor-menu {
        all: unset;
    }
}

.mostrar {
    opacity: 1;
    max-height: 35rem;
    transition-delay: 100ms, 300ms;
    transition-property: max-height, opacity ;
    transition-timing-function: ease-in-out;
    animation-duration: 300ms;

}
.hamburguer-menu svg {
    height: 7rem;
    width: 7rem;
}

@media (min-width: 768px) {
    .menu-principal {
        display: block;
    }
    .menu-principal .menu {
        display: flex; /* Esto convierte la lista de elementos del menú en un contenedor flexbox, lo que facilita la alineación y distribución de los elementos del menú. */
        gap: 1.3rem; /* Esto agrega un espacio de 2rem entre los elementos de la lista del menú, lo que mejora la legibilidad y la estética del menú. */
    }
}

.menu-principal a {
    font-family: var(--fuente-headings);
    display: block;
    text-align: center;
    color: var(--color-texto-principal);
    font-size: 2.2rem; /* Esto establece un tamaño de fuente de 2.2rem para los enlaces del menú, lo que los hace lo suficientemente grandes para ser legibles y fáciles de interactuar, especialmente en dispositivos móviles. */
    padding: 0.5rem 1rem; /* Esto agrega un espacio de 0.5rem en la parte superior e inferior y 1rem en los lados de los enlaces del menú, lo que mejora la usabilidad al proporcionar un área de clic más grande y cómoda para los usuarios. */
}



/* Mantener el menú en blanco en la página de Inicio */
body.home .menu-principal a {
    color: var(--blanco);
}



.menu-principal .current_page_item {
    border-bottom: 3px solid var(--color-texto-principal); /* Esto agrega un borde inferior de 3px con el color definido para la marca de oro rosa a los elementos del menú que representan la página actual, lo que ayuda a los usuarios a identificar fácilmente en qué página se encuentran dentro del sitio web. */

}

@media (min-width: 768px) {
    .menu-principal a {
        position: relative;/* Esto establece la posición de los enlaces del menú como relativa, lo que permite posicionar elementos pseudo o adicionales en relación con los enlaces del menú. */
        z-index: 1; /* Esto establece un índice z de 1 para los enlaces del menú, lo que asegura que estén por encima de otros elementos en la página, como el fondo o los elementos decorativos, lo que mejora la visibilidad y la interactividad de los enlaces del menú. */
    }

    .menu-principal a::before, 
    .menu-principal a::after {
        position: absolute;
        left: 0;
        content: '';
        display: block;
        width: 100%;
        height: 50%;
        background-color: var(--color-cta-hover);
        z-index: -1;
        transform: scaleX(0);
        transition: transform .6s;
    }
    .menu-principal a::before {
        top: 0;
        transform-origin: left;
    }
    .menu-principal a::after {
        top:50%;
        transform-origin: right;
    }
    .menu-principal a:hover::before {
        transform: scaleX(1);
    }
    .menu-principal a:hover::after {
        transform: scaleX(1);
    }

}

/*Pagina Principal*/
.bienvenida p {
    max-width: 80rem;
    margin: 0 auto;
    
}

/** Cards*/
.card {
    position: relative;
    overflow: hidden;
}
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.65) 100%);
    z-index: 1;
    pointer-events: none;
}
.card img {
    display: block;
    position: relative;
    z-index: 0;
    width: 100%;
    height: 40rem;
    object-fit: cover;
    object-position: center center;
    margin: 0;
    transition: transform 0.3s ease;
}

.card .contenido {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2rem;
    z-index: 2;
}
.card .contenido h3 {
    color: var(--blanco);
    margin: 0;
    text-shadow: 0 2px 6px rgba(0,0,0,0.4);
    font-size: 2rem;
}

@media (min-width:768px) {
    .card .contenido h3 {
        font-size: 3rem;
    }
}

.card .contenido p, 
.card .contenido .meta a {
    color: var(--blanco);
}

.card .meta {
    font-size: 1.4rem;
    font-weight: 700;
}

.card .meta span {
    color: var(--color-cta-hover);
}

/** Boton Whatsapp **/

.whatsapp-btn {
    position: fixed; /* Esto hace que se desplace con el scroll */
    bottom: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    text-decoration: none;
    z-index: 9999;
    transition: transform 0.3s ease;
}

/* Estilo de la Etiqueta (Label) */
.wa-label {
    background-color: #ffffff;
    color: #333;
    padding: 8px 15px;
    border-radius: 20px;
    margin-right: 10px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    white-space: nowrap; /* Evita que el texto se rompa en dos líneas */
}

/* Estilo del Icono Redondo */
.wa-icon {
    width: 60px;
    height: 60px;
    background-color: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}

.wa-icon img {
    width: 35px;
    height: 35px;
}

/* Efecto al pasar el mouse */
.whatsapp-btn:hover {
    transform: scale(1.05);
}

/* Responsive: Ocultar etiqueta en móviles muy pequeños si estorba */
@media (max-width: 480px) {
    .wa-label {
        display: none; /* En pantallas de menos de 480px solo queda el icono verde */
    }
    .whatsapp-btn {
        bottom: 20px;
        right: 20px;
    }
}

.informacion-plan {
    margin-bottom: 5rem;
}




/** Footer **/

.footer .footer-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 2rem 0 0;
}

.footer .footer-redes,
.footer .footer-cita {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.footer .footer-redes a,
.footer .footer-cita .boton-cita {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1.4rem;
    border-radius: 1rem;
    font-family: var(--fuente-headings);
    font-size: 1.8rem;
    color: var(--color-texto-principal);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.footer .footer-redes a:hover,
.footer .footer-cita .boton-cita:hover {
    background-color: var(--color-cta-hover);
    color: var(--color-texto-principal);
}

.footer .boton-cita {
    background-color: var(--color-cta-hover);
    color: var(--blanco);
}

.footer .boton-cita:hover {
    background-color: var(--color-cta-hover);
}

.footer .cita-detalle {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.footer .cita-detalle a {
    color: var(--color-texto-principal);
    font-size: 1.6rem;
    text-decoration:none;
}

.footer .icono-social {
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    fill: currentColor;
}

.footer .menu-principal {
    display: flex;
    justify-content: center;
    background-color: var(--blanco); /* Esto establece el color de fondo del pie de página utilizando la variable CSS definida para el color de fondo principal, lo que ayuda a mantener la coherencia visual en todo el sitio web. */
    padding: 2rem 0; /* Esto agrega un espacio de 2rem en la parte superior e inferior del pie de página, lo que ayuda a separar visualmente el contenido del pie de página del resto de la página y mejora la estética general. */
    text-align: center; /* Esto centra el texto dentro del pie de página, lo que es común para los pies de página y mejora la apariencia y la legibilidad del contenido del pie de página. */
}

.footer .menu-principal .menu {
    justify-content: center;
    width: 100%;
}

.footer p {
    font-family: var(--fuente-headings);
    font-size: 2rem;
    text-align: center;
}

/* Asegurar que la navegación del footer sea legible (no tocar la navegación del header) */
.footer .menu-principal a,
.footer .menu-principal .menu a {
    color: var(--color-texto-principal);
    font-family: var(--fuente-headings);
    font-size: 1.8rem;
    text-decoration: none;
}

.footer .menu-principal a:hover,
.footer .menu-principal .menu a:hover {
    color: var(--color-texto-principal);
    text-decoration: underline;
}

.contenido {
    font-family: var(--fuente-principal);
}

/**Cards */
.listado-grid {
    margin-top: 4rem;
    display: grid;
    gap: 2rem;
}
@media (min-width: 768px) {
    .listado-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.card {
    position: relative;
    overflow: hidden; /* evita que la imagen escalada salga del contenedor */
}
.card:hover img {
    transform: scale(1.05); /* escala al pasar el cursor */
}
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.65) 100%);
    z-index: 1;
    pointer-events: none;
}
.card img {
    display: block;
    position: relative;
    z-index: 0; /* asegurar que la imagen no esté detrás de otros elementos */
    transition: transform 0.3s ease; /* transición en el estado base para que la animación funcione tanto al entrar como al salir */
    transform-origin: center center;
    width: 100%;
    height: 40rem;
    object-fit: cover;
    margin: 0;
    object-position: center center;

}

.card .contenido-card {
    position: absolute;
    bottom: 0;
    right: 0;
    left: auto;
    padding: 0.8rem;
    z-index: 2;
}

.card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.card-link img {
    display: block;
}

.card-link .contenido-card {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background-color: rgba(251, 251, 251, 0.518);
    color: var(--color-texto-principal);
    border-radius: 0.7rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.card-link:hover .contenido-card,
.card-link:focus .contenido-card {
    background-color: var(--color-cta-hover);
    transform: translateY(-0.4px);
    box-shadow: 0 0.25rem 0.6rem rgba(0, 0, 0, 0.1);
}

.card-link .contenido-card h3 {
    color: inherit;
    font-size: 1.4rem;
    line-height: 1.1;
    margin: 0;
}

.card-link .contenido-card::after {
    content: '→';
    font-size: 1.2rem;
}

/* Mobile: make card CTA ~50% smaller to avoid covering image */
@media (max-width: 767px) {
    .card img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .card .contenido-card {
        padding: 0.2rem;
    }

    .card .contenido-card a {
        color: var(--blanco);
        gap: 0.075rem;
        padding: 0.125rem 0.25rem;
        border-radius: 0.3rem;
        background-color: rgba(74, 107, 93, 0.35);
        border: 1px solid rgba(255,255,255,0.25);
        transition: background-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
    }

    .card .contenido-card a h3 {
        font-size: 0.55rem;
        line-height: 1;
    }

    .card .contenido-card a::after {
        font-size: 0.5rem;
    }
}

/** Sidebar */
@media (min-width: 1024px) {
    .con-sidebar {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 4rem;
    }
}

/*listado de clases para el sidebar*/
.clases-sidebar li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 2rem 0;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    align-items: center;
}
.clases-sidebar li:last-child {
    border-bottom: none;
}

.clases-sidebar .contenido-servicio h3 {
    margin: 0 0 0 1rem;
    font-size: 2.6rem;
}

.clases-sidebar .contenido-servicio a {
    color: var(--color-cta-verde);

}

.contenido-servicio {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/** Testimoniales */
.testimoniales {
    background: linear-gradient(
        rgb(0 0 0 /.45),
        rgb(0 0 0 /.45)
    ), url(img/testimonialespsico.webp);
    background-size: cover;
    background-position: center center;
    padding: 12rem 0;
}

.contenedor-testimoniales {
    width: min(95%, 80rem);
    margin: 0 auto;

}

.testimonial {
    color: var(--blanco);
}
.testimonial blockquote {
    position: relative;
    padding-left: 12rem;
}
.testimonial blockquote::before {
    content: ' ';
    top: 0;
    left: -0.5rem;
    position: absolute;
    background-image: url('img/quote_blue.svg');
    background-repeat: no-repeat;
    width: 10rem;
    height: 10rem;
}
.testimonial-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}
@media (min-width: 768px) {
    .testimonial-footer {
        justify-content: flex-end;
    }
}
.testimonial-footer img {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
}
.testimonial-footer p {
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--color-cta-hover);
}

/** Informacion meta**/
.meta-info {
    background-color: var(--gris-claro);
    padding: 2rem;
}
.meta-info p, 
.meta-info a {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--negro)
}
.meta-info span {
    color: var(--color-cta-verde);
}

.isSelectedEnd {
    margin-top: 3rem;
}

/** Animacio Letras **/
.ml3 {
  font-weight: 900;
  font-size: 3.5em;
}


.footer .menu-footer a {
    color: #333333; /* tu color deseado */
}

.footer .menu-footer a:hover {
    color: #000000; /* color al pasar el cursor */
}

/**Formulario de Contacto**/

.wpcf7-form label {
    font-weight: 700;
}

.wpcf7-form .wpcf7-form-control {
    width: 100%;
    border: 1px solid var(--gris-claro);
    padding: 1rem;
}

.wpcf7-form .wpcf7-submit {
    background-color: var(--color-cta-hover);
    font-size: 2rem;
    font-family: var(--fuente-principal);
    padding: 1.2rem;
    cursor: pointer;
    color: var(--color-texto-principal);
}

.wpcf7-form .wpcf7-submit:hover {
    cursor: pointer;
}

.wpcf7-form .wpcf7-not-valid-tip {
    background-color: rgba(197, 17, 17, 0.732);
    color: var(--blanco);
    padding: .5rem;
    margin: .5rem 0;
    display: block;
    font-size: 1.5rem;

}

.wpcf7-form .wpcf7-spinner {
    display: block;
    margin: 2rem auto 0 auto;
    background-color: var(--color-cta-verde);
    opacity: 1;
}

/* Comentarios*/

.comentarios {
    margin-top: 5rem;
    width: min(95%, 60rem);
    margin: 5rem auto 0 auto;
}

.comment-reply-title {
    color: var(--color-azul);
    text-decoration:underline;
    text-align: center;
}

.logged-in-as a {
    color: var(--color-azul);
}

.comment-form-comment label {
    font-weight: 700;
    margin: 2rem 0;
    display: block;
}


.form-submit .submit {
    background-color: var(--color-cta-hover);
    cursor: pointer;
    color: var(--color-texto-principal);
    
}

.comment-form-comment textarea,
.comentarios input[type="text"] {
    border:1px solid var(--gris-medio);
    width: 100%;
    margin: 0;
    padding: 1rem;
    
}

.comentarios input[type="text"] {
    padding: 1rem;
    margin: .5rem 0;
}

h3.comentarios {
    margin: 4rem 0;
    color: #170C79;
    text-decoration-line: underline;
}

.lista-comentarios .comment {
    background-color: var(--gris-claro);
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 1rem;
}

.lista-comentarios a {
    color: var(--color-azul);
}

.lista-comentarios cite {
    color: var(--color-texto-principal);
    font-size: 2rem;
    font-weight: 700;
}

.lista-comentarios .children .comment {
    background-color: var(--blanco);
    margin: 2rem 0;

}

/*Paginacion BLog*/
.pagination .screen-reader-text {
    visibility: hidden;
}

.nav-links {
    display: flex;
    justify-content: center;
    gap: .7rem;

}

.nav-links a {
    font-size: 1.4rem;
    color: var(--color-azul);
    font-weight: 700;
    padding: .5rem;
}

.nav-links .current {
    font-size: 1.4rem;
    padding: .5rem;
}