/* Intención & Consciencia — estilos del sitio
   Paleta: café #4a3626 · arena #eaded0 · almendra #cdb38e · musgo #686d46 · gris #d6d9d7
   Tipos: Antic Didone (display) · Lora (texto) · Maitree (títulos pequeños) */

:root {
  --cafe: #4a3626;
  --arena: #eaded0;
  --almendra: #cdb38e;
  --musgo: #686d46;
  --gris: #d6d9d7;
  --blanco: #fff;
  --f-display: 'Antic Didone', serif;
  --f-text: 'Lora', Georgia, serif;
  --f-label: 'Maitree', serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--blanco); color: var(--cafe); font-family: var(--f-text); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: var(--cafe); text-decoration: none; }
a:hover { color: var(--musgo); }
input, select, textarea, button { font-family: inherit; color: inherit; }
::placeholder { color: var(--almendra); }
.page { max-width: 1600px; margin: 0 auto; overflow: hidden; }

@keyframes iycFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes iycUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ── Botones ─────────────────────────── */
.btn { display: inline-block; width: max-content; white-space: nowrap; border-radius: 999px; font-family: var(--f-text); text-transform: uppercase; letter-spacing: 0; cursor: pointer; transition: background .35s ease, color .35s ease, box-shadow .35s ease; }
.btn--ghost { border: 1.5px solid #fff; background: transparent; color: #fff; padding: clamp(12px,1vw,16px) clamp(28px,2.2vw,34px); font-size: clamp(14px,1.15vw,18.5px); box-shadow: 0 0 14px rgba(255,255,255,.3), inset 0 0 10px rgba(255,255,255,.14); }
.btn--ghost:hover { background: #fff; color: var(--cafe); }
.btn--solid { border: 1px solid var(--cafe); background: var(--cafe); color: #fff; padding: clamp(14px,1.3vw,20px) clamp(24px,2.2vw,34px); font-size: clamp(13px,1vw,16px); }
.btn--solid:hover { background: #fff; color: var(--cafe); }
.btn--outline { border: 1.5px solid var(--cafe); background: transparent; color: var(--cafe); padding: clamp(12px,1vw,15px) clamp(28px,2.6vw,38px); font-size: clamp(13px,1vw,15.5px); }
.btn--outline:hover { background: var(--cafe); color: #fff; }
.btn--wide { width: min(100%, 410px); font-size: clamp(15px,1.4vw,21px); }
.btn--light { border: 1px solid rgba(234,222,208,.9); background: transparent; color: #fff; padding: 13px 32px; font-family: var(--f-label); font-size: 12px; letter-spacing: .2em; }
.btn--light:hover { background: #fff; color: var(--cafe); }

.h-display { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(28px,3.4vw,48px); letter-spacing: .04em; color: var(--cafe); }
.h-section { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(23px,2.2vw,34px); line-height: 1.28; letter-spacing: .015em; color: var(--cafe); }

/* ── Header (mismo tamaño en todas las páginas) ─────────────────────────── */
.site-header { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1600px; z-index: 60; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px 24px; padding: clamp(14px,2.3vw,36px) clamp(20px,3.4vw,52px) clamp(10px,1vw,16px); transition: background .4s ease; }
.site-header__logo img { height: clamp(42px,3.7vw,60px); width: auto; transition: filter .4s ease, transform .25s ease; }
.site-header__logo:hover img { transform: scale(1.06); }
.site-nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(14px,1.35vw,22px); }
.site-nav a { font-size: clamp(13px,.95vw,15px); text-transform: uppercase; transition: text-shadow .25s ease, color .25s ease; }
.site-nav__access { display: inline-flex; border: 1px solid currentColor; border-radius: 999px; padding: 9px 20px; font-family: var(--f-label); font-size: 11px !important; letter-spacing: .2em; }

/* Overlay (sobre foto): blanco y transparente */
.header-overlay .site-header { background: transparent; }
.header-overlay .site-nav a { color: #fff; text-shadow: 0 0 3px rgba(255,255,255,.4), 0 0 8px rgba(255,255,255,.4); }
/* Sólido: al hacer scroll o en páginas sin portada */
.header-solid .site-header, .site-header.is-solid { background: rgba(255,255,255,.94); }
.header-solid .site-nav a, .site-header.is-solid .site-nav a { color: var(--cafe); text-shadow: none; }
.header-solid .site-header__logo img, .site-header.is-solid .site-header__logo img { filter: brightness(0) saturate(100%) invert(22%) sepia(18%) saturate(1200%) hue-rotate(345deg) brightness(92%) contrast(90%); }
.site-nav a:hover { color: var(--almendra); }

/* ── Home · Portada ─────────────────────────── */
.hero { position: relative; aspect-ratio: 2332/1150; min-height: 520px; display: flex; align-items: flex-end; justify-content: center; padding: clamp(48px,4.4vw,72px) clamp(20px,5vw,64px); background: #2b2a1e; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% center; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,24,16,.22) 0%, rgba(28,24,16,0) 22%, rgba(28,24,16,0) 60%, rgba(28,24,16,.28) 100%); }
.hero__content { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 1200px; animation: iycUp 1.1s ease both; }
.hero__kicker { margin: 0; font-style: italic; font-size: clamp(17px,1.65vw,27px); color: #fff; letter-spacing: .01em; }
.hero__title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(28px,2.85vw,46px); line-height: 1.3; color: #fff; letter-spacing: .01em; text-wrap: balance; }
.hero__content .btn { margin-top: clamp(28px,2.6vw,42px); }

/* ── Home · Intro ─────────────────────────── */
.intro { padding: clamp(64px,9vw,120px) clamp(20px,5vw,64px); text-align: center; }
.intro__lead { max-width: 960px; margin: 0 auto; font-family: var(--f-display); font-size: clamp(22px,2.7vw,38px); line-height: 1.55; text-align: justify; text-align-last: center; text-wrap: pretty; }
.intro__tags { margin: clamp(28px,4vw,48px) auto 0; font-style: italic; font-size: clamp(15px,1.5vw,21px); letter-spacing: .02em; color: var(--musgo); }

/* ── Home · Seguridad o supervivencia ─────────────────────────── */
.survival { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); background: var(--arena); align-items: stretch; }
.survival__lists { padding: clamp(28px,2.6vw,44px) clamp(24px,4.2vw,72px) clamp(36px,4vw,60px); display: flex; flex-direction: column; gap: clamp(22px,2.2vw,36px); }
.survival__block { flex: 1 1 auto; display: flex; flex-direction: column; gap: clamp(10px,1vw,16px); }
.survival__block h3 { margin: 0; font-weight: 700; font-size: clamp(14px,1.05vw,16.5px); letter-spacing: .005em; }
.bullets { flex: 1 1 auto; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; justify-content: space-between; font-size: clamp(12.5px,.9vw,14.5px); line-height: 1.42; }
.bullets li { display: flex; gap: 10px; align-items: baseline; }
.bullets li::before { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--cafe); transform: translateY(-3px); }
.survival__close { margin: clamp(4px,.6vw,10px) 0 0; font-size: clamp(13px,1vw,15.5px); letter-spacing: .02em; text-transform: uppercase; }
.survival__aside { display: flex; flex-direction: column; }
.survival__photo { position: relative; overflow: hidden; }
.survival__photo img { width: 100%; height: auto; aspect-ratio: 736/915; }
.survival__photo h2 { position: absolute; right: clamp(20px,3.4vw,56px); top: 59%; margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(26px,3.1vw,48px); line-height: 1.12; color: #fff; letter-spacing: .01em; text-align: center; text-shadow: 0 0 18px rgba(0,0,0,.25); }
.survival__photo h2 span { font-size: .8em; }
.survival__know { display: flex; flex-direction: column; gap: clamp(16px,1.6vw,24px); padding: clamp(24px,2.4vw,38px) clamp(20px,2.4vw,40px) clamp(36px,4vw,60px) clamp(4px,.4vw,8px); }
.survival__know p { margin: 0; font-size: clamp(13px,.95vw,15px); line-height: 1.95; text-align: justify; text-align-last: left; }

/* ── Home · Método ─────────────────────────── */
.method { padding: clamp(64px,9vw,116px) clamp(20px,5vw,64px) clamp(40px,5vw,64px); text-align: center; }
.method__title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(28px,3.6vw,50px); letter-spacing: .01em; }
.method__text { max-width: min(100%,23.6em); margin: clamp(28px,3.5vw,44px) auto 0; font-family: var(--f-display); font-size: clamp(18px,2.1vw,29px); line-height: 1.6; text-align: justify; text-align-last: left; }
.method__text sup { font-size: .5em; line-height: 0; }
.method__note { margin: clamp(30px,4vw,52px) auto 0; font-style: italic; font-size: clamp(14px,1.35vw,19px); }

/* ── Home · Pilares ─────────────────────────── */
.pillars__row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.pillar { position: relative; aspect-ratio: 2/3; overflow: hidden; }
.pillar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.pillar::after { content: ""; position: absolute; inset: 0; background: rgba(40,28,18,.08); }
.pillar span { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding-bottom: 2%; font-family: var(--f-display); font-size: clamp(30px,3.4vw,50px); letter-spacing: .04em; color: #fff; text-shadow: 0 0 18px rgba(0,0,0,.18); }
.pillars__texts { padding: clamp(20px,2.4vw,32px) 0; }
.pillars__texts p { margin: 0; padding: clamp(4px,.6vw,8px) clamp(14px,1.6vw,26px); text-align: center; font-size: clamp(12.5px,.88vw,14.5px); line-height: 1.75; text-wrap: balance; }
.pillars__texts p + p { border-left: 1px solid var(--cafe); }

/* ── Home · Sostiene ─────────────────────────── */
.sustain { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); background: var(--gris); align-items: stretch; }
.sustain__photo { position: relative; aspect-ratio: 3/4; overflow: hidden; }
.sustain__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sustain__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,28,18,0) 60%, rgba(40,28,18,.22) 100%); }
.sustain__photo span { position: absolute; left: 0; right: 0; bottom: 11%; z-index: 1; text-align: center; font-family: var(--f-display); font-size: clamp(30px,3.4vw,50px); letter-spacing: .04em; color: #fff; text-shadow: 0 0 18px rgba(0,0,0,.18); }
.sustain__body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(30px,3.6vw,50px); padding: clamp(44px,6vw,86px) clamp(26px,4vw,70px); text-align: center; }
.sustain__body p { margin: 0; max-width: min(100%,32em); font-size: clamp(13px,.9vw,14px); line-height: 1.75; text-align: justify; text-align-last: center; }

/* ── Home · Cintillo café ─────────────────────────── */
.band-cafe { background: var(--cafe); padding: clamp(56px,7vw,100px) clamp(20px,5vw,64px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.band-cafe h2 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(24px,3.1vw,44px); letter-spacing: .05em; color: var(--arena); text-wrap: balance; }
.band-cafe p { margin: 0; font-style: italic; font-size: clamp(14px,1.3vw,19px); color: var(--almendra); }

/* ── Banda newsletter ─────────────────────────── */
.news-band { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); min-height: clamp(340px,32vw,440px); overflow: hidden; background: #3d4231; }
.news-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.news-band__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(40,44,32,.32), rgba(40,44,32,.62)); }
.news-band__body { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: clamp(40px,5vw,72px) clamp(26px,4vw,64px); }
.news-band__body h2 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(24px,2.7vw,40px); letter-spacing: .03em; color: #fff; }
.news-band__body > p { margin: 0; font-size: clamp(13px,1.05vw,16px); color: var(--arena); }
.news-band__form { display: flex; flex-direction: column; gap: 16px; max-width: 520px; margin-top: 6px; }
.news-band__form input { border: 0; border-bottom: 1px solid rgba(234,222,208,.7); background: transparent; padding: 9px 2px; font-size: 14px; color: #fff; outline: none; }
.news-band__form input:focus { border-bottom-color: #fff; }
.news-band__form .btn { margin-top: 12px; }
.news-band__msg { margin: 0; font-style: italic; font-size: 13.5px; color: var(--arena); }

/* ── Modal newsletter (sin scroll vertical) ─────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: clamp(12px,3vw,40px); background: rgba(28,22,15,.62); backdrop-filter: blur(3px); animation: iycFade .35s ease both; }
.modal[hidden] { display: none; }
.modal__card { position: relative; width: 100%; max-width: min(1240px, calc((100vh - 48px) * 1.62)); height: min(860px, calc(100vh - 48px)); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; background: #fff; box-shadow: 0 30px 80px rgba(20,14,8,.35); animation: iycUp .45s ease both; }
.modal__media { position: relative; min-height: 0; overflow: hidden; }
.modal__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.modal__body { position: relative; display: flex; flex-direction: column; justify-content: center; gap: min(2.4vw,3.2vh,34px); min-height: 0; padding: min(5vw,7vh,72px) clamp(24px,3.4vw,48px) min(4vw,5vh,56px); }
.modal__close { position: absolute; top: clamp(14px,1.6vw,22px); right: clamp(14px,1.6vw,22px); width: 44px; height: 44px; border-radius: 50%; border: 1.2px solid var(--cafe); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; padding: 0 0 3px; transition: background .3s ease, color .3s ease; }
.modal__close:hover { background: var(--cafe); color: #fff; }
.modal__title { margin: 0; text-align: center; font-weight: 400; font-size: max(24px, min(2.85vw,4.6vh,46px)); line-height: 1.12; letter-spacing: .01em; }
.modal__text { margin: 0; font-size: max(14px, min(1.4vw,2.2vh,21px)); line-height: 1.75; text-align: justify; }
.modal__form { display: flex; flex-direction: column; align-items: center; gap: min(3.4vw,4.4vh,50px); margin-top: min(2.4vw,2.6vh,40px); }
.modal__label { align-self: stretch; display: flex; flex-direction: column; gap: 6px; font-size: clamp(14px,1.15vw,17px); }
.modal__label input { border: 0; border-bottom: 1px solid var(--cafe); background: transparent; padding: 10px 2px; font-size: 16px; outline: none; }
.modal__thanks { margin: min(2.4vw,2.6vh,40px) 0 0; text-align: center; font-style: italic; font-size: clamp(16px,1.5vw,22px); color: var(--musgo); }
.modal__legal { margin: 0; font-size: max(12px, min(1.05vw,1.7vh,15.5px)); line-height: 1.65; }
.modal__legal a { text-decoration: underline; text-underline-offset: 3px; }
body.modal-open { overflow: hidden; }

/* ── Conócenos ─────────────────────────── */
.about-hero { position: relative; aspect-ratio: 1732/849; min-height: 420px; overflow: hidden; display: flex; align-items: center; padding: 6% 0 0 clamp(20px,17vw,330px); background: var(--almendra); }
.about-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.about-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(74,54,38,.22) 0%, rgba(74,54,38,.06) 50%, rgba(74,54,38,0) 100%), linear-gradient(180deg, rgba(48,33,22,.55) 0px, rgba(48,33,22,.28) 110px, rgba(48,33,22,0) 190px); }
.about-hero__content { position: relative; max-width: 640px; text-align: center; animation: iycUp 1s ease both; }
.about-hero__content h1 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(26px,3.3vw,60px); letter-spacing: .05em; color: #fff; }
.about-hero__content p { margin: .2em 0 0; font-style: italic; font-weight: 600; font-size: clamp(15px,1.75vw,32px); color: #fff; }

.quote { padding: clamp(48px,6vw,110px) clamp(20px,5vw,64px) clamp(52px,7.6vw,140px); text-align: center; }
.quote__text { max-width: min(100%,28em); margin: 0 auto; font-family: var(--f-display); font-size: clamp(19px,2.5vw,44px); line-height: 1.5; text-wrap: balance; }
.quote__author { margin: clamp(18px,2.4vw,40px) 0 0; font-size: clamp(14px,1.75vw,30px); }

.bio { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: calc(clamp(24px,5.6vw,110px) - 5px); align-items: stretch; padding: 0 calc(clamp(20px,4.2vw,80px) - 5px) 0 0; }
.bio__photo { position: relative; aspect-ratio: 268/325; overflow: hidden; align-self: start; }
.bio__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.bio__body { display: flex; flex-direction: column; gap: clamp(12px,1.5vw,28px); }
.bio__body p { margin: 0; font-size: clamp(14px,1.22vw,21.5px); line-height: 1.7; text-align: justify; }
.bio__seals { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; margin: auto 0; padding: clamp(8px,1vw,18px) 0; position: relative; top: -20px; }
.bio__seals img { width: clamp(64px,7.4vw,140px); height: auto; }

.purpose { position: relative; display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,2.4fr); gap: clamp(24px,3vw,60px); align-items: center; padding: clamp(48px,5.4vw,104px) clamp(26px,4.4vw,90px) clamp(48px,5.4vw,104px) clamp(26px,9.4vw,180px); overflow: hidden; background: var(--cafe); }
.purpose__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.purpose__shade { position: absolute; inset: 0; background: rgba(48,33,22,.3); }
.purpose h2 { position: relative; margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(26px,3.3vw,62px); line-height: 1.15; letter-spacing: .02em; color: #fff; }
.purpose__body { position: relative; display: flex; flex-direction: column; gap: clamp(16px,2.2vw,40px); }
.purpose__body p { margin: 0; font-size: clamp(13px,1.2vw,22px); line-height: 1.75; color: #fff; text-align: justify; }

/* ── Contacto ─────────────────────────── */
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px,100%),1fr)); gap: clamp(34px,5vw,80px); padding: clamp(140px,11vw,180px) clamp(24px,5vw,72px) clamp(52px,7vw,104px); align-items: start; }
.contact__intro { display: flex; flex-direction: column; gap: 18px; padding-right: clamp(0px,3vw,40px); }
.contact__intro p { margin: 0; max-width: 440px; font-size: clamp(13.5px,1.05vw,16px); line-height: 1.9; }
.contact__form { display: flex; flex-direction: column; gap: 26px; padding-left: clamp(0px,3vw,52px); }
.contact__form .btn { align-self: flex-start; margin-top: 8px; }
.contact__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px,100%),1fr)); gap: 26px; }
.field { display: flex; flex-direction: column; gap: 6px; font-family: var(--f-label); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8a7561; }
.field input, .field select, .field textarea { border: 0; border-bottom: 1px solid rgba(74,54,38,.4); background: transparent; padding: 10px 2px; font-family: var(--f-text); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--cafe); outline: none; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--musgo); }
.field__error { font-family: var(--f-text); font-size: 12.5px; letter-spacing: 0; text-transform: none; color: #9a3b2b; }
.contact__thanks { margin: 0; font-style: italic; font-size: 14px; color: var(--musgo); }

/* ── Footer ─────────────────────────── */
.site-footer { background: var(--arena); padding: clamp(40px,5vw,66px) clamp(24px,5vw,72px) clamp(26px,3vw,40px); }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px,100%),1fr)); gap: clamp(28px,4vw,56px); align-items: start; }
.site-footer__logo { justify-self: center; }
.site-footer__logo img { margin-top: 4px; width: clamp(85px, calc(6.93vw + 3px), 117px); height: auto; mix-blend-mode: multiply; }
.site-footer__col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.site-footer__col h3 { margin: 0 0 4px; font-family: var(--f-label); font-weight: 600; font-size: 14px; letter-spacing: .04em; }
.site-footer__col > a { font-size: 14px; line-height: 1.3; transition: color .25s ease; }
.social { display: flex; gap: 16px; align-items: center; }
.social a { display: flex; width: 33px; height: 33px; align-items: center; justify-content: center; }
.social svg { width: 24px; height: 24px; filter: drop-shadow(0 0 1px rgba(74,54,38,.55)); transition: transform .25s ease, filter .25s ease; }
.social a:hover svg { transform: scale(1.2); filter: drop-shadow(0 0 3px rgba(74,54,38,.5)); }
.site-footer__legal { margin: clamp(30px,4vw,54px) 0 0; text-align: center; font-size: 11.5px; line-height: 1.7; color: #6b5540; }

/* ── Móvil (< 720px): todo se centra y apila ─────────────────────────── */
@media (max-width: 719.98px) {
  .site-header { display: flex; flex-direction: column; justify-content: center; }
  .site-header__spacer { display: none; }
  .survival, .pillars__row, .sustain, .news-band, .bio, .purpose { grid-template-columns: 1fr; }
  .pillars__texts p + p { border-left: 0; }
  .bio { padding: 0; }
  .bio__body { padding: 0 20px 40px; }
  .bio__seals { top: 0; justify-content: center; }
  .about-hero { padding: 6% 20px 0; justify-content: center; }
  .modal__card { grid-template-columns: 1fr; grid-template-rows: 28vh 1fr; height: calc(100vh - 24px); }
  .site-footer__col { align-items: center; text-align: center; }
}