/* Doctrina y DIH: rueda de principios, Dunant, emblemas y zona de conflicto */
.dx-oculto { display: none !important; }
/* ---- Rueda de los 7 principios ---- */
.rueda { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.8rem; align-items: center; margin: 2rem 0 1.2rem; }
.rueda-lienzo svg { display: block; width: 100%; max-width: 580px; margin: 0 auto; overflow: visible; }
.rd-lazo { stroke: color-mix(in srgb, var(--ac) 25%, transparent); stroke-width: 2; stroke-dasharray: 3 7; transition: all .3s ease; }
.rd-lazo.on { stroke: #E50914; stroke-width: 3.5; stroke-dasharray: 8 8; animation: redFluyeD 1s linear infinite; filter: drop-shadow(0 0 5px rgba(229,9,20,.6)); }
.rd-nodo { cursor: pointer; outline: none; }
.rd-nodo circle { fill: #fff; stroke: color-mix(in srgb, var(--ac) 40%, #fff); stroke-width: 3; transition: all .3s cubic-bezier(.3,1.5,.5,1); transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 6px 10px rgba(0,0,0,.14)); }
.rd-nodo:hover circle, .rd-nodo:focus-visible circle { transform: scale(1.1); stroke: var(--ac); }
.rd-nodo.on circle { fill: var(--ac); stroke: #E50914; transform: scale(1.22); filter: drop-shadow(0 0 14px rgba(229,9,20,.55)); }
.rd-nodo .em { font-size: 34px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.rd-nodo .nm { fill: #2d3748; font: 800 14px 'Inter',sans-serif; text-anchor: middle; pointer-events: none; } .rd-nodo.on .nm { fill: #E50914; }
.rd-centro { transform-box: fill-box; transform-origin: center; animation: dxLatido 2.8s ease-in-out infinite; }
.rd-centro rect.fondo { fill: #fff; stroke: #E50914; stroke-width: 3; filter: drop-shadow(0 8px 16px rgba(229,9,20,.35)); }
.rd-centro .cruz { fill: #E50914; }
.rueda-panel { padding: 1.9rem; background: #fff; border: 1px solid #E9ECEF; border-top: 6px solid #E50914; border-radius: 22px; box-shadow: 0 16px 34px rgba(0,0,0,.08); min-height: 300px; }
.rueda-panel .cat { display: inline-block; padding: .3rem .85rem; font: 800 .72rem 'Inter',sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--ac); border-radius: 999px; }
.rueda-panel .gran { margin: .8rem 0 0; font-size: 3.4rem; line-height: 1; animation: juvFlota 3.5s ease-in-out infinite; }
.rueda-panel h3 { margin: .3rem 0 .5rem; font: 800 1.7rem 'Poppins','Inter',sans-serif; color: #1A2530; }
.rueda-panel p { margin: 0 0 1rem; font-size: 1.02rem; line-height: 1.6; color: #4A5568; }
.rueda-panel .anima { animation: juvPanel .45s ease; }
.rueda-nav { display: flex; align-items: center; gap: .6rem; }
.rueda-nav .pt { display: flex; gap: .35rem; flex: 1; } .rueda-nav .pt i { flex: 1; max-width: 34px; height: 6px; background: #E1E8EF; border-radius: 6px; transition: background .3s; } .rueda-nav .pt i.on { background: #E50914; }
.rueda-ver { display: block; margin: 0 auto; }
@keyframes redFluyeD { to { stroke-dashoffset: -16; } }

/* ---- Emblemas (visor) ---- */
.emb-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 1.8rem 0 1.2rem; }
.emb-tabs button { padding: .7rem 1.3rem; font: 800 .95rem 'Inter',sans-serif; color: #1A2530; background: #fff; border: 2px solid #D9E2EC; border-radius: 999px; cursor: pointer; transition: all .2s ease; }
.emb-tabs button:hover { transform: translateY(-3px); border-color: #E50914; }
.emb-tabs button[aria-selected="true"] { color: #fff; background: #E50914; border-color: #E50914; box-shadow: 0 10px 20px rgba(229,9,20,.3); }
.emb-visor { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: center; max-width: 880px; margin: 0 auto; padding: 2rem; background: #fff; border: 1px solid #E9ECEF; border-radius: 24px; box-shadow: 0 16px 34px rgba(0,0,0,.08); }
.emb-sig { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 55%, #FDEBEC 100%); box-shadow: inset 0 0 0 3px #fff, 0 0 0 4px #F3B7BB, 0 0 40px rgba(229,9,20,.25); }
.emb-sig::before { content: ""; position: absolute; inset: -16px; border-radius: 50%; border: 2px dashed rgba(229,9,20,.45); animation: dxGira 26s linear infinite; }
.emb-sig svg { width: 58%; height: auto; animation: dxLatido 3s ease-in-out infinite; }
.emb-info h3 { margin: 0 0 .5rem; font: 800 1.7rem 'Poppins','Inter',sans-serif; color: #1A2530; }
.emb-info p { margin: 0 0 .9rem; font-size: 1.02rem; line-height: 1.6; color: #4A5568; }
.emb-protege { padding: .9rem 1.1rem; font-size: .95rem !important; font-weight: 600; color: #7a1018 !important; background: #FDECEC; border-left: 5px solid #E50914; border-radius: 0 12px 12px 0; }
.emb-visor.anima .emb-info, .emb-visor.anima .emb-sig svg { animation: juvPanel .45s ease; }

/* ---- Zona de conflicto (DIH) ---- */
.dih-zona { position: relative; padding: 0 0 4rem; color: #fff; background: radial-gradient(900px 400px at 85% 0%, rgba(229,9,20,.28), transparent 70%), linear-gradient(180deg, #0a0c11, #240a0e 85%, #0a0c11); overflow: hidden; }
.dih-zona::before, .dih-zona::after { content: ""; display: block; height: 16px; background: repeating-linear-gradient(-45deg, #F5C400 0 18px, #111 18px 36px); }
.dih-zona::after { position: absolute; left: 0; right: 0; bottom: 0; }
.dih-cinta { overflow: hidden; margin: 0 0 3rem; padding: .7rem 0; background: #000; border-bottom: 1px solid rgba(245,196,0,.4); }
.dih-cinta .pista { display: flex; width: max-content; animation: dxCinta 40s linear infinite; }
.dih-cinta span { display: inline-flex; align-items: center; gap: 1.4rem; padding-right: 1.4rem; font: 800 .95rem 'Poppins','Inter',sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #F5C400; white-space: nowrap; } .dih-cinta span::after { content: "⚠"; color: #fff; }
.dih-zona .ln-kicker { color: #F5C400; } .dih-zona .ln-titulo { color: #fff; } .dih-zona .ln-sub { color: #cdd5df; }
.dih-zona .ln-titulo::after { background: linear-gradient(90deg, #F5C400, #E50914); }
.dg { position: relative; max-width: 780px; margin: 2.2rem auto 0; padding: 2rem 2.2rem; background: rgba(255,255,255,.06); border: 1px solid rgba(245,196,0,.45); border-radius: 24px; backdrop-filter: blur(6px); box-shadow: 0 0 40px rgba(229,9,20,.25); }
.dg-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #F5C400; }
.dg-barra { width: 150px; height: 8px; background: rgba(255,255,255,.15); border-radius: 8px; overflow: hidden; } .dg-barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #F5C400, #E50914); transition: width .5s ease; }
.dg-sit { min-height: 5.2em; margin: 0 0 1.3rem; font: 700 1.35rem/1.4 'Poppins','Inter',sans-serif; color: #fff; }
.dg-sit .em { display: inline-block; margin-right: .5rem; font-size: 1.8rem; }
.dg-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.dg-btn { padding: 1rem; font: 800 1.05rem 'Inter',sans-serif; color: #fff; border: 2px solid transparent; border-radius: 16px; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.dg-btn.si { background: #1E8E4F; } .dg-btn.no { background: #C62828; }
.dg-btn:hover:not([disabled]) { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,.4); }
.dg-btn[disabled] { opacity: .35; cursor: default; } .dg-btn.elegido { opacity: 1; border-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.2); }
.dg-fb { display: none; margin-top: 1.1rem; padding: 1rem 1.2rem; font-size: .98rem; line-height: 1.55; color: #fff; border-radius: 12px; border-left: 6px solid; } .dg-fb.ver { display: block; animation: juvPanel .4s ease; }
.dg-fb.ok { background: rgba(30,142,79,.25); border-color: #36C77A; } .dg-fb.mal { background: rgba(198,40,40,.28); border-color: #FF6B6B; }
.dg-pie { display: flex; justify-content: flex-end; margin-top: 1.1rem; }
.dg .juv-btn { background: #F5C400; border-color: #F5C400; color: #000; box-shadow: 0 0 20px rgba(245,196,0,.4); }
.dg-fin { text-align: center; } .dg-fin .gran { font-size: 4rem; animation: juvBrinco .8s ease; } .dg-fin h3 { margin: .3rem 0 .5rem; font: 800 1.7rem 'Poppins','Inter',sans-serif; color: #fff; } .dg-fin p { color: #cdd5df; line-height: 1.6; }
@media (max-width: 860px) { .rueda, .emb-visor { grid-template-columns: 1fr; } .emb-sig { max-width: 210px; margin: 0 auto; } .dg { padding: 1.4rem 1.2rem; } .dg-sit { font-size: 1.12rem; } }
@media (prefers-reduced-motion: reduce) { .rd-lazo.on, .rd-centro, .rueda-panel .gran, .emb-sig::before, .emb-sig svg, .dih-cinta .pista { animation: none !important; } }

/* ---- Archivo de Ginebra: expediente interactivo + reto ---- */
.gz-era { display: grid; grid-template-columns: repeat(7, 1fr); margin: 2rem 0 .4rem; text-align: center; }
.gz-era span { padding-bottom: .35rem; font: 800 .8rem 'Inter',sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ac); border-bottom: 3px solid color-mix(in srgb, var(--ac) 35%, transparent); margin: 0 .3rem; }
.gz-era .e49 { grid-column: span 4; } .gz-era .e77 { grid-column: span 2; } .gz-era .e05 { grid-column: span 1; }
.gz-track { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 1.6rem; }
.gz-track::before, .gz-track .fill { content: ""; position: absolute; left: calc(100% / 14); top: 27px; height: 6px; border-radius: 6px; }
.gz-track::before { right: calc(100% / 14); background: #DDE5ED; }
.gz-track .fill { width: 0; background: linear-gradient(90deg, var(--ac), #E50914); box-shadow: 0 0 12px rgba(229,9,20,.45); transition: width .6s cubic-bezier(.3,.8,.3,1); }
.gz-nodo { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 0; font: 700 .76rem 'Inter',sans-serif; color: #5a6878; background: none; border: 0; cursor: pointer; }
.gz-nodo b { display: grid; place-items: center; width: 60px; height: 60px; font: 800 1.1rem 'Poppins','Inter',sans-serif; color: var(--ac); background: #fff; border: 3px solid color-mix(in srgb, var(--ac) 45%, #fff); border-radius: 50%; box-shadow: 0 6px 14px rgba(0,0,0,.1); transition: all .3s cubic-bezier(.3,1.5,.5,1); }
.gz-nodo:hover b { transform: translateY(-4px) scale(1.08); border-color: var(--ac); }
.gz-nodo.hecho b { background: color-mix(in srgb, var(--ac) 14%, #fff); border-color: var(--ac); }
.gz-nodo.on b { color: #fff; background: #E50914; border-color: #E50914; transform: scale(1.22); box-shadow: 0 0 0 7px rgba(229,9,20,.18), 0 10px 22px rgba(229,9,20,.4); }
.gz-nodo.on { color: #E50914; }
.gz-ficha { position: relative; display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: center; padding: 2rem 2.2rem; overflow: hidden; background: #fff; border: 1px solid #E9ECEF; border-top: 6px solid #E50914; border-radius: 24px; box-shadow: 0 18px 38px rgba(0,0,0,.09); }
.gz-ficha::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(229,9,20,.1), transparent 70%); }
.gz-sello { display: grid; place-items: center; align-content: center; gap: .1rem; width: 190px; aspect-ratio: 1; margin: 0 auto; text-align: center; color: #E50914; border: 4px double #E50914; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 9px, rgba(229,9,20,.05) 9px 10px); }
.gz-sello .n { font: 800 3.3rem/1 'Poppins','Inter',sans-serif; } .gz-sello small { font: 800 .72rem 'Inter',sans-serif; letter-spacing: .12em; text-transform: uppercase; } .gz-sello .y { font: 800 1.15rem 'Poppins','Inter',sans-serif; color: var(--ac-osc); }
.gz-ficha.anima .gz-sello { animation: gzSello .6s cubic-bezier(.3,1.4,.5,1); } .gz-ficha.anima .gz-info { animation: juvPanel .5s ease; }
.gz-info { position: relative; z-index: 1; } .gz-info .tag { display: inline-block; padding: .3rem .85rem; font: 800 .72rem 'Inter',sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--ac); border-radius: 999px; }
.gz-info h3 { margin: .6rem 0 .5rem; font: 800 1.6rem 'Poppins','Inter',sans-serif; color: #1A2530; } .gz-info p { margin: 0 0 1rem; font-size: 1.02rem; line-height: 1.6; color: #4A5568; }
.gz-escena { display: flex; gap: .7rem; } .gz-escena span { display: grid; place-items: center; width: 58px; height: 58px; font-size: 1.9rem; background: var(--ac-suave); border-radius: 16px; animation: juvFlota 3.2s ease-in-out infinite; } .gz-escena span:nth-child(2) { animation-delay: -1s; } .gz-escena span:nth-child(3) { animation-delay: -2s; }
.gz-nav { display: flex; justify-content: center; gap: .8rem; margin-top: 1.1rem; }
.gz-reto { max-width: 800px; margin: 3rem auto 0; padding: 2rem 2.2rem; background: linear-gradient(145deg, #0f1b27, #1d2f44); border-radius: 24px; color: #fff; box-shadow: 0 18px 40px rgba(15,27,39,.35); }
.gz-reto h3 { margin: 0 0 .3rem; font: 800 1.5rem 'Poppins','Inter',sans-serif; color: #fff; } .gz-reto .sub { margin: 0 0 1.2rem; color: #b8c6d6; }
.gz-top { display: flex; justify-content: space-between; margin-bottom: .8rem; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8fb2d6; }
.gz-q { min-height: 3.6em; margin: 0 0 1.1rem; font: 700 1.2rem/1.45 'Poppins','Inter',sans-serif; } .gz-q .em { margin-right: .5rem; font-size: 1.7rem; }
.gz-ops { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: .6rem; }
.gz-op { padding: .85rem .4rem; font: 800 1rem 'Poppins','Inter',sans-serif; color: #fff; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.2); border-radius: 14px; cursor: pointer; transition: all .2s ease; }
.gz-op:hover:not([disabled]) { background: rgba(255,255,255,.18); transform: translateY(-4px); } .gz-op[disabled] { cursor: default; opacity: .5; }
.gz-op.ok { opacity: 1; background: #1E8E4F; border-color: #36C77A; } .gz-op.mal { opacity: 1; background: #C62828; border-color: #FF6B6B; }
.gz-fb { display: none; margin-top: 1rem; padding: .9rem 1.1rem; line-height: 1.55; background: rgba(255,255,255,.09); border-left: 5px solid #8fb2d6; border-radius: 0 12px 12px 0; } .gz-fb.ver { display: block; animation: juvPanel .4s ease; }
.gz-pie { display: flex; justify-content: flex-end; margin-top: 1rem; } .gz-fin { text-align: center; } .gz-fin .gran { font-size: 3.6rem; animation: juvBrinco .8s ease; }
@keyframes gzSello { 0% { transform: scale(2.4) rotate(-28deg); opacity: 0; } 60% { transform: scale(.92) rotate(4deg); opacity: 1; } 100% { transform: none; } }
@media (max-width: 860px) { .gz-ficha { grid-template-columns: 1fr; padding: 1.5rem 1.2rem; } .gz-sello { width: 150px; } .gz-nodo b { width: 40px; height: 40px; font-size: .85rem; } .gz-track::before, .gz-track .fill { top: 17px; } .gz-nodo { font-size: .6rem; } .gz-era span { font-size: .62rem; margin: 0 .1rem; } .gz-reto { padding: 1.4rem 1.2rem; } }
@media (prefers-reduced-motion: reduce) { .gz-escena span, .gz-ficha.anima .gz-sello, .gz-fin .gran { animation: none !important; } }

/* Logos oficiales de los principios */
.rd-nodo .ico { transform-box: fill-box; transform-origin: center; transition: transform .3s cubic-bezier(.3,1.5,.5,1); filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); }
.rd-nodo circle { fill: #fff; stroke: #fff; stroke-width: 3; transform: none !important; filter: none; }
.rd-nodo:hover .ico, .rd-nodo:focus-visible .ico { transform: scale(1.12); }
.rd-nodo.on .ico { transform: scale(1.28); filter: drop-shadow(0 0 14px rgba(229,9,20,.6)); }
.rd-nodo.on circle { fill: #fff; stroke: #E50914; stroke-width: 5; }
.rueda-panel .gran img { display: block; width: 92px; height: 92px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.2)); }
.pgi-card .letra.con-img { padding: 0; overflow: hidden; background: none !important; box-shadow: none; }
.pgi-card .letra.con-img img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* El resaltado toma el color del principio activo (--pc lo define el JS) */
#ruedaPrincipios { --pc: #E50914; }
.rd-lazo.on { stroke: var(--pc); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--pc) 65%, transparent)); }
.rd-nodo.on .ico { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--pc) 70%, transparent)); }
.rd-nodo.on circle { stroke: var(--pc); }
.rd-nodo.on .nm { fill: color-mix(in srgb, var(--pc) 82%, #000); }
.rueda-panel { border-top-color: var(--pc); transition: border-color .4s ease; }
.rueda-panel .cat { background: var(--pc); transition: background .4s ease; }
.rueda-panel h3 { color: color-mix(in srgb, var(--pc) 55%, #1A2530); transition: color .4s ease; }
.rueda-panel .gran img { filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--pc) 45%, transparent)); }
.rueda-nav .pt i.on { background: var(--pc); }
.rueda-nav .juv-btn:not(.sec) { background: var(--pc); border-color: var(--pc); box-shadow: 0 8px 18px color-mix(in srgb, var(--pc) 40%, transparent); }
.rueda-nav .juv-btn.sec { color: color-mix(in srgb, var(--pc) 70%, #000); border-color: var(--pc); }
.rd-lazo.on, .rd-nodo .nm { transition: stroke .3s ease, fill .3s ease; }
.rd-nodo.on .ico { transform: scale(1.16) translateY(-3px); } .rd-nodo.on .nm { font-weight: 900; }