@font-face { font-family: "Outfit"; src: url("outfit-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root { color-scheme: light; }
* { box-sizing: border-box; margin: 0; }
body { padding: clamp(24px, 5vw, 64px); background: #efefed; color: #303030; font-family: "Outfit", system-ui, sans-serif; font-size: 18px; line-height: 1.45; }
img { display: block; max-width: 100%; height: auto; }
header, main { width: min(1280px, 100%); margin-inline: auto; }
header img { width: 150px; margin-bottom: 28px; }
h1 { color: #002c6c; font-size: clamp(34px, 4vw, 52px); line-height: 1.1; }
main { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.opcion { padding: 14px 14px 24px; background: #fff; border-radius: 24px; color: inherit; text-decoration: none; transition: transform .15s ease; }
.opcion:hover { transform: translateY(-4px); }
.opcion:focus-visible { outline: 3px solid #002c6c; outline-offset: 3px; }
.opcion img { margin-bottom: 18px; border-radius: 14px; }
.opcion h2 { color: #002c6c; font-size: 26px; }
@media (max-width: 860px) { main { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .opcion { transition: none; } }