:root {
  --forest-900: #123c32;
  --forest-700: #245c4b;
  --sage-300: #b8c7a5;
  --cream-100: #fbf7ef;
  --sand-200: #e3d2ae;
  --ink-900: #17332c;
  --ink-600: #536b64;
  --surface: #fffdf8;
  --focus: #176bce;
  --radius-sm: 0.75rem;
  --radius-lg: 2rem;
  --shadow-soft: 0 1.5rem 4rem rgb(18 60 50 / 12%);
  --content: 74rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 0;
  color: var(--ink-900);
  background:
    radial-gradient(circle at 8% 8%, rgb(184 199 165 / 28%), transparent 24rem),
    var(--cream-100);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
a, button, input { touch-action: manipulation; -webkit-tap-highlight-color: rgb(184 199 165 / 45%); }

.skip-link {
  position: fixed;
  z-index: 10;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-sm);
  color: var(--surface);
  background: var(--forest-900);
  font-weight: 750;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.shell { width: min(calc(100% - 2rem), var(--content)); margin-inline: auto; }
.brand-stage {
  display: grid;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: 0.4rem 1rem;
  place-items: center;
  background:
    radial-gradient(ellipse 34rem 17rem at center, rgb(255 253 248 / 22%), rgb(227 210 174 / 9%) 44%, transparent 74%),
    var(--forest-900);
}
.brand { display: flex; align-items: center; border-radius: 50%; text-decoration: none; }
.brand img { width: min(92vw, 30rem); height: auto; }

.hero { display: grid; gap: 1rem; align-items: start; padding: 1.35rem 0 4rem; }
.hero > div, .hero figure { min-width: 0; }
.hero-copy { min-width: 0; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  color: var(--forest-700);
  background: rgb(184 199 165 / 34%);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-note { margin: 0; color: var(--forest-700); font-size: 0.88rem; font-weight: 700; }
h1, h2, h3 { color: var(--forest-900); line-height: 1.08; text-wrap: balance; }
h1 { max-width: 14ch; margin: 0.4rem 0 0.5rem; font-family: Georgia, serif; font-size: clamp(2.15rem, 10.5vw, 2.75rem); font-weight: 500; letter-spacing: -0.045em; }
h2 { margin: 0.8rem 0; font-family: Georgia, serif; font-size: clamp(2rem, 8vw, 3.6rem); font-weight: 500; letter-spacing: -0.035em; }
.lead, .section-head > p:not(.eyebrow), .mission p { max-width: 68ch; color: var(--ink-600); font-size: 1.06rem; }

.hero .lead { margin: 0 0 0.85rem; font-size: 1rem; line-height: 1.45; }
.hero-signup__trigger {
  display: inline-flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--forest-900);
  border-radius: 999px;
  color: var(--surface);
  background: var(--forest-900);
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
}
.hero-signup__trigger:hover { background: var(--forest-700); }
.hero-signup__trigger:active { background: var(--forest-900); transform: translateY(1px); }
.hero-trust { margin: 0.5rem 0 0; color: var(--ink-600); font-size: 0.82rem; text-align: center; }

.sticky-signup {
  position: fixed;
  z-index: 9;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  width: min(100%, 40rem);
  margin-inline: auto;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  border: 1px solid rgb(18 60 50 / 16%);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface);
  box-shadow: 0 -0.5rem 2rem rgb(18 60 50 / 14%);
}
.sticky-signup[hidden] { display: none; }
.sticky-signup > span { font-size: 0.9rem; font-weight: 750; line-height: 1.25; }
.sticky-signup a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  color: var(--surface);
  background: var(--forest-900);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.sticky-signup a:hover { background: var(--forest-700); }
.sticky-signup-visible body { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }

.signup-dialog {
  position: static;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 4.5rem 0;
  border: 0;
  background: transparent;
}
.signup-dialog-fallback .signup-dialog { position: static; }
.signup-dialog-enhanced .signup-dialog {
  position: fixed;
  inset: 0;
  height: 100%;
  padding: 0;
}
.signup-dialog-enhanced .signup-dialog[open] { display: flex; }
.signup-dialog::backdrop { background: rgb(18 60 50 / 72%); }
.signup-dialog__panel {
  width: 100%;
  max-width: 36rem;
  margin-inline: auto;
  padding: clamp(1.25rem, 5vw, 2.5rem);
  color: var(--ink-900);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overscroll-behavior: contain;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 160ms ease, transform 160ms ease;
}
@starting-style {
  .signup-dialog-enhanced .signup-dialog[open] .signup-dialog__panel {
    opacity: 0;
    transform: translateY(1rem);
  }
}
.signup-dialog__panel > h2 { margin-top: 0.65rem; }
.signup-dialog__panel > p:not(.hero-note) { color: var(--ink-600); }
.signup-dialog__close {
  display: none;
  position: sticky;
  z-index: 1;
  top: 0;
  width: 44px;
  min-height: 44px;
  margin: 0 0 0 auto;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(18 60 50 / 20%);
  border-radius: 50%;
  color: var(--forest-900);
  background: var(--surface);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.signup-dialog-enhanced .signup-dialog__close { display: grid; }

.signup-embed {
  width: 100%;
  max-width: 34rem;
  margin-top: 1.5rem;
  overflow: hidden;
  border: 1px solid rgb(18 60 50 / 14%);
  border-radius: var(--radius-sm);
  background: #fff;
}
.signup-embed iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 305px;
  border: 0;
  background: #fff;
}
.form-help, .form-message, .demo-note { max-width: 68ch; margin: 0.5rem 0 0; color: var(--ink-600); font-size: 0.82rem; }
.form-help a { display: inline-flex; min-height: 44px; align-items: center; }

.photo-card { position: relative; width: min(100%, 32rem); margin: 0.25rem auto 0; overflow: hidden; border: 0.65rem solid var(--surface); border-radius: 48% 48% 18% 18% / 30% 30% 12% 12%; background: var(--sage-300); box-shadow: var(--shadow-soft); }
.photo-card img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.photo-card::after { position: absolute; inset: 45% 0 0; content: ""; background: linear-gradient(transparent, rgb(18 60 50 / 65%)); pointer-events: none; }
.caption { position: absolute; z-index: 1; right: 1rem; bottom: 1.5rem; left: 1rem; color: var(--surface); text-align: center; }
.caption strong, .caption span { display: block; }
.caption strong { font-family: Georgia, serif; font-size: 1.45rem; }

.section { padding: 3.5rem 0; }
.section-head { max-width: 48rem; margin: 0 auto 1.5rem; text-align: center; }
.section-head > p:not(.eyebrow) { margin-inline: auto; }
.route-list { max-width: 48rem; margin: 0 auto; padding: 0; list-style: none; }
.route-item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.75rem; padding: 1.25rem 0; border-top: 1px solid rgb(18 60 50 / 18%); }
.route-item:last-child { border-bottom: 1px solid rgb(18 60 50 / 18%); }
.route-item > span { color: var(--forest-700); font-size: 0.78rem; font-weight: 850; letter-spacing: 0.1em; }
.route-item h3 { margin: 0 0 0.35rem; font-family: Georgia, serif; font-size: 1.45rem; }
.route-item p { max-width: 68ch; margin: 0; color: var(--ink-600); }
:is(#contenido, #mision, #comunidad) { scroll-margin-top: 1rem; }
.mission { margin-bottom: 0; padding: clamp(1.5rem, 6vw, 2.5rem); border-radius: var(--radius-lg); color: var(--surface); background: var(--forest-900); box-shadow: var(--shadow-soft); }
.mission h2 { color: var(--surface); }
.mission > p:not(.eyebrow) { margin: 0.75rem 0 0; color: rgb(255 253 248 / 78%); }
.mission .veterinary-note { max-width: 62rem; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / 25%); color: var(--surface); }
.mission-eyebrow { color: var(--surface); background: rgb(255 255 255 / 10%); }
.social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.social-links a { display: inline-flex; min-height: 44px; align-items: center; padding: 0.65rem 1rem; border-radius: 999px; font-weight: 800; }
.community .social-links { margin-top: 1.5rem; }
.community .social-links a { color: var(--surface); background: var(--forest-900); text-decoration: none; }
.social-links a:hover { color: var(--surface); background: var(--forest-700); }
.social-links a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
footer { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; padding: 2rem 0; border-top: 1px solid rgb(18 60 50 / 12%); color: var(--ink-600); text-align: center; }
footer > a { display: inline-flex; min-height: 44px; align-items: center; }

@media (min-width: 36rem) {
  .signup-dialog-enhanced .signup-dialog { align-items: center; justify-content: center; padding: 2rem; }
  .signup-dialog__panel { border-radius: var(--radius-lg); }
  footer { flex-direction: row; text-align: left; }
}

@media (min-width: 56rem) {
  .brand img { width: 30rem; }
  .hero { min-height: calc(100vh - 31rem); grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr); gap: clamp(3rem, 6vw, 5.5rem); align-items: start; padding: 2rem 0 4rem; }
  .hero h1 { margin-top: 0.65rem; font-size: clamp(3.5rem, 5vw, 4.5rem); }
  .hero .lead { font-size: 1.06rem; }
  .hero-signup__trigger { width: auto; }
  .hero-trust { text-align: left; }
}

@media (max-width: 35.99rem) {
  .signup-dialog-enhanced .signup-dialog { align-items: flex-end; }
  .signup-dialog-enhanced .signup-dialog__panel {
    max-height: min(90dvh, 48rem);
    padding-bottom: calc(clamp(1.25rem, 5vw, 2.5rem) + env(safe-area-inset-bottom));
    overflow-y: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .signup-embed iframe { min-height: min(28rem, 56dvh); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}