/*
 * Страница proyectos. Порт CSS макета (files_harry/proyectos.html, 62–154).
 * Грузится только на странице projects. Всё под .ita-proyectos; шапку/подвал
 * (chrome.css) не трогает. Примитивы (eyebrow/lead/btn/rv/section/h-шкала)
 * заскоуплены на .ita-proyectos — самодостаточно, без зависимости от home.css.
 * Короткие переменные (--ink-2/--gold-lt/--line…) заалиасены в main.css.
 */

/* ---------- сбросы + примитивы (заскоуплены) ---------- */
.ita-proyectos,.ita-proyectos *,.ita-proyectos *::before,.ita-proyectos *::after{ box-sizing:border-box; }
.ita-proyectos canvas,.ita-proyectos img{ display:block; max-width:100%; }
.ita-proyectos p{ margin:0; }
.ita-proyectos h1,.ita-proyectos h2,.ita-proyectos h3{ font-family:var(--wp--preset--font-family--display),sans-serif;
	font-weight:800; line-height:1.03; letter-spacing:-.03em; margin:0; }
.ita-proyectos h1{ font-size:clamp(2.5rem,6vw,5.2rem); text-transform:uppercase; }
.ita-proyectos h2{ font-size:clamp(1.7rem,3.1vw,2.6rem); text-transform:uppercase; }
.ita-proyectos h3{ font-size:1.02rem; font-weight:700; letter-spacing:.01em; }
.ita-proyectos .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-proyectos .eyebrow::before{ content:""; width:34px; height:1px; background:currentColor; flex:none; }
.ita-proyectos .lead{ color:#cfcbc4; font-size:clamp(1rem,1.3vw,1.12rem); max-width:60ch; }

/* ---------- encabezado (page-head + 3D) ---------- */
.ita-proyectos .page-head{ position:relative; min-height:72svh; display:flex; align-items:flex-end;
	padding-top:76px; overflow:hidden; }
.ita-proyectos #gl{ position:absolute; inset:0; z-index:0; }
.ita-proyectos .page-head::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
	background:radial-gradient(102% 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-proyectos .glow{ position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen;
	background:radial-gradient(46% 44% at 76% 34%, rgba(255,255,255,.32) 0%, rgba(255,255,255,.09) 46%, rgba(255,255,255,0) 74%); }
.ita-proyectos .page-head .shell{ position:relative; z-index:2; padding-block:4rem 4rem; }
.ita-proyectos .page-head h1{ margin:1.3rem 0 1.3rem; max-width:14ch; text-shadow:0 4px 40px rgba(0,0,0,.6); }
.ita-proyectos .page-head h1 em{ font-style:normal; color:var(--gold-lt); display:block; }
.ita-proyectos .page-head .lead{ text-shadow:0 2px 24px rgba(0,0,0,.8); }

/* ---------- cifras ---------- */
.ita-proyectos .stats{ border-block:1px solid var(--line-soft); background:#0a0b0d; }
.ita-proyectos .stats .shell{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding-block:2.2rem; }
.ita-proyectos .stat b{ font-family:var(--wp--preset--font-family--display); font-weight:800; font-size:1.9rem;
	color:var(--gold-lt); display:block; line-height:1; }
.ita-proyectos .stat span{ font-family:var(--wp--preset--font-family--mono),monospace; font-size:.62rem; letter-spacing:.2em;
	text-transform:uppercase; color:var(--slate); display:block; margin-top:.5rem; }
@media(max-width:760px){ .ita-proyectos .stats .shell{ grid-template-columns:repeat(2,1fr); gap:1.6rem; } }

.ita-proyectos section{ padding-block:clamp(3.5rem,7vw,6rem); }

/* ---------- filtros ---------- */
.ita-proyectos .filters{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.ita-proyectos .chip{ background:transparent; border:1px solid var(--line-soft); color:var(--slate);
	padding:.55rem 1.15rem; border-radius:100px; font-size:.8rem; letter-spacing:.04em; transition:.25s; }
.ita-proyectos .chip:hover{ color:var(--bone); border-color:var(--line); }
.ita-proyectos .chip[aria-pressed="true"]{ background:var(--gold); border-color:var(--gold); color:#0a0a0a; font-weight:600; }
.ita-proyectos .count{ font-family:var(--wp--preset--font-family--mono),monospace; font-size:.7rem; letter-spacing:.16em;
	color:var(--slate); margin-left:auto; align-self:center; }

/* ---------- casos ---------- */
.ita-proyectos .cases{ display:grid; gap:1.4rem; }
.ita-proyectos .case{ display:grid; grid-template-columns:1.25fr 1fr; gap:0; border:1px solid var(--line-soft);
	background:linear-gradient(180deg,var(--ink-2),#0b0d0f); overflow:hidden; transition:border-color .4s,transform .4s; }
.ita-proyectos .case:hover{ border-color:var(--line); transform:translateY(-3px); }
.ita-proyectos .case.alt{ grid-template-columns:1fr 1.25fr; }
.ita-proyectos .case.alt .visual{ order:2; }
.ita-proyectos .case.hide{ display:none; }
.ita-proyectos .visual{ position:relative; overflow:hidden; min-height:340px; background:#0c0d0f; }
.ita-proyectos .visual>img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
	filter:grayscale(.45) brightness(.82); transition:filter .7s,transform .9s cubic-bezier(.2,.7,.3,1); }
.ita-proyectos .case:hover .visual>img{ filter:grayscale(0) brightness(.95); transform:scale(1.04); }
.ita-proyectos .badge{ position:absolute; z-index:2; top:1.1rem; left:1.1rem; font-family:var(--wp--preset--font-family--mono),monospace;
	font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; background:rgba(8,9,10,.78); border:1px solid var(--line);
	color:var(--gold-lt); padding:.4rem .7rem; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.ita-proyectos .zoom{ position:absolute; z-index:2; inset:0; border:0; background:transparent; cursor:zoom-in; }
.ita-proyectos .case .body{ padding:2.4rem 2.2rem; display:flex; flex-direction:column; justify-content:center; }
.ita-proyectos .case .body h2{ margin:.9rem 0 .9rem; }
.ita-proyectos .case .body p.txt{ color:var(--slate); font-size:.94rem; }
.ita-proyectos .meta{ display:flex; flex-direction:column; gap:.5rem; margin-top:1.6rem;
	font-family:var(--wp--preset--font-family--mono),monospace; font-size:.7rem; letter-spacing:.1em; color:var(--slate); }
.ita-proyectos .meta div{ display:flex; gap:1rem; border-top:1px solid var(--line-soft); padding-top:.5rem; }
.ita-proyectos .meta b{ color:var(--bone); font-weight:500; margin-left:auto; text-align:right; }
.ita-proyectos .strip{ display:flex; gap:.5rem; margin-top:1.7rem; flex-wrap:wrap; }
.ita-proyectos .strip button{ width:78px; aspect-ratio:4/3; padding:0; border:1px solid var(--line-soft); background:#0c0d0f;
	overflow:hidden; transition:.3s; cursor:zoom-in; }
.ita-proyectos .strip img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.8); transition:.4s; }
.ita-proyectos .strip button:hover{ border-color:var(--gold); }
.ita-proyectos .strip button:hover img{ filter:none; }
@media(max-width:900px){
	.ita-proyectos .case,.ita-proyectos .case.alt{ grid-template-columns:1fr; }
	.ita-proyectos .case.alt .visual{ order:0; }
	.ita-proyectos .visual{ min-height:250px; height:56vw; max-height:340px; position:relative; }
	.ita-proyectos .case .body{ padding:2rem 1.5rem; }
}

/* ---------- botón + CTA ---------- */
.ita-proyectos .btn{ display:inline-flex; align-items: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-proyectos .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-proyectos .btn:hover{ transform:translateY(-3px); box-shadow:0 16px 40px -18px rgba(201,162,39,.85); }
.ita-proyectos .btn:hover::after{ transform:translateX(120%); }
.ita-proyectos .cta-band{ background:linear-gradient(150deg,#16130c,#0b0d0f 62%); border-block:1px solid var(--line); }
.ita-proyectos .cta-band .shell{ display:flex; gap:2.5rem; align-items:center; flex-wrap:wrap; padding-block:3.4rem; }
.ita-proyectos .cta-band h2{ max-width:18ch; }
.ita-proyectos .cta-band .btn{ margin-left:auto; }
@media(max-width:760px){ .ita-proyectos .cta-band .btn{ margin-left:0; width:100%; justify-content:center; } }

/* ---------- lightbox ---------- */
.ita-lb{ position:fixed; inset:0; z-index:90; background:rgba(6,7,8,.97); display:none; place-items:center;
	padding:6vh 6vw; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.ita-lb.open{ display:grid; }
.ita-lb figure{ margin:0; max-width:100%; text-align:center; }
.ita-lb img{ max-width:100%; max-height:74vh; object-fit:contain; border:1px solid var(--line-soft); margin-inline:auto; }
.ita-lb figcaption{ margin-top:1rem; font-family:var(--wp--preset--font-family--mono),monospace; font-size:.72rem;
	letter-spacing:.14em; color:var(--slate); }
.ita-lb figcaption b{ color:var(--gold-lt); font-weight:400; }
.ita-lb button{ position:absolute; background:rgba(10,11,13,.5); border:1px solid var(--line-soft); color:var(--bone);
	width:48px; height:48px; border-radius:50%; display:grid; place-items:center; transition:.25s; }
.ita-lb button:hover{ border-color:var(--gold); color:var(--gold-lt); }
.ita-lb .x{ top:4vh; right:5vw; } .ita-lb .p{ left:2.5vw; top:50%; } .ita-lb .n{ right:2.5vw; top:50%; }
.ita-lb svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }

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