/*
  ============================================================
  relaciones.css — El Mundo de Manu / Relaciones
  ============================================================
  Estilos específicos para mi sección de Relaciones.
  Esta es la sección más cálida y emotiva del sitio.

  Estética: romántica y elegante sobre fondo oscuro.
  Rosa intenso + dorado suave como colores dominantes.
  Tipografía serif (Playfair Display) para evocar la
  sensación de una carta escrita a mano.

  Prefijo: rl- (relaciones)

  Estructura:
  01. Variables locales de la sección
  02. Breadcrumb
  03. Hero Relaciones (canvas de corazones)
  04. Pilares
  05. Ideas de detalles (flip cards)
  06. Pack de Cartas (showcase del producto)
  07. CTA final
  08. Botones propios de Relaciones
  09. Responsive

  Autor: Carlos Manuel Turizo Hernández
  Versión: 1.0.0
  ============================================================
*/

/*
  Defino mis variables locales dentro de .page-relaciones para
  no afectar el resto del sitio. También ajusto los textos
  secundarios para garantizar contraste WCAG AA sobre el
  fondo oscuro, igual que hice en gaming.
*/
.page-relaciones {
  --rl-rose:        #FF6B8A;
  --rl-rose-dim:    rgba(255, 107, 138, 0.10);
  --rl-rose-glow:   rgba(255, 107, 138, 0.30);
  --rl-gold:        #F0C987;
  --rl-gold-dim:    rgba(240, 201, 135, 0.10);
  --rl-surface:     #15101A;
  --rl-paper:       #FBF6EE;
  --rl-ink:         #3A2E2A;
  --font-romance:   'Playfair Display', 'Syne', serif;

  --color-text-primary:   #F5F0F2;
  --color-text-secondary: #d9d2d6;
  --color-text-muted:     #b9b0b6;
}


/* ============================================================
  02. BREADCRUMB
  ============================================================ */
.breadcrumb {
  padding: calc(var(--space-4) + 70px) 0 var(--space-4);
  border-bottom: 1px solid rgba(255, 107, 138, 0.1);
  background: var(--color-bg);
}
.breadcrumb__nav { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb__link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}
.breadcrumb__link:hover  { color: var(--rl-rose); }
.breadcrumb__sep         { font-size: var(--text-sm); color: var(--color-text-muted); opacity: 0.4; }
.breadcrumb__current     { font-size: var(--text-sm); color: var(--rl-rose); font-weight: 600; }

/* Tag propio de la sección — reutilizo .section-tag global */
.rl-tag {
  background: var(--rl-rose-dim);
  color: var(--rl-rose);
  border: 1px solid rgba(255, 107, 138, 0.25);
}


/* ============================================================
  03. HERO RELACIONES
  Canvas con corazones flotando + destellos de color cálido.
  ============================================================ */
.rl-hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 70% 20%, rgba(255, 107, 138, 0.06), transparent 50%),
    var(--color-bg);
}

.rl-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.rl-hero__canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Destellos suaves de color en las esquinas */
.rl-hero__glow {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.rl-hero__glow--rose { background: var(--rl-rose);  top: -160px; right: -120px; }
.rl-hero__glow--gold { background: var(--rl-gold);  bottom: -200px; left: -160px; opacity: 0.18; }

.rl-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding: var(--space-16) 0 var(--space-12);
}

/* Título principal con serif romántica */
.rl-hero__title { margin: var(--space-4) 0 var(--space-5); }
.rl-hero__title-line {
  display: block;
  font-family: var(--font-romance);
  font-weight: 700;
  font-size: clamp(2.8rem, 8vw, 5rem);
  line-height: 1.05;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}
.rl-hero__title-sub {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-romance);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  color: var(--color-text-secondary);
}
.rl-hero__title-sub em {
  font-style: italic;
  color: var(--rl-rose);
}

.rl-hero__desc {
  font-size: var(--text-lg, 1.125rem);
  line-height: 1.75;
  color: var(--color-text-secondary);
  max-width: 60ch;
  margin-bottom: var(--space-6);
}

.rl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Corazón que late como indicador de scroll */
.rl-hero__scroll {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.rl-hero__scroll-heart {
  display: inline-block;
  font-size: 1.4rem;
  color: var(--rl-rose);
  animation: rl-heartbeat 1.6s ease-in-out infinite;
}
@keyframes rl-heartbeat {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  15%       { transform: scale(1.25); opacity: 1; }
  30%       { transform: scale(1); }
  45%       { transform: scale(1.18); }
}


/* ============================================================
  04. PILARES
  ============================================================ */
.rl-pilares {
  padding: var(--space-20, 6rem) 0;
  background: var(--rl-surface);
}

.rl-pilares__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.rl-pilar-card {
  padding: var(--space-7) var(--space-5);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 107, 138, 0.12);
  border-radius: var(--radius-lg, 16px);
  transition: transform var(--transition-base, 0.3s),
              border-color var(--transition-base, 0.3s),
              box-shadow var(--transition-base, 0.3s);
}
.rl-pilar-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 107, 138, 0.4);
  box-shadow: 0 12px 40px rgba(255, 107, 138, 0.12);
}

.rl-pilar-card__icon {
  font-size: 2rem;
  margin-bottom: var(--space-4);
}
.rl-pilar-card__title {
  font-family: var(--font-romance);
  font-size: var(--text-xl, 1.25rem);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}
.rl-pilar-card__desc {
  font-size: var(--text-base, 1rem);
  line-height: 1.7;
  color: var(--color-text-secondary);
}


/* ============================================================
  05. IDEAS DE DETALLES — FLIP CARDS
  Cada tarjeta se voltea en 3D para revelar la idea.
  La clase .is-flipped la controla relaciones.js.
  ============================================================ */
.rl-ideas { padding: var(--space-20, 6rem) 0; }

.rl-ideas__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.rl-idea-card {
  perspective: 1000px;   /* Da profundidad al volteo 3D */
  min-height: 240px;
  cursor: pointer;
  outline-offset: 4px;
}

.rl-idea-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.rl-idea-card.is-flipped .rl-idea-card__inner {
  transform: rotateY(180deg);
}

/* Caras de la tarjeta — frente y reverso comparten base */
.rl-idea-card__front,
.rl-idea-card__back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg, 16px);
  backface-visibility: hidden;        /* Oculta la cara trasera al girar */
  -webkit-backface-visibility: hidden;
}

.rl-idea-card__front {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 107, 138, 0.15);
}
.rl-idea-card:hover .rl-idea-card__front {
  border-color: rgba(255, 107, 138, 0.4);
}

/* El reverso simula papel de carta — fondo claro + tinta oscura */
.rl-idea-card__back {
  transform: rotateY(180deg);
  background: var(--rl-paper);
  border: 1px solid var(--rl-gold);
}
.rl-idea-card__back p {
  font-family: var(--font-romance);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--rl-ink);
}

.rl-idea-card__num {
  font-family: var(--font-romance);
  font-size: var(--text-sm, 0.875rem);
  color: var(--rl-gold);
  letter-spacing: 0.2em;
}
.rl-idea-card__title {
  font-family: var(--font-romance);
  font-size: var(--text-xl, 1.25rem);
  color: var(--color-text-primary);
  line-height: 1.3;
}
.rl-idea-card__hint {
  font-size: var(--text-sm, 0.875rem);
  color: var(--rl-rose);
  opacity: 0.8;
}


/* ============================================================
  06. PACK DE CARTAS — SHOWCASE DEL PRODUCTO
  ============================================================ */
.rl-pack {
  padding: var(--space-20, 6rem) 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255, 107, 138, 0.05), transparent 60%),
    var(--rl-surface);
}

.rl-pack__showcase {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-10);
  align-items: center;
  margin-top: var(--space-8);
}

/* — Lado visual: mockup de carta hecho 100% en CSS — */
.rl-pack__visual {
  position: relative;
  display: flex;
  justify-content: center;
}

.rl-pack__card-mock {
  width: min(320px, 90%);
  padding: var(--space-8) var(--space-6);
  background: var(--rl-paper);
  border-radius: 10px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 80px rgba(255, 107, 138, 0.15);
  transform: rotate(-3deg);
  transition: transform var(--transition-base, 0.3s);
}
.rl-pack__visual:hover .rl-pack__card-mock {
  transform: rotate(0deg) scale(1.02);
}

.rl-pack__card-seal {
  font-size: 2rem;
  text-align: center;
  margin-bottom: var(--space-4);
}
.rl-pack__card-text {
  font-family: var(--font-romance);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--rl-ink);
  text-align: center;
  margin-bottom: var(--space-5);
}

/* Líneas que simulan texto manuscrito */
.rl-pack__card-line {
  height: 8px;
  border-radius: 4px;
  background: rgba(58, 46, 42, 0.15);
  margin-bottom: var(--space-3);
}
.rl-pack__card-line--long  { width: 100%; }
.rl-pack__card-line--mid   { width: 75%; }
.rl-pack__card-line--short { width: 50%; }

.rl-pack__card-sign {
  font-family: var(--font-romance);
  font-style: italic;
  text-align: right;
  color: var(--rl-rose);
  margin-top: var(--space-4);
}

/* Corazones flotando alrededor del mockup */
.rl-pack__float {
  position: absolute;
  color: var(--rl-rose);
  opacity: 0.7;
  animation: rl-float 4s ease-in-out infinite;
}
.rl-pack__float--1 { top: 5%;   left: 8%;  font-size: 1.4rem; animation-delay: 0s; }
.rl-pack__float--2 { bottom: 12%; right: 5%; font-size: 1rem;   animation-delay: 1.3s; }
.rl-pack__float--3 { top: 20%;  right: 12%; font-size: 1.2rem; animation-delay: 2.4s; }

@keyframes rl-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* — Lado informativo — */
.rl-pack__subtitle {
  font-family: var(--font-romance);
  font-size: var(--text-xl, 1.25rem);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.rl-pack__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.rl-pack__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base, 1rem);
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.rl-pack__feature-icon { flex-shrink: 0; }

.rl-pack__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--rl-rose-dim);
  border: 1px solid rgba(255, 107, 138, 0.25);
  border-radius: var(--radius-lg, 16px);
}
.rl-pack__price {
  font-family: var(--font-romance);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  color: var(--rl-rose);
}
.rl-pack__price small {
  font-size: 0.5em;
  color: var(--color-text-muted);
}
.rl-pack__price-note {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-secondary);
}

.rl-pack__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.rl-pack__trust {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-muted);
  line-height: 1.6;
}


/* ============================================================
  07. CTA FINAL
  ============================================================ */
.rl-cta { padding: var(--space-20, 6rem) 0; }

.rl-cta__inner {
  position: relative;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 107, 138, 0.18);
  border-radius: var(--radius-xl, 24px);
  overflow: hidden;
}

.rl-cta__glow {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 240px;
  background: var(--rl-rose);
  filter: blur(120px);
  opacity: 0.18;
  pointer-events: none;
}

.rl-cta__icon {
  font-size: 2.4rem;
  margin-bottom: var(--space-4);
  animation: rl-float 4s ease-in-out infinite;
}

.rl-cta__title {
  font-family: var(--font-romance);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}
.rl-cta__title em { color: var(--rl-rose); }

.rl-cta__desc {
  max-width: 55ch;
  margin: 0 auto var(--space-7);
  font-size: var(--text-lg, 1.125rem);
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.rl-cta__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}


/* ============================================================
  08. BOTONES PROPIOS DE RELACIONES
  ============================================================ */
.rl-btn--primary {
  background: linear-gradient(135deg, var(--rl-rose), #E84A6F);
  color: #FFFFFF;
  box-shadow: 0 4px 24px var(--rl-rose-glow);
}
.rl-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--rl-rose-glow);
}

.rl-btn--ghost:hover {
  border-color: var(--rl-rose);
  color: var(--rl-rose);
  background: var(--rl-rose-dim);
}


/* ============================================================
  09. RESPONSIVE
  Adapto la sección a tablets y móviles, manteniendo
  la legibilidad y el orden visual.
  ============================================================ */
@media (max-width: 968px) {
  .rl-pilares__grid,
  .rl-ideas__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rl-pack__showcase {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  /* En tablet/móvil la carta visual va arriba, centrada */
  .rl-pack__visual { order: -1; }
}

@media (max-width: 640px) {
  .rl-hero { min-height: 78vh; }

  .rl-pilares__grid,
  .rl-ideas__grid {
    grid-template-columns: 1fr;
  }

  .rl-hero__actions,
  .rl-pack__actions,
  .rl-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .rl-hero__actions .btn,
  .rl-pack__actions .btn,
  .rl-cta__actions .btn {
    width: 100%;
    text-align: center;
  }

  .rl-pack__price-row {
    flex-direction: column;
    gap: var(--space-1);
  }

  .rl-games__grid {
    grid-template-columns: 1fr;
  }

  .rl-game-card__cta {
    width: 100%;
    text-align: center;
  }
}


/* ============================================================
  10. JUEGOS DE RELACIONES — PLAY STORE STYLE
  Cada juego tiene su ficha con ícono, meta info, descripción
  y CTA. Las tarjetas "coming soon" tienen un estilo opacado
  para indicar que están en desarrollo.
  ============================================================ */
.rl-games {
  padding: var(--space-20, 6rem) 0;
  background: var(--rl-surface);
}

.rl-games__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-8);
}

/* ── Tarjeta base ── */
.rl-game-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 107, 138, 0.15);
  border-radius: var(--radius-lg, 16px);
  transition: transform var(--transition-base, 0.3s),
              border-color var(--transition-base, 0.3s),
              box-shadow var(--transition-base, 0.3s);
}
.rl-game-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 107, 138, 0.4);
  box-shadow: 0 16px 48px rgba(255, 107, 138, 0.12);
}

/* Tarjeta "próximamente" — más sutil */
.rl-game-card--coming {
  opacity: 0.65;
  border-style: dashed;
  border-color: rgba(255, 107, 138, 0.12);
}
.rl-game-card--coming:hover {
  opacity: 0.85;
  transform: translateY(-3px);
  box-shadow: none;
}

/* ── Header: ícono + meta ── */
.rl-game-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.rl-game-card__icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: var(--rl-rose-dim);
  border: 1px solid rgba(255, 107, 138, 0.2);
  border-radius: 16px;
}

.rl-game-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-1);
}

.rl-game-card__category {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.rl-game-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* Badges tipo Play Store */
.rl-game-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rl-game-badge--free {
  background: rgba(80, 200, 120, 0.12);
  color: #5CC880;
  border: 1px solid rgba(80, 200, 120, 0.25);
}
.rl-game-badge--new {
  background: var(--rl-rose-dim);
  color: var(--rl-rose);
  border: 1px solid rgba(255, 107, 138, 0.25);
}
.rl-game-badge--soon {
  background: var(--rl-gold-dim);
  color: var(--rl-gold);
  border: 1px solid rgba(240, 201, 135, 0.25);
}

/* ── Título ── */
.rl-game-card__title {
  font-family: var(--font-romance);
  font-size: var(--text-xl, 1.25rem);
  color: var(--color-text-primary);
  line-height: 1.2;
  margin: 0;
}

/* ── Descripción ── */
.rl-game-card__desc {
  font-size: var(--text-base, 1rem);
  line-height: 1.7;
  color: var(--color-text-secondary);
  flex: 1;  /* empuja el footer hacia abajo */
}

/* ── Info chips ── */
.rl-game-card__info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.rl-game-card__detail {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-muted);
}

/* ── Footer: CTA + nota ── */
.rl-game-card__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.rl-game-card__cta {
  align-self: flex-start;
}
.rl-game-card__update {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted);
  font-style: italic;
}