/* ============================================================
   Publinovo — Página "Recursos" (recursos)
   Hub / biblioteca de contenidos orientada a aportar valor y
   captar leads. Hereda tokens y componentes de styles.css.
   Solo añade lo específico de esta página.
   ============================================================ */

/* ============================================================
   1 · HERO (Centro de Aprendizaje)
   ============================================================ */
.rec-hero{
  position:relative; overflow:hidden;
  padding-block:clamp(48px,6.5vw,82px) clamp(44px,5.5vw,68px);
  background:
    radial-gradient(110% 120% at 88% -10%, rgba(28,157,215,.12), transparent 55%),
    radial-gradient(95% 110% at -8% 115%, rgba(140,198,63,.20), transparent 55%),
    linear-gradient(135deg, #f4faee 0%, #eef7f4 50%, #ecf6fb 100%);
}
.rec-hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(43,45,58,.035) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(43,45,58,.035) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 35%, #000, transparent 88%);
  mask-image:radial-gradient(80% 70% at 50% 35%, #000, transparent 88%);
}
.rec-hero .wrap{ position:relative; z-index:2 }
.rec-hero__inner{ max-width:820px; margin-inline:auto; text-align:center }
.rec-hero__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:22px; text-align:left;
}
.rec-crumbs{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--ff-head);
  font-size:13px; font-weight:500; color:var(--ink-3);
}
.rec-crumbs a{ color:var(--ink-3); transition:color .2s }
.rec-crumbs a:hover{ color:var(--blue-d) }
.rec-crumbs span[aria-current]{ color:var(--green-d); font-weight:600 }
.rec-crumbs i{ font-style:normal; color:var(--line-2) }
.rec-hero h1{
  font-size:clamp(34px,5vw,56px); letter-spacing:-.03em; margin-top:4px;
  text-wrap:balance;
}
.rec-hero .lead{ margin:24px auto 0; max-width:680px }

/* ============================================================
   2 · CATEGORÍAS RÁPIDAS (filtros visuales)
   ============================================================ */
.rec-filters{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  margin-top:clamp(30px,3.6vw,44px);
}
.rec-filter{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-head); font-weight:600; font-size:14.5px; color:var(--ink-2);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:11px 20px 11px 16px; box-shadow:var(--shadow-sm);
  cursor:pointer; transition:transform .2s, box-shadow .25s, color .2s, border-color .2s, background .2s;
}
.rec-filter svg{ width:17px; height:17px; color:var(--green-d); transition:color .2s }
.rec-filter:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); color:var(--ink); border-color:var(--line-2) }
.rec-filter.is-active{
  background:var(--ink); color:#fff; border-color:transparent;
  box-shadow:var(--shadow-md);
}
.rec-filter.is-active svg{ color:#a6d957 }
.rec-filter__count{
  font-size:12px; font-weight:600; color:var(--muted);
  background:var(--bg-soft-2); border-radius:var(--r-pill); padding:1px 9px;
  transition:color .2s, background .2s;
}
.rec-filter.is-active .rec-filter__count{ background:rgba(255,255,255,.16); color:#fff }

/* ============================================================
   3 · GRID DE RECURSOS (tarjetas)
   ============================================================ */
.rec-grid-sec{ padding-block:clamp(48px,6vw,84px); background:var(--bg-soft) }
.rec-grid-sec .wrap{ max-width:1180px }
.rec-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(22px,2.4vw,30px);
}

/* tarjeta: columna flex para empujar el botón al fondo */
.rec-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; isolation:isolate;
  box-shadow:var(--shadow-sm);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.rec-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent }
.rec-card[hidden]{ display:none }

/* media + badge + zoom interior */
.rec-card__media{
  position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--grad-soft);
}
.rec-card__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.rec-card:hover .rec-card__media img{ transform:scale(1.08) }
.rec-badge{
  position:absolute; top:14px; left:14px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--ff-head); font-weight:600; font-size:12.5px; letter-spacing:.01em;
  color:var(--ink); background:rgba(255,255,255,.94); backdrop-filter:blur(4px);
  padding:7px 13px; border-radius:var(--r-pill); box-shadow:var(--shadow-sm);
}
.rec-badge .ico{ font-size:13px; line-height:1 }

/* cuerpo de la tarjeta */
.rec-card__body{
  display:flex; flex-direction:column; flex:1;
  padding:24px 26px 26px;
}
.rec-card__body h2{ font-size:20px; line-height:1.2; transition:color .2s }
.rec-card:hover .rec-card__body h2{ color:var(--blue-d) }
.rec-card__body p{
  margin-top:11px; font-size:14.5px; color:var(--ink-3); line-height:1.6;
}
/* el enlace queda siempre abajo gracias a margin-top:auto */
.rec-link{
  display:inline-flex; align-items:center; gap:9px; margin-top:auto; padding-top:22px;
  font-family:var(--ff-head); font-weight:600; font-size:14.5px; color:var(--blue-d);
  align-self:flex-start; transition:gap .2s, color .2s;
}
.rec-link svg{ width:16px; height:16px; transition:transform .25s }
.rec-card:hover .rec-link svg{ transform:translateX(4px) }
.rec-link:hover{ color:var(--green-d) }

/* variante: botón sólido destacado (lead magnet) */
.rec-link--solid{
  margin-top:auto; align-self:stretch; justify-content:center;
  padding:14px 22px; border-radius:var(--r-pill); color:#fff;
  background:var(--grad); box-shadow:var(--shadow-brand);
  transition:transform .2s, box-shadow .25s;
}
.rec-link--solid:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 22px 46px -14px rgba(28,157,215,.6) }
.rec-link--gap{ margin-top:22px }

/* mensaje cuando un filtro no tiene resultados (oculto por defecto) */
.rec-empty{
  display:none; text-align:center; color:var(--ink-3);
  font-size:15.5px; padding:40px 0;
}

/* ============================================================
   4 · NEWSLETTER (boletín)
   ============================================================ */
.rec-news{ padding-block:clamp(56px,7vw,96px) }
.rec-news .wrap{ max-width:1100px }
.rec-news__card{
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(30px,4vw,56px);
  align-items:center;
  border:1px solid rgba(140,198,63,.22); border-radius:var(--r-xl);
  padding:clamp(32px,4vw,56px);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(28,157,215,.08), transparent 60%),
    linear-gradient(135deg, #f1faea 0%, #ecf6ee 55%, #e8f5f1 100%);
}
.rec-news__deco{
  position:absolute; z-index:-1; width:240px; height:240px; border-radius:50%;
  top:-90px; left:-70px; background:rgba(140,198,63,.12);
}
.rec-news__copy .eyebrow{ margin-bottom:14px }
.rec-news__copy h2{ font-size:clamp(26px,3.2vw,38px); letter-spacing:-.02em; line-height:1.12 }
.rec-news__copy p{ margin-top:16px; font-size:clamp(15px,1.2vw,16.5px); color:var(--ink-2); line-height:1.65 }
.rec-news__copy p b{ color:var(--ink); font-weight:600 }

.rec-news__form{ display:flex; flex-direction:column; gap:12px }
.rec-news__row{ position:relative; display:flex; flex-direction:column }
.rec-news__form input{
  width:100%; height:58px; padding:0 20px;
  border:1.5px solid var(--line-2); border-radius:14px;
  background:#fff; color:var(--ink); font-family:var(--ff-body); font-size:15.5px;
  transition:border-color .2s, box-shadow .2s;
}
.rec-news__form input::placeholder{ color:var(--muted) }
.rec-news__form input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(28,157,215,.16) }
.rec-news__row.invalid input{ border-color:#e8554b; box-shadow:0 0 0 4px rgba(232,85,75,.14) }
.rec-news__err{ display:none; color:#cf4338; font-size:12.5px; font-weight:600; margin:7px 4px 0 }
.rec-news__row.invalid .rec-news__err{ display:block }
.rec-news__form .btn{ height:58px; margin-top:4px }

/* Boletín — campos ampliados */
.rec-news__grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.rec-news__form select{
  width:100%; height:58px; padding:0 44px 0 20px;
  border:1.5px solid var(--line-2); border-radius:14px;
  background:#fff; color:var(--ink); font-family:var(--ff-body); font-size:15.5px;
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b8a6b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
  transition:border-color .2s, box-shadow .2s;
}
.rec-news__form select:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(28,157,215,.16) }
.rec-news__row.invalid select{ border-color:#e8554b; box-shadow:0 0 0 4px rgba(232,85,75,.14) }
.rec-news__form select:required:invalid{ color:var(--muted) }
.rec-news__row--phone input{ padding-right:138px }

.rec-news__check{ flex-direction:row; align-items:flex-start; gap:10px; margin-top:6px;
  font-size:13.5px; line-height:1.5; color:var(--ink-2); cursor:pointer }
.rec-news__check input{ width:18px; height:18px; flex:none; margin-top:1px; accent-color:var(--green); cursor:pointer }
.rec-news__check a{ color:var(--green-d); font-weight:600; text-decoration:none }
.rec-news__check a:hover{ text-decoration:underline }
.rec-news__check.invalid{ color:#cf4338 }
.rec-news__check.invalid a{ color:#cf4338 }
.rec-news__note{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-3); margin-top:2px }
.rec-news__note svg{ width:15px; height:15px; color:var(--green-d); flex:none }
.rec-news__ok{ display:none; color:var(--green-d); font-family:var(--ff-head); font-weight:600; font-size:15px; margin-top:4px }
.rec-news__form.sent .rec-news__ok{ display:block }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .rec-grid{ grid-template-columns:repeat(2, 1fr) }
}
@media (max-width:860px){
  .rec-news__card{ grid-template-columns:1fr; gap:30px }
}
@media (max-width:600px){
  .rec-grid{ grid-template-columns:1fr; max-width:440px; margin-inline:auto }
  .rec-news__grid2{ grid-template-columns:1fr }
}