:root{
  --bg-start:#be4fc1; /* nuevo top-left */
  --bg-middle:#8c62d6; /* reserva */
  --bg-end:#77b5d6;   /* nuevo bottom-right */
  --grid-color:255,255,255; --grid-opacity:.06; --grid-size:48px;
  --text:#fff; --accent:#f09cff;

  --content-max:1220px;
  --header-max:1320px;
  --header-h:clamp(56px,8vh,88px);

  /* === Ritmo vertical unificado === */
  --section-pad: clamp(56px, 9vw, 140px);
  --section-gap: clamp(28px, 4vw, 56px);
  --section-gap-lg: clamp(40px, 6vw, 72px);
}

/* =============== CONTAINERS =============== */
.container{
  width: min(100% - 32px, var(--content-max));
  margin-inline: auto;
}
/* fix: 90vw + padding podía pasar los 100vw en mobile y crear scroll horizontal */
.container-wide{
  width: min(100%, var(--header-max));
  margin-inline: auto;
  padding-inline: clamp(16px, 5vw, 40px);
}

/* =============== BASE =============== */
html,body{min-height: 100%;}
h1, h2, h3, h4, h5, h6{ font-weight:400; font-synthesis:none; }
*{ box-sizing:border-box }

/* hardening anti overflow por imágenes sueltas */
img, svg, video{max-width:100%; height:auto; display:block}

body{
  margin:0; color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial;
  background:linear-gradient(135deg,var(--bg-start),var(--bg-end));
  overflow-x:hidden;
}

   /* Grid pattern overlay */
   .bg-grid{
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
      repeating-linear-gradient(
        0deg,
        rgba(var(--grid-color), var(--grid-opacity)) 0,
        rgba(var(--grid-color), var(--grid-opacity)) 1px,
        transparent 1px,
        transparent var(--grid-size)
      ),
      repeating-linear-gradient(
        90deg,
        rgba(var(--grid-color), var(--grid-opacity)) 0,
        rgba(var(--grid-color), var(--grid-opacity)) 1px,
        transparent 1px,
        transparent var(--grid-size)
      );
  
    /* centro más arriba y corte fuerte al fondo */
    -webkit-mask-image:
      radial-gradient(130% 90% at 50% 26%, #000 28%, transparent 60%),
      linear-gradient(to bottom, #000 0 58%, transparent 72% 100%);
    mask-image:
      radial-gradient(130% 90% at 50% 26%, #000 28%, transparent 60%),
      linear-gradient(to bottom, #000 0 58%, transparent 72% 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

/* =============== HEADER (sólo el del sitio) =============== */
header.container-wide{
  position:relative; z-index:2;
  block-size:var(--header-h);
  display:flex; align-items:center;
  padding-top:16px;
}
.row{display:flex; align-items:center; justify-content:space-between; width:100%}
.brand img{display:block; width:120px; height:auto}
.nav{display:flex; gap:28px; align-items:center; font-size:16px; opacity:.95}
a{color:inherit; text-decoration:none}


/* =============== FOOTER =============== */

.footer{
  background: #efefef;
}

.site-footer{
    background:#efefef;                 /* combina con secciones claras */
    color:#111;
    padding-block: clamp(28px, 5vw, 56px);
    border-top: 1px solid rgba(0,0,0,.06);
  }
  
  .foot-wrap{
    display:grid;
    place-items:center;
    gap: clamp(12px, 2.4vw, 20px);
    text-align:center;
    padding: 30px 0;
  }
  
  /* Logo centrado */
  .foot-logo{
    display:block;
    width: clamp(96px, 14vw, 140px);
    height:auto;
    filter: drop-shadow(0 0 0 rgba(0,0,0,0)); /* nítido, sin sombras raras */
  }
  
  /* Locations en una línea en desktop, columna en mobile */


  .foot-locations{
    list-style:none;
    margin:0;
    padding:0;
  
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap: clamp(10px, 2vw, 24px);
    column-gap: clamp(16px, 3vw, 32px);
  
    font-size: clamp(12px, 1.4vw, 16px);
    line-height:1.6;
    color: rgba(17,17,17,.85);
  }
  
  /* Cada item */
  .foot-locations li{
    display:inline-flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
  }
  
  /* Bandera como imagen (Australia) */
  .flag{
    width: 18px;
    height: 12px;
    object-fit:cover;
    border-radius:2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  }
  
  /* Banderas como emoji (DE/AR) para no pedir más assets */
  .flag-emoji{
    font-size: 16px;
    line-height: 1;
    display:inline-block;
    transform: translateY(1px);
  }
  
  /* Separador vertical suave para el link en pantallas grandes */
  .foot-contact{
    position:relative;
    padding-left: clamp(10px, 2vw, 18px);
    margin-left: clamp(6px, 1.2vw, 12px);
  }
  @media (min-width:720px){
    .foot-contact::before{
      content:"";
      position:absolute;
      left:0; top:50%;
      translate: 0 -50%;
      width:1px; height:1.1em;
      background: rgba(0,0,0,.15);
    }
  }
  
  /* Link de contacto */
  .foot-contact a{
    color:#111;
    text-decoration:none;
    font-weight:500;
  }
  .foot-contact a:hover{
    text-decoration:underline;
  }
  
  /* Copyright */
  .foot-copy{
    margin:0;
    font-size: clamp(11px, 1.2vw, 14px);
    color: rgba(17,17,17,.7);
  }



/* =============== HERO =============== */
.hero{
  position:relative; z-index:1; padding:0;
  min-height:calc(100dvh - var(--header-h));
  display:grid; grid-template-rows:1fr auto 1fr 40dvh; gap:0;
}
.eyebrow{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:18px; letter-spacing:1.4px; text-transform:uppercase; opacity:.95;
}
.eyebrow .dot{ display:inline-flex; align-items:center; justify-content:center; font-size:16px; line-height:1; color:#ee64ff; }
.copy{grid-row:2}
.copy h1{
  margin:0.5ch auto; text-align:center; line-height:1.06;
  font-size:clamp(42px, 5.3vw, 89px);  max-width:22ch;
  font-family:"Satoshi",sans-serif;
}

/* marquee */
/* fix: 100vw en iOS incluye scrollbar y puede generar overflow. usar svw. */
.projects-inline{
  grid-row:4; position:relative; width:100svw; height:100%;
  margin-left:calc(50% - 50svw); overflow:hidden; align-self:end;
}
.projects-clip{position:absolute; inset:0; overflow:hidden}
.sheet{width:100%; height:100%; filter:drop-shadow(0 24px 48px rgba(0,0,0,.28))}
.marquee{
  display:flex; gap:0; height:100%; width:max-content;
  animation:scrollX 60s linear infinite; will-change:transform; line-height:0;
}
@media (prefers-reduced-motion:reduce){.marquee{animation:none}}
@keyframes scrollX{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}
figure{margin:0}
.project{flex:0 0 auto; display:block}
/* fix defensivo: evita que algún alto obligue a crecer ancho */
.project img{height:100%; width:auto; max-width:none; object-fit:cover; display:block}

/* =============== ABOUT =============== */
.slice-light{
  background:#efefef;
  padding-block: var(--section-pad);
  color:#111;
}
.about-block{display:grid; gap:clamp(40px, 6vw, 80px)}
.about-lede{
  font-family:"Satoshi", sans-serif;
  font-size:clamp(22px, 2.6vw, 40px);
  line-height:1.3;
  text-align:center;
  max-width:48ch;
  margin:0 auto;
}
.about-stats{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 4vw, 40px);
  align-items:start; text-align:center;
}
.stat{display:grid; gap:8px}
.stat-value{
  font-family:"Satoshi", sans-serif;
  font-weight:400;
  font-size:clamp(42px, 7vw, 96px);
  line-height:1;
}
.stat-label{font-size:14px; color:rgba(17,17,17,.65)}
@media (max-width:720px){
  .about-stats{grid-template-columns:1fr; gap:28px}
}

/* =============== PROCESS =============== */
.slice-light.process{
  background:#efefef;
  padding-block: var(--section-pad);
  color:#111;
}
.process-title{
  font-family:"Satoshi", sans-serif; font-weight:400;
  text-align:center; font-size:clamp(28px, 3.2vw, 44px);
  line-height:1.15; margin:0 0 var(--section-gap-lg);
}
.process-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(24px, 3vw, 40px);
  margin-bottom: var(--section-gap-lg);
}
.process-card{
  position:relative; background:#fff;
  border:1px solid #e9e9e9; border-radius:8px;
  padding:clamp(28px, 3.6vw, 48px);
  min-height:clamp(280px, 36vw, 420px);
  overflow:hidden; display:grid; align-content:start; gap:16px;
}
.card-title{
  font-family:"Satoshi", sans-serif; font-weight:500;
  font-size:clamp(18px, 1.8vw, 24px); margin:0;
}
.card-copy{
  margin:0; font-size:14px; line-height:1.6;
  color:rgba(17,17,17,.78); max-width:42ch;
}
/* número grande */
.step-number{
  position:absolute;
  left:clamp(24px, 3vw, 40px);
  bottom:clamp(20px, 3vw, 36px);
  font-family:"Satoshi", sans-serif;
  line-height:.9; font-size:clamp(88px, 10vw, 180px); /* desktop más contenido */
  user-select:none; pointer-events:none;
}
.step-number.strong{ color:rgba(0,0,0,.85) }
.step-number.soft  { color:rgba(0,0,0,.22) }
.step-number.softer{ color:rgba(0,0,0,.14) }

/* hover: gris a negro */
.process-card .step-number{ color:rgba(0,0,0,.22); transition:color 1.2s ease; }
.process-card:hover .step-number{ color:#111 }

.process-cta{ display:flex; justify-content:center }
/* nicer button shape */
.btn-primary{
  width:20ch;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  margin-inline:auto;
  padding:16px 22px;          /* más alto */
  border-radius:999px;        /* pill */
  line-height:1;
  font-weight:600;

  appearance:none;
  -webkit-appearance:none;
  border:0;                   /* saca bevel nativo */
  text-align:center;

  box-shadow:0 2px 12px rgba(0,0,0,.16);
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease;
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.22); }
.btn-primary:active{ transform:translateY(0); box-shadow:0 3px 10px rgba(0,0,0,.14); }
.btn-primary:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }
@media (max-width:960px){
  .process-grid{grid-template-columns:1fr}
  .card-copy{max-width:none}
}

/* =============== SOLUTIONS (usa container-wide) =============== */
.solutions{
  background:#efefef;
  color:#111;
  padding-block: var(--section-pad);
}
/* ==== SOLUTIONS: header centrado y mismo ancho para título + bajada ==== */
.solutions-head{
    text-align:center;
    margin:0 auto var(--section-gap);
    max-width:90ch;         /* contenedor del header */
  }
  .solutions-title{
    font-family:"Satoshi", sans-serif;
    font-weight:400;
    font-size:clamp(28px, 3.2vw, 44px);
    line-height:1.15;
    margin:0 0 clamp(12px, 1.6vw, 16px);
  
    /* mismo ancho que la bajada */
    max-width:72ch;
    margin-inline:auto;
  }
  .solutions-subtitle{
    margin:0;               /* el gap con la grilla lo da .solutions-head */
    max-width:72ch;         /* mismo ancho que el título */
    margin-inline:auto;
    font-size:14px;
    line-height:1.6;
    color:rgba(17,17,17,.72);
  }

/* Grilla 2 columnas dentro del wide */
.solutions-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(16px, 2vw, 24px);
  padding-bottom: var(--section-gap-lg);
}
.solution{
  background:#fff; border:1px solid #e6e6e6; border-radius:8px;
  overflow:hidden; display:grid; grid-template-rows:auto 1fr;
}
.solution img{ display:block; width:100%; height:auto; }
.solution figcaption{ padding:clamp(16px, 2vw, 24px); display:grid; gap:6px; }
.solution h3{
  font-family:"Satoshi", sans-serif; font-weight:500;
  font-size:clamp(16px, 1.4vw, 20px); margin:0; color:#111;
}
.solution p{ margin:0; font-size:14px; line-height:1.6; color:rgba(17,17,17,.75); }

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

/* =============== LOGOS (wide, fondo blanco) =============== */
.slice-logos{
  background:#fff;
  color:#111;
  padding-block: var(--section-gap-lg);
  --logo-h: clamp(22px, 6vw, 44px);          /* altura de logo por defecto (mobile/tablet) */
  --logo-cell-min: clamp(120px, 42vw, 180px); /* ancho mínimo de celda responsiva */
  --logo-gap: clamp(14px, 4vw, 40px);         /* gap fluido */
}

.logos-head{ text-align:center; margin:0 0 var(--section-gap); }
.logos-title{
  margin:0;
  font-family:"Satoshi", sans-serif;
  font-weight:500;
  font-size: clamp(12px, 1vw, 16px);
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* grid auto-fit para llenar filas sin huecos en mobile */
/* LOGOS responsive: centra la última fila en mobile y tablet */
.logos-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;                 /* clave: centra la fila incompleta */
  gap: clamp(14px, 4vw, 40px);
}

.logo{
  flex: 1 1 clamp(140px, 42vw, 200px);    /* ancho base de cada celda */
  max-width: 280px;                       /* evita celdas gigantes en pantallas medianas */
  display:grid;
  place-items:center;
  padding: clamp(12px, 3.2vw, 18px);
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  min-block-size: clamp(64px, 18vw, 110px);
  background:#fff;
}
.logo img{
  max-width:100%;
  max-height: clamp(24px, 6vw, 56px);
  height:auto;
  width:auto;
}

/* Desktop: volvemos a grid de 5 columnas */
@media (min-width:1025px){
  .logos-grid{
    display:grid;
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    gap: 3rem;
    align-items:stretch;
    justify-items:center;
  }
  .logo{
    max-width:none;
    min-block-size: 110px;
    border-color:#eee;
  }
}
/* =============== TESTIMONIOS =============== */
.testimonials{
  background:#efefef;
  color:#111;
  padding-block: var(--section-pad);
  --tst-card-h: clamp(260px, 32vw, 340px);
}

.tst-head{
  text-align:center;
  max-width:90ch;
  margin:0 auto var(--section-gap);
}
.tst-title{
  margin:0 0 clamp(12px, 1.6vw, 16px);
  font-family:"Satoshi",sans-serif;
  font-weight:400;
  font-size:clamp(26px,5.4vw,56px);
  line-height:1.12;
  max-width:72ch;
  margin-inline:auto;
}
.tst-subtitle{
  margin:0 0 var(--section-gap);
  max-width:72ch;
  margin-inline:auto;
  font-size:15px;
  line-height:1.65;
  color:rgba(17,17,17,.72);
}

/* carrusel */
.tst-carousel{ position:relative; }
.tst-viewport{ position:relative; }
.tst-track{ display:grid; gap:0; }

/* card fija (desktop) con footer pegado al bottom */
.tst-card{
  background:#fff;
  border:1px solid #ececec;
  border-radius:18px;
  box-shadow:0 24px 64px rgba(0,0,0,.12),0 8px 20px rgba(0,0,0,.06);
  padding: clamp(24px,5vw,44px);
  margin-inline:auto;
  max-width:1060px;
  height: var(--tst-card-h);
  display: flex;              /* importante */
  flex-direction: column;     /* apila contenido arriba y footer abajo */
  min-height: 0;
}

.tst-card.is-active{ display:flex; }

.tst-quote{
  margin:0;
  font-size:clamp(18px,2.2vw,24px);
  line-height:1.55;
  font-style:italic;
  letter-spacing:.1px;

  flex: 1 1 auto;                /* ocupa todo lo libre */
  min-height: 0;                 /* evita overflow raro en algunos navegadores */
}

/* footer abajo de la card */
.tst-meta{
  margin-top: auto;           /* clave para pegar al bottom */
  padding-top: clamp(10px, 1.6vw, 16px);
  display: flex;
  align-items: flex-end;       /* alinea nombre y estrellas por la base */
  justify-content: space-between;
  gap: 20px;
}

/* bloque izquierdo del footer */
.tst-name{ font-size:18px; font-weight:500; }
.tst-project{ font-size:15px; color:rgba(17,17,17,.6); }

/* estrellas abajo a la derecha */
.tst-stars{
  display:flex;
  align-items:flex-end;        /* asegura la base alineada */
  margin-left:auto;            /* las empuja a la derecha */
}
.tst-stars span{ color:#ee64ff; font-size:22px; }

/* micro-animaciones del contenido (opcional) */
.tst-card.is-entering .tst-strip{ animation: tstIn .34s ease both; }
.tst-card.is-leaving  .tst-strip{ animation: tstOut .34s ease both; }
@keyframes tstIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
@keyframes tstOut{ from{opacity:1; transform:translateY(0)} to{opacity:0; transform:translateY(-10px)} }

/* flechas */
.tst-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:999px;
  display:grid; place-items:center;
  background:#fff; color:#111; border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 28px rgba(0,0,0,.10);
  cursor:pointer; transition:box-shadow .2s ease, transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  z-index:3;
}
.tst-prev{ left: calc(50% - 640px); }
.tst-next{ right: calc(50% - 640px); }
.tst-nav:hover{
  background:#ee64ff; color:#fff; border-color:#ee64ff;
  box-shadow:0 16px 36px rgba(238,100,255,.35);
  transform:translateY(-50%) translateY(-1px);
}
.tst-nav:focus-visible{ outline:2px solid #111; outline-offset:2px; }

/* Mobile: card auto-height y sin flechas, footer sigue abajo */
@media (max-width:760px){
  .tst-nav{ display:none; }
  .tst-card{
    max-width:100%;
    border-radius:16px;
    height:auto;                 /* dinámica en mobile */
  }

}
  /* =============== SERVICE ECOSYSTEM =============== */


  .service-eco{ background:#efefef; color:#111; padding-block: var(--section-pad); }
  .eco-head{ text-align:center; margin:0 auto var(--section-gap); max-width:90ch; }
  .eco-title{ margin:0 0 clamp(12px, 1.6vw, 16px); font-family:"Satoshi",sans-serif; font-weight:400; font-size:clamp(28px,3.4vw,48px); line-height:1.12; }
  .eco-subtitle{ margin:0; font-size:14px; line-height:1.6; color:rgba(17,17,17,.72); }
  .eco-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.8vw,32px); }
  .eco-card{ background:#fff; border:1px solid #e9e9e9; border-radius:12px; padding:clamp(24px,3.2vw,40px); display:flex; flex-direction:column; gap:16px; min-height:clamp(260px,28vw,360px); box-shadow:0 20px 48px rgba(0,0,0,.06); }
  .eco-title-3{ margin:0; font-family:"Satoshi",sans-serif; font-weight:500; font-size:clamp(18px,1.8vw,22px); }
  .eco-copy{ margin:0; font-size:14px; line-height:1.65; color:rgba(17,17,17,.78); max-width:48ch; }
  .eco-figure{ margin-top:auto; display:flex; justify-content:center; align-items:center; }
  .eco-figure img{ width:120px; height:120px; object-fit:contain; display:block; }
  @media (max-width:1024px){ .eco-grid{ grid-template-columns:1fr 1fr } }
  @media (max-width:720px){ .eco-grid{ grid-template-columns:1fr } }




  /* Contact form */
.contact-form{ max-width:760px; margin:0 auto; display:grid; gap:28px; }
.field{ display:grid; gap:10px; }
.field label{
  font-family:"Satoshi",sans-serif; font-weight:500; color:#111; font-size:clamp(16px,1.6vw,22px);
}
.field input,
.field textarea{
  font: inherit; color:#111; background:transparent; border:0; border-bottom:1px solid rgba(0,0,0,.14);
  padding:16px 0; outline:none; transition:border-color .2s ease, background-color .2s ease;
}
.field textarea{ resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:rgba(17,17,17,.45) }
.field input:focus, .field textarea:focus{ border-bottom-color:#111; }
.form-note{ margin:6px 0 0; font-size:14px; color:rgba(17,17,17,.7) }



/* Toast centered success */
#toast{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 9999;
}
#toast.show{ opacity: 1; }
#toast .card{
  pointer-events: auto;
  background: #0f5132;            /* dark green */
  color: #d1f7e2;                  /* soft mint */
  border: 1px solid #0a3e26;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  font-size: 15px;
  line-height: 1.4;
  max-width: min(520px, 92vw);
  text-align: center;
}
#toast .card.error{
  background: #5c1a1a;
  color: #ffe3e3;
  border-color: #3f1010;
}




/* Dark mode */
@media (prefers-color-scheme: dark){
  body:not(.theme-light) .field label{ color:#e9eef5 }
  body:not(.theme-light) .field input, 
  body:not(.theme-light) .field textarea{
    color:#e9eef5; border-bottom:1px solid #ffffff24; background:transparent;
  }
  body:not(.theme-light) .field input::placeholder, 
  body:not(.theme-light) .field textarea::placeholder{ color:#c7cfdb99 }
  body:not(.theme-light) .field input:focus, 
  body:not(.theme-light) .field textarea:focus{ border-bottom-color:#e9eef5; }
  body:not(.theme-light) .form-note{ color:#c7cfdbb3 }
}



/* Dark mode SOLO si el sistema lo pide */
@media (prefers-color-scheme: dark){

  /* scrollbars y formularios nativos */
  html{ color-scheme: dark; }

  /* fondo y texto */
  body:not(.theme-light){ background:#0f1115; color:#e9eef5; }
  .bg-grid{ display:none; }

  /* header y logo */
  body:not(.theme-light) .nav{ color:#e9eef5; opacity:.95; }
  body:not(.theme-light) .brand img{ filter: invert(0%) brightness(80%); }

  /* secciones claras pasan a dark */
  body:not(.theme-light) .slice-light,
  body:not(.theme-light) .service-eco,
  body:not(.theme-light) .solutions,
  body:not(.theme-light) .process-card,
  body:not(.theme-light) .testimonials,
  body:not(.theme-light) .slice-light.process{
    background:#0f1115;
    color:#e9eef5;
  }

  body:not(.theme-light) .process-card .step-number{
    color:#979da7;
    transition: color 1.2s ease;
  }
  body:not(.theme-light) .process-card:hover .step-number{
    color:#e9eef5;
  }

  body:not(.theme-light) .tst-project{ color:#c7cfdb99; }


  body:not(.theme-light) .tst-nav{
    background-color:#e9e9e99e;
  }

  /* cards y contenedores */
  body:not(.theme-light) .eco-card,
  body:not(.theme-light) .solution,
  body:not(.theme-light) .tst-card{
    background:#151821;
    border:1px solid #ffffff24;
    box-shadow:0 20px 48px rgba(0,0,0,.33);
  }




  /* textos secundarios */
  body:not(.theme-light) .eco-copy,
  body:not(.theme-light) .solutions-subtitle,
  body:not(.theme-light) .tst-subtitle,
  body:not(.theme-light) .card-copy{ color:#c7cfdbb3; }

  /* botón */
  body:not(.theme-light) .btn-primary{ background:#ffffff; color:#0f1115; }

  /* Contact form dark override */
  body:not(.theme-light) .contact-form{ max-width:760px; margin:0 auto; display:grid; gap:28px; color-scheme: dark; }
  body:not(.theme-light) .field{ display:grid; gap:10px; }

  body:not(.theme-light) .field label{
    font-family:"Satoshi",sans-serif; font-weight:500; color:#f5f5f5;
    font-size:clamp(16px,1.6vw,22px);
  }

  body:not(.theme-light) .field input,
  body:not(.theme-light) .field textarea{
    font:inherit; color:#f5f5f5; caret-color:#fff;
    background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.22);
    padding:16px 0; outline:none;
    transition:border-color .2s ease, background-color .2s ease;
  }

  body:not(.theme-light) .field textarea{ resize:vertical; }

  body:not(.theme-light) .field input::placeholder,
  body:not(.theme-light) .field textarea::placeholder{ color:rgba(255,255,255,.55); }

  body:not(.theme-light) .field input:focus,
  body:not(.theme-light) .field textarea:focus{
    border-bottom-color:#fff; background-color:rgba(255,255,255,.04);
  }

  body:not(.theme-light) .form-note{ margin:6px 0 0; font-size:14px; color:rgba(255,255,255,.72) }

  /* autofill */
  body:not(.theme-light) input:-webkit-autofill,
  body:not(.theme-light) textarea:-webkit-autofill{
    -webkit-box-shadow:0 0 0px 1000px transparent inset;
    -webkit-text-fill-color:#f5f5f5;
    caret-color:#fff;
  }


  body:not(.theme-light){
    --grid-color: 208,214,224;   /* gris frío suave */
    --grid-opacity: .05;         /* más sutil que en light */
  }
  body:not(.theme-light) .bg-grid{
    display:block;               /* reactivar si antes lo ocultaste */
    /* opcional: suavizar el fade en dark */
    -webkit-mask-image: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,1) 36%, rgba(0,0,0,0) 78%);
    mask-image: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,1) 36%, rgba(0,0,0,0) 78%);
  }
  
  /* Footer override fuerte */
  body:not(.theme-light) footer.site-footer{
    background:#0f1115 !important;
    color:#e9eef5 !important;
    border-top:1px solid rgba(255,255,255,.18) !important;
  }
  body:not(.theme-light) footer.site-footer a{ color:#c7cfdb }
  body:not(.theme-light) footer.site-footer a:hover{ color:#fff }
  body:not(.theme-light) .foot-locations{ color:#c7cfdbb3 }

  body:not(.theme-light) .foot-contact::before{
    background: rgba(255,255,255,.28);
}

body:not(.theme-light) .foot-contact a{
  color:#fff;

}

body:not(.theme-light) .footer{
  background:none;
}
}



/* ==== HEADERS DE SECCIÓN UNIFICADOS ==== */

/* 1) Section block utility */
.section { padding-block: var(--section-pad); }

/* 2) Head, title, subtitle */
.section-head{
  text-align:center;
  margin:0 auto var(--section-gap);
  max-width:90ch;
}
.section-title{
  font-family:"Satoshi",sans-serif;
  font-weight:400;
  font-size:clamp(28px, 3.2vw, 44px);
  line-height:1.15;
  margin:0 0 clamp(12px, 1.6vw, 16px);
  max-width:72ch;
  margin-inline:auto;
}
.section-subtitle{
  margin:0;
  max-width:72ch;
  margin-inline:auto;
  font-size:14px;
  line-height:1.6;
  color:rgba(17,17,17,.72);
}

/* 3) Aliases (keep existing HTML) */
.section-head, .eco-head, .solutions-head, .tst-head, .logos-head { /* uses rules above */ }
.section-title, .eco-title, .solutions-title, .tst-title { /* uses rules above */ }
.section-subtitle, .eco-subtitle, .solutions-subtitle, .tst-subtitle { /* uses rules above */ }

/* Footer above bg grid */
.site-footer{ position:relative; z-index:3; }

/* Dark footer stacking */
@media (prefers-color-scheme: dark){
  body:not(.theme-light) .site-footer{ position:relative; z-index:3; }
}

/* Card stacking */
.eco-card,
.process-card,
.solution,
.tst-card{ position:relative; z-index:1; }

/* Sections above bg grid */
.service-eco .container,
.slice-light .container{ position:relative; z-index:1; }

/* Fix dark theme: Solutions */
@media (prefers-color-scheme: dark){
  body:not(.theme-light) .solution{
    background:#151821;
    border:1px solid #ffffff24;
  }
  body:not(.theme-light) .solution h3{ color:#e9eef5; }
  body:not(.theme-light) .solution p{ color:#c7cfdbb3; }
  body:not(.theme-light) .solution figcaption{ color:#e9eef5; }
}


/* ==== HAMBURGER MENU ≤768px ==== */
/* hide on desktop */
.nav-toggle{ display:none; }
.nav-close{ display:none; }

/* light theme default (all pages, closed state) */
body.theme-light .nav-toggle{
  color:#555;
  border-color:#00000026;
  background:transparent;
}

/* dark scheme tweaks for toggle (closed state) */
@media (prefers-color-scheme: dark){
  body:not(.theme-light) .nav-toggle{ color:#fff; border-color:#ffffff40; }
}

@media (max-width:768px){

  /* trigger button */
  .nav-toggle{
    display:inline-grid;
    place-items:center;
    width:44px; height:44px;
    border:1px solid #00000026;
    color:#555;    border-radius:10px;
    background:transparent;
    cursor:pointer;
  }
  .nav-toggle:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }

  /* three bars icon */
  .nav-toggle .bars{ position:relative; width:22px; height:2px; background:currentColor; }
  .nav-toggle .bars::before,
  .nav-toggle .bars::after{
    content:""; position:absolute; left:0; width:22px; height:2px; background:currentColor;
    transition: transform .2s ease, top .2s ease, opacity .2s ease;
  }
  .nav-toggle .bars::before{ top:-7px; }
  .nav-toggle .bars::after { top: 7px; }

  /* full screen panel (base) */
  .nav{
    --nav-gap: clamp(18px, 4.8vh, 40px);
    position:fixed;
    inset:0;
    padding: calc(var(--header-h) + env(safe-area-inset-top,0px))
             clamp(20px,6vw,40px)
             calc(18px + env(safe-area-inset-bottom,0px));
    display:flex; flex-direction:column; align-items:center;
    text-align:center;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    min-height:100dvh;
    transform: translateY(-8%);
    opacity:0; visibility:hidden; pointer-events:none;
    z-index:10;
  }

  /* panel colors by theme */
  body.theme-light .nav{
    background: rgba(245,245,247,.92);
    color:#151515;
  }
  body:not(.theme-light) .nav{
    background: rgba(8,10,14,.92);
    color:#fff;
  }

  /* links inherit panel color */
  .nav a,
  .nav-close{ color:inherit; }

  /* big links */
  .nav a{
    display:flex; align-items:center; justify-content:center;
    font-size: clamp(34px, 10vw, 56px);
    line-height:1.15;
    padding:8px 4px;
        font-weight:400;
    letter-spacing:.2px;
  }

  /* vertically center the group of links */
  .nav a:first-of-type{ margin-top:auto; }
  .nav a + a{ margin-top: var(--nav-gap); }
  .nav a:last-of-type{ margin-bottom:auto; }

  /* open states */
  header.container-wide:has(.nav-toggle[aria-expanded="true"]) .nav,
  header.container-wide.nav-open .nav{
    transform:none; opacity:1; visibility:visible; pointer-events:auto;
  }

  /* lock scroll when open */
  body:has(.nav-toggle[aria-expanded="true"]), body.nav-open{
    overflow:hidden; touch-action:none;
  }

  /* morph to X */
  .nav-toggle[aria-expanded="true"] .bars{ background:transparent; }
  .nav-toggle[aria-expanded="true"] .bars::before{ top:0; transform:rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bars::after { top:0; transform:rotate(-45deg); }

  /* toggle color when panel is open (by theme) */
  body.theme-light header.container-wide:has(.nav-toggle[aria-expanded="true"]) .nav-toggle,
  body.theme-light header.container-wide.nav-open .nav-toggle{
    color:#151515;
    border-color:#00000033;
  }
  body:not(.theme-light) header.container-wide:has(.nav-toggle[aria-expanded="true"]) .nav-toggle,
  body:not(.theme-light) header.container-wide.nav-open .nav-toggle{
    color:#fff;
    border-color:#ffffff40;
  }

  /* header layout on mobile */
  header .row{ gap:10px; }

  /* Close button at bottom */
  .nav-close{
    display:inline-flex;
    align-items:center; justify-content:center;
    gap:10px; padding:12px 16px;
    border:0; background:transparent; box-shadow:none;
    font-size:18px; line-height:1; cursor:pointer;
    -webkit-tap-highlight-color: transparent;
    margin-top:auto;
  }
  .nav-close:hover, .nav-close:active{ background:transparent; }
  .nav-close:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }

  /* X icon for Close */
  .nav-close .x{ position:relative; width:22px; height:22px; display:inline-block; }
  .nav-close .x::before,
  .nav-close .x::after{
    content:""; position:absolute; left:50%; top:50%;
    width:22px; height:2px; background:currentColor; transform-origin:center;
  }
  .nav-close .x::before{ transform:translate(-50%,-50%) rotate(45deg); }
  .nav-close .x::after { transform:translate(-50%,-50%) rotate(-45deg); }
}

/* white toggle only on home when closed (both themes) */
body.home .nav-toggle{
  color:#fff;
  border-color:#ffffff40;
}



/* Testimonios: que el stage llene la card y permita pegar el footer abajo */
.tst-stage{
  flex: 1 1 auto;      /* ocupa todo el alto disponible dentro de .tst-card */
  min-height: 0;
  display: flex;       /* contiene al strip */
}

/* el strip también debe poder crecer/encoger */
.tst-stage > div{
  flex: 1 1 auto;
  min-height: 0;
}

/* los panes (contenido de cada testimonio) ocupan el 100% y apilan quote+footer */
.tst-pane{
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* ya lo tenías, pero lo aclaro: el footer se pega al bottom del pane */
.tst-meta{ margin-top:auto; }