/*lenguage*/
    @font-face {
      font-family: 'fuente1';
      src: url('../fonts/built_titling_bd.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: 'fuente2';
      src: url('../fonts/built_titling_bd_it.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: 'fuente3';
      src: url('../fonts/built_titling_el.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
      font-family: 'fuente4';
      src: url('../fonts/built_titling_el_it.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: 'fuente5';
      src: url('../fonts/built_titling_lt.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: 'fuente6';
      src: url('../fonts/built_titling_lt_it.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: 'fuente7';
      src: url('../fonts/built_titling_rg.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: 'fuente8';
      src: url('../fonts/built_titling_rg_it.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: 'fuente9';
      src: url('../fonts/built_titling_sb.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: 'fuente10';
      src: url('../fonts/built_titling_sb_it.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
    }


    .league-spartan-<uniquifier> {
      font-family: "League Spartan", sans-serif;
      font-optical-sizing: auto;
      font-weight: <weight>;
      font-style: normal;
    }

    .roboto-<uniquifier> {
      font-family: "Roboto", sans-serif;
      font-optical-sizing: auto;
      font-weight: <weight>;
      font-style: normal;
      font-variation-settings:
        "wdth" 100;
    }
    @font-face {
        font-family: 'Diciplina';
        src: url('../fonts/DISCIPLINA_PERSONAL_USE.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

html, body {
  background-color: #000;
  margin: 0;
  padding: 0;
}

body *{
  font-family: "League Spartan", sans-serif;
  font-size: 1.29rem !important;
}

button{
  font-size: 0.88rem !important;
}

a,div, h5,li{
        font-size: 1.4rem !important;
        line-height: normal;
 }


 p{
        line-height: normal;
 }

 h4{
        font-size: 2rem !important;
 }

 h1,h2,h3{
    font-family: 'Diciplina';
    font-size: 4rem !important;
 }

.card {
    height: 100%; /* Todas las tarjetas ocupan la misma altura */
    display: flex;
    flex-direction: column;
}



.card-body {
    flex-grow: 1; /* Expande el contenido para mantener el tamaño uniforme */
    display: flex;
    flex-direction: column;
}

.card-body .btn {
    margin-top: auto; /* Mantiene el botón en la parte inferior */
}


.card-evento {
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.card-evento:hover {
    transform: scale(1.02);
}

.img-container {
    height: 336px;
    overflow: hidden;
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logo-evento {
    width: 80px;
    height: 80px;
    object-fit: contain;
}


/* Fondo con degradado */
.footer-animado {
    background: linear-gradient(135deg, #141e30, #243b55);
    animation: fadeInUp 1.5s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.footer-title {
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255,255,255,0.1);
    transition: all 0.4s ease;
}

.footer-title:hover {
    color: #00d4ff;
    text-shadow: 0 0 20px rgba(0,212,255,0.4);
}

/* Botones tipo link */
.btn-link-footer {
    background: none;
    border: none;
    color: #fff;
    font-weight: 500;
    padding: 5px 0;
    text-align: left;
    transition: color 0.3s ease;
}

.btn-link-footer:hover {
    color: #00d4ff;
    text-decoration: none;
}

/* Íconos sociales con hover animado */
.social-icon {
    font-size: 20px;
    margin-right: 15px;
    color: #fff;
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.2);
    color: #00d4ff;
}

/* Animación suave al hacer hover en tarjeta */
.evento-card {
    transition: all 0.5s ease;
    /*opacity: 0;*/
}

.tarjeta-evento {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
}

.tarjeta-evento:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

.img-evento {
    height: 336px;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
/* Estilos para la notificación */
.notificacion {
    position: fixed;
    top: 20px;
    right: -300px;
    background: #4CAF50; /* Verde */
    color: white;
    padding: 15px 20px;
    border-radius: 5px;
    font-size: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: right 0.5s ease-in-out;
    z-index: 2000;
}

/* Notificación de error */
.notificacion.error {
    background: #FF5733; /* Rojo */
}



/**/

.bounce-contador {
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
}

/* Animación del ícono del carrito */
@keyframes shake {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(-5deg); }
    75% { transform: rotate(4deg); }
    100% { transform: rotate(0deg); }
}

.shake-icon {
    animation: shake 0.4s;
}

/* Estilo para la cabecera con degradado */
.bg-gradient {
  background: linear-gradient(to right, #0056ff, #00d4ff);
}

/* Estilo del botón de continuar compra (verde degradado) */
.btn-gradient-success {
  background: linear-gradient(to right, #28a745, #218838);
  color: white;
  border: none;
  border-radius: 30px;
  transition: background 0.3s ease;
}

.btn-gradient-success:hover {
  background: linear-gradient(to right, #218838, #1e7e34);
}

/* Suavizar bordes */
.rounded-4 {
  border-radius: 5px !important;
}


.btn-success {
  background: linear-gradient(to right, #28a745, #20c997);
  border: none;
}

.btn-success:hover {
  background: linear-gradient(to right, #218838, #17a2b8);
}

/* Opcional para suavizar íconos o layout */
.modal-title i {
  font-size: 1.4rem;
}

#totalCarrito {
    font-weight: bold;
    color: #28a745;
}

#modalCarrito .modal-footer .btn {
    transition: all 0.3s ease-in-out;
}


.step-tab {
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  padding: 5px 10px;
  color: #999;
}
.step-tab.active {
  color: #007bff;
  border-bottom: 3px solid #007bff;
}
.step-tab .icon {
  font-size: 24px;
  display: block;
}

@keyframes bounceCart {
  0% { transform: scale(1); }
  25% { transform: scale(1.3); }
  50% { transform: scale(0.95); }
  75% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.bounce {
  animation: bounceCart 0.4s ease;
}





/* 🖼️ Para imágenes de la galería */
  .card-img-top {
    object-fit: contain;
    height: 250px;
    width: 100%;
  }

  /* 🔍 Para imagen ampliada en el modal */
  #imagenAmpliada {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }


.bg-dark {
    --bs-bg-opacity: 1;
    background-color: rgb(33 37 41 / 90%) !important;
}

.card-img-top {
  cursor: zoom-in;
}

.card-img-top2 {
    cursor: auto;
}

.footer-title:hover {
    color: #000000 !important;
    text-shadow: 0 0 20px rgb(255 255 255) !important;
}
/*------------------------------ESTILO FOOTER -----------------------------*/

    .footer-vitrina {
        background-color: #000;
        font-family: 'Poppins', sans-serif;
    }

    .footer-accent {
        width: 60px;
        height: 4px;
        background-color: #FF2C2C;
        margin: 0 auto;
    }

    .footer-links li {
        margin-bottom: 0.8rem;
    }

    .btn-footer-link {
        color: #fff;
        text-decoration: none;
        background: none;
        border: none;
        font-size: 1rem;
        padding: 0;
        transition: color 0.3s ease;
        box-shadow: none !important;
    }
    .btn-footer-link:hover {
        color: #FF2C2C;
    }

    .footer-social a {
        color: white;
        margin-right: 20px;
        transition: all 0.3s ease;
        font-size: xx-large !important;
    }
    .footer-social a:hover {
        color: #FF2C2C;
        text-shadow: 0 0 8px #FF2C2C;
    }


    /* Estilos base */
    .boton-cinta {
      position: relative;
      display: inline-block;
      font-family: 'Poppins', sans-serif;
    }

    .cinta-capa {
      position: absolute;
      height: 40px;
      width: 100%;
      clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
      z-index: 0;
    }

    .btn-cinta-principal {
      position: relative;
      color: white;
      padding: 10px 30px;
      font-size: .8rem;
      font-weight: bold;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
      z-index: 2;
      clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
      display: inline-flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
      transition: all 0.3s ease;
    }

    .btn-cinta-principal:hover {
      transform: translateY(-3px);
    }

    /* VER MÁS - Rojo */
    .cinta-vermas .cinta-fondo     { background-color: #ff7070; top: 6px; left: 4px; }
    .cinta-vermas .cinta-sombra    { background-color: #FF2C2C; top: -8px; left: -3px; }
    .cinta-vermas .btn-cinta-principal {
      background-color: #D90000;
    }
    .cinta-vermas .btn-cinta-principal:hover {
      background-color: #FF2C2C;
    }

    /* AGREGAR AL CARRITO - Naranja */
    .cinta-carrito .cinta-fondo     { background-color: #ffc078; top: 6px; left: 4px; }
    .cinta-carrito .cinta-sombra    { background-color: #FFA726; top: -8px; left: -3px; }
    .cinta-carrito .btn-cinta-principal {
      background-color: #F57C00;
    }
    .cinta-carrito .btn-cinta-principal:hover {
      background-color: #FFA726;
    }

    /* COMPRAR AHORA - Verde */
    .cinta-comprar .cinta-fondo     { background-color: #91e591; top: 6px; left: 4px; }
    .cinta-comprar .cinta-sombra    { background-color: #43A047; top: -8px; left: -3px; }
    .cinta-comprar .btn-cinta-principal {
      background-color: #2E7D32;
    }
    .cinta-comprar .btn-cinta-principal:hover {
      background-color: #43A047;
    }

    /* DESCARGAR FOTO - Azul */
    .cinta-descargar .cinta-fondo     { background-color: #87cefa; top: 6px; left: 4px; }
    .cinta-descargar .cinta-sombra    { background-color: #2196F3; top: -8px; left: -3px; }
    .cinta-descargar .btn-cinta-principal {
      background-color: #1565C0;
    }
    .cinta-descargar .btn-cinta-principal:hover {
      background-color: #2196F3;
    }

    /* VER EVENTO - Marrón */
    .cinta-evento .cinta-fondo     { background-color: #d7a67c; top: 6px; left: 4px; }
    .cinta-evento .cinta-sombra    { background-color: #8D6E63; top: -8px; left: -3px; }
    .cinta-evento .btn-cinta-principal {
      background-color: #5D4037;
    }
    .cinta-evento .btn-cinta-principal:hover {
      background-color: #8D6E63;
    }

    /* GENERAL - FONDO NEGRO / LETRAS BLANCAS */
    .cinta-negro .cinta-fondo     { background-color: #666; top: 6px; left: 4px; }
    .cinta-negro .cinta-sombra    { background-color: #333; top: -8px; left: -3px; }
    .cinta-negro .btn-cinta-principal {
      background-color: #000;
      color: #fff;
    }
    .cinta-negro .btn-cinta-principal:hover {
      background-color: #222;
    }

    /* GENERAL - FONDO BLANCO / LETRAS NEGRAS */
    .cinta-blanco-negro .cinta-fondo     { background-color: #ccc; top: 6px; left: 4px; }
    .cinta-blanco-negro .cinta-sombra    { background-color: #eee; top: -8px; left: -3px; }
    .cinta-blanco-negro .btn-cinta-principal {
      background-color: #fff;
      color: #000;
    }
    .cinta-blanco-negro .btn-cinta-principal:hover {
      background-color: #f2f2f2;
    }

    /* GENERAL - FONDO BLANCO / LETRAS ROJAS */
    .cinta-blanco-rojo .cinta-fondo     { background-color: #ffb3b3; top: 6px; left: 4px; }
    .cinta-blanco-rojo .cinta-sombra    { background-color: #ffcccc; top: -8px; left: -3px; }
    .cinta-blanco-rojo .btn-cinta-principal {
      background-color: #fff;
      color: #D90000;
    }
    .cinta-blanco-rojo .btn-cinta-principal:hover {
      background-color: #fceaea;
    }


    #btn-prev, #btn-next, #paginacion-info {
      transition: opacity 0.3s ease;
    }


    .scroll-contenedor {
      display: flex;
      gap: 20px;
      width: max-content;
      animation: scroll-left 1000s linear infinite alternate !important;
      will-change: transform;
      padding-bottom: 10px;
    }


    .scroll-contenedor .card {
      min-width: 300px;
      max-width: 300px;
      height: 460px; /* puedes ajustar según el diseño */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
      border: 2px solid transparent;
      overflow: hidden;
    }

    .card-img-top2 {
      height: 180px;
      object-fit: cover;
    }

    .card-text {
      height: 80px;
      overflow: hidden;
      text-overflow: ellipsis;
    }


    /*SCROLL DE ARTICULOS TARJETAS*/
    .scroll-contenedor .card:hover {
      transform: translateY(-8px) scale(1.03);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
      border-color: #fc0000; /* color rojo en el borde */
      z-index: 10;
    }



    .scroll-contenedor .card:hover {
      transform: translateY(-8px) scale(1.03);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8) !important;
      z-index: 10;
    }



    @keyframes scroll-left {
      0% {
        transform: translateX(0%);
      }
      100% {
        transform: translateX(-50%);
      }
    }

    .scroll-contenedor .card {
      min-width: 300px;
      max-width: 300px;
      flex-shrink: 0;
    }






/*SCROLL MINI TARJETAS*/



    .aside-scroll-wrapper {
      height: 420px; /* Altura visible fija */
      overflow: hidden;
      position: relative;
    }

    .aside-scroll {
      display: flex;
      flex-direction: column;
      gap: 10px;
      animation: scroll-vertical 25s linear infinite alternate;
      will-change: transform;
    }

    @keyframes scroll-vertical {
      0% { transform: translateY(0); }
      100% { transform: translateY(-50%); }
    }

    .tarjeta-mini {
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: all 0.3s ease;
    }

    .tarjeta-mini:hover {
      background-color: #f8f8f8;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      transform: scale(1.03);
    }

    .tarjeta-mini img {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 4px;
    }

    .scroll-contenedor {
      display: flex;
      gap: 20px;
      padding: 10px 0;
      transition: transform 0.3s ease;
    }




    .seccion-scroll-horizontal::-webkit-scrollbar {
      display: none; /* Chrome/Safari */
    }


    .seccion-scroll-horizontal {
      overflow: hidden;
      cursor: grab;
      user-select: none;
    }

    .seccion-scroll-horizontal:active {
      cursor: grabbing;
    }


    .seccion-scroll-horizontal {
      overflow-x: auto;
      /*scroll-behavior: smooth;*/
      -webkit-overflow-scrolling: touch; /* Para iOS */
    }



    @keyframes resaltarContador {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.1); opacity: 0.7; }
      100% { transform: scale(1); opacity: 1; }
    }

    .contador-vista.animado {
      animation: resaltarContador 0.6s ease;
    }

    .text-justify {
      text-align: justify;
      text-wrap: pretty;
    }

    .resumen-articulo {
      display: -webkit-box;
      -webkit-line-clamp: 4;        /* Muestra máximo 3 líneas */
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 0.95rem;
    /*  line-height: 1.4;*/
      min-height: 4.2em;            /* Para mantener altura uniforme entre tarjetas */
    }



/* ===========================
   HERO VITRINA FINAL (LIMPIO)
=========================== */

    .hero-vitrina {
      background: #000;
      overflow: hidden;
    }

  /* ================= HEADER ================= */

    .hero-header {
      background: #000;
      height: 138px;
      position: relative;
      z-index: 10;
      display: flex;
      align-items: center;
    }

    .hero-header-inner {
      width: 100%;
      max-width: 1400px;
      margin: auto;
      padding: 0 40px;

      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
    }

    /* ===== LOGO CENTRADO ===== */

    .hero-logo-wrapper {
      grid-column: 2;
      justify-self: center;
    }

    .hero-logo {
      height: 50px;
      display: block;
    }

    /* ===== ACCIONES DERECHA ===== */
    .hero-actions {
      position: absolute !important;
      right: 0px !important;        /* 🔥 borde real de la pantalla */
      bottom: -35px;      /* 🔥 se sobrepone al carrusel */

      display: flex;
      align-items: center;
      gap: 18px;

      background: black;
      padding: 10px;

      position: relative;
      top: 106px;              /* 🔑 baja el bloque */
      padding-left: 28px !important;
      padding-right: 28px !important;
    }



    /* INGRESAR */
    .hero-login {
      color: #e00000;
      font-weight: 900;
      font-size: 1.25rem;
      letter-spacing: 1px;
      line-height: 1;
      position: relative;
      display: flex;
      padding-top: 4px;
      align-items: center;
    }



    /* Badge INGRESAR */
    .badge-login {
      position: absolute;
      top: -10px;
      right: -14px;
      background: #e00000;
      color: #fff;
      font-size: 0.65rem;
      padding: 2px 6px;
      border-radius: 50%;
    }

  /* ===== CARRITO HEADER ===== */

    /* Carrito */
    #carritoFlotante {
      border: none;
      width: 38px;
      height: 38px;
      background: transparent;
      color: #e00000;

      display: flex;
      align-items: center;
      justify-content: center;

      cursor: pointer;
      margin-top: 6px;        /* 🔑 alineación óptica */
    }


      #carritoFlotante i {
        font-size: 1.65rem !important;
        line-height: 1;
      }

      /* Badge carrito */
      #contadorCarrito {
        position: absolute;
        top: -6px;
        right: -6px;
        background: #e00000;
        color: #fff;
        font-size: 0.65rem;
        padding: 2px 6px;
        border-radius: 50%;
        font-weight: bold;
      }
    #carritoFlotante {
      inset: auto !important;
      transform: none !important;
      position: relative !important;
    }

    .hero-login {
      text-decoration: none;
    }

/* ================= CARRUSEL ================= */

  .hero-carousel img {
    height: 72vh;
    width: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.15);
  }

  /* Flechas */
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    filter: invert(0);
    opacity: 1;
    border-radius: 50%;
    border: 2px solid #fff;
  }

/* ================= TÍTULO EVENTO ================= */

  .hero-titulo {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;

    font-family: 'Diciplina';
    font-size: 3.8rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #bd0612;
    text-align: center;
  }

/* ================= MOBILE ================= */

    @media (max-width: 768px) {

      .hero-header {
        height: auto;
        padding: 14px 0;
      }

      .hero-header-inner {
        grid-template-columns: 1fr auto;
        row-gap: 10px;
      }

      .hero-logo-wrapper {
        grid-column: 1 / -1;
        justify-self: center;
      }

      .hero-actions {
        grid-column: 2;
        justify-self: end;
      }

      .hero-carousel img {
        height: 80vh;
      }

      .hero-titulo {
        font-size: 2rem;
        bottom: 120px;
      }



    .hero-actions {
        position: absolute !important;
        right: 0px !important;
        bottom: -35px;
        display: flex;
        align-items: center;
        gap: 18px;
        background: black;
        padding: 35px 16px;
        position: relative;
        top: 61px;
    }
    }

/* ===============================
   BUSCADORES HERO
================================ */

  .hero-buscadores {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;     /* 🔑 CENTRA TODO */
    gap: 90px;

    padding: 50px 0 40px;        /* 🔑 quitamos padding lateral */
    max-width: 1400px;           /* 🔑 ancho controlado */
    margin: 0 auto;              /* 🔑 centra el contenedor */
  }



  /* ---------- BÚSCATE ---------- */

  .btn-buscate {
    background: #c40000;
    color: #fff;
    border: none;
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 0px;
    padding-bottom: 0px;
    font-weight: 200;
    font-size: 2.6rem !important;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .btn-buscate span {
      background: #fff;
      color: #c40000;
      padding: 17px 33px;
      font-weight: 200;
      font-size: 2.5rem !important;
  }

  /* ---------- SELFIE ---------- */

  .hero-selfie {
    display: flex;
    align-items: center;
    gap: 18px;
  }

  .hero-selfie i {
    font-size: 5.5rem;
    color: #fff;
  }

  .hero-selfie i {
    font-size: 5.5rem !important;   /* 🔥 tamaño correcto */
  }

  .hero-selfie span {
    font-size: 2.4rem !important;
    font-weight: 800;
    line-height: 1.1;
  }


  .icono-selfie {
    width: 150px;      /* ajusta si quieres más grande */
    height: auto;
    display: block;
  }

  .hero-selfie {
    display: flex;
    align-items: center;
    gap: 18px;
  }

  /* ---------- BUSCADOR ---------- */
  /* CONTENEDOR BUSCADOR */
  .hero-search {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .hero-search label {
    color: #fff;
    font-size: 2.2rem !important;
    font-weight: 900;
    letter-spacing: 1px;
  }

  /* INPUT OUTLINE */
  .search-input {
    position: relative;
    width: 420px;
  }

  .search-input input {
    width: 100%;
    height: 58px;

    background: transparent;
    border: 3px solid #fff;
    border-radius: 40px;

    padding-left: 60px;
    padding-right: 20px;

    color: #fff;
    font-size: 1.4rem !important;
    outline: none;
  }

  /* Placeholder */
  .search-input input::placeholder {
    color: rgba(255,255,255,0.6);
  }

  /* ÍCONO LUPA */
  .search-input i {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);

    color: #fff;
    font-size: 1.6rem;
  }

    #inputBuscadorGlobal {
      background: transparent;
      border-radius: 12px;
      padding: 14px 41px;
      font-size: 1rem;
    }

  .hero-linea {
    width: 320px;
    height: 5px;
    background: #fff;
    margin: 90px auto 0;
  }


  /* ---------- RESPONSIVE ---------- */

  @media (max-width: 992px) {
    .hero-buscadores {
      flex-direction: column;
      gap: 40px;
      text-align: center;
    }

    .hero-selfie {
      justify-content: center;
    }

    .search-input input {
      width: 100%;
      max-width: 360px;
    }
  }


/* ===============================
   DISEÑO EVENTO ROJO PREMIUM
================================ */

  .evento-diseno-rojo {
    background: #c40000 !important;
    color: #fff !important;
    padding: 24px 35px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
  }

  .evento-titulo {
    font-weight: 900 !important;
    font-size: 1.8rem !important;
    margin-bottom: 5px !important;
  }

  .evento-fecha {
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    margin-bottom: 25px !important;
  }

  .evento-corredores {
    font-weight: 900 !important;
    font-size: 2rem !important;
    margin-bottom: 10px !important;
  }

  .evento-distancias {
    font-size: 1.2rem !important;
    margin-bottom: 30px !important;
  }

  .btn-ver-fotos {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-weight: 900 !important;
    font-size: 2.5rem !important;
    letter-spacing: 1px !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .btn-ver-fotos:hover {
    opacity: 0.85 !important;
  }

  .btn-ver-fotos {
    align-self: flex-end !important;
  }

/* ===============================
   ARCHIVO DE CARRERAS
================================ */

  .archivo-carreras {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;

    background: #000;
    padding: 40px 80px;
  }

  /* TEXTO ROJO */

  .archivo-carreras h2 {
    color: #bd0612;
    font-weight: 900;
    font-size: 2.8rem !important;
    margin: 0;
    letter-spacing: 1px;
  }

  /* INPUT NEGRO ESTILO HERO */

  .archivo-search {
    position: relative;
    width: 420px;
  }

  .archivo-search input {
    width: 100%;
    height: 55px;
    background: #000;
    border: 2px solid #fff;
    border-radius: 40px;
    padding-left: 50px;
    color: #fff;
    font-size: 1.2rem !important;
  }

  .archivo-search input::placeholder {
    color: #aaa;
  }

  /* ÍCONO */

  .archivo-search i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 1.3rem;
  }

  @media (max-width: 768px) {

    .archivo-carreras {
      flex-direction: column;
      align-items: flex-start;
      padding: 40px 20px;
    }

    .archivo-search {
      width: 100%;
    }

    .archivo-carreras h2 {
      font-size: 2rem !important;
    }
    .archivo-carreras {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        background: #000;
        padding: 40px 52px;
    }

    #eventos h2{
      text-align: center;
    }
  }


  .img-evento-grande {
    width: 100%;
    height: 420px;        /* 🔥 controla qué tan rectangular se ve */
    object-fit: cover;    /* 🔥 recorta automáticamente */
    object-position: center; /* 🔥 centra al corredor */
  }


/* ===============================
   GALERÍA FOTOS ESTILO NUEVO
================================ */

    .foto-card {
      background: #000;
    }

    .foto-img-wrapper {
      overflow: hidden;
    }

    .foto-img {
      width: 100%;
      height: 250px;
      object-fit: cover;
      display: block;
    }

    /* PRECIO */
    .foto-precio {
      background: #d9d9d9;
      color: #000;
      font-weight: 900;
      font-size: 1.8rem !important;
      text-align: center;
      padding: 10px 0;
    }

    /* BOTÓN */
    .foto-btn {
      width: 100%;
      background: #c40000;
      color: #fff;
      border: none;
      padding: 14px 20px;
      font-weight: 900;
      font-size: 1rem !important;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: 0.3s;
    }

    .foto-btn i {
      font-size: 1.2rem;
    }

    .foto-btn:hover {
      background: #a30000;
    }

    .foto-btn:disabled {
      background: #555;
      cursor: not-allowed;
    }


  .evento-header h1 {
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    color: #fff !important;
    letter-spacing: 2px !important;
  }

  .evento-fecha {
    font-size: 1.2rem !important;
    color: #fff !important;
    font-weight: 600 !important;
  }

  .evento-fecha i {
    margin-right: 8px !important;
  }


  .active>.page-link, .page-link.active {
      z-index: 3;
      color: var(--bs-pagination-active-color);
      background-color: #c40000;
      border-color: #c40000;
  }

  .page-link:focus {
      z-index: 3;
      color: #c40000;
      background-color: var(--bs-pagination-focus-bg);
      outline: 0;
      box-shadow: var(--bs-pagination-focus-box-shadow);
  }

  .pagination .page-link {
      min-width: 38px;
      text-align: center;
      color: #c40000;
      background-color: #000000;
  }


/*ARTICULOS*/
  #seccion-noticias {
    background: #000;
    color: #fff;
  }

  .titulo-seccion {
    font-weight: 900;
    font-size: 2.8rem !important;
    letter-spacing: 2px;
  }

  .articulo-principal {
    position: relative;
  }

  .articulo-principal img {
    width: 100%;
    height: 420px;
    object-fit: cover;
  }

  .titulo-principal-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #c40000;
    width: 100%;
    padding: 20px;
    font-size: 2.5rem !important;
    font-weight: 900;
  }

  .articulo-secundario {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    background: #c40000;
    padding: 10px;
    align-items: center;
    cursor: pointer;
  }

  .articulo-secundario img {
    width: 90px;
    height: 70px;
    object-fit: cover;
  }

  .articulo-secundario h6 {
    font-weight: 800;
    margin: 0;
  }

  .articulo-secundario span {
    font-size: 0.8rem;
  }

  /* Buscador */

  .titulo-buscador {
    color: #c40000;
    font-weight: 900;
    font-size: 2.3rem !important;
  }

  .input-buscador {
    position: relative;
    display: inline-block;
    margin-top: 10px;
  }

  .input-buscador input {
    width: 280px;
    height: 45px;
    border-radius: 30px;
    border: 2px solid #fff;
    background: #000;
    color: #fff;
    padding-left: 40px;
  }

  .input-buscador i {
    position: absolute;
    left: 15px;
    top: 13px;
    color: #fff;
  }

  .articulo-principal,
  .articulo-principal img,
  .articulo-principal .titulo-principal-overlay {
    cursor: pointer;
  }

  /* ===============================
     ÚLTIMOS POSTS DISEÑO NUEVO
  ================================ */

  .titulo-ultimos-posts {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
  }

  .texto-posts {
    display: flex;
    flex-direction: column;
    line-height: 1;
  }

  .bg-rojo {
    background: #d90000;
    color: #fff;
    font-weight: 900;
    font-size: 1.6rem !important;
    padding: 6px 14px;
    display: flex;
  }

  .texto-blanco {
    color: #fff;
    font-weight: 900;
    font-size: 1.6rem !important;
    margin-top: 5px;
  }

  .icono-posts {
    background: #111;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .icono-posts i {
    color: #fff;
    font-size: 1.3rem !important;
  }

/* =========================================
   ESTADÍSTICAS DISEÑO CLIENTE
========================================= */

  .estadisticas-seccion {
    background: #000;
    color: #fff;
    padding: 80px 0;
  }

  .titulo-estadisticas {
    font-size: 2.8rem !important;
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 70px;
  }

  /* Bloques principales */
  .bloque-estadistica {
    text-align: center;
  }

  /* Subtítulos */
  .titulo-bloque {
    font-size: 1.3rem !important;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 25px;
    text-transform: uppercase;
  }

  /* Número grande principal */
  .numero-estadistica {
    font-size: 4.5rem !important;
    font-weight: 900;
    line-height: 1;
    color: #fff;
    text-shadow: 3px 3px 0px rgba(255,255,255,0.15);
    margin-bottom: 30px;
  }

  /* Años */
  .anio-estadistica {
    font-size: 1rem !important;
    font-weight: 700;
    margin-top: 10px;
  }

  .numero-anual {
    font-size: 2.3rem !important;
    font-weight: 900;
    text-shadow: 2px 2px 0px rgba(255,255,255,0.15);
    margin-bottom: 20px;
  }

  /* Línea central */
  .linea-separadora {
    width: 3px;
    background: #fff;
    height: 260px;
    margin: auto;
  }

  /* Responsive */
  @media (max-width: 768px) {

    .linea-separadora {
      display: none;
    }

    .numero-estadistica {
      font-size: 3rem !important;
    }

    .numero-anual {
      font-size: 1.6rem !important;
    }
  }


.titulo-noticia-principal{
    font-weight:900;
    font-size:2rem;
    margin:0;
}

.fecha-noticia-principal{
    font-size:0.95rem;
    margin-top:8px;
    opacity:0.85;
    font-weight:500;
}
    /* ===============================
       BOTÓN REGRESAR LATERAL
    ================================= */
    .btn-regresar-lateral{
        position: fixed;
        left: 30px;
        top: 50%;
        transform: translateY(-50%);
        color:#fff;
        text-decoration:none;
        font-weight:800;
        font-size:1.1rem;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:8px;
        z-index:1000;
        transition:0.3s ease;
    }

    .btn-regresar-lateral i{
        font-size:2.5rem;
    }

    .btn-regresar-lateral:hover{
        color:#c40000;
        transform: translateY(-50%) scale(1.05);
    }

    @media(max-width: 768px){

        .btn-regresar-lateral{
            position: fixed;
            top: 15px;
            left: 15px;
            transform: none;
            flex-direction:row;
            gap:6px;
            font-size:0.9rem;
            background: rgba(0,0,0,0.7);
            padding:8px 12px;
            border-radius:50px;
            backdrop-filter: blur(5px);
        }

        .btn-regresar-lateral i{
            font-size:1.2rem;
        }

        .hero-logo-wrapper{
          display: none;
        }
    }


    .btn-regresar-lateral i{
        font-size:2rem;
    }
/*-----------     SELFIE    --------------*/

.seccion-selfie{
    background:#000 !important;
    color:#fff !important;
    min-height:70vh !important;
}

.titulo-selfie{
    font-weight:900 !important;
    font-size:2rem !important;
}

.card-selfie{
    background:#d9d9d9 !important;
    padding:40px !important;
    border-radius:25px !important;
    max-width:600px !important;
}

.icono-upload{
    font-size:3rem !important;
    color:#000 !important;
}

.btn-cargar-foto{
    background:#c40000 !important;
    color:#fff !important;
    border:none !important;
    padding:15px 30px !important;
    font-weight:900 !important;
    font-size:1.4rem !important;
}

.filtros-selfie{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:15px !important;
    font-weight:700 !important;
}

.input-numero{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:10px !important;
}

.input-numero input{
    width:300px !important;
    padding:10px !important;
    border-radius:25px !important;
    border:none !important;
}

    .hero-vitrina {
        background: #000;
        overflow: visible;
    }

.drop-zone {
    border: 2px dashed #ccc;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s ease;
    background: #fafafa;
}

.drop-zone:hover {
    background: #f0f0f0;
}

.drop-zone.drag-over {
    border-color: #bd0612;
    background: #ffecec;
}

.drop-zone i {
    font-size: 40px;
    color: #bd0612;
    margin-bottom: 10px;
}

.drop-zone p {
    margin: 0;
    font-weight: 600;
}