/* ════════════════════════════════════════════════
   CHAPPSA SECTIONS v2.0
   ════════════════════════════════════════════════ */

/* ── HERO ── */
.hero { height: 100vh; min-height: 640px; position: relative; overflow: hidden; }
.hero__slider { height: 100%; position: relative; }
.hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease; }
.hero__slide.active { opacity: 1; z-index: 1; }
.hero__slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(13,24,37,0.82) 0%, rgba(30,54,83,0.55) 55%, rgba(71,159,250,0.15) 100%); }
.hero__content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: var(--navbar-h); }
.hero__kicker { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 4px; text-transform: uppercase; color: var(--clr-yellow); margin-bottom: var(--sp-4); opacity:0; transform:translateY(16px); transition: all 0.6s var(--ease-out) 0.2s; }
.hero__title  { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-black); color: var(--clr-white); line-height: 1.08; max-width: 740px; margin-bottom: var(--sp-8); opacity:0; transform:translateY(24px); transition: all 0.6s var(--ease-out) 0.4s; }
.hero__actions { display:flex; gap: var(--sp-4); flex-wrap:wrap; opacity:0; transform:translateY(16px); transition: all 0.6s var(--ease-out) 0.6s; }
.hero__slide.active .hero__kicker,
.hero__slide.active .hero__title,
.hero__slide.active .hero__actions { opacity:1; transform:none; }
.hero__dots { position:absolute; bottom: var(--sp-10); left:50%; transform:translateX(-50%); display:flex; gap: var(--sp-3); z-index:3; }
.hero__dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.4); border:none; cursor:pointer; transition: all var(--dur-base); }
.hero__dot.active { background: var(--clr-yellow); width:28px; border-radius:5px; }
.hero__arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,0.12); border:2px solid rgba(255,255,255,0.25); color:white; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(8px); transition:all var(--dur-base); }
.hero__arrow:hover { background: var(--clr-yellow); border-color: var(--clr-yellow); color: var(--clr-navy); }
.hero__arrow-prev { left: var(--sp-6); }
.hero__arrow-next { right: var(--sp-6); }

/* ── ABOUT ── */
.about { background: var(--clr-navy); color: var(--clr-white); }
.about__grid { display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-16); align-items:center; }
.about__number { font-family: var(--font-display); font-size: clamp(7rem,16vw,13rem); font-weight: var(--fw-black); color:transparent; -webkit-text-stroke: 3px var(--clr-yellow); line-height:1; }
.about__sub { color: var(--clr-yellow); font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); margin-bottom: var(--sp-6); }
.about__body { color: rgba(255,255,255,0.72); font-size: var(--fs-md); line-height: 1.8; max-width: 500px; }
@media (max-width:767px) {
  .about__grid { grid-template-columns:1fr; text-align:center; }
  .about__number { font-size: clamp(5rem,20vw,8rem); }
  .about__body { margin-inline:auto; }
}

/* ── ERP ── */
.erp { background: var(--clr-bg-alt); }
.erp__platforms { display:grid; grid-template-columns:repeat(3,1fr); gap: var(--sp-8); margin-bottom: var(--sp-16); }
.erp__platform { background: var(--clr-bg-card); border-radius: var(--r-lg); padding: var(--sp-10) var(--sp-8); text-align:center; border: 2px solid var(--clr-border); transition: all var(--dur-base) var(--ease-out); }
.erp__platform:hover { border-color: var(--clr-yellow); transform:translateY(-6px); box-shadow: var(--shadow-lg); }
.erp__platform-logo { height: 44px; object-fit:contain; margin:0 auto var(--sp-6); }
.erp__platform-name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-black); color: var(--clr-text); margin-bottom: var(--sp-4); }
.erp__platform-tags { display:flex; flex-wrap:wrap; gap: var(--sp-2); justify-content:center; margin-top: var(--sp-4); }
.erp__platform-tags span { font-size: var(--fs-xs); background: var(--clr-yellow-light); color: var(--clr-navy); padding: 3px 10px; border-radius: var(--r-full); font-weight: var(--fw-bold); font-family: var(--font-display); }
[data-theme="dark"] .erp__platform-tags span { background: rgba(252,185,35,0.15); color: var(--clr-yellow); }
.erp__platform-desc { font-size: var(--fs-sm); color: var(--clr-text-muted); line-height: 1.6; }
.erp__stats-bar { background: var(--clr-navy); border-radius: var(--r-lg); padding: var(--sp-12); display:grid; grid-template-columns:repeat(3,1fr); gap: var(--sp-8); }
@media (max-width:991px) {
  .erp__platforms { grid-template-columns:1fr; }
  .erp__stats-bar { grid-template-columns:1fr; }
}

/* ── AI SERVICES ── */
.ai-services { background: var(--clr-bg); }
.ai-hero-card { background: linear-gradient(135deg, var(--clr-navy) 0%, #2a4a6b 100%); border-radius: var(--r-lg); padding: var(--sp-16) var(--sp-12); margin-bottom: var(--sp-12); color: var(--clr-white); position:relative; overflow:hidden; }
.ai-hero-card::before { content:'AI'; position:absolute; right: var(--sp-8); top:50%; transform:translateY(-50%); font-family: var(--font-display); font-size:12rem; font-weight: var(--fw-black); color:rgba(255,255,255,0.04); line-height:1; pointer-events:none; }
.ai-hero-card__title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-black); margin-bottom: var(--sp-4); }
.ai-hero-card__desc { font-size: var(--fs-md); color: rgba(255,255,255,0.75); max-width: 540px; line-height: 1.7; margin-bottom: var(--sp-8); }
.ai-features { display:grid; grid-template-columns:repeat(2,1fr); gap: var(--sp-8); }
.ai-feature { display:flex; gap: var(--sp-6); align-items:flex-start; padding: var(--sp-8); background: var(--clr-bg-card); border-radius: var(--r-md); border: 1.5px solid var(--clr-border); transition: all var(--dur-base); }
.ai-feature:hover { border-color: var(--clr-yellow); box-shadow: var(--shadow-lg); }
.ai-feature__icon { width:48px; height:48px; border-radius: var(--r-sm); background: linear-gradient(135deg, var(--clr-blue-light), var(--clr-yellow-light)); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ai-feature__title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--clr-text); margin-bottom: var(--sp-2); }
.ai-feature__desc { font-size: var(--fs-sm); color: var(--clr-text-muted); line-height:1.7; }
@media (max-width:767px) { .ai-features { grid-template-columns:1fr; } }

/* ── SOCIAL HUB ── */
.social-hub { background: var(--clr-navy); color: var(--clr-white); }
.social-hub__platforms { display:flex; gap: var(--sp-4); flex-wrap:wrap; justify-content:center; margin-bottom: var(--sp-16); }
.platform-pill { display:flex; align-items:center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-6); border-radius: var(--r-pill); font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-bold); transition: transform var(--dur-base); cursor:default; }
.platform-pill:hover { transform: translateY(-3px); }
.platform-pill--instagram { background: linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045); color:#fff; }
.platform-pill--facebook  { background: #1877f2; color:#fff; }
.platform-pill--whatsapp  { background: #25d366; color:#fff; }
.platform-pill--tiktok    { background: #000; color:#fff; border:1px solid rgba(255,255,255,0.2); }
.social-hub__features { display:grid; grid-template-columns:repeat(3,1fr); gap: var(--sp-8); }
.hub-feature { background: rgba(255,255,255,0.06); border-radius: var(--r-md); padding: var(--sp-8); border: 1px solid rgba(255,255,255,0.1); transition: all var(--dur-base); }
.hub-feature:hover { background: rgba(255,255,255,0.1); border-color: var(--clr-yellow); }
.hub-feature__num { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-black); color: var(--clr-yellow); display:block; line-height:1; margin-bottom: var(--sp-4); }
.hub-feature__title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-bold); margin-bottom: var(--sp-3); }
.hub-feature__desc { font-size: var(--fs-sm); color: rgba(255,255,255,0.65); line-height: 1.7; }
@media (max-width:991px) { .social-hub__features { grid-template-columns:1fr; } }

/* ── AUTOMATIZACIÓN ── */
.automation { background: var(--clr-bg-alt); }
.automation__grid { display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-16); align-items:center; }
.automation__visual { background: linear-gradient(135deg, var(--clr-navy), #2a4a6b); border-radius: var(--r-lg); padding: var(--sp-12); aspect-ratio:1; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.automation__visual-inner { text-align:center; color: var(--clr-white); position:relative; z-index:1; }
.automation__visual-icon { font-size: 5rem; margin-bottom: var(--sp-4); }
.automation__visual-text { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-black); color: var(--clr-yellow); }
.automation__visual::before { content:''; position:absolute; width:300px; height:300px; border-radius:50%; border: 2px dashed rgba(252,185,35,0.2); top:50%; left:50%; transform:translate(-50%,-50%); animation: spin 20s linear infinite; }
.automation__visual::after  { content:''; position:absolute; width:200px; height:200px; border-radius:50%; border: 2px dashed rgba(71,159,250,0.15); top:50%; left:50%; transform:translate(-50%,-50%); animation: spin 14s linear infinite reverse; }
@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.automation__steps { display:flex; flex-direction:column; gap: var(--sp-6); }
.auto-step { display:flex; gap: var(--sp-6); align-items:flex-start; }
.auto-step__num { width:40px; height:40px; border-radius:50%; background: var(--clr-yellow); color: var(--clr-navy); font-family: var(--font-display); font-weight: var(--fw-black); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size: var(--fs-md); }
.auto-step__title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--clr-text); margin-bottom: var(--sp-1); }
.auto-step__desc { font-size: var(--fs-sm); color: var(--clr-text-muted); }
@media (max-width:767px) { .automation__grid { grid-template-columns:1fr; } .automation__visual { aspect-ratio:16/9; } }

/* ── SERVICIOS ── */
.services { background: var(--clr-bg); }
.services__grid { display:grid; grid-template-columns:repeat(3,1fr); gap: var(--sp-8); }
@media (max-width:991px) { .services__grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:575px)  { .services__grid { grid-template-columns:1fr; } }

/* ── BLOG ── */
.blog { background: var(--clr-bg-alt); }
.blog__grid { display:grid; grid-template-columns:repeat(3,1fr); gap: var(--sp-8); }
.blog-card { background: var(--clr-bg-card); border-radius: var(--r-md); overflow:hidden; box-shadow: var(--shadow-md); border: 1.5px solid var(--clr-border); transition: all var(--dur-base) var(--ease-out); }
.blog-card:hover { transform:translateY(-6px); box-shadow: var(--shadow-xl); border-color: var(--clr-yellow); }
.blog-card__img-wrap { overflow:hidden; }
.blog-card__img { width:100%; height:200px; object-fit:cover; transition: transform 0.5s ease; }
.blog-card:hover .blog-card__img { transform:scale(1.05); }
.blog-card__body { padding: var(--sp-6); }
.blog-card__meta { display:flex; align-items:center; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--clr-text-muted); margin-bottom: var(--sp-3); flex-wrap:wrap; }
.blog-card__cat { background: var(--clr-yellow-light); color: var(--clr-navy); font-weight: var(--fw-bold); padding: 2px 8px; border-radius: var(--r-full); font-size: 10px; text-transform:uppercase; letter-spacing:1px; }
[data-theme="dark"] .blog-card__cat { background: rgba(252,185,35,0.15); color: var(--clr-yellow); }
.blog-card__title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--clr-text); margin-bottom: var(--sp-2); line-height:1.3; }
.blog-card__excerpt { font-size: var(--fs-sm); color: var(--clr-text-muted); line-height:1.65; }
.blog__cta { text-align:center; margin-top: var(--sp-12); }
@media (max-width:767px) { .blog__grid { grid-template-columns:1fr; } }