/* m-caso — sección #caso («Proyectos reales, con números reales»): mapa entero y vista móvil.
   Se carga después de css/avantia.css; sólo toca #caso. */

/* ---------- Mapa de la fila 3 (todas las anchuras) ----------
   Andalucía ocupa en c-mapa3.jpg x 6–99,5 % · y 3–82 %, con su centro en (52,7 %, 42,4 %).
   El lienzo se centra en ese punto para que la región se vea ENTERA; el pin va en % del
   lienzo, así que sigue clavado en Marbella a cualquier tamaño. */
#caso .mapa-img{display:block;position:relative;min-height:300px;
  background:radial-gradient(60% 55% at 46% 58%,rgb(107 43 255 / .16),transparent 70%),#050310}
/* sin transform a propósito: un transform aísla el lienzo y el mix-blend-mode:screen del JPG
   deja de fundirse con el fondo (se veía el rectángulo de la foto). Se centra con márgenes:
   left = 50 % − 0,527·ancho; margin-top (en % del ANCHO) = −0,424 · 0,6664 · ancho. */
#caso .mapa-lienzo{position:absolute;width:100%;left:-2.7%;top:46%;margin:-28.3% 0 0;transform:none}
/* bordes del JPG fundidos con el fondo del panel: sin franjas ni cortes rectos */
#caso .mapa-lienzo img{
  -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(transparent,#000 4%,#000 94%,transparent);
  -webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent) intersect,linear-gradient(transparent,#000 4%,#000 94%,transparent);
  filter:brightness(2.7) contrast(1.15) saturate(1.15) drop-shadow(0 0 10px rgb(124 77 255 / .45))}
/* la tarjeta «#1 en Marbella» baja al mar, donde no tapa la costa ni el norte */
#caso .mapa-img .pin-chip{top:auto;left:auto;right:14px;bottom:14px}

/* ---------- Tablet (641–1080): una columna, panel a dos ---------- */
@media (max-width:1080px) and (min-width:641px){
  /* pulido.css (min-width:641px) vuelve a poner dos columnas y a 768 el titular caía en
     cinco líneas junto a un panel apretado: aquí, texto arriba y panel debajo a todo el ancho */
  #caso .fila{grid-template-columns:minmax(0,1fr);gap:36px}
  #caso .fila p{max-width:34rem}
  #caso .mapa-img{min-height:340px}
}

/* ---------- Móvil ---------- */
@media (max-width:640px){
  #caso{padding:84px 0 64px}
  #caso .caso-cab{margin-bottom:8px}
  #caso .caso-cab h2{font-size:clamp(36px,10.6vw,46px);line-height:1.02}

  #caso .fila{padding:40px 0 44px;gap:28px}
  /* número (planetita) y etiqueta en la misma línea; el resto debajo a todo el ancho */
  #caso .fila-txt{grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center}
  #caso .fila-txt > :not(.fila-num){grid-column:1 / -1}
  #caso .fila-num{grid-row:1;grid-column:1;margin:0 0 0 10px;gap:12px}
  #caso .fila-num i{width:22px}
  #caso .fila-txt > .fila-etq{grid-row:1;grid-column:2}
  #caso .fila h3{font-size:clamp(28px,8.2vw,34px);line-height:1.08;margin:20px 0 14px}
  #caso .fila p{max-width:none;font-size:15.5px;margin-bottom:22px}

  #caso .panel2{border-radius:16px;min-height:0}
  #caso .panel2 > *{padding:20px}

  /* fila 1: buscador */
  #caso .g-barra{gap:10px}
  #caso .g-logo{flex:none}
  #caso .g-caja{min-width:0;font-size:12.5px;padding:9px 12px;gap:8px;white-space:nowrap}
  #caso .g-res{padding:8px}
  #caso .g-res img{width:78px;height:56px}
  #caso .g-res .mini{width:78px}
  #caso .barras6{height:110px;gap:10px}

  /* fila 2: la foto entera, no un recorte de 200 px */
  #caso .panel2:not(.mapa) > .foto{height:auto;aspect-ratio:3 / 2}
  #caso .x6{font-size:76px;margin:20px 0 10px}

  /* fila 3: el mapa a todo el ancho del panel, sin recortar Huelva ni Almería */
  #caso .mapa-img{min-height:0;height:auto}
  #caso .mapa-lienzo{position:relative;left:auto;top:auto;transform:none;width:98%;margin:16px 0 4px -3.6%}
  #caso .mapa-img .pin-chip{right:12px;bottom:12px;padding:8px 14px 8px 8px;gap:10px}
  #caso .mapa-img .pin-chip .g-g{width:26px;height:26px;font-size:14px}
  #caso .chips3{gap:10px}
  #caso .chip3{padding:12px 14px;gap:12px}
  #caso .chip3 div{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
  #caso .chip3 b{font-size:17px}
}