/* TATUARTE R22 — portal utility + trust + project capture
   Black remains the brand anchor. Light surfaces are reserved for tools,
   comparison and trust so the product reads as a useful portal at first sight. */
:root{
  --r22-ink:#090a0d;
  --r22-paper:#f2f3f6;
  --r22-paper-2:#e8eaf0;
  --r22-paper-line:#d8dbe3;
  --r22-paper-text:#101218;
  --r22-paper-muted:#626978;
  --r22-violet:#8074ff;
  --r22-ice:#91d7ff;
}

.r22-body .r19-logo span{font-size:11px;letter-spacing:.09em;color:#9ea5b1}
.r22-body .r20-kicker{color:#a8afbb;font-size:12.5px;letter-spacing:.16em}
.r22-body .r20-hero-lede{max-width:60ch;color:#d0d4dc}

/* First clear signal that this is a portal, not only an editorial landing. */
.r22-portal-utility{
  max-width:var(--r20-max);margin:0 auto;
  display:grid;grid-template-columns:minmax(280px,.9fr) minmax(420px,1.5fr) minmax(240px,.72fr);
  gap:28px;align-items:stretch;
  padding:28px var(--r20-pad);
  background:var(--r22-paper);color:var(--r22-paper-text);
  border-bottom:1px solid var(--r22-paper-line);
}
.r22-utility-copy{align-self:center}
.r22-utility-copy>span,.r22-trust-head>span,.r22-request-intro>span{
  display:block;margin-bottom:8px;font-size:12px;font-weight:760;letter-spacing:.14em;text-transform:uppercase;color:#656d7a
}
.r22-utility-copy h2{margin:0;font-size:clamp(30px,2.6vw,48px);line-height:.94;letter-spacing:-.05em}
.r22-utility-copy p{max-width:52ch;margin:11px 0 0;font-size:15.5px;line-height:1.5;color:var(--r22-paper-muted)}
.r22-utility-steps{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--r22-paper-line);border-top:1px solid var(--r22-paper-line)}
.r22-utility-steps>div{min-width:0;padding:17px 18px;border-right:1px solid var(--r22-paper-line);border-bottom:1px solid var(--r22-paper-line);background:rgba(255,255,255,.48)}
.r22-utility-steps b{display:block;margin-bottom:18px;font-size:11px;font-weight:760;letter-spacing:.14em;color:#777f8c}
.r22-utility-steps strong{display:block;font-size:21px;letter-spacing:-.03em}
.r22-utility-steps span{display:block;margin-top:6px;font-size:13.5px;line-height:1.4;color:#626a78}
.r22-project-link{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-content:center;gap:4px 16px;min-height:126px;padding:20px 22px;border-radius:10px;background:#101219!important;color:#f7f8fb!important;box-shadow:0 18px 42px rgba(22,24,31,.13);overflow:hidden}
.r22-project-link:before{content:"";position:absolute;width:180px;height:180px;right:-70px;top:-105px;background:radial-gradient(circle,rgba(128,116,255,.34),transparent 67%);filter:blur(12px);pointer-events:none}
.r22-project-link>span{font-size:12.5px;color:#aab0bc}
.r22-project-link>strong{font-size:21px;line-height:1.08;letter-spacing:-.03em}
.r22-project-link>b{grid-column:2;grid-row:1/3;align-self:center;font-size:26px;font-weight:400;transition:transform .22s ease}
.r22-project-link:hover b{transform:translateX(5px)}

/* Keep the visual entrance dark, but make it explicitly a directory. */
.r22-body .r20-portal{padding-top:23px}
.r22-body .r20-portal-intro>span{font-size:11px;color:#9299a5}
.r22-body .r20-portal-intro h2{font-size:24px!important}

/* Comparison is intentionally a light working surface. */
.r22-body .r20-discovery{
  position:relative;background:var(--r22-paper);color:var(--r22-paper-text);border-bottom-color:var(--r22-paper-line)
}
.r22-body .r20-discovery .r20-section-head>div>span{color:#6f7682}
.r22-body .r20-discovery .r20-section-head>p{color:#606775}
.r22-body .r20-discovery .r20-discovery-panel{
  background:#fff;border-color:var(--r22-paper-line);box-shadow:0 12px 36px rgba(25,27,34,.055)
}
.r22-body .r20-discovery .r20-panel-head{border-bottom-color:var(--r22-paper-line)}
.r22-body .r20-discovery .r20-panel-head a{color:#5d6472}
.r22-body .r20-discovery .r20-work-strip span,
.r22-body .r20-discovery .r20-compact-list span{color:#68707e}
.r22-body .r20-discovery .r20-compact-list>a{border-bottom-color:var(--r22-paper-line)}
.r22-body .r20-discovery .r20-avatar{background:#e6e8ed;color:#59606d}
.r22-body .r20-discovery .r20-compact-list b{color:#4f5663}
.r22-body .r20-discovery .r20-panel-empty{color:#666e7b}
.r22-body .r20-discovery .r20-demo-card:after{background:rgba(12,14,19,.82);color:#fff}

/* Trust is a compact dark band; facts, not marketing noise. */
.r22-trust-band{
  max-width:var(--r20-max);margin:0 auto;padding:34px var(--r20-pad) 36px;
  display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.8fr);gap:34px;
  background:linear-gradient(110deg,#11131a,#0b0d12 70%);border-bottom:1px solid var(--r20-line)
}
.r22-trust-head h2{margin:0;max-width:15ch;font-size:clamp(31px,3.1vw,50px);line-height:.95;letter-spacing:-.05em}
.r22-trust-head>span{color:#858d99}
.r22-trust-grid{display:grid;grid-template-columns:repeat(2,1fr);border-left:1px solid var(--r20-line);border-top:1px solid var(--r20-line)}
.r22-trust-grid>div{padding:17px 18px;border-right:1px solid var(--r20-line);border-bottom:1px solid var(--r20-line)}
.r22-trust-grid strong{display:block;font-size:17px;letter-spacing:-.02em;color:#f5f6fa}
.r22-trust-grid span{display:block;margin-top:6px;font-size:13.5px;line-height:1.46;color:#9ba2ae}

/* Project request: a real portal task, not a generic contact form. */
.r22-request-hero{max-width:var(--r20-max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(340px,.7fr);gap:50px;align-items:end;padding:clamp(48px,6vw,88px) var(--r20-pad) 38px;background:radial-gradient(circle at 82% 18%,rgba(128,116,255,.13),transparent 30%),#08090c;border-bottom:1px solid var(--r20-line)}
.r22-request-hero h1{max-width:9ch;margin:0;font-size:clamp(58px,6vw,102px);line-height:.86;letter-spacing:-.07em}
.r22-request-hero>div>p:last-child{max-width:62ch;margin:20px 0 0;font-size:17px;line-height:1.55;color:#b9c0cc}
.r22-request-trust{padding:20px;border:1px solid var(--r20-line);border-radius:10px;background:rgba(255,255,255,.025)}
.r22-request-trust>span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8e96a2}
.r22-request-trust ol{list-style:none;margin:15px 0 0;padding:0}
.r22-request-trust li{display:grid;grid-template-columns:32px 1fr;gap:10px;padding:12px 0;border-top:1px solid var(--r20-line)}
.r22-request-trust li>b{font-size:11px;color:#777f8c}
.r22-request-trust strong{display:block;font-size:15px}
.r22-request-trust small{display:block;margin-top:3px;font-size:12.5px;color:#969eaa;line-height:1.4}

.r22-request-shell{max-width:var(--r20-max);margin:0 auto;display:grid;grid-template-columns:minmax(260px,.58fr) minmax(0,1.42fr);gap:42px;padding:42px var(--r20-pad) 68px;background:var(--r22-paper);color:var(--r22-paper-text)}
.r22-request-intro{position:sticky;top:94px;align-self:start}
.r22-request-intro h2{margin:0;max-width:10ch;font-size:clamp(36px,3.5vw,58px);line-height:.92;letter-spacing:-.055em}
.r22-request-intro p{max-width:42ch;margin:16px 0;font-size:15.5px;line-height:1.55;color:#656d79}
.r22-request-intro a{font-size:13.5px;font-weight:720;color:#232732}
.r22-project-form{padding:26px;border:1px solid var(--r22-paper-line);border-radius:12px;background:#fff;box-shadow:0 18px 54px rgba(30,34,42,.06)}
.r22-project-form>label,.r22-form-grid label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:740;color:#303641}
.r22-project-form input,.r22-project-form select,.r22-project-form textarea{width:100%;border:1px solid #d5d8df;border-radius:8px;background:#f9fafb;color:#101218;font:inherit;font-size:15.5px;outline:none;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.r22-project-form input,.r22-project-form select{min-height:50px;padding:0 13px}
.r22-project-form textarea{min-height:158px;padding:13px;resize:vertical;line-height:1.5}
.r22-project-form input:focus,.r22-project-form select:focus,.r22-project-form textarea:focus{border-color:#8d82ff;background:#fff;box-shadow:0 0 0 3px rgba(128,116,255,.11)}
.r22-form-grid{display:grid;gap:13px;margin-bottom:13px}
.r22-form-grid-2{grid-template-columns:repeat(2,1fr)}
.r22-form-grid-3{grid-template-columns:repeat(3,1fr)}
.r22-project-form>label{margin-bottom:13px}
.r22-check{display:grid!important;grid-template-columns:20px 1fr!important;gap:10px!important;align-items:start;margin:16px 0!important;font-size:13.5px!important;font-weight:500!important;line-height:1.45;color:#4f5662!important}
.r22-check input{width:18px!important;height:18px!important;min-height:0!important;margin-top:1px;padding:0!important}
.r22-check a{color:#1f2430;text-decoration:underline;text-underline-offset:2px}
.r22-form-submit{display:flex;align-items:center;gap:18px;margin-top:23px;padding-top:20px;border-top:1px solid var(--r22-paper-line)}
.r22-form-submit button{min-height:50px;padding:0 20px;border:0;border-radius:8px;background:#0e1016;color:#fff;font-size:14px;font-weight:760;cursor:pointer}
.r22-form-submit button span{display:inline-block;margin-left:9px;transition:transform .2s ease}
.r22-form-submit button:hover span{transform:translateX(4px)}
.r22-form-submit small{max-width:48ch;font-size:12.5px;line-height:1.4;color:#707784}

/* User-facing route should feel like part of the portal in header/footer too. */
.r22-body .r19-footer nav a[href*="solicitar-orientacion"]{color:#eef0f5;font-weight:700}
.r22-body .r20-pro-actions a:nth-child(2){border-color:rgba(145,215,255,.28);color:#dcecff}

@media(max-width:1180px){
  .r22-portal-utility{grid-template-columns:1fr 1.4fr}.r22-project-link{grid-column:1/-1;min-height:90px}
  .r22-trust-band{grid-template-columns:1fr}.r22-trust-head h2{max-width:18ch}
}
@media(max-width:900px){
  .r22-portal-utility{grid-template-columns:1fr;gap:18px}.r22-utility-steps{grid-template-columns:1fr 1fr 1fr}.r22-project-link{grid-column:auto}
  .r22-request-hero{grid-template-columns:1fr;gap:26px}.r22-request-shell{grid-template-columns:1fr}.r22-request-intro{position:static}.r22-form-grid-3{grid-template-columns:1fr 1fr}.r22-form-grid-3 label:last-child{grid-column:1/-1}
}
@media(max-width:620px){
  .r22-portal-utility{padding:24px 20px}.r22-utility-steps{grid-template-columns:1fr}.r22-utility-steps>div{min-height:94px}.r22-project-link{min-height:105px}
  .r22-trust-band{padding:30px 20px}.r22-trust-grid{grid-template-columns:1fr}.r22-request-hero{padding:38px 20px 30px}.r22-request-hero h1{font-size:clamp(52px,16vw,76px)}
  .r22-request-shell{padding:30px 20px 50px}.r22-project-form{padding:18px}.r22-form-grid-2,.r22-form-grid-3{grid-template-columns:1fr}.r22-form-grid-3 label:last-child{grid-column:auto}.r22-form-submit{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  .r22-project-link b,.r22-form-submit button span{transition:none!important;transform:none!important}
}
.r22-field-note{display:block;margin-top:6px;font-size:12px;font-weight:500;line-height:1.4;color:#7a818d}