/*
Theme Name: JCI Consultores V3
Author: JCI Consultores
Description: Tema corporativo premium, rápido y responsive para JCI Consultores SAS.
Version: 3.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: jci-consultores
*/
:root{
 --navy:#071c2e;--blue:#0d4775;--sky:#3da2d8;--ink:#152532;--muted:#687987;
 --paper:#f6f8fa;--line:#dfe7ed;--white:#fff;--gold:#c8a96b;
 --container:1200px;--radius:20px;--shadow:0 24px 70px rgba(7,28,46,.11)
}
.custom-logo {
    height: 120px;
    width: 120px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}img{max-width:100%;height:auto}a{text-decoration:none;color:inherit}button,input,textarea{font:inherit}.container{width:min(var(--container),calc(100% - 48px));margin:auto}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:15px;top:15px;z-index:9999;background:#fff;padding:10px}
.topbar{background:var(--navy);color:#b9c9d5;font-size:12px}.topbar-inner{height:36px;display:flex;justify-content:flex-end;align-items:center;gap:22px}.topbar a:hover{color:#fff}
.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(223,231,237,.9);backdrop-filter:blur(16px)}.header-inner{height:82px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;color:var(--navy)}.brand-mark{height:46px;min-width:52px;padding:0 9px;border-radius:12px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:950;font-size:13px;letter-spacing:.4px}.brand-copy{font-weight:850;font-size:17px;line-height:1}.brand-copy small{display:block;color:#71818d;font-size:9px;letter-spacing:2.4px;margin-top:6px}.main-nav ul{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}.main-nav a{font-size:13px;font-weight:750;color:#3a4d5d}.main-nav a:hover{color:var(--blue)}.main-nav .nav-cta{color:#fff;background:var(--navy);padding:12px 18px;border-radius:10px}.menu-toggle{display:none;border:0;background:none;font-size:28px;color:var(--navy)}
.hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:104px 0 105px}.hero:before{content:"";position:absolute;width:760px;height:760px;border:1px solid rgba(255,255,255,.07);border-radius:50%;right:-300px;top:-360px}.hero:after{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(61,162,216,.16);border-radius:50%;right:-170px;bottom:-250px}.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:80px;align-items:center}.hero-kicker{display:flex;align-items:center;gap:11px;color:#8bc7e6;text-transform:uppercase;font-size:11px;font-weight:850;letter-spacing:2px;margin-bottom:22px}.hero-kicker:before{content:"";width:36px;height:1px;background:#8bc7e6}.hero h1{font-size:clamp(45px,5.4vw,74px);line-height:1.01;letter-spacing:-3.5px;margin:0 0 24px;max-width:760px;color:#fff}.hero h1 em{font-style:normal;color:#8bc7e6}.hero-lead{font-size:18px;line-height:1.75;color:#b7c8d4;max-width:650px;margin:0 0 34px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:13px 21px;border-radius:10px;font-size:13px;font-weight:850;transition:transform .2s,background .2s,border .2s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:#fff;color:var(--navy)}.btn-primary:hover{background:#eef6fb}.btn-ghost{border:1px solid rgba(255,255,255,.28);color:#fff}.hero-side{min-height:450px;display:flex;align-items:flex-end;position:relative}.hero-card{width:100%;padding:34px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035));border-radius:26px;backdrop-filter:blur(8px)}.hero-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:100px}.hero-monogram{font-size:82px;font-weight:950;letter-spacing:-7px;line-height:.8;color:#fff}.hero-dot{width:10px;height:10px;border-radius:50%;background:#8bc7e6;box-shadow:0 0 0 8px rgba(139,199,230,.12)}.hero-card h2{color:#fff;font-size:25px;margin:0 0 7px}.hero-card p{color:#9fb4c3;font-size:14px;margin:0;max-width:400px}.hero-card-line{height:1px;background:rgba(255,255,255,.13);margin-top:25px}
.intro{padding:0;background:#fff}.intro-grid{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--line);border-bottom:1px solid var(--line)}.intro-item{padding:27px 30px;border-right:1px solid var(--line)}.intro-number{font-size:11px;color:var(--sky);font-weight:900;letter-spacing:1.5px}.intro-item h3{font-size:16px;color:var(--navy);margin:7px 0 4px}.intro-item p{font-size:13px;color:var(--muted);margin:0}
.section{padding:108px 0}.section-soft{background:var(--paper)}.section-kicker{color:var(--blue);text-transform:uppercase;letter-spacing:2px;font-size:11px;font-weight:900;margin-bottom:12px;display:flex;align-items:center;gap:10px}.section-kicker:before{content:"";width:28px;height:1px;background:var(--sky)}.section-title{font-size:clamp(34px,4vw,51px);line-height:1.05;letter-spacing:-2.2px;color:var(--navy);margin:0 0 17px}.section-desc{font-size:16px;color:var(--muted);max-width:670px;margin:0}.center{text-align:center;margin-left:auto;margin-right:auto}.center .section-kicker{justify-content:center}.services-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:48px}.services-head .section-desc{max-width:520px}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.service{padding:34px 31px;min-height:260px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;background:#fff;transition:.22s}.service:hover{background:#f8fbfd}.service-num{font-size:11px;color:#7e8e9a;font-weight:850;letter-spacing:1.5px}.service h3{font-size:21px;color:var(--navy);margin:34px 0 10px}.service p{font-size:13px;color:var(--muted);max-width:320px;margin:0 0 25px}.service a{font-size:12px;color:var(--blue);font-weight:850}.service-arrow{position:absolute;right:27px;bottom:27px;color:#9eacb6;font-size:20px}
.story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:center}.story-panel{min-height:500px;border-radius:25px;background:linear-gradient(145deg,#0c426c,#071c2e);padding:40px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow)}.story-panel:before{content:"";position:absolute;width:500px;height:500px;border:1px solid rgba(255,255,255,.09);border-radius:50%;right:-250px;top:-180px}.story-panel .large{position:relative;z-index:2;font-size:110px;line-height:.85;letter-spacing:-9px;font-weight:950}.story-panel .small{position:relative;z-index:2;display:block;margin-top:20px;color:#91b9cf;letter-spacing:2px;font-size:11px;text-transform:uppercase}.story-copy p{color:var(--muted);font-size:15px}.story-list{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:17px}.story-list li{display:flex;gap:13px;color:#344957;font-weight:700;font-size:14px}.story-list b{color:var(--sky)}
.process-wrap{background:var(--navy);color:#fff}.process-wrap .section-title{color:#fff}.process-wrap .section-desc{color:#a9bdcb}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:50px}.process{padding:0 27px 0 0;margin-right:27px;border-right:1px solid rgba(255,255,255,.13);min-height:170px}.process:last-child{border-right:0}.process-num{color:#8bc7e6;font-size:11px;font-weight:900;letter-spacing:1.5px}.process h3{color:#fff;font-size:18px;margin:20px 0 8px}.process p{color:#93a9b8;font-size:13px;margin:0}
.sectors-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.sector{padding:24px 16px;border:1px solid var(--line);border-radius:13px;background:#fff;text-align:center;font-size:13px;font-weight:800;color:var(--navy);transition:.2s}.sector:hover{border-color:#b9d4e4;transform:translateY(-2px)}
.faq{max-width:880px;margin:40px auto 0}.faq details{border-bottom:1px solid var(--line);padding:20px 4px}.faq summary{cursor:pointer;color:var(--navy);font-size:15px;font-weight:800}.faq p{color:var(--muted);font-size:14px;margin:13px 0 2px}
.cta{background:#eaf3f8;padding:76px 0}.cta-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}.cta h2{font-size:clamp(32px,4vw,49px);letter-spacing:-2px;line-height:1.05;color:var(--navy);margin:0 0 11px}.cta p{color:var(--muted);margin:0;max-width:650px}.cta .btn-primary{background:var(--navy);color:#fff}
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}.contact-info{display:grid;gap:23px;margin-top:30px}.contact-item{display:flex;gap:14px}.contact-icon{width:42px;height:42px;flex:0 0 42px;background:#edf5fa;border-radius:11px;display:grid;place-items:center;color:var(--blue);font-weight:900}.contact-item strong{display:block;color:var(--navy);font-size:13px}.contact-item span,.contact-item a{color:var(--muted);font-size:13px}.contact-box{border:1px solid var(--line);border-radius:22px;padding:35px;background:#fff;box-shadow:0 12px 35px rgba(7,28,46,.05)}.contact-box h3{margin:0 0 8px;color:var(--navy);font-size:22px}.contact-box p{color:var(--muted);font-size:14px;margin:0 0 23px}.contact-box .actions{display:flex;gap:10px;flex-wrap:wrap}.contact-box .btn-primary{background:var(--navy);color:#fff}.contact-box .btn-light{border:1px solid var(--line);color:var(--navy)}
.site-footer{background:#061927;color:#9eb2c0;padding:58px 0 25px}.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .9fr;gap:60px}.footer-brand{color:#fff;font-size:19px;font-weight:900}.footer-brand small{display:block;color:#718897;font-size:9px;letter-spacing:2px;margin-top:5px}.footer-text{font-size:13px;max-width:420px;line-height:1.8}.footer-title{font-size:12px;color:#fff;font-weight:850;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px}.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}.site-footer li,.site-footer a{font-size:13px;color:#9eb2c0}.site-footer a:hover{color:#fff}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:45px;padding-top:20px;display:flex;justify-content:space-between;font-size:11px;color:#718897}.entry{padding:90px 0}.entry h1{font-size:50px;color:var(--navy);line-height:1.05}.entry p,.entry li{color:var(--muted)}
@media(max-width:980px){.main-nav{display:none;position:absolute;top:82px;left:0;right:0;background:#fff;padding:15px 24px;border-bottom:1px solid var(--line)}.main-nav.is-open{display:block}.main-nav ul{flex-direction:column;align-items:stretch;gap:2px}.main-nav a{display:block;padding:10px}.menu-toggle{display:block}.hero-grid,.story-grid,.contact-grid{grid-template-columns:1fr;gap:45px}.hero-side{min-height:330px}.services-grid{grid-template-columns:repeat(2,1fr)}.process-grid{grid-template-columns:repeat(2,1fr);gap:30px}.process{border-right:0;border-bottom:1px solid rgba(255,255,255,.13);padding-bottom:28px;margin-right:0}.sectors-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}}
@media(max-width:620px){.container{width:calc(100% - 28px)}.topbar{display:none}.header-inner{height:70px}.main-nav{top:70px}.hero{padding:62px 0 70px}.hero h1{font-size:43px;letter-spacing:-2.3px}.hero-lead{font-size:16px}.hero-side{min-height:280px}.hero-card{padding:27px}.hero-card-top{margin-bottom:65px}.hero-monogram{font-size:66px}.intro-grid,.services-grid,.process-grid,.sectors-grid,.footer-grid,.cta-grid{grid-template-columns:1fr}.intro-grid{border-right:1px solid var(--line)}.intro-item{border-bottom:1px solid var(--line)}.section{padding:72px 0}.services-head{display:block}.services-head .section-desc{margin-top:20px}.story-panel{min-height:310px}.story-panel .large{font-size:80px}.contact-grid{gap:30px}.footer-grid>div:first-child{grid-column:auto}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:5px}}


/* =========================================================
   JCI V3 — REDISEÑO EDITORIAL / MOBILE
   Elimina el aspecto de tarjetas y mejora responsive
   ========================================================= */

/* ---------------------------------------------------------
   SERVICIOS — DESKTOP
   --------------------------------------------------------- */

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

.service {
    min-height: 250px;
    padding: 34px 35px 34px 0;
    margin-right: 35px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    position: relative;
    transition: none;
}

.service:nth-child(odd) {
    border-right: 1px solid var(--line);
}

.service:nth-child(even) {
    padding-left: 35px;
    margin-right: 0;
}

.service:hover {
    background: transparent;
    transform: none;
}

.service-num {
    font-size: 10px;
    letter-spacing: 1.8px;
    color: #82919c;
}

.service h3 {
    font-size: 25px;
    letter-spacing: -.6px;
    margin: 30px 0 10px;
    color: var(--navy);
}

.service p {
    max-width: 400px;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.service a {
    font-size: 12px;
    color: var(--blue);
    font-weight: 850;
}

.service-arrow {
    position: absolute;
    right: 30px;
    bottom: 30px;
    font-size: 24px;
    color: #aab6be;
}

.service:nth-child(even) .service-arrow {
    right: 0;
}


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

.hero {
    min-height: auto;
}

.hero-card {
    border-radius: 0;
    border: 0;
    border-left: 1px solid rgba(255,255,255,.18);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    padding: 10px 0 10px 45px;
}

.hero-card-line {
    background: rgba(255,255,255,.16);
}

.hero-monogram {
    font-size: 100px;
}


/* ---------------------------------------------------------
   INTRO — MÁS EDITORIAL
   --------------------------------------------------------- */

.intro-grid {
    border-left: 0;
    border-bottom: 1px solid var(--line);
}

.intro-item {
    padding: 30px 35px 30px 0;
    border-right: 0;
}

.intro-item + .intro-item {
    border-left: 1px solid var(--line);
    padding-left: 35px;
}


/* ---------------------------------------------------------
   SECTORES
   --------------------------------------------------------- */

.sectors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.sector {
    border-radius: 0;
    border: 0;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 28px 15px;
    background: transparent;
    transition: none;
}

.sector:hover {
    transform: none;
    border-color: var(--line);
    background: var(--paper);
}


/* ---------------------------------------------------------
   CONTACTO
   --------------------------------------------------------- */

.contact-box {
    border-radius: 0;
    box-shadow: none;
    background: var(--paper);
}

.contact-item {
    align-items: flex-start;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 620px) {

    .container {
        width: calc(100% - 32px);
    }


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

    .header-inner {
        height: 68px;
    }

    .brand-mark {
        height: 40px;
        min-width: 46px;
        font-size: 11px;
    }

    .brand-copy {
        font-size: 15px;
    }


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

    .hero {
        padding: 48px 0 52px;
    }

    .hero-grid {
        display: block;
    }

    .hero h1 {
        font-size: 43px;
        line-height: 1.02;
        letter-spacing: -2.5px;
    }

    .hero-lead {
        font-size: 15px;
        line-height: 1.7;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .hero-actions .btn {
        width: 100%;
    }


    /* =================================
       ELIMINAR LA TARJETA DEL HERO
       ================================= */

    .hero-side {
        min-height: auto;
        margin-top: 45px;
    }

    .hero-card {
        padding: 24px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.18);
        border-radius: 0;
    }

    .hero-card-top {
        margin-bottom: 35px;
    }

    .hero-monogram {
        font-size: 58px;
        letter-spacing: -5px;
    }

    .hero-card h2 {
        font-size: 21px;
    }

    .hero-card p {
        font-size: 13px;
    }


    /* ================================
       INTRO
       ================================ */

    .intro-grid {
        display: block;
        border: 0;
    }

    .intro-item,
    .intro-item + .intro-item {
        padding: 22px 0;
        border-left: 0;
        border-bottom: 1px solid var(--line);
    }

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

    .intro-item h3 {
        font-size: 16px;
    }


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

    .section {
        padding: 68px 0;
    }

    .section-title {
        font-size: 35px;
        letter-spacing: -1.7px;
    }

    .section-desc {
        font-size: 14px;
    }


    /* ================================
       SERVICIOS
       ================================ */

    .services-head {
        margin-bottom: 30px;
    }

    .services-grid {
        display: block;
        border: 0;
    }

    .service,
    .service:nth-child(even),
    .service:nth-child(odd) {
        display: block;
        min-height: auto;
        padding: 25px 30px 25px 0;
        margin: 0;
        border: 0;
        border-bottom: 1px solid var(--line);
        background: transparent;
        border-radius: 0;
    }

    .service:first-child {
        border-top: 1px solid var(--line);
    }

    .service h3 {
        font-size: 23px;
        margin: 13px 0 7px;
    }

    .service p {
        font-size: 13px;
        line-height: 1.65;
        margin: 0 35px 14px 0;
    }

    .service a {
        font-size: 11px;
    }

    .service-arrow,
    .service:nth-child(even) .service-arrow {
        right: 0;
        bottom: 27px;
        font-size: 21px;
    }


    /* ================================
       NOSOTROS
       ================================ */

    .story-grid {
        gap: 35px;
    }

    .story-panel {
        min-height: 230px;
        border-radius: 0;
        padding: 28px;
        box-shadow: none;
    }

    .story-panel .large {
        font-size: 70px;
    }

    .story-copy p {
        font-size: 14px;
    }


    /* ================================
       PROCESO
       ================================ */

    .process-grid {
        display: block;
        margin-top: 35px;
    }

    .process {
        min-height: auto;
        padding: 25px 0;
        margin: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.13);
    }

    .process:last-child {
        border-bottom: 0;
    }

    .process h3 {
        margin: 9px 0 5px;
        font-size: 18px;
    }


    /* ================================
       SECTORES
       ================================ */

    .sectors-grid {
        display: block;
        border: 0;
    }

    .sector {
        padding: 18px 0;
        text-align: left;
        border: 0;
        border-bottom: 1px solid var(--line);
        background: transparent;
        border-radius: 0;
    }

    .sector:first-child {
        border-top: 1px solid var(--line);
    }


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

    .faq {
        margin-top: 25px;
    }

    .faq details {
        border-radius: 0;
        padding: 19px 0;
        border-left: 0;
        border-right: 0;
    }

    .faq summary {
        font-size: 14px;
        padding-right: 20px;
    }

    .faq p {
        font-size: 13px;
    }


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

    .cta {
        padding: 58px 0;
    }

    .cta-grid {
        display: block;
    }

    .cta h2 {
        font-size: 35px;
    }

    .cta .btn {
        width: 100%;
        margin-top: 25px;
    }


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

    .contact-grid {
        display: block;
    }

    .contact-box {
        margin-top: 35px;
        border-radius: 0;
        padding: 25px 0;
        background: transparent;
        border: 0;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
    }

    .contact-box .btn {
        width: 100%;
    }


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

    .site-footer {
        padding: 48px 0 25px;
    }

    .footer-grid {
        display: block;
    }

    .footer-grid > div {
        margin-bottom: 30px;
    }

    .footer-bottom {
        margin-top: 30px;
    }
}


/* ==========================================================
   JCI - SERVICIOS
   ESTILO CORPORATIVO AZUL
========================================================== */

.jci-services-strip {
    background: #063b63;
    color: #fff;
    padding: 42px 0;
}

.jci-services-inner {
    display: grid;
    grid-template-columns: 1.35fr 3fr;
    align-items: center;
    gap: 55px;
}


/* ==========================================================
   TITULO
========================================================== */

.jci-services-intro {
    padding-right: 20px;
}

.jci-services-intro h2 {
    margin: 0;

    color: #fff;

    font-size: 30px;
    line-height: 1.15;
    font-weight: 400;

    letter-spacing: -0.8px;
}

.jci-services-intro a {
    display: inline-flex;
    flex-direction: column;

    margin-top: 25px;

    color: #fff;

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

    letter-spacing: .4px;

    text-decoration: none;
}

.jci-services-intro a span {
    width: 72px;
    height: 1px;

    margin-top: 9px;

    background: #fff;
}


/* ==========================================================
   SERVICIOS
========================================================== */

.jci-services-list {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 28px;
}


/* ==========================================================
   SERVICIO
========================================================== */

.jci-service {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;

    color: #fff;

    text-decoration: none;

    transition: opacity .2s ease;
}

.jci-service:hover {
    color: #fff;
    opacity: .72;
}


/* ==========================================================
   ICONOS
========================================================== */

.jci-service-icon {
    width: 48px;
    height: 48px;

    margin-bottom: 13px;

    display: block;
}

.jci-service-icon svg {
    width: 100%;
    height: 100%;

    fill: none;

    stroke: #fff;

    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================
   TEXTO
========================================================== */

.jci-service > span:last-child {
    display: block;

    color: #fff;

    font-size: 13px;

    line-height: 1.18;

    font-weight: 400;
}


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

@media (max-width: 1050px) {

    .jci-services-inner {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .jci-services-intro {
        padding-right: 0;
    }

    .jci-services-list {
        grid-template-columns:
            repeat(5, minmax(80px, 1fr));

        gap: 20px;
    }
}


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

@media (max-width: 800px) {

    .jci-services-list {
        grid-template-columns:
            repeat(3, 1fr);

        gap: 35px 25px;
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .jci-services-strip {
        padding: 38px 0;
    }

    .jci-services-inner {
        display: block;
    }

    .jci-services-intro {
        margin-bottom: 32px;
    }

    .jci-services-intro h2 {
        font-size: 27px;
        line-height: 1.18;
        max-width: 310px;
    }

    .jci-services-intro a {
        margin-top: 20px;
    }

    .jci-services-list {
        display: grid;

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

        gap: 30px 22px;
    }

    .jci-service {
        min-height: 95px;
    }

    .jci-service-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 10px;
    }

    .jci-service > span:last-child {
        font-size: 13px;
        line-height: 1.2;
    }

}

/* ==========================================================
   JCI - SERVICIOS / CARDS MODERNAS
========================================================== */

.services-modern {
    background: #f7f9fb;
}


/* ==========================================================
   CABECERA
========================================================== */

.services-modern-head {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 70px;
    align-items: end;
    margin-bottom: 45px;
}

.services-modern-title .section-title {
    margin-bottom: 0;
}

.services-modern-description {
    padding-bottom: 5px;
}

.services-modern-description p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}


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

.services-modern-list {
    display: grid;

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

    gap: 18px;
}


/* ==========================================================
   CARD
========================================================== */

.service-modern-item {

    min-height: 150px;

    display: grid;

    grid-template-columns: 62px 1fr;

    align-items: center;

    gap: 20px;

    padding: 24px 26px;

    position: relative;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid rgba(12, 48, 70, .07);

    border-radius: 18px;

    color: var(--navy);

    text-decoration: none;

    box-shadow:
        0 5px 15px rgba(16, 45, 65, .055),
        0 18px 45px rgba(16, 45, 65, .045);

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


/* ==========================================================
   EFECTO HOVER
========================================================== */

.service-modern-item:hover {

    color: var(--navy);

    transform: translateY(-4px);

    border-color: rgba(6, 59, 99, .16);

    box-shadow:
        0 10px 25px rgba(16, 45, 65, .09),
        0 25px 55px rgba(16, 45, 65, .08);

}


/* ==========================================================
   DETALLE AZUL LATERAL
========================================================== */

.service-modern-item::before {

    content: "";

    position: absolute;

    left: 0;
    top: 22px;
    bottom: 22px;

    width: 3px;

    border-radius: 0 4px 4px 0;

    background: var(--blue);

    transform: scaleY(.35);

    opacity: .65;

    transition:
        transform .25s ease,
        opacity .25s ease;

}


.service-modern-item:hover::before {

    transform: scaleY(1);

    opacity: 1;

}


/* ==========================================================
   ICONO
========================================================== */

.service-modern-icon {

    width: 58px;
    height: 58px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    color: var(--blue);

    background:
        linear-gradient(
            145deg,
            #edf6fb,
            #f5f9fc
        );

    border: 1px solid rgba(6, 59, 99, .07);

    border-radius: 15px;

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


.service-modern-icon svg {

    width: 27px;
    height: 27px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.55;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.service-modern-item:hover
.service-modern-icon {

    background: var(--blue);

    color: #ffffff;

    transform: scale(1.04);

}


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

.service-modern-content {

    min-width: 0;

}


.service-modern-content strong {

    display: block;

    margin-bottom: 7px;

    color: var(--navy);

    font-size: 19px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -.35px;

}


.service-modern-content small {

    display: block;

    max-width: 440px;

    color: var(--muted);

    font-size: 12.5px;

    line-height: 1.6;

}


/* ==========================================================
   NUMERO
========================================================== */

.service-modern-number {

    position: absolute;

    top: 18px;

    right: 22px;

    color: #c1cbd2;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

}


/* ==========================================================
   ACCIÓN
========================================================== */

.service-modern-action {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 12px;

    color: var(--blue);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .35px;

    text-transform: uppercase;

}


.service-modern-action b {

    font-size: 17px;

    font-weight: 400;

    transition: transform .2s ease;

}


.service-modern-item:hover
.service-modern-action b {

    transform: translateX(5px);

}


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

@media (max-width: 900px) {

    .services-modern-head {

        grid-template-columns: 1fr;

        gap: 18px;

    }


    .services-modern-list {

        grid-template-columns: 1fr;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 620px) {

    .services-modern {

        padding-top: 55px;

        padding-bottom: 55px;

    }


    .services-modern-head {

        display: block;

        margin-bottom: 30px;

    }


    .services-modern-title .section-title {

        font-size: 32px;

        line-height: 1.08;

        letter-spacing: -1.4px;

    }


    .services-modern-description {

        margin-top: 16px;

    }


    .services-modern-description p {

        font-size: 13px;

        line-height: 1.65;

    }


    /* ------------------------------------------
       CARDS
    ------------------------------------------ */

    .services-modern-list {

        grid-template-columns: 1fr;

        gap: 13px;

    }


    .service-modern-item {

        min-height: 125px;

        grid-template-columns: 52px 1fr;

        gap: 16px;

        padding: 21px 20px;

        border-radius: 16px;

        box-shadow:
            0 4px 12px rgba(16, 45, 65, .055),
            0 12px 30px rgba(16, 45, 65, .045);

    }


    .service-modern-item:hover {

        transform: translateY(-2px);

    }


    /* ------------------------------------------
       ICONO
    ------------------------------------------ */

    .service-modern-icon {

        width: 50px;

        height: 50px;

        border-radius: 13px;

    }


    .service-modern-icon svg {

        width: 24px;

        height: 24px;

    }


    /* ------------------------------------------
       TITULO
    ------------------------------------------ */

    .service-modern-content strong {

        font-size: 17px;

        margin-bottom: 5px;

    }


    .service-modern-content small {

        font-size: 11.5px;

        line-height: 1.55;

    }


    /* ------------------------------------------
       NUMERO
    ------------------------------------------ */

    .service-modern-number {

        top: 14px;

        right: 17px;

    }


    /* ------------------------------------------
       ACCION
    ------------------------------------------ */

    .service-modern-action {

        margin-top: 9px;

        font-size: 9px;

    }

}