:root { --margen:max(16px, calc((100% - 1048px) / 2)); --rojo:#b22222; --rojo2:#8f1b1b; --tinta:#26211f; --suave:#6b625d; --linea:#e5ddd6; --fondo:#faf7f3; --blanco:#fff; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; }
body { background:var(--fondo); color:var(--tinta); font:16px/1.5 system-ui, "Segoe UI", Roboto, Arial, sans-serif; }
.barra { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px var(--margen); background:var(--rojo); }
.marca img { display:block; height:44px; width:auto; }
.menu { display:flex; align-items:center; gap:18px; }
.menu a:not(.btn) { color:#fff; font-weight:600; text-decoration:none; }
.menu a:not(.btn):hover, .menu a[aria-current] { text-decoration:underline; text-underline-offset:4px; }
.titulo { font-size:clamp(30px,5vw,44px); }
.bajada { margin:10px 0 26px; color:var(--suave); font-size:18px; }
.tiendas { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.tiendas article { padding:20px; background:var(--blanco); border:1px solid var(--linea); border-top:4px solid var(--rojo); border-radius:8px; }
.tiendas span { color:var(--rojo); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.tiendas h2 { margin:6px 0 4px; font-size:19px; }
.tiendas p { margin:0 0 12px; color:var(--suave); }
.tiendas a { color:var(--rojo); font-weight:700; }
.tiendas .clash { background:#111; border-color:#111; border-top-color:#f2e600; color:#fff; }
.tiendas .clash img { display:block; width:120px; height:auto; margin-bottom:10px; }
.tiendas .logo { display:block; width:130px; height:auto; padding:12px 14px; margin-bottom:10px; background:var(--rojo); border-radius:4px; box-sizing:content-box; }
.tiendas .clash span, .tiendas .clash a { color:#f2e600; }
.tiendas .clash p { color:#d6d6d6; }
.franja-clash { display:flex; align-items:center; gap:28px; padding:22px 28px; background:#111; color:#fff; border-radius:10px; }
.franja-clash img { display:block; width:180px; height:auto; flex:none; }
.franja-clash h2 { margin:0 0 6px; color:#fff; }
.franja-clash p { margin:0; color:#d6d6d6; }
.franjas { display:grid; gap:16px; }
.enlace { color:var(--rojo); font-weight:700; text-underline-offset:3px; }
.en-tienda { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; padding:22px 24px; background:var(--blanco); border:1px solid var(--linea); border-left:5px solid var(--rojo); border-radius:8px; }
.en-tienda p { margin:0 0 12px; }
.en-tienda p:last-child { margin-bottom:0; }
.docs-tienda { display:grid; gap:8px; margin:0 0 14px; padding:0; list-style:none; }
.docs-tienda li { padding:8px 12px; }
@media (max-width:640px) { .en-tienda { grid-template-columns:1fr; } .en-tienda .btn { text-align:center; } }
.contacto { margin:0; line-height:1.8; overflow-wrap:anywhere; }
.contacto a { color:var(--rojo); font-weight:700; }
footer.pie { margin-top:60px; padding:36px var(--margen) 20px; background:#1c1615; color:#d6cfcc; border:0; text-align:left; }
.pie-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:26px; }
.pie h3 { margin:0 0 12px; color:#fff; font-size:16px; }
.pie-link { display:flex; align-items:center; gap:10px; margin-bottom:10px; color:#d6cfcc; text-decoration:none; overflow-wrap:anywhere; }
.pie-link:hover { color:#fff; }
.pie-link svg { width:22px; height:22px; flex:none; fill:currentColor; }
.pie-legal { margin:26px 0 0; padding-top:16px; border-top:1px solid #3a302e; font-size:13px; color:#9b918d; }
.pie-legal a { color:#d6cfcc; }
.ubicaciones { max-width:900px; }
.ciudad { margin-top:30px; }
.ciudad h2 { margin-bottom:12px; padding-bottom:6px; border-bottom:2px solid var(--rojo); font-size:22px; }
.tienda { display:grid; grid-template-columns:150px minmax(0,1fr) auto; align-items:center; gap:20px; padding:14px 16px; margin-bottom:10px; background:var(--blanco); border:1px solid var(--linea); border-radius:10px; }
.tienda b { display:block; font-size:18px; }
.tienda span { color:var(--suave); }
.tienda .logo-la { width:150px; height:auto; padding:10px 12px; box-sizing:border-box; background:var(--rojo); border-radius:6px; }
.tienda .logo-clash { width:110px; height:auto; justify-self:center; }
.tienda .btn { padding:10px 18px; font-size:15px; }
.tienda.clash { background:#111; border-color:#111; color:#fff; }
.tienda.clash span { color:#d6d6d6; }
.tienda.clash .btn { background:#f2e600; color:#111; }
.tienda.clash .btn:hover { background:#fff36b; }
@media (max-width:640px) {
  .tienda { grid-template-columns:96px minmax(0,1fr); gap:12px; }
  .tienda .logo-la { width:96px; padding:7px 8px; }
  .tienda .logo-clash { width:80px; }
  .tienda .btn { grid-column:1 / -1; text-align:center; }
}
body.tranca { min-height:100vh; display:grid; place-items:center; padding:16px; background:radial-gradient(ellipse at 50% 30%, #3a2c2a 0%, #1c1615 70%); color:#fff; }
.tranca-caja { width:100%; max-width:460px; text-align:center; }
.tranca-caja > img { height:56px; width:auto; margin-bottom:26px; }
.tranca-caja h1 { font-size:clamp(28px,6vw,40px); }
.tranca-caja > p { margin:10px 0 30px; color:#d6cfcc; }
.tranca-caja label { display:block; margin-bottom:10px; font-weight:600; }
.tranca-fila { display:flex; gap:8px; }
.tranca-fila input { flex:1; text-align:center; letter-spacing:.08em; text-transform:uppercase; }
.tranca .msg { margin-top:12px; }
@media (max-width:560px) { .tranca-fila { flex-direction:column; } .tranca-fila .btn { width:100%; } }
.franja-clash.roja { background:var(--rojo); }
.franja-clash.roja p { color:#fbe3e3; }
.franja-clash.roja a { color:#fff; font-weight:700; }
@media (max-width:560px) {
  .franja-clash { flex-direction:column; align-items:flex-start; gap:12px; }
  .marca img { height:34px; }
  .menu { gap:10px; }
  .menu a:not(.btn) { font-size:14px; }
  .btn.chico { padding:7px 10px; font-size:13px; }
}
h1, h2 { line-height:1.15; margin:0; }
.btn { display:inline-block; border:0; border-radius:8px; padding:13px 26px; background:var(--rojo); color:#fff; font-family:inherit; font-size:16px; font-weight:700; line-height:1.2; text-decoration:none; cursor:pointer; }
.btn:hover { background:var(--rojo2); }
.btn:disabled { opacity:.6; cursor:wait; }
.btn.chico { padding:9px 16px; font-size:14px; background:#fff; color:var(--rojo); }
.btn.chico:hover { background:#f5e9e6; }
.portada { padding:clamp(36px,6vw,72px) var(--margen) clamp(44px,7vw,84px); background:var(--rojo); color:#fff; }
.portada h1, .portada .titular { font-size:clamp(36px,7vw,68px); letter-spacing:-.02em; }
.carrusel { position:relative; overflow:hidden; background:var(--rojo); touch-action:pan-y; }
.pista { display:flex; transition:transform .55s ease; }
.lamina { flex:0 0 100%; min-width:100%; }
.carrusel .portada { padding-bottom:clamp(64px,8vw,96px); }
.flecha { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border:0; border-radius:50%; background:rgba(0,0,0,.2); color:#fff; font-size:30px; line-height:40px; cursor:pointer; }
.flecha:hover { background:rgba(0,0,0,.35); }
.flecha.izq { left:12px; } .flecha.der { right:12px; }
.puntos { position:absolute; bottom:24px; left:var(--margen); display:flex; gap:8px; }
.puntos button { width:10px; height:10px; padding:0; border:0; border-radius:5px; background:rgba(255,255,255,.45); cursor:pointer; transition:width .3s; }
.puntos button.on { width:28px; background:#fff; }
.lamina.promos { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:32px; }
.promos .fotos { display:flex; gap:14px; }
.carrusel, .carrusel .lamina { background:radial-gradient(ellipse at 75% 50%, #3a2c2a 0%, #1c1615 70%); }
.oscura .btn { background:var(--rojo); color:#fff; }
.oscura .btn:hover { background:var(--rojo2); }
.promos .tarjeta { display:block; width:clamp(240px,34vw,460px); height:auto; border-radius:14px; box-shadow:0 12px 32px rgba(0,0,0,.4); }
.promos .fotos img { display:block; width:clamp(130px,17vw,220px); height:auto; border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.35); }
.carrusel .lamina.tienda { background:linear-gradient(90deg, rgba(20,15,14,.92) 0%, rgba(20,15,14,.65) 45%, rgba(20,15,14,.1) 100%), url(../img/tienda.jpg) center / cover no-repeat; }
@media (max-width:700px) {
  .flecha { display:none; }
  .lamina.promos { grid-template-columns:1fr; gap:20px; }
  .promos .fotos img { width:calc(50% - 7px); }
  .promos .tarjeta { width:100%; max-width:360px; }
  .carrusel .lamina.tienda { background:linear-gradient(180deg, rgba(20,15,14,.9), rgba(20,15,14,.6)), url(../img/tienda.jpg) center / cover no-repeat; }
}
@media (prefers-reduced-motion:reduce) { .pista, .puntos button { transition:none; } }
.portada p { max-width:520px; margin:18px 0 28px; font-size:19px; }
.portada .btn { background:#fff; color:var(--rojo); }
.portada .btn:hover { background:#f5e9e6; }
.bloque { max-width:1080px; margin:0 auto; padding:clamp(36px,6vw,64px) 16px 0; }
.bloque h2 { font-size:24px; margin-bottom:14px; }
.pasos { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; counter-reset:p; }
.pasos li { counter-increment:p; padding:18px; background:var(--blanco); border:1px solid var(--linea); border-radius:8px; }
.pasos li::before { content:counter(p); display:block; color:var(--rojo); font-size:28px; font-weight:800; }
.pasos b, .pasos span { display:block; }
.pasos span { color:var(--suave); }
.columnas { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; }
.pendiente { margin:0; padding:10px 12px; border:1px dashed #c58b2a; border-radius:6px; background:#fff8e8; color:#6f4b0b; font-size:14px; }
footer { margin-top:60px; padding:20px 16px; border-top:1px solid var(--linea); color:var(--suave); text-align:center; font-size:14px; }
.formulario { max-width:760px; margin:32px auto 0; padding:0 16px; }
.formulario h1 { font-size:32px; }
.formulario h2 { margin:28px 0 12px; padding-bottom:6px; border-bottom:2px solid var(--rojo); font-size:18px; }
.grilla { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.grilla label { display:flex; flex-direction:column; gap:4px; font-size:14px; font-weight:600; }
.grilla .ancho { grid-column:1/-1; }
.grilla .ayuda { font-weight:400; color:var(--suave); }
input[type=file] { padding:8px; background:#fff; }
input, select, textarea { width:100%; padding:10px; border:1px solid #c9bfb7; border-radius:6px; background:#fff; color:var(--tinta); font-family:inherit; font-size:16px; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--rojo); outline-offset:1px; }
.mal { border-color:var(--rojo); background:#fdeeee; }
.check { display:flex; gap:10px; align-items:flex-start; margin:14px 0 22px; }
.check input { width:20px; height:20px; flex:none; margin-top:2px; }
.formulario > form > .pendiente { margin-top:26px; }
.sitio { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.msg { margin:16px 0; padding:12px 14px; border-radius:6px; font-weight:600; }
.msg.ok { background:#e3f5e4; color:#23642a; }
.msg.err { background:#fdeeee; color:#8f1b1b; }
@media (max-width:560px) { .grilla { grid-template-columns:1fr; } .btn[type=submit] { width:100%; } }