/* =========================================================
   THORKIA WEB V31 R4.4 · DETALLES VISUALES + CAPTURAS REALES
   2026-09-02
   Scope: ajustes quirurgicos sin redisenar la web.
   - CTA a la derecha cuando existe espacio real.
   - legibilidad de microcopy/labels.
   - flujo visual sin bloques negros.
   - capturas reales distintas por contexto.
   ========================================================= */

/* 1) CTA: aprovechar el espacio lateral en bloques de cierre amplios. */
@media (min-width:1120px){
  .cta-box{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto auto!important;
    column-gap:52px!important;
    row-gap:0!important;
    align-items:center!important;
  }
  .cta-box>.section-kicker,
  .cta-box>h2,
  .cta-box>p{grid-column:1!important}
  .cta-box>.section-kicker{grid-row:1!important}
  .cta-box>h2{grid-row:2!important}
  .cta-box>p{grid-row:3!important;margin-bottom:0!important}
  .cta-box>.btn,
  .cta-box>.v24-inline-actions{
    grid-column:2!important;
    grid-row:1 / 4!important;
    align-self:center!important;
    justify-self:end!important;
    margin-top:0!important;
  }
  .cta-box>.v24-inline-actions{justify-content:flex-end!important;max-width:430px}
}

/* Opiniones vacias: contenido a la izquierda, accion a la derecha. */
@media (min-width:820px){
  .home-reviews-empty{align-items:center!important}
  .home-reviews-empty>div:nth-child(2){
    flex:1;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    column-gap:34px!important;
    align-items:center!important;
  }
  .home-reviews-empty>div:nth-child(2)>strong{grid-column:1;grid-row:1}
  .home-reviews-empty>div:nth-child(2)>p{grid-column:1;grid-row:2}
  .home-reviews-empty>div:nth-child(2)>.btn{
    grid-column:2;
    grid-row:1 / 3;
    justify-self:end;
    margin-top:0!important;
    white-space:nowrap;
  }
}

/* 2) Legibilidad: subir el suelo tipografico en elementos auxiliares que se
      estaban viendo demasiado pequenos en desktop. */
body.page-home .integration-list>div{
  font-size:14px!important;
  line-height:1.45!important;
  padding:14px 15px!important;
}
body.page-home .integration-list small{
  font-size:12px!important;
  line-height:1.45!important;
  margin-top:5px!important;
}
body.page-home .tag-soon{
  display:inline-flex!important;
  align-items:center!important;
  min-height:22px!important;
  padding:3px 7px!important;
  font-size:10.5px!important;
  line-height:1!important;
  vertical-align:middle!important;
}
.text-link{font-size:15px!important}
.v24-image-note{font-size:12.5px!important;line-height:1.6!important}
.v24-real-shot figcaption,.v24-free-dashboard figcaption{font-size:12px!important;line-height:1.5!important}
.v25-map-foot{font-size:12px!important;line-height:1.5!important}

/* Home console and telemetry: keep the compact UI feel without 8-9px text. */
body.page-home .v31-ops-key span{font-size:11.5px!important}
body.page-home .v31-console-title span{font-size:10.5px!important}
body.page-home .v31-console-live{font-size:10.5px!important}
body.page-home .v31-metric span{font-size:10.5px!important}
body.page-home .v31-metric small{font-size:10px!important;line-height:1.4!important}
body.page-home .v31-card-head strong{font-size:12px!important}
body.page-home .v31-card-head span{font-size:10px!important}
body.page-home .v31-activity strong{font-size:10.5px!important}
body.page-home .v31-activity span{font-size:9.5px!important}
body.page-home .v31-activity time{font-size:9px!important}
body.page-home .v31-demo-note{font-size:10.5px!important;line-height:1.55!important}
.v31-product-shot figcaption{font-size:11px!important;line-height:1.5!important}
.v31-telemetry-head span{font-size:10.5px!important}
.v31-telemetry-item b{font-size:14px!important}
.v31-telemetry-item small{font-size:10.5px!important;line-height:1.5!important}

/* Plan/free microcopy: small, but still comfortably readable. */
body.page-home .v42-home-included{font-size:13px!important}
body.page-producto .v42-product-free-list span{font-size:12px!important}
body.page-producto .v42-product-future strong{font-size:12px!important}
body.page-producto .v42-product-future span{font-size:12px!important}

/* 3) Home: the follow-up flow must read as a process, not black buttons. */
body.page-home #producto .bento.accent .automation-flow,
body.page-producto .bento.accent .automation-flow{
  gap:9px!important;
  margin-top:28px!important;
  align-items:center!important;
}
body.page-home #producto .bento.accent .flow-node,
body.page-producto .bento.accent .flow-node{
  position:relative;
  display:inline-flex!important;
  align-items:center!important;
  min-height:38px!important;
  padding:9px 13px 9px 34px!important;
  border:1px solid #bad5f2!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.88)!important;
  color:#173a61!important;
  box-shadow:0 8px 22px rgba(18,84,158,.08)!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.15!important;
}
body.page-home #producto .bento.accent .flow-node:before,
body.page-producto .bento.accent .flow-node:before{
  content:"";
  position:absolute;
  left:12px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#1682ff;
  box-shadow:0 0 0 4px rgba(22,130,255,.10);
}
body.page-home #producto .bento.accent .flow-arrow,
body.page-producto .bento.accent .flow-arrow{
  color:#2873bd!important;
  font-size:16px!important;
  font-weight:900!important;
}

/* 4) Real screenshots: consistent product framing without stretching. */
.v31-product-frame img,
.v23-home-proof-shot img,
.v23-shot img,
.v31-product-shot img,
.v24-free-dashboard img{
  object-fit:cover;
  object-position:top left;
}
body.page-home .v31-product-frame img{aspect-ratio:1600/772}
body.page-home .v24-home-free .v23-home-proof-shot img{aspect-ratio:1600/711!important}
body.page-producto .v23-shot-main img{aspect-ratio:1600/765}
body.page-producto .v31-product-shot img{aspect-ratio:1600/772}
body.page-funciones .v24-free-dashboard img{aspect-ratio:1600/763}

/* The assistant is intentionally a portrait crop inside the floating card. */
body.page-producto .v44-assistant-shot{
  width:min(310px,31vw)!important;
  max-height:430px!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 24px 62px rgba(11,61,129,.22)!important;
}
body.page-producto .v44-assistant-shot img{
  width:100%!important;
  height:auto!important;
  max-height:430px!important;
  object-fit:cover!important;
  object-position:top center!important;
}

/* Responsive: do not force right-side CTA when the horizontal room disappears. */
@media (max-width:1119px){
  .cta-box>.btn,.cta-box>.v24-inline-actions{margin-top:24px!important}
}
@media (max-width:819px){
  .home-reviews-empty>div:nth-child(2){display:block!important}
  .home-reviews-empty .btn{margin-top:17px!important}
}
@media (max-width:720px){
  body.page-home .integration-list>div{font-size:13.5px!important}
  body.page-home .integration-list small{font-size:11.5px!important}
  body.page-home #producto .bento.accent .automation-flow,
  body.page-producto .bento.accent .automation-flow{gap:7px!important}
  body.page-home #producto .bento.accent .flow-node,
  body.page-producto .bento.accent .flow-node{font-size:11.5px!important;padding:9px 11px 9px 31px!important}
  body.page-producto .v44-assistant-shot{width:46%!important;max-width:240px!important}
}