/* ==========================================================================
   Construmaster - hoja de estilos del sitio
   Paleta y medidas tomadas directamente de las capturas del sitio original.
   ========================================================================== */

:root {
  --azul: #017bfe;          /* botones, enlaces y elemento activo del menu */
  --azul-hover: #0163cc;
  --azul-banda: #014aa9;    /* banda ancha de cobertura */
  --negro: #0b0e13;         /* banner de pagina y pie */
  --negro-2: #1a1d22;       /* triangulos del banner */
  --gris-seccion: #f2f2f2;  /* mitad de texto en paginas interiores */
  --titulo: #2b2b2b;
  --texto: #6f6f6f;
  --texto-claro: #9aa0a6;
  --linea: #e2e2e2;

  --fuente: 'Roboto', 'Segoe UI', Arial, sans-serif;
  --ancho: 1240px;
  --alto-cabecera: 96px;

  --suave: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: hidden; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.85;
  color: var(--texto);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--fuente); color: var(--titulo); margin: 0; font-weight: 400; }
p { margin: 0 0 1.1em; }
a { color: var(--azul); text-decoration: none; transition: color .25s var(--suave); }
a:hover { color: var(--azul-hover); }
img { max-width: 100%; height: auto; display: block; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }

/* Enlace para saltar al contenido, visible solo al tabular */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--azul); color: #fff; padding: 12px 20px;
}
.saltar:focus { left: 0; color: #fff; }

:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* Solo para lectores de pantalla */
.oculto-visual {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Boton ---------- */
.boton {
  display: inline-block;
  background: var(--azul);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 12px 26px;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .25s var(--suave), transform .25s var(--suave);
}
.boton:hover { background: var(--azul-hover); color: #fff; transform: translateY(-2px); }

/* ==========================================================================
   Cabecera
   ========================================================================== */
.cabecera {
  background: #fff;
  border-bottom: 1px solid var(--linea);
  position: sticky;
  top: 0;
  z-index: 100;
}
.cabecera .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--alto-cabecera);
}
.logo { flex: none; }        /* el logotipo nunca se comprime */
.logo img { height: 62px; width: auto; }

.menu-boton {
  display: none;
  background: none; border: 1px solid var(--linea);
  border-radius: 3px; padding: 9px 11px; cursor: pointer;
}
.menu-boton span { display: block; width: 22px; height: 2px; background: var(--titulo); margin: 4px 0; transition: transform .3s var(--suave), opacity .2s; }
.menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav ul { list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block;
  padding: 6px 18px;
  font-size: 14px;
  color: #4a4a4a;
  white-space: nowrap;
}
.nav a:hover { color: var(--azul); }
.nav a[aria-current="page"] { color: var(--azul); }

/* ---------- Menú de tres niveles, se abre al pulsar ---------- */
.menu-nivel-1 { display: flex; align-items: center; }
.menu-nivel-1 > li { position: relative; }
.menu-nivel-1 > li + li { border-left: 1px solid var(--linea); }

/* Los apartados con submenú son botones, no enlaces */
.menu-padre {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 18px;
  font: inherit;
  font-size: 14px;
  color: #4a4a4a;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: color .25s var(--suave);
}
.menu-padre:hover, .menu-padre[aria-expanded="true"] { color: var(--azul); }
.menu-padre[aria-current="page"] { color: var(--azul); }

.menu-padre .flecha {
  flex: none;
  width: 7px; height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .6;
  transition: transform .25s var(--suave);
}
.menu-padre[aria-expanded="true"] .flecha { transform: translateY(1px) rotate(-135deg); }

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 120;
  min-width: 264px;
  padding: 8px 0;
  background: #fff;
  border-top: 3px solid var(--azul);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .16);
  display: none;
}

/* Segundo nivel: se despliega hacia el lado */
.submenu .submenu { top: -8px; left: 100%; border-top: 0; border-left: 3px solid var(--azul); }

/* Solo se ve el submenú que se ha abierto con un clic */
.submenu.desplegado { display: block; }

/* Enlace a la propia página del apartado, arriba del todo */
.submenu-todo { border-bottom: 1px solid var(--linea); margin-bottom: 6px; padding-bottom: 4px; }
.submenu-todo a { font-weight: 700; color: var(--azul); }

.submenu li { position: relative; }
.submenu .menu-padre { padding: 9px 34px 9px 20px; font-size: 13.5px; white-space: normal; }
.submenu .menu-padre .flecha { position: absolute; right: 16px; transform: rotate(-45deg); }
.submenu .menu-padre[aria-expanded="true"] .flecha { transform: rotate(45deg); }
.submenu .menu-padre:hover { background: var(--gris-seccion); }
.submenu a {
  white-space: normal;
  padding: 9px 34px 9px 20px;
  font-size: 13.5px;
  line-height: 1.45;
}
.submenu a:hover, .submenu a:focus-visible { background: var(--gris-seccion); color: var(--azul); }

/* Los apartados largos se reparten en dos columnas para que quepan en pantalla */
.submenu .submenu.ancho-2 { column-count: 2; column-gap: 0; min-width: 442px; }
.submenu .submenu.ancho-2 > li { break-inside: avoid; }

/* Si al submenú no le cabe a la derecha, se abre hacia la izquierda */
.submenu .submenu.hacia-izquierda { left: auto; right: 100%; border-left: 0; border-right: 3px solid var(--azul); }
.menu-nivel-1 > li:last-child > .submenu { left: auto; right: 0; }

/* ==========================================================================
   Banner de pagina interior
   ========================================================================== */
.banner {
  position: relative;
  background: var(--negro);
  overflow: hidden;
  padding: 62px 0;
}
.banner-triangulos {
  position: absolute;
  inset: 0 0 0 32%;
  opacity: .9;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%);
          mask-image: linear-gradient(90deg, transparent, #000 22%);
}
.banner .contenedor {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 108px;
}
.banner h1 {
  color: #fff;
  font-size: 34px;
  font-weight: 300;
  line-height: 1.25;
  max-width: 15ch;
}
.banner .banner-seccion {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: right;
}

/* ==========================================================================
   Hero de la portada
   ========================================================================== */
.hero { position: relative; background: var(--negro); }
.hero picture, .hero img { width: 100%; }
.hero img { object-fit: cover; }

/* En pantallas anchas se usa la imagen tal cual, que ya trae el rotulo */
.hero-ancho { display: block; }
.hero-estrecho { display: none; }

/* Enlace real, invisible, colocado sobre el boton dibujado en la imagen */
.hero-enlace {
  position: absolute;
  left: 50%;
  top: 71%;
  transform: translate(-50%, -50%);
  width: 132px;
  height: 46px;
  border-radius: 3px;
}
.hero-enlace:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Rotulo en HTML, solo cuando se muestra el recorte sin texto */
.hero-texto { display: none; }

/* ==========================================================================
   Filas alternas de imagen y texto
   ========================================================================== */
.filas { display: block; }

.fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: #fff;
}
.filas--gris .fila { background: var(--gris-seccion); }

.fila-foto { position: relative; overflow: hidden; min-height: 300px; }
.fila-foto img { width: 100%; height: 100%; object-fit: cover; }

/* La fila impar lleva la foto a la izquierda; la par, a la derecha */
.fila--foto-derecha .fila-foto { order: 2; }
.fila--foto-derecha .fila-texto { order: 1; }

.fila-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 72px;
}
.fila-texto h2 {
  font-size: 30px;
  font-weight: 300;
  line-height: 1.25;
  margin-bottom: 22px;
  color: #1f1f1f;
}
.fila-texto p { text-align: justify; font-size: 14px; }
.fila-texto .boton { margin-top: 10px; }

/* El titulo y el boton se arriman siempre al centro de la pagina.
   Los hijos siguen ocupando todo el ancho, asi que solo se mueve el boton. */
.fila--foto-izquierda .fila-texto h2 { text-align: left; }
.fila--foto-izquierda .fila-texto .boton { align-self: flex-start; }

.fila--foto-derecha .fila-texto h2 { text-align: right; }
.fila--foto-derecha .fila-texto .boton { align-self: flex-end; }

/* Entrada suave al aparecer en pantalla */
.aparece { opacity: 0; transform: translateY(26px); }
.aparece.visible { opacity: 1; transform: none; transition: opacity .7s var(--suave), transform .7s var(--suave); }
.fila-foto img { transition: transform 1.1s var(--suave); }
.fila:hover .fila-foto img { transform: scale(1.035); }

/* ==========================================================================
   Bloques de la pagina Empresa
   ========================================================================== */
.bloque { padding: 62px 0; background: #fff; }
.bloque .contenedor { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.bloque--texto-derecha .bloque-foto { order: 1; }
.bloque--texto-derecha .bloque-texto { order: 2; }
.bloque--texto-izquierda .bloque-foto { order: 2; }
.bloque--texto-izquierda .bloque-texto { order: 1; }
.bloque-texto { font-size: 14px; text-align: justify; }
.bloque-texto h2 { font-size: 27px; font-weight: 400; margin-bottom: 20px; text-align: left; }
.bloque-texto h3 { font-size: 16px; font-weight: 700; color: #1f1f1f; margin-bottom: 16px; text-align: left; line-height: 1.5; }
.bloque-texto .destacado { font-weight: 700; color: #3c3c3c; }

.bloque--oscuro { background: var(--negro); }
.bloque--oscuro .bloque-texto { color: #b9bdc4; }
.bloque--oscuro h2, .bloque--oscuro h3 { color: #fff; }

.bloque-titulo-azul { color: var(--azul) !important; }

.lista-servicios { list-style: none; margin: 26px 0 0; padding: 0; }
.lista-servicios > li { position: relative; padding-left: 22px; margin-bottom: 14px; font-size: 13.5px; text-align: left; }
.lista-servicios > li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .6;
}
.encabezado-icono { display: flex; align-items: flex-start; gap: 12px; margin-top: 34px; }
.encabezado-icono svg { flex: none; width: 22px; height: 22px; color: var(--azul); margin-top: 4px; }
.encabezado-icono h3 { margin: 0; }

/* ==========================================================================
   Paginas de detalle: foto + texto justificado
   ========================================================================== */
.detalle { padding: 66px 0 40px; background: #fff; }
.detalle .contenedor { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
.detalle-foto img { width: 100%; }
.detalle-texto { font-size: 14px; text-align: justify; }

/* ==========================================================================
   Galeria de videos
   ========================================================================== */
.videos { padding: 20px 0 70px; background: #fff; }
.video-destacado { max-width: 860px; margin: 0 auto 12px; }
.video-marco {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #14171c;
  border-radius: 3px;
  overflow: hidden;
}
.video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-destacado h2 {
  text-align: center;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.35;
  margin: 22px 0 8px;
}
.video-destacado .video-pie { text-align: center; font-size: 13px; color: var(--texto-claro); }

.video-rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 26px;
  max-width: 860px;
  margin: 44px auto 0;
}
.video-tarjeta { text-align: center; }
.video-tarjeta .video-marco { margin-bottom: 12px; }
.video-tarjeta h3 { font-size: 13px; font-weight: 700; line-height: 1.5; color: #2b2b2b; margin-bottom: 6px; }
.video-tarjeta p { font-size: 12px; color: var(--texto-claro); margin: 0; }

/* Caratula dibujada: se usa mientras no hay una miniatura real */
.video-marco .caratula {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #1d222b 0%, #10131a 60%, #0b0e13 100%);
}
.video-marco .caratula::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(30deg, rgba(255,255,255,.035) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.035) 87.5%),
    linear-gradient(150deg, rgba(255,255,255,.035) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.035) 87.5%);
  background-size: 34px 60px;
}
.video-marco .play {
  position: relative;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s var(--suave), background-color .3s var(--suave);
}
.video-marco .play::after {
  content: ""; margin-left: 4px;
  border-left: 15px solid var(--negro);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
a.video-marco:hover .play { transform: scale(1.12); background: #fff; }

/* ==========================================================================
   Banda azul de cobertura
   ========================================================================== */
.banda {
  position: relative;
  background: var(--azul-banda);
  color: #fff;
  padding: 52px 0;
  overflow: hidden;
}
.banda-triangulos {
  position: absolute; inset: 0 0 0 55%;
  opacity: .5; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%);
          mask-image: linear-gradient(90deg, transparent, #000 35%);
}
.banda .contenedor { position: relative; max-width: 1120px; }
.banda p { text-align: justify; font-size: 13.5px; color: #fff; margin: 0; }

/* ==========================================================================
   Pie
   ========================================================================== */
.pie { background: var(--negro); color: #b9bdc4; padding: 56px 0 0; font-size: 13.5px; }
.pie-rejilla {
  display: grid;
  grid-template-columns: 1.05fr .95fr 1.1fr 1fr 1.15fr;
  gap: 30px;
  align-items: start;
}
.pie h2 { color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 8px; line-height: 1.6; }
.pie a { color: #b9bdc4; }
.pie a:hover { color: var(--azul); }
.pie-cta h2 { line-height: 1.5; margin-bottom: 10px; }
.pie-cta a { color: #2f8fee; font-weight: 700; }
.pie-cta a:hover { color: #6bb2f5; }

.pie-abajo {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 44px;
  padding: 20px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: #7d838c;
}
.pie-redes { display: flex; align-items: center; gap: 14px; }
.pie-redes a { color: #9aa0a6; display: inline-flex; }
.pie-redes a:hover { color: #fff; }
.subir {
  width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.18);
  border-radius: 3px; display: inline-flex; align-items: center; justify-content: center;
  color: #cfd3d8; background: none; cursor: pointer;
  transition: background-color .25s var(--suave), color .25s var(--suave);
}
.subir:hover { background: var(--azul); border-color: var(--azul); color: #fff; }

/* ==========================================================================
   Adaptacion a pantallas menores
   ========================================================================== */
/* El menu horizontal necesita mas sitio que la maquetacion, asi que pasa a
   menu desplegable antes de que las filas se apilen. */
@media (max-width: 1080px) {
  .fila-texto { padding: 44px 40px; }
  .pie-rejilla { grid-template-columns: repeat(3, 1fr); gap: 28px; }

  .menu-boton { display: block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff;
    border-bottom: 1px solid var(--linea);
    box-shadow: 0 18px 30px rgba(0,0,0,.08);
    display: none;
  }
  .nav.abierto { display: block; }
  .nav a { padding: 14px 24px; font-size: 15px; }

  /* El menú pasa a acordeón: cada nivel se abre con su botón */
  .nav { max-height: calc(100vh - var(--alto-cabecera)); overflow-y: auto; }
  .menu-nivel-1 { flex-direction: column; align-items: stretch; }
  .menu-nivel-1 > li { position: static; }
  .menu-nivel-1 > li + li { border-left: 0; border-top: 1px solid var(--linea); }

  /* Mismo mecanismo que en escritorio, pero en bloque: acordeón */
  .menu-padre { padding: 14px 24px; font-size: 15px; justify-content: space-between; }
  .menu-padre .flecha { width: 9px; height: 9px; border-width: 2px; }

  .submenu {
    position: static;
    min-width: 0;
    padding: 0;
    border-top: 0;
    border-left: 0;
    box-shadow: none;
    background: #f7f8fa;
  }
  .submenu .submenu { background: #eef0f4; top: auto; left: auto; }

  .submenu .menu-padre { padding: 13px 24px 13px 38px; font-size: 14px; }
  .submenu .menu-padre .flecha { position: static; transform: rotate(45deg); }
  .submenu .menu-padre[aria-expanded="true"] .flecha { transform: rotate(-135deg); }

  .submenu .submenu.ancho-2 { column-count: 1; min-width: 0; }
  .submenu a { padding-left: 38px; }
  .submenu .submenu a { padding-left: 54px; }
  .submenu .submenu .menu-padre { padding-left: 54px; }
}

@media (max-width: 900px) {
  :root { --alto-cabecera: 78px; }
  .logo img { height: 48px; }

  .banner { padding: 40px 0; }
  .banner .contenedor { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; }
  .banner h1 { font-size: 27px; max-width: none; }
  .banner .banner-seccion { text-align: left; font-size: 13px; color: #c8ccd2; }

  /* El hero pasa al recorte sin rotulo y el texto se escribe en HTML */
  .hero-ancho { display: none; }
  .hero-estrecho { display: block; }
  .hero { min-height: 420px; display: grid; }
  .hero picture, .hero-estrecho { grid-area: 1 / 1; height: 100%; }
  .hero-estrecho { width: 100%; height: 100%; object-fit: cover; }
  .hero-enlace { display: none; }
  .hero-texto {
    grid-area: 1 / 1;
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 48px 24px;
    background: linear-gradient(180deg, rgba(8,10,14,.34), rgba(8,10,14,.62));
  }
  .hero-titulo {
    color: #fff; font-size: 34px; font-weight: 700; line-height: 1.15;
    margin: 0 0 20px; padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.45);
    text-shadow: 0 2px 14px rgba(0,0,0,.5);
  }

  .fila { grid-template-columns: 1fr; }
  .fila-foto { min-height: 0; order: 1 !important; }
  .fila-foto img { height: auto; aspect-ratio: 4 / 3; }
  .fila-texto { order: 2 !important; padding: 34px 24px 40px; align-items: stretch !important; text-align: left !important; }
  .fila-texto h2 { text-align: left !important; font-size: 25px; }
  .fila-texto .boton { align-self: flex-start; }

  .detalle .contenedor { grid-template-columns: 1fr; gap: 26px; }
  .detalle { padding: 40px 0 24px; }

  .bloque { padding: 40px 0; }
  .bloque .contenedor { grid-template-columns: 1fr; gap: 28px; }
  .bloque-foto { order: 1 !important; }
  .bloque-texto { order: 2 !important; }
  .bloque-texto h2 { font-size: 23px; }

  .video-rejilla { grid-template-columns: repeat(2, 1fr); gap: 24px 18px; }
  .video-destacado h2 { font-size: 21px; }

  .banda { padding: 38px 0; }
  .pie-rejilla { grid-template-columns: repeat(2, 1fr); }
  .pie-abajo { flex-direction: column; text-align: center; }
}

@media (max-width: 560px) {
  body { font-size: 14.5px; }
  .hero-texto h1 { font-size: 27px; }
  .video-rejilla { grid-template-columns: 1fr; }
  .pie-rejilla { grid-template-columns: 1fr; gap: 24px; }
  .fila-texto p, .detalle-texto { text-align: left; }
  .banda p { text-align: left; }
}

/* Respeta a quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .aparece { opacity: 1; transform: none; }
  .fila:hover .fila-foto img { transform: none; }
}