:root {
  --ink: #18313a;
  --blue: #1e4d8f;
  --blue-deep: #102f5f;
  --sea: #0c6d72;
  --gold: #aa7a25;
  --paper: #f7faf9;
  --mist: #e4eff0;
  --warm: #e9f2ee;
  --line: #c5d4d5;
  --white: #ffffff;
  --muted: #52666b;
  --danger: #9c3c35;
  --sans: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.58;
}

button,
input,
select,
textarea { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 10px;
  left: -999px;
  z-index: 20;
  padding: 10px 14px;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--blue);
}

.skip-link:focus { left: 10px; }

.site-header,
body .dashboard-header {
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 12px clamp(22px, 5vw, 82px);
  color: var(--ink);
  background: rgba(247, 250, 249, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
}

body .dashboard-header { justify-content: space-between; }

body .dashboard-header > div {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  text-decoration: none;
  white-space: nowrap;
}

.brand img {
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px var(--paper);
}

nav {
  display: flex;
  gap: 20px;
  margin-left: auto;
}

nav a,
.text-link,
.back-link,
.dashboard-profile-link {
  font-size: 14px;
  font-weight: 650;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

nav a { text-decoration: none; }

nav a:hover,
nav a:focus-visible,
.text-link:hover,
.text-link:focus-visible,
.back-link:hover,
.back-link:focus-visible {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.language {
  padding: 6px 2px;
  border: 0;
  color: var(--blue);
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.menu-toggle {
  display: none;
  padding: 8px 11px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 4px;
  cursor: pointer;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 17px;
  color: var(--white);
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 5px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
.button:focus-visible {
  color: var(--white);
  background: var(--blue-deep);
  border-color: var(--blue-deep);
}

.button-small {
  min-height: 38px;
  padding: 8px 13px;
  font-size: 14px;
}

.button-quiet {
  color: var(--blue);
  background: transparent;
  border-color: var(--blue);
}

.button-quiet:hover,
.button-quiet:focus-visible {
  color: var(--blue-deep);
  background: var(--mist);
  border-color: var(--blue-deep);
}

.button-light {
  color: var(--blue-deep);
  background: var(--white);
  border-color: var(--white);
}

.button-light:hover,
.button-light:focus-visible {
  color: var(--blue-deep);
  background: var(--mist);
  border-color: var(--mist);
}

.eyebrow,
.card-meta,
.tag {
  margin: 0 0 10px;
  color: var(--sea);
  font-size: 14px;
  font-weight: 720;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(310px, 0.82fr);
  gap: clamp(34px, 7vw, 106px);
  align-items: center;
  padding: clamp(58px, 9vw, 124px) clamp(22px, 8vw, 132px);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.hero-copy { max-width: 760px; }

.hero h1,
.section h2,
.join h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.hero h1 {
  max-width: 790px;
  font-size: clamp(47px, 6.2vw, 82px);
}

.lead {
  max-width: 645px;
  margin: 27px 0 31px;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-ronda {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 390px;
  overflow: hidden;
  padding: 31px;
  color: var(--white);
  background: var(--blue-deep);
  border: 1px solid var(--blue-deep);
  border-radius: 42% 8% 34% 8%;
}

.hero-ronda::before,
.hero-ronda::after {
  position: absolute;
  z-index: -1;
  content: "";
  border: 1px solid rgba(218, 237, 235, 0.55);
  border-radius: 50%;
}

.hero-ronda::before {
  width: 365px;
  height: 365px;
  top: -166px;
  right: -144px;
}

.hero-ronda::after {
  width: 215px;
  height: 215px;
  top: -83px;
  right: -69px;
}

.hero-ronda-mark {
  display: grid;
  width: 142px;
  height: 142px;
  place-items: center;
  margin-left: auto;
  padding: 14px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1);
}

.hero-ronda-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-ronda-copy {
  align-self: end;
  max-width: 385px;
}

.hero-ronda .eyebrow { color: #b9e4df; }

.hero-ronda h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(31px, 3.3vw, 45px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.hero-ronda p:not(.eyebrow) {
  max-width: 355px;
  margin: 13px 0 18px;
  color: #d9edeb;
}

.hero-ronda a {
  color: var(--white);
  font-weight: 750;
  text-underline-offset: 5px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 0 clamp(22px, 8vw, 132px);
  color: var(--white);
  background: var(--ink);
}

.metrics article {
  display: flex;
  gap: 12px;
  align-items: baseline;
  min-height: 112px;
  padding: 28px 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.metrics article:first-child { border-left: 0; }

.metrics strong {
  font-family: var(--serif);
  font-size: 45px;
  font-weight: 500;
  line-height: 1;
}

.metrics span { color: #d6e3e0; font-size: 14px; }

.section {
  padding: clamp(64px, 9vw, 118px) clamp(22px, 8vw, 132px);
}

.section-warm { background: var(--mist); }

.section-blue { color: var(--white); background: var(--blue-deep); }

.section-heading {
  display: flex;
  gap: 26px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 39px;
}

.section-heading h2 { font-size: clamp(38px, 4.5vw, 61px); }

.section-heading > a {
  color: var(--blue);
  font-weight: 750;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.section-blue .eyebrow,
.section-blue .section-heading > a { color: #b9e4df; }

.section-blue .section-heading > a { color: var(--white); }

.directory-placeholder {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  min-height: 290px;
  padding: clamp(28px, 5vw, 62px);
  background: var(--white);
  border: 1px solid var(--line);
  border-inline-start: 8px solid var(--sea);
}

.directory-placeholder h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(30px, 3.5vw, 45px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.directory-placeholder p { max-width: 560px; margin: 10px 0 0; color: var(--muted); }

.directory-placeholder p a { color: var(--blue); font-weight: 750; text-underline-offset: 4px; }

.map-mark {
  display: grid;
  width: 78px;
  height: 78px;
  place-items: center;
  color: var(--sea);
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 39px;
}

.cards { display: grid; gap: 18px; }

.three-columns { grid-template-columns: repeat(3, 1fr); }

.card {
  min-height: 190px;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px 12px 32px 12px;
}

.card h3 {
  margin: 0 0 13px;
  font-family: var(--serif);
  font-size: 29px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.07;
}

.card p { margin: 0; color: var(--muted); }

.event-card { border-top: 5px solid var(--sea); }

.event-card:nth-child(2) { border-top-color: var(--gold); }

.event-card:nth-child(3) { border-top-color: var(--blue); }

.project-feature {
  max-width: 1020px;
  padding: clamp(35px, 5vw, 75px);
  background: var(--sea);
  border-radius: 8px 58px 8px 8px;
}

.project-feature .tag { color: #c8efea; }

.project-feature h3 {
  max-width: 660px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(35px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.project-feature p:not(.tag) { max-width: 610px; color: #e0f2ef; font-size: 18px; }

.memory { background: #d9e7e6; }

.memory blockquote {
  max-width: 930px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(30px, 4.2vw, 54px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.caption { max-width: 650px; margin: 25px 0 0; color: var(--muted); }

.resource-card { border-top: 5px solid var(--gold); }

.resource-card:nth-child(2) { border-top-color: var(--sea); }

.resource-card:nth-child(3) { border-top-color: var(--blue); }

.join {
  display: flex;
  gap: 42px;
  align-items: end;
  justify-content: space-between;
  padding: clamp(60px, 8vw, 104px) clamp(22px, 8vw, 132px);
  background: var(--gold);
}

.join .eyebrow { color: var(--ink); }

.join h2 { max-width: 850px; font-size: clamp(36px, 4.6vw, 62px); }

.join-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  min-width: 210px;
}

.join .button { color: var(--white); background: var(--ink); border-color: var(--ink); }

.join .text-link { color: var(--ink); }

.site-footer {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(240px, 1.3fr) auto;
  gap: 30px;
  align-items: center;
  padding: 37px clamp(22px, 8vw, 132px);
  color: #d5e5e2;
  background: var(--ink);
}

.footer-brand { color: var(--white); font-size: 22px; }

.site-footer p { max-width: 510px; margin: 0; font-size: 13px; }

.footer-links,
.site-utility-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin: 0;
}

.footer-links a,
.footer-links button,
.site-utility-footer a,
.site-utility-footer button {
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.principado { width: 156px; height: auto; background: var(--white); }

.site-utility-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: space-between;
  padding: 24px clamp(22px, 6vw, 110px);
  color: #d5e5e2;
  background: var(--ink);
  font-size: 13px;
}

/* Shared screens loaded after this stylesheet use low-specificity selectors.
   The rules below deliberately define the cross-screen visual language. */
body .dashboard-main,
body .centers-main,
body .resources-main,
body .projects-main,
body .testimonials-main,
body .businesses-main,
body .claims-main,
body .profile-main,
body .legal-main,
body .business-access-main,
body .application-main {
  padding-top: clamp(54px, 8vw, 98px);
  padding-bottom: clamp(64px, 9vw, 116px);
}

body .dashboard-main h1,
body .centers-main h1,
body .resources-main h1,
body .projects-main h1,
body .testimonials-main h1,
body .businesses-main h1,
body .claims-main h1,
body .profile-main h1,
body .legal-main h1,
body .business-access-main h1,
body .application-main h1 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
}

body .dashboard-lead,
body .centers-lead,
body .resources-lead,
body .projects-lead,
body .testimonials-lead,
body .businesses-lead,
body .application-lead,
body .claims-lead,
body .business-access-lead {
  color: var(--muted);
  line-height: 1.6;
}

body .dashboard-grid article,
body .admin-card,
body .center-card,
body .business-card,
body .resource-card,
body .project-card,
body .testimonial-card,
body .managed-event,
body .claim-item,
body .profile-card,
body .access-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px 8px 24px 8px;
  box-shadow: none;
}

body .dashboard-grid article { border-top: 5px solid var(--sea); }
body .dashboard-grid article:nth-child(2) { border-top-color: var(--gold); }
body .dashboard-grid article:nth-child(3) { border-top-color: var(--blue); }
body .dashboard-grid article:nth-child(4) { border-top-color: var(--ink); }

body .admin-card { border-inline-start: 5px solid var(--sea); }
body .admin-card:nth-child(2n) { border-inline-start-color: var(--gold); }

body .pending-number { color: var(--sea); }
body .country-bar > div { background: #dce8e7; }
body .country-bar i { background: var(--sea); }

body .center-card,
body .business-card,
body .resource-card,
body .project-card,
body .testimonial-card,
body .managed-event { border-inline-start: 5px solid var(--blue); }

body .business-card,
body .project-card { border-inline-start-color: var(--sea); }
body .resource-card { border-inline-start-color: var(--gold); }
body .testimonial-card { border-inline-start-color: var(--blue-deep); }

body .cards .resource-card { border-top: 5px solid var(--gold); }
body .cards .resource-card:nth-child(2) { border-top-color: var(--sea); }
body .cards .resource-card:nth-child(3) { border-top-color: var(--blue); }

body .center-card h2,
body .business-card h2,
body .resource-card h2,
body .project-card h2,
body .testimonial-card h2,
body .managed-event h3,
body .admin-card h2 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.03em;
}

body .center-card p,
body .business-card p,
body .resource-card .resource-description,
body .project-card .project-description,
body .testimonial-description,
body .testimonial-content,
body .managed-event > p,
body .field-note { color: var(--muted); }

body .center-meta,
body .resource-card .resource-meta,
body .project-state,
body .testimonial-meta,
body .event-publication,
body .card-meta {
  color: var(--sea) !important;
  text-transform: none;
  letter-spacing: 0;
}

body .map-panel,
body .business-callout,
body .project-callout {
  background: var(--mist);
  border: 1px solid var(--line);
  border-inline-start: 6px solid var(--sea);
}

body .center-filters,
body .resource-filters,
body .testimonial-filters,
body .business-filters {
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 5px solid var(--sea);
  border-radius: 8px 8px 28px 8px;
}

body .center-filters label,
body .resource-filters label,
body .testimonial-filters label,
body .business-filters label,
body .application-form label,
body .claim-form label,
body .auth-form label {
  color: var(--ink);
  font-weight: 700;
}

body .center-filters input,
body .center-filters select,
body .resource-filters input,
body .resource-filters select,
body .testimonial-filters input,
body .testimonial-filters select,
body .business-filters input,
body .business-filters select,
body .application-form input,
body .application-form select,
body .application-form textarea,
body .claim-form input,
body .claim-form textarea,
body .auth-form input {
  min-height: 44px;
  padding: 10px 11px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #9fb4b7;
  border-radius: 4px;
}

body .auth-form .check,
body .application-form .check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 400;
  line-height: 1.5;
}

body .auth-form .check > span,
body .application-form .check > span { min-width: 0; }

body .auth-form .check input[type="checkbox"],
body .application-form .check input[type="checkbox"] {
  flex: 0 0 1.125rem;
  width: 1.125rem;
  min-width: 1.125rem;
  height: 1.125rem;
  min-height: 1.125rem;
  padding: 0;
  margin: 0.22em 0 0;
  accent-color: var(--blue);
}

body .application-form textarea,
body .claim-form textarea { min-height: 120px; }

body .application-form fieldset,
body .claim-form,
body .join-dialog .application-form,
body .auth-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-inline-start: 6px solid var(--sea);
  border-radius: 8px 8px 32px 8px;
  box-shadow: none;
}

body .application-form legend,
body .auth-panel h2,
body .claim-form h2,
body .join-dialog h2 {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.035em;
}

body .application-switch button {
  border-color: var(--line);
  border-radius: 4px;
}

body .application-switch button[aria-selected="true"] {
  background: var(--sea);
  border-color: var(--sea);
}

body .auth-backdrop,
body .join-dialog::backdrop,
body .claim-dialog::backdrop { background: rgba(16, 47, 95, 0.68); }

body .auth-tabs button[aria-selected="true"] { color: var(--sea); border-bottom-color: var(--sea); }

body .secondary-button { color: var(--blue) !important; background: var(--mist) !important; }

body .legal-callout,
body .no-managed-events,
body .empty-state,
body .resource-empty,
body .testimonial-empty {
  color: var(--muted);
  background: var(--mist);
  border: 1px solid var(--line);
  border-inline-start: 5px solid var(--sea);
}

body .dashboard-status,
body .resources-status,
body .projects-status,
body .testimonials-status { color: var(--danger); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-ronda { min-height: 335px; max-width: 620px; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .principado { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .site-header,
  body .dashboard-header { gap: 12px; padding-inline: 20px; }

  .site-header nav {
    position: absolute;
    top: 78px;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 12px 20px 18px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }

  .site-header nav a { padding: 10px 0; }
  .site-header nav.open { display: flex; }
  .menu-toggle { display: block; margin-left: auto; }
  .language { display: none; }
  .hero { gap: 38px; padding-block: 58px; }
  .metrics { grid-template-columns: 1fr; padding-inline: 22px; }
  .metrics article { min-height: auto; padding-inline: 0; border-top: 1px solid rgba(255, 255, 255, 0.28); border-left: 0; }
  .metrics article:first-child { border-top: 0; }
  .section-heading,
  .join { flex-direction: column; align-items: flex-start; }
  .three-columns { grid-template-columns: 1fr; }
  .directory-placeholder { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr; }
  body .dashboard-header { align-items: flex-start; flex-direction: column; }
  body .dashboard-header > div { width: 100%; justify-content: space-between; }
}

@media (max-width: 500px) {
  .brand { font-size: 23px; }
  .brand img { width: 36px; height: 36px; }
  .hero-ronda { min-height: 320px; padding: 25px; border-radius: 35% 8% 28% 8%; }
  .hero-ronda-mark { width: 112px; height: 112px; }
  .card { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}