/* gokiebox.com/pe/recursos-gratuitos — CSS propio de esta página. */
/* Vocabulario tomado de gk/pages/software.css (tarjeta .gks-dcard, tile .gks-ic,
   secciones blanco/mint) para que el hub no invente formas nuevas. */

.el-45210{font-family:"Poppins",sans-serif;color:#212121}
.gkr-wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}

/* ══ HERO (mint, sin píldoras ni degradados) ══ */
.gkr-hero{background:#EFFAF8;padding:76px 0 68px;text-align:center}
.gkr-hero h1{max-width:820px;margin:0 auto .9rem;font-size:clamp(32px,4.6vw,52px);font-weight:700;line-height:1.14;color:#212121;letter-spacing:-.5px;text-wrap:balance}
.gkr-hero h1 em{font-style:normal;color:#1ABC9C}
.gkr-lead{max-width:660px;margin:0 auto;font-size:1.06rem;line-height:1.65;color:#818181}

/* ══ SECCIONES ══ */
.gkr-sec{padding:64px 0}
.gkr-sec--white{background:#fff}
.gkr-sec--mint{background:#EFFAF8}
.gkr-head{text-align:center;max-width:680px;margin:0 auto 44px}
.gkr-head h2{font-size:clamp(26px,3.4vw,38px);font-weight:700;line-height:1.2;margin:0 0 .55rem;color:#212121}
.gkr-head p{margin:0;font-size:1rem;line-height:1.6;color:#818181}

/* ══ TARJETAS ══ */
.gkr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.gkr-card{position:relative;display:flex;flex-direction:column;min-height:214px;background:#fff;border:1px solid #e8edf0;border-radius:14px;padding:26px;transition:border-color .25s,box-shadow .25s,transform .25s}
.gkr-card:hover{border-color:#1ABC9C;box-shadow:0 20px 40px -24px rgba(26,188,156,.35);transform:translateY(-4px)}
.gkr-card__link{position:absolute;inset:0;z-index:5;text-indent:-9999px;overflow:hidden;border-radius:inherit}
.gkr-card__link:focus-visible{outline:2px solid #1ABC9C;outline-offset:3px}
.gkr-card__top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:34px}
.gkr-ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:#EFFAF8;color:#1ABC9C;transition:background .25s,color .25s}
.gkr-ic svg{width:24px;height:24px}
.gkr-card:hover .gkr-ic{background:#1ABC9C;color:#fff}
.gkr-arrow{color:#c4cdd2;transition:color .25s,transform .25s}
.gkr-arrow svg{width:20px;height:20px}
.gkr-card:hover .gkr-arrow{color:#1ABC9C;transform:translate(3px,-3px)}
.gkr-card h3{font-size:19px;font-weight:700;color:#212121;margin:auto 0 8px}
.gkr-card p{font-size:13.8px;line-height:1.6;color:#818181;margin:0}

/* Sobre fondo mint las tarjetas blancas ya contrastan: solo se aclara el tile. */
.gkr-sec--mint .gkr-ic{background:#F3FBF9}

@media(max-width:900px){.gkr-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  .gkr-hero{padding:52px 0 48px}
  .gkr-sec{padding:48px 0}
  .gkr-head{margin-bottom:32px}
  .gkr-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .gkr-card{min-height:0}
  .gkr-card__top{margin-bottom:20px}
}