/* =====================================================================
   contacto.html — estilos propios (solo variables de site.css)
   Canales directos + tarjeta de embarque estática. Sin formularios.
   ===================================================================== */

.ct{padding-top:clamp(28px,5vw,64px)}
.ct__copy{display:grid;gap:20px;align-content:start;min-width:0}
.ct__title{font-size:clamp(2.375rem,4.4vw,3.75rem);line-height:1.04;max-width:12ch}
.ct__label{margin-top:12px}

/* ---------- canales (filas grandes clicables) ---------- */
.ch-list li{min-width:0}
.ch-list .row{grid-template-columns:44px minmax(0,1fr) 16px;gap:16px;align-items:start;padding:20px 12px;margin-inline:-12px;color:var(--text)}
.ch__ico{width:44px;height:44px;display:grid;place-items:center;border:var(--hair);border-radius:var(--r-md);background:#fff;color:var(--primary);font-size:19px;transition:border-color .2s,background-color .2s}
.ch--wa .ch__ico{background:var(--accent);border-color:var(--accent);color:var(--text)}
.ch__body{display:grid;gap:4px;min-width:0}
.ch__name{font:600 1.1875rem/1.25 var(--font-display);letter-spacing:-.01em;overflow-wrap:anywhere}
.ch--wa .ch__name{font-size:1.375rem}
.ch__text{color:var(--muted);font-size:.9375rem;line-height:1.5}
.ch-list .row__data{grid-column:auto;text-align:left;margin-top:6px}
.ch__go{align-self:center;color:var(--muted);font-size:14px;transition:transform .22s var(--ease-out),color .2s}
@media (min-width:900px){
  .ch-list .row{grid-template-columns:48px minmax(0,1fr) 16px;align-items:start;padding:22px 16px;margin-inline:-16px}
  .ch-list .row__data{grid-column:auto;text-align:left}
  .ch__ico{width:48px;height:48px;font-size:20px}
}
@media (hover:hover){
  .ch-list .row:hover .ch__go{transform:translateX(3px);color:var(--primary)}
  .ch-list .row:hover .ch__ico{border-color:var(--primary)}
  .ch-list .ch--wa:hover .ch__ico{background:var(--accent-hover);border-color:var(--accent-hover)}
}
.ch-list .row:focus-visible{outline-offset:-3px}

/* ---------- escenario de la tarjeta ---------- */
.pass-stage{position:relative;min-width:0;background-color:var(--surface);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px;background-position:-1px -1px;border-block:var(--hair);margin-inline:calc(var(--gutter) * -1);padding:24px var(--gutter) 28px}
.pass-stage__cap{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px}
@media (min-width:768px){.pass-stage{margin-inline:0;border:var(--hair);border-radius:var(--r-lg);padding:clamp(24px,3vw,36px)}}
@media (min-width:1024px){.pass-stage{position:sticky;top:calc(var(--header-h) + 24px)}}

/* ---------- tarjeta de embarque (ajustes sobre .pass) ---------- */
.ct .pass{box-shadow:var(--shadow-hover)}
.ct .pass__head{flex-wrap:wrap;row-gap:6px}
.pass__dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--primary-light);margin-right:8px;vertical-align:1px}
.ct .pass__code{font-size:clamp(1.25rem,5.4vw,1.75rem);white-space:nowrap}
.pass__code--end{text-align:right}
.ct .pass__route{padding-bottom:14px}
.ct .pass__data > div{min-width:0;padding-top:12px;border-top:var(--hair)}
.ct .pass__data dd{overflow-wrap:anywhere}
.ct .pass__data dd.opt{color:var(--muted);font-weight:500}
@media (min-width:560px){.ct .pass__data{grid-template-columns:repeat(3,1fr)}}
.pass__msg i{color:var(--accent);font-size:.95em}
.pass__msg .fill{display:inline-block;width:8ch;max-width:40%;height:1em;border-bottom:1px dashed var(--line-strong);vertical-align:-3px}
.ct .pass .btn{white-space:normal;line-height:1.25;padding-block:12px}
.pass__note{display:flex;align-items:flex-start;gap:8px;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.pass__note .ico{width:18px;height:18px;color:var(--primary);margin-top:1px}

/* ---------- franja de confianza ---------- */
.trust{padding-block:28px}
.trust__list{display:grid;margin:0}
.trust__list li{display:flex;align-items:center;gap:12px;padding:12px 0;color:var(--text)}
.trust__list li + li{border-top:var(--hair)}
.trust__list .ico{width:20px;height:20px;color:var(--primary)}
@media (min-width:900px){
  .trust{padding-block:36px}
  .trust__list{display:flex;justify-content:center}
  .trust__list li{padding:4px 28px}
  .trust__list li + li{border-top:0;border-left:var(--hair)}
}