/* ============================================================
   Jáuregui Abogados — Landing "Inicio"
   Paleta y tipografía tomadas EXACTAMENTE del diseño aprobado
   en Canva (SVG/PNG). No modificar sin autorización del cliente.
   ============================================================ */

/* ---------- Tipografía definitiva: CY Grotesk Wide ----------
   Licencia comercial provista por el cliente. 7 pesos estáticos
   (no es una fuente variable), cada uno como @font-face propio con
   su font-weight numérico correspondiente — así el navegador nunca
   sintetiza un peso (negrita falsa) y siempre pide el archivo
   correcto para cada font-weight usado en el CSS. */
@font-face {
  font-family: 'CY Grotesk Wide';
  src: url('../fonts/CYGroteskWide-Thin.woff2') format('woff2'),
       url('../fonts/CYGroteskWide-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CY Grotesk Wide';
  src: url('../fonts/CYGroteskWide-Light.woff2') format('woff2'),
       url('../fonts/CYGroteskWide-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CY Grotesk Wide';
  src: url('../fonts/CYGroteskWide-Regular.woff2') format('woff2'),
       url('../fonts/CYGroteskWide-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CY Grotesk Wide';
  src: url('../fonts/CYGroteskWide-Medium.woff2') format('woff2'),
       url('../fonts/CYGroteskWide-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CY Grotesk Wide';
  src: url('../fonts/CYGroteskWide-Demi.woff2') format('woff2'),
       url('../fonts/CYGroteskWide-Demi.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CY Grotesk Wide';
  src: url('../fonts/CYGroteskWide-Dark.woff2') format('woff2'),
       url('../fonts/CYGroteskWide-Dark.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CY Grotesk Wide';
  src: url('../fonts/CYGroteskWide-Black.woff2') format('woff2'),
       url('../fonts/CYGroteskWide-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colores — extraídos directamente del SVG aprobado */
  --color-bg: #1a1a1a;
  --color-bg-alt: #2c2c2c;
  --color-white: #ffffff;
  --color-gold: #dbae29;

  /* Tipografía definitiva — CY Grotesk Wide (única familia real del
     diseño en Canva, en distintos pesos). Reemplaza el placeholder
     temporal (Playfair Display / Oswald / Jost) usado hasta ahora.

     Las tres variables apuntan a la MISMA familia; lo que cambia es
     el peso numérico según el rol (ver --weight-* más abajo y los
     font-weight puntuales en .hero h1, .section-title, etc.):
       - display (títulos grandes): peso Light (300) por defecto —
         aproxima el trazo fino y elegante del diseño original.
       - label (etiquetas en mayúscula, nav, botones): peso Medium
         (500) por defecto.
       - body (texto de párrafo, inputs): peso Regular (400).

     TODO (auditoría visual pendiente): estos pesos son una elección
     razonable a falta de una referencia de peso exacto (el SVG de
     Canva vectorizó todo el texto como curvas, así que no hay forma
     de leer el peso original del archivo). Comparar contra el PNG
     aprobado y ajustar si el grosor de trazo no coincide — ver
     docs/PRODUCTION_REPORT.md. */
  --font-display: 'CY Grotesk Wide', Arial, sans-serif;
  --font-label: 'CY Grotesk Wide', Arial, sans-serif;
  --font-body: 'CY Grotesk Wide', Arial, sans-serif;

  --weight-display: 300;
  --weight-label: 500;
  --weight-body: 400;
  --weight-button: 600;

  --container-width: 1024px;
  --section-padding: clamp(48px, 8vw, 96px);

  --transition-fast: 0.2s ease;
  --transition-medium: 0.4s ease;
}

/* ---------- Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
picture { display: block; }

a { color: inherit; text-decoration: none; }

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

/* Foco visible para accesibilidad de teclado en TODOS los elementos interactivos */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-gold);
  color: var(--color-bg);
  padding: 12px 20px;
  z-index: 1000;
  font-family: var(--font-label);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.skip-link:focus {
  left: 24px;
  top: 12px;
}

/* ---------- Tipografía compartida ---------- */
.eyebrow {
  font-family: var(--font-label);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: var(--color-white);
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: 1.15;
  margin: 0 0 24px;
  /* Tamaño por defecto; cada sección lo sobreescribe abajo con el valor
     medido específicamente contra el diseño original (Canva no usa una
     escala tipográfica uniforme: cada título fue ajustado manualmente). */
  font-size: clamp(2rem, 5vw, 3.2rem);
}

.section-title .accent { color: var(--color-gold); }

/* Tamaños recalibrados para CY Grotesk Wide (más ancha que la tipografía
   placeholder usada antes). Valor original (medido contra el PNG con
   Playfair Display) dividido por la relación de ancho real medida entre
   ambas fuentes para el mismo texto, así se conserva la proporción ya
   validada contra el diseño aprobado en vez de volver a estimar a ojo.
   TODO: confirmar visualmente contra el PNG original (ver docs/PRODUCTION_REPORT.md). */
.hero h1 {
  font-size: clamp(1.85rem, 8.25vw, 5.3rem);
}
.about .section-title {
  font-size: clamp(1.85rem, 6.4vw, 4.1rem);
}
#por-que-elegirnos .section-title {
  font-size: clamp(1.7rem, 6vw, 3.85rem);
}
#areas-practica .section-title {
  font-size: clamp(1.25rem, 3.4vw, 2.2rem);
}
#faq .section-title {
  font-size: clamp(1.2rem, 2.45vw, 1.6rem);
}
#blog .section-title {
  font-size: clamp(1.3rem, 2.85vw, 1.85rem);
}

/* ---------- Header / navegación sticky ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(26, 26, 26, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background var(--transition-medium);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  max-width: var(--container-width);
  margin: 0 auto;
}

.logo {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 1.4rem;
  letter-spacing: 0.02em;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-gold);
  color: var(--color-white);
  width: 44px;
  height: 44px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; }

.main-nav__list {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav__list a {
  font-family: var(--font-label);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  position: relative;
  padding: 4px 0;
}

.main-nav__list a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--color-gold);
  transition: width var(--transition-fast);
}
.main-nav__list a:hover::after,
.main-nav__list a:focus-visible::after {
  width: 100%;
}

.main-nav__cta {
  font-family: var(--font-label);
  font-weight: var(--weight-button);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  border: 1px solid var(--color-gold);
  color: var(--color-gold) !important;
  padding: 10px 20px;
}
.main-nav__cta:hover,
.main-nav__cta:focus-visible {
  background: var(--color-gold);
  color: var(--color-bg) !important;
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed;
    inset: 0 0 0 30%;
    background: var(--color-bg);
    transform: translateX(100%);
    transition: transform var(--transition-medium);
    padding: 100px 32px 32px;
    border-left: 1px solid rgba(255,255,255,0.08);
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav__list {
    flex-direction: column;
    gap: 24px;
  }
}

/* ---------- Botones reales ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-label);
  font-weight: var(--weight-button);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  padding: 14px 28px;
  border: 1px solid var(--color-gold);
  background: transparent;
  color: var(--color-gold);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.btn:hover, .btn:focus-visible {
  background: var(--color-gold);
  color: var(--color-bg);
  transform: translateY(-2px);
}
.btn--solid {
  background: var(--color-gold);
  color: var(--color-bg);
}
.btn--solid:hover, .btn--solid:focus-visible {
  background: transparent;
  color: var(--color-gold);
}

/* ---------- Hero ---------- */
.hero {
  padding: 64px 0 var(--section-padding);
  text-align: center;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  margin: 0 0 8px;
  /* font-size calibrado más arriba, junto al resto de .section-title */
}
.hero__tagline {
  font-family: var(--font-label);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: clamp(0.75rem, 2vw, 0.95rem);
  margin: 0 0 40px;
}
.hero__tagline .accent { color: var(--color-gold); }

.hero__image-wrap {
  max-width: 760px;
  margin: 0 auto 32px;
  overflow: hidden;
}
.hero__image-wrap img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.hero__cta {
  font-family: var(--font-label);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--color-gold);
  padding-bottom: 4px;
}

/* ---------- Secciones genéricas ---------- */
.section {
  padding: var(--section-padding) 0;
}
.section--alt { background: var(--color-bg-alt); }

/* ---------- Distinción / filosofía ---------- */
.about {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
}
.about__portrait-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.about__portrait-img {
  filter: grayscale(100%);
  width: 100%;
  height: auto;
  object-fit: cover;
}
.about__copy-full {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.9);
  max-width: 42ch;
}
.about__copy-full strong { color: var(--color-gold); font-weight: 600; }

.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.testimonial p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
}
.testimonial strong { color: var(--color-gold); }

@media (max-width: 760px) {
  .about { grid-template-columns: 1fr; }
  .testimonials { grid-template-columns: 1fr; }
}

/* ---------- Áreas de práctica ---------- */
.practice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
  margin-top: 40px;
}
.practice-card h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  color: var(--color-gold);
  font-size: 1.4rem;
  margin: 0 0 12px;
}
.practice-card p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
  margin: 0;
}

@media (max-width: 860px) {
  .practice-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .practice-grid { grid-template-columns: 1fr; }
}

/* ---------- Por qué elegirnos ---------- */
.why {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
}
.why__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.why__list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 14px;
  font-family: var(--font-label);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}
.why__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.5em;
  width: 8px; height: 8px;
  background: var(--color-gold);
}
.why__stats {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.why__stat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.why__stat .star {
  color: var(--color-gold);
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}
.why__stat h4 {
  font-family: var(--font-label);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  margin: 0 0 6px;
}
.why__stat p { margin: 2px 0; color: rgba(255,255,255,0.75); font-size: 0.9rem; }

@media (max-width: 760px) {
  .why { grid-template-columns: 1fr; }
}

/* ---------- FAQ (acordeón) ---------- */
.faq-list { margin-top: 32px; border-top: 1px solid rgba(255,255,255,0.12); }
.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  color: var(--color-white);
  font-family: var(--font-label);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  text-align: left;
  padding: 22px 4px;
  cursor: pointer;
}
.faq-item__icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  position: relative;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  background: var(--color-gold);
  transition: transform var(--transition-fast);
}
.faq-item__icon::before { left: 0; top: 50%; width: 100%; height: 1px; transform: translateY(-50%); }
.faq-item__icon::after { top: 0; left: 50%; width: 1px; height: 100%; transform: translateX(-50%); }
.faq-item[open] .faq-item__icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }

.faq-item__answer {
  padding: 0 4px 22px;
  color: rgba(255,255,255,0.75);
  font-size: 0.92rem;
  max-width: 65ch;
}
.faq-item__answer em {
  color: var(--color-gold);
  font-style: normal;
}

/* Animación suave de apertura respetando prefers-reduced-motion */
.faq-item summary { list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }

/* ---------- Formulario de consulta ---------- */
.appointment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.appointment__image img { width: 100%; height: auto; object-fit: cover; }

.form-field {
  margin-bottom: 20px;
}
.form-field label {
  display: block;
  font-family: var(--font-label);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  margin-bottom: 8px;
}
.form-field input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 8px 4px;
  transition: border-color var(--transition-fast);
}
.form-field input:focus {
  border-color: var(--color-gold);
  outline: none;
}
.form-field input:invalid:not(:placeholder-shown) {
  border-color: #e37e6c;
}
.form-field__error {
  display: none;
  color: #e37e6c;
  font-size: 0.78rem;
  margin-top: 6px;
}
.form-field.has-error .form-field__error { display: block; }
.form-field.has-error input { border-color: #e37e6c; }

.appointment__note {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
  margin: 24px 0;
}

.form-status {
  margin-top: 16px;
  font-size: 0.9rem;
}
.form-status[data-state="success"] { color: var(--color-gold); }
.form-status[data-state="error"] { color: #e37e6c; }

.appointment__divider {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  margin: 24px 0;
}
.appointment__meet-cta {
  display: flex;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  width: 100%;
}
/* Pendiente: sacar esta regla cuando se active el link real de Google Calendar */
.appointment__meet-cta[href="#"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 760px) {
  .appointment { grid-template-columns: 1fr; }
}

/* ---------- Blog (estructura vacía) ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}
.blog-card {
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
}
.blog-card__image {
  aspect-ratio: 4 / 3;
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.35);
  font-family: var(--font-label);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 16px;
}
.blog-card__body { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.blog-card__category {
  font-family: var(--font-label);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--color-gold);
  margin-bottom: 10px;
}
.blog-card__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: var(--weight-display);
  margin: 0 0 10px;
  color: rgba(255,255,255,0.4);
}
.blog-card__excerpt {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.4);
  flex-grow: 1;
  margin: 0 0 16px;
}
.blog-card__link {
  font-family: var(--font-label);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.3);
  pointer-events: none;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 12px;
}

@media (max-width: 860px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-bg-alt);
  padding: var(--section-padding) 0 32px;
  font-size: 0.88rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
.footer-col h4 {
  font-family: var(--font-label);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--color-gold);
  margin: 0 0 16px;
}
.footer-col p, .footer-col li { color: rgba(255,255,255,0.7); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a:hover, .footer-col a:focus-visible { color: var(--color-gold); }
.footer-pending {
  color: rgba(255,255,255,0.4);
  font-style: italic;
}
.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
}

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Back to top ----------
   Apilado arriba del botón de WhatsApp (ambos en la esquina inferior
   derecha) para que no se superpongan. */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 92px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gold);
  color: var(--color-bg);
  border: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 90;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---------- WhatsApp flotante ----------
   Pastilla con el texto "Comunicate" a la izquierda y el ícono a la
   derecha, fija en la esquina inferior derecha (pedido del cliente). */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: #25D366;
  color: #ffffff;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  z-index: 90;
  transition: transform var(--transition-fast);
}
.whatsapp-float__label {
  font-family: var(--font-label);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  white-space: nowrap;
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  transform: scale(1.05);
}

@media (max-width: 480px) {
  /* En pantallas muy angostas, solo el ícono (evita que la pastilla
     con texto choque contra el borde de la pantalla). */
  .whatsapp-float__label { display: none; }
  .whatsapp-float { padding: 14px; border-radius: 50%; }
}

/* ---------- Partners (sección oculta hasta tener contenido) ---------- */
.partners-grid {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
  align-items: center;
}
.partners-grid img { max-width: 100%; height: auto; filter: grayscale(100%); }
.partners-grid__slot { font-size: 0.85rem; color: rgba(255,255,255,0.6); }
[hidden] { display: none !important; }