/* ========== Global Styles ========== */
:root {
  /* Altura de la barra de navegación */
  --nav-h: 64px;

  /* Límites y márgenes laterales fluidos */
  --content-max: 1400px;             /* ancho máximo del contenido en desktop */
  --gutter: clamp(16px, 3vw, 32px);  /* separación a los bordes, adaptable */
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: #0f0f0f;
  color: #ffffff;
  line-height: 1.6;
}
a {
  color: #00aaff;
  text-decoration: none;
}
h1, h2, h3 {
  font-weight: 800;
  margin: 1.5rem 0 1rem;
}
h2 { font-size: 2rem; }
p { margin-bottom: 1rem; }

/* ========== Navbar ========== */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: linear-gradient(90deg, rgba(18, 20, 22, 0.95), rgba(34, 36, 38, 0.95), rgba(30, 40, 50, 0.95));
  backdrop-filter: blur(10px);
  z-index: 1000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.navbar-container {
  padding-left: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--nav-h);
  max-width: var(--content-max);
  margin: 7px auto;
  padding-inline: var(--gutter);
}

/* Logo con tamaño proporcional a la barra */
.navbar .logo {
  margin-left: 20px; /* el logo empieza a 20px del borde izquierdo */
  height: calc(var(--nav-h) - 12px) !important; /* ~44px si var(--nav-h)=64 */
  width: auto !important;
  object-fit: contain;
  display: block !important;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}
.nav-links li a {
  font-family: 'Montserrat Alternates', sans-serif;
  letter-spacing: 1.1px;
  color: #ccc;
  font-size: 1.05rem;
  text-decoration: none;
  font-weight: 500;
  gap: 1.5rem;

}
.nav-links li a:hover { color: #fff; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav-actions i {
  color: #ccc;
  font-size: 1rem;
}
.btn-outline {
  padding: 0.4rem 0.8rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #ccc;
  text-decoration: none;
}
.btn-blue {
  padding: 0.4rem 0.8rem;
  background-color: #0078f2;
  color: #fff;
  border-radius: 4px;
  font-size: 0.9rem;
  text-decoration: none;
}

/* ========== Hero Section ========== */
.hero {
  position: relative;
  background: url("images/imgi_1_propvr-digital-twin-header.webp") center/cover no-repeat;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  margin-top: var(--nav-h); /* Compensa navbar fijo */
  overflow: hidden;
}
.hero .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), #0f0f0f);
  z-index: 1;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to bottom, transparent, #0f0f0f);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  text-align: center;
  padding-inline: 1rem;
}
.hero .meta {
  font-size: 0.9rem;
  color: #bbb;
}
.hero h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 1rem;
}
.tags span {
  display: inline-block;
  background: #222;
  padding: 0.4rem 0.8rem;
  margin: 0.2rem;
  border-radius: 20px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.4s ease;
}

.tags span:hover {
  background: linear-gradient(90deg, #00aaff, #69f0ae);
  color: #000; /* texto oscuro para resaltar */
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(0, 170, 255, 0.5);
}


.company-box {
  background-color: rgba(20, 20, 20, 0.7);
  padding: 1rem;
  border: 1px solid #333;
  border-radius: 10px;
  margin-top: 1.5rem;
  text-align: left;
}

/* ========== Featured Video ========== */
.video-highlight {
  background-color: #000;
  text-align: center;
  padding: 3rem 1rem;
}
.video-container {
  width: 90%;
  max-width: 800px;
  margin: auto;
  border-radius: 15px;
  overflow: hidden; /* mantiene bordes redondeados */
  position: relative;
  border: 1px solid #222;
  background: #000;
}
.video-container video {
  width: 100%;
  height: auto; /* mantiene proporción */
  display: block;
}
.video-caption {
  text-align: left;
  padding: 1rem;
  color: #fff;
}
.video-caption h2 {
  font-size: 1.6rem;
  margin: 0.5rem 0 0.25rem;
}
.credit {
  font-size: 0.85rem;
  color: #ccc;
  margin: 0;
}

/* ========== Main Content ========== */
.content {
  padding: 3rem 1.5rem;
  max-width: 800px;
  margin: auto;
}
.content h3 {
  font-size: 1.5rem;
  border-bottom: 1px solid #333;
  padding-bottom: 0.3rem;
  margin-top: 2rem;
}

/* ========== CTA Section ========== */
.cta {
  background: linear-gradient(90deg, #b2ff59, #69f0ae);
  color: #000;
  padding: 4rem 2rem;
  text-align: center;
}
.cta h2 { font-size: 2rem; }
.cta .btn {
  margin-top: 1rem;
  display: inline-block;
  background: #fff;
  padding: 0.8rem 1.5rem;
  border-radius: 5px;
  font-weight: 600;
  color: #000;
  text-decoration: none;
}

/* ===== Footer ordenado (tu base) ===== */
/* ===== Footer estilo “card” como el mockup ===== */
.footer.footer-card{
  background:#0f1115;                /* tono más profundo */
  border:1px solid #1f2937;
  border-radius:16px;
  margin:48px var(--gutter);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  color:#cbd5e1;
}
.footer-card .footer-inner{
  max-width:var(--content-max);
  margin:0 auto;
  padding:24px clamp(16px,3vw,32px);
}

/* Top row */
.footer-top{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 24px;
  gap:1rem;
}
.brandline{ display:flex; align-items:center; gap:.75rem; }
.footer-card .footer-logo{ height:28px; width:auto; object-fit:contain; display:block; }
.brand-name{ font-weight:700; letter-spacing:.2px; }
.footer-tagline{ color:#9aa4b2; margin:0; }

/* Separadores */
.footer-sep{
  border:0; border-top:1px solid rgba(255,255,255,.08);
  margin:20px 0;
}

/* Middle grid */
.footer-mid{
  display:grid;
  grid-template-columns: 1fr 1fr 1.2fr 1.2fr;  /* 3 cols + módulo derecho */
  gap: clamp(16px, 2.5vw, 32px);
}
.fcol h4{
  margin:.1rem 0 .6rem; color:#e5e7eb; font-size:.95rem; letter-spacing:.2px;
}
.f-links{ list-style:none; margin:0; padding:0; }
.f-links li{ margin:.45rem 0; }
.f-links a{ color:#dbeafe; text-decoration:none; }
.f-links a:hover{ text-decoration:underline; }

.f-contact{ font-style:normal; }
.f-contact p{ margin:.45rem 0; }
.f-contact a{ color:#a7e0ff; text-decoration:none; }
.f-contact a:hover{ text-decoration:underline; }

/* Módulo derecho: redes + partner */
.fside{
  display:grid; grid-template-columns: 1fr; align-content:start; gap:16px;
}
.fside-socials{ display:flex; gap:.5rem; flex-wrap:wrap; }
.chip{
  width:36px; height:36px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#11151c; color:#e6eaf0; border:1px solid rgba(255,255,255,.14);
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.chip:hover{ background:#1a2230; transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.35); }

.partner{
  display:grid; grid-template-columns:40px auto; gap:.75rem; align-items:center;
  padding-left:16px; border-left:1px solid rgba(255,255,255,.12);
}
.partner img{ width:40px; height:40px; object-fit:contain; display:block; filter:grayscale(100%); opacity:.9; }
.partner strong{ color:#fff; }

/* Bottom bar */
.footer-card .footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; font-size:.9rem;
}
.footer-legal{ display:flex; align-items:center; gap:.5rem; }
.footer-legal a{ color:#cbd5e1; text-decoration:none; }
.footer-legal a:hover{ text-decoration:underline; }

/* === OVERRIDES: Footer a TODO el ancho === */

/* Si tienes una versión con ::before (card simulado), la desactivamos */
.footer.footer-card::before{ content: none !important; }

/* El propio footer ocupa el 100% del viewport, sin márgenes laterales */
.footer.footer-card{
  margin: 0;                /* quita el margen que lo centraba */
  border-radius: 0;         /* esquinas rectas al llegar al borde de la página */
  box-shadow: none;         /* sombra opcional; quítala para full-bleed limpio */
  border-left: 0;           /* evita borde lateral */
  border-right: 0;
  width: 100%;
  background: #0f1115;      /* conserva el color del "card" */
  border-top: 1px solid #1f2937;
  border-bottom: 1px solid #1f2937;
}

/* El contenido interno ya no tiene max-width: ocupa todo el ancho con gutters */
.footer-card .footer-inner{
  max-width: none;          /* **clave**: elimina el límite de ancho */
  width: 100%;
  margin: 0;
  padding: 24px var(--gutter);  /* respiración lateral consistente */
}

/* Los separadores ocupan el ancho del contenido */
.footer-sep{ margin-inline: 0; }


/* ===== Responsive ===== */
@media (max-width: 1024px){
  .footer-mid{
    grid-template-columns: 1fr 1fr;   /* 2 columnas + módulo derecho abajo */
  }
  .fside{ grid-column: 1 / -1; }
}
@media (max-width: 640px){
  .footer-top{ flex-direction:column; align-items:flex-start; gap:.5rem; }
  .footer-card .footer-logo{ height:26px; }
  .footer-mid{ grid-template-columns:1fr; }
  .footer-card .footer-bottom{ flex-direction:column; align-items:flex-start; }
}


/* ========== Responsive global ========== */
@media (max-width: 1024px) {
  :root {
    --nav-h: 60px;                         /* barra y logo ligeramente más bajos */
    --content-max: 1200px;                 /* ancho máx. algo menor */
    --gutter: clamp(14px, 3.5vw, 28px);    /* márgenes laterales en tablet */
  }
}

@media (max-width: 768px) {
  :root {
    --nav-h: 56px;                         /* barra compacta en móvil */
    --gutter: clamp(12px, 4vw, 24px);      /* márgenes laterales en móvil */
  }
  .nav-links { display: none; }
  .hero h1 { font-size: clamp(1.8rem, 6vw, 2.2rem); }
  .video-caption h2 { font-size: 1.25rem; }
}
/* === FOOTER: card “wide” con espacio lateral, limpio y responsive === */
:root{
  --footer-edge: clamp(12px, 2.5vw, 40px); /* espacio desde los bordes de ventana */
}

/* Sal del contenedor centrado y controla ancho con viewport + edge */
.footer.footer-card{
  position: relative;
  left: 50%;
  right: 50%;
  width: calc(100vw - (2 * var(--footer-edge)));
  margin-left: calc(-50vw + var(--footer-edge));
  margin-right: calc(-50vw + var(--footer-edge));

  /* Estética de card */
  border-radius: 16px;
  background: #0f1115;
  border: 1px solid #1f2937;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);

  /* Sin márgenes verticales extra */
  margin-top: 0;
  margin-bottom: 0;
}

/* Contenido del card con tus gutters habituales */
.footer-card .footer-inner{
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 24px var(--gutter);
}

/* Separadores alineados al contenido */
.footer-sep{ margin-inline: 0; }

/* Evita el típico scroll horizontal por el scrollbar con viewport dinámico */
@supports (width: 100dvw){
  .footer.footer-card{
    width: calc(100dvw - (2 * var(--footer-edge)));
    margin-left: calc(-50dvw + var(--footer-edge));
    margin-right: calc(-50dvw + var(--footer-edge));
  }
}

/* === Footer: sin líneas del card; solo la última separadora antes del bottom === */
.footer.footer-card {
  margin-top: 40px; /* separación de 40px respecto al contenido superior */
  background: linear-gradient(90deg, rgba(18, 20, 22, 0.95), rgba(34, 36, 38, 0.95), rgba(30, 40, 50, 0.95));
  border: 0; /* quita el borde perimetral */
}

/* Oculta todas las separadoras del footer... */
.footer-card .footer-sep{
  display: none;
}

/* ...excepto la última (la que va justo antes de la barra inferior) */
.footer-card .footer-sep:last-of-type {
  display: block;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.12);
  margin: 20px 0;
}

/* ===== HERO: slider de 4 imágenes con fade (añadido al final) ===== */
.hero-slides{
  position: absolute;
  inset: 0;
  z-index: 0;                 /* Debajo del overlay (z=1) y del contenido (z=2) */
  overflow: hidden;
}
.hero-slides .slide{
  position: absolute;
  inset: 0;
  background: var(--bg) center/cover no-repeat;
  opacity: 0;
  animation: heroFade 24s infinite ease-in-out;
  will-change: opacity;
  pointer-events: none;
  backface-visibility: hidden;
}
/* 4 slides -> 24s totales (~6s cada una incluyendo fades) */
.hero-slides .slide:nth-child(1){ animation-delay: 0s; }
.hero-slides .slide:nth-child(2){ animation-delay: 6s; }
.hero-slides .slide:nth-child(3){ animation-delay: 12s; }
.hero-slides .slide:nth-child(4){ animation-delay: 18s; }

@keyframes heroFade{
  0%   { opacity: 0; }
  4%   { opacity: 1; }   /* ~1s fade-in */
  25%  { opacity: 1; }   /* visible */
  29%  { opacity: 0; }   /* ~1s fade-out */
  100% { opacity: 0; }
}

/* Accesibilidad: respeta “reducir movimiento” */
@media (prefers-reduced-motion: reduce){
  .hero-slides .slide{ animation: none; display: none; }
  .hero-slides .slide:first-child{ display: block; opacity: 1; }
}

/* ===== Divisions (3 cards) ===== */
.divisions{
  padding: clamp(40px, 7vw, 72px) var(--gutter);
  background: #0b0c0f;
}
.divisions-inner{
  max-width: var(--content-max);
  margin: 0 auto;
}
.divisions-title{
  text-align: center;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin: 0 0 28px;
  letter-spacing: .2px;
}
.divisions-title em{
  font-style: normal;
  background: linear-gradient(90deg,  #f3dea8, #b67205);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* grid */
.divisions-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}

/* card */
.division-card{
  background: #0f1115;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  text-align: center;
}
.division-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.14);
}
.division-card h3{
  margin: 10px 0 8px;
  font-size: 1.35rem;
}
.division-card p{
  color: #cbd5e1;
  margin: 0 0 18px;
}

/* icono */
.d-icon{
  width: 52px; height: 52px;
  margin: 0 auto 8px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: radial-gradient(120% 120% at 20% 20%, #1b2130 0%, #12151c 100%);
  border: 1px solid rgba(255,255,255,.12);
}
.d-icon i{ font-size: 22px; color: #e6eaf0; }

/* botón */
.d-btn{
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  color: #0b0c0f;
  background: linear-gradient(90deg, #f3dea8, #b67205);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  transition: filter .15s ease, transform .15s ease;
}
.d-btn:hover{ filter: brightness(1.05); transform: translateY(-1px); }

/* responsive */
@media (max-width: 992px){
  .divisions-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .divisions-grid{ grid-template-columns: 1fr; }
}

/* ===== Featured (carousel) ===== */
.featured{
  padding: clamp(40px,7vw,72px) var(--gutter);
  background:#0b0c0f;
}
.featured-inner{
  max-width: var(--content-max);
  margin: 0 auto;
  text-align: center;
}
.featured-title{
  font-size: clamp(1.6rem,2.6vw,2.2rem);
  margin: 0 0 8px;
}
.featured-title em{
  font-style: normal;
  background: linear-gradient(90deg, #f3dea8, #b67205);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.featured-sub{
  margin: 0 auto 24px;
  max-width: 860px; color:#cbd5e1;
}

/* --- carousel --- */
.proj-carousel{
  position: relative;
}
.pc-viewport{
  overflow: hidden;
}
.pc-track{
  display: flex;
  gap: clamp(12px,2vw,18px);
  padding: 4px;
  will-change: transform;
  touch-action: pan-y;
}
.pc-item{
  flex: 0 0 auto;
  width: clamp(180px, 22vw, 260px); /* tamaño de miniatura */
}
.pc-card{
  display: block;
  background: #0f1115;
  border:1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pc-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.14);
}
.pc-card img{
  display:block; width:100%; height:100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;      /* mismas proporciones de la muestra */
  filter: saturate(1.02) contrast(1.02);
}

/* Flechas */
.pc-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width:40px; height:40px; border-radius: 999px;
  display:grid; place-items:center;
  background:#10141b; color:#e6eaf0;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  cursor:pointer; z-index:2;
  transition: transform .15s ease, background .15s ease, opacity .15s ease;
}
.pc-arrow:hover{ transform: translateY(-50%) scale(1.05); background:#162033; }
.pc-prev{ left: -8px; }
.pc-next{ right: -8px; }

@media (max-width: 768px){
  .pc-item{ width: clamp(180px, 60vw, 260px); }
  .pc-prev{ left: 2px; }
  .pc-next{ right: 2px; }
}

/* ===== Animación de color (Featured) ===== */

/* 1) Título: gradiente animado en <em> */
.featured-title em{
  background: linear-gradient(90deg,  #f3dea8, #b67205);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: hlsGradientShift 6s ease-in-out infinite alternate;
}

/* 2) Cards: borde con gradiente animado */
.pc-card{
  position: relative;
  border: none;                 /* el borde lo “pinta” el gradiente */
  z-index: 0;
}
.pc-card::before{
  content: "";
  position: absolute;
  inset: 0;                     /* cubre todo el card */
  border-radius: 18px;
  padding: 1px;                 /* grosor del “borde” */
  background: linear-gradient(90deg, #8ab4ff, #b89bff, #ff8bf5, #8ab4ff);
  background-size: 300% 100%;
  animation: hlsGradientMove 8s linear infinite;
  /* Truco para que solo se vea como borde */
  
  -webkit-mask: 
     linear-gradient(#000 0 0) content-box,
     linear-gradient(#000 0 0);
  mask: 
     linear-gradient(#000 0 0) content-box,
     linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}
/* Sutileza extra al pasar el mouse */
.pc-card:hover::before{
  animation-duration: 5s;
  filter: brightness(1.1);
}

/* 3) Flechas: botón con gradiente animado */
.pc-arrow{
  border: none;
  color: #0b0c0f; /* icono oscuro sobre gradiente claro */
  background: linear-gradient(90deg, #8ab4ff, #d39eff, #8ab4ff);
  background-size: 200% 100%;
  animation: hlsGradientShift 10s linear infinite;
}
.pc-arrow:hover{
  filter: brightness(1.05);
}

/* Keyframes compartidos */
@keyframes hlsGradientShift{
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@keyframes hlsGradientMove{
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Accesibilidad: respeta “reducir movimiento” */
@media (prefers-reduced-motion: reduce){
  .featured-title em,
  .pc-card::before,
  .pc-arrow{ animation: none !important; }
}

/* ===== Partners ===== */
.partners {
  padding: clamp(40px,7vw,72px) var(--gutter);
  background:#0b0c0f;
}
.partners-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  text-align:center;
}
.partners-title {
  font-size: clamp(1.6rem,2.6vw,2.2rem);
  margin:0 0 28px;
  letter-spacing:.2px;
}
.partners-title em {
  font-style: normal;
  background: linear-gradient(90deg, #f3dea8, #b67205);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  background-size:200% 100%;
  animation: hlsGradientShift 8s ease-in-out infinite alternate;
}

/* Grid de logos */
.partners-logos {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  align-items:center;
  justify-items:center;
  gap: clamp(16px,3.5vw,32px);
  grid-template-columns: repeat(5, minmax(100px,1fr));
}

/* Card para cada logo */
.plogo {
  background:#0f1115;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;       /* bordes redondeados */
  padding:16px;             /* espacio interno */
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  filter: grayscale(100%) contrast(1.05) opacity(.9);
  transition: filter .2s ease, transform .2s ease;
}
.plogo:hover {
  filter:none;
  transform: translateY(-3px);
}
.plogo img {
  width: 120px;             /* más chico que antes */
  max-width:100%;
  height:auto;
  display:block;
}

/* Responsivo */
@media (max-width: 1024px){
  .partners-logos{ grid-template-columns: repeat(3, minmax(100px,1fr)); }
}
@media (max-width: 640px){
  .partners-logos{ grid-template-columns: repeat(2, minmax(100px,1fr)); }
}

/* ===== Contact ===== */
.contact{ padding: clamp(40px,7vw,72px) var(--gutter); background: #0b0c0f; }
.contact-inner{ max-width: 760px; margin: 0 auto; }
.contact-title{ text-align:center; font-size: clamp(1.6rem,2.6vw,2.2rem); margin:0 0 24px; }
.contact-title em{ font-style: normal; background: linear-gradient(90deg, #f3dea8, #b67205); -webkit-background-clip:text; background-clip:text; color:transparent; }


.contact-form{ display:grid; gap: 14px; }
.cf-row{ display:grid; gap:6px; }
.cf-row label{ font-size:.95rem; color:#dbeafe; }
.cf-row input, .cf-row textarea{
width:100%; padding: 12px 14px; border-radius: 12px; border:1px solid rgba(255,255,255,.24);
background:#0f1115; color:#e6eaf0; outline:none; transition: border-color .15s ease, box-shadow .15s ease;
}
.cf-row input::placeholder, .cf-row textarea::placeholder{ color:#9aa4b2; }
.cf-row input:focus, .cf-row textarea:focus{ border-color:#b89bff; box-shadow: 0 0 0 3px rgba(184,155,255,.15); }


.cf-actions{ text-align:center; margin-top: 6px; }
.cf-submit{
display:inline-block; padding:10px 22px; border-radius:999px; border:none; cursor:pointer; font-weight:700;
color:#0b0c0f; background: linear-gradient(90deg, #f3dea8, #b67205); background-size:200% 100%;
animation: hlsGradientShift 10s linear infinite; box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.cf-submit:hover{ filter:brightness(1.05); }


.cf-hint{ text-align:center; color:#9aa4b2; margin:6px 0 0; }
.cf-hint a{ color:#a7e0ff; }
.cf-success{ text-align:center; color:#69f0ae; margin-top:10px; }

/* Contact: errores y estados (Opción B) */
.cf-row input[aria-invalid="true"],
.cf-row textarea[aria-invalid="true"]{
  border-color: #ff6b6b;
  box-shadow: 0 0 0 3px rgba(255,107,107,.12);
}
.cf-error{
  color:#ff9494;
  font-size:.85rem;
  min-height:1em; /* reserva espacio aunque no haya error */
}
.cf-submit[disabled]{
  opacity:.7;
  cursor:not-allowed;
}


/* ===== Background section projects and features page === */


/* ===== Projects page ============================================================================================================== */
.projects-page{ padding-top: var(--nav-h); background:#0b0c0f; }

.projects-hero{
  text-align:center;
  padding: clamp(32px,6vw,64px) var(--gutter) 0;
  max-width: var(--content-max);
  margin: 0 auto;
}
.projects-hero h1{
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  margin: 0 0 8px;
}
.projects-hero h1 em{
  font-style: normal;
  background: linear-gradient(90deg,#f3dea8, #b67205);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size: 200% 100%;
  animation: hlsGradientShift 8s ease-in-out infinite alternate;
}
.projects-hero p{ color:#cbd5e1; margin:0 0 16px; }
.proj-actions{ display:flex; justify-content:center; gap:12px; }

/* Grid de tarjetas (Dribbble-like) */
.proj-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(14px,2.2vw,24px);
  max-width: var(--content-max);
  margin: clamp(20px,3vw,32px) auto clamp(28px,4vw,48px);
  padding: 0 var(--gutter);
}
.proj-card{
  background:#0f1115;
  border:1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor: pointer;
}
.proj-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.14);
}
.proj-card .pc-thumb{
  aspect-ratio: 16/9;
  width:100%; object-fit:cover; display:block;
  filter: saturate(1.02) contrast(1.02);
}
.proj-card .pc-info{ padding: 12px 14px 16px; }
.proj-card .pc-title{ margin: 2px 0 6px; font-size: 1.05rem; }
.proj-card .pc-meta{ color:#9aa4b2; font-size:.9rem; margin:0; }

/* Visor inline (sección que se despliega en la misma página) */
.proj-viewer{
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto clamp(40px,6vw,64px);
  padding: clamp(14px,2vw,20px);
  border-radius: 18px;
  background: #0f1115;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  display: none; /* oculto por defecto */
}
.proj-viewer.active{ display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(16px,2.5vw,28px); }
@media (max-width: 900px){ .proj-viewer.active{ grid-template-columns: 1fr; } }

.pv-close{
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; border-radius: 999px;
  display:grid; place-items:center; border: none;
  background: linear-gradient(90deg,#8ab4ff,#d39eff,#8ab4ff);
  background-size: 200% 100%;
  animation: hlsGradientShift 10s linear infinite;
  color:#0b0c0f; cursor:pointer;
}
.pv-media img, .pv-media video{ width:100%; display:block; border-radius: 12px; }
.pv-body h2{ margin:0 0 8px; font-size: clamp(1.2rem,2.2vw,1.6rem); }
.pv-body p{ color:#cbd5e1; }
.pv-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.pv-tags .tag{
  padding: 4px 10px; border-radius: 999px; font-size:.85rem;
  background:#11151c; color:#e6eaf0; border:1px solid rgba(255,255,255,.14);
}
.pv-links{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.pv-links a{
  display:inline-block; padding:8px 14px; border-radius:999px; font-weight:600;
  text-decoration:none; color:#0b0c0f;
  background: linear-gradient(90deg,#8ab4ff,#d39eff);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}

/* Animación de degradado (ya usada en otras secciones) */
@keyframes hlsGradientShift{ 0%{background-position:0% 50%} 100%{background-position:100% 50%} }

.pv-media video{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  background: #000;
}


/* ===== END Projects page ============================================================================================================== */

/* ===== WIP (Under Construction) page ===== */
.wip-hero{
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  padding-top: var(--nav-h);
  display: grid;
  place-items: center;
  overflow: hidden;
  /* gradiente animado */
  background: radial-gradient(120% 120% at 0% 0%, #0b0c0f 0%, #0f1115 40%, #091017 100%);
}
.wip-hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(138,180,255,.18), rgba(211,158,255,.16), rgba(105,240,174,.10));
  filter: blur(80px);
  mix-blend-mode: screen;
  animation: wipGlow 10s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes wipGlow{
  0%{ transform: translateY(-10%) }
  100%{ transform: translateY(10%) }
}

/* cintas en movimiento */
.wip-tape{
  position: absolute;
  left: -20%;
  right: -20%;
  padding: 10px 0;
  text-align: center;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  background:
    repeating-linear-gradient(135deg,
      #ffcc00 0 16px,
      #11151c 16px 32px);
  color:#11151c;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
  transform: rotate(-12deg);
  animation: wipTape 8s linear infinite;
}
.wip-t1{ top: 22%; }
.wip-t2{ bottom: 18%; transform: rotate(12deg); animation-direction: reverse; }
@keyframes wipTape{
  0%{ background-position: 0 0; }
  100%{ background-position: 300px 0; }
}

/* tarjeta arrastrable */
.wip-card{
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(680px, calc(100% - 2*var(--gutter)));
  background: #0f1115;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: clamp(20px, 4vw, 28px);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  text-align: center;
  cursor: grab;
  user-select: none;
}
.wip-card:active{ cursor: grabbing; }
.wip-icon{ font-size: clamp(28px,4vw,42px); margin-bottom: 8px; }
.wip-card h1{
  margin: 6px 0 6px;
  font-size: clamp(1.4rem, 3vw, 2rem);
}
.wip-card h1 span{
  background: linear-gradient(90deg,#f3dea8, #b67205);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size: 200% 100%;
  animation: hlsGradientShift 10s ease-in-out infinite alternate;
}
.wip-card p{ color:#cbd5e1; margin: 6px 0 14px; }
.wip-actions{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.wip-hint{ display:block; margin-top:10px; color:#9aa4b2; }

.nav-links a.active{ color:#fff; font-weight:700; }

/* en móviles, baja un poco la tarjeta para que no tape las cintas */
@media (max-width: 640px){
  .wip-card{ top: 58%; }
}

/* ======== Servicios por Sector ======== */
.services-section {
  padding: clamp(48px, 6vw, 96px) var(--gutter, 24px);
  background: #0f0f0f; /* mismo fondo de tu sitio */
  color: #fff;
}

.services-section .container {
  max-width: var(--content-max, 1200px);
  margin: 0 auto;
}

.section-header {
  text-align: center;
  margin-bottom: 24px;
}
.section-header h2 {
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  margin: 0 0 8px 0;
}
.section-header p {
  color: #cfd8dc;
  margin: 0 auto;
  max-width: 720px;
}

/* Filtros */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 24px 0 32px;
}
.filter-btn {
  border: 1px solid #2a2a2a;
  background: #151515;
  color: #e0f7ff;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.filter-btn:hover { transform: translateY(-1px); }
.filter-btn.active {
  background: #0b2a34;
  border-color: #145b6b;
}

/* Grid */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

/* Card */
.sector-card {
  grid-column: span 12;
  background: #121212;
  border: 1px solid #1f1f1f;
  border-radius: 18px;
  padding: 20px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.sector-card:hover {
  transform: translateY(-4px);
  border-color: #1f3a44;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.sector-card h3 {
  margin: 10px 0 6px;
  font-size: 1.25rem;
}
.sector-card .card-desc {
  color: #bfcad0;
  margin-bottom: 12px;
}
.sector-card .bullet {
  margin: 0 0 16px 0;
  padding: 0 0 0 18px;
  color: #d9e3e8;
}
.sector-card .bullet li { margin: 6px 0; }

/* Ícono */
.card-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #0b2a34, #111);
  border: 1px solid #1d3e47;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.card-icon i { font-size: 22px; color: #89e0ff; }

/* Acciones */
.card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}
.btn-primary {
  background: #0b2a34;
  border-color: #145b6b;
  color: #a9f0ff;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost {
  background: transparent;
  border-color: #2a2a2a;
  color: #e0f7ff;
}
.btn-ghost:hover { border-color: #3d3d3d; }

/* Responsive */
@media (min-width: 700px) {
  .sector-card { grid-column: span 6; }
}
@media (min-width: 1024px) {
  .sector-card { grid-column: span 4; }
}

/* Animación simple (si ya usas .fade-in/.appear, se integra) */
.fade-in { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.fade-in.appear { opacity: 1; transform: translateY(0); }

/* ======= Service Orbs ======= */
.service-orbs {
  padding: clamp(48px, 6vw, 96px) var(--gutter, 24px);
  background: #0f0f0f;
  color: #fff;
}
.service-orbs .container {
  max-width: var(--content-max, 1200px);
  margin: 0 auto;
}
.service-orbs .section-header {
  text-align: center;
  margin-bottom: 28px;
}
.service-orbs .section-header h2 {
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  margin: 0 0 6px 0;
}
.service-orbs .section-header p {
  color: #cfd8dc;
  margin: 0 auto;
  max-width: 720px;
}

.orbs-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

.service-card {
  grid-column: span 12;
  background: rgba(18,18,18,.9);
  border: 1px solid #1f1f1f;
  border-radius: 18px;
  padding: 18px;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  position: relative;
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  will-change: transform;
  perspective: 800px;
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: #263238;
  box-shadow: 0 16px 36px rgba(0,0,0,.55);
}

/* Orbe con halo dinámico */
.service-card .orb {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.06), rgba(0,0,0,.2));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 2px 10px rgba(255,255,255,.04),
    0 10px 28px rgba(0,0,0,.35);
}

/* Halo */
.service-card .orb::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0 240deg,
      var(--accent, #2dd4ff) 260deg 300deg,
      transparent 320deg 360deg
    );
  filter: blur(4px);
  animation: halo-spin 6s linear infinite;
  opacity: .9;
  pointer-events: none;
}

/* Brillo orbitando (detalle sutil) */
.service-card .orb::after {
  content: "";
  position: absolute;
  width: 130%;
  height: 130%;
  left: -15%;
  top: -15%;
  border-radius: 50%;
  background: radial-gradient(30% 30% at 70% 30%, rgba(255,255,255,.22), transparent 60%);
  transform: rotate(0deg);
  animation: orbit 8s linear infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Ícono dentro del orbe */
.service-card .orb img {
  width: 60%;
  height: 60%;
  object-fit: contain;
  animation: float 3.8s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}

/* Cuerpo */
.service-card .service-body h3 {
  margin: 6px 0 6px;
  font-size: 1.15rem;
}
.service-card .service-body .mini {
  margin: 0 0 12px 18px;
  color: #d0dae0;
}
.service-card .service-body .mini li { margin: 6px 0; }

.actions {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.btn, .btn.ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 13px;
  border-radius: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  background: var(--btn-bg, #0b2a34);
  color: var(--btn-fg, #c8f6ff);
  border-color: #164b59;
  transition: filter .15s ease, transform .15s ease;
}
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn.ghost {
  background: transparent;
  border-color: #2a2a2a;
  color: #e0f7ff;
}

/* Badge del sector */
.sector-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: .75rem;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: #cfe7ff;
}

/* Responsive */
@media (min-width: 720px) {
  .service-card { grid-column: span 6; }
}
@media (min-width: 1100px) {
  .service-card { grid-column: span 4; }
}

/* Tilt sutil (se alimenta desde JS con CSS vars) */
.service-card {
  --rx: 0deg; --ry: 0deg;
  transform-style: preserve-3d;
}
.service-card:hover {
  transform:
    rotateX(var(--rx)) rotateY(var(--ry))
    translateY(-4px);
}

/* Accento dinámico por tarjeta (desde data-accent) */
.service-card { --accent: #2dd4ff; }
.service-card[data-accent] { --accent: attr(data-accent color, #2dd4ff); }

/* Animaciones */
@keyframes halo-spin { to { transform: rotate(360deg); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

/* Respeto accesibilidad: reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card .orb::before,
  .service-card .orb::after,
  .service-card .orb img {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ====== Texto con borde ====== */
.text-borde {
  color: #fff; /* texto blanco */
  -webkit-text-stroke: 1px #000; /* borde negro en navegadores WebKit */
  text-shadow: 
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000; /* fallback para otros */
}

/* ======= TECH INTRO ======= */
.tech-intro {
  --accent: #2dd4ff; /* se actualiza con JS al cambiar de tab */
  background: #0f0f0f;
  color: #fff;
  padding: clamp(48px, 6vw, 96px) var(--gutter, 24px);
  position: relative;
  overflow: hidden;
}
.tech-intro .container { max-width: var(--content-max, 1200px); margin: 0 auto; }

/* Tabs */
.ti-tabs {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background: #121212;
  border: 1px solid #222;
  border-radius: 14px;
  margin-bottom: 22px;
}
.ti-tab {
  position: relative;
  z-index: 1;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #cfe7ff;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ti-tab.active { color: #111; }
.ti-ink {
  position: absolute;
  height: calc(100% - 8px);
  top: 4px; left: 4px;
  width: 0;
  background: linear-gradient(180deg, var(--accent), #9be6ff);
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .25s ease, width .25s ease, left .25s ease;
}

/* Layout */
.ti-wrap {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 24px;
  align-items: center;
}
@media (max-width: 900px) {
  .ti-wrap { grid-template-columns: 1fr; }
}

/* Texto */
.ti-title { margin: 0 0 8px; line-height: 1.25; }
.ti-badge { margin-right: 8px; filter: saturate(1.2); }
.ti-heading {
  display: block;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: .2px;
  background: linear-gradient(90deg, #e6faff, #b3efff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ti-sub {
  display: block;
  font-size: .95rem;
  color: #a9bdc8;
  margin-top: 2px;
}
.ti-par {
  color: #d0dbe2;
  margin: 10px 0;
}
.ti-par.is-hidden { display: none; }

.ti-actions { display: flex; gap: 10px; margin-top: 14px; }

/* Botones reutilizan tus estilos base */
.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: 12px; font-weight: 600; border: 1px solid transparent;
}
.btn-primary { background: #0b2a34; border-color: #145b6b; color: #a9f0ff; }
.btn-ghost { background: transparent; border-color: #2a2a2a; color: #e0f7ff; }

/* Imagen + Glow + Parallax */
.ti-figure {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #1d1d1d;
  background: #0b0b0b;
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  transform: translateZ(0);
}
.ti-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.ti-img.active { opacity: 1; visibility: visible; }
.ti-glow {
  position: absolute; inset: -15% -15%;
  background: radial-gradient(35% 35% at 70% 30%, color-mix(in oklab, var(--accent), #ffffff 15%), transparent 60%);
  filter: blur(30px);
  opacity: .35;
  pointer-events: none;
}
/* Fix inmediato: que el hero de Projects NO se oculte por .fade-in global */
.projects-hero.fade-in { opacity: 1 !important; transform: none !important; }

/* Centrado perfecto del ícono dentro del orbe */
.service-card .orb{
  display:flex;                /* en lugar de grid aquí */
  align-items:center;
  justify-content:center;
}

.service-card .orb img{
  display:block;               /* quita baseline inline */
  max-width:80%;               /* límites para que no “toque” bordes */
  max-height:80%;
  width:auto;                  /* respeta proporción */
  height:auto;                 /* respeta proporción */
  object-fit:contain;
  margin:0 auto;               /* por si acaso */
  animation: float 3.8s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}

/* Bloque estable y apilado correcto */
.ti-figure{
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #1d1d1d;
  background: #0b0b0b;
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
}

.ti-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  z-index: 1;                 /* ← imagen por encima del glow */
}
.ti-img.active{ opacity:1; visibility:visible; }

/* Glow debajo de la imagen */
.ti-glow{
  position: absolute;
  inset: -15% -15%;
  background: radial-gradient(35% 35% at 70% 30%,
              color-mix(in oklab, var(--accent), #ffffff 15%), transparent 60%);
  filter: blur(30px);
  opacity: .35;
  pointer-events: none;
  z-index: 0;                 /* ← debajo */
}

/* Si la imagen activa no cargó, esconde el glow para evitar el “oscuro” */
.ti-figure:has(.ti-img.active[data-loaded="false"]) .ti-glow{
  opacity: 0;
}

/* ===== SERVICIOS v2 (fondo blanco, ordenado, centrado) ===== */
.services-v2{
  background:#fff;
  color:#0b0c0f;
  padding: clamp(48px,6vw,96px) var(--gutter,24px);
}
.services-v2 .sv2-inner{
  max-width: var(--content-max,1200px);
  margin: 0 auto;
}
.sv2-header{
  text-align:center;
  margin-bottom: clamp(20px,2.5vw,28px);
}
.sv2-header h2{
  margin:0 0 6px 0; font-size: clamp(1.8rem,2.6vw,2.2rem);
}
.sv2-header p{ color:#4b5563; margin:0 auto; max-width:820px; }

/* grid responsive */
.sv2-grid{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns: repeat(12,1fr);
  gap: clamp(14px,2vw,20px);
}

/* card */
.sv2-card{
  grid-column: span 12;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius: 16px;
  padding: clamp(16px,2vw,20px);
  display:flex; gap:16px; align-items: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sv2-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0,0,0,.10);
  border-color:#d1d5db;
}

/* media (GIF) */
.sv2-media{
  flex: 0 0 96px; height:96px;
  display:flex; align-items:center; justify-content:center;
  border-radius:16px;
  background: #f3f4f6;
  border:1px solid #e5e7eb;
}
.sv2-media img{
  display:block; width:64px; height:64px; object-fit:contain;
}

/* body */
.sv2-body{ flex: 1 1 auto; display:flex; flex-direction:column; gap:10px; }
.sv2-body h3{ margin:0; font-size:1.15rem; }
.sv2-blurb{ margin:0; color:#4b5563; }

.sv2-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:#0b2a34; color:#a9f0ff; border:1px solid #145b6b;
  font-size:.85rem; font-weight:600;
}

/* acordeón */
.sv2-toggle{
  align-self:flex-start;
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 12px;
  border-radius:10px;
  background:#f9fafb; color:#0b0c0f; border:1px solid #e5e7eb;
  font-weight:700; cursor:pointer;
  transition: filter .15s ease, transform .15s ease;
}
.sv2-toggle:hover{ filter: brightness(1.02); transform: translateY(-1px); }
.sv2-toggle[aria-expanded="true"] i{ transform: rotate(180deg); transition: transform .2s ease; }

.sv2-more{ padding-top:6px; }
.sv2-list{ margin:0; padding:0 0 0 18px; color:#374151; }
.sv2-list li{ margin:6px 0; }

/* acciones */
.sv2-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 4px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px; font-weight:700; border:1px solid transparent;
  text-decoration:none;
}
.btn-dark{ background:#0b0c0f; color:#fff; }
.btn-ghost{ background:transparent; border-color:#d1d5db; color:#0b0c0f; }
.btn-ghost:hover{ background:#f3f4f6; }

/* responsive columns */
@media (min-width: 720px){
  .sv2-card{ grid-column: span 6; }
}
@media (min-width: 1100px){
  .sv2-card{ grid-column: span 4; }
}

/* aparición sutil al hacer scroll (reutilizable) */
.sv2-card{ opacity:1; transform:none; transition: opacity .35s ease, transform .35s ease; }
.sv2-card.appear{ opacity:1; transform:none; }


/* ==== RESCUE PACK: visibilidad y stacking ==== */

/* Asegura que cada sección apile por encima del anterior glow/parallax */
#tech-intro,
.services-v2,
.footer { position: relative; z-index: 0; }

/* Sección servicios v2: blanco y texto oscuro sin herencias raras */
.services-v2 {
  display: block !important;
  background: #fff !important;
  color: #0b0c0f !important;
  isolation: isolate; /* crea un nuevo stacking context y aísla del glow anterior */
}

/* Tarjetas v2: colores garantizados */
.services-v2 .sv2-card {
  background: #fff !important;
  color: #0b0c0f !important;
  border-color: #e5e7eb !important;
}

/* Evita que algo previo cubra lo siguiente */
.tech-intro { overflow: visible; }

/* Imagen/glow del tech-intro siempre debajo del contenido siguiente */
.ti-figure, .ti-glow, .ti-img { z-index: 0; }
.ti-img.active { z-index: 1; }

/* Separación clara entre tech-intro y services-v2 */
#tech-intro { margin-bottom: clamp(24px, 4vw, 56px); }

/* Footer siempre visible y separable */
.footer.footer-card {
  position: relative;
  z-index: 0;
  margin-top: clamp(32px, 5vw, 72px);
}

/* HOTFIX: que se vean las cards de servicios v2 */
.services-v2 .sv2-card{
  opacity: 1 !important;
  transform: none !important;
}