/* ============================================================
   Estilo B — Portal B2B: shell de app con panel lateral fijo.
   Estructuralmente distinto de Estilo A (que usa site-header + scroll largo).
   Solo se carga en las páginas de estilo-b/.
   ============================================================ */

.app-shell{display:flex;min-height:100vh;align-items:stretch}

/* ---------- Sidebar ---------- */
.app-sidebar{
  width:264px;flex-shrink:0;color:#fff;
  /* Azul oficial del manual (--blue:#00A4E4, PANTONE 2995) oscurecido ~50%
     hacia negro — el manual no define un azul marino aparte, así que este
     es el tono más oscuro que se puede derivar sin salirse del azul de marca. */
  background:#005273;
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  border-right:1px solid rgba(255,255,255,.08);
  z-index:70;
}
/* Recuadro propio (fondo blanco) para el logo: el isotipo DEKA es un
   degradado multicolor y pierde contraste sobre cualquier color sólido de
   fondo — un fondo blanco es lo único que deja legibles todos sus tonos. */
.sidebar-top{
  margin:16px 16px 18px;padding:16px 18px;
  background:#fff;border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
}
.sidebar-top .logo{color:var(--dark);font-size:1.3rem}
.sidebar-top .logo span{background:linear-gradient(135deg,var(--red),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.sidebar-top .logo small{color:var(--text-muted)}

.sidebar-nav{flex:1;padding:18px 14px;overflow-y:auto}
.sidebar-nav-label{
  font-family:var(--font-heading);font-weight:700;font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.4);padding:0 10px;margin:18px 0 8px;
}
.sidebar-nav-label:first-child{margin-top:0}
.sidebar-link{
  display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:8px;
  font-size:.87rem;font-weight:600;color:rgba(255,255,255,.82);margin-bottom:2px;
}
.sidebar-link .ic{font-size:1rem;width:20px;text-align:center;flex-shrink:0}
.sidebar-link .sub{margin-left:auto;font-size:.68rem;font-weight:400;color:rgba(255,255,255,.4)}
.sidebar-link:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar-link.active{background:linear-gradient(135deg,var(--red),var(--orange));color:#fff}

.sidebar-bottom{padding:16px;border-top:1px solid rgba(255,255,255,.1)}
.sidebar-wa{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:#25D366;color:#fff;padding:11px;border-radius:8px;font-weight:700;font-size:.82rem;
}

.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:65}

/* ---------- Main / topbar ---------- */
.app-main{flex:1;min-width:0;display:flex;flex-direction:column}
.app-topbar{
  position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:16px;padding:14px 28px;
}
.sidebar-toggle{display:none;background:none;border:none;font-size:1.4rem;color:var(--dark);flex-shrink:0}
.app-topbar .ai-search{max-width:460px}
.app-topbar .header-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.search-toggle{display:none;background:none;border:none;font-size:1.2rem;color:var(--dark);flex-shrink:0}

.app-content{padding:0 28px 28px}
.app-content > .app-inner{max-width:1120px}

/* ---------- Hero compacto ---------- */
/* Foto real de la operación + degradado de marca (rojo→naranja→oscuro)
   encima, mismo lenguaje fotográfico que el slider de Estilo A. */
.hero-compact{
  background:
    linear-gradient(100deg, rgba(255,0,0,.85) 0%, rgba(251,176,52,.5) 55%, rgba(0,0,0,.32) 100%),
    url('../assets/hero-slide-3.jpg') center/cover;
  border-radius:14px;color:#fff;padding:36px 36px;margin:24px 0;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.hero-compact .htext{max-width:600px;position:relative;z-index:2}
.hero-compact h1{color:#fff;font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:10px;text-shadow:0 2px 14px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.6)}
.hero-compact p{opacity:.92;font-size:.95rem;margin-bottom:18px;text-shadow:0 2px 14px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.6)}
.hero-compact .eyebrow{
  color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:.9;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.5);
  padding:6px 14px;border-radius:999px;display:inline-flex;
}
.hero-compact .btn-primary{background:#fff;color:var(--red);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.hero-compact .hero-ctas{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Secciones condensadas ---------- */
.strip-section{padding:36px 0;border-bottom:1px solid var(--border)}
.strip-section:last-of-type{border-bottom:none}
.strip-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.strip-head h2{font-size:1.3rem}
.strip-head a{font-size:.8rem;font-weight:700;color:var(--accent)}

.about-strip{display:flex;gap:24px;align-items:center}
.about-strip .about-strip-visual{width:220px;flex-shrink:0;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:var(--bg-alt)}
.about-strip .about-strip-visual img{width:100%;height:100%;object-fit:cover;display:block}
.about-strip p{color:var(--text-muted);font-size:.9rem;line-height:1.65}
@media(max-width:700px){.about-strip{flex-direction:column;align-items:stretch}.about-strip .about-strip-visual{width:100%;aspect-ratio:16/9}}

.benefit-strip{display:flex;gap:22px;flex-wrap:wrap}
.benefit-chip{display:flex;align-items:center;gap:10px;flex:1;min-width:200px}
.benefit-chip .ic{
  width:40px;height:40px;border-radius:10px;background:var(--bg-alt);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;
}
.benefit-chip b{display:block;font-size:.85rem}
.benefit-chip span{font-size:.74rem;color:var(--text-muted)}

/* ---------- Responsive: sidebar off-canvas ---------- */
@media(max-width:900px){
  .app-sidebar{
    position:fixed;top:0;left:0;height:100%;transform:translateX(-100%);
    transition:transform .25s ease;box-shadow:0 0 40px rgba(0,0,0,.3);
  }
  .app-sidebar.open{transform:translateX(0)}
  .sidebar-overlay.open{display:block}
  .sidebar-toggle{display:block}
  .app-topbar .ai-search{display:none}
  .app-topbar .ai-search.open{
    display:flex;position:absolute;top:100%;left:0;right:0;margin:0;max-width:none;
    padding:12px 18px;background:#fff;border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-lg);z-index:55;
  }
  .search-toggle{display:block}
  .app-content{padding:0 18px 18px}
  .hero-compact{padding:26px 22px}
  .about-strip{gap:18px}
}