:root { --bg: #F6FAFC; --tinta: #0F1B2D; --marino: #1F2A44; --amarillo: #FFC933; --borde: #D5E0E9; --suave: #475569; --ancho: 880px;
  --titulo: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif; --texto: "Plus Jakarta Sans", system-ui, "Segoe UI", Roboto, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--tinta); font-family: var(--texto); font-size: 1.125rem; line-height: 1.7; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: var(--marino); }
:focus-visible { outline: 3px solid var(--marino); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(100% - 2rem, var(--ancho)); margin-inline: auto; }
.barra { background: var(--amarillo); }
.barra__fila { flex-wrap: wrap; padding-block: .4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; width: min(100% - 2rem, 1680px); margin-inline: auto; }
.marca { font-family: var(--titulo); font-weight: 800; font-size: 1.4rem; text-decoration: none; color: var(--marino); letter-spacing: -.02em; }
.marca small { font-family: var(--texto); font-weight: 600; font-size: .8rem; margin-left: .4rem; }
.barra nav { display: flex; align-items: center; gap: 1.25rem; font-weight: 700; }
.barra nav a { text-decoration: none; color: var(--marino); }
.barra__cta { background: var(--marino); color: #fff !important; padding: .5rem 1rem; border-radius: 10px; }
.guia { padding-block: clamp(2rem, 6vw, 4.5rem); }
.guia__ruta { margin: 0 0 1rem; font-size: .95rem; }
h1, h2 { font-family: var(--titulo); letter-spacing: -.03em; color: var(--marino); text-wrap: balance; }
h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); line-height: 1.05; font-weight: 800; margin: 0 0 1rem; }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); line-height: 1.15; font-weight: 800; margin: 2.2rem 0 .5rem; }
.guia__bajada { font-size: 1.3rem; color: var(--suave); margin: 0 0 1.5rem; }
.guia p, .guia li { max-width: 46rem; }
.guia ul { padding-left: 1.25rem; }
.guia li { margin-bottom: .6rem; }
blockquote { margin: 1rem 0; padding: 1rem 1.25rem; background: #fff; border-left: 6px solid var(--amarillo); border-radius: 0 14px 14px 0; font-style: italic; max-width: 46rem; }
.guia__cta { margin-top: 3rem; padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--amarillo); border-radius: 24px; display: grid; gap: .6rem; justify-items: start; }
.guia__cta h2 { margin: 0; }
.guia__cta p { margin: 0; }
.boton { display: inline-flex; min-height: 48px; align-items: center; padding: .6rem 1.4rem; background: var(--marino); color: #fff; border-radius: 12px; font-weight: 700; text-decoration: none; }
.guia__otra { margin-top: 2rem; }
.guia__lista { list-style: none; padding: 0; display: grid; gap: 1rem; }
.guia__lista a { display: grid; gap: .3rem; padding: 1.3rem 1.5rem; background: #fff; border: 1px solid var(--borde); border-radius: 20px; text-decoration: none; }
.guia__lista a:hover { border-color: var(--marino); }
.guia__lista strong { font-family: var(--titulo); font-size: 1.35rem; color: var(--marino); }
.guia__lista span { color: var(--suave); font-size: 1rem; }
.pie { padding-block: 1.75rem; }
.pie__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.pie p { margin: 0; color: var(--suave); font-size: .95rem; }
@media (max-width: 480px) { .marca small { display: none; } .barra nav { gap: .75rem; } .barra__cta { padding: .45rem .8rem; } }