:root{
  --navy:#052f57;
  --navy2:#063d67;
  --navy3:#0d607f;
  --cyan:#09b7e6;
  --cyan2:#18c7ec;
  --green:#51bd48;
  --ink:#082f55;
  --muted:#66839c;
  --line:#d6e7f0;
  --panel:#fff;
  --page:#f6fafc;
  --shadow:0 18px 44px rgba(5,47,87,.11);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 78% 6%,rgba(9,183,230,.10),transparent 27rem),
    linear-gradient(180deg,#fff 0,#f7fbfd 48%,#f2f7fa 100%);
}
button,input{font:inherit}
button{cursor:pointer}
.portal-shell{min-height:100vh}
.topbar{
  height:72px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 clamp(20px,5vw,72px);
  border-bottom:1px solid rgba(5,47,87,.10);
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(14px);
  position:sticky;
  top:0;
  z-index:40;
}
.topbar-spacer{width:1px}
.top-actions{display:flex;align-items:center;gap:12px}
.session-text{font-size:13px;color:var(--muted)}
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:#829db2;margin-right:7px}
.status-dot.on{background:#43d78a}
.btn{
  border:1px solid var(--navy);
  border-radius:10px;
  min-height:42px;
  padding:0 18px;
  background:#fff;
  color:var(--navy);
  font-weight:800;
}
.btn.primary{background:var(--navy);color:#fff}
.hero{
  max-width:1380px;
  margin:auto;
  padding:56px clamp(22px,5vw,74px) 38px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);
  gap:58px;
  align-items:center;
}
.hero-copy-column{min-width:0}
.hero-logo{
  display:block;
  width:min(390px,70%);
  height:auto;
  margin:0 0 24px;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--navy3);
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
}
.eyebrow:before{content:"";width:28px;height:3px;border-radius:99px;background:var(--cyan)}
.hero h1{
  margin:15px 0 18px;
  color:var(--navy);
  font-size:clamp(40px,5.1vw,72px);
  line-height:1;
  letter-spacing:-.045em;
}
.hero h1 span{display:block;color:var(--cyan)}
.hero-copy{margin:0;max-width:760px;color:#496d8b;font-size:clamp(17px,1.45vw,20px);line-height:1.65}
.hero-note{font-size:12px;color:#7892a8;margin-top:24px}
.value-card{
  border:1px solid #cfe4ef;
  border-radius:28px;
  padding:28px;
  background:rgba(255,255,255,.96);
  box-shadow:var(--shadow);
}
.value-card h2{margin:0 0 6px;font-size:20px}
.value-card>p{margin:0;color:var(--muted);font-size:14px}
.value-flow{display:grid;gap:10px;margin-top:22px}
.flow-step{
  display:grid;
  grid-template-columns:42px 1fr auto;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border:1px solid #d8e8f0;
  border-radius:14px;
  background:#fbfdfe;
}
.flow-step .n{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:900;font-size:13px}
.flow-step b{font-size:15px}
.flow-step small{display:block;color:var(--muted);margin-top:2px}
.arrow{color:var(--cyan);font-weight:900}
.data-ribbon{margin-top:14px;border-radius:14px;padding:14px 16px;color:#fff;background:linear-gradient(90deg,var(--navy),var(--navy3))}
.data-ribbon b{display:block}
.data-ribbon small{opacity:.82}
.section{max-width:1380px;margin:auto;padding:42px clamp(22px,5vw,74px) 74px}
.section-head{margin-bottom:22px}
.section-head h2{margin:10px 0 0;font-size:34px;color:var(--navy)}
.section-head p{margin:8px 0 0;color:var(--muted)}
.domain-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.domain-card{min-height:330px;border:1px solid #cfe2ed;border-radius:22px;background:#fff;overflow:hidden;box-shadow:0 12px 30px rgba(5,47,87,.07)}
.domain-head{min-height:139px;padding:22px;color:#fff;background:linear-gradient(145deg,var(--navy),#0a6688)}
.domain-kicker{font-size:11px;opacity:.72;text-transform:uppercase;letter-spacing:.13em}
.domain-head h3{font-size:21px;line-height:1.15;margin:7px 0}
.domain-head p{margin:0;font-size:13px;line-height:1.45;opacity:.84}
.module-list{padding:10px 12px 16px}
.module-link{
  width:100%;
  border:0;
  border-bottom:1px solid #e6f0f5;
  background:transparent;
  display:grid;
  grid-template-columns:28px 1fr auto;
  gap:10px;
  align-items:center;
  padding:13px 8px;
  color:var(--ink);
  text-align:left;
}
.module-link:last-child{border-bottom:0}
.module-link:hover{background:#f2faff;border-radius:9px}
.module-icon{width:25px;height:25px;border-radius:8px;background:#e7f7fd;color:var(--navy3);display:grid;place-items:center;font-size:12px;font-weight:900}
.module-link b{font-size:14px}
.module-link small{display:block;color:#7993a7;margin-top:2px}
.chev{color:var(--cyan);font-weight:900}
.trust-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.trust-item{border:1px solid #d9e8f0;background:#fff;border-radius:14px;padding:16px 18px}
.trust-item b{display:block;color:var(--navy);font-size:14px}
.trust-item span{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.footer{border-top:1px solid var(--line);max-width:1380px;margin:auto;padding:24px clamp(22px,5vw,74px) 36px;display:flex;justify-content:space-between;gap:20px;color:#7890a5;font-size:12px}

/* Login directo: sin iframe */
.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:22px;
  background:rgba(2,25,45,.72);
  backdrop-filter:blur(10px);
}
.modal[hidden]{display:none}
.modal-panel{
  width:min(500px,100%);
  overflow:hidden;
  border:1px solid rgba(106,189,226,.35);
  border-radius:24px;
  background:#062d4d;
  color:#eaf6ff;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.modal-top{
  min-height:74px;
  padding:18px 20px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.modal-top h2{margin:0;font-size:19px}
.modal-top p{margin:5px 0 0;color:#9fc0d8;font-size:13px}
.modal-close{
  flex:0 0 auto;
  width:38px;height:38px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:10px;
  background:transparent;
  color:#fff;
  font-size:20px;
}
.login-form{padding:26px 28px 30px}
.login-badge{
  width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;
  margin:0 0 22px;
  background:#208be9;
  color:#fff;
  font-size:32px;
}
.login-form label{display:block;margin:0 0 8px;color:#a9c5d9;font-size:13px}
.login-form input{
  display:block;
  width:100%;
  height:54px;
  margin:0 0 16px;
  border:1px solid #245c82;
  border-radius:12px;
  padding:0 16px;
  background:#03223c;
  color:#fff;
  outline:none;
}
.login-form input:focus{border-color:#38aaf7;box-shadow:0 0 0 3px rgba(56,170,247,.14)}
.login-submit{
  width:100%;
  height:52px;
  margin-top:4px;
  border:0;
  border-radius:11px;
  background:#2d90ed;
  color:#fff;
  font-weight:900;
}
.login-submit:disabled{opacity:.6;cursor:wait}
.login-message{min-height:22px;margin-top:13px;font-size:13px;color:#b9d2e4}
.login-message.error{color:#ff8a8a}
.login-message.success{color:#5fe29d}
.role-divider{display:flex;align-items:center;gap:12px;margin:22px 0 14px;color:#8dacbf;font-size:12px}
.role-divider:before,.role-divider:after{content:"";height:1px;flex:1;background:#245574}
.role-chips{display:flex;gap:8px;flex-wrap:wrap}
.role-chips span{border:1px solid #306789;border-radius:9px;padding:8px 11px;color:#bed4e3;font-size:12px}
.login-security{margin:22px 0 0;color:#8eacbf;font-size:12px;line-height:1.5}

@media(max-width:1100px){
  .hero{grid-template-columns:1fr}
  .domain-grid{grid-template-columns:repeat(2,1fr)}
  .hero-logo{width:min(360px,62%)}
}
@media(max-width:700px){
  .topbar{padding:0 16px}
  .session-text{display:none}
  .hero{padding:38px 18px 24px;gap:28px}
  .hero-logo{width:min(310px,80%)}
  .value-card{padding:18px}
  .section{padding:34px 18px 54px}
  .domain-grid,.trust-strip{grid-template-columns:1fr}
  .footer{padding:22px 18px 30px;flex-direction:column}
  .login-form{padding:24px 20px 26px}
}


/* Tarjetas de dominio desplegables: delta funcional aprobado. */
.domain-grid{align-items:start}
.domain-card{min-height:0;align-self:start}
.domain-toggle{position:relative;width:100%;border:0;text-align:left;font:inherit;cursor:pointer}
.domain-toggle:focus-visible{outline:3px solid var(--cyan2);outline-offset:-4px}
.domain-toggle:hover{background:linear-gradient(145deg,#063d67,#0d7597)}
.domain-toggle .domain-chevron{position:absolute;right:20px;top:18px;color:#fff;font-size:24px;font-weight:900;line-height:1;transition:transform .18s ease}
.domain-toggle[aria-expanded="true"] .domain-chevron{transform:rotate(180deg)}
.module-panel{max-height:0;overflow:hidden;visibility:hidden;background:#fff;transition:max-height .22s ease,visibility 0s linear .22s}
.module-panel.is-open{max-height:560px;visibility:visible;transition:max-height .22s ease}
@media(prefers-reduced-motion:reduce){.domain-toggle .domain-chevron,.module-panel{transition:none}}
.domain-kicker{display:block}
.domain-title{display:block;font-size:21px;line-height:1.15;margin:7px 0;font-weight:700}
.domain-description{display:block;margin:0;font-size:13px;line-height:1.45;opacity:.84}