/* ===========================
   LEGAL PAGE (v1)
   Improves layout + readability
   =========================== */

.legal-hero{
  position: relative;
  overflow: hidden;
}

.legal-hero__kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight: 800;
  letter-spacing: .18em;
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-bottom: 10px;
}

.legal-hero__kicker::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(79,143,255,.95);
  box-shadow: 0 0 0 6px rgba(79,143,255,.18);
}

.legal-hero__chips{
  margin-top: 14px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.legal-hero__chips .chip{
  text-decoration: none;
}

/* Index cards */
.legal-index{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0 22px;
}

@media (max-width: 980px){
  .legal-index{ grid-template-columns: 1fr; }
}

.legal-card{
  position: relative;
  display:flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
  background: var(--pro-card);
  border: 1px solid var(--pro-border);
  color: var(--pro-text);
  text-decoration:none;
  overflow:hidden;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.legal-card::after{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(300px 200px at 20% 10%, rgba(79,143,255,.22), transparent 65%),
    radial-gradient(320px 240px at 80% 0%, rgba(46,213,115,.14), transparent 70%),
    radial-gradient(380px 260px at 60% 110%, rgba(255,186,77,.12), transparent 70%);
  opacity: .75;
  pointer-events:none;
}

.legal-card > *{ position:relative; z-index:1; }

.legal-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.20);
}

.legal-card__title{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .2px;
}

.legal-card__desc{
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.45;
}

.legal-card__cta{
  margin-top: auto;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
  color: rgba(255,255,255,.86);
}

.legal-card__cta::after{
  content:"→";
  opacity: .8;
}

/* Layout */
.legal-layout{
  display:grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px;
  align-items:start;
}

@media (max-width: 980px){
  .legal-layout{ grid-template-columns: 1fr; }
}

/* TOC */
.legal-toc{
  position: sticky;
  top: 96px;
}

@media (max-width: 980px){
  .legal-toc{ position: relative; top: auto; }
}

.legal-toc__card{
  background: var(--pro-card);
  border: 1px solid var(--pro-border);
  border-radius: 18px;
  padding: 14px;
}

.legal-toc__title{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(255,255,255,.70);
  margin-bottom: 10px;
}

/* Wrapper for TOC links (desktop: stacked, mobile: swipeable chips) */
.legal-toc__chips{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legal-toc__link{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  color: rgba(255,255,255,.86);
  text-decoration:none;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}

.legal-toc__link:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}

.legal-toc__link.is-active{
  background: rgba(79,143,255,.12);
  border-color: rgba(79,143,255,.25);
}

.legal-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.38);
}

.legal-toc__link.is-active .legal-dot{
  background: rgba(79,143,255,.95);
  box-shadow: 0 0 0 6px rgba(79,143,255,.16);
}

.legal-toc__help{
  margin-top: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 12px 14px;
}

.legal-toc__help-title{
  font-weight: 800;
  margin-bottom: 6px;
}

/* Documents */
.legal-doc{
  background: var(--pro-card);
  border: 1px solid var(--pro-border);
  border-radius: 24px;
  padding: 18px;
  overflow:hidden;
  position:relative;
}

.legal-doc + .legal-doc{ margin-top: 16px; }

.legal-doc::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(500px 300px at 10% 0%, rgba(79,143,255,.20), transparent 60%);
  pointer-events:none;
}

.legal-doc--teal::before{
  background: radial-gradient(500px 300px at 10% 0%, rgba(46,213,115,.16), transparent 60%);
}

.legal-doc--amber::before{
  background: radial-gradient(500px 300px at 10% 0%, rgba(255,186,77,.15), transparent 60%);
}

.legal-doc > *{ position:relative; z-index:1; }

.legal-doc__head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 14px;
}

.legal-doc__kicker{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

.legal-doc__kicker::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
}

.legal-doc--blue .legal-doc__kicker::before{ background: rgba(79,143,255,.85); }
.legal-doc--teal .legal-doc__kicker::before{ background: rgba(46,213,115,.75); }
.legal-doc--amber .legal-doc__kicker::before{ background: rgba(255,186,77,.75); }

.legal-doc h2{
  margin: 8px 0 6px;
  line-height: 1.05;
  font-size: 30px;
}

@media (max-width: 640px){
  .legal-doc h2{ font-size: 24px; }
}

.legal-doc__meta{
  margin: 0;
  font-size: 13px;
}

.legal-doc__link{
  appearance:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.88);
  font-weight: 800;
  font-size: 12px;
  border-radius: 999px;
  padding: 10px 12px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  white-space: nowrap;
}

.legal-doc__link:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
}

.legal-doc__intro p,
.legal-doc__intro li{
  color: rgba(255,255,255,.72);
  line-height: 1.65;
}

.legal-doc__intro ul{
  padding-left: 18px;
}

/* Accordions */
.legal-acc{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow:hidden;
  margin-top: 12px;
}

.legal-acc summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  cursor:pointer;
  padding: 14px 14px;
  color: rgba(255,255,255,.92);
  font-weight: 800;
}

.legal-acc summary::-webkit-details-marker{ display:none; }

.legal-acc__title{
  line-height: 1.25;
}

.legal-acc__icon{
  width: 26px;
  height: 26px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.14);
  position:relative;
  flex: 0 0 auto;
}

.legal-acc__icon::before,
.legal-acc__icon::after{
  content:"";
  position:absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,.78);
  border-radius: 2px;
}

.legal-acc__icon::before{
  width: 12px;
  height: 2px;
}
.legal-acc__icon::after{
  width: 2px;
  height: 12px;
}

.legal-acc[open] summary{
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.legal-acc[open] .legal-acc__icon::after{
  display:none;
}

.legal-acc__body{
  padding: 12px 14px 14px;
}

.legal-acc__body p,
.legal-acc__body li{
  color: rgba(255,255,255,.72);
  line-height: 1.65;
}

.legal-acc__body ul{
  padding-left: 18px;
}

.legal-acc__body strong{
  color: rgba(255,255,255,.92);
}

/* Footer inside each doc */
.legal-doc__footer{
  display:flex;
  justify-content:flex-end;
  margin-top: 14px;
}

.legal-doc__back{
  font-weight: 800;
  font-size: 13px;
  text-decoration:none;
  color: rgba(255,255,255,.80);
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.legal-doc__back:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
}

/* Make long pages nicer on anchors */
html{
  scroll-behavior: smooth;
}

/*
  Responsive polish
  Goal: great readability + tap targets on phones/tablets.
  We keep the “glass” look, but reduce vertical whitespace and convert the TOC
  into a compact, swipeable chip row on small screens.
*/

@media (max-width: 900px){
  .legal-wrap{
    padding: 18px 14px 72px;
  }

  .legal-hero{
    padding: 18px 16px;
    border-radius: 22px;
  }

  .legal-hero__title{
    font-size: clamp(28px, 7vw, 44px);
  }

  .legal-hero__cta{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .legal-hero__cta .btn{
    width: 100%;
    justify-content: center;
  }

  .legal-index{
    margin-top: 16px;
    gap: 12px;
  }

  .legal-index__card{
    border-radius: 18px;
  }

  .legal-layout{
    margin-top: 18px;
    gap: 14px;
  }

  /* TOC: compact swipeable row */
  .legal-toc{
    position: relative;
    top: auto;
  }

  .legal-toc__card{
    padding: 12px;
    border-radius: 18px;
    overflow: hidden;
  }

  .legal-toc__title{
    margin-bottom: 10px;
  }

  .legal-toc__link{
    padding: 10px 12px;
    border-radius: 999px;
    min-width: max-content;
    gap: 10px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
  }

  .legal-toc__link .ic{
    width: 20px;
    height: 20px;
  }

  .legal-toc__link span{
    font-size: 13px;
    font-weight: 800;
  }

  /* Hide the description in TOC items on small screens */
  .legal-toc__link p{ display:none; }

  /* Turn the TOC into a horizontal, swipeable “chip bar” */
  .legal-toc__chips{
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-bottom: 6px;
  }

  .legal-toc__chips::-webkit-scrollbar{ height: 6px; }
  .legal-toc__chips::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 999px; }

  .legal-toc__help{
    margin-top: 2px;
  }

  .legal-doc{
    padding: 16px 14px 18px;
    border-radius: 22px;
  }

  .legal-doc h2{
    font-size: 24px;
  }

  .legal-doc__head{
    flex-direction: column;
    align-items: flex-start;
  }

  .legal-doc__link{
    width: 100%;
    text-align: center;
  }

  .legal-acc summary{
    padding: 14px 12px;
  }

  .legal-acc__body{
    padding: 10px 12px 14px;
  }
}

@media (max-width: 520px){
  .legal-wrap{
    padding: 16px 12px 72px;
  }

  .legal-hero{
    padding: 16px 14px;
  }

  .legal-hero__title{
    font-size: clamp(26px, 8vw, 38px);
    line-height: 1.05;
  }

  .legal-hero__subtitle{
    font-size: 14px;
  }

  .legal-index__card{
    padding: 14px 14px;
  }

  .legal-doc{
    padding: 14px 12px 16px;
  }

  .legal-acc__icon{
    width: 24px;
    height: 24px;
    border-radius: 9px;
  }

  .legal-doc__footer{
    justify-content: stretch;
  }

  .legal-doc__back{
    width: 100%;
    text-align: center;
  }
}


/* Simplificacion legal: menos dividido */
.legal-page-clean .legal-layout,
.legal-page-clean .legal-layout--single{
  grid-template-columns: 1fr;
  gap: 18px;
}

.legal-page-clean .legal-content--single{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.legal-page-clean .legal-index,
.legal-page-clean .legal-toc{
  display: none !important;
}

.legal-page-clean .legal-hero{
  max-width: 980px;
  margin: 0 auto 18px;
}

.legal-page-clean .legal-hero__chips{
  gap: 12px;
}

.legal-page-clean .legal-doc{
  padding: 22px 24px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(8,20,52,.96) 0%, rgba(5,15,42,.98) 100%);
  border-color: rgba(255,255,255,.10);
}

.legal-page-clean .legal-doc + .legal-doc{
  margin-top: 18px;
}

.legal-page-clean .legal-doc__head{
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.legal-page-clean .legal-doc h2{
  font-size: clamp(28px, 4vw, 36px);
}

.legal-page-clean .legal-acc{
  margin-top: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}

.legal-page-clean .legal-acc summary{
  padding: 13px 14px;
}

.legal-page-clean .legal-doc__link{
  background: rgba(255,255,255,.06);
}

@media (max-width: 900px){
  .legal-page-clean .legal-hero,
  .legal-page-clean .legal-content--single{
    max-width: none;
  }

  .legal-page-clean .legal-doc{
    padding: 18px 16px;
  }
}


/* legal flow refresh */
.legal-flow-page{
  padding-top: 32px;
}
.legal-flow{
  max-width: 1120px;
  margin: 0 auto;
}
.legal-flow__hero{
  margin: 0 0 32px;
}
.legal-flow__hero h1{
  margin: 0;
  font-size: clamp(2.3rem, 4vw, 4rem);
  line-height: .96;
}
.legal-flow__lead{
  max-width: 760px;
  margin: 14px 0 0;
  color: rgba(255,255,255,.74);
  font-size: 1.05rem;
}
.legal-flow__doc{
  padding: 0 0 10px;
}
.legal-flow__doc + .legal-flow__doc{
  margin-top: 38px;
  padding-top: 34px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.legal-flow__doc-head{
  margin-bottom: 18px;
}
.legal-flow__doc-head h2{
  margin: 0;
  font-size: clamp(1.7rem, 2.4vw, 2.6rem);
}
.legal-flow__updated{
  margin: 8px 0 0;
  color: rgba(255,255,255,.58);
  font-size: .96rem;
}
.legal-flow__block{
  padding: 18px 0 20px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.legal-flow__block h3{
  margin: 0 0 10px;
  font-size: 1.16rem;
}
.legal-flow__block p,
.legal-flow__block li{
  color: rgba(255,255,255,.82);
  line-height: 1.8;
  font-size: 1rem;
}
.legal-flow__block ul{
  margin: 10px 0 0 20px;
  padding: 0;
}
.legal-flow__block li + li{
  margin-top: 2px;
}
@media (max-width: 720px){
  .legal-flow-page{
    padding-top: 22px;
  }
  .legal-flow__hero{
    margin-bottom: 24px;
  }
  .legal-flow__doc + .legal-flow__doc{
    margin-top: 28px;
    padding-top: 26px;
  }
  .legal-flow__block{
    padding: 14px 0 16px;
  }
  .legal-flow__block p,
  .legal-flow__block li{
    font-size: .97rem;
    line-height: 1.72;
  }
}

/* === legal flow simplificado v5 === */
.legal-flow{max-width:980px;margin:0 auto;}
.legal-flow__hero{padding:8px 0 26px;border:none;background:transparent;box-shadow:none;}
.legal-flow__hero h1{font-size:clamp(2.2rem,5vw,4.4rem);line-height:.98;letter-spacing:-.03em;margin:0 0 12px;max-width:820px;}
.legal-flow__lead{max-width:760px;color:rgba(255,255,255,.72);font-size:1.06rem;line-height:1.65;}
.legal-flow__doc{background:transparent;border:0;border-top:1px solid rgba(255,255,255,.10);border-radius:0;padding:34px 0 10px;box-shadow:none;}
.legal-flow__doc + .legal-flow__doc{margin-top:34px;}
.legal-flow__doc-head{padding:0 0 14px;margin:0 0 8px;border-bottom:1px solid rgba(255,255,255,.08);}
.legal-flow__doc-head h2{font-size:clamp(1.9rem,3vw,2.6rem);margin:0;}
.legal-flow__updated{margin-top:8px;color:rgba(255,255,255,.52);font-size:.95rem;}
.legal-flow__block{padding:18px 0 20px;border-top:1px solid rgba(255,255,255,.06);background:transparent;border-radius:0;box-shadow:none;}
.legal-flow__block:first-of-type{border-top:0;}
.legal-flow__block h3{font-size:1.24rem;line-height:1.25;margin:0 0 12px;}
.legal-flow__block p,.legal-flow__block li{font-size:1.04rem;line-height:1.78;color:rgba(255,255,255,.82);max-width:900px;}
.legal-flow__block ul{margin:0;padding-left:1.25rem;}
.legal-flow__block li+li{margin-top:10px;}
@media (max-width: 760px){
  .legal-flow__hero{padding:2px 0 18px;}
  .legal-flow__doc{padding:26px 0 6px;}
  .legal-flow__doc + .legal-flow__doc{margin-top:26px;}
  .legal-flow__block{padding:16px 0 18px;}
  .legal-flow__block p,.legal-flow__block li{font-size:.98rem;line-height:1.72;}
}