/* ======================================================
   CAJA CENTRAL (EDITORIAL)
====================================================== */
.caja-central{
  width:100%;
  max-width:280px;
  margin:0 auto;
  padding:10px 12px;
  background:#2b2b2b;
  box-sizing:border-box;

  font-family:'Cormorant Garamond', serif;
  color:#e6e6e6;
  font-size:14px;
  line-height:1.55;
  letter-spacing:0.2px;

  animation:tintaViva 40s ease-in-out infinite;
}

@keyframes tintaViva{
  0%,100%{ color:#e6e6e6; }
  50%{ color:#ededed; }
}

.caja-central p{
  text-align:justify;
  text-indent:16px;
  margin:0 0 12px 0;
  letter-spacing:0.15px;
}

.caja-central .no-indent{
  text-indent:0;
}


/* ======================================================
   SEPARADOR FRACTAL
====================================================== */
.separador-fractal{
  width:4px;
  position:relative;
}

.separador-fractal::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:2px;

  background:linear-gradient(
    to bottom,
    transparent,
    rgba(214,184,92,.6),
    rgba(255,220,120,.85),
    rgba(214,184,92,.6),
    transparent
  );
}

.separador-fractal::before{
  content:"";
  position:absolute;
  top:-40px;
  left:50%;
  transform:translateX(-50%);
  width:8px;
  height:80px;

  background:linear-gradient(
    to bottom,
    rgba(255,220,120,0),
    rgba(255,220,120,1),
    rgba(214,184,92,1),
    rgba(255,220,120,0)
  );

  filter:blur(1px);
  opacity:0;

  animation:pulso-vertical 4.5s ease-in-out infinite;
}

@keyframes pulso-vertical{
  0%{ top:-40px; opacity:0; }
  20%{ opacity:.8; }
  50%{ opacity:1; }
  80%{ opacity:.8; }
  100%{ top:100%; opacity:0; }
}


/* ======================================================
   CITAS (BASE)
====================================================== */
.cita-lateral{
  width:138px;
  margin:10px auto;
  padding:10px 10px 10px 12px;
  box-sizing:border-box;
  position:relative;

  font-family:'Cormorant Garamond', serif;
  font-size:11px;
  line-height:1.4;

  background:linear-gradient(
    to right,
    rgba(214,184,92,0.08),
    rgba(0,0,0,0)
  );

  border-left:2px solid #d6b85c;

  opacity:.9;
  transition:all .25s ease;

  animation:none;
}

.cita-lateral:hover{
  opacity:1;
  transform:translateX(2px);
  box-shadow:0 0 8px rgba(214,184,92,.25);
  animation:haloCita 6s ease-in-out;
}

@keyframes haloCita{
  0%,100%{ box-shadow:0 0 4px rgba(214,184,92,.12); }
  50%{ box-shadow:0 0 10px rgba(214,184,92,.25); }
}


/* ======================================================
   VARIANTE CENTRAL (300px)
====================================================== */
.cita-lateral.cita-central-anim{
  width:100%;
  font-size:13px;
  line-height:1.55;
  border:1px solid rgba(214,184,92,0.25);
}


/* ======================================================
   ANIMACIÓN ENTRADA CENTRAL
====================================================== */
.cita-central-anim{
  opacity:0;
  transform:translateY(10px);

  animation:fadeGlowEntrada 1.6s ease forwards;
  animation-delay:0.4s;
}

@keyframes fadeGlowEntrada{
  0%{
    opacity:0;
    transform:translateY(14px);
    box-shadow:0 0 0 rgba(214,184,92,0);
  }

  60%{
    opacity:1;
    transform:translateY(0);
    box-shadow:0 0 10px rgba(214,184,92,0.25);
  }

  100%{
    opacity:1;
    transform:translateY(0);
    box-shadow:0 0 6px rgba(214,184,92,0.15);
  }
}


/* ======================================================
   AUTOR
====================================================== */
.autor-cita{
  text-align:left;
  font-size:10.8px;
  color:#e6d08a;
  margin-bottom:3px;
}


/* ======================================================
   TEXTO
====================================================== */
.texto-cita{
  text-align:justify;
  font-style:italic;
  color:#cfcfcf;

  hyphens:auto;
  word-break:normal;
}


/* ======================================================
   REFERENCIAS
====================================================== */
.ref-cita{
  display:block;
  margin-top:4px;
  font-size:10px;
  color:#888;
  letter-spacing:0.5px;
}

.cita-lateral:hover .ref-cita{
  color:#aaa;
}


/* ======================================================
   BANDERAS
====================================================== */
.bandera-autor{
  border-radius:2px;
  transition:all .35s ease;
  filter:brightness(0.95);
}

.bandera-autor:hover{
  filter:
    brightness(1.15)
    drop-shadow(0px 0px 4px rgba(214,184,92,0.6))
    drop-shadow(0px 0px 8px rgba(214,184,92,0.25));
}


/* ======================================================
   CAPITULAR
====================================================== */
.capitular::first-letter{
  float:left;
  font-size:36px;
  line-height:0.8;
  padding-right:6px;
  padding-top:4px;

  color:#e6d08a;

  text-shadow:
    0 0 4px rgba(214,184,92,.35),
    0 0 10px rgba(214,184,92,.2);
}


/* ======================================================
   GLOSAS
====================================================== */
.glosa-cita{
  text-align:center;
  font-size:11px;
  color:#c76a8a;
  margin:8px 0 10px 0;
  line-height:1.35;
  letter-spacing:0.3px;
  opacity:0.85;
}

.glosa-cita.fuerte{
  color:#e6c77a;
  font-size:11.5px;
  opacity:1;
  text-shadow:0 0 6px rgba(214,184,92,0.25);
}

td{
  box-sizing:border-box;
}