/* Alfest Sport — BOW S.R.L. | Sitio institucional */

*,*::before,*::after{box-sizing:border-box}

:root{
  --rojo:#e60000;
  --rojo-osc:#b30000;
  --tinta:#141414;
  --tinta-2:#3d3d3d;
  --gris:#6e6e6e;
  --gris-cl:#9a9a9a;
  --linea:#e4e4e4;
  --fondo:#ffffff;
  --fondo-2:#f7f7f8;
  --fondo-3:#111214;
  --radio:12px;
  --ancho:1140px;
  --fuente:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

html{scroll-behavior:smooth; scroll-padding-top:76px}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:var(--fuente); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--rojo); text-decoration:none}
a:hover{text-decoration:underline}

.envoltorio{width:100%; max-width:var(--ancho); margin:0 auto; padding:0 24px}

/* ---------- Tipografía ---------- */
h1,h2,h3,h4{margin:0 0 .5em; line-height:1.2; letter-spacing:-.02em; font-weight:700}
h1{font-size:clamp(2rem,5.2vw,3.3rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.35rem)}
h3{font-size:clamp(1.15rem,2.2vw,1.4rem)}
p{margin:0 0 1.1em}
.plomo{color:var(--gris); font-size:1.09rem; max-width:62ch}

.rotulo{
  display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rojo); margin-bottom:14px;
}
.regla{width:48px; height:3px; background:var(--rojo); border:0; border-radius:2px; margin:0 0 26px}

/* ---------- Navegación ---------- */
.barra{
  position:sticky; top:0; z-index:50; background:rgba(17,18,20,.96);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid #2a2d33;
}
.barra .envoltorio{display:flex; align-items:center; gap:24px; height:74px}
.barra img{width:auto; height:54px}
.marca-sitio{display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0}
.marca-sitio:hover{text-decoration:none}
.marca-sitio span{
  font-size:.72rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:#9aa0aa; white-space:nowrap; padding-left:11px;
  border-left:1px solid #34383f; line-height:1.3;
}
/* Se oculta solo en el tramo donde competiría con el menú por el ancho */
@media (min-width:821px) and (max-width:1179px){ .marca-sitio span{display:none} }
.nav{display:flex; gap:26px; margin-left:auto; align-items:center}
.nav a{
  color:#ccd1d9; font-size:.93rem; font-weight:500; text-decoration:none;
  white-space:nowrap; padding:6px 0; border-bottom:2px solid transparent;
}
.nav a:hover{color:#fff; border-bottom-color:var(--rojo)}
.nav .cta{
  background:var(--rojo); color:#fff; padding:9px 18px; border-radius:8px;
  border:0; font-weight:600;
}
.nav .cta:hover{background:var(--rojo-osc); color:#fff}
.menu-btn{display:none; margin-left:auto; background:none; border:1px solid #3a3e46;
  color:#ccd1d9; border-radius:8px; padding:8px 12px; font-size:1.1rem; cursor:pointer}

/* ---------- WhatsApp ---------- */
.whatsapp{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:58px; height:58px; border-radius:50%;
  background:#25d366; color:#fff; display:grid; place-items:center;
  box-shadow:0 4px 14px rgba(0,0,0,.22); transition:transform .15s, background .15s;
}
.whatsapp:hover{background:#1da851; transform:scale(1.06); text-decoration:none}
.whatsapp:focus-visible{outline:3px solid #0a7d34; outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .whatsapp{transition:none} }
@media (max-width:480px){ .whatsapp{right:16px; bottom:16px; width:52px; height:52px} }

/* ---------- Secciones ---------- */
section{padding:88px 0; border-bottom:1px solid var(--linea)}
section.oscuro{background:var(--fondo-3); color:#fff; border-bottom:0}
section.gris{background:var(--fondo-2)}
section.oscuro h2{color:#fff}
section.oscuro .plomo{color:#a8adb8}

/* ---------- Portada ---------- */
.portada{padding:96px 0 80px; border-bottom:1px solid var(--linea)}
.portada h1{margin-bottom:.35em}
.portada .plomo{font-size:1.2rem; max-width:56ch}
.acciones{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
.boton{
  display:inline-block; padding:14px 26px; border-radius:9px; font-weight:600;
  font-size:1rem; text-decoration:none; border:2px solid var(--rojo); transition:.15s;
}
.boton.lleno{background:var(--rojo); color:#fff}
.boton.lleno:hover{background:var(--rojo-osc); border-color:var(--rojo-osc); text-decoration:none}
.boton.vacio{color:var(--rojo); background:transparent}
.boton.vacio:hover{background:var(--rojo); color:#fff; text-decoration:none}

/* ---------- Cifras ---------- */
.cifras{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px; background:var(--linea); border:1px solid var(--linea);
  border-radius:var(--radio); overflow:hidden; margin-top:56px;
}
.cifra{background:#fff; padding:26px 22px; text-align:center}
.cifra b{display:block; font-size:2.1rem; font-weight:700; color:var(--rojo); line-height:1.1}
/* El "+" va más chico y elevado para que no se lea como un dígito más */
.cifra b i{font-style:normal; font-size:.5em; font-weight:600; vertical-align:.55em; margin-right:2px; opacity:.7}
.cifra span{display:block; font-size:.86rem; color:var(--gris); margin-top:6px}
.cifra span strong{color:var(--tinta-2); font-weight:700}

/* ---------- Grillas ---------- */
.grilla{display:grid; gap:26px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g2par{grid-template-columns:repeat(auto-fit,minmax(440px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

.tarjeta{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:28px 26px;
}
.tarjeta h3{margin-bottom:.4em}
.tarjeta p{color:var(--gris); font-size:.96rem; margin:0}
.tarjeta.destaca{border-color:var(--rojo); box-shadow:0 0 0 1px var(--rojo)}
.tarjeta .stat{
  display:flex; align-items:baseline; gap:9px; margin:0 0 12px;
  padding-bottom:12px; border-bottom:1px solid var(--linea);
}
.tarjeta .stat b{font-size:2.2rem; font-weight:700; color:var(--rojo); line-height:1}
.tarjeta .stat span{font-size:.85rem; color:var(--gris)}

.tarjeta .num{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:8px; background:#fff0f0; color:var(--rojo); font-weight:700;
  font-size:.9rem; margin-bottom:14px;
}
section.oscuro .tarjeta{background:#1b1d21; border-color:#2a2d33}
section.oscuro .tarjeta p{color:#a8adb8}

/* ---------- Tablas ---------- */
.tabla-caja{overflow-x:auto; border:1px solid var(--linea); border-radius:var(--radio); background:#fff}
table{width:100%; border-collapse:collapse; font-size:.94rem; min-width:560px}
th{
  text-align:left; padding:14px 18px; background:var(--fondo-2); font-size:.76rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-2);
  border-bottom:1px solid var(--linea); white-space:nowrap; font-weight:700;
}
td{padding:14px 18px; border-bottom:1px solid var(--linea); vertical-align:top}
tr:last-child td{border-bottom:0}
td.cant{font-weight:700; color:var(--rojo); white-space:nowrap}
.si{color:#0a7d34; font-weight:600}
.no{color:var(--gris-cl)}

/* ---------- Hydrowick ---------- */
.destacado{
  background:linear-gradient(135deg,#141414 0%,#2a0000 100%); color:#fff;
  border-radius:var(--radio); padding:44px 40px; margin-bottom:40px;
}
.destacado h3{font-size:clamp(1.6rem,3.4vw,2.1rem); color:#fff; margin-bottom:.3em}
.destacado .marca{color:var(--rojo); font-weight:700}
.destacado p{color:#c9ccd3; max-width:60ch; margin-bottom:0}
.destacado .rotulo{color:#ff5c5c}
.juntos{white-space:nowrap}

/* ---------- Proceso ---------- */
.proceso{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin:36px 0 8px}
.paso{
  background:#1b1d21; border:1px solid #2a2d33; border-radius:10px;
  padding:20px 16px; text-align:center; position:relative;
}
.paso b{display:block; font-size:.95rem; color:#fff; margin-bottom:4px}
.paso span{font-size:.8rem; color:#8b909b}
.paso i{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  background:var(--rojo); color:#fff; font-style:normal; font-size:.7rem; font-weight:700;
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
}

/* ---------- Compilado de productos ---------- */
.compilado{margin:0}
.compilado img{width:100%; height:auto; border-radius:var(--radio)}

/* ---------- Camisetas oficiales ---------- */
/* Fotos de archivo, de baja resolución: van chicas y en una sola hilera */
.oficiales{
  display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:10px;
}
.oficial{
  margin:0; background:#fff; border:1px solid var(--linea); border-radius:8px;
  overflow:hidden;
}
.oficial img{width:100%; height:auto; display:block}
@media (max-width:900px){ .oficiales{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:480px){ .oficiales{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px} }

/* ---------- Marcas propias ---------- */
.marca-caja{
  display:flex; flex-wrap:wrap; align-items:center; gap:20px; justify-content:space-between;
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:26px 28px;
}
.marca-caja div{flex:1 1 300px}
.marca-caja h3{margin-bottom:.2em}
.marca-caja p{margin:0; color:var(--gris); font-size:.95rem}

/* ---------- Formulario ---------- */
form{display:grid; gap:16px}
/* Trampa antirrobots: fuera de pantalla, no oculta con display:none
   para que los robots que ignoran los estilos igual la completen */
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.campo{display:grid; gap:6px}
label{font-size:.86rem; font-weight:600; color:var(--tinta-2)}
input,select,textarea{
  font-family:inherit; font-size:.97rem; padding:12px 14px; border:1px solid var(--linea);
  border-radius:8px; background:#fff; color:var(--tinta); width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--rojo); outline-offset:-1px; border-color:var(--rojo)}
textarea{resize:vertical; min-height:110px}
.fila{display:grid; grid-template-columns:1fr 1fr; gap:16px}
button[type=submit]{
  background:var(--rojo); color:#fff; border:0; padding:14px 28px; border-radius:9px;
  font-size:1rem; font-weight:600; cursor:pointer; justify-self:start;
}
button[type=submit]:hover{background:var(--rojo-osc)}
.aviso{
  background:#fff8e6; border:1px solid #f0d999; border-radius:8px; padding:12px 16px;
  font-size:.88rem; color:#7a5c00; margin:0;
}

/* ---------- Contacto ---------- */
.datos-contacto{display:grid; gap:22px}
.dato b{display:block; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); margin-bottom:4px; font-weight:700}
.dato span,.dato a{font-size:1.05rem; color:var(--tinta)}

/* ---------- Pie ---------- */
footer{background:var(--fondo-3); color:#8b909b; padding:52px 0 32px; font-size:.9rem}
footer img{width:auto; height:76px; margin-bottom:18px}
footer a{color:#c9ccd3}
footer a:hover{color:#fff}
.pie-grilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:32px; margin-bottom:34px}
.pie-grilla b{display:block; color:#fff; font-size:.8rem; letter-spacing:.09em; text-transform:uppercase; margin-bottom:12px}
.pie-grilla ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.pie-legal{border-top:1px solid #2a2d33; padding-top:22px; font-size:.83rem; color:#6b7078}

/* ---------- Fotos de planta ---------- */
figure{margin:0}
.foto{
  border-radius:var(--radio); overflow:hidden; border:1px solid var(--linea);
  background:var(--fondo-2); display:flex; flex-direction:column;
}
.foto img{width:100%; flex:1 1 auto; min-height:0; object-fit:cover; display:block}
.foto figcaption{
  padding:12px 16px; font-size:.86rem; color:var(--gris);
  border-top:1px solid var(--linea); background:#fff;
}
section.oscuro .foto{border-color:#2a2d33}
section.oscuro .foto figcaption{background:#1b1d21; color:#a8adb8; border-top-color:#2a2d33}
.foto-alta img{aspect-ratio:4/3}
.fotos-par{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-top:34px}

/* Grillas de fotos chicas: los recortes se ven mejor a tamaño reducido */
/* La empresa: texto ancho y una columna angosta de fotos apiladas a la derecha */
.empresa-dos{display:grid; grid-template-columns:1fr 172px; gap:32px; align-items:start}
.tarjetas-empresa{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.tarjetas-empresa .tarjeta{padding:20px 20px}
.tarjetas-empresa .tarjeta h3{font-size:1.08rem}
.tarjetas-empresa .tarjeta p{font-size:.9rem}
.fotos-mini{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.empresa-dos .fotos-mini{grid-template-columns:1fr; gap:10px}
@media (max-width:760px){
  .empresa-dos{grid-template-columns:1fr; gap:26px}
  .empresa-dos .fotos-mini{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.fotos-mini .foto figcaption{padding:8px 10px; font-size:.75rem; line-height:1.4}
.fotos-tres{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px; margin-top:34px; max-width:760px;
}
.fotos-tres .foto figcaption{padding:9px 12px; font-size:.78rem; line-height:1.45}
/* Fotos documentales: se muestran enteras, sin recortar datos de la etiqueta */
.fotos-doc img{object-fit:contain; aspect-ratio:4/3; background:#0d0e10}
section.oscuro .fotos-doc .foto{background:#0d0e10}

/* ---------- Marcador de foto pendiente ---------- */
.foto-pend{
  border:2px dashed var(--linea); border-radius:var(--radio); background:var(--fondo-2);
  display:grid; place-items:center; text-align:center; padding:40px 24px; min-height:230px;
  color:var(--gris-cl); font-size:.88rem;
}
.foto-pend b{display:block; color:var(--gris); margin-bottom:4px; font-size:.95rem}
section.oscuro .foto-pend{background:#1b1d21; border-color:#2a2d33}

@media (max-width:820px){
  .nav{display:none}
  .nav.abierto{
    display:flex; position:absolute; top:74px; left:0; right:0; flex-direction:column;
    background:#111214; border-bottom:1px solid #2a2d33; padding:18px 24px; gap:14px;
  }
  .menu-btn{display:block}
  section{padding:64px 0}
  .fila{grid-template-columns:1fr}
}