/* ─────────────────────────────────────────────────────────────
   FLUYO · portada
   Estilo «Flow». Los tokens, la barra, los botones, el pie y el
   banner de cookies viven en base.css: aquí solo van las secciones
   propias de la portada.

   Este archivo va SIEMPRE en un .css externo, nunca dentro del HTML:
   la CSP del sitio es style-src 'self' sin unsafe-inline, así que un
   <style> o un style="..." no se aplicarían.
   ───────────────────────────────────────────────────────────── */

:root{
  --r:20px;      /* tarjetas y contenedores */
  --rs:14px;     /* elementos internos */
  --pill:100px;  /* botones y etiquetas */
  --entra:cubic-bezier(.2,.7,.2,1);
}

/* 1 · Utilidades de la portada ------------------------------- */
.envoltorio{
  width:min(100% - clamp(32px,8vw,104px),1200px);
  margin-inline:auto;
}
.saltar{
  position:absolute;top:0;left:0;z-index:400;
  width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
  background:var(--ink);color:var(--onInk);
  padding:12px 20px;border-radius:0 0 var(--rs) 0;font-weight:500;
}
.saltar:focus{width:auto;height:auto;overflow:visible;clip:auto;color:var(--onInk)}

/* Entrada de los bloques al llegar a la vista. Sin JS o con
   «reducir movimiento», js/web.js los marca .visto de una vez. */
.js [data-rev]{opacity:0;transform:translateY(16px)}
.js [data-rev].visto{
  opacity:1;transform:none;
  transition:opacity .6s var(--entra),transform .6s var(--entra);
}

/* 2 · Portada ------------------------------------------------ */
.hero{
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:min(790px,100svh);
  padding:clamp(124px,16vh,148px) 0 clamp(38px,6vw,54px);
}
.hero h1{
  font-size:clamp(48px,9.2vw,116px);font-weight:600;
  letter-spacing:-.055em;line-height:.92;max-width:12ch;text-wrap:balance;
}
.hero-abajo{
  display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:end;
  margin-top:clamp(38px,6vw,78px);padding-top:26px;
  border-top:1px solid var(--hair);
}
.hero-texto{
  color:var(--tx2);font-size:clamp(18px,2vw,24px);
  letter-spacing:-.02em;line-height:1.34;max-width:35ch;text-wrap:pretty;
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;align-items:center}

/* 3 · Cómo trabaja ------------------------------------------- */
section{border-top:1px solid var(--hair)}
.sec-trabajo{padding-top:clamp(56px,8vw,112px)}
.rejilla-trabajo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.75fr);
  gap:clamp(42px,7vw,110px);
}
.columna-textos .etiqueta{margin-bottom:26px}
.bloque{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  min-height:clamp(340px,46vw,520px);padding:34px 0;
}
.bloque + .bloque{border-top:1px solid var(--hair)}
.bloque-num{
  color:var(--tx2);font-size:12px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;
}
.bloque h3{
  font-size:clamp(32px,4.2vw,56px);font-weight:600;
  letter-spacing:-.045em;line-height:1.02;margin:17px 0;
  max-width:14ch;text-wrap:balance;
}
.bloque p{
  color:var(--tx2);font-size:clamp(17px,1.7vw,20px);
  line-height:1.45;max-width:39ch;text-wrap:pretty;
}

/* El móvil de ejemplo, pegado mientras se leen los tres bloques */
.columna-movil{
  position:sticky;top:94px;
  display:flex;align-items:center;justify-content:center;
  height:calc(100svh - 120px);
}
.selector{display:none}
.movil{
  width:min(100%,352px);padding:10px;
  background:var(--band);border:1px solid var(--hair);border-radius:42px;
}
.pantalla{
  position:relative;overflow:hidden;min-height:590px;
  background:var(--card);border:1px solid var(--hair);border-radius:34px;
}
.pant{display:none;flex-direction:column;min-height:590px}
.pant.on{display:flex}

.chat-cab{
  display:flex;align-items:center;gap:11px;padding:18px;
  border-bottom:1px solid var(--hair);
}
.chat-icono{display:flex;flex:none}
.chat-cab b{display:block;font-size:15px;font-weight:600;letter-spacing:-.02em}
.chat-cab span:not(.chat-icono){display:block;font-size:12px;color:var(--tx2);margin-top:1px}
.chat{display:flex;flex:1;flex-direction:column;justify-content:flex-end;gap:10px;padding:18px}
.burbuja{
  max-width:84%;padding:11px 14px;border-radius:18px;
  font-size:15px;line-height:1.36;
}
.burbuja.cliente{align-self:flex-end;background:var(--band);border-bottom-right-radius:5px}
.burbuja.fluyo{align-self:flex-start;background:var(--acc);color:var(--onAcc);border-bottom-left-radius:5px}
.chat-nota{align-self:center;margin-top:7px;font-size:11px;color:var(--tx2)}

.pant-tel{align-items:center;justify-content:center;padding:27px 22px;text-align:center}
.tel-icono{
  display:grid;place-items:center;width:78px;height:78px;margin-bottom:18px;
  background:var(--band);border-radius:50%;color:var(--tx);
}
.tel-tit{font-size:19px;font-weight:600;letter-spacing:-.025em}
.tel-num{display:block;margin:5px 0 20px;font-size:14px;color:var(--tx2)}
.tel-vivo{display:block;margin-bottom:21px;font-size:13px;font-weight:500;color:var(--acc)}
.tel-resumen{width:100%;padding:17px;border:1px solid var(--hair);border-radius:17px;text-align:left}
.tel-resumen span{
  display:block;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx2);
}
.tel-resumen p{margin-top:9px;font-size:14px;line-height:1.45;color:var(--tx2)}

.web-barra{display:flex;gap:6px;padding:16px 18px;border-bottom:1px solid var(--hair)}
.web-barra i{width:8px;height:8px;border-radius:50%;background:var(--hair2)}
.web-cab{display:flex;align-items:center;justify-content:space-between;padding:18px 21px}
.web-cab b{font-size:15px;font-weight:600;letter-spacing:-.02em}
.web-cab span{font-size:12px;color:var(--tx2)}
.web-cuerpo{
  display:flex;flex:1;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  min-height:280px;margin:0 12px 12px;padding:22px;background:var(--band);
}
.web-cuerpo b{font-size:32px;font-weight:600;letter-spacing:-.055em;line-height:.98;max-width:8ch}
.web-cuerpo span{margin-top:13px;font-size:13px;line-height:1.35;color:var(--tx2);max-width:20ch}
.web-cta{
  margin-top:17px;padding:9px 14px;border-radius:var(--pill);
  background:var(--ink);color:var(--onInk);font-size:12px;font-weight:500;
}
.web-precios{display:grid;grid-template-columns:1fr 1fr;padding:0 18px 18px}
.web-precios div{
  display:flex;gap:6px;padding:10px 0;
  border-top:1px solid var(--hair);font-size:12px;color:var(--tx2);
}
.web-precios b{font-weight:500;color:var(--tx)}

/* 4 · Proceso ------------------------------------------------ */
.sec-proceso{background:var(--band);padding:clamp(64px,9vw,132px) 0}
.rejilla-proceso{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(42px,8vw,120px)}
.proceso-tit h2{
  margin-top:20px;font-size:clamp(36px,5.2vw,68px);font-weight:600;
  letter-spacing:-.055em;line-height:.98;max-width:11ch;text-wrap:balance;
}
.pasos{border-top:1px solid var(--hair)}
.paso{display:grid;grid-template-columns:66px 1fr;gap:20px;padding:25px 0}
.paso + .paso{border-top:1px solid var(--hair)}
.paso-num{padding-top:3px;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--tx2)}
.paso h3{margin-bottom:7px;font-size:23px;font-weight:500;letter-spacing:-.03em;line-height:1.2}
.paso p{color:var(--tx2);max-width:38ch;text-wrap:pretty}

/* 5 · Asesoría gratuita -------------------------------------- */
.sec-hablamos{padding:clamp(64px,10vw,136px) 0}
.rejilla-hablamos{display:grid;grid-template-columns:.87fr 1.13fr;gap:clamp(44px,8vw,130px);align-items:start}
.hablamos-texto h2{
  margin-top:20px;font-size:clamp(36px,5.2vw,68px);font-weight:600;
  letter-spacing:-.055em;line-height:.98;max-width:11ch;text-wrap:balance;
}
.hablamos-texto > p{margin-top:26px;font-size:19px;line-height:1.45;color:var(--tx2);max-width:33ch;text-wrap:pretty}
.hablamos-texto .contacto{margin-top:32px;font-size:15px}
/* El número no se parte nunca entre dos líneas. */
.hablamos-texto .contacto a[href^="tel:"]{white-space:nowrap}

.tarjeta-form{
  padding:clamp(22px,3.5vw,42px);
  background:var(--band);border:1px solid var(--hair);border-radius:var(--r);
}
.barra{height:3px;margin-bottom:29px;background:var(--hair);border-radius:var(--pill);overflow:hidden}
.barra i{display:block;height:100%;width:20%;background:var(--acc);transition:width .25s var(--entra)}

.fase{display:none;flex-direction:column;min-height:305px}
.fase.on{display:flex}
.fase[hidden]{display:none}
.fase-tit{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tx2)}
.fase h3{
  margin:14px 0 24px;font-size:clamp(26px,3.1vw,38px);font-weight:600;
  letter-spacing:-.045em;line-height:1.08;max-width:18ch;text-wrap:balance;
}
.fase h3:focus{outline:none}
.fase h3:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.fase-ayuda{margin:-12px 0 18px;font-size:14px;color:var(--tx2)}
.fase-ayuda-legal{margin:18px 0 0;font-size:13px;line-height:1.5}

.opciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.opcion{
  min-height:54px;padding:12px 14px;text-align:left;
  background:var(--page);border:1px solid var(--hair);border-radius:var(--rs);
  color:var(--tx);font-size:15px;
  transition:border-color .2s,background .2s,color .2s;
}
.opcion:hover{border-color:var(--hair2)}
.opcion[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--onInk)}

.campos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.campo-caja{display:flex;flex-direction:column;gap:6px}
.campo-caja label{font-size:13px;font-weight:500;color:var(--tx2)}
.campo{
  width:100%;min-height:52px;padding:0 15px;
  background:var(--page);border:1px solid var(--hair);border-radius:var(--rs);
  color:var(--tx);font-size:16px;outline:0;transition:border-color .2s;
}
.campo:focus{border-color:var(--acc)}
.campo[aria-invalid="true"]{border-color:var(--acc)}

/* El último paso: calendario, horas y confirmación en la misma pantalla. */
.fase-final.on{display:flex;flex-direction:column}

/* El calendario, encajado como en las webs de reservas: su propia caja. */
.cal-caja{border:1px solid var(--hair);border-radius:18px;padding:16px 14px}
.cal-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
/* Sin text-transform: la mayúscula la pone js/web.js, que sabe que en español
   se escribe «Agosto de 2026» y no «Agosto De 2026». */
.cal-cab b{font-size:16px;font-weight:600;letter-spacing:-.02em}
.cal-flechas{display:flex;gap:8px}
.cal-mes{
  width:44px;height:44px;border-radius:var(--pill);border:1px solid var(--hair);
  font-size:17px;color:var(--tx2);display:flex;align-items:center;justify-content:center;
  background:transparent;transition:color .2s,border-color .2s;
}
.cal-mes:hover:not(:disabled){color:var(--tx);border-color:var(--hair2)}
.cal-mes:disabled{opacity:.3;cursor:default}

/* minmax(0,1fr) y no 1fr: los botones traen min-width automático y con siete
   columnas en una pantalla de 360 px eso empujaba la rejilla fuera de la
   tarjeta. Así las celdas se encogen y el calendario nunca desborda. */
.cal-dias,.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-dias span,.cal>*{min-width:0}
.cal-dias{margin-bottom:6px}
.cal-dias span{text-align:center;font-size:11.5px;font-weight:600;color:var(--tx3)}
.dia{
  height:44px;border-radius:12px;font-size:15px;border:1px solid transparent;
  background:transparent;color:var(--tx);
  transition:background .2s,border-color .2s,color .2s;
}
/* Los días que se pueden pulsar llevan borde: sin él, el calendario parece un
   listado de números y no se ve que sea algo con lo que hay que hacer clic. */
.dia:enabled{border-color:var(--hair);font-weight:500}
.dia:disabled{color:var(--tx3);opacity:.4;cursor:default}
.dia:hover:not(:disabled):not(.sel){border-color:var(--hair2)}
.dia.sel{background:var(--acc);border-color:var(--acc);color:var(--onAcc)}

/* Con --tx3 se quedaba en 3.8:1 contra la tarjeta y no se leía. */
.cal-pista{margin-top:14px;font-size:14px;color:var(--tx2);text-wrap:pretty}
.cal-pista[hidden]{display:none}
.horas-caja{margin-top:20px}
.horas-caja[hidden]{display:none}
.horas-tit{
  display:block;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx3);margin-bottom:12px;
}
.horas{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px}
.hora{
  min-height:44px;border-radius:12px;font-size:15px;border:1px solid var(--hair);
  background:transparent;color:var(--tx);
  transition:background .2s,border-color .2s,color .2s;
}
.hora:hover:not(.sel):not(:disabled){border-color:var(--hair2)}
.hora.sel{background:var(--acc);border-color:var(--acc);color:var(--onAcc)}
/* Cogida o pasada. Se enseña tachada en vez de esconderla: así se ve que hay
   una agenda de verdad detrás y que quedan huecos, no un formulario a ciegas. */
.hora:disabled{
  color:var(--tx3);border-color:transparent;background:var(--page);
  cursor:default;text-decoration:line-through;text-decoration-thickness:1px;
}

/* El cierre: consentimiento, aviso y las dos salidas. */
.cierre{
  display:flex;flex-direction:column;gap:16px;
  margin-top:22px;padding-top:22px;border-top:1px solid var(--hair);
}
.trampa{
  position:absolute;top:0;left:0;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none;
}
.consent{
  display:flex;align-items:flex-start;gap:11px;
  font-size:14px;color:var(--tx2);line-height:1.45;cursor:pointer;
}
.consent input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:var(--acc);cursor:pointer}
.consent.mal{color:var(--acc)}
.aviso{
  font-size:14px;line-height:1.45;padding:12px 16px;
  border-radius:14px;border:1px solid var(--hair);color:var(--tx2);
}
.aviso[hidden]{display:none}
.aviso.bien{border-color:var(--acc);color:var(--tx)}
.aviso.mal{border-color:var(--acc);color:var(--acc)}
.btn-enviar{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:0 24px;border-radius:var(--pill);
  background:var(--acc);color:var(--onAcc);
  font-size:17px;font-weight:600;text-align:center;transition:opacity .2s;
}
.btn-enviar:hover:not(:disabled){opacity:.9;color:var(--onAcc)}
.btn-enviar:active:not(:disabled){transform:scale(.99)}
.btn-enviar:disabled{opacity:.5;cursor:default}
.nota-envio{font-size:13.5px;color:var(--tx2);text-align:center;text-wrap:pretty}
/* La segunda salida es neutra a propósito: el acento terracota de esta
   pantalla ya se lo lleva «Sí, confirmo la cita», que es la vía rápida. */
.btn-wa{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 20px;border-radius:var(--pill);
  border:1px solid var(--hair);background:transparent;color:var(--tx);
  font-size:15px;font-weight:500;transition:border-color .2s;
}
.btn-wa:hover{border-color:var(--hair2)}

.form-error{margin-top:12px;min-height:19px;font-size:13.5px;color:var(--acc)}
.form-error:empty{margin-top:0}

.pie-form{display:flex;align-items:center;gap:12px;margin-top:22px;min-height:52px}
.btn-atras{padding:0 6px;min-height:44px;font-size:15px;color:var(--tx2)}
.btn-atras:hover{color:var(--tx)}
.btn-atras[hidden]{display:none}
/* El pie del formulario esconde «Siguiente» en el último paso; sin esta regla
   el display:inline-flex del botón ganaba al atributo hidden. */
.btn-sig[hidden]{display:none}
.cuenta{margin-left:auto;font-size:13px;color:var(--tx2)}
.btn-sig{min-height:52px;padding:0 26px;font-size:16px}

/* 6 · Dudas -------------------------------------------------- */
.sec-dudas{padding:clamp(64px,10vw,130px) 0}
.rejilla-dudas{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(44px,9vw,142px)}
.rejilla-dudas h2{
  font-size:clamp(36px,5.2vw,68px);font-weight:600;
  letter-spacing:-.055em;line-height:.98;max-width:9ch;text-wrap:balance;
}
.acordeon{border-top:1px solid var(--hair)}
.acordeon details{border-bottom:1px solid var(--hair)}
.acordeon summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:23px 0;cursor:pointer;list-style:none;
  font-size:clamp(19px,2vw,25px);font-weight:500;letter-spacing:-.025em;
}
.acordeon summary i{
  font-style:normal;font-size:24px;font-weight:400;color:var(--tx2);
  transition:transform .2s var(--entra);
}
.acordeon details[open] summary i{transform:rotate(45deg)}
.acordeon details p{
  margin:-4px 42px 25px 0;color:var(--tx2);max-width:56ch;text-wrap:pretty;
}

/* 7 · Móvil -------------------------------------------------- */
@media (max-width:960px){
  .rejilla-trabajo,.rejilla-proceso,.rejilla-hablamos,.rejilla-dudas{grid-template-columns:1fr}
  .hero{min-height:0;padding-top:clamp(112px,20vh,132px)}
  .columna-movil{position:static;height:auto;padding:4px 0 48px;flex-direction:column}
  .selector{
    display:flex;gap:2px;width:min(100%,352px);margin:0 0 12px;padding:4px;
    background:var(--band);border:1px solid var(--hair);border-radius:var(--pill);
  }
  .selector button{
    flex:1;min-height:44px;padding:0 6px;border-radius:var(--pill);
    color:var(--tx2);font-size:12.5px;font-weight:500;
    transition:background .2s,color .2s;
  }
  .selector button[aria-pressed="true"]{background:var(--card);color:var(--tx)}
  .bloque{min-height:0;padding:40px 0}
  .proceso-tit h2,.hablamos-texto h2,.rejilla-dudas h2{max-width:14ch}
}

@media (max-width:620px){
  .hero h1{font-size:clamp(44px,13vw,72px)}
  .hero-abajo{grid-template-columns:1fr;align-items:start;margin-top:34px;padding-top:22px}
  .hero-ctas{justify-content:flex-start}
  .hero-ctas .btn-acc{width:100%}
  .hero-ctas .btn-secundario{display:none}
  .bloque h3{font-size:clamp(30px,8vw,36px)}
  .pantalla,.pant{min-height:545px}
  .paso{grid-template-columns:44px 1fr;gap:14px}
  .paso h3{font-size:21px}
  .tarjeta-form{padding:22px 17px}
  .fase{min-height:330px}
  .opciones,.campos{grid-template-columns:1fr}
  .cal-caja{padding:14px 10px}
  .dia{height:42px;font-size:14.5px}
  .horas{grid-template-columns:repeat(auto-fit,minmax(74px,1fr))}
  .btn-sig{min-height:48px;padding:0 20px}
  .acordeon summary{font-size:19px;padding:20px 0}
  .acordeon details p{margin-right:0}
}

@media (prefers-reduced-motion:reduce){
  .js [data-rev]{opacity:1;transform:none}
  .barra i{transition:none}
}

/* 8 · Consultoría (14/09/2026) ------------------------------
   Secciones nuevas del giro: el problema, cómo trabajamos con precio,
   qué te llevas, qué puede salir y por qué Fluyo. La parrilla
   WhatsApp / Teléfono / Web del bloque 3 se retiró del HTML; su CSS
   se queda por si algún día vuelve una escena. */
.hero h1{font-size:clamp(42px,7.4vw,92px);max-width:16ch}

.problema-tit h2,.informe-tit h2,.casos-tit h2,.porque-tit h2,.proceso-tit h2{
  margin-top:20px;font-size:clamp(32px,4.6vw,58px);font-weight:600;
  letter-spacing:-.05em;line-height:1;max-width:14ch;text-wrap:balance;
}

/* El problema */
.sec-problema{padding:clamp(64px,9vw,128px) 0}
.rejilla-problema{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(42px,8vw,120px);align-items:start}
.problema-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);padding-top:10px}
.problema-cols p{color:var(--tx2);font-size:clamp(17px,1.6vw,20px);line-height:1.5;text-wrap:pretty}

/* Cómo trabajamos: duración y precio de cada paso */
.paso-meta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:14px;
  font-size:14px;color:var(--tx3);max-width:none;
}
.paso-meta b{font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--tx)}
.paso-meta small{width:100%;font-size:13.5px;line-height:1.4;color:var(--tx3)}
.proceso-nota{padding-top:22px;font-size:15px;color:var(--tx2);max-width:48ch;text-wrap:pretty}

/* Qué te llevas */
.sec-informe{padding:clamp(64px,9vw,128px) 0}
.rejilla-informe{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(42px,8vw,120px);align-items:start}
.informe-tit > p{margin-top:24px;font-size:18px;line-height:1.45;color:var(--tx2);max-width:34ch;text-wrap:pretty}
.informe-lista{
  list-style:none;counter-reset:informe;
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,3vw,40px);
  border-top:1px solid var(--hair);
}
.informe-lista li{
  counter-increment:informe;position:relative;
  padding:20px 0 20px 46px;border-bottom:1px solid var(--hair);
  color:var(--tx2);font-size:16px;line-height:1.45;text-wrap:pretty;
}
.informe-lista li::before{
  content:counter(informe,decimal-leading-zero);
  position:absolute;left:0;top:23px;
  font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--acc);
}
.informe-lista b{display:block;margin-bottom:4px;font-weight:600;letter-spacing:-.02em;color:var(--tx)}

/* Qué puede salir */
.sec-casos{background:var(--band);padding:clamp(64px,9vw,128px) 0}
.casos-tit{max-width:60ch;margin-bottom:clamp(32px,4vw,52px)}
.casos-tit > p{margin-top:24px;font-size:18px;line-height:1.45;color:var(--tx2);max-width:44ch;text-wrap:pretty}
.casos-rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.caso{
  display:flex;flex-direction:column;gap:14px;padding:26px 24px;
  background:var(--card);border:1px solid var(--hair);border-radius:var(--r);
}
.caso-sector{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.caso-tipico{font-size:17px;line-height:1.4;letter-spacing:-.015em;color:var(--tx);text-wrap:pretty}
.caso-sale{margin-top:auto;padding-top:14px;border-top:1px solid var(--hair);font-size:15px;line-height:1.45;color:var(--tx2);text-wrap:pretty}
.caso-sale b{display:block;margin-bottom:4px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
.casos-cierre{
  margin-top:clamp(32px,4vw,52px);font-size:clamp(18px,2vw,24px);line-height:1.35;
  letter-spacing:-.02em;color:var(--tx2);max-width:44ch;text-wrap:pretty;
}
.casos-cierre b{font-weight:600;color:var(--tx)}

/* Por qué Fluyo */
.sec-porque{padding:clamp(64px,9vw,128px) 0}
.rejilla-porque{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(42px,8vw,120px);align-items:start}
.porque-lista{border-top:1px solid var(--hair)}
.porque-item{padding:26px 0;border-bottom:1px solid var(--hair)}
.porque-item h3{font-size:clamp(22px,2.4vw,30px);font-weight:500;letter-spacing:-.03em;line-height:1.15;margin-bottom:8px}
.porque-item p{color:var(--tx2);max-width:46ch;text-wrap:pretty}

@media (max-width:960px){
  .rejilla-problema,.rejilla-informe,.rejilla-porque{grid-template-columns:1fr}
  .casos-rejilla{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .hero h1{font-size:clamp(40px,11.5vw,64px)}
  .problema-cols{grid-template-columns:1fr}
  .informe-lista{grid-template-columns:1fr}
  .casos-rejilla{grid-template-columns:1fr}
  .caso{padding:22px 18px}
}