/* =======================================================================
   Base de estilos — Free Connection
   ======================================================================= */

/* Paleta y tokens */
:root{
  --primary:#0F2537;
  --accent:#1E88E5;

  /* Degradado morado para tarjetas de servicios */
  --grad-start:#6D28D9;
  --grad-end:#A855F7;
}

html{ scroll-behavior:smooth; }
.container{ max-width:1140px; }
img{ max-width:100%; height:auto; display:block; }

/* Botones “call to action” */
.btn-cta{
  border-radius:12px;
  font-weight:700;
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(30,136,229,.18);
}

/* Tarjetas y efecto lift */
.card{ border-radius:16px; overflow:hidden; }
.lift{ transition: transform .18s ease, box-shadow .18s ease; }
.lift:hover{ transform: translateY(-4px); box-shadow:0 18px 40px rgba(16,24,40,.08); }

/* Sticky header shadow sutil sólo al hacer scroll */
.shadow-sm-sm{ box-shadow:none; transition:box-shadow .2s ease; }
.scrolled .shadow-sm-sm{ box-shadow:0 6px 18px rgba(16,24,40,.06); }

/* Marca (logo + texto) – responsiva */
.brand-logo{
  height: clamp(28px, 5.5vw, 44px);
  width: auto;
  object-fit: contain;
}
.brand-name{
  font-weight: 800;
  color: #0F2537;
  font-size: clamp(16px, 2.4vw, 22px);
  line-height: 1.1;
  white-space: nowrap;
}

/* (opcional) reducir padding del header en pantallas chicas */
@media (max-width: 576px){
  .navbar .container { padding-left: 12px; padding-right: 12px; }
}

/* =======================================================================
   Héroe — Fondo estilo brochure + mockup
   ======================================================================= */

/* El héroe usa un fondo SVG (assets/img/hero-bg.svg) y “derrame” suave */
.hero{
  position: relative;
  isolation: isolate;                        /* aísla capas internas */
  background: #0d1331 url("../img/hero-bg.svg") center/cover no-repeat;
  padding-top: clamp(48px, 6vw, 84px);
  padding-bottom: clamp(40px, 6vw, 72px);
  margin-bottom: -28px;                      /* baja un poco hacia la siguiente sección */
  color: #eef2ff;
}

/* Si quedó el viejo div .hero-bg en el HTML, lo ocultamos */
.hero .hero-bg{ display: none !important; }

/* Contraste de textos dentro del hero */
.hero .badge{
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.22);
  color: #e0e7ff !important;
}
/* Título grande del héroe (Home) */
.hero h1.display-5{
  font-size: clamp(36px, 5vw, 64px) !important; /* tamaño fluido y grande */
  line-height: 1.1;
  font-weight: 800 !important;                  /* negrita */
  color: #fff !important;                       /* blanco */
}

/* Texto bajo el título en blanco (aunque lleve .text-secondary) */
.hero .lead,
.hero p.lead{
  color: #fff !important;
  opacity: .92; /* opcional: leve suavizado */
}


/* Cuadro de imagen a la derecha (mockup): RELLENAR el cuadro */
.hero .mockup{
  position: relative;
  width: 100%;
  min-height: clamp(260px, 45vw, 420px);
  border-radius: 1rem;
  overflow: hidden;                          /* recorta dentro del borde redondeado */

  /* efecto “glass” */
  background-color: rgba(255,255,255,.06);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255,255,255,.18);

  /* IMPORTANTE: ruta relativa desde assets/css/ → assets/img/ */
  background-image: url("../img/inicio.png?v=8");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;                    /* <- ahora rellena el recuadro */
}
@media (min-width: 992px){
  .hero .mockup{ min-height: 420px; }
}

/* Sombra de transición inferior (opcional) */
.hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:90px;
  background: linear-gradient(to bottom, rgba(13,19,49,0) 0%, rgba(13,19,49,.18) 60%, rgba(13,19,49,0) 100%);
  pointer-events:none;
}


/* =======================================================================
   Servicios — marco degradado + imágenes centradas (compatibles con .ratio)
   ======================================================================= */

/* Tarjetas: mantener esquinas y evitar recortes raros */
.card{ border-radius:16px; overflow:hidden; }

/* Contenedor con degradado y “cartulina” interior */
.service-thumb{
  position: relative;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
  overflow: hidden;

  /* centrado por grid */
  display: grid;
  place-items: center;

  /* por si en algún caso falta .ratio, garantizamos alto */
  aspect-ratio: 16 / 9;
}

/* Marco blanco interior */
.service-thumb::before{
  content:"";
  position:absolute;
  inset:12px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 6px 14px rgba(0,0,0,.05);
  z-index:0;
}

/* Imagen: visible completa, por encima del marco */
.service-thumb img{
  z-index:1;
  max-width: calc(100% - 24px);
  max-height: calc(100% - 24px);
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:10px;
  pointer-events:none;
}

/* *** FIX contra Bootstrap .ratio que pone el hijo en absoluto *** */
.service-thumb.ratio > img{
  position: static !important;     /* cancelar absolute de .ratio */
  inset:auto !important;
  width:auto !important;
  height:auto !important;
  margin:0 auto;                   /* seguridad extra en horizontal */
}

/* Cuerpo de la tarjeta */
.service-card .card-body{ padding-top:12px; }


/* ====== OVERRIDE Servicios: imagen centrada sin recortes ====== */
/* Mantén el 16:9 aunque se pierda accidentalmente la clase .ratio */
.service-card .service-thumb{
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
}

/* El marco blanco interior (si lo usas) */
.service-card .service-thumb::before{
  content: "";
  position: absolute;
  inset: 12px;                 /* margen interior del marco */
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(0,0,0,.05);
  z-index: 0;
}

/* CLAVE: la imagen rellena el área interior, centrada y sin recorte */
.service-card .service-thumb > img{
  position: absolute !important;
  inset: 12px !important;      /* coincide con el marco ::before */
  width: calc(100% - 24px) !important;
  height: calc(100% - 24px) !important;
  object-fit: contain !important;   /* no recorta */
  object-position: center !important;
  z-index: 1;
  border-radius: 10px;
}

/* Si el contenedor usa .ratio de Bootstrap, forzamos contain sólo aquí */
.service-card .service-thumb.ratio > img{
  object-fit: contain !important;
}

/* ===== KPIs vistosos (número grande + gradiente + centrado) ===== */
.kpi-row {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
}
@media (max-width: 768px){
  .kpi-row { grid-template-columns: 1fr; }
}

.kpi {
  text-align: center;
  font-weight: 700;
  color: var(--primary);
  padding: 18px 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e8eef6;
  box-shadow: 0 8px 20px rgba(16,24,40,.06);
}

.kpi .kpi-value {
  display: block;
  line-height: 1.05;
  font-weight: 800;
  font-size: clamp(36px, 5.6vw, 56px);
  background: linear-gradient(135deg, var(--grad-start), var(--grad-end), #60A5FA);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 10px 24px rgba(96,165,250,.15);
  margin-bottom: 6px;
}

.kpi .kpi-label {
  font-size: clamp(14px, 2.3vw, 16px);
  color: #475569;
  font-weight: 600;
}


/* ===== Proyectos recientes (cards) — FIX gap 1px ===== */
.project-card,
.proj-card{
  border-radius: 16px;
  overflow: hidden;                 /* esquinas limpias */
}

/* Contenedor visual de la imagen */
.project-thumb,
.proj-thumb{
  position: relative;
  aspect-ratio: 16 / 9;             /* todas iguales */
  overflow: hidden;
  border-radius: 16px 16px 0 0;     /* esquinas superiores */
  background: #f6f7fb;              /* por si tarda la imagen */
}

/* Imagen: cubrir y centrar, SIN “hairline” (inset:-1px) */
.project-thumb > img,
.proj-thumb > img{
  position: absolute;
  inset: -1px;                      /* <- tapa el hueco de 1px */
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .35s ease;
  backface-visibility: hidden;      /* evita artefactos finos */
  transform: translateZ(0);         /* fuerza composición GPU */
}

/* Hover sutil */
.project-card:hover .project-thumb > img,
.proj-card:hover .proj-thumb > img{
  transform: scale(1.03);
}


/* === Fix hairline entre imagen y body en cards de Proyectos === */
.project-card .proj-thumb{
  /* igual que antes, pero… */
  background:#fff;            /* que coincida con el fondo de la card */
  line-height:0;              /* elimina posibles gaps por línea */
  margin-bottom:-1px;         /* solapa 1px con el body y tapa el “pelito” */
}

/* Para navegadores “quisquillosos” (Safari/HiDPI) ponemos una tirita blanca  */
.project-card .proj-thumb::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background:#fff;            /* mismo color que la card */
  pointer-events:none;
}


/* ===== Overlay “por delante” en tarjetas de Servicios ===== */
.service-tile{
  position:relative;
  border:1px solid #e8eef6;
  border-radius:16px;
  background:#fff;
  transition:transform .18s ease, box-shadow .18s ease;
  cursor:pointer;
}
.service-tile:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(16,24,40,.08);
}

.service-tile .tile-body{ padding:18px 20px; }
.service-tile h3{ font-size:18px; margin:0 0 6px; color:#0F2537; }
.service-tile p{ margin:0; color:#475569; }

/* Capa que aparece al hover */
.service-tile .hover-preview{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:16px;
  overflow:hidden;
  opacity:0; visibility:hidden;
  transition:opacity .18s ease, visibility .18s ease;
}
.service-tile:hover .hover-preview,
.service-tile.show .hover-preview{ /* .show para touch */
  opacity:1; visibility:visible;
}

/* Imagen de fondo del preview usando una custom property */
.service-tile .hover-preview::before{
  content:"";
  position:absolute; inset:0;
  background-image:var(--preview-img, none);
  background-size:cover;
  background-position:center;
  filter:brightness(.9);
}

/* Botoncito centrado */
.service-tile .hover-preview .preview-cta{
  position:relative; z-index:1;
  background:rgba(255,255,255,.9);
  border:1px solid #e2e8f0;
  padding:10px 14px; border-radius:12px;
  font-weight:700; color:#0F2537;
}

/* Iconito play para los que abren video */
.service-tile[data-youtube] .preview-cta::before{
  content:"▶";
  display:inline-block; margin-right:8px;
}

/* En móviles: un toque muestra el overlay, otro toque hace la acción */
@media (hover:none){
  .service-tile{ touch-action:manipulation; }
}


/* Hero más compacto para páginas internas */
/* pantalla casi completa, con tope por si monitores muy altos */
.hero--short{ min-height: min(100dvh, 780px); }


/* Contenedor general del hero */
.hero{
  position: relative;
  isolation: isolate;
  display: grid;                 /* nos permite centrar verticalmente */
  align-items: center;
  padding-block: clamp(16px, 4vw, 48px);
}

/* Variante corta que escala con la altura de la pantalla */
.hero--short{
  /* alto mínimo: no menos de 260px, escala con viewport, tope ~580px */
  min-height: clamp(260px, 48dvh, 580px);
}

/* Haz que el .container llene la altura del hero y centre el contenido */
.hero .container{
  min-height: inherit;           /* toma el min-height de .hero/.hero--short */
  display: grid;
  align-items: center;           /* centra verticalmente lo que tengas dentro */
}

/* (Opcional) si tienes un bloque .mockup dentro del hero */
.hero .mockup{
  min-height: clamp(200px, 38dvh, 420px);
}