/*
 * Страница contacto. Порт CSS макета (files_harry/contacto.html, 78–179).
 * Грузится только на странице contact. Всё под .ita-contacto; шапку/подвал
 * (chrome.css) не трогает. Примитивы заскоуплены — самодостаточно.
 */

/* ---------- сбросы + примитивы ---------- */
.ita-contacto,.ita-contacto *,.ita-contacto *::before,.ita-contacto *::after{ box-sizing:border-box; }
.ita-contacto canvas,.ita-contacto img{ display:block; max-width:100%; }
.ita-contacto p{ margin:0; }
.ita-contacto h1,.ita-contacto h2,.ita-contacto h3{ font-family:var(--wp--preset--font-family--display),sans-serif;
	font-weight:800; line-height:1.03; letter-spacing:-.03em; margin:0; }
.ita-contacto h1{ font-size:clamp(2.4rem,5.6vw,4.4rem); text-transform:uppercase; }
.ita-contacto h2{ font-size:clamp(1.7rem,3.1vw,2.6rem); text-transform:uppercase; }
.ita-contacto h3{ font-size:1.05rem; font-weight:700; letter-spacing:.01em; }
.ita-contacto .eyebrow{ font-family:var(--wp--preset--font-family--mono),monospace; font-size:.68rem;
	letter-spacing:.3em; text-transform:uppercase; color:var(--gold-lt); display:flex; align-items:center; gap:.9rem; margin:0; }
.ita-contacto .eyebrow::before{ content:""; width:34px; height:1px; background:currentColor; flex:none; }
.ita-contacto .lead{ color:#cfcbc4; font-size:clamp(1rem,1.3vw,1.12rem); max-width:60ch; }
.ita-contacto .muted{ color:var(--slate); }

/* ---------- page-head + 3D ---------- */
.ita-contacto .page-head{ position:relative; min-height:74svh; display:flex; align-items:flex-end; padding-top:76px; overflow:hidden; }
.ita-contacto #gl{ position:absolute; inset:0; z-index:0; }
.ita-contacto .page-head::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
	background:radial-gradient(105% 90% at 2% 55%, rgba(8,9,10,.96) 0%, rgba(8,9,10,.76) 28%, rgba(8,9,10,.18) 56%, rgba(8,9,10,0) 74%),
		linear-gradient(180deg, rgba(8,9,10,.9) 0%, rgba(8,9,10,.05) 20%, rgba(8,9,10,0) 46%, var(--ink) 100%); }
.ita-contacto .glow{ position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen;
	background:radial-gradient(46% 44% at 76% 36%, rgba(255,255,255,.32) 0%, rgba(255,255,255,.09) 46%, rgba(255,255,255,0) 74%); }
.ita-contacto .page-head .shell{ position:relative; z-index:2; padding-block:4rem 4.5rem; }
.ita-contacto .page-head h1{ margin:1.3rem 0 1.4rem; max-width:16ch; text-shadow:0 4px 40px rgba(0,0,0,.6); }
.ita-contacto .page-head h1 em{ font-style:normal; color:var(--gold-lt); display:block; }
.ita-contacto .page-head .lead{ text-shadow:0 2px 24px rgba(0,0,0,.8); }

/* ---------- secciones ---------- */
.ita-contacto section{ padding-block:clamp(4rem,8vw,7rem); }
.ita-contacto .sec-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:2rem 4rem; align-items:end; margin-bottom:3rem; }
.ita-contacto .sec-head h2{ margin-top:1rem; }
@media(max-width:860px){ .ita-contacto .sec-head{ grid-template-columns:1fr; } }

/* ---------- tarjetas de contacto ---------- */
.ita-contacto .cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.ita-contacto .card{ background:linear-gradient(180deg,var(--ink-2),#0b0d0f); border:1px solid var(--line-soft);
	padding:1.9rem 1.6rem; position:relative; overflow:hidden; transition:.35s; display:block; }
.ita-contacto .card::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px;
	background:linear-gradient(90deg,var(--gold),var(--gold-pale)); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.2,.7,.3,1); }
.ita-contacto .card:hover{ transform:translateY(-4px); border-color:var(--line); background:linear-gradient(180deg,var(--ink-3),#0b0d0f); }
.ita-contacto .card:hover::before{ transform:scaleX(1); }
.ita-contacto .card svg{ width:22px; height:22px; stroke:var(--gold-lt); fill:none; stroke-width:1.3; margin-bottom:1.3rem; }
.ita-contacto .card small{ display:block; font-family:var(--wp--preset--font-family--mono),monospace; font-size:.6rem;
	letter-spacing:.22em; text-transform:uppercase; color:var(--slate); margin-bottom:.5rem; }
.ita-contacto .card b{ font-family:var(--wp--preset--font-family--display); font-weight:700; font-size:1.05rem; letter-spacing:.01em; display:block; }
.ita-contacto .card span{ display:block; color:var(--slate); font-size:.86rem; margin-top:.5rem; }
@media(max-width:1020px){ .ita-contacto .cards{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .ita-contacto .cards{ grid-template-columns:1fr; } }

/* ---------- formulario ---------- */
.ita-contacto .form-wrap{ background:#0a0b0d; border-block:1px solid var(--line-soft); }
.ita-contacto .grid-form{ display:grid; grid-template-columns:1fr 1.15fr; gap:4rem; }
@media(max-width:960px){ .ita-contacto .grid-form{ grid-template-columns:1fr; gap:3rem; } }
.ita-contacto .quote{ font-family:var(--wp--preset--font-family--display); font-weight:700; font-size:clamp(1.5rem,2.6vw,2.2rem);
	line-height:1.16; letter-spacing:-.02em; max-width:19ch; }
.ita-contacto .quote span{ color:var(--gold-lt); }
.ita-contacto .steps{ list-style:none; margin:2.6rem 0 0; padding:0; display:grid; gap:1.5rem; counter-reset:s; }
.ita-contacto .steps li{ display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:start; counter-increment:s; }
.ita-contacto .steps li::before{ content:"0" counter(s); font-family:var(--wp--preset--font-family--mono),monospace; font-size:.72rem;
	letter-spacing:.16em; color:var(--gold-lt); border:1px solid var(--line); width:38px; height:38px; display:grid; place-items:center; }
.ita-contacto .steps b{ display:block; font-family:var(--wp--preset--font-family--display); font-weight:700; font-size:.95rem; letter-spacing:.02em; text-transform:uppercase; }
.ita-contacto .steps p{ color:var(--slate); font-size:.9rem; margin-top:.25rem; }

.ita-contacto form{ display:grid; gap:1.1rem; }
.ita-contacto .f2{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media(max-width:560px){ .ita-contacto .f2{ grid-template-columns:1fr; } }
.ita-contacto label{ display:block; font-family:var(--wp--preset--font-family--mono),monospace; font-size:.62rem;
	letter-spacing:.2em; text-transform:uppercase; color:var(--slate); margin-bottom:.55rem; }
.ita-contacto input,.ita-contacto textarea,.ita-contacto select{ width:100%; background-color:#0e1013; border:1px solid var(--line-soft);
	color:var(--bone); padding:.95rem 1.05rem; font:inherit; font-size:.95rem; transition:.25s; border-radius:2px; }
.ita-contacto input:focus,.ita-contacto textarea:focus,.ita-contacto select:focus{ outline:none; border-color:var(--gold); background-color:#12151a; }
/* select под стиль сайта: свой шеврон вместо нативной стрелки */
.ita-contacto select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; padding-right:2.8rem;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d9b64a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 1.05rem center; background-size:16px; }
.ita-contacto select::-ms-expand{ display:none; }
.ita-contacto select option{ background:#0e1013; color:var(--bone); }

/* Кастомный дропдаун (JS): нативный список ОС не красится, поэтому рисуем свой.
   Нативный <select> остаётся в форме (значение + фолбэк без JS), просто скрыт. */
.ita-contacto .sel{ position:relative; }
.ita-contacto .sel .sel-native{ position:absolute; width:1px; height:1px; padding:0; margin:0; opacity:0;
	overflow:hidden; clip:rect(0 0 0 0); border:0; pointer-events:none; }
.ita-contacto .sel-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
	text-align:left; background-color:#0e1013; border:1px solid var(--line-soft); color:var(--bone);
	padding:.95rem 1.05rem; font:inherit; font-size:.95rem; border-radius:2px; cursor:pointer; transition:.25s; }
.ita-contacto .sel-btn:hover{ border-color:var(--line); }
.ita-contacto .sel.open .sel-btn,.ita-contacto .sel-btn:focus-visible{ border-color:var(--gold); background-color:#12151a; outline:none; }
.ita-contacto .sel-btn svg{ flex:none; width:16px; height:16px; fill:none; stroke:var(--gold-lt); stroke-width:1.8;
	stroke-linecap:round; stroke-linejoin:round; transition:transform .25s; }
.ita-contacto .sel.open .sel-btn svg{ transform:rotate(180deg); }
.ita-contacto .sel-list{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:6; margin:0; padding:.35rem;
	list-style:none; background:#0e1013; border:1px solid var(--line); border-radius:2px; max-height:260px; overflow-y:auto;
	box-shadow:0 24px 50px -22px rgba(0,0,0,.85); opacity:0; visibility:hidden; transform:translateY(-6px);
	transition:opacity .2s ease, transform .2s ease, visibility 0s .2s; }
.ita-contacto .sel.open .sel-list{ opacity:1; visibility:visible; transform:none; transition:opacity .2s ease, transform .2s ease; }
.ita-contacto .sel-opt{ padding:.7rem .8rem; font-size:.92rem; color:#cfcbc4; cursor:pointer; border-radius:2px; transition:.15s; }
.ita-contacto .sel-opt:hover,.ita-contacto .sel-opt.active{ background:var(--ink-3); color:var(--bone); }
.ita-contacto .sel-opt[aria-selected="true"]{ color:var(--gold-lt); }
@media (prefers-reduced-motion:reduce){ .ita-contacto .sel-list{ transition-duration:.01ms; } }
.ita-contacto input.bad,.ita-contacto textarea.bad{ border-color:#b4553f; }
.ita-contacto textarea{ resize:vertical; min-height:130px; }
.ita-contacto .consent{ display:flex; gap:.85rem; align-items:flex-start; font-size:.84rem; color:var(--slate); line-height:1.5; }
.ita-contacto .consent input{ width:17px; height:17px; flex:none; margin-top:.2rem; accent-color:var(--gold); }
.ita-contacto .consent a{ color:var(--gold-lt); text-decoration:underline; text-underline-offset:3px; }
/* honeypot — вне экрана, но не display:none (боты обходят) */
.ita-contacto .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.ita-contacto .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.8rem; padding:1.05rem 2.1rem;
	background:linear-gradient(120deg,var(--gold),var(--gold-lt)); color:#0b0b0b; border:0; border-radius:2px;
	font-family:var(--wp--preset--font-family--display); font-weight:700; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
	position:relative; overflow:hidden; transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s; }
.ita-contacto .btn::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
	transform:translateX(-120%); transition:transform .8s cubic-bezier(.4,0,.2,1); }
.ita-contacto .btn:hover{ transform:translateY(-3px); box-shadow:0 16px 40px -18px rgba(201,162,39,.85); }
.ita-contacto .btn:hover::after{ transform:translateX(120%); }
.ita-contacto .note{ font-size:.8rem; color:var(--slate); min-height:1.2em; }
.ita-contacto .note.ok{ color:var(--gold-lt); }
.ita-contacto .note.err{ color:#d18a72; }

/* ---------- datos + director ---------- */
.ita-contacto .facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.ita-contacto .fact{ border-top:1px solid var(--line); padding-top:1.3rem; }
.ita-contacto .fact b{ font-family:var(--wp--preset--font-family--display); font-weight:800; text-transform:uppercase; letter-spacing:.08em;
	font-size:1rem; display:flex; align-items:center; gap:.6rem; }
.ita-contacto .fact b i{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(201,162,39,.16); display:block; }
.ita-contacto .fact p{ color:var(--slate); font-size:.9rem; margin-top:.7rem; }
@media(max-width:860px){ .ita-contacto .facts{ grid-template-columns:1fr; } }
/* Карточка руководителя: крупный портрет · текст · блок прямого контакта справа. */
.ita-contacto .director{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:2rem 3rem; align-items:center;
	border:1px solid var(--line); background:linear-gradient(150deg,#16130c,#0b0d0f 62%); padding:2.2rem 2.4rem; }
.ita-contacto .director .portrait{ width:200px; height:240px; border-radius:6px; overflow:hidden; border:1px solid var(--line);
	box-shadow:0 26px 54px -26px rgba(0,0,0,.75); }
.ita-contacto .director .portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
.ita-contacto .director small{ font-family:var(--wp--preset--font-family--mono),monospace; font-size:.6rem; letter-spacing:.22em;
	text-transform:uppercase; color:var(--slate); display:block; }
.ita-contacto .director b{ font-family:var(--wp--preset--font-family--display); font-weight:800; font-size:1.5rem; letter-spacing:-.01em; display:block; margin-top:.4rem; }
.ita-contacto .director__info p{ color:var(--slate); font-size:.92rem; margin-top:.75rem; max-width:52ch; }
.ita-contacto .director__aside{ display:flex; flex-direction:column; gap:.75rem; align-self:stretch; justify-content:center;
	min-width:200px; padding-left:2.6rem; border-left:1px solid var(--line-soft); }
.ita-contacto .director__aside small{ margin-bottom:.2rem; }
.ita-contacto .director__aside a{ display:inline-flex; align-items:center; gap:.65rem; white-space:nowrap;
	font-family:var(--wp--preset--font-family--mono),monospace; font-size:.84rem; letter-spacing:.03em; color:var(--gold-lt); transition:color .2s; }
.ita-contacto .director__aside a:hover{ color:var(--bone); }
.ita-contacto .director__aside a svg{ width:16px; height:16px; flex:none; stroke:currentColor; fill:none; stroke-width:1.5; }
@media(max-width:1020px){
	.ita-contacto .director{ grid-template-columns:auto minmax(0,1fr); }
	.ita-contacto .director__aside{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; gap:1rem 2.2rem; align-items:center;
		min-width:0; padding-left:0; padding-top:1.4rem; border-left:0; border-top:1px solid var(--line-soft); }
	.ita-contacto .director__aside small{ width:100%; margin-bottom:0; }
}
@media(max-width:640px){
	.ita-contacto .director{ grid-template-columns:1fr; gap:1.5rem; padding:1.8rem; }
	.ita-contacto .director .portrait{ width:150px; height:180px; }
}

/* ---------- reveal ---------- */
.ita-contacto .rv{ opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1); }
.ita-contacto .rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .ita-contacto *{ animation-duration:.01ms!important; transition-duration:.01ms!important; } }