/* =====================================================================
   p-contacto.css — /contacto/ · efecto firma «Arma tu mensaje» + «Abierto ahora / Cerrado»
   Sin JS: la burbuja muestra el mensaje base y el estado de horario no aparece ([hidden]).
   ===================================================================== */
.ctc-hero .phero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.ctc-hero .h1{font-size:clamp(2.6rem,4.6vw,4.7rem)}
[data-ctc-st][hidden]{display:none!important}
.ctc-st{gap:.5rem}
.ctc-st i,.ctc-st-mini i{position:relative;width:9px;height:9px;border-radius:50%;background:var(--niebla);flex:none}
.ctc-st small{color:var(--niebla);font-size:.8rem}
.is-abierto i{background:var(--wa)}
.is-abierto.ctc-st{box-shadow:inset 0 0 0 1px rgba(37,211,102,.55)}
@media (prefers-reduced-motion:no-preference){.is-abierto i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--wa);animation:recPulse 1.6s ease-out infinite}}

/* ---------- tarjetas de contacto (hero) ---------- */
.ctc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.ctc-cards>li{display:flex}
.ctc-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;width:100%;padding:1.2rem 1.2rem 1.25rem;border:0;border-radius:22px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff;font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:background-color .3s,transform .4s var(--ease),box-shadow .3s}
.ctc-card--h{cursor:default}
a.ctc-card:hover,button.ctc-card:hover{background:rgba(255,255,255,.1);transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(37,244,238,.5)}
.ctc-ic{display:grid;place-items:center;width:44px;height:44px;margin-bottom:.45rem;border-radius:14px;background:rgba(37,244,238,.12)}
.ctc-ic svg{width:22px;height:22px;fill:none;stroke:var(--cian);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ctc-ic--wa{background:var(--wa)}
.ctc-ic--wa svg{fill:#fff;stroke:none}
.ctc-card small{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cian)}
.ctc-card>b{font:400 clamp(1.35rem,1.9vw,1.7rem)/1.05 var(--f-display);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.ctc-card>span{font-size:.86rem;line-height:1.4;color:var(--niebla)}
.ctc-st-mini{display:inline-flex;align-items:center;gap:.45rem;margin-top:.45rem;padding:.3rem .6rem;border-radius:999px;background:rgba(0,0,0,.25);font-style:normal;font-size:.8rem}
.ctc-st-mini b{font-weight:700}
.fx .ctc-cards>li{animation:fadeUp 1s var(--ease) both}
.fx .ctc-cards>li:nth-child(2){animation-delay:.1s}.fx .ctc-cards>li:nth-child(3){animation-delay:.2s}.fx .ctc-cards>li:nth-child(4){animation-delay:.3s}

/* ---------- arma tu mensaje ---------- */
.ctc-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.4rem,5vw,5rem);align-items:end;margin-bottom:clamp(2rem,4vw,3rem)}
.ctc-top .head{margin-bottom:0}
.ctc-arma{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,4vw,4rem);align-items:start}
.ctc-chat{position:sticky;top:calc(var(--hdr) + 1.4rem);display:flex;flex-direction:column;gap:1rem}
.ctc-chat-h{font-size:clamp(1.7rem,2.4vw,2.2rem);color:var(--estudio)}
.ctc-chat-h em{font-style:normal;color:var(--magenta)}
.ctc-phone{position:relative;overflow:hidden;border-radius:30px;background:#EFE7DC;box-shadow:0 0 0 8px var(--estudio),0 40px 70px -30px rgba(1,47,74,.55)}
.ctc-segs{position:absolute;left:12px;right:12px;top:8px;z-index:2;display:flex;gap:4px}
.ctc-segs i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden}
.ctc-segs i::after{content:"";display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.ctc-segs i.on::after{transform:scaleX(1)}
.ctc-bar{display:flex;align-items:center;gap:.7rem;padding:1.3rem 1rem .8rem;background:#075E54;color:#fff}
.ctc-av{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--pcd);flex:none}
.ctc-av img{width:60%;height:auto}
.ctc-who{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.ctc-who b{font-weight:700;font-size:1rem}
.ctc-who small{font-size:.78rem;color:rgba(255,255,255,.82)}
.ctc-body{display:flex;flex-direction:column;gap:.8rem;min-height:300px;padding:1rem .9rem 1.2rem;background:#EFE7DC radial-gradient(rgba(1,47,74,.06) 1px,transparent 1.5px) 0 0/14px 14px}
.ctc-sys{align-self:center;padding:.3rem .7rem;border-radius:8px;background:#FFF3C4;color:#5B4A12;font-size:.74rem;font-weight:600;text-align:center}
.ctc-msg{position:relative;align-self:flex-end;max-width:92%;padding:.75rem .85rem 1.55rem;border-radius:14px 4px 14px 14px;background:#DCF8C6;color:#0B2B1A;font-size:.94rem;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.12)}
.ctc-txt{white-space:pre-line}
.ctc-caret{display:none;width:2px;height:1.05em;margin-left:1px;vertical-align:-2px;background:#0B2B1A}
.ctc-msg.is-typing .ctc-caret{display:inline-block}
@media (prefers-reduced-motion:no-preference){.ctc-msg.is-typing .ctc-caret{animation:ctcCaret .8s steps(1) infinite}}
@keyframes ctcCaret{50%{opacity:0}}
.ctc-meta{position:absolute;right:.7rem;bottom:.4rem;display:inline-flex;align-items:center;gap:.25rem;font-size:.7rem;color:#2F5C44}
.ctc-meta svg{width:16px;height:12px;fill:none;stroke:#8696A0;stroke-width:2;transition:stroke .4s}
.ctc-msg.is-listo .ctc-meta svg{stroke:#34B7F1}
.ctc-input{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem .8rem;background:#EFE7DC}
.ctc-input span{flex:1;padding:.6rem .9rem;border-radius:999px;background:#fff;color:#8696A0;font-size:.88rem}
.ctc-input i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#00A884}
.ctc-input svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.4}
.ctc-chat .btn-love{justify-content:flex-start}
.ctc-nota{font-size:.9rem;line-height:1.5;color:var(--gris)}
.ctc-note{margin-top:1.6rem;max-width:none}

/* ---------- zonas y redes ---------- */
.ctc-zonas .zchips--big li{background:var(--estudio)}
.ctc-zonas .zchips li.hq{background:var(--cian)}
.ctc-zbtn{margin-top:1.6rem}
.ctc-redes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.ctc-redes a{display:flex;flex-direction:column;gap:.35rem;height:100%;padding:1.3rem 1.3rem 1.4rem;border-radius:22px;background:var(--hielo);box-shadow:inset 0 0 0 1px rgba(1,47,74,.08);color:var(--estudio);text-decoration:none;transition:transform .4s var(--ease),box-shadow .3s}
.ctc-redes a:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1.5px var(--pcd)}
.ctc-redes small{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pcd)}
.ctc-redes b{font:400 clamp(1.3rem,1.8vw,1.6rem)/1.1 var(--f-display);letter-spacing:.01em;overflow-wrap:anywhere}
.ctc-redes span{font-size:.9rem;color:var(--gris)}
.ctc-redes strong{color:var(--magenta)}

/* hoy en la tabla de horario del NAP */
.hours div.is-hoy{position:relative;padding-left:.9rem}
.hours div.is-hoy::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--cian)}
.hours div.is-hoy dt{color:#fff;font-weight:700}

@media (max-width:1023px){
  .ctc-hero .phero-grid,.ctc-top,.ctc-arma{grid-template-columns:minmax(0,1fr)}
  .ctc-chat{position:static}
  .ctc-redes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .ctc-cards,.ctc-redes{grid-template-columns:minmax(0,1fr)}
  .ctc-body{min-height:260px}
}
/* medida de texto en escritorio (45-95 caracteres por renglon) */
.ctc-note{max-width:84ch}