:root {
    --esm-blue: #0072CE;
    --esm-outline-blue: #cce2ff;
    --esm-text-gray: #333333;
    --bs-primary: #0072CE;
    --bs-secondary-color: #5C5C6F;
    /* --bs-primary-rgb: #0072CE; */
}

body {
    font-family: 'Inter', sans-serif;
}

/* Override Bootstrap */
.navbar .nav-link {
    color: var(--esm-text-gray);
    font-weight: 500;
    transition: color 0.3s;
}

.navbar .nav-link.active,
.navbar .nav-link:hover {
    color: var(--esm-blue);
}

.btn-outline-primary {
    border-color: var(--esm-blue);
    color: var(--esm-blue);
}

.btn-outline-primary:hover {
    background-color: var(--esm-outline-blue);
    color: var(--esm-blue);
}

.btn-primary {
    background-color: var(--esm-blue);
    border-color: var(--esm-blue);
}

.btn-primary:hover {
    background-color: var(--esm-blue);
    /* un poco más oscuro */
    border-color: var(--esm-blue);
}

.navbar-brand strong {
    font-size: 1.8rem;
    line-height: 1;
}

.navbar-brand small {
    margin-top: -4px;
}

.hero-section {
    /* height: 80vh; */
    overflow: hidden;
}

.hero-section img {
    object-fit: cover;
    object-position: center;
}

.rounded-4 {
    border-radius: 1rem !important;
}

.border-primary {
    border-color: var(--esm-blue) !important;
}

.text-primary {
    color: var(--esm-blue) !important;
}

.text-gray {
    color: #828294;
}

.my-6 {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important;
}

.my-7 {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important;
}

.nosotros-hero {
    height: 300px;
    overflow: hidden;
}

.nosotros-hero img {
    object-fit: cover;
    object-position: center;
}

/* Placeholder más claro */
::placeholder {
    color: #adb5bd !important; /* Gris claro */
    opacity: 1; /* Firefox */
}

/* Safari */
::-webkit-input-placeholder {
    color: #adb5bd !important;
}

/* Firefox 19+ */
::-moz-placeholder {
    color: #adb5bd !important;
}

/* IE 10-11 */
:-ms-input-placeholder {
    color: #adb5bd !important;
}

/* Edge */
::-ms-input-placeholder {
    color: #adb5bd !important;
}

.form-label {
    font-weight: bold;
}



/* ===== Perfil ===== */
.esm-tabs .nav-link {
  font-weight: 600;
  color: var(--esm-text-gray);
  border: none;
  border-bottom: 2px solid transparent;
  padding: .75rem 1rem;
}
.esm-tabs .nav-link:hover { color: var(--esm-blue); }
.esm-tabs .nav-link.active {
  color: var(--esm-blue);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--esm-blue);
}

.form-control[readonly] {
  color: #999a9b;
  border-color: #111;
}

.form-control {
  padding:  12px !important;
  border-radius: 8px;
  border-color: var(--color-black);
}

.form-check-input {
  transform: scale(1.3);   /* aumenta el tamaño */
  margin-right: .5rem;
}

.form-select {
  padding:  12px !important;
  border-radius: 8px;
  border-color: var(--color-black);
}

.btn {
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: 8px;
}

.btn-sm {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Mejora del avatar (por si usas imágenes no cuadradas) */
.rounded-circle.border {
  border-width: 2px !important;
  border-color: #E6E9EF !important;
}

/* ===== 404 ===== */
.error-404 .error-hero{
  /* Cambiá la imagen a la que uses en tu proyecto */
  background-image: url("/img/runner2.png");
  background-size: cover;
  /* background-position: center; */
  background-position: top center;
  min-height: 78vh;               /* Alto del bloque (ajustable) */
  position: relative;
}

.error-404 .error-hero::before{
  content:"";
  position: absolute;
  inset: 0;
  /* Overlay azul con leve transparencia */
  background: color-mix(in srgb,
              var(--esm-blue, #1061b0) 80%,
              transparent);
  opacity: .78;
}

.error-404 .error-hero > .container{
  position: relative; /* para estar encima del overlay */
  z-index: 1;
}

@media (max-width: 576px){
  .error-404 .error-hero{ min-height: 70vh; }
}


/* ===== Payment Success ===== */
.pay-success{
  min-height: 72vh; /* deja aire para el footer que ya tenés */
}

.success-icon{
  width: 110px;
  height: 110px;
  color: var(--esm-success, #2ecc71); /* borde y tilde */
  display: inline-block;
}

.pay-success .text-body-secondary{
  color: #5f6b7a !important; /* gris amable; podés quitar si ya lo definiste */
}

@media (max-width: 576px){
  .pay-success{ min-height: 66vh; }
  .success-icon{ width: 96px; height: 96px; }
}

/* ===== Payment Error ===== */
.pay-error {
  min-height: 72vh; /* espacio para el footer */
}

.error-icon {
  width: 110px;
  height: 110px;
  color: var(--esm-danger, #e74c3c); /* círculo y X en rojo */
  display: inline-block;
}

.pay-error .text-body-secondary {
  color: #5f6b7a !important;
}

@media (max-width: 576px) {
  .pay-error { min-height: 66vh; }
  .error-icon { width: 96px; height: 96px; }
}




/* ===== Datos de la carrera — Fine tuning ===== */

/* Contenedor general */
.race-info { border-radius: 20px; }
/* .race-info .race-info-img { min-height: 520px; } */
.race-info .race-info-img { min-height: 365px; }
@media (min-width: 768px){
  .race-info .race-info-img { min-height: 100%; border-left: 1px solid #DFE3EA; }
}
.race-info .race-info-overlay{
  position: absolute; inset: 0;
  background: rgba(0, 114, 206, 0.65);
  border-top-right-radius: 20px; border-bottom-right-radius: 20px;
}

/* Padding exacto del lado izquierdo (Figma-ish) */
.race-info-left{
  padding: 40px 44px 40px 44px;      /* md- */
}
@media (min-width: 992px){
  .race-info-left{ padding: 56px 56px 48px 56px; }  /* lg+ más aire */
}

/* Tipografías */
.race-date{
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.race-title{
  /* ~56px en desktop, fluido en pantallas menores */
  /* font-size: clamp(32px, 2.6vw + 18px, 56px); */
    font-size: 40px !important;
  line-height: 1.05;
  margin-bottom: 18px;
  color: #222631;
}

.race-lead{
  font-size: 16px;               /* texto de apoyo */
  line-height: 1.6;
  color: #828294;                /* gris suave */
  max-width: 560px;              /* mismo ancho visual que en el mock */
  margin-bottom: 26px;
}

/* Lista */
.race-list{
    margin: 25px 0;
}
.race-li{
  display: flex; align-items: flex-start;
  gap: 12px;
  font-size: 18px;               /* ítems del listado */
  line-height: 1.5;
  margin-bottom: 10px;
  color:#5C5C6F;
}
.race-li:last-child{ margin-bottom: 0; }

/* Badge de check */
.bullet-check{
  flex: 0 0 26px;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: #ECE8FF;
  color: #6F5BFF;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  margin-top: 2px;
}

/* Filas con precio a la derecha, ancho estable para alinear */
.race-li-price{
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.race-li-price .race-li-text{
  display: inline-flex; align-items: center; gap: 12px;
}
.race-price{
  font-size: 18px;
  min-width: 170px;          /* fija el ancho para alinear verticalmente */
  text-align: right;
  /* color: #111827; */
  font-weight: 600;
  color: #5C5C6F;
}

/* Bloque kits y texto gris */
.race-kits{ margin: 10px 0 12px 0; }
.race-muted{ color:#6b7280; font-size: 16.5px; line-height: 1.6; }

/* Mobile tweaks */
@media (max-width: 575.98px){
  .race-info-left{ padding: 28px 22px 30px 22px; }
  .race-lead{ font-size: 16.5px; }
  .race-li, .race-price{ font-size: 16.5px; }
  .race-price{ min-width: 140px; }
}


/* ===== Circuito ===== */

/* Mapa como imagen con proporción agradable y sombra suave */
.route-map{
  /* aspect-ratio: 16 / 9; */
  /* box-shadow: 0 6px 24px rgba(30, 41, 59, 0.12); */
  /* border: 1px solid #E6E9EF; */
}

/* Tarjeta de métricas */
.route-stats{
  border: 1px solid #E6E9EF;
  box-shadow: 0 4px 18px rgba(17, 24, 39, 0.06);
}

/* Fine-tune tipografías para que calce con el mock */
.route-stats .fs-1{
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
}