:root{
  --bg:#120f1f;
  --panel:#1a1530;
  --text:#f4f2f8;
  --muted:#c6c1da;
  --accent:#8b5cf6;
  --accent2:#d2b7ff;
  --line:rgba(255,255,255,.10);
  --shadow:0 18px 55px rgba(0,0,0,.55);
  --radius:22px;
  --radius2:16px;
  --max:1200px;

  /* opcional parallax fondo (JS actualiza) */
  --bgShift: 0px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}

body{
  margin:0;
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;

  /* evita “cola” abajo */
  display:flex;
  flex-direction:column;

  /* transición entre páginas */
  opacity:1;
  transition: opacity .22s ease, transform .22s ease;
}
main{flex:1}
body.menu-open{overflow:hidden}
body.is-leaving{opacity:0; transform:translateY(6px)}

body::before{
  content:"";
  position:fixed;
  inset:-40%;
  transform: translateY(var(--bgShift));
  background:
    radial-gradient(700px 400px at 15% 10%, rgba(139,92,246,.25), transparent 60%),
    radial-gradient(600px 400px at 85% 15%, rgba(196,167,255,.18), transparent 60%),
    radial-gradient(700px 500px at 50% 90%, rgba(139,92,246,.12), transparent 60%);
  pointer-events:none;
  z-index:-1;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button{font-family:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}

.muted{color:var(--muted);font-weight:750}
.sp-14{height:14px}

/* Accesibilidad */
.skip-link{
  position:absolute;left:-999px;top:10px;
  background:rgba(255,255,255,.10);
  border:1px solid var(--line);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  z-index:999;
}
.skip-link:focus{left:12px}

:focus-visible{
  outline:2px solid rgba(210,183,255,.9);
  outline-offset:3px;
  border-radius:12px;
}

/* NAV */
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(18,15,31,.72);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;gap:14px;
  position:relative;
}
.brand img{
  height:75px;width:auto;display:block;
  filter: drop-shadow(0 10px 26px rgba(139,92,246,.22));
}

/* badge opcional en nav (si la usas) */
.nav-note{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:rgba(244,242,248,.92);
  font-weight:850;
  white-space:nowrap;
}

.menu{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.menu a{
  font-weight:700;color:var(--muted);
  padding:10px 12px;border-radius:12px;
  transition:.25s;
  border:1px solid transparent;
}
.menu a:hover{
  color:var(--text);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.06);
}
.menu a.active{
  color:var(--text);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.10);
}

.nav-ctas{display:flex}
.menu-ctas{display:none}

/* Botón menú móvil */
.menu-btn{
  display:none;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 12px;border-radius:14px;
  cursor:pointer;
}
.menu-icon{width:22px;height:14px;display:block;position:relative}
.menu-icon::before,.menu-icon::after{
  content:"";
  position:absolute;left:0;right:0;
  height:2px;border-radius:999px;
  background:rgba(244,242,248,.92);
}
.menu-icon::before{top:1px}
.menu-icon::after{bottom:1px}

/* Buttons */
.btn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 14px;border-radius:14px;
  font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;white-space:nowrap;
  cursor:pointer;

  transition:transform .2s ease, filter .2s ease, background .2s ease;
  position:relative;
  overflow:hidden;
}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.10)}
.btn:active{transform:translateY(0) scale(.98)}

.btn::after{
  content:"";
  position:absolute;inset:-2px;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.12) 35%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  pointer-events:none;
}
.btn:hover::after{transform:translateX(120%)}

.btn.primary{
  border:0;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#120a1f;
  box-shadow:0 18px 40px rgba(139,92,246,.20);
  outline:1px solid rgba(196,167,255,.18);
}
.btn.primary:hover{transform:translateY(-2px);filter:saturate(1.06)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* HERO */
.hero{padding:66px 0 10px}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:26px;
  align-items:stretch;
}
.hero-copy{min-width:0}

.pill{
  display:inline-flex;gap:10px;align-items:center;
  padding:8px 12px;border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-weight:800;
  width:fit-content;
}
.dot{
  width:9px;height:9px;border-radius:999px;
  background:var(--accent2);
  box-shadow:0 0 0 6px rgba(196,167,255,.10);
}

h1{
  margin:14px 0 12px;
  font-size:clamp(34px, 4.2vw, 54px);
  line-height:1.05;
  letter-spacing:-.6px;
}

.grad{
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  background-size:200% 200%;
  animation: gradMove 7s ease-in-out infinite;
}
@keyframes gradMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.lead{
  margin:0 0 18px;
  color:var(--muted);
  font-size:18px;
  line-height:1.6;
  max-width:62ch;
}
.mini{
  display:flex;gap:12px;flex-wrap:wrap;
  margin-top:16px;color:var(--muted);
  font-weight:800;
}
.mini span{
  display:inline-flex;gap:8px;align-items:center;
  padding:8px 10px;border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.03);
}

/* Glass */
.card,.box,.work,.panel,.quote,.review-card,.result-card,.pack,.process-card,.t-card,.service-card{
  backdrop-filter: blur(8px);
}

/* Cards hover premium */
.card,.work,.box,.panel,.quote,.review-card,.result-card,.pack,.t-card{
  transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
  transform-style: preserve-3d;
}
.card:hover,.work:hover,.box:hover,.panel:hover,.quote:hover,.review-card:hover,.result-card:hover,.pack:hover,.t-card:hover{
  transform: translateY(-3px) rotateX(1deg) rotateY(-1deg);
}

/* Card / showcase */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.showcase{padding:18px;height:100%;display:flex;flex-direction:column;gap:12px}
.video-wrap{
  border-radius:var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  overflow:hidden;
  height:260px;
  position:relative;
  box-shadow:0 20px 55px rgba(0,0,0,.55);
}
.video-wrap video{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02)}
.video-overlay{
  position:absolute;inset:0;
  background:radial-gradient(600px 260px at 35% 20%, rgba(139,92,246,.12), transparent 55%);
  pointer-events:none;
}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kpi{
  padding:14px;border-radius:var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}
.kpi b{display:block;font-size:18px}
.kpi small{color:var(--muted);font-weight:800}

/* Sections */
section{padding:52px 0}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-bottom:18px;
}
h2{
  margin:0;
  font-size:clamp(22px, 2.6vw, 34px);
  letter-spacing:-.4px;
}
.sub{color:var(--muted);font-weight:750;max-width:80ch;line-height:1.7}

.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

/* Box */
.box{
  padding:18px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}
.tag{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:900;
  padding:7px 10px;border-radius:999px;
  background:rgba(139,92,246,.16);
  border:1px solid rgba(139,92,246,.22);
  width:fit-content;
  margin-bottom:10px;
}
.tag.soft{background:rgba(196,167,255,.12);border-color:rgba(196,167,255,.18)}
.box h3{margin:0 0 8px;font-size:18px}
.box p{margin:0;color:var(--muted);line-height:1.65;font-weight:650}

/* Results */
.results{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.result-card{
  padding:18px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}
.result-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.result-kpis{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.kpi-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border:1px solid rgba(255,255,255,.10);
  border-radius:999px;background:rgba(18,15,31,.35);
  font-weight:850;
}
.kpi-pill b{font-size:18px}

/* Quotes (texto tipo testimonio) */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.quote{
  padding:18px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}
.quote p{margin:0;color:var(--muted);font-weight:650;line-height:1.7}
.quote .who{margin-top:12px;font-weight:900;display:flex;align-items:center;gap:10px}
.avatar{
  width:34px;height:34px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(139,92,246,.18);
  border:1px solid rgba(139,92,246,.24);
  font-weight:900;
}

/* Portfolio */
.work{
  overflow:hidden;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow);
}
.thumb{aspect-ratio:16/10;width:100%;object-fit:cover;display:block}
.work-body{padding:16px}
.meta{display:flex;gap:8px;flex-wrap:wrap;font-weight:900;margin-bottom:10px}
.chip{
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(18,15,31,.45);
}
.work h3{margin:0 0 8px;font-size:18px}
.work p{margin:0;color:var(--muted);font-weight:650;line-height:1.6}
.work-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* ====== Portfolio filters ====== */
.work.is-hidden { display: none; }

/* Botón activo (ajusta a tu estilo si quieres) */
.filter-btn { opacity: .6; }
.filter-btn.is-active { opacity: 1; }

/* Opcional: mejor feedback al pasar el ratón */
.filter-btn:hover { opacity: 1; }


.filter-btn:hover{background:rgba(255,255,255,.08)}
.filter-btn.active{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.16)}

/* CTA band */
.cta-band{
  padding:18px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
}
.cta-band b{font-size:18px}
.cta-band span{color:var(--muted);font-weight:750;line-height:1.6}

/* CONTACT */
.page-head{padding:56px 0 18px}
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}
.panel{
  padding:18px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:var(--shadow);
}
label{display:block;font-weight:900;margin:10px 0 8px}
input,textarea,select{
  width:100%;
  padding:12px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(18,15,31,.45);
  color:var(--text);
  outline:none;
  font-weight:650;
}
input::placeholder,textarea::placeholder{color:rgba(198,193,218,.65)}
textarea{min-height:130px;resize:vertical}
.hr{height:1px;background:rgba(255,255,255,.10);margin:16px 0}
.help{color:var(--muted);font-weight:750;margin:8px 0 0;line-height:1.7}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:900;padding:7px 10px;border-radius:999px;
  background:rgba(139,92,246,.16);
  border:1px solid rgba(139,92,246,.22);
  width:fit-content;
  margin:0 10px 10px 0;
}

/* SERVICES accordion */
.service-card{
  position:relative;
  padding:0;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}
.service-toggle{
  width:100%;
  background:none;border:none;color:inherit;
  padding:18px;
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;
  text-align:left;
  cursor:pointer;
}
.service-head{display:flex;flex-direction:column;gap:6px}
.service-icon{
  font-size:22px;font-weight:900;
  color:var(--accent2);
  transition:transform .3s ease;
}
.service-content{
  max-height:0;
  overflow:hidden;
  opacity:0;
  padding:0 18px;
  transition:max-height .45s ease, opacity .25s ease;
}
.service-content p{
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.6;
  font-weight:650;
}
.service-card.active .service-content{max-height:520px;opacity:1}
.service-card.active .service-icon{transform:rotate(45deg)}
.service-cta{padding:0 0 18px}

/* glow focus */
.services-focus .service-card{opacity:.65;filter:saturate(.95)}
.services-focus .service-card.active{
  opacity:1;filter:none;
  transform:translateY(-3px);
  border-color:rgba(210,183,255,.35);
  box-shadow:
    0 0 0 1px rgba(210,183,255,.10),
    0 24px 70px rgba(0,0,0,.55),
    0 0 60px rgba(139,92,246,.22);
}
.services-focus .service-card.active::before{
  content:"";
  position:absolute;inset:-1px;
  border-radius:var(--radius);
  padding:1px;
  background:linear-gradient(135deg, rgba(139,92,246,.55), rgba(210,183,255,.35), rgba(139,92,246,.15));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:.85;
}

/* PACKS (si los usas) */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pack{
  padding:18px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}
.pack .price{font-weight:950;font-size:26px;letter-spacing:-.4px}
.pack ul{
  margin:12px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
  color:var(--muted);
  font-weight:700;
}
.pack ul li::before{content:"✅";margin-right:8px}

/* GOOGLE REVIEWS */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.review-card{
  padding:20px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:var(--shadow);
}
.review-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.review-avatar{
  width:44px;height:44px;border-radius:999px;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  display:flex;align-items:center;justify-content:center;
  font-weight:900;color:#120a1f;
}
.stars{color:#facc15;font-weight:900;letter-spacing:2px}
.review-card p{margin:0;color:var(--muted);line-height:1.6;font-weight:650}

/* ===== TIMELINE PREMIUM: CÓMO TRABAJO ===== */
.timeline{
  position:relative;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin-top:10px;
}
.timeline::before{
  content:"";
  position:absolute;
  left:18px;
  top:12px; bottom:12px;
  width:1px;
  background:rgba(255,255,255,.08);
  display:none; /* solo móvil */
}

.t-item{display:flex;gap:14px;align-items:flex-start;position:relative}
.t-dot{
  flex:0 0 auto;
  width:36px;height:36px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(139,92,246,.16);
  border:1px solid rgba(139,92,246,.25);
  box-shadow:0 0 0 6px rgba(196,167,255,.08);
  margin-top:6px;
}
.t-dot span{font-weight:900;color:rgba(244,242,248,.95)}
.t-card{
  width:100%;
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow);
}
.t-title{font-weight:900;letter-spacing:-.2px;font-size:18px}
.t-desc{margin:10px 0 0;color:var(--muted);font-weight:650;line-height:1.65}
.t-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.t-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border:1px solid rgba(255,255,255,.10);
  border-radius:999px;background:rgba(18,15,31,.35);
  color:rgba(244,242,248,.92);
  font-weight:850;
}
.timeline-cta{
  margin-top:14px;
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
}

/* FOOTER (compacto) */
.footer-pro{
  margin-top:28px;
  padding:28px 0 10px;
  background:linear-gradient(180deg, rgba(10,8,18,0) 0%, rgba(12,9,25,0.78) 18%, rgba(10,8,18,0.96) 100%);
  border-top:1px solid rgba(139,92,246,.35);
  box-shadow:0 -30px 70px rgba(0,0,0,.55);
  position:relative;
}
.footer-pro::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:.7;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1.1fr;
  gap:16px;
  align-items:start;
}
.footer-brand{display:flex;flex-direction:column;gap:10px}
.footer-logo{display:inline-flex;align-items:center;gap:10px}
.footer-logo img{height:70px;width:auto;filter:drop-shadow(0 10px 26px rgba(139,92,246,.18))}
.footer-title{font-weight:900;color:var(--text);letter-spacing:-.2px}
.footer-desc{margin:0;line-height:1.7;font-weight:750;color:var(--muted);max-width:42ch}
.footer-col h4{margin:2px 0 10px;color:var(--text);font-weight:900;font-size:14px;letter-spacing:.2px}
.footer-links{display:grid;gap:8px}
.footer-links a{
  color:var(--muted);font-weight:750;
  padding:6px 8px;border-radius:10px;width:fit-content;
  transition:.2s;border:1px solid transparent;
}
.footer-links a:hover{color:var(--text);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}
.footer-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.footer-mini{margin-top:10px;font-size:13px;font-weight:750;color:rgba(184,179,201,.9)}
.footer-bottom{
  margin-top:10px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-weight:750;
}
.footer-legal{display:flex;gap:12px;flex-wrap:wrap}
.footer-bottom a{color:rgba(184,179,201,.9);font-weight:800}
.footer-bottom a:hover{color:var(--text)}

/* =========================
   ANIMACIONES SEGURAS
========================= */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
  body{transform:none !important;}
}

/* reveal SOLO con JS (.js la añade main.js) */
.js .reveal{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.js .reveal.in-view{opacity:1;transform:translateY(0)}
.js .reveal-left{transform:translateX(-20px)}
.js .reveal-right{transform:translateX(20px)}
.js .reveal-left.in-view,
.js .reveal-right.in-view{transform:translateX(0)}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr 1fr}
  .grid3{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr}
  .results{grid-template-columns:1fr}
  .packs{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr}

  /* timeline móvil real */
  .timeline{grid-template-columns:1fr}
  .timeline::before{display:block}
  .t-item{padding-left:6px}
  .t-dot{margin-left:-6px}

  /* menú móvil */
  .menu-btn{display:inline-flex;align-items:center;justify-content:center}
  .nav-ctas{display:none}

  .menu{
    position:absolute;
    left:0; right:0; top:100%;
    background: rgba(18,15,31,.92);
    border-bottom:1px solid var(--line);
    padding:12px 22px 16px;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  .menu.open{display:flex}
  .menu a{width:100%}

  .menu-ctas{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:10px;
    width:100%;
  }
}

@media (max-width:520px){
  .grid4{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .btn-row{width:100%}
  .btn{width:100%}
  .menu-ctas .btn{width:100%}

  /* un pelín menos aire en móvil */
  section{padding:38px 0}
  .hero{padding:54px 0 8px}
}

/* =========================
   FILTROS PORTFOLIO (premium)
   ========================= */


/* Contenedor */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:14px;
}

/* En móvil: que puedan deslizarse si no caben */
@media (max-width: 700px){
  .filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
    scroll-snap-type:x mandatory;
  }
  .filters::-webkit-scrollbar{ height:6px; }
  .filters::-webkit-scrollbar-thumb{ border-radius:999px; }
  .filter-btn{ scroll-snap-align:start; }
}

/* Botón chip */
.filter-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font: inherit;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  line-height: 1;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
  opacity: .78;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Hover */
.filter-btn:hover{
  opacity: 1;
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
}

/* Focus accesible */
.filter-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.16);
}

/* Activo */
.filter-btn.is-active{
  opacity: 1;
  border-color: rgba(255,255,255,.28);
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

/* Pequeña animación al click */
.filter-btn:active{
  transform: translateY(0);
}

/* Ocultar works filtrados (ya lo tenías pero lo dejo aquí por claridad) */
.work.is-hidden{ display:none; }
.thumb{
  width:100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
}
.thumb{
  width:100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display:block;
}

/* =========================
   VIDEO VERTICAL PORTFOLIO
   ========================= */

.video-wrap{
  display:flex;
  justify-content:center;
  background: #0f0f14;
  padding: 20px 0;
  border-radius: 16px 16px 0 0;
}

.vertical-video{
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 280px;
  border-radius: 16px;
  object-fit: cover;
  background:black;
  transition: transform .6s ease;
}

.work:hover .vertical-video{
  transform: scale(1.04);
}
/* =========================
   IPHONE MOCKUP PORTFOLIO
   ========================= */

.iphone-wrap{
  display:flex;
  justify-content:center;
  padding: 30px 0;
  background: linear-gradient(135deg,#0f0f14,#151520);
  border-radius: 16px 16px 0 0;
}

.iphone{
  position: relative;
  width: 300px;
  aspect-ratio: 9 / 16;
  background: rgb(0, 0, 0);
  border-radius: 38px;
  padding: 14px;
  box-shadow:
    0 40px 80px rgba(0,0,0,.6),
    inset 0 0 0 2px rgba(255,255,255,.05);
  transition: transform .4s ease;
}

.work:hover .iphone{
  transform: translateY(-6px) scale(1.03);
}

.iphone-video{
  width:100%;
  height:100%;
  object-fit: cover;
  border-radius: 26px;
}

.iphone-notch{
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  width:80px;
  height:16px;
  background:#111;
  border-radius:12px;
  z-index:2;
}
/* =========================
   LIGHTBOX
   ========================= */

.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: .3s ease;
  z-index: 9999;
}

.lightbox.active{
  opacity: 1;
  visibility: visible;
}

.lightbox-img{
  max-width: 90%;
  max-height: 85%;
  border-radius: 16px;
  box-shadow: 0 40px 100px rgba(0,0,0,.8);
}

.lightbox-close{
  position: absolute;
  top: 30px;
  right: 40px;
  font-size: 40px;
  color: white;
  cursor: pointer;
  transition: .2s ease;
}
/* =========================
   VIDEO MODAL (FIX)
   ========================= */

.video-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: .25s ease;
  z-index: 10000; /* más alto que el lightbox */
}

.video-modal.active{
  opacity: 1;
  visibility: visible;
}

.video-player{
  display: block;
  width: min(980px, 92vw);
  max-height: 85vh;
  height: auto;
  border-radius: 16px;
  background: #000;
  box-shadow: 0 40px 100px rgba(0,0,0,.8);
}

.video-close{
  position: absolute;
  top: 24px;
  right: 32px;
  font-size: 42px;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  user-select: none;
}
/* =========================
   FIXES (limpieza rápida)
   ========================= */

/* 1) Miniaturas: una sola regla final (portfolio) */
.work .thumb{
  width:100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display:block;
  border-radius: 16px 16px 0 0;
}

/* 2) Evita conflictos: el video-wrap del hero se queda como está
   y el del portfolio vertical lo renombramos a .portfolio-video-wrap si lo usas. */
/* =========================
   PORTFOLIO HOVER CINEMÁTICO
   ========================= */

.work{
  position: relative;
  overflow: hidden;
}

.work .thumb{
  transition: transform .6s ease, filter .6s ease;
}

/* Capa oscura suave */
.work::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.65) 0%,
    rgba(0,0,0,.35) 40%,
    rgba(0,0,0,.05) 70%
  );
  opacity:0;
  transition: opacity .4s ease;
  pointer-events:none;
  z-index:1;
}

/* Contenido por encima */
.work-body{
  position:relative;
  z-index:2;
  transition: transform .4s ease;
}

/* Hover efecto */
.work:hover .thumb{
  transform: scale(1.05);
  filter: brightness(.85);
}

.work:hover::before{
  opacity:1;
}

.work:hover .work-body{
  transform: translateY(-6px);
}
/* =========================
   MOBILE POLISH
   ========================= */

/* Evita zoom raro en iPhone al tocar inputs */
input, textarea, select{
  font-size:16px;
}

/* Mejor experiencia de tap: evita selección accidental */
.btn, .filter-btn, .service-toggle{
  -webkit-tap-highlight-color: transparent;
}

/* Hover solo en dispositivos con ratón (evita efectos raros en móvil) */
@media (hover: none){
  .card:hover, .work:hover, .box:hover, .panel:hover, .quote:hover,
  .review-card:hover, .result-card:hover, .pack:hover, .t-card:hover{
    transform:none;
  }
  .work:hover .thumb{
    transform:none;
  }
}
/* --- Videos en cards (evita negro y asegura cover) --- */
.thumb-media { background:#000; }

.preview-video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  background:#000;
}

/* Si usas .thumb en <video>, mantenemos proporción */
.work > .thumb-media .thumb.preview-video{
  aspect-ratio:16/9;
  border-radius:16px 16px 0 0;
}

/* iPhone video ya lo tienes, pero aseguro display */
.iphone-video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  background:#000;
}