/* ══════════════════════════════════════════════════════════════════
   SDS Electrónica — estilos compartidos por todas las páginas.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* Base clara: la mayor parte del sitio */
  --papel:      #f3f5f7;
  --superficie: #ffffff;
  --tinta:      #121920;
  --acero:      #5b6673;
  --linea:      #dce1e7;

  /* Bloque oscuro: solo la portada y el pie */
  --noche:      #0e1620;
  --noche-alto: #1a2634;
  --noche-tinta:#e9eef3;
  --noche-tenue:#8b9aab;

  /* Acento: azul de instrumento, no neón */
  --electrico:    #0a74b8;
  --electrico-cl: #e7f2fa;
  --stock:        #0d7a56;

  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --ancho: 62rem;
  --radio: 2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel:      #0e1620;
    --superficie: #182230;
    --tinta:      #e9eef3;
    --acero:      #94a3b4;
    --linea:      #2a3647;
    --electrico:    #5fb3e8;
    --electrico-cl: #16283a;
    --stock:        #35b98c;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0; overflow-x: hidden;
  background: var(--papel); color: var(--tinta);
  font: 400 1rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.envoltorio { max-width: var(--ancho); margin: 0 auto; padding: 0 1.125rem; }

a { color: var(--electrico); }

/* ── Encabezado ─────────────────────────────────────────────────── */
.cabecera {
  background: var(--superficie); border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 20;
}
.cabecera.sobre-oscuro {
  background: var(--noche); border-bottom-color: rgba(255,255,255,.1);
}
/* En celular el encabezado va en dos filas: logo y WhatsApp arriba,
   navegación abajo. Con cuatro secciones, un menú hamburguesa solo
   escondería cosas sin ganar nada. */
.cabecera-fila {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .5rem 1rem; padding-block: .625rem;
}

.logo {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: 1.0625rem; letter-spacing: -.015em;
  text-decoration: none; color: inherit; flex: 0 0 auto;
}
/* El logo se pinta como máscara para que tome el color del texto:
   negro sobre claro, blanco sobre el bloque oscuro, con un solo archivo. */
.logo-marca {
  width: 5.1rem; height: 1.45rem; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url(logo-marca.svg) no-repeat center / contain;
          mask: url(logo-marca.svg) no-repeat center / contain;
}
.sobre-oscuro .logo { color: var(--noche-tinta); }
.sobre-oscuro .logo { color: #fff; }

.menu {
  display: flex; gap: .25rem; align-items: center;
  order: 3; flex: 1 0 100%;
  overflow-x: auto; scrollbar-width: none;
  margin: 0 -1.125rem; padding: 0 1.125rem;
}
.menu::-webkit-scrollbar { display: none; }
.menu a { flex: 0 0 auto; }

@media (min-width: 44rem) {
  .menu { order: 1; flex: 0 1 auto; margin-left: auto; margin-right: .25rem;
          overflow: visible; padding: 0; }
}
.menu a {
  font-size: .875rem; font-weight: 500; text-decoration: none;
  color: var(--acero); padding: .4rem .625rem; border-radius: 3px;
}
.menu a:hover { color: var(--tinta); background: var(--papel); }
.menu a[aria-current="page"] { color: var(--tinta); font-weight: 600; }
.sobre-oscuro .menu a { color: var(--noche-tenue); }
.sobre-oscuro .menu a:hover,
.sobre-oscuro .menu a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.08); }

.cabecera .wa {
  order: 2; margin-left: auto;
  background: var(--tinta); color: var(--superficie); font-weight: 600;
  font-size: .875rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .4rem .75rem; border-radius: 3px;
}
.cabecera .wa:hover { opacity: .88; }
.cabecera .wa svg { width: .95rem; height: .95rem; color: #25d366; }
.sobre-oscuro .wa { background: var(--electrico); color: #fff; }

:focus-visible { outline: 2px solid var(--electrico); outline-offset: 2px; }

/* ── Tipografía de sección ──────────────────────────────────────── */
.seccion { padding-block: 2.75rem; }
.seccion-titulo {
  font-size: clamp(1.25rem, 1.05rem + .85vw, 1.625rem);
  letter-spacing: -.02em; font-weight: 600; margin: 0 0 .375rem;
}
.seccion-bajada { color: var(--acero); margin: 0 0 1.5rem; max-width: 56ch; }

/* ── Botones ────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 600 .9375rem var(--sans); text-decoration: none;
  padding: .6875rem 1.125rem; border-radius: var(--radio);
  border: 1px solid transparent; cursor: pointer;
}
.boton-principal { background: var(--tinta); color: var(--superficie); }
.boton-principal:hover { opacity: .88; }
.boton-principal svg { width: 1.0625rem; height: 1.0625rem; color: #25d366; }
.boton-secundario {
  background: var(--superficie); color: var(--tinta); border-color: var(--linea);
}
.boton-secundario:hover { border-color: var(--acero); }

/* ── Pie ────────────────────────────────────────────────────────── */
.pie {
  background: var(--noche); color: var(--noche-tenue);
  padding-block: 2.5rem 1.75rem; font-size: .875rem;
  margin-top: 3rem;
}
.pie-grilla {
  display: grid; gap: 1.75rem; grid-template-columns: 1fr;
}
@media (min-width: 38rem) { .pie-grilla { grid-template-columns: repeat(3, 1fr); } }
.pie h2 {
  font-size: .75rem; font-weight: 600; color: #fff; margin: 0 0 .625rem;
  letter-spacing: .01em;
}
.pie p { margin: 0 0 .25rem; }
.pie a { color: var(--noche-tinta); text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie-horario { font-variant-numeric: tabular-nums; }
.pie-cierre {
  margin-top: 1.75rem; padding-top: 1.125rem;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .8125rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem;
}
.pie-redes { display: flex; gap: .625rem; margin-top: .625rem; }
.pie-redes a { display: grid; place-items: center; width: 2rem; height: 2rem;
  border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.pie-redes svg { width: 1rem; height: 1rem; }

/* ── Estado abierto/cerrado ─────────────────────────────────────── */
.estado {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .8125rem; font-weight: 500;
}
.estado::before {
  content: ''; width: .4375rem; height: .4375rem; border-radius: 50%;
  background: var(--acero);
}
.estado.abierto { color: var(--stock); }
.estado.abierto::before { background: var(--stock); }

/* ── Logo del pie ───────────────────────────────────────────────── */
.pie-logo {
  width: 8.25rem; height: 3.37rem; margin-bottom: 1.5rem;
  background: currentColor; color: var(--noche-tinta);
  -webkit-mask: url(logo.svg) no-repeat left center / contain;
          mask: url(logo.svg) no-repeat left center / contain;
}