/* ============================================================
   Villa del Bosque — main.css
   Merged: fonts + color tokens + spacing tokens + typography tokens + site styles
   Paths relative to assets/css/ → fonts: ../webfonts/ | images: ../site/
   ============================================================ */

/* ---------- Webfonts ---------- */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../webfonts/dancing-script-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../webfonts/dancing-script-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../webfonts/lora-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../webfonts/lora-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../webfonts/lora-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../webfonts/lora-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../webfonts/lora-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../webfonts/poppins-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../webfonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../webfonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../webfonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../webfonts/poppins-700.woff2') format('woff2');
}

/* ---------- Color tokens ---------- */
:root {
  --vdb-paper: #F2E9E3;
  --vdb-paper-2: #EFE4D9;
  --vdb-sand: #E8DCD2;
  --vdb-wood: #E2C6AD;
  --vdb-taupe: #CFC1B5;
  --vdb-white: #FFFFFF;

  --vdb-brown-900: #4A3018;
  --vdb-brown-800: #57391F;
  --vdb-brown-700: #6E4B2A;
  --vdb-brown-600: #855E3A;
  --vdb-bronze: #B8966F;
  --vdb-bronze-300: #CFB593;

  --vdb-olive: #43453D;
  --vdb-forest: #3E4A36;
  --vdb-ink: #3A352F;
  --vdb-stone: #7A6F63;
  --vdb-pool: #57B0C4;

  --surface-page: var(--vdb-paper);
  --surface-band: var(--vdb-paper-2);
  --surface-panel: var(--vdb-sand);
  --surface-card: var(--vdb-white);
  --surface-dark: var(--vdb-forest);
  --surface-closing: var(--vdb-taupe);

  --text-heading: var(--vdb-brown-700);
  --text-heading-alt: var(--vdb-olive);
  --text-body: var(--vdb-ink);
  --text-muted: var(--vdb-stone);
  --text-on-dark: #F6F0EB;
  --text-accent: var(--vdb-bronze);

  --border-hairline: rgba(110, 75, 42, 0.35);
  --border-frame: var(--vdb-wood);

  --scrim-light: rgba(246, 240, 235, 0.62);
  --scrim-light-strong: rgba(246, 240, 235, 0.82);
  --scrim-dark: rgba(62, 74, 54, 0.55);
  --scrim-rose: rgba(205, 162, 134, 0.45);
}

/* ---------- Spacing & radii tokens ---------- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --container-max: 1140px;
  --section-pad-y: var(--space-9);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-photo: 16px;
  --radius-pill: 999px;

  --hairline: 1px solid var(--border-hairline);

  --shadow-card: 0 10px 30px rgba(74, 48, 24, 0.10);
  --shadow-photo: 0 14px 40px rgba(74, 48, 24, 0.16);
  --shadow-float: 0 4px 14px rgba(74, 48, 24, 0.08);

  --blur-scrim: 6px;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur-slow: 420ms;
}

/* ---------- Typography tokens ---------- */
:root {
  --font-display: 'Lora', Georgia, serif;
  --font-serif: 'Lora', Georgia, serif;
  --font-sans: 'Poppins', 'Segoe UI', sans-serif;
  --font-script: 'Dancing Script', cursive;

  --text-hero: 64px;
  --text-h1: 44px;
  --text-h2: 32px;
  --text-h3: 24px;
  --text-lead: 20px;
  --text-body-size: 17px;
  --text-caption: 14px;
  --text-overline: 13px;

  --leading-tight: 1.15;
  --leading-display: 1.25;
  --leading-body: 1.65;

  --tracking-overline: 0.22em;
  --tracking-display: 0.01em;

  --weight-display: 500;
  --weight-body: 400;
  --weight-ui: 500;
}

/* ---------- Site styles ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
img { display: block; }
a { color: inherit; }
section { scroll-margin-top: 72px; }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 28px; }

/* Reveal animations */
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
html.js .reveal.in { opacity: 1; transform: none; }
html.js .reveal.d1 { transition-delay: 0.12s; }
html.js .reveal.d2 { transition-delay: 0.24s; }
html.js .reveal.d3 { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Header ---------- */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.hdr-in {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0;
  transition: padding 0.35s var(--ease-out);
}
.hdr .logo { height: 48px; transition: height 0.35s var(--ease-out); }
.hdr .logo-brown { display: none; }
.hdr nav { display: flex; gap: 30px; align-items: center; }
.hdr nav a.nl {
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.05em;
  color: #fff; text-decoration: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  transition: opacity 0.18s;
}
.hdr nav a.nl:hover { opacity: 0.75; }
.hdr.solid {
  background: rgba(242, 233, 227, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(110, 75, 42, 0.16);
}
.hdr.solid .hdr-in { padding: 10px 0; }
.hdr.solid .logo { height: 40px; }
.hdr.solid .logo-white { display: none; }
.hdr.solid .logo-brown { display: block; }
.hdr.solid nav a.nl { color: var(--vdb-brown-700); text-shadow: none; }

.lang-sw { position: relative; display: flex; align-items: center; }
.lang-sw select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  color: #fff; background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55); border-radius: var(--radius-pill);
  padding: 5px 26px 5px 12px; cursor: pointer; outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
  transition: border-color 0.2s, color 0.2s;
}
.lang-sw select option { background: var(--surface-page); color: var(--text-body); }
.hdr.solid .lang-sw select {
  color: var(--vdb-brown-700); border-color: rgba(110, 75, 42, 0.35);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236E4B2A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none;
  border-radius: var(--radius-pill); padding: 14px 34px; cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-light { background: rgba(255, 255, 255, 0.92); color: var(--vdb-brown-800); }
.btn-light:hover { background: #fff; }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.14); }
.btn-brown { background: var(--vdb-brown-700); color: var(--text-on-dark); }
.btn-brown:hover { background: var(--vdb-brown-800); }
.btn-outline { background: transparent; color: var(--vdb-brown-700); border-color: rgba(110, 75, 42, 0.4); }
.btn-outline:hover { background: rgba(110, 75, 42, 0.07); }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100vh; min-height: 620px; overflow: hidden; background: #1c1a14; }
.hero .bg {
  position: absolute; inset: -220px 0;
  background: url('../site/hero-main.webp') center 60% / cover;
  will-change: transform;
}
.hero .veil { position: absolute; inset: 0; background: linear-gradient(rgba(40, 30, 20, 0.25), rgba(40, 30, 20, 0.18) 55%, rgba(40, 30, 20, 0.42)); }
.hero-in {
  position: relative; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; text-align: center; padding: 0 24px;
}
.hero .kicker {
  font-size: 13px; font-weight: 500; letter-spacing: var(--tracking-overline);
  text-transform: uppercase; color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}
.hero .wordmark {
  margin: 0;
  font-family: var(--font-script); font-weight: 700; font-size: clamp(64px, 9.5vw, 132px);
  line-height: 1.05; color: #fff; text-shadow: 0 4px 44px rgba(0, 0, 0, 0.3);
}
.hero .lead {
  margin: 0; max-width: 640px;
  font-weight: 300; font-size: 18px; line-height: 1.75;
  color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
.hero .ctas { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
.hero .scroll-hint {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85); font-size: 22px; text-decoration: none;
  animation: hint 2.6s var(--ease-out) infinite;
}
@keyframes hint { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
@media (prefers-reduced-motion: reduce) { .hero .scroll-hint { animation: none; } }

/* ---------- Shared section bits ---------- */
.sec { padding: var(--space-10) 0; }
.kick-script { font-family: var(--font-script); font-size: 26px; color: var(--vdb-bronze); line-height: 1.2; }
.kick-over {
  font-size: 13px; font-weight: 500; letter-spacing: var(--tracking-overline);
  text-transform: uppercase; color: var(--vdb-brown-600);
}
h2.ttl {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 4vw, 46px); line-height: 1.18; color: var(--text-heading);
  text-wrap: balance;
}
.rule { display: flex; align-items: center; gap: 11px; }
.rule i { flex: 1; border-top: 1px solid var(--border-hairline); }
.rule span { font-size: 13px; color: var(--vdb-brown-600); font-style: normal; }
.rule.on-dark i { border-color: rgba(246, 240, 235, 0.5); }
.rule.on-dark span { color: rgba(246, 240, 235, 0.85); }

ul.sparks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
ul.sparks li { display: flex; gap: 13px; align-items: baseline; font-size: 17px; line-height: 1.55; }
ul.sparks li::before { content: '✳'; font-size: 11px; color: var(--vdb-brown-600); flex-shrink: 0; }
ul.sparks.on-dark li { color: var(--text-on-dark); font-weight: 300; }
ul.sparks.on-dark li::before { color: rgba(246, 240, 235, 0.85); }

/* ---------- Concepto ---------- */
.concepto { position: relative; min-height: 780px; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 90px 24px; }
.concepto .bg { position: absolute; inset: -180px 0; background: url('../site/hotel-154.webp') center / cover; will-change: transform; }
.concepto .circle {
  position: relative; width: min(620px, 92vw); aspect-ratio: 1 / 1; border-radius: 50%;
  background: var(--scrim-light); backdrop-filter: blur(var(--blur-scrim)); -webkit-backdrop-filter: blur(var(--blur-scrim));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; padding: clamp(40px, 7vw, 84px); text-align: center;
}
.concepto .circle h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(36px, 4.4vw, 52px); color: var(--text-heading); }
.concepto .circle p { margin: 0; font-family: var(--font-serif); font-size: clamp(15px, 1.5vw, 19px); line-height: 1.6; color: var(--vdb-ink); }

/* ---------- Filosofía ---------- */
.filosofia .grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center; }
.filosofia .copy { display: flex; flex-direction: column; gap: 24px; }
.filosofia .copy p.body { margin: 0; font-size: 17px; line-height: var(--leading-body); }
.filosofia .copy p.quote {
  margin: 0; font-family: var(--font-serif); font-style: italic;
  font-size: 21px; line-height: 1.6; color: var(--text-heading);
}
.filosofia .photo { border-radius: var(--radius-photo); box-shadow: var(--shadow-photo); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Servicios ---------- */
.servicios { background: var(--surface-band); }
.servicios .head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin-bottom: 60px; }
.servicios .head p { margin: 0; max-width: 620px; color: var(--text-muted); font-size: 17px; line-height: var(--leading-body); }
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px 30px; }
.svc { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.svc .ph { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-photo); overflow: hidden; box-shadow: var(--shadow-card); }
.svc .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.svc:hover .ph img { transform: scale(1.045); }
.svc figcaption { font-family: var(--font-display); font-weight: 500; font-size: 21px; line-height: 1.3; color: var(--text-heading); }

/* ---------- Fútbol ---------- */
.futbol { position: relative; min-height: 560px; overflow: hidden; display: flex; }
.futbol .bg { position: absolute; inset: -180px 0; background: url('../site/football-field.webp') center / cover; will-change: transform; }
.futbol .panel {
  position: relative; flex: 0 0 46%; max-width: 600px; min-width: min(100%, 480px);
  background: var(--scrim-dark); backdrop-filter: blur(var(--blur-scrim)); -webkit-backdrop-filter: blur(var(--blur-scrim));
  display: flex; flex-direction: column; justify-content: center; gap: 24px;
  padding: 84px 72px;
}
.futbol .panel h2 { color: var(--text-on-dark); }
.futbol .panel .kick-over { color: rgba(246, 240, 235, 0.75); }
.futbol .panel p { margin: 0; font-weight: 300; font-size: 17px; line-height: var(--leading-body); color: var(--text-on-dark); }

/* ---------- Galerías ---------- */
.galeria .head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin-bottom: 56px; }
.galeria .head p { margin: 0; max-width: 640px; color: var(--text-muted); font-size: 17px; line-height: var(--leading-body); }
.gal-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 230px; gap: 20px;
}
.gal-grid a.it {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-photo); box-shadow: var(--shadow-card);
  cursor: zoom-in;
}
.gal-grid a.it img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.gal-grid a.it:hover img { transform: scale(1.035); }
.gal-grid a.it::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(74, 48, 24, 0); transition: background var(--dur-fast) var(--ease-out);
}
.gal-grid a.it:hover::after { background: rgba(74, 48, 24, 0.08); }
.gal-grid .w2 { grid-column: span 2; }
.gal-grid .h2 { grid-row: span 2; }

/* Lightbox */
.lb {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(42, 32, 22, 0.92);
  display: none; align-items: center; justify-content: center;
}
.lb.open { display: flex; }
.lb img {
  max-width: min(1400px, 90vw); max-height: 86vh;
  border-radius: var(--radius-md); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}
.lb button {
  position: absolute; background: rgba(246, 240, 235, 0.12); color: #F6F0EB;
  border: 1px solid rgba(246, 240, 235, 0.35); border-radius: var(--radius-pill);
  width: 52px; height: 52px; font-size: 21px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lb button:hover { background: rgba(246, 240, 235, 0.26); }
.lb .x { top: 26px; right: 26px; }
.lb .prev { left: 26px; top: 50%; transform: translateY(-50%); }
.lb .next { right: 26px; top: 50%; transform: translateY(-50%); }

/* ---------- Instalaciones ---------- */
.instal .grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 72px; align-items: center; }
.instal .copy { display: flex; flex-direction: column; gap: 26px; }
.instal .collage { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.instal .collage img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-photo); box-shadow: var(--shadow-photo); }
.instal .collage img.tall { grid-row: 1 / 3; aspect-ratio: 3 / 4.4; }
.instal .collage img.sq { aspect-ratio: 1 / 1; }

/* ---------- Tarifas ---------- */
.tarifas { background: var(--surface-panel); }
.tarifas .head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin-bottom: 56px; }
.tarifas .head p { margin: 0; max-width: 660px; color: var(--text-muted); font-size: 17px; line-height: var(--leading-body); }
.rate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: stretch; }
.rate {
  background: var(--surface-card); border: 1px solid rgba(110, 75, 42, 0.14);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 52px 44px; display: flex; flex-direction: column; gap: 24px;
  align-items: center; text-align: center;
}
.rate.featured { background: var(--vdb-paper); border-color: var(--vdb-wood); }
.rate h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 30px; color: var(--text-heading); }
.rate p.lead { margin: 0; font-size: 16px; line-height: 1.65; }
.rate ul.sparks { gap: 10px; }
.rate ul.sparks li { font-size: 15px; color: var(--text-muted); }
.rate .spacer { flex: 1; }

/* ---------- Ubicación ---------- */
.ubicacion .grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px; align-items: center; }
.ubicacion .copy { display: flex; flex-direction: column; gap: 26px; }
.ubicacion .copy p.quote { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 20px; line-height: 1.6; color: var(--text-heading); }
.ubicacion img.aerial { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: var(--radius-photo); box-shadow: var(--shadow-photo); }

/* ---------- Contacto / footer ---------- */
.contacto { background: var(--surface-closing); padding: 96px 0 48px; }
.contacto .in { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.contacto img.logo { width: min(480px, 80vw); }
.contacto .lines { display: flex; flex-direction: column; gap: 6px; font-size: 19px; color: var(--vdb-brown-800); }
.contacto .lines a { text-decoration: none; }
.contacto .lines a:hover { text-decoration: underline; }
.contacto .ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.contacto .legal { font-size: 13px; color: var(--vdb-brown-700); margin: 0; }
.contacto .rule { width: min(380px, 70vw); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .filosofia .grid, .instal .grid, .ubicacion .grid { grid-template-columns: 1fr; gap: 44px; }
  .rate-grid { grid-template-columns: 1fr; }
  .futbol .panel { flex-basis: 100%; max-width: none; padding: 72px 40px; }
  .hdr nav { gap: 12px; }
  .hdr nav a.nl { display: none; }
  .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .lb .prev { left: 12px; } .lb .next { right: 12px; } .lb .x { top: 12px; right: 12px; }
}
@media (max-width: 600px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .gal-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .futbol .panel { padding: 56px 28px; }
  .hdr nav a.btn { display: none; }
}