/* styles.css - mobile first, variables and responsive rules */


:root{
  --bg-white: #fbfbfb;
  --primary: #f02936;    /* purple */
  --accent: #f02936;     /* bright magenta */
  --accent-deep: #f02936;/* deep magenta */
  --navy: #f02936;
  --muted: #dadada;
  --container-width: 1100px;
  --radius: 8px;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  
  font-family: "Montserrat", sans-serif;
  
  
  color:#222;
  background:var(--bg-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
}

h2{font-weight: 700; font-size: 3rem;}
h6{font-weight: 700; font-size: 1rem;}
p {   
    margin-top: 1rem;
    margin-bottom: 0!important;
}

/* NAV */
.navbar-brand{font-weight:800; }
.navbar .btn-primary{background:var(--accent);border-color:var(--accent);font-weight:700;}
.navbar-toggler{border:1px solid rgba(0,0,0,0.05)}

/* HERO */
.hero{
  position:relative;
  min-height:55vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3rem 1rem;
  background-image: url('img/hero.jpg');
  background-size: cover;
  background-position: center;
  color: white;
  text-align:center;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.45));
}

.hero-inner{
  position:relative;
  z-index:2;
  max-width:var(--container-width);
  margin:0 auto;
}

.hero img{
  width: 70%;
}

 

 

/* CTA */
.btn-cta{
  background:transparent;
  border:2px solid #fff;
  color:#fff;
  padding:.5rem 1.25rem;
  font-weight:700;
  text-decoration:none;
  display:inline-block;
}

/* INFO CARDS */
.info-card{
  padding:1rem;   
  margin:0 auto;
  min-height:100px;
}
 .icon{
    margin:auto;
    
    margin-bottom:.3rem;
    border-radius: 50%;
    background-color:  var(--muted);
    width: 150px;height: 150px;
    display: flex;
    justify-content: center; /* centra horizontal */
    align-items: center;     /* centra vertical */
    color: #fff;             /* color del ícono */
    font-size: 60px;         /* tamaño del ícono */
  }


   .icon-recorrido{
    margin:auto;
    font-size:25px;
    margin-bottom:1rem;
    border-radius: 50%;
    border:1px solid var(--muted);     
    width: 80px;height: 80px;
    display: flex;
    justify-content: center; /* centra horizontal */
    align-items: center;     /* centra vertical */
    color: #fff;             /* color del ícono */
    
  }
 

/* ANIMATE */
.animate{background: rgba(0,0,0,0.03)}
.animate .display-6{
  font-weight:800;
  color:var(--accent-deep);
  margin-bottom:.2rem;
  
}

/* FORM CARD */
.form-card{
  background:#fff;
  border-radius:var(--radius);
  padding:1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

 
.recorrido{
   
  background: linear-gradient(180deg, var(--primary), var(--accent-deep));
  position:relative;
  overflow:hidden;
  color:#fff;
}
.big-date{
  font-weight:800;
  font-size:1.4rem;
  line-height:1.05;
  margin:0;
  
  letter-spacing:1px;
  padding:2rem 0;
}

 
/* STATS BANNER */
.stats-banner{
  background: linear-gradient(180deg, var(--primary), var(--accent-deep));
  color:#fff;
}
.stats-banner .number{
  font-size:1.2rem;
  font-weight:900;
  
}
.stats-banner .label{font-size:.75rem;opacity:0.95}

/* GALLERY */
 
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Mobile: 2 columnas */
    gap: 0; /* Sin separación entre fotos */
}

/* Desktop: 3 columnas */
@media (min-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Estilo de cada imagen */
.gallery-grid img {
    width: 100%;
    
    /* Cuadrada por defecto */
    aspect-ratio: 1 / 1;

    /* Para que se recorte bien */
    object-fit: cover;

    display: block;
}

/* OPCIONAL: si querés vertical levemente en desktop */
@media (min-width: 992px) {
    .gallery-grid img {
        aspect-ratio: 1 / 1; /* cuadrada = 1/1 — vertical suave = 4/5 */
    }
}



/* Footer */
footer{font-size:.9rem;color:#6b6b6b}

 

/* Responsive: tablets / desktop */
@media(min-width:768px){
  .hero{min-height:72vh;padding:6rem 1rem}
  .hero-title{font-size:1.8rem}
  .label-white{padding:.6rem .9rem}
  .label-accent{padding:.6rem .9rem}
 
  .big-date{font-size:2.6rem}
  .info-card{min-height:130px}

  
}

@media(min-width:1200px){
  .hero-inner{padding:0 2rem}
  .hero-title{font-size:2.4rem}
  .big-date{font-size:3.2rem}
  
}



/*---------CUSTOMS------------*/
.py-6 {
    padding-top: 10rem !important;
    padding-bottom: 10rem !important;
}
.pb-6 {
     
    padding-bottom: 10rem !important;
}

.btn-primario{
  background:var(--primary);

}

.btn-outline-secundario {
    --bs-btn-color: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #6c757d;
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-border-color: #6c757d;
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6c757d;
    --bs-btn-active-border-color: #6c757d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-gradient: none;
}

.galeria-item {
    width: 100%;
    aspect-ratio: 4 / 5; /* cuadrado */
    /* Si querés levemente vertical, usar: aspect-ratio: 4/5; */
    overflow: hidden;
     
}

.galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* recorte elegante */
    display: block;
}