/* Top Keeping: sitio multipágina. Navy + naranjo de marca; diagonal del logo como recurso gráfico. */
:root{
  --navy:#0F2740; --teal:#27496D; --orange:#FD6E16;
  --bg:#F5F7FA; --surface:#FFFFFF; --fg:#1B2635; --muted:#53647A; --line:#DCE3EC;
  --accent-ink:#B84A08; --on-navy:#E8EEF5; --on-navy-muted:#A9B8CC;
  --f-display:"Caladea",Cambria,Georgia,serif;
  --f-body:"Carlito",Calibri,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gutter:max(16px,env(safe-area-inset-left,0px));color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.6 var(--f-body);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.04;margin:0;text-wrap:balance;letter-spacing:.005em}
h1{font-size:clamp(2.6rem,7vw,5rem);text-transform:uppercase}
h2{font-size:clamp(2rem,4.4vw,3rem);text-transform:uppercase}
h3{font-size:1.55rem}
p{margin:0}
.wrap{max-width:1160px;margin:0 auto}
.band{margin-left:calc(-1 * max(16px,env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font:600 .78rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.on-navy .eyebrow{color:var(--orange)}
.lede{font-size:1.2rem;color:var(--muted);max-width:60ch}
.on-navy .lede{color:var(--on-navy-muted)}

/* Cabecera */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--navy);border-bottom:3px solid var(--orange)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand img{height:46px;width:auto}
.nav{display:flex;align-items:center;gap:4px}
.nav a{white-space:nowrap;color:var(--on-navy);text-decoration:none;font:600 .95rem var(--f-body);padding:10px 12px;border-radius:2px;letter-spacing:.02em}
.nav a:hover{color:var(--orange)}
.nav a[aria-current="page"]{color:var(--orange);box-shadow:inset 0 -2px 0 var(--orange)}
.nav .cta{background:var(--orange);color:var(--navy);margin-left:8px;padding:10px 16px}
.nav .cta:hover{background:#ff8238;color:var(--navy)}
.menu-btn{display:none;background:none;border:1px solid #34567F;color:var(--on-navy);font:600 .9rem var(--f-body);padding:9px 14px;border-radius:2px;cursor:pointer}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
@media (max-width:900px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--navy);flex-direction:column;align-items:stretch;padding:8px max(16px,env(safe-area-inset-left,0px)) 16px;border-bottom:3px solid var(--orange)}
  .nav.open{display:flex}
  .nav a{padding:14px 4px;border-bottom:1px solid #1F3A57}
  .nav .cta{margin:12px 0 0;text-align:center}
}

/* Héroe */
.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-block:72px}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero .lede{margin-top:22px;color:var(--on-navy-muted)}
.hero-photo{position:relative;aspect-ratio:4/3.4;clip-path:polygon(14% 0,100% 0,100% 100%,0 100%);background:var(--teal)}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,39,64,.55),transparent 45%)}
.page-hero{background:var(--navy);color:#fff;border-bottom:1px solid #1F3A57}
.page-hero .wrap{padding-block:56px 52px;display:grid;gap:16px}
.page-hero h1{font-size:clamp(2.3rem,5.6vw,4rem)}
.page-hero .lede{color:var(--on-navy-muted)}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;padding-block:48px;gap:32px}.hero-photo{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);aspect-ratio:16/10}}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font:700 1rem var(--f-body);padding:14px 22px;border-radius:2px;border:2px solid var(--orange);background:var(--orange);color:var(--navy);cursor:pointer;letter-spacing:.02em}
.btn:hover{background:#ff8238;border-color:#ff8238}
.btn.ghost{background:transparent;color:#fff;border-color:#4A6C93}
.btn.ghost:hover{border-color:#fff}
.btn.dark{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.dark:hover{background:var(--teal);border-color:var(--teal)}

/* Cifras */
.stats{background:var(--surface);border-bottom:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{padding:28px 24px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat b{display:block;font:700 2.9rem/1 var(--f-display);color:var(--accent-ink)}
.stat span{display:block;margin-top:8px;color:var(--muted);font-size:.95rem}
@media (max-width:760px){.stats .wrap{grid-template-columns:1fr 1fr}.stat{border-left:0;border-top:1px solid var(--line);padding:20px 8px}.stat:nth-child(-n+2){border-top:0}}

/* Secciones */
section{padding-block:76px}
.sec-head{display:grid;gap:14px;margin-bottom:40px;max-width:720px}
.alt{background:var(--surface);border-block:1px solid var(--line)}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

.line-card{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--orange);padding:26px 24px 24px;text-decoration:none;min-width:0}
.alt .line-card{background:var(--bg)}
a.line-card:hover{border-color:var(--teal);border-top-color:var(--orange);transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,39,64,.12)}
.line-card p{color:var(--muted);font-size:.98rem}
.line-card .more{margin-top:auto;font:600 .9rem var(--f-body);color:var(--accent-ink)}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.tag-list li{border:1px solid var(--line);background:var(--surface);padding:7px 13px;font-size:.92rem;border-radius:2px}
.alt .tag-list li{background:var(--bg)}
ul.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
ul.ticks li{padding-left:22px;position:relative;color:var(--fg)}
ul.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--orange)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.top{align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:32px}}
.photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:5px solid var(--orange)}

/* Método */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:s;border-top:2px solid var(--navy)}
.step{padding:22px 18px 8px 0;position:relative}
.step::before{counter-increment:s;content:counter(s);display:inline-grid;place-items:center;width:32px;height:32px;background:var(--orange);color:var(--navy);font:700 1rem var(--f-display);margin-top:-39px;margin-bottom:14px}
.step h3{font-size:1.3rem;margin-bottom:6px}
.step p{color:var(--muted);font-size:.95rem}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;row-gap:24px;border-top:0}.step{border-top:2px solid var(--navy)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* Navy band */
.on-navy{background:var(--navy);color:#fff;border:0}
.on-navy h2,.on-navy h3{color:#fff}
.big-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.big-nums b{display:block;font:700 3.4rem/1 var(--f-display);color:var(--orange)}
.big-nums span{color:var(--on-navy-muted);font-size:.95rem}
@media (max-width:760px){.big-nums{grid-template-columns:1fr 1fr}}

/* Clientes y experiencia */
.client-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.client-row div{padding:22px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.client-row b{display:block;font:700 1.35rem var(--f-display);color:var(--navy)}
.client-row span{color:var(--muted);font-size:.9rem}
@media (max-width:900px){.client-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.active{border-left:4px solid var(--orange);background:var(--surface);padding:22px 24px;display:grid;gap:4px}
.active b{font:700 1.4rem var(--f-display)}
.active span{color:var(--muted)}
.exp{display:grid;gap:0;border-top:1px solid var(--line)}
.exp-item{display:grid;grid-template-columns:230px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}
.exp-item h3{font-size:1.35rem}
.exp-item small{display:block;font:600 .74rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin-top:4px}
.exp-item p{color:var(--muted)}
@media (max-width:700px){.exp-item{grid-template-columns:1fr;gap:6px}}

.person{display:grid;grid-template-columns:200px 1fr;gap:36px;align-items:center}
.person img{width:200px;height:200px;border-radius:50%;border:5px solid var(--orange);background:var(--navy)}
@media (max-width:640px){.person{grid-template-columns:1fr;justify-items:start}}

/* Contacto */
.contact-list{display:grid;gap:0;border-top:1px solid var(--line)}
.contact-row{display:grid;grid-template-columns:140px 1fr auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.contact-row dt{font:600 .78rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.contact-row dd{margin:0;font-size:1.15rem;font-weight:600;overflow-wrap:anywhere}
.copy{background:none;border:1px solid var(--line);color:var(--fg);padding:7px 12px;font:600 .85rem var(--f-body);cursor:pointer;border-radius:2px}
.copy:hover{border-color:var(--orange)}
@media (max-width:560px){.contact-row{grid-template-columns:1fr auto}.contact-row dt{grid-column:1/-1}}
.cta-band{background:var(--navy);color:#fff;border:0}
.cta-band .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.cta-band h2{max-width:20ch}

/* Pie */
.site-foot{background:var(--navy);color:var(--on-navy);border-top:3px solid var(--orange);padding-block:48px 28px;margin-left:calc(-1 * max(16px,env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.foot-grid img{height:54px;width:auto;margin-bottom:14px}
.foot-grid h4{font:600 .78rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin:0 0 14px}
.foot-grid a{display:block;text-decoration:none;color:var(--on-navy);padding:4px 0}
.foot-grid a:hover{color:var(--orange)}
.foot-grid p{color:var(--on-navy-muted);font-size:.95rem}
.legal{margin-top:36px;padding-top:18px;border-top:1px solid #1F3A57;color:var(--on-navy-muted);font-size:.85rem}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}a.line-card:hover{transform:none}}

/* Versión 2: apariencia de la presentación de automatización (blanco, tarjetas gris claro, títulos serif, bandas navy con filete naranjo) */
:root{--bg:#FFFFFF;--surface:#F3F5F8;--line:#E3E8EF;--head:#0F2740}
body{font-size:18px}
h1,h2{text-transform:none;letter-spacing:0;line-height:1.12}
h1{font-size:clamp(2.3rem,5.6vw,3.9rem)}
h2{font-size:clamp(1.8rem,3.8vw,2.6rem);color:var(--head)}
h3{font-size:1.3rem;color:var(--head);font-weight:700}
.hero{background:var(--bg);color:var(--fg)}
.hero h1{color:var(--head)}
.hero .lede{color:var(--muted)}
.hero .eyebrow{color:var(--accent-ink)}
.hero .wrap{padding-block:64px 72px}
.hero-photo{clip-path:none;aspect-ratio:4/3.2;border-left:10px solid var(--orange);background:none}
.hero-photo::after{display:none}
.btn.ghost{color:var(--head);border-color:var(--line);background:var(--surface)}
.btn.ghost:hover{border-color:var(--orange)}
.cta-band .btn.ghost,.on-navy .btn.ghost{color:#fff;background:transparent;border-color:#4A6C93}
.page-hero{border-bottom:6px solid var(--orange);position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;right:4%;top:34px;width:170px;height:42px;background:
 linear-gradient(#34567F,#34567F) 0 0/150px 2px no-repeat,linear-gradient(var(--orange),var(--orange)) 22px 28px/146px 2px no-repeat;opacity:.9}
@media (max-width:700px){.page-hero::after{display:none}}
.page-hero h1{color:#fff}
.stats{background:var(--bg);border:0}
.stats .wrap{background:var(--navy);border-radius:12px;margin-top:-1px;padding:12px 28px}
.stat{border-left:1px solid #27496D}
.stat b{color:var(--orange);font-size:2.6rem}
.stat span{color:var(--on-navy-muted)}
@media (max-width:760px){.stat{border-top:1px solid #27496D}.stat:nth-child(-n+2){border-top:0}}
.stats{padding-block:0 8px}
.alt{background:var(--bg);border:0}
.line-card,.alt .line-card{background:var(--surface);border:0;border-radius:10px;border-top:0}
a.line-card:hover{box-shadow:0 8px 20px rgba(15,39,64,.12);border:0}
.line-card h3{padding-top:12px;position:relative}
.line-card h3::before{content:"";position:absolute;left:0;top:0;width:36px;height:4px;background:var(--orange);border-radius:2px}
.tag-list li,.alt .tag-list li{background:var(--surface);border:0;border-radius:6px}
ul.ticks li::before{width:8px;height:8px;border-radius:50%;top:.7em}
.photo{border-radius:10px;border-bottom:0}
.client-row{gap:12px;border:0}
.client-row div{border:0;border-radius:10px;background:var(--surface)}
.active{background:var(--surface);border-radius:10px;border-left:0;border-top:4px solid var(--orange)}
.person img{border-color:var(--orange)}
.exp{border-top:0;gap:12px}
.exp-item{background:var(--surface);border:0;border-radius:10px;padding:20px 24px}
.steps{border-top:0;gap:14px}
.step{background:var(--surface);border-radius:10px;padding:20px 18px;border-top:0}
.step::before{margin-top:0;border-radius:50%}
.on-navy{border-radius:0}
.big-nums b{font-size:3rem}
.contact-list{border-top:0}
.contact-row{background:var(--surface);border:0;border-radius:10px;padding:16px 20px;margin-bottom:10px}
.cta-band h2{color:#fff}
@media (max-width:900px){.step{border-top:0}}

/* Logo en sus colores originales (azul marino y naranjo): cabecera y pie claros */
.site-head{background:#FFFFFF;border-bottom:4px solid #FD6E16;box-shadow:0 2px 10px rgba(15,39,64,.08)}
.nav a{color:#0F2740}
.nav a:hover{color:#B84A08}
.nav a[aria-current="page"]{color:#B84A08;box-shadow:inset 0 -2px 0 #FD6E16}
.nav .cta,.nav .cta[aria-current="page"]{background:#FD6E16;color:#0F2740;box-shadow:none}
.nav .cta:hover{background:#ff8238;color:#0F2740}
.menu-btn{border-color:#C9D3E0;color:#0F2740;background:#fff}
@media (max-width:900px){.nav{background:#FFFFFF;border-bottom:4px solid #FD6E16}.nav a{border-bottom:1px solid #E3E8EF}.nav .cta{border-bottom:0}}
.site-foot{background:#F3F5F8;color:#0F2740;border-top:4px solid #FD6E16}
.foot-grid h4{color:#B84A08}
.foot-grid a{color:#0F2740}
.foot-grid a:hover{color:#B84A08}
.foot-grid p{color:#53647A}
.legal{border-top-color:#DCE3EC;color:#53647A}

/* Cierre con conectores y engranaje de la presentación */
.cta-final{position:relative;overflow:hidden;background:#FFFFFF;color:#0F2740;text-align:center;padding-block:110px;border:0}
.cta-final .deco{position:absolute;top:0;height:100%;width:auto;max-width:none;pointer-events:none}
.cta-final .deco.l{left:0}.cta-final .deco.r{right:0}
.cta-final .wrap{position:relative;max-width:640px;display:grid;gap:16px;justify-items:center}
.cta-final h2{color:#0F2740;max-width:none}
.cta-final .lede{color:#53647A;margin:0}
.cta-final .actions{justify-content:center;margin-top:12px}
@media (max-width:760px){.cta-final{padding-block:80px}.cta-final .deco{opacity:.3}}

/* Conector de circuito en la barra de menú (motivo de la presentación) */
.hd-motif{flex:1;position:relative;height:26px;margin:0 28px 0 22px;min-width:40px}
.hd-motif::before{content:"";position:absolute;left:0;right:9px;top:5px;height:2px;background:#9FB0C4}
.hd-motif::after{content:"";position:absolute;right:0;top:0;width:12px;height:12px;border-radius:50%;border:2px solid #FD6E16;background:#fff}
.hd-motif i{position:absolute;left:38%;right:7px;top:19px;height:2px;background:#FD6E16}
.hd-motif i::after{content:"";position:absolute;right:-7px;top:-4px;width:10px;height:10px;border-radius:50%;background:#FD6E16}
@media (max-width:1180px){.nav a{padding:10px 8px;font-size:.9rem}.nav .cta{padding:10px 12px;margin-left:4px}.hd-motif{margin:0 16px 0 14px}}
@media (max-width:420px){.hd-motif{margin:0 12px 0 10px;min-width:24px}}

/* Iconos de las líneas de servicio */
.ic{width:64px;height:64px;border-radius:50%;background:#fff;flex:none}
.sec-head .ic{margin-bottom:4px}

/* Franja de iconos pequeños en la página principal */
.icon-strip{background:#FFFFFF;border-bottom:1px solid #E3E8EF}
.icon-strip .wrap{display:grid;grid-template-columns:repeat(6,1fr);padding-block:22px}
.icon-strip a{display:flex;align-items:center;gap:12px;justify-content:center;text-decoration:none;color:#0F2740;padding:4px 10px;border-left:1px solid #DCE3EC;min-width:0}
.icon-strip a:first-child{border-left:0}
.icon-strip img{width:48px;height:48px;flex:none;border-radius:50%}
.icon-strip span{font:700 .78rem/1.2 var(--f-body);letter-spacing:.04em;text-transform:uppercase}
.icon-strip a:hover span{color:#B84A08}
@media (max-width:980px){.icon-strip .wrap{grid-template-columns:repeat(3,1fr);row-gap:14px}.icon-strip a:nth-child(4){border-left:0}}
@media (max-width:560px){.icon-strip .wrap{grid-template-columns:repeat(2,1fr)}.icon-strip a{justify-content:flex-start}.icon-strip a:nth-child(odd){border-left:0}.icon-strip a:nth-child(4){border-left:1px solid #DCE3EC}.icon-strip a:nth-child(2n+1){border-left:0}}
.line-card .ic{width:48px;height:48px}

/* Pie: secciones con iconos */
.foot-grid a{display:flex;align-items:center;gap:12px;padding:5px 0}
.fi{width:28px;height:28px;flex:none;border-radius:50%}
.foot-grid .fi{height:28px;width:28px;margin:0}