/* Grupo Yohiful sobre Fluent 2. Tokens tomados de @fluentui/tokens (webLightTheme / webDarkTheme). */
:root{
  /* neutros */
  --bg:#f4f3f8;--surface:#ffffff;--surface-alt:#f5f5f5;--hover:#f5f5f5;--pressed:#e0e0e0;--subtle-hover:#f5f5f5;
  --ink:#242424;--body:#424242;--muted:#616161;--faint:#707070;
  --line:#e0e0e0;--stroke1:#d1d1d1;--stroke-acc:#616161;--stroke3:#f0f0f0;
  /* marca */
  --brand:#0f6cbd;--brand-hover:#115ea3;--brand-pressed:#0c3b5e;--brand-fg:#0f6cbd;--brand-link:#115ea3;--brand-bg2:#ebf3fc;--on-brand:#ffffff;
  /* banda invertida (pie, cifras, cierre) */
  --inv-bg:#292929;--inv-fg:#ffffff;--inv-fg2:#d6d6d6;--inv-line:#3d3d3d;
  --on-c:#ffffff;--focus:#000000;
  /* alias del sistema anterior */
  --paper:var(--bg);--white:var(--surface);--on-dark:var(--inv-fg2);
  /* marcas de cada empresa sobre superficie */
  --tech:#0f6cbd;--studio:#c43501;--learning:#0e700e;--health:#af33a1;--gold:#d39300;
  /* mismas marcas sobre banda oscura */
  --tech-d:#479ef5;--studio-d:#e9835e;--learning-d:#54b054;--health-d:#da7ed0;--gold-d:#f2c661;--neutral-d:#c7c7c7;
  --logo-n:#bdbdbd;
  --warn-bg:#fefbf4;
  /* tipografia */
  --font:"Segoe UI Variable Text","Segoe UI","Segoe UI Web (West European)",system-ui,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
  --display:"Segoe UI Variable Display","Segoe UI","Segoe UI Web (West European)",system-ui,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
  --text:var(--font);
  /* forma, elevacion y movimiento */
  --wrap:1240px;--radius-sm:2px;--radius-md:8px;--radius:16px;--radius-lg:28px;
  --sh2:0 0 2px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.14);
  --sh4:0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.14);
  --sh8:0 0 2px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.14);
  --sh16:0 0 2px rgba(0,0,0,.12),0 8px 16px rgba(0,0,0,.14);
  --dur:150ms;--ease:cubic-bezier(.33,0,.67,1);--ease-out:cubic-bezier(0,0,0,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1f1f1f;--surface:#292929;--surface-alt:#141414;--hover:#3d3d3d;--pressed:#1f1f1f;--subtle-hover:#383838;
  --ink:#ffffff;--body:#d6d6d6;--muted:#adadad;--faint:#999999;
  --line:#525252;--stroke1:#666666;--stroke-acc:#adadad;--stroke3:#3d3d3d;
  --brand:#115ea3;--brand-hover:#0f6cbd;--brand-pressed:#0c3b5e;--brand-fg:#479ef5;--brand-link:#479ef5;--brand-bg2:#082338;--on-brand:#ffffff;
  --inv-bg:#0a0a0a;--inv-line:#3d3d3d;--focus:#ffffff;
  --tech:#479ef5;--studio:#e9835e;--learning:#54b054;--health:#da7ed0;--gold:#f2c661;
  --logo-n:#8a8a8a;--warn-bg:#463100;
  --sh2:0 0 2px rgba(0,0,0,.24),0 1px 2px rgba(0,0,0,.28);
  --sh4:0 0 2px rgba(0,0,0,.24),0 2px 4px rgba(0,0,0,.28);
  --sh8:0 0 2px rgba(0,0,0,.24),0 4px 8px rgba(0,0,0,.28);
  --sh16:0 0 2px rgba(0,0,0,.24),0 8px 16px rgba(0,0,0,.28);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1f1f1f;--surface:#292929;--surface-alt:#141414;--hover:#3d3d3d;--pressed:#1f1f1f;--subtle-hover:#383838;
  --ink:#ffffff;--body:#d6d6d6;--muted:#adadad;--faint:#999999;
  --line:#525252;--stroke1:#666666;--stroke-acc:#adadad;--stroke3:#3d3d3d;
  --brand:#115ea3;--brand-hover:#0f6cbd;--brand-pressed:#0c3b5e;--brand-fg:#479ef5;--brand-link:#479ef5;--brand-bg2:#082338;--on-brand:#ffffff;
  --inv-bg:#0a0a0a;--inv-line:#3d3d3d;--focus:#ffffff;
  --tech:#479ef5;--studio:#e9835e;--learning:#54b054;--health:#da7ed0;--gold:#f2c661;
  --logo-n:#8a8a8a;--warn-bg:#463100;
  --sh2:0 0 2px rgba(0,0,0,.24),0 1px 2px rgba(0,0,0,.28);
  --sh4:0 0 2px rgba(0,0,0,.24),0 2px 4px rgba(0,0,0,.28);
  --sh8:0 0 2px rgba(0,0,0,.24),0 4px 8px rgba(0,0,0,.28);
  --sh16:0 0 2px rgba(0,0,0,.24),0 8px 16px rgba(0,0,0,.28);
  color-scheme:dark}

/* Paletas por empresa: --c solido (texto blanco encima), --cd acento sobre tinte, --ct tinte, --cl texto claro sobre --c, --cb borde del tinte */
.u-tech{--c:#0f6cbd;--cd:#115ea3;--ct:#ebf3fc;--cl:#ebf3fc;--cb:#b4d6fa}
.u-studio{--c:#c43501;--cd:#7a2101;--ct:#fdf6f3;--cl:#fdf6f3;--cb:#f4bfab}
.u-learning{--c:#0e700e;--cd:#094509;--ct:#f1faf1;--cl:#f1faf1;--cb:#9fd89f}
.u-health{--c:#af33a1;--cd:#6d2064;--ct:#fdf5fc;--cl:#fdf5fc;--cb:#edbbe7}
.u-group{--c:#292929;--cd:#242424;--ct:#f5f5f5;--cl:#d6d6d6;--cb:#d1d1d1}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .u-tech{--c:#115ea3;--cd:#62abf5;--ct:#082338;--cl:#cfe4fa;--cb:#115ea3}
  :root:not([data-theme="light"]) .u-studio{--c:#9a2c01;--cd:#f4bfab;--ct:#411200;--cl:#fde4d8;--cb:#7a2101}
  :root:not([data-theme="light"]) .u-learning{--c:#0b6a0b;--cd:#9fd89f;--ct:#052505;--cl:#d4efd4;--cb:#094509}
  :root:not([data-theme="light"]) .u-health{--c:#8a2882;--cd:#edbbe7;--ct:#3a1136;--cl:#f6d8f2;--cb:#6d2064}
  :root:not([data-theme="light"]) .u-group{--c:#0a0a0a;--cd:#ffffff;--ct:#141414;--cl:#d6d6d6;--cb:#3d3d3d}
}
:root[data-theme="dark"] .u-tech{--c:#115ea3;--cd:#62abf5;--ct:#082338;--cl:#cfe4fa;--cb:#115ea3}
:root[data-theme="dark"] .u-studio{--c:#9a2c01;--cd:#f4bfab;--ct:#411200;--cl:#fde4d8;--cb:#7a2101}
:root[data-theme="dark"] .u-learning{--c:#0b6a0b;--cd:#9fd89f;--ct:#052505;--cl:#d4efd4;--cb:#094509}
:root[data-theme="dark"] .u-health{--c:#8a2882;--cd:#edbbe7;--ct:#3a1136;--cl:#f6d8f2;--cb:#6d2064}
:root[data-theme="dark"] .u-group{--c:#0a0a0a;--cd:#ffffff;--ct:#141414;--cl:#d6d6d6;--cb:#3d3d3d}

*,:before,:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;margin:0;font-size:16px;line-height:1.5;font-weight:400}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);margin:0;font-weight:600;line-height:1.25;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-md)}
.sr-only{clip:rect(0,0,0,0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}
.skip{background:var(--brand);color:var(--on-brand);z-index:50;border-radius:var(--radius-md);padding:10px 16px;position:absolute;top:-60px;left:16px;font-weight:600}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.section{padding-top:80px;padding-bottom:80px}
.band-white{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-dark{background:var(--inv-bg);color:var(--inv-fg)}
.eyebrow{color:var(--brand-fg);margin-bottom:12px;font-size:14px;line-height:20px;font-weight:600}
.band-dark .eyebrow{color:var(--inv-fg2)}
.display-1{font-size:clamp(34px,5vw,60px);line-height:1.15;font-weight:600}
.display-2{font-size:clamp(28px,3.4vw,40px);line-height:1.2;font-weight:600}
.lead{color:var(--body);max-width:640px;font-size:clamp(18px,1.6vw,20px);line-height:1.5}
.band-dark .lead{color:var(--inv-fg2)}
.section-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px;display:flex}
.section-head>div{max-width:660px}
.section-head p{max-width:440px;color:var(--body)}
.grid{gap:16px;display:grid}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.actions{flex-wrap:wrap;gap:12px;display:flex}

/* iconos Fluent System Icons */
.ico{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--radius);background:var(--brand-bg2);color:var(--brand-fg)}
.ico svg{width:20px;height:20px;fill:currentColor}
.ico-u{background:var(--ct);color:var(--cd)}
.ico-sm{width:32px;height:32px;border-radius:var(--radius-md)}
.fi{width:20px;height:20px;fill:currentColor;flex:none}

/* botones */
.btn{min-height:44px;font-family:var(--font);cursor:pointer;border:1px solid transparent;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font-size:16px;line-height:22px;font-weight:600;text-decoration:none;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);display:inline-flex}
.btn-primary{background:var(--ink);color:var(--surface)}
.btn-primary:hover{background:var(--brand-hover);color:#fff}
.btn-primary:active{background:var(--brand-pressed);color:#fff;transform:scale(.98)}
.btn-outline{border-color:var(--stroke1);color:var(--ink);background:var(--surface)}
.btn-outline:hover{background:var(--hover);border-color:var(--stroke-acc)}
.btn-outline:active{background:var(--pressed)}
.btn-light{background:#ffffff;color:#242424}
.btn-light:hover{background:#f5f5f5}
.btn-light:active{background:#e0e0e0}
.btn-ghost-light{border-color:#ffffff;color:#ffffff;background:transparent}
.btn-ghost-light:hover{background:rgba(255,255,255,.16)}
.btn-ghost-light:active{background:rgba(255,255,255,.24)}
.btn-light:focus-visible,.btn-ghost-light:focus-visible,.cta :focus-visible,.cierre :focus-visible,.hero :focus-visible,.site-footer :focus-visible,.band-dark :focus-visible{outline-color:#ffffff}
.link-arrow{align-items:center;gap:6px;min-height:44px;color:var(--brand-link);font-weight:600;text-decoration:none;display:inline-flex}
.link-arrow svg{transition:transform var(--dur) var(--ease-out)}
.link-arrow:hover{text-decoration:underline;text-underline-offset:4px}
.link-arrow:hover svg{transform:translateX(3px)}

/* tarjetas */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--sh2);display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.card h3{font-size:20px;line-height:1.3}
.card p{color:var(--body);font-size:16px}
.placeholder{color:var(--muted);text-align:center;border:1px dashed var(--stroke-acc);border-radius:var(--radius);justify-content:center;align-items:center;padding:16px;font-size:14px;display:flex}
@media (width<=720px){.section{padding-top:56px;padding-bottom:56px}.section-head{margin-bottom:28px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* logo */
.logo{color:var(--ink);align-items:center;gap:10px;display:inline-flex}
.logo-dark{color:#ffffff}
.logo-text{align-items:baseline;gap:8px;display:inline-flex}
.logo-word{font-family:var(--display);font-weight:600;line-height:1}
.logo-sub{font-family:var(--display);font-weight:500;line-height:1}
.logo-grupo{color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.08em}
.logo-dark .logo-grupo{color:var(--inv-fg2)}
.lg-g{stroke:var(--gold)}.lg-t{stroke:var(--tech)}.lg-s{stroke:var(--studio)}.lg-l{stroke:var(--learning)}.lg-h{stroke:var(--health)}.lg-n{stroke:var(--logo-n)}
.site-footer .lg-g,.logo-dark .lg-g{stroke:var(--gold-d)}
.site-footer .lg-t,.logo-dark .lg-t{stroke:var(--tech-d)}
.site-footer .lg-s,.logo-dark .lg-s{stroke:var(--studio-d)}
.site-footer .lg-l,.logo-dark .lg-l{stroke:var(--learning-d)}
.site-footer .lg-h,.logo-dark .lg-h{stroke:var(--health-d)}
.site-footer .lg-n,.logo-dark .lg-n{stroke:var(--neutral-d)}
.bg-tech{background:var(--tech)}.bg-studio{background:var(--studio)}.bg-learning{background:var(--learning)}.bg-health{background:var(--health)}.bg-gold{background:var(--gold)}

/* encabezado y navegacion */
.site-header{background:var(--surface);border-bottom:1px solid var(--line);z-index:20;position:relative}
.bar{justify-content:space-between;align-items:center;gap:16px;min-height:64px;display:flex}
.brand{align-items:center;min-height:44px;text-decoration:none;display:inline-flex}
.nav>ul{align-items:center;gap:4px;margin:0;padding:0;list-style:none;display:flex}
.nav>ul>li>a:not(.btn){border-radius:var(--radius-md);align-items:center;gap:4px;min-height:40px;padding:0 12px;font-size:15px;font-weight:400;text-decoration:none;transition:background-color var(--dur) var(--ease);display:inline-flex}
.nav>ul>li>a:not(.btn):hover{background:var(--subtle-hover)}
.nav a[aria-current=page]{background:var(--subtle-hover);font-weight:600}
.nav .chev{width:16px;height:16px;fill:currentColor;transition:transform var(--dur) var(--ease)}
.has-sub:hover .chev,.has-sub:focus-within .chev{transform:rotate(180deg)}
.cta-item{margin-left:8px}
.cta-item .btn{min-height:40px;padding:8px 20px;font-size:15px}
.has-sub{position:relative}
.sub{background:var(--surface);border:1px solid var(--line);opacity:0;visibility:hidden;border-radius:var(--radius-lg);width:304px;margin:0;padding:8px;list-style:none;transition:opacity var(--dur) var(--ease);position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);box-shadow:var(--sh16)}
.sub:before{content:"";height:12px;position:absolute;top:-12px;left:0;right:0}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible}
.sub a{border-radius:var(--radius-md);align-items:center;gap:12px;padding:8px 10px;text-decoration:none;transition:background-color var(--dur) var(--ease);display:flex}
.sub a:hover{background:var(--subtle-hover)}
.sub strong{font-size:15px;font-weight:600;line-height:20px;display:block}
.sub small{color:var(--muted);font-size:13px;line-height:18px;display:block}
.dot{flex:none;width:20px;height:20px;display:inline-grid;place-items:center}
.dot svg{width:20px;height:20px;fill:currentColor}
.m-tech{color:var(--tech)}.m-studio{color:var(--studio)}.m-learning{color:var(--learning)}.m-health{color:var(--health)}
.btn-light .m-tech{color:#0f6cbd}.btn-light .m-studio{color:#c43501}.btn-light .m-learning{color:#0e700e}.btn-light .m-health{color:#af33a1}
.sub .dot{width:32px;height:32px;border-radius:var(--radius-md);background:var(--brand-bg2)}
.menu-btn{border:1px solid var(--stroke1);min-height:44px;font:inherit;cursor:pointer;color:var(--ink);background:var(--surface);border-radius:var(--radius-md);align-items:center;gap:8px;padding:0 14px;font-size:15px;font-weight:600;display:none;transition:background-color var(--dur) var(--ease)}
.menu-btn:hover{background:var(--hover)}
.menu-icon{display:inline-grid}
.menu-icon svg{width:20px;height:20px;fill:currentColor}
@media (width<=860px){
  .menu-btn{display:inline-flex}
  .nav{background:var(--surface);border-bottom:1px solid var(--line);padding:8px max(24px,env(safe-area-inset-right,0px)) 24px max(24px,env(safe-area-inset-left,0px));display:none;position:absolute;top:100%;left:0;right:0;box-shadow:var(--sh16)}
  .nav.open{display:block}
  .nav>ul{flex-direction:column;align-items:stretch;gap:2px}
  .nav>ul>li>a:not(.btn){min-height:44px;padding:0 12px;font-size:16px}
  .nav .chev{display:none}
  .sub{opacity:1;visibility:visible;width:auto;box-shadow:none;border:0;padding:0 0 6px 8px;position:static;transform:none;background:transparent}
  .sub:before{display:none}
  .cta-item{margin:12px 0 0}
  .cta-item .btn{width:100%;min-height:44px}
}

/* pie */
.site-footer{background:var(--inv-bg);color:var(--inv-fg2);font-size:14px;line-height:20px}
.cols{grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-top:64px;padding-bottom:40px;display:grid}
.about p{max-width:300px;margin-top:16px}
.head{color:#ffffff;margin-bottom:10px;font-size:14px;font-weight:600}
.site-footer ul{gap:2px;margin:0;padding:0;list-style:none;display:grid}
.site-footer li a,.site-footer li span{padding:4px 0;display:inline-block}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:#ffffff;text-underline-offset:4px;text-decoration:underline}
.legal{border-top:1px solid var(--inv-line);flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:20px;padding-bottom:32px;font-size:13px;display:flex}
@media (width<=860px){.cols{grid-template-columns:1fr 1fr}.about{grid-column:1/-1}}
@media (width<=480px){.cols{grid-template-columns:1fr}}

/* componentes de pagina */
.tile-top{justify-content:space-between;align-items:flex-start;display:flex}
.tile svg{width:24px;height:24px;fill:currentColor}
.marca{display:inline-flex;align-items:center;gap:10px}
.empresa .ico-u{background:var(--c);color:var(--on-c)}
.empresa .ico{width:36px;height:36px}
.card>.ico{margin-bottom:4px}
.cta .dot{flex:none}
.tile-name{font-size:20px!important}
.info dt{display:flex;align-items:center;gap:8px}
.info dd{margin-left:28px}