/* Landing bespoke — Colsis | Cursos Auditor (Colsis LATAM, ISO Lead Auditor).
   Paleta y tipografía propias de la marca Colsis (verde/menta), distintas al
   sistema visual de Círculo Alianza y al de otras landings del lote.
   Century Gothic (fuente comercial, sin licencia libre) se sustituye por
   Poppins, su equivalente geométrico más cercano en Google Fonts — misma
   convención ya usada en la landing piloto de eFile. Red Hat Display y Lato
   se usan tal como las trae el diseño original de Figma. */

:root{
  --cca-dark:#0A493D;--cca-mint:#66D3AB;--cca-green2:#2F974E;--cca-teal:#1D7968;
  --cca-sky:#51ADCC;--cca-ink:#1D1D1D;--cca-gray:#B0B0B0;--cca-gray2:#B3B3B3;
  --cca-offwhite:#F5F5F5;--cca-line:#E2E2E2;--cca-radius:16px;
}
.cca{font-family:'Red Hat Display',sans-serif;color:var(--cca-ink);line-height:1.55;overflow-x:hidden}
.cca h1,.cca h2,.cca h3{font-family:'Red Hat Display',sans-serif;font-weight:700}
.cca-poppins{font-family:'Poppins',sans-serif}
.cca-h2{font-size:36px;font-weight:700;line-height:1.25;color:var(--cca-dark)}
.cca-h2-light{color:#fff}
.cca-h2-mint{color:var(--cca-green2);font-family:'Poppins',sans-serif}
.cca-center{text-align:center}
.cca-sec{padding:70px 24px}
.cca-white{background:#fff}
.cca img{display:block;max-width:100%;height:auto}
.cca .cca-in{max-width:1180px;margin:0 auto}

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

/* Barra de marca */
.cca-brandbar{background:#0B0B0B;padding:16px;text-align:center}
.cca-brand-pill{display:inline-flex;align-items:center;background:#fff;border-radius:10px;padding:6px 14px}
.cca-brandbar-foot{margin-top:0}

/* HERO */
.cca-hero{background-size:cover;background-position:center;padding:88px 24px;position:relative}
.cca-hero-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:48px}
.cca-hero-txt{flex:1;min-width:280px;color:#fff}
.cca-hero-txt h1{font-size:40px;line-height:1.2;margin-bottom:18px}
.cca-hero-txt p{font-size:18px;color:rgba(255,255,255,.92);max-width:520px;margin-bottom:28px}
.cca-hero-visual{flex:none;width:420px;position:relative;display:flex;justify-content:center;align-items:center}
.cca-hero-ring{position:absolute;inset:0;border:2px solid rgba(255,255,255,.35);border-radius:999px;margin:20px}
.cca-hero-photo{position:relative;z-index:1;width:340px;border-radius:999px 999px 40px 40px}
.cca-hero-badge{position:absolute;z-index:2;width:64px;height:64px;border-radius:999px;background:var(--cca-teal);display:grid;place-items:center;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.cca-hero-badge svg{width:30px;height:30px}
.cca-hero-badge-1{top:8%;left:2%}
.cca-hero-badge-2{top:42%;left:-6%;width:52px;height:52px}
.cca-hero-badge-3{bottom:10%;left:18%;width:22px;height:22px;background:var(--cca-mint)}

/* Intro (dos hombres + texto) */
.cca-intro{background:#fff}
.cca-intro-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:56px}
.cca-intro-photo-wrap{flex:none;width:400px;position:relative}
.cca-intro-photo{width:100%;border-radius:12px}
.cca-pill{position:absolute;display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:10px 18px 10px 10px;box-shadow:0 10px 26px rgba(10,73,61,.18);font-size:16px;color:var(--cca-dark);font-weight:600;white-space:nowrap}
.cca-pill-ic{width:30px;height:30px;border-radius:999px;background:var(--cca-mint);display:grid;place-items:center;color:#fff;flex:none}
.cca-pill-ic svg{width:16px;height:16px}
.cca-pill-1{top:2%;right:-6%}
.cca-pill-2{top:34%;right:-14%}
.cca-pill-3{bottom:4%;right:2%}
.cca-intro-text{flex:1;min-width:280px}
.cca-intro-text p{font-size:18px;color:var(--cca-ink);margin-bottom:16px}

/* Explicación de la oferta */
.cca-offer{background:linear-gradient(120deg,var(--cca-dark),var(--cca-teal));padding:64px 24px}
.cca-offer-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:56px}
.cca-offer-txt{flex:1;min-width:280px;color:#fff}
.cca-offer-txt h2{font-size:28px;margin-bottom:14px}
.cca-offer-txt p{font-size:16px;color:rgba(255,255,255,.92)}
.cca-offer-photo{flex:none;width:400px;border-radius:12px}

/* Principales beneficios */
.cca-benefits-grid{max-width:1180px;margin:40px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cca-benefit-card{border:1.5px solid var(--cca-line);border-radius:var(--cca-radius);padding:30px 26px;text-align:center}
.cca-benefit-card-dark{background:var(--cca-dark);border-color:var(--cca-dark);color:#fff}
.cca-benefit-ic{width:60px;height:60px;margin:0 auto 18px;display:grid;place-items:center;border-radius:999px;background:rgba(10,73,61,.08);color:var(--cca-dark)}
.cca-benefit-card-dark .cca-benefit-ic{background:rgba(255,255,255,.14);color:#fff}
.cca-benefit-ic svg{width:28px;height:28px}
.cca-benefit-card h3{font-family:'Poppins',sans-serif;font-size:20px;margin-bottom:10px;color:var(--cca-dark)}
.cca-benefit-card-dark h3{color:#fff}
.cca-benefit-card p{font-family:'Poppins',sans-serif;font-size:16px;color:var(--cca-dark);opacity:.85}
.cca-benefit-card-dark p{color:#fff;opacity:.92}

/* Cómo funciona */
.cca-how{background:linear-gradient(120deg,var(--cca-dark),var(--cca-teal))}
.cca-how h2{color:#fff;font-family:'Poppins',sans-serif;font-size:36px}
.cca-how-steps{max-width:1100px;margin:44px auto 0;display:flex;align-items:flex-start;gap:6px}
.cca-how-step{flex:1;min-width:0;text-align:center}
.cca-how-step-ic{width:76px;height:76px;margin:0 auto 14px;border-radius:999px;background:rgba(255,255,255,.14);color:var(--cca-mint);display:grid;place-items:center}
.cca-how-step-ic svg{width:34px;height:34px}
.cca-how-step b{display:block;font-family:'Poppins',sans-serif;font-weight:700;color:var(--cca-mint);font-size:22px}
.cca-how-step-arrow{flex:none;color:var(--cca-mint);font-size:22px;padding-top:30px}
.cca-how-desc-grid{max-width:1180px;margin:40px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid rgba(255,255,255,.18);padding-top:34px}
.cca-how-desc b{display:block;font-family:'Poppins',sans-serif;font-size:16px;color:#fff;margin-bottom:8px}
.cca-how-desc p{font-size:14.5px;color:rgba(255,255,255,.85)}

/* Diferenciadores — bloque blanco */
.cca-diff-top{background:#fff}
.cca-diff-grid-top{max-width:1180px;margin:40px auto 0;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.cca-diff-card{border-radius:var(--cca-radius);padding:34px 30px;border:1.5px solid var(--cca-mint)}
.cca-diff-card-dark{background:var(--cca-dark);border-color:var(--cca-dark);color:#fff}
.cca-diff-ic{display:block;width:52px;height:52px;margin-bottom:18px;color:var(--cca-mint)}
.cca-diff-card-dark .cca-diff-ic{color:var(--cca-mint)}
.cca-diff-card:not(.cca-diff-card-dark) .cca-diff-ic{color:var(--cca-dark)}
.cca-diff-ic svg{width:100%;height:100%}
.cca-diff-card h3{font-family:'Poppins',sans-serif;font-size:19px;margin-bottom:10px;color:var(--cca-dark)}
.cca-diff-card-dark h3{color:#fff}
.cca-diff-card p{font-size:15px;color:var(--cca-ink)}
.cca-diff-card-dark p{color:rgba(255,255,255,.88)}
.cca-diff-underline{width:44px;height:4px;border-radius:99px;background:var(--cca-mint);margin-top:16px}

/* Diferenciadores — banda verde */
.cca-diff-band{background:linear-gradient(120deg,var(--cca-dark),var(--cca-teal));padding:70px 24px}
.cca-diff-band-in{max-width:1180px;margin:0 auto;display:flex;align-items:flex-start;gap:56px}
.cca-diff-photo-wrap{flex:none;width:340px;position:relative}
.cca-diff-photo{width:100%;border-radius:0 999px 999px 999px;border:3px solid rgba(255,255,255,.4)}
.cca-diff-target{position:absolute;top:-6%;left:-10%;width:64px;height:64px;border-radius:999px;background:var(--cca-teal);border:4px solid #fff;display:grid;place-items:center;color:#fff}
.cca-diff-target svg{width:28px;height:28px}
.cca-diff-list{flex:1;min-width:280px;color:#fff}
.cca-diff-list h2{font-size:32px;color:#fff;margin-bottom:24px}
.cca-diff-item{display:flex;gap:14px;align-items:flex-start;background:#fff;border-radius:12px;padding:16px 18px;margin-bottom:14px}
.cca-diff-item-ic{display:block;flex:none;width:36px;height:36px;color:var(--cca-dark)}
.cca-diff-item-ic svg{width:100%;height:100%}
.cca-diff-item b{display:block;font-size:15.5px;color:var(--cca-dark);margin-bottom:3px}
.cca-diff-item p{font-size:14px;color:var(--cca-ink)}

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

/* CTA final + formulario */
.cca-cta{background:linear-gradient(160deg,var(--cca-dark),var(--cca-teal));padding:70px 24px 0;position:relative;overflow:hidden}
.cca-cta-swirl{position:absolute;inset:0;opacity:.25;pointer-events:none}
.cca-cta-top{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:40px;position:relative;z-index:1}
.cca-cta-txt{flex:1;min-width:280px;color:#fff}
.cca-cta-txt h2{color:#fff;font-size:40px}
.cca-cta-txt p{font-size:20px;color:rgba(255,255,255,.92);margin-top:14px}
.cca-cta-photo{flex:none;width:300px;position:relative;z-index:1}
.cca-cta-photo img{border-radius:12px}
.cca-form-wrap{background:var(--cca-dark);margin-top:44px;padding:44px 24px;position:relative;z-index:1}
.cca-alert{max-width:620px;margin:0 auto 18px;padding:12px 16px;border-radius:10px;font-size:14px;font-weight:600;font-family:'Lato',sans-serif}
.cca-alert-success{background:#E7F7EC;color:#1E7A3C}
.cca-alert-error{background:#FBEAE5;color:#973423}
.cca-form{max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.cca-form input,.cca-form select{width:100%;padding:14px 18px;border:none;border-radius:10px;font-family:'Lato',sans-serif;font-size:15px;color:var(--cca-ink);background:#fff}
.cca-form input::placeholder{color:var(--cca-gray)}
.cca-form-row{display:flex;gap:12px;flex-wrap:wrap}
.cca-form-row input{flex:1;min-width:200px}
.cca-phone{flex:1;min-width:200px;display:flex;gap:6px}
.cca-phone select{flex:none;width:104px;font-size:12.5px}
.cca-phone input{flex:1;min-width:0}
.cca-check{display:flex;align-items:flex-start;gap:8px;color:#fff;font-size:14px;margin-top:4px}
.cca-check input{width:auto;margin-top:3px}
.cca-check a{color:#fff;text-decoration:underline}
.cca-form-actions{display:flex;justify-content:flex-end;margin-top:6px}
.cca-form-actions .cca-btn-submit{background:#fff;color:var(--cca-dark)}

/* ===== Responsive — sin frame móvil en Figma: adaptado con los mismos
   breakpoints (1080/860/560) que usa el resto del sitio. ===== */
@media(max-width:1080px){
  .cca-benefits-grid{grid-template-columns:1fr}
  .cca-diff-grid-top{grid-template-columns:1fr}
  .cca-how-steps{flex-wrap:wrap;justify-content:center;gap:24px}
  .cca-how-step{flex:1 1 200px}
  .cca-how-step-arrow{display:none}
  .cca-how-desc-grid{grid-template-columns:1fr 1fr}
  .cca-hero-visual{width:320px}
}
@media(max-width:860px){
  .cca-hero-in,.cca-intro-in,.cca-offer-in,.cca-diff-band-in,.cca-cta-top{flex-direction:column;text-align:center}
  .cca-hero-txt p{margin-left:auto;margin-right:auto}
  .cca-intro-photo-wrap{width:300px;margin-bottom:60px}
  .cca-pill{position:static;margin:10px auto 0;display:inline-flex}
  .cca-offer-photo,.cca-diff-photo-wrap,.cca-cta-photo{width:260px}
  .cca-diff-target{display:none}
  .cca-diff-list h2{text-align:center}
  .cca-how-desc-grid{grid-template-columns:1fr}
  .cca-hero-txt h1{font-size:30px}
  .cca-h2{font-size:26px}
  .cca-how h2,.cca-faq h2,.cca-cta-txt h2{font-size:28px}
}
@media(max-width:560px){
  .cca-sec{padding:46px 18px}
  .cca-hero{padding:56px 18px}
  .cca-form-row{flex-direction:column}
  .cca-phone{flex-direction:row}
  .cca-hero-visual{width:260px}
  .cca-hero-photo{width:220px}
}