/* =========================================================
   DyM Cyber — estilos base
   Las variables de :root son las mismas de Figma ("Colores DyM").
   Si cambias un color aquí, cambia en todo el sitio.
   ========================================================= */

:root {
  /* Marca */
  --marca-navy: #101A33;
  --marca-azul-oscuro: #18305D;
  --marca-azul: #2B5AA6;
  --marca-azul-header: #1A5490;
  --marca-verde: #5EA267;
  --marca-naranja: #EC6621;
  --marca-naranja-hover: #D4561A;

  /* Fondo */
  --fondo-blanco: #FFFFFF;
  --fondo-claro: #F0F5FF;
  --fondo-celeste: #BAE0FF;

  /* Texto */
  --texto-principal: #101A33;
  --texto-secundario: #18305D;
  --texto-claro: #F2F2F7;

  /* Borde y estado */
  --borde-default: #F0F5FF;
  --estado-error: #B3261E;

  /* Botones del hero: en Figma están en rojo (#DA3629), distinto al naranja
     de tu componente Botón. Cuando el equipo decida, se cambia solo aquí. */
  --boton-cta: #DA3629;
  --boton-cta-hover: #B92D22;

  /* Títulos de la franja de Servicios: en Figma #80B1EA, no está en "Colores DyM" */
  --acento-celeste: #80B1EA;
  /* Roadmap de Servicios OT (años y puntos): en Figma #E8123A, tampoco está en la colección */
  --acento-rojo: #E8123A;
  /* Contacto: fondo y círculos de íconos con valores propios en Figma (fuera de la colección) */
  --fondo-contacto: #02182D;
  --rojo-contacto: #B61002;

  /* Tipografía (estilos de texto de Figma) */
  --fuente: "Plus Jakarta Sans", system-ui, sans-serif;
  /* En Figma el menú, los botones del hero y la franja usan Inter */
  --fuente-ui: "Inter", system-ui, sans-serif;
  --h1: 700 40px/1.2 var(--fuente);
  --etiqueta: 600 20px/1.4 var(--fuente);
  --cuerpo-grande: 400 20px/1.4 var(--fuente);
  --cuerpo-medio: 400 16px/1.4 var(--fuente);
  --cuerpo-base: 400 14px/1.4 var(--fuente);
  --tarjeta-titulo: 600 14px/1.4 var(--fuente);
  --boton: 600 16px/1.4 var(--fuente);
  --link: 600 13px/1.4 var(--fuente);
  --pequeno: 400 12px/1.4 var(--fuente);

  /* Medidas */
  /* Figma mide 1512 px; se ensancha para aprovechar pantallas grandes (1920 px) */
  --ancho-max: 1720px;
  --margen-lateral: 63px;
  --radio: 8px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Si la ventana es más alta que la página, el espacio bajo el footer queda navy y no blanco */
html { background: var(--marca-navy); }
body {
  margin: 0;
  font: var(--cuerpo-medio);
  color: var(--texto-principal);
  background: var(--fondo-blanco);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.contenedor {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--margen-lateral);
}

/* ---------- Cambio suave entre páginas ---------- */
/* Al navegar por el menú, la página actual se desvanece y la nueva aparece.
   El header queda fijo (no parpadea). Funciona en Chrome, Edge y Safari recientes;
   en los demás navegadores la página cambia como siempre. */
@view-transition { navigation: auto; }
.header { view-transition-name: header; }
/* La página actual sale rápido y la nueva entra después, suave y subiendo un poco
   (así no se mezclan las dos y el cruce se ve limpio) */
::view-transition-old(root) { animation: pagina-sale .2s ease-out both; }
::view-transition-new(root) { animation: pagina-entra .5s cubic-bezier(.22, .61, .36, 1) .12s both; }
@keyframes pagina-sale { to { opacity: 0; } }
@keyframes pagina-entra { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- Animación al hacer scroll ---------- */
/* js/main.js agrega .animar a los bloques y .animar--visible cuando entran en pantalla.
   Movimiento corto y lento, con una curva que frena suave al final */
.animar {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1s cubic-bezier(.22, .61, .36, 1), transform 1.1s cubic-bezier(.22, .61, .36, 1);
  /* Avisa al navegador que esto se va a mover, para animarlo con la tarjeta gráfica */
  will-change: opacity, transform;
}
.animar--visible { opacity: 1; transform: none; }

/* ---------- Componente: Botón ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radio);
  border: 1px solid transparent;
  font: var(--boton);
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.boton--primario { background: var(--marca-naranja); color: var(--fondo-blanco); }
.boton--primario:hover { background: var(--marca-naranja-hover); }
.boton--secundario { background: transparent; color: var(--marca-naranja); border-color: var(--marca-naranja); }
.boton--secundario:hover { background: var(--marca-naranja); color: var(--fondo-blanco); }
.boton--cta { width: 239px; height: 40px; padding: 12px; background: var(--boton-cta); color: var(--texto-claro); font: 400 16px/1 var(--fuente-ui); }
.boton--cta:hover { background: var(--boton-cta-hover); }
.boton--pequeno { padding: 8px 16px; border-radius: 6px; font: var(--link); }
.boton--azul { background: var(--marca-azul); color: var(--fondo-blanco); }
.boton--azul:hover { background: var(--marca-azul-oscuro); }

/* Botón chico de las tarjetas ("Conocer más →"): 131x22 en Figma, Inter 13 */
.boton-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 131px;
  height: 22px;
  padding: 0 12px;
  border-radius: var(--radio);
  font: 400 13px/1 var(--fuente-ui);
  color: var(--texto-claro);
  transition: background-color .2s;
}
.boton-mini--azul { background: var(--marca-azul); }
.boton-mini--azul:hover { background: var(--marca-azul-oscuro); }
.boton-mini--naranja { background: var(--marca-naranja); }
.boton-mini--naranja:hover { background: var(--marca-naranja-hover); }

/* ---------- Componente: Input ---------- */
/* Normal: borde Marca/Azul 1 px · Foco: Marca/Naranja 2 px · Error: Estado/Error 2 px */
.input {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--marca-azul);
  border-radius: var(--radio);
  background: var(--fondo-blanco);
  font: var(--cuerpo-medio);
  color: var(--texto-principal);
  outline: none;
}
.input::placeholder { color: var(--texto-secundario); opacity: .5; }
.input:focus { border-color: var(--marca-naranja); box-shadow: inset 0 0 0 1px var(--marca-naranja); }
.input--error, .input--error:focus { border-color: var(--estado-error); box-shadow: inset 0 0 0 1px var(--estado-error); }
.input--area { min-height: 80px; resize: vertical; }

/* ---------- Componente: Header ---------- */
/* Medidas tomadas de Figma (01 - Inicio): alto 90, logo 151x75, ítems de 112 px separados 50 px.
   Márgenes ajustados para que logo y texto del menú queden a 63 px, como el resto de la página:
   logo.png trae 24 px transparentes a la izquierda y "Contacto" va centrado en un ítem de 112 px. */
.header {
  background: var(--marca-azul-header);
  color: var(--fondo-blanco);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header__barra {
  position: relative;
  display: flex;
  align-items: center;
  height: 90px;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 41px 0 39px;
}
.header__logo { flex: none; align-self: flex-end; }
.header__logo img { width: 151px; height: 75px; object-fit: contain; object-position: left bottom; }
.header__logo-texto { display: block; font: 700 24px/1 var(--fuente); margin-bottom: 33px; }
/* Máx. 270 px: en español cabe en una línea; en inglés (más largo) baja a dos */
.header__lema { flex: none; max-width: 270px; margin: 0 12px 0 20px; font: 400 16px/1.25 var(--fuente-ui); }
.header__nav { margin-left: auto; }
/* Separación de 50 px como en Figma; en notebooks se achica para que todo (con el botón de idioma) quepa en una línea */
.menu {
  display: flex;
  align-items: center;
  gap: clamp(8px, calc((100vw - 1330px) / 5), 50px);
  margin: 0;
  list-style: none;
  padding: 0;
}
/* Componente: Item menu (Fondo=Oscuro) */
.menu__item {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Mínimo 112 px como en Figma; los textos largos ("Servicios Especializados") se ensanchan */
  min-width: 112px;
  min-height: 40px;
  padding: 12px 16px;
  border-radius: var(--radio);
  border-bottom: 1px solid transparent;
  font: 400 16px/1 var(--fuente-ui);
  text-align: center;
  white-space: nowrap;
  transition: background-color .2s;
}
.menu__item--ancho { min-width: 155px; }
.menu__item:hover { background: rgba(255, 255, 255, .1); }
.menu__item--activo { border-bottom-color: #061524; }
/* Botón de idioma (ES / EN): lleva a la misma página en el otro idioma */
.idioma {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 32px;
  margin-left: 16px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 6px;
  font: 600 14px/1 var(--fuente-ui);
  letter-spacing: .04em;
  transition: background-color .2s, color .2s;
}
.idioma:hover { background: var(--fondo-blanco); color: var(--marca-azul-header); }
.menu__boton-movil {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  color: inherit;
  font-size: 28px;
  cursor: pointer;
}

/* ---------- Hero (Inicio) ---------- */
/* Alto 423 px. Foto completa en alta calidad (2606x1600), ampliada y recortada
   como en Figma: se ve el panel "CYBERAMENAZA DETECTADA" arriba a la derecha.
   Queda anclada a la derecha para que en pantallas anchas no aparezca un hueco */
.hero {
  position: relative;
  height: 423px;
  background-color: var(--marca-navy);
  background-image: url("../imagenes/hero.webp");
  background-repeat: no-repeat;
  background-size: 1981px auto;
  background-position: right -173px top -508px;
  color: var(--texto-claro);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90.08deg, var(--marca-navy) 46.76%, rgba(115, 115, 115, 0) 98.06%);
}
.hero__contenido {
  position: relative;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 53px var(--margen-lateral) 0;
}
.hero__titulo { font: 700 40px/1.3 var(--fuente); margin: 0 0 23px; max-width: 557px; }
.hero__texto { font: 400 20px/1.26 var(--fuente); color: var(--fondo-celeste); margin: 0 0 21px; max-width: 497px; }
.hero__botones { display: flex; flex-wrap: wrap; gap: 19px; }

/* ---------- Franja de pilares (Inicio) ---------- */
/* Textos y separadores repartidos parejo entre los márgenes de 63 px;
   separadores de 30 px (el último de 53 px), como en Figma */
.pilares { background: var(--marca-navy); color: var(--texto-claro); }
.pilares__lista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--margen-lateral);
  list-style: none;
}
.pilares__item { font: 400 16px/1 var(--fuente-ui); }
.pilares__divisor { width: 1px; height: 30px; background: var(--marca-azul); }
.pilares__divisor--alto { height: 53px; }
.pilares__lema { color: var(--fondo-celeste); }

/* ---------- Componente: Título de sección ---------- */
.titulo-seccion__etiqueta { font: var(--etiqueta); line-height: 1.26; color: var(--marca-azul); text-transform: uppercase; margin: 0 0 8px; }
.titulo-seccion__titulo { font: var(--h1); line-height: 1.26; color: var(--texto-principal); margin: 0; }
/* Variante sobre fondo navy */
.titulo-seccion--claro .titulo-seccion__etiqueta { color: var(--acento-celeste); }
.titulo-seccion--claro .titulo-seccion__titulo { color: var(--fondo-blanco); }

.fondo-navy { background: var(--marca-navy); color: var(--fondo-blanco); }

/* ---------- Servicios: introducción ---------- */
/* Figma (02 - Servicios principales): título 671 px a la izquierda, texto 643 px a la derecha */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 671px) minmax(0, 643px);
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  padding-top: 64px;
  padding-bottom: 40px;
}
.intro__texto p { font: var(--cuerpo-grande); line-height: 1.26; margin: 0; }
/* Servicios OT: franja navy de 216 px */
.intro--oscuro { padding-top: 48px; padding-bottom: 40px; }
/* Servicios Especializados: texto de 16 px */
.intro__texto--medio p { font: var(--cuerpo-medio); line-height: 1.26; color: var(--texto-secundario); }

/* ---------- Servicios: franja navy con 3 servicios ---------- */
.banda-servicios { background: var(--marca-navy); color: var(--fondo-blanco); }
.banda-servicios__lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 0 auto;
  padding-top: 45px;
  padding-bottom: 33px;
  list-style: none;
}
.servicio { display: flex; align-items: flex-start; gap: 49px; }
.servicio__icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--boton-cta-hover);
}
.servicio__titulo { font: var(--tarjeta-titulo); line-height: 1.26; color: var(--acento-celeste); margin: 0; max-width: 300px; }
.servicio__texto { font: var(--cuerpo-base); line-height: 1.26; margin: 18px 0 0; max-width: 300px; }

/* ---------- Servicios: estándares y normativas ---------- */
.estandares { padding-top: 32px; padding-bottom: 26px; }
.estandares__titulo { font: 700 24px/1.26 var(--fuente); text-transform: uppercase; margin: 0 0 28px; }
.estandares__texto { font: var(--cuerpo-grande); line-height: 1.26; color: var(--texto-secundario); max-width: 944px; margin: 0 0 68px; }
.estandares__lista {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 17px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Tarjeta de norma: 260x121, logo en una columna de 64 px y texto a la derecha */
.norma {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 13px;
  min-height: 121px;
  padding: 23px 13px;
  border-radius: var(--radio);
  background: var(--fondo-blanco);
}
.norma > img { justify-self: center; }
/* Figma recorta el logo de NIS2 en un círculo de 49 px */
.norma__logo-circulo { justify-self: center; width: 49px; height: 49px; border-radius: 50%; overflow: hidden; }
.norma__logo-circulo img { max-width: none; margin: -28px 0 0 -75px; }
/* Tamaños 13 y 11 px tal como en Figma (no son estilos de texto de la colección) */
.norma__titulo { font: 600 13px/1.26 var(--fuente); color: var(--marca-azul); margin: 0; }
.norma__texto { font: 400 11px/1.26 var(--fuente); color: var(--texto-principal); margin: 16px 0 0; }

/* ---------- Servicios OT: OTRiskmap ---------- */
/* Figma (03 - Servicios OT): texto 598 px | computador 403x245 | lista de 4 características */
.otriskmap {
  display: grid;
  grid-template-columns: minmax(0, 598px) 403px minmax(0, 306px);
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding-top: 37px;
  padding-bottom: 47px;
}
.otriskmap__texto { font: var(--cuerpo-grande); line-height: 1.26; margin: 16px 0 33px; }
/* La imagen viene con margen; Figma la recorta y la amplía al 128 % */
.otriskmap__imagen { position: relative; width: 403px; height: 245px; overflow: hidden; }
.otriskmap__imagen img { position: absolute; max-width: none; width: 128.17%; height: auto; left: -14.7%; top: -14.29%; }

.caracteristicas { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.caracteristica { display: grid; grid-template-columns: 37px 1fr; align-items: start; gap: 12px; }
.caracteristica__icono { display: grid; place-items: center; height: 37px; }
/* En Figma el ícono de Assessment está volteado verticalmente */
.icono-volteado { transform: scaleY(-1); }
.caracteristica__titulo { font: var(--tarjeta-titulo); line-height: 1.26; color: var(--marca-azul); margin: 0; }
.caracteristica__texto { font: var(--cuerpo-base); line-height: 1.26; margin: 0; }

/* ---------- Servicios OT: roadmap ---------- */
.ruta {
  display: grid;
  grid-template-columns: minmax(0, 495px) minmax(0, 841px);
  justify-content: space-between;
  align-items: start;
  gap: 48px;
  padding-bottom: 53px;
}
.ruta__texto { font: var(--cuerpo-grande); line-height: 1.26; margin: 14px 0 0; }
.ruta__lineas { display: grid; gap: 36px; margin-top: 36px; }

/* Componente: línea de tiempo (un año del roadmap) */
.linea-tiempo__anio { font: var(--tarjeta-titulo); color: var(--acento-rojo); margin: 0 0 14px; }
.linea-tiempo__hitos {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* La línea pasa por el centro de los puntos */
.linea-tiempo__hitos::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--marca-navy);
}
.linea-tiempo--azul .linea-tiempo__hitos::before { background: var(--marca-azul); }
.linea-tiempo__hitos li {
  position: relative;
  padding: 24px 4px 0;
  font: var(--cuerpo-base);
  text-align: center;
  hyphens: auto;
}
.linea-tiempo__hitos li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: var(--acento-rojo);
}

/* ---------- Servicios Especializados: 8 tarjetas ---------- */
/* Figma (04 - Servicios especializados): tarjetas de 503x152 en 2 columnas centradas */
.servicios-esp { padding-bottom: 40px; }
.servicios-esp__etiqueta { margin: 0 0 28px; }
.servicios-esp__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 503px));
  justify-content: center;
  gap: 16px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tarjeta-esp {
  display: grid;
  grid-template-columns: 71px 1fr 117px;
  align-items: center;
  gap: 18px;
  min-height: 152px;
  padding-left: 13px;
  border: 1px solid var(--marca-azul);
  border-radius: var(--radio);
  overflow: hidden;
}
.tarjeta-esp__icono {
  align-self: start;
  display: grid;
  place-items: center;
  width: 71px;
  height: 71px;
  margin-top: 19px;
  border-radius: 50%;
  background: var(--boton-cta-hover);
}
.tarjeta-esp__titulo { font: var(--tarjeta-titulo); line-height: 1.26; color: var(--marca-azul); margin: 0; }
.tarjeta-esp__texto { font: var(--cuerpo-base); line-height: 1.26; color: var(--texto-secundario); margin: 18px 0 0; }
.tarjeta-esp__foto { width: 117px; height: 100%; object-fit: cover; border-radius: var(--radio); }
.tarjeta-esp__foto--borde { border: 2px solid var(--fondo-claro); }

/* Ícono de Video Analítica: en Figma son 3 piezas (marco de escaneo, ojo y pupila) */
.icono-scan { position: relative; width: 45px; height: 45px; }
.icono-scan img { position: absolute; max-width: none; }
.icono-scan__marco { left: 4.2px; top: 4.2px; width: 36.6px; height: 36.6px; }
.icono-scan__ojo { left: 7.97px; top: 12.81px; width: 29.07px; height: 19.38px; }
.icono-scan__pupila { left: 16.69px; top: 16.69px; width: 11.62px; height: 11.62px; }

/* ---------- Servicios Especializados: modelo de ejecución ---------- */
.modelo {
  display: grid;
  grid-template-columns: 340px 1fr 195px;
  align-items: start;
  gap: 24px;
  padding-top: 38px;
  padding-bottom: 57px;
}
.modelo__titulo { font-size: 32px; }
.modelo__texto { font: var(--cuerpo-grande); line-height: 1.26; max-width: 289px; margin: 29px 0 0; }
.modelo__pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 91px 0 0;
  padding: 0;
  list-style: none;
}
.paso { display: flex; flex-direction: column; align-items: center; text-align: center; }
.paso__icono {
  display: grid;
  place-items: center;
  width: 71px;
  height: 70px;
  border-radius: 50%;
  background: var(--boton-cta-hover);
}
/* En Figma los pasos usan Inter (del kit externo), no Plus Jakarta Sans */
.paso__titulo { font: 600 24px/1.2 var(--fuente-ui); letter-spacing: -0.48px; color: var(--acento-celeste); margin: 14px 0 18px; }
.paso__texto { font: 400 16px/1 var(--fuente-ui); margin: 0; }
/* Línea vertical con degradado rojo y el resultado del ciclo */
.modelo__resultado {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 151px;
  max-width: 195px;
  margin: 98px 0 0;
  padding-left: 15px;
  font: 600 16px/1.26 var(--fuente);
  color: var(--acento-celeste);
  text-transform: uppercase;
}
.modelo__resultado::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(var(--boton-cta-hover), var(--acento-rojo));
}

/* ---------- Nosotros: hero con foto ---------- */
/* Foto ampliada al 122 % como en Figma, con degradado navy de izquierda a derecha */
.hero-nosotros {
  position: relative;
  min-height: 509px;
  background: var(--marca-navy) url("../imagenes/nos-hero.webp") no-repeat 40% 50% / 121.84% auto;
  color: var(--fondo-blanco);
}
.hero-nosotros::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 89.88%;
  background: linear-gradient(90deg, var(--marca-navy) 48.08%, rgba(48, 78, 153, 0) 100%);
}
.hero-nosotros__contenido { position: relative; padding-top: 58px; padding-bottom: 48px; }
/* Aquí la etiqueta es Fondo/Celeste, no el celeste #80B1EA de otras páginas */
.hero-nosotros .titulo-seccion__etiqueta { color: var(--fondo-celeste); }
.hero-nosotros .titulo-seccion__titulo { max-width: 497px; }
.hero-nosotros__texto { font: var(--cuerpo-grande); line-height: 1.26; max-width: 786px; margin: 14px 0 0; }

/* ---------- Nosotros: equipo ---------- */
.equipo { padding-top: 47px; padding-bottom: 35px; }
.perfil {
  display: grid;
  grid-template-columns: 228px 1fr;
  gap: 76px;
  max-width: 996px;
  min-height: 337px;
  margin: 43px auto 0;
  padding: 9px 36px 9px 42px;
  border: 1px solid var(--marca-azul);
  border-radius: var(--radio);
  box-shadow: 0 4px 7px rgba(0, 0, 0, .3);
}
/* Foto recortada (PNG sin fondo) sobre un degradado de marca, en formato 137:188.
   Se ve completa (manos incluidas) y apoyada en la base; en Figma iba ampliada al 175 % sobre blanco */
.perfil__foto {
  position: relative;
  width: 228px;
  aspect-ratio: 137 / 188;
  overflow: hidden;
  border-radius: var(--radio);
  background: linear-gradient(180deg, var(--marca-azul) 0%, var(--marca-navy) 100%);
}
.perfil__foto img { position: absolute; max-width: none; width: 147.4%; height: auto; left: -27.4%; bottom: 0; }
.perfil__datos { padding-top: 30px; color: var(--texto-secundario); }
.perfil__area { font: 700 20px/1.26 var(--fuente); color: var(--marca-azul); text-transform: uppercase; margin: 0 0 16px; }
.perfil__nombre { font: 600 18px/1.26 var(--fuente); margin: 0; }
.perfil__cargo { font: 400 16px/1.26 var(--fuente); margin: 0 0 15px; }
.perfil__bio { font: 400 14px/1.26 var(--fuente); margin: 0 0 28px; }
.perfil__areas { font: 600 11px/1.26 var(--fuente); margin: 0 0 22px; }
.perfil__boton { min-width: 172px; height: 29px; }

/* ---------- Nosotros: asociaciones ---------- */
.alianzas { padding-top: 35px; padding-bottom: 83px; }
.alianzas__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 46px;
  margin: 50px 0 0;
  padding: 0;
  list-style: none;
}
.alianza {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 406px;
  height: 249px;
  padding: 34px 0 20px;
  background: var(--fondo-blanco);
  border: 2px solid var(--fondo-claro);
  border-radius: var(--radio);
  box-shadow: 0 4px 10.7px rgba(0, 0, 0, .25);
}
.alianza img { margin: auto 0; }

/* ---------- Nosotros: galería de eventos ---------- */
/* En Figma la fila se desliza hacia el lado (la última tarjeta queda cortada) */
.galeria {
  display: flex;
  gap: 34px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Sin esto el "snap" pega la primera tarjeta al borde y se pierde el margen */
  scroll-padding-inline: var(--margen-lateral);
  scrollbar-color: var(--marca-azul) transparent;
  margin: 0 auto;
  padding-top: 67px;
  padding-bottom: 52px;
  list-style: none;
}
.galeria__tarjeta {
  flex: 0 0 406px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  height: 388px;
  padding-top: 41px;
  border-radius: var(--radio);
  background: rgba(43, 90, 166, .1);
  scroll-snap-align: start;
}
.galeria__tarjeta img { width: 318px; height: 282px; object-fit: cover; }

/* ---------- Contacto ---------- */
.contacto { position: relative; overflow: hidden; background: var(--fondo-contacto); color: var(--fondo-blanco); }
.contacto__fondo,
.contacto__brillo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.contacto__fondo { object-fit: cover; opacity: .2; }
.contacto__brillo { pointer-events: none; }
/* Cuando el brillo (WebGPU) funciona, el lienzo ya dibuja el mapa */
.contacto--brillo .contacto__fondo { display: none; }
.contacto__interior {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 797px) 381px;
  justify-content: space-between;
  align-items: start;
  gap: 48px;
  padding-top: 102px;
  padding-bottom: 116px;
}
/* En Figma este título mide 48 px (los demás 40) */
.contacto__titulo { font-size: 48px; }
.contacto__texto { font: var(--cuerpo-grande); line-height: 1.26; margin: 10px 0 0; }

.datos-contacto { display: grid; gap: 35px; margin: 43px 0 0; padding: 0; list-style: none; }
.dato { display: flex; align-items: center; gap: 16px; }
.dato__icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--rojo-contacto);
}
.dato__titulo { font: var(--tarjeta-titulo); line-height: 1.26; color: var(--acento-celeste); margin: 0; }
.dato__valor { display: block; font: var(--cuerpo-base); line-height: 1.26; margin: 0; }
.dato__valor--enlace { text-decoration: underline; }
.dato__valor--enlace:hover { color: var(--fondo-celeste); }

.redes { display: flex; flex-wrap: wrap; gap: 24px 110px; margin: 104px 0 0; padding: 0; list-style: none; }
.red, .red__enlace { display: flex; align-items: center; gap: 16px; }
.red__logo { flex: none; width: 62px; height: 62px; border-radius: 50%; overflow: hidden; }
.red__logo img { width: 100%; height: 100%; object-fit: cover; }
.red__nombre { font: var(--tarjeta-titulo); }
.red__enlace:hover .red__nombre { color: var(--fondo-celeste); }

/* Panel del formulario: 381 px, fondo azul oscuro al 20 % */
.panel-form { padding: 22px 36px 36px; border-radius: var(--radio); background: rgba(24, 48, 93, .2); }
.panel-form__titulo { color: var(--acento-celeste); margin: 0 0 18px; }
.form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--borde-default);
  border-radius: var(--radio);
  background: var(--fondo-blanco);
}
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo__etiqueta { font: var(--cuerpo-medio); color: var(--texto-secundario); }
.form__enviar { width: 100%; }
.form__enviar:disabled { opacity: .7; cursor: wait; }
.form__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.consentimiento { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; font: 400 16px/1.4 var(--fuente-ui); cursor: pointer; }
.consentimiento input { flex: none; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--marca-azul); }
.form__estado { min-height: 20px; margin: 12px 0 0; font: var(--cuerpo-base); color: var(--fondo-celeste); }

/* Componente: Aviso (Figma "Dialog Body", 466 px). Aparece y desaparece sin animación,
   centrado y sin oscurecer el fondo, como en el video del equipo */
.aviso {
  width: min(466px, calc(100% - 32px));
  max-width: 600px;
  padding: 32px;
  border: 1px solid var(--texto-secundario);
  border-radius: var(--radio);
  background: var(--fondo-blanco);
  color: var(--marca-azul);
  box-shadow: 0 16px 16px -4px rgba(12, 12, 13, .1), 0 4px 2px -4px rgba(12, 12, 13, .05);
}
.aviso::backdrop { background: transparent; }
/* Al abrirse, el foco queda en el aviso (no en la ×) para que no aparezca el anillo de foco */
.aviso:focus { outline: none; }
.aviso__cerrar:focus-visible { outline: 2px solid var(--marca-naranja); outline-offset: 2px; }
/* El aviso usa Inter, como en Figma (viene del kit externo) */
.aviso__titulo { font: 600 24px/1.2 var(--fuente-ui); letter-spacing: -0.48px; margin: 0 0 12px; }
.aviso__texto { font: 400 16px/1.4 var(--fuente-ui); margin: 0; }
.aviso__cerrar {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 0;
  border-radius: 32px;
  background: transparent;
  cursor: pointer;
}
.aviso__cerrar:hover { background: var(--fondo-claro); }

/* ---------- Componente: Footer ---------- */
.footer { background: var(--marca-navy); color: var(--fondo-blanco); }
.footer__interior {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 48px var(--margen-lateral) 24px;
}
.footer__columnas { display: flex; justify-content: space-between; gap: 48px; }
/* -17px compensa el borde transparente de logo.png para alinearlo con el texto */
.footer__marca img { width: 105px; height: auto; margin-left: -17px; }
.footer__marca p { font: var(--cuerpo-base); color: var(--fondo-celeste); width: 300px; margin: 16px 0 0; }
.footer__col h3 { font: var(--tarjeta-titulo); color: var(--marca-naranja); margin: 0 0 10px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer__col li, .footer__col a { font: var(--cuerpo-base); }
.footer__col a:hover { color: var(--marca-naranja); }
.footer__divisor { border: 0; height: 1px; background: var(--marca-azul-oscuro); margin: 32px 0; }
.footer__copy { font: var(--pequeno); color: var(--fondo-celeste); margin: 0; }

/* ---------- Celular y tablet ---------- */
/* Figma solo tiene escritorio (1512 px); esto es una adaptación propuesta */
/* El lema se oculta en notebooks para que el menú y el botón de idioma quepan */
@media (max-width: 1440px) {
  .header__lema { display: none; }
}
@media (max-width: 1300px) {
  .menu { gap: 8px; }
  .pilares__lista { padding: 0 24px; }
}
@media (max-width: 1100px) {
  .menu__boton-movil { display: block; order: 2; margin-left: 12px; }
  .header__nav { margin-left: 0; order: 3; }
  /* En celular el botón de idioma va a la derecha, junto al ☰ */
  .idioma { order: 1; margin-left: auto; }
  .menu {
    display: none;
    position: absolute;
    top: 90px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--marca-azul-header);
    padding: 8px 16px 16px;
  }
  .menu.menu--abierto { display: flex; }
  .menu__item, .menu__item--ancho { width: auto; }
  .menu__item br { display: none; }
  .hero { height: auto; padding-bottom: 48px; background-size: cover; background-position: 75% 45%; }
  .pilares__lista { display: grid; height: auto; grid-template-columns: repeat(3, 1fr); gap: 20px 0; padding: 24px 16px; }
  .pilares__divisor { display: none; }
  .intro { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .banda-servicios__lista { grid-template-columns: 1fr; }
  .estandares__lista { grid-template-columns: repeat(2, 1fr); }
  /* minmax(0, 1fr) evita que la imagen de 403 px estire la columna y la página se salga por el lado */
  .otriskmap, .ruta { grid-template-columns: minmax(0, 1fr); }
  .otriskmap__imagen { width: 100%; max-width: 403px; height: auto; aspect-ratio: 403 / 245; }
  .ruta__lineas { margin-top: 0; }
  /* El año 2 tiene 9 hitos: en pantallas chicas se ordenan en filas */
  .linea-tiempo__hitos { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
  .linea-tiempo__hitos::before { display: none; }
  .servicios-esp__lista { grid-template-columns: minmax(0, 503px); }
  .modelo { grid-template-columns: 1fr; }
  .modelo__pasos { grid-template-columns: repeat(2, 1fr); row-gap: 32px; margin-top: 0; }
  .modelo__resultado { margin-top: 0; min-height: 80px; max-width: none; }
  .hero-nosotros { background-size: cover; }
  .hero-nosotros::before { width: 100%; }
  .perfil { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .perfil__datos { padding-top: 0; }
  .contacto__interior { grid-template-columns: minmax(0, 1fr); }
  .panel-form { max-width: 560px; }
  /* Franja de Servicios en una columna: el texto usa todo el ancho */
  .servicio__titulo, .servicio__texto { max-width: none; }
  .footer__columnas { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  :root { --margen-lateral: 16px; }
  .hero__contenido { padding: 40px 16px 0; }
  .hero__titulo { font-size: 30px; }
  .hero__texto { font-size: 17px; }
  .boton--cta { width: 100%; }
  .pilares__lista { grid-template-columns: repeat(2, 1fr); }
  .footer__marca p { width: auto; }
  .titulo-seccion__titulo { font-size: 30px; }
  .estandares__lista { grid-template-columns: 1fr; }
  .tarjeta-esp { grid-template-columns: 62px 1fr; padding: 13px; }
  .tarjeta-esp__icono { width: 62px; height: 62px; margin-top: 0; }
  .tarjeta-esp__foto { display: none; }
  .modelo__pasos { grid-template-columns: 1fr; }
  .alianza { width: 100%; }
  .galeria__tarjeta { flex-basis: 85%; }
  .galeria__tarjeta img { width: 85%; }
  .contacto__titulo { font-size: 34px; }
  .redes { gap: 24px 40px; margin-top: 48px; }
  .contacto__interior { padding-top: 48px; padding-bottom: 48px; }
  .panel-form { padding: 22px 16px 24px; }
  .form { padding: 16px; }
  /* El logo trae 24 px transparentes: sin relleno izquierdo queda alineado al margen de 16 px */
  .header__barra { padding: 0 16px 0 0; }
}