/* ====================================================================
   Oasis Total Solutions – Global CSS
   File: assets/css/style.css
   Purpose: Base styles, layout, components, utilities, responsive
   Author: OTS
   ==================================================================== */
/* ------------------------------------------------
   0) ROOT, RESET & BASE
   ------------------------------------------------ */
:root {
    /* Brand */
    --navy: #0D3B66;
    --navy-700: #0A2746;
    --navy-500: #174F87;
    --sky-100: #E9F2FB;
    --accent: #2FBE72;

    /* CTA Green */
    --accent-600: #18A85C;
    --text: #12263A;
    --muted: #49627A;
    --line: #E7ECF2;
    --bg: #F7FAFD;
    --warning: #F4BE38;
    --orange: #F08A2C;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow-1: 0 3px 10px rgba(10,39,70,.06);
    --shadow-2: 0 10px 24px rgba(10,39,70,.12);
    --shadow-3: 0 18px 42px rgba(10,39,70,.16);
    --container: 1160px;
}

*,

*::before,

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

html,

body {
    height: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--text);
    background: #fff;
    font: 400 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
        "Segoe UI Emoji";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Links */
a {
    color: var(--navy);
    text-underline-offset: 2px;
}

a:hover {
    text-decoration: none;
}

/* Headings */
h1,

h2,

h3,

h4 {
    margin: 0 0 .4em;
    color: var(--navy);
    line-height: 1.15;
}

h1 {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 900;
}

h2 {
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 900;
}

h3 {
    font-size: clamp(18px, 2.2vw, 22px);
    font-weight: 900;
}

.lead {
    font-size: clamp(18px, 1.9vw, 20px);
    color: var(--muted);
}

/* Helpers */
.small {
    font-size: .925rem;
}

.muted {
    color: var(--muted);
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.mt-8 {
    margin-top: 8px;
}

.mt-12 {
    margin-top: 12px;
}

.mt-16 {
    margin-top: 16px;
}

.mt-24 {
    margin-top: 24px;
}

.mt-32 {
    margin-top: 32px;
}

.mb-0 {
    margin-bottom: 0;
}

.kicker {
    display: inline-block;
    font: 800 .8rem/1 var(--font, inherit);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2C6AA2;
    background: #EDF4FC;
    padding: .45rem .75rem;
    border-radius: 999px;
}

/* Layout */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

.container-narrow {
    max-width: 880px;
}

.section {
    padding: clamp(38px, 6vw, 72px) 0;
}

.strip {
    background: var(--bg);
}

.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: clamp(18px, 3vw, 28px);
}

@media (max-width:800px){
    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Cards */
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(14px, 2.2vw, 18px);
    box-shadow: var(--shadow-1);
}

/* Divider */
hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 24px 0;
}

/* ------------------------------------------------
   1) BUTTONS & CHIPS
   ------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: .75rem 1rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    border: 1px solid transparent;
    transition: transform .12s ease, box-shadow .2s ease, filter .15s ease;
}

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

.btn-primary {
    background: var(--accent);
    color: #0B3A25;
    border-color: var(--accent);
    box-shadow: 0 10px 26px rgba(47,190,114,.24);
}

.btn-primary:hover {
    filter: brightness(.96);
}

.btn-ghost {
    background: #fff;
    color: var(--navy);
    border-color: var(--line);
    box-shadow: var(--shadow-1);
}

.btn-ghost:hover {
    border-color: #D9E8FA;
}

.actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Chips & Badges */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .5rem .85rem;
    border-radius: 999px;
    background: #EDF4FC;
    color: #2C6AA2;
    font-weight: 800;
    border: 1px solid #D9E8FA;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: .45rem .7rem;
    border-radius: 999px;
    background: #EFF7F2;
    color: #1E8E5A;
    font-weight: 800;
    border: 1px solid #DCEFE4;
}

.badge.brand {
    background: #EAFDF2;
    color: #126C46;
    border-color: #C7F1DA;
}

/* ------------------------------------------------
   2) HEADER / NAV
   ------------------------------------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #fff;
    border-bottom: 1px solid var(--line);
    backdrop-filter: saturate(180%) blur(3px);
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 64px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 900;
    color: var(--navy);
    text-decoration: none;
}

.brand-logo {
    width: 26px;
    height: 26px;
    display: inline-block;
    background: url('/assets/images/logo/brand-mark.svg') center/contain no-repeat;
}

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

.nav-links a {
    color: var(--navy);
    font-weight: 700;
    text-decoration: none;
}

.nav-links a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 6px;
}

/* CTA pill in header */
.cta-sm {
    background: var(--accent);
    color: #0B3A25;
    border: 1px solid var(--accent);
    font-weight: 800;
    border-radius: 999px;
    padding: .55rem .9rem;
    box-shadow: 0 6px 20px rgba(47,190,114,.25);
    text-decoration: none;
}

.cta-sm:hover {
    filter: brightness(.96);
}

/* Mobile button */
.menu-btn {
    display: none;
    appearance: none;
    background: transparent;
    border: 0;
    padding: 6px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.menu-btn span {
    display: block;
    height: 2px;
    background: #0A2746;
    margin: 7px 5px;
    border-radius: 2px;
}

/* Mobile panel – fixed under header (works from any scroll) */
.mobile-panel {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-h, 64px);
    display: none;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
    max-height: calc(100vh - var(--header-h, 64px));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 998;
}

.mobile-panel .container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px;
}

.mobile-panel a {
    color: var(--navy);
    font-weight: 800;
    text-decoration: none;
}

.mobile-panel a:hover {
    text-decoration: underline;
}

@media (max-width:980px){
    .nav-links {
        display: none;
    }

    .menu-btn {
        display: inline-block;
    }

    .mobile-panel[data-open="true"] {
        display: block;
    }
}

/* Scroll-lock (controlled by JS) */
body.scroll-lock {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

/* ------------------------------------------------
   3) HERO
   ------------------------------------------------ */
.hero-alt {
    position: relative;
    overflow: hidden;
    padding: clamp(34px, 8vw, 72px) 0;
    background: radial-gradient(420px 280px at 3% 6%, rgba(13,59,102,.06), transparent 55%),
    radial-gradient(500px 380px at 96% -6%, rgba(47,190,114,.07), transparent 60%);
}

.hero-alt .container {
    position: relative;
    z-index: 2;
}

/* legal DBA */
.legal-dba {
    color: #5B7893;
    margin: .45rem 0 0;
}

.hero--drop {
    position: relative;
}

.hero--drop::after {
    content: "";
    position: absolute;
    top: clamp(16px, 6vw, 40px);
    right: clamp(0px, 3vw, 32px);
    width: min(520px, 40vw);
    height: min(520px, 40vw);
    background: radial-gradient(160px 160px at 35% 35%, rgba(47,190,114,.22), rgba(47,190,114,0) 60%),
    url('/assets/images/logo/hero-drop.svg') center/contain no-repeat;
    pointer-events: none;
    filter: drop-shadow(0 12px 24px rgba(13,59,102,.25));
    opacity: 1;
}

@media (min-width:1024px){
    .hero--drop {
        padding-right: clamp(240px, 35vw, 520px);
        min-height: 420px;
    }
}

@media (max-width:900px){
    .hero--drop::after {
        position: relative;
        right: auto;
        top: auto;
        display: block;
        margin: 24px auto 0;
        width: min(380px, 82vw);
        height: min(380px, 82vw);
    }
}

/* ------------------------------------------------
   4) HOME – SERVICE CARDS WITH BIG ICONS
   ------------------------------------------------ */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
}

@media (max-width:900px){
    .svc-grid {
        grid-template-columns: 1fr;
    }
}

.svc-card a {
    display: block;
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 18px 16px;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-1);
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

.svc-card a:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    border-color: #D9E8FA;
}

.svc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.svc-icon {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    border-radius: 14px;
    background: radial-gradient(24px 20px at 30% 25%, rgba(255,255,255,.45), rgba(255,255,255,0)),
    linear-gradient(180deg, #0E3A63, #174F87);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(13,59,102,.18), inset 0 1px 0 rgba(255,255,255,.15);
}

.svc-icon img {
    width: 36px;
    height: 36px;
    display: block;
}

.svc-icon--green {
    background: linear-gradient(180deg,#1E9E66,#158753);
}

.svc-icon--sky {
    background: linear-gradient(180deg,#2C82D0,#1F69AE);
}

.svc-icon--amber {
    background: linear-gradient(180deg,#F4BE38,#D79E11);
}

.svc-icon--slate {
    background: linear-gradient(180deg,#6B7F95,#4E627A);
}

.svc-icon--orange {
    background: linear-gradient(180deg,#F08A2C,#D46C0D);
}

.svc-card h3 {
    margin: 0;
    font-size: clamp(18px,2.0vw,20px);
    color: #0A2746;
    line-height: 1.2;
}

.svc-card p {
    margin: 8px 0 10px;
    color: #355070;
}

.svc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--navy);
    font-weight: 800;
}

.svc-link::after {
    content: "→";
    transition: transform .15s ease;
}

.svc-card a:hover .svc-link::after {
    transform: translateX(2px);
}

/* ------------------------------------------------
   5) TABLES (e.g., Matrix)
   ------------------------------------------------ */
.table-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,

.table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.table th {
    background: #F6FAFF;
    color: #103A5C;
    font-weight: 800;
}

.table-compact th,

.table-compact td {
    padding: 10px 12px;
}

.table-nowrap td,

.table-nowrap th {
    white-space: nowrap;
}

/* ------------------------------------------------
   6) FAQ (details/summary)
   ------------------------------------------------ */
details.faq-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-1);
}

.faq-summary {
    list-style: none;
    cursor: pointer;
    font-weight: 800;
    color: #0A2746;
}

.faq-summary::-webkit-details-marker {
    display: none;
}

.faq-body {
    color: #355070;
    margin-top: 8px;
}

/* ------------------------------------------------
   7) BREADCRUMBS
   ------------------------------------------------ */
.breadcrumbs {
    list-style: none;
    display: flex;
    gap: 8px;
    padding: 0;
    margin: 8px 0 0;
}

.breadcrumbs li {
    color: #517294;
}

.breadcrumbs a {
    color: #2C6AA2;
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

/* ------------------------------------------------
   8) FORMS (minimal)
   ------------------------------------------------ */
.input,

select,

textarea {
    appearance: none;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .65rem .75rem;
    outline: none;
    background: #fff;
    color: var(--text);
}

.input:focus,

select:focus,

textarea:focus {
    border-color: #CFE2F6;
    box-shadow: 0 0 0 3px rgba(38,132,255,.12);
}

/* ------------------------------------------------
   9) FOOTER
   ------------------------------------------------ */
.site-footer {
    background: #0A1B2B;
    color: #D4DFEA;
    padding-top: clamp(34px, 6vw, 56px);
    border-top: 1px solid rgba(255,255,255,.06);
}

.site-footer .footer-columns {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 22px;
}

.site-footer h4 {
    color: #fff;
    margin-bottom: 10px;
}

.site-footer a {
    color: #C5DAEE;
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

.footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

@media (max-width:900px){
    .site-footer .footer-columns {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------
   10) UTILITIES / GRID
   ------------------------------------------------ */
.grid {
    display: grid;
    gap: 16px;
}

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

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

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

@media (max-width:980px){
    .grid-2,
    
    .grid-3,
    
    .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* “Back to top” link container spacing */
.backtop {
    text-align: center;
    margin-top: 18px;
}

/* ------------------------------------------------
   11) PRINT BASICS
   ------------------------------------------------ */
@media print{
    .site-header,
    
    .menu-btn,
    
    .mobile-panel,
    
    .btn,
    
    .cta-sm {
        display: none !important;
    }

    a {
        text-decoration: none;
    }

    body {
        background: #fff;
    }
}

/* ------------------------------------------------
   12) OPTIONAL COMPONENTS
   ------------------------------------------------ */
/* Pill counters, tags */
.tag {
    display: inline-block;
    padding: .35rem .6rem;
    border-radius: 999px;
    background: #F2F6FB;
    color: #2E5E96;
    font-weight: 800;
    font-size: .8rem;
    border: 1px solid #E3EEF8;
}

/* Simple alerts */
.alert {
    padding: .85rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow-1);
    color: #25455F;
}

/* Links that look like buttons in text */
.inline-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    text-decoration: none;
    color: var(--navy);
    border-bottom: 2px solid #D9E8FA;
    padding-bottom: 2px;
}

.inline-link-btn:hover {
    border-color: #BFD9F3;
}

/* ------------------------------------------------
   13) HEADER HEIGHT VAR (used by JS for mobile panel)
   ------------------------------------------------ */
/* default/fallback */
:root {
    --header-h: 64px;
}

/* ---- WHY OASIS: Carousel ---- */
.switch-carousel {
    position: relative;
    background: linear-gradient(180deg, rgba(13,59,102,.06), rgba(13,59,102,.03));
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--card-shadow,0 6px 22px rgba(0,0,0,.06));
}

.switch-viewport {
    overflow: hidden;
    border-radius: 14px;
}

.switch-track {
    display: flex;
    transition: transform .6s var(--ease, cubic-bezier(.22,.61,.36,1));
    will-change: transform;
}

.switch-slide {
    min-width: 100%;
    background: #fff;
    padding: 28px 24px;
    display: grid;
    gap: 12px;
}

.switch-slide-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.switch-emoji {
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 6px 10px rgba(13,59,102,.12));
}

.switch-list {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 6px;
}

.switch-cta {
    margin-top: 6px;
}

.switch-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    background: #0D3B66;
    color: #fff;
    opacity: .9;
    box-shadow: 0 8px 20px rgba(13,59,102,.25);
}

.switch-btn:hover {
    opacity: 1;
}

.switch-btn.prev {
    left: 10px;
}

.switch-btn.next {
    right: 10px;
}

.switch-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 10px 2px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    background: #cbd5e1;
    opacity: .9;
}

.dot.is-active {
    background: #0D3B66;
    opacity: 1;
}

@media (max-width: 640px){
    .switch-carousel {
        padding: 12px;
    }

    .switch-slide {
        padding: 22px 16px;
    }

    .switch-btn {
        display: none;
    }

    /* flechas fuera en móvil, usamos swipe */
}

/* Reveal (opcional) */
.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s, transform .5s;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Respeto a usuarios con motion reducido */
@media (prefers-reduced-motion: reduce){
    .switch-track {
        transition: none !important;
    }

    .reveal {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ---- WHY OASIS (static cards) ---- */
.why-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
}

@media (max-width:900px){
    .why-grid {
        grid-template-columns: 1fr;
    }
}

.why-card {
    background: #fff;
    border-radius: 16px;
    padding: 22px 20px;
    box-shadow: 0 8px 24px rgba(13,59,102,.08);
    border: 1px solid rgba(13,59,102,.08);
    transition: transform .25s ease, box-shadow .25s ease;
}

.why-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(13,59,102,.12);
}

.why-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.why-emoji {
    font-size: 26px;
    line-height: 1;
    filter: drop-shadow(0 6px 10px rgba(13,59,102,.12));
}

.why-list {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 6px;
}

.why-cta {
    margin-top: 10px;
}

/* motion-respect */
@media (prefers-reduced-motion:reduce){
    .why-card {
        transition: none;
    }
}

/* ---- WHY OASIS tweaks ---- */
.why-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
}

@media (max-width:900px){
    .why-grid {
        grid-template-columns: 1fr;
    }
}

.why-card {
    background: #fff;
    border-radius: 16px;
    padding: 22px 20px;
    box-shadow: 0 8px 24px rgba(13,59,102,.08);
    border: 1px solid rgba(13,59,102,.08);
    transition: transform .25s ease, box-shadow .25s ease;
}

.why-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(13,59,102,.12);
}

.why-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}

.why-emoji {
    font-size: 36px;
    line-height: 1;
    filter: drop-shadow(0 8px 14px rgba(13,59,102,.14));
}

@media (min-width:1100px){
    .why-emoji {
        font-size: 40px;
    }
}

.why-list {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 6px;
}

.why-cta {
    margin-top: 10px;
}

/* ---- KPIs ---- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px;
}

@media (max-width:900px){
    .kpi-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:560px){
    .kpi-grid {
        grid-template-columns: 1fr;
    }
}

.kpi-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px 18px;
    box-shadow: 0 8px 24px rgba(13,59,102,.08);
    border: 1px solid rgba(13,59,102,.08);
    text-align: center;
}

.kpi-value {
    font-weight: 800;
    font-size: 40px;
    letter-spacing: .5px;
    color: #0D3B66;

    /* tu navy */
    margin-bottom: 6px;
}

.kpi-label {
    margin: 0;
    color: rgba(0,0,0,.6);
}

/* motion-respect */
@media (prefers-reduced-motion:reduce){
    .why-card {
        transition: none;
    }
}

/* ============ HOW WE WORK ============ */
.how-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 18px;
    counter-reset: step;
}

@media (max-width:1100px){
    .how-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:560px){
    .how-grid {
        grid-template-columns: 1fr;
    }
}

.how-card {
    background: #fff;
    border: 1px solid rgba(13,59,102,.08);
    border-radius: 16px;
    padding: 20px 18px 18px;
    box-shadow: 0 8px 24px rgba(13,59,102,.08);
    transform: translateY(8px);
    opacity: .001;
    transition: transform .45s ease, opacity .45s ease, box-shadow .25s ease;
}

.how-card:hover {
    box-shadow: 0 14px 32px rgba(13,59,102,.12);
}

.how-card.in {
    transform: none;
    opacity: 1;
}

.how-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.how-num {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: #0D3B66;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    box-shadow: 0 6px 12px rgba(13,59,102,.18);
}

.how-emoji {
    font-size: 36px;
    line-height: 1;
    filter: drop-shadow(0 8px 14px rgba(13,59,102,.14));
}

@media (min-width:1100px){
    .how-emoji {
        font-size: 40px;
    }
}

/* ============ STICKY CTA (mobile) ============ */
.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 10px calc(16px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(248,251,253,.96) 18%);
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(13,59,102,.08);
    z-index: 60;
}

@media (min-width:901px){
    .sticky-cta {
        display: none;
    }
}

.sticky-cta .btn {
    min-width: 44%;
    text-align: center;
}

/* Motion preference */
@media (prefers-reduced-motion:reduce){
    .how-card {
        transition: none;
    }
}

/* HOTFIX How we work: visibles por defecto y animan si hay JS */
.how-card {
    opacity: 1;
    transform: none;
}

.how-card.in {
    animation: howPop .45s ease both;
}

@keyframes howPop{
    from {
        transform: translateY(8px);
        opacity: .001;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

/* How we work: ocultar numeración nativa del <ol> */
#how-we-work .how-grid {
    list-style: none;

    /* quita números */
    padding-left: 0;

    /* elimina sangría del <ol> */
    margin-left: 0;
}

#how-we-work .how-grid > li {
    list-style: none;

    /* refuerzo para algunos navegadores */
}

#how-we-work .how-grid > li::marker {
    content: '';

    /* fix extra para Safari/iOS */
}

/* WHY Oasis – ajuste de grilla y estilo de iconos */
#why-oasis .why-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
    list-style: none;
    padding-left: 0;
    margin: 0;
}

@media (min-width: 720px){
    #why-oasis .why-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (min-width: 1024px){
    #why-oasis .why-grid {
        grid-template-columns: repeat(3,1fr);
    }
}

/* Oculta cualquier marcador nativo del <ol> (Safari/iOS) */
#why-oasis .why-grid > li::marker {
    content: '';
}

/* Tarjetas */
#why-oasis .why-card {
    background: #fff;
    border: 1px solid var(--border, #e8edf3);
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(13,59,102,.04), 0 8px 24px rgba(13,59,102,.04);
    padding: 18px 18px 16px;
    transition: box-shadow .2s ease, transform .2s ease;
}

#why-oasis .why-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 0 rgba(13,59,102,.05), 0 16px 36px rgba(13,59,102,.08);
}

/* Cabecera de cada tarjeta */
#why-oasis .why-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Número circular (azul) que ya usas en otras secciones */
#why-oasis .why-num {
    counter-increment: why;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #0d3b66;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

#why-oasis .why-num::before {
    content: counter(why);
}

/* Emoji más grande para llamar la atención */
#why-oasis .why-emoji {
    font-size: 24px;
    line-height: 1;
}

/* Ajustes de tipografía y listas */
#why-oasis .why-card h3 {
    margin: 2px 0 6px;
}

#why-oasis .why-card ul {
    margin: 0 0 10px;
    padding-left: 18px;
}

#why-oasis .why-card li {
    margin: 4px 0;
}

/* Botón pequeño coherente */
#why-oasis .btn.small {
    padding: 6px 10px;
    font-size: .9rem;
}

/* ========== Floating menu (mobile) ========== */
.fab-menu {
    position: fixed;
    right: 16px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));

    /* deja espacio a tu barra fija */
    z-index: 10000;
}

@media (max-width: 900px){
    .fab-menu[hidden] {
        display: block;
        visibility: visible;
    }
}

@media (min-width: 901px){
    .fab-menu {
        display: none;
    }
}

/* solo móvil/tablet */
.fab-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    outline: none;
    background: var(--accent, #2ecc71);
    box-shadow: 0 6px 18px rgba(13,59,102,.18), 0 2px 4px rgba(13,59,102,.12);
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}

.fab-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(13,59,102,.22), 0 2px 6px rgba(13,59,102,.14);
}

.fab-btn:active {
    transform: translateY(0);
}

.fab-btn[aria-expanded="true"] {
    background: var(--brand, #0D3B66);
}

/* Ícono hamburguesa */
.fab-icon,

.fab-icon::before,

.fab-icon::after {
    display: block;
    position: relative;
    width: 22px;
    height: 2px;
    margin: 0 auto;
    background: #fff;
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease, top .2s ease;
}

.fab-icon {
    top: 0;
}

.fab-icon::before,

.fab-icon::after {
    content: "";
    position: absolute;
    left: 0;
}

.fab-icon::before {
    top: -7px;
}

.fab-icon::after {
    top: 7px;
}

/* Animación a X cuando está abierto */
.fab-btn[aria-expanded="true"] .fab-icon {
    background: transparent;
}

.fab-btn[aria-expanded="true"] .fab-icon::before {
    top: 0;
    transform: rotate(45deg);
}

.fab-btn[aria-expanded="true"] .fab-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

/* Respetar preferencias de movimiento */
@media (prefers-reduced-motion: reduce){
    .fab-btn,
    
    .fab-icon,
    
    .fab-icon::before,
    
    .fab-icon::after {
        transition: none;
    }
}

/* Opcional: si no tienes barra fija inferior en alguna página y quieres acercar el FAB:
.fab-menu{ bottom:calc(18px + env(safe-area-inset-bottom, 0px)); } */
/* ===== Trust / Proof block ===== */
.trust .logo-row {
    display: flex;
    gap: .5rem .75rem;
    flex-wrap: wrap;
    align-items: center;
    margin: 8px 0 20px;
}

.trust .logo-chip {
    filter: grayscale(1);
    opacity: .85;
    border-radius: 999px;
    background: var(--surface, #f3f6f9);
}

.trust .logo-chip:hover {
    filter: none;
    opacity: 1;
}

.trust-grid {
    align-items: stretch;
}

.quote-card .quote {
    font-size: clamp(1rem, 1vw + .8rem, 1.25rem);
    line-height: 1.4;
    margin-bottom: 12px;
}

.quote-card .quote-meta {
    display: flex;
    gap: .75rem;
    align-items: center;
}

.quote-card .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0d3b66;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
}

.kpi-card {
    padding-block: 18px;
}

.kpi-number {
    font-weight: 800;
    font-size: clamp(2rem, 4vw + .5rem, 3rem);
    line-height: 1;
    letter-spacing: .5px;
}

.kpi-suffix {
    font-weight: 700;
    margin-left: 2px;
}

.kpi-label {
    margin-top: 6px;
    color: var(--muted, #4f5b67);
}

.trust-pack .trust-list {
    display: grid;
    gap: 8px;
    padding-left: 20px;
    margin: 0;
    list-style: disc;
}

/* Responsive tweaks */
@media (max-width: 900px){
    .trust .section-header {
        row-gap: .5rem;
    }

    .kpi-card {
        text-align: center;
    }
}

/* ===== Services: links sin subrayado fijo, con subrayado en hover/focus ===== */
.page-services a:not(.btn):not(.chip):not(.badge):not(.cta-sm):not(.brand) {
    text-decoration: none !important;

    /* fuera subrayado fijo */
    background-image: linear-gradient(currentColor,currentColor);
    background-size: 0% 2px;

    /* subrayado "oculto" */
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .18s ease;
}

/* Mostrar la línea solo al interactuar (mouse o teclado) */
.page-services a:not(.btn):not(.chip):not(.badge):not(.cta-sm):not(.brand):hover,

.page-services a:not(.btn):not(.chip):not(.badge):not(.cta-sm):not(.brand):focus-visible {
    background-size: 100% 2px;
    outline: none;
}

/* Un poco más de presencia en links dentro de tarjetas */
.page-services .card a:not(.btn),

.page-services .service-card a:not(.btn) {
    font-weight: 600;
}

/* Accesibilidad: foco visible en enlaces de texto */
.page-services a:not(.btn):focus-visible {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent, #2bb673) 25%, transparent);
    border-radius: 4px;
}

/* Opcional: flechita con micro-animación si usas .link-arrow */
.page-services .link-arrow::after {
    content: " →";
    transition: transform .15s ease;
}

.page-services .link-arrow:hover::after,

.page-services .link-arrow:focus-visible::after {
    transform: translateX(2px);
}

/* ---------- Emoji sizing across service detail pages ---------- */
/* Ajusta un solo número y todo se reescala */
:root {
    --emoji-scale: 1.35;

    /* 1.25–1.6 suele verse bien */
    --emoji-y-nudge: 1px;

    /* baja/sube un poquito el emoji */
}

/* Caso A: el emoji está en su propio span (.emoji / .icon) */
.service-industries .emoji,

.service-industries .icon,

.industries-grid .emoji,

.industries-grid .icon,

.industries-list .emoji,

.industries-list .icon {
    font-size: calc(1em * var(--emoji-scale));
    line-height: 1;
    display: inline-block;
    transform: translateY(var(--emoji-y-nudge));
    margin-right: .35rem;
}

/* Caso B: el emoji está escrito “a pelo” como primer carácter del título/enlace */
/* Usamos ::first-letter para sobredimensionarlo únicamente en esos bloques */
.service-industries .industries-grid a::first-letter,

.service-industries .industries-grid h3::first-letter,

.service-industries .industries-grid h4::first-letter,

.industries-grid a::first-letter,

.industries-grid h3::first-letter,

.industries-grid h4::first-letter,

.industries-list a::first-letter,

.industries-list h3::first-letter,

.industries-list h4::first-letter {
    font-size: calc(1em * var(--emoji-scale));
    line-height: 1;
}

/* Un pelín de espacio cuando el emoji va pegado al texto (fallback) */
.industries-grid a,

.industries-grid h3,

.industries-grid h4,

.industries-list a,

.industries-list h3,

.industries-list h4 {
    text-decoration-thickness: 2px;

    /* opcional: subrayado consistente */
    text-underline-offset: 2px;
}

/* Si el título es enlace, que no cambie de color sólo el emoji */
.industries-grid a,

.industries-list a {
    color: inherit;
}

/* ===== Bigger emojis in service/industry blocks (strong override) ===== */
:root {
    /* Sube/baja este multiplicador global */
    --emoji-scale: 2.05;

    /* prueba 2.0–2.4 */
    --emoji-y-nudge: 2px;

    /* ajusta la línea base del emoji */
}

/* 1) Cuando el emoji está en su propio span */
:where(.industries-grid, .industries-list, .service-industries, .section--industries)  :is(.emoji, .icon, .emoji-bullet) {
    font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif !important;
    font-size: calc(1em * var(--emoji-scale)) !important;
    line-height: 1 !important;
    display: inline-block !important;
    transform: translateY(var(--emoji-y-nudge)) !important;
    margin-right: .5rem !important;
}

/* 2) Cuando el emoji está escrito directamente al inicio del título/enlace */
:where(.industries-grid, .industries-list, .service-industries, .section--industries)  :is(h2,h3,h4,a,li)::first-letter {
    font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",inherit !important;
    font-size: calc(1em * var(--emoji-scale)) !important;
    line-height: 1 !important;
}

/* Asegura buen espaciado y que el color del enlace no afecte al emoji */
:where(.industries-grid, .industries-list, .service-industries)  :is(h3,h4,a) {
    color: inherit !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

/* Opcional: en pantallas grandes podemos subir un poco más */
@media (min-width: 1200px){
    :root {
        --emoji-scale: 2.25;
    }
}

/* ========= Links sin subrayado por defecto (Industries + Services) ========= */
/* Cubre los hubs y sus listas/tarjetas */
:where(#cards, .industry-section, .industries-grid, .industries-list, .service-sections, .services-hub, .section--industries) a {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Subrayado sólo en hover/enfoque (accesible) */
:where(#cards, .industry-section, .industries-grid, .industries-list, .service-sections, .services-hub, .section--industries) a:hover,

:where(#cards, .industry-section, .industries-grid, .industries-list, .service-sections, .services-hub, .section--industries) a:focus,

:where(#cards, .industry-section, .industries-grid, .industries-list, .service-sections, .services-hub, .section--industries) a:focus-visible {
    text-decoration: underline !important;
    text-underline-offset: 2px;
    text-decoration-thickness: 2px;
}

/* Asegura que botones/“chips” nunca se subrayen */
a.btn,

.btn,

.chip,

.badge,

.cta-sm {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Títulos enlazados en las tarjetas (por si el tema fuerza el subrayado) */
:where(#cards, .industry-section, .industries-grid, .industries-list) :is(h2,h3,h4) > a {
    text-decoration: none !important;
}

:where(#cards, .industry-section, .industries-grid, .industries-list) :is(h2,h3,h4) > a:hover,

:where(#cards, .industry-section, .industries-grid, .industries-list) :is(h2,h3,h4) > a:focus {
    text-decoration: underline !important;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: .6rem 1rem;
    background: #0D3B66;
    color: #fff;
    border-radius: 8px;
    z-index: 9999;
}

.skip-link:focus {
    left: 16px;
    top: 16px;
    outline: 0;
}

:focus-visible {
    outline: 3px solid #0D3B66;
    outline-offset: 2px;
}

/* Floating call button (mobile) */
.fab-call {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #2BB673;

    /* green brand */
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
    z-index: 9999;
    padding-bottom: env(safe-area-inset-bottom, 0);
    transition: transform .15s ease, filter .15s ease;
}

.fab-call:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

@media (min-width: 960px){
    .fab-call {
        display: none;
    }
}

/* Kill any floating FAB that might be lingering */
.fab-call,

.fab-menu,

.mobile-fab,

.floating-cta,

.floating-menu {
    display: none !important;
}

/* ===== Announcement / Notice Bar (Home) ===== */
.site-notice {
    position: sticky;

    /* queda visible al hacer scroll */
    top: 0;
    z-index: 1100;
    background: #E9F9EE;
    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

.site-notice .notice-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
}

.site-notice .notice-text {
    color: #0b3a66;
    font-size: .95rem;
    line-height: 1.35;
}

.site-notice .notice-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-notice .btn.btn-sm {
    padding: 6px 10px;
    font-size: .9rem;
}

/* variante vendor (ligero gradiente) */
.site-notice--vendor {
    background: linear-gradient(0deg,#E9F9EE 0%,#F4FFF7 100%);
}

.notice-badge {
    display: inline-block;
    background: #17a34a;
    color: #fff;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 999px;
    padding: 3px 8px;
    margin-right: 8px;
    font-size: .75rem;
    vertical-align: middle;
}

.notice-list {
    display: inline-block;
    margin-left: 8px;
    color: #0b3a66;
    opacity: .78;
    font-size: .9rem;
}

.notice-close {
    appearance: none;
    border: 0;
    background: #0b3a66;
    color: #fff;
    font-weight: 700;
    border-radius: 8px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    transition: transform .15s ease, opacity .2s ease;
}

.notice-close:hover {
    transform: scale(1.05);
    opacity: .9;
}

/* Responsive */
@media (max-width:900px){
    .site-notice .notice-inner {
        flex-wrap: wrap;
        gap: 10px;
    }

    .site-notice .notice-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width:640px){
    .notice-list {
        display: none;
    }

    /* no alargamos demasiado la barra en móvil */
}

/* Active link (top nav + mobile) */
.nav-links a.is-active {
    font-weight: 700;
}

#mobile-nav .container a.is-active {
    font-weight: 700;
}

/* BIG industry emojis */
.i-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-right: .6rem;
    filter: drop-shadow(0 1px 0 rgba(13,59,102,.06));
    font-size: 2.2rem;

    /* móvil */
}

@media (min-width:640px){
    .i-emoji {
        font-size: 2.8rem;
    }
}

/* tablet */
@media (min-width:1024px){
    .i-emoji {
        font-size: 3.2rem;
    }
}

/* desktop */
@media (min-width:1400px){
    .i-emoji {
        font-size: 3.6rem;
    }
}

/* desktop grande */
/* Asegura alineación bonita cuando el emoji va antes del título */
h3 .i-emoji,

h4 .i-emoji {
    transform: translateY(2px);
}

/* BIG industry emojis (reforzado) */
.i-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-right: .6rem;
    filter: drop-shadow(0 1px 0 rgba(13,59,102,.06));
    font-size: 2.6rem !important;

    /* móvil */
}

@media (min-width:640px){
    .i-emoji {
        font-size: 3.2rem !important;
    }
}

/* tablet */
@media (min-width:1024px){
    .i-emoji {
        font-size: 3.6rem !important;
    }
}

/* desktop */
@media (min-width:1400px){
    .i-emoji {
        font-size: 4.0rem !important;
    }
}

/* XL */
/* BIG industry emojis (reforzado) */
.i-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-right: .6rem;
    filter: drop-shadow(0 1px 0 rgba(13,59,102,.06));
    font-size: 2.8rem !important;

    /* móvil */
}

@media (min-width:640px){
    .i-emoji {
        font-size: 3.4rem !important;
    }
}

/* tablet */
@media (min-width:1024px){
    .i-emoji {
        font-size: 3.8rem !important;
    }
}

/* desktop */
@media (min-width:1400px){
    .i-emoji {
        font-size: 4.2rem !important;
    }
}

/* XL */
h3 .i-emoji,

h4 .i-emoji {
    transform: translateY(2px);
}

/* BIG industry emojis (refuerzo final) */
.i-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-right: .6rem;
    filter: drop-shadow(0 1px 0 rgba(13,59,102,.06));
    font-size: 2.8rem !important;

    /* móvil */
}

@media (min-width:640px){
    .i-emoji {
        font-size: 3.4rem !important;
    }
}

/* tablet */
@media (min-width:1024px){
    .i-emoji {
        font-size: 3.8rem !important;
    }
}

/* desktop */
@media (min-width:1400px){
    .i-emoji {
        font-size: 4.2rem !important;
    }
}

/* XL */
h3 .i-emoji,

h4 .i-emoji {
    transform: translateY(2px);
}

/* ===== Industries | tamaño grande para los emojis de las tarjetas ===== */
#cards .industry-card {
    display: grid;

    /* icono a la izquierda, texto a la derecha */
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: .75rem;
}

#cards .industry-icon {
    font-size: 2.8rem !important;

    /* móvil */
    line-height: 1 !important;
    display: inline-block !important;
    transform: translateY(2px);
    filter: drop-shadow(0 1px 0 rgba(13,59,102,.06));
    margin-right: .25rem;
}

/* ===== Industries: icono grande bien alineado ===== */
#cards .industry-card {
    display: grid;
    grid-template-columns: 64px 1fr;

    /* columna del icono + columna de texto */
    align-items: start;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius);
    padding: 12px 12px 10px;
}

#cards .industry-icon {
    font-size: 3.2rem;

    /* tamaño base desktop */
    line-height: 1;
    display: inline-block;
    transform: translateY(2px);
    filter: drop-shadow(0 1px 0 rgba(13,59,102,.06));
}

#cards .industry-card h3,

#cards .industry-card p,

#cards .industry-card ul {
    grid-column: 2;

    /* todo el contenido va en la 2ª columna */
    margin: 0;
}

#cards .industry-card h3 {
    margin-top: 2px;
}

#cards .industry-card p {
    margin: 6px 0 8px;
    color: var(--muted);
}

#cards .industry-card ul {
    padding-left: 18px;
}

@media (max-width: 900px){
    #cards .industry-card {
        grid-template-columns: 56px 1fr;
    }

    #cards .industry-icon {
        font-size: 2.8rem;
    }
}

@media (max-width: 640px){
    #cards .industry-card {
        grid-template-columns: 48px 1fr;
    }

    #cards .industry-icon {
        font-size: 2.4rem;
    }
}

/* === Services > Industries: hacer grandes todos los emojis === */
/* Afecta cualquier tarjeta con .industry-card y su .industry-icon, en todo el sitio */
:where(.section, .strip) :is(.industry-card) :is(.industry-icon, .icon, .emoji) {
    font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif !important;
    font-size: clamp(2.1rem, 2.4vw + 1rem, 3.2rem) !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(2px) !important;
    margin-right: .5rem !important;
}

/* Asegura una buena alineación de la tarjeta (icono + título/texto) */
:where(.industry-card) {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: .75rem;
}

:where(.industry-card) h3 {
    margin: 0 0 .25rem;
}

/* ===== Services > Industries: fijar layout 2 columnas y alinear iconos ===== */
/* 1) Solo tarjetas que NO son enlaces (las de servicios son <div>, en la página
      de Industries principal las tarjetas son <a> y no queremos tocarlas) */
:where(.section) :where(.grid) > .industry-card:not(a) {
    display: grid !important;
    grid-template-columns: 3.2rem 1fr;

    /* ancho fijo para el icono */
    align-items: start;
    column-gap: .8rem;
}

/* 2) El icono grande, alineado a la línea base y con ancho “caja” estable */
:where(.section) :where(.grid) > .industry-card:not(a) .industry-icon {
    font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif !important;
    font-size: clamp(2.2rem, 2.2vw + 1rem, 3rem) !important;
    line-height: 1 !important;
    display: grid !important;
    place-items: center;
    width: 3.2rem;

    /* coincide con la 1ª columna */
    min-width: 3.2rem;
    height: 3.2rem;

    /* da “caja” al emoji y alinea todas las filas */
    transform: translateY(2px);
}

/* 3) Ajustes tipográficos dentro de la tarjeta */
:where(.section) :where(.grid) > .industry-card:not(a) h3 {
    margin: 0 0 .25rem;
}

:where(.section) :where(.grid) > .industry-card:not(a) p {
    margin: 0;
}

/* 4) Asegura que las tarjetas/enlaces de la página Industries NO cambien */
a.industry-card {
    display: block;
}

/* ===== FIX: Services > Industries — icono a la col.1 y texto a la col.2 ===== */
:where(.section) :where(.grid) > .industry-card:not(a) {
    display: grid !important;
    grid-template-columns: 3.2rem 1fr;

    /* icono | contenido */
    grid-auto-rows: min-content;
    column-gap: .8rem;
    row-gap: .25rem;
}

/* Icono ocupa la primera columna y “dos filas” (título + párrafo) */
:where(.section) :where(.grid) > .industry-card:not(a) .industry-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: grid !important;
    place-items: center;
    width: 3.2rem;
    min-width: 3.2rem;
    height: 3.2rem;
    font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif !important;
    font-size: clamp(2.2rem, 2.2vw + 1rem, 3rem) !important;
    line-height: 1 !important;
    transform: translateY(2px);
}

/* Título y párrafo siempre en la columna 2 (ancha) */
:where(.section) :where(.grid) > .industry-card:not(a) h3,

:where(.section) :where(.grid) > .industry-card:not(a) p {
    grid-column: 2;
}

:where(.section) :where(.grid) > .industry-card:not(a) h3 {
    margin: 0 0 .25rem;
}

:where(.section) :where(.grid) > .industry-card:not(a) p {
    margin: 0;
}

/* ===== Service pages: Industry cards (consistent big emoji) ===== */
.service-industries .industry-card {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 12px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 14px;
    box-shadow: var(--shadow-1);
}

.service-industries .industry-icon {
    font-size: 40px;
    line-height: 1;
    margin-top: .125rem;
    filter: drop-shadow(0 1px 0 rgba(13,59,102,.06));
}

.service-industries h3 {
    margin: 0;
}

.service-industries p.muted {
    margin: .25rem 0 0;
}

@media (max-width:720px){
    .service-industries .industry-icon {
        font-size: 36px;
    }
}

<style>
  /* Emojis como iconos en Home (Services grid) */
  .svc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.svc-icon .svc-emoji {
    font-size: 36px;
    line-height: 1;
}

@media (min-width:1024px){
    .svc-icon .svc-emoji {
        font-size: 38px;
    }
}

</style>
<style>
/* ——— Industries Marquee ——— */
.section--industries .section-header .kicker {
    letter-spacing: .08em;
}

.ind-marquee {
    position: relative;
    overflow: hidden;
    padding: .5rem 0;
    --fade: 72px;

    /* desvanecido en bordes */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}

.ind-track {
    display: flex;
    gap: 12px;
    align-items: center;
    width: max-content;

    /* se ajusta con JS */
    animation: ind-scroll var(--ind-duration, 40s) linear infinite;
}

.ind-marquee:hover .ind-track {
    animation-play-state: paused;
}

@keyframes ind-scroll{
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.ind-chip {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1rem;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    white-space: nowrap;
    font-weight: 700;
    color: #0D2B4A;
    text-decoration: none;
}

.ind-chip .dot {
    width: .55rem;
    height: .55rem;
    border-radius: 9999px;
    background: #9aa3ad;
    flex: 0 0 auto;
}

.ind-chip .emoji {
    font-size: 1.05rem;
    line-height: 1;
}

/* Responsive + accesibilidad */
@media (max-width:680px){
    .ind-chip {
        padding: .55rem .85rem;
    }

    .section--industries h2 {
        font-size: 1.75rem;
    }
}

/* Respeta reduced-motion */
@media (prefers-reduced-motion: reduce){
    .ind-track {
        animation: none !important;
    }

    .ind-marquee {
        -webkit-mask-image: none;
        mask-image: none;
        overflow: auto;
    }
}

</style>
<style>
/* ——— Industries Marquee ——— */
.section--industries .section-header .kicker {
    letter-spacing: .08em;
}

.ind-marquee {
    position: relative;
    overflow: hidden;
    padding: .5rem 0;
    --fade: 72px;

    /* desvanecido en bordes */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}

.ind-track {
    display: flex;
    gap: 12px;
    align-items: center;
    width: max-content;

    /* se ajusta con JS */
    animation: ind-scroll var(--ind-duration, 40s) linear infinite;
}

.ind-marquee:hover .ind-track {
    animation-play-state: paused;
}

@keyframes ind-scroll{
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.ind-chip {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1rem;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    white-space: nowrap;
    font-weight: 700;
    color: #0D2B4A;
    text-decoration: none;
}

.ind-chip .dot {
    width: .55rem;
    height: .55rem;
    border-radius: 9999px;
    background: #9aa3ad;
    flex: 0 0 auto;
}

.ind-chip .emoji {
    font-size: 1.05rem;
    line-height: 1;
}

/* Responsive + accesibilidad */
@media (max-width:680px){
    .ind-chip {
        padding: .55rem .85rem;
    }

    .section--industries h2 {
        font-size: 1.75rem;
    }
}

/* Respeta reduced-motion */
@media (prefers-reduced-motion: reduce){
    .ind-track {
        animation: none !important;
    }

    .ind-marquee {
        -webkit-mask-image: none;
        mask-image: none;
        overflow: auto;
    }
}

</style>
/* ====== Brand size overrides ====== */
.site-header .brand {
    background: transparent;
    border: 0;
    padding: 0;
    line-height: 0;
    display: flex;
    align-items: center;
}

/* Tamaño del logo (más grande y legible) */
.brand-lockup {
    height: 44px !important;

    /* antes: 32px */
    width: auto;
    display: block;
}

/* Ajuste para móvil */
@media (max-width: 991px){
    .brand-lockup {
        height: 30px !important;
    }
}

/* Por si otras reglas lo limitan */
.site-header .brand .brand-logo {
    display: none !important;
}

/* oculta el span viejo, si aparece */
/* ===== Header / Brand ===== */
.site-header {
    background: #fff;
}

/* se queda blanco */
.site-header .brand {
    display: flex;
    align-items: center;
    padding: 0;
    border: 0;
    line-height: 0;
    background: transparent;
}

/* Aumenta el tamaño del logo y quita límites previos */
.brand-lockup {
    height: 56px !important;

    /* ↑ antes estaba en 32px */
    max-height: none !important;
    width: auto;
    display: block;

    /* Contraste rápido: un delineado suave alrededor del SVG */
    filter: drop-shadow(0 0 1px rgba(0,0,0,.35));
}

@media (max-width:1200px){
    .brand-lockup {
        height: 48px !important;
    }
}

@media (max-width:991px){
    .brand-lockup {
        height: 34px !important;
    }
}

/* Si existe el span viejo del logo, ocultarlo */
.site-header .brand .brand-logo {
    display: none !important;
}

/* Ajustes por si el menú se aprieta con el logo más grande */
@media (min-width:992px){
    .site-nav ul {
        gap: 18px;
    }

    /* reduce separación */
    .site-nav a {
        padding: 0 8px;
    }

    /* o baja el padding */
}

/* ===== THEME: Header oscuro ===== */
.site-header {
    background: linear-gradient(90deg,#0F2038 0%, #0B1830 100%);

    /* azul marino */
    box-shadow: 0 6px 24px rgba(0,0,0,.15);
}

/* Links del menú en claro */
.site-header .site-nav a {
    color: #E6F0FF;

    /* texto claro */
    transition: color .2s ease;
}

.site-header .site-nav a:hover,

.site-header .site-nav .active > a {
    color: #ffffff;
}

/* Botón “Submit a Project” encima del fondo oscuro */
.site-header .btn,

.site-header .button,

.site-header .cta,

.site-header a.button-primary {
    background: #28B34B;
    color: #fff;
    border: none;
    box-shadow: 0 8px 24px rgba(40,179,75,.35);
}

.site-header .btn:hover,

.site-header .button:hover,

.site-header .cta:hover,

.site-header a.button-primary:hover {
    filter: brightness(1.05);
}

/* Logo: tamaño y limpieza (sin sombra ahora) */
.brand-lockup {
    height: 56px !important;

    /* desktop */
    width: auto;
    display: block;
    filter: none !important;

    /* quitamos drop-shadow del paso anterior */
}

@media (max-width:1200px){
    .brand-lockup {
        height: 48px !important;
    }
}

@media (max-width:991px){
    .brand-lockup {
        height: 34px !important;
    }
}

/* Iconos/hamburguesa en móvil (si aplica) */
.nav-toggle,
.hamburger,
.hamburger span {
    background: #fff !important;
}

/* ===== Header: azul marino suave (ligero, no tan oscuro) ===== */
.site-header {
    /* cambia estos 2 colores si lo quieres más claro/oscuro */
    background: linear-gradient(90deg, #1E2E46 0%, #15253B 100%);
    box-shadow: 0 6px 24px rgba(0,0,0,.18);
    border-bottom: 0;
}

/* Navegación sobre header oscuro */
.site-header .site-nav a {
    color: #E8F1FF;
    transition: color .2s ease;
}

.site-header .site-nav a:hover,

.site-header .site-nav .active > a {
    color: #FFFFFF;
}

/* Botón CTA */
.site-header .btn,

.site-header a.button-primary {
    background: #28B34B;
    color: #fff;
    border: none;
    box-shadow: 0 8px 24px rgba(40,179,75,.35);
}

.site-header .btn:hover,

.site-header a.button-primary:hover {
    filter: brightness(1.05);
}

/* Logo: tamaño legible y sin sombras */
.brand-lockup {
    height: 56px !important;

    /* desktop */
    width: auto;
    display: block;
    filter: none !important;

    /* por si antes agregamos drop-shadow */
}

@media (max-width:1200px){
    .brand-lockup {
        height: 48px !important;
    }
}

@media (max-width:991px){
    .brand-lockup {
        height: 34px !important;
    }
}

/* Hamburguesa/iconos en móvil */
.nav-toggle,
.hamburger,
.hamburger span {
    background: #fff !important;
}

/* Por compatibilidad: oculta el span del logo si quedó en alguna página */
.site-header .brand .brand-logo {
    display: none !important;
}

/* ==== NAV: alto contraste sobre header oscuro ==== */
.site-header .site-nav a {
    color: #F3F8FF !important;

    /* casi blanco */
    font-weight: 600;
    letter-spacing: .01em;
    text-shadow: 0 1px 1px rgba(0,0,0,.25);

    /* define el borde del texto */
    position: relative;
    transition: color .15s ease;
}

.site-header .site-nav a:hover,

.site-header .site-nav a:focus,

.site-header .site-nav .active > a {
    color: #FFFFFF !important;
}

/* Indicador de hover/activo debajo del link */
.site-header .site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 2px;
    background: #28B34B;

    /* verde de la marca */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .18s ease;
}

.site-header .site-nav a:hover::after,

.site-header .site-nav .active > a::after {
    transform: scaleX(1);
}

/* Un poco más de separación si lo necesitas */
@media (min-width:992px){
    .site-nav ul {
        gap: 20px;
    }

    .site-nav a {
        padding: 0 8px;
    }
}

/* ==== NAV: blanco brillante sobre header ==== */
.site-header .site-nav a {
    color: #FFFFFF !important;

    /* blanco sólido */
    font-weight: 600;
    letter-spacing: .01em;
    text-shadow: 0 1px 1px rgba(0,0,0,.35);

    /* define el borde en fondo oscuro */
    transition: opacity .15s ease;
    opacity: .95;

    /* un pelín de suavidad */
}

.site-header .site-nav a:hover,

.site-header .site-nav a:focus,

.site-header .site-nav .active > a {
    opacity: 1;
}

/* Indicador verde bajo el link (opcional) */
.site-header .site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 2px;
    background: #28B34B;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .18s ease;
}

.site-header .site-nav a:hover::after,

.site-header .site-nav .active > a::after {
    transform: scaleX(1);
}

/* Mobile hamburger en blanco */
.nav-toggle,
.hamburger,
.hamburger span {
    background: #FFFFFF !important;
}

/* Por si hay submenús */
.site-header .site-nav ul ul a {
    color: #FFFFFF !important;
}

/* === OASIS header fixes (auto-applied) === */
.site-header {
    background: linear-gradient(90deg, #1E2E46 0%, #15253B 100%);
    box-shadow: 0 6px 24px rgba(0,0,0,.18);
    border-bottom: 0;
}

.site-header .brand {
    display: flex;
    align-items: center;
    padding: 0;
    line-height: 0;
    background: transparent;
    border: 0;
}

.brand-lockup {
    height: 56px !important;
    width: auto;
    display: block !important;
}

@media (max-width:1200px){
    .brand-lockup {
        height: 48px !important;
    }
}

@media (max-width:991px){
    .brand-lockup {
        height: 34px !important;
    }
}

/* Menu text in white across different nav class names */
.site-header .site-nav a,

.site-header .nav-links a,

.site-header nav a {
    color: #FFFFFF !important;
    font-weight: 600;
    letter-spacing: .01em;
    text-shadow: 0 1px 1px rgba(0,0,0,.35);
    position: relative;
    transition: opacity .15s ease, color .15s ease;
}

.site-header .site-nav a:hover,

.site-header .nav-links a:hover,

.site-header nav a:hover,

.site-header .site-nav .active > a,

.site-header .nav-links .active > a {
    color: #FFFFFF !important;
    opacity: 1;
}

.nav-toggle,
.hamburger,
.hamburger span {
    background: #FFFFFF !important;
}

.site-header .brand .brand-logo {
    display: none !important;
}

/* === end header fixes === */
/* === HOTFIX: force dark header even if a page injects inline `background: unset` === */
.site-header {
    background: linear-gradient(90deg, #1E2E46 0%, #15253B 100%) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.18) !important;
    border-bottom: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
}

/* Ensure nav stays bright on all pages */
.site-header .nav-links a,

.site-header .site-nav a,

.site-header nav a {
    color: #FFFFFF !important;
}

/* === Mobile menu button visibility/stacking guard (global) === */
@media (max-width: 980px){
    .menu-btn {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .menu-btn span {
        width: 24px;
        height: 2px;
        margin: 0;
        border-radius: 2px;
    }
}

/* ========== Service Hub: icon tiles como en index (solo CSS) ========== */
/* Pastilla base */
.svc-card .svc-icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;

    /* tamaño consistente */
    border-radius: 14px;

    /* esquinas suaves tipo iOS */
    font-size: 28px;
    line-height: 1;
    margin-bottom: 8px;

    /* fondo + anillo + relieve (sobrescribibles por --icon-bg) */
    background: var(--icon-bg, #eef2ff);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85),
    0 6px 16px rgba(0,0,0,.08);
    border: 1px solid rgba(0,0,0,.08);
}

/* Sutileza en hover/focus, igual que tus cards */
.svc-card:hover .svc-icon,

.svc-card:focus-visible .svc-icon {
    transform: translateY(-1px);
    transition: transform .18s ease;
}

/* Paleta por servicio (no toca el HTML; usa el href del card) */
.svc-card[href*="janitorial"]           .svc-icon {
    --icon-bg: #E7F1FF;
}

/* azul suave */
.svc-card[href*="landscaping"]          .svc-icon {
    --icon-bg: #EAF7ED;
}

/* verde */
.svc-card[href*="snow-removal"]         .svc-icon {
    --icon-bg: #EAF5FF;
}

/* celeste */
.svc-card[href*="electrical"]           .svc-icon {
    --icon-bg: #FFF1E8;
}

/* ámbar */
.svc-card[href*="plumbing"]             .svc-icon {
    --icon-bg: #E8F7FF;
}

/* aqua */
.svc-card[href*="flooring"]             .svc-icon {
    --icon-bg: #EFEAFF;
}

/* lila */
.svc-card[href*="painting"]             .svc-icon {
    --icon-bg: #FFF3E8;
}

/* durazno */
.svc-card[href*="roofing-siding"]       .svc-icon {
    --icon-bg: #FFF0F0;
}

/* rojo suave */
.svc-card[href*="decks-outdoor-builds"] .svc-icon {
    --icon-bg: #F5EFE6;
}

/* madera */
.svc-card[href*="renovation"]           .svc-icon {
    --icon-bg: #EAF3FF;
}

/* azul claro */
.svc-card[href*="general-contractor"]   .svc-icon {
    --icon-bg: #EAF7FF;
}

/* celeste gris */
.svc-card[href*="handyman"]             .svc-icon {
    --icon-bg: #EEF2F7;
}

/* gris azulado */
/* Ajustes responsivos opcionales */
@media (min-width:1024px){
    .svc-card .svc-icon {
        width: 60px;
        height: 60px;
        font-size: 30px;
    }
}