/* TREBOLIA — páginas de lectura: portada, soporte, privacidad, términos, borrar cuenta (breakpoint 700px) */
body.legal{--outer:10px; --mat-radius:24px; --f1:7px; --f2:9px; --f3:10.5px;}
body.legal.soporte{--marco:var(--cielo);} body.legal.privacidad{--marco:var(--verde-2);} body.legal.terminos{--marco:var(--dorado);} body.legal.inicio{--marco:var(--verde);}
.legal .mat{max-width:880px; padding:22px 18px 22px; gap:22px;}
.cabecera{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.legal .logo-1{font-size:22px;} .legal .logo-2{font-size:15px;}
.nav{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.nav a{padding:9px 12px; border-radius:10px; text-decoration:none; font-size:15px; font-weight:500; color:var(--texto-2);}
.nav a[aria-current="page"]{font-weight:700; color:var(--verde); background:var(--menta-claro); box-shadow:inset 0 0 0 1.5px var(--menta-linea);}
.nav .lang-pill{margin-left:4px;}

.doc{display:none; flex-direction:column; gap:22px;}
.doc.activo{display:flex;}
.doc-head{display:flex; flex-direction:column; gap:12px;}
.doc .eyebrow{font-size:12px;}
.doc h1{font-size:40px; line-height:1; color:var(--verde);}
.vigencia{font-size:14px; font-weight:600; color:var(--texto-3);}
.intro{margin:6px 0 0; font-size:16px; line-height:1.6; color:var(--texto-2); text-wrap:pretty; max-width:680px;}
.intro a, .faq a, .seccion a{color:var(--verde); font-weight:600;}
.acciones{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px;}
.acciones .btn-verde{height:46px; padding:0 16px;}
.acciones .btn-borde{height:46px; padding:0 16px;}

.contacto{border-radius:20px; background:var(--verde); padding:10px; box-shadow:inset 0 0 0 3px var(--verde), inset 0 0 0 4.5px var(--dorado);}
.contacto-in{border-radius:13px; padding:22px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; color:#fff;
  background-color:var(--verde-2); background-image:radial-gradient(circle,rgba(255,255,255,.08) 2.5px,transparent 3.5px); background-size:18px 18px;}
.ficha.carta{width:52px; height:68px; font-size:30px; color:var(--verde); box-shadow:0 5px 0 var(--menta), 0 8px 14px rgba(0,0,0,.3);}
.contacto-txt{display:flex; flex-direction:column; gap:4px; flex:1; min-width:200px;}
.contacto-label{font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--menta);}
.contacto-txt a{font-family:'DM Serif Display',serif; font-size:23px; line-height:1.1; color:#fff; text-decoration:none; word-break:break-all;}
.contacto-nota{font-size:14px; color:#DCEFE6;}

.faqs, .secciones{display:flex; flex-direction:column; gap:14px;}
.faq-titulo{font-size:26px; color:var(--verde); padding-bottom:10px; border-bottom:2px solid var(--dorado);}
.faq{display:grid; grid-template-columns:36px 1fr; gap:14px; align-items:start; padding:16px 18px; border-radius:14px; background:#fff; box-shadow:0 0 0 1.5px var(--linea);}
.ficha.num{width:34px; height:46px; border-radius:6px; font-size:20px; color:var(--verde); box-shadow:0 3px 0 var(--canto), 0 4px 7px rgba(20,50,40,.15);}
.ficha.num.sm{width:30px; height:40px; border-radius:5px; font-size:18px;}
.faq h3{font-size:21px; line-height:1.2; color:var(--verde); margin-bottom:6px;}
.faq p, .seccion p{margin:0; font-size:15px; line-height:1.6; color:var(--texto-2); text-wrap:pretty;}
.seccion{padding:20px 22px; border-radius:14px; background:#fff; box-shadow:0 0 0 1.5px var(--linea); display:flex; flex-direction:column; gap:10px;}
.seccion-head{display:flex; align-items:center; gap:12px;}
.seccion h2{font-size:21px; line-height:1.15; color:var(--verde);}
.seccion p.vineta{position:relative; padding-left:18px;}
.seccion p.vineta::before{content:""; position:absolute; left:0; top:7px; width:9px; height:9px; border-radius:50% 50% 50% 0; background:var(--verde); transform:rotate(-45deg);}

@media (min-width:700px){
  body.legal{--outer:28px; --mat-radius:26px; --f1:10px; --f2:13px; --f3:15px;}
  .legal .mat{padding:36px 48px 32px; gap:28px;}
  .legal .logo img{width:52px; height:52px;}
  .legal .logo-1{font-size:26px;} .legal .logo-2{font-size:17px;}
  .doc{gap:28px;} .doc .eyebrow{font-size:14px;} .doc h1{font-size:56px;} .intro{font-size:17px;}
  .contacto-txt a{font-size:30px;} .faq-titulo{font-size:32px;} .seccion h2{font-size:24px;}
}

/* Portada */
.inicio .doc h1 em{font-style:italic; color:var(--naipe);}
.hero{display:grid; grid-template-columns:1fr; gap:22px; align-items:center;}
.hero .doc-head{min-width:0;}
.video-marco{position:relative; border-radius:18px; overflow:hidden; background:var(--verde-oscuro); box-shadow:0 0 0 3px var(--verde), 0 0 0 5px var(--dorado), 0 14px 30px rgba(10,50,40,.28); aspect-ratio:16/9;}
.video-marco video{display:block; width:100%; height:100%; object-fit:cover; background:var(--verde-oscuro);}
.video-marco .video-nota{position:absolute; left:10px; bottom:10px; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--verde-oscuro); background:rgba(255,251,242,.92);}
.badges{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
a.badge-store{display:inline-flex; flex-direction:row; align-items:center; gap:9px; height:52px; padding:0 16px 0 12px; border-radius:10px; background:#111; color:#fff; text-decoration:none; box-shadow:0 3px 0 #000, 0 6px 12px rgba(0,0,0,.2); line-height:1; opacity:1;}
a.badge-store:hover{color:#fff; background:#000;}
a.badge-store svg{width:26px; height:26px; flex:none;}
a.badge-store .badge-txt{display:flex; flex-direction:column; gap:2px;}
a.badge-store .badge-top{font-size:10px; font-weight:500; letter-spacing:.03em; opacity:.92;}
a.badge-store .badge-bot{font-family:'Work Sans',sans-serif; font-size:19px; font-weight:600; letter-spacing:-.01em;}
.capturas{display:flex; gap:14px; overflow-x:auto; padding:6px 4px 14px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin;}
.captura{flex:0 0 190px; scroll-snap-align:start; display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center;}
.captura img{display:block; width:190px; height:auto; aspect-ratio:1320/2868; border-radius:18px; box-shadow:0 0 0 2px var(--verde), 0 8px 18px rgba(10,50,40,.25); background:var(--verde-oscuro);}
.captura span{font-size:13px; font-weight:600; color:var(--texto-2); line-height:1.3;}
.nota-capturas{font-size:12px !important; color:var(--texto-3b) !important; margin-top:-6px !important;}
.cta-guia{display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:18px 20px; border-radius:16px; background:var(--verde); color:#fff; box-shadow:inset 0 0 0 3px var(--verde), inset 0 0 0 4.5px var(--dorado);}
.cta-guia .ficha.carta{box-shadow:0 5px 0 var(--menta), 0 8px 14px rgba(0,0,0,.3);}
.cta-guia-txt{flex:1; min-width:220px; display:flex; flex-direction:column; gap:4px;}
.cta-guia h2{color:#fff; font-size:22px; line-height:1.15;}
.cta-guia p{margin:0; font-size:15px; color:#DCEFE6; line-height:1.5;}
.cta-guia .btn-borde{height:44px; padding:0 16px; display:inline-flex; align-items:center; text-decoration:none; color:var(--verde);}
.juego.pronto{color:var(--texto-3); background:#fff; box-shadow:inset 0 0 0 1.5px var(--linea-2);}
.pronto-tag{display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--dorado-texto); background:var(--menta); vertical-align:middle;}
@media (min-width:860px){
  .hero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:34px;}
  .captura{flex-basis:210px;} .captura img{width:210px;}
}

/* Guía de uso */
.guia .doc{gap:18px;}
.guia .seccion[id]{scroll-margin-top:16px;}
.guia-indice{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}
.guia-indice a{padding:7px 12px; border-radius:999px; font-size:14px; font-weight:600; text-decoration:none; color:var(--verde); background:var(--menta-claro); box-shadow:inset 0 0 0 1.5px var(--menta-linea);}
.guia-indice a:hover{color:#fff; background:var(--verde);}
.seccion .pasos{margin-top:4px;}
.seccion h3{font-size:17px; color:var(--tinta); margin-top:6px;}
.seccion .consejo{padding:12px 14px; border-radius:12px; background:var(--menta-claro); box-shadow:inset 0 0 0 1.5px var(--menta-linea); font-size:14px !important;}
.seccion .consejo b{color:var(--verde-sombra);}
.seccion .aviso{padding:12px 14px; border-radius:12px; background:var(--naipe-claro); font-size:14px !important; color:var(--naipe-sombra) !important;}
.seccion figure{margin:6px 0 0; display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap;}
.seccion figure img{width:150px; height:auto; aspect-ratio:1320/2868; border-radius:14px; box-shadow:0 0 0 2px var(--verde), 0 6px 14px rgba(10,50,40,.22); flex:none;}
.seccion figcaption{flex:1; min-width:200px; font-size:14px; color:var(--texto-3); line-height:1.5;}
.seccion .aviso-capturas{font-size:12px !important; color:var(--texto-3b) !important;}
body.legal.guia{--marco:var(--verde-2);}
.inicio .btn-verde{text-decoration:none;}
.nota-app{font-weight:600; color:var(--verde) !important; margin-top:6px !important;}
.inicio .intro{max-width:720px;}
.descarga{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:10px; padding:14px 16px; border-radius:14px; background:#fff; box-shadow:0 0 0 1.5px var(--linea);}
.descarga p{margin:0; flex:1; min-width:220px; font-size:14px; line-height:1.55; color:var(--texto-2);}
.badges{display:flex; gap:10px; flex-wrap:wrap;}
.badge-store{display:inline-flex; flex-direction:column; justify-content:center; flex:none; height:48px; padding:0 16px 0 14px; border-radius:10px; background:#111; color:#fff; line-height:1.05; text-decoration:none; box-shadow:0 3px 0 #000;}
.badge-store .badge-top{font-size:10px; font-weight:500; letter-spacing:.02em; opacity:.9;}
.badge-store .badge-bot{font-family:'Work Sans',sans-serif; font-size:20px; font-weight:600; letter-spacing:-.01em;}
span.badge-store{opacity:.6;}
.inicio .seccion-head .ficha.num{font-size:17px;}
.inicio .seccion p.vineta b{color:var(--tinta);}
.juegos{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}
.juego{padding:7px 12px; border-radius:999px; font-size:14px; font-weight:600; color:var(--verde); background:var(--menta-claro); box-shadow:inset 0 0 0 1.5px var(--menta-linea);}
.juego.pronto{color:var(--texto-3); background:#fff; box-shadow:inset 0 0 0 1.5px var(--linea-2);}
.pasos{margin:0; padding:0 0 0 4px; list-style:none; counter-reset:paso; display:flex; flex-direction:column; gap:10px;}
.pasos li{position:relative; padding-left:38px; font-size:15px; line-height:1.6; color:var(--texto-2); counter-increment:paso; text-wrap:pretty;}
.pasos li::before{content:counter(paso); position:absolute; left:0; top:2px; width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  font-family:'DM Serif Display',serif; font-size:15px; color:var(--verde); background:linear-gradient(#FFFFFF,#F4F8F5); box-shadow:0 2px 0 var(--verde);}
.pasos li b{color:var(--tinta);}
.guias-link{font-size:14px !important; color:var(--texto-3) !important; margin-top:4px !important;}
.compara{width:100%; border-collapse:collapse; font-size:14px; line-height:1.45; color:var(--texto-2);}
.compara th, .compara td{padding:10px 10px; text-align:left; vertical-align:top; border-top:1px solid var(--linea-3);}
.compara thead th{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-3); border-top:0; padding-top:0;}
.compara tbody th{font-weight:700; color:var(--tinta); width:28%;}
.compara td:last-child{color:var(--verde-sombra); font-weight:600; background:rgba(15,107,90,.08);}
@media (max-width:560px){
  .compara thead{display:none;}
  .compara tr{display:block; padding:10px 0; border-top:1px solid var(--linea-3);}
  .compara tr:first-child{border-top:0; padding-top:0;}
  .compara th, .compara td, .compara tbody th{display:block; border:0; padding:3px 0; width:auto;}
  .compara td{padding-left:14px; position:relative;}
  .compara td::before{position:absolute; left:0; top:4px; width:6px; height:6px; border-radius:2px; content:""; background:var(--texto-3b); transform:rotate(45deg);}
  .compara td:last-child{background:none; padding-left:14px;}
  .compara td:last-child::before{background:var(--verde);}
}