/*
 * BrocoKript — unified page rhythm + real interface screenshots.
 * Kept separate from styles.css so it can be removed without touching
 * licensing, checkout, private-site middleware or the contact page.
 */

:root{
  --broco-page-top:64px;
  --broco-page-bottom:78px;
  --broco-frame-line:#c8c8c8;
  --broco-frame-panel:#f7f7f7;
  --broco-frame-muted:#737373;
}

/* Same compact start for every first hero across the site. */
main > .hero:first-child,
main > .page-hero:first-child,
main > .interface-hero:first-child{
  min-height:0!important;
}

main > .hero:first-child .hero-wrap{
  min-height:0!important;
  padding-top:var(--broco-page-top)!important;
  padding-bottom:var(--broco-page-bottom)!important;
  align-items:start!important;
}

main > .page-hero:first-child,
main > .page-hero.purchase-hero:first-child,
main > .page-hero.legal-page-hero:first-child,
main > .interface-hero:first-child{
  padding-top:var(--broco-page-top)!important;
  padding-bottom:var(--broco-page-bottom)!important;
}

main > .page-hero:first-child .breadcrumb,
main > .interface-hero:first-child .breadcrumb{
  margin-bottom:22px;
}

.interface-real-section{
  padding:86px 0 104px;
  border-bottom:1px solid var(--line);
  background:var(--paper);
  overflow:hidden;
}

.interface-real-head{
  display:grid;
  grid-template-columns:minmax(0,900px);
  align-items:start;
  gap:0;
  margin-bottom:48px;
}

.interface-real-head .section-title{max-width:900px}
.interface-real-head .section-copy{display:none}

.interface-real-showcase{
  display:grid;
  grid-template-columns:minmax(220px,.45fr) minmax(0,1.55fr);
  gap:40px;
  align-items:center;
}

.interface-real-story{
  display:grid;
  border-top:1px solid var(--line-strong);
}

.interface-real-step{
  width:100%;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:18px;
  padding:22px 0;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
  opacity:.46;
  transition:opacity .22s ease,padding-left .22s ease;
}

.interface-real-step:hover,
.interface-real-step.is-active{
  opacity:1;
  padding-left:12px;
}

.interface-real-index{
  padding-top:3px;
  color:var(--muted-2);
  font-size:.68rem;
  font-weight:550;
  letter-spacing:.14em;
}

.interface-real-step strong,
.interface-real-step span{display:block}

.interface-real-step strong{
  margin-bottom:7px;
  font-size:1.04rem;
  font-weight:500;
  letter-spacing:-.025em;
}

.interface-real-description{
  max-width:320px;
  color:var(--muted);
  font-size:.85rem;
  line-height:1.5;
}

.interface-real-product{
  position:relative;
  width:100%;
  max-width:940px;
  min-width:0;
  justify-self:end;
  opacity:0;
  transform:translateY(28px) scale(.975);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);
}

.interface-real-product.is-visible{opacity:1;transform:none}

.interface-real-product:after{
  content:"";
  position:absolute;
  z-index:0;
  left:10%;
  right:10%;
  top:58%;
  bottom:90px;
  border-radius:50%;
  background:rgba(15,15,15,.2);
  filter:blur(42px);
  opacity:.25;
}

.interface-real-device{
  position:relative;
  z-index:1;
  overflow:hidden;
  border:1px solid #bcbcbc;
  border-radius:16px;
  background:var(--broco-frame-panel);
  box-shadow:0 30px 80px rgba(15,15,15,.14),0 2px 8px rgba(15,15,15,.08);
}

.interface-real-device-bar{
  height:45px;
  display:grid;
  grid-template-columns:90px 1fr 110px;
  align-items:center;
  padding:0 16px;
  border-bottom:1px solid var(--broco-frame-line);
  background:#ededed;
}

.interface-real-dots{display:flex;gap:6px}
.interface-real-dots i{
  width:8px;
  height:8px;
  border:1px solid #999;
  border-radius:50%;
  background:#f7f7f7;
}

.interface-real-device-title{
  overflow:hidden;
  color:#585858;
  font-size:.69rem;
  font-weight:550;
  letter-spacing:.05em;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.interface-real-device-status{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:6px;
  color:#686868;
  font-size:.64rem;
}
.interface-real-device-status:before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--success);
}

.interface-real-stage{
  --focus-left:29%;
  --focus-top:40%;
  --focus-width:66%;
  --focus-height:29%;
  --focus-inset:14px;
  position:relative;
  display:grid;
  aspect-ratio:1208 / 723;
  overflow:hidden;
  border-radius:0 0 15px 15px;
  background:#eef1f6;
  isolation:isolate;
}

.interface-real-screen{
  grid-area:1 / 1;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  transform:scale(1.018);
  transition:opacity .42s ease,transform .62s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}

.interface-real-screen.is-active{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.interface-real-screen img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#eef1f6;
}

.interface-real-focus{
  position:absolute;
  z-index:4;
  box-sizing:border-box;
  left:calc(var(--focus-left) + var(--focus-inset));
  top:calc(var(--focus-top) + var(--focus-inset));
  width:calc(var(--focus-width) - var(--focus-inset) - var(--focus-inset));
  height:calc(var(--focus-height) - var(--focus-inset) - var(--focus-inset));
  border:1.5px solid rgba(15,15,15,.72);
  border-radius:16px;
  box-shadow:0 0 0 999px rgba(245,247,250,.22),0 12px 34px rgba(15,15,15,.13);
  pointer-events:none;
  transition:left .55s cubic-bezier(.2,.7,.2,1),top .55s cubic-bezier(.2,.7,.2,1),width .55s cubic-bezier(.2,.7,.2,1),height .55s cubic-bezier(.2,.7,.2,1);
}

.interface-real-focus span{
  position:absolute;
  right:10px;
  bottom:10px;
  max-width:230px;
  padding:8px 10px;
  border-radius:4px;
  background:#111;
  color:#fff;
  font-size:.66rem;
  font-weight:550;
  line-height:1.35;
  box-shadow:0 8px 24px rgba(15,15,15,.2);
}

.interface-real-showcase[data-state="proteccion"] .interface-real-stage{
  --focus-left:28%;--focus-top:38%;--focus-width:68%;--focus-height:31%;--focus-inset:14px;
}
.interface-real-showcase[data-state="acceso"] .interface-real-stage{
  --focus-left:16%;--focus-top:47%;--focus-width:68%;--focus-height:39%;--focus-inset:18px;
}
.interface-real-showcase[data-state="descifrado"] .interface-real-stage{
  --focus-left:27%;--focus-top:34%;--focus-width:69%;--focus-height:47%;--focus-inset:14px;
}
.interface-real-showcase[data-state="archivos"] .interface-real-stage{
  --focus-left:25%;--focus-top:29%;--focus-width:72%;--focus-height:43%;--focus-inset:14px;
}

.interface-real-thumbnails{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  align-items:start;
  margin-top:16px;
}

.interface-real-thumb{
  min-width:0;
  align-self:start;
  display:grid;
  grid-template-rows:auto auto;
  padding:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:9px;
  background:#f2f2f2;
  color:var(--muted);
  cursor:pointer;
  text-align:left;
  opacity:.62;
  transition:opacity .2s ease,border-color .2s ease,transform .2s ease;
}

.interface-real-thumb:hover,
.interface-real-thumb.is-active{
  opacity:1;
  border-color:var(--ink);
  transform:translateY(-2px);
}

.interface-real-thumb span{
  display:block;
  padding:8px 10px;
  border-bottom:1px solid var(--line);
  color:inherit;
  font-size:.68rem;
  font-weight:550;
  letter-spacing:.03em;
}

.interface-real-thumb.is-active span{
  background:var(--ink);
  color:var(--paper);
}

.interface-real-thumb img{
  display:block;
  width:100%;
  height:auto!important;
  aspect-ratio:16 / 9;
  object-fit:cover;
  object-position:center top;
  filter:saturate(.82);
}

.interface-real-note{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:30px;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line-strong);
  color:var(--muted);
  font-size:.72rem;
  line-height:1.5;
}

.interface-real-note strong{color:var(--ink);font-weight:550}

@media (max-width:1080px){
  .interface-real-showcase{grid-template-columns:1fr;gap:40px}
  .interface-real-story{grid-template-columns:repeat(2,minmax(0,1fr));border-left:1px solid var(--line)}
  .interface-real-step{padding:20px;border-right:1px solid var(--line)}
  .interface-real-step:hover,.interface-real-step.is-active{padding-left:24px}
}


@media (max-width:900px){
  .interface-real-stage{--focus-inset:8px}
  .interface-real-focus{border-radius:12px}
}

@media (max-width:760px){
  :root{--broco-page-top:44px;--broco-page-bottom:54px}
  .interface-real-section{padding:68px 0 78px}
  .interface-real-head{grid-template-columns:1fr;gap:24px;margin-bottom:40px}
  .interface-real-head .section-copy{justify-self:start}
  .interface-real-story{grid-template-columns:1fr}
  .interface-real-step{padding:18px 0;border-right:0}
  .interface-real-step:hover,.interface-real-step.is-active{padding-left:10px}
  .interface-real-device{border-radius:11px}
  .interface-real-device-bar{height:39px;grid-template-columns:58px 1fr 78px;padding:0 10px}
  .interface-real-device-title{font-size:.6rem}
  .interface-real-device-status{font-size:.55rem}
  .interface-real-focus{display:none}
  .interface-real-thumbnails{grid-template-columns:repeat(2,minmax(0,1fr))}
  .interface-real-note{display:grid;gap:7px}
}

@media (max-width:460px){
  .interface-real-device-status{font-size:0}
  .interface-real-thumb span{font-size:.62rem}
}

@media (prefers-reduced-motion:reduce){
  .interface-real-product{opacity:1;transform:none;transition:none}
  .interface-real-screen,.interface-real-focus,.interface-real-step,.interface-real-thumb{transition:none}
}