/* =========================
   BASE
========================= */
:root{
  --bg: #0b0b0f;
  --fg: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);

  --amber: #dd8448;
  --blue:  #2aa7ff;

  --container: 1200px;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  min-height: 100vh;
  color: var(--fg);
  background:
    radial-gradient(1200px 800px at 20% 20%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(900px 600px at 80% 70%, rgba(255,255,255,.05), transparent 55%),
    var(--bg);
  overflow-x: hidden;
}

/* (si tienes SVG filters en el HTML, no molestan) */
.svg-filters{ position:absolute; width:0; height:0; overflow:hidden; }

/* ✅ FIX OVERFLOW HORIZONTAL */
*, *::before, *::after{
  box-sizing: border-box;
}

html, body{
  width: 100%;
  overflow-x: hidden;
}

img, video, svg{
  max-width: 100%;
  height: auto;
  display: block;
}


/* =========================
   NAVBAR (UPDATED + HOVER WORKING)
========================= */
.navbar{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px;
  z-index: 999;
  display: flex;
  align-items: center;
  background: rgba(10,10,14,.55);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* línea inferior eléctrica */
.navbar::after{
  content:"";
  position:absolute;
  bottom:0;
  left:10%;
  width:80%;
  height:2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(221,132,72,.9),
    rgba(42,167,255,.8),
    transparent
  );
  opacity:.45;
  filter: blur(.4px);
  pointer-events:none;
}

/* contenedor */
.navbar-wrap{
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

/* =========================
   LOGO (IMAGEN)
========================= */
.navbar-logo{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  white-space: nowrap;
}

.navbar-logo-img{
  width: 120px;
  height: auto;
  display:block;
  object-fit: contain;

  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.25))
    drop-shadow(0 0 18px rgba(221,132,72,.32))
    drop-shadow(0 0 26px rgba(42,167,255,.26));

  transition: transform .25s ease, filter .25s ease;
}

/* hover logo */
@media (hover:hover) and (pointer:fine){
  .navbar-logo:hover .navbar-logo-img{
    transform: translateY(-1px) scale(1.02);
    filter:
      drop-shadow(0 0 14px rgba(255,255,255,.32))
      drop-shadow(0 0 24px rgba(221,132,72,.42))
      drop-shadow(0 0 32px rgba(42,167,255,.38));
  }
}

/* =========================
   LINKS (ELECTRIC HOVER)
========================= */
.navbar-links{
  display: flex;
  justify-content: center;
  gap: 28px;
}

.nav-link{
  display: inline-block; /* ✅ CLAVE para que ::before/::after funcionen */
  position: relative;
  z-index: 1;

  text-decoration: none;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);

  padding: 6px 2px;
  transition: color .25s ease;
}

/* subrayado eléctrico */
.nav-link::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;

  width:0;
  height:2px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(221,132,72,1),
    rgba(255,255,255,.9),
    rgba(42,167,255,1),
    transparent
  );

  transform: translateX(-50%);
  filter: blur(.25px);
  opacity:.85;

  transition: width .32s ease;
  pointer-events:none;
  z-index: 2;
}

/* glow suave */
.nav-link::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-20px;

  width:0;
  height:26px;

  transform: translateX(-50%);
  background:
    radial-gradient(60% 60% at 50% 50%,
      rgba(221,132,72,.35),
      rgba(42,167,255,.28),
      transparent 70%
    );

  filter: blur(22px);
  opacity:.85;

  transition: width .32s ease;
  pointer-events:none;
  z-index: 1;
}

/* hover (solo desktop/mouse) */
@media (hover:hover) and (pointer:fine){
  .nav-link:hover{
    color: rgba(255,255,255,.95);
  }
  .nav-link:hover::after{
    width: 100%;
  }
  .nav-link:hover::before{
    width: 120%;
  }
}
/* FIX: quitar “subrayado” debajo del logo (link con imagen) */
/* =========================
   FIX: línea rara debajo del logo
========================= */

/* 1) Por si quedó un pseudo-elemento viejo en el logo */
.navbar-logo::before,
.navbar-logo::after,
.navbar-logo-img::before,
.navbar-logo-img::after{
  content: none !important;
  display: none !important;
}



/* =========================
   HERO (UPGRADED + 3D TITLE)
========================= */
.hero-electric{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(24px, 4vw, 64px);
  overflow:hidden;
  position:relative;
  isolation:isolate;
}

/* =========================
   BACKGROUND
========================= */
.hero-electric::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(120% 90% at 18% 28%, rgba(221,132,72,.14), transparent 58%),
    radial-gradient(120% 90% at 86% 72%, rgba(42,167,255,.12), transparent 62%),
    radial-gradient(800px 520px at 50% 35%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.82));
  z-index:-3;
}

/* Electric flow */
.hero-electric::after{
  content:"";
  position:absolute; inset:-80px;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(2px 2px at 40% 80%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(110deg,
      transparent 0%,
      rgba(221,132,72,.0) 36%,
      rgba(221,132,72,.10) 49%,
      rgba(42,167,255,.08) 56%,
      transparent 72%
    );
  opacity: .42;
  filter: blur(1px);
  animation: heroFlow 8.5s ease-in-out infinite;
  z-index:-2;
  pointer-events:none;
}

@keyframes heroFlow{
  0%   { transform: translate3d(-2%, -1%, 0) rotate(-1deg); }
  50%  { transform: translate3d(2%, 1%, 0) rotate(1deg); }
  100% { transform: translate3d(-2%, -1%, 0) rotate(-1deg); }
}

/* Glow extra */
.hero-glow{
  position:absolute;
  inset:-120px;
  background:
    radial-gradient(700px 520px at 30% 45%, rgba(221,132,72,.18), transparent 60%),
    radial-gradient(760px 560px at 75% 55%, rgba(42,167,255,.14), transparent 62%);
  filter: blur(30px);
  opacity: .55;
  z-index:-1;
  pointer-events:none;
}

/* Noise */
.hero-noise{
  position:absolute;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity:.10;
  mix-blend-mode: overlay;
  z-index:-1;
  pointer-events:none;
}

/* =========================
   LAYOUT
========================= */
.hero-wrap{
  width: min(var(--container), 100%);
  margin: 0 auto;
  display:grid;
  place-items:center;
  text-align:center;
}

/* =========================
   TEXT
========================= */
.hero-copy{
  max-width: 820px;
  display:flex;
  flex-direction:column;
  align-items:center;
  transform: translateY(14px);
  opacity: 0;
  animation: heroIn .9s ease forwards;
}

@keyframes heroIn{
  to { transform: translateY(0); opacity: 1; }
}

.hero-kicker{
  letter-spacing:.34em;
  text-transform:uppercase;
  font-weight:800;
  font-size: 12px;
  color: rgba(255,255,255,.74);
}

/* underline */
.hero-kicker::after{
  content:"";
  display:block;
  width: 108px;
  height: 2px;
  margin: 12px auto 0;
  background: linear-gradient(90deg, transparent, rgba(221,132,72,.95), rgba(42,167,255,.9), transparent);
  opacity: .8;
  animation: underlinePulse 2.8s ease-in-out infinite;
}

@keyframes underlinePulse{
  0%,100%{ opacity:.35; transform: scaleX(.88); }
  50%{ opacity:.85; transform: scaleX(1); }
}

/* =========================
   HERO TITLE — 3D
========================= */
/* =========================
   HERO TITLE – FIX CONTRASTE
========================= */
/* =========================
   HERO (FULL UPDATED)
========================= */
.hero-electric{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(24px, 4vw, 64px);
  overflow:hidden;
  position:relative;
  isolation:isolate;
}

/* Fondo premium profundo */
.hero-electric::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(120% 90% at 18% 28%, rgba(221,132,72,.14), transparent 58%),
    radial-gradient(120% 90% at 86% 72%, rgba(42,167,255,.12), transparent 62%),
    radial-gradient(800px 520px at 50% 35%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.82));
  z-index:-3;
}

/* Electric flow fino */
.hero-electric::after{
  content:"";
  position:absolute; inset:-80px;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(2px 2px at 40% 80%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(110deg,
      transparent 0%,
      rgba(221,132,72,.0) 36%,
      rgba(221,132,72,.10) 49%,
      rgba(42,167,255,.08) 56%,
      transparent 72%
    );
  opacity: .42;
  filter: blur(1px);
  animation: heroFlow 8.5s ease-in-out infinite;
  z-index:-2;
  pointer-events:none;
}

@keyframes heroFlow{
  0%   { transform: translate3d(-2%, -1%, 0) rotate(-1deg); }
  50%  { transform: translate3d(2%, 1%, 0) rotate(1deg); }
  100% { transform: translate3d(-2%, -1%, 0) rotate(-1deg); }
}

/* Glow spot extra */
.hero-glow{
  position:absolute;
  inset:-120px;
  background:
    radial-gradient(700px 520px at 30% 45%, rgba(221,132,72,.18), transparent 60%),
    radial-gradient(760px 560px at 75% 55%, rgba(42,167,255,.14), transparent 62%);
  filter: blur(30px);
  opacity: .55;
  z-index:-1;
  pointer-events:none;
}

/* Noise / grain */
.hero-noise{
  position:absolute;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity:.10;
  mix-blend-mode: overlay;
  z-index:-1;
  pointer-events:none;
}

/* Contenedor */
.hero-wrap{
  width: min(var(--container, 1200px), 100%);
  margin: 0 auto;
  display:grid;
  place-items:center;
  text-align:center;
}

/* =========================
   TEXT
========================= */
.hero-copy{
  max-width: 820px;
  display:flex;
  flex-direction:column;
  align-items:center;
  transform: translateY(10px);
  opacity: 0;
  animation: heroIn .9s ease forwards;
}

@keyframes heroIn{
  to { transform: translateY(0); opacity: 1; }
}

.hero-kicker{
  letter-spacing:.34em;
  text-transform:uppercase;
  font-weight:800;
  font-size: 14px;
  color: rgba(255,255,255,.74);
  position: relative;
}

/* subrayado eléctrico animado */
.hero-kicker::after{
  content:"";
  display:block;
  width: 108px;
  height: 2px;
  margin: 12px auto 0;
  background: linear-gradient(90deg, transparent, rgba(221,132,72,.95), rgba(42,167,255,.9), transparent);
  opacity: .8;
  filter: blur(.2px);
  animation: underlinePulse 2.8s ease-in-out infinite;
}

@keyframes underlinePulse{
  0%,100%{ opacity:.35; transform: scaleX(.88); }
  50%{ opacity:.85; transform: scaleX(1); }
}

/* =========================
   HERO TITLE (3D + CLARO + AURA + ELECTRICSCAN)
========================= */
.hero-title{
  margin-top: 18px;
  font-size: clamp(60px, 8vw, 114px);
  line-height: 0.92;
  letter-spacing:.07em;
  text-transform: uppercase;
  font-weight: 950;
  position: relative;
  display:inline-block;

  /* Frente más claro */
  -webkit-text-fill-color: transparent;
  background-image:
    linear-gradient(180deg,
      #ffffff 0%,
      #f7f7f7 30%,
      #eaeaea 55%,
      #ffffff 100%
    );
  -webkit-background-clip: text;
          background-clip: text;

  /* Profundidad + AURA tipo botón */
  text-shadow:
    0 1px 0 rgba(0,0,0,.45),
    0 2px 0 rgba(0,0,0,.40),
    0 3px 0 rgba(0,0,0,.35),
    0 14px 26px rgba(0,0,0,.55),
    0 0 22px rgba(255,255,255,.35),
    0 0 46px rgba(221,132,72,.28),
    0 0 90px rgba(42,167,255,.22);
}

/* AURA base (suave) */
.hero-title::after{
  content:"";
  position:absolute;
  inset:-18px;
  background:
    radial-gradient(60% 60% at 50% 50%,
      rgba(255,255,255,.22),
      rgba(221,132,72,.20),
      rgba(42,167,255,.18),
      transparent 70%
    );
  filter: blur(26px);
  opacity:.9;
  z-index:-2;
  pointer-events:none;
}

/* ElectricScan sobre el aura (tipo botón) */
.hero-title::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 18px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(221,132,72,0) 20%,
      rgba(221,132,72,.85) 35%,
      rgba(255,255,255,.95) 45%,
      rgba(42,167,255,.85) 55%,
      rgba(221,132,72,.85) 65%,
      rgba(221,132,72,0) 80%,
      transparent 100%
    );
  opacity:.55;
  filter: blur(14px);
  animation: titleElectricScan 4.5s linear infinite;
  pointer-events:none;
  z-index:-1;
}

@keyframes titleElectricScan{
  0%   { transform: translateX(-60%); }
  100% { transform: translateX(60%); }
}

/* BERARDI un poco más frío */
.hero-title span{
  -webkit-text-fill-color: transparent;
  background-image:
    linear-gradient(180deg,
      #ffffff 0%,
      #e5f0ff 40%,
      #cfe4ff 65%,
      #ffffff 100%
    );
  -webkit-background-clip: text;
          background-clip: text;

  text-shadow:
    0 1px 0 rgba(0,0,0,.35),
    0 10px 24px rgba(0,0,0,.55),
    0 0 34px rgba(42,167,255,.45),
    0 0 70px rgba(221,132,72,.25);
}

/* Subtitle */
.hero-subtitle{
  margin-top: 14px;
  color: rgba(255,255,255,.72);
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size: 13px;
}

/* =========================
   CTA
========================= */
.hero-cta{
  margin-top: 30px;
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
  justify-content:center;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-decoration: none;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* PRIMARY (ya no blanco) */
.btn.primary{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(14px);
  box-shadow:
    0 18px 40px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.05);
  font-weight: 700;
}

/* aura del primary */
.btn.primary::after{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius: inherit;
  background:
    radial-gradient(60% 60% at 50% 50%,
      rgba(221,132,72,.35),
      rgba(42,167,255,.30),
      transparent 70%
    );
  filter: blur(22px);
  opacity:.75;
  z-index:-1;
  pointer-events:none;
}

.btn.primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 26px 60px rgba(0,0,0,.55);
}

/* ghost */
.btn.ghost{
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
}

/* electric border */
.btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  padding:2px;
  background:
    linear-gradient(90deg,
      transparent,
      rgba(221,132,72,1),
      rgba(255,255,255,.8),
      rgba(42,167,255,.8),
      rgba(221,132,72,1),
      transparent
    );
  animation: electricScan 1.6s linear infinite;
  opacity:.75;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}

@keyframes electricScan{
  0%{ transform: translateX(-45%); }
  100%{ transform: translateX(45%); }
}

.btn:hover{ transform: translateY(-2px); }

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px){
  .hero-title{ letter-spacing:.04em; font-size: clamp(46px, 10vw, 74px); }
  .hero-kicker{ letter-spacing:.30em; }
}

/* =========================
   ABOUT (UPDATED / PREMIUM SAFE)
========================= */
/* =========================
   ABOUT (FULL UPDATED)
========================= */
/* =========================
   ABOUT (CLEAN + IMAGE) — CORREGIDO (NO REDUNDANTE) — UPDATED
   ✅ Counters premium + ✅ sin badge "CREATOR"
========================= */
.about{
  position: relative;
  padding: clamp(70px, 9vw, 110px) clamp(22px, 4vw, 64px);
  overflow:hidden;
  isolation:isolate;
}

.about::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(1000px 700px at 20% 40%, rgba(221,132,72,.08), transparent 60%),
    radial-gradient(900px 600px at 80% 60%, rgba(42,167,255,.06), transparent 62%);
  z-index:-1;
  pointer-events:none;
}

.about-wrap{
  width: min(1200px, 100%);
  margin: 0 auto;
}

/* =========================
   HEAD
========================= */
.about-head{
  text-align: center;
  max-width: 820px;
  margin: 0 auto 42px;
  position: relative;
}

/* LÍNEA PRINCIPAL */
.about-head::after{
  content:"";
  display:block;
  width: min(520px, 72%);
  height: 2px;
  margin: 20px auto 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(221,132,72,1),
    rgba(255,255,255,.95),
    rgba(42,167,255,1),
    transparent
  );
  opacity: .75;
  filter: blur(.25px);
  animation: aboutLinePulse 3.2s ease-in-out infinite;
}

/* GLOW PROFUNDO ANIMADO */
.about-head::before{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:-20px;
  width: min(520px, 72%);
  height: 42px;
  background:
    radial-gradient(60% 60% at 50% 50%,
      rgba(221,132,72,.38),
      rgba(42,167,255,.32),
      transparent 70%
    );
  filter: blur(30px);
  opacity:.85;
  pointer-events:none;
  z-index:-1;
  animation: aboutGlowBreath 4.6s ease-in-out infinite;
}

/* =========================
   ANIMACIONES (scoped)
========================= */
@keyframes aboutGlowBreath{
  0%,100%{
    opacity:.65;
    transform: translateX(-50%) scale(.94);
  }
  50%{
    opacity:1;
    transform: translateX(-50%) scale(1.02);
  }
}

@keyframes aboutLinePulse{
  0%,100%{
    opacity:.45;
    filter: blur(.35px);
  }
  50%{
    opacity:.95;
    filter: blur(.15px);
  }
}

.about-kicker{
  letter-spacing:.34em;
  text-transform:uppercase;
  font-weight:800;
  font-size: 12px;
  color: rgba(255,255,255,.74);
}

.about-title{
  margin-top: 12px;
  font-size: clamp(56px, 6vw, 68px);
  line-height: 1.08;
  letter-spacing:.04em;
  font-weight: 950;
  text-transform: uppercase;
  position: relative;
  text-shadow:
    0 0 14px rgba(255,255,255,.18),
    0 0 30px rgba(221,132,72,.18),
    0 0 60px rgba(42,167,255,.14);
}

/* aura detrás */
.about-title::after{
  content:"";
  position:absolute;
  inset:-18px;
  background:
    radial-gradient(60% 60% at 50% 50%,
      rgba(255,255,255,.18),
      rgba(221,132,72,.14),
      rgba(42,167,255,.12),
      transparent 70%
    );
  filter: blur(26px);
  opacity:.85;
  z-index:-1;
  pointer-events:none;
}

.about-title span{
  color: rgba(255,255,255,.98);
  text-shadow:
    0 0 18px rgba(255,255,255,.20),
    0 0 32px rgba(42,167,255,.28),
    0 0 60px rgba(221,132,72,.22);
}

.about-subtitle{
  margin-top: 10px;
  color: rgba(255,255,255,.68);
  letter-spacing:.24em;
  text-transform: uppercase;
  font-size: 12px;
}

/* =========================
   GRID (text + image)
========================= */
.about-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(18px, 3vw, 44px);
  align-items: center;
  margin-top: 18px;
}

/* Texto más editorial (mejor lectura) */
.about-text{ max-width: 640px; }

.about-text p{
  font-size: 15px;
  line-height: 1.85;
  color: rgba(255,255,255,.78);
  margin-bottom: 14px;
}

.about-text strong{
  color: rgba(255,255,255,.92);
  text-shadow: 0 0 12px rgba(255,255,255,.10);
}

/* Divider (antes de counters) */
.about-divider{
  height: 1px;
  width: min(520px, 100%);
  margin: 18px 0 14px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.00),
    rgba(255,255,255,.14),
    rgba(255,255,255,.00)
  );
  opacity: .9;
}

/* Chips opcionales (si los usas en HTML) */
.about-chips{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 14px;
}

.about-chips .chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.74);
  backdrop-filter: blur(10px);
  transition: transform .25s ease, border-color .25s ease, color .25s ease;
}

.about-chips .chip:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.88);
}

/* =========================
   COUNTERS (PREMIUM UPGRADE)
========================= */
.counters{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.counter{
  position: relative;
  border-radius: 20px;
  padding: 18px 18px;
  overflow: hidden;
  isolation: isolate;

  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 420px at 18% 20%, rgba(255,255,255,.06), transparent 58%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  backdrop-filter: blur(12px);

  box-shadow:
    0 22px 60px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.04);

  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    border-color .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}

/* Glow diagonal suave */
.counter::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(120deg,
      rgba(221,132,72,.14),
      transparent 38%,
      rgba(42,167,255,.12)
    );
  opacity:.18;
  filter: blur(18px);
  z-index:-1;
  pointer-events:none;
}

/* Línea “accent” superior */
.counter::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  top: 12px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(221,132,72,.85),
    rgba(255,255,255,.65),
    rgba(42,167,255,.85)
  );
  opacity:.20;
  filter: blur(.2px);
  pointer-events:none;
}

.counter:hover{
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 34px 92px rgba(0,0,0,.48),
    0 0 0 1px rgba(255,255,255,.08);
}

.counter-num{
  display:flex;
  align-items: baseline;
  gap: 8px;

  font-size: 34px;
  font-weight: 950;
  letter-spacing:.04em;
  line-height: 1;
  text-transform: uppercase;

  color: rgba(255,255,255,.95);
  text-shadow:
    0 0 18px rgba(255,255,255,.12),
    0 0 34px rgba(221,132,72,.10);
}

/* “+” o sufijo desde data-suffix */
.counter-num::after{
  content:"";
  font-size: 14px;
  font-weight: 900;
  letter-spacing:.22em;
  opacity:.75;
  transform: translateY(-6px);
}

/* Si NO hay sufijo */
.counter .counter-num[data-suffix=""]::after{ content:""; }

.counter-label{
  display:block;
  margin-top: 10px;

  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);

  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* =========================
   IMAGE / MEDIA
========================= */
.about-media{
  position: relative;
  width: 100%;
  min-height: 420px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 700px at 35% 25%, rgba(255,255,255,.05), transparent 58%),
    linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  animation: aboutPanelBreath 4.8s ease-in-out infinite;
}

/* glow detrás */
.about-media-glow{
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(60% 60% at 35% 50%, rgba(221,132,72,.20), transparent 60%),
    radial-gradient(60% 60% at 70% 55%, rgba(42,167,255,.14), transparent 65%);
  filter: blur(26px);
  opacity:.55;
  pointer-events:none;
}

/* ✅ Quitar palabra "CREATOR" (badge) */
.about-badge{ display:none !important; }

/* PNG del creador */
.about-creator{
  width: min(360px, 85%);
  height: auto;
  display:block;
  filter: drop-shadow(0 30px 55px rgba(0,0,0,.55));
  animation: aboutFloatCreator 3.6s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

@keyframes aboutFloatCreator{
  0%,100%{ transform: translateY(0) rotate(-0.4deg); }
  50%{ transform: translateY(-10px) rotate(0.4deg); }
}

@keyframes aboutPanelBreath{
  0%,100%{ box-shadow: 0 28px 80px rgba(0,0,0,.38); }
  50%{ box-shadow: 0 38px 110px rgba(0,0,0,.48); }
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px){
  .about-grid{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .about-media{
    min-height: 360px;
  }
  .about-divider{
    margin-left:auto;
    margin-right:auto;
  }
  .about-chips{
    justify-content:center;
  }
}

@media (max-width: 900px){
  .counters{ grid-template-columns: 1fr; }
}


/* =========================
   SERVICES
========================= */
.services{
  position: relative;
  padding: clamp(80px, 10vw, 130px) clamp(22px, 4vw, 64px);
  overflow:hidden;
  isolation:isolate;
}

.services::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(1000px 700px at 15% 30%, rgba(221,132,72,.10), transparent 60%),
    radial-gradient(900px 600px at 85% 70%, rgba(42,167,255,.08), transparent 62%);
  z-index:-1;
  pointer-events:none;
}

.services-wrap{
  width: min(1200px, 100%);
  margin: 0 auto;
}

/* =========================
   HEADER (About vibe)
========================= */
.services-head{
  position: relative;
  text-align: center;
  max-width: 820px;
  margin: 0 auto 60px;
}

/* Línea glow */
.services-head::after{
  content:"";
  display:block;
  width: min(520px, 72%);
  height: 2px;
  margin: 20px auto 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(221,132,72,1),
    rgba(255,255,255,.95),
    rgba(42,167,255,1),
    transparent
  );
  opacity:.75;
  filter: blur(.25px);
  animation: linePulse 3.2s ease-in-out infinite;
}

/* Glow profundo */
.services-head::before{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:-20px;
  width: min(520px, 72%);
  height: 42px;
  background:
    radial-gradient(60% 60% at 50% 50%,
      rgba(221,132,72,.38),
      rgba(42,167,255,.32),
      transparent 70%
    );
  filter: blur(30px);
  opacity:.85;
  pointer-events:none;
  z-index:-1;
  animation: glowBreath 4.6s ease-in-out infinite;
}

@keyframes linePulse{
  0%,100%{ opacity:.55; filter: blur(.25px); }
  50%{ opacity:.92; filter: blur(.6px); }
}
@keyframes glowBreath{
  0%,100%{ opacity:.65; transform: translateX(-50%) scale(.98); }
  50%{ opacity:1; transform: translateX(-50%) scale(1.02); }
}

/* Tag */
.services-kicker{
  display: inline-block;
  font-size: 12px;
  letter-spacing: .34em;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-bottom: 12px;
}

/* Título */
.services-title{
  font-size: clamp(42px, 6vw, 64px);
  font-weight: 950;
  letter-spacing: .06em;
  line-height: 1.05;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 0 18px rgba(255,255,255,.12),
    0 0 45px rgba(221,132,72,.18);
  margin-bottom: 14px;
}

.services-title span{
  text-shadow:
    0 0 20px rgba(255,255,255,.18),
    0 0 48px rgba(42,167,255,.25);
}

.services-subtitle{
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  max-width: 620px;
  margin: 0 auto;
}

/* =========================
   GRID
========================= */
.services-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 32px);
}

/* =========================
   CARD BASE
========================= */
.service-card{
  position: relative;
  padding: 26px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 75px rgba(0,0,0,.35);
  overflow: hidden;
  text-align: center;
  isolation: isolate;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.service-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 45px 95px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.28);
}

/* =========================
   BORDER NORMAL (COLOR CORRESPONDIENTE)
   ✅ reemplaza el "eléctrico" por línea limpia
========================= */
.service-electric{
  position: absolute;
  inset: 12px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  pointer-events: none;
  z-index: 0;
  border-radius: 24px;

  /* ❌ ya no usamos deformación/warp */
  filter: none;
  opacity: 1;
}

/* rect del SVG (línea normal) */
.service-electric__stroke{
  fill: transparent;

  /* ✅ borde limpio */
  stroke: color-mix(in srgb, var(--electric, #dd8448) 85%, white 15%);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;

  /* ❌ sin dash / sin vibración */
  stroke-dasharray: none;
  animation: none;

  /* ✅ glow suave (serio) */
  filter:
    drop-shadow(0 0 8px color-mix(in srgb, var(--electric, #dd8448) 35%, transparent))
    drop-shadow(0 0 22px color-mix(in srgb, var(--electric, #dd8448) 18%, transparent));
  opacity: .95;
}

/* Hover: un poquito más de presencia */
.service-card:hover .service-electric__stroke{
  opacity: 1;
  stroke: color-mix(in srgb, var(--electric, #dd8448) 78%, white 22%);
  filter:
    drop-shadow(0 0 10px color-mix(in srgb, var(--electric, #dd8448) 45%, transparent))
    drop-shadow(0 0 28px color-mix(in srgb, var(--electric, #dd8448) 22%, transparent));
}

/* =========================
   MEDIA
========================= */
.service-media{
  width: 100%;
  height: 180px;
  margin-bottom: 22px;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 25px 60px rgba(0,0,0,.45);
}

.service-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.service-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55)),
    radial-gradient(80% 60% at 30% 30%, rgba(221,132,72,.25), transparent 60%);
}

.service-card:hover .service-media img{
  transform: scale(1.08);
}

/* =========================
   TITLES (UPGRADED)
========================= */
.service-name{
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.08;
  margin: 14px 0 10px;
  color: rgba(255,255,255,.92);
  display: inline-block;
  position: relative;
  padding-bottom: 10px;

  text-shadow:
    0 0 14px rgba(255,255,255,.10),
    0 0 28px color-mix(in srgb, var(--electric) 22%, transparent);
}

.service-name::after{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:0;
  width:78%;
  height:2px;
  border-radius:999px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--electric),
    rgba(255,255,255,.9),
    var(--electric),
    transparent
  );
  opacity:.7;
  filter: blur(.3px);
  animation: svcTitlePulse 3.6s ease-in-out infinite;
}

@keyframes svcTitlePulse{
  0%,100%{ opacity:.45; }
  50%{ opacity:.9; }
}

.service-card:hover .service-name{
  color:#fff;
}

/* =========================
   DESC
========================= */
.service-desc{
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.72);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1100px){
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px){
  .services-grid{ grid-template-columns: 1fr; }
  .service-media{ height: 200px; }
  .service-name{ font-size: 17px; letter-spacing:.1em; }
}


/* =========================
   CTA PORTFOLIO (PREMIUM)
========================= */
/* =========================
   CTA PORTFOLIO (PREMIUM) — FIX iOS
   ✅ rgba con decimales correctos
   ✅ evita link azul/subrayado
========================= */
.services-cta{
  margin-top: clamp(60px, 8vw, 90px);
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.btn-portfolio{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 18px 48px;
  border-radius: 999px;
  text-decoration: none;
  -webkit-text-decoration: none;

  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  /* glass */
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.14),
    rgba(255,255,255,.04)
  );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border: 1px solid rgba(255,255,255,.28);
  box-shadow:
    0 25px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.22);

  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    box-shadow .35s ease,
    border-color .35s ease;
}

/* ✅ fuerza color correcto en iOS (evita azul de link) */
.btn-portfolio:link,
.btn-portfolio:visited{
  color: #fff;
  text-decoration: none;
}

.btn-portfolio .btn-glow{
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(120% 80% at 20% 30%, rgba(221,132,72,.55), transparent 60%),
    radial-gradient(120% 80% at 80% 70%, rgba(42,167,255,.45), transparent 62%);
  filter: blur(22px);
  opacity: .85;
  transition: opacity .35s ease, transform .35s ease;
  z-index: 0;
  pointer-events:none;
}

.btn-portfolio .btn-text{
  position: relative;
  z-index: 1;

  font-size: 13px;
  letter-spacing: .34em;
  font-weight: 900;
  text-transform: uppercase;

  color: #fff;
  text-decoration: none;
  -webkit-text-decoration: none;

  text-shadow:
    0 0 14px rgba(255,255,255,.18),
    0 0 30px rgba(221,132,72,.25);
}

.btn-portfolio:hover{
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(255,255,255,.45);
  box-shadow:
    0 40px 90px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.26);
}

.btn-portfolio:hover .btn-glow{
  opacity: 1;
  transform: scale(1.02);
}

.btn-portfolio:active{
  transform: translateY(-1px) scale(.99);
}

/* =========================
   CONTACT
========================= */
.contact{
  position: relative;
  padding: clamp(80px, 10vw, 130px) clamp(22px, 4vw, 64px);
  overflow:hidden;
  isolation:isolate;
}

.contact::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(1000px 700px at 18% 30%, rgba(221,132,72,.10), transparent 60%),
    radial-gradient(900px 600px at 85% 70%, rgba(42,167,255,.08), transparent 62%);
  z-index:-1;
  pointer-events:none;
}

.contact-wrap{
  width: min(1200px, 100%);
  margin: 0 auto;
}

/* =========================
   CONTACT (HEAD = ABOUT STYLE)
========================= */
.contact-head{
  position: relative;
  text-align: center;
  max-width: 820px;
  margin: 0 auto 52px;
}

.contact-head::after{
  content:"";
  display:block;
  width: min(520px, 72%);
  height: 2px;
  margin: 20px auto 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(221,132,72,1),
    rgba(255,255,255,.95),
    rgba(42,167,255,1),
    transparent
  );
  opacity:.75;
  filter: blur(.25px);
  animation: linePulse 3.2s ease-in-out infinite;
}

.contact-head::before{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:-20px;
  width: min(520px, 72%);
  height: 42px;
  background:
    radial-gradient(60% 60% at 50% 50%,
      rgba(221,132,72,.38),
      rgba(42,167,255,.32),
      transparent 70%
    );
  filter: blur(30px);
  opacity:.85;
  pointer-events:none;
  z-index:-1;
  animation: glowBreath 4.6s ease-in-out infinite;
}

.contact-kicker{
  letter-spacing:.34em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
  color: rgba(255,255,255,.74);
}

.contact-title{
  margin-top: 12px;
  font-size: clamp(56px, 6vw, 68px);
  line-height: 1.08;
  letter-spacing: .04em;
  font-weight: 950;
  text-transform: uppercase;
  position: relative;
  color: rgba(255,255,255,.98);
  text-shadow:
    0 0 14px rgba(255,255,255,.18),
    0 0 30px rgba(221,132,72,.22),
    0 0 60px rgba(42,167,255,.18);
}

.contact-title::after{
  content:"";
  position:absolute;
  inset:-18px;
  background:
    radial-gradient(60% 60% at 50% 50%,
      rgba(255,255,255,.20),
      rgba(221,132,72,.18),
      rgba(42,167,255,.16),
      transparent 70%
    );
  filter: blur(26px);
  opacity:.85;
  z-index:-1;
  pointer-events:none;
}

.contact-title span{
  color: rgba(255,255,255,.98);
  text-shadow:
    0 0 18px rgba(255,255,255,.25),
    0 0 36px rgba(42,167,255,.35),
    0 0 70px rgba(221,132,72,.30);
}

.contact-subtitle{
  margin-top: 10px;
  color: rgba(255,255,255,.68);
  letter-spacing: .24em;
  text-transform: uppercase;
  font-size: 12px;
}

/* =========================
   GRID (igual altura columnas)
========================= */
.contact-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(18px, 3vw, 44px);
  align-items: stretch;         /* ✅ clave: estira ambos */
}

/* FORM */
.contact-form{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
  padding: 28px;
  position: relative;
  overflow:hidden;
  height: 100%;                 /* ✅ asegura altura */
}

.contact-form::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(221,132,72,.18), transparent 55%),
    radial-gradient(120% 90% at 80% 70%, rgba(42,167,255,.12), transparent 60%);
  opacity:.45;
  pointer-events:none;
}

.field{
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.field label{
  font-size: 11px;
  letter-spacing:.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

.field input,
.field select,
.field textarea{
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,10,14,.55);
  color: rgba(255,255,255,.90);
  padding: 14px 14px;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.field textarea{ resize: vertical; min-height: 140px; }

.field input::placeholder,
.field textarea::placeholder{
  color: rgba(255,255,255,.45);
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 0 0 4px rgba(221,132,72,.10);
}

.field select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.65) 50%),
    linear-gradient(135deg, rgba(255,255,255,.65) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.btn-submit{
  width: 100%;
  margin-top: 8px;
  position: relative;
  z-index: 1;
}

.form-note{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255,255,255,.50);
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

/* =========================
   INFO (columna derecha larga + cards grandes)
========================= */
.contact-info{
  display:flex;
  flex-direction:column;
  gap: 18px;        /* ✅ más aire */
  height: 100%;     /* ✅ iguala altura con el form */
}

.info-card{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
  backdrop-filter: blur(12px);
  padding: 24px 22px;            /* ✅ más grande */
  position: relative;
  overflow:hidden;
  min-height: 110px;             /* ✅ más alto */
  display:flex;
  flex-direction:column;
  justify-content:center;         /* ✅ centra verticalmente el contenido */
}

.info-card::after{
  content:"";
  position:absolute;
  inset:-16px;
  background:
    radial-gradient(60% 60% at 25% 50%, rgba(221,132,72,.14), transparent 60%),
    radial-gradient(60% 60% at 75% 50%, rgba(42,167,255,.10), transparent 65%);
  filter: blur(16px);
  opacity:.35;
  pointer-events:none;
}

/* ✅ letras más grandes */
.info-title{
  font-size: 13px;
  letter-spacing:.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom: 10px;
  font-weight: 900;
}

.info-text{
  color: rgba(255,255,255,.74);
  line-height: 1.7;
  font-size: 15px;
}

.info-link{
  color: rgba(255,255,255,.92);
  text-decoration: none;
  letter-spacing: .04em;
  font-size: 15px;
}

.info-link:hover{
  text-decoration: underline;
}

.socials{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
}

.social{
  padding: 12px 14px;            /* ✅ más grande */
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.045);
  text-decoration:none;
  color: rgba(255,255,255,.90);
  font-size: 12px;               /* ✅ más grande */
  letter-spacing:.20em;
  text-transform: uppercase;
  transition: transform .2s ease, border-color .2s ease;
}

.social:hover{
  border-color: rgba(255,255,255,.26);
  transform: translateY(-1px);
}

/* ✅ hace que la última tarjeta “rellene” la altura para igualar el form */
.info-card.highlight{
  border-color: rgba(255,255,255,.18);
  flex: 1;               /* 🔥 clave: estira para igualar altura total */
  min-height: 160px;
}

.electric-line{
  margin-top: 16px;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(221,132,72,.9), rgba(42,167,255,.8), transparent);
  opacity:.55;
  animation: linePulse 2.6s ease-in-out infinite;
}

@keyframes linePulse{
  0%,100%{ opacity:.35; filter: blur(.2px); }
  50%{ opacity:.75; filter: blur(.5px); }
}

/* Responsive */
@media (max-width: 900px){
  .contact-grid{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .contact-info{
    height: auto;
  }
  .info-card.highlight{
    flex: initial;
  }
}

/* =========================
   SOCIAL ICONS (CONTACT)
========================= */

.social{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* icono */
.social .icon{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;

  background: linear-gradient(
    135deg,
    rgba(221,132,72,.35),
    rgba(42,167,255,.35)
  );
  box-shadow:
    0 0 18px rgba(221,132,72,.25),
    0 0 24px rgba(42,167,255,.25);
}

/* svg */
.social svg{
  width: 18px;
  height: 18px;
  fill: #fff;
}

/* hover elegante */
.social:hover .icon{
  transform: scale(1.08);
  box-shadow:
    0 0 22px rgba(221,132,72,.45),
    0 0 30px rgba(42,167,255,.45);
}

/* ===============================
   WHATSAPP HOVER (CONTACT)
================================ */
.social.whatsapp{
  --wa: #25D366;
}

.social.whatsapp:hover{
  border-color: rgba(37, 211, 102, .55);
  background: linear-gradient(
    180deg,
    rgba(37, 211, 102, .18),
    rgba(37, 211, 102, .06)
  );
  box-shadow:
    0 0 0 1px rgba(37, 211, 102, .25),
    0 14px 38px rgba(37, 211, 102, .25);
  transform: translateY(-2px);
}

.social.linkedin:hover{
  border-color: rgba(10,102,194,.55);
  background: linear-gradient(
    180deg,
    rgba(10,102,194,.18),
    rgba(10,102,194,.06)
  );
  box-shadow:
    0 0 0 1px rgba(10,102,194,.25),
    0 14px 38px rgba(10,102,194,.28);
  transform: translateY(-2px);
}

.social.instagram:hover{
  border-color: rgba(225,48,108,.55);
  background: linear-gradient(
    180deg,
    rgba(225,48,108,.18),
    rgba(253,29,29,.10),
    rgba(131,58,180,.10)
  );
  box-shadow:
    0 0 0 1px rgba(225,48,108,.25),
    0 14px 38px rgba(225,48,108,.28);
  transform: translateY(-2px);
}

.social.tiktok:hover{
  border-color: rgba(0,242,234,.45);
  background: linear-gradient(
    180deg,
    rgba(0,242,234,.14),
    rgba(255,0,80,.12)
  );
  box-shadow:
    0 0 0 1px rgba(0,242,234,.25),
    0 14px 38px rgba(255,0,80,.25);
  transform: translateY(-2px);
}


/* icono */
.social.whatsapp:hover svg{
  fill: #25D366;
  filter: drop-shadow(0 0 6px rgba(37, 211, 102, .55));
}

/* texto */
.social.whatsapp:hover{
  color: #eafff2;
}

/* =========================
   FOOTER (UPGRADED) — UPDATED (CTA FIXED)
========================= */
.footer{
  position: relative;
  padding: 78px clamp(22px, 4vw, 64px) 30px;
  background: rgba(0,0,0,.22);
  overflow:hidden;
  isolation:isolate;
}

.footer::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 600px at 20% 40%, rgba(221,132,72,.10), transparent 60%),
    radial-gradient(800px 520px at 80% 70%, rgba(42,167,255,.08), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.72));
  z-index:-1;
  pointer-events:none;
}

.footer-wrap{
  width: min(1200px, 100%);
  margin: 0 auto;
}

.footer-top{
  display:grid;
  grid-template-columns: 1.35fr 1fr 1fr 1fr 1.1fr;
  gap: 26px;
  align-items:start;
}

/* Brand */
.footer-brand{ padding-right: 10px; }

.footer-brand-link{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  width: fit-content;
}

.footer-logo-img{
  width: 166px;
  height: 166px;
  object-fit: contain;
  display:block;
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.18))
    drop-shadow(0 0 20px rgba(221,132,72,.22))
    drop-shadow(0 0 26px rgba(42,167,255,.18));
  transition: transform .25s ease;
}

.footer-brand-link:hover .footer-logo-img{
  transform: translateY(-1px) scale(1.02);
}

.footer-slogan{
  margin-top: 12px;
  color: rgba(255,255,255,.68);
  line-height: 1.7;
  font-size: 14px;
  max-width: 380px;
}

/* socials */
.footer-socials{
  margin-top: 16px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

.footer-social{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  text-decoration:none;
  color: rgba(255,255,255,.86);
  font-size: 11px;
  letter-spacing:.18em;
  text-transform: uppercase;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.footer-social:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.06);
}

/* columns */
.footer-col{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.footer-col-wide{
  border-left: 1px solid rgba(255,255,255,.08);
  padding-left: 22px;
}

/* =========================
   TITLES (bigger + underline)
========================= */
.footer-title{
  font-size: 13px;
  letter-spacing:.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.80);
  font-weight: 950;
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
}

.footer-title::after{
  content:"";
  display:block;
  width: 100%;
  height: 2px;
  margin-top: 10px;
  background: linear-gradient(
    90deg,
    rgba(221,132,72,.95),
    rgba(255,255,255,.85),
    rgba(42,167,255,.95)
  );
  opacity: .70;
  filter: blur(.25px);
  transform-origin: left;
  animation: footerTitlePulse 3.2s ease-in-out infinite;
}

@keyframes footerTitlePulse{
  0%,100%{ opacity:.35; transform: scaleX(.86); }
  50%{ opacity:.95; transform: scaleX(1); }
}

.footer-link{
  text-decoration:none;
  color: rgba(255,255,255,.70);
  font-size: 13px;
  letter-spacing:.06em;
  transition: color .25s ease, transform .25s ease;
  width: fit-content;
}

.footer-link:hover{
  color: rgba(255,255,255,.92);
  transform: translateX(2px);
}

.footer-mini{
  color: rgba(255,255,255,.52);
  font-size: 12px;
  line-height: 1.6;
  margin-top: 4px;
}

/* Contact block */
.footer-contact{ display:flex; flex-direction:column; gap: 10px; }

.footer-meta{ margin-top: 6px; display:flex; flex-direction:column; gap: 8px; }
.footer-meta-row{ display:flex; align-items:center; gap: 10px; color: rgba(255,255,255,.62); font-size: 12px; letter-spacing: .06em; }

.footer-dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(221,132,72,.9), rgba(42,167,255,.85));
  box-shadow: 0 0 18px rgba(221,132,72,.25);
}

/* =========================
   CTA footer (FIXED: no deform + centered)
========================= */
.footer-cta{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:center;

  width: 100%;
  max-width: 220px;          /* ajusta si lo quieres más ancho */
  min-height: 48px;
  padding: 12px 16px;

  border-radius: 999px;
  text-decoration:none;

  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 900;

  line-height: 1.15;
  text-align:center;

  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(12px);

  align-self: flex-start;
  position: relative;
  isolation: isolate;
  overflow: hidden;

  white-space: normal;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

/* borde eléctrico animado */
.footer-cta::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(221,132,72,.95),
    rgba(255,255,255,.85),
    rgba(42,167,255,.95),
    transparent
  );
  opacity: .75;
  animation: footerCtaScan 1.8s linear infinite;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events:none;
}

@keyframes footerCtaScan{
  0%{ transform: translateX(-45%); }
  100%{ transform: translateX(45%); }
}

/* glow suave */
.footer-cta::after{
  content:"";
  position:absolute;
  inset:-20px;
  border-radius: inherit;
  background:
    radial-gradient(60% 60% at 50% 50%,
      rgba(42,167,255,.18),
      rgba(221,132,72,.18),
      transparent 70%
    );
  filter: blur(22px);
  opacity: .65;
  z-index:-1;
  pointer-events:none;
}

.footer-cta:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.30);
  background: rgba(255,255,255,.07);
}

/* Newsletter */
.footer-news{
  margin-top: 8px;
  display:flex;
  gap: 10px;
  align-items:center;
}

.footer-news input{
  flex:1;
  min-width: 0;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,10,14,.55);
  color: rgba(255,255,255,.90);
  padding: 12px 12px;
  outline: none;
}

.footer-news input::placeholder{ color: rgba(255,255,255,.45); }

.footer-news button{
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease;
}

.footer-news button:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.28);
}

.footer-trust{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

.footer-badge{
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.70);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* electric divider line */
.footer-line{
  margin: 44px 0 18px;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(221,132,72,.9), rgba(42,167,255,.8), transparent);
  opacity:.55;
  animation: footerPulse 2.8s ease-in-out infinite;
}

@keyframes footerPulse{
  0%,100%{ opacity:.35; filter: blur(.2px); }
  50%{ opacity:.75; filter: blur(.6px); }
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
  color: rgba(255,255,255,.55);
  font-size: 12px;
  letter-spacing:.08em;
  text-transform: uppercase;
}

.footer-made{
  color: rgba(255,255,255,.48);
}

/* responsive */
@media (max-width: 1100px){
  .footer-top{
    grid-template-columns: 1.4fr 1fr 1fr;
  }
  .footer-col-wide{
    grid-column: 1 / -1;
    border-left: none;
    padding-left: 0;
    margin-top: 10px;
  }
}

@media (max-width: 760px){
  .footer-top{
    grid-template-columns: 1fr;
  }
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
  .footer-news{ flex-direction:column; align-items:stretch; }

  /* CTA full width en móvil */
  .footer-cta{
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
}



/* ===============================
   CLIENTES (SPIN RING)
================================ */
.clients{
  position: relative;
  padding: clamp(80px, 10vw, 130px) clamp(22px, 4vw, 64px);
  overflow: hidden;
  isolation: isolate;
}

.clients::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(1000px 700px at 18% 30%, rgba(221,132,72,.10), transparent 60%),
    radial-gradient(900px 600px at 85% 70%, rgba(42,167,255,.08), transparent 62%);
  z-index:-1;
  pointer-events:none;
}

.clients-wrap{
  width: min(1200px, 100%);
  margin: 0 auto;
}

/* ===============================
   HEAD
================================ */
.clients-head{
  position: relative;
  text-align: center;
  max-width: 820px;
  margin: 0 auto 56px;
}

/* LÍNEA GLOW */
.clients-head::after{
  content:"";
  display:block;
  width: min(520px, 72%);
  height: 2px;
  margin: 20px auto 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(221,132,72,1),
    rgba(255,255,255,.95),
    rgba(42,167,255,1),
    transparent
  );
  opacity:.75;
  filter: blur(.25px);
  animation: linePulse 3.2s ease-in-out infinite;
}

/* GLOW PROFUNDO ANIMADO */
.clients-head::before{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:-20px;
  width: min(520px, 72%);
  height: 42px;
  background:
    radial-gradient(60% 60% at 50% 50%,
      rgba(221,132,72,.38),
      rgba(42,167,255,.32),
      transparent 70%
    );
  filter: blur(30px);
  opacity:.85;
  pointer-events:none;
  z-index:-1;
  animation: glowBreath 4.6s ease-in-out infinite;
}


.clients-kicker{
  display:inline-block;
  font-size: 11px;
  letter-spacing: .34em;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-bottom: 12px;
  padding-top: 50px;
}

.clients-title{
  font-size: clamp(31px, 6vw, 52px);
  font-weight: 950;
  letter-spacing: .06em;
  line-height: 1.06;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 0 18px rgba(255,255,255,.12),
    0 0 45px rgba(221,132,72,.18);
  margin-bottom: 14px;
}

.clients-subtitle{
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  max-width: 640px;
  margin: 0 auto;
}

/* ===============================
   ORBIT LAYOUT
================================ */
.clients-orbit{
  position: relative;
  width: min(800px, 100%);
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}

/* ===============================
   CENTRO (MÁS PEQUEÑO) + GLOW PRO
================================ */
.clients-center{
  position: relative;
  width: clamp(320px, 42vw, 340px);
  height: clamp(320px, 42vw, 340px);
  border-radius: 50%;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 18px;
  z-index: 2;

  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  backdrop-filter: blur(14px);
  box-shadow:
    0 28px 70px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.08);
  overflow:hidden;
  isolation: isolate;
}

.clients-center::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(60% 60% at 35% 50%, rgba(221,132,72,.22), transparent 60%),
    radial-gradient(60% 60% at 70% 55%, rgba(42,167,255,.16), transparent 65%);
  filter: blur(26px);
  opacity:.55;
  pointer-events:none;
}

/* Glow externo premium */
.clients-center::after{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(221,132,72,.22), transparent 55%),
    radial-gradient(closest-side, rgba(42,167,255,.18), transparent 62%);
  filter: blur(18px);
  opacity: .55;
  z-index: -1;
  pointer-events:none;
  transition: opacity .25s ease, filter .25s ease;
}

/* Glow reactivo cuando hover en el orbit */
.clients-orbit:hover .clients-center::after{
  opacity: .85;
  filter: blur(20px);
}

/* ===============================
   RING
================================ */
.clients-ring{
  position:absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 1;

  border: 1px solid rgba(255,255,255,.10);
  background: radial-gradient(closest-side, rgba(255,255,255,.03), transparent 70%);

  animation: clientsSpin 18s linear infinite;
  transform-origin: center;
}

.clients-orbit:hover .clients-ring{
  animation-play-state: paused;
}

@keyframes clientsSpin{
  to { transform: rotate(360deg); }
}

/* ===============================
   ITEMS (MÁS GRANDES) + LOGOS RECTOS
   FIX: separa ROTACIÓN (client-rot) y SCALE (client-inner)
================================ */
.client-item{
  --count: 8;

  /* ✅ AJUSTE CLAVE: baja el radio para orbit 800 */
  --radius: clamp(290px, 34vw, 380px);

  position:absolute;
  top: 50%;
  left: 50%;

  width: clamp(90px, 11vw, 120px);
  height: clamp(90px, 11vw, 120px);
  margin: calc(clamp(90px, 11vw, 120px) / -2);

  border-radius: 50%;
  overflow: visible;

  border: 1px solid rgba(255,255,255,.14);
  background: transparent;

  transform:
    rotate(calc(360deg / var(--count) * var(--i)))
    translateX(var(--radius))
    rotate(calc(-360deg / var(--count) * var(--i)));

  z-index: 2;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}


/* Hover: micro boost sutil sin romper posición */
.client-item:hover{
  z-index: 5;
  transform:
    rotate(calc(360deg / var(--count) * var(--i)))
    translateX(var(--radius))
    rotate(calc(-360deg / var(--count) * var(--i)))
    translateZ(0) scale(1.02);
}

/* ===== Tooltip (usa data-name en el HTML) ===== */
/* ===== Tooltip recto, centrado y abajo (usa data-name en el HTML) ===== */




/* wrapper que SOLO rota (contra-rotación) */
.client-rot{
  width: 100%;
  height: 100%;
  transform-origin: center;
  animation: counterSpin 18s linear infinite;
}

.clients-orbit:hover .client-rot{
  animation-play-state: paused;
}

@keyframes counterSpin{
  to { transform: rotate(-360deg); }
}

/* capa que SOLO escala + recorta */
.client-inner{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 55px rgba(0,0,0,.45);

  position: relative;
  transform-origin: center;
  transform: translateZ(0);
  will-change: transform;

  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    box-shadow .28s cubic-bezier(.22,.61,.36,1),
    border-color .28s ease,
    filter .28s ease;
}

/* Imagen llena */
.client-inner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  border-radius: 50%;
}

/* Hover (sin saltos) */
.client-item:hover .client-inner{
  transform: scale(1.20);
  border-color: rgba(255,255,255,.14);
  filter: saturate(1.05) contrast(1.05);
  box-shadow:
    0 22px 55px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.26);
}

/* Brillo interno */
.client-inner::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 0 22px rgba(255,255,255,.06);
  pointer-events:none;
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 560px){
  .client-item{
    width: 88px;
    height: 88px;
    margin: -44px;
    --radius: clamp(220px, 50vw, 280px);
  }

  .clients-ring{
    animation-duration: 22s;
  }

  .client-rot{
    animation-duration: 22s;
  }

  .clients-center{
    width: 180px;
    height: 180px;
    padding: 14px;
  }
}

/* ===============================
   ACCESIBILIDAD (Reduce Motion)
================================ */
@media (prefers-reduced-motion: reduce){
  .clients-ring,
  .client-rot{
    animation: none !important;
  }
  .client-inner,
  .client-item,
  .client-item::after{
    transition: none !important;
  }
}

/* =========================
   SPIN RING — Glow azul fosforescente PRO
========================= */
.clients-title{
  position: relative;
  z-index: 1;

  /* refuerzo del texto */
  text-shadow:
    0 0 8px rgba(42,167,255,.55),
    0 0 18px rgba(42,167,255,.45),
    0 0 32px rgba(42,167,255,.35);
}

/* Halo principal */
.clients-title::after{
  content:"";
  position:absolute;
  inset: -22px;
  z-index:-1;

  background:
    radial-gradient(
      65% 65% at 50% 50%,
      rgba(42,167,255,.55),
      rgba(42,167,255,.25),
      transparent 72%
    );

  filter: blur(28px);
  opacity: 1;
  pointer-events: none;
}

/* Halo exterior extra (efecto fosforescente real) */
.clients-title::before{
  content:"";
  position:absolute;
  inset: -42px;
  z-index:-2;

  background:
    radial-gradient(
      70% 70% at 50% 50%,
      rgba(42,167,255,.28),
      transparent 75%
    );

  filter: blur(46px);
  opacity: .95;
  pointer-events: none;
}

/* ===============================
   TOOLTIP SIEMPRE DERECHO (FIX)
   ✅ Se mueve a .client-rot (contra-rotación)
================================ */

/* asegúrate que sea el contenedor de referencia */
.client-rot{
  position: relative; /* ✅ clave */
}

/* Tooltip ahora vive aquí (queda recto siempre) */
.client-rot::after{
  content: attr(data-name);
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%) translateY(6px); /* recto */

  white-space: nowrap;
  pointer-events: none;

  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;

  padding: 8px 12px;
  border-radius: 999px;

  color: rgba(255,255,255,.92);
  background: rgba(10,10,14,.78);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);

  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  box-shadow: 0 16px 36px rgba(0,0,0,.45);
  transform-origin: center;
}

/* mostrar al hover del item */
.client-item:hover .client-rot::after{
  opacity: 1;
  transform: translateX(-50%) translateY(10px);
}

/* =========================
   PORTFOLIO PAGE (NEW)
   
========================= */

/* Evita que el contenido quede bajo la navbar fija */
.page-portfolio .portfolio{
  padding-top: calc(72px + clamp(34px, 5vw, 64px));
}

/* Head estilo "about/services" */
.portfolio{
  position: relative;
  padding: clamp(70px, 9vw, 110px) clamp(22px, 4vw, 64px);
  overflow:hidden;
  isolation:isolate;
}

.portfolio::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(1000px 700px at 18% 30%, rgba(221,132,72,.10), transparent 60%),
    radial-gradient(900px 600px at 85% 70%, rgba(42,167,255,.08), transparent 62%);
  z-index:-1;
  pointer-events:none;
}

.portfolio-wrap{ width: min(1200px, 100%); margin: 0 auto; }

.portfolio-head{
  position: relative;
  text-align: center;
  max-width: 920px;
  margin: 0 auto 28px;
}

/* LÍNEA GLOW */
.portfolio-head::after{
  content:"";
  display:block;
  width: min(520px, 72%);
  height: 2px;
  margin: 20px auto 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(221,132,72,1),
    rgba(255,255,255,.95),
    rgba(42,167,255,1),
    transparent
  );
  opacity:.75;
  filter: blur(.25px);
  animation: linePulse 3.2s ease-in-out infinite;
}

/* GLOW PROFUNDO ANIMADO */
.portfolio-head::before{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:-20px;
  width: min(520px, 72%);
  height: 42px;
  background:
    radial-gradient(60% 60% at 50% 50%,
      rgba(221,132,72,.38),
      rgba(42,167,255,.32),
      transparent 70%
    );
  filter: blur(30px);
  opacity:.85;
  pointer-events:none;
  z-index:-1;
  animation: glowBreath 4.6s ease-in-out infinite;
}


.portfolio-kicker{
  letter-spacing:.34em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
  color: rgba(255,255,255,.74);
}

.portfolio-title{
  margin-top: 12px;
  font-size: clamp(56px, 6vw, 68px);
  line-height: 1.05;
  letter-spacing: .04em;
  font-weight: 950;
  text-transform: uppercase;
  position: relative;
  color: rgba(255,255,255,.98);
  text-shadow:
    0 0 14px rgba(255,255,255,.18),
    0 0 30px rgba(221,132,72,.22),
    0 0 60px rgba(42,167,255,.18);
}

.portfolio-title::after{
  content:"";
  position:absolute;
  inset:-18px;
  background:
    radial-gradient(60% 60% at 50% 50%,
      rgba(255,255,255,.20),
      rgba(221,132,72,.18),
      rgba(42,167,255,.16),
      transparent 70%
    );
  filter: blur(26px);
  opacity:.85;
  z-index:-1;
  pointer-events:none;
}

.portfolio-title span{
  color: rgba(255,255,255,.98);
  text-shadow:
    0 0 18px rgba(255,255,255,.25),
    0 0 36px rgba(42,167,255,.35),
    0 0 70px rgba(221,132,72,.30);
}

.portfolio-subtitle{
  margin-top: 10px;
  color: rgba(255,255,255,.68);
  letter-spacing: .24em;
  text-transform: uppercase;
  font-size: 12px;
}

/* Filtros */
.portfolio-filters{
  margin: 26px auto 34px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  justify-content:center;
}

.pf-btn{
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.86);
  font-size: 11px;
  letter-spacing:.18em;
  text-transform: uppercase;
  cursor:pointer;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.pf-btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.06); }

.pf-btn.is-active{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.07);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* Grid */
.pf-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}

/* Card */
.pf-card{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 75px rgba(0,0,0,.35);
  overflow:hidden;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.pf-card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 45px 95px rgba(0,0,0,.45);
}

.pf-media{
  position: relative;
  display:block;
  aspect-ratio: 16 / 10;
  overflow:hidden;
}

.pf-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  transition: transform .6s ease;
}

.pf-card:hover .pf-media img{ transform: scale(1.08); }

.pf-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.70)),
    radial-gradient(80% 60% at 30% 30%, rgba(221,132,72,.25), transparent 60%);
  pointer-events:none;
}

.pf-chip{
  position:absolute;
  left: 14px;
  bottom: 14px;
  padding: 9px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,10,14,.55);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.88);
  font-size: 10px;
  letter-spacing:.22em;
  text-transform: uppercase;
}

.pf-body{ padding: 16px 18px 18px; }

.pf-name{
  font-size: 16px;
  font-weight: 950;
  letter-spacing:.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.pf-desc{
  color: rgba(255,255,255,.72);
  line-height: 1.7;
  font-size: 13px;
}

/* CTA card */
.pf-cta{ margin-top: clamp(26px, 4vw, 44px); }
.pf-cta-card{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 75px rgba(0,0,0,.35);
  padding: clamp(22px, 3vw, 34px);
  text-align: center;
  position: relative;
  overflow:hidden;
}

.pf-cta-card::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(221,132,72,.18), transparent 55%),
    radial-gradient(120% 80% at 80% 70%, rgba(42,167,255,.14), transparent 60%);
  opacity:.55;
  pointer-events:none;
}

.pf-cta-kicker{
  letter-spacing:.34em;
  text-transform:uppercase;
  font-weight:800;
  font-size: 12px;
  color: rgba(255,255,255,.74);
}
.pf-cta-title{
  margin-top: 12px;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-shadow:
    0 0 18px rgba(255,255,255,.12),
    0 0 45px rgba(221,132,72,.18);
}
.pf-cta-subtitle{
  margin: 10px auto 18px;
  color: rgba(255,255,255,.70);
  letter-spacing: .20em;
  text-transform: uppercase;
  font-size: 12px;
  max-width: 640px;
}

/* Modal */
.pf-lock{ overflow: hidden; }

.pf-modal{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display:none;
}

.pf-modal.is-open{ display:block; }




/* =========================
   MODAL CLOSE (FIX)
========================= */
.pf-modal-close{
  position: absolute;
  top: 16px;
  right: 16px;

  width: 40px;
  height: 40px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 22px;
  line-height: 1;
  color: #fff;

  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(8px);

  cursor: pointer;
  z-index: 10;

  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.pf-modal-close:hover{
  background: rgba(0,0,0,.75);
  transform: scale(1.08);
  box-shadow: 0 0 18px rgba(255,255,255,.25);
}


.pf-modal-title{
  padding: 18px 18px 0;
  font-size: 14px;
  letter-spacing:.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
}



.pf-modal-placeholder{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 18px;
  color: rgba(255,255,255,.76);
  line-height: 1.7;
}

.pf-modal-mini{
  margin-top: 10px;
  color: rgba(255,255,255,.56);
  font-size: 12px;
  letter-spacing:.06em;
}

/* Active link (Portfolio) */
.nav-link.is-active{
  color: rgba(255,255,255,.92);
}
.pf-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
}

.pf-modal-card{
  position: relative; /* <- esto hace que la X se pegue al modal */
}

.pf-modal-close{
  position:absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
}

/* Responsive */
@media (max-width: 980px){
  .pf-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .pf-grid{ grid-template-columns: 1fr; }
  .portfolio-title{ font-size: clamp(40px, 9vw, 54px); }
}
/* =========================
   PORTFOLIO — SERVICES SELECTOR (reusa service-card)
========================= */
.pf-service-select{
  margin: 26px auto 34px;
}

.pf-services-grid{
  /* reusa services-grid, pero en portfolio baja un poquito el gap */
  gap: clamp(14px, 2.2vw, 26px);
}

/* Convertimos la card en botón sin perder estilo */
.pf-service-card{
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-align: center;
  width: 100%;
}

/* Quitar estilos nativos del button */
.pf-service-card{
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.14);
}

/* Estado seleccionado */
.pf-service-card.is-active{
  border-color: rgba(255,255,255,.34);
  box-shadow:
    0 55px 120px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.10);
  transform: translateY(-6px);
}

/* Mini “hint” arriba (opcional) */
.pf-service-card.is-active .service-name{
  color: rgba(255,255,255,.98);
}

/* En mobile: se apilan */
@media (max-width: 1100px){
  .pf-service-select{ margin-bottom: 26px; }
}
/* =========================
   PORTFOLIO – CARD SELECCIONADA (BOOST)
========================= */
.pf-service-card.is-active{
  transform: translateY(-10px) scale(1.06);
  z-index: 5;

  /* borde más fuerte */
  border-color: color-mix(in srgb, var(--electric) 90%, #fff 10%);

  /* glow exagerado */
  box-shadow:
    0 60px 140px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.15),
    0 0 35px color-mix(in srgb, var(--electric) 45%, transparent),
    0 0 70px color-mix(in srgb, var(--electric) 35%, transparent),
    0 0 120px color-mix(in srgb, var(--electric) 25%, transparent);
}

/* Borde eléctrico aún más vivo */
.pf-service-card.is-active .service-electric{
  opacity: 1;
  transform: scale(1.02);
}

.pf-service-card.is-active .service-electric__stroke{
  stroke-width: 2.5;
  filter:
    drop-shadow(0 0 10px var(--electric))
    drop-shadow(0 0 26px color-mix(in srgb, var(--electric) 70%, transparent))
    drop-shadow(0 0 60px color-mix(in srgb, var(--electric) 45%, transparent));
}

/* Glow interno detrás del contenido */
.pf-service-card.is-active::before{
  opacity: .95;
  filter: blur(1.5px);
}

.pf-service-card.is-active::after{
  opacity: .55;
  filter: blur(8px);
}

/* Imagen con más punch */
.pf-service-card.is-active .service-media img{
  transform: scale(1.12);
}

/* Título más dominante */
.pf-service-card.is-active .service-name{
  color: #fff;
  text-shadow:
    0 0 20px rgba(255,255,255,.35),
    0 0 60px color-mix(in srgb, var(--electric) 45%, transparent);
}

.pf-service-card.is-active .service-name::after{
  opacity: 1;
  height: 2.5px;
}

/* Micro animación viva */
.pf-service-card.is-active{
  animation: pfActivePulse 3.6s ease-in-out infinite;
}

@keyframes pfActivePulse{
  0%,100%{
    box-shadow:
      0 60px 140px rgba(0,0,0,.65),
      0 0 40px color-mix(in srgb, var(--electric) 45%, transparent),
      0 0 90px color-mix(in srgb, var(--electric) 30%, transparent);
  }
  50%{
    box-shadow:
      0 70px 160px rgba(0,0,0,.75),
      0 0 60px color-mix(in srgb, var(--electric) 55%, transparent),
      0 0 140px color-mix(in srgb, var(--electric) 40%, transparent);
  }
}

/* =========================
   MOBILE – menos exagerado
========================= */
@media (max-width: 768px){
  .pf-service-card.is-active{
    transform: translateY(-6px) scale(1.03);
    animation: none;
  }
}
/* =========================
   PORTFOLIO – ESPACIADO TOP
========================= */
.pf-service-select{
  margin-top: 64px; /* separación clara del subtítulo */
}

/* =========================
   PF MODAL — VIDEO FULL (RESPONSIVE)
========================= */
.pf-modal-card{
  /* un poquito más ancho para video */
  width: min(1100px, calc(100% - 34px));
}

/* contenedor del video */
.pf-modal-media{
  padding: 18px;
}

/* iframe grande + 16:9 */
.pf-modal-media iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;

  border: 0;
  border-radius: 18px;
  background: #000;

  /* borde/glow coherente con tu estilo */
  outline: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

/* en pantallas bajitas: limita por altura */
@media (max-height: 720px){
  .pf-modal-media iframe{
    height: 52vh;
    aspect-ratio: auto;
  }
}
/* =========================
   MODAL PLAYER (YouTube + Local MP4)
========================= */

/* contenedor del media dentro del modal (ajusta el selector si tu modal usa otro nombre) */
.pf-modal .pf-player,
.pf-modal .pf-media-box,
.pf-modal .pf-modal-media{
  width: min(1100px, 92vw);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  max-height: 75vh; /* 👈 evita que se haga gigante */
}

/* el video/iframe siempre se adapta al contenedor */
.pf-modal iframe,
.pf-modal video{
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
}

/* por si tu <video> queda fuera del wrapper en algún caso */
.pf-modal video{
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
}
/* SOLO videos */
.pf-media[data-video]::after{
  content:"▶";
  /* estilos del play */
}

/* Diseño gráfico = limpio */
.pf-media:not([data-video])::after{
  display:none;
}

/* =========================
   MODAL MEDIA (CENTRADO + SIN RECORTE)
========================= */
#pfModalMedia{
  display: grid;
  place-items: center;
  width: 100%;
  max-height: min(72vh, 720px);   /* ajusta si quieres más alto */
  overflow: hidden;              /* el contenedor puede ocultar exceso,
                                   pero el img estará en "contain" */
}

/* IMAGEN EN MODAL (NO SE CORTA) */
#pfModalMedia .pf-modal-image{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: min(82vh, 860px);

  object-fit: contain;           /* ✅ CLAVE: nunca recorta */
  border-radius: 18px;
  display: block;
}

/* VIDEO/IFRAME (mantener bien) */
#pfModalMedia iframe,
#pfModalMedia video{
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 18px;
  display: block;
  background: #000;
}
/* =========================
   PORTFOLIO CTA
========================= */
.pf-cta{
  padding: clamp(70px, 10vw, 110px) 22px;
  display: flex;
  justify-content: center;
}

.pf-cta-card{
  max-width: 720px;
  width: 100%;
  text-align: center;          /* 👈 centra todo */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;                   /* 👈 salto de línea uniforme */
}

/* pequeños ajustes opcionales */
.pf-cta-kicker{
  letter-spacing: .34em;
  text-transform: uppercase;
}

.pf-cta-title{
  margin-top: 6px;
}

.pf-cta-subtitle{
  margin-top: 4px;
  margin-bottom: 12px;         /* 👈 espacio antes del botón */
}

.pf-cta .btn{
  margin-top: 8px;             /* 👈 botón separado */
}
/* =========================
   PF CTA — CENTRO REAL
========================= */
.pf-cta{
  position: relative;
  width: 100%;
  min-height: 100vh;          /* ocupa toda la pantalla */
  display: grid;
  place-items: center;        /* 🔥 centro horizontal + vertical */
  padding: 0 22px;
}

.pf-cta-card{
  margin: 0 !important;       /* 🔥 elimina empujes raros */
  max-width: 420px;
  width: 100%;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
/* =========================
   PF CTA — FIX: si está dentro de .pf-grid (3 columnas)
   => que ocupe TODO el ancho y se centre
========================= */
.pf-grid .pf-cta{
  grid-column: 1 / -1;     /* 🔥 ocupa las 3 columnas */
  justify-self: stretch;   /* se estira en ancho */
  width: 100%;
  margin-top: clamp(26px, 4vw, 44px);

  /* centro real */
  min-height: calc(100vh - 72px); /* resta navbar */
  display: grid;
  place-items: center;
  padding: 0 22px;
}

.pf-grid .pf-cta .pf-cta-card{
  margin: 0 !important;
  width: min(520px, 92vw); /* más lindo en desktop */
}


/* ===============================
   BLOG (PÁGINA)
================================ */

/* separador para compensar navbar fija */
.blog-hero{
  position: relative;
  padding: calc(72px + 54px) clamp(22px, 4vw, 64px) 54px;
  overflow:hidden;
  isolation:isolate;
}

.blog-hero::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(1000px 700px at 18% 25%, rgba(221,132,72,.12), transparent 60%),
    radial-gradient(900px 650px at 82% 75%, rgba(42,167,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.70));
  z-index:-2;
  pointer-events:none;
}

.blog-hero-glow{
  position:absolute;
  inset:-120px;
  background:
    radial-gradient(700px 520px at 30% 45%, rgba(221,132,72,.16), transparent 60%),
    radial-gradient(760px 560px at 75% 55%, rgba(42,167,255,.12), transparent 62%);
  filter: blur(30px);
  opacity: .55;
  z-index:-1;
  pointer-events:none;
}

.blog-hero-wrap{
  width: min(var(--container), 100%);
  margin: 0 auto;
  text-align:center;
  max-width: 980px;
}

/* BLOG KICKER = subrayado glow premium animado */
.blog-kicker{
  position: relative;
  display: inline-block;
  letter-spacing:.34em;
  text-transform:uppercase;
  font-weight:800;
  font-size: 16px;
  color: rgba(255,255,255,.74);
}

/* LÍNEA GLOW */
.blog-kicker::after{
  content:"";
  display:block;
  width: min(520px, 72vw);
  height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(221,132,72,1),
    rgba(255,255,255,.95),
    rgba(42,167,255,1),
    transparent
  );
  opacity:.75;
  filter: blur(.25px);
  animation: linePulse 3.2s ease-in-out infinite;
}

/* GLOW PROFUNDO ANIMADO */
.blog-kicker::before{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:-18px;
  width: min(520px, 72vw);
  height: 42px;
  background:
    radial-gradient(60% 60% at 50% 50%,
      rgba(221,132,72,.38),
      rgba(42,167,255,.32),
      transparent 70%
    );
  filter: blur(30px);
  opacity:.85;
  pointer-events:none;
  z-index:-1;
  animation: glowBreath 4.6s ease-in-out infinite;
}

.blog-title{
  margin-top: 12px;
  font-size: clamp(44px, 6vw, 66px);
  line-height: 1.02;
  letter-spacing:.05em;
  font-weight: 950;
  text-transform: uppercase;
  position: relative;
  text-shadow:
    0 0 14px rgba(255,255,255,.16),
    0 0 30px rgba(221,132,72,.20),
    0 0 60px rgba(42,167,255,.16);
}

.blog-title::after{
  content:"";
  position:absolute;
  inset:-18px;
  background:
    radial-gradient(60% 60% at 50% 50%,
      rgba(255,255,255,.18),
      rgba(221,132,72,.16),
      rgba(42,167,255,.14),
      transparent 70%
    );
  filter: blur(26px);
  opacity:.85;
  z-index:-1;
  pointer-events:none;
}

.blog-title span{
  text-shadow:
    0 0 18px rgba(255,255,255,.22),
    0 0 36px rgba(42,167,255,.35),
    0 0 70px rgba(221,132,72,.28);
}

.blog-subtitle{
  margin-top: 12px;
  color: rgba(255,255,255,.68);
  letter-spacing:.18em;
  text-transform: uppercase;
  font-size: 12px;
  max-width: 760px;
  margin-left:auto;
  margin-right:auto;
}

/* Controls */
.blog-controls{
  margin-top: 22px;
  display:flex;
  gap: 14px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}

.blog-tabs{
  display:flex;
  gap: 10px;
  padding: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
}

.blog-tab{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.86);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing:.18em;
  text-transform: uppercase;
  cursor:pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.blog-tab:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.26); }
.blog-tab.is-active{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

.blog-search{
  min-width: min(420px, 92vw);
}

.blog-search input{
  width: 100%;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,10,14,.55);
  color: rgba(255,255,255,.90);
  padding: 12px 16px;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.blog-search input:focus{
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 0 0 4px rgba(221,132,72,.10);
}

.blog{
  position: relative;
  padding: 0 clamp(22px, 4vw, 64px) clamp(90px, 10vw, 130px);
  overflow:hidden;
  isolation:isolate;
}

.blog-wrap{
  width: min(var(--container), 100%);
  margin: 0 auto;
}

/* =========================
   GRID (DEFAULT: CARDS)
========================= */
.blog-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
  margin-top: 26px;
}

.post-card{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 75px rgba(0,0,0,.35);
  overflow:hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.post-card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 45px 95px rgba(0,0,0,.45);
}

.post-cover{
  display:block;
  position: relative;
  height: 190px;
  overflow:hidden;
}

.post-cover img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  transition: transform .6s ease;
}

.post-card:hover .post-cover img{ transform: scale(1.08); }

.post-cover::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55)),
    radial-gradient(80% 60% at 30% 30%, rgba(221,132,72,.22), transparent 60%);
  pointer-events:none;
}

.post-chip{
  position:absolute;
  top: 14px;
  left: 14px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.88);
  font-size: 10px;
  letter-spacing:.20em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.post-body{
  padding: 18px 18px 16px;
}

.post-meta{
  font-size: 11px;
  letter-spacing:.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.60);
  margin-bottom: 10px;
}

.post-title{
  font-size: 16px;
  letter-spacing:.06em;
  text-transform: uppercase;
  font-weight: 950;
  color: rgba(255,255,255,.94);
  line-height: 1.2;
}

.post-excerpt{
  margin-top: 10px;
  color: rgba(255,255,255,.72);
  line-height: 1.7;
  font-size: 14px;
}

.post-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 14px;
}

.post-link{
  text-decoration:none;
  color: rgba(255,255,255,.92);
  font-size: 11px;
  letter-spacing:.22em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.24);
  padding-bottom: 2px;
}

.post-link:hover{ border-bottom-color: rgba(255,255,255,.44); }

.post-tag{
  font-size: 10px;
  letter-spacing:.20em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
}

.blog-empty{
  margin-top: 24px;
  text-align:center;
  color: rgba(255,255,255,.70);
  letter-spacing:.10em;
  text-transform: uppercase;
  font-size: 12px;
}

/* =========================
   ✅ LISTA PREMIUM (ARTÍCULOS + LIBROS)
   (cuando #blogGrid tiene .is-list)
========================= */

/* Panel sutil */
.blog-grid.is-list{
  display: block;
  max-width: 940px;
  margin: 26px auto 0;
  padding: 18px 18px 10px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  backdrop-filter: blur(12px);
  box-shadow: 0 28px 70px rgba(0,0,0,.38);
}

/* cada item como “fila” */
.blog-grid.is-list .post-card{
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  transform: none !important;
}

/* ocultar elementos de card */
.blog-grid.is-list .post-cover,
.blog-grid.is-list .post-excerpt,
.blog-grid.is-list .post-actions,
.blog-grid.is-list .post-meta,
.blog-grid.is-list .post-chip{
  display: none !important;
}

.blog-grid.is-list .post-body{
  padding: 0;
}

/* título editorial */
.blog-grid.is-list .post-title{
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.7;
  letter-spacing: .02em;
  text-transform: none;
}

/* Link: evita azul/morado visited */
.blog-grid.is-list .post-title a,
.blog-grid.is-list .post-title a:visited{
  display: block;
  text-decoration: none;
  color: rgba(255,255,255,.86);
  padding: 14px 14px 14px 46px;
  border-radius: 16px;
  transition:
    transform .18s ease,
    background .22s ease,
    color .22s ease,
    box-shadow .22s ease;
}

/* Bullet elegante */
.blog-grid.is-list .post-title a::before{
  content:"•";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  color: color-mix(in srgb, var(--amber, #dd8448) 70%, white 30%);
  opacity: .9;
  text-shadow:
    0 0 18px rgba(221,132,72,.28),
    0 0 30px rgba(42,167,255,.14);
}

/* flecha sutil */
.blog-grid.is-list .post-title a::after{
  content:"↗";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: rgba(255,255,255,.45);
  opacity: .9;
  transition: transform .22s ease, color .22s ease;
}

/* hover premium */
@media (hover:hover) and (pointer:fine){
  .blog-grid.is-list .post-title a:hover{
    color: rgba(255,255,255,.98);
    background: rgba(255,255,255,.04);
    box-shadow:
      0 18px 45px rgba(0,0,0,.40),
      0 0 0 1px rgba(255,255,255,.08),
      0 0 32px rgba(221,132,72,.10);
    transform: translateY(-1px);
  }
  .blog-grid.is-list .post-title a:hover::after{
    color: rgba(255,255,255,.70);
    transform: translateY(-50%) translateX(2px);
  }
}

/* separador fino */
.blog-grid.is-list .post-card::after{
  content:"";
  display:block;
  height: 1px;
  margin: 10px 6px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.12),
    rgba(255,255,255,0)
  );
}

.blog-grid.is-list .post-card:last-child::after{
  opacity: .35;
}

/* =========================
   Responsive (cards + list)
========================= */
@media (max-width: 1100px){
  .blog-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px){
  .blog-grid{ grid-template-columns: 1fr; }
  .post-cover{ height: 210px; }

  .blog-grid.is-list{
    max-width: 92vw;
    padding: 14px 12px 8px;
    border-radius: 18px;
  }
  .blog-grid.is-list .post-title{
    font-size: 15px;
  }
  .blog-grid.is-list .post-title a,
  .blog-grid.is-list .post-title a:visited{
    padding: 12px 12px 12px 42px;
  }
  .blog-grid.is-list .post-title a::before{
    left: 16px;
  }
}

/* =========================
   BLOG – FILTER CARDS (PORTFOLIO/SERVICES STYLE)
========================= */
.blog-filter-cards{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 22px);
  margin-top: 24px;
}

.blog-filter-card{
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-align: left;
  width: 100%;

  position: relative;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 75px rgba(0,0,0,.35);
  overflow: hidden;
  isolation: isolate;

  padding: 0;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.blog-filter-card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 45px 95px rgba(0,0,0,.45);
}

/* Electric border (SVG) */
.blog-filter-card .service-electric{
  position:absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  pointer-events:none;
  z-index: 2;
  opacity: .95;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--electric, #dd8448) 35%, transparent));
}

.blog-filter-card .service-electric__stroke{
  fill: transparent;
  stroke: color-mix(in srgb, var(--electric, #dd8448) 78%, white 22%);
  stroke-width: 1.7;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  opacity: .85;
  stroke-dasharray: 1.2 7.5;
  animation: electricDash 5.2s linear infinite;
}

/* Media */
.blog-filter-card .service-media{
  height: 205px;
  margin: 12px 12px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 28px 28px 18px 18px;
  position: relative;
}

.blog-filter-card .service-media img{
  width: 270px;
  height: 270px;
  max-width: 97%;
  max-height: 97%;
  object-fit: contain;
  display: block;

  --ix: -14px;
  --iy: -6px;

  transform: translateX(var(--ix)) translateY(var(--iy)) scale(1.06);
  transition: transform .6s ease;
}

.blog-filter-card:hover .service-media img{
  transform: translateX(var(--ix)) translateY(var(--iy)) scale(1.14);
}

.blog-filter-card.is-active .service-media img{
  transform: translateX(var(--ix)) translateY(var(--iy)) scale(1.20);
}

.blog-filter-card .service-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.70)),
    radial-gradient(
      80% 60% at 30% 30%,
      color-mix(in srgb, var(--electric, #dd8448) 25%, transparent),
      transparent 60%
    );
  pointer-events:none;
}

/* Texto */
.blog-filter-card{
  text-align: center;
}

.blog-filter-card .service-name{
  margin: 14px auto 10px;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.94);
  width: 100%;
  position: relative;
  z-index: 3;
  text-shadow:
    0 0 16px rgba(255,255,255,.10),
    0 0 34px color-mix(in srgb, var(--electric, #dd8448) 20%, transparent);
}

.blog-filter-card .service-desc{
  margin: 0 auto 18px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,.72);
  width: min(360px, 86%);
  position: relative;
  z-index: 3;
}

/* Activa */
.blog-filter-card.is-active{
  transform: translateY(-8px) scale(1.01);
  border-color: rgba(255,255,255,.34);
  box-shadow:
    0 60px 140px rgba(0,0,0,.65),
    0 0 35px color-mix(in srgb, var(--electric, #dd8448) 45%, transparent),
    0 0 110px color-mix(in srgb, var(--electric, #dd8448) 25%, transparent);
}

.blog-filter-card.is-active .service-electric__stroke{
  opacity: 1;
  stroke-width: 2;
  stroke-dasharray: 1.1 6.2;
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--electric, #dd8448) 55%, transparent));
}

@media (max-width: 980px){
  .blog-filter-cards{ grid-template-columns: 1fr; }
  .blog-filter-card .service-media{ height: 190px; }
}

@keyframes electricDash{
  to { stroke-dashoffset: -260; }
}

/* =========================
   PRELOADER (LOGO + BLUE THUNDER)
========================= */
/* =========================
       PRELOADER (BLUE FIRE)
    ========================= */
    .preloader{
      position:fixed; inset:0;
      z-index:99999;
      display:grid;
      place-items:center;
      background: rgba(6,6,10,.93);
      backdrop-filter: blur(14px);
      transition: opacity .45s ease, visibility .45s ease;
      isolation:isolate;
    }
    .preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }

    /* fondo profundo */
    .preloader::before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(900px 620px at 50% 40%, rgba(42,167,255,.18), transparent 62%),
        radial-gradient(800px 520px at 30% 75%, rgba(91,211,255,.10), transparent 65%),
        linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.86));
      z-index:-4;
    }

    .preloader-core{
      position:relative;
      width:min(560px, 92vw);
      height:min(560px, 92vw);
      display:grid;
      place-items:center;
      isolation:isolate;
    }

    /* =========================
       BLUE FIRE LAYERS
    ========================= */

    /* 1) halo fuego base */
    .bluefire-halo{
      position:absolute;
      inset:-36px;
      border-radius:999px;
      background:
        radial-gradient(closest-side, rgba(42,167,255,.18), transparent 62%),
        radial-gradient(closest-side, rgba(91,211,255,.10), transparent 70%);
      filter: blur(18px);
      opacity:.95;
      z-index:-3;
      animation: fireBreath 2.2s ease-in-out infinite;
      pointer-events:none;
    }

    /* 2) lenguas de fuego (conic + mask) */
    .bluefire-flames{
      position:absolute;
      inset:-46px;
      border-radius:999px;
      background:
        conic-gradient(
          from 0deg,
          rgba(42,167,255,0) 0deg,
          rgba(42,167,255,.0) 18deg,
          rgba(91,211,255,.55) 28deg,
          rgba(255,255,255,.55) 36deg,
          rgba(42,167,255,.70) 44deg,
          rgba(42,167,255,0) 64deg,
          rgba(42,167,255,0) 90deg,

          rgba(42,167,255,0) 120deg,
          rgba(91,211,255,.40) 138deg,
          rgba(255,255,255,.45) 146deg,
          rgba(42,167,255,.62) 156deg,
          rgba(42,167,255,0) 176deg,

          rgba(42,167,255,0) 210deg,
          rgba(91,211,255,.35) 228deg,
          rgba(255,255,255,.42) 238deg,
          rgba(42,167,255,.58) 248deg,
          rgba(42,167,255,0) 270deg,

          rgba(42,167,255,0) 360deg
        );

      /* máscara para que parezca “fuego” hacia arriba */
      -webkit-mask:
        radial-gradient(closest-side, #000 55%, transparent 78%),
        radial-gradient(60% 70% at 50% 38%, #000 55%, transparent 78%);
      -webkit-mask-composite: source-in;
              mask:
        radial-gradient(closest-side, #000 55%, transparent 78%),
        radial-gradient(60% 70% at 50% 38%, #000 55%, transparent 78%);
      mask-composite: intersect;

      filter: blur(10px);
      opacity:.78;
      z-index:-2;
      animation: flamesSpin 1.35s linear infinite;
      mix-blend-mode: screen;
      pointer-events:none;
    }

    /* 3) shimmer caliente (ondas verticales) */
    .bluefire-heat{
      position:absolute;
      inset:-18px;
      border-radius:999px;
      background:
        radial-gradient(closest-side, rgba(255,255,255,.10), transparent 68%),
        linear-gradient(180deg,
          rgba(42,167,255,.0),
          rgba(42,167,255,.12),
          rgba(255,255,255,.10),
          rgba(42,167,255,.0)
        );
      filter: blur(14px);
      opacity:.55;
      z-index:-1;
      animation: heatWobble 1.8s ease-in-out infinite;
      pointer-events:none;
    }

    /* chispas */
    .bluefire-sparks{
      position:absolute;
      inset:-80px;
      background:
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.20), transparent 60%),
        radial-gradient(2px 2px at 68% 42%, rgba(255,255,255,.16), transparent 60%),
        radial-gradient(2px 2px at 42% 70%, rgba(255,255,255,.14), transparent 60%),
        radial-gradient(1px 1px at 58% 78%, rgba(91,211,255,.22), transparent 60%),
        radial-gradient(1px 1px at 34% 18%, rgba(42,167,255,.18), transparent 60%);
      opacity:.45;
      filter: blur(.3px);
      z-index:-1;
      animation: sparksDrift 3.6s ease-in-out infinite;
      pointer-events:none;
    }

    @keyframes fireBreath{
      0%,100%{ transform: scale(.94); opacity:.70; }
      50%{ transform: scale(1.02); opacity:1; }
    }
    @keyframes flamesSpin{
      to{ transform: rotate(360deg); }
    }
    @keyframes heatWobble{
      0%,100%{ transform: translateY(0) scale(1); opacity:.45; }
      50%{ transform: translateY(-6px) scale(1.02); opacity:.70; }
    }
    @keyframes sparksDrift{
      0%,100%{ transform: translate3d(-1.5%, -1%, 0); opacity:.35; }
      50%{ transform: translate3d(1.5%, 1%, 0); opacity:.55; }
    }

    /* =========================
       RING SPIN (refuerzo)
    ========================= */
    .preloader-ring{
      position:absolute;
      width:100%;
      height:100%;
      border-radius:50%;
      background:
        conic-gradient(
          rgba(42,167,255,0) 0deg,
          rgba(42,167,255,.85) 70deg,
          rgba(255,255,255,.75) 95deg,
          rgba(42,167,255,.85) 120deg,
          rgba(42,167,255,0) 180deg,
          rgba(42,167,255,.28) 260deg,
          rgba(42,167,255,0) 360deg
        );
      -webkit-mask: radial-gradient(closest-side, transparent calc(50% - 12px), #000 calc(50% - 11px));
              mask: radial-gradient(closest-side, transparent calc(50% - 12px), #000 calc(50% - 11px));
      filter: blur(.2px);
      opacity:.70;
      animation: ringSpin 1.1s linear infinite;
      z-index:0;
      pointer-events:none;
    }
    @keyframes ringSpin{ to{ transform: rotate(360deg); } }

    /* =========================
       LOGO
    ========================= */
    .preloader-logo{
      width:min(260px, 64vw);
      height:auto;
      display:block;
      object-fit:contain;
      z-index: 2;

      filter:
        drop-shadow(0 0 16px rgba(255,255,255,.18))
        drop-shadow(0 0 26px rgba(42,167,255,.42))
        drop-shadow(0 0 55px rgba(42,167,255,.26));

      animation: logoFloat 2.2s ease-in-out infinite;
    }
    @keyframes logoFloat{
      0%,100%{ transform: translateY(0); }
      50%{ transform: translateY(-10px); }
    }

 .preloader-text{
  position:absolute;
  bottom: 18px;
  display:flex;
  gap: 6px;

  letter-spacing:.45em;
  text-transform:uppercase;
  font-weight:900;
  font-size: 16px;

  color: rgba(255,255,255,.75);
  z-index: 2;
  user-select:none;
}

.preloader-text span{
  display:inline-block;

  background-image:
    linear-gradient(180deg,
      #ffffff 0%,
      #cfeeff 35%,
      #7cc9ff 60%,
      #ffffff 100%
    );
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 0 10px rgba(42,167,255,.35),
    0 0 22px rgba(42,167,255,.45);

  animation: loadingWave 1.6s ease-in-out infinite;
}

/* delay progresivo letra por letra */
.preloader-text span:nth-child(1){ animation-delay: 0s; }
.preloader-text span:nth-child(2){ animation-delay: .05s; }
.preloader-text span:nth-child(3){ animation-delay: .10s; }
.preloader-text span:nth-child(4){ animation-delay: .15s; }
.preloader-text span:nth-child(5){ animation-delay: .20s; }
.preloader-text span:nth-child(6){ animation-delay: .25s; }
.preloader-text span:nth-child(7){ animation-delay: .30s; }
.preloader-text span:nth-child(8){ animation-delay: .35s; }

@keyframes loadingWave{
  0%{
    opacity:.35;
    transform: translateY(0) scale(.92);
    filter: blur(.3px);
  }
  40%{
    opacity:1;
    transform: translateY(-6px) scale(1.05);
    filter: blur(0);
  }
  80%{
    opacity:.55;
    transform: translateY(0) scale(.96);
  }
  100%{
    opacity:.35;
    transform: translateY(0) scale(.92);
  }
}

    /* reduce motion */
    @media (prefers-reduced-motion: reduce){
      .bluefire-halo,.bluefire-flames,.bluefire-heat,.bluefire-sparks,.preloader-ring,.preloader-logo{
        animation:none !important;
      }
    }


    /* =========================
   SCROLL REVEAL (entrada por sección)
========================= */

/* estado inicial */
.reveal{
  opacity: 0;
  transform: translateY(26px);
  filter: blur(10px);
  transition:
    opacity .75s ease,
    transform .75s cubic-bezier(.2,.9,.2,1),
    filter .75s ease;
  will-change: opacity, transform, filter;
}

/* variantes */
.reveal--up{ transform: translateY(26px); }
.reveal--left{ transform: translateX(-34px); }
.reveal--right{ transform: translateX(34px); }

/* al entrar */
.reveal.is-in{
  opacity: 1;
  transform: translate(0,0);
  filter: blur(0);
}

/* detalle: un glow sutil al entrar (opcional, queda elegante) */
.reveal.is-in{
  animation: revealGlow 1.1s ease both;
}
@keyframes revealGlow{
  0%{ box-shadow: none; }
  45%{
    box-shadow:
      0 0 0 rgba(0,0,0,0),
      0 0 30px rgba(42,167,255,.10),
      0 0 40px rgba(221,132,72,.08);
  }
  100%{ box-shadow: none; }
}

/* accesibilidad: si el usuario tiene reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }
}
/* ===============================
   VERTICAL IMAGE CAROUSEL (STYLE)
================================ */
.v-carousel{
  position: relative;
  padding: clamp(80px, 10vw, 130px) clamp(22px, 4vw, 64px);
  overflow:hidden;
  isolation:isolate;
}

.v-carousel::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(1000px 700px at 18% 30%, rgba(221,132,72,.10), transparent 60%),
    radial-gradient(900px 600px at 85% 70%, rgba(42,167,255,.08), transparent 62%);
  z-index:-1;
  pointer-events:none;
}

.v-carousel-wrap{
  width: min(1200px, 100%);
  margin: 0 auto;
}

/* Head (similar vibe) */
/* =========================================
   V-CAROUSEL HEAD — MISMO EFECTO QUE ABOUT/SERVICES/CONTACT
   (línea glow + halo animado + título premium)
   Pegar al FINAL del styles.css
========================================= */

.v-carousel-head{
  position: relative;
  text-align: center;
  max-width: 820px;
  margin: 0 auto 46px;
}

/* Línea glow (igual que otras secciones) */
.v-carousel-head::after{
  content:"";
  display:block;
  width: min(520px, 72%);
  height: 2px;
  margin: 20px auto 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(221,132,72,1),
    rgba(255,255,255,.95),
    rgba(42,167,255,1),
    transparent
  );
  opacity:.75;
  filter: blur(.25px);
  animation: linePulse 3.2s ease-in-out infinite;
}

/* Glow profundo animado (igual que otras secciones) */
.v-carousel-head::before{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:-20px;
  width: min(520px, 72%);
  height: 42px;
  background:
    radial-gradient(60% 60% at 50% 50%,
      rgba(221,132,72,.38),
      rgba(42,167,255,.32),
      transparent 70%
    );
  filter: blur(30px);
  opacity:.85;
  pointer-events:none;
  z-index:-1;
  animation: glowBreath 4.6s ease-in-out infinite;
}

/* Kicker/tag (mismo vibe) */
.v-carousel-kicker{
  display:inline-block;
  letter-spacing:.34em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 14px;
  color: rgba(255,255,255,.74);
}

/* Título principal (mismo punch) */
.v-carousel-title{
  margin-top: 12px;
  font-size: clamp(60px, 7vw, 80px);
  line-height: 1.08;
  letter-spacing: .04em;
  font-weight: 950;
  text-transform: uppercase;
  position: relative;
  color: rgba(255,255,255,.98);
  text-shadow:
    0 0 14px rgba(255,255,255,.18),
    0 0 30px rgba(221,132,72,.18),
    0 0 60px rgba(42,167,255,.14);
}

/* Aura detrás del título (como about/contact) */
.v-carousel-title::after{
  content:"";
  position:absolute;
  inset:-18px;
  background:
    radial-gradient(60% 60% at 50% 50%,
      rgba(255,255,255,.18),
      rgba(221,132,72,.16),
      rgba(42,167,255,.14),
      transparent 70%
    );
  filter: blur(26px);
  opacity:.85;
  z-index:-1;
  pointer-events:none;
}

/* Resalta la B como en otros spans */
.v-carousel-title span{
  color: rgba(255,255,255,.98);
  text-shadow:
    0 0 18px rgba(255,255,255,.20),
    0 0 32px rgba(42,167,255,.28),
    0 0 60px rgba(221,132,72,.22);
}

/* Subtítulo (mismo estilo) */
.v-carousel-subtitle{
  margin-top: 10px;
  color: rgba(255,255,255,.68);
  letter-spacing: .24em;
  text-transform: uppercase;
  font-size: 14px;
}

/* Si por algún motivo no existieran en tu CSS global */
@keyframes glowBreath{
  0%,100%{ opacity:.65; transform: translateX(-50%) scale(.98); }
  50%{ opacity:1; transform: translateX(-50%) scale(1.02); }
}
@keyframes linePulse{
  0%,100%{ opacity:.55; filter: blur(.25px); }
  50%{ opacity:.92; filter: blur(.6px); }
}


/* Shell */
.v-carousel-shell{
  position: relative;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
  padding: 18px 18px 20px;
  overflow: hidden;
}

.v-carousel-shell::after{
  content:"";
  position:absolute;
  inset:-20px;
  background:
    radial-gradient(60% 60% at 20% 50%, rgba(221,132,72,.18), transparent 62%),
    radial-gradient(60% 60% at 80% 50%, rgba(42,167,255,.14), transparent 65%);
  filter: blur(18px);
  opacity:.30;
  pointer-events:none;
}

/* Viewport */
.v-carousel-viewport{
  overflow: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  border-radius: 22px;
  padding: 6px;
}

.v-carousel-viewport::-webkit-scrollbar{ display:none; }
.v-carousel-viewport.is-grabbing{ cursor: grabbing; }

.v-carousel-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(220px, 28vw, 320px);
  gap: 16px;
  align-items: center;
  padding: 10px;
}

/* Vertical cards */
.v-card{
  scroll-snap-align: start;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,10,14,.55);
  aspect-ratio: 9 / 16; /* ✅ formato vertical */
  box-shadow: 0 18px 46px rgba(0,0,0,.35);
  transform: translateY(0) scale(.98);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .35s ease;
  opacity: .82;
}

.v-card.is-active{
  opacity: 1;
  transform: translateY(-2px) scale(1);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 28px 75px rgba(0,0,0,.45);
}

.v-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
}

/* Buttons */
.v-carousel-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,10,14,.55);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 2;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.v-carousel-btn span{
  font-size: 24px;
  line-height: 1;
  transform: translateY(-1px);
}

.v-carousel-btn:hover{
  transform: translateY(-50%) scale(1.05);
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
}

.v-prev{ left: 14px; }
.v-next{ right: 14px; }

/* Dots */
.v-carousel-dots{
  display:flex;
  gap: 10px;
  justify-content:center;
  align-items:center;
  margin-top: 16px;
}

.v-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  cursor:pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.v-dot.is-active{
  transform: scale(1.35);
  border-color: rgba(255,255,255,.35);
  background: linear-gradient(90deg, rgba(221,132,72,.85), rgba(42,167,255,.75));
}

/* Responsive */
@media (max-width: 760px){
  .v-carousel-shell{ padding: 14px; }
  .v-carousel-track{
    grid-auto-columns: 78%;
    gap: 14px;
  }
  .v-prev, .v-next{ display:none; } /* swipe en móvil */
}
.v-carousel-viewport{
  overflow-x: auto;
  overflow-y: hidden;
}
.v-carousel-track{
  width: max-content; /* fuerza que el track sea más ancho que el viewport */
}


/* =========================
   NAVBAR — BURGER (BASE)
========================= */

/* Oculta burger en desktop por defecto */
.navbar-burger{
  display: none;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;

  width: 46px;
  height: 46px;
  border-radius: 14px;

  align-items: center;
  justify-content: center;
  gap: 6px;

  position: relative;
  z-index: 1201; /* por encima del menú */
}

/* Las 3 líneas */
.navbar-burger span{
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);

  box-shadow:
    0 0 16px rgba(221,132,72,.18),
    0 0 16px rgba(42,167,255,.16);

  transition: transform .25s ease, opacity .2s ease, width .25s ease, background .25s ease;
}

/* Animación a X cuando esté abierto */
body.nav-open .navbar-burger span:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
body.nav-open .navbar-burger span:nth-child(2){
  opacity: 0;
  transform: translateX(6px);
}
body.nav-open .navbar-burger span:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}


/* =========================================
   PORTFOLIO MODAL — IMAGEN SIEMPRE COMPLETA
   (aplica desktop + mobile)
========================================= */

/* El área media del modal debe tener un tamaño real y centrar */
.pf-modal-media,
#pfModalMedia{
  display: grid;
  place-items: center;
  padding: 16px;
  overflow: hidden;
}

/* Imagen: nunca se recorta, siempre completa */
#pfModalMedia .pf-modal-image{
  width: auto !important;
  height: auto !important;

  /* límites por viewport */
  max-width: min(1100px, 92vw) !important;
  max-height: calc(88vh - 110px) !important; /* descuenta título + padding */

  object-fit: contain !important;
  object-position: center !important;

  display: block;
  border-radius: 16px;
  background: rgba(0,0,0,.45);
  outline: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
}

/* Videos/iframes también se adaptan sin salirse */
#pfModalMedia iframe,
#pfModalMedia video{
  width: min(1100px, 92vw);
  max-height: calc(88vh - 110px);
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
}


/* =========================================
   PF MODAL — FIX DEFINITIVO
   ✅ sin óvalo blur deforme
   ✅ imágenes NO recortadas (contain)
   ✅ videos 16:9 correcto
   PÉGALO AL FINAL DEL CSS
========================================= */

/* Backdrop */
.pf-modal-backdrop{
  background: rgba(0,0,0,.72) !important;
  backdrop-filter: blur(10px) !important;
}

/* Centro del modal */
.pf-modal{
  display: none;
}
.pf-modal.is-open{
  display: grid !important;
  place-items: center !important;
}

/* Card (ventana) */
.pf-modal-card{
  width: min(1100px, calc(100% - 28px)) !important;
  max-height: calc(92vh - 24px) !important;
  overflow: hidden !important;

  border-radius: 26px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(10,10,14,.72) !important;
  backdrop-filter: blur(14px) !important;

  box-shadow: 0 40px 110px rgba(0,0,0,.70) !important;
  position: relative !important;
}

/* ❌ Mata el “ovalo blur deforme” si algún ::before/::after estaba en píldora */
.pf-modal-card::before,
.pf-modal-card::after{
  border-radius: 26px !important;   /* antes 999px -> óvalo */
}

/* Título */
.pf-modal-title{
  padding: 18px 18px 10px !important;
}

/* Área media: NUNCA forzar aspect-ratio aquí */
.pf-modal-media,
#pfModalMedia{
  padding: 16px !important;
  display: grid !important;
  place-items: center !important;

  /* clave: que el recorte no venga de aquí */
  overflow: visible !important;
  aspect-ratio: auto !important;
  max-height: calc(92vh - 120px) !important; /* descuenta header */
}

/* =========================
   IMAGEN (NO RECORTE)
========================= */
#pfModalMedia .pf-modal-image{
  width: auto !important;
  height: auto !important;

  max-width: 92vw !important;
  max-height: calc(92vh - 140px) !important;

  object-fit: contain !important;
  object-position: center !important;

  border-radius: 18px !important;
  display: block !important;

  background: rgba(0,0,0,.35) !important;
  outline: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.60) !important;
}

/* =========================
   VIDEO (16:9 bien)
========================= */
#pfModalMedia iframe,
#pfModalMedia video{
  width: min(1100px, 92vw) !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;

  max-height: calc(92vh - 140px) !important;

  border: 0 !important;
  border-radius: 18px !important;
  display: block !important;
  background: #000 !important;

  outline: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.60) !important;
}

/* IMPORTANTÍSIMO:
   Si antes tenías reglas globales que aplican aspect-ratio al modal,
   las anulamos aquí sí o sí */
.pf-modal .pf-player,
.pf-modal .pf-media-box{
  aspect-ratio: auto !important;
  max-height: none !important;
  overflow: visible !important;
  border-radius: 18px !important;
}

/* Close siempre arriba */
.pf-modal-close{
  top: 12px !important;
  right: 12px !important;
  z-index: 20 !important;
}
.v-carousel-viewport{
  touch-action: pan-y;         /* ✅ permite scroll vertical aunque estés encima del carrusel */
  overscroll-behavior: contain;
}



/* ===============================
   REELS — MURAL (solo miniaturas 9:16)
   ✅ Activo SOLO cuando .pf-grid tiene .is-reels (lo pone el JS)
   ✅ Reels sin cuerpo/chips
   ✅ Vertical real 9:16
================================ */

/* grid reels (más denso) */
.pf-grid.is-reels{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

/* cada reel: sin “tarjeta” pesada, solo recorte */
.pf-grid.is-reels .pf-card[data-cat="reels"]{
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
}

/* SOLO miniatura 9:16 */
.pf-grid.is-reels .pf-card[data-cat="reels"] .pf-media{
  display:block;
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow:hidden;
  height: auto !important;
  min-height: 0 !important;
  transform: translateZ(0);
  will-change: transform;
}

/* poster */
.pf-grid.is-reels .pf-card[data-cat="reels"] .pf-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  transition: transform .55s ease;
  filter: saturate(1.02) contrast(1.02);
}

.pf-grid.is-reels .pf-card[data-cat="reels"]:hover .pf-media img{
  transform: scale(1.08);
}

/* overlay */
.pf-grid.is-reels .pf-card[data-cat="reels"] .pf-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.58));
  pointer-events:none;
}

/* halo */
.pf-grid.is-reels .pf-card[data-cat="reels"] .pf-media::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.34);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  pointer-events:none;
  z-index: 1;
}

/* play */
.pf-grid.is-reels .pf-card[data-cat="reels"] .pf-media .pf-play{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-45%,-50%);
  width:0;
  height:0;
  border-left: 16px solid rgba(255,255,255,.92);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  pointer-events:none;
  z-index: 2;
}

/* lift */
.pf-grid.is-reels .pf-card[data-cat="reels"] .pf-media:hover{
  transform: translateY(-2px);
}

/* ocultar textos/chips en reels */
.pf-grid.is-reels .pf-card[data-cat="reels"] .pf-body,
.pf-grid.is-reels .pf-card[data-cat="reels"] .pf-chip{
  display:none !important;
}

/* mural usa solo posters */
.pf-grid.is-reels .pf-card[data-cat="reels"] .pf-media iframe,
.pf-grid.is-reels .pf-card[data-cat="reels"] .pf-media video{
  display:none !important;
}

/* responsive */
@media (max-width: 1200px){
  .pf-grid.is-reels{ grid-template-columns: repeat(5, minmax(0,1fr)); }
}
@media (max-width: 980px){
  .pf-grid.is-reels{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .pf-grid.is-reels{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
}


/* =====================================================
   MODAL — REELS: QUITAR ANCHO FIJO + FONDO NEGRO SOBRANTE
   🔥 FIX REAL: tu CSS base lo estira a 1100px y 16/9.
   Aquí lo anulamos SOLO cuando .pf-modal-card tiene .is-reel-mode
===================================================== */

/* centra el modal */
.pf-modal.is-open{
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding: 24px;
}

/* ✅ REELS: el card NO puede tener width fijo (1100px) */
.pf-modal-card.is-reel-mode{
  width: fit-content !important;
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100vh - 48px) !important;

  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  display: inline-flex !important;
  flex-direction: column !important;
}

/* ✅ REELS: el contenedor de media NO puede ser 16/9 ni 1100px */
.pf-modal-card.is-reel-mode .pf-modal-media,
.pf-modal-card.is-reel-mode #pfModalMedia,
.pf-modal-card.is-reel-mode .pf-modal .pf-modal-media{
  width: fit-content !important;
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100vh - 48px) !important;

  aspect-ratio: auto !important;     /* mata el 16/9 */
  background: transparent !important; /* mata el negro grande */
  overflow: visible !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* ✅ REELS: el video manda el tamaño (alto limitado, ancho auto) */
.pf-modal-card.is-reel-mode video,
.pf-modal-card.is-reel-mode .pf-modal-video{
  height: calc(100vh - 90px) !important;
  width: auto !important;

  max-height: calc(100vh - 90px) !important;
  max-width: calc(100vw - 48px) !important;

  object-fit: contain !important;
  display:block !important;

  border-radius: 18px;
  background: #000; /* solo detrás del video, no del contenedor */
}

/* ocultar título en reels */
.pf-modal-card.is-reel-mode .pf-modal-title{
  display:none !important;
}

/* botón cerrar arriba del video */
.pf-modal-card.is-reel-mode .pf-modal-close{
  position:absolute !important;
  top: 14px !important;
  right: 14px !important;
  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 999px !important;
}

/* móvil: más espacio útil */
@media (max-width: 720px){
  .pf-modal.is-open{ padding: 14px; }
  .pf-modal-card.is-reel-mode video,
  .pf-modal-card.is-reel-mode .pf-modal-video{
    height: calc(100vh - 70px) !important;
    max-width: calc(100vw - 28px) !important;
  }
}


/* ✅ REELS: iframe manda el tamaño (alto limitado, ancho auto) */
.pf-modal-card.is-reel-mode iframe.pf-modal-yt{
  height: calc(100vh - 90px) !important;
  width: auto !important;

  max-height: calc(100vh - 90px) !important;
  max-width: calc(100vw - 48px) !important;

  aspect-ratio: 9 / 16;
  display:block !important;

  border-radius: 18px;
  background: #000;
}

/* móvil */
@media (max-width: 720px){
  .pf-modal-card.is-reel-mode iframe.pf-modal-yt{
    height: calc(100vh - 70px) !important;
    max-width: calc(100vw - 28px) !important;
  }
}