/* Relevo — Cómo funciona (/como-funciona). Solo lo propio de esta página; lo común está en ds.css.
   Traspaso: marketing/web/traspaso-web-v4/como-funciona/. */

/* ===== Portada: componente .hero-landing de ds.css ===== */

/* ===== La venta, día a día ===== */
#proceso{padding:120px 0 64px}
#proceso .cabecera{max-width:820px}
#tl{position:relative}
.tl-list{position:relative;margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.tl-list::before{content:"";position:absolute;left:50%;margin-left:-1px;top:40px;bottom:40px;width:2px;
  background:linear-gradient(180deg,var(--action) 0%,var(--brand-soft) 100%)}
#tl-fill{position:absolute;left:50%;margin-left:-1px;top:40px;bottom:40px;width:2px;background:var(--action);
  transform-origin:top;transform:scaleY(0);pointer-events:none}
#tl-car{position:absolute;left:50%;top:0;width:0;height:0;z-index:4;pointer-events:none}
#tl-car svg{position:absolute;left:-31px;top:-16px;width:62px;height:62px;filter:drop-shadow(0 8px 16px rgba(21,23,28,.25))}

.step{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);align-items:center;padding:56px 0}
.step-num{grid-column:2;position:relative;z-index:2;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--grad-rojo-texto);color:var(--on-color);font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.04em;
  box-shadow:0 0 0 8px var(--surface);justify-self:center}
.step.on .step-num{background:var(--grad-rojo-texto)}
.step-text{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:14px}
.step-visual{grid-column:3;grid-row:1}
.step.is-right .step-text{grid-column:3}
.step.is-right .step-visual{grid-column:1}
.step-h3{font-size:32px;line-height:36.8px;letter-spacing:-.035em}
.step-txt{font-size:17px;line-height:27px}
.step-bullets{margin:4px 0 0;display:flex;flex-direction:column;gap:10px}
.bul{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:24px;font-weight:500;color:var(--ink)}
.bul .check{margin-top:2px}
.stime{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;height:32px;padding:0 14px;border-radius:999px;
  background:var(--brand-soft);color:var(--brand-text);font-size:13px;line-height:18px;font-weight:700;margin-top:6px}
.stime::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--action)}
.step-visual .mock{width:100%}

/* ilustraciones nuevas: mandato y fotos */
.mock .hd.importe{white-space:nowrap}
.etq{white-space:nowrap}
/* Evita que "1.795 €" (y similares) partan en dos líneas en las ilustraciones a ancho estrecho */
.step-visual .fila b{white-space:nowrap}
.docl{height:8px;border-radius:999px;background:#ECEDEF;margin-bottom:10px}
.docl-88{width:88%}.docl-70{width:70%}.docl-45{width:45%}
.mandato-cuerpo{position:relative;padding:18px 18px 14px}
.mandato-sello{position:absolute;right:18px;top:16px;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;
  border:2px solid var(--action);border-radius:8px;color:var(--action);background:rgba(255,255,255,.92);
  font-size:12px;line-height:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-5deg)}
.fotos-cuerpo{padding:16px 18px 10px}
.fotos-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.foto-mini{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:4/3;background:#EDEDED}
.foto-mini picture,.foto-mini img{width:100%;height:100%;object-fit:cover}
.foto-mini .tick{position:absolute;right:5px;bottom:5px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--action)}
.foto-mini .tick svg{width:10px;height:10px;stroke:var(--on-color);stroke-width:3.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.foto-mini--falta::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.6)}
.barra-prog{margin-top:14px;height:6px;border-radius:999px;background:#ECEDEF;overflow:hidden}
.barra-prog i{display:block;height:100%;width:87%;background:var(--action);border-radius:999px}

/* Mockups: etiqueta "Ejemplo" discreta junto al badge informativo del mock-head */

@media (max-width:767px){
  #proceso{padding:64px 16px 24px}
  #proceso .contenedor{padding:0}
  .tl-list::before{left:19px;margin-left:0;top:20px;bottom:80px}
  #tl-fill{left:19px;margin-left:0;top:20px;bottom:80px}
  #tl-car{left:19px}
  #tl-car svg{width:40px;height:40px;left:-20px;top:-20px}
  .step{grid-template-columns:40px minmax(0,1fr);column-gap:16px;padding:0 0 56px}
  .step-num{grid-column:1;width:40px;height:40px;font-size:17px;align-self:start}
  .step-text{grid-column:2;grid-row:1;gap:24px}
  .step.is-right .step-text{grid-column:2}
  .step-visual{grid-column:2;grid-row:2;margin-top:24px}
  .step.is-right .step-visual{grid-column:2}
  .step-h3{font-size:24px;line-height:27.6px}
  .mock .hd.importe{font-size:32px;line-height:38px}
  .avisos-hora{font-size:32px;line-height:38px}
  .mock-head{flex-wrap:wrap;row-gap:8px}
  .cerrada{flex-wrap:wrap;row-gap:8px}
}

/* ===== Ya está. Vendido. ===== */
.meta{position:relative;background:var(--surface)}
.meta-franja{height:44px;background-color:var(--surface);
  background-image:linear-gradient(45deg,var(--action) 25%,transparent 25%,transparent 75%,var(--action) 75%),
    linear-gradient(45deg,var(--action) 25%,transparent 25%,transparent 75%,var(--action) 75%);
  background-size:44px 44px;background-position:0 0,22px 22px}
.meta-cuerpo{padding:88px 0 112px;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.meta-h{font-size:96px;line-height:1}
.meta-lead{max-width:680px}
.meta-cuerpo .btn{margin-top:8px}

@media (max-width:767px){
  .meta-franja{height:32px;background-size:32px 32px;background-position:0 0,16px 16px}
  .meta-cuerpo{padding:56px 16px 64px;gap:24px}
  .meta-h{font-size:48px;line-height:1.08}
  .meta-cuerpo .btn{width:100%;white-space:normal;height:auto;min-height:56px;padding:12px 20px}
}

/* ===== Si vendes ===== */
.si-vendes{background:var(--surface);padding:112px 0}
.si-vendes .contenedor{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:stretch}
.sv-foto{position:relative;border-radius:20px;overflow:hidden;height:100%}
.sv-foto picture,.sv-foto img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.sv-texto{display:flex;flex-direction:column;gap:18px;text-align:left}
.sv-h2{font-size:52px;line-height:1.04}
.sv-texto .btn{margin-top:8px;align-self:flex-start}

@media (max-width:767px){
  .si-vendes{padding:64px 0}
  .si-vendes .contenedor{grid-template-columns:1fr;gap:28px}
  .si-vendes .sv-foto{order:2;height:280px}
  .si-vendes .sv-texto{order:1}
  .sv-h2{font-size:32px}
  .sv-texto .btn{width:100%}
}

/* ===== Si compras ===== */
.si-compras{background:var(--surface-tint);padding:112px 0}
.si-compras .cabecera{max-width:760px}
.sc-h2{font-size:52px;line-height:1.04}
.sc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sc-card{display:flex;flex-direction:column;gap:14px;padding:36px 30px;border-radius:12px;background:var(--surface)}
.sc-card h3{font-size:22px;line-height:28px;letter-spacing:-.03em;margin-top:10px}
.sc-cierre{max-width:900px}

@media (max-width:767px){
  .si-compras{padding:64px 0}
  .si-compras .contenedor{padding:0 16px}
  .sc-h2{font-size:32px}
  .sc-grid{grid-template-columns:1fr}
  .sc-card{padding:28px 22px}
}

/* ===== Banda final ===== */
.banda-como{padding:112px 0}
.banda-como .la-e{width:760px;right:-200px;top:-170px}
.banda-como .hd{font-size:64px}
.banda-como .botones{margin-top:8px}
@media (max-width:767px){
  .banda-como{padding:64px 16px}
  .banda-como .la-e{width:420px;right:-230px;top:-40px}
  .banda-como .hd{font-size:36px}
}