---
id: mapa-card-superpuesta
status: proposed
kind: new
sprint: 6

target:
  block: sek_c_map
  based_on: sek-map
  see: https://institucioneducativaseki5.sg-host.com/curso-escolar-sek-alboran/

evidence:
  used_in:
    - output/pages/sek-schools/residencias.html
  figma: "Location 20:3345 (Map 1 / Map 2 / Content Card)"

fields:
  - { name: ratio, type: select, default: free, options: [free, "1:1"], label: "Proporción" }
  - { name: overlay_card, type: group, required: false, label: "Tarjeta superpuesta", sub: [
        { name: title, type: text },
        { name: text, type: text },
        { name: link, type: link },
      ] }

tokens: [surface-static-accent, text-static-inverse]

behaviour:
  - `ratio` libre = se adapta al ancho de su columna; `1:1` = cuadrado
  - La tarjeta se ancla al borde inferior con `translateY(50%)`; el contenedor necesita
    `overflow:visible` y `padding-bottom` de media tarjeta

accept:
  - El centro de la tarjeta cae exactamente sobre el borde inferior del mapa
  - Sin tarjeta, el bloque se comporta igual que hoy

built:
  branch:
  commit:
  notes:
---

# Tarjeta superpuesta y proporciones del bloque Location

**Dónde**: Residencias · módulo *Ubicación* (Location `20:3345`).
**Bloque de dev**: `acf/map` / `sek_c_map`.

## Qué pide el diseño

1. Dos mapas en fila dentro del contenedor de 1360: el grande **se adapta al ancho** y el pequeño
   es **cuadrado**. Calle de 24.
2. **Las dos piezas miden lo mismo de alto**, y quien marca esa altura es la pequeña: al ser
   cuadrada, su altura es su propio ancho.
3. La tarjeta azul de dirección va **a caballo del borde inferior** del mapa grande: su centro
   cae exactamente sobre ese borde, sangrada 32 px por la izquierda.

Los mapas siguen siendo **mapas** (Leaflet), con sus dos zooms: barrio en el grande, calle en el
pequeño.

## Dónde falla hoy

- **Alturas clavadas**: los dos mapas llevan `h-[500px] / min-[768px]:h-[360px] /
  min-[1024px]:h-[436px]`. Con la columna pequeña a 445, un alto de 436 la deja rectangular, no
  cuadrada. La altura debe salir de la **retícula**: el grid reparte `2fr / 1fr`, así que el
  grande es **2:1** y el pequeño **1:1** y ambos caen a la misma altura solos, cambie lo que
  cambie el ancho de página.
- **No hay slot para la tarjeta superpuesta**, y `.sek-map` recorta a `overflow:hidden`, así que
  nada puede asomar por debajo.
- **Coordenadas de Alborán** (36,71 / −2,79 · Almería) heredadas de la plantilla.

## Lo que hace falta en dev

1. **Proporción por instancia** (`ratio`: libre / `1:1`) en lugar de las alturas fijas.
2. **Slot de tarjeta superpuesta** (`overlay_card`, opcional): título, dirección y enlace,
   colocada así:

   ```css
   .sek-map__frame  { position: relative; overflow: visible; }   /* envuelve al mapa */
   .sek-map__overlay{ position: absolute; bottom: 0; left: 32px; transform: translateY(50%); z-index: 2; }
   ```

   El contenedor de la fila necesita `padding-bottom` de media tarjeta (56 px con la altura
   actual, 87 px) para que lo que asoma no invada el módulo siguiente.
3. **La tarjeta no puede vivir dentro de `.sek-map`**: Leaflet vacía el contenedor al
   inicializarse y se la lleva por delante. De ahí el envoltorio.
4. **La animación de entrada va en el envoltorio, no en el mapa.** Si `data-sek-reveal` se queda
   en el mapa, este se desplaza y la tarjeta no: durante toda la entrada se ve descolgada del
   borde. En el envoltorio, entran como una sola pieza.

## Coordenadas

Las buenas son las que publica el colegio en *Dónde estamos* (`elcastillo.sek.es`):
**N 40º 28' 24'' · W 03º 56' 26''** → **`40.473333, -3.940556`**. Dirección: Urb. Villafranca del
Castillo, Castillo de Manzanares s/n, 28692 Villanueva de la Cañada (Madrid). Son las del campus;
si la residencia tuviera otro acceso, que lo afine el cliente.