/* Valores generales: tipografía y colores. Las variables que empiezan por -- se reutilizan con var(). */
:root {
  font-family:'Trebuchet MS',Trebuchet, Calibri, sans-serif;
  color:#fff;
  background:#537780;
  font-synthesis:none;
  --accent:#ffa701;
  --footer-text:#5c7e87
}

/* Incluye el padding y los bordes dentro del ancho de cada elemento para evitar desbordamientos. */
* {
  box-sizing:border-box
}

/* Desplazamiento suave al seguir enlaces dentro de la página. */
html {
  scroll-behavior:smooth
}

/* Quita el margen que añade el navegador alrededor de la página. */
body {
  margin:0
}

/* Los enlaces heredan el color del texto y no tienen subrayado. */
a {
  color:inherit;
  text-decoration:none
}

/* Los botones usan la misma tipografía que el resto de la web. */
button {
  font:inherit
}

/* Contorno visible al navegar con el teclado (tecla Tab). */
a:focus-visible,button:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:6px
}

/* Las imágenes se adaptan al espacio disponible sin deformarse. */
img {
  max-width:100%;
  height:auto;
  display:block
}

/* HEADER: barra superior fija. height cambia su altura; el .79 de rgba indica un 79% de opacidad. blur difumina lo que se ve debajo. */
.header {
  position:fixed;
  inset:0 0 auto;
  z-index:10;
  height:76px;
  padding:12px 3.3%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(255,255,255,.79);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px)
}

/* Ancho del logo del header. */
.brand {
  width:210px
}

/* Botón de cambio de idioma: sin fondo ni borde, con cursor de mano. */
.language {
  border:0;
  padding:3px;
  background:transparent;
  border-radius:50%;
  cursor:pointer
}

/* Tamaño de la bandera y borde circular blanco. */
.language img {
  width:43px;
  height:43px;
  border:2px solid #fff;
  border-radius:50%
}

/* CONTENIDO AZUL: padding = espacio interior (arriba, lados, abajo); min-height = altura mínima. */
.hero {
  background:#537780;
  padding:130px 5% 64px;
  min-height:720px;
  display:flex;
  align-items:center
}

/* Distribución en dos columnas: texto a la izquierda e imagen a la derecha. gap controla la separación; max-width limita el ancho. */
.hero-inner {
  width:100%;
  max-width:1380px;
  margin:auto;
  display:grid;
  grid-template-columns:.95fr 1.15fr;
  align-items:center;
  gap:34px
}

/* Bloque de texto: z-index lo sitúa por encima de las capas decorativas. */
.copy {
  position:relative;
  z-index:1
}

/* Etiqueta WEB EN CONSTRUCCIÓN: borde naranja, tamaño de letra y separación entre caracteres. */
.eyebrow {
  display:table;
  border:1px solid var(--accent);
  color:var(--accent);
  font-size:13px;
  font-weight:700;
  letter-spacing:2.3px;
  padding:6px 12px;
  margin:0 0 23px
}

/* Titular principal. clamp(mínimo, adaptable, máximo) ajusta la letra a la pantalla; line-height controla la distancia entre líneas. */
h1 {
  font-size:clamp(40px,4.4vw,68px);
  letter-spacing:-1.8px;
  line-height:1.01;
  margin:0 0 22px;
  font-weight:700
}

/* Cada parte del titular ocupa su propia línea. */
h1 span {
  display:block
}

/* Color naranja de la frase «lo que viene». Se toma de --accent. */
.accent {
  color:var(--accent)
}

/* Primer párrafo bajo el titular: tamaño de letra, ancho máximo y espacio inferior. */
.intro {
  font-size:clamp(19px,1.65vw,25px);
  line-height:1.26;
  max-width:490px;
  margin:0 0 24px
}

/* Texto «Pronto estaremos de vuelta»: tamaño, interlineado y espacio hasta el botón. */
.return {
  font-size:17px;
  line-height:1.3;
  margin:0 0 25px
}

/* Imagen de la construcción: llena su columna conservando las proporciones. */
.illustration img {
  width:100%;
  object-fit:contain
}

/* FOOTER: fondo claro, color de texto y espacio interior. */
footer {
  background:#cbd6d9;
  color:var(--footer-text);
  padding:45px 5% 22px
}

/* Centra el contenido del footer y limita su ancho. */
.footer-inner {
  max-width:1280px;
  margin:auto
}

/* Cuatro columnas del footer: logo, dirección/contacto y dos grupos de políticas. */
.footer-top {
  display:grid;
  grid-template-columns:1.2fr 1.8fr 1fr 1fr;
  gap:46px;
  align-items:start
}

/* Tamaño máximo del logo con strapline del footer. */
.footer-brand {
  max-width:290px
}

/* Dirección: tamaño y peso del texto. nowrap evita saltos de línea en pantallas amplias. */
.contact p {
  font-size:16px;
  font-weight:700;
  margin:12px 0 25px;
  white-space:nowrap
}

/* Tamaño de las letras elevadas «nd» en la dirección. */
.contact sup {
  font-size:.65em
}

/* Lista de políticas: textos en vertical; gap separa cada uno. */
.policies {
  padding-top:12px;
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:16px;
  font-weight:700;
  line-height:1.2
}

/* Lista de ciudades: sin viñetas, separadas horizontalmente y con salto a otra fila si hace falta. */
.locations {
  list-style:none;
  padding:0;
  margin:61px 0 0;
  display:flex;
  justify-content:space-around;
  gap:20px;
  flex-wrap:wrap;
  font-size:17px;
  line-height:1.4
}

/* PANTALLAS GRANDES (desde 1700 px): aumenta la altura del contenido. */
@media(min-width:1700px) {
  /* Ajuste para este tamaño de pantalla: CONTENIDO AZUL: padding = espacio interior (arriba, lados, abajo); min-height = altura mínima. */
  .hero {
    min-height:830px
  }

}

/* TABLETS Y PANTALLAS MEDIANAS (1150 px o menos): adapta las columnas y los espacios. */
@media(max-width:1150px) {
  /* Ajuste para este tamaño de pantalla: Cuatro columnas del footer: logo, dirección/contacto y dos grupos de políticas. */
  .footer-top {
    gap:25px;
    grid-template-columns:1.15fr 1.7fr 1fr
  }

  /* Ajuste para este tamaño de pantalla: Posición del último grupo de políticas dentro de la cuadrícula del footer. */
  .footer-top>.policies:last-child {
    grid-column:3
  }

  /* Ajuste para este tamaño de pantalla: Dirección: tamaño y peso del texto. nowrap evita saltos de línea en pantallas amplias. */
  .contact p {
    white-space:normal
  }

  /* Ajuste para este tamaño de pantalla: Tamaño máximo del logo con strapline del footer. */
  .footer-brand {
    max-width:250px
  }

  /* Ajuste para este tamaño de pantalla: CONTENIDO AZUL: padding = espacio interior (arriba, lados, abajo); min-height = altura mínima. */
  .hero {
    min-height:660px
  }

  /* Ajuste para este tamaño de pantalla: Lista de ciudades: sin viñetas, separadas horizontalmente y con salto a otra fila si hace falta. */
  .locations {
    margin-top:40px
  }

}

/* MÓVIL (760 px o menos): estas reglas sustituyen las anteriores solo en pantallas pequeñas. */
@media(max-width:760px) {
  /* Ajuste para este tamaño de pantalla: HEADER: barra superior fija. height cambia su altura; el .79 de rgba indica un 79% de opacidad. blur difumina lo que se ve debajo. */
  .header {
    height:68px;
    padding:12px 6%
  }

  /* Ajuste para este tamaño de pantalla: Ancho del logo del header. */
  .brand {
    width:175px
  }

  /* Ajuste para este tamaño de pantalla: Tamaño de la bandera y borde circular blanco. */
  .language img {
    width:37px;
    height:37px
  }

  /* Ajuste para este tamaño de pantalla: CONTENIDO AZUL: padding = espacio interior (arriba, lados, abajo); min-height = altura mínima. */
  .hero {
    padding:112px 7% 38px;
    min-height:0
  }

  /* Ajuste para este tamaño de pantalla: Distribución en dos columnas: texto a la izquierda e imagen a la derecha. gap controla la separación; max-width limita el ancho. */
  .hero-inner {
    grid-template-columns:1fr;
    gap:35px
  }

  /* Ajuste para este tamaño de pantalla: Bloque de texto: z-index lo sitúa por encima de las capas decorativas. */
  .copy {
    max-width:520px
  }

  /* Ajuste para este tamaño de pantalla: Titular principal. clamp(mínimo, adaptable, máximo) ajusta la letra a la pantalla; line-height controla la distancia entre líneas. */
  h1 {
    font-size:clamp(40px,8.4vw,62px);
    letter-spacing:-1.1px
  }

  /* Ajuste para este tamaño de pantalla: Etiqueta WEB EN CONSTRUCCIÓN: borde naranja, tamaño de letra y separación entre caracteres. */
  .eyebrow {
    font-size:12px;
    letter-spacing:1.7px;
    margin-bottom:22px
  }

  /* Ajuste para este tamaño de pantalla: Primer párrafo bajo el titular: tamaño de letra, ancho máximo y espacio inferior. */
  .intro {
    font-size:20px;
    max-width:430px
  }

  /* Ajuste para este tamaño de pantalla: Texto «Pronto estaremos de vuelta»: tamaño, interlineado y espacio hasta el botón. */
  .return {
    font-size:16px
  }

  /* Ajuste para este tamaño de pantalla: Sombra suave bajo la imagen para darle profundidad; no modifica el archivo de imagen. */
  .illustration {
    max-width:530px;
    width:100%;
    margin:0 auto
  }

  /* Ajuste para este tamaño de pantalla: Cuatro columnas del footer: logo, dirección/contacto y dos grupos de políticas. */
  .footer-top {
    grid-template-columns:1fr 1fr;
    gap:28px
  }

  /* Ajuste para este tamaño de pantalla: Tamaño máximo del logo con strapline del footer. */
  .footer-brand {
    grid-column:1/-1;
    width:250px
  }

  /* Ajuste para este tamaño de pantalla: Bloque de dirección y contacto: grid-column permite ocupar varias columnas. */
  .contact {
    grid-column:1/-1
  }

  /* Ajuste para este tamaño de pantalla: Dirección: tamaño y peso del texto. nowrap evita saltos de línea en pantallas amplias. */
  .contact p {
    margin-top:0
  }

  /* Ajuste para este tamaño de pantalla: Posición del último grupo de políticas dentro de la cuadrícula del footer. */
  .footer-top>.policies:last-child {
    grid-column:auto
  }

  /* Ajuste para este tamaño de pantalla: Lista de políticas: textos en vertical; gap separa cada uno. */
  .policies {
    font-size:15px;
    padding:0
  }

  /* Ajuste para este tamaño de pantalla: Lista de ciudades: sin viñetas, separadas horizontalmente y con salto a otra fila si hace falta. */
  .locations {
    justify-content:flex-start;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px 22px;
    margin-top:35px;
    font-size:16px
  }

  /* Ajuste para este tamaño de pantalla: FOOTER: fondo claro, color de texto y espacio interior. */
  footer {
    padding:36px 7% 28px
  }

}

/* ACCESIBILIDAD: desactiva las transiciones si la persona prefiere menos movimiento. */
@media(prefers-reduced-motion:reduce) {
  /* Ajuste para este tamaño de pantalla: Desplazamiento suave al seguir enlaces dentro de la página. */
  html {
    scroll-behavior:auto
  }

}


/* CONTENIDO AZUL: padding = espacio interior (arriba, lados, abajo); min-height = altura mínima. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #537780;
  background-image:
    radial-gradient(ellipse at 77% 38%, rgba(165, 221, 232, .25), transparent 49%),
    radial-gradient(ellipse at 70% 95%, rgba(195, 233, 239, .28), transparent 45%),
    linear-gradient(110deg, rgba(16, 47, 57, .65), rgba(32, 66, 77, .18) 57%, transparent);
}

/* Capas decorativas: quedan detrás del contenido y no bloquean los clics. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* CUADRÍCULA TENUE: líneas horizontales y verticales. background-size cambia el tamaño de las celdas; mask-image desvanece el efecto junto al texto. */
.hero::before {
  background-image:
    linear-gradient(rgba(208, 239, 245, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(208, 239, 245, .075) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(90deg, transparent 28%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 28%, #000 70%);
}

/* DIAGONALES: franjas translúcidas y una línea naranja. Los ángulos de los degradados controlan su inclinación. */
.hero::after {
  background-image:
    linear-gradient(128deg, transparent 59%, rgba(195, 230, 238, .12) 59.1%, rgba(195, 230, 238, .12) 67%, transparent 67.1%),
    linear-gradient(52deg, transparent 63%, rgba(205, 237, 241, .075) 63.1%, rgba(205, 237, 241, .075) 70%, transparent 70.1%),
    linear-gradient(128deg, transparent 81.8%, rgba(255, 167, 1, .4) 81.85%, rgba(255, 167, 1, .4) 81.92%, transparent 82%);
}

/* Distribución en dos columnas: texto a la izquierda e imagen a la derecha. gap controla la separación; max-width limita el ancho. */
.hero-inner {
  position: relative;
}

/* Sombra suave bajo la imagen para darle profundidad; no modifica el archivo de imagen. */
.illustration {
  position: relative;
  filter: drop-shadow(0 24px 20px rgba(15, 39, 48, .24));
}

/* MÓVIL (760 px o menos): estas reglas sustituyen las anteriores solo en pantallas pequeñas. */
@media (max-width: 760px) {
  /* Ajuste para este tamaño de pantalla: CONTENIDO AZUL: padding = espacio interior (arriba, lados, abajo); min-height = altura mínima. */
  .hero {
    background-image:
      radial-gradient(ellipse at 65% 79%, rgba(174, 222, 233, .26), transparent 44%),
      linear-gradient(120deg, rgba(16, 47, 57, .5), transparent 85%);
  }

  /* Ajuste para este tamaño de pantalla: CUADRÍCULA TENUE: líneas horizontales y verticales. background-size cambia el tamaño de las celdas; mask-image desvanece el efecto junto al texto. */
  .hero::before {
    background-size: 48px 48px;
    -webkit-mask-image: linear-gradient(180deg, transparent 38%, #000 88%);
    mask-image: linear-gradient(180deg, transparent 38%, #000 88%);
    opacity: .65;
  }

  /* Ajuste para este tamaño de pantalla: DIAGONALES: franjas translúcidas y una línea naranja. Los ángulos de los degradados controlan su inclinación. */
  .hero::after {
    opacity: .45;
  }

}


/* FONDO EXTERIOR OSCURO: --page-gutter es el ancho de cada franja lateral (entre 12 y 48 px). */
:root {
  background: #3c3b3b;
  --page-gutter: clamp(12px, 2.5vw, 48px);
}

/* Aplica el gris oscuro al fondo exterior de la página. */
body {
  background: #3c3b3b;
}

/* CONTENEDOR CENTRAL: resta una franja a cada lado y centra el contenido azul. El header y el footer siguen a todo el ancho. */
main {
  width: calc(100% - var(--page-gutter) - var(--page-gutter));
  margin-inline: auto;
}

/* MÓVIL (760 px o menos): estas reglas sustituyen las anteriores solo en pantallas pequeñas. */
@media (max-width: 760px) {
  /* Ajuste para este tamaño de pantalla: En móvil, las franjas oscuras miden 8 px para dejar más espacio al contenido. */
  :root {
    --page-gutter: 8px;
  }

}

/* Permite medir el ancho del contenido con cqw para alinear la caja al eje izquierdo. */
main {
  container-type: inline-size;
}

/* Deja que la caja del texto sobresalga sobre la franja oscura izquierda. */
.hero {
  overflow: visible;
}

/* Las luces y diagonales siguen limitadas al área azul. */
.hero::before,
.hero::after {
  clip-path: inset(0);
}

/* CAJA INCLINADA DETRÁS DEL TEXTO */
.copy {
  /* Aísla las capas del fondo para mantenerlas detrás de las letras.
     El espacio superior deja sitio para la inclinación sin cortar el texto. */
  isolation: isolate;
  /* Recupera el texto blanco sobre el fondo azul. */
  color: #fff;
  /* Distancia hasta el borde izquierdo de la página, incluyendo la franja oscura.
     cqw representa un porcentaje del ancho del contenedor main. */
  --panel-bleed: calc(var(--page-gutter) + 5cqw + max(0px, calc(45cqw - 690px)));
  padding: 68px clamp(20px, 2.5vw, 38px) 32px;
}

.copy::before,
.copy::after {
  /* Estas dos formas son decorativas: no alteran el texto ni bloquean clics. */
  content: "";
  position: absolute;
  inset: 0;
  /* Extiende los fondos sobre la franja oscura hasta el borde de la página. */
  left: calc(0px - var(--panel-bleed));
  pointer-events: none;
}

.copy::before {
  /* Solo la franja superior es amarilla (#ffa701), al 70% de opacidad.
     La forma termina donde empieza la caja azul para no teñir su fondo.
     Cambia .70 para ajustar la transparencia.
     polygon define sus cuatro esquinas, empezando por la superior izquierda. */
  z-index: -2;
  background: rgba(255, 167, 1, .40);
  clip-path: polygon(0 24px, 100% 0, 100% 28px, 0 52px);
}

.copy::after {
  /* Caja azul: su borde superior sube hacia la derecha.
     Cambia 52px y 28px para variar la inclinación y el ancho de la franja. */
  z-index: -1;
  /* #537780 con un 70% de opacidad: cambia .70 para más o menos transparencia.
     Solo el fondo es transparente; las letras conservan su opacidad. */
  background: rgba(83, 119, 128, .60);
  clip-path: polygon(0 52px, 100% 28px, 100% 100%, 0 100%);
}

/* La etiqueta vuelve a mostrar el fondo azul transparente de la caja. */
.copy .eyebrow {
  background: transparent;
}

/* MÓVIL: caja más compacta y con una inclinación más suave. */
@media (max-width: 760px) {
  .copy {
    --panel-bleed: calc(var(--page-gutter) + 7cqw);
    padding: 48px 20px 28px;
  }

  .copy::before {
    clip-path: polygon(0 14px, 100% 0, 100% 18px, 0 32px);
  }

  .copy::after {
    clip-path: polygon(0 32px, 100% 18px, 100% 100%, 0 100%);
  }
}