/* public/css/style.css */

/* --- 1. VARIABLES DE MARCA Y CONFIGURACIÓN GLOBAL --- */
/* --- 1. SISTEMA DE COLORES INTELIGENTE --- */
:root {
    /* A. COLORES DE MARCA (Estos NO cambian, son tu identidad) */
    --brand-blue: #0156ac;
    --brand-green: #34a853;
    --brand-yellow: #ffcf00;
    --brand-red: #ff5454;

    /* B. VARIABLES DE TEMA (MODO CLARO POR DEFECTO) */
    --bg-body: #f8f9fa;
    /* Fondo general */
    --bg-card: #ffffff;
    /* Fondo de tarjetas */
    --bg-nav: #ffffff;
    /* Fondo del menú */
    --text-main: #384043;
    /* Texto principal (Gris oscuro) */
    --text-muted: #505152;
    /* Texto secundario */
    --border-color: #e9ecef;
    /* Bordes suaves */
    --shadow-color: rgba(0, 0, 0, 0.1);
    /* Sombras */

    /* C. TIPOGRAFÍA */
    --font-headings: 'Montserrat', sans-serif;
    --font-body: 'Roboto', sans-serif;
}

/* --- C. CONFIGURACIÓN MODO OSCURO (LA MAGIA) --- */
@media (prefers-color-scheme: dark) {
    :root {
        /* Invertimos los roles de las variables de tema */
        --bg-body: #121212;
        /* Casi negro (mejor que negro puro) */
        --bg-card: #1e1e1e;
        /* Gris oscuro para tarjetas */
        --bg-nav: #1e1e1e;
        --text-main: #e0e0e0;
        /* Blanco hueso (menos agresivo) */
        --text-muted: #a0a0a0;
        /* Gris claro */
        --border-color: #333333;
        /* Bordes oscuros */
        --shadow-color: rgba(0, 0, 0, 0.5);
        /* Sombras más fuertes */

        /* Ajuste de Marca: El azul oscuro no se lee bien en fondo negro. 
           Lo aclaramos un poco solo para textos/bordes en modo oscuro */
        --brand-blue: #4a90e2;
    }
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Roboto:wght@400;500&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');


body {
    /* Antes: background-color: var(--light-gray); */
    background-color: var(--bg-body);
    /* AHORA */

    /* Antes: color: var(--dark-gray); */
    color: var(--text-main);
    /* AHORA */
}

.service-card,
.service-detail-card,
.transparency-card {
    /* Antes: background-color: #ffffff; */
    background-color: var(--bg-card);
    /* AHORA */

    /* Antes: border: 1px solid #e9ecef; */
    border: 1px solid var(--border-color);
    /* AHORA */
}

.main-header {
    background: var(--bg-nav);
    border-bottom: 1px solid var(--border-color);
}

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

section {
    padding: 80px 0;
}

.section-title {
    font-family: var(--font-headings);
    font-size: 2.5rem;
    color: var(--text-main);
    /* Actualizado para modo oscuro */
    text-align: center;
    margin-bottom: 50px;
}

/* --- 2. BOTONES Y ELEMENTOS COMUNES --- */
.btn {
    display: inline-block;
    padding: 12px 28px;
    font-family: var(--font-headings);
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background-color: var(--brand-blue);
    /* Usamos la variable de marca fija */
    color: #ffffff;
    /* El texto del botón siempre blanco para contraste */
}

.btn-primary:hover {
    transform: translateY(-3px);
    /* Sombra adaptativa (más suave en modo oscuro) */
    box-shadow: 0 10px 20px var(--shadow-color);
}

/* --- 3. SECCIÓN HERO --- */
.hero-section {
    /* Usamos --bg-alt para que sea gris claro en día y oscuro en noche */
    background-color: var(--bg-alt);
    padding: 100px 0;
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.hero-text {
    flex-basis: 55%;
}

.hero-title {
    font-family: var(--font-headings);
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--text-main);
    /* Título adaptable */
}

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    /* Subtítulo adaptable */
    margin-bottom: 30px;
}

.hero-visual {
    flex-basis: 40%;
}

.hero-image {
    max-width: 100%;
    height: auto;
}


/* --- 4. SECCIÓN SERVICIOS --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service-card {
    background-color: var(--bg-card);
    /* Blanco en día, Gris en noche */
    border: 1px solid var(--border-color);
    /* Borde adaptable */
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px var(--shadow-color);
    /* Sombra adaptable */
    border-color: var(--brand-blue);
    /* Detalle visual al hover */
}

.service-card-icon {
    font-size: 2.5rem;
    color: var(--brand-blue);
    margin-bottom: 20px;
}

.service-card-title {
    font-family: var(--font-headings);
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--text-main);
    /* Título de tarjeta adaptable */
}

.service-card-description {
    color: var(--text-muted);
    /* Texto descriptivo adaptable */
    margin-bottom: 20px;
}

.service-card-link {
    font-family: var(--font-headings);
    color: var(--brand-blue);
    text-decoration: none;
    font-weight: 700;
}

/* --- 5. SECCIÓN PORTAFOLIO --- */
.section-portfolio {
    /* Usamos --bg-alt para que contraste con el fondo blanco/negro del body */
    background-color: var(--bg-alt);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.portfolio-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    display: block;
    /* Añadimos un borde sutil en modo oscuro para definir los límites de la imagen */
    border: 1px solid var(--border-color);
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* El gradiente se mantiene igual porque siempre oscurece la imagen */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    display: flex;
    align-items: flex-end;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

.portfolio-item-text {
    /* El texto sobre la imagen SIEMPRE debe ser blanco, no variable */
    color: #ffffff;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.portfolio-item:hover .portfolio-item-text {
    transform: translateY(0);
}

.portfolio-item-text h3 {
    font-family: var(--font-headings);
    margin: 0 0 5px 0;
    color: #ffffff;
    /* Forzamos blanco por si h3 tiene variable global */
}

.portfolio-item-text p {
    margin: 0;
    font-size: 0.9rem;
    color: #e0e0e0;
    /* Gris muy claro para lectura sobre oscuro */
}


/* --- 6. SECCIÓN FINAL CTA --- */
.section-cta {
    background-color: var(--brand-blue);
    /* Azul corporativo fijo */
    color: #ffffff;
    /* Texto siempre blanco sobre azul */
    text-align: center;
}

.cta-title {
    font-family: var(--font-headings);
    font-size: 2.8rem;
    color: #ffffff;
    /* Siempre blanco */
}

.cta-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 30px;
    color: #ffffff;
}

.section-cta .btn-primary {
    /* Botón inverso: Fondo blanco, texto azul */
    background-color: #ffffff;
    color: var(--brand-blue);
}

/* --- ESTILOS PARA NAVBAR Y FOOTER --- */
.main-header {
    background: var(--bg-nav);
    /* Adaptable: Blanco o Gris Oscuro */
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-main);
    /* Texto adaptable */
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--brand-blue);
}

.btn-primary-outline {
    border: 2px solid var(--brand-blue);
    color: var(--brand-blue);
    padding: 8px 20px;
    border-radius: 50px;
    background-color: transparent;
}

.btn-primary-outline:hover {
    background-color: var(--brand-blue);
    color: #ffffff;
}

.main-footer {
    /* El footer suele verse mejor oscuro siempre (ancla visual) */
    background-color: #1a1a1a;
    color: #a0a0a0;
    padding: 40px 0;
    text-align: center;
    border-top: 1px solid var(--border-color);
}

/* --- 7. SECCIÓN: SOBRE MAQUI.DEV --- */
.section-about {
    background-color: var(--bg-body);
    /* Adaptable */
}

.about-container {
    display: flex;
    align-items: center;
    gap: 60px;
}

.about-image {
    flex-basis: 40%;
    flex-shrink: 0;
}

.about-image img {
    width: 100%;
    border-radius: 10px;
    /* Sombra adaptable */
    box-shadow: 0 15px 30px var(--shadow-color);
}

.about-text {
    flex-basis: 60%;
    color: var(--text-muted);
}

.about-text h2 {
    color: var(--text-main);
}

/* --- SISTEMA DE PESTAÑAS (TABS) --- */
.tabs-nav {
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 20px;
}

.tab-link {
    background: none;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-family: var(--font-headings);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-muted);
    /* Texto inactivo adaptable */
    position: relative;
    top: 2px;
    transition: color 0.3s ease;
}

.tab-link:hover {
    color: var(--brand-blue);
}

.tab-link.active {
    color: var(--brand-blue);
    border-bottom: 2px solid var(--brand-blue);
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- ESTILOS ADICIONALES PARA EL PORTAFOLIO --- */

/* Estilo para el botón "Ver Todos" en la home */
.portfolio-cta {
    text-align: center;
    margin-top: 40px;
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-main);
    /* Adaptable */
    border: 2px solid var(--border-color);
    /* Borde sutil adaptable */
    font-weight: 600;
}

.btn-secondary:hover {
    background-color: var(--text-main);
    /* Se rellena con el color de texto actual */
    color: var(--bg-card);
    /* El texto se vuelve del color del fondo (inverso) */
    border-color: var(--text-main);
}

/* Estilo para la cabecera de la página de portafolio */
.portfolio-hero-section {
    /* Usamos bg-alt para que sea gris suave en día y oscuro en noche */
    background-color: var(--bg-alt);
    color: var(--text-main);
    padding: 60px 0;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.portfolio-hero-title {
    font-family: var(--font-headings);
    font-size: 3rem;
    margin-bottom: 10px;
    color: var(--text-main);
}

.portfolio-hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

.portfolio-full-section {
    padding: 80px 0;
    background-color: var(--bg-body);
}

/* --- ESTILOS PARA LA PÁGINA DE LOGIN --- */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: var(--bg-body);
    /* Fondo adaptable */
}

.login-container {
    background: var(--bg-card);
    /* Tarjeta adaptable */
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 30px var(--shadow-color);
    width: 100%;
    max-width: 400px;
    text-align: center;
    border: 1px solid var(--border-color);
}

.login-header h2 {
    font-family: var(--font-headings);
    margin-top: 20px;
    margin-bottom: 10px;
    color: var(--text-main);
}

.login-header p {
    color: var(--text-muted);
    margin-bottom: 30px;
}

.login-form .form-group {
    margin-bottom: 20px;
    text-align: left;
}

.login-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--text-main);
}

.form-control {
    width: 100%;
    padding: 12px;
    /* Fondo y texto adaptables (Vital para modo oscuro) */
    background-color: var(--bg-body);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-sizing: border-box;
}

.form-control:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 2px rgba(1, 86, 172, 0.2);
}

.btn-block {
    width: 100%;
}

.login-footer {
    margin-top: 20px;
}

.login-footer a {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-decoration: none;
}

.login-footer a:hover {
    text-decoration: underline;
    color: var(--brand-blue);
}

/* Modificación para el navbar */
.nav-link-contact {
    color: var(--text-main);
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-link-contact:hover {
    color: var(--brand-blue);
}

/* Alertas (Mantenemos colores estándar pero ajustamos opacidad para modo oscuro) */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 5px;
}

.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

/* --- ESTILOS ADICIONALES PARA TARJETAS DE SERVICIO --- */

.service-card-description {
    min-height: 4.5em;
    color: var(--text-muted);
}

.service-card-features {
    list-style: none;
    padding: 0;
    margin: 25px 0;
    text-align: left;
}

.service-card-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--text-muted);
}

.service-card-features .fa-check-circle {
    color: var(--brand-green);
    /* Usamos la variable de marca */
}

.service-card-price {
    font-family: var(--font-headings);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--brand-blue);

    /* TRUCO PRO: Usamos rgba con el color de marca. 
       Al ser transparente (0.1), se ve azul claro en fondo blanco 
       y azul oscuro sutil en fondo negro. ¡Funciona en ambos! */
    background-color: rgba(1, 86, 172, 0.1);

    padding: 10px 15px;
    border-radius: 8px;
    margin: 20px 0;
    display: inline-block;
}

.service-card {
    display: flex;
    flex-direction: column;
    /* Aseguramos que use las variables de tarjeta */
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

.service-card-link {
    margin-top: auto;
}




/* =========================================================================
   BLOQUE 1: ECOSISTEMA DE SERVICIOS (CATÁLOGO Y DETALLE)
   ========================================================================= */

/* --- Página de Servicios Completa --- */
.services-full-page {
    background-color: var(--bg-body);
    /* Adaptable */
    padding-bottom: 60px;
}

/* --- Tarjeta de Detalle de Servicio (Horizontal) --- */
.service-detail-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    /* Icono | Texto | Botón */
    grid-template-areas: "icon text action";

    background-color: var(--bg-card);
    /* Adaptable */
    border: 1px solid var(--border-color);
    border-top: 4px solid transparent;
    /* Espacio para el color de acento */

    border-radius: 12px;
    padding: 30px 40px;
    margin-bottom: 30px;
    gap: 30px;
    align-items: center;

    box-shadow: 0 4px 15px var(--shadow-color);
    transition: all 0.3s ease;
}

.service-detail-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px var(--shadow-color);
    /* El borde de color se define más abajo en los acentos */
}

/* Icono del Servicio */
.service-detail-icon {
    grid-area: icon;
    font-size: 2.5rem;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Fondo sutil adaptable */
    background-color: var(--bg-body);
    color: var(--brand-blue);
    transition: all 0.3s ease;
}

/* Textos */
.service-detail-text {
    grid-area: text;
}

.service-detail-text h3 {
    font-family: var(--font-headings);
    font-size: 1.6rem;
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--text-main);
}

.service-detail-text p {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 15px;
}

/* Acción (Precio y Botón) */
.service-detail-action {
    grid-area: action;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
}

.service-detail-action .btn {
    white-space: nowrap;
}

/* --- SISTEMA DE COLORES CÍCLICOS (ACENTOS) --- */
/* Define colores específicos para acentos que brillen en Dark Mode */
:root {
    --accent-green: #2ecc71;
    --accent-yellow: #f1c40f;
    --accent-red: #e74c3c;
    --accent-blue: #3498db;
}

/* Tarjeta 1, 5, 9... (VERDE) */
.service-detail-card:nth-child(4n + 1) {
    border-top-color: var(--accent-green);
}

.service-detail-card:nth-child(4n + 1) .service-detail-icon {
    color: var(--accent-green);
}

.service-detail-card:nth-child(4n + 1) .btn-primary:hover {
    background-color: var(--accent-green);
    box-shadow: 0 5px 15px rgba(46, 204, 113, 0.4);
}

/* Tarjeta 2, 6, 10... (AMARILLO) */
.service-detail-card:nth-child(4n + 2) {
    border-top-color: var(--accent-yellow);
}

.service-detail-card:nth-child(4n + 2) .service-detail-icon {
    color: var(--accent-yellow);
}

.service-detail-card:nth-child(4n + 2) .btn-primary:hover {
    background-color: var(--accent-yellow);
    color: #333;
    /* Texto oscuro para contraste en amarillo */
    box-shadow: 0 5px 15px rgba(241, 196, 15, 0.4);
}

/* Tarjeta 3, 7, 11... (ROJO) */
.service-detail-card:nth-child(4n + 3) {
    border-top-color: var(--accent-red);
}

.service-detail-card:nth-child(4n + 3) .service-detail-icon {
    color: var(--accent-red);
}

.service-detail-card:nth-child(4n + 3) .btn-primary:hover {
    background-color: var(--accent-red);
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
}

/* Tarjeta 4, 8, 12... (AZUL) */
.service-detail-card:nth-child(4n + 4) {
    border-top-color: var(--accent-blue);
}

.service-detail-card:nth-child(4n + 4) .service-detail-icon {
    color: var(--accent-blue);
}

.service-detail-card:nth-child(4n + 4) .btn-primary:hover {
    background-color: var(--accent-blue);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

/* Tarjeta Destacada (Sobrescribe el ciclo) */
.service-detail-card.featured {
    border-top-color: var(--brand-blue);
    background-color: var(--bg-card);
    border: 2px solid var(--brand-blue);
    /* Borde más notorio */
    transform: scale(1.02);
}

.service-detail-card.featured:hover {
    transform: scale(1.04) translateY(-5px);
}

/* --- Página de Detalle de Servicio (Hero & Content) --- */
.service-detail-hero {
    background-color: var(--bg-alt);
    /* Gris suave / Oscuro */
    color: var(--text-main);
    text-align: center;
    padding: 80px 0;
    border-bottom: 1px solid var(--border-color);
}

.service-detail-hero-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    color: var(--brand-blue);
}

.service-detail-title {
    font-family: var(--font-headings);
    font-size: 3.5rem;
    margin-bottom: 15px;
    color: var(--text-main);
}

.service-detail-subtitle {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 30px auto;
    color: var(--text-muted);
}

.service-detail-content {
    padding: 80px 0;
    background-color: var(--bg-body);
}

/* Secciones de contenido interno */
.service-content-section {
    padding: 40px 0;
    border-bottom: 1px solid var(--border-color);
}

.service-content-section:last-child {
    border-bottom: none;
}

.service-content-section h2 {
    font-size: 2rem;
    color: var(--brand-blue);
    margin-bottom: 20px;
}

/* Listas de características */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.feature-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.feature-card i {
    color: var(--brand-green);
    font-size: 1.2rem;
    margin-top: 4px;
}

.feature-card div {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* Lista simple para "Ideal Para" */
.features-list-simple {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.ideal-item {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.ideal-item i {
    color: var(--brand-blue);
}

/* =========================================================================
   BLOQUE 2: CONTACTO Y FORMULARIOS (DARK MODE READY)
   ========================================================================= */

/* --- Sección General de Contacto --- */
.contact-section {
    padding: 80px 0;
    background-color: var(--bg-body);
    /* Adaptable */
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;

    background: var(--bg-card);
    /* Tarjeta adaptable */
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 10px 40px var(--shadow-color);
    border: 1px solid var(--border-color);
}

/* Textos de Cabecera */
.contact-title {
    font-family: var(--font-headings);
    font-size: 2.8rem;
    line-height: 1.2;
    margin-top: 0;
    color: var(--text-main);
}

.contact-subtitle {
    color: var(--text-muted);
    margin-bottom: 40px;
    font-size: 1.1rem;
}

/* --- Lista de Detalles de Contacto (Izquierda) --- */
.contact-details {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.contact-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.contact-detail-item i {
    font-size: 1.5rem;
    color: var(--brand-blue);
    margin-top: 5px;

    /* Fondo circular sutil para el icono */
    background-color: rgba(1, 86, 172, 0.1);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.contact-detail-item strong {
    display: block;
    font-family: var(--font-headings);
    color: var(--text-main);
    margin-bottom: 2px;
}

.contact-detail-item a,
.contact-detail-item span {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-detail-item a:hover {
    color: var(--brand-blue);
    text-decoration: underline;
}

/* --- Formulario (Derecha) --- */
.contact-form-wrapper {
    background: var(--bg-body);
    /* Contraste sutil dentro de la tarjeta */
    padding: 30px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.9rem;
}

/* ESTILOS CRÍTICOS PARA INPUTS EN MODO OSCURO */
.form-control {
    width: 100%;
    padding: 12px 15px;

    /* Fondo adaptable: Evita input blanco brillante en modo oscuro */
    background-color: var(--bg-card);
    color: var(--text-main);

    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    font-family: var(--font-body);
    font-size: 1rem;
}

/* Placeholder (Texto de ayuda) */
.form-control::placeholder {
    color: #a0a0a0;
    /* Gris medio que se ve en blanco y negro */
    opacity: 1;
}

.form-control:focus {
    outline: none;
    border-color: var(--brand-blue);
    /* Glow azul suave */
    box-shadow: 0 0 0 3px rgba(1, 86, 172, 0.15);
    background-color: var(--bg-card);
    /* Mantiene el color */
}

textarea.form-control {
    resize: vertical;
    /* Permite redimensionar solo verticalmente */
    min-height: 120px;
}

.form-group small {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 5px;
    display: block;
}

/* Botón de envío ancho completo en móvil */
.contact-form .btn {
    width: 100%;
    justify-content: center;
}

/* =========================================================================
   BLOQUE 3: PORTAFOLIO EXTENDIDO Y CASOS DE ESTUDIO
   ========================================================================= */

/* --- Página de Portafolio (Catálogo Completo) --- */
.portfolio-hero-section {
    background-color: var(--bg-alt);
    /* Gris suave en día, Oscuro en noche */
    color: var(--text-main);
    padding: 60px 0;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.portfolio-hero-title {
    font-family: var(--font-headings);
    font-size: 3rem;
    margin-bottom: 10px;
    color: var(--text-main);
}

.portfolio-hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

.portfolio-full-section {
    padding: 80px 0;
    background-color: var(--bg-body);
}

/* Grid Ajustable para Portafolio */
.portfolio-grid--full {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 30px;
}

/* Tarjeta de Proyecto (Card) */
.portfolio-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 5px 20px var(--shadow-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.portfolio-card:hover {
    transform: translateY(-5px);
    border-color: var(--brand-blue);
}

.portfolio-card .portfolio-item {
    border-radius: 10px 10px 0 0;
    /* Bordes redondeados solo arriba */
    height: 250px;
    /* Altura fija para uniformidad */
}

/* Acciones de la Tarjeta (Botones abajo) */
.portfolio-card-actions {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-card);
    border-top: 1px solid var(--border-color);
}

.portfolio-card-actions .action-link {
    font-family: var(--font-headings);
    font-weight: 700;
    color: var(--text-main);
    text-decoration: none;
    transition: color 0.3s ease;
}

.portfolio-card-actions .action-link:hover {
    color: var(--brand-blue);
}

/* --- Página de Detalle de Proyecto (Caso de Estudio) --- */

/* Hero con Imagen de Fondo (Estilo Inmersivo) */
.project-detail-hero {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    /* Color de respaldo por si la imagen falla */
    background-color: #1a1a1a;
}

.project-hero-overlay {
    /* Capa oscura para garantizar que el texto blanco se lea */
    background-color: rgba(0, 0, 0, 0.7);
    padding: 100px 0;
    text-align: center;
    backdrop-filter: blur(3px);
    /* Efecto moderno de desenfoque */
}

.project-detail-title {
    font-family: var(--font-headings);
    font-size: 3rem;
    margin-bottom: 10px;
    color: #ffffff;
    /* Texto fijo blanco sobre imagen oscura */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.project-detail-subtitle {
    font-size: 1.2rem;
    color: #e0e0e0;
    /* Gris claro fijo */
    max-width: 700px;
    margin: 0 auto;
}

/* Contenido Principal del Proyecto */
.project-detail-content {
    padding: 60px 0;
    background-color: var(--bg-body);
}

.project-detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* Contenido ancho | Sidebar angosto */
    gap: 50px;
}

.project-main-content h2 {
    font-size: 2rem;
    color: var(--brand-blue);
    margin-top: 0;
    margin-bottom: 20px;
    font-family: var(--font-headings);
}

.project-main-content p,
.project-main-content ul {
    line-height: 1.8;
    margin-bottom: 30px;
    color: var(--text-muted);
}

.project-main-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 20px 0;
    box-shadow: 0 5px 15px var(--shadow-color);
}

/* Sidebar del Proyecto (Info Técnica) */
.project-sidebar .sidebar-box {
    background-color: var(--bg-card);
    /* Adaptable */
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 25px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 10px var(--shadow-color);
}

.project-sidebar h4 {
    margin-top: 0;
    border-bottom: 2px solid var(--brand-blue);
    padding-bottom: 10px;
    margin-bottom: 15px;
    color: var(--text-main);
    font-family: var(--font-headings);
}

.project-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.project-sidebar li {
    margin-bottom: 15px;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
}

.project-sidebar li strong {
    color: var(--text-main);
}

/* Etiquetas de Tecnologías/Servicios */
.service-tags {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.service-tags li span {
    background-color: var(--bg-body);
    /* Se hunde sutilmente en la tarjeta */
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Testimonio del Cliente */
.project-testimonial {
    background-color: rgba(1, 86, 172, 0.05);
    /* Azul muy suave */
    border-left: 4px solid var(--brand-blue);
    padding: 20px;
    margin-top: 30px;
    border-radius: 0 8px 8px 0;
}

.project-testimonial blockquote {
    margin: 0;
    font-style: italic;
    color: var(--text-main);
    font-size: 1.05rem;
}

.project-testimonial footer {
    margin-top: 15px;
    font-style: normal;
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: bold;
}

/* CTA Final de Proyecto */
.project-cta-section {
    background-color: var(--bg-alt);
    padding: 60px 0;
    text-align: center;
    border-top: 1px solid var(--border-color);
}

.project-cta-section h2 {
    font-family: var(--font-headings);
    font-size: 2.2rem;
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--text-main);
}

.project-cta-section p {
    max-width: 600px;
    margin: 0 auto 30px auto;
    color: var(--text-muted);
}

/* =========================================================================
   BLOQUE 4: MÓDULOS ESPECIALES (FAQ, LOGOS, IMPRESIÓN)
   ========================================================================= */

/* --- SECCIÓN DE PREGUNTAS FRECUENTES (FAQ) --- */
.faq-section {
    padding: 80px 0;
    background-color: var(--bg-body);
    /* Adaptable */
}

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

.faq-category-title {
    font-family: var(--font-headings);
    margin-top: 50px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
    color: var(--text-main);
}

.faq-category-title:first-of-type {
    margin-top: 0;
}

/* Estilos del Acordeón (Bootstrap Override) */
.accordion-item {
    border: 1px solid var(--border-color);
    border-radius: 8px !important;
    margin-bottom: 15px;
    background-color: var(--bg-card);
    /* Adaptable */
    overflow: hidden;
}

.accordion-header {
    margin: 0;
}

.accordion-button {
    font-family: var(--font-headings);
    font-weight: 700;
    font-size: 1.1rem;

    /* Colores adaptables */
    color: var(--text-main);
    background-color: var(--bg-card);

    border-radius: 0 !important;
    padding: 18px 25px;
    box-shadow: none !important;
    /* Quita el brillo azul default de Bootstrap */
    transition: all 0.3s ease;
}

/* Estado Activo (Desplegado) */
.accordion-button:not(.collapsed) {
    color: var(--brand-blue);
    /* Fondo azul muy suave (funciona en dark/light) */
    background-color: rgba(1, 86, 172, 0.08);
}

/* Flecha del Acordeón */
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333333'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transition: transform 0.3s ease;
}

/* TRUCO DARK MODE: Invertir el color de la flecha negra a blanca */
@media (prefers-color-scheme: dark) {
    .accordion-button::after {
        filter: invert(1) brightness(2);
    }
}

.accordion-body {
    padding: 25px;
    line-height: 1.7;
    color: var(--text-muted);
    background-color: var(--bg-card);
    border-top: 1px solid var(--border-color);
}

/* --- SECCIÓN DE LOGOS Y BRANDING --- */
.logo-section {
    padding: 80px 0;
    background-color: var(--bg-body);
}

.logo-process-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    margin-bottom: 60px;
}

.logo-process-image img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 30px var(--shadow-color);
}

.logo-process-text h2 {
    color: var(--brand-blue);
    font-family: var(--font-headings);
    margin-bottom: 20px;
}

.logo-process-text p {
    color: var(--text-muted);
    line-height: 1.8;
}

/* Galería de Logos (Grid) */
.logo-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.logo-gallery-item {
    /* IMPORTANTE: Fondo blanco fijo para que los logos de clientes siempre se vean */
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logo-gallery-item:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px var(--shadow-color);
    z-index: 2;
}

.logo-gallery-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Asegura que el logo no se recorte */
}

/* --- SECCIÓN DE IMPRESIÓN --- */
.print-section {
    padding: 80px 0;
    background-color: var(--bg-body);
}

.print-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.print-product-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px var(--shadow-color);
    transition: transform 0.3s ease;
}

.print-product-card:hover {
    transform: translateY(-5px);
    border-color: var(--brand-blue);
}

.print-product-image {
    height: 200px;
    overflow: hidden;
    background-color: #f0f0f0;
    /* Fondo neutro por si la imagen carga lento */
}

.print-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.print-product-card:hover .print-product-image img {
    transform: scale(1.1);
}

.print-product-info {
    padding: 25px;
    text-align: center;
}

.print-product-info i {
    font-size: 2rem;
    color: var(--brand-blue);
    margin-bottom: 15px;
}

.print-product-info h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: var(--text-main);
    font-family: var(--font-headings);
}

.print-product-info p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* --- BADGES Y ETIQUETAS (COMPONENTES) --- */

/* Badge de "Oferta" o "Destacado" en tarjetas */
.featured-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--brand-blue);
    color: #ffffff;
    font-family: var(--font-headings);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 5px 15px;
    border-radius: 50px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

/* Badge de Descuento Local (Santa Ana) */
.local-discount-badge {
    font-size: 0.85rem;
    font-weight: 700;

    /* Colores semánticos para éxito/verde */
    color: #0f5132;
    background-color: #d1e7dd;
    border: 1px solid #badbcc;

    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 15px;
    margin-bottom: 20px;
    display: inline-block;
}

/* Ajuste Dark Mode para el badge verde */
@media (prefers-color-scheme: dark) {
    .local-discount-badge {
        background-color: rgba(46, 204, 113, 0.2);
        /* Verde transparente */
        color: #2ecc71;
        /* Verde brillante */
        border-color: rgba(46, 204, 113, 0.3);
    }
}

.local-discount-badge .fa-star {
    margin-right: 5px;
    color: #f1c40f;
    /* Estrella amarilla */
}

/* Footer Links */
.footer-nav {
    margin-bottom: 15px;
}

.footer-nav a {
    color: #a0a0a0;
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: #ffffff;
}

/* =========================================================================
   BLOQUE 5: NAVEGACIÓN MÓVIL Y RESPONSIVIDAD (SISTEMA UNIFICADO)
   ========================================================================= */

/* --- 1. BOTÓN DE HAMBURGUESA (TRIGGER) --- */
.nav-toggle {
    display: none;
    /* Oculto en escritorio */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1002;
    /* Por encima de todo */
    position: relative;
}

.hamburger,
.hamburger::before,
.hamburger::after {
    content: '';
    display: block;
    width: 25px;
    height: 3px;

    /* Color adaptable: Se ve bien en fondo blanco o negro */
    background-color: var(--text-main);

    border-radius: 3px;
    transition: transform 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
}

.hamburger::before {
    transform: translateY(-8px);
}

.hamburger::after {
    transform: translateY(5px);
}

/* --- 2. MENÚ DESPLEGABLE MÓVIL (OVERLAY) --- */
.mobile-nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Fondo adaptable con efecto vidrio (Glassmorphism) */
    background-color: var(--bg-nav);
    /* Respaldo de opacidad para asegurar legibilidad */
    background: rgba(255, 255, 255, 0.98);

    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 1001;

    /* Animación de entrada */
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Ajuste de fondo para Modo Oscuro */
@media (prefers-color-scheme: dark) {
    .mobile-nav-menu {
        background: rgba(18, 18, 18, 0.98);
    }
}

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

.mobile-nav-links li {
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.mobile-nav-links a {
    color: var(--text-main);
    text-decoration: none;
    font-family: var(--font-headings);
    font-size: 2rem;
    font-weight: 700;
    transition: color 0.3s ease;
}

.mobile-nav-links a:hover {
    color: var(--brand-blue);
}

/* Botón de Cierre (X) dentro del menú */
.close-menu {
    position: absolute;
    top: 25px;
    right: 20px;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 2.5rem;
    cursor: pointer;
    padding: 10px;
    transition: transform 0.3s ease;
}

.close-menu:hover {
    transform: rotate(90deg);
    color: var(--brand-red);
}

/* --- 3. ESTADOS ACTIVOS (JS: body.nav-open) --- */
body.nav-open {
    overflow: hidden;
    /* Bloquea el scroll del fondo */
}

body.nav-open .mobile-nav-menu {
    transform: translateX(0);
    /* Desliza el menú a la vista */
}

/* Animación en cascada para los enlaces */
body.nav-open .mobile-nav-links li {
    opacity: 1;
    transform: translateY(0);
}

body.nav-open .mobile-nav-links li:nth-child(1) {
    transition-delay: 0.1s;
}

body.nav-open .mobile-nav-links li:nth-child(2) {
    transition-delay: 0.2s;
}

body.nav-open .mobile-nav-links li:nth-child(3) {
    transition-delay: 0.3s;
}

body.nav-open .mobile-nav-links li:nth-child(4) {
    transition-delay: 0.4s;
}

body.nav-open .mobile-nav-links li:nth-child(5) {
    transition-delay: 0.5s;
}

/* =========================================================================
   BLOQUE 6: COMPONENTES DE DETALLE DE SERVICIO (RECUPERACIÓN)
   ========================================================================= */

/* --- Layout Principal (Grid) --- */
.service-layout-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    /* Izquierda ancha, Derecha estrecha */
    gap: 50px;
    align-items: start;
}

/* --- Sidebar Sticky (Barra Lateral) --- */
.service-sidebar {
    position: sticky;
    top: 100px;
    /* Se queda fijo al bajar */
}

/* --- Tarjeta de Transparencia Financiera --- */
.transparency-card {
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 10px 40px var(--shadow-color);
    border: 1px solid var(--border-color);
    overflow: hidden;
    margin-bottom: 20px;
}

.transparency-card .card-header {
    background-color: var(--text-main);
    /* Oscuro en día, Claro en noche */
    padding: 20px;
    text-align: center;
}

.transparency-card .card-header h3 {
    color: var(--bg-body);
    /* Texto inverso al fondo */
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.transparency-card .card-body {
    padding: 30px;
}

/* --- Tabla de Desglose de Precios --- */
.price-breakdown-table {
    width: 100%;
    margin-bottom: 20px;
    font-size: 0.95rem;
    border-collapse: collapse;
}

.price-breakdown-table td {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
}

.price-breakdown-table .text-right {
    text-align: right;
    color: var(--text-main);
    font-weight: 500;
}

.price-breakdown-table .row-total td {
    border-bottom: none;
    padding-top: 15px;
    font-size: 1.1rem;
    color: var(--text-main);
    font-weight: 700;
    border-top: 2px solid var(--text-main);
}

.big-total {
    font-size: 1.8rem !important;
    font-weight: 700;
    color: var(--brand-blue) !important;
}

.vat-note {
    font-size: 0.75rem;
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* --- Caja de Condiciones (Aspectos Importantes) --- */
.conditions-section h3 {
    font-size: 1.3rem;
    color: var(--text-main);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.conditions-section h3 i {
    color: #f39c12;
    /* Naranja alerta */
}

.conditions-box {
    /* Fondo amarillo suave en modo claro */
    background-color: #fff8e1;
    border-left: 4px solid #f39c12;
    padding: 25px;
    border-radius: 0 8px 8px 0;
    color: #5d4037;
    /* Marrón oscuro para contraste */
}

/* Adaptación Dark Mode para la caja amarilla */
@media (prefers-color-scheme: dark) {
    .conditions-box {
        background-color: rgba(243, 156, 18, 0.15);
        /* Amarillo transparente */
        color: #f39c12;
        /* Texto amarillo brillante */
        border: 1px solid rgba(243, 156, 18, 0.3);
        border-left: 4px solid #f39c12;
    }
}

.conditions-box ul {
    padding-left: 20px;
    margin: 0;
}

.conditions-box li {
    margin-bottom: 15px;
    line-height: 1.6;
}

.highlight-warning {
    background-color: rgba(255, 84, 84, 0.15);
    color: var(--brand-red);
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

/* --- Métodos de Pago y Soporte --- */
.payment-methods {
    margin-top: 25px;
    text-align: center;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}

.payment-methods p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.payment-methods .icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    font-size: 1.5rem;
    color: var(--text-muted);
}

.support-box {
    text-align: center;
    background-color: var(--bg-body);
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--border-color);
}

.support-box i {
    font-size: 2rem;
    color: var(--brand-green);
}

.support-box p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.3;
    text-align: left;
    color: var(--text-muted);
}

.support-box a {
    color: var(--text-main);
    text-decoration: none;
}

/* --- Visualización de Precio "Cotizar" --- */
.quote-price-display {
    text-align: center;
    margin-bottom: 20px;
    background: var(--bg-body);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.quote-price-display .label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-muted);
}

.quote-price-display .value {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--brand-blue);
    margin: 5px 0;
}

/* --- BOTÓN MOSAICO (VITRAL) - REINCORPORADO --- */
.btn-maqui-mosaic {
    position: relative;
    display: block;
    width: 100%;
    height: 55px;
    text-decoration: none;
    border-radius: 8px;
    overflow: hidden;
    background-color: #384043 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    isolation: isolate;
    color-scheme: only light;
}

.btn-maqui-mosaic .btn-text {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-family: var(--font-headings);
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.btn-maqui-mosaic .mosaic-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.btn-maqui-mosaic svg {
    width: 100%;
    height: 100%;
    display: block;
}

.shard {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 1px;
}

.s1 {
    fill: #0156ac !important;
}

.s2 {
    fill: #ff5454 !important;
}

.s3 {
    fill: #ffcf00 !important;
}

.s4 {
    fill: #34a853 !important;
}

.btn-maqui-mosaic:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.btn-maqui-mosaic:hover .s1 {
    transform: translate(-5px, -5px);
}

.btn-maqui-mosaic:hover .s2 {
    transform: translate(5px, -5px);
}

.btn-maqui-mosaic:hover .s3 {
    transform: translate(5px, 5px);
}

.btn-maqui-mosaic:hover .s4 {
    transform: translate(-5px, 5px);
}

/* =========================================================================
   ESTILOS PARA TOOLTIPS DE PAGO (INTERACTIVOS)
   ========================================================================= */

.payment-methods {
    margin-top: 25px;
    text-align: center;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.payment-methods p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 15px;
    font-weight: 500;
}

.payment-icons-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    position: relative;
    /* Necesario para z-index */
}

/* El contenedor del icono */
.payment-item {
    position: relative;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.payment-item:hover {
    background-color: var(--bg-body);
    transform: translateY(-3px);
}

/* Estilos de los Iconos */
.payment-item i {
    font-size: 1.8rem;
    color: var(--text-muted);
    /* Color por defecto apagado */
    transition: color 0.3s ease;
}

/* Colores al hacer hover (Identidad de cada método) */
.payment-item:hover .icon-bank {
    color: #e74c3c;
}

/* Rojo BAC/Agrícola */
.payment-item:hover .icon-btc {
    color: #f7931a;
}

/* Naranja Bitcoin */
.payment-item:hover .icon-cash {
    color: #2ecc71;
}

/* Verde Efectivo */

/* --- EL TOOLTIP (GLOBO DE INFORMACIÓN) --- */
.payment-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 120%;
    /* Aparece arriba del icono */
    left: 50%;
    transform: translateX(-50%) translateY(10px);

    width: 200px;
    /* Ancho del globo */
    background-color: #2d3436;
    /* Fondo oscuro siempre para contraste */
    color: #ffffff;
    text-align: center;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    line-height: 1.4;
    z-index: 100;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

    /* Flechita abajo del tooltip */
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.payment-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    /* Abajo del tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #2d3436 transparent transparent transparent;
}

.payment-tooltip strong {
    display: block;
    color: var(--brand-yellow);
    /* Destacar título */
    margin-bottom: 4px;
    font-size: 0.9rem;
}

.payment-tooltip p {
    color: #e0e0e0;
    margin: 0;
    font-size: 0.75rem;
}

/* --- ANIMACIÓN DE APARICIÓN --- */
.payment-item:hover .payment-tooltip,
.payment-item:focus .payment-tooltip {
    /* Soporte para tabulación/móvil */
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.payment-note small {
    display: block;
    margin-top: 10px;
    font-style: italic;
    opacity: 0.7;
}

/* =========================================================================
   ESTILOS PARA TOOLTIPS DE PAGO (INTERACTIVOS)
   ========================================================================= */

.payment-methods {
    margin-top: 25px;
    text-align: center;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.payment-methods p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 15px;
    font-weight: 500;
}

.payment-icons-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    position: relative;
    /* Necesario para z-index */
}

/* El contenedor del icono */
.payment-item {
    position: relative;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.payment-item:hover {
    background-color: var(--bg-body);
    transform: translateY(-3px);
}

/* Estilos de los Iconos */
.payment-item i {
    font-size: 1.8rem;
    color: var(--text-muted);
    /* Color por defecto apagado */
    transition: color 0.3s ease;
}

/* Colores al hacer hover (Identidad de cada método) */
.payment-item:hover .icon-bank {
    color: #e74c3c;
}

/* Rojo BAC/Agrícola */
.payment-item:hover .icon-btc {
    color: #f7931a;
}

/* Naranja Bitcoin */
.payment-item:hover .icon-cash {
    color: #2ecc71;
}

/* Verde Efectivo */

/* --- EL TOOLTIP (GLOBO DE INFORMACIÓN) --- */
.payment-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 120%;
    /* Aparece arriba del icono */
    left: 50%;
    transform: translateX(-50%) translateY(10px);

    width: 200px;
    /* Ancho del globo */
    background-color: #2d3436;
    /* Fondo oscuro siempre para contraste */
    color: #ffffff;
    text-align: center;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    line-height: 1.4;
    z-index: 100;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

    /* Flechita abajo del tooltip */
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.payment-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    /* Abajo del tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #2d3436 transparent transparent transparent;
}

.payment-tooltip strong {
    display: block;
    color: var(--brand-yellow);
    /* Destacar título */
    margin-bottom: 4px;
    font-size: 0.9rem;
}

.payment-tooltip p {
    color: #e0e0e0;
    margin: 0;
    font-size: 0.75rem;
}

/* --- ANIMACIÓN DE APARICIÓN --- */
.payment-item:hover .payment-tooltip,
.payment-item:focus .payment-tooltip {
    /* Soporte para tabulación/móvil */
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.payment-note small {
    display: block;
    margin-top: 10px;
    font-style: italic;
    opacity: 0.7;
}

/* CORRECCIÓN DE VISIBILIDAD DE ICONOS */
.payment-item i {
    display: inline-block;
    /* Asegura que el navegador respete el tamaño */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
    /* Fuerza la fuente */
    font-weight: 900;
    /* Necesario para iconos sólidos (fas) */

    /* Forzamos un color gris oscuro visible para probar */
    color: #555555 !important;

    font-size: 2rem;
    /* Un poco más grandes */
    line-height: 1;
}

/* Aseguramos que en modo oscuro se vean claros */
@media (prefers-color-scheme: dark) {
    .payment-item i {
        color: #cccccc !important;
    }
}

/* Mantenemos los colores al pasar el mouse */
.payment-item:hover .icon-bank {
    color: #e74c3c !important;
}

.payment-item:hover .icon-btc {
    color: #f7931a !important;
}

.payment-item:hover .icon-cash {
    color: #2ecc71 !important;
}

/* CORRECCIÓN DE VISIBILIDAD DE ICONOS */
.payment-item i {
    display: inline-block;
    /* Asegura que el navegador respete el tamaño */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
    /* Fuerza la fuente */
    font-weight: 900;
    /* Necesario para iconos sólidos (fas) */

    /* Forzamos un color gris oscuro visible para probar */
    color: #555555 !important;

    font-size: 2rem;
    /* Un poco más grandes */
    line-height: 1;
}

/* Aseguramos que en modo oscuro se vean claros */
@media (prefers-color-scheme: dark) {
    .payment-item i {
        color: #cccccc !important;
    }
}

/* Mantenemos los colores al pasar el mouse */
.payment-item:hover .icon-bank {
    color: #e74c3c !important;
}

.payment-item:hover .icon-btc {
    color: #f7931a !important;
}

.payment-item:hover .icon-cash {
    color: #2ecc71 !important;
}

/* =========================================================================
   ESTILOS PARA ICONOS SVG DE PAGO (CORREGIDO)
   ========================================================================= */

.payment-icons-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    position: relative;
}

.payment-item {
    position: relative;
    cursor: pointer;
    padding: 12px;
    border-radius: 8px;
    transition: transform 0.2s ease, background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-item:hover {
    background-color: var(--bg-body);
    transform: translateY(-3px);
}

/* Estilos base del SVG */
.payment-icon {
    width: 32px;
    /* Tamaño fijo */
    height: 32px;
    fill: var(--text-muted);
    /* Color base adaptable */
    transition: fill 0.3s ease;
}

/* Colores al hacer hover (Relleno SVG) */
.payment-item:hover .icon-bank {
    fill: #e74c3c;
}

/* Rojo */
.payment-item:hover .icon-btc {
    fill: #f7931a;
}

/* Naranja */
.payment-item:hover .icon-cash {
    fill: #2ecc71;
}

/* =========================================================================
   FRANJA FILOSÓFICA (UBUNTU STRIP)
   ========================================================================= */

/* Ajuste al Header Principal para acomodar la franja */
.main-header {
    padding-bottom: 0;
    /* Quitamos padding abajo para que la franja pegue al borde */
    border-bottom: none;
    /* La franja será el nuevo borde */
    display: flex;
    flex-direction: column;
}

.philosophy-strip {
    width: 100%;
    background-color: var(--brand-blue);
    /* Azul Maquidev */
    color: #ffffff;
    /* Texto blanco siempre */
    text-align: center;
    padding: 4px 0;
    font-size: 0.75rem;
    /* Pequeño y sutil */
    font-weight: 500;
    letter-spacing: 1.5px;
    /* Espaciado elegante */
    text-transform: uppercase;
    cursor: help;
    /* Cambia el cursor a "?" para invitar a la curiosidad */
    transition: all 0.3s ease;
    position: relative;
    z-index: 1002;
}

.philosophy-strip span {
    opacity: 0.9;
    font-family: var(--font-headings);
    /* Fuente Montserrat */
    font-style: italic;
}

/* Efecto al pasar el mouse: Se ilumina un poco */
.philosophy-strip:hover {
    background-color: var(--brand-red);
    /* Un guiño de color al interactuar */
    letter-spacing: 3px;
    /* Se expande sutilmente ("respiración") */
}

/* =========================================================================
   ESTILOS ZAPE ZONE TEASER (DISRUPTIVO)
   ========================================================================= */

.zape-zone-teaser {
    background-color: #384043;
    /* El Gris Oscuro de Maquidev */
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    color: #ffffff;
}

.zape-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Tipografía y Textos */
.zape-badge {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffcf00;
    /* Amarillo Maqui/Zape */
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 20px;
    display: inline-block;
}

.zape-title {
    font-family: var(--font-headings);
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 25px;
    color: #ffffff;
}

.zape-title .text-highlight {
    color: #9b59b6;
    /* Morado Zape */
    position: relative;
    z-index: 1;
}

/* Subrayado amarillo estilo "marcador" detrás de la palabra Zape */
.zape-title .text-highlight::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 15px;
    background-color: #ffcf00;
    /* Amarillo Zape */
    z-index: -1;
    transform: rotate(-2deg);
    opacity: 0.8;
}

.zape-description {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 20px;
    opacity: 0.95;
    max-width: 500px;
}

.zape-description-secondary {
    font-size: 1rem;
    color: #bdc3c7;
    /* Gris claro */
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 480px;
}

/* Botón Zape (Híbrido Morado/Amarillo) */
.btn-zape {
    background-color: #9b59b6;
    /* Morado */
    color: white;
    padding: 15px 35px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid #9b59b6;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-zape:hover {
    background-color: transparent;
    color: #ffcf00;
    /* Amarillo al hover */
    border-color: #ffcf00;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(155, 89, 182, 0.3);
}

/* --- ELEMENTO VISUAL (LAS TARJETAS FLOTANTES) --- */
.zape-visual-container {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zape-card-stack {
    position: relative;
    width: 280px;
    height: 380px;
}

.zape-card {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    transition: all 0.5s ease;
}

/* Tarjeta Frontal (La UI simulada) */
.card-front {
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
    z-index: 3;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Elementos internos de la tarjeta simulada */
.zape-card-header {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.circle-profile {
    width: 50px;
    height: 50px;
    background: #ddd;
    border-radius: 50%;
}

.lines-text {
    flex: 1;
    height: 10px;
    background: #eee;
    border-radius: 5px;
    margin-top: 10px;
    width: 60%;
}

.zape-card-body {
    flex: 1;
    background: #333;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    position: relative;
    overflow: hidden;
}

.zape-card-body::before {
    content: '';
    position: absolute;
    width: 150%;
    height: 150%;
    background: linear-gradient(45deg, #9b59b6, #8e44ad);
    opacity: 0.3;
}

.zape-card-footer {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.pill-price {
    width: 80px;
    height: 30px;
    background: #ffcf00;
    border-radius: 50px;
}

.pill-action {
    width: 100px;
    height: 30px;
    background: #384043;
    border-radius: 50px;
}

/* Tarjetas traseras (Decorativas) */
.card-mid {
    background-color: #9b59b6;
    /* Morado */
    z-index: 2;
    top: 15px;
    left: 15px;
    opacity: 0.6;
    transform: rotate(5deg);
}

.card-back {
    background-color: #ffcf00;
    /* Amarillo */
    z-index: 1;
    top: 30px;
    left: 30px;
    opacity: 0.4;
    transform: rotate(10deg);
}

/* Animación al hacer hover en la sección */
.zape-zone-teaser:hover .card-front {
    transform: translateY(-10px) rotate(-2deg);
}

.zape-zone-teaser:hover .card-mid {
    transform: translate(20px, 10px) rotate(8deg);
}

.zape-zone-teaser:hover .card-back {
    transform: translate(40px, 20px) rotate(15deg);
}

/* =========================================================================
   PÁGINAS DE ERROR (404 / 500)
   ========================================================================= */

.error-page-container {
    min-height: 70vh;
    /* Asegura que ocupe buena parte de la pantalla */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-body);
    text-align: center;
    padding: 60px 20px;
}

.error-content {
    max-width: 600px;
}

.error-icon {
    font-size: 5rem;
    color: var(--brand-yellow);
    /* Amarillo Maqui para alerta suave */
    margin-bottom: 20px;
    opacity: 0.8;
}

/* Animación suave para el error 500 */
.error-icon-spin i {
    animation: spin-slow 10s infinite linear;
    color: var(--brand-red);
    /* Rojo para error de servidor */
}

.error-code {
    font-family: var(--font-headings);
    font-size: 6rem;
    line-height: 1;
    margin: 0;
    color: var(--text-muted);
    opacity: 0.2;
    /* Muy sutil de fondo */
    font-weight: 900;
}

.error-title {
    font-family: var(--font-headings);
    font-size: 2rem;
    color: var(--text-main);
    margin-top: -30px;
    /* Superpone un poco sobre el número grande */
    margin-bottom: 20px;
}

.error-description {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 40px;
    line-height: 1.6;
}

.error-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* =========================================================================
   ESTILOS BOTÓN NAVEGACIÓN ZAPE ZONE
   ========================================================================= */

.nav-btn-zape {
    background-color: #9b59b6;
    /* Morado Zape */
    color: #ffcf00 !important;
    /* Amarillo Zape (Forzado) */
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 800;
    /* Extra bold */
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    border: 2px solid #9b59b6;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Efecto rebote */
    box-shadow: 0 4px 10px rgba(155, 89, 182, 0.3);
}

/* Efecto Hover (Escritorio) */
.nav-btn-zape:hover {
    background-color: transparent;
    color: #9b59b6 !important;
    /* Texto morado */
    border-color: #ffcf00;
    /* Borde amarillo */
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 15px rgba(255, 207, 0, 0.4);
}

.nav-btn-zape i {
    font-size: 0.9em;
    /* El rayo un poco más pequeño */
}

/* Ajuste específico para el Menú Móvil */
.nav-btn-zape.mobile {
    font-size: 1.5rem;
    /* Más grande en celular */
    padding: 12px 30px;
    background-color: transparent;
    border: 2px solid #ffcf00;
    color: #ffcf00 !important;
}

.nav-btn-zape.mobile:active {
    background-color: #ffcf00;
    color: #000 !important;
}

/* =========================================================================
   UNIVERSIDAD MAQUIDEV (DOCUMENTATION LAYOUT)
   ========================================================================= */

.uni-page-wrapper {
    background-color: var(--bg-body);
    min-height: 100vh;
    padding-top: 40px;
    padding-bottom: 80px;
}

.uni-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    /* Sidebar fijo | Contenido flexible */
    gap: 40px;
    align-items: start;
}

/* --- SIDEBAR --- */
.uni-sidebar {
    background-color: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    position: sticky;
    top: 100px;
    /* Sticky al hacer scroll */
    max-height: 80vh;
    overflow-y: auto;
}

.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--brand-blue);
}

.close-sidebar-mobile {
    display: none;
}

/* Acordeón del Menú */
.sidebar-category {
    border-bottom: 1px solid var(--border-color);
}

.cat-title {
    padding: 15px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--text-main);
    transition: background 0.2s;
}

.cat-title:hover {
    background-color: var(--bg-body);
}

.cat-title i {
    color: var(--text-muted);
    margin-right: 8px;
}

.cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    /* Oculto por defecto */
    background-color: var(--bg-body);
}

/* Estado Abierto */
.sidebar-category.open .cat-list {
    display: block;
}

.sidebar-category.open .arrow {
    transform: rotate(180deg);
}

.cat-list li a {
    display: block;
    padding: 10px 20px 10px 45px;
    /* Indentación */
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    border-left: 3px solid transparent;
}

.cat-list li a:hover,
.cat-list li a.active {
    color: var(--brand-blue);
    background-color: rgba(1, 86, 172, 0.05);
    border-left-color: var(--brand-blue);
}

/* --- CONTENIDO PRINCIPAL (HOJA DE PAPEL) --- */
.content-paper {
    background-color: var(--bg-card);
    padding: 50px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 20px var(--shadow-color);
}

.article-title {
    font-family: var(--font-headings);
    font-size: 2.5rem;
    color: var(--brand-blue);
    margin-top: 0;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 20px;
}

.article-body {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-main);
}

.article-body h3 {
    margin-top: 30px;
    color: var(--text-main);
}

.article-body ul,
.article-body ol {
    padding-left: 20px;
    margin-bottom: 20px;
}

.article-body li {
    margin-bottom: 10px;
}

/* Bienvenida */
.uni-welcome {
    text-align: center;
    padding: 40px;
}

.uni-cta-box {
    margin-top: 40px;
    background: #fff3cd;
    padding: 20px;
    border-radius: 8px;
    color: #856404;
    display: inline-block;
}

/* --- MÓVIL --- */
.mobile-topic-toggle {
    display: none;
    /* Oculto en escritorio */
    background-color: var(--brand-blue);
    color: white;
    padding: 10px 20px;
    margin: 0 20px 20px 20px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}

/* --- LÓGICA VISUAL DEL ACORDEÓN --- */
.cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    /* Oculto por defecto */
    background-color: var(--bg-body);
}

/* Estado Abierto (La magia ocurre aquí) */
.sidebar-category.open .cat-list {
    display: block;
    /* Se muestra al tener la clase open */
    animation: slideDown 0.3s ease;
}

.sidebar-category.open .arrow {
    transform: rotate(180deg);
    /* La flecha gira */
}

/* =========================================================================
   SECCIÓN DE NOTICIAS (BLOG LAYOUT)
   ========================================================================= */

.news-page-wrapper {
    background-color: var(--bg-body);
    padding-bottom: 80px;
}

/* --- Navbar de Categorías --- */
.news-category-nav {
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
    margin-bottom: 40px;
    white-space: nowrap;
    overflow-x: auto;
    /* Scroll horizontal en móvil */
}

.cat-pill {
    display: inline-block;
    padding: 8px 20px;
    margin-right: 10px;
    background-color: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.cat-pill:hover,
.cat-pill.active {
    background-color: var(--brand-blue);
    color: white;
    border-color: var(--brand-blue);
}

/* --- Layout Principal (30/70) --- */
.news-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    /* Sidebar fijo 300px | Resto flexible */
    gap: 40px;
    align-items: start;
}

/* --- Sidebar (Filtros) --- */
.news-sidebar {
    position: sticky;
    top: 100px;
}

.sidebar-widget {
    background-color: var(--bg-card);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 25px;
}

.sidebar-widget h3 {
    margin-top: 0;
    font-size: 1.1rem;
    margin-bottom: 15px;
    color: var(--text-main);
    border-bottom: 2px solid var(--brand-yellow);
    display: inline-block;
    padding-bottom: 5px;
}

.search-form {
    display: flex;
    gap: 5px;
}

.search-form button {
    background-color: var(--brand-blue);
    color: white;
    border: none;
    border-radius: 5px;
    width: 40px;
    cursor: pointer;
}

.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-chip {
    font-size: 0.8rem;
    color: var(--text-muted);
    background-color: var(--bg-body);
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
    transition: color 0.2s;
}

.tag-chip:hover {
    color: var(--brand-blue);
}

.sidebar-promo {
    background: linear-gradient(135deg, var(--brand-blue), #003d80);
    color: white;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
}

.sidebar-promo h4 {
    color: white;
    margin-top: 0;
}

.sidebar-promo p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

/* --- Feed de Noticias (Cards) --- */
.news-card-horizontal {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 30px;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    /* En móvil es columna, en desktop ajustaremos si quieres horizontal real */
}

.news-card-horizontal:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px var(--shadow-color);
}

.news-img-container {
    position: relative;
    height: 250px;
    /* Altura fija imagen */
    overflow: hidden;
}

.news-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-card-horizontal:hover img {
    transform: scale(1.05);
}

.news-category-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--brand-yellow);
    color: #333;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.news-content {
    padding: 25px;
}

.news-title-link {
    text-decoration: none;
}

.news-title-link h2 {
    margin-top: 0;
    font-size: 1.5rem;
    color: var(--text-main);
    transition: color 0.2s;
}

.news-title-link h2:hover {
    color: var(--brand-blue);
}

.news-excerpt {
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}

.news-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.meta-info span {
    margin-right: 15px;
}

.mini-tag {
    color: var(--brand-blue);
    font-weight: 500;
}

/* --- Paginación --- */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 50px;
}

.page-btn,
.page-num {
    padding: 8px 15px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-card);
    color: var(--text-main);
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.2s;
}

.page-num.active,
.page-btn:hover,
.page-num:hover {
    background-color: var(--brand-blue);
    color: white;
    border-color: var(--brand-blue);
}

/* Responsive */
@media (max-width: 992px) {
    .news-layout {
        grid-template-columns: 1fr;
        /* Una columna */
    }

    .news-sidebar {
        order: -1;
        /* Filtros arriba en móvil? O abajo? Usualmente arriba o colapsados */
        position: static;
        margin-bottom: 40px;
        display: none;
        /* Opcional: Ocultar filtros en móvil o hacer un botón "Mostrar Filtros" */
    }

    /* Si quieres mostrar filtros en movil, quita el display:none */
}

/* Animación suave opcional */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 992px) {
    .uni-layout {
        grid-template-columns: 1fr;
    }

    .mobile-topic-toggle {
        display: block;
    }

    .uni-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        /* Oculto a la izquierda */
        width: 80%;
        height: 100%;
        z-index: 2000;
        transition: left 0.3s ease;
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2);
    }

    .uni-sidebar.mobile-visible {
        left: 0;
    }

    .close-sidebar-mobile {
        display: block;
        background: none;
        border: none;
        font-size: 1.5rem;
        color: var(--text-main);
    }

    .content-paper {
        padding: 30px;
    }

    .article-title {
        font-size: 2rem;
    }
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Ajuste Móvil */
@media (max-width: 768px) {
    .error-code {
        font-size: 4rem;
    }

    .error-title {
        font-size: 1.5rem;
        margin-top: -20px;
    }
}

/* Responsive */
@media (max-width: 992px) {
    .zape-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .zape-description,
    .zape-description-secondary {
        margin: 0 auto 20px auto;
    }

    .zape-visual-container {
        margin-top: 40px;
    }
}

/* Ajuste para Modo Oscuro */
@media (prefers-color-scheme: dark) {
    .philosophy-strip {
        /* En modo oscuro, quizás quieras que brille un poco más */
        box-shadow: 0 2px 10px rgba(1, 86, 172, 0.3);
    }
}

/* Verde */

/* Ajuste para Modo Oscuro */
@media (prefers-color-scheme: dark) {
    .payment-icon {
        fill: #a0a0a0;
        /* Gris claro base en modo oscuro */
    }
}

/* ... (El resto de estilos del .payment-tooltip se mantiene igual) ... */

/* =========================================================================
   MEDIA QUERIES CONSOLIDADAS (RESPONSIVIDAD)
   ========================================================================= */

/* --- TABLETS Y PANTALLAS MEDIANAS (Max 992px) --- */
@media (max-width: 992px) {

    /* Tipografía */
    .hero-title {
        font-size: 2.8rem;
    }

    .section-title {
        font-size: 2.2rem;
    }

    /* Layouts Generales */
    .about-container,
    .contact-container,
    .logo-process-grid,
    .print-intro-grid {
        grid-template-columns: 1fr;
        /* Todo a una columna */
        text-align: center;
        gap: 40px;
    }

    /* Ajustes específicos */
    .about-text {
        text-align: center;
    }

    .contact-container {
        padding: 30px;
    }

    /* Detalle de Servicio y Proyecto */
    .service-layout-grid,
    .project-detail-grid {
        grid-template-columns: 1fr;
    }

    .service-sidebar,
    .project-sidebar {
        position: static;
        /* Quitar sticky en móvil */
        order: -1;
        /* Poner sidebar (precio/info) primero */
        margin-bottom: 40px;
    }
}

/* --- MÓVILES (Max 768px) --- */
@media (max-width: 768px) {

    /* Navegación */
    .nav-menu-desktop {
        display: none;
    }

    /* Ocultar menú escritorio */
    .nav-toggle {
        display: block;
    }

    /* Mostrar hamburguesa */

    /* Hero */
    .hero-content {
        flex-direction: column;
        text-align: center;
    }

    .hero-visual {
        margin-top: 40px;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    /* Grids a 1 columna */
    .services-grid,
    .portfolio-grid,
    .portfolio-grid--full,
    .print-products-grid,
    .logo-gallery-grid {
        grid-template-columns: 1fr;
    }

    /* Tarjetas de Detalle de Servicio */
    .service-detail-card {
        grid-template-columns: 1fr;
        grid-template-areas: "icon" "text" "action";
        text-align: center;
        padding: 25px;
    }

    .service-detail-icon {
        margin: 0 auto;
    }

    .service-detail-action {
        align-items: center;
    }

    /* Botones full width */
    .btn-block-mobile {
        display: block;
        width: 100%;
    }

    /* Ajustes de texto */
    .text-justify-neat {
        text-align: left;
    }

    /* Justificado se ve mal en pantallas muy angostas */

    /* Tabs Scroll */
    .tabs-nav {
        justify-content: flex-start;
        /* Alinear al inicio para scroll natural */
        flex-wrap: nowrap;
        /* No envolver, permitir scroll */
    }

    .tab-link {
        white-space: nowrap;
        font-size: 0.9rem;
    }
}