/* UXEN — contacto.css · Página /contacto/ (page-contacto.php).
 *
 * Mismos tokens que la portada y el hub de servicios (servicios.css) para que
 * no se sienta «otra página»: azul #2f6ef3 sobre tinta #1a2177, Playfair para
 * titulares, Inter para cuerpo. Todo va bajo `.ct-page` para no pisar header
 * ni footer, que pinta ui.css.
 *
 * Se encola SOLO cuando is_page( 'contacto' ) (functions.php).
 */

.ct-page{
	--bg:#f6f8ff; --surface:#ffffff;
	--fg:#666666; --muted:#8b90a2; --line:rgba(26,33,119,.12); --line2:rgba(26,33,119,.06);
	--accent:#2f6ef3; --accent-br:#1940e5; --accent-soft:#e8effe; --accent-lt:#bcd3ff;
	--ink:#1a2177; --ink-muted:rgba(255,255,255,.72); --ink-line:rgba(255,255,255,.16);
	--grad:radial-gradient(88% 78% at 8% 2%,rgba(47,110,243,.85) 0%,rgba(47,110,243,0) 52%),radial-gradient(82% 90% at 100% 100%,rgba(25,64,229,.92) 0%,rgba(25,64,229,0) 60%),linear-gradient(150deg,#1940e5 0%,#1b2a97 55%,#1a2177 100%);
	--shadow:0 18px 44px rgba(20,26,90,.14); --shadow-sm:0 8px 22px rgba(20,26,90,.10);
	--serif:"Playfair Display",Georgia,serif;
	--sans:"Inter",system-ui,-apple-system,sans-serif;
	--ease:cubic-bezier(.16,1,.3,1);
	background:var(--bg);color:var(--fg);font-family:var(--sans);line-height:1.62
}
.ct-page h2{font-family:var(--serif);font-weight:600;margin:0;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.ct-page p{margin:0}
.ct-page a{text-decoration:none}

/* Hero de interna: el <h1> de ui.css hereda color; aquí lleva la tinta de marca
   (mismo arreglo que en servicios.css). */
.ct-page .uxen-hero__head{background:var(--bg)}
.ct-page .uxen-hero__head .u-h1{color:var(--ink)}
.ct-page .uxen-hero__head .u-eyebrow{color:var(--accent)}
.ct-page .uxen-hero__head .u-lead{color:var(--fg)}
.ct-page .uxen-hero--cover .uxen-hero__head{background:none}

.ct-wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:clamp(20px,5vw,56px)}
.ct-eyebrow{display:inline-block;font:600 .72rem var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.ct-eyebrow--light{color:var(--accent-lt)}
.ct-muted{color:var(--muted)}

/* ---------- Formulario + canales ---------- */
.ct-main{padding-block:clamp(40px,6vw,76px)}
.ct-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:22px;align-items:stretch}
.ct-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);padding:clamp(26px,4vw,46px);scroll-margin-top:100px}
.ct-page .ct-card__h{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-top:12px}
.ct-page .ct-card__p{margin-top:10px;color:var(--fg)}

.ct-page .ct-alert{margin-top:18px;padding:12px 16px;border-radius:12px;background:#fdecec;color:#9b1c1c;font-size:.9rem}

.ct-form{margin-top:26px}
.ct-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ct-field{display:flex;flex-direction:column;gap:7px;margin:0}
.ct-field--full{grid-column:1/-1}
.ct-field span{font:600 .8rem var(--sans);color:var(--ink)}
.ct-field input,.ct-field textarea{width:100%;box-sizing:border-box;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:400 .95rem var(--sans);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.ct-field textarea{resize:vertical;min-height:140px}
.ct-field input:focus,.ct-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}

.ct-form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:22px}
.ct-legal{font-size:.82rem;color:var(--muted)}
.ct-legal a{color:var(--accent);text-decoration:underline}

.ct-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:12px;font:600 .9rem var(--sans);border:1px solid transparent;cursor:pointer;transition:.25s var(--ease)}
.ct-btn svg{width:18px;height:18px;flex:0 0 auto}
.ct-btn--pri{background:var(--accent);color:#fff;box-shadow:0 8px 22px rgba(47,110,243,.28)}
.ct-btn--pri:hover{background:var(--accent-br);color:#fff;transform:translateY(-1px)}
.ct-btn--ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.ct-btn--ghost:hover{border-color:var(--accent);color:var(--accent)}

/* Estado «enviado» */
.ct-card:has(.ct-ok){display:flex;align-items:center;justify-content:center}
.ct-ok{text-align:center;padding-block:clamp(20px,4vw,40px)}
.ct-ok__ic{display:inline-grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--accent-soft);color:var(--accent)}
.ct-ok__ic svg{width:28px;height:28px}
.ct-ok h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:18px}
.ct-ok p{margin:12px auto 24px;max-width:44ch}

/* Panel de canales: la tarjeta en degradado de marca del home. */
.ct-side{display:flex;flex-direction:column;border-radius:22px;background:var(--grad);color:#fff;padding:clamp(26px,4vw,40px);box-shadow:var(--shadow)}
.ct-page .ct-side__h{color:#fff;font-size:clamp(1.5rem,2.6vw,2rem);margin-top:12px}
.ct-chan{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.ct-chan a{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--ink-line);border-radius:14px;background:rgba(255,255,255,.06);color:#fff;transition:.2s var(--ease)}
.ct-chan a:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
.ct-chan small{display:block;font-size:.74rem;letter-spacing:.04em;color:var(--ink-muted)}
.ct-chan b{display:block;font-weight:600;font-size:.98rem;word-break:break-word}
.ct-chan__ic{flex:0 0 42px;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.14)}
.ct-chan__ic svg{width:20px;height:20px}
.ct-chan__ic--wa{background:#25d366}
.ct-urg{margin-top:auto;padding-top:22px;display:flex;align-items:flex-start;gap:10px;font-size:.86rem;color:var(--ink-muted)}
.ct-urg svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px;color:#fff}
.ct-urg b{color:#fff}
.ct-urg:hover span{color:#fff}

/* ---------- ¿Qué necesitas? (accesos por necesidad) ---------- */
.ct-rutas{padding-top:clamp(8px,2vw,20px)}
.ct-rutas__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ct-ruta{display:flex;align-items:center;gap:14px;padding:18px 18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);transition:.25s var(--ease)}
.ct-ruta:hover{border-color:var(--accent);transform:translateY(-2px)}
.ct-ruta__ic{flex:0 0 42px;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent)}
.ct-ruta__ic svg{width:20px;height:20px}
.ct-ruta--urg .ct-ruta__ic{background:#fdecec;color:#c62828}
.ct-ruta__txt{flex:1;min-width:0}
.ct-ruta__txt b{display:block;font-weight:600;font-size:.96rem}
.ct-ruta__txt small{display:block;font-size:.82rem;line-height:1.4;color:var(--muted)}
.ct-ruta__go{color:var(--accent)}
.ct-ruta__go svg{width:17px;height:17px;display:block}

/* ---------- Teléfonos por sede (sólo las que operan) ---------- */
.ct-sedes{padding-block:clamp(40px,6vw,76px);background:var(--surface);border-top:1px solid var(--line2)}
.ct-head{margin-bottom:clamp(22px,3vw,34px)}
.ct-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin-top:12px}
.ct-head--row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.ct-link{display:inline-flex;align-items:center;gap:8px;font:600 .9rem var(--sans);color:var(--accent)}
.ct-link svg{width:17px;height:17px}
.ct-link:hover{color:var(--accent-br)}
.ct-sedes__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:16px}
.ct-sede{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--bg)}
.ct-page .ct-sede__h{margin:0 0 4px;font:600 1.12rem var(--serif);letter-spacing:-.01em;color:var(--ink)}
.ct-sede__h a{color:inherit}
.ct-sede__h a:hover{color:var(--accent)}
.ct-page .ct-sede__row{display:flex;gap:10px;font-size:.87rem;line-height:1.5}
.ct-sede__row svg{flex:0 0 16px;width:16px;height:16px;margin-top:3px;color:var(--accent)}
.ct-sede__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:8px}
.ct-btn--sm{padding:9px 14px;font-size:.84rem;border-radius:10px}
.ct-btn--sm svg{width:16px;height:16px}
.ct-btn--wa{background:#25d366;color:#fff}
.ct-btn--wa:hover{background:#1eb658;color:#fff}

/* ---------- Preguntas frecuentes ---------- */
.ct-faq{padding-block:clamp(48px,7vw,96px);scroll-margin-top:90px}
.ct-faq__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(24px,5vw,72px);align-items:start}
.ct-faq__intro{position:sticky;top:110px}
.ct-faq__intro h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin-top:12px}
.ct-page .ct-faq__intro p{margin:14px 0 24px;max-width:36ch}
.ct-faq__list{display:grid;gap:10px}
.ct-qa{border:1px solid var(--line);border-radius:16px;background:var(--surface);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.ct-qa[open]{border-color:var(--accent-lt);box-shadow:var(--shadow-sm)}
.ct-qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;cursor:pointer;list-style:none;font-weight:600;font-size:1rem;color:var(--ink)}
.ct-qa summary::-webkit-details-marker{display:none}
.ct-qa summary svg{flex:0 0 20px;width:20px;height:20px;color:var(--accent);transition:transform .25s var(--ease)}
.ct-qa[open] summary svg{transform:rotate(45deg)}
.ct-qa summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:16px}
.ct-page .ct-qa p{padding:0 22px 20px;max-width:68ch}
.ct-qa p a{color:var(--accent);text-decoration:underline}

@media (max-width:1024px){
	.ct-grid,.ct-faq__grid{grid-template-columns:1fr}
	.ct-rutas__grid{grid-template-columns:repeat(2,1fr)}
	.ct-faq__intro{position:static}
}
@media (max-width:640px){
	.ct-form__grid,.ct-rutas__grid{grid-template-columns:1fr}
	.ct-form__foot .ct-btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
	.ct-btn,.ct-chan a,.ct-ruta,.ct-qa,.ct-qa summary svg{transition:none}
	.ct-btn:hover,.ct-chan a:hover,.ct-ruta:hover{transform:none}
}