/* ==========================================================================
   SIMAC — Capa de identidad
   --------------------------------------------------------------------------
   Se carga SIEMPRE despues de la hoja base de cada pagina:

     - paginas SIMAC : assets/css/simac-base.css  +  este archivo
     - pagina INTEC  : css/intec-base.css         +  este archivo

   Aqui vive todo lo que hace que las seis paginas se vean como una sola
   empresa: color, tipografia, cabecera, pie, botones, titulos y ritmo
   vertical. Las hojas base no se tocan salvo para corregir errores; asi,
   si manana hay que ajustar la identidad, se ajusta en un solo archivo.

   Color corporativo unico: #a4c639
   ========================================================================== */

:root {
  --simac-verde: #a4c639;
  --simac-verde-oscuro: #86a52a;
  /* --- Jerarquia de verdes -------------------------------------------------
     Dos verdes con dos papeles distintos, no dos variantes del mismo:

       --simac-verde-accion  #004b36  VERDE PRINCIPAL DE ACCION. Fondo de todo
                                      lo que el visitante pulsa y del area
                                      abierta del indice de Servicios. El
                                      blanco encima da 10.3:1 y el lima 5.3:1,
                                      asi que admite rotulo y acento a la vez.
       --simac-verde         #a4c639  ACENTO. Piezas pequenas y finas: filetes,
                                      numeros, iconos de una linea, vinetas,
                                      subrayados e indicadores de foco. Nunca
                                      el fondo de una accion: era eso lo que lo
                                      convertia en el color dominante y le
                                      quitaba fuerza como detalle de marca.

     El hover del verde de accion ACLARA en vez de oscurecer: desde #004b36 ya
     no queda recorrido hacia abajo sin perder el borde del boton. */
  --simac-verde-accion: #004b36;
  --simac-verde-accion-hover: #006b4e;
  /* --- Rampa del verde de accion para fondos oscuros ------------------------
     #004b36 sobre los fondos oscuros del sitio da entre 1.54:1 y 2.06:1: no
     se ve. Pero en lugar de un salto unico se sube por peldanos, y cada
     elemento usa el MINIMO que su tamano exige. Los tres conservan la
     saturacion del institucional (100 %) y se quedan a menos de 5 grados de
     su matiz, asi que se leen como el mismo verde a distinta profundidad, no
     como colores distintos.

       --simac-verde-accion        #004b36  L 15 %. Por defecto, SIEMPRE que el
                                            fondo lo permita.
       --simac-verde-accion-medio  #007d51  L 24.5 %. Graficos y texto grande
                                            sobre fondo oscuro: piden 3:1 y da
                                            entre 3.03:1 y 4.05:1.
       --simac-verde-accion-claro  #00915c  Dos papeles. Uno tecnico: texto
                                            pequeno sobre fondo oscuro o
                                            fotografia (pide 4.5:1, da hasta
                                            5.20:1). Otro de marca: es el
                                            VERDE DE ACENTO, el que se ve en
                                            el menu activo, y senala el
                                            elemento abierto del acordeon, los
                                            enlaces "Saber mas" y las lineas
                                            finas de Nuestros lideres. Sobre
                                            blanco da 4.14:1.

     El intento anterior (#1e8f5a, L 34 % con el matiz girado a 152) aclaraba
     de mas y se alejaba del institucional; y el previo (#00a376) conservaba
     el matiz pero, aclarado, se leia turquesa. */
  --simac-verde-accion-medio: #007d51;
  --simac-verde-accion-claro: #00915c;
  /* --- Rampa verde de SIMAC -------------------------------------------------
     Un solo matiz (74.5 grados, el del logotipo) en tres pasos. El paso se
     elige por el TAMANO del texto y por el fondo, nunca por la seccion: asi
     el criterio es el mismo en toda la web.

       --simac-verde         #a4c639  marca. Solo sobre fondo OSCURO (8.0:1
                                      sobre el negro del sitio) y en rellenos,
                                      iconos y filetes que no son texto.
       --simac-verde-titulo  #789628  texto GRANDE sobre fondo claro: titulos
                                      de seccion, palabra destacada, filetes.
                                      3.4:1 sobre blanco — por encima del 3:1
                                      que pide el texto grande.
       --simac-verde-texto   #687A22  texto FINO sobre fondo claro: enlaces,
                                      cargos, subtitulos, menu activo.
                                      4.9:1 sobre blanco y 4.6:1 sobre el gris.

     El paso anterior era #627722 (luminancia 0.159): cumplia, pero resultaba
     apagado. #789628 tiene luminancia 0.260 —un 63 % mas luminoso— y #617914
     mantiene la luminancia pero sube la saturacion de 0.55 a 0.72, que es lo
     que quita la sensacion terrosa sin perder contraste. */
  --simac-verde-titulo: #789628;
  --simac-verde-texto: #687A22;
  --simac-tinta: #1e1e1e;
  --simac-texto: #5a5a5a;
  --simac-gris-claro: #f5f6f2;
  --simac-negro: #232323;
  --simac-negro-2: #1a1a1a;
  --simac-borde: rgba(255, 255, 255, 0.14);
  /* Separacion entre secciones. simac-base.css usaba 140 px para todas y
     esta hoja habia ido bajando unas a 110, otras a 100 y otras a 90, pero
     .more-info y .contact-information se habian quedado en 140: en Nosotros
     el primer bloque caia 30 px mas abajo que en Servicios o Contacto. */
  --simac-ritmo: 110px;
}

/* --------------------------------------------------------------------------
   1. Tipografia
   Poppins ya venia enlazada en el <head> pero nunca se aplicaba: la regla
   original era `font-family: 'sans-serif', ;` — invalida, el navegador la
   descartaba y el sitio se veia en Times New Roman.
   -------------------------------------------------------------------------- */

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color: var(--simac-texto);
  -webkit-font-smoothing: antialiased;
}

/* QA: imagen fluida. Sin esta regla, cualquier imagen con un `width` mayor
   que la pantalla empuja la pagina y aparece scroll horizontal en el
   telefono. Paso con el sello de RSE (585 px) en Nosotros. Las reglas que
   fijan un alto concreto (tarjetas, galeria, logotipo de cabecera) tienen
   mas especificidad y siguen mandando. */
img {
  max-width: 100%;
  height: auto;
}

/* Manrope en los titulos y en la navegacion: mas neutra y tecnica que
   Poppins, que es la que daba el aire de plantilla. El cuerpo sigue en
   Poppins, que funciona bien en lectura larga. */
h1, h2, h3, h4, h5, h6,
.navbar-nav .nav-link,
.capacidad__dato, .count-digit,
.filled-button, .border-button, .boton-capsula,
button, input, textarea, select {
  font-family: 'Manrope', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  letter-spacing: -0.1px;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--simac-tinta);
  line-height: 1.25;
}

p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--simac-texto);
}

/* Titulo de seccion. Sustituye los `style="color:#94a403"` sueltos que
   habia repartidos por el HTML. */
.section-heading h2,
h2.titulo-seccion {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--simac-tinta);
}

.section-heading em,
.titulo-seccion em {
  font-style: normal;
  color: var(--simac-verde-titulo);
}

/* Filete corto bajo el titulo: ordena la pagina sin agregar ruido. */
.section-heading {
  margin-bottom: 55px;
}

.section-heading::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 18px auto 0;
  background-color: var(--simac-verde-titulo);
}

.section-heading.sin-filete::after {
  display: none;
}

.section-heading span {
  color: var(--simac-texto);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   2. Botones
   -------------------------------------------------------------------------- */

a.filled-button,
button.filled-button,
footer .contact-form button.filled-button,
.btn-simac {
  background-color: var(--simac-verde-accion);
  color: #fff;
  border: 2px solid var(--simac-verde-accion);
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.6px;
  padding: 12px 30px;
  border-radius: 30px;
  display: inline-block;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
  outline: none;
  box-shadow: none;
  text-shadow: none;
  cursor: pointer;
}

a.filled-button:hover,
a.filled-button:focus,
button.filled-button:hover,
.btn-simac:hover {
  background-color: var(--simac-verde-accion-hover);
  border-color: var(--simac-verde-accion-hover);
  color: #fff;
}

/* CTA separado del parrafo que lo precede: antes quedaba pegado al ultimo
   renglon y no se leia como una llamada a la accion independiente. */
.filled-button.cta-separado {
  margin-top: 34px;
}

a.border-button,
button.border-button {
  background-color: transparent;
  color: #fff;
  border: 2px solid #fff;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.6px;
  padding: 11px 28px;
  border-radius: 30px;
  display: inline-block;
  transition: all 0.25s;
}

a.border-button:hover,
button.border-button:hover {
  background-color: var(--simac-verde-accion);
  border-color: var(--simac-verde-accion);
  color: #fff;
}

/* Pantalla de carga. En la hoja base ocupa toda la ventana en lima: es la
   superficie mas grande del sitio y lo primero que ve el visitante, justo lo
   contrario de reservar el lima para el detalle. Los tres puntos del giro ya
   son blancos, asi que sobre el verde de accion se leen mejor que antes. */
#preloader {
  background: var(--simac-verde-accion);
}

/* Los dos CTA del cierre de Obras deben leerse como dos acciones del mismo
   rango. Con el ancho dictado por la longitud del rotulo, "HABLEMOS DE TU
   PROYECTO" media 256 px y "VER SERVICIOS" poco mas de la mitad. */
.text-center .filled-button {
  min-width: 280px;
  max-width: 100%;
  margin: 6px 5px;
}

@media (max-width: 640px) {
  /* Por debajo de este ancho los 280 px ya no caben en pareja: cada boton
     pasa a ocupar la linea, que es lo que evita el desborde. */
  .text-center .filled-button {
    display: block;
    min-width: 0;
    margin: 8px auto;
  }
}

/* Enlaces dentro del texto corrido. Sin esta regla heredaban el azul por
   defecto de Bootstrap (#007bff): fuera de la identidad y en 3.7:1 sobre el
   gris claro del sitio. La red de seguridad cubre los enlaces sin clase que
   aparezcan a futuro dentro de un parrafo de contenido. */
.enlace-simac,
.services p > a:not([class]),
.more-info p > a:not([class]),
.callback-form p > a:not([class]),
.contact-information p > a:not([class]),
.aviso-obras p > a:not([class]) {
  color: var(--simac-verde-texto);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.enlace-simac:hover,
.services p > a:not([class]):hover,
.more-info p > a:not([class]):hover,
.callback-form p > a:not([class]):hover,
.contact-information p > a:not([class]):hover,
.aviso-obras p > a:not([class]):hover {
  color: var(--simac-tinta);
}

/* Foco visible: obligatorio para navegar con teclado. */
/* 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. */
a:focus,
button:focus,
input:focus,
textarea:focus {
  outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--simac-verde);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Barra superior (datos de contacto + redes)
   -------------------------------------------------------------------------- */

.sub-header {
  background-color: var(--simac-negro);
  height: 44px;
  line-height: 44px;
  font-size: 13px;
}

.sub-header ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sub-header ul li {
  display: inline-block;
}

.sub-header ul.left-info li {
  border: none;
  padding: 0 22px 0 0;
}

/* El horario va en un <span>, no en un <a>. Antes solo se coloreaban los
   enlaces, asi que el <span> heredaba el gris de texto del cuerpo (#5a5a5a)
   y quedaba en 2.3:1 sobre el negro de la barra: practicamente ilegible. */
.sub-header ul.left-info li span,
.sub-header ul.left-info li a,
.sub-header ul.right-icons li a {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 400;
  transition: color 0.25s;
}

.sub-header ul.left-info li a[href]:hover,
.sub-header ul.right-icons li a:hover {
  color: var(--simac-verde-accion-claro);
  opacity: 1;
}

.sub-header ul.left-info li i {
  color: var(--simac-verde-accion-medio);
  margin-right: 8px;
  font-size: 14px;
}

.sub-header ul.right-icons {
  float: right;
}

/* Acceso a INTEC. Va en la barra superior, fuera del menu principal: INTEC es
   otra empresa, no una seccion de SIMAC. Discreto y claramente separado. */
.sub-header ul.right-icons li.acceso-intec {
  width: auto;
  padding-right: 16px;
  margin-right: 6px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.sub-header ul.right-icons li.acceso-intec a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.72);
}

.sub-header ul.right-icons li.acceso-intec a:hover {
  color: #fff;
}

.sub-header ul.right-icons li {
  border: none;
  width: 34px;
  text-align: center;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   4. Cabecera y navegacion
   --------------------------------------------------------------------------
   Esta seccion es la UNICA definicion de la cabecera del sitio. Antes vivia
   repartida entre simac-base.css y este archivo, y la pagina INTEC —que no
   carga simac-base.css— se quedaba sin la mitad de las reglas: sus opciones
   de menu perdian los 15 px de separacion y el bloque entero aparecia 185 px
   mas a la derecha y 2 px mas arriba que en el resto del sitio.

   La geometria es fija y no depende del contenido de la pagina ni de cual
   opcion este activa:

     cabecera .......... 80 px de alto
     logotipo .......... 46 px de alto, centrado en esos 80 px
     opcion de menu .... 40 px de alto, centrada en esos 80 px

   Con alturas fijas, marcar una opcion como activa no puede mover nada: el
   subrayado es un ::after absoluto, que no ocupa espacio.
   -------------------------------------------------------------------------- */

body > header {
  position: absolute;
  z-index: 99999;
  width: 100%;
  height: 80px;
  background-color: transparent;
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

body > header .navbar {
  height: 80px;
  min-height: 80px;
  padding: 0;
}

/* Una sola fila, sin ajuste de linea: el logotipo a la izquierda y el menu a
   la derecha, siempre a la misma altura. El panel desplegable del movil sale
   del flujo (position:absolute), asi que no puede empujar esta fila. */
/* La cabecera usa un contenedor mas ancho que el del contenido. Con el
   .container de 1140 px el logotipo caia a 165 px del borde en una pantalla
   de 1440 y se leia como si estuviera centrado. Ahora arranca a 40 px, que es
   la posicion habitual de un logotipo corporativo, y el menu llega hasta el
   otro extremo. El contenido de las paginas conserva su ancho de siempre. */
body > header .navbar > .container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1600px;
  width: 100%;
  padding-left: 40px;
  padding-right: 40px;
}

.navbar-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  height: 62px;
  margin: 0;
  padding: 0;
}

/* Solo se fija el alto; el ancho lo calcula el navegador a partir del propio
   archivo, asi que la proporcion original del logotipo no se altera nunca. */
.navbar-brand img {
  height: 62px;
  width: auto;
  max-width: none;
  display: block;
}

/* Un unico logotipo, el tradicional de SIMAC (logo-simac-header.png), igual en los dos
   estados de la cabecera. Antes se cambiaba por una version blanca mientras la
   cabecera era transparente: eso resolvia el contraste sobre la fotografia,
   pero a costa de alterar la identidad. La legibilidad se resuelve donde
   corresponde, en el velo superior de la portada (seccion 5). */

#navbarResponsive {
  z-index: 999;
}

.navbar-nav {
  align-items: center;
}

.navbar-nav .nav-item {
  display: flex;
  align-items: center;
  margin: 0 15px;
}

/* Alto fijo. Es lo que garantiza que la fila del menu mida siempre 40 px y
   que INICIO, NOSOTROS, SERVICIOS, INTEC, OBRAS y CONTACTO caigan en el mismo
   pixel en las siete paginas. */
.navbar-nav .nav-link {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 14px !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.8px;
  line-height: 1;
  color: #fff;
  position: relative;
  transition: color 0.25s;
}

.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  background-color: var(--simac-verde-accion-claro);
  transform: scaleX(0);
  transition: transform 0.25s;
}

.navbar-nav .nav-item.active > .nav-link::after,
.navbar-nav .nav-link.active::after,
.navbar-nav .nav-link:hover::after {
  transform: scaleX(1);
}

.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
  color: var(--simac-verde-accion-claro) !important;
}

.background-header {
  top: 0;
  position: fixed;
  background-color: #fff;
  box-shadow: 0 1px 14px rgba(0, 0, 0, 0.08);
}

.background-header .navbar-nav .nav-link {
  color: var(--simac-tinta) !important;
}

/* Sobre la cabecera blanca el verde de marca queda en 1.96:1 —ilegible—, asi
   que ahi el rotulo activo va en el verde institucional (10.2:1) y el
   subrayado se queda de lima: el peso lo lleva el texto y la linea es el
   acento. Sobre la cabecera transparente, con la fotografia oscura detras,
   el rotulo sigue en lima porque #004b36 daria 1.5:1. */
.background-header .navbar-nav .nav-item.active > .nav-link,
.background-header .navbar-nav .nav-link.active,
.background-header .navbar-nav .nav-link:hover {
  color: var(--simac-verde-accion) !important;
}

.background-header .navbar-nav .nav-link::after {
  background-color: var(--simac-verde-accion);
}

/* Boton del menu movil.
   El icono es un SVG incrustado, sin depender de Font Awesome: antes era el
   glifo f0c9, definido solo en simac-base.css, y en INTEC salia vacio. */
.navbar-toggler {
  flex: 0 0 auto;
  width: 44px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  outline: none;
  transition: background-color 0.25s;
}

.navbar-toggler-icon {
  display: block;
  width: 100%;
  height: 100%;
  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='%231e1e1e' stroke-width='2.4' stroke-linecap='round' stroke-miterlimit='10' d='M5 8h20M5 15h20M5 22h20'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

.navbar-toggler-icon:after {
  content: none;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  opacity: 0.55;
}


/* --------------------------------------------------------------------------
   5. Portada (slider) y encabezados de pagina
   -------------------------------------------------------------------------- */

/* Velo superior. La cabecera es blanca y varias fotos de portada son claras:
   sin este degradado el menu se pierde sobre la imagen. */
.main-banner .item .img-fill::before,
#infinite::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px;
  background: linear-gradient(180deg, rgba(12, 12, 12, 0.78), rgba(12, 12, 12, 0.34) 55%, rgba(12, 12, 12, 0));
  pointer-events: none;
  z-index: 1;
}

.main-banner {
  overflow: hidden;
}

.main-banner .item .img-fill {
  position: relative;
}

.main-banner .text-content {
  position: relative;
  z-index: 2;
}

.main-banner .text-content h1,
.main-banner .text-content .titular-portada,
.main-banner .text-content h2,
.main-banner .text-content h4 {
  color: #fff;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.main-banner .text-content p.bajada {
  color: rgba(255, 255, 255, 0.92);
  font-size: 17px;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 0 28px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

/* Alto de las portadas interiores. La referencia del sitio es "Nuestro
   equipo": todas las portadas miden lo mismo que ella -470 px en escritorio y
   430 px de tablet hacia abajo- para que el sistema sea uno solo. El alto se
   declara aqui, en la regla base, y no repetido en cada modificador.
   El padding 180/92 se mantiene porque es lo que sostiene el titulo de
   Contacto y Obras en su sitio; con min-height la portada crece por debajo. */
.page-heading {
  min-height: 470px;
  padding: 180px 0 92px;
  position: relative;
  background-color: var(--simac-tinta);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Cada pagina lleva una fotografia propia. Ninguna se repite en otra seccion.
   Nosotros: dos profesionales revisando antecedentes en obra — habla de perfil
   profesional y trayectoria, que es lo que cuenta esa pagina; antes llevaba una
   faena de cielo falso, correcta pero generica. Servicios: infraestructura
   hidraulica real; antes usaba ingenieria2.jpg, que ya estaba en la portada. */
.page-heading--nosotros {
  background-image: url(../images/nosotros-portada.jpg);
}

.page-heading--servicios {
  background-image: url(../images/servicios-portada.jpg?v=20260908);
  background-position: center 62%;
}

.page-heading--contacto {
  background-image: url(../images/contacto-portada.jpg);
}

/* Portada de Obras.
   La fotografia se sirve desde un nombre propio -obras-portada.jpg- y no desde
   la carpeta de la galeria, igual que el resto de portadas del sitio. Es lo que
   permite cambiarla sustituyendo un solo archivo, sin tocar CSS ni HTML.
   El archivo que hay ahora es todavia la fotografia antigua -1400x927 px,
   1,51:1-, copiada tal cual: la portada se ve exactamente igual que antes.
   Esa proporcion es el problema conocido de esta portada: en escritorio el
   marco mide 3,06:1 y se descarta el 51 % del alto de la imagen. Es lo que hay
   que corregir al elegir la nueva.
   La nueva fotografia deberia cumplir:
     - 2400x1000 px o mas, proporcion entre 2,2:1 y 2,6:1 -es la de "Nuestro
       equipo" y "Servicios", 2,50:1, y es la que evita el recorte vertical;
     - motivo principal desplazado hacia la DERECHA: el titulo se apoya a la
       izquierda y a 390 px solo entra el 36 % del ancho;
     - franja superior de unos 150 px sin detalle critico -cielo, hormigon
       liso-, que es donde se apoya la cabecera transparente;
     - sin texto, rotulos ni marcas de agua incrustados;
     - obra propia de SIMAC y distinta de las que ya aparecen en la galeria de
       mas abajo, para que la portada no repita el contenido de la pagina.
   Cuando esa fotografia exista, el unico cambio necesario es reemplazar el
   archivo. Si su encuadre lo pide, los anclajes por breakpoint van aqui. */
/* Portada de la pagina Obras.
   La fotografia es la vista general de la Presurizadora Bitran: el edificio de
   operacion, la torre, el portico de valvulas y el radier. Es la que estaba
   publicada y la que representa una obra ejecutada.
   Se sirve en dos versiones, para que no haya que ampliarla de mas en ningun
   ancho. Por debajo de 992 px, la fotografia completa (1600x1059): a 390 px el
   navegador la REDUCE a 0,41x y a 820 px a 0,51x, asi que se ve nativa. */
.page-heading--obras {
  background-image: url(../images/obras-portada.jpg?v=20260908);
  background-position: center center;
}

/* Velo propio de Obras.
   Obras era la unica portada que se quedaba con el velo base -un negro plano
   del 55 % al 72 % sobre TODA la caja-, mientras que "Nuestro equipo" y
   "Servicios" llevan velos que se apagan a cero en la mayor parte de la
   superficie. Por eso se veia bastante mas oscura que las otras dos.
   Se baja a 0,22-0,38 conservando el mismo tipo de gradiente y sin tocar la
   fotografia, el encuadre ni el alto. Va con doble clase para ganar a
   .page-heading::before independientemente del orden, y para NO afectar a la
   portada simple de gracias.html, que sigue con el velo base. */
.page-heading.page-heading--obras::before {
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.22), rgba(20, 20, 20, 0.38));
}

/* Version de escritorio.
   A partir de 992 px el banner es muy apaisado y solo muestra una banda
   horizontal de la fotografia: a 1440 px se ve el 49 % de su alto. Sirviendo
   la fotografia entera, el navegador tenia que ampliarla 1,8x en pantallas
   retina de 1440 y 2,4x en las de 1920.
   Se sirve entonces una version dedicada: se recorta la banda que en
   escritorio se ve de verdad -y 290..870 de 1059, que es la que deja dentro el
   edificio completo, la torre y el portico de valvulas- y se amplia a 2400x870
   remuestreando en luz lineal con enfoque suave. Es la MISMA fotografia y los
   mismos pixeles de origen: no se anade ni se quita nada, solo se interpola
   mejor y fuera del navegador. Con ella la ampliacion del navegador baja de
   1,8x a 1,2x en retina de 1440. Como el encuadre ya viene resuelto en el
   recorte, aqui basta con centrarla. */
@media (min-width: 992px) {
  .page-heading--obras {
    background-image: url(../images/obras-portada-ancha.jpg?v=20260908);
    background-position: center center;
  }
}

.page-heading--simple {
  background-image: none;
}

/* Portada de "Nuestro equipo".
   Fotografia propia de la empresa: casco SIMAC sobre los planos con la obra al
   fondo. Sin filtros, sin desaturar y sin oscurecerla: solo un velo muy suave
   en el arranque izquierdo, que es donde se apoya el titulo.
   El alto se iguala al de Servicios y Obras (395 px), que usan el padding base
   de .page-heading; aqui hacia falta declararlo porque el modificador anterior
   lo habia reducido. El logotipo grande que ocupaba la derecha se retira: la
   marca ya esta en el casco de la fotografia. */
.page-heading--equipo {
  background-image: url(../images/nuestro-equipo-portada.jpg?v=20260908);
  /* Encuadre calculado sobre la propia foto: el casco ocupa el 47-90 % de su
     alto y el cielo despejado el 0-45 %. Con el fondo al 70 % el casco entra
     completo —incluido su logotipo— y arriba queda el cielo, que es donde se
     apoya el titulo. Por eso el contenido se alinea arriba y no al centro:
     centrado, el titulo caia justo encima del casco. */
  background-position: center 50%;
  background-size: cover;
}

@media (max-width: 1199.98px) {
  .page-heading.page-heading--equipo { background-position: 6% 50%; }
}

/* --------------------------------------------------------------------------
   Portadas con el titulo apoyado sobre la fotografia: "Nuestro equipo" y
   "Servicios". Comparten la tecnica -una franja vertical que sostiene la
   cabecera y un sesgo horizontal que sostiene el titulo-, el color del velo,
   el encuadre del contenido y la tipografia. Lo que NO comparten son las
   intensidades: cada fotografia pide la suya. La de equipo es un atardecer a
   contraluz, con el cielo muy claro justo detras del menu; la de servicios es
   un interior a media luz que con esos mismos valores quedaba apagado.
   Identidad comun, calibracion propia.
   -------------------------------------------------------------------------- */
.page-heading.page-heading--equipo,
.page-heading.page-heading--servicios {
  display: flex;
  align-items: flex-start;
  padding: 104px 0 44px;
}

/* Velo en degradado horizontal: firme donde va el titulo y practicamente nulo
   sobre la obra y la luz del atardecer, para que la fotografia siga siendo la
   protagonista. */
.page-heading.page-heading--equipo::before {
  background:
    /* Franja superior: la cabecera va transparente sobre la foto y aqui el
       cielo es claro, asi que el logotipo y los enlaces necesitan fondo. Se
       apaga a los 210 px, antes de llegar al casco. */
    linear-gradient(180deg,
      rgba(14, 17, 20, 0.74) 0,
      rgba(14, 17, 20, 0.74) 122px,
      rgba(14, 17, 20, 0.3) 196px,
      rgba(14, 17, 20, 0) 262px),
    /* Sesgo hacia la izquierda para la lectura del titulo. */
    linear-gradient(90deg,
      rgba(14, 17, 20, 0.4) 0%,
      rgba(14, 17, 20, 0.22) 38%,
      rgba(14, 17, 20, 0.05) 66%,
      rgba(14, 17, 20, 0) 100%);
}

/* Servicios: misma tecnica y mismo color, intensidades propias.
   - Franja vertical: se ajusta a los 80 px que mide la cabecera y se apaga a
     los 150 px, en vez de arrastrarse hasta 262.
   - Sesgo lateral: 0.24 en lugar de 0.40. Medido sobre esta fotografia, el
     titulo blanco pasa de 3,4:1 a 4,0:1 de contraste, que es cuanto necesita
     un titular de 40 px en mayusculas; mas velo solo apagaria la imagen. */
.page-heading.page-heading--servicios::before {
  background:
    linear-gradient(180deg,
      rgba(14, 17, 20, 0.7) 0,
      rgba(14, 17, 20, 0.7) 80px,
      rgba(14, 17, 20, 0.24) 116px,
      rgba(14, 17, 20, 0) 150px),
    linear-gradient(90deg,
      rgba(14, 17, 20, 0.24) 0%,
      rgba(14, 17, 20, 0.13) 38%,
      rgba(14, 17, 20, 0.03) 66%,
      rgba(14, 17, 20, 0) 100%);
}

.page-heading--equipo .container,
.page-heading--servicios .container {
  width: 100%;
  max-width: 1200px;
}

/* Sin bajada debajo, el titulo no necesita separacion inferior; y las dos
   portadas lo apoyan a la izquierda, sobre el sesgo lateral del velo. */
.page-heading.page-heading--equipo h1,
.page-heading.page-heading--servicios h1 {
  text-align: left;
  margin-bottom: 0;
}

/* Filete de marca bajo el titulo. */
.page-heading--equipo h1::after,
.page-heading--servicios h1::after {
  content: "";
  display: block;
  width: 58px;
  height: 2px;
  margin-top: 20px;
  background-color: var(--simac-verde-accion-medio);
}

/* En tablet y movil el encuadre se cierra hacia la izquierda para que el casco
   y su logotipo sigan siendo lo primero que se ve. */
@media (max-width: 991.98px) {
  .page-heading.page-heading--equipo,
  .page-heading.page-heading--servicios {
    padding: 100px 0 40px;
  }
  .page-heading.page-heading--equipo {
    background-position: 4% 50%;
  }
  .page-heading.page-heading--equipo::before {
    background:
      linear-gradient(180deg,
        rgba(14, 17, 20, 0.66) 0,
        rgba(14, 17, 20, 0.66) 112px,
        rgba(14, 17, 20, 0.28) 186px,
        rgba(14, 17, 20, 0) 250px),
      linear-gradient(90deg,
        rgba(14, 17, 20, 0.34) 0%,
        rgba(14, 17, 20, 0.12) 60%,
        rgba(14, 17, 20, 0) 100%);
  }
}

@media (max-width: 575.98px) {
  /* Alto de la portada en telefono: 340 px, no los 430 de tablet.
     Las dos fotografias son panoramicas -2,50:1- dentro de un marco vertical,
     asi que "cover" recorta por los costados y el alto es justo lo que decide
     cuanto ancho entra. Medido a 390 px de viewport:
        430 px -> entra el 36,2 % del ancho
        390 px -> entra el 39,9 %
        360 px -> entra el 43,3 %
        340 px -> entra el 45,8 %
     A 430 el casco ocupaba casi todo el cuadro; a 340 la escena se lee entera
     -casco, planos, ciudad al atardecer en Nosotros; casco, planos y los tres
     profesionales en Servicios- y queda banda de cielo sobre el titulo. Por
     debajo de 340 la portada empieza a parecer una franja y pierde presencia.
     El contenido ocupa 184 px, asi que cabe holgado. */
  .page-heading.page-heading--equipo,
  .page-heading.page-heading--servicios {
    min-height: 340px;
    padding: 96px 0 36px;
  }
  /* Con la ventana ya al 45,8 % del ancho, el anclaje se recoloca: al 14 % el
     montante de la ventana queda de marco vertical a la izquierda -y da fondo
     oscuro al titulo-, el casco y los planos ocupan el centro y la cinta
     metrica cierra por la derecha. */
  .page-heading.page-heading--equipo {
    background-position: 14% 50%;
  }
  /* Servicios vuelve al 14 % que tenia: el 20 % hacia falta cuando solo
     entraba el 36 % del ancho y el tercer profesional se cortaba. Con el 45,9 %
     que entra ahora, al 14 % caben los tres profesionales completos y ademas
     la planta y la columna de hormigon del lado izquierdo, que es lo que da
     profundidad y fondo oscuro bajo el titulo. */
  /* Doble clase a proposito: la regla de <=767,98 px fija el 20 % y aparece
     mas abajo en la hoja, asi que con un solo nombre de clase ganaria ella. */
  .page-heading.page-heading--servicios {
    background-position: 14% center;
  }
}

.page-heading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.55), rgba(20, 20, 20, 0.72));
}

.page-heading .container {
  position: relative;
  z-index: 2;
}

/* Criterio original de SIMAC: el titulo principal de una portada va en
   mayusculas. Se hace con text-transform y no reescribiendo el texto, para
   que buscadores y lectores de pantalla sigan recibiendo la forma natural. */
.page-heading h1 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}

.page-heading p.bajada {
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  max-width: 720px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   6. Tarjetas de servicio
   -------------------------------------------------------------------------- */

.services {
  margin-top: var(--simac-ritmo);
}

.service-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #ececec;
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
}

.service-item:hover {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.service-item img {
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.service-item .down-content {
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.service-item .down-content h3,
.service-item .down-content h4 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--simac-tinta);
  margin-bottom: 14px;
  min-height: 48px;
}

.service-item .down-content p {
  margin-bottom: 24px;
  flex: 1 1 auto;
}

.service-item .down-content .filled-button {
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   6b. Capacidades de servicio
   --------------------------------------------------------------------------
   Sustituye a tres tarjetas identicas. Cada capacidad es una pieza editorial:
   numero integrado al fondo, fotografia, titulo, una frase y la lista de lo
   que incluye —tomada literalmente de la descripcion aprobada, sin anadir
   ninguna capacidad nueva—. El verde actua como acento, no como relleno.
   -------------------------------------------------------------------------- */

.capacidades-serv {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  margin-top: 6px;
}

.capacidad-serv {
  position: relative;
  display: flex;
  flex-direction: column;
}

.capacidad-serv__foto {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 3px;
}

.capacidad-serv__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* Filete verde: nace en el borde superior del cuerpo y se extiende al pasar
   el cursor. Es el acento de marca de la seccion. */
.capacidad-serv__cuerpo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding-top: 22px;
}

.capacidad-serv__cuerpo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 2px;
  background-color: var(--simac-verde-accion-claro);
  transition: width 0.5s cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* El titulo del tercer servicio ocupa dos lineas y el de los otros dos una:
   con min-height los tres rotulos "Capacidades" y las tres listas arrancan a
   la misma altura, y el enlace final queda alineado al pie de la tarjeta. */
.capacidad-serv h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.3;
  min-height: 44px;
  color: var(--simac-tinta);
  margin: 0 0 10px;
  transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.capacidad-serv p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--simac-texto);
  margin: 0 0 16px;
}

/* Capacidades de la portada.
   Deliberadamente distintas del acordeon de servicios2: aqui no hay que
   pulsar para descubrir el contenido —en escritorio basta pasar el cursor y
   la definicion se despliega en el sitio—. El parrafo que antes precedia a
   esta lista se retiro porque enumeraba exactamente estas mismas capacidades.
   Todas las definiciones proceden del texto empresarial ya aprobado. */
.capacidad-serv__subt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--simac-gris-texto, #6d7278);
  margin: 0 0 4px;
}

/* La lista reserva de antemano el alto de la definicion mas larga: al abrir
   una capacidad la tarjeta no crece y la seccion no da un salto. */
.capacidad-serv__lista {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  min-height: 236px;
  border-top: 1px solid #e9ebe4;
}

.cap-port { border-bottom: 1px solid #e9ebe4; }

.cap-port__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--simac-tinta);
  transition: color 0.3s ease, padding-left 0.35s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.cap-port__rot {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.cap-port__flecha {
  flex: 0 0 auto;
  font-size: 13px;
  color: #6f7568;
  transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.3, 1), color 0.3s ease;
}

/* La definicion se despliega en su sitio. Se anima el alto con grid para no
   depender de una altura fija: el texto puede ocupar una o tres lineas. */
.cap-port__def {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.6;
  color: var(--simac-texto);
  margin: 0;
  opacity: 0;
  transition: grid-template-rows 0.42s cubic-bezier(0.22, 0.8, 0.3, 1),
    opacity 0.3s ease, padding 0.42s cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* El parrafo interior es el que grid colapsa; necesita min-height:0 y su
   propio overflow para que el recorte sea limpio durante la transicion. */
.cap-port__def > p {
  min-height: 0;
  overflow: hidden;
  margin: 0;
}

.cap-port.is-abierta .cap-port__def {
  grid-template-rows: 1fr;
  opacity: 1;
  padding: 0 0 12px;
}

.cap-port.is-abierta .cap-port__btn {
  color: var(--simac-verde-texto);
  padding-left: 8px;
}

.cap-port.is-abierta .cap-port__flecha {
  color: var(--simac-verde-texto);
  transform: rotate(90deg);
}

.cap-port__btn:focus-visible {
  outline: 2px solid var(--simac-verde-texto);
  outline-offset: 3px;
}

/* Movimiento reducido: la marca se queda quieta. */
@media (prefers-reduced-motion: reduce) {
  .fun-facts::after {
    transform: translate(-50%, -50%);
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cap-port__def,
  .cap-port__btn,
  .cap-port__flecha { transition: none; }
}

.enlace-serv {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--simac-verde-texto);
  transition: gap 0.35s ease, color 0.35s ease;
}

.enlace-serv span {
  transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* Microinteraccion: todo se mueve poco y despacio. */
.capacidad-serv:hover .capacidad-serv__foto img { transform: scale(1.04); }
.capacidad-serv:hover .capacidad-serv__cuerpo::before { width: 82px; }
.capacidad-serv:hover h3 { transform: translateX(3px); }
.capacidad-serv:hover .enlace-serv { color: var(--simac-tinta); gap: 14px; }
.capacidad-serv:hover .enlace-serv span { transform: translateX(3px); }

/* Entre 992 y 1199 las tres columnas se estrechan y las definiciones ocupan
   una linea mas; la reserva crece con ellas. */
@media (max-width: 1199.98px) {
  .capacidad-serv__lista { min-height: 264px; }
}

@media (max-width: 991.98px) {
  .capacidades-serv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
}

@media (max-width: 575.98px) {
  .capacidades-serv { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  /* A una sola columna la tarjeta es ancha y el texto ocupa menos lineas. */
  .capacidad-serv__lista { min-height: 226px; }
}

/* --------------------------------------------------------------------------
   7. Cifras
   -------------------------------------------------------------------------- */

.fun-facts {
  margin-top: var(--simac-ritmo);
  padding: 110px 0;
  position: relative;
  overflow: hidden;
  background-image: none;
  background-color: #141414;
}

/* TRAYECTORIA DE EXCELENCIA — gran marca SIMAC de fondo.
   Es el planteamiento original de la seccion: el fondo `fondo-cifras.jpg`
   lleva incrustada la marca completa —monograma, SIMAC e "Ingenieria y
   Construccion"— en negro sobre un grafito algo mas claro.
   No se usa el JPEG directamente porque su rango tonal es 0-41: al subir la
   exposicion para que la marca se viera, afloraba el ruido de compresion y
   dos manchas ajenas a la marca. Lo que se hace es extraer del propio
   `fondo-cifras.jpg` la silueta de la marca (`marca-cifras.png`), descartar
   por componentes conexas esas dos manchas y pintarla como mascara de color
   plano. Misma marca, misma escala y misma posicion que el original —69,9 %
   del ancho, centrada, recortada por el borde inferior—, sin ruido.
   La marca va detras del contenido y no lleva fotografia. */
.fun-facts::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #141414;
  z-index: 0;
}

.fun-facts::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  height: 105%;
  /* El desplazamiento del parallax llega por variable desde JavaScript. Sin
     JavaScript la variable vale 0 y la marca queda donde estaba. */
  transform: translate(-50%, calc(-50% + var(--marca-parallax, 0px)));
  background-color: #070707;
  will-change: transform;
  -webkit-mask-image: url(../images/marca-cifras.png);
  mask-image: url(../images/marca-cifras.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 991.98px) {
  .fun-facts::after { width: 92%; height: 84%; top: 50%; }
}

@media (max-width: 575.98px) {
  .fun-facts::after { width: 98%; height: 52%; top: 50%; }
}

.fun-facts .container {
  position: relative;
  z-index: 2;
}

.fun-facts h2 {
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 22px;
}

.fun-facts h2 em {
  font-style: normal;
  color: var(--simac-verde-accion-medio);
}

.fun-facts p {
  color: rgba(255, 255, 255, 0.86);
}

/* Los dos indicadores comparten estructura exacta: misma caja, mismo fondo,
   mismo padding y mismo alto. Antes el primero crecia porque su rotulo ocupa
   dos lineas y el segundo una. */
.fun-facts .col-md-6 > .row > [class*="col-"] {
  display: flex;
}

.count-area-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 176px;
  padding: 30px 20px;
  margin: 15px 0;
  /* Color solido, no translucido: la marca de fondo pasa por detras de la
     primera caja y no de la segunda, y con transparencia las dos dejaban de
     verse iguales. Es el mismo tono que daba antes la mezcla sobre el fondo. */
  background-color: #202020;
  border-radius: 6px;
  text-align: center;
}

.count-digit {
  color: var(--simac-verde-texto);
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
}

.count-title {
  color: #fff;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 12px;
}

/* --------------------------------------------------------------------------
   8. Bloques de texto con imagen
   -------------------------------------------------------------------------- */

.more-info .right-content h2 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 18px;
}

.more-info .right-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--simac-tinta);
  margin-bottom: 18px;
}

.more-info .right-content h3.subtitulo-verde {
  font-size: 17px;
  font-weight: 600;
  color: var(--simac-verde-texto);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.more-info .right-content h3 em,
.more-info .right-content h2 em {
  font-style: normal;
  color: var(--simac-verde-titulo);
}

/* Ficha de gerente */


/* --------------------------------------------------------------------------
   8b. Capacidades (Quienes somos)
   --------------------------------------------------------------------------
   Sustituye a dos parrafos y dos listas encadenadas. El contenido es el mismo
   que estaba aprobado, sintetizado: la cifra corresponde a la experiencia de
   los profesionales, no a la antiguedad de SIMAC, que se fundo en 2022.
   -------------------------------------------------------------------------- */

/* Columna derecha de "Experiencia": la imagen arquitectonica.
   Ocupa la mitad del bloque, conserva su proporcion original (3:2) y no lleva
   filtros, texto ni logotipo encima. */
.experiencia-visual {
  overflow: hidden;
  border-radius: 3px;
}

.experiencia-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.entradilla-simac {
  font-size: 17px;
  line-height: 1.75;
  color: var(--simac-texto);
  max-width: 620px;
  margin: 0;
}

.bloque-capacidades {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 46px;
  border-top: 1px solid #e6e8e0;
}

.capacidad {
  padding: 30px 26px 26px 0;
  border-right: 1px solid #e6e8e0;
}

.capacidad:last-child {
  border-right: none;
}

.capacidad:not(:first-child) {
  padding-left: 26px;
}

.capacidad__dato {
  display: block;
  margin-top: 46px;
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--simac-verde-titulo);
}

.capacidad__pie {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--simac-texto);
}

/* Iconos de las tres areas.
   SVG en linea, no un tipo de iconos: trazo fino constante, sin relleno salvo
   el punto de acento, y el verde de marca reservado a un unico detalle de
   cada pieza. Pequenos, para que no compitan con los rotulos. */
.capacidad__icono {
  display: block;
  width: 30px;
  height: 30px;
  margin-bottom: 16px;
  fill: none;
  stroke: var(--simac-verde-accion);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* El icono va entero en el verde institucional, trazo base y detalle. */
.capacidad__icono .ac { stroke: var(--simac-verde-accion); }
.capacidad__icono .ac--lleno { fill: var(--simac-verde-accion); stroke: none; }

.capacidad h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--simac-tinta);
  margin: 0 0 8px;
}

.capacidad p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--simac-texto);
  margin: 0;
}

.cierre-simac {
  margin-top: 40px;
  padding-left: 18px;
  border-left: 3px solid var(--simac-verde);
  font-size: 17px;
  font-weight: 600;
  color: var(--simac-tinta);
}

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

  .capacidad:nth-child(2n) {
    border-right: none;
  }

  .capacidad:nth-child(odd) {
    padding-left: 0;
  }

  .capacidad:nth-child(even) {
    padding-left: 26px;
  }
}

@media (max-width: 575.98px) {
  .bloque-capacidades {
    grid-template-columns: minmax(0, 1fr);
  }

  /* En una sola columna el primer bloque ya no tiene que alinearse con la
     fila de iconos, asi que se retira su compensacion de altura. */
  .capacidad__dato { margin-top: 0; }

  .capacidad {
    border-right: none;
    border-bottom: 1px solid #e6e8e0;
    padding: 24px 0;
  }

  .capacidad:last-child {
    border-bottom: none;
  }

  .capacidad:nth-child(even),
  .capacidad:nth-child(odd) {
    padding-left: 0;
  }
}

/* Encabezado de la seccion de equipo directivo. Antes las fichas aparecian
   sueltas, sin titulo que las presentara como equipo. */
.encabezado-equipo {
  margin-bottom: 34px;
}

.seccion-equipo .encabezado-equipo { margin-bottom: 6px; }

.encabezado-equipo h2 {
  font-size: 30px;
  font-weight: 700;
  color: var(--simac-tinta);
  line-height: 1.2;
  margin: 0 0 5px;
}

.encabezado-equipo h2 em {
  font-style: normal;
  color: var(--simac-verde-titulo);
}

.encabezado-equipo::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  background-color: var(--simac-verde-texto);
}

/* --------------------------------------------------------------------------
   9. Servicios en detalle (ex "tabs")
   -------------------------------------------------------------------------- */

.single-services {
  margin-top: var(--simac-ritmo);
}

.servicio-detalle ul {
  margin: 0;
  padding: 0;
}

.servicio-detalle ul li {
  display: block;
  width: 100%;
}

.servicio-detalle ul li span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 24px;
  background-color: var(--simac-tinta);
  border-left: 4px solid var(--simac-verde);
  border-radius: 4px;
  font-size: 17px;
  color: #fff;
  letter-spacing: 0.6px;
  font-weight: 700;
  border-radius: 4px;
}

.servicio-detalle ul li span i {
  margin-left: 12px;
  color: var(--simac-verde);
}

.tabs-content h4 {
  color: var(--simac-tinta);
}

.tabs-content img {
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   10. Contacto
   -------------------------------------------------------------------------- */

.contact-information .contact-item {
  height: 100%;
  border-radius: 6px;
  border: 1px solid #ececec;
}

.contact-information .contact-item i {
  color: var(--simac-verde-accion);
}

.contact-information .contact-item a {
  color: var(--simac-tinta);
  font-weight: 600;
  word-break: break-word;
}

.contact-information .contact-item a:hover {
  color: var(--simac-verde-texto);
}

.callback-form {
  margin-top: var(--simac-ritmo);
}

.callback-form .contact-form input,
.callback-form .contact-form textarea {
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   11. Clientes
   -------------------------------------------------------------------------- */

.more-info,
.contact-information {
  margin-top: var(--simac-ritmo);
}

.partners {
  margin-top: var(--simac-ritmo);
  padding: 60px 0 40px;
  background-color: var(--simac-gris-claro);
}

.partners h2.titulo-clientes {
  text-align: center;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--simac-texto);
  font-weight: 600;
  margin-bottom: 34px;
}

/* MARQUESINA DE CLIENTES
   Antes era un carrusel de Owl. Owl siempre deja un hueco entre transiciones,
   asi que el movimiento se percibia a tirones —medido: 3 intervalos detenidos
   de cada 39—. Una marquesina CSS se desplaza de forma realmente continua, se
   detiene al pasar el cursor o al recibir foco de teclado, y permite retirar
   owl.js (91 KB) y owl.css, que no se usaban para nada mas.

   La pista se duplica desde JavaScript: al desplazar exactamente el 50 % el
   bucle es invisible. Sin JavaScript se ve la fila de logotipos quieta, que
   es un estado perfectamente valido.

   Todos los logotipos se sirven ya recortados y normalizados sobre un lienzo
   comun de 360x132: el peso optico viene igualado desde el propio archivo. */
.marquesina {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquesina__pista {
  display: flex;
  width: max-content;
  animation: marquesina-desplazar 20s linear infinite;
}

.marquesina:hover .marquesina__pista,
.marquesina:focus-within .marquesina__pista {
  animation-play-state: paused;
}

.marquesina.is-arrastrando { cursor: grabbing; }

.marquesina.is-arrastrando .partner-item img { pointer-events: none; }

@keyframes marquesina-desplazar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.partners .partner-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 210px;
  height: 104px;
  padding: 0 14px;
}

.partners .partner-item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
  margin: 0;
  opacity: 0.94;
  transition: opacity 0.3s, transform 0.3s;
}

.partners .partner-item:hover img {
  opacity: 1;
  transform: scale(1.04);
}

/* Dos marcas del carrusel no son rotulos horizontales sino emblemas: el escudo
   vertical de Scuola Italiana y el sello circular de Cooperativa Control
   Pisquero. A la altura comun de 80 px su texto curvo no se llega a leer, asi
   que se les permite algo mas de alto -sin pasar del ancho de los demas ni del
   alto de la casilla-. Es la misma excepcion, aplicada al mismo tipo de pieza. */
.partners .partner-item img[src*="cliente9"],
.partners .partner-item img[src*="cliente12"] {
  max-height: 92px;
}

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

@media (max-width: 575.98px) {
  .partners .partner-item { width: 168px; height: 92px; padding: 0 10px; }
  .partners .partner-item img { max-height: 64px; }
}

/* --------------------------------------------------------------------------
   12. Pie de pagina
   -------------------------------------------------------------------------- */

footer {
  background-color: var(--simac-negro);
  padding: 72px 0 46px;
}

/* Las columnas del pie usan <h3>: con <h4> el documento saltaba de h2 a h4 y
   el esquema de encabezados quedaba incompleto. Se conserva tambien el
   selector h4 por si alguna pagina futura lo usa. */
footer h3,
footer h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 26px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--simac-borde);
}

footer p,
footer a.text-white {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 14px;
  line-height: 1.7;
}

footer a.text-white:hover {
  color: var(--simac-verde) !important;
}

footer .footer-item img {
  display: block;
  width: 132px;
  max-width: 100%;
  height: auto;
  margin-bottom: 18px;
}

footer .footer-item .descriptor {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 6px;
}

/* El icono va centrado bajo el logotipo. Para que el eje sea real, el pie usa
   una version del logotipo recortada a su tinta: el archivo de cabecera
   arrastra 21 px de transparencia por la izquierda y descuadraba el centro. */
footer ul.social-icons {
  margin-top: 18px;
  padding: 0;
  list-style: none;
  width: 132px;
  text-align: center;
}

footer ul.social-icons li {
  margin-right: 10px;
  display: inline-block;
}

footer ul.social-icons li a {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: background-color 0.25s, color 0.25s;
}

footer ul.social-icons li a:hover {
  background-color: var(--simac-verde-accion);
  color: #fff;
}

footer .datos-contacto p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

footer .datos-contacto i {
  color: var(--simac-verde-accion-medio);
  margin-top: 5px;
  min-width: 16px;
}

footer .enlaces-pie a {
  display: block;
  margin-bottom: 11px;
}

footer .contact-form input {
  width: 100%;
  border-radius: 6px;
  background-color: #2f2f2f;
  color: #fff !important;
  height: 42px;
  line-height: 42px;
}

footer .contact-form input:focus {
  background-color: #383838;
}

footer .contact-form button {
  width: 100%;
  border-radius: 6px !important;
  background-color: var(--simac-verde-accion) !important;
  color: #fff !important;
  border: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 12px 20px;
  transition: background-color 0.25s;
}

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

.sub-footer {
  background-color: var(--simac-negro-2);
  padding: 20px 0;
}

.sub-footer p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  margin: 0;
  font-weight: 400;
}

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

.sub-footer a:hover {
  color: var(--simac-verde);
}

/* --------------------------------------------------------------------------
   13. Obras
   -------------------------------------------------------------------------- */

.obras-grid {
  margin-top: 10px;
}

/* Una obra = una tarjeta. Dentro de .obra-galeria solo se ve la portada de la
   obra; el resto de sus fotografias son enlaces sin contenido que existen para
   alimentar el visor, y no ocupan sitio en la grilla. */
.obra-galeria > .obra-foto {
  display: none;
}

.obra-item {
  position: relative;
  display: block;
  margin-bottom: 30px;
  border-radius: 6px;
  overflow: hidden;
  background-color: var(--simac-tinta);
}

/* Proporcion fija en vez de alto fijo: la casilla acompana al ancho de la
   columna y la fotografia nunca se ve aplastada. */
.obra-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.35s;
}

.obra-item:hover img {
  transform: scale(1.025);
  opacity: 0.72;
}

.obra-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.82));
  color: #fff;
}

.obra-item figcaption h3 {
  color: #fff;
  /* El nombre de la obra es lo primero que hay que leer en la tarjeta, y
     compite con la textura de la propia fotografia. Sube de 16 a 18 px y de
     600 a 700 para ganar presencia; la sombra no oscurece la foto, solo separa
     las letras del fondo justo en su borde. El interlineado de 1,25 esta
     puesto pensando en los nombres de obra largos, que ocuparan dos lineas.
     A 19 px el titulo ya partia en dos lineas en la tarjeta de escritorio. */
  /* En caja alta. La mayuscula ocupa bastante mas ancho, asi que el tamano lo
     fija ahora el limite de que el titulo entre en UNA linea: medido, 16 px sin
     espaciado extra es el maximo que lo consigue en la tarjeta de escritorio.
     Por eso el espaciado va a 0 aunque en mayuscula se suela abrir: con solo
     0,6 px el titulo ya se parte y deja una palabra suelta en la segunda linea.
     Sigue siendo proporcional -baja a 15 px en las tarjetas estrechas, donde
     encoger reduce el numero de lineas-, pero con el techo en 16. */
  font-size: clamp(15px, 0.3vw + 11.5px, 16px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0 0 6px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

.obra-item figcaption span {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.6px;
  /* Oliva de marca, pero el de la familia pensada para texto GRANDE
     (--simac-verde-titulo, #789628) y no el de texto fino sobre fondo claro
     (#617914): el pie de la tarjeta es OSCURO, y ahi el #617914 se queda en
     2,30:1, por debajo de lo legible. Con este y en negrita sube a 3,35:1, que
     es lo que pide un texto en negrita. Sigue siendo oliva, no lima.
     En caja baja: el titulo ya va en mayuscula y dos lineas en caja alta,
     una sobre otra, se leian peor y competian entre si. */
  color: var(--simac-verde-titulo);
  font-weight: 700;
  text-transform: none;
}

.aviso-obras {
  background-color: var(--simac-gris-claro);
  border-left: 3px solid var(--simac-verde);
  padding: 26px 28px;
  border-radius: 4px;
  margin-top: 20px;
}

.aviso-obras h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
  .navbar-nav .nav-link {
    padding: 10px 10px !important;
    font-size: 12.5px;
  }
}

@media (max-width: 991.98px) {
  /* En movil el logotipo y el boton se reparten la misma fila flexible de
     80 px: ya no hacen falta los `position:absolute` con los que antes se
     colocaban a mano (left:15/top:12 aqui, left:30/top:10 en simac-base.css,
     cada hoja con su valor). El unico elemento que sigue fuera del flujo es
     el panel desplegable, que por definicion tiene que salir de la fila.
     `top: 100%` lo ancla al borde inferior de la cabecera sin numeros magicos:
     antes eran 76 px aqui y 80 px en la otra hoja. */
  /* Bootstrap pone `padding: 0` al .container del navbar por debajo de
     992 px. Con el logotipo colocado ya por flexbox —y no con position
     absolute— eso lo dejaba pegado al borde de la pantalla. */
  header .navbar > .container {
    padding-right: 15px;
    padding-left: 15px;
  }

  #navbarResponsive {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 99999;
    background-color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    padding: 8px 0;
  }

  .navbar-nav {
    align-items: stretch;
  }

  .navbar .navbar-nav .nav-item {
    display: block;
    margin: 0;
    border-bottom: 1px solid #eee;
  }

  .navbar .navbar-nav .nav-item:last-child {
    border-bottom: none;
  }

  .navbar-nav .nav-link,
  .background-header .navbar-nav .nav-link {
    color: var(--simac-tinta) !important;
    text-align: left;
    height: auto;
    padding: 13px 22px !important;
    line-height: 1.4;
  }

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

  .navbar-nav .nav-link::after {
    left: 22px;
    right: auto;
    width: 22px;
    background-color: var(--simac-verde-accion);
  }

  .navbar-brand img {
    height: 40px;
  }

  .page-heading {
    min-height: 430px;
    padding: 148px 0 72px;
  }

  .page-heading h1 {
    font-size: 30px;
  }

  .main-banner .text-content h1,
  .main-banner .text-content .titular-portada,
  .main-banner .text-content h2,
  .main-banner .text-content h4 {
    font-size: 32px;
  }

  .section-heading h2,
  h2.titulo-seccion {
    font-size: 26px;
  }

  .services,
  .more-info,
  .contact-information,
  .fun-facts,
  .callback-form,
  .partners {
    margin-top: 70px;
  }

  .single-services {
    margin-top: 60px;
  }

  .service-item {
    margin-bottom: 26px;
  }
}

@media (max-width: 767.98px) {
  /* La barra superior se apilaba en tres alturas -horario, telefono y debajo los
     accesos- y centrada, de modo que en un telefono de 390 px ocupaba 96 px: mas
     que la propia cabecera, y con los costados vacios. Se pasa a una sola fila
     flexible: los datos a la izquierda, que envuelven entre ellos si no caben, y
     los accesos anclados a la derecha. Asi la barra usa el ancho real del movil.
     Va acotado con body:not(.intec) porque INTEC comparte esta hoja y su barra
     ya entra en una linea: no debe tocarse. */
  body:not(.intec) .sub-header {
    height: auto;
    line-height: 1.5;
    padding: 7px 0;
    text-align: left;
  }

  body:not(.intec) .sub-header .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
  }

  body:not(.intec) .sub-header .row > [class*="col-"] {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
    padding-right: 6px;
    padding-left: 6px;
  }

  body:not(.intec) .sub-header ul.left-info {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
  }

  body:not(.intec) .sub-header ul.left-info li {
    padding: 1px 0;
  }

  body:not(.intec) .sub-header ul.right-icons {
    float: none;
    margin-top: 0;
    display: flex;
    align-items: center;
  }

  /* Los li de la derecha se encogian dentro del flex y "INTEC >" partia la
     flecha a la linea siguiente. Se fija su tamano al del contenido y se
     impide el corte. */
  body:not(.intec) .sub-header ul.right-icons li {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Los li de la derecha llevan un width: 34px en la regla base y, dentro del
     flex, ademas se encogian: "INTEC" quedaba arriba y la flecha caia sola en la
     linea siguiente. Se les impide encoger y se prohibe el salto de linea. */
  body:not(.intec) .sub-header ul.right-icons li {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* INTEC comparte esta hoja y su barra ya entraba en una sola linea. Al acotar
     las reglas de arriba a SIMAC, INTEC se quedaba sin su ajuste movil y caia al
     height: 44px de la regla base. Se le devuelve aqui, literalmente, el
     comportamiento que tenia antes de esta correccion: INTEC no cambia. */
  .intec .sub-header {
    display: block;
    height: auto;
    line-height: 1.6;
    padding: 9px 0;
    text-align: center;
  }

  .intec .sub-header ul.left-info {
    display: block;
  }

  .intec .sub-header ul.left-info li {
    padding: 2px 10px;
  }

  .intec .sub-header ul.right-icons {
    float: none;
    margin-top: 4px;
  }

  .main-banner .text-content h1,
  .main-banner .text-content .titular-portada,
  .main-banner .text-content h2,
  .main-banner .text-content h4 {
    font-size: 27px;
  }

  .main-banner .text-content p.bajada {
    font-size: 15px;
  }

  .count-digit {
    font-size: 42px;
  }

  .service-item img {
    height: 190px;
  }

  .service-item .down-content h3,
.service-item .down-content h4 {
    min-height: 0;
  }

  footer {
    padding: 56px 0 30px;
  }

  footer .footer-item {
    border-bottom: 1px solid #343434;
    margin-bottom: 28px;
    padding-bottom: 26px;
  }

  /* Las cuatro columnas del pie caian una debajo de otra: cuatro alturas y
     1.125 px de pie en un telefono de 390 px. "Contactanos" y "Secciones" son
     listas cortas y entran holgadas a dos columnas, con lo que el pie baja a
     tres alturas y ocupa el ancho disponible. El logotipo y el formulario
     siguen a todo lo ancho porque los dos lo necesitan.
     El !important solo iguala al de la utilidad .mb-5 de Bootstrap, que de otro
     modo gana por encima de esta regla y deja los 3 rem de separacion. */
  body:not(.intec) footer .row > [class*="col-"].mb-5 {
    margin-bottom: 26px !important;
  }

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

  /* A media columna, el correo de contacto es mas largo que los 195 px que le
     tocan y se salia por encima de la columna de al lado. Se le permite partir
     dentro de la palabra: solo afecta a los datos de contacto, y solo en movil.
     No se toca el tamano de letra. */
  body:not(.intec) footer .row > [class*="col-"]:nth-child(2) p,
  body:not(.intec) footer .row > [class*="col-"]:nth-child(2) a {
    overflow-wrap: anywhere;
  }

  .obra-item img {
    height: 210px;
  }

  /* En movil la portada se estrecha y el fondo se recorta por los costados:
     medido, entra el 36 % del ancho de la fotografia. El anclaje se calcula
     para que esa ventana empiece justo antes del casco SIMAC y termine pasados
     los tres profesionales del fondo, de modo que el casco entre completo -sin
     cortes en el borde- y el centro del encuadre, donde cae el titulo, quede
     sobre los planos y no encima del casco. Al 14 % el casco quedaba rozando el
     borde izquierdo y el tercer profesional se cortaba por la derecha; al 20 %
     los dos extremos respiran y los tres profesionales entran enteros. Solo
     cambia el encuadre: el alto, el velo y el resto del comportamiento
     responsive quedan igual. */
  .page-heading--servicios {
    background-position: 20% center;
  }

  /* Portada del Home, PRIMERA diapositiva unicamente.
     La fotografia de Construccion es de 1855x848 -2,19:1- y el marco del
     telefono es de 390x802, asi que "cover" solo deja ver el 22 % del ancho.
     Centrada, esa ventana caia sobre la mano y un trozo de torre: se perdian
     el casco amarillo y los dos profesionales, que son lo que cuenta la
     escena. Anclada al 20 % entra el casco COMPLETO, dos tercios del
     profesional, el antebrazo, la mano con el lapiz y las gruas del pie.
     El 20 % es el maximo desplazamiento posible: a partir del 24 % el casco
     empieza a cortarse contra el borde, que se lee peor que no tenerlo.
     De paso el titulo gana contraste -de 1,85:1 a 2,15:1- porque deja de
     caer sobre el cielo claro.
     Solo la diapositiva 1: la 2 -Ingenieria- y la 3 -Gerenciamiento- se
     quedan centradas como estaban, y el escritorio no se toca. */
  .main-banner .item.item-1 .img-fill {
    background-position: 20% center;
  }
}

@media (max-width: 480px) {
  .page-heading h1 {
    font-size: 25px;
  }

  .servicio-detalle ul li span {
    font-size: 16px;
    padding: 20px;
  }
}

/* Respeta a quien pide menos animacion en el sistema operativo. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   15. Reglas de base que INTEC necesita
   La pagina INTEC no carga simac-base.css. Estas son las pocas reglas
   generales que le faltaban; la cabecera completa esta en las secciones 3 y 4,
   que son las mismas para las siete paginas.
   -------------------------------------------------------------------------- */

a {
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   16. Listas y destacados de texto
   Sustituyen a los parrafos donde las listas venian escritas en texto corrido
   separadas solo por saltos de linea.
   -------------------------------------------------------------------------- */

ul.lista-simac {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}

ul.lista-simac li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--simac-texto);
}

ul.lista-simac li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background-color: var(--simac-verde);
}

.destacado-simac {
  font-size: 17px !important;
  font-weight: 600;
  color: var(--simac-tinta) !important;
  border-left: 3px solid var(--simac-verde);
  padding-left: 16px;
  margin-top: 26px;
}

.bloque-rse {
  margin-top: 90px;
  margin-bottom: 20px;
}

/* El sello de RSE es el unico recurso del que no existe maestro mayor
   (585x540). Se mostraba a 540 px, asi que en pantallas retina le faltaba
   casi la mitad de la resolucion. Limitandolo a 300 px queda nitido tambien
   a 2x, y como sello gana al no competir con el texto. */
.more-info .left-image img[src*="simacRSE"] {
  max-width: 300px;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* --------------------------------------------------------------------------
   17. Ajustes de la pagina INTEC
   La cabecera y el pie comunes conviven con la hoja css/intec-base.css.
   -------------------------------------------------------------------------- */

#infinite .navbar-nav .nav-link {
  color: #fff;
}

#whatwedo h2,
#gallery h2 {
  color: var(--simac-tinta);
}

/* Excepcion: los rotulos que aparecen sobre la fotografia al pasar el cursor.
   La regla de arriba lleva un id, asi que ganaba a `.grid figure h2` de
   css/intec-base.css y los dejaba en gris oscuro sobre la foto — ilegibles.
   El efecto no se toca: solo el color. */
#gallery .grid figure figcaption h2,
#gallery figure.effect-honey figcaption h2 {
  color: #fff;
}

#gallery .grid figure figcaption h2 span,
#gallery figure.effect-honey figcaption h2 span {
  color: #eaf6fb;
}

.tm-testimonial-item h3 {
  color: var(--simac-verde);
}

/* INTEC media sus titulos en rem (2.1rem = 33.6 px) y el resto del sitio en
   px (34 px). La diferencia es minima, pero es justo el tipo de detalle que
   hace que una pagina no parezca del mismo sitio que las otras. */
.tm-section-title,
h2.tm-section-title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.tm-continue a.tm-btn-primary {
  margin-top: 4px;
}

/* Los botones propios de INTEC (definidos en css/intec-base.css) llevaban
   etiqueta blanca sobre el verde de marca, igual que llevaba el resto del
   sitio: 1.96:1. Se igualan al criterio general —relleno verde, etiqueta en
   tinta— para que un boton se vea y se lea igual en las siete paginas. */
.tm-btn-primary,
.tm-btn-submit {
  color: #fff;
  background-color: var(--simac-verde-accion);
  border-color: var(--simac-verde-accion);
}

.tm-btn-primary:hover,
.tm-btn-primary:focus,
.tm-btn-submit:hover,
.tm-btn-submit:focus {
  color: #fff;
  background-color: var(--simac-verde-texto);
  border-color: var(--simac-verde-texto);
}


/* --------------------------------------------------------------------------
   18. Correcciones de legibilidad y ritmo detectadas al revisar el render
   -------------------------------------------------------------------------- */

.tabs-content p,
.tabs-content ul.lista-simac li {
  color: var(--simac-texto);
  font-size: 15px;
  line-height: 1.85;
}

.tabs-content h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 26px 0 16px;
}

/* Etiqueta de cada servicio en detalle. En gris pizarra con el acento verde
   a la izquierda: mas sobrio que el bloque verde macizo original. */
/* Galeria de INTEC: las miniaturas venian con alturas distintas (de 291 a
   660 px) y la fila quedaba dentada. */
figure.effect-honey img {
  width: 100%;
  height: 290px;
  object-fit: cover;
}

/* El logotipo sobre la galeria de INTEC ocupaba 300 px y se comia la seccion. */
#gallery .tm-text-primary + img {
  max-width: 150px;
  height: auto;
  margin-bottom: 18px;
}

/* El formulario de la home compartia ahora el fondo claro de contacto. */
.callback-form.contact-us .contact-form input,
.callback-form.contact-us .contact-form textarea {
  background-color: #fff;
  border: 1px solid #e2e2e2;
  color: var(--simac-tinta) !important;
}

.callback-form.contact-us .contact-form input:focus,
.callback-form.contact-us .contact-form textarea:focus {
  border-color: var(--simac-verde);
}

/* --------------------------------------------------------------------------
   19. Red de seguridad del preloader
   El velo verde de carga lo quitaba unicamente JavaScript. Si el JS no
   llegaba a cargar (red lenta, bloqueador, un error), el visitante se quedaba
   mirando una pantalla verde con el sitio detras, invisible.
   Con esta animacion el velo se va solo, cargue o no el JavaScript. Cuando el
   JS si carga, lo quita antes: manda el que termine primero.
   -------------------------------------------------------------------------- */

#preloader {
  animation: simac-quitar-velo 0.5s ease 2.2s forwards;
}

@keyframes simac-quitar-velo {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* --------------------------------------------------------------------------
   20. Visor de fotografias (lightbox)
   --------------------------------------------------------------------------
   Dos problemas reales: el visor se abria por DEBAJO de la cabecera (z-index
   99999 de header contra 1042 del visor) y el boton de cierre de Magnific es
   una barra transparente de ancho completo, practicamente invisible sobre la
   fotografia. Se corrigen ambos. Cerrar con ESC y pulsando fuera ya funciona.
   -------------------------------------------------------------------------- */

.mfp-bg,
.mfp-wrap {
  z-index: 100200;
}

.mfp-container {
  padding: 0 8px;
}

/* Magnific declara `.mfp-image-holder .mfp-close { width: 100% }`, que gana
   por especificidad: por eso el boton seguia siendo una barra invisible de
   ancho completo. Se replican esos selectores para poder anularlo. */
.mfp-close,
.mfp-close:active,
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  position: fixed;
  top: 18px;
  right: 20px;
  width: 46px;
  height: 46px;
  padding: 0;
  margin: 0;
  line-height: 44px;
  text-align: center;
  font-size: 0;
  opacity: 1;
  color: transparent;
  background-color: rgba(12, 18, 24, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  transition: background-color 0.25s, border-color 0.25s, transform 0.25s;
}

/* La X se dibuja, no se hereda del glifo del plugin: asi se ve igual en
   cualquier navegador y no depende de ninguna tipografia. */
.mfp-close::before,
.mfp-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background-color: #fff;
  border-radius: 2px;
}

.mfp-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.mfp-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.mfp-close:hover,
.mfp-close:focus-visible {
  background-color: var(--simac-verde-titulo);
  border-color: #fff;
  transform: scale(1.06);
}

.mfp-arrow {
  opacity: 0.8;
}

.mfp-arrow:hover {
  opacity: 1;
}

.mfp-title {
  padding-right: 70px;
}

@media (max-width: 575.98px) {
  .mfp-close,
  .mfp-close:active {
    top: 10px;
    right: 10px;
    width: 42px;
    height: 42px;
  }
}

/* --------------------------------------------------------------------------
   21. Revelado al entrar en pantalla
   --------------------------------------------------------------------------
   Sin la clase `preparada` —que pone el JavaScript— todo queda visible: la
   animacion nunca puede impedir la lectura. Se repite cada vez que el bloque
   vuelve a entrar en pantalla, no solo en la primera carga.
   -------------------------------------------------------------------------- */

[data-revelar].preparada > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.8, 0.3, 1);
}

[data-revelar].preparada.visible > * {
  opacity: 1;
  transform: none;
}

[data-revelar].preparada.visible > *:nth-child(1) { transition-delay: 0.04s; }
[data-revelar].preparada.visible > *:nth-child(2) { transition-delay: 0.14s; }
[data-revelar].preparada.visible > *:nth-child(3) { transition-delay: 0.24s; }
[data-revelar].preparada.visible > *:nth-child(4) { transition-delay: 0.34s; }

@media (prefers-reduced-motion: reduce) {
  [data-revelar].preparada > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   22. Indice de servicios y paneles
   --------------------------------------------------------------------------
   La seccion Servicios tiene una sola navegacion: la columna de la izquierda.
   Antes habia ademas tres tarjetas encima que presentaban las mismas tres
   areas con las mismas capacidades; se retiraron del HTML.

   La columna no es una lista de botones sueltos sino una pieza institucional:
   fondo gris muy claro que acompana toda la altura del contenido, rotulo
   arriba, indice numerado en medio y, pegada al fondo, la firma de la
   empresa. Sin librerias: el intercambio de panel lo hace
   assets/js/custom.js y, si no hay JavaScript, los tres paneles quedan
   visibles uno tras otro.
   -------------------------------------------------------------------------- */

.capacidades-indice {
  margin-top: var(--simac-ritmo);
}

.capacidades-indice .container {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 56px;
  /* stretch y no start: es lo que hace que el gris de la columna llegue
     hasta el final del contenido en lugar de cortarse bajo el indice. */
  align-items: stretch;
}

/* --- columna institucional --- */
.indice-columna {
  display: flex;
  flex-direction: column;
  background-color: #f1f2ee;
  padding: 34px 0 40px;
}

.indice-columna__rotulo {
  font-family: 'Manrope', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--simac-texto);
  margin: 0 0 22px;
  padding: 0 22px;
}

/* La firma se queda pegada al fondo de la columna, no colgando del indice. */
.indice-columna__firma {
  margin-top: auto;
  padding: 54px 22px 0;
}

.indice-columna__firma::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background-color: var(--simac-verde);
  margin-bottom: 24px;
}

.indice-columna__lema {
  font-family: 'Manrope', sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  /* Texto grande: le basta 3:1 y este tono da 3.9:1 sobre el gris de la
     columna. Mas claro —como pide la referencia— ya no se leeria. */
  color: #79828a;
  margin: 0 0 18px;
}

.indice-columna__texto {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--simac-texto);
  margin: 0;
}

/* --- indice --- */
.indice-cap { position: relative; }

.indice-cap__item {
  position: relative;
  display: block;
  width: 100%;
  padding: 18px 22px;
  background: none;
  border: 0;
  border-top: 1px solid #e3e5df;
  color: var(--simac-tinta);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.35s ease, padding-left 0.4s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.indice-cap__item:last-child { border-bottom: 1px solid #e3e5df; }

.indice-cap__item:hover { background-color: #e8eae4; }

/* Filete vertical verde del area activa. */
.indice-cap__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background-color: var(--simac-verde);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.indice-cap__num {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  /* Verde en las tres areas, no solo en la activa: es lo que mantiene el
     acento presente en toda la navegacion. Paso de texto fino, que da 4.6:1
     sobre el gris de la columna. */
  color: var(--simac-verde-texto);
  margin-bottom: 9px;
  transition: color 0.3s;
}

.indice-cap__linea {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 13px;
}

.indice-cap__icono {
  width: 24px;
  height: 24px;
  color: #6f777e;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color 0.3s;
}

.indice-cap__rot {
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1px;
  line-height: 1.35;
  color: var(--simac-tinta);
  transition: color 0.3s;
}

.indice-cap__flecha {
  justify-self: end;
  color: #b7bfc4;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.35s, transform 0.35s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.indice-cap__item:hover .indice-cap__rot,
.indice-cap__item:hover .indice-cap__icono { color: var(--simac-verde-texto); }
.indice-cap__item:hover .indice-cap__flecha { opacity: 1; transform: none; }
/* El filete tambien asoma al pasar el cursor: el area a la que se apunta se
   marca con el mismo lenguaje que la que esta abierta. */
.indice-cap__item:hover::before { transform: scaleY(1); }

.indice-cap__item.is-activa {
  background-color: var(--simac-verde-accion);
  padding-left: 30px;
}

.indice-cap__item.is-activa::before { transform: scaleY(1); }
.indice-cap__item.is-activa .indice-cap__num { color: var(--simac-verde); }
.indice-cap__item.is-activa .indice-cap__rot { color: #fff; }
.indice-cap__item.is-activa .indice-cap__icono { color: #fff; }
.indice-cap__item.is-activa .indice-cap__flecha { opacity: 1; transform: none; color: #fff; }

.indice-cap__item:focus-visible {
  outline: 3px solid var(--simac-verde);
  outline-offset: -3px;
}
/* --- panel --- */
.panel-cap[hidden] { display: none; }

.panel-cap__foto {
  overflow: hidden;
  background-color: #eef0e9;
  border-radius: 3px;
  margin-bottom: 26px;
}

.panel-cap__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* El titulo del area y su bajada se definen en la seccion 25, junto a las
   capacidades: asi toda la jerarquia del panel se lee de una vez y en un
   solo sitio. Aqui queda solo el armazon.
   La regla generica `.panel-cap__texto p { margin-bottom: 16px }` se retiro:
   por especificidad ganaba a los margenes propios de cada parrafo, de modo
   que la bajada nunca respetaba su separacion con el bloque siguiente. */
.panel-cap__subt {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--simac-texto);
  margin: 0 0 22px;
}

/* Entrada del panel al cambiar de area: fade + desplazamiento minimo. */
.panel-cap.entrando .panel-cap__foto,
.panel-cap.entrando .panel-cap__texto {
  animation: panel-entrar 0.5s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.panel-cap.entrando .panel-cap__texto { animation-delay: 0.08s; }

@keyframes panel-entrar {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .panel-cap.entrando .panel-cap__foto,
  .panel-cap.entrando .panel-cap__texto { animation: none; }
}

@media (max-width: 991.98px) {
  .capacidades-indice .container {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  /* En una sola columna la pieza institucional deja de ser una columna: sus
     tres partes pasan a ser hermanas del panel para poder reordenarlas, y la
     firma baja al final. Si se quedara donde esta, se interpondria entre el
     menu y el contenido, que es justo a lo que se ha venido.
     `display: contents` no deja rastro en el arbol de accesibilidad. */
  .indice-columna { display: contents; }
  .indice-columna__rotulo { order: 1; padding: 0; }
  .indice-cap { order: 2; }
  .paneles-cap { order: 3; }
  .indice-columna__firma { order: 4; margin-top: 6px; padding: 0; }

  /* Sin la columna gris detras, el fondo lo lleva cada elemento del indice. */
  .indice-cap__item { background-color: #f5f6f2; padding-left: 18px; padding-right: 18px; }
  .indice-cap__item.is-activa { padding-left: 26px; }
}

/* --------------------------------------------------------------------------
   23. Seccion "Nuestro equipo"
   --------------------------------------------------------------------------
   Bloque corporativo en grafito: las fichas dejan de ser cajas oscuras
   sueltas sobre blanco y pasan a formar parte de una seccion con identidad.
   El unico logotipo presente es el monograma de cada ficha, en su version de
   color correcta —ni invertida ni deformada—; no se anade ningun otro.
   -------------------------------------------------------------------------- */

/* Fondo grafito con una retícula vertical muy tenue: textura de lámina
   técnica, no un motivo decorativo. Se percibe al mirarla y desaparece a
   distancia normal de lectura. */
.seccion-equipo {
  position: relative;
  background-color: #292c2d;
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, 0.018) 0 1px,
    transparent 1px 96px);
  padding: 8px 0 14px;
  margin-top: var(--simac-ritmo);
  margin-bottom: var(--simac-ritmo);
  overflow: hidden;
}

.seccion-equipo .encabezado-equipo h2 { color: #fff; }
.seccion-equipo .encabezado-equipo h2 em { color: var(--simac-verde-texto); }

/* Dentro de la seccion la ficha se aclara un paso para separarse del fondo. */

@media (max-width: 767.98px) {
  .seccion-equipo { padding: 44px 0 38px; }
}

/* --------------------------------------------------------------------------
   24. Nuestros lideres
   --------------------------------------------------------------------------
   Una sola composicion editorial con los dos perfiles y la posicion del
   elemento institucional alternada:
     Javier  ->  logo | perfil
     Victor  ->  perfil | logo
   No hay tarjetas: el perfil no lleva caja, solo un filete vertical que lo
   separa del logotipo y un hairline horizontal entre los dos bloques.
   El logotipo es el asset real de SIMAC (marca-lideres.png, recorte del
   logo-simac01.png original) pintado en marfil mineral con un degradado
   muy corto: la luz varia SOBRE la superficie de la marca, no a su
   alrededor. Sin halo, sin glow, sin sombra exterior, sin 3D.
   -------------------------------------------------------------------------- */

.perfiles {
  display: flex;
  flex-direction: column;
}

.perfil {
  position: relative;
  display: grid;
  grid-template-columns: 27% minmax(0, 1fr);
  align-items: center;
  gap: 0;
  padding: 7px 0;
}

/* Hairline entre los dos perfiles: editorial, no un borde de caja. */
.perfil + .perfil {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* El primer bloque respira mas por arriba porque lo que tiene encima es
   el titulo, no el filete divisorio. Los 6 px salen del borde superior
   de la banda, asi que la seccion no crece ni un pixel y la ultima linea
   de Victor no se mueve. */
.perfil:first-child {
  padding-top: 13px;
}

/* ---- Alternancia ------------------------------------------------------- */

/* Al invertir las columnas hay que invertir tambien las medidas: si no, el
   logotipo se queda con el ancho reservado al texto. */
.perfil:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) 27%;
}



/* ---- Elemento institucional -------------------------------------------- */

.perfil__marca {
  position: relative;
  align-self: stretch;
  min-height: 178px;
  padding: 8px 34px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.perfil:nth-child(even) .perfil__marca {
  grid-column: 2;
  grid-row: 1;
  border-right: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* El logotipo, en marfil satinado. El degradado es corto y neutro: da
   materialidad sin virar a arena, champagne ni dorado. */
.perfil__marca::after {
  content: "";
  position: absolute;
  left: 34px;
  right: auto;
  width: 242px;
  max-width: calc(100% - 68px);
  top: 50%;
  height: 182px;
  transform: translateY(-50%);
  background-image: linear-gradient(152deg,
    #f6f5f1 0%,
    #eceae4 34%,
    #dedbd3 62%,
    #c9c6be 100%);
  /* Marfil casi blanco sobre el grafito: compuesto da ~220 en la zona alta y
     ~180 en la baja, es decir la variacion satinada ocurre SOBRE la marca. */
  opacity: 0.88;
  /* marca-lideres.png es logo-simac01.png recortado a su caja util: el
     mismo archivo original de la marca, sin reescalar ni redibujar. El
     anterior (marca-cifras.png) venia extraido de un JPEG y traia los
     contornos dentados. A 1831x1315 pintados sobre 242 px, el
     remuestreo del navegador da un borde perfectamente limpio. */
  -webkit-mask-image: url(../images/marca-lideres.png);
  mask-image: url(../images/marca-lideres.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Acento verde: un trazo corto sobre el filete divisorio. */
.perfil__marca::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -1px;
  width: 2px;
  height: 34px;
  transform: translateY(-50%);
  background-color: var(--simac-verde-texto);
  z-index: 2;
}

.perfil:nth-child(even) .perfil__marca::after {
  left: auto;
  right: 34px;
}

.perfil:nth-child(even) .perfil__marca::before {
  right: auto;
  left: -1px;
}

/* ---- Perfil ------------------------------------------------------------ */

.perfil__info {
  position: relative;
  padding: 0 0 0 40px;
}

.perfil:nth-child(even) .perfil__info {
  grid-column: 1;
  grid-row: 1;
  padding: 0 40px 0 0;
}

.perfil__nombre {
  font-family: 'Manrope', sans-serif;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 1.14;
  text-transform: uppercase;
  margin: 0 0 2px;
}

.perfil__cargo {
  font-family: 'Manrope', sans-serif;
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  line-height: 1.35;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.perfil__correo {
  display: inline-block;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12.5px;
  line-height: 1.35;
  letter-spacing: 0.2px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  padding-bottom: 2px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.perfil__correo:hover,
.perfil__correo:focus-visible {
  color: var(--simac-verde-accion-claro);
  border-bottom-color: var(--simac-verde-accion-claro);
}

.perfil__cuerpo {
  position: relative;
  margin-top: 6px;
  padding-top: 6px;
}

.perfil__cuerpo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 2px;
  background-color: var(--simac-verde-texto);
}

/* Los cuatro parrafos, exactamente el mismo tratamiento. */
.perfil__cuerpo p,
.perfil__lead {
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.42;
  margin: 0 0 10px;
}

.perfil__cuerpo p:last-child { margin-bottom: 0; }

/* A partir de 1340 px hay sitio para sacar la composicion del contenedor:
   80 px por lado. El logotipo se desplaza hacia el borde exterior y todo
   ese ancho se lo queda la columna de texto, que asi parte menos lineas.
   Por debajo de ese ancho el bloque vuelve al contenedor y no desborda. */
@media (min-width: 1340px) {
  .perfiles {
    margin-left: -80px;
    margin-right: -80px;
  }

  /* Dentro de la celda del logotipo sobraban 67 px muertos entre la
     marca y el filete divisorio. La celda baja del 27 % al 23 % y ese
     ancho se lo queda el texto. El logotipo NO cambia: sigue midiendo
     242 px y conserva 28 px hasta el filete y 62 px hasta el texto.
     Solo aqui, donde el bloque se sale del contenedor y hay sitio:
     por debajo de 1340 px manda el 27 % de siempre. */
  .perfil { grid-template-columns: 23% minmax(0, 1fr); }
  .perfil:nth-child(even) { grid-template-columns: minmax(0, 1fr) 23%; }
  .perfil__marca { padding-left: 22px; padding-right: 22px; }
  .perfil__marca::after { left: 22px; max-width: calc(100% - 44px); }
  .perfil:nth-child(even) .perfil__marca::after { left: auto; right: 22px; }
  .perfil__info { padding-left: 34px; }
  .perfil:nth-child(even) .perfil__info { padding-right: 34px; padding-left: 0; }
}

@media (max-width: 991.98px) {
  .perfil { grid-template-columns: 27% minmax(0, 1fr); padding: 12px 0; }
  .perfil:nth-child(even) { grid-template-columns: minmax(0, 1fr) 27%; }
  .perfil__marca { min-height: 156px; padding: 8px 26px; }
  .perfil__marca::after,
  .perfil:nth-child(even) .perfil__marca::after {
    left: 26px; right: 26px; width: auto; max-width: none; height: 148px;
  }
  .perfil__info { padding-left: 30px; }
  .perfil:nth-child(even) .perfil__info { padding: 0 30px 0 0; }
  .perfil__nombre { font-size: 21px; }
  .perfil__cuerpo p,
  .perfil__lead { font-size: 12.2px; }
}

/* En una columna desaparece la alternancia: el logotipo abre cada perfil. */
@media (max-width: 767.98px) {
  .perfil,
  .perfil:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding: 30px 0;
  }
  .perfil:nth-child(even) .perfil__marca,
  .perfil:nth-child(even) .perfil__info { grid-column: 1; grid-row: auto; }
  .perfil__marca,
  .perfil:nth-child(even) .perfil__marca {
    min-height: 0;
    height: 104px;
    margin-bottom: 18px;
    padding: 0;
    border: 0;
  }
  .perfil__marca::after,
  .perfil:nth-child(even) .perfil__marca::after {
    left: 0;
    right: auto;
    width: 150px;
    height: 100px;
    top: 0;
    transform: none;
  }
  .perfil__marca::before,
  .perfil:nth-child(even) .perfil__marca::before {
    top: 0;
    left: 0;
    right: auto;
    height: 34px;
    transform: none;
  }
  .perfil__info,
  .perfil:nth-child(even) .perfil__info { padding: 0; }
  .perfil__nombre { font-size: 20px; }
  .perfil__cuerpo { margin-top: 14px; padding-top: 12px; }
  .perfil__cuerpo p,
  .perfil__lead { font-size: 13px; line-height: 1.52; margin-bottom: 12px; }
}

/* --------------------------------------------------------------------------
   25. Capacidades de cada servicio
   --------------------------------------------------------------------------
   El panel de la derecha se lee de arriba abajo en cuatro pasos:

     foto -> nombre del area -> bajada -> capacidades

   La bajada dice QUE es el area; las capacidades dicen COMO se materializa.
   Nunca repiten la misma idea: si algo esta en la bajada no vuelve a
   aparecer en una capacidad, y al reves.

   Las capacidades ya no son un acordeon apilado sino una fila de iconos.
   Cada uno enciende, en la zona inferior, su propia definicion. No hay
   tarjetas, sombras ni fondos: el ritmo lo dan los filetes verticales entre
   iconos y una linea horizontal antes del texto. El verde entra solo en el
   filete inferior del icono activo y en el disco palido que lo acompana:
   es un acento, no el color del bloque.
   -------------------------------------------------------------------------- */

.panel-cap__titulo {
  font-size: clamp(30px, 3.3vw, 42px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.6px;
  color: var(--simac-tinta);
  margin: 0 0 18px;
}

.panel-cap__breve {
  font-size: 17px;
  line-height: 1.75;
  color: var(--simac-texto);
  max-width: 62ch;
  margin: 0 0 40px;
}

/* El juego de iconos vive en el HTML, fuera de la vista pero no en
   display:none: hay navegadores que entonces no resuelven el <use>. */
.sprite-cap {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --- fila de capacidades --- */
.capacidades__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.capacidades__lista > li { display: flex; }

/* Filete separador entre iconos. Se pone en todos y se retira en el primero
   de cada fila; como el numero de columnas cambia con el ancho, cada media
   query redefine cual es "el primero". */
.capacidades__lista > li { border-left: 1px solid #e6e8e0; }
.capacidades__lista > li:nth-child(6n + 1) { border-left: 0; }

.cap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 4px 6px 16px;
  background: none;
  border: 0;
  text-align: center;
  cursor: pointer;
  color: #7f888e;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.35s ease;
}

/* El icono hereda el color del boton (currentColor), asi que basta con
   cambiar `color` para que trazo y rotulo reaccionen a la vez. El disco de
   fondo se dibuja sobre el propio <svg>: no hace falta envolverlo. */
.cap__icono {
  box-sizing: border-box;
  width: 52px;
  height: 52px;
  padding: 12px;
  border-radius: 50%;
  background-color: transparent;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: background-color 0.4s ease, transform 0.4s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.cap__rot {
  font-family: 'Manrope', sans-serif;
  font-size: 13.5px;
  /* El peso no cambia al activarse: hacerlo re-parte las lineas del rotulo
     y la fila entera da un salto. El protagonismo lo dan el color, el disco
     y el filete verde. */
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.1px;
  color: var(--simac-texto);
  transition: color 0.3s ease;
}

/* Filete de la capacidad activa. */
.cap::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 26px;
  height: 2px;
  background-color: var(--simac-verde);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.cap:hover .cap__icono { transform: translateY(-2px); }
.cap:hover { color: #5f686e; }
.cap:hover .cap__rot { color: var(--simac-tinta); }

.cap.is-activa { color: var(--simac-tinta); }
/* El trazo del icono activo toma el mismo verde oscuro que el area abierta
   del indice, sobre el disco palido de siempre. Se pone en el icono y no en
   el boton para no arrastrar el color del rotulo. */
.cap.is-activa .cap__icono {
  background-color: rgba(164, 198, 57, 0.16);
  color: var(--simac-verde-accion);
}
.cap.is-activa .cap__rot { color: var(--simac-tinta); }
.cap.is-activa::after { transform: translateX(-50%) scaleX(1); }

.cap:focus-visible {
  outline: 2px solid var(--simac-verde-texto);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- definicion de la capacidad activa --- */
.cap-detalle {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid #e6e8e0;
  /* Altura minima para que cambiar de capacidad no mueva lo que hay debajo. */
  min-height: 112px;
}

.panel-cap__texto .enlace-serv { margin-top: 30px; }

.cap-detalle__ficha[hidden] { display: none; }

.cap-detalle__ficha {
  animation: cap-detalle-entrar 0.38s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.cap-detalle__nombre {
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.1px;
  color: var(--simac-tinta);
  margin: 0 0 8px;
}

.cap-detalle__texto {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--simac-texto);
  max-width: 66ch;
  margin: 0;
}

@keyframes cap-detalle-entrar {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* --- adaptacion --- */

/* Entre 992 y 1199 el indice sigue ocupando 330 px y al panel le quedan
   unos 576: seis columnas dejarian el rotulo en tres lineas. */
@media (max-width: 1199.98px) {
  .capacidades__lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 30px;
  }
  .capacidades__lista > li:nth-child(6n + 1) { border-left: 1px solid #e6e8e0; }
  .capacidades__lista > li:nth-child(3n + 1) { border-left: 0; }
}

@media (max-width: 767.98px) {
  .panel-cap__breve { font-size: 16px; margin-bottom: 32px; }
  .cap-detalle { min-height: 140px; }
}

@media (max-width: 575.98px) {
  .capacidades__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .capacidades__lista > li:nth-child(3n + 1) { border-left: 1px solid #e6e8e0; }
  .capacidades__lista > li:nth-child(2n + 1) { border-left: 0; }

  /* En una pantalla estrecha el area de toque manda: el icono baja de tamano
     pero el boton conserva alto suficiente para el dedo. */
  .cap { padding: 4px 4px 14px; gap: 8px; }
  .cap__icono { width: 48px; height: 48px; padding: 11px; }
  .cap__rot { font-size: 13px; }
  .cap-detalle__texto { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .cap__icono,
  .cap::after { transition: none; }
  .cap:hover .cap__icono { transform: none; }
  .cap.is-activa::after { transform: translateX(-50%); }
  .cap-detalle__ficha { animation: none; }
}

/* --------------------------------------------------------------------------
   26. Portada de Contacto

   Se construye por capas, no como una fotografia con el texto encima:

     fondo       grafito en degradado, dibujado en CSS
     trazado     reticula, arco y cotas en SVG, entre el texto y la obra
     fotografia  hormigon monumental entrando por la derecha, fundido sobre el
                 grafito con una mascara horizontal
     velo        franja superior que sostiene la cabecera transparente
     contenido   HTML real: titular, bajada, datos y linea de servicios

   Todo acento verde de esta portada -rotulo, "tu proyecto", los tres iconos,
   filetes, puntos y la diagonal incrustada en la fotografia- usa un unico
   color: #687A22. Por indicacion expresa del cliente, aqui
   no se admite ningun segundo tono verde.
   -------------------------------------------------------------------------- */

.portada-contacto {
  --portada-linea: rgba(255, 255, 255, 0.14);
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  min-height: 660px;
  padding: 138px 0 92px;
  overflow: hidden;
  background:
    radial-gradient(126% 104% at 16% 8%, #2c343b 0%, rgba(44, 52, 59, 0) 58%),
    linear-gradient(180deg, #272f35 0%, #232b31 44%, #1b2227 100%);
}

/* Trazado tecnico. Va DEBAJO de la fotografia a proposito: asi el hormigon lo
   tapa, igual que en la referencia, y las lineas solo asoman en la franja de
   transicion. La propia mascara del SVG lo apaga antes de llegar al titular,
   que es donde el lado izquierdo tiene que quedar limpio. */
.portada-contacto__trazado {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* La fotografia ocupa la mitad derecha y se funde hacia el grafito. No lleva
   texto incrustado: los rotulos del margen son HTML. */
.portada-contacto__arquitectura {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 64%;
  background-image: url(../images/contacto-portada-arquitectura.jpg);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.26) 14%,
    rgba(0, 0, 0, 0.76) 36%,
    rgba(0, 0, 0, 1) 56%);
  mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.26) 14%,
    rgba(0, 0, 0, 0.76) 36%,
    rgba(0, 0, 0, 1) 56%);
}

/* Solo la franja superior: la cabecera va transparente sobre la portada y
   arriba a la derecha la fotografia tiene hormigon claro. El costado
   izquierdo NO se oscurece, porque en la referencia el grafito de la
   izquierda es mas claro que el que rodea a la construccion. */
.portada-contacto__velo {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(14, 17, 20, 0.52) 0,
    rgba(14, 17, 20, 0.24) 92px,
    rgba(14, 17, 20, 0) 178px);
}

/* El contenido se alinea con el logotipo: mismo ancho y mismo margen que la
   cabecera (1600 / 40 px), no el .container de 1140 del resto de la pagina.
   Es lo que le da el aire editorial de la referencia. */
.portada-contacto__caja {
  position: relative;
  z-index: 3;
  width: 100%;
  min-width: 0;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 40px;
}

.portada-contacto__texto {
  max-width: 780px;
}

/* --- titular --- */

.portada-contacto__titulo {
  margin: 0 0 26px;
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.6px;
}

.portada-contacto__rotulo {
  display: block;
  margin-bottom: 24px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 3.6px;
  text-transform: uppercase;
  color: #687A22;
}

.portada-contacto__frase,
.portada-contacto__acento {
  display: block;
  font-size: clamp(38px, 4.3vw, 66px);
}

.portada-contacto__frase {
  color: #fff;
}

.portada-contacto__acento {
  color: #687A22;
}

.portada-contacto__bajada {
  max-width: 430px;
  margin: 0 0 40px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
}

/* --- los tres datos, en linea y separados por un filete vertical --- */

.portada-contacto__datos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 0 0 38px;
  padding: 0;
  list-style: none;
}

.dato-portada {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 2px 26px;
  border-left: 1px solid var(--portada-linea);
}

.dato-portada:first-child {
  padding-left: 0;
  border-left: 0;
}

.dato-portada__icono {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  color: #687A22;
}

.dato-portada__texto {
  font-size: 14px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.78);
}

.dato-portada__texto a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.25s;
}

.dato-portada__texto a:hover,
.dato-portada__texto a:focus-visible {
  color: #687A22;
}

/* --- linea editorial de servicios --- */

.portada-contacto__servicios {
  margin: 0;
  overflow-wrap: break-word;
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}

.portada-contacto__filete {
  display: inline-block;
  width: 30px;
  height: 2px;
  margin-right: 18px;
  vertical-align: middle;
  background-color: #687A22;
}

.portada-contacto__punto {
  padding: 0 10px;
  color: #687A22;
}

/* --- columna editorial del margen derecho --- */

.portada-contacto__margen {
  position: absolute;
  right: clamp(24px, 3.2vw, 60px);
  bottom: 84px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 40px;
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 2.6px;
  text-transform: uppercase;
}

.portada-contacto__lema,
.portada-contacto__metodo {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: rgba(255, 255, 255, 0.55);
}

.portada-contacto__lema {
  color: rgba(255, 255, 255, 0.44);
}

/* El filete verde sobre el bloque, como en la referencia. */
.portada-contacto__metodo::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-bottom: 20px;
  background-color: #687A22;
}

/* --- adaptacion --- */

@media (max-width: 1399.98px) {
  .portada-contacto__caja {
    padding: 0 32px;
  }
  .portada-contacto__margen {
    bottom: 72px;
  }
}

/* Con menos de 1200 el margen derecho solo conserva el bloque de metodo: el
   lema se retira antes de empezar a estorbar al titular. */
@media (max-width: 1199.98px) {
  .portada-contacto {
    min-height: 620px;
  }
  .portada-contacto__arquitectura {
    width: 58%;
  }
  .portada-contacto__lema {
    display: none;
  }
}

/* Tablet y movil: la construccion pasa a ser atmosfera de fondo a todo lo
   ancho -conserva la profundidad y el hormigon, pero deja de disputarle el
   sitio al texto- y los datos se apilan. */
@media (max-width: 991.98px) {
  .portada-contacto {
    min-height: 0;
    padding: 128px 0 76px;
  }
  .portada-contacto__arquitectura {
    width: 100%;
    /* 90 %, no 82 %: es lo que mete en cuadro la viga de hormigon completa y
       los dos triangulos de cielo, que son la composicion de la fotografia. */
    background-position: 90% center;
    /* La fotografia llevaba 0.62 de opacidad Y ADEMAS el velo lateral de abajo
       encima: las dos capas se multiplicaban y solo dejaban pasar entre el 6 %
       y el 35 % de la imagen. La atenuacion se reparte entre las dos capas en
       vez de acumularse. No se aclara la portada: se deja de tapar la foto. */
    opacity: 0.82;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .portada-contacto__velo {
    background:
      linear-gradient(180deg,
        rgba(14, 17, 20, 0.6) 0,
        rgba(14, 17, 20, 0.3) 92px,
        rgba(14, 17, 20, 0) 178px),
      linear-gradient(90deg,
        rgba(25, 31, 36, 0.8) 0%,
        rgba(25, 31, 36, 0.6) 46%,
        rgba(25, 31, 36, 0.26) 100%);
  }
  .portada-contacto__trazado,
  .portada-contacto__margen {
    display: none;
  }
  .portada-contacto__texto {
    max-width: 620px;
  }
  .portada-contacto__datos {
    display: block;
    margin-bottom: 34px;
  }
  .dato-portada {
    padding: 16px 0;
    border-left: 0;
    border-top: 1px solid var(--portada-linea);
  }
  .dato-portada:first-child {
    padding-top: 0;
    border-top: 0;
  }
}

@media (max-width: 767.98px) {
  .portada-contacto__caja {
    padding: 0 24px;
  }
  .portada-contacto__titulo {
    margin-bottom: 22px;
  }
  .portada-contacto__rotulo {
    margin-bottom: 18px;
    letter-spacing: 3px;
  }
  .portada-contacto__bajada {
    margin-bottom: 32px;
    font-size: 15px;
  }
}

@media (max-width: 575.98px) {
  .portada-contacto {
    padding: 116px 0 64px;
  }
  .portada-contacto__arquitectura {
    /* A 390 px solo entra el 21 % del ancho de una fotografia de 2,81:1. Al
       74 % esa ventana caia sobre el trazado tecnico y una viga en sombra: la
       portada quedaba practicamente en grafito plano. Al 96 % la ventana
       recoge la viga en diagonal y los dos triangulos de cielo, y el nodo verde
       del trazado sigue asomando por la izquierda. */
    background-position: 96% center;
    opacity: 0.74;
  }
  .portada-contacto__frase,
  .portada-contacto__acento {
    font-size: clamp(32px, 9.4vw, 42px);
  }
  .portada-contacto__servicios {
    font-size: 10px;
    letter-spacing: 1.8px;
  }
  .portada-contacto__filete {
    width: 22px;
    margin-right: 12px;
  }
  .portada-contacto__punto {
    padding: 0 7px;
  }
}