/* Veriko landing — Contacto (/contact). Hereda base/shell/.hero/.sec/.cta de home.css.
   Propio: hero centrado compacto, cards de canal (mailto), lista de autoservicio. Tokens-only. */

/* Ritmo vertical compacto (mismo criterio que el resto del slice). */
.contact-page .hero{padding:44px 0 44px}
.contact-page .sec{padding:40px 0}
@media(min-width:768px){.contact-page .hero{padding:56px 0 52px}.contact-page .sec{padding:52px 0}}
@media(min-width:1100px){.contact-page .hero{padding:64px 0 60px}.contact-page .sec{padding:60px 0}}

/* Hero centrado + degradado azul de marca (glow radial desde el borde superior central). */
.contact-page .hero{position:relative;overflow:hidden;background:radial-gradient(60% 70% at 50% 0%,var(--color-primary-light),transparent 65%),linear-gradient(180deg,var(--color-surface),var(--color-surface-sunken) 85%)}
.contact-page .hero .lead{margin-left:auto;margin-right:auto;max-width:54ch}

/* A11y: eyebrow gris-terciario no alcanza 4.5:1 sobre el hero tintado ni la sección hundida → text-secondary. */
.contact-page .eyebrow{color:var(--color-text-secondary)}

/* Canales: botones redondos con el logo OFICIAL de cada app + etiqueta abajo. Reemplaza el directorio.
   Crece agregando más <a class="channel" data-ch="…">. */
.contact-channels{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 26px;margin-top:6px}
.channel{display:flex;flex-direction:column;align-items:center;gap:9px;width:84px;text-align:center}
.ch-btn{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.ch-ic{width:26px;height:26px;fill:currentColor}
.channel:hover .ch-btn{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--color-border-strong)}
.ch-label{font-size:12.5px;font-weight:600;color:var(--color-text-secondary)}
/* Colores OFICIALES de marca de cada canal (no son tokens del tema; son los colores propios de cada app). */
.channel[data-ch="mail"] .ch-ic,.channel[data-ch="phone"] .ch-ic{color:var(--color-primary)}
.channel[data-ch="whatsapp"] .ch-ic{color:#25D366}
.channel[data-ch="telegram"] .ch-ic{color:#229ED9}
/* Foco visible en el círculo (el <a> envuelve círculo + etiqueta). */
.channel:focus-visible{outline:none}
.channel:focus-visible .ch-btn{outline:2px solid var(--color-border-focus);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.ch-btn{transition:none}.channel:hover .ch-btn{transform:none}}

/* Formulario de contacto (SIN CABLEAR; estilos listos para conectar). */
.contact-form{max-width:640px;margin:0 auto}
.cf-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.cf-grid{grid-template-columns:1fr 1fr}}
.cf-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.cf-field.cf-full{grid-column:1 / -1}
.cf-field label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--color-text-primary)}
.req{color:var(--color-danger-text);font-weight:700}
.cf-opt{font-size:12px;font-weight:500;color:var(--color-text-tertiary)}
/* Borde con --color-text-tertiary (no border-strong): un límite de control necesita ≥3:1 (WCAG 1.4.11);
   border-strong (#d4d4d4) solo da 1.5:1 sobre blanco, text-tertiary (#737373) da ≈4.4:1. */
.cf-input,.cf-select,.cf-textarea{width:100%;font:inherit;font-size:15px;color:var(--color-text-primary);background:var(--color-surface);border:1px solid var(--color-text-tertiary);border-radius:var(--radius-lg);padding:11px 13px}
.cf-input::placeholder,.cf-textarea::placeholder{color:var(--color-text-tertiary)}
.cf-input:focus,.cf-select:focus,.cf-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}
.cf-textarea{min-height:132px;resize:vertical;line-height:1.5}
.cf-select-wrap{position:relative}
.cf-select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer}
.cf-select-wrap::after{content:"";position:absolute;right:15px;top:50%;width:8px;height:8px;border-right:2px solid var(--color-text-tertiary);border-bottom:2px solid var(--color-text-tertiary);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.cf-foot{margin-top:18px;display:flex;justify-content:flex-end}
.cf-privacy{margin:14px 0 0;font-size:12.5px;color:var(--color-text-tertiary);text-align:center}
@media(max-width:479px){.cf-foot .btn{width:100%}}

/* Autoservicio: tarjetas-enlace (docs / estado / cuenta). Ajustadas a su contenido, inline las que quepan. */
.self-links{display:flex;flex-wrap:wrap;gap:12px}
.self-link{flex:0 1 340px;display:flex;align-items:center;gap:14px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:14px 16px;transition:border-color .15s ease,box-shadow .15s ease}
.self-link:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-sm)}
.sl-ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--color-primary-light);flex:none}
.sl-ico .ic{width:20px;height:20px;color:var(--color-primary)}
.sl-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.sl-txt strong{font-size:15px;font-weight:600;color:var(--color-text-primary)}
.sl-txt span{font-size:13.5px;color:var(--color-text-secondary)}
.sl-arrow{width:18px;height:18px;color:var(--color-text-tertiary);flex:none;transition:transform .15s ease}
.self-link:hover .sl-arrow{transform:translateX(3px);color:var(--color-primary)}
@media(prefers-reduced-motion:reduce){.self-link,.sl-arrow{transition:none}.self-link:hover .sl-arrow{transform:none}}