/* ==========================================================================
   datosUruguay - Modern CSS Styles
   ========================================================================== */

/* Brand color */
:root {
  --brand: #0891b2;
  --brand-dark: #0e7490;
  --brand-light: #22d3ee;
  --duy-row-gap: 2rem;

  /* Alto del banner sticky que tape el borde inferior del viewport (el adhesion del
     tag de ads). Lo publica el controller `duy--bottom-obstruction` midiendo el banner
     real; sin banner vale 0px, que es el caso de dev, test y de toda pantalla donde el
     ad no rellena o el usuario lo cerró. */
  --duy-bottom-obstruction: 0px;
}

/* ==========================================================================
   Page Rows
   ========================================================================== */

/* Every top-level page section renders through the duy_row helper. This
   single rule owns the vertical separation between rows for the whole site:
   views must not add their own margin/padding utilities for that purpose.
   flow-root keeps inner margins from collapsing through the wrapper, so
   content inside a row cannot leak into the inter-row gap. */
.duy-row {
  display: flow-root;
  margin-bottom: var(--duy-row-gap);
}

/* ==========================================================================
   Botones flotantes (donar / compartir)
   ========================================================================== */

/* Los dos flotantes se apoyan sobre el banner de ads en vez de quedar debajo de él.
   No es cosmético: Mediavine pide explícitamente que los botones flotantes del sitio
   NO se superpongan al adhesion, porque un click accidental sobre el ad es una
   violación de política con los exchanges (y el click nuestro se pierde igual).
   El `bottom` sale de acá y no de un utility de Tailwind en la vista para que el
   offset viva en un solo lugar: los dos flotantes tienen que moverse juntos. */
.duy-float-bottom {
  bottom: calc(1.5rem + var(--duy-bottom-obstruction));
  transition: bottom 150ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .duy-float-bottom {
    transition: none;
  }
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(8, 145, 178, 0.15), transparent),
    radial-gradient(ellipse 60% 40% at 100% 50%, rgba(56, 189, 248, 0.1), transparent),
    radial-gradient(ellipse 60% 40% at 0% 80%, rgba(139, 92, 246, 0.08), transparent);
}

.hero-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.03) 1px, transparent 0);
  background-size: 40px 40px;
}

/* ==========================================================================
   Text Gradient
   ========================================================================== */

.text-gradient {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 50%, var(--brand-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==========================================================================
   Card Hover Effects
   ========================================================================== */

.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Focus States (Accessibility)
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ==========================================================================
   Smooth Scroll Behavior
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Custom Scrollbar
   ========================================================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ==========================================================================
   Selection Color
   ========================================================================== */

::selection {
  background-color: rgba(8, 145, 178, 0.2);
  color: inherit;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .no-print {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  a {
    text-decoration: underline;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}