/* 🎨 VARIABLES DE COLOR Y ESTILO BASE */
:root {
  --color-fondo: #f7f7f7;
  --color-texto: #333;
  --color-secundario: #00b4d8;
  --color-secundario-hover: #0094b2;
  --color-header: #000;
  --color-blanco: #fff;
  --color-gris-claro: #f9f9f9;
  --color-sombra: rgba(0, 0, 0, 0.05);
}

/* 🔧 RESETEO GENERAL DE MÁRGENES Y PADDING */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 🧭 COMPORTAMIENTO DE SCROLL GLOBAL */
html {
  scroll-behavior: smooth;
}

/* 🧍 ESTILO GENERAL DEL CUERPO */
body {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  background-color: var(--color-fondo);
  color: var(--color-texto);
}

/* 📝 ENCABEZADOS H2 */
h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
  color: #111;
}

/* 📝 PÁRRAFOS */
p {
  max-width: 800px;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
  text-align: center;
  hyphens: auto;
}

/* 📦 SECCIÓN GENÉRICA CON PADDING */
.seccion {
  padding: 4rem 2rem;
  background-color: var(--color-gris-claro);
  scroll-margin-top: 100px;
}

/* ---------------- HEADER ---------------- */
/* 🔝 CABECERA FIJA */
.encabezado {
  background-color: var(--color-header);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* 📦 CONTENEDOR DE HEADER Y MENÚ */
.contenedor-header {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

/* 🖼️ LOGO PRINCIPAL */
.logo {
  height: 80px;
  object-fit: contain;
  margin-top: 4px;
  margin-bottom: 4px;
}

/* 🍔 BOTÓN MENÚ HAMBURGUESA (MÓVIL) */
.menu-toggle {
  display: none;
  font-size: 2rem;
  color: white;
  cursor: pointer;
  position: absolute;
  right: 1rem;
  top: 1.2rem;
  z-index: 1001;
}

/* 🧭 MENÚ DE NAVEGACIÓN */
.menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.menu li a {
  color: white;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.menu li a:hover {
  color: var(--color-secundario);
}

/* ---------------- HERO ---------------- */
/* 🦸 SECCIÓN HERO (PRESENTACIÓN) */
.hero {
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
              url('/assets/img/gym-hero.jpg') no-repeat center center/cover;
  color: white;
  text-align: center;
  padding: 6rem 2rem;
  scroll-margin-top: 100px;
}

/* 🧾 CONTENIDO CENTRAL HERO */
.contenido-hero {
  max-width: 800px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero /* 📝 PÁRRAFOS */
p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

/* 🔘 BOTÓN PRINCIPAL */
.boton {
  background-color: var(--color-secundario);
  color: white;
  padding: 1rem 2rem;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease;
  font-size: 1.1rem;
}

.boton:hover {
  background-color: var(--color-secundario-hover);
}

/* 🔘 BOTÓN CENTRADO */
.boton-centrado {
  margin-top: 2rem;
  text-align: center;
}

/* ---------------- EQUIPAMIENTO ---------------- */
/* 🏋️‍♂️ GRID DE EQUIPAMIENTO */
.grid-equipamiento {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 2rem auto 0;
}

/* 📦 ELEMENTO DE EQUIPAMIENTO */
.equip-item {
  background-color: var(--color-blanco);
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 0 10px var(--color-sombra);
  transition: transform 0.3s;
}

.equip-item:hover {
  transform: translateY(-5px);
}

.equip-item h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

.equip-item /* 📝 PÁRRAFOS */
p {
  font-size: 0.95rem;
  text-align: center;
  color: #555;
}

/* ---------------- SOBRE NOSOTROS ---------------- */
#nosotros /* 📝 PÁRRAFOS */
p {
  text-align: justify;
  padding: 0 1rem;
  max-width: 900px;
  hyphens: auto;
}

/* ---------------- CARRUSEL ---------------- */
/* 🏗️ SECCIÓN PROYECTOS */
.proyectos {
  padding: 4rem 2rem;
  background-color: var(--color-gris-claro);
  text-align: center;
  scroll-margin-top: 100px;
}

/* 🎠 CARRUSEL DE PROYECTOS */
.carrusel {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
}

.carrusel-items {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
}

/* 🧱 ITEM DEL CARRUSEL */
.item {
  flex: 0 0 100%;
  padding: 1rem;
  box-sizing: border-box;
  text-align: center;
}

.item img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.item h3 {
  margin-top: 1rem;
  font-size: 1.3rem;
}

.item /* 📝 PÁRRAFOS */
p {
  font-size: 1rem;
  color: #555;
  max-width: 90%;
  margin: 0.5rem auto 0;
}

/* ---------------- PUNTOS ---------------- */
/* 🔘 PUNTOS INDICADORES DEL CARRUSEL */
.puntos {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  gap: 0.5rem;
}

.puntos span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ccc;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.3s;
}

.puntos span.activo {
  background-color: var(--color-secundario);
}

/* ---------------- INSTRUCCIÓN MÓVIL ---------------- */
/* 📱 TEXTO PARA MÓVIL (INSTRUCCIÓN) */
.instruccion-movil {
  font-size: 0.95rem;
  color: #888;
  margin-bottom: 1rem;
  text-align: center;
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

/* ---------------- CTA ---------------- */
/* ✉️ SECCIÓN CALL TO ACTION (CONTACTO) */
.cta {
  text-align: center;
  padding: 4rem 2rem 6rem;
  background-color: white;
  scroll-margin-top: 100px;
}

/* 🔘 BOTÓN GRANDE DE CONTACTO */
.boton-grande {
  font-size: 1.1rem;
  background-color: var(--color-secundario);
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  margin-top: 2rem;
  transition: background-color 0.3s ease;
}

.boton-grande:hover {
  background-color: var(--color-secundario-hover);
}

/* ---------------- FOOTER ---------------- */
/* 🔚 PIE DE PÁGINA (FOOTER) */
footer {
  background-color: #000;
  color: white;
  padding: 3rem 1rem 1rem;
  font-size: 0.95rem;
}

/* 📦 CONTENEDOR DE FOOTER */
.footer-contenedor {
  display: flex;
  justify-content: center; /* o 'space-between' o 'space-evenly' según lo que quieras */
  gap: 4rem;               /* espacio entre columnas */
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* ☎️ ENLACES DE CONTACTO FOOTER */
.footer-contacto a,
.redes-sociales a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: white;
  text-decoration: none;
  margin-bottom: 1rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

.footer-contacto a:hover,
/* 🎯 HOVER SOBRE ICONOS REDES */
.redes-sociales a:hover svg path {
  color: var(--color-secundario);
  fill: var(--color-secundario);
}

/* 🔲 ICONOS SVG DE FOOTER */
.footer-col svg {
  width: 22px;
  height: 22px;
  fill: white;
  margin-right: 0.5rem;
  vertical-align: middle;
  transition: fill 0.3s ease;
}

.footer-col a:hover svg {
  fill: var(--color-secundario);
}

/* 🌐 REDES SOCIALES FOOTER */
.redes-sociales {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

/* ℹ️ PIE FINAL DE PÁGINA */
.footer-bottom {
  text-align: center;
  border-top: 1px solid #222;
  margin-top: 2rem;
  padding: 1rem 0;
  font-size: 0.85rem;
  color: #aaa;
  width: 100%;
}

/* ---------------- RESPONSIVE ---------------- */
/* 📱 ESTILOS RESPONSIVOS (TABLET / MÓVIL) */
@media screen and (max-width: 768px) {
  /* 🏋️‍♂️ GRID DE EQUIPAMIENTO */
.grid-equipamiento {
    grid-template-columns: 1fr;
    padding: 0 1rem;
  }

  /* 📦 SECCIÓN GENÉRICA CON PADDING */
.seccion {
    padding: 2.5rem 1rem;
  }

  /* 📝 ENCABEZADOS H2 */
h2 {
    font-size: 1.5rem;
  }

  /* 🍔 BOTÓN MENÚ HAMBURGUESA (MÓVIL) */
.menu-toggle {
    display: block;
  }

  /* 🧭 MENÚ DE NAVEGACIÓN */
.menu {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    background-color: var(--color-header);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding: 0;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    pointer-events: none;
    visibility: hidden;
  }

  .menu.menu-activo {
    max-height: 500px;
    opacity: 1;
    padding: 1.5rem;
    pointer-events: auto;
    visibility: visible;
  }

  /* 📦 CONTENEDOR DE HEADER Y MENÚ */
.contenedor-header {
    align-items: flex-start;
    position: relative;
  }

  /* 🖼️ LOGO PRINCIPAL */
.logo {
    height: 70px;
  }

  .item img {
    max-height: 250px;
  }

  .puntos span {
    width: 16px;
    height: 16px;
    margin: 0 4px;
  }

  /* 📱 TEXTO PARA MÓVIL (INSTRUCCIÓN) */
.instruccion-movil {
    display: block;
    opacity: 1;
  }

  /* 📦 CONTENEDOR DE FOOTER */
.footer-contenedor {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  /* 🌐 REDES SOCIALES FOOTER */
.redes-sociales {
    justify-content: center;
  }

  .footer-contacto a {
    justify-content: center;
  }
}
/* 🏢 SECCIÓN DISTRIBUIDORES */
.distribuidores-section {
  background-color: #eee;
  padding: 3rem 1rem 2rem;
  text-align: center;
}

.distribuidores-section /* 📝 ENCABEZADOS H2 */
h2 {
  margin-bottom: 1.5rem;
  font-size: 1.6rem;
  color: #111;
}

/* 🎞️ CARRUSEL DE DISTRIBUIDORES */
.distribuidores-carrusel {
  display: flex;
  gap: 2rem;
  animation: scrollMarcas 40s linear infinite;
  width: max-content;
}

.distribuidores-carrusel img {
  height: 50px;
  margin-right: 50px;
  transition: transform 0.3s;
}

.distribuidores-carrusel img:hover {
  transform: scale(1.1);
}

.distribuidores-carrusel.pausado {
  animation-play-state: paused !important;
}

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

/* Responsivo */
/* 📱 ESTILOS RESPONSIVOS (TABLET / MÓVIL) */
@media screen and (max-width: 768px) {
  .distribuidores-carrusel img {
    height: 40px;
  }

  .distribuidores-section /* 📝 ENCABEZADOS H2 */
h2 {
    font-size: 1.3rem;
  }
}
/* ---------------- DISTRIBUIDORES - AJUSTE RESPONSIVE ---------------- */

/* 🏢 SECCIÓN DISTRIBUIDORES */
.distribuidores-section {
  background-color: #f1f1f1;
  padding: 2rem 1rem;
  text-align: center;
  overflow: hidden;
}

.distribuidores-section /* 📝 ENCABEZADOS H2 */
h2 {
  margin-bottom: 2rem;
  font-size: 1.6rem;
  color: #111;
}

/* 🎞️ CARRUSEL DE DISTRIBUIDORES */
.distribuidores-carrusel {
  display: flex;
  gap: 3rem;
  animation: scrollLogos 40s linear infinite;
  width: max-content;
  will-change: transform;
  padding-bottom: 1rem;
}

.distribuidores-carrusel a {
  flex: 0 0 auto;
}

.distribuidores-carrusel img {
  height: 50px;
  width: auto;
  transition: transform 0.3s ease;
}

.distribuidores-carrusel img:hover {
  transform: scale(1.1);
}

.distribuidores-carrusel.pausado {
  animation-play-state: paused !important;
}

/* 🎞️ ANIMACIÓN DE LOGOS DISTRIBUIDORES */
@keyframes scrollLogos {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Responsive */
@media (max-width: 768px) {
  /* 🎞️ CARRUSEL DE DISTRIBUIDORES */
.distribuidores-carrusel {
    gap: 2rem;
    padding-bottom: 0.5rem;
  }

  .distribuidores-carrusel img {
    height: 35px;
  }

  .distribuidores-section /* 📝 ENCABEZADOS H2 */
h2 {
    font-size: 1.3rem;
  }
}
/* 📨 FORMULARIO DE CONTACTO */
.formulario-contacto {
  max-width: 600px;
  margin: 2rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.formulario-contacto input,
.formulario-contacto textarea {
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
}

.formulario-contacto button {
  background-color: var(--color-secundario);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 6px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.formulario-contacto button:hover {
  background-color: var(--color-secundario-hover);
}

@media (max-width: 768px) {
  /* 📨 FORMULARIO DE CONTACTO */
.formulario-contacto {
    padding: 0;
  }
}

/* ⭐ RESEÑAS GOOGLE */
#valoraciones {
  padding: 4rem 2rem;
  background-color: #f8f8f8;
  text-align: center;
}

/* ---------------- AVISO LEGAL ---------------- */
/* Enlace al aviso legal */
.aviso-legal {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 2rem;
}

.aviso-legal a {
  color: var(--color-texto);
  text-decoration: underline;
  transition: color 0.3s ease;
}

.aviso-legal a:hover {
  color: var(--color-secundario);
}

/* ---------------- POLÍTICA DE PRIVACIDAD ---------------- */
/* Enlace a la política de privacidad */
.politica-privacidad {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 1rem;
}

.politica-privacidad a {
  color: var(--color-texto);
  text-decoration: underline;
  transition: color 0.3s ease;
}

.politica-privacidad a:hover {
  color: var(--color-secundario);
}

/* ---------------- POLÍTICA DE COOKIES ---------------- */
/* Enlace a la política de cookies */
.politica-cookies {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 1rem;
}

.politica-cookies a {
  color: var(--color-texto);
  text-decoration: underline;
  transition: color 0.3s ease;
}

.politica-cookies a:hover {
  color: var(--color-secundario);
}

/* ---------------- CONDICIONES DE USO ---------------- */
/* Enlace a las condiciones de uso */
.condiciones-uso {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 1rem;
}

.condiciones-uso a {
  color: var(--color-texto);
  text-decoration: underline;
  transition: color 0.3s ease;
}

.condiciones-uso a:hover {
  color: var(--color-secundario);
}



/* ============================= */
/* ✅ AJUSTES VISUALES DEL FOOTER */
/* ============================= */
.footer-col {
  flex: 1 1 250px;         /* ancho flexible con mínimo */
  display: flex;
  flex-direction: column;
  align-items: center;     /* centra el contenido horizontalmente */
  text-align: center;      /* opcional para los textos */
}

.footer-col h3 {
  font-size: 1rem;
  margin-bottom: 1.2rem;
  color: var(--color-secundario);
  line-height: 1.2;
}

.footer-col a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: white;
  text-decoration: none;
  font-size: 0.95rem;
  margin-bottom: 0.8rem;
  transition: color 0.3s ease;
  cursor: pointer;
}

.footer-col a:hover {
  color: var(--color-secundario);
}

.footer-col svg {
  width: 20px;
  height: 20px;
  fill: white;
  transition: fill 0.3s ease;
}

.footer-col a:hover svg {
  fill: var(--color-secundario);
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1rem 1rem;
}
.footer-col .redes-sociales {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}
.footer-col.redes {
  align-items: center;
}

.footer-col.redes h3 {
  text-align: center;
}

.footer-col.redes .redes-sociales {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
/* 🔐 Aviso de Cookies */
/* 🟦 CONTENEDOR AVISO COOKIES */
.aviso-cookies {
  position: fixed;
  box-sizing: border-box;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  background-color: #000;
  color: white;
  text-align: center;
  padding: 1rem;
  margin: 0 auto;
  z-index: 10000;
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.3);
}

.aviso-cookies p {
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* 🟦 BOTONES COOKIES */
.botones-cookies {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.botones-cookies button {
  padding: 0.6rem 1.5rem;
  background-color: #00c0e6;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
  min-width: 140px;
}

.botones-cookies button:hover {
  background-color: #00a0c0;
}

/* 🟦 ENLACE "LEER MÁS" */
.aviso-cookies a {
  display: block;
  color: #00c0e6;
  text-decoration: underline;
  margin-top: 0.5rem;
}

.aviso-cookies a:hover {
  text-decoration: underline;
}

/* 🟦 RESPONSIVE MOBILE (menor de 480px) */
@media (max-width: 480px) {
  .botones-cookies {
    flex-direction: column;
    align-items: center;
  }

  .botones-cookies button {
    width: 90%;
  }
}

.botones-cookies button:hover {
  background-color: var(--color-secundario-hover);
}

.panel-cookies {
  position: fixed;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  color: var(--color-texto);
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  border-radius: 10px;
  z-index: 9999;
  max-width: 90%;
  width: 400px;
  text-align: left;
  font-size: 0.95rem;
}

.panel-cookies h3 {
  margin-bottom: 1rem;
  color: var(--color-secundario);
  text-align: center;
}

.panel-cookies input {
  margin-right: 0.5rem;
}

.panel-cookies button {
  margin-top: 1rem;
  background-color: var(--color-secundario);
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  width: 100%;
  transition: background-color 0.3s;
}

.panel-cookies button:hover {
  background-color: var(--color-secundario-hover);
}

.oculto {
  display: none;
}