/* Páginas secundarias (ia-*.html, que-hacemos-v2, software-v2) con la línea v3:
   hero claro con brillo lima en vez de azul/naranja/amarillo, tarjetas redondeadas y la
   mascota donde estaba la foto del auxiliar. */

/* hero */
body .hero.sub,body .hero.sub.c1,body .hero.sub.c2,body .hero.sub.c3{background:
  radial-gradient(620px 400px at 8% 0%,rgba(159,232,112,.30),transparent 70%),
  radial-gradient(700px 480px at 88% 40%,rgba(226,246,213,.95),transparent 72%),#fff}
.hero.sub:after{display:none}
.hero.sub h1{color:var(--forest)}
.hero.sub h1 em{font-style:normal;background:linear-gradient(transparent 58%,rgba(159,232,112,.85) 58%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero.sub .lead{color:var(--content-secondary)}
.hero.sub .hero-badge{background:#fff;border:1px solid var(--border)}
.hero.sub .btn{background:var(--forest);color:#fff}
.hero.sub .btn:hover{background:var(--forest-deep)}
.hero.sub .btn-out{background:transparent;color:var(--forest);border-color:rgba(22,51,0,.35)}
.hero.sub .btn-out:hover{background:var(--forest);color:#fff}
.hero.sub .volver{color:var(--content-tertiary);font-weight:700;text-decoration:none}
.hero.sub .volver:hover{color:var(--forest)}

/* «Lo que hizo … esta mañana» */
.dia{border-radius:30px;border:1px solid var(--border);box-shadow:0 30px 60px -30px rgba(22,51,0,.35)}
.dia .who{gap:8px}
.dia .who .dia-masc{width:76px;height:76px;flex:none;margin:-10px -4px -10px -10px;cursor:pointer}
.dia li em{color:var(--forest);background:var(--light-green);border-radius:8px;padding:2px 6px;text-align:center;align-self:start}
.dia .pie i{background:var(--forest);color:var(--bright-green)}

/* tarjetas */
.canales>div,.inc>div,.pasos li{border-radius:26px}
.canales i{background:var(--forest)!important;color:var(--bright-green)!important}
.inc>div{background:#F1F5EC;border-color:transparent;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.inc>div:hover{transform:translateY(-3px)}
.inc small{color:var(--forest)}
.pasos li:before{background:var(--forest);color:var(--bright-green)}
.franco{border-radius:28px}
.tabla{border-radius:24px;overflow:hidden}

/* cierre: el verde lima de la marca, con el botón oscuro */
.final .btn{background:var(--forest);color:#fff}
.final .btn-out{background:transparent;color:var(--forest);border-color:var(--forest)}

/* tarjetas de las tres áreas («Cómo trabajamos»): paleta Bolti y mascota en vez de foto */
body .area.a2{background:var(--light-green)}
body .area.a3{background:#fff;border:1px solid var(--border)}
body .area.a1{background:var(--forest)}
body .area h3{color:var(--forest)}
body .area.a1 h3,body .area.a1 p.q{color:#fff}
body .area.a1 .who em{color:rgba(255,255,255,.85)}
body .area.a1 .who em small{color:rgba(255,255,255,.6)}
body .area.a1 li{color:rgba(255,255,255,.82)}
body .area.a1 li:before{color:var(--bright-green)}
body .area.a1 .incl{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.15)}
body .area .who .cara-masc{width:64px;height:64px;flex:none;border-radius:20px;background:#fff;display:grid;place-items:center;
  box-shadow:0 0 0 2px rgba(22,51,0,.08),0 10px 20px -12px rgba(22,51,0,.4)}
body .area .who .cara-masc canvas{width:60px;height:60px;cursor:pointer}

/* «Cómo trabajamos»: las tres tarjetas de detalle (.det .card) y los tres canales (.area) */
body .det .card.d1{background:var(--forest)}
body .det .card.d2{background:var(--light-green)}
body .det .card.d3{background:#fff;border:1px solid var(--border)}
body .det .card h3{color:var(--forest)}
body .det .card.d1 h3,body .det .card.d1 p{color:#fff}
body .det .card.d1 .who em{color:rgba(255,255,255,.85)}
body .det .card.d1 .who em small{color:rgba(255,255,255,.6)}
body .det .card.d1 li{color:rgba(255,255,255,.82)}
body .det .card.d1 li:before{color:var(--bright-green)}
body .det .card.d1 .repl{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.15)}
body .det .who .cara-masc{width:64px;height:64px;flex:none;border-radius:20px;background:#fff;display:grid;place-items:center;
  box-shadow:0 0 0 2px rgba(22,51,0,.08),0 10px 20px -12px rgba(22,51,0,.4)}
body .det .who .cara-masc canvas{width:60px;height:60px;cursor:pointer}
body .area.a1 p.q{color:rgba(255,255,255,.85)}
body .det .card.d1 .q{color:#fff!important}