/*!
 * Kwotix — © 2026 María José Madarnás Álvarez. Todos los derechos reservados.
 * https://kwotix.com
 *
 * Queda prohibida la reproducción, distribución o comunicación pública,
 * total o parcial, de este código sin autorización expresa del titular.
 * Contacto: hello@kwotix.com
 */

/* Externo, no inline: la CSP del sitio (vercel.json, style-src 'self' sin
   'unsafe-inline') se aplica a TODAS las rutas, esta incluida -- un
   <style> inline en legal.html lo bloquea el navegador en el sitio real
   (aunque abrir el archivo en local no lo note: las cabeceras CSP no se
   aplican a file://) -- exactamente el mismo motivo por el que legal.js
   ya vive en su propio archivo en vez de un <script> inline. */

body { padding: 0 0 60px 0; align-items: center; }

.legal-page {
    max-width: 640px;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .legal-page { padding: 0 20px; }
}

.legal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 0 10px;
    flex-wrap: wrap;
}

/* El logo también vuelve al juego -- costumbre de usuario: en casi
   cualquier sitio, tocar el logo es "llévame al inicio" tanto como el
   botón explícito de "volver". Sin decoración de enlace por defecto para
   que siga leyéndose exactamente igual que el .logo estático de index.html. */
.logo-link {
    text-decoration: none;
    display: inline-block;
    border-radius: 6px;
}
.logo-link:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
}

.back-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid var(--border-color);
    border-radius: 999px;
    padding: 8px 16px;
    color: var(--main-color);
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.back-pill:hover, .back-pill:focus-visible {
    border-color: var(--accent-color);
    color: var(--accent-color);
    outline: none;
}

/* "TEXTOS LEGALES" como si fuera una fila resuelta del propio damero:
   mismas casillas (proporción, borde, radio) que #quote-section
   .cell-input, solo que estáticas y centradas -- un texto aburrido por
   obligación se lee, al menos, como parte del juego en vez de como letra
   pequeña de abogado. */
.legal-title-board {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 18px 0 6px;
    padding: 0;
    list-style: none;
}
.title-word {
    display: flex;
    gap: 3px;
}
.title-cell {
    width: 26px;
    height: 33px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1.5px solid var(--border-color);
    background-color: var(--input-bg);
    color: var(--main-color);
    font-family: -apple-system, 'SF Pro Rounded', 'Segoe UI', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 0.92rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 380px) {
    .title-cell { width: 21px; height: 27px; font-size: 0.78rem; border-radius: 5px; }
    .legal-title-board { gap: 7px; }
    .title-word { gap: 2px; }
}

.legal-subtitle {
    font-family: 'Lato', sans-serif;
    font-size: 0.92rem;
    opacity: 0.75;
    margin: 0 0 24px;
    text-align: center;
}

/* Pestañas a todo el ancho, un tercio cada una -- misma píldora de
   segmentos que el selector ES/EN del juego (.lang-toggle), pero
   repartida en vez de encogida a su contenido: en tres bloques de texto
   esto se lee mejor como "elige sección" que como una fila de botones
   sueltos alineados a la izquierda. */
.tabs-nav {
    display: flex;
    border: 1.5px solid var(--border-color);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 22px;
    width: 100%;
}

.tab-btn {
    flex: 1;
    background: none;
    border: none;
    color: var(--main-color);
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 11px 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.tab-btn.active {
    background-color: var(--main-color);
    color: var(--bg-body);
}

@media (prefers-color-scheme: dark) {
    .tab-btn.active { color: #17121F; }
}

.tab-content {
    display: none;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 26px 24px 28px;
    line-height: 1.7;
}
.tab-content.active { display: block; }

/* Píldora resumen: la conclusión en una frase, antes del texto formal --
   para que la parte "entretenida" no se quede solo en el título y el
   resto vuelva a ser un muro de letra pequeña. */
.legal-lead {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(94, 214, 150, 0.18);
    color: #2f9e63;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 9px 16px;
    border-radius: 999px;
    margin: 0 0 22px;
}
@media (prefers-color-scheme: dark) {
    .legal-lead { background-color: rgba(94, 214, 150, 0.22); color: #7fe3ac; }
}

.tab-content h2 { display: none; }

.legal-section {
    padding-top: 18px;
    border-top: 1px dashed var(--border-color);
}
.legal-section:first-of-type {
    padding-top: 0;
    border-top: none;
}

.tab-content h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.98rem;
    margin: 0 0 8px;
    color: var(--main-color);
}
.tab-content p, .tab-content li {
    font-family: 'Lato', sans-serif;
    font-size: 0.94rem;
    margin: 0 0 10px;
}
.tab-content ul { margin: 0 0 10px; padding-left: 20px; }
.tab-content strong { color: var(--main-color); }
.tab-content a { color: var(--main-color); }

.legal-footer {
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 0.8rem;
    opacity: 0.65;
    margin-top: 24px;
}
.legal-footer a { color: inherit; }