body { margin:0; background:#F8FAFC; font-family:'Lato','Helvetica Neue',Arial,sans-serif; color:#111111; }

a { color:#1B6B61; text-decoration:none; }

a:hover { color:#217E72; text-decoration:underline; }

/* Footer — misma estructura y espaciado que el del blog (.foot + .wrap). */
  .foot { background:#FFFFFF; border-top:1px solid #E2E8F0; padding:32px 0; font-size:13px; color:#64748B; }

.foot .wrap { max-width:1200px; margin:0 auto; padding:0 40px; box-sizing:border-box; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }

.nav-wrap { position: sticky; top: 0; z-index: 50; width:100%; background:#111111; }

.nav { display:flex; align-items:center; justify-content:space-between; height:72px; padding:0 40px; }

.nav-links { display:flex; align-items:center; gap:24px; }

.nav-links a { font-family:'Montserrat',sans-serif; font-weight:600; font-size:14px; color:#FFFFFF; }

.nav-links a.btn { display:inline-flex; align-items:center; height:44px; padding:0 20px; border-radius:4px; font-size:15px; }

.legal-h1 { margin:12px 0 0; font-family:'Montserrat',sans-serif; font-weight:800; font-size:40px; color:#111111; }

.section--head { padding:64px 40px 40px; }

.section--body { padding:40px 40px 96px; }

a:focus-visible, summary:focus-visible, button:focus-visible, input:focus-visible, .tablewrap:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(42,157,143,.45); border-radius: 4px;
  }

/* Salto al contenido — mismo componente que la landing: fuera de pantalla
     hasta que recibe el foco con el teclado. */
  .skip-link { position:absolute; left:-9999px; top:8px; }

.skip-link:focus {
    position:fixed; left:8px; top:8px; z-index:70; background:#FFFFFF; color:#111111;
    padding:10px 16px; border-radius:4px; font-family:'Montserrat',sans-serif;
    font-weight:600; font-size:14px; text-decoration:none;
    box-shadow:0 0 0 3px rgba(42,157,143,.45);
  }

/* Menú mobile — <details>/<summary aria-label="Abrir menú"> nativo, igual que la landing. */
  .nav-mobile { display: none; }

.nav-mobile-panel {
    display: flex; flex-direction: column; background: #111111;
    position: fixed; top: 72px; left: 0; right: 0; z-index: 60;
    max-height: calc(100vh - 72px); overflow-y: auto;
  }

.nav-mobile-panel a {
    display: flex; align-items: center; min-height: 44px; padding: 12px 24px;
    font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 15px;
    color: #FFFFFF; border-top: 1px solid rgba(255,255,255,0.1);
  }

.nav-mobile-panel a.btn {
    margin: 12px 24px 16px; border-top: none; justify-content: center;
    min-height: 44px; border-radius: 4px; padding: 0 20px;
  }

/* CTA del nav — secundario (fondo blanco, tinta, sin borde): el teal fuerte
     queda para UN solo elemento por pantalla, la regla del acento único. */
  .nav-cta { background: #FFFFFF; }

/* El color va con el mismo peso de selector que .nav-links a /
     .nav-mobile-panel a, que ponen blanco: con .nav-cta a secas el texto
     quedaba blanco sobre blanco. */
  .nav-links a.nav-cta, .nav-mobile-panel a.nav-cta { color: #111111; }

.nav-links a.nav-cta:hover, .nav-mobile-panel a.nav-cta:hover { background: #F1F5F9; color: #111111; }

@media (max-width: 768px) {
    * { box-sizing: border-box; }
    .nav { padding: 0 24px; height: 60px; }
    .nav-links { display: none; }
    .nav-mobile { display: block; }
    .nav-mobile-panel { top: 60px; max-height: calc(100vh - 60px); }
    .section, .section--head, .section--body { padding: 48px 24px; }
    .foot .wrap { padding: 0 24px; }
    .legal-h1 { font-size: 32px; }
  }

/* Enlaces dentro de un párrafo de prosa: subrayado por defecto, no
     solo por color (WCAG — auditoría link-in-text-block de Lighthouse).
     La nav, el footer y los botones no usan <p>, no los afecta. */
  p a { text-decoration: underline; }

/* Patrón full-bleed: mismo criterio que la landing — .section/.nav
     son el contenedor interno centrado (max 1200px). */
  .section, .nav { max-width:1200px; margin:0 auto; box-sizing:border-box; }