/* ===================================================================
   custom.css — eMePe (header fijo + HERO + KPI E4∞ + ¿Qué hacemos? + ¿Cómo trabajamos?)
   =================================================================== */

/* ---------------------------
   Utilidades originales
   --------------------------- */
.color-verde-moco{ background-color:#50B6A9 !important; }
.font-sitio{ font-family:"Avenir Next", Helvetica, Arial, sans-serif !important; }
.color-azul-principal{ color:#103651 !important; }
.color-turquesa-secundario{ color:#3bb1bd !important; }
.float-right{ float:right; } .float-left{ float:left; }
.textDecotarionNone{ text-decoration:none; }
.colWidth-1000{ width:1000px;} .colWidth-900{ width:900px;} .colWidth-800{ width:800px;}
.colWidth-700{ width:700px;} .colWidth-600{ width:600px;} .colWidth-500{ width:500px;}
.colWidth-400{ width:400px;} .colWidth-300{ width:300px;} .colWidth-200{ width:200px;} .colWidth-100{ width:100px;}
.card_info{ box-shadow:rgba(0,0,0,.25) 0 54px 55px, rgba(0,0,0,.12) 0 -12px 30px, rgba(0,0,0,.12) 0 4px 6px, rgba(0,0,0,.17) 0 12px 13px, rgba(0,0,0,.09) 0 -3px 5px; }
.card-modulo{ height:250px; display:flex; align-items:center; transform:scale(1.5); justify-content:center; }
.article-card{ width:150px; height:120px; border-radius:12px; overflow:hidden; position:relative; box-shadow:0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); transition:all 300ms; }
.article-card:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22); border-radius:20px; }
.article-card .content{ box-sizing:border-box; width:100%; position:absolute; text-align:center !important; padding:15px 20px 20px; height:100%; bottom:0; background-color:#2a2a72; background-image:linear-gradient(315deg,#2a2a72 0%,#009ffd 74%); }
.article-card .title{ margin:0; font-size:13px; color:#fff; }
.card_titulo_modulo{ display:flex; align-items:center; text-align:center !important; max-width:500px; height:100px; border:1px solid rgba(255,255,255,.25); border-radius:20px; background-color:rgba(255,255,255,.45); box-shadow:0 0 10px 1px rgba(0,0,0,.25); backdrop-filter:blur(5px); }
.blog_post{ background:#fff; max-width:500px; border-radius:10px; box-shadow:1px 1px 2rem rgba(0,0,0,.3); position:relative; height:480px;}
.container_copy{ padding:4rem 1rem 0 3rem; }
.img_pod{ height:120px; width:120px; background-color:#27a770; background-image:linear-gradient(315deg,#27a770 0%,#efefef 74%); box-shadow:1px 1px 2rem rgba(0,0,0,.3); border-radius:100%; position:absolute; left:-10%; top:-13%; display:flex; align-items:center; justify-content:center; }
.img_pod i{ font:normal normal normal 14px/1 flaticon_sitiowebemepe !important; font-size:4em !important; font-weight:bold; }
.container_copy h1{ margin:0 0 1rem 0; font-size:1.5rem; letter-spacing:.5px; }
.container_copy p{ margin:0 0 4.5rem 0; font-size:1rem; line-height:1.45; }

/* ===== Variables ===== */
:root{
    --header-h: 108px;
    --hero-height: calc(100vh - var(--header-h));
    --card-height: 45vh;
    --card-image-factor: .8;
    --brand-blue:#103651;
    --brand-teal:#3bb1bd;
}
@supports (height:100dvh){
    :root{ --hero-height: calc(100dvh - var(--header-h)); }
}

/* ===== Skip link ===== */
.sr-only{
    position:absolute !important; width:1px !important; height:1px !important; padding:0 !important;
    margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important;
    border:0 !important; white-space:nowrap !important;
}
.sr-only:focus, .sr-only:focus-visible{
    position:fixed !important; left:.75rem !important; top:calc(var(--header-h) + .25rem) !important;
    width:auto !important; height:auto !important; margin:0 !important; padding:.5rem .75rem !important;
    clip:auto !important; clip-path:none !important; white-space:normal !important; background:#fff !important;
    color:#0b3b74 !important; font-weight:700 !important; border-radius:.375rem !important;
    box-shadow:0 0 0 3px rgba(13,110,253,.35) !important; z-index:2000 !important;
}

/* ===== Header fijo ===== */
.site-header{
    position:fixed; top:0; left:0; right:0; z-index:1100; background:#ffffff; will-change:transform;
    border-bottom:1px solid rgba(16,54,81,.06);
}
body{ padding-top: var(--header-h); }

header .header-inner{
    display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem;
    padding:.5rem 1rem; max-width:1280px; margin:0 auto;
}
header .brand-left{ display:flex; align-items:center; justify-content:flex-start; }
@media(min-width:1024px){
    header .header-inner{ grid-template-columns:1fr 1fr; }
    header .brand-left{ justify-self:center; }
    header nav[aria-label="Principal"], header .p-link{ justify-self:end; }
}

/* Menú principal / dropdown */
.main-nav{ display:flex; gap:0; align-items:center; }
.main-nav > li{ position:relative; list-style:none; transition:background .18s ease, color .18s ease; }
.main-nav > li:hover, .main-nav > li:focus-within{ background-color:#75b5bc; }
.main-nav > li > a{ color:inherit; display:flex; align-items:center; text-decoration:none; padding:.9rem .9rem; transition:color .18s ease; }
.main-nav > li > a, .main-nav > li > a > span{ color:#0b3b74; }
.main-nav > li:hover > a, .main-nav > li:focus-within > a{ color:#01315a; }
.main-nav > li::before{
    content:""; position:absolute; left:0; top:12%; bottom:12%; width:0; background:#0b3b74; transition:width .18s ease;
    border-radius:0 4px 4px 0; z-index:0;
}
.main-nav > li:hover::before, .main-nav > li:focus-within::before{ width:4px; }
.main-nav > li > a > *{ position:relative; z-index:1; }

/* Submenú desktop */
.main-nav .sub-list{
    min-width:220px; background:#ffffff !important; border-radius:8px; padding:.45rem .35rem;
    border:1px solid rgba(16,54,81,.08); box-shadow:0 8px 24px rgba(0,0,0,.12); display:none; z-index:100; position:absolute;
}
.has-sub.closed > .sub-list{ display:none; }
.has-sub.open   > .sub-list{ display:block; }
.main-nav .sub-list a, .main-nav .sub-list a *{ text-decoration:none !important; color:inherit !important; display:block; }
.main-nav .sub-list a{ position:relative; padding:.6rem .75rem; border-radius:8px; transition:background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }
.main-nav .sub-list a img, .main-nav .sub-list a i{ transition:transform .18s ease, filter .18s ease; }
.main-nav .sub-list a:hover, .main-nav .sub-list a:focus-visible{ background-color:#f2f4f7; color:#01315a !important; transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.08); }
.main-nav .sub-list a:hover img, .main-nav .sub-list a:hover i, .main-nav .sub-list a:focus-visible img, .main-nav .sub-list a:focus-visible i{ transform:scale(1.05); filter:drop-shadow(0 1px 2px rgba(0,0,0,.12)); }

/* ===== HERO (pantalla 1) ===== */
.hero{
    position:relative; width:100%; height:var(--hero-height); min-height:var(--hero-height);
    background-size:cover; background-position:center top; background-repeat:no-repeat; overflow:hidden;
}
.hero::before{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.30); z-index:0; pointer-events:none; }
.hero-inner{
    position:relative; z-index:2; max-width:1280px; margin:0 auto; width:100%; height:100%;
    display:grid; grid-template-columns:minmax(0,58%) minmax(0,36%); grid-template-rows:max-content 1fr;
    column-gap:1.25rem; row-gap:1.25rem; align-items:start; padding:3.5vh 2rem 2rem 2rem;
}
.card-text, .card-image{ background:#fff !important; border-radius:12px; box-shadow:0 18px 45px rgba(6,22,36,.14) !important; display:flex; }
.card-text{ grid-column:1; grid-row:1; height:var(--card-height); min-height:300px; padding:2rem 2.5rem; align-items:center; justify-content:flex-start; }
.card-image{ grid-column:2; grid-row:1; height:calc(var(--card-height) * var(--card-image-factor)); margin-top:calc((var(--card-height) - (var(--card-height) * var(--card-image-factor)))/2); min-height:240px; padding:.5rem; align-items:center; justify-content:center; }
.card-text .hero-text-content{ width:100%; display:grid; row-gap:1.1rem; text-align:left; }
.hero-title{ margin:0 0 1rem 0; color:#072033; font-size:2.6rem; line-height:1.02; font-weight:800; }
@media(min-width:1280px){ .hero-title{ font-size:3.2rem; } }
.hero-lead,.hero-sub{ margin:0 0 .6rem 0; color:#053046; font-size:1.22rem; line-height:1.55; }
.image-wrap{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.hero-right-image{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:8px; box-shadow:0 10px 30px rgba(6,22,36,.08); }

/* KPI E4∞ */
.hero-kpi{ position:static; grid-column:1/-1; grid-row:2; display:flex; justify-content:center; align-self:center; pointer-events:none; padding:0 1rem; }
.kpi-tag{ pointer-events:auto; display:inline-flex; align-items:center; gap:.6rem; color:#072033; background:#fff; border:1px solid rgba(11,59,116,.16); box-shadow:0 6px 16px rgba(0,0,0,.10); border-radius:10px; padding:1rem 1.25rem; font-weight:800; font-size:clamp(1rem,2.1vw,1.22rem); }
.kpi-ico-wrap{ width:1.8em; height:1.8em; border-radius:999px; background:rgba(59,177,189,.18); display:flex; align-items:center; justify-content:center; flex:0 0 auto; box-shadow:0 0 0 6px rgba(59,177,189,.08); }
.kpi-ico{ width:1.1em; height:1.1em; } .kpi-ico path{ fill:var(--brand-teal); }
.kpi-text code{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; background:rgba(59,177,189,.10); padding:.12em .3em; border-radius:6px; font-weight:800; }

/* ===== ¿QUÉ HACEMOS? (pantalla 2) ===== */
.section-full{ height:calc(100vh - var(--header-h)); }
@supports (height:100dvh){ .section-full{ height:calc(100dvh - var(--header-h)); } }
.whatwedo{ background:#fff; }
.whatwedo-inner{ width:100%; max-width:1280px; margin:0 auto; padding:5vh 1.25rem 3rem; height:100%; display:grid; grid-template-rows:auto auto 1fr; }
.title{ text-align:center; font-size:clamp(1.8rem,3.2vw,2.6rem); line-height:1.1; margin:0; font-weight:800; color:var(--brand-blue); }
.lead{ max-width:min(820px,92%); margin:1rem auto 2.2rem; text-align:center; font-size:clamp(1.02rem,1.2vw,1.18rem); line-height:1.6; color:#1a4663; opacity:.95; }

.grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:1fr; gap:1.5rem; height:100%; min-height:0; align-items:stretch; }
.service-card{ background:#fff; border-radius:16px; padding:1.6rem 1.4rem; border:1px solid rgba(16,54,81,.10); box-shadow:0 10px 30px rgba(59,177,189,.08); transition:transform .18s ease, box-shadow .18s ease; height:100%; min-height:0; overflow:hidden; }
.service-card:hover{ transform:translateY(-4px); box-shadow:0 18px 46px rgba(59,177,189,.16); }
.service-card .svc{ display:grid; grid-template-rows:38% 15% 47%; height:100%; }
.svc-media{ display:flex; align-items:center; justify-content:center; }
.svc-title{ display:flex; align-items:center; justify-content:center; text-align:center; }
.svc-title .card-title{ margin:0; line-height:1.25; color:var(--brand-blue); font-weight:800; font-size:clamp(1.05rem,1.4vw,1.35rem); }
.svc-desc{ display:flex; align-items:flex-start; justify-content:center; text-align:center; padding:0 .25rem; }
.svc-desc .svc-text{ margin:0; color:#29506b; font-size:.98rem; line-height:1.55; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:10; overflow:hidden; }
.svc-media .svc-img{ display:block; width:auto; height:auto; max-width:80%; max-height:80%; object-fit:contain; object-position:center; filter:drop-shadow(0 6px 14px rgba(0,0,0,.08)); }

/* ===== ¿CÓMO TRABAJAMOS? (pantalla 3 – Zebra alterada, COMPACTA) ===== */
.howwork-zebra{
    background: linear-gradient(180deg, #f2fbfd 0%, #eef7fb 100%);
}
.howwork-zebra-inner{
    max-width: 1280px;
    margin: 0 auto;
    height: 100%;
    padding: 2.2vh 1.25rem 2.2vh;
    display: grid;
    grid-template-rows: auto 1fr;
}
.howwork-zebra .title{
    text-align:center;
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    line-height: 1.1;
    margin: 0 0 1.2vh 0;
    color: var(--brand-blue);
    font-weight: 800;
}

/* 4 cards apilados con alturas equilibradas */
.zebra-grid{
    display: grid;
    grid-auto-rows: 1fr;
    gap: 1.25rem;
    min-height: 0;
}

/* Card 70% del ancho de la sección */
.zebra-card{
    width: 70%;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(16,54,81,.08);
    box-shadow: 0 10px 24px rgba(59,177,189,.10);
    overflow: hidden;
    position: relative;
    height: 80%;
    padding-top: 1.5rem;
}

/* Alineación horizontal */
.zebra-card.is-left{  margin-left: 0;    margin-right: auto; }
.zebra-card.is-right{ margin-left: auto; margin-right: 0;  }

/* Layout interno — COMPACTO y centrado vertical */
.zebra-inner{
    display: grid;
    grid-template-columns: 92px 1fr;  /* icono + contenido */
    align-items: center;              /* centra verticalmente ambos lados */
    gap: .7rem;                       /* (antes .9rem) */
    padding: .6rem .9rem;             /* (antes .85rem 1rem) ~25% menos alto */
}

/* Icono a la derecha en 2 y 4 */
.zebra-card.is-right .zebra-inner{
    grid-template-columns: 1fr 92px;
}

/* Ícono */
.zebra-icon{
    width: 92px;
    height: 92px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(59,177,189,.18), rgba(59,177,189,.10));
    box-shadow: inset 0 4px 12px rgba(0,0,0,.06);
    flex: 0 0 92px;
}
.zebra-icon img{
    display: block;
    width: 68px;
    height: 68px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.08));
}

/* Contenido centrado verticalmente dentro de su celda */
.zebra-content{
    display: flex;
    flex-direction: column;
    justify-content: center;   /* centra verticalmente el texto */
}

/* Tipos más compactos para recortar alto */
.zebra-title{
    margin: 0 0 .12rem 0;      /* (antes .2rem) */
    color: var(--brand-blue);
    font-weight: 800;
    font-size: clamp(1.02rem, 1.35vw, 1.22rem);
    line-height: 1.22;
}
.zebra-desc{
    margin: 0;
    color: #29506b;
    font-size: .98rem;
    line-height: 1.45;         /* (antes 1.5) */
}

/* ===============================
   PRODUCTOS CLAVE — 1 fila × 4 cols
   =============================== */

.products-white{ background:#fff; }
.products-white .products-inner{
    max-width:1280px;
    margin:0 auto;
    height:100%;
    padding:2.2vh 1.25rem 2.2vh;
    display:grid;
    grid-template-rows:auto auto 1fr;
}

.products-white .title{
    text-align:center;
    font-size:clamp(1.9rem,3.2vw,2.6rem);
    line-height:1.1;
    margin:0 0 .8rem 0;
    color:var(--brand-blue,#103651);
    font-weight:800;
}
.pk-lead{
    max-width:min(980px,92%);
    margin:.1rem auto 1.2rem;
    text-align:center;
    font-size:clamp(1.02rem,1.2vw,1.12rem);
    line-height:1.55;
    color:#1a4663;
}

.pk-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-template-rows:1fr;
    gap:1.1rem;
    min-height:0;
    height:100%;
}

/* Card base (logo 30% | desc 63% | CTA 7%) */
.pk-card{
    display:grid;
    grid-template-rows:30% 63% 7%;
    background:#fff;
    border-radius:16px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    border:1px solid rgba(16,54,81,.06);
    overflow:hidden;
    min-height:0;
}

/* Fondos por producto */
.pk-sga{    background:#fffdea; }
.pk-gestran{background:#f5d2ac; }
.pk-siloth{ background:#b5d2df; }
.pk-appuam{ background:#c8ddd1; }

/* Colores de texto por producto (descripciones) */
.pk-sga .pk-desc{    color:#19613e; }
.pk-gestran .pk-desc{color:#0d4291; }
.pk-siloth .pk-desc{ color:#0f3650; }
.pk-appuam .pk-desc{ color:#426d67; }

/* Logo */
.pk-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:.6rem .8rem 0;
}
.pk-logo img{
    max-width:80%;
    max-height:100%;
    height:auto;
    width:auto;
    object-fit:contain;
}
.pk-gestran .pk-logo img{ max-height: 85%; }

/* Descripción */
.pk-desc{
    padding:.6rem 1rem 0 1rem;
    font-size:1rem;
    line-height:1.55;
    overflow:visible;
}
.pk-desc p{ margin:.25rem 0 .65rem; }

/* CTA al fondo */
.pk-cta{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:.5rem .9rem .8rem;
}
/*OCULTA BOTONES MAS INFORMACION, DESCOMENTAR CUANDO SE DESARROLLEN LAS VISTAS*/
.pk-cta{ display:none !important; }
.pk-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:2.4rem;
    border-radius:12px;
    text-decoration:none;
    font-weight:800;
    border:2px solid #15557a;
    background:#92cdd0;
    color:#15557a;
    transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.pk-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.12); filter:saturate(1.05); }
.pk-btn:active{ transform:translateY(0); box-shadow:none; }

/* ===========================================================
   HOME FOOTER (clientes + contacto) – mismo fondo “¿Cómo trabajamos?”
   =========================================================== */
.home-footer{
    background: linear-gradient(180deg,#f2fbfd 0%,#eef7fb 100%);
    min-height: calc(100vh - var(--header-h));
    height:     calc(100vh - var(--header-h));
}
@supports (height: 100dvh){
    .home-footer{ min-height: calc(100dvh - var(--header-h)); height: calc(100dvh - var(--header-h)); }
}
.home-footer .hf-inner{
    max-width: 1280px; margin: 0 auto;
    height: 100%;
    padding: 2vh 1.25rem 2vh;
    display: flex; flex-direction: column;
    justify-content: space-between;      /* contacto al fondo */
    align-items: center;
}

/* Título ~5% del top */
.hf-title{
    margin: 5vh 0 1rem 0;
    text-align:center; color: var(--brand-blue);
    font-weight:800; font-size: clamp(1.9rem,3.2vw,2.6rem);
}

/* Carrusel (visual intacto) */
.hf-carousel{ width: min(1100px,92%); display:flex; align-items:center; gap:.25rem; }
.hf-viewport{ overflow:hidden; flex:1 1 auto; }
.hf-track{ display:flex; gap:18px; will-change:transform; transition: transform .45s ease; padding:.25rem 0; }
.hf-slot{
    --slot-w: 255px; --slot-h: 120px;
    flex: 0 0 var(--slot-w); height: var(--slot-h);
    background:#fff; border-radius:16px;
    box-shadow:0 10px 24px rgba(6,22,36,.10);
    display:flex; align-items:center; justify-content:center;
    padding:10px 16px;
}
.hf-slot img{ display:block; max-width:100%; max-height:90%; object-fit:contain; }

.hf-nav{
    width:40px; height:40px; border-radius:999px;
    border:1px solid rgba(13,66,145,.25);
    background:#fff; box-shadow:0 4px 10px rgba(6,22,36,.10);
    display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.hf-nav:hover{ transform: translateY(-1px); }
/* Estado deshabilitado de flechas (coherencia con JS) */
.hf-nav[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; }

/* Bottom fixed to bottom */
.hf-bottom{ width:100%; margin-bottom:1.5vh; }

.hf-contact-grid{
    max-width:1100px; margin:0 auto;
    display:grid; grid-template-columns:1.1fr .9fr; gap:1.2rem;
    align-items:start;
}

/* Tarjetas */
.hf-card{
    background:#fff; border:1px solid rgba(16,54,81,.10);
    border-radius:14px; box-shadow:0 10px 24px rgba(6,22,36,.10);
    padding:1rem 1.1rem;
}
.hf-card-title{ margin:0 0 .75rem 0; color:var(--brand-blue); font-weight:800; font-size:1.2rem; }

/* Formulario */
.hf-field-row{ display:grid; gap:.4rem; margin-bottom:.65rem; }
.hf-field-2col{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:.65rem; }
.hf-field-2col .hf-field{ display:grid; gap:.4rem; }
.hf-field-row input, .hf-field-2col input, .hf-field-row textarea{
    width:100%; border:1px solid rgba(16,54,81,.18);
    border-radius:12px; padding:.65rem .8rem; font-size:1rem;
    background:#fff; color:#0b2a3b; box-shadow: inset 0 1px 2px rgba(6,22,36,.04);
}
.hf-actions{ margin-top:.4rem; }
.hf-btn-primary{
    appearance:none; border:0; cursor:pointer;
    background:#15557a; color:#fff; padding:.65rem 1.1rem;
    border-radius:12px; font-weight:800; box-shadow:0 6px 16px rgba(21,85,122,.25);
}
.hf-btn-primary:hover{ filter:brightness(1.03); transform:translateY(-1px); }

/* Info empresa (ajuste: logo 30% más grande y centrado) */
.hf-info-header{ display:flex; justify-content:center; }
.hf-empresa-logo{ display:block; height:73px; width:auto; object-fit:contain; margin-bottom:1rem; }

.hf-dl{ margin:0 0 .6rem 0; }
.hf-dli{ display:flex; gap:.4rem; margin:.2rem 0; }
.hf-dli dt{ font-weight:800; color:#0b2a3b; }
.hf-dli dd{ margin:0; color:#0b2a3b; }
.hf-presencial-title{ font-weight:800; color:#0b2a3b; margin:.9rem 0 .15rem; text-align:center;}
.hf-presencial-sub{ margin:0; color:#0b2a3b; }

/* ===== Sidebar móvil ===== */
.ui-sidebar .sidebar-list{ list-style:none; margin:0; padding:.6rem .45rem; }
.ui-sidebar .sidebar-list li{ margin:0; padding:0; }
.ui-sidebar .sidebar-link, .ui-sidebar .sub-toggle{
    display:block; width:100%; text-align:left; padding:.75rem .8rem; color:#0b2a3b; text-decoration:none; font-weight:700; background:transparent; border:0; cursor:pointer; border-radius:6px;
}
.ui-sidebar .sidebar-link:hover{ background:#f3f7ff; color:#0b50d4; }
.ui-sidebar .sub-list{ display:block; max-height:0; overflow:hidden; opacity:0; transition:max-height .28s ease, opacity .22s ease; padding-left:0; margin:0; list-style:none; }
.ui-sidebar .has-sub.open > .sub-list{ max-height:600px; opacity:1; }
/* Evita scroll del body cuando el sidebar móvil está abierto */
body.no-scroll { overflow: hidden; }

/* ===== Anclas con header fijo ===== */
:target{ scroll-margin-top: calc(var(--header-h) + 6px); }

/* Layout para empujar el footer al final si hay poco contenido */
html, body{ height:100%; }
body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
    /* ya tenés padding-top dinámico por el header fijo */
}
main{ flex:1 0 auto; }

/* Footer visual y sin superposición */
.site-footer{
    flex-shrink:0;
    margin-top:0 !important;        /* neutraliza cualquier -mt-* heredado */
    padding:.75rem 1rem;
    border-top:1px solid rgba(16,54,81,.06);
    background:#fff;
}


/* ===========================================================
   ===================  MOBILE DESDE AQUI  ====================
   (todas las reglas específicas para <= breakpoints)
   =========================================================== */

/* Utilidades de visibilidad (título Clientes y tarjeta de empresa) */
@media (min-width:1024px){
    .only-mobile{ display:none !important; }
}
@media (max-width:1023px){
    .only-desktop{ display:none !important; }
}

/* ---------- HERO: card de imagen ajustado al tamaño de la imagen,
                 imagen ~30% menos, KPI con texto centrado ---------- */
@media (max-width: 1023px){
    .hero{
        height:auto;
        min-height:auto;
    }
    .hero-inner{
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: .9rem;
        padding: 2rem 1rem 1.25rem;
    }
    .card-text{
        grid-column: 1;
        grid-row: auto;
        height: auto;
        min-height: unset;
        padding: 1.1rem 1rem;
    }
    .card-image{
        grid-column: 1;
        grid-row: auto;
        display: inline-flex;           /* shrink-to-fit */
        align-items: center;
        justify-content: center;
        justify-self: center;
        width: auto;
        height: auto;
        min-height: unset;
        margin: 0 auto;
        padding: .2rem;
    }
    .image-wrap{
        display: inline-flex;
        width: auto;
        height: auto;
        align-items: center;
        justify-content: center;
    }
    .hero-right-image{ max-height: 34vh; }

    .hero-title{
        font-size: clamp(1.6rem, 5vw, 2rem);
        margin-bottom: .6rem;
    }
    .hero-lead, .hero-sub{ font-size: 1.02rem; }

    .hero-kpi{
        grid-column: 1;
        grid-row: auto;
        padding: 0 .5rem;
        margin-top: .25rem;
        justify-content: center;
    }
    .kpi-tag{
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(.95rem, 3.6vw, 1.05rem);
        padding: .75rem .9rem;
    }
    .kpi-text{
        flex: 1;
        text-align: center;            /* centra SOLO el texto (icono queda a la izq.) */
    }
}
@media (max-width: 480px){
    .hero-right-image{ max-height: 26vh; }
}

/* ---------- ¿QUÉ HACEMOS? — 1 columna, menos aire imagen
                 y +espacio entre título y descripción ---------- */
@media(max-width:1023px){
    .section-full{ height:auto; min-height:calc(100dvh - var(--header-h)); }
    .whatwedo-inner{ grid-template-rows:auto auto auto; }
    .grid{ grid-template-columns:1fr; grid-template-rows:auto; height:auto; min-height:0; }

    .service-card{
        height:auto;
        padding: .8rem .9rem;                /* -20% padding general del card */
    }
    .service-card .svc{ grid-template-rows: auto auto auto; }

    .svc-media{
        padding-block: .2rem;
        margin: 0;
    }
    .svc-media .svc-img{
        max-width: 56%;
        max-height: 56%;
    }

    .svc-title{ margin-top: .1rem; }
    .svc-title .card-title{ margin: 0 0 .7rem 0; }
}
@media(max-width:1280px){
    .svc-desc .svc-text{ -webkit-line-clamp:12; }
}

/* ---------- ¿CÓMO TRABAJAMOS? — altura por contenido y +separación ---------- */
@media (max-width: 1024px){
    .zebra-grid{
        grid-auto-rows: auto;                /* altura según contenido */
        gap: 1.4rem;                          /* ↑ separación */
    }
    .zebra-card{
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: 0;
        height: auto;
        min-height: 0;
    }
    .zebra-inner{
        grid-template-columns: 72px 1fr;
        padding: .55rem .8rem;
        gap: .6rem;
        align-items: center;                 /* icono y texto centrados verticalmente */
    }
    .zebra-icon{
        width:72px; height:72px; flex-basis:72px;
        align-self: center;
    }
    .zebra-icon img{ width:56px; height:56px; }
}

/* ---------- PRODUCTOS CLAVE — cards ajustados al contenido ---------- */
@media (max-width:1200px){
    .pk-grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:auto; }
}
@media (max-width:700px){
    .pk-grid{ grid-template-columns:1fr; grid-auto-rows:auto; }
}
@media (max-width:1023px){
    .pk-card{ grid-template-rows: auto auto auto; }
}

/* ---------- HOME FOOTER ---------- */
@media (max-width:1023px){
    /* FIX footer móvil: la sección crece por contenido (no altura fija) */
    .home-footer{ min-height:auto !important; height:auto !important; }

    /* Y su contenedor deja de forzar “space-between” a fondo */
    .home-footer .hf-inner{
        height:auto;
        justify-content:flex-start;
        padding-bottom: 1rem; /* colchón frente al footer */
    }

    /* Título */
    .hf-title{ margin: 2vh 0 .75rem; }

    /* Logos: -25% ancho y mismo alto */
    .hf-slot{ --slot-w: 150px; --slot-h: 90px; }

    /* Form en 1 columna */
    .hf-field-2col{ grid-template-columns: 1fr; }
    .hf-contact-grid{ grid-template-columns:1fr; }

    /* Botón pegajoso con espacio de aterrizaje */
    .hf-form-card{ padding-bottom: 2rem; }
    .hf-actions{
        position: sticky;
        bottom: .25rem;
        background: linear-gradient(180deg, rgba(255,255,255,0), #fff 35%);
        padding-top: .5rem;
        z-index: 2;
    }

    /* Tarjeta empresa */
    .hf-info-header{ margin-bottom: .4rem; }
    .hf-empresa-text{
        font-size: 1.2rem;
        color: #0b2a3b;
        text-align: center;
        font-weight: 400;
    }
}
@media (max-width:480px){
    .hf-slot{ --slot-w: 120px; --slot-h: 80px; }
}

/* ---------- Sidebar móvil (fix z-index vs header) ---------- */
@media (max-width:1023px){
    .ui-sidebar{ z-index: 2001 !important; top: 0 !important; }
    .ui-sidebar-mask{ z-index: 2000 !important; }
}

/* ---------- Anclas: margen bajo header más pequeño en mobile ---------- */
@media(max-width:1023px){
    :target{ scroll-margin-top: 90px; }
}