/* =================================================================
   ALL OFFICE SOLUTIONS — portal.css
   Estilos ADITIVOS del Portal de Clientes. Reusa los tokens y
   componentes de styles.css (btn, svc, sec-head, cta, footer).
   ================================================================= */

/* ---------- HERO compacto ---------- */
.phero{
  position:relative; z-index:2;
  padding:calc(96px + 8vh) var(--pad) 9vh;
  max-width:var(--maxw); margin:0 auto;
}
.phero__title{
  font-family:var(--display); font-weight:800; letter-spacing:-.035em; line-height:1.02;
  font-size:clamp(38px, 6.4vw, 88px);
  margin:22px 0 20px;
}
.phero__lead{
  max-width:56ch; font-size:clamp(15px,1.5vw,19px); color:var(--fg-dim);
  margin-bottom:34px;
}
.phero__lead strong{ color:var(--fg); font-weight:600; }

/* ---------- servicios reutilizados: enlaces ---------- */
.services--portal{ padding-top:2vh; }
.services--portal .svc{ cursor:pointer; }

/* ---------- ACCESO (QR / serie) ---------- */
.access{ position:relative; z-index:2; padding:12vh 0; }
.access__grid{
  max-width:var(--maxw); margin:clamp(30px,5vh,56px) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(18px,2.4vw,34px);
}
@media (max-width: 900px){ .access__grid{ grid-template-columns:1fr; } }

.acc-card{
  position:relative;
  border:1px solid var(--line); border-radius:18px;
  padding:clamp(24px,3vw,42px);
  background:linear-gradient(180deg, rgba(244,241,233,.035), rgba(244,241,233,.012));
  overflow:hidden;
}
.acc-card__step{
  position:absolute; top:18px; right:22px;
  font-family:var(--mono); font-size:13px; letter-spacing:.14em;
  color:var(--fg-faint); border:1px solid var(--line); border-radius:999px;
  width:34px; height:34px; display:grid; place-items:center;
}
.acc-card__art{ margin-bottom:22px; }
.acc-qr{
  width:74px; height:74px; fill:var(--fg);
  opacity:.92;
}
.acc-qr rect:nth-child(odd){ fill:var(--red); opacity:.85; }
.acc-card__title{
  font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(22px,2.4vw,30px); margin-bottom:12px;
}
.acc-card__text{ color:var(--fg-dim); font-size:15.5px; max-width:52ch; }
.acc-card__text code{
  font-family:var(--mono); font-size:.92em; color:var(--yellow);
  background:rgba(255,196,43,.08); padding:2px 7px; border-radius:6px;
}
.acc-card__hint{
  display:block; margin-top:22px;
  font-family:var(--mono); font-size:12.5px; color:var(--fg-faint); letter-spacing:.02em;
}

/* --- formulario de serie --- */
.acc-card--serial{ border-color:rgba(242,36,40,.35); }
.serial-form{ margin-top:26px; }
.serial-form__label{
  display:block; font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-faint); margin-bottom:10px;
}
.serial-form__row{ display:flex; gap:12px; flex-wrap:wrap; }
.serial-form__row input{
  flex:1 1 220px; min-width:0;
  background:var(--ink-2); color:var(--fg);
  border:1px solid var(--line); border-radius:12px;
  font-family:var(--mono); font-size:17px; letter-spacing:.06em;
  padding:16px 18px;
  transition:border-color .25s, box-shadow .25s;
}
.serial-form__row input::placeholder{ color:var(--fg-faint); letter-spacing:.04em; }
.serial-form__row input:focus{
  outline:none; border-color:var(--red);
  box-shadow:0 0 0 3px rgba(242,36,40,.18);
}
.serial-form__row input[aria-invalid="true"]{ border-color:var(--red-deep); }
.serial-form__go{ white-space:nowrap; }
.serial-form__err{
  margin-top:12px; font-size:13.5px; color:#ff8a8d;
}
.serial-form__note{
  margin-top:16px; font-size:12.5px; color:var(--fg-faint);
}
.serial-form__note .mono{ font-family:var(--mono); color:var(--fg-dim); }

/* ---------- CUENTA ---------- */
.account{ position:relative; z-index:2; padding:10vh 0 12vh; }
.account__grid{
  max-width:var(--maxw); margin:clamp(30px,5vh,56px) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(24px,4vw,64px);
  align-items:start;
}
@media (max-width: 900px){ .account__grid{ grid-template-columns:1fr; } }

.account__lead{ font-size:clamp(16px,1.6vw,19px); color:var(--fg-dim); max-width:56ch; }
.account__lead strong{ color:var(--fg); font-weight:600; }
.account__list{ margin:26px 0 32px; display:grid; gap:14px; }
.account__list li{
  display:flex; gap:14px; align-items:baseline;
  font-size:15.5px; color:var(--fg-dim);
}
.account__check{
  font-family:var(--mono); color:var(--red); font-weight:700; flex:0 0 auto;
}
.account__cta{ display:flex; gap:14px; flex-wrap:wrap; }
.account__note{
  margin-top:20px; font-size:13px; color:var(--fg-faint); max-width:52ch;
}
.account__note a{ color:var(--fg-dim); text-decoration:underline; text-underline-offset:3px; }
.account__note a:hover{ color:var(--fg); }

/* --- panel mock (decorativo) --- */
.account__panel{
  border:1px solid var(--line); border-radius:16px;
  background:var(--ink-2);
  padding:18px; display:grid; gap:10px;
}
.mockrow{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--line); border-radius:10px;
  padding:13px 15px; background:rgba(244,241,233,.02);
}
.mockrow__dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.mockrow__dot--ok{ background:#22C55E; box-shadow:0 0 10px rgba(34,197,94,.6); }
.mockrow__dot--warn{ background:var(--yellow); box-shadow:0 0 10px rgba(255,196,43,.55); }
.mockrow__t{ font-size:13.5px; color:var(--fg-dim); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mockrow__v{ font-size:12.5px; color:var(--fg-faint); }
.mono{ font-family:var(--mono); }

/* ---------- STRIP DE SEGURIDAD ---------- */
.sec-strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  position:relative; z-index:2; background:rgba(11,11,14,.5);
}
.sec-strip__inner{
  max-width:var(--maxw); margin:0 auto; padding:26px var(--pad);
  display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,44px); justify-content:space-between;
}
.sec-strip__item{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em;
  color:var(--fg-dim);
}
.sec-strip__item svg{
  width:17px; height:17px; fill:none; stroke:var(--red); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto;
}

/* ---------- PASOS ---------- */
.steps{ position:relative; z-index:2; padding:12vh 0 8vh; }
.steps__list{
  max-width:var(--maxw); margin:clamp(30px,5vh,56px) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px);
  counter-reset:none; list-style:none;
}
@media (max-width: 820px){ .steps__list{ grid-template-columns:1fr; } }
.step{
  border-top:1px solid var(--line); padding-top:22px;
}
.step__num{
  display:inline-grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line); color:var(--red);
  font-size:15px; font-weight:700; margin-bottom:16px;
}
.step__t{
  font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:20px; margin-bottom:8px;
}
.step__d{ font-size:14.5px; color:var(--fg-dim); max-width:38ch; }

/* ---------- reveals (hereda el patrón de styles.css) ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }