/* RECURSOS 2025 - DISEÑO PROFESIONAL Y LLAMATIVO */

:root {
  --recursos-color: var(--service-recursos, #8a40ff);
  --recursos-color-sec: #b07bff;
  --recursos-brillo: rgba(138, 64, 255, 0.35);
}

/* Contenedor de la sección: ahora soporta dos tarjetas lado a lado */
.servicios-premium-grid {
  grid-template-columns: 1fr;
  gap: var(--s8);
  max-width: 960px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .servicios-premium-grid {
    grid-template-columns: 1fr;
  }
}

/* Tarjeta mejorada específica de recursos */
.tarjeta-recursos {
  position: relative;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 12px 40px rgba(0,0,0,0.35),
    0 0 0 1px rgba(138,64,255,0.10);
  transition: box-shadow .28s ease, border-color .28s ease, transform .28s ease;
  transform: translateY(0) translateZ(0);
  will-change: transform, box-shadow;
}

.tarjeta-recursos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--recursos-color), var(--recursos-color-sec));
  opacity: 0.9;
}

.encabezado-recursos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: var(--s4);
}

.icono-recursos {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(138,64,255,0.12);
  border: 1px solid rgba(138,64,255,0.25);
  color: var(--txt);
}

.emoji-recursos { font-size: 26px; }

.titulo-gradiente-recursos {
  background: linear-gradient(135deg, var(--recursos-color), var(--recursos-color-sec));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

/* Lista de etiquetas desplazable */
.etiquetas-recursos {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0.25rem 0.5rem;
  margin: 0.75rem auto 1.25rem auto;
  max-width: var(--max-text-width);
}

.etiqueta-chip {
  white-space: nowrap;
  font-size: 0.8rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: rgba(138,64,255,0.14);
  border: 1px solid rgba(138,64,255,0.28);
  color: var(--txt);
}

/* Beneficios alineados en columna con líneas guía */
/* Eliminado listado de beneficios con chulos */

/* CTA destacado */
.cta-recursos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s3) var(--s6);
  border-radius: var(--r3);
  font-family: var(--font, "Poppins", "Inter", system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(138,64,255,0.22) 0%, rgba(34,211,238,0.18) 100%);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 28px rgba(0,0,0,0.35);
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.cta-recursos:hover,
.cta-recursos:focus,
.cta-recursos:focus-visible {
  text-decoration: none;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(138,64,255,0.30) 0%, rgba(34,211,238,0.24) 100%);
  border-color: rgba(255,255,255,0.30);
}

/* Movimiento sutil para la tarjeta de recursos */
.tarjeta-recursos:hover { transform: translateY(-3px); }
.tarjeta-recursos:active { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .tarjeta-recursos { transition: box-shadow .28s ease, border-color .28s ease; }
  .tarjeta-recursos:hover,
  .tarjeta-recursos:active { transform: none; }
}

.cta-recursos:visited { color: #ffffff; }

/* Se elimina la decoración de orbes para un look más sobrio */


/* ---------------------------------------
   Enlaces de ejemplos de recursos
---------------------------------------- */
.lista-ejemplos-recursos{
  display:grid;
  grid-template-columns: repeat(3, minmax(180px,1fr));
  gap: var(--s4);
  margin: var(--s6) auto var(--s6);
  max-width: 980px;
}

.enlace-recurso{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding: .75rem 1rem;
  border-radius: var(--r3);
  text-decoration:none;
  color: var(--txt2);
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}

.enlace-recurso i{opacity:.9}
.enlace-recurso span{font-weight:600}

.enlace-recurso:hover,
.enlace-recurso:focus,
.enlace-recurso:focus-visible{
  color: var(--txt);
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-1px);
}

@media (max-width: 920px){
  .lista-ejemplos-recursos{grid-template-columns: repeat(2, minmax(160px,1fr)); max-width: 640px;}
}
@media (max-width: 520px){
  .lista-ejemplos-recursos{grid-template-columns: 1fr; max-width: 420px;}
}