@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; flex-direction: column; min-height: 78svh; overflow: hidden; padding: 30px var(--lateral) clamp(48px, 9vh, 96px); background: var(--azul); color: var(--blanco); isolation: isolate; }
.hero .cinta { inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .28; }
.cinta path { stroke-width: 30; }
.logo { width: 170px; }
.hero-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: auto; padding-top: 56px; }
h1 { max-width: 12em; font-size: clamp(46px, 7.4vw, 108px); font-weight: 700; line-height: 1.02; }
h1 em { color: var(--verde); }
.hero-texto p { font-size: clamp(20px, 2vw, 28px); }

.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); padding: clamp(48px, 7vw, 96px) var(--lateral); background: var(--verde); color: var(--azul); }
.pasos span { display: block; font-size: clamp(64px, 7vw, 96px); font-weight: 700; line-height: 1; }
.pasos h2 { margin-top: 10px; font-size: 30px; line-height: 1.15; }

.empresas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(40px, 6vw, 80px) var(--lateral); background: var(--blanco); }
.empresas h2 { color: var(--azul); font-size: clamp(30px, 3.6vw, 48px); line-height: 1.1; }

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

@media (max-width: 760px) {
  .pasos { grid-template-columns: 1fr; }
}