/* assets/inicio.css – estilos del landing alineados con estilo.css */

:root{
  --primary:#55c1e7;
  --primary-hover:#2b9fc5;
  --brand-blue:#27459d;
  --brand-blue-hover:#1f347a;
  --danger:#cc0000;
  --danger-hover:#990000;
  --shadow:0 4px 16px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Montserrat',sans-serif;
  color:#222;
  line-height:1.6;
  scroll-behavior:smooth;
  margin:0;
  position:relative;
  min-height:100vh;
}

/* Fondo (mismo asset nuevo) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:url('/assets/degradado.jpg') center top/cover no-repeat;
  z-index:-1;
  pointer-events:none;
}

/* HEADER (estructura ya viene en estilo.css) */

/* HERO */
.hero{
  height:100vh;
  background:url('/assets/hero-bg.jpg') center/cover no-repeat;
  color:#fff;
  display:flex; justify-content:center; align-items:center; text-align:center;
  padding:0 20px; position:relative;
}
.hero::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.55); }
.hero-content{ position:relative; z-index:2; max-width:800px; }
.hero h1{ font-size:3rem; margin-bottom:20px; animation:slideFadeIn 1.2s ease forwards; }
.hero p{ font-size:1.25rem; margin-bottom:30px; color:#f1f1f1; }

/* CTA – Hero (rojo con borde blanco) */
.cta-btn{
  display:inline-block;
  margin-top:1.5rem;
  padding:.8rem 2rem;
  background:var(--danger);
  color:#fff;
  font-weight:600;
  font-size:1.1rem;
  border:1px solid #fff;
  border-radius:30px;
  text-decoration:none;
  box-shadow:var(--shadow);
  transition:transform .2s ease, background .25s ease;
}
.cta-btn:hover{ background:var(--danger-hover); transform:translateY(-2px); }

/* En la sección contacto, el CTA es azul solicitado */
#contacto .cta-btn{
  background:var(--brand-blue);
  border:1px solid #fff;
  display:block;
  margin:20px auto;       /* centrado */
  max-width:260px;
  border-radius:30px;
}
#contacto .cta-btn:hover{ background:var(--brand-blue-hover); }

/* Secciones con fade-in */
.fade-section{
  opacity:0; transform:translateY(20px);
  transition:all .6s ease-out;
  padding:40px 20px; max-width:960px; margin:auto;
}
.fade-section.visible{ opacity:1; transform:translateY(0); }
h2{ font-size:2rem; text-align:center; margin-top:40px; color:#fff; }

/* SERVICIOS */
.features{
  background:#f5f7fa;
  padding:40px 20px;
  color:#333;
}
.features h2{ color:#111; }
.cards{
  display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:30px;
}
.card{
  background:#fff; padding:20px; border-radius:10px; width:280px;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 6px 18px rgba(0,0,0,.18); }
.card h3{ color:var(--primary); margin-bottom:10px; }

/* VENTAJAS (antes testimonios) */
.testimonios blockquote{
  font-style:italic; font-size:1.1rem; color:#555; margin:20px auto; max-width:700px; padding:15px 25px;
  background:#e6f6fd; border-left:4px solid var(--primary);
}

/* CARRUSEL */
.carousel-container{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding:20px; margin-top:20px;
}
.carousel-container img{
  flex:0 0 auto; width:300px; height:auto; border-radius:10px; scroll-snap-align:center; transition:transform .25s ease;
}
.carousel-container img:hover{ transform:scale(1.03); }

/* Textos más visibles en secciones */
#quienes-somos p,
#contacto p{ color:#e6e6e6; font-weight:500; }

/* Animación */
@keyframes slideFadeIn{ 0%{opacity:0; transform:translateY(20px)} 100%{opacity:1; transform:translateY(0)} }

/* Responsive */
@media (max-width:768px){
  .cards{ flex-direction:column; align-items:center; }
  .hero h1{ font-size:2rem; }
  .hero p{ font-size:1rem; }
  .navbar{ display:none; } /* En móvil se controla por .show desde estilo.css */
}
/* CTA del hero: borde blanco un poco más grueso */
.cta-hero { border-width: 2px; }

/* CTA de contacto: una sola línea y centrado, puede hacerse más ancho */
.cta-contacto {
  white-space: nowrap;       /* fuerza una sola línea */
  display: inline-block;     /* mantiene centrado con margin:auto */
  margin: 20px auto;
  max-width: none;           /* que no se achique */
  text-align: center;
}
/* --- CTA del hero: borde un poco más grueso --- */
.cta-hero { border-width: 2px; }

/* --- CTA de contacto perfectamente centrado en una línea --- */
.cta-contacto{
  display: inline-flex;           /* centra ‘ópticamente’ el texto */
  align-items: center;
  justify-content: center;
  height: 54px;                   /* altura fija para centrar vertical */
  padding: 0 28px;                /* solo laterales, simétrico */
  white-space: nowrap;            /* una sola línea, aunque se haga más ancho */
  max-width: none;                /* que no se achique */
  text-align: center;
  letter-spacing: 0.2px;          /* microajuste visual */
}
/* CTA del hero: borde más grueso (ya lo tenías con .cta-hero) */
.cta-hero{ border-width:2px; }

/* CTA de contacto (azul) – centrado óptico */
.cta-contacto{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;          /* fija el alto para centrar vertical */
  padding: 0 28px;       /* simétrico */
  white-space: nowrap;   /* una sola línea */
  max-width: none;
  text-align: center;
  box-sizing: border-box;
}
/* ======== CTA “Lo quiero en mi cancha” – centrado real ======== */
/* (Sustituye cualquier regla previa de .cta-contacto si existiera) */
.cta-contacto{
  display: inline-flex;          /* centro perfecto del texto */
  align-items: center;
  justify-content: center;
  padding: 12px 28px;            /* simétrico */
  border: 1px solid #fff;
  border-radius: 30px;
  background: #27459d;
  color: #fff;
  font-weight: 700;
  line-height: 1;                /* evita que se “baje” la línea */
  white-space: nowrap;           /* una sola línea */
  margin: 20px auto;             /* centrado horizontal */
  max-width: none;
  box-sizing: border-box;
}
/* CTA “Lo quiero en mi cancha” – centrado real */
.cta-contacto{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;               /* fija el alto para centrar vertical */
  padding: 0 26px;            /* SIMÉTRICO en ambos lados */
  border: 1.5px solid #fff;   /* un pelín más grueso para nitidez */
  border-radius: 30px;
  background: #27459d;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;             /* evita “bajada” óptica */
  white-space: nowrap;        /* 1 sola línea */
  margin: 20px auto;          /* centrado horizontal del bloque */
  text-align: center;
  letter-spacing: 0;          /* quitamos micro tracking que sesgaba */
  text-rendering: geometricPrecision;
  box-shadow: none;           /* por si un shadow lo hacía ver corrido */
}
.boton-cta {
  display: flex;
  justify-content: center;
  align-items: center; /* centra vertical */
  height: 60px;        /* ponle un alto fijo para que siempre se centre */
  padding: 0 30px;     /* horizontal */
  font-weight: bold;
  font-size: 18px;
  border-radius: 30px;
  border: 1px solid white;
  background-color: #1e3a8a; /* azul */
  color: white;
  text-decoration: none;
}
/* ===== CTA CONTACTO: CENTRADO PERFECTO ===== */
#contacto .cta-btn{
  display:inline-flex !important;         /* fuerza flex sobre estilos previos */
  align-items:center;
  justify-content:center;
  height:50px;                            /* fija altura -> centra vertical */
  padding:0 26px;                         /* laterales simétricos */
  line-height:1;                          /* clave para que no “baje” */
  border:1.5px solid #fff;
  border-radius:28px;
  background:#27459d;
  color:#fff;
  font-weight:700;
  white-space:nowrap;                     /* una sola línea */
  margin:22px auto 0;                     /* centrado del bloque */
  text-align:center;
  box-shadow:none;
}
/* ===== Centrar el BOTÓN completo ===== */
#contacto{
  text-align:center;   /* asegura que todo su contenido se centre */
}

#contacto .cta-btn{
  display:inline-flex; /* ya lo tenías */
  margin:22px auto 0;  /* auto a izquierda y derecha centra el botón */
}




/* CTA del hero con borde un poco más grueso */
.cta-hero{ border-width: 2px; }