/* --- VARIABLES DE COLOR Y ESTILOS BASE --- */

/* :root nos permite crear variables de CSS para usar en todo el proyecto */
:root {
    --color-lucky-point: #2A2D5E; /* Azul marino para textos */
    --color-summer-sky: #2AC2D2;  /* Celeste para botones y acentos */
    --color-white-smoke: #F7F7F7; /* Blanco suave para fondos */
    --font-principal: 'Montserrat', sans-serif;
}

/* Un reseteo simple para quitar estilos por defecto del navegador */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-principal);
    background-color: var(--color-white-smoke);
    color: var(--color-lucky-point);
}

/* --- ESTILOS GENERALES Y UTILIDADES --- */
.container {
    max-width: 1100px; /* Ancho máximo del contenido */
    margin: 0 auto;    /* Centra el contenedor horizontalmente */
    padding: 0 20px;   /* Espacio a los lados para que no se pegue en móviles */
}

/* --- ESTILOS DEL HEADER --- */
header {
    background-color: var(--color-white-smoke);
    padding: 20px 0;
    border-bottom: 1px solid #e0e0e0; /* Una línea sutil para separar */
}

header .container {
    display: flex;
    justify-content: space-between; /* Pone el logo a la izq. y el botón a la der. */
    align-items: center; /* Centra los elementos verticalmente */
}


/* --- AJUSTE PARA EL LOGO --- */
.logo img {
    height: 40px; /* Ajusta esta altura según el diseño de tu logo */
    width: auto;  /* El ancho se ajustará automáticamente */
    
}

.logo-mobile {
    display: none; /* Ocultamos el isotipo en la vista de escritorio */
}

/* Mantenemos los estilos del logo de escritorio que ya teníamos */
.logo-desktop {
    height: 40px;
    width: auto;
    display: block;
}

.nav-button {
    background-color: var(--color-summer-sky);
    color: var(--color-lucky-point); /* Texto blanco para que contraste */
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600; /* SemiBold */
    transition: background-color 0.3s ease; /* Transición suave para el hover */
}

.nav-button:hover {
    background-color: #25a8b8; /* Un celeste un poco más oscuro al pasar el mouse */
}

/* --- ESTILOS PARA LA NAVEGACIÓN PRINCIPAL --- */
.main-nav {
    display: flex;
    align-items: center;
    gap: 25px; /* Espacio entre el enlace "Blog" y el botón */
}

.nav-link {
    color: var(--color-lucky-point);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--color-summer-sky);
}

/* --- ESTILOS DE LA SECCIÓN HERO (VERSIÓN MEJORADA CON IMAGEN) --- */
#hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    text-align: left;
    padding: 0 20px;
    color: #FFFFFF;
    background-image: linear-gradient(rgba(42, 45, 94, 0.7), rgba(42, 45, 94, 0.7)), url('../assets/hero-background.webp');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
}

#hero .hero-title {
    font-size: 3.2em;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #FFFFFF;
    max-width: 800px;
}

#hero .hero-subtitle {
    font-size: 1.2em;
    line-height: 1.7;
    margin-bottom: 30px;
    color: #e0e0e0;
    max-width: 700px;
    /* Limitamos el ancho para mejor lectura */
}

#hero .hero-trust {
    font-size: 1em;
    color: #e0e0e0;
}

/* --- ESTILOS DE LA SECCIÓN DE CONEXIÓN --- */

#connection {
    background-color: var(--color-lucky-point); /* Fondo azul oscuro */
    color: var(--color-white-smoke); /* Texto blanco suave */
    padding: 80px 0; /* Más espacio vertical para que respire */
    text-align: center;
}

/* Creamos un estilo genérico para títulos de sección */
.section-title {
    font-size: 2.2em;
    line-height: 1.3;
    margin-bottom: 20px;
    text-align: center;
}

/* Y un estilo para subtítulos de sección */
.section-subtitle {
    font-size: 1.1em;
    line-height: 1.7;
    max-width: 800px; /* Limitamos el ancho para que sea fácil de leer */
    margin: 0 auto; /* Centramos el párrafo ya que tiene un ancho máximo */
}

/* Hacemos un pequeño ajuste para el texto de esta sección específica */
#connection .section-title,
#connection .section-subtitle {
    color: var(--color-white-smoke); /* Aseguramos que el texto sea blanco */
}

/* --- ESTILOS DE LA SECCIÓN DE SOLUCIÓN (VERSIÓN CON IMÁGENES) --- */

#solution {
    background-color: var(--color-white-smoke);
    padding: 80px 0;
    text-align: center;
}

#solution .section-title {
    color: var(--color-lucky-point);
}

#solution .section-subtitle {
    margin-bottom: 60px;
}

.solution-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.solution-item {
    background-color: #FFFFFF;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.solution-image-wrapper {
    width: 150px;
    height: 150px;
    margin: 0 auto 25px auto; /* Centra el círculo y le da espacio abajo */
    border-radius: 50%; /* La clave para la imagen circular */
    overflow: hidden; /* Esconde las esquinas de la imagen */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.solution-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen llene el círculo sin deformarse */
}

.solution-item h3 {
    font-size: 1.3em;
    margin-bottom: 10px;
    color: var(--color-lucky-point);
}

.solution-item p {
    line-height: 1.6;
    color: #555;
}

/* --- ESTILOS DE LA SECCIÓN DE SERVICIOS (VERSIÓN MEJORADA) --- */

#services {
    padding: 80px 0;
    background-color: var(--color-white-smoke);
}

#services .section-subtitle {
    margin-bottom: 60px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Cuadrícula responsiva */
    gap: 30px;
}

.service-card {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* <-- La magia empieza aquí */
    flex-direction: column; /* Organiza los elementos en una columna */
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.card-icon {
    font-size: 1.8em;
    color: var(--color-lucky-point);
    display: inline-block;
    width: 40px;
    text-align: center;
}

.card-duration {
    background-color: #f0f0f0;
    color: #555;
    font-size: 0.8em;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.service-card h3 {
    margin-bottom: 15px;
    font-size: 1.3em;
    color: var(--color-lucky-point);
    line-height: 1.3;
}

.service-card p {
    line-height: 1.6;
    color: #555;
    flex-grow: 1; /* <-- Hace que el párrafo ocupe el espacio disponible */
}

.card-tags {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.card-tag {
    background-color: #e9e9e9;
    color: #444;
    font-size: 0.75em;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 15px;
}

.card-footer {
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
    margin-top: auto; /* <-- Empuja el footer al fondo de la tarjeta */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-price-wrapper {
    text-align: left;
}

.card-price-current {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--color-lucky-point);
}

.card-price-old {
    font-size: 0.9em;
    color: #757575;
    text-decoration: line-through;
    display: block;
}

.card-button {
    background-color: var(--color-summer-sky);
    color: var(--color-lucky-point);
    padding: 12px 20px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.card-button:hover {
    background-color: #25a8b8;
}

/* --- DISEÑO RESPONSIVO PARA MÓVILES --- */
/* Cuando la pantalla tenga 768px de ancho o menos... */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr; /* ...las 2 columnas se convierten en 1 */
    }

    .hero-title {
        font-size: 2.2em; /* Reducimos un poco el tamaño del título principal */
    }

    .section-title {
        font-size: 1.8em; /* Y de los títulos de sección */
    }
}

/* --- ESTILOS DE LA SECCIÓN ABOUT (VERSIÓN FINAL: AUTORIDAD + TAGS) --- */

/* #about {
    padding: 120px 0;
    background-color: var(--color-white-smoke);
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: flex-start;
    gap: 80px;
}

.about-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(42, 45, 94, 0.1);
    position: sticky; 
    top: 120px;
}

.about-text {
    background: transparent;
    padding: 0;
    box-shadow: none;
}

.about-greeting {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--color-summer-sky);
    margin: 0;
}

.about-name {
    font-size: 3em;
    font-weight: 700;
    color: var(--color-lucky-point);
    margin-top: 5px;
    margin-bottom: 25px;
    line-height: 1.1;
}

.about-bio {
    font-size: 1.1em;
    line-height: 1.7;
    margin-bottom: 40px;
    color: #555555;
    max-width: 600px;
} */

/* --- Estilos para la Ficha de Credenciales --- */
/* .credentials-box {
    background-color: #FFFFFF;
    border: 1px solid #E8F1F2;
    border-radius: 12px;
    padding: 10px 20px; 
    margin-bottom: 40px; 
}

.credentials-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.credentials-list li {
    display: flex;
    align-items: center; 
    padding: 15px 0;
}

.credentials-list li:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
}

.credential-icon {
    font-size: 1.5em;
    color: var(--color-summer-sky);
    width: 40px;
    margin-right: 20px;
    text-align: center;
}

.credential-text strong {
    display: block;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--color-lucky-point);
    margin-bottom: 4px;
}

.credential-text span {
    font-size: 1em;
    color: #555;
    line-height: 1.5;
} */

/* --- Estilos para las Etiquetas --- */
/* .about-skills-title {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--color-lucky-point);
    margin-bottom: 20px;
}

.about-tags-list {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.about-tags-list li {
    background-color: var(--color-white-smoke);
    border: 1px solid #E0E0E0;
    color: var(--color-lucky-point);
    font-size: 0.9em;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.about-tags-list li:hover {
    background-color: var(--color-summer-sky);
    border-color: var(--color-summer-sky);
    color: #FFFFFF;
    transform: translateY(-2px);
} */

/* --- AJUSTES RESPONSIVOS --- */
/* @media (max-width: 1024px) {
    .about-content { grid-template-columns: 1fr; }
    .about-image {
        position: static;
        width: 250px;
        height: 250px;
        margin: 0 auto 40px auto;
        border-radius: 50%;
    }
    .about-image img { border-radius: 50%; }
    .about-text { text-align: center; }
    .credentials-list li { flex-direction: column; align-items: center; text-align: center; }
    .credential-icon { margin-right: 0; margin-bottom: 10px; }
    .about-skills-title { text-align: center; }
    .about-tags-list { justify-content: center; }
} */

/* --- ESTILOS DE LA SECCIÓN DE BOOKING --- */

#booking {
    padding: 80px 0;
    background-color: var(--color-white-smoke);
    text-align: center;
}

#booking .section-subtitle {
    margin-bottom: 40px;
}

.booking-widget {
    max-width: 1000px;
    margin: 0 auto;
}

/* Estilo para el placeholder mientras no pegas el código de Cal.com */
.cal-embed-placeholder {
    min-height: 400px;
    border: 2px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    border-radius: 12px;
}

/* --- ESTILOS DE LA SECCIÓN FAQ (VERSIÓN MEJORADA) --- */

#faq {
    padding: 80px 0 120px 0; /* Más espacio abajo antes del footer */
    background-color: #FFFFFF;
}

#faq .section-title {
    text-align: center;
    margin-bottom: 50px;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #e0e0e0;
}

.faq-item summary {
    font-weight: 600;
    font-size: 1.2em;
    cursor: pointer;
    list-style: none;
    padding: 25px 5px; /* Más padding para que sea más fácil hacer clic */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease; /* Transición suave */
}

.faq-item summary:hover {
    background-color: #f9f9f9; /* Sutil color de fondo al pasar el mouse */
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    font-size: 1.6em;
    font-weight: 400;
    color: var(--color-summer-sky);
    transition: transform 0.3s ease;
}

.faq-item[open] summary::after {
    content: '×';
    transform: rotate(180deg);
}

.faq-item p {
    padding: 0px 15px 30px 15px; /* Padding para el texto de la respuesta */
    line-height: 1.7;
    color: #555;
}

/* --- ESTILOS DEL FOOTER --- */

footer {
    background-color: var(--color-lucky-point);
    color: var(--color-white-smoke);
    padding: 60px 0;
    text-align: center;
}

.footer-logo {
    font-size: 1.4em;
    font-weight: 700;
    margin-bottom: 15px;
}

.footer-tagline {
    font-size: 1.1em;
    margin-bottom: 30px;
    color: #ccc; /* Un blanco un poco más sutil */
}

.footer-social {
    margin-bottom: 30px;
}

.footer-social a {
    color: var(--color-white-smoke);
    font-size: 1.8em;
    margin: 0 15px;
    transition: color 0.3s ease;
}

.footer-social a:hover {
    color: var(--color-summer-sky); /* El ícono cambia al color celeste al pasar el mouse */
}

.footer-copyright {
    font-size: 0.9em;
    color: #bbbbbb;
}

/* ==========================================================================
   --- CSS RESPONSIVO COMPLETO ---
   ========================================================================== */

/* --- PARA TABLETS Y PANTALLAS MEDIANAS (hasta 1024px) --- */
@media (max-width: 1024px) {
    .section-title {
        font-size: 2em; /* Reducimos ligeramente los títulos de sección */
    }

    #hero .hero-title {
        font-size: 2.8em; /* Hacemos el título principal un poco más manejable */
    }

    .about-content {
        gap: 40px; /* Menos espacio entre la foto y el texto */
    }
}


/* --- PARA MÓVILES (hasta 768px) --- */
/* Aquí ocurren los cambios más grandes, apilando todo a una columna */
@media (max-width: 768px) {
    body {
        font-size: 15px; /* Ajustamos el tamaño de fuente base para mejor lectura */
    }

    .container {
        padding: 0 15px; /* Menos padding lateral en el contenedor principal */
    }
    

    /* --- Hero Section --- */
    #hero {
        min-height: 80vh; /* Un poco menos de altura en móviles */
        background-attachment: scroll; /* El fondo fijo no funciona bien en todos los móviles */
    }

    #hero .hero-title {
        font-size: 2.2em;
    }
    
    #hero .hero-subtitle {
        font-size: 1em;
    }

    /* --- Nuevos estilos para el Header en Móvil --- */
.logo-desktop {
    display: none; /* Ocultamos el logo completo */
}

.logo-mobile {
    display: block; /* Mostramos el isotipo */
    height: 45px; /* Ajusta la altura del isotipo como necesites */
    width: auto;
}

    /* --- Secciones en general --- */
    section {
        padding: 60px 0; /* Menos padding vertical en las secciones */
    }

    .section-title {
        font-size: 1.8em;
        line-height: 1.2;
    }

    /* --- Cuadrículas (Servicios, Solución, etc.) --- */
    .solution-grid,
    .services-grid {
        grid-template-columns: 1fr; /* Forzamos a una sola columna */
    }

    .about-content {
        grid-template-columns: 1fr; /* Apilamos la sección de Natalia */
        text-align: center;
    }

    .about-image {
        width: 180px; 
        height: 180px;
        margin: 0 auto 20px auto; /* Centramos la imagen y le damos espacio abajo */
    }

    .about-credentials li {
        justify-content: center; /* Centramos los items de las credenciales */
        text-align: left; /* Pero mantenemos el texto alineado a la izquierda */
    }

    /* --- Footer --- */
    .footer-social a {
        margin: 0 10px; /* Un poco menos de espacio entre íconos */
    }
    
    /* --- Modales --- */
    .modal {
        width: 95%; /* El modal ocupa casi todo el ancho */
        padding: 20px;
    }
}


/* --- PARA MÓVILES PEQUEÑOS (hasta 480px) --- */
/* Un pulido final para las pantallas más compactas */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    
    #hero .hero-title {
        font-size: 1.9em; /* Aún más pequeño para que quepa bien */
    }

    .card-footer {
        flex-direction: column; /* Apilamos precio y botón en las tarjetas */
        align-items: flex-start; /* Alineamos todo a la izquierda */
        gap: 15px;
    }

    .card-button {
        width: 100%; /* El botón ocupa todo el ancho para ser fácil de tocar */
        text-align: center;
    }
    
    .modal h2 {
        font-size: 1.2em;
    }
}

/* --- MEJORA DE ACCESIBILIDAD PARA NAVEGACIÓN POR TECLADO --- */
:focus-visible {
    outline: 3px solid var(--color-summer-sky);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --- ESTILOS DE LA SECCIÓN DE BLOG --- */

#blog {
    padding: 80px 0;
    background-color: var(--color-white-smoke);
    
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.article-card {
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden; /* Asegura que la imagen respete los bordes redondeados */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.card-image-link img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* La imagen cubre el espacio sin deformarse */
    display: block;
    transition: transform 0.4s ease;
}

.article-card:hover .card-image-link img {
    transform: scale(1.05); /* Efecto de zoom suave en la imagen al pasar el mouse */
}

.card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* El contenido crece para ocupar el espacio */
}

.article-duration {
    font-size: 0.8em;
    font-weight: 600;
    color: #888;
    margin-bottom: 10px;
}

.article-title {
    font-size: 1.25em;
    margin-bottom: 10px;
    line-height: 1.3;
}

.article-title a {
    text-decoration: none;
    color: var(--color-lucky-point);
}

.article-excerpt {
    color: #555;
    flex-grow: 1;
    margin-bottom: 20px;
}

.article-tags {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.article-read-more {
    color: var(--color-summer-sky);
    text-decoration: none;
    font-weight: 700;
    margin-top: auto; /* Empuja este enlace al final de la tarjeta */
}

#blog-listing {
    margin-bottom: 40px;
}