/* Catálogo: filtros, fichas y panel. Lo cargan /propiedades/ y /mapa/.

   Tres columnas en escritorio: los filtros en tarjetas a la izquierda, las
   fichas en el medio y, a la derecha, el detalle de la elegida con el mapa
   debajo. Mientras no se elija ninguna, el mapa ocupa el panel entero.

   La página no lleva barra de navegación: empieza en la búsqueda, con la marca
   a la izquierda. El mapa entero de enlaces está en el pie, que es el mismo de
   todo el sitio y `herramientas/copias.py` vigila que no se separen. */

.catalogo-pagina { background: var(--crema-papel); }

/* El alto de la cabecera, en un solo sitio: lo usan el panel de filtros, la
   columna de fichas y el mapa para empezar justo debajo. Si la cabecera cambia
   de alto y esto no, aparece una franja muerta o el mapa se mete por debajo. */
:root { --alto-cabecera: 79px; }   /* medido con su filete de abajo */

/* ---------- Cabecera: dos filas, píldora y atajos ----------

   Fila 1: la marca, la píldora de búsqueda centrada y el conmutador de vista.
   Fila 2: el botón de filtros y los atajos por tipo.

   La píldora es UNA caja con partes dentro separadas por un filete, no tres
   cajas seguidas: así se lee como un solo control y el foco se ve entero. */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--verde-hondo);
  border-bottom: 1px solid rgba(187, 148, 89, .3);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
}

/* Los dos lados pesan LO MISMO (`flex: 1 1 0`) aunque midan distinto por dentro.
   Sin esto la píldora se centra en el hueco que sobra, no en la página: la marca
   es más estrecha que el conmutador de vista y quedaba 48 px a la izquierda del
   centro. Es el mismo fallo que "está torcido", y se ve igual de bien. */
.cabecera__lado { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; }
/* El lado de la derecha empuja: la píldora y Filtros son UN bloque y es ese
   bloque el que queda centrado, no la píldora sola. */
.cabecera__lado--fin { justify-content: flex-end; margin-left: auto; }

/* La marca va ADEMÁS en la barra, porque aquí lo de arriba es la búsqueda y no
   una navegación: quien llega no tiene otra forma de saber en qué sitio está
   hasta que baja del todo. Este comentario decía que la página no tenía pie;
   desde el 2026-09-11 sí lo tiene, el mismo del home. */
.marca--barra { flex: none; text-decoration: none; }
.marca--barra .marca__nombre {
  display: block;
  font-family: var(--serif); font-size: 19px; line-height: 1;
  letter-spacing: .06em; color: var(--crema);          /* 12,4 sobre verde hondo */
}
.marca--barra .marca__bajada {
  display: block; margin-top: 2px;
  font-size: 8.5px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--oro-claro);  /* el dorado de sobre oscuro */
}

/* ---------- La píldora ---------- */

.barra-busca {
  flex: 0 1 460px;
  margin-left: auto;
  min-width: 0;
  display: flex; align-items: center;
  height: 54px; padding: 0 6px 0 0;
  background: var(--blanco);
  border: 1px solid rgba(1, 67, 63, .14);
  border-radius: var(--radio-pill);
  box-shadow: 0 2px 10px rgba(1, 46, 43, .06);
}
/* Sobre verde, el foco no puede marcarse poniendo el borde verde: se
   confundiria con el fondo. Se marca con un anillo crema por fuera. */
.barra-busca { border-color: transparent; }
.barra-busca:focus-within {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--crema), 0 3px 14px rgba(1, 46, 43, .3);
}

.barra-busca__parte {
  min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: 1px;
  padding: 0 18px;
}
.barra-busca__parte.busca { flex: 1 1 auto; position: relative; }

/* La etiqueta va DENTRO de la parte, encima del control: es lo que dice qué se
   está escribiendo cuando el campo ya tiene texto y el marcador de posición ha
   desaparecido. En 10 px no puede llevar el dorado de marca: 2,33 sobre blanco.
   Lleva el dorado sobre claro, 4,57. */
.barra-busca__et {
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--oro-texto);
}

.busca input {
  width: 100%; min-width: 0;
  border: 0; background: transparent; padding: 0;
  font: 500 14px var(--sans); color: var(--verde);
}
.busca input::placeholder { color: var(--verde); opacity: .55; }
/* La cruz del navegador, fuera: cambia de forma en cada sistema. */
.busca input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.busca__x {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; padding: 0;
  display: grid; place-content: center;
  background: rgba(1, 67, 63, .07); border: 0; border-radius: 50%;
  color: var(--verde); cursor: pointer;
}
.busca__x:hover { background: rgba(1, 67, 63, .14); }

.barra-busca__lupa {
  flex: none;
  width: 42px; height: 42px; padding: 0;
  display: grid; place-content: center;
  margin-left: auto;
  background: var(--verde); border: 0; border-radius: 50%;
  color: var(--crema); cursor: pointer;
}
.barra-busca__lupa:hover { background: var(--verde-hondo); }

/* ---------- El botón de Filtros, pegado a la píldora ---------- */

.chip {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 16px;
  background: var(--blanco);
  border: 1px solid rgba(1, 67, 63, .14);
  border-radius: var(--radio-pill);
  font: 500 13px var(--sans); color: var(--verde);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.chip { border-color: transparent; }
.chip:hover { border-color: var(--crema); }
.chip--activo {
  background: var(--crema); border-color: var(--crema); color: var(--verde-hondo);
}
/* Pegado a la píldora y de su mismo alto: se leen como una sola pieza. */
.chip--filtros { flex: none; height: 54px; margin-left: -6px; font-weight: 600; }

.chip__cuenta {
  display: grid; place-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--verde); border-radius: var(--radio-pill);
  font-size: 11px; font-weight: 600; color: var(--crema);
}
.chip--activo .chip__cuenta { background: var(--verde-hondo); color: var(--crema); }

.vista {
  flex: none;
  display: flex; padding: 4px;
  background: var(--blanco);
  border: 1px solid transparent;
  border-radius: var(--radio-pill);
}
.vista button {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 15px;
  background: none; border: 0; border-radius: var(--radio-pill);
  font: 500 13px var(--sans); color: var(--verde);
  cursor: pointer;
}
.vista .vista--activa { background: var(--verde); color: var(--crema); }

/* ---------- La cabecera cuando no cabe en una fila ----------

   Por debajo de 1100 px el conmutador Mapa/Rejilla de la barra sobra: ya existe
   el botón flotante `.cambia-vista`, que hace lo mismo y no le quita sitio a la
   búsqueda. Con los tres dentro, a 390 px la marca, la píldora y el conmutador
   se montaban unos encima de otros.

   Por debajo de 620 la píldora baja a su propia línea, y la cabecera crece: por
   eso `--alto-cabecera` sube aquí. Es el ancla del panel de filtros y del mapa,
   y si se queda corto aparece una franja muerta debajo de la barra. */

@media (max-width: 1099px) {
  /* Se esconde el CONMUTADOR, no su lado. El lado sigue pesando `flex: 1 1 0` y
     es lo que mantiene la búsqueda en el centro: escondiendo el lado entero, el
     `margin-left: auto` de la píldora la empujaba contra el borde derecho y a
     900 px el bloque quedaba 81 px descentrado. */
  .cabecera__lado--fin .vista { display: none; }
}

/* Por debajo de 800 la marca, la busqueda, Filtros y la hamburguesa siguen en
   UNA fila: lo que cede es la busqueda. `flex: 1 1 0` con `min-width: 0` es lo
   que se lo permite; con `auto` no baja de su contenido y a 390 px se montaba
   encima del wordmark. */
@media (max-width: 799px) {
  :root { --alto-cabecera: 69px; }   /* medido, no estimado */
  .cabecera__lado--fin { margin-left: 0; }
  .barra-busca { flex: 1 1 0; min-width: 0; height: 44px; margin: 0; }
  .chip--filtros { height: 44px; margin-left: 0; }
  .barra-busca__parte { padding: 0 12px; }
}

/* Por debajo de 480 ya no queda que ceder: la busqueda se quedaba tan estrecha
   que su propio texto se recortaba. Ahi se parte en dos filas — arriba la marca
   con la hamburguesa, abajo la busqueda con Filtros — y se fuerza con las bases:
   la marca pide el 60 % y la busqueda tambien, asi que no caben juntas y la
   segunda salta de linea sola. */
@media (max-width: 479px) {
  :root { --alto-cabecera: 109px; }   /* medido, no estimado */

  .cabecera__fila { flex-wrap: wrap; gap: 8px 10px; padding-bottom: 8px; }
  .cabecera__lado { order: 1; flex: 1 1 60%; }
  .cabecera__lado--fin { order: 2; flex: 0 0 auto; }
  .barra-busca { order: 3; flex: 1 1 60%; }
  .chip--filtros { order: 4; flex: 0 0 auto; }
}
}

/* ---------- El menú de la derecha ----------

   Una hamburguesa al final de la barra que abre una tarjeta. La tarjeta se
   ancla al botón (`position: absolute` sobre un padre relativo) y no al cuerpo:
   portada al `<body>` acabaría dibujándose por debajo de la barra pegajosa, que
   ya tiene su propio contexto de apilamiento. */

.menu { position: relative; flex: none; }

.chip--icono {
  width: 44px; padding: 0;
  justify-content: center;
}

.menu__card {
  position: absolute;
  right: 0; top: calc(100% + 10px);
  z-index: 40;
  width: 300px;
  padding: 8px;
  background: var(--blanco);
  border: 1px solid rgba(1, 67, 63, .1);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(1, 46, 43, .16);
}
.menu__card[hidden] { display: none; }

.menu__fila {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-radius: 8px;
  font: 500 14px var(--sans); color: var(--verde);   /* 9,31 sobre blanco */
  text-decoration: none;
}
.menu__fila:hover { background: rgba(1, 67, 63, .06); }
.menu__fila svg { flex: none; color: var(--oro-texto); }

/* La primera va enmarcada, como el primer renglón de la referencia: es la que
   resuelve una duda, y en una inmobiliaria esa es la más pedida. */
.menu__fila--marco {
  border: 1px solid var(--verde);
  margin-bottom: 6px;
}

/* La fila de abajo, separada por un filete: es la acción, no un destino. */
.menu__fila--pie {
  margin-top: 6px;
  padding-top: 15px;
  border-top: 1px solid rgba(1, 67, 63, .12);
  border-radius: 0 0 8px 8px;
}

.menu__oferta {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 6px 0;
  padding: 13px 14px;
  border-radius: 8px;
  background: var(--crema-papel);
  text-decoration: none;
}
.menu__oferta:hover { background: rgba(1, 67, 63, .06); }
.menu__oferta span {
  font-size: 12.5px; line-height: 1.45; color: var(--gris);
}
.menu__oferta strong {
  display: block; margin-bottom: 3px;
  font: 600 14px var(--sans); color: var(--verde);
}
.menu__oferta-icono {
  flex: none; width: 42px; height: 42px;
  color: var(--oro-texto);
}

@media (max-width: 359px) {
  /* A 320 px una tarjeta de 300 se sale por el borde derecho. */
  .menu__card { width: calc(100vw - 36px); }
}

/* ---------- Las tres columnas ---------- */

.tres { display: grid; }

/* ---------- Filtros, cada grupo en su tarjeta ---------- */

/* Los filtros ya no son una columna: son un panel que se abre ENCIMA, desde el
   botón de la cabecera, en toda pantalla. Antes se llevaban 296 px fijos de
   ancho en escritorio para algo que casi nunca se toca. */
.filtros {
  position: fixed;
  left: 0; top: var(--alto-cabecera); bottom: 0;
  z-index: 25;
  width: min(340px, 88vw);
  padding: 14px 14px 24px;
  background: var(--blanco);
  border-right: 1px solid rgba(187, 148, 89, .3);
  box-shadow: 0 10px 40px rgba(1, 46, 43, .18);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.filtros[hidden] { display: none; }

.filtros__cab {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 4px 4px 14px;
}
.filtros__tit {
  margin: 0;
  font: 600 15px var(--sans);
  letter-spacing: 0; text-transform: none; color: var(--verde);
}
.filtros__limpia {
  padding: 0; background: none; border: 0;
  font: 500 12.5px var(--sans); color: var(--oro-texto);   /* 4,57 sobre crema */
  cursor: pointer;
}
.filtros__limpia:hover { color: var(--verde); }

.grupo {
  margin: 0;
  padding: 7px 0 9px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(187, 148, 89, .26);
}
.grupo:last-of-type { border-bottom: 0; }
/* La barrita. Se pulsa entera para abrir el grupo. */
.grupo__cab {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px;
  list-style: none;                  /* fuera el triángulo del navegador */
  cursor: pointer;
  user-select: none;
  background: var(--crema-papel);
  border-radius: 9px;
  font: 500 12px var(--sans); letter-spacing: 0;
  text-transform: none; color: var(--gris);
}
.grupo__icono {
  box-sizing: content-box;
  padding: 4px;
  background: var(--blanco);
  border-radius: 8px;
  color: var(--oro-texto); flex: none;
}
.grupo__cab::-webkit-details-marker { display: none; }
.grupo__cab:hover { background: rgba(1, 67, 63, .07); }
.grupo__cab:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.grupo__cab > span:first-of-type { flex: 1; }

/* Cuántos filtros lleva puestos: cerrado, es lo único que lo dice. */
.grupo__cuenta {
  flex: none;
  min-width: 18px; padding: 2px 6px;
  background: var(--verde); border-radius: var(--radio-pill);
  font-size: 10.5px; font-weight: 600; text-align: center; color: var(--crema);
}

.grupo__v { flex: none; color: var(--gris); transition: transform .18s; }
.grupo[open] .grupo__v { transform: rotate(180deg); }

/* Cerrado, la cruz sobra: no hay nada abierto que quitar a la vista. */
.grupo:not([open]) .grupo__x { display: none; }

.grupo__cuerpo {
  margin: 0; padding: 2px 0 6px;
  border: 0;
}
.grupo__x {
  padding: 0 2px; background: none; border: 0;
  font-size: 17px; line-height: 1; color: var(--gris);
  cursor: pointer;
}
.grupo__x:hover { color: var(--verde); }

.casilla {
  display: flex; align-items: center; gap: 9px;
  padding: 3px 4px;
  font-size: 12.5px; color: var(--tinta);
  cursor: pointer;
}
.casilla input { width: 14px; height: 14px; accent-color: var(--verde); flex: none; }
.casilla:hover span { color: var(--verde); }

/* Se desplaza, pero sin barra a la vista: la columna es estrecha y una barra
   gris al lado de cada lista la parte en dos. Sigue moviéndose con la rueda,
   con el dedo y con el teclado. */
.tramos { margin-bottom: 8px; }

/* Deslizador de dos mandos. Los dos <input type=range> van uno encima del
   otro: la pista no recibe el ratón y los mandos sí, o el de arriba se
   quedaría con todos los arrastres y el de abajo no se podría mover nunca. */
.desliza { margin: 2px 2px 4px; }
.desliza__topes {
  display: flex; justify-content: space-between;
  margin-bottom: 8px;
}
.desliza__topes span {
  padding: 4px 10px;
  background: var(--crema-papel);
  border-radius: var(--radio-pill);
  font-size: 11px; font-weight: 500; color: var(--verde);
}
.desliza__pista {
  position: relative;
  height: 22px;
}
.desliza__pista::before {
  content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 4px;
  background: rgba(1, 67, 63, .14); border-radius: 3px;
}
.desliza__activo {
  position: absolute; top: 9px; height: 4px;
  background: var(--verde); border-radius: 3px;
}
.desliza input[type="range"] {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 22px; margin: 0;
  background: none; -webkit-appearance: none; appearance: none;
  pointer-events: none;
}
.desliza input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px;
  background: var(--verde); border: 2px solid var(--blanco); border-radius: 50%;
  box-shadow: 0 1px 4px rgba(1, 46, 43, .35);
  cursor: grab; pointer-events: auto;
}
.desliza input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--verde); border: 2px solid var(--blanco); border-radius: 50%;
  box-shadow: 0 1px 4px rgba(1, 46, 43, .35);
  cursor: grab; pointer-events: auto;
}
.desliza input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--oro); outline-offset: 2px; }
.desliza input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--oro); outline-offset: 2px; }

.con-js [data-rango-precio] { display: none; }

.rango { display: flex; align-items: center; gap: 8px; position: relative; }
/* La unidad va dentro del campo, como en cualquier buscador de inmuebles. */
.campo { position: relative; flex: 1; min-width: 0; display: block; }
.campo input { padding-right: 30px; }
.campo i {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  pointer-events: none;
  font-style: normal; font-size: 11px; color: var(--gris);
}
.rango span { color: var(--gris); }
.rango input {
  width: 100%; min-width: 0;
  padding: 9px 12px;
  background: var(--crema-papel);
  border: 1px solid rgba(1, 67, 63, .14);
  border-radius: 10px;
  font: 400 13px var(--sans); color: var(--tinta);
}
.rango input:focus { border-color: var(--verde); outline: 0; background: var(--blanco); }

.pastillas { display: flex; flex-wrap: wrap; gap: 7px; }
.pastilla input {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
}
.pastilla span {
  display: inline-block;
  padding: 7px 13px;
  background: var(--crema-papel);
  border: 1px solid rgba(1, 67, 63, .14);
  border-radius: var(--radio-pill);
  font-size: 12.5px; color: var(--verde);
  cursor: pointer;
}
.pastilla input:checked + span { background: var(--verde); color: var(--crema); border-color: var(--verde); }
.pastilla input:focus-visible + span { outline: 2px solid var(--oro); outline-offset: 2px; }

.filtros__aplica { width: 100%; margin-top: 4px; }
.con-js .filtros__aplica { display: none; }   /* con JS se filtra al vuelo */

/* ---------- Fichas ---------- */

.fichas { padding: 26px 18px 40px; }

/* ---------- Estado vacío ---------- */

.vacio {
  text-align: center;
  padding: clamp(44px, 7vw, 70px) 24px;
  background: var(--blanco);
  border: 1px solid rgba(187, 148, 89, .3);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  color: var(--verde);
}
.vacio svg { margin: 0 auto 18px; color: var(--oro); }
.vacio h2, .vacio h3 {
  margin: 0 0 10px;
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  letter-spacing: .08em; text-transform: uppercase; color: var(--verde);
}
.vacio p {
  margin: 0 auto 24px; max-width: 42ch;
  font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--gris);
}

/* ---------- El panel: detalle arriba, mapa debajo ---------- */

.panel { display: none; }

/* La caja del mapa. Esta regla vivía en `styles.css` porque el home tenía su
   propio mapa; el 2026-09-10 ese mapa se fue y la regla se vino aquí, que es
   donde está el único mapa que queda. Sin ella el panel medía 0 de alto y no se
   veía nada.

   Nace OCULTA y solo aparece con `.con-js`: sin JavaScript no hay mapa, y una
   caja vacía de 500 px de alto es peor que ninguna caja. */
.mapa-home { display: none; }

.con-js .mapa-home {
  display: block;
  height: clamp(520px, 82vh, 940px);
  background: var(--blanco);
  border-top: 1px solid rgba(187, 148, 89, .3);
  border-bottom: 1px solid rgba(187, 148, 89, .3);
  overflow: hidden;
}

.panel__mapa { flex: 1 1 auto; min-height: 260px; }
.panel__mapa .mapa-home {
  height: 100%;
  border: 1px solid rgba(187, 148, 89, .3);
  border-radius: var(--radio);
  overflow: hidden;
}

/* A pantalla completa en el movil no se separa ni se redondea: ahi el mapa ES
   la pantalla, y una caja flotando dentro de otra caja es ruido. */
.viendo-mapa .panel__mapa .mapa-home { border: 0; border-radius: 0; }

/* ---------- Cambiar de vista en el móvil ---------- */

.cambia-vista {
  position: fixed;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  z-index: 40;
  padding: 13px 22px;
  background: var(--verde); color: var(--crema);
  border: 0; border-radius: var(--radio-pill);
  box-shadow: 0 6px 20px rgba(1, 46, 43, .3);
  font: 600 13px var(--sans); letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
}
.cambia-vista:hover { background: var(--verde-hondo); }

/* En movil, viendo el mapa a pantalla completa, las fichas se van. Los filtros
   NO: ahora son un panel que se abre encima, y esconderlos aqui dejaba el boton
   de Filtros pulsando en el vacio justo donde mas falta hacen. */
.viendo-mapa .fichas { display: none; }
.viendo-mapa .filtros { z-index: 35; }
.viendo-mapa .panel {
  display: flex; flex-direction: column;
  position: fixed; inset: 0; z-index: 30;
  background: var(--crema-papel);
}
.viendo-mapa .panel__mapa .mapa-home { height: 100%; }

/* ---------- Escritorio: las tres columnas ---------- */

@media (min-width: 1100px) {
  .tres {
    grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
    align-items: start;
  }

  .rejilla { grid-template-columns: repeat(3, 1fr); }

  .panel {
    display: flex;
    flex-direction: column;
    position: sticky;
    /* El `top` tiene que valer EXACTAMENTE lo que mide el mapa desde arriba del
       todo: la barra mas su margen. Con `top: var(--alto-cabecera)` a secas
       nacia 18 px por debajo de su punto de anclaje, asi que al bajar la pagina
       primero SUBIA esos 18 y solo despues se quedaba quieto, y se quedaba
       pegado a la barra. Igualados, no se mueve ni un pixel y conserva su aire.
       Lo unico que se desplaza es la lista. */
    top: calc(var(--alto-cabecera) + 18px);
    /* 18 arriba y 18 abajo, o el mapa se sale por debajo de la ventana. */
    height: calc(100svh - var(--alto-cabecera) - 36px);
    margin: 18px 18px 18px 0;
  }

  .cambia-vista { display: none; }
}

@media (min-width: 1700px) {
  .rejilla { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Solo rejilla: el panel se va ---------- */

.vista-rejilla .panel { display: none; }

@media (min-width: 1100px) {
  .vista-rejilla .tres { grid-template-columns: minmax(0, 1fr); }
  .vista-rejilla .rejilla { grid-template-columns: repeat(4, 1fr); }
}