/* Estilos exclusivos do portfólio da página de criação de sites. */
#portfolio-sites{--portfolio-accent:#c39273;background:#211d1a;color:var(--paper)}
#portfolio-sites .eyebrow,#portfolio-sites h2 .accent{color:var(--portfolio-accent)}
#portfolio-sites .detail-section-head>p{color:#c9bfb6}
#portfolio-sites .portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
#portfolio-sites .portfolio-project{min-width:0;background:#2b2520;border:1px solid #c3927340;border-radius:var(--radius);transition:border-color .3s,box-shadow .3s,transform .3s}
#portfolio-sites .portfolio-window{flex-shrink:0;overflow:hidden;border-bottom:1px solid #c3927333}
#portfolio-sites .portfolio-window-bar{height:34px;padding:0 16px;display:flex;align-items:center;gap:16px;background:#352b23;color:var(--sand);font-size:11px;line-height:1;letter-spacing:.015em}
#portfolio-sites .portfolio-window-dots{display:flex;gap:5px;flex-shrink:0}
#portfolio-sites .portfolio-window-dots i{display:block;width:6px;height:6px;background:var(--sand);opacity:.65;border-radius:50%}
#portfolio-sites .portfolio-preview{position:relative;display:block;width:100%;height:390px;margin:0;padding:0;border:0;background:var(--brown);overflow:hidden;isolation:isolate;cursor:pointer;touch-action:pan-y;text-align:left;color:var(--white);appearance:none;-webkit-tap-highlight-color:transparent}
#portfolio-sites .portfolio-preview:focus-visible{outline:3px solid var(--portfolio-accent);outline-offset:-4px}
#portfolio-sites .portfolio-preview:disabled{cursor:default;opacity:1}
#portfolio-sites .portfolio-preview-image{position:absolute;top:0;left:0;display:block;width:100%;height:auto;max-width:100%;object-fit:initial;pointer-events:none;user-select:none;transform:translate3d(0,0,0);transition:transform 1200ms cubic-bezier(.22,.61,.36,1)}
#portfolio-sites .portfolio-preview.is-active .portfolio-preview-image{transform:translate3d(0,calc(-1 * var(--preview-distance,0px)),0);transition-duration:var(--preview-duration,8500ms);transition-timing-function:linear}
#portfolio-sites .portfolio-project-tag{position:absolute;top:16px;left:16px;z-index:1;border-radius:50px;background:var(--portfolio-accent);color:var(--ink);padding:7px 12px;font-size:10px;font-weight:700;letter-spacing:.07em;line-height:1.4;pointer-events:none;box-shadow:0 2px 10px #0002}
#portfolio-sites .portfolio-preview-hint{position:absolute;left:50%;bottom:18px;z-index:1;transform:translateX(-50%);background:#211d1ae6;border:1px solid #ffffff1f;color:white;white-space:nowrap;padding:9px 15px;border-radius:50px;box-shadow:0 4px 14px #0003;font-size:11px;font-weight:600;letter-spacing:.06em;line-height:1.4;pointer-events:none;transition:opacity .3s}
#portfolio-sites .portfolio-hint-touch,#portfolio-sites .portfolio-hint-return{display:none}
#portfolio-sites .portfolio-preview.is-active .portfolio-preview-hint,#portfolio-sites .portfolio-preview:disabled .portfolio-preview-hint{opacity:0}
#portfolio-sites .portfolio-preview.is-touch .portfolio-hint-hover{display:none}
#portfolio-sites .portfolio-preview.is-touch .portfolio-hint-touch{display:inline}
#portfolio-sites .portfolio-preview.is-touch.is-complete .portfolio-preview-hint{opacity:1}
#portfolio-sites .portfolio-preview.is-touch.is-complete .portfolio-hint-touch{display:none}
#portfolio-sites .portfolio-preview.is-touch.is-complete .portfolio-hint-return{display:inline}
#portfolio-sites .portfolio-project-body{display:flex;flex:1;flex-direction:column;padding:28px}
#portfolio-sites .portfolio-project h3{font-size:26px;line-height:1.2;color:var(--paper);margin:0}
#portfolio-sites .portfolio-project-description{font-size:15px;line-height:1.7;color:#c9bfb6;margin:16px 0 0}
#portfolio-sites .portfolio-project-meta{color:var(--sand);font-size:11px;font-weight:600;line-height:1.5;letter-spacing:.08em;margin:18px 0 24px}
#portfolio-sites .portfolio-project-cta{color:var(--portfolio-accent);border-color:#c3927359;align-self:flex-start;margin-top:auto;font-size:13px;letter-spacing:.035em;transition:color .3s,border-color .3s}
#portfolio-sites .portfolio-project-cta span{display:inline-block;transition:transform .3s}
#portfolio-sites .portfolio-project-cta:hover,#portfolio-sites .portfolio-project-cta:focus-visible{color:#e7ceba;border-color:currentColor}
#portfolio-sites .portfolio-project-cta:hover span,#portfolio-sites .portfolio-project-cta:focus-visible span{transform:translate(2px,-2px)}
@media(hover:hover) and (pointer:fine){#portfolio-sites .portfolio-project:hover{border-color:#c3927380;box-shadow:0 12px 30px #0002;transform:translateY(-2px)}}
@media(max-width:1100px) and (min-width:901px){#portfolio-sites .portfolio-project-description{font-size:14px}#portfolio-sites .portfolio-project-body{padding:25px}}
@media(max-width:900px){#portfolio-sites .portfolio-grid{grid-template-columns:1fr;max-width:700px;margin:auto}}
@media(max-width:700px){#portfolio-sites .portfolio-preview{height:350px}#portfolio-sites .portfolio-project-body{padding:24px}#portfolio-sites .portfolio-project h3{font-size:24px}#portfolio-sites .portfolio-window-bar{font-size:10px;gap:10px}#portfolio-sites .portfolio-project-tag{top:12px;left:12px}}
@media(hover:none),(pointer:coarse){#portfolio-sites .portfolio-hint-hover{display:none}#portfolio-sites .portfolio-hint-touch{display:inline}#portfolio-sites .portfolio-preview.is-complete .portfolio-preview-hint{opacity:1}#portfolio-sites .portfolio-preview.is-complete .portfolio-hint-touch{display:none}#portfolio-sites .portfolio-preview.is-complete .portfolio-hint-return{display:inline}}
@media(prefers-reduced-motion:reduce){#portfolio-sites .portfolio-project,#portfolio-sites .portfolio-preview-image,#portfolio-sites .portfolio-preview-hint,#portfolio-sites .portfolio-project-cta,#portfolio-sites .portfolio-project-cta span{transition:none!important}#portfolio-sites .portfolio-project:hover{transform:none}#portfolio-sites .portfolio-hint-hover{display:none}#portfolio-sites .portfolio-hint-touch{display:inline}}