/* =========================================================
   STYLE.CSS
   PARTE 1 DE 3
   BASE + SIDEBAR + HEADER + CATÁLOGO + TARJETAS
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {
    --sidebar-width: 240px;
    --mobile-header-height: 58px;
    --bottom-nav-height: 66px;

    --bg: #091326;
    --bg-deep: #050d1d;
    --bg-sidebar: #050c1d;
    --bg-panel: #111d31;
    --bg-panel-2: #17253a;
    --bg-panel-3: #1d2c43;
    --bg-input: #0b162a;

    --text: #f8fafc;
    --text-soft: #b8c7dc;
    --text-muted: #7890af;
    --text-faint: #526987;

    --border: #223552;
    --border-soft: #1a2c47;

    --primary: #3b82f6;
    --primary-light: #60a5fa;
    --primary-dark: #2563eb;

    --violet: #8b5cf6;
    --violet-light: #a78bfa;

    --cyan: #06b6d4;
    --cyan-light: #22d3ee;

    --green: #10b981;
    --green-light: #34d399;

    --amber: #f59e0b;
    --amber-light: #fbbf24;

    --red: #ef4444;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.18);
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.32);

    --radius-xs: 5px;
    --radius-sm: 7px;
    --radius-md: 9px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --transition: 160ms ease;
}


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

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: 14px;
    line-height: 1.45;
    overflow-x: hidden;
}

body.menu-open,
body.modal-open {
    overflow: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    color: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button:not(:disabled) {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

input,
select,
textarea {
    outline: none;
}

[hidden] {
    display: none !important;
}


/* =========================================================
   SCROLLBAR
========================================================= */

* {
    scrollbar-width: thin;
    scrollbar-color: #334765 transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: #334765;
}

::-webkit-scrollbar-thumb:hover {
    background: #465e7e;
}


/* =========================================================
   SIDEBAR BACKDROP
========================================================= */

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 89;
    display: none;
    background: rgba(2, 8, 23, 0.76);
    backdrop-filter: blur(2px);
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 90;
    display: flex;
    width: var(--sidebar-width);
    min-height: 100vh;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid #17243a;
    background:
        linear-gradient(
            180deg,
            #071126 0%,
            #050c1c 60%,
            #040a17 100%
        );
}


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

.sidebar-brand {
    display: flex;
    min-height: 92px;
    align-items: center;
    padding: 14px 14px 12px;
    border-bottom: 1px solid #17243a;
}

.brand-link {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 9px;
}

.brand-symbol {
    display: flex;
    width: 50px;
    min-width: 50px;
    height: 44px;
    align-items: center;
    justify-content: center;
}

.brand-symbol svg {
    width: 50px;
    height: 42px;
    stroke: none;
}

.brand-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1;
}

.brand-copy strong {
    color: #7257ff;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -1.5px;
    text-transform: lowercase;
}

.brand-copy small {
    margin-top: 3px;
    color: #8d99ac;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 4px;
}


/* =========================================================
   CUENTA / PORTAL SIDEBAR
========================================================= */

.sidebar-account {
    display: flex;
    flex-direction: column;
    padding: 11px 12px 9px;
    border-bottom: 1px solid #17243a;
}

.sidebar-account-label {
    margin-bottom: 3px;
    color: #7188a8;
    font-size: 10px;
    letter-spacing: 0.7px;
}

.sidebar-account-name {
    overflow: hidden;
    color: #f8fafc;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-account-description {
    margin-top: 4px;
    color: #0fcfa6;
    font-size: 11px;
}


/* =========================================================
   SELECTOR DÍA / NOCHE
========================================================= */

.sidebar-theme {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    margin: 11px 12px 8px;
    padding: 3px;
    border: 1px solid #273752;
    border-radius: 13px;
    background: #172238;
}

.theme-option {
    display: flex;
    min-height: 31px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #9eb1cc;
    font-size: 11px;
    font-weight: 700;
    transition:
        background var(--transition),
        color var(--transition);
}

.theme-option.active {
    background: #394c68;
    color: #fff;
}

.theme-option:hover {
    color: #fff;
}


/* =========================================================
   NAVEGACIÓN SIDEBAR
========================================================= */

.sidebar-navigation {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    padding: 4px 8px 12px;
}

.sidebar-divider {
    height: 1px;
    margin: 7px 4px;
    background: #17243a;
}

.sidebar-section-label {
    padding: 6px 8px 4px;
    color: #607594;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.sidebar-link {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 36px;
    align-items: center;
    gap: 9px;
    padding: 6px 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #d5e0f0;
    text-align: left;
    transition:
        background var(--transition),
        color var(--transition);
}

.sidebar-link:hover {
    background: #111e33;
    color: #fff;
}

.sidebar-link.active {
    background:
        linear-gradient(
            90deg,
            #243a59 0%,
            #314966 100%
        );
    color: #fff;
}

.sidebar-link.active::before {
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: #4f91ff;
    content: "";
}

.sidebar-link > span:last-child {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    font-size: 11px;
    font-weight: 650;
    text-overflow: ellipsis;
}

.sidebar-link-icon {
    display: flex;
    width: 18px;
    min-width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    color: #4b94ff;
}

.sidebar-link-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    stroke: none;
}

.sidebar-service-icon {
    display: inline-flex;
    width: 18px;
    min-width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 7px;
    font-weight: 900;
    line-height: 1;
}

.icon-sat,
.icon-infonavit {
    border: 1px solid rgba(59, 130, 246, 0.55);
    background: rgba(59, 130, 246, 0.16);
    color: #60a5fa;
}

.icon-inhabilitacion,
.icon-actas,
.icon-invitaciones,
.icon-documentos {
    border: 1px solid rgba(139, 92, 246, 0.55);
    background: rgba(139, 92, 246, 0.17);
    color: #a78bfa;
}

.icon-imss {
    border: 1px solid rgba(16, 185, 129, 0.55);
    background: rgba(16, 185, 129, 0.16);
    color: #34d399;
}

.icon-curp,
.icon-cfe,
.icon-inea {
    border: 1px solid rgba(245, 158, 11, 0.58);
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.icon-issste,
.icon-vehicular {
    border: 1px solid rgba(6, 182, 212, 0.55);
    background: rgba(6, 182, 212, 0.15);
    color: #22d3ee;
}

.icon-afore {
    border: 1px solid rgba(59, 130, 246, 0.55);
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.icon-streaming,
.icon-suscripciones {
    border: 1px solid rgba(139, 92, 246, 0.55);
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

.icon-antecedentes {
    border: 1px solid rgba(139, 92, 246, 0.55);
    background: rgba(139, 92, 246, 0.15);
    color: #c4b5fd;
}


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

.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px 12px 11px;
    border-top: 1px solid #17243a;
    background: rgba(3, 9, 21, 0.7);
}

.sidebar-support {
    display: flex;
    min-height: 34px;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid rgba(16, 185, 129, 0.45);
    border-radius: 7px;
    background: rgba(5, 64, 55, 0.28);
    color: #43dfbd;
    text-align: left;
}

.sidebar-support:hover {
    border-color: rgba(52, 211, 153, 0.75);
    background: rgba(5, 82, 68, 0.4);
}

.sidebar-support-icon {
    display: flex;
    width: 18px;
    min-width: 18px;
}

.sidebar-support-icon svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
    stroke: none;
}

.sidebar-support-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.sidebar-support-copy strong {
    font-size: 10px;
}

.sidebar-support-copy small {
    margin-top: 1px;
    color: #6dcab4;
    font-size: 8px;
}

.sidebar-copyright {
    margin-top: 3px;
    color: #415572;
    font-size: 8px;
    text-align: center;
}


/* =========================================================
   HEADER MÓVIL
========================================================= */

.mobile-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 80;
    display: none;
    height: var(--mobile-header-height);
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border-bottom: 1px solid #1b2c46;
    background: rgba(5, 13, 30, 0.96);
    backdrop-filter: blur(14px);
}

.mobile-header-button {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid #263a58;
    border-radius: 9px;
    background: #111d31;
    color: #c9d7ea;
}

.mobile-header-button svg {
    width: 19px;
    height: 19px;
}

.mobile-brand {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #7257ff;
    font-size: 16px;
    font-weight: 900;
}

.mobile-brand-icon {
    font-size: 19px;
}

.mobile-whatsapp {
    border-color: rgba(16, 185, 129, 0.42);
    color: #34d399;
}

.mobile-whatsapp svg {
    fill: currentColor;
    stroke: none;
}


/* =========================================================
   CONTENIDO PRINCIPAL
========================================================= */

.main-content {
    width: calc(100% - var(--sidebar-width));
    min-height: 100vh;
    margin-left: var(--sidebar-width);
    padding: 13px 16px 88px;
}

.welcome-section,
.catalog,
.general-information-section,
.support-section,
.site-footer,
.service-view {
    width: 100%;
    max-width: 1280px;
    margin-right: auto;
    margin-left: auto;
}


/* =========================================================
   BIENVENIDA
========================================================= */

.welcome-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.welcome-copy {
    padding: 12px 14px 9px;
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 9px;
    background:
        linear-gradient(
            100deg,
            rgba(76, 29, 149, 0.84),
            rgba(88, 28, 135, 0.54)
        );
    box-shadow: var(--shadow-sm);
}

.welcome-copy h1 {
    color: #fff;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -0.3px;
}

.welcome-copy p {
    margin-top: 2px;
    color: #cbbfea;
    font-size: 9px;
}


/* =========================================================
   BANNER INFORMATIVO
========================================================= */

.information-banner {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    border: 1px solid rgba(139, 92, 246, 0.34);
    border-radius: 8px;
    background:
        linear-gradient(
            90deg,
            rgba(60, 28, 112, 0.9),
            rgba(69, 26, 91, 0.72)
        );
}

.information-banner-main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.information-banner-icon {
    display: inline-flex;
    width: 32px;
    min-width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.22);
    color: #c4b5fd;
}

.information-banner-icon svg {
    width: 17px;
    height: 17px;
}

.information-banner-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.information-banner-label {
    color: #a891da;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.7px;
}

.information-banner-copy strong {
    color: #fff;
    font-size: 11px;
}

.information-banner-copy small {
    margin-top: 2px;
    color: #ad9ec9;
    font-size: 8px;
}

.information-banner-button {
    flex: 0 0 auto;
    min-height: 31px;
    padding: 0 12px;
    border: 1px solid #9168ff;
    border-radius: 6px;
    background: #fff;
    color: #6837d8;
    font-size: 9px;
    font-weight: 800;
    transition:
        transform var(--transition),
        opacity var(--transition);
}

.information-banner-button:hover {
    transform: translateY(-1px);
}


/* =========================================================
   COMUNIDAD WHATSAPP
========================================================= */

.community-banner {
    display: flex;
    min-height: 58px;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid rgba(16, 185, 129, 0.52);
    border-radius: 8px;
    background:
        linear-gradient(
            90deg,
            rgba(0, 82, 68, 0.55),
            rgba(6, 61, 57, 0.26)
        );
}

.community-banner-icon {
    display: inline-flex;
    width: 34px;
    min-width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.16);
    color: #34d399;
}

.community-banner-icon svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
    stroke: none;
}

.community-banner-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.community-banner-copy strong {
    color: #ecfdf5;
    font-size: 11px;
}

.community-banner-copy span {
    margin-top: 2px;
    color: #87cfbe;
    font-size: 8px;
}

.community-banner-button {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 20px;
    background: #22e69f;
    color: #033e33;
    font-size: 9px;
    font-weight: 900;
}

.community-banner-button:hover {
    background: #4ef0b4;
}


/* =========================================================
   CATÁLOGO
========================================================= */

.catalog {
    padding-top: 10px;
}

.catalog-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.catalog-toolbar-heading {
    display: flex;
    flex-direction: column;
}

.catalog-toolbar-heading span {
    color: #7188a7;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.75px;
}

.catalog-search {
    position: relative;
    display: flex;
    width: 230px;
    height: 32px;
    align-items: center;
}

.catalog-search svg {
    position: absolute;
    left: 10px;
    width: 14px;
    height: 14px;
    color: #7287a5;
}

.catalog-search input {
    width: 100%;
    height: 100%;
    padding: 0 11px 0 32px;
    border: 1px solid #263a58;
    border-radius: 7px;
    background: #0c182b;
    color: #eaf1fb;
    font-size: 10px;
}

.catalog-search input::placeholder {
    color: #647a99;
}

.catalog-search input:focus {
    border-color: #4c83d6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}


/* =========================================================
   CHIPS / FILTROS
========================================================= */

.category-filters {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.category-filters::-webkit-scrollbar {
    display: none;
}

.category-chip {
    flex: 0 0 auto;
    min-height: 26px;
    padding: 0 11px;
    border: 1px solid #273b58;
    border-radius: 999px;
    background: #17243a;
    color: #bac8da;
    font-size: 8px;
    font-weight: 750;
    white-space: nowrap;
    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}

.category-chip:hover {
    border-color: #466184;
    color: #fff;
}

.category-chip.active {
    border-color: #635bff;
    background: #4f46e5;
    color: #fff;
}

.catalog-results {
    min-height: 8px;
    margin-top: 3px;
    color: #637997;
    font-size: 8px;
}


/* =========================================================
   SECCIONES DEL CATÁLOGO
========================================================= */

.catalog-category {
    --category-color: #3b82f6;
    --category-soft: rgba(59, 130, 246, 0.14);
    --category-border: rgba(59, 130, 246, 0.36);

    margin-top: 11px;
}

.category-title {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
    color: #dce6f5;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.4px;
}

.category-title-marker {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--category-color);
    box-shadow: 0 0 10px color-mix(in srgb, var(--category-color) 50%, transparent);
}


/* =========================================================
   COLORES POR CATEGORÍA
========================================================= */

.category-sat,
.category-infonavit,
.category-afore {
    --category-color: #3b82f6;
    --category-soft: rgba(59, 130, 246, 0.14);
    --category-border: rgba(59, 130, 246, 0.38);
}

.category-actas,
.category-invitaciones,
.category-documentos,
.category-streaming,
.category-inhabilitacion {
    --category-color: #8b5cf6;
    --category-soft: rgba(139, 92, 246, 0.14);
    --category-border: rgba(139, 92, 246, 0.38);
}

.category-imss {
    --category-color: #10b981;
    --category-soft: rgba(16, 185, 129, 0.14);
    --category-border: rgba(16, 185, 129, 0.38);
}

.category-issste,
.category-vehicular,
.category-suscripciones {
    --category-color: #06b6d4;
    --category-soft: rgba(6, 182, 212, 0.14);
    --category-border: rgba(6, 182, 212, 0.38);
}

.category-inea,
.category-otros {
    --category-color: #f59e0b;
    --category-soft: rgba(245, 158, 11, 0.14);
    --category-border: rgba(245, 158, 11, 0.38);
}


/* =========================================================
   GRID
========================================================= */

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}


/* =========================================================
   TARJETAS
========================================================= */

.service-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 129px;
    flex-direction: column;
    padding: 8px;
    overflow: hidden;
    border: 1px solid var(--category-border);
    border-radius: 8px;
    background:
        linear-gradient(
            145deg,
            rgba(24, 39, 62, 0.98),
            rgba(17, 29, 49, 0.98)
        );
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.service-card::after {
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--category-color),
            transparent
        );
    content: "";
    opacity: 0;
    transition: opacity var(--transition);
}

.service-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(
        in srgb,
        var(--category-color) 70%,
        transparent
    );
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.service-card:hover::after {
    opacity: 0.8;
}


/* =========================================================
   PARTE SUPERIOR DE TARJETA
========================================================= */

.service-card-top {
    display: flex;
    min-height: 30px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.document-thumbnail {
    position: relative;
    display: block;
    width: 28px;
    min-width: 28px;
    height: 30px;
    overflow: hidden;
    border: 1px solid color-mix(
        in srgb,
        var(--category-color) 70%,
        white 5%
    );
    border-radius: 4px;
    background: #f7fbff;
    color: var(--category-color);
}

.document-thumbnail-band {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 6px;
    background: var(--category-color);
}

.document-thumbnail-line {
    position: absolute;
    left: 5px;
    height: 2px;
    border-radius: 2px;
    background: #b5c5d9;
}

.document-thumbnail-line.line-short {
    top: 11px;
    width: 9px;
}

.document-thumbnail-line.line-long {
    top: 15px;
    width: 15px;
}

.document-thumbnail-symbol {
    position: absolute;
    right: 3px;
    bottom: 2px;
    color: var(--category-color);
    font-size: 7px;
    font-weight: 900;
    line-height: 1;
}

.service-price {
    display: inline-flex;
    min-height: 18px;
    align-items: center;
    gap: 2px;
    padding: 2px 5px;
    border-radius: 5px;
    background: var(--category-color);
    color: #fff;
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.service-price small {
    font-size: 5px;
    font-weight: 800;
}


/* =========================================================
   CONTENIDO TARJETA
========================================================= */

.service-card-heading {
    display: flex;
    min-height: 31px;
    align-items: flex-start;
    gap: 5px;
    margin-top: 5px;
}

.service-card-heading h3 {
    min-width: 0;
    color: #f6f9fe;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
}

.service-card > p {
    display: -webkit-box;
    min-height: 24px;
    margin-top: 1px;
    overflow: hidden;
    color: #aab9cd;
    font-size: 7px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.popular-badge,
.maintenance-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.popular-badge {
    padding: 3px 4px;
    background: #fbbf24;
    color: #3c2600;
    font-size: 5px;
}

.maintenance-badge {
    padding: 3px 4px;
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    font-size: 5px;
}


/* =========================================================
   BOTÓN ABRIR
========================================================= */

.service-open-button {
    display: flex;
    width: 100%;
    min-height: 25px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: auto;
    padding: 3px 8px;
    border: 1px solid var(--category-border);
    border-radius: 5px;
    background: var(--category-soft);
    color: #eef5ff;
    font-size: 7px;
    font-weight: 750;
    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.service-open-button svg {
    width: 9px;
    height: 9px;
}

.service-open-button:hover {
    border-color: var(--category-color);
    background: color-mix(
        in srgb,
        var(--category-color) 25%,
        transparent
    );
}

.service-open-button:active {
    transform: scale(0.985);
}


/* =========================================================
   STREAMING
========================================================= */

.streaming-card {
    min-height: 138px;
}

.streaming-thumbnail {
    display: inline-flex;
    width: 30px;
    min-width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--category-border);
    border-radius: 5px;
    background: #1e2141;
    color: #fff;
    font-size: 7px;
    font-weight: 900;
}

.streaming-hbo {
    background:
        linear-gradient(
            135deg,
            #422580,
            #241a54
        );
    color: #c4b5fd;
}

.streaming-vix {
    background:
        linear-gradient(
            135deg,
            #5920aa,
            #302070
        );
    color: #fff;
}

.streaming-crunchyroll {
    background:
        linear-gradient(
            135deg,
            #f97316,
            #9a3412
        );
    color: #fff;
}

.streaming-iptv {
    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #312e81
        );
    color: #fff;
}

.streaming-paramount {
    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1e3a8a
        );
    color: #fff;
}

.streaming-canva {
    background:
        linear-gradient(
            135deg,
            #06b6d4,
            #7c3aed
        );
    color: #fff;
}


/* =========================================================
   ESTADO VACÍO
========================================================= */

.catalog-empty-state {
    display: flex;
    min-height: 240px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    padding: 30px;
    border: 1px dashed #29405f;
    border-radius: 10px;
    background: rgba(14, 27, 46, 0.7);
    text-align: center;
}

.catalog-empty-icon {
    font-size: 30px;
}

.catalog-empty-state strong {
    margin-top: 10px;
    color: #e6eef9;
    font-size: 14px;
}

.catalog-empty-state p {
    margin-top: 5px;
    color: #8296b2;
    font-size: 10px;
}

.clear-filters-button {
    min-height: 31px;
    margin-top: 14px;
    padding: 0 13px;
    border: 1px solid #3b82f6;
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.14);
    color: #7cb4ff;
    font-size: 9px;
    font-weight: 800;
}


/* =========================================================
   INFORMACIÓN GENERAL
========================================================= */

.general-information-section {
    margin-top: 18px;
}

.general-information-card {
    overflow: hidden;
    border: 1px solid #253854;
    border-radius: 9px;
    background: #111d31;
}

.general-information-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border-bottom: 1px solid #263852;
    background: #18263b;
}

.general-information-icon {
    display: inline-flex;
    width: 31px;
    min-width: 31px;
    height: 31px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.general-information-icon svg {
    width: 17px;
    height: 17px;
}

.general-information-header > div {
    display: flex;
    flex-direction: column;
}

.general-information-header strong {
    color: #f1f6fc;
    font-size: 11px;
}

.general-information-header span {
    margin-top: 1px;
    color: #7990ae;
    font-size: 8px;
}

.general-information-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 10px 12px;
}

.information-row {
    display: flex;
    min-height: 44px;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    border: 1px solid #223551;
    border-radius: 7px;
    background: #0d192b;
}

.information-row > span {
    font-size: 13px;
}

.information-row p {
    color: #9dafc5;
    font-size: 9px;
}

.information-row strong {
    color: #e4edf8;
}


/* =========================================================
   SOPORTE
========================================================= */

.support-section {
    margin-top: 12px;
}

.support-card {
    position: relative;
    display: flex;
    min-height: 80px;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    overflow: hidden;
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 9px;
    background:
        linear-gradient(
            100deg,
            rgba(5, 68, 58, 0.6),
            rgba(11, 40, 46, 0.45)
        );
}

.support-card-decoration {
    position: absolute;
    top: -50px;
    right: 60px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.06);
}

.support-card-icon {
    position: relative;
    z-index: 1;
    display: flex;
    width: 40px;
    min-width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.16);
    color: #34d399;
}

.support-card-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    stroke: none;
}

.support-card-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1;
}

.support-card-label {
    color: #4ed5b7;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.8px;
}

.support-card-copy h2 {
    margin-top: 1px;
    color: #f0fdf9;
    font-size: 13px;
    font-weight: 850;
}

.support-card-copy p {
    margin-top: 2px;
    color: #8ec9bc;
    font-size: 9px;
}

.support-card-button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 5px;
    padding: 0 13px;
    border: 0;
    border-radius: 6px;
    background: #10b981;
    color: #fff;
    font-size: 9px;
    font-weight: 850;
}

.support-card-button svg {
    width: 11px;
    height: 11px;
}


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

.site-footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #172b45;
}

.site-footer-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-footer-brand {
    display: flex;
    align-items: center;
    gap: 6px;
}

.site-footer-brand-icon {
    color: #7657ff;
    font-size: 20px;
}

.site-footer-brand > span:last-child {
    display: flex;
    flex-direction: column;
}

.site-footer-brand strong {
    color: #836dff;
    font-size: 11px;
}

.site-footer-brand small {
    color: #627896;
    font-size: 6px;
    letter-spacing: 1.4px;
}

.site-footer-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    color: #657b98;
    font-size: 8px;
}

.site-footer-whatsapp {
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 6px;
    background: rgba(16, 185, 129, 0.1);
    color: #45d4b2;
    font-size: 8px;
    font-weight: 750;
}

.site-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0 4px;
    color: #445b78;
    font-size: 7px;
}


/* =========================================================
   BOTTOM NAV
   OCULTO EN ESCRITORIO
========================================================= */

.bottom-navigation {
    display: none;
}


/* =========================================================
   FIN PARTE 1 DE 3
   NO BORRES NADA.
   LA PARTE 2 VA JUSTO DEBAJO.
========================================================= */

/* =========================================================
   STYLE.CSS
   PARTE 2 DE 3
   DETALLE DE SERVICIOS + FORMULARIOS + MODALES
========================================================= */


/* =========================================================
   VISTA INTERNA DEL SERVICIO
========================================================= */

.service-view {
    min-height: calc(100vh - 40px);
    animation: serviceViewIn 180ms ease;
}

@keyframes serviceViewIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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


/* =========================================================
   CABECERA DEL SERVICIO
========================================================= */

.service-view-header {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.service-back-button {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
    border: 1px solid #263a58;
    border-radius: 6px;
    background: #111d31;
    color: #c5d3e6;
    font-size: 9px;
    font-weight: 750;
    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition);
}

.service-back-button:hover {
    border-color: #416088;
    background: #172840;
    color: #fff;
}

.service-back-button:active {
    transform: scale(0.98);
}

.service-back-button svg {
    width: 13px;
    height: 13px;
}

.service-view-breadcrumb {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    overflow: hidden;
    color: #617996;
    font-size: 8px;
    white-space: nowrap;
}

.service-view-breadcrumb > span:last-child {
    max-width: 260px;
    overflow: hidden;
    color: #9eb0c6;
    text-overflow: ellipsis;
}

.breadcrumb-home,
.breadcrumb-category {
    padding: 0;
    border: 0;
    background: transparent;
    color: #6fa7ef;
    font-size: inherit;
}

.breadcrumb-home:hover,
.breadcrumb-category:hover {
    color: #a8cdfd;
}


/* =========================================================
   HERO DEL DETALLE
========================================================= */

.service-detail-hero {
    position: relative;
    display: flex;
    min-height: 116px;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
    overflow: hidden;
    border: 1px solid #283b59;
    border-radius: 10px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(99, 102, 241, 0.14),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #17253a,
            #0e1a2d
        );
    box-shadow: var(--shadow-sm);
}

.service-detail-hero::after {
    position: absolute;
    top: -70px;
    right: -60px;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(139, 92, 246, 0.1);
    border-radius: 50%;
    content: "";
}

.service-detail-icon {
    position: relative;
    z-index: 1;
    display: flex;
    width: 66px;
    min-width: 66px;
    height: 66px;
    align-items: center;
    justify-content: center;
    border: 1px solid #314866;
    border-radius: 12px;
    background: rgba(7, 18, 35, 0.72);
}

.service-detail-icon .document-thumbnail {
    width: 38px;
    min-width: 38px;
    height: 43px;
}

.service-detail-icon .document-thumbnail-band {
    height: 8px;
}

.service-detail-icon .document-thumbnail-line.line-short {
    top: 16px;
    width: 13px;
}

.service-detail-icon .document-thumbnail-line.line-long {
    top: 21px;
    width: 21px;
}

.service-detail-icon .document-thumbnail-symbol {
    right: 4px;
    bottom: 3px;
    font-size: 9px;
}

.service-detail-heading {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.service-detail-category {
    margin-bottom: 4px;
    color: #6da8f2;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.service-detail-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.service-detail-title-row h1 {
    color: #f7faff;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.4px;
    line-height: 1.15;
}

.service-detail-badge {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 19px;
    align-items: center;
    padding: 0 6px;
    border-radius: 5px;
    background: #fbbf24;
    color: #412b00;
    font-size: 6px;
    font-weight: 900;
}

.service-detail-heading > p {
    max-width: 720px;
    margin-top: 5px;
    color: #9eb0c5;
    font-size: 10px;
    line-height: 1.45;
}

.service-detail-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
}

.service-detail-price,
.service-detail-status {
    display: inline-flex;
    min-height: 23px;
    align-items: center;
    padding: 0 8px;
    border-radius: 5px;
    font-size: 8px;
    font-weight: 850;
}

.service-detail-price {
    border: 1px solid rgba(59, 130, 246, 0.45);
    background: rgba(59, 130, 246, 0.12);
    color: #83b8fc;
}

.service-detail-status {
    border: 1px solid rgba(16, 185, 129, 0.42);
    background: rgba(16, 185, 129, 0.11);
    color: #51d7b6;
}

.service-detail-status.warning {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.11);
    color: #fbbf24;
}

.service-detail-status.danger {
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}


/* =========================================================
   ALERTAS DEL SERVICIO
========================================================= */

.service-alerts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.service-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #2b405e;
    border-radius: 7px;
    background: #111e32;
    color: #aebed1;
    font-size: 9px;
}

.service-alert-icon {
    display: inline-flex;
    width: 20px;
    min-width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 11px;
}

.service-alert-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.service-alert-copy strong {
    color: #edf4fc;
    font-size: 9px;
}

.service-alert-copy p {
    margin-top: 1px;
    color: inherit;
    font-size: 8px;
}

.service-alert.info {
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(30, 64, 175, 0.12);
    color: #aac9ef;
}

.service-alert.info .service-alert-icon {
    background: rgba(59, 130, 246, 0.16);
    color: #60a5fa;
}

.service-alert.success {
    border-color: rgba(16, 185, 129, 0.42);
    background: rgba(5, 100, 82, 0.12);
    color: #9dd8c9;
}

.service-alert.success .service-alert-icon {
    background: rgba(16, 185, 129, 0.16);
    color: #34d399;
}

.service-alert.warning {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(120, 75, 5, 0.13);
    color: #dbc28b;
}

.service-alert.warning .service-alert-icon {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
}

.service-alert.danger {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(127, 29, 29, 0.13);
    color: #e8a4a4;
}

.service-alert.danger .service-alert-icon {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}


/* =========================================================
   PESTAÑAS
========================================================= */

.service-tabs-wrapper {
    margin-top: 9px;
    overflow-x: auto;
    border-bottom: 1px solid #213550;
    scrollbar-width: none;
}

.service-tabs-wrapper::-webkit-scrollbar {
    display: none;
}

.service-tabs {
    display: flex;
    min-width: max-content;
    align-items: center;
    gap: 2px;
}

.service-tab {
    position: relative;
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    gap: 5px;
    padding: 0 11px;
    border: 0;
    background: transparent;
    color: #7389a5;
    font-size: 9px;
    font-weight: 750;
    transition:
        color var(--transition),
        background var(--transition);
}

.service-tab::after {
    position: absolute;
    right: 8px;
    bottom: -1px;
    left: 8px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: #5e8eff;
    content: "";
    opacity: 0;
}

.service-tab svg {
    width: 13px;
    height: 13px;
}

.service-tab:hover {
    color: #c6d5e8;
}

.service-tab.active {
    color: #80b2ff;
}

.service-tab.active::after {
    opacity: 1;
}


/* =========================================================
   PANELES
========================================================= */

.service-tab-panel {
    padding-top: 9px;
}

.service-tab-panel.active {
    animation: servicePanelIn 150ms ease;
}

@keyframes servicePanelIn {
    from {
        opacity: 0;
        transform: translateY(2px);
    }

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


/* =========================================================
   LAYOUT PRINCIPAL
========================================================= */

.service-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 9px;
    align-items: start;
}

.service-main-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}

.service-side-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}

.service-panel-single {
    display: flex;
    width: 100%;
    max-width: 930px;
    flex-direction: column;
    gap: 8px;
}


/* =========================================================
   CAJA INFORMACIÓN IMPORTANTE
========================================================= */

.service-information-box {
    overflow: hidden;
    border: 1px solid #2b405d;
    border-radius: 9px;
    background: #101d30;
}

.service-information-box-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border-bottom: 1px solid #283b57;
    background:
        linear-gradient(
            90deg,
            rgba(30, 64, 175, 0.18),
            rgba(17, 29, 48, 0.5)
        );
}

.service-information-box-icon {
    display: inline-flex;
    width: 29px;
    min-width: 29px;
    height: 29px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(59, 130, 246, 0.14);
    color: #60a5fa;
}

.service-information-box-icon svg {
    width: 16px;
    height: 16px;
}

.service-information-box-header > div {
    display: flex;
    flex-direction: column;
}

.service-information-box-header h2 {
    color: #f0f5fc;
    font-size: 10px;
    font-weight: 850;
}

.service-information-box-header span {
    margin-top: 1px;
    color: #7389a6;
    font-size: 7px;
}

.service-information-box-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
}

.service-information-row {
    display: flex;
    min-height: 44px;
    align-items: flex-start;
    gap: 7px;
    padding: 7px;
    border: 1px solid #20344f;
    border-radius: 6px;
    background: #0b1729;
}

.service-information-row-icon {
    display: inline-flex;
    width: 21px;
    min-width: 21px;
    height: 21px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: rgba(59, 130, 246, 0.12);
    color: #6da9f5;
    font-size: 10px;
}

.service-information-row-text {
    color: #a6b7cc;
    font-size: 8px;
    line-height: 1.4;
}


/* =========================================================
   CARDS DE CONTENIDO
========================================================= */

.service-content-card {
    overflow: hidden;
    border: 1px solid #253953;
    border-radius: 9px;
    background: #101c2f;
}

.service-content-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border-bottom: 1px solid #263a55;
    background: #17253a;
}

.service-content-card-icon {
    display: inline-flex;
    width: 29px;
    min-width: 29px;
    height: 29px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
}

.service-content-card-icon svg {
    width: 16px;
    height: 16px;
}

.service-content-card-header > div {
    display: flex;
    flex-direction: column;
}

.service-content-card-header h2 {
    color: #eef4fb;
    font-size: 10px;
    font-weight: 850;
}

.service-content-card-header span {
    margin-top: 1px;
    color: #7389a5;
    font-size: 7px;
}

.service-content-card-body {
    padding: 10px 11px;
    color: #9eafc3;
    font-size: 9px;
    line-height: 1.55;
}

.service-content-card-body p + p {
    margin-top: 7px;
}

.service-content-card-body strong {
    color: #e3ebf5;
}

.service-content-card-body ul,
.service-content-card-body ol {
    margin: 6px 0 0;
    padding-left: 18px;
}

.service-content-card-body li + li {
    margin-top: 3px;
}


/* =========================================================
   PASOS
========================================================= */

.service-steps {
    display: flex;
    flex-direction: column;
    padding: 5px 11px 11px;
}

.service-step {
    position: relative;
    display: flex;
    gap: 9px;
    padding: 7px 0;
}

.service-step:not(:last-child)::before {
    position: absolute;
    top: 28px;
    bottom: -8px;
    left: 11px;
    width: 1px;
    background: #304560;
    content: "";
}

.service-step-number {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 23px;
    min-width: 23px;
    height: 23px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(59, 130, 246, 0.5);
    border-radius: 50%;
    background: #13233a;
    color: #72abfa;
    font-size: 8px;
    font-weight: 900;
}

.service-step-copy {
    display: flex;
    flex-direction: column;
    padding-top: 2px;
}

.service-step-title {
    color: #e7eef7;
    font-size: 9px;
}

.service-step-description {
    margin-top: 2px;
    color: #8295ae;
    font-size: 8px;
    line-height: 1.4;
}


/* =========================================================
   NOTAS
========================================================= */

.service-notes-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.service-notes {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.service-note {
    padding: 8px 10px;
    border-left: 3px solid #f59e0b;
    border-radius: 0 6px 6px 0;
    background: rgba(120, 75, 5, 0.12);
    color: #c7b58f;
    font-size: 8px;
    line-height: 1.45;
}


/* =========================================================
   RESUMEN LATERAL
========================================================= */

.service-summary-card {
    overflow: hidden;
    border: 1px solid #263a56;
    border-radius: 9px;
    background: #101c2e;
}

.service-summary-header {
    padding: 9px 10px;
    border-bottom: 1px solid #263a55;
    background: #17253a;
}

.service-summary-header h3 {
    color: #edf3fb;
    font-size: 9px;
    font-weight: 850;
}

.service-summary-body {
    display: flex;
    flex-direction: column;
    padding: 4px 9px;
}

.service-summary-row {
    display: flex;
    min-height: 31px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #1b2f49;
}

.service-summary-row:last-child {
    border-bottom: 0;
}

.service-summary-row-label {
    color: #738aa6;
    font-size: 8px;
}

.service-summary-row-value {
    max-width: 130px;
    overflow: hidden;
    color: #cbd8e7;
    font-size: 8px;
    text-align: right;
    text-overflow: ellipsis;
}


/* =========================================================
   AYUDA LATERAL
========================================================= */

.service-help-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 13px 11px;
    border: 1px solid rgba(16, 185, 129, 0.38);
    border-radius: 9px;
    background:
        linear-gradient(
            145deg,
            rgba(5, 82, 68, 0.3),
            rgba(9, 39, 44, 0.35)
        );
    text-align: center;
}

.service-help-icon {
    display: flex;
    width: 35px;
    height: 35px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.14);
    font-size: 17px;
}

.service-help-copy {
    margin-top: 7px;
}

.service-help-copy strong {
    color: #e8fcf7;
    font-size: 10px;
}

.service-help-copy p {
    margin-top: 2px;
    color: #78b9a9;
    font-size: 8px;
}

.service-help-button {
    width: 100%;
    min-height: 29px;
    margin-top: 9px;
    border: 0;
    border-radius: 6px;
    background: #10b981;
    color: #fff;
    font-size: 8px;
    font-weight: 850;
}

.service-help-button:hover {
    background: #17c98f;
}


/* =========================================================
   REQUISITOS
========================================================= */

.requirements-list {
    display: flex;
    flex-direction: column;
    padding: 5px 11px 10px;
}

.requirement-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 0;
    border-bottom: 1px solid #1e324c;
}

.requirement-item:last-child {
    border-bottom: 0;
}

.requirement-check {
    display: inline-flex;
    width: 23px;
    min-width: 23px;
    height: 23px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(16, 185, 129, 0.42);
    border-radius: 6px;
    background: rgba(16, 185, 129, 0.11);
    color: #34d399;
}

.requirement-check svg {
    width: 13px;
    height: 13px;
    stroke-width: 2.3;
}

.requirement-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.requirement-title {
    color: #e4edf7;
    font-size: 9px;
}

.requirement-description {
    margin-top: 2px;
    color: #8094ae;
    font-size: 8px;
    line-height: 1.4;
}


/* =========================================================
   FORMULARIO
========================================================= */

.service-form-card {
    overflow: hidden;
    border: 1px solid #293e5b;
    border-radius: 10px;
    background: #101c2e;
}

.service-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 13px;
    border-bottom: 1px solid #293d59;
    background:
        linear-gradient(
            110deg,
            #172740,
            #142238
        );
}

.service-form-eyebrow {
    display: block;
    margin-bottom: 2px;
    color: #6da8f3;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.7px;
}

.service-form-header h2 {
    color: #f1f6fc;
    font-size: 13px;
    font-weight: 850;
}

.service-form-header p {
    margin-top: 3px;
    color: #8094ae;
    font-size: 8px;
}

.service-information-form {
    padding: 12px;
}

.service-form-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.form-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.form-field-full {
    grid-column: 1 / -1;
}

.form-field-label {
    margin-bottom: 4px;
    color: #bbc9da;
    font-size: 8px;
    font-weight: 700;
}

.form-field-label .required,
.form-field-label.required::after {
    color: #f87171;
}

.form-field-label.required::after {
    margin-left: 2px;
    content: "*";
}

.form-field-control {
    position: relative;
    width: 100%;
}

.form-field-control input,
.form-field-control select,
.form-field-control textarea {
    width: 100%;
    border: 1px solid #2a405f;
    border-radius: 6px;
    background: #0b1728;
    color: #dce6f3;
    font-size: 9px;
    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.form-field-control input,
.form-field-control select {
    height: 34px;
    padding: 0 9px;
}

.form-field-control textarea {
    min-height: 86px;
    padding: 8px 9px;
    line-height: 1.4;
    resize: vertical;
}

.form-field-control input::placeholder,
.form-field-control textarea::placeholder {
    color: #526985;
}

.form-field-control input:focus,
.form-field-control select:focus,
.form-field-control textarea:focus {
    border-color: #4f83ca;
    background: #0c1a2d;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.11);
}

.form-field-control input:disabled,
.form-field-control select:disabled,
.form-field-control textarea:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.form-field-control select {
    appearance: none;
    padding-right: 30px;
    background-image:
        linear-gradient(45deg, transparent 50%, #6f87a5 50%),
        linear-gradient(135deg, #6f87a5 50%, transparent 50%);
    background-position:
        calc(100% - 14px) 14px,
        calc(100% - 10px) 14px;
    background-repeat: no-repeat;
    background-size: 4px 4px, 4px 4px;
}

.form-field-help {
    min-height: 12px;
    margin-top: 3px;
    color: #637a98;
    font-size: 7px;
}

.form-field.error .form-field-control input,
.form-field.error .form-field-control select,
.form-field.error .form-field-control textarea {
    border-color: rgba(239, 68, 68, 0.75);
}

.form-field.error .form-field-help {
    color: #f87171;
}


/* =========================================================
   CHECKBOX
========================================================= */

.form-checkbox {
    display: flex;
    grid-column: 1 / -1;
    align-items: flex-start;
    gap: 7px;
    color: #8fa2ba;
    font-size: 8px;
    cursor: pointer;
}

.form-checkbox input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.form-checkbox-custom {
    position: relative;
    display: inline-flex;
    width: 16px;
    min-width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    border: 1px solid #38506f;
    border-radius: 4px;
    background: #0b1729;
    transition:
        background var(--transition),
        border-color var(--transition);
}

.form-checkbox input:checked + .form-checkbox-custom {
    border-color: #3b82f6;
    background: #3b82f6;
}

.form-checkbox input:checked + .form-checkbox-custom::after {
    width: 6px;
    height: 3px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    content: "";
    transform: translateY(-1px) rotate(-45deg);
}

.form-checkbox-copy {
    padding-top: 2px;
    line-height: 1.4;
}


/* =========================================================
   AVISO DEL FORMULARIO
========================================================= */

.service-form-notice {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 11px;
    padding: 8px 9px;
    border: 1px solid rgba(59, 130, 246, 0.32);
    border-radius: 6px;
    background: rgba(30, 64, 175, 0.08);
}

.service-form-notice-icon {
    display: inline-flex;
    width: 19px;
    min-width: 19px;
    height: 19px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    font-size: 9px;
}

.service-form-notice p {
    color: #8199b8;
    font-size: 8px;
    line-height: 1.4;
}


/* =========================================================
   ACCIONES DEL FORMULARIO
========================================================= */

.service-form-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 11px;
}

.service-form-primary,
.service-form-secondary {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 8px;
    font-weight: 850;
    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.service-form-primary {
    border: 1px solid #3478d8;
    background:
        linear-gradient(
            180deg,
            #3b82f6,
            #2563eb
        );
    color: #fff;
}

.service-form-primary:hover {
    background:
        linear-gradient(
            180deg,
            #4b8ef9,
            #2d6ee8
        );
}

.service-form-secondary {
    border: 1px solid #304561;
    background: #15233a;
    color: #9eb0c6;
}

.service-form-secondary:hover {
    border-color: #435e80;
    color: #d3deeb;
}

.service-form-primary:active,
.service-form-secondary:active {
    transform: scale(0.985);
}


/* =========================================================
   AYUDA GRANDE
========================================================= */

.service-help-large {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    border: 1px solid rgba(16, 185, 129, 0.42);
    border-radius: 10px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(16, 185, 129, 0.1),
            transparent 40%
        ),
        #101e2d;
}

.service-help-large-icon {
    display: flex;
    width: 54px;
    min-width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.14);
    color: #34d399;
}

.service-help-large-icon svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
    stroke: none;
}

.service-help-large-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
}

.service-help-large-copy > span {
    color: #50d4b4;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.8px;
}

.service-help-large-copy h2 {
    margin-top: 2px;
    color: #f0fcf8;
    font-size: 15px;
}

.service-help-large-copy p {
    max-width: 620px;
    margin-top: 4px;
    color: #83b8ab;
    font-size: 9px;
}

.service-help-large-button {
    display: inline-flex;
    min-height: 31px;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: #10b981;
    color: #fff;
    font-size: 8px;
    font-weight: 850;
}

.service-help-large-button svg {
    width: 11px;
    height: 11px;
}


/* =========================================================
   FAQ
========================================================= */

.service-faq {
    display: flex;
    flex-direction: column;
    padding: 5px 10px 10px;
}

.faq-item {
    border-bottom: 1px solid #20334e;
}

.faq-item:last-child {
    border-bottom: 0;
}

.faq-question {
    display: flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 2px;
    border: 0;
    background: transparent;
    color: #cbd7e6;
    text-align: left;
}

.faq-question-text {
    font-size: 9px;
    font-weight: 750;
}

.faq-question svg {
    width: 13px;
    min-width: 13px;
    height: 13px;
    color: #6d84a1;
    transition: transform var(--transition);
}

.faq-question[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 20px 9px 2px;
}

.faq-answer p {
    color: #8295ad;
    font-size: 8px;
    line-height: 1.5;
}


/* =========================================================
   PIE DEL DETALLE
========================================================= */

.service-view-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #1d3049;
}

.service-return-button {
    display: inline-flex;
    min-height: 31px;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    border: 1px solid #2c4260;
    border-radius: 6px;
    background: #111e31;
    color: #9cafc6;
    font-size: 8px;
    font-weight: 750;
}

.service-return-button:hover {
    border-color: #436080;
    color: #e1e9f3;
}

.service-return-button svg {
    width: 12px;
    height: 12px;
}


/* =========================================================
   MODALES
========================================================= */

.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition:
        opacity 160ms ease,
        visibility 160ms ease;
}

.modal.open {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 8, 23, 0.8);
    backdrop-filter: blur(4px);
}

.modal-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 36px);
    padding: 19px;
    overflow-y: auto;
    border: 1px solid #314765;
    border-radius: 12px;
    background:
        linear-gradient(
            145deg,
            #18273e,
            #101b2e
        );
    box-shadow: var(--shadow-lg);
    transform: scale(0.96) translateY(6px);
    transition: transform 170ms ease;
}

.modal.open .modal-dialog {
    transform: scale(1) translateY(0);
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    width: 29px;
    height: 29px;
    align-items: center;
    justify-content: center;
    border: 1px solid #30445f;
    border-radius: 7px;
    background: #142238;
    color: #7f94ae;
}

.modal-close:hover {
    border-color: #496381;
    color: #fff;
}

.modal-close svg {
    width: 14px;
    height: 14px;
}

.modal-icon {
    display: flex;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.14);
    color: #60a5fa;
    font-size: 21px;
}

.modal-label {
    display: block;
    margin-bottom: 3px;
    color: #6fa8ef;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.8px;
}

.modal-dialog h2 {
    max-width: calc(100% - 35px);
    color: #f3f7fc;
    font-size: 16px;
    line-height: 1.2;
}

.modal-content {
    margin-top: 9px;
    color: #91a4bd;
    font-size: 9px;
    line-height: 1.55;
}

.modal-content p + p {
    margin-top: 7px;
}

.modal-content strong {
    color: #dfe8f3;
}

.modal-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
}

.modal-primary-button,
.modal-secondary-button {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 8px;
    font-weight: 850;
}

.modal-primary-button {
    border: 1px solid #3b82f6;
    background: #3b82f6;
    color: #fff;
}

.modal-primary-button:hover {
    background: #4b8df6;
}

.modal-secondary-button {
    border: 1px solid #354b68;
    background: #142238;
    color: #a1b2c8;
}

.modal-secondary-button:hover {
    border-color: #4c6686;
    color: #fff;
}


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

.maintenance-modal-dialog {
    border-color: rgba(245, 158, 11, 0.38);
}

.maintenance-modal-icon {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 11px;
    background: rgba(245, 158, 11, 0.13);
    font-size: 23px;
}

.maintenance-modal-label {
    display: block;
    margin-bottom: 3px;
    color: #fbbf24;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.9px;
}

.maintenance-modal-dialog > p {
    margin-top: 8px;
    color: #a89773;
    font-size: 9px;
    line-height: 1.5;
}


/* =========================================================
   NOSCRIPT
========================================================= */

.noscript-warning {
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 500;
    max-width: 360px;
    padding: 12px 14px;
    border: 1px solid rgba(245, 158, 11, 0.55);
    border-radius: 8px;
    background: #2e210d;
    color: #f6d58d;
    box-shadow: var(--shadow-lg);
}

.noscript-warning strong {
    display: block;
    color: #fbbf24;
    font-size: 10px;
}

.noscript-warning p {
    margin-top: 4px;
    font-size: 8px;
    line-height: 1.45;
}


/* =========================================================
   UTILIDADES QUE USARÁ EL JS
========================================================= */

.is-hidden {
    display: none !important;
}

.is-visible {
    display: block !important;
}

.fade-in {
    animation: fadeIn 180ms ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.slide-up {
    animation: slideUp 190ms ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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


/* =========================================================
   FOCUS ACCESIBLE
========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid rgba(96, 165, 250, 0.9);
    outline-offset: 2px;
}


/* =========================================================
   FIN PARTE 2 DE 3

   PARTE 3:
   - RESPONSIVE DESKTOP/TABLET/MÓVIL
   - SIDEBAR OFFCANVAS
   - BOTTOM NAVIGATION
   - MODO DÍA
   - TARJETAS EN MÓVIL
   - SERVICIOS INTERNOS EN MÓVIL
   - MODALES RESPONSIVE
   - AJUSTES FINALES
========================================================= */

/* =========================================================
   STYLE.CSS
   PARTE 3 DE 3
   RESPONSIVE + MOBILE + LIGHT MODE + AJUSTES FINALES
========================================================= */


/* =========================================================
   BOTONES / ESTADOS GENERALES
========================================================= */

button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

button,
.service-card,
.category-chip,
.sidebar-link {
    -webkit-user-select: none;
    user-select: none;
}

input,
textarea {
    -webkit-user-select: text;
    user-select: text;
}


/* =========================================================
   SIDEBAR ABIERTA EN MÓVIL
========================================================= */

.sidebar.open {
    transform: translateX(0);
}

.sidebar-backdrop.open {
    display: block;
}


/* =========================================================
   NAVEGACIÓN INFERIOR
========================================================= */

.bottom-navigation {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 85;
    height: var(--bottom-nav-height);
    align-items: flex-end;
    justify-content: space-around;
    padding: 4px 7px max(5px, env(safe-area-inset-bottom));
    border-top: 1px solid #1c2d47;
    background: rgba(5, 13, 30, 0.97);
    box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(15px);
}

.bottom-navigation-item {
    position: relative;
    display: flex;
    width: 25%;
    min-width: 0;
    min-height: 53px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 2px;
    border: 0;
    background: transparent;
    color: #6f83a0;
    font-size: 8px;
    font-weight: 700;
}

.bottom-navigation-item > svg {
    width: 19px;
    height: 19px;
}

.bottom-navigation-item.active {
    color: #6ca7f8;
}

.bottom-navigation-item.active::after {
    position: absolute;
    bottom: 1px;
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: #4f8ff7;
    content: "";
}

.bottom-navigation-main {
    overflow: visible;
}

.bottom-navigation-main-circle {
    position: relative;
    display: flex;
    width: 43px;
    height: 43px;
    align-items: center;
    justify-content: center;
    margin-top: -20px;
    border: 4px solid #071126;
    border-radius: 50%;
    background:
        linear-gradient(
            145deg,
            #22c58b,
            #0caa79
        );
    color: #fff;
    box-shadow: 0 7px 20px rgba(16, 185, 129, 0.28);
}

.bottom-navigation-main-circle svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    stroke: none;
}

.bottom-navigation-main > span:last-child {
    margin-top: 1px;
    color: #66cdb5;
}


/* =========================================================
   SUSCRIPCIONES
========================================================= */

.subscription-card {
    min-height: 138px;
}


/* =========================================================
   AJUSTES DE TARJETAS CON TEXTOS LARGOS
========================================================= */

.service-card-heading h3,
.service-card > p,
.service-detail-heading > p,
.service-information-row-text,
.requirement-description,
.service-step-description,
.modal-content,
.information-row p {
    overflow-wrap: anywhere;
}

.service-card-heading {
    min-width: 0;
}

.service-card-heading h3 {
    flex: 1;
}


/* =========================================================
   SAFETY PARA CONTENIDO DINÁMICO
========================================================= */

#serviceAlerts:empty,
#serviceInformationRows:empty,
#serviceSummaryRows:empty,
#serviceRequirements:empty,
#serviceDocuments:empty,
#serviceSteps:empty,
#serviceNotes:empty,
#serviceFaq:empty,
#serviceFormFields:empty {
    display: none;
}


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

@media (max-width: 1180px) {

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

    .service-layout {
        grid-template-columns: minmax(0, 1fr) 225px;
    }

    .catalog-search {
        width: 210px;
    }

}


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

@media (max-width: 1023px) {

    :root {
        --sidebar-width: 240px;
    }

    .sidebar {
        transform: translateX(-100%);
        box-shadow: 12px 0 35px rgba(0, 0, 0, 0.4);
        transition: transform 220ms ease;
    }

    .mobile-header {
        display: flex;
    }

    .main-content {
        width: 100%;
        margin-left: 0;
        padding:
            calc(var(--mobile-header-height) + 10px)
            13px
            calc(var(--bottom-nav-height) + 25px);
    }

    .bottom-navigation {
        display: flex;
    }

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

    .service-layout {
        grid-template-columns: minmax(0, 1fr) 220px;
    }

    .service-view-header {
        min-height: 35px;
    }

}


/* =========================================================
   TABLET PEQUEÑA
========================================================= */

@media (max-width: 820px) {

    .main-content {
        padding-right: 11px;
        padding-left: 11px;
    }

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

    .catalog-toolbar {
        align-items: center;
    }

    .catalog-search {
        width: 200px;
    }

    .service-layout {
        grid-template-columns: 1fr;
    }

    .service-side-column {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-panel-single {
        max-width: none;
    }

    .service-information-box-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 640px) {

    :root {
        --mobile-header-height: 55px;
        --bottom-nav-height: 65px;
    }

    body {
        font-size: 13px;
    }

    .main-content {
        padding:
            calc(var(--mobile-header-height) + 8px)
            8px
            calc(var(--bottom-nav-height) + 18px);
    }


    /* -----------------------------------------------------
       HEADER
    ------------------------------------------------------ */

    .mobile-header {
        height: var(--mobile-header-height);
        padding: 0 9px;
    }

    .mobile-header-button {
        width: 35px;
        height: 35px;
        border-radius: 8px;
    }

    .mobile-header-button svg {
        width: 18px;
        height: 18px;
    }

    .mobile-brand {
        font-size: 14px;
    }

    .mobile-brand-icon {
        font-size: 17px;
    }


    /* -----------------------------------------------------
       SIDEBAR
    ------------------------------------------------------ */

    .sidebar {
        width: min(84vw, 270px);
    }

    .sidebar-brand {
        min-height: 79px;
    }

    .brand-copy strong {
        font-size: 23px;
    }


    /* -----------------------------------------------------
       BIENVENIDA
    ------------------------------------------------------ */

    .welcome-section {
        gap: 6px;
    }

    .welcome-copy {
        padding: 10px 11px;
    }

    .welcome-copy h1 {
        font-size: 15px;
    }

    .welcome-copy p {
        font-size: 8px;
    }


    /* -----------------------------------------------------
       BANNER INFORMATIVO
    ------------------------------------------------------ */

    .information-banner {
        min-height: 0;
        align-items: flex-start;
        gap: 8px;
        padding: 9px;
    }

    .information-banner-main {
        align-items: flex-start;
    }

    .information-banner-icon {
        width: 29px;
        min-width: 29px;
        height: 29px;
    }

    .information-banner-copy strong {
        font-size: 10px;
    }

    .information-banner-copy small {
        max-width: 190px;
        font-size: 7px;
    }

    .information-banner-button {
        min-height: 28px;
        padding: 0 8px;
        font-size: 7px;
    }


    /* -----------------------------------------------------
       COMUNIDAD
    ------------------------------------------------------ */

    .community-banner {
        position: relative;
        min-height: 55px;
        padding: 8px;
    }

    .community-banner-icon {
        width: 30px;
        min-width: 30px;
        height: 30px;
    }

    .community-banner-icon svg {
        width: 18px;
        height: 18px;
    }

    .community-banner-copy strong {
        font-size: 10px;
    }

    .community-banner-copy span {
        font-size: 7px;
    }

    .community-banner-button {
        min-height: 27px;
        padding: 0 9px;
        font-size: 7px;
    }


    /* -----------------------------------------------------
       TOOLBAR CATÁLOGO
    ------------------------------------------------------ */

    .catalog {
        padding-top: 8px;
    }

    .catalog-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .catalog-toolbar-heading {
        padding-left: 1px;
    }

    .catalog-toolbar-heading span {
        font-size: 7px;
    }

    .catalog-search {
        width: 100%;
        height: 34px;
    }

    .catalog-search input {
        font-size: 9px;
    }


    /* -----------------------------------------------------
       FILTROS
    ------------------------------------------------------ */

    .category-filters {
        gap: 4px;
        margin-right: -8px;
        margin-left: -8px;
        padding: 1px 8px 4px;
    }

    .category-chip {
        min-height: 27px;
        padding: 0 10px;
        font-size: 7px;
    }


    /* -----------------------------------------------------
       CATEGORÍAS
    ------------------------------------------------------ */

    .catalog-category {
        margin-top: 9px;
    }

    .category-title {
        margin-bottom: 5px;
        font-size: 7px;
    }

    .category-title-marker {
        width: 6px;
        height: 6px;
    }


    /* -----------------------------------------------------
       GRID DOS COLUMNAS
    ------------------------------------------------------ */

    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }


    /* -----------------------------------------------------
       TARJETAS
    ------------------------------------------------------ */

    .service-card,
    .streaming-card,
    .subscription-card {
        min-height: 133px;
        padding: 7px;
        border-radius: 7px;
    }

    .service-card:hover {
        transform: none;
    }

    .service-card-top {
        min-height: 29px;
    }

    .document-thumbnail {
        width: 27px;
        min-width: 27px;
        height: 29px;
    }

    .streaming-thumbnail {
        width: 29px;
        min-width: 29px;
        height: 29px;
    }

    .service-price {
        min-height: 17px;
        padding: 2px 4px;
        font-size: 7px;
    }

    .service-price small {
        font-size: 5px;
    }

    .service-card-heading {
        min-height: 31px;
        gap: 3px;
        margin-top: 4px;
    }

    .service-card-heading h3 {
        font-size: 8px;
    }

    .popular-badge,
    .maintenance-badge {
        padding: 3px;
        font-size: 4.5px;
    }

    .service-card > p {
        min-height: 24px;
        font-size: 6.7px;
    }

    .service-open-button {
        min-height: 25px;
        font-size: 7px;
    }


    /* -----------------------------------------------------
       INFO GENERAL
    ------------------------------------------------------ */

    .general-information-section {
        margin-top: 13px;
    }

    .general-information-header {
        padding: 9px;
    }

    .general-information-body {
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 7px;
    }

    .information-row {
        min-height: 40px;
        padding: 7px;
    }


    /* -----------------------------------------------------
       SOPORTE
    ------------------------------------------------------ */

    .support-card {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 10px;
    }

    .support-card-icon {
        width: 35px;
        min-width: 35px;
        height: 35px;
    }

    .support-card-copy {
        width: calc(100% - 48px);
        flex: initial;
    }

    .support-card-copy h2 {
        font-size: 11px;
    }

    .support-card-copy p {
        font-size: 8px;
    }

    .support-card-button {
        width: 100%;
        min-height: 31px;
        justify-content: center;
        margin-top: 1px;
    }


    /* -----------------------------------------------------
       FOOTER
    ------------------------------------------------------ */

    .site-footer {
        margin-top: 12px;
    }

    .site-footer-main {
        flex-wrap: wrap;
    }

    .site-footer-copy {
        order: 3;
        width: 100%;
        flex: initial;
    }

    .site-footer-whatsapp {
        margin-left: auto;
    }

    .site-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }


    /* =====================================================
       DETALLE DEL SERVICIO MÓVIL
    ====================================================== */

    .service-view {
        min-height: auto;
    }

    .service-view-header {
        min-height: 32px;
        margin-bottom: 6px;
    }

    .service-back-button {
        min-height: 29px;
        padding: 0 8px;
    }

    .service-view-breadcrumb {
        display: none;
    }


    /* -----------------------------------------------------
       HERO
    ------------------------------------------------------ */

    .service-detail-hero {
        min-height: 0;
        align-items: flex-start;
        gap: 10px;
        padding: 11px;
        border-radius: 8px;
    }

    .service-detail-icon {
        width: 50px;
        min-width: 50px;
        height: 50px;
        border-radius: 9px;
    }

    .service-detail-icon .document-thumbnail {
        width: 31px;
        min-width: 31px;
        height: 35px;
    }

    .service-detail-title-row {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 4px;
    }

    .service-detail-title-row h1 {
        width: 100%;
        font-size: 15px;
        line-height: 1.15;
    }

    .service-detail-category {
        margin-bottom: 2px;
        font-size: 6px;
    }

    .service-detail-heading > p {
        margin-top: 4px;
        font-size: 8px;
    }

    .service-detail-meta {
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 7px;
    }

    .service-detail-price,
    .service-detail-status {
        min-height: 20px;
        padding: 0 6px;
        font-size: 7px;
    }


    /* -----------------------------------------------------
       ALERTAS
    ------------------------------------------------------ */

    .service-alert {
        padding: 7px;
    }

    .service-alert-copy strong {
        font-size: 8px;
    }

    .service-alert-copy p {
        font-size: 7px;
    }


    /* -----------------------------------------------------
       TABS
    ------------------------------------------------------ */

    .service-tabs-wrapper {
        margin-right: -8px;
        margin-left: -8px;
        padding: 0 8px;
    }

    .service-tab {
        min-height: 36px;
        padding: 0 9px;
        font-size: 8px;
    }

    .service-tab svg {
        width: 12px;
        height: 12px;
    }


    /* -----------------------------------------------------
       INFO IMPORTANTE
    ------------------------------------------------------ */

    .service-information-box-header,
    .service-content-card-header {
        padding: 8px;
    }

    .service-information-box-header h2,
    .service-content-card-header h2 {
        font-size: 9px;
    }

    .service-information-box-header span,
    .service-content-card-header span {
        font-size: 6.5px;
    }

    .service-information-box-body {
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 6px;
    }

    .service-information-row {
        min-height: 40px;
        padding: 6px;
    }

    .service-information-row-text {
        font-size: 7px;
    }


    /* -----------------------------------------------------
       CONTENIDO
    ------------------------------------------------------ */

    .service-content-card-body {
        padding: 8px;
        font-size: 8px;
    }

    .service-steps {
        padding: 4px 8px 8px;
    }

    .service-step {
        gap: 7px;
        padding: 6px 0;
    }

    .service-step-title {
        font-size: 8px;
    }

    .service-step-description {
        font-size: 7px;
    }


    /* -----------------------------------------------------
       COLUMNA LATERAL
    ------------------------------------------------------ */

    .service-side-column {
        display: flex;
        flex-direction: column;
    }

    .service-summary-row {
        min-height: 30px;
    }


    /* -----------------------------------------------------
       REQUISITOS
    ------------------------------------------------------ */

    .requirements-list {
        padding: 4px 8px 8px;
    }

    .requirement-item {
        gap: 7px;
        padding: 7px 0;
    }

    .requirement-title {
        font-size: 8px;
    }

    .requirement-description {
        font-size: 7px;
    }


    /* -----------------------------------------------------
       FORMULARIOS
    ------------------------------------------------------ */

    .service-form-header {
        padding: 10px;
    }

    .service-form-header h2 {
        font-size: 11px;
    }

    .service-form-header p {
        font-size: 7px;
    }

    .service-information-form {
        padding: 9px;
    }

    .service-form-fields {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .form-field-full,
    .form-checkbox {
        grid-column: auto;
    }

    .form-field-label {
        font-size: 7px;
    }

    .form-field-control input,
    .form-field-control select {
        height: 36px;
        font-size: 9px;
    }

    .form-field-control textarea {
        min-height: 90px;
        font-size: 9px;
    }

    .form-field-help {
        font-size: 6.5px;
    }

    .service-form-notice {
        margin-top: 9px;
    }

    .service-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .service-form-primary,
    .service-form-secondary {
        width: 100%;
        min-height: 35px;
    }


    /* -----------------------------------------------------
       AYUDA
    ------------------------------------------------------ */

    .service-help-large {
        align-items: flex-start;
        gap: 10px;
        padding: 12px;
    }

    .service-help-large-icon {
        width: 42px;
        min-width: 42px;
        height: 42px;
    }

    .service-help-large-icon svg {
        width: 23px;
        height: 23px;
    }

    .service-help-large-copy h2 {
        font-size: 12px;
    }

    .service-help-large-copy p {
        font-size: 8px;
    }


    /* -----------------------------------------------------
       FAQ
    ------------------------------------------------------ */

    .faq-question {
        min-height: 38px;
    }

    .faq-question-text {
        font-size: 8px;
    }

    .faq-answer p {
        font-size: 7px;
    }


    /* -----------------------------------------------------
       MODALES
    ------------------------------------------------------ */

    .modal {
        align-items: flex-end;
        padding: 8px;
    }

    .modal-dialog {
        max-width: none;
        max-height: calc(100vh - 16px);
        padding: 17px 14px calc(17px + env(safe-area-inset-bottom));
        border-radius: 13px 13px 9px 9px;
        transform: translateY(15px);
    }

    .modal.open .modal-dialog {
        transform: translateY(0);
    }

    .modal-dialog h2 {
        font-size: 14px;
    }

    .modal-content {
        font-size: 8px;
    }

    .modal-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .modal-primary-button,
    .modal-secondary-button {
        width: 100%;
        min-height: 35px;
    }


    /* -----------------------------------------------------
       BOTTOM NAV
    ------------------------------------------------------ */

    .bottom-navigation {
        height: var(--bottom-nav-height);
    }

    .bottom-navigation-item {
        font-size: 7px;
    }

}


/* =========================================================
   MÓVILES MUY PEQUEÑOS
========================================================= */

@media (max-width: 390px) {

    .main-content {
        padding-right: 6px;
        padding-left: 6px;
    }

    .services-grid {
        gap: 5px;
    }

    .service-card,
    .streaming-card,
    .subscription-card {
        min-height: 137px;
        padding: 6px;
    }

    .service-card-heading h3 {
        font-size: 7.5px;
    }

    .service-card > p {
        font-size: 6.3px;
    }

    .category-filters {
        margin-right: -6px;
        margin-left: -6px;
        padding-right: 6px;
        padding-left: 6px;
    }

    .information-banner {
        flex-wrap: wrap;
    }

    .information-banner-main {
        width: 100%;
    }

    .information-banner-button {
        width: 100%;
    }

    .community-banner {
        flex-wrap: wrap;
    }

    .community-banner-copy {
        width: calc(100% - 42px);
        flex: initial;
    }

    .community-banner-button {
        width: 100%;
    }

    .service-detail-icon {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    .service-detail-title-row h1 {
        font-size: 14px;
    }

}


/* =========================================================
   MODO DÍA / LIGHT
   SOPORTA:
   body.theme-light
   html[data-theme="light"]
========================================================= */

body.theme-light,
html[data-theme="light"] body {
    --bg: #f1f5f9;
    --bg-deep: #e7edf5;
    --bg-sidebar: #ffffff;
    --bg-panel: #ffffff;
    --bg-panel-2: #f8fafc;
    --bg-panel-3: #eef3f8;
    --bg-input: #ffffff;

    --text: #0f172a;
    --text-soft: #334155;
    --text-muted: #64748b;
    --text-faint: #94a3b8;

    --border: #d8e1ec;
    --border-soft: #e2e8f0;

    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.07);
    --shadow-md: 0 8px 22px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 18px 45px rgba(15, 23, 42, 0.16);

    background: #f1f5f9;
    color: #0f172a;
}


/* =========================================================
   SIDEBAR CLARO
========================================================= */

body.theme-light .sidebar,
html[data-theme="light"] .sidebar {
    border-right-color: #dce4ee;
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7f9fc
        );
}

body.theme-light .sidebar-brand,
body.theme-light .sidebar-account,
body.theme-light .sidebar-footer,
html[data-theme="light"] .sidebar-brand,
html[data-theme="light"] .sidebar-account,
html[data-theme="light"] .sidebar-footer {
    border-color: #e1e7ef;
}

body.theme-light .sidebar-account-name,
html[data-theme="light"] .sidebar-account-name {
    color: #172033;
}

body.theme-light .sidebar-account-label,
body.theme-light .sidebar-section-label,
html[data-theme="light"] .sidebar-account-label,
html[data-theme="light"] .sidebar-section-label {
    color: #8493a8;
}

body.theme-light .sidebar-theme,
html[data-theme="light"] .sidebar-theme {
    border-color: #dce3ec;
    background: #eef2f7;
}

body.theme-light .theme-option,
html[data-theme="light"] .theme-option {
    color: #64748b;
}

body.theme-light .theme-option.active,
html[data-theme="light"] .theme-option.active {
    background: #ffffff;
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.09);
}

body.theme-light .sidebar-link,
html[data-theme="light"] .sidebar-link {
    color: #475569;
}

body.theme-light .sidebar-link:hover,
html[data-theme="light"] .sidebar-link:hover {
    background: #edf3fa;
    color: #0f172a;
}

body.theme-light .sidebar-link.active,
html[data-theme="light"] .sidebar-link.active {
    background:
        linear-gradient(
            90deg,
            #e5effc,
            #edf4fc
        );
    color: #1e3a5f;
}

body.theme-light .sidebar-divider,
html[data-theme="light"] .sidebar-divider {
    background: #e1e7ef;
}

body.theme-light .sidebar-footer,
html[data-theme="light"] .sidebar-footer {
    background: rgba(248, 250, 252, 0.96);
}


/* =========================================================
   HEADER / BOTTOM NAV CLAROS
========================================================= */

body.theme-light .mobile-header,
html[data-theme="light"] .mobile-header {
    border-bottom-color: #dbe4ee;
    background: rgba(255, 255, 255, 0.96);
}

body.theme-light .mobile-header-button,
html[data-theme="light"] .mobile-header-button {
    border-color: #d5dfea;
    background: #f8fafc;
    color: #475569;
}

body.theme-light .bottom-navigation,
html[data-theme="light"] .bottom-navigation {
    border-top-color: #dce4ed;
    background: rgba(255, 255, 255, 0.97);
}

body.theme-light .bottom-navigation-main-circle,
html[data-theme="light"] .bottom-navigation-main-circle {
    border-color: #f1f5f9;
}

body.theme-light .bottom-navigation-item,
html[data-theme="light"] .bottom-navigation-item {
    color: #718096;
}

body.theme-light .bottom-navigation-item.active,
html[data-theme="light"] .bottom-navigation-item.active {
    color: #2563eb;
}


/* =========================================================
   CATÁLOGO CLARO
========================================================= */

body.theme-light .catalog-toolbar-heading span,
html[data-theme="light"] .catalog-toolbar-heading span {
    color: #64748b;
}

body.theme-light .catalog-search input,
html[data-theme="light"] .catalog-search input {
    border-color: #d6dfeb;
    background: #ffffff;
    color: #172033;
}

body.theme-light .catalog-search input::placeholder,
html[data-theme="light"] .catalog-search input::placeholder {
    color: #94a3b8;
}

body.theme-light .category-chip,
html[data-theme="light"] .category-chip {
    border-color: #d9e2ed;
    background: #ffffff;
    color: #526174;
}

body.theme-light .category-chip:hover,
html[data-theme="light"] .category-chip:hover {
    border-color: #aab9cc;
    color: #1e293b;
}

body.theme-light .category-chip.active,
html[data-theme="light"] .category-chip.active {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #fff;
}

body.theme-light .category-title,
html[data-theme="light"] .category-title {
    color: #334155;
}


/* =========================================================
   TARJETAS CLARAS
========================================================= */

body.theme-light .service-card,
html[data-theme="light"] .service-card {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );
}

body.theme-light .service-card-heading h3,
html[data-theme="light"] .service-card-heading h3 {
    color: #172033;
}

body.theme-light .service-card > p,
html[data-theme="light"] .service-card > p {
    color: #64748b;
}

body.theme-light .service-open-button,
html[data-theme="light"] .service-open-button {
    color: #334155;
}

body.theme-light .streaming-thumbnail,
html[data-theme="light"] .streaming-thumbnail {
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08);
}


/* =========================================================
   BANNERS CLAROS
========================================================= */

body.theme-light .information-banner,
html[data-theme="light"] .information-banner {
    border-color: #d9cdfc;
    background:
        linear-gradient(
            90deg,
            #f2edff,
            #faf8ff
        );
}

body.theme-light .information-banner-copy strong,
html[data-theme="light"] .information-banner-copy strong {
    color: #392763;
}

body.theme-light .information-banner-copy small,
html[data-theme="light"] .information-banner-copy small {
    color: #756992;
}

body.theme-light .information-banner-label,
html[data-theme="light"] .information-banner-label {
    color: #7c5cbe;
}

body.theme-light .community-banner,
html[data-theme="light"] .community-banner {
    border-color: #b9e8da;
    background:
        linear-gradient(
            90deg,
            #ecfdf7,
            #f7fffc
        );
}

body.theme-light .community-banner-copy strong,
html[data-theme="light"] .community-banner-copy strong {
    color: #0e5445;
}

body.theme-light .community-banner-copy span,
html[data-theme="light"] .community-banner-copy span {
    color: #568b7e;
}


/* =========================================================
   TARJETAS GENERALES CLARAS
========================================================= */

body.theme-light .general-information-card,
body.theme-light .service-information-box,
body.theme-light .service-content-card,
body.theme-light .service-summary-card,
body.theme-light .service-form-card,
html[data-theme="light"] .general-information-card,
html[data-theme="light"] .service-information-box,
html[data-theme="light"] .service-content-card,
html[data-theme="light"] .service-summary-card,
html[data-theme="light"] .service-form-card {
    border-color: #d8e2ed;
    background: #ffffff;
}

body.theme-light .general-information-header,
body.theme-light .service-information-box-header,
body.theme-light .service-content-card-header,
body.theme-light .service-summary-header,
body.theme-light .service-form-header,
html[data-theme="light"] .general-information-header,
html[data-theme="light"] .service-information-box-header,
html[data-theme="light"] .service-content-card-header,
html[data-theme="light"] .service-summary-header,
html[data-theme="light"] .service-form-header {
    border-color: #dde5ee;
    background: #f7f9fc;
}

body.theme-light .general-information-header strong,
body.theme-light .service-information-box-header h2,
body.theme-light .service-content-card-header h2,
body.theme-light .service-summary-header h3,
body.theme-light .service-form-header h2,
html[data-theme="light"] .general-information-header strong,
html[data-theme="light"] .service-information-box-header h2,
html[data-theme="light"] .service-content-card-header h2,
html[data-theme="light"] .service-summary-header h3,
html[data-theme="light"] .service-form-header h2 {
    color: #172033;
}

body.theme-light .information-row,
body.theme-light .service-information-row,
html[data-theme="light"] .information-row,
html[data-theme="light"] .service-information-row {
    border-color: #e0e7ef;
    background: #f8fafc;
}

body.theme-light .information-row p,
body.theme-light .service-information-row-text,
html[data-theme="light"] .information-row p,
html[data-theme="light"] .service-information-row-text {
    color: #64748b;
}

body.theme-light .information-row strong,
html[data-theme="light"] .information-row strong {
    color: #263547;
}


/* =========================================================
   DETALLE CLARO
========================================================= */

body.theme-light .service-back-button,
body.theme-light .service-return-button,
html[data-theme="light"] .service-back-button,
html[data-theme="light"] .service-return-button {
    border-color: #d7e0ea;
    background: #fff;
    color: #526174;
}

body.theme-light .service-detail-hero,
html[data-theme="light"] .service-detail-hero {
    border-color: #d8e2ed;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(99, 102, 241, 0.08),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #ffffff,
            #f7f9fc
        );
}

body.theme-light .service-detail-icon,
html[data-theme="light"] .service-detail-icon {
    border-color: #d9e2ec;
    background: #f8fafc;
}

body.theme-light .service-detail-title-row h1,
html[data-theme="light"] .service-detail-title-row h1 {
    color: #172033;
}

body.theme-light .service-detail-heading > p,
html[data-theme="light"] .service-detail-heading > p {
    color: #64748b;
}

body.theme-light .service-tabs-wrapper,
html[data-theme="light"] .service-tabs-wrapper {
    border-bottom-color: #d9e2ed;
}

body.theme-light .service-tab,
html[data-theme="light"] .service-tab {
    color: #718096;
}

body.theme-light .service-tab.active,
html[data-theme="light"] .service-tab.active {
    color: #2563eb;
}


/* =========================================================
   FORMULARIOS CLAROS
========================================================= */

body.theme-light .form-field-label,
html[data-theme="light"] .form-field-label {
    color: #475569;
}

body.theme-light .form-field-control input,
body.theme-light .form-field-control select,
body.theme-light .form-field-control textarea,
html[data-theme="light"] .form-field-control input,
html[data-theme="light"] .form-field-control select,
html[data-theme="light"] .form-field-control textarea {
    border-color: #d6e0eb;
    background-color: #fff;
    color: #172033;
}

body.theme-light .form-field-control input::placeholder,
body.theme-light .form-field-control textarea::placeholder,
html[data-theme="light"] .form-field-control input::placeholder,
html[data-theme="light"] .form-field-control textarea::placeholder {
    color: #9aa7b8;
}

body.theme-light .form-checkbox-custom,
html[data-theme="light"] .form-checkbox-custom {
    border-color: #c9d5e2;
    background: #fff;
}

body.theme-light .form-checkbox,
html[data-theme="light"] .form-checkbox {
    color: #64748b;
}

body.theme-light .form-field-help,
html[data-theme="light"] .form-field-help {
    color: #8290a2;
}


/* =========================================================
   REQUISITOS / PASOS CLAROS
========================================================= */

body.theme-light .requirement-item,
body.theme-light .service-summary-row,
body.theme-light .faq-item,
html[data-theme="light"] .requirement-item,
html[data-theme="light"] .service-summary-row,
html[data-theme="light"] .faq-item {
    border-color: #e3e9f0;
}

body.theme-light .requirement-title,
body.theme-light .service-step-title,
body.theme-light .faq-question,
html[data-theme="light"] .requirement-title,
html[data-theme="light"] .service-step-title,
html[data-theme="light"] .faq-question {
    color: #344256;
}

body.theme-light .requirement-description,
body.theme-light .service-step-description,
body.theme-light .faq-answer p,
html[data-theme="light"] .requirement-description,
html[data-theme="light"] .service-step-description,
html[data-theme="light"] .faq-answer p {
    color: #718096;
}


/* =========================================================
   HELP CARDS CLAROS
========================================================= */

body.theme-light .support-card,
body.theme-light .service-help-card,
body.theme-light .service-help-large,
html[data-theme="light"] .support-card,
html[data-theme="light"] .service-help-card,
html[data-theme="light"] .service-help-large {
    background:
        linear-gradient(
            145deg,
            #eefcf7,
            #f8fffc
        );
}

body.theme-light .support-card-copy h2,
body.theme-light .service-help-copy strong,
body.theme-light .service-help-large-copy h2,
html[data-theme="light"] .support-card-copy h2,
html[data-theme="light"] .service-help-copy strong,
html[data-theme="light"] .service-help-large-copy h2 {
    color: #164c40;
}


/* =========================================================
   MODALES CLAROS
========================================================= */

body.theme-light .modal-dialog,
html[data-theme="light"] .modal-dialog {
    border-color: #d5e0eb;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7f9fc
        );
}

body.theme-light .modal-close,
html[data-theme="light"] .modal-close {
    border-color: #d6dfe9;
    background: #f5f8fb;
    color: #64748b;
}

body.theme-light .modal-dialog h2,
html[data-theme="light"] .modal-dialog h2 {
    color: #172033;
}

body.theme-light .modal-content,
html[data-theme="light"] .modal-content {
    color: #64748b;
}

body.theme-light .modal-content strong,
html[data-theme="light"] .modal-content strong {
    color: #334155;
}

body.theme-light .modal-secondary-button,
html[data-theme="light"] .modal-secondary-button {
    border-color: #d4deea;
    background: #f5f8fb;
    color: #526174;
}


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

body.theme-light .site-footer,
html[data-theme="light"] .site-footer {
    border-top-color: #dbe3ec;
}

body.theme-light .site-footer-copy,
body.theme-light .site-footer-bottom,
html[data-theme="light"] .site-footer-copy,
html[data-theme="light"] .site-footer-bottom {
    color: #8290a2;
}


/* =========================================================
   ESTADO VACÍO CLARO
========================================================= */

body.theme-light .catalog-empty-state,
html[data-theme="light"] .catalog-empty-state {
    border-color: #cbd8e5;
    background: #ffffff;
}

body.theme-light .catalog-empty-state strong,
html[data-theme="light"] .catalog-empty-state strong {
    color: #263547;
}

body.theme-light .catalog-empty-state p,
html[data-theme="light"] .catalog-empty-state p {
    color: #718096;
}


/* =========================================================
   REDUCCIÓN DE MOVIMIENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}


/* =========================================================
   IMPRESIÓN
========================================================= */

@media print {

    .sidebar,
    .mobile-header,
    .bottom-navigation,
    .sidebar-backdrop,
    .service-tabs-wrapper,
    .service-help-card,
    .service-help-large,
    .support-section,
    .site-footer-whatsapp,
    button {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    .main-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .service-detail-hero,
    .service-information-box,
    .service-content-card,
    .service-summary-card,
    .service-form-card {
        border: 1px solid #bbb !important;
        background: #fff !important;
        box-shadow: none !important;
    }

}


/* =========================================================
   FIN DE STYLE.CSS
========================================================= */

/* =========================================================
   AJUSTE GLOBAL DE TIPOGRAFÍA
   TEXTO MÁS GRANDE Y LEGIBLE EN TODA LA WEB

   IMPORTANTE:
   ESTE BLOQUE DEBE IR AL FINAL DE STYLE.CSS
========================================================= */


/* =========================================================
   BASE GENERAL
========================================================= */

body {
    font-size: 16px;
    line-height: 1.55;
}


/* =========================================================
   SIDEBAR - MARCA
========================================================= */

.brand-copy strong {
    font-size: 28px;
}

.brand-copy small {
    font-size: 11px;
}

.sidebar-account-label {
    font-size: 12px;
}

.sidebar-account-name {
    font-size: 14px;
}

.sidebar-account-description {
    font-size: 12px;
}

.sidebar-section-label {
    font-size: 11px;
}

.theme-option {
    font-size: 13px;
}

.sidebar-link > span:last-child {
    font-size: 13px;
}

.sidebar-support-copy strong {
    font-size: 12px;
}

.sidebar-support-copy small {
    font-size: 10px;
}

.sidebar-copyright {
    font-size: 10px;
}


/* =========================================================
   HEADER MÓVIL
========================================================= */

.mobile-brand {
    font-size: 18px;
}

.mobile-brand-icon {
    font-size: 20px;
}


/* =========================================================
   BIENVENIDA
========================================================= */

.welcome-copy h1 {
    font-size: 22px;
}

.welcome-copy p {
    font-size: 13px;
}


/* =========================================================
   BANNER INFORMATIVO
========================================================= */

.information-banner-label {
    font-size: 10px;
}

.information-banner-copy strong {
    font-size: 14px;
}

.information-banner-copy small {
    font-size: 11px;
}

.information-banner-button {
    font-size: 11px;
}


/* =========================================================
   WHATSAPP / COMUNIDAD
========================================================= */

.community-banner-copy strong {
    font-size: 14px;
}

.community-banner-copy span {
    font-size: 11px;
}

.community-banner-button {
    font-size: 11px;
}


/* =========================================================
   CATÁLOGO
========================================================= */

.catalog-toolbar-heading span {
    font-size: 11px;
}

.catalog-search input {
    font-size: 13px;
}

.category-chip {
    font-size: 11px;
}

.catalog-results {
    font-size: 11px;
}

.category-title {
    font-size: 12px;
}


/* =========================================================
   TARJETAS DE SERVICIOS
========================================================= */

.service-price {
    min-height: 23px;
    padding: 3px 7px;
    font-size: 12px;
}

.service-price small {
    font-size: 8px;
}

.service-card-heading h3 {
    font-size: 13px;
    line-height: 1.3;
}

.service-card > p {
    min-height: 38px;
    font-size: 11px;
    line-height: 1.45;
    -webkit-line-clamp: 3;
}

.popular-badge,
.maintenance-badge {
    padding: 4px 6px;
    font-size: 8px;
}

.service-open-button {
    min-height: 32px;
    font-size: 11px;
}

.streaming-thumbnail {
    font-size: 10px;
}


/* =========================================================
   ESTADO VACÍO
========================================================= */

.catalog-empty-state strong {
    font-size: 17px;
}

.catalog-empty-state p {
    font-size: 13px;
}

.clear-filters-button {
    font-size: 12px;
}


/* =========================================================
   INFORMACIÓN GENERAL
========================================================= */

.general-information-header strong {
    font-size: 14px;
}

.general-information-header span {
    font-size: 11px;
}

.information-row p {
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   SOPORTE
========================================================= */

.support-card-label {
    font-size: 10px;
}

.support-card-copy h2 {
    font-size: 17px;
}

.support-card-copy p {
    font-size: 12px;
}

.support-card-button {
    font-size: 12px;
}


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

.site-footer-brand strong {
    font-size: 14px;
}

.site-footer-brand small {
    font-size: 9px;
}

.site-footer-copy {
    font-size: 11px;
}

.site-footer-whatsapp {
    font-size: 11px;
}

.site-footer-bottom {
    font-size: 10px;
}


/* =========================================================
   BOTTOM NAVIGATION
========================================================= */

.bottom-navigation-item {
    font-size: 10px;
}


/* =========================================================
   CABECERA DE SERVICIO
========================================================= */

.service-back-button {
    font-size: 12px;
}

.service-view-breadcrumb {
    font-size: 11px;
}

.breadcrumb-home,
.breadcrumb-category {
    font-size: 11px;
}


/* =========================================================
   HERO DEL SERVICIO
========================================================= */

.service-detail-category {
    font-size: 11px;
}

.service-detail-title-row h1 {
    font-size: 27px;
    line-height: 1.2;
}

.service-detail-badge {
    min-height: 23px;
    padding: 0 8px;
    font-size: 9px;
}

.service-detail-heading > p {
    font-size: 14px;
    line-height: 1.55;
}

.service-detail-price,
.service-detail-status {
    min-height: 29px;
    padding: 0 10px;
    font-size: 12px;
}


/* =========================================================
   ALERTAS
========================================================= */

.service-alert {
    font-size: 12px;
    line-height: 1.5;
}

.service-alert-copy strong {
    font-size: 13px;
}

.service-alert-copy p {
    font-size: 12px;
}


/* =========================================================
   PESTAÑAS
========================================================= */

.service-tab {
    min-height: 44px;
    font-size: 12px;
}


/* =========================================================
   INFORMACIÓN DEL TRÁMITE
========================================================= */

.service-information-box-header h2 {
    font-size: 15px;
}

.service-information-box-header span {
    font-size: 11px;
}

.service-information-row-text {
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   CARDS DE CONTENIDO
========================================================= */

.service-content-card-header h2 {
    font-size: 15px;
}

.service-content-card-header span {
    font-size: 11px;
}

.service-content-card-body {
    font-size: 13px;
    line-height: 1.65;
}


/* =========================================================
   PASOS
========================================================= */

.service-step-number {
    font-size: 11px;
}

.service-step-title {
    font-size: 13px;
}

.service-step-description {
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   NOTAS
========================================================= */

.service-note {
    font-size: 12px;
    line-height: 1.55;
}


/* =========================================================
   RESUMEN
========================================================= */

.service-summary-header h3 {
    font-size: 14px;
}

.service-summary-row-label {
    font-size: 11px;
}

.service-summary-row-value {
    font-size: 11px;
}


/* =========================================================
   AYUDA LATERAL
========================================================= */

.service-help-copy strong {
    font-size: 14px;
}

.service-help-copy p {
    font-size: 11px;
    line-height: 1.5;
}

.service-help-button {
    min-height: 36px;
    font-size: 11px;
}


/* =========================================================
   REQUISITOS
========================================================= */

.requirement-title {
    font-size: 13px;
}

.requirement-description {
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   FORMULARIOS
   AUNQUE LUEGO LOS QUITEMOS, QUEDAN LEGIBLES
========================================================= */

.service-form-eyebrow {
    font-size: 10px;
}

.service-form-header h2 {
    font-size: 17px;
}

.service-form-header p {
    font-size: 12px;
}

.form-field-label {
    font-size: 12px;
}

.form-field-control input,
.form-field-control select,
.form-field-control textarea {
    font-size: 13px;
}

.form-field-control input,
.form-field-control select {
    height: 42px;
}

.form-field-control textarea {
    min-height: 105px;
}

.form-field-help {
    font-size: 10px;
}

.form-checkbox {
    font-size: 11px;
    line-height: 1.5;
}

.service-form-notice p {
    font-size: 11px;
    line-height: 1.5;
}

.service-form-primary,
.service-form-secondary {
    min-height: 40px;
    font-size: 12px;
}


/* =========================================================
   AYUDA GRANDE
========================================================= */

.service-help-large-copy > span {
    font-size: 10px;
}

.service-help-large-copy h2 {
    font-size: 20px;
}

.service-help-large-copy p {
    font-size: 13px;
    line-height: 1.55;
}

.service-help-large-button {
    min-height: 39px;
    font-size: 12px;
}


/* =========================================================
   FAQ
========================================================= */

.faq-question-text {
    font-size: 13px;
}

.faq-answer p {
    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   BOTÓN VOLVER
========================================================= */

.service-return-button {
    min-height: 38px;
    font-size: 12px;
}


/* =========================================================
   MODALES
========================================================= */

.modal-label,
.maintenance-modal-label {
    font-size: 10px;
}

.modal-dialog h2 {
    font-size: 21px;
}

.modal-content {
    font-size: 13px;
    line-height: 1.6;
}

.maintenance-modal-dialog > p {
    font-size: 13px;
    line-height: 1.6;
}

.modal-primary-button,
.modal-secondary-button {
    min-height: 39px;
    font-size: 12px;
}


/* =========================================================
   NOSCRIPT
========================================================= */

.noscript-warning strong {
    font-size: 13px;
}

.noscript-warning p {
    font-size: 11px;
}


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

@media (max-width: 1023px) {

    .service-card-heading h3 {
        font-size: 13px;
    }

    .service-card > p {
        font-size: 11px;
    }

    .service-open-button {
        font-size: 11px;
    }

}


/* =========================================================
   MÓVIL
   IMPORTANTE:
   AQUÍ TAMBIÉN SUBIMOS TODO.
========================================================= */

@media (max-width: 640px) {

    body {
        font-size: 15px;
    }


    /* HEADER */

    .mobile-brand {
        font-size: 17px;
    }


    /* SIDEBAR */

    .brand-copy strong {
        font-size: 26px;
    }

    .sidebar-account-label {
        font-size: 11px;
    }

    .sidebar-account-name {
        font-size: 13px;
    }

    .sidebar-account-description {
        font-size: 11px;
    }

    .theme-option {
        font-size: 12px;
    }

    .sidebar-section-label {
        font-size: 10px;
    }

    .sidebar-link > span:last-child {
        font-size: 12px;
    }

    .sidebar-support-copy strong {
        font-size: 11px;
    }

    .sidebar-support-copy small {
        font-size: 9px;
    }


    /* BIENVENIDA */

    .welcome-copy h1 {
        font-size: 19px;
    }

    .welcome-copy p {
        font-size: 12px;
    }


    /* BANNERS */

    .information-banner-label {
        font-size: 9px;
    }

    .information-banner-copy strong {
        font-size: 13px;
    }

    .information-banner-copy small {
        max-width: none;
        font-size: 10px;
        line-height: 1.4;
    }

    .information-banner-button {
        font-size: 10px;
    }

    .community-banner-copy strong {
        font-size: 13px;
    }

    .community-banner-copy span {
        font-size: 10px;
        line-height: 1.4;
    }

    .community-banner-button {
        font-size: 10px;
    }


    /* CATÁLOGO */

    .catalog-toolbar-heading span {
        font-size: 10px;
    }

    .catalog-search input {
        font-size: 13px;
    }

    .category-chip {
        min-height: 31px;
        font-size: 10px;
    }

    .catalog-results {
        font-size: 10px;
    }

    .category-title {
        font-size: 11px;
    }


    /* TARJETAS */

    .service-card,
    .streaming-card,
    .subscription-card {
        min-height: 165px;
        padding: 9px;
    }

    .service-price {
        min-height: 22px;
        font-size: 11px;
    }

    .service-price small {
        font-size: 7px;
    }

    .service-card-heading {
        min-height: 41px;
    }

    .service-card-heading h3 {
        font-size: 12px;
        line-height: 1.3;
    }

    .popular-badge,
    .maintenance-badge {
        font-size: 7px;
    }

    .service-card > p {
        min-height: 43px;
        font-size: 10px;
        line-height: 1.45;
        -webkit-line-clamp: 3;
    }

    .service-open-button {
        min-height: 32px;
        font-size: 10px;
    }

    .streaming-thumbnail {
        font-size: 9px;
    }


    /* INFORMACIÓN GENERAL */

    .general-information-header strong {
        font-size: 13px;
    }

    .general-information-header span {
        font-size: 10px;
    }

    .information-row p {
        font-size: 11px;
    }


    /* SOPORTE */

    .support-card-label {
        font-size: 9px;
    }

    .support-card-copy h2 {
        font-size: 15px;
    }

    .support-card-copy p {
        font-size: 11px;
    }

    .support-card-button {
        min-height: 37px;
        font-size: 11px;
    }


    /* FOOTER */

    .site-footer-brand strong {
        font-size: 13px;
    }

    .site-footer-brand small {
        font-size: 8px;
    }

    .site-footer-copy {
        font-size: 10px;
    }

    .site-footer-bottom {
        font-size: 9px;
    }


    /* BOTTOM NAV */

    .bottom-navigation-item {
        font-size: 9px;
    }


    /* DETALLE DE SERVICIO */

    .service-back-button {
        min-height: 34px;
        font-size: 11px;
    }

    .service-detail-category {
        font-size: 9px;
    }

    .service-detail-title-row h1 {
        font-size: 20px;
        line-height: 1.25;
    }

    .service-detail-badge {
        font-size: 8px;
    }

    .service-detail-heading > p {
        font-size: 12px;
        line-height: 1.5;
    }

    .service-detail-price,
    .service-detail-status {
        min-height: 25px;
        font-size: 10px;
    }


    /* ALERTAS */

    .service-alert-copy strong {
        font-size: 12px;
    }

    .service-alert-copy p {
        font-size: 11px;
    }


    /* TABS */

    .service-tab {
        min-height: 42px;
        font-size: 11px;
    }


    /* INFO */

    .service-information-box-header h2,
    .service-content-card-header h2 {
        font-size: 13px;
    }

    .service-information-box-header span,
    .service-content-card-header span {
        font-size: 10px;
    }

    .service-information-row-text {
        font-size: 11px;
    }

    .service-content-card-body {
        font-size: 12px;
        line-height: 1.6;
    }


    /* PASOS */

    .service-step-title {
        font-size: 12px;
    }

    .service-step-description {
        font-size: 11px;
    }


    /* RESUMEN */

    .service-summary-header h3 {
        font-size: 13px;
    }

    .service-summary-row-label,
    .service-summary-row-value {
        font-size: 10px;
    }


    /* REQUISITOS */

    .requirement-title {
        font-size: 12px;
    }

    .requirement-description {
        font-size: 11px;
    }


    /* FORMULARIOS */

    .service-form-eyebrow {
        font-size: 9px;
    }

    .service-form-header h2 {
        font-size: 15px;
    }

    .service-form-header p {
        font-size: 11px;
    }

    .form-field-label {
        font-size: 11px;
    }

    .form-field-control input,
    .form-field-control select {
        height: 42px;
        font-size: 13px;
    }

    .form-field-control textarea {
        font-size: 13px;
    }

    .form-field-help {
        font-size: 9px;
    }

    .form-checkbox {
        font-size: 10px;
    }

    .service-form-notice p {
        font-size: 10px;
    }

    .service-form-primary,
    .service-form-secondary {
        min-height: 40px;
        font-size: 11px;
    }


    /* AYUDA */

    .service-help-copy strong {
        font-size: 13px;
    }

    .service-help-copy p {
        font-size: 11px;
    }

    .service-help-large-copy > span {
        font-size: 9px;
    }

    .service-help-large-copy h2 {
        font-size: 16px;
    }

    .service-help-large-copy p {
        font-size: 11px;
    }

    .service-help-large-button {
        min-height: 38px;
        font-size: 11px;
    }


    /* FAQ */

    .faq-question-text {
        font-size: 12px;
    }

    .faq-answer p {
        font-size: 11px;
    }


    /* MODALES */

    .modal-label,
    .maintenance-modal-label {
        font-size: 9px;
    }

    .modal-dialog h2 {
        font-size: 18px;
    }

    .modal-content {
        font-size: 12px;
    }

    .maintenance-modal-dialog > p {
        font-size: 12px;
    }

    .modal-primary-button,
    .modal-secondary-button {
        min-height: 40px;
        font-size: 11px;
    }

}


/* =========================================================
   MÓVILES PEQUEÑOS
   NO VOLVEMOS A HACER LA LETRA MINÚSCULA
========================================================= */

@media (max-width: 390px) {

    .service-card,
    .streaming-card,
    .subscription-card {
        min-height: 170px;
    }

    .service-card-heading h3 {
        font-size: 11px;
    }

    .service-card > p {
        font-size: 10px;
    }

    .service-detail-title-row h1 {
        font-size: 19px;
    }

    .category-chip {
        font-size: 10px;
    }

}

/* =========================================================
   FIX SIDEBAR MÓVIL - MENÚ COMPLETO
========================================================= */

@media (max-width: 1023px) {
    .sidebar {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        max-height: 100dvh;
        overflow: hidden;
    }

    .sidebar-brand,
    .sidebar-account,
    .sidebar-theme,
    .sidebar-footer {
        flex-shrink: 0;
    }

    .sidebar-navigation {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 16px;
    }

    .sidebar-footer {
        position: relative;
        z-index: 2;
        padding-bottom: max(11px, env(safe-area-inset-bottom));
    }
}


/* =========================================================
   LOGO DATA INFO SERVICIOS
========================================================= */

.sidebar-brand {
    min-height: 118px;
    padding: 8px 10px;
    background: #000 !important;
    border-bottom: 1px solid #17243a;
}

.brand-logo-link {
    display: flex;
    width: 100%;
    height: 100px;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
    background: #000;
}

.brand-logo-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 230px;
    object-fit: contain;
    object-position: center;
   
    transition: transform 180ms ease, filter 180ms ease;
}

.brand-logo-link:hover .brand-logo-image {
    transform: scale(1.025);
    }


/* =========================================================
   LOGO EN HEADER MÓVIL
========================================================= */

.mobile-logo-link {
    display: flex;
    width: 150px;
    height: 43px;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
}

.mobile-logo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}


/* =========================================================
   AJUSTES EN MÓVIL
========================================================= */

@media (max-width: 1023px) {
    .sidebar-brand {
        min-height: 105px;
        padding: 6px 9px;
        background: #000 !important;
    }

    .brand-logo-link {
        height: 91px;
    }

    .brand-logo-image {
        max-width: 220px;
    }
}

@media (max-width: 640px) {
    .mobile-logo-link {
        width: 135px;
        height: 40px;
    }
}

@media (max-width: 390px) {
    .mobile-logo-link {
        width: 120px;
        height: 38px;
    }
}


/* =========================================================
   SI ESTÁ ACTIVO EL MODO CLARO
   LA CAJA DEL LOGO SIGUE NEGRA
========================================================= */

body.theme-light .sidebar-brand,
html[data-theme="light"] .sidebar-brand {
    background: #000 !important;
    border-bottom-color: #202020;
}

body.theme-light .brand-logo-link,
html[data-theme="light"] .brand-logo-link,
body.theme-light .mobile-logo-link,
html[data-theme="light"] .mobile-logo-link {
    background: #000 !important;
}


/* =========================================================
   FIN AJUSTE GLOBAL DE TIPOGRAFÍA
========================================================= */

/* NAHUI:RESPONSIVE:START */
.nahui-r-mobile-font-size{font-size:var(--nahui-r-mobile-font-size)!important}
.nahui-r-mobile-width{width:var(--nahui-r-mobile-width)!important}
.nahui-r-mobile-height{height:var(--nahui-r-mobile-height)!important}

@media(min-width:768px) and (max-width:1023px){
    .nahui-r-tablet-font-size{font-size:var(--nahui-r-tablet-font-size)!important}
    .nahui-r-tablet-width{width:var(--nahui-r-tablet-width)!important}
    .nahui-r-tablet-height{height:var(--nahui-r-tablet-height)!important}
}

@media(min-width:1024px){
    .nahui-r-desktop-font-size{font-size:var(--nahui-r-desktop-font-size)!important}
    .nahui-r-desktop-width{width:var(--nahui-r-desktop-width)!important}
    .nahui-r-desktop-height{height:var(--nahui-r-desktop-height)!important}
}

a[style*="--nahui-link-color"],
a[style*="--nahui-link-color"]:link,
a[style*="--nahui-link-color"]:visited{
    color:var(--nahui-link-color,inherit)!important;
}

a[style*="--nahui-link-decoration"],
a[style*="--nahui-link-decoration"]:link,
a[style*="--nahui-link-decoration"]:visited{
    text-decoration-line:var(--nahui-link-decoration,underline)!important;
    text-decoration-color:currentColor!important;
}

a[style*="--nahui-link-color"] span,
a[style*="--nahui-link-color"] strong,
a[style*="--nahui-link-color"] b,
a[style*="--nahui-link-color"] em,
a[style*="--nahui-link-color"] u,
a[style*="--nahui-link-color"] s,
a[style*="--nahui-link-color"] del,
a[style*="--nahui-link-color"] small{
    color:inherit!important;
}

a[style*="--nahui-link-color"]:hover,
a[style*="--nahui-link-color"]:hover span,
a[style*="--nahui-link-color"]:hover strong,
a[style*="--nahui-link-color"]:hover b,
a[style*="--nahui-link-color"]:hover em,
a[style*="--nahui-link-color"]:hover u,
a[style*="--nahui-link-color"]:hover s,
a[style*="--nahui-link-color"]:hover del,
a[style*="--nahui-link-color"]:hover small,
a[style*="--nahui-link-color"]:focus-visible,
a[style*="--nahui-link-color"]:active{
    color:var(--nahui-link-hover-color,var(--nahui-link-color,inherit))!important;
}
/* NAHUI:RESPONSIVE:END */