/*
 * Estilos del sitio de campañas de BsWeb.
 *
 * Una sola hoja para todas las páginas de nicho: la identidad tiene que ser la misma
 * aunque el mensaje cambie por rubro. Sin framework y sin build a propósito — estas
 * páginas son el destino de avisos pagos y lo que se cobra ahí es la velocidad de carga.
 *
 * Azul de marca #0580B9, tomado del logo. Base neutra, el color sólo donde significa algo
 * (mismo principio que la guía de estilos del ERP).
 */

:root {
  --marca: #0580b9;
  --marca-oscuro: #036a99;
  --marca-claro: #e6f3fa;
  --tinta: #0f172a;
  --tinta-media: #475569;
  --tinta-suave: #64748b;
  --linea: #e2e8f0;
  --fondo: #ffffff;
  --fondo-alt: #f8fafc;
  --ok: #059669;
  --alerta: #b45309;
  --radio: 14px;
  --ancho: 1120px;
  --sombra: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

a {
  color: var(--marca-oscuro);
}

h1,
h2,
h3 {
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}

h1 {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
}

h3 {
  font-size: 1.05rem;
  font-weight: 650;
}

p {
  margin: 0;
}

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

.kicker {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--marca);
}

/* ---------- Aviso de sitio en construcción ---------- */
/*
 * Va arriba de todo y en TODAS las páginas mientras el sitio no esté terminado: está publicado
 * para poder verlo y probarlo, no para recibir visitas. Se saca de un solo lugar cuando salga
 * de verdad (junto con el noindex de cada página y el robots.txt).
 */

.construccion {
  background: #1e293b;
  color: #e2e8f0;
  font-size: 0.88rem;
  text-align: center;
  padding: 9px 24px;
  line-height: 1.4;
}

.construccion strong {
  color: #fff;
}

.construccion a {
  color: #93c5fd;
}

/* ---------- Encabezado ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}

.cabecera-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--tinta);
}

.marca img {
  width: 34px;
  height: 34px;
}

.marca strong {
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav a {
  color: var(--tinta-media);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 550;
}

.nav a:hover {
  color: var(--marca-oscuro);
}

/* El botón del menú conserva su texto blanco. `.nav a` pesa más que `.boton-primario` y le ponía el
   gris del menú: "Crear mi cuenta" salía oscuro sobre azul, casi ilegible (visto en celular, 15-09). */
.nav a.boton-primario,
.nav a.boton-primario:hover {
  color: #fff;
}

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 650;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
  white-space: nowrap;
}

.boton:active {
  transform: translateY(1px);
}

.boton-primario {
  background: var(--marca);
  color: #fff;
}

.boton-primario:hover {
  background: var(--marca-oscuro);
}

.boton-secundario {
  background: #fff;
  color: var(--tinta);
  border-color: var(--linea);
}

.boton-secundario:hover {
  border-color: var(--marca);
  color: var(--marca-oscuro);
}

.boton-chico {
  padding: 9px 16px;
  font-size: 0.92rem;
}

/* ---------- Hero ---------- */

.hero {
  padding: 72px 0 64px;
  background: linear-gradient(180deg, var(--marca-claro) 0%, #ffffff 78%);
  border-bottom: 1px solid var(--linea);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.hero p.bajada {
  margin-top: 18px;
  font-size: 1.15rem;
  color: var(--tinta-media);
  max-width: 34em;
}

.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero-notas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
  color: var(--tinta-suave);
}

.hero-notas li::before {
  content: '✓';
  color: var(--ok);
  font-weight: 700;
  margin-right: 6px;
}

/* Panel ilustrativo del hero: un esquema, no una captura falsa. */

.panel {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 18px;
  box-shadow: var(--sombra);
  padding: 22px;
}

.panel-titulo {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--tinta-suave);
  font-weight: 700;
  margin-bottom: 16px;
}

.canal {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-radius: 11px;
  margin-bottom: 10px;
  background: var(--fondo-alt);
}

.canal-punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}

.canal-nombre {
  font-weight: 600;
  font-size: 0.97rem;
}

.canal-detalle {
  font-size: 0.85rem;
  color: var(--tinta-suave);
  margin-left: auto;
  text-align: right;
}

.panel-flecha {
  text-align: center;
  color: var(--marca);
  font-size: 1.3rem;
  line-height: 1;
  margin: 6px 0;
}

.panel-destino {
  border: 1px solid var(--marca);
  background: var(--marca-claro);
  border-radius: 11px;
  padding: 14px;
}

.panel-destino strong {
  display: block;
  font-size: 1rem;
}

.panel-destino span {
  font-size: 0.88rem;
  color: var(--tinta-media);
}

/* ---------- Secciones ---------- */

.seccion {
  padding: 72px 0;
}

.seccion-alt {
  background: var(--fondo-alt);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}

.seccion-encabezado {
  max-width: 42em;
  margin-bottom: 40px;
}

.seccion-encabezado h2 {
  margin-top: 10px;
}

.seccion-encabezado p {
  margin-top: 14px;
  color: var(--tinta-media);
  font-size: 1.08rem;
}

.grilla {
  display: grid;
  gap: 20px;
}

.grilla-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grilla-2 {
  grid-template-columns: repeat(2, 1fr);
}

.tarjeta {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 24px;
}

.tarjeta h3 {
  margin-bottom: 8px;
}

.tarjeta p {
  color: var(--tinta-media);
  font-size: 0.97rem;
}

.tarjeta-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--marca);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 14px;
}

.dolor {
  border-left: 3px solid var(--alerta);
}

.dolor h3 {
  color: var(--alerta);
}

/* Lista de capacidades */

.capacidades {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.capacidades li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.98rem;
}

.capacidades li::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--marca);
  margin-top: 9px;
}

.capacidades strong {
  font-weight: 650;
}

.capacidades span {
  color: var(--tinta-media);
}

/* Bloque a dos columnas */

.dos-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

/* Precio */

.precio {
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
  border: 2px solid var(--marca);
  border-radius: 18px;
  padding: 32px;
  background: #fff;
  box-shadow: var(--sombra);
}

.precio-monto {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 12px 0 4px;
}

.precio-monto span {
  font-size: 1rem;
  font-weight: 550;
  color: var(--tinta-suave);
}

.precio ul {
  list-style: none;
  padding: 0;
  margin: 22px 0;
  text-align: left;
  display: grid;
  gap: 10px;
}

.precio li::before {
  content: '✓';
  color: var(--ok);
  font-weight: 700;
  margin-right: 8px;
}

/* Preguntas */

.faq {
  max-width: 780px;
  display: grid;
  gap: 4px;
}

.faq details {
  border-bottom: 1px solid var(--linea);
  padding: 18px 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 620;
  font-size: 1.03rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  color: var(--marca);
  font-weight: 700;
  flex: none;
}

.faq details[open] summary::after {
  content: '–';
}

.faq p {
  margin-top: 12px;
  color: var(--tinta-media);
  font-size: 0.98rem;
  max-width: 62em;
}

/* Cierre */

.cierre {
  background: var(--marca);
  color: #fff;
  text-align: center;
  padding: 72px 0;
}

.cierre h2 {
  color: #fff;
}

.cierre p {
  margin: 16px auto 28px;
  max-width: 34em;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.08rem;
}

.cierre .boton-primario {
  background: #fff;
  color: var(--marca-oscuro);
}

.cierre .boton-primario:hover {
  background: #f1f5f9;
}

/* Pie */

.pie {
  padding: 40px 0;
  font-size: 0.92rem;
  color: var(--tinta-suave);
  border-top: 1px solid var(--linea);
}

.pie-interior {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.pie a {
  color: var(--tinta-media);
  text-decoration: none;
  margin-left: 18px;
}

.pie a:hover {
  color: var(--marca-oscuro);
}

/* ---------- Texto largo (legales) ---------- */

.prosa {
  max-width: 46em;
}

.prosa h2 {
  font-size: 1.35rem;
  margin: 40px 0 12px;
}

.prosa h3 {
  margin: 26px 0 8px;
}

.prosa p,
.prosa li {
  color: var(--tinta-media);
  font-size: 1rem;
}

.prosa p + p {
  margin-top: 14px;
}

.prosa ul {
  margin: 12px 0;
  padding-left: 22px;
  display: grid;
  gap: 8px;
}

.prosa .fecha {
  color: var(--tinta-suave);
  font-size: 0.9rem;
}

/* Dato que todavía falta definir. Se ve feo A PROPÓSITO: no puede publicarse sin querer. */

.pendiente {
  display: inline-block;
  background: #fef3c7;
  border: 1px dashed var(--alerta);
  color: var(--alerta);
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 0.9em;
  font-weight: 650;
  white-space: nowrap;
}

.aviso {
  border: 1px solid var(--alerta);
  background: #fffbeb;
  border-radius: var(--radio);
  padding: 16px 18px;
  color: var(--alerta);
  font-size: 0.95rem;
  margin-bottom: 32px;
}

/* ---------- Tarjetas de nicho (home) ---------- */

.nicho {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.nicho:hover {
  border-color: var(--marca);
  transform: translateY(-2px);
}

.nicho .flecha {
  margin-top: auto;
  padding-top: 10px;
  color: var(--marca-oscuro);
  font-weight: 650;
  font-size: 0.95rem;
}

.nicho-proximo {
  opacity: 0.62;
  pointer-events: none;
}

.etiqueta {
  align-self: flex-start;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--tinta-suave);
  background: var(--fondo-alt);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 2px 10px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero-grid,
  .dos-columnas {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .grilla-3,
  .grilla-2,
  .capacidades {
    grid-template-columns: 1fr;
  }

  /* En celular se esconden las anclas de la página, pero NO "Ingresar": desde que el sistema vive en
     app.bsweb.com.ar, quien escribe bsweb.com.ar en el teléfono cae acá, y sin ese link no tenía
     cómo llegar al login. */
  .nav a:not(.boton):not(.nav-ingresar) {
    display: none;
  }

  .nav {
    gap: 16px;
  }

  .hero {
    padding: 48px 0;
  }

  .seccion {
    padding: 52px 0;
  }
}

/* ── Formulario de contacto (tiendas/) ─────────────────────────────────────────────────────── */

.formulario {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 28px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo-ancho {
  grid-column: 1 / -1;
}

.campo label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--tinta);
}

.campo label .opcional {
  font-weight: 400;
  color: var(--tinta-suave);
}

.campo input,
.campo textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--tinta);
  padding: 11px 13px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: #fff;
}

.campo input:focus,
.campo textarea:focus {
  outline: 2px solid var(--marca-claro);
  border-color: var(--marca);
}

.campo textarea {
  min-height: 110px;
  resize: vertical;
}

/* El campo trampa: fuera de la vista y del lector de pantalla, sólo lo completa un robot. */
.campo-trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario-pie {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.formulario-nota {
  font-size: 0.88rem;
  color: var(--tinta-suave);
}

.formulario-mensaje {
  grid-column: 1 / -1;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.95rem;
}

.formulario-mensaje.ok {
  background: #ecfdf5;
  color: var(--ok);
}

.formulario-mensaje.error {
  background: #fffbeb;
  color: var(--alerta);
}

@media (max-width: 900px) {
  .formulario {
    grid-template-columns: 1fr;
    padding: 20px;
  }
}

/* WhatsApp: la otra forma de pedir contacto, para el que prefiere escribir antes que completar un
   formulario. Nace oculto (atributo hidden) y lo muestra el script sólo si el API devolvió el
   número: un botón que abre un chat roto es peor que no tener botón. */
.boton-whatsapp {
  background: #1f9d55;
  color: #fff;
}

.boton-whatsapp:hover {
  background: #17803f;
  color: #fff;
}

.whatsapp-alternativa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 20px;
  color: var(--tinta-suave);
}

.whatsapp-alternativa[hidden] {
  display: none;
}

/* El mismo WhatsApp, flotando abajo a la derecha: se ve sin bajar hasta el formulario. */
.whatsapp-flotante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.whatsapp-flotante:hover {
  background: #1ebe5b;
  transform: scale(1.06);
}

.whatsapp-flotante[hidden] {
  display: none;
}

@media (max-width: 600px) {
  .whatsapp-flotante {
    right: 14px;
    bottom: 14px;
    width: 52px;
    height: 52px;
  }
}

/* Un botón con dos textos: el largo en pantalla ancha, el corto en celular (el encabezado no da
   para "Quiero que me contacten" a 320 px y empujaba toda la página de costado). */
.texto-corto {
  display: none;
}

@media (max-width: 600px) {
  .texto-largo {
    display: none;
  }

  .texto-corto {
    display: inline;
  }
}