:root{
  --fondo:#ffffff; --texto:#1b1b1b; --suave:#6b6f76; --linea:#e6e8ec;
  --azul:#1f7aec; --verde:#6bbd0b; --rojo:#e8350e;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--fondo);color:var(--texto);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex;flex-direction:column;min-height:100vh}
main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px 8px;gap:16px}
.logo{max-width:min(380px,82vw);height:auto}
.paises{display:flex;flex-direction:column;gap:16px;width:min(680px,100%)}
.paises h1{margin:0;font-size:1.25rem;text-align:center;font-weight:600}
.lista{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pais{display:flex;flex-direction:column;gap:4px;padding:20px 16px;border-radius:14px;text-decoration:none;color:var(--texto);
  background:#fff;border:1px solid var(--linea);border-top:5px solid var(--verde);
  box-shadow:0 1px 2px rgba(0,0,0,.05);transition:transform .15s ease,box-shadow .15s ease}
.pais:hover,.pais:focus-visible{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.10)}
.pais:focus-visible{outline:3px solid #1b1b1b;outline-offset:3px}
.pais.ar{border-top-color:var(--azul)} .pais.cl{border-top-color:var(--rojo)} .pais.mx{border-top-color:var(--verde)}
.pais .nombre{font-weight:700;font-size:1.15rem}.pais .sub{font-size:.85rem;color:var(--suave)}
footer{padding:14px;text-align:center;color:var(--suave);font-size:.85rem}
@media (max-width:560px){ .lista{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){*{transition:none!important}}