/* ============================================================
   SERVICIOS — landings principales + bloque de formulario
   Depende de los tokens definidos en main.css (:root).
   ============================================================ */

/* ---- Hero de landing: texto más ancho; subtítulo a la anchura del título ---- */
.hero--wide .hero__text { max-width: min(62%, 940px); }
.hero--wide .hero__sub  { max-width: 100%; }
.hero--wide .hero__eye  { color: #fff; }
@media (max-width: 900px) { .hero--wide .hero__text { max-width: 100%; } }

/* ============================================================
   "Para quién trabajamos" (.aud) — tarjetas dark + icono blanco
   Tarjetas oscuras sobre sección clara = golpe diferencial.
   ============================================================ */
.aud { padding: 120px 40px; background: var(--cream); }
.aud__i { max-width: 1440px; margin: 0 auto; }
.aud__head { margin-bottom: 48px; }
.aud__t { font-family: var(--serif); font-weight: 500; font-size: 48px; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); }
.aud__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.aud__card { background: var(--dark); color: #fff; border-radius: 6px; padding: 36px 28px; transition: transform .3s var(--ease), box-shadow .3s; }
.aud__card:hover { transform: translateY(-5px); box-shadow: 0 26px 54px rgba(15,15,15,.30); }
.aud__ico { color: #fff; margin-bottom: 22px; line-height: 0; }
.aud__ico svg { width: 30px; height: 30px; }
.aud__ct { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.2; color: #fff; margin-bottom: 10px; }
.aud__cd { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.62); margin: 0; }
@media (max-width: 980px) { .aud__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .aud { padding: 72px 22px; } .aud__t { font-size: 30px; } .aud__grid { grid-template-columns: 1fr; } }

/* ============================================================
   Formulario (.cform) — naranja, texto izq / formulario der (estilo home)
   Labels visibles (etiqueta encima + input con caja).
   ============================================================ */
.cform { padding: 110px 40px; background: var(--orange); color: #fff; }
.cform__i { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }

.cform__aside { color: #fff; }
.cform__eyebrow { display: inline-block; font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: 16px; }
.cform__t { font-family: var(--serif); font-weight: 500; font-size: 44px; line-height: 1.08; letter-spacing: -.02em; color: #fff; margin-bottom: 16px; }
.cform__s { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.9); margin-bottom: 26px; }
.cform__points { list-style: none; display: grid; gap: 12px; margin: 0 0 26px; padding: 0; }
.cform__points li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.5; color: #fff; }
.cform__points li::before { content: ''; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; background: #fff; border-radius: 50%; }
.cform__contact { font-size: 14px; color: rgba(255,255,255,.9); }
.cform__contact a { color: #fff; font-weight: 600; }
.cform__contact a:hover { text-decoration: underline; }

.cform__card { background: var(--white); border-radius: 6px; padding: 40px; box-shadow: 0 30px 70px rgba(0,0,0,.22); color: var(--ink); }
.cform__form { display: flex; flex-direction: column; gap: 18px; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cform__field { display: flex; flex-direction: column; gap: 7px; }
.cform__label { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.cform__input { width: 100%; background: var(--cream); border: 1px solid rgba(0,0,0,.14); border-radius: 4px; padding: 12px 14px; font-family: var(--sans); font-size: 15px; color: var(--ink); transition: border-color .2s, background .2s; }
.cform__input::placeholder { color: var(--text-2); opacity: .55; }
.cform__textarea { resize: vertical; min-height: 96px; }
.cform__input:focus { outline: none; border-color: var(--orange); background: #fff; }
.cform__input.err { border-color: #e2574c; }
.cform__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: var(--text); cursor: pointer; }
.cform__consent input { margin-top: 2px; width: 15px; height: 15px; flex: 0 0 auto; accent-color: var(--orange); }
.cform__consent a { color: var(--orange); text-decoration: underline; }
.cform__consent.err { color: #e2574c; }
.cform__submit { align-self: flex-start; padding: 14px 26px; margin-top: 4px; }
.cform__note { font-size: 12px; color: var(--text-2); }
.cform__ok { font-size: 15px; color: var(--orange); line-height: 1.55; }

@media (max-width: 880px) {
  .cform { padding: 72px 22px; }
  .cform__i { grid-template-columns: 1fr; gap: 36px; }
  .cform__card { padding: 28px; }
  .cform__row { grid-template-columns: 1fr; }
  .cform__t { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { .cform__input, .aud__card { transition: none; } }

/* ============================================================
   Coherencia de titulos de seccion (H2) en tablet/movil.
   Unifica el tamano de TODOS los titulos de seccion para que no
   convivan tamanos dispares en pantallas pequenas (qué resolvemos,
   para quién, únicos, reto, cómo trabajamos, FAQs, formulario).
   Va al final (servicios.css carga despues de main.css) para ganar
   a las reglas previas de ambos archivos, que usaban breakpoints
   y tamanos distintos.
   ============================================================ */
@media (max-width: 1180px) {
  .svcs__title, .aud__t, .nicho__ht, .about__title, .faqs__t, .cform__t, .fcta__t, .map__t { font-size: 38px; }
}
@media (max-width: 560px) {
  .svcs__title, .aud__t, .nicho__ht, .about__title, .faqs__t, .cform__t, .fcta__t, .map__t { font-size: 34px; }
}

/* ============================================================
   Tipografia de titulos: solo el H1 (hero) lleva las palabras
   destacadas en italica. En TODOS los H2 de seccion la <em>
   mantiene el color naranja pero en redonda (sin italica).
   Va al final para ganar a las reglas por-componente de main.css.
   ============================================================ */
.svcs__title em, .aud__t em, .nicho__ht em, .about__title em,
.faqs__t em, .cform__t em, .fcta__t em, .map__t em,
.blog__t em, .press__t em, .tl__h2 em, .cform__title em,
.ss-reto__t em, .ss-help__t em, .ss-flow__t em, .ss-creds__t em {
  color: var(--orange);
  font-style: normal;
}

/* ============================================================
   SUBSERVICIO (.ss-*) — plantilla de páginas hijas de servicio.
   Lenguaje visual propio (distinto al de la landing PADRE). Todos
   los módulos comparten ancho de 1200px para que queden armónicos;
   excepción deliberada: .ss-help es un split a media pantalla con la
   foto a sangre, y .fcta conserva su ancho propio de cierre.
   CURSIVA: solo el H1 del hero; ningún otro título va en itálica.
   ============================================================ */

/* ---- Hero OSCURO: texto izq + imagen a la derecha ---- */
.ss-hero { background: var(--dark); color: #fff; position: relative; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.08); }
.ss-hero::before {
  content: ''; position: absolute; top: -180px; right: -10%; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(232,120,32,.30) 0%, transparent 66%); pointer-events: none;
}
.ss-hero__inner {
  position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: 112px 40px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center;
}
.ss-hero__bc {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 28px;
  font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.6); transition: color .2s;
}
.ss-hero__bc:hover { color: var(--orange); }
.ss-hero__bc svg { transform: rotate(180deg); width: 14px; height: 14px; }
.ss-hero__h1 {
  font-family: var(--serif); font-size: 64px; font-weight: 500; line-height: 1;
  letter-spacing: -.03em; color: #fff; 
  margin-bottom: 26px; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,.25);
}
.ss-hero__h1 em { font-style: italic; color: var(--orange); } /* ÚNICO título en cursiva */
.ss-hero__sub { font-size: 18px; line-height: 1.62; color: rgba(255,255,255,.82); max-width: 540px; margin-bottom: 38px; }
.ss-hero__ctas { display: flex; gap: 34px; align-items: center; flex-wrap: wrap; }
.ss-hero__ctas .btn-g { color: #fff; border-color: rgba(255,255,255,.6); }
.ss-hero__ctas .btn-g:hover { color: var(--orange); border-color: var(--orange); }
.ss-hero__media { position: relative; }
.ss-hero__media img {
  width: 100%; height: 600px; object-fit: cover; display: block; border-radius: 4px;
  box-shadow: 0 40px 80px rgba(0,0,0,.45); filter: grayscale(.1) contrast(1.04);
}

/* ---- KPIs: banda NARANJA que corta. Todas las cifras IGUALES. ---- */
.ss-kpi { background: var(--orange); color: #fff; padding: 52px 40px; }
.ss-kpi__i { max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 0; }
.ss-kpi__item { flex: 1 1 190px; padding: 6px 40px; border-left: 1px solid rgba(255,255,255,.30); }
.ss-kpi__item:first-child { padding-left: 0; border-left: 0; }
.ss-kpi__n { font-family: var(--serif); font-weight: 500; font-size: 58px; line-height: .9; color: #fff; letter-spacing: -.02em; }
.ss-kpi__n .sf { font-size: .42em; font-weight: 400; margin-left: 3px; }
.ss-kpi__l { font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.92); margin-top: 14px; line-height: 1.45; }

/* ---- Reto: DOS columnas (título izq / cuerpo der) ---- */
.ss-reto { padding: 100px 40px; background: var(--white); border-top: 1px solid var(--line); }
.ss-reto__i { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; }
.ss-reto__t { font-family: var(--serif); font-size: 44px; font-weight: 500; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); margin: 12px 0 0; text-wrap: pretty; }
.ss-reto__p { font-size: 18px; line-height: 1.74; color: var(--text); margin-bottom: 22px; }
.ss-reto__p:last-child { margin-bottom: 0; }
.ss-reto__p em { color: var(--orange); font-style: italic; }
.ss-reto__p strong { color: var(--ink); font-weight: 600; }
.ss-reto__ul { list-style: none; display: grid; gap: 16px; margin: 30px 0 0; padding: 30px 0 0; border-top: 1px solid var(--line); }
.ss-reto__li { display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: var(--text); }
.ss-reto__li svg { flex-shrink: 0; margin-top: 2px; }

/* ---- "Cómo te ayudamos": split 50/50, foto a sangre + contenido ---- */
.ss-help { padding: 0; background: var(--cream); border-top: 1px solid var(--line); }
.ss-help__i { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 620px; }
.ss-help__media { position: relative; overflow: hidden; background: var(--dark); }
.ss-help__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-help__content { padding: 88px clamp(40px, 5vw, 80px); display: flex; flex-direction: column; justify-content: center; }
.ss-help__head { margin-bottom: 30px; }
.ss-help__t { font-family: var(--serif); font-size: 42px; font-weight: 500; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); }
.ss-help__boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ss-help__box { background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: 24px 22px; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.ss-help__box:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,.08); border-color: var(--orange); }
.ss-help__btag { display: block; font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; }
.ss-help__bt { font-family: var(--serif); font-size: 19px; font-weight: 400; color: var(--ink); letter-spacing: -.01em; line-height: 1.2; margin-bottom: 8px; }
.ss-help__bd { font-size: 13.5px; line-height: 1.6; color: var(--text-2); }

/* ---- "Cómo trabajamos": infografía HORIZONTAL (círculos conectados) ---- */
.ss-flow { padding: 104px 40px; background: var(--dark); color: #fff; border-top: 1px solid rgba(255,255,255,.08); }
.ss-flow__i { max-width: 1400px; margin: 0 auto; }
.ss-flow__head { text-align: center; margin-bottom: 64px; }
.ss-flow__head .eyebrow { color: var(--orange); margin-bottom: 14px; display: inline-block; }
.ss-flow__t { font-family: var(--serif); font-size: 46px; font-weight: 500; line-height: 1.05; letter-spacing: -.02em; color: #fff; }
.ss-flow__steps { display: flex; align-items: flex-start; }
.ss-flow__step { flex: 1; text-align: center; padding: 0 20px; position: relative; }
.ss-flow__step:not(:last-child)::after {
  content: ''; position: absolute; top: 32px; left: calc(50% + 42px); right: calc(-50% + 42px);
  height: 2px; background: linear-gradient(90deg, var(--orange), rgba(232,120,32,.35));
}
.ss-flow__dot {
  position: relative; z-index: 1; width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 24px;
  background: var(--dark); border: 2px solid var(--orange); display: grid; place-items: center;
  font-family: var(--serif); font-size: 26px; color: var(--orange); 
}
.ss-flow__st { font-family: var(--serif); font-size: 22px; font-weight: 400; color: #fff; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 10px; }
.ss-flow__sd { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.62); max-width: 260px; margin: 0 auto; }
.ss-flow__cta { text-align: center; margin-top: 64px; }

/* ---- Credenciales ("por qué nosotros"): franja clara con icono ---- */
.ss-creds { padding: 96px 40px; background: var(--cream); border-top: 1px solid var(--line); }
.ss-creds__i { max-width: 1400px; margin: 0 auto; }
.ss-creds__head { text-align: center; margin-bottom: 54px; }
.ss-creds__t { font-family: var(--serif); font-size: 44px; font-weight: 500; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); }
.ss-creds__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.ss-cred { padding-top: 26px; border-top: 2px solid var(--orange); }
.ss-cred__ico { color: var(--orange); margin-bottom: 20px; line-height: 0; }
.ss-cred__ico svg { width: 34px; height: 34px; }
.ss-cred__t { font-family: var(--serif); font-size: 23px; font-weight: 400; color: var(--ink); letter-spacing: -.01em; line-height: 1.2; margin-bottom: 12px; }
.ss-cred__d { font-size: 15px; line-height: 1.65; color: var(--text-2); margin: 0; }

/* ---- FAQs a ancho completo (mismo ancho 1200, sin foto lateral) ---- */
.faqs--full .faqs__i { grid-template-columns: 1fr; max-width: 1400px; gap: 0; }
.faqs--full .faqs__photo { display: none; }

/* ---- Responsive subservicio ---- */
@media (max-width: 1080px) {
  .ss-hero__inner { grid-template-columns: 1fr; gap: 44px; }
  .ss-hero__media { max-width: 520px; }
  .ss-hero__media img { height: 380px; }
  .ss-hero__h1 { font-size: 52px; }
  .ss-reto__i { grid-template-columns: 1fr; gap: 28px; }
  .ss-help__i { grid-template-columns: 1fr; min-height: 0; }
  .ss-help__media { aspect-ratio: 16/10; }
  .ss-help__content { padding: 64px 24px; }
  .ss-creds__grid { grid-template-columns: 1fr; gap: 32px; }
  .ss-flow__steps { flex-direction: column; gap: 36px; }
  .ss-flow__step { padding: 0; max-width: 460px; margin: 0 auto; }
  .ss-flow__step:not(:last-child)::after { display: none; }
}
@media (max-width: 760px) {
  .ss-hero__inner { padding: 88px 22px 64px; }
  .ss-hero__media img { height: 300px; }
  .ss-hero__h1 { font-size: 40px; }
  .ss-kpi { padding: 40px 22px; }
  .ss-kpi__item { flex-basis: 45%; padding: 6px 0; border-left: 0; margin-bottom: 22px; }
  .ss-kpi__n { font-size: 44px; }
  .ss-reto, .ss-flow, .ss-creds { padding: 72px 22px; }
  .ss-reto__t, .ss-help__t, .ss-flow__t, .ss-creds__t { font-size: 30px; }
  .ss-help__boxes { grid-template-columns: 1fr; }
}

/* ============================================================
   ÁREA DE PRÁCTICA (.riera-area) — variante de HERO CLARO.
   Las páginas hijas de /servicios/ reutilizan los mismos bloques
   .ss-* que los subservicios, pero su hero va en CLARO (crema) en
   lugar de oscuro, para que no se vean idénticas a las páginas de
   subservicio. El resto de secciones mantiene el lenguaje común.
   La clase la añade riera_area_body_class() en functions.php.
   ============================================================ */
.riera-area .ss-hero { background: var(--cream); color: var(--ink); border-bottom-color: var(--line); }
.riera-area .ss-hero::before { background: radial-gradient(circle, rgba(232,120,32,.16) 0%, transparent 64%); }
.riera-area .ss-hero__bc { color: var(--text-2); }
.riera-area .ss-hero__h1 { color: var(--ink); text-shadow: none; }
.riera-area .ss-hero__sub { color: var(--text); }
.riera-area .ss-hero__ctas .btn-g { color: var(--ink); border-color: rgba(0,0,0,.28); }
.riera-area .ss-hero__ctas .btn-g:hover { color: var(--orange); border-color: var(--orange); }
.riera-area .ss-hero__media img { box-shadow: 0 30px 64px rgba(15,15,15,.22); }

/* ============================================================
   FICHA DE EQUIPO (single-equipo.php): minibio en el hero, 2a
   foto a la derecha de la trayectoria y ficha (contacto /
   idiomas / areas) en fila horizontal debajo.
   ============================================================ */
.prof-lead { font-size: 17px; line-height: 1.7; color: var(--text); margin: 0 0 30px; max-width: 560px; }
.prof-body__i--photo { grid-template-columns: 1.05fr 0.95fr; align-items: start; }
.prof-body__i--solo { grid-template-columns: minmax(0, 860px); }
.prof-body__shot { height: clamp(470px, 58vh, 700px); border-radius: 4px; overflow: hidden; background: var(--dark); }
.prof-body__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
/* Idiomas y contacto van a continuación de la trayectoria, dentro de su columna. */
.prof-meta { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
@media (max-width: 1180px) {
  .prof-body__i--photo, .prof-body__i--solo { grid-template-columns: 1fr; }
  .prof-meta { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
}

/* ============================================================
   SOCIO FUNDADOR (Antonio) — caja naranja contenida, bajo el
   grid de la página Equipo (template-equipo.php).
   ============================================================ */
.founder { padding: 0 40px 110px; background: var(--white); }
.founder__box { max-width: 1040px; margin: 0 auto; background: var(--orange); color: #fff; border-radius: 6px; overflow: hidden; display: grid; grid-template-columns: 300px 1fr; align-items: stretch; box-shadow: 0 30px 70px rgba(232,120,32,.28); }
.founder__media { position: relative; min-height: 320px; background: var(--orange-h); }
.founder__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.founder__body { padding: 44px clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.founder__tag { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.founder__quote { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 31px; line-height: 1.3; letter-spacing: -.01em; color: #fff; margin: 0; }
.founder__quote::before { content: '\201C'; }
.founder__quote::after { content: '\201D'; }
.founder__name { font-family: var(--sans); font-weight: 700; font-size: 15px; color: #fff; margin-top: 4px; }
.founder__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #fff; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 3px; width: fit-content; transition: border-color .2s; }
.founder__link:hover { border-color: #fff; }
@media (max-width: 720px) {
  .founder { padding: 0 22px 72px; }
  .founder__box { grid-template-columns: 1fr; }
  .founder__media { min-height: 280px; }
  .founder__body { padding: 32px 24px; }
  .founder__quote { font-size: 26px; }
}

/* ============================================================
   BLOG (Bloque D): botón del hero, módulo de boletín (.nlsec) y
   single post (.post-*). Depende de tokens de main.css.
   ============================================================ */
.bhero__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; }

/* Módulo de boletín — minimal y horizontal: texto izq · formulario der.
   Campos en fila con etiqueta flotante DENTRO del campo (Fluent Forms id 4). */
.nlsec { background: var(--cream); padding: 72px 40px; border-top: 1px solid var(--line); }
.nlsec__i { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.nlsec__eyebrow { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; }
.nlsec__t { font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1.12; letter-spacing: -.02em; color: var(--ink); margin: 0 0 10px; }
.nlsec__t em { font-style: italic; color: var(--orange); }
.nlsec__sub { font-size: 15px; line-height: 1.6; color: var(--text-2); margin: 0; max-width: 420px; }

/* Formulario Fluent (id 4) — versión clara, campos alineados + botón al final. */
.nlsec .frm-fluent-form { display: flex; flex-wrap: wrap; gap: 20px 18px; align-items: flex-end; margin: 0; }
.nlsec .frm-fluent-form > .ff-el-group { flex: 1 1 160px; min-width: 0; margin: 0; position: relative; }
.nlsec .frm-fluent-form > .ff-el-group.accept-confirmation { flex-basis: 100%; }
.nlsec .frm-fluent-form > .ff_submit_btn_wrapper { flex: 0 0 auto; }
.nlsec .frm-fluent-form input[type="text"],
.nlsec .frm-fluent-form input[type="email"] {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(0,0,0,.2); border-radius: 0;
  padding: 10px 2px 8px; color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.3;
  box-shadow: none; outline: none; height: auto; transition: border-color .25s;
}
.nlsec .frm-fluent-form input[type="text"]:focus,
.nlsec .frm-fluent-form input[type="email"]:focus { border-bottom-color: var(--orange); }
.nlsec .frm-fluent-form input::placeholder { color: transparent; -webkit-text-fill-color: transparent; }
.nlsec .frm-fluent-form .ff-el-input--label { position: absolute; left: 2px; top: 10px; margin: 0; padding: 0; z-index: 1; pointer-events: none; }
.nlsec .frm-fluent-form .ff-el-input--label label { color: var(--text-2); font-family: var(--sans); font-weight: 400; font-size: 15px; text-transform: none; letter-spacing: normal; margin: 0; transform-origin: left; transition: transform .2s var(--ease), color .2s, font-size .2s; }
.nlsec .frm-fluent-form .ff-el-input--label .ff-el-is-required { display: none; }
.nlsec .frm-fluent-form .ff-el-group:focus-within .ff-el-input--label label,
.nlsec .frm-fluent-form .ff-el-group:has(input:not(:placeholder-shown)) .ff-el-input--label label { transform: translateY(-18px); font-size: 11px; letter-spacing: .04em; color: var(--orange); }
.nlsec .frm-fluent-form .ff-el-group:has(.ff-el-form-check) .ff-el-input--label { display: none; }
.nlsec .frm-fluent-form .ff-el-form-check label.ff-el-form-check-label { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: var(--text-2); cursor: pointer; text-transform: none; letter-spacing: normal; font-weight: 400; margin: 0; }
.nlsec .frm-fluent-form .ff-el-form-check input[type="checkbox"] { margin: 2px 0 0; width: 15px; height: 15px; flex: 0 0 auto; accent-color: var(--orange); }
.nlsec .frm-fluent-form .ff-el-form-check a { color: var(--orange); text-decoration: underline; }
.nlsec .frm-fluent-form .ff_submit_btn_wrapper { flex: 0 0 auto; }
.nlsec .frm-fluent-form .ff-btn-submit { width: auto; background: var(--orange); color: #fff; padding: 13px 26px; border: 0; border-radius: 2px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: none; white-space: nowrap; transition: background .2s, transform .2s; }
.nlsec .frm-fluent-form .ff-btn-submit:hover { background: var(--orange-h); transform: translateY(-1px); }
.nlsec .frm-fluent-form .ff-message-success { color: var(--orange); font-size: 14px; line-height: 1.5; }
.nlsec .frm-fluent-form .text-danger, .nlsec .frm-fluent-form .error { color: #c0392b; font-size: 11px; margin-top: 6px; }
@media (max-width: 880px) {
  .nlsec { padding: 56px 22px; }
  .nlsec__i { grid-template-columns: 1fr; gap: 26px; }
  .nlsec__t { font-size: 28px; }
}

/* Single post */
.post-hero { background: var(--cream); padding: 48px 40px 56px; }
.post-hero__i { max-width: 1120px; margin: 0 auto 40px; }
.post-bc { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin-bottom: 22px; }
.post-bc a { color: var(--text-2); }
.post-bc a:hover { color: var(--orange); }
.post-cat { display: inline-block; font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--orange); padding: 6px 12px; border-radius: 2px; margin-bottom: 20px; text-decoration: none; }
.post-title { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 5vw, 56px); line-height: 1.07; letter-spacing: -.02em; color: var(--ink); margin: 0 0 22px; text-wrap: balance; }
.post-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-family: var(--mono); font-size: 13px; color: var(--text-2); }
.post-meta a { color: var(--ink); }
.post-meta a:hover { color: var(--orange); }
.post-meta__sep { color: rgba(0,0,0,.2); }
.post-hero__media { max-width: 1120px; margin: 0 auto; }
.post-hero__media img { width: 100%; height: clamp(300px, 50vh, 600px); object-fit: cover; border-radius: 4px; display: block; }

/* Cuerpo a 2 columnas: contenido (izq) + lateral sticky autor/captacion (der). */
.post-layout { max-width: 1200px; margin: 0 auto; padding: 64px 40px 32px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; }
.post-main { min-width: 0; }
.post-prose { font-size: 18px; line-height: 1.8; color: #2a2a2a; }
.post-prose p { margin: 0 0 24px; }
.post-prose h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.2; color: var(--ink); margin: 44px 0 16px; letter-spacing: -.01em; }
.post-prose h3 { font-family: var(--serif); font-weight: 400; font-size: 23px; color: var(--ink); margin: 36px 0 12px; }
.post-prose a { color: var(--orange); text-decoration: underline; }
.post-prose ul, .post-prose ol { margin: 0 0 24px; padding-left: 22px; }
.post-prose li { margin-bottom: 8px; }
.post-prose img { max-width: 100%; height: auto; border-radius: 4px; margin: 16px 0; }
.post-prose blockquote { border-left: 3px solid var(--orange); padding-left: 20px; margin: 24px 0; font-style: italic; color: var(--text); }
.post-prose strong { color: var(--ink); }
.post-share { max-width: 1200px; margin: 0 auto; padding: 34px 40px 56px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 14px; }
/* Single post: ancho unificado (1120 de contenido) en los modulos con fondo propio */
.single-post .nlsec__i, .single-post .bcta__i { max-width: 1120px; }
.post-share__l { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.post-share a { color: var(--ink); line-height: 0; transition: color .2s; }
.post-share a:hover { color: var(--orange); }

/* Lateral: autor (flujo) + captación (sticky al hacer scroll). El wrapper usa
   display:contents para que el sticky de .post-lead viaje por la columna alta. */
.post-side__sticky { display: contents; }
.post-author { background: var(--cream); border-radius: 6px; padding: 26px; margin-bottom: 18px; }
.post-author__media { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--dark); margin-bottom: 16px; }
.post-author__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-author__k { font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-bottom: 6px; }
.post-author__name { font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--ink); margin: 0 0 4px; }
.post-author__role { font-size: 12.5px; line-height: 1.4; color: var(--orange); margin: 0 0 10px; }
.post-author__bio { font-size: 13.5px; line-height: 1.6; color: var(--text-2); margin: 0 0 12px; }
.post-author__link { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }

/* Caja de captacion de leads (sticky con el autor) */
.post-lead { background: var(--orange); color: #fff; border-radius: 6px; padding: 28px 26px; position: sticky; top: 100px; }
.post-lead__k { font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: 8px; }
.post-lead__t { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.15; color: #fff; margin: 0 0 10px; }
.post-lead__d { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.92); margin: 0 0 20px; }
.post-lead__btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 13px 20px; border-radius: 2px; text-decoration: none; transition: transform .2s; }
.post-lead__btn:hover { transform: translateY(-1px); }
.post-lead__tel { display: block; margin-top: 14px; font-family: var(--mono); font-weight: 600; font-size: 13px; letter-spacing: .04em; color: #fff; text-decoration: none; }
.post-lead__tel:hover { text-decoration: underline; }

/* Sigue leyendo - fondo oscuro */
.post-related { background: var(--dark); padding: 90px 40px; }
.post-related__i { max-width: 1120px; margin: 0 auto; }
.post-related__t { font-family: var(--serif); font-weight: 500; font-size: 34px; color: #fff; margin: 0 0 36px; letter-spacing: -.02em; }
.post-related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) {
  .post-layout { grid-template-columns: 1fr; gap: 40px; }
  .post-lead { position: static; }
  .post-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .post-hero { padding: 32px 22px 44px; }
  .post-layout { padding: 48px 22px 32px; }
  .post-prose { font-size: 17px; }
  .post-related { padding: 64px 22px; }
  .post-share { padding-left: 22px; padding-right: 22px; }
}
@media (max-width: 560px) {
  .post-related__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LISTADO DEL BLOG — grid a 4 columnas con imagen en la tarjeta.
   (Sobrescribe .barchive__grid/.bcard de main.css.)
   ============================================================ */
.barchive__grid { grid-template-columns: repeat(4, 1fr); }
.bcard { padding: 0; gap: 0; overflow: hidden; }
.bcard__media { aspect-ratio: 16 / 10; background: var(--cream); overflow: hidden; }
.bcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.bcard:hover .bcard__media img { transform: scale(1.05); }
.bcard__body { padding: 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.barchive__grid .bcard__t { font-size: 20px; }
@media (max-width: 1180px) { .barchive__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .barchive__grid { grid-template-columns: repeat(2, 1fr); } .bcard__body { padding: 22px; } }
@media (max-width: 560px) { .barchive__grid { grid-template-columns: 1fr; } }

/* ============================================================
   BLOQUE E — páginas legales (.lpage), 404 (.e404) y gracias (.gracias).
   ============================================================ */
.lpage { padding: 56px 40px 100px; }
.lpage__i { max-width: 820px; margin: 0 auto; }
.lpage__bc { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin-bottom: 22px; }
.lpage__bc a { color: var(--text-2); }
.lpage__bc a:hover { color: var(--orange); }
.lpage__t { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 5vw, 50px); line-height: 1.08; letter-spacing: -.02em; color: var(--ink); margin: 0 0 36px; }
.lpage__prose { font-size: 16px; line-height: 1.75; color: var(--text); }
.lpage__prose h2 { font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--ink); margin: 40px 0 14px; letter-spacing: -.01em; }
.lpage__prose h3 { font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--ink); margin: 30px 0 10px; }
.lpage__prose p { margin: 0 0 18px; }
.lpage__prose a { color: var(--orange); text-decoration: underline; word-break: break-word; }
.lpage__prose ul, .lpage__prose ol { margin: 0 0 18px; padding-left: 22px; }
.lpage__prose li { margin-bottom: 8px; }
.lpage__prose strong { color: var(--ink); }
.lpage__prose table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 14px; }
.lpage__prose th, .lpage__prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.lpage__prose img { max-width: 100%; height: auto; }
@media (max-width: 600px) { .lpage { padding: 40px 22px 72px; } }

/* 404 */
.e404 { background: var(--cream); padding: 110px 40px 120px; text-align: center; }
.e404__i { max-width: 640px; margin: 0 auto; }
.e404__code { font-family: var(--serif); font-weight: 500; font-size: clamp(80px, 16vw, 140px); line-height: 1; color: var(--orange); letter-spacing: -.04em; }
.e404__t { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 5vw, 40px); line-height: 1.1; letter-spacing: -.02em; color: var(--ink); margin: 8px 0 14px; }
.e404__t em { font-style: italic; color: var(--orange); }
.e404__sub { font-size: 16px; line-height: 1.6; color: var(--text-2); margin: 0 auto 32px; max-width: 480px; }
.e404__search { display: flex; gap: 10px; max-width: 460px; margin: 0 auto 30px; }
.e404__search input { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 2px; padding: 13px 16px; font-family: var(--sans); font-size: 15px; color: var(--ink); }
.e404__search input:focus { outline: none; border-color: var(--orange); }
.e404__search button { display: inline-flex; align-items: center; gap: 8px; background: var(--orange); color: #fff; border: 0; border-radius: 2px; padding: 0 20px; font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .2s; }
.e404__search button:hover { background: var(--orange-h); }
.e404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.e404__links a { color: var(--text-2); text-decoration: none; }
.e404__links a:hover { color: var(--orange); }
@media (max-width: 600px) { .e404 { padding: 80px 22px 90px; } .e404__search { flex-direction: column; } }

/* Gracias */
.gracias { background: var(--cream); padding: 120px 40px; text-align: center; }
.gracias__i { max-width: 600px; margin: 0 auto; }
.gracias__ico { width: 76px; height: 76px; margin: 0 auto 26px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; }
.gracias__k { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; }
.gracias__t { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 5vw, 46px); line-height: 1.08; letter-spacing: -.02em; color: var(--ink); margin: 0 0 16px; }
.gracias__t em { font-style: italic; color: var(--orange); }
.gracias__sub { font-size: 16px; line-height: 1.65; color: var(--text-2); margin: 0 auto 34px; max-width: 480px; }
.gracias__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
@media (max-width: 600px) { .gracias { padding: 84px 22px; } }

/* Buscador del hero (resultados de búsqueda) + estado vacío. */
.bhero__search { display: flex; align-items: center; max-width: 540px; margin-top: 28px; background: #fff; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.14); overflow: hidden; }
.bhero__search input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 14px 6px 14px 22px; font-family: var(--sans); font-size: 15px; color: var(--ink); }
.bhero__search input:focus { outline: none; }
.bhero__search input::placeholder { color: var(--text-2); }
.bhero__search button { flex: 0 0 auto; align-self: stretch; width: 52px; background: transparent; border: 0; color: var(--orange); display: grid; place-items: center; cursor: pointer; transition: color .2s; }
.bhero__search button:hover { color: var(--orange-h); }
/* Variante anclada a la esquina inferior derecha del hero (listado del blog). */
.bhero__i { position: relative; }
.bhero__search--corner { position: absolute; right: 0; bottom: 0; margin: 0; width: min(340px, 80%); max-width: 340px; }
@media (max-width: 860px) {
  .bhero__search--corner { position: static; margin-top: 24px; width: 100%; max-width: 540px; }
}
.bsearch-empty { max-width: 640px; }
.bsearch-empty__t { font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--ink); margin: 0 0 10px; letter-spacing: -.01em; }
.bsearch-empty__sub { font-size: 15px; color: var(--text-2); margin: 0 0 24px; }

/* WhatsApp flotante: ocultado temporalmente (a petición). */
.wa { display: none; }

/* Filtros de categoría del blog: scroll horizontal en móvil (ocupan mucho). */
@media (max-width: 700px) {
  .bfilter { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: 36px; }
  .bfilter::-webkit-scrollbar { display: none; }
  .bfilter__btn { flex: 0 0 auto; white-space: nowrap; }
}

/* ============================================================
   TRABAJA CON NOSOTROS (.cvsec) · formulario de CV nativo
   ============================================================ */
.cvsec { background: #fff; padding: 88px 40px; }
.cvsec__i { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: start; }
.cvsec__title { font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.14; letter-spacing: -.02em; color: var(--ink); margin: 0 0 16px; }
.cvsec__title em { font-style: italic; color: var(--orange); }
.cvsec__sub { font-size: 16px; line-height: 1.7; color: var(--text-2); margin: 0 0 24px; }
.cvsec__list { list-style: none; margin: 0 0 28px; padding: 0; }
.cvsec__list li { position: relative; padding-left: 26px; margin-bottom: 12px; font-size: 15px; line-height: 1.55; color: var(--text); }
.cvsec__list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.cvsec__what { background: var(--cream); border-radius: 6px; padding: 22px 24px; }
.cvsec__what-l { display: block; font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; }
.cvsec__what p { font-size: 14px; line-height: 1.65; color: var(--text-2); margin: 0; }

.cvform__alert { background: #fff4ec; border: 1px solid var(--orange); color: #a04a12; border-radius: 6px; padding: 14px 18px; font-size: 14px; line-height: 1.5; margin: 0 0 22px; }
.cvform { display: flex; flex-direction: column; gap: 20px; }
.cvform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cvform__field { display: flex; flex-direction: column; gap: 7px; }
.cvform__l { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.cvform__l small { font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--text-2); opacity: .8; }
.cvform input[type="text"], .cvform input[type="email"], .cvform input[type="tel"], .cvform textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 10px 2px; color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.4; transition: border-color .2s;
}
.cvform textarea { resize: vertical; min-height: 96px; }
.cvform input:focus, .cvform textarea:focus { outline: none; border-bottom-color: var(--orange); }
.cvform__file input[type="file"] { font-family: var(--sans); font-size: 14px; color: var(--text); padding: 8px 0; }
.cvform__file input[type="file"]::file-selector-button { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: var(--dark); color: #fff; border: 0; border-radius: 2px; padding: 10px 16px; margin-right: 14px; cursor: pointer; transition: background .2s; }
.cvform__file input[type="file"]::file-selector-button:hover { background: var(--orange); }
.cvform__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.55; color: var(--text-2); cursor: pointer; }
.cvform__consent input { margin: 2px 0 0; width: 15px; height: 15px; flex: 0 0 auto; accent-color: var(--orange); }
.cvform__consent a { color: var(--orange); text-decoration: underline; }
.cvform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cvform__submit { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; background: var(--orange); color: #fff; border: 0; border-radius: 2px; font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 15px 28px; cursor: pointer; transition: background .2s, transform .2s; }
.cvform__submit:hover { background: var(--orange-h); transform: translateY(-1px); }

@media (max-width: 880px) {
  .cvsec { padding: 56px 22px; }
  .cvsec__i { grid-template-columns: 1fr; gap: 36px; }
  .cvsec__title { font-size: 28px; }
  .cvform__row { grid-template-columns: 1fr; gap: 20px; }
}

/* ========================================================
   ESCALA DE TITULARES · 21-sep-2026
   Esta hoja carga después de main.css, así que sus tamaños ganaban a la
   escala. Se reasignan aquí a los mismos tokens para que las páginas de
   servicio, el blog y las de empleo sigan la misma jerarquía que el
   resto. Ver el bloque equivalente al final de main.css.
======================================================== */
.aud__t, .ss-reto__t, .ss-help__t, .ss-flow__t, .ss-creds__t, .cform__t,
.cvsec__title, .post-related__t, .bsearch-empty__t {
  font-size: var(--t-h2); font-weight: 600; line-height: 1.05; letter-spacing: -.03em;
}
.nlsec__t, .gracias__t {
  font-size: var(--t-h2s); font-weight: 600; line-height: 1.1; letter-spacing: -.025em;
}
.ss-cred__t, .post-lead__t, .barchive__grid .bcard__t {
  font-size: var(--t-h4); font-weight: 500; line-height: 1.22; letter-spacing: -.015em;
}
.founder__quote {
  font-size: var(--t-quote); line-height: 1.24; letter-spacing: -.02em;
}

/* ---------- Módulo de entrada a la calculadora (landings de perfil) ---------- */
/* Va aquí y no en calculadora.css porque ese solo se carga en las páginas de
   calculadora, y este módulo vive en la landing. Lo pinta inc/calculadoras.php
   tras la sección del reto. */
.calcpromo { background: var(--ink); padding: 64px 24px; }
.calcpromo__i {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 48px; flex-wrap: wrap;
}
.calcpromo__txt { flex: 1 1 520px; }
.calcpromo__eyebrow {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--orange);
  margin-bottom: 14px;
}
.calcpromo__t {
  font-family: var(--serif); font-size: 38px; font-weight: 500; line-height: 1.08;
  letter-spacing: -.03em; color: #fff;
}
.calcpromo__t em { font-style: italic; color: var(--orange); }
.calcpromo__sub {
  font-family: var(--sans); font-size: 16px; line-height: 1.62;
  color: rgba(255,255,255,.82); margin-top: 16px; max-width: 62ch;
}
.calcpromo__cta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px;
  background: var(--orange); color: #fff; border-radius: 2px; text-decoration: none;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  transition: background .18s var(--ease);
}
.calcpromo__cta:hover { background: var(--orange-h); color: #fff; }

@media (max-width: 767px) {
  .calcpromo { padding: 48px 20px; }
  .calcpromo__t { font-size: 30px; }
  .calcpromo__i { gap: 28px; }
  .calcpromo__cta { width: 100%; justify-content: center; }
}