/* =========================================================
   QuVi · Shell UI (Header + Fondo + Footer + UX blocks)
   PROD · tokenizado con core.css
   - Sin tema claro/oscuro
   - Header fijo, consistente, sin saltos
   - Menú móvil basado en [hidden] + .abierto (JS)
   ========================================================= */

/* ============================
   00. Variables de layout (locales)
   ============================ */
:root{
  --header-h: 60px;
  --header-z: 1000;
  --menu-z: 1101;      /* menú móvil overlay */
  --menu-btn-z: 1102;  /* hamburguesa */
  --menu-gap: 2px;     /* separación submenú */
  --menu-minw: 240px;
  --menu-rad: var(--rad-card, 16px);
}

/* Si tu layout no reserva espacio para header fijo,
   activa esto en el body o en #quvi-app (recomendado):
   #quvi-app{ padding-top: var(--header-h); }
*/

/* ============================
   01. Fondo
   ============================ */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(120% 80% at -10% 50%,
      color-mix(in oklab, var(--bg) 0%, transparent) 0%,
      transparent 60%),
    radial-gradient(120% 80% at 110% 50%,
      color-mix(in oklab, var(--bg) 0%, transparent) 0%,
      transparent 60%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--tint) 6%, transparent) 0%,
      transparent 28%,
      transparent 72%,
      color-mix(in oklab, var(--label) 4%, transparent) 100%),
    linear-gradient(180deg, var(--bg), var(--bg));
  filter:saturate(105%);
  will-change:transform,opacity;
}

@media (prefers-reduced-motion: reduce){
  body::before{ filter:none; }
}

/* ============================
   02. Header + Menú (PRO, consistente)
   ============================ */

/* Barra fija con vidrio sutil */
.encabezado{
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: calc(var(--z-sticky) + 20);

  background: color-mix(in oklab, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  border-bottom: 1px solid color-mix(in oklab, var(--separator) 70%, transparent);
}

/* Contenedor */
.encabezado__inner{
  max-width: var(--container, 1200px);
  margin: 0 auto;
  height: var(--header-h);
  padding: 0 var(--s-16);

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: var(--s-32);
}

/* Logo (ahora es <a>) */
.encabezado .logo{
  display: inline-flex;
  align-items: center;
  height: var(--header-h);
  gap: 10px;

  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  letter-spacing: .01em;
  color: var(--label);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.encabezado .logo:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--rad-btn);
}

/* ===== Menú desktop ===== */
.menu-desktop{
  display: flex;
  align-items: center;
  gap: var(--s-20);
  margin-left: var(--s-12);
}

/* Links y botón del submenú: misma caja */
.menu-desktop .item,
.menu-desktop .toggle-submenu{
  appearance: none;
  border: 0;
  background: none;

  display: inline-flex;
  align-items: center;
  height: var(--header-h);
  padding: 0;
  gap: 6px;

  cursor: pointer;
  font: inherit;
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  letter-spacing: .01em;
  color: var(--label);
  text-decoration: none;

  -webkit-tap-highlight-color: transparent;
  transition: color var(--motion-fast) var(--motion-ease);
}

.menu-desktop .item:hover,
.menu-desktop .toggle-submenu:hover,
.menu-desktop .item.is-active{
  color: var(--tint);
}

/* Focus pro */
.menu-desktop .item:focus-visible,
.menu-desktop .toggle-submenu:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--rad-btn);
}

/* Chevron */
.flecha{
  width: 11px;
  height: 11px;
  display: inline-block;
  transform-origin: 50% 50%;
  transition: transform .18s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
  backface-visibility: hidden;
  shape-rendering: geometricPrecision;
}

/* Submenú (desktop) */
.item-submenu{ position: relative; }

/* “Bridge” invisible para que no se corte al hover cuando bajas al dropdown */
.item-submenu::after{
  content:"";
  position:absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: var(--menu-gap);
}

/* Panel dropdown */
.item-submenu .submenu{
  position: absolute;
  top: calc(100% + var(--menu-gap));
  left: 0;
  min-width: var(--menu-minw);
  z-index: calc(var(--z-sticky) + 30);

  background: color-mix(in oklab, var(--bg) 96%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  border: 1px solid var(--separator);
  border-radius: var(--menu-rad);
  box-shadow: var(--shadow-l);

  padding: 8px 0;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease),
    visibility 0s linear var(--motion-fast);
}

/* Abrir por hover o teclado */
.item-submenu:hover .submenu,
.item-submenu:focus-within .submenu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Flecha rota solo si abierto */
.item-submenu:hover .flecha,
.item-submenu:focus-within .flecha{
  transform: rotate(180deg);
}

/* Items dropdown */
.submenu-item{
  display: block;
  padding: 10px var(--s-16);
  color: var(--label);
  text-decoration: none;

  transition:
    background var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}
.submenu-item:hover{
  background: var(--fill);
  color: var(--tint);
}
.submenu-item:focus-visible{
  outline: none;
  background: var(--fill);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tint) 40%, transparent);
}

.submenu-title{
  display:block;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
}
.submenu-subtext{
  display:block;
  margin-top: 2px;
  font-size: var(--fs-12);
  color: var(--secondary);
}

/* ===== CTA + Hamburguesa (lado derecho) ===== */
.encabezado__cta{
  display: inline-flex;
  align-items: center;
  gap: var(--s-12);
}

/* Botón primario en header (tu clase existente) */
.btn-primario{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--hit-desktop);
  padding: 0 var(--s-16);
  border-radius: var(--rad-btn);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-14);
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

/* Hamburguesa */
.boton-hamburguesa{
  position: relative;
  z-index: var(--menu-btn-z);
  pointer-events: auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--hit-desktop);
  height: var(--hit-desktop);
  padding: 0;

  border: 1px solid var(--separator);
  border-radius: var(--rad-btn);
  background: color-mix(in oklab, var(--bg) 96%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  transition:
    background var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease);
}
.boton-hamburguesa:hover{
  background: var(--fill);
  border-color: var(--separator-hover, var(--separator));
}
.boton-hamburguesa:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Líneas hamburguesa */
.boton-hamburguesa .linea{
  display:block;
  width: 18px;
  height: 2px;
  background: currentColor;
  color: var(--label);
  border-radius: 2px;
}
.boton-hamburguesa .linea + .linea{ margin-top: 4px; }

/* Ocultar hamburguesa en desktop pase lo que pase */
@media (min-width: 961px){
  .boton-hamburguesa{ display:none !important; }
}

/* ============================
   03. Menú móvil (overlay)
   - Respeta [hidden] (JS)
   - .abierto se usa para animación
   ============================ */

/* Por defecto lo dejamos sin display "forzado".
   hidden controla visibilidad. */
.menu-movil{
  position: fixed;
  inset: 0;
  z-index: var(--menu-z);

  /* backdrop */
  background: color-mix(in oklab, #000 10%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);

  display: grid;
  place-items: start center;
  padding: calc(var(--header-h) + var(--s-16)) var(--s-16) var(--s-24);

  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-fast) var(--motion-ease);
}

/* Cuando NO está hidden y además tiene .abierto, se ve */
.menu-movil.abierto{
  opacity: 1;
  pointer-events: auto;
}

/* Panel interno */
.menu-movil .grupo{
  width: min(520px, 100%);
  background: color-mix(in oklab, var(--bg) 94%, transparent);
  border: 1px solid var(--separator);
  border-radius: var(--menu-rad);
  box-shadow: var(--shadow-l);

  padding: var(--s-12);
  display: grid;
  gap: 4px;

  transform: translateY(8px);
  transition: transform var(--motion-fast) var(--motion-ease);
}
.menu-movil.abierto .grupo{ transform: translateY(0); }

/* Items móvil */
.menu-movil .item{
  display: flex;
  align-items: center;
  min-height: var(--hit-touch);
  padding: 0 var(--s-12);

  border-radius: var(--rad-btn);
  text-decoration: none;
  color: var(--label);
  font-size: var(--fs-15);
  font-weight: var(--fw-regular);

  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}
.menu-movil .item:hover{ background: var(--fill); color: var(--tint); }
.menu-movil .item:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Item CTA al final */
.menu-movil .item-cta{
  margin-top: 6px;
  background: var(--fill);
  font-weight: var(--fw-semibold);
}
.menu-movil .item-cta:hover{ background: var(--surface-hover, var(--fill)); }

/* Submenú móvil */
.menu-movil .item-submenu{
  border-radius: var(--rad-btn);
}
.menu-movil .toggle-submenu{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: var(--hit-touch);
  padding: 0 var(--s-12);

  background: none;
  border: 0;
  border-radius: var(--rad-btn);

  color: var(--label);
  font: inherit;
  font-size: var(--fs-15);
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
  transition: background var(--motion-fast) var(--motion-ease);
}
.menu-movil .toggle-submenu:hover{ background: var(--fill); }
.menu-movil .toggle-submenu:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Flecha en móvil: rota cuando el contenedor tiene .abierto (JS) */
.menu-movil .item-submenu .flecha{
  transition: transform .18s cubic-bezier(.2,.7,.2,1);
}
.menu-movil .item-submenu.abierto .flecha{
  transform: rotate(180deg);
}

/* Dropdown móvil: colapsable */
.menu-movil .submenu{
  display: grid;
  gap: 4px;
  padding: 6px 0 6px;
  margin: 0 0 6px;

  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height var(--motion-normal) var(--motion-ease),
    opacity var(--motion-fast) var(--motion-ease);
}
.menu-movil .item-submenu.abierto .submenu{
  max-height: 340px;
  opacity: 1;
}
.menu-movil .submenu .submenu-item{
  padding: 10px var(--s-12);
  border-radius: var(--rad-btn);
}
.menu-movil .submenu .submenu-item:hover{
  background: var(--fill);
}

/* Desktop: ocultar overlay móvil aunque lo dejen sin hidden por error */
@media (min-width: 961px){
  .menu-movil{ display:none !important; }
}

/* ============================
   04. Footer App (sticky)
   ============================ */
.footer-app{
  background: var(--fill);
  border-top: 1px solid var(--separator);
  padding-block: var(--s-24) calc(var(--s-24) + env(safe-area-inset-bottom));
  padding-inline: var(--s-16);

  margin-top: auto;
  flex: 0 0 auto;
}

.footer-contenido{
  max-width: var(--container, 1200px);
  margin-inline: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  flex-wrap: wrap;
}

.footer-logo{
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: var(--label);
}

.footer-copy{
  margin: 4px 0 0;
  font-size: var(--fs-13);
  color: var(--secondary);
}

.footer-derecha{
  display: flex;
  align-items: center;
  gap: var(--s-16);
  flex-wrap: wrap;
}

.footer-link{
  font-size: var(--fs-14);
  color: var(--secondary);
  text-decoration: none;
  transition: color var(--motion-fast) var(--motion-ease);
}
.footer-link:hover,
.footer-link:focus-visible{
  color: var(--tint);
  outline: none;
}

/* Responsive fino */
@media (max-width: 560px){
  .footer-contenido{
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-12);
  }
  .footer-derecha{
    gap: var(--s-12);
  }
}

/* ============================
   05. Transiciones base del step
   ============================ */
[data-step]{
  position: relative;
  opacity: 0;
  transform: translateX(16px);
  transition:
    opacity var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease);
}
[data-step][data-active]{
  opacity: 1;
  transform: none;
  filter: blur(0.001px);
}

/* ============================
   06. Push/Pop (View Transitions)
   ============================ */
[data-step]{ view-transition-name: step; contain: layout; }

body.nav-forward ::view-transition-new(step){
  animation-name: step-push-in;
  animation-duration: var(--motion-push);
  animation-timing-function: var(--motion-ease-ios);
}
body.nav-forward ::view-transition-old(step){
  animation-name: step-push-out;
  animation-duration: var(--motion-push);
  animation-timing-function: var(--motion-ease-ios);
}
body.nav-back ::view-transition-new(step){
  animation-name: step-pop-in;
  animation-duration: var(--motion-push);
  animation-timing-function: var(--motion-ease-ios);
}
body.nav-back ::view-transition-old(step){
  animation-name: step-pop-out;
  animation-duration: var(--motion-push);
  animation-timing-function: var(--motion-ease-ios);
}

/* Fallback sin View Transitions */
.fx-push-in   { animation: step-push-in  var(--motion-push) var(--motion-ease-ios) both; }
.fx-push-out  { animation: step-push-out var(--motion-push) var(--motion-ease-ios) both; }
.fx-pop-in    { animation: step-pop-in   var(--motion-push) var(--motion-ease-ios) both; }
.fx-pop-out   { animation: step-pop-out  var(--motion-push) var(--motion-ease-ios) both; }

/* Keyframes */
@keyframes step-push-in{
  0%   { transform: translateX(24px); opacity:.01; }
  60%  { transform: translateX(2px);  opacity:1; }
  100% { transform: none; }
}
@keyframes step-push-out{
  0%   { transform: none; opacity:1; }
  100% { transform: translateX(-8px); opacity:.96; }
}
@keyframes step-pop-in{
  0%   { transform: translateX(-16px); opacity:.01; }
  60%  { transform: translateX(0px);   opacity:1; }
  100% { transform: none; }
}
@keyframes step-pop-out{
  0%   { transform: none; opacity:1; }
  100% { transform: translateX(24px); opacity:.96; }
}

/* Parallax suave en headers */
[data-step] header{ will-change: transform, opacity; }
.fx-push-in header, .fx-pop-in header{
  animation: header-parallax var(--motion-push) var(--motion-ease-ios) both;
}
@keyframes header-parallax{
  0%{ transform: translateY(6px); opacity:.88; }
  100%{ transform:none; opacity:1; }
}

/* Edge shadow + dim sutil */
[data-step].fx-push-in::before,
[data-step].fx-pop-in::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: linear-gradient(270deg, color-mix(in oklab, #000 6%, transparent), transparent 40%);
  opacity:0;
  transition: opacity var(--motion-push) var(--motion-ease-ios);
}
[data-step].fx-push-in::before,
[data-step].fx-pop-in::before{ opacity:1; }

body.is-transitioning::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background: color-mix(in oklab, #000 2%, transparent);
  animation: app-dim var(--motion-push) var(--motion-ease-ios) both;
}
@keyframes app-dim{ 0%{opacity:0} 50%{opacity:1} 100%{opacity:0} }

/* ============================
   07. Haptic visual (micro-bump)
   ============================ */
@keyframes tap-bump{
  0%{ transform:none; }
  50%{ transform: scale(.985); }
  100%{ transform:none; }
}
.haptic-bump{ animation: tap-bump 120ms var(--motion-ease-ios); }

/* ============================
   08. Reduce motion
   ============================ */
@media (prefers-reduced-motion: reduce){
  body.is-transitioning::after{ display:none; }
  .fx-push-in, .fx-push-out, .fx-pop-in, .fx-pop-out{ animation:none !important; }
}

/* ============================
   09. Acordeón reutilizable
   ============================ */
.acordeon{
  width: 100%;
  max-width: 640px;
  margin: calc(var(--s-24) + var(--s-12)) auto 0;
}
.acordeon details{
  padding: 0;
  border-bottom: 1px solid var(--separator);
}
.acordeon details:first-of-type{
  border-top: 1px solid var(--separator);
}
.acordeon summary{
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-8);
  cursor: pointer;
  font-size: var(--fs-13);
  color: var(--secondary);
  -webkit-tap-highlight-color: transparent;
  padding: var(--s-8) 0;
  transition: color var(--motion-fast) var(--motion-ease);
}
.acordeon summary::-webkit-details-marker{ display:none; }
.acordeon summary::after{
  content:"";
  margin-left:auto;
  width: 12px; height: 12px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M6 9l6 6 6-6"/></svg>') no-repeat center / contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M6 9l6 6 6-6"/></svg>') no-repeat center / contain;
  transition: transform var(--motion-fast) var(--motion-ease);
  transform: rotate(0deg);
}
.acordeon summary:hover{ color: var(--tint); }
.acordeon summary:focus-visible{
  outline: 1px solid var(--tint);
  outline-offset: 2px;
}
.acordeon details[open] summary{ color: var(--tint); }
.acordeon details[open] summary::after{ transform: rotate(180deg); }

.acordeon .contenido{
  margin: 0;
  padding: 0 0 var(--s-8);
  font-size: var(--fs-12);
  color: var(--secondary);
  line-height: var(--lh-base);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height var(--motion-normal) var(--motion-ease),
    opacity var(--motion-normal) var(--motion-ease);
}
.acordeon details[open] .contenido{
  max-height: 520px;
  opacity: 1;
  margin-top: var(--s-8);
}

@media (pointer: coarse), (max-width: 560px){
  .acordeon summary{
    font-size: var(--fs-15);
    min-height: var(--hit-touch);
    padding: var(--s-8) 0;
  }
  .acordeon .contenido{
    font-size: var(--fs-14);
  }
}

/* =============================== Snackbar =============================== */
#snackbar{
  position:fixed;
  top:calc(20px + env(safe-area-inset-top,0px));
  left:50%;
  transform:translateX(-50%) translateY(-8px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  min-width:240px;
  max-width:90%;
  background:color-mix(in oklch,var(--ink-0) 92%,transparent);
  color:var(--bg);
  padding:var(--s-12) var(--s-20);
  border-radius:var(--rad-sm);
  text-align:center;
  z-index:var(--z-toast);
  box-shadow:var(--shadow-m);
  transition:
    opacity var(--motion-duration-sm) var(--motion-ease),
    transform var(--motion-duration-sm) var(--motion-ease);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
#snackbar.show{
  visibility:visible;
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
@media (prefers-reduced-motion:reduce){
  #snackbar{ transition:none; }
}

/* ============================
   Paginación (tokenizada con core.css)
   ============================ */
#paginacion.paginacion{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: var(--s-12);
  padding: var(--s-12);
  margin-top: var(--s-16);
  border-top: 1px solid var(--separator);
  background: transparent;
  min-height: calc(var(--hit-desktop) + 2 * var(--s-12));
}
@media (pointer:coarse){
  #paginacion.paginacion{
    min-height: calc(var(--hit-touch) + 2 * var(--s-12));
  }
}
#paginacion.paginacion.is-hidden{
  visibility: hidden;
  pointer-events: none;
}
#paginacion .paginacion-info{
  font-size: var(--fs-12);
  color: var(--secondary);
  padding-inline: var(--s-8);
}
#paginacion .pag-btn{
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--hit-desktop);
  padding: 0 var(--s-16);
  border-radius: var(--rad-btn);
  font: inherit;
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;

  background: color-mix(in oklch, var(--surface) 92%, var(--bg) 8%);
  color: var(--label);
  border: 1px solid var(--separator);

  transition:
    background var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}
@media (pointer:coarse){
  #paginacion .pag-btn{ height: var(--hit-touch); }
}
#paginacion .pag-prev::before{ content:"‹"; margin-right: var(--s-8); }
#paginacion .pag-next::after { content:"›"; margin-left:  var(--s-8); }

#paginacion .pag-btn:hover:not(:disabled){
  background: var(--surface-hover);
  border-color: var(--separator-hover);
}
#paginacion .pag-btn:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}
#paginacion .pag-btn:disabled{
  opacity: .5;
  cursor: not-allowed;
}
@media (max-width: 640px){
  #paginacion.paginacion{ gap: var(--s-10); padding: var(--s-10); }
  #paginacion .paginacion-info{ display: none; }
}

/* ============================
   Mensaje “solo escritorio”
   ============================ */
#solo-escritorio-overlay{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
}
.solo-escritorio-card{
  max-width: 420px;
  width: 100%;
  padding: 20px 18px;
  border-radius: 14px;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  text-align: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.solo-escritorio-card h1{
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 600;
}
.solo-escritorio-card p{
  margin: 0 0 4px;
  font-size: 0.95rem;
  line-height: 1.45;
}
.solo-escritorio-card .solo-escritorio-mini{
  margin-top: 6px;
  font-size: 0.8rem;
  color: #6b7280;
}

/* Pantallas chicas -> mostrar overlay y ocultar app */
@media (max-width: 1024px){
  #quvi-app{ display: none; }
  #solo-escritorio-overlay{ display: flex; }
}