/* m-servicios — vista móvil y tablet de #servicios y #que-hacemos.
   Se carga después de avantia.css. En escritorio (>1180 px) no toca nada:
   todo va dentro de media queries.

   Idea: en pantallas estrechas la imagen deja de ir apretada al lado del
   texto (que la recortaba y la dejaba diminuta) y pasa a ir ARRIBA, entera,
   sobre un «escenario» de luz violeta; el texto va debajo, sin pisarse. */

/* ---------------- tablet: 641–1180 px ---------------- */
@media (min-width:641px) and (max-width:1180px){
  .qh-der{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:14px}
  .qh-pieza.media,.qh-pieza.tercio{grid-column:auto}
  /* la última (Marca) se queda sola: ocupa las dos columnas en horizontal */
  .qh-pieza.tercio:last-child{grid-column:1 / -1}
}

/* tarjeta apilada: imagen arriba entera, texto debajo (tablet y móvil) */
@media (max-width:1180px){
  .qh-pieza.media,.qh-pieza.tercio{display:flex;flex-direction:column;align-items:flex-start;min-height:0;padding:16px 16px 22px}
  .qh-pieza .qh-img,
  .qh-pieza.media .qh-img,.qh-pieza.tercio .qh-img,.qh-pieza.media .qh-img[src*="b-seo"]{
    order:-1;align-self:stretch;width:100%;max-width:none;height:230px;max-height:none;margin:0 0 18px;padding:14px 0 6px;
    object-fit:contain;object-position:center;transform:none!important;border-radius:12px;
    background:radial-gradient(70% 70% at 50% 58%,rgb(143 99 255 / .2),rgb(201 184 255 / .1) 55%,transparent 80%),linear-gradient(180deg,#f6f3ff,#fbfaff);
    box-shadow:inset 0 0 0 1px rgb(107 43 255 / .07);
    filter:drop-shadow(0 16px 20px rgb(60 20 160 / .16))}
  /* número y flecha flotan sobre el escenario, como en la tarjeta grande */
  .qh-pieza .qh-num{position:absolute;top:30px;left:30px;z-index:2}
  .qh-pieza .qh-ir{position:absolute;top:26px;right:26px;margin:0;width:36px;height:36px}
  .qh-pieza h3{font-size:22px;margin:0 0 8px;padding:0 6px}
  .qh-pieza p{font-size:14.5px;line-height:1.55;padding:0 6px;max-width:34rem}
  .qh-pieza:hover{transform:none}
  /* el servidor llega al borde de su PNG: se pega al borde derecho del escenario
     para que parezca que sigue fuera de cuadro, en vez de verse cortado */
  .qh-pieza.media .qh-img[src*="b-infra"]{object-position:right center;padding-top:10px;padding-bottom:10px}
}

/* Marca en tablet: imagen a la izquierda, texto a la derecha */
@media (min-width:641px) and (max-width:1180px){
  .qh-pieza.tercio:last-child{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);grid-template-rows:1fr auto 1fr;column-gap:26px;align-items:center}
  .qh-pieza.tercio:last-child .qh-img{grid-column:1;grid-row:1 / -1;margin:0;height:230px}
  .qh-pieza.tercio:last-child h3{grid-column:2;grid-row:1;align-self:end}
  .qh-pieza.tercio:last-child p{grid-column:2;grid-row:2}
  /* sin esto la flecha hereda grid-row:4 y se va fuera de la tarjeta */
  .qh-pieza.tercio:last-child .qh-ir{grid-area:auto}
}

/* ---------------- móvil: ≤640 px ---------------- */
@media (max-width:640px){
  /* servicios: el objeto de cristal grande y entero, con aire */
  .servicios{gap:12px}
  .servicio{padding:20px 22px 24px}
  .servicio .num{display:block;position:absolute;top:28px;left:22px}
  .servicio .objeto{width:100%;height:auto;aspect-ratio:1.25;max-height:260px;margin:8px 0 14px}
  .servicio .objeto img{width:auto;height:100%;max-width:100%}
  .servicio h3{font-size:23px;margin:0 0 8px}
  .servicio p{font-size:15px;line-height:1.55}

  /* qué hacemos */
  .qh-izq{gap:22px}
  .qh-der{gap:12px;margin-top:2px}
  .qh-pieza .qh-img,
  .qh-pieza.media .qh-img,.qh-pieza.tercio .qh-img,.qh-pieza.media .qh-img[src*="b-seo"]{height:auto;aspect-ratio:1.35;max-height:250px}
  .qh-pieza h3{font-size:21px}
}

@media (max-width:380px){
  .servicio .objeto{max-height:220px}
  .qh-pieza .qh-img,
  .qh-pieza.media .qh-img,.qh-pieza.tercio .qh-img,.qh-pieza.media .qh-img[src*="b-seo"]{max-height:215px}
  .qh-pieza h3{font-size:20px}
}

@media (prefers-reduced-motion:reduce){
  .qh-pieza,.qh-pieza .qh-img,.servicio .objeto img{transition:none}
}