/* ==========================================================================
   GUEST Hotel Software - site.css
   Own design system on top of Bootstrap 5.3 + Font Awesome 6.
   Direction: "hospitality editorial" - cool neutral surfaces, one type family (Inter),
   flat brand blue, one warm accent. The recurring motif is the PMS room chart
   (hairline timeline grid + reservation bars) instead of generic gradients.
   ========================================================================== */

:root {
    --g-navy: #0b1f3a;
    --g-navy-2: #12305a;
    --g-blue: #1988c3;            /* brand blue (logo) - decorative use */
    --g-blue-dk: #12709f;         /* text / buttons on light backgrounds (AA) */
    --g-blue-2: #4db3e6;          /* accents on dark backgrounds */
    --g-teal: #1f8a5b;            /* legacy token name, now "success" green */
    --g-orange: #d9480f;          /* the single warm accent: primary CTA */
    --g-ink: #1b2a41;
    --g-text: #4a5565;
    --g-muted: #5f6b7a;
    --g-line: #e2e7ee;
    --g-bg: #f3f6f9;              /* cool neutral, same family as the product UI */
    --g-sand: #f3f6f9;
    --g-radius: 14px;
    --g-radius-sm: 8px;
    --g-shadow: 0 1px 2px rgba(11, 31, 58, .05), 0 6px 18px rgba(11, 31, 58, .06);
    --g-shadow-lg: 0 2px 4px rgba(11, 31, 58, .05), 0 18px 40px rgba(11, 31, 58, .12);
    /* legacy gradient tokens are now flat colours so every page inherits the new look */
    --g-grad: #12709f;
    --g-grad-dark: #0b1f3a;
    --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-color: var(--g-text);
    --bs-link-color: #12709f;
    --bs-link-hover-color: #0b1f3a;
    --bs-primary: #12709f;
    --bs-primary-rgb: 18, 112, 159;
    --bs-border-color: var(--g-line);
    --bs-border-radius: 8px;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; background: #fff; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { color: var(--g-navy); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.022em; }
h1 { font-weight: 750; letter-spacing: -.032em; }
p { margin-bottom: 1rem; }
.lead { font-size: 1.2rem; font-weight: 400; line-height: 1.7; }
a { text-decoration: none; transition: color .2s ease; }
img { max-width: 100%; height: auto; }
hr { border-color: var(--g-line); opacity: 1; margin: 2.5rem 0; }
::selection { background: var(--g-blue); color: #fff; }
.text-grad { color: var(--g-blue-dk); }
:focus-visible { outline: 3px solid rgba(25, 136, 195, .55); outline-offset: 2px; }
.skip-link { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 14px; border-radius: 8px; z-index: 2000; }
.skip-link:focus { left: 8px; }

/* ---------- Buttons ---------- */
.btn { font-weight: 700; border-radius: 10px; padding: .65rem 1.5rem; border: 0; letter-spacing: .005em; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
.btn-lg { padding: .9rem 2rem; font-size: 1rem; }
.btn-sm { padding: .4rem 1.1rem; }
.btn-brand, .btn-primary { background: var(--g-blue-dk); color: #fff; box-shadow: 0 1px 0 rgba(11, 31, 58, .2), 0 8px 18px rgba(18, 112, 159, .25); --bs-btn-hover-bg: transparent; }
.btn-brand:hover, .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--g-navy); color: #fff; transform: translateY(-2px); box-shadow: 0 1px 0 rgba(11, 31, 58, .2), 0 12px 24px rgba(11, 31, 58, .25); }
.btn-orange { background: var(--g-orange); color: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .15), 0 8px 18px rgba(217, 72, 15, .28); }
.btn-orange:hover { background: #b93b0a; color: #fff; transform: translateY(-2px); }
.btn-light { background: #fff; color: var(--g-navy); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.btn-light:hover { background: #fff; color: var(--g-blue-dk); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .5); }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; transform: translateY(-2px); }
.btn-outline-brand { border: 1.5px solid var(--g-navy); color: var(--g-navy); background: transparent; }
.btn-outline-brand:hover { background: var(--g-navy); color: #fff; transform: translateY(-2px); }

/* ---------- Header / navbar ---------- */
.site-header { position: sticky; top: 0; z-index: 1030; background: #fff; box-shadow: 0 1px 0 var(--g-line); }
.site-header .navbar { padding: .55rem 0; }
/* the SVG logo has no intrinsic width: keep flexbox from squeezing it when the menu is full */
.site-header .navbar-brand { flex-shrink: 0; }
.site-header .navbar-brand img { height: 44px; width: auto; aspect-ratio: 1024 / 220; }
.nav-main { gap: .1rem; align-items: center; }
.nav-main > li { position: relative; }
.nav-main > li > a { display: block; white-space: nowrap; padding: .55rem .8rem; font-weight: 600; font-size: .94rem; color: var(--g-navy); position: relative; }
.nav-main > li > a::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .2rem; height: 2px; background: var(--g-blue); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav-main > li > a:hover, .nav-main > li.show > a { color: var(--g-blue-dk); }
.nav-main > li > a:hover::after, .nav-main > li.show > a::after, .nav-main > li.active > a::after { transform: scaleX(1); }
.nav-main > li.active > a { color: var(--g-blue-dk); }
.nav-main > li > a.dropdown-toggle::after { /* keep bootstrap caret, not the underline */
    position: static; height: 0; background: none; transform: none; display: inline-block; margin-left: .4em; vertical-align: .15em; border-top: .3em solid; border-right: .3em solid transparent; border-left: .3em solid transparent; border-bottom: 0; }
.nav-main > li > a.dropdown-toggle { padding-bottom: .55rem; }
.nav-main .dropdown-menu { border: 1px solid var(--g-line); border-radius: var(--g-radius-sm); padding: .5rem; box-shadow: var(--g-shadow-lg); margin-top: .4rem; min-width: 340px; }
.nav-main .dropdown-item { border-radius: 6px; padding: .6rem .9rem; white-space: normal; color: var(--g-ink); }
.nav-main .dropdown-item:hover { background: var(--g-bg); color: var(--g-blue-dk); }
.nav-main .dropdown-item b { color: var(--g-navy); }
.nav-main .dropdown-item span { display: block; color: var(--g-muted); font-size: .82rem; }
.header-tools { display: flex; align-items: center; gap: .75rem; }
.lang-btn { display: inline-flex; align-items: center; gap: .45rem; background: #fff; border: 1px solid var(--g-line); border-radius: 8px; padding: .4rem .8rem; font-size: .82rem; font-weight: 700; color: var(--g-navy); letter-spacing: .03em; transition: border-color .2s, box-shadow .2s; }
.lang-btn:hover, .lang-btn.show { border-color: var(--g-blue); box-shadow: 0 0 0 3px rgba(25, 136, 195, .12); }
.lang-btn::after { margin-left: .1rem; }
/* flags are round 24x24 PNGs: show them whole, never cropped into a rectangle */
.lang-btn img, .lang-switch .dropdown-item img { width: 20px; height: 20px; flex: none; object-fit: contain; border-radius: 50%; box-shadow: 0 0 0 1px rgba(11, 31, 58, .12); }
.lang-switch .dropdown-menu { min-width: 10rem; border: 1px solid var(--g-line); border-radius: var(--g-radius-sm); padding: .4rem; box-shadow: var(--g-shadow-lg); }
.lang-switch .dropdown-item { display: flex; align-items: center; gap: .6rem; border-radius: 6px; padding: .5rem .75rem; font-weight: 500; color: var(--g-ink); }
.lang-switch .dropdown-item:hover { background: var(--g-bg); color: var(--g-blue-dk); }
.lang-switch .dropdown-item.active { background: rgba(25, 136, 195, .1); color: var(--g-blue-dk); font-weight: 600; }
.btn-login { white-space: nowrap; background: var(--g-navy); color: #fff !important; padding: .5rem 1.1rem; font-size: .88rem; box-shadow: none; }
.btn-login:hover { background: var(--g-blue-dk); }
.navbar-toggler { border: 0; background: var(--g-navy); color: #fff; border-radius: 8px; padding: .45rem .7rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 4px rgba(25, 136, 195, .25); }
/* 1200-1399: full menu on one line in a 1140px container — tighten it so the logo fits */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .site-header .navbar-brand { margin-right: .75rem; }
    .site-header .navbar-brand img { height: 36px; }
    .nav-main > li > a { padding-left: .5rem; padding-right: .5rem; font-size: .88rem; }
    .nav-main > li > a::after { left: .5rem; right: .5rem; }
}
@media (max-width: 1199.98px) {
    .site-header .navbar-collapse { padding: 1rem 0; }
    .nav-main { align-items: stretch; }
    .nav-main > li > a::after { display: none; }
    .nav-main > li.active > a { background: rgba(25, 136, 195, .08); border-radius: 8px; }
    .nav-main .dropdown-menu { min-width: 0; box-shadow: none; background: var(--g-bg); border: 0; }
    .header-tools { margin-top: .75rem; }
}

/* Room-chart motif: hairline timeline grid + reservation bars (page-hero, cta-band) */

/* ---------- Inner page header ---------- */
.page-hero { padding: 3.5rem 0 3.25rem; margin-bottom: 3.5rem; border-bottom: 4px solid var(--g-blue); position: relative; overflow: hidden; background-color: var(--g-navy);
    background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 84px),
                      repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 44px); }
.page-hero::before { content: ""; position: absolute; right: 6%; top: 28%; width: min(34vw, 380px); height: 22px; border-radius: 6px; background: rgba(77, 179, 230, .35); box-shadow: -120px 44px 0 0 rgba(77, 179, 230, .18), 90px 88px 0 0 rgba(255, 255, 255, .1); pointer-events: none; }
.page-hero::after { content: ""; position: absolute; right: 22%; bottom: 18%; width: min(22vw, 240px); height: 22px; border-radius: 6px; background: rgba(217, 72, 15, .55); box-shadow: 140px -46px 0 0 rgba(255, 255, 255, .09); pointer-events: none; }
.page-hero .container { position: relative; z-index: 1; }
/* inner-page titles are often long: lighter tracking than the home headline and balanced line breaks */
.page-hero h1 { color: #fff; font-size: clamp(2rem, 3.8vw, 3.1rem); font-weight: 700; letter-spacing: -.022em; line-height: 1.12; margin: .4rem 0 0; max-width: 820px; text-wrap: balance; }
/* module pages: product name as the headline, its long form underneath ("GUEST PMS" / "Property Management System") */
/* PMS/CRM/CRS: product name as a small label above a one-line claim */
.page-hero .h1-eyebrow { display: block; margin-top: 1.1rem; font-size: .85rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-blue-2); }
.page-hero .h1-eyebrow + h1 { margin-top: .35rem; }
.page-hero h1 .h1-sub { display: block; margin-top: .45rem; font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--g-blue-2); }
.page-hero .breadcrumb { margin: 0; font-size: .88rem; --bs-breadcrumb-divider-color: rgba(255, 255, 255, .45); }
.page-hero .breadcrumb a { color: rgba(255, 255, 255, .78); }
.page-hero .breadcrumb a:hover { color: #fff; }
.page-hero .breadcrumb-item.active { color: #fff; }
.page-hero .page-lead { color: rgba(255, 255, 255, .85); max-width: 720px; margin: 1rem 0 0; font-size: 1.1rem; }
@media (max-width: 767.98px) { .page-hero::before, .page-hero::after { opacity: .45; } }

/* ---------- Home hero (light, product-first) ---------- */
.hero { position: relative; background: var(--g-sand); color: var(--g-text); overflow: hidden; padding: 4.5rem 0 5.5rem; border-bottom: 1px solid var(--g-line); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: repeating-linear-gradient(90deg, rgba(11, 31, 58, .045) 0 1px, transparent 1px 84px); }
.hero .container { position: relative; z-index: 2; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: .6rem; color: var(--g-blue-dk); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.4rem; }
.hero-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--g-orange); }
.hero-eyebrow i { display: none; }
.hero h1 { color: var(--g-navy); font-size: clamp(2.4rem, 4.6vw, 3.9rem); line-height: 1.06; margin: 0 0 1.4rem; }
.hero h1 em { font-style: normal; color: var(--g-blue-dk); }
.hero-lead { color: var(--g-text); font-size: 1.2rem; max-width: 540px; margin-bottom: 2.1rem; }
.hero-actions .btn { margin: 0 .6rem .6rem 0; }
.hero-badges { margin-top: 1.6rem; margin-left: -1.6rem; clip-path: inset(0 0 0 1.6rem); display: flex; flex-wrap: wrap; gap: .25rem 0; font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g-navy); }
/* every item carries its own leading "/"; the one that starts each line falls in the clipped gutter, so no line ever begins with a slash */
.hero-badges span::before { content: "/"; display: inline-block; width: 1.6rem; text-align: center; color: var(--g-blue); font-weight: 400; }
/* browser-frame around the real product screenshot */
.hero-card { position: relative; background: #fff; border: 1px solid #d6dde6; border-radius: 12px; box-shadow: var(--g-shadow-lg); padding: .75rem; overflow: hidden; }
.hero-card img { width: 100%; display: block; }
.hero-visual { position: relative; }
.hero-visual::after { content: ""; position: absolute; z-index: -1; right: -22px; bottom: -22px; width: 78%; height: 78%; background: var(--g-blue); border-radius: 14px; opacity: .9; }
@media (max-width: 767.98px) { .hero { padding: 3.25rem 0 4rem; } }

/* trust bar (client logos) */
.trust { padding: 2rem 0 1.75rem; border-bottom: 1px solid var(--g-line); background: #fff; }
.trust-label { text-align: center; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-muted); margin-bottom: 1.25rem; }
.trust-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.5rem; }
.trust-logos img { height: 104px; width: auto; max-width: 200px; margin: -12px 0; mix-blend-mode: multiply; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .25s, opacity .25s; }
.trust-logos img:hover { filter: none; opacity: 1; }

/* legacy stats strip (kept for pages that still use it) */
.stats { margin-top: -4rem; position: relative; z-index: 5; }
.stat-wrap { background: #fff; border-radius: var(--g-radius); box-shadow: var(--g-shadow-lg); padding: 1.8rem 1rem; display: flex; flex-wrap: wrap; }
.stat { flex: 1 1 200px; text-align: center; padding: .5rem 1rem; position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 15%; height: 70%; width: 1px; background: var(--g-line); }
.stat strong { display: block; font-family: var(--font-display); font-size: 1.7rem; white-space: nowrap; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.25; color: var(--g-navy); }
.stat span { color: var(--g-muted); font-size: .9rem; font-weight: 500; }
@media (max-width: 767.98px) { .stat + .stat::before { display: none; } }

/* ---------- Sections ---------- */
.section { padding: 5.5rem 0; }
.section-sm { padding: 3.5rem 0; }
.section-alt { background: var(--g-bg); }
.section-title { text-align: center; max-width: 780px; margin: 0 auto 3.25rem; }
.section-title.text-start { margin-left: 0; margin-right: 0; }
.kicker { display: inline-block; color: var(--g-blue-dk); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .7rem; }
.section-title h2, .h-section { font-size: clamp(1.9rem, 3.4vw, 2.75rem); margin: 0 0 1rem; }
.section-title h2 strong, .h-section strong, h2 > strong { font-weight: inherit; color: var(--g-blue-dk); }
.section-title p { font-size: 1.1rem; margin: 0; }
.section-title.is-left { text-align: left; margin: 0 0 1.5rem; }

/* ---------- Cards ---------- */
.g-card { background: #fff; border: 1px solid var(--g-line); border-radius: var(--g-radius); padding: 1.9rem 1.75rem; height: 100%; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.g-card:hover { transform: translateY(-4px); box-shadow: var(--g-shadow-lg); border-color: transparent; }
.g-card.static:hover { transform: none; box-shadow: none; border-color: var(--g-line); }
.icon-bubble { width: 48px; height: 48px; border-radius: 10px; background: rgba(25, 136, 195, .1); color: var(--g-blue-dk); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 1.1rem; }
.g-card h3, .g-card h4 { font-size: 1.15rem; margin: 0 0 .6rem; }
.g-card p { margin: 0; font-size: .98rem; }

/* "Why GUEST": bento of 5 numbered cards, 3 with small HTML drawings of the product (no screenshots needed) */
.why-head { max-width: 760px; margin-bottom: 2.5rem; }
.why-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.why-card { display: flex; flex-direction: column; gap: 1.4rem; background: #fff; border: 1px solid var(--g-line); border-radius: var(--g-radius); padding: 1.6rem 1.6rem 1.7rem; overflow: hidden; }
.why-wide { grid-column: span 2; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 2rem; }
.why-n { display: block; font-weight: 700; font-size: .9rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--g-orange); margin-bottom: .45rem; }
.why-card h3 { font-size: 1.2rem; margin: 0 0 .5rem; }
.why-card p { margin: 0; font-size: .98rem; }
.why-visual { margin-top: auto; }
.why-wide .why-visual { margin-top: 0; }
.why-tint { background: var(--g-bg); border-color: transparent; }
.why-dark { background: var(--g-navy); border-color: var(--g-navy); color: #c9d5e6; }
.why-dark h3 { color: #fff; }
.why-dark p { color: rgba(255, 255, 255, .8); }
.why-dark .why-n { color: var(--g-blue-2); }
@media (max-width: 991.98px) { .why-bento { grid-template-columns: repeat(2, 1fr); } .why-wide { grid-template-columns: 1fr; gap: 1.4rem; } }
@media (max-width: 575.98px) { .why-bento { grid-template-columns: 1fr; } .why-wide { grid-column: auto; } }
/* 01 mini room chart */
.mrc { display: grid; grid-template-columns: 34px repeat(10, 1fr); grid-template-rows: repeat(5, 30px); background: #fff; border: 1px solid #d6dde6; border-radius: 10px; overflow: hidden; box-shadow: var(--g-shadow); }
.mrc b { grid-column: 1; display: grid; place-items: center; font-size: .66rem; color: var(--g-navy); background: #f7f9fb; border-bottom: 1px solid #eef1f5; font-variant-numeric: tabular-nums; }
.mrc i { border-left: 1px solid #eef1f5; border-bottom: 1px solid #eef1f5; }
.mrc span { margin: 6px 2px; border-radius: 5px; background: var(--g-blue-dk); }
.mrc span.in { background: #1f8a5b; }
.mrc span.pend { background: #fff3ec; box-shadow: inset 0 0 0 1.5px var(--g-orange); }
/* 02 browser window */
.mbr { border: 1px solid #d6dde6; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: var(--g-shadow); font-size: .68rem; }
.mbr-bar { display: flex; align-items: center; gap: 5px; padding: 7px 9px; background: #eef2f6; }
.mbr-bar > span { width: 8px; height: 8px; border-radius: 50%; background: #cfd7e1; }
.mbr-bar em { flex: 1; margin-left: 6px; font-style: normal; background: #fff; border-radius: 6px; padding: 3px 8px; color: var(--g-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbr-bar em i { color: #1f8a5b; margin-right: 5px; font-size: .6rem; }
.mbr-app { display: flex; gap: .7rem; align-items: center; padding: 6px 10px; background: #001b37; color: rgba(255, 255, 255, .6); font-weight: 600; }
.mbr-app b { color: #fff; }
.mbr-app .on { color: #fff; box-shadow: inset 0 -2px 0 var(--g-blue-2); }
.mbr-body { display: grid; gap: 6px; padding: 10px; }
.mbr-body i { height: 8px; border-radius: 4px; background: #eef2f6; }
.mbr-body i:nth-child(2) { width: 75%; }
.mbr-body i:nth-child(3) { width: 55%; }
.mbr-icons { display: flex; gap: .9rem; margin-top: .9rem; font-size: 1.25rem; color: var(--g-muted); }
/* 03 report */
.mrp { border: 1px solid #d6dde6; border-radius: 10px; background: #fff; padding: 10px 12px 8px; box-shadow: var(--g-shadow); }
.mrp-t { font-size: .7rem; font-weight: 700; color: var(--g-navy); margin-bottom: 8px; }
.mrp-bars { display: flex; align-items: flex-end; gap: 5px; height: 70px; padding-bottom: 14px; position: relative; }
.mrp-bars span { flex: 1; position: relative; background: var(--g-blue); border-radius: 3px 3px 0 0; opacity: .85; }
.mrp-bars span:nth-last-child(-n+3) { background: var(--g-blue-dk); opacity: 1; }
.mrp-bars em { position: absolute; left: 0; right: 0; bottom: -14px; text-align: center; font-style: normal; font-size: .58rem; color: var(--g-muted); }
.mrp-x { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.mrp-x span { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; color: var(--g-navy); background: var(--g-bg); border-radius: 6px; padding: .2rem .55rem; }
.mrp-x .fa-file-excel { color: #1f8a5b; }
.mrp-x .fa-file-word { color: #2b5fb4; }
.mrp-x .fa-file-pdf { color: #c53030; }
/* 04 chips */
.why-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.why-chips li { background: #fff; border: 1px solid var(--g-line); border-radius: 999px; padding: .3rem .8rem; font-size: .85rem; font-weight: 600; color: var(--g-navy); }
/* 05 settings */
.why-set { margin: 0; display: grid; gap: 1px; background: rgba(255, 255, 255, .12); border-radius: 10px; overflow: hidden; }
.why-set div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .8rem; background: rgba(255, 255, 255, .05); font-size: .85rem; }
.why-set dt { font-weight: 500; color: rgba(255, 255, 255, .7); }
.why-set dd { margin: 0; font-weight: 700; color: #fff; text-align: right; }
/* Cloud vs On Premise comparison */
.compare-card { position: relative; height: 100%; background: #fff; border: 1px solid var(--g-line); border-radius: var(--g-radius); padding: 1.75rem 1.5rem 1.5rem; }
.compare-card.is-rec { border: 2px solid var(--g-blue); box-shadow: 0 16px 36px rgba(25, 136, 195, .14); }
.compare-card h3 { font-size: 1.45rem; margin: 0 0 .75rem; display: flex; align-items: center; gap: .6rem; }
.compare-card h3 i { font-size: 1.1rem; color: var(--g-blue-dk); }
.compare-card .check-list { margin: 0; }
.compare-tag { position: absolute; top: -12px; left: 1.25rem; background: var(--g-orange); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .2rem .65rem; border-radius: 6px; }
.sticky-lg { position: sticky; top: 110px; }
@media (max-width: 991.98px) { .sticky-lg { position: static; } }

.module-card { display: block; background: #fff; border-radius: var(--g-radius); overflow: hidden; border: 1px solid var(--g-line); border-top: 4px solid var(--g-blue); height: 100%; color: inherit; transition: transform .25s ease, box-shadow .25s ease; }
.module-card:hover { transform: translateY(-4px); box-shadow: var(--g-shadow-lg); color: inherit; }
.module-img { height: 200px; background: #fff; overflow: hidden; border-bottom: 1px solid var(--g-line); }
.module-img img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: .6rem; transition: transform .5s ease; }
.module-card:hover .module-img img { transform: scale(1.05); }
.module-body { padding: 1.4rem 1.5rem 1.6rem; }
.module-body h3 { margin: 0 0 .25rem; font-size: 1.6rem; }
.module-body small { display: block; color: var(--g-blue-dk); font-weight: 700; margin-bottom: .5rem; }
.module-body p { margin: 0; font-size: .95rem; }
.module-link { display: inline-block; margin-top: .9rem; font-weight: 800; color: var(--g-blue-dk); }
.module-link i { transition: transform .2s; margin-left: .25rem; }
.module-card:hover .module-link i { transform: translateX(5px); }

.split-img, .shot { border-radius: var(--g-radius); box-shadow: var(--g-shadow-lg); width: 100%; display: block; }
.shot-sm { border-radius: var(--g-radius-sm); box-shadow: var(--g-shadow); }
.banner-img { border-radius: var(--g-radius); box-shadow: var(--g-shadow); width: 100%; display: block; transition: transform .3s ease; }
.banner-img:hover { transform: scale(1.012); }

.check-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.check-list li { padding: .35rem 0 .35rem 2.1rem; position: relative; color: #333f50; }
.check-list li::before { content: "\f00c"; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: .5rem; width: 22px; height: 22px; border-radius: 50%; background: rgba(31, 138, 91, .14); color: var(--g-teal); font-size: .65rem; text-align: center; line-height: 22px; }

/* CTA band */
.cta-band { color: #fff; border-radius: 20px; padding: 3.5rem 3rem; position: relative; overflow: hidden; box-shadow: var(--g-shadow-lg); background-color: var(--g-navy);
    background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 84px); }
.cta-band::before { content: ""; position: absolute; right: 8%; top: 30px; width: 220px; height: 20px; border-radius: 6px; background: rgba(77, 179, 230, .35); box-shadow: -90px 38px 0 0 rgba(255, 255, 255, .1); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; margin: 0 0 .5rem; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.cta-band h2 strong { font-weight: inherit; color: #8dd0f3; }
.cta-band p { color: rgba(255, 255, 255, .85); margin: 0; font-size: 1.1rem; }
.cta-actions { text-align: right; align-self: center; }
@media (max-width: 991.98px) { .cta-actions { text-align: left; margin-top: 1.4rem; } .cta-band { padding: 2.5rem 1.75rem; } }

/* ---------- Product pages ---------- */
/* module pages: previous / next module, labelled (the repeated page title that sat beside them was removed) */
.product-nav { display: flex; gap: .5rem; justify-content: space-between; }
.product-nav a { display: inline-flex; align-items: center; gap: .55rem; height: 40px; padding: 0 1rem; border-radius: 8px; background: var(--g-bg); color: var(--g-navy); font-weight: 600; font-size: .9rem; transition: background .2s, color .2s; }
.product-nav a i { font-size: .75rem; }
.product-nav a:hover { background: var(--g-navy); color: #fff; }
.carousel.shots { border-radius: var(--g-radius); overflow: hidden; box-shadow: var(--g-shadow-lg); background: var(--g-bg); border: 1px solid var(--g-line); }
.carousel.shots img { width: 100%; display: block; }
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li { padding: .55rem 0 .55rem 2rem; position: relative; border-bottom: 1px dashed #d6dde6; color: #333f50; }
.feature-list li:last-child { border-bottom: 0; }
.feature-list li::before { content: "\f058"; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: .55rem; color: var(--g-teal); }
.related-card { display: block; position: relative; border-radius: var(--g-radius); overflow: hidden; box-shadow: var(--g-shadow); height: 190px; background: var(--g-bg); }
.related-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s; }
.related-card:hover img { transform: scale(1.06); }
.related-card span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem 1rem .8rem; color: #fff; font-weight: 700; background: linear-gradient(0deg, rgba(11, 31, 58, .92), rgba(11, 31, 58, 0)); }

/* ---------- Pricing ---------- */
.plan { background: #fff; border: 1px solid var(--g-line); border-radius: 18px; padding: 2.1rem 1.9rem 1.9rem; height: 100%; box-shadow: var(--g-shadow); transition: transform .25s, box-shadow .25s; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.plan:hover { transform: translateY(-4px); box-shadow: var(--g-shadow-lg); }
.plan h3 { font-size: 1.15rem; line-height: 1.4; margin: 0 0 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--g-line); }
.plan .price { display: block; margin-top: .8rem; font-family: var(--font-display); font-size: 3.2rem; font-weight: 750; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--g-navy); }
.plan .price small { font-family: var(--bs-font-sans-serif); font-size: .92rem; font-weight: 500; color: var(--g-muted); letter-spacing: 0; }
.plan .btn { display: block; margin-bottom: 1.4rem; }
.plan ul { list-style: none; padding: 0; margin: 0; }
.plan ul li { padding: .65rem 0; border-top: 1px solid var(--g-line); font-size: .95rem; }
.plan ul li:first-child { border-top: 0; }
.plan ul li b { color: var(--g-navy); }
.plan.popular { border: 2px solid var(--g-blue); box-shadow: 0 20px 48px rgba(25, 136, 195, .18); }
@media (min-width: 992px) { .plan.popular { transform: translateY(-8px); } .plan.popular:hover { transform: translateY(-12px); } }
.plan-ribbon { position: absolute; top: 18px; right: 18px; transform: none; width: auto; background: var(--g-orange); color: #fff; padding: .25rem .7rem; border-radius: 6px; font-weight: 700; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Logo grids (customers, marketplace, partners) ---------- */
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
.logo-tile { background: #fff; border: 1px solid var(--g-line); border-radius: var(--g-radius-sm); height: 110px; display: flex; align-items: center; justify-content: center; padding: 1rem; transition: box-shadow .25s, transform .25s; }
.logo-tile:hover { box-shadow: var(--g-shadow); transform: translateY(-3px); }
.logo-tile img { max-height: 64px; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .25s, opacity .25s; }
.logo-tile:hover img { filter: none; opacity: 1; }
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2rem; }
.filter-bar button { border: 1px solid var(--g-line); background: #fff; color: var(--g-navy); border-radius: 8px; padding: .45rem 1.1rem; font-weight: 700; font-size: .9rem; transition: all .2s; }
.filter-bar button:hover { border-color: var(--g-blue); color: var(--g-blue-dk); }
.filter-bar button.active { background: var(--g-navy); border-color: var(--g-navy); color: #fff; }
.is-hidden { display: none !important; }

/* ---------- Marketplace page (partner cards) ---------- */
.mk-filter { max-width: 1080px; margin-left: auto; margin-right: auto; }
.mk-filter button { padding: .38rem .95rem; font-size: .85rem; }
.mk-card { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--g-line); border-radius: var(--g-radius); overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .25s, transform .25s, border-color .25s; }
.mk-card:hover { box-shadow: var(--g-shadow-lg); transform: translateY(-4px); border-color: transparent; color: inherit; }
.mk-logo { display: flex; align-items: center; justify-content: center; height: 150px; padding: 1.25rem 1.5rem; background: #fff; border-bottom: 1px solid var(--g-line); }
.mk-logo img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .3s; }
.mk-card:hover .mk-logo img { transform: scale(1.05); }
.mk-body { display: block; padding: .9rem 2.8rem .95rem 1.1rem; background: var(--g-bg); flex: 1; }
.mk-name { display: block; color: var(--g-navy); font-size: 1rem; line-height: 1.25; }
.mk-type { display: block; margin-top: .2rem; color: var(--g-muted); font-size: .82rem; }
.mk-go { position: absolute; right: .9rem; bottom: .9rem; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--g-navy); color: #fff; font-size: .72rem; opacity: .9; transition: transform .25s, background .25s; }
.mk-card:hover .mk-go { transform: scale(1.1); opacity: 1; background: var(--g-blue-dk); }

/* ---------- Legal / long text ---------- */
.prose { max-width: 860px; margin: 0 auto; }
.prose h2 { font-size: 1.7rem; margin: 2.5rem 0 1rem; }
.prose h3 { font-size: 1.3rem; margin: 2rem 0 .75rem; }
.prose h4, .prose h5 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: .35rem; }
.prose table { width: 100%; margin: 1.25rem 0; border-collapse: collapse; font-size: .92rem; }
.prose th, .prose td { border: 1px solid var(--g-line); padding: .6rem .8rem; vertical-align: top; }
.prose th { background: var(--g-bg); color: var(--g-navy); }

/* ---------- Forms ---------- */
.form-control, .form-select { border: 1px solid #cfd7e1; border-radius: 8px; padding: .7rem 1rem; box-shadow: none; }
.form-control:focus, .form-select:focus { border-color: var(--g-blue); box-shadow: 0 0 0 4px rgba(25, 136, 195, .15); }
label { font-weight: 700; color: var(--g-navy); font-size: .9rem; margin-bottom: .35rem; }
.alert { border: 0; border-radius: 10px; }
.contact-info { list-style: none; padding: 0; }
.contact-info li { display: flex; gap: .9rem; margin-bottom: 1rem; }
.contact-info i { width: 22px; color: var(--g-blue-dk); margin-top: .3rem; text-align: center; }
.map-box { height: 360px; width: 100%; background: var(--g-bg); }
.map-box iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--g-navy); color: #b4c1d6; margin-top: 5rem; }
.footer-main { padding-top: 4rem; padding-bottom: 2.25rem; }
.site-footer h4 { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin-bottom: 1.1rem; }
.site-footer p, .site-footer li { color: #b4c1d6; }
.site-footer a { color: #d6e6f8; }
.site-footer a:hover { color: #fff; }
.site-footer strong { color: #e8f0fa; font-weight: 700; }
.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { display: flex; gap: .8rem; margin-bottom: .6rem; font-size: .95rem; }
.footer-contact i { color: var(--g-blue-2); width: 18px; margin-top: .3rem; text-align: center; }
.newsletter .form-control { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); color: #fff; border-radius: 8px 0 0 8px; }
.newsletter .form-control::placeholder { color: #9fb0c9; }
.newsletter .btn { border-radius: 0 8px 8px 0; background: var(--g-orange); color: #fff; padding: 0 1.3rem; }
.newsletter .btn:hover { background: #b93b0a; transform: none; }
.newsletter-consent { display: flex; gap: .55rem; align-items: flex-start; margin: .75rem 0 .4rem; font-weight: 400; font-size: .85rem; color: #c9d5e6; cursor: pointer; }
.newsletter-consent input { margin-top: .25rem; flex: none; accent-color: #4db3e6; }
.newsletter-legal { font-size: .72rem; line-height: 1.5; color: #9fb0c9; margin: 0; }
/* anti-spam honeypot (see Newsletter.ashx): off-screen, never visible or focusable */
.nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.newsletter-legal a { color: #c9d5e6; text-decoration: underline; }
.social-link { display: inline-flex; width: 40px; height: 40px; border-radius: 8px; background: rgba(255, 255, 255, .1); color: #fff !important; align-items: center; justify-content: center; transition: background .2s, transform .2s; }
.social-link:hover { background: var(--g-blue); transform: translateY(-3px); }
.footer-bottom { background: rgba(0, 0, 0, .22); padding: 1.3rem 0; font-size: .87rem; }
.footer-bottom p { margin: 0; color: #9fb0c9; }
/* footer logo is the white-text SVG variant (logo-guest-white.svg) */
.footer-bottom img { max-height: 38px; width: auto; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; justify-content: flex-end; }
.footer-links a { color: #9fb0c9; font-size: .85rem; }
@media (max-width: 767.98px) { .footer-links { justify-content: flex-start; margin-top: .8rem; } }
.eu-strip { background: #fff; padding: 1.4rem 0; font-size: .8rem; line-height: 1.6; }
.eu-strip p { color: var(--g-muted); margin: 0; }
.eu-strip img { height: 64px; width: auto; }

/* cookie consent (see /site/js/cookie-consent.js) */
.cc { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1100; max-width: 760px; margin: 0 auto; background: rgba(11, 31, 58, .98); color: #e8f0fa; border-radius: 12px; padding: 1.1rem 1.35rem; box-shadow: var(--g-shadow-lg); font-size: .9rem; line-height: 1.55; }
.cc[hidden], .cc [hidden] { display: none !important; }
.cc-title { color: #fff; font-family: var(--bs-font-sans-serif); font-size: 1.05rem; font-weight: 700; margin: 0 0 .4rem; }
.cc p { margin: 0 0 .85rem; color: #e8f0fa; }
.cc a { color: #8dd0f3; text-decoration: underline; }
.cc-prefs { border-top: 1px solid rgba(255, 255, 255, .15); padding-top: .75rem; margin-bottom: .85rem; }
.cc-opt { display: flex; gap: .65rem; align-items: flex-start; margin: 0 0 .55rem; font-weight: 400; font-size: .88rem; color: #e8f0fa; cursor: pointer; }
.cc-opt input { margin-top: .3rem; width: 1.05rem; height: 1.05rem; flex: none; accent-color: #4db3e6; }
.cc-opt input:disabled { cursor: not-allowed; }
.cc-opt strong { color: #fff; }
.cc-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
/* accept and reject share the same visual weight on purpose (AEPD: equal prominence) */
.cc-btn { border: 1px solid #fff; background: #fff; color: var(--g-navy); border-radius: 999px; padding: .4rem 1.2rem; font-weight: 600; font-size: .88rem; cursor: pointer; }
.cc-btn:hover { background: #e8f0fa; }
.cc-btn.cc-btn-ghost { background: transparent; color: #fff; }
.cc-btn.cc-btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.cc-btn:focus-visible { outline: 3px solid #8dd0f3; outline-offset: 2px; }
@media (max-width: 575.98px) { .cc-actions .cc-btn { flex: 1 1 auto; } }
/* third-party embeds held back until consent */
.embed-placeholder { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 1.5rem; text-align: center; color: var(--g-text); }
.embed-placeholder p { max-width: 520px; margin: 0; font-size: .92rem; }
.embed-placeholder .btn { background: var(--g-blue-dk); color: #fff; border-radius: 999px; padding: .4rem 1.3rem; }

/* ---------- Scroll reveal ---------- */
/* only hidden when JS is running (html.js is set inline in the Master head), so content never stays invisible */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } .js .reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } }

/* ---------- Pricing: feature check-lists nested inside .plan (Precio / Rates) ---------- */
.plan ul.check-list { margin: .5rem 0 0; }
.plan ul.check-list li { padding: .3rem 0 .3rem 2.1rem; border-top: 0; font-size: .92rem; }
.plan ul.check-list li::before { top: .38rem; }
.plan ul.check-list ul.check-list { margin: .15rem 0 .2rem; }
.plan ul.check-list ul.check-list li { padding-left: 1.9rem; font-size: .88rem; color: var(--g-muted); }
.plan ul.check-list ul.check-list li::before { background: rgba(25, 136, 195, .12); color: var(--g-blue-dk); }

/* ---------- PAGES: Customers / Legal / VERIFACTU (section owned by customers+legal pages) ---------- */
.client-card { display: flex; flex-direction: column; padding: 1.5rem; }
.client-logo { height: 130px; display: flex; align-items: center; justify-content: center; background: var(--g-bg); border-radius: var(--g-radius-sm); padding: 1rem; margin-bottom: 1.25rem; }
.client-logo img { max-height: 90px; max-width: 100%; object-fit: contain; }
.client-card h3 { font-size: 1.25rem; margin: 0 0 .4rem; }
.client-type { display: inline-block; align-self: flex-start; background: rgba(25, 136, 195, .1); color: var(--g-blue-dk); font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; border-radius: 6px; padding: .22rem .7rem; margin-bottom: .9rem; }
.client-desc p { font-size: .94rem; margin: 0 0 .6rem; }
.client-desc p:last-child { margin-bottom: 0; }
.prose p, .prose li { color: #333f50; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose a.btn { text-decoration: none; }
.prose .table-wrap { overflow-x: auto; }
.prose .legal-lead { font-size: 1.08rem; }
.data-box { background: var(--g-bg); border: 1px solid var(--g-line); border-radius: var(--g-radius-sm); padding: 1.25rem 1.5rem; margin: 1rem 0 2rem; }
.data-box > :last-child { margin-bottom: 0; }
.doc-download { display: inline-flex; align-items: center; gap: .6rem; }

/* ---------- Touch devices: no hover lift ----------
   On phones a tap leaves :hover "stuck", so cards and buttons would stay raised after being touched. */
@media (hover: none) {
    .btn-brand:hover, .btn-primary:hover, .btn-orange:hover, .btn-light:hover, .btn-ghost:hover, .btn-outline-brand:hover,
    .g-card:hover, .module-card:hover, .module-card:hover .module-img img, .module-card:hover .module-link i,
    .banner-img:hover, .related-card:hover img, .plan:hover, .logo-tile:hover, .mk-card:hover, .mk-card:hover .mk-logo img,
    .mk-card:hover .mk-go, .social-link:hover { transform: none; }
    .g-card:hover, .module-card:hover, .logo-tile:hover, .mk-card:hover { box-shadow: none; }
    .g-card:hover, .mk-card:hover { border-color: var(--g-line); }
    .plan:hover { box-shadow: var(--g-shadow); }
    .plan.popular:hover { box-shadow: 0 20px 48px rgba(25, 136, 195, .18); }
}
@media (hover: none) and (min-width: 992px) { .plan.popular:hover { transform: translateY(-8px); } }

/* ---------- Home hero: interactive reception dashboard demo ----------
   A faithful HTML redraw of the GUEST PMS "Dashboard recepción" screen with invented sample data.
   Filters (Pendiente / Realizadas) and search are wired in site.js. */
.hero-db .db-figure { margin: 0; }
@media (min-width: 992px) { .hero-db .db-figure { margin-right: -6%; } }
.db { position: relative; background: #f3f5f7; border: 1px solid #d6dde6; border-radius: 12px; box-shadow: var(--g-shadow-lg); overflow: hidden; font-size: 11px; line-height: 1.25; color: #24324a; text-align: left; }
.db-top { padding: 9px 14px; background: #001b37; color: #fff; font-weight: 700; font-size: 12.5px; }
.db-scroll { overflow-x: auto; scrollbar-width: thin; }
.db-inner { min-width: 0; }
@media (max-width: 991.98px) { .db-inner { min-width: 760px; } }
.db-tools { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #fff; border-bottom: 1px solid #e3e7ec; }
.db-in { border: 1px solid #d5dbe2; border-radius: 4px; padding: 4px 8px; background: #fff; white-space: nowrap; font-weight: 400; color: inherit; font-size: inherit; margin: 0; }
.db-in i { margin-left: 18px; font-size: 9px; color: #7b8594; }
.db-search { flex: 1; display: flex; align-items: center; gap: 6px; cursor: text; }
.db-search i { margin: 0; }
.db-search input { flex: 1; min-width: 0; border: 0; padding: 0; background: transparent; font: inherit; color: #14233a; outline: 0; }
.db-search input::placeholder { color: #8a94a3; }
.db-search:focus-within { border-color: var(--g-blue); box-shadow: 0 0 0 3px rgba(25, 136, 195, .15); }
.db-seg { display: flex; border: 1px solid #d5dbe2; border-radius: 4px; overflow: hidden; background: #f1f3f6; }
.db-seg > * { padding: 4px 10px; color: #7b8594; border: 0; background: transparent; font: inherit; }
.db-seg > .on { background: #fff; color: #14233a; font-weight: 700; }
.db-seg button { cursor: pointer; }
.db-seg button:not(.on):hover { color: #14233a; }
.db-seg button:focus-visible { outline: 2px solid var(--g-blue); outline-offset: -2px; }
.db-sq { display: grid; place-items: center; width: 26px; height: 24px; border: 1px solid #d5dbe2; border-radius: 4px; background: #fff; color: #14233a; font-size: 11px; }
.db-body { display: grid; gap: 10px; padding: 10px; }
.db-kpis { display: grid; grid-template-columns: 1.25fr 1fr 1.1fr 1.35fr; gap: 10px; }
.db-box { background: #fff; border: 1px solid #e3e7ec; border-radius: 6px; padding: 8px 10px; }
.db-lbl { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7b8594; margin-bottom: 6px; }
.db-nums { display: flex; gap: 22px; }
.db-num b { font-size: 17px; font-weight: 750; letter-spacing: -.02em; color: #14233a; font-variant-numeric: tabular-nums; }
.db-num b small { font-size: 10px; font-weight: 500; color: #7b8594; }
.db-num > span { display: block; font-size: 7.5px; letter-spacing: .05em; text-transform: uppercase; color: #8a94a3; }
.db-num b.up { color: #1f8a5b; }
.db-num b.down { color: #d64545; }
.db-chips { display: grid; gap: 6px; }
.db-chips-2 { grid-template-columns: 1fr 1fr; }
.db-chips-3 { grid-template-columns: 1fr 1fr 1fr; }
.db-chip { border-radius: 4px; text-align: center; padding: 4px 2px 3px; font-size: 7px; letter-spacing: .04em; text-transform: uppercase; }
.db-chip b { display: block; font-size: 14px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.db-chip.amb { background: #fdf1dc; color: #a86a12; }
.db-chip.red { background: #fde8e8; color: #c53030; }
.db-chip.gry { background: #eef1f5; color: #4a5565; }
.db-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.db-col-h { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; min-height: 20px; }
.db-col-h b { font-size: 12px; color: #14233a; }
.db-col-h > span { color: #7b8594; }
.db-col-h .db-seg { margin-left: auto; font-size: 8.5px; }
.db-col-h .db-seg > * { padding: 3px 8px; }
.db-col-h > i { margin-left: auto; font-size: 9px; color: #4a5565; }
.db-col-h .db-seg + i { margin-left: 4px; }
.db-list { height: 262px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 2px; }
.db-card { border: 1px solid #e6e9ee; border-left: 3px solid #e05252; border-radius: 5px; padding: 6px 8px; margin-bottom: 6px; background: #fff; }
.db-card.done { border-left-color: #1f9d6b; }
/* no-JS default matches the initial "Pendiente" tab */
.db-col[data-view="pending"] .db-card[data-state="done"], .db-col[data-view="done"] .db-card[data-state="pending"] { display: none; }
.db-ch { display: flex; justify-content: space-between; gap: 6px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: #14233a; }
.db-ch time { font-variant-numeric: tabular-nums; }
.db-ref { margin-top: 2px; font-size: 9.5px; text-transform: uppercase; color: #4a5565; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-ref i { margin: 0 3px 0 4px; font-size: 8px; color: #7b8594; }
.db-meta { display: flex; align-items: center; gap: 9px; margin-top: 4px; font-size: 9.5px; font-weight: 700; color: #14233a; }
.db-meta i { margin-right: 3px; font-size: 8.5px; color: #4a5565; }
.db-meta .dirty { color: #c98a12; }
.db-meta .clean { color: #1f8a5b; }
.db-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.db-tags span { background: #fdf1dc; color: #a86a12; font-weight: 700; font-size: 8.5px; padding: 1px 5px; border-radius: 3px; }
.db-empty { margin: 1.5rem 0 0; text-align: center; color: #7b8594; }
.db-caption { margin-top: .75rem; font-size: .8rem; line-height: 1.5; color: var(--g-muted); }
/* entrance on page load only (site.js adds .play once, and removes it on the first interaction so
   filtering stays instant). The finished state is the default, so reduced motion just shows it. */
.db.play .db-card { animation: dbIn 300ms cubic-bezier(.23, 1, .32, 1) backwards; animation-delay: calc(150ms + var(--i) * 45ms); }
@keyframes dbIn { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Home: "Novedades" (latest posts from the blog RSS, see BlogFeed.cs) ---------- */
.news-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 2rem; margin-bottom: 2rem; }
.news-head .section-title { margin: 0; }
.news-all { font-weight: 700; color: var(--g-blue-dk); white-space: nowrap; }
.news-all i { margin-left: .3rem; transition: transform .2s; }
.news-all:hover i { transform: translateX(4px); }
.news-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--g-line); border-radius: var(--g-radius); overflow: hidden; color: inherit; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.news-card:hover { transform: translateY(-4px); box-shadow: var(--g-shadow-lg); border-color: transparent; color: inherit; }
.news-img { display: grid; place-items: center; aspect-ratio: 3 / 2; background: var(--g-bg); border-bottom: 1px solid var(--g-line); overflow: hidden; color: var(--g-blue); font-size: 2rem; }
.news-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.news-card:hover .news-img img { transform: scale(1.04); }
.news-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.4rem 1.4rem; }
.news-body time { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-muted); }
.news-body h3 { font-size: 1.15rem; line-height: 1.35; margin: .4rem 0 .5rem; }
.news-body p { font-size: .95rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-body .module-link { margin-top: auto; padding-top: .9rem; }
.news-card:hover .module-link i { transform: translateX(5px); }
@media (hover: none) { .news-card:hover, .news-card:hover .news-img img { transform: none; } .news-card:hover { box-shadow: none; border-color: var(--g-line); } }

/* ---------- Closing CTA (home): both hero actions + contact as a quiet text link ---------- */
.cta-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .75rem; }
.cta-actions .cta-talk { flex-basis: 100%; text-align: right; color: rgba(255, 255, 255, .85); font-weight: 600; font-size: .95rem; }
.cta-actions .cta-talk:hover { color: #fff; }
.cta-actions .cta-talk i { margin-left: .3rem; font-size: .8em; transition: transform .2s; }
.cta-actions .cta-talk:hover i { transform: translateX(4px); }
@media (max-width: 991.98px) { .cta-actions { justify-content: flex-start; } .cta-actions .cta-talk { text-align: left; } }
/* keep the room-chart bars in the band's top padding so they never sit on the buttons */
.cta-band:has(.cta-actions .btn-orange)::before { top: 18px; box-shadow: none; }

/* ---------- Home: "GUEST Insights" (category page of the blog, see BlogFeed.cs). Newest post featured. ---------- */
/* secondary editorial content: kept compact so it never competes with the hero, product and CTA */
.section.insights { padding: 4rem 0; }
.ins-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.ins-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--g-line); border-radius: var(--g-radius); overflow: hidden; color: inherit; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.ins-card:hover { transform: translateY(-4px); box-shadow: var(--g-shadow-lg); border-color: transparent; color: inherit; }
/* Insights covers are square artwork with text baked in: never crop them */
.ins-img { display: grid; place-items: center; aspect-ratio: 1 / 1; background: var(--g-navy); overflow: hidden; color: var(--g-blue-2); font-size: 2.5rem; }
.ins-img { position: relative; isolation: isolate; }
.ins-img::before { content: ""; position: absolute; inset: -24px; z-index: -1; background: var(--cover, none) center / cover no-repeat; filter: blur(22px) saturate(1.15) brightness(.8); }
.ins-img img { position: relative; width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }
.ins-card:hover .ins-img img { transform: scale(1.03); }
.ins-body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.5rem 1.5rem; }
.ins-body h3 { font-size: 1.05rem; line-height: 1.35; margin: 0 0 .4rem; }
.ins-card.has-quote p { color: var(--g-navy); font-weight: 600; letter-spacing: -.005em; }
.ins-body p { margin: 0; font-size: .95rem; }
.ins-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.1rem; }
.ins-foot time { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-muted); }
.ins-foot .module-link { margin: 0; }
.ins-card:hover .module-link i { transform: translateX(5px); }
.ins-card.is-feature { grid-column: 1 / -1; display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.ins-card.is-feature .ins-img { aspect-ratio: 1 / 1; align-self: start; }
.ins-card.is-feature .ins-body { justify-content: center; padding: 1.4rem 2rem; }
.ins-card.is-feature h3 { font-size: 1.1rem; margin: 0 0 .6rem; }
.ins-card.is-feature.has-quote p { font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.35; letter-spacing: -.015em; }
.ins-card.is-feature p { font-size: .95rem; line-height: 1.6; max-width: 70ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ins-card.is-feature .ins-foot { margin-top: 1rem; padding-top: 0; }
@media (max-width: 991.98px) { .ins-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px) { .ins-grid { grid-template-columns: 1fr; } .ins-card.is-feature { grid-template-columns: 96px minmax(0, 1fr); } .ins-card.is-feature .ins-body { padding: 1rem 1.1rem; } .ins-card.is-feature p { -webkit-line-clamp: 2; } .ins-card .module-link { display: none; } }
@media (hover: none) { .ins-card:hover, .ins-card:hover .ins-img img { transform: none; } .ins-card:hover { box-shadow: none; border-color: var(--g-line); } }
/* 2-3 Insights: newest featured on the left, the others as compact rows stacked on the right.
   (Browsers without :has() keep the simple layout above: featured full width + cards below.) */
.ins-grid:has(> .ins-card:nth-child(2)) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-auto-rows: auto; align-items: stretch; }
.ins-grid:has(> .ins-card:nth-child(2)) .is-feature { grid-column: 1; grid-row: 1; grid-template-columns: 200px minmax(0, 1fr); }
.ins-grid:has(> .ins-card:nth-child(3)) .is-feature { grid-row: 1 / span 2; }
.ins-grid:has(> .ins-card:nth-child(3)) .is-feature .ins-img { aspect-ratio: auto; align-self: stretch; }
.ins-grid:has(> .ins-card:nth-child(2)) .is-feature .ins-body { padding: 1.3rem 1.5rem; }
.ins-grid:has(> .ins-card:nth-child(2)) .is-feature.has-quote p { font-size: clamp(1.15rem, 1.6vw, 1.4rem); }
.ins-grid:has(> .ins-card:nth-child(2)) .ins-card:not(.is-feature) { grid-column: 2; flex-direction: row; }
.ins-grid:has(> .ins-card:nth-child(2)) .ins-card:not(.is-feature) .ins-img { flex: 0 0 38%; aspect-ratio: 1 / 1; align-self: stretch; }
.ins-grid:has(> .ins-card:nth-child(2)) .ins-card:not(.is-feature) .ins-body { padding: 1.1rem 1.25rem; }
.ins-grid:has(> .ins-card:nth-child(2)) .ins-card:not(.is-feature) h3 { font-size: .98rem; margin: 0 0 .3rem; }
.ins-grid:has(> .ins-card:nth-child(2)) .ins-card:not(.is-feature) p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .88rem; }
.ins-grid:has(> .ins-card:nth-child(2)) .ins-card:not(.is-feature) .ins-foot { padding-top: .7rem; }
.ins-grid:has(> .ins-card:nth-child(2)) .ins-card:not(.is-feature) .module-link { display: none; }
@media (max-width: 991.98px) {
    .ins-grid:has(> .ins-card:nth-child(2)) { grid-template-columns: 1fr; }
    .ins-grid:has(> .ins-card:nth-child(2)) .is-feature { grid-row: auto; }
    .ins-grid:has(> .ins-card:nth-child(2)) .ins-card:not(.is-feature) { grid-column: 1; }
}
@media (max-width: 767.98px) { .ins-grid:has(> .ins-card:nth-child(2)) .is-feature { grid-template-columns: 96px minmax(0, 1fr); } }

/* ---------- Header "Reservar demo" / "Book a demo": the one highlighted action in the menu ---------- */
.nav-main > li > a.nav-demo { background: var(--g-orange); color: #fff; border-radius: 10px; padding: .5rem 1rem; margin-left: .35rem; }
.nav-main > li > a.nav-demo::after { display: none; }
.nav-main > li > a.nav-demo:hover, .nav-main > li.active > a.nav-demo { background: #b93b0a; color: #fff; }
@media (max-width: 1199.98px) { .nav-main > li > a.nav-demo { margin: .5rem 0 0; text-align: center; } }