/* SAVELIA Sitio Web · sección de módulos */
.modules-section { position: relative; overflow: hidden; background: #fbfcfa; }
.modules-section::before { content: ""; position: absolute; width: 500px; height: 500px; top: -310px; right: -190px; border: 1px solid rgba(63,83,81,.1); border-radius: 50%; box-shadow: 0 0 0 70px rgba(63,83,81,.025); }
.modules-heading { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr .74fr; align-items: end; gap: 80px; }
.modules-heading > p { margin-bottom: 4px !important; }
.modules-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 52px; }
.module-card { --module: #3f5351; --module-soft: rgba(63,83,81,.12); position: relative; overflow: hidden; min-height: 470px; display: flex; flex-direction: column; border: 1px solid #dce8e5; border-radius: 25px; padding: 30px; background: rgba(255,255,255,.94); box-shadow: 0 16px 40px rgba(38,69,68,.065); }
.module-card::after { content: ""; position: absolute; width: 175px; height: 175px; right: -105px; top: -105px; border-radius: 50%; background: var(--module-soft); }
.module-card-observer { --module: #b95738; --module-soft: rgba(217,108,74,.15); }
.module-card-academic { --module: #4e6bc7; --module-soft: rgba(78,107,199,.13); }
.module-card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.module-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px 16px 16px 6px; color: white; background: var(--module); font-size: 18px; font-weight: 800; }
.module-card-top small { border: 1px solid color-mix(in srgb,var(--module) 24%,white); border-radius: 999px; padding: 6px 9px; color: var(--module); background: color-mix(in srgb,var(--module) 7%,white); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.module-label { margin: 30px 0 0 !important; color: var(--module) !important; font-size: 11px !important; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.module-card h3 { margin: 10px 0 13px; color: #2d4853; font-size: 23px; line-height: 1.2; letter-spacing: -.03em; }
.module-card > p:not(.module-label) { margin: 0; color: #718188; font-size: 13px; line-height: 1.68; }
.module-card ul { display: grid; gap: 9px; margin: 23px 0 26px; padding: 0; list-style: none; }
.module-card li { display: flex; align-items: center; gap: 9px; color: #536a73; font-size: 11px; font-weight: 650; }
.module-card li::before { content: "✓"; color: var(--module); font-weight: 900; }
.module-card > a { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; color: var(--module); font-size: 12px; font-weight: 800; }
.module-card > a span { transition: transform 160ms ease; }
.module-card > a:hover span,.module-card > a:focus-visible span { transform: translateX(4px); }
.modules-access-note { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 17px; margin-top: 20px; border: 1px solid #d6e5e1; border-radius: 22px; padding: 20px 22px; background: #f1f7f5; }
.modules-access-note > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: white; background: #3f5351; font-weight: 900; }
.modules-access-note p { margin: 0; color: #657880; font-size: 12px; line-height: 1.55; }
.modules-access-note strong { display: block; color: #334f58; font-size: 13px; }
.modules-access-note .button { min-height: 44px; padding: 0 17px; }
@media (max-width:980px) { .modules-heading { grid-template-columns:1fr; gap:12px; } .modules-heading > p { max-width:690px; } .modules-grid { grid-template-columns:1fr 1fr; } .module-card:last-child { grid-column:span 2; min-height:390px; } }
@media (max-width:640px) { .modules-grid { grid-template-columns:1fr; margin-top:38px; } .module-card,.module-card:last-child { grid-column:auto; min-height:auto; padding:25px; } .modules-access-note { grid-template-columns:auto 1fr; align-items:start; } .modules-access-note .button { grid-column:1/-1; } }

/* SAVELIA Sitio Web · acceso a demo interactiva */
.nav-demo {
  border-radius: 999px;
  padding: 11px 18px;
  color: #fff;
  background: var(--cta);
  box-shadow: 0 8px 20px rgba(185,87,56,.18);
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.nav-demo:hover,
.nav-demo:focus-visible { color: #fff !important; transform: translateY(-1px); background: var(--cta-hover); box-shadow: 0 10px 24px rgba(159,69,45,.22); }
.button-demo { color: #fff; background: var(--cta); box-shadow: 0 13px 28px rgba(185,87,56,.24); }
.button-demo:hover,
.button-demo:focus-visible { color: #fff; background: var(--cta-hover); box-shadow: 0 17px 34px rgba(159,69,45,.3); }
.hero-demo-button { position: relative; }
.hero-demo-button::before { content: "Demo"; position: absolute; top: -10px; right: -7px; border: 2px solid #fff; border-radius: 999px; padding: 2px 6px; background: #3f5351; color: #fff; font-size: 8px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }

.demo-section { position: relative; overflow: hidden; background: linear-gradient(135deg,#eef4f2 0%,#f9fbfa 58%,#fff4ef 100%); }
.demo-section::before { content:""; position:absolute; width:520px; height:520px; left:-340px; bottom:-330px; border:1px solid rgba(63,83,81,.10); border-radius:50%; box-shadow:0 0 0 72px rgba(63,83,81,.025); }
.demo-grid { position: relative; z-index: 1; display:grid; grid-template-columns:.9fr 1.1fr; gap:72px; align-items:center; }
.demo-copy h2 { max-width:650px; margin:0; color:var(--ink); font-size:clamp(38px,4.6vw,59px); line-height:1.06; letter-spacing:-.045em; }
.demo-lead { max-width:660px; margin:23px 0 0; color:var(--muted); font-size:17px; line-height:1.72; }
.demo-points { display:grid; gap:13px; margin-top:28px; }
.demo-points p { display:grid; grid-template-columns:34px 1fr; gap:0 12px; margin:0; border:1px solid rgba(63,83,81,.10); border-radius:15px; padding:13px 15px; background:rgba(255,255,255,.68); }
.demo-points p > span { grid-row:1/3; width:31px; height:31px; display:grid; place-items:center; border-radius:10px; background:#dfece8; color:var(--teal); font-weight:900; }
.demo-points strong { color:var(--ink); font-size:14px; line-height:1.4; }
.demo-points small { margin-top:2px; color:var(--muted); font-size:12px; line-height:1.5; }
.demo-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:29px; }
.demo-privacy-note { max-width:620px; margin:19px 0 0; color:#718188; font-size:12px; line-height:1.55; }
.demo-privacy-note strong { color:#526a63; }
.demo-preview { overflow:hidden; border:1px solid #d8e4e1; border-radius:27px; background:#fff; box-shadow:0 28px 70px rgba(42,70,65,.14); transform:rotate(.35deg); }
.demo-preview-bar { min-height:47px; display:flex; align-items:center; gap:7px; border-bottom:1px solid #e4ece9; padding:0 17px; background:#f6f8f7; }
.demo-preview-bar > span { width:8px; height:8px; border-radius:50%; background:#c7d2cf; }
.demo-preview-bar > p { min-width:0; flex:1; margin:0 0 0 7px; overflow:hidden; border:1px solid #e1e8e6; border-radius:9px; padding:6px 11px; background:#fff; color:#80908c; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.demo-preview-body { padding:24px; background:linear-gradient(180deg,#fff,#fbfcfc); }
.demo-preview-brand { display:flex; align-items:center; gap:11px; }
.demo-preview-brand > span { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:#3c544c; color:#fff; font-size:18px; font-weight:800; }
.demo-preview-brand div { display:flex; min-width:0; flex:1; flex-direction:column; }
.demo-preview-brand strong { color:#263a35; font-size:15px; letter-spacing:.12em; }
.demo-preview-brand small { color:#7a8b86; font-size:10px; }
.demo-preview-brand b { border-radius:999px; padding:5px 8px; background:#fff0ea; color:#b95738; font-size:8px; letter-spacing:.1em; }
.demo-preview-message { display:flex; align-items:center; gap:11px; margin-top:20px; border:1px solid #e2d4a7; border-radius:14px; padding:12px 13px; background:#fffaf0; }
.demo-preview-message > span { width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; border-radius:9px; background:#f1e5bb; color:#7a6220; font-size:11px; font-weight:900; }
.demo-preview-message div { display:flex; flex-direction:column; gap:2px; }
.demo-preview-message strong { color:#5c5032; font-size:11px; }
.demo-preview-message small { color:#8a8068; font-size:9px; line-height:1.4; }
.demo-module-list { display:grid; gap:9px; margin-top:16px; }
.demo-module-list article { display:grid; grid-template-columns:39px 1fr auto; align-items:center; gap:11px; border:1px solid #e2eae8; border-radius:14px; padding:11px 12px; background:#fff; }
.demo-module-list i { width:39px; height:39px; display:grid; place-items:center; border-radius:11px; background:#e7efed; color:#3f5351; font-style:normal; font-size:12px; font-weight:850; }
.demo-module-list article:nth-child(2) i { background:#fff0eb; color:#b95738; }
.demo-module-list article:nth-child(3) i { background:#edf0fb; color:#4e6bc7; }
.demo-module-list div { display:flex; min-width:0; flex-direction:column; gap:2px; }
.demo-module-list strong { color:#354d47; font-size:11px; }
.demo-module-list small { color:#85938f; font-size:9px; }
.demo-module-list article > span { color:#71847e; font-size:9px; font-weight:750; }
.demo-preview-cta { min-height:43px; display:flex; align-items:center; justify-content:center; gap:9px; margin-top:15px; border-radius:12px; background:#3c544c; color:#fff; font-size:11px; font-weight:800; }
.demo-preview-cta:hover,.demo-preview-cta:focus-visible { background:#2f433c; }

@media (max-width: 1100px) {
  .main-nav { gap:14px; font-size:14px; }
  .nav-demo,.nav-login { padding:10px 14px; }
}
@media (max-width: 980px) {
  .main-nav a:not(.nav-login):not(.nav-demo) { display:none; }
  .main-nav .nav-demo { display:inline-flex; }
  .demo-grid { grid-template-columns:1fr; gap:48px; }
  .demo-copy { max-width:760px; }
  .demo-preview { width:min(680px,100%); margin:0 auto; transform:none; }
}
@media (max-width: 640px) {
  .main-nav { gap:7px; }
  .nav-demo,.nav-login { padding:9px 10px; font-size:11px; }
  .demo-grid { gap:36px; }
  .demo-copy h2 { font-size:38px; }
  .demo-lead { font-size:16px; }
  .demo-actions { align-items:stretch; flex-direction:column; }
  .demo-actions .text-link { justify-content:center; }
  .demo-preview-body { padding:17px; }
  .demo-module-list article { grid-template-columns:36px 1fr; }
  .demo-module-list article > span { display:none; }
}
@media (max-width: 400px) {
  .brand-logo { width:112px; }
  .nav-demo,.nav-login { padding:8px 8px; font-size:10px; }
}