@import url("/styles-v36.css");

.catalog-page,.screen-detail-page{background:#080808;color:#f7f7f5}
.catalog-header{background:#090909;border-bottom:1px solid rgba(255,255,255,.09)}
.catalog-header .brand img{object-fit:contain}
.catalog-hero{position:relative;padding:150px 0 72px;overflow:hidden;background:radial-gradient(circle at 80% 10%,rgba(255,81,0,.16),transparent 34%),linear-gradient(180deg,#090909,#0c0908)}
.catalog-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:52px 52px;pointer-events:none}
.catalog-hero .container{position:relative;max-width:1240px}
.catalog-kicker{display:inline-flex;align-items:center;gap:12px;color:#ff5a00;font:700 12px/1.2 "Space Grotesk",sans-serif;letter-spacing:.2em}
.catalog-kicker:before{content:"";width:34px;height:2px;background:#ff5a00}
.catalog-hero h1{max-width:980px;margin:24px 0;font:700 clamp(40px,6.3vw,86px)/.98 "Space Grotesk",sans-serif;letter-spacing:-.045em}
.catalog-hero h1 em{color:#ff5a00;font-style:normal}
.catalog-hero-copy{max-width:800px;font-size:18px;line-height:1.65;color:#b9b9b9}
.catalog-commercial-call{margin-top:22px;color:#fff;font-weight:700}
.catalog-section{padding:74px 0 110px;background:#080808}
.catalog-toolbar{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:34px}
.catalog-toolbar h2{margin:0;font:700 clamp(28px,4vw,44px)/1.05 "Space Grotesk",sans-serif}
.catalog-toolbar p{margin:0;color:#888}
.screens-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px;align-items:stretch}
.screen-card{min-width:0;display:flex;flex-direction:column;background:#111;border:1px solid #2d2d2d;border-top:3px solid #ff5a00;border-radius:18px;overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.screen-card:hover{transform:translateY(-6px);border-color:#ff5a00;box-shadow:0 22px 55px rgba(0,0,0,.42)}
.screen-card-media{position:relative;display:block;aspect-ratio:4/3;background:#090909;overflow:hidden}
.screen-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.screen-card:hover .screen-card-media img{transform:scale(1.035)}
.screen-placeholder{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(circle at center,rgba(255,83,0,.2),transparent 50%),linear-gradient(135deg,#15100d,#080808);color:#777;font:700 12px "Space Grotesk",sans-serif;letter-spacing:.18em}
.screen-placeholder:before{content:"";position:absolute;width:74px;height:112px;border:2px solid rgba(255,90,0,.45);box-shadow:0 0 35px rgba(255,90,0,.18)}
.screen-status{display:inline-flex;align-items:center;width:max-content;padding:8px 12px;border-radius:999px;text-transform:uppercase;font:800 10px/1 "Space Grotesk",sans-serif;letter-spacing:.1em}
.screen-card-media>.screen-status{position:absolute;top:16px;left:16px}
.screen-status:before{content:"";width:7px;height:7px;margin-right:7px;border-radius:50%;background:currentColor}
.screen-status.is-live{color:#7dffad;background:#073d22;border:1px solid #0b7d42}
.screen-status.is-building{color:#ffd19a;background:#4d2608;border:1px solid #a94d08}
.screen-card-body{display:flex;flex:1;flex-direction:column;padding:24px}
.screen-id{color:#ff5a00;font:800 11px "Space Grotesk",sans-serif;letter-spacing:.18em}
.screen-card h2{margin:10px 0 14px;font:700 25px/1.12 "Space Grotesk",sans-serif}
.screen-card p{margin:0 0 5px;color:#aaa;line-height:1.5}
.screen-card .screen-address{color:#eee;font-weight:700}
.screen-card dl{margin:20px 0 0;padding-top:18px;border-top:1px solid #292929}
.screen-card dt{color:#777;text-transform:uppercase;font-size:10px;letter-spacing:.14em}
.screen-card dd{margin:6px 0 0;color:#fff;font-weight:700}
.screen-card-actions{display:grid;gap:10px;margin-top:auto;padding-top:24px}
.catalog-button{display:inline-flex;min-height:48px;align-items:center;justify-content:center;padding:12px 17px;border-radius:999px;text-align:center;font:800 11px/1.15 "Space Grotesk",sans-serif;letter-spacing:.04em;transition:transform .2s,background .2s,color .2s}
.catalog-button:hover{transform:translateY(-2px)}
.catalog-button-primary{background:#ff5800;color:#fff}
.catalog-button-secondary{border:1px solid #565656;color:#fff}
.catalog-button-secondary:hover{background:#fff;color:#080808}
.catalog-button-disabled{border:1px solid #2b2b2b;color:#5f5f5f;cursor:not-allowed}
.catalog-footer{padding:42px 0;border-top:1px solid #242424;background:#050505}
.catalog-footer .container{display:flex;justify-content:space-between;gap:24px;align-items:center}
.catalog-footer p{color:#888}
.catalog-footer a{color:#fff}

.screen-detail-hero{padding:142px 0 76px;background:radial-gradient(circle at 85% 15%,rgba(255,82,0,.17),transparent 35%),#090909}
.screen-back{display:inline-block;margin-bottom:38px;color:#ff5a00;font-size:12px;font-weight:800;letter-spacing:.09em}
.screen-detail-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(360px,1.15fr);gap:64px;align-items:center}
.screen-detail-copy .screen-status{margin:22px 0 0}
.screen-detail-copy h1{margin:24px 0 20px;font:700 clamp(42px,6vw,76px)/.98 "Space Grotesk",sans-serif;letter-spacing:-.04em}
.screen-detail-copy>p{max-width:620px;color:#bbb;font-size:18px;line-height:1.65}
.screen-detail-copy address{margin:25px 0;color:#fff;font-style:normal;line-height:1.7}
.screen-whatsapp{margin-top:10px}
.screen-detail-photo{margin:0;aspect-ratio:4/3;border:2px solid #ff5a00;border-radius:22px;overflow:hidden;background:#0a0a0a;box-shadow:0 25px 70px rgba(255,76,0,.1)}
.screen-detail-photo img{width:100%;height:100%;object-fit:cover}
.screen-facts{padding:35px 0;background:#111;border-block:1px solid #282828}
.screen-facts dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));margin:0}
.screen-facts dl>div{padding:18px 24px;border-left:1px solid #303030}
.screen-facts dl>div:first-child{border-left:0}
.screen-facts dt{color:#858585;text-transform:uppercase;font-size:10px;letter-spacing:.14em}
.screen-facts dd{margin:8px 0 0;color:#fff;font:700 19px "Space Grotesk",sans-serif}
.screen-map-section{padding:90px 0;background:#0a0a0a}
.screen-map-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:45px;align-items:center}
.screen-map-grid h2{font:700 clamp(32px,4vw,54px)/1 "Space Grotesk",sans-serif}
.screen-map-grid p{color:#aaa;line-height:1.7}
.screen-map-grid iframe{width:100%;min-height:470px;border:0;border-radius:20px}
.screen-location-pending{padding:80px 0;background:#0a0a0a;text-align:center}
.screen-location-pending span{color:#ff5a00;font-size:11px;font-weight:800;letter-spacing:.16em}
.screen-location-pending h2{font:700 40px "Space Grotesk",sans-serif}
.screen-location-pending p{color:#999}
.screen-detail-footer-cta{padding:55px 0;background:#111}
.screen-detail-footer-cta .container{display:flex;justify-content:space-between;align-items:center;gap:25px}
.screen-detail-footer-cta p{font-size:19px;font-weight:700}
.screen-not-found{min-height:75vh;display:grid;align-items:center;padding:150px 0;background:#090909}
.screen-not-found span{color:#ff5a00;font-weight:800;letter-spacing:.15em}
.screen-not-found h1{font:700 clamp(45px,7vw,85px) "Space Grotesk",sans-serif}
.screen-not-found p{color:#aaa}

@media(max-width:960px){
  .catalog-hero{padding-top:125px}
  .screens-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .screen-detail-grid,.screen-map-grid{grid-template-columns:1fr}
  .screen-detail-grid{gap:38px}
}
@media(max-width:640px){
  .catalog-hero{padding:112px 0 55px}
  .catalog-hero h1{font-size:42px}
  .catalog-hero-copy{font-size:16px}
  .catalog-section{padding:48px 0 75px}
  .catalog-toolbar{display:block}
  .catalog-toolbar p{margin-top:10px}
  .screens-grid{grid-template-columns:1fr}
  .screen-card h2{font-size:22px}
  .catalog-footer .container,.screen-detail-footer-cta .container{align-items:flex-start;flex-direction:column}
  .screen-detail-hero{padding:112px 0 56px}
  .screen-detail-grid{grid-template-columns:1fr}
  .screen-detail-photo{order:-1}
  .screen-facts dl{grid-template-columns:1fr 1fr}
  .screen-facts dl>div{border:0;border-top:1px solid #303030;padding:16px 12px}
  .screen-map-section{padding:60px 0}
  .screen-map-grid iframe{min-height:390px}
}
@media(max-width:400px){.screen-facts dl{grid-template-columns:1fr}}