/* Edén Bienes Raíces — hoja única. Móvil primero.
   Paleta fijada por la guía de identidad. Contrastes medidos:
   verde/crema 9,31 · crema/verde 9,31 · dorado/crema 2,33 (NO sirve para texto). */

/* ---------- Fuentes propias ----------
   Se generan con `python herramientas/fuentes.py`: recortadas al latino y con
   el eje de grosor limitado a lo que usa el sitio. Son variables, así que un
   fichero cubre todos los pesos de la familia. Nada de esto sale a Google:
   ni una conexión de fuera, ni el visitante contado por nadie.

   `swap`: si por lo que sea tardan, se lee en la de respaldo y entran después.
   Van precargadas en el HTML, así que en la práctica llegan antes de pintar. */

@font-face {
  font-family: "Cinzel";
  src: url("../fonts/cinzel-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-latin.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --verde: #01433F;
  --verde-hondo: #012E2B;
  --oro: #BB9459;          /* filetes, bordes, iconos. NUNCA texto sobre claro */
  --oro-texto: #826435;    /* mismo tono, 4,57 sobre crema. Texto dorado sobre claro */
  --oro-claro: #CAAB7D;    /* mismo tono, 5,13 sobre verde. Texto dorado sobre oscuro */
  --crema: #F5E9D2;
  --crema-papel: #FBF6EC;
  --blanco: #FFFFFF;
  --tinta: #1A1A18;
  --gris: #6B6B63;

  --serif: "Cinzel", "Times New Roman", serif;
  --sans: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ancho: 1180px;
  --radio: 14px;
  --radio-pill: 999px;
  --sombra: 0 10px 40px rgba(1, 67, 63, .10);
  --sombra-alta: 0 18px 60px rgba(1, 67, 63, .16);
}

*, *::before, *::after { box-sizing: border-box; }

/* Una clase con display gana a la regla [hidden] del navegador. Sin esto,
   el menú móvil y el estado vacío se dibujan aunque estén marcados hidden. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

/* ---------- La barra de desplazamiento ----------
   La gris del sistema es lo unico del sitio que no es nuestro. Se pinta con la
   paleta: el carril en crema papel, el pulgar en dorado, y el filete que lo
   separa del carril hecho con un borde transparente, que es como se redondea
   sin recurrir a dos elementos.

   `scrollbar-color` lo entienden Firefox y los Chromium nuevos; las reglas
   `::-webkit-` cubren Safari y los Chromium viejos. Se declaran las dos.

   `scrollbar-gutter: stable` reserva el hueco SIEMPRE: sin eso, una pagina que
   pasa de caber a no caber se desplaza de golpe unos pixeles al aparecer la
   barra. En movil no estorba: ahi la barra flota y no ocupa.

   Se deja fuera el movil fino (`hover: none`), donde la barra es del sistema,
   se esconde sola y pintarla solo la haria mas gorda. */
@media (hover: hover) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--oro) var(--crema-papel);
    scrollbar-gutter: stable;
  }
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: var(--crema-papel); }
  ::-webkit-scrollbar-thumb {
    background: var(--oro);
    border: 3px solid var(--crema-papel);
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--oro-texto); }
  ::-webkit-scrollbar-corner { background: var(--crema-papel); }

  /* Sobre verde el carril claro seria un tajo blanco. Se invierte. */
  .cierre, .pie, .vitrina {
    scrollbar-color: var(--oro-claro) var(--verde-hondo);
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--crema-papel);
  color: var(--tinta);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
  border-radius: 4px;
}

.vo {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  z-index: 100; background: var(--crema); color: var(--verde);
  padding: 12px 22px; border-radius: 0 0 var(--radio) var(--radio);
  font-weight: 600; text-decoration: none; transition: top .18s;
}
.saltar:focus { top: 0; }

/* ---------- Marca en texto (Cinzel), sin imagen ---------- */

.marca { text-decoration: none; display: block; line-height: 1; }
.marca__nombre {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .14em;
  color: var(--crema);
}
.marca__bajada {
  display: block;
  font-size: 8.5px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--crema);
  opacity: .92;   /* al 80% se quedaba en 3,56 sobre el video del hero */
  margin-top: 4px;
  padding-left: .14em;
}

/* ---------- Barra ---------- */

.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  padding: 16px 20px;
  transition: background .3s, box-shadow .3s, padding .3s;
}
.barra__int {
  max-width: var(--ancho); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.pildora { display: none; }

.barra.pegada {
  background: rgba(1, 46, 43, .96);      /* verde hondo, el mismo del pie */
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(187, 148, 89, .3);
  padding-top: 10px; padding-bottom: 10px;
}

.hamb {
  width: 42px; height: 42px; padding: 0;
  display: grid; place-content: center; gap: 6px;
  background: transparent; border: 1px solid rgba(245, 233, 210, .4);
  border-radius: var(--radio-pill); cursor: pointer;
}
.hamb span { display: block; width: 17px; height: 1.5px; background: var(--crema); transition: transform .22s; }
.hamb[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.hamb[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.menu-movil {
  margin-top: 14px; padding: 12px;
  background: rgba(1, 67, 63, .98);
  border: 1px solid rgba(187, 148, 89, .35);
  border-radius: var(--radio);
  display: grid;
}
.menu-movil a {
  padding: 14px 12px; color: var(--crema); text-decoration: none;
  font-size: 15px; letter-spacing: .02em;
  border-bottom: 1px solid rgba(245, 233, 210, .12);
}
.menu-movil a:last-child { border-bottom: 0; }
/* La accion principal tambien vive en el menu movil, no solo en escritorio. */
.menu-movil__wa {
  margin-top: 8px; border-bottom: 0 !important;
  background: var(--crema); color: var(--verde) !important;
  border-radius: var(--radio-pill); text-align: center;
  font-weight: 600; letter-spacing: .06em;
}

/* ---------- Botones ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; border: 1px solid transparent;
  border-radius: var(--radio-pill);
  font: 600 13px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn:active { transform: translateY(1px); }

.btn--claro { background: var(--crema); color: var(--verde); }           /* 9,31 */
.btn--claro:hover { background: var(--blanco); }

.btn--linea { background: transparent; color: var(--crema); border-color: rgba(245, 233, 210, .55); }
.btn--linea:hover { background: rgba(245, 233, 210, .12); border-color: var(--crema); }

.btn--oscuro { background: var(--verde); color: var(--crema); }          /* 9,31 */
.btn--oscuro:hover { background: var(--verde-hondo); }

/* Solo escritorio. Va despues de .btn o el display:inline-flex lo pisa. */
.btn--nav { display: none; background: var(--crema); color: var(--verde); }

/* ---------- Hero ----------
   Tres hijos y ya: vídeo, velo, contenido. Sin contenedor intermedio, sin
   will-change, sin animar el fondo. Cada capa que se apilaba aquí acababa
   estorbando al vídeo. */

/* La flecha que el navegador dibuja en todo campo con <datalist>. Sale negra
   sobre el campo blanco, cambia de forma en cada sistema y es un widget del
   sistema, que es justo lo que este sitio no usa. La lista sigue sugiriendo al
   teclear, que es para lo que está.

   Una regla para los tres campos con lista que hay (el hero, el buscador del
   mapa y la cabecera del catálogo) en vez de una por cada uno: así el cuarto no
   nace con la flecha puesta. */
input[list]::-webkit-calendar-picker-indicator { display: none !important; }

/* ---------- Sugerencias del buscador ----------
   El desplegable es nuestro, no el del <datalist>: aquel lo dibuja cada sistema
   a su manera, no se puede estilar y compara por prefijo exacto, así que quien
   escribe "calarca" sin tilde no ve nada. Vive dentro del <form>, que es quien
   lleva la posición relativa. */

.sug {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 8px);
  z-index: 30;
  max-height: 292px;
  overflow-y: auto;
  padding: 6px;
  background: var(--blanco);
  border: 1px solid rgba(1, 67, 63, .14);
  border-radius: 16px;
  box-shadow: 0 14px 38px rgba(1, 46, 43, .22);
  scrollbar-width: none;
  /* El hero centra todo su texto y la lista lo heredaba: los nombres salían
     centrados y no bajo el punto donde se está escribiendo. */
  text-align: left;
}
.sug::-webkit-scrollbar { width: 0; }

.sug__op {
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14.5px; font-weight: 300; color: var(--tinta);
  cursor: pointer;
}
/* El trozo que coincide, en negrita y en verde de marca. */
.sug__op strong { font-weight: 600; color: var(--verde); }
.sug__op--activa { background: rgba(1, 67, 63, .07); }


.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Se ve si el vídeo no llega: es la marca, no un hueco gris. */
  background:
    radial-gradient(120% 90% at 12% 8%, #04544E 0%, transparent 58%),
    linear-gradient(128deg, var(--verde) 0%, #2E5340 42%, #8E8348 72%, var(--oro) 100%);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none;
}

/* Contraste del texto sobre el vídeo, medido fotograma a fotograma con
   `herramientas/velos.py`. Peor caso en móvil: titular 4,53, subtítulo 5,10,
   operación 5,00, marca de la barra 5,13. */
.hero__velo {
  position: absolute;
  inset: 0;
  /* Móvil. Las paradas no son de gusto: salen de medir el vídeo fotograma a
     fotograma con `herramientas/velos.py`, que lee este mismo degradado. El
     clip de móvil es casi blanco en toda su altura, así que hace falta 0,68
     bajo el bloque de texto y 0,55 bajo el wordmark. La ventana del 20% es lo
     único que deja ver la habitación de verdad. */
  background: linear-gradient(180deg,
    rgba(1,46,43,.74) 0%, rgba(1,46,43,.68) 12%,
    rgba(1,46,43,.42) 20%, rgba(1,46,43,.60) 28%,
    rgba(1,46,43,.73) 37%, rgba(1,46,43,.88) 100%);
}

/* El hero, centrado: titular, una línea, la operación y el campo de búsqueda.
   Es lo que hace cualquier buscador de inmuebles, y desde 2026-09-09 es lo
   único que hay encima del vídeo. */

.hero__int {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 130px 20px 120px;
  text-align: center;
}

.hero__tit {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 6.2vw, 3.15rem);
  line-height: 1.14;
  letter-spacing: .02em;
  color: var(--crema);
}

.hero__sub {
  margin: 0 auto 26px;
  max-width: 46ch;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(245, 233, 210, .92);
}

/* La operación, subrayada como en la referencia y no en píldoras: encima de una
   foto, tres píldoras rellenas compiten con el campo de búsqueda, que es lo que
   tiene que ganar. */
.hero__ops {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 4px;
  margin-bottom: 16px;
}
.hero__op {
  padding: 9px 16px 10px;
  border-bottom: 2px solid transparent;
  color: rgba(245, 233, 210, .86);       /* 7,3 sobre el velo del hero */
  text-decoration: none;
  font-size: 14px; font-weight: 500; letter-spacing: .02em;
  transition: color .18s, border-color .18s;
}
.hero__op:hover { color: var(--crema); border-bottom-color: rgba(187, 148, 89, .7); }
.hero__op--activa { color: var(--crema); border-bottom-color: var(--oro); }
.hero__op:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

/* El campo de búsqueda: blanco entero sobre la foto, con el botón en círculo al
   final. Es la pieza que tiene que verse desde el otro lado de la habitación. */
.hero__busca {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 7px 7px 22px;
  background: var(--blanco);
  border-radius: var(--radio-pill);
  box-shadow: 0 10px 34px rgba(1, 46, 43, .28);
}
.hero__busca input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; padding: 0;
  font: 400 15px var(--sans); color: var(--tinta);
}
.hero__busca input::placeholder { color: var(--gris); }
.hero__busca input:focus { outline: 0; }
.hero__busca input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hero__busca:focus-within { box-shadow: 0 0 0 2px var(--verde), 0 10px 34px rgba(1, 46, 43, .28); }

.hero__busca button {
  flex: none;
  width: 46px; height: 46px;
  display: grid; place-content: center;
  background: var(--verde); color: var(--crema);   /* 9,31 */
  border: 0; border-radius: 50%;
  cursor: pointer;
  transition: background .18s;
}
.hero__busca button:hover { background: var(--verde-hondo); }
.hero__busca button:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

/* Entrada. Solo opacidad y desplazamiento: nada que fuerce una capa nueva. */
@media (prefers-reduced-motion: no-preference) {
  .hero__tit, .hero__sub, .hero__ops, .hero__busca {
    animation: entra .8s ease-out backwards;
    will-change: opacity, transform;
  }
  .hero__int.entrada-hecha .hero__tit,
  .hero__int.entrada-hecha .hero__sub,
  .hero__int.entrada-hecha .hero__ops,
  .hero__int.entrada-hecha .hero__busca {
    will-change: auto;
  }
  .hero__tit   { animation-delay: .10s; }
  .hero__sub   { animation-delay: .24s; }
  .hero__ops   { animation-delay: .36s; }
  .hero__busca { animation-delay: .46s; }

  @keyframes entra {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Botón de línea verde. Vive aquí y no en `catalogo.css` desde el 2026-09-10:
   lo usan el detalle del catálogo Y el "Seguir viendo…" del home, y el home no
   carga esa hoja, así que ese botón salía con el azul de enlace del navegador. */
.btn--linea-verde {
  background: transparent; color: var(--verde);        /* 9,31 sobre blanco */
  border-color: rgba(1, 67, 63, .3);
}
.btn--linea-verde:hover { background: rgba(1, 67, 63, .06); border-color: var(--verde); }

/* ---------- Lo que hay en la zona ----------
   Sustituye al buscador grande y al mapa del home, que se fueron el 2026-09-10.
   Titular centrado, una entrada corta, el lugar, y cuatro cifras que salen del
   fichero de propiedades. */

.zona {
  padding: clamp(56px, 8vw, 96px) 20px clamp(44px, 6vw, 72px);
  background: var(--crema-papel);
  text-align: center;
}

.zona__int { max-width: 860px; margin: 0 auto; }

.zona h2 {
  margin: 0 0 14px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 4.2vw, 2.1rem);
  letter-spacing: .03em; color: var(--verde);
}

.zona__entrada {
  margin: 0 auto 22px; max-width: 60ch;
  font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--gris);
}

.zona__lugar {
  margin: 0 0 26px;
  font-size: 13px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--verde);
}

.cifras {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.cifras li {
  padding: 26px 16px;
  background: var(--blanco);
  border: 1px solid rgba(187, 148, 89, .26);
  border-radius: var(--radio);
}
.cifras strong {
  display: block; margin-bottom: 6px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.7rem, 4.6vw, 2.3rem);
  color: var(--verde);                       /* 9,31 sobre blanco */
}
.cifras span {
  font-size: 12.5px; font-weight: 300; color: var(--gris);   /* 5,4 sobre blanco */
}

/* ---------- Qué está buscando: los tipos ---------- */

.ayuda { margin-top: clamp(44px, 6vw, 72px); text-align: center; }

.ayuda__tit {
  margin: 0 0 26px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.35rem, 3.6vw, 1.8rem);
  letter-spacing: .03em; color: var(--verde);
}

/* En una fila, y en el móvil se arrastra: ocho iconos apilados serían media
   pantalla de scroll para elegir una palabra. */
.ayuda__tipos {
  display: flex; justify-content: flex-start; gap: 4px;
  max-width: 980px; margin: 0 auto;
  padding: 4px 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ayuda__tipos::-webkit-scrollbar { height: 0; }

/* El carril: la fila, sus dos flechas y el velo de los bordes. Lo monta
   main.js, asi que sin JavaScript esto no existe y la fila se arrastra con el
   dedo, como antes. */
.ayuda__carril { position: relative; max-width: 980px; margin: 0 auto; }
.ayuda__carril .ayuda__tipos { margin: 0; max-width: none; }

/* El velo. `::before` y `::after` sobre el borde, del color del fondo a
   transparente, y solo encendidos cuando queda fila por ese lado. Sin
   `pointer-events: none` se comerian el arrastre justo en el borde, que es
   donde mas se arrastra. */
.ayuda__carril::before,
.ayuda__carril::after {
  content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: 54px;
  pointer-events: none; opacity: 0; transition: opacity .18s;
}
.ayuda__carril::before {
  left: 0;
  background: linear-gradient(to right, var(--crema-papel) 30%, rgba(251, 246, 236, 0));
}
.ayuda__carril::after {
  right: 0;
  background: linear-gradient(to left, var(--crema-papel) 30%, rgba(251, 246, 236, 0));
}
.ayuda__carril--antes::before,
.ayuda__carril--despues::after { opacity: 1; }

.ayuda__flecha {
  position: absolute; z-index: 3; top: 50%; margin-top: -22px;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;     /* 44: la medida minima que se pulsa bien */
  color: var(--verde);
  background: var(--blanco);
  border: 1px solid rgba(187, 148, 89, .5);
  border-radius: 999px;
  box-shadow: var(--sombra);
  cursor: pointer;
}
.ayuda__flecha svg { width: 20px; height: 20px; }
.ayuda__flecha--izq { left: 4px; }
.ayuda__flecha--der { right: 4px; }
.ayuda__flecha:hover { background: var(--crema); }
.ayuda__flecha:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

/* En pantalla grande la fila cabe y se centra: no hay desborde, las flechas no
   se encienden, y el velo tampoco. No hace falta apagarlos a mano. */

/* Juego B, elegido por Paul el 2026-09-10: los siete iconos de la misma familia
   de Tabler (casa o edificio), a trazo 2 y 34 px, y en verde de marca y no en
   gris. Los que habia eran cinco lenguajes distintos en una fila -una puerta,
   unos arboles, un maletin- y no se leian como conjunto. El verde mide 9,31
   sobre el crema del fondo, donde el gris daba 5,4. */
.tipo {
  flex: 0 0 auto;
  display: grid; justify-items: center; gap: 9px;
  min-width: 108px; padding: 14px 10px;
  border-radius: var(--radio);
  color: var(--verde);
  text-decoration: none;
  transition: color .18s, background .18s;
}
.tipo svg { width: 34px; height: 34px; }
.tipo span { font-size: 12.5px; font-weight: 500; letter-spacing: .01em; }
.tipo:hover { background: var(--blanco); color: var(--verde-hondo); }
.tipo:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

/* El tipo elegido. Fondo blanco y filete dorado: el color solo no cuenta un
   estado (WCAG 1.4.1). */
.tipo--activo {
  background: var(--blanco);
  color: var(--verde-hondo);
  box-shadow: inset 0 -2px 0 var(--oro);
}


/* La tarjeta entera es un enlace, y la capa va encima de todo lo demás para que
   no haya que acertarle a una palabra. */
.tarjeta__ir { position: absolute; inset: 0; z-index: 2; }

.ayuda__vacio {
  margin: 26px auto 0; max-width: 46ch;
  font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--gris);
}
.ayuda__vacio a { color: var(--oro-texto); }        /* 4,57 sobre el crema */

.ayuda__todas { margin-top: 28px; }

@media (min-width: 900px) {
  .ayuda__tipos { justify-content: center; }
  .rejilla--home { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- La tarjeta: la foto ES la tarjeta ----------
   Vive aquí y no en `catalogo.css` desde el 2026-09-10: la usan el catálogo y
   la rejilla de últimas propiedades del home, y tenerla en dos sitios era pedir
   que las dos tarjetas se separaran a la primera corrección.

   Los datos van en una lámina blanca flotando abajo, no debajo de la foto. Es
   lo que hace que una rejilla de fichas se lea de un vistazo. */

.rejilla { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

/* La rejilla de últimas, en la caja de contenido y no a todo el ancho.

   VA DESPUÉS DE `.rejilla` a proposito. Las dos tienen la misma especificidad,
   asi que gana la ultima: con este bloque arriba, el `margin: 0` de `.rejilla`
   pisaba el `margin: auto` de aqui y la rejilla se quedaba pegada a la
   izquierda, 83 px descentrada respecto al titulo y a los iconos. Se veia
   torcida y lo era. */

.rejilla--home {
  max-width: var(--ancho);
  margin: 30px auto 0;
  padding: 0 20px;
  text-align: left;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}


/* La tarjeta, mientras no haya fotos.
   ---------------------------------------------------------------------------
   Estuvo en `aspect-ratio: 4 / 4.5` con un degradado marron ocupando el hueco
   de la foto. Medido a 1440: 406x457 px de los que el 67 % era ese rectangulo
   vacio, dos por fila, y ocho propiedades pedian 2,1 pantallas de desplazamiento.
   Con foto ese diseno funciona, porque ese 67 % es la foto. Sin ella era un muro
   marron.

   Ademas el marron no estaba en la paleta: `#DCD3BE`, `#C6BBA1` y `#6F6753` eran
   valores sueltos, contra la regla de una paleta en un solo fichero.

   Ahora la tarjeta mide lo que mide su contenido, la banda de la foto es una
   franja corta en crema, y cabe el doble por fila. El dia que haya fotos, la
   banda crece y esto vuelve a ser una tarjeta de foto. */
.tarjeta {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--blanco);
  border: 1px solid rgba(187, 148, 89, .32);
  cursor: pointer;
  transition: transform .22s, box-shadow .22s;
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.tarjeta--activa { box-shadow: 0 0 0 2px var(--verde), var(--sombra-alta); }
.tarjeta:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

/* La banda de la foto: corta y en crema de marca, no un bloque marron de media
   tarjeta. El dorado sobre crema es el de sobre claro, 4,57. */
.tarjeta__hueco {
  flex: none;
  height: 104px;
  display: grid; place-content: center;
  background: var(--crema);
  border-bottom: 1px solid rgba(187, 148, 89, .32);
  font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--oro-texto);
}

/* Con foto, la banda crece y ES la tarjeta, que era el diseño de siempre: el
   hueco corto era el estado sin fotos. */
.tarjeta__hueco--foto { height: 190px; padding: 0; display: block; }
.tarjeta__hueco--foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tarjeta__sello {
  position: absolute; left: 12px; top: 12px;
  margin: 0;
  padding: 6px 12px;
  background: rgba(255, 255, 255, .95);
  border-radius: var(--radio-pill);
  font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--verde);      /* 9,31 sobre blanco */
}

/* Los datos ya NO son una lamina flotando: eso tenia sentido encima de una
   foto, y sin foto eran dos cajas redondeadas, una dentro de otra, sin motivo.
   Ahora van dentro de la tarjeta, que ya es la caja. */
.tarjeta__info {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  padding: 14px 16px 15px;
}
.tarjeta__tit {
  margin: 0 0 3px;
  font: 500 15px var(--sans); color: var(--tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tarjeta__sitio {
  display: flex; align-items: center; gap: 5px;
  margin: 0 0 9px;
  font-size: 12.5px; color: var(--gris);
}
.tarjeta__sitio svg { color: var(--oro-texto); flex: none; }
.tarjeta__datos {
  list-style: none;
  margin: 0 0 10px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 5px;
}
.tarjeta__datos li {
  padding: 4px 9px;
  background: var(--crema-papel);
  border-radius: var(--radio-pill);
  font-size: 11px; color: var(--tinta);
  white-space: nowrap;
}

.tarjeta__pie {
  margin-top: auto;                 /* el precio, siempre abajo del todo */
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 4px 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(187, 148, 89, .26);
}
.tarjeta__precio {
  margin: 0;
  font-size: 17px; font-weight: 600; color: var(--verde);
  white-space: nowrap;              /* el "/ mes" no se parte del precio */
}
.tarjeta__precio span { font-size: 12px; font-weight: 400; color: var(--gris); }
/* Lo que la firma hace, no un sello sobre la propiedad. Va en su propia línea
   bajo el precio, en gris y con peso normal: en dorado y en negrita, dentro
   del pie, se leía como una etiqueta de "ya revisada" y como un servicio
   aparte que se cobra. Ninguna de las dos cosas es verdad. */
.tarjeta__servicio {
  display: flex; align-items: center; gap: 6px;
  margin: 9px 0 0;
  font-size: 11.5px; line-height: 1.35; color: var(--gris);
}
.tarjeta__servicio svg { flex: none; color: var(--oro-texto); }   /* 4,57 sobre blanco */

/* ---------- Secciones ---------- */

.seccion { max-width: var(--ancho); margin: 0 auto; padding: 72px 20px; }

.rotulo {
  margin: 0 0 10px;
  font-size: 10px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: var(--oro-texto);
}
.rotulo--claro { color: var(--oro-claro); }   /* 5,13 sobre verde. El --oro daba 3,99: fallaba */

h1, h2, .titulo {
  margin: 0 0 12px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.6rem, 6vw, 2.35rem);
  line-height: 1.18; letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--verde);
}
.seccion__cab { margin-bottom: 32px; }

/* La entrada de una sección: la usa /propiedades/ debajo de su titular. */

.invita__entrada {
  margin: 14px 0 0; max-width: 54ch;
  font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--gris);
}

/* ---------- Franja verde ---------- */

.franja { background: var(--verde); color: var(--crema); }
.franja__int { max-width: var(--ancho); margin: 0 auto; padding: 72px 20px; }
.franja h2 { color: var(--crema); }
.franja__entrada {
  margin: 0 0 36px; max-width: 52ch;
  font-size: 17px; font-weight: 300; line-height: 1.68;
  color: rgba(245, 233, 210, .92);
}

.ventajas { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.ventajas li { padding-top: 20px; border-top: 1px solid rgba(187, 148, 89, .5); }
.ventajas h3 {
  margin: 0 0 8px;
  font-family: var(--serif); font-weight: 400; font-size: 1rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--crema);
}
.ventajas p { margin: 0; font-size: 14.5px; font-weight: 300; color: rgba(245, 233, 210, .82); }


/* ---------- Para quien trabajamos ----------
   Los tres publicos del manual: comprador o arrendatario, propietario e
   inversionista. Misma tarjeta blanca que las cifras de la zona, para no
   inventar una quinta forma de caja. */

.publicos { text-align: center; }
.publicos__entrada {
  margin: 0 auto 30px; max-width: 58ch;
  font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--gris);
}

.publicos__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
  text-align: left;
}

.publico {
  display: flex; flex-direction: column;
  padding: 26px 24px;
  background: var(--blanco);
  border: 1px solid rgba(187, 148, 89, .26);
  border-radius: var(--radio);
}
.publico h3 {
  margin: 0 0 10px;
  font-family: var(--serif); font-weight: 400; font-size: 1.05rem;
  letter-spacing: .04em; color: var(--verde);
}
.publico p {
  margin: 0 0 18px;
  font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--gris);
}
/* El enlace se pega abajo para que las tres tarjetas lo tengan a la misma
   altura aunque los textos midan distinto. */
.publico__ir {
  margin-top: auto;
  align-self: start;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--oro-texto);                 /* 4,57 sobre blanco */
  text-decoration: none;
  border-bottom: 1px solid rgba(187, 148, 89, .5);
  padding-bottom: 2px;
}
.publico__ir:hover { color: var(--verde); border-bottom-color: var(--verde); }

/* ---------- La firma: quien esta al frente ----------
   Retrato a la izquierda y los datos al lado, dentro de una tarjeta. Sin
   estrellas: Edén no tiene ni una resena, y pintarlas seria inventarse una
   valoracion que nadie ha dado. */

.firma__caja {
  display: grid;
  gap: 26px;
  padding: 24px;
  background: var(--blanco);
  border: 1px solid rgba(187, 148, 89, .26);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

/* El retrato viene con fondo blanco de estudio, asi que sobre la tarjeta
   blanca no necesita marco: le basta el recorte.

   SU PROPORCION Y NO OTRA. El fichero es 900x1200, o sea 3:4, y aqui estaba
   forzado a 1:1 con el ancla al 22% desde arriba. Eso tira un CUARTO de la
   altura, y como el ancla estaba arriba, lo que se comia era el pelo: se le
   cortaba la cabeza en el movil y en el ordenador. Paul lo vio en su telefono.

   Un retrato de estudio no se recorta a cuadrado a ciegas. Se deja su 3:4, no
   se pierde nada y deja de hacer falta elegir que parte sacrificar.

   `aspect-ratio` se queda, con la proporcion buena, porque es lo que reserva el
   hueco antes de que la imagen llegue: sin el, la tarjeta da un salto al
   cargarla, y el retrato es `lazy`. `object-fit` tambien se queda de guardia:
   hoy no recorta nada porque las dos proporciones coinciden, pero si algun dia
   entra una foto de otra medida, encuadra en vez de deformar. */
/* `min-width: 0` y no es adorno. Un elemento de una rejilla NO baja de su
   tamaño minimo por defecto (`min-width: auto`), y el minimo de una imagen lo
   marca su fichero. En pantallas estrechas la columna crecia mas que la tarjeta
   y el retrato se salia por la derecha: medido a 280 px, la foto llegaba a 270
   cuando la tarjeta acababa en 234. Eso es lo que Paul vio como "se ve raro la
   foto" en el movil. Con el minimo a cero la columna se encoge con la tarjeta.

   `max-width: 100%` en la imagen es la segunda red, por si algun dia la foto
   deja de ser hija directa de esta caja. */
.firma__foto { max-width: 300px; min-width: 0; }
.retrato {
  width: 100%; max-width: 100%; height: auto;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: var(--radio);
}

.firma__texto h2 { margin-top: 0; }
.firma__rol {
  margin: 0 0 16px;
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--oro-texto);
}
.firma__parrafo { max-width: 46ch; }
.firma__texto .btn { margin-top: 20px; }

/* ---------- Preguntas frecuentes ----------
   Con <details>, como los filtros del catalogo: mismo lenguaje en todo el
   sitio y funciona sin JavaScript. */

.faq { background: var(--crema-papel); padding: clamp(56px, 8vw, 92px) 20px; }
.faq__int { max-width: 780px; margin: 0 auto; }
.faq h2 {
  margin: 0 0 26px;
  text-align: center;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 4.2vw, 2.1rem);
  letter-spacing: .03em; color: var(--verde);
}

.faq__lista { display: grid; gap: 10px; }

.faq__item {
  background: var(--blanco);
  border: 1px solid rgba(187, 148, 89, .26);
  border-radius: 14px;
  overflow: hidden;
}
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 20px;
  list-style: none;
  cursor: pointer;
  font-size: 14.5px; font-weight: 500; color: var(--verde);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { background: rgba(1, 67, 63, .04); }
.faq__item summary:focus-visible { outline: 2px solid var(--oro); outline-offset: -2px; }

/* La cruz gira hasta ser un menos: el mismo gesto que el chevron de los filtros
   del catalogo, dicho con el signo que usa la referencia. */
.faq__mas { flex: none; color: var(--oro-texto); transition: transform .18s; }
.faq__item[open] .faq__mas { transform: rotate(45deg); }

.faq__item p {
  margin: 0;
  padding: 0 20px 18px;
  max-width: 62ch;
  font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--gris);
}

/* ---------- Cierre ---------- */

.cierre {
  background: var(--verde-hondo); color: var(--crema);
  text-align: center; padding: 76px 20px;
}
.cierre h2 { color: var(--crema); }
.cierre__parrafo {
  margin: 0 auto 30px; max-width: 46ch;
  font-size: 16px; font-weight: 300; color: rgba(245, 233, 210, .86);
}
.cierre__acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cierre__dato { margin: 26px 0 0; font-size: 13.5px; color: rgba(245, 233, 210, .7); }
.cierre__dato a { color: rgba(245, 233, 210, .92); text-decoration: none; border-bottom: 1px solid rgba(187, 148, 89, .55); }
.cierre__dato a:hover { color: var(--crema); border-bottom-color: var(--crema); }
.cierre__dato span { margin: 0 8px; }


/* ---------- Pie ----------
   La forma es la del pie de Neuraphic: la marca en su columna, las columnas de
   enlaces al lado, y una fila de cierre separada por un filete. Lo que NO se
   copia es el tamano: aquel tiene veinticuatro destinos, este tiene los que
   tiene.

   Cinco papeles sobre la banda, todos sacados del crema de marca:

     banda      var(--verde-hondo)   #012E2B
     fuerte     crema entero                       9,31
     enlace     crema al 86%                       9,38
     apagado    crema al 70%                       6,68
     titulo     var(--oro-claro) entero            6,75
     filete     crema al 12% */

.pie {
  background: var(--verde-hondo);
  color: rgba(245, 233, 210, .86);

  /* El filete que Neuraphic pone solo cuando hace falta, y aqui hace falta: el
     pie es verde hondo y justo encima va la seccion de contacto en el mismo
     tono, asi que sin linea la pagina no termina, sigue. */
  border-top: 1px solid rgba(245, 233, 210, .12);
}

.pie__int {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 64px 20px 40px;
  display: grid;
  gap: 40px;
}

.pie__marca .marca { display: inline-block; margin-bottom: 16px; }

.pie__lema {
  margin: 0;
  max-width: 32ch;
  font-size: 13.5px; font-weight: 300; line-height: 1.7;
  color: rgba(245, 233, 210, .7);
}

/* Las columnas se reacomodan solas en vez de llevar su propio punto de corte.
   El suelo es 124 y no 150 para que las CINCO quepan en fila desde 1000 px:
   con 150, Cobertura se caia sola a una segunda fila. */
.pie__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 32px 18px;
}

/* Una columna lleva GRUPOS, no enlaces: asi cuatro columnas sostienen cinco
   encabezados sin que ninguno pida columna propia. */
.pie__col { display: grid; align-content: start; gap: 30px; }
.pie__grupo { display: grid; align-content: start; gap: 9px; }

.pie__tit {
  margin: 0 0 4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro-claro);
}

.pie__grupo a {
  justify-self: start;
  /* 24 de alto minimo, que es lo que pide WCAG 2.5.8 para una zona pulsable.
     Medidos a 22: cumplian por la excepcion de separacion -9 px entre uno y
     otro alejan los centros 31 y los circulos de 24 no llegan a tocarse- pero
     aprobar por una excepcion cuando la regla cuesta una linea es tonteria. */
  display: inline-flex; align-items: center; min-height: 24px;
  font-size: 13.5px; font-weight: 300;
  color: rgba(245, 233, 210, .86);
  text-decoration: none;
  transition: color .18s;
}
/* El color solo nunca cuenta un cambio de estado (WCAG 1.4.1): el subrayado lo
   acompana. */
.pie__grupo a:hover { color: var(--crema); text-decoration: underline; }

/* Las cuentas. 40 px de zona pulsable alrededor de una marca de 18: WCAG 2.5.8
   pide 24, y unos iconos al final del todo son lo mas facil de fallar con el
   pulgar. El margen negativo pone la TINTA en la misma linea que las columnas
   de arriba, no la zona pulsable, que es lo que se ve. */
.pie__redes {
  display: flex; align-items: center; gap: 2px;
  margin-inline: calc((40px - 18px) / -2);
}
.pie__redes a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: rgba(245, 233, 210, .86);
  transition: background .18s, color .18s;
}
.pie__redes a:hover {
  background: rgba(245, 233, 210, .12);
  color: var(--crema);
}
/* En trazo, no rellenas: tres manchas solidas en la linea mas callada de la
   pagina pesarian mas que todo lo que llevan encima. */
.pie__redes svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
}

/* La fila de cierre, de lado a lado. El filete pertenece a lo que viene
   DEBAJO, asi que respira mas por arriba que por abajo. */
.pie__barra {
  max-width: var(--ancho);
  margin: 0 auto;
  /* 88 a la derecha y no 20: la burbuja de WhatsApp es fija y se planta justo
     en esa esquina, encima de la ultima linea del pie. */
  padding: 20px 88px 32px 20px;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 8px 24px;
  border-top: 1px solid rgba(245, 233, 210, .12);
}
.pie__barra small {
  font-size: 11.5px; font-weight: 300; letter-spacing: .04em;
  color: rgba(245, 233, 210, .7);
}

/* ---------- El pie en un telefono ----------
   La forma es la del pie de Neuraphic, que es la referencia de la casa: en
   estrecho NO hay rejilla. Una sola columna, la marca arriba, los grupos uno
   debajo de otro, y la linea de cierre al final con la compania primero y las
   cuentas debajo, las dos pegadas al margen izquierdo.

   Por que una y no dos: dos columnas de 158 px parten titulos como "Asesoria
   juridica" y dejan huecos cuando un grupo es mas largo que su vecino. En fila
   no se parte nada y el ojo baja por un solo eje, que es lo que hace el sitio
   entero. Se paga en alto y se gana en que se lee.

   Y las cuentas no se centran: centrar una de las dos piezas pondria un segundo
   eje vertical en una pagina construida sobre uno solo. La misma razon, con las
   mismas palabras, esta en el pie de Neuraphic.

   No se toca el HTML: el pie va copiado en tres paginas y `copias.py` las
   compara. */
@media (max-width: 700px) {
  .pie__int { padding: 44px 20px 32px; gap: 28px; }

  .pie__cols { grid-template-columns: 1fr; gap: 28px; }
  .pie__col { gap: 28px; }

  .pie__barra {
    padding: 20px 20px 32px;
    flex-direction: column; align-items: flex-start; gap: 14px;
  }
  /* La burbuja de WhatsApp es fija y se planta en esa esquina: en vertical la
     ultima linea ya no le pasa por debajo, pero el hueco se deja igual para que
     no tape los iconos. */
  .pie__barra .pie__lugar { padding-bottom: 26px; }
}


/* ---------- La burbuja de WhatsApp ----------
   Fija abajo a la derecha, en las cuatro paginas. Verde de marca con el icono
   en crema: 9,31 de contraste, y la forma ya dice de que es sin meter el verde
   de WhatsApp en una paleta de cinco colores. */

.wa-flota {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 70;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--verde);
  border: 1px solid rgba(187, 148, 89, .45);
  border-radius: 50%;
  box-shadow: 0 6px 22px rgba(1, 46, 43, .35);
  color: var(--crema);
  transition: background .18s, transform .18s, box-shadow .18s;
}
.wa-flota:hover {
  background: var(--verde-hondo);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(1, 46, 43, .45);
}
.wa-flota:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.wa-flota svg {
  width: 27px; height: 27px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
}

/* En el movil del catalogo hay otro boton flotante, el que cambia entre lista y
   mapa. Va centrado y esta va a la derecha, pero a 375 px se tocaban. */
@media (max-width: 1099px) {
  .catalogo-pagina .wa-flota { bottom: 88px; }
}

/* ---------- Páginas interiores ----------
   Sin hero detrás, la barra tiene que nacer sólida o el texto crema cae sobre
   el crema papel del fondo. El marcado de la barra es el mismo en todas las
   páginas, así que la diferencia va aquí, en el cuerpo. */

.interior .barra {
  background: rgba(1, 46, 43, .96);      /* verde hondo, el mismo del pie */
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(187, 148, 89, .3);
}
.interior main { padding-top: 84px; }


/* ---------- Escritorio ---------- */

@media (min-width: 900px) {
  .hamb, .menu-movil { display: none; }
  .btn--nav { display: inline-flex; padding: 11px 22px; background: var(--crema); color: var(--verde); }
  .btn--nav:hover { background: var(--blanco); }

  .pildora {
    display: flex; align-items: center; gap: 4px;
    padding: 7px 10px;
    /* El mismo crema que el boton del navbar, no el crema papel del fondo: eran
       dos blancos distintos a 20 px uno del otro. */
    background: rgba(245, 233, 210, .95);
    backdrop-filter: blur(8px);
    border-radius: var(--radio-pill);
    box-shadow: 0 6px 24px rgba(1, 46, 43, .18);
  }
  .pildora a {
    padding: 9px 17px; border-radius: var(--radio-pill);
    color: var(--verde); text-decoration: none;
    font-size: 13px; font-weight: 500; letter-spacing: .02em;
    transition: background .18s;
  }
  .pildora a:hover { background: rgba(1, 67, 63, .09); }

  .marca__nombre { font-size: 25px; }
  .marca__bajada { font-size: 9px; }

  /* Escritorio: SOLO VERTICAL desde 2026-09-09. El velo llevaba un degradado
     lateral que oscurecia la derecha, porque ahi vivia el bloque de texto; con
     el hero centrado, ese lateral tapaba el lado vacio y dejaba el texto sobre
     lo mas claro del video. Medido antes de tocarlo: subtitulo 3,73 y operacion
     3,75, los dos por debajo de 4,5.

     Las paradas salen de `herramientas/velos.py`, que lee este mismo degradado
     y vuelve a medir los 24 fotogramas. La ventana del 18% es lo unico que deja
     ver la habitacion de verdad. */
  .hero__velo {
    background:
      linear-gradient(180deg, rgba(1,46,43,.62) 0%, rgba(1,46,43,.46) 18%,
                              rgba(1,46,43,.70) 34%, rgba(1,46,43,.74) 62%,
                              rgba(1,46,43,.84) 100%);
  }

  .hero__int { padding: 150px 20px 140px; }

  .seccion, .franja__int { padding-block: 96px; }
  .ventajas { grid-template-columns: repeat(3, 1fr); gap: 36px; }
  .publicos__lista { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .firma__caja { grid-template-columns: 300px 1fr; align-items: center; gap: 40px; padding: 30px; }

  /* La marca a la izquierda y los enlaces al lado, que es la composicion del
     pie de Neuraphic y no una pila. El suelo del minmax impide que la columna
     de la marca se estreche hasta el wordmark; el reparto 1/5 da el sitio a los
     enlaces, que son cinco grupos contra uno de ella. */
  .pie__int {
    grid-template-columns: minmax(170px, 1fr) 5fr;
    gap: 44px;
  }

  .interior main { padding-top: 96px; }
}

@media (min-width: 640px) and (max-width: 899px) {
  .ventajas { grid-template-columns: repeat(2, 1fr); }
}