@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root { color-scheme: light; --verde: #a4c668; --azul: #002c6c; --gris: #303030; --claro: #f6f7f2; --blanco: #fff; --lateral: clamp(20px, 6vw, 96px); }
* { box-sizing: border-box; margin: 0; }
body { background: var(--claro); color: var(--gris); font-family: "Outfit", system-ui, sans-serif; font-size: 18px; line-height: 1.5; }
img { display: block; max-width: 100%; height: auto; }
.boton { display: inline-block; padding: 14px 30px; border-radius: 999px; font-weight: 600; text-decoration: none; transition: transform .15s ease; }
.boton:hover { transform: translateY(-2px); }
.boton-verde { background: var(--verde); color: var(--azul); }
.boton-azul { background: var(--azul); color: var(--blanco); }
a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.cinta { position: absolute; pointer-events: none; }
.cinta path { fill: none; stroke: var(--verde); stroke-linecap: round; stroke-dasharray: 1; animation: dibujar 2s ease-out both; }
@keyframes dibujar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .cinta path { animation: none; } .boton { transition: none; } }

.hero { position: relative; display: flex; align-items: flex-end; min-height: 100svh; overflow: hidden; background: var(--azul); color: var(--blanco); isolation: isolate; }
.hero-foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 44, 108, .96) 12%, rgba(0, 44, 108, .5) 46%, rgba(0, 44, 108, .26) 100%); }
.proposito .cinta { inset: 0; z-index: -1; width: 100%; height: 100%; }
.cinta path { stroke-width: 30; }
.logo { position: absolute; top: 28px; left: var(--lateral); width: 170px; }
.hero-texto { padding: 0 var(--lateral) clamp(40px, 8vh, 88px); }
h1 { max-width: 13em; font-size: clamp(44px, 7vw, 100px); font-weight: 400; line-height: 1.02; text-transform: uppercase; }
h1 em { color: var(--verde); font-weight: 700; }
.acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.boton-borde { border: 2px solid var(--blanco); color: var(--blanco); }

.caminos { display: grid; grid-template-columns: 1fr 1fr; }
.camino { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(48px, 8vw, 110px) var(--lateral); }
.camino-talento { background: var(--verde); color: var(--azul); }
.camino-empresa { background: var(--gris); color: var(--blanco); }
.ceja { font-size: 17px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.camino h2 { font-size: clamp(34px, 4vw, 56px); font-weight: 700; line-height: 1.08; }

.proposito { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); padding: clamp(56px, 9vw, 120px) var(--lateral); background: var(--blanco); }
.proposito h2 { color: var(--azul); font-size: clamp(32px, 4vw, 54px); font-weight: 700; line-height: 1.1; }
.misiones h3 { color: var(--azul); font-size: 24px; }
.misiones p + h3 { margin-top: 22px; }

.mosaico { display: grid; grid-template-columns: repeat(3, 1fr); }
.mosaico img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 30px var(--lateral); background: var(--azul); color: var(--blanco); }
.pie img { width: 130px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.pie a { color: var(--blanco); text-underline-offset: 4px; }

@media (max-width: 760px) {
  .caminos, .proposito { grid-template-columns: 1fr; }
  .mosaico { grid-template-columns: 1fr; }
}