/* =========================================================
   Aventaris — estilos propios
   (Tailwind se carga por CDN en index.html; aquí van solo
   los estilos que Tailwind v3 no trae o que antes estaban
   escritos en línea dentro del HTML)
   ========================================================= */

/* ---------- Íconos Material Symbols ---------- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  line-height: 1;
  user-select: none;
}

/* Ícono relleno (antes: style="font-variation-settings: 'FILL' 1;") */
.material-symbols-outlined.icon-filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---------- Utilidades que no existen en Tailwind v3 ---------- */
.shadow-xs {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
}

/* Línea conectora de "¿Cómo funciona?" */
.left-1\/6  { left: 16.666667%; }
.right-1\/6 { right: 16.666667%; }

/* ---------- Barra fija inferior en móvil ---------- */
/* Evita que la barra "Llamar / WhatsApp" tape el final del footer */
@media (max-width: 767px) {
  body {
    padding-bottom: 72px;
  }
}

/* ---------- Formulario de cotización ---------- */

/* Campo trampa anti-spam: invisible para personas, visible para bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Mensaje de resultado del envío */
.form-status {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border-radius: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  border: 1px solid transparent;
}

.form-status[hidden] {
  display: none;
}

.form-status.is-success {
  background: #f0fdf4;
  border-color: #86efac;
  color: #166534;
}

.form-status.is-error {
  background: #ffdad6;
  border-color: #ffb4ab;
  color: #93000a;
}

/* Botón de envío mientras se procesa */
button[type="submit"]:disabled {
  opacity: 0.7;
  cursor: wait;
}

/* ---------- Logo de texto (hasta tener el logo en imagen) ---------- */
.brand-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.6rem;
  background: #0051d5;
  color: #ffffff;
}

.brand-mark .material-symbols-outlined {
  font-size: 1.35rem;
}

/* ---------- Anclas bajo el menú fijo ---------- */
/* Evita que el menú superior tape el título al saltar a una sección */
section[id],
footer[id] {
  scroll-margin-top: 5.5rem;
}