/*
 * CENTAURI · COMO CONSEGUIR CLIENTES INDUSTRIALES · V4 ISOLATED VISUAL
 * Scope: .cciv4 / .cciv4-preview only. No dependency on the production bundle.
 */

:root {
  --cciv4-ink: #07111f;
  --cciv4-ink-2: #0b1728;
  --cciv4-ink-3: #12233a;
  --cciv4-paper: #f4f7fb;
  --cciv4-white: #ffffff;
  --cciv4-copy: #142238;
  --cciv4-muted: #526176;
  --cciv4-muted-dark: #aab8cc;
  --cciv4-line: #d9e1ec;
  --cciv4-line-dark: rgba(188, 207, 235, .17);
  --cciv4-blue: #1f67ff;
  --cciv4-blue-deep: #124aca;
  --cciv4-cyan: #31c4ff;
  --cciv4-mint: #63e8c0;
  --cciv4-warm: #ffb86b;
  --cciv4-radius: 26px;
  --cciv4-shadow: 0 30px 80px rgba(14, 34, 67, .14);
  --cciv4-ease: cubic-bezier(.22, 1, .36, 1);
}

.cciv4,
.cciv4 *,
.cciv4-preview-nav,
.cciv4-preview-nav * { box-sizing: border-box; }

body.cciv4-preview {
  margin: 0;
  overflow-x: hidden;
  background: var(--cciv4-paper);
  color: var(--cciv4-copy);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.cciv4-preview button,
.cciv4-preview input { font: inherit; }

.cciv4-preview a { color: inherit; }

.cciv4-skip {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 12px 18px;
  border-radius: 10px;
  background: #fff;
  color: #08111f;
  font-weight: 800;
  transform: translateY(-150%);
  transition: transform .2s ease;
}

.cciv4-skip:focus { transform: translateY(0); }

.cciv4-preview-nav {
  position: sticky;
  z-index: 50;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 clamp(20px, 4vw, 64px);
  border-bottom: 1px solid rgba(196, 214, 241, .14);
  background: rgba(6, 15, 28, .82);
  color: #fff;
  backdrop-filter: blur(18px);
}

.cciv4-preview-nav a {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  text-decoration: none;
  letter-spacing: .12em;
}

.cciv4-preview-nav a > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(45, 115, 255, .8), rgba(41, 200, 255, .2));
  font: 700 14px/1 Georgia, serif;
}

.cciv4-preview-nav b { font-size: 13px; }
.cciv4-preview-nav p { margin: 0; color: #b6c4d8; font-size: 13px; }

.cciv4 {
  position: relative;
  overflow: clip;
  background: var(--cciv4-paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cciv4 img { display: block; max-width: 100%; }
.cciv4 button,
.cciv4 a { -webkit-tap-highlight-color: transparent; }

.cciv4 button:focus-visible,
.cciv4 a:focus-visible,
.cciv4 input:focus-visible {
  outline: 3px solid var(--cciv4-cyan);
  outline-offset: 4px;
}

.cciv4-wrap {
  position: relative;
  z-index: 2;
  width: min(1340px, calc(100% - 48px));
  margin-inline: auto;
}

.cciv4-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  color: #c4d2e6;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.4;
}

.cciv4-kicker > span {
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--cciv4-blue), var(--cciv4-cyan));
  box-shadow: 0 0 14px rgba(49, 196, 255, .5);
}

.cciv4-kicker-dark { color: #3f536c; }

.cciv4-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 50px;
  padding: 12px 19px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform .25s var(--cciv4-ease), box-shadow .25s ease, border-color .25s ease;
}

.cciv4-button:hover { transform: translateY(-2px); }

.cciv4-button-primary {
  background: linear-gradient(135deg, #1d62ff, #2588ff 54%, #29b8ee);
  color: #fff;
  box-shadow: 0 14px 32px rgba(24, 100, 242, .28), inset 0 1px rgba(255, 255, 255, .3);
}

.cciv4-button-quiet {
  border-color: rgba(204, 220, 244, .24);
  background: rgba(255, 255, 255, .065);
  color: #e5edf8;
}

/* HERO */
.cciv4-hero {
  position: relative;
  min-height: calc(100svh - 64px);
  overflow: hidden;
  background:
    radial-gradient(circle at 83% 22%, rgba(31, 103, 255, .2), transparent 31%),
    radial-gradient(circle at 54% 82%, rgba(35, 196, 255, .09), transparent 28%),
    linear-gradient(145deg, #050d18 0%, #081524 52%, #0a1728 100%);
  color: #f7faff;
}

.cciv4-hero::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(181, 207, 240, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(181, 207, 240, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  content: "";
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), transparent 90%);
}

.cciv4-orbit {
  position: absolute;
  border: 1px solid rgba(97, 169, 255, .13);
  border-radius: 50%;
  pointer-events: none;
}

.cciv4-orbit::after {
  position: absolute;
  top: 50%;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cciv4-cyan);
  box-shadow: 0 0 24px rgba(49, 196, 255, .9);
  content: "";
}

.cciv4-orbit-a { right: -230px; top: -190px; width: 720px; height: 720px; transform: rotate(-24deg); }
.cciv4-orbit-b { left: 34%; bottom: -370px; width: 620px; height: 620px; transform: rotate(65deg); opacity: .6; }

.cciv4-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(500px, 1.02fr);
  gap: clamp(38px, 5vw, 78px);
  align-items: center;
  min-height: min(736px, calc(100svh - 64px));
  padding-block: clamp(54px, 8vh, 82px) 70px;
}

.cciv4-hero-copy { min-width: 0; }

.cciv4-hero h1 {
  max-width: 24ch;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.9rem, 4vw, 3.9rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .98;
  text-wrap: balance;
}

.cciv4-hero h1 em { color: #80caff; font-style: italic; }

.cciv4-lede {
  max-width: 64ch;
  margin: 26px 0 0;
  color: #c1cee0;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.62;
}

.cciv4-sector-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 27px 0 0;
  padding: 0;
  border: 0;
}

.cciv4-sector-picker legend {
  width: 100%;
  margin-bottom: 4px;
  color: #91a4bf;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}

.cciv4-sector-picker button {
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid rgba(195, 214, 239, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  color: #bcc9dc;
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.cciv4-sector-picker button:hover { border-color: rgba(80, 176, 255, .55); color: #fff; transform: translateY(-1px); }
.cciv4-sector-picker button[aria-pressed="true"] { border-color: rgba(78, 171, 255, .65); background: rgba(32, 107, 255, .22); color: #fff; box-shadow: inset 0 0 20px rgba(43, 146, 255, .08); }

.cciv4-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }

.cciv4-honesty {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 62ch;
  margin: 21px 0 0;
  color: #90a3bd;
  font-size: 12px;
  line-height: 1.55;
}

.cciv4-honesty i { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--cciv4-mint); box-shadow: 0 0 12px rgba(99, 232, 192, .5); }

.cciv4-hero-visual { position: relative; min-width: 0; min-height: 584px; margin: 0; }

.cciv4-photo-frame {
  position: absolute;
  inset: 14px 14px auto 0;
  height: 420px;
  overflow: hidden;
  border: 1px solid rgba(203, 222, 247, .2);
  border-radius: 32px 32px 12px 32px;
  background: #101c2d;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
}

.cciv4-photo-frame::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 12, 22, .03) 25%, rgba(5, 16, 29, .75) 100%), linear-gradient(90deg, rgba(16, 84, 182, .14), transparent 55%);
  content: "";
}

.cciv4-photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 57% 50%; filter: saturate(.82) contrast(1.05); }

.cciv4-photo-label {
  position: absolute;
  z-index: 2;
  left: 20px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #f4f8ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
}

.cciv4-photo-label i { width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 5px rgba(255, 255, 255, .12); }

.cciv4-journey-card {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 45px;
  left: 34px;
  overflow: hidden;
  border: 1px solid rgba(190, 215, 244, .2);
  border-radius: 22px;
  background: rgba(8, 20, 35, .91);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
  backdrop-filter: blur(18px);
}

.cciv4-journey-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 34%;
  height: 2px;
  background: linear-gradient(90deg, var(--cciv4-blue), var(--cciv4-cyan));
  content: "";
  transition: transform .6s var(--cciv4-ease);
}

[data-v4-scene="hero"][data-v4-phase="1"] .cciv4-journey-card::before { transform: translateX(100%); }
[data-v4-scene="hero"][data-v4-phase="2"] .cciv4-journey-card::before { transform: translateX(194%); }

.cciv4-journey-card header { display: flex; justify-content: space-between; gap: 16px; padding: 14px 17px; border-bottom: 1px solid var(--cciv4-line-dark); }
.cciv4-journey-card header span,
.cciv4-journey-card header b { color: #9db1ca; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.cciv4-journey-card header b { color: #63caff; }
.cciv4-journey-card ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.cciv4-journey-card li { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 86px; padding: 14px 13px; border-right: 1px solid var(--cciv4-line-dark); color: #7f91aa; transition: background .45s ease, color .45s ease; }
.cciv4-journey-card li:last-child { border-right: 0; }
.cciv4-journey-card li > span { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(162, 190, 225, .2); border-radius: 11px; font-size: 17px; }
.cciv4-journey-card li div { min-width: 0; }
.cciv4-journey-card li small { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.cciv4-journey-card li b { display: -webkit-box; overflow: hidden; color: inherit; font-size: 12px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

[data-v4-scene="hero"][data-v4-phase="0"] [data-v4-phase-item="0"],
[data-v4-scene="hero"][data-v4-phase="1"] [data-v4-phase-item="1"],
[data-v4-scene="hero"][data-v4-phase="2"] [data-v4-phase-item="2"] { background: rgba(35, 113, 255, .15); color: #eaf4ff; }

[data-v4-scene="hero"][data-v4-phase="0"] [data-v4-phase-item="0"] > span,
[data-v4-scene="hero"][data-v4-phase="1"] [data-v4-phase-item="1"] > span,
[data-v4-scene="hero"][data-v4-phase="2"] [data-v4-phase-item="2"] > span { border-color: rgba(55, 183, 255, .66); background: rgba(38, 128, 255, .22); color: #80d7ff; box-shadow: 0 0 24px rgba(36, 136, 255, .16); }

.cciv4-request-pop {
  position: absolute;
  z-index: 6;
  top: 42px;
  right: -20px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: min(390px, calc(100% - 28px));
  padding: 14px;
  border: 1px solid rgba(123, 217, 255, .48);
  border-radius: 17px;
  background: rgba(247, 252, 255, .96);
  color: #0b1c31;
  box-shadow: 0 22px 60px rgba(0, 24, 63, .34), 0 0 34px rgba(46, 174, 255, .14);
  opacity: 0;
  transform: translate3d(18px, -8px, 0) scale(.97);
  transition: opacity .55s ease, transform .65s var(--cciv4-ease);
}

[data-v4-scene="hero"][data-v4-phase="2"] .cciv4-request-pop { opacity: 1; transform: none; }
.cciv4-request-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: linear-gradient(145deg, #155eff, #2ebfff); color: #fff; font-size: 20px; }
.cciv4-request-pop div { min-width: 0; }
.cciv4-request-pop small { display: block; margin-bottom: 4px; color: #2c68c4; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.cciv4-request-pop b { display: block; overflow: hidden; font-size: 13px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.cciv4-request-pop p { overflow: hidden; margin: 3px 0 0; color: #50627a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cciv4-request-pop time { color: #4d6076; font-size: 12px; }

.cciv4-motion-toggle {
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 98px;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid rgba(190, 211, 239, .25);
  border-radius: 999px;
  background: rgba(7, 17, 31, .88);
  color: #dbe7f6;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.cciv4-motion-toggle > [data-v4-toggle-icon] { min-width: 13px; color: #72d2ff; font-size: 14px; }
.cciv4-hero-visual > figcaption { position: absolute; left: 35px; bottom: -2px; max-width: 330px; margin: 0; color: #8295ae; font-size: 12px; line-height: 1.35; }

/* V5 · Outlook reconocible como escena principal + reel fotográfico secundario. */
.cciv5-hero-visual { min-height: 620px; }
.cciv5-hero-outlook { position: absolute; top: 0; right: 0; width: min(100%, 520px); aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(169, 197, 231, .35); border-radius: 25px; background: #f5f7fb; color: #172033; box-shadow: 0 44px 110px -44px #000, inset 0 1px #fff; }
.cciv5-outlook-top { display: grid; grid-template-columns: 34px auto 1fr 34px; align-items: center; gap: 9px; min-height: 52px; padding: 7px 11px; background: #0f6cbd; color: #fff; }
.cciv5-outlook-top > b { font-family: "Segoe UI", Arial, sans-serif; font-size: 15px; font-weight: 650; }
.cciv5-outlook-top nav { display: flex; align-self: stretch; align-items: center; gap: 18px; margin-left: 9px; font-size: 11px; }
.cciv5-outlook-top nav span:first-child { align-self: stretch; display: flex; align-items: center; border-bottom: 2px solid #fff; }
.cciv5-outlook-top em { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(255,255,255,.14); font-size: 10px; font-style: normal; }
.cciv5-outlook-mark { position: relative; display: block; width: 32px; height: 32px; border-radius: 5px; background: linear-gradient(135deg, #1787d4 0 46%, #0b5fa8 47% 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.cciv5-outlook-mark::before { position: absolute; z-index: 2; top: 5px; bottom: 5px; left: -3px; display: grid; width: 18px; place-items: center; border-radius: 3px; background: #126fbd; color: #fff; content: "O"; font: 700 11px/1 "Segoe UI",Arial,sans-serif; box-shadow: 2px 2px 7px rgba(0,55,105,.25); }
.cciv5-outlook-mark::after { position: absolute; top: 8px; right: 4px; width: 14px; height: 11px; border: 1px solid rgba(255,255,255,.92); border-radius: 2px; background: linear-gradient(150deg, transparent 47%, rgba(255,255,255,.9) 48% 51%, transparent 52%); content: ""; }
.cciv5-outlook-search { display: flex; align-items: center; gap: 8px; width: calc(100% - 28px); height: 34px; margin: 8px 14px; padding: 0 12px; border: 1px solid #d9dee8; border-radius: 7px; background: #fff; color: #657287; font-size: 11px; }
.cciv5-outlook-search i { color: #155fa3; font-size: 16px; font-style: normal; }
.cciv5-outlook-grid { display: grid; grid-template-columns: 42px minmax(146px, .85fr) minmax(0, 1.15fr); height: calc(100% - 141px); border-block: 1px solid #e1e5ec; }
.cciv5-outlook-rail { display: grid; align-content: start; justify-items: center; gap: 5px; padding-top: 9px; border-right: 1px solid #e2e6ec; background: #f0f2f6; }
.cciv5-outlook-rail > * { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 5px; color: #526277; font-size: 14px; }
.cciv5-outlook-rail b { background: #dceafb; color: #0f6cbd; }
.cciv5-outlook-list { min-width: 0; overflow: hidden; border-right: 1px solid #e0e4eb; background: #fff; }
.cciv5-outlook-list > header { display: flex; align-items: center; justify-content: space-between; min-height: 43px; padding: 0 10px; border-bottom: 1px solid #e8ebef; }
.cciv5-outlook-list > header b { font-size: 11px; }
.cciv5-outlook-list > header i { display: grid; min-width: 25px; height: 20px; place-items: center; border-radius: 999px; background: #e4f0fc; color: #0f6cbd; font-size: 9px; font-style: normal; font-weight: 800; }
.cciv5-outlook-list article { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 7px; min-height: 58px; padding: 7px 8px; border-bottom: 1px solid #eef0f3; transition: background .45s var(--cciv4-ease), transform .45s var(--cciv4-ease), opacity .35s; }
.cciv5-outlook-list article.is-active { background: #eaf3fc; box-shadow: inset 3px 0 #0f6cbd; }
.cciv5-outlook-list article > div { min-width: 0; }
.cciv5-outlook-list article b,.cciv5-outlook-list article small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cciv5-outlook-list article b { color: #263449; font-size: 9px; }
.cciv5-outlook-list article small { margin-top: 3px; color: #677487; font-size: 8px; }
.cciv5-outlook-list article time { align-self: start; color: #718096; font-size: 8px; }
.cciv5-avatar { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: #ee8d5d; color: #fff; font-size: 8px; font-weight: 800; }
.cciv5-avatar-blue { background: #2779c7; }.cciv5-avatar-violet { background: #7a63c6; }.cciv5-avatar-green { background: #3b9475; }
.cciv5-outlook-reader { min-width: 0; overflow: hidden; padding: 0 13px 12px; background: #fff; }
.cciv5-reader-actions { display: flex; align-items: center; gap: 11px; min-height: 41px; margin-inline: -13px; padding-inline: 13px; border-bottom: 1px solid #e8ebef; color: #345c85; font-size: 8px; }
.cciv5-reader-actions i { margin-left: auto; font-style: normal; }
.cciv5-outlook-reader > small { display: inline-flex; margin-top: 12px; padding: 4px 7px; border-radius: 999px; background: #e6f3ff; color: #0f6cbd; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.cciv5-outlook-reader h3 { margin: 8px 0 8px; color: #1d2b3f; font: 600 13px/1.25 "Segoe UI",Arial,sans-serif; }
.cciv5-outlook-reader > p { display: grid; gap: 2px; margin: 0 0 10px; }
.cciv5-outlook-reader > p b { color: #273549; font-size: 9px; }.cciv5-outlook-reader > p span { color: #718095; font-size: 8px; }
.cciv5-reader-body { color: #435167; font-size: 9px; line-height: 1.48; }
.cciv5-reader-body p { margin: 0 0 7px; }
.cciv5-reader-file { display: flex; align-items: center; gap: 7px; min-width: 0; margin-top: 8px; padding: 7px 8px; border: 1px solid #dfe4eb; border-radius: 6px; background: #fafbfc; color: #415169; }
.cciv5-reader-file span { color: #0f6cbd; font-size: 15px; }.cciv5-reader-file b { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.cciv5-outlook-path { display: grid; grid-template-columns:auto 1fr auto 1fr auto auto; align-items: center; gap: 7px; min-height: 47px; padding: 0 13px; background: #f7f9fc; color: #6a778b; }
.cciv5-outlook-path span { font-size: 8px; font-weight: 850; letter-spacing: .06em; transition: color .45s, transform .45s var(--cciv4-ease); }
.cciv5-outlook-path i { height: 1px; background: #cbd5e2; }
.cciv5-outlook-path b { margin-left: 5px; color: #0f6cbd; font-size: 9px; }
[data-v4-scene="hero"][data-v4-phase="0"] .cciv5-outlook-path [data-v4-phase-item="0"],[data-v4-scene="hero"][data-v4-phase="1"] .cciv5-outlook-path [data-v4-phase-item="1"],[data-v4-scene="hero"][data-v4-phase="2"] .cciv5-outlook-path [data-v4-phase-item="2"] { color: #0f6cbd; transform: translateY(-2px); }
.cciv5-industry-reel { position: absolute; z-index: 4; bottom: 10px; left: -24px; width: min(310px, 62%); height: 178px; overflow: hidden; border: 6px solid #071526; border-radius: 21px; background: #0b1728; box-shadow: 0 28px 70px rgba(0,0,0,.45); }
.cciv5-industry-reel figure { position: absolute; inset: 0; margin: 0; opacity: 0; animation: cciv5IndustryReel 12s linear infinite; animation-play-state: paused; }
.cciv5-industry-reel figure:first-child { opacity: 1; }
.cciv5-industry-reel figure:nth-child(1) { animation-delay: 0s; }.cciv5-industry-reel figure:nth-child(2) { animation-delay: -9s; }.cciv5-industry-reel figure:nth-child(3) { animation-delay: -6s; }.cciv5-industry-reel figure:nth-child(4) { animation-delay: -3s; }
.cciv4-loop.is-running .cciv5-industry-reel figure { animation-play-state: running; }
.cciv5-industry-reel img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.06); transform: scale(1.04); animation: cciv5IndustryZoom 3s ease-out infinite; }
.cciv5-industry-reel figcaption { position: absolute; right: 10px; bottom: 10px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(3,10,20,.72); color: #f4f8ff; font-size: 8px; font-weight: 850; letter-spacing: .08em; backdrop-filter: blur(7px); }
.cciv5-hero-visual .cciv4-request-pop { top: 58px; right: -25px; width: min(370px, calc(100% - 34px)); }
.cciv5-outlook-mark-small { width: 42px; height: 42px; }.cciv5-outlook-mark-small::before { top: 7px; bottom: 7px; width: 23px; font-size: 13px; }.cciv5-outlook-mark-small::after { top: 12px; right: 5px; width: 18px; height: 14px; }
.cciv5-hero-visual > figcaption { right: 0; bottom: -2px; left: auto; max-width: 280px; text-align: right; }

@keyframes cciv5IndustryReel { 0%,22% { opacity: 1; } 27%,95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cciv5IndustryZoom { from { transform: scale(1.03); } to { transform: scale(1.095); } }

.cciv4-scroll-cue { position: absolute; z-index: 3; right: 50%; bottom: 16px; display: flex; align-items: center; gap: 12px; color: #7f93ad; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-decoration: none; transform: translateX(50%); }
.cciv4-scroll-cue i { position: relative; display: block; width: 46px; height: 1px; overflow: hidden; background: rgba(170, 196, 227, .2); }
.cciv4-scroll-cue i::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #5dcbff, transparent); content: ""; transform: translateX(-100%); animation: cciv4-scan 2.8s ease-in-out infinite; }

/* COMMON SECTIONS */
.cciv4-section { position: relative; padding-block: clamp(76px, 7.5vw, 108px); }

.cciv4-section-head { max-width: 1080px; margin-bottom: 44px; }
.cciv4-section-head h2 { max-width: 28ch; margin: 0; color: #101e33; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.1rem, 3vw, 2.8rem); font-weight: 400; letter-spacing: -.042em; line-height: 1.04; text-wrap: balance; }
.cciv4-section-head > p:last-child { max-width: 70ch; margin: 22px 0 0; color: var(--cciv4-muted); font-size: 17px; line-height: 1.65; }

.cciv5-split-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 340px); gap: 17px clamp(40px, 6vw, 86px); align-items: end; max-width: none; }
.cciv5-split-head > .cciv4-kicker { grid-column: 1 / -1; margin-bottom: 3px; }
.cciv5-split-head > h2 { grid-column: 1; grid-row: 2; max-width: 29ch; }
.cciv5-split-head > p:not(.cciv4-kicker) { grid-column: 1; grid-row: 3; max-width: 67ch; margin: 0; color: var(--cciv4-muted); font-size: 16px; line-height: 1.65; }
.cciv5-split-head.cciv4-head-light > p:not(.cciv4-kicker) { color: #aab8cc; }
.cciv5-head-cta { position: relative; grid-column: 2; grid-row: 2 / 4; display: grid; grid-template-columns: minmax(0, 1fr) 50px; align-items: center; min-height: 112px; overflow: hidden; border: 1px solid rgba(26, 92, 215, .2); border-radius: 18px; background: linear-gradient(135deg, #fff, #edf4ff); color: #10203a; box-shadow: 0 24px 58px -40px rgba(10, 47, 116, .55); text-decoration: none; transition: transform .45s var(--cciv4-ease), border-color .35s, box-shadow .45s var(--cciv4-ease); }
.cciv5-head-cta::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: linear-gradient(#1f67ff, #31c4ff); content: ""; transform: scaleY(.28); transform-origin: top; transition: transform .55s var(--cciv4-ease); }
.cciv5-head-cta small,.cciv5-head-cta b { grid-column: 1; margin-left: 22px; }
.cciv5-head-cta small { align-self: end; margin-bottom: 7px; color: #5273a7; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.cciv5-head-cta b { align-self: start; max-width: 23ch; font-size: 14px; line-height: 1.35; }
.cciv5-head-cta > span { grid-column: 2; grid-row: 1 / 3; display: grid; align-self: stretch; place-items: center; border-left: 1px solid rgba(26, 92, 215, .13); color: #1f67ff; font-size: 20px; transition: transform .45s var(--cciv4-ease), background .35s; }
.cciv5-head-cta-dark { border-color: rgba(151, 195, 245, .24); background: linear-gradient(140deg, rgba(17, 43, 77, .94), rgba(8, 24, 45, .98)); color: #edf6ff; box-shadow: 0 30px 70px -44px #000; }
.cciv5-head-cta-dark small { color: #70c8fa; }
.cciv5-head-cta-dark > span { border-color: rgba(172, 208, 245, .16); color: #6ed5ff; }
@media (hover:hover) and (pointer:fine) { .cciv5-head-cta:hover { border-color: rgba(31, 103, 255, .48); box-shadow: 0 28px 66px -38px rgba(17, 76, 186, .65); transform: translateY(-4px); } .cciv5-head-cta:hover::before { transform: scaleY(1); } .cciv5-head-cta:hover > span { background: rgba(31, 103, 255, .08); transform: translate(3px, -3px); } }
.cciv4-head-light h2 { color: #f7faff; }
.cciv4-head-light > p:last-child { color: #aebed2; }

/* SEARCH */
.cciv4-search-section { background: linear-gradient(180deg, #f4f7fb, #eef3f9); }

.cciv4-search-layout { display: grid; grid-template-columns: minmax(250px, .64fr) minmax(580px, 1.36fr); gap: clamp(38px, 6vw, 82px); align-items: center; }
.cciv4-plain-copy { min-width: 0; }
.cciv4-pain { margin: 0 0 28px; color: #182a43; font-family: Georgia, "Times New Roman", serif; font-size: 24px; line-height: 1.35; }
.cciv4-mini-steps { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cciv4-mini-steps li { display: grid; grid-template-columns: 38px 1fr; gap: 13px; padding: 18px 0; border-top: 1px solid #d9e2ee; }
.cciv4-mini-steps li > span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #c5d2e3; border-radius: 50%; color: #205cc5; font-size: 12px; font-weight: 900; }
.cciv4-mini-steps b { display: block; margin-bottom: 5px; color: #15253c; font-size: 15px; }
.cciv4-mini-steps p { margin: 0; color: #58687d; font-size: 14px; line-height: 1.5; }
.cciv4-callout { display: flex; gap: 12px; margin: 26px 0 0; padding: 17px; border: 1px solid #cfe0f5; border-radius: 15px; background: #e9f3ff; color: #274c7b; font-size: 13px; line-height: 1.55; }
.cciv4-callout span { color: #1f67ff; font-size: 18px; }

.cciv4-search-demo,
.cciv4-inbox-demo { position: relative; min-width: 0; margin: 0; border: 1px solid #d2dce9; border-radius: var(--cciv4-radius); background: #fff; box-shadow: var(--cciv4-shadow); }

.cciv4-demo-head { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 62px; padding: 9px 16px 9px 20px; border-bottom: 1px solid #dbe4ef; }
.cciv4-demo-head > div { display: flex; align-items: center; gap: 10px; color: #3d526d; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.cciv4-demo-head > div i { width: 8px; height: 8px; border-radius: 50%; background: var(--cciv4-blue); box-shadow: 0 0 0 5px rgba(31, 103, 255, .1); }
.cciv4-demo-head .cciv4-motion-toggle { position: static; border-color: #cbd8e9; background: #f4f7fb; color: #314760; }
.cciv4-demo-head .cciv4-motion-toggle:hover { border-color: #83b8ff; }

.cciv4-search-window { margin: 0; overflow: hidden; background: #fff; }
.cciv4-window-bar { display: grid; grid-template-columns: 90px 1fr 60px; gap: 12px; align-items: center; min-height: 42px; padding: 0 15px; border-bottom: 1px solid #e1e7ef; background: #edf2f7; }
.cciv4-window-bar > span { display: flex; gap: 6px; }
.cciv4-window-bar > span i { width: 9px; height: 9px; border-radius: 50%; background: #c5ced9; }
.cciv4-window-bar > span i:first-child { background: #f1a8a6; }
.cciv4-window-bar > span i:nth-child(2) { background: #f1cf82; }
.cciv4-window-bar > span i:last-child { background: #8ed1b0; }
.cciv4-window-bar p { overflow: hidden; margin: 0; padding: 6px 13px; border: 1px solid #d7e0ea; border-radius: 7px; background: #fff; color: #68778b; font-size: 12px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.cciv4-window-bar em { color: #728197; font-size: 18px; font-style: normal; text-align: right; }
.cciv4-search-canvas { padding: 24px clamp(20px, 4vw, 38px) 28px; }
.cciv4-search-name { display: flex; align-items: center; gap: 9px; color: #20344e; }
.cciv4-search-name span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; background: linear-gradient(145deg, #1b64f7, #30c2f3); color: #fff; font-size: 20px; }
.cciv4-search-name b { font: 400 23px/1 Georgia, serif; }
.cciv4-query { display: grid; grid-template-columns: minmax(0, 1fr) 2px 30px; gap: 12px; align-items: center; min-height: 52px; margin-top: 16px; padding: 10px 15px 10px 18px; border: 1px solid #b9cbe2; border-radius: 999px; box-shadow: 0 7px 20px rgba(34, 65, 104, .09); }
.cciv4-query span { overflow: hidden; color: #18283c; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.cciv4-query i { height: 20px; background: var(--cciv4-blue); opacity: 0; }
.cciv4-query b { color: #226af4; font-size: 20px; text-align: center; }
[data-v4-scene="search"][data-v4-phase="0"] .cciv4-query i { opacity: 1; animation: cciv4-blink .8s step-end infinite; }
.cciv4-results-label { margin: 20px 0 10px; color: #5a6b80; font-size: 12px; }
.cciv4-results { display: grid; gap: 10px; }
.cciv4-result { position: relative; padding: 15px 16px; border: 1px solid #e0e7ef; border-radius: 14px; background: #fff; transition: border-color .5s ease, box-shadow .5s ease, transform .5s var(--cciv4-ease); }
.cciv4-result > div { display: flex; align-items: center; gap: 10px; }
.cciv4-result > div > i { display: grid; flex: 0 0 auto; width: 32px; height: 32px; place-items: center; border-radius: 9px; background: #edf2f7; color: #596b80; font-size: 12px; font-style: normal; font-weight: 900; }
.cciv4-result > div p { min-width: 0; margin: 0; }
.cciv4-result small { display: block; overflow: hidden; color: #587088; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.cciv4-result small span { color: #74859a; }
.cciv4-result > div b { display: block; margin-top: 3px; color: #174dba; font-size: 14px; line-height: 1.35; }
.cciv4-result > p { margin: 8px 0 0 42px; color: #56667a; font-size: 12px; line-height: 1.45; }
.cciv4-result-own { border-color: #b8d2f7; background: linear-gradient(135deg, #fff, #f2f7ff); }
.cciv4-own-badge { position: absolute; top: -10px; right: 15px; padding: 5px 9px; border-radius: 999px; background: #1c64eb; color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .04em; box-shadow: 0 8px 17px rgba(23, 93, 212, .2); }
.cciv4-result-own ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0 0 42px; padding: 0; list-style: none; }
.cciv4-result-own li { padding: 6px 8px; border: 1px solid #d1dff0; border-radius: 7px; background: #fff; color: #355574; font-size: 12px; font-weight: 700; }
[data-v4-scene="search"][data-v4-phase="1"] .cciv4-result-own { border-color: #4d9bff; box-shadow: 0 13px 32px rgba(30, 104, 235, .16), inset 4px 0 #1f67ff; transform: translateY(-3px); }
.cciv4-before-after { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin: 0 20px 20px; padding: 15px; border-radius: 14px; background: #0e1c30; color: #fff; }
.cciv4-before-after p { min-width: 0; margin: 0; }
.cciv4-before-after span { display: block; margin-bottom: 4px; color: #87a0bd; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.cciv4-before-after p:last-child span { color: #65d0ff; }
.cciv4-before-after b { font-size: 12px; line-height: 1.4; }
.cciv4-before-after > i { color: #64c9ff; font-size: 20px; font-style: normal; }
.cciv4-search-demo > figcaption,
.cciv4-inbox-demo > figcaption { padding: 0 21px 17px; color: #5e6d81; font-size: 12px; line-height: 1.5; }

/* V5 · SERP reconocible, densa y legible. */
.cciv5-demo-status { display:flex;align-items:center;gap:8px;margin:0;color:#60738e;font-size:11px;font-weight:750; }
.cciv5-demo-status > i { width:7px;height:7px;border-radius:50%;background:#34a853;box-shadow:0 0 0 5px rgba(52,168,83,.1); }
.cciv5-google-demo .cciv4-search-canvas { padding-top:18px; }
.cciv5-google-word { display:inline-flex;align-items:baseline;font:500 31px/1 Arial,sans-serif;letter-spacing:-2.5px; }
.cciv5-google-word b { font-weight:500; }.cciv5-google-word b:nth-child(1),.cciv5-google-word b:nth-child(4){color:#4285f4}.cciv5-google-word b:nth-child(2),.cciv5-google-word b:nth-child(6){color:#ea4335}.cciv5-google-word b:nth-child(3){color:#fbbc05}.cciv5-google-word b:nth-child(5){color:#34a853}
.cciv5-google-demo .cciv4-query { margin-top:12px; }
.cciv5-google-tabs { display:flex;align-items:center;gap:22px;min-height:40px;margin:5px 3px 0;padding:0 10px;border-bottom:1px solid #e0e4e9;color:#647083;font-size:11px; }
.cciv5-google-tabs b { align-self:stretch;display:flex;align-items:center;border-bottom:3px solid #1a73e8;color:#1a73e8;font-weight:650; }
.cciv5-google-tabs em { margin-left:auto;font-style:normal; }
.cciv5-google-demo .cciv4-results-label { display:flex;align-items:center;justify-content:space-between;gap:18px;margin:11px 1px 8px; }
.cciv5-google-demo .cciv4-results-label span { color:#70757a; }.cciv5-google-demo .cciv4-results-label b { color:#245fa9;font-size:10px;letter-spacing:.035em; }
.cciv5-serp-results { position:relative;display:block;height:404px;overflow:hidden; }
.cciv5-serp-results .cciv4-result { position:absolute;right:0;left:0;min-height:65px;padding:10px 13px;border-color:transparent;border-radius:10px;box-shadow:none;will-change:transform,opacity;transition:transform .9s var(--cciv4-ease),opacity .65s ease,border-color .5s,box-shadow .7s var(--cciv4-ease),filter .65s; }
.cciv5-serp-results [data-v5-rank="1"]{--cciv5-y:0px;transform:translateY(0)}.cciv5-serp-results [data-v5-rank="2"]{--cciv5-y:72px;transform:translateY(72px)}.cciv5-serp-results [data-v5-rank="3"]{--cciv5-y:144px;transform:translateY(144px)}.cciv5-serp-results [data-v5-rank="4"]{--cciv5-y:216px;transform:translateY(216px)}.cciv5-serp-results [data-v5-rank="5"]{--cciv5-y:288px;transform:translateY(288px)}
.cciv5-serp-results .cciv4-result > div { display:grid;grid-template-columns:29px minmax(0,1fr) 18px;gap:9px; }
.cciv5-serp-results .cciv4-result > div > i { width:28px;height:28px;border-radius:50%;font-size:10px; }
.cciv5-serp-results .cciv4-result > div b { margin-top:1px;font-size:13px; }.cciv5-serp-results .cciv4-result > p { margin:5px 0 0 38px;font-size:11px;line-height:1.35; }
.cciv5-result-menu { align-self:start;color:#70757a;font-size:16px;line-height:1;font-weight:400; }
.cciv5-serp-results .cciv4-result-own { z-index:2;min-height:65px;border-color:#b8d2f7;box-shadow:0 13px 32px rgba(30,104,235,.12); }
.cciv5-serp-results .cciv4-result-own>p,.cciv5-serp-results .cciv4-result-own ul{display:none}.cciv5-serp-results .cciv4-result-own ul { gap:4px;margin:7px 0 0 38px; }.cciv5-serp-results .cciv4-result-own li { padding:4px 7px;font-size:10px; }
.cciv5-serp-results .cciv4-own-badge { top:7px;right:40px;padding:4px 7px;font-size:8px; }
.cciv4-search-section[data-v5-rank="1"] [data-v5-competitor]{opacity:.5;filter:saturate(.55)}
.cciv4-search-section[data-v5-rank="1"] [data-v5-rank="2"]{transform:translateY(116px)}.cciv4-search-section[data-v5-rank="1"] [data-v5-rank="3"]{transform:translateY(188px)}.cciv4-search-section[data-v5-rank="1"] [data-v5-rank="4"]{transform:translateY(260px)}.cciv4-search-section[data-v5-rank="1"] [data-v5-rank="5"]{transform:translateY(332px)}
.cciv4-search-section[data-v5-rank="1"] [data-v5-own-result]{min-height:108px;border-color:#4d9bff;box-shadow:0 18px 42px rgba(30,104,235,.2),inset 4px 0 #1f67ff;transform:translateY(0)}.cciv4-search-section[data-v5-rank="1"] [data-v5-own-result]>p{display:block}.cciv4-search-section[data-v5-rank="1"] [data-v5-own-result] ul{display:flex}
.cciv5-serp-progress { display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:9px;margin:0 20px 12px;padding:11px 14px;border-radius:12px;background:#f1f5fa;color:#60738c; }
.cciv5-serp-progress span { font-size:9px;font-weight:900;letter-spacing:.08em; }.cciv5-serp-progress b,.cciv5-serp-progress i { height:2px;background:#cbd7e7;overflow:hidden; }.cciv5-serp-progress i::after,.cciv5-serp-progress b::after { display:block;width:40%;height:100%;background:linear-gradient(90deg,#1f67ff,#31c4ff);content:"";animation:cciv5SerpTravel 3.2s linear infinite;animation-play-state:paused; }
.cciv4-loop.is-running .cciv5-serp-progress i::after,.cciv4-loop.is-running .cciv5-serp-progress b::after{animation-play-state:running}.cciv5-serp-progress b::after{animation-delay:-1.6s}
@keyframes cciv5SerpTravel{from{transform:translateX(-120%)}to{transform:translateX(350%)}}

/* V5 · Outlook a escala de escritorio. */
.cciv5-mail-app .cciv4-mail-top { grid-template-columns:38px auto auto minmax(210px,430px) 38px;gap:10px;background:#f5f8fc; }
.cciv5-outlook-mark-main { width:36px;height:36px; }.cciv5-mail-ribbon { display:flex;align-items:center;gap:14px;color:#52647b;font-size:11px; }.cciv5-mail-ribbon span:first-child { color:#0f6cbd;font-weight:800; }
.cciv5-mail-app .cciv4-mail-list article { min-height:53px;padding:7px 10px;transition:opacity .45s,transform .6s var(--cciv4-ease),background .45s,box-shadow .45s; }
.cciv5-mail-app .cciv4-mail-list article b,.cciv5-mail-app .cciv4-mail-list article span,.cciv5-mail-app .cciv4-mail-list article small { font-size:11px;line-height:1.18; }
.cciv5-mail-app .cciv4-mail-list article span,.cciv5-mail-app .cciv4-mail-list article small { margin-top:2px; }
.cciv5-mail-app .cciv4-mail-list > header span { display:flex;align-items:center;gap:6px; }.cciv5-mail-app .cciv4-mail-list > header span i { width:6px;height:6px;border-radius:50%;background:#0f6cbd;box-shadow:0 0 0 4px rgba(15,108,189,.1); }
.cciv5-mail-app .cciv4-mail-incoming,.cciv5-mail-app .is-v5-active { opacity:1;background:#eaf3fc!important;box-shadow:inset 4px 0 #0f6cbd;transform:none; }
.cciv4-mail-toast > .cciv5-outlook-mark { display:block;width:42px;height:42px;border-radius:6px;background:linear-gradient(135deg,#1787d4 0 46%,#0b5fa8 47% 100%); }
@media (hover:hover) and (pointer:fine){.cciv5-mail-app .cciv4-mail-list article:hover{background:#f0f6fd;transform:translateX(4px)}.cciv5-serp-results .cciv4-result:hover{z-index:4;border-color:#b9d3f8;background:#fff;box-shadow:0 13px 34px rgba(23,68,137,.13)}}

/* PROOF: WEBSITE + AI */
.cciv4-proof-section { overflow: hidden; background: linear-gradient(150deg, #06101d, #0a1829 54%, #0d2037); color: #fff; }
.cciv4-proof-glow { position: absolute; top: 18%; right: -14%; width: 50vw; height: 50vw; border-radius: 50%; background: rgba(35, 116, 255, .18); filter: blur(120px); pointer-events: none; }
.cciv4-proof-layout { display: grid; grid-template-columns: minmax(260px, .55fr) minmax(600px, 1.45fr); gap: clamp(38px, 6vw, 78px); align-items: center; }
.cciv4-proof-notes { display: grid; gap: 4px; }
.cciv4-proof-notes article { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding: 19px 0; border-top: 1px solid rgba(190, 211, 239, .16); }
.cciv4-proof-notes article > span { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(94, 179, 255, .38); border-radius: 12px; background: rgba(38, 116, 255, .1); color: #71c8ff; font-size: 12px; font-weight: 900; }
.cciv4-proof-notes b { display: block; margin-bottom: 5px; color: #edf4fe; font-size: 15px; }
.cciv4-proof-notes p { margin: 0; color: #9fb0c6; font-size: 13px; line-height: 1.55; }
.cciv4-proof-notes > p { display: flex; gap: 11px; margin-top: 18px; padding: 16px; border: 1px solid rgba(114, 180, 255, .22); border-radius: 15px; background: rgba(42, 108, 198, .09); }
.cciv4-proof-notes > p i { display: grid; flex: 0 0 auto; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: rgba(68, 164, 255, .18); color: #8ed8ff; font-size: 12px; font-style: normal; font-weight: 900; }
.cciv4-trust-demo { min-width: 0; overflow: hidden; border: 1px solid rgba(187, 212, 243, .2); border-radius: 27px; background: #f7f9fc; color: #15243a; box-shadow: 0 35px 90px rgba(0, 0, 0, .34); }
.cciv4-tabs { display: grid; grid-template-columns: repeat(2, 1fr); min-height: 64px; border-bottom: 1px solid #dbe3ed; background: #eaf0f7; }
.cciv4-tabs button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; border: 0; border-right: 1px solid #d4deea; background: transparent; color: #52647a; cursor: pointer; font-size: 13px; font-weight: 800; }
.cciv4-tabs button:last-child { border-right: 0; }
.cciv4-tabs button span { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid #becbdd; border-radius: 9px; font-size: 12px; }
.cciv4-tabs button[aria-selected="true"] { background: #fff; color: #172a43; box-shadow: inset 0 3px var(--cciv4-blue); }
.cciv4-tabs button[aria-selected="true"] span { border-color: #8ebcff; background: #e8f2ff; color: #145cc8; }
.cciv4-tab-panel[hidden] { display: none; }

.cciv4-provider-panel { min-height: 466px; background: #fff; }
.cciv4-mini-nav { display: flex; align-items: center; gap: 22px; min-height: 52px; padding: 0 22px; border-bottom: 1px solid #e5eaf0; color: #59697c; font-size: 12px; }
.cciv4-mini-nav b { display: flex; align-items: center; gap: 8px; margin-right: auto; color: #17283e; font-size: 12px; letter-spacing: .08em; }
.cciv4-mini-nav b i { width: 18px; height: 18px; border-radius: 6px; background: linear-gradient(145deg, #1b61ec, #32c4eb); }
.cciv4-provider-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(260px, .96fr); min-height: 325px; }
.cciv4-provider-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: clamp(25px, 4vw, 43px); }
.cciv4-provider-copy > small { color: #2264c5; font-size: 12px; font-weight: 900; letter-spacing: .09em; }
.cciv4-provider-copy h3 { max-width: 17ch; margin: 14px 0 12px; color: #122139; font-family: Georgia, "Times New Roman", serif; font-size: clamp(25px, 2.4vw, 34px); font-weight: 400; letter-spacing: -.03em; line-height: 1.06; }
.cciv4-provider-copy p { margin: 0; color: #54667c; font-size: 13px; line-height: 1.58; }
.cciv4-provider-copy > span { display: inline-flex; align-items: center; min-height: 42px; margin-top: 19px; padding: 10px 15px; border-radius: 999px; background: #1f67ed; color: #fff; font-size: 12px; font-weight: 850; }
.cciv4-provider-photo { position: relative; min-width: 0; min-height: 325px; margin: 0; overflow: hidden; }
.cciv4-provider-photo::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .24), transparent 40%), linear-gradient(0deg, rgba(8, 21, 37, .52), transparent 45%); content: ""; }
.cciv4-provider-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 57% 50%; }
.cciv4-provider-photo figcaption { position: absolute; z-index: 2; right: 14px; bottom: 13px; left: 14px; display: flex; align-items: center; gap: 8px; color: #fff; font-size: 12px; font-weight: 850; letter-spacing: .06em; }
.cciv4-provider-photo figcaption i { width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; }
.cciv4-proof-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #e1e8f1; }
.cciv4-proof-strip span { display: flex; align-items: center; justify-content: center; min-height: 66px; padding: 13px; border-right: 1px solid #e1e8f1; color: #344d68; font-size: 12px; font-weight: 800; text-align: center; }
.cciv4-proof-strip span:last-child { border-right: 0; }

.cciv4-ai-panel { min-height: 466px; padding: 22px 25px 18px; background: linear-gradient(180deg, #fff, #f1f5fa); }
.cciv4-ai-top { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-bottom: 17px; border-bottom: 1px solid #dfe6ef; }
.cciv4-ai-mark { position: relative; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px; background: linear-gradient(145deg, #142b50, #1e6ccf); box-shadow: inset 0 1px rgba(255, 255, 255, .25); }
.cciv4-ai-mark i,
.cciv4-ai-mark i::before { width: 15px; height: 15px; border: 2px solid #fff; border-radius: 5px; content: ""; transform: rotate(45deg); }
.cciv4-ai-mark i::before { display: block; transform: rotate(45deg) scale(.45); }
.cciv5-chatgpt-mark { border-radius:12px;background:#101815;color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.18),0 8px 20px rgba(4,20,15,.16); }
.cciv5-chatgpt-mark svg { width:27px;height:27px; }
.cciv5-chatgpt-mark i { display:none; }
.cciv4-ai-top b { display: block; color: #172840; font-size: 14px; }
.cciv4-ai-top small { display: block; margin-top: 3px; color: #65758a; font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.cciv4-ai-top em { padding: 7px 10px; border-radius: 999px; background: #e6eef8; color: #526982; font-size: 12px; font-style: normal; font-weight: 750; }
.cciv5-ai-examples { display:flex;gap:6px;overflow-x:auto;margin:11px 0 0;padding:0 1px 3px;scrollbar-width:none; }
.cciv5-ai-examples::-webkit-scrollbar{display:none}.cciv5-ai-examples button{flex:0 0 auto;min-height:38px;padding:8px 11px;border:1px solid #d4dce7;border-radius:999px;background:#fff;color:#52647a;cursor:pointer;font-size:11px;font-weight:780;transition:color .35s,background .35s,border-color .35s,transform .4s var(--cciv4-ease),box-shadow .4s var(--cciv4-ease)}
.cciv5-ai-examples button[aria-pressed="true"]{border-color:#91baf4;background:#e9f2ff;color:#174f9d;box-shadow:0 8px 18px rgba(24,82,157,.1)}
@media (hover:hover) and (pointer:fine){.cciv5-ai-examples button:hover{border-color:#74a9ef;color:#164f9b;transform:translateY(-2px)}}
.cciv4-ai-thread { padding: 18px 3px 8px; }
.cciv4-ai-user { display: flex; align-items: flex-start; justify-content: flex-end; gap: 10px; }
.cciv4-ai-user p { max-width: 76%; margin: 0; padding: 12px 14px; border-radius: 14px 4px 14px 14px; background: #e6edf6; color: #243851; font-size: 13px; line-height: 1.48; }
.cciv4-ai-user i { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: #dae3ef; color: #456078; font-size: 12px; font-style: normal; font-weight: 900; }
.cciv4-ai-answer { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 13px; margin-top: 20px; }
.cciv4-ai-answer > div { min-width: 0; }
.cciv4-ai-answer p { margin: 0; color: #34485f; font-size: 13px; line-height: 1.55; }
.cciv4-ai-answer .cciv4-ai-caution { margin-top: 9px; color: #596b80; }
.cciv4-ai-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.cciv4-ai-sources > small { grid-column: 1 / -1; color: #607289; font-size: 12px; font-weight: 900; letter-spacing: .07em; }
.cciv4-ai-sources span { min-width: 0; padding: 10px; border: 1px solid #d7e1ec; border-radius: 10px; background: #fff; }
.cciv4-ai-sources b { display: block; overflow: hidden; color: #204e87; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cciv4-ai-sources em { display: block; margin-top: 3px; overflow: hidden; color: #6a7b8f; font-size: 12px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.cciv4-ai-input { display: flex; align-items: center; justify-content: space-between; min-height: 46px; margin: 9px 3px 0 51px; padding: 8px 10px 8px 14px; border: 1px solid #cdd9e7; border-radius: 14px; background: #fff; color: #64758a; font-size: 12px; }
.cciv4-ai-input b { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: #1d5fcc; color: #fff; font-size: 16px; }
.cciv4-brand-note { margin: 12px 3px 0 51px; color: #66768a; font-size: 12px; line-height: 1.4; }

/* INBOX */
.cciv4-inbox-section { background: #edf2f8; }
.cciv4-inbox-demo { overflow: hidden; }
.cciv4-demo-head-paper { background: #fff; }
.cciv4-mail-app { display: grid; grid-template-columns: 180px 310px minmax(0, 1fr); grid-template-rows: 56px 480px; min-width: 0; border-bottom: 1px solid #dce4ee; background: #fff; }
.cciv4-mail-top { grid-column: 1 / -1; display: grid; grid-template-columns: 38px auto minmax(220px, 430px) 38px; gap: 12px; align-items: center; min-width: 0; padding: 8px 14px; border-bottom: 1px solid #dce4ee; background: #f6f9fc; }
.cciv4-mail-logo { position: relative; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: linear-gradient(145deg, #145ce6, #2eb8ef); }
.cciv4-mail-logo i { width: 16px; height: 12px; border: 2px solid #fff; border-radius: 3px; }
.cciv4-mail-logo i::after { display: block; width: 8px; height: 8px; margin: -5px auto 0; border-right: 2px solid #fff; border-bottom: 2px solid #fff; content: ""; transform: rotate(45deg); }
.cciv4-mail-top > b { color: #1b2c42; font-size: 14px; white-space: nowrap; }
.cciv4-mail-top label { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; padding: 0 13px; border: 1px solid #d3ddea; border-radius: 10px; background: #fff; color: #65768a; }
.cciv4-mail-top label i { font-size: 18px; font-style: normal; }
.cciv4-mail-top input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #43546a; font-size: 13px; }
.cciv4-mail-top > em { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: #163d71; color: #fff; font-size: 12px; font-style: normal; font-weight: 850; }
.cciv4-mail-nav { display: flex; flex-direction: column; gap: 3px; padding: 15px 10px; border-right: 1px solid #dfe6ef; background: #f3f6fa; }
.cciv4-mail-nav button { min-height: 44px; margin-bottom: 9px; border: 0; border-radius: 10px; background: #dfeeff; color: #17559e; font-size: 12px; font-weight: 850; text-align: left; }
.cciv4-mail-nav b,
.cciv4-mail-nav span { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 7px 10px; border-radius: 8px; color: #3f5066; font-size: 12px; }
.cciv4-mail-nav b { background: #dbe9fa; color: #173f73; }
.cciv4-mail-nav b i { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #1f68d7; color: #fff; font-size: 12px; font-style: normal; }
.cciv4-mail-nav small { margin: 14px 10px 4px; color: #66788f; font-size: 12px; font-weight: 900; letter-spacing: .07em; }
.cciv4-mail-list { min-width: 0; overflow: hidden; border-right: 1px solid #dfe6ef; }
.cciv4-mail-list > header { display: flex; align-items: center; justify-content: space-between; min-height: 55px; padding: 10px 14px; border-bottom: 1px solid #e0e6ee; }
.cciv4-mail-list > header b { color: #1f3148; font-size: 14px; }
.cciv4-mail-list > header span { color: #63758b; font-size: 12px; }
.cciv4-mail-list article { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: start; min-height: 105px; padding: 15px 12px; border-bottom: 1px solid #e1e7ef; background: #fff; }
.cciv4-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: #1b66d9; color: #fff; font-size: 12px; font-style: normal; font-weight: 900; }
.cciv4-avatar-grey { background: #7b8b9e; }
.cciv4-avatar-sand { background: #99734a; }
.cciv4-mail-list article > div { min-width: 0; }
.cciv4-mail-list article b,
.cciv4-mail-list article span,
.cciv4-mail-list article small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cciv4-mail-list article b { color: #23364d; font-size: 12px; }
.cciv4-mail-list article span { margin-top: 5px; color: #334b66; font-size: 12px; font-weight: 700; }
.cciv4-mail-list article small { margin-top: 5px; color: #66778b; font-size: 12px; }
.cciv4-mail-list time { color: #68798e; font-size: 12px; }
.cciv4-mail-incoming { position: relative; background: #eef5ff !important; box-shadow: inset 4px 0 #2473e8; opacity: .42; transform: translateX(-18px); transition: opacity .55s ease, transform .6s var(--cciv4-ease), background .4s ease; }
[data-v4-scene="inbox"][data-v4-phase="1"] .cciv4-mail-incoming { opacity: 1; transform: none; }
.cciv4-mail-reader { min-width: 0; overflow: auto; padding: 0 clamp(20px, 3vw, 36px) 25px; background: #fff; opacity: .72; transition: opacity .55s ease, background .55s ease; }
[data-v4-scene="inbox"][data-v4-phase="1"] .cciv4-mail-reader { background: linear-gradient(180deg, #fff, #f8fbff); opacity: 1; }
.cciv4-mail-actions { display: flex; align-items: center; gap: 8px; min-height: 55px; margin-inline: calc(clamp(20px, 3vw, 36px) * -1); padding: 8px clamp(20px, 3vw, 36px); border-bottom: 1px solid #e1e7ef; }
.cciv4-mail-actions span { padding: 7px 9px; border: 1px solid #d7e0eb; border-radius: 7px; color: #445a72; font-size: 12px; }
.cciv4-mail-actions i { margin-left: auto; color: #5d6e82; font-style: normal; }
.cciv4-new-label { display: inline-block; margin-top: 20px; padding: 5px 8px; border-radius: 6px; background: #e2efff; color: #1859a9; font-size: 12px; font-weight: 900; letter-spacing: .06em; }
.cciv4-mail-reader h3 { max-width: 780px; margin: 12px 0 17px; color: #172a42; font: 400 clamp(22px, 2.1vw, 30px)/1.12 Georgia, serif; letter-spacing: -.02em; }
.cciv4-mail-from { display: flex; align-items: center; gap: 11px; padding-bottom: 15px; border-bottom: 1px solid #e2e8ef; }
.cciv4-mail-from p { min-width: 0; margin: 0; }
.cciv4-mail-from b,
.cciv4-mail-from span { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cciv4-mail-from b { color: #293c53; }
.cciv4-mail-from span { margin-top: 3px; color: #66788c; }
.cciv4-mail-from time { margin-left: auto; color: #66778a; font-size: 12px; white-space: nowrap; }
.cciv4-mail-body { max-width: 690px; padding-top: 12px; color: #405369; font-size: 13px; line-height: 1.6; }
.cciv4-mail-body p { margin: 9px 0; }
.cciv4-attachment { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin-top: 10px; padding: 10px 13px; border: 1px solid #cfdbe9; border-radius: 11px; background: #f4f8fc; }
.cciv4-attachment > span { display: grid; flex: 0 0 auto; width: 32px; height: 32px; place-items: center; border-radius: 8px; background: #e0ecfb; color: #1d61b6; font-size: 20px; }
.cciv4-attachment div { min-width: 0; }
.cciv4-attachment b,
.cciv4-attachment small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cciv4-attachment b { color: #28445f; font-size: 12px; }
.cciv4-attachment small { margin-top: 3px; color: #60758b; font-size: 12px; font-weight: 800; letter-spacing: .05em; }
.cciv4-request-facts { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0 0; padding: 0; list-style: none; }
.cciv4-request-facts li { padding: 7px 9px; border: 1px solid #d2deec; border-radius: 7px; background: #fff; color: #35526e; font-size: 12px; font-weight: 750; }
.cciv4-mail-toast { position: absolute; z-index: 8; top: 76px; right: 20px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 11px; align-items: center; width: min(390px, calc(100% - 40px)); padding: 12px; border: 1px solid #9acaff; border-radius: 14px; background: rgba(252, 254, 255, .98); box-shadow: 0 20px 50px rgba(14, 57, 110, .22); opacity: 0; transform: translateY(-15px) scale(.98); transition: opacity .45s ease, transform .55s var(--cciv4-ease); }
[data-v4-scene="inbox"][data-v4-phase="1"] .cciv4-mail-toast { opacity: 1; transform: none; }
.cciv4-mail-toast > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; background: linear-gradient(145deg, #1f68e4, #36bbee); color: #fff; font-size: 19px; }
.cciv4-mail-toast div { min-width: 0; }
.cciv4-mail-toast small,
.cciv4-mail-toast b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cciv4-mail-toast small { color: #285fa6; font-size: 12px; font-weight: 900; letter-spacing: .06em; }
.cciv4-mail-toast b { margin-top: 4px; color: #21374f; font-size: 12px; }
.cciv4-mail-toast time { color: #5f7187; font-size: 12px; }
.cciv4-inbox-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.cciv4-inbox-benefits article { display: grid; grid-template-columns: 40px 1fr; gap: 13px; padding: 20px; border: 1px solid #d2ddea; border-radius: 16px; background: rgba(255, 255, 255, .68); }
.cciv4-inbox-benefits article > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: #e4efff; color: #1d5fbd; font-size: 12px; font-weight: 900; }
.cciv4-inbox-benefits h3 { margin: 0 0 5px; color: #1a2b42; font-size: 14px; }
.cciv4-inbox-benefits p { margin: 0; color: #586a7f; font-size: 13px; line-height: 1.5; }

.cciv4-section-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 24px;
  padding: 21px 24px;
  border: 1px solid #d0ddea;
  border-radius: 17px;
  background: rgba(255, 255, 255, .68);
}
.cciv4-section-action p { margin: 0; color: #50647b; font-size: 13px; line-height: 1.5; }
.cciv4-section-action p b { color: #19334e; }
.cciv4-section-action .cciv4-button { flex: 0 0 auto; }
.cciv4-section-action-dark { border-color: rgba(167, 202, 238, .2); background: rgba(14, 39, 68, .58); }
.cciv4-section-action-dark p { color: #a9bbd0; }
.cciv4-section-action-dark p b { color: #edf6ff; }

/* METHOD */
.cciv4-method-section { overflow: hidden; background: linear-gradient(145deg, #050e1a, #091828 60%, #0d223a); color: #fff; }
.cciv4-method-section::before { position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 40%, rgba(40, 122, 255, .12), transparent 27%), linear-gradient(rgba(159, 193, 231, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(159, 193, 231, .035) 1px, transparent 1px); background-size: auto, 58px 58px, 58px 58px; content: ""; }
.cciv4-head-centered { max-width: 1040px; margin-inline: auto; text-align: center; }
.cciv4-head-centered .cciv4-kicker { justify-content: center; }
.cciv4-head-centered h2 { max-width: 20ch; margin-inline: auto; color: #f5f9ff; }
.cciv4-head-centered > p:last-child { margin-inline: auto; color: #aabacf; }
.cciv4-method { overflow: hidden; border: 1px solid rgba(183, 211, 242, .2); border-radius: 25px; background: rgba(12, 28, 48, .78); box-shadow: 0 34px 90px rgba(0, 0, 0, .28); backdrop-filter: blur(14px); }
.cciv4-method-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid rgba(181, 207, 236, .17); }
.cciv4-method-tabs button { position: relative; display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; gap: 2px 11px; align-items: center; min-width: 0; min-height: 86px; padding: 14px 15px; border: 0; border-right: 1px solid rgba(181, 207, 236, .14); background: transparent; color: #9aacbf; cursor: pointer; text-align: left; }
.cciv4-method-tabs button:last-child { border-right: 0; }
.cciv4-method-tabs button::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg, #236aff, #3fc8ed); content: ""; opacity: 0; transform: scaleX(.35); transition: opacity .3s ease, transform .4s var(--cciv4-ease); }
.cciv4-method-tabs button > span { grid-row: 1 / 3; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(136, 181, 229, .26); border-radius: 11px; color: #75bfff; font-size: 12px; font-weight: 900; }
.cciv4-method-tabs button b { overflow: hidden; color: inherit; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.cciv4-method-tabs button small { overflow: hidden; color: #7f93aa; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cciv4-method-tabs button[aria-selected="true"] { background: rgba(31, 105, 232, .13); color: #f1f7ff; }
.cciv4-method-tabs button[aria-selected="true"]::after { opacity: 1; transform: scaleX(1); }
.cciv4-method-tabs button[aria-selected="true"] > span { border-color: rgba(74, 174, 255, .7); background: rgba(35, 116, 255, .18); }
.cciv4-method-stage { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); min-height: 350px; }
.cciv4-method-panels { padding: clamp(28px, 4.5vw, 54px); }
.cciv4-method-panels article[hidden] { display: none; }
.cciv4-method-panels article > span { color: #62c7ff; font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.cciv4-method-panels h3 { max-width: 20ch; margin: 14px 0 14px; color: #f4f8fe; font: 400 clamp(28px, 3.2vw, 42px)/1.06 Georgia, serif; letter-spacing: -.03em; }
.cciv4-method-panels p { max-width: 63ch; margin: 0; color: #aab9cd; font-size: 14px; line-height: 1.62; }
.cciv4-method-panels ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 23px 0 0; padding: 0; list-style: none; }
.cciv4-method-panels li { padding: 9px 11px; border: 1px solid rgba(148, 188, 230, .2); border-radius: 9px; background: rgba(255, 255, 255, .045); color: #c4d3e4; font-size: 12px; font-weight: 700; }
.cciv4-method-map { padding: clamp(28px, 4vw, 46px); border-left: 1px solid rgba(181, 207, 236, .15); background: rgba(4, 13, 24, .4); }
.cciv4-method-map > small { color: #8095ad; font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.cciv4-method-map ol { position: relative; display: grid; gap: 21px; margin: 26px 0; padding: 0; list-style: none; }
.cciv4-method-map ol::before { position: absolute; top: 12px; bottom: 12px; left: 8px; width: 1px; background: rgba(130, 173, 219, .25); content: ""; }
.cciv4-method-map li { position: relative; display: flex; align-items: center; gap: 15px; color: #70849b; transition: color .3s ease; }
.cciv4-method-map li i { z-index: 1; width: 17px; height: 17px; border: 3px solid #10243d; border-radius: 50%; background: #45617d; box-shadow: 0 0 0 1px rgba(139, 183, 226, .32); transition: background .3s ease, box-shadow .3s ease; }
.cciv4-method-map li b { font-size: 13px; }
.cciv4-method-map li.is-done,
.cciv4-method-map li.is-current { color: #e6f1ff; }
.cciv4-method-map li.is-done i { background: #2c7bdc; }
.cciv4-method-map li.is-current i { background: #57ccff; box-shadow: 0 0 0 5px rgba(58, 168, 255, .12), 0 0 22px rgba(64, 189, 255, .55); }
.cciv4-method-map p { margin: 0; padding-top: 21px; border-top: 1px solid rgba(181, 207, 236, .15); color: #adbed2; font-size: 13px; line-height: 1.55; }
.cciv4-final-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 24px; padding: 26px clamp(24px, 4vw, 42px); border: 1px solid rgba(151, 198, 240, .23); border-radius: 20px; background: linear-gradient(135deg, rgba(25, 75, 141, .28), rgba(13, 37, 65, .64)); }
.cciv4-final-cta small { display: block; margin-bottom: 7px; color: #69c9fb; font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.cciv4-final-cta b { display: block; color: #f1f7ff; font: 400 25px/1.2 Georgia, serif; }
.cciv4-final-cta p { margin: 6px 0 0; color: #9fb1c7; font-size: 13px; }
.cciv4-final-cta .cciv4-button { flex: 0 0 auto; }
.cciv4-related { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 20px; padding: 15px 4px; border-top: 1px solid rgba(134, 158, 216, .16); color: #7889a8; font-size: 12px; }
.cciv4-related > span { color: #607391; font: 700 10px/1 var(--cciv4-mono); letter-spacing: .11em; }
.cciv4-related a { color: #b3c2dc; text-underline-offset: 4px; text-decoration-color: rgba(114, 223, 234, .38); transition: color .3s var(--cciv4-ease), text-decoration-color .3s; }
.cciv4-related a:focus-visible { outline: 2px solid var(--cciv4-cyan); outline-offset: 4px; border-radius: 4px; }
@media (hover:hover) and (pointer:fine) { .cciv4-related a:hover { color: #fff; text-decoration-color: var(--cciv4-cyan); } }

.cciv4-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; }

@keyframes cciv4-scan { 0%, 15% { transform: translateX(-100%); } 70%, 100% { transform: translateX(100%); } }
@keyframes cciv4-blink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }

.cciv4-loop.is-paused *,
.cciv4-loop.is-paused *::before,
.cciv4-loop.is-paused *::after { animation-play-state: paused !important; }

@media (max-width: 1120px) {
  .cciv4-wrap { width: min(100% - 48px, 1100px); }
  .cciv4-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr); gap: 36px; }
  .cciv4-hero h1 { font-size: clamp(2.75rem, 5.2vw, 3.7rem); }
  .cciv4-hero-visual { min-height: 550px; }
  .cciv4-photo-frame { height: 390px; }
  .cciv4-search-layout,
  .cciv4-proof-layout { grid-template-columns: 1fr; }
  .cciv4-search-layout { align-items: start; }
  .cciv4-plain-copy { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(360px, 1.28fr); gap: 28px 44px; align-items: start; }
  .cciv4-plain-copy .cciv4-pain { grid-row: 1; }
  .cciv4-mini-steps { grid-row: 1 / 3; grid-column: 2; }
  .cciv4-callout { grid-column: 1; margin-top: 0; }
  .cciv4-proof-notes { grid-template-columns: repeat(3, 1fr); }
  .cciv4-proof-notes > p { grid-column: 1 / -1; }
  .cciv4-mail-app { grid-template-columns: 150px 285px minmax(0, 1fr); }
  .cciv4-mail-reader { padding-inline: 22px; }
  .cciv4-mail-actions { margin-inline: -22px; padding-inline: 22px; }
}

@media (max-width: 900px) {
  .cciv5-split-head { grid-template-columns: 1fr; gap: 17px; }
  .cciv5-split-head > .cciv4-kicker,
  .cciv5-split-head > h2,
  .cciv5-split-head > p:not(.cciv4-kicker),
  .cciv5-head-cta { grid-column: 1; grid-row: auto; }
  .cciv5-head-cta { width: min(100%, 520px); min-height: 88px; margin-top: 7px; }
  .cciv4-hero-grid { grid-template-columns: 1fr; min-height: auto; padding-block: 70px 92px; }
  .cciv4-hero-copy { max-width: 760px; }
  .cciv4-hero h1 { max-width: 17ch; }
  .cciv4-hero-visual { width: min(100%, 680px); min-height: 560px; margin-inline: auto; }
  .cciv4-scroll-cue { display: none; }
  .cciv4-proof-notes { grid-template-columns: 1fr; }
  .cciv4-proof-notes > p { grid-column: auto; }
  .cciv4-mail-app { grid-template-columns: 265px minmax(0, 1fr); }
  .cciv4-mail-top { grid-column: 1 / -1; }
  .cciv4-mail-nav { display: none; }
  .cciv4-inbox-benefits { grid-template-columns: 1fr; }
  .cciv4-method-tabs { grid-template-columns: repeat(2, 1fr); }
  .cciv4-method-tabs button:nth-child(2) { border-right: 0; }
  .cciv4-method-tabs button:nth-child(-n+2) { border-bottom: 1px solid rgba(181, 207, 236, .14); }
  .cciv4-method-stage { grid-template-columns: 1fr; }
  .cciv4-method-map { border-top: 1px solid rgba(181, 207, 236, .15); border-left: 0; }
  .cciv4-method-map ol { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .cciv4-method-map ol::before { top: 8px; right: 8%; bottom: auto; left: 8%; width: auto; height: 1px; }
  .cciv4-method-map li { flex-direction: column; gap: 8px; text-align: center; }
  .cciv4-final-cta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 700px) {
  .cciv4-wrap { width: min(100% - 32px, 640px); }
  .cciv4-preview-nav { min-height: 58px; padding-inline: 18px; }
  .cciv4-preview-nav p { display: none; }
  .cciv4-hero { min-height: 0; }
  .cciv4-hero-grid { padding-block: 54px 70px; }
  .cciv4-kicker { margin-bottom: 17px; font-size: 12px; letter-spacing: .11em; }
  .cciv4-hero h1 { max-width: 18ch; font-size: clamp(2.3rem, 10.7vw, 2.75rem); line-height: 1.01; }
  .cciv4-lede { margin-top: 20px; font-size: 16px; line-height: 1.58; }
  .cciv4-sector-picker { margin-top: 22px; }
  .cciv4-sector-picker button { flex: 1 1 calc(50% - 4px); padding-inline: 10px; }
  .cciv4-actions { align-items: stretch; flex-direction: column; }
  .cciv4-button { width: 100%; }
  .cciv4-hero-visual { min-height: 510px; }
  .cciv4-photo-frame { right: 0; height: 285px; border-radius: 24px 24px 10px 24px; }
  .cciv4-photo-frame img { object-position: 58% 50%; }
  .cciv4-photo-label { left: 14px; bottom: 14px; font-size: 12px; letter-spacing: .06em; }
  .cciv4-request-pop { top: 26px; right: -8px; grid-template-columns: 38px minmax(0, 1fr); width: calc(100% - 18px); padding: 11px; }
  .cciv4-request-icon { width: 38px; height: 38px; }
  .cciv4-request-pop time { display: none; }
  .cciv4-journey-card { right: 0; bottom: 50px; left: 12px; }
  .cciv4-journey-card header { padding-inline: 13px; }
  .cciv4-journey-card header span { max-width: 72%; }
  .cciv4-journey-card ol { grid-template-columns: 1fr; }
  .cciv4-journey-card li { min-height: 58px; padding: 9px 11px; border-right: 0; border-bottom: 1px solid var(--cciv4-line-dark); }
  .cciv4-journey-card li:last-child { border-bottom: 0; }
  .cciv4-journey-card li > span { width: 32px; height: 32px; }
  .cciv4-journey-card::before { width: 2px; height: 33.333%; }
  [data-v4-scene="hero"][data-v4-phase="1"] .cciv4-journey-card::before { transform: translateY(100%); }
  [data-v4-scene="hero"][data-v4-phase="2"] .cciv4-journey-card::before { transform: translateY(200%); }
  .cciv4-hero-visual > figcaption { right: 110px; left: 14px; bottom: -2px; }
  .cciv4-section { padding-block: 76px; }
  .cciv4-section-head { margin-bottom: 36px; }
  .cciv4-section-head h2 { max-width: none; font-size: clamp(1.95rem, 8.2vw, 2.35rem); }
  .cciv4-section-head > p:last-child { margin-top: 17px; font-size: 15px; }
  .cciv5-split-head > p:not(.cciv4-kicker) { font-size: 15px; }
  .cciv4-plain-copy { display: block; }
  .cciv4-pain { font-size: 21px; }
  .cciv4-callout { margin-top: 24px; }
  .cciv4-demo-head { min-height: 58px; padding: 7px 10px 7px 14px; }
  .cciv4-demo-head > div span { max-width: 170px; line-height: 1.25; }
  .cciv4-demo-head .cciv4-motion-toggle { min-width: 44px; width: 44px; padding: 0; }
  .cciv4-demo-head .cciv4-motion-toggle [data-v4-toggle-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .cciv4-window-bar { grid-template-columns: 58px 1fr 26px; padding-inline: 10px; }
  .cciv4-search-canvas { padding: 18px 13px 20px; }
  .cciv4-query { grid-template-columns: minmax(0, 1fr) 2px 28px; padding-left: 13px; }
  .cciv4-query span { font-size: 13px; }
  .cciv4-result-other { display: none; }
  .cciv4-result { padding: 17px 12px 13px; }
  .cciv4-result > p,
  .cciv4-result-own ul { margin-left: 0; }
  .cciv4-own-badge { position: static; display: inline-flex; margin-bottom: 10px; }
  .cciv4-before-after { grid-template-columns: 1fr; gap: 9px; margin-inline: 12px; }
  .cciv4-before-after > i { transform: rotate(90deg); text-align: center; }
  .cciv4-proof-layout { gap: 34px; }
  .cciv4-tabs button { flex-direction: column; gap: 5px; min-height: 76px; padding: 9px; font-size: 12px; text-align: center; }
  .cciv4-provider-panel { min-height: 0; }
  .cciv4-mini-nav { gap: 11px; padding-inline: 13px; }
  .cciv4-mini-nav span:nth-of-type(-n+2) { display: none; }
  .cciv4-provider-grid { grid-template-columns: 1fr; }
  .cciv4-provider-copy { padding: 27px 21px; }
  .cciv4-provider-copy h3 { font-size: 28px; }
  .cciv4-provider-photo { min-height: 230px; }
  .cciv4-proof-strip { grid-template-columns: 1fr; }
  .cciv4-proof-strip span { min-height: 44px; border-right: 0; border-bottom: 1px solid #e1e8f1; }
  .cciv4-proof-strip span:last-child { border-bottom: 0; }
  .cciv4-ai-panel { min-height: 0; padding: 17px 14px; }
  .cciv4-ai-top { grid-template-columns: 38px minmax(0, 1fr); }
  .cciv4-ai-top em { display: none; }
  .cciv4-ai-user p { max-width: 86%; }
  .cciv4-ai-answer { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  .cciv4-ai-answer > .cciv4-ai-mark { width: 34px; height: 34px; }
  .cciv4-ai-sources { grid-template-columns: 1fr; }
  .cciv4-ai-input,
  .cciv4-brand-note { margin-left: 44px; }
  .cciv4-mail-app { display: block; }
  .cciv4-mail-top { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; min-height: 56px; }
  .cciv4-mail-top > b { overflow: hidden; text-overflow: ellipsis; }
  .cciv4-mail-top label { display: none; }
  .cciv4-mail-list { border-right: 0; }
  .cciv4-mail-list > header { min-height: 50px; }
  .cciv4-mail-list article { display: none; }
  .cciv4-mail-list .cciv4-mail-incoming { display: grid; min-height: 92px; }
  .cciv4-mail-reader { overflow: visible; padding: 0 16px 21px; }
  .cciv4-mail-actions { margin-inline: -16px; padding-inline: 16px; }
  .cciv4-mail-actions span:nth-child(2),
  .cciv4-mail-actions span:nth-child(3) { display: none; }
  .cciv4-mail-reader h3 { font-size: 24px; }
  .cciv4-mail-body { font-size: 13px; }
  .cciv4-mail-toast { top: 69px; right: 10px; width: calc(100% - 20px); grid-template-columns: 38px minmax(0, 1fr); }
  .cciv4-mail-toast time { display: none; }
  .cciv4-inbox-benefits article { padding: 16px; }
  .cciv4-section-action { align-items: stretch; flex-direction: column; gap: 16px; padding: 19px; }
  .cciv4-method-tabs button { grid-template-columns: 34px minmax(0, 1fr); min-height: 76px; padding: 11px; }
  .cciv4-method-tabs button > span { width: 32px; height: 32px; }
  .cciv4-method-tabs button b { font-size: 12px; white-space: normal; }
  .cciv4-method-tabs button small { display: none; }
  .cciv4-method-panels { padding: 28px 20px; }
  .cciv4-method-panels h3 { font-size: 30px; }
  .cciv4-method-panels ul { align-items: stretch; flex-direction: column; }
  .cciv4-method-map { padding: 25px 18px; }
  .cciv4-method-map li b { font-size: 12px; }
  .cciv4-final-cta { padding: 24px 20px; }
  .cciv4-final-cta b { font-size: 23px; }
}

@media (max-width: 390px) {
  .cciv4-wrap { width: calc(100% - 28px); }
  .cciv4-hero h1 { font-size: 2.28rem; }
  .cciv4-sector-picker button { flex-basis: 100%; }
  .cciv4-hero-visual { min-height: 526px; }
  .cciv4-photo-frame { height: 270px; }
  .cciv4-journey-card { bottom: 53px; }
  .cciv4-demo-head > div span { max-width: 145px; }
  .cciv4-window-bar p { text-align: left; }
  .cciv4-result small span { display: none; }
  .cciv4-result-own li { width: 100%; }
  .cciv4-provider-photo { min-height: 215px; }
  .cciv4-ai-user p,
  .cciv4-ai-answer p { font-size: 13px; }
  .cciv4-mail-from time { display: none; }
  .cciv4-request-facts { align-items: stretch; flex-direction: column; }
  .cciv4-method-tabs { grid-template-columns: 1fr; }
  .cciv4-method-tabs button { border-right: 0; border-bottom: 1px solid rgba(181, 207, 236, .14); }
  .cciv4-method-tabs button:last-child { border-bottom: 0; }
  .cciv4-method-map ol { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .cciv4-method-map ol::before { display: none; }
}

/* V5 · encaje fino de las nuevas escenas. */
@media (max-width:1120px){
  .cciv5-hero-visual{min-height:600px}.cciv5-hero-outlook{width:min(100%,470px)}
  .cciv5-industry-reel{left:-10px;width:min(285px,61%);height:165px}
  .cciv5-mail-app .cciv4-mail-top{grid-template-columns:38px auto minmax(190px,1fr) 38px}.cciv5-mail-ribbon{display:none}
}
@media (max-width:900px){
  .cciv5-hero-visual{width:min(100%,680px);min-height:625px}.cciv5-hero-outlook{right:20px;width:min(100% - 20px,520px)}
  .cciv5-industry-reel{left:0;width:min(310px,56%);height:170px}
  .cciv5-google-demo .cciv4-search-canvas{padding-inline:clamp(18px,5vw,38px)}
  .cciv5-mail-app .cciv4-mail-top{grid-template-columns:38px auto minmax(180px,1fr) 38px}
}
@media (max-width:700px){
  .cciv5-hero-visual{min-height:620px}.cciv5-hero-outlook{right:0;width:100%;height:438px;aspect-ratio:auto;border-radius:20px}
  .cciv5-outlook-top{grid-template-columns:34px auto 34px;min-height:49px}.cciv5-outlook-top nav{display:none}.cciv5-outlook-top em{grid-column:3}
  .cciv5-outlook-search{height:32px;margin-block:7px}.cciv5-outlook-grid{grid-template-columns:minmax(112px,.78fr) minmax(0,1.22fr);height:calc(100% - 130px)}.cciv5-outlook-rail{display:none}
  .cciv5-outlook-list article{grid-template-columns:24px minmax(0,1fr);min-height:52px;padding:6px}.cciv5-outlook-list article time{display:none}.cciv5-avatar{width:24px;height:24px}
  .cciv5-outlook-reader{padding-inline:10px}.cciv5-reader-actions{margin-inline:-10px;padding-inline:10px}.cciv5-reader-actions span:nth-child(2){display:none}.cciv5-outlook-reader h3{font-size:12px}.cciv5-reader-body{font-size:8px}
  .cciv5-outlook-path{min-height:40px;padding-inline:9px;gap:5px}.cciv5-outlook-path span{font-size:7px}.cciv5-industry-reel{bottom:29px;left:0;width:min(225px,65%);height:143px;border-width:5px;border-radius:17px}
  .cciv5-hero-visual .cciv4-request-pop{top:55px;right:-6px;width:calc(100% - 15px)}.cciv5-hero-visual>figcaption{right:0;bottom:1px;left:82px;max-width:none;font-size:10px;text-align:right}
  .cciv5-demo-status{display:none}.cciv5-google-word{font-size:27px}.cciv5-google-tabs{gap:15px;overflow:hidden}.cciv5-google-tabs em{display:none}
  .cciv5-google-demo .cciv4-results-label{align-items:flex-start;flex-direction:column;gap:3px}.cciv5-serp-results{height:382px}.cciv5-serp-results .cciv4-result-other{display:block}
  .cciv5-serp-results .cciv4-result{min-height:61px;padding:8px 9px}.cciv5-serp-results [data-v5-rank="1"]{transform:translateY(0)}.cciv5-serp-results [data-v5-rank="2"]{transform:translateY(64px)}.cciv5-serp-results [data-v5-rank="3"]{transform:translateY(128px)}.cciv5-serp-results [data-v5-rank="4"]{transform:translateY(192px)}.cciv5-serp-results [data-v5-rank="5"]{transform:translateY(256px)}
  .cciv5-serp-results .cciv4-result>p{display:none}.cciv5-serp-results .cciv4-result-own{min-height:61px}.cciv5-serp-results .cciv4-result-own ul{margin-left:0}.cciv4-search-section[data-v5-rank="1"] [data-v5-rank="2"]{transform:translateY(108px)}.cciv4-search-section[data-v5-rank="1"] [data-v5-rank="3"]{transform:translateY(172px)}.cciv4-search-section[data-v5-rank="1"] [data-v5-rank="4"]{transform:translateY(236px)}.cciv4-search-section[data-v5-rank="1"] [data-v5-rank="5"]{transform:translateY(300px)}.cciv4-search-section[data-v5-rank="1"] [data-v5-own-result]{min-height:100px}
  .cciv5-serp-progress{margin-inline:12px}.cciv5-mail-app .cciv4-mail-top{grid-template-columns:36px minmax(0,1fr) 36px}.cciv5-mail-ribbon{display:none}
  .cciv5-ai-examples button{min-height:44px}
}
@media (max-width:390px){
  .cciv5-hero-visual{min-height:600px}.cciv5-hero-outlook{height:425px}.cciv5-outlook-grid{grid-template-columns:112px minmax(0,1fr)}
  .cciv5-outlook-list article:nth-of-type(n+4){display:none}.cciv5-industry-reel{bottom:28px;width:215px;height:136px}.cciv5-hero-visual>figcaption{left:52px;font-size:9px}
  .cciv5-google-tabs{gap:12px;padding-inline:4px}.cciv5-google-tabs span:nth-of-type(n+3){display:none}.cciv5-serp-results .cciv4-result small{font-size:10px}.cciv5-serp-results .cciv4-result>div b{font-size:12px}
  .cciv5-serp-progress{gap:6px;padding-inline:9px}.cciv5-serp-progress span{font-size:8px}
}

/* V5 · reserva real para el header global superpuesto.
 * El kicker del hero empieza siempre por debajo del offset declarado por el
 * propio header, también cuando las columnas o los controles hacen crecer la
 * primera pantalla. Conservamos de forma independiente el padding inferior. */
.cciv4-hero-grid{
  padding-top:max(clamp(54px,8vh,82px),calc(var(--cp-header-offset,104px) + 18px));
}

@media (prefers-reduced-motion: reduce) {
  .cciv4 *,
  .cciv4 *::before,
  .cciv4 *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .cciv4-scroll-cue { display: none; }
}