/* ============================================================
   Mejoras jubilacion2027.com (web-mejorada) — v6
   PUNTO MEDIO (receta GPT-5.6 Luna, 29/08/2026):
   - Filas: Tuscan Sun #f9c74f al 32% (presencia sin estridencia)
   - Hover: #f9c74f al 45%
   - Cabecera navy #1F3864 + borde dorado #B08D57 3px
   - Texto celdas #243447 · Fuente: Inter
   ============================================================ */

:root {
  --navy: #1F3864;
  --gold: #B08D57;
  --orange: #F8961E;
  --row-bg: rgba(249, 199, 79, 0.32);   /* filas alternas: punto medio */
  --row-hover: rgba(249, 199, 79, 0.45); /* hover: un paso más presente */
  --beige-border: #E2D8C8;
  --cell-ink: #243447;                  /* texto de celdas */
  --icon-bg: #F3E8D5;
  --icon-hover: rgba(249, 199, 79, 0.4);
  --note-bg: rgba(67, 170, 139, 0.32);  /* aviso informativo */
  --note-ink: #163B3B;
  --warn-bg: rgba(248, 150, 30, 0.32);  /* aviso advertencia */
  --warn-ink: #5A3300;
  --captcha-bg: #F3F1EB;
  --captcha-border: #C9C4B9;
  /* Fuente Inter en toda la web (petición de César) */
  --font-display: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Accesibilidad ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--navy);
  color: #fff;
  padding: .7rem 1.2rem;
  border-radius: 0 0 8px 0;
  font-family: 'Inter', -apple-system, sans-serif;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

.updated-note {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: .85rem;
  color: #565F6B;
  margin: -.4rem 0 1.4rem;
}
.updated-note strong {
  color: var(--navy);
}

/* ---------- Cabeceras de pestaña (dorado marca) ---------- */
.panel-eyebrow {
  color: var(--gold);
}
.panel-eyebrow::before {
  background: var(--gold);
}
.prose .sec-h1 {
  border-bottom: 2px solid rgba(176, 141, 87, .45);
}

/* ---------- 1) Tablas: punto medio ---------- */
.table-wrap {
  border: 1px solid var(--beige-border);
}
th {
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  border-bottom: 3px solid var(--gold);
}
tr:nth-child(even) td {
  background: var(--row-bg);
}
tr:hover td {
  background: var(--row-hover);
}
td {
  border-top: 1px solid var(--beige-border);
  color: var(--cell-ink);
}

/* ---------- 2) Menú de pestañas SIN scroll horizontal ---------- */
.tabbar-wrap {
  overflow-x: visible;
  scrollbar-width: none;
}
.tabbar {
  flex-wrap: wrap;
  min-width: 0;
}

/* ---------- 3) Botón Contactar (dorado marca) ---------- */
.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15.5px;
  font-weight: 800;
  color: #fff;
  background: var(--gold);
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 999px;
  transition: filter .15s, transform .15s;
  white-space: nowrap;
  box-shadow: 0 4px 12px -4px rgba(176, 141, 87, .55);
}
.contact-link:hover {
  filter: brightness(.92);
  transform: translateY(-1px);
  color: #fff;
}

/* ---------- 4) Formulario al final, en flujo normal ---------- */
.layout {
  grid-template-columns: 1fr;
}
.sidebar {
  position: static;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Tarjeta de contacto */
.contact-card h2 {
  color: var(--navy);
}
.contact-icon {
  background: var(--icon-bg);
  color: var(--navy);
}
.contact-list li:hover .contact-icon {
  background: var(--icon-hover);
  color: var(--navy);
}

/* Formulario: título grande y claro */
.contact-form h2 {
  font-size: 26px;
  color: var(--navy);
  border-bottom: 3px solid var(--gold);
  padding-bottom: 8px;
  display: inline-block;
  margin-bottom: 6px;
}
.form-sub strong {
  color: var(--gold);
}

/* Campos con foco dorado */
.field input:focus,
.field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, .3);
}
.captcha-q {
  background: var(--captcha-bg);
  border-color: var(--captcha-border);
  color: #23262B;
}

/* Botón de envío (navy, acción principal) */
.btn-submit {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(31, 56, 100, .4);
}
.btn-submit:hover {
  background: #152647;
}
.btn-submit:disabled {
  filter: grayscale(.4);
}

/* Mensajes del formulario */
.form-msg.ok {
  background: var(--note-bg);
  color: var(--note-ink);
  border: 2px solid #4D908E;
}
.form-msg.err {
  background: var(--warn-bg);
  color: var(--warn-ink);
  border: 2px solid var(--orange);
}

/* ---------- Avisos ---------- */
.notebox {
  background: var(--note-bg);
  border-left: 4px solid #4D908E;
  color: var(--note-ink);
}
.warnbox {
  background: var(--warn-bg);
  border-left: 4px solid var(--orange);
  color: var(--warn-ink);
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .header-inner {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .top-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 900px) {
  .tabbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .tab-btn {
    justify-content: flex-start;
  }
}

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