/* ===========================
   Variables y Reset base
   =========================== */
:root {
  /* Paleta */
  --color-fg: #fff;
  --color-bg-1: #050505;
  --color-bg-2: #46464a;
  --color-accent: #f19d00;

  /* Tipografías fluidas (clamp(min, vw, max)) */
  --fs-h1: clamp(2.4rem, 3.5vw, 4.2rem);
  --fs-h2: clamp(2.0rem, 3.2vw, 3.6rem);
  --fs-h3: clamp(1.8rem, 2.8vw, 3.2rem);
  --fs-h4: clamp(1.6rem, 2.2vw, 2.4rem);
  --fs-h5: clamp(1.4rem, 1.8vw, 1.8rem);
  --fs-p:  clamp(1.5rem, 1.6vw, 1.8rem);
  --fs-small: clamp(1.2rem, 1.4vw, 1.4rem);

  /* Ritmo vertical (espaciado base) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;

  /* Bordes / radios */
  --radius: 16px;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }

body {
  min-height: 100vh;
  margin: 0;
  width: 100%;
  font-size: 1.6rem; /* 1rem = 10px */
  color: var(--color-fg);
  background: radial-gradient(ellipse at center, var(--color-bg-2) 0%, var(--color-bg-1) 100%);
  font-family: AvenirNext, Arial, Helvetica, sans-serif;
  line-height: 1.6;
}

/* Tipos base */
h1,h2,h3,h4,h5,h6,p,a,label,legend { color: var(--color-fg); margin: 0; }
img { max-width: 100%; height: auto; display: block; }

/* ===========================
   Contenedores y Layout
   =========================== */
article, main, aside, .info-inscripcion {
  width: 100%;
  max-width: 1100px;          /* Limita el ancho para PC */
  margin: 0 auto;
  padding: 0 var(--space-3);  /* Respira en bordes en móvil */
}

main { display: flex; flex-direction: column; }

/* ===========================
   Titulares y texto
   =========================== */
h1 {
  font-family: "Teko", sans-serif;
  font-size: var(--fs-h1);
  letter-spacing: 0.06em;
  text-align: center;
  margin: var(--space-6) 0 var(--space-4);
}
h2 {
  font-family: "Teko", sans-serif;
  font-size: var(--fs-h2);
  letter-spacing: 0.06em;
  text-align: center;
  margin: var(--space-5) 0 var(--space-3);
  text-transform: capitalize;
}
h3 {
  font-family: "Teko", sans-serif;
  font-size: var(--fs-h3);
  letter-spacing: 0.05em;
  margin: var(--space-5) 0 var(--space-2);
  line-height: 1.2;
  text-transform: capitalize;
}
h4, h5 {
  font-family: "Roboto", sans-serif;
  text-transform: capitalize;
}
h4 {
  font-size: var(--fs-h4);
  display: block;
  margin: var(--space-2) auto;
}
h5 {
  font-size: var(--fs-h5);
  display: block;
  margin: var(--space-2) auto;
  text-align: center;
}
p, b {
  font-size: var(--fs-p);
  max-width: 100%;
}
a {
  cursor: pointer;
  text-decoration: none;
  font-size: var(--fs-p);
}

/* ===========================
   Listas
   =========================== */
ul, ol { padding-left: 2rem; margin: var(--space-2) 0 var(--space-3); }
li { font-size: var(--fs-p); margin-bottom: var(--space-1); }
.ul-a { font-size: var(--fs-small); }
.sub-ul li { list-style-type: none; }

/* ===========================
   Botones
   =========================== */
button, .btn {
  border: none;
  color: #fff;
  background-image: linear-gradient(30deg, #1e1e20, #697e81);
  border-radius: var(--radius);
  background-size: 100% auto;
  font-family: inherit;
  font-size: clamp(1.5rem, 1.8vw, 1.7rem);
  padding: 0.8em 1.6em;
  margin: var(--space-2) 0;
  border: 0.1rem solid #000;
  transition: background-size 300ms ease, transform 200ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
}
button:hover, .btn:hover {
  background-position: right center;
  background-size: 200% auto;
  animation: pulse512 1.5s infinite;
  border: none;
  transform: translateY(-1px);
}
button p { font-size: clamp(1.4rem, 1.6vw, 1.6rem); margin: 0; }

/* Accesibilidad: foco visible */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: calc(var(--radius) + 2px);
}

/* Animación existente (se respeta) */
@keyframes pulse512 {
  0%   { box-shadow: 0 0 0 0 #05bada66; }
  70%  { box-shadow: 0 0 0 10px rgb(218 103 68 / 0%); }
  100% { box-shadow: 0 0 0 0 rgb(218 103 68 / 0%); }
}

/* Respeta usuarios con reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ===========================
   Bloques específicos
   =========================== */
.info-inscripcion b { color: #fff; }

#inscripcion { margin-bottom: var(--space-3); }

.medios-de-pago a {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

/* Enlaces marcados dentro de #detalles */
#detalles a {
  text-decoration: underline;
  color: var(--color-accent);
}

/* Circuito / mapas */
.circuito {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-3);
}
.circuito img {
  max-height: clamp(20rem, 40vh, 36rem);
  width: auto;
}

/* Logos aliados/patrocinio */
.logos {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(90px, 1fr) );
  gap: var(--space-2);
  align-items: center;
  justify-items: center;
  margin: var(--space-3) 0;
}
.logos img { max-height: 2.4rem; width: auto; }

/* Botón de inscripción (imagen) */
.boton-inscripcion {
  max-height: clamp(7rem, 12vw, 14rem);
  width: auto;
  display: block;
  margin: var(--space-3) auto;
}

/* Slick dots (si usás slick) */
.slick-dots li button:before { font-size: 0; }

/* ===========================
   Breakpoint base (>=320px)
   =========================== */
@media (min-width: 320px) {
  /* Conservamos tus estilos esenciales ya adaptados arriba con clamp() */
}

/* ===========================
   >= 720px (tablet / desktop)
   =========================== */
@media (min-width: 720px) {
  .header-fondo { display: flex; justify-content: center; }
  header img { max-width: 90rem; }

  .slider { width: min(40%, 480px); }

  .container-button {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-top: var(--space-5);
    justify-content: center;
  }

  button, .btn { width: 33rem; }

  .medios-de-pago {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
  }

  .medios-de-pago p { font-size: clamp(1.4rem, 1.6vw, 1.6rem); }
}

/* ===========================
   >= 1024px (desktop)
   =========================== */
@media (min-width: 1024px) {
  article, main, aside, .info-inscripcion {
    padding: 0 var(--space-4);
  }
  .circuito img { max-height: clamp(26rem, 45vh, 42rem); }
  .logos img   { max-height: 3rem; }
}

/* ===========================
   >= 1440px (desktop grande)
   =========================== */
@media (min-width: 1440px) {
  article, main, aside, .info-inscripcion { max-width: 1200px; }
}