/* ═══════════════════════════════════════════════════════════
   CREA · HOME — TEASER DE RECURSOS (entre Servicios y Portfolio)
   Tema oscuro (neón glass), mismo lenguaje que el resto del home.
   Clash Display SIEMPRE en MAYÚSCULA.
═══════════════════════════════════════════════════════════ */
.rec-home { background: var(--mx-bg-2); position: relative; overflow: hidden; }
.rec-home::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(620px 420px at 84% -6%, rgba(139,92,246,0.16), transparent 62%),
    radial-gradient(560px 380px at 6% 108%, rgba(255,77,99,0.12), transparent 60%);
}
.rec-home .wrap { position: relative; z-index: 1; }

/* encabezado */
.rec-home__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: clamp(34px, 4vw, 56px); }
.rec-home__title { font-family: var(--f-display); text-transform: uppercase; font-weight: 600;
  font-size: clamp(32px, 5vw, 70px); line-height: 0.95; letter-spacing: -0.01em; color: var(--mx-text); margin-top: 18px; }
.rec-home__title .ac { background: var(--mx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rec-home__intro { max-width: 40ch; font-size: 16px; line-height: 1.6; color: #565664; text-wrap: pretty; }
.rec-home__cta {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mx-text); border: 1px solid rgba(13,20,48,0.18); border-radius: 100px; padding: 14px 22px;
  transition: border-color .3s, background .3s, transform .3s var(--spring);
}
.rec-home__cta:hover { border-color: #1B2F6E; background: rgba(27,47,110,0.06); transform: translateY(-2px); }
.rec-home__cta .arrow { transition: transform .3s var(--spring); }
.rec-home__cta:hover .arrow { transform: translateX(4px); }

/* grilla: 1 destacada + 3 */
.rec-home__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rcard {
  position: relative; display: flex; flex-direction: column; min-height: 230px;
  background: #fff; border: 1px solid rgba(13,20,48,0.10); border-radius: 18px;
  overflow: hidden; isolation: isolate; text-decoration: none;
  transition: transform .4s var(--spring), border-color .4s, background .4s, box-shadow .4s;
}
.rcard:hover { transform: translateY(-6px); border-color: rgba(27,47,110,0.4);
  background: #fff; box-shadow: 0 26px 54px -28px rgba(20,36,88,0.28); }
.rcard__media { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.rcard__media img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-io); }
.rcard:hover .rcard__media img { transform: scale(1.05); }
/* placeholder dark */
.rcard__ph { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(120% 120% at 78% 10%, rgba(139,92,246,0.34), transparent 58%),
    radial-gradient(90% 90% at 12% 100%, rgba(255,77,99,0.24), transparent 60%),
    linear-gradient(150deg, #15131f 0%, #0c0b12 75%); }
.rcard__ph::before { content: ""; position: absolute; inset: -20%;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 13px); }
.rcard__ph svg { width: 26px; height: 26px; color: rgba(255,255,255,0.4); position: relative; }
.rcard__tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: rgba(12,11,18,0.6); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.16); padding: 6px 11px; border-radius: 100px; }
.rcard__body { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 16px; }
.rcard__title { font-family: var(--f-display); text-transform: uppercase; font-weight: 600; letter-spacing: 0.008em;
  font-size: 16px; line-height: 1.14; color: var(--mx-text); }
.rcard:hover .rcard__title { color: #1B2F6E; }
.rcard__excerpt { font-size: 13.5px; line-height: 1.5; color: #565664; margin-top: 9px; flex: 1; text-wrap: pretty; }
.rcard__foot { margin-top: 14px; display: flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: #8A8A99; }
.rcard__foot .dot { opacity: 0.5; }
.rcard__foot .go { margin-left: auto; color: #1B2F6E; display: inline-flex; align-items: center; gap: 6px; transition: gap .3s var(--spring); }
.rcard:hover .rcard__foot .go { gap: 10px; }

/* destacada (primera): ocupa 2 col y 2 filas en desktop */
.rcard--feat { grid-column: span 2; grid-row: span 2; min-height: 0; }
.rcard--feat .rcard__media { aspect-ratio: auto; flex: 1; min-height: 220px; }
.rcard--feat .rcard__title { font-size: clamp(20px, 2.2vw, 30px); line-height: 1.04; }
.rcard--feat .rcard__excerpt { font-size: 15px; }
.rcard--feat .rcard__body { padding: 22px; }

/* franja de temas inferior */
.rec-home__topics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.rec-home__topic { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #565664; border: 1px solid rgba(13,20,48,0.12); border-radius: 100px; padding: 9px 15px;
  transition: color .25s, border-color .25s; }
.rec-home__topic:hover { color: #1B2F6E; border-color: #1B2F6E; }

@media (max-width: 900px) {
  .rec-home__grid { grid-template-columns: repeat(2, 1fr); }
  .rcard--feat { grid-column: span 2; grid-row: auto; }
  .rcard--feat .rcard__media { min-height: 200px; }
}
@media (max-width: 560px) {
  .rec-home__grid { grid-template-columns: 1fr; }
  .rcard--feat { grid-column: auto; }
}