/* ═══════════════════════════════════════════════════════════
   interfaz.css — textos sobre la escena, controles, portada
   y panel de información.
   ═══════════════════════════════════════════════════════════ */

/* ── Textos sobre la escena ─────────────────────────────── */
#mensaje{
  position:fixed;left:50%;bottom:22vh;transform:translateX(-50%);
  width:min(86vw,540px);text-align:center;
  font-size:clamp(1.05rem,4.4vw,1.5rem);line-height:1.5;font-weight:500;
  color:var(--tinta);text-shadow:0 1px 14px rgba(var(--aura),.9);
  opacity:0;transition:opacity 2.2s ease, color var(--fundido) ease;pointer-events:none;
}
#mensaje.ver{opacity:.92}

#guia{
  position:fixed;left:50%;top:calc(44% + min(24vmin,230px));
  transform:translateX(-50%);
  font-size:clamp(1rem,4vw,1.3rem);letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--tinta);text-shadow:0 1px 12px rgba(var(--aura),.9);
  opacity:0;transition:opacity 1s ease, color var(--fundido) ease;
  pointer-events:none;white-space:nowrap;
}
#guia.ver{opacity:.8}

#reloj{
  position:fixed;top:max(18px,env(safe-area-inset-top));left:50%;
  transform:translateX(-50%);
  font-variant-numeric:tabular-nums;font-size:.95rem;letter-spacing:.1em;
  color:var(--tinta);opacity:0;transition:opacity .8s;
  text-shadow:0 1px 10px rgba(var(--aura),.9);
}
#reloj.ver{opacity:.55}

/* Aviso de la brújula: hacia dónde girar */
#rumbo{
  position:fixed;left:50%;top:max(52px,calc(env(safe-area-inset-top) + 46px));
  transform:translateX(-50%);text-align:center;
  color:var(--tinta);text-shadow:0 1px 12px rgba(var(--aura),.9);
  font-size:clamp(.95rem,3.8vw,1.15rem);font-weight:600;line-height:1.5;
  opacity:0;transition:opacity .8s ease;pointer-events:none;
  width:min(90vw,460px);
}
#rumbo.ver{opacity:.82}
#rumbo .flecha{display:block;font-size:1.9em;line-height:1;margin-bottom:2px}

/* ── Controles ──────────────────────────────────────────── */
#controles{
  position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;
  padding:10px 12px;max-width:min(94vw,760px);
  /* Bastante opaco a propósito: con el sol en el horizonte los controles
     quedan justo encima de la zona más brillante de la escena. */
  background:rgba(255,252,246,.62);
  border:1px solid rgba(255,255,255,.7);
  border-radius:26px;
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 6px 30px rgba(60,40,10,.16);
  opacity:1;transition:opacity .7s ease, transform .7s ease;
}
#controles.oculto{opacity:0;transform:translateX(-50%) translateY(14px);pointer-events:none}

button,.chip{
  font:inherit;font-size:.86rem;font-weight:600;color:var(--tinta);
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.85);
  padding:9px 14px;border-radius:18px;cursor:pointer;
  transition:background .2s,transform .12s,color 3s ease;white-space:nowrap;
}
button:hover{background:rgba(255,255,255,.8)}
button:active{transform:scale(.95)}
button[aria-pressed="true"],button.on{background:#ffffffcc;box-shadow:inset 0 0 0 2px rgba(120,90,40,.4)}
button[disabled]{opacity:.4;cursor:default}

.grupo{display:flex;gap:4px;background:rgba(255,255,255,.28);padding:3px;border-radius:20px}
.grupo button{padding:8px 12px;border:none;background:transparent}
.grupo button.on{background:#fffffff0}

.slider{display:flex;align-items:center;gap:8px;padding:0 8px;font-size:.8rem;opacity:.85}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:96px;height:4px;border-radius:4px;
  background:rgba(140,80,20,.3);outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:#fffdf2;border:2px solid rgba(180,110,30,.6);cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:#fffdf2;
  border:2px solid rgba(180,110,30,.6);cursor:pointer;
}

/* ── Portada ────────────────────────────────────────────── */
#portada{
  position:fixed;inset:0;z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  background:radial-gradient(circle at 50% 45%,#2a1d12 0%,#120c07 60%,#080503 100%);
  text-align:center;padding:24px;transition:opacity 1.6s ease;
}
#portada.ido{opacity:0;pointer-events:none}
#portada p{font-size:.98rem;color:#c9a173;max-width:34ch;line-height:1.6}
#portada .pie{font-size:.82rem;opacity:.6}

#portada .cabecera{
  display:flex;flex-direction:column;align-items:center;gap:12px;
}

/* ── El nombre ──────────────────────────────────────────── */
#portada .marca{
  font-size:clamp(2.7rem,11vw,4.2rem);
  font-weight:600;letter-spacing:.005em;line-height:1;
  color:#ffdca6;
  /* Halo muy tenue: si el texto brilla tanto como el punto, el punto
     deja de leerse como fuente de luz. Aquí solo brilla una cosa. */
  text-shadow:0 2px 24px rgba(255,170,60,.14);
}

/* El punto del medio no es un punto: es el sol de la marca.
   Va como <i> vacío para poder darle degradado y resplandor
   propios, cosa que un carácter "." no permite. */
#portada .marca .punto{
  display:inline-block;position:relative;
  width:.185em;height:.185em;border-radius:50%;
  margin:0 .105em;
  vertical-align:baseline;   /* la base del bloque cae en la línea base */
  background:radial-gradient(circle at 38% 34%,#fffef8 0%,#fff1c4 38%,#ffc363 100%);
  animation:latirPunto 6s ease-in-out infinite;
}

/* Corona: un segundo círculo, desenfocado y detrás. El box-shadow solo
   no basta — se confunde con el halo del texto en vez de leerse como
   una fuente de luz aparte. */
#portada .marca .punto::before{
  content:'';position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:340%;height:340%;border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,232,170,.85) 0%,
    rgba(255,190,90,.42) 32%,
    rgba(255,160,50,.14) 58%,
    transparent 72%);
  filter:blur(3px);
  z-index:-1;
  animation:respirarCorona 6s ease-in-out infinite;
}

@keyframes latirPunto{
  0%,100%{box-shadow:0 0 .3em .03em rgba(255,225,160,.9)}
  50%    {box-shadow:0 0 .5em .07em rgba(255,238,190,1)}
}
@keyframes respirarCorona{
  0%,100%{opacity:.8;  transform:translate(-50%,-50%) scale(1)}
  50%    {opacity:1;   transform:translate(-50%,-50%) scale(1.22)}
}

#portada .lema{
  font-size:clamp(1.02rem,4.2vw,1.28rem);font-weight:500;
  color:#f0c98d;opacity:.92;max-width:26ch;line-height:1.45;
  text-wrap:balance;
}

/* ── La firma de Dobletapia ─────────────────────────────── */
/* El resplandor va en el contenedor y no en el <svg>: un filtro
   sobre el propio SVG se aplicaría antes del relleno degradado. */
#portada .firma{
  position:absolute;left:50%;
  bottom:max(20px,calc(env(safe-area-inset-bottom) + 14px));
  transform:translateX(-50%);
  width:min(186px,44vw);
  opacity:.85;
  filter:drop-shadow(0 0 8px rgba(255,180,80,.45));
  transition:opacity .4s ease;
}
#portada .firma svg{display:block;width:100%;height:auto}

@media (max-height:560px){
  #portada .firma{display:none}   /* en pantallas bajas estorba */
}
#encender{
  margin-top:6px;font-size:1.05rem;padding:16px 34px;border-radius:40px;
  color:#4a2a08;background:linear-gradient(160deg,#ffe9a8,#ffb14a);
  border:none;box-shadow:0 0 50px rgba(255,175,70,.45);
  animation:respirar 4.5s ease-in-out infinite;
}
@keyframes respirar{
  0%,100%{box-shadow:0 0 40px rgba(255,175,70,.35)}
  50%    {box-shadow:0 0 80px rgba(255,190,90,.65)}
}

/* ── Panel de información ───────────────────────────────── */
#info{
  position:fixed;inset:0;z-index:30;display:none;
  align-items:center;justify-content:center;padding:22px;
  background:rgba(30,18,8,.55);backdrop-filter:blur(8px);
}
#info.ver{display:flex}
#info .caja{
  background:#fffaf0;color:#4a3116;border-radius:22px;padding:26px 24px;
  max-width:min(92vw,480px);max-height:86vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.35);line-height:1.6;font-size:.94rem;
  -webkit-user-select:text;user-select:text;
}
#info h2{font-size:1.15rem;margin-bottom:12px;color:#8a4d10}
#info p{margin-bottom:12px}
#info ul{margin:0 0 12px 18px}
#info li{margin-bottom:6px}
#info .nota{
  background:#fff2d6;border-left:3px solid #e69a2e;
  padding:12px 14px;border-radius:8px;font-size:.88rem;margin-bottom:12px;
}
#info .menor{font-size:.85rem;opacity:.7}
#info button{margin-top:8px;width:100%;padding:12px;background:#ffdca0;border:none;color:#4a3116}

@media (max-width:420px){
  #controles{gap:6px;padding:8px}
  button,.chip{font-size:.8rem;padding:8px 11px}
  input[type=range]{width:74px}
  #mensaje{bottom:31vh}
}