/* ============================================================
   GEO — Inicio  (page-inicio.php)
   Figma Desktop-1 (1:2) — 1761px wide canvas
   ============================================================ */

/* ── Shared util ─────────────────────────────────────────── */
.hero__bg,
.somos__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* FAQ tiene un STACK de capas de fondo (una por slide) en vez de un único .faq__bg.
   Las capas se apilan absolute y JS hace crossfade + Ken Burns dentro del timeline
   GSAP. La capa con .is-active es el estado pre-JS (slide 0 visible). */
.faq__bg-stack {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.faq__bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  will-change: transform, opacity;
  /* iniciamos centrados en escala 1; JS pone la capa entrante en 1.08 y la
     anima a 1 para dar Ken Burns */
  transform: translate3d(0,0,0) scale(1);
}

/* Estado pre-JS: la primera capa visible. JS lo sobreescribe al iniciar. */
.faq__bg-layer.is-active { opacity: 1; }

/* Solo FAQ tiene overlay (Figma: #3e3e3e 70% — Rectangle 518-526) */
.faq__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Figma: Rectangle 518 fill=#3e3e3e opacity=0.70 */
  background: rgba(62, 62, 62, 0.70);
}

/* ── 1. HERO ─────────────────────────────────────────────── */
/*
 * FIGMA VALORES (Desktop-1, 1761×993px):
 * — DSC_0006 1 bg: x=0 y=1 w=1790 h=993 (sin overlay)
 * — BIENVENIDO AL GRUPO img (7:50): localX=105 localY=392 w=1552 h=656
 * — "¿Qué deseas ver?" (2:17): Montserrat Black 900 22px  localX=763 localY=771 w=236 h=32
 * — CTA buttons (2:3/4/6): 198×42 localY=843
 * — CTA label Inter 400 12px
 */
.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  color: var(--color-white);
}

/* Imagen del título (white text on transparent; z sobre bg) */
.hero__title-img {
  position: absolute;
  left: 5.96%;        /* 105 / 1761 */
  top: 39.5%;         /* 392 / 993  */
  width: 88.14%;      /* 1552 / 1761 */
  height: auto;
  z-index: 1;
  pointer-events: none;
  display: block;
}

/* Label "¿Qué deseas ver?" + CTAs — zona inferior */
/* Figma: CTA bottom edge = 885px desde top de 993px frame → 108px desde bottom */
.hero__content {
  position: absolute;
  bottom: 108px;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  padding: 0 var(--space-lg);
}

/* "¿Qué deseas ver?" — Figma: Montserrat Black 900 22px lineHeight=26.82px */
.hero__cta-label {
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 900;
  line-height: 26.82px;
  letter-spacing: 0;
  margin: 0 0 40px;
  color: var(--color-white);
}

/* CTAs: 3 botones horizontales */
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 138px;
  justify-content: center;
}

/*
 * VALORES NODO (2:11 "AGENDAR VISITA", 2:13 "PRODUCTOS", 2:15 "PREGUNTAS FRECUENTES"):
 * Inter Regular 400, 12px, lineHeightPx=14.52px, color #000000
 * Rect (2:3/4/6): 198×42px, fill #ffe0d9
 * Texto centrado en rect: top-offset=15px en 42px → (42-12)/2=15 ✓
 * inline-flex + align-items:center = centrado garantizado sin trucos de line-height
 * .hero prefix → especificidad > Elementor Kit a:hover/a rules
 */
.hero .hero__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffe0d9;
  color: #000000;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 14.52px;
  letter-spacing: 0;
  min-width: 198px;
  height: 42px;
  padding: 0 24px;
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.2s;
}

.hero .hero__cta-btn:hover { opacity: 0.8; }

/* ── 2. BANNER ───────────────────────────────────────────── */
.banner-bienvenido {
  background-color: #000;
  color: #fff;
  overflow: hidden;
}

/* If a custom ACF image is uploaded, use it full-width */
.banner-bienvenido__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Default: HTML text reproduction (Figma node exports white-on-white) */
.banner-bienvenido__text-wrap {
  padding: 60px var(--space-lg);
  max-width: 1761px;
  margin: 0 auto;
}

.banner-bienvenido__line1,
.banner-bienvenido__line2 {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(64px, 8vw, 120px);
  font-weight: 800;
  line-height: 1;
  color: #fff;
}

.banner-bienvenido__script {
  font-family: 'Ballet', cursive;
  font-weight: 400;
  font-size: 1.1em;
}

/* ── 3. SOMOS ────────────────────────────────────────────── */
/*
 * VALORES DEL NODO — POSICIONES CORREGIDAS
 * Sección "14 1" (267:3): absoluteY=-11513, ancho=1762, alto=955
 * 59:11 "Somos"  : abox.y=-11363 → section-y=150, x=111, w=711, h=190(visual)
 *                  Ballet Regular 400, 200px, lineHeightPx=380(Figma)
 * 59:12 title    : abox.y=-11109 → section-y=404, x=115, w=584, h=48
 *                  Montserrat ExtraBold 800, 40px, lh=48.76px, ls=0
 *                  gap script-bottom→title: 404-(150+190)=64px
 * 59:13 tagline  : abox.y=-11027 → section-y=486, x=127, w=472, h=58
 *                  Montserrat Bold 700, 22px, lh=26.82px, ls=0
 *                  gap title-bottom→tagline: 486-(404+48)=34px
 * 59:14 body     : abox.y=-10969 → section-y=544, x=961, w=734.8, h=180.83
 *                  Montserrat SemiBold 600, 22px, lh=26.82px, ls=-0.44px
 *                  right:65px = 1762-961-735=65 → no desborda el viewport
 */
.somos {
  position: relative;
  min-height: 955px;
  color: #ffffff;
  overflow: hidden;
}

/* 59:11: Ballet Regular 400, 200px | section y=150, x=111 */
.somos__script {
  position: absolute;
  top: 150px;
  left: 111px;
  z-index: 2;
  font-family: 'Ballet', cursive;
  font-size: 200px;
  font-weight: 400;
  line-height: 1;
  margin: 0;
  color: #ffffff;
  pointer-events: none;
  white-space: nowrap;
}

/* 59:12: Montserrat ExtraBold 800, 40px, lh=48.76px | section y=404, x=115, w=584
 * section.somos para ganar sobre Elementor Kit h2 */
section.somos .somos__title {
  position: absolute;
  top: 404px;
  left: 115px;
  z-index: 2;
  font-family: 'Montserrat', sans-serif;
  font-size: 40px;
  font-weight: 800;
  line-height: 48.76px;
  letter-spacing: 0;
  margin: 0;
  color: #ffffff;
  max-width: 584px;
}

/* 59:13: Montserrat Bold 700, 22px, lh=26.82px | section y=486, x=127, w=472 */
.somos__tagline {
  position: absolute;
  top: 486px;
  left: 127px;
  z-index: 2;
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 26.82px;
  letter-spacing: 0;
  margin: 0;
  color: #ffffff;
  max-width: 472px;
}

/* 59:14: Montserrat SemiBold 600, 22px, lh=26.82px, ls=-0.44 | section y=544
 * right:65px en vez de left:961px → el borde derecho queda a 65px del edge, sin overflow */
.somos__inner {
  position: absolute;
  top: 544px;
  right: 65px;
  width: 735px;
  z-index: 2;
}

.somos__body {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 26.82px;
  letter-spacing: -0.44px;
  margin: 0 0 16px;
  color: #ffffff;
}
.somos__body:last-child { margin: 0; }

/* ── 4. FAQ ──────────────────────────────────────────────── */
/*
 * FIGMA VALORES:
 * — Overlay: Rectangle 518 → fill=#3e3e3e opacity=0.70
 * — question: Kapakana Regular 400, 96px, lineHeight=1
 *   (nodo 3:25: "Preguntas frecuentes de nuestra compañía" = título ELIMINADO)
 * — answer: Montserrat SemiBold 600, 22px, lineHeight=26.82px, ls=-0.44px
 * — Dots (Ellipse 1-9): y≈874px desde top de FAQ bg de 950px → ~92% → bottom≈8%
 * — Flecha (Polygon 1, 73:88): y≈450/950 → ~47% = centrada verticalmente
 */
/*
 * FAQ — carrusel click-driven (sin pin / sin ScrollTrigger).
 * Spec: docs/inicio-spec.xml §faq · JS: assets/js/inicio.js
 * Las cards se apilan absolutas dentro de .faq__track y la nav
 * (flechas + dots) anima xPercent/scale/opacity vía GSAP timeline.
 * Viewport con altura FIJA (100svh) — evita CLS al pintar/swap.
 */
.faq {
  position: relative;
  overflow: hidden;
  height: 100svh;          /* fijo, NO min-height: el contenido absolute */
}

.faq__sticky {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.faq__track-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.faq__track {
  position: absolute;
  inset: 0;
}

/*
 * VALORES FAQ (verificados en Figma — inicio.xml):
 * nodo 3:25 portada: Kapakana 400, 96px, lh=96px(auto), ls=0 | w=1161 h=85
 * question slides : Kapakana 400, 96px, lh=auto, ls=0%
 * answer          : Montserrat SemiBold 600, 22px, lh=auto, ls=-2% (=-0.44px a 22px)
 * Layout          : contenido CENTRADO horizontal y vertical en cada slide
 */

/* Cada card cubre el viewport del carrusel. Posición absolute para que
   varias cards puedan coexistir apiladas y el JS las anime. */
.faq__card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.faq__card-content {
  padding: 0 var(--space-lg);
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  color: #ffffff;
  text-align: center;
}

/*
 * Pregunta — nodo Figma: Kapakana 400, 96px, lh=auto(=96px), ls=0
 * Especificidad doble para ganar a cualquier reset de Elementor Kit
 */
.faq .faq__question {
  font-family: 'Kapakana', serif;
  font-size: 96px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  margin: 0 auto 32px;
  color: #ffffff;
  max-width: 1200px;
}

/*
 * Respuesta — Montserrat SemiBold 600, 22px, lh=auto, ls=-2% (=-0.44px)
 */
.faq .faq__answer {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.44px;
  color: #ffffff;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.faq__answer p { margin: 0; }

/*
 * Portada — nodo 3:25: Kapakana 400, 96px, lh=96px, ls=0, w=1161 h=85
 * Triple especificidad para garantizar Kapakana sobre cualquier override
 */
.faq .faq__card--portada .faq__portada-title {
  font-family: 'Kapakana', serif;
  font-size: 96px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  margin: 0 auto;
  color: #ffffff;
  max-width: 1200px;
  text-align: center;
}

/* Flechas laterales: absolutas dentro de .faq__sticky, centradas vertical */
/* Figma: Polygon 1 (73:88) en y≈47% del frame → top: 50% */
.faq__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(1);
  z-index: 10;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  opacity: 0.7;
  line-height: 0;
  /* micro-interacción suave (no transición seca) */
  transition: opacity 0.25s ease,
              transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.faq__arrow:hover  { opacity: 1; transform: translateY(-50%) scale(1.15); }
.faq__arrow:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 4px; }
.faq__arrow:active { transform: translateY(-50%) scale(0.95); transition-duration: 0.12s; }
.faq__arrow--prev { left: 40px; }
.faq__arrow--next { right: 40px; }

/* Dots: siempre visibles en la zona inferior */
/* Figma: Ellipses a ~874/950 desde top → bottom: 40px */
.faq__dots-wrap {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.faq__dots {
  display: flex;
  gap: 10px;
  pointer-events: auto;
}

.faq__dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(217, 217, 217, 0.8);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              opacity   0.3s ease;
}
.faq__dot:hover           { transform: scale(1.2); }
.faq__dot:focus-visible   { outline: 2px solid #fff; outline-offset: 3px; }
.faq__dot.is-active       { background: #fff; transform: scale(1.25); }

/* Respeto a prefers-reduced-motion: simplifica micro-interacciones */
@media (prefers-reduced-motion: reduce) {
  .faq__arrow,
  .faq__dot {
    transition: opacity 0.2s ease, background 0.2s ease !important;
    transform: translateY(-50%) !important;
  }
  .faq__dot { transform: none !important; }
  .faq__arrow:hover  { transform: translateY(-50%) !important; }
  .faq__arrow:active { transform: translateY(-50%) !important; }
}

/* Mobile: stack vertical (JS del carrusel se desactiva ≤768px) */
@media (max-width: 768px) {
  .faq { height: auto; }
  .faq__sticky { position: relative; inset: auto; }
  .faq__track-wrap { position: static; overflow: visible; }
  .faq__track { position: static; }
  .faq__card { position: static; inset: auto; min-height: 100svh; align-items: flex-start; justify-content: flex-start; will-change: auto; }
  .faq__card-content { padding: 40px 24px; text-align: left; }
  .faq__arrow { display: none; }
  .faq__dots-wrap { position: static; margin: 24px auto; }
}

/* ── 5. ¿QUÉ DESEAS VER? ─────────────────────────────────── */
/*
 * QDV — ¿Qué deseas ver? — valores EXACTOS Figma
 * Frame 1 (77:145) normal / Frame 2 (93:8) hover. Spec: docs/inicio-spec.xml §qdv.
 * Easing/duración hover compartida: 0.35s cubic-bezier(.2,.7,.2,1).
 */
.qdv {
  background-color: #000000;                  /* Figma Frame 1/2 fill */
  padding: 60px 32px 80px;
  color: #ffffff;
}

/* Intro: título IZQ + bajada DER (Figma local x: 93 / 456). */
.qdv__intro {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 52px;                            /* Figma: title-right (3104) → intro-left (3156) ≈ 52 */
  align-items: start;
  max-width: 1771px;                           /* ancho del frame */
  margin: 0 auto 48px;
}

/* Section title — nodo 79:157: Montserrat SemiBold 32/39.008 ls=0 #fff */
.qdv__heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 39.008px;
  letter-spacing: 0;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
}

/* Section intro — nodo 79:159: Montserrat SemiBold 20/24.38 ls=0 #fff */
.qdv__desc {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24.38px;
  letter-spacing: 0;
  color: #ffffff;
  margin: 0;
  max-width: 807px;                            /* Figma: w del nodo intro */
}

/* Card grid — Figma: 4 columnas, gap ~21 px, ancho variable por columna */
.qdv__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 21px;                                   /* Figma medido entre cols */
  max-width: 1771px;
  margin: 0 auto;
}

/* Card */
.qdv-card { position: relative; }

.qdv-card__inner {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 400 / 450;                      /* Figma cards ~397×450 / 450×450 */
  text-decoration: none;
  color: inherit;
}

.qdv-card__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
}

/* Label NORMAL — Montserrat SemiBold 32/39.008 ls=0 #fff, CENTRADO
   Posición Figma: label-top a ~48% desde la imagen-top (216/450). */
.qdv-card__label {
  position: absolute;
  top: 48%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 39.008px;
  letter-spacing: 0;
  color: #ffffff;
  z-index: 2;
  transition: opacity 0.35s cubic-bezier(.2,.7,.2,1),
              transform 0.35s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}

/* HOVER overlay — fondo oscuro + descripción centrada + botón anclado abajo.
   Layout grid (1fr auto):
     · Fila 1 (1fr) absorbe el alto sobrante → la descripción se centra dentro.
     · Fila 2 (auto) = botón, queda al final.
     · padding-bottom 80px = Figma exacto (793-713 = 80 px desde card bottom).
   Las 4 cards quedan con el botón a la MISMA Y sin importar el largo del texto. */
.qdv-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  row-gap: 16px;
  padding: 32px 28px 80px;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(.2,.7,.2,1);
  z-index: 3;
}

/* Description (hover) — nodo 93:21..24: Montserrat SemiBold 20/24.38 ls=0 #fff CENTER */
.qdv-card__overlay-desc {
  align-self: center;                            /* centro vertical en la fila 1fr */
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24.38px;
  letter-spacing: 0;
  color: #ffffff;
  text-align: center;
  margin: 0;
  max-width: 403px;                              /* Figma desc w máx */
  /* Reveal stagger: arranca desplazado y opaco, entra al revelar */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s cubic-bezier(.2,.7,.2,1),
              transform 0.4s  cubic-bezier(.2,.7,.2,1);
}

/* Button (hover) — Rect 329×41 #d9d9d9 corner 3 + Montserrat Light 22/26.818 ls=-0.22 #000
   Anclado al final de la card por la fila 2 del grid + padding-bottom 80px. */
.qdv-card__overlay-btn {
  align-self: end;                                /* asegura anclado al final de su fila */
  display: inline-block;
  background: #d9d9d9;
  color: #000000;
  border-radius: 3px;
  width: 329px;
  max-width: 100%;
  height: 41px;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 41px;                              /* centra el texto en la altura del rect */
  letter-spacing: -0.22px;
  text-align: center;
  text-transform: none;
  border: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s cubic-bezier(.2,.7,.2,1) 0.06s,
              transform 0.4s  cubic-bezier(.2,.7,.2,1) 0.06s,
              background 0.2s ease;
}
.qdv-card__inner:hover .qdv-card__overlay-btn,
.qdv-card.is-revealed .qdv-card__overlay-btn {
  /* micro affordance al pasar el mouse al botón en sí: */
}
.qdv-card__overlay-btn:hover {
  background: #ffffff;
}

/* ─── Estado revelado: por :hover, :focus-within o .is-revealed (touch) ─── */
.qdv-card__inner:hover                    .qdv-card__overlay,
.qdv-card__inner:focus-within             .qdv-card__overlay,
.qdv-card.is-revealed .qdv-card__inner    .qdv-card__overlay {
  opacity: 1;
}
.qdv-card__inner:hover                    .qdv-card__overlay-desc,
.qdv-card__inner:focus-within             .qdv-card__overlay-desc,
.qdv-card.is-revealed .qdv-card__inner    .qdv-card__overlay-desc,
.qdv-card__inner:hover                    .qdv-card__overlay-btn,
.qdv-card__inner:focus-within             .qdv-card__overlay-btn,
.qdv-card.is-revealed .qdv-card__inner    .qdv-card__overlay-btn {
  opacity: 1;
  transform: translateY(0);
}
.qdv-card__inner:hover                    .qdv-card__label,
.qdv-card__inner:focus-within             .qdv-card__label,
.qdv-card.is-revealed .qdv-card__inner    .qdv-card__label {
  opacity: 0;
  transform: translateY(-6px);
}
.qdv-card__inner:hover                    .qdv-card__img,
.qdv-card__inner:focus-within             .qdv-card__img,
.qdv-card.is-revealed .qdv-card__inner    .qdv-card__img {
  transform: scale(1.03);
}

/* Reduced motion: solo cross-fade del overlay, sin transforms */
@media (prefers-reduced-motion: reduce) {
  .qdv-card__img,
  .qdv-card__label,
  .qdv-card__overlay,
  .qdv-card__overlay-desc,
  .qdv-card__overlay-btn {
    transition: opacity 0.2s ease !important;
    transform: none !important;
  }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Somos: revertir a flujo normal en pantallas pequeñas */
  .somos { display: flex; flex-direction: column; justify-content: flex-end; padding: 60px 32px; min-height: auto; }
  .somos__script { display: none; }
  section.somos .somos__title,
  .somos__tagline,
  .somos__inner {
    position: static;
    width: auto;
    max-width: 100%;
    top: auto; left: auto; right: auto;
  }
  section.somos .somos__title { font-size: 28px; line-height: 1.2; margin-bottom: 12px; }
  .somos__tagline { font-size: 16px; line-height: 1.4; margin-bottom: 24px; }
  .somos__body   { font-size: 16px; line-height: 1.5; }

  .qdv__intro {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .qdv__heading { white-space: normal; }
}

@media (max-width: 768px) {
  .qdv__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .hero__title { font-size: clamp(40px, 10vw, 64px); }
  .hero__ctas  { flex-direction: column; align-items: center; }
}

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

  /* Mobile (≤480): mostrar todo siempre, sin hover. Anula los translateY del reveal. */
  .qdv-card__overlay {
    position: static;
    opacity: 1;
    background: rgba(0, 0, 0, 0.88);
    padding: 16px;
  }
  .qdv-card__overlay-desc,
  .qdv-card__overlay-btn {
    opacity: 1;
    transform: none;
  }
  .qdv-card__label { display: none; }
  .qdv-card__inner { aspect-ratio: auto; }
  .qdv-card__img   { aspect-ratio: 4 / 3; width: 100%; }
}