/* Vista dorada: hilos de oro, fotos redondas y un gran árbol de fondo.
   Los colores de la escena los interpola dorado.js según la hora del día (barra del sol). */
:root{
  --cielo1:#4a4f93; --cielo2:#f6a35a; --nube:#e9a98f; --mont1:#6b5a8a; --mont2:#53497a; --mont3:#3b4a5e; --hier1:#4f7a36; --hier2:#355526;
  --madera:#4a2f1a; --madera2:#8a5a30; --hoja1:#5a8f32; --hoja2:#7aa83a; --hoja3:#3d6e2a; --hoja4:#b5c940; --hoja5:#e9b73a;
  --casa:#d9b58f; --techo:#8a3d36; --puerta:#4b2e22; --vent:#ffd88a;
  --luz:0; --v:7; --oro:#e8b64c; --oro2:#fff0b0;
}
body.dorado #vista{background:none}
#vista::after{box-shadow:inset 0 0 140px rgba(20,10,40,.35)}
#escena{position:absolute;inset:0;width:100%;height:100%;z-index:0;--v:7}
#lienzo{z-index:1}
#ambiente{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
#estrellas circle{fill:#fff;animation:titila 3s ease-in-out infinite}
.rayos{animation:gira 40s linear infinite}
.nube ellipse{fill:var(--nube);opacity:.8}
.nube{animation:deriva var(--v) linear infinite;animation-delay:var(--d)}
.paj{fill:none;stroke:#2d2a3a;stroke-width:2;stroke-linecap:round;animation:vuela var(--v) linear infinite,aletea .5s ease-in-out infinite alternate;animation-delay:var(--d),0s}
.humo circle{fill:#fff;opacity:0;animation:sube 6s ease-out infinite}
.vent{fill:var(--vent);filter:drop-shadow(0 0 calc(var(--luz) * 9px) rgba(255,211,107,var(--luz)))}
#tronco path{fill:url(#corteza)}
#tronco .reflejo{fill:none;stroke:var(--madera2);stroke-width:4;stroke-linecap:round;opacity:.4}
.hojaS{transform-box:fill-box;transform-origin:0 50%;animation:mece var(--dur,4s) ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
#chispas circle{fill:#ffe08a;filter:drop-shadow(0 0 5px #ffcf5a);animation:titila var(--t,3s) ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes mece{from{transform:rotate(calc(var(--v) * -1deg))}to{transform:rotate(calc(var(--v) * 1deg))}}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes deriva{from{transform:translateX(-400px)}to{transform:translateX(1800px)}}
@keyframes vuela{from{transform:translate(-80px,var(--y))}to{transform:translate(1700px,var(--y))}}
@keyframes aletea{from{d:path("M0 0q7-9 14 0q7-9 14 0")}to{d:path("M0 0q7 3 14 0q7 3 14 0")}}
@keyframes sube{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:.75}100%{opacity:0;transform:translate(34px,-80px) scale(2.6)}}
@keyframes titila{50%{opacity:.25}}

/* ambiente */
.caida,.volando{position:absolute;opacity:.8;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M1 7C7 0 17 0 23 7 17 14 7 14 1 7Z' fill='%2378b04a'/%3E%3Cpath d='M2 7H22' stroke='%233f7a2c' stroke-width='1'/%3E%3C/svg%3E") center/contain no-repeat}
.caida{top:-30px;left:var(--x);width:22px;height:13px;animation:cae var(--t) linear infinite;animation-delay:var(--dl);filter:hue-rotate(var(--h))}
.volando{width:24px;height:14px;filter:hue-rotate(var(--h));animation:soplo var(--t) ease-out forwards}
.luci{position:absolute;left:var(--x);top:var(--y);width:6px;height:6px;border-radius:50%;background:#ffe9a0;box-shadow:0 0 12px 4px rgba(255,214,110,.75);animation:luz var(--t) ease-in-out infinite;animation-delay:var(--dl)}
.fugaz{position:absolute;width:150px;height:2px;border-radius:2px;background:linear-gradient(90deg,#fff,rgba(255,255,255,0));box-shadow:0 0 10px 1px rgba(255,255,255,.8);transform-origin:0 50%;animation:fug 1.4s ease-out forwards}
.pajaro{position:absolute;animation:vuelo var(--t) linear forwards}
.pajaro path{fill:none;stroke:#2d2a3a;stroke-width:2.2;stroke-linecap:round;animation:aletea .4s ease-in-out infinite alternate}
@keyframes cae{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(60px,28vh) rotate(110deg)}50%{transform:translate(-30px,56vh) rotate(220deg)}75%{transform:translate(70px,84vh) rotate(330deg)}100%{transform:translate(0,112vh) rotate(430deg)}}
@keyframes luz{0%,100%{transform:translate(0,0);opacity:.1}25%{transform:translate(30px,-24px);opacity:1}50%{transform:translate(-20px,-50px);opacity:.3}75%{transform:translate(26px,-20px);opacity:1}}
@keyframes fug{0%{opacity:0;transform:translate(0,0) rotate(-28deg)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(-28deg)}}
@keyframes vuelo{0%{transform:translate(0,0)}25%{transform:translate(160px,-40px)}50%{transform:translate(340px,-10px)}75%{transform:translate(520px,-70px)}100%{transform:translate(760px,-130px);opacity:0}}
@keyframes soplo{0%{transform:translate(0,0) rotate(0);opacity:.9}30%{transform:translate(calc(var(--dx) * .4),calc(var(--dy) * .2 - 40px)) rotate(200deg)}70%{transform:translate(calc(var(--dx) * .8),calc(var(--dy) * .7)) rotate(480deg);opacity:.8}100%{transform:translate(var(--dx),var(--dy)) rotate(720deg);opacity:0}}

/* ---------- Hilos de oro ---------- */
#lineas path.hilo{fill:none;stroke:#f2c25e;stroke-width:2.8;stroke-linecap:round;opacity:1;filter:drop-shadow(0 0 4px rgba(255,196,90,.95)) drop-shadow(0 0 10px rgba(255,170,60,.5))}
#lineas path.chispa{fill:none;stroke:#fffbe6;stroke-width:2;stroke-linecap:round;opacity:.95;stroke-dasharray:5 110;animation:corre 3.6s linear infinite}
#lineas path.hilo.ruta{stroke:#ffd877;stroke-width:3.6}
@keyframes corre{to{stroke-dashoffset:-115}}

/* ---------- Personas ---------- */
.cel{position:absolute;left:0;top:0;width:124px;display:flex;flex-direction:column;align-items:center;cursor:pointer;user-select:none;outline:none}
.foto{position:relative;display:block;width:72px;height:72px;border-radius:50%;padding:3.5px;flex:none;
  background:conic-gradient(from 210deg,#fff3b8,#e3a93a,#9a6a1c,#f7d774,#e3a93a,#fff3b8);
  box-shadow:0 0 0 1px rgba(60,35,5,.6),0 0 16px 3px rgba(255,192,80,.6),0 10px 18px -6px rgba(0,0,0,.65);transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.foto .fi{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 35% 30%,#7a6338,#2a2014)}
.foto .fi svg{width:100%;height:100%;display:block}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.cel:hover .foto{transform:scale(1.07)}
.cel.sel .foto{animation:halo 1.7s ease-in-out infinite}
.cel.fall .foto{background:conic-gradient(from 210deg,#e9e3d2,#a69d88,#6c6452,#cfc6ae,#a69d88,#e9e3d2);box-shadow:0 0 0 1px rgba(40,30,15,.6),0 0 12px 2px rgba(200,190,160,.45),0 10px 18px -6px rgba(0,0,0,.65)}
.cel.fall .fi{filter:grayscale(.75) brightness(.9)}
.cel.ex .foto{opacity:.82;background:conic-gradient(from 210deg,#d9c79a,#b89048,#7d5f2c,#d9c79a)}
.cel.raiz .foto{width:92px;height:92px;padding:4px}
.cel.raiz .placa{margin-top:7px}
.cel.raiz .nm{font-size:.86rem}
.grupo{position:absolute;right:20px;top:52px;display:flex;align-items:center;gap:3px;padding:3px 7px 3px 6px;border-radius:999px;border:1.5px solid #e3b24d;background:linear-gradient(180deg,#2d2113,#150e06);color:#ffd877;font-size:.66rem;font-weight:700;box-shadow:0 0 10px rgba(255,190,80,.55),0 3px 6px rgba(0,0,0,.5);transition:transform .25s cubic-bezier(.3,1.6,.5,1),background .2s}
.cel.raiz .grupo{display:none}
.cel.par .grupo{display:none}
.grupo:hover{transform:scale(1.15)}
.cel.abierta .grupo{background:linear-gradient(180deg,#ffe69a,#e0a73a);color:#3a2408;border-color:#fff3c4}
.placa{margin-top:6px;width:124px;padding:5px 6px 6px;border-radius:12px;text-align:center;color:#fff4dc;
  background:linear-gradient(180deg,rgba(46,32,16,.9),rgba(16,11,5,.92));border:1px solid #d9a840;
  box-shadow:0 0 12px rgba(255,190,80,.32),inset 0 0 8px rgba(255,200,100,.12)}
.cel.sel .placa{box-shadow:0 0 18px 3px rgba(255,205,100,.7),inset 0 0 8px rgba(255,200,100,.2)}
.cel.ex .placa{border-style:dashed;opacity:.88}
.tag{height:12px;font-size:.55rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#f3c968;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.placa .nm{font-family:var(--serif);font-weight:600;font-size:.76rem;line-height:14px;height:28px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.placa .yr{font-size:.65rem;color:#e6d4aa;height:14px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* anillo de unión entre parejas */
.uni{position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#ffd877;font-size:1rem;
  background:radial-gradient(circle at 35% 30%,#3a2a14,#120c05);border:2px solid #e8b64c;box-shadow:0 0 14px 3px rgba(255,190,80,.65),0 4px 8px rgba(0,0,0,.5);z-index:2;pointer-events:none}
.uni::before{content:"";position:absolute;top:50%;left:-46px;right:-46px;height:2px;margin-top:-1px;background:linear-gradient(90deg,transparent,#f2c25e 25%,#f2c25e 75%,transparent);box-shadow:0 0 8px rgba(255,190,80,.9);z-index:-1}
.uni.ex{border-style:dashed;color:#bfae86;font-size:.58rem;font-weight:700;text-transform:uppercase;box-shadow:0 0 8px rgba(255,190,80,.3),0 4px 8px rgba(0,0,0,.5)}
.uni.ex::before{background:linear-gradient(90deg,transparent,#a58b50 25%,#a58b50 75%,transparent);box-shadow:none;opacity:.7}
.uni svg{width:20px;height:20px}
@keyframes halo{0%,100%{box-shadow:0 0 0 1px rgba(60,35,5,.6),0 0 16px 3px rgba(255,192,80,.65),0 0 0 8px rgba(255,210,110,.25)}50%{box-shadow:0 0 0 1px rgba(60,35,5,.6),0 0 24px 7px rgba(255,205,100,.9),0 0 0 15px rgba(255,210,110,.1)}}

/* ---------- Letrero, estadísticas y barra del sol ---------- */
#titulo{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:7;display:flex;align-items:flex-end;pointer-events:none}
#titulo .hj{width:72px;height:54px;margin-bottom:6px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
#titulo .madera{position:relative;padding:8px 34px 9px;text-align:center;border-radius:50px/38px;color:#ffe9a8;
  background:linear-gradient(180deg,#9a6530,#5d3919 52%,#80501f);border:2px solid #f0c25a;
  box-shadow:0 0 0 3px #2f1c0a,0 0 26px rgba(255,190,80,.6),inset 0 2px 8px rgba(255,225,150,.4),inset 0 -6px 12px rgba(0,0,0,.35)}
#titulo small{display:block;font-family:var(--serif);font-size:.82rem;letter-spacing:.3em;text-transform:uppercase;line-height:1;color:#fbe08a}
#titulo h2{margin:2px 0 1px;font-family:var(--serif);font-weight:700;font-size:1.7rem;line-height:1.05;white-space:nowrap;
  background:linear-gradient(180deg,#fff6c8,#f0c25a 55%,#c4861f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 1px rgba(0,0,0,.65))}
#titulo span{display:block;font-family:var(--serif);font-size:.82rem;color:#f6dc92;letter-spacing:.04em;border-top:1px solid rgba(240,194,90,.55);padding-top:3px;margin-top:2px}
#stats{position:absolute;right:14px;top:12px;z-index:6;padding:10px 14px;border-radius:14px;color:#fff3d6;font-size:.78rem;min-width:170px;
  background:linear-gradient(180deg,rgba(40,28,14,.82),rgba(16,11,5,.85));border:1px solid #d9a840;box-shadow:0 0 16px rgba(255,190,80,.3);backdrop-filter:blur(6px)}
#stats div{display:flex;align-items:center;gap:9px;padding:2.5px 0}
#stats i{font-style:normal;width:20px;text-align:center;color:#f3c968;font-size:.95rem}
#stats b{font-family:var(--serif);font-size:.95rem;color:#ffd877;min-width:22px}
.hora{position:absolute;left:14px;bottom:14px;z-index:8;display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(8px);box-shadow:0 10px 28px -14px rgba(0,0,0,.6);width:min(360px,calc(50% - 250px));min-width:270px;touch-action:none}
.hora svg{width:20px;height:20px;flex:none;color:#f0a21a} .hora svg.lu{color:#8fa0d8}
.hora input{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:12px;border-radius:999px;outline:none;cursor:pointer;touch-action:none;
  background:linear-gradient(90deg,#8fd0f0 0%,#fbe3a0 25%,#ff9a5c 50%,#4a3f8f 72%,#0b1030 100%);box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}
.hora input::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border-radius:50%;border:0;background:var(--thumb) center/contain no-repeat;filter:drop-shadow(0 2px 5px rgba(0,0,0,.45));cursor:grab}
.hora input::-moz-range-thumb{width:34px;height:34px;border-radius:50%;border:0;background:var(--thumb) center/contain no-repeat;cursor:grab}
.hora button{flex:none;border:1px solid var(--line);background:var(--white);border-radius:999px;padding:6px 10px;font-size:.74rem;font-weight:500;white-space:nowrap}
.hora button:hover{border-color:var(--gold);color:var(--gold)}
.zoom{bottom:14px}
.ayuda{bottom:112px}
#ruta{max-width:calc(100% - 420px)}
.leyenda{display:none}
body.dorado .zoom{right:14px}
#panel:not(.cerrado) ~ .zoom{right:calc(var(--panel-w) + 24px)}
#panel:not(.cerrado) ~ #stats{right:calc(var(--panel-w) + 24px)}
@media (max-width:1100px){#stats{display:none}.hora{width:300px;min-width:0}}
@media (max-width:820px){
  .hora{left:50%;transform:translateX(-50%);bottom:8px;width:calc(100% - 24px);padding:6px 12px}
  .hora button span{display:none}
  #titulo{bottom:62px}
  #titulo h2{font-size:1.2rem} #titulo small,#titulo span{font-size:.64rem} #titulo .hj{width:46px;height:34px} #titulo .madera{padding:5px 20px 6px}
  .zoom{bottom:150px!important}
  #panel:not(.cerrado) ~ .zoom{right:12px}
  #ruta{max-width:calc(100% - 28px)}
}
@media (orientation:landscape) and (max-height:520px){
  #titulo{display:none}
  .hora{bottom:8px;padding:4px 12px;left:14px;transform:none;width:300px}
  .hora input{height:10px}.hora svg{width:18px;height:18px}
  .zoom{bottom:10px!important}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* fotos pequeñas (panel, buscador) */
#panel,#resultados{--c:#d9a840}
.foto.xs{width:34px;height:34px;padding:2px;flex:none;box-shadow:0 0 6px rgba(255,192,80,.5)}
.foto.g{width:76px;height:76px;padding:3.5px}
.item .foto{margin:0}
#resultados button .foto{margin-right:0}
.p-head .foto{flex:none}
.accion{background:linear-gradient(180deg,#f3cf74,#d99a2b);color:#3a2408}

/* =====================================================================
   RECURSOS GRÁFICOS (carpeta assets/): árbol, aros, placas, anillos, cinta, madera
   ===================================================================== */
/* árbol de fondo: grande, fijo, se mece con el viento */
#arbolImg{position:absolute;left:50%;bottom:-1.5%;height:104%;width:auto;z-index:0;pointer-events:none;user-select:none;transform:translateX(-50%);transform-origin:50% 96%;
  animation:balanceo 6.5s ease-in-out infinite alternate;filter:drop-shadow(0 0 8px rgba(255,190,80,.15))}
@keyframes balanceo{from{transform:translateX(-50%) rotate(calc(var(--v) * -.04deg))}to{transform:translateX(-50%) rotate(calc(var(--v) * .04deg))}}
#lienzo{z-index:1}

/* aros de fotografía */
.cel .foto,.foto{width:72px;height:72px;padding:0;border-radius:0;background:none;box-shadow:none;position:relative;overflow:visible}
.foto .fi{position:absolute;left:50%;top:50%;width:92%;height:92%;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;background:radial-gradient(circle at 35% 30%,#7a6338,#2a2014)}
.foto .marco{position:absolute;left:50%;top:50%;width:148%;height:148%;max-width:none;transform:translate(-50%,-50%);pointer-events:none;user-select:none;-webkit-user-drag:none}
.foto .marco.brillo{opacity:0;transition:opacity .3s}
.cel:hover .foto .marco.brillo{opacity:.55}
.cel.sel .foto .marco.brillo{opacity:1;animation:pulso 1.8s ease-in-out infinite}
.cel.sel .foto{animation:none}
.cel.raiz .foto{width:92px;height:92px;padding:0}
.cel.fall .foto{background:none;box-shadow:none}
.cel.ex .foto{opacity:.9;background:none}
.foto.xs{width:34px;height:34px;padding:0;box-shadow:none;flex:none}
.foto.xs .marco{width:150%;height:150%}
.foto.g{width:76px;height:76px;padding:0}
@keyframes pulso{0%,100%{filter:brightness(1);transform:translate(-50%,-50%) scale(1)}50%{filter:brightness(1.35);transform:translate(-50%,-50%) scale(1.06)}}

/* placa de nombre */
.cel{width:136px}
.placa{width:136px;margin-top:6px;padding:0;border-style:solid;border-color:transparent;border-width:8px 14px;border-radius:0;background:none;box-shadow:none;
  border-image:url(assets/placa.png) 30 fill / 8px 14px / 0 stretch;filter:drop-shadow(0 0 7px rgba(255,190,80,.35))}
.cel.sel .placa{filter:drop-shadow(0 0 12px rgba(255,205,100,.85));box-shadow:none}
.cel.ex .placa{border-style:solid;filter:drop-shadow(0 0 4px rgba(255,190,80,.2)) saturate(.7)}
.tag{font-size:.54rem}
.grupo{right:26px;top:44px;width:30px;height:30px;padding:0;gap:0;border:0;border-radius:50%;background:url(assets/grupo.png) center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 0 6px rgba(255,190,80,.75))}
.grupo svg{display:none}
.grupo b{position:absolute;right:-7px;bottom:-5px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;display:grid;place-items:center;font-size:.58rem;font-weight:700;color:#2b1a05;background:linear-gradient(180deg,#ffeaa0,#e3a93a);box-shadow:0 1px 3px rgba(0,0,0,.55)}
.cel.abierta .grupo{background:url(assets/grupo.png) center/contain no-repeat;filter:brightness(1.3) drop-shadow(0 0 9px rgba(255,210,110,1))}
.cel.abierta .grupo b{background:#fff}

/* anillo de unión */
.uni{box-shadow:0 0 14px 3px rgba(255,190,80,.6),0 4px 8px rgba(0,0,0,.5)}
.uni img{width:20px;height:18px;object-fit:contain;filter:drop-shadow(0 0 3px rgba(255,200,90,.8))}
.uni.anillos{width:52px;height:34px;margin-left:-9px;border:0;border-radius:0;background:url(assets/anillos.png) center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 0 8px rgba(255,190,80,.8))}

/* letrero: óvalo de madera con hojas y cinta dorada */
#titulo{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:min(470px,calc(100% - 20px));z-index:7;display:block;pointer-events:none}
#titulo .oval{position:relative;width:100%;aspect-ratio:462/135;background:url(assets/oval.png) center/100% 100% no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 16% 1%;text-align:center;filter:drop-shadow(0 8px 10px rgba(0,0,0,.55))}
#titulo small{margin:0;font-family:var(--serif);font-size:.78rem;letter-spacing:.34em;text-transform:uppercase;line-height:1;color:#fbe08a;text-shadow:0 1px 2px rgba(0,0,0,.7)}
#titulo h2{margin:3px 0 0;font-family:var(--serif);font-weight:700;font-size:1.6rem;line-height:1.05;white-space:nowrap}
#titulo .cinta{position:absolute;left:50%;bottom:-24px;width:58%;aspect-ratio:248/72;transform:translateX(-50%);background:url(assets/cinta.png) center/100% 100% no-repeat;display:grid;place-items:center;filter:drop-shadow(0 4px 5px rgba(0,0,0,.5))}
#titulo .cinta span{margin:0;padding:0 14%;border:0;font-family:var(--serif);font-weight:600;font-size:.72rem;letter-spacing:.02em;color:#4a2d06;text-shadow:0 1px 0 rgba(255,240,180,.7);white-space:nowrap;display:block}

/* estadísticas y barra del sol sobre placas de los recursos */
#stats{padding:0;min-width:168px;border-style:solid;border-color:transparent;border-width:14px 24px;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;
  border-image:url(assets/placa.png) 30 fill / 14px 24px / 0 stretch;filter:drop-shadow(0 0 10px rgba(255,190,80,.35))}
#stats::after{content:"";position:absolute;right:-8px;top:-34px;width:92px;height:52px;background:url(assets/rama.png) center/contain no-repeat;transform:scaleX(-1) rotate(-8deg);pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.hora{padding:0;border-style:solid;border-color:transparent;border-width:17px 30px;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;gap:9px;
  border-image:url(assets/madera.png) 30 fill / 17px 30px / 0 stretch;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5));width:min(430px,calc(50% - 250px));min-width:330px}
.hora svg{color:#ffd45a;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))} .hora svg.lu{color:#e4e9ff}
.hora input{height:11px}
.hora button{background:linear-gradient(180deg,#fff2c0,#e3b24a);color:#3a2408;border:1px solid #8a5a1a;padding:4px 9px;font-weight:600}
.hora button:hover{color:#000;border-color:#3a2408}
.ayuda{bottom:190px}
/* panel: rama decorativa */
#panel::before{content:"";display:block;height:44px;margin:-12px 0 -26px;background:url(assets/rama.png) left center/auto 100% no-repeat;opacity:.9;pointer-events:none}
@media (max-width:1280px){.hora{left:50%;transform:translateX(-50%);bottom:170px;width:min(430px,calc(100% - 20px))}}
@media (max-width:1100px){#stats{display:none}}
@media (max-width:820px){
  #titulo{bottom:84px;width:min(340px,calc(100% - 20px))}
  #titulo h2{font-size:1.15rem} #titulo small{font-size:.6rem} #titulo .cinta span{font-size:.6rem}
  .hora{bottom:4px;width:calc(100% - 12px);min-width:0;border-width:13px 22px}
  .zoom{bottom:190px!important}
  .ayuda{display:none}
}
@media (orientation:landscape) and (max-height:520px){
  #titulo{display:none}
  .hora{bottom:4px;left:14px;transform:none;width:340px;min-width:0}
}

/* =====================  ¿Quién eres?  ===================== */
.quien{position:fixed;inset:0;z-index:60;display:none;place-items:center;padding:16px;background:rgba(12,7,22,.66);backdrop-filter:blur(7px)}
.quien.on{display:grid;animation:aparece .35s ease}
@keyframes aparece{from{opacity:0}to{opacity:1}}
.quien .caja{width:min(540px,100%);max-height:92vh;overflow:auto;text-align:center;color:#fff3da;padding:0;border-style:solid;border-color:transparent;border-width:26px 34px;border-radius:0;
  border-image:url(assets/placa.png) 30 fill / 26px 34px / 0 stretch;filter:drop-shadow(0 0 26px rgba(255,190,80,.5))}
.quien h2{margin:0 0 6px;font-family:var(--serif);font-size:2rem;line-height:1.1;background:linear-gradient(180deg,#fff6c8,#f0c25a 55%,#c4861f);-webkit-background-clip:text;background-clip:text;color:transparent}
.quien p{margin:0 0 14px;font-size:.88rem;color:#ecdcb8}
.quien input{width:100%;padding:13px 18px;border-radius:999px;border:1.5px solid #d9a840;background:rgba(0,0,0,.45);color:#fff3da;font-size:1.05rem;outline:none;text-align:center}
.quien input:focus{box-shadow:0 0 0 3px rgba(255,200,90,.35)}
.quien input::placeholder{color:#a99a78}
#quienRes{margin:12px 0 4px;display:flex;flex-direction:column;gap:6px;text-align:left;max-height:34vh;overflow:auto}
#quienRes button{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:14px;border:1px solid rgba(217,168,64,.55);background:rgba(255,235,180,.06);color:#fff3da;text-align:left;width:100%}
#quienRes button:hover{background:rgba(255,215,120,.2);border-color:#f3c968}
#quienRes b{display:block;font-size:.92rem} #quienRes small{color:#e0cb9a;font-size:.74rem}
.quien-ayuda{margin:6px 0!important;text-align:center;color:#cdb988!important;font-size:.82rem!important}
#quienOmitir{margin-top:10px;background:none;border:0;color:#d9c48f;font-size:.8rem;text-decoration:underline;cursor:pointer}
.quien-btn{border-color:#d9a840!important;background:linear-gradient(180deg,#fff2c0,#e8b64c)!important;color:#3a2408!important;font-weight:600!important}
.quien-btn[hidden]{display:none}

/* tarjeta "Mi familia" */
#miFamilia{position:absolute;left:14px;top:54px;z-index:6;width:300px;max-height:calc(100% - 250px);overflow:auto;color:#fff3da;padding:0;border-style:solid;border-color:transparent;border-width:20px 26px;border-radius:0;
  border-image:url(assets/placa.png) 30 fill / 20px 26px / 0 stretch;filter:drop-shadow(0 0 12px rgba(255,190,80,.4));transition:opacity .25s,transform .25s}
#miFamilia.cerrado{opacity:0;pointer-events:none;transform:translateX(-14px)}
.mf-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px}
.mf-head b{font-family:var(--serif);font-size:1.25rem;color:#ffd877;display:block;line-height:1.1}
.mf-head small{color:#e0cb9a;font-size:.74rem}
.mf-head button{background:none;border:0;color:#f3c968;font-size:1.4rem;line-height:1;padding:0 2px}
#miFamilia h4{margin:12px 0 5px;font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;color:#f3c968;font-weight:600}
#miFamilia h4 i{font-style:normal;background:#f3c968;color:#2b1a05;border-radius:8px;padding:0 6px;margin-left:4px;letter-spacing:0}
.mf-lista{display:flex;flex-direction:column;gap:4px}
.mf-p{display:flex;align-items:center;gap:10px;width:100%;padding:4px 8px 4px 4px;border-radius:12px;border:1px solid rgba(217,168,64,.35);background:rgba(255,235,180,.05);color:#fff3da;text-align:left}
.mf-p:hover{background:rgba(255,215,120,.2);border-color:#f3c968}
.mf-p b{display:block;font-size:.78rem;line-height:1.15;font-weight:600} .mf-p small{color:#f3c968;font-size:.66rem;text-transform:uppercase;letter-spacing:.06em}
.cel.soyyo .tag{color:#fff;text-shadow:0 0 6px #ffd877}
@media (max-width:1100px){#miFamilia{width:260px}}
@media (max-width:820px){#miFamilia{left:8px;right:8px;width:auto;top:96px;max-height:52%}.quien h2{font-size:1.6rem}}

/* =====================================================================
   El árbol manda: todo vive en las coordenadas de la imagen del árbol (1004 x 963)
   ===================================================================== */
#arbolImg{position:absolute;left:0;top:0;width:1270px;height:1024px;max-width:none;bottom:auto;transform:none;animation:none;z-index:auto;pointer-events:none}
#lienzo{width:1270px;height:1024px}
/* tamaños en unidades del árbol (la cámara los agranda) */
.cel{width:100px}
.cel .foto{width:58px;height:58px}
.cel.raiz{width:164px;flex-direction:row;align-items:center;gap:4px}
.cel.raiz.izq{flex-direction:row-reverse}
.cel.raiz .foto{width:64px;height:64px}
.cel.raiz .placa{margin-top:0;width:96px}
.cel.raiz .nm{font-size:.62rem}
.placa{width:100px;margin-top:4px;border-width:6px 10px;border-image:url(assets/placa.png) 30 fill / 6px 10px / 0 stretch;filter:drop-shadow(0 0 4px rgba(255,190,80,.4))}
.cel.sel .placa{filter:drop-shadow(0 0 7px rgba(255,205,100,.9))}
.tag{height:9px;font-size:.46rem;letter-spacing:.08em}
.placa .nm{font-size:.6rem;line-height:11px;height:22px}
.placa .yr{font-size:.52rem;height:11px;margin-top:0}
.grupo{right:17px;top:38px;width:22px;height:22px}
.grupo b{right:-5px;bottom:-4px;min-width:11px;height:11px;font-size:.46rem;padding:0 2px}
.uni{width:24px;height:24px}
.uni img{width:14px;height:13px}
.uni.anillos{width:38px;height:25px;margin-left:-7px}
.uni.ex{font-size:.5rem}
.uni::before{left:-34px;right:-34px}
#lineas path.hilo{stroke-width:2.2}
#lineas path.hilo.ruta{stroke-width:3}
#lineas path.chispa{stroke-width:1.6;stroke-dasharray:4 90}
.cel.raiz .foto .marco{width:148%;height:148%}

#volver{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:7;padding:8px 18px;border-radius:999px;border:1px solid #8a5a1a;font-size:.84rem;box-shadow:0 6px 16px -6px rgba(0,0,0,.6)}
#volver[hidden]{display:none}

/* corazón rojo que palpita en las parejas */
.uni .lat{width:15px;height:15px;display:block;filter:drop-shadow(0 0 4px rgba(255,60,90,.95));animation:latido 1.15s ease-in-out infinite;transform-origin:50% 55%}
.uni:not(.ex):not(.anillos){animation:latidoAro 1.15s ease-in-out infinite}
@keyframes latido{0%,100%{transform:scale(1)}14%{transform:scale(1.32)}28%{transform:scale(1)}42%{transform:scale(1.22)}70%{transform:scale(1)}}
@keyframes latidoAro{0%,100%{box-shadow:0 0 8px 2px rgba(255,70,100,.45),0 4px 8px rgba(0,0,0,.5)}14%{box-shadow:0 0 16px 6px rgba(255,70,100,.8),0 4px 8px rgba(0,0,0,.5)}28%{box-shadow:0 0 8px 2px rgba(255,70,100,.45),0 4px 8px rgba(0,0,0,.5)}}

/* =====================  Fluidez (60 fps): sin filtros ni sombras animadas, capas propias y fondo en pausa al moverse  ===================== */
.cel,.uni{will-change:transform,opacity}
#lineas,#arbolImg{will-change:transform}
#escena{will-change:transform}
.top,.hora,#ruta button,.zoom button,.leyenda,#panel,#resultados,#miFamilia,.quien{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
#lineas path.hilo{filter:none;stroke-width:2.2}
#lineas path.hilo.ruta{filter:none;stroke-width:3}
#lineas path.aura{fill:none;stroke:rgba(255,190,80,.26);stroke-width:7;stroke-linecap:round;opacity:1}
#lineas g.ruta path.aura{stroke:rgba(255,210,110,.42);stroke-width:9}
#lineas path.chispa{animation:none;opacity:0}
#lineas g.ruta path.chispa{animation:corre 3.6s linear infinite;opacity:.95}
.placa{filter:none;border-radius:8px;box-shadow:0 0 9px rgba(255,190,80,.32)}
.cel.sel .placa{filter:none;box-shadow:0 0 15px 2px rgba(255,205,100,.85)}
.cel.ex .placa{filter:none;box-shadow:0 0 5px rgba(255,190,80,.18)}
.grupo{filter:none;box-shadow:0 0 8px rgba(255,190,80,.7)}
.cel.abierta .grupo{filter:none;box-shadow:0 0 10px 2px rgba(255,210,110,.95)}
.uni.anillos{filter:none}
.uni .lat{filter:none}
.uni:not(.ex):not(.anillos){animation:none;box-shadow:0 0 6px rgba(255,190,80,.5),0 3px 6px rgba(0,0,0,.5)}
.uni:not(.ex):not(.anillos)::after{content:"";position:absolute;inset:-1px;border-radius:50%;box-shadow:0 0 12px 4px rgba(255,70,100,.85);opacity:.35;animation:latidoAro2 1.15s ease-in-out infinite;pointer-events:none}
@keyframes latidoAro2{0%,100%{opacity:.35;transform:scale(1)}14%{opacity:1;transform:scale(1.22)}28%{opacity:.35;transform:scale(1)}}
@keyframes pulso{0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}}
.paj{animation:vuela var(--v) linear infinite!important}
#vista.moviendo #escena *,#vista.moviendo #ambiente *{animation-play-state:paused!important}

/* =====================  Modo editor  ===================== */
.vlink.activo{background:linear-gradient(180deg,#fff2c0,#e8b64c)!important;color:#3a2408!important;border-color:#8a5a1a!important;font-weight:600}
.ed-caja{text-align:left!important}
.ed-caja h2{text-align:center}
.ed-fila,.ed-dos{margin:0 0 10px}
.ed-dos{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.ed-caja label,#claveEd label{display:block;margin:0 0 4px;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:#f3c968;font-weight:600}
.ed-caja input[type=text],.ed-caja input[type=number],.ed-caja input:not([type]),.ed-caja select{width:100%;padding:10px 12px;border-radius:10px;border:1.5px solid #d9a840;background:rgba(0,0,0,.45);color:#fff3da;font-size:.95rem;outline:none;text-align:left}
.ed-caja select option{background:#241a0c;color:#fff3da}
.ed-caja input:focus,.ed-caja select:focus{box-shadow:0 0 0 3px rgba(255,200,90,.35)}
.ed-caja input[type=file]{width:100%;color:#e6d4aa;font-size:.8rem}
.ed-check{display:flex!important;align-items:center;gap:8px;text-transform:none!important;letter-spacing:0!important;font-size:.9rem!important;color:#fff3da!important;cursor:pointer;padding-bottom:10px}
.ed-check input{width:18px;height:18px;accent-color:#e8b64c}
.ed-caja [hidden]{display:none!important}
.ed-botones{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:6px}
.ed-ok{padding:10px 22px;border-radius:999px;border:1px solid #8a5a1a;font-size:.95rem;cursor:pointer}
.ed-ok:disabled{opacity:.55;cursor:wait}
.ed-link{background:none;border:0;color:#d9c48f;text-decoration:underline;font-size:.85rem;cursor:pointer;padding:8px}
.ed-peligro{background:none;border:1px solid #c0584a;color:#ff9a8c;border-radius:999px;padding:8px 14px;font-size:.8rem;cursor:pointer}
#claveEd .caja{text-align:center}
#claveEd input{margin-bottom:6px}
.ed-acciones{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:14px 0 4px;padding:8px 10px;border-radius:12px;background:rgba(232,182,76,.14);border:1px dashed #d9a840}
.ed-acciones span{font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;color:#b9801e;font-weight:700;margin-right:4px}
.ed-acciones button{padding:5px 10px;border-radius:999px;border:1px solid #8a5a1a;background:linear-gradient(180deg,#fff2c0,#e8b64c);color:#3a2408;font-size:.74rem;font-weight:600;cursor:pointer}
.ed-acciones .ed-peligro{background:none;border-color:#c0584a;color:#b0392c}
#aviso{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);z-index:80;max-width:min(520px,calc(100% - 24px));padding:10px 18px;border-radius:14px;background:rgba(30,20,8,.96);color:#fff3da;border:1px solid #d9a840;box-shadow:0 8px 26px rgba(0,0,0,.5);font-size:.88rem;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;text-align:center}
#aviso.on{opacity:1;transform:translate(-50%,0)}

/* =====================  Celular: todas las opciones de edición disponibles y cómodas para el dedo  ===================== */
@media (max-width:820px){
  #btnEditor{display:inline-flex!important;align-items:center}
  .top{align-items:flex-start}
  .acciones{flex-wrap:wrap;gap:6px;width:100%;justify-content:flex-start}
  .acciones button,.acciones .vlink{padding:8px 12px;font-size:.8rem}
  .acciones .sw{display:none}
  .quien-btn{font-size:.8rem!important}
  /* formularios: letra de 16px para que el celular no haga zoom al escribir, y botones grandes */
  .ed-caja,#claveEd .caja,.quien .caja{border-width:20px 24px!important}
  .ed-caja input,.ed-caja select,#claveEd input,.quien input{font-size:16px!important;min-height:44px}
  .ed-dos{grid-template-columns:1fr}
  .ed-ok{width:100%;padding:13px 22px;font-size:1rem}
  .ed-peligro,.ed-link{padding:11px 14px;font-size:.9rem}
  .ed-acciones{gap:8px}
  .ed-acciones button{padding:9px 13px;font-size:.84rem;min-height:38px}
  #aviso{bottom:70px}
}
@media (max-width:820px){#volver{left:14px;top:54px;transform:none;padding:7px 14px;font-size:.78rem}}
.ed-fila,.ed-dos>div{min-width:0}
.ed-caja input,.ed-caja select{max-width:100%;min-width:0;box-sizing:border-box}
.ed-caja{overflow-x:hidden!important}