/* ==========================================================
   CHARCOS · Club de Motociclistas · Agua Prieta, Sonora
   Paleta: asfalto, hueso, arena, óxido y azul-charco
   ========================================================== */
:root{
  --asfalto:#000000;      /* fondo principal */
  --brea:#141110;         /* tarjetas / superficies */
  --grava:#2B2622;        /* bordes y líneas */
  --hueso:#F1E8D8;        /* texto principal */
  --arena:#CBB492;        /* texto secundario */
  --oxido:#C8552B;        /* acento principal: óxido del desierto */
  --charco:#4E92A3;       /* acento del reflejo: azul de charco */
  --radius:10px;
  --maxw:1080px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--asfalto);
  color:var(--hueso);
  font-family:'Barlow',system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit}
.link{color:var(--charco);text-decoration:none;border-bottom:1px solid transparent}
.link:hover{border-bottom-color:var(--charco)}
:focus-visible{outline:2px solid var(--charco);outline-offset:3px}

/* ---------- Barra superior ---------- */
.topbar{
  display:flex;align-items:center;justify-content:flex-end;
  padding:16px 24px;max-width:var(--maxw);margin:0 auto;
}
.brand{
  font-family:'Archivo Black',sans-serif;font-size:1.15rem;
  letter-spacing:.12em;text-decoration:none;color:var(--hueso);
}
.nav{display:flex;gap:22px;font-family:'Barlow Condensed',sans-serif;
  font-weight:600;font-size:1.02rem;letter-spacing:.08em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--arena);padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a.active{color:var(--hueso);border-bottom-color:var(--oxido)}

/* ---------- Hero con reflejo de charco ---------- */
.hero{
  max-width:var(--maxw);margin:0 auto;text-align:center;
  padding:64px 24px 28px;
}
.eyebrow{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  font-size:clamp(1.25rem,4.5vw,1.8rem);
  color:#FFFFFF;margin-bottom:18px;
}
.wordmark-wrap{position:relative;display:inline-block}
.wordmark{
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(3rem,12vw,7.5rem);
  letter-spacing:.06em;line-height:1;color:var(--hueso);
  text-shadow:0 2px 0 rgba(0,0,0,.4);
}
/* El reflejo: CHARCOS visto en un charco sobre el asfalto */
.reflection{
  transform:scaleY(-1) skewX(-6deg);
  color:var(--charco);
  opacity:.45;
  -webkit-mask-image:linear-gradient(to bottom,transparent 12%,#000 90%);
  mask-image:linear-gradient(to bottom,transparent 12%,#000 90%);
  filter:blur(1.2px);
  margin-top:6px;
  animation:ripple 5.5s ease-in-out infinite;
  user-select:none;
}
@keyframes ripple{
  0%,100%{transform:scaleY(-1) skewX(-6deg)}
  50%{transform:scaleY(-1) skewX(-3.5deg) scaleX(1.012)}
}
@media (prefers-reduced-motion:reduce){
  .reflection{animation:none}
  html{scroll-behavior:auto}
}
.hero-sub{color:var(--arena);max-width:520px;margin:10px auto 30px;font-size:1.1rem}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;padding:12px 26px;border-radius:var(--radius);
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:1.05rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
}
.btn-primary{background:var(--oxido);color:#fff}
.btn-primary:hover{background:#d9622f}
.btn-ghost{border-color:var(--grava);color:var(--hueso)}
.btn-ghost:hover{border-color:var(--arena)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Divisor de carretera ---------- */
.road-divider{
  max-width:var(--maxw);margin:34px auto;height:0;
  border-top:3px dashed var(--grava);
  position:relative;
}

/* ---------- Secciones ---------- */
.section{max-width:var(--maxw);margin:0 auto;padding:24px 24px 40px}
.section-title{
  font-family:'Archivo Black',sans-serif;font-size:clamp(1.5rem,4vw,2.2rem);
  letter-spacing:.04em;margin-bottom:26px;
}
.kicker{
  display:block;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:.85rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--charco);margin-bottom:6px;
}
.empty{color:var(--arena)}

/* ---------- Anuncios ---------- */
.anuncios-grid{display:grid;gap:16px}
.anuncio{
  background:var(--brea);border:1px solid var(--grava);
  border-left:5px solid var(--oxido);
  border-radius:var(--radius);padding:18px 20px;
  display:grid;gap:4px;
}
.anuncio .fecha{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;font-size:.85rem;color:var(--oxido);
}
.anuncio h3{font-size:1.15rem}
.anuncio p{color:var(--arena);font-size:.98rem}

/* ---------- Noticias ---------- */
.noticias-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.noticia{
  background:var(--brea);border:1px solid var(--grava);
  border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
}
.noticia img{aspect-ratio:16/9;object-fit:cover;width:100%}
.noticia .cuerpo{padding:16px 18px 20px;display:grid;gap:6px}
.noticia .fecha{font-size:.82rem;color:var(--charco);font-family:'Barlow Condensed',sans-serif;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.noticia h3{font-size:1.12rem;line-height:1.3}
.noticia p{color:var(--arena);font-size:.95rem}

/* ---------- Contacto ---------- */
.contacto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.contacto-card{
  background:var(--brea);border:1px solid var(--grava);
  border-radius:var(--radius);padding:20px 22px;
}
.contacto-card h3{font-size:1.05rem;margin-bottom:8px;
  font-family:'Barlow Condensed',sans-serif;letter-spacing:.1em;text-transform:uppercase}
.contacto-card p{color:var(--arena)}

/* ---------- Footer ---------- */
.footer{
  border-top:1px solid var(--grava);margin-top:30px;
  padding:26px 24px 36px;text-align:center;color:var(--arena);font-size:.92rem;
}
.footer-small{color:var(--charco);font-family:'Barlow Condensed',sans-serif;
  letter-spacing:.2em;text-transform:uppercase;font-size:.8rem;margin-top:4px}

/* ==========================================================
   TIENDA
   ========================================================== */
.productos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.producto{
  background:var(--brea);border:1px solid var(--grava);
  border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
}
.producto img{aspect-ratio:1/1;object-fit:cover;width:100%;background:#0F0D0A}
.producto .cuerpo{padding:14px 16px 18px;display:grid;gap:8px;flex:1}
.producto h3{font-size:1.05rem;line-height:1.3}
.producto .precio{
  font-family:'Archivo Black',sans-serif;font-size:1.15rem;color:var(--oxido);
}
.producto .talla{
  background:var(--asfalto);color:var(--hueso);border:1px solid var(--grava);
  border-radius:6px;padding:8px 10px;font-family:'Barlow',sans-serif;font-size:.95rem;
}
.producto .agregar{margin-top:auto}
.agotado{opacity:.55}
.agotado .agregar{pointer-events:none}

/* ---------- Carrito ---------- */
.cart-fab{
  position:fixed;right:18px;bottom:18px;z-index:50;
  background:var(--oxido);color:#fff;border:none;border-radius:999px;
  padding:14px 20px;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  letter-spacing:.08em;font-size:1rem;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.45);text-transform:uppercase;
}
.cart-panel{
  position:fixed;right:0;top:0;bottom:0;width:min(380px,100%);z-index:60;
  background:var(--brea);border-left:1px solid var(--grava);
  transform:translateX(100%);transition:transform .25s ease;
  display:flex;flex-direction:column;
}
.cart-panel.open{transform:translateX(0)}
@media (prefers-reduced-motion:reduce){.cart-panel{transition:none}}
.cart-head{display:flex;justify-content:space-between;align-items:center;
  padding:18px 20px;border-bottom:1px solid var(--grava)}
.cart-head h3{font-family:'Archivo Black',sans-serif;letter-spacing:.05em}
.cart-close{background:none;border:none;color:var(--arena);font-size:1.5rem;cursor:pointer}
.cart-items{flex:1;overflow-y:auto;padding:14px 20px;display:grid;gap:12px;align-content:start}
.cart-item{display:grid;grid-template-columns:1fr auto;gap:4px;
  border-bottom:1px dashed var(--grava);padding-bottom:10px}
.cart-item .nombre{font-size:.96rem}
.cart-item .detalle{font-size:.84rem;color:var(--arena)}
.cart-item .qty{display:flex;gap:8px;align-items:center;margin-top:4px}
.cart-item .qty button{
  background:var(--asfalto);border:1px solid var(--grava);color:var(--hueso);
  width:26px;height:26px;border-radius:6px;cursor:pointer;font-size:1rem;line-height:1;
}
.cart-item .sub{font-family:'Archivo Black',sans-serif;color:var(--hueso);align-self:start}
.cart-foot{padding:16px 20px;border-top:1px solid var(--grava);display:grid;gap:10px}
.cart-total{display:flex;justify-content:space-between;font-size:1.1rem}
.cart-total strong{font-family:'Archivo Black',sans-serif;color:var(--oxido)}
.cart-msg{font-size:.85rem;color:var(--arena)}
.cart-error{color:#E07856}

/* ---------- Página gracias ---------- */
.gracias{max-width:640px;margin:0 auto;text-align:center;padding:80px 24px}
.gracias h1{font-family:'Archivo Black',sans-serif;font-size:2rem;margin-bottom:14px}
.gracias p{color:var(--arena);margin-bottom:26px}

@media (max-width:560px){
  .topbar{flex-direction:column;gap:10px}
  .nav{gap:16px}
}

/* ---------- Logo oficial en topbar ---------- */
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{width:46px;height:46px;flex:none}

/* ---------- Wordmark como imagen del club ---------- */
.wordmark-h{margin:0;line-height:0}
.wordmark-img{width:min(560px,86vw);height:auto;display:block;margin:0 auto}
.reflection-img{
  transform:scaleY(-1) skewX(-6deg);
  opacity:.5;
  -webkit-mask-image:linear-gradient(to bottom,transparent 12%,#000 90%);
  mask-image:linear-gradient(to bottom,transparent 12%,#000 90%);
  filter:blur(1.1px);
  margin-top:10px;
  animation:ripple 5.5s ease-in-out infinite;
  user-select:none;
}
@media (prefers-reduced-motion:reduce){.reflection-img{animation:none}}

/* ---------- Logo oficial en el hero ---------- */
.hero-logo{
  width:min(460px,80vw);height:auto;display:block;margin:0 auto 8px;
}

/* ---------- Galería ---------- */
.galeria-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.galeria-grid figure{margin:0;background:var(--brea);border:1px solid var(--grava);
  border-radius:var(--radius);overflow:hidden}
.galeria-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.galeria-grid figcaption{padding:10px 14px;color:var(--arena);font-size:.9rem}

/* ---------- Miniaturas de galería ---------- */
.thumb{display:block;width:100%;padding:0;border:none;background:none;cursor:pointer}
.thumb img{transition:opacity .15s ease}
.thumb:hover img{opacity:.85}

/* ---------- Carrusel de fotos ---------- */
.carrusel{
  display:none;
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.95);
  align-items:center;justify-content:center;
}
.carrusel.abierto{display:flex}
.carrusel-figura{
  margin:0;max-width:min(1100px,86vw);text-align:center;
}
.carrusel-figura img{
  max-width:100%;max-height:80vh;object-fit:contain;
  border-radius:var(--radius);display:block;margin:0 auto;
}
.carrusel-figura figcaption{
  color:var(--arena);margin-top:12px;
  font-family:'Barlow Condensed',sans-serif;letter-spacing:.12em;
  text-transform:uppercase;font-size:.95rem;
  display:flex;flex-direction:column;gap:4px;align-items:center;
}
.carrusel-contador{color:var(--oxido);font-size:.85rem;letter-spacing:.2em}
.carrusel-flecha{
  background:rgba(255,255,255,.06);border:1px solid var(--grava);
  color:var(--hueso);font-size:1.8rem;line-height:1;
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  flex:none;margin:0 14px;z-index:101;
}
.carrusel-flecha:hover{background:var(--oxido);border-color:var(--oxido)}
.carrusel-cerrar{
  position:absolute;top:14px;right:18px;z-index:102;
  background:none;border:none;color:var(--hueso);
  font-size:2.6rem;line-height:1;cursor:pointer;padding:8px;
}
.carrusel-cerrar:hover{color:var(--oxido)}
@media (max-width:600px){
  .carrusel-flecha{
    position:absolute;top:50%;transform:translateY(-50%);
    margin:0;background:rgba(0,0,0,.5);
  }
  .carrusel-flecha.izq{left:8px}
  .carrusel-flecha.der{right:8px}
  .carrusel-figura{max-width:96vw}
}