/* CobbleMMO: estilos de la web nueva (portada, wiki y créditos) */
:root {
  --fondo: #0b1026;
  --fondo-2: #121a3d;
  --tarjeta: #18214a;
  --borde: #2a3672;
  --texto: #e9ecff;
  --suave: #a9b2e6;
  --rojo: #ee3b32;
  --rojo-2: #c22a22;
  --amarillo: #ffcb05;
  --morado: #7b4cd6;
  --cian: #2fd3e0;
  --verde: #4ad66d;
  --rosa: #ff6fb1;
  --radio: 18px;
  --sombra: 0 14px 40px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--cian); }
.pixel { font-family: "Pixelify Sans", "Nunito", sans-serif; letter-spacing: 0.5px; }
.icono-px { image-rendering: pixelated; image-rendering: crisp-edges; }
.contenedor { width: min(1180px, 100% - 32px); margin-inline: auto; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 16, 38, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cabecera .contenedor { display: flex; align-items: center; gap: 22px; height: 66px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); }
.marca .bola { width: 30px; height: 30px; }
.marca span { font-family: "Pixelify Sans", sans-serif; font-size: 26px; font-weight: 700; }
.marca span b { color: var(--amarillo); font-weight: 700; }
.menu-principal { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.menu-principal a {
  color: var(--suave); text-decoration: none; font-weight: 700; padding: 8px 14px; border-radius: 999px;
}
.menu-principal a:hover, .menu-principal a.activo { color: #fff; background: rgba(255, 255, 255, 0.08); }
.menu-principal a.boton-mini { background: var(--rojo); color: #fff; }
.menu-principal a.boton-mini:hover { background: var(--rojo-2); }
.abrir-menu { display: none; margin-left: auto; background: none; border: 0; color: #fff; font-size: 28px; cursor: pointer; }

/* ---------- Botones ---------- */
.botones { display: flex; flex-wrap: wrap; gap: 14px; }
.boton {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 24px; border-radius: 14px; font-weight: 800; font-size: 17px;
  text-decoration: none; color: #fff; border: 0; cursor: pointer;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35); transition: transform 0.12s, box-shadow 0.12s;
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35); }
.boton:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.boton small { display: block; font-size: 12px; font-weight: 700; opacity: 0.85; }
.boton .linea { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.boton-rojo { background: linear-gradient(180deg, #ff5148, var(--rojo-2)); }
.boton-morado { background: linear-gradient(180deg, #9466f0, #5b31b0); }
.boton-claro { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: none; }
.boton[aria-disabled="true"] { cursor: not-allowed; }
.boton svg { width: 26px; height: 26px; flex: none; }
.chapa {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  background: var(--amarillo); color: #2a1a00; padding: 3px 10px; border-radius: 999px;
}

/* ---------- Portada ---------- */
.portada { position: relative; min-height: min(92vh, 900px); display: flex; align-items: center; overflow: hidden; }
.portada .fondo {
  position: absolute; inset: 0; background-size: cover; background-position: center 40%;
  transform: scale(1.06); animation: acercar 22s ease-in-out infinite alternate;
}
@keyframes acercar { to { transform: scale(1.14) translate(-1%, 1%); } }
.portada::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11, 16, 38, 0.94) 0%, rgba(11, 16, 38, 0.72) 45%, rgba(11, 16, 38, 0.15) 100%),
              linear-gradient(0deg, var(--fondo) 0%, transparent 30%);
}
.portada .contenedor { position: relative; z-index: 2; padding: 90px 0 120px; }
.portada h1 {
  font-family: "Pixelify Sans", sans-serif; font-size: clamp(56px, 10vw, 120px); line-height: 0.95; margin: 18px 0 10px;
  text-shadow: 0 6px 0 #000, 0 0 40px rgba(255, 203, 5, 0.35);
}
.portada h1 .mmo { color: var(--amarillo); }
.portada .lema { font-size: clamp(19px, 2.4vw, 25px); max-width: 640px; color: #dfe4ff; margin: 0 0 30px; }
.portada .datos { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 36px; color: var(--suave); font-weight: 700; }
.portada .datos b { display: block; color: #fff; font-family: "Pixelify Sans", sans-serif; font-size: 30px; }
.aviso-lanzador { margin-top: 12px; color: var(--suave); font-size: 14px; }

/* ---------- Secciones ---------- */
section { padding: 90px 0; }
.titulo-seccion { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.titulo-seccion h2 { font-family: "Pixelify Sans", sans-serif; font-size: clamp(34px, 5vw, 52px); margin: 10px 0; line-height: 1.05; }
.titulo-seccion p { color: var(--suave); font-size: 19px; margin: 0; }
.franja { background: linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) 100%); }

.rejilla { display: grid; gap: 22px; }
.rejilla-3 { grid-template-columns: repeat(3, 1fr); }
.rejilla-4 { grid-template-columns: repeat(4, 1fr); }

.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 26px;
  box-shadow: var(--sombra); position: relative; overflow: hidden;
}
.tarjeta h3 { font-family: "Pixelify Sans", sans-serif; font-size: 25px; margin: 14px 0 6px; }
.tarjeta p { color: var(--suave); margin: 0; }
.tarjeta .icono-grande { width: 64px; height: 64px; }

.sistema {
  display: flex; flex-direction: column; text-decoration: none; color: var(--texto);
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.sistema:hover { transform: translateY(-4px); border-color: var(--cian); background: #1d2858; }
.sistema .burbuja {
  width: 62px; height: 62px; border-radius: 16px; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.12); margin-bottom: 14px;
}
.sistema .burbuja img { width: 42px; height: 42px; }
.sistema h3 { font-family: "Pixelify Sans", sans-serif; font-size: 21px; margin: 0 0 4px; }
.sistema p { color: var(--suave); font-size: 15px; margin: 0; }
.sistema .mas { margin-top: auto; padding-top: 12px; color: var(--cian); font-weight: 800; font-size: 14px; }

/* Galería */
.galeria { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 170px; gap: 14px; }
.galeria figure { margin: 0; position: relative; border-radius: 14px; overflow: hidden; cursor: zoom-in; }
.galeria figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.galeria figure:hover img { transform: scale(1.06); }
.galeria figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 10px; font-weight: 800;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), transparent);
}
.galeria .g-a { grid-column: span 4; grid-row: span 2; }
.galeria .g-b { grid-column: span 2; grid-row: span 2; }
.galeria .g-c { grid-column: span 2; }
.galeria .g-d { grid-column: span 3; grid-row: span 2; }

/* Destacado (zona de la semana, mochilas) */
.destacado { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.destacado h2 { font-family: "Pixelify Sans", sans-serif; font-size: clamp(32px, 4.4vw, 48px); margin: 10px 0; line-height: 1.05; }
.destacado p { color: var(--suave); font-size: 18px; }
.lista-check { list-style: none; padding: 0; margin: 18px 0 26px; display: grid; gap: 10px; }
.lista-check li { display: flex; gap: 12px; align-items: flex-start; }
.lista-check img { width: 28px; height: 28px; flex: none; margin-top: 2px; }

/* Visor 3D de mochilas */
.visor {
  background: radial-gradient(circle at 50% 40%, #2b3a85, #121a3d 70%); border: 1px solid var(--borde);
  border-radius: 24px; aspect-ratio: 1 / 1; position: relative; overflow: hidden; box-shadow: var(--sombra);
}
.visor canvas { width: 100% !important; height: 100% !important; display: block; }
.visor .pista { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; color: var(--suave); font-size: 13px; }
.selector-mochilas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.selector-mochilas button {
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff;
  border-radius: 999px; padding: 7px 14px; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 14px;
}
.selector-mochilas button.activo { background: var(--amarillo); color: #2a1a00; border-color: var(--amarillo); }

/* Pasos */
.pasos { counter-reset: paso; }
.paso { padding-top: 54px; }
.paso::before {
  counter-increment: paso; content: counter(paso); position: absolute; top: 22px; left: 26px;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--rojo); font-family: "Pixelify Sans", sans-serif; font-size: 24px; font-weight: 700;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.25);
}
.paso { padding-top: 84px; }

/* Preguntas */
details { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; padding: 16px 20px; margin-bottom: 12px; }
details summary { cursor: pointer; font-weight: 800; font-size: 18px; }
details p { color: var(--suave); margin: 10px 0 0; }

/* Llamada final */
.llamada {
  border-radius: 28px; padding: 54px; text-align: center; overflow: hidden; position: relative;
  background: linear-gradient(135deg, #7b4cd6, #ee3b32);
}
.llamada h2 { font-family: "Pixelify Sans", sans-serif; font-size: clamp(32px, 4.6vw, 50px); margin: 0 0 10px; }
.llamada p { margin: 0 auto 26px; max-width: 620px; font-size: 19px; }
.llamada .botones { justify-content: center; }

/* ---------- Pie ---------- */
.pie { background: #070a1a; padding: 54px 0 30px; color: var(--suave); font-size: 15px; margin-top: 60px; }
.pie .columnas { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; }
.pie h4 { color: #fff; font-family: "Pixelify Sans", sans-serif; font-size: 19px; margin: 0 0 10px; }
.pie a { color: var(--suave); text-decoration: none; display: block; padding: 3px 0; }
.pie a:hover { color: #fff; }
.pie .legal { border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 34px; padding-top: 20px; font-size: 13px; }

/* ---------- Wiki ---------- */
.wiki-cabecera {
  position: relative; padding: 70px 0 46px; overflow: hidden;
  background: radial-gradient(circle at 80% 0%, rgba(123, 76, 214, 0.45), transparent 50%),
              radial-gradient(circle at 10% 100%, rgba(47, 211, 224, 0.25), transparent 50%), var(--fondo-2);
}
.wiki-cabecera h1 { font-family: "Pixelify Sans", sans-serif; font-size: clamp(40px, 6vw, 68px); margin: 8px 0; line-height: 1; }
.wiki-cabecera p { color: var(--suave); font-size: 20px; max-width: 720px; margin: 0; }
.buscador { margin-top: 26px; max-width: 560px; position: relative; }
.buscador input {
  width: 100%; padding: 16px 20px 16px 50px; border-radius: 14px; border: 1px solid var(--borde);
  background: #0e1535; color: #fff; font-size: 17px; font-family: inherit;
}
.buscador svg { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; opacity: 0.6; }
.categoria-wiki { margin-top: 46px; }
.categoria-wiki h2 { font-family: "Pixelify Sans", sans-serif; font-size: 30px; margin: 0 0 18px; display: flex; align-items: center; gap: 12px; }
.categoria-wiki h2::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, var(--borde), transparent); }

.wiki-tema { display: grid; grid-template-columns: 270px 1fr; gap: 40px; padding: 40px 0 20px; }
.indice { position: sticky; top: 86px; align-self: start; max-height: calc(100vh - 110px); overflow: auto; padding-right: 6px; }
.indice h4 { font-family: "Pixelify Sans", sans-serif; color: var(--amarillo); margin: 18px 0 6px; font-size: 17px; }
.indice a {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px;
  color: var(--suave); text-decoration: none; font-weight: 700; font-size: 15px;
}
.indice a img { width: 22px; height: 22px; }
.indice a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.indice a.activo { background: var(--tarjeta); color: #fff; border: 1px solid var(--borde); }
.cabeza-tema { display: flex; gap: 22px; align-items: center; margin-bottom: 26px; }
.cabeza-tema .burbuja {
  width: 96px; height: 96px; border-radius: 24px; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, var(--morado), var(--rojo)); box-shadow: var(--sombra);
}
.cabeza-tema .burbuja img { width: 62px; height: 62px; }
.cabeza-tema h1 { font-family: "Pixelify Sans", sans-serif; font-size: clamp(34px, 5vw, 52px); margin: 0; line-height: 1.05; }
.cabeza-tema p { color: var(--suave); margin: 4px 0 0; font-size: 18px; }
.hoja { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 26px 30px; margin-bottom: 18px; }
.hoja h2 { font-family: "Pixelify Sans", sans-serif; font-size: 25px; margin: 0 0 8px; display: flex; gap: 10px; align-items: center; }
.hoja h2 .num {
  background: var(--amarillo); color: #2a1a00; border-radius: 8px; font-size: 15px; padding: 1px 9px; font-family: "Nunito", sans-serif; font-weight: 900;
}
.hoja p { margin: 8px 0; color: #d6dbff; }
.hoja ul { margin: 8px 0; padding-left: 22px; color: #d6dbff; }
.hoja strong { color: #fff; }
.foto-tema { border-radius: var(--radio); overflow: hidden; margin: 0 0 18px; border: 1px solid var(--borde); cursor: zoom-in; }
.foto-tema figcaption { padding: 10px 16px; background: var(--tarjeta); color: var(--suave); font-size: 14px; }
.navegar-temas { display: flex; justify-content: space-between; gap: 14px; margin-top: 26px; }
.navegar-temas a { flex: 1; text-decoration: none; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; padding: 14px 18px; color: #fff; font-weight: 800; }
.navegar-temas a small { display: block; color: var(--suave); font-weight: 700; }
.navegar-temas a.siguiente { text-align: right; }
.iconos-tema { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.iconos-tema span {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px; padding: 6px 14px 6px 8px; font-weight: 700; font-size: 14px;
}
.iconos-tema img { width: 26px; height: 26px; }

/* Ampliar fotos */
.lupa { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9); display: none; place-items: center; z-index: 100; padding: 20px; cursor: zoom-out; }
.lupa.abierta { display: grid; }
.lupa img { max-height: 92vh; border-radius: 12px; }

/* Créditos */
.credito { display: flex; gap: 18px; align-items: flex-start; }
.credito .marca-credito { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); font-size: 26px; flex: none; }

/* Animación al aparecer */
.aparece { opacity: 0; transform: translateY(24px); transition: opacity 0.6s, transform 0.6s; }
.aparece.visto { opacity: 1; transform: none; }

/* ---------- Móvil ---------- */
@media (max-width: 960px) {
  .rejilla-3, .rejilla-4 { grid-template-columns: repeat(2, 1fr); }
  .destacado { grid-template-columns: 1fr; }
  .wiki-tema { grid-template-columns: 1fr; }
  .indice { position: static; max-height: none; display: none; }
  .galeria { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .galeria .g-a, .galeria .g-b, .galeria .g-c, .galeria .g-d { grid-column: span 2; grid-row: span 1; }
  .galeria .g-a { grid-row: span 2; }
  .pie .columnas { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .menu-principal { display: none; position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; background: #0b1026; padding: 12px 16px 20px; border-bottom: 1px solid var(--borde); }
  .menu-principal.abierto { display: flex; }
  .abrir-menu { display: block; }
  .rejilla-3, .rejilla-4 { grid-template-columns: 1fr; }
  section { padding: 64px 0; }
  .llamada { padding: 36px 20px; }
  .hoja { padding: 20px; }
  .boton { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .portada .fondo { animation: none; }
  .aparece { opacity: 1; transform: none; transition: none; }
}

/* Cartas coleccionables (portada) */
.cartas-abanico { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.cartas-abanico figure { margin: 0; text-align: center; transition: transform .25s; }
.cartas-abanico figure:nth-child(odd) { transform: rotate(-3deg); }
.cartas-abanico figure:nth-child(even) { transform: rotate(3deg) translateY(8px); }
.cartas-abanico figure:hover { transform: translateY(-10px) scale(1.06); z-index: 2; }
.cartas-abanico img { width: 150px; height: auto; border-radius: 9px; box-shadow: 0 12px 26px rgba(0,0,0,.45); display: block; }
.cartas-abanico.pequeno img { width: 118px; }
.cartas-abanico figcaption { margin-top: 10px; font-weight: 700; font-size: 14px; opacity: .9; }
.seccion-cartas .temporada { margin: 46px auto 0; max-width: 760px; text-align: center; padding: 26px 28px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(216,38,58,.22), rgba(255,194,58,.18)); border: 2px solid rgba(255,194,58,.55); }
.seccion-cartas .temporada h3 { font-size: 26px; margin: 10px 0 8px; }
@media (max-width: 640px) { .cartas-abanico img { width: 104px; } .cartas-abanico.pequeno img { width: 88px; } }
/* En la wiki, las cartas no ocupan todo el ancho */
.foto-tema img[src*="/cartas/"] { max-width: 280px; margin: 0 auto; display: block; border-radius: 10px; }
.foto-tema:has(img[src*="/cartas/"]) figcaption { text-align: center; }

/* Discord */
.boton-discord { background: #5865f2; color: #fff; }
.boton-discord:hover { background: #4752c4; }
.boton svg, .enlace-discord svg { width: 22px; height: 22px; flex: none; }
.menu-principal a.enlace-discord { display: inline-flex; gap: 6px; align-items: center; color: #c9cdfb; }
.menu-principal a.enlace-discord:hover { background: #5865f2; color: #fff; }
/* Buscador del índice lateral */
.buscador.buscador-mini { margin: 0 0 14px; max-width: none; }
.buscador.buscador-mini input { font-size: 15px; padding: 10px 12px 10px 38px; }
/* Galería de la Temporada 1 */
.temporada-cabecera { background: radial-gradient(circle at 50% 0, rgba(255,194,58,.22), transparent 60%), linear-gradient(135deg, rgba(216,38,58,.25), transparent); }
.datos-t1 { display: flex; gap: 30px; justify-content: center; margin-top: 22px; color: var(--suave); font-weight: 700; }
.datos-t1 b { display: block; color: #ffc23a; font-family: "Pixelify Sans", sans-serif; font-size: 30px; }
.como-t1 { margin: 40px 0 10px; }
.grupo-t1 { margin-top: 46px; }
.grupo-t1 h2 { margin: 0 0 4px; }
.grupo-t1 > p { color: var(--suave); margin: 0 0 18px; }
.rejilla-t1 { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px; }
.ficha-t1 { margin: 0; text-align: center; }
.ficha-t1 img { width: 100%; border-radius: 9px; box-shadow: 0 10px 22px rgba(0,0,0,.45); display: block; }
.ficha-t1 figcaption { margin-top: 9px; font-weight: 800; font-size: 14px; }
.ficha-t1 figcaption small { display: block; font-weight: 600; color: var(--suave); }
.carta-t1 { aspect-ratio: 5 / 7; border-radius: 9px; padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; text-align: left;
  border: 4px solid #e2b13c; background: linear-gradient(160deg, #2a1240, #161c48 60%, #3a1020); box-shadow: 0 10px 22px rgba(0,0,0,.45);
  position: relative; overflow: hidden; }
.carta-t1::before { content: ""; position: absolute; top: 14px; right: -34px; width: 120px; height: 16px; background: #d8263a; transform: rotate(35deg); }
.carta-t1 .num { font-size: 11px; color: #ffc23a; font-weight: 800; }
.carta-t1 b { font-size: 15px; line-height: 1.2; }
.carta-t1 em { font-size: 12px; color: #cfd4ff; line-height: 1.35; flex: 1; }
.carta-t1 .rar { font-size: 12px; font-weight: 800; color: #ffc23a; }
.carta-t1.r3 { background: linear-gradient(160deg, #3a2a6a, #1d4a6a 50%, #6a2a5a); }
.carta-t1.r4 { border-color: #ffd86a; background: linear-gradient(160deg, #6a4a10, #2a1a48 55%, #6a1a1a); }
.carta-t1.r5 { border-image: linear-gradient(135deg, #ff5a5a, #ffc23a, #5aff8a, #5ac8ff, #c85aff) 1; background: linear-gradient(160deg, #40306a, #10184a 60%, #6a4010); }
.llamada .botones { justify-content: center; }
.carta-t1 .sello { position: absolute; left: 0; right: 0; top: 46%; text-align: center; font-style: normal; font-size: 54px; color: rgba(255,194,58,.22); }
@media (max-width: 640px) { .rejilla-t1 { grid-template-columns: repeat(2, 1fr); gap: 12px; } .carta-t1 { padding: 9px 8px; } .carta-t1 b { font-size: 13px; } .carta-t1 em { font-size: 11px; } }