/* ==========================================================================
   Estilos generales del sitio
   Variables (colores, tipografia) y botones base, reutilizables en
   cualquier template del theme (no solo en el header).
   ========================================================================== */

:root {
  --iplan-pink: #FD006E;
  --iplan-purple: #7a2fe0;
  --iplan-blue: #3d6fee;
  --iplan-grey: #6e6e76;
  --iplan-dark: #2b1b4d;
  --iplan-white: #ffffff;
  --iplan-gradient: linear-gradient(90deg, var(--iplan-pink) 0%, var(--iplan-purple) 55%, var(--iplan-blue) 100%);

  --iplan-bg-soft: #eef2fb;
  --iplan-card-bg: #f6f9fd;

  --font-base: "Poppins", "Segoe UI", Arial, sans-serif;
}

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

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--iplan-dark);
}

a {
  color: inherit;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: var(--font-base);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.btn:hover {
  opacity: 0.85;
}

/* Boton con borde, fondo transparente (ej: "Contacto") */
.btn--outline {
  border-color: var(--iplan-pink);
  color: var(--iplan-pink);
  background: transparent;
  padding: 8px 22px;
  font-size: 13px;
}

/* Boton pill blanco solido (ej: "Quiero asesoramiento") */
.btn--pill {
  background: var(--iplan-white);
  color: var(--iplan-dark);
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
}

.btn--pill svg {
  width: 14px;
  height: 14px;
  color: var(--iplan-pink);
}

/* Boton solido de marca (ej: CTAs en el cuerpo del sitio) */
.btn--solid {
  background: var(--iplan-pink);
  color: var(--iplan-white);
  padding: 10px 24px;
  font-size: 14px;
}

/* ---------- Titulos ---------- */

.heading-brand {
  margin: 0;
  color: var(--iplan-pink);
  font-weight: 800;
  text-align: center;
}

/* ---------- Inputs (campos tipo dropdown) ---------- */

.field-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 4px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(43, 27, 77, 0.08);
  font-family: var(--font-base);
  font-size: 14px;
  color: var(--iplan-grey);
  text-align: left;
  cursor: pointer;
  max-width: 300px;
  background-color:#fff;
  border-radius: 16px;
}

.field-toggle:last-child {
  border-bottom: 0;
}

.field-toggle__chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--iplan-grey);
  transition: transform 0.2s ease;
}

.field-toggle[aria-expanded="true"] .field-toggle__chevron {
  transform: rotate(180deg);
}

input.field-toggle,
textarea.field-toggle {
  cursor: text;
  resize: none;
}

input.field-toggle::placeholder,
textarea.field-toggle::placeholder {
  color: var(--iplan-grey);
  opacity: 1;
  text-align: center;
}

/* El <select> nativo trae su propio recuadro/flecha por mas que se le saque
   el border: hay que resetear el "appearance" para que mida y se vea igual
   que los input/textarea .field-toggle. */
select.field-toggle {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 16px;
  padding-right: 24px;
}

.node__content{
	margin-top:0;
}
/* main.mercury_empresas {
    margin-top: 132px;
} */
 main.mercury_empresas .title {
    display: none;
}