/* Entrega B (corrección) — Nuevo Inicio, replicando Inicio.dc.html literalmente
   (los valores de abajo vienen de sus estilos en línea), scoped a .c21-home. */

/* El tema proty impone Lexend en títulos, el "330" y los chips (confirmado en
   vivo: .c21-inicio-trust__card strong y .c21-inicio-chip heredaban Lexend
   pese al fix anterior, que solo cubría h1-h6). Regla amplia — pero excluyendo
   SVG e íconos, o quedan rotos (letra/cuadro en vez del glifo). */
.c21-home, .c21-home * {
  font-family: 'Instrument Sans', system-ui, sans-serif;
}
.c21-home svg, .c21-home svg *,
.c21-home i,
.c21-home [class*="icon"],
.c21-home [class*="dashicons"],
.c21-home [class*="leaflet"] {
  font-family: inherit !important;
}

.c21-home { background: #F6F4EF; color: #1A1A1A; }
.c21-home-section__inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.c21-home-section { padding: 64px 0 0; }
.c21-home-section--tight { padding-top: 64px; }
/* Entrega B (corrección) — el hueco grande antes del pie era padding-bottom
   duplicado acá (80px) + margin-top:60px en .c21-site-footer (ver frontend.css,
   ya puesto en 0). Entrega "Inicio final": la última sección real pasó a ser
   "Sobre Century 21" (antes, las tarjetas de confianza) — se le da su propio
   padding-bottom acá, sin tocar el resto de .c21-home-section. */
.c21-home > section:last-of-type { padding-bottom: 64px; }

.c21-home-badge {
  display: inline-flex; align-self: flex-start;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(190,175,135,.18); border: 1px solid rgba(190,175,135,.55);
  color: #E3D8B8; font-size: 14px; font-weight: 500;
}
.c21-home-badge--inline { background: rgba(190,175,135,.16); border-color: rgba(190,175,135,.5); color: #E3D8B8; font-size: 13px; margin-bottom: 14px; }
/* Corrección (entrega "Inicio final") — causa real: .c21-home-badge tiene
   align-self:flex-start (necesario para que NO se estire en la franja de
   propietarios, donde el contenedor es flex-column sin align-items propio).
   Eso mismo pisaba el align-items:center del hero y dejaba la etiqueta
   pegada a la izquierda. Se corrige SOLO en el hero, sin tocar el franja. */
.c21-home-hero__inner > .c21-home-badge { align-self: center; }

.c21-home-eyebrow { display: block; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #7A6A3C; margin-bottom: 6px; }
.c21-home-eyebrow--light { color: #E3D8B8; }
.c21-home-h2 { margin: 0; font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.c21-home-h2--light { color: #fff; }

/* ── Hero — todo centrado (pedido de Juan), fotos rotativas ── */
.c21-home-hero {
  position: relative; overflow: hidden; background: #2A2826;
}
/* Corrección (0.12.1) — defensivo: estas dos capas son puramente decorativas
   (fotos de fondo + degradado oscuro); con pointer-events:none explícito no
   pueden interceptar clics aunque algo cambie su z-index más adelante. El
   formulario vive en .c21-home-hero__inner, con z-index propio para que su
   posición en el stacking order no dependa solo del orden en el HTML. */
.c21-home-hero__media,
.c21-home-hero__overlay { pointer-events: none; }
.c21-home-hero__media { position: absolute; inset: 0; z-index: 0; }
.c21-home-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; transition: opacity 1s ease;
}
.c21-home-hero__img.is-active { opacity: 1; }
.c21-home-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  /* Capa más oscura que antes (0.82/0.5/0.9 en vez de 0.75/0.35/0.85) para que
     el subtítulo se lea siempre, pedido explícito de Juan. */
  background: linear-gradient(180deg, rgba(8,8,8,.82) 0%, rgba(8,8,8,.5) 45%, rgba(8,8,8,.9) 100%);
}
.c21-home-hero__inner {
  position: relative; z-index: 2; max-width: 1180px; margin: 0 auto;
  padding: 100px 40px 72px; display: flex; flex-direction: column; align-items: center;
  gap: 22px; text-align: center;
}
.c21-home-hero__title { margin: 0; font-size: 56px; line-height: 1.08; font-weight: 700; letter-spacing: -.02em; color: #fff; max-width: 820px; }
.c21-home-hero__subtitle { margin: 0; font-size: 19px; color: #E6E2D8; max-width: 620px; }

/* ── Buscador del hero — Opción B: cristal con pestañas (maqueta Buscador.dc.html) ── */
.c21-home-search-wrap { margin: 18px auto 0; max-width: 980px; width: 100%; text-align: left; }
.c21-home-search__tabs { display: flex; gap: 4px; }
.c21-home-search__tab {
  font: inherit; font-size: 15px; font-weight: 600; padding: 14px 24px; border-radius: 16px 16px 0 0;
  border: 0; background: rgba(17,17,17,.35); color: #D8D3C7; cursor: pointer; white-space: nowrap;
  text-decoration: none; display: inline-flex; align-items: center;
}
.c21-home-search__tab.is-active {
  background: rgba(17,17,17,.62); color: #fff; box-shadow: inset 0 -3px 0 #BEAF87;
}
/* "Vender mi inmueble →" no es una pestaña de filtro — es un enlace que navega
   (a la landing de propietarios o a /consignar/); se distingue con el dorado.
   Corrección (0.12.1) — va JUNTO a Comprar/Arrendar (como en la maqueta), no
   empujada al extremo derecho: se quitó el margin-left:auto de la 0.12.0. */
.c21-home-search__tab--vender { color: #E3D8B8; }
.c21-home-search__tab--vender:hover { color: #fff; }
.c21-home-search {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 12px; align-items: end;
  padding: 24px; border-radius: 0 24px 24px 24px;
  background: rgba(17,17,17,.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.18); box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.c21-home-search__field {
  display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; color: #D8D3C7;
}
/* Corrección (0.12.1) — "¿Dónde?" es UN solo campo visual: el input lleva el
   fondo/borde de cristal directamente (antes era una caja de cristal con el
   input transparente ADENTRO, lo que se veía como una caja clara anidada
   dentro de la oscura). El ícono va posicionado encima del input, no en una
   caja aparte — .c21-home-search__input-wrap solo existe para anclar el ícono. */
.c21-home-search__input-wrap { position: relative; }
.c21-home-search__input-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: #BEAF87; pointer-events: none;
}
.c21-home-search__field input,
.c21-home-search__field select {
  display: block; height: 54px; width: 100%; box-sizing: border-box;
  padding: 0 16px; border-radius: 14px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22); font: inherit; font-size: 16px;
  font-weight: 400; color: #fff;
}
.c21-home-search__field input { padding-left: 44px; }
.c21-home-search__field input::placeholder { color: #B9B5AC; }
/* Corrección (0.12.1) — bug bloqueante: select nativo estilizado con
   appearance:none + flecha propia (SVG en background-image). Sin esto, en
   Windows/Chrome el <select> conserva parte del "chrome" nativo del sistema
   pese al background/color por CSS — eso es la "caja blanca dentro de la
   oscura" que describió Juan, y en algunos casos ese chrome nativo también
   interfiere con el área de clic real del control. Funciona con mouse,
   teclado y el selector nativo de iOS/Android (appearance:none no le quita
   el comportamiento nativo al <select>, solo su apariencia). */
.c21-home-search__field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
/* Las OPCIONES del desplegable las dibuja el sistema operativo, no esta hoja
   de estilos — fondo blanco y texto oscuro para que se puedan leer siempre,
   sobre cualquier fondo oscuro de la página. */
.c21-home-search__field select option { background: #fff; color: #1A1A1A; }
/* Corrección 0.12.3 — neutraliza cualquier margin/line-height/box-sizing que
   el tema aplique a <button> por defecto (lo pidió Juan explícitamente);
   la igualdad real de altura con los otros 3 campos ahora la da la
   estructura (ver .c21-home-search__ghost-label abajo), esto es defensivo. */
.c21-home-search__submit-wrap { margin: 0; cursor: pointer; }
.c21-home-search__ghost-label { visibility: hidden; }
.c21-home-search__submit {
  box-sizing: border-box; margin: 0; font: inherit; font-size: 16px; font-weight: 700;
  line-height: 1; height: 54px; padding: 0 30px;
  border-radius: 999px; border: 0; background: #BEAF87; color: #141414;
  display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap;
}
.c21-home-search__submit:hover { background: #AE9F77; }
.c21-home-search__count { margin: 14px 0 0; text-align: center; font-size: 14px; color: #D8D3C7; }

.c21-home-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; align-items: center; font-size: 14px; color: #D8D3C7; margin: 4px auto 0; }
.c21-home-chips__label { margin-right: 2px; }
.c21-home-chip {
  padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35);
  color: #fff; text-decoration: none; transition: background .2s, border-color .2s;
}
.c21-home-chip:hover { background: rgba(255,255,255,.1); border-color: #BEAF87; color: #fff; }

/* ── Encabezados de sección — centrados ── */
.c21-home-section__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; margin-bottom: 28px; }
.c21-home-section__sub { display: block; font-size: 16px; color: #5A5750; margin-top: 4px; }
.c21-home-section__sub--light { color: #D8D3C7; }
.c21-home-section__link { font-size: 15px; font-weight: 600; color: #7A6A3C; text-decoration: none; }
.c21-home-section__link--light { color: #E3D8B8; }
.c21-home-section__link:hover { text-decoration: underline; }

/* ── Zonas — carrusel: 5 en fila en desktop, 1 + adelanto en mobile ── */
.c21-home-zona-card {
  position: relative; height: 380px; border-radius: 24px; overflow: hidden;
  background: #3A3733; text-decoration: none; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 22px; box-sizing: border-box;
}
.c21-home-zona-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.c21-home-zona-card__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.8) 100%); }
.c21-home-zona-card__name { position: relative; font-size: 24px; font-weight: 700; color: #fff; }
.c21-home-zona-card__detail { position: relative; font-size: 14px; color: #E3DED2; margin-top: 4px; }
.c21-home-carrusel--zonas .c21-home-carrusel__item { flex-basis: calc(20% - 16px); min-width: 180px; }

/* ── Chips de tipo — centrados ── */
.c21-home-tipos__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.c21-home-tipo-chip {
  display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px;
  background: #fff; border: 1px solid #E6E2D8; color: #1A1A1A; font-size: 15px; font-weight: 600;
  text-decoration: none; transition: border-color .2s, color .2s;
}
.c21-home-tipo-chip:hover { border-color: #BEAF87; color: #7A6A3C; }
.c21-home-tipo-chip__dot { width: 8px; height: 8px; border-radius: 999px; background: #BEAF87; flex-shrink: 0; }

/* ── Carrusel de destacados ── */
.c21-home-carrusel__viewport { overflow: hidden; }
.c21-home-carrusel__track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.c21-home-carrusel__track::-webkit-scrollbar { display: none; }
.c21-home-carrusel__item { flex: 0 0 calc(25% - 15px); scroll-snap-align: start; min-width: 240px; display: flex; }
/* Entrega B (corrección) — todas las tarjetas de una fila a la misma altura:
   la tarjeta ocupa el 100% del alto del item flex, el título se limita a 2
   líneas con min-height propio, y precio/specs quedan pegados abajo
   (margin-top:auto en el bloque de precio). .c21-card-prop/.c21-card-destacado
   son de frontend.css — solo se extiende acá para el contexto de carrusel. */
.c21-home-carrusel__item .c21-card-prop { width: 100%; height: 100%; }
.c21-home-carrusel__item .c21-card-prop__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(1.3em * 2);
}
.c21-home-carrusel__item .c21-card-prop__price { margin-top: auto; }
.c21-home-carrusel__item .c21-card-prop__price-before + .c21-card-prop__price { margin-top: 0; }
.c21-home-carrusel__item .c21-card-prop__body { flex: 1; display: flex; flex-direction: column; }

/* Pie del carrusel — centrado: "Ver todos" + flechas, "Desliza" solo mobile */
.c21-home-carrusel__footer { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 24px; }
.c21-home-carrusel__arrows { display: flex; gap: 10px; }
/* Entrega B (corrección) — las flechas se veían como círculos blancos vacíos
   (sin contraste con el ← / → de texto); ahora son chevrons SVG visibles
   #141414 sobre borde #D6D2C8, con estado deshabilitado real al inicio/fin. */
.c21-home-carrusel__btn {
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid #D6D2C8; background: #fff;
  color: #141414; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  transition: background .2s, opacity .2s;
}
.c21-home-carrusel__btn:hover:not(:disabled) { background: #F6F4EF; }
.c21-home-carrusel__btn:disabled,
.c21-home-carrusel__btn[aria-disabled="true"] { opacity: .35; cursor: default; }
.c21-home-carrusel__hint { display: none; font-size: 13px; color: #5A5750; }
.c21-home-oportunidades .c21-home-carrusel__hint { color: #D8D3C7; }

/* ── Oportunidades — bloque oscuro INSET, no a todo el ancho ── */
.c21-home-oportunidades { background: #141414; border-radius: 32px; padding: 48px; color: #fff; }
/* Entrega "Inicio final" (sección 3) — flechas del carrusel SOBRE el bloque
   oscuro: círculo transparente con borde claro (no la versión blanca de
   fondo claro) y chevron blanco; el estado deshabilitado (opacidad .35) ya
   es la regla base de .c21-home-carrusel__btn, se hereda tal cual. */
.c21-home-oportunidades .c21-home-carrusel__btn {
  background: transparent; border-color: rgba(255,255,255,.35); color: #fff;
}
.c21-home-oportunidades .c21-home-carrusel__btn:hover:not(:disabled) { background: rgba(255,255,255,.08); }

/* ── Franja propietarios — OSCURA, como la maqueta ── */
.c21-home-propietarios {
  display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between;
  background: #141414; color: #fff; border-radius: 32px; padding: 56px;
}
.c21-home-propietarios__text { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.c21-home-propietarios__title { margin: 0; font-size: 40px; line-height: 1.08; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.c21-home-propietarios__desc { margin: 0; font-size: 18px; line-height: 1.5; color: #D8D3C7; }
.c21-home-propietarios__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.c21-home-btn-gold {
  padding: 16px 28px; border-radius: 999px; background: #BEAF87; color: #141414;
  font-size: 16px; font-weight: 700; text-decoration: none; transition: background .2s;
}
.c21-home-btn-gold:hover { background: #AE9F77; color: #141414; }
.c21-home-btn-outline {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 16px; font-weight: 600;
  text-decoration: none; transition: background .2s;
}
.c21-home-btn-outline:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ── Portal de inquilinos y solicitantes (sección 4, maqueta Inquilinos.dc.html) ── */
.c21-home-inquilinos__grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 18px; }
.c21-home-inquilinos__card {
  display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 24px;
  background: #fff; border: 1px solid #E6E2D8;
}
.c21-home-inquilinos__card--dark { background: #141414; border-color: #141414; color: #fff; }
.c21-home-inquilinos__icon {
  flex: none; width: 52px; height: 52px; border-radius: 16px; background: #EFE9DA;
  color: #7A6A3C; display: flex; align-items: center; justify-content: center;
}
.c21-home-inquilinos__icon--gold { background: rgba(190,175,135,.16); color: #BEAF87; }
.c21-home-inquilinos__icon--green { background: #E3F3E9; color: #1F8F4E; }
.c21-home-inquilinos__tag { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8A867E; }
.c21-home-inquilinos__card--dark .c21-home-inquilinos__tag { color: #BEAF87; }
.c21-home-inquilinos__title { font-size: 20px; font-weight: 700; }
.c21-home-inquilinos__desc { font-size: 15px; line-height: 1.55; color: #5A5750; flex: 1; }
.c21-home-inquilinos__card--dark .c21-home-inquilinos__desc { color: #D8D3C7; }
.c21-home-inquilinos__cta {
  align-self: flex-start; margin-top: 6px; padding: 14px 24px; font-size: 15px;
}
.c21-home-inquilinos__link {
  font-size: 15px; font-weight: 700; color: #7A6A3C; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.c21-home-inquilinos__link:hover { text-decoration: underline; }
.c21-home-inquilinos__link--green { color: #1F8F4E; }
.c21-home-inquilinos__nota { margin: 24px 0 0; text-align: center; font-size: 13px; color: #8A867E; }

/* ── Sobre Century 21 — Opción A: editorial con foto (reemplaza las 3 tarjetas de confianza) ── */
.c21-home-sobre { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.c21-home-sobre--sin-imagen { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
.c21-home-sobre__img { position: relative; height: 560px; border-radius: 28px; overflow: hidden; }
.c21-home-sobre__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c21-home-sobre__seal {
  position: absolute; left: 24px; bottom: 24px; padding: 18px 22px; border-radius: 20px;
  background: #fff; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.c21-home-sobre__seal-label { font-size: 13px; font-weight: 600; color: #7A6A3C; letter-spacing: .06em; }
.c21-home-sobre__seal-year { font-size: 40px; font-weight: 700; line-height: 1; color: #1A1A1A; }
.c21-home-sobre__seal-sub { font-size: 14px; color: #5A5750; }
.c21-home-sobre__p { font-size: 17px; line-height: 1.6; color: #3A3733; margin: 10px 0 0; }
.c21-home-sobre__bullets { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.c21-home-sobre__bullets li { display: flex; gap: 16px; align-items: flex-start; }
.c21-home-sobre__bullets li span:last-child { font-size: 15px; line-height: 1.5; color: #5A5750; }
.c21-home-sobre__bullets li b { font-size: 17px; color: #1A1A1A; }
.c21-home-sobre__bullet-icon {
  flex: none; width: 48px; height: 48px; border-radius: 14px; background: #EFE9DA;
  color: #7A6A3C; display: flex; align-items: center; justify-content: center;
}
.c21-home-sobre__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.c21-home-sobre__btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px;
  border-radius: 999px; font-size: 16px; font-weight: 700; text-decoration: none;
}
.c21-home-sobre__btn--gold { background: #BEAF87; color: #141414; }
.c21-home-sobre__btn--gold:hover { background: #AE9F77; color: #141414; }
.c21-home-sobre__btn--outline { border: 1px solid #1A1A1A; color: #1A1A1A; }
.c21-home-sobre__btn--outline:hover { background: #1A1A1A; color: #fff; }
.c21-home-sobre__nota { font-size: 13px; color: #8A867E; margin: 14px 0 0; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .c21-home-carrusel--zonas .c21-home-carrusel__item { flex-basis: calc(33.333% - 14px); }
  .c21-home-carrusel__item { flex-basis: calc(50% - 10px); }
  .c21-home-sobre { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .c21-home-section__inner { padding: 0 20px; }
  .c21-home-hero__inner { padding: 64px 20px 44px; }
  .c21-home-hero__title { font-size: 32px; }
  .c21-home-hero__subtitle { font-size: 16px; }
  .c21-home-h2 { font-size: 26px; }
  /* Buscador Opción B en mobile — pedido exacto de Juan: pestañas con scroll
     horizontal (nada truncado), campos uno debajo del otro, botón a todo el
     ancho. */
  .c21-home-search__tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .c21-home-search__tabs::-webkit-scrollbar { display: none; }
  .c21-home-search__tab { flex-shrink: 0; }
  .c21-home-search { grid-template-columns: 1fr; border-radius: 0 20px 20px 20px; padding: 18px; }
  .c21-home-search__submit { width: 100%; justify-content: center; height: 52px; }
  /* Zonas y destacados: 1 visible + adelanto del siguiente (pedido de Juan) */
  .c21-home-carrusel--zonas .c21-home-carrusel__item { flex-basis: 70%; height: 280px; min-width: 0; }
  .c21-home-carrusel--zonas .c21-home-zona-card { height: 280px; padding: 16px; }
  .c21-home-carrusel--zonas .c21-home-zona-card__name { font-size: 19px; }
  .c21-home-carrusel__item { flex-basis: 78%; min-width: 0; }
  .c21-home-carrusel__hint { display: block; }
  .c21-home-propietarios { padding: 32px 24px; border-radius: 24px; }
  .c21-home-propietarios__title { font-size: 26px; }
  .c21-home-oportunidades { padding: 28px 20px; border-radius: 24px; }
  .c21-home > section:last-of-type { padding-bottom: 44px; }
  .c21-home-inquilinos__grid { grid-template-columns: 1fr; }
  .c21-home-inquilinos__card { padding: 22px; }
  .c21-home-sobre__img { height: 320px; }
}