/* apps/myfuture/static/myfuture/scss/resources-themes.css (copia exacta de resources-themes.scss) */
/* ============================================================
   RECURSOS: identidad de color por recurso y botones del home.
   Se carga después de resources.css. Sin anidación a propósito:
   el .css es idéntico a este archivo (no hay compilador en el entorno).

   Cada recurso declara sus acentos en `.resource-page[data-resource="<slug>"]`;
   uno nuevo solo agrega su bloque. El magenta (--color-focus) queda para la acción.
   ============================================================ */

/* --- Acentos por recurso ---------------------------------------- */
.resource-page {
  --res-accent: var(--color-vivid-sky-blue);   /* información */
  --res-accent-2: var(--color-type);           /* lima en oscuro, azul en claro */
  --res-accent-3: var(--color-focus);          /* magenta */
  --res-grad: linear-gradient(135deg, #4cc9f0 0%, #c2ff05 100%);
  --res-on-grad: #03162b;
  --res-glow-1: rgba(76, 201, 240, 0.22);
  --res-glow-2: rgba(194, 255, 5, 0.1);
  --res-plan-bg: #0b2d52;
}

html[data-theme="light"] .resource-page {
  --res-grad: linear-gradient(135deg, #0050d6 0%, #3b2fd0 100%);
  --res-on-grad: #ffffff;
  --res-glow-1: rgba(0, 98, 255, 0.14);
  --res-glow-2: rgba(0, 194, 255, 0.1);
  --res-plan-bg: #ffffff;
}

/* Análisis de Competencia Digital: violeta y cian */
.resource-page[data-resource="analisis-de-competencia-digital"] {
  --res-accent: #a78bfa;
  --res-accent-2: var(--color-vivid-sky-blue);
  --res-grad: linear-gradient(135deg, #a78bfa 0%, #4cc9f0 100%);
  --res-glow-1: rgba(139, 92, 246, 0.3);
  --res-glow-2: rgba(76, 201, 240, 0.14);
}

html[data-theme="light"] .resource-page[data-resource="analisis-de-competencia-digital"] {
  --res-accent: #6d28d9;
  --res-accent-2: #0050d6;
  --res-grad: linear-gradient(135deg, #6d28d9 0%, #0050d6 100%);
  --res-glow-1: rgba(109, 40, 217, 0.16);
  --res-glow-2: rgba(0, 80, 214, 0.1);
}

/* --- Botones: los del home -------------------------------------- */
.resource-page .res-btn {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.resource-page .res-btn--primary {
  padding: 1.1rem 2.2rem;
  background: var(--color-focus);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(255, 0, 110, 0.3);
}

.resource-page .res-btn--primary:hover {
  background: #ff1a7a;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 32px rgba(255, 0, 110, 0.5);
}

.resource-page .res-btn--outline {
  padding: 1.1rem 2.2rem;
  border-width: 2px;
  border-color: var(--color-type);
}

.resource-page .res-btn--outline:hover {
  background: var(--color-type);
  color: var(--color-topic);
  transform: translateY(-3px);
}

html[data-theme="light"] .resource-page .res-btn--outline:hover {
  color: #ffffff;
}

/* --- Color en las superficies ----------------------------------- */
.resource-page .res-eyebrow {
  color: var(--res-accent);
}

/* Resplandor tras el hero (en claro, el campo de color del tema ya lo da) */
html:not([data-theme="light"]) .resource-page .res-hero {
  position: relative;
  isolation: isolate;
}

html:not([data-theme="light"]) .resource-page .res-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 80% at 88% 8%, var(--res-glow-1), transparent 70%),
    radial-gradient(50% 70% at 4% 92%, var(--res-glow-2), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  pointer-events: none;
}

.resource-page .res-section--alt {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--res-accent) 9%, transparent), color-mix(in srgb, var(--res-accent-2) 6%, transparent));
}

/* Tarjetas y áreas: un tinte de la esquina y un ícono que rota entre los tres acentos */
.resource-page .res-card,
.resource-page .res-tile {
  background:
    radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--res-accent) 13%, transparent), transparent 58%),
    var(--bg-card);
}

.resource-page .res-card__icon,
.resource-page .res-tile__icon {
  color: var(--res-accent);
}

.resource-page .res-tile__icon {
  background: color-mix(in srgb, var(--res-accent) 16%, transparent);
}

.resource-page .res-card:nth-child(3n + 2) .res-card__icon,
.resource-page .res-tile:nth-child(3n + 2) .res-tile__icon {
  color: var(--res-accent-2);
}

.resource-page .res-tile:nth-child(3n + 2) .res-tile__icon {
  background: color-mix(in srgb, var(--res-accent-2) 16%, transparent);
}

.resource-page .res-card:nth-child(3n) .res-card__icon,
.resource-page .res-tile:nth-child(3n) .res-tile__icon {
  color: var(--res-accent-3);
}

.resource-page .res-tile:nth-child(3n) .res-tile__icon {
  background: color-mix(in srgb, var(--res-accent-3) 14%, transparent);
}

.resource-page .res-card__more,
.resource-page .res-case__name {
  color: var(--res-accent);
}

.resource-page .res-step__num {
  background: var(--res-grad);
  color: var(--res-on-grad);
}

.resource-page .res-table .is-full {
  background: color-mix(in srgb, var(--res-accent) 10%, transparent);
}

.resource-page .res-table thead .is-full {
  color: var(--res-accent);
}

/* Precio: el plan destacado lleva el borde del degradado del recurso */
.resource-page .res-plan--featured {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--res-plan-bg), var(--res-plan-bg)) padding-box,
    var(--res-grad) border-box;
}

/* Cierre: un campo del color del recurso (en claro lo pinta _light-theme) */
html:not([data-theme="light"]) .resource-page .res-cta__box {
  border-color: transparent;
  background:
    radial-gradient(90% 120% at 100% 0%, var(--res-glow-1), transparent 65%),
    linear-gradient(135deg, #053c76 0%, #0a2a4d 100%);
}

/* --- FAQ dentro de un recurso: mismo ancho y acentos que el resto ---- */
.resource-page .faq-section {
  width: 100%;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}

.resource-page .faq-section > * {
  width: min(1120px, 88vw);
  margin-inline: auto;
}

.resource-page .faq-eyebrow {
  color: var(--res-accent);
}

.resource-page .faq-badge--q {
  background: var(--res-grad);
  color: var(--res-on-grad);
}

.resource-page .faq-item.open {
  border-color: var(--res-accent);
}

/* --- Ilustración del Análisis de Competencia: mapa y matriz ----- */
.res-hero__visual--map {
  min-height: 460px;
}

.res-map {
  position: absolute;
  top: 0;
  left: 2%;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: min(340px, 84%);
  aspect-ratio: 1;
  padding: 1.1rem;
  border: 1px solid rgba(167, 139, 250, 0.4);
  border-radius: 16px;
  background: linear-gradient(160deg, #08203f 0%, #1a2f6e 100%);
  color: #e9eefc;
  transform: rotate(-3deg);
  box-shadow: 0 34px 70px -22px rgba(3, 10, 40, 0.75);
}

.res-map__tag,
.res-matrix__tag {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.res-map__tag {
  color: #c9b8ff;
}

.res-map__plane {
  position: relative;
  flex: 1;
  border-radius: 10px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 25%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 25%);
}

.res-map__axis {
  position: absolute;
  background: rgba(233, 238, 252, 0.3);
}

.res-map__axis--x {
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
}

.res-map__axis--y {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}

/* El cuadrante que nadie ocupa */
.res-map__gap {
  position: absolute;
  top: 5%;
  right: 4%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 44%;
  height: 42%;
  padding-bottom: 0.4rem;
  border: 1.5px dashed #a78bfa;
  border-radius: 12px;
  background: rgba(167, 139, 250, 0.16);
}

.res-map__gap em {
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d9ccff;
}

.res-map__dot {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: rgba(233, 238, 252, 0.6);
}

.res-map__dot--you {
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid #ffffff;
  background: #ff006e;
  box-shadow: 0 8px 16px rgba(255, 0, 110, 0.45);
}

.res-map__dot b {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
}

.res-matrix {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: min(250px, 64%);
  padding: 1.1rem;
  border-radius: 14px;
  background: #ffffff;
  color: #16202e;
  transform: rotate(3deg);
  box-shadow: 0 34px 70px -22px rgba(3, 10, 40, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.res-matrix__tag {
  color: #6d28d9;
}

.res-matrix__grid {
  display: grid;
  gap: 0.6rem;
}

.res-matrix__row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.res-matrix__row i {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 2px solid #cfd6e4;
  border-radius: 50%;
}

.res-matrix__row .res-matrix__label {
  flex: 1;
  height: 7px;
  border: 0;
  border-radius: 4px;
  background: #dfe5ef;
}

.res-matrix__row .is-on {
  border-color: #6d28d9;
  background: #6d28d9;
}

.res-matrix__row .is-you {
  border-color: #ff006e;
  background: #ff006e;
}

@media (prefers-reduced-motion: no-preference) {
  .res-map__dot {
    animation: res-pop 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .res-map__dot:nth-of-type(4) { animation-delay: 0.1s; }
  .res-map__dot:nth-of-type(5) { animation-delay: 0.18s; }
  .res-map__dot:nth-of-type(6) { animation-delay: 0.26s; }
  .res-map__dot:nth-of-type(7) { animation-delay: 0.34s; }
  .res-map__dot:nth-of-type(8) { animation-delay: 0.42s; }
  .res-map__dot--you { animation-delay: 0.7s; }
}

@keyframes res-pop {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}