/* =========================================================
   SINCROVISUAL — estilos del sitio público
   Paleta: blanco + tonos grises, footer gris oscuro
   ========================================================= */

:root{
  --bg: #ffffff;
  --bg-alt: #f5f4ff;
  --bg-card: #ffffff;
  --bg-dark: #0d0a1a;
  --bg-dark-alt: #160f2e;
  --border: rgba(20,20,20,0.10);
  --border-dark: rgba(255,255,255,0.12);
  --text: #0f0f0f;
  --text-dim: #444444;
  --text-on-dark: #f0eeff;
  --text-dim-on-dark: #b8b4d4;
  --accent: #8B5CF6;
  --accent-2: #06B6D4;
  --accent-rgb: 139,92,246;
  --accent-2-rgb: 6,182,212;
  --cta: #7C3AED;
  --cta-dark: #5B21B6;
  --radius: 16px;
  --max: 1180px;
  font-size: 16px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
h1,h2,h3,h4{
  font-family: 'Sora', sans-serif;
  line-height: 1.2;
  margin: 0 0 .6em;
  color: var(--text);
}
p{ margin: 0 0 1em; color: var(--text-dim); }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
.container{ max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.text-gradient{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tag{
  display:inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .8em;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--cta);
  background: rgba(var(--accent-rgb),0.08);
  border: 1px solid rgba(var(--accent-rgb),0.25);
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  margin-bottom: 1.2em;
}
.pulse-dot{
  width: 8px; height: 8px; border-radius:50%; background: var(--accent);
  position: relative; flex-shrink:0;
}
.pulse-dot::after{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  background: var(--accent); opacity:.5;
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse{
  0%{ transform: scale(0.6); opacity:.6; }
  100%{ transform: scale(2.2); opacity:0; }
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-cta{
  background: linear-gradient(90deg, var(--cta), var(--accent));
  color:#fff;
  box-shadow: 0 8px 24px rgba(139,92,246,0.38);
}
.btn-cta:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(139,92,246,0.52); }
.btn-outline{
  border-color: var(--border);
  color: var(--text);
  background: rgba(var(--accent-rgb),0.06);
}
.btn-outline:hover{ border-color: var(--accent); color: var(--cta); transform: translateY(-2px); }
/* Botón outline para fondos oscuros (hero vídeo) */
.btn-outline-light{
  border: 1.5px solid rgba(255,255,255,0.35);
  color: #fff;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
}
.btn-outline-light:hover{
  border-color: var(--accent);
  background: rgba(139,92,246,0.18);
  transform: translateY(-2px);
}
.btn-lg{ padding: 15px 30px; font-size: 1rem; }

/* Header */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  transition: background .4s ease, border-color .4s ease, backdrop-filter .4s ease;
}
/* Transparente sobre el hero-vídeo */
.site-header.header-transparent{
  background: transparent;
  border-bottom-color: rgba(255,255,255,0.10);
  backdrop-filter: none;
}
.site-header.header-transparent .main-nav a{ color: rgba(255,255,255,0.85); }
.site-header.header-transparent .main-nav a:hover,
.site-header.header-transparent .main-nav a.active{ color:#fff; }
.site-header.header-transparent .nav-cta{ background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); color:#fff; }
.site-header.header-transparent .menu-toggle span{ background:#fff; }
.site-header.header-transparent .logo img{ filter: brightness(0) invert(1); }
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 92px;
}
.logo{
  font-family:'Sora', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: .02em;
  color: var(--text);
  display:inline-flex;
  align-items:center;
}
.logo span{ color: var(--accent); }
.logo img{ height: 56px; display:block; width:auto; }
.site-footer .logo img{ height: 56px; }
.main-nav{ display:flex; gap: 32px; }
.main-nav a{
  color: var(--text-dim);
  font-weight: 500;
  font-size: .95rem;
  position: relative;
  transition: color .2s ease;
}
.main-nav a:hover, .main-nav a.active{ color: var(--text); }
.main-nav a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-10px; height:2px;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
}
.nav-cta{ font-size: .85rem; padding: 10px 20px; }
.menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding: 6px; }
.menu-toggle span{ width: 24px; height:2px; background: var(--text); border-radius: 2px; }

/* Hero — vídeo pantalla completa */
.hero{
  position:relative; min-height:100vh;
  display:flex; align-items:center;
  overflow:hidden; background:#08050f;
  isolation:isolate;
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(
    180deg,
    rgba(8,5,25,0.65) 0%,
    rgba(8,5,25,0.12) 22%,
    rgba(8,5,25,0.08) 60%,
    rgba(8,5,25,0.62) 100%
  );
}
.hero-content-wrap{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  justify-content:flex-end;
  text-align:center;
  padding:0 24px 72px; width:100%;
  min-height:100vh;
}
.hero-content{ max-width:840px; }
.hero h1{
  font-size:clamp(2.8rem,6vw,4.6rem);
  font-weight:800; color:#fff; margin-bottom:.5em;
}
.hero-sub{
  font-size:1.15rem; max-width:640px;
  margin:0 auto; color:rgba(255,255,255,0.78);
}
.hero .eyebrow{
  color:rgba(255,255,255,0.92);
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.18);
}
.hero .pulse-dot{ background:var(--accent); }
.hero-actions{
  display:flex; gap:16px; flex-wrap:wrap;
  margin-top:2em; justify-content:center;
}

/* Barra de stats glassmorphism */
.hero-stats{
  display:flex; width:100%; max-width:760px;
  border:1px solid rgba(255,255,255,0.14); border-radius:20px;
  overflow:hidden;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  background:rgba(255,255,255,0.06);
}
.hero-stat{
  flex:1; padding:22px 16px; text-align:center;
  border-right:1px solid rgba(255,255,255,0.10);
  display:flex; flex-direction:column; gap:4px;
}
.hero-stat:last-child{ border-right:none; }
.hero-stat strong{
  font-size:1.9rem; font-weight:800; font-family:'Sora',sans-serif;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-stat span{ font-size:.78rem; color:rgba(255,255,255,0.65); font-weight:500; }

.scroll-down{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:2;
}
.scroll-down span{
  display:block; width:1px; height:50px;
  background:linear-gradient(180deg,rgba(139,92,246,0.9),transparent);
  animation:scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse{ 0%{opacity:0;} 50%{opacity:1;} 100%{opacity:0;} }

/* Strip stats — fondo oscuro para ruptura visual después del hero */
.strip{
  background: linear-gradient(135deg, var(--bg-dark), var(--bg-dark-alt));
  border:none;
}
.strip-inner{
  display:grid; grid-template-columns: repeat(4,1fr);
  padding: 42px 24px; text-align:center; gap: 20px;
}
.strip-item strong{
  display:block; font-family:'Sora',sans-serif; font-size: 2rem;
  background: linear-gradient(135deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.strip-item span{ font-size: .85rem; color: #fff; }

/* Sections */
.section{ padding: 100px 0; }
.section-head{ max-width: 640px; margin: 0 auto 56px; text-align:center; }
.section-head h2{ font-size: clamp(1.8rem, 3.5vw, 2.4rem); }

/* Portfolio teaser */
.portfolio-teaser{ background: var(--bg-dark); }

/* Sobre Sincrovisual (inicio) — bloque oscuro a sangre completa para marcar
   un cambio de ritmo antes del CTA final */
.about-preview{
  background: linear-gradient(135deg, var(--bg-dark), var(--bg-dark-alt));
}
.about-preview .about-text .tag{ color: var(--accent); }
.about-preview .about-text h2,
body.titulos-acento .about-preview .about-text h2{ color: var(--text-on-dark); }
.about-preview .about-text p{ color: var(--text-dim-on-dark); }
.about-preview .check-list li{ color: var(--text-on-dark); }
.about-preview .check-list i{ color: var(--accent); }
.about-preview .btn-outline{ border-color: var(--border-dark); color: var(--text-on-dark); background: rgba(255,255,255,0.06); }
.about-preview .btn-outline:hover{ border-color: var(--accent); color: var(--accent); }
.about-preview .media-frame{ border: 5px solid #fff; border-radius: 28px; }

/* Títulos de sección con color acento */
body.titulos-acento .section-head h2{ color: var(--accent-2); }
body.titulos-acento .about-text h2{ color: var(--text-on-dark); }

/* Fondo de la sección con manchas de color suaves para darle vida */
.services{
  background:
    radial-gradient(ellipse 55% 45% at 8%  25%, rgba(var(--accent-rgb),0.07)   0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 92% 75%, rgba(var(--accent-2-rgb),0.06) 0%, transparent 60%),
    radial-gradient(ellipse 35% 30% at 55% 10%, rgba(var(--accent-rgb),0.04)   0%, transparent 55%),
    #ffffff;
  position: relative;
}
/* La ola oscura vive dentro de services (z:0), detrás del contenido (z:1) */
.services::after{
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:260px; z-index:0; pointer-events:none;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 260' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath fill='%230d0a1a' d='M0,260 L1440,260 L1440,5 C1440,5 1415,5 1360,28 C1245,60 1045,162 780,206 C580,232 375,182 175,218 C75,233 28,240 0,242 Z'/%3E%3C/svg%3E") no-repeat center bottom/100% 100%;
}
/* El contenedor con el slider va por delante de la ola */
.services > .container{ position:relative; z-index:1; }

/* ── Slider de servicios ── */
.slider-header{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom: 32px; flex-wrap: wrap; gap: 16px;
}
.slider-header .section-head{ margin:0; text-align:left; }
.slider-nav{ display:flex; gap:10px; flex-shrink:0; }
.slider-btn{
  width:44px; height:44px; border-radius:50%;
  border:1.5px solid rgba(var(--accent-rgb),0.30);
  background:transparent; color:var(--accent);
  font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.slider-btn:hover{
  background:var(--accent); color:#fff;
  border-color:var(--accent); transform:scale(1.08);
}
.slider-btn:disabled{ opacity:.3; cursor:default; transform:none; }

/* El wrapper rompe el container y llega al borde derecho de la pantalla.
   margin-left: 50% (centro del container) - 50vw (mitad de la pantalla)
   → desplaza el borde izquierdo hasta el borde izquierdo del viewport. */
.cards-slider-wrap{
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.cards-grid{
  display:flex; gap:24px;
  padding: 0 32px;
  will-change: transform;
  transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card{
  /* 3 tarjetas: (100vw - 2 márgenes de 32px - 2 gaps de 24px) / 3 */
  flex: 0 0 calc((100vw - 112px) / 3);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.55);
  border-top: none;   /* la línea de color la pone ::before */
  border-radius: var(--radius);
  padding: 52px 44px 48px;
  position: relative;
  overflow: hidden;
  min-height: 420px;
  /* Línea cyan inferior con box-shadow inset */
  box-shadow: inset 0 -4px 0 rgba(var(--accent-2-rgb), 0.30);
  transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease;
}
/* Línea degradada superior purple → cyan */
.card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: var(--radius) var(--radius) 0 0;
  pointer-events:none;
}
/* Lavado de color: morado arriba-izquierda + cyan abajo-derecha */
.card::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 0%   0%,   rgba(var(--accent-rgb),  0.06) 0%, transparent 65%),
    radial-gradient(ellipse 65% 45% at 100% 100%, rgba(var(--accent-2-rgb),0.06) 0%, transparent 60%);
  pointer-events:none; transition: opacity .32s ease;
}
.card:hover{
  transform: translateY(-10px);
  border-color: rgba(var(--accent-rgb), 0.28);
  box-shadow:
    inset 0 -4px 0 rgba(var(--accent-2-rgb), 0.50),
    0 28px 56px rgba(var(--accent-rgb),0.13),
    0 6px 20px rgba(var(--accent-rgb),0.07);
}
.card:hover::after{
  background:
    radial-gradient(ellipse 70% 50% at 0%   0%,   rgba(var(--accent-rgb),  0.11) 0%, transparent 65%),
    radial-gradient(ellipse 65% 45% at 100% 100%, rgba(var(--accent-2-rgb),0.11) 0%, transparent 60%);
}

.card-num{
  font-family:'Sora',sans-serif; font-size: 7rem; font-weight:800;
  color: rgba(var(--accent-rgb), 0.07);
  position:absolute; top:12px; right:24px; line-height:1;
  user-select:none;
}
.card-icon{
  width:64px; height:64px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.14), rgba(var(--accent-2-rgb),0.10));
  color:var(--accent); font-size:1.6rem; margin-bottom:1.6em;
  transition: transform .32s ease, background .32s ease, box-shadow .32s ease;
}
.card:hover .card-icon{
  transform:scale(1.14);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.24), rgba(var(--accent-2-rgb),0.18));
  box-shadow: 0 8px 24px rgba(var(--accent-rgb),0.20);
}
.card h3{ font-size:1.3rem; color:var(--text); margin-bottom:.65em; font-weight:700; }
.card p{ margin:0; font-size:.97rem; color:var(--text-dim); line-height:1.72; }

/* About preview / grid */
.about-grid{ display:grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items:center; }
.about-text p{ text-align: justify; }
.about-media .media-frame{
  aspect-ratio: 1/1;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 50px -15px rgba(16,32,22,0.25);
}
.about-media .media-frame img{
  width: 100%; height: 100%; object-fit: cover; display:block;
}
.about-media .media-frame::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.16), rgba(var(--accent-2-rgb),0.22));
  mix-blend-mode: multiply;
}
.check-list{ list-style:none; padding:0; margin: 1.2em 0; }
.check-list li{ display:flex; align-items:flex-start; gap:.6em; margin-bottom: .6em; color: var(--text); font-size:.95rem; }
.check-list i{ color: var(--accent); margin-top: .2em; }

/* CTA final (resto de páginas) — banda a sangre completa pegada tanto a la
   sección anterior como al pie (sin márgenes), en un gris más claro que el
   pie para que la transición entre ambos sea progresiva */
.cta-final{
  margin: 0;
  padding: 56px 0;
  background: linear-gradient(135deg, var(--accent-2), var(--bg-dark-alt));
  text-align: left;
}
.cta-final-inner{
  display:flex; align-items:center; justify-content:space-between; gap: 32px; flex-wrap: wrap;
}
.cta-final-text{ max-width: 580px; }
.cta-final h2{ color: var(--text-on-dark); font-size: clamp(1.5rem,2.6vw,1.9rem); margin-bottom:.3em; }
.cta-final p{ margin:0; color: var(--text-dim-on-dark); }
.cta-final .btn{ flex-shrink:0; }
/* El botón oscuro por defecto se pierde sobre este fondo gris: aquí lo
   ponemos claro para que destaque */
.cta-final .btn-cta{
  background: #fff;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.cta-final .btn-cta:hover{ background: #f1f1f1; }
@media (max-width: 700px){
  .cta-final-inner{ flex-direction: column; text-align:center; }
}

/* CTA final (solo inicio) — aquí va justo después del bloque oscuro "Sobre
   Sincrovisual", así que se mantiene como tarjeta flotante clara que monta
   un poco sobre el final de esa sección (relleno vacío, sin texto) */
body.titulos-acento .cta-final{
  margin: -90px 24px 100px; max-width: var(--max); margin-left:auto; margin-right:auto;
  padding: 70px 40px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 20px 50px -15px rgba(16,32,22,0.18);
  text-align:center;
  position: relative;
  z-index: 2;
}
body.titulos-acento .cta-final-inner{ display:block; }
body.titulos-acento .cta-final-text{ max-width: 480px; margin: 0 auto; }
body.titulos-acento .cta-final .btn-cta{
  background: linear-gradient(90deg, var(--cta), var(--cta-dark));
  color:#fff;
  box-shadow: 0 8px 24px rgba(15,128,61,0.28);
}
body.titulos-acento .cta-final .btn-cta:hover{ background: linear-gradient(90deg, var(--cta), var(--cta-dark)); }
body.titulos-acento .cta-final h2{ color: var(--text); font-size: clamp(1.8rem,3vw,2.2rem); }
body.titulos-acento .cta-final p{ max-width: 480px; margin: 0 auto 1.6em; color: var(--text-dim); }

/* Footer */
.site-footer{ background: var(--bg-dark); border-top: 1px solid var(--border-dark); padding: 60px 0 0; }
.site-footer .logo{ color: var(--text-on-dark); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: 40px; padding-bottom: 40px; }
.footer-grid h4{ font-size: .95rem; margin-bottom: 1em; color: var(--text-on-dark); }
.footer-grid a, .footer-grid p{ display:block; font-size: .9rem; color: var(--text-dim-on-dark); margin-bottom: .7em; }
.footer-grid a:hover{ color: #fff; }
.footer-grid p a{ display:inline; margin-bottom:0; }
.footer-grid p i{ width: 16px; text-align:center; margin-right: 4px; }
.footer-bottom{
  border-top: 1px solid var(--border-dark);
  padding: 20px 24px;
  font-size: .82rem; color: var(--text-dim-on-dark);
  text-align:center;
}

/* Page hero (subpages) */
.page-hero{ padding: 186px 0 70px; text-align:center; background: var(--bg-alt); position:relative; overflow:hidden; isolation:isolate; }
.page-hero::before{
  content:''; position:absolute; inset:0;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,  rgba(160,120,220,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 15% 0%,  rgba(150,110,210,0.12) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 85% 0%,  rgba(150,110,210,0.12) 0%, transparent 65%);
}
.page-hero h1{ font-size: clamp(2.2rem, 4.5vw, 3.2rem); color: var(--text); }
.page-hero .hero-sub{ max-width: 600px; margin: 0 auto; color: var(--text-dim); }
.page-hero .eyebrow{ color: var(--accent); background: rgba(139,92,246,0.08); border-color: rgba(139,92,246,0.20); }


/* ── Efecto humo ── */
.hero > .container,
.page-hero > .container { position:relative; z-index:1; }

.smoke-layer {
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
}

.smoke-puff {
  position:absolute;
  border-radius:50%;
  /* Sobre fondo oscuro (hero-vídeo): lavanda clara y viva */
  background: radial-gradient(ellipse at 45% 40%,
    rgba(190,155,255,0.65) 0%,
    rgba(175,135,250,0.26) 40%,
    rgba(160,120,240,0.07) 60%,
    transparent 75%);
  will-change: transform, opacity;
  width:  var(--w,240px);
  height: var(--h,210px);
  left:   var(--x,50%);
  bottom: var(--bot,3%);
  animation: smoke-rise var(--dur,10s) var(--delay,0s) infinite ease-out;
}

/* Sobre page-hero (fondo claro): gris-morado más oscuro */
.page-hero .smoke-puff {
  background: radial-gradient(ellipse at 45% 40%,
    rgba(100,70,180,0.55) 0%,
    rgba(90,60,165,0.20) 40%,
    rgba(80,50,150,0.05) 60%,
    transparent 75%);
}

@keyframes smoke-rise {
  0%   { opacity:0;   transform:translate(0,0)                  scale(.82); }
  20%  { opacity:.55; }
  65%  { opacity:.25; }
  100% { opacity:0;   transform:translate(var(--dx,30px),-270px) scale(1.80); }
}

/* En page-hero el humo sube menos para quedarse en la franja baja */
.page-hero .smoke-puff {
  animation-name: smoke-rise-short;
}
@keyframes smoke-rise-short {
  0%   { opacity:0;   transform:translate(0,0)                  scale(.82); }
  22%  { opacity:.58; }
  65%  { opacity:.26; }
  100% { opacity:0;   transform:translate(var(--dx,20px),-110px) scale(1.50); }
}

/* Servicios — grid de tarjetas */
.services-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.service-card{
  position:relative; background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius);
  padding: 34px 28px 28px; box-shadow: 0 4px 16px rgba(16,32,22,0.04);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  display:flex; flex-direction:column;
}
.service-card:hover{ transform: translateY(-6px); border-color: rgba(var(--accent-rgb),0.4); box-shadow: 0 16px 32px rgba(16,32,22,0.1); }
.service-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 1.3em; }
.service-card-icon{
  width: 56px; height:56px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.14), rgba(var(--accent-2-rgb),0.18));
  display:flex; align-items:center; justify-content:center;
  font-size: 1.4rem; color: var(--accent);
}
.service-card-num{ font-family:'Sora',sans-serif; font-weight:700; font-size: .85rem; color: var(--border); letter-spacing:.05em; }
.service-card h3{ font-size: 1.2rem; margin-bottom: .5em; }
.service-card p{ color: var(--text-dim); font-size: .92rem; margin-bottom: 1.2em; flex:1; text-align: justify; }
.service-tags{ display:flex; flex-wrap:wrap; gap: 8px; }
.service-tags span{
  font-size: .78rem; color: var(--text-dim); background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px;
}

/* ── Servicios bento (servicios.html) ── */
.services-detail{ background: var(--bg); }

.services-bento{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* Layout alternado sin huecos:
   Fila 1: [01 wide] [02]        → 2+1 = 3 ✓
   Fila 2: [03] [04 wide]        → 1+2 = 3 ✓
   Fila 3: [05 wide] [06]        → 2+1 = 3 ✓  */
.services-bento .svc-tile:nth-child(1){ grid-column: span 2; }
.services-bento .svc-tile:nth-child(4){ grid-column: span 2; }
.services-bento .svc-tile:nth-child(5){ grid-column: span 2; }

.svc-tile{
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 32px 30px;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.svc-tile::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 20px 20px 0 0;
  opacity:0; transition: opacity .3s ease;
}
.svc-tile::after{
  content:''; position:absolute; bottom:-50px; right:-50px;
  width:180px; height:180px; border-radius:50%;
  background: radial-gradient(circle, rgba(139,92,246,0.07) 0%, transparent 70%);
  pointer-events:none;
}
.svc-tile:hover{
  transform: translateY(-6px);
  border-color: rgba(139,92,246,0.25);
  box-shadow: 0 20px 50px rgba(139,92,246,0.10), 0 4px 16px rgba(0,0,0,0.07);
}
.svc-tile:hover::before{ opacity:1; }

.svc-num{
  position:absolute; top:14px; right:20px;
  font-family: var(--font-head); font-weight:800;
  font-size: 5.5rem; line-height:1;
  color: rgba(139,92,246,0.06);
  pointer-events:none; user-select:none;
}
.svc-icon{
  width:60px; height:60px; border-radius:16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:#fff;
  box-shadow: 0 6px 24px rgba(139,92,246,0.28);
  margin-bottom:22px;
  transition: box-shadow .3s ease, transform .3s ease;
}
.svc-tile:hover .svc-icon{
  box-shadow: 0 10px 36px rgba(139,92,246,0.45);
  transform: scale(1.08);
}
.svc-tile h3{ font-size:1.2rem; color: var(--text); margin-bottom:.55em; }
.svc-tile p{ font-size:.9rem; color: var(--text-dim); line-height:1.65; flex:1; margin-bottom:1.2em; }
.svc-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.svc-tags span{
  font-size:.76rem; padding:4px 12px; border-radius:999px;
  background: rgba(139,92,246,0.07); border:1px solid rgba(139,92,246,0.16);
  color: var(--accent);
}

/* Wide tiles: icono + texto en horizontal */
@media(min-width:760px){
  .svc-tile--wide{
    display:grid;
    grid-template-columns: 60px 1fr;
    grid-template-rows: auto auto 1fr auto;
    column-gap: 24px;
    align-items: start;
  }
  .svc-tile--wide .svc-icon{
    grid-column:1; grid-row:1/3;
    margin-bottom:0; align-self:start;
  }
  .svc-tile--wide h3{ grid-column:2; grid-row:1; margin-top:4px; }
  .svc-tile--wide p{ grid-column:2; grid-row:2; margin-bottom:.8em; }
  .svc-tile--wide .svc-tags{ grid-column:2; grid-row:3; }
}

@media(max-width:900px){
  .services-bento{ grid-template-columns: 1fr 1fr; }
  .services-bento .svc-tile:nth-child(1),
  .services-bento .svc-tile:nth-child(4),
  .services-bento .svc-tile:nth-child(5){ grid-column: span 2; }
  .svc-tile--wide{ display:flex; flex-direction:column; }
  .svc-icon{ margin-bottom:18px; }
}
@media(max-width:580px){
  .services-bento{ grid-template-columns: 1fr; }
  .services-bento .svc-tile:nth-child(1),
  .services-bento .svc-tile:nth-child(4),
  .services-bento .svc-tile:nth-child(5){ grid-column: span 1; }
}

/* Cómo trabajamos — proceso */
/* Cómo trabajamos — recorrido zigzag */
.process{ background: var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

.process-journey{
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* ── Conectores de recorrido ── */
/* Cada conector usa ::before (mitad superior) + ::after (mitad inferior). */
/* Juntos forman una S: nodo → centro horizontal → nodo siguiente.        */
/* La "cintura" horizontal se une exactamente a mitad de altura.           */
.pj-conn{
  position: relative;
  height: 60px;
  pointer-events: none;
  z-index: 0;
}
.pj-step{ margin: 4px 0; }

/* ── pj-conn-rl: nodo DERECHO (arriba) → nodo IZQUIERDO (abajo) ── */
/* Mitad superior: sale del nodo derecho, baja y gira hacia el centro */
.pj-conn-rl::before{
  content: ''; position: absolute;
  top: -68px; left: 50%; right: 30px;
  height: calc(68px + 50%);
  border-right: 2px dashed rgba(139,92,246,0.42);
  border-bottom: 2px dashed rgba(139,92,246,0.42);
  border-bottom-right-radius: 36px;
}
/* Mitad inferior: sale del centro, baja y llega al nodo izquierdo */
.pj-conn-rl::after{
  content: ''; position: absolute;
  bottom: -68px; left: 30px; right: 50%;
  height: calc(68px + 50%);
  border-left: 2px dashed rgba(139,92,246,0.42);
  border-top: 2px dashed rgba(139,92,246,0.42);
  border-top-left-radius: 36px;
}

/* ── pj-conn-lr: nodo IZQUIERDO (arriba) → nodo DERECHO (abajo) ── */
/* Mitad superior: sale del nodo izquierdo, baja y gira hacia el centro */
.pj-conn-lr::before{
  content: ''; position: absolute;
  top: -68px; left: 30px; right: 50%;
  height: calc(68px + 50%);
  border-left: 2px dashed rgba(139,92,246,0.42);
  border-bottom: 2px dashed rgba(139,92,246,0.42);
  border-bottom-left-radius: 36px;
}
/* Mitad inferior: sale del centro, baja y llega al nodo derecho */
.pj-conn-lr::after{
  content: ''; position: absolute;
  bottom: -68px; left: 50%; right: 30px;
  height: calc(68px + 50%);
  border-right: 2px dashed rgba(139,92,246,0.42);
  border-top: 2px dashed rgba(139,92,246,0.42);
  border-top-right-radius: 36px;
}

/* Cada paso es una fila: card + nodo en extremos opuestos */
.pj-step{
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative; z-index: 1;
}
.pj-r{ flex-direction: row; }
.pj-l{ flex-direction: row; }

/* Nodo circular */
.pj-node{
  width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: #fff;
  box-shadow: 0 0 0 5px var(--bg-alt), 0 0 0 7px rgba(139,92,246,0.22), 0 8px 24px rgba(139,92,246,0.28);
  transition: transform .3s, box-shadow .3s;
  position: relative; z-index: 2;
}
.pj-step:hover .pj-node{
  transform: scale(1.1);
  box-shadow: 0 0 0 5px var(--bg-alt), 0 0 0 8px rgba(139,92,246,0.42), 0 10px 32px rgba(139,92,246,0.45);
}

/* Tarjeta — ocupa todo el espacio restante */
.pj-card{
  flex: 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.pj-step:hover .pj-card{
  border-color: rgba(139,92,246,0.25);
  box-shadow: 0 10px 32px rgba(139,92,246,0.09);
}
.pj-r:hover .pj-card{ transform: translateX(-5px); }
.pj-l:hover .pj-card{ transform: translateX(5px); }

.process-num{
  display: block; font-size: .70rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
.pj-card h4{ font-size: 1.05rem; margin-bottom: .4em; color: var(--text); }
.pj-card p{ font-size: .88rem; color: var(--text-dim); margin: 0; line-height: 1.65; }

/* Values section reuse cards-grid */
.values .cards-grid{ grid-template-columns: repeat(3,1fr); }

/* Location */
.location-inner p{ margin-bottom:.5em; color: var(--text); }
.location-inner .btn{ margin-top: 1.2em; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns: 1.4fr 1fr; gap: 50px; }
.contact-form{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: 0 4px 20px rgba(16,32,22,0.05);
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group{ margin-bottom: 20px; }
.form-group label{ display:block; font-size: .85rem; margin-bottom: 6px; color: var(--text-dim); }
.form-group input, .form-group select, .form-group textarea{
  width:100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: .95rem;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none; border-color: var(--accent);
}
.form-note{ margin-top: 14px; font-size: .9rem; color: var(--accent); min-height: 1.2em; }
.form-note.error{ color: #b94a3d; }
.form-check{
  display:flex; align-items:flex-start; gap: 10px; margin-bottom: 24px;
}
.form-check input[type="checkbox"]{
  width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent);
}
.form-check label{
  margin:0; font-size: .85rem; color: var(--text-dim); line-height: 1.4;
}
.form-check label a{ color: var(--accent); font-weight:600; text-decoration: underline; }
.hp-field{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-info h3{ margin-bottom: .8em; }
.contact-info p{ color: var(--text); margin-bottom: .6em; }
.map-frame{
  margin-top: 1.4em; aspect-ratio: 4/3; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.12), rgba(var(--accent-2-rgb),0.16));
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size: 2.6rem; color: var(--accent);
  overflow: hidden;
}
.map-frame iframe{
  width: 100%; height: 100%; border: 0; display: block;
}

/* Portfolio teaser (inicio) */
.portfolio-teaser .section-head h2{ color:#fff; }
.portfolio-teaser .section-head p{ color: var(--text-dim-on-dark); }
.portfolio-teaser .tag{ color: var(--accent); }

.teaser-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 260px 260px;
  gap: 10px; margin-bottom: 2.4em;
}
/* Imagen grande que ocupa 2 columnas y 2 filas */
.teaser-item:first-child{
  grid-column: span 2;
  grid-row: span 2;
}
.teaser-item{
  display:block; overflow:hidden; border-radius: 14px; position:relative;
}
.teaser-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .5s ease;
}
.teaser-item::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(160deg,rgba(139,92,246,0),rgba(8,5,25,0.55));
  opacity:0; transition: opacity .35s ease;
}
.teaser-item:hover img{ transform: scale(1.06); }
.teaser-item:hover::after{ opacity:1; }
.teaser-cta{ text-align:center; }

/* Portfolio — bento grid */
.portfolio-gallery{ background: var(--bg); }

.gallery-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 210px;
  gap: 8px;
}

.gallery-item{
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
}

.gallery-item img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s cubic-bezier(.25,.46,.45,.94);
}

/* Patrón cada 8 ítems:                          */
/*  8n+1 → grande (2 col × 2 filas)              */
/*  8n+6 → ancho  (2 col × 1 fila)              */
.gallery-item:nth-child(8n+1){ grid-column: span 2; grid-row: span 2; }
.gallery-item:nth-child(8n+6){ grid-column: span 2; }

/* Overlay degradado al hover */
.gallery-item::before{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(155deg, rgba(139,92,246,0.52), rgba(6,2,18,0.58));
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 1;
}

/* Icono de zoom */
.gallery-item::after{
  content: '\f00e';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.7);
  color: #fff; font-size: 1.8rem;
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 2; pointer-events: none;
}

.gallery-item:hover img{ transform: scale(1.06); }
.gallery-item:hover::before{ opacity: 1; }
.gallery-item:hover::after{ opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Lightbox */
.lightbox-overlay{
  position:fixed; inset:0; background: rgba(8,20,12,0.92);
  display:none; align-items:center; justify-content:center; z-index: 300; padding: 30px;
}
.lightbox-overlay.open{ display:flex; }
.lightbox-overlay img{
  max-width: 88vw; max-height: 84vh; border-radius: 12px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
  color:#fff; width: 46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size: 1.1rem; cursor:pointer;
  transition: background .2s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background: rgba(255,255,255,0.28); }
.lightbox-close{ top: 24px; right: 24px; }
.lightbox-prev{ left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next{ right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-counter{
  position:absolute; bottom: 20px; left:50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.75); font-size: .85rem;
}

/* Páginas legales */
.legal-content{ max-width: 760px; margin: 0 auto; }
.legal-content h2{ margin-top: 1.8em; font-size: 1.3rem; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{ margin-top: 1.4em; font-size: 1.05rem; }
.legal-content p, .legal-content li{ color: var(--text-dim); font-size: .98rem; text-align: justify; }
.legal-content ul{ padding-left: 1.2em; }
.legal-content li{ margin-bottom: .5em; }
.legal-content a{ color: var(--accent); }
.cookie-table-wrap{ overflow-x: auto; margin: 1.2em 0 1.6em; -webkit-overflow-scrolling: touch; }
.cookie-table{ width:100%; min-width: 580px; border-collapse: collapse; font-size: .9rem; }
.cookie-table th, .cookie-table td{
  padding: 12px 14px; border: 1px solid var(--border); text-align: left; vertical-align: top;
}
.cookie-table th{
  background: var(--bg-alt); font-family:'Sora',sans-serif; font-weight:700;
  color: var(--text); white-space: nowrap;
}
.cookie-table td{ color: var(--text-dim); }
.cookie-table td:first-child{ font-weight:600; color: var(--text); white-space: nowrap; }

/* Cookie banner */
.btn-sm{ padding: 9px 18px; font-size: .85rem; }
.cookie-banner{
  position: fixed; left: 20px; right: 20px; bottom: -200px;
  max-width: 720px; margin: 0 auto;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(16,32,22,0.18);
  padding: 22px 26px; z-index: 400;
  transition: bottom .4s ease;
}
.cookie-banner.visible{ bottom: 20px; }
.cookie-banner-inner{ display:flex; align-items:center; justify-content:space-between; gap: 20px; flex-wrap:wrap; }
.cookie-banner p{ margin:0; font-size: .9rem; color: var(--text); flex:1; min-width:220px; }
.cookie-banner p a{ color: var(--accent); font-weight:700; text-decoration: underline; }
.cookie-actions{ display:flex; gap:10px; flex-shrink:0; }

.cookie-tab{
  position: fixed; right: 20px; bottom: 20px; z-index: 399;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--bg-dark); color: var(--text-on-dark);
  border: none; cursor: pointer; align-items:center; justify-content:center;
  font-size: 1.25rem; box-shadow: 0 12px 28px rgba(0,0,0,0.22);
  display: none; transition: transform .2s ease;
}
.cookie-tab.visible{ display:flex; }
.cookie-tab:hover{ transform: scale(1.08); }

/* ═══════════════════════════════════════════
   CONTACTO.HTML  — secciones específicas
   ═══════════════════════════════════════════ */

/* Franja de promesas */
.contact-promises{
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.contact-promises-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 0;
  flex-wrap: wrap;
}
.promise-sep{
  width: 1px;
  height: 48px;
  background: var(--border);
  flex-shrink: 0;
}
.promise-item{
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 200px;
}
.promise-icon{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(139,92,246,0.28);
}
.promise-item strong{
  display: block;
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.promise-item span{
  font-size: .8rem;
  color: var(--text-dim);
  line-height: 1.3;
}

/* Layout principal contacto */
.contact-layout{
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 52px;
  align-items: start;
}

/* Wrap del formulario */
.contact-form-wrap{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 44px 40px;
  box-shadow: 0 8px 32px rgba(8,4,22,0.06);
}
.contact-form-header{
  margin-bottom: 32px;
}
.contact-form-header h2{
  font-size: 1.7rem;
  margin: 6px 0 8px;
}
.contact-form-header p{
  color: var(--text-dim);
  font-size: .93rem;
  margin: 0;
}
.contact-form .btn-lg{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: center;
  font-size: 1rem;
}

/* Sidebar */
.contact-sidebar{
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 100px;
}
.csidebar-block{
  background: rgba(139,92,246,0.06);
  border: 1px solid rgba(139,92,246,0.18);
  border-radius: 20px;
  padding: 28px 26px;
  box-shadow: 0 4px 20px rgba(139,92,246,0.07);
}
.csidebar-block h3{
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 18px;
}

/* Tarjetas de contacto en sidebar */
.cinfo-cards{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cinfo-card{
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(139,92,246,0.15);
  border-radius: 14px;
  padding: 14px 16px;
  text-decoration: none;
  transition: border-color .25s ease, background .25s ease;
}
a.cinfo-card:hover{
  border-color: rgba(139,92,246,0.45);
  background: rgba(139,92,246,0.06);
}
.cinfo-icon{
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  flex-shrink: 0;
}
.cinfo-label{
  display: block;
  font-size: .74rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 2px;
}
.cinfo-value{
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

/* Mapa en sidebar */
.csidebar-block .map-frame{
  margin-top: 0;
  aspect-ratio: 4/3;
  border-radius: 12px;
  border: 1px solid rgba(139,92,246,0.18);
  overflow: hidden;
  background: rgba(139,92,246,0.05);
}

/* Aviso de privacidad */
.csidebar-promise{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(139,92,246,0.08);
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: 14px;
}
.csidebar-promise i{
  color: var(--accent);
  font-size: 1.1rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.csidebar-promise p{
  font-size: .82rem;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════
   EMPRESA.HTML  — secciones específicas
   ═══════════════════════════════════════════ */

/* Strip de cifras clave — variante clara (empresa.html) */
.strip-light{
  background: none;
  border: none;
}
.strip-light .strip-inner{
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
  padding: 36px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.strip-light .strip-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.strip-light .strip-item strong{
  font-family: var(--font-head);
  font-size: 2.2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.strip-light .strip-item span{
  font-size: .82rem;
  color: var(--text-dim);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Historia — split visual + content */
.historia-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.historia-visual{
  position: relative;
  padding-bottom: 48px;
}
.hist-img-main img{
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  box-shadow: 0 24px 52px -12px rgba(8,4,22,0.28);
}
.hist-img-secondary{
  position: absolute;
  bottom: 0;
  right: -24px;
  width: 44%;
  border-radius: 16px;
  overflow: hidden;
  border: 4px solid var(--bg);
  box-shadow: 0 16px 36px rgba(8,4,22,0.25);
}
.hist-img-secondary img{
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}
.hist-badge{
  position: absolute;
  top: 24px;
  left: -20px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border-radius: 14px;
  padding: 14px 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(139,92,246,0.4);
  line-height: 1;
}
.hist-badge-num{
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.7rem;
}
.hist-badge-txt{
  display: block;
  font-size: .75rem;
  opacity: .85;
  margin-top: 4px;
}

/* Timeline de hitos */
.hitos{
  margin-top: 32px;
  padding-left: 22px;
  border-left: 2px solid rgba(139,92,246,0.22);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hito{ position: relative; }
.hito::before{
  content: '';
  position: absolute;
  left: -28px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.18);
}
.hito-year{
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .95rem;
  color: var(--accent);
  margin-bottom: 2px;
}
.hito p{
  font-size: .88rem;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.55;
}

/* Sección oscura de diferenciadores */
.empresa-dark{
  background: var(--bg-dark);
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.empresa-dark .section-head{
  text-align: center;
  margin-bottom: 48px;
}
.tag-dark{
  color: var(--accent) !important;
  background: rgba(139,92,246,0.12) !important;
  border-color: rgba(139,92,246,0.25) !important;
}
.text-on-dark{
  color: #fff !important;
}
.dif-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.dif-card{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  padding: 36px 28px;
  transition: border-color .3s ease, transform .3s ease;
}
.dif-card:hover{
  border-color: rgba(139,92,246,0.45);
  transform: translateY(-4px);
}
.dif-icon{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #fff;
  margin-bottom: 20px;
  box-shadow: 0 8px 22px rgba(139,92,246,0.32);
}
.dif-card h3{
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 10px;
}
.dif-card p{
  color: rgba(255,255,255,0.55);
  font-size: .88rem;
  line-height: 1.65;
  margin: 0;
}

/* Sección "Por qué elegirnos" */
.why-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.check-list{
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.check-list li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .93rem;
  color: var(--text);
  line-height: 1.55;
}
.check-list i{
  color: var(--accent);
  font-size: 1rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.why-visual{
  position: relative;
  padding-bottom: 36px;
}
.why-img-wrap img{
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  box-shadow: 0 24px 52px -12px rgba(8,4,22,0.28);
}
.why-stat-card{
  position: absolute;
  bottom: 0;
  left: -20px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border-radius: 16px;
  padding: 18px 24px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(139,92,246,0.38);
  line-height: 1;
}
.why-stat-num{
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2rem;
}
.why-stat-txt{
  display: block;
  font-size: .78rem;
  opacity: .85;
  margin-top: 6px;
}

/* Responsive */
@media (max-width: 1000px){
  .hero-content-wrap{ gap: 36px; padding: 140px 24px 80px; }
  .hero-stats{ max-width:100%; }
}
@media (max-width: 900px){
  /* Tablet: 2 tarjetas visibles en el slider */
  #servicesSlider .card{ flex: 0 0 calc((100vw - 88px) / 2); }
  .strip-inner{ grid-template-columns: repeat(2,1fr); }
  .values .cards-grid{ grid-template-columns: 1fr 1fr; }
  .about-grid, .contact-grid{ grid-template-columns: 1fr; }
  .historia-split, .why-split{ grid-template-columns: 1fr; gap: 48px; }
  .hist-img-secondary{ right: 12px; }
  .hist-badge{ left: 12px; }
  .why-stat-card{ left: 12px; }
  .dif-grid{ grid-template-columns: 1fr; }
  .contact-layout{ grid-template-columns: 1fr; }
  .contact-sidebar{ position: static; }
  .promise-sep{ display: none; }
  .contact-promises-inner{ justify-content: flex-start; gap: 24px; }
  .promise-item{ min-width: 180px; }
  .footer-grid{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: 1fr 1fr; }
  .process-journey{ gap: 0; }
  .pj-conn{ display: none; }
  .pj-step{ margin-bottom: 24px; }
  .pj-r, .pj-l{ flex-direction: row; }
  .teaser-grid{ grid-template-columns: repeat(3,1fr); }
  .gallery-grid{ grid-template-columns: repeat(3, 1fr); grid-auto-rows: 190px; }
  /* Sección "Sobre Sincrovisual" (inicio) se hace más alta en una columna:
     se quita el solape del CTA para no arriesgar tapar el texto */
  body.titulos-acento .cta-final{ margin-top: 40px; }
}
@media (max-width: 760px){
  .main-nav, .nav-cta{ display:none; }
  .menu-toggle{ display:flex; }
  .main-nav.open{
    display:flex; flex-direction:column; position:absolute; top:92px; left:0; right:0;
    background: var(--bg); padding: 24px; gap: 18px; border-bottom:1px solid var(--border);
  }
  .values .cards-grid{ grid-template-columns: 1fr; }
  .dif-grid{ grid-template-columns: 1fr; }
  .strip-item strong{ font-size: 1.7rem; }
  /* Slider de servicios: en móvil las tarjetas ocupan ~85% para que se
     insinúe la siguiente y el usuario sepa que puede deslizar */
  #servicesSlider .card{ flex: 0 0 calc(100vw - 88px); }
  .services-grid{ grid-template-columns: 1fr; }
  .process-list{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  /* En móvil 100px de padding por sección deja huecos enormes entre
     bloques (p.ej. "Nuestra historia" -> "Lo que nos diferencia") */
  .section{ padding: 56px 0; }
  .hero-content-wrap{ padding: 120px 16px 60px; gap: 28px; }
  .hero-stats{ flex-wrap: wrap; border-radius: 14px; }
  .hero-stat{ min-width: 45%; padding: 16px 10px; }
  .hero-stat strong{ font-size: 1.5rem; }
  /* El texto justificado en columnas estrechas deja huecos feos entre
     palabras: en móvil se desactiva y se alinea a la izquierda. */
  .card p, .about-text p, .service-card p, .legal-content p, .legal-content li{
    text-align: left;
  }
  /* Tabla de cookies: en pantallas estrechas el scroll horizontal se ve
     mal, así que cada fila se convierte en una tarjeta apilada con
     etiquetas (usando data-label de cada <td>) en vez de columnas. */
  .cookie-table-wrap{ overflow-x: visible; }
  .cookie-table{ min-width: 0; display:block; }
  .cookie-table thead{ display:none; }
  .cookie-table tbody{ display:block; }
  .cookie-table tr{
    display:block; margin-bottom: 16px;
    border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden;
  }
  .cookie-table td{
    display:block; border: none; border-bottom: 1px solid var(--border);
    white-space: normal;
  }
  .cookie-table td:last-child{ border-bottom: none; }
  .cookie-table td::before{
    content: attr(data-label);
    display:block; font-family:'Sora',sans-serif; font-weight:700;
    font-size: .72rem; text-transform: uppercase; letter-spacing:.04em;
    color: var(--accent); margin-bottom: 4px;
  }
}
@media (max-width: 600px){
  .teaser-grid{ grid-template-columns: repeat(2,1fr); }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery-item:nth-child(8n+1){ grid-column: span 2; grid-row: span 1; }
  .gallery-item:nth-child(8n+6){ grid-column: span 2; }
  .lightbox-prev, .lightbox-next{ width: 38px; height:38px; font-size: .95rem; }
  .lightbox-close{ top: 14px; right: 14px; }
  .lightbox-prev{ left: 10px; }
  .lightbox-next{ right: 10px; }
  .cookie-banner{ left:12px; right:12px; padding: 18px; }
  .cookie-banner-inner{ flex-direction:column; align-items:stretch; }
  .cookie-actions{ justify-content:flex-end; }
  .cookie-tab{ right:14px; bottom:14px; }
}