
/* ===== Contacto · page prefix ct- ===== */
main section[id]{scroll-margin-top:calc(var(--hd,73px) + 24px)}
.nb{white-space:nowrap}

/* hero, short: crumbs, the motivo switcher, the title and the lead that follows the motivo; a decorative photo fades into the ink */
.ct-top{padding-top:clamp(18px,2.2vw,30px)}
.ct-top .crumbs{margin-bottom:clamp(12px,1.4vw,18px)}
.ct-ph .ph-in{grid-template-columns:minmax(0,1fr);padding-block:clamp(22px,2.6vw,40px) clamp(40px,4.6vw,72px)}
.ct-ph .ph-lead{max-width:40ch}
.ct-ph .tp svg{stroke:var(--bone-84)}
.ct-ph-bg{position:absolute;z-index:-1;top:0;right:0;width:54%;height:100%;object-fit:cover;object-position:62% 40%;opacity:.78;-webkit-mask-image:linear-gradient(90deg,transparent,#000 58%);mask-image:linear-gradient(90deg,transparent,#000 58%)}
.ct-ph::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,var(--ink) 38%,rgba(7,16,28,.45) 68%,rgba(7,16,28,.22)),linear-gradient(0deg,rgba(7,16,28,.8),rgba(7,16,28,0) 46%)}

/* the lead, the context strip and the checklist swap with a short fade (nothing moves with reduced motion) */
.ct-fade{transition:opacity .26s ease,transform .32s var(--ease)}
.ct-fade.is-out{opacity:0;transform:translateY(6px)}

/* tu consulta: form on the left, sticky ink panel on the right */
.ct-s{padding-top:clamp(44px,5vw,76px);padding-bottom:clamp(48px,5.6vw,88px)}
.ct-ch{padding-top:clamp(56px,6vw,88px)}
.ct-split{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,4vw,64px);align-items:start}
.ct-head{margin-bottom:clamp(18px,2vw,26px)}
.ct-ctx{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-bottom:clamp(22px,2.4vw,32px);padding:12px 16px 12px 18px;border:1px solid var(--line);border-radius:18px;background:var(--mist);font-size:14.5px;line-height:1.4;color:var(--body)}
.ct-ctx-i{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;min-width:0}
.ct-ctx-k{font-size:12.5px;font-weight:600;color:var(--mute)}
.ct-ctx b{font-weight:600;color:var(--ink)}
.ct-ctx-ch{display:inline-flex;align-items:center;min-height:36px;margin-left:auto;padding:0 14px;border:1px solid #b7bdc6;border-radius:999px;background:#fff;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap;transition:border-color .2s,background .2s,color .2s}
.ct-ctx-ch:hover{border-color:var(--ink);background:var(--ink);color:#fff}

/* .fm also names the home's filmstrip figure in gc.css: undo that surface here */
.ct-fm{position:static;height:auto;gap:0;border-radius:0;overflow:visible;background:transparent}
.ct-fs{display:block;min-width:0;min-inline-size:0;margin:0;padding:0;border:0}
.ct-fs + .ct-fs{margin-top:clamp(28px,3vw,40px)}
.ct-fs legend{display:block;width:100%;margin:0 0 16px;padding:0 0 12px;border-bottom:1px solid var(--line);font-size:clamp(19px,1.5vw,22px);font-weight:600;line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.ct-fs-in{display:grid;gap:14px}
.ct-fm textarea{min-height:0}
.ct-fm .fld > span small{margin-left:6px;font-size:12.5px;font-weight:500;color:var(--mute)}
.ct-fm select{appearance:none;-webkit-appearance:none;padding-right:46px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5 5 7l3.5-3.5' fill='none' stroke='%2307101c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 18px center/12px no-repeat;text-overflow:ellipsis}
.ct-fm input::placeholder,.ct-fm textarea::placeholder{color:#8a929c}
.ct-ok{display:flex;align-items:flex-start;gap:12px;margin-top:clamp(24px,2.6vw,32px);font-size:14.5px;line-height:1.45;color:var(--body);cursor:pointer}
.ct-ok input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--red-act);cursor:pointer}
.ct-ok a{color:var(--ink);text-underline-offset:3px}
.ct-err{display:none;margin-top:10px;font-size:14px;font-weight:600;line-height:1.4;color:var(--red-act)}
.ct-err.on{display:block}
.ct-fm .btns{margin-top:clamp(20px,2.2vw,28px)}
.ct-fm button.btn{border:1px solid transparent}
.ct-fm .fm-note{margin-top:14px}

/* the panel: what happens next, who receives, and the checklist for the motivo */
.ct-panel{position:sticky;top:calc(var(--hd,73px) + 20px);gap:0;padding:clamp(22px,2.2vw,30px)}
.ct-pb{display:grid;gap:10px;padding-block:clamp(18px,1.8vw,22px)}
.ct-pb:first-child{padding-top:0}
.ct-pb + .ct-pb{border-top:1px solid var(--hair)}
.ct-pb:last-child{padding-bottom:0}
.ct-pk{font-size:17px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:#fff}
.ct-pb p{font-size:15px;line-height:1.5;color:var(--bone-84)}
.ct-pb p b{color:#fff;font-weight:600}
.ct-mail{display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:600;letter-spacing:-.01em;color:#fff;text-decoration:none;font-variant-numeric:tabular-nums}
.ct-mail:hover{text-decoration:underline;text-underline-offset:4px}
.ct-pm{font-size:13.5px;line-height:1.45;color:var(--bone-66)}
.ct-chk{gap:9px;margin-top:2px}
.ct-chk li{font-size:14.5px;line-height:1.4}
.ct-chk li::before{width:20px;height:20px;background:rgba(245,241,234,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;box-shadow:inset 0 0 0 1px rgba(245,241,234,.22)}
.ct-chk li > div{display:flex;flex-wrap:wrap;gap:0 7px;min-width:0}
.ct-chk b{color:#fff;font-weight:600}
.ct-chk li{animation:ctIn .5s var(--ease) both;animation-delay:calc(var(--k,0) * 55ms)}
@keyframes ctIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ct-panel .tl{margin-top:4px;min-height:40px;font-size:15px;color:#fff}
.ct-panel .tl svg{width:15px;height:15px}

/* otros canales: three cards and the text links */
.ct-ch .grid3{align-items:stretch}
.ct-c{gap:12px;height:100%;padding:clamp(22px,2.2vw,30px)}
.ct-ic{display:grid;place-items:center;width:48px;height:48px;margin-bottom:6px;border:1px solid var(--line);border-radius:15px;background:var(--mist)}
.ct-ic svg{width:23px;height:23px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ct-c h3{font-size:19px;font-weight:600;line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.ct-c p{font-size:15px;line-height:1.5;color:var(--body)}
.ct-c p b{display:block;margin-bottom:2px;color:var(--ink);font-weight:600}
.ct-v{display:inline-block;font-size:clamp(19px,1.5vw,22px);font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
a.ct-v:hover{text-decoration:underline;text-underline-offset:4px}
.ct-cpw{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.ct-cp{display:inline-flex;align-items:center;flex:none;min-height:36px;padding:0 14px;border:1px solid #b7bdc6;border-radius:999px;background:#fff;font:600 13px/1 var(--sans);color:var(--ink);white-space:nowrap;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.ct-cp:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.ct-cp.ok,.ct-cp.ok:hover{background:var(--red-act);border-color:var(--red-act);color:#fff}
.ct-hq{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.ct-hq li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.5;color:var(--body)}
.ct-hq .fl{--fs:28px;margin-top:1px}
.ct-hq b{display:block;margin-bottom:1px;color:var(--ink);font-weight:600}
.ct-links{display:flex;flex-wrap:wrap;gap:6px clamp(24px,3vw,44px);margin-top:clamp(26px,3vw,40px);padding-top:clamp(20px,2.2vw,28px);border-top:1px solid var(--line)}
.ct-links .tl{color:var(--ink)}
.ct-links .tl.ct-l-m{color:var(--body);font-weight:500}
.ct-so{display:flex;flex-wrap:wrap;gap:6px clamp(24px,3vw,44px)}

@media(max-width:1080px){
  .ct-split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px}
}
@media(max-width:900px){
  .ct-ph-bg{top:auto;bottom:0;width:100%;height:64%;opacity:.42;object-position:50% 30%;-webkit-mask-image:linear-gradient(180deg,transparent,#000 50%);mask-image:linear-gradient(180deg,transparent,#000 50%)}
  .ct-ph::after{background:linear-gradient(180deg,var(--ink) 36%,rgba(7,16,28,.5) 72%,rgba(7,16,28,.72))}
  .ct-split{grid-template-columns:minmax(0,1fr)}
  .ct-panel{position:static}
  .ct-ch .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ct-ch .grid3 > :last-child{grid-column:1/-1}
}
@media(max-width:640px){
  .ct-ch .grid3{grid-template-columns:minmax(0,1fr)}
  .ct-ch .grid3 > :last-child{grid-column:auto}
}
@media(max-width:560px){
  .ct-ctx{padding:12px 14px;font-size:14px;gap:8px 12px}
  .ct-ctx-i:first-child{flex:1 1 100%}
  .ct-ctx-ch{min-height:32px;padding:0 12px;font-size:13px}
  .ct-links{gap:2px 24px}
}
@media(prefers-reduced-motion:reduce){
  .ct-fade{transition:none}
  .ct-chk li{animation:none}
}

