/* ============================================================================
   Control de Tareas — Identidad visual propia
   Paleta: navy profundo (#0e1726) + naranja obra (#f05514)
   Tipografías: Sora (títulos) + Inter (texto)
   ============================================================================ */

:root {
    /* Paleta propia */
    --ct-tinta: #0e1726;
    --ct-tinta-2: #16233b;
    --ct-tinta-3: #1f3050;
    --ct-primario: #f05514;
    --ct-primario-osc: #cf4408;
    --ct-primario-claro: #ff8a3d;
    --ct-primario-tenue: #fdeadd;
    --ct-fondo: #f2f4f9;
    --ct-borde: #e6eaf1;
    --ct-texto: #233044;
    --ct-texto-suave: #64718a;

    /* Overrides de variables Bootstrap */
    --bs-primary: var(--ct-primario);
    --bs-primary-rgb: 240, 85, 20;
    --bs-body-color: var(--ct-texto);
    --bs-body-bg: var(--ct-fondo);
    --bs-link-color: #c2410c;
    --bs-link-color-rgb: 194, 65, 12;
    --bs-link-hover-color: var(--ct-primario-osc);
    --bs-link-hover-color-rgb: 207, 68, 8;
    --bs-border-color: var(--ct-borde);
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body {
    font-family: var(--bs-body-font-family);
    letter-spacing: .005em;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .fs-3, .fs-4, .fs-5, .marca {
    font-family: 'Sora', 'Inter', sans-serif;
    letter-spacing: -.015em;
    color: var(--ct-tinta);
}

.bg-body-tertiary { background-color: var(--ct-fondo) !important; }

/* --- Botones ----------------------------------------------------------------- */
.btn {
    border-radius: .65rem;
    font-weight: 600;
    letter-spacing: .01em;
}
.btn-primary {
    --bs-btn-bg: var(--ct-primario);
    --bs-btn-border-color: var(--ct-primario);
    --bs-btn-hover-bg: var(--ct-primario-osc);
    --bs-btn-hover-border-color: var(--ct-primario-osc);
    --bs-btn-active-bg: var(--ct-primario-osc);
    --bs-btn-active-border-color: var(--ct-primario-osc);
    --bs-btn-disabled-bg: #f8a06f;
    --bs-btn-disabled-border-color: #f8a06f;
    box-shadow: 0 6px 14px -6px rgba(240, 85, 20, .55);
}
.btn-outline-primary {
    --bs-btn-color: var(--ct-primario-osc);
    --bs-btn-border-color: #f5b08a;
    --bs-btn-hover-bg: var(--ct-primario);
    --bs-btn-hover-border-color: var(--ct-primario);
    --bs-btn-active-bg: var(--ct-primario);
    --bs-btn-active-border-color: var(--ct-primario);
}
.btn-outline-secondary {
    --bs-btn-color: var(--ct-texto-suave);
    --bs-btn-border-color: #d4dae4;
    --bs-btn-hover-bg: #eef1f6;
    --bs-btn-hover-border-color: #c3cbd9;
    --bs-btn-hover-color: var(--ct-tinta);
    --bs-btn-active-bg: #e6eaf1;
    --bs-btn-active-color: var(--ct-tinta);
}

/* --- Formularios ------------------------------------------------------------- */
.form-control, .form-select {
    border-radius: .6rem;
    border-color: #d8dee9;
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--ct-primario);
    box-shadow: 0 0 0 .22rem rgba(240, 85, 20, .14);
}
.form-check-input:checked { background-color: var(--ct-primario); border-color: var(--ct-primario); }
.form-label { font-weight: 600; font-size: .85rem; color: var(--ct-tinta); }
.form-text { color: var(--ct-texto-suave); }

/* --- Tarjetas ----------------------------------------------------------------- */
.card {
    border: 1px solid var(--ct-borde);
    border-radius: .95rem;
    box-shadow: 0 1px 2px rgba(14, 23, 38, .04);
}
.card-header.bg-body {
    background: transparent !important;
    font-weight: 600;
    font-size: .92rem;
    color: var(--ct-tinta);
    border-bottom: 1px solid var(--ct-borde);
    padding-top: .85rem;
    padding-bottom: .85rem;
}
a.card { transition: transform .12s ease, box-shadow .12s ease; }
a.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -12px rgba(14, 23, 38, .25);
    border-color: #d4dae4;
}

/* Tarjetas indicador del dashboard */
.tarjeta-indicador .card-body { padding: .9rem 1rem; }
.cubo-icono {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: .85rem;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
}
.cubo-gris   { background: #eef1f6; color: #59667a; }
.cubo-azul   { background: #e4edff; color: #1d4ed8; }
.cubo-cian   { background: #dcf3fa; color: #0b7285; }
.cubo-ambar  { background: #fdf0d7; color: #b45309; }
.cubo-verde  { background: #e0f5e9; color: #15803d; }
.cubo-rojo   { background: #fde3e1; color: #b91c1c; }
.cubo-naranja{ background: var(--ct-primario-tenue); color: var(--ct-primario-osc); }
.texto-indicador {
    display: block;
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ct-texto-suave);
    margin-top: .2rem;
}

/* --- Insignias (estados y prioridades) ---------------------------------------- */
.badge {
    font-weight: 600;
    border-radius: 50rem;
    padding: .38em .75em;
    letter-spacing: .015em;
}
.insignia { font-size: .72rem; }
.insignia[class*="estado-"]::before {
    content: '';
    display: inline-block;
    width: .46em;
    height: .46em;
    border-radius: 50%;
    background: currentColor;
    margin-right: .45em;
    vertical-align: .08em;
}
.estado-pendiente  { background: #eef1f6; color: #59667a; }
.estado-en_curso   { background: #e4edff; color: #1d4ed8; }
.estado-finalizada { background: #dcf3fa; color: #0b7285; }
.estado-aprobada   { background: #e0f5e9; color: #15803d; }
.estado-observada  { background: #fdf0d7; color: #b45309; }
.estado-cancelada  { background: #e9eaee; color: #475569; }

.prio-baja    { background: #eef1f6; color: #64718a; }
.prio-media   { background: #ddf2f1; color: #0f766e; }
.prio-alta    { background: #ffe9d6; color: #c2410c; }
.prio-urgente { background: #fde3e1; color: #b91c1c; }

/* Badges genéricos de Bootstrap usados en listados → versión tenue */
.badge.text-bg-success   { background: #e0f5e9 !important; color: #15803d !important; }
.badge.text-bg-danger    { background: #fde3e1 !important; color: #b91c1c !important; }
.badge.text-bg-warning   { background: #fdf0d7 !important; color: #b45309 !important; }
.badge.text-bg-info      { background: #dcf3fa !important; color: #0b7285 !important; }
.badge.text-bg-primary   { background: var(--ct-primario-tenue) !important; color: var(--ct-primario-osc) !important; }
.badge.text-bg-secondary { background: #eef1f6 !important; color: #59667a !important; }
.badge.text-bg-dark      { background: #e9eaee !important; color: #334155 !important; }
.badge.text-bg-light     { background: #f4f6fa !important; color: #64718a !important; border: 1px solid var(--ct-borde); }

/* --- Tablas -------------------------------------------------------------------- */
.table { --bs-table-hover-bg: #f7f8fc; }
.table thead th {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #8a93a6;
    border-bottom: 1px solid var(--ct-borde);
    white-space: nowrap;
}
.table td { border-color: #eef1f6; }
.table a.fw-semibold { font-family: 'Sora', sans-serif; font-size: .85rem; }

/* DataTables acorde al resto */
div.dataTables_wrapper div.dataTables_filter { margin-bottom: .6rem; }
div.dataTables_wrapper .dataTables_filter input,
div.dataTables_wrapper .dataTables_length select {
    border: 1px solid #d8dee9;
    border-radius: .55rem;
    padding: .3rem .6rem;
}
div.dataTables_wrapper .dataTables_info { color: var(--ct-texto-suave); font-size: .82rem; }
.page-link { color: var(--ct-tinta); border-radius: .5rem !important; margin: 0 2px; border-color: var(--ct-borde); }
.page-item.active .page-link { background: var(--ct-tinta); border-color: var(--ct-tinta); }

/* --- Barras de progreso ---------------------------------------------------------- */
.progress { background-color: #e7ebf2; border-radius: 50rem; }
.progress-bar {
    background: linear-gradient(90deg, var(--ct-primario), var(--ct-primario-claro));
    border-radius: 50rem;
}

/* --- Sidebar (contratista / empresa) ---------------------------------------------- */
.sidebar {
    width: 258px;
    min-height: 100vh;
    flex-shrink: 0;
    background: linear-gradient(175deg, var(--ct-tinta) 0%, var(--ct-tinta-2) 70%, var(--ct-tinta-3) 100%);
}
@media (max-width: 767.98px) {
    .sidebar { min-height: auto; background: var(--ct-tinta); }
}
.marca { display: flex; align-items: center; gap: .65rem; color: #fff; }
.marca-logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: .8rem;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    color: #fff;
    background: linear-gradient(135deg, var(--ct-primario), var(--ct-primario-claro));
    box-shadow: 0 6px 14px -4px rgba(240, 85, 20, .6);
}
.marca-texto { line-height: 1.1; }
.marca-texto strong { font-size: 1.02rem; letter-spacing: -.02em; }
.marca-texto small {
    display: block;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #8fa0bd;
    margin-top: .15rem;
}
.etiqueta-menu {
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #5f7294;
    margin: 1.4rem 0 .5rem .75rem;
}
.sidebar .nav-link {
    color: #aebcd4;
    border-radius: .65rem;
    font-weight: 500;
    font-size: .92rem;
    padding: .58rem .85rem;
    position: relative;
    transition: background .12s ease, color .12s ease;
}
.sidebar .nav-link i { opacity: .85; }
.sidebar .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sidebar .nav-link.active {
    background: rgba(240, 85, 20, .16);
    color: #fff;
    font-weight: 600;
}
.sidebar .nav-link.active::before {
    content: '';
    position: absolute;
    left: -.35rem;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 3px;
    background: var(--ct-primario);
}
.sidebar .nav-link.active i { color: var(--ct-primario-claro); opacity: 1; }

/* Ficha de usuario al pie del sidebar */
.ficha-usuario {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .85rem;
    padding: .65rem .75rem;
}
.avatar-inicial {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .9rem;
    color: #fff;
    background: linear-gradient(135deg, var(--ct-primario), var(--ct-primario-claro));
}
.ficha-usuario .nombre { color: #fff; font-size: .82rem; font-weight: 600; line-height: 1.15; }
.ficha-usuario .rol {
    color: #8fa0bd;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.btn-salir {
    color: #aebcd4;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: .55rem;
    background: transparent;
    padding: .3rem .55rem;
}
.btn-salir:hover { background: rgba(240, 85, 20, .2); color: #fff; border-color: transparent; }

/* --- Barra superior mobile del panel ------------------------------------------------- */
.barra-mobile { background: var(--ct-tinta) !important; }
.barra-mobile .navbar-brand { color: #fff; }
.barra-mobile .btn { color: #aebcd4; border-color: rgba(255, 255, 255, .2); }

/* --- Interfaz del técnico (mobile) ---------------------------------------------------- */
.barra-tecnico {
    background: linear-gradient(135deg, var(--ct-tinta) 0%, var(--ct-tinta-3) 100%) !important;
}
.barra-tecnico .navbar-brand { color: #fff; font-size: 1rem; }
.nav-tecnico {
    padding: .4rem 0 calc(.4rem + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 18px -10px rgba(14, 23, 38, .25);
}
.nav-tecnico a, .nav-tecnico span { line-height: 1.1; }
.nav-tecnico small { font-size: .68rem; font-weight: 600; }
.nav-tecnico .text-primary { color: var(--ct-primario) !important; }

/* --- Fotos ------------------------------------------------------------------------------ */
.foto-mini {
    width: 74px;
    height: 74px;
    object-fit: cover;
    cursor: zoom-in;
    border-radius: .6rem !important;
    transition: transform .1s ease;
}
.foto-mini:hover { transform: scale(1.04); }
.posicion-foto .btn-borrar-foto {
    transform: translate(30%, -30%);
    box-shadow: 0 0 5px rgba(0, 0, 0, .45);
}

/* --- Checklist del técnico ---------------------------------------------------------------- */
.item-checklist { padding: .9rem 1rem; }
.item-checklist .icono-completo { margin-right: .25rem; }
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--ct-tinta);
    --bs-nav-pills-border-radius: .65rem;
}
.nav-pills .nav-link { color: var(--ct-texto-suave); font-weight: 600; font-size: .9rem; }
.nav-pills .nav-link.active .badge { background: rgba(255, 255, 255, .18) !important; color: #fff !important; }

/* --- Listas y alertas ------------------------------------------------------------------------ */
.list-group-item { border-color: #eef1f6; }
.alert { border-radius: .8rem; border: 0; }
.alert-success { background: #e0f5e9; color: #146c43; }
.alert-danger  { background: #fde3e1; color: #a52420; }
.alert-warning { background: #fdf0d7; color: #9a5a07; }
.alert-info    { background: #dcf3fa; color: #0b6e85; }

/* --- Login / auth ------------------------------------------------------------------------------ */
.pagina-auth {
    min-height: 100vh;
    background:
        radial-gradient(900px 500px at 85% -10%, rgba(240, 85, 20, .22), transparent 60%),
        radial-gradient(700px 500px at -10% 110%, rgba(29, 78, 216, .18), transparent 55%),
        linear-gradient(160deg, var(--ct-tinta) 0%, var(--ct-tinta-2) 60%, var(--ct-tinta-3) 100%);
}
.pagina-auth::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
}
.panel-auth { position: relative; z-index: 1; }
.panel-auth .card {
    border: 0;
    border-radius: 1.1rem;
    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .6);
}
.hero-auth { color: #dbe4f3; }
.hero-auth h1 { color: #fff; letter-spacing: -.03em; }
.hero-auth .punto { color: var(--ct-primario-claro); }
.hero-auth li { margin-bottom: .55rem; color: #aebcd4; }
.hero-auth li i { color: var(--ct-primario-claro); margin-right: .5rem; }

/* --- Landing pública (tema oscuro) -------------------------------------------------------------- */
.pagina-landing {
    background: var(--ct-tinta);
    color: #c6d0e2;
    scroll-behavior: smooth;
}
.pagina-landing section { scroll-margin-top: 86px; }
.pagina-landing h1, .pagina-landing h2, .pagina-landing h3, .pagina-landing h4 { color: #fff; }
.pagina-landing .text-secondary { color: #9aabc7 !important; }

.kicker {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ct-primario-claro);
    margin-bottom: .6rem;
}

/* Navbar */
.navbar-landing {
    background: rgba(14, 23, 38, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding-top: .85rem;
    padding-bottom: .85rem;
}
.navbar-landing .marca-texto strong { color: #fff; font-family: 'Sora', sans-serif; font-size: 1.02rem; }
.navbar-landing .marca-texto small {
    display: block;
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #8fa0bd;
    margin-top: .15rem;
}
.navbar-landing .nav-link {
    color: #c6d0e2;
    font-weight: 500;
    font-size: .93rem;
    padding: .5rem 1rem;
    position: relative;
}
.navbar-landing .nav-link::after {
    content: '';
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: .15rem;
    height: 2px;
    border-radius: 2px;
    background: var(--ct-primario);
    opacity: 0;
    transition: opacity .15s ease;
}
.navbar-landing .nav-link:hover { color: #fff; }
.navbar-landing .nav-link:hover::after { opacity: 1; }
@media (max-width: 991.98px) {
    .navbar-landing { background: var(--ct-tinta); }
    .navbar-landing .navbar-collapse { padding: .8rem 0 .4rem; }
    .navbar-landing .nav-link::after { display: none; }
    .navbar-landing .btn { margin-top: .6rem; width: 100%; }
}

/* Hero */
.hero-landing {
    position: relative;
    background:
        radial-gradient(900px 480px at 85% -10%, rgba(240, 85, 20, .2), transparent 60%),
        radial-gradient(700px 500px at -10% 115%, rgba(29, 78, 216, .16), transparent 55%),
        linear-gradient(165deg, var(--ct-tinta) 0%, var(--ct-tinta-2) 100%);
    padding: 5rem 0 5.4rem;
}
.hero-landing::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
}
.hero-landing .container { position: relative; z-index: 1; }
.hero-landing h1 {
    font-weight: 700;
    letter-spacing: -.03em;
    font-size: clamp(2.1rem, 4vw, 2.9rem);
    margin-bottom: 1rem;
}
.hero-landing .punto { color: var(--ct-primario-claro); }
.lead-hero { font-size: 1.08rem; color: #aebcd4; max-width: 470px; margin-bottom: 0; }
.btn-hero-secundario {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    font-weight: 600;
}
.btn-hero-secundario:hover { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .4); }

/* Panel de datos del hero */
.panel-hechos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 480px;
}
.hecho {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: .9rem;
    padding: 1.4rem 1.3rem;
    backdrop-filter: blur(4px);
}
.hecho strong {
    display: block;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 1.9rem;
    letter-spacing: -.02em;
    color: var(--ct-primario-claro);
    margin-bottom: .2rem;
}
.hecho span { color: #aebcd4; font-size: .85rem; line-height: 1.4; display: block; }

/* Chips de icono */
.chip-icono {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: .8rem;
    font-size: 1.25rem;
    color: var(--ct-primario-claro);
    background: rgba(240, 85, 20, .12);
    border: 1px solid rgba(240, 85, 20, .28);
    flex-shrink: 0;
}

/* Franja de diferenciales bajo el hero */
.barra-capacidades {
    background: rgba(255, 255, 255, .025);
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.capacidad {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.4rem 1.4rem;
    height: 100%;
}
.capacidad i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: .7rem;
    font-size: 1.15rem;
    color: var(--ct-primario-claro);
    background: rgba(240, 85, 20, .12);
    border: 1px solid rgba(240, 85, 20, .28);
    flex-shrink: 0;
}
.capacidad strong { display: block; font-size: .9rem; color: #fff; }
.capacidad small { color: #8fa0bd; font-size: .8rem; }
@media (min-width: 992px) {
    .barra-capacidades .col-lg-3 + .col-lg-3 .capacidad { border-left: 1px solid rgba(255, 255, 255, .08); }
}
@media (max-width: 991.98px) {
    .capacidad { padding: 1rem .75rem; }
}

/* Secciones */
.seccion { padding: 4.8rem 0; }
.seccion-gris { background: #121e33; }
.encabezado-seccion { max-width: 620px; margin-bottom: 2.6rem; }
.encabezado-seccion h2 {
    font-size: clamp(1.45rem, 2.6vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 0;
}
.encabezado-seccion .bajada { color: #8fa0bd; margin: .7rem 0 0; }

/* Tarjetas de servicio */
.tarjeta-funcion {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 1rem;
    padding: 1.7rem;
    height: 100%;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.tarjeta-funcion:hover {
    transform: translateY(-3px);
    border-color: rgba(240, 85, 20, .45);
    background: rgba(255, 255, 255, .055);
}
.icono-funcion {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: .8rem;
    font-size: 1.25rem;
    color: var(--ct-primario-claro);
    background: rgba(240, 85, 20, .12);
    border: 1px solid rgba(240, 85, 20, .28);
    margin-bottom: 1rem;
}
.tarjeta-funcion h3 { font-size: 1rem; margin-bottom: .45rem; }
.tarjeta-funcion p { color: #9aabc7; font-size: .91rem; line-height: 1.55; margin: 0; }

/* Pasos */
.paso { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 1.3rem; height: 100%; }
.paso .numero {
    display: block;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .08em;
    color: var(--ct-primario-claro);
    margin-bottom: .7rem;
}
.paso h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.paso p { color: #9aabc7; font-size: .92rem; margin: 0; }

/* Valores (Nosotros) */
.tarjeta-valor {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 1rem;
    padding: 1.4rem;
    height: 100%;
}
.tarjeta-valor i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: .7rem;
    font-size: 1.1rem;
    color: var(--ct-primario-claro);
    background: rgba(240, 85, 20, .12);
    border: 1px solid rgba(240, 85, 20, .28);
    margin-bottom: .8rem;
}
.tarjeta-valor h3 { font-size: .98rem; margin-bottom: .4rem; }
.tarjeta-valor p { color: #9aabc7; font-size: .87rem; line-height: 1.5; margin: 0; }

/* Sectores */
.tarjeta-sector {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 1rem;
    padding: 1.8rem 1.4rem;
    height: 100%;
    text-align: center;
    transition: transform .15s ease, border-color .15s ease;
}
.tarjeta-sector:hover { transform: translateY(-3px); border-color: rgba(240, 85, 20, .45); }
.tarjeta-sector i {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: .85rem;
    font-size: 1.4rem;
    color: var(--ct-primario-claro);
    background: rgba(240, 85, 20, .12);
    border: 1px solid rgba(240, 85, 20, .28);
    margin: 0 auto .9rem;
}
.tarjeta-sector strong {
    display: block;
    font-family: 'Sora', sans-serif;
    font-size: .98rem;
    color: #fff;
    margin-bottom: .25rem;
}
.tarjeta-sector small { color: #8fa0bd; }

/* Contacto */
.seccion-contacto {
    background:
        radial-gradient(700px 420px at 50% -20%, rgba(240, 85, 20, .16), transparent 60%),
        #121e33;
    border-top: 1px solid rgba(255, 255, 255, .07);
}
.kicker.clara { color: var(--ct-primario-claro); }
.item-contacto {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 1rem;
    padding: 1.5rem 1.4rem;
    height: 100%;
}
.item-contacto i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: .7rem;
    font-size: 1.15rem;
    color: var(--ct-primario-claro);
    background: rgba(240, 85, 20, .12);
    border: 1px solid rgba(240, 85, 20, .28);
    margin-bottom: .8rem;
}
.item-contacto strong { display: block; color: #fff; font-size: .95rem; margin-bottom: .2rem; }
.item-contacto a, .item-contacto span { color: #9aabc7; text-decoration: none; font-size: .92rem; }
.item-contacto a:hover { color: #fff; }

/* Pie */
.pie-landing {
    background: #0a1322;
    color: #8fa0bd;
    font-size: .9rem;
    border-top: 1px solid rgba(255, 255, 255, .06);
}
.pie-landing h4 {
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: .9rem;
}
.pie-landing a { color: #aebcd4; text-decoration: none; }
.pie-landing a:hover { color: #fff; }
.pie-landing li { margin-bottom: .45rem; }
.pie-landing .borde-pie { border-top: 1px solid rgba(255, 255, 255, .08); color: #5f7294; }

/* --- Varios -------------------------------------------------------------------------------------- */
::selection { background: rgba(240, 85, 20, .25); }
.text-secondary { color: var(--ct-texto-suave) !important; }
dt { color: var(--ct-texto-suave); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.modal-content { border: 0; border-radius: 1rem; box-shadow: 0 25px 60px -20px rgba(14, 23, 38, .45); }
.modal-header { border-bottom-color: var(--ct-borde); }
.modal-footer { border-top-color: var(--ct-borde); }
.offcanvas-header.d-md-none { background: var(--ct-tinta); color: #fff; }