/* Módulos de la home que vienen de las propuestas: capa por capa, probá tu presencia, rueda y archivo.
   (Generado a partir de propuestas/css/p.css; los cambios de la home van en extras.css) */

@font-face { font-family: "Seramonde"; src: url("../assets/seramonde-trial.otf") format("opentype"); font-display: swap; }

/* ---------- 02 capa por capa ---------- */
.capas { height: 700vh; position: relative; }
.capas__sticky { position: sticky; top: 0; height: 100vh; padding-top: var(--navh, 84px); box-sizing: border-box; display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.capas__txt { position: relative; padding-left: 28px; }
.capas__track { position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.capas__fill { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--lime); transform-origin: top; transform: scaleY(0); transition: transform 0.6s var(--ease-out); }
.capas__dot { position: absolute; left: -5px; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--lime); transform: translateY(-5px); transition: transform 0.6s var(--ease-out); }
.capas__pasos { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.capas__pasos li { opacity: 0.32; transition: opacity 0.35s ease; }
.capas__pasos li.is-on { opacity: 1; }
.capas__pasos b { display: block; font: 600 16px/1.3 var(--f-brand); letter-spacing: -0.01em; }
.capas__pasos span { font-size: 13px; color: var(--mute); }

.mock { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #1a1a1a; }
.mock__bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-bottom: 1px solid var(--line); font: 500 11px/1 var(--f-text); color: var(--dim); background: #161616; }
.mock__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.mock__bar span { margin-left: 10px; }

.capas__stage { container-type: inline-size; }

/* ---------- 03 probá tu presencia ---------- */
.presencia { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.pz-form { display: grid; gap: 16px; position: sticky; top: 110px; }
.pz-form label { display: grid; gap: 8px; }
.pz-form label span { font: 500 11px/1 var(--f-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.pz-form input, .pz-form select { height: 50px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 12px; background: #161616; color: var(--paper); font: 500 16px/1 var(--f-text); }
.pz-form input:focus, .pz-form select:focus { outline: none; border-color: var(--lime); }
.pz-nota { margin: 4px 0 0; font-size: 12px; color: var(--dim); }
.pz-out { display: grid; gap: 14px; container-type: inline-size; }
.pz-site { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pz-page { --pbg: #fff; --pfg: #111; --pacc: #333; --pmute: #666; --pfont: Georgia, serif; aspect-ratio: 16 / 9; padding: 4cqw 5cqw; background: var(--pbg); color: var(--pfg); transition: background-color 0.5s ease, color 0.5s ease; display: flex; flex-direction: column; }
.pz-nav { display: flex; align-items: center; gap: 2.6cqw; font: 500 1.3cqw/1 var(--f-text); color: var(--pmute); }
.pz-logo { margin-right: auto; font: var(--plogo, 600 2.2cqw/1 var(--pfont)); color: var(--pfg); letter-spacing: -0.01em; }
.pz-cta { padding: 0.8cqw 1.4cqw; border-radius: 99px; background: var(--pacc); color: var(--pbg); font-weight: 600; transition: background-color 0.5s ease; }
.pz-hero { flex: 1; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 3cqw; }
.pz-copy { display: flex; flex-direction: column; gap: 1.8cqw; }
.pz-eb { font: 600 1.05cqw/1 var(--f-text); letter-spacing: 0.18em; text-transform: uppercase; color: var(--pacc); }
.pz-h1 { font: var(--ph1, 500 4.6cqw/1.02 var(--pfont)); letter-spacing: var(--ptrack, -0.02em); }
.pz-sub { font-size: 1.45cqw; line-height: 1.55; color: var(--pmute); max-width: 36ch; }
.pz-btn { align-self: flex-start; padding: 1.2cqw 2.2cqw; border-radius: var(--prad, 99px); background: var(--pacc); color: var(--pbg); font: 600 1.25cqw/1 var(--f-text); transition: background-color 0.5s ease; }
.pz-art { width: 100%; height: auto; overflow: visible; }
.pz-art path { fill: none; stroke: var(--pacc); transition: d 0.7s var(--ease-out), stroke 0.5s ease; }
.pz-art circle { fill: var(--pacc); transition: fill 0.5s ease; }
.pz-ai { padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: #151515; }
.pz-q { margin: 0 0 10px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; }
.pz-a { margin: 0; color: var(--mute); line-height: 1.6; font-size: 15px; min-height: 3.2em; }
.pz-ia { display: inline-block; margin-right: 6px; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); color: var(--paper); font: 600 12px/1.3 var(--f-brand); }
.pz-a mark { padding: 1px 6px; border-radius: 4px; background: var(--lime); color: var(--ink); font-weight: 600; }
.pz-go { justify-self: start; }

/* ---------- 07 la rueda de proyectos ---------- */
.rueda { position: relative; height: calc(100vh + (var(--n) - 1) * 60vh); }
.rueda__sticky { position: sticky; top: 0; height: 100vh; padding-top: var(--navh, 84px); box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); gap: clamp(16px, 3vw, 48px); align-items: center; overflow: hidden; }
.rueda__stage { position: relative; height: 100%; perspective: 1600px; }
.rueda__hub { position: absolute; left: var(--hx, 6%); top: var(--hy, 50%); width: 0; height: 0; }
.rueda__hub i { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; background: var(--lime); }
.rueda__rings {
  position: absolute; left: calc(var(--hr, 400px) * -1); top: calc(var(--hr, 400px) * -1); width: calc(var(--hr, 400px) * 2); height: calc(var(--hr, 400px) * 2); border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 22px, rgba(255, 255, 255, 0.16) 22px 23.2px, transparent 23.2px 34px);
  -webkit-mask-image: radial-gradient(circle, #000 0 18%, transparent 70%); mask-image: radial-gradient(circle, #000 0 18%, transparent 70%);
}
.rueda__pulse { position: absolute; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 1.5px solid var(--lime); opacity: 0; }
.rueda__pulse.is-on { animation: pulso 1.1s var(--ease-out); }
@keyframes pulso { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(22); opacity: 0; } }
.rueda__cards { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.rueda__cards .rc { pointer-events: auto; }
.rc { position: absolute; left: 0; top: 0; width: var(--cw, 480px); padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #1a1a1a; color: inherit; cursor: pointer; transform-origin: center; will-change: transform, opacity; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4); }
.rc .mock__bar { height: 26px; font-size: 10px; }
.rc__m { position: relative; display: block; aspect-ratio: 16 / 10; }
.rc__m img, .rc__m video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.rc__m video { opacity: 0; transition: opacity 0.5s ease; }
.rc.is-active .rc__m video.is-ready { opacity: 1; }
.rc:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }

.rueda__info { position: relative; height: min(460px, 70%); }
.ri { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 0; opacity: 0; pointer-events: none; transform: translateY(16px); filter: blur(8px); transition: opacity 0.45s ease, transform 0.6s var(--ease-out), filter 0.45s ease; }
.ri.is-active { opacity: 1; pointer-events: auto; transform: none; filter: blur(0); }
.ri-n { font: 600 13px/1 var(--f-brand); letter-spacing: 0.08em; color: var(--lime); }
.ri-n i { font-style: normal; color: var(--dim); }
.ri-t { margin: 18px 0 6px; font: 600 clamp(36px, 4vw, 60px)/1 var(--f-brand); letter-spacing: -0.04em; }
.ri-r { margin: 0 0 22px; font-size: 14px; color: var(--dim); }
.ri-d { margin: 0 0 24px; max-width: 40ch; font-size: 17px; line-height: 1.6; color: var(--mute); }
.ri-dl { display: grid; gap: 14px; margin: 0 0 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.ri-dl dt { margin-bottom: 4px; font: 500 11px/1 var(--f-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.ri-dl dd { margin: 0; font-size: 15px; line-height: 1.5; }
.ri-go { align-self: flex-start; padding: 12px 18px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; font: 600 14px/1 var(--f-brand); transition: border-color 0.2s ease; }
.ri-go:hover { border-color: var(--paper); }
.ri-go--off { opacity: 0.45; }
.ri-dots { position: absolute; left: -8px; bottom: -44px; display: flex; gap: 0; }
/* el punto mide 8px pero se toca en 24px */
.ri-dots button { box-sizing: content-box; width: 8px; height: 8px; padding: 8px; background-clip: content-box; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.22); cursor: pointer; transition: background-color 0.3s ease, transform 0.3s var(--ease-out); }
.ri-dots button.is-on { background: var(--lime); }

@media (max-width: 900px) {
  .rueda { height: calc(100vh + (var(--n) - 1) * 70vh); }
  .rueda__sticky { grid-template-columns: 1fr; grid-template-rows: 46% 1fr; gap: 8px; align-items: stretch; }
  .rueda__info { height: auto; }
  .ri { justify-content: flex-start; padding-top: 8px; }
  .ri-t { margin-top: 10px; font-size: 32px; }
  .ri-d { font-size: 15px; margin-bottom: 14px; }
  .ri-dl { gap: 8px; margin-bottom: 16px; padding-top: 12px; }
  .ri-dl div:last-child { display: none; }
  .ri-dots { bottom: auto; top: 0; right: 0; left: auto; }
}

/* rueda: etiqueta "En proceso", placa de cierre */
.rc__badge { position: absolute; left: 12px; top: 12px; padding: 6px 10px; border-radius: 999px; background: var(--lime); color: var(--ink); font: 600 11px/1 var(--f-brand); }
.ri-badge { display: inline-block; margin-left: 10px; padding: 4px 8px; border-radius: 999px; background: var(--lime); color: var(--ink); font: 600 10px/1 var(--f-brand); font-style: normal; letter-spacing: 0; vertical-align: 1px; }
.rc--mas .rc__m { background: #141414; }
.rc__mas { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; background: repeating-radial-gradient(circle at 50% 120%, transparent 0 26px, rgba(255, 255, 255, 0.08) 26px 27px); }
.rc__mas b { font: 600 clamp(48px, 6vw, 88px)/1 var(--f-brand); letter-spacing: -0.05em; }
.rc__mas span { font-size: 14px; color: var(--mute); }
.rc__mas i { width: 12px; height: 12px; margin-top: 8px; border-radius: 50%; background: var(--lime); }

/* archivo */
.archivo { position: relative; margin-top: clamp(64px, 10vh, 120px); }
.archivo__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.archivo__head .kicker { margin: 0; }
.archivo__t { margin: 0; font: 600 clamp(28px, 3vw, 40px)/1 var(--f-brand); letter-spacing: -0.03em; }
.archivo__n { margin: 0 0 0 auto; font-size: 13px; color: var(--dim); }
.archivo__list { border-top: 1px solid var(--line); }
.ar-row { position: relative; display: grid; grid-template-columns: 56px 1.1fr 1fr 1fr 40px; align-items: center; gap: 16px; padding: 22px 8px; border-bottom: 1px solid var(--line); outline: none; transition: background-color 0.3s ease, padding 0.4s var(--ease-out); }
.ar-n { font: 500 12px/1 var(--f-text); color: var(--dim); }
.ar-t { font: 600 clamp(20px, 2vw, 28px)/1.1 var(--f-brand); letter-spacing: -0.02em; transition: color 0.3s ease; }
.ar-r, .ar-h { font-size: 14px; color: var(--mute); }
.ar-go { justify-self: end; color: var(--dim); transition: color 0.3s ease, transform 0.3s var(--ease-out); }
.ar-thumb { display: none; }
.archivo__preview { position: fixed; left: 0; top: 0; z-index: 25; width: 320px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(0.85); transition: opacity 0.3s ease; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); }
.archivo__preview img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.archivo__preview.is-on { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .ar-row:hover, .ar-row:focus-visible { background: rgba(255, 255, 255, 0.03); padding-left: 20px; }
  .ar-row:hover .ar-t, .ar-row:focus-visible .ar-t { color: var(--lime); }
  .ar-row:hover .ar-go { color: var(--paper); transform: translate(3px, -3px); }
}
@media (hover: none), (max-width: 760px) {
  .archivo__preview { display: none; }
  .ar-row { grid-template-columns: 1fr 96px; grid-template-areas: "t img" "r img"; row-gap: 4px; }
  .ar-n, .ar-h, .ar-go { display: none; }
  .ar-t { grid-area: t; } .ar-r { grid-area: r; }
  .ar-thumb { display: block; grid-area: img; width: 96px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 6px; }
}

@media (max-width: 900px) {
  .capas__sticky { grid-template-columns: 1fr; align-content: center; gap: 20px; }
  .capas__pasos { grid-auto-flow: column; grid-auto-columns: minmax(120px, 1fr); overflow-x: auto; gap: 12px; }
  .capas__pasos li:not(.is-on) { display: none; }
  .capas__track { display: none; }
  .capas__txt { padding-left: 0; }
  .presencia { grid-template-columns: 1fr; }
  .pz-form { position: static; }
}