/* ejemplo de reset y estructura */
/* .navbar { display: flex; align-items: center; justify-content: space-between; }
.navbar__links { list-style: none; display: flex; gap: 1rem; }
.navbar__toggle { display: none; } */
/* Media query para móvil */
/* @media (max-width: 768px) {
  .navbar__links { display: none; flex-direction: column; }
  .navbar__toggle { display: block; }
}
.hero { display: flex; align-items: center; justify-content: center; height: 80vh; background: #f5f5f5; }
.services__list, .extras__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 1rem; } */

/* Input group con labels que flotan */
/* .input-group {
  position: relative;
  margin-bottom: var(--gap);
}
.input-group input,
.input-group textarea {
  width: 100%;
  padding: 1rem 0.75rem 0.25rem;
  border: none;
  border-radius: var(--radius);
  outline: none;
  font-size: 1rem;
  background: rgba(255,255,255,0.2);
  color: #fff;
}
.input-group label {
  position: absolute;
  top: 1rem;
  left: 0.75rem;
  pointer-events: none;
  transition: transform var(--transition), font-size var(--transition);
  color: #f0f0f0;
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label,
.input-group textarea:focus + label,
.input-group textarea:not(:placeholder-shown) + label {
  transform: translateY(-1.5rem);
  font-size: 0.85rem;
} */

/* Botón */
/* .btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: #fff;
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.btn:hover {
  background: #f0f0f0;
} */

/* Responsive */
/* @media (max-width: 768px) {
  .contact__container {
    grid-template-columns: 1fr;
  }
} */

/* GENERAL */
/* Share Tech Font Google*/
.share-tech-regular {
  font-family: "Share Tech", sans-serif;
  font-weight: 400;
  font-style: normal;
}
/* Starbim Font */
@font-face {
  font-family: "Starbim";
  src: url("../assets/fonts/Starbim.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* SupersonicRocketship Font */
@font-face {
  font-family: "SupersonicRocketship";
  src: url("../assets/fonts/SupersonicRocketship.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* GameBubble Font */
@font-face {
  font-family: "GameBubble";
  src: url("../assets/fonts/GameBubble.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* Variables de tipografía */
:root {
  --font-primary: "Share Tech", sans-serif;
  /* --font-fun: "Bubbler One", cursive; */
  --font-logo: "GameBubble", var(--font-fun);
}
/* Fondo global con imagen */
body {
  background: url("../assets/fondo_mv.png") center/cover no-repeat fixed;
  color: #fff; /* texto en blanco para contraste */
  padding-top: 4rem;
}
/* Botón “Volver arriba” */
#back-to-top {
  position: fixed;

  width: 4rem; /* más ancho */
  height: 4rem; /* más alto */
  font-size: 2rem; /* flecha más grande */
  /* background: linear-gradient(45deg, #1e3a8a 0%, #ec4899 100%); color de fondo nuevo */
  background: linear-gradient(90deg, #1e3a8a, #ec4899);
  color: #fff; /* flecha en blanco */
  right: 2rem; /* separarlo un poco más del borde */
  bottom: 2rem; /* igual que right */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /* sombra más pronunciada */

  /* bottom: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  background: var(--color-secondary);
  color: #333; */
  border: none;
  border-radius: 50%;
  /* font-size: 1.5rem; */
  cursor: pointer;
  display: none; /* oculto hasta que se baje la página */
  align-items: center;
  justify-content: center;
  /* box-shadow: 0 2px 5px rgba(0,0,0,0.3); */
  transition: transform var(--transition), opacity var(--transition);
  z-index: 1000;
}
#back-to-top:hover {
  transform: scale(1.1);
}
#back-to-top.show {
  display: flex; /* sigue usando flex para centrar */
  align-items: center;
  justify-content: center;
  opacity: 1; /* sin transparencia para destacarlo */
}
/* Clase que reduce la opacidad */
#back-to-top.fade {
  opacity: 0.4 !important;
}
/* Override del fade cuando se hace hover */
#back-to-top:hover {
  opacity: 1 !important;
}

/* ─── Cintas de balizar ─── */
.cinta {
  position: fixed;
  left: 0;
  right: 0;
  height: 30px; /* grosor de la cinta */
  background: repeating-linear-gradient(
    45deg,
    #ffeb3b 0,
    #ffeb3b 15px,
    #000 15px,
    #000 30px
  );
  z-index: 1100; /* por encima del navbar */
  pointer-events: none; /* que no interfiera con clicks */

  /* Flex para centrar el texto */
  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden; /* oculta el texto fuera del contenedor */
}

/* Ubicación */
.cinta--top {
  top: 0;
}
.cinta--bottom {
  bottom: 0;
}

/* Texto dentro de la cinta */
.cinta__text {
  font-family: sans-serif;
  font-size: 1.35rem;
  font-weight: bold;

  background-color: rgba(255, 255, 255, 0.8);
  color: red;
  padding: 0 0.5rem;
  border-radius: 0.25rem;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000,
    -1px -1px 0 #000;

  text-transform: uppercase;
  white-space: nowrap;

  display: inline-block;
  /* Ajusta la velocidad cambiando la duración */
  animation: scroll-text 20s linear infinite;
}
/* Keyframes para mover de derecha (100%) a izquierda (-100%) */
@keyframes scroll-text {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 1. NAVBAR */
/* 1.1. Barra de navegación sobre fondo sólido o semitransparente */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.8); /* negro con 80% de opacidad */
  /* o bien un negro puro:
     background: #000;
  */
  /* si quisieras usar tu color primario sólido:
     background: var(--color-primary);
  */
}
/* 1.2. Contenedor flex para el navbar */
.navbar__container {
  display: flex;
  align-items: center;
  padding: 1rem 0;
}
/* 1.3. Espaciador que “empuja” los enlaces a la derecha */
.navbar__spacer {
  flex: 1;
}
/* 1.4. Enlaces a la derecha */
.navbar__links {
  list-style: none;
  display: flex;
  gap: var(--gap);
}
/* 1.5. Estilo de cada enlace */
.navbar__links li a {
  display: inline-block; /* imprescindible */
  font-family: "GameBubble", sans-serif;
  font-size: 1.1rem; /* ajústalo a tu gusto */
  color: #fff; /* asegúrate buen contraste */
  text-decoration: none; /* quita subrayado */
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  transition: transform 0.3s ease, color 0.3s ease; /* suaviza escala y color */
  text-transform: uppercase;
}
.navbar__links li a:hover {
  transform: scale(1.2); /* aumenta un 10% */
  color: var(--color-secondary); /* cambia a tu color secundario */
  background: rgba(255, 255, 255, 0.1); /* opcional, ligero fondo */
}
/* 1.6. Contenedor del switcher */
.language-switcher {
  position: relative;
  margin-left: var(--gap);
}
/* 1.6.1. Botón que muestra la bandera actual */
.language-switcher__current {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-block;
}
.language-switcher__current img {
  display: block;
  transition: transform var(--transition);
}
.language-switcher__current:hover img {
  transform: scale(1.1);
}
/* 1.6.2. Dropdown de opciones */
.language-switcher__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  border-radius: var(--radius);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  display: none; /* oculto por defecto */
  z-index: 1001;
}
.language-switcher__dropdown.open {
  display: block;
}
/* 1.6.3 Cada opción de idioma */
.language-switcher__option {
  padding: 0.25rem 0.75rem;
  cursor: pointer;
}
.language-switcher__option img {
  display: block;
  transition: transform var(--transition);
}
.language-switcher__option:hover img {
  transform: scale(1.1);
}
/* 1.7. Logo en el Navbar */
.navbar__logo {
  display: block; /* elimina espacio indeseado debajo de la imagen */
  height: 100px; /* altura fija adecuada para el navbar */
  width: auto; /* ancho proporcional */
  max-height: 100%; /* para no salirse si cambias el navbar */
  margin-right: var(--gap); /* separa el logo del resto de enlaces */
}
/* Ajuste para móvil */
@media (max-width: 768px) {
  .navbar__logo {
    height: 40px; /* un poco más pequeño en pantallas estrechas */
  }
}

/* 2. HERO */
/* ─── Hero “Under Construction” ─── */
.hero {
  position: relative;
  height: 80vh;
  background: url("../assets/underconstruction2.png") center/cover no-repeat
    fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__content {
  position: relative;
  text-align: center;
  color: #fff;
  padding: 0 1rem;
}
.hero__content h1 {
  font-family: "GameBubble", sans-serif;
  font-size: clamp(2rem, 6vw, 3rem);
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.hero__content p {
  font-family: "Share Tech", sans-serif;
  font-size: 2rem;
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.hero__content .btn {
  padding: 0.75rem 2rem;
  background: var(--color-secondary);
  color: #333;
  border-radius: var(--radius);
  font-weight: var(--fw-bold);
  transition: background var(--transition), transform var(--transition);
}
.hero__content .btn:hover {
  background: #fff;
  transform: scale(1.05);
}

/* 3. ABOUT US */
/* 3.1. About Section (“Quiénes somos”)
.about {
  background: rgba(0, 0, 0, 0.4); 
  ligero overlay oscuro
  color: #fff;
  padding: 4rem 0;
}
.about__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--gap);
}
.about__image img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.about__content h2 {
  font-family: 'Starbim', sans-serif;
  font-size: 2.25rem;
  color: var(--color-secondary);
  margin-bottom: 1rem;
}
.about__content p {
  font-family: 'Share Tech', sans-serif;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  line-height: 1.5;
  opacity: 0.9;
}
3.2. Responsive: apila en móvil
@media (max-width: 768px) {
  .about__container {
    grid-template-columns: 1fr;
  }
  .about__content {
    text-align: center;
  }
} */

/* ─── Sección “Quiénes somos” revisada ─── */
#quienes-somos {
  padding-top: 5rem; /* espacio extra sobre el hero */
}

.about__slogan {
  font-family: "GameBubble", sans-serif;
  font-size: clamp(2rem, 6vw, 3rem);
  color: var(--color-secondary);
  text-align: center;
  margin: 4rem auto 3rem;
  padding: 0 1rem;
  text-transform: uppercase;
}

.about__text {
  font-family: "Share Tech", sans-serif;
  font-size: 1.6rem;
  max-width: 1200px;
  margin: 0 auto 3rem;
  text-align: center;
}
.about__text p {
  margin-bottom: 1rem;
  line-height: 1.6;
  opacity: 0.9;
}

/* Contenedor del equipo */
/* .team__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding-bottom: 4rem;
}
.team__member {
  background: rgba(0, 0, 0, 0.4);
  padding: 2rem 1rem;
  border-radius: var(--radius);
  text-align: center;
}
.team__member img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.team__member h3 {
  font-family: "Starbim", sans-serif;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}
.team__member p {
  font-family: "Share Tech", sans-serif;
  font-size: 1.3em;
  line-height: 1.5;
  opacity: 0.9;
} */

/* ─── Equipo Miniverso (About Us) ─── */
.team__container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.team__member {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform var(--transition), background var(--transition);
}

/* .team__member:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.2);
} */

.team__avatar {
  width: 200px;
  height: auto;
  border-radius: 20%;
  object-fit: cover;
  /* Centrar horizontal y bajar verticalmente al 60% */
  object-position: 25% 25%;
  margin-bottom: 1rem;
  border: 3px solid;
  border-color: #999b9b;
}

.team__name {
  font-family: "Share Tech", sans-serif;
  font-size: 2rem;
  margin-bottom: 0.25rem;
  color: #fff;
}

.team__role {
  font-family: "GameBubble", sans-serif;
  font-size: 1.6rem;
  /* opacity: 0.8; */
  margin-bottom: 0.75rem;
  color: #fff;
  text-transform: uppercase;
}

.team__slogan {
  font-family: "Share Tech", sans-serif;
  font-size: 1.2rem;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.team__bio {
  font-family: "Share Tech", sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
  /* opacity: 0.9; */
  color: #fff;
  width: 80%;
}

/* Responsive: apilar en móvil */
@media (max-width: 768px) {
  .team__container {
    grid-template-columns: 1fr;
  }
}

/* 4. SERVICES */
/* 4.1. “Nuestros Servicios” */
.services {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  padding: 4rem 0;
}
.section__title {
  text-align: center;
  font-family: "GameBubble", sans-serif;
  font-size: clamp(2rem, 5vw, 2.5rem);
  color: var(--color-secondary);
  margin-bottom: 2rem;
  text-transform: uppercase;
}
.services__container {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.services__card {
  font-family: "Share Tech", sans-serif;
  background: rgba(255, 255, 255, 0.1);
  padding: 2rem 1.5rem;
  border-radius: var(--radius);
  text-align: center;
  transition: transform var(--transition), background var(--transition);
}
.services__card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.2);
}
.services__icon {
  font-size: 2.8rem;
  margin-bottom: 1rem;
}
.services__card h3 {
  margin-bottom: 0.75rem;
  font-size: 1.7rem;
  color: var(--color-primary);
}
.services__card p {
  font-size: 1.2rem;
  line-height: 1.4;
  opacity: 0.9;
}

/* ─── CTA “Ver Extras” en Servicios ─── */
.services__extra {
  text-align: center;
  margin: 2rem 0 2rem; /* espacio arriba y abajo */
}

.services__extra-text {
  font-family: "Share Tech", sans-serif;
  font-size: 1.5rem;
  color: #fff;
  opacity: 0.9;
  margin: 4rem auto;
  max-width: 600px;
}

/* Reutilizamos estilos de .contact__btn para el botón */
.services__extra .contact__btn {
  font-family: "Share Tech", sans-serif;
  margin: 0 auto; /* centrar */
  padding: 1rem 2.5rem;
  font-size: 1.3rem;
  text-decoration: none;
  transform: scale(1.25);
}

/* 5. EXTRAS */
/* Botón “Volver” en Extras */
.extras__back {
  font-family: "Share Tech", sans-serif;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(45deg, #1e3a8a 0%, #ec4899 100%);
  color: #fff;
  border: none;
  border-radius: 1.5rem;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  margin-bottom: 1.5rem; /* separa del título */
  display: inline-block;
}

/* Hover igual que el resto */
.extras__back:hover {
  background: linear-gradient(45deg, #ffd700 0%, #b8860b 100%);
  transform: translateY(-2px);
  color: black;
}

/* Para que no quede oculto tras el navbar al hacer scroll o volver */
html {
  scroll-padding-top: 80px; /* ajusta a la altura de tu navbar */
}

/* ─── Extras ─── */
.extras {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  padding: 4rem 0;
}
.extras .section__title {
  text-align: center;
  font-family: "GameBubble", sans-serif;
  font-size: clamp(2rem, 5vw, 2.5rem);
  color: var(--color-secondary);
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.extras__intro {
  text-align: center;
  font-family: "Share Tech", sans-serif;
  font-size: 1.25rem;
  opacity: 0.9;
  margin-bottom: 2rem;
}
.extras__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
}
.extras__card {
  background: rgba(255, 255, 255, 0.1);
  padding: 2rem 1.5rem;
  border-radius: var(--radius);
  text-align: center;
  transition: transform var(--transition), background var(--transition);
  display: flex;
  flex-direction: column;
}
.extras__card:hover {
  /* transform: translateY(-5px); */
  background: rgba(255, 255, 255, 0.2);
}
.extras__icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.extras__card h2 {
  font-family: "GameBubble", sans-serif;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  color: var(--color-primary);
  text-transform: uppercase;
}
.extras__card p {
  font-family: "Share Tech", sans-serif;
  font-size: 0.95rem;
  line-height: 1.4;
  opacity: 0.9;
}
/* ─── Botones “Ver opciones” en Extras ─── */
.extras__btn-more {
  display: inline-block;
  font-family: "Share Tech", sans-serif;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(45deg, #1e3a8a 0%, #ec4899 100%);
  color: #fff;
  border: none;
  border-radius: 1.5rem;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  margin-top: auto;
  text-align: center;
}

.extras__btn-more:hover {
  background: linear-gradient(45deg, #ffd700 0%, #b8860b 100%);
  transform: translateY(-2px);
  color: black;
}

/* ─── Modal de Extras ─── */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.modal.hidden {
  display: none;
}
.modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}
.modal__content {
  position: relative;
  background: #fff;
  color: #333;
  padding: 2rem;
  border-radius: var(--radius);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}
.modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}
.modal__content h2 {
  font-family: "GameBubble", sans-serif;
  margin-top: 0;
  color: var(--color-secondary);
  text-transform: uppercase;
}
.modal__content ul {
  font-family: "Share Tech", sans-serif;
  list-style: disc inside;
  margin-top: 1rem;
  padding-left: 1rem;
}

/* 6. GALERIA */
/* Carrusel */
.carousel {
  position: relative;
  overflow: hidden;
}
.carousel__inner {
  display: flex;
  transition: transform 0.4s ease;
}
.carousel__item {
  min-width: 100%;
  user-select: none;
}
.carousel__item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Botones */
.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.carousel__btn:hover {
  background: rgba(0, 0, 0, 0.8);
}
.carousel__btn.prev {
  left: 1rem;
}
.carousel__btn.next {
  right: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .carousel__btn {
    width: 2rem;
    height: 2rem;
    font-size: 1.25rem;
  }
}

/* 7. CONTACT */
/* ─── Sección “Contacto” — CSS Completo Ajustado ─── */
.contact {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 4rem 0;
}

/* Título centrado */
.contact__title {
  text-align: center;
  font-family: "GameBubble", sans-serif;
  font-size: clamp(2rem, 6vw, 3rem);
  color: var(--color-secondary);
  margin-bottom: 3rem;
  text-transform: uppercase;
}

/* Contenedor principal: dos columnas + una fila para el mapa */
.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "channels form"
    "mapcont  mapcont";
  /* gap: columna-gap fila-gap */
  gap: var(--gap) calc(var(--gap) * 3);
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* — Canales (izquierda, fila 1) — */
.contact__channels {
  grid-area: channels;
}
.contact__details {
  font-family: "Share Tech", sans-serif;
  font-size: 1.3rem;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem; /* espacio reducido */
}
.contact__details li {
  display: flex;
  align-items: center;
}
.contact__details .icon {
  margin-right: 0.5rem;
  font-size: 1.25rem;
}
/* Igualar tamaño de imagen de WhatsApp al resto de iconos */
.contact__details li img {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
  margin-right: 0.75rem; /* igual que .icon */
  display: flex;
  align-items: center;
  margin-top: 2rem;
  margin-left: 5rem;
}

.contact__details a {
  text-decoration: none;
  color: #fff;
  transition: color var(--transition);
}
.contact__details a:hover {
  color: var(--color-secondary);
}

/* — Formulario (derecha, fila 1) — */
.contact__form {
  grid-area: form;
  background: none;
  box-shadow: none;
  /* ocupa todo su hueco */
  margin: 0;
  padding: var(--gap);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  font-family: "Share Tech", sans-serif;
}
.input-group {
  position: relative;
}
.input-group input,
.input-group textarea {
  width: 100%;
  padding: 1.5rem 1rem 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: calc(var(--radius) * 1.2);
  color: #fff;
  font-size: 1rem;
  outline: none;
  transition: border-color var(--transition);
}
.input-group input:focus,
.input-group textarea:focus {
  border-color: var(--color-secondary);
}
.input-group label {
  position: absolute;
  top: 1rem;
  left: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  pointer-events: none;
  transition: transform var(--transition), font-size var(--transition),
    color var(--transition);
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label,
.input-group textarea:focus + label,
.input-group textarea:not(:placeholder-shown) + label {
  transform: translateY(-1.75rem);
  font-size: 0.9rem;
  color: var(--color-secondary);
}
.contact__btn {
  align-self: center;
  padding: 1rem 2.5rem;
  font-family: "Share Tech", sans-serif;
  font-size: 1.3rem;
  background: linear-gradient(45deg, #1e3a8a 0%, #ec4899 100%);
  color: #fff;
  border: none;
  border-radius: 1.5rem;
  cursor: pointer;
  margin-top: 1rem;
  transition: background var(--transition), transform var(--transition);
}
.contact__btn:hover {
  background: linear-gradient(45deg, #ffd700 0%, #b8860b 100%);
  color: black;
  transform: scale(1.05);
}

/* Mensaje de agradecimiento */
.contact__thanks {
  text-align: center;
  font-family: "Share Tech", sans-serif;
  font-size: 1.5rem;
  color: var(--color-secondary);
  margin-top: var(--gap);
}

/* — Mapa y dirección (fila 2) — */
.contact__map-container {
  grid-area: mapcont;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: center; /* centra dirección/mapa en altura */
  width: 100%;
  max-width: 800px;
  margin: 3rem auto; /* centrado horizontal */
  padding: 0 1rem;
}
.contact__address {
  display: flex;
  align-items: center; /* centro vertical */
  font-family: "Share Tech", sans-serif;
  font-size: 1.5rem;
  color: #fff;
  gap: 0.5rem;
}
.contact__address .icon {
  font-size: 1.5rem;
}
.contact__map {
  width: 100%;
  height: 300px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.contact__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* — Responsive — */
@media (max-width: 768px) {
  .contact__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "channels"
      "form"
      "mapcont";
  }
  .contact__form {
    padding: 1rem;
  }
  .contact__map-container {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  .contact__map {
    height: 200px;
  }
}

/* 8. FOOTER */
.footer {
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 3rem 0 2rem;
}

/* Contenedor de columnas */
.footer__container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
}

/* Títulos de columna */
.footer__col h3 {
  font-family: "GameBubble", sans-serif;
  font-size: 1.5rem;
  color: var(--color-secondary);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

/* Contacto y enlaces */
.footer__contact,
.footer__links {
  font-family: "Share Tech", sans-serif;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__contact li,
.footer__links li {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}
.footer__contact .icon,
.footer__links a {
  margin-right: 0.5rem;
}
.footer__contact a,
.footer__links a {
  color: #fff;
  text-decoration: none;
  transition: color var(--transition);
}
.footer__contact a:hover,
.footer__links a:hover {
  color: var(--color-secondary);
}

/* Redes sociales */
.footer__social {
  display: flex;
  gap: 1rem;
}
.footer__social .social__link img {
  width: 2rem;
  height: auto;
  object-fit: contain;
  transition: transform var(--transition);
}
.footer__social .social__link:hover img {
  transform: scale(1.1);
}

/* Pie de página inferior */
.footer__bottom {
  font-family: "Share Tech", sans-serif;
  margin-top: 2rem;
  text-align: center;
  font-size: 0.875rem;
  opacity: 0.7;
}

/* Responsive */
@media (max-width: 768px) {
  .footer__container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer__social {
    justify-content: center;
  }
}

/* z. DISPOSITIVOS MOVILES */
/* z.1. Toggle para móvil */
.navbar__toggle {
  display: none;
  margin-left: var(--gap);
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

/* z.2. Responsive: móvil */
@media (max-width: 768px) {
  .navbar__links {
    position: absolute;
    top: 100%;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    flex-direction: column;
    width: 200px;
    padding: 1rem;
    transform: translateX(100%);
    transition: transform var(--transition);
  }
  .navbar__links--open {
    transform: translateX(0);
  }
  .navbar__toggle {
    display: block;
  }
}