/* ==========================================================================
   v8 · SECCIONES
   --------------------------------------------------------------------------
   Todo sobre `--grafito`, separado por filetes de un píxel, sin tarjetas con
   sombra ni esquinas redondeadas. La rejilla de un píxel —fondo de línea y
   celdas opacas encima— es el recurso que se repite: da la retícula de un
   plano sin dibujar un solo borde.
   ========================================================================== */

.cota--acero{ color:var(--acero-hi); }

/* ============================================================ operaciones */
/* ⚠ **Las rejillas de un píxel no llevan fondo: lo llevan las celdas.**
   Antes el filete salía del fondo del contenedor asomando por los huecos, y eso
   tiene un fallo que sólo aparece cuando la última fila no se llena: las celdas
   vacías se ven igual que las llenas —con su borde y su fondo— y queda un
   rectángulo negro enmarcado al lado del contenido. Con cuatro operaciones en
   tres columnas pasa siempre, y en la cartera pasa en cuanto se filtra.

   Ahora cada celda lleva su propio filete como `box-shadow`, que no ocupa
   espacio. Los de dos celdas vecinas caen en el mismo hueco de un píxel y se
   ven como una sola línea, igual que antes; y donde no hay celda, no hay nada
   que dibujar. Arregla el caso entero en vez de cuadrar el número de columnas
   de cada lista una por una. */
.operaciones{
  margin-top:56px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1px;
}
.op{
  background:var(--grafito); padding:30px 26px 34px;
  display:flex; flex-direction:column;
  box-shadow:0 0 0 1px var(--linea);
}
.op h3{
  font-family:var(--f-display); font-weight:400; font-size:clamp(23px,2.3vw,32px);
  line-height:1.1; color:var(--caliza); margin:12px 0 0;
}
.op__sintesis{ margin:10px 0 0; font-size:15px; line-height:1.6; color:var(--ocre-hi); }
.op__cuerpo{ margin:14px 0 0; font-size:14.5px; line-height:1.72; color:var(--tinta-2); }
.op__incluye{ list-style:none; margin:20px 0 0; padding:0; }
.op__incluye li{
  position:relative; padding-left:18px; margin-bottom:8px;
  font-size:13.5px; line-height:1.55; color:var(--tinta-3);
}
.op__incluye li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:8px; height:1px; background:var(--acero-hi);
}
.op__ir{
  margin-top:auto; padding-top:22px;
  font-family:var(--f-cota); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta); text-decoration:none;
  transition:color .35s var(--e-cine);
}
.op__ir:hover{ color:var(--ocre-hi); }

/* ============================================================ anticrético */
.anti{ margin-top:34px; }
.anti__entrada{
  max-width:56ch;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(19px,1.9vw,26px); line-height:1.42; color:var(--caliza);
}
.anti__claves{
  margin-top:52px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:1px;
}
.anti__clave{
  background:var(--grafito); padding:28px 24px 32px;
  box-shadow:0 0 0 1px var(--linea);
}
.anti__clave h3{
  font-family:var(--f-display); font-weight:400; font-size:clamp(19px,1.8vw,25px);
  line-height:1.15; color:var(--caliza); margin:10px 0 12px;
}
.anti__clave p{ margin:0; font-size:14px; line-height:1.72; color:var(--tinta-2); }
/* El aviso legal, con filete a la izquierda y en gris: tiene que estar y no
   tiene que competir. */
.anti__aviso{
  margin-top:34px; max-width:64ch; padding-left:16px;
  border-left:1px solid var(--linea-cota);
  line-height:1.7; text-transform:none; letter-spacing:.02em; font-size:12px;
}

/* ================================================================ filtros */
.filtros{
  margin-top:40px; display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,44px);
  padding-bottom:26px; border-bottom:1px solid var(--linea);
}
.filtros__grupo{ display:flex; flex-direction:column; gap:10px; }
.filtros__botones{ display:flex; flex-wrap:wrap; gap:2px; }
.filtros button{
  font:inherit; font-family:var(--f-cota); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--tinta-3);
  background:transparent; border:1px solid var(--linea-2); border-radius:var(--r-1);
  padding:8px 13px; cursor:pointer;
  transition:color .3s var(--e-cine), background .3s var(--e-cine), border-color .3s var(--e-cine);
}
.filtros button:hover{ color:var(--tinta); border-color:var(--linea); }
.filtros button.on{ color:var(--grafito); background:var(--caliza); border-color:var(--caliza); }

/* ================================================================ cartera */
.cartera{
  margin-top:2px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:1px;
}
.cartera__vacio{ margin-top:32px; }

.ficha{
  background:var(--grafito); display:flex; flex-direction:column;
  box-shadow:0 0 0 1px var(--linea);
}
/* Dos capas en el mismo hueco: el dibujo abajo, la foto encima cuando llegue.
   `position:relative` y no `grid` con las dos superpuestas, porque el dibujo
   tiene que quedarse centrado y a su tamaño mientras la foto llena todo. */
.ficha__lamina{
  position:relative; overflow:hidden;
  aspect-ratio:5/3; display:grid; place-items:center;
  background:var(--grafito-2); border-bottom:1px solid var(--linea);
  color:var(--acero-hi);
}
.ficha__lamina svg{ width:78%; height:78%; opacity:.5; }

/* La foto: encima, y **invisible hasta que ha cargado de verdad**. Sin esa
   condición, una imagen que falla deja un hueco en blanco tapando el dibujo
   durante todo el tiempo que tarde en fallar. El filtro le baja un punto la
   saturación y el brillo para que todas las fichas se parezcan entre sí aunque
   las fotos vengan de sitios distintos, que es lo que va a pasar en cuanto
   entren seis fotos reales de seis inmuebles. */
.ficha__foto{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  opacity:0;
  filter:saturate(.88) brightness(.92);
  transition:opacity .55s var(--e-cine), transform .9s var(--e-cine), filter .6s var(--e-cine);
}
.ficha__lamina.con-foto .ficha__foto{ opacity:1; }
.ficha:hover .ficha__lamina.con-foto .ficha__foto{
  transform:scale(1.03); filter:saturate(1) brightness(1);
}
.ficha__cuerpo{ padding:24px 24px 28px; display:flex; flex-direction:column; flex:1; }
.ficha h3{
  font-family:var(--f-display); font-weight:400; font-size:clamp(21px,2vw,28px);
  line-height:1.12; color:var(--caliza); margin:10px 0 0;
}
.ficha__donde{ margin:8px 0 0; }
.ficha__resumen{ margin:14px 0 0; font-size:13.8px; line-height:1.7; color:var(--tinta-2); }

.ficha__datos{ margin:22px 0 0; display:grid; gap:1px; background:var(--linea-2); }
.ficha__datos > div{
  background:var(--grafito); display:flex; justify-content:space-between; gap:14px;
  padding:9px 0;
}
.ficha__datos dt{
  font-family:var(--f-cota); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-3);
}
.ficha__datos dd{ margin:0; font-size:13.5px; color:var(--tinta); text-align:right; }

.ficha__wa{
  margin-top:auto; padding-top:22px;
  font-family:var(--f-cota); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta); text-decoration:none;
  transition:color .35s var(--e-cine);
}
.ficha__wa:hover{ color:var(--ocre-hi); }

/* La marca de ficha de ejemplo. Se ve, y tiene que verse: una cartera de
   demostración sin marcar hace que alguien llame preguntando por un inmueble
   que no existe. */
.ficha__demo{
  margin-left:10px; padding:2px 7px;
  background:var(--acero-dim); border:1px solid var(--linea-cota);
  color:var(--acero-hi); font-size:8.5px; letter-spacing:.18em;
}
.ficha--demo .ficha__lamina svg{ opacity:.3; }

/* ================================================================ proceso */
.proceso{ list-style:none; margin:52px 0 0; padding:0; }
.paso{
  display:grid; grid-template-columns:64px 1fr; gap:clamp(14px,2.4vw,34px);
  padding:28px 0; border-top:1px solid var(--linea);
}
.paso:last-child{ border-bottom:1px solid var(--linea); }
.paso__n{ font-size:12px; padding-top:6px; }
.paso h3{
  font-family:var(--f-display); font-weight:400; font-size:clamp(21px,2.2vw,30px);
  line-height:1.1; color:var(--caliza); margin:0;
}
.paso__plazo{ margin:8px 0 0; }
.paso p:last-child{ margin:12px 0 0; max-width:64ch; font-size:14.5px; line-height:1.74; color:var(--tinta-2); }

/* =============================================================== trámites */
.tramites{
  margin-top:52px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1px;
}
.tramite{
  background:var(--grafito); padding:26px 24px 30px;
  box-shadow:0 0 0 1px var(--linea);
}
.tramite h3{
  font-family:var(--f-display); font-weight:400; font-size:clamp(18px,1.7vw,24px);
  line-height:1.15; color:var(--caliza); margin:12px 0 10px;
}
.tramite p:last-child{ margin:0; font-size:13.8px; line-height:1.7; color:var(--tinta-3); }

/* =============================================================== contacto */
.cierre__caja{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,90px);
  align-items:start;
}
.contacto__datos{ margin:44px 0 0; display:grid; gap:1px; background:var(--linea); }
.contacto__datos > div{ background:var(--grafito); padding:12px 0; }
.contacto__datos dt{ margin-bottom:5px; }
.contacto__datos dd{ margin:0; font-size:15px; color:var(--tinta); }
.contacto__datos a{ color:var(--tinta); text-decoration:none; border-bottom:1px solid var(--linea); }
.contacto__datos a:hover{ color:var(--ocre-hi); border-color:var(--ocre-hi); }

/* ==================================================== la obra con mandos */
.obra-monta{ margin-top:52px; }

/* ==================================================== formulario */
.form{ display:flex; flex-direction:column; gap:18px; }
/* «(opcional)» en cursiva y más apagado: se lee como una aclaración y no como
   parte del nombre del campo. */
.form__campo span i{ font-style:italic; opacity:.62; letter-spacing:.04em; }
.form__fila{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form__campo{ display:flex; flex-direction:column; gap:8px; }
.form input, .form select, .form textarea{
  font:inherit; font-size:15px; color:var(--tinta);
  background:var(--grafito-2); border:1px solid var(--linea); border-radius:var(--r-1);
  padding:13px 14px; width:100%;
  transition:border-color .3s var(--e-cine);
}
.form input::placeholder, .form textarea::placeholder{ color:var(--tinta-3); }
.form input:focus, .form select:focus, .form textarea:focus{
  outline:none; border-color:var(--acero-hi);
}
.form textarea{ resize:vertical; min-height:110px; }
/* El aviso de campo obligatorio no es un mensaje flotante: es el propio campo
   poniéndose rojo. Menos cosas en pantalla y se mira donde hay que mirar. */
.form--falta input:invalid, .form--falta input[required]:placeholder-shown{ border-color:var(--ocre-hi); }

.form__enviar{
  align-self:start; margin-top:6px;
  font:inherit; font-family:var(--f-cota); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--grafito);
  background:var(--caliza); border:1px solid var(--caliza); border-radius:var(--r-1);
  padding:15px 26px; cursor:pointer;
  transition:background .35s var(--e-cine), transform .35s var(--e-cine);
}
.form__enviar:hover{ background:#fff; transform:translateY(-2px); }
.form__nota{ margin:0; line-height:1.6; text-transform:none; letter-spacing:.02em; }

/* ============================================================== estrecho */
@media (max-width:900px){
  .cierre__caja{ grid-template-columns:1fr; }
  .form__fila{ grid-template-columns:1fr; }
  .paso{ grid-template-columns:44px 1fr; }
  .cartera{ grid-template-columns:1fr; }
  .filtros{ gap:22px; }
}