*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 :root{
    --bg:#08080a;
    --bg-2:#101014;
    --bg-3:#000000;
    --white:#f5f5f7;
    --muted:#8a8a92;
    --accent:#9a9ab6;      /* acento eléctrico — cámbialo por el tuyo si querés otro */
    --accent-soft:rgba(108, 108, 117, 0.35);
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Inter', sans-serif;
    --ease:cubic-bezier(.16,1,.3,1);
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    background:var(--bg); color:var(--white); font-family:var(--font-body);
    overflow:hidden;
  }

  /* ===================== PRELOADER ===================== */
  #preloader{
    position:fixed; inset:0; z-index:999;
    background:var(--bg);
    display:flex; align-items:center; justify-content:center;
    transition:clip-path 1s var(--ease), opacity .6s ease .6s;
  }
  #preloader.is-hidden{
    clip-path:inset(0 0 100% 0);
    opacity:0;
    pointer-events:none;
  }

  /* soft pulsing glow behind the mark */
  .pl-glow{
    position:absolute; width:520px; height:520px; border-radius:50%;
    background:radial-gradient(circle, var(--accent-soft), transparent 70%);
    filter:blur(30px);
    animation:glowPulse 2.6s ease-in-out infinite;
  }
  @keyframes glowPulse{
    0%,100%{transform:scale(1); opacity:.55}
    50%{transform:scale(1.18); opacity:.9}
  }

  /* film grain */
  .pl-grain{
    position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; pointer-events:none;
    background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.6) 0 1px, transparent 1px 3px);
  }

  .pl-content{position:relative; z-index:2; text-align:center}

  /* equalizer / pulse mark next to wordmark */
  .pl-mark{
    display:flex; align-items:flex-end; justify-content:center; gap:5px;
    height:22px; margin:0 auto 22px;
  }
  .pl-mark span{
    width:4px; background:var(--accent); border-radius:2px;
    animation:eq 1.1s ease-in-out infinite;
  }
 
  @keyframes eq{
    0%,100%{transform:scaleY(.4)}
    50%{transform:scaleY(1)}
  }

  .pl-word{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(2.6rem,7vw,4.4rem);
    letter-spacing:1.2em;
    color:var(--white);
    opacity:0; filter:blur(14px);
    padding-left:1.2em; /* offsets the letter-spacing so it stays centered-ish */
    animation:wordReveal 1.3s var(--ease) forwards .3s;
  }
  @keyframes wordReveal{
    to{opacity:1; letter-spacing:.08em; filter:blur(0)}
  }

  .pl-logo-container{
    opacity:0; filter:blur(14px);
    animation:logoReveal 1.3s var(--ease) forwards .3s;
    display:flex; justify-content:center; align-items:center;
    margin:0 auto;
  }
  @keyframes logoReveal{
    to{opacity:1; filter:blur(0)}
  }
  .pl-logo-img{
    height:clamp(3.5rem, 10vw, 4.8rem);
    width:auto;
    object-fit:contain;
  }

  .pl-line{
    width:0; height:1px; margin:26px auto 18px;
    background:linear-gradient(90deg, transparent, var(--accent), transparent);
    animation:lineGrow 1s var(--ease) forwards 1.1s;
  }
  @keyframes lineGrow{to{width:220px}}

  .pl-tag{
    font-size:.68rem; letter-spacing:.42em; text-transform:uppercase;
    color:var(--muted);
    opacity:0;
    animation:tagIn .8s var(--ease) forwards 1.3s;
  }
  @keyframes tagIn{to{opacity:1}}

  .pl-counter{
    position:absolute; bottom:48px; left:0; right:0;
    display:flex; align-items:center; justify-content:center; gap:14px;
    opacity:0; animation:tagIn .6s ease forwards .6s;
  }
  .pl-counter .num{
    font-family:var(--font-display); font-variant-numeric:tabular-nums;
    font-size:.85rem; letter-spacing:.08em; color:var(--muted); min-width:34px; text-align:right;
  }
  .pl-counter .track{
    width:120px; height:1px; background:rgba(255,255,255,.12); position:relative; overflow:hidden;
  }
  .pl-counter .track::after{
    content:''; position:absolute; left:0; top:0; height:100%; width:0%;
    background:var(--accent);
  }

  /* ===================== DEMO PAGE BEHIND ===================== */
  .page{height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:26px; text-align:center; padding:20px}
  .page-mark{display:flex; align-items:flex-end; gap:5px; height:20px}
  .page-mark span{width:4px; background:var(--accent); border-radius:2px}
  .page-mark span:nth-child(1){height:7px}
  .page-mark span:nth-child(2){height:16px}
  .page-mark span:nth-child(3){height:11px}
  .page-mark span:nth-child(4){height:18px}
  .page-mark span:nth-child(5){height:9px}
  .page h1{font-family:var(--font-display); font-size:clamp(2rem,5vw,3.2rem); letter-spacing:.05em}
  .page p{color:var(--muted); max-width:420px}
  .page .btn{
    margin-top:8px; padding:16px 36px; border-radius:999px; background:var(--white); color:#0a0a0a;
    font-size:.8rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  }

:root {
  --bg: #080808;
  --bg2: #0f0f0f;
  --bg3: #161616;
  --surface: rgb(8, 8, 8);
  --surface-hover: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.07);
  --border-hover: rgba(255,255,255,0.14);
  --txt: #f0ede8;
  --txt-dim: rgba(240,237,232,0.45);
  --txt-dimm: rgba(255, 255, 255, 0.548);
  --txt-muted: rgba(240,237,232,0.22);
  --accent: #e8e4dc;
  --glow: rgba(240,237,232,0.06);
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--txt);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}

/* CURSOR */
.cur-dot {
  position: fixed; z-index: 9999; pointer-events: none;
  width: 6px; height: 6px; background: var(--txt);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  transition: width .2s, height .2s, opacity .2s;
}
.cur-ring {
  position: fixed; z-index: 9998; pointer-events: none;
  width: 36px; height: 36px;
  border: 1px solid rgba(240,237,232,0.25); border-radius: 50%;
  transform: translate(-50%,-50%);
  transition: width .35s cubic-bezier(.16,1,.3,1), height .35s cubic-bezier(.16,1,.3,1), border-color .2s;
}
.cur-dot.h { width: 10px; height: 10px; }
.cur-ring.h { width: 52px; height: 52px; border-color: rgba(240,237,232,0.5); }

/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.6rem 3rem;
  transition: padding .4s ease;
}
nav.scrolled {
  padding: 1rem 3rem;
  background: rgba(8,8,8,0.8);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  font-family: 'DM Sans', sans-serif; font-weight: 200;
  font-size: 1.1rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--txt); text-decoration: none; opacity: .9;
  display: flex;
  align-items: center;
}
.nav-logo-img {
  height: 25px;
  width: auto;
  object-fit: contain;
  opacity: 0.8; /* 50% de transparencia */
}
.nav-links { display: flex; gap: 2.5rem; list-style: none; }
.nav-links a {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--txt-dim); text-decoration: none;
  transition: color .25s, opacity .25s;
  font-weight: 300;
}
.nav-links a:hover { color: var(--txt); }
.nav-cta {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--txt); text-decoration: none; font-weight: 300;
  padding: .55rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  backdrop-filter: blur(8px);
  transition: background .25s, border-color .25s, transform .2s;
}
.nav-cta:hover { background: var(--surface-hover); border-color: var(--border-hover); transform: translateY(-1px); }

/* HERO */
.hero {
  height: 100vh; position: relative;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

/* Imagen de fondo */
.hero-img {
  position: absolute; inset: 0; z-index: 0;
  background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
}
.hero-img-inner {
  width: 100%;
  height: 100%;
  background-image: url("../imagenes/hero/fondo-index.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .6rem;

  animation: heroBreath 8s ease-in-out infinite alternate;
}
@keyframes heroBreath { from { transform: scale(1); } to { transform: scale(1.03); } }
.hero-img-hint {
  font-size: .65rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,0.12); font-style: italic; font-family: 'Cormorant', serif;
  text-align: center;
}

/* Gradiente encima de la imagen */
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(8,8,8,0.3) 0%,
    transparent 35%,
    transparent 55%,
    rgba(8,8,8,0.7) 80%,
    rgba(8,8,8,0.95) 100%
  );
}

/* Blur lateral sutil */
.hero-blur-left {
  position: absolute; left: 0; top: 0; bottom: 0; width: 30%; z-index: 1;
  background: linear-gradient(to right, rgba(8,8,8,0.6), transparent);
}

.hero-content {
  position: relative; z-index: 2;
  padding: 0 3rem 4.5rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2rem; align-items: flex-end;
}

.hero-left { }
.hero-eyebrow {
  font-size: .65rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--txt-dim); margin-bottom: 1.1rem; display: block;
  opacity: 0; animation: up .7s ease .3s forwards;
}
.hero-title {
  font-family: 'Cormorant', serif; font-weight: 300;
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  line-height: 1.05; letter-spacing: -.01em;
  opacity: 0; animation: up .9s cubic-bezier(.16,1,.3,1) .5s forwards;
}
.hero-title em { font-style: italic; color: rgba(240,237,232,0.55); }

.hero-right {
  display: flex; flex-direction: column;
  justify-content: flex-end; align-items: flex-end; gap: 1.5rem;
}
.hero-desc {
  font-size: .85rem; color: var(--txt-dimm); line-height: 1.8;
  text-align: left; max-width: 280px;
  opacity: 0; animation: up .7s ease .65s forwards;
}
.hero-actions {
  display: flex; gap: .75rem;
  opacity: 0; animation: up .7s ease .8s forwards;
}
.btn-pill {
  padding: .65rem 1.6rem; border-radius: 100px;
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; font-weight: 400;
  transition: transform .2s, box-shadow .25s, background .2s;
}
.btn-pill-solid {
  background: var(--txt); color: var(--bg);
  border: 1px solid var(--txt);
}
.btn-pill-solid:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(240,237,232,0.18); }
.btn-pill-ghost {
  background: var(--surface); color: var(--txt);
  border: 1px solid var(--border);
  backdrop-filter: blur(8px);
}
.btn-pill-ghost:hover { background: var(--surface-hover); border-color: var(--border-hover); transform: translateY(-2px); }

/* Scroll hint */
.scroll-hint {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .5rem;
  opacity: 0; animation: fadeIn 1s ease 1.3s forwards;
}
.scroll-hint span {
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--txt-muted);
}
.scroll-dot {
  width: 1px; height: 32px;
  background: linear-gradient(to bottom, var(--txt-muted), transparent);
  animation: scrollAnim 2s ease-in-out infinite;
}
@keyframes scrollAnim { 0%,100%{opacity:.3;transform:scaleY(1)} 50%{opacity:.8;transform:scaleY(1.1)} }

@keyframes up { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* SECCIONES */
.s { padding: 8rem 3rem; }
.s-inner { max-width: 1160px; margin: 0 auto; }

/* ETIQUETA DE SECCIÓN */
.s-tag {
  font-size: .62rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--txt-muted); margin-bottom: 1rem; display: block;
}

/* TÍTULOS */
.s-h {
  font-family: 'Cormorant', serif; font-weight: 300;
  font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: 1.08;
  margin-bottom: 1rem; letter-spacing: -.01em;
}
.s-h em { font-style: italic; color: var(--txt-dim); }
.s-p { font-size: .88rem; color: var(--txt-dim); line-height: 1.85; max-width: 420px; }

/* REVEAL */
.r { opacity:0; transform:translateY(28px); transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
.r.v { opacity:1; transform:none; }
.rl { opacity:0; transform:translateX(-28px); transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
.rl.v { opacity:1; transform:none; }
.rr { opacity:0; transform:translateX(28px); transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
.rr.v { opacity:1; transform:none; }
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}
.d4{transition-delay:.28s}.d5{transition-delay:.35s}

/* ===========================================================
   SERVICIOS — reemplaza estas reglas en tu css/style-1.css:
   .servicios-layout, .servicios-right, .s-card, .s-card-img
   (y el bloque @media 900px que las toca)
   =========================================================== */

.servicios-layout {
  display: grid; grid-template-columns: 1fr 2fr; gap: 6rem; align-items: start;
}
.servicios-left { position: sticky; top: 7rem; }

/* antes era flex con gap normal — ahora las tarjetas se apilan sin espacio,
   el "gap" visual lo da el offset de sticky, no un margin */
.servicios-right {
  display: flex;
  flex-direction: column;
  padding-bottom: 6rem; /* aire para que la última tarjeta pueda despegarse al final del scroll */
}

/* CARD SERVICIO — apilada por scroll */
.s-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 2.6rem 2.8rem;
  backdrop-filter: blur(16px);

  transition: background .3s, border-color .3s;
  cursor: default;
  position: sticky;              /* clave del efecto */
  box-shadow: 0 30px 60px rgba(0,0,0,0.45);
}
.s-card:hover {
  background: var(--surface-hover);
  border-color: var(--border-hover);
}

/* offset creciente por tarjeta: cada una se pega un poco más abajo que la
   anterior, dejando asomar el filo de la de arriba. Ajusta el incremento
   (28px) si quieres que se vea más o menos "escalera" */
.s-card:nth-child(1) { top: 7rem;                 z-index: 1; }
.s-card:nth-child(2) { top: calc(7rem + 28px);    z-index: 2; }
.s-card:nth-child(3) { top: calc(7rem + 56px);    z-index: 3; }
.s-card:nth-child(4) { top: calc(7rem + 84px);    z-index: 4; }
.s-card:nth-child(5) { top: calc(7rem + 112px);   z-index: 5; }

/* separación real entre tarjetas (space in normal flow, no gap) */
.s-card + .s-card { margin-top: 2.5rem; }

/* imagen agrandada */
.s-card-img {
  width: 100%; height: 200px; border-radius: 16px;
  background: var(--bg3); margin-bottom: 1.8rem;
  overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.s-card-img-inner{
    background-image: url("../imagenes/hero/lnzz_desk.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
      width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .4rem;
    position: absolute; inset: 0; z-index: 1;
     opacity: 0.9;
}
.s-card-img-inner-web{
    background-image:url("../imagenes/hero/estilo_transferido_pantalla.png");
      background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
      width: 100%; height: 100%;
   display: flex; flex-direction: column;
   align-items: center; justify-content: center; gap: .4rem;
      opacity: 0.8;
}

.s-card-img-inner-auto{
    background-image:url("../imagenes/hero/estilo_taller_sin_plantas.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
      width: 100%; height: 100%;
   display: flex; flex-direction: column;
   align-items: center; justify-content: center; gap: .4rem;
  width: 100%; height: 100%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
    opacity: 0.8;
}

/* RESPONSIVE — el efecto se mantiene en móvil, solo achicamos offsets/alturas */
@media (max-width: 900px) {
  .servicios-layout { grid-template-columns: 1fr; gap: 3rem; }
  .servicios-left { position: static; }
  .s-card-img { height: 220px; }

  .s-card:nth-child(1) { top: 5rem; }
  .s-card:nth-child(2) { top: calc(5rem + 20px); }
  .s-card:nth-child(3) { top: calc(5rem + 40px); }
  .s-card:nth-child(4) { top: calc(5rem + 60px); }
  .s-card:nth-child(5) { top: calc(5rem + 80px); }
}

@media (max-width: 640px) {
  .s-card { padding: 1.8rem 1.6rem; border-radius: 18px; }
  .s-card-img { height: 180px; }
}

/* VITRINA — sección envolvente cinematográfica */
.vit-section{ padding-left:0; padding-right:0; }
.vit-topbar{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:2.2rem;
}
.vit-tabs{
  display:flex; gap:.5rem; margin-bottom:2.2rem; flex-wrap:wrap;
}
.vit-tab{
  font-family:'DM Sans', sans-serif; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt-dim);
  background:var(--surface); border:1px solid var(--border);
  padding:.55rem 1.3rem; border-radius:100px; cursor:pointer;
  transition:background .25s, border-color .25s, color .25s;
}
.vit-tab:hover{ background:var(--surface-hover); color:var(--txt); }
.vit-tab.is-active{
  background:var(--txt); color:var(--bg); border-color:var(--txt);
}
 
/* full-bleed a propósito: se sale del max-width del .s-inner */
.vit-carousel{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
}
.vit-viewport{ width:100%; overflow:hidden; }
.vit-track{
  display:flex; transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.vit-slide{
  flex:0 0 100%; position:relative;
  height:88vh; min-height:520px; max-height:800px;
}
.vit-img{
  width:100%; height:100%;
  background-color:var(--bg3);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  animation:heroBreath 10s ease-in-out infinite alternate;
}
.vit-fade{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,8,8,.9) 0%, rgba(8,8,8,.15) 35%, transparent 60%);
}

/* video: uno para compu, uno para celular — solo se muestra el que corresponde */
.vit-media{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  display:none; /* oculto por defecto, misma especificidad que las de abajo */
}
.vit-video-desktop{ display:block; }
 
/* solo en computadora: el video se ve completo (sin recortar), centrado dentro de la misma sección */
@media (min-width:641px){
  .vit-video-desktop{
    inset:auto;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:auto;
    height:85%;
    max-width:92%;
    object-fit:contain;
  }
}
@media (max-width:640px){
  .vit-video-desktop{ display:none; }
  .vit-video-mobile{ display:block; }
}
.vit-info{
  position:absolute; left:0; right:0; bottom:0;
  padding:3rem 3.5rem;
}
.vit-cat{
  font-size:.68rem; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(240,237,232,.55); display:block; margin-bottom:.6rem;
}
.vit-name{
  font-family:'Cormorant', serif; font-size:clamp(2rem,4vw,3rem); font-weight:300; color:var(--txt);
}
.vit-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); color:var(--txt);
  backdrop-filter:blur(10px);
  font-size:1.1rem; cursor:pointer; z-index:2;
  transition:background .25s, border-color .25s, transform .2s;
}
.vit-prev{ left:2.2rem; }
.vit-next{ right:2.2rem; }
.vit-arrow:hover{ background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.3); transform:translateY(-50%) scale(1.06); }
 
.vit-dots{
  display:flex; justify-content:center; gap:.5rem; margin-top:1.8rem;
}
.vit-dots span{
  width:6px; height:6px; border-radius:50%; background:var(--txt-muted);
  cursor:pointer; transition:background .25s, transform .25s;
}
.vit-dots span.is-active{ background:var(--txt); transform:scale(1.3); }
 
 
/* SOLUCIONES — tarjetas grandes, la imagen manda */
#soluciones{ background:var(--bg2); }
.sol-header{ max-width:560px; margin-bottom:4rem; }
.sol-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem;
}
.sol-card{
  display:flex; flex-direction:column; gap:1.4rem;
}
.sol-img{
  position:relative;
  width:100%; height:340px; border-radius:20px; background:var(--bg3);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  border:1px solid var(--border);
  display:flex; align-items:flex-end; padding:1.8rem;
  transition:border-color .3s, transform .4s cubic-bezier(.16,1,.3,1);
  overflow:hidden;
}
.sol-img::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent 55%);
}
.sol-card:hover .sol-img{ border-color:var(--border-hover); transform:translateY(-4px); }
.sol-tag{
  position:relative; z-index:1;
  font-family:'Cormorant', serif; font-size:1.4rem; font-weight:300; color:var(--txt);
}
.sol-img-web{ background-image:url('../imagenes/hero/diseñoweb.png'); }
.sol-img-auto{  background-image:url('../imagenes/hero/automatizacion.png'); }
.sol-img-mail{ background-image:url('../imagenes/hero/correo.png'); }
.sol-img-dom{ background-image:url('../imagenes/hero/dominio.png'); }
.sol-desc{ font-size:.85rem; color:var(--txt-dim); line-height:1.8; max-width:90%; }
 
@media (max-width:900px){
  .vit-slide{ height:70vh; min-height:420px; }
  .vit-info{ padding:2rem; }
  .vit-arrow{ width:42px; height:42px; }
  .vit-prev{ left:1rem; }
  .vit-next{ right:1rem; }
  .sol-grid{ grid-template-columns:1fr; }
  .sol-img{ height:280px; }
}
@media (max-width:640px){
  .vit-topbar{ flex-direction:column; align-items:flex-start; gap:.8rem; }
  .vit-tabs{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:.3rem; }
}


.mb-hero-section {
  position: relative;
  width: 100%;
  min-height: 60vh;
  display: flex;
  justify-content: flex-start;   /* alineado a la izquierda */
  align-items: flex-end;         /* pegado al piso, como si se fundiera con el video */
  text-align: left;
  padding: 11rem 3rem 5rem;      /* más aire arriba (separación de la sección anterior), poco abajo */
  box-sizing: border-box;
  background: var(--bg-3);
}
 
.mb-text-container {
  max-width: 700px;
  margin: 0;
}
 
.mb-main-title {
  font-family: 'Cormorant', serif;
  font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--txt);
  min-height: 1.2em; /* evita que el layout salte mientras se escribe */
}
 
.mb-accent {
  font-style: italic;
  color: var(--txt-dim);
}
 
/* cursor tipo máquina de escribir */
.mb-cursor {
  display: inline-block;
  width: 2px;
  height: .8em;
  margin-left: 3px;
  background: var(--txt);
  vertical-align: -0.08em;
  opacity: 0;
}
.mb-cursor.is-typing { opacity: 1; }
.mb-cursor.is-blinking { opacity: 1; animation: mbBlink 1s step-end infinite; }
@keyframes mbBlink { 50% { opacity: 0; } }
 
.mb-description {
  font-family: 'DM Sans', sans-serif;
  font-size: .95rem;
  color: var(--txt-dim);
  line-height: 1.9;
  margin-top: 1.8rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.mb-description.is-visible {
  opacity: 1;
  transform: none;
}
 
@media (max-width: 640px) {
  .mb-hero-section { padding: 7rem 1.5rem 3.5rem; min-height: 68vh; }
  .mb-description br { display: none; }
}
.hero-Macbook{
    position: relative;
    width: 100%;
    height: 100vh;
    clip-path: polygon(0 0, 100% 0, 100% 91%, 0 91%);.
    
}
@media (max-width: 768px) {
  .hero-Macbook {
   clip-path: polygon(0 0, 100% 0, 100% 84%, 0 84%);
  }
}

.hero::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1;
}

.hero-bg-placeholder-Macbook{
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-bg-Macbook{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contenido{
    position: relative;
    z-index: 1;
}

/* PROCESO */
#proceso { background: var(--bg2); }
.proceso-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start;
}
.proceso-right { display: flex; flex-direction: column; gap: 1px; }
.paso {
  padding: 2rem 0; border-bottom: 1px solid var(--border);
  display: grid; grid-template-columns: 48px 1fr; gap: 1.5rem; align-items: start;
  transition: padding .25s;
  cursor: default;
}
.paso:first-child { border-top: 1px solid var(--border); }
.paso:hover { padding-left: .5rem; }
.paso-num {
  font-family: 'Cormorant', serif; font-weight: 300; font-style: italic;
  font-size: 1.4rem; color: var(--txt-muted); line-height: 1; padding-top: .2rem;
}
.paso-titulo {
  font-family: 'Cormorant', serif; font-size: 1.15rem; font-weight: 400;
  margin-bottom: .4rem; letter-spacing: -.01em;
  transition: color .25s;
}
.paso:hover .paso-titulo { color: var(--txt); }
.paso-desc { font-size: .8rem; color: var(--txt-dim); line-height: 1.8; }

/* CTA */
#cta {
  background: var(--bg);
  padding: 10rem 3rem;
  text-align: center; position: relative; overflow: hidden;
}
/* Glow de fondo */
#cta::before {
  content: '';
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 800px; height: 400px;
  background: radial-gradient(ellipse, rgba(255,255,255,0.03) 0%, transparent 70%);
  pointer-events: none;
}
.cta-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
.cta-label {
  font-size: .62rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--txt-muted); margin-bottom: 1.5rem; display: block;
}
.cta-title {
  font-family: 'Cormorant', serif; font-weight: 300;
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 1; letter-spacing: -.02em; margin-bottom: 1.2rem;
}
.cta-title em { font-style: italic; color: var(--txt-dim); }
.cta-sub {
  font-size: .85rem; color: var(--txt-dim); line-height: 1.8; margin-bottom: 2.5rem;
}
.cta-btns { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* FOOTER */
footer {
  background: var(--bg2); padding: 3.5rem 3rem 2.5rem;
  border-top: 1px solid var(--border);
}
.footer-inner {
  max-width: 1160px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 2rem; border-bottom: 1px solid var(--border);
  flex-wrap: wrap; gap: 2rem;
}
.nav-footer {
  font-family: 'DM Sans', sans-serif; font-weight: 200;
  font-size: 1.1rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--txt); text-decoration: none; opacity: .9;
  display: flex;
  align-items: center;
}
.nav-footer-img {
  height: 20px;
  width: auto;
  object-fit: contain;
  opacity: 0.8; /* 50% de transparencia */
}

.footer-links { display: flex; gap: 2.5rem; list-style: none; }
.footer-links a {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--txt-muted); text-decoration: none; transition: color .2s;
}
.footer-links a:hover { color: var(--txt); }
.footer-social { display: flex; gap: 1rem; }
.footer-social a {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--txt-muted); text-decoration: none;
  padding: .4rem 1rem; border-radius: 100px;
  border: 1px solid var(--border);
  transition: color .2s, border-color .2s, background .2s;
}
.footer-social a:hover { color: var(--txt); border-color: var(--border-hover); background: var(--surface); }
.footer-bottom {
  max-width: 1160px; margin: 1.5rem auto 0;
  display: flex; justify-content: space-between;
  font-size: .62rem; color: var(--txt-muted); letter-spacing: .08em;
  flex-wrap: wrap; gap: .5rem;
}

/* WA FLOAT */
.wa {
  position: fixed; bottom: 2rem; right: 2rem; 
  z-index: 600; width: 50px; height: 50px;
  background: #25D366;
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; text-decoration: none;
  box-shadow: 0 4px 24px rgba(37, 211, 102, 0.3);
  transition: transform .25s, box-shadow .25s;
  animation: wap 3.5s ease-in-out infinite;
}
.wa img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  transform: translate(-0.00001px, -0.2px);
}
.wa:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(37, 211, 102, 0.45);
}

@keyframes wap { 0%,100%{box-shadow:0 4px 24px rgba(37,211,102,.3)} 50%{box-shadow:0 4px 36px rgba(37,211,102,.55)} }
.wa:hover { transform: scale(1.1); animation: none; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .hero-content { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero-right { align-items: flex-start; }
  .hero-desc { text-align: left; }
  .servicios-layout { grid-template-columns: 1fr; gap: 3rem; }
  .servicios-left { position: static; }
  .port-grid { grid-template-columns: 1fr; grid-template-rows: 300px 220px 220px 220px; }
  .p-item:nth-child(1) { grid-row: auto; }
  .proceso-layout { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 640px) {
  .nav-links { display: none; }
  nav { padding: 1.2rem 1.5rem; }
  nav.scrolled { padding: .9rem 1.5rem; }
  .s { padding: 5rem 1.5rem; }
  .hero-content { padding: 0 1.5rem 3.5rem; }
  body { cursor: auto; }
  .cur-dot, .cur-ring { display: none; }
}