:root {
    --blue: #0877f9;
    --blue-dark: #071b42;
    --blue-deep: #031127;
    --cyan: #16c8ff;
    --green: #1fc98a;
    --orange: #ff9b3d;
    --purple: #7657ff;

    --text: #10203d;
    --muted: #6e7d96;

    --bg: #f5f8fc;
    --white: #ffffff;

    --border: #e4eaf2;

    --shadow:
        0 25px 70px rgba(15, 39, 80, .14);

    --radius: 22px;

    --container: 1200px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--text);
    background: var(--white);
    line-height: 1.6;
}

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

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

button,
input {
    font: inherit;
}

.container {
    width: min(calc(100% - 40px), var(--container));
    margin-inline: auto;
}


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

.btn {
    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 0 20px;

    border-radius: 12px;

    font-weight: 700;
    font-size: 14px;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    color: white;

    background:
        linear-gradient(
            135deg,
            #0877f9,
            #0059df
        );

    box-shadow:
        0 12px 28px rgba(8, 119, 249, .25);
}

.btn-primary:hover {
    box-shadow:
        0 16px 34px rgba(8, 119, 249, .35);
}

.btn-outline {
    border: 1px solid #dce4ef;
    background: white;
}

.btn-ghost {
    color: #173158;
    border: 1px solid #dce5f1;
    background: rgba(255,255,255,.75);
}

.btn-white {
    background: white;
    color: var(--blue-dark);
}

.btn-dark {
    background: #071a3c;
    color: white;
}

.btn-large {
    min-height: 54px;
    padding: 0 26px;
    border-radius: 14px;
}


/* =========================
   HEADER
========================= */

.header {
    height: 76px;

    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;

    display: flex;
    align-items: center;

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

    border-bottom:
        1px solid rgba(225,232,242,.8);

    backdrop-filter: blur(18px);
}

.header-content {
    display: flex;
    align-items: center;
    gap: 34px;
}

.brand {
    margin-right: auto;
}

.brand img {
    width: 165px;
    max-height: 48px;
    object-fit: contain;
}

.nav {
    display: flex;
    align-items: center;
    gap: 27px;
}

.nav a {
    color: #43516a;
    font-size: 14px;
    font-weight: 600;

    transition: color .2s;
}

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

.header-actions {
    display: flex;
    gap: 10px;
}

.menu-toggle {
    display: none;

    border: 0;
    background: transparent;

    color: var(--blue-dark);
    font-size: 28px;

    cursor: pointer;
}


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

.hero {
    min-height: 780px;

    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;

    padding: 145px 0 95px;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(20, 138, 255, .11),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #f5f9ff
        );
}

.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: .23;

    background-image:
        linear-gradient(#dbe6f5 1px, transparent 1px),
        linear-gradient(90deg, #dbe6f5 1px, transparent 1px);

    background-size: 54px 54px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 85%
        );
}

.hero-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;
}

.hero-glow-one {
    right: -180px;
    top: 70px;

    background: rgba(0, 117, 255, .15);
}

.hero-glow-two {
    left: -260px;
    bottom: -220px;

    background: rgba(67, 212, 255, .12);
}

.hero-content {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        .92fr 1.08fr;

    align-items: center;
    gap: 65px;
}

.hero-copy {
    max-width: 590px;
}

.hero-badge {
    width: fit-content;

    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 22px;
    padding: 7px 13px;

    border:
        1px solid rgba(8,119,249,.18);

    border-radius: 999px;

    background: #eef6ff;

    color: #0968d8;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.hero-badge span {
    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #13c784;

    box-shadow:
        0 0 0 5px rgba(19,199,132,.12);
}

.hero h1 {
    max-width: 650px;

    color: #071b42;

    font-size: clamp(43px, 5vw, 69px);
    line-height: 1.03;
    letter-spacing: -3.3px;

    font-weight: 750;
}

.hero h1 strong {
    display: block;

    color: var(--blue);

    font-weight: 800;
}

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

    margin-top: 25px;

    color: #61718b;

    font-size: 18px;
    line-height: 1.75;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 32px;
}

.hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;

    margin-top: 27px;

    color: #65748b;
    font-size: 13px;
    font-weight: 600;
}

.hero-features div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.check {
    color: #16ae78;
    font-weight: 900;
}


/* =========================
   SOFTWARE MOCKUP
========================= */

.hero-visual {
    position: relative;

    perspective: 1300px;
}

.software-window {
    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.8);

    border-radius: 24px;

    background: #f8faff;

    box-shadow:
        0 45px 100px rgba(14, 45, 94, .22);

    transform:
        rotateY(-3deg)
        rotateX(1deg);
}

.window-top {
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 18px;

    background: white;

    border-bottom: 1px solid #edf1f6;
}

.window-brand img {
    width: 105px;
    max-height: 32px;
    object-fit: contain;
}

.window-controls {
    display: flex;
    gap: 7px;
}

.window-controls span {
    width: 9px;
    height: 9px;

    border-radius: 50%;
    background: #dbe2ec;
}

.software-body {
    min-height: 420px;

    display: grid;
    grid-template-columns: 62px 1fr;
}

.software-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 17px;

    padding-top: 20px;

    background:
        linear-gradient(
            180deg,
            #082d68,
            #061b42
        );
}

.side-logo {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    margin-bottom: 13px;

    border-radius: 10px;

    background: var(--blue);

    color: white;
    font-weight: 900;
}

.side-item {
    width: 28px;
    height: 28px;

    border-radius: 8px;

    background:
        rgba(255,255,255,.09);
}

.side-item.active {
    background: #1685ff;
}

.software-content {
    padding: 25px;
}

.software-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 24px;
}

.software-title small,
.software-bottom small {
    display: block;

    color: #8a98ab;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.software-title h3 {
    margin-top: 2px;

    color: #102b58;

    font-size: 20px;
}

.online {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #6c7b91;

    font-size: 10px;
    font-weight: 700;
}

.online span {
    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #20ca8c;
}

.module-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.module-card {
    min-height: 108px;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 17px;

    border: 1px solid #e5ebf3;
    border-radius: 16px;

    background: white;

    box-shadow:
        0 8px 24px rgba(28,54,91,.06);
}

.module-icon {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    color: white;
    font-weight: 900;
}

.payroll .module-icon {
    background: #1884ff;
}

.invoice .module-icon {
    background: #16b887;
}

.pos .module-icon {
    background: #ff9d3e;
}

.admin .module-icon {
    background: #7357ee;
}

.module-card strong {
    display: block;

    color: #17335f;
    font-size: 13px;
}

.module-card small {
    color: #8290a3;
    font-size: 10px;
}

.software-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 18px;
    padding: 14px 17px;

    border-radius: 13px;

    background: #edf5ff;
}

.software-bottom strong {
    color: #18345e;
    font-size: 12px;
}

.software-status {
    color: #18855f;
    font-size: 10px;
    font-weight: 700;
}

.floating-card {
    position: absolute;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 13px 16px;

    border:
        1px solid rgba(255,255,255,.8);

    border-radius: 14px;

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

    box-shadow:
        0 18px 45px rgba(17,47,91,.17);

    backdrop-filter: blur(12px);
}

.floating-card small {
    display: block;

    color: #8794a6;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.floating-card strong {
    display: block;

    margin-top: 1px;

    color: #18345c;
    font-size: 11px;
}

.floating-security {
    left: -32px;
    bottom: 45px;
}

.floating-update {
    right: -22px;
    top: 85px;
}

.floating-icon {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #e8fff5;

    color: #16ae78;
    font-weight: 900;
}

.pulse {
    width: 12px;
    height: 12px;

    border-radius: 50%;
    background: var(--blue);

    box-shadow:
        0 0 0 6px rgba(8,119,249,.12);
}


/* =========================
   TRUST
========================= */

.trust-bar {
    padding: 26px 0;

    border-top: 1px solid #edf1f6;
    border-bottom: 1px solid #edf1f6;

    background: white;
}

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

.trust-content p {
    color: #8390a4;
    font-size: 13px;
}

.trust-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 28px;

    color: #334661;
    font-size: 12px;
    font-weight: 800;
}


/* =========================
   SECCIONES
========================= */

.section {
    padding: 110px 0;
}

.section-heading {
    max-width: 720px;

    margin: 0 auto 60px;

    text-align: center;
}

.eyebrow {
    display: block;

    margin-bottom: 12px;

    color: var(--blue);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
}

.section-heading h2 {
    color: #0c2348;

    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.08;
    letter-spacing: -2px;
}

.section-heading h2 strong {
    color: var(--blue);
}

.section-heading p {
    max-width: 650px;

    margin: 20px auto 0;

    color: var(--muted);
    font-size: 16px;
}

.intro-section {
    background: white;
}

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

.feature-card {
    position: relative;

    min-height: 270px;

    padding: 32px;

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

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f9fbfe
        );

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.feature-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 24px 60px rgba(25,49,85,.10);
}

.feature-number {
    margin-bottom: 45px;

    color: #a9cfff;

    font-size: 13px;
    font-weight: 900;
}

.feature-card h3 {
    margin-bottom: 10px;

    color: #17345e;
    font-size: 21px;
}

.feature-card p {
    color: #75839a;
    font-size: 14px;
}


/* =========================
   MODULOS
========================= */

.modules-section {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #061632,
            #082a61
        );
}

.modules-section::before {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    right: -300px;
    top: -280px;

    border-radius: 50%;

    background:
        rgba(0,122,255,.18);

    filter: blur(90px);
}

.section-heading.light h2 {
    color: white;
}

.section-heading.light h2 strong {
    color: #51adff;
}

.modules-showcase {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.big-module {
    min-height: 390px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 30px;

    border:
        1px solid rgba(255,255,255,.11);

    border-radius: 24px;

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

    color: white;

    backdrop-filter: blur(14px);

    transition:
        transform .25s ease,
        background .25s ease;
}

.big-module:hover {
    transform: translateY(-7px);

    background:
        rgba(255,255,255,.11);
}

.big-module-icon {
    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    margin-bottom: 65px;

    border-radius: 16px;

    color: white;
    font-size: 21px;
    font-weight: 900;
}

.module-nomina .big-module-icon {
    background: #1685ff;
}

.module-facturacion .big-module-icon {
    background: #19bd8d;
}

.module-pos .big-module-icon {
    background: #ff9d3e;
}

.big-module span {
    color: #74baff;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.big-module h3 {
    margin: 8px 0 12px;

    font-size: 25px;
    line-height: 1.15;
}

.big-module p {
    color: #bdcce1;
    font-size: 14px;
}

.big-module a {
    display: inline-block;

    margin-top: 25px;

    color: white;
    font-size: 13px;
    font-weight: 800;
}


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

.final-cta {
    background: #f4f8fd;
}

.final-cta-box {
    min-height: 310px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;

    padding: 55px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #0878fa,
            #0759cf
        );

    box-shadow:
        0 30px 70px rgba(7,94,215,.23);

    color: white;
}

.final-cta .eyebrow {
    color: #b9ddff;
}

.final-cta h2 {
    max-width: 660px;

    font-size: clamp(32px, 4vw, 47px);
    line-height: 1.08;
    letter-spacing: -2px;
}

.final-cta h2 strong {
    display: block;
}

.final-cta p {
    max-width: 570px;

    margin-top: 16px;

    color: #d7eaff;
}

.cta-actions {
    min-width: 220px;

    display: flex;
    flex-direction: column;
    gap: 10px;
}


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

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

.footer-tech {
    position: relative;
    overflow: hidden;

    padding: 82px 0 24px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0, 119, 255, .16),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 75%,
            rgba(0, 183, 255, .09),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #020b1b 0%,
            #04152f 48%,
            #031127 100%
        );

    color: white;
}


/* Línea luminosa superior */

.footer-top-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #0877f9 20%,
            #25c5ff 50%,
            #0877f9 80%,
            transparent
        );

    box-shadow:
        0 0 22px rgba(8,119,249,.65);
}


/* Cuadrícula tecnológica */

.footer-grid {
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .055;

    background-image:
        linear-gradient(
            rgba(70, 151, 255, .8) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(70, 151, 255, .8) 1px,
            transparent 1px
        );

    background-size: 46px 46px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 85%
        );
}


/* Brillos */

.footer-glow {
    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    filter: blur(110px);

    pointer-events: none;
}

.footer-glow-left {
    left: -250px;
    top: -120px;

    background:
        rgba(0, 117, 255, .16);
}

.footer-glow-right {
    right: -270px;
    bottom: -250px;

    background:
        rgba(0, 195, 255, .12);
}


/* Contenido */

.footer-tech-content {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(300px, 1.15fr)
        minmax(500px, 1.4fr);

    gap: 100px;
}


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

.footer-tech-brand {
    max-width: 430px;
}

.footer-logo {
    width: 190px;
    max-height: 72px;

    object-fit: contain;
    object-position: left center;

    margin-bottom: 22px;
}

.footer-slogan {
    margin-bottom: 9px;

    color: #ffffff;

    font-size: 20px;
    font-weight: 700;
}

.footer-description {
    max-width: 390px;

    color: #8195b2;

    font-size: 14px;
    line-height: 1.75;
}


/* Estado NOMISIS */

.footer-status {
    width: fit-content;

    display: flex;
    align-items: center;
    gap: 20px;

    margin-top: 30px;
    padding: 14px 18px;

    border:
        1px solid rgba(103, 160, 231, .15);

    border-radius: 14px;

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04);

    backdrop-filter: blur(10px);
}

.status-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-item small {
    display: block;

    color: #5f7899;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.status-item strong {
    display: block;

    margin-top: 2px;

    color: #dceaff;

    font-size: 11px;
    letter-spacing: .4px;
}

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

    flex: 0 0 9px;

    border-radius: 50%;

    background: #22d39a;

    box-shadow:
        0 0 0 5px rgba(34,211,154,.08),
        0 0 14px rgba(34,211,154,.5);
}

.status-divider {
    width: 1px;
    height: 31px;

    background:
        rgba(255,255,255,.09);
}

.core-icon {
    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #0877f9,
            #064ba8
        );

    box-shadow:
        0 7px 20px rgba(0,110,255,.20);

    color: white;

    font-size: 11px;
    font-weight: 900;
}


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

.footer-tech-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 55px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-column-number {
    margin-bottom: 9px;

    color: #1685ff;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.footer-column > strong {
    position: relative;

    margin-bottom: 22px;
    padding-bottom: 12px;

    color: #f5f9ff;

    font-size: 14px;
    letter-spacing: .2px;
}

.footer-column > strong::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 26px;
    height: 2px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #0877f9,
            #27c5ff
        );

    box-shadow:
        0 0 10px rgba(8,119,249,.4);
}

.footer-column a {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 11px;

    color: #8296b3;

    font-size: 13px;

    transition:
        color .2s ease,
        transform .2s ease;
}

.footer-column a span {
    color: #177ff0;

    font-size: 11px;

    opacity: 0;

    transform: translateX(-5px);

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.footer-column a:hover {
    color: #ffffff;

    transform: translateX(4px);
}

.footer-column a:hover span {
    opacity: 1;
    transform: translateX(0);
}


/* =========================
   BARRA DE SISTEMA
========================= */

.footer-system-bar {
    position: relative;
    z-index: 2;

    min-height: 62px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;
    gap: 25px;

    margin-top: 62px;
    padding-top: 22px;

    border-top:
        1px solid rgba(111, 151, 203, .13);

    color: #56708f;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .7px;
}

.footer-system-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.system-company {
    color: #8199b8;
    font-weight: 900;
}

.system-separator {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #1685ff;

    box-shadow:
        0 0 7px #1685ff;
}


/* Chips centrales */

.footer-system-center {
    display: flex;
    align-items: center;
    gap: 7px;
}

.system-chip {
    min-height: 26px;

    display: flex;
    align-items: center;
    gap: 6px;

    padding: 0 10px;

    border:
        1px solid rgba(95,143,205,.14);

    border-radius: 7px;

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

    color: #6883a5;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .7px;
}

.system-chip-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #20d397;

    box-shadow:
        0 0 7px rgba(32,211,151,.8);
}

.footer-system-right {
    justify-self: end;
}


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

@media (max-width: 1050px) {

    .footer-tech-content {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .footer-tech-brand {
        max-width: 600px;
    }

    .footer-system-bar {
        grid-template-columns: 1fr auto;
    }

    .footer-system-center {
        display: none;
    }

}


@media (max-width: 720px) {

    .footer-tech {
        padding-top: 65px;
    }

    .footer-tech-links {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .footer-status {
        width: 100%;

        justify-content: space-between;
    }

    .footer-system-bar {
        grid-template-columns: 1fr;

        gap: 12px;

        padding-bottom: 5px;
    }

    .footer-system-left {
        flex-wrap: wrap;
    }

    .footer-system-right {
        justify-self: start;
    }

}


@media (max-width: 480px) {

    .footer-tech-links {
        grid-template-columns: 1fr;
    }

    .footer-status {
        align-items: flex-start;
        flex-direction: column;
    }

    .status-divider {
        width: 100%;
        height: 1px;
    }

}
/* =========================================================
   FOOTER TECH - COMPACTO
   ========================================================= */

.footer-tech {
    padding: 48px 0 16px;
}


/* Contenido principal */

.footer-tech-content {
    grid-template-columns:
        minmax(280px, 1.05fr)
        minmax(500px, 1.45fr);

    gap: 80px;

    align-items: start;
}


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

.footer-tech-brand {
    max-width: 400px;
}

.footer-logo {
    width: 135px;
    max-height: 55px;

    margin-bottom: 14px;
}

.footer-slogan {
    margin-bottom: 5px;

    font-size: 18px;
    line-height: 1.3;
}

.footer-description {
    max-width: 370px;

    font-size: 13px;
    line-height: 1.6;
}


/* =========================
   ESTADO NOMISIS / CORE26
========================= */

.footer-status {
    margin-top: 20px;

    padding: 10px 14px;

    gap: 15px;

    border-radius: 12px;
}

.status-item {
    gap: 8px;
}

.status-item small {
    font-size: 7px;
}

.status-item strong {
    font-size: 10px;
}

.status-divider {
    height: 27px;
}

.core-icon {
    width: 27px;
    height: 27px;
}


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

.footer-tech-links {
    gap: 45px;
}

.footer-column-number {
    margin-bottom: 5px;

    font-size: 8px;
}

.footer-column > strong {
    margin-bottom: 14px;
    padding-bottom: 9px;

    font-size: 13px;
}

.footer-column a {
    margin-bottom: 7px;

    font-size: 12px;
}


/* =========================
   BARRA INFERIOR
========================= */

.footer-system-bar {
    min-height: 42px;

    margin-top: 36px;
    padding-top: 15px;

    gap: 20px;

    font-size: 8px;
}

.system-chip {
    min-height: 23px;

    padding: 0 8px;

    font-size: 7px;
}


/* =========================
   CUADRÍCULA
========================= */

.footer-grid {
    background-size: 42px 42px;
}


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

@media (max-width: 1050px) {

    .footer-tech {
        padding-top: 42px;
    }

    .footer-tech-content {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .footer-system-bar {
        margin-top: 30px;
    }

}


@media (max-width: 720px) {

    .footer-tech {
        padding: 38px 0 14px;
    }

    .footer-tech-links {
        gap: 28px;
    }

    .footer-system-bar {
        margin-top: 26px;
    }

}

/* =========================================================
   COTIZADOR NOMISIS / CORE26
========================================================= */

.pricing-section {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(8, 119, 249, .09),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f7faff 0%,
            #f3f7fc 100%
        );
}

.quote-builder-section {
    padding-top: 110px;
}


/* =========================================================
   ESTADO CORE26
========================================================= */

.core26-pricing-status {
    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    margin-bottom: 22px;
    padding: 15px 20px;

    border: 1px solid #dce7f4;
    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(247,251,255,.98)
        );

    box-shadow:
        0 10px 35px rgba(17, 47, 91, .055);
}

.core26-status-left {
    display: flex;
    align-items: center;
    gap: 13px;
}

.core26-status-left small {
    display: block;

    margin-bottom: 2px;

    color: #8a9bb1;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.3px;
}

.core26-status-left strong {
    display: block;

    color: #17345e;

    font-size: 12px;
}

.core26-status-dot {
    width: 11px;
    height: 11px;

    flex: 0 0 11px;

    border-radius: 50%;

    background: #b7c3d3;
}

.core26-status-dot.loading {
    background: #1685ff;

    box-shadow:
        0 0 0 6px rgba(22,133,255,.09),
        0 0 15px rgba(22,133,255,.25);

    animation: core26Pulse 1.3s infinite;
}

.core26-status-dot.online {
    background: #1fc98a;

    box-shadow:
        0 0 0 6px rgba(31,201,138,.09),
        0 0 15px rgba(31,201,138,.25);
}

.core26-status-dot.error {
    background: #e95463;

    box-shadow:
        0 0 0 6px rgba(233,84,99,.09);
}

@keyframes core26Pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .55;
        transform: scale(.85);
    }

}

.core26-status-period {
    padding: 7px 12px;

    border: 1px solid #dce9f8;
    border-radius: 999px;

    background: #edf6ff;

    color: #1672dc;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .5px;
}


/* =========================================================
   PERIODICIDAD
========================================================= */

.quote-period-wrapper {
    margin-bottom: 22px;
    padding: 22px;

    border: 1px solid #dfe8f3;
    border-radius: 20px;

    background: white;

    box-shadow:
        0 12px 35px rgba(20,48,88,.045);
}

.quote-period-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;

    margin-bottom: 17px;
}

.quote-period-heading span {
    display: block;

    margin-bottom: 3px;

    color: #1680ed;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.quote-period-heading strong {
    display: block;

    color: #17345e;

    font-size: 16px;
}

.quote-period-heading > small {
    max-width: 350px;

    color: #8795a9;

    font-size: 10px;
    line-height: 1.5;

    text-align: right;
}

.quote-period-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
}

.quote-period-button {
    min-height: 61px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    padding: 10px 15px;

    border: 1px solid #e0e8f2;
    border-radius: 12px;

    background: #fbfdff;

    color: #52657f;

    cursor: pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.quote-period-button:hover {
    transform: translateY(-2px);

    border-color: rgba(8,119,249,.35);

    background: #f6faff;
}

.quote-period-button span {
    color: #263f64;

    font-size: 12px;
    font-weight: 800;
}

.quote-period-button small {
    margin-top: 2px;

    color: #8b99ac;

    font-size: 9px;
}

.quote-period-button.active {
    border-color: #0877f9;

    background:
        linear-gradient(
            135deg,
            #0877f9,
            #0560d8
        );

    box-shadow:
        0 10px 24px rgba(8,119,249,.18);

    color: white;
}

.quote-period-button.active span {
    color: white;
}

.quote-period-button.active small {
    color: #cce5ff;
}


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

.quote-builder {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(330px, .72fr);

    align-items: start;

    gap: 22px;
}


/* =========================================================
   PANEL DE MÓDULOS
========================================================= */

.quote-modules-panel {
    min-width: 0;

    padding: 27px;

    border: 1px solid #dfe7f1;
    border-radius: 24px;

    background: white;

    box-shadow:
        0 18px 50px rgba(20,48,88,.06);
}

.quote-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    margin-bottom: 22px;
}

.quote-panel-heading span {
    display: block;

    margin-bottom: 3px;

    color: #1680ed;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.3px;
}

.quote-panel-heading h3 {
    color: #102d59;

    font-size: 22px;
    line-height: 1.2;
}

.quote-panel-badge {
    padding: 7px 11px;

    border: 1px solid #dceaf8;
    border-radius: 999px;

    background: #f0f7ff;

    color: #2679d5;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .5px;
}


/* =========================================================
   CONTENEDOR DE MÓDULOS
========================================================= */

.quote-module-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* =========================================================
   TARJETA DE MÓDULO
   Se genera dinámicamente desde main.js
========================================================= */

.quote-module-card {
    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 17px;

    min-height: 112px;

    padding: 18px;

    border: 1px solid #e1e8f1;
    border-radius: 17px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbfdff
        );

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.quote-module-card:hover {
    transform: translateY(-2px);

    border-color: rgba(8,119,249,.28);

    box-shadow:
        0 12px 30px rgba(20,48,88,.065);
}

.quote-module-card.selected {
    border-color: rgba(8,119,249,.48);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f2f8ff 100%
        );

    box-shadow:
        0 12px 35px rgba(8,119,249,.08);
}

.quote-module-card.selected::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 4px;

    background:
        linear-gradient(
            180deg,
            #1685ff,
            #0560d8
        );
}


/* ICONO */

.quote-module-icon {
    width: 51px;
    height: 51px;

    flex: 0 0 51px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #eaf4ff,
            #dbeaff
        );

    color: #0877f9;

    font-size: 17px;
    font-weight: 900;

    transition:
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

.quote-module-card.selected .quote-module-icon {
    background:
        linear-gradient(
            135deg,
            #0877f9,
            #0560d8
        );

    color: white;

    box-shadow:
        0 9px 22px rgba(8,119,249,.20);
}


/* INFO */

.quote-module-info {
    min-width: 0;
}

.quote-module-code {
    display: block;

    margin-bottom: 2px;

    color: #1680ed;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.quote-module-info h4 {
    margin-bottom: 4px;

    color: #16345f;

    font-size: 15px;
    line-height: 1.2;
}

.quote-module-info p {
    max-width: 480px;

    color: #7b8a9f;

    font-size: 10px;
    line-height: 1.5;
}

.quote-module-price {
    display: flex;
    align-items: baseline;
    gap: 4px;

    margin-top: 7px;
}

.quote-module-price strong {
    color: #0d2d5c;

    font-size: 16px;
    line-height: 1;
}

.quote-module-price small {
    color: #91a0b3;

    font-size: 8px;
}


/* =========================================================
   CONTROLES DE MÓDULO
========================================================= */

.quote-module-controls {
    min-width: 180px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}


/* SWITCH */

.quote-module-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    cursor: pointer;
    user-select: none;
}

.quote-module-toggle input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}

.quote-switch {
    position: relative;

    width: 39px;
    height: 22px;

    border-radius: 999px;

    background: #dce4ee;

    transition: background .2s ease;
}

.quote-switch::after {
    content: "";

    position: absolute;
    top: 3px;
    left: 3px;

    width: 16px;
    height: 16px;

    border-radius: 50%;

    background: white;

    box-shadow:
        0 2px 7px rgba(16,40,75,.18);

    transition: transform .2s ease;
}

.quote-module-toggle input:checked + .quote-switch {
    background: #0877f9;
}

.quote-module-toggle input:checked + .quote-switch::after {
    transform: translateX(17px);
}

.quote-toggle-label {
    color: #687990;

    font-size: 9px;
    font-weight: 800;
}

.quote-module-card.selected .quote-toggle-label {
    color: #1674db;
}


/* =========================================================
   CONTADOR DE LICENCIAS
========================================================= */

.quote-seat-control {
    display: flex;
    align-items: center;
    gap: 8px;

    opacity: .35;

    pointer-events: none;

    transition: opacity .2s ease;
}

.quote-module-card.selected .quote-seat-control {
    opacity: 1;
    pointer-events: auto;
}

.quote-seat-label {
    margin-right: 2px;

    color: #8392a6;

    font-size: 8px;
    font-weight: 800;
}

.quote-seat-button {
    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    border: 1px solid #dce5ef;
    border-radius: 8px;

    background: white;

    color: #2a466e;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.quote-seat-button:hover {
    transform: translateY(-1px);

    border-color: #0877f9;

    background: #f4f9ff;

    color: #0877f9;
}

.quote-seat-value {
    min-width: 32px;

    color: #12345f;

    font-size: 14px;
    font-weight: 900;

    text-align: center;
}


/* =========================================================
   LOADING
========================================================= */

.quote-loading {
    min-height: 265px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 35px;

    border: 1px dashed #dbe5f1;
    border-radius: 17px;

    background: #fbfdff;

    text-align: center;
}

.quote-loading-spinner {
    width: 33px;
    height: 33px;

    margin-bottom: 14px;

    border: 3px solid #e1edfa;
    border-top-color: #0877f9;
    border-radius: 50%;

    animation: quoteSpin .75s linear infinite;
}

@keyframes quoteSpin {
    to {
        transform: rotate(360deg);
    }
}

.quote-loading strong {
    color: #17345e;

    font-size: 12px;
}

.quote-loading span {
    margin-top: 4px;

    color: #8a99ad;

    font-size: 9px;
}


/* =========================================================
   ERROR API
========================================================= */

.quote-api-error {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;

    margin-top: 12px;
    padding: 16px;

    border: 1px solid #f0d9dc;
    border-radius: 14px;

    background: #fff8f9;
}

.quote-api-error[hidden] {
    display: none;
}

.quote-api-error-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #ffe7ea;

    color: #d84959;

    font-size: 14px;
    font-weight: 900;
}

.quote-api-error strong {
    display: block;

    color: #833541;

    font-size: 11px;
}

.quote-api-error p {
    margin-top: 2px;

    color: #a16a73;

    font-size: 9px;
}

.quote-api-error button {
    min-height: 35px;

    padding: 0 13px;

    border: 1px solid #e4c5ca;
    border-radius: 9px;

    background: white;

    color: #a04451;

    font-size: 9px;
    font-weight: 800;

    cursor: pointer;
}


/* =========================================================
   HERRAMIENTAS INCLUIDAS
========================================================= */

.included-platform-tools {
    margin-top: 21px;
    padding: 20px;

    border: 1px solid #dce8f5;
    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            #f7fbff,
            #eef6ff
        );
}

.included-tools-heading {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 16px;
}

.included-tools-icon {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #0877f9,
            #0560d8
        );

    color: white;

    font-size: 16px;
    font-weight: 900;
}

.included-tools-heading span {
    display: block;

    margin-bottom: 1px;

    color: #1680ed;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.included-tools-heading strong {
    display: block;

    color: #17345e;

    font-size: 13px;
}

.included-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
}

.included-tool {
    display: flex;
    align-items: center;
    gap: 9px;

    min-height: 53px;

    padding: 9px 11px;

    border: 1px solid rgba(205,222,241,.75);
    border-radius: 11px;

    background: rgba(255,255,255,.72);
}

.included-tool > span {
    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #e6f8f1;

    color: #16aa77;

    font-size: 9px;
    font-weight: 900;
}

.included-tool strong {
    display: block;

    color: #345173;

    font-size: 9px;
}

.included-tool small {
    display: block;

    margin-top: 1px;

    color: #8a9aaf;

    font-size: 7px;
}


/* =========================================================
   PANEL RESUMEN
========================================================= */

.quote-summary-panel {
    min-width: 0;
}

.quote-summary-sticky {
    position: sticky;
    top: 96px;

    overflow: hidden;

    padding: 25px;

    border: 1px solid rgba(44,113,201,.24);
    border-radius: 24px;

    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(24,133,255,.17),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #061630,
            #082a5d
        );

    box-shadow:
        0 25px 65px rgba(8,37,79,.18);

    color: white;
}

.quote-summary-header {
    padding-bottom: 18px;

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

.quote-summary-header > span {
    display: block;

    margin-bottom: 5px;

    color: #53adff;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.3px;
}

.quote-summary-header h3 {
    color: white;

    font-size: 25px;
    line-height: 1.15;
}

.quote-summary-header p {
    margin-top: 7px;

    color: #9db2cd;

    font-size: 10px;
    line-height: 1.55;
}


/* PERIODO */

.quote-summary-period {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 16px;
    padding: 10px 12px;

    border: 1px solid rgba(94,160,239,.13);
    border-radius: 10px;

    background: rgba(255,255,255,.04);
}

.quote-summary-period span {
    color: #718cac;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}

.quote-summary-period strong {
    color: #dcecff;

    font-size: 10px;
}


/* =========================================================
   ITEMS RESUMEN
========================================================= */

.quote-summary-items {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin-top: 15px;
}

.quote-empty {
    min-height: 155px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 22px;

    border: 1px dashed rgba(112,164,226,.18);
    border-radius: 13px;

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

    text-align: center;
}

.quote-empty-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    margin-bottom: 9px;

    border-radius: 11px;

    background: rgba(21,132,255,.13);

    color: #4ca8ff;

    font-size: 14px;
    font-weight: 900;
}

.quote-empty strong {
    color: #c7d9ee;

    font-size: 10px;
}

.quote-empty span {
    max-width: 210px;

    margin-top: 4px;

    color: #7088a6;

    font-size: 8px;
    line-height: 1.5;
}


/* ITEM */

.quote-summary-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;

    padding: 11px 12px;

    border: 1px solid rgba(102,159,227,.12);
    border-radius: 10px;

    background: rgba(255,255,255,.035);
}

.quote-summary-item-name strong {
    display: block;

    color: #dbeaff;

    font-size: 9px;
}

.quote-summary-item-name small {
    display: block;

    margin-top: 2px;

    color: #7089a8;

    font-size: 7px;
}

.quote-summary-item-price {
    align-self: center;

    color: #f4f9ff;

    font-size: 10px;
    font-weight: 900;

    text-align: right;
}


/* =========================================================
   TOTALES
========================================================= */

.quote-totals {
    margin-top: 17px;
    padding-top: 15px;

    border-top:
        1px solid rgba(255,255,255,.10);
}

.quote-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 8px;
}

.quote-total-row > span {
    color: #7f96b3;

    font-size: 9px;
}

.quote-total-row > strong {
    color: #c8d9ec;

    font-size: 10px;
}

.quote-total-divider {
    height: 1px;

    margin: 13px 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.10),
            transparent
        );
}

.quote-total-row.grand-total {
    margin-bottom: 0;
}

.quote-total-row.grand-total div span {
    display: block;

    color: #59b0ff;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.quote-total-row.grand-total div small {
    display: block;

    margin-top: 1px;

    color: #607c9f;

    font-size: 7px;
}

.quote-total-row.grand-total > strong {
    color: white;

    font-size: 26px;
    line-height: 1;
    letter-spacing: -.7px;
}


/* =========================================================
   LICENCIAS TOTALES
========================================================= */

.quote-seat-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 17px;
    padding: 11px 12px;

    border: 1px solid rgba(87,156,238,.14);
    border-radius: 10px;

    background: rgba(22,133,255,.07);
}

.quote-seat-summary span {
    color: #7392b7;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: .8px;
}

.quote-seat-summary strong {
    color: #55adff;

    font-size: 16px;
}


/* =========================================================
   BOTÓN SOLICITAR
========================================================= */

.quote-request-button {
    width: 100%;
    min-height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin-top: 17px;

    border: 0;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #1685ff,
            #0562dd
        );

    box-shadow:
        0 13px 28px rgba(0,102,230,.24);

    color: white;

    font-size: 10px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}

.quote-request-button:hover:not(:disabled) {
    transform: translateY(-2px);

    box-shadow:
        0 17px 34px rgba(0,102,230,.32);
}

.quote-request-button span {
    font-size: 15px;
}

.quote-request-button:disabled {
    opacity: .38;

    cursor: not-allowed;

    box-shadow: none;
}

.quote-summary-note {
    margin-top: 11px;

    color: #617c9e;

    font-size: 7px;
    line-height: 1.5;

    text-align: center;
}


/* =========================================================
   EXPLICACIÓN LICENCIA CONCURRENTE
========================================================= */

.concurrent-license-info {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;

    margin-top: 17px;
    padding: 12px;

    border: 1px solid rgba(88,156,238,.12);
    border-radius: 11px;

    background: rgba(255,255,255,.025);
}

.concurrent-info-icon {
    width: 24px;
    height: 24px;

    display: grid;
    place-items: center;

    border-radius: 7px;

    background: rgba(22,133,255,.12);

    color: #52aaff;

    font-size: 10px;
    font-weight: 900;
}

.concurrent-license-info strong {
    display: block;

    color: #a9c4e2;

    font-size: 8px;
}

.concurrent-license-info p {
    margin-top: 3px;

    color: #617d9e;

    font-size: 7px;
    line-height: 1.55;
}


/* =========================================================
   PREVIEW COTIZACIÓN EN CONTACTO
========================================================= */

.contact-quote-preview {
    margin-bottom: 18px;
    padding: 16px;

    border:
        1px solid rgba(76,169,255,.22);

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(18,119,238,.10),
            rgba(255,255,255,.035)
        );
}

.contact-quote-preview[hidden] {
    display: none;
}

.contact-quote-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 12px;
}

.contact-quote-preview-header span {
    display: block;

    color: #51acff;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.contact-quote-preview-header strong {
    display: block;

    margin-top: 1px;

    color: white;

    font-size: 12px;
}

.contact-quote-preview-header button {
    min-height: 31px;

    padding: 0 11px;

    border:
        1px solid rgba(102,174,255,.22);

    border-radius: 8px;

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

    color: #9ccfff;

    font-size: 8px;
    font-weight: 800;

    cursor: pointer;
}

.contact-quote-preview-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-quote-preview-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding: 7px 9px;

    border-radius: 8px;

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

    color: #a9bed7;

    font-size: 8px;
}

.contact-quote-preview-item strong {
    color: #d8e9fb;

    font-size: 8px;
}

.contact-quote-preview-total {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 11px;
    padding-top: 10px;

    border-top:
        1px solid rgba(255,255,255,.08);
}

.contact-quote-preview-total span {
    color: #7792b2;

    font-size: 8px;
}

.contact-quote-preview-total strong {
    color: #55adff;

    font-size: 16px;
}


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

.form-error {
    display: none;

    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;

    margin-top: 15px;
    padding: 12px 14px;

    border:
        1px solid rgba(255,104,121,.20);

    border-radius: 11px;

    background:
        rgba(255,73,93,.08);
}

.form-error.show {
    display: grid;
}

.form-error[hidden] {
    display: none;
}

.form-error > div {
    width: 26px;
    height: 26px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background:
        rgba(255,80,99,.12);

    color: #ff8592;

    font-size: 10px;
    font-weight: 900;
}

.form-error > span > strong {
    display: block;

    color: #ffc2c9;

    font-size: 9px;
}

.form-error > span > span {
    display: block;

    margin-top: 1px;

    color: #bc8790;

    font-size: 8px;
}


/* =========================================================
   MÓDULO INVENTARIOS - SHOWCASE PRINCIPAL
========================================================= */

.modules-showcase {
    grid-template-columns:
        repeat(4, 1fr);
}

.module-inventarios .big-module-icon {
    background:
        linear-gradient(
            135deg,
            #7657ff,
            #5535d7
        );
}


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

@media (max-width: 1120px) {

    .quote-builder {
        grid-template-columns:
            minmax(0, 1.4fr)
            minmax(310px, .75fr);
    }

    .quote-module-controls {
        min-width: 160px;
    }

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

}


@media (max-width: 950px) {

    .quote-builder {
        grid-template-columns: 1fr;
    }

    .quote-summary-sticky {
        position: relative;
        top: auto;
    }

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

}


@media (max-width: 720px) {

    .core26-pricing-status {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .quote-period-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .quote-period-heading > small {
        max-width: none;

        text-align: left;
    }

    .quote-module-card {
        grid-template-columns:
            auto 1fr;
    }

    .quote-module-controls {
        grid-column: 1 / -1;

        width: 100%;
        min-width: 0;

        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        padding-top: 11px;

        border-top: 1px solid #edf1f6;
    }

    .included-tools-grid {
        grid-template-columns: 1fr;
    }

    .modules-showcase {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 520px) {

    .quote-builder-section {
        padding-top: 85px;
    }

    .quote-modules-panel,
    .quote-summary-sticky {
        padding: 20px 17px;

        border-radius: 19px;
    }

    .quote-period-wrapper {
        padding: 17px;
    }

    .quote-period-selector {
        grid-template-columns: 1fr 1fr;
    }

    .quote-period-button {
        min-height: 56px;

        padding: 9px 11px;
    }

    .quote-module-card {
        padding: 15px;
    }

    .quote-module-icon {
        width: 44px;
        height: 44px;

        flex-basis: 44px;
    }

    .quote-panel-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .quote-api-error {
        grid-template-columns:
            auto 1fr;
    }

    .quote-api-error button {
        grid-column: 1 / -1;

        width: 100%;
    }

    .quote-total-row.grand-total > strong {
        font-size: 23px;
    }

}


/* =========================================================
   PRUEBA 15 DÍAS
========================================================= */

.trial-banner {
    position: relative;
    overflow: hidden;

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 25px;

    margin-top: 45px;
    padding: 25px 30px;

    border:
        1px solid #dce8f6;

    border-radius: 20px;

    background: white;

    box-shadow:
        0 15px 45px rgba(24,50,89,.055);
}

.trial-banner::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -100px;
    top: -130px;

    border-radius: 50%;

    background:
        rgba(8,119,249,.08);

    filter: blur(25px);
}


/* Número 15 */

.trial-icon {
    width: 65px;
    height: 65px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            #0877f9,
            #0555bd
        );

    box-shadow:
        0 12px 30px rgba(8,119,249,.20);

    color: white;

    font-size: 23px;
    font-weight: 900;
    line-height: 1;
}

.trial-icon small {
    margin-top: 4px;

    color: #cbe5ff;

    font-size: 7px;
    letter-spacing: 1px;
}


/* Texto */

.trial-copy span {
    display: block;

    margin-bottom: 3px;

    color: #0877f9;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.3px;
}

.trial-copy h3 {
    color: #102d59;

    font-size: 18px;
}

.trial-copy p {
    max-width: 650px;

    margin-top: 4px;

    color: #78879c;

    font-size: 12px;
}


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

@media (max-width: 1000px) {

    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 25px;

        max-width: 650px;

        margin-inline: auto;
    }

    .price-card {
        min-height: auto;
    }

    .price-card.featured {
        transform: none;
    }

    .price-card.featured:hover {
        transform: translateY(-6px);
    }

    .plan-description {
        min-height: auto;
    }

}


@media (max-width: 720px) {

    .trial-banner {
        grid-template-columns: auto 1fr;
    }

    .trial-banner .btn {
        grid-column: 1 / -1;

        width: 100%;
    }

}


@media (max-width: 480px) {

    .price-card {
        padding: 25px 22px;
    }

    .trial-banner {
        grid-template-columns: 1fr;

        padding: 24px;
    }

    .trial-icon {
        width: 58px;
        height: 58px;
    }

}

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

.contact-section {
    position: relative;
    overflow: hidden;

    padding: 105px 0;

    background:
        linear-gradient(
            145deg,
            #061630,
            #082b61
        );

    color: white;
}

.contact-grid-bg {
    position: absolute;
    inset: 0;

    opacity: .055;

    background-image:
        linear-gradient(
            rgba(70,151,255,.8) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(70,151,255,.8) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    pointer-events: none;
}

.contact-glow {
    position: absolute;

    width: 650px;
    height: 650px;

    left: -300px;
    bottom: -350px;

    border-radius: 50%;

    background:
        rgba(0,123,255,.20);

    filter: blur(120px);

    pointer-events: none;
}


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

.contact-wrapper {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        .85fr
        1.15fr;

    align-items: center;

    gap: 80px;
}


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

.contact-info {
    max-width: 480px;
}

.contact-eyebrow {
    display: block;

    margin-bottom: 15px;

    color: #48a8ff;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}

.contact-info h2 {
    font-size: clamp(38px, 4vw, 52px);
    line-height: 1.06;
    letter-spacing: -2px;
}

.contact-info h2 strong {
    display: block;

    color: #4eacff;
}

.contact-intro {
    margin-top: 22px;

    color: #afc1d9;

    font-size: 15px;
    line-height: 1.75;
}


/* =========================
   BENEFICIOS
========================= */

.contact-benefits {
    display: flex;
    flex-direction: column;
    gap: 21px;

    margin-top: 38px;
}

.contact-benefit {
    display: grid;
    grid-template-columns: auto 1fr;

    align-items: start;

    gap: 14px;
}

.benefit-icon {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(85,169,255,.25);

    border-radius: 10px;

    background:
        rgba(31,130,255,.09);

    color: #4caaff;

    font-size: 9px;
    font-weight: 900;
}

.contact-benefit strong {
    display: block;

    margin-bottom: 3px;

    font-size: 13px;
}

.contact-benefit p {
    max-width: 350px;

    color: #849ab7;

    font-size: 12px;
    line-height: 1.55;
}


/* =========================
   SYSTEM STATUS
========================= */

.contact-system {
    width: fit-content;

    display: flex;
    align-items: center;
    gap: 18px;

    margin-top: 38px;
    padding: 12px 15px;

    border:
        1px solid rgba(116,166,229,.15);

    border-radius: 12px;

    background:
        rgba(255,255,255,.035);
}

.contact-system-status {
    display: flex;
    align-items: center;
    gap: 9px;
}

.contact-system-status > span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #21d59b;

    box-shadow:
        0 0 0 5px rgba(33,213,155,.08),
        0 0 12px rgba(33,213,155,.45);
}

.contact-system small {
    display: block;

    color: #607b9d;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}

.contact-system strong {
    display: block;

    margin-top: 1px;

    color: #dceaff;

    font-size: 10px;
}

.contact-system-line {
    width: 1px;
    height: 28px;

    background:
        rgba(255,255,255,.10);
}


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

.contact-card {
    padding: 32px;

    border:
        1px solid rgba(255,255,255,.75);

    border-radius: 25px;

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

    box-shadow:
        0 35px 90px rgba(0,10,30,.28);

    color: #102748;
}

.contact-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-bottom: 27px;
}

.contact-card-header > div:first-child > span {
    display: block;

    margin-bottom: 3px;

    color: #0877f9;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.contact-card-header h3 {
    color: #102d59;

    font-size: 22px;
}

.form-status {
    display: flex;
    align-items: center;
    gap: 7px;

    padding: 7px 10px;

    border-radius: 999px;

    background: #effbf7;

    color: #278b6a;

    font-size: 9px;
    font-weight: 800;
}

.form-status span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #1fc98d;
}


/* =========================
   FORM
========================= */

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 14px;
}

.form-group {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.form-group > label {
    color: #53647d;

    font-size: 10px;
    font-weight: 800;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    border:
        1px solid #dce4ee;

    outline: none;

    border-radius: 10px;

    background: #fbfcfe;

    color: #17345e;

    font-size: 12px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.form-group input,
.form-group select {
    height: 44px;

    padding: 0 13px;
}

.form-group textarea {
    min-height: 95px;

    padding: 12px 13px;

    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #a2afc0;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #1685ff;

    background: white;

    box-shadow:
        0 0 0 3px rgba(22,133,255,.08);
}


/* =========================================================
   SELECTOR MÓDULOS
========================================================= */

.module-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 9px;
}

.module-option {
    position: relative;

    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 58px;

    padding: 10px 12px;

    border:
        1px solid #e0e7f0;

    border-radius: 11px;

    background: #fbfcfe;

    cursor: pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.module-option:hover {
    transform: translateY(-1px);

    border-color:
        rgba(8,119,249,.35);

    background: #f7fbff;
}

.module-option input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.module-check {
    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    position: relative;

    border:
        1px solid #ccd7e5;

    border-radius: 6px;

    background: white;
}

.module-option input:checked + .module-check {
    border-color: #0877f9;

    background: #0877f9;

    box-shadow:
        0 5px 14px rgba(8,119,249,.20);
}

.module-option input:checked + .module-check::after {
    content: "✓";

    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    color: white;

    font-size: 11px;
    font-weight: 900;
}

.module-option:has(input:checked) {
    border-color:
        rgba(8,119,249,.35);

    background: #f2f8ff;
}

.module-option strong {
    display: block;

    color: #233c61;

    font-size: 11px;
}

.module-option small {
    display: block;

    margin-top: 1px;

    color: #94a1b2;

    font-size: 8px;
}


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

.contact-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 2px;
}

.contact-submit,
.contact-whatsapp {
    min-height: 48px;

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

    gap: 9px;

    border: 0;
    border-radius: 11px;

    cursor: pointer;

    font-size: 11px;
    font-weight: 800;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.contact-submit {
    background:
        linear-gradient(
            135deg,
            #0877f9,
            #0060dc
        );

    color: white;

    box-shadow:
        0 10px 25px rgba(8,119,249,.20);
}

.contact-submit span {
    font-size: 15px;
}

.contact-whatsapp {
    border:
        1px solid #dce6ef;

    background: white;

    color: #285b4c;
}

.whatsapp-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #20c987;

    box-shadow:
        0 0 0 4px rgba(32,201,135,.09);
}

.contact-submit:hover,
.contact-whatsapp:hover {
    transform: translateY(-2px);
}


/* =========================
   PRIVACIDAD
========================= */

.contact-privacy {
    color: #9aa6b6;

    font-size: 8px;
    line-height: 1.5;

    text-align: center;
}


/* =========================
   CONFIRMACIÓN
========================= */

.form-success {
    display: none;

    align-items: center;
    gap: 10px;

    padding: 11px 13px;

    border:
        1px solid #d9f0e7;

    border-radius: 10px;

    background: #f1fbf7;

    color: #477565;

    font-size: 10px;
}

.form-success.show {
    display: flex;
}

.form-success > div {
    width: 26px;
    height: 26px;

    flex: 0 0 26px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #20c98c;

    color: white;

    font-size: 11px;
    font-weight: 900;
}

.form-success strong {
    display: block;

    color: #23775b;
}


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

@media (max-width: 1000px) {

    .contact-wrapper {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .contact-info {
        max-width: 650px;
    }

}


@media (max-width: 650px) {

    .contact-section {
        padding: 75px 0;
    }

    .contact-card {
        padding: 24px 20px;
    }

    .form-row,
    .module-selector,
    .contact-actions {
        grid-template-columns: 1fr;
    }

    .contact-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* =========================================================
   HERO - CAPTURA REAL DE NOMISIS
   Reemplaza el mockup HTML por assets/img/inicio-nomisis.png
   ========================================================= */

.software-body.software-real {
    display: block;
    min-height: 0;
    height: auto;
    padding: 0;
    overflow: hidden;
    background: #ffffff;
}

.software-real .software-screenshot {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
    object-position: top center;
}

/* La ventana conserva el acabado visual del hero */
.software-window {
    overflow: hidden;
}

/* Ajustes para que la captura real se vea bien en pantallas pequeñas */
@media (max-width: 1000px) {
    .software-body.software-real {
        min-height: 0;
    }

    .software-real .software-screenshot {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 720px) {
    .floating-security {
        left: 8px;
        bottom: 18px;
    }

    .floating-update {
        right: 8px;
        top: 70px;
    }
}

/* =========================================================
   FIX CONTACTO / PREVIEW COTIZACIÓN
   Mejor contraste sobre fondo claro
   ========================================================= */

.contact-quote-preview {
    margin-bottom: 18px;
    padding: 20px;

    border: 1px solid #b9d8ff;
    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #eef6ff 0%,
            #ffffff 100%
        );

    box-shadow:
        0 10px 30px rgba(18, 83, 155, .06);
}

.contact-quote-preview[hidden] {
    display: none;
}


/* CABECERA */

.contact-quote-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 15px;
}

.contact-quote-preview-header span {
    display: block;

    color: #0877f9;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.3px;
}

.contact-quote-preview-header strong {
    display: block;

    margin-top: 2px;

    color: #102b58;

    font-size: 13px;
    font-weight: 800;
}


/* BOTÓN EDITAR */

.contact-quote-preview-header button {
    min-height: 32px;

    padding: 0 13px;

    border: 1px solid #bcd8f8;
    border-radius: 8px;

    background: #ffffff;

    color: #0877f9;

    font-size: 9px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.contact-quote-preview-header button:hover {
    background: #eef6ff;
    border-color: #0877f9;
    transform: translateY(-1px);
}


/* LISTA DE MÓDULOS */

.contact-quote-preview-items {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.contact-quote-preview-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding: 9px 10px;

    border: 1px solid #e2edf9;
    border-radius: 9px;

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

    color: #526780;

    font-size: 9px;
    font-weight: 600;
}

.contact-quote-preview-item span {
    color: #526780;
}

.contact-quote-preview-item strong {
    color: #173b6c;

    font-size: 9px;
    font-weight: 800;
}


/* TOTAL */

.contact-quote-preview-total {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;

    margin-top: 14px;
    padding-top: 13px;

    border-top: 1px solid #d9e7f5;
}

.contact-quote-preview-total span {
    color: #61758e;

    font-size: 9px;
    font-weight: 600;
}

.contact-quote-preview-total strong {
    color: #0877f9;

    font-size: 20px;
    line-height: 1;
    font-weight: 900;
}


/* =========================================================
   CONFIRMACIÓN DE COTIZACIÓN
   ========================================================= */

.form-success {
    display: none;

    align-items: flex-start;
    gap: 12px;

    margin-top: 16px;
    padding: 15px 16px;

    border: 1px solid #bce9d9;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #edfbf6,
            #f8fffc
        );

    color: #356b5a;

    font-size: 10px;

    box-shadow:
        0 8px 25px rgba(24, 147, 105, .06);
}

.form-success.show {
    display: flex;
}

.form-success > div:first-child {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #20c98c;

    color: white;

    font-size: 13px;
    font-weight: 900;

    box-shadow:
        0 5px 14px rgba(32, 201, 140, .20);
}

.form-success strong {
    display: block;

    margin-bottom: 3px;

    color: #17664d;

    font-size: 11px;
    font-weight: 900;
}

.form-success span,
.form-success p {
    color: #4f7569;
    line-height: 1.55;
}


/* =========================================================
   BOTÓN ENVIADO
   ========================================================= */

#contactSubmitButton.quote-sent {
    background: #1bb77e !important;

    color: #ffffff !important;

    border-color: #1bb77e !important;

    cursor: default;

    box-shadow:
        0 10px 25px rgba(27, 183, 126, .18);
}

#contactSubmitButton.quote-sent:hover {
    transform: none;
}


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

@media (max-width: 650px) {

    .contact-quote-preview {
        padding: 15px;
    }

    .contact-quote-preview-header {
        align-items: flex-start;
    }

    .contact-quote-preview-item {
        gap: 8px;
    }

    .contact-quote-preview-total strong {
        font-size: 17px;
    }
}

/* =========================================================
   RESPONSIVE GLOBAL NOMISIS 26
   Ajuste consolidado móvil/tablet - 2026-09-15
   ========================================================= */

html, body {
    max-width: 100%;
    overflow-x: clip;
}

main, section, .container,
.hero-content, .hero-copy, .hero-visual,
.quote-builder, .quote-modules-panel, .quote-summary-panel,
.contact-wrapper, .contact-info, .contact-card,
.footer-tech-content, .footer-tech-brand, .footer-tech-links {
    min-width: 0;
}

@media (max-width: 1050px) {
    .header-content { gap: 14px; }
    .nav { gap: 16px; }
    .nav a { font-size: 13px; }
    .header-actions .btn { padding-inline: 14px; }

    .hero-content {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }

    .hero h1 {
        font-size: clamp(40px, 5.4vw, 58px);
        letter-spacing: -2.5px;
    }

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

    .final-cta-box {
        padding: 42px;
        gap: 30px;
    }
}

@media (max-width: 900px) {
    .header { height: 70px; }

    .header-content {
        position: relative;
        width: min(calc(100% - 30px), var(--container));
    }

    .brand img { width: 145px; }

    .menu-toggle {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        display: grid;
        place-items: center;
        position: relative;
        z-index: 103;
        border: 1px solid #dce5f1;
        border-radius: 11px;
        background: #fff;
        font-size: 24px;
        line-height: 1;
        box-shadow: 0 7px 20px rgba(17,47,91,.08);
    }

    .header-actions { display: none; }

    .nav {
        position: fixed;
        z-index: 102;
        top: 70px;
        left: 15px;
        right: 15px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        max-height: 0;
        padding: 0 12px;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        border: 1px solid transparent;
        border-radius: 0 0 18px 18px;
        background: rgba(255,255,255,.98);
        box-shadow: 0 22px 45px rgba(12,35,72,.14);
        transform: translateY(-8px);
        transition: max-height .28s ease, opacity .2s ease, transform .2s ease,
                    padding .2s ease, visibility .2s ease, border-color .2s ease;
    }

    .nav.open {
        max-height: 520px;
        padding: 12px;
        visibility: visible;
        opacity: 1;
        border-color: #e3eaf3;
        transform: translateY(0);
    }

    .nav a {
        width: 100%;
        padding: 11px 12px;
        border-radius: 9px;
        font-size: 14px;
    }

    .nav a:hover { background: #f1f7ff; }

    .hero {
        min-height: auto;
        padding: 120px 0 78px;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 52px;
    }

    .hero-copy {
        max-width: 720px;
        margin-inline: auto;
        text-align: center;
    }

    .hero-badge,
    .hero-description { margin-inline: auto; }
    .hero-buttons, .hero-features { justify-content: center; }

    .hero-visual {
        width: min(100%, 720px);
        margin-inline: auto;
    }

    .software-window { transform: none; }
    .floating-security { left: 8px; }
    .floating-update { right: 8px; }

    .trust-content {
        flex-direction: column;
        text-align: center;
    }
    .trust-items { justify-content: center; }

    .section { padding: 82px 0; }
    .section-heading { margin-bottom: 42px; }

    .final-cta-box {
        flex-direction: column;
        align-items: stretch;
    }
    .cta-actions {
        width: 100%;
        min-width: 0;
        flex-direction: row;
    }
    .cta-actions .btn { flex: 1; }
}

@media (max-width: 720px) {
    .container { width: min(calc(100% - 28px), var(--container)); }

    .hero {
        padding: 105px 0 62px;
    }

    .hero h1 {
        font-size: clamp(37px, 11vw, 50px);
        line-height: 1.04;
        letter-spacing: -2px;
    }

    .hero-description {
        margin-top: 20px;
        font-size: 16px;
        line-height: 1.65;
    }

    .hero-buttons { gap: 10px; }
    .hero-buttons .btn { flex: 1 1 190px; }
    .hero-features { gap: 10px 16px; }

    .software-window { border-radius: 17px; }
    .window-top { height: 45px; padding-inline: 13px; }
    .window-brand img { width: 90px; }
    .floating-card { display: none; }

    .feature-grid { grid-template-columns: 1fr; }
    .feature-card { min-height: 0; padding: 25px; }
    .feature-number { margin-bottom: 25px; }

    .section { padding: 70px 0; }
    .section-heading h2 {
        font-size: clamp(31px, 9vw, 42px);
        letter-spacing: -1.5px;
    }
    .section-heading p { font-size: 15px; }

    .big-module { min-height: 330px; padding: 25px; }
    .big-module-icon { margin-bottom: 42px; }

    .final-cta-box {
        min-height: 0;
        padding: 34px 25px;
        border-radius: 22px;
    }
    .final-cta h2 {
        font-size: clamp(30px, 8.5vw, 40px);
        letter-spacing: -1.5px;
    }
    .cta-actions { flex-direction: column; }

    .quote-builder-section { padding-top: 90px; }
    .core26-pricing-status { padding: 14px 15px; }
    .quote-period-wrapper { padding: 17px; }
    .quote-modules-panel, .quote-summary-sticky { padding: 19px 16px; }

    .quote-module-card {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
        padding: 15px;
    }
    .quote-module-controls {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .quote-module-info p { overflow-wrap: anywhere; }
    .quote-seat-control { max-width: 100%; }

    .footer-tech-content { gap: 32px; }
    .footer-tech-links { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
}

@media (max-width: 520px) {
    .container { width: calc(100% - 24px); }
    .brand img { width: 132px; }

    .hero { padding-top: 96px; }
    .hero-badge {
        max-width: 100%;
        font-size: 10px;
        letter-spacing: .8px;
        text-align: left;
    }
    .hero-buttons { flex-direction: column; }
    .hero-buttons .btn { width: 100%; flex-basis: auto; }
    .hero-features {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .quote-period-selector { grid-template-columns: 1fr 1fr; }
    .quote-period-button { min-width: 0; }

    .quote-panel-heading { align-items: flex-start; }
    .quote-panel-badge { white-space: normal; text-align: center; }

    .quote-module-card { grid-template-columns: 1fr; }
    .quote-module-icon { grid-column: 1; }
    .quote-module-controls { grid-column: 1; }
    .quote-module-controls,
    .quote-seat-control {
        align-items: stretch;
    }
    .quote-module-controls { flex-direction: column; }
    .quote-module-toggle { justify-content: space-between; width: 100%; }
    .quote-seat-control { justify-content: space-between; width: 100%; }

    .trial-banner { padding: 21px 18px; }

    .contact-section { padding: 65px 0; }
    .contact-card { padding: 21px 16px; }
    .contact-info h2 {
        font-size: clamp(34px, 10vw, 44px);
        letter-spacing: -1.5px;
    }

    .footer-tech-links { grid-template-columns: 1fr; }
    .footer-status { width: 100%; }
    .footer-system-left { gap: 8px; }

    .btn-large { min-height: 50px; padding-inline: 18px; }
}

@media (max-width: 380px) {
    .container { width: calc(100% - 20px); }
    .hero h1 { font-size: 35px; }
    .quote-period-selector { grid-template-columns: 1fr; }
    .quote-module-card { padding: 13px; }
    .footer-tech { padding-inline: 0; }
}

/* =========================================================
   AJUSTE 2026-09-28 · ICONOS OFICIALES + RESPONSIVE
   Sólo afecta tarjetas de módulos y cotizador.
========================================================= */
.big-module-icon {
    background: transparent !important;
    border-radius: 0;
    overflow: visible;
}
.big-module-icon img {
    display: block;
    width: 55px;
    height: 55px;
    object-fit: contain;
}

.quote-module-icon {
    background: transparent !important;
    border-radius: 0;
    box-shadow: none !important;
    overflow: visible;
}
.quote-module-icon img {
    display: block;
    width: 51px;
    height: 51px;
    object-fit: contain;
}
.quote-module-card.selected .quote-module-icon {
    background: transparent !important;
    box-shadow: none !important;
}

/* Evita que el cotizador fuerce anchos o se encime al reducir ventana. */
.quote-builder,
.quote-modules-panel,
.quote-summary-panel,
.quote-summary-sticky,
.quote-module-list,
.quote-module-card,
.quote-module-info,
.quote-module-controls {
    min-width: 0;
}

@media (max-width: 1120px) {
    .quote-builder {
        grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
        gap: 18px;
    }
    .quote-modules-panel,
    .quote-summary-sticky {
        padding: 22px;
    }
}

@media (max-width: 980px) {
    .quote-builder {
        grid-template-columns: 1fr;
    }
    .quote-summary-panel {
        width: 100%;
    }
    .quote-summary-sticky {
        position: relative;
        top: auto;
        width: 100%;
    }
}

@media (max-width: 720px) {
    .modules-showcase {
        grid-template-columns: 1fr;
    }
    .big-module {
        min-height: 0;
    }
    .big-module-icon,
    .big-module-icon img {
        width: 50px;
        height: 50px;
    }
    .big-module-icon {
        margin-bottom: 34px;
    }
    .quote-panel-heading {
        flex-wrap: wrap;
    }
    .quote-module-card {
        grid-template-columns: 51px minmax(0, 1fr);
    }
    .quote-module-controls {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .quote-builder-section .container {
        width: calc(100% - 20px);
    }
    .quote-modules-panel,
    .quote-summary-sticky {
        padding: 17px 14px;
    }
    .quote-module-card {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 11px;
        padding: 14px 12px;
    }
    .quote-module-icon,
    .quote-module-icon img {
        width: 46px;
        height: 46px;
    }
    .quote-module-controls {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .quote-module-toggle,
    .quote-seat-control {
        width: 100%;
        justify-content: space-between;
    }
    .quote-period-selector {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   MAPA MODULAR NOMISIS 26 · 2026
========================================================= */
.module-legend{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px}
.module-status{display:inline-flex;align-items:center;justify-content:center;width:max-content;padding:7px 11px;border-radius:999px;font-size:10px!important;font-weight:900!important;letter-spacing:.65px!important;text-transform:uppercase;white-space:nowrap}
.module-status.available{background:rgba(47,214,142,.14);border:1px solid rgba(47,214,142,.4);color:#71efb7!important}
.module-status.coming{background:rgba(255,190,64,.12);border:1px solid rgba(255,190,64,.4);color:#ffd16f!important}
.module-status.included{background:rgba(95,169,255,.13);border:1px solid rgba(95,169,255,.38);color:#8fc5ff!important}
.modules-showcase.modules-showcase-complete{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.module-topline{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:28px}
.module-topline .big-module-icon{margin-bottom:0;background:transparent!important;width:74px;height:74px}
.module-topline .big-module-icon img{width:74px;height:74px;object-fit:contain;filter:drop-shadow(0 10px 15px rgba(0,0,0,.28))}
.big-module.module-future{position:relative;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.08)}
.big-module.module-future:hover{background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.055))}
.module-highlight{display:block;margin-top:10px;color:#b9dcff;font-size:13px;line-height:1.55}
.module-inclusion-note{margin-top:18px;padding:10px 12px;border-radius:10px;background:rgba(64,156,255,.1);border:1px solid rgba(64,156,255,.22);color:#9dcbff;font-size:12px;font-weight:800;line-height:1.45}
.module-inclusion-note.neutral{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.1);color:#d7e3ef}
.module-roadmap-note{margin-top:22px;padding:22px 24px;border-radius:18px;background:rgba(15,35,58,.72);border:1px solid rgba(108,174,255,.18);color:#dceafa}
.module-roadmap-note strong{display:block;color:white;font-size:16px;margin-bottom:6px}
.module-roadmap-note p{margin:0;line-height:1.65;font-size:13px;color:#aac0d8}
.footer-column a small{margin-left:auto;color:#f0b84f;font-size:8px;text-transform:uppercase;letter-spacing:.5px}
@media(max-width:850px){.modules-showcase.modules-showcase-complete{grid-template-columns:1fr}.module-topline{margin-bottom:20px}}
@media(max-width:520px){.module-legend{gap:7px}.module-status{font-size:8px!important;padding:6px 8px}.module-topline .big-module-icon,.module-topline .big-module-icon img{width:62px;height:62px}}

/* =========================================================
   R4 · CATÁLOGO DE MÓDULOS MÁS COMPACTO
   Desktop: 4 columnas · Tablet: 2 · Móvil: 1
========================================================= */
@media (min-width: 1181px) {
    .modules-showcase.modules-showcase-complete {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }
    .modules-showcase.modules-showcase-complete .big-module {
        min-height: 330px;
        padding: 22px 20px;
        border-radius: 20px;
    }
    .modules-showcase.modules-showcase-complete .module-topline {
        gap: 10px;
        margin-bottom: 20px;
    }
    .modules-showcase.modules-showcase-complete .module-topline .big-module-icon,
    .modules-showcase.modules-showcase-complete .module-topline .big-module-icon img {
        width: 60px;
        height: 60px;
    }
    .modules-showcase.modules-showcase-complete .module-status {
        padding: 6px 8px;
        font-size: 8px !important;
        letter-spacing: .45px !important;
    }
    .modules-showcase.modules-showcase-complete .big-module h3 {
        margin: 7px 0 9px;
        font-size: 20px;
    }
    .modules-showcase.modules-showcase-complete .big-module p {
        font-size: 12px;
        line-height: 1.55;
    }
    .modules-showcase.modules-showcase-complete .big-module a {
        margin-top: 18px;
        font-size: 12px;
    }
    .modules-showcase.modules-showcase-complete .module-highlight {
        font-size: 11px;
    }
    .modules-showcase.modules-showcase-complete .module-inclusion-note {
        margin-top: 13px;
        padding: 8px 9px;
        font-size: 10px;
    }
}

@media (min-width: 701px) and (max-width: 1180px) {
    .modules-showcase.modules-showcase-complete {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    .modules-showcase.modules-showcase-complete .big-module {
        min-height: 350px;
        padding: 24px;
    }
}

@media (max-width: 700px) {
    .modules-showcase.modules-showcase-complete {
        grid-template-columns: 1fr;
    }
    .modules-showcase.modules-showcase-complete .big-module {
        min-height: 330px;
    }
}

/* =========================================================
   HALLOWEEN · EFECTO ESTACIONAL DE PRIMERA VISITA
   Activo únicamente en octubre. No bloquea interacción.
========================================================= */
.halloween-intro{position:fixed;inset:0;z-index:99999;pointer-events:none;overflow:hidden;opacity:1;transition:opacity .8s ease}
.halloween-intro.is-leaving{opacity:0}
.halloween-moon{position:absolute;right:7vw;top:9vh;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff7c7 0 18%,#ffd875 42%,#e5a832 72%,rgba(229,168,50,.25) 73%,transparent 74%);filter:drop-shadow(0 0 22px rgba(255,205,95,.38));opacity:0;animation:halloweenMoon 5.4s ease forwards}
.halloween-fog{position:absolute;left:-15%;bottom:-8%;width:130%;height:35%;background:radial-gradient(ellipse at center,rgba(210,220,235,.18),rgba(120,135,155,.08) 35%,transparent 70%);filter:blur(18px);opacity:0;animation:halloweenFog 5.2s ease-in-out forwards}
.halloween-bat{position:absolute;left:-90px;top:var(--y);font-size:var(--size);line-height:1;filter:drop-shadow(0 4px 4px rgba(0,0,0,.4));opacity:0;transform:translate3d(0,0,0) rotate(var(--rot));animation:halloweenBat var(--dur) cubic-bezier(.2,.65,.3,1) var(--delay) forwards}
.halloween-bat:nth-child(even){animation-name:halloweenBatWave}
.halloween-pumpkin{position:absolute;right:3.5vw;bottom:3vh;font-size:48px;opacity:0;transform:translateY(25px) rotate(-5deg);filter:drop-shadow(0 8px 10px rgba(0,0,0,.35));animation:halloweenPumpkin 5.1s ease forwards}
.halloween-spiderweb{position:absolute;left:0;top:0;width:105px;height:105px;opacity:0;animation:halloweenWeb 5s ease forwards}
.halloween-spiderweb::before,.halloween-spiderweb::after{content:"";position:absolute;left:-26px;top:-26px;width:125px;height:125px;border:1px solid rgba(255,255,255,.25);border-radius:50%}
.halloween-spiderweb::after{left:-6px;top:-6px;width:85px;height:85px}
.halloween-web-line{position:absolute;left:0;top:0;width:112px;height:1px;background:rgba(255,255,255,.22);transform-origin:left center}
.halloween-web-line:nth-child(1){transform:rotate(18deg)}.halloween-web-line:nth-child(2){transform:rotate(42deg)}.halloween-web-line:nth-child(3){transform:rotate(66deg)}.halloween-web-line:nth-child(4){transform:rotate(90deg)}
@keyframes halloweenBat{0%{opacity:0;transform:translate3d(-8vw,8vh,0) rotate(var(--rot)) scale(.7)}10%{opacity:.9}55%{transform:translate3d(56vw,-3vh,0) rotate(calc(var(--rot) + 8deg)) scale(1)}100%{opacity:0;transform:translate3d(118vw,8vh,0) rotate(calc(var(--rot) - 5deg)) scale(.8)}}
@keyframes halloweenBatWave{0%{opacity:0;transform:translate3d(-8vw,-3vh,0) rotate(var(--rot)) scale(.75)}12%{opacity:.92}48%{transform:translate3d(52vw,8vh,0) rotate(calc(var(--rot) - 9deg)) scale(1.05)}100%{opacity:0;transform:translate3d(118vw,-5vh,0) rotate(calc(var(--rot) + 7deg)) scale(.8)}}
@keyframes halloweenMoon{0%,8%{opacity:0;transform:scale(.82)}24%,78%{opacity:.78;transform:scale(1)}100%{opacity:0;transform:scale(1.06)}}
@keyframes halloweenFog{0%,10%{opacity:0;transform:translateX(-5%)}35%,72%{opacity:1}100%{opacity:0;transform:translateX(5%)}}
@keyframes halloweenPumpkin{0%,18%{opacity:0;transform:translateY(25px) rotate(-5deg)}35%,78%{opacity:.9;transform:translateY(0) rotate(2deg)}100%{opacity:0;transform:translateY(8px) rotate(-2deg)}}
@keyframes halloweenWeb{0%{opacity:0}20%,78%{opacity:1}100%{opacity:0}}
@media(max-width:700px){.halloween-moon{width:68px;height:68px;right:5vw}.halloween-pumpkin{font-size:36px}.halloween-bat{font-size:calc(var(--size) * .8)}}
@media(prefers-reduced-motion:reduce){.halloween-intro{display:none!important}}

/* HALLOWEEN R2 · saludo cinematográfico */
.halloween-intro::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 25%,rgba(96,46,125,.16),transparent 28%),radial-gradient(circle at center,rgba(16,8,25,.22),rgba(3,3,8,.74));opacity:0;animation:halloweenDark 5.9s ease forwards}
.halloween-greeting{position:absolute;z-index:4;left:50%;top:47%;width:min(92vw,900px);transform:translate(-50%,-50%) scale(.82);text-align:center;opacity:0;animation:halloweenGreeting 5.6s cubic-bezier(.2,.8,.2,1) forwards;text-shadow:0 5px 18px rgba(0,0,0,.95)}
.halloween-title{display:block;font-family:"Old English Text MT","Lucida Blackletter","Copperplate Gothic Bold",fantasy;font-size:clamp(42px,7vw,92px);font-weight:900;letter-spacing:.055em;line-height:.95;color:#f2a33a;-webkit-text-stroke:1px rgba(35,10,0,.8);text-shadow:0 2px 0 #6d270d,0 5px 0 #2c0c06,0 0 18px rgba(255,112,20,.55),0 0 42px rgba(126,42,145,.35)}
.halloween-title::first-letter{font-size:1.08em}
.halloween-subtitle{display:block;margin-top:18px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(15px,2vw,24px);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#f6f0e6;text-shadow:0 2px 8px #000}
.halloween-brand{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:7px 15px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(0,0,0,.32);font:700 12px/1 Arial,sans-serif;letter-spacing:.22em;color:rgba(255,255,255,.9);backdrop-filter:blur(4px)}
.halloween-eyes{position:absolute;z-index:3;left:12vw;bottom:20vh;display:flex;gap:14px;opacity:0;animation:halloweenEyes 5.2s ease forwards}
.halloween-eye{width:11px;height:6px;border-radius:60% 60% 45% 45%;background:#ff7a18;box-shadow:0 0 9px #ff5a00,0 0 18px rgba(255,90,0,.6);transform:rotate(8deg)}
.halloween-eye:last-child{transform:rotate(-8deg)}
.halloween-crow{position:absolute;z-index:2;right:16vw;bottom:10vh;font-size:32px;opacity:0;filter:grayscale(1) brightness(.2) drop-shadow(0 5px 5px #000);animation:halloweenCrow 5.4s ease forwards}
@keyframes halloweenDark{0%{opacity:0}12%,80%{opacity:1}100%{opacity:0}}
@keyframes halloweenGreeting{0%,12%{opacity:0;transform:translate(-50%,-46%) scale(.82)}25%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)}86%,100%{opacity:0;transform:translate(-50%,-54%) scale(1.04)}}
@keyframes halloweenEyes{0%,35%{opacity:0}44%,66%{opacity:1}70%,100%{opacity:0}}
@keyframes halloweenCrow{0%,28%{opacity:0;transform:translateY(12px)}40%,76%{opacity:.8;transform:translateY(0)}100%{opacity:0;transform:translateY(-5px)}}
@media(max-width:700px){.halloween-greeting{top:45%}.halloween-subtitle{letter-spacing:.10em}.halloween-brand{font-size:10px}.halloween-eyes{left:8vw;bottom:16vh}}

/* NOMISIS POS: selector integrado MonoCaja / MultiCaja */
.quote-module-controls .quote-pos-mode-field {
    min-width: 0;
    width: 190px;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: right;
}
.quote-pos-mode-label {
    width: 100%;
    margin-bottom: 6px;
    color: #7386a2;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .9px;
}
.quote-pos-mode-switch {
    display: flex;
    width: 100%;
    padding: 3px;
    gap: 3px;
    border: 1px solid #dce5f2;
    border-radius: 11px;
    background: #edf3fb;
}
.quote-pos-choice {
    flex: 1 1 0;
    min-width: 0;
    min-height: 31px;
    padding: 5px 7px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #60738f;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}
.quote-pos-choice.is-active {
    background: #fff;
    color: #075dd0;
    box-shadow: 0 2px 7px rgba(13, 50, 100, .12);
}
.quote-pos-choice:focus-visible {
    outline: 2px solid #0877f9;
    outline-offset: 2px;
}
.quote-pos-mode-help {
    display: block;
    margin-top: 5px;
    color: #8190a7;
    font-size: 9px;
    line-height: 1.35;
}
@media (max-width: 700px) {
    .quote-module-controls .quote-pos-mode-field {
        width: 100%;
        text-align: left;
    }
    .quote-pos-mode-switch { max-width: 320px; }
}
/* Compatibilidad con el tema oscuro si el sitio lo aplica al documento. */
[data-theme="dark"] .quote-pos-mode-switch,
body.dark-mode .quote-pos-mode-switch,
body.theme-dark .quote-pos-mode-switch {
    background: #142744;
    border-color: #36506d;
}
[data-theme="dark"] .quote-pos-choice.is-active,
body.dark-mode .quote-pos-choice.is-active,
body.theme-dark .quote-pos-choice.is-active {
    background: #2454a0;
    color: #fff;
}

/* Halloween PNG: sustituye el título tipográfico; conserva la escena y la duración. */
.halloween-greeting{width:min(94vw,980px);top:46%;overflow:visible}
.halloween-logo-image{display:block;width:min(100%,940px);height:auto;max-height:57vh;object-fit:contain;margin:0 auto -8px;filter:drop-shadow(0 0 13px rgba(255,107,0,.65)) drop-shadow(0 0 35px rgba(132,32,194,.42));animation:halloweenLogoPulse 2.2s ease-in-out infinite alternate;transform-origin:center}
.halloween-subtitle{display:block;position:relative;z-index:1}
@keyframes halloweenLogoPulse{from{filter:drop-shadow(0 0 9px rgba(255,105,0,.48)) drop-shadow(0 0 20px rgba(123,36,178,.3));transform:scale(.985)}to{filter:drop-shadow(0 0 19px rgba(255,135,0,.8)) drop-shadow(0 0 42px rgba(155,45,216,.56));transform:scale(1.015)}}
@media(max-width:700px){.halloween-greeting{top:43%;width:96vw}.halloween-logo-image{max-height:43vh;margin-bottom:8px}.halloween-subtitle{font-size:clamp(11px,3vw,17px);line-height:1.4}}
@media(prefers-reduced-motion:reduce){.halloween-logo-image{animation:none}}