/* =====================================================
   REFLEXIÓN CON DIOS — Estilos Globales
   Versión corregida para móvil — Marzo 2026
   Oct. 2026: familia visual única (oro, Cinzel + Cormorant),
   fuentes propias, fotos reales, lectura cómoda.
   ===================================================== */

/* ── Fuentes propias (oct. 2026) ──
   Antes se pedían a Google en cada visita, lo que retrasaba la primera
   pintura en celulares lentos. Ahora viven en /fuentes y la app instalada
   las tiene aunque no haya señal. */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fuentes/cinzel-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fuentes/cinzel-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fuentes/cinzel-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fuentes/cormorant-garamond-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fuentes/cormorant-garamond-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('../fuentes/cormorant-garamond-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url('../fuentes/cormorant-garamond-latin-300-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fuentes/cormorant-garamond-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 600 700; font-display: swap; src: url('../fuentes/cormorant-garamond-latin-600-italic.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fuentes/lato-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fuentes/lato-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fuentes/lato-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700 900; font-display: swap; src: url('../fuentes/lato-latin-700-normal.woff2') format('woff2'); }

/* Transición suave al pasar de una página a otra (Chrome, Edge, Safari 18+) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

/* ── Variables (tema oscuro = por defecto) ── */
:root {
    --oro:        #C9A84C;
    --oro-claro:  #E8D5A3;
    --oro-tenue:  rgba(201,168,76,0.15);
    --oscuro:     #0a0702;
    --cristal:    rgba(255,255,255,0.08);
    --borde:      rgba(201,168,76,0.25);
    --trans:      all 0.38s cubic-bezier(0.25,0.8,0.25,1);
    --radio:      28px;

    --texto-fuerte: #ffffff;
    --texto-medio:  rgba(255,255,255,0.75);
    --texto-suave:  rgba(255,255,255,0.45);
    --texto-tenue:  rgba(255,255,255,0.3);
    --velo-1:       rgba(5,3,1,0.78);
    --velo-2:       rgba(10,7,2,0.55);
    --velo-3:       rgba(5,3,1,0.82);
    --sombra-cristal: rgba(0,0,0,0.4);
    --brillo-titulo: rgba(201,168,76,0.4);
}

/* ── Variables (tema claro — se activa con <html data-theme="light">) ── */
:root[data-theme="light"] {
    --oro:        #A9782E;
    --oro-claro:  #7A551C;
    --oro-tenue:  rgba(169,120,46,0.12);
    --oscuro:     #FBF6EC;
    --cristal:    rgba(255,255,255,0.55);
    --borde:      rgba(169,120,46,0.32);

    --texto-fuerte: #2b2007;
    --texto-medio:  rgba(43,32,7,0.75);
    --texto-suave:  rgba(43,32,7,0.5);
    --texto-tenue:  rgba(43,32,7,0.35);
    --velo-1:       rgba(251,246,236,0.55);
    --velo-2:       rgba(244,236,218,0.4);
    --velo-3:       rgba(251,246,236,0.65);
    --sombra-cristal: rgba(120,90,40,0.15);
    --brillo-titulo: rgba(169,120,46,0.22);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 17px;
    color: var(--texto-fuerte);
    background: var(--oscuro);
    overflow-x: hidden;
    min-height: 100vh;
    transition: background .4s ease, color .4s ease;
}

/* ── Fondo con imagen ── */
.fondo-pagina {
    position: fixed; inset: 0; z-index: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* se desactiva en móvil abajo */
}
.fondo-pagina::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg,var(--velo-1) 0%,var(--velo-2) 50%,var(--velo-3) 100%);
}

/* ── Contenedor principal ── */
.pagina {
    position: relative; z-index: 10;
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

/* ── Cabecera de cada página ── */
.cabecera {
    text-align: center;
    margin-bottom: 40px;
}
.btn-volver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--texto-suave);
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: var(--trans);
    margin-bottom: 24px;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}
.btn-volver:hover { color: var(--oro-claro); border-color: var(--oro); }

h1.titulo-pagina {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: clamp(1.9rem, 5vw, 3rem);
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--texto-fuerte);
    text-shadow: 0 0 40px var(--brillo-titulo);
    margin-bottom: 10px;
}
.subtitulo-pagina {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--oro-claro);
    opacity: 0.8;
}

/* ── Tarjeta/panel de cristal ── */
.cristal {
    background: var(--cristal);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: 0 20px 50px var(--sombra-cristal), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: background .4s ease, border-color .4s ease;
}

/* ── Botones dorados ── */
.btn-oro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #c9a84c, #a8832a);
    color: #1a0f00;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 14px 36px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: var(--trans);
    box-shadow: 0 8px 24px rgba(201,168,76,0.35);
}
.btn-oro:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(201,168,76,0.5);
    filter: brightness(1.1);
}

/* ── Botón WhatsApp ── */
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #25d366;
    color: white;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 50px;
    text-decoration: none;
    transition: var(--trans);
    box-shadow: 0 8px 20px rgba(37,211,102,0.3);
    font-size: 0.9rem;
}
.btn-whatsapp:hover { background: #128c7e; transform: scale(1.04); }

/* ── Menú de navegación inferior ── */
/* CORRECCIÓN: auto-fit en lugar de repeat(7,1fr) fijo */
.menu-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 8px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--borde);
}
.nav-item {
    color: var(--texto-medio);
    text-decoration: none;
    font-size: 0.72rem;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.5px;
    font-weight: 400;
    text-align: center;
    padding: 14px 6px;
    border-radius: 16px;
    transition: var(--trans);
    border: 1px solid transparent;
}
.nav-item span { display: block; font-size: 1.8rem; margin-bottom: 8px; }
.nav-item:hover {
    color: var(--oro);
    background: var(--oro-tenue);
    border-color: var(--borde);
    transform: translateY(-2px);
}
.nav-item.activo {
    color: var(--oro);
    background: var(--oro-tenue);
    border-color: rgba(201,168,76,0.4);
}
.nav-item-destacado {
    color: var(--oro) !important;
    background: rgba(201,168,76,0.12) !important;
    border: 1px solid rgba(201,168,76,0.35) !important;
}

/* ── Animaciones ── */
@keyframes aparecer {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulsar {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
.animar { animation: aparecer 0.9s ease-out both; }
.animar-2 { animation: aparecer 1.1s ease-out both; }
.animar-3 { animation: aparecer 1.3s ease-out both; }

/* ── Pie de página ── */
.pie {
    text-align: center;
    margin-top: 60px;
    font-size: 0.75rem;
    color: var(--texto-tenue);
    font-family: 'Cinzel', serif;
    letter-spacing: 2px;
}

/* ── Interruptor de tema (claro/oscuro) ── */
.interruptor-tema {
    position: fixed;
    bottom: 22px;
    left: 22px;
    z-index: 200;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--cristal);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--borde);
    color: var(--oro);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--trans);
}
.interruptor-tema:hover { border-color: var(--oro); }
.interruptor-tema svg { width: 22px; height: 22px; }
.interruptor-tema .icono-luna { display: none; }
:root[data-theme="light"] .interruptor-tema .icono-sol { display: none; }
:root[data-theme="light"] .interruptor-tema .icono-luna { display: block; }

/* =====================================================
   RESPONSIVE — Correcciones móvil
   ===================================================== */

/* ── Tablets (≤ 768px): corregir fondo iOS y optimizar imagen ── */
@media (max-width: 768px) {
    /* CORRECCIÓN: background-attachment:fixed no funciona en iOS Safari
       y causa que el fondo se vea blanco o negro en iPhone/Android */
    .fondo-pagina {
        background-attachment: scroll;
    }

    /* CORRECCIÓN: servir imagen más pequeña en móvil para ahorrar datos */
    .fondo-pagina {
        background-image: url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&q=70&w=800') !important;
    }
}

/* ── Móvil (≤ 600px): todo lo demás ── */
@media (max-width: 600px) {
    body { font-size: 15px; }

    .pagina { padding: 72px 14px 60px; }

    h1.titulo-pagina { font-size: 1.8rem; letter-spacing: 2px; }

    /* CORRECCIÓN: fuentes pequeñas — mínimo legible 13px */
    .btn-volver        { font-size: 0.75rem; }
    .nav-item          { font-size: 0.8rem; padding: 16px 8px; background: var(--cristal); border: 1px solid var(--borde); }
    .pie               { font-size: 0.8rem; }
    .label-promesa     { font-size: 0.82rem; }
    .subtitulo-banner  { font-size: 0.82rem; }
    .texto-versiculo   { font-size: 1.2rem !important; }
    .texto-reflexion   { font-size: 1.1rem !important; }
    .banner-frontera   { font-size: 1rem !important; }
    .cita-versiculo    { font-size: 0.9rem !important; }
    .sitio-eslogan     { font-size: 0.85rem; }

    /* CORRECCIÓN: botones más fáciles de tocar (mínimo 44px alto) */
    .btn-whatsapp,
    .btn-oro {
        padding: 16px 24px;
        font-size: 0.8rem;
        width: 100%;
        justify-content: center;
    }

    /* CORRECCIÓN: tarjetas con menos padding en pantalla pequeña */
    .cristal {
        border-radius: 20px;
    }

    /* CORRECCIÓN: menú — 3 columnas en móvil para 9 ítems */
    .menu-nav {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}
/* =====================================================
   FAMILIA VISUAL ÚNICA — octubre 2026
   Todas las páginas hablan el mismo idioma visual:
   oro y marfil de día, noche cálida de noche, Cinzel para
   las etiquetas, Cormorant para los títulos y las citas,
   Lato para leer. Las páginas que nacieron en azul
   (Biblioteca, Palabra, Devocional, Plegarias, Aliento,
   Ángel) toman aquí los colores de la familia.
   ===================================================== */
:root {
    --f-marca:  'Cinzel', Georgia, serif;
    --f-titulo: 'Cormorant Garamond', Georgia, serif;
    --f-texto:  'Lato', system-ui, -apple-system, sans-serif;
    --escala:   1;
}

/* Páginas de la familia "cielo": mismos nombres de siempre, colores de la casa.
   (html:root gana a los :root que cada página trae en su propio <style>) */
html:root {
    --azul-acento:  #9C6E24;
    --azul-suave:   #B98E48;
    --azul-oscuro:  #6E4C14;
    --dorado:       #B8862A;
    --dorado-suave: #D9AE55;
    --verde:        #5E8C4A;
    --texto-oscuro: #2b2007;
    --blanco-carta: rgba(255,252,245,0.88);
    --blanco-hover: rgba(255,253,248,0.97);
    --panel-claro:  rgba(255,250,240,0.75);
    --sombra-card:  0 10px 36px rgba(90,64,20,0.14);
}
html:root[data-theme="light"] {
    --texto-medio:  #5a4826;
    --texto-suave:  #85714b;
}
html:root[data-theme="dark"] {
    --azul-acento:  #E0B25A;
    --azul-suave:   #E8D5A3;
    --azul-oscuro:  #F3E3B8;
    --dorado:       #E0B25A;
    --dorado-suave: #F0CD7A;
    --verde:        #8CC77A;
    --texto-oscuro: #F7F0E1;
    --texto-medio:  #D9CBAE;
    --texto-suave:  #A8977A;
    --blanco-carta: rgba(16,12,6,0.66);
    --blanco-hover: rgba(28,21,10,0.80);
    --panel-claro:  rgba(28,21,10,0.6);
    --sombra-card:  0 10px 36px rgba(0,0,0,0.45);
}

/* Títulos de página iguales en todo el sitio */
.titulo-pagina { font-family: var(--f-titulo); }

/* ── Fotos reales de naturaleza detrás de cada sección ──
   Uso: <div class="fondo-cielo fondo-foto" style="--foto:url('…')"></div> */
.fondo-foto.fondo-cielo,
:root[data-theme] .fondo-foto.fondo-cielo {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: var(--foto) center / cover no-repeat, #e9dfcb;
}
.fondo-foto.fondo-cielo::after,
:root[data-theme] .fondo-foto.fondo-cielo::after {
    content: ''; position: absolute; inset: 0; top: 0; left: 0; transform: none;
    width: auto; height: auto; border-radius: 0;
    background: linear-gradient(180deg, rgba(251,246,236,0.62) 0%, rgba(251,246,236,0.78) 45%, rgba(251,246,236,0.9) 100%);
}
:root[data-theme="dark"] .fondo-foto.fondo-cielo { background-color: #0a0702; }
:root[data-theme="dark"] .fondo-foto.fondo-cielo::after {
    background: linear-gradient(180deg, rgba(8,6,3,0.62) 0%, rgba(8,6,3,0.78) 45%, rgba(8,6,3,0.9) 100%);
}
/* La foto respira muy despacio, como en los videos */
@keyframes rcdRespira { from { transform: scale(1); } to { transform: scale(1.07); } }
.fondo-foto.fondo-cielo { animation: rcdRespira 30s ease-in-out infinite alternate; }

/* ── Las secciones aparecen suavemente al bajar ── */
.revelar { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.revelar.visible { opacity: 1; transform: none; }

/* =====================================================
   LECTURA CÓMODA — octubre 2026
   Un solo botón "Aa" abajo a la izquierda abre el panel:
   tamaño de letra, claro/oscuro, lectura nocturna y
   recordatorio diario. Todo se recuerda en el celular.
   ===================================================== */
.pagina, .caja-dialogo { zoom: var(--escala); }

.interruptor-tema {
    font-family: var(--f-titulo); font-size: 22px; font-weight: 600; line-height: 1;
    background: color-mix(in srgb, var(--oscuro) 70%, transparent);
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.interruptor-tema .aa-chica { font-size: 15px; }
.interruptor-tema[aria-expanded="true"] { z-index: 10001; border-color: var(--oro); }

#rcd-panel {
    position: fixed; left: 16px; bottom: 84px; z-index: 10001;
    width: min(320px, calc(100vw - 32px));
    background: color-mix(in srgb, var(--oscuro) 94%, transparent);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--borde); border-radius: 22px;
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
    padding: 18px 18px 14px; color: var(--texto-fuerte);
    font-family: var(--f-texto); font-size: 15px; font-weight: 400;
    opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
#rcd-panel.abierto { opacity: 1; transform: none; pointer-events: auto; }
#rcd-panel h2 { font-family: var(--f-marca); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--oro); margin: 0 0 14px; font-weight: 600; }
#rcd-panel .fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--borde); }
#rcd-panel .fila:first-of-type { border-top: 0; }
#rcd-panel .etiqueta { line-height: 1.3; }
#rcd-panel .etiqueta small { display: block; font-size: 12.5px; color: var(--texto-suave); margin-top: 2px; }
#rcd-panel .grupo { display: inline-flex; border: 1px solid var(--borde); border-radius: 50px; overflow: hidden; flex-shrink: 0; }
#rcd-panel .grupo button { min-width: 46px; min-height: 42px; border: 0; background: transparent; color: var(--oro-claro); font: 700 16px var(--f-texto); cursor: pointer; padding: 0 12px; }
#rcd-panel .grupo button + button { border-left: 1px solid var(--borde); }
#rcd-panel .grupo button[aria-pressed="true"] { background: var(--oro); color: #1a1205; }
#rcd-panel .grupo button:disabled { opacity: .35; cursor: default; }
#rcd-panel .interruptor { position: relative; width: 52px; height: 30px; flex-shrink: 0; border-radius: 30px; border: 1px solid var(--borde); background: var(--cristal); cursor: pointer; transition: background .25s; }
#rcd-panel .interruptor::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--texto-suave); transition: transform .25s, background .25s; }
#rcd-panel .interruptor[aria-checked="true"] { background: var(--oro); border-color: var(--oro); }
#rcd-panel .interruptor[aria-checked="true"]::after { transform: translateX(22px); background: #1a1205; }
#rcd-panel .nota { font-size: 12.5px; color: var(--texto-suave); margin: 4px 0 0; min-height: 1em; line-height: 1.4; }

/* Lectura nocturna: luz cálida, sin brillo azul, fondos apagados */
html:root[data-theme][data-lectura="nocturna"] {
    --oscuro: #120d06; --cristal: rgba(255,236,200,0.035); --borde: rgba(201,168,76,0.2);
    --oro: #C99A45; --oro-claro: #E2C98F; --oro-tenue: rgba(201,154,69,0.12);
    --texto-fuerte: #EFE2C4; --texto-medio: #D8C7A2; --texto-suave: #A8956D; --texto-tenue: #7d6d4f;
    --velo-1: rgba(18,13,6,.9); --velo-2: rgba(18,13,6,.86); --velo-3: rgba(18,13,6,.93);
    --azul-acento: #C99A45; --azul-suave: #E2C98F; --azul-oscuro: #EFE2C4;
    --texto-oscuro: #EFE2C4; --blanco-carta: rgba(30,22,10,.82); --blanco-hover: rgba(38,28,13,.9);
    --sombra-card: 0 8px 30px rgba(0,0,0,.5); --sombra-cristal: rgba(0,0,0,.5);
}
:root[data-lectura="nocturna"] body { background: #120d06; }
:root[data-lectura="nocturna"] .fondo-pagina,
:root[data-lectura="nocturna"] .fondo-cielo,
:root[data-lectura="nocturna"] .hero-fondo { filter: brightness(.45) sepia(.5); animation: none; }
:root[data-lectura="nocturna"] body::after {
    content: ''; position: fixed; inset: 0; z-index: 9990; pointer-events: none;
    background: rgba(255,150,40,.07); mix-blend-mode: multiply;
}
:root[data-lectura="nocturna"] .pagina p,
:root[data-lectura="nocturna"] .cuerpo { line-height: 2; }

/* Quien prefiere menos movimiento (ajuste del celular) no ve animaciones */
@media (prefers-reduced-motion: reduce) {
    .revelar { opacity: 1; transform: none; transition: none; }
    .fondo-foto.fondo-cielo, .hero-fondo, .hero-luz { animation: none !important; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
@media (max-width: 600px) {
    #rcd-panel { bottom: 80px; left: 12px; }
}

/* Botones principales de las páginas "cielo": el mismo oro de .btn-oro,
   con letra oscura para que se lean bien de día y de noche */
.btn-filtro.activo, .btn-copiar-ref:hover, .btn-mic:not(.escuchando), .btn-enviar,
.filtros button, .btn-orar:hover:not(:disabled), .btn-enviar-chat, .btn-comentar {
    background: linear-gradient(135deg, #c9a84c, #a8832a) !important;
    color: #1a0f00 !important;
    border-color: transparent !important;
    box-shadow: 0 6px 18px rgba(201,168,76,0.3);
}
.btn-mic:not(.escuchando):hover, .btn-enviar:hover:not(:disabled), .filtros button:hover,
.btn-enviar-chat:hover:not(:disabled), .btn-comentar:hover:not(:disabled) { filter: brightness(1.1); }
#alerta-copiado { background: #2b2007 !important; color: #F7F0E1 !important; }

/* ── Selector de idioma ES · PT (oct. 2026) ── */
.selector-idioma { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-marca); font-size: 12px; letter-spacing: 1px; color: var(--texto-suave); white-space: nowrap; }
.selector-idioma a { color: var(--texto-medio); text-decoration: none; padding: 3px 6px; border-radius: 8px; transition: var(--trans); text-transform: none !important; }
.selector-idioma a:hover { color: var(--oro); }
.selector-idioma a[aria-current="true"] { color: var(--oro); border: 1px solid var(--borde); font-weight: 600; }
.selector-idioma.flotante { position: relative; z-index: 20; display: flex; width: fit-content; margin: 12px 16px 0 auto; background: color-mix(in srgb, var(--oscuro) 70%, transparent); padding: 4px 8px; border-radius: 20px; border: 1px solid var(--borde); backdrop-filter: blur(10px); }
#rcd-panel .grupo a { min-width: 46px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; color: var(--oro-claro); text-decoration: none; font: 700 14px var(--f-texto); }
#rcd-panel .grupo a + a { border-left: 1px solid var(--borde); }
#rcd-panel .grupo a[aria-pressed="true"] { background: var(--oro); color: #1a1205; }