/* ============================================================
   CONTACTOS PAGE - Design System v2
   ============================================================ */

main { display: block; } /* Ensure sticky/fixed elements work correctly by overriding base.css flex */

/* ── Page Hero blobs ─────────────────────────────────────────── */
.page-hero__blob-1 {
    width: 440px; height: 440px;
    background: radial-gradient(circle at 40% 40%, var(--terra-100), transparent 70%);
    top: -100px; right: -80px;
    opacity: 0.7;
}

.page-hero__blob-2 {
    width: 240px; height: 240px;
    background: var(--sage-100);
    bottom: -80px; left: 12%;
    opacity: 0.4;
}

/* ── Channels ───────────────────────────────────────────── */
.channels { padding: 48px 0 80px; }
.channels__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .channels__grid { grid-template-columns: 1fr; } }

.channel {
  padding: 32px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--surface);
  transition: all var(--dur-base); display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; color: inherit;
  min-width: 0; /* Allow grid items to shrink below content size */
  user-select: text;
}
.channel:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.channel__type { font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--primary); font-weight: 500; }
.channel__val {
  font-size: 1.4rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.25; color: var(--text);
  overflow-wrap: anywhere; word-break: break-word;
  user-select: all;
}
.channel__hint { font-size: 0.86rem; color: var(--text-muted); line-height: 1.6; margin-top: 4px; flex-grow: 1; }
.channel__arrow { margin-top: 8px; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.channel__arrow::after { content: '→'; transition: transform var(--dur-fast); }
.channel:hover .channel__arrow::after { transform: translateX(4px); }

/* ── Main Block ─────────────────────────────────────────── */
.main-block { padding: 24px 0 120px; }
.main-block__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 960px) { .main-block__grid { grid-template-columns: 1fr; } }

.form-card { padding: 48px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.form-card h2 { font-size: 2rem; font-weight: 300; letter-spacing: -0.02em; line-height: 1.15; }
.form-card h2 em { font-style: italic; color: var(--primary); font-weight: 300; }
.form-card__lead { font-size: 0.95rem; color: var(--text-muted); line-height: 1.7; margin-top: 14px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.field { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.field label { font-size: 0.78rem; letter-spacing: 0.05em; color: var(--text); font-weight: 500; }
.field input, .field textarea {
  appearance: none; font-family: inherit; font-size: 0.95rem; color: var(--text);
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--cream-50); transition: all var(--dur-fast);
}
.field input:focus, .field textarea:focus { 
    outline: 0; border-color: var(--primary); background: var(--surface); 
    box-shadow: 0 0 0 3px var(--terra-50); 
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.field__note { font-size: 0.76rem; color: var(--text-muted); margin-top: 4px; }

/* ── Error States ───────────────────────────────────────── */
.cf-error { font-size: 0.76rem; color: #d64545; min-height: 18px; margin-top: 2px; }
.field input.is-invalid, .field textarea.is-invalid { border-color: #d64545; background: #fffafb; }
.cf-result { padding: 14px 16px; border-radius: var(--radius-sm); font-size: 0.9rem; margin-top: 20px; }
.cf-result--success { background: var(--sage-50); color: var(--sage-700); border: 1px solid var(--sage-100); }
.cf-result--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ── Consent & Submit ───────────────────────────────────── */
.consent { margin-top: 24px; display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: var(--cream-50); border-radius: var(--radius-md); border: 1px solid transparent; transition: border-color var(--dur-fast), background var(--dur-fast); }
.consent--error { border-color: #d64545; background: #fffafb; }
.consent input { margin-top: 3px; accent-color: var(--primary); }
.consent label { font-size: 0.82rem; color: var(--text-body); line-height: 1.55; }
.consent a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.form-card__submit { margin-top: 28px; display: flex; align-items: center; gap: 16px; justify-content: flex-end; }

/* ── Sidebar Info ───────────────────────────────────────── */
.info { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 100px; }
@media (max-width: 960px) { .info { position: static; } }
.info-card { padding: 28px; background: var(--cream-100); border: 1px solid var(--cream-300); border-radius: var(--radius-lg); }
.info-card h3 { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--primary); font-weight: 500; }
.info-card__body { margin-top: 16px; }

.clinic-list { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.clinic-list li { padding-left: 20px; position: relative; font-size: 0.9rem; line-height: 1.6; }
.clinic-list li::before { content:''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.clinic-list b { display: block; color: var(--text); font-weight: 500; }
.clinic-list span { color: var(--text-muted); font-size: 0.82rem; }

.response { background: var(--sage-50); border-color: var(--sage-100); }
.response h3 { color: var(--sage-700); }
.response p { font-size: 0.92rem; color: var(--text-body); line-height: 1.7; margin-top: 8px; }

/* ── Toast ──────────────────────────────────────────────── */
/* display:none removes the toast from the GPU compositor when hidden,
   avoiding a fixed-element stacking conflict with the header on Android Chrome. */
.toast {
  position: fixed; bottom: 32px; left: 50%;
  transform: translateX(-50%);
  background: var(--ink-900); color: #fff; padding: 16px 24px;
  border-radius: var(--radius-pill); font-size: 0.9rem; font-weight: 400;
  display: none; pointer-events: none; z-index: 200;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}
.toast.is-shown { display: block; animation: toast-in 0.3s var(--ease-out) forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.toast b { color: var(--sage-300); font-weight: 500; margin-right: 6px; }

@media (max-width: 520px) {
    .form-card { padding: 32px 20px; }
    .channel { padding: 24px 20px; }
}