/* /konoze — tira de fotos del hero y ajustes responsive.
   (El resto de clases del prototipo vive en main.css.) Escritorio = prototipo. */

/* Tira de 3 fotos del hero (estilos del prototipo, sacados del inline para poder adaptarlos) */
.kz-strip{display:grid;grid-template-columns:1.1fr .8fr 1.4fr;gap:clamp(16px,2vw,28px);align-items:end}
.kz-strip-circ{position:relative;aspect-ratio:1/1}
.kz-strip-pillcol{display:flex;flex-direction:column;gap:clamp(16px,2vw,28px)}
.kz-strip-shapes{display:flex;gap:14px;align-items:center;justify-content:flex-end}
.kz-strip-pill{aspect-ratio:16/10}

/* La línea ondulada de los pasos solo cuadra con los 4 pasos en fila
   (.steps hace auto-fit con mínimo 240px: por debajo de ~1200px se parten en 2×2). */
@media (max-width:1199.98px){.steps-line{display:none}}

@media (max-width:900px){
  /* Hero: arco + círculo arriba, píldora a lo ancho debajo */
  .kz-strip{grid-template-columns:1fr 1fr;gap:16px 20px}
  .kz-strip-circ{width:78%;justify-self:center;margin-bottom:11%}
  .kz-strip-pillcol{grid-column:1 / -1;gap:12px}
  .kz-strip-shapes svg{transform-origin:right center;scale:.75}
  .kz-strip-pill{aspect-ratio:16/9}

  /* Recursos: lista normal, sin apilado sticky ni animación de entrada */
  .stk{gap:16px}
  .stk-card{position:static;animation:none;opacity:1;transform:none;border-radius:32px}
  .stk-card .tx{padding:4px 4px 0}
  .stage{border-radius:22px}
}

/* Mapa: en móvil el texto de las etiquetas del SVG escala muy pequeño */
@media (max-width:600px){
  .kz-map .pin .pin-t{font-size:22px}
}

/* Movimiento reducido: la línea de los pasos se ve entera, sin revelado */
@media (prefers-reduced-motion: reduce){
  .steps-line{animation:none!important;clip-path:none!important}
}

/* Cómo trabajamos en móvil (<900px): los 4 pasos en 2×2, con icono y textos algo más pequeños para
   que quepan dos columnas a 360px. */
@media (max-width:900px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:36px 16px!important}
  .step{gap:12px}
  .step-b{width:72px;height:72px}
  .step-b .step-i{width:28px;height:28px}
  .step h3{margin-top:4px;font-size:clamp(19px,5vw,24px);line-height:1.15}
  .step p{font-size:15px;line-height:1.55}
}

/* Sedes en móvil (<900px): sin los botones de ciudad; el mapa ya muestra todas con su nombre. */
@media (max-width:900px){
  .city-list{display:none!important}
}