:root {
  --tinta: #1b2a44;
  --papel: #f6f5f1;
  --ambar: #e8a13c;
  --niebla: #c9d2de;
  --grafito: #46536b;
  --white: #ffffff;
  --line: rgba(27, 42, 68, 0.16);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Inter", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

a {
  color: inherit;
}

button,
input,
textarea,
select {
  font: inherit;
}

.site-header {
  align-items: center;
  background: rgba(246, 245, 241, 0.96);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 78px;
  padding: 0 5vw;
  position: sticky;
  top: 0;
  z-index: 20;
}

.wordmark {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-decoration: none;
}

.wordmark span,
h1 > span,
h2 > span {
  color: var(--ambar);
}

.site-header nav {
  display: flex;
  gap: 34px;
}

.site-header nav a {
  color: var(--grafito);
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
  color: var(--tinta);
}

.header-cta {
  border-bottom: 1px solid var(--ambar);
  font-size: 0.84rem;
  font-weight: 600;
  justify-self: end;
  padding-bottom: 2px;
  text-decoration: none;
}

.header-tools {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-self: end;
}

.language-switcher {
  align-items: center;
  display: flex;
  gap: 4px;
}

.language-switcher button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--grafito);
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  padding: 5px 4px 3px;
}

.language-switcher button:hover,
.language-switcher button:focus-visible,
.language-switcher button.active {
  border-bottom-color: var(--ambar);
  color: var(--tinta);
}

.hero {
  background: var(--tinta);
  color: var(--papel);
  min-height: calc(100vh - 78px);
  padding: clamp(76px, 10vw, 150px) 5vw 80px;
}

.hero-grid {
  align-items: end;
  display: grid;
  gap: 8vw;
  grid-template-columns: minmax(0, 1.4fr) minmax(340px, 0.6fr);
  margin: 0 auto;
  max-width: 1400px;
}

.eyebrow {
  color: var(--niebla);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  margin: 0 0 24px;
  text-transform: uppercase;
}

.eyebrow.dark {
  color: var(--grafito);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: "Manrope", Arial, sans-serif;
}

h1 {
  font-size: clamp(2.2rem, 3.2vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.06;
  margin-bottom: 30px;
  max-width: 760px;
}

h1 em {
  color: var(--niebla);
  font-style: normal;
}

.hero-lead {
  color: var(--niebla);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.55;
  max-width: 760px;
}

.hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 42px;
}

.button {
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  font-weight: 600;
  justify-content: center;
  min-height: 54px;
  padding: 15px 24px;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease;
}

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

.button-primary {
  background: var(--ambar);
  color: var(--tinta);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: #f0ad4c;
}

.text-link {
  color: var(--papel);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration-color: rgba(246, 245, 241, 0.4);
  text-underline-offset: 5px;
}

.text-link span {
  color: var(--ambar);
  padding-left: 8px;
}

.decision-card {
  border: 1px solid rgba(201, 210, 222, 0.38);
  min-height: 430px;
  padding: 38px;
  position: relative;
}

.card-label,
.panel-label {
  color: var(--ambar);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.decision-card ol {
  list-style: none;
  margin: 70px 0 0;
  padding: 0;
}

.decision-card li {
  border-top: 1px solid rgba(201, 210, 222, 0.25);
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  font-weight: 700;
  padding: 20px 0;
}

.decision-card li span {
  color: var(--niebla);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem;
  margin-right: 18px;
}

.card-point {
  background: var(--ambar);
  border-radius: 50%;
  bottom: 32px;
  height: 13px;
  position: absolute;
  right: 32px;
  width: 13px;
}

.section {
  margin: 0 auto;
  max-width: 1500px;
  padding: 130px 5vw;
}

.section-heading {
  margin-bottom: 62px;
  max-width: 730px;
}

.section-heading h2,
.diagnosis-intro h2,
.request-copy h2,
.about-copy h2 {
  font-size: clamp(1.8rem, 2.5vw, 2.55rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin-bottom: 24px;
}

.section-heading > p:last-child,
.diagnosis-intro > p:last-child,
.about-copy > p {
  color: var(--grafito);
  font-size: 1.08rem;
}

.symptom-grid {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.symptom-card {
  border-right: 1px solid var(--line);
  display: grid;
  grid-template-rows: 46px 112px 1fr;
  min-height: 320px;
  padding: 32px 28px;
}

.symptom-card:last-child {
  border-right: 0;
}

.mono-number,
.steps article > span,
.service-index {
  color: var(--ambar);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.84rem;
}

.symptom-card h3 {
  align-self: start;
  font-size: 1.25rem;
  margin: 0;
  padding-bottom: 14px;
}

.symptom-card p {
  color: var(--grafito);
  font-size: 0.94rem;
  margin: 0;
}

.diagnosis-section {
  background: var(--tinta);
  color: var(--papel);
  display: grid;
  gap: 8vw;
  grid-template-columns: 0.9fr 1.1fr;
  max-width: none;
}

.diagnosis-intro {
  padding-left: max(0px, calc((100vw - 1500px) / 2));
}

.diagnosis-intro > p:last-child {
  color: var(--niebla);
  max-width: 600px;
}

.deliverable-panel {
  border: 1px solid rgba(201, 210, 222, 0.34);
  padding: 44px;
}

.deliverable-panel ul {
  list-style: none;
  margin: 42px 0 0;
  padding: 0;
}

.deliverable-panel li {
  border-top: 1px solid rgba(201, 210, 222, 0.22);
  padding: 18px 0 18px 30px;
  position: relative;
}

.deliverable-panel li::before {
  color: var(--ambar);
  content: "•";
  left: 2px;
  position: absolute;
}

.section-heading.horizontal {
  align-items: end;
  display: grid;
  gap: 8vw;
  grid-template-columns: 1fr 0.7fr;
  max-width: none;
}

.section-heading.horizontal p:last-child {
  margin-bottom: 12px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.steps article {
  border-left: 1px solid var(--line);
  display: grid;
  grid-template-rows: 46px 58px 1fr;
  min-height: 250px;
  padding: 26px;
}

.steps h3 {
  align-self: start;
  font-size: 1.16rem;
  margin: 0;
  padding-bottom: 12px;
}

.steps p {
  color: var(--grafito);
  font-size: 0.9rem;
  margin: 0;
}

.services-section {
  padding-top: 50px;
}

.services-list {
  border-top: 1px solid var(--line);
}

.services-list article {
  align-items: start;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 32px;
  grid-template-columns: 70px 0.65fr 1fr;
  padding: 34px 0;
}

.service-label {
  color: var(--ambar);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.services-list h3 {
  font-size: 1.45rem;
  margin: 0;
}

.services-list article > p {
  color: var(--grafito);
  margin: 0;
}

.fit-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: none;
  padding: 0;
}

.fit-column {
  min-height: 620px;
  padding: 100px max(5vw, calc((100vw - 1500px) / 2 + 5vw));
}

.fit-column.positive {
  background: var(--niebla);
}

.fit-column.negative {
  background: var(--tinta);
  color: var(--papel);
}

.fit-column h2 {
  font-size: clamp(1.75rem, 2.35vw, 2.55rem);
  line-height: 1.12;
  margin-bottom: 48px;
}

.fit-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fit-column li {
  border-top: 1px solid rgba(27, 42, 68, 0.2);
  padding: 16px 0 16px 26px;
  position: relative;
}

.negative li {
  border-color: rgba(201, 210, 222, 0.2);
}

.fit-column li::before {
  color: var(--ambar);
  content: "•";
  left: 0;
  position: absolute;
}

.about-section {
  align-items: center;
  display: grid;
  gap: 10vw;
  grid-template-columns: 0.5fr 1fr;
}

.about-photo {
  aspect-ratio: 1;
  margin: 0;
  max-width: 410px;
  overflow: hidden;
  width: 100%;
}

.about-photo img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  width: 100%;
}

.about-copy {
  max-width: 780px;
}

.dark-link {
  color: var(--tinta);
  text-decoration-color: var(--ambar);
}

.request-section {
  background: var(--tinta);
  color: var(--papel);
  display: grid;
  gap: 8vw;
  grid-template-columns: 0.8fr 1.2fr;
  padding: 130px max(5vw, calc((100vw - 1500px) / 2 + 5vw));
}

.request-copy > p:not(.eyebrow) {
  color: var(--niebla);
  font-size: 1.05rem;
}

.request-fact {
  align-items: center;
  border-top: 1px solid rgba(201, 210, 222, 0.24);
  display: flex;
  gap: 20px;
  margin-top: 48px;
  padding-top: 22px;
}

.request-fact .mono-number {
  font-size: 2.8rem;
}

.request-fact p {
  color: var(--niebla);
  margin: 0;
}

.request-form {
  background: var(--papel);
  color: var(--tinta);
  padding: clamp(28px, 5vw, 58px);
}

.field-row {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
}

.request-form label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 22px;
}

.request-form input,
.request-form textarea,
.request-form select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(27, 42, 68, 0.32);
  border-radius: 0;
  color: var(--tinta);
  margin-top: 8px;
  outline: none;
  padding: 12px 2px;
  width: 100%;
}

.request-form textarea {
  border: 1px solid rgba(27, 42, 68, 0.26);
  padding: 12px;
  resize: vertical;
}

.request-form input:focus,
.request-form textarea:focus,
.request-form select:focus {
  border-color: var(--ambar);
}

.consent {
  align-items: flex-start;
  color: var(--grafito);
  display: flex !important;
  font-weight: 400 !important;
  gap: 12px;
  line-height: 1.5;
}

.consent input {
  accent-color: var(--ambar);
  margin-top: 4px;
  width: auto;
}

.form-button {
  margin-top: 12px;
  width: 100%;
}

.form-button:disabled {
  cursor: wait;
  opacity: 0.68;
  transform: none;
}

.honeypot {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.form-status {
  font-size: 0.88rem;
  margin: 4px 0 0;
  text-align: center;
}

.form-status.success {
  color: #236443;
}

.form-status.error {
  color: #8a2d2d;
}

.form-fallback {
  color: var(--grafito);
  font-size: 0.78rem;
  margin: 16px 0 0;
  text-align: center;
}

footer {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  font-size: 0.82rem;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 34px 5vw;
}

footer p {
  color: var(--grafito);
  margin: 0;
  text-align: center;
}

.footer-contact {
  text-align: right;
}

@media (max-width: 1050px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .site-header nav {
    display: none;
  }

  .hero-grid,
  .diagnosis-section,
  .request-section {
    grid-template-columns: 1fr;
  }

  .decision-card {
    min-height: auto;
  }

  .symptom-grid,
  .steps {
    grid-template-columns: 1fr 1fr;
  }

  .symptom-card:nth-child(2) {
    border-right: 0;
  }

  .symptom-card:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .section-heading.horizontal {
    grid-template-columns: 1fr;
  }

  .about-section {
    grid-template-columns: 0.4fr 1fr;
  }
}

@media (max-width: 700px) {
  .site-header {
    min-height: 66px;
  }

  .header-cta {
    font-size: 0.75rem;
  }

  .hero {
    min-height: auto;
    padding-top: 72px;
  }

  h1 {
    font-size: clamp(2rem, 8.5vw, 2.65rem);
    letter-spacing: -0.035em;
    line-height: 1.08;
  }

  .decision-card {
    padding: 26px;
  }

  .section {
    padding-bottom: 90px;
    padding-top: 90px;
  }

  .symptom-grid,
  .steps,
  .fit-section,
  .about-section,
  .field-row {
    grid-template-columns: 1fr;
  }

  .symptom-card,
  .symptom-card:nth-child(2) {
    border-bottom: 1px solid var(--line);
    border-right: 0;
    grid-template-rows: auto auto auto;
    min-height: 250px;
  }

  .symptom-card h3 {
    margin-top: 20px;
  }

  .steps article {
    grid-template-rows: auto auto auto;
  }

  .steps h3 {
    margin-top: 0;
  }

  .header-tools {
    gap: 10px;
  }

  .header-cta {
    display: none;
  }

  .services-list article {
    gap: 18px;
    grid-template-columns: 44px 1fr;
  }

  .services-list article > p {
    grid-column: 2;
  }

  .fit-column {
    min-height: auto;
    padding: 80px 6vw;
  }

  .about-photo {
    max-width: 280px;
  }

  .request-section {
    padding: 90px 5vw;
  }

  footer {
    gap: 14px;
    grid-template-columns: 1fr;
    text-align: left;
  }

  footer p,
  .footer-contact {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .button {
    transition: none;
  }
}


#lacifra-squarespace-root { width: 100%; }
#lacifra-squarespace-root main { width: 100%; }
.sqs-block-code, .sqs-block-code .sqs-block-content { padding: 0 !important; }



/* Portfolio page (/portfolio) */
.site-header nav a[aria-current="page"] { color: var(--tinta); }
.pf-page { --pf-warm: #eeebe3; }
.pf-inner { margin: 0 auto; max-width: 1400px; position: relative; }
.pf-kicker { color: var(--ambar) !important; }
.pf-label { color: var(--ambar); font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; letter-spacing: 0.12em; margin: 0 0 14px; text-transform: uppercase; }
.pf-cover { background: var(--tinta); color: var(--papel); padding: clamp(76px, 9vw, 130px) 5vw 80px; }
.pf-cover-top { align-items: start; display: flex; justify-content: space-between; }
.pf-year { color: var(--niebla); font-family: "IBM Plex Mono", monospace; font-size: 0.78rem; }
.pf-cover h1 { font-size: clamp(2.4rem, 4.6vw, 4.4rem); max-width: 980px; }
.pf-cover .hero-lead { margin-bottom: 12px; }
.pf-signature { border-top: 1px solid rgba(201, 210, 222, 0.25); margin-top: 64px; max-width: 900px; padding-top: 28px; }
.pf-signature p { color: var(--niebla); font-size: 0.95rem; margin: 0 0 6px; }
.pf-signature a { color: var(--papel); text-decoration-color: var(--ambar); text-underline-offset: 4px; }
.pf-signature .pf-name { color: var(--papel); font-family: "Manrope", Arial, sans-serif; font-size: 1.25rem; font-weight: 800; margin-bottom: 4px; }
.pf-signature .pf-role { color: var(--ambar); font-family: "IBM Plex Mono", monospace; font-size: 0.78rem; letter-spacing: 0.04em; margin-bottom: 16px; }
.pf-method, .pf-case { padding: 120px 5vw; }
.pf-method .section-heading h2 { font-size: clamp(1.8rem, 2.5vw, 2.55rem); letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 18px; }
.pf-method .section-heading > p:last-child { color: var(--grafito); font-size: 1.08rem; }
.pf-layers article { border-left: 0; border-top: 1px solid var(--tinta); padding: 22px 26px 26px 0; }
.pf-case-cards { display: grid; gap: 20px; grid-template-columns: repeat(5, 1fr); margin-top: 56px; }
.pf-case-card { background: var(--white); border: 1px solid var(--line); color: var(--tinta); display: block; padding: 26px; text-decoration: none; transition: border-color 160ms ease, transform 160ms ease; }
.pf-case-card:hover, .pf-case-card:focus-visible { border-color: var(--ambar); transform: translateY(-2px); }
.pf-case-card h3 { font-size: 1.08rem; line-height: 1.3; margin: 0 0 10px; }
.pf-case-card p { color: var(--grafito); font-size: 0.88rem; margin: 0; }
.pf-case { overflow: hidden; scroll-margin-top: 78px; }
.pf-case-light { background: var(--papel); }
.pf-case-warm { background: var(--pf-warm); }
.pf-case-number { color: var(--tinta); font-family: "Manrope", Arial, sans-serif; font-size: clamp(6rem, 13vw, 11rem); font-weight: 800; letter-spacing: -0.06em; line-height: 0.8; opacity: 0.06; pointer-events: none; position: absolute; right: 0; top: -20px; }
.pf-case-head { margin-bottom: 56px; max-width: 900px; position: relative; }
.pf-case-head h2 { font-size: clamp(1.7rem, 2.4vw, 2.45rem); letter-spacing: -0.035em; line-height: 1.12; margin-bottom: 18px; }
.pf-case-sub { color: var(--grafito); font-size: 0.95rem; margin: 0; }
.pf-case-link { margin: 0.75rem 0 0; }
.pf-case-link .text-link { color: var(--tinta); text-decoration-color: var(--ambar); overflow-wrap: anywhere; }
.pf-case-grid { align-items: start; display: grid; gap: 6vw; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); position: relative; }
.pf-block { margin-bottom: 40px; }
.pf-block > p:not(.pf-label) { color: var(--tinta); font-size: 1rem; margin-bottom: 12px; }
.pf-list { list-style: none; margin: 0; padding: 0; }
.pf-list li { border-top: 1px solid var(--line); color: var(--tinta); font-size: 0.96rem; padding: 14px 0 14px 26px; position: relative; }
.pf-list li::before { color: var(--ambar); content: "•"; left: 2px; position: absolute; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.pf-chips li { border: 1px solid var(--line); font-family: "IBM Plex Mono", monospace; font-size: 0.78rem; padding: 7px 12px; }
.pf-roles { display: grid; gap: 14px; }
.pf-roles article { background: var(--white); border: 1px solid var(--line); padding: 20px 22px; }
.pf-roles h4 { font-family: "Manrope", Arial, sans-serif; font-size: 1.02rem; margin: 0 0 6px; }
.pf-roles p { color: var(--grafito); font-size: 0.92rem; margin: 0; }
.pf-for-business { border-left: 3px solid var(--ambar); color: var(--tinta); font-size: 1.02rem; margin: 8px 0 0; padding: 4px 0 4px 20px; }
.pf-aside { display: grid; gap: 14px; }
.pf-aside > .pf-label { margin-bottom: 0; }
.pf-result { background: var(--white); border: 1px solid var(--line); padding: 24px 26px; }
.pf-result-value { color: var(--ambar); display: block; font-family: "Manrope", Arial, sans-serif; font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 10px; }
.pf-result p { color: var(--grafito); font-size: 0.9rem; margin: 0; }
.pf-quote { background: var(--tinta); color: var(--papel); font-family: "Manrope", Arial, sans-serif; font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; margin: 0; padding: 36px 32px; position: relative; }
.pf-quote::after { background: var(--ambar); border-radius: 50%; bottom: 24px; content: ""; height: 11px; position: absolute; right: 24px; width: 11px; }
.pf-calc { background: var(--white); border: 1px solid var(--line); gap: 0; padding: 30px; }
.pf-calc-formula { color: var(--tinta); font-size: 0.9rem; margin: 0 0 14px; }
.pf-calc-note { color: var(--grafito); font-size: 0.82rem; margin: 0 0 18px; }
.pf-calc-fields { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.pf-calc-field { border-top: 1px solid var(--line); display: block; padding-top: 10px; }
.pf-calc-input { align-items: baseline; display: flex; gap: 4px; }
.pf-calc-input input { -moz-appearance: textfield; appearance: textfield; background: transparent; border: 0; border-bottom: 1px solid rgba(27, 42, 68, 0.32); border-radius: 0; color: var(--ambar); font-family: "Manrope", Arial, sans-serif; font-size: 1.8rem; font-weight: 800; letter-spacing: -0.03em; min-width: 0; outline: none; padding: 2px 0; width: 100%; }
.pf-calc-input input::-webkit-outer-spin-button, .pf-calc-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pf-calc-input input:focus { border-bottom-color: var(--ambar); }
.pf-calc-input span { color: var(--ambar); font-family: "Manrope", Arial, sans-serif; font-size: 1.3rem; font-weight: 800; }
.pf-calc-caption { color: var(--grafito); display: block; font-size: 0.82rem; margin-top: 6px; }
.pf-calc-total { align-items: baseline; background: var(--tinta); color: var(--papel); display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; margin-top: 24px; padding: 20px 22px; }
.pf-calc-total span { color: var(--niebla); font-size: 0.9rem; }
.pf-calc-total output { color: var(--ambar); font-family: "Manrope", Arial, sans-serif; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; }
.pf-offer { background: var(--tinta); color: var(--papel); padding: 120px 5vw; }
.pf-offer h2 { font-size: clamp(1.9rem, 3vw, 3rem); letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 56px; max-width: 900px; }
.pf-formats { display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); }
.pf-formats article { border-top: 1px solid rgba(201, 210, 222, 0.3); display: flex; flex-direction: column; padding: 28px 32px 8px 0; }
.pf-format-index { color: var(--ambar); font-family: "IBM Plex Mono", monospace; font-size: 0.84rem; margin-bottom: 18px; }
.pf-formats h3 { font-size: 1.3rem; line-height: 1.25; margin: 0 0 14px; }
.pf-formats p { color: var(--niebla); flex: 1; font-size: 0.95rem; margin: 0 0 22px; }
.pf-formats .text-link { align-self: flex-start; }
.pf-offer-signature { margin-top: 80px; }
@media (max-width: 1050px) {
  .pf-case-cards { grid-template-columns: 1fr 1fr; }
  .pf-case-grid { grid-template-columns: 1fr; }
  .pf-formats { grid-template-columns: 1fr; }
  .pf-formats article { padding-right: 0; padding-bottom: 28px; }
}
@media (max-width: 700px) {
  .pf-method, .pf-case, .pf-offer { padding-bottom: 80px; padding-top: 80px; }
  .pf-cover { padding-top: 64px; }
  .pf-case-cards { grid-template-columns: 1fr; margin-top: 40px; }
  .pf-layers article { padding-right: 0; }
  .pf-case-number { font-size: 5.5rem; top: -30px; }
  .pf-case-head { margin-bottom: 36px; }
  .pf-calc { padding: 22px; }
  .pf-calc-fields { grid-template-columns: 1fr 1fr; }
  .pf-calc-input input { font-size: 1.45rem; }
  .pf-signature { margin-top: 44px; }
}

/* Page arrows: back (portfolio) and up (all pages) */
.page-arrows { bottom: 28px; display: flex; flex-direction: column; gap: 10px; position: fixed; right: 28px; z-index: 30; }
.page-arrow { align-items: center; background: rgba(246, 245, 241, 0.94); border: 1px solid var(--ambar); border-radius: 50%; color: var(--ambar); cursor: pointer; display: flex; height: 48px; justify-content: center; padding: 0; transition: background 160ms ease, color 160ms ease, opacity 200ms ease, transform 160ms ease; width: 48px; }
.page-arrow svg { fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; width: 20px; }
.page-arrow:hover, .page-arrow:focus-visible { background: var(--ambar); color: var(--tinta); outline: none; transform: translateY(-2px); }
.page-arrow[hidden] { display: none; }
.page-arrow-up { opacity: 0; pointer-events: none; }
.page-arrow-up.visible { opacity: 1; pointer-events: auto; }
@media (max-width: 700px) {
  .page-arrows { bottom: 18px; right: 16px; }
  .page-arrow { height: 44px; width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-arrow { transition: none; }
}

/* 2026-10-06: Instagram button (RU page) */
.header-ig { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta); text-decoration: none; font-weight: 600; padding: 10px 14px; border: 1px solid rgba(27,42,68,.18); border-radius: 999px; margin-right: 10px; transition: border-color .2s, color .2s; }
.header-ig:hover, .header-ig:focus-visible { border-color: var(--ambar); color: var(--tinta); }
.ig-link { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 760px) { .header-ig span { display: none; } .header-ig { padding: 9px; margin-right: 6px; } }

/* 2026-10-06 lift v2: brand graphics + light motion, same on RU/ES/EN. Texts untouched. */
:root { --lift-ease: cubic-bezier(.2, .7, .2, 1); }

/* Rhythm: a bit more air than the original, less than v1 */
.section { padding: clamp(90px, 9vw, 130px) 5.5vw; }
.section-heading { margin-bottom: 56px; }
.section-heading p, .diagnosis-intro p, .about-copy p, .request-copy p { line-height: 1.65; }
.button { border-radius: 999px; padding: 15px 30px; }
.header-cta { border-radius: 999px; }

/* Instagram in the header: quiet, same weight as the nav */
.header-ig { font-size: .82rem !important; font-weight: 500 !important; padding: 6px 12px !important; gap: 6px !important; border-color: rgba(27,42,68,.12) !important; }
.header-ig svg { width: 14px; height: 14px; }
.ig-link svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 6px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero-grid { position: relative; z-index: 1; }
.lift-hero-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; --lift-trend-h: 40%; }
.lift-hero-art svg { position: absolute; }
.lift-rings { right: -220px; top: -160px; width: 760px; height: 760px; animation: lift-spin 70s linear infinite; position: absolute; pointer-events: none; }
.lift-trend { left: 0; bottom: 0; width: 100%; height: 40%; }
.lift-trend .line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lift-draw 2.6s .5s var(--lift-ease) forwards; }
.lift-trend .area { opacity: 0; animation: lift-fade 1.6s 1.4s ease forwards; }
.lift-dot { position: absolute; width: 12px; height: 12px; margin: 0 0 -6px -6px; border-radius: 50%; background: #E8A13C; box-shadow: 0 0 0 6px rgba(232,161,60,.15); opacity: 0; animation: lift-pop .5s var(--lift-ease) forwards; }
.decision-card { border-radius: 22px; background: rgba(27, 42, 68, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.card-point { animation: lift-pulse 2.8s ease-in-out infinite; }
.decision-card li { transition: transform .3s var(--lift-ease); }
.decision-card li:hover { transform: translateX(6px); }

/* ---------- Icons: draw themselves on reveal, then one quiet idle motion each ---------- */
.lift-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 17px; margin-bottom: 22px; color: #B8741E;
  background: linear-gradient(145deg, #FCEFD9, #F5DDB5); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 22px -14px rgba(184,116,30,.55); }
.lift-icon svg { width: 28px; height: 28px; overflow: visible; }
.lift-icon-sm { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 12px; }
.lift-icon-sm svg { width: 24px; height: 24px; }
.lift-badge { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; margin-bottom: 18px; position: relative; z-index: 1;
  color: #E8A13C; background: radial-gradient(circle at 30% 25%, #2A3D60, #1B2A44 70%); box-shadow: 0 0 0 6px rgba(246,245,241,.9), 0 12px 24px -12px rgba(27,42,68,.7); }
.lift-badge svg { width: 26px; height: 26px; overflow: visible; }
.lift-stroke { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s .25s var(--lift-ease); }
.lift-icon svg, .lift-badge svg { opacity: 0; transform: scale(.55) rotate(-8deg); transition: opacity .6s .3s ease, transform .9s .3s cubic-bezier(.3,1.6,.5,1); }
.lift-in .lift-icon svg, .lift-in .lift-badge svg { opacity: 1; transform: none; }
.lift-in .lift-stroke, .lift-in.lift-stroke { stroke-dashoffset: 0; }
.lift-icon g, .lift-icon path, .lift-icon circle, .lift-badge g, .lift-badge path, .lift-badge circle { transform-box: fill-box; }
/* idle motions run only once the card is on screen; delays let the drawing finish first */
.lift-in .a-pen   { animation: a-write 2.6s 1.6s ease-in-out infinite; }
.lift-in .a-bar   { transform-origin: bottom; animation: a-bar 3.2s 1.5s ease-in-out infinite; }
.lift-in .a-d2    { animation-delay: 1.8s; } .lift-in .a-d3 { animation-delay: 2.1s; }
.lift-in .a-blink { animation: a-blink 2.4s 1.6s ease-in-out infinite; }
.lift-in .a-flip  { transform-origin: center; animation: a-flip 4.8s 1.6s cubic-bezier(.7,0,.3,1) infinite; }
.lift-in .a-rise  { animation: a-rise 2.8s 1.6s ease-in-out infinite; }
.lift-in .a-type  { animation: a-type 1.4s 1.5s ease-in-out infinite; }
.lift-in .a-type.a-d2 { animation-delay: 1.68s; } .lift-in .a-type.a-d3 { animation-delay: 1.86s; }
.lift-in .a-check { transform-origin: center; animation: a-redraw 3.6s 2s ease-in-out infinite; }
.lift-in .a-scan  { animation: a-scan 4s 1.6s ease-in-out infinite; }
.lift-in .a-flag  { transform-origin: left center; animation: a-flag 2.2s 1.6s ease-in-out infinite; }
.lift-in .a-zoom  { transform-origin: 45% 45%; animation: a-zoom 3s 1.6s ease-in-out infinite; }
.lift-in .a-bob   { animation: a-bob 3s 1.6s ease-in-out infinite; }
.lift-in .a-tick  { transform-origin: center; animation: a-redraw 3.6s 1.8s ease-in-out infinite; }
.lift-in .a-tick.a-d2 { animation-delay: 2.1s; } .lift-in .a-tick.a-d3 { animation-delay: 2.4s; }
.lift-in .a-spin  { transform-origin: center; animation: lift-spin 9s 1.6s linear infinite; }
@keyframes a-write { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-1.2px, .8px); } 50% { transform: translate(.6px, -.4px); } 75% { transform: translate(-.6px, .9px); } }
@keyframes a-bar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.62); } }
@keyframes a-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes a-flip { 0%, 40% { transform: rotate(0); } 55%, 90% { transform: rotate(180deg); } 100% { transform: rotate(180deg); } }
@keyframes a-rise { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1.2px, -1.6px); } }
@keyframes a-type { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-1.6px); opacity: 1; } }
@keyframes a-redraw { 0%, 100% { opacity: 1; transform: scale(1); } 15% { opacity: .25; transform: scale(.7); } 35% { opacity: 1; transform: scale(1.12); } 50% { transform: scale(1); } }
@keyframes a-scan { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-3px, 2px); } 66% { transform: translate(-6px, 0); } }
@keyframes a-flag { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-6deg) scaleX(.94); } }
@keyframes a-zoom { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes a-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.8px); } }

/* ---------- Symptoms ---------- */
.symptom-grid { gap: 20px; border: 0 !important; }
.symptom-card { border: 0 !important; background: #fff; border-radius: 22px; padding: 30px 28px 32px !important; grid-template-rows: auto auto 1fr !important; min-height: 0 !important;
  box-shadow: 0 1px 0 rgba(27,42,68,.06), 0 18px 40px -28px rgba(27,42,68,.35); transition: transform .35s var(--lift-ease), box-shadow .35s; }
.symptom-card:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(27,42,68,.06), 0 28px 50px -26px rgba(27,42,68,.45); }
.symptom-card .mono-number { display: none; }
.symptom-card h3 { margin-top: 0 !important; min-height: 2.6em; }

/* ---------- Dark sections: dot texture ---------- */
.diagnosis-section, .request-section { position: relative; overflow: hidden; }
.diagnosis-section::before, .request-section::before, .pf-offer::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(201,210,222,.13) 1px, transparent 1.4px); background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(120deg, transparent 15%, #000 70%); mask-image: linear-gradient(120deg, transparent 15%, #000 70%); }
.diagnosis-section > *, .request-section > * { position: relative; }
.deliverable-panel, .request-form { border-radius: 22px; }
.deliverable-panel { background: rgba(246,245,241,.03); }

/* radar */
.lift-radar { position: relative; width: min(300px, 70vw); aspect-ratio: 1; margin-top: 48px; }
.lift-radar svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lift-sweep { position: absolute; inset: 2%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(232,161,60,.32), rgba(232,161,60,0) 22%, transparent 100%);
  animation: lift-spin 4.5s linear infinite; }
.lift-blip { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #C9D2DE; opacity: 0; animation: lift-blip 4.5s ease-out infinite; }
.lift-target { position: absolute; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: #E8A13C; box-shadow: 0 0 0 0 rgba(232,161,60,.6); animation: lift-pulse 2.2s ease-in-out infinite; }

/* ---------- Method steps (home + portfolio layers) ---------- */
.steps { position: relative; gap: 20px; }
.steps article { grid-template-rows: auto auto auto 1fr !important; border: 0 !important; background: rgba(255,255,255,.7); border-radius: 22px; padding: 28px 24px !important; position: relative; z-index: 1;
  box-shadow: 0 16px 36px -30px rgba(27,42,68,.4); transition: transform .35s var(--lift-ease); }
.steps article:hover { transform: translateY(-5px); }
.steps article > span:not(.lift-badge) { display: block; font-family: "IBM Plex Mono", monospace; font-size: .74rem; letter-spacing: .12em; color: #C9801F; margin-bottom: 6px; min-height: 0 !important; }
.lift-steps-line { position: absolute; left: 50px; right: 50px; top: 54px; height: 2px; background: rgba(27,42,68,.1); z-index: 0; }
.lift-steps-line i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #E8A13C, rgba(232,161,60,.3)); transform-origin: left; transform: scaleX(0); transition: transform 1.6s .3s var(--lift-ease); }
.steps.lift-in .lift-steps-line i { transform: scaleX(1); }

/* ---------- Services ---------- */
.services-list article { transition: background .3s, transform .35s var(--lift-ease); border-radius: 18px; }
.services-list article:hover { background: rgba(255,255,255,.6); transform: translateX(6px); }
.service-index { display: flex !important; flex-direction: column; align-items: flex-start; }

/* ---------- Fit ---------- */
.fit-section { gap: 20px; }
.fit-column { border-radius: 24px; position: relative; overflow: hidden; }
.lift-mark { position: absolute; right: 28px; top: 28px; width: 76px; height: 76px; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fit-column.positive .lift-mark { stroke: #1B2A44; opacity: .55; }
.fit-column.negative .lift-mark { stroke: #E8A13C; opacity: .8; }

/* ---------- About ---------- */
.about-photo { position: relative; overflow: visible !important; }
.about-photo img { border-radius: 24px; position: relative; z-index: 1; box-shadow: 0 40px 70px -40px rgba(27,42,68,.55); }
.about-photo::before { content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(232,161,60,.55); right: -14%; top: -10%; z-index: 0; animation: lift-float 8s ease-in-out infinite; }
.about-photo::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #E8A13C; right: 4%; top: -2%; z-index: 2; animation: lift-pulse 2.8s ease-in-out infinite; }

/* ---------- Request ---------- */
.lift-req-rings { position: absolute !important; left: -180px; bottom: -220px; width: 560px; height: 560px; pointer-events: none; animation: lift-spin 80s linear infinite reverse; }

/* ---------- Portfolio ---------- */
.pf-cover { position: relative; overflow: hidden; isolation: isolate; }
.pf-cover .pf-inner { z-index: 1; }
.lift-pf-rings { right: -260px; top: -200px; z-index: 0; }
.lift-orbit { position: absolute; right: -10px; top: 40px; width: min(380px, 30vw); pointer-events: none; }
.lift-orbit svg { width: 100%; height: auto; overflow: visible; }
.lift-orbit-spin, .lift-orbit-sat { transform-box: view-box; transform-origin: 50% 50%; }
.lift-orbit-spin { animation: lift-spin 60s linear infinite; }
.lift-orbit-sat { animation: lift-spin 90s linear infinite reverse; }
.lift-orbit-upright { transform-box: fill-box; transform-origin: center; animation: lift-spin 60s linear infinite reverse; }
.lift-orbit-node { opacity: 0; transform-box: fill-box; transform-origin: center; animation: lift-pop .7s var(--lift-ease) forwards; }
.lift-orbit-disc { fill: rgba(27,42,68,.92); stroke: rgba(232,161,60,.55); stroke-width: 1.2; }
.lift-orbit-link { stroke: rgba(232,161,60,.28); stroke-dasharray: 1; stroke-dashoffset: 1; animation: lift-draw 1s var(--lift-ease) forwards; }
.lift-orbit-glow { animation: a-glow 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.lift-orbit-ping { transform-box: fill-box; transform-origin: center; opacity: 0; animation: lift-ping 2.6s 1.2s ease-out infinite; }
@keyframes a-glow { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
.pf-case-card { border-radius: 20px !important; position: relative; overflow: hidden; transition: transform .35s var(--lift-ease), box-shadow .35s !important; }
.pf-case-card::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: #E8A13C; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--lift-ease); }
.pf-case-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(27,42,68,.5); }
.pf-case-card:hover::before { transform: scaleX(1); }
.pf-case-number { opacity: 1 !important; color: transparent !important; -webkit-text-stroke: 2px rgba(232,161,60,.45); background: linear-gradient(180deg, rgba(232,161,60,.16), rgba(232,161,60,0)); -webkit-background-clip: text; background-clip: text; }
.pf-result { border-radius: 18px !important; transition: transform .35s var(--lift-ease); }
.pf-result:hover { transform: translateY(-4px); }
.pf-result-value { font-variant-numeric: tabular-nums; }
.pf-aside { position: relative; }
.pf-quote { border-radius: 22px; position: relative; z-index: 1; }
.lift-quote-rings { position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; z-index: 0; animation: lift-spin 50s linear infinite; pointer-events: none; }
.pf-calc { border-radius: 22px; }
.pf-offer { position: relative; overflow: hidden; }
.pf-offer .pf-inner { z-index: 1; }

/* ---------- Reveal on scroll ---------- */
.lift-reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--lift-ease), transform .9s var(--lift-ease); }
.lift-reveal.lift-in { opacity: 1; transform: none; }

@keyframes lift-draw { to { stroke-dashoffset: 0; } }
@keyframes lift-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes lift-fade { to { opacity: 1; } }
@keyframes lift-spin { to { transform: rotate(360deg); } }
@keyframes lift-grow { to { transform: scaleY(1); } }
@keyframes lift-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes lift-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes lift-drop { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
@keyframes lift-ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes lift-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,161,60,.5); } 50% { box-shadow: 0 0 0 12px rgba(232,161,60,0); } }
@keyframes lift-blip { 0%, 8% { opacity: 0; transform: scale(.4); } 14% { opacity: 1; transform: scale(1.2); } 40% { opacity: .7; transform: scale(1); } 70%, 100% { opacity: 0; } }

@media (max-width: 1100px) { .lift-orbit { position: relative; right: auto; top: auto; width: 260px; margin: 40px auto 0; } }
@media (max-width: 900px) {
  .lift-rings { width: 460px; height: 460px; right: -200px; top: -120px; }
  .lift-trend { height: 26%; } .lift-hero-art { --lift-trend-h: 26%; }
  .lift-steps-line { display: none; }
  .about-photo::before { right: -6%; }
  .lift-mark { width: 54px; height: 54px; right: 20px; top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .lift-rings, .card-point, .lift-sweep, .lift-blip, .lift-target, .lift-orbit-spin, .lift-orbit-sat, .lift-orbit-upright, .lift-orbit-glow, .lift-orbit-ping, [class*="a-"], .about-photo::before, .about-photo::after, .lift-req-rings, .lift-quote-rings { animation: none !important; }
  .lift-trend .line, .lift-orbit-link { animation: none; stroke-dashoffset: 0; }
  .lift-dot, .lift-trend .area, .lift-orbit-node { animation: none; opacity: 1; }
  .lift-stroke { stroke-dashoffset: 0; transition: none; }
  .lift-icon svg, .lift-badge svg { opacity: 1; transform: none; transition: none; }
  .lift-reveal { opacity: 1; transform: none; transition: none; }
  .lift-steps-line i { transform: none; transition: none; }
}

/* 2026-10-10 SEO rebuild: «Бесплатно для владельца», vacation test, answers pages, footer links.
   Same tokens, type and card language as the home page (symptom cards, dark request block). */

/* ---------- Free tools section ---------- */
.free-section { scroll-margin-top: 60px; }
.free-grid { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
.free-card { background: #fff; border-radius: 22px; display: flex; flex-direction: column; padding: 30px 28px 32px;
  box-shadow: 0 1px 0 rgba(27,42,68,.06), 0 18px 40px -28px rgba(27,42,68,.35); transition: transform .35s var(--lift-ease), box-shadow .35s; }
.free-card:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(27,42,68,.06), 0 28px 50px -26px rgba(27,42,68,.45); }
.free-card h3 { font-size: 1.25rem; line-height: 1.25; margin: 0 0 14px; min-height: 2.5em; }
.free-card p { color: var(--grafito); flex: 1; font-size: .94rem; margin: 0 0 24px; }
.free-cta { align-self: flex-start; color: var(--tinta); font-size: .92rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--ambar); text-underline-offset: 5px; }
.free-cta span { color: var(--ambar); padding-left: 6px; }
.free-card-test { background: var(--tinta); color: var(--papel); }
.free-card-test p { color: var(--niebla); }
.free-card-test .free-cta { color: var(--papel); }
.free-card-test .lift-icon { background: linear-gradient(145deg, #2A3D60, #1B2A44); color: var(--ambar); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px -14px rgba(0,0,0,.6); }

.free-panel { background: var(--tinta); border-radius: 24px; color: var(--papel); display: grid; gap: 6vw; grid-template-columns: .8fr 1.2fr;
  margin-top: 56px; overflow: hidden; padding: clamp(36px, 5vw, 72px); position: relative; scroll-margin-top: 90px; }
.free-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(201,210,222,.13) 1px, transparent 1.4px); background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(120deg, transparent 15%, #000 70%); mask-image: linear-gradient(120deg, transparent 15%, #000 70%); }
.free-panel > * { position: relative; }
.lift-free-rings { left: -200px; bottom: -260px; }
.free-panel-copy h3 { font-size: clamp(1.5rem, 2.1vw, 2.1rem); letter-spacing: -.03em; line-height: 1.15; margin-bottom: 30px; }
.free-steps { list-style: none; margin: 0 0 28px; padding: 0; counter-reset: free; }
.free-steps li { border-top: 1px solid rgba(201,210,222,.22); color: var(--papel); counter-increment: free; padding: 16px 0 16px 44px; position: relative; }
.free-steps li::before { color: var(--ambar); content: "0" counter(free); font-family: "IBM Plex Mono", monospace; font-size: .78rem; left: 0; position: absolute; top: 19px; }
.free-note { color: var(--niebla); font-size: .9rem; margin: 0; }
.free-form [hidden] { display: none !important; }
.request-form fieldset { border: 0; margin: 0 0 22px; min-width: 0; padding: 0; }
.request-form legend { font-size: .78rem; font-weight: 600; margin-bottom: 10px; padding: 0; }
.free-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.request-form .free-pill { display: inline-block; font-size: .85rem; font-weight: 500; margin: 0; position: relative; }
.request-form .free-pill input { height: 1px; margin: 0; opacity: 0; position: absolute; width: 1px; }
.free-pill span { border: 1px solid rgba(27,42,68,.22); border-radius: 999px; cursor: pointer; display: inline-block; padding: 9px 16px; transition: background .2s, color .2s, border-color .2s; }
.free-pill:hover span { border-color: var(--ambar); }
.free-pill input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.free-pill input:focus-visible + span { outline: 2px solid var(--ambar); outline-offset: 2px; }
.free-pills-sm .free-pill span { font-family: "IBM Plex Mono", monospace; font-size: .74rem; padding: 7px 14px; }
.request-form .field-error, .request-form .field-error span { color: #8a2d2d; }
.request-form .field-error input, .request-form .field-error select { border-color: #8a2d2d; }


/* ---------- Footer links ---------- */
.footer-links { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 28px; grid-column: 1 / -1; justify-content: center; margin-top: 24px; padding-top: 22px; }
.footer-links a { color: var(--grafito); text-decoration: none; }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--ambar); text-underline-offset: 4px; }
.footer-langs { display: inline-flex; gap: 12px; font-family: "IBM Plex Mono", monospace; font-size: .74rem; }

/* ---------- Inner pages: test + answers ---------- */
.tp-page { --tp-w: 980px; }
.tp-hero { background: var(--tinta); color: var(--papel); isolation: isolate; overflow: hidden; padding: clamp(72px, 9vw, 130px) 5vw clamp(64px, 7vw, 100px); position: relative; }
.tp-hero .tp-inner { position: relative; z-index: 1; }
.tp-hero h1 { max-width: 920px; }
.tp-hero h1 > span { color: var(--ambar); }
.tp-inner { margin: 0 auto; max-width: var(--tp-w); }
.tp-crumbs { color: var(--niebla); font-size: .82rem; margin: 0 0 18px; }
.tp-crumbs a { color: var(--niebla); text-decoration-color: rgba(201,210,222,.4); text-underline-offset: 4px; }
.tp-quiz { padding-top: clamp(56px, 6vw, 90px); }
.tp-q { background: #fff; border: 0; border-radius: 22px; box-shadow: 0 1px 0 rgba(27,42,68,.06), 0 18px 40px -30px rgba(27,42,68,.35); margin: 0 0 18px; min-width: 0; padding: 26px 28px 28px; transition: box-shadow .3s; }
.tp-q legend { float: left; font-family: "Manrope", Arial, sans-serif; font-size: 1.15rem; font-weight: 700; line-height: 1.35; padding: 0; width: 100%; }
.tp-q legend span { color: #C9801F; display: block; font-family: "IBM Plex Mono", monospace; font-size: .74rem; font-weight: 500; letter-spacing: .12em; margin-bottom: 8px; }
.tp-opts { clear: both; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; padding-top: 18px; }
.tp-opt { align-items: flex-start; border: 1px solid rgba(27,42,68,.16); border-radius: 14px; cursor: pointer; display: flex; font-size: .94rem; gap: 12px; line-height: 1.45; padding: 14px 16px; transition: border-color .2s, background .2s; }
.tp-opt:hover { border-color: rgba(232,161,60,.7); }
.tp-opt input { accent-color: var(--ambar); flex: none; margin: 3px 0 0; }
.tp-opt:has(input:checked) { background: #FCF4E6; border-color: var(--ambar); }
.tp-q.tp-missing { box-shadow: 0 0 0 2px rgba(138,45,45,.45), 0 18px 40px -30px rgba(27,42,68,.35); }
.tp-bar { align-items: center; background: rgba(246,245,241,.96); border-radius: 999px; bottom: 16px; box-shadow: 0 18px 40px -24px rgba(27,42,68,.45), 0 0 0 1px rgba(27,42,68,.08);
  display: flex; flex-wrap: wrap; gap: 12px 18px; justify-content: space-between; margin-top: 28px; padding: 10px 10px 10px 24px; position: sticky; z-index: 5; }
.tp-bar p { color: var(--grafito); font-family: "IBM Plex Mono", monospace; font-size: .78rem; margin: 0; }
.tp-hint { color: #8a2d2d !important; font-family: "Inter", Arial, sans-serif !important; font-size: .86rem !important; }
.tp-how { color: var(--grafito); font-size: .88rem; margin: 22px 0 0; }
.tp-result { padding-top: 0; scroll-margin-top: 90px; }
.tp-result-card { background: var(--tinta); border-radius: 24px; color: var(--papel); display: grid; gap: 5vw; grid-template-columns: 1fr 1fr; overflow: hidden; padding: clamp(32px, 5vw, 64px); position: relative; }
.tp-result-card::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(201,210,222,.13) 1px, transparent 1.4px); background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(120deg, transparent 15%, #000 70%); mask-image: linear-gradient(120deg, transparent 15%, #000 70%); }
.tp-result-card > * { position: relative; }
.tp-score { color: var(--ambar); font-family: "IBM Plex Mono", monospace; font-size: .8rem; letter-spacing: .1em; margin-bottom: 12px; }
.tp-result h2 { font-size: clamp(1.7rem, 2.4vw, 2.4rem); letter-spacing: -.035em; line-height: 1.1; margin-bottom: 18px; }
.tp-result-text { color: var(--niebla); font-size: 1.02rem; }
.tp-meter { background: rgba(201,210,222,.18); border-radius: 99px; height: 8px; margin: 26px 0; overflow: hidden; }
.tp-meter i { background: linear-gradient(90deg, #E8A13C, #f0c27f); border-radius: 99px; display: block; height: 100%; transition: width 1.2s var(--lift-ease); width: 0; }
.tp-hours { font-family: "Manrope", Arial, sans-serif; font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin: 0 0 6px; }
.tp-hours-note { color: var(--niebla); font-size: .84rem; margin: 0 0 22px; }
.tp-weak p { font-size: .78rem; font-weight: 600; letter-spacing: .08em; margin: 0 0 8px; text-transform: uppercase; color: var(--niebla); }
.tp-weak ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 22px; padding: 0; }
.tp-weak li { border: 1px solid rgba(232,161,60,.55); border-radius: 999px; font-size: .84rem; padding: 6px 14px; }
.tp-retake { background: none; border: 0; color: var(--papel); cursor: pointer; font-size: .9rem; padding: 0; text-decoration: underline; text-decoration-color: rgba(246,245,241,.4); text-underline-offset: 5px; }
.tp-request h3 { font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 10px; }
.tp-request > p { color: var(--grafito); font-size: .92rem; margin: 0 0 22px; }

.ans-wrap { margin: 0 auto; max-width: 820px; }
.ans-body { font-size: 1.06rem; line-height: 1.75; }
.ans-body h2 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); letter-spacing: -.025em; line-height: 1.2; margin: 1.8em 0 .6em; }
.ans-body h3 { font-size: 1.15rem; margin: 1.5em 0 .5em; }
.ans-body p, .ans-body li { color: #2b3a55; }
.ans-body ul, .ans-body ol { padding-left: 1.2em; }
.ans-body li::marker { color: var(--ambar); }
.ans-body a { color: var(--tinta); text-decoration-color: var(--ambar); text-underline-offset: 4px; }
.ans-body strong { color: var(--tinta); }
.ans-faq { margin-top: 64px; }
.ans-faq > h2 { font-size: clamp(1.5rem, 2.1vw, 2rem); letter-spacing: -.03em; margin-bottom: 24px; }
.ans-faq article { background: #fff; border-radius: 18px; box-shadow: 0 16px 36px -30px rgba(27,42,68,.4); margin-bottom: 14px; padding: 24px 26px; }
.ans-faq h3 { font-size: 1.08rem; line-height: 1.35; margin: 0 0 10px; }
.ans-faq p { color: var(--grafito); margin: 0; }
.ans-cta { align-items: center; background: var(--tinta); border-radius: 22px; color: var(--papel); display: flex; flex-wrap: wrap; gap: 18px 32px; justify-content: space-between; margin-top: 56px; padding: 32px 36px; }
.ans-cta h2 { font-size: 1.35rem; margin: 0; }
.ans-cta div { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.ans-list { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
.ans-card { background: #fff; border-radius: 22px; box-shadow: 0 1px 0 rgba(27,42,68,.06), 0 18px 40px -28px rgba(27,42,68,.35); color: var(--tinta); display: flex; flex-direction: column; padding: 28px; text-decoration: none; transition: transform .35s var(--lift-ease); }
.ans-card:hover { transform: translateY(-5px); }
.ans-card h2 { font-size: 1.2rem; line-height: 1.3; margin: 0 0 10px; }
.ans-card p { color: var(--grafito); flex: 1; font-size: .94rem; margin: 0 0 18px; }
.ans-card span { color: var(--tinta); font-size: .9rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--ambar); text-underline-offset: 5px; }

/* ---------- 404 ---------- */
.nf { display: grid; min-height: 100vh; place-items: center; padding: 40px 6vw; text-align: center; }
.nf h1 { margin: 24px auto; }
.nf p { color: var(--grafito); }
.nf nav { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: center; margin-top: 28px; }
.nf nav a { color: var(--tinta); text-decoration-color: var(--ambar); text-underline-offset: 5px; }

@media (max-width: 1050px) {
  .free-grid { grid-template-columns: 1fr 1fr; }
  .free-panel, .tp-result-card { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .free-grid, .tp-opts, .ans-list { grid-template-columns: 1fr; }
  .free-card h3 { min-height: 0; }
  .free-panel { border-radius: 20px; margin-left: -2vw; margin-right: -2vw; padding: 34px 22px; }
  .tp-q { padding: 22px 20px 22px; }
  .tp-bar { border-radius: 20px; padding: 14px 14px 14px 18px; position: static; }
  .tp-bar .button { width: 100%; }
  .footer-links { justify-content: flex-start; }
  .ans-cta { padding: 28px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .free-card, .ans-card, .tp-meter i { transition: none; }
}

.free-cta span { display: inline-block; text-decoration: none; }

/* 2026-10-10 Katya's edits: demo disclaimer + about role line */
.free-disclaimer { border-left: 3px solid var(--ambar); color: var(--tinta) !important; font-weight: 600; font-size: 1rem !important; line-height: 1.55; margin: 0 0 14px; padding-left: 14px; }
.about-role { color: #B8741E !important; font-family: "Manrope", Arial, sans-serif; font-size: 1.02rem !important; font-weight: 700; letter-spacing: -.01em; margin: -6px 0 18px; }

/* 2026-10-10: hero without the side card — copy spans the grid, art (rings + trend) fills the right side */
.hero-grid { grid-template-columns: minmax(0, 1fr); }
.hero-copy { max-width: 980px; }
.hero h1, .hero .hero-lead { max-width: 900px; }

/* 2026-10-10 (Katya): on phones the gaps between blocks were too big; desktop unchanged. */
@media (max-width: 700px) {
  .section, .request-section { padding-top: 56px; padding-bottom: 56px; }
  .hero { padding-bottom: 56px; }
  .section-heading { margin-bottom: 32px; }
  .hero-actions, .deliverable-panel ul { margin-top: 28px; }
  .lift-radar, .free-panel { margin-top: 32px; }
  .deliverable-panel { padding-top: 28px; padding-bottom: 28px; }
  .fit-column { padding-top: 40px; padding-bottom: 40px; }
  .fit-column h2, .about-section h2 { margin-bottom: 28px; }
  .pf-cover, .tp-hero { padding-top: 56px; padding-bottom: 48px; }
  .tp-quiz { padding-top: 40px; }
}

/* 2026-10-10 (Katya): «Демо» pill in the header, on every screen size. */
.header-demo { border: 1px solid var(--ambar); border-radius: 999px; color: var(--tinta); font-size: 0.84rem; font-weight: 600;
  line-height: 1; padding: 7px 14px; text-decoration: none; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.header-demo:hover, .header-demo:focus-visible { background: var(--ambar); color: var(--tinta); }
@media (max-width: 700px) { .header-demo { font-size: 0.78rem; padding: 6px 11px; } }
@media (min-width: 701px) {
  .site-header { grid-template-columns: auto 1fr auto; column-gap: 24px; }
  .site-header nav { gap: clamp(16px, 2.1vw, 34px); justify-self: center; }
  .site-header nav a, .header-cta { white-space: nowrap; }
  .header-tools { gap: clamp(12px, 1.4vw, 24px); }
}

/* 2026-10-12 Privacy Policy: small neutral link at the very bottom of the footer + page details. */
footer .footer-legal { grid-column: 1 / -1; margin: 14px 0 0; font-size: 0.74rem; text-align: center; }
@media (max-width: 700px) { footer .footer-legal { text-align: left; } }
.footer-legal a { color: inherit; opacity: 0.62; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.footer-legal a:hover, .footer-legal a:focus-visible { opacity: 1; }
.privacy-updated { font-size: 0.85rem; opacity: 0.7; }
.privacy-body code { font-size: 0.85em; overflow-wrap: anywhere; }
.privacy-body a { overflow-wrap: anywhere; }

/* 2026-10-15 marketing canon additions (hero line, notes, 5 symptoms, 3 steps, alternatives, result) */
.hero-line { font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 600; color: var(--ambar); margin: 14px 0 22px; line-height: 1.25; }
.hero-for { font-size: 0.98rem; opacity: 0.78; margin: 10px 0 0; max-width: 640px; }
.canon-note { display: block; font-size: 0.84rem !important; opacity: 0.72; font-style: italic; margin-top: 12px !important; }
.symptom-grid.symptom-grid-5 { grid-template-columns: repeat(5, 1fr); }
.symptom-grid-5 .symptom-card { grid-template-rows: 46px 112px auto 1fr; padding: 30px 22px; }
.steps.steps-3 { grid-template-columns: repeat(3, 1fr); }
.alt-section { padding-top: 0; }
.alt-section .alt-text { font-size: 1.12rem; line-height: 1.6; max-width: 880px; margin: 10px 0 0; }
.alt-section .alt-text strong { color: var(--ambar); font-weight: 600; }
.result-section { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.result-section h2 { font-size: clamp(1.8rem, 2.5vw, 2.55rem); letter-spacing: -0.035em; line-height: 1.1; margin: 6px 0 24px; }
.result-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.result-list li { padding-left: 26px; position: relative; font-size: 1.02rem; }
.result-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; border-radius: 50%; background: var(--ambar); }
.result-stakes { margin: 22px 0 0; font-weight: 600; }
.result-proof { border: 1px solid var(--line); padding: 26px; }
.result-proof p { margin: 8px 0 14px; }
@media (max-width: 1250px) {
  .symptom-grid.symptom-grid-5 { grid-template-columns: 1fr 1fr; }
  .symptom-grid-5 .symptom-card { border-bottom: 1px solid var(--line); }
  .symptom-grid-5 .symptom-card:nth-child(2n) { border-right: 0; }
  .symptom-grid-5 .symptom-card:nth-child(5) { grid-column: 1 / -1; border-right: 0; }
  .result-section { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 700px) {
  .symptom-grid.symptom-grid-5, .steps.steps-3 { grid-template-columns: 1fr; }
  .symptom-grid-5 .symptom-card { grid-template-rows: auto auto auto auto; }
}
/* 2026-10-15 (Katya): every block fits one browser screen; the symptoms block was ~980px tall on a laptop */
@media (min-width: 1051px) {
  .symptoms-compact { padding-top: 52px; padding-bottom: 52px; }
  .symptoms-compact .section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: end; max-width: none; margin-bottom: 26px; }
  .symptoms-compact .section-heading .eyebrow { grid-column: 1; grid-row: 1; }
  .symptoms-compact .section-heading h2 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .symptoms-compact .section-heading > p:last-child { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 1rem; }
  .symptoms-compact .symptom-card { min-height: 0; padding: 20px 18px; grid-template-rows: auto auto auto 1fr; }
  .symptoms-compact .lift-icon { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 12px; }
  .symptoms-compact .lift-icon svg { width: 22px; height: 22px; }
  .symptoms-compact .symptom-card h3 { font-size: 1.08rem; padding-bottom: 8px; }
  .symptoms-compact .symptom-card p { font-size: 0.88rem; }
  .symptoms-compact .canon-note { font-size: 0.8rem !important; margin-top: 8px !important; }
}
/* 2026-10-15 (Katya): every block fits one laptop screen (~700px under the sticky header at 1440x780) */
@media (min-width: 1051px) {
  .canon .section { padding-top: 72px; padding-bottom: 72px; }
  .canon .section-heading { margin-bottom: 34px; }
  .canon .deliverable-panel { padding: 32px 36px; }
  .canon .deliverable-panel ul { margin-top: 22px; }
  .canon .deliverable-panel li { padding-top: 12px; padding-bottom: 12px; }
  .canon .services-list article { padding: 22px 0; }
  .canon .free-section .section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 56px; align-items: end; max-width: none; }
  .canon .free-section .section-heading > .eyebrow { grid-column: 1; grid-row: 1; }
  .canon .free-section .section-heading > h2 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .canon .free-section .section-heading > :not(.eyebrow):not(h2) { grid-column: 2; margin-bottom: 0; }
  .canon .free-card { padding: 24px 22px 24px; }
  .canon .free-card .lift-icon { width: 44px; height: 44px; border-radius: 14px; margin-bottom: 14px; }
  .canon .free-card .lift-icon svg { width: 22px; height: 22px; }
  .canon .free-card h3 { font-size: 1.12rem; margin-bottom: 10px; }
  .canon .free-card p { font-size: 0.9rem; margin-bottom: 16px; }
  .canon .free-panel { margin-top: 72px; padding: 40px 52px; gap: 4vw; }
  .canon .free-panel-copy h3 { margin-bottom: 18px; }
  .canon .free-steps li { padding-top: 11px; padding-bottom: 11px; }
  .canon .request-form { padding: 32px 40px; }
  .canon .request-form label { margin-bottom: 14px; }
  .canon .request-form input, .canon .request-form select { padding-top: 8px; padding-bottom: 8px; margin-top: 4px; }
  .canon .request-form textarea { min-height: 0; height: 84px; }
  .canon .fit-column { min-height: 0; padding-top: 56px; padding-bottom: 56px; }
  .canon .fit-column h2 { margin-bottom: 26px; }
  .canon .fit-column li { padding-top: 11px; padding-bottom: 11px; }
  .canon .request-section { padding-top: 64px; padding-bottom: 64px; }
  .canon .symptoms-compact { padding-top: 52px; padding-bottom: 52px; }
}

/* 2026-10-10 Clara chat widget — visual language of the Lucía demo, LACIFRA tokens, all classes prefixed cl-. */
.cl-launch { position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 40; width: 60px; height: 60px; padding: 0;
  border: 3px solid var(--ambar); border-radius: 50%; background: var(--tinta); cursor: pointer; box-shadow: 0 12px 30px rgba(27,42,68,.35);
  transition: opacity .25s ease, transform .25s ease; }
.cl-launch img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cl-launch i { position: absolute; right: 0; bottom: 2px; width: 13px; height: 13px; border-radius: 50%; background: #3fbf7f; border: 2px solid #fff; }
.cl-launch::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(232,161,60,.55); pointer-events: none; animation: cl-pulse 9s 1.2s infinite; }
.cl-launch:hover, .cl-launch:focus-visible { transform: translateY(-2px); outline: none; box-shadow: 0 0 0 3px var(--papel), 0 0 0 5px var(--ambar), 0 12px 30px rgba(27,42,68,.35); }
.cl-launch.cl-dodge { opacity: 0; pointer-events: none; transform: translateY(12px); }
.cl-open .cl-launch.cl-dodge { opacity: 1; pointer-events: auto; transform: none; }
/* soft amber pulse around the avatar: three pulses, then a pause (one 9 s cycle) */
@keyframes cl-pulse { 0% { box-shadow: 0 0 0 0 rgba(232,161,60,.5); } 11% { box-shadow: 0 0 0 12px rgba(232,161,60,0); }
  12% { box-shadow: 0 0 0 0 rgba(232,161,60,.5); } 23% { box-shadow: 0 0 0 12px rgba(232,161,60,0); }
  24% { box-shadow: 0 0 0 0 rgba(232,161,60,.5); } 35%, 100% { box-shadow: 0 0 0 12px rgba(232,161,60,0); } }
/* a light sheen that sweeps across the bubble every ~7 s */
.cl-hello { overflow: hidden; }
.cl-hello::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(232,161,60,.18) 45%, rgba(255,255,255,.55) 50%, rgba(232,161,60,.18) 55%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg); animation: cl-sheen 7s 2s infinite; }
@keyframes cl-sheen { 0%, 78% { left: -60%; } 100% { left: 130%; } }

/* page arrows sit above Clara */
.has-clara .page-arrows { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); right: 30px; }

.cl-hello { position: fixed; right: 94px; bottom: calc(36px + env(safe-area-inset-bottom, 0px)); z-index: 40; background: #fff; color: var(--tinta);
  border: 1px solid var(--line); border-radius: 14px 14px 4px 14px; box-shadow: 0 10px 26px rgba(27,42,68,.2); cursor: pointer;
  font: 600 14px/1.2 "Inter", Arial, sans-serif; padding: 10px 14px; white-space: nowrap;
  transition: opacity .25s ease, transform .25s ease; }
.cl-hello:hover, .cl-hello:focus-visible { border-color: var(--ambar); outline: none; }
.cl-hello { opacity: 0; pointer-events: none; transform: translateX(10px) scale(.96); transform-origin: right center; }
.cl-hello.cl-show { opacity: 1; pointer-events: auto; transform: none; }
.cl-hello.cl-dodge, .cl-open .cl-hello { opacity: 0 !important; pointer-events: none !important; transform: translateY(8px) !important; }
.cl-widget { position: fixed; right: 24px; bottom: calc(98px + env(safe-area-inset-bottom, 0px)); z-index: 45; width: min(390px, calc(100vw - 32px));
  height: min(600px, calc(100vh - 140px)); display: flex; flex-direction: column; overflow: hidden; background: var(--papel); color: var(--tinta);
  border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 24px 60px rgba(27,42,68,.35); animation: cl-in .3s ease-out; font-family: "Inter", Arial, sans-serif; }
.cl-widget[hidden] { display: none; }
.cl-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; background: var(--tinta); color: var(--papel); }
.cl-head img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--ambar); }
.cl-head b { display: block; font-family: "Manrope", Arial, sans-serif; font-size: 15px; }
.cl-head small { color: var(--niebla); font-size: 12.5px; }
.cl-x { margin-left: auto; background: none; border: 0; color: var(--niebla); font-size: 26px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 8px; }
.cl-x:hover, .cl-x:focus-visible { color: var(--papel); outline: 2px solid var(--ambar); }
.cl-msgs { flex: 1; min-height: 0; position: relative; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 9px; overscroll-behavior: contain; }
.cl-b { max-width: 90%; padding: 10px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; animation: cl-in .3s ease-out; overflow-wrap: anywhere; }
.cl-bot, .cl-sys { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.cl-me { align-self: flex-end; background: var(--tinta); color: var(--papel); border-bottom-right-radius: 4px; }
.cl-pending { color: var(--grafito); }
.cl-links { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.cl-links a { color: var(--tinta); font-weight: 600; font-size: 13.5px; text-decoration: underline; text-decoration-color: var(--ambar); text-underline-offset: 4px; }
.cl-links a span { color: var(--ambar); }
.cl-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-top: 8px; font-size: 13.5px; }
.cl-kv span:nth-child(odd) { color: var(--grafito); }
.cl-consent { display: block; margin-top: 10px; color: var(--grafito); font-size: 12px; line-height: 1.4; }
.cl-typing { align-self: flex-start; display: flex; gap: 4px; padding: 11px 13px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.cl-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--grafito); animation: cl-blink 1s infinite; }
.cl-typing i:nth-child(2) { animation-delay: .15s; } .cl-typing i:nth-child(3) { animation-delay: .3s; }
.cl-qr { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 0 4px; flex: none; }
.cl-qr:empty { display: none; }
.cl-qr button { background: #fff; border: 1px solid var(--tinta); border-radius: 999px; color: var(--tinta); cursor: pointer; font: inherit; font-size: 13px; padding: 7px 12px; text-align: left; }
.cl-qr button:hover, .cl-qr button:focus-visible { background: var(--ambar); border-color: var(--ambar); outline: none; }
.cl-inp { display: flex; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid var(--line); margin: 0; }
.cl-inp input { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 999px; color: var(--tinta); font: inherit; font-size: 14px; padding: 10px 14px; }
.cl-inp input:focus { border-color: var(--ambar); outline: none; }
.cl-inp input:disabled { background: transparent; }
.cl-inp button { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--ambar); color: var(--tinta); cursor: pointer; display: grid; place-items: center; }
.cl-inp button:disabled { opacity: .35; cursor: default; }
.cl-inp svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes cl-blink { 50% { opacity: .25; } }
@keyframes cl-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 760px) {
  .cl-launch { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 54px; height: 54px; }
  .cl-hello { right: 78px; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); font-size: 12.5px; padding: 7px 11px; border-radius: 12px 12px 4px 12px; }
  .has-clara .page-arrows { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); right: 21px; }
  .cl-widget { left: 10px; right: 10px; width: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); height: calc(100dvh - 20px - env(safe-area-inset-bottom, 0px)); max-height: 680px; }
  .cl-open .cl-launch, .cl-open .page-arrows { display: none; }
  .cl-inp input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-launch, .cl-launch::before, .cl-hello, .cl-hello::after, .cl-widget, .cl-b, .cl-typing i { animation: none !important; transition: none !important; }
}

/* test page: the sticky result bar sits at the bottom on desktop — Clara floats above it instead of hiding */
@media (min-width: 761px) {
  .has-clara.has-tp-bar .cl-launch { bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
  .has-clara.has-tp-bar .cl-hello { bottom: calc(116px + env(safe-area-inset-bottom, 0px)); }
  .has-clara.has-tp-bar .cl-widget { bottom: calc(178px + env(safe-area-inset-bottom, 0px)); height: min(560px, calc(100vh - 210px)); }
  .has-clara.has-tp-bar .page-arrows { bottom: calc(180px + env(safe-area-inset-bottom, 0px)); }
}