:root {

    --primary: #003366;
    --primary-dark: #002244;

    --accent: #FF6B00;

    --blue: #00A8FF;

    --bg: #F5F7FA;

    --white: #FFFFFF;

    --text: #1E293B;

    --muted: #64748B;

    --border: #E2E8F0;

}


* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


body {

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    color: var(--text);

}


/* =========================================
   LOGIN
========================================= */

.login-body {
    min-height: 100vh;
    background: linear-gradient(
        135deg,
        #eaf0f4,
        #dce5ec
    );
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-container {
    width: 100%;
    max-width: 440px;
    padding: 25px;
}

.login-card {
    background: white;
    border-radius: 28px;
    padding: 45px 40px;
    box-shadow: 0 25px 60px rgba(10, 46, 70, 0.08);
}

.login-logo {
    text-align: center;
    margin-bottom: 25px;
}

.login-logo img {
    width: 190px;
    max-width: 100%;
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header h1 {
    font-size: 28px;
    color: #0a2e46;
    margin-bottom: 8px;
}

.login-header p {
    color: #5c7285;
    font-size: 14px;
}

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

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #0a2e46;
    margin-bottom: 8px;
}

.input-wrapper {
    position: relative;
}

.input-wrapper > i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #8fa0b0;
}

.input-wrapper input {
    width: 100%;
    height: 52px;
    border: 1px solid #d0dbe3;
    border-radius: 12px;
    padding: 0 48px;
    font-family: inherit;
    outline: none;
    transition: .2s;
    color: #0a2e46;
}

.input-wrapper input:focus {
    border-color: #0a3d59;
    box-shadow: 0 0 0 3px rgba(10, 61, 89, 0.12);
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    cursor: pointer;
    color: #8fa0b0;
}

.login-button {
    width: 100%;
    height: 54px;
    border: none;
    border-radius: 13px;
    background: #0a3d59;
    color: white;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: .2s;
}

.login-button:hover {
    background: #06283b;
    transform: translateY(-1px);
}

.login-error {
    color: #dc2626;
    font-size: 13px;
    margin-bottom: 15px;
    min-height: 18px;
}

.login-footer {
    display: flex;
    justify-content: space-between;
    color: #5c7285;
    font-size: 11px;
    margin-top: 20px;
}

/* =========================================
   DASHBOARD
========================================= */

.dashboard-body {

    min-height: 100vh;

    background: var(--bg);

    display: flex;

}


.sidebar {

    width: 270px;

    min-height: 100vh;

    background: var(--primary);

    color: white;

    padding: 25px 18px;

    display: flex;

    flex-direction: column;

    position: fixed;

    left: 0;

    top: 0;

    bottom: 0;

}


.sidebar-logo {

    padding:
        5px 10px 25px;

    border-bottom:
        1px solid
        rgba(255,255,255,.12);

}


.sidebar-logo img {

    width: 175px;

    max-width: 100%;

}


.sidebar-user {

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        22px 10px;

    border-bottom:
        1px solid
        rgba(255,255,255,.12);

}


.user-avatar {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: var(--accent);

    display: flex;

    align-items: center;

    justify-content: center;

}


.sidebar-user strong {

    display: block;

    font-size: 13px;

}


.sidebar-user small {

    display: block;

    margin-top: 3px;

    color:
        rgba(255,255,255,.6);

    font-size: 11px;

}


.sidebar-nav {

    flex: 1;

    padding-top: 20px;

}


.sidebar-nav a {

    display: flex;

    align-items: center;

    gap: 13px;

    color:
        rgba(255,255,255,.72);

    text-decoration: none;

    padding:
        12px 13px;

    border-radius: 11px;

    margin-bottom: 5px;

    font-size: 13px;

    transition: .2s;

}


.sidebar-nav a:hover,
.sidebar-nav a.active {

    background:
        rgba(255,255,255,.1);

    color: white;

}


.sidebar-nav a i {

    width: 20px;

    text-align: center;

    color: var(--accent);

}


.nav-section-title {

    display: block;

    color:
        rgba(255,255,255,.35);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    padding:
        10px 13px;

}


.logout-button {

    border: none;

    background:
        rgba(255,255,255,.08);

    color: white;

    border-radius: 11px;

    padding: 13px;

    font-family: inherit;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

}


.logout-button:hover {

    background:
        rgba(255,255,255,.15);

}


.dashboard-main {

    margin-left: 270px;

    width: calc(100% - 270px);

    padding: 45px 50px;

}


.dashboard-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 40px;

}


.dashboard-label {

    color: var(--accent);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.dashboard-header h1 {

    font-size: 34px;

    color: var(--primary);

    margin:
        8px 0;

}


.dashboard-header p {

    color: var(--muted);

    font-size: 14px;

}


/* =========================================
   CARDS
========================================= */

.dashboard-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;

}


.dashboard-card {

    background: white;

    border:
        1px solid var(--border);

    border-radius: 22px;

    padding: 28px;

    text-decoration: none;

    color: var(--text);

    position: relative;

    min-height: 220px;

    transition: .25s;

}


.dashboard-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.08);

    border-color:
        rgba(0,168,255,.3);

}


.dashboard-icon {

    width: 64px;

    height: 64px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 27px;

    margin-bottom: 22px;

}


.dashboard-icon.orange {

    background:
        #FFF0E7;

    color: var(--accent);

}


.dashboard-icon.blue {

    background:
        #E7F7FF;

    color: var(--blue);

}


.dashboard-icon.navy {

    background:
        #E8EEF5;

    color: var(--primary);

}


.dashboard-icon.teal {

    background:
        #E6F7F5;

    color: #008F82;

}


.dashboard-icon.dark {

    background:
        #E8E8E8;

    color: #333;

}


.dashboard-card h2 {

    color: var(--primary);

    font-size: 17px;

    margin-bottom: 9px;

}


.dashboard-card p {

    color: var(--muted);

    font-size: 13px;

    line-height: 1.6;

}


.card-arrow {

    position: absolute;

    right: 25px;

    bottom: 25px;

    color: var(--blue);

}


/* =========================================
   BOTONES
========================================= */

.primary-action {

    background: var(--accent);

    border: none;

    color: white;

    padding:
        13px 20px;

    border-radius: 11px;

    font-family: inherit;

    font-weight: 700;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 9px;

}


.primary-action:hover {

    background: #e85d00;

}


.secondary-action {

    background: #EEF2F7;

    border: none;

    color: var(--text);

    padding:
        13px 20px;

    border-radius: 11px;

    font-family: inherit;

    font-weight: 600;

    cursor: pointer;

}


/* =========================================
   TABLA USUARIOS
========================================= */

.users-table-container {

    background: white;

    border:
        1px solid var(--border);

    border-radius: 20px;

    overflow: hidden;

}


.users-table {

    width: 100%;

    border-collapse: collapse;

}


.users-table th {

    text-align: left;

    background: #F8FAFC;

    color: var(--muted);

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: .5px;

    padding: 17px 20px;

}


.users-table td {

    padding: 17px 20px;

    border-top:
        1px solid var(--border);

    font-size: 13px;

}


.table-user {

    display: flex;

    align-items: center;

    gap: 10px;

}


.mini-avatar {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: #EAF6FF;

    color: var(--blue);

    display: flex;

    align-items: center;

    justify-content: center;

}


.role-badge {

    background: #EEF2F7;

    color: var(--primary);

    padding:
        5px 9px;

    border-radius: 7px;

    font-size: 11px;

    font-weight: 700;

}


.status {

    padding:
        5px 9px;

    border-radius: 7px;

    font-size: 11px;

    font-weight: 700;

}


.status.active {

    background: #E8F8EF;

    color: #15803D;

}


.status.inactive {

    background: #FEECEC;

    color: #DC2626;

}


.table-actions {

    display: flex;

    gap: 7px;

}


.table-actions button {

    width: 34px;

    height: 34px;

    border: none;

    border-radius: 8px;

    cursor: pointer;

}


.edit-btn {

    background: #EAF6FF;

    color: var(--blue);

}


.toggle-btn {

    background: #FFF0E7;

    color: var(--accent);

}


/* =========================================
   MODAL
========================================= */

.modal-overlay {

    position: fixed;

    inset: 0;

    background:
        rgba(0,0,0,.5);

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;

    z-index: 1000;

}


.modal-overlay.show {

    display: flex;

}


.modal {

    width: 100%;

    max-width: 500px;

    background: white;

    border-radius: 22px;

    padding: 30px;

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.25);

}


.modal-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 25px;

}


.modal-header span {

    color: var(--accent);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

}


.modal-header h2 {

    color: var(--primary);

    margin-top: 5px;

}


.modal-close {

    border: none;

    background: #F1F5F9;

    width: 36px;

    height: 36px;

    border-radius: 9px;

    cursor: pointer;

}


.modal input,
.modal select {

    width: 100%;

    height: 48px;

    border:
        1px solid var(--border);

    border-radius: 10px;

    padding:
        0 13px;

    font-family: inherit;

    outline: none;

}


.modal input:focus,
.modal select:focus {

    border-color:
        var(--blue);

}


.modal-actions {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 25px;

}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1000px) {

    .dashboard-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media (max-width: 750px) {

    .sidebar {

        width: 220px;

    }

    .dashboard-main {

        margin-left: 220px;

        width:
            calc(100% - 220px);

        padding:
            30px 25px;

    }

    .dashboard-grid {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 600px) {

    .login-card {

        padding:
            35px 25px;

    }

    .sidebar {

        width: 100%;

        position: relative;

        min-height: auto;

    }

    .dashboard-body {

        display: block;

    }

    .dashboard-main {

        margin-left: 0;

        width: 100%;

    }

    .dashboard-header {

        display: block;

    }

    .users-header .primary-action {

        margin-top: 20px;

    }

    .users-table-container {

        overflow-x: auto;

    }

    .users-table {

        min-width: 700px;

    }

}

























:root {
    /* Paleta de Colores de CELEKTA */
    --primary: #003366;
    --primary-hover: #002244;
    --accent: #FF6B00;
    --accent-light: #FFEAD9;
    --secondary-blue: #00A8FF;
    --text-main: #1E293B;
    --text-muted: #64748B;
    --bg-light: #F8FAFC;
    --white: #FFFFFF;
}



.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo img {
    width: 250px; /* antes 155px */
    height: auto;
    max-height: 100px; /* antes 55px */
    object-fit: contain;
    display: block;
}


.footer-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.footer-logo img {
    width: 185px; /* un poco más grande que el de arriba */
    height: auto;
    max-height: 70px;
    object-fit: contain;
    display: block;
    margin-bottom: 1rem;
}


/* =========================================
   RESET
========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text-main);
    background-color: var(--white);
    overflow-x: hidden;
}


/* =========================================
   NAVBAR
========================================= */

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 5%;
    background-color: var(--white);
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    font-size: 2.5rem; /* Aumentado de 1.8rem a 2.5rem */
    font-weight: 800;
    color: var(--primary);
    text-decoration: none;
    letter-spacing: -0.5px;
}

.logo span {
    color: var(--accent);
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

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

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.btn-link {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.95rem;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition:
        background-color 0.2s ease,
        transform 0.15s ease;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: var(--bg-light);
    color: var(--primary);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid #E2E8F0;
    transition:
        background-color 0.2s ease,
        transform 0.15s ease;
}

.btn-secondary:hover {
    background-color: #E2E8F0;
    transform: translateY(-1px);
}


/* =========================================
   HERO
========================================= */

/*
   IMPORTANTE:
   Aquí estaba el problema principal.
   Había DOS .hero diferentes.
   Ahora solamente existe uno.
*/

.hero {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 5% 2.5rem;
    position: relative;
    text-align: center;
}


/* =========================================
   HERO CAROUSEL
========================================= */

.hero-carousel {
    position: relative;
    width: 100%;
    height: min(570px, 62vh);
    min-height: 430px;
    overflow: hidden;
    border-radius: 28px;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.15);
    background: #0b1f36;
}

.carousel-track,
.carousel-slide {
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.7s ease,
        visibility 0.7s ease;
}

.carousel-slide.active {
    opacity: 1;
    visibility: visible;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.01);
}


/* =========================================
   CAROUSEL OVERLAY
========================================= */

.carousel-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 5%;

    background: linear-gradient(
        90deg,
        rgba(0, 25, 55, 0.88) 0%,
        rgba(0, 51, 102, 0.62) 42%,
        rgba(0, 51, 102, 0.08) 100%
    );
}

.carousel-content {
    max-width: 650px;
    text-align: left;
    color: var(--white);
}

.carousel-tag {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    margin-bottom: 1rem;

    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 999px;

    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);

    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.carousel-content h1 {
    margin: 0 0 1rem;

    font-size: clamp(2.4rem, 5vw, 4.5rem);
    line-height: 1.05;

    font-weight: 800;
    letter-spacing: -0.04em;
}

.carousel-content h1 span {
    color: #FF8A3D;

    font-family: 'Caveat', cursive;
    font-size: 1.12em;
}

.carousel-content p {
    margin: 0;
    max-width: 560px;

    color: rgba(255,255,255,0.88);

    font-size: 1.05rem;
    line-height: 1.7;
}


/* =========================================
   CAROUSEL BUTTONS
========================================= */

.carousel-btn {
    position: absolute;
    top: 50%;

    width: 48px;
    height: 48px;

    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;

    background: rgba(0, 30, 60, 0.45);

    color: var(--white);

    cursor: pointer;
    z-index: 3;

    backdrop-filter: blur(7px);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
    
    transform: translateY(-50%);
}

.carousel-btn:hover {
    background: var(--accent);
    border-color: var(--accent);

    transform: translateY(-50%) scale(1.05);
}

.carousel-btn.prev {
    left: 20px;
}

.carousel-btn.next {
    right: 20px;
}


/* =========================================
   CAROUSEL DOTS
========================================= */

.carousel-dots {
    position: absolute;

    left: 50%;
    bottom: 22px;

    transform: translateX(-50%);

    display: flex;
    gap: 8px;

    z-index: 3;
}

.dot {
    width: 9px;
    height: 9px;

    padding: 0;
    border: 0;
    border-radius: 50%;

    background: rgba(255,255,255,0.55);

    cursor: pointer;

    transition:
        width 0.25s ease,
        background-color 0.25s ease;
}

.dot.active {
    width: 28px;
    border-radius: 10px;
    background: var(--accent);
}


/* =========================================
   HERO ELEMENTS
========================================= */

.hero-badge {
    display: inline-block;

    padding: 0.45rem 1rem;
    margin-bottom: 1.2rem;

    border-radius: 999px;

    background: var(--accent-light);
    color: var(--accent);

    font-size: 0.82rem;
    font-weight: 800;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.25;

    color: var(--text-main);

    margin-bottom: 2rem;
}

.hero-title .handwritten {
    font-family: 'Caveat', cursive;

    font-size: 4.2rem;
    font-weight: 700;

    display: inline-block;
}

.highlight-marker {
    background-color: #FFE5D4;
    color: var(--accent);

    padding: 0 15px;

    border-radius: 25px;

    display: inline-block;

    transform: rotate(-1deg);
}

.underline-sketch {
    position: relative;
    display: inline-block;

    color: var(--primary);
}

.underline-sketch::after {
    content: '';

    position: absolute;

    bottom: 2px;
    left: 0;

    width: 100%;
    height: 6px;

    background-color: var(--secondary-blue);

    border-radius: 3px;
}

.hero-description {
    max-width: 720px;

    margin: -0.5rem auto 2rem;

    color: var(--text-muted);

    font-size: 1.05rem;
    line-height: 1.8;
}


/* =========================================
   HERO CTA
========================================= */

.hero-cta {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 1rem;

    margin-top: 1.5rem;
    margin-bottom: 0;
}

.hero-cta a {
    min-width: 230px;

    padding: 1rem 1.8rem !important;

    font-size: 1rem !important;

    border-radius: 14px;
}


/* =========================================
   NOTE ANNOTATION
========================================= */

.note-annotation {
    position: absolute;

    right: 12%;
    bottom: 20%;

    font-family: 'Caveat', cursive;

    font-size: 1.6rem;

    color: #475569;

    transform: rotate(6deg);

    pointer-events: none;
}

.note-annotation i {
    font-size: 1.2rem;

    display: block;

    margin-bottom: -5px;

    color: var(--accent);
}


/* =========================================
   SERVICIOS
   ESTILO CARPLAY
========================================= */

.services-wrapper {
    background-color: var(--bg-light);

    /*
       Curva superior
    */
    border-radius: 50% 50% 0 0 / 40px 40px 0 0;

    /*
       Reducimos el espacio superior
       para eliminar el hueco gigante
    */
    padding: 3.5rem 4% 5rem;

    margin-top: 0;

    box-shadow:
        0 -8px 35px rgba(15, 23, 42, 0.04);
}


/* =========================================
   GRID DE SERVICIOS
========================================= */

.services-grid {
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1.5rem;

    justify-items: stretch;
}


/* =========================================
   SERVICE CARD
   TARJETAS GRANDES
========================================= */

.service-card {
    min-height: 185px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 1.5rem;

    background: var(--white);

    border-radius: 28px;

    text-decoration: none;

    border: 1px solid rgba(226, 232, 240, 0.8);

    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.8);

    cursor: pointer;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}

.service-card:hover {
    transform: translateY(-6px) scale(1.02);

    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.14),
        inset 0 1px 0 rgba(255,255,255,0.9);
}


/* =========================================
   ICON BOX
   GRANDE
========================================= */





/* =========================================
   TITULO DE SERVICIO
========================================= */

.service-title {
    font-size: 1rem;

    font-weight: 800;

    color: var(--text-main);

    text-align: center;

    line-height: 1.3;
}


/* =========================================
   COLORES DE ICONOS
========================================= */

.c-orange {
    color: #FF6B00;
}

.c-blue {
    color: #00A8FF;
}

.c-navy {
    color: #003366;
}

.c-teal {
    color: #00B894;
}

.c-purple {
    color: #6C5CE7;
}

.c-pink {
    color: #FD79A8;
}




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

.footer {
    background: var(--primary);
    color: rgba(255,255,255,0.82);

    /* 🔧 ALTO GENERAL DEL FOOTER
       ↑ Primer valor: espacio ARRIBA
       ↔ Segundo valor: espacio IZQUIERDA/DERECHA
       ↓ Tercer valor: espacio ABAJO

       Si quieres MÁS DELGADO:
       padding: 1rem 5% 0.3rem;

       Si quieres MÁS ALTO:
       padding: 2rem 5% 0.8rem;
    */
    padding: 1.3rem 5% 0.4rem;
}


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

    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;

    /* 🔧 ESPACIO HORIZONTAL ENTRE COLUMNAS */
    gap: 1rem;
}


/* =========================================
   LOGO / MARCA
========================================= */

.footer-brand .footer-logo {
    display: inline-block;

    color: var(--white);

    font-size: 1.8rem;
    font-weight: 800;

    text-decoration: none;

    /* 🔧 ESPACIO DEBAJO DEL LOGO
       Puedes reducirlo si quieres pegar
       más el texto al logo */
    margin-bottom: 0.5rem;
}

.footer-brand .footer-logo span {
    color: var(--accent);
}


/* =========================================
   DESCRIPCIÓN
========================================= */

.footer-brand p {
    max-width: 390px;

    color: rgba(255,255,255,0.68);

    /* 🔧 ALTURA ENTRE LAS LÍNEAS DEL TEXTO
       Menor número = texto más compacto */
    line-height: 1.4;

    font-size: 0.9rem;

    margin: 0;
}


/* =========================================
   COLUMNAS
========================================= */

.footer-column h3 {
    color: var(--white);

    font-size: 0.95rem;

    /* 🔧 ESPACIO DEBAJO DE LOS TÍTULOS */
    margin-bottom: 0.5rem;
}


.footer-links {
    list-style: none;
}


.footer-links li {

    /* 🔧 ESPACIO ENTRE CADA LINK */
    margin-bottom: 0.3rem;
}


.footer-links a {
    color: rgba(255,255,255,0.68);

    text-decoration: none;

    font-size: 0.88rem;

    transition: color 0.2s ease;
}


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


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

.footer-contact {
    display: flex;

    align-items: flex-start;

    gap: 0.7rem;

    /* 🔧 ESPACIO ENTRE ELEMENTOS DE CONTACTO */
    margin-bottom: 0.35rem;

    font-size: 0.88rem;

    color: rgba(255,255,255,0.68);
}


.footer-contact i {
    color: var(--accent);

    width: 18px;

    margin-top: 3px;
}


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

.footer-bottom {
    max-width: 1200px;

    /* 🔧 ESPACIO ENTRE EL CONTENIDO
       PRINCIPAL Y EL FOOTER-BOTTOM

       Menor = footer más compacto */
    margin: 0.7rem auto 0;

    /* 🔧 ESPACIO ENTRE LA LÍNEA Y EL COPYRIGHT */
    padding-top: 0.45rem;

    border-top: 1px solid rgba(255,255,255,0.12);

    display: flex;

    justify-content: space-between;

    gap: 1rem;

    color: rgba(255,255,255,0.5);

    font-size: 0.78rem;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-card {
        min-height: 180px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    /* NAVBAR */

    .nav-links {
        display: none;
    }

    .nav-actions {
        gap: 0.75rem;
    }


    /* HERO */

    .hero {
        padding: 1rem 1rem 2rem;
    }


    /* CAROUSEL */

    .hero-carousel {
        height: 500px;

        min-height: 0;

        border-radius: 20px;
    }

    .carousel-overlay {
        padding: 2rem;

        background: linear-gradient(
            90deg,
            rgba(0, 25, 55, 0.9) 0%,
            rgba(0, 51, 102, 0.48) 100%
        );
    }

    .carousel-content h1 {
        font-size: 2.5rem;
    }

    .carousel-content p {
        font-size: 0.92rem;
    }

    .carousel-btn {
        width: 40px;
        height: 40px;
    }

    .carousel-btn.prev {
        left: 12px;
    }

    .carousel-btn.next {
        right: 12px;
    }


    /* HERO BUTTONS */

    .hero-cta {
        flex-direction: column;

        width: 100%;

        gap: 0.75rem;

        margin-top: 1rem;
    }

    .hero-cta a {
        width: 100%;

        min-width: 0;
    }


    /* SERVICES */

    .services-wrapper {
        padding: 2.5rem 1rem 4rem;

        border-radius: 40px 40px 0 0;
    }

    .services-grid {
        grid-template-columns: 1fr;

        gap: 1rem;
    }

    .service-card {
        min-height: 155px;

        border-radius: 24px;
    }

    .icon-box {
        width: 85px;
        height: 85px;

        font-size: 2.4rem;
    }

    .service-title {
        font-size: 0.95rem;
    }


    /* HERO TEXT */

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

    .hero-title .handwritten {
        font-size: 3.2rem;
    }

    .hero-description {
        font-size: 0.95rem;
    }


    /* FOOTER */

    .footer-container {
        grid-template-columns: 1fr;

        gap: 2rem;
    }

    .footer-bottom {
        flex-direction: column;

        text-align: center;
    }
}


/* =========================================
   MOBILE PEQUEÑO
========================================= */

@media (max-width: 480px) {

    .navbar {
        padding: 1rem;
    }

    .logo {
        font-size: 1.5rem;
    }

    .nav-actions {
        gap: 0.5rem;
    }

    .btn-link {
        display: none;
    }

    .btn-primary {
        padding: 0.65rem 1rem;
        font-size: 0.85rem;
    }

    .hero-carousel {
        height: 460px;
    }

    .carousel-content h1 {
        font-size: 2.15rem;
    }

    .carousel-content p {
        font-size: 0.88rem;
    }

    .service-card {
        min-height: 150px;
    }

    .icon-box {
        width: 78px;
        height: 78px;

        font-size: 2.2rem;

        border-radius: 22px;
    }
}




/* CELEKTA: Gestor de usuarios Laravel */
.users-page{background:#f4f7fb;color:#172033;min-height:100vh}.users-shell{display:flex;min-height:100vh}.users-sidebar{width:260px;flex:0 0 260px;background:#fff;border-right:1px solid #e4eaf2;display:flex;flex-direction:column;padding:22px 16px;position:sticky;top:0;height:100vh}.users-brand{display:flex;justify-content:center;align-items:center;padding:5px 10px 28px;border-bottom:1px solid #edf1f6}.users-brand img{max-width:190px;max-height:58px;object-fit:contain}.users-nav{display:grid;gap:8px;padding-top:25px}.users-nav a{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:11px;text-decoration:none;color:#536178;font-size:14px;font-weight:700;transition:.2s}.users-nav a i{width:20px;text-align:center}.users-nav a:hover,.users-nav a.active{background:#fff0e7;color:#e85d04}.users-sidebar-profile{margin-top:auto;padding:16px 5px 4px;border-top:1px solid #edf1f6;display:flex;align-items:center;gap:11px;min-width:0}.profile-avatar,.user-initial{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:12px;background:#e8f2ff;color:#1456a0;width:42px;height:42px;font-weight:800}.users-sidebar-profile span:last-child{min-width:0}.users-sidebar-profile strong,.users-sidebar-profile small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:165px}.users-sidebar-profile strong{font-size:12px}.users-sidebar-profile small{color:#77849a;font-size:11px;margin-top:3px}.users-main{flex:1;min-width:0;display:flex;flex-direction:column}.users-topbar{padding:31px clamp(20px,4vw,54px);background:#fff;border-bottom:1px solid #e4eaf2;display:flex;align-items:center;justify-content:space-between;gap:20px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.7px;color:#f36b21}.users-topbar h1{font-size:clamp(24px,3vw,32px);line-height:1.2;margin:7px 0;color:#102d4f}.users-topbar p,.panel-heading p{font-size:13px;color:#7b8798;margin:0}.users-logout,.users-primary,.users-secondary{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:10px;padding:12px 16px;font:700 13px 'Plus Jakarta Sans',sans-serif;cursor:pointer;text-decoration:none;transition:transform .15s,background .15s}.users-logout{background:#fff5ef;color:#c45117;border:1px solid #ffe1d0;white-space:nowrap}.users-primary{background:#f36b21;color:#fff;box-shadow:0 5px 14px #f36b2129}.users-primary:hover{background:#dc5b17;transform:translateY(-1px)}.users-secondary{background:#f0f3f8;color:#45546b}.users-content{width:100%;max-width:1450px;margin:0 auto;padding:30px clamp(20px,4vw,54px);flex:1}.users-summary{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.users-summary>div{display:flex;align-items:center;gap:13px}.summary-icon{width:49px;height:49px;border-radius:14px;display:grid;place-items:center;background:#fff0e7;color:#f36b21;font-size:20px}.users-summary small{display:block;font-size:10px;letter-spacing:1px;font-weight:800;color:#7a8799;margin-bottom:4px}.users-summary strong{font-size:25px;color:#142f50}.users-panel{background:#fff;border:1px solid #e5eaf1;border-radius:17px;box-shadow:0 8px 25px #20334a08;overflow:hidden}.panel-heading{padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid #edf1f5}.panel-heading h2{font-size:17px;color:#173454;margin:0 0 5px}.users-search{width:min(320px,100%);display:flex;align-items:center;gap:9px;padding:0 13px;height:42px;border:1px solid #e0e6ef;border-radius:10px;color:#8b97a8}.users-search input{border:0;outline:0;width:100%;font:500 12px 'Plus Jakarta Sans',sans-serif;color:#26384f}.users-table-wrap{overflow-x:auto}.users-table{width:100%;border-collapse:collapse;min-width:770px}.users-table th{text-align:left;background:#f8fafc;padding:14px 20px;color:#8792a3;font-size:10px;text-transform:uppercase;letter-spacing:.8px;font-weight:800}.users-table td{padding:16px 20px;border-top:1px solid #edf1f5;font-size:12px;color:#59677a}.users-table tbody tr:hover{background:#fbfcfe}.user-cell{display:flex;align-items:center;gap:11px}.user-cell strong,.user-cell small{display:block}.user-cell strong{font-size:12px;color:#20354f;margin-bottom:4px}.user-cell small{font-size:11px;color:#8290a2}.user-initial{width:38px;height:38px;border-radius:50%;background:#eaf4ff;color:#2466a6}.role-pill,.state-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:7px;font-size:10px;font-weight:800;white-space:nowrap}.role-admin{background:#fff0e7;color:#c45117}.role-rh{background:#e9f2ff;color:#235fa6}.role-user{background:#edf8f1;color:#23734b}.state-pill i{font-size:6px}.is-active{background:#e9f8ef;color:#21834f}.is-inactive{background:#fff0f0;color:#c53c3c}.row-actions{display:flex;gap:7px}.row-actions form{margin:0}.icon-action{width:34px;height:34px;border:1px solid #e4eaf2;border-radius:9px;background:#fff;color:#2764a3;cursor:pointer}.icon-action:hover{background:#eff6ff}.deactivate-action{color:#c55c26}.activate-action{color:#21834f}.actions-col{width:115px}.empty-users{text-align:center!important;padding:45px!important;color:#8792a3!important}.users-footer{text-align:center;color:#9aa4b2;font-size:11px;padding:20px}.notice{margin:0 0 18px;padding:13px 16px;border-radius:10px;display:flex;gap:10px;align-items:flex-start;font-size:12px;font-weight:600}.notice p{margin:0 0 4px}.notice-success{background:#eaf8ef;color:#24784b;border:1px solid #ccebd7}.notice-error{background:#fff0f0;color:#ad3030;border:1px solid #f6d2d2}.users-modal-backdrop{display:none;position:fixed;inset:0;background:#10203399;z-index:2000;padding:22px;align-items:center;justify-content:center;overflow-y:auto}.users-modal-backdrop.is-open{display:flex}.users-modal{background:#fff;border-radius:18px;width:100%;max-width:660px;max-height:calc(100vh - 44px);overflow-y:auto;padding:27px;box-shadow:0 25px 80px #091a2b40}.users-modal-heading{display:flex;justify-content:space-between;gap:20px;margin-bottom:24px}.users-modal-heading h2{font-size:24px;color:#173454;margin:7px 0}.users-modal-heading p{font-size:12px;color:#7b8798}.modal-x{width:38px;height:38px;border:0;border-radius:10px;background:#f1f4f8;color:#526176;cursor:pointer}.modal-fields{display:grid;grid-template-columns:1fr 1fr;gap:17px}.modal-fields label{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:800;color:#35455a}.modal-fields label span{font-weight:500;color:#8994a3}.modal-fields input:not([type=checkbox]),.modal-fields select{width:100%;height:44px;padding:0 12px;border:1px solid #dfe6ef;border-radius:9px;background:#fff;color:#293b52;font:500 12px 'Plus Jakarta Sans',sans-serif;outline:none}.modal-fields input:focus,.modal-fields select:focus{border-color:#f36b21;box-shadow:0 0 0 3px #f36b2118}.modal-fields small{font-weight:500;color:#8290a2;font-size:10px}.field-full{grid-column:1/-1}.modal-fields .active-check{display:flex;flex-direction:row;align-items:center;gap:9px;font-weight:600}.active-check input{accent-color:#f36b21}.users-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:26px;padding-top:20px;border-top:1px solid #edf1f5}.modal-open{overflow:hidden}@media(max-width:800px){.users-sidebar{width:220px;flex-basis:220px}.users-topbar{align-items:flex-start}.panel-heading{align-items:flex-start;flex-direction:column}.users-search{width:100%}}@media(max-width:600px){.users-shell{display:block}.users-sidebar{position:relative;width:100%;height:auto;padding:12px 16px}.users-brand{padding:5px 0 12px}.users-brand img{max-height:40px}.users-nav{display:flex;flex-wrap:wrap;padding-top:12px;gap:5px}.users-nav a{padding:9px;font-size:11px}.users-sidebar-profile{display:none}.users-topbar{padding:22px 18px;flex-direction:column}.users-content{padding:20px 12px}.users-summary{align-items:flex-start}.users-summary .users-primary{padding:11px;font-size:11px}.users-modal{padding:20px}.modal-fields{grid-template-columns:1fr}.field-full{grid-column:auto}.users-modal-actions{flex-wrap:wrap}.users-modal-actions button{flex:1}}

/* Carousel de anuncios administrables */
.celekta-banner-carousel{position:relative;max-width:1200px;margin:28px auto 36px;min-height:270px;border-radius:18px;overflow:hidden;background:#102b48;color:#fff;box-shadow:0 16px 42px #102b4824}.banner-slides{position:relative;min-height:270px}.banner-slide{display:none;min-height:270px;background-color:#102b48;background-position:center;background-size:cover;padding:45px 80px 58px;animation:bannerFade .35s ease}.banner-slide.is-current{display:flex;align-items:center}.banner-slide-content{max-width:720px}.banner-kicker{font-size:10px;font-weight:800;letter-spacing:2px;color:#ffb17e}.banner-slide h2{font-size:clamp(24px,3vw,38px);line-height:1.15;margin:12px 0;color:#fff}.banner-slide p{font-size:14px;line-height:1.7;color:#e6edf5;max-width:650px}.banner-cta{display:inline-flex;gap:10px;align-items:center;margin-top:20px;padding:12px 17px;background:#f36b21;color:#fff!important;text-decoration:none;border-radius:9px;font-weight:800;font-size:12px}.banner-control{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border:1px solid #ffffff65;border-radius:50%;background:#102b4880;color:white;cursor:pointer}.banner-control:hover{background:#f36b21}.banner-prev{left:18px}.banner-next{right:18px}.banner-dots{position:absolute;bottom:17px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:4}.banner-dot{height:8px;width:8px;padding:0;border:0;border-radius:50%;background:#ffffff80;cursor:pointer}.banner-dot.active{width:24px;border-radius:8px;background:#ff8b4c}@keyframes bannerFade{from{opacity:.65}to{opacity:1}}.login-server-errors{margin:0 0 18px;padding:12px 14px;border:1px solid #fecaca;border-radius:10px;background:#fff1f2;color:#b4232c;font-size:12px;font-weight:700;line-height:1.5}.login-server-errors p{margin:0}.login-body .login-container{min-height:100vh;justify-content:center}.login-body .login-card{max-width:460px;width:100%}.login-body .form-group input{min-width:0}.login-body .login-button{width:100%}@media(max-width:700px){.celekta-banner-carousel{margin:18px 12px 25px;min-height:250px}.banner-slide{padding:35px 48px 52px;min-height:250px}.banner-slides{min-height:250px}.banner-control{width:32px;height:32px}.banner-prev{left:8px}.banner-next{right:8px}}