/* ========== RESET & BASE ========== */
/* Reset: quita margen y padding a todo, y pone box-sizing: border-box (mejor control de tamaños) */
*,
*::before,
*::after { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}
/* Base para body: fuente, color, fondo y altura de línea */
body {
  font-family: 'Poppins', sans-serif;      /* Fuente principal */
  background: #fff;                        /* Fondo blanco */
  color: #1a1a1a;                          /* Texto casi negro */
  line-height: 1.6;                        /* Altura de línea legible */
  font-size: 15px;                         /* Tamaño base de texto */
}

/* ========== TOP BAR ========== */
/* Barra superior fija, con datos de contacto/redes */
.top-bar {
  background: #203a5f; color: #fff;        /* Fondo azul oscuro, texto blanco */
  font-size: 14px; padding: 6px 20px;      /* Padding arriba/abajo e izq/der */
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; /* Distribuye y adapta al tamaño */
  position: fixed; top: 0; left: 0; width: 100vw; height: 43px; z-index: 1200; /* Fijo arriba, todo el ancho, por encima de casi todo */
}
.top-items { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.top-item { 
  display: flex; align-items: center; gap: 8px; 
  position: relative; padding: 0 8px; font-size: 13.5px; 
}
/* Línea separadora entre items, menos el último */
.top-item:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  height: 16px; width: 1px; background: rgba(255,255,255,0.3);
}
/* Iconos y redes sociales: tamaño y color */
.top-bar .icon img, .top-social img { width: 20px; height: 20px; filter: brightness(0) invert(1); transition: transform 0.2s; }
.top-social { display: flex; align-items: center; gap: 12px; }
.top-social img { width: 30px; height: 30px; }
.top-social img:hover { transform: scale(1.1); }

/* ========== NAV ========== */
/* ---------- NAVBAR PRINCIPAL ---------- */
nav {
  background: #fff;                        /* Fondo blanco */
  display: flex;                           /* Flexbox para layout horizontal */
  justify-content: space-between;          /* Espacio entre logo y links */
  align-items: center;                     /* Centrado vertical */
  padding: 16px 24px;                      /* Padding interno */
  border-bottom: 1px solid #e5e5e5;        /* Línea inferior */
  position: fixed; top: 41px; left: 0;     /* Fijo arriba, debajo de la top-bar */
  width: 100%;                             /* Ancho completo */
  height: 90px;                            /* Altura navbar */
  z-index: 1000;                           /* Encima de la mayoría de los elementos */
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.04); /* Sombra muy sutil */
}
/* ---------- LOGO Y SUBTÍTULO ---------- */
.logo-container {
  display: flex;            /* Usa Flexbox para alinear horizontalmente el logo y el subtítulo */
  align-items: center;      /* Centra verticalmente el logo y el subtítulo */
  gap: 10px;                /* Espacio de 10px entre el logo y el subtítulo */
  margin-left: 40px;        /* Deja un margen de 40px a la izquierda del logo (separa del borde) */
}
.logo-subtitle {
  font-size: 11px;          /* Tamaño de fuente pequeño para el subtítulo */
  font-weight: 500;         /* Peso de fuente medio (más grueso) */
  color: #080808;           /* Color casi negro para el texto */
  opacity: 0.8;             /* Opacidad al 80% (ligeramente desvanecido) */
  display: inline-block;    /* Hace que el elemento se comporte como un bloque en línea */
  height: 1px;              /* Altura mínima (normalmente decorativo, o para alineación) */
}

/* ---------- LINKS DE NAVEGACIÓN ---------- */
.nav-links {
  list-style: none;         /* Quita las viñetas/puntos de la lista */
  display: flex;            /* Muestra los elementos de la lista en una fila horizontal */
  gap: 24px;                /* Espacio de 24px entre cada link */
  align-items: center;      /* Centra los items verticalmente */
  margin-right: 36px;       /* Margen a la derecha (separa del borde del nav o de otros elementos) */
}
/* Estilos para los links de la navegación */
.nav-links li a {
  position: relative;       /* Para poder posicionar el subrayado animado (::after) */
  font-size: 19px;          /* Tamaño de fuente grande para links principales */
  font-weight: 500;         /* Peso medio para resaltar */
  color: #203a5f;           /* Azul oscuro como color de texto */
  text-decoration: none;    /* Quita el subrayado tradicional de los links */
  padding: 6px 0;           /* Espacio arriba y abajo del texto del link */
  transition: all 0.3s;     /* Transición suave para color y subrayado al hacer hover */
}

/* ---------- SUBRAYADO ANIMADO EN LINKS ---------- */
.nav-links li a::after {
  content: '';              /* Pseudo-elemento vacío: se usa como línea de subrayado */
  position: absolute;       /* Se posiciona en relación al <a> */
  bottom: -2px;             /* 2px por debajo del texto (justo debajo) */
  left: 0;                  /* Empieza desde el borde izquierdo */
  width: 0;                 /* Oculta la línea por defecto (para animación) */
  height: 2px;              /* Grosor del subrayado */
  background: #080808;      /* Color negro para la línea */
  transition: width 0.3s;   /* La animación de la línea solo afecta su ancho */
}
/* Al hacer hover sobre el link */
.nav-links li a:hover { color: #0a0a0a; }           /* Cambia el color del texto a negro puro */
.nav-links li a:hover::after { width: 100%; }       /* La línea se expande y cubre todo el ancho del link */

/* ---------- BOTÓN HAMBURGUESA (RESPONSIVE) ---------- */
.hamburger {
  display: none;            /* Por defecto, oculto (se muestra solo en pantallas pequeñas via media queries) */
  flex-direction: column;   /* Apila las barritas en columna (menú hamburguesa) */
  gap: 6px;                 /* Espacio entre cada barra de la hamburguesa */
  cursor: pointer;          /* Cambia el cursor a una mano al pasar encima */
  padding: 10px;            /* Zona clickeable más grande */
  background: none;         /* Sin fondo */
  border: none;             /* Sin borde */
  position: fixed;          /* Fijo respecto a la ventana */
  right: 16px;              /* Pegado al borde derecho */
  top: 30px;                /* Desde arriba, alineado al nav */
  z-index: 2000;            /* Aparece por encima de otros elementos */
}
.hamburger span {
  width: 25px;              /* Ancho de cada barra */
  height: 4px;              /* Grosor de cada barra */
  background: #1b0275;      /* Color azul oscuro para la barra */
  border-radius: 2px;       /* Bordes redondeados para suavidad */
  transition: all 0.3s;     /* Transición suave para animaciones (ejemplo: convertir en una "X") */
}


/* ========== HERO SECTION ========== */

/* ========== HERO SECTION ========== */
.hero {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('/Multimedia/Imagenes/first-section.jpg');
  background-size: cover;
  background-position: center;
  height: 99vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.hero-content {
  max-width: 700px;
  text-align: center;
  color: #fff;
}

.hero-content h1 {
  font-size: 48px;
  font-weight: 600;
  margin-bottom: 10px;
}

.hero-content h1 span {
  display: block;
  font-weight: 700;
  color: #eaeaea;
  font-size: 40px;
}

.hero-content p {
  font-size: 16px;
  color: #e0e0e0;
  margin-bottom: 26px;
}

.animate-on-load h1,
.animate-on-load p,
.animate-on-load a {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.animate-on-load.loaded h1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.animate-on-load.loaded p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

.animate-on-load.loaded a {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.8s;
}









.checkup-btn {
  background: transparent;           /* Fondo transparente */
  color: #fff;                       /* Texto blanco */
  border: 1.5px solid #fff;          /* Borde blanco delgado */
  padding: 10px 24px;                /* Espaciado vertical y horizontal */
  font-size: 14px;                   /* Tamaño del texto */
  font-weight: 500;                  /* Seminegrita */
  border-radius: 6px;                /* Bordes redondeados */
  transition: all 0.1s;              /* Transición rápida en hover */
  text-decoration: none;             /* Sin subrayado */
  cursor: pointer;                   /* Cursor de mano */
}
.checkup-btn:hover { 
  background: #2b4a8f;               /* Fondo azul en hover */
  color: #1a1a1a;                    /* Texto oscuro en hover */
}

.hero1 {
  position: relative;                /* Contexto para overlay y video */
  height: 400px;                     /* Ocupa el alto de la ventana visible */
  min-height:550px;                 /* Altura mínima para pantallas chicas */
  overflow: hidden;                  /* Oculta lo que sobresale (ej. video recortado) */
  display: flex;                     /* Flexbox para contenido */
  align-items: center;               /* Centrado vertical */
  justify-content: flex-end;         /* Contenido pegado a la derecha */
  background: transparent;           /* Sin fondo, se verá el video */
}
/* ---- Overlay oscuro para mejorar legibilidad ---- */
.hero1::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100vw; height: 100vh;       /* ¡Debe ser igual al hero y video! */
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(108deg,rgba(17,22,35,0.38) 38%,rgba(29,35,62,0.19) 100%);
}

/* ---- VIDEO DE FONDO ---- */
.hero-bg-video1 {
  position: absolute;                /* Relativo a .hero1 */
  top: 0;
  left: 0;
  width: 1400px;                      /* Cubre todo el ancho de la ventana */
  height: 950px;                     /* Cubre todo el alto de la ventana */
  object-fit: cover;                 /* Recorta el video si es necesario para cubrir */
  z-index: 0;                        /* Detrás del overlay y del contenido */
  pointer-events: none;              /* Permite clics en el contenido arriba */
  transition: top 0.22s cubic-bezier(.38,.16,.68,.89);
  will-change: top;
}
/* ¡El video ahora siempre cubre todo el hero! */
.hero1-content {
  position: relative;
  z-index: 3;                          /* Encima del overlay/video */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  max-width: 700px;
  height: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: 0;
  padding: 1.5rem 3vw 2rem 1rem;      /* Ajusta para tu diseño */
}

.hero1-content h1 {
  margin-top: 80px;
  width: 900px;
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 100px;
  letter-spacing: -1px;
  line-height: 1.05;
  color: white;
  text-align: right;
}
.hero1-content h1 span {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
}
.hero1-content p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  color: #f5f5f5;
  max-width: 600px;
}
.checkup-btn1 {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  padding: 0.7rem 2.3rem;
  border-radius: 22px;
  font-size: 1.09rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(33,62,154,0.07);
  transition: background 0.2s, color 0.2s, border 0.2s;
  margin-top: 1rem;
}
.checkup-btn1:hover {
  background: #fff;
  color: #213e9a;
  border-color: #fff;
}




@media (max-width: 800px) {
  .hero1-content {
    max-width: 90vw;
    padding: 1.5rem 2vw 1.5rem 0.7rem;
  }
  .hero1-content h1 { font-size: 2rem; }
  .hero1-content h1 span { font-size: 1.4rem; }
  .hero1-content p { font-size: 1rem; max-width: 100%; }
}
@media (max-width: 600px) {
  .hero1 { min-height: 320px; height: 70vh; }
  .hero1-content {
    max-width: 100vw;
    padding: 1.1rem 1rem 1.1rem 0.3rem;
  }
}




/* ========== ABOUT SECTION ========== */
/* Fila con imagen y texto (misión/visión, etc) */
.about-row {
  display: flex;                                    /* Flexbox para imagen y texto */
  align-items: center;                              /* Centrado vertical */
  justify-content: space-between;                   /* Espacio entre imagen y texto */
  gap: 2rem;                                        /* Espacio entre ambos bloques */
  background: #fff;                                 /* Fondo blanco para el bloque */
  border-radius: 18px;                              /* Bordes redondeados */
  box-shadow: 0 4px 22px rgba(40,60,120,0.07);      /* Sombra ligera */
  padding: 2rem;                                    /* Espaciado interno */
  min-height: 270px;                                /* Altura mínima */
  flex-wrap: wrap;                                  /* Permite saltar a columna en pantallas chicas */
  opacity: 0;                                       /* Por defecto, oculto (para animación) */
  transform: translateY(38px);                      /* Desplazado hacia abajo para animación */
  transition: 
    opacity 0.85s cubic-bezier(.38,.88,.57,1.08), 
    transform 0.85s cubic-bezier(.38,.88,.57,1.08); /* Animaciones suaves */
  will-change: opacity, transform;                  /* Optimización de animaciones */
}
.about-row.visible { 
  opacity: 1;                                       /* Se hace visible */
  transform: translateY(0);                         /* Vuelve a su lugar (sin desplazamiento) */
}
.about-img {
  flex: 1 1 45%;                                    /* Imagen ocupa 45% del ancho, crece/encoge */
  display: flex; justify-content: center; align-items: center;
}
.about-img img {
  width: 100%; max-width: 540px;                    /* Ocupa el ancho disponible, máximo 540px */
  aspect-ratio: 16/10;                              /* Proporción moderna para imágenes rectangulares */
  border-radius: 16px;                              /* Bordes redondeados */
  object-fit: cover;                                /* Imagen rellena el espacio sin distorsión */
  box-shadow: 0 2px 16px rgba(50,80,120,0.09);      /* Sombra suave */
  background: #eaeef5;                              /* Color de fondo de refuerzo */
}
.about-text {
  flex: 1 1 50%;                                    /* Texto ocupa 50% del ancho, crece/encoge */
  max-width: 550px;                                 /* Máximo ancho de texto */
  text-align: left;                                 /* Texto alineado a la izquierda */
}
.about-text h2 {
  color: #25417a;                                   /* Azul para títulos */
  font-size: 1.8rem;                                /* Tamaño de fuente grande */
  margin-bottom: 12px;                              /* Espacio debajo del título */
  font-weight: 700;                                 /* Bold */
  letter-spacing: -0.5px;                           /* Letras ligeramente más juntas */
}
.about-text p {
  font-size: 1.13rem;                               /* Un poco más grande que el texto normal */
  color: #38506a;                                   /* Azul grisáceo para el texto */
  margin: 0;                                        /* Sin margen extra */
  line-height: 1.55;                                /* Espaciado entre líneas para legibilidad */
}

/* ========== SERVICES SECTION ========== */
.services {
  background: #faf8f8;                  /* Fondo gris muy claro para diferenciar la sección */
  padding: 38px 14px 46px 14px;         /* Espaciado interno: arriba, lados, abajo */
}
.services-container {
  max-width: 950px;                     /* Ancho máximo del contenedor (centrado en pantallas grandes) */
  margin: 0 auto;                       /* Centra el contenedor horizontalmente */
  text-align: center;                   /* Centra todo el texto dentro del contenedor */
}
.services-title {
  display: flex;                        /* Flexbox para organizar título y líneas decorativas */
  align-items: center;                  /* Centra verticalmente los elementos */
  justify-content: center;              /* Centra horizontalmente el grupo */
  margin-bottom: 24px;                  /* Espacio debajo del título */
  margin-top: 4px;                      /* Espacio arriba del título */
  width: 100%;                          /* Ocupa todo el ancho disponible */
  padding: 0;                           /* Sin padding */
  gap: 0;                               /* Sin separación extra entre elementos (líneas y span) */
}
.services-title span {
  display: inline-block;                /* Hace que el <span> se comporte como bloque en línea */
  font-size: 2.1rem;                    /* Título grande */
  font-weight: 700;                     /* Título en bold */
  color: #1d3363;                       /* Azul oscuro */
  letter-spacing: 0.01em;               /* Espaciado mínimo entre letras */
  padding: 0 34px;                      /* Padding horizontal para separar del decorado */
  position: relative;                   /* Permite superponer decoraciones/líneas */
  background: #faf8f8;                  /* Fondo igual que el de la sección (corta las líneas laterales) */
  z-index: 1;                           /* Lo pone por encima de las líneas decorativas */
}
/* Líneas laterales del título: crea dos líneas horizontales a los lados del span */
.services-title::before,
.services-title::after {
  content: "";                          /* Elemento vacío usado como decoración */
  flex: 1 1 0%;                         /* Líneas expandibles a los lados del span */
  height: 2px;                          /* Grosor de la línea */
  min-width: 24px;                      /* Mínimo de 24px (si el espacio es muy pequeño) */
  max-width: 100vw;                     /* Máximo el ancho de la pantalla */
  background: linear-gradient(90deg, #e1e5f2 70%, #b5c6e0 100%);
  /* Degradado azul muy suave de izquierda a derecha */
  border-radius: 1px;                   /* Bordes ligeramente redondeados */
}
.services-title::before { margin-right: -14px; }   /* Junta la línea izquierda con el span */
.services-title::after { margin-left: -14px; }     /* Junta la línea derecha con el span */

.services-desc {
  color: #475075;                       /* Texto gris-azulado */
  font-size: 1.09rem;                   /* Tamaño medio */
  margin: 0 auto 13px auto;             /* Centrado horizontal, margen inferior de 13px */
  max-width: 550px;                     /* Limita el ancho máximo para que sea fácil de leer */
  line-height: 1.45;                    /* Espaciado vertical entre líneas */
  letter-spacing: 0.01em;               /* Espaciado mínimo entre letras */
  font-weight: 400;                     /* Grosor regular */
  padding-bottom: 8px;                  /* Espacio debajo del párrafo */
  opacity: 0.85;                        /* Un poco desvanecido para menos protagonismo */
  font-family: 'Inter', 'Segoe UI', 'Poppins', Arial, sans-serif;
  /* Prioridad de fuentes modernas para mejor apariencia */
}
.services-grid {
  display: grid;                        /* Usa CSS Grid para distribuir servicios */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  /* Crea columnas responsivas de mínimo 260px, máximo el espacio disponible */
  gap: 28px;                            /* Espacio entre cada servicio */
}
.service-box {
  background: #f8f8f8;                  /* Fondo gris muy claro para las cajas */
  padding: 24px;                        /* Espaciado interno generoso */
  border-radius: 10px;                  /* Bordes redondeados */
  box-shadow: 0 4px 12px rgba(0,0,0,0.04); /* Sombra sutil para efecto de tarjeta flotante */
  transition: transform 0.3s, box-shadow 0.3s; /* Animación suave al hacer hover */
}
.service-box:hover {
  transform: translateY(-6px);          /* Eleva la caja ligeramente */
  box-shadow: 0 8px 20px rgba(0,0,0,0.08); /* Sombra más profunda al hacer hover */
}
.service-box img {
  width: 58px; height: 58px;            /* Tamaño del icono/imagen del servicio */
  margin-bottom: 14px;                  /* Espacio debajo del icono */
}
.service-box h3 {
  font-size: 17px;                      /* Tamaño de título del servicio */
  color: #203a5f;                       /* Azul oscuro */
  margin-bottom: 10px;                  /* Espacio debajo del título */
}
.service-box p {
  font-size: 15px;                      /* Texto más grande que el default */
  color: #333;                          /* Gris oscuro para buena lectura */
  line-height: 1.5;                     /* Espaciado vertical cómodo */
}


/* ========== TESTIMONIOS/CARRUSEL (y ribbons) ========== */
/* Encabezado de la sección de testimonios/clientes */
.clientes-header {
  max-width: 780px;                 /* Limita el ancho para que sea fácil de leer en pantallas grandes */
  margin: 0 auto 36px auto;         /* Centrado horizontal, 36px de espacio debajo */
  text-align: center;               /* Centra el contenido dentro del header */
  padding-top: 18px;                /* Espacio arriba del header */
}
.clientes-header h2 {
  font-size: 2.1rem;                /* Título grande */
  color: #203a5f;                   /* Azul oscuro */
  font-weight: 700;                 /* Bold */
  letter-spacing: -1px;             /* Letras un poco más juntas */
  margin-bottom: 8px;               /* Espacio debajo del h2 */
}
.clientes-header p {
  font-size: 1.07rem;               /* Texto más grande que default */
  color: #415271;                   /* Azul grisáceo */
  margin-bottom: 0;                 /* Sin espacio debajo (ajusta el bloque) */
  font-weight: 400;                 /* Normal */
  line-height: 1.6;                 /* Espaciado entre líneas cómodo */
}

/* Carrusel de testimonios: tarjeta slider */
.testimonios-carrusel {
  width: 100%;                      /* Ocupa todo el ancho disponible */
  max-width: 1050px;                /* Pero no más de 1050px para que no sea tan ancho en desktop */
  margin: 48px auto;                /* Centrado, espacio arriba y abajo */
  background: #fcfbfb;              /* Fondo gris súper claro */
  border-radius: 36px;              /* Bordes bien redondeados, estilo tarjeta moderna */
  box-shadow: 0 4px 32px 0 rgba(219,219,219,0.07); /* Sombra sutil */
  overflow: hidden;                 /* Oculta cualquier contenido fuera del borde */
  padding: 0;                       /* Sin padding por defecto */
  position: relative;               /* Para superponer dots u otros elementos si es necesario */
  transition: box-shadow .23s;      /* Transición suave para la sombra (hover o focus) */
}

/* Slider principal: contiene todos los slides en línea */
.testimonios-slider {
  display: flex;                    /* Flexbox para poner cada testimonio como slide horizontal */
  transition: transform 1.0s cubic-bezier(.65,1.32,.48,1.13); /* Animación custom cuando cambias de slide */
  will-change: transform;           /* Optimización para animaciones de slider */
}

/* Cada testimonio o "item" (ribbons: variación del mismo estilo) */
.testimonio-item, .testimonio-ribbons-item {
  display: flex;                    /* Flexbox, permite separar imagen y texto */
  align-items: center;              /* Centrado vertical */
  min-width: 100%;                  /* Cada slide ocupa el 100% del carrusel (una a la vez) */
  padding: 42px 24px;               /* Padding amplio alrededor del contenido */
  gap: 36px;                        /* Espacio entre imagen y texto */
  box-sizing: border-box;           /* Padding incluido en el ancho total */
  background: none;                 /* Fondo transparente (hereda el del carrusel) */
}

/* Contenido textual de cada testimonio (o texto de ribbons) */
.testimonio-content, .testimonio-ribbons-content {
  flex: 1.1;                        /* Toma un poco más de espacio que la imagen */
  display: flex; flex-direction: column; /* Columnas: nombre, blockquote, etc. */
  justify-content: center;          /* Centra el contenido verticalmente */
  align-items: flex-start;          /* Alinea a la izquierda */
  min-width: 250px;                 /* Mínimo ancho del bloque */
  max-width: 420px;                 /* Máximo ancho para que no sea demasiado largo */
}

/* Logo del cliente dentro del testimonio */
.testimonio-logo {
  padding: 10px;                    /* Espacio alrededor del logo */
  width: 130px;                     /* Ancho fijo */
  margin-bottom: 0;                 /* Sin margen abajo */
  object-fit: contain;              /* El logo nunca se deforma, mantiene proporción */
}

/* Blockquote o texto principal del testimonio */
.testimonio-content blockquote, .testimonio-ribbons-text {
  font-size: 1.12rem;               /* Texto grande para legibilidad */
  color: #16223c;                   /* Azul oscuro */
  font-weight: 500;                 /* Medio (más visible) */
  line-height: 1.6;                 /* Espaciado entre líneas cómodo */
  margin: 20px auto;                /* Espacio arriba y abajo, centrado */
  text-align: justify;              /* Justificado para bloque de texto */
  border-left: none;                /* Sin línea lateral por defecto de blockquote */
  padding: 0 20px;                  /* Padding lateral */
  max-width: 700px;                 /* Máximo ancho */
  background: none;                 /* Sin fondo extra */
}

/* Nombre de quien da el testimonio */
.testimonio-nombre, .testimonio-ribbons-nombre {
  color: #284471;                   /* Azul intenso */
  font-size: 0.99rem;               /* Un poco más pequeño que el texto normal */
  margin-bottom: 9px;               /* Espacio debajo */
  margin-top: 0;                    /* Sin espacio arriba */
  font-weight: 500;                 /* Medium */
  letter-spacing: .01em;            /* Ligerísimo espaciado entre letras */
}

/* Link de cliente o llamado a la acción */
.testimonio-content a, .testimonio-ribbons-link {
  color: #4b51c3;                   /* Azul vibrante */
  font-size: .98rem;                /* Pequeño pero legible */
  font-weight: 500;                 /* Medio */
  text-decoration: underline;       /* Subrayado (tipo link tradicional) */
  margin-top: 2px;                  /* Pequeño espacio arriba */
  transition: color 0.17s;          /* Transición de color suave al hover */
}
.testimonio-content a:hover, .testimonio-ribbons-link:hover {
  color: #16223c;                   /* Cambia a azul oscuro al pasar el mouse */
}

/* Fondo de la imagen del testimonio (o ribbons) */
.testimonio-img-bg, .testimonio-ribbons-img-bg {
  flex: 1.6;                        /* Imagen ocupa más espacio que el texto (puedes ajustar el ratio) */
  display: flex; align-items: center; justify-content: center; /* Centra la imagen */
  min-width: 220px;                 /* Mínimo ancho de la imagen */
  max-width: 500px;                 /* Máximo ancho */
  height: 330px;                    /* Altura fija para uniformidad */
  border-radius: 32px;              /* Bordes muy redondeados para suavidad */
  overflow: hidden;                 /* Recorta cualquier parte fuera de los bordes */
  background: #f7f7f7;              /* Fondo gris claro para cuando no hay imagen */
  box-shadow: 0 2px 18px 0 rgba(20,38,65,0.04); /* Sombra sutil */
  transition: box-shadow .25s;      /* Sombra suave al hacer hover, si se implementa */
}

/* Imagen dentro del fondo de testimonio (o ribbons) */
.testimonio-img-bg img, .testimonio-ribbons-img-bg img {
  width: 100%; height: 100%;        /* Imagen llena todo el espacio disponible */
  object-fit: cover;                /* Recorta la imagen para que nunca se deforme */
  border-radius: 32px;              /* Coincide con el fondo */
  filter: blur(0.1px) brightness(0.99); /* Ligero blur y ajuste de brillo (look moderno) */
  transition: filter 0.25s;         /* Transición suave si hay hover o efecto dinámico */
  box-shadow: none;                 /* Sin sombra en la imagen */
}

/* Letra/logo de ribbons (si se usa) */
.logo-letra-ribbons { font-size: 30px; } /* Tamaño grande para letra/logo extra */

/* Dots de paginación del carrusel */
.testimonios-dots {
  display: flex;                    /* Dots alineados en fila */
  justify-content: center;          /* Centra horizontalmente */
  gap: 9px;                         /* Espacio entre cada dot */
  margin: 0 0 16px 0;               /* Solo margen abajo de 16px */
  position: relative;               /* Permite ajustes verticales */
  top: 10px;                        /* Sube un poco los dots respecto al carrusel */
}
.testimonios-dot {
  width: 12px; height: 12px;        /* Tamaño de cada dot */
  border-radius: 50%;               /* Circulares */
  background: #fff;                 /* Fondo blanco */
  border: 1.5px solid #203a5f33;    /* Borde azul muy tenue (transparente) */
  cursor: pointer;                  /* Cambia a manita en hover */
  transition: background 0.23s, border 0.23s; /* Transición suave de color/borde */
}
.testimonios-dot.active {
  background: #203a5f;              /* Dot activo es azul oscuro */
  border: 1.5px solid #203a5f;      /* Borde azul fuerte cuando está activo */
}

/* ========== FOOTER ========== */
/* Pie de página y columnas del footer */
.footer {
  background: #0e1b2b;                /* Fondo azul marino muy oscuro */
  color: #fff;                        /* Texto blanco por defecto */
  font-family: 'Poppins', sans-serif; /* Fuente moderna y legible */
  padding: 50px 20px 20px;            /* Espaciado: arriba 50px, lados 20px, abajo 20px */
}
.footer-container {
  max-width: 1200px;                  /* Máximo ancho del footer en pantallas grandes */
  margin: auto;                       /* Centrado horizontal */
  display: grid;                      /* Usa CSS Grid para layout flexible */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  /* Divide el footer en columnas que se ajustan, mínimo 220px cada una */
  gap: 40px;                          /* Espacio entre columnas */
}
.footer-column h3, .footer-column h4 {
  color: #fff;                        /* Títulos en blanco */
  margin-bottom: 8px;                 /* Espacio debajo de cada título */
}
.footer-column h3 {
  font-size: 20px;                    /* Título principal más grande */
}
.footer-column h4 {
  font-size: 16px;                    /* Subtítulo más pequeño */
  margin-bottom: 10px;                /* Espacio extra debajo */
}
.footer-column p, .footer-column a {
  font-size: 14px;                    /* Texto base más pequeño */
  color: #ccc;                        /* Gris claro para texto y links */
  text-decoration: none;              /* Quita subrayado a los links */
  line-height: 1.6;                   /* Espaciado cómodo para lectura */
}
.footer-column ul {
  list-style: none;                   /* Quita las viñetas de listas */
  padding: 0;                         /* Quita el padding por defecto de las listas */
}
.footer-column ul li {
  margin-bottom: 8px;                 /* Espacio entre cada elemento de la lista */
}
.footer-column ul li a:hover {
  color: #fff;                        /* Links se vuelven blancos al pasar el mouse */
}
.social-icons {
  display: flex;                      /* Íconos en línea horizontal */
  gap: 12px;                          /* Espacio entre íconos */
  margin: 10px 0;                     /* Espacio arriba y abajo */
}
.social-icons img {
  width: 22px; height: 22px;          /* Tamaño fijo de cada ícono */
  filter: brightness(0) invert(1);    /* Hace los íconos blancos (ideal para logos en SVG/PNG) */
  transition: transform 0.3s;         /* Animación suave al hacer hover */
}
.social-icons img:hover {
  transform: scale(1.1);              /* Ícono crece ligeramente en hover */
}
.footer-column .address {
  margin-top: 12px;                   /* Espacio arriba de la dirección */
  font-size: 13px;                    /* Tamaño pequeño para dirección */
  color: #bbbbbb;                     /* Gris aún más claro para texto menos importante */
}
.footer-column iframe {
  border: none;                       /* Sin borde */
  border-radius: 6px;                 /* Bordes redondeados */
  width: 100%;                        /* Ocupa todo el ancho de la columna */
  height: 160px;                      /* Altura fija para mapas, etc */
  box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* Sombra sutil para el iframe (ej. Google Maps) */
}
.footer-bottom {
  border-top: 1px solid #1a2c3f;      /* Línea separadora arriba */
  text-align: center;                  /* Texto centrado */
  margin-top: 40px;                    /* Espacio arriba */
  padding-top: 16px;                   /* Padding arriba del texto inferior */
  font-size: 13px;                     /* Texto pequeño */
  color: #999;                         /* Gris para menos protagonismo */
}


/* ========== PROYECTOS ========== */
.proyectos {
  padding: 60px 0 40px 0;            /* Espacio: arriba 60px, lados 0, abajo 40px */
  background: #f8f9fb;               /* Fondo gris muy claro, diferente al resto del sitio */
  text-align: center;                /* Centra el texto y los elementos hijos */
}
.proyectos-titulo {
  font-size: 2rem;                   /* Título grande para la sección */
  color: #203a5f;                    /* Azul oscuro, consistente con el branding */
  font-weight: 700;                  /* Bold para destacar */
  margin-bottom: 40px;               /* Espacio debajo del título */
  letter-spacing: -0.5px;            /* Letras ligeramente más juntas */
}
.proyectos-galeria {
  display: grid;                     /* Usa CSS Grid para organizar los proyectos */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  /* Genera tantas columnas como quepan, mínimo 260px cada una, máximo 1fr */
  gap: 30px;                         /* Espacio de 30px entre cada proyecto */
  max-width: 1200px;                 /* Limita el ancho total de la galería */
  margin: 0 auto;                    /* Centra la galería horizontalmente */
}
.proyecto-card {
  background: #fff;                  /* Fondo blanco para cada tarjeta de proyecto */
  border-radius: 16px;               /* Bordes redondeados */
  box-shadow: 0 4px 24px 0 rgba(30,60,100,0.07); /* Sombra sutil para efecto flotante */
  overflow: hidden;                  /* Recorta cualquier desbordamiento (como el border-radius en la imagen) */
  transition: transform 0.22s, box-shadow 0.22s; /* Animación suave al hacer hover */
  cursor: pointer;                   /* Cursor tipo mano para indicar que es clickeable */
  display: flex;                     /* Flexbox para organizar el contenido verticalmente */
  flex-direction: column;            /* Apila hijos en columna */
  align-items: stretch;              /* Los hijos ocupan todo el ancho disponible */
}
.proyecto-card:hover {
  transform: translateY(-4px) scale(1.03);  /* Eleva y agranda ligeramente la tarjeta */
  box-shadow: 0 8px 32px 0 rgba(30,60,100,0.14); /* Sombra más grande al hacer hover */
}
.proyecto-card img {
  width: 100%;                       /* Imagen ocupa todo el ancho de la tarjeta */
  height: 170px;                     /* Altura fija para mantener uniformidad */
  object-fit: cover;                 /* Imagen rellena el espacio sin distorsionarse */
  border-bottom: 1px solid #e5eaf1;  /* Línea divisoria suave debajo de la imagen */
  transition: filter 0.21s;          /* Transición suave de filtros (hover) */
}
.proyecto-card:hover img {
  filter: brightness(0.95) blur(0.2px); /* Imagen se oscurece y desenfoca muy poco en hover */
}
.proyecto-info {
  padding: 18px 16px 22px 16px;      /* Padding: arriba, lados, abajo */
}
.proyecto-info h3 {
  font-size: 1.13rem;                /* Título del proyecto (ligeramente más grande que texto normal) */
  color: #284471;                    /* Azul intenso */
  margin-bottom: 8px;                /* Espacio debajo del título */
}
.proyecto-info p {
  font-size: 0.99rem;                /* Texto descriptivo ligeramente más pequeño */
  color: #415168;                    /* Azul grisáceo para contraste */
  margin: 0;                         /* Sin margen extra (mantiene todo alineado) */
}

/* ========== CONTACT/DOMAIN CARDS ========== */
.unified-contact-domain {
  background: #f7fafd;                    /* Fondo gris-azulado muy claro para toda la sección */
  padding: 54px 10px;                     /* Espacio: 54px arriba/abajo, 10px lados */
  min-height: 460px;                      /* Altura mínima de la sección */
  display: flex;                          /* Flexbox para centrar el contenido */
  justify-content: center;                /* Centra horizontalmente */
  align-items: center;                    /* Centra verticalmente */
}
.ucd-flex {
  display: flex;                          /* Flexbox para las dos tarjetas (contacto/dominio) */
  flex-direction: row;                    /* Tarjetas una al lado de la otra */
  justify-content: center;                /* Centra todo el grupo horizontalmente */
  align-items: flex-start;                /* Alinea tarjetas al inicio verticalmente */
  gap: 54px;                              /* Espacio entre las tarjetas */
  width: 100%;                            /* Ocupa todo el ancho posible */
  max-width: 1080px;                      /* Pero no pasa de 1080px de ancho */
  margin: 0 auto;                         /* Centrado en pantalla */
  flex-wrap: nowrap;                      /* No permite salto de línea (se fuerza en media queries) */
}
.ucd-domain, .ucd-contact {
  background: #fff;                       /* Fondo blanco para las tarjetas */
  border-radius: 18px;                    /* Bordes muy redondeados */
  box-shadow: 0 2px 12px 0 rgba(36,60,95,0.06); /* Sombra suave, look de tarjeta */
  border: 1.3px solid #e7ebf3;            /* Borde sutil, gris-azulado */
  padding: 32px 20px 26px 20px;           /* Espaciado interno: arriba, lados, abajo */
  flex: 1 1 350px;                        /* Flex: crece, encoge, base mínima 350px */
  max-width: 400px;                       /* No pasa de 400px de ancho */
  min-width: 260px;                       /* Mínimo 260px de ancho */
  display: flex; flex-direction: column;  /* Todo el contenido en columna */
  align-items: stretch;                   /* Hijos ocupan el 100% del ancho */
  margin: 0; gap: 16px;                   /* Espacio entre elementos internos */
  transition: box-shadow 0.19s, border-color 0.19s, transform 0.19s;
  /* Animaciones suaves para sombra, borde y movimiento */
}
.ucd-domain:hover, .ucd-contact:hover {
  box-shadow: 0 7px 28px 0 rgba(36,60,95,0.11); /* Sombra más intensa al pasar mouse */
  border-color: #c2d1ea;                /* Borde más azul al hacer hover */
  transform: translateY(-2.5px) scale(1.015); /* Eleva y agranda un poco la tarjeta */
  background: #fcfdff;                  /* Fondo blanco aún más claro */
}
.ucd-domain h2, .ucd-contact h2 {
  color: #25395a;                      /* Azul oscuro para títulos */
  font-size: 1.28rem;                   /* Título grande */
  margin-bottom: 4px;                   /* Espacio debajo */
  font-weight: 700;                     /* Bold */
  letter-spacing: -0.2px;               /* Letras más juntas */
  text-align: left;                     /* Alineado a la izquierda */
  line-height: 1.12;                    /* Espaciado vertical reducido */
}
.ucd-desc, .ucd-contact p {
  font-size: 1.01rem;                   /* Texto ligeramente mayor que el default */
  color: #495b6e;                       /* Gris azulado para buena lectura */
  margin-bottom: 0;                     /* Sin margen abajo */
  font-weight: 400;                     /* Regular */
  line-height: 1.38;                    /* Espaciado vertical medio */
  text-align: left;                     /* Texto alineado a la izquierda */
  opacity: 0.94;                        /* Ligera transparencia (menos protagonismo) */
  margin-top: 2px;                      /* Espacio arriba si lo requiere */
}
.ucd-domain form, .ucd-contact form {
  display: flex;                        /* Formulario como flexbox */
  flex-direction: column;               /* Campos uno debajo del otro */
  gap: 13px;                            /* Espacio entre campos */
  margin-bottom: 0;                     /* Sin margen abajo del form */
}
/* Inputs de ambos formularios */
.ucd-domain input[type="text"], .ucd-domain input[type="email"],
.ucd-contact input[type="text"], .ucd-contact input[type="email"], .ucd-contact textarea {
  background: #f8fafd;                  /* Fondo gris claro */
  border: 1.1px solid #d5e2f3;          /* Borde sutil gris azulado */
  border-radius: 7px;                   /* Bordes redondeados */
  font-size: 15px;                      /* Texto base grande */
  padding: 10px 10px;                   /* Espacio dentro del campo */
  outline: none;                        /* Quita el outline default del navegador */
  transition: border-color 0.18s, box-shadow 0.18s;
  /* Animaciones suaves para foco y sombra */
}
/* Efecto al enfocar (focus) el input o textarea */
.ucd-domain input[type="text"]:focus, .ucd-domain input[type="email"]:focus,
.ucd-contact input[type="text"]:focus, .ucd-contact input[type="email"]:focus,
.ucd-contact textarea:focus {
  border-color: #25395a;                /* Borde azul oscuro */
  box-shadow: 0 2px 10px 0 rgba(32,58,95,0.06); /* Sombra sutil */
}
/* Botón de enviar */
.ucd-domain button, .ucd-contact .btn-enviar {
  background: #25395a;                  /* Azul oscuro de marca */
  color: #fff;                          /* Texto blanco */
  border: none;                         /* Sin borde */
  border-radius: 7px;                   /* Bordes redondeados */
  font-size: 15px;                      /* Tamaño base de botón */
  font-weight: 600;                     /* Bold/medium */
  padding: 10px 0;                      /* Padding arriba y abajo */
  margin-top: 4px;                      /* Espacio arriba */
  cursor: pointer;                      /* Cursor de mano */
  transition: background 0.18s, transform 0.13s; /* Transiciones suaves */
  letter-spacing: .01em;                /* Ligerísimo espaciado entre letras */
}
.ucd-domain button:hover, .ucd-contact .btn-enviar:hover {
  background: #16223c;                  /* Azul más oscuro en hover */
  transform: translateY(-1.5px) scale(1.03); /* Eleva y agranda un poco el botón */
}
/* Mensaje seguro para avisar de protección de datos, etc */
.ucd-secure {
  display: flex; align-items: center;   /* Alinea icono/texto en fila */
  gap: 5px;                             /* Espacio entre ícono y texto */
  margin: 6px 0 0 0;                    /* Margen arriba */
  font-size: 0.92rem;                   /* Texto pequeño */
  color: #18b28c;                       /* Verde (look de éxito/confianza) */
  font-weight: 500;                     /* Medium */
  opacity: 0.84;                        /* Un poco desvanecido */
}
.ucd-secure svg {
  vertical-align: middle;               /* Centra verticalmente el ícono */
  margin-right: 2px;                    /* Espacio a la derecha del ícono */
}
/* Tips bajo el formulario */
.ucd-tip {
  font-size: 0.91rem;                   /* Más pequeño que el default */
  color: #55607a;                       /* Azul grisáceo */
  margin-top: 5px;                      /* Espacio arriba */
  margin-bottom: 0;                     /* Sin espacio abajo */
}
.ucd-tip span {
  background: #f5f7fc;                  /* Fondo gris súper claro */
  color: #25395a;                       /* Azul oscuro */
  border-radius: 3px;                   /* Bordes muy redondeados */
  padding: 2px 7px;                     /* Espaciado alrededor */
  margin: 0 3px;                        /* Espacio a los lados */
  font-weight: 500;                     /* Medium */
}
/* Grupo de campos en contacto (nombre/correo) juntos en una línea */
.ucd-contact .form-group {
  display: flex;                        /* Flexbox en línea */
  gap: 10px;                            /* Espacio entre campos */
  flex-wrap: wrap;                      /* Permite salto de línea en pantallas chicas */
}
/* Para efecto de label flotante */
.ucd-contact .input-wrap {
  flex: 1 1 100px;                      /* Toma espacio, mínimo 100px */
  display: flex; flex-direction: column-reverse; /* Label va debajo del input visualmente */
  position: relative;                   /* Permite posicionar el label flotante */
  min-width: 120px;                     /* No más chico que 120px */
}
.ucd-contact label {
  color: #7a8ba3;                       /* Azul grisáceo, menos importante */
  font-size: 13px;                      /* Pequeño */
  position: absolute;                   /* Posiciona encima del input */
  left: 13px; top: 15px;                /* Alineado dentro del input */
  pointer-events: none;                 /* No bloquea click en el input */
  transition: all 0.18s;                /* Suave al flotar */
  background: transparent;              /* Sin fondo por defecto */
}
/* Label flotante: cuando input tiene foco o no está vacío */
.ucd-contact input:focus + label, .ucd-contact input:not(:placeholder-shown) + label,
.ucd-contact textarea:focus + label, .ucd-contact textarea:not(:placeholder-shown) + label {
  top: -9px; left: 7px;                 /* Sube el label arriba del input */
  font-size: 11px;                      /* Más pequeño */
  color: #25395a;                       /* Azul oscuro, más importante */
  background: #fff;                     /* Fondo blanco para que se vea bien sobre el input */
  padding: 0 3px;                       /* Espacio a los lados del texto */
  font-weight: 600;                     /* Más bold cuando está flotando */
}
.ucd-contact textarea {
  min-height: 64px;                     /* Altura mínima mayor para mensajes largos */
}
/* Mensaje de éxito al enviar formulario */
.ucd-contact .contact-success {
  margin-top: 7px;                      /* Espacio arriba */
  color: #24be7a;                       /* Verde (éxito) */
  font-size: 14px;                      /* Pequeño */
  letter-spacing: .02em;                /* Ligero espaciado entre letras */
  opacity: 0;                           /* Por defecto, invisible */
  animation: successFade 0.9s 0.12s forwards; /* Fade-in animado tras enviar */
}
/* Animación de fade para éxito */
@keyframes successFade {
  from { opacity: 0; transform: scale(0.98);}
  to { opacity: 1; transform: scale(1);}
}


/* ========== PARTNERS ========== */
/* Espacio a la izquierda para las imágenes de logos de partners */
.Partners img { 
  padding-left: 10px;              /* Separa cada logo del anterior (solo izquierda) */
}

/* ========== WHATSAPP FLOAT BUTTON ========== */
.whatsapp-float {
  position: fixed;                 /* El botón queda fijo en la pantalla aunque hagas scroll */
  bottom: 28px; right: 28px;       /* Lo coloca en la esquina inferior derecha, con 28px de margen */
  z-index: 9999;                   /* Muy por encima de cualquier otro elemento */
  background: #25d366;             /* Color oficial WhatsApp (verde) */
  border-radius: 50%;              /* Hace el fondo perfectamente circular */
  box-shadow: 0 3px 18px rgba(52,62,154,0.16); /* Sombra suave para destacarse del fondo */
  padding: 13px;                   /* Espacio interno para agrandar el círculo */
  display: flex;                   /* Flexbox para centrar el ícono dentro del círculo */
  align-items: center;             /* Centrado vertical del ícono */
  justify-content: center;         /* Centrado horizontal del ícono */
  transition: box-shadow 0.2s, transform 0.22s; /* Animación suave de sombra y escala en hover */
  animation: whatsapp-pop 0.8s cubic-bezier(.22,1.16,.53,.98) 1; /* Animación pop-in al cargar la página */
}
.whatsapp-float img {
  width: 36px; height: 36px;       /* Tamaño del ícono de WhatsApp */
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,0.1));
  /* Hace el ícono blanco y le agrega una pequeña sombra para contraste */
  transition: transform 0.3s;      /* Escalado suave cuando haces hover */
}
.whatsapp-float:hover {
  box-shadow: 0 8px 28px rgba(37,211,102,0.36); /* Sombra más fuerte al pasar el mouse */
  transform: scale(1.07);          /* Agranda ligeramente el botón */
}
.whatsapp-float:active {
  transform: scale(0.97);          /* Al hacer click, el botón se achica un poco */
}
/* Animación de entrada pop para el botón WhatsApp */
@keyframes whatsapp-pop {
  0%   { transform: scale(0.3); opacity: 0;}   /* Empieza pequeño y transparente */
  100% { transform: scale(1); opacity: 1;}     /* Termina normal y visible */
}

/* ========== ANIMACIONES GLOBALES ========== */
/* Animación fade-in-up: aparece desvanecido y sube suavemente */
.fade-in-up { 
  opacity: 0;                          /* Invisible al principio */
  transform: translateY(30px);         /* Empieza 30px más abajo */
  transition: opacity 0.8s, transform 0.8s; /* Transición suave de opacidad y movimiento */
}
.fade-in-up.show { 
  opacity: 1;                          /* Ya visible */
  transform: translateY(0);            /* Ya en su posición original */
}

/* ========== MEDIA QUERIES ========== */
/* Aquí inician los ajustes responsivos */

/* --- 1050px --- */
@media (max-width: 1050px) {
  .testimonios-carrusel { border-radius: 0; max-width: 100vw;}    /* El carrusel ocupa todo el ancho y sin bordes redondeados */
  .testimonio-item { gap: 22px;}                                  /* Menos espacio entre cada testimonio */
  .testimonio-img-bg { min-width: 160px; max-width: 320px; height: 230px; border-radius: 18px;} /* Imágenes de testimonios más pequeñas */
  .testimonio-img-bg img { border-radius: 18px;}                  /* Misma curvatura para imagen */
}

/* --- 900px --- */
@media (max-width: 900px) {
  .about-row { flex-direction: column; text-align: center; padding: 1.25rem;} /* Fila misión/visión en columna, centrado y menos padding */
  .about-text { max-width: 100%;}                                    /* Texto ocupa todo el ancho */
  .about-img img { max-width: 96%; aspect-ratio: 16/9;}              /* Imagen de about menos ancha y formato widescreen */
  .ucd-flex { flex-direction: column; gap: 18px; align-items: center;} /* Formulario contacto/domain: en columna, menos gap, centrado */
  .ucd-domain, .ucd-contact { max-width: 99vw; width: 100%;}         /* Tarjetas ocupan casi todo el ancho */
}

/* --- 780px --- */
@media (max-width: 780px) {
  .testimonios-carrusel { border-radius: 0; }                        /* Carrusel sin esquinas redondeadas */
  .testimonio-item { flex-direction: column; padding: 24px 3vw; gap: 12px;}  /* Testimonios apilados, menos espacio y padding responsive */
  .testimonio-content { align-items: center; text-align: center;}     /* Texto de testimonios centrado */
  .testimonio-img-bg { min-width: 100px; max-width: 95vw; height: 160px;} /* Imágenes más pequeñas y adaptables */
}

/* --- 768px --- */
@media (max-width: 768px) {
  .top-bar { display: none; }                                        /* Quita la barra superior (teléfono, email, etc) */
  nav {
    top: 0; flex-direction: column; align-items: flex-start; background: #fbfbfc; height: 90px;
  }                                                                  /* Navbar en columna, altura fija */
  .logo-container { margin-left: 5px; }                              /* Menos espacio a la izquierda */
  .logo-container img { height: 55px; }                              /* Logo más pequeño */
  .logo-subtitle h2 { font-size: 12px; }                             /* Subtítulo del logo más pequeño */
  .nav-links {                                                       /* Menú hamburguesa oculto por defecto */
    display: none; flex-direction: column; align-items: flex-start; background: #223962;
    position: absolute; top: 85px; left: 0; width: 100%; padding: 10px 0 10px 0; z-index: 999;
    box-shadow: 0 4px 20px rgba(20,38,65,0.10); border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; border-top: 2px solid #223b63;
  }
  .nav-links.active {                                                /* Menú visible (hamburguesa activada) */
    display: flex; flex-direction: column; width: 100%; margin-top: 0; background: #19325c;
    border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; box-shadow: 0 6px 24px rgba(20,38,65,0.08);
    animation: slideDown .3s cubic-bezier(.23,.98,.34,1.11);
  }
  @keyframes slideDown { 0% { transform: translateY(-22px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
  .nav-links li { width: 100%; position: relative; }                 /* Links de menú ocupan todo el ancho */
  .nav-links li:not(:last-child)::after {                            /* Línea separadora en menú mobile */
    content: ""; display: block; position: absolute; bottom: 0; left: 8%; right: 8%;
    height: 1.2px; background: #fff; opacity: 0.28; border-radius: 1px;
  }
  .nav-links li a {
    width: 100%; text-align: left; padding: 16px 24px; color: #f6f8ff; font-size: 18px; font-weight: 500;
    background: transparent; border-radius: 0 8px 8px 0; letter-spacing: 0.01em; margin-bottom: 0; transition: background 0.18s, color 0.18s, font-weight 0.14s; display: block; position: relative;
  }
  .nav-links li a:hover, .nav-links li a:focus {
    background: #868686; color: #fff; font-weight: 700; box-shadow: 0 2px 10px #e0556c19 inset; z-index: 1;
  }
  .nav-links li a.active-link {
    background: #fd415c; color: #fff; font-weight: 700; z-index: 2; border-left: 5px solid #fff;
  }
  .nav-links li a.active-link + .nav-links li:not(:last-child)::after { background: #fff4; }
  .hamburger { display: flex !important; }                          /* Botón hamburguesa visible */
  .hero-content h1 { font-size: 28px; }                             /* Títulos más pequeños */
  .hero-content p { font-size: 14px; }
  .about-text h2 { font-size: 24px; }
  .about-text p { font-size: 15px; }
  .services-grid { grid-template-columns: 1fr; }                    /* Servicios en 1 sola columna */
  .cliente-logo { min-width: 180px; }
  .slider-track { width: calc(180px * 10); animation-duration: 3s;}
}

/* --- 600px --- */
@media (max-width: 600px) {
  .about-row {
    flex-direction: column !important; gap: 0.8rem; padding: 0.8rem;
    align-items: center; text-align: center;
  }                                                                  /* About: misión/visión apilados, menos espacio */
  .about-img, .about-text { width: 100%; max-width: 100%; }          /* Imagen/texto ocupan todo el ancho */
  .about-img img { width: 100%; aspect-ratio: 16/10; border-radius: 9px; max-width: 400px; margin: 0 auto; }
  .about-text p { font-size: 1.01rem;}
  .footer { text-align: center; }
  .footer-container { grid-template-columns: 1fr; }                  /* Footer en 1 sola columna */
  .social-icons { justify-content: center; }
  .proyectos-galeria { grid-template-columns: 1fr; gap: 18px;}
  .proyecto-card img { height: 120px;}
  .unified-contact-domain { padding: 24px 0 28px;}
  .ucd-domain, .ucd-contact { border-radius: 12px; padding: 22px 5vw 18px 5vw;}
  .ucd-domain h2, .ucd-contact h2 { font-size: 1.14rem;}
  .whatsapp-float { bottom: 16px; right: 16px; padding: 8px;}
  .whatsapp-float img { width: 28px; height: 28px;}
  /* --- Carrusel testimonios fix imagen --- */
  .testimonio-img-bg { min-height: 180px; height: 180px; max-height: 180px; width: 100%;
    display: flex; align-items: center; justify-content: center; overflow: hidden; background: #f7f7f7;
    border-radius: 14px; margin: 0 auto 12px auto;
  }
  .testimonio-img-bg img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block; }
}

/* --- 480px --- */
@media (max-width: 480px) {
  .hero-content h1 { font-size: 22px;}
  .hero-content p { font-size: 13px;}
  .checkup-btn { font-size: 13px; padding: 8px 16px;}
  .service-box { padding: 18px;}
  .service-box img { width: 48px; height: 48px;}
  .service-box h3 { font-size: 16px;}
  .service-box p { font-size: 14px;}
  .logo-text { font-size: 22px;}
  .testimonios-carrusel { margin: 16px 0;}
  .testimonio-img-bg { height: 80px;}
  .testimonio-img-bg { width: 450px;}
  .testimonio-logo { width: 75px;}
  .testimonio-content blockquote { font-size: .97rem; }
}

/* --- IDs sección anclaje --- */
/* Padding extra para navegación anclada por scroll */
#NOSOTROS, #SERVICIOS, #CONTACTO, #CLIENTES {
  padding-top: 120px; margin-top: -120px; /* Truco: separa el contenido al navegar por anclas para que no quede tapado por el nav fijo */
}
#INICIO { scroll-margin-top: 135px; }      /* Similar, deja espacio superior al hacer scroll a este ID */


.about-mini-hero {
  position: relative;
  min-height: 36vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #232b37;
  overflow: hidden;
  z-index: 10;
}

.about-mini-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: 
    linear-gradient(108deg, rgba(27,34,49,0.73) 40%, rgba(41,54,79,0.44) 100%),
    url('/Multimedia/Imagenes/Redes.jpeg') center/cover no-repeat fixed;
  /* Cambia la ruta de la imagen si lo necesitas */
  filter: brightness(0.93);
}

.about-mini-content {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 34px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 3vw 32px 3vw;
  flex-wrap: wrap;
  justify-content: center;
}

.about-block {
  background: rgba(25,33,52,0.30); /* Fondo translúcido SIN blur */
  border-radius: 13px;
  box-shadow: 0 4px 20px rgba(18,22,45,0.07);
  padding: 26px 24px 18px 24px;
  min-width: 270px;
  max-width: 350px;
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
  /* backdrop-filter: blur(1.5px);  <-- QUITADO */
}

.about-label {
  font-size: 0.96rem;
  letter-spacing: 1.2px;
  color: #e2e8fa;
  opacity: 0.85;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
  display: block;
}

.about-block h2 {
  font-size: 1.38rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #fff;
  letter-spacing: -0.5px;
}

.about-block p {
  font-size: 1.08rem;
  line-height: 1.56;
  color: #f3f5fa;
  margin-bottom: 0;
  font-weight: 400;
}

@media (max-width: 1000px) {
  .about-mini-content { flex-direction: column; align-items: center; gap: 20px;}
  .about-block { width: 95vw; max-width: 95vw; }
}
@media (max-width: 600px) {
  .about-mini-content { padding: 18px 2vw;}
  .about-block { padding: 14px 9px;}
  .about-block h2 { font-size: 1.09rem; }
  .about-block p { font-size: 0.99rem; }
}

@media (max-width: 800px) {
  .about-mini-bg {
    background: 
      linear-gradient(108deg, rgba(27,34,49,0.73) 40%, rgba(41,54,79,0.44) 100%),
      url('/Multimedia/Imagenes/Redes.jpeg') center/cover no-repeat scroll;
    /* Puedes usar una imagen diferente, más ligera para móvil:
    url('/Multimedia/Imagenes/Redes-mobile.jpg')
    */
    background-attachment: scroll; /* Forzamos que no sea fixed */
    filter: brightness(0.93);
  }
}