:root {
  --ink: #173743;
  --muted: #5f7078;
  --green: #164e63;
  --green-dark: #0e3b4c;
  --mint: #dceee7;
  --mint-light: #edf7f3;
  --cream: #f5f7f8;
  --gold: #d99614;
  --red: #c94a4a;
  --accent-green: #2f7d5a;
  --line: #d9e1e5;
  --white: #fff;
  --shadow: 0 12px 32px rgba(22, 78, 99, .09);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: Inter, Arial, Helvetica, sans-serif; font-size: 17px; font-weight: 400; line-height: 1.5; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: var(--green); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 20; padding: .7rem 1rem; background: var(--ink); color: white; border-radius: 8px; }
.skip-link:focus { top: 1rem; }

.site-header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 5vw; background: rgba(245,247,248,.96); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); font-size: 1.15rem; font-weight: 700; text-decoration: none; }
.brand-mark { width: 32px; height: 32px; flex: 0 0 auto; }
.brand-mark img { display: block; width: 100%; height: 100%; }
.header-search { font-size: .9rem; font-weight: 700; text-underline-offset: 4px; }

.hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #f5f7f8, #e8f1f4); border-bottom: 1px solid var(--line); }
.hero-inner { width: min(880px, 90vw); margin: auto; padding: 4.5rem 0 4rem; text-align: center; }
.eyebrow { margin: 0 0 .65rem; color: var(--green); font-size: .76rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 780px; margin: 0 auto 1.15rem; font-size: clamp(2.4rem, 7vw, 4.7rem); font-weight: 700; line-height: 1.03; letter-spacing: -.045em; }
.hero-copy { max-width: 640px; margin: 0 auto 2rem; color: var(--muted); font-size: clamp(1rem, 2vw, 1.2rem); }
.primary-actions { display: grid; gap: .8rem; max-width: 650px; margin: auto; }
.route-button { min-height: 92px; display: flex; align-items: center; gap: 1rem; padding: 1.15rem; border: 0; border-radius: var(--radius); text-align: left; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.route-button:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.route-button strong, .route-button small { display: block; }
.route-button strong { font-size: 1.08rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.route-button small { margin-top: .2rem; opacity: .78; }
.route-need { background: var(--green); color: white; }
.route-give { background: var(--accent-green); color: white; }
.route-icon { flex: 0 0 auto; width: 45px; height: 45px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 1.4rem; }
.secondary-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem 2rem; margin-top: 1.6rem; }
.secondary-actions a, .secondary-actions button { border: 0; background: none; color: var(--green); font-size: .85rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-transform: uppercase; cursor: pointer; }

.finder { width: min(1160px, 90vw); margin: auto; padding: 4rem 0 5rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
h2 { margin-bottom: 0; font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; }
.clear-button { padding: .5rem 0; border: 0; background: none; color: var(--green); font-size: .85rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
.filters { padding: 1.25rem; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.field label, .intent-control legend { display: block; margin-bottom: .45rem; font-size: .8rem; font-weight: 600; }
.search-control { display: flex; align-items: center; border: 1px solid #a9bbb4; border-radius: 11px; background: white; }
.search-control span { padding-left: .9rem; color: var(--muted); font-size: 1.4rem; }
.search-control input { width: 100%; padding: .85rem; border: 0; outline: 0; background: transparent; }
.intent-control { margin: 1rem 0; padding: 0; border: 0; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #a9bbb4; border-radius: 11px; overflow: hidden; }
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; }
.segmented span { min-height: 44px; display: grid; place-items: center; padding: .55rem .4rem; text-align: center; font-size: .82rem; font-weight: 600; border-right: 1px solid #a9bbb4; }
.segmented label:last-child span { border: 0; }
.segmented input:checked + span { background: var(--green); color: white; }
.segmented input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: -3px; }
.filter-grid { display: grid; gap: .8rem; }
select { width: 100%; min-height: 46px; padding: .65rem .75rem; color: var(--ink); background: white; border: 1px solid #a9bbb4; border-radius: 10px; }
select:disabled { background: #f0f2f1; color: #84908c; }
.results-header { margin: 2rem 0 1rem; }
.results-header p { margin-bottom: .2rem; }
#resumen-resultados { font-weight: 600; }
.order-note { color: var(--muted); font-size: .82rem; }
.resource-grid { display: grid; gap: 1rem; }
.resource-card { display: flex; flex-direction: column; padding: 1.3rem; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 4px 14px rgba(24,51,44,.035); }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.type-tag { display: inline-block; margin-bottom: .75rem; padding: .28rem .55rem; color: var(--accent-green); background: var(--mint-light); border-radius: 5px; font-size: .68rem; font-weight: 600; letter-spacing: .045em; text-transform: uppercase; }
.type-atencion-medica, .type-apoyo-psicologico, .type-medicamentos { color: #9d3030; background: #fbeaea; }
.type-atencion-veterinaria { color: var(--accent-green); background: var(--mint-light); }
.type-transporte { color: #79520a; background: #fff3d3; }
.scope-badge { flex: 0 0 auto; padding: .25rem .5rem; color: #79520a; background: #fff3d3; border-radius: 999px; font-size: .7rem; font-weight: 600; }
.resource-card h3 { margin-bottom: .55rem; font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.description { color: var(--muted); font-size: .92rem; }
.resource-meta { display: grid; gap: .38rem; margin: auto 0 1rem; padding: .85rem 0; border-top: 1px solid var(--line); font-size: .78rem; }
.resource-meta p { margin: 0; }
.resource-meta strong { color: var(--ink); }
.resource-meta span { color: var(--muted); }
.resource-link { display: block; padding: .78rem 1rem; color: white; background: var(--green); border-radius: 9px; font-size: .78rem; font-weight: 600; text-align: center; text-decoration: none; letter-spacing: .05em; }
.resource-link:hover { background: var(--green-dark); }
.empty-state { padding: 3rem 1rem; background: white; border: 1px dashed #a9bbb4; border-radius: var(--radius); text-align: center; }
.empty-state > span { display: block; font-size: 2rem; }
.empty-state h3 { margin: .5rem 0; }
.empty-state p { color: var(--muted); }
.empty-state button, .guidance a { display: inline-block; padding: .7rem 1rem; border: 0; border-radius: 8px; background: var(--green); color: white; font-weight: 700; text-decoration: none; cursor: pointer; }
.guidance { position: relative; width: min(800px, 90vw); margin: 0 auto 5rem; padding: 2rem; background: var(--mint); border-radius: var(--radius); }
.guidance h2 { margin-bottom: 1rem; }
.guidance-close { position: absolute; top: .8rem; right: .8rem; width: 36px; height: 36px; border: 0; background: transparent; font-size: 1.7rem; cursor: pointer; }

.submit-resource { display: grid; justify-items: center; gap: .8rem; padding: 2.2rem 5vw; color: var(--ink); background: var(--mint); text-align: center; }
.submit-resource p { margin: 0; font-size: clamp(1.25rem, 3vw, 1.65rem); font-weight: 600; }
.submit-resource a { display: inline-block; padding: .75rem 1rem; color: white; background: var(--green); border-radius: 9px; font-size: .9rem; font-weight: 700; text-decoration: none; }
.submit-resource a:hover { background: var(--green-dark); }
footer { display: grid; gap: 1.5rem; padding: 2.5rem 5vw; color: #cbdad5; background: var(--green-dark); font-size: .82rem; }
footer p { margin-bottom: .3rem; }
footer a { color: white; }
.footer-brand { color: white; font-size: 1.25rem; font-weight: 700; }
.disclaimer { max-width: 680px; font-size: .902rem; font-weight: 400; }

@media (min-width: 680px) {
  .primary-actions { grid-template-columns: 1fr 1fr; }
  .filter-grid { grid-template-columns: repeat(2, 1fr); }
  .resource-grid { grid-template-columns: repeat(2, 1fr); }
  footer { grid-template-columns: .8fr 1.2fr; align-items: start; }
}
@media (min-width: 960px) {
  .hero-inner { padding: 6rem 0 5.5rem; }
  .filters { padding: 1.5rem; }
  .filter-grid { grid-template-columns: repeat(4, 1fr); }
  .resource-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }