/* =====================================================================
   InQuality — Casos de Éxito
   Reproduce fielmente el diseño exportado de Claude Design.
   Todo va scopeado bajo .inq-caso para no chocar con tu tema actual.
   ===================================================================== */

.inq-caso {
  /* ---- Brand tokens (del sistema de diseño InQuality) ---- */
  --inq-pink: #ed3e8f;
  --inq-blue: #24a9e3;
  --inq-orange: #f59845;
  --inq-yellow: #f0c34f;
  --inq-ink: #2b2b2f;
  --inq-gray-700: #4a4a52;
  --inq-gray-500: #7c7c86;
  --inq-gray-200: #e4e4ea;
  --inq-gray-100: #f3f3f6;

  --inq-gradient-warm: linear-gradient(90deg, #ed3e8f 0%, #f59845 60%, #f0c34f 100%);
  --shadow-brand: 0 12px 32px rgba(237, 62, 143, 0.30);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  color: var(--inq-ink);
  overflow-x: hidden;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

.inq-caso *, .inq-caso *::before, .inq-caso *::after { box-sizing: border-box; }
.inq-caso h1, .inq-caso h2, .inq-caso h3, .inq-caso p { margin: 0; }

@keyframes inqFloat { 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-18px) scale(1.04);} }
@keyframes inqFade  { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }

/* ---- Barra superior de marca (reemplaza la nav del export) ---- */
.inq-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(20px, 5vw, 64px);
  background: rgba(255,255,255,0.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--inq-gray-200);
}
.inq-topbar img { height: 34px; width: auto; display: block; }
.inq-topbar a.inq-topcta {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; border-radius: 999px;
  background: var(--inq-gradient-warm); color: #fff;
  font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 10px 22px; box-shadow: var(--shadow-brand);
}

/* ===================== HERO ===================== */
.inq-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(110% 90% at 82% 8%, #f8ad5b 0%, rgba(248,173,91,0) 48%),
    radial-gradient(120% 120% at 8% 95%, #ec3c8d 0%, rgba(236,60,141,0) 55%),
    linear-gradient(140deg, #f59455 0%, #ef5d86 46%, #ed3e8f 100%);
  padding: clamp(28px,5vw,56px) clamp(20px,5vw,64px) clamp(110px,12vw,170px);
}
.inq-hero .inq-blob { position: absolute; border-radius: 50%; }
.inq-hero .inq-blob-1 {
  width: 46vw; height: 46vw; max-width: 520px; max-height: 520px; top: -14vw; right: -8vw;
  background: radial-gradient(circle at 50% 50%, rgba(255,210,150,0.55), rgba(255,210,150,0) 68%);
  animation: inqFloat 11s var(--ease-out) infinite;
}
.inq-hero .inq-blob-2 {
  width: 38vw; height: 38vw; max-width: 440px; max-height: 440px; bottom: -6vw; left: -10vw;
  background: radial-gradient(circle at 50% 50%, rgba(237,62,143,0.5), rgba(237,62,143,0) 70%);
  animation: inqFloat 14s var(--ease-out) infinite;
}
.inq-hero-inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; }
.inq-hero-logo { height: clamp(66px,9vw,96px); width: auto; display: block; margin: 0 0 clamp(28px,5vw,52px) -6px; }
.inq-hero-grid { display: flex; flex-wrap: wrap; gap: clamp(32px,5vw,64px); align-items: flex-start; }
.inq-hero-copy { flex: 1 1 440px; min-width: 0; }
.inq-overline { font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: clamp(11px,1.4vw,13px); color: #fff; opacity: 0.92; }
.inq-hero h1 { font-weight: 800; text-transform: uppercase; letter-spacing: 0.005em; line-height: 1.04; font-size: clamp(30px,5.4vw,58px); color: #fff; margin-top: 18px; text-wrap: balance; }
.inq-hero-sub { font-size: clamp(15px,1.9vw,19px); font-weight: 500; color: #fff; opacity: 0.95; line-height: 1.55; margin-top: clamp(18px,3vw,26px); max-width: 560px; text-wrap: pretty; }
.inq-hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: clamp(12px,2vw,18px); margin-top: clamp(28px,4vw,40px); max-width: 560px; }
.inq-glass { background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.30); border-radius: 18px; padding: 18px 20px; backdrop-filter: blur(6px); }
.inq-glass .v { font-weight: 800; font-size: clamp(26px,4vw,36px); line-height: 1; color: #fff; }
.inq-glass .l { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; color: #fff; opacity: 0.88; margin-top: 8px; }

/* Hero form card */
.inq-hero-form { flex: 1 1 360px; max-width: 460px; width: 100%; background: #fff; border-radius: 28px; padding: clamp(24px,3.2vw,38px); box-shadow: 0 28px 64px rgba(43,43,47,0.22); }
.inq-hero-form h2 { font-weight: 800; text-transform: uppercase; font-size: clamp(17px,2.2vw,21px); line-height: 1.15; margin-bottom: 6px; color: var(--inq-ink); }
.inq-hero-form .form-sub { font-size: 13.5px; color: var(--inq-gray-500); margin-bottom: 22px; line-height: 1.5; }
.inq-hero-form .form-fine { margin-top: 14px; font-size: 11.5px; color: #a3a3ad; line-height: 1.5; text-align: center; }
/* Estiliza los campos del shortcode de formulario (WPForms / CF7) */
.inq-hero-form input[type=text], .inq-hero-form input[type=email], .inq-hero-form input[type=tel], .inq-hero-form textarea {
  width: 100%; min-height: 52px; border: 2px solid var(--inq-gray-200); border-radius: 14px;
  padding: 13px 16px; font: inherit; font-size: 16px; color: var(--inq-ink); background: #fff; outline: none;
  transition: border-color .18s, box-shadow .18s; margin-bottom: 14px;
}
.inq-hero-form input:focus, .inq-hero-form textarea:focus { border-color: var(--inq-blue); box-shadow: 0 0 0 3px rgba(36,169,227,0.22); }
.inq-hero-form button, .inq-hero-form input[type=submit] {
  margin-top: 4px; width: 100%; min-height: 54px; border: none; cursor: pointer; border-radius: 999px;
  background: var(--inq-gradient-warm); color: #fff; font-family: inherit; font-weight: 700; font-size: 16px;
  letter-spacing: 0.01em; box-shadow: var(--shadow-brand); transition: transform .14s var(--ease-out), filter .14s var(--ease-out);
}
.inq-hero-form button:hover, .inq-hero-form input[type=submit]:hover { filter: brightness(1.06); }

/* organic curve divider */
.inq-hero-curve { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(60px,8vw,120px); display: block; }

/* ===================== SECTION: EL PROBLEMA ===================== */
.inq-problema { background: #fff; color: var(--inq-ink); padding: clamp(56px,9vw,104px) clamp(20px,5vw,64px); }
.inq-problema-inner { max-width: 1080px; margin: 0 auto; }
.inq-problema-grid { display: flex; flex-wrap: wrap; gap: clamp(28px,5vw,64px); align-items: center; }
.inq-bignum-col { flex: 0 1 360px; min-width: 240px; }
.inq-bignum { font-weight: 800; font-size: clamp(72px,13vw,140px); line-height: 0.9; background: var(--inq-gradient-warm); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.inq-bignum-label { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(13px,1.8vw,16px); color: var(--inq-ink); margin-top: 10px; line-height: 1.3; }
.inq-bignum-sublabel { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(11px,1.5vw,13px); color: var(--inq-gray-500); margin-top: 4px; }
.inq-problema-body { flex: 1 1 380px; min-width: 260px; }
.inq-overline-pink { font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; color: var(--inq-pink); }
.inq-problema-body h2 { font-weight: 800; text-transform: uppercase; line-height: 1.2; font-size: clamp(20px,3vw,28px); color: var(--inq-ink); margin: 14px 0 16px; text-wrap: balance; }
.inq-problema-body p.lead { font-size: clamp(14px,1.8vw,17px); color: var(--inq-gray-700); line-height: 1.6; margin-bottom: 26px; text-wrap: pretty; }
.inq-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 16px; }
.inq-stat-card { background: #fff; border: 1px solid var(--inq-gray-200); border-radius: 20px; padding: 22px 24px; box-shadow: 0 1px 3px rgba(43,43,47,0.06); }
.inq-stat-card .v { font-weight: 800; font-size: clamp(28px,4vw,38px); line-height: 1; color: var(--inq-ink); }
.inq-stat-card .l { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 11.5px; color: var(--inq-gray-500); margin-top: 8px; line-height: 1.4; }

/* ===================== SECTION: LO QUE HICIMOS ===================== */
.inq-solucion { background: #22222a; color: #fff; padding: clamp(56px,9vw,104px) clamp(20px,5vw,64px); }
.inq-solucion-inner { max-width: 1080px; margin: 0 auto; }
.inq-solucion h2 { font-weight: 800; text-transform: uppercase; line-height: 1.08; font-size: clamp(26px,4.5vw,44px); margin-bottom: 18px; text-wrap: balance; }
.inq-solucion .intro { font-size: clamp(14px,1.8vw,17px); color: rgba(255,255,255,0.78); line-height: 1.6; max-width: 520px; text-wrap: pretty; }
.inq-solucion .intro strong { color: #fff; font-weight: 700; }
.inq-overline-orange { font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; color: var(--inq-orange); margin: clamp(34px,5vw,48px) 0 18px; }
.inq-result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: clamp(14px,2vw,20px); }
.inq-result-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 24px 26px; }
.inq-result-card .v { font-weight: 800; font-size: clamp(26px,3.4vw,34px); line-height: 1; background: var(--inq-gradient-warm); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; width: max-content; }
.inq-result-card .l { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; color: rgba(255,255,255,0.72); margin-top: 12px; line-height: 1.4; }
.inq-steps { display: flex; flex-direction: column; gap: 14px; margin-top: clamp(34px,5vw,48px); max-width: 760px; }
.inq-step { display: flex; align-items: center; gap: 18px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 18px; padding: 16px 20px; }
.inq-step .n { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--inq-gradient-warm); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: #fff; }
.inq-step .t { font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: clamp(12px,1.6vw,14px); line-height: 1.35; }

/* ===================== SECTION: QUÉ INCLUYE ===================== */
.inq-incluye { background: #f4f4f7; padding: clamp(56px,9vw,104px) clamp(20px,5vw,64px); }
.inq-incluye-inner { max-width: 1080px; margin: 0 auto; }
.inq-incluye h2 { font-weight: 800; text-transform: uppercase; line-height: 1.12; font-size: clamp(22px,3.6vw,38px); color: var(--inq-ink); margin-bottom: clamp(32px,5vw,48px); text-align: center; text-wrap: balance; }
.inq-incluye-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: clamp(14px,2vw,22px); }
.inq-incluye-card { position: relative; background: #fff; border: 1px solid var(--inq-gray-200); border-radius: 20px; padding: 26px 26px 24px; box-shadow: 0 1px 3px rgba(43,43,47,0.06); overflow: hidden; }
.inq-incluye-card .bar { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--inq-gradient-warm); }
.inq-incluye-card .n { font-weight: 800; font-size: 14px; color: #f1a04a; margin-bottom: 10px; }
.inq-incluye-card p { font-weight: 600; font-size: clamp(14px,1.7vw,16px); color: var(--inq-ink); line-height: 1.5; }
.inq-cta-wrap { display: flex; justify-content: center; margin-top: clamp(36px,5vw,52px); }
.inq-cta-btn { min-height: 56px; padding: 0 clamp(26px,4vw,40px); border: none; cursor: pointer; border-radius: 999px; background: var(--inq-gradient-warm); color: #fff; font-family: inherit; font-weight: 700; font-size: clamp(14px,1.8vw,16px); letter-spacing: 0.02em; text-transform: uppercase; box-shadow: var(--shadow-brand); transition: transform .14s var(--ease-out), filter .14s var(--ease-out); display: inline-flex; align-items: center; text-decoration: none; }
.inq-cta-btn:hover { filter: brightness(1.06); }

/* ===================== SECTION: CONTACTO ===================== */
.inq-contacto { background: #24a9e3; color: #fff; padding: clamp(56px,9vw,104px) clamp(20px,5vw,64px); }
.inq-contacto-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.inq-contacto h2 { font-weight: 800; text-transform: uppercase; line-height: 1.1; font-size: clamp(24px,4.2vw,42px); margin-bottom: 18px; text-wrap: balance; }
.inq-contacto p.lead { font-size: clamp(14px,1.9vw,18px); color: rgba(255,255,255,0.78); line-height: 1.6; margin: 0 auto clamp(30px,4vw,42px); max-width: 620px; text-wrap: pretty; }
.inq-contacto .tag { font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; color: var(--inq-orange); margin-bottom: 22px; }
.inq-contacto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 16px; max-width: 620px; margin: 0 auto; }
.inq-contacto-card { text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 96px; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 22px 20px; transition: border-color .18s, background .18s; }
.inq-contacto-card:hover { background: rgba(255,255,255,0.09); }
.inq-contacto-card .k { font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; }
.inq-contacto-card.email .k { color: var(--inq-pink); }
.inq-contacto-card.wa .k { color: var(--inq-orange); }
.inq-contacto-card .d { font-weight: 600; font-size: clamp(14px,2vw,17px); color: #fff; word-break: break-word; }
.inq-contacto-logo { height: 34px; width: auto; opacity: 0.85; margin-top: clamp(40px,6vw,60px); }