/* Variables de color para fácil mantenimiento */
:root {
    --color-primary: red;
    --color-secondary: #A855F7; 
    --color-text-dark: black;
    --color-text-medium: #9b9b9b;
    --color-background: #ffffff;
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-gray-dark: #333333;
}

/* Aplicado al BODY y selectores universales para máxima cobertura */
.page-body, .page-body *,
.no-copy, .no-copy * {
    /* 1. Deshabilitar selección de texto */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge */
    user-select: none;         /* Estándar */
    
    /* 2. Deshabilitar el menú contextual (click derecho) */
    -webkit-touch-callout: none; /* iOS */
    pointer-events: auto; /* Asegura que otros eventos de click funcionen */
}

/* Base Body Styles */
.page-body {
    background-color: black;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    margin: 0;
    
    /* CLAVE: Añadir padding para compensar la altura del header fijo */
    padding-top: 4.2rem; /* Ajusta este valor si tu header es más alto o más bajo */
    overflow-x: hidden;
}

.links { 
    text-decoration: none; 
    color: white;
}

* {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

/* ====================================== ====================================== HEADER ====================================== ======================================*/

.main-header {
    background-color: var(--color-background);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); 
    position: fixed;
    top: 0; 
    left: 0;
    right: 0;
    z-index: 1000; 

    /* CLAVE: Transición para suavizar el cambio de color */
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.main-nav {
    max-width: 1280px; 
    margin-left: auto;
    margin-right: auto;
    padding: 1rem; 
    display: flex;
    justify-content: space-between; 
    align-items: center;
}

@media screen and (min-width: 760px) and (max-width: 800px) {
    .main-nav {
        font-size: 0.875rem;
    }
}

/* --- Botón de Hamburguesa --- */
.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: rgb(80, 79, 79);
    z-index: 1050; 
    display: block; /* Visible en móvil */
    order: 1; 
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.menu-toggle svg {
    width: 1.75rem;
    height: 1.75rem;
}

/* Animación del icono */
.menu-toggle path {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-toggle.is-active .line-top {
    /* Mueve la línea superior hacia el centro y la rota 45 grados */
    transform: translateY(6px) rotate(45deg);
}

.menu-toggle.is-active .line-mid {
    /* Oculta la línea del medio */
    opacity: 0;
}

.menu-toggle.is-active .line-bot {
    /* Mueve la línea inferior hacia el centro y la rota -45 grados */
    transform: translateY(-6px) rotate(-45deg);
}

@media (min-width: 768px) {
    .menu-toggle {
        display: none; /* OCULTAR en escritorio */
    }
}

/* --- Logo/Título (Centrado en Móvil) --- */
.nav-section-left {
    display: flex;
    align-items: center;
    gap: 0.5rem; 
    min-width: auto; 
    
    /* Centrado absoluto en móvil */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    order: 3;
}

@media (min-width: 768px) {
    .nav-section-left {
        /* Restablecer para escritorio */
        position: static;
        transform: none;
        min-width: 150px; 
        order: 1; 
    }
}

/* --- Iconos redes derecha --- */
.nav-section-right {
    display: flex; 
    text-align: right;
    color: var(--color-text-medium);
    font-size: 0.875rem;
    order: 3; 
}

@media (min-width: 768px) {
    .nav-section-right {
        display: block; 
    }
}

/* --- Links de Navegación (Contenedor) --- */
.nav-section-center {
    display: none; /* CLAVE: Oculto por defecto en móvil */
}

@media (min-width: 768px) {
    .nav-section-center {
        /* CLAVE: MOSTRAR el contenedor en PC */
        flex-grow: 1; 
        display: flex; 
        justify-content: center; 
        order: 2; 
    }
}

/* Los enlaces reales (nav-links) */
.nav-links {
    gap: 1.5rem; 
    color: var(--color-text-medium);
    font-weight: 500; 
}

@media (min-width: 768px) {
    /* CLAVE: Muestra los enlaces en PC */
    .nav-links {
        display: flex; /* Muestra el flexbox para los enlaces */
        flex-direction: row;
        position: static;
    }
}

/* --- Estilos Generales y Links --- */
.info-text { margin: 0; line-height: 1.2; }
.info-status { font-weight: 500; color: var(--color-black); }
.logo-container { display: flex; align-items: center; gap: 0.5rem; }
.logo-image { height: 2rem; width: 2rem; object-fit: contain; }
.logo-text { font-size: 1.25rem; font-weight: 700; color: var(--color-text-dark); }
.logo-highlight { color: var(--color-primary); }

.logo-image-redes {
    /* CLAVE 1: Tamaño que usted especificó */
    height: 1.5rem; 
    width: 1.5rem;
    object-fit: contain;
    color: var(--color-primary); 
    fill: currentColor;
    transition: color 0.15s ease-in-out;
    padding-left: 20px;
    order: 4;
}

.logo-image-redes:hover {
    color: black;
}

.nav-link {
    text-decoration: none; 
    color: black;
    padding: 0.5rem 0; 
    transition: color 0.15s ease-in-out;
}

.nav-link:hover { color: var(--color-primary); }
.nav-link-active { color: var(--color-primary); font-weight: 700; }

/* Añade esto a tu style.css cerca de .logo-container */
.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none; /* Asegura que no tenga subrayado */
    color: inherit;       /* Hereda el color del padre */
}

.nav-link-plugins {
    text-decoration: none; 
    color: rgb(255, 255, 255);
    padding: 0.5rem 0; 
    transition: color 0.15s ease-in-out;
}

.nav-link-plugins:hover { color: var(--color-primary);}

/* --------------------------------------
   ESTILOS DEL MENÚ LATERAL (MOBILE MENU) - CORRECCIÓN DE OCULTAMIENTO
   -------------------------------------- */

.nav-section-center {
    /* Estado base: Oculto en móvil. MOSTRADO en PC (anulado por @media min-width: 768px) */
    transform: translateX(-100%); /* CLAVE: Oculta el menú fuera de la pantalla inmediatamente */
    transition: transform 0.3s ease-in-out;
    
    /* El resto de estilos del sidebar se aplican a la clase 'open' */
}

.nav-section-center.open {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh; 
    width: 80vw; 
    max-width: 300px; 
    background-color: rgb(255, 255, 255); 
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.5);
    
    display: flex; /* Muestra el menú lateral */
    flex-direction: column;
    padding: 5rem 1.5rem 1rem; 
    overflow-y: auto; 
    
    transform: translateX(0); /* Estado visible */
    transition: transform 0.3s ease-in-out;
    z-index: 999;
}

@media (min-width: 768px) {
    /* Deshabilitar el estilo lateral en PC, asegurando que los enlaces de PC se vean */
    .nav-section-center {
        /* Deshacer las propiedades de posicionamiento fijo */
        transform: none;
        position: static;
        display: flex; /* Mantiene la visibilidad de los links de PC (regla reforzada en la sección 1) */
        box-shadow: none;
        width: auto;
        height: auto;
        /* Quitamos overflow-y: auto para no interferir con el scroll de la página en PC */
        overflow-y: visible;
    }
}

.nav-section-center.open .nav-link {
    color: black;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1.1rem;
    text-align: left;
}

.nav-section-center.open .nav-link:hover {
    color: var(--color-primary);
}

.nav-section-center.open .nav-link:last-child {
    border-bottom: none;
}

.nav-section-center.open .nav-link-active {
    color: var(--color-primary); 
    font-weight: 700;           
    
}

/* ====================================== ====================================== SECCION 1 ====================================== ======================================*/

.hero-section {
    text-align: center; /* Por defecto, centrado en móvil */
    padding-top: 5rem; 
    padding-bottom: 5rem;
    padding-left: 1rem; 
    padding-right: 1rem;
    position: relative; 
    overflow: hidden;
    z-index: 0;
}

.hero-content-wrapper {
    /* Por defecto, en móvil, se apilan (columna) */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra horizontalmente los elementos apilados en móvil */
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .hero-section {
        padding-top: 8rem; 
        padding-bottom: 8rem;
    }
}

.hero-title {
    font-size: 60px; 
    color: white;
    margin-bottom: 1.5rem;
    margin-top: 20%;
    max-width: 56rem; 
    margin-left: auto;
    margin-right: auto;
    line-height: 1.2;
}

.hero-highlight {
    color: var(--color-primary);
    font-size: 25px;
    font-weight: 800;
}

.hero-subtitle {
    font-size: 1.125rem; 
    color: white;
    margin-bottom: 3rem; 
    max-width: 42rem; 
    margin-left: auto;
    margin-right: auto;
    font-family: 'Quicksand', sans-serif;
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 40px; 
    }
}

@media (max-width: 320px) {
    .hero-title {
        font-size: 35px; 
    }
}

.hero-image-column {
    /* Ocupa todo el ancho en móvil */
    text-align: center; /* Centra la imagen en móvil */
    order: 2; /* En móvil, la imagen va DESPUÉS del texto (Abajo) */
}

@media (max-width: 640px) {
    .hero-highlight {
        font-size: 20px;
    }
}

.tech-logos {
    display: flex;
    justify-content: center;
    gap: 2rem; 
    margin-bottom: 4rem; 
}

.tech-logo {
    height: 10rem; 
    opacity: 0.7; 
    transition: opacity 0.3s ease; 
}

.tech-logo:hover {
    opacity: 1; 
}

.license-text {
    font-size: 0.875rem; 
    margin-bottom: 2rem;
    color: #6B7280; 
}

.license-highlight {
    font-weight: 500; 
}

@media (max-width: 700px) {
    .tech-logo {
        height: 7rem; 
        opacity: 0.7; 
        transition: opacity 0.3s ease; 
    }
}

@media (min-width: 992px) {
    .hero-section {
        padding-top: 8rem; 
        padding-bottom: 8rem;
    }
    
    .hero-content-wrapper {
        /* CLAVE: En escritorio, se ponen LADO A LADO (fila) */
        flex-direction: row; 
        justify-content: space-between; 
        text-align: left; /* Alineamos el contenido de la sección a la izquierda */
        align-items: flex-start; /* Alineación superior */
    }

    .hero-text-content {
        /* El texto ocupa el espacio izquierdo */
        width: 55%; 
        text-align: left; /* Alineamos el texto a la izquierda en PC */
        order: 1; /* El texto va PRIMERO (Izquierda) */
    }

    .hero-image-column {
        /* La imagen ocupa el espacio derecho */
        width: 40%;
        text-align: right; /* Alineamos la imagen a la derecha */
        order: 2; /* La imagen va DESPUÉS del texto (Derecha) */
    }
    
    /* El título y subtítulo deben alinearse a la izquierda en PC */
    .hero-title, .hero-subtitle, .hero-highlight, .license-text {
        text-align: left !important;
        margin-left: 0;
    }
    
    .tech-logos {
        justify-content: flex-start; /* Alineamos los logos a la izquierda */
    }
}

/* --------------------------------------
    3. Screenshot Section 
    -------------------------------------- */

/* Estado inicial: oculta y abajo (fuera de pantalla) */
.screenshot-image {
    height: 600px;
}

@media (min-width: 768px) {
    .screenshot-frame { width: 600px; }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 40px; 
    }
}

/* ====================================== ====================================== CIRCULOS SECCION 1 ====================================== ====================================== */

.circles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;   /* en vez de width: 100% */
    bottom: 0;  /* en vez de height: 100% */
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

/* Estilo base de cada burbuja */
.circles li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    bottom: -150px;
    border-radius: 50%;
    animation: animate 25s linear infinite;
}

/* Variaciones por burbuja */
.circles li:nth-child(1) {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

.circles li:nth-child(2) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5) {
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6) {
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7) {
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9) {
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10) {
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}

/* Animación */
@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
        border-radius: 0;
    }
    100% {
        transform: translateY(-2000px) rotate(720deg);
        opacity: 1;
        border-radius: 100%;
    }
}

/* ====================================== ====================================== SECCION 2 ====================================== ======================================*/

.features-section {
    position: relative; 
    /* Usamos el degradado rojo-oscuro que enviaste */
    padding-top: 2.5rem;
    padding-bottom: 5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    color: black;
    background-color: white;
    overflow: hidden; 
    padding-top: 100px; 
    z-index: 1;
}

.fs-nim {
    z-index: 1000;
    background-color: black;
}

/* --- ESTILO DE ONDA/NUBE --- (Se mantienen) */

.wave-top {
    top: 0;
    border-bottom-left-radius: 100% 100px;
    border-bottom-right-radius: 100% 100px;
    transform: translateY(-50%);
}

.wave-bottom {
    bottom: 0;
    border-top-left-radius: 100% 100px;
    border-top-right-radius: 100% 100px;
    transform: translateY(50%); 
}

/* Contenedor principal del contenido */
.features-container {
    max-width: 1280px; /* Ancho completo del contenedor */
    margin-left: auto;
    margin-right: auto;
}

/* --- NUEVO LAYOUT: FLEX para las dos columnas (Grid y Elemento Grande) --- */
.features-content-wrapper {
    display: flex;
    flex-direction: column; /* Apilados en móvil */
    gap: 3rem; 
}

@media (min-width: 1024px) {
    .features-content-wrapper {
        flex-direction: row; /* Lado a lado en escritorio */
        justify-content: space-between;
    }
}

/* --- Columna Izquierda: Cuadrícula de elementos pequeños --- */
.features-grid-small {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 1 columna en móvil */
    gap: 2rem;
    text-align: center; /* Centrar el contenido de las tarjetas */
}

@media (min-width: 768px) {
    .features-grid-small {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablet */
    }
}

@media (min-width: 1024px) {
    .features-grid-small {
        width: 60%; /* Ocupa el 60% del ancho total */
        /* Usamos 2 columnas fijas para forzar el layout 2x2 */
        grid-template-columns: repeat(2, 1fr);
        /* Quitamos text-align: center para replicar la alineación izquierda de la imagen azul */
        text-align: left; 
    }
}


/* --- Columna Derecha: Elemento Grande "Foco en la Solución" --- */
.install-info-large {
    /* Nueva clase para el elemento grande */
    line-height: 1.5;
    
    /* Mantiene las reglas de animación */
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    align-items: left;
    text-align: left;
}

@media (min-width: 1024px) {
    .install-info-large {
        width: 35%; /* Ocupa el 35% del ancho total */
        padding-top: 1rem; /* Pequeño ajuste visual para alineación */
    }
}


/* --- ESTILOS DE LA TARJETA GRANDE --- */
.install-icon-wrapper {
    justify-content: flex-start; 
    margin-bottom: 1rem;
}
@media (min-width: 1024px) {
    .install-icon-wrapper {
        /* En desktop, queremos que el icono quede a la derecha del texto */
        justify-content: flex-end; 
    }
}

/* ÍCONO GRANDE CON CÍRCULO DE FONDO */
.install-image {
    /* Ajustar el tamaño de la imagen */
    height: 8rem; 
    width: 8rem;
    padding: 1.5rem; 
    background-color: transparent; 
    border-radius: 50%;
    object-fit: contain;
    border: 3px solid black; 
    
    /* === APLICACIÓN DEL FILTRO PARA CAMBIAR EL COLOR === */
    filter: brightness(1.5) hue-rotate(180deg);
}

.install-title {
    font-size: 2.5rem; 
    font-weight: 800; 
    margin-top: 0;
    margin-bottom: 0.5rem;
    text-align: left; /* Título alineado a la izquierda */
    color: #2f2f2f;
}

.install-description {
    font-size: 1.125rem; 
    margin-bottom: 2rem;
    max-width: 100%; 
    color: #2f2f2f; /* Texto blanco para legibilidad */
}

.install-button {
    background-color: var(--color-white);
    color: #e54646; 
    font-weight: 700; 
    padding: 0.75rem 2rem; 
    border-radius: 0.5rem; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.5); 
    border: none; 
    cursor: pointer;
}


/* --- ESTILOS DE LAS TARJETAS PEQUEÑAS --- */

.feature-card {
    /* Resetear alineación del contenido de la tarjeta */
    text-align: left; 
    display: flex;
    flex-direction: column;
    gap: 0.75rem; 
    line-height: 1.5;
    align-items: left;
    text-align: left;
    /* ... Animación se mantiene ... */
}

.feature-icon-wrapper {
    height: 4rem; 
    width: 4rem; 
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: hsla(0, 0%, 0%, 0); /* Hacemos el fondo del círculo transparente */
    border-radius: 50%;
    margin-bottom: 0.1rem; 
    text-align: center;
}

.feature-image {
    height: 3rem; 
    width: 3rem;
    filter: invert(0%); /* Asegurar que el icono se vea si es blanco sobre fondo oscuro */
    object-fit: contain;
    
    /* === APLICACIÓN DEL FILTRO PARA CAMBIAR EL COLOR === */
    filter: brightness(1.5) hue-rotate(180deg);
}

.feature-title {
    font-size: 2rem; 
    font-weight: 700;
    margin-top: 0.1rem;
    margin-bottom: 1px;
    color: var(--color-primary);
}

.feature-description {
    font-size: 0.875rem; 
    /* El color de texto medio que habías definido es gris, lo usamos aquí para el contraste */
    color: #2f2f2f;
    opacity: 1; 
    max-width: 85%;
    margin-bottom: 100px;
}

.img-features {
    /* Ajustar el tamaño de la imagen */
    /*height: 200px; */
    max-width: 100%;
    width: 400px;
    /*padding: 1.5rem; */
    object-fit: contain;
    
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    
}


@media (max-width: 768px) {
    .install-title {
        font-size: 2.1rem; 
    }
    .install-description{
        font-size: 1.1rem;
        max-width: 90%;
    }
    .feature-description {
        max-width: 90%;
        font-size: 0.875rem;
    }
    /* En desktop, las tarjetas tendrán un ancho fijo o un máximo */
    .img-features {
        width: 350px;
    }
}

/* --------------------------------------
   5. Clases de Animación (Visibles y Ocultas)
   -------------------------------------- */

.animate-slide-in-top {
    transform: translateY(-20px); 
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-slide-in-top-img {
    transform: translateY(-100px); 
    opacity: 0;
    transition: opacity 2s ease-out, transform 0.8s ease-out;
}

.animate-slide-in-left {
    transform: translateX(-50px); 
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-slide-in-right {
    transform: translateX(50px); 
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.is-visible {
    opacity: 1;
    transform: translate(0, 0); 
}

/* ====================================== ====================================== SECCION 3 ====================================== ======================================*/

.featured-projects-section {
    background-color: rgb(0, 0, 0); /* Fondo negro */
    padding: 6rem 1rem;
    color: var(--color-white);
    text-align: center;
}

@media (max-width: 768px) {
    /* En desktop, las tarjetas tendrán un ancho fijo o un máximo */
    .featured-projects-section {
        color: var(--color-white);
        text-align: center;
        align-items: center;
    }
}

.feature-card.is-hidden {
    /* La tarjeta de la izquierda regresa al estado inicial de 'slide-in-left' */
    transform: translateX(-50px); 
    opacity: 0;
}

.install-info-large.is-hidden {
    /* La tarjeta de la derecha (Foco en Solución) regresa al estado inicial de 'slide-in-right' */
    transform: translateX(50px);
    opacity: 0;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.section-subtitle {
    font-size: 1.125rem;
    color: rgb(255, 255, 255);
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    /* En desktop, las tarjetas tendrán un ancho fijo o un máximo */
    .section-title {
        font-size: 2.5rem;
        max-width: 100%;
    }

    .project-card {
        /* Define un ancho máximo para que 3 tarjetas encajen bien */
        width: 100%;
        max-width: 380px; /* Ancho fijo para las tarjetas en desktop */
    }
}

/* --- Grid de Proyectos --- */

.projects-grid {
    display: flex; /* CAMBIO CLAVE: Usamos Flexbox en lugar de Grid para la alineación central */
    flex-wrap: wrap;
    justify-content: center; /* Alinea los elementos al centro (1 o 2 elementos se centrarán) */
    gap: 2rem; /* Espacio entre las tarjetas */
    margin-bottom: 3rem;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    /* En desktop, las tarjetas tendrán un ancho fijo o un máximo */
    .project-card {
        /* Define un ancho máximo para que 3 tarjetas encajen bien */
        width: 100%;
        max-width: 380px; /* Ancho fijo para las tarjetas en desktop */
    }
}

/* --------------------------------------
   EFECTO DE ZOOM Y TRANSFORMACIÓN
   -------------------------------------- */

.project-card {
    background-color: #1a1a1a;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    
    /* CLAVE: Posición Relativa para que el enlace se posicione */
    position: relative; 
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer; /* Indicar que la tarjeta es clicable */
}

/* --- Enlace de Cobertura (El "truco") --- */

.project-link-full-card {
    /* CLAVE: Posición Absoluta para cubrir todo el padre relativo */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10; /* Asegura que está sobre todos los demás elementos */
    
    /* Hacemos el enlace completamente transparente */
    background-color: transparent;
    text-decoration: none;
    
    /* Opcional: Esto ayuda a los navegadores a entender el área clicable */
    display: block; 
}

/* Efecto de levitación */
.project-card:hover {
    transform: translateY(-8px); /* Elevación más notable */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
}

/* EFECTO DE ZOOM EN LA IMAGEN */
.project-card:hover .project-image {
    /* La imagen se agranda (1.05 veces su tamaño) */
    transform: scale(1.05); 
}

.project-image {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 2px solid var(--color-primary);
    
    /* CAMBIO CLAVE: Transición para el zoom */
    transition: transform 0.3s ease;
    /* Aseguramos que la transformación no afecte a otros elementos */
    will-change: transform; 
}

.project-info {
    padding: 1.5rem;
    text-align: left;
}

.project-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.project-description {
    font-size: 0.9rem;
    color: #b0b0b0;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.project-tech {
    display: block;
    font-style: italic;
    font-weight: 500;
    color: var(--color-primary); /* Resaltar las tecnologías en rojo */
    margin-top: 0.5rem;
}

.project-link {
    display: inline-block;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}

.project-link:hover {
    color: var(--color-white);
    border-bottom-color: var(--color-primary);
}

/* --- Contenedor y Botón "Ver Más" --- */

.view-more-container {
    margin-top: 2rem;
}

.button-primary {
    /* Estilo del botón principal (CTA) */
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 0.75rem 2.5rem;
    border-radius: 0.25rem;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    transition: background-color 0.2s ease;
}

.button-primary:hover {
    background-color: #ff3333; /* Un rojo más claro al pasar el ratón */
}

/* ====================================== ====================================== FOOTER ====================================== ======================================*/

.main-footer {
    background-color: #000000; /* Color negro/gris muy oscuro */
    color: #FFFFFF;
    font-size: 0.875rem; /* text-sm */
    padding-top: 2rem;
}

.footer-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem 3rem; /* Espaciado interno */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* --- Sección de Marca (Logo y Copyright) --- */

.footer-brand-section {
    width: 100%;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .footer-brand-section {
        width: 30%; /* Ocupa 30% en escritorio */
    }
}

.footer-logo-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.footer-logo-image {
    height: 2.5rem; /* Un poco más grande que el header */
    width: 2.5rem;
    object-fit: contain;
}

.footer-logo-text {
    font-size: 1.5rem;
    font-weight: 700;
}

.footer-logo-highlight {
    color: var(--color-primary); /* Usa el color principal de la página */
}

.footer-copyright {
    color: #A0A0A0;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

/* --- Iconos Sociales (Final - Usando SVG) --- */
.footer-social-icons {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.social-icon {
    justify-content: center;
    align-items: center;
    height: 1.75rem;
    width: 1.75rem;
    
    /* Color base del borde y el ícono */
    color: #8c8c8c; /* Establece el color gris para el SVG */
    
    text-decoration: none;
    transition: all 0.2s;
    position: relative;
    display: inline-block;
}

/* REGLA CLAVE: Estilos para el SVG (el ícono en sí) */
.social-icon svg {
    /* El SVG debe tomar el color de su contenedor (el <a>) */
    fill: currentColor;

    /* Definir el tamaño del SVG dentro del círculo */
    width: 1.5rem;
    height: 1.5rem;

    /* El ícono de Font Awesome tiene un viewBox de 24x24, así que esto funciona */
}

.social-icon:hover {
    /* Cambia el borde y el color a rojo */
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* --------------------------------------
   7. Tooltip para Iconos Sociales 
   -------------------------------------- */

/* El elemento Tooltip (se crea con la pseudo-clase :after) */
.social-icon::after {
    content: attr(data-platform);
    /* Muestra el texto del atributo data-platform */

    /* ESTILOS DEL CUADRO GRIS */
    background-color: #333333;
    /* Fondo gris oscuro */
    color: var(--color-white);
    /* Letras blancas */
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    /* Evita que el texto se rompa en varias líneas */

    /* POSICIONAMIENTO */
    position: absolute;
    bottom: calc(100% + 8px);
    /* 8px arriba del ícono */
    left: 50%;
    transform: translateX(-50%);
    /* Centra horizontalmente el tooltip */

    /* VISIBILIDAD INICIAL */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Asegura que el tooltip no interfiera con el clic */
    transition: opacity 0.2s ease, transform 0.2s ease;

    /* Agregamos una pequeña flecha si es necesario (triángulo) */
    /*
    border: 5px solid transparent;
    border-top-color: #333333;
    */
}

/* Mostrar el Tooltip al pasar el mouse o al obtener el foco (Tab) */
.social-icon:hover::after,
.social-icon:focus::after {
    opacity: 1;
    visibility: visible;
    /* Movemos el tooltip ligeramente para dar un efecto suave */
    transform: translateX(-50%) translateY(-2px); 
}

/* --- Selector de Idioma Desplegable (Simulación de la caja) --- */
.footer-language-selector {
    position: relative; /* Clave para el desplegable */
    margin-bottom: 1.5rem;
}

.language-display-button {
    /* Estilo que simula la caja de selección anterior */
    background-color: transparent;
    color: #A0A0A0;
    border: 1px solid #A0A0A0;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    /* Ajuste el padding derecho para la flecha */
    border-radius: 0.25rem;
    font-size: 1rem;
    cursor: pointer;
    text-align: left;
    width: 100%;
    /* Ocupa todo el ancho disponible */

    /* Simulación de la flecha de selector */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 24 24" width="12" fill="%23A0A0A0"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;

    /* Asegurar que la fuente es la misma que el resto del body */
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.language-display-button:hover {
    color: white;
    border: 1px solid rgb(255, 255, 255);
}

/* Menú Desplegable de Idiomas */
.language-dropdown-menu {
    position: absolute;
    bottom: 100%;
    /* Aparece justo arriba del botón */
    left: 0;
    z-index: 10;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #121212;
    /* Mismo color de fondo del footer */
    border: 1px solid #A0A0A0;
    border-radius: 0.25rem;
    min-width: 100%;

    /* Inicialmente oculto. JavaScript lo mostrará al añadir la clase 'open' */
    display: none;
}

/* Estado Abierto (controlado por JS) */
.language-dropdown-menu.open {
    display: block;
}

.language-option {
    display: block;
    padding: 0.5rem 0.75rem;
    color: #A0A0A0;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background-color 0.15s, color 0.15s;
}

.language-option:hover {
    background-color: #333333;
    /* Resaltado al pasar el ratón */
    color: var(--color-white);
}

.language-option.active-language {
    color: white;
    /* o cualquier color distintivo */
}

/* Regla extra para eliminar la regla anterior del select si aún existía */
.language-select option {
    /* Esto ya no se usa, pero se mantiene para evitar conflictos */
    background-color: initial;
    color: initial;
}

/* --- Grupos de Links (Explorar, Recursos, Cuenta) --- */

.footer-links-group {
    width: 45%;
    /* 2 columnas en móvil */
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .footer-links-group {
        width: 20%;
        /* 3 o 4 columnas en escritorio */
    }
}

.footer-links-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    color: var(--color-white);
}

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

.footer-link-desc {
    color: #A0A0A0;
    text-decoration: none;
    line-height: 2.2;
    /* Espaciado entre links */
    display: block;
    transition: color 0.15s;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: .875rem;
    font-family: Arial, Helvetica, sans-serif;
}

.footer-link-desc2 {
    color: #A0A0A0;
    text-decoration: none;
    line-height: 2.2;
    /* Espaciado entre links */
    display: block;
    transition: color 0.15s;
    margin-bottom: 15px;
    font-size: .875rem;
    font-family: Arial, Helvetica, sans-serif;
}

.footer-link {
    color: #A0A0A0;
    text-decoration: none;
    line-height: 2.2;
    /* Espaciado entre links */
    display: block;
    transition: color 0.15s;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: .875rem;
    font-family: Arial, Helvetica, sans-serif;
}

.footer-link:hover {
    color: var(--color-white);
}

/* --- Barra Inferior --- */

.footer-bottom-bar {
    background-color: rgb(26, 26, 26);
    border-top: 1px solid #222222;
    padding: 1rem 1rem;
    text-align: center;
}

.footer-bottom-text {
    max-width: 1280px;
    margin: 0 auto;
    color: #A0A0A0;
    font-size: 0.75rem;
    /* texto muy pequeño */
}

.footer-bottom-link {
    color: #A0A0A0;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.15s;
}

.footer-bottom-link:hover {
    color: white;
}

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

/* --------------------------------------
   SECCIÓN DE CONTACTO (.contacto-section)
   -------------------------------------- */
.contacto-section {
    padding: 4rem 1rem;
    background-color: black; /* Negro */
    color: var(--color-white); /* Blanco */
}

.contacto-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Encabezado --- */
.contacto-header {
    margin-bottom: 3rem;
    text-align: left;
}

.contacto-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-white); /* Rojo/Magenta */
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.contacto-subtitle {
    font-size: 1rem;
    color: var(--color-text-medium); /* Gris */
}

/* --- Contenido (Layout de 2 Columnas) --- */
.contacto-content-wrapper {
    width: 95%;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

@media (min-width: 768px) {
    .contacto-content-wrapper {
        flex-direction: row;
        justify-content: space-between;
    }
    .contacto-formulario {
        flex: 2; /* Formulario toma más espacio */
    }
    .contacto-info {
        flex: 1; /* Información toma menos espacio */
    }
}

/* --- Estilos de Títulos Secundarios --- */
.contacto-form-title, .contacto-info-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--color-white); /* Blanco */
}

/* --- Formulario --- */
.contacto-form-fields {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.contacto-input-group {
    display: flex;
    gap: 1rem;
}

.contacto-input-half {
    flex: 1;
}

.contacto-input-field, .contacto-textarea-field {
    width: 95%;
    padding: 0.8rem 1rem;
    background-color: #1a1a1a; /* Fondo del campo ligeramente gris */
    border: 1px solid #333333;
    border-radius: 4px;
    color: var(--color-white);
    font-size: 1rem;
    box-shadow: 0 0 0 1px var(--color-primary); /* Borde magenta */
    outline: none;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.contacto-input-field::placeholder, .contacto-textarea-field::placeholder {
    color: #888888;
}

.contacto-input-field:focus, .contacto-textarea-field:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary);
}

/* Estilo específico para el SELECT */
.contacto-input-select-wrapper {
    position: relative;
    /* Ajuste para simular el borde de la imagen */
    box-shadow: 0 0 0 1px var(--color-primary); 
    border-radius: 4px;
    background-color: #1a1a1a;
}
.contacto-input-select {
    appearance: none; /* Elimina el estilo nativo de flecha */
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Añadir flecha personalizada (SVG Base64) */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="%23FFFFFF"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 1rem top 50%;
    padding-right: 2.5rem;
    border: none; /* Quitamos el borde ya que el wrapper lo tiene */
    box-shadow: none;
}


.contacto-textarea-field {
    resize: vertical;
}

/* --- Botón de Envío --- */
.contacto-submit-button {
    background-color: var(--color-primary); /* Magenta */
    color: var(--color-white);
    font-size: 1.1rem;
    font-weight: 700;
    padding: 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.contacto-submit-button:hover {
    background-color: #ff3333; /* Rojo más fuerte */
}

/* --- Columna de Información --- */
.contacto-info {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.contacto-info-block {
    padding: 1.5rem;
    border-left: 3px solid var(--color-primary); /* Línea vertical magenta */
}

.contacto-info-title {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.contacto-info-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.8rem;
    font-size: 1rem;
}

.contacto-info-item i {
    color: var(--color-primary);
    margin-right: 0.5rem;
    width: 20px; /* Asegura alineación */
    text-align: center;
}

.contacto-label {
    font-weight: 700;
    margin-right: 0.5rem;
}

.contacto-value {
    color: var(--color-text-medium);
}
.contacto-email {
    color: var(--color-primary);
    font-weight: 500;
}

.contacto-info-note {
    font-size: 0.85rem;
    color: #666666;
    margin-top: 1rem;
    border-top: 1px solid #333333;
    padding-top: 1rem;
}

/* Horarios específicos */
.contacto-horario-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.contacto-label-horario i {
    color: var(--color-primary);
}
.contacto-value-horario {
    color: var(--color-white);
    font-weight: 500;
}

/* --- Estilos para Mensajes de Formulario --- */
.contacto-message-container {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
    font-weight: 700;
    text-align: center;
    display: none; /* Inicialmente oculto */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contacto-message-container.success {
    background-color: #4CAF50; /* Verde */
    color: white;
    display: block;
    opacity: 1;
}

.contacto-message-container.error {
    background-color: #f44336; /* Rojo */
    color: white;
    display: block;
    opacity: 1;
}

/* ====================================== ====================================== DOCUMENTOS ====================================== ======================================*/

/* --------------------------------------
   SECCIÓN DE DOCUMENTOS (.documentos-section)
   -------------------------------------- */
.documentos-section {
    padding: 6rem 1rem;
    background-color: black; /* Fondo Negro */
    color: var(--color-white); /* Texto Blanco */
    min-height: 80vh;
}

.documentos-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* --- Encabezado --- */
.documentos-header {
    text-align: center;
    margin-bottom: 4rem;
}

.documentos-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-primary); /* Rojo/Magenta */
    margin-bottom: 0.5rem;
}

.documentos-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-medium); /* Gris */
    max-width: 700px;
    margin: 0.5rem auto 0;
}

/* --- Grid de Documentos --- */
.documentos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.documentos-card {
    background-color: #1a1a1a; /* Fondo de tarjeta gris oscuro */
    padding: 2rem;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid #333;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.documentos-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary); /* Resalta el borde al pasar el ratón */
    box-shadow: 0 5px 15px rgba(229, 70, 70, 0.2);
}

/* --- Iconografía --- */
.documentos-icon-wrapper {
    height: 60px;
    width: 60px;
    background-color: rgba(229, 70, 70, 0.1); /* Fondo transparente rojo */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

/* Reemplaza la regla de .documentos-icon-wrapper i con esta: */
.documentos-icon-wrapper svg {
    width: 1.8rem;
    height: 1.8rem;
    fill: white; /* Rellena el SVG con el color rojo/magenta */
}

/* --- Títulos y Texto --- */
.documentos-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-primary);
}

.documentos-card-description {
    font-size: 0.95rem;
    color: var(--color-text-medium);
    margin-bottom: 1rem;
    flex-grow: 1; /* Empuja el botón hacia abajo */
}

.documentos-tech-tag {
    display: inline-block;
    background-color: #333;
    color: #fff;
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
    border-radius: 3px;
    margin-bottom: 1rem;
    font-weight: 500;
}

/* --- Enlace / Botón --- */
.documentos-link {
    display: inline-block;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.documentos-link:hover {
    border-bottom-color: var(--color-primary);
}

/* --- CTA (Llamada a la Acción) Inferior --- */
.documentos-cta-container {
    margin-top: 4rem;
    text-align: center;
}

.documentos-cta-button {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: 700;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.2s;
}

.documentos-cta-button:hover {
    background-color: #ff3333;
}

/* --------------------------------------
   SECCIÓN DE CONTENIDO DE DOCUMENTOS
   -------------------------------------- */
.documento-content-section {
    padding: 6rem 1rem;
    background-color: black; /* Fondo Negro */
    color: var(--color-white); /* Texto principal Blanco */
    max-width: 100%;
}

.documento-content-container {
    max-width: 850px;
    margin: 0 auto;
}

.documento-main-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--color-primary); /* Título principal en Rojo/Magenta */
    margin-bottom: 0.5rem;
}

.documento-date {
    font-size: 0.9rem;
    color: var(--color-text-medium);
    margin-bottom: 2rem;
    border-bottom: 1px solid #333;
    padding-bottom: 0.5rem;
}

.documento-intro p {
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 3rem;
}

.documento-block {
    margin-bottom: 4rem;
    padding-left: 1.5rem;
    border-left: 3px solid var(--color-primary); /* Línea de resalte */
}

.documento-sub-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--color-white);
}

/* --- Bloque de Código (Estilo de consola) --- */
.documento-code-block {
    background-color: #1a1a1a; /* Fondo muy oscuro para el código */
    color: #f8f8f2; /* Color de texto del código */
    padding: 1rem;
    border-radius: 4px;
    font-family: monospace;
    overflow-x: auto;
    white-space: pre-wrap;
    line-height: 1.4;
    margin-top: 1rem;
}

/* --- Listas Modulares --- */
.documento-list {
    list-style: none;
    padding-left: 0;
    margin-top: 2rem;
}

.documento-list li {
    margin-bottom: 0.8rem;
    line-height: 1.5;
}

.documento-list-label {
    font-weight: 700;
    color: var(--color-primary); /* Resaltar la etiqueta */
    margin-right: 0.5rem;
}

/* --- Ejemplo BEM --- */
.documento-code-example {
    background-color: #0d0d0d;
    padding: 1.5rem;
    border-radius: 4px;
    border: 1px solid #333;
}

.documento-code-label {
    font-style: italic;
    color: var(--color-text-medium);
    margin-bottom: 0.5rem;
}

/* --- Elementos de Código Inyectado (NUEVAS REGLAS) --- */

.documento-code-element {
    display: inline-block;
    /* Usamos un color de fondo diferente para destacar las convenciones */
    background-color: var(--color-primary); 
    color: var(--color-white);
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    font-size: 0.85rem;
    font-family: monospace;
    margin: 0.2rem;
    font-weight: 400; /* No tan negrita como el label */
}

.documento-example-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-primary);
}

/* --- Botón de Retorno --- */
.documento-block-center {
    text-align: center;
    margin-top: 4rem;
}
.documento-back-button {
    display: inline-block;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    transition: background-color 0.2s;
}

.documento-back-button:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* ====================================== ====================================== NOVEDADES ====================================== ======================================*/

/* --------------------------------------
   SECCIÓN DE NOVEDADES (Blog/Changelog)
   -------------------------------------- */
.novedades-section {
    padding: 6rem 1rem;
    background-color: black;
    color: var(--color-white);
    min-height: 80vh;
}

.novedades-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* --- Encabezado --- */
.novedades-header {
    text-align: center;
    margin-bottom: 4rem;
}

.novedades-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--color-primary); /* Rojo/Magenta */
    margin-bottom: 0.5rem;
}

.novedades-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-medium);
    max-width: 700px;
    margin: 0.5rem auto 0;
}

/* --- Grid de Tarjetas (2 columnas en desktop) --- */
.novedades-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .novedades-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en desktop */
        gap: 3rem 2rem; /* Espaciado vertical y horizontal */
    }
}

/* --- Estilos de la Tarjeta --- */
.novedades-card {
    background-color: #1a1a1a;
    padding: 2rem;
    border-radius: 0.5rem;
    border-top: 3px solid var(--color-primary); /* Línea de color para destacar */
    position: relative;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.novedades-card:hover {
    box-shadow: 0 4px 15px rgba(229, 70, 70, 0.4);
    transform: translateY(-5px);
}

/* --- Ícono de Categoría --- */
.novedades-card-icon {
    position: absolute;
    top: -15px; /* Sube sobre el borde superior */
    right: 20px;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 0.5rem;
    border-radius: 50%;
    font-size: 1rem;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.novedades-card-icon svg {
    width: 1.8rem;
    height: 1.8rem;
    fill: var(--color-white); /* Usa el color blanco de tu tema */
}

/* --- Metadatos y Tags --- */
.novedades-card-date {
    color: var(--color-text-medium);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.novedades-card-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.6rem;
    border-radius: 3px;
    margin-bottom: 1rem;
    color: var(--color-white);
}

/* Colores de Tag Modulares */
.novedades-card-tag.tag-new { background-color: #007bff; } /* Azul */
.novedades-card-tag.tag-tool { background-color: #ffc107; color: #000; } /* Amarillo */
.novedades-card-tag.tag-update { background-color: #28a745; } /* Verde */

/* --- Título y Resumen --- */
.novedades-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.8rem;
}

.novedades-card-summary {
    color: var(--color-text-medium);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    flex-grow: 1; /* Empuja el enlace al fondo */
}

/* --- Enlace "Leer Más" --- */
.novedades-card-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
    align-self: flex-start; /* Alinea a la izquierda */
}

.novedades-card-link:hover {
    color: var(--color-white);
}

/* ====================================== ====================================== PREGUNTAS FRECUENTES ====================================== ======================================*/

/* --------------------------------------
   SECCIÓN DE PREGUNTAS FRECUENTES (FAQ)
   -------------------------------------- */
.faq-section {
    padding: 6rem 1rem;
    background-color: black; /* Fondo Negro */
    color: var(--color-white); /* Texto Principal Blanco */
    min-height: 80vh;
}

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

/* --- Encabezado --- */
.faq-header {
    text-align: left;
    margin-bottom: 3rem;
}

.faq-title {
    font-size: 2.2rem;
    font-weight: 800;
    /* Usamos el morado/magenta como en la imagen de referencia */
    color: var(--color-primary); 
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
    padding-bottom: 0.2rem;
    margin-bottom: 0.5rem;
}

.faq-subtitle {
    font-size: 0.95rem;
    color: var(--color-text-medium);
}

/* --- Acordeón Estructural --- */

.faq-acordeon {
    border-top: 1px solid #333333; /* Línea de separación superior */
}

.faq-item {
    border-bottom: 1px solid #333333;
    padding: 0;
    margin: 0;
}

/* --- Botón de Pregunta (El que se hace clic) --- */
.faq-question {
    background-color: transparent;
    color: var(--color-white);
    border: none;
    padding: 1.5rem 0.5rem 1.5rem 0;
    width: 100%;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.2s;
    
    /* Añadir el icono de flecha/chevron usando un pseudo-elemento */
    position: relative;
}

.faq-question:hover {
    color: var(--color-primary); /* Resalta la pregunta al pasar el ratón */
}

/* Flecha de Icono (Transformación) */
.faq-question::after {
    content: '↓'; /* Símbolo de flecha hacia abajo (puedes usar un SVG si quieres) */
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-primary); /* Color del icono */
    transition: transform 0.3s ease;
    padding-left: 10px;
}

/* Estado activo: Rota la flecha */
.faq-item.is-active .faq-question::after {
    content: '↑'; /* Flecha hacia arriba o simplemente rotamos */
    /* transform: rotate(180deg); */
    color: var(--color-primary);
}

/* --- Contenido de Respuesta (Animación y Estilo) --- */
.faq-answer-container {
    /* CLAVE CSS: Altura inicial 0 para colapsar y transición */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

.faq-item.is-active .faq-answer-container {
    /* CLAVE CSS: Abre el contenedor cuando está activo */
    max-height: 500px; /* Suficientemente grande para cualquier respuesta */
    transition: max-height 0.5s ease-in-out;
}

.faq-answer-content {
    padding: 0 0 1.5rem 0; /* Padding inferior y cero superior */
    font-size: 0.95rem;
    color: #b0b0b0;
    line-height: 1.6;
}

.faq-answer-content p {
    margin: 0;
}

.faq-answer-content strong {
    color: var(--color-white);
}

/* ====================================== ====================================== SOBRE MI ====================================== ======================================*/

/* --------------------------------------
   SECCIÓN SOBRE MÍ (.sobre-section)
   -------------------------------------- */
.sobre-section {
    padding: 6rem 1rem;
    background-color: black; 
    color: var(--color-white); 
    min-height: 90vh;
}

.sobre-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

@media (min-width: 992px) {
    .sobre-container {
        flex-direction: row;
        justify-content: space-between;
    }
    .sobre-content {
        flex: 1;
        max-width: 600px; 
    }
    .sobre-image-wrapper {
        flex-basis: 350px;
        flex-shrink: 0;
    }
}

/* --- Títulos y Texto --- */
.sobre-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-white); /* Color de su marca */
    margin-bottom: 0.5rem;
    line-height: 1.1;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 0.5rem;
}

.sobre-tagline {
    font-size: 1.25rem;
    color: var(--color-text-medium);
    margin-bottom: 3rem;
    border-bottom: 2px solid #333;
    padding-bottom: 0.5rem;
}

.sobre-block {
    margin-bottom: 2rem;
    padding-left: 1rem;
    border-left: 4px solid var(--color-primary); /* Línea de acento */
}

.sobre-sub-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-white);
    margin-top: 0;
    margin-bottom: 1rem;
}

.sobre-block p {
    font-size: 1rem;
    line-height: 1.6;
    color: #b0b0b0;
    margin-bottom: 1rem;
}

/* --- Lista de Habilidades --- */
.sobre-skills-list {
    list-style: none;
    padding: 0;
}
.sobre-skills-list li {
    margin-bottom: 0.5rem;
    color: var(--color-text-medium);
}
.sobre-skill-label {
    font-weight: 700;
    color: var(--color-white);
    margin-right: 0.5rem;
    display: inline-block;
}

/* --- Imagen y Placeholder --- */
.sobre-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center; /* Centra el contenido horizontalmente */
    flex-direction: column;;
}

.sobre-image-placeholder {
    width: 300px; /* Ancho fijo del marco */
    height: 350px; /* Altura fija del marco */
    background-color: transparent;
    border: 3px solid var(--color-primary);
    border-radius: 8px;
    overflow: hidden; /* CLAVE: Esconde cualquier parte de la imagen que se salga */
    
    /* Centra el contenido (si la imagen no cubre todo, aunque debería) */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- ESTILOS DE LA IMAGEN DE PERFIL --- */
.sobre-profile-img {
    width: 80%;  /* La imagen ocupa el 100% del ancho del contenedor */
    height: 100%; /* La imagen ocupa el 100% de la altura del contenedor */
    
    /* CLAVE: Asegura que la imagen cubra el contenedor sin distorsionarse */
    object-fit: cover; 
    
    /* Aplicar un filtro o un tono sutil (opcional, basado en el estilo oscuro/rojo) */
    filter: grayscale(30%) brightness(1.1); 
    transition: filter 0.3s ease;
}

.sobre-image-placeholder:hover .sobre-profile-img {
    filter: grayscale(0%) brightness(1.0); /* Restaurar el color al hacer hover */
}

.sobre-image-placeholder i {
    font-size: 4rem;
    color: var(--color-primary);
    margin-bottom: 10px;
}

/* --- CTA --- */
.sobre-block-cta {
    margin-top: 2rem;
}
.sobre-cta-button {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: 700;
    padding: 0.8rem 2rem;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.2s;
}
.sobre-cta-button:hover {
    background-color: #ff3333;
}
.sobre-info-container {
    width: 300px;
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.sobre-info-box {
    /* Estilo del recuadro */
    border: 1.5px solid var(--color-primary); /* El borde que solicitaste */
    border-radius: 15px;
    padding: 7px 15px;
    margin-top: 10px; /* Separación debajo del placeholder de la foto */
    
    /* Centrado del contenido (SVG + Texto) */
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre el SVG y el texto */
    
    /* Opcional: Ancho para que no sea tan grande, ajústalo si quieres */
    width: fit-content; 
    
    /* Asegurar que el texto sea del color principal */
    color: var(--color-text-primary); 
    background-color: var(--color-background-dark); /* Fondo sutil para el cuadro */
}

/* --- CLAVE: Centrado del último cuadro (si es impar) --- */
.sobre-info-box:last-child:nth-child(odd) {
    grid-column: 1 / -1; /* Ocupa las dos columnas */
    justify-self: center; /* Centra el cuadro dentro de ese espacio */
    width: fit-content; /* Opcional: para que el borde no se extienda 300px */
}

.sobre-info-box svg {
    /* Tamaño del icono */
    width: 28px;
    height: 28px;
    /* Usa el color del texto del contenedor */
    stroke: var(--color-white); 
}

.sobre-info-text {
    /* Estilo del texto */
    margin: 0; /* Quita el margen por defecto del párrafo */
    font-size: 0.85rem;
    font-weight: bold;
}

/* ====================================== ====================================== PLANES ====================================== ====================================== */

/* --------------------------------------
   SECCIÓN DE PLANES/PRECIOS (.planes-section)
   -------------------------------------- */
.planes-section {
    padding: 6rem 1rem;
    background-color: black; /* Fondo Negro */
    color: var(--color-white); 
    min-height: 90vh;
}

.planes-main-title {
    color: var(--color-primary);
}

.planes-subtitle {
    color: var(--color-text-medium);
}

.planes-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
/* ... (Títulos principales se mantienen) ... */

/* --- Grid de Tarjetas --- */
.planes-grid {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 768px) {
    .planes-grid {
        flex-direction: row;
        justify-content: center;
    }
}

.planes-card {
    background-color: var(--color-gray-dark); /* CLAVE: Fondo Blanco para imitar la imagen */
    color: var(--color-background);       /* Texto principal Negro */
    border-radius: 8px;
    padding: 0; 
    width: 90%;
    max-width: 350px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    text-align: left;
    position: relative;
    border: 1px solid var(--color-primary); /* Borde muy sutil */
    overflow: hidden; 
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.planes-card:hover {
    box-shadow: 0 10px 50px rgba(229, 70, 70, 0.4);
    transform: translateY(-5px);
}

.planes-card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* --- Tarjeta Destacada (Recomendado) --- */
.planes-card-featured {
    border-color: var(--color-primary); /* Borde verde para destacar */
}

.planes-featured-tag {
    /* CLAVE: Diseño de cinta que ocupa todo el ancho superior (verde claro) */
    background-color: var(--color-primary); /* Verde/Menta de la imagen */
    color: var(--color-white); /* Texto negro sutil */
    font-weight: 600;
    padding: 0.5rem 0;
    width: 100%;
    text-align: center;
    font-size: 0.95rem;
}
.planes-card-featured .planes-card-content {
    padding-top: 0; /* Quitar padding superior para pegar el contenido al tag */
}

/* --- Título y Precio --- */
.planes-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
    text-align: left; /* Alineado a la izquierda como la imagen */
}

.planes-price-box {
    text-align: left;
    margin-bottom: 0.5rem;
    padding-bottom: 1rem;
}

.planes-price-main {
    /* CLAVE 1: Precio grande y Morado/Azul */
    font-size: 2.2rem; /* Ligeramente más pequeño para el espacio */
    font-weight: 800;
    color: var(--color-primary); /* Morado/Azul intenso de la imagen */
    display: inline-block;
    line-height: 1; 
}

.planes-price-unit {
    /* CLAVE 2: Unidad pequeña, alineada */
    font-size: 1.2rem;
    font-weight: 500;
    color: white;
}

.planes-price-discount {
    /* Estilo del descuento (50% dcto) */
    background-color: transparent; 
    color: var(--color-primary); /* Utilizamos el color principal (Rojo/Magenta) */
    font-size: 0.9rem;
    font-weight: 700;
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    margin-right: 0.5rem;
}

.planes-price-period {
    color: white; /* Texto negro */
    font-size: 0.85rem;
    font-weight: 400;
}

.planes-price-note {
    font-size: 0.85rem;
    color: white; /* Texto negro */
    margin-top: 0.5rem;
}

/* --- Bloque Adicional/Nota de Precio (Bloque Azul Claro) --- */
.planes-adicional {
    /* CLAVE: Fondo Azul Claro (similar al bloque Te Sumo) */
    background-color: black; 
    color: var(--color-primary);
    padding: 1rem;
    border-radius: 4px;
    text-align: center;
    margin: 1rem 0 1.5rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.planes-adicional-text {
    color: var(--color-primary);
    font-weight: 700;
    margin: 0 0 0;
    font-size: 1.1rem;
}
.planes-adicional-value {
    color: var(--color-white);
    font-weight: 700;
    margin: 0.2rem 0 0;
}

.strong_domain {
    color:white;
    font-size: 1.1rem;
}

/* CAJA ATENCION */

.planes-adicional-atencion {
    color: var(--color-primary);
    font-weight: 700;
    margin: 0 0 0;
    font-size: 1.1rem;
}

.planes-adicional-domain {
    font-weight: 700;
    color: var(--color-white);
    margin: 0;
}

/* --- Lista de Características --- */
.planes-features {
    border-top: 1px solid var(--color-primary); 
    padding-top: 1.5rem;
    margin-bottom: 2rem;
    flex-grow: 1; 
}

.planes-features-header {
    font-weight: 700;
    color: white;
    margin-bottom: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
}

.planes-features ul {
    list-style: none;
    padding: 0;
}

.planes-feature-item {
    color: white;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    text-align: left;
}

.planes-feature-item::before {
    /* CLAVE: Ícono de checkmark */
    content: '✓'; 
    color: var(--color-primary); 
    font-weight: 800;
    margin-right: 0.5rem;
}

/* --- Botón CTA --- */
.planes-button-cta {
    /* Imita el color AZUL FUERTE/Morado del botón original */
    background-color: var(--color-primary); 
    color: var(--color-white);
    font-weight: 700;
    font-size: 1.1rem;
    padding: 1rem;
    width: 100%;
    border: none;
    border-radius: 8px; /* Bordes más redondeados */
    cursor: pointer;
    transition: background-color 0.2s;
    text-transform: uppercase;
}

.planes-button-cta:hover {
    background-color: #ff3333; /* Azul/Morado más claro al hover */
}

/* --- Enlace de Detalle --- */
.planes-detail-link {
    display: block;
    text-align: center;
    margin-top: 1rem;
    color: var(--color-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}

.planes-detail-link:hover {
    text-decoration: underline;
}

/* ==================================================================== BOTON DE DESCARGA */

.download-btn {
	position: relative;
	overflow: hidden;
	padding: 0.5rem 1rem;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	color: var(--color-primary);
	text-decoration: none;

	border-radius: 8px;
	background-color: transparent;
	backface-visibility: hidden;
	box-shadow: inset 0 0 0 1px var(--color-primary);

	transform: translateZ(0);
    text-decoration: none;

	&::after {
		content: "";
		pointer-events: none;
		position: absolute;

		top: 0;
		left: 0;
		z-index: 1;
		height: 120%;
		width: 120%;
        text-decoration: none;

		border-radius: 20%;
		background-color: var(--color-primary);
		scale: 0 0;
		translate: 0 140%;
		transition: scale 0.6s cubic-bezier(0.215, 0.61, 0.355, 1),
			translate 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
	}
}

.c-btn__label {
	display: inline-flex;
	align-items: center;
	gap: 1rem;

	z-index: 2;
	font-size: 1.2rem;
	letter-spacing: 0.025em;

	transition: color 0.32s ease-in-out;

    font-weight: 600;
    display: flex; 
    text-align: right;
    color: var(--color-primary);
    font-size: 0.875rem;
}

.download-btn:hover {
	span {
        color: white;
	}

	&:after {
		scale: 1.5 1.5;
		translate: 0 0;

		border-radius: 50%;
	}

    
}


.logo-text-2 { font-size: 1.25rem; font-weight: 700; color: var(--color-white); }

.main-header-2 {
    background-color: var(--color-black);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); 
    position: fixed;
    top: 0; 
    left: 0;
    right: 0;
    z-index: 1000; 

    /* CLAVE: Transición para suavizar el cambio de color */
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}