/* ============================================================
   MirallesElec — public site (server-rendered from the CMS)
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:84px;}
body{background:#0d0d0e;color:#ece9e3;font-family:'Archivo',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
input,textarea,button{font-family:inherit;}
::selection{background:#d63b27;color:#fff;}

@keyframes rise{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}

/* ---------- Interactions ---------- */
.nav-link{transition:color .2s;}
.nav-link:hover{color:#ece9e3;}
.btn-primary{transition:background .2s;}
.btn-primary:hover{background:#b8311f;}
.btn-ghost{transition:border-color .2s;}
.btn-ghost:hover{border-color:#d63b27;}
.lang-link{transition:color .2s;}
.lang-link:hover{color:#ece9e3;}
.contact-link{transition:color .2s;}
.contact-link:hover{color:#d63b27;}
.field{transition:border-color .2s;}
.field:focus{border-color:#d63b27;}
.service-row{transition:background .25s,padding .25s;}
.service-row:hover{background:#141417;padding-left:30px;}
.work-card img{transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.work-card:hover img{transform:scale(1.05);}

/* ---------- Heroes ---------- */
.hero-cine{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;}
.hero-edit{min-height:100vh;display:grid;grid-template-columns:1.08fr 0.92fr;padding-top:72px;}
.hero-tech{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:120px 6vw 80px;text-align:center;overflow:hidden;}

/* ---------- Grids ---------- */
.about-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:60px;align-items:start;}
.service-row{display:grid;grid-template-columns:84px 1fr;gap:24px;align-items:center;padding:30px 18px;border-bottom:1px solid rgba(255,255,255,0.1);}
.service-row-inner{display:grid;grid-template-columns:minmax(180px,0.7fr) 1.3fr;gap:24px;align-items:baseline;}
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.atelier-grid{display:grid;grid-template-columns:0.95fr 1.05fr;align-items:stretch;min-height:560px;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.specs-row{display:flex;gap:44px;margin-top:64px;padding-top:30px;border-top:1px solid rgba(255,255,255,0.1);flex-wrap:wrap;}

/* ---------- Nav links ---------- */
.nav-links{display:none;align-items:center;gap:38px;font-size:12.5px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:#a6a39e;}
@media (min-width:920px){.nav-links{display:flex;}}

/* ---------- Missing-image fallback ---------- */
.img-fallback{background-image:repeating-linear-gradient(135deg,#1a1a1d 0 15px,#151517 15px 30px)!important;background-size:auto!important;}
.work-card .card-code-center{display:none;}
.work-card.is-placeholder .card-code-center{display:flex;}

/* ============================================================ Responsive */
@media (max-width:920px){
  .hero-edit{grid-template-columns:1fr;}
  .hero-edit .hero-media{min-height:52vh;order:-1;}
  .contact-grid{grid-template-columns:1fr;gap:40px;}
  .atelier-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .about-grid{grid-template-columns:1fr;gap:26px;}
  .work-grid{grid-template-columns:1fr;}
  .service-row{grid-template-columns:44px 1fr;gap:14px;padding:24px 14px;}
  .service-row:hover{padding-left:22px;}
  .service-row-inner{grid-template-columns:1fr;gap:8px;}
  .specs-row{gap:28px;margin-top:44px;}
}
@media (max-width:520px){
  .form-row{grid-template-columns:1fr;}
}