/* AYNI Educación Canina · versión autónoma para Hostinger */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;1,500&family=Inter:wght@400;500;600;650;700&display=swap");

@utility scrollbar-thin {
  scrollbar-width: thin;
}

@utility scrollbar-none {
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

@utility scrollbar-gutter-stable {
  scrollbar-gutter: stable;
}

:root {
  --background: #ffffff;
  --foreground: #171717;
  --card: #ffffff;
  --card-foreground: #171717;
  --popover: #ffffff;
  --popover-foreground: #171717;
  --primary: #171717;
  --primary-foreground: #fafafa;
  --secondary: #f5f5f5;
  --secondary-foreground: #171717;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --accent: #f5f5f5;
  --accent-foreground: #171717;
  --destructive: #e7000b;
  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: #a1a1a1;
  --chart-1: #f54900;
  --chart-2: #009689;
  --chart-3: #104e64;
  --chart-4: #ffb900;
  --chart-5: #fe9a00;
  --radius: 0.625rem;
  --sidebar: #fafafa;
  --sidebar-foreground: #171717;
  --sidebar-primary: #171717;
  --sidebar-primary-foreground: #fafafa;
  --sidebar-accent: #f5f5f5;
  --sidebar-accent-foreground: #171717;
  --sidebar-border: #e5e5e5;
  --sidebar-ring: #a1a1a1;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --font-sans: Arial, Helvetica, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #111513;
    --foreground: #f3eee6;
    --card: #1d211f;
    --card-foreground: #ededed;
    --popover: #1d211f;
    --popover-foreground: #ededed;
    --primary: #bd9159;
    --primary-foreground: #151816;
    --secondary: #2b2f2c;
    --secondary-foreground: #ededed;
    --muted: #2b2f2c;
    --muted-foreground: #aaa39a;
    --accent: #3a342c;
    --accent-foreground: #ededed;
    --destructive: #ff6467;
    --border: #ffffff1a;
    --input: #ffffff26;
    --ring: #737373;
    --chart-1: #8e51ff;
    --chart-2: #00bc7d;
    --chart-3: #fe9a00;
    --chart-4: #ad46ff;
    --chart-5: #ff2056;
    --sidebar: #171717;
    --sidebar-foreground: #ededed;
    --sidebar-primary: #8e51ff;
    --sidebar-primary-foreground: #ededed;
    --sidebar-accent: #262626;
    --sidebar-accent-foreground: #ededed;
    --sidebar-border: #ffffff1a;
    --sidebar-ring: #737373;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

/* AYNI design system */
:root {
  --green: #202723;
  --green-deep: #101513;
  --green-soft: #39423d;
  --cream: #ffffff;
  --paper: #f3f5f3;
  --sand: #e6eae7;
  --ink: #18201d;
  --earth: #b9793e;
  --earth-deep: #87572d;
  --line: rgba(24, 32, 29, .14);
  --white-line: rgba(255, 255, 255, .18);
  --background: #f3f5f3;
  --foreground: #18201d;
  --card: #ffffff;
  --card-foreground: #18201d;
  --popover: #ffffff;
  --popover-foreground: #18201d;
  --primary: #202723;
  --primary-foreground: #ffffff;
  --secondary: #e6eae7;
  --secondary-foreground: #18201d;
  --muted: #e9ecea;
  --muted-foreground: #68716c;
  --accent: #eee2d5;
  --accent-foreground: #18201d;
  --border: #d5dbd7;
  --input: #cbd2ce;
  --ring: #b9793e;
  --radius: .5rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 204px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, Arial, sans-serif; font-size: 16px; font-weight: 400; overflow-x: hidden; }
a, button, input, textarea { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--earth); outline-offset: 3px; }
img { max-width: 100%; }

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
input, select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; color: var(--ink); }
textarea { resize: vertical; }
.choice-grid { display: grid; }
.dialog-shell { width: min(720px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); padding: 0; border: 0; border-radius: 14px; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 30px 90px rgba(0,0,0,.38); }
.dialog-shell::backdrop { background: rgba(7, 10, 8, .78); backdrop-filter: blur(5px); }
.dialog-close { position: sticky; z-index: 4; top: 13px; float: right; width: 38px; height: 38px; margin: 12px 12px -50px 0; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(9,13,11,.35); color: #fff; font-size: 1.35rem; line-height: 1; }
.dialog-title { margin: 9px 0 8px; color: #fff; font-size: 1.85rem; }
.dialog-description { margin: 0; color: rgba(255,255,255,.7); font-size: .84rem; line-height: 1.6; }
.radio-input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--earth); }
.choice-card:has(input:checked), .animal-choice label:has(input:checked) { border-color: var(--earth); box-shadow: 0 0 0 1px var(--earth); }
.form-status:empty { display: none; }
.form-status.success { border-color: #548d69; color: #245e39; background: #e5f2e9; }
.photo-preview[hidden] { display: none; }
.aid-tabs { display: flex; }
.aid-tabs button { min-height: 40px; padding: 8px 15px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: rgba(255,255,255,.66); background: transparent; font-size: .78rem; }
.aid-tabs button.active { color: var(--green); background: var(--cream); border-color: var(--cream); }
.aid-tabs button span { display: inline-block; min-width: 22px; padding: 2px 6px; margin-left: 4px; border-radius: 99px; background: rgba(255,255,255,.13); font-size: .65rem; }
.aid-tabs button.active span { background: rgba(16,37,29,.12); }
.life-tabs button { width: auto; }
.aid-publish, .submit-post, .submit-story { border: 0; }
.aid-empty button { width: auto; padding: 12px 18px; border: 0; }
.loading-note { grid-column: 1 / -1; color: rgba(255,255,255,.65); }
.animal-icon { font-size: 1.5rem; }
.animal-meta span { gap: 8px; }
.photo-field input[type="file"] { padding: 9px; }
.story-dialog-head, .aid-dialog-head { padding-right: 64px; }

/* Real mountain photography by Manvendra Pandey, used under the Unsplash License. */
.nav { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 204px; padding: 0 clamp(22px, 3.8vw, 62px); display: flex; align-items: center; justify-content: space-between; background-image: linear-gradient(90deg, rgba(14, 17, 15, .93), rgba(28, 31, 28, .80), rgba(14, 17, 15, .92)), url("/assets/forest-mountains-real.jpg"); background-position: center, 50% 68%; background-size: cover, 112% auto; border-bottom: 1px solid rgba(230, 202, 145, .28); box-shadow: 0 10px 38px rgba(12, 13, 12, .16); backdrop-filter: blur(12px); transition: background-image .3s ease, box-shadow .3s ease; animation: forest-drift 28s ease-in-out infinite alternate; }
.nav.scrolled { background-image: linear-gradient(90deg, rgba(14, 17, 15, .98), rgba(28, 31, 28, .93), rgba(14, 17, 15, .98)), url("/assets/forest-mountains-real.jpg"); box-shadow: 0 12px 42px rgba(12, 13, 12, .3); }
@keyframes forest-drift { from { background-position: center, 47% 64%; } to { background-position: center, 54% 72%; } }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; color: #fff; text-decoration: none; overflow: visible; }
.brand-logo { display: block; width: 230px; height: auto; flex: 0 0 auto; object-fit: contain; mix-blend-mode: screen; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .32)); }
.brand-symbol { display: block; width: 106px; height: 106px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 8px 17px rgba(0, 0, 0, .28)); }
.brand-lockup { display: flex; flex-direction: column; justify-content: center; min-width: 190px; color: #fff; line-height: 1; text-shadow: 0 2px 12px rgba(0, 0, 0, .32); }
.brand-lockup strong { font-family: "Cormorant Garamond", Georgia, serif; font-size: 2.72rem; font-weight: 500; letter-spacing: .19em; line-height: .82; }
.brand-lockup small { margin-top: 11px; font-size: .61rem; font-weight: 600; letter-spacing: .3em; white-space: nowrap; }
.nav nav { display: flex; align-items: center; gap: clamp(15px, 1.75vw, 28px); }
.nav nav a { position: relative; color: #fff; text-decoration: none; font-size: .66rem; font-weight: 500; letter-spacing: .15em; white-space: nowrap; }
.nav nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: var(--earth); transition: right .25s ease; }
.nav nav a:hover::after { right: 0; }
.nav-cta { padding: 12px 15px; border: 1px solid rgba(255, 255, 255, .38); transition: background .25s, color .25s; }
.nav-cta:hover { background: var(--cream); color: var(--green); }
.menu { display: none; width: 42px; height: 42px; border: 0; background: transparent; color: white; cursor: pointer; padding: 9px; }
.menu span { display: block; height: 1px; background: currentColor; margin: 6px 0; transition: transform .25s, opacity .25s; }

.page-rail { position: fixed; z-index: 45; left: 20px; top: 228px; bottom: 32px; width: 1px; background: rgba(199, 163, 100, .22); pointer-events: none; }
.page-rail span { position: absolute; top: 0; left: 0; width: 1px; background: linear-gradient(var(--earth), #e3ca96); transition: height .12s linear; }
.page-rail i { position: absolute; left: 50%; width: 9px; height: 9px; border: 1px solid #e3ca96; background: var(--green-deep); transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 0 4px rgba(199, 163, 100, .08); transition: top .12s linear; }

.hero { position: relative; min-height: 790px; height: 100svh; display: flex; align-items: center; padding: 216px 8vw 96px; color: white; background: url("/assets/baco-rio.jpg") 72% center / cover no-repeat; isolation: isolate; }
.hero-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(13, 15, 14, .98) 0%, rgba(18, 20, 18, .91) 30%, rgba(20, 21, 19, .58) 52%, rgba(20, 21, 19, .12) 78%), linear-gradient(0deg, rgba(13, 15, 14, .78), transparent 48%); }
.hero-copy { max-width: 760px; }
.eyebrow, .section-tag { margin: 0; font-size: .69rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; }
.eyebrow { color: rgba(255, 255, 255, .72); }
.hero h1 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: clamp(4rem, 7.2vw, 7.3rem); line-height: .82; letter-spacing: -.035em; margin: 28px 0 34px; }
.method h2, .section h2, .real-life h2 { font-family: Inter, Arial, sans-serif; font-weight: 650; font-size: clamp(2.55rem, 4vw, 4.2rem); line-height: 1.02; letter-spacing: -.045em; margin: 22px 0 28px; }
h1 em { font-weight: 500; }
h2 em { color: var(--earth); font-style: normal; font-weight: inherit; }
.hero-text { max-width: 620px; margin: 0; color: rgba(255, 255, 255, .78); font-size: 1rem; line-height: 1.8; }
.actions { display: flex; align-items: center; gap: 30px; margin-top: 34px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 50px; padding: 14px 22px; border-radius: 9px; text-decoration: none; font-size: .72rem; letter-spacing: .11em; font-weight: 700; transition: transform .22s ease, background .22s, color .22s, box-shadow .22s; }
.btn:hover { transform: translateY(-2px); }
.btn-light { background: var(--cream); color: var(--green); }
.btn-light:hover { background: #fff; }
.btn-dark { background: var(--green); color: #fff; box-shadow: 0 10px 24px rgba(16, 21, 19, .14); }
.btn-dark:hover { background: var(--green-soft); box-shadow: 0 14px 28px rgba(16, 21, 19, .2); }
.btn-gold { background: linear-gradient(135deg, #d7b875, var(--earth)); color: var(--green-deep); box-shadow: 0 10px 28px rgba(199, 163, 100, .2); }
.btn-gold:hover { background: #e0c486; }
.text-link { color: #fff; text-decoration: none; font-size: .7rem; letter-spacing: .14em; font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, .38); padding-bottom: 5px; }
.pillars { position: absolute; left: 8vw; right: 8vw; bottom: 34px; display: flex; gap: clamp(18px, 4vw, 56px); font-size: .58rem; letter-spacing: .2em; color: rgba(255, 255, 255, .62); }
.scroll-cue { position: absolute; bottom: 28px; right: 4vw; width: 32px; height: 46px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 99px; }
.scroll-cue span { position: absolute; top: 10px; left: 50%; width: 3px; height: 7px; border-radius: 10px; background: #fff; transform: translateX(-50%); animation: scroll 1.6s infinite; }
@keyframes scroll { 0% { opacity: 0; transform: translate(-50%, 0); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 15px); } }

.section { padding: clamp(76px, 7.5vw, 112px) 8vw; }
.section-tag { color: var(--earth-deep); }
.light-tag { color: rgba(255, 255, 255, .55); }

.about { display: grid; grid-template-columns: minmax(340px, .9fr) minmax(520px, 1.1fr); gap: 7vw; align-items: center; background: #ffffff; border-bottom: 1px solid var(--line); }
.about h2 { font-size: clamp(2.7rem, 4.2vw, 4.4rem); line-height: 1.02; margin: 20px 0 26px; }
.about-lead { font-size: 1.18rem; font-weight: 500; line-height: 1.55 !important; color: #303a35 !important; }
.about-intro > p:not(.section-tag) { color: #5e6862; line-height: 1.75; }
.purpose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.purpose-grid article { min-height: 0; padding: 24px 26px 24px 28px; display: flex; flex-direction: column; justify-content: flex-start; background: transparent; color: var(--ink); border-left: 3px solid var(--earth); }
.purpose-grid article:nth-child(2) { background: transparent; color: var(--ink); border-left: 3px solid var(--earth); }
.purpose-grid article > span { width: 34px; height: 34px; margin-bottom: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--earth-deep); font-size: .68rem; font-weight: 700; letter-spacing: .08em; opacity: 1; }
.purpose-label { margin: 0 0 13px; color: var(--earth-deep); font-size: .64rem; font-weight: 700; letter-spacing: .22em; }
.purpose-grid h3 { margin: 0 0 14px; font-family: Inter, Arial, sans-serif; font-size: 1.35rem; font-weight: 650; line-height: 1.2; }
.purpose-grid article > p:last-child { margin: 0; color: #5e6862; font-size: .92rem; line-height: 1.7; opacity: 1; }

.method { position: relative; min-height: 760px; display: flex; align-items: center; padding: 120px 8vw; color: #fff; background: url("/assets/baco-respeto-clean.webp") 82% 48% / cover no-repeat; isolation: isolate; }
.method-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(14, 16, 15, .98), rgba(20, 22, 20, .92) 50%, rgba(22, 23, 21, .38) 84%), linear-gradient(0deg, rgba(14, 16, 15, .66), rgba(14, 16, 15, .08)); }
.method-content { max-width: 1000px; }
.method h2 { max-width: 720px; font-size: clamp(2.7rem, 4.1vw, 4.3rem); line-height: 1.02; margin: 20px 0 25px; }
.method-intro { max-width: 780px; color: rgba(255, 255, 255, .72); line-height: 1.75; margin-bottom: 44px; }
.method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 52px; margin: 0 0 40px; max-width: 950px; }
.method-grid article { position: relative; padding: 22px 18px 20px 48px; border-top: 1px solid var(--white-line); }
.method-grid article > span { position: absolute; left: 0; top: 25px; color: var(--earth); font-size: .68rem; letter-spacing: .15em; }
.method-grid h3 { font-family: Inter, Arial, sans-serif; font-size: 1.15rem; font-weight: 650; margin: 0 0 8px; }
.method-grid p { margin: 0; color: rgba(255, 255, 255, .66); font-size: .86rem; line-height: 1.65; }

.services { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(500px, 1.5fr); gap: 6vw; background: var(--paper); }
.service-heading { align-self: start; position: relative; }
.service-heading h2, .team h2, .stories h2, .contact h2 { font-size: clamp(2.55rem, 3.8vw, 4rem); line-height: 1.03; margin: 19px 0 25px; }
.service-heading > p:not(.section-tag) { max-width: 410px; line-height: 1.72; margin-bottom: 28px; color: #5e6862; }
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.service-card { position: relative; isolation: isolate; min-height: 285px; padding: 30px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; overflow: hidden; color: white; display: flex; flex-direction: column; justify-content: flex-end; background-position: center; background-size: cover; box-shadow: 0 12px 30px rgba(16, 21, 19, .1); transition: transform .22s ease, box-shadow .22s ease; }
.service-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(16, 21, 19, .16); }
.service-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgba(14, 16, 15, .96), rgba(18, 19, 18, .20) 75%), linear-gradient(90deg, rgba(14, 16, 15, .42), transparent); }
.service-card.puppies { background-image: url("/assets/baco-cachorro-tierno.webp"); }
.service-card.coexistence { background-image: url("/assets/baco-bienestar-clean.webp"); }
.service-card.behavior { background-image: url("/assets/baco-respeto-clean.webp"); }
.service-card.personal { background-image: url("/assets/baco-vinculo-clean.webp"); }
.service-card > span { color: #d4ba89; font-size: .65rem; letter-spacing: .18em; }
.service-card h3 { font-family: Inter, Arial, sans-serif; font-size: 1.28rem; font-weight: 650; line-height: 1.16; margin: 10px 0; }
.service-card p { margin: 0; color: rgba(255, 255, 255, .78); font-size: .9rem; line-height: 1.58; }
.symptoms { grid-column: 1 / -1; padding-top: 26px; border-top: 1px solid var(--line); text-align: center; }
.symptoms > p:first-child { font-size: 1.08rem; font-weight: 650; margin: 0 0 22px; }
.chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
.chips span { padding: 10px 14px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: .78rem; color: #4f5a54; }
.symptoms-note { font-size: .78rem; color: #77807a; margin: 22px 0 0; }

.catalog-visual { grid-column: 1 / -1; position: relative; margin-top: 68px; padding: clamp(54px, 6vw, 82px) 0 0; border-top: 1px solid var(--line); color: var(--ink); }
.catalog-visual::before { display: none; }
.catalog-visual .light-tag { color: var(--earth-deep); }
.catalog-intro { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(360px, 1.15fr); gap: 5vw; align-items: end; margin-bottom: 38px; }
.catalog-intro h3 { margin: 16px 0 0; font-family: Inter, Arial, sans-serif; font-size: clamp(2.45rem, 3.8vw, 4rem); font-weight: 650; line-height: 1.04; letter-spacing: -.045em; }
.catalog-intro > p { max-width: 650px; margin: 0; color: #5e6862; line-height: 1.72; }
.route-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.route-card { min-height: 680px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #ffffff; color: var(--ink); box-shadow: 0 10px 28px rgba(16, 21, 19, .07); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.route-card:nth-child(even) { background: #ffffff; }
.route-card:hover { transform: translateY(-4px); border-color: rgba(185, 121, 62, .62); box-shadow: 0 20px 42px rgba(16, 21, 19, .12); }
.route-card.featured { position: relative; border: 2px solid var(--earth); background: #ffffff; box-shadow: 0 16px 36px rgba(16, 21, 19, .11); }
.route-card-media { position: relative; height: 205px; flex: 0 0 205px; overflow: hidden; background: #d8cfbf; }
.route-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(24, 23, 21, .30)); pointer-events: none; }
.route-card-media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .55s ease; }
.route-card:hover .route-card-media img { transform: scale(1.035); }
.route-card-media.portrait img { object-position: center 34%; }
.route-card-media.family img { object-position: center 48%; }
.route-card-media.behavior img { object-position: center 54%; }
.route-card-body { flex: 1; display: flex; flex-direction: column; padding: 25px 27px 27px; }
.route-card-body > span { color: var(--earth-deep); font-size: .68rem; font-weight: 700; letter-spacing: .14em; }
.route-card h4 { margin: 20px 0 8px; color: var(--ink); font-family: Inter, Arial, sans-serif; font-size: 1.62rem; font-weight: 700; line-height: 1.12; }
.route-format { margin: 0 0 20px !important; color: var(--earth-deep) !important; font-size: .76rem !important; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.route-audience { min-height: 88px; margin: 0 0 17px; color: #5e6862; font-size: .9rem; line-height: 1.62; }
.route-audience strong { color: var(--ink); }
.route-card ul { margin: 0 0 22px; padding: 18px 0 0; list-style: none; border-top: 1px solid rgba(36, 41, 37, .14); }
.route-card li { position: relative; margin: 0 0 10px; padding-left: 19px; color: #5e6862; font-size: .88rem; line-height: 1.5; }
.route-card li::before { content: "•"; position: absolute; left: 0; color: var(--earth); font-size: 1.05rem; }
.route-value { margin: auto 0 0; padding-top: 17px; border-top: 1px solid rgba(36, 41, 37, .14); color: #56615b; font-size: .88rem; line-height: 1.58; }
.route-value strong { color: var(--green); }
.route-card.featured .route-card-media::after { background: linear-gradient(180deg, transparent 42%, rgba(91, 61, 25, .28)); }
.catalog-footer { margin-top: 32px; padding-top: 27px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-top: 1px solid var(--line); }
.catalog-footer p { max-width: 650px; margin: 0; color: #5e6862; font-size: .9rem; line-height: 1.65; }
.catalog-footer strong { color: var(--ink); }

/* Simplified service journey: one starting point and three clear routes. */
.service-paths { display: block; background: #f3f5f3; }
.paths-heading { max-width: 850px; margin-bottom: 54px; }
.paths-heading h2 { margin: 19px 0 25px; font-size: clamp(2.75rem, 4.6vw, 4.8rem); line-height: 1.01; letter-spacing: -.05em; }
.paths-heading > p:not(.section-tag) { max-width: 760px; margin: 0; color: #5e6862; font-size: 1rem; line-height: 1.75; }
.assessment-step { display: grid; grid-template-columns: minmax(320px, .92fr) minmax(440px, 1.08fr); min-height: 480px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 16px 42px rgba(16, 21, 19, .08); }
.assessment-media { min-height: 480px; overflow: hidden; }
.assessment-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 42%; }
.assessment-copy { align-self: center; padding: clamp(34px, 5vw, 68px); }
.assessment-copy > span, .single-session span { color: var(--earth-deep); font-size: .65rem; font-weight: 700; letter-spacing: .18em; }
.assessment-copy h3 { margin: 13px 0 18px; font-family: Inter, Arial, sans-serif; font-size: clamp(2rem, 3vw, 3rem); font-weight: 700; letter-spacing: -.035em; }
.assessment-copy > p { color: #5e6862; line-height: 1.7; }
.assessment-copy ul { margin: 22px 0; padding: 19px 0; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.assessment-copy li { position: relative; margin: 9px 0; padding-left: 22px; color: #4e5a53; font-size: .88rem; line-height: 1.55; }
.assessment-copy li::before { content: "✓"; position: absolute; left: 0; color: var(--earth-deep); font-weight: 700; }
.assessment-result { margin-bottom: 25px; font-size: .9rem; }
.assessment-result strong { color: var(--ink); }
.path-question { max-width: 790px; margin: 85px 0 34px; }
.path-question h3 { margin: 14px 0 14px; font-family: Inter, Arial, sans-serif; font-size: clamp(2rem, 3.2vw, 3.25rem); font-weight: 700; letter-spacing: -.04em; }
.path-question > p:last-child { margin: 0; color: #5e6862; line-height: 1.7; }
.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.path-card { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 10px 28px rgba(16, 21, 19, .065); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
.path-card:hover { transform: translateY(-4px); border-color: rgba(185, 121, 62, .55); box-shadow: 0 20px 42px rgba(16, 21, 19, .11); }
.path-card-media { position: relative; height: 255px; overflow: hidden; background: #d8cfbf; }
.path-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12, 15, 13, .78), transparent 57%); }
.path-card-media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .5s ease; }
.path-card:first-child .path-card-media img { object-position: center 35%; }
.path-card:nth-child(2) .path-card-media img { object-position: center 48%; }
.path-card:nth-child(3) .path-card-media img { object-position: center 53%; }
.path-card:hover .path-card-media img { transform: scale(1.035); }
.path-card-media > span { position: absolute; z-index: 1; left: 24px; right: 20px; bottom: 20px; color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .14em; line-height: 1.5; }
.path-card-body { padding: 27px 27px 25px; }
.path-card-body > h3 { margin: 0 0 9px; font-family: Inter, Arial, sans-serif; font-size: 1.55rem; font-weight: 700; letter-spacing: -.025em; }
.path-card-body > p:not(.path-format) { min-height: 76px; margin: 0 0 21px; color: #5e6862; font-size: .88rem; line-height: 1.65; }
.path-format { min-height: 34px; margin: 0 0 14px; color: var(--earth-deep); font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; }
.path-card details { border-top: 1px solid var(--line); }
.path-card summary { padding: 18px 0 2px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--green); font-size: .73rem; font-weight: 700; letter-spacing: .07em; cursor: pointer; list-style: none; }
.path-card summary::-webkit-details-marker { display: none; }
.path-card summary span { color: var(--earth-deep); font-size: 1rem; transition: transform .2s ease; }
.path-card details[open] summary span { transform: rotate(45deg); }
.path-card details > div { padding-top: 16px; }
.path-card details ul { margin: 0; padding: 0; list-style: none; }
.path-card details li { position: relative; margin: 0 0 9px; padding-left: 18px; color: #5e6862; font-size: .82rem; line-height: 1.52; }
.path-card details li::before { content: "•"; position: absolute; left: 0; color: var(--earth); }
.path-card details p { margin: 17px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: #56615b; font-size: .82rem; line-height: 1.58; }
.path-card details strong { color: var(--ink); }
.single-session { margin-top: 22px; padding: 34px clamp(28px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 40px; border-radius: 15px; background: linear-gradient(135deg, #1a201d, #37312b); color: #fff; }
.single-session > div { max-width: 770px; }
.single-session span { color: #d5b77f; }
.single-session h3 { margin: 10px 0 9px; font-family: Inter, Arial, sans-serif; font-size: 1.65rem; font-weight: 700; }
.single-session p { margin: 0; color: rgba(255,255,255,.69); font-size: .88rem; line-height: 1.65; }
.single-session .btn { flex: 0 0 auto; }
.compact-symptoms { margin-top: 54px; padding-top: 32px; }
.paths-footer { margin-top: 34px; padding-top: 27px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-top: 1px solid var(--line); }
.paths-footer p { max-width: 690px; margin: 0; color: #5e6862; font-size: .9rem; line-height: 1.65; }
.paths-footer strong { color: var(--ink); }

.real-life { position: relative; min-height: 820px; color: white; background: url("/assets/baco-bienestar-clean.webp") 74% 45% / cover no-repeat; isolation: isolate; }
.life-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(13, 15, 14, .99), rgba(20, 22, 20, .87) 47%, rgba(22, 23, 21, .18) 78%), linear-gradient(0deg, rgba(13, 15, 14, .74), rgba(13, 15, 14, .08)); }
.life-layout { min-height: 820px; padding: 115px 8vw 95px; display: grid; grid-template-columns: minmax(520px, .95fr) 1fr; align-items: center; }
.life-copy { max-width: 760px; }
.real-life h2 { max-width: 720px; font-size: clamp(2.65rem, 4vw, 4.25rem); line-height: 1.03; margin: 18px 0 25px; }
.life-copy > p:not(.section-tag) { max-width: 680px; color: rgba(255, 255, 255, .72); line-height: 1.7; }
.life-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 26px 0 22px; }
.life-tabs button { border: 1px solid rgba(255, 255, 255, .22); border-radius: 7px; background: transparent; color: rgba(255, 255, 255, .76); padding: 10px 14px; font-size: .76rem; cursor: pointer; transition: .2s; }
.life-tabs button:hover, .life-tabs button.active { background: var(--cream); border-color: var(--cream); color: var(--green); }
.life-panel { max-width: 610px; padding: 22px 0 0; border-top: 1px solid var(--white-line); display: grid; grid-template-columns: 42px 1fr; column-gap: 18px; }
.panel-number { grid-row: 1 / 4; margin: 8px 0; color: var(--earth); font-size: .68rem; letter-spacing: .15em; }
.life-panel h3 { font-family: Inter, Arial, sans-serif; font-size: 1.25rem; font-weight: 650; margin: 0 0 8px; }
.panel-copy { margin: 0 0 12px; color: rgba(255, 255, 255, .68); font-size: .82rem; line-height: 1.6; }
.life-panel ul { margin: 0; padding: 0; list-style: none; color: rgba(255, 255, 255, .68); font-size: .75rem; line-height: 1.85; }
.life-panel li::before { content: "—"; margin-right: 8px; color: var(--earth); }
.life-caption { align-self: end; justify-self: end; display: flex; flex-direction: column; gap: 8px; text-align: right; }
.life-caption span { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 2.2rem; }
.life-caption small { max-width: 200px; color: rgba(255, 255, 255, .65); font-size: .56rem; letter-spacing: .18em; line-height: 1.6; }

.team { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); gap: 7vw; align-items: center; background: #ffffff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.team-image { width: min(100%, 520px); margin: 0; justify-self: center; overflow: hidden; border-radius: 14px; background: #dfe5e1; box-shadow: 0 18px 45px rgba(16, 21, 19, .12); }
.team-image img { display: block; width: 100%; height: auto; object-fit: contain; image-rendering: auto; }
.team-copy { max-width: 630px; }
.team-copy .lead { font-size: 1.16rem; font-weight: 500; line-height: 1.55; color: #303a35; }
.team-copy p { line-height: 1.72; color: #5e6862; }
.team-copy strong { color: var(--ink); font-weight: 600; }
.team-values { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 30px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .62rem; font-weight: 600; letter-spacing: .18em; color: #5d685f; }

/* Publicaciones seleccionadas de Instagram y TikTok */
.social-wall { color: #fff; background: radial-gradient(circle at 88% 12%, rgba(108, 139, 121, .22), transparent 33%), linear-gradient(145deg, #0d1d17, #183025 58%, #11231b); }
.social-heading { margin-bottom: 45px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 6vw; align-items: end; }
.social-wall .section-tag { color: #b8cbbf; }
.social-wall h2 { margin: 18px 0 0; color: #fff; font-size: clamp(2.55rem, 3.8vw, 4rem); line-height: 1.03; }
.social-wall h2 em { color: #cfdcd4; }
.social-intro > p { margin: 0; color: rgba(255,255,255,.7); line-height: 1.75; }
.social-links { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.social-links a { padding: 10px 13px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: #fff; text-decoration: none; font-size: .62rem; font-weight: 700; letter-spacing: .11em; transition: background .2s ease, color .2s ease; }
.social-links a:hover { color: #10251d; background: #fff; }
.social-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.social-card { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 15px; background: rgba(255,255,255,.96); color: var(--ink); box-shadow: 0 22px 60px rgba(0,0,0,.2); }
.social-media { aspect-ratio: 9 / 14; overflow: hidden; background: #08130f; }
.social-media iframe { width: 100%; height: 100%; display: block; border: 0; background: #08130f; }
.social-card-body { padding: 21px; }
.social-card-meta { display: flex; justify-content: space-between; gap: 12px; color: #617069; font-size: .58rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.social-card h3 { margin: 13px 0 9px; color: #14251e; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.75rem; line-height: 1; }
.social-card-body > p { min-height: 3.4em; margin: 0; color: #617069; font-size: .77rem; line-height: 1.65; }
.social-card-body > a { margin-top: 16px; display: inline-block; color: #254438; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; border-bottom: 1px solid #9cada3; }
.social-empty { grid-column: 1 / -1; padding: 44px; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(255,255,255,.06); text-align: center; }
.social-empty h3 { margin: 0 0 9px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 2rem; }
.social-empty > p, .social-loading, .social-load-error { color: rgba(255,255,255,.68); line-height: 1.7; }
.social-empty .social-links { justify-content: center; }

.stories { display: grid; grid-template-columns: .88fr 1.12fr; gap: 7vw; align-items: center; background: var(--paper); }
.story-gallery { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 430px 150px; gap: 12px; }
.story-main { grid-column: 1 / -1; background: url("/assets/baco-vinculo-clean.webp") 62% center / cover no-repeat; border-radius: 14px; }
.story-thumb { border-radius: 12px; background-position: center; background-size: cover; }
.story-thumb.one { background-image: url("/assets/baco-rio.jpg"); }
.story-thumb.two { background-image: url("/assets/baco-respeto-clean.webp"); }
.story-copy > p:not(.section-tag) { color: #5e6862; line-height: 1.72; max-width: 660px; }
.story-points { margin: 32px 0; border-top: 1px solid var(--line); }
.story-points p { padding: 15px 0; margin: 0; border-bottom: 1px solid var(--line); font-size: .83rem; color: #4f5c54; }
.story-points span { display: inline-block; width: 42px; color: var(--earth); font-size: .66rem; letter-spacing: .14em; }
.dark-link { display: inline-block; color: var(--green); border-color: rgba(16, 37, 29, .3); }
.story-trigger { border-top: 0; border-right: 0; border-left: 0; background: transparent; cursor: pointer; }
.story-community { grid-column: 1 / -1; margin-top: 12px; padding: 56px clamp(26px, 4.5vw, 64px) clamp(28px, 4.5vw, 58px); overflow: hidden; border: 1px solid rgba(223, 232, 225, .18); border-radius: 20px; background-image: linear-gradient(125deg, rgba(7, 30, 22, .95), rgba(15, 54, 39, .88) 55%, rgba(8, 32, 24, .94)), url("/assets/forest-mountains-real.jpg"); background-position: center, center 68%; background-size: cover; box-shadow: 0 24px 64px rgba(12, 33, 25, .2); color: #fff; }
.story-community-heading { margin-bottom: 30px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); align-items: end; gap: 36px; }
.story-community .section-tag { color: #d8c8a9; }
.story-community-heading h3 { margin: 10px 0 0; color: #fff; font-family: Inter, Arial, sans-serif; font-size: clamp(2rem, 3.2vw, 3.35rem); font-weight: 650; line-height: 1.02; letter-spacing: -.035em; }
.story-community-heading h3 em { color: #e8deca; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; }
.story-community-heading > p { max-width: 520px; margin: 0; color: rgba(255, 255, 255, .76); font-size: .88rem; line-height: 1.72; }
.story-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.story-card { min-width: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, .46); border-radius: 14px; background: linear-gradient(155deg, rgba(250, 250, 246, .98), rgba(235, 240, 234, .97)); box-shadow: 0 18px 46px rgba(3, 18, 12, .28); }
.story-card-media { position: relative; isolation: isolate; height: 225px; overflow: hidden; background: #dfe5e1; }
.story-card-media::before, .animal-photo::before { content: ""; position: absolute; z-index: 0; inset: -24px; background-image: linear-gradient(rgba(16, 37, 29, .18), rgba(16, 37, 29, .18)), var(--media-image); background-position: center; background-size: cover; filter: blur(18px) saturate(.82); opacity: .72; transform: scale(1.08); }
.story-card-media img { position: relative; z-index: 1; width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; }
.story-card-media.without-photo { display: grid; place-items: center; background: radial-gradient(circle at 72% 24%, rgba(255,255,255,.14), transparent 30%), linear-gradient(145deg, #173b2e, #0a241b 72%); }
.story-card-media.without-photo span { width: 92px; height: 92px; display: grid; place-items: center; border: 1px solid rgba(243, 236, 222, .55); border-radius: 50%; color: var(--cream); font-family: "Cormorant Garamond", Georgia, serif; font-size: 3.7rem; line-height: 1; }
.story-card-body { flex: 1; padding: 25px; display: flex; flex-direction: column; }
.story-card-meta { display: flex; justify-content: space-between; align-items: start; gap: 15px; color: #8b7659; font-size: .58rem; font-weight: 650; letter-spacing: .13em; line-height: 1.45; text-transform: uppercase; }
.story-card-meta time { flex: 0 0 auto; color: #8a938c; letter-spacing: .05em; text-transform: none; }
.story-quote-mark { height: 36px; margin-top: 17px; color: #a98e65; font-family: "Cormorant Garamond", Georgia, serif; font-size: 3.6rem; line-height: 1; }
.story-card-text { margin: 3px 0 23px; color: #4d5a52; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.23rem; line-height: 1.48; white-space: pre-line; overflow-wrap: anywhere; }
.story-card-footer { margin-top: auto; padding-top: 17px; display: flex; align-items: end; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); }
.story-card-footer > div { min-width: 0; display: grid; gap: 3px; }
.story-card-footer strong { color: var(--ink); font-size: .78rem; font-weight: 650; overflow-wrap: anywhere; }
.story-card-footer span { color: #758078; font-size: .7rem; overflow-wrap: anywhere; }
.story-expand { flex: 0 0 auto; padding: 0 0 3px; border: 0; border-bottom: 1px solid rgba(16, 37, 29, .35); border-radius: 0; background: transparent; color: var(--green); font-size: .62rem; font-weight: 650; letter-spacing: .08em; cursor: pointer; }
.story-loading, .story-load-error, .story-empty { grid-column: 1 / -1; margin: 0; padding: 50px 24px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .62); color: #637068; text-align: center; }
.story-load-error { border-left: 3px solid #8a4a42; color: #713d37; }
.story-empty h4 { margin: 0 0 9px; color: var(--ink); font-family: Inter, Arial, sans-serif; font-size: 1.2rem; }
.story-empty p { margin: 0 auto 20px; max-width: 520px; line-height: 1.65; }
.story-empty button { padding: 12px 18px; border: 1px solid var(--green); border-radius: 999px; background: var(--green); color: #fff; font-size: .63rem; font-weight: 700; letter-spacing: .11em; cursor: pointer; }
.story-publish-success { margin: 0 0 22px; padding: 13px 16px; border-left: 3px solid #4f8a67; background: #e8f0eb; color: #234d37; font-size: .82rem; }
.story-dialog { display: block; max-height: calc(100dvh - 32px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; background: var(--paper); color: var(--ink); }
.story-dialog-head { padding: 30px 34px; background: var(--green); color: white; }
.story-dialog-head [data-slot="dialog-title"] { margin-top: 9px; font-family: Inter, Arial, sans-serif; font-size: 1.85rem; font-weight: 650; }
.story-dialog-head [data-slot="dialog-description"] { color: rgba(255, 255, 255, .67); font-size: .84rem; line-height: 1.6; }
.story-dialog > button { color: white; }
.story-form { padding: 28px 34px 34px; }
.story-form .photo-field > label span { color: #788078; font-size: .68rem; font-weight: 400; }
.privacy-details { margin-top: 21px; border: 1px solid var(--border); border-radius: 9px; background: #edf0ee; }
.privacy-details summary { padding: 14px 15px; color: #344139; font-size: .75rem; font-weight: 600; cursor: pointer; }
.privacy-details > div { padding: 0 15px 15px; border-top: 1px solid var(--border); }
.privacy-details p { margin: 12px 0 0; color: #606b63; font-size: .69rem; line-height: 1.58; }
.privacy-details strong { color: #344139; }
.consent-field { margin: 20px 0 4px; padding: 15px; display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--border); border-radius: 9px; background: white; color: #536058; font-size: .7rem; line-height: 1.55; cursor: pointer; }
.consent-field + .consent-field { margin-top: 9px; }
.consent-field input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green); }
.consent-field strong { color: #2f3c34; }
.submit-story { width: 100%; min-height: 52px; margin-top: 5px; border-radius: 9px; background: var(--green); color: white; font-size: .72rem; font-weight: 700; letter-spacing: .11em; }
.submit-story:hover { background: var(--green-soft); }
.story-success { padding: 48px 34px; text-align: center; }
.story-success > span { width: 56px; height: 56px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; background: #e7ebe8; color: var(--green); font-size: 1.5rem; }
.story-success h3 { margin: 0 0 10px; font-family: Inter, Arial, sans-serif; font-size: 1.65rem; font-weight: 650; }
.story-success p { max-width: 470px; margin: 0 auto 24px; color: #667168; line-height: 1.65; }
.story-success button { border-radius: 999px; background: var(--green); color: white; }

.aid { background-image: linear-gradient(145deg, rgba(8, 24, 18, .96), rgba(24, 42, 34, .91) 62%, rgba(30, 36, 30, .95)), url("/assets/forest-mountains-real.jpg"); background-position: center, center 68%; background-size: cover; color: white; }
.aid-heading { display: flex; align-items: end; justify-content: space-between; gap: 48px; }
.aid-heading > div:first-child { max-width: 850px; }
.aid .section-tag { color: #c5a979; }
.aid h2 { margin: 18px 0 24px; font-size: clamp(2.7rem, 4.2vw, 4.5rem); line-height: 1.03; }
.aid-intro { max-width: 760px; margin: 0; color: rgba(255, 255, 255, .69); line-height: 1.75; }
.aid-publish, .submit-post { height: 52px; padding: 0 23px; border-radius: 9px; background: var(--cream); color: var(--green); font-size: .72rem; font-weight: 700; letter-spacing: .11em; white-space: nowrap; }
.aid-publish:hover, .submit-post:hover { background: white; }
.aid-toolbar { margin: 55px 0 30px; padding: 19px 0; border-top: 1px solid rgba(255, 255, 255, .14); border-bottom: 1px solid rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.aid-toolbar > p { margin: 0; display: flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, .54); font-size: .72rem; letter-spacing: .08em; }
.aid-toolbar > p svg { width: 18px; color: var(--earth); }
.aid-tabs { height: auto; gap: 7px; padding: 0; background: transparent; }
.aid-tabs [data-slot="tabs-trigger"] { min-height: 40px; padding: 8px 15px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; color: rgba(255, 255, 255, .66); background: transparent; box-shadow: none; font-size: .78rem; }
.aid-tabs [data-slot="tabs-trigger"][data-state="active"] { color: var(--green); background: var(--cream); border-color: var(--cream); }
.aid-tabs [data-slot="tabs-trigger"]::after { display: none; }
.aid-tabs [data-slot="tabs-trigger"] span { min-width: 22px; padding: 2px 6px; border-radius: 99px; background: rgba(255, 255, 255, .13); font-size: .65rem; }
.aid-tabs [data-slot="tabs-trigger"][data-state="active"] span { background: rgba(16, 37, 29, .12); }
.aid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.animal-card { overflow: hidden; border: 1px solid rgba(255, 255, 255, .34); border-radius: 14px; background: linear-gradient(155deg, #fafaf6, #edf1eb); color: var(--ink); box-shadow: 0 18px 46px rgba(3, 18, 12, .25); }
.animal-photo { position: relative; isolation: isolate; height: 290px; overflow: hidden; background: #d9d2c8; }
.animal-photo img { position: relative; z-index: 1; width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; }
.case-badge { position: absolute; z-index: 2; top: 17px; left: 17px; padding: 8px 11px; border-radius: 99px; background: #c9493d; color: white; font-size: .62rem; font-weight: 600; letter-spacing: .12em; }
.case-badge.adoption { background: #6d735f; }
.animal-card-body { padding: 25px; }
.animal-title { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.animal-title p { margin: 0 0 6px; color: #8b7659; font-size: .61rem; font-weight: 600; letter-spacing: .18em; }
.animal-title h3 { margin: 0; font-family: Inter, Arial, sans-serif; font-size: 1.55rem; font-weight: 700; line-height: 1.12; }
.animal-title > svg { width: 26px; height: 26px; color: #a38a65; }
.animal-meta { margin: 20px 0; padding: 14px 0; display: grid; gap: 9px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.animal-meta span { display: flex; align-items: center; gap: 9px; color: #667067; font-size: .76rem; }
.animal-meta svg { width: 15px; height: 15px; color: #a08259; }
.animal-description-wrap { min-height: 92px; margin: 0 0 20px; }
.animal-description { margin: 0; color: #556159; font-size: .83rem; line-height: 1.65; overflow-wrap: anywhere; }
.animal-expand { margin-top: 8px; padding: 0 0 3px; border: 0; border-bottom: 1px solid rgba(16, 37, 29, .35); border-radius: 0; background: transparent; color: var(--green); font-size: .62rem; font-weight: 650; letter-spacing: .08em; cursor: pointer; }
.animal-contact { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 45px; padding: 10px 12px; border: 1px solid var(--green); border-radius: 999px; color: var(--green); text-decoration: none; font-size: .64rem; font-weight: 600; letter-spacing: .11em; transition: .2s; }
.animal-contact:hover { background: var(--green); color: white; }
.animal-contact svg { width: 17px; }
.aid-empty { grid-column: 1 / -1; padding: 60px 24px; text-align: center; border: 1px solid rgba(255, 255, 255, .16); border-radius: 6px; background: rgba(255, 255, 255, .025); }
.aid-empty > svg { width: 38px; height: 38px; color: var(--earth); }
.aid-empty h3 { margin: 18px 0 8px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 2rem; }
.aid-empty p { margin: 0 0 22px; color: rgba(255, 255, 255, .58); }
.aid-empty button { border-radius: 99px; background: var(--cream); color: var(--green); }
.publish-success, .load-error { margin: 0 0 22px; padding: 13px 16px; border-left: 3px solid #6ab987; background: rgba(106, 185, 135, .12); color: #dcf3e4; font-size: .82rem; }
.load-error { border-color: #d58274; background: rgba(213, 130, 116, .12); color: #ffe1dc; }
.aid-skeleton { height: 500px; padding: 20px; border-radius: 6px; background: rgba(255, 255, 255, .06); animation: pulse 1.3s infinite alternate; }
.aid-skeleton span { display: block; height: 260px; background: rgba(255, 255, 255, .07); }
.aid-skeleton i { display: block; height: 13px; margin-top: 18px; background: rgba(255, 255, 255, .07); }
.aid-skeleton i:nth-child(3) { width: 72%; }
.aid-skeleton i:nth-child(4) { width: 45%; }
@keyframes pulse { to { opacity: .55; } }

.aid-dialog { display: block; max-height: calc(100dvh - 32px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; background: var(--paper); color: var(--ink); }
.aid-dialog-head { padding: 30px 34px; background: var(--green); color: white; }
.aid-dialog-head [data-slot="dialog-title"] { margin-top: 9px; font-family: Inter, Arial, sans-serif; font-size: 1.85rem; font-weight: 650; }
.aid-dialog-head [data-slot="dialog-description"] { color: rgba(255, 255, 255, .66); font-size: .84rem; line-height: 1.6; }
.aid-dialog > button { color: white; }
.aid-form { padding: 28px 34px 34px; }
.form-trap { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.form-fieldset { margin: 0 0 24px; padding: 0; border: 0; }
.form-fieldset legend { margin-bottom: 11px; font-size: .78rem; font-weight: 600; color: #465149; }
.choice-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.choice-card { min-height: 78px; padding: 14px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 9px; background: white; cursor: pointer; }
.choice-card[data-selected="true"] { border-color: var(--earth); box-shadow: 0 0 0 1px var(--earth); }
.choice-card span { display: flex; flex-direction: column; gap: 4px; }
.choice-card strong { font-size: .84rem; font-weight: 600; }
.choice-card small { color: #7a837d; font-size: .69rem; }
.form-fieldset.compact { margin-bottom: 22px; }
.animal-choice { display: flex; gap: 9px; }
.animal-choice label { min-width: 115px; padding: 10px 13px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 99px; background: white; cursor: pointer; font-size: .78rem; }
.animal-choice label[data-selected="true"] { border-color: var(--earth); box-shadow: 0 0 0 1px var(--earth); }
.animal-choice label > svg { width: 17px; color: #987d57; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.form-field { display: grid; gap: 7px; }
.form-field label, .photo-field > label { font-size: .75rem; font-weight: 600; color: #465149; }
.form-field input, .form-field textarea, .form-field select, .photo-field input { border-color: var(--border); background: white; box-shadow: none; font-size: .82rem; }
.form-field input { height: 43px; }
.form-field select { width: 100%; height: 43px; padding: 0 12px; border-width: 1px; border-style: solid; border-radius: 6px; color: #4a554d; }
.form-field textarea { min-height: 104px; resize: vertical; }
.full-field { grid-column: 1 / -1; }
.photo-field { margin-top: 20px; display: grid; gap: 8px; }
.photo-field > label { display: flex; align-items: center; gap: 8px; }
.photo-field > label svg { width: 18px; color: #987d57; }
.photo-field > small, .privacy-note { color: #788078; font-size: .68rem; line-height: 1.5; }
.photo-preview { width: 100%; height: 190px; margin-top: 5px; object-fit: cover; border-radius: 5px; }
.privacy-note { margin: 18px 0; }
.form-message { padding: 11px 13px; border-left: 3px solid var(--earth); background: #edf0ee; font-size: .75rem; }
.form-message.error { border-color: #b34b41; color: #84362f; background: #f8e7e4; }
.submit-post { width: 100%; margin-top: 5px; background: var(--green); color: white; }
.submit-post:hover { background: var(--green-soft); }

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; background: linear-gradient(135deg, #202522, #352f29); color: white; }
.contact-copy > p:not(.section-tag) { max-width: 560px; color: rgba(255, 255, 255, .67); line-height: 1.8; }
.contact-card { padding: 44px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; background: rgba(255, 255, 255, .055); }
.contact-label { font-size: .65rem; font-weight: 600; letter-spacing: .2em; color: rgba(255, 255, 255, .55); }
.phone { display: block; margin: 25px 0; color: white; text-decoration: none; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.35rem; line-height: 1.1; }
.phone span { font-size: 2.25rem; }
.contact-card > p:not(.contact-label) { color: rgba(255, 255, 255, .62); font-size: .82rem; line-height: 1.7; }
.full { width: 100%; margin-top: 18px; text-align: center; }
.contact-actions { display: grid; gap: 14px; }
.contact-actions .btn { border: 0; }
.contact-whatsapp-link { width: max-content; max-width: 100%; margin-inline: auto; padding-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,.35); color: rgba(255,255,255,.72); text-decoration: none; font-size: .68rem; letter-spacing: .04em; }
.schedule-dialog small { color: #7b857e; font-weight: 400; }

/* Orientador preliminar AYNI */
.diagnostic { background: linear-gradient(180deg, #f8faf8 0%, #eef2ef 100%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.diagnostic-heading { max-width: 820px; margin-bottom: 52px; }
.diagnostic-heading h2 { margin-bottom: 24px; }
.diagnostic-heading > p:last-child { max-width: 760px; color: #55615a; font-size: 1rem; line-height: 1.75; }
.diagnostic-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 5vw, 70px); align-items: center; padding: clamp(28px, 4vw, 46px); border: 1px solid #cad3cd; border-radius: 16px; background: linear-gradient(135deg, #ffffff, #f5f8f6); box-shadow: 0 20px 55px rgba(23, 32, 28, .08); }
.diagnostic-entry span { color: var(--earth-deep); font-size: .64rem; font-weight: 700; letter-spacing: .18em; }
.diagnostic-entry h3 { margin: 12px 0 10px; font-size: clamp(1.55rem, 2.8vw, 2.45rem); line-height: 1.08; letter-spacing: -.035em; }
.diagnostic-entry p { max-width: 660px; margin: 0; color: #66716a; line-height: 1.7; }
.diagnostic-toggle { min-height: 56px; padding: 15px 22px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; border: 0; border-radius: 9px; color: #fff; background: linear-gradient(135deg, #1b2922, #344039); font-size: .7rem; font-weight: 700; letter-spacing: .1em; white-space: nowrap; box-shadow: 0 12px 28px rgba(16, 31, 23, .16); transition: transform .2s ease, box-shadow .2s ease; }
.diagnostic-toggle:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(16, 31, 23, .22); }
.diagnostic-toggle i { font-size: 1rem; font-style: normal; transition: transform .25s ease; }
.diagnostic-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.diagnostic-panel[hidden] { display: none; }
.diagnostic-panel { padding-top: 38px; }
.diagnostic-layout { display: grid; grid-template-columns: minmax(250px, .6fr) minmax(600px, 1.4fr); gap: clamp(30px, 5vw, 74px); align-items: start; }
.diagnostic-aside { position: sticky; top: 166px; padding: 30px; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #15201b, #29332e); box-shadow: 0 20px 55px rgba(19, 29, 24, .13); }
.diagnostic-aside > span { color: #d8af72; font-size: .64rem; font-weight: 700; letter-spacing: .18em; }
.diagnostic-aside ol { margin: 26px 0; padding: 0; list-style: none; counter-reset: orientador; }
.diagnostic-aside li { position: relative; padding: 0 0 22px 42px; counter-increment: orientador; }
.diagnostic-aside li::before { content: counter(orientador, decimal-leading-zero); position: absolute; left: 0; top: 1px; color: #d8af72; font-size: .69rem; letter-spacing: .08em; }
.diagnostic-aside li:not(:last-child)::after { content: ""; position: absolute; left: 9px; top: 24px; bottom: 6px; width: 1px; background: rgba(255,255,255,.15); }
.diagnostic-aside strong, .diagnostic-aside small { display: block; }
.diagnostic-aside strong { margin-bottom: 6px; font-size: .9rem; }
.diagnostic-aside small, .diagnostic-aside > p { color: rgba(255,255,255,.64); font-size: .75rem; line-height: 1.6; }
.diagnostic-aside > p { margin: 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.13); }
.diagnostic-form { padding: clamp(25px, 4vw, 48px); border: 1px solid #d8ded9; border-radius: 16px; background: #fff; box-shadow: 0 24px 70px rgba(23, 32, 28, .08); }
.diagnostic-group { margin: 0 0 36px; padding: 0 0 34px; border: 0; border-bottom: 1px solid var(--line); }
.diagnostic-group legend { width: 100%; margin-bottom: 22px; color: var(--green); font-size: 1rem; font-weight: 700; }
.diagnostic-group legend span { display: inline-grid; width: 29px; height: 29px; margin-right: 10px; place-items: center; border-radius: 50%; color: #fff; background: var(--earth); font-size: .63rem; }
.field-help { margin: -12px 0 17px; color: #778079; font-size: .73rem; }
.delivery-choice { display: flex; flex-wrap: wrap; gap: 9px; margin: -4px 0 22px; }
.delivery-choice label { padding: 10px 14px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: #f8faf8; color: #465149; font-size: .75rem; cursor: pointer; }
.delivery-choice label:has(input:checked) { color: #fff; border-color: var(--green); background: var(--green); }
.delivery-choice input, .concern-grid input, .safety-grid input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--earth); }
.optional-delivery label small { color: #7b847e; font-size: .65rem; font-weight: 400; }
.concern-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.concern-grid label, .safety-grid label { min-height: 50px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; background: #f8faf8; color: #465149; font-size: .76rem; line-height: 1.35; cursor: pointer; }
.concern-grid label:has(input:checked), .safety-grid label:has(input:checked) { border-color: var(--earth); background: #f8f0e7; box-shadow: 0 0 0 1px rgba(185, 121, 62, .25); }
.safety-grid { display: grid; gap: 9px; margin-top: 18px; }
.diagnostic-privacy { margin-bottom: 15px; }
.diagnostic-consent { margin-bottom: 22px; }
.submit-diagnostic { width: 100%; min-height: 54px; padding: 14px 20px; border: 0; border-radius: 9px; color: #fff; background: linear-gradient(135deg, #1b2922, #344039); font-size: .73rem; font-weight: 700; letter-spacing: .1em; transition: transform .2s, box-shadow .2s, opacity .2s; }
.submit-diagnostic:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(16, 31, 23, .18); }
.submit-diagnostic:disabled { opacity: .62; cursor: wait; transform: none; }
.diagnostic-result { margin-top: 46px; padding: clamp(28px, 5vw, 56px); border: 1px solid #cad3cd; border-radius: 16px; background: #fff; box-shadow: 0 24px 70px rgba(23, 32, 28, .1); }
.diagnostic-result[hidden] { display: none; }
.result-topline { display: flex; justify-content: space-between; gap: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.result-topline span, .result-topline small { color: var(--earth-deep); font-size: .64rem; font-weight: 700; letter-spacing: .16em; }
.result-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 86px); padding: 38px 0 28px; }
.result-grid h3 { margin: 13px 0 7px; color: var(--green); font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1; }
.result-grid > div > p:not(.section-tag):not(.result-format) { color: #56615b; line-height: 1.75; }
.result-format { margin: 0 0 21px; color: var(--earth-deep); font-size: .78rem; font-weight: 700; letter-spacing: .05em; }
.result-priorities ul { margin: 16px 0 0; padding: 0; list-style: none; }
.result-priorities li { position: relative; padding: 10px 0 10px 22px; border-bottom: 1px solid var(--line); color: #465149; font-size: .83rem; line-height: 1.5; }
.result-priorities li::before { content: "—"; position: absolute; left: 0; color: var(--earth); }
.result-alert { margin: 0 0 24px; padding: 18px 20px; border-left: 4px solid #b55f46; border-radius: 4px; color: #653328; background: #f8eae5; font-size: .82rem; line-height: 1.65; }
.result-disclaimer { color: #6b756f; font-size: .75rem; line-height: 1.65; }
.result-actions { margin-top: 28px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.result-delivery { margin: 20px 0 0; color: #53665a; font-size: .75rem; }

body.menu-open { overflow: hidden; }

.site-footer { padding: 48px 8vw 24px; display: grid; grid-template-columns: minmax(300px, 1.35fr) minmax(210px, .8fr) minmax(190px, .7fr); gap: 42px 6vw; align-items: start; background: linear-gradient(135deg, #0b1712, #111d18); color: white; border-top: 1px solid rgba(213, 172, 103, .25); }
.footer-identity { max-width: 470px; }
.footer-brand { width: max-content; margin-bottom: 18px; }
.site-footer .footer-brand .brand-logo { width: 190px; }
.footer-identity > p { max-width: 410px; margin: 0 0 13px; color: rgba(255,255,255,.68); font-size: .82rem; letter-spacing: 0; line-height: 1.7; }
.footer-motto, .footer-title { color: var(--earth-soft); font-size: .61rem; font-weight: 650; letter-spacing: .18em; }
.footer-title { margin: 10px 0 18px; }
.footer-contact, .footer-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-contact a, .footer-nav a, .footer-contact span:not(.footer-title) { color: rgba(255,255,255,.72); text-decoration: none; font-size: .78rem; line-height: 1.5; transition: color .2s ease; }
.footer-contact a:hover, .footer-nav a:hover { color: #fff; }
.footer-socials { width: 100%; margin-top: 12px; padding-top: 17px; display: grid; gap: 10px; border-top: 1px solid rgba(255,255,255,.11); }
.footer-contact .footer-social-link { width: 100%; padding: 9px 11px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(255,255,255,.035); transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.footer-contact .footer-social-link:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); transform: translateY(-1px); }
.social-icon { width: 25px; height: 25px; flex: 0 0 auto; color: #fff; }
.footer-contact .footer-social-link > span { display: flex; flex-direction: column; line-height: 1.2; }
.footer-contact .footer-social-link strong { color: #fff; font-size: .71rem; font-weight: 650; letter-spacing: .035em; }
.footer-contact .footer-social-link small { margin-top: 3px; color: rgba(255,255,255,.58); font-size: .64rem; }
.footer-bottom { grid-column: 1 / -1; padding-top: 22px; display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid rgba(255,255,255,.11); }
.footer-bottom span, .footer-bottom small { color: rgba(255,255,255,.43); font-size: .58rem; letter-spacing: .12em; line-height: 1.6; }
.admin-access { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.48); text-decoration: none; font-size: .58rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; transition: color .2s ease; }
.admin-access:hover { color: #fff; }
.admin-access svg { width: 15px; height: 15px; }
.whatsapp { position: fixed; z-index: 60; right: 22px; bottom: 22px; width: 55px; height: 55px; display: grid; place-items: center; border-radius: 50%; background: #35d267; color: #082d19; box-shadow: 0 10px 30px rgba(0, 0, 0, .28); transition: transform .2s; }
.whatsapp:hover { transform: translateY(-3px) scale(1.03); }
.whatsapp svg { width: 30px; height: 30px; fill: white; }
/*
 * El contenido debe ser visible aun si Safari, la caché del hosting o una
 * conexión lenta impiden ejecutar JavaScript. Las animaciones nunca deben ser
 * un requisito para leer o usar la página.
 */
.reveal,
.reveal.show { opacity: 1; transform: none; transition: none; }

@media (max-width: 1120px) {
  .nav { padding-inline: 24px; }
  .brand-logo { width: 220px; }
  .nav nav { gap: 14px; }
  .nav nav a { font-size: .59rem; }
  .about { grid-template-columns: 1fr; }
  .about-intro { max-width: 820px; }
  .services { grid-template-columns: 1fr; }
  .service-heading { position: static; max-width: 700px; }
  .symptoms { grid-column: auto; }
  .catalog-visual { grid-column: auto; }
  .route-grid { grid-template-columns: 1fr 1fr; }
  .life-layout { grid-template-columns: 1fr; }
  .life-caption { display: none; }
  .team-image { max-width: 500px; }
  .story-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aid-grid { grid-template-columns: 1fr 1fr; }
  .assessment-step { grid-template-columns: .9fr 1.1fr; }
  .path-grid { grid-template-columns: 1fr 1fr; }
  .path-card:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: .8fr 1.2fr; }
  .path-card:last-child .path-card-media { height: 100%; min-height: 380px; }
  .diagnostic-layout { grid-template-columns: 1fr; }
  .diagnostic-aside { position: static; }
}

@media (max-width: 960px) {
  html { scroll-padding-top: 200px; }
  .nav { height: 200px; padding: 0 5.5vw; background-size: cover, auto 190%; background-position: center, 52% 68%; }
  .brand-logo { width: 220px; }
  .menu { display: block; }
  .menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav nav { position: absolute; top: 200px; left: 0; right: 0; max-height: 0; overflow: hidden; visibility: hidden; pointer-events: none; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0 6vw; background-image: linear-gradient(rgba(14, 17, 15, .97), rgba(14, 17, 15, .99)), url("/assets/forest-mountains-real.jpg"); background-position: center; background-size: cover; transition: max-height .32s ease, padding .32s ease, visibility 0s linear .32s; }
  .nav nav.open { max-height: calc(100svh - 200px); overflow-y: auto; visibility: visible; pointer-events: auto; padding-top: 15px; padding-bottom: 22px; transition-delay: 0s; }
  .nav nav a { padding: 14px 2px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: .68rem; }
  .nav nav a::after { display: none; }
  .nav-cta { margin-top: 9px; text-align: center; border: 1px solid rgba(255, 255, 255, .38) !important; }
  .hero { min-height: 860px; height: 100svh; padding: 220px 7vw 125px; background-position: 63% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(13, 15, 14, .97), rgba(18, 20, 18, .78) 60%, rgba(20, 21, 19, .28)), linear-gradient(0deg, rgba(13, 15, 14, .89), transparent 54%); }
  .hero h1 { font-size: clamp(3.45rem, 14vw, 5rem); }
  .hero-text { font-size: .94rem; }
  .actions { align-items: flex-start; flex-direction: column; gap: 22px; }
  .pillars { left: 7vw; right: 7vw; bottom: 38px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .scroll-cue { display: none; }
  .section { padding: 85px 7vw; }
  .purpose-grid { grid-template-columns: 1fr; }
  .purpose-grid { gap: 22px; }
  .purpose-grid article { min-height: 0; padding: 24px 18px 24px 24px; }
  .purpose-grid article:nth-child(2) { border-left: 3px solid var(--earth); border-top: 0; }
  .method { padding: 95px 7vw; min-height: unset; background-position: 72% center; }
  .method-shade { background: rgba(14, 16, 15, .91); }
  .method-grid { grid-template-columns: 1fr; gap: 7px; }
  .method-grid article { padding-right: 0; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 260px; }
  .services { gap: 50px; }
  .catalog-intro { grid-template-columns: 1fr; align-items: start; }
  .catalog-footer { align-items: flex-start; flex-direction: column; }
  .real-life { min-height: 900px; background-position: 65% center; }
  .life-shade { background: linear-gradient(90deg, rgba(13, 15, 14, .97), rgba(20, 22, 20, .73)), linear-gradient(0deg, rgba(13, 15, 14, .82), rgba(13, 15, 14, .28)); }
  .life-layout { min-height: 900px; padding: 95px 7vw 75px; }
  .real-life h2 { font-size: clamp(2.5rem, 10vw, 3.8rem); }
  .life-tabs { gap: 6px; }
  .life-panel { grid-template-columns: 32px 1fr; }
  .team, .stories, .contact { grid-template-columns: 1fr; }
  .team-image { max-width: 500px; }
  .team-copy { max-width: none; }
  .social-heading { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .social-grid { grid-template-columns: 1fr; }
  .social-card { width: min(100%, 520px); margin-inline: auto; }
  .stories { gap: 55px; }
  .story-gallery { grid-template-rows: 350px 120px; }
  .story-community { padding: 45px clamp(24px, 5vw, 42px) 32px; }
  .story-community-heading { grid-template-columns: 1fr; align-items: start; gap: 18px; }
  .story-community-heading > p { max-width: 660px; }
  .aid-heading { align-items: flex-start; flex-direction: column; }
  .aid-toolbar { align-items: flex-start; flex-direction: column; }
  .aid-grid { grid-template-columns: 1fr; }
  .animal-photo { height: min(430px, 68vw); }
  .contact { gap: 45px; }
  .contact-card { padding: 30px; }
  .site-footer { grid-template-columns: 1fr 1fr; padding: 42px 7vw 24px; gap: 34px; }
  .footer-identity, .footer-bottom { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
  .page-rail { display: none; }
  .paths-heading { margin-bottom: 38px; }
  .assessment-step { grid-template-columns: 1fr; }
  .assessment-media { min-height: 350px; max-height: 440px; }
  .path-question { margin-top: 66px; }
  .path-grid { grid-template-columns: 1fr; }
  .path-card:last-child { grid-column: auto; display: block; }
  .path-card:last-child .path-card-media { height: 280px; min-height: 0; }
  .path-card-body > p:not(.path-format) { min-height: 0; }
  .single-session, .paths-footer { align-items: flex-start; flex-direction: column; }
  .diagnostic-heading { margin-bottom: 38px; }
  .diagnostic-entry { grid-template-columns: 1fr; }
  .diagnostic-toggle { width: 100%; }
  .diagnostic-form { padding: 28px; }
  .result-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .brand-logo { width: 210px; }
  .hero h1 { font-size: 3.55rem; }
  .hero-text { line-height: 1.65; }
  .hero .btn { width: 100%; }
  .pillars { font-size: .52rem; }
  .about h2, .method h2, .service-heading h2, .team h2, .social-wall h2, .stories h2, .aid h2, .contact h2 { font-size: 2.45rem; }
  .about-lead { font-size: 1.08rem; }
  .purpose-grid article { padding: 22px 16px 22px 22px; }
  .btn { font-size: .64rem; padding-left: 17px; padding-right: 17px; }
  .service-card { min-height: 245px; padding: 24px; }
  .chips { justify-content: flex-start; }
  .chips span { font-size: .68rem; }
  .real-life { background-position: 60% center; }
  .life-tabs button { font-size: .66rem; padding: 8px 11px; }
  .life-copy > p:not(.section-tag) { font-size: .9rem; }
  .life-panel { padding-top: 18px; }
  .team-image { width: min(100%, 430px); }
  .site-footer { grid-template-columns: 1fr; }
  .footer-identity, .footer-bottom { grid-column: auto; }
  .team-values { gap: 12px 20px; }
  .story-gallery { grid-template-rows: 285px 95px; }
  .story-community { padding: 36px 20px 22px; border-radius: 16px; background-position: center, 58% center; }
  .story-list { grid-template-columns: 1fr; }
  .story-card-media { height: 260px; }
  .story-card-body { padding: 22px; }
  .story-card-meta { flex-direction: column; gap: 5px; }
  .aid-publish { width: 100%; }
  .aid-tabs { width: 100%; overflow-x: auto; justify-content: flex-start; }
  .aid-tabs [data-slot="tabs-trigger"] { flex: 0 0 auto; padding-inline: 12px; }
  .aid-dialog-head, .aid-form, .story-dialog-head, .story-form { padding-left: 22px; padding-right: 22px; }
  .aid-dialog, .story-dialog { max-height: calc(100dvh - 12px); }
  .choice-grid, .form-grid { grid-template-columns: 1fr; }
  .route-grid { grid-template-columns: 1fr; }
  .full-field { grid-column: auto; }
  .contact-card { padding: 24px; }
  .phone span { font-size: 1.95rem; }
  .whatsapp { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .paths-heading h2 { font-size: 2.55rem; }
  .assessment-media { min-height: 280px; }
  .assessment-copy { padding: 30px 24px 34px; }
  .assessment-copy .btn { width: 100%; }
  .path-card-media, .path-card:last-child .path-card-media { height: 235px; }
  .path-card-body { padding: 24px 22px; }
  .single-session { padding: 29px 24px; }
  .single-session .btn, .paths-footer .btn { width: 100%; }
  .diagnostic-form { padding: 23px 18px; }
  .diagnostic-group { margin-bottom: 29px; padding-bottom: 28px; }
  .concern-grid { grid-template-columns: 1fr; }
  .delivery-choice { display: grid; grid-template-columns: 1fr; }
  .delivery-choice label { border-radius: 8px; }
  .diagnostic-result { padding: 26px 20px; }
  .result-topline { align-items: flex-start; flex-direction: column; gap: 8px; }
  .result-actions .btn, .result-actions button { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue span { animation: none; }
  .btn, .whatsapp, .page-rail span, .page-rail i, .route-card, .route-card-media img { transition: none; }
  .nav { animation: none; }
}

/* Native dialog visibility must override the original component styles. */
dialog.dialog-shell:not([open]) { display: none; }
dialog.dialog-shell[open] { display: block; }