/* ===== Guías (macalaoshi.com/guias y traducciones) ===== */
/* Guías: lectura cómoda en el teléfono, texto de 18 px como mínimo */
.guia { padding: 28px 0 64px; }
.guia .container { max-width: 760px; padding: 0 20px; }
.guia p, .guia li, .guia td, .guia th, .guia summary { font-size: 1.125rem; line-height: 1.65; color: #2a2f3a; }
.guia h1 { font-size: clamp(1.9rem, 5vw, 2.5rem); color: var(--navy-1); margin: 0 0 14px; text-wrap: balance; }
.guia h2 { font-size: 1.55rem; color: var(--navy-1); margin: 44px 0 14px; text-wrap: balance; }
.guia h3 { font-size: 1.25rem; color: var(--navy-1); margin: 30px 0 10px; font-weight: 800; }
.guia a { color: #2463c7; text-decoration: underline; text-underline-offset: 2px; }
.guia ul, .guia ol { padding-left: 24px; margin: 0 0 1em; }
.guia li { margin-bottom: 8px; }
.migas { font-size: 1.125rem; color: #6b7280; margin-bottom: 12px; }
.migas a { color: #6b7280; }
.firma { display: flex; align-items: center; gap: 14px; margin: 6px 0 26px; }
.firma img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.firma p { margin: 0; font-size: 1.125rem; color: #4b5263; line-height: 1.4; }
.firma strong { color: var(--navy-1); }
.respuesta { background: #fff; border: 2px solid var(--navy-1); border-radius: var(--radius-md); padding: 20px 22px; margin: 0 0 8px; }
.respuesta .etiqueta { display: inline-block; background: var(--pill-bg); color: var(--navy-1); font-weight: 800; font-size: 1.125rem; padding: 2px 12px; border-radius: 999px; margin-bottom: 10px; }
.respuesta p { margin: 0; }
.zh { font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
.desarmar { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 16px 0 18px; }
.pieza { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.pieza .grande { font-size: 3rem; line-height: 1; color: var(--navy-1); }
.pieza .py { font-size: 1.125rem; color: #6b7280; }
.pieza .suma { font-size: 1.125rem; color: #2a2f3a; }
.pieza .suma .zh { font-size: 1.35rem; color: var(--navy-1); }
.tabla-wrap { overflow-x: auto; margin: 16px 0 20px; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.guia table { border-collapse: collapse; width: 100%; }
.guia th, .guia td { text-align: left; padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,0.08); vertical-align: top; }
.guia th { color: var(--navy-1); font-weight: 800; }
.guia tr:last-child td { border-bottom: 0; }
.guia td .zh { font-size: 1.3rem; color: var(--navy-1); }
.fila-repaso { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; padding: 0; list-style: none; }
.fila-repaso li { margin: 0; background: #fff; border-radius: 999px; padding: 6px 14px; box-shadow: var(--shadow-card); font-weight: 700; color: var(--navy-1); }
.app-caja { background: linear-gradient(180deg, var(--bg-yellow-top), var(--bg-yellow-bottom)); border-radius: var(--radius-lg); padding: 26px 22px; margin: 44px 0 10px; }
.app-caja h2 { margin-top: 0; }
.app-caja .cabeza { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.app-caja .cabeza img { width: 64px; height: 64px; border-radius: 23%; flex: none; }
.app-caja .cabeza h2 { margin: 0; }
.app-caja li, .app-caja p { color: #1f2430; }
.insignias { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.insignias a { display: block; text-decoration: none; }
.insignias img { height: 54px; width: auto; }
.guia details.faq { border-bottom: 1px solid rgba(0,0,0,0.1); padding: 14px 0; }
.guia details.faq summary { font-weight: 800; color: var(--navy-1); cursor: pointer; }
.guia details.faq p { margin: 10px 0 0; }
.autor { display: flex; gap: 16px; align-items: flex-start; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 18px; margin-top: 40px; }
.autor img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.autor p { margin: 0; }
.fuentes { margin-top: 30px; }
.fuentes li, .fuentes p { color: #4b5263; }
@media (max-width: 520px) {
  .guia .container { padding: 0 16px; }
  .pieza .grande { font-size: 2.6rem; }
}

/* Índice, más guías y otros idiomas */
.indice-intro { margin-bottom: 26px; }
.guia ul.indice { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.guia ul.indice li { margin: 0; }
.guia ul.indice a { display: flex; flex-direction: column; gap: 4px; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 18px 20px; text-decoration: none; }
.guia ul.indice strong { font-size: 1.25rem; color: var(--navy-1); line-height: 1.3; }
.guia ul.indice span { font-size: 1.125rem; color: #4b5263; line-height: 1.5; }
.guia ul.indice a:hover strong, .guia ul.indice a:focus-visible strong { text-decoration: underline; }
.mas-guias { margin-top: 36px; }
.mas-guias h2 { margin-top: 0; }
.otros-idiomas { margin-top: 30px; color: #4b5263; }
.respuesta + h2 { margin-top: 36px; }
.guia .nota { background: #fff; border-radius: var(--radius-md); padding: 14px 18px; border: 1px solid rgba(0,0,0,0.08); }
.guia td.si { color: #12795a; font-weight: 800; }
.guia td.no { color: #b8432f; font-weight: 800; }

/* Tablas anchas (5 columnas o más): más ancho en escritorio y primera columna fija al deslizar en el teléfono */
.tabla-wrap:has(th:nth-child(5)) th:first-child,
.tabla-wrap:has(th:nth-child(5)) td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; }
.tabla-wrap:has(th:nth-child(5)) td { min-width: 9.5rem; }
.tabla-wrap:has(th:nth-child(5)) td:first-child { min-width: 7.5rem; }
@media (min-width: 900px) {
  .tabla-wrap:has(th:nth-child(5)) { width: min(1120px, calc(100vw - 48px)); position: relative; left: 50%; transform: translateX(-50%); }
  .tabla-wrap:has(th:nth-child(5)) td { min-width: 0; }
}

/* Coreano: no cortar palabras al final de línea. Japonés y coreano: encabezados de tabla en una sola línea */
.guia:lang(ko), .guia :lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
.guia th:lang(ja), .guia th:lang(ko) { white-space: nowrap; }