/* DOSALAS Comunicación — shared stylesheet */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:#17151C;
  color:#F3F3F1;
  font-family:'Barlow',sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}
a{ color:inherit; }
img, iframe, video{ max-width:100%; }
::selection{ background:#7655FA; color:#fff; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid #80AFFB; outline-offset:3px; border-radius:2px;
}

/* ---------- keyframes ---------- */
@keyframes rotword{
  0%   { opacity:0; transform:translateY(0.42em); }
  3%   { opacity:1; transform:translateY(0); }
  22%  { opacity:1; transform:translateY(0); }
  25%  { opacity:0; transform:translateY(-0.42em); }
  100% { opacity:0; transform:translateY(-0.42em); }
}
@keyframes marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes ringspin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes ringspinR{ from{ transform:rotate(0deg); } to{ transform:rotate(-360deg); } }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
@keyframes daiaPulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:0.55; transform:scale(0.8);} }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .rw{ animation:none !important; opacity:0 !important; }
  .rw:first-of-type{ opacity:1 !important; transform:none !important; }
  .mq{ animation:none !important; }
  .ring{ animation:none !important; }
  .floaty{ animation:none !important; }
  .daia-fab .dot{ animation:none !important; }
}

/* ---------- header / nav ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:18px clamp(20px,5vw,104px);
  background:transparent; border-bottom:1px solid transparent;
  transition:background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
}
.site-header.is-scrolled{
  background:rgba(23,21,28,0.86);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:rgba(146,143,181,0.18);
}
.brand{ text-decoration:none; display:flex; align-items:center; gap:13px; line-height:1; }
.brand img{ height:23px; width:auto; display:block; }
.brand span{
  font-family:'Barlow',sans-serif; font-weight:500; font-size:10px; letter-spacing:0.42em;
  color:#928FB5; padding-top:3px; border-left:1px solid rgba(146,143,181,0.32); padding-left:13px;
}
.desktop-nav{ display:flex; align-items:center; gap:6px; }
.nav-link{
  text-decoration:none; font-family:'Barlow',sans-serif; font-size:13.5px; font-weight:500;
  letter-spacing:0.06em; color:#C0C0CF; padding:9px 15px; border-radius:100px; background:transparent;
  transition:color .2s, background .2s;
}
.nav-link:hover, .nav-link.is-active{ color:#F3F3F1; background:rgba(146,143,181,0.12); }
.nav-cta{
  text-decoration:none; font-family:'Barlow',sans-serif; font-size:13.5px; font-weight:600;
  letter-spacing:0.04em; color:#0E0C12; padding:9px 20px; border-radius:100px;
  background:linear-gradient(100deg,#5290FB,#7655FA); margin-left:6px;
  transition:transform .2s, box-shadow .2s;
}
.nav-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 26px -12px rgba(118,85,250,0.8); }
.mobile-toggle{
  display:none; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center;
  background:rgba(146,143,181,0.10); border:1px solid rgba(146,143,181,0.22); border-radius:12px; cursor:pointer;
}
.mobile-toggle span{ display:block; width:20px; height:2px; background:#F3F3F1; }

/* ---------- mobile menu ---------- */
.mobile-menu{
  position:fixed; inset:0; z-index:70; background:rgba(15,13,19,0.96);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:none; flex-direction:column; padding:22px clamp(20px,6vw,48px);
}
.mobile-menu.is-open{ display:flex; }
.mobile-menu-top{ display:flex; align-items:center; justify-content:space-between; }
.mobile-menu-top img{ height:22px; width:auto; display:block; }
.mobile-close{
  width:44px; height:44px; background:rgba(146,143,181,0.12); border:1px solid rgba(146,143,181,0.22);
  border-radius:12px; color:#F3F3F1; font-size:22px; cursor:pointer; line-height:1;
}
.mobile-nav{ display:flex; flex-direction:column; gap:4px; margin-top:44px; }
.mnav-link{
  text-decoration:none; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  font-size:30px; font-weight:600; letter-spacing:0.02em; color:#F3F3F1; padding:14px 0;
  border-bottom:1px solid rgba(146,143,181,0.16);
}
.mnav-link.is-active{ color:#80AFFB; }
.mnav-cta{
  text-decoration:none; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  font-size:30px; font-weight:600; letter-spacing:0.02em; color:#80AFFB; padding:14px 0;
}

/* ---------- buttons ---------- */
.btn-primary{
  text-decoration:none; display:inline-flex; align-items:center; gap:10px; padding:15px 26px;
  border-radius:100px; font-family:'Barlow',sans-serif; font-weight:600; font-size:15px; letter-spacing:0.02em;
  color:#0E0C12; background:linear-gradient(100deg,#5290FB,#7655FA);
  box-shadow:0 10px 34px -12px rgba(118,85,250,0.7); transition:transform .2s, box-shadow .2s; border:0; cursor:pointer;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -12px rgba(118,85,250,0.85); }
.btn-ghost{
  text-decoration:none; display:inline-flex; align-items:center; gap:10px; padding:15px 26px;
  border-radius:100px; font-family:'Barlow',sans-serif; font-weight:600; font-size:15px; letter-spacing:0.02em;
  color:#F3F3F1; background:rgba(146,143,181,0.10); border:1px solid rgba(146,143,181,0.28);
  transition:background .2s, border-color .2s;
}
.btn-ghost:hover{ background:rgba(146,143,181,0.18); border-color:rgba(146,143,181,0.5); }

/* ---------- case / video cards ---------- */
.case-card{
  position:relative; display:block; width:100%; text-align:left; padding:0;
  border:1px solid rgba(146,143,181,0.16); border-radius:16px; overflow:hidden; cursor:pointer;
  background:#1D1B23; aspect-ratio:16/10; transition:transform .25s, border-color .25s;
}
.case-card:hover{ transform:translateY(-4px); border-color:rgba(146,143,181,0.45); }
.case-card-lg{
  position:relative; display:block; width:100%; text-align:left; padding:0;
  border:1px solid rgba(146,143,181,0.16); border-radius:14px; overflow:hidden; cursor:pointer;
  background:#211E28; aspect-ratio:16/9; transition:transform .25s, border-color .25s;
}
.case-card-lg:hover{ transform:translateY(-4px); border-color:rgba(146,143,181,0.5); }

/* ---------- footer ---------- */
.footer-link{
  text-decoration:none; font-family:'Barlow',sans-serif; font-size:15px; color:#C0C0CF;
  letter-spacing:0.02em; transition:color .2s;
}
.footer-link:hover{ color:#F3F3F1; }

/* ---------- links with underline hover ---------- */
.underline-link:hover{ text-decoration:underline; }

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:90; background:rgba(10,9,13,0.86);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  display:none; align-items:center; justify-content:center; padding:clamp(16px,4vw,56px);
}
.lightbox.is-open{ display:flex; }
.lightbox-inner{ position:relative; width:min(1040px,100%); }
.lightbox-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.lightbox-title{
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-weight:600;
  font-size:clamp(16px,2.4vw,24px); letter-spacing:0.03em; color:#F3F3F1;
}
.lightbox-close{
  flex:none; width:44px; height:44px; border-radius:12px; background:rgba(146,143,181,0.14);
  border:1px solid rgba(146,143,181,0.3); color:#F3F3F1; font-size:20px; cursor:pointer; line-height:1;
}
.lightbox-frame{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden;
  border:1px solid rgba(146,143,181,0.25); background:#000;
}
.lightbox-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.lightbox-hint{ margin:14px 2px 0; font-family:'Barlow',sans-serif; font-size:12px; letter-spacing:0.04em; color:#716C86; }
.lightbox-hint span{ color:#C0C0CF; }

/* ---------- contact option cards ---------- */
.opt-card{
  text-align:left; cursor:pointer; padding:26px 26px 24px; border-radius:18px;
  border:1px solid rgba(146,143,181,0.18); background:rgba(146,143,181,0.05);
  display:flex; flex-direction:column; gap:12px; transition:transform .2s, border-color .2s, background .2s;
}
.opt-card:hover{ transform:translateY(-3px); }
.opt-card.opt-1:hover{ border-color:rgba(82,144,251,0.6); background:rgba(82,144,251,0.08); }
.opt-card.opt-2:hover{ border-color:rgba(118,85,250,0.6); background:rgba(118,85,250,0.08); }
.opt-card.opt-3:hover{ border-color:rgba(169,139,255,0.6); background:rgba(169,139,255,0.08); }
.opt-card.opt-4:hover{ border-color:rgba(192,212,223,0.6); background:rgba(192,212,223,0.08); }
.back-link:hover{ color:#F3F3F1; }
.slot-btn{
  cursor:pointer; font-family:'Barlow',sans-serif; font-size:13.5px; font-weight:500; padding:8px 10px;
  border-radius:9px; border:1px solid rgba(146,143,181,0.2); background:transparent; color:#928FB5;
  transition:border-color .15s, background .15s;
}
.slot-btn.is-active{ border-color:rgba(82,144,251,0.9); background:rgba(82,144,251,0.18); color:#F3F3F1; }
.service-btn{
  cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-family:'Barlow',sans-serif;
  font-size:14px; font-weight:500; padding:10px 16px; border-radius:100px;
  border:1px solid rgba(146,143,181,0.26); background:rgba(146,143,181,0.05); color:#C0C0CF;
  transition:border-color .15s, background .15s;
}
.service-btn.is-active{ border-color:rgba(118,85,250,0.9); background:rgba(118,85,250,0.16); color:#F3F3F1; }
.service-btn .dot{ font-weight:700; }

/* ---------- form fields ---------- */
.field{ display:flex; flex-direction:column; gap:7px; }
.field span{ font-family:'Barlow',sans-serif; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:#928FB5; }
.field input, .field textarea{
  font-family:'Barlow',sans-serif; font-size:15px; color:#F3F3F1; background:#17151C;
  border:1px solid rgba(146,143,181,0.24); border-radius:11px; padding:13px 15px; outline:none;
}
.field textarea{ resize:vertical; }

/* ---------- DAiA floating CTA ---------- */
.daia-fab{
  position:fixed; right:20px; bottom:20px; z-index:55;
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 20px 12px 15px; border-radius:100px;
  background:rgba(23,21,28,0.74);
  -webkit-backdrop-filter:saturate(140%) blur(14px); backdrop-filter:saturate(140%) blur(14px);
  border:1px solid rgba(146,143,181,0.28);
  color:#F3F3F1; text-decoration:none; font-family:'Barlow',sans-serif; font-weight:600; font-size:14px; letter-spacing:0.02em;
  box-shadow:0 10px 30px -12px rgba(0,0,0,0.55);
  transition:transform .2s, border-color .2s, background .2s;
}
.daia-fab:hover{ transform:translateY(-2px); border-color:rgba(146,143,181,0.5); background:rgba(23,21,28,0.88); }
.daia-fab .dot{
  width:9px; height:9px; border-radius:50%; flex:none;
  background:linear-gradient(100deg,#5290FB,#7655FA);
  box-shadow:0 0 10px rgba(118,85,250,0.85);
  animation:daiaPulse 2.2s ease-in-out infinite;
}
@media (max-width:600px){
  .daia-fab{ right:14px; bottom:14px; padding:10px 16px 10px 13px; font-size:13px; }
}

/* ---------- misc utility ---------- */
.hidden{ display:none !important; }

/* ---------- responsive ---------- */
@media (max-width: 1024px){
  [data-desktop-nav]{ display:none !important; }
  [data-mobile-toggle]{ display:flex !important; }
  [data-split]{ grid-template-columns:1fr !important; }
  [data-blogrow] > button{ order:0 !important; }
  [data-blogtext]{ order:1 !important; text-align:left !important; align-items:flex-start !important; }
}
@media (max-width: 600px){
  .mq span{ font-size:22px !important; padding:0 22px !important; height:44px !important; }
}