/* Carga tus archivos – ponlos en /fonts o ajusta la ruta */
    @font-face {
      font-family: "Helvetica Now Text";
      src: url("fonts/HelveticaNowTextThin-5760591.ttf") format("truetype");
      font-weight: 300; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: "Helvetica Now Text";
      src: url("fonts/HelveticaNowText-5760579.ttf") format("truetype");
      font-weight: 400; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: "Helvetica Now Text";
      src: url("fonts/HelveticaNowTextMedium-5760590.ttf") format("truetype");
      font-weight: 600; font-style: normal; font-display: swap;
    }

    :root{
      /* Nueva paleta sobre fondo blanco */
      --primary:#f62f42;
      --primary-dark:#d62838;     /* tono más oscuro del primario */
      --text:#111111;
      --muted:#555555;
      --border:#e8e8e8;
      --surface:#ffffff;
      --surface-soft:#f9fafb;
      --shadow:0 10px 22px rgba(17,17,17,.06);
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%}

    body{
      font-family:"Helvetica Now Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      color:var(--text);
      background:#ffffff;                 /* fondo blanco */
      line-height:1.65;
      overflow-x:hidden;
    }

    /* Títulos con peso 600 de Helvetica Now */
    h1,h2,h3,h4,h5,h6{
      font-family:"Helvetica Now Text", system-ui, sans-serif;
      font-weight:600;
      letter-spacing:.2px;
      line-height:1.15;
      color:var(--text);
      margin-bottom:.5rem;
    }

    a{color:inherit;text-decoration:none}
    .container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}

    /* Header: desliza hacia arriba cuando se oculta */
    header{
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    }
    header.hide{ transform: translateY(-100%); }


    /* ===== Header claro ===== */
    header{
      position:fixed; inset-inline:0; top:0; z-index:1000;
      background:#ffffff;
      border-bottom:1px solid var(--border);
      transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
    }
    header.scrolled{ box-shadow: var(--shadow); }
    .header-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
    .brand{display:inline-flex;align-items:center;gap:10px}
    .brand img{height:70px;width:auto}
    .brand h1{font-size:1.25rem;font-weight:600}
    .brand .accent{color:var(--primary)}

    nav ul{list-style:none;display:flex;gap:28px}
    nav a{position:relative;font-weight:600;font-size:.98rem;color:var(--text);opacity:.9}
    nav a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--primary);transition:width .2s ease}
    nav a:hover{color:var(--primary)}
    nav a:hover::after{width:100%}
    .menu-toggle{display:none;font-size:1.5rem;color:var(--text);cursor:pointer}

    /* ===== Hero ===== */
    .hero{
      padding:140px 0 96px;
      text-align:left;                          /* texto a la izquierda */
    }
    /* Limitar ancho visual como en el mockup */
    .hero .kicker,
    .hero h1,
    .hero .hero-meta,
    .hero .cta-row{ max-width: 560px; }

/* Empuja el hero un poco más abajo */
.hero{
  padding-top: 220px;   /* antes: 140px — ajusta el valor a tu gusto */
}

/* === KICKER con efecto de luz rojo en continuo === */
.hero .kicker{
  position: relative;
  display: inline-block;
  /* base tipográfica intacta, solo leve ajuste de tracking */
  letter-spacing: .30em;

  /* banda de luz que barre el texto */
  background-image: linear-gradient(
    90deg,
    #222 0%,
    #222 35%,
    var(--primary) 50%,
    #222 65%,
    #222 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* brillo suave + barrido constante */
  animation: kickerSweep 3.6s linear infinite,
             kickerPulse 2s ease-in-out infinite;
  will-change: background-position, text-shadow;
}

/* línea inferior con destello que recorre de izquierda a derecha */
.hero .kicker::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px; height:2px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  background-size: 200% 100%;
  animation: kickerLine 2.8s linear infinite;
  border-radius: 2px;
  opacity: .9;
}

/* Barrido del color sobre el relleno del texto */
@keyframes kickerSweep{
  0%   { background-position: -120% 0; }
  100% { background-position: 120% 0; }
}



/* Destello que recorre la línea inferior */
@keyframes kickerLine{
  0%   { background-position:   0% 0; }
  100% { background-position: 200% 0; }
}

/* Accesibilidad: usuarios con “reducir movimiento” ven una versión estática */
@media (prefers-reduced-motion: reduce){
  .hero .kicker{
    animation: none;
    background-image: none;
    color: var(--primary);
    text-shadow: none;
  }
  .hero .kicker::after{ display: none; }
}

    /* Kicker (AUTOMATION FACTORY) estilo de la imagen */
    .kicker{
      font-family:"Helvetica Now Text", system-ui, sans-serif;
      font-weight:800;
      font-size:.95rem;
      letter-spacing:.24em;
      color:#000000;                               /* gris oscuro, no rojo */
      text-transform:uppercase;
      margin-bottom:.9rem;
      opacity:.9;
    }

    .hero h1{
      font-family:"Helvetica Now Text", system-ui, sans-serif;
      font-weight:700;
      font-size:clamp(2rem,4vw,3.2rem);
      max-width:900px;
      margin:8px 0 14px;
    }

/* Línea de correo | teléfono como texto */
.hero .hero-meta{
  font-family: "Helvetica Now Text", system-ui, sans-serif;
  font-size: 17px;          /* o el tamaño que quieras (px, rem, etc.) */
  font-weight: 600;         /* 650 no siempre existe en la fuente; 600 es seguro */
  letter-spacing: normal;   /* o 0 para quitar el interletrado */
  color: #a8a8a8;
  margin: 0 0 18px;
}

    .hero p{max-width:880px;margin:0 0 22px;color:#4b4b4b;font-size:1.06rem}

    .cta-row{
      display:flex;gap:14px;justify-content:flex-start; /* botones a la izquierda */
      flex-wrap:wrap;margin-top:5px
    }
    .btn{
      display:inline-flex;align-items:center;gap:10px;
      padding:12px 22px;border-radius:40px;border:2px solid var(--primary);
      background:var(--primary);color:#fff;font-weight:500;letter-spacing:.1px;
      box-shadow:0 8px 18px rgba(246,47,66,.25);
      transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(246,47,66,.3);background:var(--primary-dark)}
    .btn.secondary{background:transparent;color:var(--primary)}
    .btn.secondary:hover{background:var(--primary);color:#fff}
    /* Secundario SOLO en el hero como pastilla blanca con borde suave (como imagen) */
    .hero .btn.secondary{
      background:#fff;border-color:#f4c6cc;color:var(--primary);
      box-shadow:none;
    }

    /* ===== Secciones ===== */
    section{padding:88px 0}
    .section-title{text-align:center;margin-bottom:42px}
    .section-title h2{font-size:clamp(1.7rem,3vw,2.4rem)}
    .section-title p{color:#6b7280;max-width:820px;margin:6px auto 0}

    /* ===== Grids y Cards claras ===== */
    .grid{display:grid;gap:22px}
    .grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    @media (max-width:1024px){ .grid.cols-4{grid-template-columns:repeat(2,1fr)} }
    @media (max-width:768px){ .grid.cols-3, .grid.cols-4{grid-template-columns:1fr} }

    .card{
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:14px; overflow:hidden;
      box-shadow: var(--shadow);
      transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }
    .card:hover{transform:translateY(-4px);border-color:#e2e2e2;box-shadow:0 14px 30px rgba(17,17,17,.08)}
    .card .thumb{
      aspect-ratio:16/9;background:var(--surface-soft);
      border-bottom:1px solid var(--border);display:grid;place-items:center;
      font-size:2.2rem;color:var(--primary);
    }

    /* La “tapa” del card ahora puede mostrar una imagen */
    .card .thumb{
      aspect-ratio: 16/9;                 /* misma altura que ya usas */
      background: var(--surface-soft);
      border-bottom: 1px solid var(--border);
      overflow: hidden;                    /* recorta la imagen si sobresale */
      display: block;                      /* ya no centramos iconos */
      position: relative;
    }

    /* Imagen de portada: llena el recuadro */
    .card .thumb > img{
      width: 100%;
      height: 100%;
      object-fit: cover;                   /* recorta para cubrir sin deformar */
      display: block;
    }

    /* Si quieres que alguna imagen se vea completa sin recorte (logos, PNGs) */
    .card .thumb.thumb--contain > img{
      object-fit: contain;
      background: var(--surface-soft);
      padding: 12px;                       /* margen interno opcional */
    }

    .card .body{padding:18px 18px 22px}
    .card h3{font-size:1.2rem;margin-bottom:6px}
    .card p{color:#505050}

/* ===== Clientes (grid) ===== */
#clientes .logo-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  align-items: center;
}

#clientes .logo-item{
  /* cada “slot” centra su contenido */
  display: grid;
  place-items: center;
  padding: 10px 12px;

  /* altura mínima del slot = alto del logo (+ aire) */
  --h: 64px;       /* alto por defecto si no especificas nada */
  --w: 220px;      /* ancho máx. por defecto */
  min-height: calc(var(--h) + 16px);
}

#clientes .logo-item img{
  display: block;
  height: auto;
  width: auto;
  max-height: var(--h);   /* ← controlas alto */
  max-width:  var(--w);   /* ← (opcional) controlas ancho máx. */
  object-fit: contain;
  filter: grayscale(100%) contrast(110%);
  opacity: .9;
  transition: filter .2s, opacity .2s, transform .15s;
}

#clientes .logo-item img:hover{
  filter: none;
  opacity: 1;
  transform: translateY(-2px);
}

/* Responsivo */
@media (max-width: 900px){
  #clientes .logo-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 640px){
  #clientes .logo-grid{ grid-template-columns: repeat(2,1fr); }
  /* tamaños base más chicos en móvil (si no pasas variables) */
  #clientes .logo-item{ --h: 52px; --w: 200px; }
}



    /* Ubicaciones / Panels */
    .locations{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
    .locations .panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;box-shadow: var(--shadow)}
    .locations h3{margin-bottom:10px}
    .locations ul{list-style:none;color:#505050}
    .locations li{padding:6px 0}
    @media (max-width:768px){.locations{grid-template-columns:1fr}}

    /* Contacto */
    .contact-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:30px}
    @media (max-width:900px){.contact-wrap{grid-template-columns:1fr}}
    .contact-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;box-shadow: var(--shadow)}
    .info-row{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;padding:12px 0;border-bottom:1px dashed #e9e9e9}
    .info-row:last-child{border-bottom:0}

    .form{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;box-shadow: var(--shadow)}
    .field{margin-bottom:14px}
    .input,.textarea{
      width:100%;padding:13px 14px;border-radius:10px;border:1px solid #dcdcdc;background:#fff;color:var(--text);
      font:400 1rem/1.4 "Helvetica Now Text", system-ui, sans-serif;
      transition:border-color .15s ease, box-shadow .15s ease;
    }
    .textarea{min-height:140px;resize:vertical}
    .input:focus,.textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(246,47,66,.12)}

   /* ===== Footer EXACTAMENTE IGUAL ===== */
    footer{background:#000000;border-top:1px solid var(--border);padding:56px 0 26px;margin-top:32px}
    .footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
    .footer-col h4{font-size:1.05rem;margin-bottom:10px;color:var(--primary)}
    .footer-col p, .footer-col a, .copyright{color:#ffffff}
    .socials{display:flex;gap:12px;margin-top:12px}
    .socials a{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:rgba(0, 0, 0, 0.1);color:var(--primary);border:1px solid #ffffff; transition: all 0.3s ease;}
    .socials a:hover{background:var(--primary);color:#fff; transform: translateY(-3px);}
    @media (max-width:1024px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:620px){.footer-grid{grid-template-columns:1fr}}

    /* Botones del footer */
    .btn{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:40px;border:2px solid var(--primary);background:var(--primary);color:#fff;font-weight:700;box-shadow:0 8px 18px rgba(246,47,66,.25);transition:.15s}
    .btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(246,47,66,.3);background:var(--primary-dark)}
    .btn.secondary{background:transparent;color:var(--primary)}
    .btn.secondary:hover{background:var(--primary);color:#fff}
    .btn.small{padding:9px 16px;border-width:2px;font-size:.95rem}

    /* Campos de formulario del footer */
    .field{margin-bottom:14px}
    .input,.textarea{
      width:100%;padding:13px 14px;border-radius:10px;border:1px solid #dcdcdc;background:#fff;color:var(--text);
      font:400 1rem/1.4 "Helvetica Now Text", system-ui, sans-serif;
      transition:border-color .15s ease, box-shadow .15s ease;
    }
    .textarea{min-height:140px;resize:vertical}
    .input:focus,.textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(246,47,66,.12)}

        html, body { height: 100%; }
body{
  background-color: #fff; /* base blanca */
  background-repeat: no-repeat;
  background-position: right center;        /* anclada a la derecha */
  background-size: contain;                 /* que quepa completa */
  background-attachment: fixed;             /* efecto parallax suave */
}

/* iOS suele ignorar el fixed: forzamos scroll para evitar saltos */
@supports (-webkit-overflow-scrolling: touch) {
  body { background-attachment: scroll; }
}

/* altura base para todos (puedes dejar tu regla actual) */
#clientes .logo-grid img{
  height: 70px;           /* o 64px si prefieres */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(100%) contrast(110%);
  opacity: .85;
  transition: opacity .2s, filter .2s, transform .15s;
}

/* a los logos muy anchos dales un poco más de altura */
#clientes .logo-grid img.logo--wide{
  height: 180px;           /* ajusta 72–84px hasta que “empaten” visualmente */
}


/* iOS suele ignorar el fixed: forzamos scroll para evitar saltos */
@supports (-webkit-overflow-scrolling: touch) {
  body { background-attachment: scroll; }
}

/* Reemplaza las reglas de .logo-grid por estas */
#clientes .logo-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;   /* ← centra todas las filas, incluida la última */
  align-items: center;
  max-width: 1100px;         /* ajusta al gusto */
  margin-inline: auto;       /* centra el bloque en la página */
}

/* cajas para que todos ocupen el mismo “slot” */
#clientes .logo-grid img{
  height: 64px;              /* tu alto estándar */
  width: 180px;              /* ancho de slot visual (ajusta 160–220) */
  object-fit: contain;
  display: block;
}

/* ===== Galería / Media Cards ===== */
.media-grid{
  --card-min: 380px;                  /* ← ancho mínimo por card (ajústalo a tu gusto) */
  display:grid;
  gap:22px;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
}

/* ===== Proyectos: cards más pequeños y centrados ===== */
#proyectos .media-grid{
  --card-min: 320px;          /* ~3 columnas en desktop */
  max-width: 1100px;          /* no usa todo el viewport */
  margin-inline: auto;        /* centra la grilla */
  padding-inline: 4px;        /* pequeño respiro */
}

#proyectos .media-body{ padding:14px 16px 18px; }
#proyectos .media-body h3{ font-size:1.05rem; }
#proyectos .media-body p{ font-size:.98rem; color:#6b7280; }

/* Opcional: a 2 cols en pantallas medianas */
@media (max-width: 1024px){
  #proyectos .media-grid{ --card-min: 300px; }
}
/* Opcional: 1 col en móvil */
@media (max-width: 640px){
  #proyectos .media-grid{ --card-min: 240px; }
}

.media-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  box-shadow: var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.media-card:hover{ transform:translateY(-4px); border-color:#e2e2e2; box-shadow:0 14px 30px rgba(17,17,17,.08); }

/* Cabecera con imagen o video */
.media-thumb{
  position:relative;
  aspect-ratio:16/9;
  background:var(--surface-soft);
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.media-thumb > img,
.media-thumb > video{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Botón/overlay para abrir lightbox */
.media-open{
  position:absolute; inset:0;
  border:0; background:transparent; cursor:zoom-in;
}
.media-open::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.25));
  opacity:0; transition:opacity .2s ease;
}
.media-open::after{
  content:"\f00e"; /* fa-magnifying-glass */
  font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:30px; color:#fff; opacity:.9; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
  transition:transform .2s ease, opacity .2s ease;
}
.media-thumb[data-kind="video"] .media-open{ cursor: pointer; }
.media-thumb[data-kind="video"] .media-open::after{ content:"\f04b"; /* fa-play */ }
.media-open:hover::before{ opacity:1; }
.media-open:hover::after{ transform:translate(-50%,-50%) scale(1.08); }

/* Etiqueta “Video” / “YouTube” */
.badge{
  position:absolute; left:12px; top:12px;
  background:var(--primary); color:#fff;
  padding:4px 10px; border-radius:999px; font-size:.75rem; font-weight:700;
  letter-spacing:.3px;
}

/* Cuerpo */
.media-body{ padding:16px 18px 20px; }
.media-body h3{ font-size:1.15rem; margin-bottom:6px; }
.media-body p{ color:#505050; }

/* ===== Lightbox ===== */
.lightbox{
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.85);
  display:none; align-items:center; justify-content:center;
  padding:24px;
}
.lightbox.open{ display:flex; }
.lightbox-content{
  width:min(96vw, 1200px); max-height:90vh;
}
.lightbox-content > *{ width:100%; height:100%; object-fit:contain; background:#000; border-radius:12px; }
.lightbox .close{
  position:absolute; top:16px; right:16px; width:44px; height:44px;
  border:0; border-radius:50%; color:#fff; background:rgba(255,255,255,.15);
  display:grid; place-items:center; font-size:22px; cursor:pointer;
}
.lightbox .close:hover{ background:rgba(255,255,255,.25); }

/* ===== Mapa (Ubicaciones) ===== */
.map-wrap{
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #121212;
}
#map{
  width: 100%;
  height: 520px;             /* ajusta altura aquí */
}

/* Tipografía dentro del InfoWindow */
.gm-style .gm-style-iw-d h3{
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 600;
}
.gm-style .gm-style-iw-d p{ margin: 0; color:#444; }
.gm-style .gm-style-iw-d a{
  color: var(--primary);
  text-decoration: underline;
  font-weight: 600;
}

/* contenedor a ancho de viewport */
.map-bleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* tamaño del mapa */
#map{
  width: 100%;
  height: 520px;           /* ajusta a tu gusto */
  border-radius: 0;        /* o 16px si quieres esquinas */
}

#map{ height:75vh; min-height:380px; border-radius:12px; overflow:hidden }
#map .gm-style{ filter: grayscale(1) contrast(1.05) brightness(0.95); }

/* botón chico y fila de acciones en cards */
.btn.small{padding:7px 18px;border-width:2px;font-size:.80rem}
.card .actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.media-card .actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}

/* 1) Quitar la sombra SOLO a los botones dentro de los cards de proyectos */
.media-card .btn{
  box-shadow: none;     /* sin sombra */
  transform: none;      /* que no “salte” al hover */
}
.media-card .btn:hover{
  box-shadow: none;
  transform: none;
}

/* 2) Dar más aire entre el botón y los bordes del card */
.media-card .media-body{
  /* ↑ top | ←→ left/right | ↓ bottom */
  padding: 22px 24px 26px;   /* aumenta el padding interior del card */
}

/* (opcional) separa el botón del texto de arriba */
.media-card .actions{
  margin-top: 24px;
}

/* A) Más aire para TODO el contenido del card (título, texto y botón) */
.media-card .media-body{
  /* arriba | lados | abajo */
  padding: 20px 28px 32px;
}

/* B) Solo empujar el botón (sin tocar el resto) */
.media-card .actions{
  margin-top: 20px;     /* separa del texto */
  padding-bottom: 20px; /* separa del borde inferior del card */
}

/* (opcional) un poquito más de separación de los bordes laterales,
   incluso si cambias el padding general más adelante */
.media-card .actions .btn{
  margin-inline: 0;   /* separa 6px de cada lado dentro del card */
}

/* 1) Un padding único para los cards de la galería */
:root{
  --card-pad: 24px; /* ajusta a tu gusto: 20, 24, 28… */
}

/* 2) El contenido (título + texto + botón) respeta ese padding por todos lados */
.media-card .media-body{
  padding: var(--card-pad);
}

/* 3) Mismo aire abajo del botón que a los lados/arriba */
.media-card .actions{
  margin-top: 16px;            /* separación del texto */
  padding-bottom: var(--card-pad);
}

/* 4) Sin márgenes laterales extra en el botón (para que alinee con el texto) */
.media-card .actions .btn{
  margin-inline: 0;
}

/* Ajustes globales para el card */
:root{
  --card-pad: 22px;         /* padding interno lateral y vertical */
  --body-min: 220px;        /* alto mínimo del cuerpo para que exista “aire” */
}

/* Card en columna: imagen arriba, body abajo */
.media-card{ display:flex; flex-direction:column; }

/* Cuerpo centrado vertical y horizontal */
.media-card .media-body{
  display:flex;
  flex-direction:column;
  padding: var(--card-pad);
  min-height: var(--body-min);
}

/* Espaciadores flex para repartir exactamente el “aire” arriba/abajo */
.media-card .media-body::before,
.media-card .media-body::after{
  content:"";
  flex:1 1 auto;
}

/* Ritmo vertical entre título, texto y botón */
.media-card .media-body > * + *{ margin-top: 10px; }

/* Contenedor del botón centrado (sin extra abajo para que sea simétrico) */
.media-card .actions{
  margin-top: 12px;
  display:flex;
  gap:10px;
  width:100%;
  padding-bottom: 0;   /* ← anulamos cualquier padding extra solo abajo */
}

/* ===== CONOCENOS (TEXTO+VIDEO) ===== */
#conocenos .about-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr; /* texto más ancho que el video */
  gap:28px;
  align-items:center;
}
@media (max-width:980px){
  #conocenos .about-grid{ grid-template-columns:1fr; gap:20px; }
}

#conocenos .about-text h2{ font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:8px; }
#conocenos .about-lead{ color:#4b4b4b; font-size:1.06rem; margin-bottom:12px; }
#conocenos .about-body{ color:#333; }
#conocenos .about-body p + p{ margin-top:10px; }

/* Lista con checks y divisores */
#conocenos .about-list{
  list-style:none; margin:16px 0 0; padding:0;
  border-top:1px dashed #e9e9e9;
}
#conocenos .about-list li{
  display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:start;
  padding:12px 0; border-bottom:1px dashed #e9e9e9;
}
#conocenos .about-list i{ color:var(--primary); margin-top:2px; }

/* Stats compactas */
#conocenos .about-stats{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px; margin-top:16px;
}
#conocenos .stat{
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:14px 16px; text-align:center; box-shadow:var(--shadow);
}
#conocenos .stat b{ display:block; font-size:1.15rem; }
#conocenos .stat small{ color:#6b7280; font-weight:600; letter-spacing:.2px; }

#conocenos .about-video{
  position:relative; aspect-ratio:16/9; background:#000;
  border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
}
#conocenos .about-video video,
#conocenos .about-video iframe{ width:100%; height:100%; object-fit:cover; display:block; }
#conocenos .about-caption{ color:#6b6b6b; font-size:.92rem; text-align:center; margin-top:8px; }

#conocenos .about-cta{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }

@media (min-width: 980px){
  #conocenos .about-video{
    aspect-ratio: 4 / 3;   /* antes 16/9; 4:3 es más alto */
    /* opcionalmente fuerza altura mínima grande en desktop */
    min-height: 420px;
  }
}

/* ===== Soluciones: quepan 5 por fila en desktop ===== */
#soluciones .service-steps{
  --card-min: 210px;                 /* ancho mínimo por card (ajusta 200–230px) */
  display: grid;
  gap: 20px;                         /* separación entre cards */
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
}

/* (Opcional) un poco más ancho ese contenedor para tener más aire */
#soluciones .container{
  max-width: 1240px;                 /* sube a 1280/1320 si quieres aún más espacio */
}

/* ===== ACERCA DE — imagen izquierda + texto derecha ===== */
/* ===== ACERCA DE — layout y tema oscuro tipo SV ===== */
#acerca{
  position: relative;
  background: #08090b;                /* negro cálido */
  color: #e5e7eb;
  overflow: hidden;
  padding: clamp(48px, 6vw, 96px) 0;  /* alto visual de la franja */
}

/* Motivo de puntos rojos (como SV) */
#acerca::after{
  content:"";
  position:absolute;
  inset:auto -15% -18% 55%;
  pointer-events:none;
  background:
    radial-gradient(circle at 70% 40%, rgba(246,47,66,.78), rgba(246,47,66,.35) 40%, transparent 70%) 0 0 / 40% 40% no-repeat,
    radial-gradient(circle, rgba(246,47,66,.12) 2px, transparent 2px) 0 0 / 22px 22px;
  filter: blur(.2px) saturate(1.05);
  opacity:.35;
  transform: rotate(-18deg) translateY(8%);
}

/* Dos columnas: izquierda imagen grande, derecha texto */
#acerca .about-two-col{
  display: grid;
  grid-template-columns: min(48vw, 640px) 1fr;  /* ancho máx. de la imagen */
  gap: clamp(28px, 5vw, 84px);
  align-items: center;                           /* centra verticalmente */
}

/* Imagen izquierda: ocupa su columna sin trucos */
#acerca .about-photo{ margin: 0; }
#acerca .about-photo img{
  display: block;
  width: 50%;
  height: auto;
  object-fit: contain;         /* no recorta tu arte “+25” */
  aspect-ratio: 4 / 5;         /* ajusta si tu PNG es otro formato */
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.35));
}

#acerca{ --img-shift: 180px; }            /* ajusta 10–60px */
#acerca .about-photo{ transform: translateX(var(--img-shift)); }

/* mueve el título */
#acerca .section-title{ transform: translateX(-150px); }

/* mueve el texto */
#acerca .about-text-only{ transform: translateX(-150px); }

/* Columna de texto */
#acerca .about-text-only{
  color: #e5e7eb;
  max-width: 68ch;             /* ancho cómodo de lectura */
}
#acerca .about-text-only h2{
  margin: 0 0 clamp(10px, 1.8vw, 16px);
  font-weight: 800;
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.05;
  color: #fff;
  letter-spacing: .2px;
}
#acerca .about-text-only p{
  margin: 0;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.7;
  color: #d6d7db;
}
#acerca .about-actions{
  margin-top: clamp(16px, 2.4vw, 26px);
}
#acerca .about-actions .btn.secondary{
  background:#fff;
  border-color:#f4c6cc;
  color:#f62f42;
}
#acerca .about-actions .btn.secondary:hover{
  background:#f62f42;
  color:#fff;
  border-color:#f62f42;
}

/* Responsive: una sola columna con la imagen arriba */
@media (max-width: 960px){
  #acerca .about-two-col{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  #acerca .about-text-only{
    max-width: 70ch;
  }
  #acerca .about-photo img{
    max-width: 580px;
    margin-inline: auto;       /* centra la imagen en móvil/tablet */
  }
}

/*NOMBRE UBICACIONES*/
/* Etiquetas de los puntos en el mapa */
#map .leaflet-tooltip.map-label{
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .15px;
  text-shadow: 0 1px 2px rgba(0,0,0,.75);
  padding: 0;         /* sin fondo ni borde */
}

/* Contener el scroll (evita que la página “ruede” mientras usas la rueda en el mapa) */
#map{ position:relative; overscroll-behavior:contain; }

/* Pista visual para el zoom con Shift */
.ctrl-zoom-hint{
  position:absolute; left:12px; bottom:12px;
  background:rgba(17,17,17,.75); color:#fff;
  padding:8px 10px; border-radius:8px;
  font:600 .9rem/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  pointer-events:none; opacity:.9;
}

/* Estilo de las etiquetas fijas de los marcadores */
#map .leaflet-tooltip.map-label{
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .15px;
  text-shadow: 0 1px 2px rgba(0,0,0,.75);
  padding: 0;
}

/* Tamaño de los botones del HERO */
.hero .btn{
  padding: 10px 18px;   /* ↑ alto | ←→ ancho */
  font-size: .9rem;   /* texto un poco más grande */
  border-width: 2px;    /* grosor del borde */
}
.hero .btn i{           /* icono un pelín mayor */
  font-size: 1.1em;
}

/* En móvil, baja un poco el tamaño para que no se vean enormes */
@media (max-width: 640px){
  .hero .btn{
    padding: 14px 22px;
    font-size: .98rem;
  }
}

/* Botón de contacto del NAV con el mismo estilo del hero */
nav .nav-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:1px 20px;                /* igual que .btn del hero */
  border:1px solid var(--primary);
  border-radius:40px;
  background:var(--primary);
  color:#fff !important;
  font-weight:500;
  letter-spacing:.2px;
  box-shadow:0 8px 18px rgba(246,47,66,.25);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Quitar la línea inferior de los links del nav en este botón */
nav .nav-cta::after{ content:none; }

nav .nav-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(246,47,66,.3);
  background:var(--primary-dark);
}

/* (opcional) un pelín más compacto en pantallas chicas */
@media (max-width: 992px){
  nav .nav-cta{ padding:10px 18px; font-size:.95rem; }
}

/* Bloque del icono dentro del card de contacto */
.contact-card .contact-badge{
  display:flex;
  justify-content:center;
  align-items:center;
  padding-top: 18px;          /* separa del “Horario” */
  margin-top: 12px;
}

.contact-card .contact-badge img{
  max-width: 250px;  /* ancho máximo del png */
  width: 150%;       /* responde al contenedor */
  height: auto;      /* mantiene proporción */
  object-fit: contain;
  image-rendering: auto;
  opacity: .95;      /* opcional: look suave */
}

/* Intro del card de contacto (párrafo largo) */
.contact-card .contact-intro{
  text-align: left;
  color: #4b4b4b;
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 56ch;           /* ancho de línea cómodo */
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #e9e9e9;
  hyphens: auto;             /* cortes elegantes si hiciera falta */
  overflow-wrap: anywhere;   /* evita desbordes por palabras largas */
}

/* Opcional: un poco menos de “aire” arriba en la 1ª fila tras el intro */
.contact-card .info-row:first-of-type{
  padding-top: 10px;
}

.contact-card .contact-kicker{
  text-transform: uppercase;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--primary);
  margin-bottom: 6px;
  opacity: .9;
}

/* ===== POLISH GLOBAL ===== */
:root{
  --container: 1240px;              /* ancho base (ligeramente mayor) */
  --radius: 16px;
  --elev: 0 12px 30px rgba(17,17,17,.08);
  --elev-soft: 0 8px 18px rgba(17,17,17,.06);
  --ease: cubic-bezier(.2,.8,.2,1);
}

.container{ max-width: var(--container); }

/* Header: vidrio sutil al hacer scroll */
header.scrolled{
  backdrop-filter: saturate(1.2) blur(6px);
  background: rgba(255,255,255,.86);
  border-bottom-color: rgba(0,0,0,.06);
}

/* Titulares y ritmo vertical */
.section-title h2{
  letter-spacing:.2px; font-weight:800;
}
section + section{ padding-top: 72px; }

/* Botones: micro-interacción más suave */
.btn{
  transform: translateZ(0);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn:hover{ transform: translateY(-2px); }

/* Cards más “premium” */
.card,.media-card{
  border-radius: var(--radius);
  box-shadow: var(--elev-soft);
}
.card:hover,.media-card:hover{
  box-shadow: var(--elev);
  transform: translateY(-6px);
}

/* ===== SCROLL REVEAL (animaciones sutiles al entrar) ===== */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible{ opacity:1; transform: none; }
.reveal-delay-1{ transition-delay: .08s; }
.reveal-delay-2{ transition-delay: .16s; }
.reveal-delay-3{ transition-delay: .24s; }

/* ===== HERO refinado ===== */
.hero{ padding-top: 200px; padding-bottom: 96px; }
.hero h1{ line-height:1.05; letter-spacing:.2px; }
.hero .hero-meta{ color:#6b7280; letter-spacing:.5em; }

/* ===== GRID de clientes más sólido y centrado ===== */
#clientes .logo-grid{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: 26px; align-items:center; justify-items:center;
  max-width: 1100px; margin-inline:auto;
}
#clientes .logo-grid > *{
  display:grid; place-items:center;
  width: 220px; height: 92px;              /* “slot” fijo por marca */
  padding: 10px 14px;
  border: 1px dashed #eee; border-radius: 12px;  /* guía sutil de alineación */
}
#clientes .logo-grid img{
  max-width: 100%; max-height: 64px; object-fit: contain;
  filter: grayscale(100%) contrast(110%); opacity:.9;
  transition: filter .2s, opacity .2s, transform .2s;
}
#clientes .logo-grid img:hover{ filter: none; opacity:1; transform: translateY(-2px); }

@media (max-width: 1024px){ #clientes .logo-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px){
  #clientes .logo-grid{ grid-template-columns: repeat(2,1fr); }
  #clientes .logo-grid > *{ width: 48vw; }
}

/* ===== SOCIOS: grid + tamaños por logo con variables ===== */
#socios .logo-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 22px;
  justify-items: center;
  align-items: center;
}

/* Cada logo vive dentro de una “caja” (slot) para alinear */
#socios .logo{
  /* valores por defecto si no defines variables en el HTML */
  --slot-w: 220px;
  --slot-h: 92px;
  --img-h: 80px;

  width: var(--slot-w);
  height: var(--slot-h);
  padding: 12px;
  border-radius: 12px;              /* opcional */
  display: grid;
  place-items: center;
  background: transparent;
}

/* El logo en sí respeta el alto que le pongas */
#socios .logo img{
  max-height: var(--img-h);
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) contrast(110%);
  opacity: .9;
  transition: filter .2s, opacity .2s, transform .2s;
}

#socios .logo img:hover{
  filter: none;
  opacity: 1;
  transform: translateY(-2px);
}

/* Responsive: ajusta la densidad en pantallas chicas */
@media (max-width: 640px){
  #socios .logo-grid{ gap: 16px; }
  #socios .logo{
    --slot-w: 46vw;      /* cajas más anchas relativas */
    --slot-h: 84px;
  }
}

/* ===== Shine visible y sutil en los logos de SOCIOS ===== */
#socios .logo{
  position: relative;
  overflow: hidden;
}

/* Barrita de luz encima del logo (estrecha y translúcida) */
#socios .logo::after{
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -45%;
  /* ancho de la banda de luz */
  width: 46%;
  /* gradiente diagonal MUY sutil */
  background: linear-gradient(
    110deg,
    rgba(255, 0, 0, 0) 0%,
    rgba(255, 255, 255, 0.492) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-12deg);
  animation: sociosShine 3.8s linear infinite;
  z-index: 4;             /* 👈 por ENCIMA de la imagen */
  pointer-events: none;
  opacity: .99;           /* sutil, ajústalo si quieres más/menos */
  will-change: transform, left;
}

/* La imagen queda debajo de la banda (por claridad) */
#socios .logo img{ position: relative; z-index: 1; }

/* Animación: de izquierda a derecha */
@keyframes sociosShine{
  0%   { left: -35%; }
  100% { left: 135%; }
}

/* Desfase entre logos para que no brillen a la vez */
#socios .logo:nth-child(3n+1)::after{ animation-delay: 0s; }
#socios .logo:nth-child(3n+2)::after{ animation-delay: .7s; }
#socios .logo:nth-child(3n+3)::after{ animation-delay: 1.4s; }

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  #socios .logo::after{ animation: none; opacity: 0; }
}

/* Sin fondo, sin borde redondeado, sin sombra, menos padding */
#socios .logo{
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;        /* 👉 clave para que el brillo no se vea fuera del logo */
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
#socios .logo img{
  display:block;
  max-height: var(--img-h);
  max-width: 100%;
  width:auto; height:auto;
}

/* ===== Scroll Reveal ===== */
.reveal{
  opacity: 0;
  transform: translateY(22px) scale(.98);
  filter: blur(2px);
  transition:
    opacity .6s ease,
    transform .6s ease,
    filter .6s ease;
  transition-delay: var(--d, 0s);   /* usa --d para escalonar */
  will-change: opacity, transform, filter;
}
.reveal.show{
  opacity: 1;
  transform: none;
  filter: none;
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform:none; filter:none; transition:none; }
}

/* ====== Simulación Virtual (look del mock) ====== */
.sv-section{
  font-family: "Helvetica Now Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #000000;              /* negro cálido */
  position: relative;
  padding: clamp(60px, 8vw, 100px) 0;
  color: #f3f4f6;
  overflow: hidden;                  /* para el motivo de puntos */
}

/* Motivo de puntos rojos a la derecha */
.sv-section::after{
  content:"";
  position:absolute; inset:auto -15% -15% 55%;
  pointer-events:none;
  /* nube de puntos degradada */
  background:
    radial-gradient(circle at 70% 40%, rgba(246,47,66,.78), rgba(246,47,66,.35) 40%, transparent 70%) 0 0 / 40% 40% no-repeat,
    radial-gradient(circle, rgba(246,47,66,.12) 2px, transparent 2px) 0 0 / 22px 22px;
  filter: blur(.2px) saturate(1.05);
  opacity:.35;
  transform: rotate(-18deg) translateY(8%);
}

/* Título */
.sv-title{
  font-family: "Helvetica Now Text", system-ui;
  font-weight: 600;
  font-size: clamp(32px, 5vw, 70px);
  line-height: 1.05;
  margin: 0 0 clamp(24px,3vw,40px);
  color:#ffffff;
  letter-spacing:-.02em;
}
.sv-title b{
  font-family: "Helvetica Now Text", system-ui;
  font-weight: 800;
  color:#f62f42;
}

/* Grid 2 columnas */
.sv-wrap{ max-width: 1280px; }
.sv-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 980px){
  .sv-grid{ grid-template-columns: 1fr; }
}

/* Card */
.sv-card{
  position:relative;
}
.sv-hero{
  margin:0;
  border-radius: 28px;
  overflow:hidden;
  background:#0b0d11;
  outline:1px solid rgba(255,255,255,.05);
}
.sv-hero img{
  display:block; width:100%; height: clamp(140px, 28vw, 340px);
  object-fit: cover;
  filter: contrast(1.02) saturate(1.02);
}

/* Dispositivo flotante */
.sv-float{
  position:absolute;
  left: -60px;;
  transform: translateY(60%);           /* que “cuelgue” del borde inferior */
  width: clamp(140px, 24%, 220px);      /* tamaño relativo a la card */
  height:auto;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.45));
  pointer-events:none;
}

/* Título y párrafo bajo cada card */
.sv-caption{ margin: top 8px;; }
.sv-h{
  margin: top 8px;;
  font-weight:700;
  color:#f62f42;
  font-size: clamp(25px, 2.6vw, 35px);
  text-align: left;
}
.sv-p{
  margin-bottom: 6px;
  color:#ffffff;
  max-width: 96ch;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
}
.sv-p strong{ color:#fff; font-weight: 800; }

/* Ajustes responsivos para la flotante en mobile */
@media (max-width: 640px){
  .sv-float{ width: 46%; transform: translateY(40%); }
}

/* ACTIVAS MODO COMPACTO SOLO DONDE LO PONGAS */
.sv-section.sv-compact{
  padding: clamp(36px, 5vw, 64px) 0;   /* menos alto */
}

.sv-section.sv-compact .sv-title{
  font-size: clamp(28px, 4vw, 48px);
  margin-bottom: clamp(16px, 2.2vw, 28px);
}

.sv-section.sv-compact .sv-grid{
  gap: clamp(16px, 2.6vw, 32px);
}

.sv-section.sv-compact .sv-hero img{
  height: clamp(200px, 22vw, 280px);   /* imagen principal más baja */
}

.sv-section.sv-compact .sv-float{
  left: 10px;                         /* ajusta si quieres que salga menos */
  transform: translateY(-55%);
  width: clamp(180px, 18%, 220px);     /* flotante más chica */
}

.sv-section.sv-compact .sv-caption{
  margin-top: clamp(90px, 2.4vw, 90px);/* menos aire bajo la imagen */
}

.sv-section.sv-compact .sv-h{
  font-size: clamp(24px, 1.2vw, 24px);
}

.sv-section.sv-compact .sv-p{
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.5;
}

/* ---- Simulación Virtual: reducir ancho del media ---- */
#simulacion-virtual .sv-hero{
  /* ajusta el ancho visible de la imagen */
  width: clamp(360px, 85%, 420px);   /* ← prueba 80–90% a tu gusto */
  margin-left: 0;                    /* o auto para centrar */
}

/* la imagen rellena el nuevo ancho sin deformarse */
#simulacion-virtual .sv-hero img{
  width: 100%;
  height: clamp(180px, 22vw, 260px); /* mantén/ajusta la altura si quieres */
  object-fit: cover;
}

#simulacion-virtual .sv-caption{ text-align: leftr;}
#simulacion-virtual .sv-hero{ margin-inline: auto;}

@media (max-width: 768px){
  #simulacion-virtual .sv-caption{ text-align:center; }
}

/* MISMO ancho y centrado para imagen y texto */
#simulacion-virtual .sv-hero,
#simulacion-virtual .sv-caption{
  width: min(420px, 100%);   /* ajusta 520–600px a tu gusto */
  margin-inline: auto;       /* centra en su columna */
}

/* En móvil, deja que ocupen todo el ancho de la columna */
@media (max-width: 640px){
  #simulacion-virtual .sv-hero,
  #simulacion-virtual .sv-caption{ width: 100%; }
}

/* 1) Más aire entre el TÍTULO y las imágenes */
#simulacion-virtual .sv-title{
  margin-bottom: clamp(36px, 6vw, 80px);  /* súbelo/bájalo a tu gusto */
}

/* 2) Menos espacio entre las DOS imágenes (cards) */
#simulacion-virtual .sv-grid{
  gap: clamp(2px, 1.5vw, 8px);   /* antes 28–56px; ahora más compacto */
}

/* Si en desktop quieres todavía menos, fija un valor pequeño ahí */
@media (min-width: 1020px){
  #simulacion-virtual .sv-grid{ gap: 0px; }  /* prueba 16–24px */
}

/* Solapa un poco la segunda card sobre la primera */
#simulacion-virtual .sv-card + .sv-card{
  margin-left: -40px;        /* -6 a -14px según te guste */
}

#simulacion-virtual .sv-grid + .sv-grid{
  margin-right: -40px;        /* -6 a -14px según te guste */
}

/* Simulación Virtual – acercar texto a la imagen */
#simulacion-virtual .sv-caption{
  margin-top: 70px;                /* antes: clamp(120px, 5vw, 48px) */
}

#simulacion-virtual .sv-h{         /* título bajo la card */
  margin-bottom: 6px;              /* antes eran ~8px */
}

#simulacion-virtual .sv-p{         /* párrafo */
  margin-top: 0;                   /* elimina separación extra */
}

/* En móvil deja un poquito más de aire si lo prefieres */
@media (max-width: 640px){
  #simulacion-virtual .sv-caption{ margin-top: 20px; }
}

/* Simulación Virtual: misma distancia arriba y abajo del título */
#simulacion-virtual.sv-section{
  --sv-lead-gap: clamp(40px, 6vw, 80px);   /* controla AMBOS espacios */
  padding-top: var(--sv-lead-gap);         /* borde superior → título */
}

#simulacion-virtual .sv-title{
  margin: 0 0 var(--sv-lead-gap);          /* título → imágenes */
}

/* 1) Menos alto general del fondo negro */
#simulacion-virtual.sv-section{
  /* antes: clamp(60px, 8vw, 100px) */
  padding-top: clamp(24px, 4vw, 48px);
  padding-bottom: clamp(24px, 4vw, 48px);
}

/* 2) Título más cerca de las cards */
#simulacion-virtual .sv-title{
  /* antes lo tenías más grande */
  margin-bottom: clamp(20px, 3vw, 36px);
}

/* 4) (Opcional) Baja un poco la altura de la imagen grande para compactar más */
#simulacion-virtual .sv-hero img{
  /* antes: clamp(240px, 28vw, 340px) */
  height: clamp(200px, 22vw, 300px);
}

/* Responsive: aún más compacto en móvil */
@media (max-width: 640px){
  #simulacion-virtual.sv-section{
    padding-top: 20px;
    padding-bottom: 28px;
  }
  #simulacion-virtual .sv-title{ margin-bottom: 20px; }
  #simulacion-virtual .sv-caption{ margin-top: 16px; }
}

/* ===== ACERCA: metric cards ===== */
.about-stats-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.stat-card{
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e8e8e8);
  border-radius: 18px;
  box-shadow: var(--shadow, 0 10px 22px rgba(17,17,17,.06));
  padding: 18px 22px;
  text-align: center;
}

.stat-value{
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 22px);   /* similar al look del ejemplo */
  color: var(--text, #111);
  line-height: 1.2;
}

.stat-label{
  margin-top: 10px;
  color: #f62f42;                         /* gris suave */
  font-weight: 700;
}

.stat-sub{
  margin-top: 10px;
  color: #f62f42;
  font-weight: 700;
}

/* Responsive: a 1 columna en pantallas chicas */
@media (max-width: 640px){
  .about-stats-cards{ grid-template-columns: 1fr; }
}


/* Layout con el título a la izquierda, texto a la derecha */
#conocenos .about-grid.about-grid--title-left{
  display: grid;
  grid-template-columns: minmax(340px, 1fr) 1.05fr; /* izq / der */
  grid-template-areas:
    "title text"
    "media text";
  gap: 26px 40px;        /* filas / columnas */
  align-items: start;
}

/* Ubicaciones en la grilla */
#conocenos .about-title{ grid-area: title; margin: 0; }
#conocenos .about-media{ grid-area: media; }
#conocenos .about-text { grid-area: text; }

/* Video más compacto, bordes suaves */
#conocenos .about-video{
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow, 0 8px 22px rgba(0,0,0,.08));
  /* altura adaptable pero controlada para que “dialogue” con el texto */
  max-height: clamp(280px, 42vh, 420px);
}
#conocenos .about-video video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#conocenos .about-caption{
  color:#6b6b6b; font-size:.92rem; text-align:center; margin-top:8px;
}

/* Texto a la derecha, tipografía cómoda */
#conocenos .about-lead{
  font-size: clamp(1rem, 1.05vw, 1.12rem);
  line-height: 1.6;
  margin: 6px 0 12px;
}

/* Checklist sin espacios “extras” */
#conocenos .about-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
#conocenos .about-list--compact li{
  display: grid;
  grid-template-columns: 22px 1fr; /* icono + texto */
  gap: 10px;
  align-items: start;
  padding: 6px 0;                  /* casi sin separación */
  border-bottom: 1px dashed #eee;  /* si no lo quieres, bórralo */
}
#conocenos .about-list--compact li:last-child{ border-bottom: none; }
#conocenos .about-list--compact i{
  color: var(--primary, #f62f42);
  margin-top: 3px;
}

/* CTAs alineadas como en tu estilo */
#conocenos .about-cta{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Responsivo: apilar y que el título quede arriba */
@media (max-width: 980px){
  #conocenos .about-grid.about-grid--title-left{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "media"
      "text";
    gap: 18px;
  }
  #conocenos .about-video{ max-height: none; }
}

#conocenos .about-grid.about-grid--title-left{ --txt-offset: 56px; }

@media (min-width: 981px){
  #conocenos .about-text{ margin-top: var(--txt-offset); }
}

/* Título grande solo en la sección Conócenos */
#conocenos h2{
  font-weight: 1000;
  font-size: clamp(2rem, 3vw, 3rem); /* ↑ ajusta aquí */
  line-height: 1;
  letter-spacing: .2px;
  margin-bottom: .4rem; /* opcional: separa del párrafo */
}

/* Si el h2 está dentro de .about-text, puedes ser aún más específico */
#conocenos .about-text h2{
  font-size: clamp(2rem, 4.8vw, 3.2rem);
}

/* ===== Tiles compactos ===== */
.solu-tiles{
  --ink:#0f172a;
  --muted:#64748b;
  --surface:#fff;               /* si usas tema oscuro, cambia a transparente */
  --border:rgba(2,6,23,.10);
  --radius:14px;
  --gap: clamp(12px,2vw,18px);
  --img-ratio: 16/10;           /* altura de imagen contenida */
  --chip-bg:#f62f42;

  padding: clamp(24px,5vw,64px) 0;
  color: var(--ink);
}
.solu-tiles .section-title p{ color: var(--muted); }

/* Grid 3/2/1 columnas, muy compacto */
.solu-tiles .tiles{
  list-style:none; padding:0; margin:0;
  display:grid; gap: var(--gap);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width:1024px){
  .solu-tiles .tiles{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .solu-tiles .tiles{ grid-template-columns: 1fr; }
}

/* Tarjeta */
.solu-tiles .tile{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: clip;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  box-shadow: 0 8px 22px rgba(17,17,17,.06);
}
.solu-tiles .tile:hover{
  transform: translateY(-2px);
  border-color: rgba(2,6,23,.18);
  box-shadow: 0 12px 28px rgba(17,17,17,.10);
}

/* Media siempre visible (relación fija) */
.solu-tiles .tile-media{
  margin:0; position:relative; background:#0b0d11;
  aspect-ratio: var(--img-ratio);
  overflow:hidden;
}
.solu-tiles .tile-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.04);
  filter: saturate(1.05) contrast(1.04);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .25s;
}
.solu-tiles .tile:hover .tile-media img{ transform: scale(1.08); }

/* Chip de categoría, pequeño y legible */
.solu-tiles .chip{
  position:absolute; left:10px; bottom:10px;
  background: var(--chip-bg);
  color:#fff; font-weight:800; letter-spacing:.2px;
  font-size:.78rem; padding:6px 10px; border-radius:999px;
}

/* Texto corto, compacto */
.solu-tiles .tile-body{
  padding: 10px 10px 10px;
}
.solu-tiles .tile-body h3{
  margin:0 0 4px;
  font-size: clamp(16px,1.7vw,18px);
  line-height:1.25;
}
.solu-tiles .tile-body p{
  margin:0; color: var(--muted);
  font-size: clamp(13px,1.5vw,15px);
  line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; /* 2 líneas máx */
}

/* Variante aún más compacta (opcional):
.solu-tiles{ --img-ratio: 16/9; }
.solu-tiles .tile-body{ padding: 8px 10px 10px; }
.solu-tiles .tile-body h3{ font-size: 16px; }
.solu-tiles .tile-body p{ font-size: 13px; }
*/

/* Centrar la última fila (solo en desktop: 3 columnas) */
@media (min-width: 1025px){
  .solu-tiles .tiles{
    grid-template-columns: repeat(3, minmax(0,1fr)); /* asegurar 3 cols */
  }
  /* Toma las 2 últimas cards y colócalas en las columnas 1 y 3 */
  .solu-tiles .tiles > .tile:nth-last-child(2){
    grid-column: 1 / 2;
  }
  .solu-tiles .tiles > .tile:last-child{
    grid-column: 3 / 4;
  }
}

/* Centrar la última fila como pareja (ambas centradas) */
@media (min-width: 1025px){
  .solu-tiles .tiles{
    /* 6 columnas = 3 cards por fila (cada card ocupa 2) */
    grid-template-columns: repeat(6, 1fr);
  }
  /* cada card ocupa 2 columnas por defecto */
  .solu-tiles .tile{
    grid-column: span 2;
  }
  /* coloca las dos últimas centradas: columnas 2–3 y 4–5 */
  .solu-tiles .tiles > .tile:nth-last-child(2){
    grid-column: 2 / span 2;
  }
  .solu-tiles .tiles > .tile:last-child{
    grid-column: 4 / span 2;
  }
}

/* ===== Solu tiles: compactar tarjetas y abrir espacios ===== */
.solu-tiles{
  --gap: clamp(16px, 2.4vw, 28px);   /* más espacio entre tarjetas */
  --img-ratio: 16/9;                 /* imagen un pelín más “baja” (menos alto) */
}

/* Tarjeta un poco más pequeña visualmente */
.solu-tiles .tile{
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(17,17,17,.05);
}

/* En desktop: reduce el ancho útil de cada celda para crear aire lateral */
@media (min-width: 1025px){
  .solu-tiles .tile{
    width: 150%;                  /* 👈 deja “margen” dentro de cada columna */
    justify-self: center;
  }
}

/* Texto y padding compactos */
.solu-tiles .tile-body{
  padding: 8px 10px 10px;        /* antes ~10-12px */
}
.solu-tiles .tile-body h3{
  font-size: clamp(15px, 1.5vw, 17px);
  margin-bottom: 3px;
}
.solu-tiles .tile-body p{
  font-size: clamp(12.5px, 1.4vw, 14px);
  line-height: 1.4;
}

/* Chip más discreto */
.solu-tiles .chip{
  font-size: .72rem;
  padding: 5px 9px;
  bottom: 8px; left: 8px;
}

/* Hover más suave */
.solu-tiles .tile:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(17,17,17,.08);
}
.solu-tiles .tile:hover .tile-media img{
  transform: scale(1.06);
}

/* === Desktop: 3 columnas visibles (6 tracks) + filas con altura uniforme === */
@media (min-width: 1025px){
  .solu-tiles{ 
    --gap: clamp(18px, 2.2vw, 30px);   /* aire entre tarjetas */
  }

  .solu-tiles .tiles{
    /* 6 columnas = 3 cards por fila (cada card ocupa 2) */
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    column-gap: var(--gap) !important;
    row-gap: var(--gap) !important;     /* 👈 mismo gap vertical y horizontal */
    align-items: stretch;                /* estira la celda; la card llenará con height:100% */
  }

  /* Cada card ocupa 2 columnas y se “autoestira” para igualar altura de fila */
  .solu-tiles .tile{
    grid-column: span 2;
    height: 100%;                        /* llena la altura de la pista */
    width: 92%;                          /* un pelín más angosta para más aire lateral */
    justify-self: center;
    display: flex; flex-direction: column;
  }

  /* Media con altura consistente; texto flexible pero con mínimo */
  .solu-tiles .tile-media{ aspect-ratio: 16 / 9; }
  .solu-tiles .tile-body{
    flex: 1 1 auto;                      /* empuja a igualar la altura total */
    display: flex; flex-direction: column; justify-content: flex-start;
    min-height: 90px;                    /* 👈 sube/baja si alguna card “se queda corta” */
    padding: 8px 10px 10px;              /* compacto */
  }

  /* Centrar la última fila como pareja */
  .solu-tiles .tiles > .tile:nth-last-child(2){ grid-column: 2 / span 2; }
  .solu-tiles .tiles > .tile:last-child{      grid-column: 4 / span 2; }
}


/* Hero: título más pequeño */
.hero h1{
  font-size: clamp(1.2rem, 2.4vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: .01em;
}

/* (opcional) un poco más chico en pantallas muy pequeñas */
@media (max-width: 380px){
  .hero h1{ font-size: clamp(1.4rem, 4.8vw, 2rem); }
}

/* Ken Burns en thumbs */
.media-thumb > img,
.card .thumb > img {
  transform: scale(1) translateZ(0);
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.media-card:hover .media-thumb > img,
.card:hover .thumb > img {
  transform: scale(1.06) translateY(-2%);
}

:root{
  /* Fallback por si aún no hemos calculado el header en JS */
  --header-h: 88px; /* ajusta si tu header es más alto/bajo */
}

/* Sube todo el contenido del hero sin tocar layout */
#inicio .container{
  transform: translateY(-55px); /* prueba -20, -28, -36… */
}


/* El hero SIEMPRE cubre la VENTANA visible, restando el header fijo */
#inicio.hero{
  min-block-size: calc(118svh - var(--header-h));  /* usa svh para móvil */
  display: flex;
  align-items: center;   /* centra verticalmente su contenido */
}

/* Ajusta el padding superior (ya no necesitamos tanto) */
#inicio.hero{
  padding-top: clamp(300px, 10vh, 260px);
  padding-bottom: 105px;   /* puedes bajar/subir este valor si hace falta */
}


/************************* FONDO POR SECCIONES ******************************/
#inicio{
  position: relative;
  overflow: hidden;                  /* recorta el fondo al tamaño de la sección */
}

/* Capa de fondo propia del #inicio */
#inicio::before{
  content: "";
  position: absolute;
  inset: 0;                          /* cubre toda la sección */
  z-index: -1;                       /* detrás del contenido */
  background-image: url('/ZionCorp/images/backg2.png');
  background-size: cover;
  background-position: -315px -180px;/* ajusta a tu gusto */
  background-repeat: no-repeat;
  /* IMPORTANTE: sin background-attachment */
}

/* Fondo para sección Hero/Inicio - POSICIÓN PERSONALIZABLE */
#conocenos{
  position: relative;
  overflow: hidden;                  /* recorta el fondo al tamaño de la sección */
}

/* Capa de fondo propia del #inicio */
#conocenos::before{
  content: "";
  position: absolute;
  inset: 0;                          /* cubre toda la sección */
  z-index: -1;                       /* detrás del contenido */
  background-image: url('');
  background-size: cover;
  background-position: -1000px -180px;/* ajusta a tu gusto */
  background-repeat: no-repeat;
  /* IMPORTANTE: sin background-attachment */
}

/* ——— HERO: fondo centrado en la sección ——— */
/* iOS / móvil: evita saltos con fixed */
@supports (-webkit-overflow-scrolling: touch) {
  #inicio { background-attachment: scroll; }
}
@media (max-width: 768px){
  #inicio { background-attachment: scroll; }
}

/* ——— Título un “poco” más grande sin moverlo ——— */
/* (solo sube límites de clamp ligeramente) */
.hero h1{
  font-size: clamp(2rem, 3.4vw, 2.4rem); /* antes 2–3.2 */
  line-height: 1.05;
}

/* ——— Kicker más pegado al título ——— */
/* elimina los <br> y controla con margen */
.hero .kicker{ margin-bottom: .5rem; }   /* estaba ~.9rem */
.hero h1{ margin-top: 4; }

/* ——— Correo en la esquina inferior derecha del hero ——— */
.hero .hero-meta{
  position: absolute;                     /* referencia: #inicio (relative) */
  right: clamp(-40px, 4vw, -40px);
  bottom: clamp(-140px, 3vw, -180px);
  margin: 0;                              /* ignora márgenes previos */
  text-align: right;
  color:#8b8b8b;
}


/* En pantallas chicas, vuelve a flujo normal debajo del título/botones */
@media (max-width: 640px){
  .hero .hero-meta{
    position: static;
    margin-top: 8px;
    text-align: left;
  }
}

/* ——— (Opcional) micro-nudge si lo ves 2–4px desalineado al ojo ——— */
/* descomenta y ajusta si quieres
#inicio .container{ transform: translateY(-2px); }
*/

.hero .hero-meta{
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(4px);
  padding: 6px 10px;
  border-radius: 999px;
}

.hero .cta-row{
  margin-top: clamp(28px, 5vh, 96px) !important; /* vence el inline */
}
@media (max-width: 640px){
  .hero .cta-row{ margin-top: 22px !important; }
}

/* 1) Quitar la línea bajo “AUTOMATION FACTORY” */
#inicio .kicker::after{
  content: none !important;         /* elimina la línea decorativa */
}

/* 2) Quitar el interletrado del correo */
#inicio .hero-meta,
#inicio .hero-meta a{
  letter-spacing: normal !important; /* sin tracking extra */
}

/* 3) Bajar más los botones */
#inicio .cta-row{
  margin-top: clamp(48px, 6vh, 120px) !important;
}
@media (max-width: 640px){
  #inicio .cta-row{ margin-top: 28px !important; }
}

/*ESTILO DE CONTACTO-FORMULARIO*/
/* Honeypot oculto para humanos */
.hp-wrap {
  position: absolute !important;
  left: -10000px !important;
  width: 1px; height: 1px; overflow: hidden;
}
.form-msg { font-size: .95rem }
.form-msg.ok { color: #16a34a }      /* verde */
.form-msg.err { color: #ff0404 }     /* rojo  */

/*NUEVO ESTILO PARA SECCION CONOCENOS*/
/* ===== Conócenos: grid con TÍTULO sobre el texto (columna derecha) ===== */
#conocenos .about-grid.about-grid--title-left{
  display: grid;
  grid-template-columns: minmax(340px, 1fr) 1.05fr;   /* izquierda: media | derecha: texto */
  grid-template-areas:
    "media title"   /* fila 1: video | título a la derecha */
    "media text"    /* fila 2: video | texto+botones */
    "features features";  /* fila 3: mini-cards ocupan el ancho de ambas columnas */
  gap: 26px 40px;
  align-items: start;
}

/* Colocación por áreas */
#conocenos .about-media   { grid-area: media; }
#conocenos .about-text    { grid-area: text; }
#conocenos .about-title   { grid-area: title; margin: 0; }
#conocenos .about-features{ grid-area: features; grid-column: 1 / -1; } /* abarcar ambas columnas */

/* Tipografía y ritmo del texto */
#conocenos .about-title{
  font-weight: 1000;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1;
  letter-spacing: .2px;
  margin-bottom: .4rem;
}
#conocenos .about-lead{ 
  color:#4b4b4b; 
  font-size:1.06rem; 
  line-height:1.65; 
}
#conocenos .about-lead + .about-lead{ margin-top: 10px; } /* separa los dos párrafos */

/* Más espacio del texto a los botones y entre botones */
#conocenos .about-cta{
  margin-top: 22px;       /* ↑ más espacio entre texto y botones */
  display: flex;
  gap: 16px;              /* ↑ más espacio entre botones */
  flex-wrap: wrap;
}

/* ===== Mini-cards ===== */
#conocenos .about-features{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));  /* tres columnas iguales */
  gap: 18px;
  margin-top: 6px;
}
#conocenos .feat-card{
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e8e8e8);
  border-radius: 14px;
  box-shadow: var(--shadow, 0 10px 22px rgba(17,17,17,.06));
  padding: 18px 18px 16px;
  transition: transform .18s var(--ease, ease), box-shadow .18s var(--ease, ease), border-color .18s;
}
#conocenos .feat-card:hover{
  transform: translateY(-4px);
  border-color:#e2e2e2;
  box-shadow:0 14px 30px rgba(17,17,17,.08);
}
#conocenos .feat-ico{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:10px; background:#fff5f6; border:1px solid #ffe0e4; margin-bottom:10px;
}
#conocenos .feat-ico i{ color: var(--primary, #f62f42); font-size:1.1rem; }
#conocenos .feat-title{ margin:0 0 4px; font-weight:800; font-size:1.02rem; letter-spacing:.2px; }
#conocenos .feat-text{ margin:0; color:#6b7280; font-size:.98rem; line-height:1.55; }

/* Responsive */
@media (max-width: 980px){
  #conocenos .about-grid.about-grid--title-left{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "media"
      "text"
      "features";
    gap: 18px;
  }
}
@media (max-width: 900px){
  #conocenos .about-features{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  #conocenos .about-features{ grid-template-columns: 1fr; }
}

/* Más aire entre el bloque de mini-cards y lo de arriba */
#conocenos .about-features{
  margin-top: clamp(20px, 4vw, 50px);   /* ajusta 28–60px a tu gusto */
}

/* Si en pantallas chicas quieres un poco menos */
@media (max-width: 980px){
  #conocenos .about-features{
    margin-top: clamp(18px, 3vw, 28px);
  }
}

/* ===== Conócenos: subir título + texto + botones (columna derecha) ===== */
#conocenos{
  padding-top: 80px;                  /* menos aire arriba de la sección (antes ~88px) */
}

#conocenos .about-text{
  margin-top: -111px;                  /* levanta TÍTULO+PÁRRAFOS+BOTONES */
}

/* Espacio entre párrafos y entre texto y botones */
#conocenos .about-lead + .about-lead{
  margin-top: 15px;                   /* separación entre los 2 párrafos */
}
#conocenos .about-cta{
  margin-top: 80px;                   /* más aire del texto a los botones */
  gap: 20px;                          /* más aire entre botones */
}

/* En pantallas chicas, no lo subas tanto para que no se amontone */
@media (max-width: 980px){
  #conocenos .about-text{ margin-top: -10px; }
}
@media (max-width: 640px){
  #conocenos{ padding-top: 42px; }
  #conocenos .about-text{ margin-top: 0; } /* natural en móvil */
}

@media (min-width: 981px){
  #conocenos .about-cta{
    transform: translateY(-25px); /* prueba -4px a -10px */
  }
}

:root{
  --body-size: 16px;      /* tamaño único para todo el cuerpo de texto */
  --body-line: 1.65;      /* alto de línea coherente */
}

/* Fuente base */
html{ font-size: 16px; }   /* asegura que 1rem = 16px */
body{
  font-size: var(--body-size);
  line-height: var(--body-line);
}

/* Subir SOLO el título "Conócenos" */
#conocenos .about-title{
  position: relative;              /* para asegurar buen stacking si hay solapes */
  transform: translateY(-22px);    /* ajusta -12 / -18 / -28 px a tu gusto */
  will-change: transform;
  z-index: 1;                       /* opcional: por si quedara debajo del video */
}

/* En pantallas chicas, deja el título en su lugar */
@media (max-width: 980px){
  #conocenos .about-title{
    transform: none;
  }
}

/* Unifica tamaño de texto de párrafo en TODAS las secciones */
p,
li,
dd,
dt,
blockquote,
small,
label,
.table,
.footer-col p,
.contact-intro,
.media-body p,
.card p,
.sv-p,
.about-body p,
#conocenos .about-lead,
#conocenos .about-text p,
#soluciones .solu-slide p,
#proyectos .media-body p {
  font-size: 1rem !important;      /* = 16px */
  line-height: var(--body-line);
}

/* Quita “clamp()” locales que puedan sobrescribir */
#conocenos .about-lead{ font-size: 1rem !important; }

/* ========= Títulos (H2) unificados al tamaño de “Acerca de” ========= */
:root{
  --h2-size: clamp(28px, 4.2vw, 44px); /* mismo tamaño que #acerca .about-text-only h2 */
  --h2-line: 1.08;
  --h2-weight: 800;                    /* puedes subir a 1000 si lo prefieres */
  --h2-track: .2px;
}

/* Aplica a TODOS los H2 del sitio */
h2{
  font-size: var(--h2-size) !important;
  line-height: var(--h2-line);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-track);
}

/* Limpia overrides locales que tenías en secciones */
.section-title h2,
#conocenos h2,
#conocenos .about-text h2,
#soluciones .section-title h1,
#proyectos .section-title h1,
#clientes .section-title h1,
#ubicaciones .section-title h1,
#socios .section-title h1 {
  font-size: var(--h2-size) !important;
  line-height: var(--h2-line) !important;
  font-weight: var(--h2-weight) !important;
  letter-spacing: var(--h2-track) !important;
}

/* El de “Acerca” ya estaba en ese tamaño; lo dejamos consistente */
#acerca .about-text-only h2{
  font-size: var(--h2-size) !important;
  line-height: var(--h2-line) !important;
  font-weight: var(--h2-weight) !important;
  letter-spacing: var(--h2-track) !important;
}

/* ===== Galería de simulación (sección a TODO el ancho, fondo blanco) ===== */
.sim-gallery-section{
  width: 100%;
  background: #fff;                       /* fondo full width */
  padding: clamp(36px, 5vw, 72px) 0;      /* alto visual de la franja */
}

/* Card casi a pantalla completa (ancho) dentro del fondo */
.sim-card{
  position: relative;
  width: clamp(320px, 96vw, 1800px);      /* casi todo el ancho del viewport */
  min-height: clamp(420px, 72vh, 840px);  /* casi todo el alto visible */
  margin-inline: auto;                    /* centrada */
  border: 1px solid var(--border, #e8e8e8);
  border-radius: 22px;
  background: var(--surface, #fff);
  box-shadow: var(--shadow, 0 10px 22px rgba(17,17,17,.06));
  overflow: hidden;
}

/* Viewport + track */
.sg-viewport{
  position: relative;
  width: 100%; height: 100%;
  outline: none;
}
.sg-track{
  display: flex;
  width: 100%; height: 100%;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

/* Cada slide ocupa el 100% */
.sg-slide{
  flex: 0 0 100%;
  position: relative;
  padding: clamp(8px, 1.6vw, 16px);
  display: grid;
  place-items: center;
}

/* Video protagonista dentro de la card */
.sg-slide video{
  width: 100%;
  height: 100%;
  max-height: calc(100% - clamp(8px,1.6vw,16px)*2);
  aspect-ratio: 16/9;
  object-fit: cover;
  background: #000;
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
  transform: translateZ(0) scale(1);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.sg-slide.is-active video{
  transform: translateZ(0) scale(1.01);          /* micro zoom del activo */
  box-shadow: 0 18px 46px rgba(0,0,0,.26);
}

/* Flechas, pegadas a los bordes de la card */
.sg-nav{
  position: absolute; top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px; height: 48px;
  border: 0; border-radius: 999px;
  background: #fff; color: #111;
  box-shadow: 0 12px 26px rgba(17,17,17,.18);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.sg-nav.prev{ left: 12px; }
.sg-nav.next{ right: 12px; }
.sg-nav:hover{ transform: translateY(-50%) scale(1.06); }

/* Dots centrados */
.sg-dots{
  position: absolute;
  left: 50%; bottom: clamp(10px, 2.6vw, 18px);
  transform: translateX(-50%);
  display: flex; gap: 10px;
}
.sg-dots button{
  width: 9px; height: 9px;
  border: 0; border-radius: 50%;
  background: #e5e7eb; cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.sg-dots button[aria-current="true"]{
  background: var(--primary, #f62f42);
  transform: scale(1.1);
}

/* Responsivo: relación más alta para móvil */
@media (max-width: 900px){
  .sg-nav{ width: 44px; height: 44px; }
  .sg-slide video{ aspect-ratio: 4/3; }
}
@media (max-width: 420px){
  .sg-slide video{ aspect-ratio: 1/1; }
}

/* ===== Galería dentro de Simulación Virtual ===== */
#simulacion-virtual .sv-gallery{
  margin-top: clamp(16px, 3vw, 28px);
}

#simulacion-virtual .svg-card{
  /* card a casi todo el ancho del container de la sección */
  width: 100%;
  border-radius: 18px;
  position: relative;
  padding: clamp(6px, 1.2vw, 10px);
  overflow: hidden;
}

/* carrusel: 3 por vista (2 mediano, 1 móvil) */
#simulacion-virtual .sg-track{
  display: grid;
  grid-auto-flow: column;
  --gap: clamp(8px, 1.4vw, 16px);
  gap: var(--gap);
  grid-auto-columns: calc((100% - (var(--gap) * 2)) / 3);
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px;
}
#simulacion-virtual .sg-track::-webkit-scrollbar{ display:none; }

#simulacion-virtual .sg-slide{
  scroll-snap-align: start;
  padding: clamp(4px, .9vw, 10px);
  border-radius: 14px;
  background: rgb(0, 0, 0);
}

#simulacion-virtual .sg-slide video{
  display:block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
  outline: 1px solid rgba(255,255,255,.06);
}

/* flechas y dots en tema oscuro */
#simulacion-virtual .sg-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:0; border-radius:999px;
  background: #fff; color:#111;
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
  display:grid; place-items:center; cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  z-index: 2;
}
#simulacion-virtual .sg-arrow:hover{ transform: translateY(-50%) scale(1.06); }
#simulacion-virtual .sg-arrow.prev{ left: 8px; }
#simulacion-virtual .sg-arrow.next{ right: 8px; }

#simulacion-virtual .sg-dots{
  display:flex; gap:10px; justify-content:center;
  padding: 10px 0 4px;
}
#simulacion-virtual .sg-dot{
  width:9px; height:9px; border-radius:50%;
  background:#e5e7eb; border:0; cursor:pointer;
}
#simulacion-virtual .sg-dot[aria-current="true"]{
  background:#f62f42; transform:scale(1.1);
}

/* Responsivo */
@media (max-width:1024px){
  #simulacion-virtual .sg-track{ grid-auto-columns: calc((100% - var(--gap)) / 2); }
}
@media (max-width:640px){
  #simulacion-virtual .sg-track{ grid-auto-columns: 100%; }
  #simulacion-virtual .sg-arrow{ width:40px; height:40px; }
  #simulacion-virtual .sg-dot{ width:7px; height:7px; }
}

/* Galería: ocultar UI nativa de video en todos los navegadores */
#simulacion-virtual #sv-gallery video {
  pointer-events: none;           /* evita toques/clicks que pausen */
}

/* WebKit (Chrome/Safari) */
#simulacion-virtual #sv-gallery video::-webkit-media-controls,
#simulacion-virtual #sv-gallery video::-webkit-media-controls-enclosure,
#simulacion-virtual #sv-gallery video::-webkit-media-controls-panel,
#simulacion-virtual #sv-gallery video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

/* Firefox / Edge tienden a respetar la ausencia de 'controls', esto es backup */
/* ====== Galería dentro de #simulacion-virtual (alineada con las imágenes) ====== */
#simulacion-virtual{ --sv-gap: 22px; --sv-left: 0px; --sv-right: 0px; }

#simulacion-virtual .sv-gallery{
  margin-top: clamp(10px, 2vw, 18px);
}

/* La card queda sin padding; el ancho lo ajustamos con --sv-left/right */
#simulacion-virtual .svg-card{
  margin-left: var(--sv-left);
  margin-right: var(--sv-right);
  border-radius: 18px;
  background: #0b0d11;                    /* si quieres sin “marco”, pon: transparent */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}

#simulacion-virtual .sg-track{
  display: grid;
  grid-auto-flow: column;
  gap: var(--sv-gap);
  grid-auto-columns: calc((100% - (var(--sv-gap) * 2)) / 3);
  padding: 0;                              /* importante: sin padding lateral */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
#simulacion-virtual .sg-track::-webkit-scrollbar{ display:none; }

#simulacion-virtual .sg-slide{
  scroll-snap-align: start;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
#simulacion-virtual .sg-slide video{
  display:block; width:100%;
  height: clamp(180px, 20vw, 260px);
  object-fit: cover;
  pointer-events: none; /* sin controles */
}

/* Flechas */
#simulacion-virtual .sg-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border: 0; border-radius: 999px;
  background: #fff; color: #111; cursor: pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}
#simulacion-virtual .sg-arrow.prev{ left: 6px; }
#simulacion-virtual .sg-arrow.next{ right: 6px; }

/* Dots */
#simulacion-virtual .sg-dots{
  display:flex; gap:10px; justify-content:center;
  padding:10px 0 12px;
}
#simulacion-virtual .sg-dots > button{
  width:9px; height:9px; border-radius:50%; border:0; background:#e5e7eb; opacity:.9;
}
#simulacion-virtual .sg-dots > button[aria-current="true"]{
  background:#f62f42; transform:scale(1.1);
}

@media (max-width:1024px){
  #simulacion-virtual .sg-track{
    grid-auto-columns: calc((100% - var(--sv-gap)) / 2);
  }
}
@media (max-width:640px){
  #simulacion-virtual .sg-track{
    grid-auto-columns: 100%;
  }
}

/* Sin “marco” extra en la tarjeta del carrusel */
#simulacion-virtual .svg-card{
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:18px;
  overflow:hidden;
  /* márgenes los calculará el JS */
}

/* Track sin padding lateral para que respete los márgenes calculados */
#simulacion-virtual .sg-track{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Slides limpios */
#simulacion-virtual .sg-slide{
  background:transparent !important;
  box-shadow:none !important;
  padding:clamp(4px,.6vw,8px) !important;
  border-radius:14px !important;
  overflow:hidden;
}

/* Videos: autoplay, sin controles, llenan su slide */
#simulacion-virtual #sv-gallery video{
  display:block; width:100%; height:auto; aspect-ratio:16/9;
  object-fit:cover; border-radius:12px; pointer-events:none;
}
#simulacion-virtual #sv-gallery video::-webkit-media-controls{ display:none !important; }

/*ESTILO SECCION CLIENTES*/
.clients-marquee { overflow: hidden; }
  .clients-marquee .section-title { text-align:center; margin-bottom:1.25rem; }

  /* Banda full-bleed dentro de un layout con .container */
  .marquee-bleed {
    /* truco para “romper” los márgenes y ocupar 100vw */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
  }

  .marquee {
    position: relative;
    overflow: hidden;
    margin-block: clamp(8px, 2vw, 14px);
    width: 100vw; /* asegura full width */
  }

  .marquee__track {
    display: flex;
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
    will-change: transform;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: marquee-scroll;
    animation-duration: 40s; /* default; JS lo ajusta */
    animation-play-state: paused;
  }

  .marquee[data-reverse="1"] .marquee__track { animation-name: marquee-scroll-rev; }
  .marquee__track.is-ready { animation-play-state: running; }

  @keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @keyframes marquee-scroll-rev {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
  }

  .logo-item {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    min-width: 120px;
    width: var(--w, auto);
  }
  .logo-item img {
    height: var(--h, 72px);
    max-height: 96px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%) contrast(1.1) brightness(0.95);
    transition: filter .2s ease, transform .2s ease;
    pointer-events: none;
  }
  .logo-item img:hover { filter: grayscale(0%); transform: scale(1.02); }

  @media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none !important; }
  }

  /* === Ajustes de separación y padding para el carrusel de clientes === */
.clients-marquee {
  /* variables de control rápidas */
  --pad-x: clamp(12px, 2vw, 20px);   /* padding lateral uniforme */
  --row-gap: 10px;                   /* espacio vertical entre filas */
  --logo-gap: clamp(16px, 3vw, 28px);/* espacio entre logos (más compacto) */
}

.clients-marquee .section-title {
  margin-bottom: clamp(8px, 1.5vw, 14px); /* menos espacio con el título */
}

/* La banda full-bleed conserva padding igual a ambos lados */
.marquee-bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  padding-inline: var(--pad-x);      /* 👈 padding lateral uniforme */
  box-sizing: border-box;
}

/* Misma separación vertical para ambas filas */
.marquee {
  margin-top: var(--row-gap);
  margin-bottom: var(--row-gap);
  width: 100%;
}

/* Menos separación entre logos y consistente */
.marquee__track {
  gap: var(--logo-gap);              /* 👈 antes era más grande */
}

/* Opcional: permitir que quepan más logos reduciendo ancho mínimo */
.logo-item {
  min-width: 100px;                  /* antes 120px; ayuda a compactar */
}

/* Si aún los ves “separados”, puedes bajar la altura por defecto también: */
.logo-item img {
  /* mantén tus --h por logo; si un logo no define --h, baja el default */
  height: var(--h, 64px);            /* antes 72px */
  max-height: 88px;                  /* antes 96px */
}

/* === Uniformar separación entre logos === */

/* Control rápido del ancho de cada celda y del gap */
.clients-marquee{
  --cell: clamp(130px, 14vw, 210px); /* ancho fijo por logo */
  --logo-gap: clamp(14px, 2.8vw, 24px); /* separación entre celdas */
}

/* Usa celdas de ancho fijo; el gap ahora será idéntico */
.marquee__track{
  gap: var(--logo-gap) !important;
}

/* La celda manda (no el --w inline). 
   flex-basis fija el ancho en el eje de scroll y gana sobre width */
.logo-item{
  flex: 0 0 var(--cell) !important; 
  width: auto !important;           /* neutraliza '--w' inline */
  display: grid;
  place-items: center;
}

/* Normaliza el render de la imagen dentro de la celda */
.logo-item img{
  display:block;          /* elimina espacios fantasma */
  height: var(--h, 64px); /* respeta tu alto por-logo; default uniforme */
  max-height: 88px;
  max-width: 90%;         /* evita que un logo muy horizontal rompa la celda */
  width: auto;            /* mantiene proporción */
  object-fit: contain;
}

/* (Opcional) si notas alguno con mucho “aire” interno en su SVG/PNG,
   puedes permitir un poco más de ancho visible sin romper el layout: */
/*
.logo-item img{ max-width: 95%; }
*/

/* ===== Carrusel de clientes: filas y medias con separación uniforme ===== */

/* Controles rápidos */
.clients-marquee{
  --cell: clamp(130px, 14vw, 210px);  /* ancho fijo por logo (celda) */
  --rowH: 72px;                       /* altura fija por fila */
  --mid-gap: 14px;                    /* espacio entre la fila de arriba y la de abajo */
  --logo-gap: clamp(14px, 2.8vw, 24px); /* separación lateral entre celdas */
}

/* La banda full-bleed ahora organiza las filas como grid para controlar el "medio" */
.marquee-bleed{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  padding-inline: clamp(12px, 2vw, 20px);
  display: grid;
  row-gap: var(--mid-gap);           /* 👈 separación vertical uniforme entre filas */
}

/* Cada fila tiene altura fija y no crece si un logo es más alto */
.marquee{
  width: 100%;
  block-size: var(--rowH);           /* altura fija de la fila */
  overflow: hidden;
  display: flex;                     /* asegura centrado vertical del track */
  align-items: center;               /* centra el track dentro de la fila */
}

/* Track con gap uniforme entre celdas */
.marquee__track{
  display: flex;
  align-items: center;
  gap: var(--logo-gap) !important;
}

/* Cada logo ocupa una celda de ancho y alto fijos.
   contain:size evita que el contenido altere el tamaño de la celda. */
.logo-item{
  flex: 0 0 var(--cell) !important;  /* ancho fijo por celda */
  inline-size: var(--cell);
  block-size: var(--rowH);           /* altura fija por celda (== fila) */
  display: grid;
  place-items: center;
  contain: size layout;              /* 👈 cambios del hijo no afectan layout externo */
}

/* Normaliza la imagen para no empujar la celda/fila */
.logo-item img{
  display: block;
  max-inline-size: 90%;              /* límite horizontal dentro de la celda */
  max-block-size: calc(var(--rowH) - 10px); /* límite vertical dentro de la celda */
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Si sigues usando --h por logo, que nunca exceda la fila */
.logo-item img{
  height: auto;
  max-height: min(var(--rowH), var(--h, var(--rowH))); /* respeta --h pero no supera --rowH */
}

/* (Opcional) Si algún SVG trae mucho "aire" interno, puedes permitir más ancho: */
/* .logo-item img{ max-inline-size: 95%; } */

/* === Overrides de espaciado y estabilidad === */
.clients-marquee{
  /* controla TODO desde aquí */
  --title-gap: clamp(20px, 3vw, 55px);   /* distancia título ↔ carrusel */
  --mid-gap:   clamp(-5px, 3vw, -5px);   /* espacio entre la fila 1 y 2 */
  --rowH:      clamp(90px, 12vw, 150px); /* altura fija de cada fila/celda */
  --cell:      clamp(140px, 14vw, 240px);/* ancho fijo por logo (celda)   */
  --logo-gap:  clamp(12px, 2.2vw, 22px); /* separación lateral entre logos */
}

/* 1) Más espacio debajo del título */
.clients-marquee .section-title{
  margin-bottom: var(--title-gap) !important;
}

/* 2) El “medio” entre filas ahora es uniforme y fácil de ajustar */
.marquee-bleed{
  display: grid !important;
  row-gap: var(--mid-gap) !important;  /* 👈 controla el hueco entre filas */
  padding-inline: clamp(10px, 2vw, 10px);
}

/* 3) Filas con altura fija (no crecen si cambias un logo) */
.marquee{
  block-size: var(--rowH) !important;
  display: flex;
  align-items: center;                 /* centra verticalmente el track */
}

/* 4) Piezas con separación lateral uniforme */
.marquee__track{
  gap: var(--logo-gap) !important;
}

/* 5) Celdas de ancho/alto fijos: cambiar una imagen no mueve nada */
.logo-item{
  flex: 0 0 var(--cell) !important;
  inline-size: var(--cell);
  block-size: var(--rowH);
  display: grid;
  place-items: center;
  contain: size layout;                /* aísla el contenido del layout */
}

/* 6) Imágenes contenidas en su celda, sin “estirar” la fila */
.logo-item img{
  display:block;
  width:auto; height:auto;
  max-inline-size: 10%;
  max-block-size: calc(var(--rowH) - 10px);
  object-fit: contain;
}

/*ESTILOS SECCION PROYECTOS*/
    /* Sección oscura y encabezado */
    #proyectos.projects-dark{
      background:#ffffff;
      color:#000000;
      padding: clamp(48px,6vw,96px) 0;
    }
    /* .projects-head en DIV para no tocar el <header> global */
    #proyectos.projects-dark .projects-head{
      margin-bottom: clamp(18px,2.6vw,28px);
      position: static; /* por si tu header global fuerza posiciones */
    }
    #proyectos.projects-dark .projects-head h2{
      font-weight: 800; color:#000000; margin:0 0 6px;
    }
    #proyectos.projects-dark .projects-head p{
      color:#a3a3a3; margin:0;
    }

    /* Grilla: 3 cards + 1 box */
    .projects-row{
      display:grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: clamp(14px,1.4vw,10px);
      align-items: stretch;
    }
    @media (max-width: 1024px){ .projects-row{ grid-template-columns: repeat(2,1fr); } }
    @media (max-width: 640px){ .projects-row{ grid-template-columns: 1fr; } }

    /* Card base */
    .proj-card{
      background:#0b0d11;
      border-radius: 16px;
      overflow:hidden;
      display:flex; flex-direction:column;
      box-shadow: 0 10px 26px rgba(0,0,0,.28);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      text-decoration:none;
      position: relative; /* Añadido para posicionar el texto "Ver más" */
    }
    .proj-card:hover{
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(0,0,0,.36);
      border-color: rgba(255,255,255,.14);
    }
    .proj-thumb{
      position:relative;
      aspect-ratio: 10/14;
      background:#000; overflow:hidden;
    }
    .proj-thumb > video{
      width:100%; height:100%; object-fit: cover; display:block;
      filter: saturate(1.02) contrast(1.02);
      transform: scale(1.02);
      transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .25s;
    }
    .proj-card:hover .proj-thumb > video{ transform: scale(1.06); }
    .proj-thumb::after{
      content:""; position:absolute; inset: 20% 0 0 0;
      background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.799) 50%, rgba(0, 0, 0, 0.853));
      pointer-events:none;
    }
    .proj-meta{
      position:absolute; left:0; right:0; bottom:0;
      padding: 14px 14px 16px; z-index:2;
    }
    .proj-title{ margin:0 0 4px; font-weight:800; color:#ffffff; font-size: clamp(1rem,1.5vw,1.15rem); }
    .proj-text{ margin:0; color:#ffffffde; font-size:.95rem; }

    /* “Ver todos” */
    .proj-all{ background: transparent; }
    .proj-all .proj-all-box{
      position: relative;
      display:flex; align-items:center; justify-content: space-between;
      padding: 18px; min-height: 100%;
      border-radius:0% 1 px; background: rgb(0, 0, 0);
    }

    .proj-all .proj-all-text strong{
      display:block; margin-top:6px; color:#fff;
      font-size: clamp(1.1rem,1.8vw,1.3rem); line-height:1.1;
    }
    .proj-all-cta{
      width:44px; height:44px; border-radius:999px; display:grid; place-items:center;
      background:#f62f42; color:#ffffff; box-shadow: 0 12px 26px rgba(255, 0, 0, 0.447);
      transition: transform .18s ease;
    }
    .proj-all:hover .proj-all-cta{ transform: translateX(4px); }

      .proj-all .proj-all-text strong{
      display:block; margin-top:6px; color:#fff;
      font-size: clamp(1.1rem,1.8vw,1.3rem); line-height:1.1;
    }
        .proj-all .proj-all-text .kicker{
      display:block; font-weight:800; color: var(--accent);
      letter-spacing:.18em; text-transform: uppercase; font-size:.8rem; opacity:.95;
    }

    #proyectos .proj-all .proj-all-text .kicker{
  color: var(--accent) !important;

  #proyectos .proj-all .proj-all-text .kicker{
  color: var(--accent) !important;
}
}

/* ---- Ajuste fino (vertical) del texto en la 4ª card ---- */
#proyectos .proj-all .proj-all-text{
  /* valor por defecto: súbelo 6px; cambia a -2px, -8px, etc. */
  --all-text-nudge: 2px;
  transform: translateY(var(--all-text-nudge));
}

/* Si también quieres centrar la flecha respecto al bloque de texto */
#proyectos .proj-all .proj-all-cta{
  /* mueve la flecha sin afectar el resto */
  --cta-nudge: 0px;                /* prueba 2px, -2px… */
  transform: translateY(var(--cta-nudge));
}

/* ===== Espaciado consistente dentro de las 4 cards ===== */

/* 1) Variables de espaciado (ajústalas a tu gusto) */
#proyectos.projects-dark{
  --meta-pad-x: 30px;   /* padding lateral del bloque de texto */
  --meta-pad-b: 22px;   /* padding inferior del bloque de texto */
  --meta-gap: 10px;     /* espacio entre título y párrafo */
  --title-line: 1.15;   /* line-height del título */
  --text-line: 1.55;    /* line-height del párrafo */
}

/* 2) Aplica las variables a los 3 proyectos (cards con video) */
#proyectos .proj-meta{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--meta-pad-b) var(--meta-pad-x);
  display: flex;
  flex-direction: column;
  gap: var(--meta-gap);               /* ← separación uniforme entre textos */
}

#proyectos .proj-title{
  margin: 0;                          /* nada de márgenes extra */
  line-height: var(--title-line);
}

#proyectos .proj-text{
  margin: 0;
  line-height: var(--text-line);
}

/* La cortina oscura de la imagen para que no "se coma" el texto */
#proyectos .proj-thumb::after{
  content:"";
  position:absolute; inset: 0 0 0 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,.55) 64%,
    rgba(0,0,0,.85) 100%);
  pointer-events:none;
}

/* 3) Misma filosofía para la card 4 (Ver todos) */
#proyectos .proj-all .proj-all-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;                          /* espacio entre texto y flecha */
  padding: 30px;                      /* mismo aire interior */
  min-height: 100%;
}

#proyectos .proj-all .proj-all-text{
  display: grid;
  gap: var(--meta-gap);               /* misma separación que el resto */
}

#proyectos .proj-all .proj-all-text .kicker{
  margin: 0;                          /* evita márgenes "fantasma" */
}

#proyectos .proj-all .proj-all-text strong{
  margin: 0;                          /* evita márgenes "fantasma" */
  line-height: var(--title-line);
}

/* ===== NUEVO: Estilos para el texto "Ver más" ===== */
.proj-more-text {
  position: absolute;
  left: var(--meta-pad-x);
  bottom: var(--meta-pad-b);
  color: #f62f42;
  font-size: .95rem;
  line-height: var(--text-line);
  margin: 0;
  z-index: 2;
  cursor: pointer;
  display: inline-block;
  transition: all 0.3s ease;
  letter-spacing: 2px;
}

/* Efecto de subrayado rojo al hacer hover */
.proj-more-text::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #f62f42;
  transition: width 0.3s ease;
}

.proj-more-text:hover::after {
  width: 100%;
}

/* Opcional: Cambiar color del texto al hacer hover para mayor énfasis */
.proj-more-text:hover {
  color: #ffffff;
}

/*ESTILOS SECCION SIMULACION VIRTUAL*/
   /* Paleta de tu sitio */
    :root{
      --accent:#f62f42;
      --ink:#ffffff;
      --ink-soft:#f3f4f6;
      --bg:#000000;
      --shadow-b: 0 22px 60px rgba(0,0,0,.45);
    }

    /* Sección */
    .svv{
      background: var(--bg);
      color: var(--ink);
      padding: clamp(32px,6vw,80px) 0;
    }
    .svv .container{max-width:1280px;margin:0 auto;padding:0 20px}

    /* Título grande como el mock */
    .svv-title{
      font-weight: 900;
      font-size: clamp(36px,6.6vw,92px);
      line-height: 1;
      letter-spacing: .2px;
      margin: 0 0 clamp(18px,3vw,28px);
      color: var(--ink);
    }
    .svv-title b{ color: var(--ink); }

    /* Grid 2 columnas: escenario izq. + aside der. */
    .svv-grid{
      display:grid;
      grid-template-columns: minmax(560px,1.05fr) .95fr; /* proporción como la imagen */
      align-items: start;
      gap: clamp(26px,4vw,56px);
    }
    @media (max-width: 980px){
      .svv-grid{ grid-template-columns: 1fr; }
    }

    /* ===== Escenario (video grande) ===== */
    .svv-stage{
      position: relative;
      padding: 0;
    }
    .svv-viewport{
      position: relative;
      background:#0b0d11;
      border-radius: 26px;
      overflow: hidden;
      box-shadow: var(--shadow-b);
      outline: 1px solid rgba(255,255,255,.06);
      aspect-ratio: 16/10; /* caja grande como tu mock */
    }
    .svv-player, .svv-video{
      width:100%; height:100%;
      display:block;
    }
    .svv-video{ object-fit: cover; filter: contrast(1.02) saturate(1.02); }

    /* Flechas */
    .svv-arrow{
      position:absolute; top:50%; transform: translateY(-50%);
      width:48px; height:48px; border:0; border-radius:999px;
      background: #fff; color:#111; cursor:pointer;
      box-shadow: 0 16px 38px rgba(0,0,0,.45);
      display:grid; place-items:center;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
      z-index: 5;
    }
    .svv-arrow:hover{ transform: translateY(-50%) scale(1.06); }
    .svv-arrow.prev{ left: -12px; }
    .svv-arrow.next{ right: -12px; }

    /* Dots */
    .svv-dots{
      display:flex; gap:10px; justify-content:center;
      padding-top: 14px;
    }
    .svv-dots button{
      width:8px; height:8px; border-radius:50%; border:0;
      background:#bdbdbd; opacity:.9; cursor:pointer;
      transition: transform .18s ease, background .18s ease;
    }
    .svv-dots button[aria-current="true"]{
      background: var(--accent);
      transform: scale(1.15);
    }

    /* ===== Aside derecho (textos + dispositivos) ===== */
    .svv-aside{
      display: grid;
      grid-template-rows: 1fr 1fr;
      gap: clamp(22px,3vw,34px);
    }
    .svv-block{
      position: relative;
      padding: clamp(6px,1vw,10px) 0 0;
      min-height: 48%;
    }
    .svv-h{
      color: var(--accent);
      font-weight: 800;
      font-size: clamp(26px,2.8vw,40px);
      margin: 0 0 10px;
    }
    .svv-p{
      color: var(--ink-soft);
      font-size: clamp(15px,1.4vw,18px);
      line-height: 1.65;
      max-width: 48ch;
      margin: 0;
    }
    .svv-p strong{ color:#fff; font-weight:800; }

    /* Dispositivos flotantes colocados como en el mock */
    .svv-device{
      position: absolute;
      height: clamp(90px,18vw,180px);
      width: auto;
      filter: drop-shadow(0 12px 26px rgba(0,0,0,.45));
      pointer-events: none;
    }
    /* Vision Pro: a la derecha del bloque superior */
    .svv-device-right{
      right: 0;
      top: 50%;
      transform: translateY(-44%);
    }
    /* Hololens: a la izquierda del bloque inferior */
    .svv-device-left{
      left: 0;
      top: 50%;
      transform: translate(-6%, -40%) rotate(-2deg);
      opacity:.95;
      height: clamp(70px,14vw,150px);
    }
    /* Para que el texto del bloque inferior no se tape con el device izq */
    .svv-hl .svv-p, .svv-hl .svv-h{ padding-left: clamp(120px,18vw,180px); }

    @media (max-width:980px){
      .svv-device-right, .svv-device-left{
        position: static; transform:none; display:block; margin: 10px 0 0 auto;
      }
      .svv-hl .svv-p, .svv-hl .svv-h{ padding-left: 0; }
    }

    /* Quitar controles nativos del video en esta sección */
    #simulacion-virtual .svv-video::-webkit-media-controls{ display:none !important; }

    /* --- Controles finos para los dispositivos --- */
/* Valores por defecto (ajústalos a tu gusto) */
#simulacion-virtual{
  --vp-size: 160px;   /* tamaño Vision Pro */
  --vp-x:   60px;      /* mover sobre X (+ derecha / - izquierda) */
  --vp-y:  -10px;     /* mover sobre Y (+ abajo / - arriba) */

  --hl-size: 115px;   /* tamaño Hololens */
  --hl-x:  -18px;     /* mover sobre X */
  --hl-y:  -8px;      /* mover sobre Y */
}

/* Vision Pro (bloque superior) */
#simulacion-virtual .svv-device-right{
  height: var(--vp-size);
  transform: translate(calc(0% + var(--vp-x)), calc(-44% + var(--vp-y)));
}

/* Hololens (bloque inferior) */
#simulacion-virtual .svv-device-left{
  height: var(--hl-size);
  transform: translate(calc(-6% + var(--hl-x)), calc(-40% + var(--hl-y))) rotate(-2deg);
}

/* Si quieres reglas distintas en móvil */
@media (max-width: 980px){
  #simulacion-virtual{
    --vp-size: 120px;
    --vp-x: 0px; --vp-y: 0px;
    --hl-size: 110px;
    --hl-x: 0px; --hl-y: 0px;
  }
}

/* Empuje fino del texto de HoloLens hacia la derecha */
#simulacion-virtual{
  /* Ajusta este valor hasta que te guste (p. ej. 8px, 12px, 16px) */
  --hl-text-nudge: 40px;
}

/* El padding del bloque HoloLens suma el nudge al cálculo existente */
#simulacion-virtual .svv-hl{
  --hl-pad-left: calc(var(--hl-size) + var(--hl-pad-gap, 20px) + var(--hl-text-nudge));
}

/* Aplica al título y párrafo del bloque HoloLens */
#simulacion-virtual .svv-hl .svv-h,
#simulacion-virtual .svv-hl .svv-p{
  padding-left: var(--hl-pad-left) !important;
}

/* En móvil mantenlo sin desplazamiento extra (opcional) */
@media (max-width: 980px){
  #simulacion-virtual{ --hl-text-nudge: 0px; }
}

/* ===== HoloLens: hacer que el párrafo se estire y no limite a 48ch ===== */

/* 1) Quita límites de ancho SOLO en HoloLens y cuenta el padding en el ancho */
#simulacion-virtual .svv-hl .svv-p{
  box-sizing: border-box;       /* el padding-left no “come” ancho útil */
  inline-size: 110% !important; /* ocupa todo el ancho del aside */
  max-inline-size: none !important;  /* elimina el tope de 48ch */
  margin-right: 0 !important;
  padding-right: clamp(6px, 2vw, 14px);  /* un poco de aire a la derecha */
}

/* 2) Evita restar ancho con empujes extra a la izquierda */
#simulacion-virtual{
  --hl-pad-gap: clamp(10px, 1.8vw, 22px); /* colchón junto a la imagen */
  --hl-text-nudge: 33px;                    /* sin empuje adicional */
}

/* 3) Calcula el padding izquierdo con variables (no uses el clamp fijo) */
#simulacion-virtual .svv-hl{
  --hl-pad-left: calc(var(--hl-size) + var(--hl-pad-gap) + var(--hl-text-nudge));
}
#simulacion-virtual .svv-hl .svv-h,
#simulacion-virtual .svv-hl .svv-p{
  padding-left: var(--hl-pad-left) !important;
}

/* En móvil, deja que el texto fluya normal */
@media (max-width: 990px){
  #simulacion-virtual .svv-hl .svv-p{
    max-inline-size: 58ch !important; /* legible en pantallas pequeñas */
    padding-left: 0 !important;
  }
}

/* === Compactar ANCHO del bloque de textos y dejar aire a los lados === */
#simulacion-virtual{
  /* Ancho máximo del texto (en ambos bloques) */
  --copyW: clamp(620px, 50vw, 660px);

  /* Aire a la izquierda (junto al video) y a la derecha (borde) del aside */
  --aside-left-gutter:  clamp(20px, 3vw, 80px);
  --aside-right-gutter: clamp(20px, 3vw, 80px);

  /* HoloLens: separación texto–imagen (mantén o ajusta) */
  --hl-pad-gap: clamp(60px, 1.8vw, 60px);
}

/* El aside ahora tiene gutters laterales y el contenido no ocupa todo el ancho */
#simulacion-virtual .svv-aside{
  padding-left:  var(--aside-left-gutter) !important;   /* aire junto al video */
  padding-right: var(--aside-right-gutter) !important;  /* aire después de la imagen */
  justify-self: start;
}

/* El texto (título + párrafo) de cada bloque se limita a --copyW */
#simulacion-virtual .svv-vp .svv-h,
#simulacion-virtual .svv-vp .svv-p,
#simulacion-virtual .svv-hl .svv-h,
#simulacion-virtual .svv-hl .svv-p{
  box-sizing: border-box;
  max-width: var(--copyW) !important;   /* 👈 compacta el ancho del texto */
  width: 90%;
}

/* HoloLens: respeta el espacio de la imagen a la izquierda sin perder ancho útil */
#simulacion-virtual .svv-hl{
  --hl-pad-left: calc(var(--hl-size) + var(--hl-pad-gap));
}
#simulacion-virtual .svv-hl .svv-h,
#simulacion-virtual .svv-hl .svv-p{
  padding-left: var(--hl-pad-left) !important; /* no invadir la imagen */
}

/* (Opcional) si el párrafo de HoloLens sigue cayendo en 3 líneas, 
   sube un poco el ancho de copy sin tocar todo el layout: */
/* #simulacion-virtual{ --copyW: clamp(460px, 42vw, 600px); } */

/* === Empuje lateral del aside (textos + devices) hacia la derecha === */
#simulacion-virtual{
  /* ajusta este valor: 12px, 16px, 24px, o incluso 1.5vw */
  --aside-shift-x: 20px;
}

#simulacion-virtual .svv-aside{
  transform: translateX(var(--aside-shift-x));
  will-change: transform;
}

/* En móvil no lo movemos para evitar scroll lateral */
@media (max-width: 980px){
  #simulacion-virtual{ --aside-shift-x: 0; }
}