/* ============================================================
   Kelp · Contacto. Solo lo de esta página; hero, bloques, cierre
   y pie son del sistema (kelp.css).
   ============================================================ */

/* ---- Hero: de tu correo a la demo. El correo, la invitación y la llamada, uno tras otro ---- */
#hablemos { height: 600px; }
.hb-cv { --cw: 1104px; --ch: 460px; }
.hb-dyn { position: absolute; inset: 0; }
.hb-mail { position: absolute; left: 16px; top: 40px; width: 380px; height: 316px; display: flex; flex-direction: column; overflow: hidden; transition: opacity .5s; }
.hb-mh { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; flex: none; background: #F2F6FC; font-size: 13px; font-weight: 600; }
.hb-mh img, .hb-ch img { width: 16px; height: 16px; }
.hb-f { display: flex; align-items: center; gap: 10px; height: 40px; margin: 0 18px; flex: none; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.hb-f span { color: var(--ink-3); }
.hb-f em { padding: 3px 10px; border-radius: 99px; background: #EEF1F0; font-size: 12.5px; font-weight: 600; font-style: normal; }
.hb-f b { font-weight: 600; }
.hb-bd { flex: 1; padding: 18px 18px 0; display: grid; gap: 10px; align-content: start; font-size: 16px; line-height: 1.5; }
.hb-l { white-space: nowrap; clip-path: inset(0 100% 0 0); }
.hb-k, .hb-fly { padding: 1px 6px; border-radius: 6px; background: var(--foam-2); color: var(--ok); font-weight: 600; }
.hb-fly { position: absolute; left: 0; top: 0; z-index: 8; font-size: 16px; line-height: 1.5; opacity: 0; box-shadow: 0 0 0 1.5px var(--teal), 0 12px 22px -10px rgb(1 33 32 / .55); }
.hb-mf { flex: none; padding: 14px 18px 18px; }
.hb-sw { justify-items: start; }
.hb-send, .hb-sent { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 20px; border-radius: 99px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.hb-send, .hb-join { background: #0B57D0; color: #fff; }
.hb-sent { background: var(--foam-2); color: var(--ok); opacity: 0; }
.hb-sent .ic { width: 14px; height: 14px; stroke-width: 2.5; }
.hb-inv { position: absolute; left: 420px; top: 96px; width: 296px; padding: 18px 20px 18px 26px; display: grid; gap: 10px; overflow: hidden; }
.hb-inv::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--teal); }
.hb-it { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.hb-ir { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2); }
.hb-ir .ic, .hb-ir img { width: 16px; height: 16px; }
.hb-ir .ic { color: var(--teal); }
.hb-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.hb-slots i { padding: 1px 6px; border-radius: 6px; font-size: 16px; font-weight: 600; font-style: normal; line-height: 1.5; color: transparent; outline: 1.5px dashed var(--line-2); outline-offset: -1.5px; }
.hb-if { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.hb-gs { display: flex; }
.hb-gs img, .hb-gs .kbot { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.hb-gs .kbot { margin-left: -6px; }
.hb-gs .kbot svg { width: 17px; height: 17px; }
.hb-join { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 99px; font-size: 13.5px; font-weight: 600; }
.hb-call { position: absolute; left: 740px; top: 40px; width: 348px; padding: 10px; border-radius: 16px; background: #202124; box-shadow: 0 40px 70px -30px rgb(0 0 0 / .7); }
.hb-ch { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px 8px; color: #E8EAED; font-size: 12.5px; font-weight: 600; }
.hb-ch em { margin-left: auto; display: flex; align-items: center; gap: 6px; font-style: normal; font-weight: 500; color: #9AA0A6; font-variant-numeric: tabular-nums; }
.hb-ch em i { width: 7px; height: 7px; border-radius: 50%; background: #EA4335; }
.hb-scr { position: relative; height: 212px; padding: 42px 22px 14px; border-radius: 10px; background: #fff; overflow: hidden; display: grid; gap: 10px; align-content: start; }
.hb-band { position: absolute; left: 0; right: 0; top: 0; height: 26px; padding: 0 14px; display: flex; align-items: center; gap: 8px; background: var(--deep); color: var(--foam); font-size: 11px; font-weight: 700; }
.hb-band i { width: 10px; height: 10px; border-radius: 3px; background: var(--foam); }
.hb-dl { display: block; height: 7px; }
.hb-dl i { display: block; height: 100%; border-radius: 4px; background: #D9E2DF; transform-origin: left; }
.hb-dl:first-of-type i { background: #5E8F85; }
.hb-case { justify-self: start; margin-top: 4px; padding: 3px 10px; border-radius: 99px; background: var(--ember-2); color: var(--ember-ink); font-size: 12px; font-weight: 600; }
.hb-car { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 6px; }
.hb-car svg { width: 13px; height: 13px; }
.hb-tiles { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hb-tl { position: relative; height: 96px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: #3C4043; }
.hb-tl img { width: 100%; height: 100%; object-fit: cover; }
.hb-tl em { position: absolute; left: 8px; bottom: 6px; font-size: 11px; font-weight: 600; font-style: normal; color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / .6); }
.hb-kt { background: var(--deep); }
.hb-kt .kbot { width: 44px; height: 44px; border-radius: 12px; background: rgb(198 238 227 / .1); }
.hb-kt .kbot svg { width: 28px; height: 28px; }
.hb-dim { opacity: .5; }

/* ---- Pedir una demo: el correo se escribe con tres elecciones ---- */
.uc-t > p.cn-3 { margin-top: 18px; font-size: 15px; color: var(--ink); }
.cn-cs { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; }
.cn-cmp { width: 620px; max-width: calc(100% - 32px); overflow: hidden; font-size: 13.5px; }
.cn-mh { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; background: #F2F6FC; font-size: 13px; font-weight: 600; }
.cn-mh img { width: 16px; height: 16px; }
.cn-f { display: flex; align-items: center; gap: 10px; height: 38px; margin: 0 18px; border-bottom: 1px solid var(--line); font-weight: 600; }
.cn-f span { width: 82px; flex: none; font-weight: 500; color: var(--ink-3); }
.cn-q { display: grid; grid-template-columns: 82px 1fr; gap: 8px; align-items: start; margin: 0 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cn-ql { padding-top: 5px; font-weight: 500; color: var(--ink-3); }
.cn-ops { display: flex; flex-wrap: wrap; gap: 5px; }
.cn-ops button { height: 30px; padding: 0 10px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: background-color .2s, color .2s, box-shadow .2s; }
.cn-ops button:hover { box-shadow: inset 0 0 0 1px var(--teal); color: var(--ink); }
.cn-ops button[aria-pressed="true"] { background: var(--deep); box-shadow: none; color: #fff; }
.cn-pv { min-height: 76px; margin: 0 18px; padding: 14px 0; font-size: 14.5px; line-height: 1.6; }
.cn-pv u { display: inline-block; min-width: 54px; border-bottom: 1.5px dashed var(--line-2); color: var(--ink-3); text-align: center; text-decoration: none; }
.cn-pv b { padding: 0 4px; border-radius: 4px; background: var(--foam-2); color: var(--ok); font-weight: 600; }
.cn-mf { display: flex; align-items: center; gap: 14px; padding: 12px 18px 16px; border-top: 1px solid var(--line); }
.cn-hint { font-size: 12.5px; color: var(--ink-3); }

/* ---- Escríbenos: tres buzones con su dibujo (mismo trazo que los sellos de la home) ---- */
.cn-chs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.cn-ch { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 34px clamp(24px, 3vw, 40px); border-right: 1px solid var(--line); transition: background-color .25s; }
.cn-ch:last-child { border-right: 0; }
.cn-ch:hover, .cn-ch.act { background: #fff; }
.cn-ch h3 { margin-top: 22px; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.cn-ch p { flex: 1; max-width: 40ch; margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.cn-to { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.cn-to a { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.cn-to a:hover { color: var(--teal); }
.cn-ext { font-size: 15px; color: var(--ink-3); }
.cn-cp { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12.5px; font-weight: 600; color: var(--ink-2); transition: background-color .2s, color .2s, box-shadow .2s; }
.cn-cp .ic { width: 13px; height: 13px; }
.cn-cp:hover { box-shadow: inset 0 0 0 1px var(--teal); color: var(--ink); }
.cn-cp.ok { background: var(--foam-2); box-shadow: none; color: var(--ok); }
.ct-svg { width: 112px; height: auto; aspect-ratio: 220 / 180; overflow: visible; color: var(--deep); transition: transform .35s var(--ease-out); }
.ct-svg .cl { fill: none; stroke: currentColor; stroke-width: 2.9; stroke-linecap: round; stroke-linejoin: round; }
.ct-svg .ct-t { font-family: var(--font); font-weight: 600; }
.ct-svg .chk path, .ct-svg .env path { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.cn-ch:hover .ct-svg, .cn-ch.act .ct-svg { transform: translateY(-3px); }
.cn-ch .glint { position: absolute; inset: 0; pointer-events: none; translate: -120% 0; background: linear-gradient(105deg, transparent 35%, rgb(198 238 227 / .55) 50%, transparent 65%); }
@media (prefers-reduced-motion: no-preference) {
  .cn-ch:hover .chk path, .cn-ch:hover .env path, .cn-ch.act .chk path, .cn-ch.act .env path { animation: cn-redraw 1.8s var(--ease) infinite; }
  .cn-ch:hover .pins, .cn-ch.act .pins { animation: cn-blink 1.15s steps(1) infinite; }
  @keyframes cn-redraw { 0% { stroke-dashoffset: 1; } 55%, 100% { stroke-dashoffset: 0; } }
  @keyframes cn-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .2; } }
}

/* ---- Dónde estamos: la tarjeta de la empresa y dónde leer antes de escribir ---- */
.cn-dn { display: grid; grid-template-columns: 5fr 7fr; }
.cn-dn-t { padding: 56px clamp(24px, 4.5vw, 56px); border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.cn-dn-t p { max-width: 40ch; margin-top: 16px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.cn-dn-s { height: 380px; margin: 24px; border-radius: 18px; display: grid; place-items: center; }
.bc { position: relative; width: 400px; height: 232px; }
.bc-back { position: absolute; inset: 0; border-radius: 14px; display: grid; place-items: center; background: var(--foam); rotate: 6deg; translate: 26px 12px; box-shadow: 0 20px 40px -22px rgb(1 33 32 / .55); }
.bc-back svg { width: 92px; height: 92px; fill: var(--deep); }
.bc-card { position: absolute; inset: 0; padding: 28px 30px; border-radius: 14px; display: flex; flex-direction: column; background: var(--deep); color: rgb(198 238 227 / .8); font-size: 13.5px; font-style: normal; line-height: 1.55; rotate: -3deg; box-shadow: 0 30px 60px -26px rgb(1 33 32 / .75); transition: rotate .5s var(--ease-out); }
.bc:hover .bc-card { rotate: 0deg; }
.bc-logo { width: 86px; margin-bottom: auto; fill: var(--foam); }
.bc-card b { margin-bottom: 4px; font-size: 16px; font-weight: 600; color: #F2FBF8; }
.bc-nif { margin-top: 8px; font-variant-numeric: tabular-nums; color: rgb(198 238 227 / .6); }
.cn-ctx { display: grid; grid-template-columns: 1fr repeat(3, 1.3fr); border-top: 1px solid var(--line); }
.cn-ctx-l { display: flex; align-items: center; padding: 22px clamp(24px, 4.5vw, 56px); border-right: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink-3); }
.cn-ctx a { position: relative; display: grid; gap: 3px; align-content: center; padding: 22px 52px 22px 26px; border-right: 1px solid var(--line); transition: background-color .25s; }
.cn-ctx a:last-child { border-right: 0; }
.cn-ctx a:hover { background: #fff; }
.cn-ctx b { font-size: 15.5px; font-weight: 600; }
.cn-ctx a span { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.cn-ctx .arrow { position: absolute; right: 24px; top: calc(50% - 12px); font-style: normal; }

/* ---- Pantallas estrechas ---- */
@media (max-width: 1100px) {
  .cn-ctx { grid-template-columns: repeat(3, 1fr); }
  .cn-ctx-l { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--line); padding-block: 16px; }
}
@media (max-width: 980px) {
  .cn-chs, .cn-dn, .cn-ctx { grid-template-columns: 1fr; }
  .cn-ch, .cn-ctx a { border-right: 0; border-bottom: 1px solid var(--line); }
  .cn-ch:last-child, .cn-ctx a:last-child { border-bottom: 0; }
  .cn-dn-t { border-right: 0; padding-bottom: 0; }
  .cn-cs { height: auto; padding: 16px 0; }
}
@media (max-width: 700px) {
  /* Hero en vertical: el correo arriba; la invitación entra solapando su pie (el correo ya se
     atenúa) y recibe lo que has contado; al unirte, la llamada se pone delante de las dos */
  #hablemos { height: 440px; }
  .hb-cv { --cw: 340px; --ch: 404px; }
  .hb-mail { left: 0; top: 0; width: 300px; height: 262px; }
  .hb-mh { padding: 0 14px; }
  .hb-f { margin: 0 14px; height: 38px; font-size: 13px; }
  .hb-bd { padding: 14px 14px 0; gap: 6px; font-size: 14px; }
  .hb-fly { font-size: 14px; }
  .hb-mf { padding: 12px 14px 16px; }
  .hb-inv { left: 40px; top: 206px; width: 300px; padding: 16px 18px 16px 24px; gap: 8px; }
  .hb-it { font-size: 17px; }
  .hb-slots i { font-size: 14px; }
  .hb-call { left: 0; top: 92px; z-index: 10; width: 340px; }   /* delante de lo que voló a la invitación */
  .hb-scr { height: 168px; padding-top: 38px; }
  .hb-tl { height: 72px; }
  .cn-cs { margin: 12px; }
  .cn-q { grid-template-columns: 1fr; gap: 8px; }
  .cn-ql { padding-top: 0; }
  .cn-ops { gap: 6px; }
  .cn-ops button { height: 40px; padding: 0 13px; font-size: 13px; }   /* toque de 40 px, con 6 de aire */
  .cn-cp { height: 40px; padding: 0 12px; }
  /* La tarjeta de la empresa a su tamaño de móvil, sin encoger el texto */
  .cn-dn-s { height: 280px; margin: 12px; }
  .bc { width: 300px; height: 196px; }
  .bc-back { translate: 18px 10px; }
  .bc-back svg { width: 72px; height: 72px; }
  .bc-card { padding: 20px 22px; font-size: 13px; line-height: 1.5; }
  .bc-logo { width: 72px; }
  .bc-card b { font-size: 15px; }
}
.cn-kchat { margin-top: 16px; }