:root {
    --color-bg: #212121; /* Fondo principal oscuro */
    --color-secondary: #2a2a2a; /* Fondo para tarjetas/elementos secundarios, un poco más claro que el bg */
    --color-primary: #ccab79; /* Tu color dorado principal */
    --color-primary-light: #e0d0b0; /* Una versión más clara del dorado para texto */
    --color-text: #f0f0f0; /* Blanco suave para texto principal */
    --color-text-soft: #b0b0b0; /* Gris claro para texto secundario */
    --color-primary-shadow: rgba(204, 171, 121, 0.25); /* Sombra sutil para el dorado */

    /* Espaciados y tamaños de fuente (ejemplos, ajusta según tu style.css) */
    --spacing-unit: 10px;
    --spacing-sm: 20px;
    --spacing-md: 40px;
    --spacing-lg: 80px;

    --font-size-base: 1.1em;
    --size-h1: 3.8em;
    --size-h2: 2.8em;
    --size-h3: 2.2em;
    --size-h4: 1.8em; /* Nuevo tamaño para subtítulos en mobile */

    --border-radius: 12px;
    --shadow-default: 0 8px 20px rgba(0, 0, 0, 0.3);
    --max-width: 1200px; /* Ancho máximo para el contenido */

    --font-heading: 'Poppins', sans-serif; /* Asumiendo que usas Poppins */
    --font-body: 'Roboto', sans-serif; /* Asumiendo que usas Roboto */
}


body {
    margin: 0;
    font-family: var(--font-family);
    background-color: var(--color-bg);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(33, 33, 33, 0.9); /* <-- 0.9 = 90% opaco */
    padding: 20px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-left {
    display: flex;
    align-items: center;
}

.logo img {
    height: 40px;
    margin-right: 20px;
}

.navbar-center {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.navbar-center ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.navbar-center ul li {
    margin: 0 15px;
}

.navbar-center ul li a {
    text-decoration: none;
    color: var(--color-primary);
    font-weight: bold;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.navbar-center ul li a:hover {
    background-color: #f0f0f0;
}

/* Estilos para el botón de llamado a la acción */
.navbar-right-cta {
    margin-left: 20px; /* Espacio entre el menú centrado y el botón */
}

.btn-cta {
    background-color: var(--color-primary);
    color: white !important;
    padding: 8px 15px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn-cta:hover {
    background-color: var(--color-primary-hover);
}


.menu-toggle {
    display: none; /* Ocultar por defecto en desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 20px; /* Espacio entre el botón de CTA y el toggle en móvil */
    font-size: 24px; /* Tamaño del icono de Font Awesome */
    color: white; /* Color del icono */
    align-items: center;
    justify-content: center; /* Para centrar el icono dentro del botón si hubiera espacio */
    line-height: 1; /* Asegura que el icono se alinee correctamente */
    width: 30px; /* Ancho fijo para el botón de toggle */
    height: 30px; /* Altura fija para el botón de toggle */
}

/* Responsive design */
@media (max-width: 768px) {
    .navbar {
        display: flex;
        justify-content: flex-start;
    }

    .navbar-center {
        display: none;
        flex-direction: column;
        width: 100%;
        position: fixed;
        top: 60px; /* Debajo de la altura del navbar */
        left: 0;
        height: calc(100vh - 60px); /* Ocupa toda la altura visible menos la del navbar */
        background-color: var(--color-bg);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 0;
        align-items: flex-start;
        justify-content: flex-start; /* Alinea el contenido al inicio. */
        overflow-y: auto;
        z-index: 999;
    }

    .navbar-center.active {
        display: flex;
    }

    .navbar-center ul {
        flex-direction: column;
        width: 100%;
        align-items: flex-start;
        padding-top: 10px; /* Puedes añadir un padding superior a la lista si quieres espacio */
    }

    .navbar-center ul li {
        margin: 0;
        width: 100%;
        text-align: left;
        padding-left: 20px;
    }

    .navbar-center ul li a {
        display: block;
        padding: 15px 0;
        border-bottom: 1px solid #eee;
    }

    /* Para el último elemento del menú, quitar el border-bottom si lo deseas */
    .navbar-center ul li:last-child a {
        border-bottom: none;
    }

    /* Posicionar el botón de CTA a la izquierda del icono hamburguesa en móvil */
    .navbar-right-cta {
        
        margin-left: auto;
        order: 2;
    }

    .menu-toggle {
        display: flex;
        order: 3;
    }

    .navbar-left {
        width: auto;
        justify-content: flex-start;
        order: 1;
    }

    .logo {
        margin-right: 0;
    }
}

/* ========================================================== */
/* PAGINA DE INICIO */
/* ========================================================== */

/* SECCIÓN BIENVENIDA */
.hero-section {
    position: relative;
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: flex-start; /* Alinea los ítems al inicio del contenedor flex */
    min-height: 100vh; /* Aumenta la altura para dar espacio al carrusel y mantener flotantes */
    padding: 80px 20px 0; /* Padding superior para el navbar, y 0 abajo, el carousel-wrapper tendrá su propio padding */
    background: linear-gradient(to top, #ccab79 0%, #212121 60%, #212121 100%);
    text-align: center;
    overflow: hidden; 
}

.hero-content {
    max-width: 800px;
    z-index: 10; 
    position: relative;
    margin-bottom: 100px; /* Más espacio entre el contenido principal y el carrusel */
}

.hero-content h1 {
    font-size: 3.5em;
    color: var(--color-text);
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-content p {
    font-size: 1.5em;
    color:var(--color-text-soft);
    margin-bottom: 40px;
}

.btn-primary {
    display: inline-block;
    background-color: var(--color-primary);
    color: white;
    padding: 15px 30px;
    border-radius: 10px; 
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 5px 15px rgba(204, 171, 121, 0.35); 
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    box-shadow: 0 6px 18px rgba(204, 171, 121, 0.4); 
    transform: translateY(-2px);
}


/* Tarjetas flotantes de sección Bienvenida */
.floating-cards {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
    z-index: 1; /* Asegura que las tarjetas estén por encima del fondo y otros elementos si es necesario */
}

.card {
    position: absolute;
    width: 280px; 
    height: 200px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transform: translateZ(0); 
    transition: transform 0.1s ease-out; 
    display: flex; 
    justify-content: center;
    align-items: center;
}

.card img, .card video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}

.card-left {
    top: 20%; 
    left: 5%;
    transform: translateY(0) rotate(-8deg); 
}

.card-right {
    top: 40%; 
    right: 5%;
    transform: translateY(0) rotate(10deg); 
}

/* Estilos para el wrapper del carrusel dentro de sección bienvenida */
.hero-carousel-wrapper {
    position: absolute; /* Posiciona el carrusel de forma absoluta */
    bottom: 0; /* Lo ancla a la parte inferior de la hero-section */
    left: 0;
    width: 100%; /* Ocupa el 100% del ancho de la pantalla */
    z-index: 5; /* Asegúrate de que esté por encima de las tarjetas y el fondo */
    padding-bottom: 40px; /* Un poco de padding inferior para que no quede pegado al borde */
    /*background-color: rgba(0,0,0,0.2); /* Un fondo sutil para destacarlo del gradiente */
}


/* Estilos para el carrusel */
.carousel-container {
    width: 100%;
    overflow: hidden; 
}

.carousel-track {
    display: flex;
    animation: scroll-carousel 30s linear infinite; 
    width: fit-content; 
    padding: 20px 0; /* Padding interno para que los ítems no toquen los bordes */
}

.carousel-item {
    flex: 0 0 auto; 
    margin: 0 10px; 
    border-radius: 10px; 
    overflow: hidden; 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada para destacarlo */
    transition: transform 0.3s ease; 
    width: 350px; 
    height: 200px; 
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}

.carousel-item:hover {
    transform: translateY(-5px); 
}

/* Animación de desplazamiento del carrusel */
@keyframes scroll-carousel {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); 
    }
}

/* Responsive para la sección de bienvenida */
@media (max-width: 1024px) {
    .hero-section {
        min-height: 90vh; /* Ajuste para pantallas medianas */
    }
    .hero-content h1 {
        font-size: 2.8em;
    }
    .hero-content p {
        font-size: 1.2em;
    }
    .card {
        width: 220px;
        height: 160px;
    }
    .card-left {
        top: 15%;
        left: 3%;
    }
    .card-right {
        bottom: 10%;
        right: 3%;
    }
    .hero-carousel-wrapper {
        padding-bottom: 30px;
    }
    .carousel-item {
        width: 300px;
        height: 180px;
    }
}

@media (max-width: 768px) {
    .hero-section {
        min-height: auto; 
        padding: 60px 15px 0; 
    }
    .hero-content {
        margin-bottom: 80px; /* Más espacio en móvil */
    }
    .hero-content h1 {
        font-size: 2.2em;
        margin-bottom: 15px;
    }
    .hero-content p {
        font-size: 1em;
        margin-bottom: 30px;
    }
    .btn-primary {
        padding: 12px 25px;
        font-size: 1em;
    }
    .floating-cards {
        display: none; 
    }
    .hero-carousel-wrapper {
        position: relative; /* En móvil, no lo anclamos tan abajo, sigue el flujo */
        padding-bottom: 20px;
    }
    .carousel-item {
        width: 250px;
        height: 150px;
        margin: 0 8px;
    }
    .carousel-track {
        animation-duration: 40s;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 2.6em;
    }
    .hero-content p {
        font-size: 1.2em;
    }
    .carousel-item {
        width: 200px;
        height: 120px;
        margin: 0 5px;
    }
    .carousel-track {
        animation-duration: 50s;
    }
}



/* SECCIÓN DE TARJETAS*/
.cards-section {
    background-color: var(--color-bg);
    padding: var(--spacing-lg) var(--spacing-sm);
    text-align: center;
}

.section-header {
    margin-bottom: var(--spacing-lg);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--spacing-unit);
}

.section-header h2 {
    font-family: var(--font-heading);
    font-size: var(--size-h2);
    color: var(--color-text);
    margin-bottom: var(--spacing-unit);
    text-align: center;
}

.section-header p {
    font-size: var(--font-size-base);
    color: var(--color-text-soft);
    line-height: 1.6;
    text-align: center;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tres columnas */
    gap: var(--spacing-md);
    max-width: var(--max-width);
    margin: 0 auto;
}

.feature-card {
    background-color: var(--color-secondary);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-default);
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at top left, rgba(204, 171, 121, 0.1) 0%, transparent 70%);
    transition: all 0.5s ease-out;
    opacity: 0;
}

.feature-card:hover::before {
    top: 0;
    left: 0;
    opacity: 1;
}

.card-icon {
    position: absolute;
    top: var(--spacing-unit);
    right: var(--spacing-unit);
    font-size: 1.5em;
    color: var(--color-text);
    opacity: 0.7;
    transition: transform 0.3s ease-in-out, color 0.3s ease;
    z-index: 1;
}

.feature-card:hover .card-icon {
    transform: translateX(5px) rotate(5deg);
    color: var(--color-primary-hover);
    opacity: 1;
}

.feature-card h3 {
    font-family: var(--font-heading);
    font-size: var(--size-h4);
    color: var(--color-text);
    margin-top: 0;
    margin-bottom: var(--spacing-unit);
    text-align: left;
}

.feature-card p {
    font-size: var(--font-size-base);
    color: var(--color-text-soft);
    line-height: 1.6;
    text-align: left;
}

/* Responsive para la sección de tarjetas */
/* Ajustes responsive para el header de la sección */
@media (max-width: 768px) {
    .section-header {
        margin-bottom: var(--spacing-md);
    }
    .section-header h2 {
        font-size: var(--size-h3);
    }
    .section-header p {
        font-size: 0.95em;
    }
}

@media (max-width: 480px) {
    .section-header h2 {
        font-size: 2.4em;
    }
    .section-header p {
        font-size: 1.2em;
    }
}

@media (max-width: 1024px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas en pantallas medianas */
        gap: var(--spacing-md);
    }
}

@media (max-width: 768px) {
    .cards-grid {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
        gap: var(--spacing-unit);
        padding: 0 var(--spacing-unit);
    }
    .cards-section {
        padding: var(--spacing-md) var(--spacing-unit);
    }
    .feature-card h3 {
        margin-top: 0;
    }
}


/* --- SECCIÓN DE SERVICIOS ESPECÍFICOS --- */
.services-section {
    background-color: var(--color-bg);
    padding: var(--spacing-lg) var(--spacing-sm);
    text-align: center;
}

.services-grid {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.service-row-top,
.service-row-bottom {
    display: flex;
    gap: var(--spacing-md);
}

/* Distribución de ancho para las filas */
.service-row-top .service-card:nth-child(1) { flex: 0 0 40%; }
.service-row-top .service-card:nth-child(2) { flex: 0 0 60%; }

.service-row-bottom .service-card:nth-child(1) { flex: 0 0 60%; }
.service-row-bottom .service-card:nth-child(2) { flex: 0 0 40%; }


.service-card {
    background-color: var(--color-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-default); /* Sombra inicial sutil */
    display: flex;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 250px;
    position: relative; /* Necesario para el pseudo-elemento */
}

.service-card:hover {
    transform: translateY(-8px); /* Un poco más de elevación al hacer hover */
    /* Cambiamos la sombra principal a la sombra de color primario */
    box-shadow: 0 15px 30px var(--color-primary-shadow); 
}

/* Efecto de bisel simulado con pseudo-elemento */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
    /* Múltiples sombras inset para simular el bisel */
    box-shadow: 
        inset 0 0 0 0px transparent, /* Base */
        inset 0 0 0 0px transparent, /* Base */
        inset 0 0 0 0px transparent, /* Base */
        inset 0 0 0 0px transparent; /* Base */
    transition: box-shadow 0.4s ease-out;
    pointer-events: none; /* Asegura que no bloquee interacciones */
    z-index: 1; /* Asegura que el bisel esté por encima del contenido si es necesario */
}

.service-card:hover::before {
    box-shadow: 
        inset 5px 0 15px -5px rgba(204, 171, 121, 0.7), /* Bisel izquierdo */
        inset -5px 0 15px -5px rgba(204, 171, 121, 0.7), /* Bisel derecho */
        inset 0 5px 15px -5px rgba(204, 171, 121, 0.4), /* Bisel superior */
        inset 0 -5px 15px -5px rgba(204, 171, 121, 0.4); /* Bisel inferior */
}

.service-card .card-text-content {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    flex: 1;
    /* --- AÑADE ESTO AQUÍ --- */
    width: 100%; /* Asegura que el contenedor de texto ocupe el 100% del ancho disponible */
    box-sizing: border-box; /* Incluye padding en el ancho */
    overflow-wrap: break-word; /* Permite romper palabras largas */
}

.service-card .card-image-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.service-card .card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.service-card:hover .card-image-wrapper img {
    transform: scale(1.05);
}

.service-card h3 {
    font-family: var(--font-heading);
    font-size: var(--size-h4);
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: var(--spacing-unit);
}

.service-card p {
    font-size: var(--font-size-base);
    color: var(--color-text-soft);
    line-height: 1.6;
}

/* --- Clases de Disposición Específicas para las Tarjetas --- */

/* Clase para tarjetas con texto arriba/izquierda y imagen abajo */
.service-card.card-top-left-text-bottom-image {
    flex-direction: column;
}
.service-card.card-top-left-text-bottom-image .card-text-content {
    flex-grow: 0;
    padding-bottom: var(--spacing-unit);
}
.service-card.card-top-left-text-bottom-image .card-image-wrapper {
    flex-grow: 1;
}


/* Clase para tarjetas con texto arriba/izquierda y imagen a la derecha */
.service-card.card-top-left-text-right-image {
    flex-direction: row;
}
.service-card.card-top-left-text-right-image .card-text-content {
    flex: 0 0 50%;
    padding: var(--spacing-md);
}
.service-card.card-top-left-text-right-image .card-image-wrapper {
    flex: 0 0 50%;
    order: 1;
}

/* Responsive para la sección de servicios */
@media (max-width: 1024px) {
    .service-row-top,
    .service-row-bottom {
        flex-direction: column;
    }
    .service-row-top .service-card,
    .service-row-bottom .service-card {
        flex: 0 0 100% !important;
    }
    .service-card.card-top-left-text-right-image {
        flex-direction: column;
    }
    .service-card.card-top-left-text-right-image .card-text-content,
    .service-card.card-top-left-text-right-image .card-image-wrapper {
        flex: 1 1 100%;
        width: 100%;
        /* Asegurarse también de que el texto no desborde dentro de sus contenedores */
        /* Puede ser redundante si ya lo pones arriba, pero es un buen lugar para verificar */
        box-sizing: border-box;
        overflow-wrap: break-word;
    }
    /* ... el resto de tus estilos ... */
}

@media (max-width: 768px) {
    .service-card {
        flex-direction: column !important; /* Siempre columna en móviles para todas las tarjetas */
        min-height: unset; /* Elimina la altura mínima fija */
    }
    .service-card .card-text-content {
        order: 1; /* Texto primero */
        padding-bottom: var(--spacing-unit);
    }
    .service-card .card-image-wrapper {
        order: 2; /* Imagen después del texto */
        height: 200px; /* Altura fija para las imágenes en móvil */
        flex: none; /* Deshabilita flex-grow para el wrapper de la imagen */
        width: 100%; /* Asegura que la imagen ocupe todo el ancho disponible */
    }
    /* Estas reglas ya están cubiertas por las reglas más generales de .service-card y el ajuste en 1024px,
       pero las mantengo explícitas si quieres un control muy granular.
       Podrías eliminar las de .card-top-left-text-right-image si las del 1024px ya hacen el trabajo. */
    .service-card.card-top-left-text-right-image .card-image-wrapper {
        order: 2;
        flex: none;
    }
    .service-card.card-top-left-text-right-image .card-text-content {
        flex: 1;
    }
}


/* --- SECCI{ON DE COMPARACIÓN--- */
.comparison-section {
    background-color: var(--color-bg); /* O el color que prefieras para esta sección */
    padding: var(--spacing-lg) var(--spacing-sm);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh; /* Altura mínima para que se vea bien */
}

/* El section-header ya existe y se reutilizará */
.comparison-section .section-header {
    margin-bottom: var(--spacing-lg);
    max-width: 800px;
}

.comparison-section .section-header h2 {
    color: var(--color-text); /* Asegura que el título sea visible */
}

.comparison-section .section-header p {
    color: var(--color-text-soft); /* Asegura que la descripción sea visible */
}


.comparison-wrapper {
  --_pos: 50%;
  position: relative;
  display: grid;
  width: 80vw;
  max-width: var(--max-width); /* Usamos tu variable de ancho máximo */
  overflow: hidden;
  cursor: ew-resize;
  border-radius: var(--border-radius); /* Borde redondeado para el comparador */
  box-shadow: var(--shadow-default); /* Sombra para destacarlo */
}

.comparison-wrapper > * {
  grid-area: 1 / -1;
}

.comparison-wrapper .content {
  display: grid;
  place-content: center;
}

.comparison-wrapper .content img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.comparison-before {
  mask: linear-gradient(to right, #000 0, var(--_pos), #0000 0);
  -webkit-mask: linear-gradient(to right, #000 0, var(--_pos), #0000 0);
}

.comparison-after {
  mask: linear-gradient(to right, #0000 0, var(--_pos), #000 0);
  -webkit-mask: linear-gradient(to right, #0000 0, var(--_pos), #000 0);
}

/* Barra visible (línea blanca) */
.comparison-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-primary); /* Usamos tu color primario para la barra */
  left: var(--_pos);
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none; /* no bloquea clics */
}

/* Añadir un círculo o handle a la barra para mejor UX */
.comparison-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px; /* Tamaño del handle */
    height: 30px;
    background-color: var(--color-primary); /* Color del handle */
    border: 3px solid var(--color-bg); /* Borde contrastante */
    border-radius: 50%;
    box-shadow: var(--shadow-default);
}

.comparison-range[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  position: absolute;
  inset: 0;
  cursor: ew-resize;
  z-index: 10;
}

.comparison-range[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 0.25em;
  height: 100%;
  background-color: transparent; /* ocultamos el thumb */
}

.comparison-range[type="range"]::-moz-range-thumb {
  width: 0.25em;
  height: 100%;
  background-color: transparent;
}

/* Responsive para la sección de comparación */
@media (max-width: 768px) {
    .comparison-wrapper {
        width: 95vw; /* Más ancho en móviles */
    }
    .comparison-divider::after {
        width: 25px; /* Handle más pequeño en móviles */
        height: 25px;
        border-width: 2px;
    }
}








/* --- FOOTER (NUEVO) --- */
.main-footer {
    background-color: var(--color-secondary);
    color: var(--color-text-soft);
    padding: var(--spacing-lg) var(--spacing-sm); /* Ajustado padding vertical */
    font-size: 0.9em;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: var(--max-width);
    margin: 0 auto;
    gap: var(--spacing-md); /* Espacio entre columnas */
    padding-bottom: var(--spacing-md); /* Espacio antes del footer-bottom, si lo hubiera */
}

.footer-column {
    flex: 1;
    min-width: 200px;
    /* margin-bottom eliminado de aquí para controlar el gap con flex */
}

.footer-column h3 {
    font-family: var(--font-heading);
    font-size: var(--size-h4);
    color: var(--color-primary);
    margin-bottom: var(--spacing-unit);
}

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

.footer-column ul li {
    margin-bottom: calc(var(--spacing-unit) / 2);
}

.footer-column ul li a {
    color: var(--color-text-soft);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-column ul li a:hover {
    color: var(--color-primary);
}

.footer-column.about-us .footer-logo {
    height: 50px;
    margin-bottom: var(--spacing-unit);
}

.footer-column.contact p {
    margin-bottom: calc(var(--spacing-unit) / 2);
    display: flex;
    align-items: flex-start; /* Alinea los ítems al inicio para que el texto no se centre */
}

.footer-column p a { /* Selecciona cualquier 'a' dentro de un 'p' en una columna del footer */
    color: var(--color-text-soft); /* Cambia el color del texto a blanco (o el color que desees) */
    text-decoration: none; /* Elimina el subrayado */
    /* Si el navegador sigue aplicando un estilo fuerte, puedes probar con !important */
    /* color: white !important; */
    /* text-decoration: none !important; */
}

.footer-column p a:hover {
    color: var(--color-primary); /* Define un color para el hover si quieres */
}

/* También es una buena idea aplicar esta regla a los enlaces de navegación si quieres */
.footer-column.links ul li a {
    color: var(--color-text-soft); /* Asegura que sean blancos */
    text-decoration: none; /* Sin subrayado */
}

.footer-column.contact p i {
    margin-right: calc(var(--spacing-unit) / 2);
    color: var(--color-primary);
}

.social-icons {
    display: flex;
    gap: var(--spacing-unit);
    margin-top: var(--spacing-unit);
    justify-content: flex-start; /* Por defecto, alineado a la izquierda */
}

.social-icons a {
    color: var(--color-text);
    font-size: 1.5em;
    width: 40px;
    height: 40px;
    background-color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    text-decoration: none; /* ¡AÑADE ESTO para quitar el subrayado! */
}

.social-icons a:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.footer-bottom {
    text-align: center;
    margin-top: var(--spacing-md); /* Reducido para evitar altura excesiva */
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-soft);
}

/* Responsive para el footer */
@media (max-width: 768px) {
    .main-footer {
        padding: var(--spacing-md) var(--spacing-unit);
    }

    .footer-container {
        flex-direction: column;
        align-items: flex-start; /* CAMBIO CLAVE: Alinea las columnas a la izquierda */
        gap: var(--spacing-md);
        padding-bottom: var(--spacing-unit);
        /* Añade padding lateral para que el contenido no esté pegado al borde */
        padding-left: var(--spacing-unit);
        padding-right: var(--spacing-unit);
    }
    .footer-column {
        min-width: unset;
        width: 100%;
        max-width: none; /* Elimina la restricción de ancho para que ocupe el espacio */
        text-align: left; /* CAMBIO CLAVE: Alinea el texto a la izquierda */
    }
    .footer-column h3 {
        text-align: left; /* CAMBIO CLAVE: Alinea los títulos a la izquierda */
    }
    .footer-column.links ul,
    .footer-column.contact p {
        text-align: left; /* Asegura que el texto de navegación y contacto se alinee a la izquierda */
        justify-content: flex-start; /* Si son flex items, los alinea a la izquierda */
    }
    .footer-column.contact p {
        display: flex;
        align-items: flex-start; /* Alinea los ítems al inicio para que el texto no se centre verticalmente con el icono si es multilínea */
        justify-content: flex-start; /* Alinea el bloque de párrafo completo a la izquierda */
    }
    .social-icons {
        justify-content: flex-start; /* CAMBIO CLAVE: Alinea los iconos sociales a la izquierda */
    }
    /* Quita la imagen del logo si no la quieres o ajusta su tamaño si no se ve bien */
    .footer-column.about-us .footer-logo {
        margin-left: 0; /* Asegura que el logo no tenga margen izquierdo si lo tuviera */
    }
}

/* También aplica para pantallas muy pequeñas */
@media (max-width: 480px) {
    .main-footer {
        padding: var(--spacing-unit);
    }
    .footer-column {
        padding-left: 0; /* Asegura que no haya padding extra si ya lo añadimos al .footer-container */
        padding-right: 0;
    }
    /* Mantén estos ajustes si quieres reducir aún más el tamaño en pantallas muy pequeñas */
    .footer-column h3 {
        font-size: 1.1em;
    }
    .footer-column ul li a {
        font-size: 0.9em;
    }
    .social-icons a {
        width: 35px;
        height: 35px;
        font-size: 1.3em;
    }
    .footer-bottom {
        padding-top: var(--spacing-unit);
        margin-top: var(--spacing-unit);
    }
}











/* ========================================================== */
/* PAGINA CREACIÓN DE CONTENIDOS */
/* ========================================================== */

/* Definición de variables CSS (asegúrate de que estas sean coherentes con tu style.css principal) */


/* SECCIÓN DE BIENVENIDA DE CREACIÓN DE CONTENIDOS */
.content-hero-section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh; /* Ajustado para que el footer no quede tan lejos */
    padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-md); /* Padding superior para el navbar, y abajo */
    background-color: var(--color-bg);
    text-align: center;
    color: var(--color-text);
    overflow: hidden;
    /* Degradado sutil para dar profundidad */
    background: radial-gradient(circle at center top, rgba(204, 171, 121, 0.1) 0%, transparent 70%), /* Dorado sutil en la parte superior */
                radial-gradient(circle at center bottom, rgba(204, 171, 121, 0.05) 0%, transparent 70%), /* Dorado más sutil abajo */
                var(--color-bg);
}

/* Estilos para la barra de progreso dentro de stat-item */
.progress-bar-container {
    width: 80%; /* Ancho de la barra de progreso */
    height: 6px; /* Altura de la barra */
    background-color: #444; /* Fondo de la barra (vacío) */
    border-radius: 3px; /* Bordes redondeados */
    margin: 10px auto 0 auto; /* Margen superior y centrado */
    overflow: hidden; /* Asegura que el relleno no se desborde */
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--color-primary); /* Relleno de la barra con tu color primario (dorado) */
    border-radius: 3px;
    transition: width 0.8s ease-out; /* Animación suave al cambiar el ancho */
    /* El 'width' se establecerá en línea en el HTML para cada barra */
}

.content-hero-tag {
    background-color: var(--color-secondary); /* Fondo más oscuro que el primario para el tag */
    color: var(--color-primary); /* Color primario para el texto del tag */
    border: 1px solid rgba(204, 171, 121, 0.3);
    padding: 8px 20px;
    border-radius: 50px;
    margin-bottom: 30px;
    font-size: 0.95em;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-default);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-hero-tag:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.content-hero-tag i {
    color: var(--color-primary); /* Dorado para el icono */
    font-size: 1.1em;
}

.content-hero-text h1 {
    font-family: var(--font-heading);
    font-size: var(--size-h1);
    margin-bottom: 20px;
    line-height: 1.2;
    color: var(--color-text); /* Asegura que el título sea blanco suave */
}

.content-hero-text .highlight-purple { /* Renombrado en HTML a .highlight-primary */
    color: var(--color-primary); /* Dorado distintivo para el texto resaltado */
    font-weight: bold;
}

.content-hero-text p {
    font-size: 1.4em;
    color: var(--color-text-soft);
    margin-bottom: 40px;
    max-width: 900px;
    line-height: 1.6;
}

.content-hero-actions {
    display: flex;
    gap: 20px;
    margin-bottom: 80px; /* Espacio antes de las estadísticas */
}

.content-hero-actions .btn-primary {
    /* Asumiendo que ya está definido globalmente en style.css para usar --color-primary */
    background-color: var(--color-primary);
    color: var(--color-bg); /* Texto oscuro sobre botón dorado */
    padding: 15px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 5px 15px var(--color-primary-shadow);
}
.content-hero-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px var(--color-primary-shadow);
}


.content-hero-actions .btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    padding: 15px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    transition: all 0.3s ease;
}

.content-hero-actions .btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-bg); /* Cambia el color del texto al hacer hover */
    box-shadow: 0 5px 15px var(--color-primary-shadow);
    transform: translateY(-2px);
}

.content-hero-stats {
    display: flex;
    justify-content: center;
    gap: 60px; /* Espacio entre las estadísticas */
    width: 100%;
    max-width: 900px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item {
    text-align: center;
    flex-basis: 30%;
    max-width: 250px;
}

.stat-item h3 {
    font-family: var(--font-heading);
    font-size: 2.8em;
    color: var(--color-primary); /* Dorado para los números grandes */
    margin-bottom: 5px;
}

.stat-item p {
    font-size: 1.1em;
    color: var(--color-text-soft);
    margin: 0;
}

/* Responsive para la sección Hero de Contenidos */
@media (max-width: 1024px) {
    .content-hero-section {
        min-height: 70vh;
        padding-top: var(--spacing-lg);
    }
    .content-hero-text h1 {
        font-size: var(--size-h2);
    }
    .content-hero-text p {
        font-size: var(--font-size-base);
    }
    .content-hero-actions {
        flex-direction: column;
        gap: 15px;
        margin-bottom: var(--spacing-lg);
        align-items: center; /* Esto centrará los botones horizontalmente si el contenedor no ocupa el 100% y tiene un ancho fijo */
        width: 100%; /* Asegura que .web-hero-actions ocupe todo el ancho disponible */
    }
    .content-hero-actions .btn-primary,
    .content-hero-actions .btn-outline {
        width: 80%;
        max-width: 300px;
        font-size: 1em;
        padding: 12px 25px;
    }
    .content-hero-stats {
        gap: 40px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .stat-item h3 {
        font-size: 2.2em;
    }
    .stat-item p {
        font-size: 1em;
    }
}

@media (max-width: 768px) {
    .content-hero-section {
        min-height: auto;
        padding: var(--spacing-md) var(--spacing-unit);
    }
    .content-hero-tag {
        margin-bottom: var(--spacing-sm);
        font-size: 0.85em;
    }
    .content-hero-text h1 {
        font-size: var(--size-h3);
        margin-bottom: 15px;
    }
    .content-hero-text p {
        font-size: 1em;
        margin-bottom: var(--spacing-md);
    }
    .content-hero-actions {
        margin-bottom: var(--spacing-md);
    }
    .content-hero-actions .btn-primary,
    .content-hero-actions .btn-outline {
        width: 90%;
        max-width: unset;
        font-size: 0.95em;
    }
    .content-hero-stats {
        flex-direction: column;
        gap: 30px;
        padding-top: 30px;
        border-top: none; /* Eliminar borde en móvil si se ve mal */
        align-items: center;
    }

    .content-hero-stats .stat-item {
        width: 90%;
        max-width: 300px;
        margin: 0 auto;
    }
    .content-hero-stats .stat-item h3 {
        font-size: 2em;
    }
    .content-hero-stats .stat-item p {
        font-size: 0.9em;
    }
    
}

@media (max-width: 480px) {
    .progress-bar-container {
        width: 60%; /* Más estrecho en pantallas muy pequeñas */
        height: 4px; /* Aún menos alto */
        margin-top: 6px;
    }
}


/* Estilos específicos para la nueva sección de Servicios de Interacción Visual */
        .visual-interaction-section {
            background-color: var(--color-bg);
            padding: var(--spacing-lg) var(--spacing-sm);
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .visual-interaction-section .section-header {
            margin-bottom: var(--spacing-lg);
            max-width: 900px;
        }

        .visual-interaction-section .section-header h2 {
            font-size: var(--size-h2);
            color: var(--color-text);
            margin-bottom: var(--spacing-unit);
            font-family: var(--font-heading);
        }

        .visual-interaction-section .section-header .highlight-purple { /* Renombrado en HTML a .highlight-primary */
            color: var(--color-primary); /* Dorado para el texto resaltado */
        }

        .visual-interaction-section .section-header p {
            font-size: var(--font-size-base);
            color: var(--color-text-soft);
            line-height: 1.6;
        }

        /* Contenedor para todas las tarjetas de interacción visual */
        .visual-interaction-cards-container {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md); /* Espacio entre las tarjetas */
            max-width: var(--max-width);
            width: 100%;
        }

        .visual-interaction-content {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            background-color: var(--color-secondary); /* Usa color secundario para el fondo de las tarjetas */
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-default);
            padding: var(--spacing-md);
            position: relative;
            overflow: hidden;
            transition: transform 0.4s ease, box-shadow 0.4s ease; /* Transiciones para el hover */
        }

        .visual-interaction-content:hover {
            transform: translateY(-8px); /* Ligeramente más elevado al hacer hover */
            box-shadow: 0 15px 30px var(--color-primary-shadow); /* Sombra de color primario */
        }
        
        /* Efecto de bisel simulado con pseudo-elemento */
        .visual-interaction-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: var(--border-radius);
            box-shadow: 
                inset 0 0 0 0px transparent,
                inset 0 0 0 0px transparent,
                inset 0 0 0 0px transparent,
                inset 0 0 0 0px transparent;
            transition: box-shadow 0.4s ease-out;
            pointer-events: none;
            z-index: 1;
        }

        .visual-interaction-content:hover::before {
            box-shadow: 
                inset 5px 0 15px -5px var(--color-primary), /* Bisel izquierdo dorado */
                inset -5px 0 15px -5px var(--color-primary), /* Bisel derecho dorado */
                inset 0 5px 15px -5px rgba(204, 171, 121, 0.4), /* Bisel superior sutil */
                inset 0 -5px 15px -5px rgba(204, 171, 121, 0.4); /* Bisel inferior sutil */
        }


        .visual-interaction-text {
            flex: 1;
            text-align: left;
        }

        .visual-interaction-text h3 {
            font-family: var(--font-heading);
            font-size: var(--size-h3);
            color: var(--color-primary); /* Títulos de tarjeta en dorado */
            margin-top: 0;
            margin-bottom: var(--spacing-unit);
        }

        .visual-interaction-text p {
            color: var(--color-text-soft); /* Color de texto secundario para párrafos */
            line-height: 1.6;
        }
        .visual-interaction-text ul {
            list-style: none;
            padding: 0;
            margin-bottom: var(--spacing-md);
        }

        .visual-interaction-text ul li {
            font-size: var(--font-size-base);
            color: var(--color-text-soft);
            line-height: 1.8;
            margin-bottom: calc(var(--spacing-unit) / 2);
            display: flex;
            align-items: flex-start; /* Alinea el icono y el texto arriba */
            gap: 10px;
        }

        .visual-interaction-text ul li i {
            color: var(--color-primary); /* Dorado para los íconos de lista */
            font-size: 1.1em;
            margin-top: 4px; /* Pequeño ajuste visual para alinear con el texto */
        }

        .visual-interaction-text .btn-primary {
            display: inline-block;
            margin-top: var(--spacing-unit);
            /* Estilos de btn-primary ya definidos globalmente */
        }

        .visual-interaction-device {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            height: 400px; /* Altura fija para el contenedor del dispositivo */
            perspective: 1000px; /* Para el efecto 3D */
        }

        .device-frame {
            position: relative;
            background-color: #333;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 5px rgba(255, 255, 255, 0.05) inset;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            transition: transform 0.5s ease;
            transform-style: preserve-3d; /* Para el efecto 3D */
            border: 1px solid rgba(255,255,255,0.1);
        }

        /* Estilos específicos para la tableta */
        .device-frame.tablet {
            width: 90%; /* Ancho de la tableta */
            height: 100%;
            transform: rotateY(-10deg) rotateX(5deg);
        }
        .visual-interaction-content:hover .device-frame.tablet {
            transform: rotateY(0deg) rotateX(0deg);
        }

        /* Estilos específicos para la laptop */
        .device-frame.laptop {
            width: 95%; /* Ancho de la laptop */
            height: 70%; /* Altura para simular un portátil más ancho */
            border-radius: 10px;
            transform: rotateX(10deg); /* Inclinación de un portátil abierto */
        }
        .visual-interaction-content:hover .device-frame.laptop {
            transform: rotateX(0deg);
        }

        /* Estilos específicos para el móvil */
        .device-frame.mobile {
            width: 250px; /* Ancho del móvil */
            height: 100%;
            border-radius: 40px; /* Bordes más curvos */
            transform: rotateY(15deg) translateX(10px); /* Ligera rotación y desplazamiento */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 5px rgba(255, 255, 255, 0.05) inset, inset 0 0 15px rgba(255,255,255,0.08);
        }
        .visual-interaction-content:hover .device-frame.mobile {
            transform: rotateY(0deg) translateX(0px);
        }
        /* Botón inferior del móvil */
        .device-frame.mobile::after {
            content: '';
            position: absolute;
            bottom: 15px;
            width: 40px;
            height: 8px;
            background-color: rgba(255,255,255,0.1);
            border-radius: 4px;
        }


        .device-screen {
            background-color: black;
            overflow: hidden;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .device-screen.tablet {
            width: calc(100% - 20px);
            height: calc(100% - 20px);
            border-radius: 10px;
        }

        .device-screen.laptop {
            width: calc(100% - 10px);
            height: calc(100% - 10px);
            border-radius: 5px;
        }

        .device-screen.mobile {
            width: calc(100% - 15px);
            height: calc(100% - 15px);
            border-radius: 30px;
        }


        .device-screen video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .ui-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-start;
            padding: 20px;
            box-sizing: border-box;
        }

        .ui-overlay-progress {
            width: 80%;
            height: 8px;
            background-color: rgba(255,255,255,0.3);
            border-radius: 4px;
            margin-bottom: 10px;
            position: relative;
        }

        .ui-overlay-progress::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 40%;
            height: 100%;
            background-color: var(--color-primary); /* Progreso en dorado */
            border-radius: 4px;
        }

        .ui-overlay-controls {
            display: flex;
            gap: 15px;
            color: white;
            font-size: 1.3em;
            width: 100%; /* Para que los elementos se distribuyan */
            align-items: center;
        }
        .ui-overlay-controls .time-display {
            margin-left: auto; /* Empuja el tiempo a la derecha */
        }

        /* Modificadores para la disposición del contenido y el dispositivo */
        .visual-interaction-content.device-left .visual-interaction-device {
            order: -1; /* Mueve el dispositivo a la izquierda */
            padding-right: var(--spacing-unit);
        }
        .visual-interaction-content.device-left .visual-interaction-text {
            padding-left: var(--spacing-unit);
        }
        
        .visual-interaction-content.device-right .visual-interaction-device {
            padding-left: var(--spacing-unit);
        }
        .visual-interaction-content.device-right .visual-interaction-text {
            padding-right: var(--spacing-unit);
        }


        @media (max-width: 1024px) {
    .visual-interaction-content {
        flex-direction: column;
        padding: var(--spacing-unit);
    }
    .visual-interaction-text {
        padding: 0; /* Elimina padding lateral que interfiere con flex-direction: column */
        text-align: center;
    }
    .visual-interaction-text h3 {
        font-size: var(--size-h4); /* Usa el nuevo tamaño para subtítulos en mobile */
    }
    .visual-interaction-text ul {
        text-align: left; /* Mantener la lista alineada a la izquierda */
        padding-left: 20px; /* Pequeño ajuste para que no esté pegada */
    }
    .visual-interaction-device {
        height: auto; /* Altura automática o definida si es necesario */
        width: 100%; /* Ocupa el 100% del ancho */
        padding: 0;
        order: 2; /* Asegura que el dispositivo vaya después del texto por defecto */
    }
    /* Resetear transforms en hover para evitar comportamientos extraños */
    .visual-interaction-content:hover .device-frame.tablet,
    .visual-interaction-content:hover .device-frame.laptop,
    .visual-interaction-content:hover .device-frame.mobile {
        transform: none; 
    }
    .device-frame.tablet,
    .device-frame.laptop,
    .device-frame.mobile {
         transform: none; /* Eliminar inclinación en pantallas pequeñas por defecto */
    }
    
    /* Ajustes para dispositivos en mobile si se ven muy anchos */
    .device-frame.mobile {
        width: 200px;
        height: 300px;
    }
    .device-frame.laptop {
        width: 100%; /* Ocupa todo el ancho disponible */
        height: 200px; /* Altura más manejable */
    }
    .device-frame.tablet {
        width: 100%;
        height: 250px;
    }

    /* Asegurar que el orden se restablece para todas las tarjetas */
    .visual-interaction-content.device-left .visual-interaction-device,
    .visual-interaction-content.device-right .visual-interaction-device {
        order: 2; /* Reinicia el orden */
        padding: 0; /* Elimina paddings específicos de orden */
    }
    .visual-interaction-content.device-left .visual-interaction-text,
    .visual-interaction-content.device-right .visual-interaction-text {
        padding: 0; /* Elimina paddings específicos de orden */
    }
}

@media (max-width: 768px) {
    .visual-interaction-section {
        padding: var(--spacing-md) var(--spacing-unit);
    }
    .visual-interaction-section .section-header h2 {
        font-size: var(--size-h3);
    }
    .visual-interaction-text h3 {
        font-size: 1.8em;
    }
    .visual-interaction-text ul li {
        font-size: 0.95em;
    }
    .visual-interaction-device {
        height: 300px;
    }
    .ui-overlay {
        padding: 15px;
    }
    .ui-overlay-controls {
        font-size: 1.1em;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .visual-interaction-section .section-header h2 {
        font-size: 1.8em;
    }
    .visual-interaction-text h3 {
        font-size: 1.5em;
    }
    .visual-interaction-device {
        height: 250px;
    }
    .ui-overlay {
        padding: 15px;
    }
    .ui-overlay-controls {
        font-size: 1em;
        gap: 10px;
    }
    .visual-interaction-text ul {
        padding-left: 10px;
    }
     .device-frame.mobile {
        width: 150px;
        height: 250px;
    }
}






/* SECCIÓN DE BIENVENIDA DE CREACIÓN DE PROMPTS */

.prompt-hero-section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-md); /* Unificado con content-hero-section */
    background-color: var(--color-bg);
    text-align: center;
    color: var(--color-text);
    overflow: hidden;
    /* Degradado sutil con tonos dorados para la coherencia */
    background: radial-gradient(circle at center top, rgba(204, 171, 121, 0.1) 0%, transparent 70%), /* Dorado sutil en la parte superior */
                radial-gradient(circle at center bottom, rgba(204, 171, 121, 0.05) 0%, transparent 70%), /* Dorado más sutil abajo */
                var(--color-bg);
}

.prompt-hero-tag {
    background-color: var(--color-secondary); /* Unificado con content-hero-tag */
    color: var(--color-primary); /* Unificado con content-hero-tag */
    border: 1px solid rgba(204, 171, 121, 0.3); /* Unificado con content-hero-tag */
    padding: 8px 20px;
    border-radius: 50px;
    margin-bottom: 30px;
    font-size: 0.95em;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-default); /* Unificado con content-hero-tag */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Unificado con content-hero-tag */
}

.prompt-hero-tag:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); /* Unificado con content-hero-tag */
}

.prompt-hero-tag i {
    color: var(--color-primary); /* Dorado para el icono */
    font-size: 1.1em;
}

.prompt-hero-text h1 {
    font-family: var(--font-heading);
    font-size: var(--size-h1); /* Unificado con content-hero-text h1 */
    margin-bottom: 20px;
    line-height: 1.2;
    color: var(--color-text); /* Asegura que el título sea blanco suave */
}

.prompt-hero-text .highlight-primary { /* Renombrado de .highlight-green a .highlight-primary */
    color: var(--color-primary); /* Dorado distintivo para el texto resaltado */
    font-weight: bold;
}

.prompt-hero-text p {
    font-size: 1.4em; /* Unificado con content-hero-text p */
    color: var(--color-text-soft);
    margin-bottom: 40px;
    max-width: 900px;
    line-height: 1.6;
}

.prompt-hero-actions {
    display: flex;
    gap: 20px;
    margin-bottom: 80px;
}

/* El .btn-primary ya está definido, lo reutilizamos */
.prompt-hero-actions .btn-primary {
    background-color: var(--color-primary);
    color: var(--color-bg);
    padding: 15px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 5px 15px var(--color-primary-shadow);
}
.prompt-hero-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px var(--color-primary-shadow);
}


.prompt-hero-actions .btn-outline { /* Renombrado de .btn-outline-green a .btn-outline para unificar */
    background-color: transparent;
    color: var(--color-primary); /* Color primario (dorado) para el botón outline */
    border: 2px solid var(--color-primary);
    padding: 15px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    transition: all 0.3s ease;
}

.prompt-hero-actions .btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-bg);
    box-shadow: 0 5px 15px var(--color-primary-shadow); /* Sombra con el color primario */
    transform: translateY(-2px);
}

.prompt-hero-stats {
    display: flex;
    justify-content: center;
    gap: 60px;
    width: 100%;
    max-width: 900px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    align-items: center;
}

.prompt-hero-stats .stat-item {
    text-align: center;
    flex-basis: 30%;
    max-width: 250px;
}

.prompt-hero-stats .stat-item h3 {
    font-family: var(--font-heading);
    font-size: 2.8em; /* Unificado con content-hero-stats .stat-item h3 */
    color: var(--color-primary); /* Color primario (dorado) para las estadísticas */
    margin-bottom: 5px;
}

.prompt-hero-stats .stat-item p {
    font-size: 1.1em; /* Unificado con content-hero-stats .stat-item p */
    color: var(--color-text-soft);
    margin: 0;
}

/* Ajustes responsive para la sección Hero de Prompts (similar a content-hero-section) */
@media (max-width: 1024px) {
    .prompt-hero-section {
        min-height: 70vh;
        padding-top: var(--spacing-lg); /* Unificado */
    }
    .prompt-hero-text h1 {
        font-size: var(--size-h2); /* Unificado */
    }
    .prompt-hero-text p {
        font-size: var(--font-size-base); /* Unificado */
    }
    .prompt-hero-actions {
        flex-direction: column;
        gap: 15px;
        margin-bottom: var(--spacing-lg); /* Unificado */
        align-items: center; /* Esto centrará los botones horizontalmente si el contenedor no ocupa el 100% y tiene un ancho fijo */
        width: 100%; /* Asegura que .web-hero-actions ocupe todo el ancho disponible */
    }
    .prompt-hero-actions .btn-primary,
    .prompt-hero-actions .btn-outline { /* Unificado */
        width: 80%;
        max-width: 300px;
        font-size: 1em;
        padding: 12px 25px;
    }
    .prompt-hero-stats {
        gap: 40px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .prompt-hero-stats .stat-item h3 {
        font-size: 2.2em; /* Unificado */
    }
    .prompt-hero-stats .stat-item p {
        font-size: 1em; /* Unificado */
    }
}

@media (max-width: 768px) {
    .prompt-hero-section {
        min-height: auto;
        padding: var(--spacing-md) var(--spacing-unit); /* Unificado */
    }
    .prompt-hero-tag {
        margin-bottom: var(--spacing-sm); /* Unificado */
        font-size: 0.85em;
    }
    .prompt-hero-text h1 {
        font-size: var(--size-h3); /* Unificado */
        margin-bottom: 15px;
    }
    .prompt-hero-text p {
        font-size: 1em; /* Unificado */
        margin-bottom: var(--spacing-md); /* Unificado */
    }
    .prompt-hero-actions {
        margin-bottom: var(--spacing-md); /* Unificado */
    }
    .prompt-hero-actions .btn-primary,
    .prompt-hero-actions .btn-outline { /* Unificado */
        width: 90%;
        max-width: unset;
        font-size: 0.95em;
    }
    .prompt-hero-stats {
        flex-direction: column;
        gap: 30px;
        padding-top: 30px;
        border-top: none;
        align-items: center;
    }

    .prompt-hero-stats .stat-item {
        width: 90%;
        max-width: 300px;
        margin: 0 auto;
    }
    .prompt-hero-stats .stat-item h3 {
        font-size: 2em; /* Unificado */
    }
    .prompt-hero-stats .stat-item p {
        font-size: 0.9em; /* Unificado */
    }
}


/* SECCIÓN EXPLORAR PROMPTS DE CREACIÓN DE PROMPTS */

.explore-prompts-section {
    background-color: var(--color-bg);
    padding: var(--spacing-lg) var(--spacing-sm);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.explore-prompts-section .section-header {
    margin-bottom: var(--spacing-md);
    max-width: 900px;
}

.explore-prompts-section .section-header h2 {
    font-size: var(--size-h2); /* Unificado */
    color: var(--color-text);
    margin-bottom: var(--spacing-unit);
    font-family: var(--font-heading);
}

.explore-prompts-section .section-header p {
    font-size: var(--font-size-base); /* Unificado */
    color: var(--color-text-soft);
    line-height: 1.6;
}

/* --- Carrusel de Categorías (Filtro) --- */
.category-carousel-wrapper {
    width: 100%;
    max-width: var(--max-width);
    margin-bottom: var(--spacing-md);
    padding: 0 var(--spacing-unit);
    box-sizing: border-box;
}

.category-carousel {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) var(--color-secondary);
}

.category-carousel::-webkit-scrollbar {
    height: 8px;
}

.category-carousel::-webkit-scrollbar-track {
    background: var(--color-secondary);
    border-radius: 4px;
}

.category-carousel::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    border-radius: 4px;
    border: 2px solid var(--color-bg);
}

.category-btn {
    flex: 0 0 auto;
    background-color: var(--color-secondary);
    color: var(--color-text-soft);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 20px;
    border-radius: 25px;
    margin-right: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-size: 0.9em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 40px;
}

.category-btn:last-child {
    margin-right: 0;
}

.category-btn:hover {
    background-color: rgba(204, 171, 121, 0.1); /* Fondo sutil con color primario */
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.category-btn.active {
    background-color: var(--color-primary);
    color: var(--color-bg);
    border-color: var(--color-primary);
    box-shadow: 0 4px 15px var(--color-primary-shadow); /* Sombra con color primario */
}

/* --- Contenedor de Tarjetas de Prompt --- */
.prompt-cards-display {
    max-width: var(--max-width);
    width: 100%;
    min-height: 200px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    padding: 0 var(--spacing-unit);
    box-sizing: border-box;
}

.initial-message {
    grid-column: 1 / -1;
    color: var(--color-text-soft);
    font-size: 1.2em;
    padding: var(--spacing-md);
    text-align: center;
}

.prompt-card {
    background-color: var(--color-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-default);
    padding: var(--spacing-unit);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
    min-height: 250px;
    max-width: 100%;
    box-sizing: border-box;
}

.prompt-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border-color: var(--color-primary);
}

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

.prompt-card .category-tag {
    background-color: rgba(204, 171, 121, 0.2); /* Fondo sutil con color primario */
    color: var(--color-primary); /* Texto con color primario */
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.75em;
    font-weight: bold;
    text-transform: uppercase;
}

.prompt-card .rating {
    color: var(--color-primary);
    font-size: 0.9em;
}

.prompt-card h3 {
    font-family: var(--font-heading);
    font-size: 1.2em;
    color: var(--color-text);
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.3;
}

.prompt-card p {
    font-size: 0.9em;
    color: var(--color-text-soft);
    line-height: 1.5;
    flex-grow: 1;
}

.prompt-card .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.prompt-card .price {
    font-size: 1.2em;
    color: var(--color-primary);
    font-weight: bold;
}

/* --- Responsive para la Sección Explorar Prompts --- */

@media (max-width: 1024px) {
    .explore-prompts-section .section-header h2 {
        font-size: var(--size-h3); /* Unificado */
    }
    .explore-prompts-section .section-header p {
        font-size: 0.95em;
    }
    .category-btn {
        padding: 8px 15px;
        font-size: 0.85em;
        margin-right: 10px;
        min-width: 100px;
        height: 35px;
    }
    .prompt-cards-display {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: var(--spacing-md);
    }
    .prompt-card {
        min-height: 220px;
    }
    .prompt-card h3 {
        font-size: 1.1em;
    }
    .prompt-card p {
        font-size: 0.85em;
    }
    .prompt-card .price {
        font-size: 1.1em;
    }
}

@media (max-width: 768px) {
    .explore-prompts-section {
        padding: var(--spacing-md) var(--spacing-unit); /* Unificado */
    }
    .explore-prompts-section .section-header h2 {
        font-size: 2em; /* Unificado */
    }
    .explore-prompts-section .section-header p {
        font-size: 0.9em;
    }
    .category-carousel-wrapper {
        padding: 0 var(--spacing-unit);
    }
    .category-carousel {
        padding-bottom: 5px;
    }
    .category-btn {
        padding: 6px 12px;
        font-size: 0.8em;
        margin-right: 8px;
        min-width: 80px;
        height: 30px;
    }
    .prompt-cards-display {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: var(--spacing-unit);
        padding: 0 var(--spacing-unit);
    }
    .prompt-card {
        padding: calc(var(--spacing-unit) * 0.75);
        min-height: 180px;
    }
    .prompt-card h3 {
        font-size: 1em;
    }
    .prompt-card p {
        font-size: 0.8em;
    }
    .prompt-card .category-tag {
        font-size: 0.7em;
        padding: 4px 8px;
    }
    .prompt-card .price {
        font-size: 1em;
    }
    .initial-message {
        font-size: 1.1em;
    }
}

@media (max-width: 480px) {
    .explore-prompts-section .section-header h2 {
        font-size: 1.8em;
    }
    .explore-prompts-section .section-header p {
        font-size: 0.85em;
    }
    .category-btn {
        font-size: 0.75em;
        min-width: 70px;
        height: 28px;
        margin-right: 6px;
    }
    .prompt-cards-display {
        grid-template-columns: 1fr;
        gap: calc(var(--spacing-unit) * 0.75);
    }
    .prompt-card {
        min-height: 160px;
    }
    .prompt-card h3 {
        font-size: 0.95em;
    }
    .prompt-card p {
        font-size: 0.75em;
    }
}





/* ========================================================== */
/* PAGINA DESARROLLO WEB */
/* ========================================================== */

/* SECCIÓN DE BIENVENIDA DE DESARROLLO WEB */
.web-hero-section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh; /* Ajustado para que el footer no quede tan lejos */
    padding: 100px 20px 60px; /* Padding superior para el navbar, y abajo */
    background-color: var(--color-bg);
    text-align: center;
    color: var(--color-text);
    overflow: hidden;
    /* Degradado sutil con tonos dorados para la coherencia con el resto del sitio */
    background: radial-gradient(circle at center top, rgba(204, 171, 121, 0.1) 0%, transparent 70%), /* Dorado sutil en la parte superior */
                radial-gradient(circle at center bottom, rgba(204, 171, 121, 0.05) 0%, transparent 70%), /* Dorado más sutil abajo */
                var(--color-bg);
}

.web-hero-tag {
    background-color: var(--color-secondary); /* Usa el color secundario como fondo */
    color: var(--color-primary); /* Texto del tag en color primario (dorado) */
    border: 1px solid rgba(204, 171, 121, 0.3); /* Borde sutil dorado */
    padding: 8px 20px;
    border-radius: 50px;
    margin-bottom: 30px;
    font-size: 0.95em;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-default); /* Sombra predefinida */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición también para la sombra */
}

.web-hero-tag:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.web-hero-tag i {
    color: var(--color-primary); /* Icono en dorado */
    font-size: 1.1em;
}

.web-hero-text h1 {
    font-family: var(--font-heading);
    font-size: var(--size-h1); /* Reutiliza la variable de tamaño de título principal */
    margin-bottom: 20px;
    line-height: 1.2;
    color: var(--color-text); /* Asegura que el título principal sea blanco suave */
}

.web-hero-text .highlight-primary { /* Cambiado de .highlight-blue a .highlight-primary para coherencia */
    color: var(--color-primary); /* Usa el color primario (dorado) para el texto resaltado */
    font-weight: bold;
}

.web-hero-text p {
    font-size: var(--font-size-base); /* Reutiliza la variable de tamaño de párrafo base */
    color: var(--color-text-soft);
    margin-bottom: 40px;
    max-width: 900px;
    line-height: 1.6;
}

.web-hero-actions {
    display: flex;
    gap: 20px;
    margin-bottom: 80px; /* Espacio antes de las estadísticas */
}

/* Reutilizar .btn-primary y .btn-outline (ya definidos globalmente) */
/* El HTML necesitará usar .btn-primary y .btn-outline en lugar de .btn-outline-blue */
.web-hero-actions .btn-primary { /* Asegúrate de que este botón sea de color primary */
    background-color: var(--color-primary);
    color: var(--color-bg);
    padding: 15px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 5px 15px var(--color-primary-shadow);
}
.web-hero-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px var(--color-primary-shadow);
}

.web-hero-actions .btn-outline { /* Unificado: usar la clase global .btn-outline */
    background-color: transparent;
    color: var(--color-primary); /* Color primario (dorado) para el botón outline */
    border: 2px solid var(--color-primary);
    padding: 15px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    transition: all 0.3s ease;
}

.web-hero-actions .btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-bg); /* Cambia el color del texto al hacer hover */
    box-shadow: 0 5px 15px var(--color-primary-shadow); /* Sombra con el color primario */
    transform: translateY(-2px);
}


.web-hero-stats {
    display: flex;
    justify-content: center;
    gap: 60px; /* Espacio entre las estadísticas */
    width: 100%;
    max-width: 900px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    align-items: center; /* Asegura centralización vertical de los ítems */
}

.web-hero-stats .stat-item {
    text-align: center;
    flex-basis: 30%; /* Para que ocupen un tercio en pantallas grandes */
    max-width: 250px;
}

.web-hero-stats .stat-item h3 {
    font-family: var(--font-heading);
    font-size: var(--size-h2); /* Reutiliza la variable de tamaño de h2 */
    color: var(--color-primary); /* Color primario (dorado) para las estadísticas */
    margin-bottom: 5px;
}

.web-hero-stats .stat-item p {
    font-size: var(--font-size-base);
    color: var(--color-text-soft);
    margin: 0;
}

.progress-bar-container {
    width: 100%;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin-top: 10px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--color-primary); /* Color primario (dorado) para la barra de progreso */
    border-radius: 3px;
    width: 0; /* Se establece en el HTML con style="width: XX%;" */
    transition: width 1s ease-out; /* Animación para el llenado de la barra */
}


/* Responsive para la sección Hero de Desarrollo Web (similar a content-hero-section) */
@media (max-width: 1024px) {
    .web-hero-section {
        min-height: 70vh;
        padding-top: var(--spacing-lg); /* Unificado */
    }
    .web-hero-text h1 {
        font-size: var(--size-h2); /* Unificado */
    }
    .web-hero-text p {
        font-size: var(--font-size-base); /* Unificado */
    }
    .web-hero-actions {
        flex-direction: column;
        gap: 15px;
        margin-bottom: var(--spacing-lg); /* Unificado */
        align-items: center; /* Esto centrará los botones horizontalmente si el contenedor no ocupa el 100% y tiene un ancho fijo */
        width: 100%; /* Asegura que .web-hero-actions ocupe todo el ancho disponible */
    }
    .web-hero-actions .btn-primary,
    .web-hero-actions .btn-outline { /* Unificado: usar .btn-outline */
        width: 80%;
        max-width: 300px;
        font-size: 1em;
        padding: 12px 25px;
    }
    .web-hero-stats {
        gap: 40px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .web-hero-stats .stat-item h3 {
        font-size: 2.2em; /* Unificado */
    }
    .web-hero-stats .stat-item p {
        font-size: 1em; /* Unificado */
    }
}

@media (max-width: 768px) {
    .web-hero-section {
        min-height: auto;
        padding: var(--spacing-md) var(--spacing-unit); /* Unificado */
    }
    .web-hero-tag {
        margin-bottom: var(--spacing-sm); /* Unificado */
        font-size: 0.85em;
    }
    .web-hero-text h1 {
        font-size: var(--size-h3); /* Unificado */
        margin-bottom: 15px;
    }
    .web-hero-text p {
        font-size: 1em; /* Unificado */
        margin-bottom: var(--spacing-md); /* Unificado */
    }
    .web-hero-actions {
        margin-bottom: var(--spacing-md); /* Unificado */
    }
    .web-hero-actions .btn-primary,
    .web-hero-actions .btn-outline { /* Unificado: usar .btn-outline */
        width: 90%;
        max-width: unset;
        font-size: 0.95em;
    }
    .web-hero-stats {
        flex-direction: column;
        gap: 30px;
        padding-top: 30px;
        border-top: none; /* Eliminar borde en móvil si se ve mal */
        align-items: center; /* Centrar ítems horizontalmente */
    }
    .web-hero-stats .stat-item {
        width: 90%; /* Ocupa casi todo el ancho disponible */
        max-width: 300px; /* Limita el ancho en pantallas pequeñas para que no se extiendan demasiado */
        margin: 0 auto; /* Centra el stat-item si tiene un max-width */
    }
    .web-hero-stats .stat-item h3 {
        font-size: 2em; /* Unificado */
    }
    .web-hero-stats .stat-item p {
        font-size: 0.9em; /* Unificado */
    }
}

@media (max-width: 480px) {
    /* Corregido: Eliminadas las propiedades de ancho y alto fijas que causaban problemas */
    .web-hero-stats .stat-item p {
        margin-top: 6px;
    }
}

/* SECCIÓN: SERVICIOS DE DESARROLLO WEB (similar a visual-interaction-section) */
.web-development-services-section {
    background-color: var(--color-bg);
    padding: var(--spacing-lg) var(--spacing-sm);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.web-development-services-section .section-header {
    margin-bottom: var(--spacing-lg);
    max-width: 900px;
}

.web-development-services-section .section-header h2 {
    font-size: var(--size-h2);
    color: var(--color-text);
    margin-bottom: var(--spacing-unit);
    font-family: var(--font-heading);
}

.web-development-services-section .section-header p {
    font-size: var(--font-size-base);
    color: var(--color-text-soft);
    line-height: 1.6;
}

.web-service-cards-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md); /* Espacio entre las tarjetas */
    max-width: var(--max-width);
    width: 100%;
}

.web-service-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background-color: var(--color-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-default);
    padding: var(--spacing-md);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease; /* Transición para el hover */
}

.web-service-content:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px var(--color-primary-shadow); /* Sombra de color primario */
}

/* Efecto de bisel simulado con pseudo-elemento */
.web-service-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
    box-shadow: 
        inset 0 0 0 0px transparent,
        inset 0 0 0 0px transparent,
        inset 0 0 0 0px transparent,
        inset 0 0 0 0px transparent;
    transition: box-shadow 0.4s ease-out;
    pointer-events: none;
    z-index: 1;
}

.web-service-content:hover::before {
    box-shadow: 
        inset 5px 0 15px -5px var(--color-primary), /* Bisel izquierdo dorado */
        inset -5px 0 15px -5px var(--color-primary), /* Bisel derecho dorado */
        inset 0 5px 15px -5px rgba(204, 171, 121, 0.4), /* Bisel superior sutil */
        inset 0 -5px 15px -5px rgba(204, 171, 121, 0.4); /* Bisel inferior sutil */
}

.web-service-text {
    flex: 1;
    text-align: left;
}

.web-service-text h3 {
    font-family: var(--font-heading);
    font-size: var(--size-h3);
    color: var(--color-primary); /* Color primario (dorado) para los títulos */
    margin-top: 0;
    margin-bottom: var(--spacing-unit);
}

.web-service-text p {
    color: var(--color-text);
    margin-bottom: var(--spacing-unit);
}
.web-service-text ul {
    list-style: none;
    padding: 0;
    margin-bottom: var(--spacing-md);
}

.web-service-text ul li {
    font-size: var(--font-size-base);
    color: var(--color-text-soft);
    line-height: 1.8;
    margin-bottom: calc(var(--spacing-unit) / 2);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.web-service-text ul li i {
    color: var(--color-primary); /* Color primario (dorado) para los íconos de lista */
    font-size: 1.1em;
    margin-top: 4px;
}

.web-service-text .btn-primary {
    display: inline-block;
    margin-top: var(--spacing-unit);
}

.web-service-device {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 400px;
    perspective: 1000px; /* Para el efecto 3D */
}

/* Estilos de los frames de los dispositivos (reutilizados del otro CSS, ajustados si es necesario) */
.web-service-device .device-frame {
    position: relative;
    background-color: #333;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 5px rgba(255, 255, 255, 0.05) inset;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: transform 0.5s ease;
    transform-style: preserve-3d;
    border: 1px solid rgba(255,255,255,0.1);
}

.web-service-device .device-frame.tablet {
    width: 90%;
    height: 100%;
    transform: rotateY(-10deg) rotateX(5deg);
}
.web-service-content:hover .web-service-device .device-frame.tablet {
    transform: rotateY(0deg) rotateX(0deg);
}

.web-service-device .device-frame.laptop {
    width: 95%;
    height: 70%;
    border-radius: 10px;
    transform: rotateX(10deg);
}
.web-service-content:hover .web-service-device .device-frame.laptop {
    transform: rotateX(0deg);
}

.web-service-device .device-frame.mobile {
    width: 250px;
    height: 100%;
    border-radius: 40px;
    transform: rotateY(15deg) translateX(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 5px rgba(255, 255, 255, 0.05) inset, inset 0 0 15px rgba(255,255,255,0.08);
}
.web-service-content:hover .web-service-device .device-frame.mobile {
    transform: rotateY(0deg) translateX(0px);
}
.web-service-device .device-frame.mobile::after {
    content: '';
    position: absolute;
    bottom: 15px;
    width: 40px;
    height: 8px;
    background-color: rgba(255,255,255,0.1);
    border-radius: 4px;
}

.web-service-device .device-screen {
    background-color: black;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.web-service-device .device-screen.tablet {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    border-radius: 10px;
}

.web-service-device .device-screen.laptop {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border-radius: 5px;
}

.web-service-device .device-screen.mobile {
    width: calc(100% - 15px);
    height: calc(100% - 15px);
    border-radius: 30px;
}

.web-service-device .device-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.7); /* Oscurecer un poco la imagen de fondo */
}

/* UI Overlay para mockups (simula una interfaz de navegador o app) */
.ui-overlay-mockup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 2; /* Asegurarse de que esté por encima de la imagen */
}

.mockup-header {
    width: 100%;
    height: 30px; /* Altura de la barra de título/dirección */
    background-color: rgba(50,50,50,0.8);
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mockup-browser-dots {
    display: flex;
    gap: 5px;
}
.mockup-browser-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #f0f0f0; /* Default */
}
.mockup-browser-dots .dot.red { background-color: #ff5f56; }
.mockup-browser-dots .dot.yellow { background-color: #ffbd2e; }
.mockup-browser-dots .dot.green { background-color: #27c93f; }

.mockup-address-bar {
    flex-grow: 1;
    background-color: rgba(255,255,255,0.1);
    border-radius: 15px;
    height: 20px;
    color: rgba(255,255,255,0.7);
    font-size: 0.8em;
    display: flex;
    align-items: center;
    padding: 0 10px;
    overflow: hidden;
    white-space: nowrap;
}

.mockup-content-area {
    flex-grow: 1;
    background-color: rgba(255,255,255,0.05); /* Fondo sutil para el contenido */
    position: relative;
    overflow: hidden; /* Para el scroll indicator */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Para que el indicador de scroll esté abajo */
    padding-bottom: 20px; /* Espacio para el indicador de scroll */
}

.mockup-scroll-indicator {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background-color: rgba(255,255,255,0.3);
    border-radius: 2px;
}

/* Estilos específicos para el contenido de los mockups (ajustados a la paleta) */
.mockup-content-area.ecommerce {
    padding: 15px;
}
.mockup-content-area.ecommerce .product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    height: 100%;
}
.mockup-content-area.ecommerce .product-item {
    background-color: rgba(204, 171, 121, 0.2); /* Fondo de item de producto con color primario sutil */
    border-radius: 8px;
    height: 100px; /* Ajustar altura según el dispositivo */
    position: relative;
    overflow: hidden;
}
.mockup-content-area.ecommerce .product-item::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    width: 60%;
    height: 15px;
    background-color: rgba(204, 171, 121, 0.4); /* Barras con color primario */
    border-radius: 3px;
}
.mockup-content-area.ecommerce .product-item::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 40%;
    height: 10px;
    background-color: rgba(204, 171, 121, 0.3); /* Barras con color primario */
    border-radius: 3px;
}

.mockup-content-area.pwa {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.mockup-content-area.pwa .pwa-icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 100%;
    margin-top: 20px;
}
.mockup-content-area.pwa .pwa-icon {
    width: 60px;
    height: 60px;
    background-color: rgba(204, 171, 121, 0.3); /* Iconos con color primario sutil */
    border-radius: 12px;
    position: relative;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}
.mockup-content-area.pwa .pwa-icon::after {
    content: '';
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 8px;
    background-color: rgba(255,255,255,0.1);
    border-radius: 2px;
}
.mockup-content-area.pwa .pwa-button {
    background-color: var(--color-primary); /* Botón con color primario */
    color: var(--color-bg);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: bold;
    margin-top: 30px;
    cursor: pointer;
    box-shadow: 0 4px 10px var(--color-primary-shadow); /* Sombra con color primario */
}


/* Invertir el orden de las tarjetas para device-left */
.web-service-content.device-left {
    flex-direction: row-reverse;
}

/* Responsive para la sección de Servicios */
@media (max-width: 1024px) {
    .web-service-content {
        flex-direction: column; /* Apilar en pantallas medianas */
        text-align: center;
    }
    .web-service-content.device-left {
        flex-direction: column; /* También apilar para mantener la consistencia */
    }
    .web-service-text {
        order: 1; /* Texto arriba */
        text-align: center;
        padding-bottom: var(--spacing-unit); /* Añadir espacio debajo del texto */
    }
    .web-service-text ul {
        text-align: left; /* Mantener la alineación de la lista a la izquierda */
        display: inline-block; /* Para centrar el bloque de la lista */
    }
    .web-service-device {
        order: 2; /* Dispositivo abajo */
        height: auto; /* Dejar que la altura se ajuste */
        min-height: 250px; /* Altura mínima para que se vea el frame */
        width: 100%; /* Asegura que el contenedor de dispositivo tome todo el ancho disponible */
        margin-top: var(--spacing-unit); /* Espacio arriba del dispositivo */
    }
    .web-service-device .device-frame {
        transform: none !important; /* Quitar transformaciones 3D en móvil para simplificar */
        width: 95%; /* Aumenta el ancho general de los frames */
        max-width: 550px; /* Limita un poco para pantallas muy grandes dentro de este media query */
        height: auto; /* Permite que la altura se ajuste proporcionalmente si el ancho crece */
        aspect-ratio: 16/9; /* Para mantener la proporción */
        margin: 0 auto; /* Centra el frame dentro de su contenedor de 100% */
    }
    .web-service-device .device-frame.laptop {
        aspect-ratio: 16/10; /* Ajuste específico para laptop */
    }
    .web-service-device .device-frame.tablet {
        aspect-ratio: 4/3; /* Ajuste específico para tablet */
    }
    .web-service-device .device-frame.mobile {
        width: 220px; /* Ancho fijo para móvil, si lo prefieres */
        aspect-ratio: 9/19; /* Proporción de móvil típica */
        height: auto;
        max-height: 400px; /* Limita la altura del móvil si crece mucho */
    }

    .mockup-content-area.ecommerce .product-grid {
        grid-template-columns: 1fr; /* Una columna en móvil */
    }
    .mockup-content-area.pwa .pwa-icon-grid {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas para los iconos */
        gap: 10px;
    }
    .mockup-content-area.pwa .pwa-icon {
        width: 50px;
        height: 50px;
    }
    .mockup-content-area.pwa .pwa-icon::after {
        bottom: -15px;
        height: 6px;
    }
}

@media (max-width: 768px) {
    .web-development-services-section {
        padding: var(--spacing-md) var(--spacing-xs);
    }
    .web-development-services-section .section-header h2 {
        font-size: var(--size-h3);
    }
    .web-development-services-section .section-header p {
        font-size: var(--font-size-sm);
    }
    .web-service-content {
        padding: var(--spacing-sm);
    }
    .web-service-text h3 {
        font-size: var(--size-h4);
    }
    .web-service-text p, .web-service-text ul li {
        font-size: var(--font-size-sm);
    }
    .web-service-device {
        min-height: 200px; /* Altura mínima para pantallas más pequeñas */
    }
    .web-service-device .device-frame {
        width: 98%; /* Casi el ancho completo de la tarjeta en pantallas pequeñas */
        max-width: none;
    }
    .web-service-device .device-frame.mobile {
        width: 180px; /* Ajusta este si quieres un móvil más grande/pequeño */
        max-height: 350px;
    }
    .mockup-header {
        height: 25px;
    }
    .mockup-browser-dots .dot {
        width: 8px;
        height: 8px;
    }
    .mockup-address-bar {
        font-size: 0.7em;
        height: 18px;
    }
    .mockup-content-area.pwa .pwa-icon {
        width: 45px;
        height: 45px;
    }
}

/* SECCIÓN: PROCESO DE DESARROLLO WEB */
.web-process-section {
    background-color: var(--color-bg);
    padding: var(--spacing-lg) var(--spacing-sm);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.web-process-section .section-header {
    margin-bottom: var(--spacing-lg);
    max-width: 900px;
}

.web-process-section .section-header h2 {
    font-size: var(--size-h2);
    color: var(--color-text);
    margin-bottom: var(--spacing-unit);
    font-family: var(--font-heading);
}

.web-process-section .section-header p {
    font-size: var(--font-size-base);
    color: var(--color-text-soft);
    line-height: 1.6;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    max-width: var(--max-width);
    width: 100%;
}

.process-step {
    background-color: var(--color-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-default);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px var(--color-primary-shadow); /* Sombra de color primario */
}

.process-step i {
    font-size: 3em;
    color: var(--color-primary); /* Color primario (dorado) para los iconos de paso */
    margin-bottom: var(--spacing-unit);
}


.process-step h3 {
    font-family: var(--font-heading);
    font-size: var(--size-h4);
    color: var(--color-text);
    margin-bottom: calc(var(--spacing-unit) / 2);
}

.process-step p {
    font-size: var(--font-size-base);
    color: var(--color-text-soft);
}


/* Responsive para la sección de Proceso */
@media (max-width: 1024px) {
    .process-steps {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .web-process-section {
        padding: var(--spacing-md) var(--spacing-xs);
    }
    .process-steps {
        grid-template-columns: 1fr; /* Una columna en móvil */
        gap: var(--spacing-unit);
    }
    .process-step {
        padding: var(--spacing-unit);
    }
    .process-step i {
        font-size: 2.5em;
        margin-bottom: calc(var(--spacing-unit) / 1.5);
    }
    .process-step h3 {
        font-size: var(--font-size-lg);
    }
    .process-step p {
        font-size: var(--font-size-sm);
    }
}




/* ========================================================== */
/* PAGINA DASHBOARD POWER BI (AJUSTADO A PALETA DORADA) */
/* ========================================================== */

/* SECCIÓN: HERO DE DASHBOARD */
.dashboard-hero-section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 100px 20px 60px;
    background-color: var(--color-bg);
    text-align: center;
    color: var(--color-text);
    overflow: hidden;
    /* Degradado sutil con tonos dorados, igual que web-hero-section */
    background: radial-gradient(circle at center top, rgba(204, 171, 121, 0.1) 0%, transparent 70%),
                radial-gradient(circle at center bottom, rgba(204, 171, 121, 0.05) 0%, transparent 70%),
                var(--color-bg);
}

.dashboard-hero-tag {
    background-color: var(--color-secondary); /* Fondo secundario para el tag */
    color: var(--color-primary); /* Color primario (dorado) para el texto del tag */
    border: 1px solid rgba(204, 171, 121, 0.3); /* Borde sutil dorado */
    padding: 8px 20px;
    border-radius: 50px;
    margin-bottom: 30px;
    font-size: 0.95em;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-default); /* Sombra predefinida */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dashboard-hero-tag:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); /* Sombra más pronunciada al hover */
}

.dashboard-hero-tag i {
    color: var(--color-primary); /* Color primario (dorado) para el icono */
    font-size: 1.1em;
}

.dashboard-hero-text h1 {
    font-family: var(--font-heading);
    font-size: var(--size-h1); /* Reutiliza la variable de tamaño de título principal */
    margin-bottom: 20px;
    line-height: 1.2;
    color: var(--color-text); /* Asegura que el título principal sea blanco suave */
}

.dashboard-hero-text .highlight-primary { /* Renombrado de highlight-purple a highlight-primary */
    color: var(--color-primary); /* Color primario (dorado) para el texto resaltado */
    font-weight: bold;
}
/* Eliminar la clase .highlight-purple si ya no se usa, o definirla con --color-primary */
.dashboard-hero-text .highlight-purple {
    color: var(--color-primary);
    font-weight: bold;
}


.dashboard-hero-text p {
    font-size: var(--font-size-base); /* Reutiliza la variable de tamaño de párrafo base */
    color: var(--color-text-soft);
    margin-bottom: 40px;
    max-width: 900px;
    line-height: 1.6;
}

.dashboard-hero-actions {
    display: flex;
    gap: 20px;
    margin-bottom: 80px;
}

/* Unificado: usar las clases globales .btn-primary y .btn-outline */
.dashboard-hero-actions .btn-primary { /* Asegúrate de que este botón sea de color primary */
    background-color: var(--color-primary);
    color: var(--color-bg);
    padding: 15px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 5px 15px var(--color-primary-shadow);
}
.dashboard-hero-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px var(--color-primary-shadow);
}

.dashboard-hero-actions .btn-outline { /* Unificado: usar la clase global .btn-outline */
    background-color: transparent;
    color: var(--color-primary); /* Color primario (dorado) para el botón outline */
    border: 2px solid var(--color-primary);
    padding: 15px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    transition: all 0.3s ease;
}

.dashboard-hero-actions .btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-bg); /* Cambia el color del texto al hacer hover */
    box-shadow: 0 5px 15px var(--color-primary-shadow); /* Sombra con el color primario */
    transform: translateY(-2px);
}


.dashboard-hero-stats {
    display: flex;
    justify-content: center;
    gap: 60px;
    width: 100%;
    max-width: 900px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    align-items: center; /* Asegura centralización vertical de los ítems */
}

.dashboard-hero-stats .stat-item {
    text-align: center;
    flex-basis: 30%;
    max-width: 250px;
}

.dashboard-hero-stats .stat-item h3 {
    font-family: var(--font-heading);
    font-size: var(--size-h2); /* Reutiliza la variable de tamaño de h2 */
    color: var(--color-primary); /* Color primario (dorado) para las estadísticas */
    margin-bottom: 5px;
}

.dashboard-hero-stats .stat-item p {
    font-size: var(--font-size-base);
    color: var(--color-text-soft);
    margin: 0;
}

.progress-bar-container {
    width: 100%;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin-top: 10px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--color-primary); /* Color primario (dorado) para la barra de progreso */
    border-radius: 3px;
    width: 0;
    transition: width 1s ease-out;
}

/* Responsive para la sección Hero de Dashboard */
@media (max-width: 1024px) {
    .dashboard-hero-section {
        min-height: 70vh;
        padding-top: var(--spacing-lg); /* Unificado */
    }
    .dashboard-hero-text h1 {
        font-size: var(--size-h2); /* Unificado */
    }
    .dashboard-hero-text p {
        font-size: var(--font-size-base); /* Unificado */
    }
    .dashboard-hero-actions {
        flex-direction: column;
        gap: 15px;
        margin-bottom: var(--spacing-lg); /* Unificado */
        align-items: center; /* Esto centrará los botones horizontalmente si el contenedor no ocupa el 100% y tiene un ancho fijo */
        width: 100%; /* Asegura que .web-hero-actions ocupe todo el ancho disponible */
    }
    .dashboard-hero-actions .btn-primary,
    .dashboard-hero-actions .btn-outline { /* Unificado: usar .btn-outline */
        width: 80%;
        max-width: 300px;
        font-size: 1em;
        padding: 12px 25px;
    }
    .dashboard-hero-stats {
        gap: 40px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .dashboard-hero-stats .stat-item h3 {
        font-size: 2.2em; /* Unificado */
    }
    .dashboard-hero-stats .stat-item p {
        font-size: 1em; /* Unificado */
    }
}

@media (max-width: 768px) {
    .dashboard-hero-section {
        min-height: auto;
        padding: var(--spacing-md) var(--spacing-unit); /* Unificado */
    }
    .dashboard-hero-tag {
        margin-bottom: var(--spacing-sm); /* Unificado */
        font-size: 0.85em;
    }
    .dashboard-hero-text h1 {
        font-size: var(--size-h3); /* Unificado */
        margin-bottom: 15px;
    }
    .dashboard-hero-text p {
        font-size: 1em; /* Unificado */
        margin-bottom: var(--spacing-md); /* Unificado */
    }
    .dashboard-hero-actions {
        margin-bottom: var(--spacing-md); /* Unificado */
    }
    .dashboard-hero-actions .btn-primary,
    .dashboard-hero-actions .btn-outline { /* Unificado: usar .btn-outline */
        width: 90%;
        max-width: unset;
        font-size: 0.95em;
    }
    .dashboard-hero-stats {
        flex-direction: column;
        gap: 30px;
        padding-top: 30px;
        border-top: none;
        align-items: center; /* Centrar ítems horizontalmente */
    }
    .dashboard-hero-stats .stat-item {
        width: 90%; /* Ocupa casi todo el ancho disponible */
        max-width: 300px; /* Limita el ancho en pantallas pequeñas */
        margin: 0 auto; /* Centra el stat-item si tiene un max-width */
    }
    .dashboard-hero-stats .stat-item h3 {
        font-size: 2em; /* Unificado */
    }
    .dashboard-hero-stats .stat-item p {
        font-size: 0.9em; /* Unificado */
    }
}

/* SECCIÓN: SERVICIOS DE DASHBOARD */
.dashboard-services-section {
    background-color: var(--color-bg);
    padding: var(--spacing-lg) var(--spacing-sm);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dashboard-services-section .section-header {
    margin-bottom: var(--spacing-lg);
    max-width: 900px;
}

.dashboard-services-section .section-header h2 {
    font-size: var(--size-h2);
    color: var(--color-text);
    margin-bottom: var(--spacing-unit);
    font-family: var(--font-heading);
}

.dashboard-services-section .section-header p {
    font-size: var(--font-size-base);
    color: var(--color-text-soft);
    line-height: 1.6;
}

.dashboard-service-cards-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: var(--max-width);
    width: 100%;
}

.dashboard-service-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background-color: var(--color-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-default);
    padding: var(--spacing-md);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.dashboard-service-content:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px var(--color-primary-shadow); /* Sombra de color primario */
}

/* Efecto de bisel simulado con pseudo-elemento */
.dashboard-service-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
    box-shadow:
        inset 0 0 0 0px transparent,
        inset 0 0 0 0px transparent,
        inset 0 0 0 0px transparent,
        inset 0 0 0 0px transparent;
    transition: box-shadow 0.4s ease-out;
    pointer-events: none;
    z-index: 1;
}

.dashboard-service-content:hover::before {
    box-shadow:
        inset 5px 0 15px -5px var(--color-primary), /* Bisel izquierdo dorado */
        inset -5px 0 15px -5px var(--color-primary), /* Bisel derecho dorado */
        inset 0 5px 15px -5px rgba(204, 171, 121, 0.4), /* Bisel superior sutil */
        inset 0 -5px 15px -5px rgba(204, 171, 121, 0.4); /* Bisel inferior sutil */
}

.dashboard-service-text {
    flex: 1;
    text-align: left;
}

.dashboard-service-text h3 {
    font-family: var(--font-heading);
    font-size: var(--size-h3);
    color: var(--color-primary); /* Color primario (dorado) para los títulos */
    margin-top: 0;
    margin-bottom: var(--spacing-unit);
}

.dashboard-service-text p {
    color: var(--color-text);
    margin-bottom: var(--spacing-unit);
}
.dashboard-service-text ul {
    list-style: none;
    padding: 0;
    margin-bottom: var(--spacing-md);
}

.dashboard-service-text ul li {
    font-size: var(--font-size-base);
    color: var(--color-text-soft);
    line-height: 1.8;
    margin-bottom: calc(var(--spacing-unit) / 2);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.dashboard-service-text ul li i {
    color: var(--color-primary); /* Color primario (dorado) para los íconos de lista */
    font-size: 1.1em;
    margin-top: 4px;
}

.dashboard-service-text .btn-primary {
    display: inline-block;
    margin-top: var(--spacing-unit);
}

.dashboard-service-device {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 400px; /* Altura predeterminada para desktop */
    perspective: 1000px;
}

/* Iconos de la tarjeta 1 y 3 (conexión de datos, capacitación) */
.dashboard-service-device.icon-only {
    flex-direction: column;
    gap: 15px;
    color: var(--color-primary); /* Color primario (dorado) para los iconos */
}

.dashboard-service-device.icon-only .fa-database,
.dashboard-service-device.icon-only .fa-user-graduate,
.dashboard-service-device.icon-only .fa-table-cells,
.dashboard-service-device.icon-only .fa-headset {
    filter: drop-shadow(0 0 8px rgba(204, 171, 121, 0.5)); /* Sombra dorada para los iconos */
}

.dashboard-service-device.icon-only .data-flow-icon {
    color: var(--color-text-soft); /* Un color más suave para los iconos de flujo */
    filter: none;
    animation: pulse-flow 2s infinite ease-in-out;
}

@keyframes pulse-flow {
    0% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 0.7; }
}


/* Estilos de los frames de los dispositivos (reutilizados y ajustados) */
.dashboard-service-device .device-frame {
    position: relative;
    background-color: #333;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 5px rgba(255, 255, 255, 0.05) inset;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: transform 0.5s ease;
    transform-style: preserve-3d;
    border: 1px solid rgba(255,255,255,0.1);
}

.dashboard-service-device .device-frame.laptop {
    width: 95%;
    height: 70%;
    border-radius: 10px;
    transform: rotateX(10deg);
}
.dashboard-service-content:hover .dashboard-service-device .device-frame.laptop {
    transform: rotateX(0deg);
}

.dashboard-service-device .device-screen {
    background-color: black;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dashboard-service-device .device-screen.laptop {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border-radius: 5px;
}

.dashboard-service-device .device-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.7);
}

/* UI Overlay para mockups (simula una interfaz de navegador/Power BI) */
.ui-overlay-mockup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.mockup-header {
    width: 100%;
    height: 30px;
    background-color: rgba(50,50,50,0.8);
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mockup-browser-dots {
    display: flex;
    gap: 5px;
}
.mockup-browser-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #f0f0f0;
}
.mockup-browser-dots .dot.red { background-color: #ff5f56; }
.mockup-browser-dots .dot.yellow { background-color: #ffbd2e; }
.mockup-browser-dots .dot.green { background-color: #27c93f; }

.mockup-address-bar {
    flex-grow: 1;
    background-color: rgba(255,255,255,0.1);
    border-radius: 15px;
    height: 20px;
    color: rgba(255,255,255,0.7);
    font-size: 0.8em;
    display: flex;
    align-items: center;
    padding: 0 10px;
    overflow: hidden;
    white-space: nowrap;
}

.mockup-content-area {
    flex-grow: 1;
    background-color: rgba(255,255,255,0.05);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 20px;
}

/* Estilos específicos para el contenido del dashboard mockup */
.mockup-content-area.dashboard {
    padding: 15px;
    justify-content: flex-start; /* Contenido desde arriba */
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    height: 100%;
}

.dashboard-card {
    background-color: rgba(204, 171, 121, 0.2); /* Fondo de tarjeta de dashboard con dorado sutil */
    border-radius: 8px;
    border: 1px solid rgba(204, 171, 121, 0.3); /* Borde dorado */
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--color-text);
    font-size: 0.8em;
}
.dashboard-card.small { grid-column: span 1; grid-row: span 1; }
.dashboard-card.medium { grid-column: span 1; grid-row: span 1; }
.dashboard-card.large { grid-column: span 2; grid-row: span 1; }


.dashboard-card::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    width: 60%;
    height: 12px;
    background-color: rgba(204, 171, 121, 0.4); /* Barras con dorado */
    border-radius: 3px;
}
.dashboard-card::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 40%;
    height: 8px;
    background-color: rgba(204, 171, 121, 0.3); /* Barras con dorado */
    border-radius: 3px;
}
.dashboard-card.large::before {
    width: 80%;
}
.dashboard-card.large::after {
    width: 60%;
}


/* Invertir el orden de las tarjetas para device-left (solo en desktop) */
.dashboard-service-content.device-left {
    flex-direction: row-reverse;
}

/* Responsive para la sección de Servicios */
@media (max-width: 1024px) {
    .dashboard-service-content {
        flex-direction: column; /* Asegura que el texto y el dispositivo estén en columna */
        text-align: center;
    }
    .dashboard-service-content.device-left {
        flex-direction: column; /* Asegura que se mantenga en columna incluso si era device-left */
    }
    .dashboard-service-text {
        text-align: center;
    }
    .dashboard-service-text ul {
        text-align: left; /* Mantener la lista alineada a la izquierda si lo deseas */
        display: inline-block; /* Esto ayuda a centrar el bloque de la lista */
    }

    /* ****************************************************** */
    /* INICIO DE LAS CORRECCIONES PARA SERVICIOS RESPONSIVE */
    /* ****************************************************** */
    .dashboard-service-device {
        height: auto; /* IMPORTANTE: Deja que el alto se ajuste al contenido */
        min-height: 250px; /* Un mínimo para que no se colapse del todo */
        width: 100%; /* Asegura que el contenedor del dispositivo ocupe todo el ancho */
        margin-top: var(--spacing-unit); /* Añadir margen superior para separar del texto */
        /* ELIMINAR O COMENTAR: order: -1; (para que la imagen quede debajo del texto) */
        display: flex; /* Asegura que los hijos de .dashboard-service-device se alineen */
        justify-content: center;
        align-items: center;
        perspective: none; /* Deshabilita la perspectiva 3D en responsive */
    }

    .dashboard-service-device .device-frame {
        transform: none !important; /* Elimina la transformación 3D en responsive */
        width: 95%; /* Dale un ancho relativo al contenedor */
        height: auto; /* Deja que la altura del frame se ajuste */
        max-height: 300px; /* Limita la altura para que no sea excesivamente grande */
        aspect-ratio: 16 / 9; /* Mantén la proporción de un monitor de laptop */
        margin: 0 auto;
        display: block; /* Para que ocupe su propio espacio */
    }

    .dashboard-service-device .device-screen {
        width: 100%;
        height: 100%;
    }

    .dashboard-service-device .device-screen img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* Asegura que la imagen se vea completa dentro del frame */
    }

    /* Ajustes específicos para los iconos en mobile (que ya tenías, pero vale la pena revisarlos) */
    .dashboard-service-device.icon-only {
        flex-direction: row; /* Para iconos en fila */
        flex-wrap: wrap;
        gap: 20px;
        height: auto;
        min-height: 150px; /* Altura mínima para los contenedores de iconos */
        padding: 20px 0; /* Añade un poco de padding vertical */
    }
    .dashboard-service-device.icon-only i.fa-5x {
        font-size: 3em; /* Ajusta el tamaño de los iconos */
    }
    .dashboard-service-device.icon-only i.fa-3x {
        font-size: 2em;
    }

    /* Ajuste para el overlay de la interfaz */
    .ui-overlay-mockup {
        padding: 5px; /* Pequeño padding para que no quede pegado al borde */
    }
    .mockup-header {
        height: 25px;
        padding: 0 5px;
        gap: 4px; /* Reduce el espacio entre los elementos del header */
    }
    .mockup-browser-dots .dot {
        width: 8px;
        height: 8px;
    }
    .mockup-address-bar {
        height: 16px;
        font-size: 0.7em;
        padding: 0 8px;
    }
    .mockup-content-area.dashboard {
        padding: 10px;
    }
    .dashboard-grid {
        gap: 5px;
    }
    .dashboard-card {
        border-radius: 5px;
    }
    /* ****************************************************** */
    /* FIN DE LAS CORRECCIONES PARA SERVICIOS RESPONSIVE    */
    /* ****************************************************** */
}

@media (max-width: 768px) {
    .dashboard-services-section {
        padding: var(--spacing-md) var(--spacing-xs);
    }
    .dashboard-services-section .section-header h2 {
        font-size: var(--size-h3);
    }
    .dashboard-services-section .section-header p {
        font-size: var(--font-size-sm);
    }
    .dashboard-service-content {
        padding: var(--spacing-sm);
    }
    .dashboard-service-text h3 {
        font-size: var(--size-h4);
    }
    .dashboard-service-text p, .dashboard-service-text ul li {
        font-size: var(--font-size-sm);
    }
    /* Ajustes específicos para el dispositivo en pantallas muy pequeñas */
    .dashboard-service-device {
        min-height: 200px; /* Reduce la altura mínima en pantallas más pequeñas */
    }
    .dashboard-service-device .device-frame {
        width: 100%; /* Ocupa todo el ancho en pantallas muy pequeñas */
        max-height: 250px;
    }
    .dashboard-service-device.icon-only i.fa-5x {
        font-size: 2.5em;
    }
    .dashboard-service-device.icon-only i.fa-3x {
        font-size: 1.8em;
    }
    .mockup-header {
        height: 20px; /* Header del mockup más pequeño */
    }
    .mockup-browser-dots .dot {
        width: 6px;
        height: 6px;
    }
    .mockup-address-bar {
        height: 14px;
        font-size: 0.65em;
    }
    .mockup-content-area.dashboard {
        padding: 5px;
    }
    .dashboard-grid {
        gap: 3px;
    }
    /* Añadido: Ajustes para el tamaño de las barras en las tarjetas del dashboard en pantallas pequeñas */
    .dashboard-card::before {
        top: 5px;
        left: 5px;
        width: 50%;
        height: 10px;
    }
    .dashboard-card::after {
        bottom: 5px;
        left: 5px;
        width: 30%;
        height: 6px;
    }
    .dashboard-card.large::before {
        width: 70%;
    }
    .dashboard-card.large::after {
        width: 50%;
    }
}

/* SECCIÓN: PROCESO DE IMPLEMENTACIÓN DE DASHBOARD */
.dashboard-process-section {
    background-color: var(--color-bg);
    padding: var(--spacing-lg) var(--spacing-sm);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dashboard-process-section .section-header {
    margin-bottom: var(--spacing-lg);
    max-width: 900px;
}

.dashboard-process-section .section-header h2 {
    font-size: var(--size-h2);
    color: var(--color-text);
    margin-bottom: var(--spacing-unit);
    font-family: var(--font-heading);
}

.dashboard-process-section .section-header p {
    font-size: var(--font-size-base);
    color: var(--color-text-soft);
    line-height: 1.6;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    max-width: var(--max-width);
    width: 100%;
}

.process-step {
    background-color: var(--color-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-default);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px var(--color-primary-shadow); /* Sombra dorada al hover */
}

.process-step i {
    font-size: 3em;
    color: var(--color-primary); /* Color primario (dorado) para los iconos de paso */
    margin-bottom: var(--spacing-unit);
}

.process-step h3 {
    font-family: var(--font-heading);
    font-size: var(--size-h4);
    color: var(--color-text);
    margin-bottom: calc(var(--spacing-unit) / 2);
}

.process-step p {
    font-size: var(--font-size-base);
    color: var(--color-text-soft);
}

/* Responsive para la sección de Proceso */
@media (max-width: 1024px) {
    .process-steps {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .dashboard-process-section {
        padding: var(--spacing-md) var(--spacing-xs);
    }
    .process-steps {
        grid-template-columns: 1fr;
        gap: var(--spacing-unit);
    }
    .process-step {
        padding: var(--spacing-unit);
    }
    .process-step i {
        font-size: 2.5em;
        margin-bottom: calc(var(--spacing-unit) / 1.5);
    }
    .process-step h3 {
        font-size: var(--font-size-lg);
    }
    .process-step p {
        font-size: var(--font-size-sm);
    }
}