/* =====================================================
   Oniromantia – hoja base (banner = fondo global,
   campos anchos, CAPTCHA + botón alineados en una fila)
===================================================== */

/* ---------- Variables de color ---------- */
:root{
  --col-bg-base:#0B0A2D;
  --col-bg-grad-1:#4A3A86;
  --col-bg-grad-2:#5AAEDB;

  --col-text-primary:#F2F2F2;
  --col-text-muted:rgba(242,242,242,.75);

  --col-accent-gold:#EADBC8;
  --col-link:#7FD8BE;
}

/* ---------- Reset mínimo ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* =====================================================
   1. Fondo, tipografía y color de texto
===================================================== */
body{
  font-family:"Lora",serif;
  background:var(--col-bg-base) url("../img/banner.webp") center/cover no-repeat fixed;
  background-blend-mode:overlay;
  color:var(--col-text-primary);
  line-height:1.6;
  overflow-y:auto;                     /* scroll global normal */
}

/* =====================================================
   2. Hero (logo + título)
===================================================== */
.hero{
  position:relative;min-height:35vh;
  display:grid;place-items:center;text-align:center;
  isolation:isolate;                   /* capa ::before no afecta hijos */
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,
              rgba(11,10,45,.60) 0%,
              rgba(11,10,45,.80) 50%,
              rgba(11,10,45,.92) 100%);
  mix-blend-mode:multiply;z-index:-1;
}
.hero-inner{
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
}
.site-logo{
  width:min(36vw,260px);max-height:40vh;
  filter:drop-shadow(0 0 8px rgba(0,0,0,.6));
  animation:fadeInUp .8s ease both;
}
.hero h1{
  font-family:"Cinzel",serif;
  font-size:clamp(1.8rem,3.5vw + .8rem,2.6rem);
  color:var(--col-accent-gold);
  letter-spacing:.05em;
  text-shadow:0 0 6px rgba(0,0,0,.6);
}

/* =====================================================
   3. Área principal
===================================================== */
.orb-wrapper{
  max-width:960px;                     /* ancho cómodo en desktop */
  margin:0 auto 6vh;
  padding:0 1.5rem;
  display:flex;flex-direction:column;
}

/* ---- Campo del sueño -------------------------------- */
.dream-box textarea{
  width:100%;
  height:140px;min-height:120px;
  padding:1.1rem 1.4rem;
  font-size:1.05rem;font-family:"Lora",serif;
  color:var(--col-text-primary);
  background:rgba(11,10,45,.55);
  border:1px solid rgba(234,219,200,.25);
  border-radius:12px;
  box-shadow:inset 0 0 8px rgba(90,174,219,.25);
  resize:vertical;overflow-y:auto;
  transition:border .3s,box-shadow .3s;
}
.dream-box textarea:focus{
  outline:none;border-color:var(--col-link);
  box-shadow:0 0 14px 4px rgba(90,174,219,.35);
}

/* ---- Bloque CAPTCHA + Botón -------------------------- */
.controls{
  margin-top:1.2rem;
  display:flex;
  align-items:center;            /* centra verticalmente */
  justify-content:flex-start;    /* CAPTCHA primero */
  flex-wrap:nowrap;              /* siempre en una fila en desktop */
  gap:1rem;
}
.controls .g-recaptcha{
  flex:0 0 auto;                 /* ancho fijo (≈304 px) */
}
.controls .btn-primary{
  margin:0;
  margin-left:auto;              /* lleva el botón al borde derecho */
}

/* ---- Botón interpretar ------------------------------- */
.btn-primary{
  padding:.8rem 2.2rem;
  font-family:"Cinzel",serif;
  font-size:1.1rem;letter-spacing:.04em;
  border:none;border-radius:6px;
  background:linear-gradient(135deg,var(--col-link) 0%,var(--col-bg-grad-2) 100%);
  color:var(--col-bg-base);cursor:pointer;
  box-shadow:0 0 6px rgba(127,216,190,.6);
  transition:transform .25s,filter .25s,box-shadow .25s;
}
.btn-primary:hover{
  transform:translateY(-3px);
  filter:brightness(1.15);
  box-shadow:0 4px 12px rgba(90,174,219,.5);
}

/* ---- Resultado -------------------------------------- */
.result-box{
  margin-top:1.8rem;
  padding:1.4rem 1.6rem;
  min-height:150px;max-height:90vh;
  font-size:1.05rem;
  background:rgba(11,10,45,.45);
  border:1px solid rgba(127,216,190,.35);
  border-radius:12px;
  box-shadow:inset 0 0 9px rgba(127,216,190,.25);
  overflow-y:auto;
}

/* ---- Responsive controles (≤480 px) ------------------ */
@media (max-width:480px){
  .controls{
    flex-direction:column;
    align-items:stretch;
    flex-wrap:wrap;
  }
  .controls .btn-primary{
    width:100%;
    margin-left:0;
  }
}

/* =====================================================
   4. Botones flotantes
===================================================== */
.kofi-btn{
  position:fixed;bottom:1.5rem;left:1.5rem;z-index:40;
  width:150px;transition:transform .25s;
}
.kofi-btn:hover{transform:translateY(-4px) scale(1.05)}
.about-btn{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:50;
  width:64px;height:64px;background:none;border:none;cursor:pointer;
}
.about-orb{
  width:100%;height:100%;
  filter:drop-shadow(0 0 8px rgba(90,174,219,.45));
  animation:orbPulse 4s ease-in-out infinite, orbRotate 25s linear infinite;
}
@keyframes orbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media (max-width:480px){
  .kofi-btn{bottom:1rem;left:1rem;width:130px}
  .about-btn{bottom:1rem;right:1rem}
}

/* =====================================================
   5. Modal “Acerca”
===================================================== */
.about-modal{
  width:min(90vw,700px);max-height:80vh;padding:0;
  border:1px solid rgba(234,219,200,.25);
  border-radius:16px;
  background:rgba(11,10,45,.85);
  backdrop-filter:blur(12px);
  overflow:hidden;color:var(--col-text-primary);
  animation:fadeInUp .4s ease both;
}
.modal-content{padding:2rem 2.5rem;overflow-y:auto}
.close-btn{
  position:absolute;top:.75rem;right:.75rem;
  background:transparent;border:none;
  font-size:1.5rem;color:var(--col-accent-gold);cursor:pointer;
}

/* =====================================================
   6. Utilidades y accesibilidad
===================================================== */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;
  padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(20px)}
  to  {opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .about-orb,.about-modal{animation:none !important}
}
@keyframes orbRotate{
  from{transform:rotate(0deg)}
  to  {transform:rotate(360deg)}
}



/* ==== Selector de idioma (combo box) ======================= */
.lang-select-wrapper{
  position:fixed;
  /* top:1rem;right:1rem;   //Desactivado porque ya no lo quiero a la derecha */
  top:1rem;
  left:1rem;
  right:auto;
  z-index:60;
}

.lang-select{
  font-family:"Cinzel",serif;
  font-size:.9rem;
  padding:.35rem .8rem;
  background:rgba(11,10,45,.7);
  color:var(--col-text-primary);
  border:1px solid rgba(234,219,200,.3);
  border-radius:6px;
  backdrop-filter:blur(4px);
  cursor:pointer;
}

.lang-select:focus{
  outline:none;
  border-color:var(--col-link);
  box-shadow:0 0 6px rgba(90,174,219,.4);
}

@media (max-width:480px){
  /*.lang-select-wrapper{top:.6rem;right:.6rem} //Desactivado porque ya no lo quiero a la derecha */
  .lang-select-wrapper{top:.6rem;left:.6rem;right:auto;}
  .lang-select{font-size:.8rem;padding:.25rem .6rem}
}