/* =========================================================
   LA AMPLIFICADORA — styles.css
   Sistema visual conservado íntegramente.
   Único cambio estructural: animación del Hero (isotipo oficial vectorizado).
   ========================================================= */

:root{
  --charcoal:#1c1917;
  --charcoal-2:#242020;
  --cream:#f4f1ec;
  --cream-2:#ece7de;
  --ink:#2b2826;
  --ink-soft:#6b645d;
  --orange:#eb833c;
  --magenta:#c93e75;
  --coral:#dd615d;
  --line: rgba(244,241,236,0.14);
  --gradient: linear-gradient(90deg, var(--magenta) 0%, var(--coral) 50%, var(--orange) 100%);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Poppins',sans-serif;
  background:var(--cream);
  color:var(--ink);
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:'Archivo',sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.02;
}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img{max-width:100%;display:block;}

/* ---------- ACCESIBILIDAD (Sprint 5) ---------- */
/* Enlace "saltar al contenido": invisible hasta recibir foco de teclado,
   no altera la apariencia visual normal del sitio. */
.skip-link{
  position:absolute;
  top:-100px;
  left:16px;
  z-index:1000;
  background:var(--charcoal);
  color:var(--cream);
  padding:12px 20px;
  border-radius:8px;
  font-family:'Poppins',sans-serif;
  font-size:14px;
  font-weight:600;
  border:2px solid var(--orange);
  transition:top .2s ease;
}
.skip-link:focus{
  top:16px;
}

/* Indicador de foco visible y consistente con la marca para toda navegación
   por teclado (enlaces, botones, controles). Solo aparece con :focus-visible
   (teclado), no con clic de mouse, para no alterar la experiencia visual. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:3px;
  border-radius:2px;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
.eyebrow{
  font-family:'Poppins',sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px;height:2px;
  background:var(--gradient);
  display:inline-block;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 26px;
  border-radius:100px;
  font-weight:600;
  font-size:14.5px;
  cursor:pointer;
  border:none;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-solid{
  background:var(--gradient);
  background-size:180% 100%;
  background-position:0% 0%;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,0.35);
  box-shadow:0 8px 24px -8px rgba(201,62,117,0.55);
}
.btn-solid:hover{background-position:100% 0%;box-shadow:0 12px 30px -8px rgba(201,62,117,0.7);}
.btn-ghost{
  background:transparent;
  border:1.5px solid var(--line);
  color:var(--cream);
}
.btn-ghost:hover{border-color:var(--cream);}

/* ---------- HEADER ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:22px 0;
  transition:padding .4s ease, background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{
  padding:14px 0;
  background:rgba(28,25,23,0.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1180px;margin:0 auto;padding:0 32px;
}
.logo{
  display:flex;align-items:center;
}
.logo img{height:41px;width:auto;display:block;}
.navlinks{
  display:flex;align-items:center;gap:38px;
  font-size:14.5px;font-weight:500;
  color:rgba(244,241,236,0.78);
}
.navlinks a{position:relative;padding:4px 0;transition:color .25s ease;}
.navlinks a:hover{color:var(--cream);}
.navlinks a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;
  background:var(--gradient);transition:width .3s ease;
}
.navlinks a:hover::after{width:100%;}
.nav-cta{display:flex;align-items:center;gap:18px;}

/* ---------- MENÚ MÓVIL (Hotfix v3.0.1) ---------- */
/* Oculto en escritorio; se activa dentro de los breakpoints responsive más abajo. */
.menu-toggle{
  display:none;
  width:44px;height:44px;flex-shrink:0;
  border:1.5px solid rgba(244,241,236,0.25);
  border-radius:10px;
  background:transparent;
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
  cursor:pointer;
}
.menu-toggle-bar{
  width:20px;height:2px;background:var(--cream);
  display:block;border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{
  display:none; /* solo existe funcionalmente por debajo de 980px */
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  background:
    radial-gradient(ellipse 900px 500px at 78% 18%, rgba(201,62,117,0.35), transparent 60%),
    radial-gradient(ellipse 700px 500px at 15% 85%, rgba(235,131,60,0.22), transparent 60%),
    var(--charcoal);
  color:var(--cream);
  overflow:hidden;
  padding-top:90px;
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(244,241,236,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,241,236,0.045) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 60% 40%, black 10%, transparent 75%);
  pointer-events:none;
}
.hero-inner{
  position:relative;z-index:2;
  max-width:1180px;margin:0 auto;padding:0 32px;
  width:100%;
  display:grid;grid-template-columns:1.15fr 0.85fr;gap:40px;align-items:center;
}
.hero-eyebrow{color:var(--orange);margin-bottom:26px;}
.hero h1{
  font-size:clamp(40px,5.2vw,74px);
  margin-bottom:26px;
}
.hero h1 em{
  font-style:normal;
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p.lead{
  font-size:17px;line-height:1.7;
  color:rgba(244,241,236,0.72);
  max-width:480px;
  margin-bottom:38px;
  font-weight:300;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:56px;}
.hero-meta{display:flex;gap:34px;flex-wrap:wrap;}
.hero-meta div{border-left:2px solid rgba(244,241,236,0.18);padding-left:14px;}
.hero-meta .num{font-family:'Archivo',sans-serif;font-weight:800;font-size:22px;display:block;}
.hero-meta .lab{font-size:12px;color:rgba(244,241,236,0.55);}

/* ---------- HERO WAVE STAGE (contenedor, sin cambios) ---------- */
.wave-stage{
  position:relative;
  height:460px;
  display:flex;align-items:center;justify-content:center;
}
.wave-ring{
  position:absolute;width:380px;height:380px;border-radius:50%;
  border:1px solid rgba(244,241,236,0.10);
}
.wave-ring.r2{width:300px;height:300px;}
.wave-ring.r3{width:220px;height:220px;border-color:rgba(235,131,60,0.18);}
svg.wave-main{position:relative;z-index:2;width:100%;max-width:440px;overflow:visible;}

/* ---------- ISOTIPO ANIMADO — v1.1: recorrido exacto sobre el path SVG oficial ---------- */
/* Capa 1: trazo vectorial exacto del isotipo (base, sin cambios de diseño),
   con una respiración de escala casi imperceptible. */
#isotipoBreathe{
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: isotipoBreathe 6s ease-in-out infinite;
}
@keyframes isotipoBreathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.015); }
}
#isotipoShape{ filter:url(#softGlow); }

/* Capa 2: la MISMA geometría exacta del isotipo, pintada con el naranja oficial
   (#EF843E, tal cual el manual de marca) y revelada únicamente donde pasa la
   ventana de barrido — por eso la energía "sigue cada curva y cada segmento"
   con precisión total: es literalmente el mismo trazo, no una aproximación. */
#isotipoEnergy{
  fill:#EF843E;
  mask:url(#travelMask);
  -webkit-mask:url(#travelMask);
}

/* Ventana de barrido: una franja suave que recorre el ancho completo del
   isotipo. Su gradiente interno ilumina el frente (borde de avance) y se
   desvanece hacia atrás, dejando ver únicamente el tramo "activo". */
#sweepBand{
  transform: translateX(-170px);
  animation: sweepTravel 4.4s linear infinite;
}
@keyframes sweepTravel{
  0%{ transform:translateX(-170px); }
  100%{ transform:translateX(807.89px); }
}

/* Capa 3: destello de activación al llegar la energía a la punta del Jack */
#jackGlow{
  fill:#EF843E;
  filter:url(#sparkGlow);
  opacity:0;
  transform-box: fill-box;
  transform-origin:center;
  animation: jackFlash 4.4s linear infinite;
}
@keyframes jackFlash{
  0%,76%{ opacity:0; transform:scale(.6); }
  81%{ opacity:.95; transform:scale(1.2); }
  88%,100%{ opacity:0; transform:scale(.6); }
}

/* Capa 4: onda circular sutil que se expande y desvanece al conectar */
#jackRipple{
  fill:none;
  stroke:#EF843E;
  stroke-width:2;
  opacity:0;
  transform-box: fill-box;
  transform-origin:center;
  animation: jackRipple 4.4s linear infinite;
}
@keyframes jackRipple{
  0%,79%{ opacity:0; transform:scale(.4); }
  83%{ opacity:.5; transform:scale(.65); }
  100%{ opacity:0; transform:scale(2.4); }
}

.scroll-cue{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(244,241,236,0.55);z-index:2;
}
.scroll-cue .line{width:1px;height:34px;background:linear-gradient(var(--cream),transparent);animation:scrollcue 1.8s ease-in-out infinite;}
@keyframes scrollcue{0%{transform:scaleY(0.3);opacity:.3;}50%{transform:scaleY(1);opacity:1;}100%{transform:scaleY(0.3);opacity:.3;}}

/* ---------- SECTION generic ---------- */
section{padding:120px 0;position:relative;}
.section-head{max-width:640px;margin-bottom:64px;}
.section-head h2{font-size:clamp(28px,3.4vw,42px);margin-top:18px;}
.section-head p{color:var(--ink-soft);margin-top:16px;font-size:15.5px;line-height:1.7;font-weight:300;max-width:520px;}
/* Visible por defecto: si el JavaScript no llega a ejecutarse por cualquier motivo,
   el contenido igual se muestra (sin la animación de aparición, pero nunca oculto). */
.reveal{opacity:1;transform:none;transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);}
.reveal.reveal-ready{opacity:0;transform:translateY(28px);}
.reveal.reveal-ready.in-view{opacity:1;transform:translateY(0);}

/* ---------- SERVICIOS ---------- */
.services{
  background-color: var(--charcoal); /* evita flash en blanco mientras se difiere la carga */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.services.bg-loaded{
  /* fallback para navegadores sin soporte de image-set() */
  background-image:
    linear-gradient(180deg, rgba(20,17,15,0.86), rgba(20,17,15,0.8)),
    url('../img/backgrounds/foto-cabina.png');
  background-image:
    linear-gradient(180deg, rgba(20,17,15,0.86), rgba(20,17,15,0.8)),
    image-set(
      url('../img/backgrounds/foto-cabina.webp') type('image/webp'),
      url('../img/backgrounds/foto-cabina.png') type('image/png')
    );
}
.services .section-head h2{color:var(--cream);}
.services .section-head p{color:rgba(244,241,236,0.72);}
.services .eyebrow{color:var(--orange);}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;background:transparent;border:none;}
.service-card{
  background:rgba(244,241,236,0.10);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,0.28);
  border-radius:18px;
  box-shadow:0 24px 44px -26px rgba(0,0,0,0.55);
  padding:44px 34px;
  transition:background .35s ease, transform .35s ease, box-shadow .35s ease;
}
.service-card:hover{background:rgba(244,241,236,0.16);transform:translateY(-4px);box-shadow:0 30px 54px -26px rgba(0,0,0,0.6);}
.service-icon{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gradient);
  margin:0 auto 26px;
  font-size:22px;
}
.service-card h3{font-size:19px;margin-bottom:12px;font-weight:700;letter-spacing:-0.01em;color:var(--cream);text-align:center;}
.service-card p{font-size:14.5px;color:rgba(244,241,236,0.72);line-height:1.65;font-weight:300;margin-bottom:20px;}
.service-card .tag-list{display:flex;flex-wrap:wrap;gap:8px;}
.service-card .tag{
  font-size:11.5px;font-weight:500;color:rgba(244,241,236,0.78);
  border:1px solid rgba(244,241,236,0.28);border-radius:100px;padding:5px 12px;
}

/* ---------- PROCESO ---------- */
.process{
  padding:100px 0 96px;
  background-color: var(--charcoal);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color:var(--cream);
}
.process.bg-loaded{
  background-image:
    linear-gradient(180deg, rgba(20,17,15,0.87), rgba(20,17,15,0.82)),
    url('../img/backgrounds/foto-estudio.png');
  background-image:
    linear-gradient(180deg, rgba(20,17,15,0.87), rgba(20,17,15,0.82)),
    image-set(
      url('../img/backgrounds/foto-estudio.webp') type('image/webp'),
      url('../img/backgrounds/foto-estudio.png') type('image/png')
    );
}
.process .section-head p{color:rgba(244,241,236,0.6);}
.process .eyebrow{color:var(--orange);}
.process-track{position:relative;}
.process-line-svg{position:absolute;top:29px;left:0;width:100%;height:6px;z-index:0;}
.process-line-svg path{fill:none;stroke:url(#waveGrad3);stroke-width:2;stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1) .1s;}
.process-line-svg.in-view path{stroke-dashoffset:0;}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative;z-index:1;}
.process-step .num{
  width:58px;height:58px;border-radius:50%;
  background:var(--charcoal-2);border:1.5px solid rgba(244,241,236,0.18);
  display:flex;align-items:center;justify-content:center;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:18px;
  margin-bottom:26px;
  transition:border-color .3s ease, background .3s ease;
}
.process-step:hover .num{border-color:var(--orange);background:var(--charcoal);}
.process-step h3{font-size:17px;font-weight:700;margin-bottom:10px;}
.process-step p{font-size:14px;color:rgba(244,241,236,0.55);line-height:1.6;font-weight:300;}

/* Centrar número + título de cada paso solo en escritorio (>980px).
   La descripción inferior y el comportamiento en tablet/móvil no se tocan. */
@media (min-width:981px){
  .process-step .num{margin-left:auto;margin-right:auto;}
  .process-step h3{text-align:center;}
}

/* ---------- INDICADORES — integrados en "Cómo trabajamos" ---------- */
.process-stats{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:48px;
  margin-top:64px;
  padding-top:34px;
  border-top:1px solid rgba(244,241,236,0.14);
}
.process-stats .stat{text-align:center;padding:0;border-left:none;}
.process-stats .stat .num{
  font-family:'Archivo',sans-serif;font-weight:900;font-size:36px;
  background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;line-height:1;margin-bottom:8px;
}
.process-stats .stat .lab{font-size:13px;color:rgba(244,241,236,0.6);font-weight:500;}

/* ---------- DEMO (reemplaza a Testimonios) ---------- */
.demo{
  background-color: var(--charcoal);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color:var(--cream);
}
.demo.bg-loaded{
  background-image:
    linear-gradient(180deg, rgba(20,17,15,0.88), rgba(20,17,15,0.84)),
    url('../img/backgrounds/foto-cabina-02.png');
  background-image:
    linear-gradient(180deg, rgba(20,17,15,0.88), rgba(20,17,15,0.84)),
    image-set(
      url('../img/backgrounds/foto-cabina-02.webp') type('image/webp'),
      url('../img/backgrounds/foto-cabina-02.png') type('image/png')
    );
}
.demo .section-head h2{color:var(--cream);}
.demo .section-head p{color:rgba(244,241,236,0.72);}
.demo .eyebrow{color:var(--orange);}

/* ---------- CARRUSEL DE VIDEO (Demo) ---------- */
.demo-carousel{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:
    "prev video next"
    ".    dots  .";
  align-items:center;
  gap:24px 20px;
  margin-top:48px;
}
.demo-carousel-videos{grid-area:video;max-width:820px;width:100%;margin:0 auto;}
.demo-slide{display:none;opacity:1;}
.demo-slide.is-active{display:block;transition:opacity 180ms ease;}
.demo-slide.is-fading-out{opacity:0;}
.demo-slide.is-fading-in{opacity:0;transition:none;}
.demo-video{
  width:100%;aspect-ratio:16/9;
  display:block;background:#000;
  border-radius:18px;
  box-shadow:0 30px 60px -28px rgba(0,0,0,0.6);
}
.demo-video-caption{
  text-align:center;margin-top:14px;
  font-size:13.5px;font-weight:500;
  color:rgba(244,241,236,0.6);
}
.carousel-arrow{
  grid-area:prev;
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  border:1.5px solid rgba(244,241,236,0.25);
  background:rgba(28,25,23,0.4);
  color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:border-color .3s ease, background .3s ease, transform .3s ease;
}
.carousel-arrow svg{width:20px;height:20px;}
.carousel-arrow:hover{border-color:var(--orange);background:rgba(235,131,60,0.15);}
.carousel-arrow-next{grid-area:next;}
.carousel-dots{
  grid-area:dots;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.carousel-dot{
  width:9px;height:9px;border-radius:50%;padding:0;
  border:none;background:rgba(244,241,236,0.28);
  cursor:pointer;
  transition:background .3s ease, transform .3s ease;
}
.carousel-dot.is-active{background:var(--orange);transform:scale(1.25);}

/* ---------- CTA FINAL ---------- */
.cta-final{
  background:var(--charcoal);color:var(--cream);
  padding:130px 0;text-align:center;position:relative;overflow:hidden;
}
.cta-final::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 700px 400px at 50% 20%, rgba(201,62,117,0.28), transparent 65%);
}
.cta-final .wrap{position:relative;z-index:2;}
.cta-final h2{font-size:clamp(30px,4.6vw,54px);max-width:760px;margin:22px auto 40px;}
.cta-final .btn-solid{padding:18px 38px;font-size:15.5px;}

/* ---------- FOOTER ---------- */
footer{background:var(--charcoal-2);color:rgba(244,241,236,0.6);padding:64px 0 28px;border-top:1px solid var(--line);}
.foot-grid{display:grid;grid-template-columns:1.4fr 0.8fr 0.8fr 1fr;gap:40px;margin-bottom:56px;}
.foot-logo{margin-bottom:16px;display:flex;align-items:center;justify-content:center;max-width:260px;}
.foot-logo img{height:62px;width:auto;display:block;margin:0 auto;}
.foot-col p{font-size:13.5px;line-height:1.7;max-width:260px;font-weight:300;}
.foot-col h3{font-family:'Poppins',sans-serif;line-height:normal;letter-spacing:0.12em;font-size:12px;text-transform:uppercase;color:var(--cream);margin-bottom:18px;font-weight:600;}
.foot-col ul li{margin-bottom:11px;font-size:13.5px;}
.foot-col ul li a{transition:color .25s ease;}
.foot-col ul li a:hover{color:var(--orange);}
.foot-social{display:flex;gap:10px;margin-top:20px;}
.foot-social a{
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(244,241,236,0.18);
  display:flex;align-items:center;justify-content:center;
  color:rgba(244,241,236,0.75);
  background:transparent;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .3s ease, background .35s ease, color .3s ease;
}
.foot-social a svg{width:16px;height:16px;display:block;}
.foot-social a:hover,
.foot-social a:focus-visible{
  transform:scale(1.08);
  border-color:transparent;
  background:var(--gradient);
  color:#fff;
  box-shadow:0 0 0 1px rgba(244,241,236,0.08), 0 6px 18px -4px rgba(201,62,117,0.6);
}
.foot-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:26px;border-top:1px solid var(--line);
  font-size:12.5px;color:rgba(244,241,236,0.58);flex-wrap:wrap;gap:12px;
}

/* ---------- PÁGINA PORTAFOLIO (portafolio.html) — galería ---------- */
/* Fondo único y continuo para toda la página Portafolio (header + galería),
   evitando el corte que se veía antes entre dos fondos independientes. */
.portfolio-page{
  background:
    radial-gradient(ellipse 900px 500px at 78% 18%, rgba(201,62,117,0.28), transparent 60%),
    radial-gradient(ellipse 700px 500px at 15% 85%, rgba(235,131,60,0.18), transparent 60%),
    var(--charcoal);
}
.portfolio-header{
  padding:160px 0 56px;
  text-align:center;
  color:var(--cream);
}
.portfolio-header .eyebrow{color:var(--orange);}
.portfolio-header h1{font-size:clamp(34px,5vw,56px);margin:18px 0 14px;}
.portfolio-header p{font-size:16px;color:rgba(244,241,236,0.7);font-weight:300;max-width:560px;margin:0 auto;}

.portfolio-gallery-section{
  padding:0 0 120px;
  color:var(--cream);
}
/* Videos ~33% más grandes en escritorio: se amplía únicamente el contenedor
   de esta sección (no el .wrap global) para aprovechar más ancho de página,
   conservando la misma cuadrícula de 3 columnas y el mismo diseño. */
@media (min-width:981px){
  .portfolio-gallery-section .wrap{max-width:1536px;}
}
.portfolio-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px 28px;
}
.portfolio-item{display:flex;flex-direction:column;}
.portfolio-video{
  width:100%;aspect-ratio:16/9;
  display:block;background:#000;
  border-radius:16px;
  box-shadow:0 24px 48px -26px rgba(0,0,0,0.6);
}
.portfolio-title{
  margin-top:14px;text-align:center;
  font-size:14.5px;font-weight:500;
  color:rgba(244,241,236,0.75);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  /* Header / navegación móvil */
  .navlinks{display:none;}
  .nav-cta{display:none;}
  .menu-toggle{display:flex;}
  .mobile-menu{
    display:flex;flex-direction:column;
    position:absolute;top:100%;left:0;right:0;
    background:rgba(28,25,23,0.97);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    padding:8px 32px 20px;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .mobile-menu.open{opacity:1;visibility:visible;transform:translateY(0);}
  .mobile-menu a{
    padding:14px 2px;font-size:16px;font-weight:500;color:var(--cream);
    border-bottom:1px solid rgba(244,241,236,0.08);
  }
  .mobile-menu a:last-child{border-bottom:none;}
  .mobile-menu a.mobile-menu-cta{
    margin-top:14px;
    padding:14px 20px;
    border-bottom:none;
    border-radius:100px;
    text-align:center;
    font-weight:600;
    background:var(--gradient);
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,0.35);
  }

  .hero-inner{grid-template-columns:1fr;text-align:left;}
  .wave-stage{height:280px;order:-1;}
  .service-grid{grid-template-columns:1fr;}
  .process-grid{grid-template-columns:1fr 1fr;row-gap:44px;}
  .process-line-svg{display:none;}
  .process-stats{gap:28px 44px;margin-top:48px;padding-top:28px;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .cta-final{padding:100px 0;}
  .portfolio-gallery{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:560px){
  .wrap,.nav-row,.hero-inner{padding-left:20px;padding-right:20px;}
  section{padding:80px 0;}

  /* Header compacto: altura reducida, sin superposiciones */
  header{padding:14px 0;}
  header.scrolled{padding:10px 0;}
  .logo img{height:34px;}
  .hero{padding-top:84px;}

  /* Portafolio: 1 columna, encabezado más compacto */
  .portfolio-header{padding:120px 0 40px;}
  .portfolio-gallery{grid-template-columns:1fr;gap:32px;}

  /* Hero: título, márgenes y botones ajustados a pantallas pequeñas */
  .hero h1{font-size:clamp(32px,9vw,44px);margin-bottom:16px;}
  .hero p.lead{margin-bottom:24px;}
  .hero-actions{margin-bottom:32px;}
  .wave-stage{height:220px;}
  svg.wave-main{max-width:300px;}
  .hero-meta{gap:22px;}
  .scroll-cue{display:none;}

  /* Servicios: tarjetas más compactas */
  .service-card{padding:30px 24px;}
  .service-icon{margin-bottom:18px;}
  .service-card h3{margin-bottom:8px;}
  .service-card p{margin-bottom:14px;}

  /* Cómo trabajamos: ritmo vertical más compacto y pasos centrados */
  .process{padding:64px 0 56px;}
  .process-grid{grid-template-columns:1fr;row-gap:32px;}
  .process-step{text-align:center;}
  .process-step .num{width:48px;height:48px;font-size:16px;margin:0 auto 16px;}
  .process-step h3,.process-step p{max-width:320px;margin-left:auto;margin-right:auto;}
  .process-stats{
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:24px 20px;justify-items:center;
    margin-top:40px;padding-top:24px;
  }
  .process-stats .stat:nth-child(3){grid-column:1/-1;}

  /* Demo: carrusel — video arriba, controles en fila debajo */
  .demo-carousel{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "video video video"
      "prev  dots  next";
    gap:18px 12px;
    margin-top:36px;
  }
  .carousel-arrow{width:44px;height:44px;}

  /* CTA final */
  .cta-final{padding:80px 0;}

  /* Footer: simplificado en móvil — solo logo, descripción, redes y contacto */
  footer{padding:48px 0 24px;}
  .foot-grid{grid-template-columns:1fr;gap:32px;margin-bottom:36px;justify-items:center;}
  .foot-col-nav,.foot-col-services{display:none;}
  .foot-col-brand,.foot-col-contact{text-align:center;}
  .foot-col-brand p{margin-left:auto;margin-right:auto;}
  .foot-logo img{height:54px;}
  .foot-social{justify-content:center;}
  .foot-social a{width:46px;height:46px;}
  .foot-country{display:none;}
}

@media (max-width:390px){
  .hero-actions{flex-direction:column;}
  .hero-actions .btn{width:100%;justify-content:center;}
  .foot-bottom{justify-content:center;text-align:center;}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  html{scroll-behavior:auto;}
}