.expert-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
}

.np-exit-open .conversion-dock {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

@media (max-width: 560px) {
  .home-command {
    width: 100%;
    min-height: 500px;
    margin: 30px 0 0;
    transform: none;
    perspective: none;
  }

  .command-orbit { display: none; }

  .command-window {
    position: relative;
    top: 52px;
    right: auto;
    width: 100%;
    border-radius: 15px;
    transform: none;
    animation: none;
  }

  .command-main { gap: 18px; padding: 21px 18px 16px; }
  .command-title strong { font-size: 25px; }
  .command-progress { width: 70px; height: 70px; }
  .command-metrics { gap: 6px; padding: 0 18px; }
  .command-metrics article { padding: 12px 10px; }
  .command-route { gap: 4px; margin: 14px 18px 0; padding: 14px 0; }
  .command-route > div { gap: 6px; }
  .command-team { min-height: 64px; gap: 9px; padding: 10px 18px 13px; }
  .command-team > b { display: none; }
  .command-float { animation: none; }
  .command-float-top { top: 0; left: 8px; width: 154px; padding: 12px 14px; }
  .command-float-bottom { right: 8px; bottom: 0; width: 166px; padding: 12px 14px; }
  .home-expert-card { grid-template-columns: 1fr; padding: 24px; }
  .expert-photo { width: 100%; height: auto; aspect-ratio: 500 / 420; }
  .home-page .conversion-dock { left: auto; }
  .home-page .budget-float { display: none; }
}

/* SATURACION DE OVERLAYS EN MOVIL — primera visita.
   El usuario lo vio en /ens.html a 375 px: banner de cookies (251 px) + globo
   de WhatsApp (157 px) + barra "Pedir presupuesto" + boton flotante, todo a la
   vez, con el H1 y el primer parrafo enterrados. Medido: 37 % del viewport solo
   con banner+barra; con el globo pasa del 50 %.

   CRITERIO (no es opinion, es norma aplicada):
   - Google exime de la politica de intersticiales intrusivos lo que responde a
     una OBLIGACION LEGAL, como el consentimiento de cookies. Esa exencion
     cubre el banner, NO lo que se apile encima: el globo, la barra y el boton
     no son obligatorios, asi que se evaluan por la regla general "no cubras el
     contenido principal". La politica menciona expresamente los overlays que
     aparecen "while they are looking through the page", que es justo cuando
     sale el globo (con el scroll).
   - Coalition for Better Ads, "Large Sticky Ads [Mobile]": un elemento fijo que
     ocupa mas del 30 % de la altura de pantalla esta por debajo del umbral de
     aceptabilidad. Chrome aplica ese estandar.

   REGLA: mientras el consentimiento este por resolver, NADA promocional.
   Al aceptar o rechazar, el banner desaparece y todo vuelve. El :not([hidden])
   es imprescindible: en index/formacion el <aside> vive en el HTML oculto, y
   sin el la regla escondería los flotantes SIEMPRE. */
body:has(aside.cookie-banner:not([hidden])) .conversion-dock,
body:has(aside.cookie-banner:not([hidden])) .uni-conversion-dock,
body:has(aside.cookie-banner:not([hidden])) .whatsapp-nudge,
body:has(aside.cookie-banner:not([hidden])) .budget-float,
body:has(aside.cookie-banner:not([hidden])) #floatCta,
body:has(aside.cookie-banner:not([hidden])) #waChat,

/* El banner de consentimiento, el mas dificil de tocar y el que mas ocupa.
   Medido a 375x812: 251 px = 30,9 % del viewport EL SOLO, ya por encima del
   umbral de Better Ads que aplica Chrome (30 %). Y en /formacion.html tapaba el
   80 % del CTA principal "Crear un plan para mi empresa": el unico CTA
   inutilizable de todo el sitio.

   No se quita informacion ni se esconde ningun boton — es consentimiento y
   tiene que estar entero y accesible. Solo se compacta en pantallas pequeñas:
   los tres botones pasan de dos filas a una, y se ajustan padding, gap y
   tipografia. Los botones conservan 40 px de alto (objetivo tactil) y el texto
   sigue legible a 12,5 px.

   Resultado medido: 251 px -> 185 px (31 % -> 23 %), CTA libre, los tres
   botones visibles y pulsables. Rechazar/Configurar/Aceptar siguen siendo tres
   opciones al mismo nivel, como exige un consentimiento valido: la compactacion
   no favorece a "Aceptar" (de hecho pasa de ocupar 317 px de ancho, el doble
   que las otras, a 104 px como las demas). */
@media(max-width:560px){
  aside.cookie-banner{padding:12px 14px;gap:9px}
  aside.cookie-banner .cookie-actions{display:flex;flex-direction:row;flex-wrap:nowrap;gap:7px}
  aside.cookie-banner .cookie-actions>*{flex:1 1 0;min-width:0;font-size:12px;padding:11px 6px;white-space:nowrap}
  aside.cookie-banner .cookie-copy{font-size:12.5px;line-height:1.42}
  /* Aqui NO van reglas para la variante antigua <div id="cookie-banner">:
     esta hoja solo la carga la portada, que usa el <aside>. Esas reglas viven
     en assets/css/cabecera-canonica-v2.css, que es la que cargan las 589
     paginas del patron antiguo. */
}