/* Landing bespoke — Grupo Alianza | Nómina. Paleta y tipografía propias
   de la marca matriz Grupo Alianza (no las del sistema de Círculo Alianza):
   Poppins (sustituto libre de Century Gothic, fuente comercial no disponible
   en Google Fonts) + Lato, verdes corporativos #2F974E / #6CD33C / #49B146. */

:root{
  --gan-green-dark:#2F974E;--gan-green:#49B146;--gan-green-light:#6CD33C;--gan-green-olive:#15540D;
  --gan-ink:#1D1D1D;--gan-muted:#5B5B5B;--gan-gray:#B0B0B0;--gan-line:#E3E3E3;--gan-bg-soft:#F5F5F5;
  --gan-radius:16px;
}
.gan{font-family:'Lato',sans-serif;color:var(--gan-ink);line-height:1.55;overflow-x:hidden;background:#fff}
.gan h1,.gan h2,.gan h3,.gan b,.gan strong{font-family:'Poppins',sans-serif}
.gan .gan-h2{font-size:30px;font-weight:700;line-height:1.28;color:var(--gan-green-dark)}
.gan .gan-center{text-align:center}
.gan .gan-lede{color:var(--gan-muted);font-size:16px;margin-top:10px}
.gan .gan-sec{padding:64px 24px}
.gan .gan-white{background:#fff}
.gan .gan-soft{background:var(--gan-bg-soft)}
.gan img{display:block;max-width:100%;height:auto}
.gan-in{max-width:1180px;margin:0 auto}

.gan-btn{display:inline-flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-weight:700;font-size:15.5px;padding:14px 28px;border-radius:999px;text-decoration:none;border:none;cursor:pointer;transition:transform .15s,opacity .15s;background:linear-gradient(120deg,var(--gan-green-light),var(--gan-green-dark));color:#fff}
.gan-btn:hover{transform:translateY(-1px);opacity:.92}

/* Barra de marca (propia de la landing, negra con logo blanco — igual al mock) */
.gan-brandbar{background:#000;padding:16px;text-align:center}
.gan-brandbar img{display:inline-block;height:30px;width:auto}

/* HERO */
.gan-hero{padding:72px 24px 0;background:#fff}
.gan-hero-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:40px}
.gan-hero-txt{flex:1;min-width:280px}
.gan-hero-txt h1{font-size:48px;font-weight:700;line-height:1.16;margin-bottom:16px;color:var(--gan-green-dark)}
.gan-hero-txt h1 span{display:block;color:var(--gan-green-dark);font-size:0.68em;margin-top:6px}
.gan-hero-txt p{font-size:16px;color:var(--gan-muted);max-width:480px;margin-bottom:26px}
.gan-hero-photo{flex:none;width:420px;position:relative}
.gan-hero-photo::before{content:'';position:absolute;top:8%;right:6%;width:62%;height:62%;background:linear-gradient(135deg,var(--gan-green-light),var(--gan-green-dark));border-radius:32px;transform:rotate(-8deg);z-index:0}
.gan-hero-photo-bg{position:relative;border-radius:20px;overflow:hidden;z-index:1}
.gan-hero-photo-bg img.gan-bg{width:100%;height:340px;object-fit:cover;display:block}
.gan-hero-photo-bg img.gan-woman{position:absolute;bottom:0;right:-6%;width:78%;height:auto;z-index:2;filter:drop-shadow(0 18px 30px rgba(0,0,0,.2))}

/* Franja degradada con cita */
.gan-strip{background:linear-gradient(120deg,var(--gan-green-dark),var(--gan-green-light));padding:22px 24px;text-align:center;margin-top:44px}
.gan-strip p{max-width:820px;margin:0 auto;color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:15.5px;font-style:italic;line-height:1.5}

/* Retos / desafío */
.gan-challenge{background:#fff;text-align:center}
.gan-challenge .gan-in{max-width:880px}
.gan-challenge p{font-size:15.5px;color:var(--gan-muted);margin-top:14px}
.gan-challenge p.gan-em{font-style:italic;font-weight:700;color:var(--gan-ink)}

/* Puntos de dolor */
.gan-pain{background:var(--gan-bg-soft)}
.gan-pain-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:48px}
.gan-pain-list{flex:1;min-width:280px;display:flex;flex-direction:column;gap:14px}
.gan-pain-item{display:flex;align-items:flex-start;gap:12px;font-size:15px}
.gan-pain-item img{flex:none;width:18px;height:18px;margin-top:3px}
.gan-pain-photo{flex:none;width:440px;border-radius:var(--gan-radius);overflow:hidden}

/* Bloque verde: Grupo Alianza México */
.gan-about{background:linear-gradient(120deg,var(--gan-green),var(--gan-green-dark));padding:64px 24px;position:relative;overflow:hidden}
.gan-about-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:56px;position:relative;z-index:1}
.gan-about-photo{flex:none;width:320px;position:relative}
.gan-about-photo img{width:100%}
.gan-about-tag{position:absolute;top:10px;left:-6px;display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.28);color:#fff;font-family:'Lato',sans-serif;font-weight:700;font-size:11px;padding:4px 10px;border-radius:999px}
.gan-about-tag img{width:12px;height:12px}
.gan-about-badge{position:absolute;right:6%;top:36%;width:64px;height:64px;background:#fff;border-radius:16px;display:grid;place-items:center;box-shadow:0 12px 24px rgba(0,0,0,.18);transform:rotate(8deg)}
.gan-about-badge img{width:32px;height:32px}
.gan-about-txt{flex:1;min-width:280px;color:#fff}
.gan-about-txt h2{font-size:26px;font-weight:700;margin-bottom:14px;line-height:1.3}
.gan-about-txt p{font-size:15px;color:rgba(255,255,255,.92);margin-bottom:14px}
.gan-about-txt p.gan-strong{font-family:'Poppins',sans-serif;font-weight:700;font-size:15.5px}

/* Beneficios (negro) */
.gan-benefits{background:#000;color:#fff;text-align:center}
.gan-benefits .gan-h2{color:var(--gan-green-light)}
.gan-benefits .gan-lede{color:rgba(255,255,255,.8)}
.gan-benefits-grid{max-width:1180px;margin:36px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.gan-benefit-card{border:1px solid var(--gan-green);border-radius:14px;padding:26px 18px;text-align:center}
.gan-benefit-card img{width:44px;height:44px;margin:0 auto 14px}
.gan-benefit-card b{display:block;color:var(--gan-green-light);font-size:15px;margin-bottom:8px}
.gan-benefit-card span{font-size:13px;color:rgba(255,255,255,.78)}

/* Lo que nos distingue */
.gan-distinguish{background:#fff;text-align:center}
.gan-distinguish .gan-in{max-width:880px}
.gan-distinguish > .gan-in > p{font-size:15.5px;color:var(--gan-muted);margin-top:12px;margin-bottom:40px}
.gan-distinguish-row{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:56px;text-align:left}
.gan-distinguish-photo{flex:none;width:340px;position:relative}
.gan-distinguish-photo .gan-main{border-radius:24px;overflow:hidden;border:3px solid var(--gan-green-light)}
.gan-distinguish-photo .gan-main img{height:360px;object-fit:cover;width:100%}
.gan-distinguish-photo .gan-accent{position:absolute;left:-30px;bottom:-24px;width:150px;border-radius:16px;overflow:hidden;border:5px solid #fff;box-shadow:0 14px 30px rgba(0,0,0,.18)}
.gan-distinguish-list{flex:1;min-width:280px;display:flex;flex-direction:column;gap:16px}
.gan-distinguish-item{display:flex;align-items:flex-start;gap:12px;font-size:15px}
.gan-distinguish-item img{flex:none;width:18px;height:18px;margin-top:3px}

/* Cómo funciona */
.gan-steps-sec{background:var(--gan-green-olive);color:#fff;text-align:center}
.gan-steps-sec .gan-h2{color:var(--gan-green-light)}
.gan-steps-grid{max-width:1000px;margin:36px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:36px 28px}
.gan-step b{display:block;color:var(--gan-green-light);font-family:'Poppins',sans-serif;font-weight:700;font-size:18px;margin-bottom:10px}
.gan-step p{font-size:13.5px;color:rgba(255,255,255,.85)}

/* Esta solución es para */
.gan-fit{background:var(--gan-bg-soft)}
.gan-fit-in{max-width:1180px;margin:0 auto;display:flex;align-items:flex-start;gap:56px}
.gan-fit-txt{flex:none;width:340px}
.gan-fit-txt p{font-size:15px;color:var(--gan-muted);margin-top:14px}
.gan-fit-list{flex:1;min-width:280px;display:flex;flex-direction:column;gap:12px}
.gan-fit-pill{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1.5px solid var(--gan-green);border-radius:999px;padding:12px 20px;font-size:14.5px}
.gan-fit-pill img{flex:none;width:14px;height:14px}

/* Qué puede lograr tu empresa */
.gan-achieve{background:#fff}
.gan-achieve-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:48px}
.gan-achieve-photo{flex:none;width:420px;border-radius:var(--gan-radius);overflow:hidden}
.gan-achieve-txt{flex:1;min-width:300px}
.gan-achieve-txt p.gan-lead{font-size:15px;color:var(--gan-muted);margin:14px 0 22px}
.gan-achieve-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
.gan-achieve-item{display:flex;align-items:flex-start;gap:10px;font-size:14.5px}
.gan-achieve-item img{flex:none;width:16px;height:16px;margin-top:3px}

/* Experiencia y capacidad operativa */
.gan-experience{background:var(--gan-bg-soft)}
.gan-experience-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:56px}
.gan-experience-txt{flex:1;min-width:280px}
.gan-experience-txt p{font-size:15px;color:var(--gan-muted);margin-top:14px}
.gan-experience-photo{flex:none;width:420px;position:relative}
.gan-experience-photo img.gan-main{width:70%;margin:0 auto;position:relative;z-index:1}
.gan-experience-deco{position:absolute;opacity:.35}
.gan-experience-deco img{width:100%;height:100%}
.gan-deco-1{top:0;left:6%;width:52px;height:52px}
.gan-deco-2{top:10%;right:2%;width:54px;height:54px}
.gan-deco-3{bottom:2%;left:0;width:56px;height:56px}

/* Banner: no solo procesamos nómina */
.gan-banner{background:linear-gradient(120deg,var(--gan-green-dark),var(--gan-green-light));padding:30px 24px}
.gan-banner-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:18px}
.gan-banner img{flex:none;width:44px;height:44px}
.gan-banner-txt{color:#fff}
.gan-banner-txt span{display:block;font-size:15px}
.gan-banner-txt b{display:block;font-size:19px;margin-top:4px}

/* FAQ */
.gan-faq{background:#fff}
.gan-faq .gan-in{max-width:860px}
.gan-faq-list{margin-top:32px}
.gan-faq-item{border-bottom:1px solid var(--gan-line);padding:18px 4px}
.gan-faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:'Poppins',sans-serif;font-weight:700;font-size:15.5px;color:var(--gan-ink)}
.gan-faq-item summary::-webkit-details-marker{display:none}
.gan-faq-item .gan-chev{width:16px;height:16px;flex:none;transition:transform .2s;transform:rotate(180deg)}
.gan-faq-item[open] .gan-chev{transform:rotate(0deg)}
.gan-faq-item p{margin-top:10px;font-size:14px;color:var(--gan-muted);max-width:760px}

/* CTA final */
.gan-cta{background:var(--gan-bg-soft)}
.gan-cta-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:48px}
.gan-cta-photo{flex:none;width:340px}
.gan-cta-txt{flex:1;min-width:280px}
.gan-cta-txt p{font-size:15px;color:var(--gan-muted);margin:14px 0 24px}

/* ===== Responsive — sin frame móvil en Figma: adaptado siguiendo los
   mismos breakpoints (1080px / 860px / 560px) que ya usa el resto del sitio. ===== */
@media(max-width:1080px){
  .gan-benefits-grid{grid-template-columns:1fr 1fr}
  .gan-steps-grid{grid-template-columns:1fr 1fr}
  .gan-fit-in{flex-direction:column}
  .gan-fit-txt{width:100%}
}
@media(max-width:860px){
  .gan-hero-in,.gan-pain-in,.gan-about-in,.gan-distinguish-row,.gan-achieve-in,.gan-experience-in,.gan-cta-in{flex-direction:column;text-align:center}
  .gan-hero-txt p{margin-left:auto;margin-right:auto}
  .gan-hero-photo,.gan-pain-photo,.gan-about-photo,.gan-distinguish-photo,.gan-achieve-photo,.gan-experience-photo,.gan-cta-photo{width:100%;max-width:340px}
  .gan-pain-item,.gan-distinguish-item{text-align:left}
  .gan-benefits-grid{grid-template-columns:1fr 1fr}
  .gan-steps-grid{grid-template-columns:1fr}
  .gan-achieve-grid{grid-template-columns:1fr}
  .gan-fit-pill{flex-wrap:wrap}
  .gan-hero-txt h1{font-size:32px}
  .gan-h2{font-size:24px}
  .gan-banner-in{flex-direction:column;text-align:center}
  .gan-about-badge{display:none}
}
@media(max-width:560px){
  .gan-benefits-grid{grid-template-columns:1fr}
  .gan-sec{padding:44px 18px}
  .gan-hero{padding:48px 18px 0}
  .gan-hero-photo-bg img.gan-bg{height:260px}
}