@import url("fontawesome/css/all.min.css");
/*
  Custom styles for the Puro Gamer static site.

  This stylesheet reimagines the original Puro Gamer design using CSS variables,
  subtle gradients and responsive grids. It aims to approximate the look and
  feel of the original React/Vite site from Lovable while being fully static
  and portable. Colours are defined via HSL variables so they can be reused
  throughout the design. The layout scales elegantly across mobile and desktop
  devices.
*/

/* Colour palette defined using HSL values. When referencing these variables
   you can use the slash notation `/` followed by an alpha value to adjust
   opacity. For example: `hsl(var(--primary) / 0.3)` produces a 30% opaque
   version of the primary colour. */
:root {
  --background: 0 0% 100%;
  --foreground: 220 20% 15%;
  --primary: 220 90% 55%;
  --primary-hover: 220 90% 45%;
  --secondary: 210 30% 90%;
  --muted: 210 30% 96%;
  --muted-foreground: 220 15% 40%;
  --card-border: 220 20% 85%;

  /* Additional accent colours used to differentiate sections on the detail pages. */
  --accent-blue: 220 90% 55%;
  --accent-red: 0 84% 60%;
  --accent-green: 120 70% 40%;
}

/* Global reset and typographic defaults */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * Override any page-level rules that prevent scrolling while the page is
 * loading. Several documents include a `body.loading` rule in an inline
 * `<style>` block which sets `overflow: hidden`. This global rule uses
 * `!important` to ensure that scroll bars remain enabled on all pages
 * regardless of inline styles.
 */
body.loading {
  overflow: auto !important;
}

a {
  color: hsl(var(--primary));
  text-decoration: none;
  transition: color 0.3s ease;
}

a:not(.btn):not(.card):not(.back):hover {
  color: hsl(var(--primary-hover));
  text-decoration: underline;
}

/* Site header with hero content and decorative shapes */
.site-header {
  position: relative;
  overflow: hidden;
  padding: 3rem 1rem 4rem;
  text-align: center;
  background: linear-gradient(180deg, hsl(var(--primary) / 0.08) 0%, hsl(var(--background)) 100%);
}

/* Top navigation bar */
.site-nav {
  position: absolute;
  top: 1rem;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  z-index: 2;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.site-nav a {
  color: hsl(var(--foreground));
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.site-nav a:hover {
  color: hsl(var(--primary));
  background-color: hsl(var(--primary) / 0.1);
}

/* Hero content within header */
.hero {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  padding-top: 1rem;
}

.hero .logo {
  width: 100px;
  height: auto;
  display: block;
  margin: 0 auto 1rem;
}

.hero h1 {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: hsl(var(--foreground));
}

.hero .tagline {
  margin-top: 0.5rem;
  font-size: 1.125rem;
  color: hsl(var(--foreground) / 0.7);
}

/* Decorative blurred shapes layered behind the hero */
.shapes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  transform: translate(-50%, -50%);
}

/* Position and colour each shape individually */
.shape1 {
  top: -10%;
  left: -10%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle at center, hsl(var(--primary) / 0.35), transparent 70%);
}

.shape2 {
  bottom: -20%;
  right: -20%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle at center, hsl(var(--primary) / 0.25), transparent 70%);
}

.shape3 {
  top: 20%;
  right: -15%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle at center, hsl(var(--primary) / 0.2), transparent 70%);
}

/* Main content area */
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0rem 1rem 3rem;
}

section {
  margin-bottom: 3rem;
}

section h2 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}

/* Responsive grid for channel cards */
/* Channel grid: ensure three cards per row on very small screens. On medium screens
   increase to four columns, and on large screens six columns. This matches the
   responsive behaviour of the original site. */
.grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 640px) {
  .grid {
    gap: 1rem;
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid {
    gap: 1.25rem;
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Channel card styles */
.card {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid hsl(var(--card-border) / 0.6);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.03);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(4px);
  text-decoration: none !important;
}

.card:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.07);
  border-color: hsl(var(--primary) / 0.3);
  text-decoration: none !important;
}

.card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 0.2rem;
  border-radius: 16px 16px 8px 8px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.card:hover img {
  transform: scale(1.05);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

.card span {
  display: block;
  padding: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  border-top: 1px solid hsl(var(--card-border) / 0.5);
  background: linear-gradient(to right, rgba(249, 250, 251, 0.8), rgba(243, 244, 246, 0.8));
  backdrop-filter: blur(5px);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.card:hover span {
  border-color: hsl(var(--primary) / 0.2);
  background: linear-gradient(to right, hsl(var(--primary) / 0.1), hsl(var(--primary) / 0.05));
  color: hsl(var(--primary));
}

/* Shared content styling for details and static pages */
.content, .detail-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

.content h1, .detail-content h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}

.content img, .detail-content img {
  max-width: 200px;
  height: auto;
  margin: 0 auto 1.5rem;
  display: block;
}

.content p, .detail-content p {
  margin-bottom: 1rem;
  color: hsl(var(--foreground));
  font-size: 1rem;
  line-height: 1.6;
}

.content h2, .detail-content h2 {
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  font-weight: 600;
  border-bottom: 1px solid hsl(var(--card-border) / 0.5);
  padding-bottom: 0.25rem;
  color: hsl(var(--foreground));
}

.content ul, .detail-content ul, .content ol, .detail-content ol {
  margin-left: 1.25rem;
  margin-bottom: 1rem;
}

.content li, .detail-content li {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.content a, .detail-content a {
  /* Use the primary colour for links inside content areas but avoid underlining by default. */
  color: hsl(var(--primary));
  text-decoration: none;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

/* Provide an underline on hover for better visual affordance and change colour on hover */
.content a:not(.btn):hover, .detail-content a:not(.btn):not(.card):not(.back):hover {
  color: hsl(var(--primary-hover));
  text-decoration: underline;
}

/* Footer styling */
footer {
  text-align: center;
  padding: 2rem 1rem;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  border-top: 1px solid hsl(var(--card-border) / 0.3);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.footer-nav a {
  color: hsl(var(--primary));
  text-decoration: none;
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.footer-nav a:hover {
  background-color: hsl(var(--primary) / 0.1);
  text-decoration: underline;
}

footer p {
  margin: 0;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

/* Top bar used on every page (index, detail and static pages). It contains an optional back arrow,
   the site name and optional breadcrumb. This mirrors the minimalist header
   from the original site. */
.topbar {
  display: flex;
  align-items: center;
  /* Align all children to the start so the logo sits to the left of
     the back arrow. The breadcrumb will push itself to the right via
     margin-left: auto defined on that element. */
  justify-content: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0rem 0rem;
  border-bottom: 1px solid hsl(var(--card-border) / 0.5);
  background: hsl(var(--background));
  /* The top bar should scroll with the page rather than being fixed. */
  position: relative;
  top: auto;
  z-index: auto;

  /* Maintain a minimum height even when only the logo is present so the header
     remains visible on pages without a site-name text. */
  min-height: 30px;
}

/* Back button styling
   --------------------
   The back button appears at the far left of the top bar on internal pages. It
   consists of a left‐pointing chevron contained within a subtle circle. To
   more closely match the Lovable design the circle uses a very light grey
   background and an even lighter border. The icon inherits the current
   foreground colour so that it remains visible against the pale circle. */
.topbar .back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* A faint border and background produce the barely visible circle seen on the
     reference site. Reduce opacity on both so they do not distract from the
     surrounding content. */
  border: 1px solid hsl(var(--card-border) / 0.5);
  background: hsl(var(--muted) / 0.6);
  color: hsl(var(--foreground));
  font-size: 1rem;
  text-decoration: none !important;
  margin-right: 0.75rem;
}

.topbar .back:hover {
  text-decoration: none !important;
}

/* Explicitly set the colour and size of the icon inside the back button.
   Without this, the arrow may not be visible when using FontAwesome. */
/* Explicitly size and colour the icon within the back button. Without this
   override the FontAwesome arrow may inherit unexpected styles. The icon size
   is slightly smaller than the circle to centre visually. */
.topbar .back i {
  color: hsl(var(--foreground));
  font-size: 0.875rem;
}

.topbar .site-name {
  /* Display the textual site name in the top bar. Use margin-right auto to
     separate it from the breadcrumb on the right. */
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin-left: 0.5rem;
  margin-right: auto;
}

/* Logo displayed in the top bar. Kept intentionally small to mirror the
   original site's branding. */
.topbar .logo {
  height: 15px;
  max-width: 148px;
  width: auto;
  object-fit: contain;
  margin-right: 0.5rem;
}

/* Arrow character that precedes the logo on the home page. It uses
   the same colour as the primary text and is spaced slightly from
   the logo. */
.site-arrow {
  font-size: 1.5rem;
  color: hsl(var(--foreground));
  margin-right: 0.25rem;
}

.topbar .breadcrumb {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));

  /* Push the breadcrumb to the far right when the top bar uses flex-start.
     Without this the logo could drift toward the centre on larger screens. */
  margin-left: auto;
}

.topbar .breadcrumb a {
  color: hsl(var(--primary));
  text-decoration: none;
}

/* Hide the breadcrumb on small screens to avoid cluttering the mobile header */
@media (max-width: 639px) {
  .topbar .breadcrumb {
    display: none;
  }
}

/* When the top bar has only the site name (e.g., on the home page) we center
   the content by overriding the default space-between justification. */
.topbar.center {
  justify-content: center;
}

/* When centering the top bar (e.g. on the home page), ensure the site name
   occupies the full width so that the text is truly centered. */
.topbar.center .site-name {
  flex-grow: 1;
  text-align: center;
}

/* Warning box used above the footer to display important notes */
.warning-box {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--card-border) / 0.5);
  padding: 1rem;
  border-radius: 8px;
  max-width: 700px;
  margin: 0 auto 1.5rem;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
}

.warning-box .icon {
  font-size: 1.25rem;
  color: hsl(40 80% 50%);
  margin-right: 0.5rem;
  flex-shrink: 0;
}

.warning-box p {
  margin: 0;
  line-height: 1.4;
}

/* Button group and buttons for detail pages */
.button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Slightly reduce the gap between buttons to mirror the original site */
  gap: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  /* Increase padding and adjust font size to more closely match the
     proportions of the original site. The buttons should be
     comfortable to tap on mobile and still look refined on desktop. */
  /* Increase the overall padding and corner radius so the buttons
     better resemble those on the original site. A taller button
     improves touch targets on mobile while still looking refined on desktop. */
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  text-decoration: none;
  font-size: 1rem;
}

/* Increase the size of FontAwesome icons inside buttons so they
   visually align with the label text. */
.btn i {
  font-size: 0.8rem;
  color: inherit;
}

/* Buttons reflect the styling from the original site: the primary button
   is filled with colour, while the danger and success variants are
   outlined. */
.btn.primary {
  color: #ffffff;
  background: hsl(var(--accent-blue));
  border-color: hsl(var(--accent-blue));
}

.btn.primary:hover {
  /* On hover, slightly adjust the blue background to provide a subtle
     feedback without changing the text colour. */
  background: hsl(var(--accent-blue) / 0.92);
  border-color: hsl(var(--accent-blue) / 0.92);
}

.btn.danger {
  color: hsl(var(--accent-red));
  background: transparent;
  border-color: hsl(var(--accent-red));
}

.btn.danger:hover {
  /* Fill the button with the accent red on hover and invert the
     text colour to white for better contrast. */
  color: #ffffff;
  background: hsl(var(--accent-red));
  border-color: hsl(var(--accent-red));
}

.btn.success {
  color: hsl(var(--accent-green));
  background: transparent;
  border-color: hsl(var(--accent-green));
}

.btn.success:hover {
  /* Fill the button with the accent green on hover and invert the
     text colour to white. */
  color: #ffffff;
  background: hsl(var(--accent-green));
  border-color: hsl(var(--accent-green));
}

/* Responsive behaviour for the button group on detail pages. On small
   screens the buttons should stack vertically and fill the available
   width, emulating the layout of the original site. On larger screens
   they sit side by side with equal spacing. */
@media (max-width: 767px) {
  .button-group {
    flex-direction: column;
    align-items: stretch;
  }
  .button-group .btn {
    width: 100%;
    justify-content: center;
  }
}

/* On larger screens the channel buttons should expand to share the full width of
   their container. This mirrors the layout on the reference site where the
   browser, Android and iOS buttons each occupy an equal portion of the
   available space. */
@media (min-width: 768px) {
  .button-group {
    width: 100%;
  }
  .button-group .btn {
    /* Allow buttons to grow equally to fill the container */
    flex: 1 1 0;
    justify-content: center;
  }
}

/* Round the channel logo images on the detail pages and limit their
   size. This more closely matches the original site's design where
   logos are slightly smaller with rounded corners. */
.channel-header img {
  border-radius: 16px;
  /* Increase the size of the channel logos slightly to better match the
     scale seen on the reference site. */
  /* Reduce the channel logo further to 80px wide as per the reference design. */
  width: 80px;
  height: auto;
  margin: 0 auto 1rem;
  display: block;
}

/* Detail sections */
.detail-section {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid hsl(var(--card-border) / 0.5);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.detail-section h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1rem;
  color: hsl(var(--foreground));
}

.detail-section h2::before {
  content: '';
  width: 4px;
  height: 1.5rem;
  background: hsl(var(--primary));
  border-radius: 2px;
}

.number-list {
  counter-reset: step;
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

.number-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.number-list li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: hsl(var(--primary));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Two column layout for program and features on medium and larger screens */
.program-features {
  display: grid;
  gap: 2rem;
}

.program-features .program ul,
.program-features .features ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.program-features .program li,
.program-features .features li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.program-features .program li::before,
.program-features .features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  /* Colour of bullets will be overridden on specific sections below. */
  background: hsl(var(--accent-blue));
}

@media (min-width: 768px) {
  .program-features {
    grid-template-columns: 1fr 1fr;
  }
}

/* Variant colouring for different sections on detail pages. These selectors
   override the default accent colour defined in .detail-section h2::before
   and the bullet colours in program-features. */
.detail-section.como h2::before {
  background: hsl(var(--accent-blue));
}

/* History sections use the same blue accent as the "Como Assistir" section. */
.detail-section.history h2::before {
  background: hsl(var(--accent-blue));
}

/* Apply different accent colours to headings within the program and
   features columns of the detail page. We target the h2 inside
   the .program and .features containers rather than the parent
   .detail-section because the lists are nested inside a single
   detail-section. */
.program-features .program h2::before {
  background: hsl(var(--accent-red));
}

.program-features .features h2::before {
  background: hsl(var(--accent-green));
}

/* Channel header styling: the header containing the logo, name, tagline
   and button group on detail pages. Ensure the tagline is muted and spaced
   appropriately. */
.channel-header .tagline {
  margin: 0.5rem auto 1rem;
  /* Use a slightly smaller font and a muted colour for the tagline to
     separate it from the channel name. */
  font-size: 0.9rem;
  color: hsl(var(--foreground) / 0.65);
  max-width: 700px;
}

/* Override bullet colours for program and features lists */
.program-features .program li::before {
  background: hsl(var(--accent-blue));
}

.program-features .features li::before {
  background: hsl(var(--accent-red));
}

/* Gradient heading text used on static pages like About and Policy */
.gradient-text {
  display: inline-block;
  background: linear-gradient(90deg, hsl(var(--accent-blue)), hsl(var(--accent-red)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Subtitle styling for static pages */
.subtitle {
  color: hsl(var(--muted-foreground));
  font-size: 1rem;
  line-height: 1.4;
}

/* Footer navigation: remove explicit separators and space links evenly */
.footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.footer-nav a {
  color: hsl(var(--primary));
  font-size: 0.875rem;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
}

.footer-nav a:hover {
  text-decoration: underline;
}

footer p {
  margin: 0.5rem 0;
  font-size: 0.875rem;
}

footer a {
  color: hsl(var(--primary));
  margin: 0 0.25rem;
}

footer a:hover {
  text-decoration: underline;
}

footer .warning {
  color: hsl(0 70% 45%);
  font-weight: 600;
}

/* Disclaimer text below button group */
p.disclaimerad {
    color: #989797;
    font-size: 12px;
    margin-top: -25px;
}