/* =========================================================
   MIPE — brand skin on top of the NIXIN template
   Overrides colors, type and a few components to match
   MIPE Contable Financiero (see Catálogo de Servicios).
   ========================================================= */

:root {
  /* Brand palette — true navy blue (muted, no "azul rey") */
  --nixin-navy: #1B2A47;        /* card / mid navy */
  --nixin-navy-deep: #0A1428;   /* deep section backgrounds */
  --nixin-navy-mid: #22345C;    /* alt row navy */
  --nixin-navy-hover: #263A61;  /* lighter navy used on card hover */
  --nixin-gold: #9CA3AC;        /* silver — decorative fills (icon circles, dots, bullets) */
  --nixin-gold-dim: rgba(156, 163, 172, 0.55);
  --nixin-silver-text: #CBD2DD; /* accent text placed on dark navy backgrounds */
  --nixin-accent-ink: #46536E;  /* accent text placed on light backgrounds (replaces silver where contrast would be weak) */
  --mipe-cta-blue: #68E0F3;         /* sky blue from the logo mark — CTA buttons only, in testing */
  --mipe-cta-blue-dim: rgba(104, 224, 243, 0.55);
  --mipe-cta-blue-hover: #8CE8F6;   /* lighter tint for hover on filled buttons */
  --mipe-whatsapp-green: #25D366;   /* official WhatsApp green */
  --mipe-whatsapp-green-dim: rgba(37, 211, 102, 0.55);
  --mipe-whatsapp-green-hover: #1EBE59; /* slightly deeper green for hover */
  --mipe-ink: #14161A;
  --mipe-box: #F1F5FC;          /* light info box used throughout the catalog */
  --mipe-box-border: #E3EAF8;
}

/* ---------- Type ---------- */
/* "Playfair" and "Open Sans" are already pulled in by master.css's
   Google Fonts @import, so no extra network request is needed. */
body {
  font-family: "Open Sans", "Roboto", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.nixin-hero-headline,
.nixin-statement,
.nixin-gov-heading,
.nixin-connect-title,
.mipe-heading {
  font-family: "Playfair", "Georgia", serif;
  font-weight: 800;
}

.mipe-quote {
  font-family: "Playfair", "Georgia", serif;
  font-style: italic;
}

.nixin-header .header-logo a,
.nixin-eyebrow,
.nixin-lang-toggle,
.button-nixin-outline,
.nixin-header .header-menu .nav .nav-item > .nav-link {
  font-family: "Open Sans", "Roboto", sans-serif;
}

/* ---------- Header logo (image lockup) ---------- */
.nixin-header .header-logo img {
  height: 40px;
  width: auto;
  max-height: 40px;
}

.nixin-header .header-logo .nixin-logo-sub {
  margin-top: 4px;
}

.header-menu-extra .button-nixin-outline {
  padding: 10px 22px;
  font-size: 12px;
}

@media (max-width: 991.98px) {
  .nixin-header .header-menu-extra {
    display: none !important;
  }
}

/* ---------- CTA buttons — solid fill, testing the logo's sky-blue accent ---------- */
/* Applies to every .button-nixin-outline (Agenda tu diagnóstico, Descubre tu
   plan ideal, Enviar, etc.) EXCEPT the WhatsApp buttons below, which stay
   in WhatsApp's own green. This only re-skins buttons — icon circles,
   bullets and eyebrow labels still use --nixin-gold untouched.
   Filled background + dark navy text: at this brightness, sky-blue needs a
   dark label to stay readable (white text fails contrast on this tone). */
.button-nixin-outline {
  background: var(--mipe-cta-blue);
  color: var(--nixin-navy-deep);
  border-color: var(--mipe-cta-blue);
}

.button-nixin-outline:hover {
  background: var(--mipe-cta-blue-hover);
  border-color: var(--mipe-cta-blue-hover);
  color: var(--nixin-navy-deep);
}

/* WhatsApp buttons (header CTA + floating button) keep WhatsApp's own green,
   filled, with white text/icon — the standard WhatsApp pairing. */
.button-nixin-outline.is-whatsapp {
  background: var(--mipe-whatsapp-green);
  color: #fff;
  border-color: var(--mipe-whatsapp-green);
}

.button-nixin-outline.is-whatsapp:hover {
  background: var(--mipe-whatsapp-green-hover);
  border-color: var(--mipe-whatsapp-green-hover);
  color: #fff;
}

/* ---------- Footer "Aviso de Privacidad" link ----------
   The copyright line sits at 50% white opacity; give the link its own
   underline + brighter tone so it reads as clickable, not just more text. */
.nixin-footer-copyright a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
}

.nixin-footer-copyright a:hover {
  color: var(--mipe-cta-blue) !important;
}

/* ---------- Floating WhatsApp button ---------- */
.mipe-whatsapp-float {
  position: fixed;
  left: 24px;
  bottom: 24px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  z-index: 998;
  transition: transform .2s ease;
}

.mipe-whatsapp-float:hover {
  color: #fff;
  transform: scale(1.06);
}

/* ---------- Section helpers ---------- */
.bg-mipe-box {
  background-color: var(--mipe-box) !important;
  border: 1px solid var(--mipe-box-border);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.bg-mipe-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(10, 20, 40, 0.12);
  border-color: var(--nixin-navy);
}

.eyebrow-gold {
  display: inline-block;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--nixin-accent-ink);
  margin-bottom: 14px;
}

.eyebrow-gold.on-dark { color: var(--nixin-silver-text); }

/* ---------- Value / philosophy cards ---------- */
.mipe-value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .mipe-value-grid { grid-template-columns: 1fr; }
}

.mipe-value-card {
  background: var(--nixin-navy);
  border-radius: 6px;
  padding: 40px 32px;
  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.mipe-value-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(4, 10, 24, 0.35);
  background: var(--nixin-navy-hover);
}

.mipe-value-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--nixin-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--nixin-navy-deep);
  margin-bottom: 22px;
  transition: transform .3s ease;
}

.mipe-value-card:hover .mipe-value-icon { transform: scale(1.08); }

.mipe-value-card h5 {
  color: #fff;
  font-family: "Playfair", serif;
  font-weight: 700;
  margin-bottom: 12px;
}

.mipe-value-card p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  margin: 0;
}

/* ---------- Process row (Cómo te atendemos) ---------- */
.mipe-process-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.mipe-process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 150px;
  transition: transform .25s ease;
}

.mipe-process-step:hover { transform: translateY(-6px); }

.mipe-process-circle {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin-bottom: 16px;
  transition: box-shadow .25s ease, transform .25s ease;
}

.mipe-process-step:hover .mipe-process-circle {
  box-shadow: 0 12px 24px rgba(10, 20, 40, 0.25);
}

.mipe-process-circle.is-light {
  background: var(--mipe-box);
  color: var(--nixin-navy);
}

.mipe-process-circle.is-dark {
  background: var(--nixin-navy);
  color: #fff;
}

.mipe-process-step h6 {
  font-weight: 700;
  color: var(--nixin-navy);
  margin: 0;
  font-size: 0.95rem;
}

.mipe-process-arrow {
  color: var(--nixin-accent-ink);
  font-size: 22px;
  align-self: center;
  margin-top: 32px;
}

@media (max-width: 767px) {
  .mipe-process-arrow { display: none; }
}

/* ---------- Service cards ---------- */
.mipe-service-card {
  background: var(--nixin-navy);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 36px 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 18px rgba(4, 10, 24, 0.18);
  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.mipe-service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 44px rgba(4, 10, 24, 0.4);
  background: var(--nixin-navy-hover);
}

.mipe-service-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--nixin-gold);
  color: var(--nixin-navy-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
  transition: transform .3s ease;
}

.mipe-service-card:hover .mipe-service-icon { transform: scale(1.08) rotate(-4deg); }

.mipe-service-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--nixin-silver-text);
  margin-bottom: 8px;
}

.mipe-service-card h5 {
  color: #fff;
  font-weight: 700;
  margin-bottom: 6px;
}

.mipe-service-tagline {
  font-style: italic;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.9rem;
  margin-bottom: 18px;
}

.mipe-service-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}

.mipe-service-card ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
}

.mipe-service-card ul li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nixin-gold);
}

.mipe-service-benefit {
  background: var(--mipe-box);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 0.87rem;
  color: var(--nixin-navy);
  margin-top: auto;
  margin-bottom: 10px;
}

.mipe-service-benefit strong {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--nixin-accent-ink);
  margin-bottom: 4px;
}

.mipe-service-noincluye {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

/* ---------- Special services mini-grid ---------- */
.mipe-special-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--nixin-navy-mid), var(--nixin-navy));
  border-radius: 6px;
  padding: 24px 22px;
  height: 100%;
  min-height: 108px;
  min-width: 0;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 16px rgba(4, 10, 24, 0.16);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.mipe-special-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 32px rgba(4, 10, 24, 0.38);
}

/* Faint oversized icon used as the card's on-brand "background image" */
.mipe-special-bg-icon {
  position: absolute;
  right: -14px;
  bottom: -20px;
  font-size: 104px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.10);
  z-index: 0;
  pointer-events: none;
  transition: color .25s ease, transform .4s ease;
}

.mipe-special-card:hover .mipe-special-bg-icon {
  color: rgba(255, 255, 255, 0.16);
  transform: scale(1.08) rotate(-4deg);
}

.mipe-special-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.mipe-special-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--nixin-gold);
  color: var(--nixin-navy-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: transform .25s ease;
}

.mipe-special-card:hover .mipe-special-icon { transform: scale(1.08); }

.mipe-special-card h6 {
  color: #fff;
  font-weight: 700;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.3;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

/* ---------- Plans (pricing) ---------- */
.mipe-plans-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .mipe-plans-row { grid-template-columns: 1fr; }
}

.mipe-plan-card {
  background: var(--nixin-navy);
  border-radius: 8px;
  padding: 40px 32px;
  color: #fff;
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 6px 18px rgba(4, 10, 24, 0.18);
}

.mipe-plan-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 44px rgba(4, 10, 24, 0.4);
}

.mipe-plan-card.is-featured {
  background: var(--nixin-gold);
  color: var(--nixin-navy-deep);
  transform: translateY(-10px);
}

.mipe-plan-card.is-featured:hover {
  transform: translateY(-18px);
  box-shadow: 0 22px 44px rgba(4, 10, 24, 0.3);
}

@media (max-width: 900px) {
  .mipe-plan-card.is-featured { transform: none; }
  .mipe-plan-card.is-featured:hover { transform: translateY(-8px); }
}

.mipe-plan-card h4 {
  font-family: "Playfair", serif;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 14px;
  color: #fff;
}

.mipe-plan-card.is-featured h4 { color: var(--nixin-navy-deep); }

.mipe-plan-card .mipe-plan-desc {
  font-style: italic;
  font-size: 0.9rem;
  min-height: 44px;
  opacity: 0.85;
}

.mipe-plan-card.is-featured .mipe-plan-desc { opacity: 0.75; }

.mipe-plan-card ul {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
}

.mipe-plan-card ul li {
  padding: 7px 0;
  font-size: 0.94rem;
}

.mipe-plan-card ul li i {
  margin-right: 8px;
  color: var(--nixin-gold);
}

.mipe-plan-card.is-featured ul li i { color: var(--nixin-navy-deep); }

/* ---------- Timeline (Así trabajamos contigo) ---------- */
.mipe-timeline-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

@media (max-width: 991px) {
  .mipe-timeline-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 575px) {
  .mipe-timeline-grid { grid-template-columns: repeat(2, 1fr); }
}

.mipe-timeline-step {
  border-radius: 6px;
  padding: 26px 18px;
  min-height: 140px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.mipe-timeline-step:hover { transform: translateY(-6px); }

.mipe-timeline-step.is-light {
  background: var(--mipe-box);
  color: var(--nixin-navy);
}

.mipe-timeline-step.is-light:hover {
  box-shadow: 0 16px 30px rgba(10, 20, 40, 0.16);
}

.mipe-timeline-step.is-dark {
  background: var(--nixin-navy);
  color: #fff;
}

.mipe-timeline-step.is-dark:hover {
  background: var(--nixin-navy-hover);
  box-shadow: 0 18px 34px rgba(4, 10, 24, 0.35);
}

.mipe-timeline-step .num {
  font-family: "Playfair", serif;
  font-weight: 800;
  font-size: 1.6rem;
  display: block;
  margin-bottom: 14px;
}

.mipe-timeline-step.is-light .num { color: var(--nixin-navy); }
.mipe-timeline-step.is-dark .num { color: var(--nixin-silver-text); }

.mipe-timeline-step h6 {
  font-weight: 700;
  margin: 0;
  font-size: 0.95rem;
}

.mipe-timeline-step.is-light h6 { color: var(--nixin-navy); }
.mipe-timeline-step.is-dark h6 { color: #fff; }

/* ---------- Diagnóstico questions ---------- */
.mipe-question {
  display: flex;
  gap: 16px;
  margin-bottom: 22px;
}

.mipe-question .q-mark {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--nixin-navy);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease;
}

.mipe-question:hover .q-mark { transform: scale(1.1); }

.mipe-question p {
  margin: 0;
  padding-top: 4px;
  color: var(--mipe-ink);
}

/* ---------- Contact tiles ---------- */
.mipe-contact-tile {
  text-align: center;
  transition: transform .25s ease;
}

.mipe-contact-tile:hover { transform: translateY(-6px); }

.mipe-contact-tile .icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--nixin-gold);
  color: var(--nixin-navy-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 10px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.mipe-contact-tile:hover .icon-circle {
  transform: scale(1.08);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
}

.mipe-contact-tile a { color: #fff; }
.mipe-contact-tile a:hover { color: var(--nixin-silver-text); }

/* ---------- Footer ---------- */
.nixin-footer-badges { display: none; }