/* ===== BASE ===== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: Inter, system-ui, Arial, sans-serif;
  background:#ffffff;              /* ✅ FONDO BLANCO */
  color:#111;                      /* ✅ TEXTO OSCURO */
  overflow-x:hidden;
}

/* Scroll suave */
html{ scroll-behavior:smooth; }

/* Evita que el header tape secciones */
#top, #servicios, #portfolio, #contacto{
  scroll-margin-top:90px;
}

/* ===== HEADER ===== */
.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:80px;

  display:grid;
  grid-template-columns:1fr auto 1fr; /* izquierda | logo | derecha */
  align-items:center;

  padding:0 32px;

  background:rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(0,0,0,.08);
  z-index:1000;
}

/* Logo centrado */
.nav-logo{
  grid-column:2;
  justify-self:center;

  height:42px;
  opacity:0;
  transform:scale(.8);
  transition:opacity .35s ease, transform .35s ease;
}

body.scrolled .nav-logo{
  opacity:1;
  transform:scale(1);
}

/* Nav común */
.nav-links{
  display:flex;
  align-items:center;
  gap: 60px;                 /* 👈 separación entre items */

  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}

/* Distribución por lados */
.nav-left{
  justify-self:center;
  min-width:260px;          /* 👈 reparte mejor el espacio */
}

.nav-right{
  justify-self:center;
  min-width:260px;          /* 👈 reparte mejor el espacio */
}

/* Mostrar navegación al hacer scroll */
body.scrolled .nav-links{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* Links */
.nav-links a{
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  color:rgba(0,0,0,.72);
  padding:8px 12px;
  border-radius:999px;
  transition:background .2s ease, color .2s ease;
}

.nav-links a:hover{
  background:rgba(0,0,0,.06);
  color:#111;
}
/* ===== LANGUAGE DROPDOWN ===== */

.lang-dropdown{
  position:absolute;
  top:50%;
  right:18px;
  transform:translateY(-50%);
  z-index:1200;
}

.lang-btn{
  display:flex;
  align-items:center;
  gap:8px;

  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(10px);

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

  font-weight:800;
  font-size:12px;
  letter-spacing:.08em;
  color:rgba(0,0,0,.70);
  cursor:pointer;

  transition:background .2s ease, border-color .2s ease;
}

/* 👇 IMPORTANTE: quitamos movimiento vertical */
.lang-btn:hover{
  background:rgba(255,255,255,.95);
  border-color:rgba(0,0,0,.18);
}

/* menú cerrado */
.lang-menu{
  position:absolute;
  right:0;
  top:calc(100% + 10px);

  min-width:180px;
  padding:8px;

  background:rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.12);

  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;

  transition:opacity .18s ease, transform .22s cubic-bezier(.22,1,.36,1);
}

/* 👇 estado abierto REAL */
.lang-dropdown.open .lang-menu{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.lang-menu a{
  display:block;
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  color:#111;
}

.lang-menu a:hover{
  background:rgba(0,0,0,.06);
}

/* Responsive: ocultar menú en móvil */
@media (max-width: 820px){
  .nav-links{
    display:none;
  }
}

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:100vh;
  padding-top:80px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#ffffff;             /* ✅ Fondo blanco */
}

/* ===== BLOBS ===== */
.blobs{
  position:absolute;
  inset:-20%;
  z-index:0;
  filter:blur(100px);
  opacity:.8;
  pointer-events:none;
}

.blob{
  position:absolute;
  width:55vmax;
  height:55vmax;
  border-radius:50%;
  mix-blend-mode:multiply;        /* ✅ Mejor en blanco */
  opacity:.6;
  transform:translate(-50%,-50%);
  animation:drift 18s ease-in-out infinite alternate;
}

.blob.b1{left:18%;top:22%;background:#2089ed}
.blob.b2{left:78%;top:28%;background:#d674ae;animation-duration:22s}
.blob.b3{left:28%;top:78%;background:#d055f3;animation-duration:26s}
.blob.b4{left:82%;top:74%;background:#6fe560;animation-duration:30s}

@keyframes drift{
  0%{transform:translate(-50%,-50%)}
  50%{transform:translate(calc(-50% + 18vw),calc(-50% - 14vh))}
  100%{transform:translate(calc(-50% - 18vw),calc(-50% + 14vh))}
}

/* ===== HERO CONTENT ===== */
.hero-inner{
  text-align:center;
  max-width:1080px;
  padding:0 20px;
  position:relative;
  z-index:2;
}

.hero-logo{
  width:min(80vw,800px);
  margin:0 auto 18px;
  transition:transform .5s ease, opacity .4s ease;
}

body.scrolled .hero-logo{
  opacity:0;
  transform:scale(.85);
}

.hero-text{
  font-size:clamp(18px,2.6vw,28px);
  line-height:1.3;
  margin:8px auto 18px;
  color:#222;                      /* ✅ Texto oscuro */
}

.hero-text strong{
  color:#000;
}

.cta{
  display:inline-block;
  font-weight:700;
  padding:12px 20px;
  border-radius:999px;
  background:#2089ed;              /* ✅ Verde principal */
  color:#fff;
  border:2px solid #2089ed;
  transition:.25s;
}

.cta:hover{
  background:#0c9f0c;
  color:#fff;
}

/* ===== INFO (Our Vision) ===== */
.info-section{
  background:#f7f7f7;

  /* espacio normal izquierda, mínimo derecha */
  padding:10px 15px 10px 15px;
}

/* Layout sin “recuadro” */
.vision-layout{
  width:100%;
  display:flex;
  align-items:center;
  gap:24px;
}

/* Texto ocupa todo el espacio sobrante */
.vision-text{
  flex:1;
  min-width:0;

  display:flex;
  flex-direction:column;
  justify-content:center;  /* ✅ centra vertical */
  align-items:center;      /* ✅ centra horizontal */
  text-align:center;       /* ✅ centra el texto */
}

/* Mantienes tu tipografía original */
.type-title{
  font-size:48px;
  font-weight:800;
  margin-bottom:12px;
}

.vision-text p{
  font-size:18px;
  line-height:1.5;
  color:#222;
  max-width:750px;
}

/* Foto: único elemento enmarcado */
.vision-photo{
  margin:0;
  flex:0 0 auto;
  margin-right: 1.5%;

  /* controla aquí lo estrecha que es */
  width:clamp(400px, 40vw, 550px);

  border-radius:22px;
  overflow:hidden;

  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}

/* Tu imagen 689x701 define la altura del bloque */
.vision-photo video{
  width:100%;
  height:auto;
  display:block;
}

/* Responsive */
@media (max-width: 900px){
  .info-section{ padding:70px 14px; }

  .vision-layout{
    flex-direction:column;
    align-items:stretch;
    gap:16px;
  }

  .vision-photo{
    width:100%;
    max-width:380px;
    justify-content: center;
  }

  .type-title{ font-size:40px; }
}

/* =============================================== SERVICES ======================================================= */
.services{
  padding:50px 0; /* ajustado para quedar más pegado arriba */
  background:#fff;
}

.services-wrap{
  width:100%;
  padding:0 18px;
}

/* Cabecera */
.services-head{
  max-width:1200px;
  margin:0 auto 26px;
}

.services-title{
  font-size:48px;
  font-weight:800;
  margin-bottom:10px;
}

.services-sub{
  font-size:20px;
  line-height:1.6;
  color:#222;
  max-width:1200px;
  margin-top:6px;
}

.services-hint{
  margin-top:12px;
  font-size:15px;
  color:rgba(0,0,0,.55);
}

/* ========================================================= CONTENEDOR DE PANELES ========================================================= */

.services-panels{
  display:flex;
  width:100%;
  height:350px;
  overflow:hidden;
  border-radius:22px;
  gap:5px;
}

/* ========================================================= PANEL BASE ========================================================= */

.svc-panel{
  position:relative;
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:28px;
  cursor:pointer;
  overflow:hidden;
  border-radius:22px;
  transition:flex .6s cubic-bezier(.22,1,.36,1);
}

/* ========================================================= FONDO ANIMADO SUAVE ========================================================= */

.svc-panel::before,
.svc-panel::after{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(46vmax 36vmax at 16% 22%,
      color-mix(in srgb, var(--accent) 38%, transparent) 0%,
      transparent 62%),
    radial-gradient(52vmax 40vmax at 82% 30%,
      color-mix(in srgb, var(--accent) 28%, transparent) 0%,
      transparent 66%),
    radial-gradient(56vmax 44vmax at 40% 86%,
      color-mix(in srgb, var(--accent) 22%, transparent) 0%,
      transparent 70%);

  filter:blur(96px);
  opacity:.26;
  transform:translate3d(0,0,0);
  will-change:transform;
  animation:svc-drift 18s cubic-bezier(.22,1,.36,1) infinite alternate;
}

.svc-panel::after{
  opacity:.16;
  filter:blur(120px);
  animation-duration:26s;
  animation-direction:alternate-reverse;
}

@keyframes svc-drift{
  0%   { transform:translate3d(-2%, -2%, 0) scale(1); }
  50%  { transform:translate3d(2.6%, -1.2%, 0) scale(1.015); }
  100% { transform:translate3d(-1.4%, 2.8%, 0) scale(1.03); }
}

/* Respeto a accesibilidad */
@media (prefers-reduced-motion: reduce){
  .svc-panel::before,
  .svc-panel::after{
    animation:none;
    transform:none;
  }
}

/* ========================================================= BOTÓN / CONTENIDO PRINCIPAL ========================================================= */

.svc-panel-btn{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  padding:30px;

  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:14px;

  background:transparent;
  border:0;
  cursor:pointer;
  text-align:left;
}

/* Título */
.svc-panel-title{
  font-size:36px;
  font-weight:800;
  color:#111;
  margin:0 0 8px;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}

.svc-panel:hover .svc-panel-title{
  transform:translateY(-2px);
}

/* Texto descriptivo */
.svc-panel-mini{
  font-size:16px;
  line-height:1.65;
  color:rgba(0,0,0,.80);
  max-width:58ch;
  margin:0;

  transition:
    opacity .45s ease,
    transform .55s cubic-bezier(.22,1,.36,1),
    max-height .55s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}

/* ========================================================= LISTA DE SERVICIOS (SIN CAJA) ========================================================= */
/* Base (cerrado): la dejamos preparada pero oculta */
.svc-panel-body{
  position:absolute;
  z-index:3;
  left:30px;
  right:30px;
  bottom:26px;

  opacity:0;
  transform:translateY(12px);
  transition:
    opacity .45s ease,
    transform .7s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}

.svc-panel-list{
  margin:0;
  padding-left:18px;
  font-size:17px;
  line-height:1.75;
  color:rgba(0,0,0,.88);
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}

/* ========================================================= ESTADOS CUANDO HAY UN PANEL ACTIVO ========================================================= */

/* Atenuar no activos */
.services-panels.is-active .svc-panel{
  opacity:.12;
  transform:scale(.985);
  box-shadow:0 10px 24px rgba(0,0,0,.07);
}

/* Panel activo */
.services-panels.is-active .svc-panel.is-active{
  opacity:1;
  transform:scale(1);
  flex-grow:14;
  box-shadow:0 18px 44px rgba(0,0,0,.14);
}

/* Color un poco más presente en activo */
.services-panels.is-active .svc-panel.is-active::before{
  opacity:.40;
  filter:blur(84px);
}
.services-panels.is-active .svc-panel.is-active::after{
  opacity:.24;
  filter:blur(100px);
}

/* ====== CAMBIO CLAVE DESKTOP: LISTA A LA DERECHA ======
   Convertimos el panel activo en 2 columnas:
   izquierda (título+texto) + derecha (lista)
*/
.services-panels.is-active .svc-panel.is-active{
  display:flex;
  flex-direction:row;
  align-items:stretch;
  gap:22px;
}

.services-panels.is-active .svc-panel.is-active .svc-panel-btn{
  flex:0 0 55%;
  height:100%;
  padding:30px;
  justify-content:center;
  align-items:flex-start;
}

.services-panels.is-active .svc-panel.is-active .svc-panel-mini{
  max-width:44ch;
}

/* La lista deja de ser absoluta y pasa a columna derecha */
.services-panels.is-active .svc-panel.is-active .svc-panel-body{
  position:relative;      /* ✅ ahora vive en el flow */
  left:auto;
  right:auto;
  bottom:auto;

  flex:1;
  height:100%;
  display:flex;
  align-items:center;     /* centra verticalmente */
  justify-content:flex-start;

  opacity:1;
  transform:none;
  pointer-events:auto;
  padding:30px 30px 30px 0;
}

.services-panels.is-active .svc-panel.is-active .svc-panel-list{
  padding-left:0;
  list-style:none;
}

.services-panels.is-active .svc-panel.is-active .svc-panel-list li{
  padding:8px 0;
  border-bottom:1px solid rgba(0,0,0,.10);
}

.services-panels.is-active .svc-panel.is-active .svc-panel-list li:last-child{
  border-bottom:none;
}

/* Velo sutil para lectura */
.svc-panel.is-active .svc-panel-btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.52));
  pointer-events:none;
  opacity:.38;
}

/* ========================================================= PANELES NO ACTIVOS → TÍTULO VERTICAL ========================================================= */

.services-panels.is-active .svc-panel:not(.is-active){
  flex-grow:0.5;
  opacity:1;
  flex-basis:20px;
  min-width:20px;
}

.services-panels.is-active .svc-panel:not(.is-active) .svc-panel-btn{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:0;
  position:relative;
}

/* Título vertical */
.services-panels.is-active .svc-panel:not(.is-active) .svc-panel-title{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(-90deg);

  white-space:nowrap;
  margin:0;
  font-size:25px;
  line-height:1;
}

/* Ocultar texto descriptivo */
.services-panels.is-active .svc-panel:not(.is-active) .svc-panel-mini{
  opacity:0;
  max-height:0;
}

/* ========================================================= ACENTOS DE COLOR ========================================================= */

.accent-blue{ --accent:#2089ed; }
.accent-magenta{ --accent:#d055f3; }
.accent-green{ --accent:#6fe560; }

/* ========================================================= RESPONSIVE ========================================================= */

@media (max-width: 980px){
  .services{
    padding:80px 0;
  }

  .services-title{
    font-size:40px;
  }

  .services-sub{
    font-size:18px;
  }

  .services-panels{
    flex-direction:column;
    height:auto;               /* ✅ que se adapte al contenido */
    border-radius:0;           /* opcional: si quieres que cada panel mande */
  }

  .svc-panel{
    height:auto;               /* ✅ que el panel crezca */
    padding:0;                 /* lo lleva el botón/ body */
  }

  .svc-panel-btn{
    padding:26px 22px 14px;
  }

  .svc-panel-title{
    font-size:30px;
  }

  .svc-panel-mini{
    font-size:17px;
    max-width:unset;
  }

  .svc-panel-list{
    font-size:16px;
  }

  .services-hint{
    display:none;
  }

  /* En móvil NO ponemos títulos verticales */
  .services-panels.is-active .svc-panel:not(.is-active) .svc-panel-title{
    writing-mode:horizontal-tb;
    transform:none;
    position:static;
  }

  /* ====== CAMBIO CLAVE MOBILE: TODO DEBAJO DEL TÍTULO ====== */
  .services-panels.is-active .svc-panel.is-active{
    flex-direction:column;     /* ✅ vuelve a columna */
    gap:0;
  }

  .services-panels.is-active .svc-panel.is-active .svc-panel-btn{
    flex:unset;
    height:auto;
    padding:26px 22px 10px;
    justify-content:flex-start;
  }

  .services-panels.is-active .svc-panel.is-active .svc-panel-body{
    position:relative;
    padding:0 22px 22px;       /* ✅ lista debajo */
    height:auto;
    align-items:flex-start;
  }
}

/* ===== LOGOS STRIP ===== */
.logo-strip{
  padding:70px 0;
  background:#fff;
}

.logo-strip-inner{
  width:100%;
  padding:0 18px;
}

.logo-strip-title{
  max-width:1200px;
  margin:0 auto 14px;
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(0,0,0,.55);
}

.logo-marquee{
  position:relative;
  overflow:hidden;
  width:100%;
  padding:18px 0;
}

.logo-marquee::before,
.logo-marquee::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:90px;
  pointer-events:none;
  z-index:2;
}
.logo-marquee::before{
  left:0;
  background:linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%);
}
.logo-marquee::after{
  right:0;
  background:linear-gradient(270deg, #fff 0%, rgba(255,255,255,0) 100%);
}

/* Track animado: la distancia la calcula JS */
.logo-track{
  display:flex;
  align-items:center;
  gap:46px;
  width:max-content;
  will-change:transform;

  animation:logo-scroll var(--logo-duration, 28s) linear infinite;
}

/* Pausa al pasar el ratón */
.logo-marquee:hover .logo-track{
  animation-play-state:paused;
}

.logo-item{
  height:42px;
  width:auto;
  display:block;
  opacity:.75;
  filter:grayscale(100%);
  transition:opacity .25s ease, filter .25s ease, transform .25s ease;
}

.logo-item:hover{
  opacity:1;
  filter:grayscale(0%);
  transform:translateY(-1px);
}

/* Animación seamless: recorre EXACTAMENTE el ancho del primer set */
@keyframes logo-scroll{
  from { transform:translateX(0); }
  to   { transform:translateX(calc(-1px * var(--logo-distance, 0))); }
}

@media (max-width:700px){
  .logo-item{ height:34px; }
  .logo-track{ gap:28px; }
  .logo-marquee::before,
  .logo-marquee::after{ width:60px; }
}

@media (prefers-reduced-motion: reduce){
  .logo-track{ animation:none; transform:none; }
}

/* ===== PORTFOLIO (COLLAGE FULL-BLEED, RECOGIDO) ===== */
.portfolio{
  padding:40px;
  background:#fff;

  border-top:1px solid rgba(0,0,0,.08);
  box-shadow:0 -14px 30px rgba(0,0,0,.06);
}

/* Título igual que Servicios */
.portfolio-title{
  max-width:1200px;
  margin:0 auto 20px;
  padding:0 18px;
}

/* Collage más recogido */
.portfolio-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-auto-rows:190px;      /* 👈 más compacto */
  gap:0;
}

/* Items */
.pf-item{
  position:relative;
}

/* Botón */
.pf-btn{
  width:100%;
  height:100%;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  position:relative;
  overflow:visible;
  display:block;
}

/* Imagen */
.pf-btn img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1);
  transition:
    transform .85s cubic-bezier(.22,1,.36,1),
    filter .4s ease;
}

/* Overlay centrado, limpio */
.pf-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;

  padding:24px;

  background:rgba(0,0,0,.30);  /* más sutil */
  opacity:0;
  transform:scale(1.03);
  transition:
    opacity .3s ease,
    transform .55s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}

.pf-overlay h3{
  margin:0 0 6px;
  color:#fff;
  font-size:22px;
  font-weight:900;
}

.pf-overlay p{
  margin:0;
  color:rgba(255,255,255,.9);
  font-size:15px;
  line-height:1.45;
  max-width:46ch;
}

/* Hover: impacto controlado */
.pf-item:hover{
  z-index:40;
}

.pf-item:hover img{
  transform:scale(1.18);    /* 👈 menos agresivo */
  filter:saturate(1.06);
}

.pf-item:hover .pf-overlay{
  opacity:1;
  transform:scale(1);
}

/* Patrón correcto: 1ª fila grande / 2ª fila 3 iguales */
.pf-a{ grid-column:1 / span 7; grid-row:span 2; }
.pf-b{ grid-column:8 / span 5; grid-row:span 2; }

/* Segunda línea más cuadrada */
.pf-c{
  grid-column:1 / span 4;
  grid-row:span 2;   /* 👈 más altura */
}

.pf-d{
  grid-column:5 / span 4;
  grid-row:span 2;   /* 👈 más altura */
}

.pf-e{
  grid-column:9 / span 4;
  grid-row:span 2;   /* 👈 más altura */
}

/* Responsive */
@media (max-width: 980px){
  .portfolio{
    padding:80px 0 0;
  }

  .portfolio-title{
    padding:0 18px;
  }

  .portfolio-grid{
    grid-template-columns:repeat(2, 1fr);
    grid-auto-rows:210px;
  }

  .pf-a,.pf-b,.pf-c,.pf-d,.pf-e{
    grid-column:auto;
    grid-row:auto;
  }

  .pf-item:hover img{
    transform:scale(1.1);
  }

  .pf-overlay h3{
    font-size:20px;
  }

  .pf-overlay p{
    font-size:14.5px;
  }
}
/* ================== LIGHTBOX PORTFOLIO: oculto por defecto ================ */
.project-lightbox{
  position:fixed;
  inset:0;
  display:none;            /* ✅ oculto */
  z-index:9999;
}

/* Si aria-hidden=true, forzamos oculto */
.project-lightbox[aria-hidden="true"]{
  display:none;
}

/* Cuando está abierto (aria-hidden=false) lo mostramos */
.project-lightbox[aria-hidden="false"]{
  display:block;
}

/* Fondo */
.lb-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}

/* Panel */
.lb-panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(980px, 92vw);
  max-height:86vh;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.25);
}

/* Botón cerrar (arriba derecha) */
.lb-close{
  position:absolute;
  top:12px;
  right:12px;
  width:40px;
  height:40px;
  border-radius:999px;
  border:0;
  background:rgba(0,0,0,.06);
  color:#111;
  font-size:22px;
  cursor:pointer;
  z-index:3;
}

.lb-close:hover{
  background:rgba(0,0,0,.10);
}

/* ===== FOOTER ===== */
.site-footer{
  background:#fff;
  border-top:1px solid rgba(0,0,0,.08);
  box-shadow:0 -14px 30px rgba(0,0,0,.06);
  padding:70px 0 26px;
}

.footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 18px;
}

.footer-top{
  display:grid;
  grid-template-columns:1.1fr 1.9fr;
  gap:38px;
  align-items:start;
}

/* Brand */
.footer-brand{
  position:relative;
}

.footer-logo{
  height:44px;
  display:block;
  margin-bottom:14px;
}

.footer-tagline{
  font-size:18px;
  line-height:1.6;
  color:#222;
  max-width:44ch;
  margin:0 0 18px;
}

.footer-cta{
  display:inline-block;
  font-weight:800;
  padding:12px 18px;
  border-radius:999px;
  background:#2089ed;
  color:#fff;
  border:2px solid #2089ed;
  transition:.25s;
}

.footer-cta:hover{
  background:#0c9f0c;
  border-color:#0c9f0c;
}

/* Columns */
.footer-cols{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:100px;
}

.footer-col-title{
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(0,0,0,.55);
  margin:6px 0 12px;
}

.footer-link{
  display:block;
  font-size:16px;
  line-height:1.8;
  color:#111;
  text-decoration:none;
  opacity:.88;
  transition:opacity .2s ease, transform .2s ease;
}

.footer-link:hover{
  opacity:1;
  transform:translateX(2px);
}

.footer-text{
  font-size:16px;
  line-height:1.8;
  color:#111;
  opacity:.75;
  margin:0;
}

/* Bottom */
.footer-bottom{
  margin-top:34px;
  padding-top:16px;
  border-top:1px solid rgba(0,0,0,.08);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  color:rgba(0,0,0,.6);
  font-size:14px;
}

.footer-legal{
  display:flex;
  gap:14px;
}

.footer-legal-link{
  color:rgba(0,0,0,.6);
  text-decoration:none;
}

.footer-legal-link:hover{
  color:rgba(0,0,0,.85);
}

/* Subtle animated glow (estilo blobs pero muy suave) */
.site-footer::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:min(900px, 92vw);
  height:220px;
  margin-top:-90px;
  background:
    radial-gradient(380px 260px at 18% 40%, rgba(32,137,237,.16), transparent 60%),
    radial-gradient(420px 300px at 75% 55%, rgba(208,85,243,.12), transparent 62%),
    radial-gradient(420px 300px at 50% 20%, rgba(111,229,96,.10), transparent 62%);
  filter:blur(60px);
  opacity:.85;
  pointer-events:none;
  z-index:0;
}

/* Ensure content sits above glow */
.site-footer,
.site-footer *{
  position:relative;
  z-index:1;
}

/* Responsive */
@media (max-width: 980px){
  .site-footer{ padding:60px 0 22px; }

  .footer-top{
    grid-template-columns:1fr;
    gap:26px;
  }

  .footer-cols{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:18px;
  }

  .footer-tagline{
    font-size:17px;
  }
}