/*
Theme Name: MAKREDATA
Theme URI: https://makredata.com/
Author: MAKREDATA
Description: Tema corporativo responsive de MAKREDATA con carrusel de soluciones en video real.
Version: 2.0.0
Text Domain: makredata
*/
*{box-sizing:border-box}html{color-scheme:light dark}body{margin:0;font:14px system-ui,sans-serif}img{max-width:100%}[hidden]{display:none!important}
/* ============================================================
   MAKREDATA — Modo claro / oscuro v8
   ============================================================ */
html{color-scheme:light dark;}
html[data-theme="light"]{color-scheme:light;}
html[data-theme="dark"]{color-scheme:dark;}
body, header.site, .card, .reading, .demo, .table-wrap, .plan, .slide, .icon-btn, .car-btn,
.demo-bar, .tile, .panel, .carousel-prominent, .contact-card, .faq-item, .price-card{
  transition:background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.theme-toggle{position:relative;overflow:hidden;}
.theme-toggle svg{transition:transform .35s ease,opacity .25s ease;}
.theme-toggle .sun-icon{display:block;}
.theme-toggle .moon-icon{display:none;}
html[data-theme="dark"] .theme-toggle .sun-icon{display:none;}
html[data-theme="dark"] .theme-toggle .moon-icon{display:block;}
html[data-theme="dark"] .theme-toggle{background:rgba(34,193,204,.08);border-color:rgba(34,193,204,.35);color:#3FD3DD;}
html[data-theme="light"] .theme-toggle{background:rgba(26,54,93,.035);}
/* Mantiene la identidad MAKREDATA: hero, bloques de datos y footer permanecen oscuros. */
html[data-theme="light"] .on-dark{color:var(--ground-body);}
html[data-theme="light"] .on-dark h1,html[data-theme="light"] .on-dark h2,html[data-theme="light"] .on-dark h3,html[data-theme="light"] .on-dark h4{color:#F2F7FC;}
/* Mejor contraste del carrusel en modo claro */
html[data-theme="light"] .carousel-prominent{background:#F4F7FB!important;}
html[data-theme="light"] .slide{background:#FFFFFF;}
html[data-theme="light"] .slide-body p{color:#44566F;}
html[data-theme="light"] .car-status,html[data-theme="light"] .car-hint{color:#6E819A;}
/* En modo oscuro se conserva el lenguaje visual corporativo azul petróleo + turquesa. */
html[data-theme="dark"] .carousel-prominent{background:#0C1C2E!important;}
html[data-theme="dark"] .slide{background:#0F2137;}
/* Preferencia inicial del sistema, sin impedir el cambio manual */
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .sun-icon{display:none;}
  html:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .moon-icon{display:block;}
}


/* ============================================================
   MAKREDATA V9 — Iconografía profesional + movimiento vivo
   ============================================================ */
.tech-pill-icon{
  width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  flex:none;color:var(--teal);
}
.tech-pill-icon svg{width:20px;height:20px;display:block}
.method-icon{
  width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;border:1px solid color-mix(in srgb,var(--teal) 22%,transparent);
  background:color-mix(in srgb,var(--teal) 7%,transparent);color:var(--teal);
  box-shadow:0 10px 28px rgba(0,168,181,.08);
}
.method-icon svg{width:40px;height:40px}
.method .step{position:relative}
.method .step h3{margin-top:0}
.foot-link{display:flex!important;align-items:center;gap:11px}
.foot-ico{
  width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  flex:none;color:var(--teal);opacity:.95
}
.foot-ico svg{width:21px;height:21px;display:block}
.social-ico{
  width:34px;height:34px;border:1px solid rgba(127,160,192,.28);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
}
.social-ico svg{width:17px;height:17px}
/* Movimiento de escena — efecto cinematográfico para que cada ejecutivo parezca estar trabajando. */
.slide-img{position:relative;overflow:hidden;isolation:isolate}
.slide-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(112deg,transparent 18%,rgba(255,255,255,.13) 48%,rgba(0,209,218,.06) 54%,transparent 76%);
  transform:translateX(-135%) skewX(-8deg);animation:dataSweep 6.2s ease-in-out infinite;mix-blend-mode:screen;opacity:0;
}
.slide-img::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 72% 30%,rgba(255,255,255,.10),transparent 34%);
  opacity:0;transition:opacity .5s ease;
}
.slide.active .slide-img::before{opacity:1}
.slide-img img{
  width:100%;height:100%;object-fit:cover;transform-origin:52% 48%;
  will-change:transform,filter;animation:sceneLife 6.2s cubic-bezier(.45,.05,.55,.95) infinite;
}
.slide:not(.active) .slide-img img,.slide:not(.active) .slide-img::after{animation-play-state:paused}
.slide.active .slide-img::after{opacity:.9}
.slide.scene-left .slide-img img{animation-name:sceneLifeLeft}
.slide.scene-right .slide-img img{animation-name:sceneLifeRight}
.slide.scene-up .slide-img img{animation-name:sceneLifeUp}
@keyframes sceneLife{
  0%{transform:scale(1.10) translate3d(-1.8%,.8%,0);filter:saturate(.88) brightness(.94)}
  22%{transform:scale(1.075) translate3d(-.2%,-.35%,0);filter:saturate(1) brightness(1)}
  50%{transform:scale(1.045) translate3d(1.35%,.25%,0);filter:saturate(1.05) brightness(1.02)}
  78%{transform:scale(1.075) translate3d(.1%,-.65%,0);filter:saturate(1.02) brightness(1.01)}
  100%{transform:scale(1.10) translate3d(-1.8%,.8%,0);filter:saturate(.9) brightness(.95)}
}
@keyframes sceneLifeLeft{
  0%{transform:scale(1.11) translate3d(1.8%,.3%,0)}
  45%{transform:scale(1.05) translate3d(-1.7%,-.35%,0)}
  100%{transform:scale(1.11) translate3d(1.8%,.3%,0)}
}
@keyframes sceneLifeRight{
  0%{transform:scale(1.10) translate3d(-1.6%,-.3%,0)}
  50%{transform:scale(1.045) translate3d(1.8%,.5%,0)}
  100%{transform:scale(1.10) translate3d(-1.6%,-.3%,0)}
}
@keyframes sceneLifeUp{
  0%{transform:scale(1.105) translate3d(.5%,1.2%,0)}
  50%{transform:scale(1.045) translate3d(-.5%,-1.3%,0)}
  100%{transform:scale(1.105) translate3d(.5%,1.2%,0)}
}
@keyframes dataSweep{
  0%,18%{transform:translateX(-135%) skewX(-8deg);opacity:0}
  34%{opacity:.9}
  54%{transform:translateX(135%) skewX(-8deg);opacity:.5}
  68%,100%{transform:translateX(135%) skewX(-8deg);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .slide-img img,.slide-img::after{animation:none!important}
}





/* MAKREDATA FINAL: una sola fuente visual en el carrusel = VIDEO */
#carousel .slide-img{position:relative!important;overflow:hidden!important;aspect-ratio:3/2!important;background:#071827!important;isolation:isolate!important}
#carousel .slide-img > img{display:none!important}
#carousel .slide-img > video.mkd-video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;z-index:1!important;background:#071827!important;opacity:.36!important;visibility:visible!important;transition:opacity .45s ease,transform 3s ease,filter .45s ease!important}
#carousel .slide.active .slide-img > video.mkd-video{opacity:1!important;transform:scale(1.01)!important;filter:saturate(1.02) contrast(1.02)!important}
#carousel .slide.mkd-clear .slide-img > video.mkd-video{opacity:.30!important;transform:scale(1)!important;filter:saturate(.82) brightness(1.08)!important}
#carousel .slide .slide-img::after{z-index:2!important;pointer-events:none!important}
#carousel .slide .slide-icon,#carousel .slide .slide-cat,#carousel .slide .slide-title{z-index:5!important}
#carousel .slide{min-width:0!important;scroll-snap-align:start!important;box-sizing:border-box!important}
#carousel .car-view,#carousel .car-view.mkd-three,#carousel .car-view.mkd-one{display:flex!important;gap:20px!important;overflow:hidden!important;scroll-snap-type:x mandatory!important;padding:10px 2px 14px!important;margin:0!important}
#carousel .car-view.mkd-one .slide{flex:0 0 100%!important}
#carousel .car-view.mkd-three .slide{flex:0 0 calc((100% - 40px)/3)!important}
#carousel .car-dots{margin-top:18px!important}
#carousel .car-dots button[aria-current="true"]{background:var(--line)!important}
#carousel .car-dots button[aria-current="true"]::after{animation:dotProgress 3s linear forwards!important}
#carousel .slide.active{background:#0B1B2E!important;border-color:#00A8B5!important;color:#EAF1F9!important}
#carousel .slide.active .slide-body p{color:#D7E4F1!important}
#carousel .slide.active .slide-price,#carousel .slide.active .arrow-link{color:#22C1CC!important}
#carousel .slide.active .slide-title{background:rgba(7,24,39,.78)!important;color:#fff!important}
#carousel .slide.mkd-clear .slide-title{background:rgba(7,24,39,.55)!important}
#carousel .slide.video-error .slide-img{background:#071827!important}
#carousel .slide.video-error .slide-img::before{content:""!important;display:block!important;position:absolute!important;inset:0!important;background:#071827!important;z-index:1!important}
/* No WhatsApp flotante: no se muestra ningún elemento de WhatsApp en esta versión. */
.wa-float,#whatsapp-float,.whatsapp-float,.whatsapp-button,[class*="whatsapp"],[id*="whatsapp"]{display:none!important;visibility:hidden!important}
/* Responsive: móvil vertical/tablet vertical = 1; móvil horizontal/tablet horizontal/escritorio = 3 */
@media (max-width:599px){#carousel .car-view.mkd-three .slide{flex-basis:100%!important}#carousel .car-view.mkd-one .slide{flex-basis:100%!important}}
@media (min-width:600px) and (max-width:899px) and (orientation:landscape){#carousel .car-view.mkd-one .slide,#carousel .car-view .slide{flex-basis:calc((100% - 40px)/3)!important}}
@media (min-width:900px){#carousel .car-view .slide{flex-basis:calc((100% - 40px)/3)!important}}
/* Evita cualquier desbordamiento horizontal global que vuelva a cortar la portada en móvil. */
html,body{max-width:100%;overflow-x:hidden!important}
@media (max-width:760px){
  body{width:100%!important}
  .wrap{width:min(100% - 28px,1120px)!important}
  header .wrap{width:min(100% - 24px,1120px)!important}
  #inicio .hero-grid{grid-template-columns:1fr!important}
  #inicio .hero-copy{min-width:0!important}
  #inicio h1{font-size:clamp(2.35rem,10.5vw,3.35rem)!important;line-height:.98!important;overflow-wrap:normal!important}
  #inicio .lede{font-size:1rem!important;line-height:1.65!important;max-width:100%!important}
}



/* ============================================================
   MAKREDATA — sistema de diseño
   Display: Bodoni Moda (la tipografía del logotipo)
   Cuerpo:  Montserrat
   Dato:    IBM Plex Mono
   ============================================================ */
:root{
  --navy:#1A365D; --teal:#00A8B5; --coral:#FF6B6B;
  --bg:#FFFFFF; --bg-alt:#F4F7FB; --card:#FFFFFF; --card-2:#FAFCFE;
  --ink:#0F2340; --body:#44566F; --muted:#6E819A; --line:#DFE7F1; --line-soft:#EDF2F8;
  --accent:#0A8792; --accent-ink:#00727C;
  --ground:#0B1B2E; --ground-2:#112742; --ground-line:#1D3654; --ground-ink:#EAF1F9; --ground-body:#9FB4CC;
  --c1:#12A5B0; --c2:#3B6FD4; --c3:#FF6B6B; --c4:#9C6ADE;
  --gc1:#14A6B1; --gc2:#3B6FD4; --gc3:#E25858; --gc4:#9C6ADE;
  --shadow:0 1px 2px rgba(15,35,64,.04), 0 8px 28px -14px rgba(15,35,64,.18);
  --shadow-lg:0 2px 4px rgba(15,35,64,.05), 0 26px 60px -26px rgba(15,35,64,.34);
  --radius:14px; --maxw:1180px;
  --step:1.5rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#081422; --bg-alt:#0C1C2E; --card:#0F2137; --card-2:#132A44;
    --ink:#EAF1F9; --body:#AABFD6; --muted:#7F94AD; --line:#1D3652; --line-soft:#152A42;
    --accent:#22C1CC; --accent-ink:#3FD3DD;
    --ground-line:#22405F;
    --c1:#14A6B1; --c2:#3B6FD4; --c3:#E25858; --c4:#9C6ADE;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 28px -14px rgba(0,0,0,.6);
    --shadow-lg:0 2px 4px rgba(0,0,0,.35), 0 26px 60px -26px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --bg:#081422; --bg-alt:#0C1C2E; --card:#0F2137; --card-2:#132A44;
  --ink:#EAF1F9; --body:#AABFD6; --muted:#7F94AD; --line:#1D3652; --line-soft:#152A42;
  --accent:#22C1CC; --accent-ink:#3FD3DD;
  --ground-line:#22405F;
  --c1:#14A6B1; --c2:#3B6FD4; --c3:#E25858; --c4:#9C6ADE;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 28px -14px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.35), 0 26px 60px -26px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

h1,h2,h3,h4{color:var(--ink); margin:0; text-wrap:balance; line-height:1.12}
.display{font-family:"Bodoni Moda",Georgia,serif; font-weight:600; letter-spacing:-.005em}
h1{font-size:clamp(2.5rem,5.4vw,4.15rem); font-weight:600}
h2{font-size:clamp(1.95rem,3.5vw,2.9rem); font-weight:600}
h3{font-size:1.22rem; font-weight:600; line-height:1.3}
p{margin:0}
.lede{font-size:1.12rem; line-height:1.72; max-width:62ch}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.tnum{font-variant-numeric:tabular-nums}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
section{padding:clamp(60px,8vw,110px) 0}
.stack{display:flex; flex-direction:column}
.g-8{gap:8px}.g-12{gap:12px}.g-16{gap:16px}.g-20{gap:20px}.g-24{gap:24px}.g-32{gap:32px}.g-40{gap:40px}.g-56{gap:56px}

/* eyebrow ------------------------------------------------ */
.eyebrow{
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.735rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:currentColor; opacity:.55; flex:none}
.on-dark .eyebrow{color:#4FD8E2}

/* botones ------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:999px; border:1px solid transparent;
  font-size:.92rem; font-weight:600; letter-spacing:.01em; text-decoration:none;
  cursor:pointer; transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--navy); color:#fff; box-shadow:0 10px 24px -12px rgba(26,54,93,.75)}
.btn-primary:hover{background:#12294a}
:root[data-theme="dark"] .btn-primary,
:root:not([data-theme="light"]) .btn-primary{background:var(--teal); color:#04202a}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .btn-primary{background:var(--navy); color:#fff}}
.btn-teal{background:var(--teal); color:#04202a; box-shadow:0 10px 24px -12px rgba(0,168,181,.8)}
.btn-teal:hover{background:#00bcca}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent-ink)}
.on-dark .btn-ghost{color:#EAF1F9; border-color:rgba(180,205,230,.32)}
.on-dark .btn-ghost:hover{border-color:#4FD8E2; color:#4FD8E2}
.btn-sm{padding:11px 20px; font-size:.85rem}

/* enlace con flecha --------------------------------------- */
.arrow-link{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  color:var(--accent-ink); font-weight:600; font-size:.9rem;
}
.arrow-link svg{transition:transform .2s ease}
.arrow-link:hover svg{transform:translateX(4px)}

/* header --------------------------------------------------- */
header.site{
  position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid var(--line-soft);
}
.bar{display:flex; align-items:center; gap:18px; min-height:82px; padding-top:4px; padding-bottom:4px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 275px; min-width:275px}
.brand img{width:36px; height:auto}
.lg-dark{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .lg-light{display:none}
  :root:not([data-theme="light"]) .lg-dark{display:block}
}
:root[data-theme="dark"] .lg-light{display:none}
:root[data-theme="dark"] .lg-dark{display:block}
.brand .wm{display:flex; flex-direction:column; line-height:1}
.brand .wm b{
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-weight:600; font-size:1.28rem;
  letter-spacing:.055em; color:var(--ink);
}
.brand .wm span{
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.535rem; letter-spacing:.235em;
  color:var(--muted); margin-top:4px; text-transform:uppercase;
}
nav.main{display:flex; align-items:stretch; justify-content:center; gap:2px; margin-left:auto; flex:1; min-width:0}
nav.main a{
  position:relative; min-width:82px; padding:7px 8px 8px; border-radius:8px; text-decoration:none;
  font-size:.80rem; font-weight:500; color:var(--body); transition:color .16s, background .16s;
  display:flex!important; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  text-align:center; line-height:1.15; white-space:nowrap;
}
nav.main a .foot-ico{width:20px;height:20px}
nav.main a .foot-ico svg{width:19px;height:19px}
nav.main a:hover{color:var(--ink); background:var(--bg-alt)}
nav.main a.active{color:var(--accent-ink); font-weight:600}
nav.main a.active::after{
  content:""; position:absolute; left:13px; right:13px; bottom:2px; height:2px;
  background:var(--teal); border-radius:2px;
}
.head-actions{display:flex; align-items:center; gap:10px; flex:none}
.icon-btn{
  width:38px; height:38px; display:grid; place-items:center; border-radius:10px;
  border:1px solid var(--line); background:transparent; color:var(--body); cursor:pointer;
}
.icon-btn:hover{color:var(--accent-ink); border-color:var(--accent)}
.burger{display:none}
@media (max-width:1100px){
  nav.main{
    position:fixed; inset:76px 0 auto 0; flex-direction:column; gap:0; margin:0;
    background:var(--bg); border-bottom:1px solid var(--line); padding:10px 18px 20px;
    transform:translateY(-125%); transition:transform .3s cubic-bezier(.4,0,.2,1); box-shadow:var(--shadow);
  }
  nav.main.open{transform:translateY(0)}
  nav.main a{padding:14px 10px; font-size:1rem; border-bottom:1px solid var(--line-soft); border-radius:0; flex-direction:row!important; justify-content:flex-start; gap:11px; white-space:normal}
  nav.main a.active::after{display:none}
  .burger{display:grid}
  .head-cta{display:none}
}

/* superficies oscuras -------------------------------------- */
.on-dark{background:var(--ground); color:var(--ground-body); position:relative; overflow:hidden}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#F2F7FC}
.on-dark .lede{color:#A9C0D6}

/* hero ------------------------------------------------------ */
.hero{padding:clamp(64px,7vw,104px) 0 clamp(56px,7vw,96px)}
#net{position:absolute; inset:0; width:100%; height:100%; opacity:.55; pointer-events:none}
.hero-grid{
  position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px); align-items:center;
}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr; gap:44px}}
.hero h1{color:#fff}
.hero h1 em{font-style:normal; color:var(--teal); display:block}
.hero .lede{font-size:1.16rem}

/* pill de herramientas -------------------------------------- */
.toolbar-strip{display:flex; flex-wrap:wrap; gap:8px}
.pill{
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.735rem; letter-spacing:.04em;
  padding:6px 12px; border-radius:999px; border:1px solid var(--ground-line);
  color:#93AECB; background:rgba(255,255,255,.025);
}

/* tarjeta dashboard ----------------------------------------- */
.dash{
  background:linear-gradient(168deg,#123354 0%,#0C2138 62%,#0A1C31 100%);
  border:1px solid #22415F; border-radius:18px; padding:22px;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.85); position:relative;
}
.dash-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px}
.dash-head .t{font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.72rem; letter-spacing:.16em; color:#7FA0C0; text-transform:uppercase}
.dots{display:flex; gap:5px}
.dots i{width:7px; height:7px; border-radius:50%; background:#2B4A6B; display:block}
.dots i:first-child{background:#E25858}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.kpi{background:rgba(255,255,255,.035); border:1px solid #1E3C58; border-radius:11px; padding:13px 13px 12px}
.kpi .lab{font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.635rem; letter-spacing:.1em; color:#7C9CBC; text-transform:uppercase; display:block; margin-bottom:7px}
.kpi .val{font-family:"Bodoni Moda",Georgia,serif; font-size:1.62rem; font-weight:600; color:#fff; letter-spacing:-.01em; display:block; font-variant-numeric:tabular-nums}
.kpi .delta{font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.68rem; margin-top:4px; display:block; font-variant-numeric:tabular-nums}
.up{color:#4FD8E2}.down{color:#F08C8C}
.dash-chart{margin-top:12px; background:rgba(255,255,255,.03); border:1px solid #1E3C58; border-radius:11px; padding:14px 14px 8px}
.dash-chart .ct{font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.66rem; letter-spacing:.11em; color:#7C9CBC; text-transform:uppercase; margin-bottom:8px}
.insight-strip{
  margin-top:12px; display:flex; gap:11px; align-items:flex-start;
  background:rgba(255,107,107,.07); border:1px solid rgba(255,107,107,.26);
  border-radius:11px; padding:12px 14px;
}
.insight-strip .dot{width:9px; height:9px; border-radius:50%; background:var(--coral); margin-top:6px; flex:none; box-shadow:0 0 0 4px rgba(255,107,107,.15)}
.insight-strip p{font-size:.83rem; line-height:1.55; color:#D8E4F0}
.insight-strip b{color:#fff; font-weight:600}

/* encabezado de sección ------------------------------------- */
.sec-head{display:flex; flex-direction:column; gap:16px; max-width:66ch; margin-bottom:clamp(34px,4vw,54px)}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center; align-items:center}
.sec-head.center .eyebrow{justify-content:center}

/* tarjetas ---------------------------------------------------- */
.grid{display:grid; gap:20px}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.cols-3,.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; display:flex; flex-direction:column; gap:12px;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card.link{cursor:pointer; text-decoration:none}
.card.link:hover{transform:translateY(-4px); border-color:color-mix(in srgb,var(--teal) 55%, var(--line)); box-shadow:var(--shadow)}
.card p{font-size:.925rem; color:var(--body)}
.ic{
  width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--teal) 13%, transparent); color:var(--accent-ink); flex:none;
}
.ic svg{width:21px; height:21px}

/* el dato y la lectura --------------------------------------- */
.reading{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--card); display:flex; flex-direction:column;
}
.reading .fact{padding:24px 24px 20px; border-bottom:1px dashed var(--line); display:flex; flex-direction:column; gap:10px}
.reading .tag{font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}
.reading .num{font-family:"Bodoni Moda",Georgia,serif; font-size:2.1rem; font-weight:600; color:var(--ink); line-height:1.05; font-variant-numeric:tabular-nums}
.reading .fact p{font-size:.9rem}
.reading .rd{padding:20px 24px 24px; background:var(--card-2); display:flex; flex-direction:column; gap:10px; position:relative}
.reading .rd::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--coral)}
.reading .rd .tag{color:var(--coral)}
.reading .rd p{font-size:.9rem; color:var(--body)}
.reading .rd b{color:var(--ink); font-weight:600}

/* metodología ------------------------------------------------- */
.method{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative}
@media (max-width:860px){.method{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.method{grid-template-columns:1fr}}
.step{padding:28px 24px 26px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:11px; position:relative}
.step:first-child{border-left:0}
@media (max-width:860px){.step:nth-child(3){border-left:0} .step:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:520px){.step{border-left:0; border-top:1px solid var(--line)} .step:first-child{border-top:0}}
.step .n{font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.72rem; letter-spacing:.14em; color:var(--accent-ink)}
.step h3{font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:1.5rem; letter-spacing:.02em}
.step p{font-size:.88rem}

/* demo power bi ------------------------------------------------ */
.demo{
  background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow);
}
.demo-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:16px 20px; border-bottom:1px solid var(--line); background:var(--bg-alt);
}
.demo-bar .lb{font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-right:4px}
.chip{
  padding:7px 15px; border-radius:999px; border:1px solid var(--line); background:var(--card);
  font-size:.815rem; font-weight:500; color:var(--body); cursor:pointer; transition:all .16s ease;
}
.chip:hover{border-color:var(--accent); color:var(--accent-ink)}
.chip[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:#fff}
:root[data-theme="dark"] .chip[aria-pressed="true"]{background:var(--teal); border-color:var(--teal); color:#04202a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chip[aria-pressed="true"]{background:var(--teal); border-color:var(--teal); color:#04202a}}
.demo-body{padding:22px 20px 24px; display:grid; gap:18px; grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.demo-body{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.demo-body{grid-template-columns:1fr}}
.tile{border:1px solid var(--line); border-radius:12px; padding:16px 16px 14px; background:var(--card-2)}
.tile .lab{font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.65rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:8px}
.tile .val{font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:1.85rem; font-weight:600; color:var(--ink); display:block; line-height:1; font-variant-numeric:tabular-nums}
.tile .sub{font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.7rem; margin-top:7px; display:block; color:var(--muted); font-variant-numeric:tabular-nums}
.span-2{grid-column:span 2}
@media (max-width:560px){.span-2{grid-column:span 1}}
.panel{border:1px solid var(--line); border-radius:12px; padding:16px; background:var(--card-2)}
.panel h4{font-size:.85rem; font-weight:600; margin-bottom:14px; letter-spacing:.01em}
.legend{display:flex; flex-wrap:wrap; gap:12px; margin-top:12px}
.legend span{display:inline-flex; align-items:center; gap:7px; font-size:.775rem; color:var(--body); font-variant-numeric:tabular-nums}
.legend i{width:10px; height:10px; border-radius:3px; display:block; flex:none}
.tooltip{
  position:fixed; z-index:200; pointer-events:none; opacity:0; transform:translate(-50%,-115%);
  background:var(--ground); color:#EAF1F9; border:1px solid var(--ground-line); border-radius:9px;
  padding:8px 11px; font-size:.78rem; line-height:1.45; white-space:nowrap; transition:opacity .12s ease;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.6); font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.tooltip.on{opacity:1}

/* tabla -------------------------------------------------------- */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--card)}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:.9rem}
th,td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line-soft)}
thead th{
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:500; background:var(--bg-alt);
}
tbody tr:last-child td{border-bottom:0}
td strong{color:var(--ink); font-weight:600}

/* paquetes ------------------------------------------------------ */
.plan{
  border:1px solid var(--line); border-radius:16px; padding:28px 26px; background:var(--card);
  display:flex; flex-direction:column; gap:16px; position:relative;
}
.plan.featured{border-color:var(--teal); box-shadow:0 24px 60px -34px rgba(0,168,181,.5)}
.plan .badge{
  position:absolute; top:-11px; left:26px; background:var(--teal); color:#04202a;
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.63rem; letter-spacing:.13em; text-transform:uppercase;
  padding:4px 11px; border-radius:999px; font-weight:600;
}
.plan .pname{font-family:"Bodoni Moda",Georgia,serif; font-size:1.62rem; font-weight:600; color:var(--ink); letter-spacing:.03em}
.plan .price{font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:1.02rem; color:var(--accent-ink); font-weight:500; font-variant-numeric:tabular-nums}
.plan ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px}
.plan li{font-size:.885rem; padding-left:24px; position:relative}
.plan li::before{
  content:""; position:absolute; left:0; top:8px; width:11px; height:6px;
  border-left:2px solid var(--teal); border-bottom:2px solid var(--teal); transform:rotate(-45deg);
}

/* diagnóstico ---------------------------------------------------- */
.quiz{border:1px solid var(--line); border-radius:18px; background:var(--card); overflow:hidden; box-shadow:var(--shadow)}
.quiz-top{padding:22px 26px; border-bottom:1px solid var(--line); background:var(--bg-alt); display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between}
.progress{height:4px; background:var(--line); border-radius:4px; overflow:hidden; flex:1 1 180px; min-width:140px}
.progress i{display:block; height:100%; background:var(--teal); width:0; transition:width .35s cubic-bezier(.4,0,.2,1)}
.quiz-body{padding:30px 26px 32px; display:flex; flex-direction:column; gap:22px}
.quiz-body h3{font-size:1.3rem}
.opts{display:flex; flex-direction:column; gap:10px}
.opt{
  text-align:left; padding:15px 18px; border-radius:11px; border:1px solid var(--line);
  background:var(--card-2); color:var(--body); font-size:.92rem; cursor:pointer;
  transition:all .16s ease; display:flex; align-items:center; gap:13px;
}
.opt:hover{border-color:var(--teal); color:var(--ink); transform:translateX(3px)}
.opt .k{
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.72rem; width:24px; height:24px; flex:none;
  border-radius:6px; display:grid; place-items:center; background:var(--line-soft); color:var(--muted);
}
.opt:hover .k{background:var(--teal); color:#04202a}
.result{display:flex; flex-direction:column; gap:18px}
.result .lvl{font-family:"Bodoni Moda",Georgia,serif; font-size:2rem; font-weight:600; color:var(--ink)}
.meter{display:flex; gap:6px}
.meter i{height:8px; flex:1; border-radius:3px; background:var(--line)}
.meter i.on{background:var(--teal)}

/* formulario ------------------------------------------------------ */
.form{display:grid; gap:16px; grid-template-columns:1fr 1fr}
@media (max-width:640px){.form{grid-template-columns:1fr}}
.field{display:flex; flex-direction:column; gap:7px}
.field.full{grid-column:1/-1}
.field label{font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
.field input,.field select,.field textarea{
  font-family:inherit; font-size:.94rem; padding:13px 15px; border-radius:10px;
  border:1px solid var(--line); background:var(--card-2); color:var(--ink); width:100%;
}
.field textarea{resize:vertical; min-height:118px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 18%, transparent)}
.form-note{font-size:.8rem; color:var(--muted)}
.sent{
  grid-column:1/-1; border:1px solid var(--teal); background:color-mix(in srgb,var(--teal) 9%, transparent);
  border-radius:11px; padding:16px 18px; font-size:.9rem; color:var(--ink); display:none;
}
.sent.on{display:block}

/* faq --------------------------------------------------------------- */
details.faq{border-bottom:1px solid var(--line); padding:4px 0}
details.faq summary{
  cursor:pointer; list-style:none; padding:18px 34px 18px 0; position:relative;
  font-weight:600; color:var(--ink); font-size:1rem;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{
  content:"+"; position:absolute; right:6px; top:16px; font-size:1.3rem; font-weight:400;
  color:var(--accent-ink); transition:transform .2s ease;
}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq p{padding:0 0 20px; font-size:.93rem; max-width:70ch}

/* cta final ---------------------------------------------------------- */
.cta-band{position:relative; overflow:hidden}
.cta-band .wrap{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; gap:24px}
.cta-band h2{font-size:clamp(2rem,4.2vw,3.2rem)}

/* footer -------------------------------------------------------------- */
footer.site{background:var(--ground); color:var(--ground-body); padding:64px 0 28px; border-top:1px solid var(--ground-line)}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr; gap:32px}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
footer.site h4{font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:#7FA0C0; font-weight:500; margin-bottom:16px}
footer.site a{color:#A9C0D6; text-decoration:none; font-size:.89rem; display:block; padding:5px 0; transition:color .15s}
footer.site a:hover{color:#4FD8E2}
.foot-brand{display:flex; align-items:center; gap:11px; margin-bottom:16px}
.foot-brand img{width:38px}
.foot-brand b{font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:1.3rem; letter-spacing:.055em; color:#F2F7FC; font-weight:600}
.foot-brand span{font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.54rem; letter-spacing:.23em; color:#7FA0C0; display:block; margin-top:4px}
.foot-bottom{
  margin-top:48px; padding-top:22px; border-top:1px solid var(--ground-line);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  font-size:.79rem; color:#6F8CAB; font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* Posicionamiento destacado del carrusel: aparece inmediatamente después del Hero. */
.carousel-prominent{padding-top:clamp(64px,7vw,92px);padding-bottom:clamp(64px,7vw,92px);position:relative;z-index:3}
.carousel-prominent .car-head{margin-bottom:32px}
.carousel-prominent .sec-head .display{max-width:900px}
.carousel-prominent .car-view{padding-top:14px;padding-bottom:20px}
.carousel-prominent .slide{box-shadow:0 16px 42px -28px rgba(8,35,58,.28)}
@media (min-width:1100px){.carousel-prominent .slide{flex-basis:calc((100% - 48px)/3)}}

/* carrusel de soluciones -------------------------------------------------- */
.carousel{position:relative}
.car-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; flex-wrap:wrap}
.car-nav{display:flex; align-items:center; gap:10px; flex:none}
.car-btn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--card);
  color:var(--ink); display:grid; place-items:center; cursor:pointer;
  transition:background .18s, border-color .18s, color .18s, transform .18s;
}
.car-btn:hover{background:var(--navy); border-color:var(--navy); color:#fff; transform:translateY(-2px)}
:root[data-theme="dark"] .car-btn:hover{background:var(--teal); border-color:var(--teal); color:#04202a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .car-btn:hover{background:var(--teal); border-color:var(--teal); color:#04202a}}
.car-btn:disabled{opacity:.35; cursor:default; transform:none}
.car-view{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:10px 2px 14px; margin:0 -2px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.car-view::-webkit-scrollbar{display:none}
.slide{will-change:transform,opacity,filter; scroll-snap-align:start}
/* Transición premium: desvanecer + desplazamiento + micro-zoom. */
.slide.entering-next{animation:pptEnterNext 1.15s cubic-bezier(.22,.61,.36,1) both}
.slide.entering-prev{animation:pptEnterPrev 1.15s cubic-bezier(.22,.61,.36,1) both}
.slide.exiting-next{animation:pptExitNext .85s cubic-bezier(.4,0,.2,1) both}
.slide.exiting-prev{animation:pptExitPrev .85s cubic-bezier(.4,0,.2,1) both}
.slide.entering-next .slide-img img,.slide.entering-prev .slide-img img{animation:pptImageIn 1.05s cubic-bezier(.22,.61,.36,1) both}
@keyframes pptEnterNext{0%{opacity:0;transform:translate3d(52px,0,0) scale(.975);filter:blur(2px)}60%{opacity:1;transform:translate3d(-4px,0,0) scale(1.008);filter:blur(0)}100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}}
@keyframes pptEnterPrev{0%{opacity:0;transform:translate3d(-52px,0,0) scale(.975);filter:blur(2px)}60%{opacity:1;transform:translate3d(4px,0,0) scale(1.008);filter:blur(0)}100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}}
@keyframes pptExitNext{0%{opacity:1;transform:translate3d(0,0,0) scale(1)}100%{opacity:.62;transform:translate3d(-18px,0,0) scale(.992)}}
@keyframes pptExitPrev{0%{opacity:1;transform:translate3d(0,0,0) scale(1)}100%{opacity:.62;transform:translate3d(18px,0,0) scale(.992)}}
@keyframes pptImageIn{0%{transform:scale(1.08);filter:saturate(.88)}100%{transform:scale(1);filter:saturate(1)}}
/* El carrusel siempre deja una lectura clara de entrada/salida. */
.slide.entering-next,.slide.entering-prev{animation-duration:1.05s}
.slide.exiting-next,.slide.exiting-prev{animation-duration:.72s}

@media (prefers-reduced-motion:reduce){.car-view{scroll-behavior:auto}.slide.entering-next,.slide.entering-prev,.slide.exiting-next,.slide.exiting-prev,.slide.entering-next .slide-img img,.slide.entering-prev .slide-img img,.slide.active .slide-img img,.slide.active .slide-img::after{animation:none!important}}
.slide{
  flex:0 0 calc((100% - 40px) / 3); scroll-snap-align:start; min-width:0;
  background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease;
}
@media (max-width:1000px){.slide{flex-basis:calc((100% - 20px) / 2)}}
@media (max-width:660px){.slide{flex-basis:86%}}
.slide:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb,var(--teal) 55%, var(--line))}
.slide{position:relative; isolation:isolate}
.slide::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--teal),#3B6FD4);transform:scaleX(0);transform-origin:left;transition:transform .45s ease;z-index:5}
.slide.active{transform:translateY(-4px);box-shadow:0 22px 55px -28px rgba(8,35,58,.42);border-color:color-mix(in srgb,var(--teal) 62%,var(--line))}
.slide.active::before{transform:scaleX(1)}
.slide-img img{will-change:transform,filter}
.slide.active .slide-img img{animation-play-state:running}
.slide:hover .slide-img img{animation-play-state:running}
.slide-icon{position:absolute;z-index:3;right:14px;top:14px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--navy);box-shadow:0 8px 22px rgba(8,20,36,.18);backdrop-filter:blur(7px);transition:transform .25s ease,background .25s ease,color .25s ease}
.slide-icon svg{width:20px;height:20px}
.slide:hover .slide-icon{transform:translateY(-2px) scale(1.04);background:var(--teal);color:#04202a}
.slide-cat{padding-right:50px}
@media (prefers-reduced-motion:reduce){.slide.entering,.slide.entering .slide-img img{animation:none}.slide,.slide-img img,.slide-icon{transition:none}}

.slide-img{position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--ground)}
.slide-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.slide:hover .slide-img img{transform:scale(1.06)}
.slide-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,20,36,0) 42%, rgba(8,20,36,.82) 100%);
}
.slide-cat{
  position:absolute; z-index:2; top:14px; left:14px; font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:#04202a;
  background:var(--teal); padding:5px 11px; border-radius:999px; font-weight:600;
}
.slide-cat.pk{background:var(--coral); color:#3a0f0f}
.slide-title{
  position:absolute; z-index:2; left:18px; right:18px; bottom:14px;
  font-family:"Bodoni Moda",Georgia,serif; font-size:1.42rem; font-weight:600; color:#fff;
  line-height:1.15; text-wrap:balance;
}
.slide-body{padding:20px 20px 22px; display:flex; flex-direction:column; gap:12px; flex:1}
.slide-body p{font-size:.9rem; color:var(--body); flex:1}
.slide-foot{display:flex; align-items:center; justify-content:space-between; gap:10px}
.slide-price{font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.8rem; color:var(--accent-ink); font-variant-numeric:tabular-nums}
.car-dots{display:flex; justify-content:center; gap:8px; margin-top:24px}
.car-dots button{
  position:relative; width:8px; height:8px; padding:0; border-radius:50%; border:0; background:var(--line);
  cursor:pointer; overflow:hidden; transition:width .3s ease, background .3s ease, transform .3s ease;
}
.car-dots button[aria-current="true"]{width:34px; border-radius:6px; background:var(--line)}
.car-dots button[aria-current="true"]::after{
  content:""; position:absolute; inset:0; border-radius:inherit; background:var(--teal);
  transform:scaleX(0); transform-origin:left; animation:dotProgress 6.2s linear forwards;
}
.carousel.is-paused .car-dots button[aria-current="true"]::after{animation-play-state:paused}
@keyframes dotProgress{to{transform:scaleX(1)}}
.car-status{display:flex; justify-content:center; align-items:center; gap:8px; margin-top:12px; color:var(--muted); font-family:"Poppins",sans-serif; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase}
.car-status .pulse{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(0,168,181,.35);animation:pulse 2s infinite}
.carousel.is-paused .car-status .pulse{animation:none;opacity:.45}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,168,181,.3)}50%{box-shadow:0 0 0 6px rgba(0,168,181,0)}}
.car-hint{
  text-align:center; opacity:.8; margin-top:10px; font-family:"Poppins",sans-serif;
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
@media (prefers-reduced-motion:reduce){.car-dots button[aria-current="true"]::after,.car-status .pulse{animation:none}}

/* detalle de producto ------------------------------------------------------ */
.pd-hero{position:relative; overflow:hidden; background:var(--ground); padding:0}
.pd-hero-img{position:absolute; inset:0}
.pd-hero-img img{width:100%; height:100%; object-fit:cover}
.pd-hero-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(8,20,36,.96) 0%, rgba(8,20,36,.88) 42%, rgba(8,20,36,.5) 100%);
}
.pd-hero .wrap{position:relative; z-index:2; padding-top:clamp(34px,4vw,52px); padding-bottom:clamp(46px,6vw,74px)}
.pd-hero .lede{color:#A9C0D6; max-width:64ch}
.pd-hero .eyebrow{color:#4FD8E2}
.back-link{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; margin-bottom:26px;
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:#8FB0CE; padding:8px 14px 8px 10px; border:1px solid rgba(160,195,230,.28); border-radius:999px;
  transition:color .18s, border-color .18s, transform .18s;
}
.back-link:hover{color:#4FD8E2; border-color:#4FD8E2; transform:translateX(-3px)}
.pd-meta{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px}
.pd-tag{
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.65rem; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; font-weight:600; background:var(--teal); color:#04202a;
}
.pd-tag.pk{background:var(--coral); color:#3a0f0f}
.pd-price{
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.8rem; color:#9FB4CC;
  border:1px solid var(--ground-line); border-radius:999px; padding:6px 13px; font-variant-numeric:tabular-nums;
}
.pd-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(30px,4vw,56px); align-items:start}
@media (max-width:900px){.pd-grid{grid-template-columns:1fr}}
.check-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px}
.check-list li{font-size:.94rem; padding-left:28px; position:relative; color:var(--body)}
.check-list li::before{
  content:""; position:absolute; left:2px; top:8px; width:12px; height:7px;
  border-left:2px solid var(--teal); border-bottom:2px solid var(--teal); transform:rotate(-45deg);
}
.spec-table{width:100%; min-width:0; border-collapse:collapse; font-size:.9rem}
.spec-table th{
  width:40%; text-align:left; padding:13px 0; border-bottom:1px solid var(--line-soft);
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.68rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); font-weight:500; background:transparent; vertical-align:top;
}
.spec-table td{padding:13px 0 13px 16px; border-bottom:1px solid var(--line-soft); color:var(--ink)}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.benefit{display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--line)}
.benefit:last-child{border-bottom:0}
.benefit .bn{
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.7rem; color:var(--accent-ink);
  flex:none; width:26px; padding-top:4px; font-variant-numeric:tabular-nums;
}
.benefit h4{font-size:1rem; margin-bottom:4px}
.benefit p{font-size:.9rem}
.pd-aside{
  position:sticky; top:100px; border:1px solid var(--line); border-radius:16px;
  background:var(--card); padding:24px; display:flex; flex-direction:column; gap:16px;
}
@media (max-width:900px){.pd-aside{position:static}}
.pd-next{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px}
@media (max-width:620px){.pd-next{grid-template-columns:1fr}}
.pd-next a{
  display:flex; flex-direction:column; gap:6px; padding:20px 22px; text-decoration:none;
  border:1px solid var(--line); border-radius:14px; background:var(--card); transition:border-color .2s, transform .2s;
}
.pd-next a:hover{border-color:var(--accent); transform:translateY(-3px)}
.pd-next span{font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.pd-next b{font-family:"Bodoni Moda",Georgia,serif; font-size:1.2rem; font-weight:600; color:var(--ink)}
.pd-next a.next{text-align:right; align-items:flex-end}

/* utilidades ------------------------------------------------------------- */
.page{display:none}
.page.active{display:block; animation:fade .4s ease}
@keyframes fade{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
  .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
}
.divider{height:1px; background:var(--line); border:0; margin:0}
.quote{
  font-family:"Bodoni Moda",Georgia,serif; font-size:clamp(1.5rem,3vw,2.2rem); font-weight:500;
  line-height:1.35; color:var(--ink); font-style:italic; max-width:22ch;
}
.badge-soft{
  display:inline-flex; align-items:center; gap:8px; font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; color:var(--accent-ink);
  border:1px solid color-mix(in srgb,var(--teal) 35%, transparent); border-radius:999px; padding:6px 13px;
}
.two-col{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,64px); align-items:center}
@media (max-width:880px){.two-col{grid-template-columns:1fr; gap:36px}}
.value-row{display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line)}
.value-row:last-child{border-bottom:0}
.value-row .vn{font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:.72rem; color:var(--accent-ink); padding-top:4px; flex:none; width:30px}
.value-row h3{font-size:1.05rem; margin-bottom:5px}
.value-row p{font-size:.9rem}

/* MAKREDATA · Showcase de herramientas inspirado en la propuesta visual */
.tools-showcase{margin-top:34px;padding:28px 0 6px;border-top:1px solid rgba(127,160,192,.16)}
.tools-showcase-head{text-align:center;max-width:900px;margin:0 auto 26px}
.tools-showcase-head .eyebrow{display:block;margin-bottom:9px}
.tools-showcase-head h2{font-size:clamp(1.65rem,2.5vw,2.45rem);margin:0 auto 10px}
.tools-showcase-head p{max-width:760px;margin:0 auto;color:var(--muted);font-size:.94rem;line-height:1.75}
.tools-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;width:100%}
.tool-card{min-width:0;min-height:174px;padding:22px 18px 18px;border:1px solid #22415F;border-radius:18px;background:linear-gradient(160deg,rgba(10,31,52,.92),rgba(6,22,38,.96));box-shadow:0 18px 35px -28px rgba(0,0,0,.9);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.tool-card:hover{transform:translateY(-5px);border-color:rgba(0,209,218,.48);box-shadow:0 22px 42px -28px rgba(0,209,218,.24)}
.tool-icon{width:46px;height:46px;display:flex;align-items:center;justify-content:center;color:var(--teal);margin-bottom:13px}
.tool-icon svg{width:42px;height:42px;display:block}
.tool-icon.excel{color:#35c88a}.tool-icon.powerbi{color:#f2c230}.tool-icon.sql{color:#28a8e0}
.tool-card h3{font-family:"Poppins",sans-serif;font-size:1rem;margin:0;color:#f5f8fb;font-weight:600;letter-spacing:-.01em}
.tool-card i{display:block;width:32px;height:2px;background:var(--teal);margin:10px 0 12px}
.tool-card p{font-family:"Poppins",sans-serif;font-size:.76rem;line-height:1.65;color:#a9bdd2;margin:0}
@media(max-width:1150px){.tools-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tool-card{min-height:155px}}
@media(max-width:680px){.tools-showcase{padding-top:22px}.tools-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tool-card{padding:17px 14px;min-height:150px}.tool-card p{font-size:.7rem}.tool-icon,.tool-icon svg{width:38px;height:38px}}
@media(max-width:430px){.tools-grid{grid-template-columns:1fr}.tool-card{min-height:auto}}

/* ============================================================
   MAKREDATA V13 — tipografía y herramientas a ancho completo
   ============================================================ */
html,body{font-family:"Poppins",sans-serif}
body,p,li,input,textarea,select,button{font-family:"Poppins",sans-serif}
h1,h2,h3,h4,h5,h6,.btn,.nav a,.brand b,.foot-brand b,.tool-card h3{font-family:"Montserrat",sans-serif}
.display,.slide-title,.plan .pname,.pd-next b,.kpi .val,.reading .num,.result .lvl,.tools-showcase-head h2{font-family:"Bodoni Moda",Georgia,serif}

.hero-tools-wrap{position:relative;z-index:3;margin-top:10px}
.tools-showcase{width:100%;margin-top:18px;padding:34px 0 8px;border-top:1px solid rgba(127,160,192,.16)}
.tools-showcase-head{max-width:960px;margin:0 auto 24px;text-align:center}
.tools-showcase-head h2{font-size:clamp(1.65rem,2.5vw,2.45rem);margin:0 auto 10px}
.tools-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;width:100%;align-items:stretch}
.tool-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0;min-height:0;height:100%;padding:22px 18px 20px;border:1px solid #22415F;border-radius:18px;background:linear-gradient(160deg,rgba(10,31,52,.92),rgba(6,22,38,.96));box-shadow:0 18px 35px -28px rgba(0,0,0,.9);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.tool-card .tool-icon{width:46px;height:46px;margin-bottom:12px;flex:none}
.tool-card h3{font-size:.98rem;line-height:1.15;min-height:2.3em;display:flex;align-items:flex-start;margin:0;color:#f5f8fb;font-weight:600}
.tool-card i{width:32px;height:2px;margin:9px 0 11px;background:var(--teal);flex:none}
.tool-card p{font-family:"Poppins",sans-serif;font-size:.72rem;line-height:1.55;color:#a9bdd2;margin:0}
.tool-card:hover{transform:translateY(-5px);border-color:rgba(0,209,218,.52);box-shadow:0 22px 42px -28px rgba(0,209,218,.24)}
.back-link{font-family:"Montserrat",sans-serif}
@media(max-width:1150px){.tools-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tool-card{min-height:165px}}
@media(max-width:680px){.hero-tools-wrap{margin-top:0}.tools-showcase{padding-top:26px}.tools-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tool-card{padding:18px 14px;min-height:155px}.tool-card p{font-size:.69rem}}
@media(max-width:430px){.tools-grid{grid-template-columns:1fr}.tool-card{min-height:auto}}



/* ============================================================
   MAKREDATA FINAL — responsive contract
   ============================================================ */
html{overflow-x:hidden}
body{overflow-x:hidden}
header.site{z-index:100}
.wrap{width:100%}

/* Menu: on tablet/mobile it opens in document flow, never over content. */
@media (max-width:1100px){
  header.site .bar{flex-wrap:wrap;min-height:76px}
  nav.main{
    position:static!important;
    order:3;
    flex:0 0 100%!important;
    width:100%;
    max-height:0;
    overflow:hidden;
    transform:none!important;
    box-shadow:none!important;
    padding:0!important;
    margin:0!important;
    background:var(--bg);
    border:0;
    transition:max-height .32s ease,padding .32s ease,border-color .32s ease;
  }
  nav.main.open{
    max-height:520px;
    padding:8px 0 12px!important;
    border-top:1px solid var(--line-soft);
    border-bottom:1px solid var(--line);
  }
  nav.main a{
    min-height:48px;
    padding:12px 14px!important;
    border-bottom:1px solid var(--line-soft);
    border-radius:10px!important;
    flex-direction:row!important;
    justify-content:flex-start!important;
    text-align:left!important;
    white-space:normal!important;
  }
  nav.main a:last-child{border-bottom:0}
  nav.main a:hover{background:var(--bg-alt)}
  .burger{display:grid!important}
  .head-cta{display:none!important}
}

/* The carousel itself: compact cards, full content, real videos. */
#carousel .car-view{
  display:flex!important;
  gap:18px!important;
  overflow:hidden!important;
  padding:8px 2px 16px!important;
  margin:0!important;
}
#carousel .slide{
  flex:0 0 calc((100% - 36px)/3)!important;
  min-width:0!important;
  height:auto!important;
  overflow:hidden!important;
  align-self:stretch!important;
}
#carousel .slide-img{
  aspect-ratio:16/8!important;
  min-height:150px;
  position:relative!important;
  overflow:hidden!important;
  background:#071827!important;
}
#carousel .slide-img > img{display:none!important}
#carousel .slide-img > video.mkd-video{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:cover!important;display:block!important;z-index:1!important;
  background:#071827!important;opacity:.55!important;visibility:visible!important;
  transition:opacity .45s ease,transform 3s ease,filter .45s ease!important;
}
#carousel .slide.active .slide-img > video.mkd-video{
  opacity:1!important;transform:scale(1.01)!important;filter:saturate(1.04) contrast(1.02)!important;
}
#carousel .slide.mkd-clear .slide-img > video.mkd-video{
  opacity:.72!important;transform:scale(1)!important;filter:saturate(.9) brightness(1.04)!important;
}
#carousel .slide-img::after{z-index:2!important;pointer-events:none!important}
#carousel .slide-icon,#carousel .slide-cat,#carousel .slide-title{z-index:5!important}
#carousel .slide-body{min-height:0!important;height:auto!important;flex:1 1 auto!important}
#carousel .slide-body p,
#carousel .slide-title,
#carousel .slide-price,
#carousel .arrow-link{overflow:visible!important;text-overflow:clip!important;white-space:normal!important;word-break:normal!important;overflow-wrap:anywhere}
#carousel .slide-title{line-height:1.16!important}
#carousel .slide-body p{line-height:1.5!important}
#carousel .slide.active{background:#0B1B2E!important;border-color:#00A8B5!important;color:#EAF1F9!important}
#carousel .slide.active .slide-body p{color:#D7E4F1!important}
#carousel .slide.active .slide-price,#carousel .slide.active .arrow-link{color:#22C1CC!important}
#carousel .slide.active .slide-title{background:rgba(7,24,39,.72)!important;color:#fff!important}
#carousel .slide.mkd-clear .slide-title{background:rgba(7,24,39,.48)!important;color:#fff!important}
#carousel .car-dots button[aria-current="true"]::after{animation:dotProgress 3s linear forwards!important}

/* Tablet and mobile-horizontal: 3 cards. Mobile-vertical: 1 card. */
@media (min-width:600px){
  #carousel .slide{flex-basis:calc((100% - 36px)/3)!important}
  #carousel .slide-img{aspect-ratio:16/8!important;min-height:130px}
}
@media (max-width:599px){
  #carousel .car-view{gap:0!important}
  #carousel .slide{flex-basis:100%!important}
  #carousel .slide-img{aspect-ratio:16/9!important;min-height:0}
  #carousel .slide-body{padding:18px 18px 20px!important}
  #carousel .slide-title{font-size:1.24rem!important}
}
@media (min-width:600px) and (max-width:1100px){
  #carousel .slide-body{padding:16px 16px 18px!important}
  #carousel .slide-title{font-size:1.18rem!important}
  #carousel .slide-body p{font-size:.84rem!important}
}
@media (min-width:1101px){
  #carousel .slide-body{padding:18px 18px 20px!important}
  #carousel .slide-title{font-size:1.28rem!important}
}

/* Never hide card content to force equal heights. */
#carousel .slide,
#carousel .slide-body,
#carousel .slide-foot{min-height:0}
#carousel .slide-foot{flex-wrap:wrap}

/* Reduced motion remains accessible. */
@media (prefers-reduced-motion:reduce){
  #carousel .slide-img > video.mkd-video{transition:none!important}
  nav.main{transition:none!important}
}

/* ============================================================
   MAKREDATA FINAL — carrusel cinematográfico y responsive
   Los 7 videos permanecen en DOM para evitar recargas/cortes.
   ============================================================ */
#carousel .car-view{
  position:relative!important;
  display:block!important;
  overflow:hidden!important;
  min-height:420px;
  height:auto;
  padding:8px 2px 16px!important;
}
#carousel .car-view .slide{
  position:absolute!important;
  top:8px!important;
  left:0!important;
  width:calc((100% - 36px)/3)!important;
  min-width:0!important;
  margin:0!important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  overflow:visible!important;
  transform:translate3d(110%,0,0);
  transition:transform .72s cubic-bezier(.22,.61,.36,1),opacity .72s ease,filter .72s ease,box-shadow .45s ease,background-color .45s ease,border-color .45s ease!important;
}
#carousel .car-view .slide.mkd-visible{visibility:visible}
#carousel .slide-img{aspect-ratio:16/8!important;min-height:150px!important}
#carousel .slide-img > video.mkd-video{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:cover!important;display:block!important;z-index:1!important;
  background:transparent!important;opacity:1!important;visibility:visible!important;
  transition:opacity .72s ease,filter .72s ease,transform 1.2s ease!important;
}
#carousel .slide.mkd-clear .slide-img > video.mkd-video{opacity:1!important;filter:saturate(.86) brightness(1.02)!important}
#carousel .slide.active .slide-img > video.mkd-video{opacity:1!important;filter:saturate(1.04) contrast(1.03)!important}
#carousel .slide.video-error .slide-img{background:var(--card)!important}
#carousel .slide.video-error .slide-img::before{display:none!important;content:none!important}
#carousel .slide-title,#carousel .slide-body p,#carousel .slide-price,#carousel .arrow-link{overflow:visible!important;text-overflow:clip!important;white-space:normal!important;word-break:normal!important;overflow-wrap:anywhere!important}
#carousel .slide-body{height:auto!important;min-height:0!important}
#carousel .slide-foot{flex-wrap:wrap!important}
@media (min-width:600px){
  #carousel .car-view{min-height:420px}
  #carousel .car-view .slide{width:calc((100% - 36px)/3)!important}
}
@media (max-width:599px){
  #carousel .car-view{min-height:0!important;padding:8px 0 16px!important}
  #carousel .car-view .slide{width:100%!important}
  #carousel .slide-img{aspect-ratio:16/9!important;min-height:0!important}
  #carousel .slide-body{padding:18px 18px 20px!important}
  #carousel .slide-title{font-size:1.24rem!important}
}
/* El layout del carrusel no debe generar desplazamiento lateral. */
html,body{max-width:100%;overflow-x:hidden!important}

/* ===== Responsive final: el header nunca puede comprimir ni cortar la portada ===== */
@media (max-width:1100px){
  header.site .bar{align-items:center;min-width:0;width:100%;}
  .brand{flex:1 1 auto!important;min-width:0!important;width:auto!important;max-width:calc(100% - 110px);}
  .brand .wm{min-width:0;overflow:visible}
  .brand .wm b,.brand .wm span{white-space:nowrap}
  .head-actions{margin-left:auto;flex:0 0 auto}
}
@media (max-width:599px){
  header.site .bar{min-height:68px;gap:8px;padding-left:12px;padding-right:12px}
  .brand{gap:7px;max-width:calc(100% - 92px)}
  .brand img{width:30px!important}
  .brand .wm b{font-size:1rem!important;letter-spacing:.045em}
  .brand .wm span{font-size:.42rem!important;letter-spacing:.17em;margin-top:3px}
  .head-actions{gap:6px}
  .icon-btn{width:36px;height:36px}
  nav.main.open{max-height:calc(100vh - 68px)!important;overflow-y:auto!important}
  #inicio .hero-grid{width:100%!important;max-width:100%!important}
  #inicio .hero-grid>*{min-width:0!important;max-width:100%!important}
  #inicio h1{font-size:clamp(2rem,11vw,3rem)!important;line-height:1.02!important;overflow-wrap:break-word!important;word-break:normal!important}
  #inicio .hero .lede{font-size:1rem!important;line-height:1.58!important}
  #inicio .dash{width:100%!important;max-width:100%!important;padding:16px!important}
  #inicio .kpis{grid-template-columns:1fr!important}
  #inicio .kpi{min-width:0!important}
  #inicio .tools-grid{grid-template-columns:1fr!important}
}

/* Menú móvil ultraestrecho (incluye el previsualizador de WordPress). */
@media (max-width:360px){
  header.site .bar{padding-left:9px;padding-right:9px;gap:5px}
  .brand{max-width:calc(100% - 82px)!important}
  .brand img{width:27px!important}
  .brand .wm b{font-size:.9rem!important}
  .brand .wm span{font-size:.37rem!important;letter-spacing:.14em}
  .head-actions{gap:4px}
  .icon-btn{width:34px;height:34px}
}

/* ============================================================
   MAKREDATA V2.2 — correcciones finales de visualización
   ============================================================ */
/* MODO CLARO: todas las superficies que llevan .on-dark pasan a
   la estética clara; no se conserva un bloque oscuro accidental. */
html[data-theme="light"] .on-dark{
  background:var(--bg)!important;
  color:var(--body)!important;
}
html[data-theme="light"] .on-dark h1,
html[data-theme="light"] .on-dark h2,
html[data-theme="light"] .on-dark h3,
html[data-theme="light"] .on-dark h4,
html[data-theme="light"] .hero h1{
  color:var(--ink)!important;
}
html[data-theme="light"] .on-dark .lede{color:var(--body)!important}
html[data-theme="light"] .on-dark .eyebrow{color:var(--accent-ink)!important}
html[data-theme="light"] .on-dark .btn-ghost{
  color:var(--ink)!important;border-color:var(--line)!important;background:transparent!important
}
html[data-theme="light"] .on-dark .btn-ghost:hover{color:var(--accent-ink)!important;border-color:var(--accent)!important}
html[data-theme="light"] .on-dark .pill{
  color:var(--body)!important;background:var(--card)!important;border-color:var(--line)!important
}
html[data-theme="light"] .dash{
  background:var(--card)!important;border-color:var(--line)!important;
  box-shadow:var(--shadow-lg)!important
}
html[data-theme="light"] .dash-head .t,
html[data-theme="light"] .dash-chart .ct{color:var(--muted)!important}
html[data-theme="light"] .kpi,
html[data-theme="light"] .dash-chart{
  background:var(--card-2)!important;border-color:var(--line)!important
}
html[data-theme="light"] .kpi .lab{color:var(--muted)!important}
html[data-theme="light"] .kpi .val{color:var(--ink)!important}
html[data-theme="light"] .insight-strip{background:var(--card-2)!important;border-color:rgba(226,88,88,.28)!important;color:var(--body)!important}
html[data-theme="light"] #net{opacity:.18!important}

/* El carrusel nunca presenta una pantalla oscura como estado de carga. */
#carousel .slide-img{background:var(--card)!important}
#carousel .slide-img > video.mkd-video{background:transparent!important}
#carousel .slide.video-error .slide-img{background:var(--card)!important}
#carousel .slide.video-error .slide-img::before{display:none!important}

/* El estado oscuro sólo identifica la tarjeta seleccionada; nunca bloquea. */
#carousel .slide{cursor:pointer!important}
#carousel .slide.mkd-clear{pointer-events:auto!important}
#carousel .slide.active{pointer-events:auto!important}

/* Móvil: el contenedor no resta el padding al ancho disponible.
   Esto evita el recorte que aparece en el personalizador de WordPress. */
@media (max-width:1100px){
  .wrap{width:100%!important;max-width:var(--maxw)!important;padding-left:20px!important;padding-right:20px!important}
  header.site .wrap{width:100%!important;max-width:var(--maxw)!important;padding-left:14px!important;padding-right:14px!important}
}
@media (max-width:599px){
  .wrap{width:100%!important;padding-left:14px!important;padding-right:14px!important}
  header.site .wrap{padding-left:10px!important;padding-right:10px!important}
  #inicio .hero-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;gap:30px!important}
  #inicio .hero-grid>div{min-width:0!important;width:100%!important;max-width:100%!important}
  #inicio h1{font-size:clamp(2rem,12vw,3rem)!important;line-height:1.04!important;white-space:normal!important;overflow:visible!important;text-wrap:wrap!important;word-break:normal!important;overflow-wrap:break-word!important}
  #inicio .lede{max-width:none!important;white-space:normal!important;overflow:visible!important;word-break:normal!important;overflow-wrap:break-word!important}
  #inicio .dash{width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important}
  #inicio .kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
  #inicio .kpi{min-width:0!important;padding:10px 8px!important}
  #inicio .kpi .val{font-size:1.05rem!important}
  #inicio .kpi .lab{font-size:.55rem!important}
  #inicio .kpi .delta{font-size:.55rem!important}
  #inicio .dash-chart svg{max-width:100%!important}
  #carousel .car-view{width:100%!important;max-width:100%!important}
  #carousel .car-view .slide{width:100%!important;max-width:100%!important;left:0!important}
  #carousel .slide-img{aspect-ratio:16/9!important}
  #carousel .slide-title{font-size:1.12rem!important}
  #carousel .slide-body{padding:16px 16px 18px!important}
  #carousel .slide-body p{font-size:.92rem!important;line-height:1.5!important}
}
@media (min-width:600px) and (max-width:1100px){
  #carousel .car-view .slide{width:calc((100% - 36px)/3)!important}
}

/* En escritorio el menú siempre es horizontal y visible. */
@media (min-width:1101px){
  nav.main{position:static!important;transform:none!important;flex-direction:row!important;display:flex!important;visibility:visible!important;max-height:none!important;overflow:visible!important;background:transparent!important;box-shadow:none!important;padding:0!important;border:0!important}
  .burger{display:none!important}
  .head-cta{display:inline-flex!important}
}


/* ============================================================
   MAKREDATA V2.3 — contraste, carrusel y responsive definitivos
   ============================================================ */
/* Cada tema conserva su estética: siempre una tarjeta activa oscura
   y las otras dos claras, pero con superficies adecuadas al tema. */
html[data-theme="light"] #carousel .slide.mkd-clear{
  background:#FFFFFF!important;
  color:#14263D!important;
  border-color:#D9E3EC!important;
  box-shadow:0 12px 30px -24px rgba(8,35,58,.30)!important;
}
html[data-theme="light"] #carousel .slide.mkd-clear .slide-title{
  background:rgba(255,255,255,.88)!important;
  color:#14263D!important;
}
html[data-theme="light"] #carousel .slide.mkd-clear .slide-body p{color:#44566F!important}
html[data-theme="light"] #carousel .slide.mkd-clear .slide-price,
html[data-theme="light"] #carousel .slide.mkd-clear .arrow-link{color:#147E87!important}
html[data-theme="light"] #carousel .slide.active{
  background:#0B1B2E!important;
  color:#F5FAFF!important;
  border-color:#00A8B5!important;
}
html[data-theme="light"] #carousel .slide.active .slide-title{
  background:rgba(7,24,39,.82)!important;color:#FFFFFF!important;
}
html[data-theme="light"] #carousel .slide.active .slide-body p{color:#D7E4F1!important}

html[data-theme="dark"] #carousel .slide.mkd-clear{
  background:#132A44!important;
  color:#EAF1F9!important;
  border-color:#28445E!important;
  box-shadow:0 12px 30px -24px rgba(0,0,0,.55)!important;
}
html[data-theme="dark"] #carousel .slide.mkd-clear .slide-title{
  background:rgba(19,42,68,.88)!important;color:#EAF1F9!important;
}
html[data-theme="dark"] #carousel .slide.mkd-clear .slide-body p{color:#B9C9D8!important}
html[data-theme="dark"] #carousel .slide.mkd-clear .slide-price,
html[data-theme="dark"] #carousel .slide.mkd-clear .arrow-link{color:#5BE0E5!important}
html[data-theme="dark"] #carousel .slide.active{
  background:#071827!important;
  color:#F5FAFF!important;
  border-color:#22C1CC!important;
}
html[data-theme="dark"] #carousel .slide.active .slide-title{
  background:rgba(4,18,30,.88)!important;color:#FFFFFF!important;
}
html[data-theme="dark"] #carousel .slide.active .slide-body p{color:#D7E4F1!important}

/* Video real en las 7 tarjetas: sin poster, sin imagen sustituta y sin bloque de carga. */
#carousel .slide-img{overflow:hidden!important;background:var(--card)!important}
#carousel .slide-img > video.mkd-video{
  display:block!important;width:100%!important;height:100%!important;
  object-fit:cover!important;opacity:1!important;background:transparent!important;
  transition:opacity .8s ease, transform .8s ease, filter .8s ease!important;
}
#carousel .slide.active .slide-img > video.mkd-video{
  opacity:1!important;transform:scale(1.015)!important;
  filter:saturate(1.04) contrast(1.03)!important;
}
#carousel .slide.mkd-clear .slide-img > video.mkd-video{
  opacity:1!important;transform:scale(1)!important;
  filter:saturate(.82) brightness(1.04)!important;
}
/* Un error de red no convierte la tarjeta en un falso "video bloqueado". */
#carousel .slide.video-error .slide-img::before,
#carousel .slide.video-error .slide-img::after{display:none!important;content:none!important}

/* Crossfade real entre estados: primero sale el video, luego entra el siguiente. */
#carousel .slide{transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity .8s ease,filter .8s ease,box-shadow .45s ease,background-color .45s ease,border-color .45s ease!important}
#carousel .slide-img > video.mkd-video{transition:opacity .8s ease,transform .8s ease,filter .8s ease!important}

/* Nunca cortar títulos, descripciones, precios ni botones. */
#carousel .slide-title,
#carousel .slide-body p,
#carousel .slide-price,
#carousel .arrow-link{
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
  word-break:normal!important;overflow-wrap:anywhere!important;
}
#carousel .slide-body{height:auto!important;min-height:0!important;overflow:visible!important}
#carousel .slide-foot{height:auto!important;min-height:0!important;flex-wrap:wrap!important;align-items:flex-start!important}

/* Contraste global del modo claro: ningún texto secundario desaparece. */
html[data-theme="light"] body,
html[data-theme="light"] .section,
html[data-theme="light"] .wrap{color:#263A50}
html[data-theme="light"] .muted,
html[data-theme="light"] .small,
html[data-theme="light"] .lede,
html[data-theme="light"] p{color:#44566F}
html[data-theme="light"] .section h2,
html[data-theme="light"] .section h3,
html[data-theme="light"] .section h4,
html[data-theme="light"] .hero h1{color:#10243B!important}
html[data-theme="light"] header.site nav.main a{color:#243B55!important}
html[data-theme="light"] header.site nav.main a:hover{color:#0B7E88!important}
html[data-theme="light"] .head-cta{color:#FFFFFF!important}

/* Responsive: el ancho disponible manda y el contenido siempre crece en altura. */
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
img,svg,video{max-width:100%}
@media (max-width:1100px){
  .wrap{width:100%!important;max-width:100%!important}
  header.site .wrap{width:100%!important;max-width:100%!important}
  .hero-grid,.grid,.kpis,.tools-grid,.insights-grid{min-width:0!important}
  nav.main a{white-space:normal!important}
}
@media (max-width:599px){
  body{overflow-x:hidden!important}
  .wrap{padding-left:14px!important;padding-right:14px!important}
  header.site .wrap{padding-left:10px!important;padding-right:10px!important}
  header.site .brand{min-width:0!important;max-width:calc(100vw - 72px)!important}
  header.site .brand strong,header.site .brand small{white-space:normal!important;overflow-wrap:anywhere!important}
  #inicio h1,.hero h1{max-width:100%!important;white-space:normal!important;overflow:visible!important;word-break:normal!important;overflow-wrap:break-word!important}
  #inicio .lede,.hero .lede{max-width:100%!important;white-space:normal!important;overflow:visible!important;word-break:normal!important;overflow-wrap:anywhere!important}
  .hero-grid>*,.section-grid>*,.grid>*{min-width:0!important;max-width:100%!important}
  .btn,.btn-primary,.btn-ghost,.head-cta{max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important}
  #carousel .car-view{height:auto!important;min-height:0!important;overflow:visible!important}
  #carousel .car-view .slide{max-width:100%!important}
  #carousel .slide-img{aspect-ratio:16/9!important;min-height:0!important}
  #carousel .slide-body{padding:16px 16px 18px!important}
  #carousel .slide-title{font-size:1.12rem!important;line-height:1.22!important}
  #carousel .slide-body p{font-size:.92rem!important;line-height:1.5!important}
  #carousel .slide-foot{gap:10px!important}
}
@media (min-width:600px) and (max-width:1100px){
  #carousel .car-view .slide{width:calc((100% - 36px)/3)!important;max-width:calc((100% - 36px)/3)!important}
}
@media (min-width:1101px){
  nav.main{display:flex!important;flex-direction:row!important;position:static!important;visibility:visible!important;max-height:none!important;overflow:visible!important}
  .burger{display:none!important}
  .head-cta{display:inline-flex!important}
}


/* ============================================================
   MAKREDATA V2.4 — corrección estricta de legibilidad y móvil
   - En claro, las herramientas son realmente claras y legibles.
   - No se muestran textos auxiliares del carrusel sobre las tarjetas.
   - La tarjeta es la única superficie que contiene información del producto.
   ============================================================ */
html[data-theme="light"] .tools-showcase,
html[data-theme="light"] .tools-showcase-head{color:#10243B}
html[data-theme="light"] .tools-showcase-head p{color:#44566F!important}
html[data-theme="light"] .tool-card{
  background:#FFFFFF!important;
  border-color:#D9E3EC!important;
  color:#14263D!important;
  box-shadow:0 14px 34px -26px rgba(8,35,58,.28)!important;
}
html[data-theme="light"] .tool-card h3{color:#14263D!important}
html[data-theme="light"] .tool-card p{color:#44566F!important}
html[data-theme="light"] .tool-card i{background:#00A8B5!important}
html[data-theme="light"] .tool-card:hover{
  border-color:rgba(0,168,181,.55)!important;
  box-shadow:0 20px 38px -26px rgba(0,168,181,.22)!important;
}

/* Ningún texto auxiliar puede entrar visualmente en el área de una tarjeta. */
#carousel .car-status,
#carousel .car-hint{display:none!important}

/* El área del carrusel conserva una altura real en móvil, sin superposiciones. */
#carousel .car-view{overflow:hidden!important}
@media (max-width:599px){
  #carousel .car-view{width:100%!important;min-height:0!important}
  #carousel .car-view .slide{width:100%!important;max-width:100%!important}
}


/* ============================================================
   MAKREDATA V2.4 — corrección estricta solicitada
   ============================================================ */
/* Modo claro: ninguna tarjeta de herramientas conserva fondo oscuro
   con texto oscuro. Todas sus leyendas quedan con contraste alto. */
html[data-theme="light"] .tools-showcase,
html[data-theme="light"] .tools-showcase-head,
html[data-theme="light"] .tools-showcase-head h2{color:#10243B!important}
html[data-theme="light"] .tools-showcase-head p{color:#44566F!important}
html[data-theme="light"] .tool-card{
  background:#FFFFFF!important;
  border-color:#D9E3EC!important;
  color:#14263D!important;
  box-shadow:0 14px 34px -26px rgba(8,35,58,.28)!important;
}
html[data-theme="light"] .tool-card h3{color:#14263D!important}
html[data-theme="light"] .tool-card p{color:#44566F!important}
html[data-theme="light"] .tool-card i{background:#00A8B5!important}
html[data-theme="light"] .tool-card:hover{border-color:rgba(0,168,181,.55)!important}

/* En claro, los bloques que usan la clase de superficie oscura se vuelven
   claros de verdad, incluido el contenido secundario del dashboard. */
html[data-theme="light"] .on-dark{background:var(--bg)!important;color:var(--body)!important}
html[data-theme="light"] .on-dark h1,
html[data-theme="light"] .on-dark h2,
html[data-theme="light"] .on-dark h3,
html[data-theme="light"] .on-dark h4{color:var(--ink)!important}
html[data-theme="light"] .on-dark .lede{color:var(--body)!important}
html[data-theme="light"] .on-dark .eyebrow{color:var(--accent-ink)!important}
html[data-theme="light"] .on-dark .pill{
  color:var(--body)!important;background:var(--card)!important;border-color:var(--line)!important
}
html[data-theme="light"] .dash{
  background:var(--card)!important;border-color:var(--line)!important;box-shadow:var(--shadow-lg)!important
}
html[data-theme="light"] .dash-head .t,
html[data-theme="light"] .dash-chart .ct,
html[data-theme="light"] .kpi .lab{color:var(--muted)!important}
html[data-theme="light"] .kpi,
html[data-theme="light"] .dash-chart{background:var(--card-2)!important;border-color:var(--line)!important}
html[data-theme="light"] .kpi .val{color:var(--ink)!important}
html[data-theme="light"] .insight-strip{color:var(--body)!important}
html[data-theme="light"] .insight-strip p{color:var(--body)!important}
html[data-theme="light"] .insight-strip b{color:var(--ink)!important}

/* No se permite ningún texto auxiliar del carrusel dentro o sobre una tarjeta.
   La navegación sigue funcionando con flechas e indicadores, pero sin leyendas. */
#carousel .car-status,
#carousel .car-hint{display:none!important}

/* En móvil el carrusel muestra una sola tarjeta, completa y sin superposición. */
@media (max-width:599px){
  #carousel .car-view{width:100%!important;min-height:0!important;overflow:hidden!important}
  #carousel .car-view .slide{width:100%!important;max-width:100%!important}
  #carousel .slide-title,
  #carousel .slide-body p,
  #carousel .slide-price,
  #carousel .arrow-link{overflow:visible!important;text-overflow:clip!important;white-space:normal!important}
}


/* ============================================================
   MAKREDATA V2.5 — móvil real y video completo
   ============================================================ */
/* .slide-img es un <span>: debe ser un bloque real para que
   aspect-ratio calcule su altura. Sin esto, el video absoluto
   puede colapsar a una franja en móviles. */
#carousel .slide-img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:16/9!important;
  min-height:0!important;
  position:relative!important;
  overflow:hidden!important;
}
#carousel .slide-img > video.mkd-video{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
}

/* En móvil vertical sólo existe visualmente UNA tarjeta: la activa.
   Esto evita que otra tarjeta pueda asomarse, mezclarse o superponerse. */
@media (max-width:599px){
  #carousel .car-view{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
    padding:8px 0 16px!important;
  }
  #carousel .car-view .slide{
    width:100%!important;
    max-width:100%!important;
    left:0!important;
    top:8px!important;
  }
  #carousel .slide-img{
    width:100%!important;
    aspect-ratio:16/9!important;
    min-height:0!important;
  }
  #carousel .slide-title{
    left:16px!important;
    right:16px!important;
    bottom:14px!important;
    font-size:1.12rem!important;
    line-height:1.22!important;
    overflow-wrap:anywhere!important;
  }
  #carousel .slide-body{
    padding:16px 16px 18px!important;
    width:100%!important;
  }
  #carousel .slide-body p{
    font-size:.92rem!important;
    line-height:1.5!important;
    width:100%!important;
  }
  #carousel .slide-foot{
    width:100%!important;
    gap:10px!important;
  }
}

/* El comportamiento claro es claro incluso antes de que JS termine de
   inicializar el tema. El oscuro se activa exclusivamente con data-theme. */
.tools-showcase,
.tools-showcase-head{color:#10243B}
.tool-card{
  background:#FFFFFF!important;
  border-color:#D9E3EC!important;
  color:#14263D!important;
  box-shadow:0 14px 34px -26px rgba(8,35,58,.28)!important;
}
.tool-card h3{color:#14263D!important}
.tool-card p{color:#44566F!important}
html[data-theme="dark"] .tools-showcase,
html[data-theme="dark"] .tools-showcase-head{color:#F2F7FC!important}
html[data-theme="dark"] .tool-card{
  background:linear-gradient(160deg,rgba(10,31,52,.92),rgba(6,22,38,.96))!important;
  border-color:#22415F!important;
  color:#F5F8FB!important;
  box-shadow:0 18px 35px -28px rgba(0,0,0,.9)!important;
}
html[data-theme="dark"] .tool-card h3{color:#F5F8FB!important}
html[data-theme="dark"] .tool-card p{color:#A9BDD2!important}

/* El contenido nunca se trunca horizontalmente. */
#carousel .slide,
#carousel .slide-body,
#carousel .slide-foot{min-width:0!important}
#carousel .slide-title,
#carousel .slide-body p,
#carousel .slide-price,
#carousel .arrow-link{
  max-width:100%!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
}

/* ============================================================
   MAKREDATA V2.6 — imágenes estáticas del carrusel
   Sustituye únicamente el medio del carrusel: la secuencia,
   estados claro/oscuro y contenido de las tarjetas permanecen iguales.
   ============================================================ */
#carousel .slide-img > img.mkd-carousel-image{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  opacity:1!important;
  transition:transform .8s ease,filter .8s ease,opacity .8s ease!important;
}
#carousel .slide.active .slide-img > img.mkd-carousel-image{
  transform:scale(1.015)!important;
  filter:saturate(1.04) contrast(1.03) brightness(.92)!important;
}
#carousel .slide.mkd-clear .slide-img > img.mkd-carousel-image{
  transform:scale(1)!important;
  filter:saturate(.82) brightness(1.04)!important;
}
@media (max-width:599px){
  #carousel .slide-img{
    width:100%!important;
    aspect-ratio:16/9!important;
    height:auto!important;
  }
  #carousel .slide-img > img.mkd-carousel-image{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
}

/* ============================================================
   MAKREDATA V2.7 — móvil como canal principal
   Corrección estructural: ningún bloque del sitio puede forzar
   un ancho de escritorio dentro del viewport móvil.
   ============================================================ */
@media (max-width:599px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  .wrap,
  header.site .wrap,
  #inicio .hero-grid,
  #inicio .hero-grid>*{min-width:0!important;max-width:100%!important}

  /* Dashboard del hero: una columna en móvil. Las tres métricas no se
     comprimen ni se salen del viewport; cada una conserva todo su contenido. */
  #inicio .dash{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    padding:16px!important;
  }
  #inicio .dash-head{min-width:0!important;align-items:flex-start!important}
  #inicio .dash-head .t{min-width:0!important;max-width:100%!important;line-height:1.45!important;white-space:normal!important}
  #inicio .kpis{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    min-width:0!important;
    gap:9px!important;
  }
  #inicio .kpi{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:visible!important;
    padding:12px!important;
  }
  #inicio .kpi .val{font-size:clamp(1.35rem,7vw,1.62rem)!important;white-space:normal!important}
  #inicio .kpi .delta{white-space:normal!important;overflow-wrap:anywhere!important}
  #inicio .dash-chart{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    padding:12px 10px 8px!important;
  }
  #inicio .dash-chart .ct{white-space:normal!important;line-height:1.4!important}
  #inicio .dash-chart svg{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;min-height:72px!important}
  #inicio .insight-strip{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    align-items:flex-start!important;
  }
  #inicio .insight-strip p{min-width:0!important;width:auto!important;overflow-wrap:anywhere!important;white-space:normal!important}

  /* Carrusel vertical: una tarjeta real en el flujo, nunca una tarjeta absoluta
     cuya altura pueda quedar en cero. La imagen conserva una superficie 16:9. */
  #carousel .car-view{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
    padding:8px 0 16px!important;
  }
  #carousel .car-view .slide{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  #carousel .car-view .slide.mkd-visible{visibility:visible!important}
  #carousel .slide-img{
    display:block!important;
    position:relative!important;
    width:100%!important;
    height:auto!important;
    min-height:180px!important;
    aspect-ratio:16/9!important;
    overflow:hidden!important;
  }
  #carousel .slide-img > img.mkd-carousel-image{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
  }
  #carousel .slide-body{width:100%!important;max-width:100%!important;min-width:0!important;overflow:visible!important}
  #carousel .slide-title,
  #carousel .slide-body p,
  #carousel .slide-price,
  #carousel .arrow-link{max-width:100%!important;white-space:normal!important;overflow:visible!important;overflow-wrap:anywhere!important}
}

/* Móvil horizontal: sigue siendo presentación de 3 tarjetas, pero cada tarjeta
   conserva una zona de imagen visible y completa. */
@media (min-width:600px) and (max-width:1100px) and (orientation:landscape){
  #carousel .car-view{min-height:0!important;overflow:hidden!important}
  #carousel .slide-img{display:block!important;aspect-ratio:16/9!important;min-height:120px!important;overflow:hidden!important}
  #carousel .slide-img > img.mkd-carousel-image{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}
}


/* ============================================================
   MAKREDATA V2.8 — canal móvil real / WordPress Customizer
   El Personalizador puede escalar el iframe sin cambiar el viewport CSS.
   Por eso estas reglas se activan también mediante .mkd-mobile-preview,
   calculado con el ancho visual real del carrusel.
   ============================================================ */
html.mkd-mobile-preview #inicio .hero-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;gap:24px!important}
html.mkd-mobile-preview #inicio .hero-grid>*{width:100%!important;max-width:100%!important;min-width:0!important}
html.mkd-mobile-preview #inicio .dash{width:100%!important;max-width:100%!important;min-width:0!important;overflow:visible!important;padding:14px!important;box-sizing:border-box!important}
html.mkd-mobile-preview #inicio .kpis{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;gap:9px!important}
html.mkd-mobile-preview #inicio .kpi{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;overflow:visible!important}
html.mkd-mobile-preview #inicio .kpi .val{white-space:normal!important;font-size:clamp(1.25rem,7vw,1.6rem)!important}
html.mkd-mobile-preview #inicio .dash-chart{width:100%!important;max-width:100%!important;box-sizing:border-box!important;overflow:hidden!important}
html.mkd-mobile-preview #inicio .dash-chart svg{width:100%!important;max-width:100%!important;height:auto!important}
html.mkd-mobile-preview #inicio .insight-strip{width:100%!important;max-width:100%!important;box-sizing:border-box!important;overflow:visible!important}
html.mkd-mobile-preview #inicio .insight-strip p{white-space:normal!important;overflow-wrap:anywhere!important}

html.mkd-mobile-preview #carousel .car-view{position:relative!important;display:block!important;width:100%!important;height:auto!important;min-height:0!important;overflow:hidden!important;padding:8px 0 16px!important}
html.mkd-mobile-preview #carousel .car-view .slide{position:relative!important;display:flex!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;left:0!important;top:0!important;margin:0!important;transform:none!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
html.mkd-mobile-preview #carousel .car-view .slide:not(.active){display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
html.mkd-mobile-preview #carousel .slide-img{display:block!important;position:relative!important;width:100%!important;height:auto!important;min-height:180px!important;aspect-ratio:16/9!important;overflow:hidden!important}
html.mkd-mobile-preview #carousel .slide-img > img.mkd-carousel-image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important;object-fit:cover!important;display:block!important}
html.mkd-mobile-preview #carousel .slide-body{display:flex!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;overflow:visible!important;box-sizing:border-box!important}
html.mkd-mobile-preview #carousel .slide-title,html.mkd-mobile-preview #carousel .slide-body p,html.mkd-mobile-preview #carousel .slide-price,html.mkd-mobile-preview #carousel .arrow-link{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere!important}

/* Móvil horizontal: tres tarjetas y exactamente una activa/oscura. */
html.mkd-three-card-preview #carousel .car-view .slide{display:flex!important}
html.mkd-three-card-preview #carousel .slide-img{display:block!important;width:100%!important;aspect-ratio:16/9!important;height:auto!important;overflow:hidden!important}
html.mkd-three-card-preview #carousel .slide-img > img.mkd-carousel-image{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}

/* Nunca permitir que una regla posterior del tema vuelva a poner las tres KPI
   en fila cuando el ancho visual es realmente móvil. */
html.mkd-mobile-preview #inicio .kpis{grid-template-columns:1fr!important}

/* ============================================================
   MAKREDATA V2.9 — protección final de contenido responsive
   No agrega contenido; evita recortes en móvil vertical/horizontal.
   ============================================================ */
@media (max-width:1100px){
  #inicio .hero-grid,
  #inicio .dash,
  #inicio .dash-chart,
  #inicio .insight-strip{box-sizing:border-box;max-width:100%;min-width:0}
  #inicio .dash-chart{overflow:hidden}
  #inicio .dash-chart svg{display:block;width:100%;max-width:100%;height:auto}
}
@media (max-width:599px){
  #inicio .dash{padding:14px!important}
  #inicio .dash-head{flex-wrap:wrap;min-width:0}
  #inicio .dash-head .t{max-width:100%;white-space:normal;overflow-wrap:anywhere}
  #inicio .kpis{grid-template-columns:1fr!important}
  #inicio .kpi{min-width:0!important;width:100%!important}
  #inicio .kpi .lab,#inicio .kpi .val,#inicio .kpi .delta{max-width:100%;white-space:normal;overflow-wrap:anywhere}
  #inicio .dash-chart{padding:10px 8px 8px!important}
  #inicio .dash-chart .ct{white-space:normal;overflow-wrap:anywhere}
  #inicio .dash-chart svg{width:100%!important;height:auto!important;min-width:0!important}
  #inicio .insight-strip{display:flex;flex-wrap:nowrap;min-width:0}
  #inicio .insight-strip p{min-width:0;overflow-wrap:anywhere}
}
@media (min-width:600px) and (max-width:1100px) and (orientation:landscape){
  #inicio .hero-grid{grid-template-columns:1fr!important}
  #inicio .dash{width:100%!important}
}

/* ============================================================
   MAKREDATA V30 — protección del dashboard en previsualizador móvil
   El contenido del dashboard nunca se comprime en tres columnas cuando
   el ancho real de su contenedor es móvil.
   ============================================================ */
#inicio .hero-grid{container-type:inline-size;container-name:mkd-hero}
@container mkd-hero (max-width: 599px){
  #inicio .kpis{grid-template-columns:1fr!important;gap:9px!important}
  #inicio .kpi{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
  #inicio .kpi .lab,#inicio .kpi .val,#inicio .kpi .delta{max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important}
  #inicio .dash{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
  #inicio .dash-chart,#inicio .insight-strip{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
  #inicio .dash-chart svg{display:block!important;width:100%!important;max-width:100%!important;height:auto!important}
}

/* ============================================================
   MAKREDATA V31 — corrección definitiva: imágenes estáticas + móvil
   ============================================================ */
/* Las tarjetas usan fotografías estáticas. Nunca se ocultan las imágenes. */
#carousel .slide-img{aspect-ratio:3/2!important;min-height:0!important;position:relative!important;overflow:hidden!important;background:var(--card)!important}
#carousel .slide-img > img.mkd-carousel-image{
  display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  min-width:100%!important;min-height:100%!important;object-fit:cover!important;object-position:center center!important;
  z-index:1!important;opacity:.72!important;filter:saturate(.9) brightness(1.04)!important;
  transition:opacity .45s ease,transform 3s ease,filter .45s ease!important;
}
#carousel .slide.active .slide-img > img.mkd-carousel-image{
  opacity:1!important;transform:scale(1.01)!important;filter:saturate(1.04) contrast(1.02)!important;
}
#carousel .slide.mkd-clear .slide-img > img.mkd-carousel-image{
  opacity:.72!important;transform:scale(1)!important;filter:saturate(.9) brightness(1.04)!important;
}
#carousel .slide-img > video.mkd-video{display:none!important}
#carousel .slide.video-error .slide-img::before{display:none!important;content:none!important}

/* Todo el contenido del dashboard se reorganiza en móvil. */
@media (max-width:700px){
  #inicio .hero-grid{grid-template-columns:minmax(0,1fr)!important}
  #inicio .dash{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;overflow:visible!important}
  #inicio .kpis{grid-template-columns:1fr!important;width:100%!important;gap:10px!important}
  #inicio .kpi{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;overflow:visible!important}
  #inicio .kpi .lab,#inicio .kpi .val,#inicio .kpi .delta{white-space:normal!important;overflow-wrap:anywhere!important;max-width:100%!important}
  #inicio .dash-chart{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;overflow:hidden!important}
  #inicio .dash-chart svg{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;min-width:0!important}
  #inicio .insight-strip{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;overflow:visible!important}
  #inicio .insight-strip p{min-width:0!important;max-width:100%!important;overflow-wrap:anywhere!important;white-space:normal!important}
}
/* También protege el Personalizador cuando el iframe visual es estrecho aunque
   WordPress conserve un viewport CSS de escritorio. */
html.mkd-mobile-preview #inicio .kpis{grid-template-columns:1fr!important;width:100%!important;gap:10px!important}
html.mkd-mobile-preview #inicio .kpi{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
html.mkd-mobile-preview #inicio .dash-chart svg{width:100%!important;max-width:100%!important;height:auto!important}

/* Móvil vertical: una tarjeta, sin alturas forzadas. */
@media (max-width:599px){
  #carousel .car-view{display:block!important;width:100%!important;height:auto!important;min-height:0!important;overflow:hidden!important}
  #carousel .car-view .slide{width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;overflow:hidden!important}
  #carousel .slide-img{aspect-ratio:3/2!important;width:100%!important;min-height:0!important}
  #carousel .slide-body{height:auto!important;min-height:0!important;width:100%!important;overflow:visible!important}
  #carousel .slide-title,#carousel .slide-body p,#carousel .slide-price,#carousel .arrow-link{white-space:normal!important;overflow:visible!important;overflow-wrap:anywhere!important;text-overflow:clip!important}
}
/* Móvil horizontal y tablet: 3 tarjetas completas. */
@media (min-width:600px){
  #carousel .car-view{min-height:0!important;overflow:hidden!important}
  #carousel .car-view .slide{flex-basis:calc((100% - 36px)/3)!important;width:calc((100% - 36px)/3)!important;min-width:0!important;height:auto!important}
  #carousel .slide-img{aspect-ratio:3/2!important;min-height:0!important}
  #carousel .slide-body{height:auto!important;min-height:0!important;overflow:visible!important}
  #carousel .slide-title,#carousel .slide-body p,#carousel .slide-price,#carousel .arrow-link{white-space:normal!important;overflow:visible!important;overflow-wrap:anywhere!important;text-overflow:clip!important}
}
html.mkd-three-card-preview #carousel .slide-img > img.mkd-carousel-image{display:block!important}


/* ============================================================
   MAKREDATA V32 — icono de tarjeta fuera de la fotografía +
   protección real del dashboard en el Personalizador móvil.
   La fotografía queda limpia: ningún icono se coloca sobre ella.
   ============================================================ */
#carousel .slide-body{position:relative!important;}
#carousel .slide-body .slide-icon{
  position:absolute!important;
  z-index:6!important;
  right:14px!important;
  top:10px!important;
  width:38px!important;
  height:38px!important;
  border-radius:12px!important;
  display:grid!important;
  place-items:center!important;
  background:rgba(255,255,255,.96)!important;
  color:var(--navy)!important;
  box-shadow:0 8px 22px rgba(8,20,36,.18)!important;
  backdrop-filter:blur(7px)!important;
  pointer-events:none!important;
}
#carousel .slide-body .slide-icon svg{width:20px!important;height:20px!important;}
#carousel .slide-body{padding-top:58px!important;}
@media (max-width:599px){
  #carousel .slide-body{padding:58px 16px 18px!important;}
  #carousel .slide-body .slide-icon{right:12px!important;top:10px!important;width:36px!important;height:36px!important;}
}

/* El ancho real del panel dashboard manda, incluso cuando WordPress
   escala el iframe del Personalizador. */
#inicio .dash{container-type:inline-size;container-name:mkd-dash;}
@container mkd-dash (max-width:599px){
  #inicio .kpis{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;gap:10px!important;}
  #inicio .kpi{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;}
  #inicio .kpi .lab,#inicio .kpi .val,#inicio .kpi .delta{max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;}
  #inicio .dash-chart,#inicio .insight-strip{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;}
  #inicio .dash-chart svg{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;min-width:0!important;}
}
html.mkd-dashboard-mobile #inicio .hero-grid{grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important;}
html.mkd-dashboard-mobile #inicio .hero-grid>*{width:100%!important;max-width:100%!important;min-width:0!important;}
html.mkd-dashboard-mobile #inicio .dash{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;overflow:visible!important;padding:14px!important;}
html.mkd-dashboard-mobile #inicio .kpis{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;gap:10px!important;}
html.mkd-dashboard-mobile #inicio .kpi{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;overflow:visible!important;}
html.mkd-dashboard-mobile #inicio .kpi .lab,
html.mkd-dashboard-mobile #inicio .kpi .val,
html.mkd-dashboard-mobile #inicio .kpi .delta{max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;}
html.mkd-dashboard-mobile #inicio .dash-chart{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;overflow:hidden!important;}
html.mkd-dashboard-mobile #inicio .dash-chart svg{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;min-width:0!important;}
html.mkd-dashboard-mobile #inicio .insight-strip{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;overflow:visible!important;}
html.mkd-dashboard-mobile #inicio .insight-strip p{min-width:0!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;}

/* ============================================================
   MAKREDATA V33 — fondo de red visual + estado activo por tema
   ============================================================
   El fondo de líneas y puntos forma parte de la identidad visual.
   Se mantiene detrás del contenido y no interfiere con tarjetas.
*/
#inicio-soluciones.carousel-prominent{
  position:relative!important;
  overflow:hidden!important;
  background-color:var(--bg-alt)!important;
  background-image:
    radial-gradient(circle at 14% 22%, color-mix(in srgb,var(--accent) 18%, transparent) 0 1.5px, transparent 2px),
    radial-gradient(circle at 82% 34%, color-mix(in srgb,var(--accent) 14%, transparent) 0 1.5px, transparent 2px),
    radial-gradient(circle at 64% 78%, color-mix(in srgb,var(--accent) 12%, transparent) 0 1.25px, transparent 1.8px),
    linear-gradient(26deg, transparent 0 47%, color-mix(in srgb,var(--accent) 7%, transparent) 48%, transparent 49% 100%),
    linear-gradient(154deg, transparent 0 61%, color-mix(in srgb,var(--accent) 6%, transparent) 62%, transparent 63% 100%)!important;
  background-size:180px 180px,240px 240px,210px 210px,320px 320px,360px 360px!important;
}
#inicio-soluciones.carousel-prominent::before,
#inicio-soluciones.carousel-prominent::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
  border-radius:50%;
}
#inicio-soluciones.carousel-prominent::before{
  width:420px;height:420px;
  left:-150px;top:18%;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent) 5%, transparent), transparent 68%);
}
#inicio-soluciones.carousel-prominent::after{
  width:520px;height:520px;
  right:-220px;bottom:-180px;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent) 4%, transparent), transparent 70%);
}
#inicio-soluciones.carousel-prominent>.wrap,
#inicio-soluciones.carousel-prominent .carousel{
  position:relative!important;
  z-index:1!important;
}

/* Regla maestra: en ambos temas siempre 1 activa oscura + 2 claras. */
html[data-theme="light"] #carousel .slide.active{
  background:#0B1B2E!important;
  color:#F5FAFF!important;
  border-color:#00A8B5!important;
}
html[data-theme="light"] #carousel .slide.mkd-clear{
  background:#FFFFFF!important;
  color:#14263D!important;
}
html[data-theme="dark"] #carousel .slide.active{
  background:#071827!important;
  color:#F5FAFF!important;
  border-color:#22C1CC!important;
}
html[data-theme="dark"] #carousel .slide.mkd-clear{
  background:#132A44!important;
  color:#EAF1F9!important;
}

/* El patrón también permanece sutil en modo oscuro. */
html[data-theme="dark"] #inicio-soluciones.carousel-prominent{
  background-color:#0C1C2E!important;
}


/* ============================================================
   MAKREDATA V34 — fondo de red global, animado y responsive
   ============================================================ */
html,body{background:var(--bg)!important;}
#mkd-network-global{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  display:block!important;
  z-index:0!important;
  pointer-events:none!important;
  opacity:.78!important;
}
body > *:not(#mkd-network-global){position:relative;z-index:1;}
/* El patrón pertenece a toda la página, no a una sola sección. */
#inicio-soluciones.carousel-prominent{
  background:transparent!important;
  background-image:none!important;
}
#inicio-soluciones.carousel-prominent::before,
#inicio-soluciones.carousel-prominent::after{display:none!important;}
/* El contenido conserva sus superficies; solo el fondo queda vivo detrás. */
html[data-theme="light"] #mkd-network-global{opacity:.58!important;}
html[data-theme="dark"] #mkd-network-global{opacity:.72!important;}
@media(max-width:700px){
  #mkd-network-global{opacity:.42!important;}
  html[data-theme="dark"] #mkd-network-global{opacity:.58!important;}
}
@media(prefers-reduced-motion:reduce){
  #mkd-network-global{opacity:.38!important;}
}

/* ============================================================
   MAKREDATA V36 — prioridad móvil + dashboard ejecutivo responsive
   ============================================================ */
/* Las tarjetas usan fotografía estática limpia; nunca se oculta la imagen. */
#carousel .slide-img > img.mkd-carousel-image{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  z-index:1!important;
}
#carousel .slide-img{min-height:0!important}
#carousel .slide.active .slide-img > img.mkd-carousel-image{filter:saturate(1.02) contrast(1.02)!important;transform:scale(1.01)!important;transition:transform .72s ease,filter .45s ease!important}
#carousel .slide.mkd-clear .slide-img > img.mkd-carousel-image{filter:saturate(.86) brightness(1.08)!important;transform:scale(1)!important;transition:transform .72s ease,filter .45s ease!important}
#carousel .slide.mkd-clear{background:#fff!important;color:var(--ink)!important;border-color:var(--line)!important}
#carousel .slide.mkd-clear .slide-body p{color:var(--body)!important}
#carousel .slide.mkd-clear .slide-price,#carousel .slide.mkd-clear .arrow-link{color:var(--accent-ink)!important}
#carousel .slide.active{background:#0B1B2E!important;color:#EAF1F9!important}
html[data-theme="dark"] #carousel .slide.mkd-clear{background:#132A44!important;color:#EAF1F9!important;border-color:#2A4764!important}
html[data-theme="dark"] #carousel .slide.mkd-clear .slide-body p{color:#C2D1E1!important}
html[data-theme="dark"] #carousel .slide.mkd-clear .slide-price,html[data-theme="dark"] #carousel .slide.mkd-clear .arrow-link{color:#3FD3DD!important}

/* Dashboard: el contenido manda; nunca se fuerza una altura que pueda recortar texto o gráfico. */
#heroDash{width:100%;min-width:0;overflow:visible!important}
#heroDash .dash-head,#heroDash .kpis,#heroDash .dash-chart,#heroDash .insight-strip{min-width:0}
#heroDash .kpi{min-width:0;overflow:visible}
#heroDash .kpi .val,#heroDash .kpi .delta,#heroDash .kpi .lab{overflow-wrap:anywhere}
#heroDash .dash-chart{min-width:0;overflow:hidden}
#heroDash #heroSpark{display:block;width:100%;height:auto;min-height:84px;max-width:100%}
#heroDash .insight-strip p{min-width:0;overflow-wrap:anywhere}

/* Móvil vertical: una columna, gráfico proporcional y lectura completa. */
@media (max-width:700px){
  #inicio .hero-grid{grid-template-columns:minmax(0,1fr)!important;align-items:start!important}
  #inicio .dash{width:100%!important;max-width:100%!important;padding:15px!important;border-radius:16px!important}
  #heroDash .kpis{grid-template-columns:1fr!important;gap:8px!important}
  #heroDash .kpi{padding:12px!important}
  #heroDash .kpi .val{font-size:1.45rem!important}
  #heroDash .dash-chart{padding:12px 10px 8px!important}
  #heroDash #heroSpark{height:auto!important;min-height:0!important;aspect-ratio:320/100!important}
  #heroDash .insight-strip{padding:11px 12px!important}
  #heroDash .insight-strip p{font-size:.79rem!important;line-height:1.5!important}
}

/* Móvil horizontal: sigue siendo móvil, no escritorio comprimido. */
@media (max-width:900px) and (max-height:600px) and (orientation:landscape){
  .wrap{width:min(100% - 28px,1120px)!important}
  header .wrap{width:min(100% - 24px,1120px)!important}
  #inicio .hero-grid{grid-template-columns:minmax(0,1fr)!important;gap:28px!important}
  #inicio .hero-copy{min-width:0!important}
  #inicio .dash{width:100%!important;max-width:100%!important;padding:14px!important}
  #heroDash .kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  #heroDash .kpi{padding:10px!important}
  #heroDash .kpi .val{font-size:1.3rem!important}
  #heroDash .dash-chart{padding:10px!important}
  #heroDash #heroSpark{height:auto!important;aspect-ratio:320/82!important}
  #heroDash .insight-strip{padding:10px 12px!important}
  #heroDash .insight-strip p{font-size:.76rem!important;line-height:1.45!important}
}

/* Tablet vertical: una sola columna para el bloque hero; nada se estrecha de forma peligrosa. */
@media (min-width:701px) and (max-width:900px) and (orientation:portrait){
  #inicio .hero-grid{grid-template-columns:minmax(0,1fr)!important}
  #inicio .dash{width:100%!important;max-width:100%!important}
  #heroDash .kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* En cualquier orientación el dashboard jamás crea overflow horizontal. */
#inicio .hero-grid>*{min-width:0!important}
#inicio .dash *{max-width:100%}