/* ---------- Baterías (T-376, versión C que eligió Carlos el 2026-10-15) ----------
   Voltex al frente: un panel azul con el corte en diagonal del logo de Ohtsu abre de izquierda a derecha y trae el
   letrero; al lado, cada sucursal con su horario de hoy y una corriente amarilla que baja por su borde. */
.baterias { background: var(--surface); overflow: hidden; }
.baterias h2 { margin-bottom: 14px; }
.baterias p { margin: 0 0 8px; color: var(--muted); }
.baterias .bat-lead { font-size: clamp(1.125rem, 1.4vw + .6rem, 1.5rem); line-height: 1.35; font-weight: 600; color: var(--ink); }
.bat-grid { margin-top: clamp(28px, 4vw, 48px); }
.bat-medida { width: 100%; min-height: 48px; margin: 10px 0 12px; }
.bat-c { padding-block: 0 clamp(56px, 9vw, 104px); }
.bat-c-inner { display: grid; }
.bat-panel {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 14px;
  margin-inline: calc(-1 * var(--gutter)); padding: 48px var(--gutter) 72px;
  background: var(--blue);
  --cut: polygon(0 0, 100% 0, 100% 82%, 0 100%);
  clip-path: var(--cut);
}
.bat-panel .bat-sign { width: min(100%, 360px); height: auto; border-radius: 8px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); }
.bat-c .bat-panel .bat-mf { margin: 0; color: #fff; font: 600 1rem/1.2 var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
.bat-side { padding-top: clamp(28px, 5vw, 40px); }
.bat-branches { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.bat-branch { position: relative; overflow: hidden; display: grid; gap: 4px; padding: 18px 18px 18px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.bat-branch h3 { margin: 0; font: 600 1.5rem/1.1 var(--font-display); text-transform: uppercase; color: var(--blue); }
.bat-c .bat-branch .bat-hoy { margin: 0 0 10px; }
.bat-branch .btn { justify-self: start; }
.bat-branch::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--blue-tint); }
.bat-branch::after { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 45%; background: linear-gradient(180deg, transparent, #F5B125 60%, transparent); transform: translateY(-100%); }
.bat-motion.bat-c .bat-branch::after { animation: bat-corriente 2.2s cubic-bezier(.45, 0, .2, 1) infinite; }
.bat-motion.bat-c .bat-branch + .bat-branch::after { animation-delay: 1.1s; }
.bat-c .bat-branch:hover::after { animation-duration: 1s; }
@keyframes bat-corriente { from { transform: translateY(-100%); } to { transform: translateY(260%); } }
/* El panel entra como el triángulo del logo: se abre de izquierda a derecha hasta su corte, y luego sube el letrero. */
.bat-motion.bat-c .bat-panel { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path .9s cubic-bezier(.16, 1, .3, 1); }
.bat-motion.bat-c.is-in .bat-panel { clip-path: var(--cut); }
.bat-motion.bat-c .bat-panel > * { opacity: 0; transform: translateY(14px); transition: opacity .5s ease-out .45s, transform .6s cubic-bezier(.16, 1, .3, 1) .45s; }
.bat-motion.bat-c.is-in .bat-panel > * { opacity: 1; transform: none; }
@media (min-width: 1200px) {
  .bat-c { padding-block: 0; }
  .bat-c-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; align-items: stretch; }
  .bat-panel { margin: 0 0 0 calc(-1 * var(--gutter)); padding: 72px 16% 72px var(--gutter); min-height: 480px; --cut: polygon(0 0, 100% 0, 84% 100%, 0 100%); }
  .bat-panel .bat-sign { width: min(100%, 540px); }
  .bat-side { align-self: center; padding-block: 72px; }
  .bat-branches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .bat-c .bat-grid { grid-column: 1 / -1; margin-bottom: 72px; }
}
@media (min-width: 1600px) {
  .baterias .bat-lead { font-size: 1.625rem; }
  .baterias p { font-size: 1.1875rem; }
}