:root{
  --papel:#fbfcff; --cuadro:#d3e3f6; --margen:#f08a8a;
  --bic:#1d3aa8; --rojo:#e0321f; --fosfo:#f2ff3d; --tinta:#15204a; --suave:#4a5689;
}
*{box-sizing:border-box;margin:0}
::selection{background:var(--fosfo);color:var(--tinta)}
:focus-visible{outline:3px solid var(--bic);outline-offset:3px;border-radius:4px}
body{
  font-family:"Atkinson Hyperlegible",system-ui,sans-serif;color:var(--tinta);font-size:18px;line-height:1.5;
  background-color:var(--papel);
  background-image:linear-gradient(var(--cuadro) 1px,transparent 1px),linear-gradient(90deg,var(--cuadro) 1px,transparent 1px);
  background-size:22px 22px;
}
a{color:inherit}
.hoja{max-width:560px;margin:0 auto;padding:0 18px 56px 34px;position:relative;min-height:100vh}
.hoja::before{content:"";position:absolute;left:22px;top:0;bottom:0;width:2px;background:var(--margen);opacity:.8}
header.top{display:flex;justify-content:space-between;align-items:center;padding:16px 0 6px}
.marca{font-family:"Bricolage Grotesque";font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--bic);text-decoration:none}
.marca b{background:var(--tinta);color:var(--papel);padding:1px 6px 2px;border-radius:3px;margin-left:4px}
.menu{width:44px;height:44px;border:0;background:none;display:grid;place-items:center;color:var(--bic)}
.miga{font-size:15px;color:var(--suave);margin-top:10px}
.miga a{color:var(--bic);text-underline-offset:3px}
h1{font-family:"Bricolage Grotesque";font-weight:800;font-size:clamp(34px,10vw,46px);line-height:.98;letter-spacing:-.035em;margin:14px 0 12px;text-wrap:balance}
.fosfo{background:linear-gradient(100deg,transparent 2%,var(--fosfo) 4%,var(--fosfo) 94%,transparent 97%);padding:0 4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.intro{font-size:19px;color:var(--bic);max-width:36ch}
.datos{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.dato{font-size:15px;font-weight:700;border:1.5px solid var(--tinta);border-radius:99px;padding:4px 12px;background:#fff}
.nota-mano{font-family:Kalam;color:var(--rojo)}
/* galería */
.pieza{margin-top:30px}
.pieza:first-of-type{margin-top:40px}
/* separador: línea de recortar con tijeras */
.corte{position:relative;margin-top:44px;height:26px;color:var(--rojo)}
.corte::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2.5px dashed var(--rojo);opacity:.7}
.corte svg{position:absolute;left:10px;top:0;background:var(--papel);padding:0 4px;box-sizing:content-box;transform:rotate(-90deg)}
.foto{background:#fff;padding:8px 8px 12px;box-shadow:0 2px 8px rgba(21,32,74,.16);position:relative}
.pieza:nth-of-type(odd) .foto{transform:rotate(-.8deg)}
.pieza:nth-of-type(even) .foto{transform:rotate(.7deg)}
.foto::before{content:"";position:absolute;top:-11px;left:50%;width:74px;height:22px;margin-left:-37px;background:rgba(255,255,255,.6);border:1px solid rgba(21,32,74,.08);transform:rotate(-3deg)}
.foto img{width:100%;height:auto;display:block;background:#eef2fa}
.num{font-family:Kalam;font-weight:700;color:var(--rojo);font-size:20px;position:absolute;right:10px;top:-14px;background:var(--papel);padding:0 6px;transform:rotate(4deg)}
.pieza h2{font-family:"Bricolage Grotesque";font-weight:800;font-size:30px;letter-spacing:-.02em;line-height:1.1;margin:0 0 22px;text-wrap:balance}
.pieza .foto + p{margin-top:16px}
/* título en una caja de fosforito, como la palabra destacada de la cabecera (elegido por Nacho) */
.pieza h2{display:table;background:var(--fosfo);color:var(--tinta);padding:4px 10px 6px;border-radius:3px;transform:rotate(-1deg);box-shadow:0 1px 0 rgba(21,32,74,.12)}
.pieza h2 small{font-family:Kalam;font-weight:400;font-size:18px;color:var(--rojo);margin-left:6px;letter-spacing:0}
.pieza p{margin-top:6px;font-size:18px}
/* anuncios de ejemplo (marcas inventadas) */
.anuncio{margin:40px -8px 0;background:#f1f1f1;padding:6px 8px 10px;border-radius:2px;font-family:Arial,Helvetica,sans-serif}
.anuncio .et{display:block;font-size:11px;color:#777;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;text-align:center}
.ad{display:block;text-decoration:none;border-radius:2px;overflow:hidden;min-height:250px;position:relative;color:#fff}
.ad .ad-in{padding:18px 16px;display:flex;flex-direction:column;justify-content:space-between;min-height:250px}
.ad h4{font-size:26px;line-height:1.05;font-weight:800;margin:0}
.ad p{font-size:15px;line-height:1.3;margin-top:8px;opacity:.95}
.ad .cta{align-self:flex-start;margin-top:14px;background:#fff;color:#111;font-weight:700;font-size:15px;padding:10px 16px;border-radius:99px}
.ad .logo{font-weight:800;font-size:15px;letter-spacing:.02em;opacity:.9}
.ad .ic{position:absolute;top:4px;right:4px;width:16px;height:16px;border-radius:2px;background:rgba(255,255,255,.85);color:#1a73e8;font-size:11px;display:grid;place-items:center;font-weight:700}
.ad-viajes{background:linear-gradient(160deg,#0e7fb8 0%,#17a3c9 55%,#f2c14e 100%)}
.ad-colchon{background:#2d2a4a}
.ad-colchon h4{color:#ffd9a0}
.ad-gafas{background:#e9e4dc;color:#1c1c1c}
.ad-gafas .cta{background:#1c1c1c;color:#fff}
.ancla{position:fixed;left:0;right:0;bottom:0;z-index:20;background:#fff;box-shadow:0 -2px 10px rgba(0,0,0,.18);font-family:Arial,Helvetica,sans-serif}
.ancla a{display:flex;align-items:center;gap:10px;height:58px;padding:0 44px 0 12px;text-decoration:none;color:#111;max-width:560px;margin:0 auto}
.ancla .mini{width:40px;height:40px;border-radius:4px;background:#0e7fb8;flex:none;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px}
.ancla b{font-size:15px;display:block;line-height:1.1}
.ancla small{font-size:12px;color:#555}
.ancla button{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:#f1f1f1;border-radius:50%;font-size:18px;line-height:1;cursor:pointer}
body.con-ancla .hoja{padding-bottom:110px}
/* siguiente */
.siguiente{margin-top:52px;border-top:3px double var(--rojo);padding-top:20px}
.siguiente h3{font-family:"Bricolage Grotesque";font-weight:800;font-size:28px;letter-spacing:-.02em}
.tarjeta{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;margin-top:14px;text-decoration:none;background:#fff;border:2px solid var(--tinta);border-radius:8px;padding:10px;min-height:96px}
.tarjeta img{width:96px;height:96px;object-fit:cover;border-radius:4px}
.tarjeta b{font-family:"Bricolage Grotesque";font-size:20px;line-height:1.1;display:block}
.tarjeta span{color:var(--bic);font-size:15px}
.btn{display:flex;justify-content:center;align-items:center;gap:10px;min-height:56px;margin-top:18px;background:var(--bic);color:#fff;font-weight:700;font-size:18px;border-radius:6px;text-decoration:none;border:0;width:100%;cursor:pointer;font-family:inherit}
.btn.sec{background:#fff;color:var(--tinta);border:2px solid var(--tinta)}
.btn:disabled{opacity:.45;cursor:default}
footer.pie{margin-top:48px;font-size:14px;color:var(--suave)}
/* test */
.progreso{display:flex;gap:4px;margin:10px 0 4px}
.progreso i{flex:1;height:6px;border-radius:3px;background:var(--cuadro)}
.progreso i.hecho{background:var(--bic)} .progreso i.ahora{background:var(--rojo)}
.pregunta{margin-top:18px;background:#fff;border:2px solid var(--tinta);border-radius:6px;padding:16px}
.pregunta .cuenta{font-size:15px;color:var(--suave);font-weight:700}
.pregunta h2{font-family:"Bricolage Grotesque";font-weight:800;font-size:26px;letter-spacing:-.02em;margin:2px 0 12px}
.pregunta img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#eef2fa;border-radius:4px;display:block}
.op{display:flex;align-items:center;gap:12px;min-height:56px;width:100%;padding:8px 12px;border:1.5px solid #b9cbe6;border-radius:6px;margin-top:10px;font:700 18px/1.25 "Atkinson Hyperlegible",sans-serif;color:var(--tinta);background:#fff;text-align:left;cursor:pointer}
.op:hover:not(:disabled){border-color:var(--bic)}
.op svg{flex:none}
.op .marca-op{width:26px;height:26px;flex:none}
.op.bien{border-color:var(--tinta);border-width:2px}
.op.mal{color:#6b7196;text-decoration:line-through;text-decoration-color:var(--rojo);text-decoration-thickness:2px}
.op:disabled{cursor:default}
/* respuesta escondida: un papel pegado con celo que se destapa */
.tapa{position:relative;display:grid;place-items:center;width:100%;min-height:96px;margin-top:14px;border:0;border-radius:4px;cursor:pointer;
  background:repeating-linear-gradient(-45deg,#fff7c2 0 14px,#fff1a3 14px 28px);box-shadow:0 3px 8px rgba(21,32,74,.18);transform:rotate(-.6deg);
  font:700 23px/1.1 Kalam,cursive;color:var(--bic)}
.tapa::before,.tapa::after{content:"";position:absolute;top:-9px;width:56px;height:18px;background:rgba(255,255,255,.7);border:1px solid rgba(21,32,74,.08)}
.tapa::before{left:14px;transform:rotate(-8deg)} .tapa::after{right:14px;transform:rotate(7deg)}
.tapa span{display:flex;align-items:center;gap:8px}
.tapa span::after{content:"";width:18px;height:18px;border-right:3px solid var(--bic);border-bottom:3px solid var(--bic);transform:rotate(45deg) translate(-3px,-3px)}
.tapa:hover{transform:rotate(-.6deg) translateY(-2px)}
.tapa.fuera{display:none}
.respuesta{display:none;margin-top:14px;padding:14px;background:#f5f8ff;border-radius:6px}
.respuesta.ver{display:block;animation:destapa .35s ease-out}
@keyframes destapa{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.respuesta.ver{animation:none}}
.resp-ok{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:22px;line-height:1.15;letter-spacing:-.01em}
.resp-ok::before{content:"";display:inline-block;width:22px;height:12px;border-left:3.5px solid var(--rojo);border-bottom:3.5px solid var(--rojo);transform:rotate(-45deg);margin:0 10px 4px 2px}
#pie{margin-top:6px}
.sabia{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.sabia .nota-mano{font-size:22px;flex-basis:100%}
.btn-s{flex:1;min-height:50px;border:2px solid var(--tinta);border-radius:6px;background:#fff;font:700 17px "Atkinson Hyperlegible",sans-serif;color:var(--tinta);cursor:pointer}
.btn-s:disabled{opacity:.45;cursor:default}
.btn-s.elegido{opacity:1;background:var(--tinta);color:#fff}
.explica{margin-top:14px;padding:12px 14px;background:#f5f8ff;border-left:0;border-radius:6px;display:none}
.explica.ver{display:block}
.explica .nota-mano{font-size:22px;display:block;line-height:1.1;margin-bottom:4px}
.resultado{margin-top:22px;background:#fff;border:2px solid var(--tinta);border-radius:6px;padding:22px 16px;text-align:center;position:relative;display:none}
.resultado.ver{display:block}
.sello{width:150px;height:150px;margin:0 auto;border:4px solid var(--rojo);border-radius:50%;display:grid;place-content:center;color:var(--rojo);font-family:Kalam;font-weight:700;line-height:.9;transform:rotate(-8deg)}
.sello big{font-size:64px}
.sello small{font-size:22px}
.resultado h2{font-family:"Bricolage Grotesque";font-weight:800;font-size:28px;letter-spacing:-.02em;margin-top:16px}
.resultado p{color:var(--bic);margin-top:6px}

/* ===== web real ===== */
html{background:var(--papel)}
.barra{background:#15214b;padding:8px 16px;padding-top:calc(8px + env(safe-area-inset-top,0px))}
.barra .logo{display:block;max-width:560px;margin:0 auto}
.barra img{height:48px;width:auto;display:block}
.hoja{min-height:auto;padding-bottom:40px}
.miga{margin-top:14px}
.hueco-anuncio{margin-top:40px}
.pregunta img{max-width:100%}
.resultado,.pregunta{scroll-margin-top:12px}
.bloque{margin-top:40px}
.seccion{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:28px;letter-spacing:-.02em;margin-bottom:14px}
.galerias{display:grid;gap:30px}
.galeria-card{display:block;text-decoration:none}
.galeria-card .foto img{aspect-ratio:4/3;object-fit:cover}
.galeria-card h3{display:table;margin-top:18px;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:26px;letter-spacing:-.02em;line-height:1.1;background:var(--fosfo);padding:4px 10px 6px;border-radius:3px;transform:rotate(-1deg)}
.galeria-card p{margin-top:8px;color:var(--bic)}
.test-card{display:grid;gap:2px;text-decoration:none;background:#fff;border:2px solid var(--tinta);border-radius:8px;padding:14px 16px;box-shadow:0 3px 0 var(--rojo)}
.test-card .nota-mano{font-size:20px;line-height:1}
.test-card b{font-family:"Bricolage Grotesque",sans-serif;font-size:22px;line-height:1.15}
.test-card span:last-child{color:var(--bic);font-size:15px}
.texto-legal{display:grid;gap:12px;max-width:62ch;margin-top:10px}
.pie-web{background:#15214b;color:#c9d2f0;font-size:14px;padding:22px 16px calc(22px + env(safe-area-inset-bottom,0px))}
.pie-web a{color:#fff}
.hoja-pie{max-width:560px;margin:0 auto;display:flex;flex-wrap:wrap;gap:6px 10px}
.hoja-pie p{flex-basis:100%;margin-top:6px;color:#9aa6d0}
/* ===== portada con secciones ===== */
.atajos{display:flex;gap:8px;overflow-x:auto;margin:18px -18px 0 -34px;padding:4px 18px 6px 34px;scrollbar-width:none}
.atajos::-webkit-scrollbar{display:none}
.atajos a{flex:none;min-height:40px;display:flex;align-items:center;padding:0 14px;border:2px solid var(--tinta);border-radius:99px;background:#fff;font-weight:700;font-size:15px;text-decoration:none}
.bloque{margin-top:44px;scroll-margin-top:10px}
/* separador de archivador: pestaña de color con el nombre de la sección */
.separador{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;border-bottom:4px solid var(--c);margin:0 -18px 18px -12px;padding-left:12px}
.separador h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:24px;letter-spacing:-.02em;line-height:1;color:#fff;background:var(--c);padding:10px 16px 8px;border-radius:10px 10px 0 0}
.separador span{font-family:Kalam,cursive;color:var(--c);font-size:18px;line-height:1;padding:0 18px 8px 0;text-align:right}
.sep-rojo{--c:#e0321f}.sep-azul{--c:#1d3aa8}.sep-verde{--c:#1f8a4c}.sep-naranja{--c:#e8740c}
/* destacado */
.destacado{display:block;text-decoration:none}
.destacado .foto img{aspect-ratio:4/3;object-fit:cover}
.destacado-txt{margin-top:16px}
.destacado-txt .nota-mano{font-size:20px}
.destacado-txt h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:28px;line-height:1.08;letter-spacing:-.02em;margin-top:2px;text-wrap:balance}
.destacado-txt p{margin-top:6px;color:var(--bic)}
.leer{display:inline-flex;align-items:center;min-height:48px;margin-top:10px;padding:0 18px;background:var(--rojo);color:#fff;font-weight:700;border-radius:6px}
/* tests */
.test-card{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;box-shadow:0 3px 0 #1d3aa8}
.test-card img{width:96px;height:96px;object-fit:cover;border-radius:4px}
.test-card > div{display:grid;gap:2px;position:relative}
.test-card b{font-size:20px}
.sello-mini{position:absolute;right:-4px;top:-26px;width:42px;height:42px;border:2.5px solid var(--rojo);border-radius:50%;display:grid;place-items:center;font-family:Kalam,cursive;font-weight:700;color:var(--rojo)!important;font-size:18px!important;transform:rotate(10deg);background:#fff}
/* galerías en cuadrícula */
.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mini-galeria{display:grid;gap:6px;text-decoration:none;background:#fff;padding:6px 6px 10px;box-shadow:0 2px 8px rgba(21,32,74,.16)}
.mini-galeria:nth-child(odd){transform:rotate(-.8deg)} .mini-galeria:nth-child(even){transform:rotate(.8deg)}
.mini-galeria img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.mini-galeria b{font-family:"Bricolage Grotesque",sans-serif;font-size:17px;line-height:1.12;background:var(--fosfo);justify-self:start;padding:2px 6px 3px;border-radius:2px}
.mini-galeria span{font-size:13px;color:var(--suave);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
/* temas */
.temas{display:flex;flex-wrap:wrap;gap:8px}
.tema{min-height:44px;display:inline-flex;align-items:center;gap:6px;padding:0 14px;border-radius:6px;background:#fff;border:2px solid var(--tinta);font-weight:700;font-size:16px;text-decoration:none}
a.tema{background:var(--tinta);color:#fff}
.tema.pronto{color:#7a84ad;border-color:#c3cde4;border-style:dashed}
.tema small{font-family:Kalam,cursive;font-size:14px;color:var(--rojo)}

/* ===== pestañas de sección (fijas arriba) ===== */
.pestanas-web{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:#15214b;padding:6px 0 0}
.pestanas-in{max-width:560px;margin:0 auto;display:flex;gap:4px;overflow-x:auto;padding:0 12px;scrollbar-width:none}
.pestanas-in::-webkit-scrollbar{display:none}
.pw{flex:1 0 auto;min-height:44px;display:flex;align-items:center;justify-content:center;padding:0 14px;border-radius:10px 10px 0 0;font-weight:700;font-size:15px;text-decoration:none;color:#fff;background:var(--c);opacity:.72}
.pw[aria-current="page"]{opacity:1;background:var(--papel);color:var(--c);box-shadow:inset 0 4px 0 var(--c)}
.pw-inicio{--c:#6b4bd1}.pw-fotos{--c:#1f8a4c}.pw-videos{--c:#e0321f}.pw-tests{--c:#1d3aa8}.pw-temas{--c:#e8740c}
.pw:hover{opacity:1}
/* páginas de sección */
.hoja > .separador:first-child{margin-top:22px}
.proximo{background:#fff;border:2px dashed #c3cde4;border-radius:8px;padding:20px 16px;display:grid;gap:8px}
.proximo .nota-mano{font-size:24px;color:var(--rojo)}
.tema-bloque{margin-top:26px}
.tema-bloque h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:22px;margin-bottom:10px}
.tema-bloque.pronto{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:1.5px dashed #c3cde4;padding-bottom:6px;margin-top:14px}
.tema-bloque.pronto h3{font-size:18px;color:#7a84ad;margin:0}
.tema-bloque.pronto .nota-mano{font-size:16px;color:var(--rojo)}

/* ===== collage de reclamo de los tests ===== */
.reclamo{display:block;width:100%;height:auto;margin-top:14px;border-radius:6px;box-shadow:0 4px 14px rgba(21,32,74,.22)}
.test-card.ancha{grid-template-columns:1fr;padding:0;overflow:hidden;gap:0}
.test-card.ancha img{width:100%;height:auto;aspect-ratio:1200/630;border-radius:0}
.test-card.ancha > div{padding:12px 14px 14px}

.pieza h2 small.nota-mano{font-size:18px;color:var(--rojo);margin-left:6px;font-weight:700}

/* ===== encuestas ===== */
.encuesta{margin-top:16px;background:#fff;border:2px solid var(--tinta);border-radius:8px;padding:14px}
.enc-q{font-family:Kalam,cursive;font-weight:700;color:var(--rojo);font-size:22px;line-height:1.1;margin-bottom:10px}
.enc-ops{display:grid;gap:8px}
.enc-op{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:50px;padding:8px 14px;border:2px solid #b9cbe6;border-radius:6px;background:#fff;font:700 17px "Atkinson Hyperlegible",sans-serif;color:var(--tinta);text-align:left;cursor:pointer}
.enc-op:hover:not(:disabled){border-color:var(--bic)}
.enc-op:disabled{cursor:default}
.enc-txt,.enc-pc{position:relative;z-index:1}
.enc-pc{font-variant-numeric:tabular-nums;color:var(--bic)}
.enc-barra{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--fosfo);opacity:.8;transition:width .6s ease-out}
.votada .enc-op{border-color:#d3e3f6}
.enc-op.mia{border-color:var(--rojo)}
.enc-op.mia .enc-txt::before{content:"✓ ";color:var(--rojo)}
.enc-total{font-size:14px;color:var(--suave);margin-top:8px;min-height:1em}
@media (prefers-reduced-motion:reduce){.enc-barra{transition:none}}

/* ===== portada de Fotos: 10 secciones en 5 filas de 2 ===== */
.secciones{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.seccion-card{position:relative;display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;text-decoration:none;background:#15214b;box-shadow:0 3px 10px rgba(21,32,74,.2)}
.seccion-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.seccion-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(21,33,75,.92) 0%,rgba(21,33,75,.35) 45%,rgba(21,33,75,0) 70%)}
.seccion-card b{position:absolute;left:10px;right:10px;bottom:28px;z-index:1;font-family:"Bricolage Grotesque",sans-serif;font-size:21px;line-height:1.05;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.seccion-card span:not(.sin-foto){position:absolute;left:10px;bottom:9px;z-index:1;font-size:13px;font-weight:700;color:var(--fosfo)}
.seccion-card.pronto{background:#fff;border:2px dashed #c3cde4;box-shadow:none}
.seccion-card.pronto::after{display:none}
.seccion-card.pronto b{color:#7a84ad}
.seccion-card.pronto span:not(.sin-foto){color:var(--rojo)}
.sin-foto{position:absolute;top:38%;left:0;right:0;text-align:center;font-size:22px;color:#c3cde4}

.texto-legal h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:21px;margin-top:10px}
.texto-legal a{color:var(--bic)}
.correo{font-size:20px;background:#fff;border:2px solid var(--tinta);border-radius:6px;padding:10px 12px;word-break:break-all}