/* ==========================================================================
   INTEC — Capa de identidad propia
   --------------------------------------------------------------------------
   INTEC no es una seccion de SIMAC: es otra empresa, con su logotipo, su
   color y su navegacion. Esta hoja se carga SOLO en intec.html y siempre la
   ultima, despues de:

       vendor/bootstrap  ->  css/intec-base.css  ->  assets/css/simac-identidad.css
       ->  ESTA HOJA

   Lo que las dos empresas comparten es la calidad: tipografia, ritmo,
   espaciado, comportamiento responsive y estandares tecnicos. Lo que no
   comparten —y esta hoja se encarga de separar— es logotipo, color,
   cabecera, pie, navegacion y datos de contacto.

   Colores tomados del propio archivo del logotipo (LOG3.png), que solo
   contiene dos tintas:
       #00a9e0  cian INTEC
       #101820  negro azulado INTEC
   ========================================================================== */

:root {
  --intec-cian: #00a9e0;
  /* El cian de marca sobre blanco da 2.7:1: vale para fondo oscuro y para
     rellenos, no para texto sobre claro. Esta variante mantiene el matiz
     exacto (194.7 grados) y se calcula contra el fondo mas exigente en que
     aparece —el gris de las etiquetas clave, #eef3f6— donde da 4.5:1; sobre
     blanco llega a 5.1:1. Mismo criterio que se aplica en SIMAC con su verde. */
  --intec-cian-texto: #00779e;
  --intec-tinta: #101820;
  --intec-tinta-2: #0a1016;
  --intec-gris: #eef3f6;
  --intec-borde: rgba(0, 169, 224, 0.22);
  /* Remate inferior de la cabecera: grafito casi negro, un punto por debajo
     del negro de la barra superior. Cierra la cabecera sin brillo ni acento. */
  --intec-linea-cabecera: #05070b;
}

/* --------------------------------------------------------------------------
   1. Barra superior — datos de INTEC, no de SIMAC
   -------------------------------------------------------------------------- */

.intec .sub-header {
  background-color: var(--intec-tinta-2);
}

.intec .sub-header ul.left-info li i {
  color: var(--intec-cian);
}

.intec .sub-header ul.left-info li a[href]:hover,
.intec .sub-header ul.right-icons li a:hover {
  color: var(--intec-cian);
}

/* --------------------------------------------------------------------------
   2. Cabecera propia de INTEC
   --------------------------------------------------------------------------
   SIMAC usa cabecera transparente sobre la fotografia y logotipo verde.
   INTEC usa una barra solida en su negro azulado con el logotipo circular en
   cian y blanco: al entrar se ve de inmediato que es otro sitio. La geometria
   (80 px de alto, logotipo de 46 px, opciones de 40 px) es la misma que en
   SIMAC, porque eso es calidad compartida, no identidad.
   -------------------------------------------------------------------------- */

/* La cabecera se cierra con una linea fina en grafito, no en cian: sobre un
   publico ejecutivo pesa mas la sobriedad que el acento tecnologico. El cian
   sigue siendo la identidad de INTEC donde funciona como acento -logotipo,
   opcion activa, boton de portada, iconografia-, no como remate estructural. */
.intec > header {
  background-color: var(--intec-tinta);
  border-bottom: 2px solid var(--intec-linea-cabecera);
}

.intec header.background-header {
  background-color: var(--intec-tinta) !important;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

/* El logotipo de INTEC es circular: ocupa el alto de la cabecera en cuadrado.
   Como en SIMAC, arranca a 40 px del borde y no queda centrado. */
.intec .navbar-brand img {
  height: 50px;
}

.intec .navbar-brand {
  gap: 12px;
}

/* Rotulo junto al logotipo. Deja claro el nombre de la empresa aunque el
   visitante no reconozca todavia el simbolo. */
.intec .navbar-brand .marca-intec {
  display: block;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.2px;
  line-height: 1.25;
  text-transform: uppercase;
}

/* El bajotitulo iba en cian y competia con el simbolo: dos veces el mismo
   acento en el mismo bloque. Pasa a un azul acero desaturado (mismo tono,
   203 grados, y misma saturacion, 9%, que la referencia #74828B, cinco puntos
   mas claro para dar 4.8:1 sobre la cabecera a 9 px). El cian queda solo en el
   simbolo, que es donde es identidad. */
.intec .navbar-brand .marca-intec span {
  display: block;
  color: #7b8891;
  font-size: 9px;
  letter-spacing: 1.6px;
}

/* La cabecera de INTEC es oscura en los dos estados, asi que el menu es
   blanco siempre. Se anula el negro que simac-identidad.css aplica cuando la
   cabecera de SIMAC se vuelve blanca al bajar. */
.intec .navbar-nav .nav-link,
.intec .background-header .navbar-nav .nav-link {
  color: #fff !important;
}

.intec .navbar-nav .nav-item.active > .nav-link,
.intec .navbar-nav .nav-link.active,
.intec .navbar-nav .nav-link:hover,
.intec .background-header .navbar-nav .nav-item.active > .nav-link,
.intec .background-header .navbar-nav .nav-link:hover {
  color: var(--intec-cian) !important;
}

.intec .navbar-nav .nav-link::after,
.intec .background-header .navbar-nav .nav-link::after {
  background-color: var(--intec-cian);
}

/* Enlace de vuelta a SIMAC: la relacion entre las dos empresas existe y se
   mantiene, pero como enlace discreto — nunca como identidad principal. */
.intec .nav-item--simac .nav-link {
  color: rgba(255, 255, 255, 0.62) !important;
  font-weight: 400;
  letter-spacing: 0.4px;
}

.intec .nav-item--simac .nav-link:hover {
  color: #fff !important;
}

.intec .nav-item--simac .nav-link::after {
  display: none;
}

@media (max-width: 991.98px) {
  .intec #navbarResponsive {
    background-color: var(--intec-tinta);
  }

  .intec .navbar-nav .nav-link,
  .intec .background-header .navbar-nav .nav-link {
    color: #fff !important;
  }

  .intec .navbar .navbar-nav .nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .intec .navbar-toggler {
    background-color: var(--intec-cian);
  }

  .intec .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23101820' stroke-width='2.4' stroke-linecap='round' stroke-miterlimit='10' d='M5 8h20M5 15h20M5 22h20'/%3E%3C/svg%3E");
  }
}

/* --------------------------------------------------------------------------
   3. Portada
   --------------------------------------------------------------------------
   Se conserva la afirmacion "LIDERES REGIONALES", que es real y esta
   aprobada; pasa a ser el rotulo destacado sobre el nombre. El velo se
   refuerza y se desplaza hacia la izquierda para que quede espacio negativo
   suficiente y el texto se lea sin competir con la fotografia.
   -------------------------------------------------------------------------- */

/* La portada de INTEC es la original y esta aprobada por la empresa: la
   fotografia del ambiente de oficina con sus graficos. No se sustituye ni se
   tapa, y conserva su desplazamiento (background-attachment: fixed, definido
   en css/intec-base.css). Aqui no se toca ninguna de las dos cosas. */

/* El fondo de contacto era EJEMPLO 2.jpg, una red abstracta turquesa que no
   dice nada. Se cambia por una fotografia de infraestructura. */
.intec #contact {
  background-image: url(../img/intec-contacto.jpg);
}

.intec #infinite::before {
  background:
    linear-gradient(180deg, rgba(10, 16, 22, 0.86) 0%, rgba(10, 16, 22, 0.55) 38%, rgba(10, 16, 22, 0.88) 100%),
    linear-gradient(90deg, rgba(10, 16, 22, 0.7) 0%, rgba(10, 16, 22, 0.15) 70%);
}

/* La fotografia es el elemento visual principal de la portada. Se retiro la
   version gigante del logotipo que habia como fondo: recargaba y competia. */
.intec .tm-hero-text-container {
  z-index: 2;
}

/* El boton de la portada conserva el tratamiento de capsula con borde cian
   que tenia el rotulo anterior. La base oscura es lo que le da contraste
   suficiente sobre la fotografia. */
.intec .boton-capsula {
  display: inline-block;
  margin-top: 26px;
  padding: 15px 34px;
  border: 1px solid var(--intec-cian);
  border-radius: 40px;
  background-color: rgba(10, 16, 22, 0.55);
  color: var(--intec-cian);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.6px;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.intec .boton-capsula:hover,
.intec .boton-capsula:focus {
  background-color: var(--intec-cian);
  border-color: var(--intec-cian);
  color: var(--intec-tinta);
}

.intec .tm-hero-title {
  letter-spacing: 6px;
}

.intec .tm-hero-lema {
  color: rgba(255, 255, 255, 0.94);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   4. Botones de INTEC
   Relleno cian de marca con la etiqueta en el negro del propio logotipo:
   6.6:1, y no hay ni un gramo de verde de SIMAC.
   -------------------------------------------------------------------------- */

.intec a.filled-button,
.intec button.filled-button,
.intec .tm-btn-primary,
.intec .tm-btn-submit,
.intec .btn-simac {
  background-color: var(--intec-cian) !important;
  border-color: var(--intec-cian) !important;
  color: var(--intec-tinta) !important;
}

.intec a.filled-button:hover,
.intec a.filled-button:focus,
.intec button.filled-button:hover,
.intec .tm-btn-primary:hover,
.intec .tm-btn-primary:focus,
.intec .tm-btn-submit:hover,
.intec .tm-btn-submit:focus {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--intec-tinta) !important;
}

/* El anillo del navegador se pinta tambien al tocar en pantalla tactil, donde
   estorba y no aporta nada. Se retira del foco a secas y se define a
   continuacion solo para :focus-visible, que es el foco de teclado. */
.intec a:focus,
.intec button:focus,
.intec input:focus,
.intec textarea:focus {
  outline: none;
}

.intec a:focus-visible,
.intec button:focus-visible,
.intec input:focus-visible,
.intec textarea:focus-visible {
  outline-color: var(--intec-cian);
}

/* --------------------------------------------------------------------------
   5. Titulos de seccion
   -------------------------------------------------------------------------- */

.intec .tm-text-primary,
.intec .tm-section-title {
  color: var(--intec-cian-texto);
}

.intec .tm-parallax-2 .tm-section-title,
.intec .tm-parallax-2 h2,
.intec #testimonials .tm-section-title {
  color: #fff;
}

.intec .titulo-intec {
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 26px;
}

.intec .titulo-intec::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  background-color: var(--intec-cian);
}

.intec .titulo-intec--izq::after {
  left: 0;
  transform: none;
}

/* --------------------------------------------------------------------------
   6. "Que hacemos" y "Como lo hacemos"
   --------------------------------------------------------------------------
   Composicion editorial, no tarjetas: icono, titulo corto y una sola frase.
   Sin etiquetas ni botones decorativos — no llevaban a ninguna parte.
   -------------------------------------------------------------------------- */

.intec .intec-tres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin: 54px 0 20px;
}

/* Tarjeta sobria: filete superior, sin sombras grandes. El realce al pasar el
   cursor es un desplazamiento de 3 px y el filete que se tine de cian. */
.intec .intec-tarjeta {
  position: relative;
  padding: 34px 30px 32px;
  background-color: #fff;
  border: 1px solid #e2e8ec;
  border-radius: 4px;
  transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.3, 1), border-color 0.35s, box-shadow 0.35s;
}

.intec .intec-tarjeta::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 46px;
  height: 3px;
  background-color: var(--intec-cian);
  transition: width 0.4s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.intec .intec-tarjeta:hover {
  transform: translateY(-3px);
  border-color: #d2dde3;
  box-shadow: 0 10px 26px rgba(16, 24, 32, 0.07);
}

.intec .intec-tarjeta:hover::before {
  width: calc(100% + 2px);
}

.intec .intec-tarjeta__num {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #626c74;
  margin-bottom: 22px;
}

.intec .intec-tarjeta__icono {
  width: 34px;
  height: 34px;
  color: var(--intec-cian-texto);
  margin-bottom: 20px;
}

.intec .intec-tarjeta__icono svg {
  width: 100%;
  height: 100%;
  display: block;
}

.intec .intec-tarjeta h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--intec-tinta);
  margin-bottom: 10px;
}

.intec .intec-tarjeta p {
  font-size: 14.5px;
  line-height: 1.7;
  color: #59646e;
  margin: 0;
}

.intec .intec-como {
  margin-top: 96px;
}

.intec .intec-cuatro {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 34px;
  margin-top: 48px;
  position: relative;
}

/* Linea de progreso: se dibuja de 01 a 04 cuando la seccion entra en pantalla. */
.intec .intec-cuatro::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, var(--intec-cian) 0%, rgba(0, 169, 224, 0.55) 62%, rgba(0, 169, 224, 0.12) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.5s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.intec .intec-cuatro.visible::before {
  transform: scaleX(1);
}

/* Los cuatro conceptos entran uno tras otro, con un desplazamiento sutil.
   Sin JavaScript quedan visibles: la animacion nunca impide leer. */
.intec .intec-cuatro[data-revelar] .intec-concepto {
  opacity: 1;
}

.intec .intec-cuatro[data-revelar].preparada .intec-concepto {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.intec .intec-cuatro[data-revelar].visible .intec-concepto {
  opacity: 1;
  transform: none;
}

.intec .intec-cuatro[data-revelar].visible .intec-concepto:nth-child(1) { transition-delay: 0.05s; }
.intec .intec-cuatro[data-revelar].visible .intec-concepto:nth-child(2) { transition-delay: 0.20s; }
.intec .intec-cuatro[data-revelar].visible .intec-concepto:nth-child(3) { transition-delay: 0.35s; }
.intec .intec-cuatro[data-revelar].visible .intec-concepto:nth-child(4) { transition-delay: 0.50s; }

/* Si el sistema pide menos movimiento, no hay animacion: todo visible. */
@media (prefers-reduced-motion: reduce) {
  .intec .intec-cuatro[data-revelar].preparada .intec-concepto {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .intec .intec-cuatro::before {
    transform: scaleX(1);
    transition: none;
  }
}

/* Cada concepto cuelga de la linea de progreso: un punto sobre ella y el
   numero debajo. Asi la linea forma parte de la composicion y no parece un
   adorno agregado. */
.intec .intec-concepto {
  position: relative;
  padding-top: 30px;
}

.intec .intec-concepto::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid var(--intec-cian);
}

.intec .intec-concepto span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #626c74;
  margin-bottom: 10px;
}

.intec .intec-concepto h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--intec-tinta);
  margin-bottom: 8px;
}

.intec .intec-concepto p {
  font-size: 14px;
  line-height: 1.65;
  color: #626c76;
  margin: 0;
}

/* --------------------------------------------------------------------------
   7. Servicios
   -------------------------------------------------------------------------- */

/* El fondo de esta seccion es el logotipo de INTEC con desplazamiento
   (intec-fondo-servicios.jpg, fixed). El velo al 86 % lo dejaba invisible.
   Se baja el velo y se le sube el contraste al propio fondo para que el
   logotipo se reconozca sin que el texto pierda legibilidad. Mismo criterio
   que en "Trayectoria" de SIMAC — y con el logotipo de INTEC, no el de SIMAC. */
.intec #testimonials {
  filter: none;
}

.intec #testimonials .tm-bg-overlay {
  background-color: rgba(10, 16, 22, 0.55);
}

/* --------------------------------------------------------------------------
   8. Galeria — proporciones
   --------------------------------------------------------------------------
   Las miniaturas son archivos de 440x660 y 440x291 mezclados, asi que la fila
   quedaba con unas fotos en tira vertical y otras apaisadas. Se les da a
   todas la misma casilla 4:3 y se recorta con object-fit: la imagen se
   encuadra, nunca se estira.
   -------------------------------------------------------------------------- */

.intec .tm-gallery-item {
  margin: 0 10px;
  border-radius: 8px;
  overflow: hidden;
}

.intec .tm-gallery-item img,
.intec figure.effect-honey img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  display: block;
}

.intec figure.effect-honey figcaption::before {
  background-color: var(--intec-cian);
}

.intec .tm-gallery-container .slick-dots li.slick-active button:before,
.intec .slick-dots li.slick-active button:before {
  color: var(--intec-cian);
}

/* El logotipo suelto que habia sobre la galeria ya no hace falta: la marca
   esta en la cabecera y en el pie. */
.intec .gallery-logo-suelto {
  display: none;
}

/* --------------------------------------------------------------------------
   9. Contacto
   -------------------------------------------------------------------------- */

.intec #contact .tm-bg-overlay {
  background-color: rgba(10, 16, 22, 0.9);
}

.intec .intec-dato {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
}

.intec .intec-dato i {
  color: var(--intec-cian);
  font-size: 17px;
  margin-top: 3px;
  width: 20px;
  text-align: center;
}

.intec .intec-dato a {
  color: rgba(255, 255, 255, 0.9);
  transition: color 0.25s;
}

.intec .intec-dato a:hover {
  color: var(--intec-cian);
}

/* --------------------------------------------------------------------------
   10. Pie propio de INTEC
   --------------------------------------------------------------------------
   Logotipo, datos, navegacion y color de INTEC. La relacion con SIMAC aparece
   en una linea discreta, no como identidad del pie.
   -------------------------------------------------------------------------- */

/* El pie se separa del contenido con la misma linea en grafito que remata la
   cabecera, no con el cian: el remate estructural queda sobrio y el acento de
   marca se reserva para donde comunica -logotipo, iconos, boton de enviar. */
.intec footer {
  background-color: var(--intec-tinta);
  border-top: 3px solid var(--intec-linea-cabecera);
}

.intec footer h3,
.intec footer h4 {
  color: #fff;
}

.intec footer h3::after,
.intec footer h4::after {
  background-color: var(--intec-cian);
}

.intec footer .datos-contacto i,
.intec footer .enlaces-pie a i {
  color: var(--intec-cian);
}

.intec footer a.text-white:hover,
.intec footer .enlaces-pie a:hover {
  color: var(--intec-cian) !important;
}

.intec footer .contact-form button {
  background-color: var(--intec-cian) !important;
  color: var(--intec-tinta) !important;
}

.intec footer .contact-form button:hover {
  background-color: #fff !important;
  color: var(--intec-tinta) !important;
}

/* El logotipo del pie ocupaba 62 px dentro de una columna de 380: su bloque
   quedaba practicamente vacio y el reparto horizontal se desequilibraba. Se
   agranda a un tamano comparable al de las otras columnas y se alinea a la
   izquierda, como el resto de los bloques. */
.intec .pie-intec-logo {
  display: block;
  width: 132px;
  height: auto;
  margin: 0 0 16px;
}

@media (max-width: 991.98px) {
  .intec .pie-intec-logo { width: 112px; }
}

.intec .sub-footer {
  background-color: var(--intec-tinta-2);
}

.intec .sub-footer a {
  color: rgba(255, 255, 255, 0.72);
}

.intec .sub-footer a:hover {
  color: var(--intec-cian);
}

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .intec .navbar-brand .marca-intec {
    font-size: 10px;
    letter-spacing: 1.6px;
  }

  .intec .tm-hero-lema--rotulo {
    font-size: 11px;
    letter-spacing: 2px;
    padding: 7px 15px;
  }

  .intec #infinite::after {
    width: 76vw;
    height: 76vw;
    right: -22vw;
    opacity: 0.1;
  }

  .intec .intec-tres,
  .intec .intec-cuatro {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .intec .intec-como {
    margin-top: 62px;
  }

  /* El pie caia en cuatro alturas en movil: 993 px en un telefono de 390 px.
     "Contacto INTEC" y "Secciones" son listas cortas y entran a dos columnas,
     con lo que el pie baja a tres alturas. Mismo criterio que en SIMAC, pero
     escrito aqui y acotado a .intec: no se toca nada mas de INTEC. */
  .intec footer .row > [class*="col-"].mb-5 {
    margin-bottom: 26px !important;
  }

  .intec footer .row > [class*="col-"]:nth-child(2),
  .intec footer .row > [class*="col-"]:nth-child(3) {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Mismo motivo que en SIMAC: a media columna el correo no cabe y se salia
     sobre la columna contigua. Solo se permite el corte de palabra larga. */
  .intec footer .row > [class*="col-"]:nth-child(2) p,
  .intec footer .row > [class*="col-"]:nth-child(2) a {
    overflow-wrap: anywhere;
  }
}

/* --------------------------------------------------------------------------
   12. Visor de fotografias — solo el color
   La base del visor esta en assets/css/simac-identidad.css porque la usan las
   dos empresas (Obras de SIMAC y Galeria de INTEC): es calidad de interaccion
   compartida. Lo unico propio de INTEC es el color del realce.
   -------------------------------------------------------------------------- */

.intec .mfp-close:hover,
.intec .mfp-close:focus-visible {
  background-color: rgba(0, 169, 224, 0.9);
}

/* --------------------------------------------------------------------------
   13. Pie inferior
   -------------------------------------------------------------------------- */

.intec .sub-footer p {
  text-align: center;
  margin: 0;
}

/* 24. El correo de Gmail se mantiene, pero en segundo plano: el canal
   principal es el formulario. */
.intec footer .datos-contacto p a[href^="mailto"] {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.62) !important;
}

.intec footer .datos-contacto p a[href^="mailto"]:hover {
  color: var(--intec-cian) !important;
}

/* --------------------------------------------------------------------------
   14. Indicadores de posicion de Proyectos
   Vinetas minimas: circulo hueco, cian solo la activa. Sin decoracion.
   -------------------------------------------------------------------------- */

.intec #gallery .slick-dots {
  bottom: -46px;
  line-height: 0;
}

.intec #gallery .slick-dots li {
  width: 14px;
  height: 14px;
  margin: 0 5px;
}

.intec #gallery .slick-dots li button {
  width: 14px;
  height: 14px;
  padding: 0;
}

.intec #gallery .slick-dots li button:before {
  content: "";
  width: 8px;
  height: 8px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  border: 1px solid #b6c1c9;
  background-color: transparent;
  opacity: 1;
  transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
}

.intec #gallery .slick-dots li.slick-active button:before {
  background-color: var(--intec-cian);
  border-color: var(--intec-cian);
  transform: scale(1.15);
}

.intec #gallery .slick-dots li button:hover:before {
  border-color: var(--intec-cian);
}

/* --------------------------------------------------------------------------
   15. Proyectos: tamano de las fotografias
   --------------------------------------------------------------------------
   css/intec-base.css limita cada pieza a 220 px y el contenedor a 240/350 px
   en pantallas pequenas. Con una sola fotografia visible en movil eso dejaba
   la imagen ocupando poco mas de la mitad del ancho. Aqui la fotografia pasa
   a ocupar el espacio disponible de su hueco en todos los tamanos.
   -------------------------------------------------------------------------- */

.intec #gallery figure.effect-honey {
  max-width: none;
  width: 100%;
}

@media (max-width: 991.98px) {
  .intec #gallery .tm-gallery-container,
  .intec #gallery .tm-gallery-container-2 {
    max-width: none;
  }
}

@media (max-width: 575.98px) {
  .intec .tm-gallery-item {
    margin: 0 8px;
  }
}

/* --------------------------------------------------------------------------
   16. Servicios de INTEC
   --------------------------------------------------------------------------
   Tres capacidades en rejilla, no un carrusel. Cada una muestra fotografia,
   numero discreto y titulo; el detalle completo y las capacidades se abren
   bajo la ficha al pulsar "Ver detalles". El texto es el aprobado. La ficha
   cerrada no adelanta un resumen: repetia lo que dice el propio detalle.
   -------------------------------------------------------------------------- */

/* Entrada de la seccion. La frase de apertura ocupa su propia linea y la
   medida se estrecha a 520px para que la segunda corte en su coma natural
   ("...vision estrategica," / "control tecnico y foco en resultados") en vez
   de dejar "resultados." sola. Por debajo de 520px de viewport la medida no
   manda y es "pretty" quien evita que la ultima linea quede con una sola
   palabra. */
.intec #testimonials .tm-section-desc {
  max-width: 520px;
  text-wrap: pretty;
}

.intec #testimonials .tm-gallery-container {
  padding-top: 46px;
}

.intec .tm-testimonials-carousel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  align-items: start;
}

/* Dos de los tres titulos ocupan dos lineas y uno solo una: con la columna en
   flex y un min-height en el titulo, los tres enlaces "Ver detalles" quedan a
   la misma altura. */
.intec .serv-intec {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.intec .serv-intec__foto {
  overflow: hidden;
  border-radius: 5px;
  margin-bottom: 22px;
}

.intec .serv-intec__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.92);
  transition: transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1), filter 0.5s;
}

.intec .serv-intec:hover .serv-intec__foto img,
.intec .serv-intec.is-abierto .serv-intec__foto img {
  transform: scale(1.035);
  filter: saturate(1.05);
}

.intec .serv-intec__num {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 12px;
  transition: color 0.35s;
}

.intec .serv-intec:hover .serv-intec__num { color: var(--intec-cian); }

.intec .serv-intec h3 {
  position: relative;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  min-height: 65px;
  color: var(--intec-cian);
  margin: 0 0 12px;
  transition: transform 0.4s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.intec .serv-intec h3::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-bottom: 14px;
  background-color: var(--intec-cian);
  transition: width 0.5s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.intec .serv-intec:hover h3::before,
.intec .serv-intec.is-abierto h3::before { width: 72px; }
.intec .serv-intec:hover h3 { transform: translateX(3px); }

.intec .serv-intec__ver {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding: 0;
  background: none;
  border: none;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: color 0.3s, gap 0.35s ease;
}

.intec .serv-intec__ver span { transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.3, 1); }
.intec .serv-intec__ver:hover { color: var(--intec-cian); gap: 14px; }
.intec .serv-intec__ver:hover span { transform: translateX(3px); }
.intec .serv-intec__ver[aria-expanded="true"] { color: var(--intec-cian); }
.intec .serv-intec__ver[aria-expanded="true"] span { transform: rotate(90deg); }
.intec .serv-intec__ver:focus-visible { outline: 2px solid var(--intec-cian); outline-offset: 4px; }

.intec .serv-intec__detalle[hidden] { display: none; }

.intec .serv-intec__detalle {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  animation: serv-detalle 0.4s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.intec .serv-intec__lista {
  list-style: none;
  padding: 0;
  margin: 0;
}

.intec .serv-intec__lista li {
  font-size: 12.5px;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.66);
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@keyframes serv-detalle {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .intec .serv-intec__detalle { animation: none; }
}

@media (max-width: 991.98px) {
  .intec .tm-testimonials-carousel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .intec .tm-testimonials-carousel { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}