/* Armería 3T Shooting Club — réplica del sitio de Builderall en HTML/CSS estático */
:root {
  --amarillo: #fff808;
  --dorado: #f0c529;
  --rojo: #e52631;
  --negro: #020202;
  --carbon: #232121;
  --gris-claro: #efeded;
  --texto: #212529;
  --blanco: #fff;
  --ancho: 1100px;
  --fuente: "Mulish", "Muli", sans-serif;
  --fuente-titulo: "Lato", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--texto);
  background: var(--blanco);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; }
[id] { scroll-margin-top: 120px; }

.contenedor { width: min(var(--ancho), 100% - 32px); margin-inline: auto; }
.centro { text-align: center; }
.titulo { font-family: var(--fuente-titulo); font-weight: 900; line-height: 1.2; }
.titulo--xl { font-size: clamp(30px, 3.3vw, 40px); }
.titulo--lg { font-size: clamp(24px, 2.3vw, 30px); }
.titulo--md { font-size: 20px; }
.check::before {
  content: "";
  display: inline-block;
  width: .9em;
  height: .9em;
  margin-right: 6px;
  vertical-align: -1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.boton {
  display: inline-block;
  padding: 8px 52px;
  border-radius: 6px;
  background: var(--rojo);
  color: #fff;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 20px;
  text-decoration: none;
  box-shadow: 0 0 6px rgba(0, 0, 0, .45);
  transition: transform .2s, filter .2s;
}
.boton:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* ---------- Encabezado ---------- */
.encabezado { position: sticky; top: 0; z-index: 50; background: #fff; }
.encabezado__barra { display: flex; align-items: center; justify-content: space-between; height: 112px; width: min(1110px, 100% - 32px); }
.encabezado__logo { width: 107px; }
.menu { display: flex; gap: 0; list-style: none; padding: 0; margin: 0; }
.menu a {
  display: block;
  padding: 12px 39px;
  font-weight: 600;
  font-size: 18px;
  color: #111;
  text-decoration: none;
}
.menu a:hover, .menu a[aria-current="page"] { background: #f5f5f5; }
.menu-boton { display: none; width: 56px; height: 56px; background: #000; color: #fff; border: 0; cursor: pointer; }
.menu-boton svg { width: 22px; height: 22px; }

/* ---------- Héroe de inicio ---------- */
.heroe-inicio {
  position: relative;
  margin: 0 43px;
  aspect-ratio: 1354 / 522;
  background: #222 url("../img/hero-inicio.webp") center / cover no-repeat;
  color: #fff;
}
.heroe-inicio__texto { position: absolute; left: 11%; top: 23%; width: 64%; text-align: center; }
.heroe-inicio h1 { font-family: var(--fuente-titulo); font-weight: 900; color: var(--amarillo); font-size: clamp(22px, 3.9vw, 56px); line-height: 1.1; text-align: left; }
.heroe-inicio h2 { font-family: var(--fuente-titulo); font-weight: 900; font-size: clamp(16px, 3vw, 43px); line-height: 1.1; text-align: left; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.heroe-inicio p { margin: 14px 0 0; text-align: left; }
.heroe-inicio p span { background: #fff; color: #222; font-size: clamp(12px, 1.45vw, 21px); padding: 0 2px; }
.heroe-inicio .boton { margin-top: clamp(16px, 7%, 90px); }

/* ---------- Carrusel ---------- */
.carrusel { position: relative; width: min(947px, 100% - 32px); margin: 48px auto 0; }
.carrusel__ventana { overflow: hidden; aspect-ratio: 947 / 568; background: #fff; }
.carrusel__pista { display: flex; height: 100%; transition: transform .6s ease; }
.diapositiva { position: relative; flex: 0 0 100%; height: 100%; }
.diapositiva img { width: 100%; height: 100%; object-fit: contain; }
.diapositiva figcaption {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(560px, 92%);
  padding: 12px 18px;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  text-align: center;
  border-radius: 6px;
}
.diapositiva figcaption strong { display: block; font-family: var(--fuente-titulo); font-size: 22px; }
.carrusel__flecha {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  border: 0;
  background: #e65050;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.carrusel__flecha--prev { left: -16px; }
.carrusel__flecha--next { right: -16px; }
.bajar { display: block; width: 26px; margin: 60px auto 16px; color: #222; }

/* ---------- Sobre nosotros ---------- */
.sobre { display: grid; grid-template-columns: 1fr 497px; gap: 40px; padding-bottom: 56px; }
.sobre h2 { margin-bottom: 26px; }
.sobre p { margin: 0 0 30px 20px; max-width: 320px; font-size: 14.5px; line-height: 1.37; color: #333; }
.mosaico { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 213px; gap: 5px; margin-top: 26px; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; }
.mosaico img:first-child { grid-column: span 2; }

/* ---------- Estadísticas ---------- */
.cifras { background: var(--carbon); color: #fff; padding: 34px 0 30px; text-align: center; }
.cifras p { margin: 4px 0 0; font-size: 14px; }
.cifras__grid { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 800px; margin: 52px auto 0; gap: 20px; }
.cifra strong { display: block; font-family: var(--fuente-titulo); font-weight: 900; font-size: clamp(40px, 4vw, 58px); color: var(--amarillo); line-height: 1; }
.cifra span { display: block; margin-top: 18px; font-weight: 800; font-size: 17px; line-height: 1.5; color: #ddd; }

/* ---------- Servicios (tarjetas) ---------- */
.servicios-home { padding: 28px 0 36px; }
.servicios-home .titulo { margin-bottom: 30px; }
.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1100px; margin-inline: auto; }
.tarjetas a {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  transition: transform .35s ease, box-shadow .35s ease;
}
.tarjetas img { width: 100%; aspect-ratio: 354 / 266; object-fit: cover; transition: transform .6s ease; }
.tarjetas a:hover, .tarjetas a:focus-visible { transform: translateY(-8px); box-shadow: 0 16px 30px rgba(0, 0, 0, .28); }
.tarjetas a:hover img, .tarjetas a:focus-visible img { transform: scale(1.08); }
/* Entrada escalonada al aparecer en pantalla (la clase .animar la pone main.js) */
.tarjetas.animar a { opacity: 0; transform: translateY(40px) scale(.96); }
.tarjetas.animar.visible a {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .3, 1.2), box-shadow .35s ease;
  transition-delay: calc(var(--i, 0) * 120ms);
}
.tarjetas.animar.visible a:hover, .tarjetas.animar.visible a:focus-visible { transform: translateY(-8px); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .tarjetas a, .tarjetas img, .tarjetas.animar a { transition: none !important; transform: none !important; opacity: 1 !important; }
}
.servicios-home .boton { margin-top: 26px; }

/* ---------- Todo en un solo lugar ---------- */
.lugar { background: var(--gris-claro); padding: 48px 0 62px; }
.lugar__grid { display: grid; grid-template-columns: 490px 1fr; gap: 54px; align-items: start; }
.lugar__grid > img { width: 490px; aspect-ratio: 490 / 690; object-fit: cover; }
.lugar h2 { margin: 36px 0 34px; max-width: 460px; }
.lugar h3 { font-family: var(--fuente-titulo); font-weight: 900; font-size: 20px; }
.lugar p { margin: 2px 0 14px 4px; font-size: 14px; max-width: 320px; line-height: 1.43; }

/* ---------- Tienda (categorías) ---------- */
.tienda-home { padding: 50px 0 70px; }
.tienda-home .titulo { max-width: 560px; margin: 0 auto 46px; }
.categorias { display: grid; grid-template-columns: repeat(4, 175px); justify-content: center; gap: 58px; }
.categorias a { text-decoration: none; text-align: center; font-weight: 800; font-size: 15px; }
.categorias img { width: 175px; height: 175px; object-fit: cover; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); margin-bottom: 26px; border-radius: 4px; }

.banner { display: block; width: 100%; height: auto; }
.mapa { padding: 70px 0; }
.mapa iframe { display: block; width: min(626px, 100%); height: 465px; margin-inline: auto; border: 1px dashed #333; padding: 8px; background: #fff; }

/* ---------- Pie de página ---------- */
.pie { background: var(--negro); color: #fff; padding: 50px 0 10px; }
.pie__grid { display: grid; grid-template-columns: 1.4fr 1.3fr .8fr 1fr; gap: 24px; width: min(1050px, 100% - 32px); margin-inline: auto; }
.pie__logo { width: 225px; margin-inline: auto; }
.pie h3 { color: var(--dorado); font-family: var(--fuente); font-weight: 800; font-size: 16px; margin: 14px 0 22px; }
.pie p { margin: 0 0 22px; font-size: 14px; }
.pie ul { list-style: none; padding: 0 0 0 32px; margin: -8px 0 0; }
.pie li { margin-bottom: 18px; }
.pie a { text-decoration: none; font-weight: 700; font-size: 15px; }
.pie a:hover { color: var(--dorado); }
.pie .politicas ul { padding-left: 10px; margin-top: 0; }
.pie .politicas li { margin-bottom: 8px; }
.pie__redes { display: flex; gap: 2px; margin: 26px 0 0 50px; }
.pie__redes img { width: 54px; height: 54px; }
.pie .pie__copy { width: min(1050px, 100% - 32px); margin: 24px auto 0; padding: 26px 0 22px; border-top: 2px dotted #fff; text-align: center; font-size: 14px; }

/* ---------- Botón WhatsApp ---------- */
.whatsapp { position: fixed; right: 40px; bottom: 34px; z-index: 60; display: flex; align-items: center; gap: 14px; text-decoration: none; }
.whatsapp img { width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.whatsapp span { background: #fff; color: #111; font-family: Arial, sans-serif; font-size: 14px; padding: 8px 10px; border-radius: 4px; box-shadow: 0 1px 6px rgba(0, 0, 0, .25); opacity: 0; transform: translateX(8px); transition: .25s; }
.whatsapp:hover span, .whatsapp:focus span { opacity: 1; transform: none; }

/* ---------- Página Servicios ---------- */
.heroe-img { margin: 0 29px; position: relative; aspect-ratio: 1382 / 432; background: #333 center / cover no-repeat; color: #fff; }
.heroe-img--servicios { background-image: url("../img/hero-servicios.webp"); }
.heroe-img h1 { position: absolute; left: 11%; top: 22%; font-family: var(--fuente); font-weight: 900; font-size: clamp(26px, 3.6vw, 52px); text-transform: uppercase; }
.servicio { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 44px 0 10px; }
.servicio--inv > :first-child { order: 2; }
.servicio h2 { font-family: var(--fuente-titulo); font-weight: 900; font-size: 20px; margin-bottom: 22px; }
.servicio ul { padding-left: 32px; margin: 0 0 24px; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.5; }
.servicio p { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.5; }
.servicio img { width: 345px; margin-inline: auto; }
.servicio .boton { margin: 10px 0 0 175px; }
.collage { width: 465px; margin: 60px auto 50px; }

/* ---------- Página Tienda ---------- */
.heroe-tienda { margin: 0 43px; }
.productos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 76px 18px; width: min(1112px, 100% - 32px); margin: 44px auto 60px; }
.producto { background: #fff; box-shadow: 0 0 18px 6px rgba(70, 50, 50, .55); padding: 18px 14px 20px; min-height: 297px; display: flex; flex-direction: column; }
.producto img { width: 191px; height: 150px; object-fit: contain; margin: 10px auto 18px; }
.producto h2 { font-family: var(--fuente-titulo); font-weight: 900; font-size: 24px; line-height: 1.2; color: #222; }
.producto p { margin: 14px 0 0 3px; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.5; }
.marcas { position: relative; width: min(1340px, 100%); margin: 0 auto; }
.marcas h2 { position: absolute; top: 5%; left: 0; right: 0; text-align: center; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 800; font-size: clamp(20px, 3vw, 40px); color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }

/* ---------- Página Contacto ---------- */
.heroe-contacto { position: relative; aspect-ratio: 1440 / 400; background: #333 url("../img/hero-contacto.webp") center 47% / cover no-repeat; }
.heroe-contacto h1 { position: absolute; left: 0; right: 0; top: 29%; text-align: center; color: #fff; font-family: var(--fuente); font-weight: 700; font-size: clamp(18px, 1.9vw, 26px); }
.datos-contacto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; width: min(900px, 100% - 32px); margin: 64px auto 40px; }
.datos-contacto h2 { font-family: var(--fuente-titulo); font-weight: 900; font-size: 20px; display: flex; align-items: center; gap: 8px; }
.datos-contacto h2 svg { width: 18px; height: 18px; }
.datos-contacto p { margin: 6px 0 0; font-size: 14px; }
.datos-contacto a { text-decoration: none; }
.redes-contacto h2 { font-family: var(--fuente-titulo); font-weight: 900; font-size: 20px; margin-bottom: 18px; }
.redes-contacto div { display: flex; justify-content: center; gap: 8px; }
.redes-contacto img { width: 70px; }

/* ---------- Páginas legales ---------- */
.legal { padding: 50px 0 70px; color: #3b3950; }
.legal .contenedor { max-width: 960px; }
.legal h1 { font-size: 30px; font-weight: 800; margin-bottom: 26px; }
.legal h2 { font-size: 19px; font-weight: 800; margin: 26px 0 10px; }
.legal p { font-size: 15.5px; line-height: 1.7; }
.legal .volver { display: inline-block; margin-bottom: 26px; font-weight: 700; color: var(--rojo); text-decoration: none; }

/* ---------- Aviso de cookies ---------- */
.cookies { position: fixed; right: 30px; bottom: 30px; z-index: 100; width: min(600px, 100% - 32px); padding: 18px 20px 14px; background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .2); font-family: Montserrat, Arial, sans-serif; font-size: 16px; color: #222; }
.cookies[hidden] { display: none; }
.cookies p { margin: 0 0 18px; }
.cookies p:first-child { margin-bottom: 8px; }
.cookies a { color: #3352ff; text-decoration: none; font-size: 13px; }
.cookies__acciones { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.cookies button { border: 0; padding: 11px 8px; font: inherit; font-size: 13px; cursor: pointer; background: #bdbdc2; color: #222; }
.cookies button.aceptar { margin-left: auto; background: #4a4a4a; color: #fff; padding: 18px 8px; font-size: 15px; }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .menu a { padding: 12px 18px; }
  .lugar__grid { grid-template-columns: 1fr 1fr; }
  .lugar__grid > img { width: 100%; }
  .categorias { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .categorias img { width: 100%; height: auto; aspect-ratio: 1; }
}

@media (max-width: 900px) {
  .encabezado__barra { height: auto; padding: 10px 0; flex-wrap: wrap; }
  .encabezado__logo { width: 80px; }
  .menu-boton { display: grid; place-items: center; }
  .encabezado nav { width: 100%; }
  .menu { display: none; flex-direction: column; padding: 10px 0; }
  .menu.abierto { display: flex; }
  .menu a { padding: 14px 8px; border-top: 1px solid #eee; }

  .heroe-inicio, .heroe-tienda, .heroe-img { margin: 0; }
  .heroe-inicio { aspect-ratio: auto; min-height: 320px; padding: 30px 16px; background-position: 70% center; }
  .heroe-inicio__texto { position: static; width: 100%; }
  .heroe-inicio__texto > * { text-align: center !important; }
  .carrusel__flecha--prev { left: 4px; }
  .carrusel__flecha--next { right: 4px; }

  .sobre, .lugar__grid, .servicio, .pie__grid { grid-template-columns: 1fr; }
  .sobre p { max-width: none; margin-left: 0; }
  .cifras__grid { grid-template-columns: 1fr 1fr; gap: 30px 10px; }
  .tarjetas { grid-template-columns: 1fr 1fr; }
  .categorias { grid-template-columns: 1fr 1fr; }
  .servicio--inv > :first-child { order: 0; }
  .servicio img { width: min(300px, 100%); }
  .servicio .boton { margin-left: 0; }
  .collage { width: 100%; }
  .productos { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
  .producto h2 { font-size: 19px; }
  .producto img { width: 100%; }
  .datos-contacto { grid-template-columns: 1fr; text-align: left; }
  .pie__grid { text-align: center; }
  .pie ul, .pie .politicas ul { padding: 0; }
  .pie__redes { justify-content: center; margin-left: 0; }
  .whatsapp { right: 16px; bottom: 16px; }
  .whatsapp img { width: 58px; height: 58px; }
}

@media (max-width: 520px) {
  .tarjetas, .productos { grid-template-columns: 1fr; }
  .cookies { right: 16px; bottom: 16px; }
  .cookies button.aceptar { margin-left: 0; }
}