/* Closing details that make the Norte Web portfolio more complete. */
.portfolio-faq{padding:105px 0;background:var(--surface);border-top:1px solid var(--line)}
.portfolio-faq-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:82px;align-items:start}
.portfolio-faq-copy h2{max-width:520px;margin:14px 0 0;font-size:clamp(2.35rem,4.4vw,4rem);letter-spacing:-.077em;line-height:.95}
.portfolio-faq-copy h2 em{color:var(--brand-deep);font-family:"Playfair Display",serif;font-style:normal}
.portfolio-faq-copy p:last-child{max-width:420px;margin:22px 0 0;color:var(--muted);line-height:1.65}
.portfolio-faq-list{border-top:1px solid var(--line)}
.portfolio-faq-list details{border-bottom:1px solid var(--line)}
.portfolio-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 2px;cursor:pointer;list-style:none;font-size:1rem;font-weight:800;letter-spacing:-.03em}
.portfolio-faq-list summary::-webkit-details-marker{display:none}
.portfolio-faq-list summary::after{color:var(--brand-deep);content:"+";font-family:"Playfair Display",serif;font-size:1.7rem;font-weight:600;transition:transform .2s ease}
.portfolio-faq-list details[open] summary::after{transform:rotate(45deg)}
.portfolio-faq-list p{max-width:600px;margin:-5px 0 22px;color:var(--muted);font-size:.9rem;line-height:1.65}
.site-header a:focus-visible,.button:focus-visible,.text-link:focus-visible,.theme-toggle:focus-visible,.menu-button:focus-visible,.portfolio-faq-list summary:focus-visible{outline:3px solid var(--brand);outline-offset:4px}
@media(max-width:900px){.portfolio-faq-grid{grid-template-columns:1fr;gap:35px}}
@media(max-width:680px){.portfolio-faq{padding:76px 0}.portfolio-faq-list summary{padding:19px 0}}

/* Norte Web brand mark, demo previews, and subtle motion. */
.brand .brand-mark{overflow:hidden;background:transparent;box-shadow:0 7px 17px rgba(7,25,40,.18);transform:none;transition:transform .22s ease,box-shadow .22s ease}
.brand-mark img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover}
.brand:hover .brand-mark{box-shadow:0 11px 23px rgba(7,25,40,.25);transform:rotate(-7deg) scale(1.08)}
.demo-preview-stack{display:flex;align-items:center;min-width:78px;height:36px;padding-left:2px}
.demo-preview-stack i{width:34px;height:34px;margin-left:-9px;border:2px solid var(--bg);border-radius:10px;background-position:center;background-size:cover;box-shadow:0 5px 14px rgba(5,22,34,.22);transform:rotate(var(--tilt));transition:transform .24s ease,margin .24s ease;will-change:transform}
.demo-preview-stack i:first-child{margin-left:0}.demo-preview-aura{--tilt:-8deg;background-image:url("images/aura-studio-hero.png")}.demo-preview-casa{--tilt:4deg;background-image:url("images/casa-facil-hero.png")}.demo-preview-impulso{--tilt:10deg;background-image:url("images/impulso-hero.png")}
.hero-proof:hover .demo-preview-stack i{margin-left:0;transform:rotate(0deg) translateY(-3px)}
.project-image{transition:background-size .7s cubic-bezier(.2,.7,.2,1),filter .35s ease}
.project-card:hover .project-image{background-size:112%;filter:saturate(1.08)}
.theme-toggle:hover .theme-icon{transform:rotate(24deg) scale(1.12)}
.theme-icon{transition:transform .25s ease}
@keyframes norte-browser-float{0%,100%{transform:rotate(2.5deg) translateY(0)}50%{transform:rotate(2.5deg) translateY(-11px)}}
@keyframes norte-orb-drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-20px,18px,0) scale(1.06)}}
@keyframes norte-note-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.browser-card{animation:norte-browser-float 7s ease-in-out infinite}
.hero-orb{animation:norte-orb-drift 12s ease-in-out infinite}
.orb-two{animation-delay:-5s}.floating-note{animation:norte-note-float 5s ease-in-out infinite}.note-bottom{animation-delay:-2.4s}
@media(max-width:680px){.demo-preview-stack{min-width:72px}.demo-preview-stack i{width:31px;height:31px}.browser-card,.hero-orb,.floating-note{animation:none}}
@media(prefers-reduced-motion:reduce){.browser-card,.hero-orb,.floating-note{animation:none}.project-image,.brand .brand-mark,.demo-preview-stack i,.theme-icon{transition:none}}

/* Five-demo portfolio upgrade. */
.demo-preview-stack i:nth-child(4){background-image:url("../demos/cafe-brisa/assets/cafe-brisa-triptych.png");background-position:center}.demo-preview-stack i:nth-child(5){background-image:url("../demos/luxora/hero.jpg");background-position:center}
.project-grid-five{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.project-grid-five .project-card{grid-column:span 2}
.project-grid-five .project-card:nth-child(n+4){grid-column:span 3}
.project-cafe .project-image{background-image:url("../demos/cafe-brisa/assets/cafe-brisa-triptych.png");background-position:center}
.project-luxora .project-image{background-image:url("../demos/luxora/hero.jpg");background-position:center}
.project-cafe .project-image::after{background:linear-gradient(165deg,rgba(53,27,13,.42),rgba(53,27,13,.05) 55%,rgba(44,22,11,.8))}
.project-luxora .project-image::after{background:linear-gradient(165deg,rgba(5,10,29,.56),rgba(5,10,29,.05) 55%,rgba(5,10,29,.84))}
.project-cafe .project-details span{color:#94542b}.project-luxora .project-details span{color:#4264d7}
.portfolio-note{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;margin-top:28px;padding:18px 21px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface) 85%,var(--soft));box-shadow:0 13px 35px rgba(16,34,55,.05)}
.portfolio-note-mark{display:grid;place-items:center;width:39px;height:39px;border-radius:12px 12px 12px 4px;background:var(--brand);color:#102237;font-weight:900;transform:rotate(-7deg)}
.portfolio-note p{margin:0;color:var(--muted);font-size:.84rem;line-height:1.55}.portfolio-note strong{color:var(--ink)}
.portfolio-note a{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:var(--ink);font-size:.82rem;font-weight:800}.portfolio-note a span{color:var(--brand-deep);font-size:1.15rem;transition:transform .2s ease}.portfolio-note a:hover span{transform:translateX(4px)}
.project-grid-five .project-image{min-height:340px}.project-grid-five .project-card:nth-child(n+4) .project-image{min-height:390px}
@media(max-width:900px){.project-grid-five{grid-template-columns:repeat(2,minmax(0,1fr))}.project-grid-five .project-card,.project-grid-five .project-card:nth-child(n+4){grid-column:auto}.project-grid-five .project-card:last-child{grid-column:span 2}.project-grid-five .project-card:nth-child(n+4) .project-image{min-height:340px}}
@media(max-width:620px){.project-grid-five{grid-template-columns:1fr}.project-grid-five .project-card:last-child{grid-column:auto}.project-grid-five .project-image,.project-grid-five .project-card:nth-child(n+4) .project-image{min-height:315px}.portfolio-note{grid-template-columns:auto 1fr;gap:12px;padding:16px}.portfolio-note a{grid-column:2}.demo-preview-stack i:nth-child(4),.demo-preview-stack i:nth-child(5){display:none}}